/* AllOutMaine Shop — shop-only styles.
   Layers on https://alloutmaine.com/site.css, which supplies the brand tokens, the
   header/footer chrome and the type scale. Only add rules here that the main site
   genuinely doesn't have — if a shop page needs a look the rest of the site already
   has, reuse that class so the two stay in sync when site.css changes.

   Design intent: the main site is an information directory, and its bordered cards
   and chip nav make a store look like a subsection of a directory. The shop leans
   the other way — borderless cards, big imagery, generous whitespace — so product
   photography carries the page. Brand colours and type are untouched, so the two
   still read as one company. Mobile-first, same as site.css. */

/* site.css caps .wrap at 820px, which is right for reading a court directory but
   leaves a product grid stranded in the middle of a wide screen. Widened here only
   — shop.css loads after site.css — and applied to the shared .wrap so the header,
   utility strip, grid and footer all stay on the same margins. */
.wrap{max-width:1080px}

/* ---- header: brand lockup + cart ------------------------------------------ */
.brand-tag{display:inline-block;margin-left:9px;padding:3px 8px;border-radius:6px;
  background:rgba(244,239,230,.16);color:var(--sand);
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;vertical-align:middle;line-height:1.4}

/* Outlined rather than solid amber: amber is reserved for the real calls to action
   (Add to cart, Checkout), so the persistent cart link shouldn't outshout them. */
.cart-btn{flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border:1px solid rgba(244,239,230,.4);border-radius:999px;
  color:var(--sand);text-decoration:none;font-weight:600;font-size:13.5px;
  transition:background .12s ease,border-color .12s ease}
.cart-btn:hover{background:rgba(244,239,230,.12);border-color:rgba(244,239,230,.7)}
.cart-ico{font-size:15px;line-height:1}
.cart-count{display:inline-block;min-width:19px;padding:1px 6px;border-radius:999px;
  background:var(--amber);color:#3a2a06;font-size:11.5px;font-weight:800;
  line-height:1.55;text-align:center}
/* An author `display` beats the UA stylesheet's [hidden]{display:none}, so an
   empty cart would show a "0" badge without this. Keep the two rules together. */
.cart-count[hidden]{display:none}

/* ---- the demoted site links ----------------------------------------------- */
.shop-utility{background:var(--card);border-bottom:1px solid var(--line)}
.shop-utility-in{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:9px 18px;font-size:12.5px;overflow-x:auto;scrollbar-width:none}
.shop-utility-in::-webkit-scrollbar{display:none}
.su-lead{flex:none;color:var(--muted)}
.su-links{flex:none;display:flex;gap:15px;white-space:nowrap}
.su-links a{color:var(--muted);text-decoration:none;font-weight:600}
.su-links a:hover{color:var(--pine);text-decoration:underline}
.su-links .su-app{color:var(--pine)}
@media (max-width:640px){ .su-lead{display:none} .su-links{margin-left:auto} }

/* ---- preview banner (SHOP_LIVE = false) ----------------------------------- */
.preview-note{margin:16px 0 0;padding:11px 15px;border-radius:10px;
  background:#fdf3dc;border:1px solid #f0dcae;color:#6b4e12;font-size:13.5px}
.preview-note strong{font-weight:800}

/* ---- hero ------------------------------------------------------------------ */
/* Sized so the first product is visible on a phone without scrolling past a wall
   of type — the hero sets the tone, the grid is the point of the page. */
.shop-hero{padding:22px 0 4px}
.shop-hero h1{margin:0 0 10px;font-size:29px;line-height:1.1;letter-spacing:-.4px}
.shop-hero .lede{margin:0;max-width:44ch;font-size:15.5px}

.crumb{margin:16px 0 0;font-size:13.5px}
.crumb a{color:var(--muted);text-decoration:none;font-weight:600}
.crumb a:hover{color:var(--pine);text-decoration:underline}

/* ---- catalog grid ---------------------------------------------------------- */
/* Borderless by design — the product photo is the card. */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
  gap:26px 16px;margin:26px 0 34px}
.prod-card{display:block;text-decoration:none;color:inherit}
.prod-thumb{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:0 1px 2px rgba(31,42,36,.05)}
.prod-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.prod-card:hover .prod-thumb img{transform:scale(1.045)}
/* Placeholder tile for products with no image (see index.php). Tinted by position
   so a row of tiers doesn't read as three identical blanks. */
.prod-ph{display:grid;place-items:center;height:100%;padding:18px;text-align:center;
  background:linear-gradient(150deg,var(--harbor) 0%,var(--harbor-lite) 100%)}
.prod-ph span{font-family:var(--serif);font-weight:900;font-size:27px;line-height:1.1;
  color:var(--sand);letter-spacing:-.3px}
.prod-card:nth-child(3n+2) .prod-ph{background:linear-gradient(150deg,var(--pine) 0%,#4d8449 100%)}
.prod-card:nth-child(3n+3) .prod-ph{background:linear-gradient(150deg,#8a5a12 0%,var(--amber) 100%)}

.prod-flag{position:absolute;top:10px;left:10px;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:rgba(31,42,36,.84);color:#fff;backdrop-filter:blur(3px)}
.prod-flag.on{background:var(--amber);color:#3a2a06}
.prod-card.is-sold .prod-thumb img{filter:grayscale(1);opacity:.55}
.prod-body{padding:12px 2px 0}
.prod-body h3{margin:0 0 2px;font-family:var(--sans);font-weight:600;font-size:15px;
  line-height:1.3;letter-spacing:-.1px}
.prod-body .meta{margin:0 0 5px;font-size:13px;color:var(--muted)}
.prod-price{margin:0;font-weight:700;font-size:15px;color:var(--ink)}
.prod-price s{color:var(--muted);font-weight:500;margin-left:6px}
.prod-price.lg{font-size:27px;margin:4px 0 22px;font-family:var(--serif);font-weight:700}

/* ---- trust row -------------------------------------------------------------- */
.trust-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 36px;padding:20px 0 0;
  border-top:1px solid var(--line);list-style:none;font-size:13px;color:var(--muted)}
.trust-row li{display:flex;align-items:center;gap:7px}

/* Legal footnote — present and readable, but not shouting. */
.fine-print{margin:-22px 0 34px;font-size:12px;line-height:1.5;color:var(--muted);max-width:62ch}

/* ---- product detail --------------------------------------------------------- */
.prod-detail{display:grid;gap:24px;margin:14px 0 40px}
.prod-gallery{display:grid;gap:10px}
.prod-gallery img{width:100%;border-radius:16px;background:#fff;display:block;
  box-shadow:0 1px 2px rgba(31,42,36,.05)}
.prod-info h1{margin:0 0 6px;font-size:31px;line-height:1.1;letter-spacing:-.4px}
.prod-info .lede{margin:0 0 4px;font-size:16px}
.variant-select{width:100%;max-width:340px;font:inherit;font-size:15px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;margin-bottom:16px}
.prod-desc{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  color:#4a564f;font-size:15.5px}

.buy-btn{display:block;width:100%;max-width:340px;font:inherit;font-weight:700;font-size:16px;
  color:#3a2a06;background:var(--amber);border:0;border-radius:999px;padding:15px 22px;
  cursor:pointer;transition:transform .12s ease,filter .12s ease}
.buy-btn:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-1px)}
.buy-btn:disabled{background:#e6e2d8;color:var(--muted);cursor:not-allowed}
.buy-btn.added{background:var(--mint);color:#14402b}
.buy-note{margin:10px 0 0;font-size:13px;color:var(--muted);max-width:340px}
.buy-note.err{color:#9a3412;font-weight:600}

/* ---- cart -------------------------------------------------------------------- */
.cart-root{margin:18px 0 38px}
.cart-card{padding:4px 18px 20px;border-radius:16px}
.cart-row{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line)}
.cart-thumb{width:66px;height:66px;border-radius:11px;overflow:hidden;background:#f7f4ee}
.cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cart-main h3{margin:0 0 3px;font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3}
.cart-main .meta{margin:0 0 10px;font-size:13px;color:var(--muted)}
.cart-line{font-weight:700;font-size:15px;white-space:nowrap}

.qty{display:flex;align-items:center;gap:9px}
.qty button{font:inherit;font-size:15px;font-weight:700;line-height:1;color:var(--harbor);
  background:var(--sand);border:1px solid var(--line);border-radius:9px;
  width:31px;height:31px;cursor:pointer}
.qty button:hover{background:#ece6da}
.qty span{min-width:18px;text-align:center;font-weight:700;font-size:14.5px}
.qty .rm{width:auto;padding:0 11px;font-size:12.5px;font-weight:600;color:var(--muted);
  background:none;border:0}
.qty .rm:hover{color:#9a3412;text-decoration:underline;background:none}

.cart-sum{display:flex;justify-content:space-between;align-items:baseline;
  padding:18px 0 4px;font-size:16px}
.cart-sum strong{font-size:23px;font-family:var(--serif)}
.cart-note{margin:0 0 18px;font-size:13px;color:var(--muted)}

/* ---- empty / confirmation states ---------------------------------------------- */
.shop-empty{margin:22px 0 34px;text-align:center;padding:34px 22px;border-radius:16px}
.shop-empty h3{margin:0 0 8px;font-family:var(--serif);font-size:20px}
.shop-empty .meta{margin:0}
.order-done{margin:22px 0 38px;padding:34px 24px;border-radius:16px}
.order-done h1{margin-top:0}
.order-done .app-btn{margin-top:6px}

/* ---- wider screens -------------------------------------------------------------- */
@media (min-width:700px){
  .shop-hero{padding:42px 0 10px}
  /* Cap the headline, not the section — a max-width here would squeeze the lede too. */
  .shop-hero h1{max-width:15ch;font-size:46px;line-height:1.04;letter-spacing:-1.1px}
  .shop-hero .lede{font-size:16.5px}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:34px 22px;margin:34px 0 42px}
  .prod-detail{grid-template-columns:1.05fr 1fr;gap:44px;align-items:start}
  /* Keep price and buy button in view while a long description scrolls. */
  .prod-info{position:sticky;top:88px}
  .prod-info h1{font-size:36px}
  .cart-row{grid-template-columns:88px 1fr auto;gap:18px}
  .cart-thumb{width:88px;height:88px}
}