/* ============================================================================
   HOME SCENT — PREMIUM PRESENTATION LAYER ON THE PROVEN v1.20 RUNTIME

   Presentation only. This file is the ONLY theme change besides one
   <link> line in layout.jinja. No template, section, schema, component,
   locale file or runtime hook of v1.20 is modified. Every rule below styles
   markup that the unchanged v1.20 templates already emit.

   Homepage blocks are merchant-configured INSTANCES of v1.20's existing
   section types. Where one type serves two roles, the role is selected by a
   setting the merchant already has in the v1.20 Theme Editor, read here
   through the class the template already outputs:

     category_tiles   tinted off -> "worlds" plum plates
                      tinted on  -> "shop by place" light tiles
     product_grid     tinted off -> oils, horizontal merchandising rail
                      tinted on  -> device theatre, deep plum
     editorial_steps  tinted on + steps   -> subscription, plum plane
                      tinted off + steps  -> FAQ
                      tinted off, no steps -> fabric editorial band
     campaign_banner  alignment center -> offers ; start -> business

   Surface system: #FFFFFF canvas, #FAFAFA separation, #F8F8F8 media stage.
   Deep plum only for deliberate high-impact planes. Champagne is decorative
   on dark planes; #7E6A3C is the only champagne used as text on light.
   ============================================================================ */

/* ------------------------------------------------------------------ TOKENS */
:root{
  --p-plum-deep:#1F1526;
  --p-aubergine:#3A1F45;
  --p-plum:#553466;
  --p-mauve:#9C7FB0;
  --p-champagne:#C9B48F;
  --p-champagne-soft:#E9DEC8;
  --p-champagne-ink:#7E6A3C;
  --p-ink:#1E1622;
  --p-text-2:#4F4557;
  --p-soft:#FAFAFA;
  --p-stage:#F8F8F8;
  --p-line:#ECE7EF;
  --p-hair:color-mix(in srgb, var(--p-champagne) 28%, transparent);
  --p-radius:16px;
  --p-radius-lg:22px;
  --p-ease:cubic-bezier(.2,.7,.2,1);

  /* the v1.20 ground tokens carried a warm cream cast; neutralised */
  --c-bg:#FFFFFF;
  --c-tint:#FAFAFA;
  --c-surface-2:#FAFAFA;
  --c-media:#F8F8F8;
}

/* ------------------------------------------------------------------ CANVAS */
html,body{background:#FFFFFF}
body{color:var(--p-ink)}
.section--tint{background:var(--p-soft)}
.section{padding-block:clamp(2.75rem,5.5vw,4.5rem)}
.section__head{margin-block-end:clamp(1.25rem,2.4vw,2rem);align-items:flex-end}
.section__title{
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.25;
  font-weight:600;letter-spacing:-.005em;color:var(--p-ink);text-wrap:balance
}
.section__sub{color:var(--p-text-2);font-size:.95rem;margin-block-start:.4rem;max-inline-size:56ch}
.eyebrow{color:var(--p-champagne-ink);letter-spacing:.14em;font-size:.76rem;font-weight:600}

/* ------------------------------------------------------------------ BUTTONS
   One primary (plum), one quiet secondary (outline). Buttons on dark planes
   switch to champagne fill so the primary action is never lost. */
.btn{border-radius:999px}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--p-plum);--btn-bd:color-mix(in srgb,var(--p-plum) 35%,transparent)}
.btn--ghost:hover{--btn-bd:var(--p-plum);--btn-fg:var(--p-plum)}

/* ------------------------------------------------------------------ HEADER */
.announce{
  background:var(--p-plum-deep);color:rgba(255,255,255,.86);
  font-size:.78rem;padding-block:.45rem;letter-spacing:.02em
}
.header{background:#FFFFFF;border-block-end:1px solid var(--p-line)}
.header__bar{min-height:66px;gap:var(--s-4)}
.brand__name{color:var(--p-ink)}
.brand__tag{color:var(--p-champagne-ink);letter-spacing:.3em}
.nav{gap:clamp(.9rem,1.6vw,1.6rem)}
.nav__link{font-size:.95rem;font-weight:500;color:var(--p-ink)}
.nav__link:hover{color:var(--p-plum)}
.header .iconbtn{color:var(--p-ink)}
/* Six real destinations do not fit beside the actions at 1024, so the desktop
   nav hands over to the burger at the 1080px breakpoint v1.20 already uses
   elsewhere, instead of at 900px. */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* ------------------------------------------------------------ MOBILE DRAWER
   v1.20 inherits a specificity collision: [dir="rtl"] .drawer--start (0,2,1)
   out-specifies .drawer[data-open] (0,2,0), so in Arabic the menu opened its
   scrim but the panel stayed off-canvas. Restated here at 0,3,0. */
.drawer.drawer--start[data-open]{--dx:0}
#hs-mobile-nav.drawer{background:var(--p-plum-deep);color:#fff;box-shadow:0 0 60px rgba(0,0,0,.35)}
#hs-mobile-nav .mnav__head{
  padding:var(--s-4) var(--s-5);border-block-end:1px solid rgba(201,180,143,.22)
}
#hs-mobile-nav .brand__name{color:#fff;font-size:1rem}
#hs-mobile-nav .iconbtn{color:#fff}
#hs-mobile-nav .iconbtn svg{stroke:currentColor}
#hs-mobile-nav .mnav__body{padding:var(--s-2) var(--s-5) var(--s-6)}
#hs-mobile-nav .mnav__body > a,
#hs-mobile-nav .mnav__body summary{
  color:#fff;font-size:1rem;font-weight:500;
  min-block-size:48px;padding-block:.7rem;padding-inline:0;
  border-block-end:1px solid rgba(255,255,255,.08)
}
#hs-mobile-nav .mnav__body > a:hover{color:var(--p-champagne)}
/* Utility tier (cart / account / wishlist). Selected from the cart link rather
   than by position, so a store with the wishlist switched off cannot move the
   separator onto a commercial link. The tier is pinned to the foot of the
   drawer, turning the unused lower area into a deliberate second zone. */
#hs-mobile-nav .mnav__body{flex:1 1 auto;display:flex;flex-direction:column}
#hs-mobile-nav .mnav__body > a[href*="cart"],
#hs-mobile-nav .mnav__body > a[href*="cart"] ~ a{color:rgba(255,255,255,.66);font-size:.92rem;min-block-size:44px}
#hs-mobile-nav .mnav__body > a[href*="cart"]{
  margin-block-start:auto;padding-block-start:var(--s-4);
  border-block-start:1px solid rgba(201,180,143,.22)
}
#hs-mobile-nav.drawer{
  background:
    radial-gradient(90% 38% at 50% 100%, rgba(156,127,176,.22), transparent 70%),
    var(--p-plum-deep)
}
/* On a phone the 92vw panel left a ~31px strip of page that read as an
   accident. The menu takes the full width there; larger screens keep 420px. */
@media (max-width:480px){#hs-mobile-nav.drawer{width:100vw}}

/* -------------------------------------------------------------------- HERO
   Kept cinematic but no longer oversized: it stops well short of the fold
   so the four worlds are visible on first load. */
.hero{background:var(--p-plum-deep)}
.hero__inner{min-height:clamp(420px,58vh,590px);padding-block:var(--s-7)}
.hero__scrim{
  background:
    linear-gradient(to left, rgba(31,21,38,.86) 0%, rgba(31,21,38,.55) 48%, rgba(31,21,38,.18) 100%)
}
[dir="ltr"] .hero__scrim{
  background:
    linear-gradient(to right, rgba(31,21,38,.86) 0%, rgba(31,21,38,.55) 48%, rgba(31,21,38,.18) 100%)
}
.hero__title{font-size:clamp(2.2rem,5.2vw,4.1rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.hero__title em{
  display:block;font-style:normal;font-weight:500;
  color:var(--p-champagne);font-size:.74em;margin-block-start:.12em
}
.hero__text{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.75;color:rgba(255,255,255,.9);max-inline-size:44ch}
.hero__cta .btn--light{--btn-bg:var(--p-champagne);--btn-fg:var(--p-plum-deep);--btn-bd:var(--p-champagne)}
.hero__cta .btn--onmedia{--btn-bd:rgba(255,255,255,.55)}

/* ------------------------------------------------------ WORLDS (tiles, off)
   Four large editorial plates. With no merchant image each world gets its own
   CSS-only light treatment; a merchant image, when added, is shown instead. */
.section:not(.section--tint) .tiles{
  grid-template-columns:repeat(4,1fr);gap:var(--s-4);counter-reset:world
}
/* v1.20 gives .tile an aspect ratio; combined with a min-height it forced each
   tile wider than its column and pushed the page 87px (1440) / 113px (390)
   beyond the viewport. Height is set explicitly instead. */
.tiles .tile{aspect-ratio:auto;min-inline-size:0}
.section:not(.section--tint) .tile{
  counter-increment:world;
  position:relative;isolation:isolate;overflow:hidden;
  min-block-size:clamp(250px,24vw,330px);
  border-radius:var(--p-radius-lg);padding:var(--s-5);
  display:flex;align-items:flex-end;color:#fff;text-decoration:none;
  transition:transform .45s var(--p-ease), box-shadow .45s var(--p-ease)
}
.section:not(.section--tint) .tile:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(31,21,38,.22)}
.section:not(.section--tint) .tile::before{
  content:"0" counter(world);
  position:absolute;inset-block-start:var(--s-5);inset-inline-start:var(--s-5);
  font-size:.74rem;letter-spacing:.3em;color:var(--p-champagne);z-index:1
}
.section:not(.section--tint) .tile h3{font-size:clamp(1.25rem,1.8vw,1.6rem);color:#fff;line-height:1.25}
.section:not(.section--tint) .tile p{color:rgba(255,255,255,.8);font-size:.88rem;margin-block-start:.35rem}
.section:not(.section--tint) .tile:not(:has(img))::after{
  background:linear-gradient(to top, rgba(20,13,25,.55), rgba(20,13,25,0) 60%)
}
.section:not(.section--tint) .tile:not(:has(img)):nth-child(4n+1){
  background:
    radial-gradient(80% 60% at 20% 15%, rgba(201,180,143,.40), transparent 62%),
    linear-gradient(160deg, var(--p-aubergine), var(--p-plum-deep) 78%)
}
.section:not(.section--tint) .tile:not(:has(img)):nth-child(4n+2){
  background:
    linear-gradient(115deg, rgba(255,255,255,.08) 0 34%, transparent 34%),
    linear-gradient(160deg, #3A343F, var(--p-plum-deep) 80%)
}
.section:not(.section--tint) .tile:not(:has(img)):nth-child(4n+3){
  background:
    radial-gradient(90% 110% at 85% 8%, rgba(255,255,255,.18), transparent 58%),
    linear-gradient(200deg, #5A3C68, var(--p-aubergine) 62%, var(--p-plum-deep))
}
.section:not(.section--tint) .tile:not(:has(img)):nth-child(4n+4){
  background:
    linear-gradient(to left, rgba(201,180,143,.18), transparent 46%),
    linear-gradient(100deg, var(--p-plum-deep), #2A1F33 60%, #2B2630)
}

/* ------------------------------------------------ SHOP BY PLACE (tiles, on)
   Six quiet destination tiles on the neutral band: typography and a champagne
   hairline carry them, not a tinted fill. */
.section--tint .tiles{grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.section--tint .tile:not(:has(img)){
  position:relative;min-block-size:118px;
  border-radius:var(--p-radius);padding:var(--s-5);
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#FFFFFF;border:1px solid var(--p-hair);
  color:var(--p-ink);text-decoration:none;
  transition:border-color .35s var(--p-ease), transform .35s var(--p-ease), box-shadow .35s var(--p-ease)
}
.section--tint .tile:not(:has(img))::after{display:none}
.section--tint .tile:not(:has(img)) h3{color:var(--p-ink);font-size:1.12rem;position:relative;padding-block-end:.45rem}
.section--tint .tile:not(:has(img)) h3::after{
  content:"";position:absolute;inset-inline-start:0;inset-block-end:0;
  inline-size:24px;block-size:2px;background:var(--p-champagne);transition:inline-size .35s var(--p-ease)
}
.section--tint .tile:not(:has(img)):hover{border-color:var(--p-plum);transform:translateY(-2px);box-shadow:0 12px 30px rgba(31,21,38,.08)}
.section--tint .tile:not(:has(img)):hover h3::after{inline-size:56px}
.section--tint .tile:not(:has(img)) p{color:var(--p-text-2);font-size:.86rem;margin-block-start:.3rem}

/* ------------------------------------------------------------ CAMPAIGNS */
.campaign__frame{border-radius:var(--p-radius-lg);min-block-size:clamp(260px,30vw,400px);background:var(--p-plum-deep)}
.campaign__frame::after{
  background:linear-gradient(to top, rgba(31,21,38,.88), rgba(31,21,38,.28) 70%)
}
.campaign__body h2{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.2;text-wrap:balance}
.campaign__body .eyebrow{color:var(--p-champagne)}
.campaign__text{color:rgba(255,255,255,.88);line-height:1.75}
.campaign .btn--light{--btn-bg:var(--p-champagne);--btn-fg:var(--p-plum-deep);--btn-bd:var(--p-champagne)}
.campaign__body--center{align-self:center}

/* --------------------------------------------------------- PRODUCT CARDS
   A generous square media stage and a compact body: image, name, short
   classification, sizes, current price, compare-at. No rating, no count. */
.card{border:0;background:transparent;box-shadow:none;border-radius:0}
.card:hover{box-shadow:none;transform:none;border-color:transparent}
.card__media{
  aspect-ratio:1;background:var(--p-stage);
  border-radius:var(--p-radius);border:1px solid color-mix(in srgb,var(--p-champagne) 20%,transparent);
  transition:border-color .3s var(--p-ease)
}
.card:hover .card__media{border-color:color-mix(in srgb,var(--p-plum) 30%,transparent)}
.card__media img{object-fit:contain;padding:8%}
.card:hover .card__media img{transform:scale(1.035)}
.card__badges{inset-block-start:.6rem;inset-inline-start:.6rem}
.card .badge--sale{
  background:var(--p-plum-deep);color:#fff;box-shadow:none;
  border-radius:999px;font-size:.7rem;padding:.22rem .6rem
}
.card__body{padding:var(--s-3) 2px 0;gap:.3rem}
.card__name{font-size:1rem;line-height:1.4;font-weight:600}
.card__name a{color:var(--p-ink)}
.card__note{
  font-size:.82rem;line-height:1.6;color:var(--p-text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card .swatches{margin-block-start:.2rem}
.card .swatch{font-size:.68rem;min-height:22px;border-color:var(--p-line);color:var(--p-text-2);background:#fff}
.card__foot{padding-block-start:var(--s-2);gap:.45rem}
.card__foot .price{font-size:1.02rem;color:var(--p-ink);font-variant-numeric:tabular-nums}
.card__foot .price--was{font-size:.8rem;opacity:.75}
/* on touch screens there is no hover, so quick-add stays reachable */
@media (hover:none){
  .card__quick{transform:none;opacity:1}
  .card__wish{opacity:1;transform:none}
}

/* ----------------------------------- OILS RAIL (product_grid, tinted off)
   A horizontal merchandising rail with scroll snap. Overflow is contained in
   the rail, and the trailing edge fades so the next card reads as "more",
   never as text cut by the viewport. */
.section:not(.section--tint) > .wrap > .grid:has(.card){
  grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * var(--s-4)) / 4.25);
  gap:var(--s-4);overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:inline mandatory;scrollbar-width:thin;
  padding-block-end:var(--s-3);max-inline-size:100%;min-inline-size:0;
  -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 4rem), transparent);
          mask-image:linear-gradient(to left, #000 calc(100% - 4rem), transparent)
}
[dir="ltr"] .section:not(.section--tint) > .wrap > .grid:has(.card){
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 4rem), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 4rem), transparent)
}
.section:not(.section--tint) > .wrap > .grid:has(.card) > *{scroll-snap-align:start;min-inline-size:0}

/* --------------------------------- DEVICE THEATRE (product_grid, tinted on) */
.section--tint:has(> .wrap > .grid .card){
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(156,127,176,.18), transparent 60%),
    linear-gradient(170deg, #2B2630 0%, var(--p-plum-deep) 80%)
}
.section--tint:has(> .wrap > .grid .card) .section__title{color:#fff}
.section--tint:has(> .wrap > .grid .card) .eyebrow{color:var(--p-champagne)}
.section--tint:has(> .wrap > .grid .card) .section__sub{color:rgba(255,255,255,.72)}
.section--tint:has(> .wrap > .grid .card) .btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4)}
.section--tint:has(> .wrap > .grid .card) .grid{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.section--tint:has(> .wrap > .grid .card) .card__media{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.08)
}
.section--tint:has(> .wrap > .grid .card) .card__name a{color:#fff}
.section--tint:has(> .wrap > .grid .card) .card__note{color:rgba(255,255,255,.66)}
.section--tint:has(> .wrap > .grid .card) .price{color:#fff}
.section--tint:has(> .wrap > .grid .card) .price--was{color:rgba(255,255,255,.62)}
.section--tint:has(> .wrap > .grid .card) .swatch{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.22)}
.section--tint:has(> .wrap > .grid .card) .badge--sale{background:var(--p-champagne);color:var(--p-plum-deep)}

/* --------------------------------------------- SCENT DISCOVERY (finder)
   v1.20 shipped a near-black block. Recast as a light, compact instrument so
   the homepage never stacks two dark planes. */
.finder{
  background:var(--p-soft);color:var(--p-ink);
  border:1px solid var(--p-line);border-radius:var(--p-radius-lg);
  padding:clamp(1.5rem,3.4vw,2.75rem)
}
.finder::before{background:radial-gradient(circle, rgba(156,127,176,.22), transparent 68%)}
.finder h2{color:var(--p-ink);font-size:clamp(1.45rem,2.3vw,2rem);line-height:1.25}
.finder p{color:var(--p-text-2);font-size:.95rem;line-height:1.75}
/* the template sets this eyebrow colour inline (lilac, ~2.6:1 on a light
   ground); !important is the only way to reach an inline style */
.finder .eyebrow{color:var(--p-champagne-ink)!important}
.finder .btn--light{--btn-bg:var(--p-plum);--btn-fg:#fff;--btn-bd:var(--p-plum)}
.finder__steps{gap:var(--s-3)}
.fstep{background:#FFFFFF;border:1px solid var(--p-line);border-radius:var(--p-radius);padding:var(--s-4)}
.fstep__n{background:var(--p-plum);color:#fff}
.fstep b{color:var(--p-ink);font-size:.98rem}
.fstep__copy span{color:var(--p-text-2);font-size:.86rem}

/* ------------------------------------------------ EDITORIAL STEPS: common
   With no image, v1.20's split layout left an empty second column. */
.split:not(.split--cart):not(:has(> img)){grid-template-columns:1fr}
/* The cart also renders `.wrap.section > .split--cart`; every editorial-steps
   rule below is scoped away from it so the cart keeps its own layout. */
/* PDP buy row: the button label must not break mid-phrase, but a no-wrap
   button widened the row's min-content past the mobile column and pushed the
   whole PDP 16-48px off-screen. The row wraps instead, and grid children may
   shrink below their content. */
.pdp > *{min-inline-size:0}
.qtyrow{flex-wrap:wrap}
.qtyrow .btn{flex:1 1 11rem;min-inline-size:0}

/* SUBSCRIPTION (editorial_steps, tinted on, with steps): the plum plane */
.section--tint:has(> .split .steps){
  background:
    radial-gradient(60% 80% at 90% 10%, rgba(201,180,143,.16), transparent 60%),
    linear-gradient(165deg, var(--p-aubergine) 0%, var(--p-plum-deep) 78%)
}
.section--tint:has(> .split .steps) .eyebrow{color:var(--p-champagne)}
.section--tint:has(> .split .steps) .section__title{
  color:#fff;font-size:clamp(1.7rem,3.2vw,2.7rem);max-inline-size:22ch
}
.section--tint:has(> .split .steps) .steps{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.section--tint:has(> .split .steps) .steps li::before{border-color:var(--p-champagne);color:var(--p-champagne)}
.section--tint:has(> .split .steps) .steps b{color:#fff;font-size:1rem}
.section--tint:has(> .split .steps) .steps p{color:rgba(255,255,255,.76)}
.section--tint:has(> .split .steps) .btn--ghost{--btn-bg:var(--p-champagne);--btn-fg:var(--p-plum-deep);--btn-bd:var(--p-champagne)}

/* FAQ (editorial_steps, tinted off, with steps): a clean question list */
.section:not(.section--tint):has(> .split .steps) .steps{grid-template-columns:1fr 1fr;gap:0 var(--s-6)}
.section:not(.section--tint):has(> .split .steps) .steps li{
  padding-block:var(--s-4);border-block-end:1px solid var(--p-line)
}
.section:not(.section--tint):has(> .split .steps) .steps li::before{
  border-color:var(--p-hair);color:var(--p-champagne-ink);width:30px;height:30px;font-size:.8rem
}
.section:not(.section--tint):has(> .split .steps) .steps b{color:var(--p-ink);font-size:1rem}
.section:not(.section--tint):has(> .split .steps) .steps p{color:var(--p-text-2);line-height:1.75}

/* FABRIC (editorial_steps, tinted off, NO steps): an editorial band */
.section:not(.section--tint):has(> .split:not(.split--cart)):not(:has(.steps)) > .split:not(.split--cart){
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--p-radius-lg);padding:clamp(1.75rem,4vw,3.25rem);
  background:
    radial-gradient(60% 90% at 88% 20%, rgba(156,127,176,.20), transparent 62%),
    linear-gradient(180deg, #F7F3FA 0%, #FFFFFF 100%);
  border:1px solid var(--p-line)
}
.section:not(.section--tint):has(> .split:not(.split--cart)):not(:has(.steps)) > .split:not(.split--cart)::after{
  content:"";position:absolute;z-index:-1;
  inset-block:-30%;inset-inline-end:-8%;inline-size:46%;
  background:repeating-radial-gradient(circle at 60% 50%, rgba(85,52,102,.06) 0 1px, transparent 1px 22px)
}
.section:not(.section--tint):has(> .split:not(.split--cart)):not(:has(.steps)) .section__title{
  font-size:clamp(1.6rem,3vw,2.4rem);max-inline-size:18ch
}
.section:not(.section--tint):has(> .split:not(.split--cart)):not(:has(.steps)) .btn--ghost{
  --btn-bg:var(--p-plum);--btn-fg:#fff;--btn-bd:var(--p-plum)
}

/* ------------------------------------------------------------ VALUE STRIP */
.valuestrip{background:#FFFFFF;border-block:1px solid var(--p-line)}
.valuestrip ul{padding-block:clamp(1.5rem,3vw,2.25rem)}
.valuestrip svg{stroke:var(--p-plum);width:24px;height:24px}
.valuestrip b{color:var(--p-ink);font-size:.95rem}
.valuestrip span{color:var(--p-text-2)}

/* ---------------------------------------------------------------- FOOTER */
.footer{
  margin-block-start:0;
  background:
    radial-gradient(60% 70% at 88% 0%, rgba(156,127,176,.14), transparent 62%),
    linear-gradient(180deg, var(--p-plum-deep) 0%, #150E1A 100%)
}
.footer h4{color:var(--p-champagne);letter-spacing:.2em;font-size:.76rem}
.footer a{color:rgba(255,255,255,.76)}
.footer a:hover{color:#fff}
/* Phone and email are Latin runs inside Arabic columns. Isolated and set LTR
   so the space-separated digit groups can never reorder, then aligned back to
   the column edge. */
.footer a[href^="https://wa.me"],
.footer a[href^="tel:"],
.footer a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
[dir="rtl"] .footer a[href^="https://wa.me"],
[dir="rtl"] .footer a[href^="tel:"],
[dir="rtl"] .footer a[href^="mailto:"]{text-align:right}
.footer__bottom{border-block-start-color:rgba(255,255,255,.1);color:rgba(255,255,255,.55)}

/* -------------------------------------------------------------------- PDP */
.gallery__main{background:var(--p-stage);border-radius:var(--p-radius-lg);border:1px solid var(--p-line)}
.gallery__main img{object-fit:contain}
.gallery__thumbs button{background:var(--p-stage);border-radius:12px}
.pdp__title{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.2;color:var(--p-ink);text-wrap:balance}
.pdp__price .price{color:var(--p-ink);font-variant-numeric:tabular-nums}
.pdp__price .price--was{opacity:.7}
.buybox{border-color:var(--p-line);border-radius:var(--p-radius-lg)}
.buybox .btn--lg{--btn-bg:var(--p-plum);--btn-fg:#fff;--btn-bd:var(--p-plum)}
.note{background:var(--p-soft);border:1px solid var(--p-line)}
.crumbs{color:var(--p-text-2)}

/* --------------------------------------------------------------- CATEGORY */
.plp__head{padding-block:var(--s-5) var(--s-5);border-block-end:1px solid var(--p-line);margin-block-end:var(--s-5)}
.plp__title{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--p-ink)}
.plp__intro{color:var(--p-text-2);line-height:1.75}
.plp__bar{border-block-end-color:var(--p-line)}
.facets details,.facets fieldset{border:0;border-block-end:1px solid var(--p-line);border-radius:0}

/* ------------------------------------------------------------------- CART */
.cart__summary{border-color:var(--p-line)}
.cart__summary .btn--lg,.split--cart .btn--lg{--btn-bg:var(--p-plum);--btn-fg:#fff;--btn-bd:var(--p-plum)}
.line img{object-fit:contain;background:var(--p-stage);border:1px solid var(--p-line)}

/* ------------------------------------------------------------- TYPOGRAPHY
   Arabic needs more leading than Latin; prices keep their digit order. */
[dir="rtl"] body{line-height:1.75}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.3}
.price,.price--was,.tabular{unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------ PRICE AS ONE UNIT
   The amount and the currency never separate ("299.00 | ر.س" was wrapping on
   phones). Rows that hold prices wrap between items instead. */
.price,.price--was{white-space:nowrap}
.line__actions{flex-wrap:wrap;row-gap:.35rem}

/* ------------------------------------------------------ LIGHT MEDIA STAGES
   Multiply lets a photo's own white backdrop melt into the #F8F8F8 stage
   instead of reading as a pasted rectangle. Nothing is cropped. The card link
   carries the stage colour because it forms its own stacking context, and the
   dark device stage is excluded because multiply would darken it. */
.card__medialink{background:var(--p-stage)}
.card__media img,.gallery__main img,.gallery__thumbs img{mix-blend-mode:multiply}
.section--tint:has(> .wrap > .grid .card) .card__medialink{background:transparent}
.section--tint:has(> .wrap > .grid .card) .card__media img{mix-blend-mode:normal}

/* --------------------------------------------------- QUICK ADD ON TOUCH
   Where quick-add is always shown (phones, and any hover-less device) it was a
   full-width bar across the bottom of the image and covered the bottle. It
   becomes a compact pill in the lower corner, and the stage keeps a clear band
   for it, so the bottle is never under the control. */
@media (max-width:680px),(hover:none){
  .card__media{aspect-ratio:5/6}
  .card__media img{padding:7% 8% 52px}
  .card__quick{
    inset-inline:auto;inset-inline-end:8px;inset-block-end:8px;
    padding:0;background:none;transform:none;opacity:1
  }
  .card__quick .btn{inline-size:auto;min-height:36px;padding-inline:.9rem;font-size:.74rem}
}

/* ============================================================== TABLET */
@media (max-width:1080px){
  .section:not(.section--tint) .tiles{grid-template-columns:repeat(2,1fr)}
  .section:not(.section--tint) > .wrap > .grid:has(.card){grid-auto-columns:calc((100% - 2 * var(--s-4)) / 3.2)}
  .section--tint:has(> .wrap > .grid .card) .grid{grid-template-columns:repeat(2,1fr)}
  .section--tint:has(> .split .steps) .steps{grid-template-columns:1fr}
}

/* ============================================================== MOBILE */
@media (max-width:680px){
  .section{padding-block:2.25rem}
  .section__head{flex-wrap:wrap;gap:var(--s-3)}
  .header__bar{min-height:56px;gap:var(--s-2)}
  .brand__name{font-size:1rem}
  .announce{font-size:.72rem;padding-block:.35rem}

  .hero__inner{min-height:clamp(380px,60svh,470px);padding-block:var(--s-6)}
  .hero__title{font-size:clamp(1.9rem,8vw,2.4rem)}
  .hero__text{font-size:.96rem}
  .hero__cta{display:grid;gap:.6rem;inline-size:100%}
  .hero__cta .btn{inline-size:100%}

  .section:not(.section--tint) .tiles{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .section:not(.section--tint) .tile{min-block-size:170px;padding:var(--s-4)}
  .section:not(.section--tint) .tile::before{inset-block-start:var(--s-4);inset-inline-start:var(--s-4)}
  .section:not(.section--tint) .tile h3{font-size:1.08rem}
  .section:not(.section--tint) .tile p{font-size:.78rem}
  .section--tint .tiles{grid-template-columns:1fr 1fr}
  .section--tint .tile:not(:has(img)){min-block-size:96px;padding:var(--s-4)}

  .campaign__frame{min-block-size:280px}

  /* two cards per view; the trailing sliver dissolves under the mask */
  .section:not(.section--tint) > .wrap > .grid:has(.card){
    grid-auto-columns:calc((100% - var(--s-3)) / 2 - .9rem);gap:var(--s-3);
    -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
            mask-image:linear-gradient(to left, #000 calc(100% - 2.5rem), transparent)
  }
  [dir="ltr"] .section:not(.section--tint) > .wrap > .grid:has(.card){
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 2.5rem), transparent)
  }
  .section--tint:has(> .wrap > .grid .card) .grid{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .grid--3,.grid--4{grid-template-columns:1fr 1fr;gap:var(--s-3)}

  .finder__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .section:not(.section--tint):has(> .split .steps) .steps{grid-template-columns:1fr}

  .valuestrip ul{grid-template-columns:1fr 1fr;gap:var(--s-4)}

  /* PDP: the image must not take the whole first screen */
  .gallery{position:static}
  /* A square stage exactly as tall as the 40% cap and centred, instead of a
     full-width box capped in height, which left dead space either side. */
  .gallery__main{aspect-ratio:1;inline-size:min(100%,40svh);max-block-size:40svh;margin-inline:auto}
  .gallery__main img{padding:4%}
  .pdp__title{font-size:1.6rem}
  .buybox{padding:var(--s-4);margin-block:var(--s-3)}

  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
  /* the contact column gets the full row so the email never breaks mid-word */
  .footer__grid > div:last-child{grid-column:1 / -1}
}

@media (max-width:380px){
  .hero__title{font-size:1.8rem}
  .section:not(.section--tint) .tile h3{font-size:1rem}
}

/* ======================================================= REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .section:not(.section--tint) .tile,
  .section--tint .tile,
  .card__media img{transition:none}
  .section:not(.section--tint) .tile:hover,
  .card:hover .card__media img{transform:none}
}

/* ---------------------------------------------------- TEXT-FIRST CAMPAIGN
   campaign_banner now renders without an image. The text-first variant sits
   on the brand plane at a calmer height; the photo scrim is not needed. */
.campaign__frame--text{
  min-block-size:clamp(210px,22vw,300px);
  background:
    radial-gradient(70% 90% at 88% 10%, rgba(201,180,143,.22), transparent 60%),
    linear-gradient(160deg, var(--p-aubergine), var(--p-plum-deep) 78%)
}
.campaign__frame--text::after{display:none}
.campaign__frame--text .campaign__body{align-self:center}

/* ------------------------------------------------------------ PRICE FILTER
   Removed at the owner's request. Zid's delegated filter template always
   renders a price group; templates/category.jinja marks it and it is hidden
   here, not deleted, so the platform's form script keeps working. With no
   other filter control left, the rail and the mobile Filter button go and the
   product grid takes the full width - four columns on wide screens. */
#hs-facets .hs-price-filter{display:none!important}
.plp.plp--nofacets{grid-template-columns:minmax(0,1fr)}
.plp--nofacets > .facets,.plp--nofacets .filterbtn{display:none!important}
@media (min-width:1100px){.plp--nofacets .grid--3{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Options that Zid's filter template renders inside the rail get the theme's
   24px checkbox (the .fopt treatment): a comfortable, AA-sized tap target. */
#hs-facets .filter-row{align-items:center;gap:var(--s-3);padding-block:7px;min-height:var(--tap-min);cursor:pointer;font-size:var(--fs-sm);color:var(--c-text-2)}
#hs-facets input[type="checkbox"],#hs-facets input[type="radio"]{
  appearance:none;width:24px;height:24px;flex:0 0 auto;border:1.5px solid var(--c-border-strong);
  border-radius:4px;background:var(--c-surface);display:grid;place-content:center;cursor:pointer;margin:0
}
#hs-facets input[type="radio"]{border-radius:50%}
#hs-facets input[type="checkbox"]:checked,#hs-facets input[type="radio"]:checked{background:var(--c-brand);border-color:var(--c-brand)}
#hs-facets input[type="checkbox"]:checked::after{content:"";width:11px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}
#hs-facets input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}