/* ==========================================================================
   CIZELE — Diamonds browsing layer (restored + re-skinned in warm atelier glass)
   Frosted plum panels, champagne accents, jewel-like depth. Reads on dark. Not techy/blue.
   ========================================================================== */
.cz-dbrowse{padding:clamp(4rem,10vh,9rem) 0;position:relative}
.cz-dbrowse__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}
.cz-dbrowse__head h2{font-size:var(--h2)}
.cz-dbrowse__subwrap{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;max-width:38ch}
.cz-dbrowse__sub{color:var(--mut);font-size:.95rem;text-align:right}
.cz-dbrowse__guidelink{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;
  color:var(--champ);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(231,214,182,.35)}
.cz-dbrowse__guidelink:hover,.cz-dbrowse__guidelink:focus-visible{text-decoration-color:var(--champ)}
.cz-dbrowse__guidelink i{font-size:.7rem}
@media(max-width:640px){.cz-dbrowse__subwrap{align-items:flex-start}.cz-dbrowse__sub{text-align:left}}

/* shape quick-entry strip */
.cz-dbrowse__shapes{display:grid;grid-template-columns:repeat(10,1fr);gap:.6rem;margin-bottom:1.6rem}
.cz-dbrowse__shape{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem .3rem;border-radius:14px;
  background:linear-gradient(180deg,rgba(247,243,237,.05),rgba(247,243,237,.02));border:1px solid var(--line);
  transition:border-color .35s var(--e),background .35s var(--e),transform .35s var(--e)}
.cz-dbrowse__shape:hover{border-color:rgba(201,168,106,.5);transform:translateY(-3px)}
.cz-dbrowse__shapeic{width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.cz-dbrowse__shapeic img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(.86)}
.cz-dbrowse__shape span{font-size:.72rem;letter-spacing:.04em;color:#cbbfc8}

/* "Didn't find it" close, sits under the results grid regardless of what's filtered — the atelier
   sources beyond the seeded catalogue, so a real next step belongs here, not a dead end. */
.cz-dbrowse__notfound{margin-top:3rem;padding:2.2rem 2rem;border-radius:20px;text-align:center;
  background:linear-gradient(155deg,rgba(201,168,106,.08),rgba(94,52,80,.12));border:1px solid var(--line)}
.cz-dbrowse__notfound-say{margin:0 0 1.2rem;font-size:1.02rem;color:var(--txt);max-width:52ch;margin-inline:auto}
.cz-dbrowse__notfound-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
@media(max-width:480px){
  /* Side by side, not stacked, matching the same rule already applied to hero/closing CTA pairs
     sitewide — each button shares the row equally rather than forcing one under the other. */
  .cz-dbrowse__notfound-btns{flex-wrap:nowrap;gap:.6rem}
  .cz-dbrowse__notfound-btns .cz-btn{flex:1 1 0;min-width:0;padding-left:.9rem}
  .cz-dbrowse__notfound-btns .cz-btn span:first-child{white-space:normal;text-align:left}
}

/* ---------- the live browser (overrides the ported structure for dark glass) ---------- */
.cz-df{max-width:none;margin:0;padding:0;font-family:var(--sans);color:var(--txt)}

/* filter panel — frosted glass */
.cz-df-filters{background:linear-gradient(180deg,rgba(247,243,237,.06),rgba(247,243,237,.025));
  backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);border-radius:20px;padding:.4rem 1.8rem;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 30px 70px -50px #000}
.cz-df-row{display:flex;align-items:flex-start;gap:1.4rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.cz-df-row:last-child{border-bottom:0}
.cz-df-glabel{flex:0 0 92px;padding-top:.5rem;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champ)}
.cz-df-row-inline{align-items:center}.cz-df-row-inline .cz-df-glabel{padding-top:0}

/* origin toggle — glass segmented */
.cz-df-type{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.2)}
.cz-df-typebtn{padding:.6rem 1.6rem;border:0;background:transparent;cursor:pointer;font-size:.8rem;color:#c8bcc6;transition:.25s var(--e)}
.cz-df-typebtn.is-active{background:linear-gradient(180deg,#6e3d5f,#4a253f);color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.2)}

/* shapes */
.cz-df-shapes{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.cz-df-shape{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .3rem;border:1px solid transparent;border-radius:12px;background:transparent;cursor:pointer;transition:.2s var(--e)}
.cz-df-shape img{width:34px;height:34px;object-fit:contain;filter:brightness(0) invert(.82);transition:.2s}
.cz-df-shape span{font-size:.7rem;color:#bdb2ba}
.cz-df-shape:hover{background:rgba(247,243,237,.05)}
.cz-df-shape.is-active{border-color:rgba(201,168,106,.6);background:rgba(201,168,106,.08)}
.cz-df-shape.is-active span{color:var(--champ)}.cz-df-shape.is-active img{filter:none;opacity:1}
.cz-df-shape.is-empty{opacity:.32}

/* carat select — glass */
.cz-df-caratsel{appearance:none;-webkit-appearance:none;min-width:230px;padding:.7rem 2.4rem .7rem 1rem;border:1px solid var(--line);
  border-radius:10px;background:rgba(247,243,237,.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23E7D6B6' stroke-width='1.5'/></svg>") no-repeat right 1rem center;
  font-size:.88rem;color:var(--txt);cursor:pointer;font-family:inherit}
.cz-df-caratsel:focus{outline:none;border-color:var(--champ)}
.cz-df-caratsel option{color:#1a151b}

/* color/clarity/cut */
.cz-df-row-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.cz-df-row-grid .cz-df-group{display:flex;flex-direction:column}
.cz-df-row-grid .cz-df-glabel{flex:none;padding:0 0 .6rem}
.cz-df-chipset{display:flex;flex-wrap:wrap;gap:.4rem}
.cz-df-chipbtn{padding:.4rem .85rem;border:1px solid var(--line);border-radius:999px;background:rgba(247,243,237,.04);cursor:pointer;font-size:.76rem;color:#d7cbd4;transition:.18s var(--e)}
.cz-df-chipbtn:hover{border-color:var(--champ)}
.cz-df-chipbtn.is-active{background:linear-gradient(180deg,#6e3d5f,#4a253f);border-color:transparent;color:#fff}
.cz-df-chipbtn.is-empty{opacity:.3}

/* bar + active chips */
.cz-df-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 1.1rem}
.cz-df-chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.cz-df-activechip{padding:.34rem .75rem;border:0;border-radius:999px;background:rgba(201,168,106,.16);cursor:pointer;font-size:.73rem;color:var(--champ)}
.cz-df-activechip:hover{background:rgba(201,168,106,.28)}
.cz-df-clear{border:0;background:transparent;color:var(--champ);cursor:pointer;font-size:.76rem;text-decoration:underline}
.cz-df-count{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* results */
.cz-df-results{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:.4rem;transition:opacity .2s}
.cz-df.is-loading .cz-df-results{opacity:.45}
.cz-df-card{display:flex;flex-direction:column;text-decoration:none;color:var(--txt);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(247,243,237,.05),rgba(247,243,237,.02));transition:.25s var(--e)}
.cz-df-card:hover{box-shadow:0 26px 60px -34px #000;transform:translateY(-4px);border-color:rgba(201,168,106,.45)}
.cz-df-cardimg{aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.cz-df-cardimg img{width:100%;height:100%;object-fit:cover}
.cz-df-cardimg .cz-df-cardicon{width:50%;height:50%;object-fit:contain;filter:brightness(0) invert(.86);opacity:.9}
.cz-df-ph{background:radial-gradient(120% 120% at 50% 28%,#2c2030 0%,#1c141f 58%,#140e16 100%)}
.cz-df-ph::after{content:"";position:absolute;inset:0;background:radial-gradient(42% 30% at 50% 30%,rgba(201,168,106,.22),transparent 70%);pointer-events:none}
.cz-df-phtag{position:absolute;bottom:9px;right:11px;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--champ);opacity:.85;background:rgba(20,14,22,.55);padding:.25em .55em;border-radius:999px}
/* Real per-shape stock photo fallback: fills the tile like a genuine result card, not the small
   centered icon treatment, only the caption pill discloses it's representative, not this exact stone. */
.cz-df-ph--photo::after{display:none}
.cz-df-ph--photo img{width:100%;height:100%;object-fit:cover;filter:none;opacity:1}
.cz-df-cardbody{padding:.9rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.25rem}
.cz-df-cardtitle{font-size:1rem;font-family:var(--serif);font-weight:500}
.cz-df-cardspecs{font-size:.76rem;color:var(--mut)}
.cz-df-cardfoot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem}
.cz-df-avail{font-size:.66rem;letter-spacing:.06em;color:#b9adb6}
.cz-df-cardcta{font-size:.7rem;letter-spacing:.06em;color:var(--champ)}
.cz-df-loading,.cz-df-empty{grid-column:1 / -1;text-align:center;color:var(--mut);padding:2.5rem}
.cz-df-loadmore{display:flex;justify-content:center;margin-top:2.2rem}

@media(max-width:980px){
  .cz-dbrowse__shapes{grid-template-columns:repeat(5,1fr)}
  .cz-df-row{flex-direction:column;gap:.7rem}.cz-df-glabel{flex:none;padding-top:0}
  .cz-df-results{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  /* Matches .cz-intro's own reduced mobile padding (sections.css) — this section previously kept
     its full desktop padding at every width, so its top gap stacked with the previous section's
     bottom gap into a noticeably empty-feeling band on a phone. */
  .cz-dbrowse{padding:clamp(2.6rem,7vh,3.6rem) 0}
  /* Wide tracking on a tiny badge crowds "REPRESENTATIVE PHOTO" against the card edge at this size. */
  .cz-df-phtag{letter-spacing:normal}
}
@media(max-width:720px){
  /* 10 shapes: stays at 5 columns (2 even rows) rather than 4 (which orphans 2 on their own row) —
     icon/label shrink slightly so 5 still fits comfortably at this width. */
  .cz-df-shapes{grid-template-columns:repeat(5,1fr);gap:.3rem}
  .cz-df-shape{padding:.5rem .1rem}
  .cz-df-shape img{width:26px;height:26px}
  .cz-df-shape span{font-size:.62rem}
  .cz-df-row-grid{grid-template-columns:1fr}
  .cz-df-results{grid-template-columns:1fr 1fr}.cz-df-caratsel{min-width:100%}
}
@media(max-width:640px){
  /* The quick-entry shape strip above the live filter (.cz-dbrowse__shapes) duplicates the filter's
     own Shape row one scroll further down — redundant on a phone where every pixel of vertical space
     is scarcer, so it's dropped there and the filter panel's Shape row is the one true source. */
  .cz-dbrowse__shapes{display:none}
}
@media(max-width:400px){
  .cz-df-shapes{grid-template-columns:repeat(5,1fr);gap:.2rem}
  .cz-df-shape img{width:22px;height:22px}
  .cz-df-shape span{font-size:.58rem}
}

/* ==========================================================================
   Stone detail (/stone/<sku>/)
   ========================================================================== */
.cz-stone{padding:140px 0 clamp(4rem,10vh,8rem);min-height:80vh}
.cz-stone__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.cz-stone__mediawrap{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 120% at 50% 30%,#2c2030,#140e16);box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 40px 80px -50px #000}
.cz-stone__media{width:100%;height:100%;object-fit:cover}
.cz-stone__noimg{display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--champ);opacity:.5}
.cz-stone__info{position:sticky;top:100px}
.cz-stone__back{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:1.4rem}
.cz-stone__back:hover{color:var(--champ)}
.cz-stone__info h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:.4rem 0 1.6rem}
.cz-stone__specs{border-top:1px solid var(--line);margin-bottom:2rem}
.cz-stone__row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.cz-stone__row .k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.cz-stone__row .v{font-family:var(--serif);font-size:1.1rem}
.cz-stone__note{margin-top:1rem;font-size:.8rem;color:var(--mut)}
.cz-stone__empty{text-align:center;padding:4rem 0}
.cz-stone__empty h1{font-size:2.4rem;margin-bottom:1rem}
.cz-stone__empty .cz-btn{margin-top:1.5rem}
@media(max-width:880px){.cz-stone__grid{grid-template-columns:1fr}.cz-stone__info{position:static}}