/* ===========================================================
   Diamond Search — front-end styles
   Aesthetic: editorial luxury. High-contrast serif display,
   deep ink navy, warm paper, champagne accent.
   =========================================================== */
:root{
  --paper:#faf8f5;
  --card:#ffffff;
  --line:#e8e3da;
  --line-strong:#d8d2c6;
  --text:#26262b;
  --muted:#8a857a;
  --ink:#16213e;          /* overridden inline from settings */
  --accent:#b08d57;       /* overridden inline from settings */
  --accent-soft:#f3ece1;
  --shadow:0 1px 2px rgba(22,33,62,.04), 0 8px 30px rgba(22,33,62,.06);
  --radius:14px;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-weight:300; line-height:1.55;
  font-size:15px;
}
.display{font-family:var(--serif); font-weight:500; letter-spacing:.01em}
.wrap{max-width:1260px; margin:0 auto; padding:0 24px}
a{color:inherit}
button{font-family:inherit; cursor:pointer}

/* ---------- header / footer ---------- */
.site-header{border-bottom:1px solid var(--header-line); background:var(--header-bg); position:sticky; top:0; z-index:40}
.header-inner{display:flex; align-items:center; justify-content:flex-start; height:76px; gap:0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--header-fg); min-width:0}
.brand-gem{flex:0 0 auto; display:flex}
.brand-gem svg{width:30px; height:30px; display:block}
.brand-gem .gem-body{fill:var(--accent); fill-opacity:.12; stroke:var(--header-fg); stroke-width:1.5}
.brand-gem .gem-facets{stroke:var(--header-fg); stroke-opacity:.5; stroke-width:1}
.brand-gem .gem-crown{stroke:var(--accent); stroke-width:1.3}
.brand-word{font-family:var(--serif); font-weight:500; font-size:23px; letter-spacing:.04em; color:var(--header-fg); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw}
.brand-logo{max-height:46px; width:auto}
.header-actions{display:flex; align-items:center; gap:24px}
.header-phone{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--header-fg); font-size:14px; letter-spacing:.02em; transition:color .15s}
.header-phone .hp-ic{width:16px; height:16px; color:var(--accent); transition:color .15s}
.header-phone:hover{color:var(--accent)}
.header-link{text-decoration:none; color:var(--header-fg-soft); font-size:13px; letter-spacing:.06em; transition:color .15s}
.header-link:hover{color:var(--accent)}
.brand-tx{display:flex; flex-direction:column; gap:3px; min-width:0}
.brand-word{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:.03em; color:var(--header-fg); line-height:1; white-space:nowrap}
.brand-tag{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--header-fg-soft); line-height:1; white-space:nowrap}
.hdr-act{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--header-fg-soft); font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; padding:10px 14px; border-radius:3px; transition:color .15s ease, background-color .15s ease; white-space:nowrap}
.hdr-act svg{width:18px; height:18px}
.hdr-act:hover{color:var(--header-fg); background:rgba(255,255,255,0.08)}
.hdr-ic-wrap{position:relative; display:inline-flex}
.hdr-badge{position:absolute; top:-7px; right:-9px; min-width:15px; height:15px; padding:0 4px; border-radius:8px; background:var(--accent); color:#1a1206; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1}
@media (max-width:1080px){  .hdr-act span:not(.hdr-badge){display:none} .header-actions{gap:18px} }

.site-footer{margin-top:clamp(30px,4vw,52px); border-top:1px solid var(--line); background:var(--card)}
.footer-h{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0 0 12px; font-weight:600}
.trust{display:flex; gap:12px; align-items:flex-start}

/* ---------- hero ---------- */
.hero{text-align:center; padding:48px 24px 8px}
.hero h1{font-size:46px; margin:0 0 6px}
.hero-sub{color:var(--muted); margin:0 0 22px; font-size:15px; font-family:var(--sans); font-weight:400; line-height:1.5}
.type-toggle{display:inline-flex; background:color-mix(in srgb, var(--ink) 7%, var(--paper)); border:1px solid var(--line); border-radius:999px; padding:4px}
.type-opt{border:0; background:transparent; padding:9px 26px; border-radius:999px; font-size:14px; color:var(--ink); letter-spacing:.03em}
.type-opt.is-on{background:var(--ink); color:#fff}

/* ---------- filter panel ---------- */
.filters{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px; margin-top:24px}
.filter-label{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px}
.shape-row{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch}
.shape{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:74px; padding:12px 6px; border:1px solid transparent; border-radius:12px;
  background:transparent; color:var(--text); transition:transform .15s, background .15s, border-color .15s}
.shape:hover{background:color-mix(in srgb, var(--accent) 9%, var(--card)); transform:translateY(-2px)}
.shape.is-on{border-color:var(--ink); background:color-mix(in srgb, var(--accent) 15%, var(--card))}
.shape-ic{display:flex; align-items:center; justify-content:center; height:32px; color:var(--ink)}
.shape-ic svg{width:30px; height:30px; display:block}
.shape-name{font-size:12px; letter-spacing:.02em}

.filter-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px 34px; margin-top:24px;
  border-top:1px solid var(--line); padding-top:24px}
.range-inputs{display:flex; align-items:center; gap:10px}
.range-inputs input{flex:1; min-width:0; padding:11px 12px; border:1px solid var(--line-strong);
  border-radius:9px; font-family:inherit; font-size:14px; background:#fff}
.range-inputs input:focus{outline:none; border-color:var(--ink)}
.to{color:var(--muted); font-size:13px}

.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{border:1px solid var(--line-strong); background:var(--card); padding:7px 13px; border-radius:8px;
  font-size:13px; color:var(--text); letter-spacing:.02em; transition:.12s; white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- toolbar ---------- */
.toolbar{display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap}
.btn-ghost{border:0; background:none; color:var(--muted); font-size:13px; padding:6px 0}
.btn-ghost:hover{color:var(--ink)}
.result-count{flex:1; text-align:center; font-size:14px; color:var(--text)}
.result-count #resultTotal{font-weight:500; font-family:var(--serif); font-size:18px; color:var(--ink)}
.toolbar-right{display:flex; align-items:center; gap:16px}
.sort{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px}
.sort select{font-family:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; text-transform:none; letter-spacing:0; color:var(--text)}
.view-toggle{display:flex; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden}
.view-opt{border:0; background:#fff; padding:8px 11px; color:var(--muted); font-size:15px}
.view-opt.is-on{background:var(--ink); color:#fff}

/* ---------- results ---------- */
.results-area{margin-top:18px}
.results.as-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:18px}
.results.as-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card)}

/* shared media: real photo over correct-shape icon fallback (no placeholder dots) */
.thumb, .card-img{position:relative; overflow:hidden; background:#ffffff}
.thumb img, .card-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.thumb video.stone-photo, .card-img video.stone-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent}
.thumb-ico{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink); filter:drop-shadow(0 3px 5px rgba(22,33,62,.10))}

/* list / table */
.as-list .head, .as-list .row{display:grid; grid-template-columns:60px minmax(0,1.6fr) .85fr .85fr .85fr .8fr .7fr 1fr 46px; align-items:center; gap:16px}
.as-list .head{padding:13px 20px; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); background:color-mix(in srgb, var(--ink) 3%, var(--card)); border-bottom:1px solid var(--line)}
.as-list .row{position:relative; padding:14px 20px; border-bottom:1px solid var(--line); transition:background .14s}
.as-list .row:last-child{border-bottom:0}
.as-list .row:hover{background:color-mix(in srgb, var(--accent) 5%, var(--card))}
.row-link{position:absolute; inset:0; z-index:1}
.as-list .thumb{width:60px; height:60px; border-radius:12px; border:1px solid var(--line)}
.as-list .thumb-ico svg{width:30px; height:30px}
.as-list .cell{display:flex; flex-direction:column; gap:2px; min-width:0; font-size:14px; color:var(--text)}
.as-list .cell b{font-weight:500; color:var(--ink)}
.as-list .cell-shape b{font-family:var(--serif); font-size:17px}
.as-list .cell-shape .sub{font-size:11px; letter-spacing:.04em; color:var(--muted)}
.as-list .col-label{display:none}
.as-list .cell-price{font-family:var(--serif); font-size:19px; color:var(--ink)}

/* grid cards */
.card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .16s, transform .16s, border-color .16s}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--line-strong)}
.card-link{position:absolute; inset:0; z-index:1}
.card-img{aspect-ratio:1; display:block}
.card-img .thumb-ico svg{width:46%; height:46%}
.card-lab{position:absolute; top:10px; left:10px; z-index:2; background:var(--accent); color:#1a1206; font-size:9px; font-weight:700; letter-spacing:.06em; padding:3px 7px; border-radius:5px}
.card-body{display:block; padding:14px 15px 16px}
.card-name{display:block; font-family:var(--serif); font-size:18px; color:var(--ink); line-height:1.1}
.card-specs{display:block; font-size:12px; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; margin-top:5px}
.card-foot{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.card-lab-tx{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.card-price{font-family:var(--serif); font-size:20px; color:var(--ink)}

/* compare action */
.cmp-btn{position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line-strong); border-radius:9px; background:var(--card); color:var(--muted); cursor:pointer; transition:.14s; justify-self:end}
.cmp-btn svg{width:18px; height:18px}
.cmp-btn:hover{border-color:var(--ink); color:var(--ink)}
.cmp-btn.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.card .cmp-btn{position:absolute; top:10px; right:10px; background:rgba(255,255,255,.92)}
.card .cmp-btn.is-on{background:var(--ink)}
.cmp-bar{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:58; display:flex; align-items:center; gap:16px; background:var(--ink); color:#fff; padding:11px 16px 11px 20px; border-radius:999px; box-shadow:0 10px 30px rgba(22,33,62,.28); font-size:14px}
.cmp-bar b{font-family:var(--serif); font-size:17px; margin-right:3px}
.cmp-bar-clear{border:0; background:rgba(255,255,255,.16); color:#fff; padding:7px 14px; border-radius:999px; font-size:13px; letter-spacing:.04em; cursor:pointer; font-family:inherit}
.cmp-bar-clear:hover{background:rgba(255,255,255,.26)}

.results-empty{text-align:center; color:var(--muted); padding:60px 0; font-family:var(--serif); font-size:20px}
.skeleton{opacity:.45; pointer-events:none; transition:opacity .2s ease}

.pager{display:flex; justify-content:center; gap:8px; margin:28px 0; flex-wrap:wrap}
.pager button{border:1px solid var(--line-strong); background:var(--card); min-width:38px; height:38px; border-radius:var(--btn-radius); font-size:14px; color:var(--text); transition:border-color .14s, background .14s}
.pager button:hover:not(:disabled):not(.is-on){border-color:var(--ink)}
.pager button.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}
.pager button:disabled{opacity:.4}

@media (max-width:1040px){
  .as-list .head, .as-list .row{grid-template-columns:56px minmax(0,1.6fr) .9fr .9fr .9fr 1fr 46px}
  .as-list .h-hide{display:none}
}
@media (max-width:680px){
  .as-list .head{display:none}
  .as-list .row{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:14px}
  .as-list .thumb{width:54px; height:54px}
  .as-list .cell{flex-direction:row; align-items:baseline; gap:7px; font-size:13px}
  .as-list .col-label{display:inline; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .as-list .cell-shape{flex:1 1 auto; flex-direction:column; gap:1px; align-items:flex-start}
  .as-list .cell-price{order:2}
  .as-list .cmp-btn{order:3}
  .as-list .m-hide{display:none}
  .as-list .cell:not(.cell-shape):not(.cell-price){order:4; flex-basis:100%}
}

/* ---------- detail page ---------- */
.detail{padding-top:24px}
.back-link{display:inline-block; color:var(--muted); text-decoration:none; font-size:13px; letter-spacing:.06em; margin-bottom:18px}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.detail-media{display:flex; flex-direction:column; gap:12px}
.detail-media-main{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden}
.detail-media-main img{width:100%; height:100%; object-fit:cover}
.media-thumbs{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.media-thumb{width:60px; height:60px; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden; padding:0; background:#fff; cursor:pointer}
.media-thumb img{width:100%; height:100%; object-fit:cover}
.media-link{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid var(--line-strong); border-radius:9px; text-decoration:none; color:var(--ink); font-size:12.5px; letter-spacing:.04em}
.media-link:hover{border-color:var(--ink)}
.media-fallback{font-size:90px; color:var(--accent)}
.detail-cert{display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.1em; color:var(--muted)}
.verified{color:#3a8a5f}
.detail-title{font-size:34px; margin:10px 0 4px}
.detail-sub{color:var(--muted); margin:0 0 14px}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.tag{border:1px solid var(--line-strong); border-radius:6px; padding:6px 11px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.detail-price{font-family:var(--serif); font-size:38px; color:var(--ink); margin-bottom:18px}
.btn-primary{width:100%; background:var(--ink); color:#fff; border:0; padding:15px; border-radius:10px; font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px}
.btn-outline{width:100%; background:#fff; color:var(--ink); border:1px solid var(--ink); padding:14px; border-radius:10px; font-size:14px; letter-spacing:.12em; text-transform:uppercase}
.detail-specs-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-top:34px; box-shadow:var(--shadow)}
.card-title{font-family:var(--serif); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); margin:0 0 18px}
.specs-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 50px}
.spec{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.spec span{color:var(--muted)}
.spec b{font-weight:500}

/* ---------- auth ---------- */
.auth-screen{display:flex; justify-content:center; padding:60px 24px}
.auth-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:40px; width:100%; max-width:420px; text-align:center}
.auth-card h1{font-size:34px; margin:0}
.auth-sub{color:var(--muted); margin:6px 0 22px}
.auth-card form{display:flex; flex-direction:column; gap:14px; text-align:left}
.auth-card label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; flex-direction:column; gap:7px; text-align:left}
.auth-card input{padding:12px 13px; border:1px solid var(--line-strong); border-radius:10px; font-family:inherit; font-size:15px; text-align:left; background:var(--card); color:var(--text); transition:border-color .14s}
.auth-card input:hover{border-color:var(--ink)}
.alert{background:#fbeceb; color:#9a3b32; border:1px solid #efcfca; padding:11px 14px; border-radius:9px; font-size:13px; margin-bottom:8px}

/* ---------- mobile ---------- */
.mobile-filter-fab{display:none}
@media (max-width:900px){
  .footer-brand{grid-column:1 / -1}
  .filter-grid{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr; gap:24px}
  .specs-cols{grid-template-columns:1fr}
  .as-list .row, .as-list .head{grid-template-columns:54px 1fr 70px 90px}
  .as-list .head .h-hide, .as-list .cell.hide{display:none}
}
@media (max-width:620px){
  body{font-size:14px}
  .wrap{padding:0 16px}
  .hero h1{font-size:34px}
  .filter-grid{grid-template-columns:1fr}
  /* Filter panel becomes a bottom sheet on mobile */
  .filters{position:fixed; left:0; right:0; bottom:0; top:auto; max-height:88vh; overflow:auto;
    border-radius:18px 18px 0 0; margin:0; transform:translateY(100%); transition:transform .25s ease; z-index:60}
  .filters.open{transform:translateY(0)}
  .filters::before{content:""; display:block; width:42px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto 18px}
  .mobile-filter-fab{display:block; position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:55;
    background:var(--ink); color:#fff; border:0; padding:13px 30px; border-radius:999px; font-size:14px; letter-spacing:.1em;
    box-shadow:0 8px 24px rgba(22,33,62,.3)}
  .toolbar-right{width:100%; justify-content:space-between}
  .as-list .row, .as-list .head{grid-template-columns:54px 1fr 90px}
  .as-list .cell.m-hide{display:none}
  .detail-title{font-size:28px}
}

/* ---- Single-password gate mark (v0.2.1) ---- */
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:20px}
.auth-gem{display:inline-flex} .auth-gem svg{width:54px; height:54px}
.auth-brand-tx{display:flex; flex-direction:column; align-items:center; gap:4px}
.auth-brand-name{font-family:var(--serif); font-size:27px; color:var(--ink); line-height:1.05; letter-spacing:.01em; text-align:center}
.auth-brand-tag{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:600}

/* ---------- style-editor driven settings (v0.2.11) ---------- */
:root{ --btn-radius:10px }
.btn-primary, .btn-outline{ border-radius:var(--btn-radius) }
.chip{ border-radius:var(--btn-radius) }
.card .img{ position:relative }
.card-lab{ position:absolute; top:8px; left:8px; background:var(--accent); color:#1a1206;
  font-size:9px; font-weight:700; letter-spacing:.06em; padding:3px 7px; border-radius:5px; line-height:1 }
body.no-lab-badge .lab-badge{ display:none }
body.no-lab-badge .card-lab{ display:none }
body.no-shape-icons .shape-ic{ display:none }

/* ===========================================================
   Diamond Detail — premium redesign (v0.2.17)
   =========================================================== */
.det{padding:22px 0 10px}
.det-back{display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px}
.det-back svg{width:16px; height:16px} .det-back:hover{color:var(--ink)}

.det-top{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:44px; align-items:start}
.det-gallery{display:grid; grid-template-columns:66px 1fr; gap:16px}
.det-rail{display:flex; flex-direction:column; gap:12px}
.det-railbtn{display:flex; flex-direction:column; align-items:center; gap:5px; border:0; background:none; cursor:pointer; color:var(--muted); padding:0}
.det-railic{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--line-strong); border-radius:12px; background:#fff; transition:.14s}
.det-railic svg{width:22px; height:22px}
.det-railbtn i{font-style:normal; font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; text-align:center; line-height:1.2}
.det-railbtn:hover .det-railic{border-color:var(--ink); color:var(--ink)}
.det-railbtn.is-on{color:var(--ink)} .det-railbtn.is-on .det-railic{border-color:var(--ink); background:var(--accent-soft); color:var(--ink)}

.det-viewer{position:relative; aspect-ratio:1; background:linear-gradient(160deg,#f5f6f8,#eceef2); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.det-viewer img{width:100%; height:100%; object-fit:cover}
.det-expand{position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border:1px solid var(--line-strong); background:rgba(255,255,255,.9); border-radius:9px; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center}
.det-expand svg{width:17px; height:17px}
.det-fallback,.det-vfallback{font-size:90px; color:var(--accent)}
.det-ha{width:78%; max-width:340px} .det-ha svg{width:100%; height:auto}

.det-certrow{display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.06em}
.det-certno{color:var(--muted)}
.det-verified{display:inline-flex; align-items:center; gap:5px; color:#2e8b57; font-weight:500}
.det-verified svg{width:15px; height:15px}
.det-title{font-size:32px; line-height:1.12; margin:12px 0 6px; color:var(--ink)}
.det-sub{color:var(--muted); margin:0 0 16px; font-size:14.5px}
.det-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.det-tags .tag{border:1px solid var(--line-strong); border-radius:7px; padding:6px 12px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--card)}
.det-price{font-family:var(--serif); font-size:38px; color:var(--ink); line-height:1; margin-bottom:6px}
.det-finance{color:var(--muted); font-size:13.5px; margin:0 0 20px} .det-finance b{color:var(--ink); font-weight:500}
.det-compare{display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; text-transform:none; letter-spacing:.04em; font-size:14px; padding:14px}
.det-compare svg{width:18px; height:18px}

.det-services{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0 20px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.det-service{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.det-service-ic{display:flex; align-items:center; justify-content:center; color:var(--ink)} .det-service-ic svg{width:24px; height:24px}
.det-service i{font-style:normal; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); line-height:1.35}
.det-riskfree{display:flex; align-items:center; gap:11px}
.det-rf-ic{color:var(--accent)} .det-rf-ic svg{width:24px; height:24px}
.det-riskfree b{display:block; font-size:13px; color:var(--ink); font-weight:500}
.det-riskfree span{font-size:12px; color:var(--muted)}

.det-cards{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:38px}
.det-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow)}
.det-card-h{font-family:var(--serif); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); margin:0 0 20px}
.det-specs{display:grid; grid-template-columns:1fr 1fr; gap:0 44px}
.det-spec{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.det-spec span{color:var(--muted)} .det-spec b{font-weight:500; color:var(--ink); text-align:right}
.det-spec a{color:var(--accent); text-decoration:none} .det-spec a:hover{text-decoration:underline}
.det-gia-btn{display:inline-flex; align-items:center; gap:9px; margin-top:22px; border:1px solid var(--line-strong); border-radius:10px; padding:12px 18px; text-decoration:none; color:var(--ink); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase}
.det-gia-btn svg{width:16px; height:16px} .det-gia-btn svg:last-child{width:14px; height:14px; color:var(--muted)}
.det-gia-btn:hover{border-color:var(--ink)}

.det-vtabs{display:flex; border:1px solid var(--line); border-radius:10px; padding:4px; gap:4px; margin-bottom:18px}
.det-vtab{flex:1; border:0; background:none; padding:9px; border-radius:7px; font-family:inherit; font-size:12.5px; letter-spacing:.04em; color:var(--muted); cursor:pointer; transition:.14s}
.det-vtab.is-on{background:var(--ink); color:#fff}
.det-vstagewrap{background:linear-gradient(160deg,#f5f6f8,#eceef2); border:1px solid var(--line); border-radius:12px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden}
.det-vstage{width:100%; height:100%; display:flex; align-items:center; justify-content:center}
.det-vstage img{width:100%; height:100%; object-fit:cover}
.det-vstage svg{height:84%; width:auto}

.det-lp{margin-top:22px}
.det-lp-head{display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.det-lp-head b{color:var(--ink); font-weight:600; letter-spacing:.02em}
.det-lp-bar{height:8px; border-radius:999px; background:#e7e2d8; overflow:hidden}
.det-lp-bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),#8a6a3c)}
.det-lp-note{font-size:11px; color:var(--muted); margin-top:7px; font-style:italic}

.det-prop{margin-top:26px}
.det-prop-h{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:8px}
.det-prop-svg{width:100%; height:auto}
.det-prop-tx{fill:var(--ink); font-size:9.5px; font-family:var(--sans); letter-spacing:.02em}
.det-prop-tx2{fill:var(--muted); font-size:9px; font-family:var(--sans)}

.det-similar-sec{margin-top:46px}
.det-similar-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.det-similar-head .det-card-h{margin:0}
.det-viewall{display:inline-flex; align-items:center; gap:5px; color:var(--ink); text-decoration:none; font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.det-viewall svg{width:15px; height:15px} .det-viewall:hover{color:var(--accent)}
.det-similar{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.det-sim-loading{grid-column:1/-1; color:var(--muted); font-size:14px; padding:30px 0; text-align:center}
.det-sim-card{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:13px; padding:12px; background:var(--card); transition:.15s}
.det-sim-card:hover{box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--line-strong)}
.det-sim-img{position:relative; aspect-ratio:1; background:linear-gradient(160deg,#f5f6f8,#eceef2); border-radius:9px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:11px}
.det-sim-img img{width:100%; height:100%; object-fit:cover}
.det-sim-ph{font-size:34px; color:var(--accent)}
.det-sim-lab{position:absolute; top:7px; left:7px; background:var(--accent); color:#1a1206; font-size:8px; font-weight:700; letter-spacing:.06em; padding:2px 6px; border-radius:5px}
.det-sim-specs{font-size:11px; letter-spacing:.02em; color:var(--muted); text-align:center; margin-bottom:6px}
.det-sim-price{font-family:var(--serif); font-size:18px; color:var(--ink); text-align:center}

@media (max-width:980px){
  .det-top{grid-template-columns:1fr; gap:30px}
  .det-cards{grid-template-columns:1fr}
  .det-similar{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  .det-gallery{grid-template-columns:1fr} .det-rail{flex-direction:row; flex-wrap:wrap; order:2}
  .det-specs{grid-template-columns:1fr}
  .det-services{grid-template-columns:1fr 1fr}
  .det-similar{grid-template-columns:1fr 1fr}
  .det-title{font-size:26px}
}

/* ===========================================================
   Branding consistency (v0.2.18) — button style flows through
   the whole search UI; shape tiles cap pill radius so they stay
   tile-shaped. All driven by the Style Editor's --btn-radius.
   =========================================================== */
.shape{ border-radius:min(var(--btn-radius), 16px) }
.type-toggle, .type-opt{ border-radius:var(--btn-radius) }
.view-toggle, .sort select, .pager button{ border-radius:var(--btn-radius) }
.mobile-filter-fab{ border-radius:var(--btn-radius) }

@media (max-width:560px){
  .header-inner{height:64px}
  .brand-gem svg{width:26px; height:26px}
  .brand-word{font-size:19px; max-width:52vw; letter-spacing:.02em}
  .brand-tag{display:none}
  .header-actions{gap:16px}
  .header-phone .hp-tx{display:none}
}

/* ===========================================================
   Competitor-level search: sidebar + dual-range sliders (v0.2.20)
   =========================================================== */
.search-layout{display:grid; grid-template-columns:288px minmax(0,1fr); gap:34px; align-items:start; padding-top:8px; padding-bottom:44px}
.sidebar-head{display:flex; align-items:center; justify-content:space-between; padding:16px 0 12px; border-bottom:1px solid var(--line)}
.sidebar-title{font-family:var(--serif); font-size:19px; color:var(--ink)}
.sidebar-reset{border:0; background:none; color:var(--accent); font-size:12px; letter-spacing:.04em; cursor:pointer; font-family:inherit}
.sidebar-reset:hover{text-decoration:underline}
.fsec{padding:16px 0; border-bottom:1px solid var(--line)}
.fsec:last-child{border-bottom:0}
.fsec-h{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); font-weight:500; margin-bottom:13px}


.shape-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.shape-grid .shape{width:auto; padding:10px 4px; gap:6px}
.shape-grid .shape .shape-ic{height:28px}
.shape-grid .shape .shape-ic svg{width:26px; height:26px}
.shape-grid .shape .shape-name{font-size:10.5px; letter-spacing:0}

/* dual-range slider */
.rng-vals{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink); font-weight:500; margin-bottom:10px}
.rng-inputs{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.rng-iwrap{position:relative; flex:1; display:flex; align-items:center}
.rng-iwrap i{position:absolute; left:10px; font-style:normal; color:var(--muted); font-size:13px; pointer-events:none}
.rng-iwrap input{width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:8px; font-family:inherit; font-size:13px; color:var(--text); background:#fff}
.rng-iwrap input:focus{outline:none; border-color:var(--ink)}
.rng-num[data-kind="price"] .rng-iwrap input{padding-left:20px}
.rng-dash{color:var(--muted)}
.rng-track{position:relative; height:26px}
.rng-rail{position:absolute; top:50%; left:0; right:0; height:4px; transform:translateY(-50%); background:var(--line-strong); border-radius:999px}
.rng-fill{position:absolute; top:50%; height:4px; transform:translateY(-50%); background:var(--accent); border-radius:999px}
.rng-track input[type=range]{position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:20px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none}
.rng-track input[type=range]:focus{outline:none}
.rng-track input[type=range]::-webkit-slider-runnable-track{background:transparent; border:0; height:20px}
.rng-track input[type=range]::-moz-range-track{background:transparent; border:0}
.rng-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--ink); box-shadow:0 1px 4px rgba(22,33,62,.28); cursor:pointer}
.rng-track input[type=range]::-moz-range-thumb{pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--ink); box-shadow:0 1px 4px rgba(22,33,62,.28); cursor:pointer}
.rng-track input[type=range]:active::-webkit-slider-thumb{border-color:var(--accent)}
.rng-track input[type=range]:active::-moz-range-thumb{border-color:var(--accent)}

/* advanced (collapsible) */
.fsec-adv-h{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); font-weight:500}
.fsec-adv-h::-webkit-details-marker{display:none}
.fsec-adv-ic{position:relative; width:14px; height:14px; flex:0 0 auto}
.fsec-adv-ic::before,.fsec-adv-ic::after{content:""; position:absolute; background:var(--accent); border-radius:2px}
.fsec-adv-ic::before{left:0; right:0; top:6px; height:2px}
.fsec-adv-ic::after{top:0; bottom:0; left:6px; width:2px; transition:transform .2s}
.fsec-adv[open] .fsec-adv-ic::after{transform:scaleY(0)}
.fsec-adv-body{margin-top:14px}
.fsub{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:12px 0 7px}
.fsub:first-child{margin-top:0}

/* main column */
.search-main{min-width:0}
.search-main .toolbar{margin-top:0; justify-content:space-between}
.result-count{font-size:14px; color:var(--muted)}
.result-count b{font-family:var(--serif); font-size:22px; color:var(--ink); margin-right:5px}

@media (max-width:920px){
  .search-layout{grid-template-columns:1fr; gap:0; padding-top:0}
  .mobile-filter-fab{display:block; position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:55; background:var(--ink); color:#fff; border:0; padding:13px 32px; font-size:14px; letter-spacing:.1em; border-radius:var(--btn-radius); box-shadow:0 8px 24px rgba(22,33,62,.22)}
}

/* Shape-icon fallbacks on detail page (v0.2.22) */
.det-sim-img img{position:absolute; inset:0}
.det-sim-ico{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink)}
.det-sim-ico svg{width:46%; height:46%}
.det-fallback svg, .det-vfallback svg{width:46%; height:auto; max-width:150px; color:var(--ink)}

/* ===========================================================
   Wholesale flow — stepper, filter card, table, preview shelf,
   compare tab (v0.2.23). Storefront-branded (navy/gold).
   =========================================================== */
.ds-flow{padding-top:22px}
.ds-steps{display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.ds-step{display:flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.04em; color:var(--muted)}
.ds-step + .ds-step::before{content:"›"; margin-right:10px; color:var(--line-strong)}
.ds-step-n{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-strong); font-size:12px; color:var(--muted)}
.ds-step.is-active{color:var(--ink); font-weight:500}
.ds-step.is-active .ds-step-n{background:var(--ink); border-color:var(--ink); color:#fff}

.ds-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:20px 2px 14px}
.ds-head-tx h1{font-size:38px; margin:0}
.ds-head .hero-sub{margin:6px 0 0}
.ds-head .type-toggle{flex:0 0 auto}
.ds-head .type-toggle .type-opt{flex:1 1 0; min-width:108px; text-align:center; justify-content:center}

.ds-filtercard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 24px; margin-top:4px}
.ds-shapes{display:grid; grid-template-columns:repeat(auto-fit, minmax(86px, 1fr)); gap:10px; margin-bottom:16px}
.ds-shapes .shape{width:100%; padding:12px 6px 9px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:0 1px 4px rgba(22,33,62,.05); gap:7px; transition:.15s}
.ds-shapes .shape-ic{width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--ink)}
.ds-shapes .shape-ic svg{width:38px; height:38px}
.ds-shapes .shape-png{width:100%; height:100%; object-fit:contain; padding:6%; filter:drop-shadow(0 3px 5px rgba(22,33,62,.10))}
.ds-shapes .shape-name{font-size:11px; letter-spacing:.02em; color:var(--muted)}
.ds-shapes .shape:hover{border-color:var(--line-strong); box-shadow:0 6px 16px rgba(22,33,62,.08); transform:translateY(-2px)}
.ds-shapes .shape.is-on{border-color:var(--ink); background:color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow:0 0 0 1px var(--ink), 0 6px 16px rgba(22,33,62,.1)}
.ds-shapes .shape.is-on .shape-name{color:var(--ink); font-weight:500}

.ds-sliders{display:grid; grid-template-columns:repeat(4,1fr); gap:14px 26px}
.ds-field-h{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); font-weight:500; margin-bottom:10px}
.ds-cut{margin-top:16px}
.ds-pills .chip{padding:8px 16px}
.ds-adv{margin-top:14px; border-top:1px solid var(--line); padding-top:14px}
.ds-adv-h{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:500}
.ds-adv-h::-webkit-details-marker{display:none}
.ds-adv-ic{position:relative; width:13px; height:13px}
.ds-adv-ic::before,.ds-adv-ic::after{content:""; position:absolute; background:var(--accent); border-radius:2px}
.ds-adv-ic::before{left:0; right:0; top:5.5px; height:2px}
.ds-adv-ic::after{top:0; bottom:0; left:5.5px; width:2px; transition:transform .2s}
.ds-adv[open] .ds-adv-ic::after{transform:scaleY(0)}
.ds-adv-body{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 28px; margin-top:16px}
.ds-filter-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.ds-btn-ghost{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); padding:9px 16px; border-radius:var(--btn-radius); font-family:inherit; font-size:13px; letter-spacing:.03em; cursor:pointer; transition:.14s}
.ds-btn-ghost svg{width:16px; height:16px; color:var(--accent)}
.ds-btn-ghost:hover{border-color:var(--ink)}

.ds-activechips{display:flex; flex-wrap:wrap; gap:8px; padding-top:16px}
.achip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink); padding:6px 8px 6px 12px; border-radius:999px; font-size:12.5px; cursor:pointer; transition:.14s}
.achip .achip-x{display:inline-flex} .achip .achip-x svg{width:13px; height:13px; color:var(--muted)}
.achip:hover{border-color:var(--ink)} .achip:hover .achip-x svg{color:var(--ink)}
.achip-clear{color:var(--accent); padding:6px 12px}

.ds-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px}
.ds-tabs{display:inline-flex; gap:4px; background:color-mix(in srgb, var(--ink) 5%, var(--card)); border:1px solid var(--line); border-radius:12px; padding:4px}
.ds-tab{border:0; background:none; padding:8px 18px; border-radius:9px; font-family:inherit; font-size:13.5px; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.ds-tab.is-on{background:var(--ink); color:#fff}
.ds-tab-count{font-size:13.5px; font-weight:600; color:var(--accent)}
.ds-tab.is-on .ds-tab-count{color:#fff}
.ds-bar-right{display:flex; align-items:center; gap:18px; flex-wrap:wrap}

.ds-main{display:grid; grid-template-columns:minmax(0,1fr) 436px; gap:28px; align-items:start; padding-top:16px; padding-bottom:48px}
.ds-results-col{min-width:0}
.ds-main.cmp-mode{grid-template-columns:1fr}
.ds-main.cmp-mode .ds-shelf{display:none}

/* wholesale table rows */
.as-list .whead, .as-list .wrow{display:grid; grid-template-columns:minmax(0,2fr) .8fr .85fr .85fr .8fr .7fr 1fr 78px; align-items:center; gap:14px}
.as-list .whead{padding:13px 24px; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); background:color-mix(in srgb, var(--ink) 3%, var(--card)); border-bottom:1px solid var(--line)}
.as-list .wrow{position:relative; padding:16px 24px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .14s}
.as-list .wrow:last-child{border-bottom:0}
.as-list .wrow:hover{background:color-mix(in srgb, var(--accent) 5%, var(--card))}
.as-list .wrow.is-sel{background:color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow:inset 3px 0 0 var(--accent)}
.as-list .wc-shape{display:flex; align-items:center; gap:13px; min-width:0}
.as-list .wc-thumb{width:46px; height:46px; border-radius:10px; border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), 0 1px 2px rgba(22,33,62,.05); flex:0 0 auto}
.as-list .wc-shape-tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.as-list .wc-thumb .thumb-ico svg{width:28px; height:28px}
.as-list .wcell{min-width:0; font-size:14px; color:var(--text)}
.as-list .wc-shape b{font-family:var(--serif); font-size:17px; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.as-list .wc-shape .sub{font-size:11px; letter-spacing:.04em; color:var(--muted)}
.as-list .wc-price{font-family:var(--serif); font-size:19px; color:var(--ink)}
.as-list .wc-act{display:flex; gap:6px; justify-content:flex-end}

/* grid cards */
.as-grid .wcard{position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:.16s}
.as-grid .wcard:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--line-strong)}
.as-grid .wcard.is-sel{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink), var(--shadow)}
.as-grid .card-img{aspect-ratio:1; display:block; background:#f4f2ee}
.as-grid .card-img .thumb-ico svg{width:46%; height:46%}
.as-grid .card-fav{position:absolute; top:10px; right:10px}
.as-grid .wcard-body{display:block; padding:14px 15px 15px}
.as-grid .card-name{display:block; font-family:var(--serif); font-size:18.5px; color:var(--ink); line-height:1.15}
.as-grid .card-specs{display:block; font-size:11.5px; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; margin-top:4px}
.as-grid .card-foot{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line)}
.as-grid .card-lab-tx{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.as-grid .card-price{font-family:var(--serif); font-size:20px; color:var(--ink); white-space:nowrap}
.as-grid .wcard-cmp{display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:12px; padding:9px 10px; background:var(--card); color:var(--ink); border:1px solid var(--line-strong); border-radius:9px; font-family:inherit; font-size:11px; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:background .14s, border-color .14s, color .14s}
.as-grid .wcard-cmp svg{width:15px; height:15px}
.as-grid .wcard-cmp:hover{border-color:var(--ink)}
.as-grid .wcard-cmp.is-on{background:var(--ink); border-color:var(--ink); color:#fff}

/* action buttons */
.ico-btn{display:inline-flex; align-items:center; justify-content:center; width:33px; height:33px; border:1px solid var(--line-strong); border-radius:9px; background:var(--card); color:var(--muted); cursor:pointer; transition:.14s; position:relative; z-index:2}
.ico-btn svg{width:17px; height:17px}
.ico-btn:hover{border-color:var(--ink); color:var(--ink)}
.fav-btn.is-on{color:#c0392b; border-color:#e6b8b2; background:#fdecea}
.fav-btn.is-on svg{fill:#c0392b}
.cmp-btn.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.card-fav .ico-btn{background:rgba(255,255,255,.92)}

/* preview shelf */
.ds-shelf{position:sticky; top:92px}
.ds-shelf-inner{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.ds-shelf-empty{padding:48px 24px; text-align:center; color:var(--muted)}
.ds-shelf-empty-ic{display:inline-flex; color:var(--accent)} .ds-shelf-empty-ic svg{width:46px; height:46px}
.ds-shelf-empty p{margin:14px 0 0; font-size:13.5px}
.shelf-media{padding:16px 16px 0}
.shelf-img{position:relative; aspect-ratio:1; background:#f4f2ee; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(22,33,62,.06)}
.shelf-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.shelf-img img.stone-photo, .shelf-img video.stone-photo, .shelf-img .shelf-poster{object-fit:contain}
.shelf-img .thumb-ico{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink); filter:drop-shadow(0 6px 12px rgba(22,33,62,.14))}
.shelf-img .thumb-ico svg{width:56%; height:56%}
.shelf-icobtn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line-strong); border-radius:9px; background:var(--card); color:var(--ink); cursor:pointer}
.shelf-icobtn svg{width:18px; height:18px}
.shelf-mbtns{display:flex; gap:8px; padding:16px 0 2px}
.shelf-mbtns .shelf-icobtn{flex:1; width:auto; height:auto; min-height:44px; flex-direction:row; gap:7px; padding:9px 6px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; transition:.15s}
.shelf-mbtns .shelf-icobtn span{display:inline}
.shelf-mbtns .shelf-icobtn:hover{border-color:var(--ink)}
.shelf-mbtns .shelf-icobtn.is-on{border-color:var(--ink); background:color-mix(in srgb, var(--accent) 12%, var(--card)); color:var(--ink)}
.shelf-meta{padding:16px 24px 26px}
.shelf-skuline{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.shelf-lab{color:var(--ink); font-weight:500}
.shelf-title{font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ink); margin:10px 0 5px; line-height:1.15}
.shelf-price{font-family:var(--serif); font-size:28px; color:var(--ink); margin-bottom:16px}
.shelf-specs{display:grid; grid-template-columns:1fr 1fr; column-gap:24px; border-top:1px solid var(--line); margin-bottom:16px}
.shelf-spec--wide{grid-column:1 / -1}
.shelf-spec{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px}
.shelf-spec span{color:var(--muted)} .shelf-spec b{font-weight:500; color:var(--ink)}
.shelf-actions{display:flex; flex-direction:column; gap:9px}
.shelf-btn-primary{width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; border:0; padding:13px; border-radius:var(--btn-radius); font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; font-family:inherit}
.shelf-btn-outline{width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--card); color:var(--ink); border:1px solid var(--ink); padding:12px; border-radius:var(--btn-radius); font-size:13px; letter-spacing:.06em; cursor:pointer; font-family:inherit}
.shelf-btn-outline svg{width:17px; height:17px}
.shelf-btn-outline.is-on{background:var(--ink); color:#fff}
.shelf-details{display:inline-block; margin-top:13px; color:var(--accent); text-decoration:none; font-size:13px; letter-spacing:.03em}
.shelf-details:hover{text-decoration:underline}

/* compare tab */
.ds-cmp-table{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card)}
.ds-cmp-empty{text-align:center; padding:60px 20px; color:var(--ink)}
.ds-cmp-empty p{font-family:var(--serif); font-size:20px; margin:0 0 6px}
.ds-cmp-empty span{color:var(--muted); font-size:14px}
.ds-cmp-foot{padding:16px 20px; display:flex; justify-content:flex-end}
.cmp-remove.is-on, .cmp-remove{color:var(--muted)}
.cmp-remove:hover{border-color:#c0392b; color:#c0392b}

/* toast */
.ds-toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px); z-index:80; background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-size:13.5px; letter-spacing:.02em; box-shadow:0 10px 30px rgba(22,33,62,.3); opacity:0; transition:opacity .22s, transform .22s; pointer-events:none}
.ds-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (max-width:1100px){
  .ds-main{grid-template-columns:1fr}
  .ds-shelf{position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(100%); transition:transform .26s ease; max-height:84vh; overflow:auto; border-radius:18px 18px 0 0}
  .ds-shelf.open{transform:translateY(0)}
  .ds-shelf-inner{border-radius:18px 18px 0 0; border-bottom:0}
  .mobile-filter-fab#shelfFab:not([hidden]){display:block; position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:55; background:var(--ink); color:#fff; border:0; padding:13px 30px; border-radius:var(--btn-radius); font-size:14px; letter-spacing:.08em; box-shadow:0 8px 24px rgba(22,33,62,.22)}
}
@media (max-width:1100px){ .ds-sliders{grid-template-columns:repeat(2,1fr)} .ds-adv-body{grid-template-columns:1fr} }
@media (max-width:1040px){
  .as-list .whead, .as-list .wrow{grid-template-columns:minmax(0,2fr) .9fr .9fr .9fr 1fr 78px}
  .as-list .h-hide{display:none}
}
@media (max-width:680px){
  .ds-head h1{font-size:30px}
  .as-list .whead{display:none}
  .as-list .wrow{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:14px}
  .as-list .wrow .thumb{width:52px; height:52px}
  .as-list .wcell{font-size:13px}
  .as-list .wcell[data-l]::before{content:attr(data-l) " "; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:5px}
  .as-list .wc-shape{flex:1 1 auto}
  .as-list .wc-shape::before{display:none}
  .as-list .m-hide{display:none}
  .as-list .wc-price{order:2}
  .as-list .wc-act{order:3}
  .as-list .wcell[data-l="Carat"]{order:4; flex-basis:100%}
}

/* Real diamond photo assets (assets/Diamond/diamond-<shape>.png): contain, white box, no crop */
.thumb .shape-photo, .card-img .shape-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:9%; filter:drop-shadow(0 4px 7px rgba(22,33,62,.10))}
.shelf-img .shape-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:11%; filter:drop-shadow(0 8px 14px rgba(22,33,62,.12))}

/* Shelf media: 360 viewer + labeled media buttons (v0.2.28) */
.shelf-360{position:absolute; top:50%; left:50%; width:500px; height:500px; border:0; overflow:hidden; background:transparent; transform:translate(-50%,-50%) scale(var(--shelf-scale, .72)); transform-origin:center center}
.shelf-360-video{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; background:transparent; display:block}
.shelf-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%; display:block}
.shelf-img[data-mode="360"]{background:#ffffff; overflow:hidden}
.shelf-mbtns .shelf-icobtn{flex:1; flex-direction:column; gap:4px; min-width:0; height:auto; padding:10px 8px}
.shelf-mbtns .shelf-icobtn span{font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); line-height:1}
.shelf-mbtns .shelf-icobtn:hover{border-color:var(--ink)}
.shelf-mbtns .shelf-icobtn.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.shelf-mbtns .shelf-icobtn.is-on span{color:#fff}
.shelf-mbtns .shelf-icobtn.fav-btn.is-on{background:#fdecea; border-color:#e6b8b2; color:#c0392b}
.shelf-mbtns .shelf-icobtn.fav-btn.is-on span{color:#c0392b}
.shelf-mbtns .shelf-icobtn.fav-btn.is-on svg{fill:#c0392b}

/* ===================== mobile responsiveness (v0.2.41) ===================== */

/* preview bottom-sheet: drag handle + close button (only when shelf is a sheet) */
.ds-shelf-mhead{display:none}
@media (max-width:1100px){
  .ds-shelf-mhead{position:sticky; top:0; z-index:4; display:flex; align-items:center; justify-content:center;
    background:var(--card); padding:10px 0 8px; border-bottom:1px solid var(--line); border-radius:18px 18px 0 0}
  .ds-shelf-grab{width:42px; height:5px; border-radius:3px; background:var(--line-strong)}
  .ds-shelf-close{position:absolute; top:7px; right:12px; width:32px; height:32px; border-radius:50%;
    border:1px solid var(--line); background:var(--card); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
  .ds-shelf-close svg{width:17px; height:17px}
  .ds-shelf-inner{border-radius:0}
}

@media (max-width:760px){
  .wrap{padding:0 18px}
  .ds-sliders{grid-template-columns:repeat(2,1fr); gap:18px 22px}
  .ds-adv-body{grid-template-columns:1fr}
}

/* phones */
@media (max-width:600px){
  .wrap{padding:0 14px}

  /* stepper */
  .ds-flow{padding-top:16px}
  .ds-steps{gap:6px 10px}
  .ds-step{font-size:11.5px; gap:7px}
  .ds-steps{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .ds-step:not(.is-active) .ds-step-tx{display:none}
  .ds-step-n{width:22px; height:22px}

  /* heading + natural/lab toggle */
  .ds-head{padding:14px 2px 12px; gap:14px}
  .ds-head h1, .ds-head .display{font-size:27px; line-height:1.1}
  .ds-head .ds-head-tx{flex:1 1 100%}
  .ds-head .type-toggle{flex:1 1 100%; width:100%; justify-content:center}
  .ds-head .type-opt{flex:1; text-align:center}

  /* filter card */
  .ds-filtercard{padding:18px 15px; border-radius:14px}
  .ds-shapes{gap:8px; margin-bottom:18px}
  .ds-shapes .shape{width:72px; padding:10px 4px 8px}
  .ds-shapes .shape-ic{width:36px; height:36px}
  .ds-shapes .shape-ic svg{width:32px; height:32px}
  .ds-sliders{grid-template-columns:1fr; gap:18px}
  .ds-cut{margin-top:18px}
  .ds-adv{margin-top:16px}
  .ds-adv-body{grid-template-columns:1fr; gap:14px}
  .ds-filter-actions{flex-wrap:wrap; gap:10px; justify-content:stretch}
  .ds-filter-actions .ds-btn-ghost{flex:1 1 auto; justify-content:center; padding:11px 14px}

  /* results bar */
  .ds-bar{gap:12px; padding-top:18px}
  .ds-bar-right{gap:12px; width:100%; justify-content:space-between}
  .ds-tabs{flex:0 0 auto}

  /* results: two compact cards per row */
  .results.as-grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .as-grid .wcard-body{padding:11px 12px 12px}
  .as-grid .card-name{font-size:16px}
  .as-grid .card-specs{font-size:10.5px; margin-top:3px}
  .as-grid .card-foot{margin-top:9px; padding-top:9px}
  .as-grid .card-price{font-size:17px}
  .as-grid .wcard-cmp{margin-top:10px; padding:8px; font-size:10px}

  /* keep last rows/cards clear of the floating "View selected" button */
  .ds-main{padding-bottom:92px}
}

/* small phones */
@media (max-width:400px){
  .brand-word{font-size:17px; max-width:44vw}
  .header-actions{gap:13px}
  .header-inner{height:60px}
  .ds-head h1, .ds-head .display{font-size:24px}
  .ds-filtercard{padding:16px 13px}
  .ds-shapes .shape{width:64px; padding:9px 3px 7px}
  .ds-shapes .shape-ic{width:32px; height:32px}
  .ds-shapes .shape-ic svg{width:28px; height:28px}
  .results.as-grid{gap:10px}
  .as-grid .card-name{font-size:15px}
  .as-grid .card-price{font-size:16px}
}

/* ===================== Favorites & Compare pages (v0.2.42) ===================== */
.fc-head{padding-top:28px}
.fc-sub{margin:6px 0 0; color:var(--muted); font-size:14px}
.fc-back{align-self:center; white-space:nowrap}
.fc-wrap{padding-top:18px; padding-bottom:60px}
.fc-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.fc-count{font-size:12px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.fc-empty{display:flex; flex-direction:column; align-items:center; gap:6px}
.fc-empty-ic{color:var(--accent)} .fc-empty-ic svg{width:46px; height:46px}
.fc-empty-btn{display:inline-flex; align-items:center; justify-content:center; width:auto; margin-top:18px; padding:12px 28px; text-decoration:none}
@media (max-width:600px){
  .fc-head{flex-wrap:wrap; gap:12px; padding-top:18px}
  .fc-back{align-self:flex-start}
}

/* ===================== About Us page (v0.2.43) ===================== */
.abt-hero{max-width:760px; padding-top:40px}
.abt-eyebrow{display:inline-block; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px}
.abt-title{font-size:42px; line-height:1.1; color:var(--ink); margin:0 0 18px}
.abt-lead{font-size:16px; line-height:1.7; color:var(--text)}
.abt-values{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-top:36px}
.abt-card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:24px 22px}
.abt-ic{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:color-mix(in srgb, var(--accent) 12%, var(--card)); color:var(--accent); margin-bottom:14px}
.abt-ic svg{width:24px; height:24px}
.abt-card h3{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink); margin:0 0 7px}
.abt-card p{font-size:13.5px; line-height:1.6; color:var(--muted); margin:0}
.abt-story{max-width:820px; padding-top:48px}
.abt-h2{font-family:var(--serif); font-weight:600; font-size:27px; color:var(--ink); margin:0 0 12px}
.abt-story p{font-size:15px; line-height:1.8; color:var(--text); margin:0}
.abt-cta{padding-top:44px; padding-bottom:64px}
.abt-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:var(--ink); border-radius:18px; padding:34px 36px}
.abt-cta-inner .abt-h2, .abt-cta-tx p{color:#f6f3ee}
.abt-cta-tx p{margin:0 0 16px; opacity:.82; font-size:14.5px}
.abt-contacts{display:flex; gap:22px; flex-wrap:wrap}
.abt-contact{display:inline-flex; align-items:center; gap:9px; color:#f6f3ee; text-decoration:none; font-size:14.5px; transition:color .15s}
.abt-contact svg{width:18px; height:18px; color:var(--accent)}
.abt-contact:hover{color:var(--accent)}
.abt-browse{width:auto; flex:0 0 auto; padding:14px 32px; text-decoration:none; display:inline-flex; align-items:center}

@media (max-width:900px){ .abt-values{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){
  .abt-hero{padding-top:24px} .abt-title{font-size:30px} .abt-lead{font-size:15px}
  .abt-values{grid-template-columns:1fr; gap:12px; padding-top:24px}
  .abt-cta-inner{padding:24px 20px} .abt-browse{width:100%; justify-content:center}
}

/* ===================== Account page (v0.2.43) ===================== */
.acct-wrap{max-width:640px; padding-top:18px; padding-bottom:64px}
.acct-card{display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:22px 24px}
.acct-avatar{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:50%; background:var(--ink); color:#fff; font-family:var(--serif); font-size:22px; letter-spacing:.02em}
.acct-info{display:flex; flex-direction:column; gap:3px; min-width:0; margin-right:auto}
.acct-label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.acct-email{font-size:16px; color:var(--ink); overflow:hidden; text-overflow:ellipsis}
.acct-signout{width:auto; flex:0 0 auto; padding:10px 22px}
.acct-links{margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.acct-link{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px;
  text-decoration:none; color:var(--ink); font-size:15px; border-bottom:1px solid var(--line); transition:background .14s}
.acct-link:last-child{border-bottom:0}
.acct-link:hover{background:color-mix(in srgb, var(--ink) 3%, var(--card))}
.acct-arrow{color:var(--accent)}
/* sign-in (guest) */
.acct-signin{flex-direction:column; text-align:center; gap:8px; padding:40px 30px}
.acct-avatar-lg{width:64px; height:64px; background:color-mix(in srgb, var(--accent) 12%, var(--card)); color:var(--accent); margin-bottom:8px}
.acct-avatar-lg svg{width:32px; height:32px}
.acct-h2{font-family:var(--serif); font-weight:600; font-size:24px; color:var(--ink); margin:0}
.acct-sub{font-size:14px; color:var(--muted); margin:2px 0 0}
.acct-btn{width:auto; padding:13px 40px; margin-top:14px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
.acct-note{font-size:12.5px; color:var(--muted); margin:16px 0 0; max-width:360px}
@media (max-width:600px){
  .acct-card{flex-wrap:wrap; gap:14px} .acct-info{margin-right:0; flex:1 1 60%}
  .acct-signout{width:100%}
}

/* ===================== Compare matrix — side-by-side (v0.2.44) ===================== */
.cmp-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.cmp-toolbar-l{display:flex; align-items:center; gap:12px; min-width:0}
.cmp-limit{font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--card)); padding:3px 9px; border-radius:999px; white-space:nowrap}
.cmp-sel{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.cmp-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); -webkit-overflow-scrolling:touch}
.cmp-table{border-collapse:collapse; width:100%; min-width:max-content}
.cmp-table th, .cmp-table td{padding:13px 20px; font-size:14px; white-space:nowrap; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle}
.cmp-table tbody td{color:var(--ink); font-weight:500; min-width:148px}
/* sticky attribute-label column */
.cmp-rl{position:sticky; left:0; z-index:2; background:var(--card); min-width:138px; color:var(--muted);
  font-weight:500; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; border-right:1px solid var(--line)}
/* diamond column headers */
.cmp-corner{position:sticky; left:0; z-index:3; background:var(--accent-soft); border-right:1px solid var(--line); border-bottom:1px solid var(--line-strong); min-width:138px}
.cmp-dh{position:relative; text-align:center; vertical-align:top; background:var(--accent-soft); border-bottom:1px solid var(--line-strong); border-left:1px solid var(--line); min-width:172px; padding-top:16px}
.cmp-thumb{display:block; width:96px; height:96px; margin:2px auto 10px; border:1px solid var(--line); border-radius:12px; background:var(--paper)}
.cmp-dh-name{display:block; font-family:var(--serif); font-size:16px; color:var(--ink); text-align:center}
.cmp-x{position:absolute; top:9px; right:9px; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:7px; background:var(--card); color:var(--muted); cursor:pointer; transition:.14s; padding:0}
.cmp-x svg{width:13px; height:13px}
.cmp-x:hover{border-color:#b4402f; color:#b4402f; background:#fff}
/* zebra striping on data cells (sticky label column stays clean) */
.cmp-table tbody tr:nth-child(even) td{background:var(--paper)}
/* price row emphasis */
.cmp-row-price th, .cmp-row-price td{border-top:1px solid var(--line-strong); padding-top:16px; padding-bottom:18px}
.cmp-row-price td{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink)}
@media (max-width:600px){
  .cmp-table th, .cmp-table td{padding:11px 14px; font-size:13px}
  .cmp-rl, .cmp-corner{min-width:106px}
  .cmp-dh{min-width:138px}
  .cmp-thumb{width:78px; height:78px}
  .cmp-dh-name{font-size:14px}
}

/* Ensure the [hidden] attribute always wins over display rules (fixes results showing behind the Compare tab) */
[hidden]{display:none !important}

/* ===================== Filter polish & alignment (v0.2.48) ===================== */
/* Equalize the value/input row height across numeric (carat/price/table/depth) and ordinal
   (color/clarity) sliders so every range track lines up on the same baseline. */
.rng-vals{min-height:38px; align-items:center; margin-bottom:12px}
.rng-inputs{min-height:38px; margin-bottom:12px}
.ds-field{display:flex; flex-direction:column}
.ds-field .rng{margin-top:auto}
/* Lab-Grown unavailable state */
.type-opt.is-disabled, .type-opt[disabled]{opacity:.5; cursor:not-allowed}
.type-opt .type-soon{margin-left:7px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); border-radius:999px; padding:2px 7px; vertical-align:middle; font-weight:600}
/* Advanced filter panel: roomier, aligned grid */
.ds-adv-body{align-items:start}
.ds-adv-body .ds-field-h{margin-bottom:10px}


/* ===================== Embedded (iframe) mode — v0.2.51 ===================== */
/* Chrome-less rendering for client-site iframes: no storefront header/footer; the page
   begins with the centered editable headline + subtitle. Background comes from the
   Style Editor's Background setting (var(--paper)) so it can blend with any host site. */
body.is-embedded{background:var(--paper)}
body.is-embedded main{padding-top:clamp(10px,2vw,22px)}
body.is-embedded .ds-head{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding-top:clamp(8px,1.6vw,18px)}
body.is-embedded .ds-head-tx h1{font-size:clamp(27px,3.6vw,40px)}
body.is-embedded .ds-head .hero-sub{margin:7px 0 0}
body.is-embedded .ds-head .type-toggle{margin:6px auto 0}
body.is-embedded .ds-shelf{top:calc(var(--ws-top, 0px) + 16px)}
body.is-embedded.sticky-search .filters{top:0}


/* ===================== Phase 3: type/shape/filter polish — v0.2.52 ===================== */
/* Full grade scale under Color / Clarity sliders */
.rng-scale{display:flex; justify-content:space-between; margin-top:7px; font-size:9.5px; line-height:1;
  color:var(--muted); letter-spacing:.02em; font-family:var(--sans); user-select:none}
.rng-scale span{min-width:0; text-align:center}
.rng-scale span:first-child{text-align:left}
.rng-scale span:last-child{text-align:right}
/* Clean sans-serif for all filter labels, controls, values, and numbers */
.ds-filtercard, .ds-filtercard input, .ds-filtercard button, .type-toggle, .type-opt{font-family:var(--sans)}
.rng-iwrap input, .rng-vals, .rng-scale, .ds-pill, .chip{font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .rng-scale{font-size:8.5px}
  .ds-shapes{grid-template-columns:repeat(auto-fit, minmax(74px, 1fr))}
}


/* ===================== Phase 4: results table/grid polish — v0.2.53 ===================== */
/* Column alignment: price column right-aligned in header and rows; numerals tabular. */
.as-list .whead span:nth-child(7){text-align:right}
.as-list .wrow .wc-price{justify-self:end; text-align:right; font-weight:600}
.as-list .wcell{font-variant-numeric:tabular-nums}
.as-list .whead{font-family:var(--sans)}
/* Grid cards: a touch more air and clearer hierarchy */
.results.as-grid{gap:20px}
.as-grid .card-specs{margin-top:5px}
.as-grid .wcard.is-sel{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow)}


/* ===================== Phase 5: preview shelf polish — v0.2.54 ===================== */
/* No visible internal scrollbars: the mobile bottom sheet stays scrollable by touch/wheel,
   but the scrollbar UI is hidden; the 360 box already clips its embed. */
.ds-shelf{scrollbar-width:none; -ms-overflow-style:none}
.ds-shelf::-webkit-scrollbar{display:none; width:0; height:0}


/* ===================== Phase 7: responsive + state polish — v0.2.56 ===================== */
/* Dense grade scales (e.g. the full D–Z color run) stay legible without clipping */
.rng-scale--dense{font-size:8.5px; letter-spacing:0}
/* Clear, accessible keyboard focus everywhere (mouse clicks stay clean) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px}
/* Results error state */
.ds-error{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:56px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius)}
.ds-error b{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink)}
.ds-error span{font-size:13.5px; color:var(--muted)}
/* Compare matrix: slim, themed horizontal scrollbar */
.cmp-scroll{scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
.cmp-scroll::-webkit-scrollbar{height:8px}
.cmp-scroll::-webkit-scrollbar-track{background:transparent}
.cmp-scroll::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:999px}

/* ===================== Sans-serif UI pass — v0.2.58 ===================== */
/* Serif remains only on the main headline (.display, themed via the Style Editor
   heading font). Every widget control, label, number, table, price, and title
   below switches to the clean sans body font, with weight preserving hierarchy. */
.result-count #resultTotal, .result-count b, .as-list .cell-shape b, .as-list .cell-price,
.card-name, .card-price, .cmp-bar b, .results-empty, .as-list .wc-shape b, .as-list .wc-price,
.as-grid .card-name, .as-grid .card-price, .shelf-title, .shelf-price, .ds-cmp-empty p,
.cmp-dh-name, .cmp-row-price td, .ds-error b, .detail-price, .det-price, .det-card-h,
.det-sim-price, .card-title, .sidebar-title{font-family:var(--sans)}
.shelf-title, .shelf-price, .as-list .wc-shape b, .as-list .wc-price, .as-grid .card-name,
.as-grid .card-price, .cmp-dh-name, .ds-error b, .result-count #resultTotal, .result-count b,
.det-price, .detail-price{font-weight:600}
.shelf-price, .as-list .wc-price, .as-grid .card-price, .cmp-row-price td, .det-price,
.detail-price{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.shelf-price{font-size:26px}


/* ===================== Centered hero head — v0.2.59 ===================== */
/* The search page leads with a centered headline + subtitle + category toggle in every
   mode (standalone and embedded), matching the Style Editor preview layout. */
.ds-head--hero{flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:10px; padding-top:clamp(18px,2.6vw,34px)}
.ds-head--hero .hero-sub{margin:7px 0 0}
.ds-head--hero .type-toggle{margin:10px auto 0}

/* ===================== Shelf media note — v0.2.60 ===================== */
/* Small, unobtrusive note shown inside the media box only after a user-requested
   360° load fails. Never overlaps the price, specs, or action buttons. */
.shelf-medianote{position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  background:color-mix(in srgb, var(--ink) 82%, transparent); color:#fff;
  font-family:var(--sans); font-size:11px; letter-spacing:.03em; line-height:1;
  padding:6px 13px; border-radius:999px; white-space:nowrap; pointer-events:none; z-index:3}

/* ===================== Balanced responsive category toggle — v0.2.61 ===================== */
/* Equal-width Natural / Lab-Grown / Fancy Color options at every screen size (grid columns
   equalize for however many categories are visible), centered under the headline, with the
   disabled state stacked neatly instead of stretching its option wider. */
.ds-head--hero .type-toggle{display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  width:min(100%, 560px); gap:4px; padding:4px; margin:14px auto 0}
.ds-head--hero .type-opt{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-width:0; padding:10px 10px; font-size:clamp(11.5px, 1.5vw, 13.5px);
  white-space:nowrap; line-height:1.2; text-align:center}
.ds-head--hero .type-opt .type-soon{margin-left:0; font-size:8.5px; padding:2px 8px}
.ds-head--hero .type-opt.is-disabled{opacity:.55}
.ds-head--hero{padding-bottom:6px}
@media (max-width:420px){
  .ds-head--hero .type-toggle{width:100%; gap:3px}
  .ds-head--hero .type-opt{padding:9px 5px}
}


/* ===================== Header account menu — v0.2.64 ===================== */
.hdr-menu{position:relative}
.hdr-menu > summary{list-style:none; cursor:pointer}
.hdr-menu > summary::-webkit-details-marker{display:none}
.hdr-menu-panel{position:absolute; right:0; top:calc(100% + 12px); z-index:70; min-width:216px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 40px rgba(10,16,40,.18);
  padding:8px; display:flex; flex-direction:column}
.hdr-menu-panel::before{content:''; position:absolute; top:-6px; right:22px; width:10px; height:10px;
  background:var(--card); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg)}
.hdr-menu-user{display:block; padding:9px 13px 11px; font-size:12px; color:var(--muted);
  border-bottom:1px solid var(--line); margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hdr-menu-panel a{display:block; padding:9px 13px; border-radius:9px; text-decoration:none;
  color:var(--ink); font-size:13.5px; font-family:var(--sans); transition:background .13s}
.hdr-menu-panel a:hover{background:color-mix(in srgb, var(--ink) 5%, var(--card))}
.hdr-menu-out{margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 9px 9px !important; font-weight:600}

/* ===================== Account / Favorites / About polish — v0.2.66 ===================== */
/* Favorites & Compare empty state: a clean centered card, balanced at every width */
.fc-empty{max-width:520px; margin:16px auto 0; padding:clamp(38px,7vw,60px) clamp(20px,4vw,32px);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.fc-empty p{font-size:17px; font-weight:600; margin:10px 0 2px}
.fc-empty > span:not(.fc-empty-ic){font-size:13.5px; color:var(--muted)}
.fc-wrap{padding-bottom:48px}
/* Account page: tighter rhythm, fluid sign-in card */
.acct-wrap{padding-top:12px; padding-bottom:48px}
.acct-signin{padding:clamp(30px,5vw,40px) clamp(18px,4vw,30px)}
/* About page: centered blocks so wide screens never feel lopsided or empty */
.abt-hero{margin-left:auto; margin-right:auto; text-align:center; padding-top:clamp(24px,4vw,42px)}
.abt-lead{margin-left:auto; margin-right:auto}
.abt-values{align-items:stretch; padding-top:clamp(24px,3vw,36px)}
.abt-card{display:flex; flex-direction:column}
.abt-story{margin-left:auto; margin-right:auto; padding-top:clamp(30px,4.5vw,46px)}
.abt-story .abt-h2{text-align:center}
.abt-cta{padding-top:clamp(28px,4vw,42px); padding-bottom:clamp(34px,5vw,52px)}
@media (max-width:760px){
  .abt-cta-inner{flex-direction:column; align-items:stretch; text-align:center}
  .abt-contacts{justify-content:center}
  .abt-browse{width:100%; justify-content:center}
}

/* ===================== Results bar alignment — v0.2.67 ===================== */
/* One balanced row above the listings: tabs, then the diamond count, controls right. */
.ds-bar{align-items:center}
.ds-bar .result-count{flex:1 1 auto; text-align:left; margin-left:14px; font-size:13.5px; color:var(--muted); white-space:nowrap; min-width:0}
.ds-bar .result-count b{font-size:18px; font-weight:600; color:var(--ink); margin-right:5px; font-variant-numeric:tabular-nums}
.ds-bar-right{margin-left:auto}
.ds-bar .sort select{height:38px}
.view-toggle button{height:38px; width:40px; display:inline-flex; align-items:center; justify-content:center}
@media (max-width:760px){
  .ds-bar{row-gap:10px}
  .ds-tabs{flex:1 1 100%}
  .ds-bar .result-count{margin-left:2px}
}

/* ===================== Premium navy footer — v0.2.67 ===================== */
/* Deep navy footer matching the header/TRS brand direction; gold accents, light text. */
.site-footer{background:var(--header-bg, #0e1240); border-top:0; color:#c6cbdc}
.footer-h{color:rgba(255,255,255,.92)}

/* ===================== Access page + footer refinement — v0.2.68 ===================== */
/* Simple access page: comfortable vertical centering with no header above it */
.auth-screen{padding:clamp(52px,10vh,110px) 24px clamp(40px,7vh,72px)}
.auth-card--gate{padding:36px 32px 34px}
.auth-gem--sm svg{width:44px; height:44px}
.auth-sub--gate{margin:14px 0 22px; font-size:14px; line-height:1.55}
/* Trust bar: consistent SVG icons, precisely aligned with the text block */
.trust{gap:12px; align-items:flex-start}
/* Slimmer, tighter footer rhythm */

/* ===================== Page structure + auth/footer polish — v0.2.69 ===================== */
/* Sticky footer: on short pages (account, favorites, access) the footer sits at the
   bottom of the viewport instead of floating mid-page. */
body{display:flex; flex-direction:column; min-height:100vh}
body > main{flex:1 1 auto; width:100%}
.site-footer{margin-top:clamp(24px,3vw,40px)}
/* Access modal: refined proportions, premium focus, responsive padding (header present) */
.auth-screen{padding:clamp(36px,7vh,84px) 24px clamp(36px,6vh,64px)}
.auth-card{border-radius:18px; box-shadow:0 18px 50px rgba(14,18,64,.10), 0 2px 10px rgba(14,18,64,.05); padding:clamp(28px,5vw,40px) clamp(20px,4.5vw,34px)}
.auth-card form{display:flex; flex-direction:column; gap:16px; margin-top:4px}
.auth-card input{height:46px; border-radius:11px}
.auth-card input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}
.auth-card .btn-primary{height:48px; width:100%; border-radius:var(--btn-radius); font-size:12.5px}
.auth-gem--sm svg{width:46px; height:46px}
/* Favorites / Account rhythm: tighter title row, no oversized gaps */
.fc-head{padding-top:clamp(18px,3vw,28px); align-items:center}
.fc-wrap{padding-top:14px}
.fc-sub{margin-top:5px}

/* ===================== TRS UI fixes — v0.2.71 ===================== */
/* Zoom lightbox: clean centered large preview, easy to close */
.ds-lightbox{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ink) 62%, transparent); padding:24px}
.ds-lightbox.is-open{display:flex}
.ds-lightbox-card{position:relative; background:var(--card); border-radius:18px; box-shadow:0 24px 70px rgba(10,16,40,.35);
  padding:22px; max-width:min(860px, 92vw); max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:12px}
.ds-lightbox-media{display:flex; align-items:center; justify-content:center; min-width:min(560px,80vw); min-height:280px}
.ds-lightbox-media img, .ds-lightbox-media video{max-width:min(780px,86vw); max-height:72vh; object-fit:contain; border-radius:12px}
.ds-lightbox-gem svg{width:180px; height:180px; color:var(--accent)}
.ds-lightbox-cap{font-family:var(--sans); font-size:13.5px; color:var(--muted)}
.ds-lightbox-x{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-size:20px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .14s}
.ds-lightbox-x:hover{border-color:var(--ink)}
body.ds-noscroll{overflow:hidden}
/* Compare search box */
.cmp-search{height:34px; padding:0 12px; border:1px solid var(--line-strong); border-radius:9px;
  font-family:var(--sans); font-size:13px; color:var(--text); background:var(--card); min-width:0; width:clamp(150px,26vw,240px)}
.cmp-search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent)}
/* Results list scrolls internally on desktop so the page itself stays put */
/* (superseded by the v0.2.76 workspace layout below) */
/* No stray underlines: links rely on color/weight; underline only as deliberate hover cues */
a{text-decoration:none}
/* Access card centered in the viewport (fixed, stable position) */
body:has(.auth-screen) main{display:flex}
.auth-screen{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%;
  padding-top:clamp(20px,4vh,44px); padding-bottom:clamp(20px,4vh,44px)}
.auth-card{width:min(440px, 100%)}

/* ===================== Details modal + compare inventory search — v0.2.73 ===================== */
.dsd-card{max-width:min(920px, 94vw); padding:26px; align-items:stretch}
.dsd-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:26px; width:100%}
.dsd-media{background:#f4f2ee; border:1px solid var(--line); border-radius:14px; display:flex; align-items:center; justify-content:center; min-height:300px; overflow:hidden}
.dsd-thumb{position:relative; display:block; width:100%; aspect-ratio:1; border:0; border-radius:0}
.dsd-title{font-family:var(--sans); font-weight:600; font-size:20px; color:var(--ink); margin:2px 0 4px}
.dsd-price{font-family:var(--sans); font-weight:600; font-size:24px; color:var(--ink); margin-bottom:14px; font-variant-numeric:tabular-nums}
.dsd-specs{display:grid; grid-template-columns:1fr 1fr; gap:0 22px; border-top:1px solid var(--line)}
.dsd-spec{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px}
.dsd-spec span{color:var(--muted)} .dsd-spec b{color:var(--ink); font-weight:500; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dsd-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.dsd-actions .shelf-btn-primary, .dsd-actions .shelf-btn-outline{flex:1 1 auto; width:auto; min-width:140px; justify-content:center; display:inline-flex; align-items:center}
@media (max-width:760px){
  .dsd-grid{grid-template-columns:1fr; gap:18px}
  .dsd-media{min-height:0}
  .dsd-specs{grid-template-columns:1fr}
}
/* Suggestion results under the compare search bar */
.cmp-sug{background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); margin:-4px 0 14px; overflow:hidden}
.cmp-sug-row{display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:13px}
.cmp-sug-row:last-child{border-bottom:0}
.cmp-sug-tx{flex:1 1 auto; min-width:0; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmp-sug-price{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.cmp-sug-add{flex:0 0 auto; padding:7px 16px; border-radius:8px; border:1px solid var(--ink); background:var(--ink); color:#fff; font-family:var(--sans); font-size:12px; letter-spacing:.04em; cursor:pointer; transition:opacity .14s}
.cmp-sug-add:hover:not(:disabled){opacity:.88}
.cmp-sug-add:disabled{background:transparent; color:var(--muted); border-color:var(--line-strong); cursor:default}
.cmp-sug-empty{padding:14px 16px; font-size:13px; color:var(--muted)}
.cmp-dh{cursor:pointer}
@media (max-width:600px){ .cmp-sug-row{flex-wrap:wrap} .cmp-sug-tx{flex-basis:100%} }

/* ===================== Sticky filters, sticky pager, zoom tools, account settings — v0.2.74 ===================== */
/* Filter card follows the screen on desktop (like the shelf); it never covers the header
   (pins after it scrolls away) and scrolls internally if taller than the viewport. */
@media (min-width:1101px){
  /* (sticky roles restructured in the v0.2.76 workspace layout below) */
}
/* Zoom modal controls */
.ds-lightbox-media{overflow:hidden}
.ds-lightbox-media img, .ds-lightbox-media video{transition:transform .18s ease; transform-origin:center center}
.ds-lightbox-tools{display:flex; align-items:center; gap:8px}
.ds-z-btn{min-width:38px; height:34px; padding:0 12px; border-radius:9px; border:1px solid var(--line-strong);
  background:var(--card); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:border-color .14s}
.ds-z-btn:hover{border-color:var(--ink)}
.ds-z-reset{font-size:12px; letter-spacing:.03em; min-width:58px; font-variant-numeric:tabular-nums}
/* Account settings card */
.acct-set{margin-top:16px}
.acct-set-h{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:14px 22px 4px}
.acct-set-btn{width:100%; text-align:left; background:transparent; border:0; cursor:pointer; font-family:var(--sans)}
.acct-set-btn:disabled{cursor:default}
.acct-set-note{font-size:12px; color:var(--muted); margin:0; padding:10px 22px 14px}

/* ===================== Details modal redesign — v0.2.75 ===================== */
.dsd-card{max-width:min(980px, 94vw); padding:clamp(20px,3vw,30px)}
.dsd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(20px,3vw,30px)}
.dsd-mediacol{display:flex; flex-direction:column; gap:12px; min-width:0}
.dsd-media{position:relative; aspect-ratio:1; min-height:0; width:100%; background:#f4f2ee;
  border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.dsd-media[data-mode="360"]{background:#fff}
.dsd-thumb{position:relative; display:block; width:100%; height:100%; border:0; border-radius:0}
.dsd-thumb img, .dsd-thumb video{object-fit:contain}
.dsd-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.16; filter:saturate(.7)}
.dsd-360-video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff}
.dsd-360{position:absolute; top:50%; left:50%; width:500px; height:500px; border:0; transform:translate(-50%,-50%); transform-origin:center; pointer-events:auto; background:#fff}
.dsd-mtabs{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px;
  background:color-mix(in srgb, var(--ink) 7%, var(--paper)); border:1px solid var(--line); border-radius:999px}
.dsd-mtab{border:0; background:transparent; border-radius:999px; padding:9px 10px; cursor:pointer;
  font-family:var(--sans); font-size:12px; letter-spacing:.05em; color:var(--ink); transition:background .14s, color .14s}
.dsd-mtab.is-on{background:var(--ink); color:#fff}
.dsd-mtab:hover:not(.is-on){background:color-mix(in srgb, var(--ink) 6%, transparent)}
.dsd-title{font-size:21px; margin:2px 0 6px}
.dsd-price{font-size:26px; margin-bottom:4px}
.dsd-cert{font-family:var(--sans); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.dsd-specs{margin-top:2px}
.dsd-spec{padding:9px 0; font-size:13.5px}
@media (max-width:760px){
  .dsd-card{max-height:92vh; overflow-y:auto}
  .dsd-media{aspect-ratio:auto; min-height:min(78vw, 380px)}
}

/* ===================== Workspace layout: sticky bar + aligned scroll areas — v0.2.76 ===================== */
/* Geometry note: a viewport-tall card pinned above flowing content must overlap whatever
   scrolls beneath it. So the slim results bar is the sticky element (filters sit one short
   scroll above, in normal flow), and the list, shelf, and pagination share viewport-derived
   heights so nothing covers anything and pagination stays with the list. */
@media (min-width:1101px){
  /* Every offset below is measured live (header, strip, toolbar) — no hardcoded heights. */
  :root{--ws-header-h:77px; --ws-gap:11px; --ws-strip-h:0px; --ws-bar-h:58px;
    --ws-bar-top:calc(var(--ws-header-h) + var(--ws-gap) + var(--ws-strip-h));
    --ws-top:calc(var(--ws-bar-top) + var(--ws-bar-h))}
  .ds-filtercard{position:relative}
  .ds-bar{position:sticky; top:var(--ws-bar-top); z-index:25; background:var(--paper);
    padding-top:10px; padding-bottom:12px; margin-bottom:2px;
    border-bottom:1px solid var(--line)}
  /* results list: its own scroll area, height aligned with the shelf */
  .ds-results-col{height:calc(100vh - var(--ws-top) - 20px); overflow-y:auto; overscroll-behavior:contain;
    padding-right:4px; padding-bottom:18px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
  .ds-results-col::-webkit-scrollbar{width:8px}
  .ds-results-col::-webkit-scrollbar-track{background:transparent}
  .ds-results-col::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:999px}
  /* shelf pinned beside the list, same top edge and max height */
  .ds-shelf{top:calc(var(--ws-top) + 16px)}
  .ds-shelf-inner{max-height:calc(100vh - var(--ws-top) - 36px); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
  .ds-shelf-inner::-webkit-scrollbar{width:6px}
  .ds-shelf-inner::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:6px}
  .ds-shelf-inner::-webkit-scrollbar-track{background:transparent}
  /* pagination pinned to the bottom of the list area, solid so rows never show through */
  .ds-results-col .pager{position:sticky; bottom:0; z-index:6; margin:10px 0 0; padding:12px 0 8px;
    background:var(--paper); border-top:1px solid var(--line)}
  .ds-results-col .results{padding-bottom:6px}
  /* compare tab shares the same contained area */
  .ds-results-col .ds-compare{padding-bottom:8px}
  /* embed mode: no site header above, shift the shared offsets up */
  body.is-embedded{--ws-header-h:-3px}
}

/* ===================== Sticky filter presence (collapsible) — v0.2.77 ===================== */
.ds-filtercard{scroll-margin-top:calc(var(--ws-header-h, 77px) + 20px)}
.fc-strip{position:sticky; top:calc(var(--ws-header-h, 77px) + var(--ws-gap, 11px)); z-index:28; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 -12px 0 0 var(--paper), 0 9px 0 0 var(--paper), var(--shadow);
  padding:9px 10px 9px 16px; margin-top:2px}
.fc-strip-head{display:flex; align-items:center; gap:12px; min-height:32px; width:100%}
.fc-strip[hidden]{display:none}
.fc-strip-ic{display:inline-flex; color:var(--accent)} .fc-strip-ic svg{width:18px; height:18px}
.fc-strip-tx{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink); font-weight:600}
.fc-strip-sum{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:999px; background:color-mix(in srgb, var(--accent) 16%, var(--card));
  color:var(--accent); font-size:11.5px; font-weight:600; letter-spacing:0}
.fc-strip-btn{margin-left:auto; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;
  border-radius:var(--btn-radius); padding:9px 18px; font-family:var(--sans); font-size:12px; letter-spacing:.06em;
  transition:opacity .14s}
.fc-strip-btn:hover{opacity:.88}
/* When the slim bar is present, every workspace offset shifts down with it (results bar,
   list height, shelf top all derive from the same variables) */
@media (max-width:1100px){ .fc-strip{display:none !important} }


/* ===================== Expandable sticky filter panel — v0.2.78 ===================== */
.fc-strip.is-open{max-height:calc(100vh - 104px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
.fc-strip.is-open::-webkit-scrollbar{width:8px}
.fc-strip.is-open::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:999px}
.fc-strip-body{width:100%; padding-top:12px}
.fc-strip-body[hidden]{display:none}
/* the borrowed filter card nests flush inside the panel */
.fc-strip-body .ds-filtercard{margin:0; padding:8px 6px 6px; border:0; box-shadow:none; border-radius:0; max-width:none}
.fc-ph{width:100%}


/* ===================== Final pass: embed offsets for the filter strip — v0.2.79 ===================== */

/* ===================== Access modal + fancy filter + minimal chrome — v0.2.80 ===================== */
/* Fancy Color checkbox (advanced filters) */
.ds-check{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:13.5px; color:var(--text); cursor:pointer; padding:8px 0 2px}
.ds-check input{width:17px; height:17px; accent-color:var(--accent); cursor:pointer}
/* Minimal footer */
.site-footer--mini{margin-top:clamp(24px,3vw,40px); background:var(--header-bg, #0e1240); border-top:0}
.footer-mini{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 24px; flex-wrap:wrap}
.footer-mini-brand{display:inline-flex; align-items:center; gap:9px; color:#fff; font-family:var(--serif); font-size:15px; letter-spacing:.02em}
.footer-mini-brand svg{width:18px; height:18px; color:var(--accent)}
.footer-mini-copy{font-family:var(--sans); font-size:12px; color:#98a1bb; letter-spacing:.03em}
@media (max-width:560px){ .footer-mini{justify-content:center; text-align:center} }

/* ===================== Polish pass — v0.11 ===================== */

/* ===================== Restored details + cert link — v0.13 ===================== */
.cert-link{color:var(--accent); font-weight:600; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent); transition:border-color .14s}
.cert-link:hover{border-bottom-color:var(--accent)}
.dsd-spec b .cert-link, td .cert-link{font-weight:600}

/* ===================== Header polish — v0.16 ===================== */
/* Actions anchor right again (they drifted next to the brand when the old nav was removed). */
.header-actions{margin-left:auto}
.header-inner{gap:20px}
/* Brand: crisp logo rendering + gentle hover feedback */
.brand{transition:opacity .16s ease}
.brand:hover{opacity:.86}
.brand-logo{display:block}
/* Actions: standalone-matched pill hover; icons pair with the uppercase labels */
.hdr-act svg{width:18px; height:18px; transition:transform .16s ease}
.hdr-act:hover svg{transform:translateY(-1px)}
.hdr-act:focus-visible, .hdr-menu > summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.header-actions{gap:10px}
/* Logo steps down with the shorter headers, mirroring the standalone (46 → 38 → 34) */
@media (max-width:560px){ .brand-logo{max-height:38px} }
@media (max-width:420px){ .brand-logo{max-height:34px} .brand-tag{display:none} }

/* ===================== Empty-state clarity — v0.18 ===================== */
.empty-reset{background:none; border:0; padding:0; margin-left:8px; font:inherit; color:var(--accent);
  font-weight:600; cursor:pointer; border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent)}
.empty-reset:hover{border-bottom-color:var(--accent)}

/* ===================== Layout stability + shelf compaction — v0.20 ===================== */
/* Pagination pins to the bottom of the results scroller (desktop workspace only) */
@media (min-width:1101px){
  #pager{position:sticky; bottom:0; z-index:3; background:var(--paper);
    border-top:1px solid var(--line); padding:10px 0 4px; margin-top:4px}
}
/* Preview shelf: compact enough to fit the viewport, so it presents as a fixed card */
.shelf-img{aspect-ratio:auto; height:208px}
.shelf-media{padding:14px 14px 0}
.shelf-spec{padding:6.5px 0; font-size:12.5px; border-bottom-color:color-mix(in srgb, var(--line) 60%, transparent)}
.shelf-skuline{margin-top:12px}
.shelf-btn-primary, .shelf-btn-outline{padding:11px}
/* Shape-icon thumbs read as the same card as photo thumbs (white field, soft edge) */
.as-list .thumb .thumb-ico{background:#fff}
.thumb .thumb-ico svg{width:66%; height:66%}

/* ===================== Results workspace refinement — v0.21 ===================== */
@media (min-width:1101px){
  /* Shelf pins at the same measured top edge as the results column (was a stale 92px). */
  .ds-shelf{top:calc(var(--ws-top, 150px) + 16px)}
  /* The column is a fixed frame: rows scroll in their own pane; pagination sits statically beneath. */
  .ds-results-col{height:calc(100vh - var(--ws-top) - 20px); display:flex; flex-direction:column; overflow:hidden; padding:0}
  #results{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    padding-right:4px; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
  #compareView{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:4px}
  #resultsEmpty{margin:auto}
  #pager{position:static; flex:0 0 auto; background:none; border-top:1px solid var(--line); padding:12px 0 2px; margin:0}
  /* Calm fallback: the shape icon reads as a deliberate placeholder, not a broken image */
  .shelf-img .thumb-ico svg{width:44%; height:44%}
}

/* ===================== Shelf media fill — v0.22 ===================== */
/* Video poster frames fill the stage exactly like photos (the sizing rule previously
   covered <img> only, so video-based stones rendered at the element's tiny default). */
.shelf-img video.stone-photo{position:absolute; inset:0; width:100%; height:100%}
/* Larger stage, tighter frame: the stone uses the card's width properly */
.shelf-img{height:240px}
.shelf-media{padding:12px 12px 0}

/* ===================== Zoom modal fallback — v0.23 ===================== */
.ds-lightbox-fb{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px}
.ds-lightbox-gem{display:block}
.ds-lightbox-fbmsg{margin:0; font-family:var(--sans); font-size:13px; letter-spacing:.02em; color:var(--muted)}

/* ===================== Certificate links — v0.25 ===================== */
/* In the results row the certificate sits in muted sub-text: it stays calm and
   only reveals itself as a link on hover, so rows keep their clean scan rhythm. */
.cert-link--sub{color:inherit; font-weight:inherit; border-bottom-color:transparent}
.cert-link--sub:hover{color:var(--accent); border-bottom-color:color-mix(in srgb, var(--accent) 45%, transparent)}

/* ===================== Access page (mockup design) — v0.26 ===================== */
.auth-card--gate{max-width:470px; padding:44px 44px 32px}
.auth-title{font-size:30px; margin:14px 0 2px; letter-spacing:.01em}
.auth-gem--spark{position:relative; display:inline-flex}
.auth-gem--spark .spk{position:absolute; color:var(--accent); opacity:.85}
.auth-gem--spark .spk1{width:13px; height:13px; top:-3px; right:-15px}
.auth-gem--spark .spk2{width:9px; height:9px; bottom:7px; left:-14px; opacity:.6}
.auth-fwrap{position:relative; display:block}
.auth-fwrap .auth-fic{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted); pointer-events:none}
.auth-fwrap input{width:100%; padding-left:40px}
.auth-fwrap input#gatePw{padding-right:46px}
.auth-eye{position:absolute; right:7px; top:50%; transform:translateY(-50%); background:none; border:0; padding:7px; cursor:pointer; color:var(--muted); border-radius:8px; display:inline-flex; transition:color .14s}
.auth-eye:hover{color:var(--text)}
.auth-eye:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.auth-eye svg{width:19px; height:19px; display:block}
.btn-primary--gate{display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; margin-top:4px}
.btn-primary--gate svg{width:16px; height:16px}
.auth-div{display:flex; align-items:center; gap:12px; margin:20px 0 12px; color:var(--accent)}
.auth-div span{flex:1; height:1px; background:var(--line)}
.auth-div svg{width:14px; height:14px; opacity:.75}
.auth-foot{margin:0; font-size:13px; color:var(--muted); letter-spacing:.01em}
@media (max-width:520px){ .auth-card--gate{padding:34px 22px 26px} }

/* ===================== Shelf media: full-width, zero-frame stage — v0.32 ===================== */
/* The stage spans the card edge-to-edge (the card's own radius + overflow clip the corners);
   media layers keep object-fit:contain, centered — never cropped, never stretched. */
.shelf-media{padding:0}
.shelf-img{width:100%; aspect-ratio:1; height:auto; border-radius:0; box-shadow:none; border-bottom:1px solid var(--line)}
/* 360° / Zoom / Save keep their inset now that the media wrapper is flush */
.shelf-mbtns{padding:14px 14px 2px}
/* Shorter viewports: cap the taller square stage so the card still fits beside the table */
@media (max-height:840px){ .shelf-img{aspect-ratio:auto; height:232px} }

/* ===================== Detail panel + toolbar polish — v0.34 ===================== */
/* Stock number + certification label hold one row (ellipsis instead of wrapping) */
.shelf-skuline{flex-wrap:nowrap}
.shelf-sku{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shelf-lab{white-space:nowrap; flex:0 0 auto}
/* Title -> price -> specs rhythm */
.shelf-title{margin:8px 0 3px}
.shelf-price{margin:0 0 12px}
@media (min-width:1101px){
  /* Toolbar: tighter vertical rhythm; all controls share one height line */
  .ds-bar{padding-top:12px}
  .sort select{height:38px}
  .view-toggle .view-opt{height:38px; min-width:38px}
  .ds-tabs{padding:3px}
}
@media (max-width:1100px){
  /* Small screens: controls wrap in clean rows, nothing clipped */
  .ds-bar{row-gap:10px}
}

/* ===================== Client feedback round — v0.35 ===================== */
/* Grid tiles: never crop the stone (your screenshot) — contain on a clean field */
.as-grid .card-img img, .as-grid .card-img video.stone-photo{object-fit:contain; background:#fff}
/* Shelf stage: sized so the full detail set fits without the panel scrollbar */
.shelf-img{aspect-ratio:auto; height:230px}
.shelf-meta{padding:14px 20px 20px}
/* Fancy Color toggle sits inline under the Color slider */
.ds-check--inline{margin-top:10px}
/* Girdle From/To range selects */
.ds-rangeselects{display:flex; align-items:center; gap:8px}
.ds-rangeselects select{flex:1; height:38px; border:1px solid var(--line-strong); border-radius:9px; background:var(--card); color:var(--ink); font-family:inherit; font-size:13px; padding:0 8px}
.ds-rangesep{color:var(--muted)}
/* Table % / Depth %: small two-character fields — slider rails hidden */
.ds-field--compactnum .rng-track, .ds-field--compactnum .rng-fill, .ds-field--compactnum .rng-handle, .ds-field--compactnum input[type="range"]{display:none}
.ds-field--compactnum .rng-inputs{margin-bottom:0}
.ds-field--compactnum .rng-inputs input{width:64px}
/* Color/Clarity ordinal sliders align their tracks with the numeric sliders' */
.rng-ord .rng-vals{min-height:40px; margin-bottom:14px; align-items:flex-end}
/* Centered brand when the header carries no actions */
.header-inner--center{justify-content:center}
.header-inner--center .brand{margin:0 auto}
/* Favorites disabled site-wide: every heart control disappears */
body.favs-off [data-fav], body.favs-off .fav-btn, body.favs-off [data-shelf-fav], body.favs-off .card-fav{display:none !important}


/* ===================== Round 2 feedback — v0.36 ===================== */
/* All slider tracks on one line: identical header-row boxes for both kinds */
.rng-inputs{height:40px; margin-bottom:14px}
.rng-inputs input{height:38px}
.rng-ord .rng-vals{height:40px; margin-bottom:14px; align-items:flex-end}
/* Table % / Depth % side by side, compact */
.ds-fieldpair{display:flex; gap:16px}
.ds-fieldpair .ds-field{flex:1; min-width:0}
/* Shelf: 360° fills the width, height follows (square media); shorter screens cap it */
.shelf-img{aspect-ratio:1; width:100%; height:auto}
@media (max-height:920px){ .shelf-img{aspect-ratio:auto; height:220px} }
/* Shelf compaction v2: the full detail set fits without the panel scrollbar */
.shelf-meta{padding:12px 16px 16px}
.shelf-spec{padding:5px 0; font-size:12px}
.shelf-title{font-size:20px; margin:6px 0 2px}
.shelf-price{font-size:24px; margin:0 0 8px}
.shelf-mbtns .shelf-icobtn{min-height:40px; padding:7px 6px}
@media (min-width:1101px){
  .ds-shelf{top:calc(var(--ws-top, 150px) + 12px)}
  .ds-shelf-inner{max-height:calc(100vh - var(--ws-top) - 24px)}
}
/* Compare + Inquire share the action row */
.shelf-actions2{display:flex; gap:8px}
.shelf-actions2 .shelf-btn-primary{flex:1.4}
.shelf-btn-outline.inq-btn{flex:1; display:inline-flex; align-items:center; justify-content:center; padding:11px; border:1px solid var(--ink); border-radius:var(--btn-radius); background:var(--card); color:var(--ink); font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:.15s}
.shelf-btn-outline.inq-btn:hover{background:var(--ink); color:#fff}
/* Inquiry modal */
.ds-inq{position:fixed; inset:0; z-index:230; display:none; align-items:center; justify-content:center; padding:20px;
  background:color-mix(in srgb, var(--ink) 46%, transparent); backdrop-filter:blur(4px)}
.ds-inq.is-open{display:flex}
.ds-inq-card{position:relative; width:min(440px,100%); background:var(--card); border-radius:16px; box-shadow:var(--shadow-lg, var(--shadow)); padding:26px 26px 22px}
.ds-inq-x{position:absolute; top:10px; right:12px; border:0; background:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; padding:6px}
.ds-inq-title{font-family:var(--serif); font-size:21px; margin:0 0 4px; color:var(--ink)}
.ds-inq-stone{margin:0 0 14px; font-size:12.5px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase}
.ds-inq label{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.ds-inq input, .ds-inq textarea{display:block; width:100%; margin-top:6px; border:1px solid var(--line-strong); border-radius:9px; background:var(--card); color:var(--ink); font-family:inherit; font-size:14px; padding:10px 12px; resize:vertical}
.ds-inq-hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}
.ds-inq-err{background:#fdecea; color:#c0392b; border-radius:8px; padding:9px 12px; font-size:13px; margin-bottom:12px}
.ds-inq-send{width:100%; cursor:pointer}

/* ===================== Round 3 fixes — v0.38 ===================== */
/* Compare + Inquire: identical height */
.shelf-actions2 .shelf-btn-primary, .shelf-actions2 .shelf-btn-outline.inq-btn{height:46px; padding-top:0; padding-bottom:0}
/* Shelf: fixed 210px stage at every size — the full detail set fits with no panel scroll */
.shelf-img{aspect-ratio:auto; height:210px}
.shelf-spec{padding:4.5px 0}


/* ===================== 360 width-first stage — v0.40 ===================== */
.shelf-img.is-360{aspect-ratio:1/1; height:auto}

/* ===================== List polish — v0.41 ===================== */
/* Column headers pin to the top of the results pane while rows scroll beneath */
@media (min-width:1101px){
  .as-list .whead{position:sticky; top:0; z-index:4;
    background:color-mix(in srgb, var(--ink) 3%, var(--card))}
}
/* Slimmer rows now that the sub-line carries only the certificate */
.as-list .wrow{padding-top:11px; padding-bottom:11px}