:root {
  --deep: #052a40; --abyss: #031a2b; --sea: #0b7d94; --aqua: #5fe0e4; --foam: #f4fbfb;
  --ink: #0a2433; --muted: #4c6673; --line: #cfe0e3; --err: #b3261e;
  --display: "Sora", system-ui, sans-serif; --body: "Manrope", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--abyss); }
body { margin: 0; color: var(--foam); font: 17px/1.6 var(--body); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: var(--sea); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; width: 100%; }
.narrow { max-width: 720px; padding-top: 48px; padding-bottom: 80px; }
.skip { position: absolute; left: -999px; z-index: 60; }
.skip:focus { left: 8px; top: 8px; background: #fff; color: var(--ink); padding: 8px; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }

/* The scene behind the page, and the layer of moving light in front of it */
.scene-fallback { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -3; background: linear-gradient(#0e7f96, #05405e 45%, #031a2b); }
#ocean { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; display: block; }
#wash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 40; display: block; pointer-events: none; }

/* Header */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 10; color: #fff; }
.deep .top { position: static; background: rgba(3, 26, 43, .4); }
.top-in { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; padding-bottom: 16px; gap: 16px; }
.top nav { display: flex; gap: 22px; align-items: center; }
.top nav a { color: #fff; text-decoration: none; font-weight: 700; text-shadow: 0 1px 10px rgba(3, 26, 43, .6); }
.sound { width: 36px; height: 36px; padding: 7px; border: 0; border-radius: 50%; background: rgba(3, 26, 43, .45); color: #fff; cursor: pointer; display: block; }
.sound:hover { background: rgba(3, 26, 43, .7); }
.sound svg { display: block; width: 100%; height: 100%; }
.sound .sound-on { display: none; }
.sound.is-on .sound-on { display: inline; }
.sound.is-on .sound-off { display: none; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cart-count { background: var(--aqua); color: var(--ink); border-radius: 99px; padding: 0 7px; font-size: .78rem; font-weight: 700; text-shadow: none; }
.cart-count[hidden] { display: none; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin: 0; }
.logo-mark { color: rgba(3, 26, 43, .45); width: 38px; height: 38px; flex: none; display: block; }
.logo-mark svg { display: block; width: 100%; height: 100%; }
.logo-mark .wave { stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.logo-word { display: flex; flex-direction: column; font-family: var(--display); line-height: 1.02; text-shadow: 0 1px 10px rgba(3, 26, 43, .5); }
.logo-word b { font-size: 1.16rem; font-weight: 700; letter-spacing: -.025em; }
.logo-word span { font-size: .68rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; margin-top: 3px; }

/* Hero: split at the waterline, which ocean.js draws at 58% of this height */
.hero { height: 100vh; height: 100svh; min-height: 540px; display: grid; grid-template-rows: 58% 42%; }
.hero-sky { display: flex; align-items: flex-end; padding-bottom: 7vh; }
.hero-sky h1 { color: #fff; max-width: 13.5em; margin: 0; text-shadow: 0 2px 26px rgba(3, 26, 43, .55), 0 1px 3px rgba(3, 26, 43, .4); }
.hero-sea { padding-top: 6vh; }
.lede { font-size: clamp(1.02rem, 1.7vw, 1.22rem); max-width: 30em; margin: 0 0 22px; color: #fff; text-shadow: 0 1px 12px rgba(3, 40, 60, .6); }
.no-gl .hero { background: url("https://images.unsplash.com/photo-1778402947157-73382ccc28ec?q=75&auto=format&fit=crop&w=1920") center top / 100% auto no-repeat; }

.btn { display: inline-block; background: #fff; color: var(--ink); border: 2px solid #fff; border-radius: 99px; padding: 11px 26px; font: 700 1rem var(--body); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--aqua); border-color: var(--aqua); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; border-color: var(--sea); color: var(--sea); }
.btn.ghost:hover { background: var(--sea); color: #fff; }
.panel .btn { background: var(--deep); border-color: var(--deep); color: #fff; }
.panel .btn:hover { background: var(--sea); border-color: var(--sea); }
.panel .btn.ghost { background: transparent; border-color: var(--deep); color: var(--deep); }
.panel .btn.ghost:hover { background: var(--deep); color: #fff; }

/* The shop, floating in deep water */
.shop { padding: 12vh 0 96px; }
.shop h2 { color: #fff; text-shadow: 0 2px 20px rgba(3, 26, 43, .5); margin-bottom: 28px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px; }
.card { background: var(--foam); color: var(--ink); border-radius: 18px; padding: 12px 12px 16px; text-decoration: none; display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(2, 18, 32, .35); animation: float 7s ease-in-out infinite; transition: box-shadow .2s; }
.card:nth-child(3n+2) { animation-delay: -2.3s; animation-duration: 8s; }
.card:nth-child(3n) { animation-delay: -4.6s; animation-duration: 9s; }
.card:hover { box-shadow: 0 0 0 3px var(--aqua), 0 18px 40px rgba(2, 18, 32, .35); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.card-img, .main-img { aspect-ratio: 1; background: #fff; border-radius: 12px; overflow: hidden; display: flex; }
.card-img img, .main-img img { width: 100%; height: 100%; object-fit: contain; }
.card h3 { font-size: 1.02rem; font-weight: 600; margin: 14px 6px 6px; flex: 1; letter-spacing: -.01em; }
.card .price { margin: 0 6px; }
.price { font-weight: 700; margin: 0; }
.price.big { font-size: 1.6rem; font-family: var(--display); }
.placeholder { width: 100%; display: flex; align-items: center; justify-content: center; color: #bcd6da; }
.placeholder .razor { height: 70%; }
.empty { background: rgba(3, 26, 43, .5); border-radius: 18px; padding: 48px 24px; text-align: center; color: #fff; }

.climate { padding: 0 0 56px; }
.climate p { margin: 0; max-width: 40em; font: 600 clamp(1.1rem, 2vw, 1.4rem)/1.4 var(--display); letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 14px rgba(3, 26, 43, .5); }
.climate a { color: var(--aqua); }
.promises { padding: 8px 0 90px; }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.promise-grid h3 { font-size: 1.12rem; margin-bottom: 4px; color: #fff; }
.promise-grid p { margin: 0; color: #cfe6ea; overflow-wrap: anywhere; }
.promise-grid a { color: var(--aqua); }

/* Readable panels on the inner pages */
.panel { background: var(--foam); color: var(--ink); border-radius: 18px; padding: 28px; box-shadow: 0 18px 40px rgba(2, 18, 32, .35); }
.panel a:not(.btn) { color: var(--sea); }
.panel h1 { color: var(--deep); }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 40px; padding-bottom: 80px; align-items: start; }
.product h1 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.gallery-panel { padding: 14px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb { width: 64px; height: 64px; padding: 2px; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.ship-note { color: var(--muted); font-size: .95rem; }
.buy-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0 8px; }
.buy-form label { font-weight: 700; }
select { font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.form-msg { min-height: 1.5em; margin: 8px 0; color: var(--muted); }
[data-checkout-msg] { color: var(--err); }
.notice { background: #dff1f3; padding: 10px 14px; border-radius: 8px; }
.desc { margin-top: 20px; }
.facts { padding-left: 20px; }
.facts li { margin-bottom: 6px; }

.cart-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-row img, .cart-noimg { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.cart-name a { display: block; margin-bottom: 6px; font-weight: 500; }
.cart-total { display: flex; justify-content: space-between; font-size: 1.2rem; padding: 16px 0 4px; }
.link { background: none; border: 0; padding: 0 0 0 8px; color: var(--sea); text-decoration: underline; font: inherit; cursor: pointer; }
.prose h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* The sea floor */
.foot { background: rgba(2, 16, 28, .72); color: #cfe6ea; padding: 32px 0; position: relative; }
.foot p { margin: 0 0 4px; }
.foot .logo { margin-bottom: 8px; }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-start; }
.foot a { color: #cfe6ea; }
.legal { font-size: .9rem; }
.credit { font-size: .8rem; opacity: .8; }

@media (max-width: 760px) {
  .product { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .promise-grid { grid-template-columns: 1fr; gap: 20px; }
  .panel { padding: 20px; }
  .hero-sky { padding-bottom: 8vh; }
  .hero-sea { padding-top: 5vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { animation: none; }
}