/* =========================================================
   styles.css  — Sailing Store
   Table of Contents
   1) Base / tokens / resets
   2) Header (desktop): logo, nav, actions, hover-grow, indicator
   3) Mobile navigation (drawer + hamburger visibility)
   4) Product grid & cards (catalog)
   5) Responsive tweaks
   6) Accessibility & UX polish
   7) Meet-Us About Section Styles
   8) Support section styles
   9) Gear Feed Section
   ========================================================= */


/* ===========================
   1) Base / tokens / resets
=========================== */
:root{
  --ink:#0a1f44;
  --ink-2:#274378;
  --bg:#fff;
  --muted:#444;
  --border:#e2e6ea;
  --shadow:0 12px 24px rgba(0,0,0,.2);
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:#111;
}

.hidden{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


/* ===========================
   2) Header (desktop)
=========================== */
.header{
  position:fixed; inset:0 0 auto 0;
  width:100%; background:#fff; z-index:1000;
  transform:translateY(-100%);
  will-change:transform;
}
.header.slide-in{ animation:headerDrop .55s ease-out forwards; }

@keyframes headerDrop{
  0%{ transform:translateY(-100%); }
  100%{ transform:translateY(0); }
}

.container{
  max-width:1200px; margin:0 auto; padding:.5rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* Logo */
.logo img{
  height:50px; width:auto;
  transition:transform .18s ease-out;
}
.logo:hover img{ transform:scale(1.08); }

/* Primary nav */
.nav-wrapper{ position:relative; }
.nav-wrapper ul{ list-style:none; margin:0; padding:0; display:flex; gap:1.1rem; }
.nav-wrapper li{ display:inline-block; }

.nav-wrapper a{
  display:inline-block;            /* enables transform grow */
  position:relative;
  padding:.25rem .15rem;
  text-decoration:none;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  transition:transform .18s ease-out, color .18s ease-out;
  will-change:transform,color;
  outline:none;                    /* kill persistent blue outline */
}
.nav-wrapper a:hover{
  transform:scale(1.15) translateY(-1px);
  color:var(--ink-2);
}
.nav-wrapper a:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(39,67,120,.22);
  border-radius:6px;
}

/* Active underline indicator (optional if you wire it up) */
.nav-indicator{
  position:absolute; bottom:-6px; left:0; height:3px; width:0;
  background:var(--ink); transition:left .3s,width .3s;
}

/* Right-side actions (cart etc.) */
.actions{ display:flex; align-items:center; gap:1rem; }
.actions .cart-icon{
  display:flex; align-items:center; gap:.25rem;
  color:var(--ink); text-decoration:none;
  transition:transform .12s ease-out, color .18s ease-out;
}
.actions .cart-icon:hover{
  transform:scale(1.12) translateY(-1px);
  color:var(--ink-2);
}

/* Hamburger: hidden on desktop */
.header .hamburger{
  display:none !important;         /* <-- fixes the stray bar on desktop */
  background:none; border:0; width:24px; height:18px; padding:0;
}
.header .hamburger span{
  display:block; height:3px; border-radius:2px; background:currentColor;
}
.header .hamburger:focus{ outline:none; }
.header .hamburger:focus-visible{
  outline:2px solid rgba(39,67,120,.28); border-radius:6px;
}


/* ===========================
   3) Mobile navigation
=========================== */
.mobile-nav{
  position:fixed; top:0; right:-100%;
  width:80%; max-width:300px; height:100%;
  background:#fff; box-shadow:-2px 0 8px rgba(0,0,0,.2);
  transition:right .15s ease-out; z-index:2000; padding:2rem 1.5rem;
}
.mobile-nav.open{ right:0; }
.mobile-nav .close-nav{
  position:absolute; top:1rem; right:1rem;
  background:none; border:0; font-size:2rem; cursor:pointer;
}
.mobile-nav ul{
  list-style:none; margin:4rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:1.25rem;
}
.mobile-nav a{ font-size:1.15rem; font-weight:600; color:var(--ink); text-decoration:none; }
.mobile-nav a:hover{ color:var(--ink-2); }


/* ===========================
   4) Product grid & cards
=========================== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(320px,1fr));
  gap:1.5rem;
  margin:40px auto 0;
  padding:2rem 1rem;
  max-width:1400px;
}
.product-item{
  text-align:center;
  transition:transform .25s, box-shadow .25s;
  border-radius:6px;
}
.product-item:hover{ transform:scale(1.04); box-shadow:var(--shadow); }
.product-item img{
  width:100%; height:60vh; min-height:300px;
  object-fit:cover; display:block; border-radius:6px;
}
.product-title{
  margin:.75rem 0 .25rem;
  font-size:1.4rem; font-weight:700; text-transform:uppercase;
}
.product-desc{ margin:0 0 .6rem; font-size:.95rem; color:var(--muted); }
.product-price{ font-size:1.1rem; font-weight:700; color:var(--ink); margin:.25rem 0 .7rem; }
.product-microproof{ margin:.6rem 0 .4rem; font-size:.9rem; color:var(--ink); font-weight:600; }

/* --- Product card CTAs: unified sizing & polish --- */
.product-ctas{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.75rem;
}

/* Size, layout, and interaction for both CTAs */
.product-ctas .buy-now,
.product-ctas a.buy-now,
.product-ctas .add-kit,
.product-ctas .add-to-kit{
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; /* for <a> */
  border:0; outline:0;
  border-radius:12px;
  padding:.85rem 1.1rem;         /* bigger hit target */
  min-height:50px;               /* visual heft */
  font:700 1.02rem/1 'Montserrat',system-ui,sans-serif;
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(10,31,68,.18);
  transition:
    transform .06s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    filter .12s ease;
}

.product-ctas .buy-now:hover,
.product-ctas a.buy-now:hover,
.product-ctas .add-kit:hover,
.product-ctas .add-to-kit:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(10,31,68,.22);
  filter:brightness(.98);
}
.product-ctas .buy-now:active,
.product-ctas a.buy-now:active,
.product-ctas .add-kit:active,
.product-ctas .add-to-kit:active{
  transform:translateY(0);
  box-shadow:none;
}

/* Accessible focus */
.product-ctas .buy-now:focus-visible,
.product-ctas a.buy-now:focus-visible,
.product-ctas .add-kit:focus-visible,
.product-ctas .add-to-kit:focus-visible{
  box-shadow:
    0 0 0 3px rgba(39,67,120,.22),
    0 6px 18px rgba(10,31,68,.18);
}

/* Desktop can handle a touch more size */
@media (min-width:1100px){
  .product-ctas .buy-now,
  .product-ctas a.buy-now,
  .product-ctas .add-kit,
  .product-ctas .add-to-kit{
    padding:.95rem 1.2rem;
    min-height:52px;
    font-size:1.08rem;
  }
}


/* ===========================
   5) Responsive tweaks
=========================== */
@media (max-width:1024px){
  .product-grid{ grid-template-columns:repeat(2, minmax(260px,1fr)); }
}
/* --- Mobile header: final patch --- */
@media (max-width:900px){
  /* Keep desktop flex; just make the container the positioning context */
  #site-header .container{
    position:relative;
    padding:.5rem 16px;   /* adjust to taste */
    min-height:56px;
  }

  /* 1) Logo true-centered, independent of left/right widths */
  #site-header .logo{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%, -50%);
  }

  /* 2) Hamburger pinned to the LEFT (relative to container, not .actions) */
  #site-header.header .hamburger{
    display:flex !important;
    position:absolute;
    left:16px; top:50%;
    transform:translateY(-50%);
    width:32px; height:32px;
    padding:0; border:0; background:none; color:var(--ink);
    z-index:2;
  }
  /* thicker lines */
  #site-header .hamburger-icon{ width:24px; height:24px; display:block; }
  #site-header .hamburger-icon path{ stroke-width:3; }

  /* 3) Cart on the RIGHT via flex (NOT absolute) */
  #site-header .actions{
    position:static !important;   /* <-- undo any earlier absolute */
    margin-left:auto;             /* push to the right in flex row */
    display:flex; align-items:center; gap:.5rem;
  }

  /* 4) Hide desktop nav */
  #site-header .nav-wrapper{ display:none !important; }
}

@media (max-width:768px){
  .product-grid{ grid-template-columns:1fr; padding:1rem; }
  .product-item img{ height:50vh; }
  button.buy-now, a.buy-now, .add-kit, .add-to-kit{
    flex:1 1 100%; padding:.75rem 1.25rem; min-height:48px; font-size:1rem; border-radius:10px;
  }
}


/* =========================================================
   5A) Mission / Founder responsive layout helpers
   (safe: only apply if those classes exist on a page)
   ========================================================= */

/* ---------- Desktop / wide (gives more breathing room) ---------- */
@media (min-width: 980px){
  /* Mission two-column shell: intro left, content right */
  .mission-wrap{
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 28px;
    align-items: start;
  }
  /* Mission cards in 2-up grid with shared gap */
  .mission-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  /* Quote spans both columns under the cards */
  .mission-quote{ grid-column: 1 / -1; }

  /* Founder hero: text + image side-by-side */
  .founder-hero{
    display: grid;
    grid-template-columns: minmax(340px, 420px) 1fr;
    gap: clamp(16px, 3vw, 32px);
    align-items: start;
  }
  /* Founder “values” tiles in 3-up on desktop */
  .values{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
  }
}

/* ---------- Mobile-first stacking / readability ---------- */
@media (max-width: 768px){
  /* Mission: stack EVERYTHING vertically in reading order */
  .mission-wrap{ display: block; }        /* drops any side-by-side */
  .mission-intro{ margin: 0 0 10px; }     /* a touch of breathing room */
  .mission-grid{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mission-quote{ order: 4; }             /* ensure quote comes last */

  /* Founder pages: stack hero + values vertically */
  .founder-hero{ display: block; }
  .values{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Meet-Us cards already stack at 900px; ensure spacing on small phones */
  .meet-grid{ gap: 14px; }
}

/* ---------- Tiny polish shared by both pages ---------- */
/* Prevent images from overflowing in narrow layouts */
.founder-hero img,
.mission-quote img{ max-width: 100%; height: auto; display: block; }


/* ===========================
   6) Accessibility & UX polish
=========================== */
/* Prevent iOS zoom on form controls */
input, select, textarea, button{ font-size:16px; }

/* Crisp text on WebKit */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Prevent image overflow on small screens */
.product-item img{ max-width:100%; }

/* Allow root scroll on mobile so the URL bar can collapse (helps checkout) */
@media (max-width:600px){
  html, body{
    height:auto;          /* override height:100% */
    min-height:100%;
    overflow-x:hidden;
  }
}

/* ===========================
7  Meet Us page (cards)
=========================== */
.meet { padding: 96px 0 56px; } /* clears fixed header */
.meet .container { max-width: 1100px; margin-inline: auto; padding-inline: 16px; }

.meet-hero h1{
  margin: 0 0 6px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: .2px;
  color: var(--ink);
}
.meet-tagline{
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: #333;
}

/* Grid */
.meet-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 900px){ .meet-grid{ grid-template-columns: 1fr; } }

/* Card shell */
.meet-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.meet-card:hover{
  transform: translateY(-2px);
  border-color: #e7ebf0;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* Click surface */
.meet-card-link{ display:block; color:inherit; text-decoration:none; }

/* Media (16:9 with object-fit) */
.meet-card-media{
  aspect-ratio: 16 / 9;
  background: #f3f5f8;
  display:grid; place-items:center;
}
.meet-card-media.is-placeholder::after{
  content: "Sailing Store";
  font-weight: 700; color: #8aa0c8; opacity:.8;
}
.meet-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Body */
.meet-card-body{ padding: 14px; }
.meet-card-body h2{
  margin: 0 0 6px; font-size: 1.15rem; color: var(--ink);
}
.meet-card-body p{
  margin: 0 0 10px; color:#333; line-height:1.6;
}

/* CTA pill */
.meet-cta{
  display:inline-block;
  font-weight:700;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: #f2f6ff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(10,31,68,.10);
  transition: background .12s ease, transform .06s ease;
}
.meet-card:hover .meet-cta{ background:#e8f0ff; transform: translateY(-1px); }

/* Focus ring for accessibility */
.meet-card-link:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(39,67,120,.22);
}

/* === Fix: make ALL product CTAs use brand navy === */
.product-ctas .buy-now,
.product-ctas a.buy-now,
.product-ctas .add-kit,
.product-ctas .add-to-kit,
.product-ctas .add-to-cart {                 /* <-- new: your actual Add to Cart class */
  background: var(--ink);
  color: #fff;
}

/* Keep text white in every anchor state (iOS Safari sometimes flips it) */
.product-ctas a.buy-now:link,
.product-ctas a.buy-now:visited,
.product-ctas a.add-to-cart:link,
.product-ctas a.add-to-cart:visited {
  color: #fff;
}

/* Pressed/active tone */
.product-ctas .buy-now:active,
.product-ctas a.buy-now:active,
.product-ctas .add-kit:active,
.product-ctas .add-to-kit:active,
.product-ctas .add-to-cart:active {
  background: var(--ink-2);
}

/* Optional: extra iOS hardening so anchor text never goes system-blue */
@supports (-webkit-touch-callout: none) {
  .product-ctas a.buy-now,
  .product-ctas a.add-to-cart { color:#fff !important; }
}

/* =========================================================
   Meet Us — hero header cleanup (mobile + desktop polish)
   ========================================================= */

/* Desktop / wide: title + tagline sit on a clean two-column grid */
.meet-hero{
  display:grid;
  grid-template-columns: minmax(180px, 240px) 1fr; /* title column / copy */
  align-items:end;
  gap: 16px;
}

/* Title: slightly tighter, balanced wrapping */
.meet-hero h1{
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
  text-wrap: balance;              /* nicer multi-line breaks on modern Safari/Chrome */
}

/* Tagline: calmer color + width so it doesn’t feel crowded */
.meet-tagline{
  margin: 2px 0 8px;
  color: #2a2f3a;
  opacity:.88;
  max-width: 42ch;                 /* comfortable measure */
  line-height: 1.5;
}

/* Overall page top padding so it clears the fixed site header */
.meet{ padding-top: 88px; }

/* ---------- Small screens: stack cleanly, fix spacing ---------- */
@media (max-width: 700px){
  .meet-hero{ 
    display:block;                 /* stack title above tagline */
  }
  .meet-hero h1{
    font-size: clamp(26px, 6.4vw, 34px);
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .meet-tagline{
    font-size: 1.05rem;
    margin-bottom: 12px;
    max-width: 36ch;               /* keeps lines readable on phones */
  }
  .meet{ padding-top: 76px; }      /* a touch less since the logo is tall on iPhone */
}

/* Ultra-small safety (older small iPhones) */
@media (max-width: 360px){
  .meet-hero h1{ font-size: 24px; }
  .meet-tagline{ font-size: 1rem; }
}

/* ===========================
   Support page styles
   =========================== */
.support{ padding: 96px 0 56px; }
.support .container{ max-width: 1100px; margin-inline: auto; padding-inline: 16px; }

.support-hero h1{
  margin: 0 0 6px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: .2px;
}
.support-tagline{
  margin: 0 0 14px;
  font-size: 1.05rem;
  color:#2a2f3a; opacity:.9;
  max-width: 46ch; line-height:1.55;
}

/* Contact cards */
.support-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top: 8px;
}
@media (max-width: 900px){ .support-grid{ grid-template-columns:1fr; } }

.support-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
}
.support-card h2{ margin:4px 0 6px; font-size:1.12rem; color:var(--ink); }
.support-card p{ margin:0 0 10px; color:#333; }
.support-card .muted{ color:#666; font-size:.92rem; }

/* Policies */
.support-policies{ margin-top: 20px; }
.support-policies h2{ margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 28px); color: var(--ink); }
.policy-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .policy-grid{ grid-template-columns:1fr; } }
.policy{
  background:#fafafa;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 6px 22px rgba(0,0,0,.04);
}
.policy h3{ margin:6px 0 6px; font-size:1.05rem; }
.policy ul{ margin:0; padding-left:1.1rem; }

/* FAQ (native disclosure) */
.support-faq{ margin-top: 20px; }
.support-faq h2{ margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 28px); color: var(--ink); }
.support-faq details{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; margin:8px 0; padding:10px 12px;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.support-faq summary{
  cursor:pointer; font-weight:700; color:var(--ink);
  list-style:none; outline:none;
}
.support-faq summary::-webkit-details-marker{ display:none; }
.support-faq details[open]{ border-color:#e7ebf0; }

/* Footer CTA */
.support-cta{
  margin-top: 24px; text-align:center;
  padding: 18px 16px; border-radius:16px;
  background: #0a0a0a; color:#fff;
}
.support-cta .btn-strong{
  display:inline-block; margin-top:.4rem;
  padding:.7rem 1rem; border-radius:12px;
  background:#fff; color:#111; text-decoration:none; font-weight:800;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.support-cta .micro-proof{ margin:.4rem 0 0; opacity:.85; }

/* Reusable light button */
.btn-lite{
  display:inline-block; text-decoration:none;
  font-weight:700; color:var(--ink);
  background:#f2f6ff; border-radius:999px;
  padding:.55rem .85rem;
  box-shadow:0 2px 10px rgba(10,31,68,.10);
  transition:background .12s ease, transform .06s ease;
}
.btn-lite:hover{ background:#e8f0ff; transform:translateY(-1px); }

/* =========================================================
   PATCH — Meet Us header + Mission layout polish
   (place at end of styles.css so it overrides earlier rules)
   ========================================================= */

/* --- Meet Us: force the tagline under the title on ALL viewports --- */
.meet-hero{
  display:block !important;          /* override earlier grid */
  margin-bottom: 8px;
}
.meet-hero h1{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: .2px;
  text-wrap: balance;
}
.meet-tagline{
  margin: 0 0 16px;
  color:#2a2f3a;
  opacity:.9;
  max-width: 60ch;                   /* comfortable width under the title */
  line-height: 1.5;
}

/* --- Mission page: widen the left column on desktop, keep roomy gaps --- */
@media (min-width: 980px){
  .mission-wrap{
    display:grid;
    grid-template-columns: minmax(340px, 460px) 1fr; /* was ~260–320px */
    gap: 32px;
    align-items:start;
  }
  .mission-intro{
    max-width: 60ch;                 /* nicer reading measure */
  }
  .mission-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;  /* keep 2-up cards */
    gap: 18px;
  }
  .mission-quote{ grid-column: 1 / -1; }
}

/* --- Small screens: ensure single-column stacking everywhere --- */
@media (max-width: 900px){
  .meet-grid{ grid-template-columns: 1fr !important; } /* cards stack */
}
@media (max-width: 768px){
  .mission-wrap{ display:block !important; }           /* stack hero + cards */
  .mission-grid{
    display:flex; flex-direction:column; gap:16px;
  }
  .mission-quote{ order:4; }
}

/* =========================================================
   8A) Meet Us + Mission layout fixes (safe overrides)
   Paste at END of styles.css
   ========================================================= */

/* ---------- Meet Us: header spacing & container ---------- */
.meet{
  padding-top: 88px;                   /* clears fixed header */
}
.meet .container{
  max-width: 1180px;                   /* a touch wider than default */
}

/* Keep the desktop two-column header from section 7 (grid). 
   Only adjust spacing here so we don’t fight earlier rules. */
.meet-hero{ 
  margin-bottom: 10px; 
}
.meet-hero h1{
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: .2px;
  text-wrap: balance;
}
.meet-tagline{
  margin: 2px 0 18px;
  color:#2a2f3a; 
  opacity:.9;
  line-height: 1.55;
  max-width: 62ch;                     /* comfy on desktop */
}

/* Cards: relaxed gutters on large screens; equal height by flex+aspect-ratio */
.meet-grid{
  gap: 20px;                            /* room to breathe */
  align-items: stretch;
}

/* The card itself is already flex in your card block; just ensure CTA sits last */
.meet-card-body{
  display: flex;
  flex-direction: column;
}
.meet-card-body .meet-cta{              /* CTA anchors to bottom when text is long */
  margin-top: auto;
}

/* Phone: stack header + cards with generous spacing */
@media (max-width: 900px){
  .meet-grid{ 
    grid-template-columns: 1fr; 
    gap: 16px; 
  }
  .meet-tagline{ max-width: 38ch; }
  .meet{ padding-top: 78px; }
}

/* Tiny phones */
@media (max-width: 360px){
  .meet-hero h1{ font-size: 24px; }
  .meet-tagline{ font-size: 1rem; }
}

/* ---------- Mission page: give the intro column real width on desktop ---------- */
@media (min-width: 980px){
  .mission-wrap{
    display: grid;                      /* safe if not already grid */
    grid-template-columns: minmax(380px, 540px) 1fr;  /* wider left column */
    gap: 32px;
    align-items: start;
  }
  .mission-intro{ max-width: 62ch; }    /* readable paragraph width */
  .mission-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 18px;
  }
  .mission-quote{ grid-column: 1 / -1; }
}

/* Mobile: stack everything in reading order with comfy spacing */
@media (max-width: 768px){
  .mission-wrap{ display: block; }
  .mission-intro{ margin: 0 0 14px; }
  .mission-grid{ display: flex; flex-direction: column; gap: 16px; }
  .mission-quote{ margin-top: 8px; }
}
/* ---------- Founder page: keep hero and values comfy ---------- */
@media (min-width: 980px){
  .founder-hero{
    display:grid !important;
    grid-template-columns: minmax(360px, 460px) 1fr !important;
    gap: clamp(18px, 3vw, 36px) !important;
    align-items:start;
  }
  .values{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 768px){
  .founder-hero{ display:block !important; }
  .values{ display:flex !important; flex-direction:column; gap:16px !important; }
}

/* ---------- Support page minor breathing tweaks ---------- */
.support .container{ max-width: 1180px; }
@media (min-width: 1100px){
  .support-grid{ gap: 20px; }
  .policy-grid{ gap: 20px; }
}
@media (max-width: 900px){
  .support-grid, .policy-grid{ grid-template-columns: 1fr !important; }
}

/* ---------- Button color hardening (iOS link blue fix) ---------- */
.product-ctas .buy-now,
.product-ctas a.buy-now,
.product-ctas .add-kit,
.product-ctas .add-to-kit,
.product-ctas .add-to-cart{
  background: var(--ink) !important;
  color:#fff !important;
}
.product-ctas .buy-now:active,
.product-ctas a.buy-now:active,
.product-ctas .add-kit:active,
.product-ctas .add-to-kit:active,
.product-ctas .add-to-cart:active{
  background: var(--ink-2) !important;
}
@supports (-webkit-touch-callout: none){
  .product-ctas a.buy-now,
  .product-ctas a.add-to-cart{ color:#fff !important; }
}

/* =========================================================
   9) Gear Feed (filters + polish)
   ========================================================= */

/* Container spacing matches catalog rhythm */
.feed { padding: 96px 0 56px; }
.feed .container { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }

/* Filter chips row */
.feed-controls { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin: 6px 0 14px; }
.chip{
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--ink);
  padding:.5rem .85rem; border-radius:999px; font:700 0.98rem/1 'Montserrat',system-ui,sans-serif;
  box-shadow:0 2px 10px rgba(10,31,68,.06);
  cursor:pointer; transition:background .12s ease, transform .06s ease, border-color .12s ease;
}
.chip:hover{ background:#f8faff; transform:translateY(-1px); }
.chip[aria-pressed="true"]{ background:#f2f6ff; border-color:#dfe8ff; }
.feed-sort select{ font-weight:700; }

/* Reuse your existing grid/card styles; nothing else required */
@media (max-width: 900px){
  .feed { padding-top: 84px; }
}

/* Neutral product link (used in Gear Feed cards) */
.product-link{display:block;color:inherit;text-decoration:none}
.product-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(39,67,120,.22);
  border-radius:6px;
}