/* Storefront-only phone refinements. All geometry changes stop at tablet width. */
@media (max-width:767px){
  #collection .filters{ gap:.9rem; padding-bottom:1rem; margin-bottom:1rem; align-items:stretch; }
  #collection .filters > .field{ min-width:0; flex:1 1 100%; }
  #collection .filters .search{ flex-basis:100%; }
  #collection .filters .dg-mobile-category{ position:relative; display:block; width:100%; min-height:48px;
    padding:.65rem 2.3rem .65rem .85rem; border:var(--line); border-radius:10px;
    background:var(--paper); color:var(--ink); font:inherit; font-size:1rem; }
  #collection .filters .dg-mobile-category:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
  #collection .filters.dg-mobile-categories #typeChips{ display:none !important; }
  #collection #sizeChips{ gap:.4rem; }
  #collection #sizeChips .chip{ min-height:44px; padding:.55rem .8rem; }
  #collection .result-line{ margin-bottom:.9rem; line-height:1.45; }
  #collection .grid{ grid-template-columns:minmax(0,1fr); gap:.8rem; }
  #collection .card{ min-width:0; gap:.55rem; padding:.9rem; border-radius:14px; }
  #collection .card-top{ min-width:0; gap:.85rem; }
  #collection .card-top > div{ min-width:0; flex:1; }
  #collection .card-photo{ object-fit:contain; }
  #collection .card-photo,#collection .card-top > .mono{ width:clamp(70px,23vw,96px); height:clamp(86px,29vw,120px); border-radius:9px; }
  #collection .card-house{ font-size:.8rem; line-height:1.3; }
  #collection .card-name{ font-size:1.16rem; line-height:1.24; overflow-wrap:anywhere; }
  #collection .card-more{ min-height:44px; }
  #collection .card-top .pyr,#collection .card-top .card-notes{ margin:.25rem 0 0; }
  #collection .card-top .pyr dd{ font-size:.78rem; }
  #collection .card .card-meters,#collection .card .card-tags{ margin:0; }
  #collection .card .sizes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; margin-top:.15rem; }
  #collection .card .size,#pdpPanel .pdp-size{ min-width:0; min-height:52px; width:100%;
    border:1px solid var(--gold-pale); border-radius:10px; background:var(--sand); color:var(--ink);
    font:inherit; line-height:1.25; padding:.35rem .4rem; }
  #collection .card .size[aria-pressed="true"],#pdpPanel .pdp-size[aria-pressed="true"]{
    border-color:var(--gold-deep); background:var(--gold-pale); box-shadow:inset 0 0 0 1px var(--gold-deep); }
  #collection .card .size b,#pdpPanel .pdp-size b{ font-size:.95rem; font-weight:600; }
  #collection .card .size i,#pdpPanel .pdp-size i{ font-size:.82rem; color:var(--ink-soft); }
  #collection .card .size[aria-pressed="true"] i,#pdpPanel .pdp-size[aria-pressed="true"] i{ color:var(--gold-deep); }
  #collection .card .size:focus-visible,#pdpPanel .pdp-size:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
  #collection .card-sprays{ margin:0; }
  #collection .card-foot{ flex-wrap:wrap; gap:.35rem .5rem; border-top:var(--line); padding-top:.6rem; }
  #collection .card-price{ font-size:1.25rem; font-weight:600; }
  #collection .card-stock{ margin-left:auto !important; margin-right:0 !important; }
  #collection .card-foot .add{ width:100%; min-height:44px; margin:0; }
  #collection .dg-mobile-product-price{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  #collection .dg-mobile-product-price:empty{ display:none; }
  #collection .dg-mobile-product-details{ border-top:var(--line); margin-top:2px; }
  #collection .dg-mobile-product-details summary{ min-height:44px; display:list-item; padding:12px 0; font-size:13px; cursor:pointer; color:var(--ink-soft); }
  #collection .dg-mobile-product-details .pyr{ margin:4px 0 10px; }
  #collection .dg-mobile-product-details .pyr dd{ font-size:13px; }
  #collection .dg-mobile-product-details .card-tags{ margin:10px 0; }
  #collection .dg-mobile-product-details .ctag{ font-size:12px; }
  #collection .dg-mobile-product-details .dg-scent{ margin:12px 0; }
  #collection .dgm-size-marker{ display:none; }
  #collection .dg-banner{ gap:.3rem .65rem; overflow-wrap:anywhere; }

  #pdpPanel{ width:100%; height:100dvh; max-height:100dvh; bottom:auto; }
  #pdpPanel .pdp-hd{ min-height:56px; padding:.4rem 1rem; background:var(--paper); }
  #pdpPanel #pdpX{ width:44px; height:44px; flex:0 0 44px; color:var(--ink); }
  #pdpPanel .pdp-bd{ min-height:0; overflow-y:auto; padding:1rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); }
  #pdpPanel .pdp-photo,#pdpPanel .pdp-mono{ aspect-ratio:16/9; max-height:210px; object-fit:contain; }
  #pdpPanel .pdp-name{ margin:.85rem 0 .3rem; font-size:1.55rem; }
  #pdpPanel .pdp-sizes{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
  #pdpPanel .pdp-buy{ bottom:calc(-1.2rem - env(safe-area-inset-bottom));
    margin:1rem -1rem calc(-1.2rem - env(safe-area-inset-bottom));
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); gap:.45rem; }
  #pdpPanel .pdp-price{ flex:1 1 100%; font-size:1.3rem; }
  #pdpPanel .pdp-buy .btn{ min-width:0; min-height:44px; padding:.55rem .45rem; }
}

/* ===========================================================================
   Mobile product-card refinement  (appended — overrides only, nothing >767px)
   1. size selector  : one compact HORIZONTAL row of four (was a 2x2 grid),
                        real CSS size reduction (not transform:scale); keeps the
                        live per-size price and the gold selected state.
   2. overlap guard   : the thumbnail can never cross into the name text.
   3. details reveal  : the in-card "Scent notes & details" gets a clear
                        open/closed chevron and a smooth, reduced-motion-safe open.
   PDP (#pdpPanel) sizes are intentionally left as the 2-up layout above.
   =========================================================================== */
@media (max-width:767px){

  /* 1 — four sizes across, a single tidy row -------------------------------- */
  #collection .card .sizes{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(.25rem,1.4vw,.4rem);
    margin-top:.1rem;
  }
  #collection .card .size{
    min-height:46px;                 /* comfortable tap target in one row */
    width:100%; min-width:0;
    padding:.3rem .18rem;
    border-radius:9px;
    gap:1px; line-height:1.12;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; white-space:nowrap;
  }
  #collection .card .size b{ font-size:clamp(.72rem,2.7vw,.82rem); font-weight:600; letter-spacing:-.01em; }
  #collection .card .size i{ font-size:clamp(.66rem,2.4vw,.76rem); font-style:normal;
    font-variant-numeric:tabular-nums; max-width:100%; }

  /* 2 — photo keeps to its own column; name owns the rest ------------------- */
  #collection .card-top{ align-items:flex-start; }
  #collection .card-top > .card-photo,
  #collection .card-top > .mono{ flex:0 0 auto; }
  #collection .card-top > div{ min-width:0; flex:1 1 auto; }
  #collection .card-name{ overflow-wrap:anywhere; }
  /* a sticky :hover after a tap was the only thing that could nudge the
     thumbnail over the text — neutralise the zoom/parallax on phones. */
  #collection .card .card-photo{ transform:none !important; }

  /* 3 — obvious, restrained details expander -------------------------------- */
  #collection .dg-mobile-product-details summary{
    list-style:none; display:flex; align-items:center; gap:.45rem;
    font-weight:600; color:var(--ink-soft);
  }
  #collection .dg-mobile-product-details summary::-webkit-details-marker{ display:none; }
  #collection .dg-mobile-product-details summary::after{
    content:"\25B8"; margin-left:auto; font-size:.95em; line-height:1;
    color:var(--gold-deep); transition:transform .22s cubic-bezier(.22,.61,.36,1);
  }
  #collection .dg-mobile-product-details[open] summary{ color:var(--ink); }
  #collection .dg-mobile-product-details[open] summary::after{ transform:rotate(90deg); }
  #collection .dg-mobile-product-details[open] > :not(summary){
    animation:dgOftReveal .24s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes dgOftReveal{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){
    #collection .dg-mobile-product-details summary::after{ transition:none; }
    #collection .dg-mobile-product-details[open] > :not(summary){ animation:none; }
  }
}

/* ===========================================================================
   Mobile product card — VISIBLE performance summary + premium compaction
   (appended; overrides only; nothing here applies above 767px)
   The Longevity / Sillage meters now sit ON the collapsed card as a compact
   band between the size selector and Add to Cart (JS lifts them there); full
   notes / pyramid / tags / scent-lean stay in the expander. Cross-platform
   safe: flex + grid only (no :has()), hover never relied on, tokens for both
   themes, reduced-motion respected elsewhere.
   =========================================================================== */
@media (max-width:767px){

  /* performance band — meters shown as a tidy two-up row that wraps if needed */
  #collection .card > .card-meters{
    display:flex; flex-wrap:wrap; gap:.32rem 1.15rem; align-items:center;
    margin:.15rem 0 0; padding:.42rem .55rem;
    border:var(--line); border-radius:9px; background:var(--paper);
  }
  #collection .card > .card-meters .meter{
    display:flex; align-items:center; gap:.4rem; min-width:0; flex:0 1 auto;
  }
  #collection .card > .card-meters .meter em{
    font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.01em;
    color:var(--ink-soft); white-space:nowrap;
  }
  #collection .card > .card-meters .dots{ display:inline-flex; gap:3px; }
  #collection .card > .card-meters .dots i{
    width:7px; height:7px; border-radius:50%;
    background:var(--gold-pale); box-shadow:inset 0 0 0 1px var(--gold-deep); opacity:.55;
  }
  #collection .card > .card-meters .dots i.on{ background:var(--gold-deep); box-shadow:none; opacity:1; }

  /* the spray estimate reads as the second line of the performance summary */
  #collection .card-sprays{ margin:.32rem 0 0; font-size:.76rem; line-height:1.35; color:var(--ink-soft); }

  /* premium compaction — tighten the vertical rhythm so the whole card is
     genuinely smaller without feeling cramped (hierarchy stays intact). */
  #collection .card{ gap:.5rem; padding:.8rem .85rem; }
  #collection .card-top{ gap:.75rem; }
  #collection .card-house{ font-size:.76rem; letter-spacing:.02em; text-transform:uppercase; opacity:.85; }
  #collection .card-name{ font-size:1.08rem; line-height:1.2; margin:.1rem 0 0; }
  #collection .card-photo,#collection .card-top > .mono{
    width:clamp(64px,21vw,88px); height:clamp(80px,26vw,110px);
  }
  #collection .card-foot{ padding-top:.55rem; }
}

/* ===========================================================================
   Mobile pivot — 2-UP PRODUCT GRID  ("placed side by side, tap for sizes").
   On phones the catalogue is now two compact tiles per row: photo, house,
   name and price. Tapping a tile opens the existing full detail panel (sizes,
   performance meters, notes, Add to cart) through the delegated #grid click
   handler already in index.html — so there is NO logic change and desktop is
   untouched. This block is LAST, so it cleanly supersedes the single-column
   card rules above; those size/meter styles now only dress the detail panel.
   =========================================================================== */
@media (max-width:767px){
  #collection .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; align-items:stretch; }

  #collection .card{ cursor:pointer; padding:.6rem; gap:.5rem; }
  #collection .card-top{ flex-direction:column; align-items:stretch; gap:.5rem; }
  #collection .card-photo,
  #collection .card-top > .mono{
    width:100% !important; height:clamp(118px,37vw,158px) !important; border-radius:11px;
  }
  #collection .card-top > .mono{ display:grid; place-items:center; font-size:2rem; }
  #collection .card-top > div{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
  #collection .card-house{ font-size:.68rem; letter-spacing:.03em; }
  #collection .card-name{ font-size:.96rem; line-height:1.22; }
  #collection .card-more{ min-height:0; text-align:left; }

  /* price pinned to the bottom so tiles line up on a shared baseline */
  #collection .dg-mobile-product-price{ margin-top:auto; align-items:baseline; }
  #collection .dg-mobile-product-price .card-price{ font-size:1.08rem; font-weight:600; }
  #collection .dg-mobile-product-price .card-stock{ font-size:.7rem; }

  /* these live in the detail panel on 2-up, never on the tile */
  #collection .card > .sizes,
  #collection .card > .card-meters,
  #collection .card .card-sprays,
  #collection .card .card-foot,
  #collection .card .dg-mobile-product-details,
  #collection .card .pyr,
  #collection .card .card-notes,
  #collection .card .card-tags,
  #collection .card .dg-scent,
  #collection .card-top .tag{ display:none !important; }

  @media (hover:hover){ #collection .card:hover{ border-color:var(--gold); } }
}