:root {
  --shop-ink:#17231d;
  --shop-muted:#647068;
  --shop-paper:#f5f1e8;
  --shop-card:#fffdf7;
  --shop-green:#194c3a;
  --shop-green-dark:#103528;
  --shop-fynbos:#a84d32;
  --shop-gold:#ca963e;
  --shop-line:rgba(23,35,29,.16);
  --shop-shadow:0 18px 48px rgba(26,39,31,.12);
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--shop-ink); background:var(--shop-paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[role="button"]:focus-visible { outline:3px solid var(--shop-gold); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.shop-skip { position:fixed; top:8px; left:8px; z-index:100; min-height:44px; display:flex; align-items:center; padding:10px 14px; color:#fff; background:var(--shop-green); transform:translateY(-150%); }
.shop-skip:focus { transform:none; }
.shop-header { position:sticky; top:0; z-index:30; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px clamp(20px,5vw,72px); background:rgba(245,241,232,.94); border-bottom:1px solid var(--shop-line); backdrop-filter:blur(16px); }
.shop-brand { min-width:0; min-height:44px; display:flex; align-items:center; gap:12px; text-decoration:none; }
.shop-brand-mark { width:42px; height:42px; display:grid; place-items:center; color:#fff; background:var(--shop-green); border-radius:50% 50% 50% 8px; font:800 12px Georgia,serif; letter-spacing:.04em; }
.shop-brand-mark.has-logo { overflow:hidden; background:transparent; border-radius:50%; }
.shop-brand-mark.has-logo img { width:100%; height:100%; display:block; object-fit:contain; }
.shop-brand > span:last-child { min-width:0; display:grid; }
.shop-brand strong { overflow:hidden; font-family:Georgia,"Times New Roman",serif; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.shop-brand small { color:var(--shop-muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.shop-header nav { display:flex; align-items:center; gap:24px; }
.shop-header nav a { min-height:44px; display:inline-flex; align-items:center; font-size:13px; font-weight:700; text-decoration:none; }
.shop-cart-button { min-height:44px; display:flex; align-items:center; gap:8px; padding:10px 14px; color:#fff; background:var(--shop-green); border:0; border-radius:999px; cursor:pointer; }
.shop-cart-button span { min-width:22px; height:22px; display:grid; place-items:center; color:var(--shop-green); background:#fff; border-radius:50%; font-size:11px; font-weight:800; }
.shop-intro { min-height:460px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); align-items:end; gap:56px; padding:clamp(70px,10vw,132px) clamp(20px,8vw,120px) 72px; color:#fff; background:
  radial-gradient(circle at 80% 15%,rgba(202,150,62,.22),transparent 28%),
  linear-gradient(135deg,var(--shop-green-dark),#1d5c45 58%,#153e31); }
.shop-kicker { margin:0 0 10px; color:var(--shop-fynbos); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.shop-intro .shop-kicker { color:#efb56d; }
/* Evening/limited-hours venues only (2026-09-10) -- hidden entirely for a venue with no
   configured service window, so this never appears for a normal always-open club. */
#shopServiceWindowStatus { display:inline-flex; align-items:center; gap:7px; margin:0 0 14px; padding:6px 12px; color:#fff; font-size:12px; font-weight:700; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:999px; }
#shopServiceWindowStatus::before { content:""; width:8px; height:8px; border-radius:50%; background:#75d09b; box-shadow:0 0 0 4px rgba(117,208,155,.18); }
#shopServiceWindowStatus.is-closed::before { background:#efb56d; box-shadow:0 0 0 4px rgba(239,181,110,.18); }
.shop-intro h1 { max-width:850px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(46px,7vw,92px); font-weight:400; letter-spacing:-.045em; line-height:.96; }
#shopWelcome { max-width:610px; margin:26px 0 0; color:rgba(255,255,255,.72); font-size:clamp(16px,1.6vw,21px); line-height:1.55; }
.shop-finder-entry { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:26px; }
.shop-finder-entry .shop-primary { width:auto; min-width:176px; }
.shop-finder-entry a { min-height:44px; display:inline-flex; align-items:center; color:#fff; font-weight:750; text-underline-offset:4px; }
.shop-service-card { display:flex; align-items:flex-start; gap:13px; padding:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:18px; }
.shop-service-card div { display:grid; gap:6px; }
.shop-service-card strong { font-size:14px; }
.shop-service-card small { color:rgba(255,255,255,.62); line-height:1.45; }
.shop-service-pulse { flex:0 0 auto; width:10px; height:10px; margin-top:4px; background:#75d09b; border:2px solid rgba(255,255,255,.35); border-radius:50%; box-shadow:0 0 0 6px rgba(117,208,155,.12); }
/* Hero photo (2026-09-04): opt-in per venue via venuePublic.branding.heroImageUrl. Hiding
   .shop-service-card removes it from .shop-intro's grid flow, so #shopHeroImage -- the next
   child in DOM order -- auto-places into the vacated second column with no explicit placement.
   Bleeds to the section's own right edge (negative margin equal to the section's own side
   padding) rather than sitting boxed inside the column, and carries no border-radius/shadow --
   a photo is meant to sit directly on the hero's gradient, not read as a card floating on it.
   Column ratio, top padding and type scale below are tuned against a reference design (a
   1280x720 Canva mock) and ONLY take effect via .shop-hero-active, so a venue with no hero photo
   keeps the exact layout shipped before this. */
/* min-width guarded: unscoped, this out-specifies (two classes vs one) the max-width:900px and
   640px rules further down that collapse .shop-intro to one column on a phone, regardless of
   which comes later in the file -- media query or not, specificity alone decides that tie. */
.shop-hero-image { align-self:stretch; width:100%; min-height:220px; object-fit:cover; object-position:top center; border-radius:0; box-shadow:none; }
@media (min-width:901px) {
  .shop-hero-active .shop-intro { grid-template-columns:minmax(0,1.15fr) minmax(320px,.9fr); gap:36px; padding-top:190px; align-items:center; }
  .shop-hero-active .shop-intro h1 { font-size:clamp(40px,5vw,65px); }
  /* Bleeds to the section's own right edge instead of sitting boxed inside its column -- only
     safe once the intro is a real two-column row (the mobile rule above stacks the image full
     width; bleeding it there would push the page into horizontal scroll). */
  .shop-hero-image { width:calc(100% + clamp(20px,8vw,120px)); margin-right:calc(-1 * clamp(20px,8vw,120px)); }
}
.shop-hero-cta { display:inline-flex; align-items:center; gap:16px; margin-top:70px; padding:20px 28px; color:#1a1200; background:var(--shop-gold); border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.22); }
.shop-hero-cta-icon { flex:0 0 auto; width:34px; height:34px; background:rgba(26,18,0,.14); border-radius:50%; }
.shop-hero-cta-icon::after { content:"✓"; display:grid; width:100%; height:100%; place-items:center; font-size:14px; font-weight:900; }
#shopHeroCtaText { font-size:15px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; }
.shop-catalogue { padding:clamp(70px,8vw,110px) clamp(20px,6vw,90px); }
.shop-section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:28px; }
.shop-section-head h2,.shop-story h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(34px,4vw,58px); font-weight:400; letter-spacing:-.035em; }
.shop-search input { width:min(330px,42vw); min-height:48px; padding:0 18px; color:var(--shop-ink); background:var(--shop-card); border:1px solid var(--shop-line); border-radius:999px; outline:none; }
.shop-search input:focus { border-color:var(--shop-green); box-shadow:0 0 0 3px rgba(25,76,58,.12); }
.shop-categories { display:flex; gap:8px; margin-bottom:32px; overflow-x:auto; scrollbar-width:none; }
.shop-categories::-webkit-scrollbar { display:none; }
.shop-category { flex:0 0 auto; min-height:44px; padding:9px 14px; color:var(--shop-muted); background:transparent; border:1px solid var(--shop-line); border-radius:999px; cursor:pointer; }
.shop-category[aria-pressed="true"] { color:#fff; background:var(--shop-green); border-color:var(--shop-green); }
.shop-filter-tools { margin:-14px 0 26px; }
.shop-filter-desktop { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }
.shop-filter-desktop label,.shop-filter-sheet-fields label { display:grid; gap:6px; color:var(--shop-muted); font-size:12px; font-weight:800; }
.shop-filter-desktop select,.shop-filter-sheet-fields select { min-width:150px; min-height:44px; padding:0 38px 0 12px; color:var(--shop-ink); background:var(--shop-card); border:1px solid var(--shop-line); border-radius:12px; }
.shop-filter-clear,.shop-filter-open,.shop-text-button { min-height:44px; padding:0 12px; color:var(--shop-green); background:transparent; border:0; font-weight:800; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.shop-filter-open { display:none; align-items:center; gap:8px; padding:0 16px; border:1px solid var(--shop-line); border-radius:999px; text-decoration:none; }
.shop-filter-open span { min-width:22px; height:22px; display:grid; place-items:center; color:#fff; background:var(--shop-green); border-radius:50%; font-size:11px; }
.shop-status { min-height:24px; margin:0 0 20px; color:var(--shop-muted); font-size:13px; }
.shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.shop-product { min-width:0; display:grid; grid-template-rows:240px auto; overflow:hidden; background:var(--shop-card); border:1px solid var(--shop-line); border-radius:24px 24px 24px 6px; box-shadow:0 2px 0 rgba(23,35,29,.03); transition:transform .2s ease,box-shadow .2s ease; }
.shop-product:hover { transform:translateY(-4px); box-shadow:var(--shop-shadow); }
.shop-product-media { position:relative; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#d8decf,#ebe4d5); cursor:pointer; }
.shop-product-media img { width:100%; height:100%; object-fit:cover; }
.shop-product-monogram { color:rgba(25,76,58,.62); font-family:Georgia,serif; font-size:64px; font-style:italic; }
.shop-product-badge { position:absolute; top:16px; left:16px; padding:7px 10px; color:#fff; background:var(--shop-fynbos); border-radius:999px; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.shop-product-body { display:grid; gap:14px; padding:20px; }
.shop-product-body > div:first-child { display:grid; gap:5px; }
.shop-product-meta { color:var(--shop-muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.shop-product h3 { min-height:2.35em; display:-webkit-box; overflow:hidden; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:23px; font-weight:500; line-height:1.17; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.shop-product-description { min-height:42px; margin:0; color:var(--shop-muted); font-size:13px; line-height:1.55; }
.shop-choice-chips { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.shop-choice-chips li { padding:6px 9px; color:var(--shop-green); background:color-mix(in srgb,var(--shop-green) 8%,transparent); border:1px solid color-mix(in srgb,var(--shop-green) 18%,transparent); border-radius:999px; font-size:10px; font-weight:750; }
.shop-product-action { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.shop-product-buttons { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.shop-product-price { display:grid; gap:2px; }
.shop-product-price strong { font-size:18px; }
.shop-product-price small { color:var(--shop-muted); font-size:10px; text-transform:capitalize; }
.shop-add,.shop-primary { min-height:44px; padding:0 18px; color:#fff; background:var(--shop-green); border:0; border-radius:999px; font-weight:800; cursor:pointer; }
.shop-details { min-height:44px; padding:0 16px; color:var(--shop-green); background:transparent; border:1px solid color-mix(in srgb,var(--shop-green) 30%,var(--shop-line)); border-radius:999px; font-weight:800; cursor:pointer; }
.shop-details:hover { background:color-mix(in srgb,var(--shop-green) 8%,transparent); }
.shop-add:disabled,.shop-primary:disabled { cursor:not-allowed; opacity:.42; }
.shop-card-quantity { min-height:44px; display:grid; grid-template-columns:44px 28px 44px; align-items:stretch; justify-items:stretch; color:var(--shop-green); background:rgba(25,76,58,.08); border:1px solid rgba(25,76,58,.2); border-radius:999px; font-weight:850; }
.shop-card-quantity span { display:grid; place-items:center; }
.shop-card-quantity button { width:44px; min-height:44px; padding:0; color:inherit; background:transparent; border:0; border-radius:50%; cursor:pointer; font-size:20px; }
/* Evening/limited-hours venues only (2026-09-10) -- hidden entirely for a venue that never
   turns the feature on. Deliberately its own full-width strip, not folded into the small
   #shopServiceWindowStatus pill further down the hero: browsing while closed should say so
   immediately, not leave it to a badge someone might not read closely. */
#shopPreOrderBanner { margin:0; padding:12px clamp(20px,5vw,72px); color:#5c3a12; font-size:13px; font-weight:700; text-align:center; background:#f6e2c3; border-bottom:1px solid rgba(168,77,50,.18); }
.shop-how { padding:clamp(40px,5vw,64px) clamp(20px,8vw,120px); background:var(--shop-card); border-bottom:1px solid var(--shop-line); }
.shop-how .shop-kicker { color:var(--shop-fynbos); }
.shop-how h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(24px,2.6vw,32px); font-weight:400; letter-spacing:-.02em; }
.shop-how-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:28px; }
.shop-how-grid article { padding-top:14px; border-top:2px solid var(--shop-green); }
.shop-how-grid article span { color:var(--shop-fynbos); font-size:11px; font-weight:900; }
.shop-how-grid h3 { margin:10px 0 6px; font-size:15px; }
.shop-how-grid p { margin:0; color:var(--shop-muted); font-size:13px; line-height:1.55; }
.shop-story { padding:clamp(70px,9vw,120px) clamp(20px,8vw,120px); background:#e7dfd0; }
.shop-story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:52px; }
.shop-story article { padding-top:20px; border-top:1px solid var(--shop-ink); }
.shop-story article span { color:var(--shop-fynbos); font-size:11px; font-weight:900; }
.shop-story h3 { margin:26px 0 8px; font-family:Georgia,serif; font-size:22px; }
.shop-story article p { margin:0; color:var(--shop-muted); font-size:14px; line-height:1.65; }
.shop-footer { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:44px clamp(20px,6vw,90px); color:rgba(255,255,255,.7); background:#101d17; }
.shop-footer[hidden] { display:none; }
.shop-footer div { max-width:580px; }
.shop-footer strong { color:#fff; font-family:Georgia,serif; font-size:21px; }
.shop-footer p,.shop-footer span { margin:7px 0 0; font-size:11px; line-height:1.55; }
.shop-backdrop { position:fixed; inset:0; z-index:50; background:rgba(8,20,14,.54); backdrop-filter:blur(3px); }
.shop-drawer { position:fixed; top:0; right:0; bottom:0; z-index:60; width:min(460px,100vw); display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:26px; background:var(--shop-card); box-shadow:-24px 0 70px rgba(8,20,14,.22); transform:translateX(105%); visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s; }
.shop-drawer.is-open { transform:none; visibility:visible; transition:transform .25s ease, visibility 0s; }
.shop-drawer-head { display:flex; align-items:start; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--shop-line); }
.shop-drawer h2 { margin:0; font:400 38px Georgia,serif; }
.shop-drawer-head button,.shop-dialog-close { width:44px; height:44px; color:var(--shop-ink); background:transparent; border:1px solid var(--shop-line); border-radius:50%; font-size:25px; cursor:pointer; }
.shop-cart-items { display:grid; align-content:start; gap:14px; overflow-y:auto; padding:22px 2px; }
.shop-cart-empty { padding:46px 18px; color:var(--shop-muted); text-align:center; }
.shop-cart-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--shop-line); }
.shop-cart-item > div:first-child { display:grid; gap:4px; }
.shop-cart-item small { color:var(--shop-muted); }
.shop-cart-controls { display:flex; align-items:center; gap:8px; }
.shop-cart-controls button { width:44px; height:44px; background:transparent; border:1px solid var(--shop-line); border-radius:50%; cursor:pointer; }
.shop-cart-foot { display:grid; gap:13px; padding-top:18px; border-top:1px solid var(--shop-line); }
.shop-cart-foot > div { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.shop-cart-foot > div span { color:var(--shop-muted); font-size:12px; }
.shop-cart-foot > div strong { font-size:23px; }
.shop-cart-foot p { margin:0; color:var(--shop-muted); font-size:11px; }
.shop-cart-foot > .shop-delivery-choice { display:grid; align-items:stretch; justify-content:stretch; gap:7px; padding:12px; background:var(--shop-paper); border-radius:13px; }
.shop-delivery-choice label { color:var(--shop-ink); font-size:11px; font-weight:850; }
.shop-delivery-choice select { width:100%; min-height:44px; padding:0 36px 0 12px; color:var(--shop-ink); background:var(--shop-card); border:1px solid var(--shop-line); border-radius:10px; }
.shop-cart-foot > .shop-cart-grand { margin-top:2px; padding-top:12px; border-top:1px solid var(--shop-line); }
.shop-primary { width:100%; min-height:54px; }
.shop-product-dialog { width:min(860px,calc(100vw - 32px)); max-height:90vh; padding:0; overflow:auto; color:var(--shop-ink); background:var(--shop-card); border:0; border-radius:26px 26px 26px 7px; box-shadow:var(--shop-shadow); }
.shop-product-dialog::backdrop { background:rgba(8,20,14,.62); backdrop-filter:blur(4px); }
.shop-dialog-close { position:absolute; top:16px; right:16px; z-index:2; background:rgba(255,253,247,.92); }
.shop-detail { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); }
/* align-self:start + aspect-ratio (not min-height alone) is what actually matters here: this
   sits in a two-column grid next to .shop-detail-copy, whose stacked fact tiles/tags/story
   sections can run much taller than any one photo -- a plain min-height item, by default a
   grid stretches every item in a row to the row's own height, so the image was stretching to
   match the COPY column's height, not its own, and object-fit:cover then cropped it down to a
   tight vertical sliver of the actual photo. Sizing from aspect-ratio (fixed by the media
   column's own width, unrelated to the sibling) and opting out of the stretch is what keeps a
   normal, full-bud crop regardless of how long the product's own copy runs.  */
.shop-detail-media { align-self:start; aspect-ratio:4/5; max-height:520px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#d8decf,#ebe4d5); }
.shop-detail-media img { width:100%; height:100%; object-fit:cover; }
.shop-detail-copy { display:grid; align-content:center; gap:18px; padding:48px; }
.shop-detail-copy h2 { margin:0; font:400 clamp(34px,5vw,54px)/1 Georgia,serif; }
.shop-detail-copy > p { margin:0; color:var(--shop-muted); line-height:1.65; }
.shop-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.shop-fact { padding:12px; background:var(--shop-paper); border-radius:12px; }
.shop-fact small { display:block; color:var(--shop-muted); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.shop-fact strong { display:block; margin-top:4px; font-size:13px; }
.shop-detail-section { display:grid; gap:8px; }
.shop-detail-section h3 { margin:0; color:var(--shop-muted); font-size:10px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.shop-detail-section ul { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.shop-detail-section li { padding:7px 10px; color:var(--shop-green); background:color-mix(in srgb,var(--shop-green) 8%,transparent); border-radius:999px; font-size:12px; font-weight:750; }
.shop-detail-fit { padding:14px; background:color-mix(in srgb,var(--shop-gold) 13%,var(--shop-paper)); border-left:3px solid var(--shop-fynbos); border-radius:4px 12px 12px 4px; }
.shop-detail-fit small { color:var(--shop-fynbos); font-size:9px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.shop-detail-fit p { margin:5px 0 0; color:var(--shop-ink); font-size:13px; line-height:1.55; }
.shop-option-picker { display:grid; gap:7px; color:var(--shop-muted); font-size:11px; font-weight:800; letter-spacing:.04em; }
.shop-option-select { min-height:44px; width:100%; padding:9px 12px; color:var(--shop-ink); background:var(--shop-paper); border:1px solid var(--shop-line); border-radius:10px; font:inherit; }
.shop-responsible { padding-top:12px; border-top:1px solid var(--shop-line); font-size:11px; }
.shop-detail-price { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.shop-detail-price > div { display:flex; align-items:baseline; flex-wrap:wrap; }
.shop-detail-price > div strong { font-size:25px; }
.shop-detail-price > div small { color:var(--shop-muted); font-size:11px; }
.shop-coa { font-size:12px; font-weight:800; }
.shop-toast { position:fixed; left:50%; bottom:28px; z-index:80; padding:12px 18px; color:#fff; background:var(--shop-green-dark); border-radius:999px; box-shadow:var(--shop-shadow); opacity:0; pointer-events:none; transform:translate(-50%,18px); transition:.2s ease; }
.shop-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.shop-mobile-cart { display:none; }
body.shop-locked { overflow:hidden; }

/* Guided choice is present in shared static code but is revealed only after the exact
   venuePublic guidedShopEnabled flag and catalogue-readiness check pass in js/shop.js. */
.shop-finder { scroll-margin-top:76px; padding:clamp(54px,7vw,88px) clamp(20px,8vw,120px); background:color-mix(in srgb,var(--shop-green) 7%,var(--shop-paper)); }
.shop-finder-shell { max-width:1260px; margin:auto; padding:clamp(24px,4vw,50px); background:var(--shop-card); border:1px solid var(--shop-line); border-radius:28px 28px 28px 8px; box-shadow:var(--shop-shadow); }
.shop-finder-heading,.shop-finder-results-head { display:flex; align-items:start; justify-content:space-between; gap:24px; }
.shop-finder h2 { max-width:740px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(34px,5vw,58px); font-weight:400; letter-spacing:-.035em; line-height:1.02; }
.shop-finder-question { max-width:880px; margin:44px auto 0; }
.shop-finder-progress { margin:0 0 9px; color:var(--shop-fynbos); font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.shop-finder-question h3,.shop-finder-results-head h3 { margin:0; font:400 clamp(28px,4vw,44px)/1.1 Georgia,"Times New Roman",serif; }
.shop-finder-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:28px 0; }
.shop-finder-choice { min-height:58px; padding:12px 16px; color:var(--shop-ink); background:var(--shop-paper); border:1px solid var(--shop-line); border-radius:16px 16px 16px 5px; font-weight:750; text-align:left; cursor:pointer; }
.shop-finder-choice[aria-pressed="true"] { color:#fff; background:var(--shop-green); border-color:var(--shop-green); box-shadow:inset 0 0 0 2px var(--shop-card); }
.shop-finder-choice[aria-pressed="true"]::after { content:" ✓"; font-weight:900; }
.shop-finder-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.shop-finder-actions .shop-add { min-width:150px; }
.shop-finder-summary { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.shop-finder-summary button { min-height:44px; padding:8px 12px; color:var(--shop-green); background:var(--shop-paper); border:1px solid var(--shop-line); border-radius:999px; cursor:pointer; }
.shop-guided-results { margin-top:30px; }
.shop-product-guided { border-color:color-mix(in srgb,var(--shop-green) 55%,var(--shop-line)); }
.shop-result-label { width:max-content; padding:6px 9px; color:#fff; background:var(--shop-fynbos); border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.shop-result-reason { padding:13px; background:color-mix(in srgb,var(--shop-gold) 12%,var(--shop-paper)); border-left:3px solid var(--shop-fynbos); border-radius:4px 12px 12px 4px; }
.shop-result-reason strong { color:var(--shop-fynbos); font-size:11px; }
.shop-result-reason p { margin:5px 0 0; font-size:14px; line-height:1.5; }
.shop-finder-empty { margin:30px 0 0; padding:24px; background:var(--shop-paper); border:1px solid var(--shop-line); border-radius:18px 18px 18px 6px; }
.shop-finder-empty p { max-width:680px; margin:0 0 16px; color:var(--shop-muted); line-height:1.6; }
.shop-finder-empty a { min-height:44px; display:inline-flex; align-items:center; color:var(--shop-green); font-weight:850; }
.shop-no-results p { margin:0 0 16px; }
.shop-filter-dialog { width:min(560px,calc(100vw - 28px)); padding:26px; color:var(--shop-ink); background:var(--shop-card); border:0; border-radius:24px 24px 24px 7px; box-shadow:var(--shop-shadow); }
.shop-filter-dialog::backdrop { background:rgba(8,20,14,.62); backdrop-filter:blur(4px); }
.shop-filter-sheet-head { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.shop-filter-sheet-head h2 { margin:0; font:400 36px Georgia,"Times New Roman",serif; }
.shop-filter-sheet-head .shop-dialog-close { position:static; flex:0 0 auto; }
.shop-filter-sheet-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:26px 0; }
.shop-filter-sheet-fields select { width:100%; min-width:0; }
.shop-filter-sheet-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; }
@media (max-width:900px) {
  .shop-intro { grid-template-columns:1fr; min-height:520px; }
  .shop-service-card { max-width:520px; }
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop-product { grid-template-rows:210px auto; }
  .shop-detail { grid-template-columns:1fr; }
  .shop-detail-media { aspect-ratio:auto; min-height:320px; max-height:390px; }
  .shop-filter-desktop label { flex:1 1 180px; }
  .shop-filter-desktop select { width:100%; }
  .shop-finder-results-head { flex-direction:column; }
  .shop-finder-summary { justify-content:flex-start; }
}
@media (max-width:640px) {
  .shop-page { padding-bottom:82px; }
  .shop-header { min-height:64px; padding:8px 14px; }
  .shop-header nav > a { display:none; }
  .shop-brand { max-width:58vw; }
  .shop-brand-mark { width:38px; height:38px; }
  .shop-intro { min-height:280px; align-content:end; gap:20px; padding:42px 20px 24px; }
  .shop-intro h1 { font-size:43px; }
  #shopWelcome { margin-top:18px; font-size:16px; }
  .shop-service-card { padding:15px; }
  .shop-catalogue { padding-top:50px; }
  .shop-section-head { align-items:stretch; flex-direction:column; }
  .shop-search { position:sticky; top:70px; z-index:24; margin-inline:-4px; padding:6px 4px; background:rgba(245,241,232,.96); backdrop-filter:blur(12px); }
  .shop-search input { width:100%; font-size:16px; }
  .shop-categories { position:static; margin-inline:-4px; margin-bottom:20px; padding:7px 4px 4px; background:transparent; }
  .shop-filter-tools { margin:-8px 0 20px; }
  .shop-filter-desktop { display:none; }
  .shop-filter-open { display:inline-flex; }
  .shop-finder { scroll-margin-top:64px; padding:34px 14px; }
  .shop-finder-shell { padding:24px 18px; }
  .shop-finder-heading { flex-direction:column; }
  .shop-finder-heading .shop-text-button { padding:0; }
  .shop-finder-question { margin-top:32px; }
  .shop-finder-choices { grid-template-columns:1fr; }
  .shop-finder-actions { align-items:stretch; flex-direction:column-reverse; }
  .shop-finder-actions > * { width:100%; }
  .shop-finder-summary { display:grid; width:100%; }
  .shop-finder-summary button { width:100%; text-align:left; }
  .shop-filter-dialog { width:100vw; max-width:none; margin:auto 0 0; padding:24px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; }
  .shop-filter-sheet-fields { grid-template-columns:1fr; }
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .shop-product { grid-template-rows:140px auto; }
  .shop-product-body { gap:8px; padding:12px; }
  .shop-product h3 { font-size:15px; min-height:2.1em; }
  .shop-product-description { display:none; }
  .shop-product-meta { font-size:8px; }
  .shop-product-price strong { font-size:15px; }
  .shop-product-action { gap:8px; }
  .shop-story-grid { grid-template-columns:1fr; }
  .shop-how-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop-footer { align-items:start; flex-direction:column; }
  .shop-footer > span { border-top:1px solid rgba(255,255,255,.14); padding-top:20px; }
  .shop-drawer { padding:20px; }
  .shop-detail-copy { padding:34px 22px 26px; }
  .shop-detail-price { align-items:stretch; flex-direction:column; }
  .shop-detail-price .shop-add { width:100%; }
  .shop-mobile-cart { position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:45; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 17px; color:#fff; background:var(--shop-green-dark); border:1px solid rgba(255,255,255,.16); border-radius:18px 18px 18px 6px; box-shadow:0 14px 38px rgba(8,20,14,.28); cursor:pointer; }
  .shop-mobile-cart[hidden] { display:none; }
  .shop-mobile-cart > span:first-child { display:grid; justify-items:start; }
  .shop-mobile-cart small { color:rgba(255,255,255,.68); font-size:10px; }
  .shop-mobile-cart strong { font-size:17px; }
  .shop-mobile-cart > span:last-child { font-size:12px; font-weight:850; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Age acknowledgement. Uses the native dialog backdrop so focus trapping and the scrim are the
   browser's behaviour rather than ours to re-implement. */
.shop-age-gate { max-width:440px; padding:30px; color:var(--shop-ink); background:var(--shop-card); border:0; border-radius:22px; box-shadow:0 30px 80px rgba(8,20,14,.3); }
.shop-age-gate::backdrop { background:rgba(8,20,14,.62); backdrop-filter:blur(4px); }
.shop-age-gate h2 { margin:0 0 10px; font:400 30px Georgia,serif; }
.shop-age-gate p { margin:0; color:var(--shop-muted); font-size:14px; line-height:1.6; }
.shop-age-actions { display:grid; gap:10px; margin:22px 0 14px; }
.shop-age-leave { min-height:44px; padding:0 18px; color:var(--shop-ink); background:transparent; border:1px solid var(--shop-line); border-radius:999px; font-weight:700; cursor:pointer; }
.shop-age-note { font-size:12px; }
@media (max-width:640px) { .shop-age-gate { margin:auto 14px; padding:24px; } }

/* Southbound network: area-confirmation gate (#areaGate in shop.html), sharing .shop-age-gate's
   dialog chrome above so it doesn't need its own duplicate frame. Tiles use this PAGE's own
   --shop-* tokens even when labelling a different hub -- a tile painted in a foreign hub's
   colours would clash inside this one grid; the label carries the identity, not the paint. */
.shop-area-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin:16px 0; }
.shop-area-tile { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:56px; padding:10px 14px; color:var(--shop-ink); text-align:left; background:var(--shop-paper); border:1px solid var(--shop-line); border-radius:14px; font:inherit; font-weight:700; cursor:pointer; transition:border-color .15s ease, transform .15s ease; }
.shop-area-tile:hover { border-color:var(--shop-green); transform:translateY(-1px); }
.shop-area-tile:disabled { cursor:default; opacity:.7; transform:none; }
.shop-area-tile-note { font-size:11px; font-weight:600; color:var(--shop-muted); text-transform:uppercase; letter-spacing:.04em; }
.shop-area-tiles-vote .shop-area-tile { background:transparent; border-style:dashed; }
.shop-area-form { display:flex; gap:8px; margin:18px 0 4px; }
.shop-area-form input { flex:1; min-height:44px; padding:0 14px; color:var(--shop-ink); background:var(--shop-paper); border:1px solid var(--shop-line); border-radius:999px; font-size:14px; }
.shop-area-result { margin-top:16px; }
.shop-area-result p { margin:0 0 12px; color:var(--shop-ink); font-weight:700; }

/* Held back until js/shop.js has read the venue, so a branded club is never shown somebody
   else's palette first. js/brand-boot.js adds this before the first paint and lifts it either
   when the brand settles or on its own timeout -- a venue read that stalls degrades to the
   unbranded shop, never to a blank page. */
html.brand-pending body { visibility: hidden; }

/* Activated per venuePublic document. No activation flag means none of these selectors match,
   so every existing subscriber keeps the exact shop that shipped before tenant branding. */
html.customer-brand-active body.shop-page { font-family:var(--shop-font-body); }
html.customer-brand-active .shop-brand strong,
html.customer-brand-active .shop-intro h1,
html.customer-brand-active .shop-section-head h2,
html.customer-brand-active .shop-finder h2,
html.customer-brand-active .shop-finder h3,
html.customer-brand-active .shop-filter-sheet-head h2,
html.customer-brand-active .shop-story h2,
html.customer-brand-active .shop-story h3,
html.customer-brand-active .shop-product h3,
html.customer-brand-active .shop-drawer h2,
html.customer-brand-active .shop-detail-copy h2,
html.customer-brand-active .shop-footer strong,
html.customer-brand-active .shop-age-gate h2 { font-family:var(--shop-font-heading); }
html.customer-brand-active .shop-header,
html.customer-brand-active .shop-search,
html.customer-brand-active .shop-categories { background:color-mix(in srgb,var(--shop-paper) 94%,transparent); }
html.customer-brand-active .shop-intro { background:
  radial-gradient(circle at 80% 15%,color-mix(in srgb,var(--shop-gold) 30%,transparent),transparent 28%),
  linear-gradient(135deg,var(--shop-green-dark),var(--shop-green) 62%,var(--shop-green-dark)); }
html.customer-brand-active .shop-intro .shop-kicker { color:color-mix(in srgb,var(--shop-gold) 78%,white); }
html.customer-brand-active .shop-product-media,
html.customer-brand-active .shop-detail-media { background:linear-gradient(145deg,
  color-mix(in srgb,var(--shop-green) 12%,var(--shop-paper)),var(--shop-paper)); }
html.customer-brand-active .shop-product-monogram { color:color-mix(in srgb,var(--shop-green) 68%,transparent); }
html.customer-brand-active .shop-card-quantity { color:var(--shop-green); background:color-mix(in srgb,var(--shop-green) 8%,transparent); border-color:color-mix(in srgb,var(--shop-green) 22%,transparent); }
html.customer-brand-active .shop-story { background:color-mix(in srgb,var(--shop-fynbos) 8%,var(--shop-paper)); }
html.customer-brand-active .shop-footer { background:var(--shop-green-dark); }
html.customer-brand-active .shop-dialog-close { background:color-mix(in srgb,var(--shop-card) 92%,transparent); }

/* SouthBound supplied this five-petal reveal with its brand assets. It is behind a separate
   preset class as well as the tenant activation class, so no other branded venue inherits it. */
.shop-brand-loader { display:none; width:112px; height:72px; margin:-10px auto 24px; }
.shop-brand-loader svg { width:100%; height:100%; display:block; overflow:visible; }
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-brand-loader:not([hidden]) { display:block; }
.shop-loading-petal { opacity:0; transform:scale(.35); transform-box:fill-box; transform-origin:center bottom; animation:southbound-leaf-reveal 3.6s ease-in-out infinite; }
.shop-loading-petal.p1 { animation-delay:0s; }
.shop-loading-petal.p2 { animation-delay:.3s; }
.shop-loading-petal.p3 { animation-delay:.6s; }
.shop-loading-petal.p4 { animation-delay:.9s; }
.shop-loading-petal.p5 { animation-delay:1.2s; }
@keyframes southbound-leaf-reveal {
  0% { opacity:0; transform:scale(.35); }
  12%,68% { opacity:1; transform:scale(1); }
  85%,100% { opacity:0; transform:scale(.35); }
}
@media (prefers-reduced-motion:reduce) {
  .shop-loading-petal { animation:none; opacity:1; transform:none; }
}

/* Specials and bundles, mirrored from the delivery menu. The section hides itself when the club
   has no live offers, so an empty banner never appears. */
.shop-specials { padding:0 clamp(20px,8vw,120px) 8px; }
.shop-specials-message { max-width:52ch; margin:0; color:var(--shop-muted); font-size:14px; }
.shop-price-was { margin-right:8px; color:var(--shop-muted); font-size:13px; text-decoration:line-through; }
.shop-saving { margin:0; color:var(--shop-fynbos); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.shop-product-special { border-color:var(--shop-gold); }
.shop-bundle { display:flex; }
.shop-bundle .shop-product-body { width:100%; }
.shop-bundle-parts { margin:6px 0 10px; padding-left:18px; color:var(--shop-muted); font-size:13px; line-height:1.5; }
.shop-bundle-parts li { margin:2px 0; }

/* SouthBound Canva layout. The animation value is part of its explicit venuePublic brand
   preset, so this visual composition cannot leak into another tenant that merely uses similar
   colours. The shop catalogue and transaction components remain the shared, tested controls. */
html.customer-brand-active.customer-brand-animation-southbound-leaf body.shop-page {
  background:var(--shop-paper);
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-header {
  min-height:76px;
  padding-inline:clamp(22px,5.6vw,72px);
  background:var(--shop-paper);
  border-bottom:0;
  box-shadow:none;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-header nav {
  gap:28px;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-header nav a {
  font-size:11px;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-cart-button {
  min-width:104px;
  justify-content:center;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-cart-button.is-empty #cartCount {
  display:none;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-intro {
  position:relative;
  min-height:720px;
  grid-template-columns:1fr;
  gap:0;
  overflow:hidden;
  padding:150px 0 72px clamp(22px,5.6vw,72px);
  align-items:stretch;
  background:var(--shop-green-dark);
}
html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-intro-copy {
  position:relative;
  z-index:2;
  align-self:center;
  padding-bottom:20px;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-intro h1 {
  max-width:none;
  font-size:clamp(48px,5vw,65px);
  white-space:nowrap;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-intro #shopWelcome {
  max-width:610px;
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:700;
  letter-spacing:.035em;
  line-height:1.5;
  text-transform:uppercase;
}
/* 2026-09-06: was its own grid column beside the copy -- now a background layer behind it, so
   the copy reads clearly over a watermark-strength photo rather than competing with it.
   Two failed attempts before this one, both from fighting the source photo's own shape instead
   of working with it. venuePublic's hero.png is a wide 2000x1333 landscape with the plant sat
   in its right third and empty space filling the rest. (1) height:100% on a NARROW box
   (min(58-72%,...) wide) forced cover to blow the image up until its height matched, cropping
   away most of the WIDTH -- on a phone that discarded well over half the frame, reading as the
   plant cut off at its own edges. (2) sizing the box to the photo's exact aspect-ratio avoided
   that crop but stopped covering the section at all -- the image ended well short of the
   section's own bottom edge, plain green underneath it. This is width:100% AND height:100%,
   genuinely covering the whole section -- cover still has to crop something (the box's own
   aspect ratio will never exactly match every viewport), but now it is a WIDE box being
   cropped, which loses comparatively little width, not a narrow one losing most of it. Anchored
   right/bottom rather than right/top or centered: the plant's base is what would read as
   "cut off" if trimmed, and the source has more empty headroom above the bud to give up first. */
html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-hero-image {
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  opacity:.5;
  object-fit:cover;
  object-position:right bottom;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-hero-cta {
  min-height:90px;
  gap:13px;
  margin-top:78px;
  padding:22px 24px;
  border-radius:32px;
  box-shadow:none;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-hero-cta-icon {
  width:32px;
  height:32px;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active #shopHeroCtaText {
  font-size:12px;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story {
  position:relative;
  min-height:700px;
  overflow:hidden;
  padding:80px clamp(22px,5.6vw,72px) 64px;
  background:var(--shop-paper);
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story::before,
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story::after {
  content:"";
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story::before {
  width:520px;
  height:520px;
  left:-470px;
  bottom:-170px;
  background:color-mix(in srgb,var(--shop-green) 34%,var(--shop-paper));
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story::after {
  width:430px;
  height:430px;
  left:-390px;
  bottom:-205px;
  background:color-mix(in srgb,var(--shop-gold) 38%,var(--shop-paper));
  box-shadow:95px 95px 0 color-mix(in srgb,var(--shop-gold) 70%,var(--shop-paper));
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story > * {
  position:relative;
  z-index:1;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story > .shop-kicker {
  color:var(--shop-ink);
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story h2 {
  max-width:760px;
  color:var(--shop-gold);
  font-size:clamp(42px,4.5vw,62px);
  line-height:1.03;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story-grid {
  width:min(100%,470px);
  grid-template-columns:1fr;
  gap:25px;
  margin-top:52px;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story article {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  column-gap:16px;
  padding:0;
  border:0;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story article span {
  grid-row:1 / 3;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--shop-green);
  border-radius:50%;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story h3 {
  margin:1px 0 5px;
  font-family:var(--shop-font-body);
  font-size:12px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story article p {
  grid-column:2;
  color:var(--shop-ink);
  font-size:12px;
  line-height:1.45;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story-signoff:not([hidden]) {
  min-height:124px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:24px clamp(22px,5.6vw,72px);
  color:rgba(255,255,255,.74);
  background:var(--shop-green-dark);
}
.shop-story-signoff-note {
  display:flex;
  align-items:center;
  gap:12px;
}
.shop-story-signoff-note > span {
  color:#fff;
  font-size:20px;
}
.shop-story-signoff-note p {
  margin:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.025em;
  line-height:1.35;
  text-transform:uppercase;
}
.shop-story-signoff-brand {
  display:grid;
  justify-items:end;
  color:#fff;
}
.shop-story-signoff-brand strong {
  font-family:var(--shop-font-heading);
  font-size:24px;
  font-weight:500;
  letter-spacing:.02em;
}
.shop-story-signoff-brand small {
  font-size:8px;
  letter-spacing:.18em;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-choice-launch:not([hidden]) {
  display:block;
  scroll-margin-top:76px;
  padding:72px clamp(20px,6vw,90px) 0;
  background:var(--shop-paper);
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-catalogue > .shop-choice-launch:not([hidden]) {
  padding:0 0 32px;
  background:transparent;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-choice-launch .shop-finder-entry {
  margin:0;
  padding:24px;
  background:color-mix(in srgb,var(--shop-green) 6%,var(--shop-paper));
  border:1px solid var(--shop-line);
  border-radius:20px;
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-choice-launch .shop-finder-entry a {
  color:var(--shop-green);
}
html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-catalogue {
  scroll-margin-top:76px;
}

@media (max-width:900px) {
  /* 2026-09-06: min-height:630px was tuned for the hero photo sitting IN FLOW, stacked below
     the copy at height:300px -- together they filled roughly that much. Once the photo became
     a background layer (position:absolute, see the unguarded .shop-hero-image rule above), it
     stopped contributing to the section's own height at all, and 630px turned into ~200px of
     blank green space below the copy with nothing left to fill it. Sized to the copy's own
     content instead, with real bottom padding doing the job min-height used to. */
  html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-intro {
    min-height:0;
    grid-template-columns:1fr;
    gap:18px;
    padding:52px 20px 40px;
    align-content:start;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-intro-copy {
    align-self:start;
    padding:0;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-intro h1 {
    max-width:500px;
    font-size:clamp(43px,12vw,58px);
    white-space:normal;
  }
  /* No mobile-specific .shop-hero-image rule any more -- it used to bleed the (in-flow) photo
     to the screen edge at a fixed 300px, which only made sense stacked below the copy. The
     unguarded rule above (absolute, top-right, min(58%,720px) wide, 50% opacity) already scales
     down sensibly at phone widths on its own. */
  html.customer-brand-active.customer-brand-animation-southbound-leaf.shop-hero-active .shop-hero-cta {
    min-height:58px;
    margin-top:26px;
    padding:14px 20px;
    border-radius:999px;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story {
    min-height:0;
    padding-top:64px;
    padding-bottom:76px;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story h2 {
    font-size:clamp(38px,8vw,54px);
  }
}
@media (max-width:640px) {
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-header nav {
    gap:8px;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-header nav > a#shopNavCatalogue {
    display:inline-flex;
    min-width:44px;
    padding-inline:4px;
    justify-content:center;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-cart-button {
    min-width:86px;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story-signoff:not([hidden]) {
    align-items:flex-start;
    flex-direction:column;
    min-height:0;
    padding-block:28px;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-story-signoff-brand {
    justify-items:start;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-choice-launch:not([hidden]) {
    scroll-margin-top:64px;
    padding:48px 20px 0;
  }
  html.customer-brand-active.customer-brand-animation-southbound-leaf .shop-catalogue > .shop-choice-launch:not([hidden]) {
    padding:0 0 24px;
  }
}