/* ==========================================================================
   What Dahel — shared styles for interior pages (mission + product pages)
   Homepage (index.html) keeps its own inline styles.
   ========================================================================== */

:root{
  --navy:#0B1F3A;
  --cream:#F4EFE3;
  --cream-soft:#EDE6D4;
  --ink-50:rgba(11,31,58,0.5);
  --ink-35:rgba(11,31,58,0.35);
  --mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--navy);
  font-family:'Cormorant Garamond', Georgia, serif;
  overflow-x:hidden;
}

.tag{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:0.22em;
  font-size:0.62rem; color:var(--ink-50); font-weight:400;
}

/* ---- Sticky top nav (shared with homepage) ---- */
.nav{
  position:fixed; top:0; left:0; right:0; height:60px; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,5vw,44px);
  background:rgba(244,239,227,0.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-35);
}
.nav-logo{ font-family:'Cormorant Garamond', serif; font-size:1.28rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--navy); text-decoration:none; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--navy); text-decoration:none; opacity:0.72; transition:opacity 0.2s ease; }
.nav-links a:hover{ opacity:1; }
.nav-ig{ border:1px solid var(--ink-35); border-radius:2px; padding:7px 12px; opacity:0.9 !important; }
.nav-ig:hover{ background:var(--navy); color:var(--cream) !important; border-color:var(--navy); }
@media (max-width:640px){ .nav-links{ gap:14px; } }

/* ---- Product detail page (PDP) ---- */
.pdp{ max-width:1120px; margin:0 auto; padding:104px clamp(20px,5vw,44px) 40px; position:relative; z-index:2; }
.pdp-back{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-50); text-decoration:none; display:inline-block; margin-bottom:30px; }
.pdp-back:hover{ color:var(--navy); }
.pdp-inner{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }

/* Gallery */
.pdp-gallery{ position:sticky; top:84px; }
.pdp-hero-img, .pdp-thumb{
  border:1px solid var(--ink-35); border-radius:4px; position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(11,31,58,0.03) 0 10px, transparent 10px 20px),
    var(--cream-soft);
  display:flex; align-items:center; justify-content:center;
}
.pdp-hero-img{ aspect-ratio:4/5; }
.pdp-hero-img .wd{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:4rem; color:var(--ink-35); }
.pdp-hero-img .soon{
  position:absolute; top:12px; left:12px; background:var(--navy); color:var(--cream);
  font-family:var(--mono); font-size:0.5rem; letter-spacing:0.16em; text-transform:uppercase; padding:5px 9px; border-radius:2px;
}
.pdp-hero-img .cap{
  position:absolute; bottom:14px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:0.56rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-50);
}
.pdp-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.pdp-thumb{ aspect-ratio:1/1; }
.pdp-thumb .wd{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.4rem; color:var(--ink-35); }

/* Product pages with real photography */
.pdp-hero-img.photo{ aspect-ratio:1/1; background:#fff; }
.pdp-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumb.photo{ background:#fff; cursor:pointer; padding:0; }
.pdp-thumb.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumb.photo:hover{ border-color:var(--ink-50); }
.pdp-thumb.photo.active{ border-color:var(--navy); }

/* Color swatch row */
.pdp-colors{ margin:0 0 30px; max-width:460px; }
.pdp-colors .k{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-50); display:block; margin-bottom:12px; }
.pdp-swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.pdp-swatch{ display:flex; align-items:center; gap:8px; font-size:0.95rem; color:var(--navy); }
.pdp-swatch .dot{ width:18px; height:18px; border-radius:50%; border:1px solid var(--ink-35); display:inline-block; }

/* Info column */
.pdp-info{ padding-top:6px; }
.pdp-eyebrow{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-50); display:block; margin-bottom:14px; }
.pdp-info h1{ font-weight:500; font-size:clamp(2.2rem,5vw,3.2rem); line-height:1.04; letter-spacing:0.02em; margin:0 0 16px; }
.pdp-status{
  display:inline-block; background:var(--cream-soft); border:1px solid var(--ink-35);
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--navy);
  padding:7px 12px; border-radius:2px; margin-bottom:26px;
}
.pdp-status.pdp-live{ background:var(--navy); border-color:var(--navy); color:var(--cream); }
.pdp-desc{ font-size:1.14rem; line-height:1.62; color:#33425c; margin:0 0 30px; max-width:460px; }
.pdp-details{ border-top:1px solid var(--ink-35); margin:0 0 32px; padding-top:6px; max-width:460px; }
.pdp-details .row{ display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--ink-35); }
.pdp-details .k{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-50); }
.pdp-details .v{ font-size:1.02rem; color:var(--navy); text-align:right; }

/* Notify form */
.pdp-notify{ max-width:460px; }
.pdp-notify .tag{ display:block; margin-bottom:12px; }
.pdp-notify form{ display:flex; gap:10px; flex-wrap:wrap; }
.pdp-notify input[type="email"]{
  flex:1 1 220px; padding:14px 16px; border:1px solid var(--ink-35); background:transparent;
  border-radius:2px; font-family:inherit; font-size:1rem; color:var(--navy);
}
.pdp-notify input::placeholder{ color:var(--ink-50); }
.pdp-notify button{
  padding:14px 26px; border:1px solid var(--navy); background:var(--navy); color:var(--cream);
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  border-radius:2px; cursor:pointer; transition:opacity 0.2s ease;
}
.pdp-notify button:hover{ opacity:0.85; }
.pdp-note{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; color:var(--ink-50); margin-top:14px; }

/* Buy button (Shop on Etsy) */
.pdp-buy{ max-width:460px; }
.btn-shop{
  display:inline-block; padding:16px 34px; background:var(--navy); color:var(--cream);
  border:1px solid var(--navy); border-radius:2px; text-decoration:none;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.btn-shop:hover{ opacity:0.9; transform:translateY(-1px); }

@media (max-width:760px){
  .pdp-inner{ grid-template-columns:1fr; }
  .pdp-gallery{ position:static; top:auto; }
}

/* ---- PDP: "worn" lifestyle band (kept separate from the buy gallery) ---- */
.pdp-worn{ margin-top:clamp(56px,9vw,104px); border-top:1px solid var(--ink-35); padding-top:clamp(32px,5vw,52px); }
.pdp-worn .worn-head{ text-align:center; margin-bottom:clamp(24px,4vw,38px); }
.pdp-worn .worn-head .tag{ display:block; margin-bottom:12px; }
.pdp-worn .worn-head h2{ font-weight:500; font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:0.03em; margin:0; }
.pdp-worn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,16px); }
.pdp-worn figure{ margin:0; }
.pdp-worn .f{
  aspect-ratio:3/4; overflow:hidden; border-radius:4px;
  background:var(--cream-soft); border:1px solid var(--ink-35);
}
.pdp-worn .f img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-worn figcaption{
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-50); margin-top:10px;
}
.pdp-worn-note{
  text-align:center; margin-top:clamp(22px,3vw,30px);
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-50);
}
/* Landscape shots span two columns at 3:2, so rows stay flush next to 3:4 portraits */
.pdp-worn figure.wide{ grid-column:span 2; }
.pdp-worn figure.wide .f{ aspect-ratio:3/2; }
@media (max-width:720px){ .pdp-worn-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---- Mission page ---- */
.mission-page{ max-width:760px; margin:0 auto; padding:132px clamp(20px,5vw,44px) 40px; position:relative; z-index:2; }
.mission-page .eyebrow{ display:block; text-align:center; margin-bottom:26px; }
.mission-page h1{ font-weight:500; font-size:clamp(2.4rem,6vw,3.8rem); line-height:1.05; letter-spacing:0.02em; text-align:center; margin:0 0 40px; }
.mission-page .lede{ font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.5; color:var(--navy); text-align:center; margin:0 0 52px; }
.mission-body{ font-size:1.16rem; line-height:1.7; color:#33425c; max-width:600px; margin:0 auto; }
.mission-body p{ margin:0 0 24px; }
.mission-hr{ width:1px; height:56px; background:var(--ink-35); margin:52px auto; }
.mission-page .pull{
  font-style:italic; font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.4; color:var(--navy);
  text-align:center; max-width:560px; margin:0 auto 8px;
}
.mission-cta{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin-top:56px; }
.mission-cta a{
  display:inline-block; padding:14px 30px; border:1px solid var(--navy); background:var(--navy); color:var(--cream);
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; border-radius:2px; text-decoration:none;
  transition:opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.mission-cta a:hover{ opacity:0.85; }
.mission-cta a.cta-outline{ background:transparent; color:var(--navy); }
.mission-cta a.cta-outline:hover{ background:var(--navy); color:var(--cream); opacity:1; }

/* ---- Legal pages (terms / privacy) ---- */
.legal-updated{ text-align:center; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-50); margin:0 0 44px; }
.mission-body h2{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.4rem; color:var(--navy); margin:38px 0 12px; }
.mission-body h2:first-of-type{ margin-top:0; }
.mission-body a{ color:var(--navy); }

/* ---- The World page: editorial media moments ---- */
.world-intro{ max-width:720px; margin:0 auto; padding:128px clamp(20px,5vw,44px) 8px; text-align:center; position:relative; z-index:2; }
.world-intro .eyebrow{ display:block; margin-bottom:22px; }
.world-intro h1{ font-weight:500; font-size:clamp(2.4rem,6vw,3.8rem); line-height:1.05; letter-spacing:0.02em; margin:0 0 24px; }
.world-intro p{ font-size:clamp(1.2rem,2.4vw,1.5rem); line-height:1.55; color:#33425c; margin:0 auto; max-width:560px; }

.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

.editorial{
  position:relative; height:46vh; min-height:300px; max-height:520px;
  overflow:hidden; margin-top:56px;
}
.editorial img, .editorial video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.reduced .reveal{ opacity:1; transform:none; transition:none; }

/* ---- World page: photo mosaic ---- */
.world-gallery{
  column-count:3; column-gap:10px;
  max-width:1180px; margin:56px auto 0; padding:0 clamp(20px,5vw,44px);
}
.world-gallery figure{ margin:0 0 10px; break-inside:avoid; overflow:hidden; background:var(--cream-soft); }
.world-gallery img{ width:100%; height:auto; display:block; transition:transform .5s ease; }
.world-gallery figure:hover img{ transform:scale(1.03); }
@media (max-width:760px){
  .world-gallery{ column-count:2; column-gap:8px; }
  .world-gallery figure{ margin-bottom:8px; }
}

/* ---- Shared multi-column footer ---- */
.site-footer{ background:var(--navy); color:var(--cream); margin-top:96px; padding:64px clamp(20px,5vw,44px) 0; }
.foot-inner{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:52px; }
.foot-brand .fb-logo{ font-family:'Cormorant Garamond', serif; font-size:1.6rem; letter-spacing:0.06em; text-transform:uppercase; margin:0 0 14px; }
.foot-brand p{ font-size:0.98rem; line-height:1.6; color:rgba(244,239,227,0.72); max-width:340px; margin:0; }
.foot-col h4{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(244,239,227,0.55); margin:0 0 16px; font-weight:400; }
.foot-col a, .foot-col span{ display:block; font-size:0.98rem; color:rgba(244,239,227,0.85); text-decoration:none; margin-bottom:11px; transition:color 0.2s ease; }
.foot-col a:hover{ color:var(--cream); }
.foot-col a.soon{ color:rgba(244,239,227,0.4); cursor:default; }
.foot-col a.soon:hover{ color:rgba(244,239,227,0.4); }
.foot-bar{
  max-width:1080px; margin:0 auto; padding:22px 0; border-top:1px solid rgba(244,239,227,0.16);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,239,227,0.5);
}
.foot-bar a{ color:inherit; text-decoration:none; }
.foot-bar a:hover{ color:rgba(244,239,227,0.85); }
.foot-legal a{ margin:0 6px; }
.foot-legal a:first-child{ margin-left:0; }
@media (max-width:640px){
  .foot-inner{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot-brand{ grid-column:1 / -1; }
}

/* ---- PDP: complete the set ---- */
.pdp-set{ margin-top:clamp(56px,9vw,104px); border-top:1px solid var(--ink-35); padding-top:clamp(32px,5vw,52px); }
.pdp-set .worn-head{ text-align:center; margin-bottom:clamp(20px,3vw,32px); }
.pdp-set .worn-head h2{ font-weight:500; font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:0.03em; margin:0; }
.set-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,20px); max-width:820px; margin:0 auto; }
.set-card{ display:block; text-decoration:none; color:var(--navy); text-align:center; }
.set-img{ display:block; aspect-ratio:4/5; overflow:hidden; background:var(--cream-soft); }
.set-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.set-card:hover .set-img img{ transform:scale(1.03); }
.set-name{ display:block; margin-top:12px; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; }
.set-price{ display:block; margin-top:4px; font-family:var(--mono); font-size:0.62rem; color:var(--ink-50); }

/* ---- PDP: clickable color swatches ---- */
.pdp-swatch.is-pick{ cursor:pointer; padding:6px 10px 6px 8px; border:1px solid transparent; border-radius:2px; transition:border-color .2s ease; }
.pdp-swatch.is-pick:hover{ border-color:var(--ink-35); }
.pdp-swatch.is-pick.is-active{ border-color:var(--navy); }
.pdp-swatch.is-pick:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

.nav-logo{ display:flex; align-items:center; line-height:0; }
.nav-logo img{ height:40px; width:auto; display:block; }
.foot-brand .fb-logo{ line-height:0; margin:0 0 18px; }
.foot-brand .fb-logo img{ height:92px; width:auto; display:block; }

/* ---- PDP: options, color buttons, view toggle (product-ui.js) ---- */
.pdp-opts{margin:0 0 22px;max-width:460px;display:flex;flex-direction:column;gap:16px}
.pdp-opts .k{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-50);display:block;margin-bottom:8px}
.pdp .pc-view{display:inline-flex;flex-wrap:wrap;border:1px solid var(--ink-35);border-radius:2px}
.pdp .pv{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border:0;background:transparent;color:var(--navy);cursor:pointer}
.pdp .pv+.pv{border-left:1px solid var(--ink-35)}
.pdp .pv.on{background:var(--navy);color:var(--cream)}
.pdp-views{margin-top:12px}
.pdp-colorbtn{display:flex;align-items:center;gap:8px;font:inherit;font-size:0.95rem;color:var(--navy);background:transparent;padding:6px 10px 6px 8px;border:1px solid transparent;border-radius:2px;cursor:pointer}
.pdp-colorbtn .dot{width:18px;height:18px;border-radius:50%;border:1px solid var(--ink-35);display:inline-block}
.pdp-colorbtn:hover{border-color:var(--ink-35)}
.pdp-colorbtn.is-active{border-color:var(--navy)}
.pdp-swatches{gap:4px 6px}
.pdp-thumbs.many{grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:520px){.pdp-thumbs.many{grid-template-columns:repeat(5,1fr)}}
.pdp-desc[hidden]{display:none}
.pdp-desc{margin:-8px 0 22px}
.pdp-buy{margin:0 0 30px}