:root{--bg:#090807;--cream:#ded3c2;--cream2:#b8aa96;--muted:#8e8273;--line:#4a4035;--gold:#9b7448}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(75,45,24,.16),transparent 34%),linear-gradient(rgba(0,0,0,.76),rgba(0,0,0,.86)),repeating-linear-gradient(0deg,#110d0a 0,#110d0a 45px,#18120e 46px,#0d0a08 48px);color:var(--cream);font-family:Arial,Helvetica,sans-serif}a{color:inherit}
.distressed{font-family:Rockwell,"Roboto Slab","Courier New",serif;font-weight:900;text-transform:uppercase;letter-spacing:.035em;text-shadow:1px 0 rgba(255,255,255,.08),-1px 0 rgba(0,0,0,.45)}
.menu-button{position:fixed;right:24px;top:22px;z-index:1001;width:50px;height:50px;border:1px solid rgba(222,211,194,.35);background:rgba(7,6,5,.74);backdrop-filter:blur(8px);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.menu-button span{display:block;width:23px;height:2px;background:var(--cream);transition:.2s}.menu-button.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu-button.open span:nth-child(2){opacity:0}.menu-button.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.site-menu{position:fixed;right:24px;top:80px;z-index:1000;width:min(310px,calc(100vw - 48px));padding:14px;background:rgba(10,8,6,.96);border:1px solid rgba(222,211,194,.28);box-shadow:0 20px 55px rgba(0,0,0,.55);transform:translateY(-8px);opacity:0;visibility:hidden;transition:.2s}
.site-menu.show{transform:none;opacity:1;visibility:visible}.site-menu a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;padding:15px 14px;border-bottom:1px solid rgba(222,211,194,.12);font-weight:800;letter-spacing:.05em;text-transform:uppercase}.site-menu a:last-child{border-bottom:0}.site-menu a:hover,.site-menu a.active{background:rgba(222,211,194,.07)}.site-menu small{color:var(--muted);font-size:.64rem;letter-spacing:.08em}
.home-main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px}.home-hero{width:min(1040px,100%);text-align:center}.brand-logo{display:block;width:min(1000px,100%);height:auto;margin:0 auto 18px;box-shadow:0 20px 70px rgba(0,0,0,.45)}
.hero-copy{padding:6px 16px 25px}.kicker{margin:0 0 10px;color:var(--cream2);font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.13em}.hero-copy h1{margin:0;color:var(--cream);font-size:clamp(2rem,6vw,4.5rem);line-height:1}.subhead{margin:18px 0 0;color:var(--cream2);font-size:clamp(.85rem,2vw,1.15rem);letter-spacing:.12em}
.brand-divider{display:grid;grid-template-columns:minmax(50px,170px) auto minmax(50px,170px);align-items:center;gap:16px;justify-content:center;max-width:520px;margin:18px auto 10px}.brand-divider span{height:1px;background:var(--line)}.brand-divider b{font-size:1.1rem}.coming{margin:0 0 20px;font-size:1.15rem;letter-spacing:.16em}
.peek-link,.back-home{display:inline-block;padding:13px 17px;border:1px solid rgba(222,211,194,.35);text-decoration:none;font-weight:900;font-size:.84rem;letter-spacing:.10em;background:rgba(0,0,0,.35)}.peek-link:hover,.back-home:hover{background:var(--cream);color:#0a0807}
.merch-header{max-width:1000px;margin:0 auto;padding:70px 28px 28px;text-align:center}.mini-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:40px}.mini-mark{display:grid;place-items:center;width:58px;height:58px;border:2px solid var(--cream);border-radius:50%;font:900 27px Rockwell,serif}.mini-brand>span:last-child{display:flex;flex-direction:column;text-align:left}.mini-brand strong{font:900 22px Rockwell,serif;letter-spacing:.05em}.mini-brand small{color:var(--cream2);font-weight:800;letter-spacing:.17em;font-size:.62rem;margin-top:3px}.merch-header h1{margin:0;font-size:clamp(2.7rem,8vw,6.4rem);line-height:.88}.merch-intro{max-width:690px;margin:22px auto 0;color:#b6aa9a;font-size:1.08rem;line-height:1.7}
.product-grid{width:min(1240px,calc(100% - 36px));margin:20px auto 60px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.product-card{border:1px solid rgba(222,211,194,.19);background:linear-gradient(180deg,rgba(25,20,16,.95),rgba(11,9,7,.97));overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.28)}.product-art{height:315px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#16120f}.product-copy{padding:25px 25px 28px}.product-copy .eyebrow{margin:0 0 8px;color:var(--gold);font-size:.75rem;font-weight:900;letter-spacing:.18em}.product-copy h2{margin:0 0 12px;font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1}.product-copy p{margin:0 0 22px;color:#a99d8e;line-height:1.6}.want-button{appearance:none;border:1px solid rgba(222,211,194,.38);background:transparent;color:var(--cream);padding:11px 14px;cursor:pointer;font-weight:900;letter-spacing:.10em;font-size:.78rem}.want-button:hover{background:var(--cream);color:#100d0a}
.plaid{background-color:#17110e;background-image:linear-gradient(90deg,rgba(0,0,0,.66) 0 23%,transparent 23% 47%,rgba(0,0,0,.66) 47% 70%,transparent 70%),linear-gradient(rgba(0,0,0,.66) 0 23%,transparent 23% 47%,rgba(0,0,0,.66) 47% 70%,transparent 70%);background-size:82px 82px}.plaid.red{background-color:#64271d}.hat-shape{width:210px;height:110px;border-radius:110px 110px 18px 18px;background:#171717;position:relative;box-shadow:0 18px 28px rgba(0,0,0,.45)}.hat-shape:after{content:"";position:absolute;right:-74px;bottom:-1px;width:110px;height:25px;border-radius:0 80% 40% 0;background:#111;transform:skewX(-18deg)}.patch{position:absolute;left:50%;top:36px;transform:translateX(-50%);font:900 30px Rockwell,serif;color:var(--cream);border:2px solid var(--cream);border-radius:50%;width:55px;height:55px;display:grid;place-items:center}
.sock-wall{gap:26px;background:linear-gradient(#1b1511,#0d0a08)}.sock{width:86px;height:225px;border-radius:11px 11px 35px 17px;position:relative;background-size:36px 36px;background-image:linear-gradient(90deg,#111 50%,transparent 50%),linear-gradient(#111 50%,transparent 50%)}.sock:after{content:"17";position:absolute;top:42px;left:50%;transform:translateX(-50%);font:900 25px Rockwell,serif}.sock.green{background-color:#284f35}.sock.blue{background-color:#2a4d6b}.sock.red{background-color:#6b2d26}
.ankle-art{gap:22px;background:linear-gradient(#171411,#0e0c0a)}.ankle{width:140px;height:88px;border-radius:48px 15px 12px 22px;position:relative;transform:skewX(-7deg)}.ankle:after{content:"17";position:absolute;right:24px;top:14px;font:900 22px Rockwell,serif}.ankle.black{background:#121212;color:#403d39}.ankle.gray{background:#77716b;color:#aaa39b}.ankle.white{background:#dedbd5;color:#8d8880}
.gaiter-art{gap:22px;background:linear-gradient(#1a1714,#0e0c0b)}.gaiter{width:110px;height:215px;border-radius:10px;display:grid;place-items:center;font:900 40px Rockwell,serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.g1{background:#224936;color:#11261c}.g2{background:#496278;color:#273744}.g3{background:#c09a25;color:#6c5715}
.apparel-art{gap:35px;background:linear-gradient(#191511,#0f0c0a)}.shirt,.hoodie{width:170px;height:210px;background:#161616;position:relative;clip-path:polygon(25% 0,39% 13%,61% 13%,75% 0,100% 18%,88% 39%,82% 33%,82% 100%,18% 100%,18% 33%,12% 39%,0 18%)}.hoodie{background:#2b2a28;clip-path:polygon(30% 6%,39% 0,61% 0,70% 6%,76% 0,100% 20%,86% 39%,81% 33%,81% 100%,19% 100%,19% 33%,14% 39%,0 20%,24% 0)}.shirt span,.hoodie span{position:absolute;top:88px;left:50%;transform:translateX(-50%);font:900 38px Rockwell,serif;color:var(--cream)}
.board-art{background:linear-gradient(145deg,#1a110b,#0f0b08)}.cutting-board{width:300px;height:205px;border-radius:14px;background:linear-gradient(90deg,#714729,#9b6944 22%,#7f5233 45%,#ad7953 66%,#6d4228);box-shadow:0 22px 34px rgba(0,0,0,.48);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#25160e;border:1px solid #b7865d}.cutting-board .flame{font-size:28px;filter:grayscale(1) brightness(.35)}.cutting-board strong{font:900 70px Rockwell,serif;line-height:.9}.cutting-board small{font:900 15px Rockwell,serif;letter-spacing:.08em}
.drop-note{max-width:800px;margin:0 auto 90px;text-align:center;padding:35px 25px;border-top:1px solid var(--line)}.drop-note h2{font-size:clamp(2.1rem,6vw,4rem);margin:0}.drop-note p:not(.kicker){color:#a89c8d;line-height:1.65;max-width:650px;margin:16px auto 25px}
.toast{position:fixed;left:50%;bottom:28px;z-index:1100;transform:translate(-50%,25px);opacity:0;visibility:hidden;background:#ddd1bf;color:#15110e;padding:14px 18px;box-shadow:0 18px 50px rgba(0,0,0,.45);display:flex;gap:9px;align-items:center;transition:.22s;width:max-content;max-width:calc(100vw - 30px)}.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}.toast span{color:#5e5143;font-size:.88rem}
@media(max-width:780px){.product-grid{grid-template-columns:1fr}.product-art{height:280px}.menu-button{right:14px;top:14px}.site-menu{right:14px;top:72px;width:calc(100vw - 28px)}.merch-header{padding-top:58px}}
@media(max-width:480px){.home-main{padding:16px}.brand-logo{margin-top:30px}.hero-copy h1 br{display:none}.sock-wall{gap:12px}.sock{width:69px;height:190px}.ankle-art{gap:8px}.ankle{width:96px;height:70px}.gaiter-art{gap:8px}.gaiter{width:82px;height:180px}.apparel-art{gap:14px}.shirt,.hoodie{width:135px;height:180px}}

/* V3 typography scale: ~20% smaller */
.hero-copy h1{font-size:clamp(1.6rem,4.8vw,3.6rem)}
.kicker{font-size:clamp(.8rem,1.6vw,1.08rem)}
.subhead{font-size:clamp(.68rem,1.6vw,.92rem)}
.coming{font-size:.92rem}
.peek-link,.back-home{font-size:.68rem}
.merch-header h1{font-size:clamp(2.15rem,6.4vw,5.1rem)}
.merch-intro{font-size:.86rem}
.product-copy h2{font-size:clamp(1.2rem,2.55vw,1.88rem)}
.product-copy p{font-size:.88rem}
.product-copy .eyebrow{font-size:.60rem}
.want-button{font-size:.64rem}
.drop-note h2{font-size:clamp(1.7rem,4.8vw,3.2rem)}
.mini-brand strong{font-size:18px}
.mini-brand small{font-size:.5rem}

/* First card: blaze orange trucker hat */
.product-grid .product-card:nth-child(1) .product-art{
  background:linear-gradient(#20150d,#0f0c09);
}
.product-grid .product-card:nth-child(1) .hat-shape{
  background:#d87513;
}
.product-grid .product-card:nth-child(1) .hat-shape:after{
  background:#b45c0d;
}
.product-grid .product-card:nth-child(1) .patch{
  color:#20160d;
  border-color:#20160d;
}

/* Second card: buffalo plaid winter hat */
.product-grid .product-card:nth-child(2) .product-art{
  background-color:#64271d;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.66) 0 23%,transparent 23% 47%,rgba(0,0,0,.66) 47% 70%,transparent 70%),
    linear-gradient(rgba(0,0,0,.66) 0 23%,transparent 23% 47%,rgba(0,0,0,.66) 47% 70%,transparent 70%);
  background-size:70px 70px;
}
.product-grid .product-card:nth-child(2) .product-art:before{
  content:"";
  width:180px;height:150px;
  background:#6a2b24;
  border-radius:52% 52% 20% 20%;
  box-shadow:inset 0 0 0 22px rgba(0,0,0,.24),0 18px 28px rgba(0,0,0,.38);
}
.product-grid .product-card:nth-child(2) .product-art:after{
  content:"17";
  position:absolute;
  font:900 32px Rockwell,serif;
  color:#ded3c2;
}

/* V4 branded 17 vote buttons */
.logo-vote-button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 12px 6px 6px;
  border:1px solid rgba(222,211,194,.38);
  background:rgba(0,0,0,.22);
  color:var(--cream);
  border-radius:999px;
  transition:.18s ease;
}
.logo-vote-button img{
  width:46px;
  height:46px;
  object-fit:contain;
  flex:0 0 46px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));
}
.logo-vote-button span{
  font-family:Rockwell,"Roboto Slab","Courier New",serif;
  font-weight:900;
  letter-spacing:.08em;
  font-size:.62rem;
  text-transform:uppercase;
  line-height:1.1;
}
.logo-vote-button:hover{
  background:rgba(222,211,194,.10);
  transform:translateY(-1px);
}
.logo-vote-button:disabled{
  opacity:.78;
  cursor:default;
  transform:none;
}
.logo-vote-button:disabled span{
  color:var(--cream2);
}

/* V5: another ~15% typography reduction across homepage and merch pages */
.hero-copy h1{font-size:clamp(1.36rem,4.08vw,3.06rem)}
.kicker{font-size:clamp(.68rem,1.36vw,.92rem)}
.subhead{font-size:clamp(.58rem,1.36vw,.78rem)}
.coming{font-size:.78rem}
.peek-link,.back-home{font-size:.58rem}
.site-menu a{font-size:.82rem}
.site-menu small{font-size:.54rem}

.merch-header h1{font-size:clamp(1.83rem,5.44vw,4.34rem)}
.merch-intro{font-size:.73rem}
.product-copy h2{font-size:clamp(1.02rem,2.17vw,1.60rem)}
.product-copy p{font-size:.75rem}
.product-copy .eyebrow{font-size:.51rem}
.want-button{font-size:.54rem}
.logo-vote-button span{font-size:.53rem}
.drop-note h2{font-size:clamp(1.45rem,4.08vw,2.72rem)}
.drop-note p:not(.kicker){font-size:.78rem}
.mini-brand strong{font-size:15px}
.mini-brand small{font-size:.43rem}
.mini-mark{width:50px;height:50px;font-size:23px}

/* Real V5 merchandise photography */
.real-products .product-card{
  background:linear-gradient(180deg,rgba(24,20,17,.96),rgba(11,9,7,.98));
}
.product-photo{
  height:310px;
  background:#eee7dc;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid rgba(222,211,194,.16);
}
.product-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.board-photo{
  height:390px;
  background:#111;
}
.board-photo img{
  object-fit:contain;
  background:#111;
}
.full-width-card{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
}
.full-width-card .product-photo{
  height:100%;
  min-height:420px;
}
.full-width-card .product-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.full-width-card .product-copy .logo-vote-button{
  align-self:flex-start;
}

@media(max-width:780px){
  .product-photo{height:260px}
  .full-width-card{grid-column:auto;display:block}
  .full-width-card .product-photo{height:300px;min-height:0}
}

/* V6 clean-up */

/* Home logo: 30% smaller than V5 */
.logo-wrap,
.hero-logo,
.hero img.logo,
.hero-logo-wrap,
.logo-container {
  transform:scale(.70);
  transform-origin:center center;
}

/* Fallback for the actual V5 home logo image if no wrapper class catches it */
.hero img[src*="17smokeco-logo"],
.hero img[src*="logo"]{
  width:70% !important;
  max-width:70% !important;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}

/* Clean merchandise teaser — no product catalog yet */
.clean-merch{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 28%,rgba(102,62,27,.12),transparent 35%),
    #090807;
}
.clean-merch-wrap{
  min-height:100vh;
  max-width:850px;
  margin:0 auto;
  padding:10vh 28px 8vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.clean-merch-wrap h1{
  margin:.65rem 0 1rem;
  font-size:clamp(1.45rem,4.2vw,3.3rem);
  line-height:.98;
  color:var(--cream);
}
.clean-merch-copy{
  max-width:650px;
  margin:.35rem auto;
  color:var(--cream2);
  font-size:.72rem;
  line-height:1.7;
}
.clean-merch-wrap .brand-divider{
  width:min(420px,80vw);
  margin:1.4rem 0 1rem;
}

/* Kept in case the cutting board returns later:
   display it at 25% of V5's former visual size. */
.board-photo{
  height:98px !important;
  min-height:0 !important;
}
.board-photo img{
  width:25% !important;
  height:auto !important;
  max-height:98px !important;
  object-fit:contain !important;
}

.home-main-logo{
  width:70% !important;
  max-width:70% !important;
  height:auto !important;
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* V7 — logo consistency */

/* Official small logo everywhere: use the actual 17-in-a-circle mark. */
.official-mark-link{
  display:inline-flex !important;
  margin:0 0 32px !important;
  text-decoration:none;
  align-items:center;
  justify-content:center;
}
.official-circle-mark{
  display:block;
  width:92px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
}

/* Remove the old constructed mini-brand presentation. */
.clean-merch .mini-brand{
  gap:0 !important;
}
.clean-merch .mini-mark,
.clean-merch .mini-brand > span:last-child{
  display:none !important;
}

/* Keep the full logo as the homepage hero, 30% smaller from V5 baseline. */
.home-main-logo{
  width:70% !important;
  max-width:700px !important;
  height:auto !important;
}

/* More headroom so the small logo and menu don't crowd mobile. */
@media(max-width:640px){
  .official-circle-mark{
    width:78px;
    height:78px;
  }
}

/* V8 — strict 17 Smoke Co. distressed brand system */

/* All display/navigation/button text follows the rugged distressed typography direction. */
body,
button,
.site-menu a,
.site-menu small,
.kicker,
.hero-copy h1,
.subhead,
.coming,
.peek-link,
.back-home,
.clean-merch-wrap h1,
.clean-merch-copy,
.drop-note,
.product-copy,
.logo-vote-button span {
  font-family: Rockwell, "Roboto Slab", "Courier New", serif !important;
}

.site-menu a,
.site-menu small,
.kicker,
.hero-copy h1,
.subhead,
.coming,
.peek-link,
.back-home,
.clean-merch-wrap h1,
.logo-vote-button span {
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:.055em;
  text-shadow:
    1px 0 rgba(255,255,255,.08),
    -1px 0 rgba(0,0,0,.50),
    0 1px rgba(0,0,0,.25);
}

/* Body copy stays readable but keeps the slab/rugged family. */
.clean-merch-copy{
  font-weight:700;
  letter-spacing:.015em;
}

/* Any standalone 17 mark must use the actual distressed-number artwork. */
.distressed-17-number{
  width:48px;
  height:48px;
  object-fit:contain;
  display:block;
}

/* Official small logo is always the real circle logo asset. */
.official-circle-mark,
.corner-brand img{
  object-fit:contain;
}

/* FINAL homepage cleanup */
.home-main{
  padding-top:28px;
}
.home-main-logo{
  width:70% !important;
  max-width:700px !important;
  height:auto !important;
}
.hero-copy{
  margin-top:10px;
}
.site-menu{
  z-index:1100;
}