/* =====================================================
   Boat Name Merch — Design System
   ===================================================== */

:root {
  --bg: #0a1f3d;
  --bg-2: #102b52;
  --surface: #ffffff;
  --surface-2: #f4f8fc;
  --surface-3: #eaf1f8;
  --ink: #0a1f3d;
  --ink-2: #3a4f6e;
  --muted: #6b7d97;
  --line: #dee6f0;
  --accent: #ff5b3a;
  --accent-2: #ffb347;
  --teal: #19c4b8;
  --sea: #2e7fb8;
  --gold: #f4c75c;
  --green: #16a34a;
  --red: #dc2626;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(10,31,61,.06), 0 2px 8px rgba(10,31,61,.04);
  --shadow-md: 0 6px 24px rgba(10,31,61,.10), 0 2px 6px rgba(10,31,61,.04);
  --shadow-lg: 0 30px 60px rgba(10,31,61,.22);
  --max: 1240px;
  --pad: clamp(20px, 4vw, 40px);
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-script: "Caveat", "Brush Script MT", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; letter-spacing: 0; }
p { margin: 0 0 1em; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 var(--pad); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
/* `.eyebrow::before` used to render a 22px × 1px coral underline-style
   strip to the left of every eyebrow label ("___ BOAT NAME MERCH").
   Removed 2026-06-03 — the user flagged it as visually noisy on mobile
   where it reads as three dashes/underscores stuck to the text. The
   eyebrow text stands on its own without the decoration. */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-accent { background: rgba(255,91,58,.12); color: var(--accent); }
.badge-teal { background: rgba(25,196,184,.14); color: #0d8a82; }
.badge-gold { background: rgba(244,199,92,.18); color: #946800; }
.badge-green { background: rgba(22,163,74,.12); color: #166a36; }

/* =====================================================
   Buttons
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s, color .2s, box-shadow .2s, border-color .2s;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(255,91,58,.35); }
.btn-primary:hover { background: #ff4524; box-shadow: 0 12px 28px rgba(255,91,58,.45); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #142d56; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #f0f3f8; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #11a39a; }
.btn-lg { padding: 18px 28px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 10px; aspect-ratio: 1; }

/* =====================================================
   Top promo bar
   ===================================================== */
.promo-bar {
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px var(--pad);
  letter-spacing: 0.02em;
}
.promo-bar strong { color: var(--accent-2); font-weight: 700; }
.promo-bar a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
@media (max-width: 600px) {
  /* On mobile, only the primary "free shipping" pitch fits comfortably */
  .promo-bar { font-size: 12px; padding: 7px 12px; }
  .promo-bar .promo-hide-mobile { display: none; }
}

/* =====================================================
   Navigation
   ===================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Brand wordmark uses Fraunces — a distinctive serif that pairs with
     the script accent (Caveat) and reads as crafted/maritime rather than
     generic sans-serif tech. Optical size handled by the variable axis. */
  font-family: 'Fraunces', 'Space Grotesk', serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink);
  flex-shrink: 0;
}
.brand-mark {
  width: 38px;
  height: 38px;
  /* Soft cream pill backdrop so the navy pirate monkey reads cleanly
     against the white/colored nav surfaces. The pop-on-light-bg approach
     keeps the monkey character recognizable at 38px without losing
     facial detail to a gradient. */
  background: #fef3e8;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(10,31,61,.10);
  flex-shrink: 0;
  overflow: hidden;
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.05);   /* tiny inset crop so the monkey doesn't hug the edge */
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a, .nav-links .nav-menu-trigger {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .15s, background .15s;
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-links a:hover, .nav-links .nav-menu-trigger:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.active { color: var(--accent); }

/* Mega menu */
.nav-mega {
  position: relative;
}
.nav-mega-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 24px;
  width: 560px;
  z-index: 60;
  /* Hidden by default; shown on hover/focus. Opacity/visibility (not display:none)
     so we can fade and add a tiny close-delay — keeps the panel from snapping
     shut the instant the cursor flicks past an edge. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .18s;
}
/* Invisible bridge that closes the gap between the trigger and the panel so
   moving the cursor down doesn't pass through a dead zone that drops :hover. */
.nav-mega-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav-mega:hover .nav-mega-panel,
.nav-mega:focus-within .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear 0s;
}
.nav-mega-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  color: var(--ink);
}
.nav-mega-item:hover { background: var(--surface-2); }
.nav-mega-item .ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,91,58,.14), rgba(255,179,71,.18));
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.nav-mega-item strong { display: block; font-size: 14px; margin-bottom: 2px; }
.nav-mega-item span { font-size: 12.5px; color: var(--muted); }

.nav-cta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.cart-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.cart-btn:hover { border-color: var(--ink); }
.cart-btn svg { width: 18px; height: 18px; }
.cart-count {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.cart-count:empty, .cart-count[data-count="0"] { display: none; }

/* ---------- Floating cart FAB (bottom-right, all devices) ----------
   Sticks to bottom-right of viewport regardless of scroll, page height,
   or device. Uses env(safe-area-inset-*) so it lifts above the iPhone
   home indicator and Android nav bar. The badge sits as an absolutely-
   positioned chip on the top-right corner of the circle so the count
   is visible at a glance without crowding the icon. */
.cart-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink, #0a1f3d);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 900;
  border: 1px solid rgba(15, 23, 42, .06);
  transition: transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cart-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .22), 0 3px 8px rgba(15, 23, 42, .10);
}
.cart-fab:active { transform: translateY(0); }
.cart-fab svg { width: 24px; height: 24px; display: block; }

/* Green badge in the corner, like the reference screenshot. Min-width grows
   with multi-digit counts (10+, 99+). Hides itself when count is 0 via
   the shared .cart-count:empty rule above. */
.cart-fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #22c55e;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .15);
}

/* On very small phones, shrink a touch so it doesn't dominate the viewport
   and leaves room for content the customer is reading. */
@media (max-width: 480px) {
  .cart-fab { width: 54px; height: 54px; }
  .cart-fab svg { width: 22px; height: 22px; }
}

/* ---------- Slide-out cart drawer (2026-06-07) ----------
   Right-side panel on desktop, bottom sheet on small phones.
   Replaces the dedicated checkout.html form flow. */
.cart-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 31, 61, .55);
  z-index: 1100;
  animation: cart-fade-in .2s ease;
}
@keyframes cart-fade-in { from { opacity: 0 } to { opacity: 1 } }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: #fff;
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -16px 0 48px rgba(15, 23, 42, .22);
  font-family: 'Inter', sans-serif;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.cart-drawer-header h2 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #0a1f3d);
  margin: 0;
}
.cart-drawer-close {
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
}
.cart-drawer-close:hover { color: var(--ink, #0a1f3d); background: #f1f5f9; }

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 24px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Empty state */
.cart-drawer-empty {
  text-align: center;
  padding: 32px 12px;
  color: var(--ink-2, #475569);
}
.cart-drawer-empty svg {
  width: 56px; height: 56px;
  color: #cbd5e1;
  margin: 0 auto 14px;
}
.cart-drawer-empty h3 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 18px;
  color: var(--ink, #0a1f3d);
  margin: 0 0 8px;
}
.cart-drawer-empty p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 20px;
}

/* Item rows */
.cart-drawer-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}
.cart-drawer-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}
.cart-drawer-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-drawer-item img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.cart-drawer-item-meta { min-width: 0; }
.cart-drawer-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0a1f3d);
  line-height: 1.3;
  margin-bottom: 3px;
}
.cart-drawer-item-variant {
  font-size: 12px;
  color: var(--ink-2, #475569);
  line-height: 1.4;
  margin-bottom: 6px;
}
.cart-drawer-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0a1f3d);
  white-space: nowrap;
  align-self: start;
}

/* Qty + remove controls */
.cart-drawer-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.cart-drawer-qty button {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  width: 24px; height: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0a1f3d);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.cart-drawer-qty button:hover { border-color: var(--ink, #0a1f3d); }
.cart-drawer-qty span {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  color: var(--ink, #0a1f3d);
}
.cart-drawer-remove {
  background: transparent !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 12px !important;
  color: var(--muted, #6b7d97) !important;
  cursor: pointer !important;
  padding: 0 0 0 8px !important;
  text-decoration: underline;
  font-weight: 400 !important;
}
.cart-drawer-remove:hover { color: var(--red, #b91c1c) !important; }

/* Free-shipping nudge */
.cart-drawer-freeship {
  background: #fffaf2;
  border: 1px solid #fde6cf;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-2, #475569);
  margin-bottom: 16px;
  text-align: center;
}
.cart-drawer-freeship strong { color: var(--accent, #ff5b3a); }
.cart-drawer-freeship-met {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* Upsells — "You might also like" — uses real boat-name mockups */
.cart-drawer-upsells {
  border-top: 1px dashed #e2e8f0;
  padding-top: 16px;
  margin-bottom: 6px;
}
.cart-drawer-upsells-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0a1f3d);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 4px;
}
.cart-drawer-upsells-sub {
  font-size: 12.5px;
  color: var(--muted, #6b7d97);
  margin: 0 0 12px;
}
.cart-drawer-upsell-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.cart-drawer-upsell-row:last-child { border-bottom: 0; }
.cart-drawer-upsell-row img {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.cart-drawer-upsell-meta { min-width: 0; }
.cart-drawer-upsell-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #0a1f3d);
  line-height: 1.25;
}
.cart-drawer-upsell-price {
  font-size: 12.5px;
  color: var(--muted, #6b7d97);
  margin-top: 2px;
}
.cart-drawer-upsell-add {
  background: var(--accent, #ff5b3a);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.cart-drawer-upsell-add:hover { background: #e64a2d; transform: translateY(-1px); }
.cart-drawer-upsell-add:active { transform: translateY(0); }

/* Totals */
.cart-drawer-totals {
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
  margin-bottom: 18px;
}
.cart-drawer-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-2, #475569);
  margin-bottom: 8px;
}
.cart-drawer-total-row small {
  font-size: 11px;
  color: var(--muted, #6b7d97);
  font-weight: 400;
}
.cart-drawer-total-final {
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
  margin-top: 6px;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink, #0a1f3d) !important;
}
.cart-drawer-total-final span { font-weight: 700; color: var(--ink, #0a1f3d); }

/* Main CTA */
.cart-drawer-cta {
  width: 100%;
  background: var(--accent, #ff5b3a);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 91, 58, .28);
  transition: background .15s, transform .12s;
}
.cart-drawer-cta:hover { background: #e64a2d; transform: translateY(-1px); }
.cart-drawer-cta:active { transform: translateY(0); }
.cart-drawer-cta:disabled {
  opacity: .65; cursor: progress; transform: none;
}
.cart-drawer-cta-outline {
  width: 100%;
  background: #fff;
  color: var(--ink-2, #475569);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 10px;
}
.cart-drawer-cta-outline:hover { border-color: var(--ink, #0a1f3d); color: var(--ink, #0a1f3d); }

.cart-drawer-fineprint {
  font-size: 11.5px;
  color: var(--muted, #6b7d97);
  line-height: 1.5;
  margin: 10px 0 0;
  text-align: center;
}

.cart-drawer-error {
  margin-top: 14px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 13px;
  color: #b91c1c;
}

/* Mobile bottom-sheet variant */
@media (max-width: 560px) {
  .cart-drawer {
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -16px 48px rgba(15, 23, 42, .22);
  }
  .cart-drawer.open { transform: translateY(0); }
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  margin: 4px 0;
}

@media (max-width: 1050px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .nav-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    gap: 2px;
    max-height: 70vh;
    overflow-y: auto;
  }
  .nav-open .nav-links a, .nav-open .nav-links .nav-menu-trigger { width: 100%; padding: 14px; justify-content: space-between; }
  /* Mobile: panel stacks in the flyout and toggles on focus. Reset the
     desktop opacity/visibility/transform bridge so it shows cleanly inline. */
  .nav-mega-panel {
    display: none;
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: 0;
    padding: 8px 0 8px 24px;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .nav-mega-panel::before { display: none; }
  .nav-mega:hover .nav-mega-panel,
  .nav-mega:focus-within .nav-mega-panel {
    display: grid;
    transform: none;
  }
}
@media (max-width: 600px) {
  .nav-cta .btn-ghost, .nav-cta .btn-primary { display: none; }
}

/* =====================================================
   Hero
   ===================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eaf1f8 0%, #fff 100%);
  padding: clamp(50px, 7vw, 90px) 0 clamp(50px, 7vw, 80px);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero h1 .hl {
  background: linear-gradient(110deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: var(--ink-2);
  max-width: 540px;
  margin-bottom: 30px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 30px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.trust-item { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); }
.trust-item svg { width: 18px; height: 18px; color: var(--teal); }

.hero-visual {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(170deg, #87b3d8 0%, #4d7fa8 60%, #234d70 100%);
}
.hero-tag {
  position: absolute;
  background: #fff;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.hero-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.hero-tag.t1 { top: 5%; left: -16px; }
.hero-tag.t2 { bottom: 14%; right: -10px; }
.hero-tag.t3 { top: 40%; right: -22px; }

@media (max-width: 950px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { aspect-ratio: 5/4; max-width: 580px; margin: 0 auto; }
}

/* Trust strip (logos/promises) */
.trust-strip {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
}
.trust-row-item svg { width: 32px; height: 32px; color: var(--accent); flex-shrink: 0; }
.trust-row-item strong { display: block; color: var(--ink); font-size: 15px; }
.trust-row-item span { font-size: 13px; color: var(--muted); }
@media (max-width: 800px) { .trust-row { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 500px) { .trust-row { grid-template-columns: 1fr; } }

/* =====================================================
   Sections
   ===================================================== */
.section { padding: clamp(60px, 7vw, 100px) 0; }
.section-sm { padding: clamp(40px, 5vw, 70px) 0; }
.section-alt { background: var(--surface-2); }
.section-dark { background: var(--bg); color: #e8eef7; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .eyebrow { color: var(--accent-2); }
.section-dark .eyebrow::before { background: var(--accent-2); }

.section-head {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}
.section-head p {
  font-size: 1.1rem;
  color: var(--ink-2);
}
.section-dark .section-head p { color: #b5c2d6; }
.section-head.left { margin-left: 0; text-align: left; }

/* =====================================================
   Choice cards — "What do you want to design?"
   ===================================================== */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.choice-card {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.choice-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.choice-card .badge { position: absolute; top: 18px; right: 18px; }
.choice-card .ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,91,58,.12), rgba(255,179,71,.18));
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.choice-card h3 { margin: 0; font-size: 1.2rem; }
.choice-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; flex: 1; }
.choice-card .arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 14px; margin-top: 8px; }
@media (max-width: 900px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .choice-grid { grid-template-columns: 1fr; } }

/* =====================================================
   Feature grid
   ===================================================== */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,91,58,.12), rgba(255,179,71,.18));
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  color: var(--accent);
}
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--ink-2); margin: 0; font-size: 15px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }

/* =====================================================
   Steps
   ===================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.step {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  border: 1px solid var(--line);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.step h4 { margin: 0 0 8px; font-size: 1.1rem; }
.step p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* =====================================================
   Product cards (richer)
   ===================================================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.products-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.products-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.product-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-card .ribbon {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}
/* Feature badge — small green pill anchored over the product image, used
   for per-SKU callouts like "Waterproof" on the outdoor sticker.
   Implemented as a positioned absolute span so it doesn't disturb any
   existing card layout / hover transforms. */
.product-card .feature-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(22, 163, 74, .94);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(22, 163, 74, .25);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
/* Variety badge — top-right corner of each product card. Calls out the
   option-set ("13 colors", "4 sizes"). White pill with ink text + thin
   border so it reads as a quiet metadata chip, distinct from the green
   feature badge (Waterproof, Embroidered, Engraved) on the top-left. */
.product-card .variety-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, .96);
  color: var(--ink, #0a1f3d);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
/* Match the feature (green) badge sizing to the variety badge so the
   two corners feel balanced. */
.product-card .feature-badge {
  font-size: 11px;
  padding: 6px 12px;
  top: 12px;
  left: 12px;
}
.product-img {
  aspect-ratio: 4/3;
  background: linear-gradient(160deg, #234d70, #0a1f3d);
  display: grid;
  place-items: center;
  padding: 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.product-img.alt-1 { background: linear-gradient(160deg, #19c4b8, #0d8a82); }
.product-img.alt-2 { background: linear-gradient(160deg, #f4c75c, #d99a2b); color: var(--ink); }
.product-img.alt-3 { background: linear-gradient(160deg, #ff5b3a, #c0341f); }
.product-img.alt-4 { background: linear-gradient(160deg, #87b3d8, #4d7fa8); }
.product-img.alt-5 { background: linear-gradient(160deg, #7a4cff, #4c2dab); }
.product-img.alt-6 { background: linear-gradient(160deg, #e2e8f0, #94a3b8); color: var(--ink); }
.product-img svg, .product-img .lettered {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.03em;
}
.product-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.product-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 8px;
}
.product-card h3 { margin-bottom: 8px; font-size: 1.25rem; }
.product-card p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 18px; }
.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.price { font-weight: 700; font-size: 1.15rem; }
.price small { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 4px; }
.price-old { color: var(--muted); text-decoration: line-through; font-weight: 500; font-size: 14px; margin-right: 6px; }
@media (max-width: 900px) {
  .products-grid, .products-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .products-grid, .products-grid.cols-4 { grid-template-columns: 1fr; }
}

/* =====================================================
   Gallery (photo grid)
   ===================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-3);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(10,31,61,.85));
  color: #fff;
  opacity: 0;
  transition: opacity .2s;
}
.gallery-item:hover .gallery-caption { opacity: 1; }
.gallery-item .gallery-caption strong { display: block; font-size: 14px; }
.gallery-item .gallery-caption span { font-size: 12px; color: #cbd5e1; }
@media (max-width: 800px) { .gallery-grid, .gallery-grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .gallery-grid, .gallery-grid.cols-3 { grid-template-columns: 1fr; } }

/* Transom mockup (SVG-style preview for gallery items) */
.transom {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.transom.t1 { background: linear-gradient(180deg, #cfe2f3 0%, #87b3d8 60%, #4d7fa8 100%); }
.transom.t2 { background: linear-gradient(180deg, #fde68a 0%, #f59e0b 60%, #b45309 100%); }
.transom.t3 { background: linear-gradient(180deg, #d1fae5 0%, #34d399 60%, #047857 100%); }
.transom.t4 { background: linear-gradient(180deg, #ddd6fe 0%, #8b5cf6 60%, #4c1d95 100%); }
.transom.t5 { background: linear-gradient(180deg, #fecaca 0%, #ef4444 60%, #7f1d1d 100%); }
.transom.t6 { background: linear-gradient(180deg, #fed7aa 0%, #fb923c 60%, #9a3412 100%); }
.transom.t7 { background: linear-gradient(180deg, #bae6fd 0%, #0ea5e9 60%, #0c4a6e 100%); }
.transom.t8 { background: linear-gradient(180deg, #f5d0fe 0%, #d946ef 60%, #701a75 100%); }
.transom-hull {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 0 0 60% 60% / 0 0 100% 100%;
  height: 70%;
  display: grid;
  place-items: center;
  align-content: center;
  box-shadow: 0 18px 32px rgba(10,31,61,.28);
  padding: 12px;
  text-align: center;
}
.transom.dark .transom-hull { background: #0a1f3d; color: #fff; }
.transom-hull .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 3.2vw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.transom.dark .transom-hull .name { color: #fff; }
.transom-hull .name.script { font-family: var(--font-script); font-weight: 600; font-size: clamp(24px, 4.2vw, 40px); }
.transom-hull .name.serif { font-family: Georgia, "Times New Roman", serif; }
.transom-hull .name.bold { font-family: Impact, "Arial Black", sans-serif; letter-spacing: 0.04em; }
.transom-hull .port {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(9px, 1.4vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 6px;
}
.transom.dark .transom-hull .port { color: #cbd5e1; }
.transom .ribbon-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 50px;
  flex-wrap: wrap;
}
.pagination a, .pagination .ellipsis {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .ellipsis { border: 0; cursor: default; }

/* =====================================================
   Reviews
   ===================================================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.section-dark .review {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.review-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--surface-3);
}
.review-photo img { width: 100%; height: 100%; object-fit: cover; }
.review-photo .transom { aspect-ratio: 4/3; }
.review .stars { color: var(--gold); margin-bottom: 10px; font-size: 14px; letter-spacing: 2px; }
.review p { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; flex: 1; }
.section-dark .review p { color: #d8e1ee; }
.review-meta { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.review-meta strong { display: block; font-size: 14px; color: var(--ink); }
.section-dark .review-meta strong { color: #fff; }
.review-meta span { font-size: 12.5px; color: var(--muted); }
.section-dark .review-meta span { color: #94a3b8; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

/* =====================================================
   FAQ
   ===================================================== */
.faq { max-width: 820px; margin: 0 auto; }
.faq-section-label {
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 40px 0 10px;
  font-weight: 600;
}
.faq-section-label:first-child { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 22px 0;
  text-align: left;
  font-size: 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq-q::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 400;
  transition: transform .2s;
  flex-shrink: 0;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
  color: var(--ink-2);
}
.faq-item.open .faq-a { max-height: 800px; padding: 0 0 22px; }
.faq-a p, .faq-a ul { margin: 0 0 1em; }
.faq-a ul { padding-left: 1.2em; }

/* =====================================================
   Big CTA
   ===================================================== */
.cta-block {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 70px);
  color: #fff;
  text-align: center;
}
.cta-block h2 { color: #fff; margin-bottom: 14px; }
.cta-block p { color: rgba(255,255,255,.92); max-width: 600px; margin: 0 auto 28px; font-size: 1.1rem; }
.cta-block .btn-light { color: var(--ink); }

/* =====================================================
   Footer
   ===================================================== */
.footer {
  background: var(--bg);
  color: #b5c2d6;
  padding: 70px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 50px;
}
.footer h4 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: #b5c2d6; font-size: 14.5px; transition: color .15s; }
.footer ul a:hover { color: #fff; }
.footer-brand p { font-size: 14.5px; color: #94a3b8; max-width: 280px; }
.footer-brand .brand { color: #fff; margin-bottom: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #6b7d97;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* =====================================================
   Page hero (interior pages)
   ===================================================== */
.page-hero {
  background: linear-gradient(180deg, var(--surface-2) 0%, #fff 100%);
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 70px);
  text-align: center;
}
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  max-width: 820px;
  margin: 0 auto 18px;
}
.page-hero p {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 680px;
  margin: 0 auto;
}

.breadcrumbs {
  background: var(--surface-2);
  padding: 18px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.breadcrumbs a { color: var(--accent); }
.breadcrumbs .crumb { display: inline-flex; gap: 8px; align-items: center; }
.breadcrumbs .crumb::after { content: "/"; color: var(--muted); margin: 0 8px; }
.breadcrumbs .crumb:last-child::after { display: none; }

/* =====================================================
   Legal / long-form text
   ===================================================== */
.prose {
  max-width: 780px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.prose h2 { font-size: 1.6rem; color: var(--ink); margin-top: 2.2em; margin-bottom: .6em; }
.prose h3 { font-size: 1.15rem; color: var(--ink); margin-top: 1.6em; margin-bottom: .4em; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose table th, .prose table td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; }
.prose table th { color: var(--ink); }
.last-updated {
  display: inline-block;
  background: var(--surface-2);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 30px;
  font-family: var(--font-mono);
}

/* =====================================================
   Forms
   ===================================================== */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,91,58,.12);
}
.field .help { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.field .err { font-size: 12.5px; color: var(--red); margin-top: 6px; display: none; }
.field.error input, .field.error select { border-color: var(--red); }
.field.error .err { display: block; }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  position: relative;
}
.swatch:hover { transform: scale(1.08); }
.swatch.active { border-color: var(--accent); transform: scale(1.1); }
.swatch.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Contact info layout */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact-info .info-row { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info .info-row svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.contact-info .info-row strong { display: block; color: var(--ink); margin-bottom: 4px; }
.contact-info .info-row span { color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-row { grid-template-columns: 1fr; }
}

/* =====================================================
   Designer canvas
   ===================================================== */
.designer {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.preview {
  background: linear-gradient(180deg, #cfe2f3 0%, #87b3d8 55%, #4d7fa8 100%);
  border-radius: var(--radius);
  min-height: 460px;
  display: grid;
  place-items: center;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.preview::after {
  content: "";
  position: absolute;
  inset: 60% 0 0 0;
  background: linear-gradient(180deg, rgba(10,31,61,0), rgba(10,31,61,.45));
  pointer-events: none;
}
.preview-hull {
  width: 100%;
  max-width: 540px;
  background: #fff;
  border-radius: 0 0 60% 60% / 0 0 100% 100%;
  min-height: 240px;
  position: relative;
  box-shadow: 0 30px 60px rgba(10,31,61,.35);
  display: grid;
  place-items: center;
  align-content: center;
  padding: 20px;
  text-align: center;
}
.preview-hull.dark { background: #0a1f3d; }
.preview-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  padding: 0 16px;
  transition: color .2s, font-family .2s;
  word-break: break-word;
}
.preview-port {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 1.6vw, 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 10px;
}
.preview-meta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(10,31,61,.7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.controls { display: flex; flex-direction: column; gap: 16px; max-height: 600px; overflow-y: auto; padding-right: 8px; }
.controls-section { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.controls-section:last-child { border-bottom: 0; }

.alert {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.alert-warn { background: rgba(244,199,92,.18); color: #7a5510; border: 1px solid rgba(244,199,92,.4); }
.alert-info { background: rgba(46,127,184,.12); color: #1e5982; border: 1px solid rgba(46,127,184,.3); }
.alert-error { background: rgba(220,38,38,.10); color: #991b1b; border: 1px solid rgba(220,38,38,.3); }
.alert-success { background: rgba(22,163,74,.10); color: #166a36; border: 1px solid rgba(22,163,74,.3); }
.alert a { font-weight: 600; text-decoration: underline; }

@media (max-width: 950px) { .designer { grid-template-columns: 1fr; padding: 18px; } }

/* Two-pane number designer with both sides */
.preview-numbers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.preview-numbers .preview-text {
  font-family: Impact, "Arial Black", sans-serif !important;
  letter-spacing: 0.06em;
  background: transparent;
}

/* =====================================================
   Cart / Checkout
   ===================================================== */
.cart-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
.cart-items {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cart-line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-line:last-child { border-bottom: 0; }
.cart-line .thumb {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
}
.cart-line .thumb .mini-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}
.cart-line .meta strong { display: block; font-size: 15.5px; margin-bottom: 4px; color: var(--ink); }
.cart-line .meta .spec { font-size: 13px; color: var(--muted); }
.cart-line .controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.qty-stepper button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.qty-stepper button:hover { background: var(--surface-2); }
.qty-stepper span { padding: 0 10px; font-weight: 600; min-width: 24px; text-align: center; }
.line-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.line-remove:hover { color: var(--red); }
.line-price { font-weight: 700; font-size: 15.5px; min-width: 70px; text-align: right; }

.summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  position: sticky;
  top: 110px;
}
.summary h3 { margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14.5px; color: var(--ink-2); }
.summary-row.total { font-size: 1.15rem; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); padding-top: 18px; margin-top: 8px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.empty-state svg { width: 64px; height: 64px; color: var(--muted); margin: 0 auto 20px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { color: var(--ink-2); margin-bottom: 22px; }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  /* On mobile, summary sits ABOVE the form so customers see what they're
     buying before scrolling through the address fields. `order: -1` pulls
     the summary (which is the second grid item in source order) above the
     form (first grid item). On desktop the source order takes over again
     since the layout is two columns side-by-side. */
  .summary { position: static; order: -1; }
  .cart-line { grid-template-columns: 64px 1fr; }
  .cart-line .thumb { width: 64px; height: 64px; }
  .cart-line .line-price { grid-column: 2; text-align: left; }
}

/* =====================================================
   Modal
   ===================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,31,61,.7);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  /* When the modal content is taller than the viewport, vertical centering
     pushes its top edge off-screen and the customer can't scroll back up
     to reach it. Allow the backdrop itself to scroll instead — combined
     with the mobile align change below this keeps every byte of content
     reachable on phones with browser chrome eating viewport height. */
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
/* On phones, vertical centering hides the top of long modals (boat-name
   prompt + upload zone + location field + CTA all stacked). Top-align so
   the headline is always the first thing the customer sees and they can
   scroll the backdrop to reach the CTA. Desktop keeps the centered look. */
@media (max-width: 720px) {
  .modal-backdrop {
    align-items: flex-start;
    padding: 16px;
  }
  .modal {
    max-height: none;
    padding: 28px 22px;
  }
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--surface-2);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.modal-close:hover { background: var(--line); }
.modal h2 { margin-bottom: 8px; font-size: 1.6rem; }
.modal .subtitle { color: var(--ink-2); margin-bottom: 24px; }

/* =====================================================
   Toast
   ===================================================== */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: var(--shadow-lg);
  animation: toastIn .3s ease, toastOut .3s ease forwards 3s;
  max-width: 340px;
}
.toast svg { width: 18px; height: 18px; color: var(--teal); }
.toast.error svg { color: var(--red); }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(20px); opacity: 0; } }

/* =====================================================
   States grid (existing)
   ===================================================== */
.state-search { max-width: 540px; margin: 0 auto 40px; position: relative; }
.state-search input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 16px;
  background: #fff;
  font-family: inherit;
}
.state-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,91,58,.12); }
.state-search svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }

.states-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.state-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.state-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.state-abbr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); font-weight: 600; }
.state-name { font-weight: 600; color: var(--ink); font-size: 14.5px; }
@media (max-width: 900px) { .states-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .states-grid { grid-template-columns: repeat(2, 1fr); } }

/* State hero */
.state-hero {
  background: linear-gradient(135deg, var(--bg) 0%, #16335a 100%);
  color: #fff;
  padding: clamp(60px, 8vw, 100px) 0 clamp(50px, 6vw, 80px);
}
.state-hero .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.state-hero h1 { color: #fff; }
.state-hero p { color: #c5d2e5; font-size: 1.1rem; }
.state-stat-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 28px; }
.state-stat-card h4 { color: #fff; margin-bottom: 16px; }
.state-stat-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14.5px; }
.state-stat-row:last-child { border-bottom: 0; }
.state-stat-row strong { color: #fff; }
.state-stat-row span { color: #94a3b8; }
@media (max-width: 800px) { .state-hero .container { grid-template-columns: 1fr; } }

.requirements { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 20px; }
.req-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; gap: 14px; }
.req-item .num { width: 28px; height: 28px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.req-item h4 { font-size: 1rem; margin-bottom: 4px; }
.req-item p { margin: 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 700px) { .requirements { grid-template-columns: 1fr; } }

/* =====================================================
   Brand/Types/Misc grids
   ===================================================== */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tag-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tag-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.tag-card .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent); flex-shrink: 0; }
@media (max-width: 900px) { .tag-grid { grid-template-columns: repeat(2, 1fr); } }

.az-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  margin-top: 30px;
}
.az-index a {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color .15s, transform .15s;
}
.az-index a:hover { border-color: var(--accent); transform: translateX(2px); }
.az-index a span { color: var(--muted); font-size: 12px; }

.az-letters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  justify-content: center;
}
.az-letters a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface-2);
}
.az-letters a:hover { background: var(--accent); color: #fff; }

/* =====================================================
   Photo strip / customer photos showcase
   ===================================================== */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.photo-strip .gallery-item { aspect-ratio: 1; border-radius: 12px; }
@media (max-width: 800px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }

/* Two-column split (text + image) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split-visual {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-md);
}
.split-visual.transom { aspect-ratio: 4/3; padding: 30px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split.reverse { direction: ltr; }
}

/* =====================================================
   Utilities
   ===================================================== */
.text-center { text-align: center; }
.mt-2 { margin-top: 12px; }
.mt-4 { margin-top: 24px; }
.mt-6 { margin-top: 40px; }
.mt-8 { margin-top: 60px; }
.mb-0 { margin-bottom: 0 !important; }
.no-pad-top { padding-top: 0 !important; }
.flex-center { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.fadein { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fadein.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fadein { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}