/* v6 — FUTURE toggles and premium styles */
:root{
  --bg:#fffaf1;
  --ink:#111111;
  --muted:#666;
  --copper:#B87333;
  --amazon:#FF9900;
  --amazon2:#FFA41C;
  --panel:#fff7e6;
  --edge:#e9dfd4;
  --shadow:0 10px 40px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65}
body{font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* Dev-only preview: hide blocks marked data-future when body has .hide-future */
body.hide-future [data-future]{ display:none !important; }

/* Headings */
h1,h2,h3,h4,h5{font-family:'Cormorant Garamond', Georgia, serif; letter-spacing:.2px; color:var(--ink)}
h1.title{font-weight:600; font-size:60px; line-height:60px; margin:.2em 0 .5em}
h1.title .thin{font-weight:300}
h1.title .strong{font-weight:600}
@media (max-width: 900px){
  h1.title{font-size:42px; line-height:48px}
}
h2{font-weight:300; font-size:clamp(26px,3.5vw,40px)}
h2 .accent{font-weight:600}
h3{font-weight:600; font-size:clamp(20px,2.5vw,26px)}
.black{color:#111}
.accent{color:var(--copper)}

/* Copy */
.lede, .subtext{font-family:Montserrat, sans-serif; font-size:20px; line-height:28px; font-weight:200; color:#333}
.muted{color:#666}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 32px; border-radius:28px; height:56px;
  font-family:Montserrat, sans-serif; font-size:20px; line-height:28px;
  font-weight:600; cursor:pointer; border:0.6667px solid transparent; transition:all .25s ease;
  box-shadow:0 4px 6px rgba(0,0,0,.12); text-decoration:none;
}
.btn.small{height:auto; border-radius:22px; padding:10px 14px; font-size:16px; line-height:22px}
.btn.wide{width:592px; max-width:100%}
.btn.copper{background-image:linear-gradient(135deg, #DA8E47 0%, var(--copper) 100%); color:white; border-color:#bd7433}
.btn.copper-outline{border-color:var(--copper); color:var(--copper); background:white}
.btn.amazon{
  background-image:linear-gradient(135deg, var(--amazon), var(--amazon2));
  color:white; border-color:#d47f00; backdrop-filter:blur(4px);
  flex-direction:column; justify-content:center; align-items:center;
  height:auto; padding:14px 28px;
}
.btn.amazon .label{line-height:24px}
.btn.amazon .stars{margin-top:2px; letter-spacing:2px; line-height:20px; color:#FFD56A; font-size:18px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(6px); background:rgba(255,250,241,.9); border-bottom:1px solid var(--edge)}
.header-inner{max-width:1200px; margin:0 auto; padding:10px 16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px}
.wordmark img{height:36px; width:auto}
.brand-crest{display:flex; justify-content:center}
.brand-crest img{height:44px; width:auto}
.nav{display:flex; justify-content:flex-end; align-items:center; gap:18px; flex-wrap:wrap}
.nav a{font-weight:500; color:#3a3a3a}

/* Sections & placeholders */
.section{padding:56px 22px; border-top:1px solid var(--edge)}
.hero-grid{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}
.image-dotted{background:var(--panel); padding:16px; border-radius:14px; border:2px dashed #c89164; color:#915b31; text-align:center}
.image-dotted img{width:100%; height:auto; border-radius:10px; border:1px solid var(--edge); box-shadow:var(--shadow)}
.image-dotted figcaption{font-size:.95rem; margin-top:8px}
.image-dotted.hero-ph{min-height:420px}
.image-dotted.large{min-height:480px}
.image-dotted.care-ph{min-height:260px}
.cta-row.two{display:flex; gap:24px; margin:18px 0 10px}

/* Benefits */
.section-header{max-width:1100px; margin:0 auto 12px; padding:0 2px; text-align:center}
.benefit-cards{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:#fff; border:1px solid var(--edge); border-radius:14px; padding:18px; box-shadow:0 6px 24px rgba(0,0,0,.05)}
.icon-dotted{display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; border:2px dashed #c89164; color:#a9683b; margin-bottom:8px}

/* Product */
.product-wrap{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start}
.tabs{display:flex; gap:10px; border-bottom:1px solid var(--edge); margin:8px 0 12px}
.tab{background:transparent; border:none; padding:10px 2px; font-weight:600; color:#6c594c; border-bottom:3px solid transparent; cursor:pointer}
.tab.active{color:#7a381f; border-color:var(--copper)}
.panel{display:none}
.panel.active{display:block}
.checks{list-style:none; padding-left:0}
.checks li{position:relative; padding-left:28px; margin:10px 0}
.checks li::before{content:"✓"; position:absolute; left:0; top:0; color:#c47a38; font-weight:800}

/* Story */
.story-wrap{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}

/* Care */
.care-grid{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:22px; background:#fff; border:1px solid var(--edge); border-radius:14px; padding:18px}

/* Reviews */
.review-cards{max-width:1100px; margin:16px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.review .stars{color:#d89a50; font-size:1.1rem}
.review .date{color:#8a8078; font-size:.9rem; margin-bottom:6px}

/* Footer */
.site-footer{background:#6b3519; color:#efd7c3; margin-top:28px}
.footer-grid{max-width:1200px; margin:0 auto; padding:24px 16px; display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr; gap:24px}
.footer-grid h5{font-family:'Cormorant Garamond', Georgia, serif; font-size:1.2rem; margin:0 0 8px}
.footer-grid a{color:#f2e7db}
.logo-box{width:200px; height:72px; border-radius:10px; background:#f3e5d8; color:#915b31; display:flex; align-items:center; justify-content:center; margin-bottom:8px; border:2px dashed #c89164}
.logo-box img{max-height:60px; width:auto}
.social a{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid #f2e7db; margin-right:6px}
.legal{border-top:1px solid rgba(255,255,255,.15); text-align:center; padding:12px 0; font-size:.9rem; color:#f5eadd}

/* Responsive */
@media (max-width: 980px){
  .hero-grid, .product-wrap, .story-wrap, .care-grid, .footer-grid{grid-template-columns:1fr}
  .review-cards{grid-template-columns:1fr}
}

/* === Logo sizing overrides === */
:root{
  /* tweak these two numbers to taste */
  --logo-wordmark-h: 100px;   /* desktop wordmark height */
  --logo-crest-h: 100px;      /* desktop crest height */
}

/* header logos */
.wordmark img{ height: var(--logo-wordmark-h); width:auto; }
.brand-crest img{ height: var(--logo-crest-h); width:auto; }

/* a touch more vertical padding since logos are taller */
.header-inner{ padding:14px 16px; }  /* if your nav wraps, reduce to 12px */

/* keep sizes sensible on smaller screens */
@media (max-width: 900px){
  :root{ --logo-wordmark-h: 40px; --logo-crest-h: 50px; }
}
@media (max-width: 600px){
  :root{ --logo-wordmark-h: 32px; --logo-crest-h: 40px; }
}

/* (Optional) footer wordmark bigger too */
.logo-box{ width:240px; height:90px; }
.logo-box img{ max-height:80px; width:auto; }


/* Final hero image — no placeholder frame */
.image-dotted.hero-ph{ border:none; background:transparent; padding:0; }
.image-dotted.hero-ph img{
  display:block;
  border-radius:16px;
  border:1px solid #e9dfd4;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  width:100%; height:auto; object-fit:cover;
}
.image-dotted.hero-ph figcaption{ display:none; } /* hide placeholder text */


/* Clean frames for product/story/care images (no dotted border) */
.large,
.care-ph{ border:none; background:transparent; padding:0; }

.large img,
.care-ph img{
  display:block;
  width:100%; height:auto; object-fit:cover;
  border-radius:16px;
  border:1px solid #e9dfd4;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.footer-wordmark{
  display:block;
  max-height:80px;   /* adjust */
  width:auto;
}

.footer-wordmark{
  display:block; max-height:80px; width:auto;
  /* subtle light halo + tiny hard edge + soft depth */
  filter:
    drop-shadow(0 0 0.6px rgba(255,255,255,.75))
    drop-shadow(0 0 14px rgba(255,235,210,.28))
    drop-shadow(0 2px 6px rgba(0,0,0,.20));
}

/* Footer wordmark refinement on dark brown */
.footer-wordmark{
  display:block;
  max-height:72px;            /* tune 68–80px */
  width:auto;
  /* crisp hairline stroke + soft lift, not a glow */
  filter:
    drop-shadow(0 0 0.8px rgba(255,255,255,.88)) /* micro white stroke */
    drop-shadow(0 0 10px rgba(255,235,210,.22))  /* subtle ambient lift */
    drop-shadow(0 2px 6px rgba(0,0,0,.20));      /* depth */
}

/* Optional: subtle 'spotlight' behind mark—helps low-contrast copper */
.footer-mark{ position:relative; display:inline-block; }
.footer-mark::before{
  content:""; position:absolute; inset:-8px -12px; border-radius:16px;
  background: radial-gradient(60% 60% at 40% 45%, rgba(255,240,220,.12), rgba(255,240,220,0) 70%);
  pointer-events:none;
}

/* Hierarchy + spacing polish */
.footer-brand{ display:grid; grid-template-columns:auto; gap:8px; }
.footer-brand p{ max-width:36ch; margin-top:6px; }

/* Premium icon style */
.benefit .icon{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(60% 60% at 40% 40%, #fff7ef 0%, #fff2e6 60%, #fff 100%);
  border:1.5px solid #d3a57a;
  box-shadow:0 4px 14px rgba(0,0,0,.06) inset;
}
.benefit .icon svg{ width:30px; height:30px; stroke:#B87333; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.benefit.card{ padding:24px 24px 22px; border-radius:18px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.benefit h3{ margin:12px 0 10px; font-size:28px; line-height:1.15; }
.benefit p{ margin-top:6px; font-size:18px; line-height:28px; color:#333; }
.benefit-cards{ gap:20px; }

/* QUICK SHIP: hide benefit icons and tighten spacing */
.benefit .icon,
.benefit .icon-dotted { display:none !important; }

.benefit.card{
  padding:28px 28px 22px;          /* reclaim the empty space where icons were */
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.benefit h3{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.15;
}

.benefit p{
  margin-top:6px;
  font-size:18px;
  line-height:28px;
  color:#333;
}

.benefit-cards{ gap:20px; }

/* optional tiny accent to keep the cards from feeling too bare */
.benefit h3::after{
  content:"";
  display:block;
  width:28px; height:2px;
  background:#B87333; opacity:.55;
  margin:10px 0 4px;
}

/* =========================
   Mobile/Responsive Overrides
   ========================= */

/* Fluid typography (keeps your premium feel without giant text on phones) */
h1.title{ font-size: clamp(2.25rem, 5.2vw + 0.6rem, 3.75rem); line-height: 1.06; }
h2, .section-header h2{ font-size: clamp(1.6rem, 2.6vw + 0.8rem, 2.25rem); line-height: 1.15; }
p, .lede{ font-size: clamp(1rem, 1.2vw + .8rem, 1.125rem); line-height: 1.8; }

/* Ensure anchored sections don’t hide under the sticky header */
.section{ scroll-margin-top: 84px; }  /* adjust if your header height changes */

/* Header tweaks for small screens */
@media (max-width: 1024px){
  .header-inner{ padding: 8px 14px; }
  .nav a{ padding-inline: 8px; }
}
@media (max-width: 820px){
  :root{ --logo-wordmark-h: 40px; --logo-crest-h: 48px; } /* you added these earlier */
  .nav{ gap: 10px; }
  /* let the nav links scroll horizontally instead of wrapping ugly */
  .nav{ overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar{ display:none; }
  .btn.small{ padding:8px 14px; border-radius:20px; }
}

/* HERO: stack columns, center content, make CTAs full-width on phones */
@media (max-width: 980px){
  .hero-grid{ display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .hero-copy{ max-width: 680px; margin: 0 auto; text-align: left; }
  .cta-row.one{ justify-content: flex-start; gap: 12px; }
           /* shop / learn sit side-by-side */
  .hero-copy .btn.wide{ width: 100%; }      /* Amazon review full width */
  .hero-ph{ max-width: 680px; margin: 0 auto; }
}

@media (max-width: 600px){
  .hero.section{ padding-top: 18px; }
  .cta-row.one{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cta-row .btn{ width: 100%; }
  .review-cta{ margin-top: 10px; }
}

/* Benefit cards: 3→2→1 columns */
@media (max-width: 1024px){
  .benefit-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
}
@media (max-width: 640px){
  .benefit-cards{ grid-template-columns: 1fr; gap: 14px; }
  .benefit.card{ padding: 22px 20px; border-radius: 16px; }
  .benefit h3{ font-size: 1.5rem; }
}

/* Product detail split: stack image and text */
@media (max-width: 900px){
  .product-grid{ display: grid; grid-template-columns: 1fr; gap: 18px; }
  .product-aside{ order: 2; } /* bullets under image */
  .product-media{ order: 1; }
}

/* Tabs: make them tappable and wrap nicely */
@media (max-width: 600px){
  .tabs{ gap: 8px; flex-wrap: wrap; }
  .tab{ padding: 8px 10px; border-radius: 10px; }
}

/* Footer: stack columns */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; gap: 14px; }
  .footer-wordmark{ max-height: 64px; }
}

/* Images always scale down */
img{ max-width:100%; height:auto; }

/* Buttons remain thumb-friendly */
.btn{ min-height: 48px; } /* Google’s 48×48 target */

/* --- HERO BUTTON ALIGNMENT (mobile + safety on all) --- */
.btn{                     /* ensures perfect centering even on 2-line labels */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.2;
  white-space:normal;     /* allow line break like “Shop↵Now” */
}

@media (max-width: 700px){
  .cta-row.one{           /* 2 buttons side-by-side on phones */
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  {
    width:100%;
    min-height:56px;
    padding:12px 18px;
  }
  .hero-copy .btn.wide{   /* Amazon review full-width */
    width:100%;
  }
}

/* --- MOBILE HEADER LAYOUT --- */
@media (max-width: 740px){
  .header-inner{
    display:grid;
    grid-template-areas:
      "word crest cta"
      "nav  nav   nav";
    grid-template-columns: auto 1fr auto;
    column-gap:10px;
    row-gap:6px;
    padding:8px 12px;       /* tighter header */
  }

  /* place items into the grid areas */
  .wordmark{ grid-area:word; align-self:center; }
  .brand-crest{ grid-area:crest; align-self:center; justify-self:center; }
  .header-inner .btn.small{ grid-area:cta; align-self:center; justify-self:end; }

  /* make logos feel bigger on mobile (tweak if needed) */
  .wordmark img{ height:44px; width:auto; display:block; }
  .brand-crest img{ height:52px; width:auto; display:block; }

  /* the nav sits on the second row, one horizontal line */
  .nav{
    grid-area:nav;
    display:flex;
    gap:16px;
    justify-content:space-between;
    padding-top:6px;
    border-top:1px solid rgba(0,0,0,.06);
    overflow-x:auto;             /* if it doesn't fit, let it scroll horizontally */
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{
    padding:6px 0;
    line-height:1.1;
    font-size:16px;
  }
}

/* If the header still feels tall, you can trim this number down a bit */
.header-inner{ padding-block:8px; }

/* --- MOBILE HEADER: ensure CTA sits in top row with the logos --- */
@media (max-width: 740px){
  .header-inner{
    display:grid;
    grid-template-areas:
      "word crest cta"
      "nav  nav   nav";
    grid-template-columns: auto 1fr auto;
    align-items:center;
    column-gap:10px;
    row-gap:6px;
  }

  .wordmark{ grid-area: word; align-self:center; }
  .brand-crest{ grid-area: crest; align-self:center; justify-self:center; }

  /* Force the Shop Now button into the CTA area on the top row */
  #buy-nav{
    grid-area: cta !important;
    justify-self: end;
    align-self: center;
    margin: 0;           /* prevent it dropping below the nav */
  }

  .nav{
    grid-area: nav;
    display:flex; gap:16px;
    padding-top:6px;
    border-top:1px solid rgba(0,0,0,.06);
    overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{ display:none; }
}

/* Desktop / tablet layout */
@media (min-width: 741px){
  .site-header .header-inner{
    display:flex; align-items:center; gap:18px; padding:14px 24px;
  }
  .nav{ display:flex; gap:28px; margin-left:auto; align-items:center; }
  #buy-nav{ margin-left:16px; }      /* CTA sits to the right of the menu */
}

/* Extra-narrow phones: move crest to its own row */
@media (max-width: 430px){
  .header-inner{
    /* Top row: wordmark | CTA   Second row: crest   Third row: nav */
    grid-template-areas:
      "word cta"
      "crest crest"
      "nav   nav";
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }

  /* sizes tuned for small screens */
  .wordmark img{ height: 38px; }         /* try 36–42 if you want different */
  .brand-crest img{ height: 52px; }      /* crest can be a touch bigger here */
  #buy-nav{ padding: 10px 14px; font-size: 16px; }

  .nav{ padding-top: 6px; }
}

/* Hero CTAs: keep both on one line and centered */
.cta-row.one{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
{
  display:inline-flex; align-items:center; justify-content:center;
   min-height:56px;
  padding:12px 16px;
  text-align:center;
  white-space:nowrap;             /* <- no line breaks */
  font-size: clamp(15px, 3.6vw, 18px);  /* scale text down a bit on narrow screens */
}

/* Tighten on very small phones so text still fits in one line */
@media (max-width: 380px){
  { padding-inline:12px; font-size: clamp(14px, 3.8vw, 16px); }
}

/* === CANONICAL HERO CTAs (mobile + desktop) === */
.hero .cta-row.one{
  display:flex;                 /* equal widths without min-width hacks */
  gap:12px;
}

.hero .cta-row.one .btn{
  flex:1 1 0;                   /* both take 50% of the row */
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:56px;
  padding:12px 14px;
  white-space:nowrap;           /* keep each label on one line */
  font-size:clamp(14px, 3.4vw, 18px);  /* shrink a bit as screen narrows */
}

/* When space gets truly tight, stack BOTH together */
@media (max-width: 432px){
  .hero .cta-row.one{
    flex-direction:column;      /* they change together */
  }
  .hero .cta-row.one .btn{
    width:100%;
    white-space:normal;         /* allow natural line-wrap when full width */
    font-size:18px;
    min-height:56px;
    padding:12px 18px;
  }
}

/* === FINAL CANONICAL FOR HERO CTAs === */

/* Keep the two CTAs side-by-side and equal width */
.hero .cta-row.one{
  display: flex !important;
  gap: 12px !important;
}

.hero .cta-row.one .btn{
  /* equal columns, allow content to shrink, never wrap */
  flex: 1 1 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  white-space: nowrap !important;              /* <-- stops 2-line labels */
  font-size: clamp(15px, 3.6vw, 18px) !important;
  padding: 12px 14px !important;
  min-height: 56px !important;
}

/* When space is truly gone, flip BOTH together to one-per-row */
@media (max-width: 409px){
  .hero .cta-row.one{ flex-direction: column !important; }
  .hero .cta-row.one .btn{
    width: 100% !important;
    white-space: normal !important;            /* OK to wrap when full-width */
    font-size: 18px !important;
    padding: 12px 18px !important;
  }
}