/* ============================================================
   Stone Library — catalog layout (Direction A · Galleria)
   Builds on concept.css tokens & components.
   ============================================================ */

html,body{ margin:0; padding:0; }
body.cat{ background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
.cat{ --font-display:'Cormorant Garamond', Georgia, serif; --accent:var(--copper); --accent-deep:var(--copper-deep); --accent-soft:var(--copper-soft); }

.wrap{ max-width:1440px; margin:0 auto; }
.gutter{ padding-left:100px; padding-right:100px; }
@media (max-width:1100px){ .gutter{ padding-left:48px; padding-right:48px; } }
@media (max-width:680px){ .gutter{ padding-left:24px; padding-right:24px; } }

/* sticky header */
.cat-header{ position:sticky; top:0; z-index:40; background:rgba(244,241,236,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.cat-header .nav{ padding:18px 100px; }
@media (max-width:1100px){ .cat-header .nav{ padding:16px 48px; } }
@media (max-width:680px){ .cat-header .nav{ padding:14px 20px; } .cat-header .nav-links,.cat-header .lang{ display:none; } }

/* breadcrumbs */
.crumbs{ display:flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase; }
.crumbs a{ color:var(--ink-3); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); }
.crumbs .sep{ opacity:.5; }
.crumbs .cur{ color:var(--ink); }

/* masthead */
.cat-mast{ padding-block:60px 38px; }
.cat-mast h1{ font-family:var(--font-display); font-weight:500; font-size:80px; line-height:.98; letter-spacing:-.012em; margin:18px 0 0; }
.cat-mast .lead{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:22px; }
.cat-mast .lead p{ font-family:var(--font-body); font-size:18px; line-height:1.6; color:var(--ink-2); max-width:540px; margin:0; }
.cat-mast .count{ font-family:var(--font-display); font-size:22px; color:var(--ink-3); white-space:nowrap; }
.cat-mast .count b{ font-size:40px; color:var(--ink); font-weight:500; }

/* filter bar */
.filterbar{ position:sticky; top:69px; z-index:30; background:rgba(244,241,236,.9); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.filterbar .fb-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 100px; }
@media (max-width:1100px){ .filterbar .fb-inner{ padding:14px 48px; } }
@media (max-width:680px){ .filterbar{ top:61px; } .filterbar .fb-inner{ padding:12px 20px; flex-wrap:wrap; gap:12px; } }
.fb-cats{ display:flex; gap:9px; flex-wrap:wrap; }
.fb-tools{ display:flex; align-items:center; gap:12px; }
.fb-search{ display:flex; align-items:center; gap:9px; border:1px solid var(--line-2); border-radius:3px; padding:9px 13px; background:var(--white); width:230px; transition:border-color .2s, box-shadow .2s; }
.fb-search:focus-within{ border-color:var(--copper); box-shadow:0 0 0 3px rgba(167,95,53,.14); }
.fb-search input{ border:0; outline:0; background:transparent; font-family:var(--font-body); font-size:14px; color:var(--ink); width:100%; }
.fb-search input::placeholder{ color:var(--ink-3); }
.fb-select{ position:relative; }
.fb-select select{ appearance:none; border:1px solid var(--line-2); border-radius:3px; background:var(--white); font-family:var(--font-body); font-size:14px; color:var(--ink); padding:10px 34px 10px 14px; cursor:pointer; }
.fb-select::after{ content:''; position:absolute; right:13px; top:50%; width:7px; height:7px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.fb-count{ font-family:var(--font-body); font-size:13px; color:var(--ink-3); white-space:nowrap; }

/* grid */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 30px; padding:46px 0 90px; }
@media (max-width:1100px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .cat-grid{ grid-template-columns:1fr; gap:30px; } }

/* the catalog card extends .stone-card but fills its grid cell */
.cat-grid .stone-card{ width:100%; }
.cat-grid .stone-card .thumb{ height:320px; }
.cat-grid .stone-card .meta .name{ display:flex; align-items:baseline; justify-content:space-between; }
.cat-grid .stone-card .swatchdot{ display:inline-flex; gap:5px; }
.cat-grid .stone-card .swatchdot i{ width:7px; height:7px; border-radius:50%; }
.transl{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--copper); }
.transl b{ width:5px; height:5px; border-radius:50%; background:var(--copper); }

/* empty state */
.empty{ grid-column:1 / -1; text-align:center; padding:80px 0; }
.empty .ring{ width:70px; height:70px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; color:var(--ink-3); }
.empty h3{ font-family:var(--font-display); font-weight:500; font-size:34px; margin:0 0 10px; }
.empty p{ font-family:var(--font-body); font-size:15px; color:var(--ink-3); margin:0 0 22px; }

/* ============================================================
   DETAIL OVERLAY
   ============================================================ */
.detail{ position:fixed; inset:0; z-index:80; background:var(--paper); overflow-y:auto; }
.detail-inner{ max-width:1440px; margin:0 auto; padding:0 100px 80px; }
@media (max-width:1100px){ .detail-inner{ padding:0 48px 60px; } }
@media (max-width:680px){ .detail-inner{ padding:0 20px 50px; } }
.detail-bar{ position:sticky; top:0; z-index:5; background:rgba(244,241,236,.9); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-between; padding:18px 100px; border-bottom:1px solid var(--line); }
@media (max-width:1100px){ .detail-bar{ padding:16px 48px; } }
@media (max-width:680px){ .detail-bar{ padding:14px 20px; } }
.detail-bar .close{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); border-radius:3px; padding:9px 15px; background:transparent; transition:border-color .2s; }
.detail-bar .close:hover{ border-color:var(--ink); }

.detail-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; padding-top:42px; }
@media (max-width:900px){ .detail-grid{ grid-template-columns:1fr; gap:34px; } }

/* viewer */
.viewer{ position:relative; }
.viewer .stage{ position:relative; height:560px; border-radius:4px; overflow:hidden; background:#000; cursor:zoom-in; }
.viewer .stage.zoomed{ cursor:zoom-out; }
.viewer .stage .tex-scale{ position:absolute; inset:0; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.viewer .stage.zoomed .tex-scale{ transform:scale(1.9); }
.viewer .vtag{ position:absolute; left:18px; top:18px; }
.viewer .controls{ position:absolute; right:16px; bottom:16px; display:flex; gap:8px; z-index:4; }
.viewer .vbtn{ width:42px; height:42px; border-radius:50%; background:rgba(251,246,238,.92); border:none; display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; transition:transform .2s, background .2s; }
.viewer .vbtn:hover{ transform:translateY(-2px); }
.viewer .vbtn.active{ background:var(--copper); color:#fff; }
.viewer .deg{ position:absolute; left:16px; bottom:16px; z-index:4; font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--ink-on-stone); background:rgba(20,16,12,.42); backdrop-filter:blur(4px); padding:7px 11px; border-radius:2px; }
.viewer .thumbs{ display:flex; gap:10px; margin-top:14px; }
.viewer .thumbs .t{ position:relative; width:90px; height:64px; border-radius:3px; overflow:hidden; cursor:pointer; opacity:.6; transition:opacity .2s, box-shadow .2s; }
.viewer .thumbs .t.active{ opacity:1; box-shadow:0 0 0 1.5px var(--copper); }
.viewer .thumbs .t:hover{ opacity:1; }

/* info panel */
.info .origin{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.info h2{ font-family:var(--font-display); font-weight:500; font-size:58px; line-height:.98; letter-spacing:-.01em; margin:10px 0 0; }
.info .latin{ font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--ink-3); margin-top:6px; }
.info .blurb{ font-family:var(--font-body); font-size:16px; line-height:1.66; color:var(--ink-2); margin:22px 0 0; }
.info .ctas{ display:flex; gap:14px; margin:28px 0 30px; }
.info .finishes{ margin-top:6px; }
.kvs{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); margin-top:8px; }
.kv{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); }
.kv .k{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.kv .v{ font-family:var(--font-body); font-size:15px; color:var(--ink); font-weight:500; }
.spec{ padding:14px 0; border-bottom:1px solid var(--line); }
.spec .sl{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.spec .sl .k{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.spec .sl .val{ font-family:var(--font-body); font-size:13px; color:var(--ink); font-weight:600; }
.spec .track{ height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
.spec .fill{ height:100%; background:var(--copper); border-radius:3px; }

.section-label{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }

/* in interior */
.interior{ padding-top:62px; }
.interior .ih{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }
.interior .ih h3{ font-family:var(--font-display); font-weight:500; font-size:40px; margin:8px 0 0; }
.interior-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .interior-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .interior-row{ grid-template-columns:1fr; } }

/* footer */
.cat-footer{ background:var(--ink); color:var(--paper); padding:72px 0 40px; }
.cat-footer .ft-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:40px; }
@media (max-width:900px){ .cat-footer .ft-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
.cat-footer .wordmark{ color:var(--paper); font-size:30px; }
.cat-footer h4{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,241,236,.5); margin:0 0 16px; }
.cat-footer a:not(.btn){ display:block; color:rgba(244,241,236,.82); text-decoration:none; font-size:14px; padding:6px 0; transition:color .2s; }
.cat-footer a:not(.btn):hover{ color:#fff; }
.cat-footer .ft-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:56px; padding-top:24px; border-top:1px solid rgba(244,241,236,.14); font-size:12px; color:rgba(244,241,236,.5); }

/* modal backdrop (reuses .modal from concept.css) */
.backdrop{ position:fixed; inset:0; z-index:90; background:rgba(24,18,12,.55); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal-success{ text-align:center; padding:14px 8px 6px; }
.modal-success .ok-ring{ width:64px; height:64px; border-radius:50%; background:rgba(47,125,82,.12); color:#2F7D52; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.modal-success h3{ font-family:var(--font-display); font-weight:500; font-size:32px; margin:0 0 8px; }

/* reveal-on-scroll */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
  .reveal.in{ opacity:1; transform:none; }
}

/* ============================================================
   MOBILE POLISH (≤680 / ≤520)
   ============================================================ */
@media (max-width:680px){
  .cat-mast{ padding-block:36px 26px; }
  .cat-mast h1{ font-size:clamp(46px,13vw,62px); }
  .cat-mast .lead{ flex-direction:column; align-items:flex-start; gap:16px; }
  .cat-mast .lead p{ font-size:16px; }
  /* filter bar → everything full-width stacked, hard-constrained */
  .filterbar .fb-inner{ flex-direction:column; align-items:stretch; gap:10px; padding:12px 24px; width:100%; max-width:100%; box-sizing:border-box; }
  .fb-cats{ gap:8px; flex-wrap:wrap; }
  .fb-cats .chip{ flex:0 0 auto; }
  .fb-tools{ display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; min-width:0; }
  .fb-search{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
  .fb-search input{ width:100%; min-width:0; }
  .fb-select{ width:100%; max-width:100%; min-width:0; }
  .fb-select select{ width:100%; min-width:0; box-sizing:border-box; }
  .fb-count{ text-align:right; }
  /* detail overlay viewer */
  .viewer .stage{ height:360px; }
  .viewer .stage.zoomed .tex-scale{ transform:scale(1.6); }
  .info h2{ font-size:44px; }
  .detail-grid{ padding-top:28px; }
  /* compact footer: brand full, Library | Studio side by side, CTA full */
  .cat-footer{ padding:52px 0 32px; }
  .cat-footer .ft-grid{ grid-template-columns:1fr 1fr; gap:26px 22px; }
  .cat-footer .ft-grid > div:first-child{ grid-column:1 / -1; }
  .cat-footer .ft-grid > div:last-child{ grid-column:1 / -1; }
  .cat-footer h4{ margin-bottom:12px; }
  .cat-footer a:not(.btn){ padding:5px 0; font-size:13.5px; }
  .cat-footer .ft-grid > div:last-child .btn{ width:100%; }
}
@media (max-width:520px){
  .cat-footer{ padding:46px 0 30px; }
  .cat-footer .ft-grid{ gap:24px 20px; }
  .cat-footer .ft-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .viewer .thumbs .t{ width:72px; height:52px; }
}