:root {
  /* Ocean blue primary */
  --ocean-deep: #062441;
  --ocean: #0A4F7A;
  --ocean-mid: #0E7490;
  --ocean-light: #38BDF8;
  --ocean-pale: #DBF1FB;

  /* Accents */
  --orange: #F97316;
  --orange-soft: #FB923C;
  --gold: #D4A24C;
  --gold-bright: #F2C94C;

  /* Neutrals */
  --white: #FFFFFF;
  --paper: #F8FAFC;
  --paper-warm: #FFFBF2;
  --ink: #0F172A;
  --ink-soft: #334155;
  --slate: #64748B;
  --hairline: #E2E8F0;
  --cloud: #CBD5E1;       /* form input border, visible on white */
  --cloud-soft: #E2E8F0;

  /* Type */
  --display: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --container: 1240px;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(6, 36, 65, 0.06);
  --shadow: 0 8px 24px rgba(6, 36, 65, 0.08);
  --shadow-lg: 0 20px 60px rgba(6, 36, 65, 0.18);
}

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Form inputs: visible grey border on every page, even where inline styles miss */
input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
input[type="url"], input[type="password"], input[type="search"], input[type="date"],
input[type="file"], textarea, select {
  border: 1px solid var(--cloud);
  border-radius: 6px;
  padding: 0.7rem;
  font-size: 1rem;
  font-family: var(--body);
  background: white;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(10, 79, 122, 0.15);
}
input::placeholder, textarea::placeholder { color: #94A3B8; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--ocean-mid); text-decoration: none; }
a:hover { color: var(--orange); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-weight: 600; }

/* Centered layout container.
   The !important defenses are belt-and-suspenders - earlier versions of the
   site had inline-style overrides on a handful of templated pages that broke
   centering on wide screens. Every container, on every page, must center. */
.container {
  max-width: var(--container);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

/* Prevent rogue full-bleed elements (e.g. a stray width:100vw) from forcing
   a horizontal scrollbar that visually pulls the entire layout left. */
html, body { overflow-x: clip; }

/* Cultivar / species pages use inline-styled grids inside .container. Make
   sure those grids never escape the container width or push past the right
   edge - a recurring complaint on wide displays. */
.container > div[style*="grid-template-columns"],
.container > section,
.container > article {
  max-width: 100%;
  box-sizing: border-box;
}

/* Defensive collapse for the 2-column "content + sticky aside" layout used
   across cultivar and species pages. Below 960px the aside drops under the
   main content instead of squishing into an unreadable sliver. */
@media (max-width: 960px) {
  .container > div[style*="grid-template-columns:1.5fr"],
  .container > div[style*="grid-template-columns: 1.5fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
  }
}

/* Mobile: force every inline-styled grid down to one column + remove the
   right-side white gap that shows up on cultivar/species/originator pages
   where the inline grid styles don't have explicit mobile overrides. The
   selector matches any inline grid-template-columns declaration. */
@media (max-width: 760px) {
  .container > div[style*="grid-template-columns"],
  .container > section > div[style*="grid-template-columns"],
  section > div[style*="grid-template-columns"],
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Belt-and-suspenders: ensure no element pushes the page wider than the
     viewport (forces mobile content to fill side-to-side, no right gap). */
  body, .container, section, main, article, aside { max-width: 100% !important; }
  .container { padding-left: 0.9rem; padding-right: 0.9rem; }
  /* Sticky asides become normal flow on mobile so they don't pin to the side. */
  aside[style*="position:sticky"], aside[style*="position: sticky"] { position: static !important; }
}

/* ============ Mobile hamburger + slide-out nav ============
   The .nav-burger button is HIDDEN on desktop and tablet. It only shows
   under 700px (true phone widths). Clicking it adds .open to .nav, which
   slides a vertical column in from the right. Click outside or click the
   burger again to close.

   Header layout (4 flex children):
     brand | nav | wsp-host (state selector) | nav-burger
   - On desktop: nav has margin-left:auto so it floats right; wsp-host
     and nav-burger sit at the far right; nav-burger is hidden.
   - On mobile (<=700px): nav becomes a fixed slide-out panel; wsp-host
     and nav-burger remain visible in the top bar so users can pick
     state and open the menu without seeing the slide-out first. */
.nav-burger {
  display: none !important;
  background: transparent;
  border: 0;
  color: var(--ocean-deep);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 6px;
}
.nav-burger:hover { background: rgba(6, 36, 65, 0.06); }
.site-header .nav { margin-left: auto; }
.site-header .wsp-host { flex-shrink: 0; }
@media (max-width: 700px) {
  .nav-burger { display: inline-flex !important; order: 99; }
  .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
  .site-header .wsp-host { margin-left: auto; }
  /* Hide the desktop nav by default; restore it as a column slide-out when .open */
  .nav {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 88vw);
    background: white;
    box-shadow: -16px 0 36px rgba(6, 36, 65, 0.18);
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 5rem 1rem 1.4rem !important;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 95;
    overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav a, .nav .btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.9rem !important;
    font-size: 1rem !important;
    border-radius: 8px;
    margin-bottom: 0.2rem;
    box-sizing: border-box;
  }
  .nav a:hover { background: #F1F5F9; }
  .nav .btn { margin-top: 0.6rem; text-align: center; }
  /* Subtle dim behind the nav when open */
  .nav::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(6, 36, 65, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: -1;
  }
  .nav.open::before { opacity: 1; pointer-events: auto; }
}

/* ============ Hero text contrast guarantee ============
   .banner uses a dark navy gradient. Some templates inherit light-on-dark
   correctly, others land with default dark ink because of cascade order.
   Force-white inside any banner / hero / inline-styled dark-background
   element so headlines + paragraphs are always readable. */
section.banner h1,
section.banner h2,
section.banner h3,
section.banner p,
section.banner span:not(.eyebrow):not(.btn),
section.banner li,
section.banner div:not(.btn):not(.eyebrow):not([class*="badge"]):not([class*="pill"]) {
  color: rgba(255, 255, 255, 0.94) !important;
}
section.banner .eyebrow,
section.banner [style*="color: var(--gold-bright)"],
section.banner [style*="color:var(--gold-bright)"] {
  color: var(--gold-bright) !important;
}
section.banner a:not(.btn) {
  color: var(--gold-bright) !important;
}
/* Hero (`<section class="hero">`) uses dark navy too - same treatment but
   leave .accent + brand-colored spans alone. */
section.hero h1,
section.hero h2,
section.hero p {
  color: #FFFFFF !important;
}

/* .pg-hero is the hero variant used on /pond/, /returns/, /rewards/,
   /ideal-parameters/, /wysiwyg/. Same dark navy gradient backdrop -
   apply identical white-text guarantee so headlines aren't invisible. */
.pg-hero,
.pg-hero h1,
.pg-hero h2,
.pg-hero h3,
.pg-hero h4,
.pg-hero p,
.pg-hero li,
.pg-hero span:not(.accent):not(.eyebrow):not(.btn),
.pg-hero div:not(.btn):not(.eyebrow) {
  color: #FFFFFF !important;
}
.pg-hero .accent { color: var(--gold-bright) !important; }
.pg-hero .eyebrow { color: var(--gold-bright) !important; }
.pg-hero p {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Catch-all dark-bg hero pattern: any section whose inline style sets a
   dark-navy background gradient. Forces headings white so we never have
   to chase per-page contrast bugs again. */
section[style*="rgba(6,36,65"] h1,
section[style*="rgba(6, 36, 65"] h1,
section[style*="#04162B"] h1,
section[style*="#062441"] h1,
section[style*="rgba(6,36,65"] h2,
section[style*="rgba(6, 36, 65"] h2,
section[style*="#04162B"] h2,
section[style*="#062441"] h2,
section[style*="rgba(6,36,65"] p,
section[style*="rgba(6, 36, 65"] p,
section[style*="#04162B"] p,
section[style*="#062441"] p {
  color: #FFFFFF !important;
}
section[style*="rgba(6,36,65"] p,
section[style*="rgba(6, 36, 65"] p {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Catch-all hero / banner classes. We have many custom hero variants
   across the site (.lg-hero, .av-hero, .br-hero, .pg-hero, .pond-hero,
   .ff-hero, etc.) - all use the same dark navy gradient and all need
   white text. The body-prefix bumps specificity so any page-level inline
   <style> block can't accidentally win. */
body [class$="-hero"] h1,
body [class*="-hero "] h1,
body [class$="-banner"] h1,
body [class*="-banner "] h1,
body [class$="-hero"] h2,
body [class*="-hero "] h2,
body [class$="-banner"] h2,
body [class*="-banner "] h2,
body [class$="-hero"] h3,
body [class*="-hero "] h3,
body [class$="-banner"] h3,
body [class*="-banner "] h3,
body [class$="-hero"] h4,
body [class*="-hero "] h4 {
  color: #FFFFFF !important;
}
body [class$="-hero"] p,
body [class*="-hero "] p,
body [class$="-banner"] p,
body [class*="-banner "] p,
body [class$="-hero"] li,
body [class*="-hero "] li {
  color: rgba(255, 255, 255, 0.88) !important;
}
body [class$="-hero"] strong,
body [class*="-hero "] strong,
body [class$="-banner"] strong,
body [class*="-banner "] strong {
  color: #FFFFFF !important;
}
body [class$="-hero"] .eyebrow,
body [class*="-hero "] .eyebrow,
body [class$="-banner"] .eyebrow,
body [class*="-banner "] .eyebrow,
body [class$="-hero"] .accent,
body [class*="-hero "] .accent {
  color: var(--gold-bright) !important;
}
/* Some hero variants render text inside small badges / chips - those
   should keep their own background, not have white forced through. */
body [class$="-hero"] .btn,
body [class*="-hero "] .btn,
body [class$="-banner"] .btn,
body [class*="-banner "] .btn,
body [class$="-hero"] .pill,
body [class*="-hero "] .pill,
body [class$="-hero"] .badge,
body [class*="-hero "] .badge {
  color: inherit !important;
}

/* ============ Homepage mobile: search above CTAs ============
   The hero panel on the homepage is a 2-column desktop layout. On mobile
   the search input should appear BEFORE the Shop livestock / See live
   drops CTAs (more discoverable / matches user intent). Use flex order. */
@media (max-width: 760px) {
  .hero .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .hero .hero-copy { order: 1; }
  /* Push the search panel above the CTAs visually. */
  .hero .hero-find,
  .hero .hero-search {
    order: 2;
    margin-top: -0.4rem;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
  }
  .hero .cta-row { order: 3; }
}

/* ============ Listing detail: single column on mobile ============
   The default 1.2fr/1fr grid leaves the photo + buy panel both squished
   on phones. Force single column under 760px so the photo gets full
   width, then the title / price / Add to cart stack below it. */
@media (max-width: 760px) {
  #hero-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
  /* Listing detail title/price scale down a notch on phones */
  #title { font-size: 1.5rem !important; }
  #price { font-size: 1.9rem !important; margin: 0.6rem 0 !important; }
  /* Add-to-cart stays full-width which is already the case, but ensure
     the buyer-protection callout doesn't overflow the viewport */
  .container > div[style*="background:var(--paper)"],
  .container > section > div[style*="background:var(--paper)"] { max-width: 100%; }
}

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding: 0.15rem 0;
}
.brand:hover, .brand:focus, .brand:visited { text-decoration: none; color: inherit; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(184, 71, 63, 0.18));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-mark svg { display: block; width: 100%; height: auto; }
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.06);
  filter: drop-shadow(0 4px 10px rgba(247, 164, 46, 0.45));
}

.brand-word {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18rem;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bw-fast {
  color: var(--ocean-deep);
  font-weight: 800;
  font-style: italic;
  /* The "Fast" gets a subtle gold underscore accent on hover */
  position: relative;
}
.bw-fast::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--gold-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 2px;
}
.brand:hover .bw-fast::after { transform: scaleX(1); }
.bw-aq {
  color: var(--ocean-deep);
  font-weight: 700;
  font-style: normal;
}

@media (max-width: 680px) {
  .brand-mark { width: 38px; height: 38px; }
  .brand-word { font-size: 1.15rem; }
}
@media (max-width: 420px) {
  .brand-word { font-size: 1.05rem; }
}

/* Footer brand - same mark, recolored wordmark for dark background */
.brand-footer { gap: 0.65rem; }
.brand-footer .brand-mark { width: 48px; height: 48px; }
.brand-footer .brand-word {
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}
.brand-footer .bw-fast,
.brand-footer .bw-aq {
  color: #FFFFFF;
}
.brand-footer .bw-fast::after {
  background: linear-gradient(90deg, var(--orange), var(--gold-bright));
}
/* Global header search.
   Sits between the brand and the nav on every page. Submit -> /search/?q=...
   The form is the canonical interactive element so plain HTTP fallback works
   if JavaScript is disabled. */
.header-search {
  position: relative;
  flex: 1 1 280px;
  max-width: 420px;
  display: flex;
  align-items: center;
  margin: 0 1rem;
  background: #F1F5F9;
  border-radius: 999px;
  padding: 0.25rem 0.25rem 0.25rem 2.4rem;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.header-search:focus-within {
  background: white;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(10, 79, 122, 0.15);
}
.header-search .header-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate);
  pointer-events: none;
}
.header-search input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0.45rem 0.4rem;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--ink);
  min-width: 0;
}
.header-search input[type="search"]::placeholder {
  color: var(--slate);
}
.header-search button[type="submit"] {
  background: var(--orange);
  color: white;
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.header-search button[type="submit"]:hover {
  background: #E8951F;
}
@media (max-width: 900px) {
  .header-search { display: none; }   /* Mobile uses the homepage hero search + /search/ instead */
}

.nav { display: flex; gap: 1.6rem; align-items: center; }
.nav a { color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; }
.nav a:hover { color: var(--ocean); }
.nav .btn {
  margin-left: 0;
  padding: 0.45rem 0.95rem;
  font-size: 0.88rem;
  border-radius: 8px;
  white-space: nowrap;       /* keep "Sign In" / "Sell on Fast Aquatics" on one line */
  letter-spacing: 0.01em;
  box-shadow: none;          /* drop heavy shadow in nav context */
}
.nav .btn:hover { box-shadow: 0 4px 12px rgba(6, 36, 65, 0.12); }
.nav .btn svg { width: 14px; height: 14px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.32);
}
.btn-primary:hover {
  background: #EA580C;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.4);
}
.btn-ocean {
  background: var(--ocean);
  color: var(--white);
}
.btn-ocean:hover { background: var(--ocean-deep); color: var(--white); }
.btn-ghost {
  background: transparent;
  color: var(--ocean);
  border: 1.5px solid var(--ocean);
}
.btn-ghost:hover { background: var(--ocean); color: var(--white); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--ocean-deep);
}
.btn-gold:hover { color: var(--ocean-deep); transform: translateY(-1px); }
.btn-green {
  background: #16A34A;
  color: var(--white);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.30);
}
.btn-green:hover {
  background: #15803D;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.40);
}

/* ============ Hero ============ */
.hero {
  position: relative;
  padding: 4.5rem 0 4rem;
  color: var(--white);
  overflow: hidden;
  min-height: 380px;
  background-color: var(--ocean-deep);
  background-image:
    linear-gradient(180deg, rgba(6, 36, 65, 0.78) 0%, rgba(6, 36, 65, 0.55) 40%, rgba(6, 36, 65, 0.85) 100%),
    url('https://images.pexels.com/photos/37218222/pexels-photo-37218222.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 15% 25%, rgba(56, 189, 248, 0.18), transparent 70%),
    radial-gradient(700px 400px at 85% 75%, rgba(247, 164, 46, 0.14), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; }
.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: var(--gold-bright);
  margin-bottom: 1rem;
}
.hero h1 { color: var(--white); margin-bottom: 1.1rem; }
.hero h1 .accent { color: var(--orange-soft); }
.hero p {
  font-size: 1.2rem;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 2rem;
}

/* ============================================================
   UNIVERSAL HERO TEXT VISIBILITY FIX
   Catches every page-prefixed hero variant (.ff-hero, .au-hero,
   .av-hero, .br-hero, .ca-hero, .cd-hero, .cf-hero, .cmp-hero,
   .cs-hero, .doa-hero, .eq-hero, .ex-hero, .fp-hero, .gl-hero,
   etc.) and forces readable light text on dark hero backgrounds.
   ============================================================ */
[class*="-hero"],
[class*="-hero"] h1,
[class*="-hero"] h2,
[class*="-hero"] h3,
[class*="-hero"] h4 {
  color: var(--white);
}
[class*="-hero"] h1 .accent,
[class*="-hero"] h2 .accent {
  color: var(--gold-bright, #F7A42E);
}
[class*="-hero"] p,
[class*="-hero"] li,
[class*="-hero"] .lead,
[class*="-hero"] .desc {
  color: rgba(255, 255, 255, 0.86);
}
[class*="-hero"] .eyebrow,
[class*="-hero"] .pill {
  color: var(--gold-bright, #F7A42E);
}
[class*="-hero"] a:not(.btn) {
  color: var(--gold-bright, #F7A42E);
}
[class*="-hero"] a:not(.btn):hover {
  color: #fff;
  text-decoration: underline;
}
[class*="-hero"] strong { color: #fff; }
[class*="-hero"] small,
[class*="-hero"] .meta { color: rgba(255, 255, 255, 0.72); }

/* Search-style hero variants (lighter background) keep dark text */
.hero-search h1, .hero-search h2, .hero-search h3,
[class*="-hero-search"] h1, [class*="-hero-search"] h2, [class*="-hero-search"] h3 {
  color: var(--ink, #0F172A);
}
.hero-search p, [class*="-hero-search"] p {
  color: var(--ink-soft, #334155);
}

/* Mobile responsive tightening for hero text */
@media (max-width: 640px) {
  [class*="-hero"] h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.12; }
  [class*="-hero"] p { font-size: 0.96rem; line-height: 1.55; }
  [class*="-hero"] .pill { font-size: 0.66rem; padding: 0.18rem 0.55rem; }
  [class*="-hero"] .eyebrow { font-size: 0.66rem; letter-spacing: 0.14em; }
}
.hero .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-stats .stat .num {
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--gold-bright);
  line-height: 1;
}
.hero-stats .stat .label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.4rem;
}

/* ============ Sections ============ */
.section { padding: 3rem 0; }
.section-tight { padding: 1.8rem 0 2rem; }
.section-header { text-align: center; max-width: 700px; margin: 0 auto 1.6rem; }
.section-header .eyebrow { color: var(--orange); }
.section-header p {
  font-size: 1.1rem;
  color: var(--slate);
  margin-top: 0.8rem;
}
/* Inline header row variant: title left, "see all" link right. Tighter. */
.section-header-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  max-width: none;
  margin: 0 0 1.4rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(6,36,65,0.08);
}
.section-header-row h2 {
  margin: 0.15rem 0 0;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
}
.section-header-row .eyebrow { font-size: 0.74rem; letter-spacing: 0.16em; }
.section-header-link {
  color: var(--orange);
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  text-decoration: none;
}
.section-header-link:hover { text-decoration: underline; }

/* Live-now product feed (home + browse) */
.livegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.85rem;
}
.livegrid-loading,
.livegrid-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 1.6rem 1rem;
  color: var(--slate);
  font-size: 0.92rem;
  background: rgba(255,255,255,0.5);
  border: 1px dashed rgba(6,36,65,0.15);
  border-radius: 8px;
}
.livegrid-empty a { color: var(--orange); font-weight: 600; }
.livegrid-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(6,36,65,0.06);
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.livegrid-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(6,36,65,0.10);
  border-color: rgba(6,36,65,0.14);
}
.livegrid-photo {
  aspect-ratio: 1.15;
  background: #E6EEF5 center/cover no-repeat;
  position: relative;
}
.livegrid-trust {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(6,36,65,0.85);
  color: #F2C94C;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.42rem;
  border-radius: 10px;
  letter-spacing: 0.04em;
}
.livegrid-body {
  padding: 0.6rem 0.7rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  flex: 1;
}
.livegrid-title {
  font-family: var(--display);
  color: var(--ocean-deep);
  font-size: 0.88rem;
  line-height: 1.25;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.livegrid-meta {
  font-size: 0.72rem;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.livegrid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.35rem;
}
.livegrid-price {
  font-family: var(--display);
  color: var(--orange);
  font-weight: 700;
  font-size: 1rem;
}
.livegrid-stock {
  font-size: 0.7rem;
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-weight: 600;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.dot-live { background: #16A34A; box-shadow: 0 0 0 2px rgba(22,163,74,0.18); }
.dot-out  { background: #B8473F; }

/* Q&A tile grid - editorial, no left-border accent */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.qa-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 12px;
  text-decoration: none;
  color: white;
  overflow: hidden;
  background-color: var(--ocean-deep);
  background-image: linear-gradient(180deg, rgba(6,36,65,0.18) 0%, rgba(6,36,65,0.62) 55%, rgba(6,36,65,0.94) 100%), var(--bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 8px rgba(6, 36, 65, 0.08);
  isolation: isolate;
}
.qa-tile::before {
  content: 'Q.';
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  color: white;
  letter-spacing: 0.04em;
  background: var(--orange);
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(184, 71, 63, 0.35);
}
.qa-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,36,65,0) 0%, rgba(6,36,65,0.35) 70%, rgba(6,36,65,0) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 0;
  pointer-events: none;
}
.qa-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(6, 36, 65, 0.22);
}
.qa-tile:hover::after { opacity: 1; }
.qa-q {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  color: white;
  line-height: 1.25;
  padding-right: 2.5rem;
  margin-bottom: 0.45rem;
  letter-spacing: -0.005em;
}
.qa-a {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .qa-tile { min-height: 180px; padding: 1rem 1.1rem 1.1rem; }
  .qa-q { font-size: 1rem; padding-right: 2.2rem; }
  .qa-a { font-size: 0.82rem; }
}

/* ============================================================
   CARE / HUB IMAGE CARDS
   Reusable photo-background card for any directory hub. Pass the
   image URL via --bg inline, e.g. style="--bg:url('/assets/...')".
   The dark gradient overlay keeps the white title + description
   readable on any photo. Hover lifts and brightens.
   ============================================================ */
.care-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.care-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 12px;
  text-decoration: none;
  /* Default text is white. Build-time luminance analysis sets --card-fg
     to a dark color on cards whose image is unusually bright. */
  color: var(--card-fg, #FFFFFF);
  overflow: hidden;
  background-color: var(--ocean-deep);
  /* Aggressive bottom-half scrim. The bright/saturated reef photos we
     use blow past softer gradients - text in the bottom 50% must remain
     readable on ANY image, so the gradient ramps to near-opaque navy
     under the text band. Top 35% of image stays mostly clear so the
     subject reads. Overlay vars let per-card adjust-text-luminance pass
     darken it further when the underlying image is unusually bright. */
  background-image:
    linear-gradient(180deg,
      rgba(6, 36, 65, 0) 0%,
      rgba(6, 36, 65, 0) 30%,
      rgba(6, 36, 65, 0.55) 48%,
      var(--card-overlay, rgba(6, 36, 65, 0.92)) 65%,
      var(--card-overlay-bottom, rgba(6, 36, 65, 0.99)) 100%),
    var(--bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 8px rgba(6, 36, 65, 0.08);
  isolation: isolate;
}

/* White-card variant: any care-card without an inline --bg image renders
   as a clean white tile with dark text. Used on category pages where
   real photos haven't been wired yet (foods, equipment, supplies, etc.).
   The "Photo coming" placeholder appears at the top of the card.
   When real images are dropped in /assets/photos/<page>/ later, the
   build:partials wiring pass will set --bg and the card returns to the
   image-background design automatically. */
.care-card:not([style*="--bg"]) {
  background-image: none !important;
  background-color: #FFFFFF;
  color: var(--ocean-deep);
  border: 1px solid #E5E7EB;
  padding: 1.1rem 1.2rem 1.1rem;
  min-height: 0;
}
.care-card:not([style*="--bg"]) strong {
  color: var(--ocean-deep) !important;
  text-shadow: none !important;
}
.care-card:not([style*="--bg"]) span:not(.cc-cat) {
  color: var(--slate) !important;
  text-shadow: none !important;
}
.care-card:not([style*="--bg"]) .cc-cat {
  display: inline-block !important;
  background: #FFF7ED;
  color: var(--orange) !important;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 0.45rem;
  width: auto !important;
  height: auto !important;
}
.care-card:not([style*="--bg"]):hover {
  border-color: var(--orange);
  background-color: #FFFFFF;
}
.care-card:not([style*="--bg"])::after { display: none }

.care-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,36,65,0) 0%, rgba(6,36,65,0.35) 70%, rgba(6,36,65,0) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 0;
  pointer-events: none;
}
.care-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(6, 36, 65, 0.22);
}
.care-card:hover::after { opacity: 1; }
/* Floating organism cutout. The .cc-cat slot expects a transparent-PNG
   image of the species (sourced and dropped into /assets/photos/cutouts/).
   No circle, no border, no orange box - the fish/coral/invert just floats
   in the corner of the card with a soft drop shadow.
   When --icon is set we render that PNG; when it's not, we hide the slot
   entirely so we never show a broken orange placeholder. */
/* Hide the cc-cat slot site-wide. Until real species cutout PNGs are
   sourced and uploaded, the cards render as clean photo-background tiles
   with no icon overlay. The slot can be re-enabled later by removing
   this rule and putting the cutout pipeline back in place. */
.care-card .cc-cat {
  display: none !important;
}
.care-card strong {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--card-fg, #FFFFFF);
  line-height: 1.25;
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
  /* Layered text shadow: the dark halo guarantees contrast on any image,
     including the brightest reef photos that defeat softer gradients. */
  text-shadow: var(--card-text-shadow,
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.75),
    0 0 14px rgba(6, 36, 65, 0.55)
  );
}
.care-card span:not(.cc-cat) {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  color: var(--card-fg-soft, rgba(255, 255, 255, 0.96));
  line-height: 1.45;
  text-shadow: var(--card-text-shadow,
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 2px 5px rgba(0, 0, 0, 0.7)
  );
}

@media (max-width: 600px) {
  .care-card { min-height: 180px; padding: 1rem 1.1rem 1.1rem; }
  .care-card strong { font-size: 1rem; }
  .care-card span:not(.cc-cat) { font-size: 0.82rem; }
}

/* Learn-this-hobby grid - tight editorial cards with big number prefix */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0;
}
.learn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 12px;
  text-decoration: none;
  color: white;
  overflow: hidden;
  background-color: var(--ocean-deep);
  background-image: linear-gradient(180deg, rgba(6,36,65,0.15) 0%, rgba(6,36,65,0.55) 55%, rgba(6,36,65,0.92) 100%), var(--bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 8px rgba(6, 36, 65, 0.08);
  isolation: isolate;
}
.learn-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,36,65,0) 0%, rgba(6,36,65,0.35) 70%, rgba(6,36,65,0) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 0;
}
.learn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(6, 36, 65, 0.22);
}
.learn-card:hover::before { opacity: 1; }
.learn-card-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  background: var(--orange);
  color: white;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(184, 71, 63, 0.35);
}
.learn-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.learn-card-body strong {
  font-family: var(--display);
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.learn-card-body span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .learn-card { min-height: 180px; padding: 1rem 1.1rem 1.1rem; }
  .learn-card-body strong { font-size: 1.02rem; }
  .learn-card-body span { font-size: 0.82rem; }
  .learn-card-badge { font-size: 0.95rem; padding: 0.28rem 0.6rem; top: 0.7rem; right: 0.7rem; }
}

.section-alt { background: var(--white); }
.section-ocean { background: var(--ocean-deep); color: var(--white); }
.section-ocean h2 { color: var(--white); }
.section-ocean .section-header p { color: rgba(255, 255, 255, 0.75); }

/* ============ Cards ============ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}
.card {
  background: var(--white);
  border-radius: 8px;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid var(--hairline);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--ocean-light);
}
.card .icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--ocean) 0%, var(--ocean-light) 100%);
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
  font-family: var(--display);
}
.card.accent .icon {
  background: linear-gradient(135deg, var(--orange) 0%, var(--gold) 100%);
}
.card h3 { margin: 0 0 0.3rem; font-size: 0.98rem; line-height: 1.25; letter-spacing: -0.005em; }
.card p { color: var(--slate); font-size: 0.85rem; line-height: 1.45; margin: 0; }

/* ============ Categories grid ============ */
.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}
.cat-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: linear-gradient(180deg, var(--ocean-mid), var(--ocean-deep));
  color: var(--white);
  display: flex;
  align-items: flex-end;
  padding: 0.95rem 1rem;
  cursor: pointer;
  transition: transform 0.18s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
a.cat-tile { color: var(--white); }
a.cat-tile:hover, a.cat-tile:focus, a.cat-tile:visited { color: var(--white); text-decoration: none; }
.cat-tile:hover { transform: translateY(-3px); color: var(--white); }
.cat-tile.coral { background: linear-gradient(180deg, #1E40AF, var(--ocean-deep)); }
.cat-tile.fw { background: linear-gradient(180deg, #0E7490, var(--ocean)); }
.cat-tile.invert { background: linear-gradient(180deg, #C2410C, #7C2D12); }
.cat-tile.plants { background: linear-gradient(180deg, #15803D, #052e16); }
.cat-tile.shrimp { background: linear-gradient(180deg, var(--gold), #92400E); }
.cat-tile.drygoods { background: linear-gradient(180deg, #475569, #1E293B); }
.cat-tile.food { background: linear-gradient(180deg, #DC2626, #7F1D1D); }
.cat-tile.cultivars { background: linear-gradient(180deg, #7C3AED, #2E1065); }
.cat-tile.live-sales { background: linear-gradient(180deg, #F7A42E, #B8473F); }
.cat-tile.aquascape { background: linear-gradient(180deg, #6B5A45, #2A1A0E); }
.cat-tile.wholesale { background: linear-gradient(180deg, #0F766E, #022C22); }
.cat-tile .count .live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16C66B;
  box-shadow: 0 0 0 0 rgba(22, 198, 107, 0.5);
  animation: dw-pulse 1.6s ease-out infinite;
  vertical-align: middle;
  margin-right: 0.35rem;
}
.cat-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
  border-radius: var(--radius);
}
.cat-tile > div { position: relative; z-index: 1; }
.cat-tile h3 {
  color: var(--white);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  margin: 0 0 0.2rem;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.cat-tile .count {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.4rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.cat-tile::after {
  content: '\2192';
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: background 0.2s ease;
}
.cat-tile:hover::after { background: var(--orange); }

/* ============ Vendor tiers ============ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.tier {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  border: 1.5px solid var(--hairline);
  display: flex;
  flex-direction: column;
}
.tier.featured {
  border-color: var(--orange);
  box-shadow: 0 12px 36px rgba(249, 115, 22, 0.18);
  position: relative;
}
.tier.featured::before {
  content: 'Most popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
}
.tier .name {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--ocean);
}
.tier.featured .name { color: var(--orange); }
.tier .price {
  font-family: var(--display);
  font-size: 3rem;
  color: var(--ink);
  margin: 0.6rem 0 0.2rem;
}
.tier .price .unit { font-size: 1rem; color: var(--slate); font-family: var(--body); font-weight: 500; }
.tier ul { list-style: none; margin: 1.4rem 0; flex: 1; }
.tier li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.tier li::before {
  content: '\2713';
  color: var(--ocean-mid);
  font-weight: 700;
  flex-shrink: 0;
}
.tier.featured li::before { color: var(--orange); }
.tier .btn { width: 100%; }

/* ============ Header nav icons ============ */
.nav .nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ocean);
  display: inline-grid;
  place-items: center;
  font-size: 1rem;
  text-decoration: none;
}
.nav .nav-icon:hover { background: var(--orange); color: var(--white); }

/* Icon + label nav links (Sign in, Cart) */
.nav .nav-link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav .nav-link-with-icon:hover {
  background: var(--paper);
  color: var(--ocean);
}
.nav .nav-link-with-icon svg { flex-shrink: 0; }

/* Cart count badge - red pill that appears on the cart icon when the
   user has items in the cart. Hidden by default (header script flips
   the [hidden] attr based on /cart-sync count). */
.nav .nav-cart { position: relative; }
.nav .nav-cart-badge {
  position: absolute;
  top: 0;
  right: 0.1rem;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #DC2626;
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px white;
}
.nav .nav-cart-badge[hidden] { display: none; }

/* ============ Footer (markcmo.com pattern) ============ */
/* ============================================================
   FOOTER (compact, mobile-first)
   - Single CTA strip (no big two-block boxes)
   - 4 columns max, 5-7 links each
   - Smaller body text (0.82rem) + tighter line-height
   - One bottom row: brand + social + copyright
   ============================================================ */
.site-footer {
  background: var(--ocean-deep);
  color: rgba(255, 255, 255, 0.7);
  padding: 2.6rem 0 1.4rem;
  position: relative;
  font-size: 0.82rem;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ocean-light), var(--gold-bright), var(--orange));
}

/* Single-line CTA strip at top */
.footer-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 0.95rem 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}
.footer-cta-strip > div {
  flex: 1 1 240px;
  min-width: 0;
}
.footer-cta-strip strong {
  display: block;
  color: white;
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
  font-weight: 700;
}
.footer-cta-strip span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}
.footer-form {
  display: flex;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 240px;
}
.footer-form input[type=email] {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-family: inherit;
  font-size: 0.85rem;
}
.footer-form input[type=email]::placeholder { color: rgba(255,255,255,0.45); }
.footer-form .btn {
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* 4-column directory */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1.2rem;
  margin-bottom: 1.8rem;
}
.footer-col h4 {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-bright);
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
  display: block;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { padding: 0.18rem 0; }
.footer-col a {
  color: rgba(255,255,255,0.7);
  font-size: 0.82rem;
  transition: color 0.15s ease;
  text-decoration: none;
  line-height: 1.4;
}
.footer-col a:hover { color: var(--gold-bright); }

/* Bottom row: brand + social + copyright on one tight line */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.brand-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
}
.brand-footer .brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.brand-footer .brand-mark svg { width: 100%; height: auto; }
.brand-footer .bw-fast { color: rgba(255,255,255,0.95); }
.brand-footer .bw-aq { color: var(--gold-bright); margin-left: 0.1em; }
.social-row {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.social-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s, color 0.15s;
  border: 1px solid rgba(255,255,255,0.12);
}
.social-icon:hover {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  transform: translateY(-1px);
}
.site-footer .copyright {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 0;
  margin: 0;
  border: 0;
}
.site-footer .copyright a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}
.site-footer .copyright a:hover { color: var(--gold-bright); }
.site-footer .copyright .cr-sep {
  color: rgba(255,255,255,0.25);
}

/* MOBILE - sub-700px */
@media (max-width: 700px) {
  .site-footer { padding: 1.6rem 0 1rem; font-size: 0.8rem; }
  .footer-cta-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 1.2rem;
  }
  .footer-cta-strip strong { font-size: 0.85rem; margin: 0; }
  .footer-cta-strip span { font-size: 0.74rem; line-height: 1.35; }
  .footer-form { width: 100%; min-width: 0; gap: 0.35rem; }
  .footer-form input[type=email] { padding: 0.5rem 0.7rem; font-size: 0.82rem; }
  .footer-form .btn { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0.9rem;
    margin-bottom: 1rem;
  }
  .footer-col h4 { margin-bottom: 0.35rem; font-size: 0.66rem; }
  .footer-col li { padding: 0.14rem 0; }
  .footer-col a { font-size: 0.8rem; }
  .footer-bottom {
    justify-content: center;
    text-align: center;
    gap: 0.6rem 1rem;
    padding-top: 0.85rem;
  }
  .site-footer .copyright {
    width: 100%;
    justify-content: center;
    font-size: 0.7rem;
  }
  .brand-footer { font-size: 0.92rem; }
}

/* TINY - sub-420px (small phones): keep 2 columns but tighter */
@media (max-width: 420px) {
  .footer-cta-strip span { display: none; }
  .footer-cta-strip { padding: 0.55rem 0.7rem; }
  .footer-cols { gap: 0.85rem 0.6rem; }
  .footer-col a { font-size: 0.78rem; }
  .footer-form { flex-direction: row; }
}

/* Legacy footer-grid (still used by some pages until rebuilt) */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 1100px) {
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
  .footer-cta { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem !important; margin-bottom: 2rem !important; }
  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 1.4rem !important;
    padding: 1.5rem 0 !important;
    margin-bottom: 1.5rem !important;
    text-align: left;
  }
  .footer-brand-line { display: flex; flex-direction: column; align-items: flex-start; }
  .footer-brand-line .brand { margin-bottom: 0.5rem; }
  .footer-brand-line p { font-size: 0.88rem; line-height: 1.55; max-width: 100%; margin: 0; }
  .footer-social { text-align: left; }
  .footer-social .footer-eyebrow { display: block; margin-bottom: 0.4rem; }
  .social-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem !important;
    margin-top: 0 !important;
  }
  .social-icon { width: 40px !important; height: 40px !important; font-size: 0.78rem !important; }
  .footer-form { flex-wrap: wrap; gap: 0.5rem; }
  .footer-form input[type=email] { width: 100%; }
  .footer-form .btn { width: 100%; }
  .footer-cta-grid { gap: 1rem !important; }
  .footer-cta-block { padding: 1.3rem !important; }
  .footer-vendor-actions { flex-direction: column; gap: 0.5rem; }
  .footer-vendor-actions .btn,
  .footer-vendor-actions .footer-vendor-link { width: 100%; text-align: center; justify-content: center; }
  /* Copyright row stacks vertically on mobile so the legal links don't
     wrap awkwardly under the (c) line. */
  .site-footer .copyright {
    flex-direction: column;
    gap: 0.5rem !important;
    align-items: flex-start;
    font-size: 0.78rem !important;
    text-align: left;
    padding-top: 1rem !important;
  }
}

@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr !important; gap: 1.4rem 0 !important; }
  .footer-col h4 { margin-bottom: 0.6rem !important; padding-bottom: 0.4rem !important; }
  .footer-col li { padding: 0.28rem 0 !important; }
}
.site-footer h4 {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-family: var(--body);
  font-weight: 700;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; }
.site-footer li { padding: 0.35rem 0; }
.site-footer a { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer .brand { color: var(--white); margin-bottom: 1rem; }
.site-footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav { gap: 1rem; }
  .nav a:not(.btn) { display: none; }
}

/* ============ Page banner ============ */
.banner {
  background: linear-gradient(180deg, var(--ocean-deep), var(--ocean));
  color: var(--white);
  padding: 4rem 0 3rem;
}
.banner h1 { color: var(--white); }
.banner p { color: rgba(255, 255, 255, 0.8); margin-top: 0.6rem; max-width: 600px; }

/* Banner responsive scaling - keep typography readable on small phones */
@media (max-width: 640px) {
  .banner { padding: 2.4rem 0 1.8rem; }
  .banner h1 { font-size: 1.55rem; line-height: 1.15; }
  .banner h2 { font-size: 1.25rem; }
  .banner p { font-size: 0.95rem; line-height: 1.55; }
}

/* Page-content default padding clamp so any inline `padding: 4rem` blocks
   don't leave only a tiny content column on phones. */
@media (max-width: 640px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .section { padding: 1.6rem 0; }
}

/* Touch target minimums for buttons + form inputs on mobile */
@media (max-width: 640px) {
  .btn, button.btn, a.btn { min-height: 44px; padding: 0.7rem 1.1rem; font-size: 0.95rem; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea {
    min-height: 44px;
    font-size: 16px; /* iOS won't auto-zoom on focus when font-size >= 16px */
  }
}

/* ============ Prose (long-form pages) ============ */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; color: var(--ocean-deep); }
.prose h3 { margin-top: 1.8rem; margin-bottom: 0.6rem; color: var(--ocean); }
.prose p { margin-bottom: 1rem; color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0.6rem 0 1.2rem 1.4rem; }
.prose li { margin-bottom: 0.4rem; color: var(--ink-soft); }
.prose .callout {
  background: var(--paper-warm);
  border-left: 4px solid var(--gold);
  padding: 1.2rem 1.4rem;
  border-radius: 6px;
  margin: 1.5rem 0;
}
.prose .callout strong { color: var(--ocean-deep); }

/* ============================================================
   MOTION: scroll reveal, hover lift, cultivar marquee, hero overlay
   Aquarium buyers respond to motion + color. Used sparingly + perf-cheap.
   Honors prefers-reduced-motion.
   ============================================================ */

/* Sticky-header tweak so the 3D logo + nav read as one premium row */
.site-header { box-shadow: 0 1px 0 rgba(6,36,65,0.04); }

/* ============================================================
   FLOATING CARDS - replaces the thick left-border accent stripe
   that older templates used as a category marker. Cards now lift
   on scroll-in and on hover, drawing the eye without the stripe.
   Defense-in-depth: any element still carrying a 2-6px left/top
   coloured border is auto-converted to a floating card here.
   ============================================================ */
[style*="border-left: 2px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-left: 3px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-left: 4px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-left: 5px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-left: 6px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-top: 2px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-top: 3px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-top: 4px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-top: 5px solid"]:not(.callout):not(blockquote):not(td):not(th),
[style*="border-top: 6px solid"]:not(.callout):not(blockquote):not(td):not(th) {
  border-left-width: 0 !important;
  border-top-width: 0 !important;
  box-shadow: 0 10px 28px rgba(6,36,65,0.10), 0 2px 6px rgba(6,36,65,0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
[style*="border-left: 2px solid"]:not(.callout):not(blockquote):not(td):not(th):hover,
[style*="border-left: 3px solid"]:not(.callout):not(blockquote):not(td):not(th):hover,
[style*="border-left: 4px solid"]:not(.callout):not(blockquote):not(td):not(th):hover,
[style*="border-top: 3px solid"]:not(.callout):not(blockquote):not(td):not(th):hover,
[style*="border-top: 4px solid"]:not(.callout):not(blockquote):not(td):not(th):hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(6,36,65,0.14), 0 4px 8px rgba(6,36,65,0.08) !important;
}

/* Hero polish: layered gradient + floating ::before glow + 3D canvas behind */
.hero {
  background:
    radial-gradient(ellipse 60% 80% at 70% 20%, rgba(247,164,46,0.22), transparent 60%),
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(31,150,201,0.30), transparent 65%),
    linear-gradient(135deg, #04162B 0%, #062441 50%, #0b3a66 100%);
  isolation: isolate;
}
.hero h1 {
  text-shadow: 0 4px 24px rgba(0,0,0,0.45);
  letter-spacing: -0.02em;
}
.hero h1 .accent {
  background: linear-gradient(90deg, #F7A42E, #FFD175, #18C7C7);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: hero-shimmer 8s linear infinite;
}
@keyframes hero-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.hero p { text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.hero3d-canvas + .container,
.hero > .container { position: relative; z-index: 2; }

/* Scroll reveal: opt-in via [data-reveal]. JS toggles .is-revealed when in view. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"].is-revealed { transition-delay: 80ms; }
[data-reveal-delay="2"].is-revealed { transition-delay: 160ms; }
[data-reveal-delay="3"].is-revealed { transition-delay: 240ms; }

/* Category tile - more pop on hover, gentle gradient pulse */
.cat-tile {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(247,164,46,0), rgba(247,164,46,0.18));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  border-radius: inherit;
}
.cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(6,36,65,0.18);
}
.cat-tile:hover::after { opacity: 1; }

/* Cultivar marquee - scrolling ticker of named hobby cultivars on home */
.cultivar-ticker {
  background: linear-gradient(90deg, #04162B 0%, #062441 50%, #04162B 100%);
  color: #FFD175;
  border-top: 1px solid rgba(247,164,46,0.25);
  border-bottom: 1px solid rgba(247,164,46,0.25);
  overflow: hidden;
  position: relative;
  padding: 0.55rem 0;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cultivar-ticker::before,
.cultivar-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; width: 80px;
  z-index: 2;
  pointer-events: none;
}
.cultivar-ticker::before { left: 0;  background: linear-gradient(to right, #04162B, transparent); }
.cultivar-ticker::after  { right: 0; background: linear-gradient(to left,  #04162B, transparent); }
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker-scroll 60s linear infinite;
  gap: 2.6rem;
  padding-left: 2.6rem;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #FFD175;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
.ticker-item:hover {
  color: #ffffff;
  transform: translateY(-1px);
}
.ticker-item:hover::before {
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(247,164,46,0.6);
}
.ticker-item::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-block;
}
.ticker-item .vendor {
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-left: 0.3rem;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cultivar-ticker:hover .ticker-track { animation-play-state: paused; }

/* Live products grid: photo zoom + price flash on hover */
.livegrid-card .livegrid-photo {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  background-size: cover;
}
.livegrid-card:hover .livegrid-photo { transform: scale(1.05); }
.livegrid-card { will-change: transform; }

/* Footer 3D logo bigger + glow */
.site-footer .brand .mark { width: 36px; height: 36px; box-shadow: 0 2px 12px rgba(247,164,46,0.25); }

/* ============================================================
   DAILY PHOTO WINNER - floating bottom-right widget
   Pinned. Dismissible. Persists across navigation. Out of scroll flow.
   ============================================================ */
.daily-winner {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  width: 320px;
  max-width: calc(100vw - 1.4rem);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  font-family: var(--body);
}
.daily-winner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.daily-winner[hidden] { display: none; }
.dw-close {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #062441;
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  padding: 0;
  font-family: inherit;
}
.dw-close:hover { background: #b8473f; }
.dw-link {
  display: grid;
  grid-template-columns: 96px 1fr;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(6, 36, 65, 0.08);
  box-shadow: 0 14px 32px rgba(6, 36, 65, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dw-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(6, 36, 65, 0.22);
}
.dw-photo {
  position: relative;
  background: linear-gradient(135deg, #062441, #0b3a66);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.dw-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.dw-link:hover .dw-photo img { transform: scale(1.06); }
.dw-body {
  padding: 0.6rem 0.8rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  justify-content: center;
}
.dw-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
}
.dw-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: dw-pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes dw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.dw-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.25;
  color: var(--ocean-deep);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dw-by {
  font-size: 0.7rem;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .daily-winner { width: 280px; right: 0.6rem; bottom: 0.6rem; }
  .dw-link { grid-template-columns: 80px 1fr; }
  .dw-title { font-size: 0.78rem; }
}

/* Photo gallery 3D frame */
.pg3-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, #04162B, #062441);
  box-shadow: 0 12px 40px rgba(6, 36, 65, 0.18), inset 0 0 0 1px rgba(247, 164, 46, 0.12);
}
.pg3-host {
  position: absolute;
  inset: 0;
}
.pg3-pip:hover { background: rgba(255, 255, 255, 0.55) !important; }
@media (max-width: 720px) {
  .pg3-frame { aspect-ratio: 4 / 3; }
}

/* ============================================================
   FORM INPUT GLOBAL STYLE
   Unifies every text input + select + textarea sitewide. Per-page styles
   can still override via specificity, but this is the floor so a stray
   <input name=foo> never reverts to browser default look.
   ============================================================ */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]),
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--ocean-deep, #062441);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange, #F7A42E);
  box-shadow: 0 0 0 3px rgba(247, 164, 46, 0.18);
}
input::placeholder, textarea::placeholder {
  color: rgba(6, 36, 65, 0.42);
}
/* Override Chrome/Safari autofill yellow/blue background that breaks every form. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: var(--ocean-deep, #062441) !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--ocean-deep, #062441);
}
/* Disabled state */
input:disabled, select:disabled, textarea:disabled {
  background: #F4F8FB;
  color: rgba(6, 36, 65, 0.5);
  cursor: not-allowed;
}
/* Native select arrow (since we removed appearance) */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23062441' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2rem;
}
/* File inputs - keep native but flush left */
input[type=file] {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ocean-deep);
}
/* Number inputs - drop spinners for cleaner look */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   RESPONSIVE SAFETY NET
   Catches inline grid styles + tight tables across the 2,800-page
   site. Don't rely on per-page media queries; this runs everywhere.
   ============================================================ */

/* Sub-960px: collapse the 8-col footer to 4-col */
@media (max-width: 960px) {
  .footer-cols { grid-template-columns: repeat(4, 1fr) !important; }
  .nav { gap: 0.95rem; }
  .nav a { font-size: 0.88rem; }
}

/* Sub-820px: tighten hero, collapse 2-col patches, drop less-critical
   nav items so 7 links + cart + login don't crowd the header. */
@media (max-width: 820px) {
  .hero { padding: 4rem 0 3rem; }
  .hero h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .hero p { font-size: 1rem; }
  .section { padding: 3.5rem 0; }
  .section-tight { padding: 2rem 0 2.4rem; }
  .section-header h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  /* Inline two-col grids written into individual pages */
  .container > div[style*="grid-template-columns:1.5fr 1fr"],
  .container > div[style*="grid-template-columns: 1.5fr 1fr"],
  .container > div[style*="grid-template-columns:1fr 1fr"],
  .container > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  /* Hide secondary nav links between hamburger threshold (700px) and
     820px so the 7 livestock categories don't wrap into 2 lines on a
     narrow laptop. The hamburger doesn't show here, so we keep core
     livestock links + cart + login visible. */
  .nav a[href="/care/"],
  .nav a[href="/foods/"],
  .nav a[href="/equipment/"] {
    display: none;
  }
}

/* Sub-680px: hide non-critical nav + collapse footer to 2-col */
@media (max-width: 680px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr) !important; }
  .nav { gap: 0.7rem; flex-wrap: wrap; }
  .nav a:not([class*="btn"]):not(.nav-link-with-icon) {
    font-size: 0.82rem;
    padding: 0.2rem 0.4rem;
  }
  .nav .btn { padding: 0.36rem 0.7rem; font-size: 0.82rem; }
  .nav .nav-link-with-icon span { display: none; }
  /* Hide ship-to label on mobile but keep the dot + caret */
  .wsp-btn .label.long { display: none; }
  /* Site header padding tightens */
  .site-header .container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

/* Sub-560px: hide secondary nav links entirely; only show brand + cart + login */
@media (max-width: 560px) {
  .nav a[href="/saltwater/"],
  .nav a[href="/freshwater/"],
  .nav a[href="/coral/"],
  .nav a[href="/live-sales/"],
  .nav a[href="/care/"] {
    display: none;
  }
  .footer-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 1.2rem 1rem !important; }
  .footer-col h4 { font-size: 0.78rem; }
  .container { padding-left: 0.85rem; padding-right: 0.85rem; }
  /* Buttons in CTA rows wrap and full-width on tiny screens */
  .cta-row .btn,
  .footer-vendor-actions .btn { width: 100%; min-width: 0; justify-content: center; }
}

/* Touch-target safety: any button/link must hit 44x44 minimum on mobile */
@media (hover: none) and (pointer: coarse) {
  .nav a, .btn, button, .footer-col a, .ticker-item {
    min-height: 36px;
  }
  .ticker-item { padding: 0.2rem 0; }
}

/* Hide long text in cart icon on tiny screens */
@media (max-width: 420px) {
  .nav-link-with-icon { padding: 0.32rem 0.55rem; }
}

/* Image safety: never overflow container */
img { max-width: 100%; height: auto; }
table { display: block; overflow-x: auto; }

/* ============================================================
   GLOBAL TYPOGRAPHY & RHYTHM
   Applies on every page so dense walls of body text breathe and
   bullet markers stop hugging the viewport edge on mobile.
   ============================================================ */

/* Comfortable reading line-height + paragraph rhythm everywhere */
.container p,
main p,
article p,
section p {
  line-height: 1.7;
  margin: 0 0 1rem 0;
}

/* Cap measure on long-form copy so paragraphs don't run wall-to-wall
   on wide screens. Articles + species pages benefit most. */
article p,
article ul,
article ol,
article h2,
article h3,
article h4,
.long-form p,
.long-form ul,
.long-form ol {
  max-width: 72ch;
}

/* Heading rhythm: more space ABOVE than below so sections feel like sections */
.container h1, .container h2, .container h3, .container h4,
main h1, main h2, main h3, main h4,
article h1, article h2, article h3, article h4 {
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}
.container h1, main h1, article h1 { margin-top: 0; }

/* Strong emphasis inside body copy - subtle weight, not jarring */
.container p strong,
.container li strong,
article p strong,
article li strong { font-weight: 650; color: var(--ocean-deep); }

/* ============================================================
   LIST PADDING - the big mobile fix
   Native UA padding-inline-start is 40px on desktop, but on mobile
   that often leaves bullets visually pinned to the screen edge once
   the container itself is at a tight padding. Force consistent
   inset that scales with the container.
   ============================================================ */

/* These rules apply to BODY content lists only. Footer + nav lists
   reset padding/list-style themselves and are excluded by the :not()
   filters below so we don't accidentally indent footer link columns. */
.container ul:not(.footer-col ul):not(.social-row):not(.nav ul):not([class*="footer-"]),
.container ol:not(.footer-col ol):not([class*="footer-"]),
main ul,
main ol,
article ul,
article ol,
section:not(.site-footer) ul,
section:not(.site-footer) ol {
  padding-left: 1.5rem;
  margin: 0 0 1.1rem 0;
}

.container ul li,
.container ol li,
main ul li,
main ol li,
article ul li,
article ol li {
  margin-bottom: 0.45rem;
  line-height: 1.65;
}

/* Nested lists tighten up */
.container li ul,
.container li ol,
article li ul,
article li ol {
  margin: 0.4rem 0 0.4rem 0;
  padding-left: 1.25rem;
}

/* Bare lists (used for nav-style chip rows) opt out */
.container ul.bare,
.container ul.chips,
.container ul[role="list"][style*="list-style"] {
  padding-left: 0;
  list-style: none;
}

/* Footer / nav / social-row reset - never indent these */
.site-footer ul,
.site-footer ol,
.footer-col ul,
.footer-col ol,
.nav ul,
.social-row,
.footer-bottom ul {
  padding-left: 0 !important;
  list-style: none !important;
  margin-bottom: 0;
}
.site-footer li,
.footer-col li {
  margin-bottom: 0;
}

/* External brand links - signal to the user that the link goes off-site
   without being noisy. Tiny outward arrow on hover only. */
a.brand-out {
  color: var(--ocean);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(10, 79, 122, 0.35);
  text-underline-offset: 2px;
}
a.brand-out:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}
a.brand-out::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.18em;
  font-size: 0.78em;
  opacity: 0.5;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
a.brand-out:hover::after {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Mobile: keep markers visible AND tucked away from the screen edge.
   Container is 0.85-0.9rem from edge at <=560px, so list inset of
   1.25rem keeps marker about 8px from the inside-edge of container. */
@media (max-width: 760px) {
  .container ul:not(.footer-col ul):not([class*="footer-"]),
  .container ol:not(.footer-col ol):not([class*="footer-"]),
  main ul,
  main ol,
  article ul,
  article ol,
  section:not(.site-footer) ul,
  section:not(.site-footer) ol {
    padding-left: 1.35rem;
  }
  .container p,
  main p,
  article p,
  section p {
    font-size: 0.97rem;
    line-height: 1.65;
    margin-bottom: 0.9rem;
  }
  .container h2, main h2, article h2 {
    font-size: clamp(1.25rem, 5vw, 1.55rem);
    margin-top: 1.6rem;
  }
  .container h3, main h3, article h3 {
    font-size: clamp(1.1rem, 4.5vw, 1.3rem);
    margin-top: 1.3rem;
  }
  .container h4, main h4, article h4 {
    font-size: 1rem;
    margin-top: 1.1rem;
  }
}

/* Even tighter screens: small bump down on margins, but never
   collapse the list inset - keeping markers off the edge wins. */
@media (max-width: 420px) {
  .container ul,
  .container ol,
  article ul,
  article ol {
    padding-left: 1.25rem;
  }
}

/* Definition lists / spec rows ("Specific gravity: 1.025-1.026") often
   render as <p> with inline <strong>. Give them a hanging indent so
   the values line up after the labels feel readable, not cramped. */
.spec-list,
.spec-list p {
  margin-bottom: 0.55rem;
  line-height: 1.55;
}

/* Block quotes / callouts get a touch of left padding + accent rail */
.container blockquote,
article blockquote {
  border-left: 3px solid var(--accent-warm, #F7A42E);
  padding: 0.4rem 0 0.4rem 1rem;
  margin: 1.1rem 0;
  color: rgba(6, 36, 65, 0.78);
  font-style: italic;
}

/* Section spacing on mobile so consecutive blocks of copy don't
   collide visually */
@media (max-width: 760px) {
  section.section,
  section[class*="section"] {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }
  /* Cards inside grids breathe a bit more */
  .container > div[style*="grid"] > * {
    margin-bottom: 0.4rem;
  }
}

/* ============================================================
   LEGACY INLINE-STYLE OVERRIDES
   The species generator + many earlier guides emit inline
   line-height: 2 on <ul> and 1.75 on the wrapper div. That worked
   on desktop with a 1.5fr/1fr two-column layout but on mobile it
   becomes a wall. Force a relaxed line-height + padding so they
   read like documents, not bricks. !important is required to beat
   the inline style="" from those legacy templates.
   ============================================================ */

@media (max-width: 760px) {
  /* Inline-styled wrapper divs in species/care/article pages */
  .container div[style*="line-height:1.75"],
  .container div[style*="line-height: 1.75"] {
    line-height: 1.65 !important;
    font-size: 0.97rem !important;
  }

  /* <ul style="line-height:2"> in species parameter blocks +
     in-page TOC sidebars */
  .container ul[style*="line-height:2"],
  .container ul[style*="line-height: 2"],
  aside ul[style*="line-height:2"] {
    line-height: 1.65 !important;
    padding-left: 1.35rem !important;
  }
  .container ul[style*="line-height:2"] li,
  .container ul[style*="line-height: 2"] li {
    margin-bottom: 0.4rem;
  }

  /* Heading rhythm inside the species long-form column */
  .container div[style*="line-height:1.75"] h2,
  .container div[style*="line-height: 1.75"] h2 {
    margin-top: 1.7rem !important;
    margin-bottom: 0.5rem !important;
    font-size: clamp(1.2rem, 4.8vw, 1.45rem);
    line-height: 1.3;
  }
  .container div[style*="line-height:1.75"] h3,
  .container div[style*="line-height: 1.75"] h3 {
    margin-top: 1.3rem !important;
    margin-bottom: 0.4rem !important;
    font-size: 1.1rem;
  }
  .container div[style*="line-height:1.75"] p,
  .container div[style*="line-height: 1.75"] p {
    margin: 0 0 0.95rem 0;
  }

  /* Sticky aside (right column on long-form species pages) becomes
     a full-width block so the param-table doesn't get crushed */
  aside[style*="position:sticky"],
  aside[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
    margin-top: 1.2rem;
  }
  aside[style*="position:sticky"] table {
    width: 100%;
  }

  /* Buy-strip header row stacks on tiny screens so the CTA doesn't
     cramp the headline */
  .species-buy-strip > div[style*="justify-content:space-between"],
  .species-buy-strip > div[style*="justify-content: space-between"] {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .species-buy-strip .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Param-table inside aside (every species/care page) - readable
   stripes at any width */
.container aside table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.container aside table td,
.container aside table th {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #E6EBF0;
  text-align: left;
  vertical-align: top;
}
.container aside table tr:last-child td { border-bottom: 0; }

/* Care/article pages frequently emit
   <p>Label: <strong>value</strong></p> patterns that need rhythm */
.container p:has(> strong:first-child) {
  margin-bottom: 0.55rem;
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .ticker-track { animation: none; }
  .hero h1 .accent { animation: none; }
  .cat-tile, .cat-tile:hover { transform: none; }
}