/*
  CoCo King -- "Island Noon".

  Bright coastal, not the dark-green night market it replaced and not the third
  cream-and-rounded-cards site in this repo. Structure still separates it from
  Smart Cap and Soft Edge:

    ground     cool shell white with ocean-blue bands, not warm cream
    geometry   hard 2px edges and square corners, not pill radii
    type       Anton, a condensed poster face, not another geometric sans

  Palette is the fruit against the coast: coconut orange as the warm accent,
  ocean and lagoon blue as the structure, white sand as the ground. Blue is
  load-bearing here and appears in neither of the other two storefronts.

  Contrast was measured before the palette was fixed, not after. Against the
  shell ground: ink 13.3:1, ocean 5.4:1, muted 5.0:1, coco-text 4.7:1. Raw
  --coco (2.2:1) and --lagoon (2.8:1) are fills and must never carry text.

  One stylesheet on purpose: three pages, so splitting it would add requests and
  indirection without buying auditability.
*/

:root {
  --shell: #f2f9fa;
  --shell-2: #e7f3f5;
  --white: #ffffff;
  --ink: #0f2e3d;

  --ocean: #0a6e92;
  --deep: #073f55;
  --lagoon: #1aa3c4;

  --coco: #ff8a3d;
  /* --coco is a fill at 2.2:1. Text uses this cut: 4.69 on shell, 5.0 on white. */
  --coco-text: #a85b28;
  /* Display sizes only (3.22:1). Small text must use --coco-text. */
  --coco-display: #d17132;
  --sun: #ffc94a;
  /* --sun is 3.75:1 on --ocean, short for small text. This pale cut is 4.61. */
  --sun-pale: #ffe4a3;

  /* 68% ink on shell measures 4.97:1. */
  --muted: color-mix(in srgb, var(--ink) 68%, var(--shell));
  --rule: rgba(15, 46, 61, 0.16);
  --rule-strong: rgba(15, 46, 61, 0.32);

  --font-display: "Anton", "Haettenschweiler", "Impact", sans-serif;
  --font-body: "Karla", "Segoe UI", sans-serif;

  --page-margin: 22px;
  --page-width: 1240px;
  --content-max: min(calc(100vw - var(--page-margin) * 2), max(var(--page-width), 74vw));
  --gutter: max(var(--page-margin), calc((100vw - var(--content-max)) / 2));

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--shell);
}

body {
  position: relative;
  min-width: 20rem;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--shell);
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Grain. One tiled SVG turbulence over everything, low opacity, non-blocking.
   This is what keeps the flat dark fills from reading as generic dark mode. */
body::before {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  opacity: 0.16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
  min-width: 0;
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 1rem;
  left: 1rem;
  padding: 0.8rem 1.2rem;
  color: var(--ink);
  background: var(--sun);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Type ------------------------------------------------------------------
   Anton only ever appears in caps. It is a poster face: correct for statement
   lines and numbers, wrong for anything you have to read a paragraph of. */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.94;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
}

h2 {
  font-size: clamp(2.2rem, 5.4vw, 4rem);
}

h3 {
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

.eyebrow {
  margin: 0 0 0.9rem;
  color: var(--coco-text);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.deck {
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.05rem;
}

/* --- Chrome ---------------------------------------------------------------- */

.announcement {
  position: relative;
  z-index: 30;
  display: flex;
  overflow: hidden;
  padding: 0.6rem 0;
  background: var(--coco);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Marquee: the one piece of ambient motion. The track is duplicated in markup
   so the loop has no visible seam. */
.announcement__track {
  display: flex;
  flex-shrink: 0;
  gap: 2.5rem;
  padding-right: 2.5rem;
  animation: marquee 30s linear infinite;
}

.announcement p {
  margin: 0;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

.site-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--shell);
}

.wordmark {
  display: grid;
  gap: 0.1rem;
  text-decoration: none;
}

.wordmark strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.wordmark small {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
}

.site-nav a {
  position: relative;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--coco);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* --- Buttons: hard edges, no radius ---------------------------------------- */

.button {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.button:hover:not(:disabled) {
  color: var(--white);
  background: var(--ink);
}

.button--king {
  border-color: var(--coco);
  background: var(--coco);
  color: var(--ink);
}

.button--king:hover:not(:disabled) {
  border-color: var(--sun);
  background: var(--sun);
  color: var(--ink);
}

.button--sun {
  border-color: var(--sun);
  background: var(--sun);
  color: var(--ink);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Sections -------------------------------------------------------------- */

.band {
  position: relative;
  z-index: 2;
  padding: clamp(3.2rem, 7vw, 6rem) var(--gutter);
}

.band--raised {
  background: var(--white);
  border-block: 1px solid var(--rule);
}

/* Reversed ocean band. White on --ocean measures 5.74:1; the eyebrow uses
   --sun at 3.75:1, which clears the large-text bar only, so it stays at the
   small-caps size it is set at and never carries body copy. */
.band--ocean {
  background: var(--ocean);
  color: var(--white);
}

.band--ocean .eyebrow {
  color: var(--sun-pale);
}

.band--ocean .deck,
.band--ocean .benefits p {
  color: rgba(255, 255, 255, 0.88);
}

.band--ocean .benefits,
.band--ocean .benefits li {
  border-color: rgba(255, 255, 255, 0.26);
}

.band--king {
  background: var(--coco);
  color: var(--ink);
}

.band--king .eyebrow {
  color: var(--ink);
}

.band--king .deck {
  color: rgba(15, 46, 61, 0.84);
}

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head p {
  margin: 0.9rem 0 0;
}

/* --- Hero: asymmetric, headline overlaps the photograph -------------------- */

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(1.4rem, 3vw, 2.8rem);
  align-items: start;
  max-width: calc(70rem + var(--gutter) * 2);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(2.6rem, 5vw, 4rem);
  margin-inline: auto;
}

/* The headline spans both columns, then the buy panel and the photograph sit
   side by side beneath it. Stacking all three in one column made the left side
   roughly twice the height of the right and left a large hole bottom-right. */
.hero__intro {
  grid-column: 1 / -1;
  max-width: 46rem;
}

.hero__media {
  position: relative;
  grid-column: 2;
}

@media (max-width: 940px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .hero__copy,
  .hero__media {
    grid-row: auto;
    grid-column: auto;
  }
}

/* Crop biased low. The source frames a third-party brand on the subject's
   shirt across the top; the pour, the nut and the jug are what the shot is
   for, so the crop keeps those and drops the logo. */
.hero__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 86%;
  filter: saturate(1.08) contrast(1.04);
}

.hero h1 {
  margin-bottom: 1.2rem;
}

.hero h1 em {
  display: block;
  color: var(--coco-display);
  font-style: normal;
}

.hero__badge {
  position: absolute;
  top: -1.1rem;
  left: -1.1rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-11deg);
}

/* --- Buy panel ------------------------------------------------------------- */

.buy {
  display: grid;
  grid-column: 1;
  max-width: 23rem;
  gap: 1rem;
  padding: clamp(1.3rem, 3vw, 1.8rem);
  border: 2px solid var(--rule-strong);
  background: var(--white);
}

.buy__price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: baseline;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.buy__price strong {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

.buy__price span {
  color: var(--muted);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field {
  display: grid;
  gap: 0.6rem;
}

.field > .label {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.field > .label strong {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.choice {
  padding: 0.55rem 1.05rem;
  border: 2px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.choice:hover {
  border-color: var(--ink);
}

.choice[aria-pressed="true"] {
  border-color: var(--sun);
  background: var(--sun);
  color: var(--ink);
}

.plan {
  display: grid;
  gap: 0.5rem;
}

.plan__option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 2px solid var(--rule);
  background: transparent;
  color: inherit;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease;
}

.plan__option[aria-pressed="true"] {
  border-color: var(--coco);
  background: rgba(255, 138, 61, 0.16);
}

.plan__dot {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.plan__option[aria-pressed="true"] .plan__dot {
  border-color: var(--coco);
}

.plan__option[aria-pressed="true"] .plan__dot::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--coco);
}

.plan__body {
  display: grid;
  gap: 0.1rem;
}

.plan__body strong {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.plan__body span {
  color: var(--muted);
  font-size: 0.86rem;
}

.plan__save {
  padding: 0.2rem 0.6rem;
  background: var(--sun);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.buy .button {
  width: 100%;
}

.mock-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.trust-row li {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Benefits: ruled columns, not floating cards --------------------------- */

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.benefits li {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1.7rem 1.4rem 1.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.benefits li + li {
  padding-left: 1.4rem;
  border-left: 1px solid var(--rule);
}

.band--king .benefits,
.band--king .benefits li {
  border-color: rgba(15, 46, 61, 0.26);
}

.benefits p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
}

.band--king .benefits p {
  color: rgba(15, 46, 61, 0.84);
}

/* --- Product grid: hairline mesh, no gaps ---------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--rule);
  background: var(--rule);
}

@media (max-width: 1100px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--shell-2);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
  transition: transform 500ms var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__flag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.3rem 0.7rem;
  background: var(--sun);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem 1.3rem;
}

.card__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.card__price {
  margin: 0.5rem 0 0;
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.footnote {
  max-width: 66ch;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.band--king .footnote {
  color: rgba(15, 46, 61, 0.8);
}

/* --- Split ----------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}

.split img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(1.06);
}

/* --- Wholesale ------------------------------------------------------------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.tier {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.6rem 1.4rem;
  background: var(--white);
}

.tier--featured {
  background: var(--shell-2);
  box-shadow: inset 0 3px 0 var(--coco);
}

.tier__qty {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tier__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
}

.tier__price span {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.tier ul {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 0 0;
  margin: 0.4rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  color: var(--muted);
  font-size: 0.88rem;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table caption {
  padding-bottom: 0.9rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.spec-table th,
.spec-table td {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.spec-table th {
  width: 38%;
  padding-right: 1rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.table-wrap {
  overflow-x: auto;
}

/* --- Enquiry --------------------------------------------------------------- */

.enquiry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 2px solid var(--rule-strong);
  background: var(--white);
}

.enquiry label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.enquiry input,
.enquiry select,
.enquiry textarea {
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.enquiry input::placeholder,
.enquiry textarea::placeholder {
  color: var(--muted);
}

.enquiry input:focus-visible,
.enquiry select:focus-visible,
.enquiry textarea:focus-visible {
  border-color: var(--sun);
}

.enquiry__wide {
  grid-column: 1 / -1;
}

/* --- Map ------------------------------------------------------------------- */

.map-figure {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  margin: 0;
}

.map-figure svg,
.map-figure img {
  width: 100%;
  max-width: 27rem;
  height: auto;
}

.origin-secondary,
.section-action,
.form-status {
  margin-top: 1.2rem;
}

.form-errors {
  color: var(--error, #9b2c1f);
}

.map-figure figcaption {
  max-width: 44ch;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

/* --- Banner: full-bleed photo under a heavy vignette ----------------------- */

.banner {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 48vw, 34rem);
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  text-align: center;
}

.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1);
}

/* Radial plus linear: the radial keeps the centre readable, the linear stops
   the top and bottom edges going bright where the sky or sand catches light. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(15, 46, 61, 0.36), rgba(15, 46, 61, 0.88)),
    linear-gradient(to bottom, rgba(15, 46, 61, 0.62), rgba(15, 46, 61, 0.86));
}

.banner__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.banner .eyebrow {
  color: var(--sun);
}

.banner p {
  margin: 1rem auto 0;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
}

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 1.8rem;
  border-top: 3px solid var(--coco);
  background: var(--deep);
  color: var(--white);
}

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

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

.footer-heading {
  margin: 0 0 0.9rem;
  color: var(--sun);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-word strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-copy {
  margin: 0.6rem 0 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
}

.footer-links {
  display: grid;
  gap: 0.4rem;
  font-size: 0.92rem;
}

/* Padded to clear a 24px target; the bare links measured 23.99px. */
.footer-links a {
  display: inline-block;
  padding-block: 0.15rem;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding-top: 1.6rem;
  margin-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-base p {
  margin: 0;
}

/* --- Bag drawer ------------------------------------------------------------ */

.bag {
  position: fixed;
  z-index: 120;
  inset: 0;
  pointer-events: none;
}

.bag.is-open {
  pointer-events: auto;
}

.bag__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 46, 61, 0.55);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.bag.is-open .bag__backdrop {
  opacity: 1;
}

.bag__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(24rem, 100vw);
  flex-direction: column;
  border-left: 2px solid var(--coco);
  background: var(--white);
  transform: translateX(100%);
  transition: transform 340ms var(--ease);
}

.bag.is-open .bag__panel {
  transform: translateX(0);
}

.bag__head {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 1.3rem 1.3rem 0.8rem;
}

.bag__head h2 {
  flex: 1;
  font-size: 1.5rem;
}

.bag__tag {
  padding: 0.2rem 0.55rem;
  background: var(--sun);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bag__close {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
}

.bag__note {
  padding: 0 1.3rem;
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.ship-meter {
  display: grid;
  gap: 0.45rem;
  padding: 0 1.3rem 1rem;
}

.ship-meter__text {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ship-meter__track {
  overflow: hidden;
  height: 0.4rem;
  background: var(--shell-2);
}

.ship-meter__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--coco);
  transition: width 420ms var(--ease);
}

.bag__items {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.3rem;
  margin: 0;
  list-style: none;
}

.bag__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.bag__item strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bag__item span {
  color: var(--muted);
  font-size: 0.82rem;
}

.bag__controls {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.bag__controls button {
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
}

.bag__empty {
  padding: 0 1.3rem;
  color: var(--muted);
}

.bag__foot {
  display: grid;
  gap: 0.7rem;
  padding: 1.2rem 1.3rem 1.4rem;
  border-top: 1px solid var(--rule);
}

.bag__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.bag__subtotal strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
}

/* --- Consent --------------------------------------------------------------- */

.consent {
  position: fixed;
  z-index: 130;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: min(23rem, calc(100vw - 2rem));
  padding: 1.2rem 1.3rem;
  border: 2px solid var(--coco);
  background: var(--white);
}

.consent.is-visible {
  display: block;
}

.consent p {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.consent__actions .button {
  flex: 1;
  min-height: 2.7rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.74rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .announcement__track {
    animation: none;
  }
}

/* --- Coconut comparison ----------------------------------------------------
   Three equal columns of photo over a fact list. The king column is flagged
   with the accent so the point of the comparison is visible at a glance. */

.types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--rule);
  background: var(--rule);
}

@media (max-width: 900px) {
  .types {
    grid-template-columns: minmax(0, 1fr);
  }
}

.type {
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.type > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.type--king {
  border-top: 4px solid var(--coco);
}

.type__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.3rem 1.4rem 1.5rem;
}

.type__body > .type__tag {
  margin: 0;
  color: var(--ocean);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.type__body > .type__tag--king {
  color: var(--coco-text);
}

.type__body > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.type dl {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.9rem;
  margin: auto 0 0;
  border-top: 1px solid var(--rule);
}

.type dl div {
  display: grid;
  gap: 0.15rem;
}

.type dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.type dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}