/* ==========================================================================
   Look Good Xclusive — Design System
   Palette verified against original Replit source (src/index.css):
   primary hsl(0 72% 51%) = #dc2828, accent hsl(46 65% 52%) = #d4af35,
   dark bg hsl(0 0% 4%) = #0a0a0a, dark card hsl(0 0% 7%) = #121212,
   dark border hsl(0 0% 15%) = #262626
   Type: Playfair Display (display/serif) + Inter (body/UI) — matches original
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,900;1,500;1,700&display=swap');

:root{
  --ink:            #0a0a0a;
  --ink-raised:     #121212;
  --ink-panel:      #171717;
  --hairline:       #262626;
  --hairline-soft:  #1c1c1c;

  --bone:           #fafafa;
  --bone-dim:       #d4d4d4;
  --bone-faint:     #a6a6a6;

  --crimson:        #dc2828;
  --crimson-bright: #e94545;
  --crimson-deep:   #8f1a1a;

  --gold:           #d4af35;
  --gold-bright:    #e6c968;
  --gold-dim:       #9c8228;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{ overflow-x:hidden; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--crimson); color:var(--bone); }

:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}

.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}

h1,h2,h3,h4{
  font-family:'Playfair Display',serif;
  font-weight:600;
  line-height:1.08;
  margin:0;
  color:var(--bone);
}

.italic-accent{
  font-style:italic;
  font-weight:700;
  color:var(--crimson-bright);
}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------------------------------- Nav ---------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(10,9,8,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-soft);
}

.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 28px;
  max-width:1240px;
  margin:0 auto;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.brand-mark{
  width:42px; height:42px;
  border-radius:50%;
  border:1.5px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #241d17, var(--ink-raised));
}
.brand-mark svg{ width:22px; height:22px; }
.brand-name{
  font-family:'Playfair Display',serif;
  font-size:1.28rem;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}
.brand-name em{
  font-style:italic;
  color:var(--crimson-bright);
}

.primary-nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  justify-content:center;
}
.nav-item{ position:relative; }
.nav-link{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  font-size:.88rem;
  font-weight:500;
  color:var(--bone-dim);
  border-radius:var(--radius-sm);
  transition:color .2s var(--ease);
  white-space:nowrap;
}
.nav-link:hover, .nav-link.active{ color:var(--bone); }
.nav-link .chev{
  width:9px; height:9px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ease);
  opacity:.7;
}
.nav-item:hover .nav-link .chev{ transform:rotate(225deg) translateY(1px); }

.nav-cta{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  background:var(--crimson);
  color:var(--bone);
  font-size:.84rem;
  font-weight:600;
  border-radius:999px;
  border:1px solid var(--crimson-bright);
  transition:background .2s var(--ease), transform .2s var(--ease);
  white-space:nowrap;
}
.nav-cta .short-label{ display:none; }
.nav-cta:hover{ background:var(--crimson-bright); transform:translateY(-1px); }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--bone);
  align-items:center; justify-content:center;
}

/* Mega menu */
.mega{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%);
  width:min(760px, 86vw);
  background:var(--ink-panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7);
  padding:26px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px 30px;
  opacity:0;
  visibility:hidden;
  translate:0 6px;
  transition:opacity .18s var(--ease), translate .18s var(--ease), visibility .18s;
}
.nav-item:hover .mega,
.nav-item:focus-within .mega{
  opacity:1; visibility:visible; translate:0 0;
}
.mega-group-title{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-weight:700;
  color:var(--gold-bright);
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--hairline);
}
.mega-group-title .count{
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-weight:500;
  color:var(--bone-faint);
  margin-left:6px;
}
.mega-list a{
  display:flex;
  justify-content:space-between;
  padding:6px 4px;
  font-size:.85rem;
  color:var(--bone-dim);
  border-radius:var(--radius-sm);
  transition:color .15s, padding-left .15s;
}
.mega-list a:hover{ color:var(--bone); padding-left:8px; }
.mega-list a span{ color:var(--bone-faint); font-size:.76rem; }
.mega-foot{
  grid-column:1 / -1;
  padding-top:14px;
  border-top:1px solid var(--hairline);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.mega-foot .see-all{
  color:var(--crimson-bright);
  font-size:.84rem;
  font-weight:600;
}

/* ------------------------------- Buttons --------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn-solid{
  background:var(--crimson);
  border-color:var(--crimson-bright);
  color:var(--bone);
}
.btn-solid:hover{ background:var(--crimson-bright); transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  border-color:var(--gold-dim);
  color:var(--gold-bright);
}
.btn-outline:hover{ border-color:var(--gold-bright); background:rgba(201,162,74,.08); transform:translateY(-2px); }
.btn-ghost{
  background:transparent;
  border-color:var(--hairline);
  color:var(--bone-dim);
}
.btn-ghost:hover{ color:var(--bone); border-color:var(--bone-faint); }
.btn-whatsapp{
  background:#1c1a17;
  border-color:#3a5a40;
  color:#a9d6ae;
}
.btn-whatsapp:hover{ background:#20361f; border-color:#4d7a54; transform:translateY(-2px); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:10px 18px; font-size:.8rem; }

/* --------------------------------- Hero ----------------------------------- */

.hero{
  position:relative;
  padding:96px 0 84px;
  overflow:clip;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(184,28,44,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(201,162,74,.08), transparent 60%),
    var(--ink);
}
.hero-rule{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(243,237,225,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,237,225,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 700px 500px at 50% 0%, black, transparent 75%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:52px;
  align-items:center;
  text-align:left;
}
.hero-copy{ max-width:560px; }
.hero .eyebrow-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  border:1px solid var(--crimson-deep);
  background:rgba(184,28,44,.08);
  border-radius:999px;
  margin-bottom:28px;
}
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing:-.01em;
}
.hero p.lede{
  margin:26px 0 0;
  max-width:480px;
  color:var(--bone-dim);
  font-size:1.06rem;
}
.hero-actions{
  display:flex;
  justify-content:flex-start;
  gap:16px;
  margin-top:40px;
  flex-wrap:wrap;
}

/* Hero visual — real product photography, editorial framing */
.hero-visual{
  position:relative;
  animation:heroVisualIn 1s var(--ease) .3s both;
}
.hero-visual-frame{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--hairline);
  background:var(--ink-panel);
  box-shadow:0 40px 90px -32px rgba(0,0,0,.65);
}
.hero-visual-frame img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
  transform:scale(1.08);
  transition:transform 1.4s var(--ease);
}
.hero-visual:hover .hero-visual-frame img{ transform:scale(1); }
.hero-visual-frame::before,
.hero-visual-frame::after{
  content:"";
  position:absolute;
  width:30px; height:30px;
  pointer-events:none;
  z-index:2;
}
.hero-visual-frame::before{
  top:14px; left:14px;
  border-top:1.5px solid var(--gold-bright);
  border-left:1.5px solid var(--gold-bright);
}
.hero-visual-frame::after{
  bottom:14px; right:14px;
  border-bottom:1.5px solid var(--gold-bright);
  border-right:1.5px solid var(--gold-bright);
}
.hero-visual-tag{
  position:absolute;
  left:18px; bottom:18px;
  z-index:3;
  padding:9px 16px;
  background:rgba(10,9,8,.6);
  border:1px solid rgba(212,175,53,.35);
  border-radius:999px;
  backdrop-filter:blur(10px);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bone);
}
@keyframes heroVisualIn{
  from{ opacity:0; transform:translateY(26px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.hero-strip{
  position:relative;
  margin-top:72px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.hero-strip a{
  padding:20px 14px;
  text-align:center;
  border-right:1px solid var(--hairline);
  transition:background .2s;
}
.hero-strip a:last-child{ border-right:none; }
.hero-strip a:hover{ background:var(--ink-raised); }
.hero-strip .num{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--gold-bright);
}
.hero-strip .lbl{
  display:block;
  margin-top:4px;
  font-size:.76rem;
  color:var(--bone-faint);
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* ------------------------------- Sections --------------------------------- */

.section{ padding:96px 0; }
.section-alt{ background:var(--ink-raised); }
.section-head{
  max-width:620px;
  margin:0 0 52px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin-top:14px; }
.section-head p{ margin-top:16px; color:var(--bone-dim); }

/* Category cards */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.cat-card{
  position:relative;
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:30px 24px;
  background:linear-gradient(160deg, var(--ink-panel), var(--ink-raised));
  overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.cat-card:hover{ border-color:var(--gold-dim); transform:translateY(-4px); }
.cat-card .cat-thumb{
  width:100%; aspect-ratio:1/1;
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:18px;
  background:var(--ink);
  border:1px solid var(--hairline);
}
.cat-card .cat-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.cat-card:hover .cat-thumb img{ transform:scale(1.06); }
.cat-card h3{ font-size:1.24rem; }
.cat-card .count{
  display:block;
  margin-top:6px;
  font-size:.78rem;
  color:var(--gold);
  letter-spacing:.04em;
}
.cat-card p{ margin-top:12px; font-size:.87rem; color:var(--bone-faint); }
.cat-card .arrow{
  position:absolute; top:24px; right:24px;
  width:34px; height:34px;
  border:1px solid var(--hairline);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  color:var(--bone-faint);
  transition:all .25s var(--ease);
}
.cat-card:hover .arrow{ background:var(--crimson); border-color:var(--crimson-bright); color:var(--bone); transform:rotate(45deg); }

/* About */
.about-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.about-visual{
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--hairline);
  position:relative;
}
.about-visual img{ width:100%; height:100%; object-fit:cover; }
.about-copy .eyebrow{ display:block; margin-bottom:14px; }
.about-copy h2{ font-size:clamp(1.9rem,3.2vw,2.5rem); margin-bottom:22px; }
.about-copy p{ color:var(--bone-dim); margin-bottom:16px; }
.about-quote{
  margin-top:28px;
  padding:22px 24px;
  border-left:2px solid var(--crimson);
  background:var(--ink-panel);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--bone);
}
.feature-list{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.feature-list li{ display:flex; align-items:flex-start; gap:12px; font-size:.92rem; color:var(--bone-dim); }
.feature-list .tick{
  flex-shrink:0;
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid var(--gold-dim);
  color:var(--gold-bright);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem;
  margin-top:1px;
}

/* Product grid (shared home + shop) */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.product-card{
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--ink-panel);
  transition:border-color .2s, transform .2s var(--ease);
  cursor:pointer;
}
.product-card:hover{ border-color:var(--gold-dim); transform:translateY(-3px); }
.product-thumb{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0f0d0c;
  position:relative;
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.product-card:hover .product-thumb img{ transform:scale(1.05); }
.product-thumb.img-fallback{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--ink-panel), var(--ink-raised));
}
.product-thumb.img-fallback::after{
  content:"Photo coming soon";
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--bone-faint);
  text-align:center;
  padding:0 16px;
}
.product-thumb .badge{
  position:absolute; top:10px; left:10px;
  padding:4px 10px;
  font-size:.65rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:rgba(10,9,8,.78);
  border:1px solid var(--hairline);
  border-radius:999px;
  color:var(--gold-bright);
}
.product-info{ padding:14px 16px 16px; }
.product-info .sub{
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--bone-faint);
}
.product-info h4{
  margin-top:4px;
  font-family:'Inter',sans-serif;
  font-size:.92rem;
  font-weight:600;
  color:var(--bone);
  line-height:1.35;
}
.product-info .order-link{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--crimson-bright);
}

.section-foot{ margin-top:44px; text-align:center; }

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
}
.contact-card{
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:30px;
  background:var(--ink-panel);
}
.contact-card + .contact-card{ margin-top:20px; }
.contact-card .icn{
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(184,28,44,.12);
  border:1px solid var(--crimson-deep);
  color:var(--crimson-bright);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.contact-card h3{ font-size:1.1rem; margin-bottom:6px; }
.contact-card p{ color:var(--bone-dim); font-size:.9rem; }
.contact-card a.value{ color:var(--gold-bright); font-weight:600; }

.form-panel{
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:36px;
  background:var(--ink-panel);
}
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-size:.8rem;
  font-weight:600;
  color:var(--bone-dim);
  margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%;
  padding:13px 16px;
  background:var(--ink);
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  color:var(--bone);
  font-size:.92rem;
  transition:border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--gold-dim);
  outline:none;
}
.field textarea{ resize:vertical; min-height:120px; }

/* Footer */
.site-footer{
  border-top:1px solid var(--hairline);
  padding:64px 0 32px;
  background:var(--ink);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px;
}
.footer-brand p{ margin-top:16px; color:var(--bone-faint); font-size:.88rem; max-width:280px; }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{
  width:38px; height:38px;
  border:1px solid var(--hairline);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--bone-dim);
  transition:all .2s;
}
.social-row a:hover{ border-color:var(--crimson-bright); color:var(--crimson-bright); }
.footer-col h4{
  font-family:'Inter',sans-serif;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
.footer-col li{ margin-bottom:11px; }
.footer-col a, .footer-col span{ font-size:.88rem; color:var(--bone-dim); }
.footer-col a:hover{ color:var(--bone); }
.footer-bottom{
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--hairline-soft);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
  color:var(--bone-faint);
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom em{ color:var(--crimson-bright); font-style:italic; font-family:'Playfair Display',serif; }

/* Product modal */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(6,5,4,.82);
  backdrop-filter:blur(6px);
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s var(--ease), visibility .22s;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{
  width:min(880px, 100%);
  max-height:88vh;
  overflow:auto;
  background:var(--ink-panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  display:grid;
  grid-template-columns:1fr 1fr;
  translate:0 14px;
  transition:translate .22s var(--ease);
}
.modal-overlay.open .modal-box{ translate:0 0; }
.modal-img{ background:#0f0d0c; }
.modal-img img{ width:100%; height:100%; object-fit:cover; min-height:280px; }
.modal-img.img-fallback{
  display:flex; align-items:center; justify-content:center;
  min-height:280px;
}
.modal-img.img-fallback::after{
  content:"Photo coming soon";
  font-size:.85rem;
  color:var(--bone-faint);
}
.modal-body{ padding:36px; position:relative; }
.modal-close{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background:transparent;
  color:var(--bone-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.modal-close:hover{ color:var(--bone); border-color:var(--bone-faint); }
.modal-body .sub{
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold);
}
.modal-body h3{ margin-top:10px; font-size:1.5rem; }
.modal-body .desc{ margin-top:16px; color:var(--bone-dim); font-size:.95rem; line-height:1.7; }
.modal-body .actions{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.modal-body .note{ margin-top:16px; font-size:.78rem; color:var(--bone-faint); }
.modal-view-details{
  display:inline-block;
  margin-top:14px;
  font-size:.82rem;
  font-weight:600;
  color:var(--gold-bright);
}
.product-info h4 a.product-link{ color:inherit; text-decoration:none; }
.product-info h4 a.product-link:hover{ color:var(--gold-bright); }

/* ------------------------------ Product detail page ------------------------------ */
.product-detail{ padding:48px 0 80px; }
.product-detail-breadcrumb{ font-size:.8rem; color:var(--bone-faint); margin-bottom:24px; }
.product-detail-breadcrumb a{ color:var(--bone-dim); }
.product-detail-breadcrumb a:hover{ color:var(--gold-bright); }
.product-detail-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.product-detail-gallery{ position:sticky; top:96px; }
.product-detail-hero{
  aspect-ratio:1/1;
  background:#0f0d0c;
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.product-detail-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-detail-hero.img-fallback{ display:flex; align-items:center; justify-content:center; }
.product-detail-hero.img-fallback::after{ content:"Photo coming soon"; font-size:.9rem; color:var(--bone-faint); }
.product-detail-thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.product-detail-thumbs button{
  width:64px; height:64px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid var(--hairline);
  padding:0;
  background:#0f0d0c;
  cursor:pointer;
}
.product-detail-thumbs button.active{ border-color:var(--gold); }
.product-detail-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-detail-info .sub{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.product-detail-info h1{ margin-top:10px; font-size:clamp(1.8rem,3vw,2.4rem); }
.product-detail-info .desc{ margin-top:20px; color:var(--bone-dim); font-size:1rem; line-height:1.8; }
.product-detail-info .actions{ margin-top:32px; display:flex; flex-direction:column; gap:12px; max-width:340px; }
.related-section{ margin-top:88px; }
.related-section h2{ font-size:clamp(1.4rem,2.2vw,1.9rem); margin-bottom:28px; }
@media (max-width: 860px){
  .product-detail-layout{ grid-template-columns:1fr; gap:28px; }
  .product-detail-gallery{ position:static; }
}

/* ------------------------------ Mobile menu -------------------------------- */

.mobile-menu{
  position:fixed;
  inset:0;
  top:73px;
  background:var(--ink);
  z-index:190;
  transform:translateX(100%);
  transition:transform .28s var(--ease);
  overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-inner{ padding:24px 20px 60px; }
.mob-links{ display:flex; flex-direction:column; border-bottom:1px solid var(--hairline); margin-bottom:20px; }
.mob-links a{ padding:14px 4px; font-size:1.05rem; font-family:'Playfair Display',serif; font-weight:600; border-bottom:1px solid var(--hairline-soft); }
.mob-cat{ border-bottom:1px solid var(--hairline-soft); }
.mob-cat summary{
  padding:14px 4px;
  font-size:.95rem;
  font-weight:600;
  color:var(--bone);
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  list-style:none;
}
.mob-cat summary::-webkit-details-marker{ display:none; }
.mob-cat summary span{ color:var(--bone-faint); font-weight:400; font-size:.82rem; }
.mob-sub-list{ display:flex; flex-direction:column; padding:0 4px 14px 12px; }
.mob-sub-list a{ padding:9px 0; font-size:.88rem; color:var(--bone-dim); display:flex; justify-content:space-between; }
.mob-sub-list a span{ color:var(--bone-faint); }

/* -------------------------------- Shop page -------------------------------- */

.shop-hero{
  padding:64px 0 40px;
  background:radial-gradient(ellipse 800px 400px at 50% -20%, rgba(184,28,44,.14), transparent 60%), var(--ink);
  text-align:center;
}
.shop-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:44px;
  align-items:start;
  padding:56px 0 100px;
}
.filter-panel{
  position:sticky;
  top:96px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:24px;
  background:var(--ink-panel);
}
.filter-panel h4{
  font-family:'Inter',sans-serif;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.filter-search{
  margin-bottom:22px;
}
.filter-group{ margin-bottom:22px; }
.filter-group:last-child{ margin-bottom:0; }
.cat-toggle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:10px 4px;
  font-size:.88rem;
  font-weight:600;
  color:var(--bone);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline-soft);
  text-align:left;
}
.cat-toggle span:not(.chev){ color:var(--bone-faint); font-weight:500; font-size:.8rem; }
.cat-toggle .chev{
  width:8px; height:8px;
  border-right:1.5px solid var(--bone-faint);
  border-bottom:1.5px solid var(--bone-faint);
  transform:rotate(45deg);
  transition:transform .2s;
}
.cat-toggle[aria-expanded="true"] .chev{ transform:rotate(225deg); }
.sub-list{
  overflow:hidden;
  max-height:0;
  transition:max-height .25s var(--ease);
}
.sub-list.open{ max-height:600px; }
.sub-list li{ }
.sub-list button{
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:9px 4px 9px 10px;
  font-size:.83rem;
  color:var(--bone-dim);
  background:transparent;
  border:none;
  border-radius:var(--radius-sm);
  text-align:left;
}
.sub-list button:hover{ color:var(--bone); background:var(--ink-raised); }
.sub-list button.active{ color:var(--gold-bright); background:rgba(201,162,74,.08); }
.sub-list button span{ color:var(--bone-faint); font-size:.76rem; }

.shop-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:14px;
}
.shop-toolbar .result-count{ font-size:.88rem; color:var(--bone-dim); }
.shop-toolbar .result-count strong{ color:var(--bone); }
.active-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  font-size:.78rem;
  border:1px solid var(--gold-dim);
  color:var(--gold-bright);
  border-radius:999px;
}
.chip button{ background:none; border:none; color:inherit; font-size:.9rem; line-height:1; }

.empty-state{
  padding:80px 20px;
  text-align:center;
  color:var(--bone-faint);
}
.load-more-wrap{ text-align:center; margin-top:40px; }

/* Mobile drawer for filters */
.filter-drawer-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:var(--ink-panel);
  color:var(--bone);
  font-size:.84rem;
  font-weight:600;
  flex-shrink:0;
  transition:border-color .2s, color .2s;
}
.filter-drawer-toggle:hover{ border-color:var(--gold-dim); color:var(--gold-bright); }
.filter-drawer-head{ display:none; }
.filter-drawer-close{
  display:none;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background:transparent;
  color:var(--bone-dim);
  align-items:center; justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.filter-drawer-close:hover{ color:var(--bone); border-color:var(--bone-faint); }
.filter-drawer-backdrop{
  position:fixed; inset:0;
  background:rgba(6,5,4,.66);
  backdrop-filter:blur(2px);
  z-index:290;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s var(--ease), visibility .28s;
}
.filter-drawer-backdrop.open{ opacity:1; visibility:visible; }

/* --------------------------------- Utility --------------------------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }

/* --------------------------------- Responsive ------------------------------- */

@media (max-width: 980px){
  .primary-nav{ display:none; }
  .nav-toggle{ display:flex; flex-shrink:0; }
  .nav-row{ gap:12px; }
  .nav-cta{ padding:10px 16px; font-size:.78rem; white-space:nowrap; }
  .brand-name{ font-size:1.08rem; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; gap:40px; }
  .hero-copy{ max-width:600px; margin:0 auto; }
  .hero p.lede{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-visual-frame{ aspect-ratio:16/11; }
  .hero-visual-frame img{ object-position:center 15%; }
  .cat-grid, .product-grid{ grid-template-columns:repeat(2, 1fr); }
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .shop-layout{ grid-template-columns:1fr; }
  .filter-panel{
    position:fixed;
    top:0; bottom:0; left:0;
    z-index:300;
    width:86vw;
    max-width:360px;
    height:100vh;
    overflow-y:auto;
    border-radius:0;
    border:none;
    border-right:1px solid var(--hairline);
    transform:translateX(-100%);
    transition:transform .3s var(--ease);
  }
  .filter-panel.open{ transform:translateX(0); }
  .filter-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--hairline);
  }
  .filter-drawer-head h4{
    font-family:'Playfair Display',serif;
    font-size:1.1rem;
    font-weight:700;
    color:var(--bone);
    text-transform:none;
    letter-spacing:normal;
  }
  .filter-drawer-close{ display:flex; }
  .filter-drawer-toggle{ display:inline-flex; }
  .modal-box{ grid-template-columns:1fr; }
  .modal-img img{ min-height:200px; }
}
@media (max-width: 560px){
  .cat-grid, .product-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .hero-strip{ grid-template-columns:repeat(2,1fr); }
  .hero-strip a:nth-child(2){ border-right:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .nav-row{ padding:14px 16px; }
  .brand-name{ font-size:.98rem; }
  .brand-mark{ width:36px; height:36px; }
  .nav-cta .short-label{ display:inline; }
  .nav-cta .full-label{ display:none; }
  .nav-cta{ padding:9px 14px; font-size:.76rem; }
}

/* ==========================================================================
   Motion system
   ========================================================================== */

body{ opacity:0; }
body.page-ready{ opacity:1; transition:opacity .4s var(--ease); }

[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal="scale"].is-visible{ transform:scale(1); }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

.stagger-item{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:var(--stagger, 0ms);
}
.stagger-item.is-visible{ opacity:1; transform:translateY(0); }

.site-header{ transition:background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.is-scrolled{
  background:rgba(10,10,10,.94);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5);
}
.site-header.is-scrolled .nav-row{ padding-top:11px; padding-bottom:11px; }

.hero-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  opacity:.55;
  animation:orbfloat 9s ease-in-out infinite;
}
.hero-orb-1{ width:340px; height:340px; top:-80px; left:-60px; background:radial-gradient(circle, rgba(220,40,40,.35), transparent 70%); }
.hero-orb-2{ width:280px; height:280px; top:40px; right:-40px; background:radial-gradient(circle, rgba(212,175,53,.28), transparent 70%); animation-delay:-3s; }
.hero-orb-3{ width:220px; height:220px; bottom:-100px; left:38%; background:radial-gradient(circle, rgba(220,40,40,.2), transparent 70%); animation-delay:-6s; }
@keyframes orbfloat{
  0%, 100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(0,-22px,0) scale(1.08); }
}

.hero .eyebrow-badge{ animation:heroUp .7s var(--ease) both; }
.hero h1{ animation:heroUp .8s var(--ease) .08s both; }
.hero p.lede{ animation:heroUp .8s var(--ease) .16s both; }
.hero-actions{ animation:heroUp .8s var(--ease) .24s both; }
@keyframes heroUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:.8;
}
.scroll-cue span{
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-faint);
}
.scroll-cue .line{
  width:1px;
  height:34px;
  background:linear-gradient(var(--crimson-bright), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-cue .line::after{
  content:"";
  position:absolute;
  top:-100%;
  left:0; right:0;
  height:100%;
  background:linear-gradient(var(--gold-bright), transparent);
  animation:scrolldrip 1.8s ease-in-out infinite;
}
@keyframes scrolldrip{
  0%{ top:-100%; }
  100%{ top:100%; }
}

.btn{ position:relative; overflow:hidden; }
.btn-solid::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.25) 40%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn-solid:hover::before{ transform:translateX(120%); }
.ripple{
  position:absolute;
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  transform:translate(-50%,-50%) scale(0);
  animation:rippleGrow .6s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleGrow{
  to{ transform:translate(-50%,-50%) scale(22); opacity:0; }
}

.cat-card, .product-card{ will-change:transform; }

.mega .mega-list a{
  opacity:0;
  transform:translateY(6px);
  animation:megaItemIn .35s var(--ease) forwards;
}
.nav-item:hover .mega .mega-list a{ animation-play-state:running; }
@keyframes megaItemIn{ to{ opacity:1; transform:translateY(0); } }

.nav-link{ position:relative; }
.nav-link::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:4px;
  height:1.5px;
  background:var(--crimson-bright);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .stagger-item{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-orb, .scroll-cue .line::after, .hero .eyebrow-badge, .hero h1, .hero p.lede, .hero-actions{ animation:none !important; }
  body{ opacity:1; }
}

/* Touch targets: 44px minimum on coarse pointers, without changing visual layout */
@media (pointer:coarse){
  .nav-toggle, .filter-drawer-toggle, .filter-drawer-close, .modal-close, .nav-cta{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}