/* ajthe.dev/shop — additions on top of /assets/css/site.css ("Precision Workshop").
   Only tokens from site.css are used here; no new colours, no new fonts. */

/* Buy buttons: gumroad.js restyles .gumroad-button into its own white pill and
   prepends a logo span. Keep the site's amber .btn look instead. */
.shop a.btn.gumroad-button,
.shop a.btn.gumroad-button:visited {
  background: var(--amber) !important; color: #0b0d10 !important;
  border: 1px solid var(--amber) !important; border-radius: var(--r) !important;
  font-family: var(--mono) !important; font-weight: 600 !important; font-size: .78rem !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  padding: .9rem 1.4rem !important; line-height: 1.2 !important;
  box-shadow: 4px 4px 0 rgba(255, 178, 36, .18) !important;
  display: inline-flex !important; align-items: center; gap: .6rem;
  text-decoration: none !important; background-image: none !important;
}
.shop a.btn.gumroad-button:hover {
  background: var(--amber-hi) !important; border-color: var(--amber-hi) !important;
  box-shadow: 6px 7px 0 rgba(255, 178, 36, .22), var(--shadow-amber) !important;
}
.shop a.btn.gumroad-button.btn--lg { padding: 1.1rem 1.9rem !important; font-size: .84rem !important; }
.shop a.btn.gumroad-button.btn--ghost {
  background: transparent !important; color: var(--ink) !important;
  border-color: var(--wire) !important; box-shadow: none !important;
}
.shop a.btn.gumroad-button.btn--ghost:hover { border-color: var(--amber) !important; color: var(--amber-hi) !important; background: var(--amber-06) !important; }
.shop .gumroad-button-logo, .shop .gumroad-button img { display: none !important; }
.shop .gumroad-button-wrapper { display: inline-flex; }
.buy__price { font-weight: 600; opacity: .85; }
.buy__price::before { content: "·"; margin-right: .6rem; opacity: .6; }

/* Page head */
.shop .pagehead .kicker { margin-bottom: .2rem; }
.shop-name { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .6rem; }
.shop-h2 { font-family: var(--display); font-weight: 800; font-size: var(--t-2); letter-spacing: -.02em; line-height: 1.05; margin: .6rem 0 1rem; }

/* Gallery */
.shop-gallery { display: grid; gap: 1rem; }
.shop-gallery--2 { grid-template-columns: 1fr; }
.shop-gallery--3 { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .shop-gallery--2 { grid-template-columns: 1fr 1fr; }
  .shop-gallery--3 { grid-template-columns: 2fr 1fr; }
  .shop-gallery--3 figure:first-child { grid-row: span 2; }
}
.shop-gallery figure { margin: 0; }
.shop-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--wire); }
.shop-video { margin-top: 1rem; }

/* Pricing cards */
.shop .price .btn { width: max-content; }
.shop .price .feature-list { margin-block: .2rem .4rem; }
.shop-blurb { min-height: 2.6em; }
.shop-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.shop-fineprint a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }

/* Gumroad description fallback (the listing's own HTML) */
.shop-desc { margin-top: 2.5rem; }
.shop-desc summary {
  cursor: pointer; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); padding: .8rem 0; border-top: 1px solid var(--wire); border-bottom: 1px solid var(--wire);
}
.shop-desc .article { margin-top: 1.6rem; }
.shop-desc .article h1 { font-family: var(--display); font-weight: 800; font-size: var(--t-2); letter-spacing: -.02em; line-height: 1.05; }
.shop-desc .article img { max-width: 100%; height: auto; }

/* Footer link colour inside the readout */
.shop .ftr-readout a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.shop .ftr-readout a:hover { color: var(--amber); }

/* A single-price product: one card, not a half-empty two-column grid */
.shop-grid--1 { grid-template-columns: 1fr; max-width: 560px; }