/* ============================================================
   GIFTSHOP — Deck design system (shared DA)
   Used by every client deck under /clients/<client>/.
   Do not put per-client styles here.
   ============================================================ */

/* === FONTS (GIFTSHOP system — two families only, per the SS26 deck) =====
   Everything: ITC Garamond Std Condensed (Light + Book)
   Meta only:  Sackers Gothic Std (Light + Heavy) */
@font-face { font-family:"ITC Garamond"; src:url("/_deck/fonts/ITCGaramondStd-LightCondensed.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"ITC Garamond"; src:url("/_deck/fonts/ITCGaramondStd-LightCondensed-Italic.ttf") format("truetype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"ITC Garamond"; src:url("/_deck/fonts/ITCGaramondStd-BookCondensed.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"ITC Garamond"; src:url("/_deck/fonts/ITCGaramondStd-LightCondensed-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Sackers Gothic"; src:url("/_deck/fonts/SackersGothicStd-Light.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Sackers Gothic"; src:url("/_deck/fonts/SackersGothicStd-Heavy.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* === TOKENS ============================================================ */
:root{
  --bg:#f6eeeb;          /* GIFTSHOP deck blush cream */
  --bg-2:#ffffff;        /* white content cards/panels, as in the deck */
  --ink:#000000;         /* content text — pure black */
  --ink-soft:#666666;    /* secondary text */
  --ink-faint:#9a8f8a;   /* meta / captions */
  --line:#e7dcd6;        /* blush hairline dividers */
  --line-strong:#d8ccc5;
  --accent:#780505;      /* GIFTSHOP deep oxblood — used sparingly */
  --max:1180px;

  --mono-xs:9px; --mono-md:11px; --mono-lg:12px;
  --body-sm:14px; --body:17px; --body-lg:21px;
  --h3:26px; --h2:38px; --h1:60px; --hero:78px;
}
@media (max-width:700px){
  :root{ --body-sm:13px; --body:15px; --body-lg:17px;
    --h3:21px; --h2:27px; --h1:38px; --hero:42px; }
}

/* === RESET ============================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:"ITC Garamond","Times New Roman",serif;
  font-weight:300;          /* content = Light Condensed */
  background:var(--bg) url("/_deck/background.webp") center center / cover no-repeat fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
  line-height:1.5;
}
a{ color:inherit; }
img{ display:block; max-width:100%; }

.mono{
  font-family:"Sackers Gothic",sans-serif;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:var(--mono-md);
  color:var(--ink-faint);
}
.label{
  font-family:"Sackers Gothic",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:var(--mono-md);
  color:var(--ink-faint);
  display:block;
  margin-bottom:28px;
}

/* === NAV =============================================================== */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; justify-content:center; align-items:center;
  padding:24px clamp(20px,5vw,56px);
  background:transparent;
  isolation:isolate;
}
/* content dissolves into the background as it reaches the header (no blur) */
.nav::before{
  content:""; position:absolute; inset:0 0 -72px 0;
  background:var(--bg) url("/_deck/background.webp") center center / cover no-repeat fixed;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 54%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 54%, transparent 100%);
  pointer-events:none; z-index:-1;
}
.nav .brand{ display:block; line-height:0; position:relative; z-index:1; }
.nav .brand img{ height:30px; width:auto; display:block; }
.nav .meta{
  font-family:"Sackers Gothic",sans-serif;
  letter-spacing:0.16em; font-size:var(--mono-md);
  color:var(--ink-faint); text-transform:uppercase;
}
@media (max-width:560px){ .nav .meta{ display:none; } }

/* === LAYOUT ============================================================ */
section{ padding:clamp(80px,11vw,150px) clamp(20px,5vw,56px); }
.wrap{ max-width:var(--max); margin:0 auto; }
.divider{ display:none; }

/* titles = Book Condensed, all caps */
h1,h2,h3{ font-family:"ITC Garamond","Times New Roman",serif; font-weight:400; text-transform:uppercase; letter-spacing:0.02em; margin:0; line-height:1.06; font-synthesis:none; }
h1.hero{ font-size:var(--hero); letter-spacing:0.02em; }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }
p{ margin:0 0 1.1em; }
.lead{ font-size:var(--body-lg); color:var(--ink); max-width:30ch; }
.body{ font-size:var(--body); color:var(--ink); max-width:590px; }
.small{ font-size:var(--body-sm); color:var(--ink-faint); }

/* === HERO ============================================================== */
.hero-sec{
  min-height:80vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
}
.hero-sec h1{ max-width:none; white-space:nowrap; }
@media (max-width:560px){ .hero-sec h1{ white-space:normal; } }
.hero-sec .sub{
  margin-top:28px;
  font-family:"ITC Garamond","Times New Roman",serif;
  font-weight:300; font-size:calc(var(--body-lg) + 6px); line-height:1.35;
  color:var(--ink); max-width:920px; margin-left:auto; margin-right:auto;
  text-wrap:balance;
}
.hero-sec .kicker{ margin-bottom:42px; }

/* === SINGLE CENTERED SECTION SYSTEM =================================== */
.centered-sec{ text-align:center; }
.centered-sec > .label:not(.cat-label){ margin-bottom:0; }
.centered-sec h2{ margin:14px auto 0; }
.centered-sec .body{ margin-left:auto; margin-right:auto; }

/* The need — centered facts (key over value, stacked) */
.facts{ max-width:720px; margin:48px auto 0; }
.fact{ padding:16px 0; }
.fact .k{
  display:block; margin-bottom:8px;
  font-family:"Sackers Gothic",sans-serif; text-transform:uppercase;
  letter-spacing:0.18em; font-size:var(--mono-md); color:var(--ink-faint);
}
.fact .v{ display:block; font-size:var(--body); color:var(--ink); max-width:590px; margin:0 auto; }

/* === CARD HOLDER — centered carousel ================================== */
.product-centered{ text-align:center; }
.product-centered > h2{ margin-bottom:4px; }
.cat-label{ margin:46px 0 14px; }
.leather-name{
  display:block;
  font-family:"ITC Garamond","Times New Roman",serif; font-weight:400;
  font-size:var(--h3); color:var(--ink); margin:0 0 22px;
}
.carousel{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,2.5vw,28px); max-width:760px; margin:36px auto 0;
}
.arrow{
  flex:0 0 auto; background:none; border:none; cursor:pointer;
  font-family:"Times New Roman",serif; font-size:40px; line-height:1;
  color:var(--ink-faint); padding:8px 6px; transition:color .2s ease;
}
.arrow:hover{ color:var(--ink); }

.stage{
  flex:0 1 540px; position:relative; width:100%; aspect-ratio:1/1;
  background:transparent; border:none;
  overflow:hidden;
}
.stage .slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .6s ease;
  display:flex; align-items:center; justify-content:center;
}
.stage .slide.active{ opacity:1; }
.stage .slide img{
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%; object-fit:contain; padding:6%;
  opacity:0; transition:opacity .45s ease;
}
.stage .slide.active img{ opacity:1; }
/* placeholder shown only if a mockup ever fails to load */
.stage .slide .ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
}
.stage .slide .ph .swatch{
  width:42%; aspect-ratio:1.6/1; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.12);
}
.stage .slide .ph .pl-tag{
  font-family:"Sackers Gothic",sans-serif; text-transform:uppercase;
  letter-spacing:0.2em; font-size:var(--mono-md); color:var(--ink-faint);
}

/* round dots — one per leather, in the leather's colour */
.dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:4px auto 0; }
.dots .dot{
  width:13px; height:13px; border-radius:50%; padding:0; cursor:pointer; border:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  opacity:.45; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dots .dot:hover{ opacity:.8; }
.dots .dot[aria-pressed="true"]{
  opacity:1; transform:scale(1.08);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 1.5px var(--bg), 0 0 0 2.5px var(--ink);
}

.leather-meta{ margin-top:30px; }
.leather-meta .desc{ font-size:var(--body); color:var(--ink); max-width:590px; margin:0 auto; }
.leather-meta .small{ max-width:60ch; margin-left:auto; margin-right:auto; }

/* === PERSONALIZATION =================================================== */
.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
@media (max-width:760px){ .three{ grid-template-columns:1fr; gap:28px; } }
.opt .opt-art{
  aspect-ratio:5/4; background:var(--bg-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.opt .opt-art .mark{
  font-family:"ITC Garamond",serif; font-weight:400; font-size:46px;
  color:var(--ink); opacity:.85;
}
.opt .opt-art.bare{ }
.opt .opt-art .dash{ width:54px; height:1px; background:var(--line-strong); }
.opt h3{ margin-bottom:8px; }
.opt p{ font-size:var(--body-sm); color:var(--ink); }
.disclaimer{
  margin-top:46px; padding-top:22px; border-top:1px solid var(--line);
  font-style:italic; font-size:var(--body-sm); color:var(--ink-faint); max-width:64ch;
}

/* === ACCESS CARD — centered =========================================== */
.card-stage{ width:min(580px,88vw); margin:34px auto; }
.card-stage img{ width:100%; height:auto; display:block; }

/* === CTA / NEXT ======================================================== */
.cta-sec{ text-align:center; }
.cta-sec h2{ margin:0 auto 26px; max-width:18ch; }
.cta-sec .body{ margin:0 auto 40px; text-align:center; }
.cta-btn{
  display:inline-block; text-decoration:none;
  font-family:"Sackers Gothic",sans-serif; text-transform:uppercase;
  letter-spacing:0.16em; font-size:var(--mono-lg);
  color:var(--bg); background:var(--ink);
  padding:16px 34px; border-radius:2px;
  transition:opacity .2s ease;
}
.cta-btn:hover{ opacity:.84; }
.cta-sec .contact{ margin-top:24px; }

/* === FOOTER ============================================================ */
footer{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:0;
  display:flex; justify-content:space-between; align-items:center;
  background:transparent;
  font-family:"Sackers Gothic",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.22em; font-size:10px; color:var(--ink-faint);
}
footer span:first-child{ margin:20px 0 20px 20px; }
footer span:last-child{ margin:20px 20px 20px 0; }
/* opaque background only when the footer overlaps content (toggled in JS) */
footer.solid{
  background:var(--bg) url("/_deck/background.webp") center center / cover no-repeat fixed;
}
@media (max-width:560px){
  footer{
    background:var(--bg) url("/_deck/background.webp") center center / cover no-repeat fixed;
    border-top:1px solid var(--line);
  }
  footer span:first-child{ margin:10px 0 10px 10px; }
  footer span:last-child{ margin:10px 10px 10px 0; }
  body{ padding-bottom:42px; }
}
body{ padding-bottom:60px; }