/* =========================================================
   TIDE & TABLE — design tokens
   Ink teal + catch-orange market palette, Fraunces/Work Sans
   ========================================================= */
:root {
  --ink:        #0E2A2F;
  --teal:       #145C54;
  --foam:       #F1F6F4;
  --card:       #FFFFFF;
  --catch:      #E8552A;
  --catch-dark: #C7431E;
  --gold:       #F0C24B;
  --ice:        #A9D6D2;
  --ink-text:   #16211F;
  --muted:      #5B6E6B;
  --line:       #DDE7E4;

  --display: 'Fraunces', serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
  --shadow: 0 8px 24px rgba(14, 42, 47, 0.10);

  /* Dark mode transition */
  --theme-transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ---------- DARK THEME ---------- */
[data-theme="dark"] {
  --ink:        #0A1F23;
  --teal:       #0D3D38;
  --foam:       #111C1E;
  --card:       #192628;
  --catch:      #FF6B3D;
  --catch-dark: #E8552A;
  --gold:       #F0C24B;
  --ice:        #2FB5A3;
  --ink-text:   #D4E8E5;
  --muted:      #7AA8A4;
  --line:       #1E3538;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
}

[data-theme="dark"] html,
[data-theme="dark"] body { color: var(--ink-text); }

[data-theme="dark"] .fish-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .cart-item,
[data-theme="dark"] .order-summary-box,
[data-theme="dark"] .order-card,
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select { background: var(--card); color: var(--ink-text); border-color: var(--line); }

[data-theme="dark"] .weight-option { background: var(--card); border-color: var(--line); color: var(--ink-text); }
[data-theme="dark"] .weight-option.selected { background: var(--catch); border-color: var(--catch); color: #fff; }
[data-theme="dark"] .filter-chip { background: var(--card); border-color: var(--line); color: var(--ink-text); }
[data-theme="dark"] .filter-chip.active { background: var(--ink); color: #fff; }
[data-theme="dark"] .fish-search { background: var(--card); color: var(--ink-text); border-color: var(--line); }
[data-theme="dark"] .fish-name, [data-theme="dark"] .fish-desc { color: var(--ink-text); }
[data-theme="dark"] .fish-price { color: var(--catch); }
[data-theme="dark"] .section-title, [data-theme="dark"] .section-sub { color: var(--ink-text); }
[data-theme="dark"] .ticker-bar { background: #0A1A2E; }
[data-theme="dark"] .ticker-item { color: #7FBFFF; }
[data-theme="dark"] .cut-fish-toggle { color: var(--ink-text); }
[data-theme="dark"] .add-cart-btn { background: var(--catch); }
[data-theme="dark"] .btn-primary { background: var(--catch); }
[data-theme="dark"] .btn-secondary { background: var(--card); color: var(--ink-text); border-color: var(--line); }
[data-theme="dark"] .order-card { background: var(--card); }
[data-theme="dark"] .saved-address-banner { background: #0D2E2A; border-color: #1A5048; }
[data-theme="dark"] .slot-option { background: var(--card); border-color: var(--line); color: var(--ink-text); }
[data-theme="dark"] .slot-option.selected { background: #1A3540; border-color: var(--catch); color: var(--catch); }

*, *::before, *::after { transition: var(--theme-transition); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
  background:
    radial-gradient(circle at 8% 0%, rgba(47,181,163,0.14), transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(240,194,75,0.16), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(232,85,42,0.08), transparent 45%),
    var(--foam);
  transition: background 0.35s ease;
}
[data-theme="dark"] html {
  background:
    radial-gradient(circle at 8% 0%, rgba(47,181,163,0.06), transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(240,194,75,0.05), transparent 40%),
    var(--foam);
}
body {
  margin: 0;
  background: transparent;
  color: var(--ink-text);
  font-family: var(--body);
  line-height: 1.5;
  position: relative;
}
#fishBgCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Header ---------- */
.site-header {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Titan One', var(--display), cursive;
  font-weight: 400;
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: 0.01em;
}
.brand-mark { width: 34px; height: 34px; display: inline-block; vertical-align: middle; }
.brand-amp { color: var(--catch); font-style: italic; }

.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; font-size: 0.95rem; }
.main-nav a { color: #cfe4e0; transition: color 0.2s; position: relative; }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--catch);
}
.nav-user { color: var(--ice); font-size: 0.9rem; }
.btn-ghost-nav {
  border: 1px solid rgba(255,255,255,0.35);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  transition: background 0.2s, border-color 0.2s;
}
.btn-ghost-nav:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

.cart-link { display: flex; align-items: center; gap: 6px; }
.cart-badge {
  background: var(--catch);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.cart-badge.pulse { animation: badgePulse 0.4s ease; }
@keyframes badgePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--ink) 0%, var(--teal) 55%, #1F7A6E 85%, #2FB5A3 100%);
  color: #fff;
  padding: 64px 24px 90px;
  position: relative;
  overflow: hidden;
}
.hero-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; transition: transform 0.1s ease; }
.hero-eyebrow {
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--ice);
  display: inline-block;
  margin-bottom: 14px;
}
.hero h1 {
  font-family: 'Titan One', var(--display), cursive;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 14ch;
  text-shadow: 3px 3px 0 rgba(14,42,47,0.35);
  letter-spacing: 0.01em;
}
.hero h1 em { color: var(--catch); font-style: normal; text-shadow: 3px 3px 0 rgba(14,42,47,0.35); }
.hero p { max-width: 46ch; color: #d7e8e5; font-size: 1.05rem; position: relative; z-index: 2; }

.ticker-bar {
  background: linear-gradient(90deg, #051530 0%, #0A2540 30%, #0D3558 60%, #051530 100%);
  background-size: 200% 100%;
  animation: tickerWave 8s ease-in-out infinite;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0 14px;
  border-top: 2px solid rgba(47,181,163,0.4);
  border-bottom: 2px solid rgba(47,181,163,0.2);
  position: relative;
}
.ticker-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(47,181,163,0.2), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(31,122,110,0.2), transparent 50%);
  animation: tickerGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Jumping fish row above the ticker text */
.ticker-fish-row {
  display: flex;
  gap: 12%;
  position: absolute;
  top: -2px;
  left: 0;
  width: 200%;
  pointer-events: none;
  animation: fishRowScroll 18s linear infinite;
}
.ticker-fish-jump {
  font-size: 1.1rem;
  display: inline-block;
  animation: fishJump 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(47,181,163,0.8));
}
.ticker-fish-jump:nth-child(2) { animation-delay: 0.2s; }
.ticker-fish-jump:nth-child(3) { animation-delay: 0.5s; }
.ticker-fish-jump:nth-child(4) { animation-delay: 0.8s; }
.ticker-fish-jump:nth-child(5) { animation-delay: 1.1s; }
.ticker-fish-jump:nth-child(6) { animation-delay: 0.35s; }
.ticker-fish-jump:nth-child(7) { animation-delay: 0.65s; }
.ticker-fish-jump:nth-child(8) { animation-delay: 0.95s; }
@keyframes fishJump {
  0%, 100% { transform: translateY(0) scaleX(1); }
  30% { transform: translateY(-14px) scaleX(1) rotate(-15deg); }
  50% { transform: translateY(-20px) scaleX(1) rotate(0deg); }
  70% { transform: translateY(-10px) scaleX(-1) rotate(15deg); }
}
@keyframes fishRowScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes tickerWave {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes tickerGlow {
  from { opacity: 0.5; }
  to { opacity: 1; }
}
.ticker-track {
  display: inline-flex;
  gap: 48px;
  animation: tickerScroll 28s linear infinite; /* scroll ONLY on the track */
  will-change: transform;
  position: relative;
  z-index: 1;
}
.ticker-bar:hover .ticker-track,
.ticker-bar:hover .ticker-fish-row { animation-play-state: paused; }
.ticker-item {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.82rem;
  color: #7FD4FF;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(127,212,255,0.5);
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Catalog section: animated water background ---------- */
.catalog {
  position: relative;
  overflow: hidden;
}
.catalog::before {
  content: '';
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(47,181,163,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(20,92,84,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(47,181,163,0.06) 0%, transparent 70%);
  animation: catalogWater 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.catalog > * { position: relative; z-index: 1; }
@keyframes catalogWater {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(20px, -15px) scale(1.03); }
  66%  { transform: translate(-15px, 10px) scale(0.98); }
  100% { transform: translate(10px, -20px) scale(1.02); }
}
[data-theme="dark"] .catalog::before {
  background:
    radial-gradient(ellipse at 15% 30%, rgba(47,181,163,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(20,92,84,0.07) 0%, transparent 55%);
}

/* ---------- Fish card glow on hover ---------- */
.fish-card {
  position: relative;
  overflow: visible !important;
}
.fish-card::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius) + 4px);
  background: transparent;
  box-shadow: none;
  transition: box-shadow 0.4s ease, background 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.fish-card:hover::after {
  box-shadow:
    0 0 25px rgba(47,181,163,0.45),
    0 0 50px rgba(47,181,163,0.2),
    0 0 80px rgba(47,181,163,0.08);
  background: radial-gradient(ellipse at center, rgba(47,181,163,0.08), transparent 70%);
}
[data-theme="dark"] .fish-card:hover::after {
  box-shadow:
    0 0 25px rgba(47,181,163,0.6),
    0 0 60px rgba(47,181,163,0.3),
    0 0 100px rgba(47,181,163,0.12);
}

/* ---------- Dark mode theme toggle button ---------- */
.theme-toggle {
  background: none;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, transform 0.3s ease;
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); transform: rotate(20deg); }
[data-theme="dark"] .theme-toggle { border-color: rgba(127,212,255,0.4); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(127,212,255,0.1); }

.tide-line {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: var(--foam);
  clip-path: polygon(0% 60%, 5% 55%, 10% 60%, 15% 65%, 20% 60%, 25% 55%, 30% 60%, 35% 65%,
    40% 60%, 45% 55%, 50% 60%, 55% 65%, 60% 60%, 65% 55%, 70% 60%, 75% 65%,
    80% 60%, 85% 55%, 90% 60%, 95% 65%, 100% 60%, 100% 100%, 0% 100%);
}

/* ---------- Section titles ---------- */
.section-title {
  font-family: 'Titan One', var(--display), cursive;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-weight: 400;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}
.section-sub { color: var(--muted); margin-bottom: 32px; }

/* ---------- Product grid ---------- */
.catalog { max-width: 1180px; margin: 0 auto; padding: 56px 24px 80px; }
.search-row { margin-bottom: 18px; }
.fish-search {
  width: 100%;
  max-width: 420px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 16px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fish-search:focus {
  outline: none;
  border-color: var(--catch);
  box-shadow: 0 0 0 3px rgba(232,85,42,0.15);
}
.single-weight-note {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--catch-dark);
  font-weight: 600;
}
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-chip {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-chip:hover { border-color: var(--catch); color: var(--catch-dark); }
.filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}

.fish-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fish-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 36px rgba(14,42,47,0.20), 0 0 0 2px rgba(232,85,42,0.12);
}
.benefit-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.18); }
.stat-card, .admin-order-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.stat-card:hover, .admin-order-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(14,42,47,0.14); }
.fish-media {
  height: 150px;
  background: linear-gradient(135deg, var(--ice), #d5efe9);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}
.fish-media img.fish-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fish-media img.fish-illustration {
  width: 70%;
  height: auto;
  max-height: 80px;
}
.fish-media .swim {
  display: inline-block;
  animation: swim 3.5s ease-in-out infinite;
}
@keyframes swim {
  0%, 100% { transform: translateX(-6px) rotate(-4deg); }
  50% { transform: translateX(6px) rotate(4deg); }
}
.fish-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.fish-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fish-name { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.fish-desc { color: var(--muted); font-size: 0.85rem; min-height: 2.4em; }
.fish-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.fish-price { font-family: var(--mono); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.fish-unit { color: var(--muted); font-size: 0.78rem; }

/* ---------- Weight variant toggle ---------- */
.weight-toggle { display: flex; gap: 6px; margin-top: 10px; }
.weight-option {
  flex: 1;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--muted);
}
.weight-option input { display: none; }
.weight-option.selected { border-color: var(--catch); background: #FEF1EC; color: var(--catch-dark); }

/* ---------- Cut fish toggle ---------- */
.cut-fish-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-text);
  cursor: pointer;
  user-select: none;
}
.cut-fish-toggle input { accent-color: var(--catch); width: 15px; height: 15px; cursor: pointer; }
.cut-fish-fee { color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }
.order-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.status-placed { background: #E4EDFB; color: #1E4FA3; }
.status-out-for-delivery { background: #FFF1D6; color: #92600B; }
.status-delivered { background: #E4F2ED; color: #1B6E4E; }
.status-cancelled { background: #FDEBE6; color: #A5341A; }

.weight-tag {
  display: inline-block;
  background: var(--ice);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.cut-tag {
  display: inline-block;
  background: #FEF1EC;
  color: var(--catch-dark);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.fish-card.out-of-stock { opacity: 0.6; }
.fish-card.out-of-stock .fish-media { filter: grayscale(0.7); }
.oos-badge {
  position: absolute; top: 10px; right: 10px;
  background: #A5341A; color: #fff;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; z-index: 2;
}

/* ---------- Dynamic Add-to-cart button ---------- */
.add-cart-btn {
  position: relative;
  overflow: hidden;
  border: none;
  background: var(--catch);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 11px 0;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  transition: background 0.2s, transform 0.15s;
}
.add-cart-btn:hover { background: var(--catch-dark); }
.add-cart-btn:active { transform: scale(0.97); }
.add-cart-btn .label { transition: opacity 0.2s; }
.add-cart-btn.added {
  background: var(--teal);
}
.add-cart-btn.added .label::after { content: ' ✓'; }
.add-cart-btn .bubble {
  position: absolute;
  bottom: -10px;
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  animation: rise 0.9s ease-in forwards;
  pointer-events: none;
}
@keyframes rise {
  to { transform: translateY(-46px) scale(0.3); opacity: 0; }
}

/* Flying fish-to-cart animation element */
.fly-fish {
  position: fixed;
  font-size: 1.4rem;
  z-index: 999;
  pointer-events: none;
  animation: flyToCart 0.7s cubic-bezier(.55,.06,.68,.19) forwards;
}
@keyframes flyToCart {
  to { transform: translate(var(--fx), var(--fy)) scale(0.3) rotate(20deg); opacity: 0.2; }
}

/* ---------- Buttons general ---------- */
.btn-primary {
  background: var(--catch);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--catch-dark); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover { background: var(--ink); color: #fff; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  max-width: 420px;
  margin: 64px auto;
  padding: 0 24px;
}
.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}
.auth-card h1 {
  font-family: var(--display);
  font-size: 1.7rem;
  margin: 0 0 6px;
}
.auth-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink-text);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  font-family: var(--body);
  font-size: 16px; /* iOS Safari auto-zooms on focus if smaller than 16px — this stops that */
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--catch);
  box-shadow: 0 0 0 3px rgba(232,85,42,0.15);
}
.auth-foot { text-align: center; margin-top: 18px; font-size: 0.88rem; color: var(--muted); }
.auth-foot a { color: var(--catch-dark); font-weight: 600; }
.remember-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-text);
  margin: -8px 0 18px;
  cursor: pointer;
  user-select: none;
}
.remember-toggle input { accent-color: var(--catch); width: 15px; height: 15px; cursor: pointer; }

.form-msg {
  font-size: 0.85rem;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: none;
}
.form-msg.show { display: block; }
.form-msg.error { background: #FDEBE6; color: #A5341A; }
.form-msg.success { background: #E4F2ED; color: #1B6E4E; }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Cart page ---------- */
.cart-wrap { max-width: 900px; margin: 0 auto; padding: 48px 24px 90px; }
.cart-item {
  display: grid;
  grid-template-columns: 60px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
  transition: opacity 0.25s, transform 0.25s;
}
.cart-item.removing { opacity: 0; transform: translateX(30px); }
.cart-item-icon { font-size: 1.8rem; }
.cart-item-name { font-weight: 600; }
.cart-item-price { color: var(--muted); font-size: 0.85rem; font-family: var(--mono); }
.qty-control { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--foam);
  cursor: pointer;
  font-weight: 700;
  transition: background 0.15s;
}
.qty-btn:hover { background: var(--ice); }
.qty-val { font-family: var(--mono); min-width: 18px; text-align: center; }
.remove-btn { color: var(--catch-dark); font-size: 0.8rem; cursor: pointer; background: none; border: none; font-weight: 600; }
.cart-summary {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-summary .total { font-family: var(--mono); font-size: 1.3rem; }
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty-state .emoji { font-size: 2.8rem; margin-bottom: 12px; }

/* ---------- Checkout ---------- */
.checkout-wrap { max-width: 640px; margin: 0 auto; padding: 48px 24px 90px; }
.pay-options { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.pay-option { min-width: 140px; }
.pay-option {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.pay-option.selected { border-color: var(--catch); background: #FEF1EC; color: var(--catch-dark); }
.order-summary-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.order-summary-box .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; }
.order-summary-box .row.total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 12px; font-weight: 700; font-family: var(--mono); }
#mapPicker {
  height: 260px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  overflow: hidden;
  cursor: crosshair;
}
.map-hint { font-size: 0.78rem; color: var(--muted); margin: 6px 0 0; }

/* ---------- Saved address banner ---------- */
.saved-address-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  background: #EEF7F4;
  border: 1.5px solid #A8D5C5;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.saved-address-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1B6E4E;
  margin-bottom: 6px;
}
.saved-address-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-text);
}

/* ---------- Delivery slot picker ---------- */
.slot-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.slot-option {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s;
}
.slot-option input { display: none; }
.slot-option.selected { border-color: var(--catch); background: #FEF1EC; color: var(--catch-dark); }

/* ---------- Minimum order weight bar ---------- */
.min-weight-bar { margin-bottom: 20px; }
.min-weight-track {
  height: 10px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.min-weight-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.min-weight-fill.ok { background: #1B6E4E; }
.min-weight-label { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.order-address {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-text);
  line-height: 1.5;
}
.order-address-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

/* ---------- Footer ---------- */
.benefits-band {
  background: linear-gradient(135deg, var(--teal) 0%, #1F7A6E 60%, #145C54 100%);
  padding: 56px 24px;
}
.benefits-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 24px;
  text-align: left;
}
.benefit-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 20px;
  color: #eaf5f2;
}
.benefit-card img { width: 42px; height: 42px; margin-bottom: 10px; }
.benefit-card h3 { font-family: var(--display); font-size: 1.05rem; margin: 0 0 6px; color: #fff; }
.benefit-card p { font-size: 0.85rem; line-height: 1.5; margin: 0; color: #cfe4e0; }
.benefits-disclaimer { margin-top: 24px; font-size: 0.75rem; color: #a9d6d2; }

.site-footer { background: var(--ink); color: #cfe4e0; }
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 44px 24px 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 28px;
  font-size: 0.85rem;
}
.footer-col h4 { color: #fff; font-family: var(--display); font-size: 1rem; margin: 0 0 12px; }
.footer-col a { display: block; margin-bottom: 8px; color: var(--ice); transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-note { color: var(--ice); font-size: 0.85rem; margin: 0 0 8px; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: 10px; }
.footer-about p { line-height: 1.6; color: #bcd6d1; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 16px 24px;
  font-size: 0.78rem;
  color: #8fb3ae;
}
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cart-item { grid-template-columns: 40px 1fr; grid-template-areas: "icon name" "icon qty" "icon price"; }
}

/* ============================================================
   Cross-device consistency pass — same look and feel on phones,
   tablets, and desktops, sized appropriately for each rather than
   forcing one fixed layout (which would be unusable on small
   screens). Comfortable tap targets on touch devices, tighter
   spacing where space is tight, nothing ever overflows sideways.
   ============================================================ */
button, .btn-primary, .btn-secondary, .add-cart-btn, .qty-btn,
.filter-chip, .page-tab, a.btn-primary, a.btn-secondary {
  min-height: 44px; /* Apple/Google recommended minimum comfortable tap target */
}
.qty-btn { min-height: 28px; } /* small inline stepper, intentionally compact */

img, svg { max-width: 100%; height: auto; }

html, body { overflow-x: hidden; } /* belt-and-braces: nothing can cause sideways scroll */

@media (max-width: 480px) {
  .hero { padding: 44px 18px 70px; }
  .catalog, .cart-wrap, .checkout-wrap, .auth-wrap { padding-left: 16px; padding-right: 16px; }
  .grid { gap: 16px; }
  .header-inner { padding: 12px 16px; }
  .weight-toggle { gap: 5px; }
  .weight-option { padding: 7px 3px; font-size: 0.74rem; }
}

/* ---------- Fast, 3D, mobile-first catalogue ---------- */
.hero-water-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-inner, .tide-line { z-index: 2; }
.fish-card, .benefit-card {
  transform: translate3d(0, 18px, 0) rotateX(2deg);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms), opacity .35s ease var(--reveal-delay, 0ms), box-shadow .25s ease;
  backface-visibility: hidden;
  contain: layout paint style;
}
.fish-card.in-view, .benefit-card.in-view { transform: translate3d(0, 0, 0) rotateX(0); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .fish-card.in-view:hover { transform: perspective(900px) rotateX(1deg) rotateY(-3deg) translate3d(0, -6px, 0); }
}
.fish-media { aspect-ratio: 4 / 3; height: auto; }
.fish-media img.fish-photo { content-visibility: auto; }
.fish-card { content-visibility: auto; contain-intrinsic-size: 380px; }

/* Three complete cards fit across every modern phone viewport (320px+). */
@media (max-width: 600px) {
  .catalog { padding: 32px 10px 56px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fish-card { min-width: 0; border-radius: 10px; box-shadow: 0 3px 10px rgba(14,42,47,.10); }
  .fish-media { min-height: 68px; }
  .fish-tag, .oos-badge { top: 5px; left: 5px; font-size: .5rem; padding: 2px 4px; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oos-badge { left: auto; right: 4px; }
  .fish-body { padding: 8px; gap: 5px; }
  .fish-name { font-size: .72rem; line-height: 1.15; min-height: 2.3em; overflow: hidden; }
  .fish-desc { display: none; }
  .fish-price-row { display: block; margin-top: 0; line-height: 1.15; }
  .fish-price { display: block; font-size: .74rem; }
  .fish-unit { display: block; font-size: .58rem; }
  .weight-toggle { gap: 2px; margin-top: 3px; }
  .weight-option { min-width: 0; padding: 4px 1px; border-radius: 5px; font-size: .55rem; min-height: 28px; }
  .single-weight-note { font-size: .57rem; line-height: 1.1; }
  .cut-fish-toggle { font-size: .57rem; line-height: 1.1; gap: 3px; }
  .cut-fish-toggle input { width: 13px; height: 13px; }
  .add-cart-btn { min-height: 34px; margin-top: 3px; padding: 5px 2px; border-radius: 7px; font-size: .65rem; }
  .filter-row { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; scrollbar-width: none; }
  .filter-chip { flex: 0 0 auto; min-height: 36px; padding: 6px 11px; font-size: .75rem; }
  .section-sub { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .fish-card, .benefit-card { opacity: 1; transform: none; transition: none; }
  #fishBgCanvas, .hero-water-canvas { display: none; }
}

/* ============================================================
   Wave text animations
   ============================================================ */
@keyframes waveChar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.wave-char {
  display: inline-block;
  animation: waveChar 2.2s ease-in-out infinite;
  will-change: transform;
}
/* Gentle float for body paragraphs + labels */
@keyframes textFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}
.section-sub, .hero p, .fish-desc, .auth-sub, .footer-about p {
  animation: textFloat 4s ease-in-out infinite;
}

/* ============================================================
   Footer sea scene
   ============================================================ */
.footer-sea-scene {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: 24px;
}
.footer-sea-svg { width: 100%; height: auto; display: block; }

/* Boat gentle rocking */
.footer-boat {
  transform-origin: 430px 128px;
  animation: boatRock 4s ease-in-out infinite;
}
@keyframes boatRock {
  0%, 100% { transform: rotate(-1.2deg) translateY(0); }
  50% { transform: rotate(1.2deg) translateY(2px); }
}

/* Fisherman sways with boat */
.footer-fisherman {
  transform-origin: 488px 110px;
  animation: boatRock 4s ease-in-out infinite;
}

/* Fishing line swings */
.footer-fish-line {
  transform-origin: 580px 55px;
  animation: lineSwing 4s ease-in-out infinite;
}
@keyframes lineSwing {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* Fish near hook bobs */
.footer-hook-fish {
  animation: hookFishBob 2.8s ease-in-out infinite;
}
@keyframes hookFishBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(6px) rotate(3deg); }
}

/* Wave paths animate */
.footer-wave-1 {
  animation: waveShift1 5s ease-in-out infinite;
}
.footer-wave-2 {
  animation: waveShift2 6s ease-in-out infinite;
}
@keyframes waveShift1 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-30px); }
}
@keyframes waveShift2 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(25px); }
}

/* Background jumping fish */
.footer-jump-fish {
  animation: jumpFish1 3.5s ease-in-out infinite;
  transform-origin: 200px 110px;
}
@keyframes jumpFish1 {
  0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-22px) rotate(-20deg); }
}
.footer-jump-fish-2 {
  animation: jumpFish2 5s ease-in-out infinite;
  animation-delay: 1.8s;
  transform-origin: 780px 108px;
}
@keyframes jumpFish2 {
  0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-18px) rotate(15deg); }
}

/* Ripple pulse */
.footer-ripple-1 {
  animation: ripple1 2.5s ease-out infinite;
}
.footer-ripple-2 {
  animation: ripple2 2.5s ease-out infinite;
  animation-delay: 0.4s;
}
@keyframes ripple1 {
  0% { rx: 8; ry: 2; opacity: 0.5; }
  100% { rx: 20; ry: 4.5; opacity: 0; }
}
@keyframes ripple2 {
  0% { rx: 14; ry: 3; opacity: 0.3; }
  100% { rx: 28; ry: 6; opacity: 0; }
}

/* ============================================================
   Special Combo Offers section
   ============================================================ */
.combos-section {
  padding: 64px 24px 48px;
  max-width: 1200px;
  margin: 0 auto;
}
.combos-inner { max-width: 1180px; margin: 0 auto; }
.combo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.combo-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1.5px solid var(--line);
}
.combo-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 16px 40px rgba(14,42,47,0.15), 0 0 0 1px rgba(47,181,163,0.2);
}
[data-theme="dark"] .combo-card { background: var(--card); border-color: var(--line); }

.combo-img-wrap { position: relative; overflow: hidden; }
.combo-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.combo-card:hover .combo-img { transform: scale(1.06); }
.combo-save-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--catch);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(232,85,42,0.4);
}
.combo-body { padding: 16px 18px 20px; }
.combo-name {
  font-family: 'Titan One', var(--display), cursive;
  font-size: 1rem;
  color: var(--ink-text);
  margin-bottom: 10px;
  line-height: 1.3;
}
.combo-items {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.combo-items li {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--mono);
  padding: 2px 0;
}
.combo-items li::before { content: '• '; color: var(--teal); }
.combo-pricing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.combo-regular {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: line-through;
  font-family: var(--mono);
}
.combo-offer {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--catch);
  font-family: var(--mono);
}
.combo-cart-btn {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  padding: 11px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  border: none;
}
.combo-cart-btn.loading { opacity: 0.7; pointer-events: none; }

@media (max-width: 480px) {
  .combo-grid { grid-template-columns: 1fr; }
  .combos-section { padding: 40px 16px 32px; }
}

/* Combo grid hidden by default — shown only when Combos chip is active */
#comboGrid { display: none; }
.combo-chip { border-color: var(--catch); color: var(--catch); }
.combo-chip.active { background: var(--catch); color: #fff; border-color: var(--catch); }
/* Remove old standalone section padding since combos are now inside catalog */
.combos-section { padding: 0; }
.combos-inner { max-width: none; margin: 0; }

/* ============================================================
   Enhanced mobile adaptability (v17)
   ============================================================ */
/* Prevent horizontal overflow everywhere */
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: rgba(47,181,163,0.2); }

/* Fluid container padding */
.catalog, .cart-wrap, .checkout-wrap, .auth-wrap, .combos-inner, .header-inner {
  padding-left: clamp(12px, 4vw, 24px);
  padding-right: clamp(12px, 4vw, 24px);
}

@media (max-width: 768px) {
  /* Nav wraps and stays reachable */
  .header-inner { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
  .main-nav { flex-wrap: wrap; gap: 10px 14px; font-size: 0.9rem; width: 100%; }
  .nav-user { display: none; } /* free up space on small screens */

  /* Product + combo grids: comfortable single/double column */
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .combo-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Hero text sizing */
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .hero p { font-size: 0.95rem; }

  /* Filter chips scroll horizontally instead of wrapping into many rows */
  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; }

  /* Search box full width */
  .fish-search { max-width: 100%; }

  /* Tables scroll */
  .stock-table { min-width: 520px; }

  /* Combo cards larger tap area */
  .combo-cart-btn { min-height: 46px; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fish-card { font-size: 0.9rem; }
  .fish-name { font-size: 0.92rem; }
  .fish-price { font-size: 1rem; }
  .weight-option { padding: 6px 2px; font-size: 0.7rem; }
  .add-cart-btn { font-size: 0.82rem; padding: 9px; }
  .section-title { font-size: clamp(1.2rem, 6vw, 1.5rem); }
  .footer-inner { grid-template-columns: 1fr; }
}

/* Larger tap targets on touch devices */
@media (pointer: coarse) {
  button, .btn-primary, .btn-secondary, .filter-chip, .add-cart-btn,
  .combo-cart-btn, .theme-toggle, .qty-btn, a.btn-primary {
    min-height: 44px;
  }
  .qty-btn { min-width: 40px; min-height: 40px; }
  input, select, textarea { font-size: 16px; } /* stops iOS auto-zoom */
}

/* Smoother scrolling + GPU hints */
* { -webkit-overflow-scrolling: touch; }
.fish-card, .combo-card { will-change: auto; }

/* Keep wave-animated words unbroken (letters never split across lines) */
.wave-word { display: inline-block; white-space: nowrap; }