/* =========================================================
     DIVOT DEPOT — DESIGN TOKENS
     A committed brand world: warm supply-catalog paper, deep
     fairway pine, stamped rust ink. Not a light/dark toggle —
     this is the brand, on every screen, the way the real site
     will look. Background and every color are painted explicitly.
     ========================================================= */
  :root{
    --paper:        #F3EFE3;
    --paper-raised: #EAE3CE;
    --paper-line:   #D6CCAC;
    --ink:          #17221A;
    --ink-soft:     #4B5647;
    --ink-faint:    #566151;
    --pine:         #1F4D3A;
    --pine-hi:      #2B6B4E;
    --pine-deep:    #142A20;
    --pine-deep-2:  #0F2118;
    --cream:        #EEE8D6;
    --cream-soft:   #C7CBB7;
    --rust:         #A54324;
    --rust-hi:      #D9713F;
    --rust-deep:    #93401F;
    --brass:        #AD8A4E;

    --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
    --font-stamp:   "Big Shoulders Stencil", "Big Shoulders", sans-serif;
    --font-body:    "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem;
    --space-12: 6rem; --space-16: 8rem;

    --radius-sm: 2px;
    --shadow-card: 0 1px 2px rgba(20,30,22,.06), 0 10px 24px -14px rgba(20,30,22,.28);
    --shadow-lift: 0 18px 34px -16px rgba(20,30,22,.4);
    --ease: cubic-bezier(.22,.7,.2,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background-color: var(--paper);
    background-image:
      repeating-linear-gradient(0deg, rgba(23,34,26,.025) 0px, transparent 1px, transparent 3px),
      repeating-linear-gradient(90deg, rgba(23,34,26,.018) 0px, transparent 1px, transparent 3px);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
  input,textarea{ font:inherit; color:inherit; }
  ul{ margin:0; padding:0; list-style:none; }
  p{ margin:0; }
  h1,h2,h3,h4{ margin:0; text-wrap:balance; font-weight:700; }

  :focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

  .wrap{ max-width:1280px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.75rem); }

  .eyebrow{
    font-family: var(--font-mono);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color: var(--rust);
    display:flex; align-items:center; gap:.6em;
  }
  .eyebrow::before{ content:""; width:1.4em; height:1px; background:currentColor; display:inline-block; }
  .on-dark .eyebrow{ color: var(--rust-hi); }

  .h1{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:.94; font-size:clamp(2.8rem,7.4vw,6.2rem); }
  .h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:.98; font-size:clamp(2.1rem,4.6vw,3.4rem); }
  .h3{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.05; font-size:clamp(1.35rem,2.6vw,1.75rem); }
  .lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-soft); max-width:52ch; }
  .on-dark .lead{ color: var(--cream-soft); }
  .on-dark{ color: var(--cream); }

  .section{ padding-block: clamp(3.5rem, 8vw, var(--space-16)); position:relative; }
  .section-head{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom: var(--space-8); max-width:64ch; }
  .section-head-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-8); }

  .mono-tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:.55em; justify-content:center;
    font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
    padding: .95em 1.5em; border:1px solid transparent; white-space:nowrap;
    transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  }
  .btn svg{ width:14px; height:14px; }
  .btn--primary{ background:var(--rust); color:var(--cream); }
  .btn--primary:hover{ background:var(--rust-deep); transform:translateY(-2px); }
  .btn--dark{ background:var(--pine-deep); color:var(--cream); }
  .btn--dark:hover{ background:var(--pine); transform:translateY(-2px); }
  .btn--outline{ border-color:var(--ink); color:var(--ink); }
  .btn--outline:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
  .btn--outline-inverse{ border-color:rgba(238,232,214,.55); color:var(--cream); }
  .btn--outline-inverse:hover{ background:var(--cream); color:var(--pine-deep); transform:translateY(-2px); }
  .btn--block{ width:100%; }
  .btn--sm{ padding:.7em 1.1em; font-size:.72rem; }

  /* ---------- stamp badge ---------- */
  .stamp{
    display:inline-flex; align-items:center; gap:.4em;
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
    padding:.4em .7em; border:1.5px dashed currentColor; transform:rotate(-2.5deg);
  }
  .stamp--rust{ color:var(--rust); }
  .stamp--pine{ color:var(--pine); }
  .stamp--brass{ color:var(--ink-faint); }

  /* ---------- torn / perforated divider ---------- */
  .torn{ height:22px; width:100%; background-repeat:repeat-x; background-size:22px 22px; }
  .torn--to-paper{ background-image:linear-gradient(135deg,var(--pine-deep) 11px,transparent 0),linear-gradient(225deg,var(--pine-deep) 11px,transparent 0); }
  .torn--to-paper.flip{ transform:scaleY(-1); }
  .torn--to-rust{ background-image:linear-gradient(135deg,var(--paper) 11px,transparent 0),linear-gradient(225deg,var(--paper) 11px,transparent 0); background-color:var(--pine-deep); }

  /* =========================================================
     HEADER / NAV
     ========================================================= */
  .site-header{
    position:sticky; top:0; z-index:100;
    background:rgba(243,239,227,.9); backdrop-filter:blur(10px) saturate(1.1);
    border-bottom:1px solid var(--paper-line);
  }
  .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
  .brand{ display:flex; flex-direction:column; line-height:1; gap:.15em; }
  .brand__mark{ font-family:var(--font-display); font-weight:800; font-size:1.55rem; text-transform:uppercase; letter-spacing:.01em; }
  .brand__sub{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:var(--rust); text-transform:uppercase; }

  .nav-desktop{ display:none; }
  .nav-desktop ul{ display:flex; align-items:center; gap:var(--space-8); }
  .nav-desktop a{
    font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
    padding-bottom:4px; border-bottom:2px solid transparent; transition:border-color .2s var(--ease), color .2s var(--ease);
    color:var(--ink-soft);
  }
  .nav-desktop a:hover, .nav-desktop a.is-active{ color:var(--ink); border-color:var(--rust); }

  .header-actions{ display:flex; align-items:center; gap:var(--space-5); }
  .cart-btn{ position:relative; display:flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
  .cart-btn svg{ width:19px; height:19px; }
  .cart-count{ position:absolute; top:-8px; right:-10px; background:var(--rust); color:var(--cream); font-size:.62rem; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); }
  .cart-btn .cart-label{ display:none; }

  .menu-btn{ display:flex; flex-direction:column; gap:5px; padding:8px; }
  .menu-btn span{ width:22px; height:2px; background:var(--ink); display:block; }

  .mobile-nav{
    position:fixed; inset:0; z-index:200; display:flex; justify-content:flex-end;
    visibility:hidden; pointer-events:none;
  }
  .mobile-nav__backdrop{ position:absolute; inset:0; background:rgba(15,25,18,.55); opacity:0; transition:opacity .3s var(--ease); }
  .mobile-nav__panel{
    position:relative; width:min(86vw,360px); height:100%; background:var(--pine-deep); color:var(--cream);
    padding:var(--space-6) var(--space-6); display:flex; flex-direction:column; gap:var(--space-8);
    transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .mobile-nav.is-open{ visibility:visible; pointer-events:auto; }
  .mobile-nav.is-open .mobile-nav__backdrop{ opacity:1; }
  .mobile-nav.is-open .mobile-nav__panel{ transform:translateX(0); }
  .mobile-nav__top{ display:flex; justify-content:space-between; align-items:center; }
  .mobile-nav__close svg{ width:22px; height:22px; }
  .mobile-nav ul{ display:flex; flex-direction:column; gap:var(--space-5); }
  .mobile-nav a{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; text-transform:uppercase; }
  .mobile-nav__foot{ margin-top:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--cream-soft); letter-spacing:.06em; }

  @media (min-width:900px){
    .nav-desktop{ display:block; }
    .menu-btn{ display:none; }
    .cart-btn .cart-label{ display:inline; }
  }

  /* ---------- scroll reveal ---------- */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* =========================================================
     HERO
     ========================================================= */
  .hero{ background:var(--pine-deep); color:var(--cream); position:relative; overflow:hidden; padding-top:var(--space-12); padding-bottom:var(--space-10); }
  .hero::before{
    content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
    background-image:
      repeating-radial-gradient(circle at 15% 20%, rgba(238,232,214,.05) 0 1px, transparent 1px 34px),
      repeating-radial-gradient(circle at 85% 75%, rgba(238,232,214,.045) 0 1px, transparent 1px 46px);
  }
  .hero .wrap{ position:relative; z-index:1; }
  .hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-6); flex-wrap:wrap; }
  .hero-head{ margin-top:var(--space-6); max-width:900px; }
  .hero-head .eyebrow{ margin-bottom:var(--space-4); }
  .hero .h1 span{ display:block; }
  .hero .h1 .accent{ color:var(--rust-hi); }
  .hero-lead{ margin-top:var(--space-5); }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-8); }
  .hero-stats{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8); margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid rgba(238,232,214,.16); }
  .hero-stat{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--cream-soft); }
  .hero-stat b{ color:var(--cream); font-weight:600; }

  /* =========================================================
     PRODUCT CARDS (shared: trending gear)
     ========================================================= */
  .grid{ display:grid; gap:var(--space-6); grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
  .product-card, .apparel-card, .post-card{
    background:var(--paper-raised); border:1px solid var(--paper-line);
    display:flex; flex-direction:column; box-shadow:var(--shadow-card);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .product-card:hover, .apparel-card:hover, .post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }

  .card-media{
    position:relative; aspect-ratio:4/3; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background-color:var(--pine);
    background-image:repeating-radial-gradient(circle at 25% 30%, rgba(238,232,214,.08) 0 1px, transparent 1px 20px);
  }
  .card-media img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .4s var(--ease);
  }
  .product-card:hover .card-media img, .apparel-card:hover .card-media img, .post-card:hover .card-media img{
    transform:scale(1.04);
  }
  .card-media::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(15,25,18,.5) 0%, rgba(15,25,18,0) 40%);
  }
  .card-media__mark{ font-family:var(--font-stamp); font-weight:700; font-size:5.2rem; color:rgba(238,232,214,.16); letter-spacing:.02em; }
  .card-media__fig{ position:absolute; top:.65rem; left:.75rem; z-index:1; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:rgba(238,232,214,.9); text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,.55); }
  .card-media .stamp{ position:absolute; top:.65rem; right:.65rem; background:var(--paper); z-index:1; }

  .card-body{ padding:1.15rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
  .card-cat{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--rust); }
  .card-title{ font-family:var(--font-body); font-weight:600; font-size:1.08rem; line-height:1.3; }
  .card-brand{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
  .card-blurb{ font-size:.9rem; color:var(--ink-soft); flex:1; }
  .card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; padding-top:.9rem; border-top:1px solid var(--paper-line); }
  .card-price{ font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums; font-size:1rem; }
  .post-card__link{ background:none; border:0; padding:0; margin:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
  .post-card__link:hover{ color:var(--rust); }
  .post-h4{ font-family:var(--font-display); text-transform:uppercase; font-size:1.15rem; letter-spacing:.01em; margin-top:1.6rem; margin-bottom:.6rem; }
  .post-quote{ border-left:3px solid var(--rust); padding-left:1.2rem; margin:1.7rem 0; font-family:var(--font-display); font-size:1.35rem; text-transform:uppercase; line-height:1.15; color:var(--ink); }

  /* ---------- long-form post components (migrated reviews) ---------- */
  .post-pick{ border:1px solid var(--paper-line); background:var(--paper-raised); padding:1.3rem 1.4rem; margin:1.3rem 0; }
  .post-pick__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
  .post-pick__head .mono-tag{ color:var(--rust); margin-right:.6rem; }
  .post-pick h4.post-h4{ margin-top:0; margin-bottom:.4rem; display:inline; }
  .post-pick p{ margin-top:.5rem; }
  .post-specs{ margin:.7rem 0 0; padding-left:1.1rem; color:var(--ink-soft); font-size:.94rem; }
  .post-specs li{ margin-bottom:.3rem; }
  .post-body table{ width:100%; border-collapse:collapse; margin:1.7rem 0; font-size:.87rem; }
  .post-body th, .post-body td{ padding:.6rem .7rem; border-bottom:1px solid var(--paper-line); text-align:left; font-variant-numeric:tabular-nums; }
  .post-body th{ font-family:var(--font-mono); text-transform:uppercase; font-size:.68rem; letter-spacing:.06em; color:var(--ink-faint); border-bottom:2px solid var(--ink); white-space:nowrap; }
  .post-body{ overflow-x:auto; }
  .post-cta{ border:1.5px dashed var(--rust); padding:1.3rem 1.4rem; margin:2rem 0 1rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
  .post-cta p{ font-size:.85rem; color:var(--ink-faint); max-width:40ch; }
  .post-source-tag{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }

  /* ---------- filter pills (shop + blog) ---------- */
  .filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--space-8); }
  .filter-pill{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; padding:.6em 1.1em; border:1px solid var(--ink); color:var(--ink); background:transparent; transition:background-color .2s var(--ease), color .2s var(--ease); }
  .filter-pill:hover{ background:rgba(23,34,26,.07); }
  .filter-pill.is-active{ background:var(--ink); color:var(--paper); }

  /* ---------- form fields (contact) ---------- */
  .field{ display:flex; flex-direction:column; gap:.45rem; }
  .field input, .field select, .field textarea{
    padding:.85em 1em; border:1px solid var(--paper-line); background:var(--paper-raised);
    font-family:var(--font-body); font-size:.95rem; color:var(--ink); resize:vertical;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--rust); outline-offset:2px; border-color:var(--rust); }

  /* ---------- social stamps (light contexts) ---------- */
  .social-stamps{ display:flex; gap:.6rem; }
  .social-stamps a{ width:34px; height:34px; border:1px solid var(--ink); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.66rem; transition:background-color .2s,color .2s; }
  .social-stamps a:hover{ background:var(--ink); color:var(--paper); }

  /* ---------- FAQ accordion ---------- */
  .faq-item{ border-bottom:1px solid var(--paper-line); padding-block:var(--space-4); }
  .faq-item summary{ cursor:pointer; font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:1.05rem; letter-spacing:.01em; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:"+"; font-family:var(--font-mono); font-size:1.3rem; color:var(--rust); flex-shrink:0; }
  .faq-item[open] summary::after{ content:"\2212"; }
  .faq-item p{ margin-top:.8rem; color:var(--ink-soft); max-width:65ch; }

  @media (max-width:760px){
    .contact-grid{ grid-template-columns:1fr !important; }
    .contact-row{ grid-template-columns:1fr !important; }
  }

  /* =========================================================
     FOOTER
     ========================================================= */
  .site-footer{ background:var(--pine-deep-2); color:var(--cream); }
  .footer-top{ padding-block:var(--space-12) var(--space-8); display:grid; gap:var(--space-8); grid-template-columns:1.3fr repeat(3,1fr); }
  .footer-brand p{ color:var(--cream-soft); font-size:.92rem; max-width:32ch; margin-top:var(--space-4); }
  .footer-col h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-bottom:var(--space-4); }
  .footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
  .footer-col a{ font-size:.9rem; color:var(--cream-soft); transition:color .2s; }
  .footer-col a:hover{ color:var(--cream); }
  .footer-social{ display:flex; gap:.6rem; margin-top:var(--space-4); }
  .footer-social a{ width:34px; height:34px; border:1px solid rgba(238,232,214,.3); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.03em; }
  .footer-social a:hover{ background:var(--cream); color:var(--pine-deep); }
  .footer-bottom{ border-top:1px solid rgba(238,232,214,.14); padding-block:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; font-family:var(--font-mono); font-size:.7rem; color:var(--cream-soft); letter-spacing:.03em; }

  @media (max-width:760px){ .footer-top{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

  /* utility */
  .center{ text-align:center; margin-inline:auto; }