/* ═══════════════════════════════════════
   GEMARIX — Shared Design System v1.5
   All pages import this file.
   ═══════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────── */
:root {
  --bg:       #F8F6F2;
  --surface:  #FFFFFF;
  --paper:    #F0EDE6;
  --silk:     #E8E4DC;
  --stone:    #C8C2B8;
  --pewter:   #98928A;
  --graphite: #5A5650;
  --ink:      #1C1B18;
  --void:     #0E0D0B;

  --teal:   #3E7A85;
  --teal-h: #2D5E68;
  --teal-s: #4A9AA8;
  --teal-w: #E6F0F2;
  --teal-g: rgba(62,122,133,0.04);

  --bronze:   #B5956D;
  --bronze-l: #D4BFA0;

  --confirm: #5A8A62;
  --alert:   #C45A4A;

  --sh1: 0 1px 2px rgba(28,27,24,0.03);
  --sh2: 0 4px 12px rgba(28,27,24,0.05);
  --sh3: 0 12px 40px rgba(28,27,24,0.08);
  --shb: 0 8px 32px rgba(62,122,133,0.10);

  --ease: cubic-bezier(0.16,1,0.3,1);
  --r-card: 14px;
  --r-pill: 999px;
}

/* ─── RESET ─────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:'Outfit',sans-serif;
  background:var(--bg);
  color:var(--graphite);
  -webkit-font-smoothing:antialiased;
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
  letter-spacing:0.01em;
}
::selection { background:var(--teal); color:#fff }
a { text-decoration:none; color:inherit }
img { display:block; max-width:100% }
h1,h2,h3,h4 {
  font-family:'Cormorant',serif;
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.01em;
}
button { font-family:'Outfit',sans-serif; cursor:pointer; border:none }

/* ─── NAVIGATION ─────────────────────── */
.nav {
  position:sticky; top:0; z-index:100;
  padding:0 clamp(24px,4vw,64px);
  height:72px;
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(248,246,242,0.92);
  backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(200,194,184,0.30);
}
.nav-logo {
  font-family:'Cormorant',serif;
  font-size:1.35rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--teal-h);
  font-weight:500;
  display:flex; align-items:center; gap:8px;
}
.nav-center {
  display:flex; gap:28px; list-style:none;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-center a {
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--pewter);
  font-weight:400;
  transition:color 0.3s;
}
.nav-center a:hover, .nav-center a.active { color:var(--teal) }
.nav-cta {
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:500;
  padding:9px 20px;
  border:1px solid var(--teal);
  border-radius:var(--r-pill);
  transition:all 0.3s;
  background:transparent;
}
.nav-cta:hover { background:var(--teal); color:#fff; box-shadow:var(--shb) }
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:10px; z-index:110;
}
.nav-toggle span { width:24px; height:2px; background:var(--ink); transition:all 0.3s }
.mobile-menu {
  display:none; position:fixed; inset:0;
  background:var(--bg); z-index:105;
  flex-direction:column; align-items:center; justify-content:center;
  gap:24px; overflow-y:auto; padding:80px 24px 40px;
}
.mobile-menu.open { display:flex }
.mobile-menu a {
  font-size:1.1rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink);
  font-family:'Cormorant',serif;
}
.mobile-menu a:hover { color:var(--teal) }

/* ─── BREADCRUMB ─────────────────────── */
.breadcrumb {
  padding:16px clamp(24px,4vw,64px);
  background:var(--surface);
  border-bottom:1px solid var(--silk);
  font-size:0.68rem;
  letter-spacing:0.06em;
  color:var(--stone);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.breadcrumb a { color:var(--pewter); transition:color 0.2s }
.breadcrumb a:hover { color:var(--teal) }
.breadcrumb .sep { color:var(--stone) }
.breadcrumb .current { color:var(--ink) }

/* ─── BUTTONS ─────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 36px;
  background:var(--teal); color:#fff;
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:500; border-radius:var(--r-pill);
  font-family:'Outfit'; transition:all 0.3s var(--ease);
  box-shadow:var(--sh1);
}
.btn-primary:hover { background:var(--teal-h); box-shadow:var(--shb); transform:translateY(-1px) }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 34px;
  background:transparent; color:var(--graphite);
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:400; border-radius:var(--r-pill);
  border:1px solid var(--silk); font-family:'Outfit';
  transition:all 0.3s; cursor:pointer;
}
.btn-outline:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-1px) }
.btn-wa {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 34px;
  background:#25D366; color:#fff;
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:500; border-radius:var(--r-pill);
  font-family:'Outfit'; transition:all 0.3s;
}
.btn-wa:hover { background:#1eb355; transform:translateY(-1px) }
.btn-wa svg { width:16px; height:16px; fill:currentColor }

/* ─── LAYOUT UTILITIES ───────────────── */
.wrap { max-width:1320px; margin:0 auto; padding:0 clamp(24px,4vw,64px) }
.sec-label {
  display:block;
  font-size:0.55rem; letter-spacing:0.35em;
  text-transform:uppercase; color:var(--teal);
  font-weight:500; margin-bottom:12px;
}
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--silk),transparent); margin:32px 0 }

/* ─── FOOTER ─────────────────────────── */
.footer { background:var(--void); padding:64px clamp(24px,4vw,64px) 24px }
.f-grid {
  display:grid;
  grid-template-columns:2.5fr 1fr 1fr 1fr;
  gap:40px; max-width:1320px; margin:0 auto 48px;
}
.f-brand {
  font-family:'Cormorant',serif; font-size:1.4rem;
  color:#fff; letter-spacing:0.22em;
  text-transform:uppercase; font-weight:500; margin-bottom:12px;
}
.f-desc {
  font-size:0.75rem; color:rgba(255,255,255,0.35);
  line-height:1.75; max-width:280px; margin-bottom:16px;
}
.f-contact { font-size:0.72rem; color:rgba(255,255,255,0.5); line-height:1.9 }
.f-contact a { color:rgba(255,255,255,0.6); transition:color 0.3s }
.f-contact a:hover { color:var(--teal-s) }
.footer h5 {
  font-size:0.5rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--teal-s);
  font-weight:500; margin-bottom:16px; font-family:'Outfit';
}
.footer ul { list-style:none }
.footer li { margin-bottom:8px }
.footer li a { font-size:0.72rem; color:rgba(255,255,255,0.62); transition:color 0.3s }
.footer li a:hover { color:var(--teal-s) }
.f-bottom {
  border-top:1px solid rgba(255,255,255,0.05); padding-top:24px;
  max-width:1320px; margin:0 auto;
  display:flex; justify-content:space-between;
  font-size:0.6rem; color:rgba(255,255,255,0.25);
  gap:16px; flex-wrap:wrap;
}
.f-social { display:flex; gap:12px; margin-top:8px }
.f-social a {
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.06);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.7rem; color:rgba(255,255,255,0.5); transition:all 0.3s;
}
.f-social a:hover { background:var(--teal); color:#fff }

/* ─── WHATSAPP FLOAT ─────────────────── */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:200;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,0.30);
  transition:transform 0.3s;
}
.wa-float:hover { transform:scale(1.08) }
.wa-float svg { width:26px; height:26px; fill:#fff }

/* ─── PAGE HERO ────── */
.page-hero {
  padding:100px clamp(24px,4vw,64px) 64px;
  text-align:center;
  background:var(--surface);
  border-bottom:1px solid var(--silk);
}
.page-hero h1 {
  font-size:clamp(2.2rem,5vw,3.5rem);
  font-weight:300; color:var(--ink);
  margin-bottom:12px; line-height:1.1;
}
.page-hero h1 em { color:var(--teal); font-style:italic }
.page-hero p { font-size:0.9rem; color:var(--pewter); max-width:520px; margin:0 auto }

/* ═══════════════════════════════════════
   CATALOG PAGE
   ═══════════════════════════════════════ */

/* ─── FILTER BAR (pill style) ─────────── */
.filter-bar {
  background:var(--surface);
  border-bottom:1px solid var(--silk);
  padding:12px clamp(24px,4vw,64px);
  display:flex; align-items:center;
  gap:8px; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.filter-bar::-webkit-scrollbar { display:none }
.filter-btn {
  flex-shrink:0;
  padding:8px 18px;
  font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--pewter); font-weight:400;
  background:none; border:1px solid transparent;
  border-radius:var(--r-pill);
  transition:all 0.2s; white-space:nowrap;
  cursor:pointer; font-family:'Outfit';
}
.filter-btn:hover { color:var(--ink); border-color:var(--silk); background:var(--paper) }
.filter-btn.active { background:var(--teal); color:#fff; border-color:var(--teal); font-weight:500 }

/* ─── CATALOG TOOLBAR (search + sort) ─── */
.catalog-toolbar {
  padding:20px clamp(24px,4vw,64px);
  background:var(--bg);
  border-bottom:1px solid var(--silk);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.catalog-toolbar .search-inner { flex:1; min-width:200px; position:relative }
.sort-wrap { flex-shrink:0 }
.sort-select {
  padding:11px 40px 11px 16px;
  border:1px solid var(--silk); border-radius:var(--r-pill);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' stroke='%2398928A' fill='none' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size:0.75rem; color:var(--ink); font-family:'Outfit';
  cursor:pointer; outline:none; transition:border-color 0.2s; appearance:none;
}
.sort-select:focus { border-color:var(--teal) }

/* ─── SEARCH ─────────────────────────── */
.search-inner { position:relative }
.search-input {
  width:100%;
  padding:12px 16px 12px 44px;
  border:1px solid var(--silk);
  border-radius:var(--r-pill);
  background:var(--surface);
  font-size:0.82rem; color:var(--ink);
  font-family:'Outfit'; font-weight:300;
  outline:none; transition:border-color 0.2s;
}
.search-input:focus { border-color:var(--teal) }
.search-input::placeholder { color:var(--stone) }
.search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--pewter);
}
.search-icon svg { width:18px; height:18px; stroke:currentColor; fill:none }

/* ─── PRODUCT GRID ───────────────────── */
.catalog-grid-wrap { padding:48px clamp(24px,4vw,64px) 80px }
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  max-width:1320px; margin:0 auto;
}
.no-results {
  grid-column:1/-1;
  text-align:center;
  padding:80px 24px;
  font-family:'Cormorant',serif;
  font-size:1.4rem; color:var(--pewter);
  font-weight:300;
}

/* ─── PRODUCT CARD ───────────────────── */
.product-card {
  background:var(--surface);
  border:1px solid var(--silk);
  border-radius:var(--r-card);
  overflow:hidden;
  transition:all 0.35s var(--ease);
}
.product-card:hover {
  border-color:transparent;
  box-shadow:var(--sh3);
  transform:translateY(-6px);
}
.card-link { display:block; color:inherit; text-decoration:none }
.card-photo-wrap {
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper);
}
.card-photo {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 0.7s var(--ease);
}
.product-card:hover .card-photo { transform:scale(1.07) }
.card-category-badge {
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:0.48rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal); font-weight:500;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  padding:4px 12px; border-radius:var(--r-pill);
}
.card-hover-cta {
  position:absolute; bottom:-64px; left:0; right:0;
  text-align:center; padding:24px 16px 20px;
  background:linear-gradient(transparent,rgba(14,13,11,0.78));
  color:#fff; font-size:0.56rem; letter-spacing:0.2em;
  text-transform:uppercase; font-weight:500; font-family:'Outfit';
  transition:bottom 0.45s var(--ease);
}
.product-card:hover .card-hover-cta { bottom:0 }
.coming-soon-overlay {
  position:absolute; inset:0; z-index:3;
  background:rgba(14,13,11,0.55);
  display:flex; align-items:center; justify-content:center;
}
.coming-soon-badge {
  font-family:'Cormorant',serif;
  font-size:1.1rem; color:#fff;
  letter-spacing:0.1em; font-style:italic;
  padding:10px 24px;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:var(--r-pill);
  backdrop-filter:blur(4px);
  background:rgba(255,255,255,0.08);
}
.card-body {
  padding:20px 22px 24px;
  border-top:1px solid var(--silk);
}
.card-name {
  font-family:'Cormorant',serif;
  font-size:1.15rem; font-weight:400;
  color:var(--ink); margin-bottom:6px; line-height:1.2;
}
.card-tagline {
  font-size:0.72rem; color:var(--pewter);
  line-height:1.55; font-weight:300; margin-bottom:14px;
}
.card-cta {
  font-size:0.58rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--teal);
  font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
  transition:gap 0.3s;
}
.product-card:hover .card-cta { gap:10px }

/* ─── PLACEHOLDER CATEGORY CARDS ─────── */
.category-placeholder-card { cursor:default }
.category-placeholder-card:hover { transform:none; box-shadow:var(--sh1) }
.ph-photo-wrap {
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(135deg,var(--paper),var(--silk));
  display:flex; align-items:center; justify-content:center;
}
.ph-icon {
  font-family:'Cormorant',serif;
  font-size:3.5rem; color:var(--stone); font-style:italic; line-height:1;
}

/* ═══════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════ */

/* ─── PRODUCT HERO LAYOUT ─────────────── */
.pd-hero {
  padding:48px clamp(24px,4vw,64px) 64px;
  background:var(--surface);
  border-bottom:1px solid var(--silk);
}
.pd-hero-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  max-width:1320px; margin:0 auto;
  align-items:start;
}

/* ─── PHOTO COLUMN ───────────────────── */
.pd-photo-col { position:sticky; top:88px }
.pd-photo-main-wrap {
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:16px;
  cursor:zoom-in;
  box-shadow:var(--sh3);
  position:relative;
  background:var(--paper);
}
.pd-photo-main {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 0.7s var(--ease), opacity 0.25s ease;
  display:block;
}
.pd-photo-main-wrap:hover .pd-photo-main { transform:scale(1.06) }

/* Thumbnail strip */
.pd-thumbs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px; margin-top:12px;
}
.pd-thumb {
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:8px;
  cursor:pointer;
  border:2px solid transparent;
  transition:border-color 0.2s;
  background:var(--paper);
}
.pd-thumb.active { border-color:var(--teal) }
.pd-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.pd-thumb-ph {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  background:var(--paper);
  color:var(--stone);
  font-size:0.48rem; letter-spacing:0.14em;
  text-transform:uppercase; font-weight:500;
  padding:4px;
  text-align:center;
}
.pd-thumb-ph svg { width:18px; height:18px; stroke:currentColor; fill:none; opacity:0.5 }

/* ─── INFO COLUMN ────────────────────── */
.pd-info-col { padding-top:8px }
.pd-category-badge {
  display:inline-block;
  font-size:0.5rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--teal); font-weight:500;
  background:var(--teal-w);
  padding:5px 14px; border-radius:var(--r-pill);
  margin-bottom:16px;
}
.pd-name {
  font-family:'Cormorant',serif;
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:300; color:var(--ink);
  line-height:1.05; margin-bottom:24px;
}

/* ─── SPECS CARD (icon version) ─────── */
.specs-card {
  background:var(--paper);
  border:1px solid var(--silk);
  border-radius:var(--r-card);
  overflow:hidden;
  margin-bottom:16px;
}
.specs-card-title {
  font-size:0.48rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--teal);
  font-weight:500;
  padding:16px 20px 10px;
}
.spec-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px;
  border-top:1px solid var(--silk);
  transition:background 0.2s;
}
.spec-row:hover { background:var(--surface) }
.spec-icon {
  flex-shrink:0; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal-w); border-radius:7px;
  color:var(--teal);
}
.spec-icon svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5 }
.spec-label {
  flex:1;
  font-size:0.57rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--pewter);
  font-weight:500;
}
.spec-value {
  font-size:0.79rem; color:var(--ink);
  font-weight:400; text-align:right;
  line-height:1.5;
}

/* ─── SLAB SIZE VISUALIZATION ─────────── */
.slab-viz-wrap {
  background:var(--paper);
  border:1px solid var(--silk);
  border-radius:var(--r-card);
  padding:16px 20px 12px;
  margin-bottom:16px;
}
.slab-viz-title {
  font-size:0.48rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--teal); font-weight:500; margin-bottom:10px;
}
.slab-viz-svg { width:100%; display:block; max-height:140px }

/* ─── TRUST BADGES ───────────────────── */
.trust-badges {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px; margin-bottom:24px;
}
.trust-badge {
  background:var(--surface);
  border:1px solid var(--silk);
  border-radius:14px; padding:14px 8px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  transition:transform 0.3s var(--ease), box-shadow 0.3s;
}
.trust-badge:hover { transform:translateY(-2px); box-shadow:var(--sh3) }
.trust-badge-icon { color:var(--teal) }
.trust-badge-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2 }
.trust-badge-text {
  font-size:0.44rem; letter-spacing:0.1em; text-transform:uppercase;
  font-weight:600; color:var(--graphite); text-align:center; line-height:1.4;
}

/* Price + CTA section */
.pd-price-section { margin-bottom:24px }
.pd-price-label {
  font-size:0.5rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--pewter);
  font-weight:400; margin-bottom:6px; display:block;
}
.pd-price {
  font-family:'Cormorant',serif;
  font-size:1.8rem; font-weight:400; color:var(--ink);
}
.pd-price-note {
  font-size:0.68rem; color:var(--pewter); margin-top:4px;
}
.pd-ctas {
  display:flex; flex-direction:column; gap:10px;
}
.pd-ctas .btn-primary { justify-content:center }
.pd-ctas .btn-wa      { justify-content:center }
.pd-ctas .btn-outline { justify-content:center }

/* ─── DESCRIPTION SECTION ─────────────── */
.pd-desc {
  padding:64px clamp(24px,4vw,64px);
  max-width:1320px; margin:0 auto;
}
.pd-desc-inner {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:64px;
}
.pd-desc-sidebar {
  position:sticky; top:88px; align-self:start;
}
.pd-desc-sidebar h3 {
  font-size:0.5rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--teal);
  font-weight:500; margin-bottom:20px;
}
.pd-sidebar-nav { list-style:none }
.pd-sidebar-nav li { margin-bottom:10px }
.pd-sidebar-nav a {
  font-size:0.75rem; color:var(--pewter);
  transition:color 0.2s; display:block; padding:2px 0;
}
.pd-sidebar-nav a:hover { color:var(--teal) }

/* ─── DESC BODY ─────────────────────── */
.pd-desc-body h2 {
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300; margin-bottom:40px;
  line-height:1.15;
}
.pd-desc-body h2 em { color:var(--teal); font-style:italic }
.pd-desc-body .desc-section { margin-bottom:0 }
.section-divider { height:1px; background:var(--silk); margin:52px 0 }

/* ─── SECTION HEADS (icon + title) ─────── */
.desc-section-head {
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.desc-section-icon {
  flex-shrink:0; width:38px; height:38px;
  background:var(--teal-w); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.desc-section-icon svg { width:18px; height:18px; stroke:var(--teal); fill:none; stroke-width:1.5 }
.desc-title {
  font-family:'Cormorant',serif; font-size:1.85rem;
  font-weight:400; color:var(--ink); font-style:italic; line-height:1;
}
.desc-section-img {
  width:100%; max-height:340px; object-fit:cover;
  border-radius:var(--r-card); margin-top:20px; display:block;
}

.pd-desc-body p {
  font-size:0.92rem; color:var(--graphite);
  line-height:1.85; margin-bottom:18px;
  font-weight:300;
}
.pd-desc-body p:last-child { margin-bottom:0 }
.pd-desc-body strong { color:var(--ink); font-weight:500 }

/* ─── APPLICATION ICON GRID ──────────── */
.app-icon-grid {
  display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;
}
.app-icon-item {
  display:flex; flex-direction:column; align-items:center; gap:6px; width:72px;
}
.app-icon-box {
  width:46px; height:46px; background:var(--teal-w); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s;
}
.app-icon-item:hover .app-icon-box { background:var(--teal); }
.app-icon-item:hover .app-icon-box svg { stroke:#fff }
.app-icon-box svg { width:22px; height:22px; stroke:var(--teal); fill:none; stroke-width:1.5 }
.app-icon-item span {
  font-size:0.51rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--pewter); text-align:center; line-height:1.3; font-weight:400;
}

/* ─── FINISH SWATCHES ─────────────────── */
.finish-swatches {
  display:flex; flex-wrap:wrap; gap:14px; margin-top:20px;
}
.finish-swatch {
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.finish-swatch-visual {
  width:64px; height:44px; border-radius:8px;
  border:1px solid var(--silk); overflow:hidden;
}
.finish-swatch-label {
  font-size:0.51rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--pewter); font-weight:400;
}

/* Verified note */
.verified-note {
  background:var(--teal-w);
  border-left:3px solid var(--teal);
  padding:16px 20px; border-radius:4px;
  font-size:0.75rem; color:var(--graphite);
  margin-top:24px;
}
.verified-note strong { color:var(--teal-h); font-weight:500 }

/* ─── RELATED PRODUCTS ───────────────── */
.pd-related {
  background:var(--paper);
  border-top:1px solid var(--silk);
  padding:64px clamp(24px,4vw,64px);
}
.pd-related-inner { max-width:1320px; margin:0 auto }
.pd-related-head {
  display:flex; justify-content:space-between;
  align-items:flex-end; margin-bottom:36px;
}
.pd-related-head h3 {
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:300; line-height:1.1;
}
.pd-related-head h3 em { color:var(--teal); font-style:italic }
.pd-related-head a {
  font-size:0.6rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--teal);
  font-weight:500;
}
.related-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

/* ─── LIGHTBOX ───────────────────────── */
.lightbox {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(14,13,11,0.92);
  align-items:center; justify-content:center;
  padding:24px;
  cursor:zoom-out;
}
.lightbox.open { display:flex }
.lightbox-img {
  max-width:90vw; max-height:90vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 24px 80px rgba(0,0,0,0.5);
}
.lightbox-close {
  position:absolute; top:24px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.12);
  color:#fff; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:1px solid rgba(255,255,255,0.2);
  transition:background 0.2s;
}
.lightbox-close:hover { background:rgba(255,255,255,0.24) }

/* ─── SAMPLE REQUEST MODAL ───────────── */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:600;
  background:rgba(14,13,11,0.72); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open { display:flex }
.modal-box {
  background:var(--surface); border-radius:20px; padding:40px;
  max-width:420px; width:100%; position:relative;
  box-shadow:0 32px 80px rgba(14,13,11,0.15);
  animation:fadeUp 0.35s var(--ease);
}
.modal-close {
  position:absolute; top:16px; right:16px; width:36px; height:36px;
  background:var(--paper); border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--graphite);
  transition:background 0.2s; border:none; cursor:pointer;
}
.modal-close:hover { background:var(--silk) }
.modal-close svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2 }
.modal-title {
  font-family:'Cormorant',serif; font-size:2rem; font-weight:400;
  color:var(--ink); margin-bottom:6px; line-height:1.1;
}
.modal-stone { font-size:0.8rem; color:var(--pewter); margin-bottom:10px }
.modal-stone strong { color:var(--ink) }
.modal-desc { font-size:0.82rem; color:var(--graphite); margin-bottom:24px; line-height:1.75 }
.modal-actions { display:flex; flex-direction:column; gap:10px }
.modal-actions .btn-wa, .modal-actions .btn-outline { justify-content:center }

/* ─── SCROLL FADE-IN ─────────────────── */
.observe {
  opacity:0; transform:translateY(24px);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.observe.in-view { opacity:1; transform:translateY(0) }
.observe.d1 { transition-delay:0.1s }
.observe.d2 { transition-delay:0.2s }
.observe.d3 { transition-delay:0.3s }
.observe.d4 { transition-delay:0.4s }

/* ─── ANIMATIONS ─────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px) }
  to   { opacity:1; transform:translateY(0) }
}
.fade-up { animation:fadeUp 0.7s var(--ease) both }
.fade-up-d1 { animation-delay:0.1s }
.fade-up-d2 { animation-delay:0.2s }
.fade-up-d3 { animation-delay:0.3s }

/* ─── RESPONSIVE ─────────────────────── */
@media(max-width:1100px) {
  .catalog-grid { grid-template-columns:repeat(3,1fr) }
  .related-grid { grid-template-columns:repeat(2,1fr) }
  .f-grid { grid-template-columns:1fr 1fr; gap:32px }
}
@media(max-width:900px) {
  .nav-center { display:none }
  .nav-toggle { display:flex }
  .nav-cta { display:none }
  .pd-hero-inner { grid-template-columns:1fr; gap:40px }
  .pd-photo-col { position:static; top:auto }
  .pd-desc-inner { grid-template-columns:1fr }
  .pd-desc-sidebar { position:static }
  .f-bottom { flex-direction:column; gap:8px; text-align:center }
}
@media(max-width:700px) {
  .catalog-grid { grid-template-columns:repeat(2,1fr); gap:16px }
  .pd-thumbs { grid-template-columns:repeat(4,1fr) }
  .pd-related-head { flex-direction:column; gap:16px; align-items:flex-start }
  .related-grid { grid-template-columns:repeat(2,1fr) }
  .trust-badges { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:480px) {
  .catalog-grid { grid-template-columns:1fr }
  .related-grid { grid-template-columns:1fr }
  .f-grid { grid-template-columns:1fr }
  .catalog-toolbar { flex-direction:column; align-items:stretch }
  .sort-wrap { margin-left:0 }
  .desc-title { font-size:1.55rem }
}





/* footer-text-fix: light text on var(--void) dark background */
.f-brand { color:#fff; }
.f-desc  { color:rgba(255,255,255,0.58); font-size:0.78rem; line-height:1.65; }
.f-contact div, .f-contact a { color:rgba(255,255,255,0.65); font-size:0.75rem; }
.f-contact a:hover { color:var(--teal-s); }
.f-social a { color:rgba(255,255,255,0.55); font-size:0.7rem; }
.f-social a:hover { color:var(--teal-s); }
.f-bottom { color:rgba(255,255,255,0.38); font-size:0.65rem; border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; margin-top:40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }