:root{
  --bg:#ffffff; --bg-soft:#f7f5ee; --surface:#ffffff; --surface-2:#f0ede2;
  --ink:#141110; --ink-2:#5c554a; --border:#e6e1d1;
  --accent:#b8860b; --accent-dark:#8a6508; --accent-soft:#faf1d2;
  --band-bg:#0a0a0a; --band-surface:#141414; --band-border:rgba(212,175,55,0.18); --band-ink:#f7f0dc; --band-ink-2:#a39a86; --band-accent:#d4af37;
  --btn-ink:#171310; --pill-active-ink:#fdf8ec; --stock-ink:#3f6b3f; --field-ink:#8f8676;
  /* editorial vertical rhythm — one shared scale so sections never feel ad hoc */
  --section-y:56px; --section-y-tight:32px; --section-gap-h:40px;
}
@media (max-width:900px){:root{--section-y:36px; --section-y-tight:24px; --section-gap-h:28px;}}
html[data-theme="dark"]{
  --bg:#0a0a0a; --bg-soft:#141414; --surface:#121212; --surface-2:#1c1c1a;
  --ink:#f5f0e0; --ink-2:#a39a86; --border:#2a2a26;
  --accent:#d4af37; --accent-dark:#f0cf6a; --accent-soft:#2e2410;
  --band-bg:#000000; --band-surface:#111111; --band-border:rgba(212,175,55,0.15); --band-ink:#f7f0dc; --band-ink-2:#8f8676; --band-accent:#d4af37;
  --btn-ink:#171310; --pill-active-ink:#171310; --stock-ink:#8fae8f; --field-ink:#8f8676;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s;overflow-x:hidden;max-width:100%;}
.reveal-left,.reveal-right,.reveal{min-width:0;}
h1,h2,h3,.disp{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-0.01em;margin:0;}
h1{font-weight:400;}
em,.accent-italic{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:var(--accent-dark);}
a{color:var(--accent-dark);text-decoration:none;}
a:hover{color:var(--accent-dark);text-decoration:underline;}
img,svg{max-width:100%;}
.wrap{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-dark);}
.eyebrow::before{content:'';display:inline-block;width:22px;height:1px;background:var(--accent);}
.eyebrow.on-dark{color:var(--band-accent);}
.eyebrow.on-dark::before{background:var(--band-accent);}
.eyebrow.center{justify-content:center;}

/* top utility bar — thin, light, warm-neutral (not the dark "band" treatment) */
.topbar{background:var(--surface-2);border-bottom:1px solid var(--border);}

/* header / nav */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border);transition:box-shadow .3s ease,padding .25s ease;}
header.scrolled{box-shadow:0 6px 24px -12px rgba(20,17,16,0.2);}
.navlink{position:relative;color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:8px 2px;}
.navlink::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--accent);transition:right .25s cubic-bezier(.2,.8,.2,1);}
.navlink:hover{color:var(--accent-dark);text-decoration:none;}
.navlink:hover::after,.navlink.current::after{right:0;}
.navlink.current{color:var(--accent-dark);}

.navlink-dropdown{position:relative;}
.navlink-dropdown-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  min-width:200px;padding:8px;margin-top:10px;box-shadow:0 16px 32px -16px rgba(20,17,16,0.25);
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:30;
}
.navlink-dropdown:hover .navlink-dropdown-menu,.navlink-dropdown-menu:hover{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.navlink-dropdown-menu a{
  display:block;padding:9px 14px;font-size:12.5px;font-weight:600;letter-spacing:0.03em;
  color:var(--ink);text-transform:none;border-radius:4px;text-decoration:none;white-space:nowrap;
}
.navlink-dropdown-menu a:hover{background:var(--surface-2);color:var(--accent-dark);}

.mobile-nav-cat-row{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease;}
.mobile-nav-overlay.is-open .mobile-nav-cat-row{opacity:1;transform:translateY(0);}
.mobile-nav-cat-row a{font-size:28px !important;}
.mobile-nav-cat-toggle{background:none;border:1px solid var(--band-ink-2);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--band-ink);cursor:pointer;transition:transform .25s ease;}
.mobile-nav-cat-toggle.is-open{transform:rotate(180deg);}
.mobile-nav-cat-menu{display:none;flex-direction:column;align-items:center;gap:14px;margin-top:-8px;}
.mobile-nav-cat-menu.is-open{display:flex;}
.mobile-nav-sublink{font-size:16px !important;color:var(--band-ink-2) !important;}

.catalog-filters-summary{display:none;}

/* Product 3D slab viewer — a real CSS 3D box (not a flat plane), so it can be
   rotated freely on every axis without ever going edge-on/blank. The front
   face carries the real product photo; edges use a plain stone-tone gradient
   since no separate edge photography exists. */
.pd-cube{position:absolute;top:50%;left:50%;width:460px;height:460px;margin:-230px 0 0 -230px;transform-style:preserve-3d;will-change:transform;}
.pd-face{position:absolute;background-size:cover;background-position:center;backface-visibility:hidden;}
.pd-face-front{width:460px;height:460px;left:0;top:0;transform:translateZ(17px);}
.pd-face-back{width:460px;height:460px;left:0;top:0;transform:rotateY(180deg) translateZ(17px);filter:brightness(0.8);}
.pd-face-edge{background:linear-gradient(180deg,#4d4438 0%,#28241f 50%,#4d4438 100%);}
.pd-face-right{width:34px;height:460px;left:213px;top:0;transform:rotateY(90deg) translateZ(213px);}
.pd-face-left{width:34px;height:460px;left:213px;top:0;transform:rotateY(-90deg) translateZ(213px);}
.pd-face-top{width:460px;height:34px;left:0;top:213px;transform:rotateX(90deg) translateZ(213px);}
.pd-face-bottom{width:460px;height:34px;left:0;top:213px;transform:rotateX(-90deg) translateZ(213px);}
.theme-pill{display:flex;align-items:center;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px;}
.theme-seg{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;color:var(--ink-2);background:transparent;border:none;cursor:pointer;}
.theme-seg.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,0.12);}
.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:transparent;border:none;cursor:pointer;color:var(--ink);position:relative;transition:background .2s ease;}
.icon-btn:hover{background:var(--surface-2);}
.logo-mark{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;background:var(--ink);flex-shrink:0;}
.site-logo-img{height:64px;width:auto;max-width:220px;object-fit:contain;display:block;}
.site-logo-dark{display:none;}
html[data-theme="dark"] .site-logo-light{display:none;}
html[data-theme="dark"] .site-logo-dark{display:block;}
/* When no dedicated dark-theme logo is uploaded, the light logo is reused on a
   small white chip so it stays legible against a dark header background. */
html[data-theme="dark"] .site-logo-dark-chip{background:#fff;border-radius:6px;padding:5px 8px;}

/* larger, premium-weight trust/benefit icons (hero, why-choose-us) */
.trust-item{display:flex;align-items:center;gap:12px;}
.trust-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);flex-shrink:0;}
.trust-icon svg{width:22px;height:22px;}

/* stat items (About section) — editorial numbers, not dashboard cards */
.stat-item{display:flex;align-items:flex-start;gap:14px;}
.stat-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);color:var(--accent-dark);flex-shrink:0;margin-top:2px;}
.stat-icon svg{width:18px;height:18px;}

/* hero image — a soft editorial fade where the page background merges into
   the photograph, instead of two disconnected rectangles */
.hero-media{position:relative;margin-left:-64px;}
.hero-media::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right, var(--bg) 0%, rgba(255,255,255,0.65) 14%, rgba(255,255,255,0) 38%);
}
@media (max-width:900px){.hero-media{margin-left:0;}.hero-media::before{display:none;}}

/* footer natural-stone texture background with a dark readability overlay */
.footer-stone{
  background-image:linear-gradient(rgba(6,5,4,0.86), rgba(6,5,4,0.92)), url('/images/stock/footer-texture.jpg');
  background-size:cover;background-position:center;
}

/* buttons — a soft premium radius, not sharp, not a pill */
.btn-primary{background:var(--accent);color:var(--btn-ink);border:1px solid var(--accent);border-radius:8px;padding:14px 26px;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;display:inline-block;white-space:nowrap;transition:background .2s ease,transform .2s ease;}
.btn-primary:hover{background:var(--accent-dark);color:var(--pill-active-ink);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:14px 26px;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;display:inline-block;transition:border-color .2s ease,color .2s ease,transform .2s ease;}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-dark);transform:translateY(-1px);}
.btn-outline-band{background:transparent;color:var(--band-ink);border:1px solid var(--band-border);border-radius:8px;padding:14px 26px;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;display:inline-block;transition:border-color .2s ease,color .2s ease,transform .2s ease;}
.btn-outline-band:hover{border-color:var(--band-accent);color:var(--band-accent);transform:translateY(-1px);}
.btn-whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:#1a8a4a;border:1px solid #1a8a4a;border-radius:8px;padding:14px 22px;font-size:13px;font-weight:700;letter-spacing:0.04em;cursor:pointer;}
.btn-whatsapp:hover{background:rgba(37,211,102,0.08);color:#1a8a4a;}
html[data-theme="dark"] .btn-whatsapp{color:#3ddc84;border-color:#3ddc84;}

/* chips / pills */
.tag-chip{display:inline-flex;align-items:center;background:var(--accent-soft);color:var(--accent-dark);font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:5px 10px;border-radius:2px;}
.pill{display:flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:2px;border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;background:transparent;}
.pill.active{border-color:var(--accent-dark);background:var(--accent-dark);color:var(--pill-active-ink);}

/* cards — restrained: a soft lift and a hairline border color shift, no dramatic shadow */
.card-hover{transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;}
.card-hover:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 22px -16px rgba(20,17,16,0.18);}
.card-media{overflow:hidden;}
.card-media svg,.card-media img{transition:transform .6s cubic-bezier(.16,.7,.2,1);}
.card-hover:hover .card-media svg,.card-hover:hover .card-media img{transform:scale(1.045);}
.stock-dot{color:var(--stock-ink);}

/* category row — 6 stone families across, one horizontal-scroll strip on phones */
.cat-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--section-gap-h);}
@media (max-width:960px){.cat-row{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:560px){
  .cat-row{display:flex;overflow-x:auto;gap:16px;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .cat-row .cat-card{flex:0 0 58%;scroll-snap-align:start;}
}

/* featured/signature product grid — 3 across, 2 on phones (never a single column) */
.grid-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--section-gap-h);}
@media (max-width:900px){.grid-products{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* editorial bento layout — one large tile + smaller supporting tiles, used by
   Applications and Gallery so the homepage isn't a run of identical card grids */
.bento-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;}
.bento-tile{position:relative;border-radius:4px;overflow:hidden;display:block;min-height:0;}
.bento-tile[data-stone-swatch]{background:var(--surface-2);}
.bento-caption{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(to top, rgba(10,9,8,0.72), transparent 65%);color:#fff;z-index:1;}
.bento-caption .bento-label{font-size:15px;font-weight:600;}
@media (max-width:780px){
  .bento-grid{grid-template-columns:1fr !important;grid-template-rows:none !important;}
  .bento-grid .bento-feature,.bento-grid .bento-side{grid-row:auto !important;}
  .bento-tile{min-height:220px;}
}

/* catalog facets */
.facet-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:13.5px;color:var(--ink-2);cursor:pointer;}
.facet-row:hover{color:var(--ink);}
.facet-row .count{font-size:11.5px;color:var(--ink-2);background:var(--surface-2);padding:2px 7px;border-radius:999px;}
.facet-title{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);margin:24px 0 4px;}
.facet-title:first-child{margin-top:0;}
.swatch-dot{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,0.1);display:inline-block;}

/* product detail */
.spec-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.spec-row:last-child{border-bottom:none;}
.finish-thumb{width:64px;height:64px;border-radius:6px;overflow:hidden;border:2px solid var(--border);cursor:pointer;position:relative;padding:0;background:none;}
.finish-thumb.active{border-color:var(--accent-dark);}

/* forms */
.field label{font-size:11.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:8px;}
.field input,.field select,.field textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:12px 14px;font-size:13.5px;color:var(--ink);font-family:inherit;}
.field-band label{font-size:11.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--band-ink-2);display:block;margin-bottom:8px;}
.field-band input,.field-band select,.field-band textarea{width:100%;background:var(--band-surface);border:1px solid var(--band-border);border-radius:4px;padding:12px 14px;font-size:13.5px;color:var(--band-ink);font-family:inherit;}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--border);}
.sum-row:last-child{border-bottom:none;}
.sum-row > span:first-child{min-width:0;}

/* whatsapp floating action button */
.whatsapp-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,0.3);z-index:60;transition:transform .2s ease;}
.whatsapp-fab:hover{transform:scale(1.08);}

/* scroll-reveal motion */
.reveal,.reveal-left,.reveal-right{transition:opacity .7s cubic-bezier(.16,.7,.2,1), transform .7s cubic-bezier(.16,.7,.2,1);}
.reveal{opacity:0;transform:translateY(26px);}
.reveal-left{opacity:0;transform:translateX(-40px);}
.reveal-right{opacity:0;transform:translateX(40px);}
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{opacity:1;transform:translate(0,0);}
@keyframes heroIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
.hero-in{opacity:0;animation:heroIn .8s cubic-bezier(.16,.7,.2,1) forwards;}
.arrow-link{display:inline-flex;align-items:center;gap:6px;}
.arrow-link .arrow{display:inline-block;transition:transform .2s ease;}
.arrow-link:hover .arrow{transform:translateX(4px);}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.hero-in{opacity:1 !important;transform:none !important;animation:none !important;}
}

/* scroll progress indicator */
#scrollProgress{position:fixed;top:0;left:0;height:2px;background:var(--band-accent,#d4af37);width:0%;z-index:70;transition:width .1s linear;}

/* custom cursor (desktop, fine-pointer only) */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);will-change:transform;}
.cursor-dot{width:6px;height:6px;background:var(--band-accent,#d4af37);}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(212,175,55,0.55);transition:width .2s ease,height .2s ease,border-color .2s ease,opacity .2s ease;}
.cursor-ring.cursor-hover{width:56px;height:56px;border-color:var(--band-accent,#d4af37);}
body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button{cursor:none;}

/* magnetic buttons */
.magnetic{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1);}

/* product/category card tilt */
.tilt-card{transform-style:preserve-3d;transition:transform .3s ease;}

@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{display:none !important;}
}

/* mobile navigation */
.mobile-nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}
.mobile-nav-overlay{
  position:fixed;inset:0;background:var(--band-bg);z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s ease,visibility .35s,transform .35s ease;
}
.mobile-nav-overlay.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.mobile-nav-close{position:absolute;top:22px;right:24px;background:none;border:none;cursor:pointer;}
.mobile-nav-links{display:flex;flex-direction:column;align-items:center;gap:22px;}
.mobile-nav-links a{
  font-family:'Fraunces',serif;font-size:28px;color:var(--band-ink);text-decoration:none;
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease;
}
.mobile-nav-overlay.is-open .mobile-nav-links a{opacity:1;transform:translateY(0);}

@media (max-width:900px){
  .desktop-nav{display:none !important;}
  .mobile-nav-toggle{display:flex;align-items:center;justify-content:center;}
}

/* interactive 3D hero slab */
.hero-3d-stage{perspective:1400px;display:flex;align-items:center;justify-content:center;}
.hero-3d-slab{position:relative;width:100%;max-width:420px;aspect-ratio:1/1;transform-style:preserve-3d;will-change:transform;}
.hero-3d-face{position:absolute;inset:0;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -20px rgba(0,0,0,0.65);}
.hero-3d-ring{position:absolute;inset:-22px;border:1px solid rgba(212,175,55,0.3);border-radius:50%;pointer-events:none;}
.hero-3d-badge{position:absolute;top:16px;left:16px;background:rgba(255,255,255,0.12);backdrop-filter:blur(4px);color:#f8f2e8;font-size:11px;font-weight:700;letter-spacing:0.05em;padding:7px 12px;border-radius:999px;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr !important;text-align:center;}
  .hero-grid > div:first-child{align-items:center !important;}
  .hero-3d-stage{display:none;}
  .cta-panel{grid-template-columns:1fr !important;}
  .cta-panel > div:last-child{min-height:220px;order:-1;}
}

/* 3/4-column grids collapse gracefully on phones */
@media (max-width:640px){
  .grid-3-mobile{grid-template-columns:1fr !important;}
  .grid-4-mobile{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:480px){
  .grid-4-mobile{grid-template-columns:1fr !important;}
  h1{font-size:26px !important;}
}
@media (max-width:700px){
  .footer-grid{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:420px){
  .footer-grid{grid-template-columns:1fr !important;}
}

/* generic focus states for keyboard/accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* responsive */
@media (max-width:960px){
  .pd-main{grid-template-columns:1fr !important;}
  .pd-viewer{width:100% !important;height:auto !important;aspect-ratio:1/1;}
  .pd-main > *{min-width:0;}
}
@media (max-width:900px){
  .catalog-body{grid-template-columns:1fr !important;}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .catalog-sidebar{display:block;margin-bottom:24px;}
  .catalog-filters-summary{display:flex;width:100%;align-items:center;justify-content:space-between;cursor:pointer;padding:13px 16px;background:var(--surface);border:1px solid var(--border);border-radius:6px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink);font-family:inherit;}
  .catalog-filters-summary.is-open{border-radius:6px 6px 0 0;border-bottom:none;}
  .catalog-filters-icon{font-size:16px;}
  .catalog-filters-panel{display:none;position:static !important;padding:16px;border:1px solid var(--border);border-top:none;border-radius:0 0 6px 6px;}
  .catalog-filters-panel.is-open{display:block;}
  .about-grid,.contact-grid,.an-grid,.qc-grid,.about-story-grid{grid-template-columns:1fr !important;}
  .about-grid > *,.contact-grid > *,.an-grid > *,.qc-grid > *,.about-story-grid > *{min-width:0;}
  .about-story-grid > div:first-child{position:static !important;}
  .scroll-fade-x::after{content:'';position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;background:linear-gradient(to right, transparent, var(--surface));}
}