/* ---------------- Blue Ocean Theme — Variables ---------------- */
:root{
  /* Oceanic palette: deep navy, aqua, seafoam, sand */
  --bg: #ffffff;          /* soft sky */
  --bg-alt: #ffffff;      /* pale wave band */
  --card: #ffffff;        /* white card */
  --text: #2d325a;        /* deep navy */
  --link: #2494a2;
  --muted: #2f4a77;       /* slate blue */
  --brand-1: #304b78;     /* dark blue */
  --brand-2: #2494a2;     /* dark blue 2 */
  --accent: #dbb13b;      /* teal */
  --feature-1: #dbb13b;
  --feature-2: #2494a2;
  --feature-3: #56bda2;
  --ring: rgba(35,147,161,.25);
  --shadow: 0 10px 30px rgba(47,74,119,.15);
  --radius: 16px;
  --radius-lg: 24px;
}

/* 0a0e29, 2d325a, 304b78, 2494a2, 56bda2, dbb13b */

/* Global Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.theme-food{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--text);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(86,189,162,.10), transparent 60%),
    radial-gradient(800px 400px at 5% 15%, rgba(35,147,161,.08), transparent 60%),
    var(--bg);
  line-height: 1.65;
}

/* Layout Helpers */
.container{ width: min(1100px, 92%); margin-inline: auto; }
.center{ text-align: center; }
.mt-24{ margin-top: 24px; }

/* Links & Buttons */
a{ color: var(--text); text-decoration: none; }
a:hover{ opacity:.95; }
.btn{
  display:inline-block; padding:.85rem 1.15rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff; font-weight: 700; box-shadow: var(--shadow);
}
.btn-ghost{
  background: transparent; border: 1px solid rgba(0,0,0,.12);
  color: var(--text); backdrop-filter: blur(4px);
}
.btn-sm{ padding:.6rem .9rem; font-size:.95rem; }

/* Accessibility */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#000; color:#fff; z-index:9999; }

/* ---------------- Header / Nav ---------------- */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(47,74,119,.08);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
.logo{ font-weight: 900; letter-spacing:.3px; font-size: 1.15rem; color: #0f2233; display: flex; align-items: center;}
.logo span {
  margin-right: 0.3em;
  line-height: 20px;
}
.logo span.no-color{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.logo span.shrimp {
  margin-right: 0.5em;
}
.shrimp > img { height: 20px; display: block;}
/* Nav links */
.nav{ display:flex; gap: 1rem; align-items:center; }
.nav a{ padding:.55rem .8rem; border-radius: 10px; position: relative; }
.nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:3px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
  border-radius: 3px;
}
.nav a:hover::after, .nav a.active::after{ transform: scaleX(1); }

/* Mobile nav (checkbox hack) */
.nav-toggle{ display:none; }
.hamburger{ display:none; cursor:pointer; padding:.4rem; border-radius:10px; }
.hamburger span{ display:block; width:24px; height:2px; background:#0f2233; margin:6px 0; transition:.2s; }

@media (max-width: 800px){
  .hamburger{ display:block; }
  .nav{
    position: fixed; inset: 60px 1rem auto 1rem;
    display:flex; flex-direction:column; gap:.25rem; padding:.6rem .5rem;
    background: #ffffff; border: 1px solid rgba(47,74,119,.10); border-radius: 12px;
    transform: translateY(-20px) scale(.98); opacity:0; pointer-events:none; transition:.2s ease;
    box-shadow: var(--shadow);
  }
  .nav a{ padding:.8rem; }
  .nav-toggle:checked ~ .hamburger span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .hamburger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
  .nav-toggle:checked ~ .nav{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
}

/* ---------------- Hero (Ocean) ---------------- */
.hero{ padding: clamp(3rem, 6vw, 6rem) 0; }
.hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items:center; }
.eyebrow{ text-transform: uppercase; letter-spacing:.14em; font-size:.78rem; color: var(--accent); margin:0 0 .35rem; }
.hero-copy h1{ font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.15; margin:0 0 10px; }
.hero-copy p{ color: var(--muted); max-width: 60ch; }
.hero-cta{ margin-top: 18px; display:flex; gap: .8rem; flex-wrap: wrap; }

.grad-food{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Decorative ocean shapes (reuse existing classes) */
.hero-art-food{ text-align: center; position:relative; height: 280px; }
.hero-art-food > img { height: 100%; }

@media (max-width: 900px){ .hero-inner{ grid-template-columns: 1fr; } }

/* ---------------- Sections / Cards / Grid ---------------- */
.section{ padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section.main{ padding: 0; }
.section.alt{
  background: var(--bg-alt);
  border-top:1px solid rgba(47,74,119,.08);
  border-bottom:1px solid rgba(47,74,119,.08);
  padding: clamp(1.5rem, 5vw, 2rem) 0;
}
.section-head{ text-align:center; margin-bottom: 1.6rem; }
.section-head p{ color: var(--muted); }

.grid{ display:grid; gap: 1rem; }
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .grid.two, .grid.three{ grid-template-columns: 1fr; } }

.card{
  background: var(--card);
  border: 1px solid rgba(47,74,119,.08);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(35,147,161,.35);
  box-shadow: 0 14px 40px rgba(35,147,161,.18);
}
.feature {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-blend-mode: soft-light;
  background-origin: content-box;
  text-align: center;
  color: #fff;
}
.feature h3{ margin: 0.8em 0; text-transform: uppercase; font-size: larger;}
.feature.feature-1 { background-color: var(--feature-1); }
.feature.feature-2 { background-color: var(--feature-2); }
.feature.feature-3 { background-color: var(--feature-3); }
/* ---------------- Products ---------------- */
.product{ display:flex; flex-direction: column; overflow: clip; }
.product-media{
  border-radius: 12px; aspect-ratio: 4/3;
  border: 1px solid rgba(47,74,119,.08);
}
#product .product-media{
  aspect-ratio: 1/1;
}
.product-media-food{
  background:
    radial-gradient(60% 60% at 70% 10%, rgba(86,189,162,.22), transparent 60%),
    radial-gradient(60% 60% at 20% 80%, rgba(35,147,161,.18), transparent 60%),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.03) 0 8px, transparent 8px 16px),
    linear-gradient(135deg, #ffffff, #ffffff);
  background-repeat: no-repeat;   /* Prevent tiling */
  background-size: cover;         /* Scale to cover */
  background-position: center;
}
.product-body{ padding-top: .8rem; }
.product-body h3{ margin: .25rem 0 .2rem; }
.badge{
  display:inline-block; margin-top:.4rem; font-size:.8rem; font-weight:700;
  padding:.25rem .5rem; border-radius: 999px;
  background: rgba(35,147,161,.12); color:#0a3a57;
}
.badge-ghost{ background: transparent; border: 1px dashed rgba(35,147,161,.35); color:#0a3a57; }

.spec{ list-style:none; padding:0; margin:.6rem 0 .2rem; color: var(--muted); }
.spec li{ padding:.15rem 0; }

/* ---------------- Footer ---------------- */
.site-footer{
  margin-top: 2rem; padding-top: 2rem;
  background: #fff; border-top:1px solid rgba(47,74,119,.10);
}
.footer-grid{
  display:grid; gap: 1.5rem; grid-template-columns: 1.2fr 1fr 1fr;
}
.footer-grid h4{ margin: 0 0 .5rem; }
.footer-grid p { color: var(--muted); }
.footer-grid a { color: var(--link); }
.footer-grid a:hover{ color: var(--text); }
.list{ list-style: none; padding:0; margin:0; }
.list li{ padding:.2rem 0; color: var(--muted); }
.social{ display:flex; gap:.6rem; margin-top:.5rem; font-size:1.25rem; }
.footer-foot{
  display:flex; justify-content:center; align-items:center;
  padding: 1rem 0 1.5rem; color: var(--muted);
  border-top:1px dashed rgba(47,74,119,.12); margin-top: 1.5rem;
}

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

/* Language selector / switcher */
.lang-select{
  padding:.45rem .6rem;
  border:1px solid rgba(47,74,119,.12);
  border-radius:10px;
  background:#fff;
  font-size:.95rem;
}
.lang-switch{
  display:flex; align-items:center; gap:.5rem; padding:.25rem .6rem;
}
.nav .lang-switch{ margin-left:.75rem; }
.lang-switch .lang-option{
  display:flex; align-items:center; gap:.35rem;
  border:0; background:transparent; color:inherit;
  font-weight:600; letter-spacing:.02em;
  padding:.2rem .45rem; border-radius:999px; line-height:1; cursor:pointer;
}
.lang-switch .lang-option.active,
.lang-switch .lang-option[aria-pressed="true"]{ background:rgba(86,189,162,.20); }
.lang-switch .divider{ opacity:.7; user-select:none; }

/* PNG flag images */
.lang-switch .flag-img{
  display:inline-block; width:18px; height:12px; border-radius:2px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.12); vertical-align:middle;
  margin-right:.15rem; margin-left:.15rem;
}
.lang-switch .code{ font-variant: small-caps; }

/* Card/product tidy & WA icon */
.card.product{ gap:.75rem; }
.product-body{ gap:.5rem; }
.product-food .badge{ align-self:flex-start; }
.social a{ display:inline-flex; align-items:center; line-height:1; text-decoration:none; }
.social a:hover{ opacity:.85; }

/* Product splash */
.product-food{ background-image: radial-gradient(40% 40% at 80% 0, rgba(86,189,162,.12), transparent 60%); }

/* ---------------- Callout ---------------- */
.callout{
  margin: 2rem 11% 0% 11%;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(35,147,161,.08), rgba(86,189,162,.08));
  border: 1px solid rgba(35,147,161,.25);
  box-shadow: var(--shadow);
}
.callout a{ font-weight: 700; text-decoration: underline; }
.subhead{ margin: 2rem 0 .6rem; }