:root{
  --ink:#2a2118;
  --ink-soft:#7d7263;
  --paper:#ffffff;
  --cream:#f7f3ec;
  --cream-2:#f0e9dc;
  --line: rgba(42,33,24,0.12);
  --brand:#4a3222;       /* deep walnut — logo block, header accents */
  --brand-2:#6b4a30;
  --amber:#c9863f;       /* primary CTA / link accent */
  --amber-dark:#a86a2c;
  --sage:#8a9a7e;         /* illustration greens */
  --shadow: 0 12px 32px rgba(42,33,24,0.10);
  --shadow-sm: 0 4px 14px rgba(42,33,24,0.08);
  --radius: 14px;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0 0 .4em; letter-spacing:-0.01em; color:var(--ink);}
p{margin:0 0 1em;}
code{font-family:var(--font-mono); font-size:.85em; background:var(--cream-2); padding:.15em .4em; border-radius:4px;}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- promo marquee ---------- */
.promo{background:var(--brand); color:#f3e9db; overflow:hidden; white-space:nowrap; position:relative;}
.promo__track{display:inline-flex; gap:48px; padding:9px 0; animation:marquee 26s linear infinite; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.02em;}
.promo__track span{white-space:nowrap;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- topbar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.topbar__inner{max-width:1240px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand__mark{width:44px; height:44px; border-radius:10px; background:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.brand__mark svg{width:24px; height:24px; fill:none; stroke:#f3e9db; stroke-width:1.4;}
.brand__text{font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--ink); line-height:1.15;}
.brand__text em{font-style:normal; color:var(--amber-dark);}
.brand__sub{display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:500;}

.topbar__nav{display:flex; align-items:center; gap:28px; font-size:.9rem; flex:1; justify-content:center;}
.topbar__nav a{text-decoration:none; color:var(--ink-soft); font-weight:500;}
.topbar__nav a:hover{color:var(--ink);}

.topbar__actions{display:flex; align-items:center; gap:16px;}
.icon-btn{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink); border:1px solid transparent; background:none; cursor:pointer;}
.icon-btn:hover{border-color:var(--line);}
.icon-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5;}
.nav-cta{background:var(--amber); color:#fff !important; padding:9px 18px; border-radius:999px; font-weight:600; font-size:.85rem; white-space:nowrap; text-decoration:none;}
.nav-cta:hover{background:var(--amber-dark);}

/* ---------- breadcrumb ---------- */
.breadcrumb{max-width:1240px; margin:0 auto; padding:18px 24px 0; font-size:.85rem; color:var(--ink-soft); display:flex; gap:8px; align-items:center;}
.breadcrumb a{text-decoration:none; color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--amber-dark);}
.breadcrumb span{opacity:.5;}
.breadcrumb strong{color:var(--ink); font-weight:600;}

/* ---------- hero ---------- */
.hero{max-width:1240px; margin:16px auto 0; padding:0 24px;}
.hero__frame{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/8.4; background:linear-gradient(180deg, #efe6d4 0%, #e6dac1 55%, #ded0b2 100%); box-shadow:var(--shadow);}
.hero__photo{position:absolute; inset:0; width:100%; height:100%;}
.hero__photo img{width:100%; height:100%; object-fit:cover; object-position:center 62%;}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(42,33,24,0) 45%, rgba(42,33,24,0.55) 100%);}

.hero__badge{position:absolute; left:22px; bottom:22px; background:rgba(42,33,24,0.82); color:#f3e9db; padding:11px 22px; border-radius:999px; font-weight:600; font-size:.92rem; text-decoration:none; backdrop-filter:blur(4px);}
.hero__badge:hover{background:var(--brand);}

.hero__ai-pill{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:#fff; padding:10px 22px 10px 12px; border-radius:999px; box-shadow:var(--shadow-sm); text-decoration:none; font-weight:600; font-size:.92rem; color:var(--ink); white-space:nowrap;}
.hero__ai-pill span.dot{width:30px; height:30px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hero__ai-pill span.dot svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:1.6;}
.hero__ai-pill:hover{box-shadow:var(--shadow);}

.hero__product-card{position:absolute; right:22px; bottom:22px; background:#fdfbf6; border-radius:16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; padding:12px 16px; max-width:340px; text-decoration:none; color:var(--ink);}
.hero__product-card__thumb{width:64px; height:64px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--cream-2);}
.hero__product-card__thumb svg{width:100%; height:100%;}
.hero__product-card__body h4{margin:0 0 3px; font-family:var(--font-display); font-size:.95rem; font-weight:600; line-height:1.25;}
.hero__product-card__body p{margin:0; font-size:.78rem; color:var(--ink-soft);}
.hero__product-card__cta{margin-left:auto; width:34px; height:34px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hero__product-card__cta svg{width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:1.6;}

.hero__caption{max-width:640px; margin:26px auto 0; text-align:center;}
.eyebrow{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--amber-dark); margin-bottom:12px;}
.hero__caption h1{font-size:clamp(1.7rem, 3.4vw, 2.4rem); line-height:1.2;}
.hero__caption p{color:var(--ink-soft); font-size:1rem;}

/* ---------- floating whatsapp (site-wide) ---------- */
.float-wa{position:fixed; right:20px; bottom:20px; z-index:50; display:flex; align-items:center; gap:9px; background:#25D366; color:#fff; padding:13px 20px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.88rem; box-shadow:0 10px 26px rgba(37,211,102,0.4); transition:opacity .25s ease, transform .25s ease;}
.float-wa svg{width:19px; height:19px; fill:#fff;}
.float-wa:hover{filter:brightness(1.05);}
@media (max-width:640px){
  .float-wa span{display:none;}
  .float-wa{padding:14px; box-shadow:0 8px 20px rgba(37,211,102,0.45); opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;}
  .float-wa.is-visible{opacity:1; transform:none; pointer-events:auto;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.95rem; border:1px solid transparent; cursor:pointer;}
.btn--primary{background:var(--amber); color:#fff;}
.btn--primary:hover{background:var(--amber-dark);}
.btn--ghost{border-color:var(--line); color:var(--ink); background:var(--paper);}
.btn--ghost:hover{border-color:var(--amber);}

/* ---------- section shell ---------- */
main > section{max-width:1240px; margin:0 auto; padding:64px 24px;}
.section-head{max-width:580px; margin-bottom:32px;}
.section-head h2{font-size:1.7rem;}
.section-head p{color:var(--ink-soft); margin:0;}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.tab{font-family:var(--font-mono); font-size:.8rem; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer;}
.tab:hover{border-color:var(--amber); color:var(--ink);}
.tab[aria-selected="true"]{background:var(--brand); border-color:var(--brand); color:#f3e9db; font-weight:600;}

/* ---------- product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:22px;}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; text-align:left; padding:0; color:inherit; font:inherit; transition:transform .2s ease, box-shadow .2s ease; box-shadow:var(--shadow-sm);}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.card__media{aspect-ratio:4/3; position:relative; background:var(--cream-2);}
.card__media svg{width:100%; height:100%;}
.card__badge{position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,0.9); color:var(--amber-dark); padding:4px 8px; border-radius:5px; border:1px solid var(--line);}
.card__viewer-tag{position:absolute; bottom:10px; right:10px; font-family:var(--font-mono); font-size:.62rem; background:rgba(42,33,24,0.78); color:#f3e9db; padding:4px 8px; border-radius:5px;}
.card__soldout{position:absolute; top:10px; right:10px;}
.card__body{padding:16px 18px 20px;}
.card__body h3{font-size:1.05rem; margin:0 0 4px;}
.card__body p{margin:0; color:var(--ink-soft); font-size:.88rem;}

/* ---------- sold-out capsule ---------- */
.badge-soldout{display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:#fff; background:#a3402c; padding:5px 12px; border-radius:999px; white-space:nowrap;}
.viewer-info__top{display:flex; align-items:center; justify-content:space-between; gap:10px;}

/* ---------- about-viewer ---------- */
.about-viewer{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.about-viewer__text{max-width:680px;}
.viewer-levels{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px;}
.viewer-levels li{border-left:2px solid var(--amber); padding-left:14px; color:var(--ink-soft); font-size:.94rem;}
.viewer-levels li span{display:block; font-family:var(--font-display); color:var(--ink); font-size:1rem; margin-bottom:2px;}
.note{color:var(--ink-soft); font-size:.85rem;}

/* ---------- portfolio ---------- */
.portfolio{border-top:1px solid var(--line);}
.grid--portfolio{grid-template-columns:repeat(auto-fill, minmax(260px,1fr));}
.portfolio-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);}
.portfolio-card__media{aspect-ratio:4/3; position:relative; background:var(--cream-2);}
.portfolio-card__media svg{width:100%; height:100%;}
.portfolio-card p{margin:0; padding:14px 16px 16px; font-size:.9rem; color:var(--ink-soft);}

/* ---------- location, catalogue & order ---------- */
.location{border-top:1px solid var(--line);}
.location__layout{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.location__card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:12px;}
.location__card h3{font-size:1.1rem; margin:0;}
.location__card p{margin:0; color:var(--ink-soft); font-size:.92rem; flex:1;}
.location__address{font-family:var(--font-mono); font-size:.86rem; line-height:1.7; color:var(--ink);}
.location__card .btn{align-self:flex-start;}

@media (max-width:820px){
  .location__layout{grid-template-columns:1fr;}
}

/* ---------- about / contact ---------- */
.contact{text-align:left;}
.footer{text-align:center; padding:30px 24px; color:var(--ink-soft); font-size:.8rem; border-top:1px solid var(--line);}

/* ---------- viewer modal ---------- */
.viewer-modal{position:fixed; inset:0; z-index:100; display:none;}
.viewer-modal.is-open{display:block;}
.viewer-modal__backdrop{position:absolute; inset:0; background:rgba(42,33,24,0.55); backdrop-filter:blur(4px);}
.viewer-modal__panel{position:relative; z-index:1; max-width:920px; margin:4vh auto; background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow);}
.viewer-modal__close{position:absolute; top:14px; right:14px; z-index:5; background:rgba(255,255,255,0.9); border:1px solid var(--line); color:var(--ink); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem;}

.viewer-stage{position:relative; width:100%; aspect-ratio:16/10; background:var(--cream-2); touch-action:none; overflow:hidden; cursor:grab;}
.viewer-stage:active{cursor:grabbing;}
.viewer-stage model-viewer{width:100%; height:100%; --poster-color: transparent;}
.viewer-stage img.spin-frame, .viewer-stage img.zoom-img{width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; will-change:transform;}
.viewer-stage__hint{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.68rem; color:#f3e9db; background:rgba(42,33,24,0.75); padding:5px 12px; border-radius:999px; pointer-events:none;}
.viewer-stage__placeholder{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.viewer-stage__placeholder svg{width:70%; height:70%; opacity:.95;}

.viewer-mode-switch{display:flex; gap:8px; padding:12px 20px 0;}
.viewer-mode-switch button{font-family:var(--font-mono); font-size:.72rem; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer;}
.viewer-mode-switch button[aria-pressed="true"]{background:var(--amber); border-color:var(--amber); color:#fff; font-weight:600;}
.viewer-mode-switch button:disabled{opacity:.35; cursor:not-allowed;}

.viewer-info{padding:16px 22px 24px;}
.viewer-info__cat{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-dark); margin-bottom:6px;}
.viewer-info h3{font-size:1.3rem; margin-bottom:6px;}
.viewer-info p{color:var(--ink-soft); font-size:.92rem; margin-bottom:12px;}
.viewer-info__meta{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:12px;}

@media (max-width:640px){
  .hero{margin-top:8px; padding:0 16px;}
  .hero__frame{aspect-ratio:4/5.4; border-radius:16px;}
  .hero__product-card{left:16px; right:16px; max-width:none; bottom:16px;}
  .hero__ai-pill{bottom:112px; top:auto; left:16px; right:16px; transform:none; justify-content:center;}
  .hero__badge{top:16px; left:16px; bottom:auto;}
  .topbar__nav{display:none;}
  .topbar__inner{padding:12px 16px;}
  .brand__sub{display:none;}
  .promo__track{font-size:.68rem;}
  .tabs{flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 24px; padding:0 16px 4px; scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{flex-shrink:0;}
  main > section{padding:48px 16px;}
  .viewer-modal__panel{margin:0; max-height:100vh; border-radius:0; height:100vh;}
}

/* loading skeleton + load error */
.card--skeleton .card__media{background:linear-gradient(90deg,#efe8de 25%,#f7f2ea 50%,#efe8de 75%);background-size:200% 100%;animation:p3d-shimmer 1.4s linear infinite;aspect-ratio:1/1}
.card--skeleton h3,.card--skeleton p{background:#efe8de;border-radius:4px;color:transparent;margin-top:8px}
.load-error{grid-column:1/-1;text-align:center;padding:32px 0;color:#6b5646}
@keyframes p3d-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.card--skeleton .card__media{animation:none}}