/* ============================================================
   VELMORA — Listing / Filter pages
   ============================================================ */

.plisting{padding:34px 0 70px;}
.plisting__head{text-align:center;margin-bottom:26px;}
.plisting__title{font-size:clamp(28px,3.4vw,40px);font-weight:400;margin-bottom:6px;}
.plisting__count{font-size:14px;font-weight:600;color:var(--ink-55);letter-spacing:.04em;}
.plisting__count b{color:var(--gold-deep);font-weight:600;}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:13px;margin-bottom:14px;flex-wrap:wrap;}
.toolbar__search{flex:1;min-width:230px;position:relative;}
.toolbar__search input{width:100%;border:1px solid var(--line);background:#fff;
  padding:13px 16px 13px 42px;font-size:14px;font-weight:500;letter-spacing:.01em;transition:border-color .26s;}
.toolbar__search input:focus{outline:none;border-color:var(--gold);}
.toolbar__search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ink-40);stroke-width:1.7;pointer-events:none;}

.filters-toggle{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:#fff;
  border:1px solid var(--gold);padding:13px 24px;font-size:12.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;transition:all .3s var(--ease);white-space:nowrap;}
.filters-toggle:hover{background:var(--gold-dark);border-color:var(--gold-dark);}
.filters-toggle svg{width:14px;height:14px;stroke-width:1.9;transition:transform .34s var(--ease);}
.filters-toggle .chev{width:11px;height:11px;}
.filters-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}

.sort-select{border:1px solid var(--line);background:#fff;padding:13px 34px 13px 14px;font-size:13.5px;
  font-weight:600;letter-spacing:.02em;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  transition:border-color .26s;}
.sort-select:focus{outline:none;border-color:var(--gold);}

.viewtog{display:flex;border:1px solid var(--line);background:#fff;}
.viewtog button{width:40px;height:41px;display:grid;place-items:center;color:var(--ink-40);
  transition:all .26s var(--ease);}
.viewtog button+button{border-left:1px solid var(--line);}
.viewtog button.is-on{background:var(--gold);color:#fff;}
.viewtog svg{width:15px;height:15px;stroke-width:1.7;}

/* ---------- Active filter pills ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:14px;}
.chips:empty{display:none;}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--gold);color:var(--gold-deep);
  background:var(--gold-wash);padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;transition:all .26s var(--ease);}
.chip:hover{background:var(--gold-tint);}
.chip button{display:grid;place-items:center;width:13px;height:13px;color:var(--gold-deep);
  transition:color .22s,transform .22s;}
.chip button:hover{color:var(--danger);transform:scale(1.24);}
.chip svg{width:9px;height:9px;stroke-width:2.6;}
.chip-clear{display:inline-flex;align-items:center;gap:6px;color:var(--danger);font-size:11px;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;border:1px solid transparent;
  padding:6px 11px;transition:all .26s var(--ease);}
.chip-clear:hover{border-color:var(--danger);background:rgba(192,57,43,.055);}
.chip-clear svg{width:10px;height:10px;stroke-width:2.6;}

/* ---------- FILTER PANEL — fixed 5-row structure ---------- */
.fpanel{border:1px solid var(--line);background:#fff;margin-bottom:26px;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .38s var(--ease);}
.fpanel[hidden]{display:none;}
.frow{padding:15px 22px;border-bottom:1px solid var(--line-soft);}
.frow:last-child{border-bottom:0;}
.flabel{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55);
  display:block;margin-bottom:12px;}

/* Row 1 — SHAPE */
.shape-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:9px;}
.shape-btn{display:flex;flex-direction:column;align-items:center;gap:7px;padding:9px 4px 8px;
  border:1px solid var(--line);background:#fff;transition:all .28s var(--ease);border-radius:2px;}
.shape-btn__ico{width:26px;height:26px;color:var(--ink-55);transition:color .28s var(--ease);}
.shape-btn__ico svg{width:100%;height:100%;}
.shape-btn span{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-70);transition:color .28s var(--ease);line-height:1;}
.shape-btn:hover{border-color:var(--gold);}
.shape-btn:hover .shape-btn__ico,.shape-btn:hover span{color:var(--gold-deep);}
/* Selected = solid gold, white icon+text — identical across every filter group */
.shape-btn.is-on{background:var(--gold);border-color:var(--gold);
  box-shadow:0 3px 12px rgba(197,168,128,.32);}
.shape-btn.is-on .shape-btn__ico,.shape-btn.is-on span{color:#fff;}

/* Shared pill control — colour letters, clarity, fluor, cut, polish, symmetry, certs */
.pillset{display:flex;flex-wrap:wrap;gap:6px;}
.pill{border:1px solid var(--line);background:#fff;padding:7px 14px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);transition:all .26s var(--ease);
  border-radius:2px;line-height:1.5;}
.pill:hover{border-color:var(--gold);color:var(--gold-deep);}
.pill.is-on{background:var(--gold);border-color:var(--gold);color:#fff;
  box-shadow:0 3px 10px rgba(197,168,128,.3);}
.pill--wide{min-width:74px;text-align:center;}
.pill--sq{min-width:34px;text-align:center;padding:6px 9px;}

/* Colour sub-tabs */
.subtabs{display:flex;gap:6px;margin-bottom:10px;}
.subtab{border:1px solid var(--line);background:#fff;padding:7px 18px;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:all .26s var(--ease);}
.subtab:hover{border-color:var(--gold);color:var(--gold-deep);}
.subtab.is-on{background:var(--gold);border-color:var(--gold);color:#fff;}
.fancy-swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  vertical-align:-1px;border:1px solid rgba(0,0,0,.14);}

/* Multi-column rows */
.fcols{display:grid;gap:26px;}
.fcols--2{grid-template-columns:1fr 1fr;}
.fcols--3{grid-template-columns:1fr 1fr 1fr;}
.range{display:flex;align-items:center;gap:9px;}
.range input{flex:1;min-width:0;border:1px solid var(--line);padding:9px 12px;font-size:13px;
  font-weight:600;background:#fff;transition:border-color .24s;}
.range input:focus{outline:none;border-color:var(--gold);}
.range span{font-size:11px;color:var(--ink-40);flex-shrink:0;}
.range__unit{font-size:10px;color:var(--ink-40);flex-shrink:0;min-width:14px;}

/* ---------- Row 6 — MATCHING SETS ----------
   Earrings, three-stone rings, tennis bracelets, or simply "I own one and
   want five more the same". Sits below the ordinary filters because it
   changes what a RESULT is: a set, not a single stone. */
.frow--match{background:linear-gradient(180deg,rgba(197,168,128,.055),rgba(197,168,128,.02));}
.mrow{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:26px;align-items:start;}
.mtoggle{display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding:12px 14px;
  border:1px solid var(--line);background:#fff;border-radius:2px;transition:all .26s var(--ease);}
.mtoggle:hover{border-color:var(--gold);}
.mtoggle.is-on{border-color:var(--gold);box-shadow:0 3px 12px rgba(197,168,128,.22);}
.mtoggle input{position:absolute;opacity:0;width:0;height:0;}
.mtoggle__box{flex-shrink:0;width:19px;height:19px;border:1.6px solid var(--line);border-radius:2px;
  display:grid;place-items:center;background:#fff;transition:all .24s var(--ease);margin-top:1px;}
.mtoggle__box svg{width:12px;height:12px;stroke-width:3;color:#fff;opacity:0;transition:opacity .2s;}
.mtoggle.is-on .mtoggle__box{background:var(--gold);border-color:var(--gold);}
.mtoggle.is-on .mtoggle__box svg{opacity:1;}
.mtoggle input:focus-visible + .mtoggle__box{outline:2px solid var(--gold);outline-offset:2px;}
.mtoggle__t{font-size:12.5px;font-weight:800;letter-spacing:.03em;color:var(--ink);line-height:1.35;}
.mtoggle__t em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--ink-55);
  letter-spacing:0;margin-top:3px;line-height:1.45;}
.mopts{display:grid;grid-template-columns:1fr auto;gap:26px;transition:opacity .3s var(--ease);}
.mopts.is-off{opacity:.38;pointer-events:none;}
.mopt .flabel{margin-bottom:9px;}
/* Typed quantity, not a row of buttons: a 1–10 strip implied ten was our
   limit. Stock is the only limit. */
.mqty{display:flex;align-items:center;gap:9px;}
.mqty input{width:104px;border:1px solid var(--line);padding:10px 12px;font-size:16px;
  font-weight:800;text-align:center;background:#fff;border-radius:2px;
  transition:border-color .24s;-moz-appearance:textfield;}
.mqty input::-webkit-outer-spin-button,
.mqty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.mqty input:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(197,168,128,.16);}
.mqty__u{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-40);}
.mnote.is-short{color:var(--gold-deep);font-weight:600;}
.flabel__x{font-style:normal;font-weight:600;letter-spacing:.04em;
  text-transform:none;color:var(--ink-40);}
.mnote{display:block;font-size:10.5px;color:var(--ink-55);margin-top:8px;line-height:1.5;max-width:340px;}
.chip--match{border-color:var(--gold);background:rgba(197,168,128,.1);}

/* ---------- a matching set on the results grid ---------- */
.pgrid.is-sets{display:block;}
.mset{border:1px solid var(--line);background:#fff;margin-bottom:22px;
  box-shadow:0 2px 14px rgba(26,26,26,.045);}
.mset__h{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(197,168,128,.085),rgba(197,168,128,.02));}
.mset__ttl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.mset__n{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--gold-deep);padding:3px 8px;border-radius:2px;}
.mset__ttl b{font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--ink);}
.mset__meta{font-size:11.5px;font-weight:600;color:var(--ink-55);letter-spacing:.03em;}
.mset__r{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.mset__tag{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);border:1px solid var(--gold);padding:4px 9px;border-radius:2px;}
.mset__tag.is-exact{background:var(--ok);border-color:var(--ok);color:#fff;}
.mset__price{text-align:right;line-height:1.25;}
.mset__plab{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-40);}
.mset__price b{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:.01em;}
.mset__buy.is-in{background:var(--ok);border-color:var(--ok);color:#fff;}
/* minmax(0,…) not 1fr: a plain 1fr floors at the card's min-content width,
   and on a 360px phone that pushed the second card 30px past the screen
   edge (measured 4 Aug 2026). minmax(0,…) lets the column actually shrink. */
.mset__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:16px 18px 18px;}
.pgrid.is-sets .pcard{margin:0;}
.resbar__sub{font-weight:600;font-size:11px;color:var(--ink-55);letter-spacing:.02em;}

/* ---------- Results bar ----------
   Sort and view moved here from the toolbar and the bar sticks to the top
   while scrolling. With 200 pages of results the shopper could not reach the
   sort control without scrolling all the way back up. */
.resbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 0 12px;margin-bottom:20px;border-bottom:1px solid var(--line-soft);
  position:sticky;top:var(--hdr-h,132px);z-index:60;
  background:#fff;
  /* stretch the white past the wrap so nothing shows through at the edges */
  box-shadow:0 0 0 100vmax #fff, 0 7px 12px -10px rgba(26,26,26,.30);
  clip-path:inset(0 -100vmax);}
.resbar__act{display:flex;align-items:center;gap:10px;margin-left:auto;}
.resbar__act .sort-select{min-width:186px;}
.resbar__n{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.02em;}
.resbar__n b{color:var(--ink);font-weight:600;}
.resbar__right{display:flex;align-items:center;gap:11px;}
.resbar__sortlab{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-40);}

/* ---------- Product grid ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.pcard{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;
  transition:box-shadow .38s var(--ease),transform .38s var(--ease),border-color .38s var(--ease);
  position:relative;}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:rgba(197,168,128,.5);}
.pcard__media{position:relative;aspect-ratio:1;overflow:hidden;background:#161618;display:block;}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .95s var(--ease);}
.pcard:hover .pcard__media img{transform:scale(1.085);}
.pcard__wish{position:absolute;top:10px;left:10px;width:29px;height:29px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;
  /* Must clear .pcard__media--360::after (z-index 4), which is a full-tile
     click shield. It used to swallow the tap and open the product page
     instead of saving the stone. */
  z-index:6;
  box-shadow:0 1px 6px rgba(0,0,0,.12);transition:all .28s var(--ease);}
.pcard__wish svg{width:14px;height:14px;stroke:var(--ink-55);fill:none;stroke-width:1.7;
  transition:all .28s var(--ease);}
.pcard__wish:hover{transform:scale(1.12);}
.pcard__wish:hover svg{stroke:var(--gold-dark);}
.pcard__wish.is-on svg{fill:var(--gold);stroke:var(--gold);}
.pcard__body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1;}
.pcard__sku{font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--ink);margin-bottom:7px;}
.pcard__head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;margin-bottom:8px;}
/* Mobile price overflow safety: long prices ("$12,345 USD") must shrink,
   not push the card past the viewport. (17 Aug 2026) */
.pcard__pricebox,.pcard__priceline,.pcard__id{min-width:0;}
/* Price must NEVER be ellipsized or hidden — the owner reported "dot dot
   dot" prices on mobile. Long prices shrink via font-size on small
   screens instead. (17 Aug 2026) */
.pcard__price,.pcard__was{white-space:nowrap;overflow:visible;text-overflow:clip;}
@media (max-width:600px){
  .pcard__price{font-size:14.5px;}
  .pcard__was{font-size:11px;}
}
.pcard__pricebox{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  min-width:0;text-align:left;}
.pcard__topline{display:flex;align-items:baseline;gap:8px;justify-content:flex-start;}
.pcard__carat{font-family:var(--sans);font-size:19px;font-weight:800;color:var(--ink);
  line-height:1;letter-spacing:-.015em;font-variant-numeric:tabular-nums lining-nums;}
.pcard__carat i{font-size:11px;font-style:normal;font-weight:700;
  color:var(--ink-55);margin-left:1px;}
.pcard__shape{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-70);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcard__id{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:center;
  text-align:center;}
.pcard__certtxt{font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--gold-deep);
  white-space:nowrap;line-height:1.2;}
.pcard__type{font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--ink-70);white-space:nowrap;}
.pcard__priceline{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;
  margin-bottom:4px;}
.pcard__price{font-size:17px;font-weight:800;color:var(--gold-dark);letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums;}
.pcard__lab{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--gold-deep);
  border:1px solid rgba(197,168,128,.75);padding:3px 7px;background:var(--gold-wash);flex-shrink:0;}
/* Kept for cards outside the listing grid (wishlist, account): a small
   grey summary line under the price. The listing card no longer uses it. */
.pcard__only{font-size:10.5px;font-weight:500;color:var(--ink-55);letter-spacing:.02em;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line-soft);}
.pcard__specs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px 5px;margin-bottom:12px;flex:1;
  align-content:start;}
.pcard__spec{min-width:0;}
.pcard__k{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-55);display:block;line-height:1.45;}
.pcard__v{font-size:12.5px;font-weight:700;color:var(--ink);display:block;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard__acts{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.pcard__btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:10px 6px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:all .28s var(--ease);border:1px solid var(--line);}
.pcard__btn svg{width:11px;height:11px;stroke-width:1.9;}
.pcard__btn--cart{background:#fff;color:var(--ink);}
.pcard__btn--cart:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-wash);}
.pcard__btn--cart.is-in{border-color:var(--ok);color:var(--ok);}
.pcard__btn--buy{background:var(--gold);border-color:var(--gold);color:#fff;}
.pcard__btn--buy:hover{background:var(--gold-dark);border-color:var(--gold-dark);}

/* ---------- List view ---------- */
.pgrid.is-list{grid-template-columns:1fr;gap:11px;}
.pgrid.is-list .pcard{flex-direction:row;align-items:stretch;}
.pgrid.is-list .pcard__media{width:150px;flex-shrink:0;aspect-ratio:1;}
.pgrid.is-list .pcard__body{flex-direction:row;align-items:center;gap:26px;padding:14px 18px;}
.pgrid.is-list .pcard__head{min-width:230px;}
.pgrid.is-list .pcard__specs{grid-template-columns:repeat(6,minmax(52px,1fr));flex:1;margin:0;gap:5px 10px;}
.pgrid.is-list .pcard__acts{grid-template-columns:1fr;min-width:120px;flex-shrink:0;}

/* ---------- Empty / skeleton ---------- */
.pempty{text-align:center;padding:74px 20px;grid-column:1/-1;}
.pempty svg{width:44px;height:44px;color:var(--line);margin:0 auto 18px;stroke-width:1;}
.pempty h3{font-size:21px;margin-bottom:9px;}
.pempty p{font-size:13px;color:var(--ink-55);margin-bottom:22px;}
.skel{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.skel__c{border:1px solid var(--line);height:352px;
  background:linear-gradient(100deg,#F5F5F5 30%,#FBFBFB 50%,#F5F5F5 70%);
  background-size:220% 100%;animation:shim 1.35s linear infinite;}
@keyframes shim{to{background-position:-220% 0;}}

/* ---------- Pagination (crawlable) ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:44px;flex-wrap:wrap;}
.pager a,.pager span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 11px;
  border:1px solid var(--line);font-size:12px;background:#fff;transition:all .26s var(--ease);}
.pager a:hover{border-color:var(--gold);color:var(--gold-deep);}
.pager .is-cur{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600;}
.pager .is-gap{border:0;background:none;color:var(--ink-40);min-width:20px;}
.pager__info{width:100%;text-align:center;font-size:11px;color:var(--ink-40);margin-top:10px;
  letter-spacing:.04em;}

/* ---------- Breadcrumbs ---------- */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10.5px;color:var(--ink-40);
  letter-spacing:.06em;text-transform:uppercase;padding:14px 0 0;}
.crumbs a{transition:color .24s;}
.crumbs a:hover{color:var(--gold-deep);}
.crumbs svg{width:9px;height:9px;stroke-width:2.2;opacity:.6;}
.crumbs [aria-current]{color:var(--ink-70);}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .pgrid{grid-template-columns:repeat(3,1fr);}
  .skel{grid-template-columns:repeat(3,1fr);}
  .shape-grid{grid-template-columns:repeat(6,1fr);}
  .mset__cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1080px){
  .mrow{grid-template-columns:1fr;gap:18px;}
  .mopts{grid-template-columns:1fr;gap:18px;}
}
@media (max-width:900px){
  .pgrid{grid-template-columns:repeat(2,1fr);}
  .skel{grid-template-columns:repeat(2,1fr);}
  .fcols--3,.fcols--2{grid-template-columns:1fr;gap:16px;}
  .pgrid.is-list .pcard{flex-direction:column;}
  .pgrid.is-list .pcard__media{width:100%;}
  .pgrid.is-list .pcard__body{flex-direction:column;align-items:stretch;gap:10px;}
  .pgrid.is-list .pcard__specs{grid-template-columns:repeat(3,1fr);}
  .pgrid.is-list .pcard__acts{grid-template-columns:1fr 1fr;}
  /* Mobile: rows become accordions — order stays identical */
  .frow{padding:0;border-bottom:1px solid var(--line-soft);}
  .frow > .flabel{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
    margin:0;cursor:pointer;font-size:9.5px;}
  .frow > .flabel::after{content:'';width:7px;height:7px;border-right:1.6px solid var(--ink-40);
    border-bottom:1.6px solid var(--ink-40);transform:rotate(45deg) translateY(-2px);
    transition:transform .3s var(--ease);}
  .frow.is-open > .flabel::after{transform:rotate(225deg) translateY(-2px);}
  .frow__b{padding:0 18px 16px;display:none;}
  .frow.is-open .frow__b{display:block;}
  .mset__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:13px;}
  .mset__h{padding:12px 13px;gap:12px;}
  .mset__r{width:100%;justify-content:space-between;}
}
@media (max-width:600px){
  .pgrid{grid-template-columns:1fr 1fr;gap:11px;}
  .skel{grid-template-columns:1fr 1fr;gap:11px;}
  .shape-grid{grid-template-columns:repeat(4,1fr);gap:7px;}
  .toolbar{gap:9px;}
  .toolbar__search{min-width:100%;order:-1;}
  .pcard__specs{grid-template-columns:repeat(2,1fr);}
  .plisting{padding:22px 0 50px;}
  /* Mobile card head — THREE clean rows, nothing overlaps:
     row 1 = carat + shape (left ... right)
     row 2 = price on its own line (never mixed with carat)
     row 3 = lab name ... Natural/Lab Grown
     (Owner reported carat and price overlapping on phones; the old
      side-by-side row did not survive long prices. 17 Aug 2026) */
  .pcard__head{grid-template-columns:1fr;gap:6px;}
  .pcard__pricebox{flex-direction:column;align-items:stretch;gap:3px;text-align:left;}
  .pcard__topline{justify-content:space-between;width:100%;}
  .pcard__priceline{justify-content:space-between;width:100%;margin:0;}
  .pcard__price{font-size:15px;max-width:100%;}
  .pcard__was{font-size:11px;}
  .pcard__id{flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;text-align:left;}
  .pcard__certtxt{font-size:12px;}
  .pcard__type{font-size:12px;}
}

/* ---- Live 360 inside product cards ----
   The frame is a preview only. It NEVER takes pointer events, otherwise the
   iframe swallows the click and the product page cannot be opened from the
   grid. The viewer is also taller than the tile and pulled up, so its own
   control rows and the Vision360 credit strip sit outside the visible area —
   in the grid we only want the spinning stone. */
.pcard__media--360{position:relative;}
.pcard__frame{position:absolute;left:0;top:0;width:100%;border:0;z-index:2;
  /* Measured: the viewer renders the stone in the top 40% of the frame and its
     control rows below that. Making the frame 250% of the tile means the stone
     alone fills the tile and every control falls outside the clip. */
  height:250%;
  opacity:0;transition:opacity .5s var(--ease);
  pointer-events:none!important;background:#c9c9c9;}
.pcard__media--360.is-live .pcard__frame{opacity:1;}
.pcard__media--360.is-live{background:#c9c9c9;}
/* keep the whole tile clickable above the frame */
.pcard__media--360::after{content:'';position:absolute;inset:0;z-index:4;}
.pcard__360tag{position:absolute;right:8px;bottom:8px;z-index:3;background:rgba(255,255,255,.94);
  color:var(--ink);font-size:8.5px;font-weight:800;letter-spacing:.08em;padding:3px 8px;
  border-radius:20px;box-shadow:0 1px 5px rgba(0,0,0,.16);pointer-events:none;}
/* As a lightbox trigger the tag becomes a real button. (17 Aug 2026) */
.pcard__mediabox{position:relative;}
.pcard__360tag[data-360open]{pointer-events:auto;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);}
.pcard__360tag[data-360open]:hover{transform:scale(1.12);box-shadow:0 2px 10px rgba(0,0,0,.28);}
.pcard__360tag[data-360open]:active{transform:scale(.94);}
.pcard__360tag[data-360open]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.pcard__spin{position:absolute;inset:0;z-index:1;display:grid;place-items:center;}
.pcard__spin::after{content:'';width:22px;height:22px;border:2px solid rgba(255,255,255,.25);
  border-top-color:rgba(255,255,255,.85);border-radius:50%;animation:spin360 .9s linear infinite;}
.pcard__media--360.is-live .pcard__spin{display:none;}
@keyframes spin360{to{transform:rotate(360deg);}}

/* ---- Search results hold still ----
   The cards used to rock back and forth to suggest a 360 view. With real
   supplier photos in the grid that reads as a wobble, not a spin, and the
   owner asked for it to stop: "straight chahiye, andar click karne ke baad
   ghumta rahna chahiye". Rotation now belongs to the product page only. */
.pcard__media--spin img{animation:none;transform:none;} 

/* ---- Availability badge (NZ stock vs overseas pre-order) ---- */
.pcard__stock{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin:2px 0 6px;display:flex;align-items:center;gap:5px;}
.pcard__stock::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.pcard__stock.is-avail{color:var(--ok);}
.pcard__stock.is-avail::before{background:var(--ok);}
.pcard__stock.is-pre{color:var(--gold-dark);}
.pcard__stock.is-pre::before{background:var(--gold-dark);}


/* Results bar on small screens: count on its own line, controls under it. */
@media (max-width:700px){
  .resbar{gap:9px;padding:10px 0 11px;top:var(--hdr-h,104px);}
  .resbar__act{width:100%;margin-left:0;}
  .resbar__act .sort-select{flex:1;min-width:0;font-size:14px;padding:9px 11px;}
  .resbar__n{font-size:15px;}
}

/* ---------- Two matching sets side by side ----------
   A single set per row left half the width empty. Two sets fill it, and the
   hairline between them stops anyone reading four stones as one set.
   Each set keeps its own price and its own Add button. (4 Aug 2026) */
.msetrow{display:grid;grid-template-columns:1fr 1px 1fr;gap:18px;align-items:start;
  margin-bottom:22px;}
.msetrow__x{background:var(--ink);opacity:.16;align-self:stretch;min-height:100%;}
.msetrow .mset{margin-bottom:0;}
/* Inside a half-width set the stones sit two-up, which keeps the card the
   same size the owner already approved. */
.msetrow .mset__cards{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:1100px){
  .msetrow{grid-template-columns:1fr;gap:0;}
  .msetrow__x{display:none;}
  .msetrow .mset{margin-bottom:22px;}
}

/* ---------- SALE ribbon and struck-through price ---------- */
/* Top-left is the wishlist heart's corner, so the ribbon goes top-RIGHT.
   Measured 4 Aug 2026: at top-left the heart sat on the word and the
   discount was unreadable. */
.pcard__ribbon{position:absolute;top:0;right:0;z-index:5;background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:0 0 0 3px;
  box-shadow:0 2px 10px rgba(192,57,43,.4);pointer-events:none;white-space:nowrap;}
.pcard__was{font-size:12px;color:var(--ink-40);text-decoration:line-through;margin-right:7px;}
.pcard__price.is-sale{color:var(--danger);}

/* Small line under the price saying what is already inside it. */
.pcard__incl{font-size:10px;color:var(--ink-40);letter-spacing:.02em;margin-top:2px;
  line-height:1.35;}

/* ============================================================
   360° LIGHTBOX (17 Aug 2026)
   Card ke "360°" button se ek hi supplier viewer overlay mein.
   Grid kabhi live iframe embed nahi karti — page halka rehta hai.
   ============================================================ */
.v360ov{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:18px;
  background:rgba(10,10,14,.88);opacity:0;transition:opacity .22s ease;}
.v360ov.is-open{opacity:1;}
.v360ov[hidden]{display:none;}
.v360ov__box{position:relative;width:min(92vw,560px,78vh);aspect-ratio:1/1;
  background:#161618;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  transform:scale(.94) translateY(10px);transition:transform .24s ease;}
.v360ov.is-open .v360ov__box{transform:scale(1) translateY(0);}
.v360ov__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#161618;}
.v360ov__close{position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;
  border-radius:50%;background:rgba(255,255,255,.95);color:#1a1a1a;
  display:grid;place-items:center;box-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:transform .16s ease,background .16s ease;}
.v360ov__close:hover{transform:scale(1.1);background:#fff;}
.v360ov__close:active{transform:scale(.94);}
.v360ov__close svg{width:16px;height:16px;}


/* (ZIP M) COLOUR PANEL — compact pills + FIXED height: All/White/Fancy
   switch par poora filter panel upar-neeche kudta tha (owner ne pakda).
   Ab dono states ek jaise compact — aur box kabhi chhota nahi hota. */
/* (ZIP P — owner ka hukum) Fancy pills ORIGINAL SIZE + white pills same
   + fixed height (no jump) */
.pillbox{display:block;}
.pillbox--fixed{min-height:0;}   /* (ZIP P fix) natural height — no extra space */
.pillbox--all .pillset{display:flex;flex-wrap:wrap;gap:6px;}
.pillset{display:flex;flex-wrap:wrap;gap:6px;}
.pillbox__lab{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-40,#8A857A);margin-bottom:4px;}
.pill--sq{min-width:34px;padding:6px 10px;font-size:12px;}
.pill--fancy{padding:7px 14px;font-size:12px;letter-spacing:.05em;
  display:inline-flex;align-items:center;gap:5px;}
.pill--fancy .fancy-swatch{width:11px;height:11px;margin-right:3px;flex:0 0 11px;}

/* (ZIP W/X) COLOUR LAYOUT FIX — owner: "White/Fancy par sab upar-neeche
   kudta hai". Ab band wali row GAYAB nahi, DHUNDHLI hoti hai — layout
   kabhi nahi hilta. (Shape pills ka dim ZIP X me hata — partial data
   par galat dim lagta tha.) */
.pillset--dim { opacity: .32; pointer-events: none; }