@media (prefers-reduced-motion: reduce) {

/* ── ANNOUNCEMENT BAR ── */

 to{transform:translateX(-50%)} }

/* ── HEADER ── */

header nav { display:flex; gap:1px; flex:1; justify-content:center; }

.ni > a:hover, .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
.ni.active > a { color:var(--brand); }

.search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
.search-pill:hover { background:rgba(0,0,0,0.08); }
.search-pill svg { width:13px; height:13px; opacity:.4; }
.search-pill span { font-size:13px; color:var(--muted-2); }

.ib:hover { background:rgba(0,0,0,0.05); }
.ib svg { width:17px; height:17px; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
.wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
.shop-hero { padding-top:28px; padding-bottom:8px; }
.bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
.bcrumb a { color:var(--muted-2); transition:color .2s; }
.bcrumb a:hover { color:var(--ink); }
.bcrumb .sep { color:var(--muted-3); }
.bcrumb .cur { color:var(--ink); font-weight:500; }
.shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
.shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
.shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
.shop-meta strong { color:var(--ink); font-weight:700; }
.shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
.chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
.chips-row:empty { padding:0; }
.fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
.fchip:hover { border-color:var(--ink); }
.fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
.fchip-x:hover { background:var(--brand); color:#fff; }
.fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
.fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
.shop-grid {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:44px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
.filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.filters::-webkit-scrollbar { width:5px; }
.filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
.filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

.f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
.f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
.f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
.f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
.fgroup { border-top:1px solid var(--line-soft); }
.fgroup:first-of-type { border-top:1px solid var(--line); }
.fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0 11px;
  font-size:12.5px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
.fgroup > summary::-webkit-details-marker { display:none; }
.fgroup > summary .chev {
  width:10px; height:10px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
.fgroup[open] > summary .chev { transform:rotate(180deg); }
.fgroup-body { padding:0 0 12px; }

/* checkbox/radio rows */
.fopt {
  display:flex; align-items:center; gap:10px;
  padding:5px 0; font-size:12.5px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
.fopt:hover { color:var(--ink); }
.fopt input { position:absolute; opacity:0; pointer-events:none; }
.fopt-mark {
  width:15px; height:15px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
.fopt-mark.radio { border-radius:50%; }
.fopt:hover .fopt-mark { border-color:var(--ink-2); }
.fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
.fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
.fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
.fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
.fopt-text { flex:1; }
.fopt-count { font-size:11px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   ── PRICE FILTER — refined chip-and-rail design ──
   ──────────────────────────────────────────────────────────────
   Design notes:
   • Min and max values render as TWO subtle pills sitting on a single
     row (left & right justified). Looks like premium fashion-site
     filters, not a raw <input> dump.
   • The inline em-dash separator is HIDDEN — the gap between pills
     plus the slider below provide all the visual relationship needed.
   • Track is 3px (substantial, not flimsy). Active range uses ink.
   • Thumbs are 14px with a triple-shadow stack (subtle ring + close
     drop + soft far drop) instead of a hard border — they feel
     "lifted" off the rail.
   • Hover scales the thumb with a tiny bouncy easing curve. Active
     drag swaps to brand-coloured ring for clear feedback.
   • 7px symmetric inset on the slider stops thumbs from clipping the
     panel edge at min/max.
   ══════════════════════════════════════════════════════════════ */

.price-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 14px;
  font-variant-numeric: tabular-nums;
}
.price-readout > span:not(.dash) {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.1px;
  min-width: 56px;
  justify-content: center;
}
.price-readout .dash { display: none; }    /* gap + chips do the visual work */

.price-slider {
  position: relative;
  height: 16px;
  margin: 0 7px 2px;                       /* half thumb-width inset */
}

.price-track {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}
.price-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  pointer-events: none;
}

.price-slider input[type=range] {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ── WebKit / Blink ── */
.price-slider input[type=range]::-webkit-slider-runnable-track {
  height: 16px; background: transparent; border: none;
}
.price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: grab;
  pointer-events: auto;
  /* Three-layer shadow: 1px hair-line ring + close drop + soft far drop */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.13),
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.07);
  margin-top: -5.5px;                      /* center 14px on 3px track in 16px lane */
  transition:
    transform .18s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow .18s ease;
}
.price-slider input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.13),
    0 6px 16px rgba(0, 0, 0, 0.09);
}
.price-slider input[type=range]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.10);
  box-shadow:
    0 0 0 2px var(--brand),
    0 2px 8px rgba(0, 0, 0, 0.14);
}

/* ── Firefox ── */
.price-slider input[type=range]::-moz-range-track {
  height: 16px; background: transparent; border: none;
}
.price-slider input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: grab;
  pointer-events: auto;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.13),
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.07);
  transition: transform .18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow .18s ease;
}
.price-slider input[type=range]::-moz-range-thumb:hover { transform: scale(1.18); }
.price-slider input[type=range]::-moz-range-thumb:active {
  cursor: grabbing; transform: scale(1.10);
  box-shadow: 0 0 0 2px var(--brand), 0 2px 8px rgba(0, 0, 0, 0.14);
}

/* ── Focus ring (keyboard nav) ── */
.price-slider input[type=range]:focus { outline: none; }
.price-slider input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--ink), 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* ── TOGGLES ── */
.fopt.toggle { justify-content:space-between; padding:6px 0; }
.toggle-sw {
  width:30px; height:18px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
.toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
.fopt input:checked ~ .toggle-sw { background:var(--brand); }
.fopt input:checked ~ .toggle-sw::before { transform:translateX(12px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
.f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
.results { min-width:0; }
.toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
.t-left { display:flex; align-items:center; gap:14px; }
.t-count { font-size:13px; color:var(--muted-2); }
.t-count strong { color:var(--ink); font-weight:700; }
.t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
.sortdrop { position:relative; z-index:10; }
.sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
.sortbtn:hover { border-color:var(--ink); }
.sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
.sortbtn .val { font-weight:600; }
.sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
.sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
.sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
.sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
.sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
.sortopt:hover { background:var(--bg); color:var(--ink); }
.sortopt.on { color:var(--ink); font-weight:600; }
.sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
.viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
.vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
.vbtn:hover { color:var(--ink); }
.vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.vbtn svg { width:14px; height:14px; }

/* mobile filter button */
.fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
.fbtn-mobile svg { width:14px; height:14px; }
.fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ──
   Desktop: 3 columns × 4 rows = 12 products per page (matches the per_page
   setting in luxe_products_per_page filter below).
   Tablet: 2 columns. Mobile: 2 columns smaller gaps. */
.pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
.pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
.pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
.pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
.pgrid.list-view .pcard:hover .pcard-img { transform:none; }
.pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
.pgrid.list-view .pcard-quick { display:none; }
.pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
.pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
.pgrid.list-view .pcard-name { font-size:16px; }
.pgrid.list-view .pcard-var { font-size:13px; }
.pgrid.list-view .pcard-pr { margin-top:4px; }
.pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
.pgrid.list-view .pcard-pr { flex-shrink:1; }
.pcard { cursor:pointer; }
.pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
.pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
.pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
.bg-new { background:var(--ink); color:#fff; }
.bg-hot { background:var(--brand); color:#fff; }
.bg-sale { background:#FF9500; color:#fff; }
.bg-top { background:#34C759; color:#fff; }

/* wishlist */
.pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
.pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
.pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
.pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
.pcard:hover .pcard-quick { bottom:12px; }
.pcard-quick:hover { background:var(--brand); }

/* meta */
.pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
.pcard-stars span { color:var(--muted-3); font-size:11px; }
.pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
.pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
.pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
.pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
.pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
.lmore-wrap { text-align:center; padding:48px 0 16px; }
.lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
.lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */

.flogo em { color:var(--brand); font-style:normal; }

.fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }

.flinks a:hover { color:rgba(255,255,255,0.72); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  .wrap, 
  
  
  header nav { gap:0; }
  
  .search-pill span { display:none; }
  .search-pill { padding:8px 10px; }

  .shop-title { font-size:34px; }
  .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  
  .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  
  header nav, header .search-pill, .ib[title="Wishlist"], .ib[title="Account"] { display:none; }
  
  
  
  
  .ib svg { width:18px; height:18px; }
  
  
  
  .wrap, 

  /* hero */
  .shop-hero { padding-top:22px; padding-bottom:16px; }
  .shop-title { font-size:26px; letter-spacing:-.5px; }
  .shop-sub { font-size:13.5px; margin-top:6px; }
  .shop-meta { padding-bottom:0; }
  .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  .filters.on { transform:translateY(0); }
  .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  .f-head { padding:6px 20px 14px; margin-bottom:0; }
  .fgroup > summary { padding:18px 20px 14px; }
  .fgroup-body { padding:0 20px 18px; }
  .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  .toolbar { gap:10px; padding-bottom:14px; }
  .t-left { gap:10px; flex:1; }
  .sortbtn .lbl { display:none; }
  .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  .pcard-img { border-radius:var(--radius-sm); }
  .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  .pcard-name { font-size:13px; }
  .pcard-p { font-size:14px; }

  /* footer */
  
  
  .ftop > div:first-child { grid-column:1/-1; }
  

  /* hide mobile-only-hidden things */
  .filters .f-head-clear-desktop { display:none; }
  .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  
  
  
  .pgrid { gap:14px 10px; }
  .pcard-name, .pcard-p { font-size:12.5px; }
}

/* ============================================================
   pdp.html
   ============================================================ */

/* ===== pdp.html ===== */

/* ── DESIGN TOKENS ── */

/* ════════ v3.9.3 — Infinite scroll ════════ */

/* Hide legacy load-more button when JS-driven AJAX is active. The
   button stays in the DOM as a no-JS / fallback path. */
html[data-luxe-ajax-shop="on"] .lmore-wrap { display: none !important; }

#luxe-shop-sentinel {
  height: 1px;
  margin-top: -1px;        /* invisible — only used as IntersectionObserver target */
  pointer-events: none;
}

#luxe-shop-infinite-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 8px;
  min-height: 60px;
}
#luxe-shop-infinite-footer .luxe-shop-spinner {
  display: none;
  gap: 6px;
  align-items: center;
}
#luxe-shop-infinite-footer.is-loading .luxe-shop-spinner {
  display: flex;
}
#luxe-shop-infinite-footer .luxe-shop-spinner span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand, #FF2D55);
  animation: luxe-shop-bounce 1s ease-in-out infinite both;
}
#luxe-shop-infinite-footer .luxe-shop-spinner span:nth-child(2) { animation-delay: .15s; }
#luxe-shop-infinite-footer .luxe-shop-spinner span:nth-child(3) { animation-delay: .3s; }
@keyframes luxe-shop-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: .4; }
  40%           { transform: scale(1); opacity: 1; }
}

#luxe-shop-infinite-footer .luxe-shop-end-msg {
  display: none;
  font-size: 12.5px;
  color: var(--muted-2, #86868B);
  letter-spacing: .04em;
}
#luxe-shop-infinite-footer.is-end .luxe-shop-end-msg {
  display: block;
}


/* ════════ v3.9.0 — Shop AJAX + price filter restyle ════════ */
/* ──────────────────────────────────────────────────────────────────────
 * LUXE v3.9.0 — Price filter restyle + Shop AJAX loading states
 * Appended to assets/css/shop.css.
 * ────────────────────────────────────────────────────────────────────── */

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   Price filter — brand-color restyle                                  ║
   ║   Selectors are bumped with body[class] to outrank the v3.8 base.     ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

body[class] .price-readout > span:not(.dash) {
  background: var(--brand-soft, #FFF0F3) !important;
  color: var(--brand, #FF2D55) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 45, 85, 0.18);
  font-size: 12.5px;
}

/* v3.9.2: re-do slider with correct thumb-centring math.
   .price-slider gets a 24px lane height so 18px thumbs sit comfortably,
   with horizontal half-thumb-width inset so the thumbs at extremes
   don't get clipped by the .fgroup-body's right edge. */

body[class] .price-slider {
  height: 24px !important;
  margin: 6px 11px 4px !important;             /* 11px = half thumb (16) + 3px breathing room */
}

body[class] .price-track {
  height: 3px !important;
  background: rgba(0, 0, 0, 0.08) !important;  /* neutral track, brand only on the FILL */
  border-radius: 2px !important;
}

body[class] .price-fill {
  height: 3px !important;
  background: var(--brand, #FF2D55) !important;
  border-radius: 2px !important;
  box-shadow: none;
}

/* Make the input lane match the slider container so thumbs can travel
   the full width, then re-center the thumb vertically. */
body[class] .price-slider input[type=range] {
  height: 24px !important;
}
body[class] .price-slider input[type=range]::-webkit-slider-runnable-track {
  height: 24px !important;
  background: transparent;
  border: none;
}

/* Thumb math: lane is 24px, thumb is 16px, runnable-track top = lane top.
   Webkit positions thumb anchored to top of runnable-track, so to centre
   we need margin-top = (24 - 16) / 2 = 4px. */
body[class] .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2.5px solid var(--brand, #FF2D55) !important;
  margin-top: 4px !important;
  cursor: grab !important;
  pointer-events: auto !important;
  box-shadow: 0 1px 4px rgba(255, 45, 85, 0.32) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
body[class] .price-slider input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 2px 8px rgba(255, 45, 85, 0.42) !important;
}
body[class] .price-slider input[type=range]::-webkit-slider-thumb:active {
  cursor: grabbing !important;
  transform: scale(1.04) !important;
  box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.18),
              0 1px 4px rgba(255, 45, 85, 0.35) !important;
}

/* Firefox auto-centres the thumb within the track, no margin-top needed. */
body[class] .price-slider input[type=range]::-moz-range-track {
  background: transparent !important;
  height: 24px !important;
  border: none !important;
}
body[class] .price-slider input[type=range]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2.5px solid var(--brand, #FF2D55) !important;
  cursor: grab !important;
  pointer-events: auto !important;
  box-shadow: 0 1px 4px rgba(255, 45, 85, 0.32) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
body[class] .price-slider input[type=range]::-moz-range-thumb:hover {
  transform: scale(1.1) !important;
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   Active filter chips — match brand color                             ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */
body[class] .fchip {
  background: var(--brand-soft, #FFF0F3);
  color: var(--brand, #FF2D55);
  border: 1px solid rgba(255, 45, 85, 0.20);
}
body[class] .fchip:hover {
  background: rgba(255, 45, 85, 0.12);
}
body[class] .fchip-x {
  color: var(--brand, #FF2D55);
}
body[class] .fchip-clear:hover {
  color: var(--brand, #FF2D55);
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   AJAX shop — loading states                                          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

#pgrid {
  position: relative;
  transition: opacity .15s ease;
  min-height: 240px;
}

#pgrid.luxe-shop-loading {
  opacity: .55;
  pointer-events: none;
}

#pgrid.luxe-shop-loading::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 45, 85, 0.18);
  border-top-color: var(--brand, #FF2D55);
  border-radius: 50%;
  animation: luxeShopSpin .8s linear infinite;
  z-index: 5;
}
@keyframes luxeShopSpin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Empty state */
.luxe-shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  color: var(--muted, #515154);
}
.luxe-shop-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: var(--muted-3, #AEAEB2);
}
.luxe-shop-empty-icon svg {
  width: 100%;
  height: 100%;
}
.luxe-shop-empty h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #1D1D1F);
  margin: 0 0 6px;
}
.luxe-shop-empty p {
  font-size: 13.5px;
  color: var(--muted-2, #86868B);
  margin: 0;
}

/* Network error toast */
.luxe-shop-error {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 24, 0.92);
  color: #fff;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 13.5px;
  z-index: 99999;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  animation: luxeShopToast .25s ease both;
}
@keyframes luxeShopToast {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}