/* Sovereign Weft — shared site styles
   Color system: every dark surface is a pure neutral step of ONE black
   (#0F0F0F), never a warm-tinted variant — that's what was making cards,
   photo tiles, and photo edges look like mismatched shades of black
   sitting next to each other. Richness comes from photography and the
   gold accent, not from CSS-generated background gradients. */
:root{
  --jet:#0F0F0F;
  --jet-1:#141414;
  --jet-2:#191919;
  --gold:#D4AF37;
  --gold-soft:#c7a542;
  --champagne:#E6C79C;
  --blush:#CFA6A6;
  --ivory:#F7F3ED;
  --jet-soft:#141414;
  --jet-card:#141414;
  --border-soft:rgba(212,175,55,0.16);
  --font-display:'Cinzel', serif;
  --font-body:'Montserrat', sans-serif;
  --font-script:'Alex Brush', cursive;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--jet);
  color:var(--ivory);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:0.02em;}
.eyebrow{font-family:var(--font-body);font-size:0.7rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.section-title{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--ivory);margin:10px 0 8px;}
.section-sub{color:var(--champagne);font-size:0.95rem;max-width:640px;font-weight:300;}
.collection-claim{margin-top:14px;font-size:0.8rem;color:var(--blush);font-style:italic;font-weight:300;}

.btn{display:inline-block;padding:13px 30px;font-family:var(--font-body);font-size:0.76rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;border-radius:2px;cursor:pointer;border:1px solid var(--gold);transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.btn-gold{background:var(--gold);color:var(--jet);}
.btn-gold:hover{box-shadow:0 6px 24px rgba(212,175,55,0.32);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--champagne);}
.btn-ghost:hover{background:rgba(212,175,55,0.08);}
.btn-sm{padding:9px 20px;font-size:0.66rem;}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(15,15,15,0.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;max-width:var(--maxw);margin:0 auto;gap:20px;}
.nav-links{display:flex;gap:26px;list-style:none;flex:1;justify-content:center;}
.nav-links a{font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--champagne);font-weight:600;padding-bottom:4px;border-bottom:2px solid transparent;transition:color .15s ease, border-color .15s ease;white-space:nowrap;}
.nav-links a:hover, .nav-links a.active{color:var(--ivory);border-color:var(--gold);}
.nav-toggle{display:none;background:none;border:1px solid var(--border-soft);color:var(--champagne);padding:8px 12px;font-size:1.05rem;cursor:pointer;}
.nav-cart{font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--champagne);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:color .15s ease;}
.nav-cart:hover, .nav-cart.active{color:var(--ivory);}
.cart-count{background:var(--gold);color:var(--jet);font-size:0.62rem;font-weight:700;border-radius:50%;min-width:18px;height:18px;line-height:18px;text-align:center;display:inline-block;padding:0 4px;}

/* ---------- PAGE HERO (collection pages) ---------- */
.page-hero{
  position:relative;padding:64px 24px 44px;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.10) 0%, rgba(15,15,15,0) 60%), var(--jet);
  border-bottom:1px solid var(--border-soft);
}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg, rgba(212,175,55,0.035) 0px, rgba(212,175,55,0.035) 1px, transparent 1px, transparent 34px);}
.page-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:0.55;z-index:0;}
.page-hero-photo-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.4) 45%, rgba(15,15,15,0.88) 100%);}
.page-hero-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;}
.breadcrumb{font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(230,199,156,0.55);margin-bottom:14px;}
.breadcrumb a:hover{color:var(--gold);}

/* ---------- FULL HERO (home) ---------- */
.hero{position:relative;padding:100px 24px 80px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 15%, rgba(212,175,55,0.16) 0%, rgba(15,15,15,0) 55%), radial-gradient(ellipse at 50% 100%, rgba(212,175,55,0.08) 0%, rgba(15,15,15,0) 60%), var(--jet);}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg, rgba(212,175,55,0.035) 0px, rgba(212,175,55,0.035) 1px, transparent 1px, transparent 34px);}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:0.65;z-index:0;}
.hero-video-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.35) 40%, rgba(15,15,15,0.82) 100%);}
.hero-inner{position:relative;max-width:600px;margin:0 auto;}
.logo-mark{width:230px;margin:0 auto 6px;}
.hero-badge{display:inline-block;font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--champagne);border:1px solid var(--border-soft);padding:8px 18px;border-radius:20px;margin:14px 0 30px;}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.trust-row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:38px;padding-top:26px;border-top:1px solid var(--border-soft);}
.trust-row span{font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(230,199,156,0.65);}

/* ---------- SECTIONS ---------- */
section{padding:76px 0;border-top:1px solid var(--border-soft);position:relative;}
section.alt{background:var(--jet-soft);}
section.alt::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg, rgba(212,175,55,0.028) 0px, rgba(212,175,55,0.028) 1px, transparent 1px, transparent 34px);}
section.alt > *{position:relative;z-index:1;}
section:first-of-type{border-top:none;}
.section-head{margin-bottom:36px;}

/* ---------- CATEGORY TILES (home) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:34px;}
.cat-tile{position:relative;aspect-ratio:3/4;border-radius:3px;overflow:hidden;border:1px solid var(--border-soft);display:block;background:var(--jet-1);}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cat-tile:hover img{transform:scale(1.06);}
.cat-tile .cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,15,15,0) 35%, rgba(15,15,15,0.92) 100%);display:flex;align-items:flex-end;padding:22px;}
.cat-tile .cat-name{font-family:var(--font-display);font-size:1.2rem;color:var(--ivory);}
.cat-tile .cat-sub{display:block;font-family:var(--font-body);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-top:4px;}

/* ---------- PRODUCT CARD ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin-top:32px;}
.product-card{background:var(--jet-card);border:1px solid var(--border-soft);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;}
.product-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,0.35);}

.photo-tile{aspect-ratio:4/5;position:relative;overflow:hidden;border-bottom:1px solid var(--border-soft);background:var(--jet-1);}
.photo-tile img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}
.photo-tile.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;background:var(--jet-1);border:1px solid rgba(212,175,55,0.08);border-width:0 0 1px 0;position:relative;}
.photo-tile.placeholder::after{content:"";position:absolute;inset:14px;border:1px solid rgba(212,175,55,0.18);pointer-events:none;}
.photo-tile.placeholder .tile-watermark{position:absolute;width:46%;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.09;filter:grayscale(1) brightness(1.6);pointer-events:none;}
.photo-tile.placeholder .tile-caption{position:relative;z-index:1;}
.photo-tile .tile-label{font-family:var(--font-display);color:var(--champagne);font-size:0.92rem;letter-spacing:0.06em;}
.photo-tile .tile-pending{display:block;margin-top:9px;font-family:var(--font-body);font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(230,199,156,0.4);}
.photo-tag{position:absolute;top:12px;left:12px;font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;background:rgba(15,15,15,0.72);border:1px solid var(--border-soft);color:var(--gold);padding:5px 10px;border-radius:2px;}

.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:11px;flex:1;}
.card-title{font-family:var(--font-display);font-size:1.08rem;color:var(--ivory);}
.price-line{color:var(--gold);font-size:0.95rem;font-weight:600;}
.price-line.pending{color:var(--champagne);font-weight:400;font-size:0.8rem;}
.field-label{font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--champagne);margin-bottom:5px;display:block;}
.field{margin-top:2px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.note-line{font-size:0.68rem;color:rgba(247,243,237,0.42);margin-top:2px;line-height:1.5;}
select{
  background:var(--jet);color:var(--ivory);border:1px solid var(--border-soft);
  padding:10px 12px;font-family:var(--font-body);font-size:0.8rem;border-radius:2px;width:100%;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23D4AF37' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 7px;
}
select:focus{outline:none;border-color:var(--gold);}
.card-cta{margin-top:6px;text-align:center;font-size:0.68rem;}

/* ---------- FLAT CARDS (closures/accessories) ---------- */
.flat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:32px;}
.flat-card{background:var(--jet-card);border:1px solid var(--border-soft);border-radius:3px;overflow:hidden;transition:border-color .15s ease, transform .15s ease;}
.flat-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.flat-card .photo-tile{aspect-ratio:1/1;}
.flat-card .flat-body{padding:18px 20px;text-align:center;}
.flat-card .name{font-family:var(--font-display);font-size:0.98rem;color:var(--ivory);}
.flat-card .price{color:var(--gold);font-weight:700;font-size:1.3rem;margin-top:8px;}
.upcharge-note{margin-top:30px;font-size:0.82rem;color:var(--champagne);border-left:2px solid var(--gold);padding-left:16px;max-width:640px;}

/* ---------- WIG LACE-SIZE CARD ---------- */
.wig-card .card-body{gap:14px;}
.wig-start{color:var(--champagne);font-size:0.82rem;margin-top:-4px;}
.wig-start span{opacity:.6;}

/* Lace-size filter bar — sits above the wig grid; picking a size recomputes
   every card below rather than hiding/showing different products, since
   every texture is available at every lace size. */
.lace-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
.lace-tab{position:relative;padding:11px 22px;font-family:var(--font-body);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;color:var(--champagne);background:var(--jet-card);border:1px solid var(--border-soft);border-radius:20px;cursor:pointer;transition:all .15s ease;}
.lace-tab:hover{border-color:var(--gold);color:var(--ivory);}
.lace-tab.active{background:var(--gold);color:var(--jet);border-color:var(--gold);}
.lace-tab .tab-badge{display:block;font-size:0.55rem;letter-spacing:0.05em;text-transform:none;opacity:0.7;margin-top:1px;}


/* ---------- CONTACT / CUSTOM ---------- */
.contact-block{text-align:center;max-width:560px;margin:0 auto;padding:56px 28px;border:1px solid var(--border-soft);border-radius:3px;background:var(--jet-card);}
.contact-block p{color:var(--champagne);font-size:1rem;margin:18px 0 26px;font-style:italic;}

/* ---------- STORY ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
.story .story-photo{aspect-ratio:1/1;border-radius:3px;background:var(--jet-1);border:1px solid var(--border-soft);position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;overflow:hidden;}
.story .story-photo::before{content:"";position:absolute;width:50%;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:1/1;background:url("logo/sw-monogram-only-transparent.png") center/contain no-repeat;opacity:0.09;filter:grayscale(1) brightness(1.6);pointer-events:none;}
.story .story-photo::after{content:"";position:absolute;inset:14px;border:1px solid rgba(212,175,55,0.18);pointer-events:none;}
.story .story-photo img{width:100%;height:100%;object-fit:cover;}
.story-photo span{position:relative;z-index:1;font-family:var(--font-display);color:var(--champagne);font-size:1rem;}
.story-text p{color:rgba(247,243,237,0.85);margin-top:16px;font-weight:300;}
.values-row{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap;}
.value-item{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);}
.value-item span{display:block;font-size:0.68rem;color:rgba(247,243,237,0.55);letter-spacing:0.02em;text-transform:none;margin-top:4px;font-weight:300;}

/* ---------- FOOTER ---------- */
footer{padding:60px 24px 40px;text-align:center;border-top:1px solid var(--border-soft);background:var(--jet-soft);}
footer .foot-word{font-family:var(--font-display);color:var(--gold);font-size:1.3rem;letter-spacing:0.08em;}
footer .foot-tagline{font-family:var(--font-script);color:var(--blush);font-size:1.5rem;margin:10px 0 22px;}
.foot-links{display:flex;justify-content:center;gap:26px;margin:22px 0;flex-wrap:wrap;}
.foot-links a{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--champagne);}
.foot-links a:hover{color:var(--gold);}
.foot-copy{font-size:0.66rem;color:rgba(247,243,237,0.35);margin-top:24px;}

/* ---------- LENGTH GUIDE ---------- */
.length-guide{display:grid;grid-template-columns:0.85fr 1fr;gap:44px;align-items:center;margin-top:40px;padding:36px;background:var(--jet-card);border:1px solid var(--border-soft);border-radius:3px;}
.length-guide img{border-radius:2px;box-shadow:0 12px 30px rgba(0,0,0,0.4);}
.length-guide h3{font-size:1.25rem;color:var(--ivory);margin-bottom:12px;}
.length-guide p{color:rgba(247,243,237,0.75);font-size:0.9rem;font-weight:300;line-height:1.7;}
@media (max-width:760px){.length-guide{grid-template-columns:1fr;}}

.cap-features{margin-top:24px;padding:36px;background:var(--jet-card);border:1px solid var(--border-soft);border-radius:3px;}
.cap-features h3{font-size:1.25rem;color:var(--ivory);margin-bottom:18px;}
.cap-features ul{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px;list-style:none;padding:0;margin:0;}
.cap-features li strong{display:block;color:var(--gold);font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:4px;}
.cap-features li span{color:rgba(247,243,237,0.75);font-size:0.9rem;font-weight:300;line-height:1.6;}
@media (max-width:640px){.cap-features ul{grid-template-columns:1fr;}}

/* ---------- PRODUCT DETAIL PAGE ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.pdp-photo{border-radius:3px;overflow:hidden;border:1px solid var(--border-soft);aspect-ratio:4/5;background:var(--jet-1);}
.pdp-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}
.pdp-info .card-title{font-size:1.7rem;margin-bottom:6px;}
.pdp-copy{color:var(--champagne);font-style:italic;font-size:0.95rem;margin-bottom:18px;}
.pdp-price{font-size:1.6rem;color:var(--gold);font-weight:700;margin-bottom:26px;}
.pdp-price span{display:block;font-size:0.68rem;color:rgba(247,243,237,0.5);font-weight:400;letter-spacing:0.06em;text-transform:uppercase;margin-top:4px;}
.pdp-group{margin-bottom:24px;}
.pdp-group .field-label{margin-bottom:10px;}

.swatch-row{display:flex;flex-wrap:wrap;gap:9px;}
.swatch-pill{padding:10px 16px;font-size:0.76rem;letter-spacing:0.03em;color:var(--champagne);background:var(--jet-card);border:1px solid var(--border-soft);border-radius:20px;cursor:pointer;transition:all .15s ease;}
.swatch-pill:hover{border-color:var(--gold);color:var(--ivory);}
.swatch-pill.selected{background:var(--gold);color:var(--jet);border-color:var(--gold);font-weight:600;}

.swatch-photo{flex:0 0 auto;width:60px;cursor:pointer;background:none;border:none;padding:0;text-align:center;}
.swatch-photo .thumb-img{width:60px;height:60px;border-radius:50%;overflow:hidden;border:2px solid transparent;transition:border-color .15s ease;background:var(--jet-1);}
.swatch-photo .thumb-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.swatch-photo.selected .thumb-img{border-color:var(--gold);}
.swatch-photo .thumb-name{display:block;font-size:0.56rem;color:rgba(247,243,237,0.6);margin-top:5px;}
.swatch-photo.selected .thumb-name{color:var(--gold);font-weight:600;}

.swatch-color{padding:6px 14px 6px 8px;display:inline-flex;align-items:center;gap:7px;font-size:0.72rem;color:var(--champagne);background:var(--jet-card);border:1px solid var(--border-soft);border-radius:20px;cursor:pointer;transition:all .15s ease;}
.swatch-color .dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);}
.swatch-color:hover{border-color:var(--gold);}
.swatch-color.selected{border-color:var(--gold);background:rgba(212,175,55,0.1);color:var(--ivory);font-weight:600;}

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

/* ---------- disclosure note ---------- */
.source-note{margin-top:36px;font-size:0.7rem;color:rgba(247,243,237,0.4);max-width:680px;line-height:1.6;}

@media (max-width:860px){
  .nav-links{position:fixed;top:60px;left:0;right:0;background:var(--jet);border-bottom:1px solid var(--border-soft);flex-direction:column;padding:20px 24px;gap:18px;display:none;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .story{grid-template-columns:1fr;}
}
