/* ===========================================================================
   Decantography — unified header + search surface   (global, all widths)
   ---------------------------------------------------------------------------
   Adds a compact, theme-aware Search button and Account button to the header,
   a clean slide-down search surface that REUSES the existing #q / runSearch
   logic, and merges the old three-dot panel into the hamburger menu (its tabs
   are reached from the menu via the existing [data-info] handler).

   Progressive enhancement: the "removal" rules are gated behind
   body.dg-ui-ready (added by ui-overhaul.js) so that if the script never runs
   the original three-dot menu and the in-page search keep working.

   Cross-platform: -webkit- prefixes for Safari/iOS, hover gated to
   (hover:hover) so touch devices never stick, dvh with vh fallback, safe-area
   insets, no browser-storage APIs. Nothing here changes product/business logic.
   =========================================================================== */

/* 1 — merge the duplicate three-dot trigger into the hamburger -------------- */
body.dg-ui-ready #dotsBtn{ display:none !important; }

/* 2 — new circular header controls (consistent with the existing icon btns) - */
.dg-hdr-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-width:40px; min-height:40px; padding:0; margin:0;
  border:var(--line); border-radius:50%;
  background:transparent; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.dg-hdr-btn svg{ width:19px; height:19px; display:block; pointer-events:none; }
.dg-hdr-btn:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
.dg-hdr-btn[hidden]{ display:none !important; }
@media (hover:hover){
  .dg-hdr-btn:hover{ border-color:var(--gold); color:var(--gold-deep); background:var(--sand-deep); }
}
@media (prefers-reduced-motion:reduce){ .dg-hdr-btn{ transition:none; } }
.dg-hdr-btn:active{ transform:scale(.94); }

/* never let the control cluster overflow or wrap the bar */
.hdr-in{ min-width:0; }

/* 3 — the search surface ---------------------------------------------------- */
.dg-search-wrap{ position:fixed; left:0; right:0; top:0; z-index:1400; display:none; }
.dg-search-wrap.on{ display:block; }
.dg-search-scrim{
  position:fixed; inset:0; z-index:0; border:0;
  background:rgba(12,9,6,.38);
  -webkit-backdrop-filter:saturate(1.08) blur(2px); backdrop-filter:saturate(1.08) blur(2px);
}
.dg-search-panel{
  position:relative; z-index:1;
  background:var(--paper); color:var(--ink); border-bottom:var(--line);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.6);
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px 16px;
  transform:translateY(-10px); opacity:0;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.dg-search-wrap.on .dg-search-panel{ transform:none; opacity:1; }
.dg-search-row{ display:flex; align-items:center; gap:10px; max-width:720px; margin:0 auto; }
.dg-search-row .field.search,
.dg-search-row #searchBar{ flex:1 1 auto; min-width:0; margin:0; }
.dg-search-row .field.search label{ font-size:.76rem; }
.dg-search-close{
  -webkit-appearance:none; appearance:none; cursor:pointer; flex:0 0 auto;
  width:42px; height:42px; min-width:42px; align-self:flex-end;
  border:var(--line); border-radius:12px; background:transparent; color:var(--ink);
  font-size:22px; line-height:1; -webkit-tap-highlight-color:transparent;
}
.dg-search-close:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .dg-search-panel{ transition:none; transform:none; }
}

/* 4 — remove the large in-collection search block (its logic is reused in the
      header surface; the Category + Size filters are intentionally kept). ---- */
body.dg-ui-ready #collection .filters > .field.search{ display:none !important; }

/* 5 — place + size the controls so the bar stays on one tidy line ----------- */
@media (max-width:880px){
  :root .hdr .brand{ order:1; }
  :root .hdr #dgSearchBtn{ order:2; }
  :root .hdr #dgAcctBtn{ order:3; }
  :root .hdr #dgLangBtn{ order:4; }
  :root .hdr #themeBtn{ order:5; }
  :root .hdr #menuBtn{ order:6; }
  :root .hdr .cart-btn{ order:7; }
  :root .hdr .nav{ order:9; }            /* absolute dropdown; order is moot    */
}
@media (max-width:767px){
  .dg-hdr-btn{ width:44px; height:44px; min-width:44px; min-height:44px; }
}
@media (max-width:560px){
  .dg-hdr-btn{ width:38px !important; height:38px !important;
    min-width:38px !important; min-height:38px !important; }
  .dg-hdr-btn svg{ width:17px; height:17px; }
}
@media (max-width:380px){
  .dg-hdr-btn{ width:36px !important; height:36px !important;
    min-width:36px !important; min-height:36px !important; }
}

/* 6 — theme toggle STAYS in the bar (customer preference) and is restyled to
      match the Search / Account circles so the control cluster reads as one
      set:  Logo | Search | Account | Theme | Menu | Cart  at every width. ---- */
body.dg-ui-ready #themeBtn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-width:40px; min-height:40px; padding:0; margin:0;
  border:var(--line); border-radius:50%;
  background:transparent; color:var(--gold-deep);
  -webkit-tap-highlight-color:transparent;
}
body.dg-ui-ready #themeBtn svg{ width:19px; height:19px; }
:root[data-theme="dark"] body.dg-ui-ready #themeBtn{ color:var(--gold); }
@media (hover:hover){
  body.dg-ui-ready #themeBtn:hover{ border-color:var(--gold); color:var(--gold-deep); background:var(--sand-deep); }
}
@media (max-width:767px){
  body.dg-ui-ready #themeBtn{ width:44px; height:44px; min-width:44px; min-height:44px; }
}
@media (max-width:560px){
  body.dg-ui-ready #themeBtn{ width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; }
  body.dg-ui-ready #themeBtn svg{ width:17px; height:17px; }
}
@media (max-width:380px){
  body.dg-ui-ready #themeBtn{ width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; }
}

/* 7 — the EN · বাংলা language switch sits in the bar on desktop but moves INTO
      the menu on phones (≤880) so the top row stays uncluttered; language is a
      set-once preference. JS relocates the existing #dgLangBtn; here we only
      restyle it as a full-width menu row when it lives inside the nav. -------- */
@media (max-width:880px){
  .nav .dg-nav-lang{
    display:flex; align-items:center; gap:.5rem;
    width:100%; text-align:left; cursor:pointer;
    background:none; border:0; border-bottom:var(--line); border-radius:0;
    padding:.75rem 0; margin:0; font-size:1rem;
  }
  .nav .dg-nav-lang:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
}

/* 8 — product card: the perfume NAME must never sit under the thumbnail ------
      Belt-and-suspenders over the mobile-products.css guards. This file loads
      LAST, so these rules win the cascade no matter which earlier block applies.
      • On phones the catalogue is the approved 2-up tile (photo on TOP, text
        BELOW). Re-asserted here with !important so a stale cache or an older
        single-column block can never revert it to a photo-LEFT row where the
        name could tuck behind the bottle (the reported bug).
      • At every other width the card stays a photo-left row: the thumbnail is
        pinned to its own non-shrinking column, the text column takes the rest
        and wraps inside its own box, and the text is given its OWN stacking
        context (z-index) so it can never be painted BEHIND the image even if a
        sticky :hover zoom nudges the thumbnail. Pure layout; no logic touched. */
#collection .card-top > .card-photo,
#collection .card-top > .mono{
  flex:0 0 auto; align-self:flex-start; position:static;
}
#collection .card-top > div{
  flex:1 1 auto; min-width:0; position:relative; z-index:1;
}
@media (max-width:767px){
  #collection .card-top{ display:flex !important; flex-direction:column !important; align-items:stretch; }
  #collection .card-top > .card-photo,
  #collection .card-top > .mono{ width:100% !important; align-self:stretch; }
  #collection .card-top > div{ flex:0 1 auto; }   /* keep the 2-up vertical rhythm (price stays bottom-pinned) */
}

/* 9 — discovery-set "Build a discovery set / Choose any 3" row ---------------
      THIS is the list in the screenshot (.dset-opt), NOT the main grid. On
      phones mobile-layout.css lays the row out as a grid whose first track is
      36px, but dgDsetFix enlarged the bottle thumbnail (.dset-mono) to 56px —
      so the photo overflowed its 36px column and covered the first letters of
      the perfume name. Fix: widen the thumbnail track to the real photo size
      and clear the stale flex-wrap price indent so the row stays photo | name |
      price on one tidy line. Layout only; the picker's logic is untouched. --- */
@media (max-width:767px){
  .dset-opt{
    grid-template-columns:60px minmax(0,1fr) auto !important;
    column-gap:.75rem; align-items:center;
  }
  .dset-mono{ width:56px !important; height:70px !important; }
  .dset-nm{ min-width:0; }
  .dset-pr{ margin-left:0 !important; align-self:center; }
}

/* 10 — product-card ACTIONS on the 2-up phone tile --------------------------
      DIp's final request: show all four sizes as completely round buttons plus
      a compact round "Add" button directly on every catalogue tile, so a
      shopper can pick a size and add straight from the grid without opening the
      detail panel. The 2-up block in mobile-products.css deliberately hides
      .sizes and .card-foot on the tile; this file loads LAST so we re-show just
      those two (the scent drawer, performance meters and spray note stay hidden
      to keep the tile uncrowded) and restyle them. NO JS is added: tapping a
      size still runs the existing select->render handler — which also updates
      the tile's big price to the chosen size — tapping Add still runs addToCart
      with the selected size, and both .size and .add are already excluded from
      the tap-to-open-PDP handler. A size is always pre-selected (sizes[0]), so
      the chosen circle is highlighted and Add always has a valid size. The Add
      label is shortened to "Add" purely in presentation (::after); the real
      button text, data-i and cart logic are untouched, so desktop and the
      detail panel still read "Add to cart". Layout only — nothing business. --- */
@media (max-width:767px){
  /* re-show the size selector + the action row on the tile (price stays pinned
     to the bottom via its existing margin-top:auto, so the price -> sizes ->
     Add group bottom-aligns and tiles keep a shared baseline across a row). */
  #collection .card > .sizes{
    display:grid !important; grid-template-columns:repeat(4,1fr);
    gap:.3rem; margin-top:.45rem; align-items:center; justify-items:stretch;
  }
  #collection .card .card-foot{
    display:flex !important; justify-content:center; align-items:center;
    margin-top:.4rem; padding:0; border:0 !important; flex-wrap:nowrap;
  }

  /* each size = a completely round button. The per-size price <i> is dropped
     here because the big tile price already reflects the chosen size on tap. */
  #collection .card .sizes .size{
    width:100%; max-width:48px; margin-inline:auto; aspect-ratio:1/1;
    min-width:0; min-height:34px; padding:2px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    line-height:1.03; white-space:normal; text-align:center; gap:0;
  }
  #collection .card .sizes .size b{ font-size:clamp(.58rem,2.3vw,.72rem); font-weight:700; }
  #collection .card .sizes .size i{ display:none !important; }
  #collection .card .sizes .size[aria-pressed="true"]{
    background:var(--gold); border-color:var(--gold); color:var(--paper);
  }

  /* the round "Add" pill. The real "Add to cart" text is hidden and re-labelled
     to a compact, CENTRED "Add" (gap:0 + justify-center so it can never sit at
     the left edge or spill out of the pill). Hover is a quiet colour/shadow
     change only — no slide and no lift — per DIp's "small transition, not this
     big" note; the press gives a tiny scale so a tap still feels responsive. */
  /* The label is the button's OWN text, relabelled to "Add" by ui-overhaul.js
     (not a ::after pseudo-element — that fell back to the raw italic serif
     "Add to cart" whenever a late runtime <style> beat the pseudo-element).
     ui-overhaul.js also pins the centering with inline !important so NO stylesheet,
     injected or not, can push the word to the left or make it serif/italic. */
  #collection .card .card-foot .add{
    width:100%; min-height:40px; margin:0 !important; padding:.5rem .6rem;
    border-radius:999px; font-size:.84rem !important; font-weight:700;
    font-style:normal !important; letter-spacing:.01em; line-height:1;
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:0 !important; text-align:center !important;
    font-family:var(--text),-apple-system,"Segoe UI",Roboto,sans-serif !important;
    white-space:nowrap;
    transition:background-color .15s ease, box-shadow .15s ease, opacity .15s ease !important;
  }
  #collection .card .card-foot .add:hover{ transform:none !important; }
  #collection .card .card-foot .add:active{ transform:scale(.97) !important; }
  #collection .card .card-foot .sold-out{ font-size:.8rem; }
}

/* 11 — DESKTOP / TABLET VISUAL PARITY (≥768) --------------------------------
      DIp: make the PC site look like the phone UI so neither feels like it has
      more than the other. We keep the desktop multi-column grid (3–4 tiles per
      row) but dress each card EXACTLY like a phone tile: photo on TOP, then
      house / name / round size buttons / price / a round "Add" pill. The tile
      extras (meters, spray note, notes, pyramid, tags, scent) live in the
      detail panel on click — same as the phone — so the tile stays clean and
      the two experiences read as one product. ui-overhaul.js relabels the real
      button text to "Add" and pins the centring at every width (no ::after).
      Pure presentation; the DOM, data-i, size/add handlers are all untouched.
      ≤767 is handled by mobile-products.css + §10 and is left alone. */
@media (min-width:768px){
  /* photo on top (like the phone tile) — overrides the §8 photo-left row */
  #collection .card-top{ flex-direction:column !important; align-items:stretch !important; gap:.75rem; }
  #collection .card-top > .card-photo,
  #collection .card-top > .mono{
    width:100% !important; height:170px !important; align-self:stretch !important; border-radius:10px;
  }
  #collection .card-top > .mono{ display:grid; place-items:center; font-size:2.1rem; }
  #collection .card-top > div{ display:flex; flex-direction:column; gap:.18rem; min-width:0; }

  /* the same tile-only hide list the phone uses (details are in the PDP) */
  #collection .card .card-meters,
  #collection .card .card-sprays,
  #collection .card .card-notes,
  #collection .card .pyr,
  #collection .card .card-tags,
  #collection .card .dg-scent,
  #collection .card-top .tag{ display:none !important; }

  /* four completely round size buttons, like the phone tile */
  #collection .card .sizes{
    display:grid !important; grid-template-columns:repeat(4,1fr);
    gap:.4rem; margin-top:.6rem; align-items:center; justify-items:stretch;
  }
  #collection .card .sizes .size{
    width:100%; max-width:56px; margin-inline:auto; aspect-ratio:1/1;
    min-width:0; min-height:38px; padding:2px; border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    line-height:1.05; white-space:normal; text-align:center; gap:0;
  }
  #collection .card .sizes .size b{ font-size:.74rem; font-weight:700; }
  #collection .card .sizes .size i{ display:none !important; }
  #collection .card .sizes .size[aria-pressed="true"]{
    background:var(--gold); border-color:var(--gold); color:var(--paper);
  }

  /* price + round Add pill stacked at the bottom of the tile */
  #collection .card .card-foot{
    display:flex !important; flex-direction:column; align-items:stretch;
    gap:.45rem; margin-top:.55rem; padding:0; border:0;
  }
  #collection .card .card-foot .card-price{ font-size:1.3rem; text-align:center; }
  #collection .card .card-foot .card-stock,
  #collection .card .card-foot .sold-out{
    margin:0 !important; text-align:center; font-size:.78rem; opacity:.78;
  }
  #collection .card .card-foot .add{
    width:100%; margin:0 !important; min-height:42px; padding:.55rem .7rem;
    border-radius:999px; font-size:.86rem !important; font-weight:700;
    font-style:normal !important; line-height:1;
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:0 !important; text-align:center !important;
    font-family:var(--text),-apple-system,"Segoe UI",Roboto,sans-serif !important;
    transition:background-color .15s ease, box-shadow .15s ease, opacity .15s ease !important;
  }
  #collection .card .card-foot .add:hover{ transform:none !important; }
  #collection .card .card-foot .add:active{ transform:scale(.97) !important; }
}

/* 12 — ERASED CONTROLS (DIp's final polish) ---------------------------------
      Three elements removed from the UI at every width:
        • the EN · বাংলা translator switch (looked out of place) — the button is
          also removed from the DOM by ui-overhaul.js; this hides it belt-and-
          suspenders in case the script is slow. Translation engine stays
          dormant; the site is its default English.
        • the "New to decants? Start here" primer accordion.
        • the hero size-vials (2 / 5 / 10 / 15 / 20 ml) + their note AND the
          now-empty .hero-visual wrapper. The size filter still lives in the
          collection's own Size chips, so no filtering ability is lost — only
          the decorative hero vials go.
      Display-only; nothing functional or data-related is touched. */
.dg-lang-btn, #dgLangBtn, .dg-nav-lang{ display:none !important; }
#collection .primer{ display:none !important; }

/* hide the vial strip, its note, and the emptied .hero-visual wrapper so no
   blank column/row is left behind. On desktop (>=821) the vials had their own
   full-width grid row ("copy stage" / "vials vials"); drop that second row and
   its row-gap so the hero is simply the headline + copy, exactly as the top row
   reads today. The floating-bottle backdrop (.hero-bg) is absolutely positioned
   (inset:0) and is unaffected. Phones already stack to a single column, so
   hiding the empty wrapper is all that is needed there. */
.vials, #vials, .vials-note, .hero-visual{ display:none !important; }
@media (min-width:821px){
  :root[data-theme="dark"] .hero-grid,
  :root:not([data-theme="dark"]) .hero-grid{
    grid-template-areas:"copy stage" !important;
    row-gap:0 !important;
  }
}

/* 13 — ONE hamburger menu at EVERY width (de-clutter the header) ------------
      DIp: "place these header options in just one simple 3-line hamburger
      menu like the mobile UI … the desktop header looks crowded." The inline
      nav row is removed at ALL widths and the whole of #nav becomes the same
      slide-down panel the phone already uses, opened by a single ≡ button.
      The existing #menuBtn click handler (toggles .open + aria-expanded) is
      reused untouched; ui-overhaul.js only swaps the "Menu" word for a 3-line
      glyph and closes the panel when a row is chosen. The panel is anchored to
      .hdr-in (the centred content column) so on wide screens the links line up
      under the logo, not the viewport edge. The §3 search surface is
      position:fixed, so making .hdr-in a positioning context never moves it.
      Pure layout + presentation; no logic, data, route, or theme is touched. */
body.dg-ui-ready .hdr .hdr-in{ position:relative; }

/* the nav becomes a slide-down panel at EVERY width, not an inline row */
body.dg-ui-ready .hdr .nav{
  display:none !important;
  position:absolute !important; top:100% !important; left:0 !important; right:0 !important;
  flex-direction:column !important; align-items:stretch !important; gap:0 !important;
  width:auto !important; margin:0 !important;
  background:var(--paper); border:var(--line); border-top:0;
  border-radius:0 0 16px 16px;
  padding:.3rem var(--gut) 1rem !important;
  max-height:min(78vh,560px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 26px 50px -30px rgba(12,9,6,.55);
}
body.dg-ui-ready .hdr .nav.open{ display:flex !important; }

/* every row (section links, merged info tabs, Announcements/Offers buttons)
   is a full-width, comfortably-tappable line with a hairline divider */
body.dg-ui-ready .hdr .nav > a,
body.dg-ui-ready .hdr .nav > button{
  display:flex; align-items:center; gap:.5rem;
  width:100% !important; margin:0 !important;
  padding:.85rem .1rem !important;
  border:0; border-bottom:var(--line) !important; border-radius:0 !important;
  background:none !important; text-align:left; cursor:pointer;
  font-size:1rem; line-height:1.2; color:var(--ink); min-height:44px;
}
body.dg-ui-ready .hdr .nav > a:last-child,
body.dg-ui-ready .hdr .nav > button:last-child{ border-bottom:0 !important; }
@media (hover:hover){
  body.dg-ui-ready .hdr .nav > a:hover,
  body.dg-ui-ready .hdr .nav > button:hover{ color:var(--gold-deep); }
}
/* the ≡ button: shown at ALL widths, same circle as the other controls */
body.dg-ui-ready #menuBtn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex !important; align-items:center; justify-content:center;
  flex:0 0 auto; white-space:nowrap;
  width:40px; height:40px; min-width:40px; min-height:40px; padding:0; margin:0;
  border:var(--line); border-radius:50%;
  background:transparent; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
body.dg-ui-ready #menuBtn svg{ width:18px; height:18px; display:block; pointer-events:none; }
/* KILL THE DUPLICATE GLYPH: the base build draws a ≡ via .menu-btn::before
   (content:"\2630") inside its ≤560px phone query. Our JS injects a real <svg>
   ≡ into the SAME button, so phones showed TWO stacked hamburgers (a small svg
   + the big ::before char). Once dg-ui-ready is armed we own the glyph, so the
   ::before is suppressed at every width — leaving exactly ONE. Visual only;
   if the JS never runs, dg-ui-ready is absent and the base ::before still shows
   alone (still one). */
body.dg-ui-ready .hdr .menu-btn::before,
body.dg-ui-ready #menuBtn::before{ content:none !important; display:none !important; }
body.dg-ui-ready #menuBtn:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
@media (hover:hover){
  body.dg-ui-ready #menuBtn:hover{ border-color:var(--gold); color:var(--gold-deep); background:var(--sand-deep); }
}
@media (prefers-reduced-motion:reduce){ body.dg-ui-ready #menuBtn{ transition:none; } }
body.dg-ui-ready #menuBtn:active{ transform:scale(.94); }
body.dg-ui-ready #menuBtn[aria-expanded="true"]{ border-color:var(--gold); color:var(--gold-deep); background:var(--sand-deep); }

/* match the ≡ circle to the touch sizes the other header circles use */
@media (max-width:767px){
  body.dg-ui-ready #menuBtn{ width:44px; height:44px; min-width:44px; min-height:44px; }
}
@media (max-width:560px){
  body.dg-ui-ready #menuBtn{ width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; }
  body.dg-ui-ready #menuBtn svg{ width:16px; height:16px; }
}
@media (max-width:380px){
  body.dg-ui-ready #menuBtn{ width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; }
}

/* tidy right-cluster order at EVERY width: Logo … Search Account Theme ≡ Cart */
body.dg-ui-ready .hdr .brand{ order:0; }
body.dg-ui-ready .hdr #dgSearchBtn{ order:3; }
body.dg-ui-ready .hdr #dgAcctBtn{ order:4; }
body.dg-ui-ready .hdr #themeBtn{ order:5; }
body.dg-ui-ready .hdr #menuBtn{ order:6; }
body.dg-ui-ready .hdr .cart-btn{ order:7; }
body.dg-ui-ready .hdr .nav{ order:9; }