/* Counter - Promotional Catalog public landing page (public/promo.php).
   One shared layout, styled into Promotions::DESIGNS' 5 distinct looks
   purely through the [data-design="..."] rules at the bottom of this
   file - see Promotions.php's own class docblock for why that split
   (shared HTML/JS, design-only CSS) was the deliberate choice here.
   --promo-accent is set inline per-page from the site's own branding
   (Sites::DEFAULT_ACCENT_COLOR / a partner's own accent_color). */

:root{
  --promo-accent:#1bae70;
  --promo-bg:#f7f7f5;
  --promo-surface:#ffffff;
  --promo-text:#161615;
  --promo-text-muted:#6b6a65;
  --promo-border:rgba(0,0,0,0.10);
  --promo-radius:14px;
  --promo-font:system-ui, -apple-system, "Segoe UI", sans-serif;
  --promo-shadow:0 2px 10px rgba(0,0,0,0.06);
  /* The one "how wide is this page's content column" knob - shared by
     .promo-product-grid AND .promo-details/.promo-trust-strip so the
     offer-details card's own visible edges always land exactly where the
     product cards below it start/end (see .promo-details's own comment)
     instead of two independently-chosen widths that only coincidentally
     lined up. A design with its own narrower/wider grid (minimal/feed/
     magazine/compact below) redefines this alongside it rather than
     leaving .promo-details to guess. */
  --promo-content-max:720px;
  /* The hairline between a full-bleed banner and the content below it
     (.promo-banner's own comment) - var(--promo-border) is a dark tint,
     invisible against a design's own dark hero background, so a design
     with one (bold) redefines this to a light tint instead rather than
     that design simply having no seam at all. */
  --promo-hero-divider:var(--promo-border);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--promo-bg);
  color:var(--promo-text);
  font-family:var(--promo-font);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
  padding-bottom:90px; /* room for the sticky cart bar */
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
h1,h2{margin:0 0 8px;}
p{margin:0 0 8px;}

.promo-loading{padding:60px 20px;text-align:center;color:var(--promo-text-muted);}

/* ---- Topbar ------------------------------------------------------------ */

/* A plain, always-the-same-shape chrome bar above the hero - renderTopbar()
   only ever builds it from real data (a site's own company_name/logo_url/
   whatsapp_number), so it's the one piece of this page every design
   leaves alone rather than re-theming (no [data-design="..."] override
   touches it below) - same reasoning a real site keeps its own header
   consistent while the page content under it changes. */
.promo-topbar{
  position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;background:var(--promo-surface);border-bottom:1px solid var(--promo-border);
}
.promo-topbar-brand{display:flex;align-items:center;gap:9px;min-width:0;font-weight:700;font-size:17.5px;color:var(--promo-text);}
.promo-topbar-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.promo-topbar-logo{width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.promo-topbar-actions{display:flex;gap:8px;flex-shrink:0;}
.promo-topbar-icon-btn{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--promo-accent);color:#fff;flex-shrink:0;
}
.promo-topbar-icon-btn svg{width:18px;height:18px;}

/* ---- Hero / header --------------------------------------------------- */

.promo-hero{position:relative;background:var(--promo-surface);}
/* A partner's promo graphic - full width, edge to edge, "the hero image"
   the way any ordinary landing page shows one, the same treatment on
   every design (see the per-design blocks below - none of them touch
   .promo-banner/.promo-banner img any more, only its surrounding
   max-height). object-fit:cover crops rather than letterboxes, so a
   graphic with important text/badges printed right at its own edges can
   lose a sliver of them - a partner who needs the whole image untouched
   should keep that text safely inboard of the edges, the same margin
   any billboard/poster crop already has to allow for. Simply absent when
   a promotion has no banner - .promo-banner is never rendered at all
   (promo.js's own renderHeader()), not an empty box.
   The border-bottom is a deliberate, always-there seam against
   --promo-hero-divider (a dark-aware token - see :root's own comment) -
   without it, a banner whose own edge colors happen to be close to the
   hero-content background beneath it (a real photo's own white/light
   margin, say, against this design's white hero) reads as one continuous
   image with the title floating inside it rather than two clearly
   separate sections; a magazine/trust design's own opaque overlap card
   (further down) simply covers this hairline, so it's harmless there
   too. */
.promo-banner{border-bottom:1px solid var(--promo-hero-divider);}
.promo-banner img{width:100%;height:auto;max-height:460px;object-fit:cover;display:block;}
.promo-hero-content{padding:24px 20px 24px;max-width:720px;margin:0 auto;}
.promo-title{font-size:26px;font-weight:800;letter-spacing:-0.01em;}
.promo-end-date{display:inline-block;margin-top:10px;padding:6px 12px;border-radius:999px;background:var(--promo-accent);color:#fff;font-size:13px;font-weight:600;}
.promo-ended-banner{background:#3a3a38;color:#fff;text-align:center;padding:10px 16px;font-size:14px;font-weight:600;}

/* ---- Details section ---------------------------------------------------- */

/* The promotion's own description - pulled out of the hero into its own
   clearly-separate section (renderDetails()'s own docblock explains why)
   so it reads as "more about this offer", not a hero subtitle. A plain
   surface card, same tokens (radius/shadow/surface) every design already
   redefines for its product cards, so it never looks like a foreign
   element even though no [data-design="..."] rule below styles it on
   purpose - it's meant to read the same everywhere, like the topbar. */
/* width/max-width together (rather than just max-width, the way this
   used to be written) are what actually keep this card's own visible
   edges lined up with the product cards below - .promo-product-grid is
   itself --promo-content-max wide but spends 16px of that on its own
   left/right padding before a card starts, so this card has to be
   --promo-content-max minus that same 32px, on every viewport, not only
   past the point --promo-content-max itself stops constraining it. Plain
   `max-width:var(--promo-content-max)` alone reproduces the exact
   misalignment this replaced: on a phone-width viewport (already
   narrower than --promo-content-max) it would fill the full viewport
   width with zero side margin - flush against the screen edges - while
   the grid's product cards stay inset by its own 16px padding, so this
   card's edges end up wider than the cards it's supposed to line up
   with, on every design, at every width up to --promo-content-max. */
.promo-details{
  width:calc(100% - 32px);max-width:calc(var(--promo-content-max) - 32px);margin:18px auto;
  padding:16px 20px;background:var(--promo-surface);border-radius:var(--promo-radius);box-shadow:var(--promo-shadow);
}
.promo-details-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--promo-text-muted);margin:0 0 8px;}
.promo-desc{color:var(--promo-text-muted);font-size:15px;white-space:pre-line;margin:0;}

/* Shown only by 'trust'/'landing' (renderTrustStrip()/the shop-now
   button/the checkout reassurance line) - base, mostly-invisible-until-
   themed styles live here since the markup itself is shared, same
   "base rule + per-design override" split as everything else in this
   file. Hidden entirely (display:none) on every other design further
   down, as a defensive backstop - promo.js already only ever renders
   this markup for those two designs. */
.promo-shop-cta{
  align-self:flex-start;border:none;border-radius:10px;background:var(--promo-accent);color:#fff;
  font-size:14px;font-weight:700;padding:11px 22px;margin-top:6px;
}
.promo-trust-strip{
  max-width:720px;margin:0 auto;padding:14px 20px 4px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
}
.promo-trust-item{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--promo-text-muted);}
.promo-trust-item svg{color:var(--promo-accent);flex-shrink:0;}
.promo-spotlight-label{
  grid-column:1/-1;font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--promo-text-muted);margin:4px 2px -2px;
}
.promo-checkout-reassurance{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--promo-text-muted);margin-top:2px;}

/* ---- Product grid ------------------------------------------------------ */

.promo-empty{padding:60px 20px;text-align:center;color:var(--promo-text-muted);}

/* ---- Storefront-only: mini-site (about/gallery/contact) + the embedded
   order widget's own wrapper (Manish: "show mini site of that pharmacy
   with store name, about, pictures, contact information... i want here
   the one where order, shop, tracking every thing is there that
   widget") - Promotions never needs any of this, a campaign catalog is
   a checkout page, not a shopfront. The real order-widget (assets/js/
   order-widget.js) renders inside its own Shadow DOM - see storefront.
   php's own docblock - so nothing here styles its insides, only the
   section it sits in. ------------------------------------------------- */

.promo-storefront{max-width:none;}

/* The order widget itself is now always a floating corner bubble or
   sticky side tab here, never inline (Manish: "In store front for
   widget only corner buble and sticky side tab is needed") - it
   positions itself with fixed CSS regardless of where its two <script>
   tags sit in the DOM (see order-widget.js's own mount()), so there's
   no wrapper section to style any more, just this short hint line in
   the hero pointing at the launcher (storefront.php's own
   .promo-shop-hint, replacing the old "Shop now" button that scrolled
   to that section). */
.promo-shop-hint{
  font-size:13px;font-weight:600;color:var(--promo-accent);margin-top:10px;
}

.promo-section-title{
  font-size:13px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;
  color:var(--promo-text-muted);max-width:var(--promo-content-max);margin:0 auto;padding:0 20px;
}
.promo-about{max-width:var(--promo-content-max);margin:18px auto 0;padding:0 20px;}
.promo-about .promo-section-title{padding:0 0 8px;}
.promo-about p{font-size:14px;line-height:1.6;color:var(--promo-text);white-space:pre-line;margin:0;}

.promo-gallery{max-width:var(--promo-content-max);margin:20px auto 0;padding:0 20px;}
.promo-gallery .promo-section-title{padding:0 0 10px;}
.promo-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.promo-gallery-grid a{
  display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--promo-bg);
}
.promo-gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:560px){.promo-gallery-grid{grid-template-columns:repeat(3,1fr);gap:6px;}}

.promo-contact{
  max-width:var(--promo-content-max);margin:20px auto 0;padding:16px 20px;
  border-top:1px solid var(--promo-border);border-bottom:1px solid var(--promo-border);
}
.promo-contact .promo-section-title{padding:0 0 10px;}
.promo-contact-row{display:flex;gap:8px;font-size:13.5px;color:var(--promo-text);padding:3px 0;align-items:flex-start;}
.promo-contact-row svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--promo-accent);}
.promo-contact-row span{white-space:pre-line;}

.promo-product-grid{
  max-width:var(--promo-content-max);margin:20px auto;padding:0 16px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
/* Phone-width screens always get exactly one product per row, whatever
   column count a design's own grid otherwise uses (2-up here, 3-up for
   magazine/spotlight below) - a 2-3up grid cell is too cramped for a
   real product photo + name + qty stepper + button at a phone's own
   width. !important because every design's own column-count override
   further down uses a more specific [data-design="..."] selector - this
   is the one deliberate exception to "a design override always wins,"
   since it's a viewport concern, not a design one. */
@media (max-width:560px){.promo-product-grid{grid-template-columns:1fr !important;gap:12px;}}

.promo-product-card{
  background:var(--promo-surface);border:1px solid var(--promo-border);border-radius:var(--promo-radius);
  overflow:hidden;box-shadow:var(--promo-shadow);display:flex;flex-direction:column;
}
.promo-product-card.out-of-stock{opacity:0.6;}
.promo-product-media{position:relative;aspect-ratio:1/1;background:#eee;}
.promo-product-media img{width:100%;height:100%;object-fit:cover;}
/* Shown whenever a product has no image_url at all, AND (via the
   .promo-media-broken class promo.js adds in its onerror handler) on a
   real <img> whose src 404s - same generic "no photo" glyph either way,
   set with real color values rather than var(--promo-accent) so a loud
   partner accent never makes an empty product tile the most eye-catching
   thing on the page. */
.promo-product-media-placeholder,.promo-product-media img.promo-media-broken{
  width:100%;height:100%;
  background-color:#eee;
  background-image:linear-gradient(135deg,#eee,#f6f6f4),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcbbb4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover, 34px 34px;
}
.promo-badge{
  position:absolute;top:8px;left:8px;background:var(--promo-accent);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:0.03em;padding:3px 8px;border-radius:6px;
}
.promo-product-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.promo-product-name{font-size:13.5px;font-weight:600;line-height:1.3;min-height:2.6em;}
.promo-product-price{display:flex;align-items:baseline;gap:6px;}
.promo-price-now{font-size:16px;font-weight:800;color:var(--promo-accent);}
.promo-price-was{font-size:12.5px;color:var(--promo-text-muted);text-decoration:line-through;}
.promo-out-of-stock-label{font-size:12.5px;color:var(--promo-text-muted);font-weight:600;}

/* A custom/"not in inventory" row (see Promotions.php's own docblock) -
   never has a real product photo, so its media slot gets a plain dashed
   placeholder instead of the usual gradient block, and its card gets a
   quiet dashed border throughout so it visually reads as "made to order"
   rather than a regular catalog item. */
.promo-product-card.promo-product-custom{border-style:dashed;}
.promo-product-card.promo-product-custom .promo-product-media-placeholder{
  background:repeating-linear-gradient(135deg,#eee,#eee 10px,#f6f6f4 10px,#f6f6f4 20px);
}
.promo-badge-custom{left:auto;right:8px;background:var(--promo-text-muted);}
.promo-product-note{font-size:11.5px;color:var(--promo-text-muted);line-height:1.35;}

.promo-qty{display:flex;align-items:center;gap:10px;margin-top:2px;}
.promo-qty-btn{
  width:26px;height:26px;border-radius:7px;border:1px solid var(--promo-border);background:var(--promo-surface);
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--promo-text);
}
.promo-qty-val{font-size:13.5px;font-weight:700;min-width:16px;text-align:center;}
.promo-add-btn{
  margin-top:4px;border:none;border-radius:9px;background:var(--promo-accent);color:#fff;
  font-size:13px;font-weight:700;padding:9px 10px;width:100%;
}
.promo-add-btn:disabled{opacity:0.5;cursor:not-allowed;}
/* Wraps the Add/Buy button shown only before a product has ever been
   added (promo.js's own renderBrowse()) - still its own wrapper (rather
   than styling .promo-add-btn directly) purely so feed/compact's own
   "full row" override below (a leftover from when Remove sat beside it)
   has a stable target without touching the button's own base rule. */
.promo-cart-actions{display:flex;gap:6px;margin-top:4px;}
.promo-cart-actions .promo-add-btn{margin-top:0;flex:1;}
/* Once a product IS in the cart, the qty stepper above replaces the Add
   button entirely (it live-edits the cart directly - "-" down to 0 takes
   the item back out, see wireBrowse()'s own comment) - this quiet
   confirmation line is all that's shown instead, so a card that's
   already in the cart doesn't just look like it lost its button. */
.promo-in-cart-note{
  margin-top:4px;padding:9px 0;text-align:center;font-size:12.5px;font-weight:700;
  color:var(--promo-accent);
}

/* ---- Sticky cart bar ---------------------------------------------------- */

.promo-cart-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--promo-text);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;box-shadow:0 -4px 16px rgba(0,0,0,0.15);
}
.promo-cart-summary{font-size:14px;font-weight:600;}
.promo-checkout-btn{
  background:var(--promo-accent);color:#fff;border:none;border-radius:9px;
  padding:10px 20px;font-size:14px;font-weight:700;
}

/* ---- Checkout modal ------------------------------------------------------ */

.promo-modal{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;}
@media (min-width:640px){.promo-modal{align-items:center;}}
.promo-modal-backdrop{position:absolute;inset:0;background:rgba(10,10,10,0.5);}
.promo-modal-card{
  position:relative;background:var(--promo-surface);border-radius:18px 18px 0 0;
  width:100%;max-width:480px;max-height:90vh;overflow:auto;padding:22px 20px 26px;
}
@media (min-width:640px){.promo-modal-card{border-radius:18px;}}
.promo-modal-close{
  position:absolute;top:12px;right:14px;border:none;background:none;font-size:22px;
  line-height:1;color:var(--promo-text-muted);
}
.promo-order-summary{background:var(--promo-bg);border-radius:10px;padding:12px 14px;margin:10px 0 18px;font-size:13.5px;}
.promo-summary-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 0;color:var(--promo-text);}
.promo-summary-line-right{display:flex;align-items:center;gap:6px;}
.promo-summary-remove{
  border:none;background:none;color:var(--promo-text-muted);font-size:18px;line-height:1;
  padding:2px 3px;flex-shrink:0;
}
.promo-summary-remove:hover{color:#a5292c;}
.promo-summary-total{display:flex;justify-content:space-between;font-weight:800;border-top:1px solid var(--promo-border);margin-top:8px;padding-top:8px;}
#promoCheckoutForm{display:flex;flex-direction:column;gap:12px;}
#promoCheckoutForm label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--promo-text-muted);}
#promoCheckoutForm input,#promoCheckoutForm textarea{
  font-family:inherit;font-size:15px;padding:10px 12px;border-radius:9px;border:1px solid var(--promo-border);
  background:var(--promo-bg);color:var(--promo-text);
}
#promoCheckoutForm input:focus,#promoCheckoutForm textarea:focus{outline:2px solid var(--promo-accent);outline-offset:1px;}
.promo-form-error{background:rgba(208,59,59,0.1);color:#a5292c;padding:9px 12px;border-radius:8px;font-size:13px;}
.promo-submit-btn{
  border:none;border-radius:10px;background:var(--promo-accent);color:#fff;font-size:15px;font-weight:700;
  padding:13px 16px;margin-top:4px;
}
.promo-submit-btn:disabled{opacity:0.6;}

/* ---- Thank-you screen ---------------------------------------------------- */

.promo-done{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.promo-done-card{
  background:var(--promo-surface);border-radius:var(--promo-radius);box-shadow:var(--promo-shadow);
  padding:36px 28px;text-align:center;max-width:380px;width:100%;
}
.promo-done-check{
  width:52px;height:52px;border-radius:50%;background:var(--promo-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;
}
.promo-done-order-number{font-size:20px;font-weight:800;margin:10px 0 4px;letter-spacing:0.02em;}
.promo-done-status{display:inline-block;background:var(--promo-accent);color:#fff;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:10px;}
.promo-done-total{font-size:16px;font-weight:700;margin-bottom:10px;}
.promo-done-note{color:var(--promo-text-muted);font-size:13px;}

/* ---- Unavailable / expired link ------------------------------------------ */

.promo-unavailable{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.promo-unavailable-card{max-width:380px;text-align:center;}
.promo-unavailable-card h1{font-size:20px;}
.promo-unavailable-card p{color:var(--promo-text-muted);font-size:14px;}

/* ======================================================================
   Design variants - see Promotions::DESIGNS. Each one only ever touches
   look (color/type/shape/spacing), never structure - every design shares
   the exact same DOM promo.js builds.
   ====================================================================== */

/* ---- classic: the baseline look above IS 'classic' - clean cards, a
   simple rounded hero, nothing else needed here. ---------------------- */

/* ---- bold: a full-bleed, high-contrast hero + squared-off, heavier
   cards - built for a launch/flash-sale campaign that wants to feel loud
   the instant the link opens. ------------------------------------------ */
[data-design="bold"]{--promo-radius:6px;--promo-hero-divider:rgba(255,255,255,0.18);}
[data-design="bold"] .promo-hero{background:var(--promo-text);color:#fff;}
[data-design="bold"] .promo-hero-content{max-width:720px;}
[data-design="bold"] .promo-title{font-size:32px;text-transform:uppercase;letter-spacing:0.01em;}
[data-design="bold"] .promo-end-date{background:#fff;color:var(--promo-text);}
[data-design="bold"] .promo-banner img{max-height:480px;}
[data-design="bold"] .promo-product-card{border:2px solid var(--promo-text);box-shadow:none;}
[data-design="bold"] .promo-add-btn{text-transform:uppercase;letter-spacing:0.03em;border-radius:4px;}
[data-design="bold"] .promo-checkout-btn{border-radius:4px;text-transform:uppercase;letter-spacing:0.03em;}
[data-design="bold"] .promo-cart-bar{background:#000;}
[data-design="bold"] .promo-badge{border-radius:0;}
[data-design="bold"] .promo-details{border:2px solid var(--promo-text);box-shadow:none;}

/* ---- minimal: quiet, centered, single column - generous whitespace,
   no shadows/badges, small compact rows instead of image-forward cards. */
[data-design="minimal"]{--promo-shadow:none;--promo-bg:#ffffff;--promo-radius:0px;--promo-content-max:460px;}
[data-design="minimal"] body{max-width:520px;margin:0 auto;}
[data-design="minimal"] .promo-banner img{max-height:280px;}
[data-design="minimal"] .promo-hero-content{padding:20px 20px 28px;text-align:center;}
[data-design="minimal"] .promo-title{font-weight:600;font-size:22px;letter-spacing:0;}
[data-design="minimal"] .promo-end-date{background:none;color:var(--promo-text-muted);border:1px solid var(--promo-border);}
[data-design="minimal"] .promo-product-grid{grid-template-columns:1fr;max-width:460px;gap:0;}
[data-design="minimal"] .promo-product-card{flex-direction:row;border:none;border-bottom:1px solid var(--promo-border);border-radius:0;box-shadow:none;}
[data-design="minimal"] .promo-product-media{width:76px;height:76px;flex:0 0 auto;aspect-ratio:auto;}
[data-design="minimal"] .promo-product-body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:12px 4px;}
[data-design="minimal"] .promo-product-name{min-height:0;flex:1 1 100%;}
[data-design="minimal"] .promo-qty{margin-top:0;}
[data-design="minimal"] .promo-add-btn{width:auto;padding:7px 14px;}
[data-design="minimal"] .promo-badge{background:none;color:var(--promo-accent);border:1px solid var(--promo-accent);}
[data-design="minimal"] .promo-cart-bar{background:#fff;color:var(--promo-text);border-top:1px solid var(--promo-border);box-shadow:none;}
[data-design="minimal"] .promo-checkout-btn{background:var(--promo-text);}
/* --promo-surface is white here and --promo-bg is ALSO white (this
   design's own root override above) - a plain surface card (the base
   rule everything else uses) would be invisible, same white on white, so
   this gets minimal's own quiet treatment instead: two hairline rules
   framing the text, no card at all, matching the divided-list look its
   product rows already use rather than introducing the one boxed card on
   an otherwise boxless page. */
[data-design="minimal"] .promo-details{
  background:none;box-shadow:none;border-radius:0;
  border-top:1px solid var(--promo-border);border-bottom:1px solid var(--promo-border);
  padding:18px 4px;text-align:center;
}

/* ---- festive: warm gradient background, dashed "ticket" card edges and
   a bigger ribbon badge - built for a seasonal/festival offer poster. --- */
[data-design="festive"]{--promo-bg:#fff6ea;--promo-radius:16px;}
[data-design="festive"] body{background:linear-gradient(180deg,#fff1de 0%,#fff6ea 220px,var(--promo-bg) 420px);}
[data-design="festive"] .promo-hero{background:none;}
[data-design="festive"] .promo-banner img{max-height:420px;}
[data-design="festive"] .promo-hero-content{text-align:center;}
[data-design="festive"] .promo-title{font-size:28px;color:var(--promo-accent);}
[data-design="festive"] .promo-end-date{background:#d0393c;}
[data-design="festive"] .promo-product-card{border:2px dashed var(--promo-accent);box-shadow:none;background:#fffdf8;}
[data-design="festive"] .promo-badge{
  background:#d0393c;left:auto;right:-4px;top:10px;border-radius:6px 0 0 6px;
  padding:4px 10px 4px 8px;font-size:11.5px;
}
[data-design="festive"] .promo-price-now{color:#d0393c;}
[data-design="festive"] .promo-add-btn{border-radius:999px;}
[data-design="festive"] .promo-checkout-btn{border-radius:999px;}
[data-design="festive"] .promo-cart-bar{background:#2c1a10;}
[data-design="festive"] .promo-done-check,[data-design="festive"] .promo-done-status{background:#d0393c;}
[data-design="festive"] .promo-details{border:2px dashed var(--promo-accent);box-shadow:none;background:#fffdf8;text-align:center;}

/* ---- magazine: an editorial, image-led layout - a serif display face
   for the title, a bigger hero, and a denser masonry-feeling grid where
   every third card runs taller. ------------------------------------------ */
[data-design="magazine"]{--promo-font:Georgia, "Times New Roman", serif;--promo-content-max:780px;}
[data-design="magazine"] .promo-banner img{height:440px;max-height:440px;}
/* The editorial "pull card" - the text block overlaps the bottom edge of
   the full-bleed hero image instead of sitting quietly below it, the one
   genuinely structural (not just color/type) difference from the other
   designs, easy to do in CSS alone since it only ever needs to overlap
   the hero above it, whatever that image's own shape happens to be -
   every design's banner is full-bleed now (see .promo-banner img's own
   base comment), so this technique would work for any of them, it just
   happens to be magazine's own signature look. */
[data-design="magazine"] .promo-hero-content{
  background:var(--promo-surface);max-width:680px;margin:-46px auto 0;
  border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,0.12);padding:26px 28px 20px;
}
[data-design="magazine"] .promo-title{font-size:34px;font-weight:700;line-height:1.15;}
[data-design="magazine"] .promo-desc{font-size:16px;}
[data-design="magazine"] .promo-product-grid{max-width:780px;grid-template-columns:repeat(3,1fr);}
[data-design="magazine"] .promo-product-card:nth-child(3n+1){grid-row:span 1;}
[data-design="magazine"] .promo-product-card:nth-child(3n+2) .promo-product-media{aspect-ratio:3/4;}
[data-design="magazine"] .promo-product-name{font-family:var(--promo-font);font-size:14px;}
[data-design="magazine"] .promo-price-now{font-family:system-ui, -apple-system, "Segoe UI", sans-serif;}
[data-design="magazine"] .promo-add-btn{border-radius:0;}
[data-design="magazine"] .promo-details{border-radius:0;box-shadow:none;border-left:3px solid var(--promo-accent);padding-left:20px;}
@media (max-width:600px){[data-design="magazine"] .promo-product-grid{grid-template-columns:1fr 1fr;}}

/* Every design below this line has its trust strip/shop-cta/checkout
   reassurance markup hidden by default (promo.js only ever renders it
   for 'trust'/'landing' anyway - this is just a defensive backstop). */
.promo-shop-cta,.promo-trust-strip,.promo-checkout-reassurance{display:none;}

/* ---- trust: a quieter, business-like cousin of 'magazine's pull-card -
   the hero content floats over a smaller, contained banner instead of a
   full-bleed one, and a delivery/COD trust strip sits right under it -
   built for a partner who wants the page to read as reassuring/official
   rather than exciting. ------------------------------------------------ */
[data-design="trust"] .promo-banner img{max-height:320px;}
[data-design="trust"] .promo-hero-content{
  background:var(--promo-surface);max-width:640px;margin:-38px auto 0;border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,0.10);padding:20px 22px 6px;
}
[data-design="trust"] .promo-title{font-weight:800;letter-spacing:-0.01em;}
[data-design="trust"] .promo-product-card{border-radius:12px;}
[data-design="trust"] .promo-badge{border-radius:6px;}
[data-design="trust"] .promo-shop-cta,[data-design="trust"] .promo-trust-strip,[data-design="trust"] .promo-checkout-reassurance{display:flex;}
[data-design="trust"] .promo-shop-cta{display:none;} /* trust has no CTA button - only landing does */
[data-design="trust"] .promo-trust-strip{padding-top:6px;padding-bottom:14px;}
[data-design="trust"] .promo-details{border-radius:16px;}

/* ---- feed: a shop-feed list - big rounded rows (image left, details
   right) instead of a grid, closer to browsing an Instagram/WhatsApp
   catalog than a storefront; a quiet serif for the title only. -------- */
[data-design="feed"]{--promo-content-max:540px;}
[data-design="feed"] .promo-title{font-family:'DM Serif Display', Georgia, serif; font-weight:400; letter-spacing:0;}
[data-design="feed"] .promo-product-grid{grid-template-columns:1fr;max-width:540px;gap:14px;}
[data-design="feed"] .promo-product-card{flex-direction:row;padding:10px;gap:12px;align-items:center;}
[data-design="feed"] .promo-product-media{width:84px;height:84px;flex:0 0 auto;aspect-ratio:auto;}
[data-design="feed"] .promo-product-body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:0;}
[data-design="feed"] .promo-product-name{flex:1 1 100%;min-height:0;font-size:14px;}
[data-design="feed"] .promo-qty{margin-top:0;}
[data-design="feed"] .promo-add-btn{width:auto;padding:8px 16px;border-radius:8px;}
[data-design="feed"] .promo-cart-actions{flex:1 1 100%;margin-top:0;}
[data-design="feed"] .promo-in-cart-note{flex:1 1 100%;padding:8px 0;font-size:12px;}

/* ---- spotlight: one hero deal (this promotion's first listed product -
   see promo.js's own renderBrowse() comment) shown big up top with a
   "Buy now" button, everything else in a small grid underneath labelled
   "Also in this offer" - built for a single flagship-offer campaign
   rather than a full catalog browse. ------------------------------------ */
[data-design="spotlight"] .promo-product-grid{grid-template-columns:repeat(3,1fr);gap:10px;max-width:720px;}
[data-design="spotlight"] .promo-product-card:first-child{
  grid-column:1/-1;flex-direction:row;border-radius:18px;padding:14px;gap:14px;
}
[data-design="spotlight"] .promo-product-card:first-child .promo-product-media{width:140px;height:140px;flex:0 0 auto;border-radius:14px;aspect-ratio:auto;}
[data-design="spotlight"] .promo-product-card:first-child .promo-product-body{padding:0;justify-content:center;gap:8px;}
[data-design="spotlight"] .promo-product-card:first-child .promo-product-name{font-size:17px;min-height:0;}
[data-design="spotlight"] .promo-product-card:first-child .promo-price-now{font-size:22px;}
[data-design="spotlight"] .promo-product-card:first-child .promo-add-btn{font-size:14px;padding:12px;border-radius:12px;}
[data-design="spotlight"] .promo-product-card:first-child .promo-in-cart-note{font-size:13px;padding:12px 0;}
[data-design="spotlight"] .promo-product-name{font-size:12px;}
[data-design="spotlight"] .promo-add-btn{font-size:11px;padding:7px;}
[data-design="spotlight"] .promo-in-cart-note{font-size:10px;padding:7px 0;}

/* ---- landing: a real DTC-style hero - centered intro, a "Shop the
   sale" button that scrolls straight to the products, a trust strip,
   and a quiet reassurance line at checkout. Otherwise a standard grid,
   same as 'classic'. ----------------------------------------------------- */
[data-design="landing"] .promo-hero-content{text-align:center;max-width:420px;}
[data-design="landing"] .promo-title{font-family:'Newsreader', Georgia, serif;font-size:30px;font-weight:700;}
[data-design="landing"] .promo-shop-cta,[data-design="landing"] .promo-trust-strip,[data-design="landing"] .promo-checkout-reassurance{display:flex;}
[data-design="landing"] .promo-shop-cta{align-self:center;margin-left:auto;margin-right:auto;}
[data-design="landing"] .promo-end-date{background:none;color:var(--promo-text-muted);font-weight:600;padding:4px 0;}
[data-design="landing"] .promo-product-grid{max-width:720px;}
[data-design="landing"] .promo-details{text-align:center;}

/* ---- compact: a dense, no-frills list built for fast scanning and
   quick reorders - small thumbnail, tight rows, a shrunk banner (or
   none at all), everything sized down from the default grid look. ------ */
[data-design="compact"]{--promo-radius:8px;--promo-shadow:none;--promo-content-max:540px;}
[data-design="compact"] .promo-banner img{max-height:120px;}
[data-design="compact"] .promo-hero-content{padding:14px 16px 10px;}
[data-design="compact"] .promo-title{font-family:'Space Grotesk', system-ui, sans-serif;font-size:19px;}
[data-design="compact"] .promo-desc{font-size:12.5px;}
[data-design="compact"] .promo-end-date{padding:4px 9px;font-size:11px;margin-top:6px;}
[data-design="compact"] .promo-details{padding:12px 14px;margin:10px auto;}
[data-design="compact"] .promo-details-title{font-size:11px;}
[data-design="compact"] .promo-product-grid{grid-template-columns:1fr;max-width:540px;gap:0;}
[data-design="compact"] .promo-product-card{flex-direction:row;border:none;border-bottom:1px solid var(--promo-border);border-radius:0;box-shadow:none;align-items:center;gap:10px;padding:8px 4px;}
[data-design="compact"] .promo-product-media{width:44px;height:44px;flex:0 0 auto;aspect-ratio:auto;border-radius:6px;}
[data-design="compact"] .promo-product-body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:0;}
[data-design="compact"] .promo-product-name{flex:1 1 100%;font-size:12.5px;min-height:0;}
[data-design="compact"] .promo-product-price{font-size:12px;}
[data-design="compact"] .promo-price-now{font-size:13px;}
[data-design="compact"] .promo-qty{margin-top:0;}
[data-design="compact"] .promo-qty-btn{width:22px;height:22px;font-size:13px;}
[data-design="compact"] .promo-add-btn{width:auto;padding:6px 10px;font-size:11.5px;border-radius:6px;}
[data-design="compact"] .promo-cart-actions{flex:1 1 100%;margin-top:0;}
[data-design="compact"] .promo-in-cart-note{flex:1 1 100%;padding:6px 0;font-size:11.5px;}
[data-design="compact"] .promo-cart-bar{padding:10px 14px;}
/* 2026-10-26: the OFFER badge was full size on a 44px thumbnail, covering
   the photo and the start of the price - a small tag under the thumbnail. */
[data-design="compact"] .promo-badge{top:auto;bottom:-5px;left:50%;transform:translateX(-50%);font-size:8.5px;line-height:1.3;padding:1px 5px;border-radius:4px;letter-spacing:.02em;white-space:nowrap;}

/* =========================================================================
   Storefront-specific themes (Sites::STOREFRONT_DESIGNS) - a Storefront's
   own theme library, separate from Promotions::DESIGNS above (see that
   const's own docblock in Sites.php for why). Each of these five themes
   restyles the mini-site shell this page actually renders (topbar, hero,
   the "Shop" section the embedded order-widget sits in, about, gallery,
   contact) - never the widget's own insides, which live inside its
   Shadow DOM and are styled independently from its own accent_color (see
   storefront.php's own docblock). Detailed on purpose (Manish: "design
   better store front themes -- better and detailed than promotions
   one") - each theme has its own palette, type, hero treatment, card
   language and gallery/contact styling, not just a color swap. ========= */

/* ---- storefront-modern: "Modern Clean" (was "Modern Pharmacy") - the default. Clean, airy,
   trustworthy - soft blue-tinted surfaces, generous rounded cards, a
   centered hero with a soft gradient backdrop behind the banner. Built
   to read as a real, professional online pharmacy front door. --------- */
[data-design="storefront-modern"]{
  --promo-bg:#f3f6fb;--promo-surface:#ffffff;--promo-radius:16px;
  --promo-font:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --promo-shadow:0 6px 22px rgba(15,23,42,0.08);
  --promo-hero-divider:rgba(15,23,42,0.06);--promo-content-max:760px;
}
[data-design="storefront-modern"] .promo-topbar{
  background:var(--promo-surface);box-shadow:0 1px 0 var(--promo-hero-divider);
}
[data-design="storefront-modern"] .promo-hero{
  background:linear-gradient(180deg, rgba(27,174,112,0.08), var(--promo-bg) 65%);
}
[data-design="storefront-modern"] .promo-hero-content{text-align:center;max-width:600px;padding:36px 20px 30px;}
[data-design="storefront-modern"] .promo-banner{border:none;border-radius:var(--promo-radius);overflow:hidden;max-width:760px;margin:0 auto;box-shadow:var(--promo-shadow);}
[data-design="storefront-modern"] .promo-title{font-size:30px;font-weight:800;letter-spacing:-0.015em;}
[data-design="storefront-modern"] .promo-desc{font-size:15.5px;max-width:460px;margin:8px auto 0;}
[data-design="storefront-modern"] .promo-shop-hint{
  color:var(--promo-accent);font-size:13.5px;font-weight:700;
}
[data-design="storefront-modern"] .promo-trust-strip{
  max-width:600px;margin:0 auto 4px;justify-content:center;gap:18px 22px;padding:0 20px 20px;
}
[data-design="storefront-modern"] .promo-trust-item{
  background:var(--promo-surface);padding:7px 12px;border-radius:999px;box-shadow:var(--promo-shadow);
}
[data-design="storefront-modern"] .promo-about,
[data-design="storefront-modern"] .promo-gallery,
[data-design="storefront-modern"] .promo-contact{
  background:var(--promo-surface);border-radius:var(--promo-radius);box-shadow:var(--promo-shadow);
  padding:20px;margin-top:20px;border:none;
}
[data-design="storefront-modern"] .promo-gallery-grid{border-radius:10px;overflow:hidden;}
[data-design="storefront-modern"] .promo-gallery-grid a{border-radius:10px;}

/* ---- storefront-neighborhood: "Neighborhood Store" - warm, friendly,
   community-shop feel. Cream/terracotta palette, big rounded photos, a
   hand-picked/postcard feel for About, a chunky welcoming CTA. -------- */
[data-design="storefront-neighborhood"]{
  --promo-bg:#fbf2e4;--promo-surface:#fffaf1;--promo-radius:20px;
  --promo-font:'Quicksand', system-ui, -apple-system, sans-serif;
  --promo-shadow:0 8px 20px rgba(140,84,28,0.12);--promo-border:rgba(140,84,28,0.16);
  --promo-hero-divider:rgba(140,84,28,0.14);--promo-content-max:700px;
}
[data-design="storefront-neighborhood"] .promo-topbar{background:var(--promo-surface);}
[data-design="storefront-neighborhood"] .promo-topbar-brand{color:#5a3a16;font-weight:800;}
[data-design="storefront-neighborhood"] .promo-hero-content{text-align:center;padding:28px 20px 26px;}
[data-design="storefront-neighborhood"] .promo-banner{border-radius:24px;overflow:hidden;max-width:700px;margin:16px auto 0;box-shadow:var(--promo-shadow);}
[data-design="storefront-neighborhood"] .promo-title{font-size:29px;font-weight:700;color:#5a3a16;}
[data-design="storefront-neighborhood"] .promo-desc{color:#8a6a44;}
[data-design="storefront-neighborhood"] .promo-shop-hint{
  color:#8a6a44;font-size:13.5px;font-weight:700;
}
[data-design="storefront-neighborhood"] .promo-trust-strip{justify-content:center;}
[data-design="storefront-neighborhood"] .promo-about{
  background:var(--promo-surface);border:2px dashed var(--promo-border);border-radius:20px;padding:18px 20px;margin-top:22px;
}
[data-design="storefront-neighborhood"] .promo-gallery-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
[data-design="storefront-neighborhood"] .promo-gallery-grid a{border-radius:16px;box-shadow:0 4px 12px rgba(140,84,28,0.14);}
[data-design="storefront-neighborhood"] .promo-contact{
  background:var(--promo-surface);border-radius:20px;border:none;padding:18px 20px;margin-top:22px;box-shadow:var(--promo-shadow);
}

/* ---- storefront-clinical: "Clinical Trust" - crisp, precise, medical-
   grade credibility. Blue-gray palette, sharp corners, borders instead
   of shadows, a prominent trust strip, information laid out like a
   patient info sheet rather than a shop window. ----------------------- */
[data-design="storefront-clinical"]{
  --promo-bg:#f6f8f9;--promo-surface:#ffffff;--promo-radius:6px;
  --promo-font:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --promo-shadow:none;--promo-border:rgba(20,45,66,0.14);
  --promo-hero-divider:rgba(20,45,66,0.14);--promo-content-max:700px;
}
[data-design="storefront-clinical"] .promo-topbar{background:#0f2d45;color:#fff;}
[data-design="storefront-clinical"] .promo-topbar-brand{color:#fff;}
[data-design="storefront-clinical"] .promo-topbar-icon-btn{color:#fff;border-color:rgba(255,255,255,0.3);}
[data-design="storefront-clinical"] .promo-hero{background:var(--promo-surface);border-bottom:1px solid var(--promo-border);}
[data-design="storefront-clinical"] .promo-hero-content{padding:26px 20px;}
[data-design="storefront-clinical"] .promo-banner{border:1px solid var(--promo-border);border-radius:6px;overflow:hidden;}
[data-design="storefront-clinical"] .promo-title{font-size:25px;font-weight:700;letter-spacing:-0.005em;}
[data-design="storefront-clinical"] .promo-desc{font-size:14.5px;}
[data-design="storefront-clinical"] .promo-shop-hint{
  color:var(--promo-text);font-size:13px;font-weight:600;
}
[data-design="storefront-clinical"] .promo-trust-strip{
  background:var(--promo-bg);border-top:1px solid var(--promo-border);border-bottom:1px solid var(--promo-border);
  max-width:none;padding:14px 20px;justify-content:center;gap:26px;
}
[data-design="storefront-clinical"] .promo-section-title{font-size:12px;letter-spacing:0.06em;}
[data-design="storefront-clinical"] .promo-about,
[data-design="storefront-clinical"] .promo-gallery,
[data-design="storefront-clinical"] .promo-contact{
  border:1px solid var(--promo-border);border-radius:6px;padding:18px 20px;margin-top:18px;
}
[data-design="storefront-clinical"] .promo-gallery-grid{gap:6px;}
[data-design="storefront-clinical"] .promo-gallery-grid a{border-radius:4px;border:1px solid var(--promo-border);}
[data-design="storefront-clinical"] .promo-contact-row{border-bottom:1px solid var(--promo-border);padding:8px 0;}
[data-design="storefront-clinical"] .promo-contact-row:last-child{border-bottom:none;}

/* ---- storefront-boutique: "Boutique Elegant" - upscale, quiet, a serif
   wordmark and thin hairline dividers instead of cards/shadows. A
   pharmacy that wants to read as premium/curated rather than discount. */
[data-design="storefront-boutique"]{
  --promo-bg:#faf8f5;--promo-surface:#ffffff;--promo-radius:2px;
  --promo-font:'Work Sans', system-ui, -apple-system, sans-serif;
  --promo-shadow:none;--promo-border:rgba(20,20,18,0.12);
  --promo-hero-divider:rgba(20,20,18,0.12);--promo-content-max:620px;
}
[data-design="storefront-boutique"] .promo-topbar{background:var(--promo-bg);border-bottom:1px solid var(--promo-border);}
[data-design="storefront-boutique"] .promo-topbar-brand{
  margin:0 auto;font-family:'Playfair Display', Georgia, serif;font-weight:600;letter-spacing:0.02em;font-size:16px;
}
[data-design="storefront-boutique"] .promo-hero-content{text-align:center;padding:40px 20px 30px;max-width:520px;}
[data-design="storefront-boutique"] .promo-banner{max-height:340px;}
[data-design="storefront-boutique"] .promo-banner img{max-height:340px;}
[data-design="storefront-boutique"] .promo-title{
  font-family:'Playfair Display', Georgia, serif;font-weight:600;font-style:italic;font-size:30px;letter-spacing:0;
}
[data-design="storefront-boutique"] .promo-desc{font-size:14px;color:var(--promo-text-muted);}
[data-design="storefront-boutique"] .promo-shop-hint{
  color:var(--promo-text);font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
}
[data-design="storefront-boutique"] .promo-section-title{
  font-family:'Playfair Display', Georgia, serif;font-style:italic;font-weight:600;font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--promo-text);text-align:center;
}
[data-design="storefront-boutique"] .promo-about,
[data-design="storefront-boutique"] .promo-gallery,
[data-design="storefront-boutique"] .promo-contact{
  border-top:1px solid var(--promo-border);padding-top:24px;margin-top:24px;
}
[data-design="storefront-boutique"] .promo-about{text-align:center;}
[data-design="storefront-boutique"] .promo-about .promo-section-title,
[data-design="storefront-boutique"] .promo-gallery .promo-section-title,
[data-design="storefront-boutique"] .promo-contact .promo-section-title{padding-bottom:14px;}
[data-design="storefront-boutique"] .promo-gallery-grid{grid-template-columns:repeat(2,1fr);gap:2px;}
[data-design="storefront-boutique"] .promo-gallery-grid a{border-radius:0;}
[data-design="storefront-boutique"] .promo-contact{text-align:center;}
[data-design="storefront-boutique"] .promo-contact-row{justify-content:center;}

/* ---- storefront-bazaar: "Vibrant Bazaar" - loud, colorful, energetic.
   A warm gradient hero, chunky pill CTA with a real shadow "pop", and a
   playful gallery with a light alternating tilt, built for a store that
   wants to feel busy/exciting rather than clinical. ------------------- */
[data-design="storefront-bazaar"]{
  --promo-bg:#fff3df;--promo-surface:#ffffff;--promo-radius:22px;
  --promo-font:'Baloo 2', system-ui, -apple-system, sans-serif;
  --promo-shadow:0 10px 24px rgba(210,90,20,0.16);--promo-hero-divider:rgba(210,90,20,0.2);
  --promo-content-max:740px;
}
[data-design="storefront-bazaar"] .promo-topbar{background:var(--promo-surface);}
[data-design="storefront-bazaar"] .promo-topbar-brand{font-weight:700;}
[data-design="storefront-bazaar"] .promo-hero{
  background:linear-gradient(135deg, rgba(255,196,102,0.35), rgba(255,120,120,0.22) 55%, rgba(160,110,255,0.18));
}
[data-design="storefront-bazaar"] .promo-hero-content{text-align:center;padding:34px 20px 28px;}
[data-design="storefront-bazaar"] .promo-banner{border:none;border-radius:26px;overflow:hidden;max-width:740px;margin:0 auto;box-shadow:var(--promo-shadow);}
[data-design="storefront-bazaar"] .promo-title{font-size:32px;font-weight:700;color:var(--promo-text);}
[data-design="storefront-bazaar"] .promo-desc{font-size:15px;max-width:460px;margin:8px auto 0;}
[data-design="storefront-bazaar"] .promo-shop-hint{
  color:var(--promo-text);font-size:14px;font-weight:700;
}
[data-design="storefront-bazaar"] .promo-trust-strip{justify-content:center;gap:12px 16px;}
[data-design="storefront-bazaar"] .promo-trust-item{
  background:var(--promo-surface);padding:8px 14px;border-radius:999px;box-shadow:0 3px 10px rgba(210,90,20,0.14);font-weight:600;
}
[data-design="storefront-bazaar"] .promo-about,
[data-design="storefront-bazaar"] .promo-contact{
  background:var(--promo-surface);border-radius:var(--promo-radius);box-shadow:var(--promo-shadow);
  padding:20px;margin-top:20px;
}
[data-design="storefront-bazaar"] .promo-gallery-grid{gap:10px;}
[data-design="storefront-bazaar"] .promo-gallery-grid a{
  border-radius:16px;box-shadow:0 5px 14px rgba(210,90,20,0.16);transform:rotate(-1.5deg);
}
[data-design="storefront-bazaar"] .promo-gallery-grid a:nth-child(even){transform:rotate(1.5deg);}
[data-design="storefront-bazaar"] .promo-gallery-grid a:hover{transform:rotate(0);}

/* ---- Storefront: gap between the header bar and the banner (2026-10-26).
   Every storefront design used to butt the banner straight up against
   the sticky topbar (or run it edge to edge). One rule for all five
   designs - body[...] makes it more specific than each design's own
   .promo-banner margin, so it always wins. Each design keeps its own
   radius/shadow. */
body[data-design^="storefront-"] .promo-hero{padding-top:20px;}
body[data-design^="storefront-"] .promo-banner{
  margin:0 auto;width:calc(100% - 32px);max-width:var(--promo-content-max, 760px);
  border-radius:var(--promo-radius, 12px);overflow:hidden;
}
@media (min-width:700px){
  body[data-design^="storefront-"] .promo-hero{padding-top:28px;}
}

/* ---- Storefront: Medicines section (storefront.php + storefront.js,
   2026-10-26). 'Add' hands the item to the floating order widget's own
   cart, so this is a browse grid only - no cart UI of its own beyond a
   "View cart" shortcut. Uses each design's own tokens. */
.sf-products{max-width:var(--promo-content-max, 760px);margin:24px auto 0;padding:0 20px;}
.sf-products-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.sf-products-head .promo-section-title{padding:0;margin:0;}
.sf-cart-btn{
  background:var(--promo-accent);color:#fff;border:none;border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.sf-cart-btn span{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:rgba(255,255,255,0.25);}
.sf-search{margin-bottom:12px;}
.sf-search input{
  width:100%;box-sizing:border-box;padding:11px 14px;font-size:14px;font-family:inherit;
  border:1px solid var(--promo-border);border-radius:var(--promo-radius, 10px);background:var(--promo-surface);color:var(--promo-text);
}
.sf-search input:focus{outline:2px solid var(--promo-accent);outline-offset:-1px;}
.sf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media (max-width:760px){.sf-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.sf-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}
.sf-card{
  background:var(--promo-surface);border:1px solid var(--promo-border);border-radius:var(--promo-radius, 12px);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--promo-shadow, none);
}
.sf-card.out-of-stock{opacity:0.6;}
.sf-card-media{aspect-ratio:1/1;background:#f2f2f0;}
.sf-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.sf-card-body{padding:9px 10px 10px;display:flex;flex-direction:column;gap:5px;flex:1;}
.sf-card-name{font-size:13px;font-weight:600;line-height:1.3;color:var(--promo-text);min-height:2.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sf-card-price{font-size:15px;font-weight:800;color:var(--promo-accent);}
.sf-card-price.sf-muted{font-size:12px;font-weight:600;color:var(--promo-text-muted);}
.sf-add-btn{
  margin-top:auto;width:100%;padding:8px 10px;border:none;border-radius:8px;cursor:pointer;font-family:inherit;
  background:var(--promo-accent);color:#fff;font-size:13px;font-weight:700;
}
.sf-add-btn.in-cart{background:transparent;color:var(--promo-accent);box-shadow:inset 0 0 0 1.5px var(--promo-accent);}
.sf-add-btn:disabled{background:#e5e7eb;color:#9ca3af;cursor:default;box-shadow:none;}
.sf-empty{grid-column:1/-1;text-align:center;padding:28px 10px;font-size:13.5px;color:var(--promo-text-muted);}
.sf-more-wrap{text-align:center;margin-top:14px;}
.sf-more-btn{
  background:var(--promo-surface);color:var(--promo-text);border:1px solid var(--promo-border);border-radius:999px;
  padding:9px 22px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
}

/* ---- Storefront gallery lightbox (storefront.php, 2026-10-26) ---- */
.promo-gallery-grid a{cursor:zoom-in;}
.promo-gallery-grid img{transition:transform .25s;}
.promo-gallery-grid a:hover img{transform:scale(1.04);}
.sf-lightbox{
  position:fixed;inset:0;z-index:2147483000;background:rgba(10,10,12,0.92);
  display:flex;align-items:center;justify-content:center;padding:56px 12px;
}
.sf-lightbox[hidden]{display:none;}
.sf-lightbox img{max-width:min(100%,1100px);max-height:100%;object-fit:contain;border-radius:8px;user-select:none;}
.sf-lb-close,.sf-lb-nav{
  position:absolute;border:none;background:rgba(255,255,255,0.12);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit;line-height:1;
}
.sf-lb-close{top:12px;right:12px;width:42px;height:42px;border-radius:50%;font-size:28px;}
.sf-lb-nav{top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;font-size:34px;padding-bottom:4px;}
.sf-lb-nav[hidden],.sf-lb-count[hidden]{display:none;}
.sf-lb-prev{left:12px;}
.sf-lb-next{right:12px;}
.sf-lb-close:hover,.sf-lb-nav:hover{background:rgba(255,255,255,0.24);}
.sf-lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.85);font-size:13px;font-weight:600;}
@media (max-width:560px){.sf-lb-nav{width:38px;height:38px;font-size:28px;}}

/* =====================================================================
   Storefront responsive layout (2026-10-26). Before this every theme was
   a single ~620-760px column - fine on a phone, a narrow "mobile page"
   in the middle of a desktop screen. Now:
   - phones: one column with a 16px gutter on every section, hero
     buttons (Shop medicines / Upload prescription / WhatsApp);
   - >= 960px: a 1180px page - header aligned to it, hero as banner +
     text side by side, 4-up products, 4-up gallery, About and
     Contact side by side, footer.
   body[data-design^="storefront-"] (0,1,1+) outranks each theme's own
   [data-design="storefront-x"] rules (0,1,0 / 0,2,0) where it has to;
   each theme keeps its colors, fonts, radii and shadows.
   ===================================================================== */

/* -- every width -- */
body[data-design^="storefront-"] .promo-about,
body[data-design^="storefront-"] .promo-gallery,
body[data-design^="storefront-"] .promo-contact,
body[data-design^="storefront-"] .sf-products{
  box-sizing:border-box;width:calc(100% - 32px);max-width:calc(var(--promo-content-max) - 32px);
  margin-left:auto;margin-right:auto;
}
body[data-design^="storefront-"] .sf-products{padding-left:0;padding-right:0;}
body[data-design^="storefront-"] .promo-about .promo-section-title,
body[data-design^="storefront-"] .promo-gallery .promo-section-title,
body[data-design^="storefront-"] .promo-contact .promo-section-title{padding-left:0;padding-right:0;}
.sf-info{margin:0 auto;}
.sf-info > section{margin-top:20px;}

.sf-hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:center;}
[data-design="storefront-clinical"] .sf-hero-ctas{justify-content:flex-start;}
.sf-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 20px;
  border-radius:999px;border:none;background:var(--promo-accent);color:#fff;font:inherit;font-size:14.5px;font-weight:700;
  text-decoration:none;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,0.10);transition:transform .15s, box-shadow .15s;
}
.sf-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,0.14);}
.sf-cta svg{width:17px;height:17px;}
.sf-cta-ghost{background:var(--promo-surface);color:var(--promo-accent);box-shadow:inset 0 0 0 1.5px var(--promo-accent);}
.sf-cta-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--promo-accent), 0 4px 12px rgba(0,0,0,0.08);}
[data-design="storefront-boutique"] .sf-cta{border-radius:2px;letter-spacing:.04em;text-transform:uppercase;font-size:12.5px;}
[data-design="storefront-clinical"] .sf-cta{border-radius:6px;}
body[data-design^="storefront-"] .promo-shop-hint{font-size:12.5px;font-weight:500;color:var(--promo-text-muted);margin-top:14px;text-transform:none;letter-spacing:0;}
html{scroll-behavior:smooth;}
#sf-products{scroll-margin-top:76px;}

.sf-footer{
  text-align:center;font-size:12.5px;color:var(--promo-text-muted);
  padding:28px 20px 96px;margin-top:28px;border-top:1px solid var(--promo-border);
}

@media (max-width:520px){
  .sf-hero-ctas .sf-cta{flex:1 1 calc(50% - 10px);padding:0 14px;font-size:14px;}
  .sf-hero-ctas .sf-cta:first-child{flex-basis:100%;}
  body[data-design^="storefront-"] .promo-title{font-size:26px;}
}

/* -- desktop -- */
@media (min-width:960px){
  body[data-design^="storefront-"]{--promo-content-max:1180px;}
  body[data-design^="storefront-"] .promo-topbar{
    padding-left:max(24px, calc((100% - 1180px) / 2 + 16px));
    padding-right:max(24px, calc((100% - 1180px) / 2 + 16px));
  }
  body[data-design^="storefront-"] .promo-topbar-brand{font-size:19px;}
  body[data-design^="storefront-"] .promo-topbar-logo{width:38px;height:38px;}

  body[data-design^="storefront-"] .promo-hero{padding:44px 0 52px;}
  .sf-hero-inner{max-width:1180px;margin:0 auto;padding:0 16px;box-sizing:border-box;}
  .sf-hero-inner.has-banner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;}
  body[data-design^="storefront-"] .sf-hero-inner .promo-banner{width:100%;max-width:none;margin:0;max-height:none;}
  body[data-design^="storefront-"] .sf-hero-inner .promo-banner img{height:400px;max-height:none;width:100%;object-fit:cover;}
  body[data-design^="storefront-"] .sf-hero-inner.has-banner .promo-hero-content{text-align:left;max-width:none;padding:0;margin:0;}
  body[data-design^="storefront-"] .sf-hero-inner.has-banner .promo-desc{margin-left:0;margin-right:0;max-width:none;}
  body[data-design^="storefront-"] .sf-hero-inner.has-banner .sf-hero-ctas{justify-content:flex-start;}
  body[data-design^="storefront-"] .sf-hero-inner:not(.has-banner) .promo-hero-content{max-width:760px;padding:20px 0;}
  body[data-design^="storefront-"] .promo-title{font-size:42px;line-height:1.12;}
  body[data-design^="storefront-"] .promo-desc{font-size:17px;line-height:1.55;margin-top:12px;}
  .sf-cta{min-height:48px;padding:0 20px;font-size:14.5px;}

  body[data-design^="storefront-"] .promo-trust-strip{max-width:1148px;margin-left:auto;margin-right:auto;justify-content:center;gap:16px 40px;}

  body[data-design^="storefront-"] .sf-products{margin-top:40px;}
  .sf-products-head .promo-section-title,
  body[data-design^="storefront-"] .promo-gallery .promo-section-title,
  body[data-design^="storefront-"] .promo-about .promo-section-title,
  body[data-design^="storefront-"] .promo-contact .promo-section-title{font-size:14px;}
  .sf-search input{max-width:460px;}
  .sf-grid{gap:18px;}
  .sf-card-name{font-size:14px;}
  /* shorter, letterboxed photos on desktop - a full square at ~270px wide
     made each card taller than the screen allows for two rows */
  .sf-card-media{aspect-ratio:4/3;background:#fff;}
  .sf-card-media img{object-fit:contain;padding:10px;box-sizing:border-box;}
  .sf-card-media .promo-product-media-placeholder,.sf-card-media img.promo-media-broken{padding:0;}
  .sf-card-price{font-size:16px;}

  body[data-design^="storefront-"] .promo-gallery{margin-top:40px;}
  body[data-design^="storefront-"] .promo-gallery-grid{grid-template-columns:repeat(4,1fr);gap:14px;}
  body[data-design^="storefront-"] .promo-gallery-grid a{aspect-ratio:4/3;}

  .sf-info{width:calc(100% - 32px);max-width:1148px;margin:40px auto 0;}
  .sf-info.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:stretch;}
  body[data-design^="storefront-"] .sf-info > section{width:auto;max-width:none;margin:0;}
  body[data-design^="storefront-"] .sf-info:not(.two) > section{margin-top:0;}
  body[data-design^="storefront-"] .promo-about p{font-size:15px;line-height:1.7;}
  body[data-design^="storefront-"] .promo-contact-row{font-size:14.5px;padding:5px 0;}

  .sf-footer{margin-top:48px;padding:28px 20px 40px;}
  /* boutique sections have no card background - no inner side padding */
  body[data-design="storefront-boutique"] .promo-gallery,
  body[data-design="storefront-boutique"] .promo-about,
  body[data-design="storefront-boutique"] .promo-contact{padding-left:0;padding-right:0;}
}

/* =====================================================================
   Storefront website pages + full footer (2026-10-26, storefront.php
   ?p=<page>, StorefrontPages.php). Uses each theme's own tokens.
   ===================================================================== */
a.promo-topbar-brand{text-decoration:none;color:inherit;}
h2.promo-section-title{margin-top:0;margin-bottom:0;line-height:1.3;}
.sf-products-head h2.promo-section-title{margin:0;}

/* -- page view -- */
.sf-page{box-sizing:border-box;width:calc(100% - 32px);max-width:860px;margin:24px auto 0;}
.sf-crumbs{font-size:12.5px;color:var(--promo-text-muted);margin-bottom:10px;}
.sf-crumbs a{color:var(--promo-accent);text-decoration:none;font-weight:600;}
.sf-crumbs span[aria-hidden]{margin:0 4px;}
.sf-page-title{font-size:30px;line-height:1.2;margin:0 0 18px;color:var(--promo-text);letter-spacing:-0.01em;}
[data-design="storefront-boutique"] .sf-page-title{font-family:'Playfair Display', Georgia, serif;font-style:italic;font-weight:600;}
.sf-page-body{
  background:var(--promo-surface);border:1px solid var(--promo-border);border-radius:var(--promo-radius, 12px);
  padding:22px 22px 10px;color:var(--promo-text);font-size:15px;line-height:1.7;
}
.sf-page-body:empty{display:none;}
.sf-page-body h2{font-size:19px;line-height:1.3;margin:22px 0 8px;color:var(--promo-text);}
.sf-page-body h2:first-child,.sf-page-body h3:first-child{margin-top:0;}
.sf-page-body h3{font-size:16px;margin:18px 0 6px;}
.sf-page-body p{margin:0 0 12px;}
.sf-page-body ul{margin:0 0 14px;padding-left:20px;}
.sf-page-body li{margin:3px 0;}
.sf-page-body a{color:var(--promo-accent);font-weight:600;}
.sf-contact-cards{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px;}
.sf-contact-card{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--promo-surface);
  border:1px solid var(--promo-border);border-radius:var(--promo-radius, 12px);font-size:14.5px;line-height:1.5;
}
.sf-contact-card > svg{width:22px;height:22px;flex-shrink:0;color:var(--promo-accent);margin-top:1px;}
.sf-contact-card strong{display:block;font-size:13px;color:var(--promo-text-muted);font-weight:600;margin-bottom:2px;}
.sf-contact-card span{display:block;color:var(--promo-text);}
.sf-contact-card a{color:var(--promo-accent);font-weight:700;text-decoration:none;display:inline-block;margin-top:2px;}
.sf-page-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px;}
.sf-page-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;}

/* -- footer (replaces the one-line footer) -- */
.sf-footer{
  text-align:left;margin-top:40px;padding:0;border-top:1px solid var(--promo-border);
  background:var(--promo-surface);color:var(--promo-text);font-size:14px;
}
.sf-footer-inner{
  box-sizing:border-box;width:calc(100% - 32px);max-width:1148px;margin:0 auto;padding:30px 0 10px;
  display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;
}
.sf-footer-brand{grid-column:1 / -1;}
.sf-footer-name{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--promo-text);font-weight:800;font-size:18px;}
.sf-footer-name img{width:36px;height:36px;border-radius:8px;object-fit:cover;}
.sf-footer-brand p{margin:8px 0 0;color:var(--promo-text-muted);font-size:13.5px;line-height:1.55;max-width:340px;}
.sf-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.sf-social a{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--promo-accent);box-shadow:inset 0 0 0 1.5px var(--promo-border);transition:background .15s,color .15s;
}
.sf-social a:hover{background:var(--promo-accent);color:#fff;box-shadow:none;}
.sf-social svg{width:19px;height:19px;}
.sf-footer-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-width:0;}
.sf-footer-col h2{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--promo-text-muted);margin:0 0 3px;}
.sf-footer-col a,.sf-footer-col button{
  color:var(--promo-text);text-decoration:none;font:inherit;font-size:14px;background:none;border:none;padding:0;cursor:pointer;text-align:left;
}
.sf-footer-col a:hover,.sf-footer-col button:hover,.sf-footer-col a[aria-current]{color:var(--promo-accent);}
.sf-footer-contact span{color:var(--promo-text-muted);font-size:13.5px;line-height:1.5;}
.sf-footer-contact{grid-column:1 / -1;}
.sf-footer-bottom{
  box-sizing:border-box;width:calc(100% - 32px);max-width:1148px;margin:0 auto;padding:16px 0 96px;
  border-top:1px solid var(--promo-border);font-size:12px;color:var(--promo-text-muted);line-height:1.6;
}

@media (min-width:700px){
  .sf-contact-cards{grid-template-columns:repeat(2,1fr);}
  .sf-page-photos{grid-template-columns:repeat(3,1fr);}
  .sf-footer-inner{grid-template-columns:repeat(3,1fr);}
  .sf-footer-contact{grid-column:auto;}
}
@media (min-width:960px){
  .sf-page{margin-top:40px;}
  .sf-page-title{font-size:38px;}
  .sf-page-body{padding:32px 36px 18px;font-size:15.5px;}
  .sf-footer{margin-top:56px;}
  .sf-footer-inner{grid-template-columns:1.6fr 1fr 1fr 1.2fr 1.3fr;padding:44px 0 26px;gap:30px;}
  .sf-footer-brand{grid-column:auto;}
  .sf-footer-bottom{padding:18px 0 28px;}
}

/* =====================================================================
   Storefront product cards: image placeholder + Big / Medium / Small
   sizes (2026-10-26, Settings -> Storefront -> Product card size).
   ===================================================================== */
/* The medicine placeholder always sits under the photo; a product with
   no photo (or a photo that fails to load - it removes itself) shows it. */
.sf-card-media{position:relative;overflow:hidden;}
.sf-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#eef4f1;background:color-mix(in srgb, var(--promo-accent) 9%, #fff);color:var(--promo-accent);
}
.sf-ph svg{width:38%;max-width:72px;min-width:26px;height:auto;opacity:.75;}
.sf-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;}
@media (min-width:960px){
  .sf-card-media img{object-fit:contain;padding:10px;box-sizing:border-box;}
}

/* -- Medium: more per row, smaller photos and text -- */
.sf-size-medium .sf-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:521px){.sf-size-medium .sf-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:761px){.sf-size-medium .sf-grid{grid-template-columns:repeat(4,1fr);gap:12px;}}
@media (min-width:960px){.sf-size-medium .sf-grid{grid-template-columns:repeat(5,1fr);gap:14px;}}
.sf-size-medium .sf-card-media{aspect-ratio:1/1;}
.sf-size-medium .sf-card-body{padding:8px 9px 9px;gap:4px;}
.sf-size-medium .sf-card-name{font-size:12.5px;}
.sf-size-medium .sf-card-price{font-size:14px;}
.sf-size-medium .sf-add-btn{padding:6px 8px;font-size:12px;border-radius:7px;}

/* -- Small: compact list rows - thumbnail, name + price, Add -- */
.sf-size-small .sf-grid{grid-template-columns:1fr;gap:8px;}
@media (min-width:640px){.sf-size-small .sf-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:960px){.sf-size-small .sf-grid{grid-template-columns:repeat(3,1fr);gap:12px;}}
.sf-size-small .sf-card{flex-direction:row;align-items:center;gap:10px;padding:8px;}
.sf-size-small .sf-card-media{width:64px;height:64px;aspect-ratio:auto;flex-shrink:0;border-radius:8px;}
.sf-size-small .sf-card-media img{object-fit:cover;padding:0;}
.sf-size-small .sf-ph svg{width:60%;min-width:0;}
.sf-size-small .sf-card-body{
  flex:1;min-width:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;
}
.sf-size-small .sf-card-name{grid-column:1;grid-row:1;min-height:0;font-size:13px;-webkit-line-clamp:2;}
.sf-size-small .sf-card-price{grid-column:1;grid-row:2;font-size:14px;}
.sf-size-small .sf-add-btn{grid-column:2;grid-row:1 / 3;width:auto;margin:0;padding:8px 14px;font-size:12.5px;white-space:nowrap;}

/* ---- Storefront banner position (2026-10-26, storefront.banner_layout).
   Desktop only - phones always stack banner above the text. 'left' is
   the existing layout (grid from the responsive block above). ---- */
@media (min-width:960px){
  .sf-hero-inner.has-banner.sf-banner-right{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);}
  .sf-hero-inner.has-banner.sf-banner-right .promo-banner{order:2;}
  .sf-hero-inner.has-banner.sf-banner-right .promo-hero-content{order:1;}
  .sf-hero-inner.has-banner.sf-banner-full{display:block;}
  body[data-design^="storefront-"] .sf-hero-inner.sf-banner-full .promo-banner img{height:auto;aspect-ratio:1148 / 400;max-height:440px;}
  body[data-design^="storefront-"] .sf-hero-inner.has-banner.sf-banner-full .promo-hero-content{text-align:center;max-width:760px;margin:36px auto 0;}
  body[data-design^="storefront-"] .sf-hero-inner.has-banner.sf-banner-full .promo-desc{margin-left:auto;margin-right:auto;}
  body[data-design^="storefront-"] .sf-hero-inner.has-banner.sf-banner-full .sf-hero-ctas{justify-content:center;}
}

/* =====================================================================
   Storefront color schemes (2026-10-26, storefront.color_scheme).
   --promo-accent is set to the scheme's accent by storefront.php, plus
   --sf-dark (titles, dark header bars) and --sf-soft (hero/footer tint).
   These replace the few hard-coded theme colors so every theme follows
   the chosen scheme; layout, fonts and radii stay the theme's own.
   ===================================================================== */
body[data-scheme] .promo-hero{background:linear-gradient(180deg, var(--sf-soft) 0%, var(--promo-bg) 88%);}
body[data-scheme] .promo-title,
body[data-scheme] .sf-page-title{color:var(--sf-dark);}
body[data-scheme] .promo-topbar-brand{color:var(--sf-dark);}
body[data-scheme][data-design="storefront-clinical"] .promo-topbar{background:var(--sf-dark);}
body[data-scheme][data-design="storefront-clinical"] .promo-topbar-brand{color:#fff;}
body[data-scheme][data-design="storefront-neighborhood"] .promo-desc,
body[data-scheme][data-design="storefront-neighborhood"] .promo-shop-hint{color:var(--promo-text-muted);}
body[data-scheme] .promo-trust-item svg,body[data-scheme] .promo-contact-row svg{color:var(--promo-accent);}
body[data-scheme] .sf-footer{background:var(--sf-soft);}
body[data-scheme] .sf-footer-name,body[data-scheme] .sf-footer-col h2{color:var(--sf-dark);}
body[data-scheme] .sf-crumbs a{color:var(--promo-accent);}

/* =====================================================================
   Promotions landing page on desktop (2026-10-26) - same page width as
   the storefront (1180px) instead of a ~460-780px phone column: header
   aligned to it, banner as a contained rounded card, offer text wider,
   products 4 per row (list-style designs 2 per row). Phones unchanged.
   body:not(storefront/unavailable) keeps this off the storefront page.
   ===================================================================== */
@media (min-width:960px){
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]){--promo-content-max:1180px;}
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-topbar{
    padding-left:max(24px, calc((100% - 1180px) / 2 + 16px));
    padding-right:max(24px, calc((100% - 1180px) / 2 + 16px));
  }
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-banner{
    box-sizing:border-box;width:calc(100% - 32px);max-width:1148px;margin:24px auto 0;
    border-radius:var(--promo-radius, 14px);overflow:hidden;border-bottom:none;
  }
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-banner img{max-height:440px;height:auto;}
  /* text lines up with the banner's left edge (centered designs stay centered) */
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-hero-content{box-sizing:border-box;max-width:1180px;padding:32px 16px;}
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-desc{max-width:760px;}
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-title{font-size:38px;line-height:1.15;}
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-details,
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-trust-strip{max-width:1148px;}
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-product-grid{
    max-width:1180px;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px;
  }
  /* list-style designs: two columns of rows */
  body:not([data-design^="storefront-"])[data-design="minimal"] .promo-product-grid,
  body:not([data-design^="storefront-"])[data-design="compact"] .promo-product-grid{grid-template-columns:repeat(2,1fr);gap:0 28px;}
  body:not([data-design^="storefront-"])[data-design="feed"] .promo-product-grid{grid-template-columns:repeat(3,1fr);gap:18px;}
  body:not([data-design^="storefront-"]):not([data-design="unavailable"]) .promo-cart-bar{
    padding-left:max(24px, calc((100% - 1180px) / 2 + 16px));
    padding-right:max(24px, calc((100% - 1180px) / 2 + 16px));
  }
}

/* =====================================================================
   Storefront product quick view + options (2026-10-26, storefront.js).
   Click a product photo/name - or "Choose size" on a product with
   options (Size / Colour ...) - to see photos, details and pick one.
   ===================================================================== */
[data-sf-view]{cursor:pointer;}
.sf-card-opts{font-size:11.5px;color:var(--promo-text-muted);margin-top:-2px;}
body.sf-qv-open{overflow:hidden;}
.sf-qv{position:fixed;inset:0;z-index:2147483100;display:flex;align-items:flex-end;justify-content:center;}
.sf-qv-backdrop{position:absolute;inset:0;background:rgba(10,14,20,.5);}
.sf-qv.is-new .sf-qv-backdrop{animation:sfQvFade .15s ease;}
.sf-qv.is-new .sf-qv-card{animation:sfQvUp .18s ease;}
.sf-qv-card{
  position:relative;box-sizing:border-box;width:100%;max-height:92vh;overflow:auto;background:var(--promo-surface, #fff);color:var(--promo-text);
  border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.2);
}
@keyframes sfQvFade{from{opacity:0}to{opacity:1}}
@keyframes sfQvUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sf-qv-x{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:22px;line-height:1;cursor:pointer;color:#222;}
.sf-qv-media{position:relative;aspect-ratio:4/3;background:#fff;overflow:hidden;}
.sf-qv-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;}
.sf-qv-media .sf-ph{position:absolute;inset:0;}
.sf-qv-thumbs{position:absolute;left:10px;bottom:10px;right:10px;display:flex;gap:6px;overflow-x:auto;}
.sf-qv-thumbs button{flex:0 0 46px;height:46px;padding:0;border-radius:8px;border:2px solid transparent;background:#fff;overflow:hidden;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.sf-qv-thumbs button.on{border-color:var(--promo-accent);}
.sf-qv-thumbs img{width:100%;height:100%;object-fit:cover;}
.sf-qv-body{padding:16px 18px 22px;}
.sf-qv-name{font-size:20px;line-height:1.3;margin:0;color:var(--sf-dark, var(--promo-text));}
.sf-qv-price{font-size:20px;font-weight:800;color:var(--promo-accent);margin-top:6px;}
.sf-qv-opt{margin-top:16px;}
.sf-qv-opt-name{font-size:13px;font-weight:700;margin-bottom:8px;}
.sf-qv-opt-name span{font-weight:500;color:var(--promo-text-muted);}
.sf-qv-vals{display:flex;flex-wrap:wrap;gap:8px;}
.sf-qv-val{
  min-width:46px;padding:9px 14px;border-radius:10px;border:1.5px solid var(--promo-border, #dfe3e8);background:var(--promo-surface, #fff);
  color:var(--promo-text);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .12s,background .12s;
}
.sf-qv-val:hover{border-color:var(--promo-accent);}
.sf-qv-val.on{background:var(--promo-accent);border-color:var(--promo-accent);color:#fff;}
.sf-qv-val.na{color:var(--promo-text-muted);text-decoration:line-through;border-style:dashed;opacity:.75;}
.sf-qv-msg{min-height:18px;margin-top:10px;font-size:13px;color:#b42318;font-weight:600;}
.sf-qv-buy{display:flex;gap:10px;align-items:center;margin-top:6px;}
.sf-qv-qty{display:inline-flex;align-items:center;border:1.5px solid var(--promo-border, #dfe3e8);border-radius:999px;height:46px;}
.sf-qv-qty button{width:40px;height:100%;border:none;background:none;font-size:20px;cursor:pointer;color:var(--promo-text);}
.sf-qv-qty span{min-width:24px;text-align:center;font-weight:800;}
.sf-qv-add{flex:1;min-height:48px;}
.sf-qv-add[disabled]{opacity:.5;cursor:not-allowed;transform:none;}
.sf-qv-desc{margin-top:18px;font-size:14.5px;line-height:1.65;color:var(--promo-text);}
.sf-qv-details{width:100%;margin-top:16px;border-collapse:collapse;font-size:13.5px;}
.sf-qv-details th,.sf-qv-details td{text-align:left;padding:8px 6px;border-top:1px solid var(--promo-border, #e6e9ee);vertical-align:top;}
.sf-qv-details th{width:40%;color:var(--promo-text-muted);font-weight:600;}
[data-design="storefront-boutique"] .sf-qv-val,[data-design="storefront-boutique"] .sf-qv-qty{border-radius:2px;}
@media (min-width:760px){
  .sf-qv{align-items:center;padding:24px;}
  .sf-qv-card{max-width:940px;border-radius:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-height:86vh;}
  .sf-qv.is-new .sf-qv-card{animation:sfQvFade .15s ease;}
  .sf-qv-media{aspect-ratio:auto;min-height:440px;}
  .sf-qv-body{padding:28px 28px 26px;overflow:auto;}
  .sf-qv-name{font-size:24px;padding-right:30px;}
}

/* Catalog (promotion) page: option picker for products with variants */
.promo-variant-select{
  width:100%;box-sizing:border-box;margin:8px 0 2px;padding:9px 10px;border-radius:calc(var(--promo-radius, 12px) * .6);
  border:1.5px solid var(--promo-border, #dfe3e8);background:var(--promo-surface, #fff);color:var(--promo-text);font:inherit;font-size:13.5px;font-weight:600;
}
.promo-variant-select:focus{outline:none;border-color:var(--promo-accent);}
.promo-variant-msg{font-size:12px;color:#b42318;font-weight:600;margin-top:2px;}

/* =====================================================================
   Storefront checkout header + product detail page (2026-10-26).
   ===================================================================== */
a.sf-card-media,a.sf-card-name{display:block;color:inherit;text-decoration:none;}
a.sf-card-name:hover{color:var(--promo-accent);}
.sf-checkout-bar{position:sticky;top:var(--sf-topbar-h, 61px);z-index:14;background:var(--sf-dark, #10302a);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);}
.sf-checkout-bar[hidden]{display:none;}
.sf-checkout-bar.pop .sf-cb-inner{animation:sfCbPop .32s ease;}
@keyframes sfCbPop{0%{transform:translateY(-6px);opacity:.4}100%{transform:none;opacity:1}}
.sf-cb-inner{box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:10px;}
.sf-cb-ic{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.sf-cb-ic svg{width:19px;height:19px;}
.sf-cb-text{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-cb-text strong{font-weight:800;}
.sf-cb-view,.sf-cb-go{border:none;border-radius:999px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;padding:9px 16px;white-space:nowrap;}
.sf-cb-view{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);}
.sf-cb-go{background:var(--promo-accent);color:#fff;}
[data-scheme] .sf-cb-go,body:not([data-scheme]) .sf-cb-go{filter:saturate(1.05);}
@media (max-width:520px){.sf-cb-view{display:none;}.sf-cb-inner{padding:8px 12px;}}

.sf-pd{box-sizing:border-box;width:calc(100% - 32px);max-width:1148px;margin:18px auto 0;}
.sf-pd-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:6px;}
.sf-pd-main{position:relative;aspect-ratio:1/1;border-radius:var(--promo-radius, 14px);overflow:hidden;background:#fff;border:1px solid var(--promo-border, #e6e9ee);cursor:zoom-in;}
.sf-pd-main .sf-ph{position:absolute;inset:0;}
.sf-pd-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:14px;box-sizing:border-box;transition:transform .12s ease-out;}
.sf-pd-main.zooming img{transition:none;}
.sf-pd-zoom-hint{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(17,24,39,.72);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;pointer-events:none;}
.sf-pd-zoom-hint svg{width:14px;height:14px;}
.sf-pd-main.zooming .sf-pd-zoom-hint{opacity:0;}
.sf-pd-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px;}
.sf-pd-thumbs button{flex:0 0 64px;height:64px;padding:0;border-radius:10px;border:2px solid var(--promo-border, #e6e9ee);background:#fff;overflow:hidden;cursor:pointer;}
.sf-pd-thumbs button.on{border-color:var(--promo-accent);}
.sf-pd-thumbs img{width:100%;height:100%;object-fit:cover;}
.sf-pd-cat{font-size:12.5px;font-weight:700;color:var(--promo-accent);text-transform:uppercase;letter-spacing:.05em;}
.sf-pd-name{font-size:24px;line-height:1.25;margin:6px 0 0;color:var(--sf-dark, var(--promo-text));}
[data-design="storefront-boutique"] .sf-pd-name{font-family:'Playfair Display', Georgia, serif;font-weight:600;}
.sf-pd-price{font-size:24px;font-weight:800;color:var(--promo-accent);margin-top:10px;}
.sf-pd-stock{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;}
.sf-pd-stock.in{background:#e7f6ee;color:#11734a;}
.sf-pd-stock.out{background:#fdecec;color:#b42318;}
.sf-pd-msg{min-height:18px;margin-top:10px;font-size:13.5px;font-weight:600;color:#b42318;}
.sf-pd-msg.ok{color:#11734a;}
.sf-pd-buy{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px;}
.sf-pd-add,.sf-pd-now{flex:1 1 150px;min-height:48px;}
.sf-pd-add.done{background:#11734a;}
.sf-pd-add[disabled],.sf-pd-now[disabled]{opacity:.5;cursor:not-allowed;transform:none;}
.sf-pd-ask{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14px;font-weight:700;color:var(--promo-accent);text-decoration:none;}
.sf-pd-ask svg{width:18px;height:18px;}
.sf-pd-sec{margin-top:22px;}
.sf-pd-sec h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--promo-text-muted);margin:0 0 8px;}
.sf-pd-desc{font-size:15px;line-height:1.7;color:var(--promo-text);}
.sf-pd-related{width:auto;max-width:none;margin:36px 0 0;}
body[data-design^="storefront-"] .sf-pd-related{width:100%;max-width:none;}
.sf-zoomview{position:fixed;inset:0;z-index:2147483200;background:rgba(10,12,16,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.sf-zoomview[hidden]{display:none;}
.sf-zv-stage{width:min(94vw,1100px);height:min(80vh,900px);overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#fff;}
.sf-zv-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .18s ease;}
.sf-zoomview.can-zoom .sf-zv-stage img{cursor:zoom-in;}
.sf-zoomview.zoomed .sf-zv-stage img{cursor:zoom-out;transition:none;}
.sf-zv-hint{color:rgba(255,255,255,.75);font-size:13px;margin-top:12px;min-height:18px;text-align:center;padding:0 16px;}
@media (min-width:860px){
  .sf-pd{margin-top:30px;}
  .sf-pd-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:start;}
  .sf-pd-gallery{position:sticky;top:calc(var(--sf-topbar-h, 61px) + 70px);}
  .sf-pd-name{font-size:32px;}
  .sf-pd-price{font-size:28px;}
}

/* Discounts (2026-10-26): struck regular price + "10% OFF" */
.sf-was{color:var(--promo-text-muted);font-weight:500;font-size:.78em;margin-left:2px;}
.sf-off{display:inline-block;vertical-align:2px;background:#fdecec;color:#b42318;font-size:11px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:6px;margin-left:2px;}
.sf-pd-price .sf-off{font-size:13px;}
.sf-pd-ends{font-size:12.5px;font-weight:600;color:#b42318;margin-top:4px;}
.sf-size-small .sf-card-price .sf-off{display:none;}