/* Aquatics To Your Door: storefront design system
   Light pages, navy structure, cyan accent, fish photography carries the
   colour. Square edges throughout, Archivo for type, and the shop's own
   generated icon family (see glyph() in helpers.php). All three are there to
   stop the shop reading as the same template as a competitor running Inter,
   rounded cards and stock line icons. */

/* ---------- Type ----------
   Archivo, self-hosted: one variable file per script covers every weight and
   width the site uses. Latin first, so a British shop loads one file. */
@font-face {
	font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
	src: url(../fonts/archivo-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
	src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
	--navy: #00427c;
	--navy-deep: #022c52;
	--navy-ink: #011d38;
	--cyan: #2db4db;
	--cyan-dark: #0e7491;
	--cyan-light: #7fd0e8;
	--aqua-tint: #eaf6fa;
	--aqua-line: #cfe8f2;
	--canvas: #f7fafc;
	--white: #ffffff;
	--ink: #12283c;
	--ink-soft: #44586c;
	--ink-faint: #55687c;
	--line: #dfe7ee;
	--line-soft: #ecf2f7;
	--sale: #d92b2b;
	--gold: #f0b429;
	--stock-in: #157a3f;

	--amber: #e59a0c;
	--amber-tint: #fff6e5;

	/* Square, everywhere. Kept as tokens so nothing reintroduces a curve by
	   reaching for the old names. */
	--radius: 0;
	--radius-sm: 0;
	--radius-lg: 0;
	/* Hard offset shadows rather than soft blurs: a square edge with a soft
	   glow under it reads as a rounded card that lost its corners. */
	--shadow: 0 1px 0 rgb(2 44 82 / .06), 0 10px 24px -18px rgb(2 44 82 / .35);
	--shadow-lift: 6px 6px 0 var(--aqua-line);

	--container: 1360px;
	--gutter: clamp(16px, 4vw, 32px);
	--font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	/* Headings run a touch wide on Archivo's width axis. */
	--wide: 112%;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* A link to #box or #choose stops below the sticky header rather than under
   it: the header's height is measured by site.js into --header-h, with a
   fallback close to the desktop header for the moment before it runs. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, 150px) + 24px); }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}
@media (min-width: 981px) { body { font-size: 17px; } }
img, :is(svg, .gi), video { max-width: 100%; display: block; }
img { height: auto; }
/* Base size for inline icons. Every specific rule below overrides this, but
   without it an unstyled inline SVG expands to fill its container. */
:is(svg, .gi) { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- The shop's own icons ----------
   Traced vector artwork used through a sprite (glyph() in helpers.php); the
   path is filled with currentColor, so an icon is whatever colour the text
   around it is. */
svg.gi { display: inline-block; vertical-align: middle; overflow: visible; }
a { color: var(--cyan-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.12; font-weight: 800; font-stretch: var(--wide); letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.8vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 999; }
.skip:focus { left: 0; }

.wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1600px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
/* Image wipe: the photo uncovers itself as the section arrives */
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.7,0,.2,1); }
.wipe.in { clip-path: inset(0 0 0 0); }
/* Masked heading: lines rise out from behind their own edge */
/* Room inside the mask on every side, taken back with a matching negative
   margin, so the wide Archivo capitals and descenders are never shaved. */
.mask { overflow: hidden; display: block; padding: .12em .12em .2em; margin: -.12em -.12em .3em; }
.mask > span { display: block; transform: translateY(105%); transition: transform .85s cubic-bezier(.2,.8,.25,1); }
.mask.in > span { transform: none; }
/* No script, no reveals: everything simply shows. */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .wipe { clip-path: none; }
.no-js .mask > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal, .wipe, .mask > span { transition: none !important; }
	.reveal { opacity: 1; transform: none; }
	.wipe { clip-path: none; }
	.mask > span { transform: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Buttons ---------- */
/* Square slabs with a darker lip along the bottom edge. The primary is cyan
   with navy type: white on this cyan measured 2.4:1 and failed contrast. On
   hover the button turns navy and the lip turns cyan, rather than the whole
   thing floating up on a soft shadow. */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 24px; border-radius: 0; border: 2px solid transparent;
	font-weight: 700; font-size: 15px; font-stretch: 106%; letter-spacing: .01em;
	cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap;
	background: var(--cyan); color: var(--navy-ink);
	box-shadow: inset 0 -3px 0 rgb(1 29 56 / .22);
	transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.btn:hover { background: var(--navy); color: #fff; text-decoration: none; box-shadow: inset 0 -3px 0 var(--cyan); }
.btn :is(svg, .gi) { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-navy { background: var(--navy); color: #fff; box-shadow: inset 0 -3px 0 var(--cyan); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-white { background: #fff; color: var(--navy); box-shadow: inset 0 -3px 0 var(--cyan); }
.btn-white:hover { background: var(--cyan); color: var(--navy-ink); box-shadow: inset 0 -3px 0 var(--navy); }
.btn-ghost { background: transparent; border-color: rgb(255 255 255 / .6); color: #fff; box-shadow: none; }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--navy); box-shadow: none; }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); box-shadow: none; }
.btn-outline:hover { background: var(--navy); color: #fff; box-shadow: inset 0 -3px 0 var(--cyan); }
.btn-lg { padding: 16px 30px; font-size: 16.5px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.announce {
	background: var(--navy-deep); color: #cfe0ee; font-size: 13px;
	padding: 8px 0;
}
.announce .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.announce .spacer { flex: 1 1 auto; }
.announce a { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.announce a:hover { text-decoration: underline; color: #fff; }
.announce .star { color: var(--gold); }
/* The hours are whatever the shop writes in Settings, and the full "Monday to
   Friday" wording does not fit beside the rest on a narrower screen. They are
   in the footer and the menu as well. */
@media (max-width: 1199px) { .announce .announce-hours { display: none; } }

.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-main { display: flex; align-items: center; gap: 22px; padding-block: 14px; }
/* The customer's own logo. Fixed height, width follows the artwork, so the
   400x130 original is never distorted. */
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 48px; width: auto; }


/* margin-left:auto, or the icons sit wherever the search box happens to end
   rather than at the right edge of the header. */
.headlinks { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; }

.site-nav { background: var(--navy); position: relative; }

/* Every rule here is scoped to the bar itself with >, never to .site-nav as a
   whole. The panel that drops out of it is inside .site-nav and its own
   container also carries .wrap, so an unscoped `.site-nav .wrap { display:flex }`
   turned the panel into a flex row and laid its footer out beside the columns
   instead of under them. */
.site-nav > .wrap { display: flex; align-items: stretch; gap: 4px; }
.site-nav > .wrap > a,
.site-nav .nav-item > a {
	color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
	padding: 13px 16px; display: inline-flex; align-items: center; gap: 6px;
}
.site-nav > .wrap > a:hover, .site-nav .nav-item > a:hover, .site-nav .nav-item > a.on {
	background: rgb(255 255 255 / .12); color: #fff;
}
.site-nav > .wrap > a > :is(svg, .gi), .site-nav .nav-item > a > :is(svg, .gi) { width: 14px; height: 14px; opacity: .8; }
.site-nav > .wrap > .spacer { flex: 1 1 auto; }
.site-nav > .wrap > .accent { color: var(--gold); }
.site-nav > .wrap > .accent:hover { color: var(--gold); }

/* The chevron lies on its side to say "this opens", and turns when it has. */
.nav-item { position: static; display: flex; }
/* Drawn in CSS rather than as an icon in the link, so the link is one line of text. */
.nav-item.has-panel > a::after {
	content: ''; width: 7px; height: 7px; margin: -4px 0 0 2px; opacity: .8;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .18s ease;
}
.nav-item.is-open > a { background: rgb(255 255 255 / .16); }
.nav-item.is-open > a::after { transform: rotate(-135deg); margin-top: 4px; }

/* ---------- The panel that drops out of the menu ---------- */

/* Full width of the window rather than of the item, because forty nine ranges
   do not fit under one word. Positioned against .site-nav, which is the one
   made relative above. */
.megapanel {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
	background: #fff; border-bottom: 3px solid var(--cyan);
	box-shadow: 0 24px 48px -24px rgb(1 29 56 / .45);
}
.megapanel[hidden] { display: none; }
.megapanel-inner { display: block; padding-block: 26px 22px; }

.mega-cols { columns: 5; column-gap: 30px; }
@media (max-width: 1240px) { .mega-cols { columns: 4; } }
@media (max-width: 1040px) { .mega-cols { columns: 3; } }

/* A group is a range and whatever is filed inside it. It must never be split
   down the middle by a column break. */
.mega-group { break-inside: avoid; margin-bottom: 14px; }
.mega-head {
	display: flex; align-items: baseline; gap: 8px; padding: 4px 0;
	color: var(--navy); font-weight: 700; font-size: 14.5px; line-height: 1.35;
	text-decoration: none;
}
.mega-head:hover { color: var(--cyan-dark); text-decoration: underline; }
.mega-head span { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }
.mega-sub {
	display: block; padding: 3px 0 3px 12px; text-decoration: none;
	color: var(--ink-soft); font-weight: 500; font-size: 13.5px;
	border-left: 2px solid var(--line);
}
.mega-sub:hover { color: var(--navy); border-left-color: var(--cyan); }

.mega-foot {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.mega-foot .muted { color: var(--ink-faint); font-size: 13.5px; }
.mega-foot .spacer { flex: 1 1 auto; }
.mega-foot .btn { padding: 9px 18px; }
.mega-index {
	color: var(--cyan-dark); font-weight: 700; font-size: 14px; text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
}
.mega-index:hover { color: var(--navy); text-decoration: underline; }
.mega-index :is(svg, .gi) { width: 15px; height: 15px; }

/* ---------- The drawer on a phone ---------- */

.nav-scrim {
	position: fixed; inset: 0; z-index: 90; background: rgb(1 29 56 / .55);
}
.nav-scrim[hidden] { display: none; }

.mobile-nav {
	position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
	width: min(92vw, 400px); background: #fff; display: flex; flex-direction: column;
	box-shadow: 12px 0 40px -18px rgb(1 29 56 / .6);
	animation: navin .22s ease;
}
.mobile-nav[hidden] { display: none; }
@keyframes navin { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .mobile-nav { animation: none; } }

.mobile-nav-head {
	display: flex; align-items: center; gap: 12px; padding: 15px 18px;
	background: var(--navy); color: #fff; font-weight: 800; font-size: 16px;
}
.mobile-nav-head .iconbtn {
	margin-left: auto; background: rgb(255 255 255 / .14); border: 0; color: #fff;
	width: 34px; height: 34px; border-radius: 0; display: grid; place-items: center; cursor: pointer;
}
.mobile-nav-head :is(svg, .gi) { width: 18px; height: 18px; }

.mobile-nav-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.mobile-section > summary,
.mobile-top {
	display: flex; align-items: center; gap: 10px; padding: 14px 18px;
	border-bottom: 1px solid var(--line-soft); color: var(--navy);
	font-weight: 700; font-size: 15.5px; text-decoration: none; cursor: pointer;
	list-style: none;
}
.mobile-section > summary::-webkit-details-marker { display: none; }
.mobile-section > summary::after {
	content: ""; margin-left: 10px; width: 9px; height: 9px; flex: 0 0 auto;
	border-right: 2px solid var(--cyan-dark); border-bottom: 2px solid var(--cyan-dark);
	transform: rotate(45deg); transition: transform .18s ease;
}
.mobile-section[open] > summary::after { transform: rotate(-135deg); }
.mobile-section[open] > summary { background: var(--aqua-tint); }
.mobile-section > summary > span,
.mobile-top > span { margin-left: auto; font-size: 12px; color: var(--ink-faint); font-weight: 700; }

.mobile-all {
	display: flex; align-items: center; gap: 6px; padding: 11px 18px;
	background: var(--navy); color: #fff !important; font-weight: 700; font-size: 14px;
	text-decoration: none;
}
.mobile-all :is(svg, .gi) { width: 15px; height: 15px; }
.mobile-link {
	display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 28px;
	border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 14.5px;
	text-decoration: none;
}
.mobile-link.deep { padding-left: 42px; color: var(--ink-soft); font-size: 13.5px; }
.mobile-link span { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.mobile-link:active { background: var(--aqua-tint); }

.mobile-nav-foot { padding: 14px 18px; border-top: 1px solid var(--line); background: var(--canvas); }
.mobile-nav-foot span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); }

.navtoggle {
	display: none; background: var(--aqua-tint); border: 0; color: var(--navy);
	width: 40px; height: 40px; border-radius: 0; place-items: center; cursor: pointer;
	flex: 0 0 auto;
}
.navtoggle :is(svg, .gi) { width: 20px; height: 20px; }
/* Mobile header. It is sticky, so it has to stay compact: brand and account
   icons share one row, search sits under them, nav scrolls sideways. Left to
   wrap freely it took over half the viewport and never gave it back. */
@media (max-width: 980px) {
	.announce { font-size: 12px; padding: 7px 0; }
	.announce .wrap { gap: 20px; justify-content: center; }
	.announce .wrap > span { display: none; }
	.header-main { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
	.brand img { height: 38px; }
	.headlinks { margin-left: auto; gap: 0; }
	.headsearch { order: 3; flex-basis: 100%; max-width: none; }
	/* A mega panel needs a pointer and room, and a phone has neither. The strip
	   stays as a shortcut to the six ranges, and everything underneath them
	   lives behind the burger instead. */
	.navtoggle { display: grid; }
	.site-nav .wrap { overflow-x: auto; scrollbar-width: none; }
	.site-nav .wrap::-webkit-scrollbar { display: none; }
	.site-nav a { padding: 10px 12px; font-size: 14px; white-space: nowrap; }
	.site-nav .spacer { display: none; }
	.site-nav .nav-item.has-panel > a::after { display: none; }
	.megapanel { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media picture { display: contents; }
.hero-media::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgb(2 29 56 / .95) 0%, rgb(2 29 56 / .82) 42%, rgb(2 29 56 / .25) 72%, rgb(2 29 56 / .05) 100%);
}
/* padding-block, not padding: this element is also the .wrap, and a two value
   padding wiped out its side gutter, so on a phone the hero copy touched the edge. */
.hero-inner { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 88px); }
.hero h1 { color: #fff; max-width: 21ch; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--cyan-light); }
.hero .lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: #cfe0ee; max-width: 68ch; margin-bottom: 26px; }
.hero-search { display: flex; gap: 10px; max-width: 560px; margin-bottom: 18px; }
.hero-search input {
	flex: 1 1 auto; height: 54px; border: 0; border-radius: 0; padding: 0 22px;
	font-size: 16px; background: #fff; color: var(--ink);
}

/* ---------- Selling points ----------
   Four of the shop's own illustrations, each in a tinted square marked with
   viewfinder corners: the same device as "choose your exact fish", used as
   the site's signature rather than a stock tick in a circle. */
.trustbar { background: #fff; border-bottom: 1px solid var(--line); }
.trustbar .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 0; }
.trust { display: flex; align-items: center; gap: 16px; padding: 20px 20px; border-left: 1px solid var(--line); min-width: 0; }
.trust:first-child { border-left: 0; padding-left: 0; }
.trust-art { position: relative; flex: 0 0 auto; width: 74px; height: 74px; display: grid; place-items: center; background: var(--aqua-tint); color: var(--navy); }
.trust-art::before, .trust-art::after { content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--cyan); }
.trust-art::before { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.trust-art::after { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }
.trust-art .gi { width: 60px; height: 60px; display: block; }
.trust b { display: block; color: var(--navy); font-size: 15px; font-weight: 800; font-stretch: 108%; line-height: 1.25; margin-bottom: 3px; }
/* The description line only. As a bare `.trust span` this also matched the
   icon tile, which is a span too, and overrode its display:grid, so every
   illustration sat small in the top left corner of its square. */
.trust > span:not(.trust-art) > span { display: block; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
/* The photographed species take turns on a line of their own, so the item stays
   as short as its neighbours and does not change height as the names change.
   Without the script, or with reduced motion, the whole list reads as text. */
.species.is-cycling { display: block; }
.species-word { display: inline-block; font-weight: 700; color: var(--cyan-dark); }
.species-word.in { animation: species-in .5s cubic-bezier(.2,.7,.3,1); }
@keyframes species-in { from { opacity: 0; transform: translateY(.6em); } }
@media (max-width: 1100px) {
	.trustbar .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trust:nth-child(3) { border-left: 0; padding-left: 0; }
	.trust:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
	.trustbar .wrap { grid-template-columns: minmax(0, 1fr); }
	.trust { border-left: 0; padding: 14px 0; }
	.trust:nth-child(n+2) { border-top: 1px solid var(--line); }
	.trust-art { width: 60px; height: 60px; }
	.trust-art .gi { width: 48px; height: 48px; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(48px, 6vw, 84px) 0; position: relative; }
.section.tint { background: var(--aqua-tint); }
.section.canvas { background: var(--canvas); }
.section.navy { background: var(--navy-deep); color: #fff; }
.section.navy h2, .section.navy h3 { color: #fff; }
.section-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.section-head .grow { flex: 1 1 420px; }
.section-head h2 { margin-bottom: .2em; }
.section-head p { color: var(--ink-soft); font-size: 17px; margin: 0; }
.section.navy .section-head p { color: #b9d2e6; }
.eyebrow {
	display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-dark); margin-bottom: 10px;
}
.section.navy .eyebrow { color: var(--cyan-light); }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; }

/* Decorative water texture so no band is ever flat */
.section.tint::before, .section.canvas::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background:
		radial-gradient(650px 320px at 88% -10%, rgb(45 180 219 / .18), transparent 70%),
		radial-gradient(520px 280px at -8% 110%, rgb(0 66 124 / .10), transparent 70%);
}
.section > .wrap, .section > .wrap-wide { position: relative; z-index: 1; }

/* ---------- Promo pair ---------- */
.promos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.promo {
	position: relative; overflow: hidden; border-radius: 0;
	min-height: 230px; display: flex; align-items: center; color: #fff;
	padding: 32px 34px; text-decoration: none;
}
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, rgb(0 66 124 / .95) 20%, rgb(0 66 124 / .55) 62%, rgb(0 66 124 / .18) 100%); }
.promo.alt::after { background: linear-gradient(95deg, rgb(2 29 56 / .95) 20%, rgb(2 29 56 / .55) 62%, rgb(2 29 56 / .15) 100%); }
.promo .t { position: relative; z-index: 1; max-width: 30ch; }
.promo h3 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: .35em; }
.promo p { color: #d3e5f2; font-size: 15px; margin-bottom: 18px; }
.promo:hover img { transform: scale(1.05); }
.promo img { transition: transform .8s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .promo img { transition: none; } .promo:hover img { transform: none; } }
@media (max-width: 860px) { .promos { grid-template-columns: 1fr; } }

/* ---------- Range grid ---------- */
.ranges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.range {
	position: relative; overflow: hidden; border-radius: 0;
	aspect-ratio: 16 / 10; display: flex; align-items: flex-end; text-decoration: none;
	box-shadow: var(--shadow);
}
.range img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.range::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(2 29 56 / .92) 0%, rgb(2 29 56 / .45) 42%, rgb(2 29 56 / 0) 78%); }
.range .t { position: relative; z-index: 1; padding: 20px 22px; color: #fff; width: 100%; }
.range b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.range span { display: block; font-size: 13.5px; color: #b9d2e6; }
.range:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .range img { transition: none; } .range:hover img { transform: none; } }
@media (max-width: 980px) { .ranges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ranges { grid-template-columns: 1fr; } }

/* ---------- Product cards ----------
   A specimen label rather than the usual rounded card: the category and a
   three-bar stock gauge on one line, the name, then a footer that is joined
   to the card's bottom edge with the price in one cell and the add button
   as a solid block in the other. Offers are a strip across the foot of the
   photograph, not a badge in its corner. */
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.products.cols5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.products.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .products.cols5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .products, .products.cols5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .products, .products.cols5, .products.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.pcard {
	background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column;
	position: relative; min-width: 0;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcard:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--cyan); border-color: var(--navy); }

/* The frame takes the shape of the photograph in it, falling back to a square.
   Forcing every image square showed a band across the middle of a photographed
   koi, which is 820 by 1550: head and tail cut off, on the range whose whole
   promise is that this exact fish is the one you get. */
.pcard-media { position: relative; aspect-ratio: var(--shape, 1); overflow: hidden; background: var(--canvas); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.pcard:hover .pcard-media img { transform: scale(1.06); }

.pcard-strip {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 6px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	background: var(--sale); color: #fff; pointer-events: none;
}
.pcard-strip b { font-weight: 800; letter-spacing: .04em; }
.pcard-strip.out { background: var(--ink-soft); }
.pcard-exact {
	position: absolute; top: 0; left: 0; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 10px 6px 8px; background: var(--navy); color: #fff;
	font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; pointer-events: none;
}
.pcard-exact .gi { width: 18px; height: 18px; color: var(--cyan); }

/* ---------- Temperament frames ----------
   The shop's own colour code from its first site: blue passive community,
   green boisterous community, orange with caution (added 25 September 2026),
   red aggressive, yellow saltwater. A frame drawn over the
   photograph, above the sale strip and the tags, which move inside it so the
   frame runs unbroken on all four sides. The word sits on a tab of the frame,
   because a colour on its own means nothing to a first-time customer or to
   anyone who cannot tell red from green. */
.temper-passive    { --temper: #1a5fc4; --temper-ink: #fff; }
.temper-boisterous { --temper: #17803d; --temper-ink: #fff; }
.temper-with-caution { --temper: #d35f00; --temper-ink: #fff; }
.temper-aggressive { --temper: #c62828; --temper-ink: #fff; }
.temper-saltwater  { --temper: #f5b800; --temper-ink: var(--navy-ink); }
.framed { --fw: 5px; }
.framed::after {
	content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	border: var(--fw) solid var(--temper);
}
.framed .pcard-exact { top: var(--fw); left: var(--fw); }
.framed .pcard-strip { left: var(--fw); right: var(--fw); bottom: var(--fw); }
.temper-tag {
	position: absolute; top: var(--fw, 0); right: var(--fw, 0); z-index: 2; pointer-events: none;
	padding: 5px 9px 6px; background: var(--temper); color: var(--temper-ink);
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
}
.gallery-main.framed { --fw: 7px; }
.gallery-main .temper-tag { font-size: 12.5px; padding: 7px 12px 8px; }
/* The temperament page: the five frames in a row, each round a real fish. */
.temper-key-band { padding-bottom: 0; }
.temper-key { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.temper-key-item { margin: 0; }
.temper-key-frame { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--canvas); --fw: 6px; }
.temper-key-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.temper-key-item figcaption { display: grid; gap: 2px; margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.temper-key-item figcaption b { color: var(--navy); font-size: 16px; }
@media (max-width: 900px) { .temper-key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* On the product page the tab is a link to what the colours mean. */
a.temper-tag { pointer-events: auto; text-decoration: none; }
a.temper-tag:hover, a.temper-tag:focus-visible { color: var(--temper-ink); text-decoration: underline; }

.pcard-body { padding: 13px 15px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
/* A cyan rule draws across the top of the label on hover. Hung off the meta
   row, because the body itself stays unpositioned for the card-wide link. */
.pcard-meta { position: relative; }
.pcard-meta::before {
	content: ''; position: absolute; top: -13px; left: -15px; right: -15px; height: 3px; background: var(--cyan);
	transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.pcard:hover .pcard-meta::before { transform: scaleX(1); }
.pcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 7px; }
.pcard-cat {
	flex: 1 1 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-dark);
	min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-body h3 { font-size: 15px; font-weight: 700; font-stretch: 100%; letter-spacing: -.005em; margin: 0 0 14px; line-height: 1.35; color: var(--navy); }
.pcard-body h3 a { color: inherit; text-decoration: none; }
.pcard-body h3 a:hover { color: var(--cyan-dark); }

/* Three bars, filled to how much is left. */
.stock { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--stock-in); white-space: nowrap; }
.stock .lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.stock .lvl i { width: 3px; background: currentColor; }
.stock .lvl i:nth-child(1) { height: 5px; }
.stock .lvl i:nth-child(2) { height: 8px; }
.stock .lvl i:nth-child(3) { height: 11px; }
.stock.low { color: #8a5600; }
.stock.low .lvl i:nth-child(n+2) { opacity: .25; }
.stock.none { color: var(--ink-faint); }
.stock.none .lvl i { opacity: .3; }

.pcard-foot {
	margin: auto -15px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
	border-top: 1px solid var(--line);
}
.pcard-price { padding: 10px 15px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pcard-price .was { text-decoration: line-through; color: var(--ink-faint); font-size: 12.5px; line-height: 1.2; }
.pcard-price .now { color: var(--navy); font-weight: 800; font-stretch: 108%; font-size: 20px; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pcard-price .was + .now { color: var(--sale); }
.pcard-foot form { display: flex; }
.pcard-add {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 64px;
	padding: 0 16px; border: 0; background: var(--cyan); color: var(--navy-ink); cursor: pointer;
	font-weight: 800; font-size: 14px; font-stretch: 106%;
	transition: background .15s, color .15s;
}
.pcard-add .gi { width: 24px; height: 24px; }
.pcard-add:hover { background: var(--navy); color: #fff; }
.pcard-add[disabled] { background: var(--line-soft); color: var(--ink-faint); cursor: not-allowed; font-size: 12.5px; }
@media (max-width: 420px) {
	.pcard-body { padding: 11px 11px 0; }
	.pcard-foot { margin-inline: -11px; }
	.pcard-price { padding: 9px 11px; }
	.pcard-price .now { font-size: 17px; }
	.pcard-add { min-width: 50px; padding: 0 12px; }
	.pcard-add span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pcard, .pcard-media img, .pcard-meta::before { transition: none; }
	.pcard:hover { transform: none; }
	.pcard:hover .pcard-media img { transform: none; }
}

/* ---------- Split band (media + copy, never a dead column) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.split.top { align-items: start; }
.split.wide-media { grid-template-columns: 1.15fr .85fr; }
.split .media { position: relative; border-radius: 0; overflow: hidden; box-shadow: var(--shadow-lift); }
.split .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split .media.tall img { aspect-ratio: 3 / 4; }
.split .copy p { color: var(--ink-soft); font-size: 17px; }
.section.navy .split .copy p { color: #b9d2e6; }
.split .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
@media (max-width: 900px) { .split, .split.wide-media { grid-template-columns: minmax(0, 1fr); } }

.media-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.media-stack img { width: 100%; border-radius: 0; object-fit: cover; aspect-ratio: 1; box-shadow: var(--shadow); }
.media-stack img:first-child { grid-row: span 2; aspect-ratio: 3 / 4; height: 100%; }

/* Feature list inside a split */
.section.navy .featlist :is(svg, .gi) { color: var(--cyan-light); }
.section.navy .featlist b { color: #fff; }
.section.navy .featlist span { color: #b9d2e6; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { position: relative; border-radius: 0; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.step .t { padding: 18px 20px 22px; }
.step .n {
	position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; border-radius: 0;
	background: var(--cyan); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px;
	box-shadow: 0 4px 12px rgb(2 44 82 / .3);
}
.step b { display: block; color: var(--navy); font-size: 17px; margin-bottom: 5px; }
.step p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Blog cards ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post { border-radius: 0; overflow: hidden; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; text-decoration: none; }
.post:hover { box-shadow: var(--shadow-lift); }
.post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.post:hover img { transform: scale(1.05); }
.post .t { padding: 18px 20px 22px; flex: 1 1 auto; display: flex; flex-direction: column; }
.post .date { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; margin-bottom: 6px; }
.post h3 { font-size: 18px; margin-bottom: 8px; }
.post p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 14px; }
.post .more { margin-top: auto; color: var(--cyan-dark); font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 5px; }
.post .more :is(svg, .gi) { width: 15px; height: 15px; }
.post > div { overflow: hidden; }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .post img { transition: none; } .post:hover img { transform: none; } }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: 13.5px; color: var(--ink-faint); padding: 16px 0; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs span { margin: 0 7px; }

/* ---------- Category page ---------- */
.cat-hero { position: relative; overflow: hidden; background: var(--navy-deep); color: #fff; }
.cat-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, rgb(2 29 56 / .95) 15%, rgb(2 29 56 / .72) 55%, rgb(2 29 56 / .2) 100%); }
.cat-hero .wrap { position: relative; z-index: 1; padding: clamp(34px, 4.5vw, 56px) var(--gutter); }
.cat-hero h1 { color: #fff; margin-bottom: .3em; }
.cat-hero p { color: #cfe0ee; max-width: 68ch; font-size: 17px; margin: 0; }

/* The banner is two columns: the heading and the numbers on the left, the
   range's own words on the right. That half was empty photograph before, and
   the words were in a band underneath that pushed every product below the fold
   on a laptop. */
.cat-hero-inner {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	gap: clamp(24px, 4vw, 60px); align-items: end;
}
@media (max-width: 1100px) {
	.cat-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* Smaller and tighter than body copy, on purpose: six lines of this fit in the
   height the banner was already using for one heading and four numbers. */
.cat-hero-copy { font-size: 14.5px; line-height: 1.62; color: #cfe0ee; }
.cat-hero-copy .catcopy-text > *:first-child { margin-top: 0; }
.cat-hero-copy p { color: #cfe0ee; font-size: 14.5px; max-width: none; margin: 0 0 9px; }
.cat-hero-copy p:last-child { margin-bottom: 0; }
.cat-hero-copy h2, .cat-hero-copy h3, .cat-hero-copy h4 {
	color: #fff; font-size: 15.5px; margin: 14px 0 7px; line-height: 1.35;
}
.cat-hero-copy a { color: #8fd6ef; }
.cat-hero-copy .catcopy-more { color: #8fd6ef; font-size: 14px; margin-top: 8px; }
.cat-hero-copy .catcopy-more:hover { color: #fff; }
.cat-hero .crumbs { color: #9fc0d9; padding-top: 0; }
.cat-hero .crumbs a { color: #cfe0ee; }
.cat-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; }
.cat-stats div b { display: block; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.cat-stats div span { display: block; font-size: 13px; color: #9fc0d9; }

.shop-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 32px; align-items: start; }
.shop-layout.no-facets { grid-template-columns: minmax(0, 1fr); }
.shop-layout.no-facets > .facets { display: none; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: minmax(0, 1fr); } }

/* Not sticky, and no scrollbar of its own.
   It was pinned to the viewport, which meant the bottom of a long filter list
   could not be reached at all, and capping it with its own scrollbar only
   swapped one awkwardness for another. It is part of the page now: scroll the
   page and you get to the filters, which is what everybody expects. */
.facets { position: static; }

/* The sidebar is a panel of its own, numbered sections down it, and the
   options are square chips that wrap rather than a column of checkboxes with
   the count pushed to the far edge. The checkboxes are still there, and still
   what the form submits; the chip is their label. */
.facets {
	counter-reset: facet; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy);
	padding: 4px 20px 20px;
}
.facet { border-bottom: 1px solid var(--line-soft); padding: 20px 0; }
.facets > form > .facet:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.facet-title {
	display: flex; align-items: center; gap: 10px; margin: 0 0 13px;
	font-size: 12px; font-weight: 800; font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
}
.facet-title::before {
	counter-increment: facet; content: counter(facet, decimal-leading-zero);
	font-size: 11px; letter-spacing: .04em; color: var(--navy); background: var(--aqua-line); padding: 2px 5px;
}
.facet-title::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); order: 1; }
.facet-title em { order: 2; font-style: normal; font-size: 11px; letter-spacing: .02em; color: var(--ink-faint); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.fchip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fchip > span {
	display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 10px;
	border: 1px solid var(--line); background: var(--canvas); color: var(--ink);
	font-size: 13.5px; line-height: 1.3; transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.fchip small { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.fchip:hover > span { border-color: var(--navy); background: #fff; }
.fchip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 3px 3px 0 var(--cyan); }
.fchip input:checked + span small { color: var(--cyan-light); }
.fchip input:checked + span::before {
	content: ''; align-self: center; width: 9px; height: 5px; margin: -3px 1px 0 0;
	border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg);
}
.fchip input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }

.chips-more { margin-top: 8px; }
.chips-more > summary {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
	font-size: 13px; font-weight: 700; color: var(--cyan-dark); padding: 4px 0;
}
.chips-more > summary::-webkit-details-marker { display: none; }
.chips-more > summary::before { content: '+'; font-size: 16px; line-height: 1; }
.chips-more[open] > summary::before { content: '\2212'; }
.chips-more[open] > summary { margin-bottom: 8px; }

/* ---------------------------------------------------------- price filter */

.facet .range-row { display: flex; align-items: center; gap: 8px; }
.facet .range-row .money {
	position: relative; flex: 1 1 0; min-width: 0;
}
.facet .range-row .money .sym {
	position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
	font-size: 13.5px; font-weight: 600; color: var(--ink-faint); pointer-events: none;
}
.facet .range-row input[type=text] {
	width: 100%; border: 1px solid var(--line); border-radius: 0;
	padding: 9px 10px 9px 22px; font-size: 14px; background: #fff; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.facet .range-row input[type=text]:focus {
	outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(45 180 219 / .16);
}
.facet .range-row span { font-size: 13px; color: var(--ink-faint); flex: 0 0 auto; }

/* Two range inputs stacked on the same line. Only the thumbs take pointer
   events, so whichever one you grab is the one that moves, and the track is
   drawn once underneath rather than twice on top of itself. */
.pricerange { position: relative; height: 26px; margin: 16px 0 4px; }
.pricerange[hidden] { display: none; }
.pricerange .track {
	position: absolute; left: 0; right: 0; top: 11px; height: 4px;
	background: var(--aqua-line); border-radius: 0;
}
.pricerange .fill {
	position: absolute; top: 11px; height: 4px; background: var(--cyan); border-radius: 0;
}
.pricerange input[type=range] {
	position: absolute; left: 0; width: 100%; top: 0; height: 26px; margin: 0;
	appearance: none; background: none; pointer-events: none;
}
.pricerange input[type=range]::-webkit-slider-thumb {
	appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 0;
	background: #fff; border: 2px solid var(--cyan); box-shadow: 0 1px 4px rgb(2 44 82 / .28);
	cursor: grab; margin-top: 0;
}
.pricerange input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; border-color: var(--navy); }
.pricerange input[type=range]::-moz-range-thumb {
	pointer-events: auto; width: 18px; height: 18px; border-radius: 0; border: 2px solid var(--cyan);
	background: #fff; box-shadow: 0 1px 4px rgb(2 44 82 / .28); cursor: grab;
}
.pricerange input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(45 180 219 / .3); }
.pricerange input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgb(45 180 219 / .3); }

.facet .range-ends {
	display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-faint);
	margin-bottom: 12px;
}
.facet .btn-apply {
	width: 100%; margin-top: 12px; border: 1px solid var(--navy); background: #fff; color: var(--navy);
	border-radius: 0; padding: 9px 12px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.facet .btn-apply:hover { background: var(--navy); color: #fff; }

.shop-toolbar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 14px 18px; background: var(--aqua-tint); border: 1px solid var(--aqua-line);
	border-radius: 0; margin-bottom: 22px;
}
.shop-toolbar .spacer { flex: 1 1 auto; }

/* ---------- The ranges inside a range ----------
   A grid of pictures above the fish, four across beside the sidebar. Built like
   the product card (square edges, the hard cyan shadow on hover) so the two
   read as one shop, but with no price row, so a range is never mistaken for
   something to put in the basket. */
.subranges { margin-bottom: 34px; }
.subranges-title {
	display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
	font-size: 13px; font-weight: 800; font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
}
.subranges-title::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); order: 1; }
.subranges-title em { order: 2; font-style: normal; font-size: 11px; letter-spacing: .02em; color: var(--ink-faint); }
/* As many columns as there are ranges, up to four, so three ranges fill the
   row rather than leaving an empty slot at the end of it. */
.subrange-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px; }
.subrange {
	display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line);
	text-decoration: none; color: var(--navy);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.subrange:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--cyan); border-color: var(--navy); }
.subrange-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--canvas); }
.subrange-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.subrange:hover .subrange-media img { transform: scale(1.06); }
.subrange-body { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; flex: 1 1 auto; }
.subrange-body::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cyan);
	transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.subrange:hover .subrange-body::before { transform: scaleX(1); }
.subrange-body b { font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.subrange-body span { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) {
	.subrange, .subrange-media img, .subrange-body::before { transition: none; }
	.subrange:hover { transform: none; }
	.subrange:hover .subrange-media img { transform: none; }
}
/* The range's words below the fish: a panel under the results with the cyan
   rule of the cards, so it reads as part of the page rather than a footnote. */
.catcopy-below {
	margin-top: 40px; padding: 26px 30px 24px; background: #fff; border: 1px solid var(--line);
	border-top: 3px solid var(--cyan);
}
.catcopy-below h2 {
	margin: 0 0 12px; font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-stretch: var(--wide); letter-spacing: -.015em; color: var(--navy);
}
.catcopy-below-text p { max-width: 120ch; margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.catcopy-below-text p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .catcopy-below { margin-top: 28px; padding: 20px 18px; } }
@media (max-width: 1180px) { .subrange-grid { grid-template-columns: repeat(min(3, var(--cols, 4)), minmax(0, 1fr)); } }
@media (max-width: 600px) { .subrange-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .subrange-body { padding: 10px 11px 12px; } .subrange-body b { font-size: 14px; } }
.shop-toolbar select { border: 1px solid var(--aqua-line); border-radius: 0; padding: 8px 12px; font-size: 14.5px; background: #fff; color: var(--ink); }
.applied { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.applied .chip {
	display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--aqua-line);
	color: var(--navy); font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 0;
}
.applied .chip button { border: 0; background: none; cursor: pointer; color: var(--ink-faint); padding: 0; display: grid; }
.applied .chip :is(svg, .gi) { width: 13px; height: 13px; }
.applied .clear { font-size: 13.5px; font-weight: 700; color: var(--cyan-dark); text-decoration: none; align-self: center; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 36px; }
.pagination a, .pagination span {
	min-width: 42px; height: 42px; padding: 0 13px; border-radius: 0; border: 1px solid var(--line);
	background: #fff; display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 15px; color: var(--ink-soft); text-decoration: none;
}
.pagination a:hover { border-color: var(--cyan); color: var(--navy); background: var(--aqua-tint); }
.pagination .on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* "Show more" under a product grid: the main way through a big range, with the
   page numbers kept underneath for jumping ahead. */
.load-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 36px; }
.load-more .btn { min-width: min(320px, 100%); justify-content: center; }
.load-more .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.load-more-count { margin: 0; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.load-more + .pagination { margin-top: 18px; }
/* Seven boxes did not fit a phone, and "Previous" ran into its own border. */
.pagination { flex-wrap: wrap; }
@media (max-width: 560px) {
	.pagination { gap: 5px; }
	.pagination a, .pagination span { min-width: 38px; height: 40px; padding: 0 10px; font-size: 14px; }
	/* Only the pages either side of this one, so it is one line. */
	.pagination .far { display: none; }
}

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 52px); align-items: start; }

/* A tall photograph is capped by height, so at the normal column width it would
   sit in the middle of its half with a stripe of nothing beside it. The column
   shrinks to the picture instead and the details take the room back: no dead
   space, and the buy box gets wider on exactly the pages where the description
   is longest. */
.pdp.tall-media { grid-template-columns: auto minmax(0, 1fr); }

@media (max-width: 900px) { .pdp, .pdp.tall-media { grid-template-columns: 1fr; } }
/* Same again, and it matters more here: this is the picture somebody is buying
   an individual fish from. Capped by height as well as by ratio, because a
   1550 pixel tall koi at full column width would push the price and the buy
   button off the bottom of the screen. */
.gallery-main {
	position: relative; border-radius: 0; overflow: hidden;
	box-shadow: var(--shadow-lift); background: var(--canvas); width: 100%;
}
.gallery-main img {
	display: block; width: 100%; height: auto;
	aspect-ratio: var(--shape, 1); object-fit: cover;
}

/* A tall photograph is capped by height rather than by width, and the column it
   sits in shrinks to match. A square one still fills its half of the page
   exactly as it did: capping everything by height left a starfish floating in
   the middle of an empty column. */
.pdp.tall-media .gallery-main { width: fit-content; margin-inline: auto; }
.pdp.tall-media .gallery-main img { height: 68vh; width: auto; max-width: 100%; }
@media (max-width: 900px) {
	.pdp.tall-media .gallery-main { width: 100%; }
	.pdp.tall-media .gallery-main img { height: auto; width: 100%; max-height: 62vh; object-fit: contain; }
}
/* width 0 with min-width 100%: the strip takes the width of the picture above
   it and never asks for any of its own. The picture's column is sized to its
   content, and five thumbnails at their natural size made it 1,244 pixels wide
   and squeezed the name, price and basket button off the right of the page. */
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; width: 0; min-width: 100%; }
.gallery-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 0; overflow: hidden; cursor: pointer; background: none; }
.gallery-thumbs button.on { border-color: var(--cyan); }
.gallery-thumbs img { aspect-ratio: 1; object-fit: cover; width: 100%; }

.pdp h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: .2em; }
.pdp .latin { font-style: italic; color: var(--ink-faint); font-size: 16px; margin-bottom: 16px; }


.buybox { display: flex; gap: 12px; align-items: stretch; margin: 20px 0; flex-wrap: wrap; }
.qty-stepper { display: flex; align-items: center; border: 2px solid var(--aqua-line); border-radius: 0; overflow: hidden; background: #fff; }
.qty-stepper button { width: 44px; height: 52px; border: 0; background: none; cursor: pointer; color: var(--navy); font-size: 20px; font-weight: 700; }
.qty-stepper button:hover { background: var(--aqua-tint); }
.choice .collect-from { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-weight: 700; color: var(--navy); }
.choice .collect-from .gi { width: 16px; height: 16px; flex: none; }
.qty-stepper button:disabled { opacity: .35; cursor: not-allowed; background: none; }
/* Its own row under the stepper and the button beside it. */
.qty-note { flex: 1 0 100%; order: 3; margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.qty-stepper input { width: 54px; height: 52px; border: 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--navy); }
.buybox .btn { flex: 1 1 200px; padding-block: 16px; }



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

.pdp-tabs { border-bottom: 2px solid var(--line); display: flex; gap: 4px; overflow-x: auto; }
.pdp-tabs a { padding: 14px 20px; font-weight: 700; color: var(--ink-soft); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pdp-tabs a.on, .pdp-tabs a:hover { color: var(--navy); border-bottom-color: var(--cyan); }
.prose { max-width: none; }
.prose h3 { font-size: 19px; margin: 26px 0 8px; }
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }
.prose ul { color: var(--ink-soft); padding-left: 22px; }

/* ---------- Basket ---------- */
.basket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
@media (max-width: 980px) { .basket-layout { grid-template-columns: 1fr; } }

.line {
	display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 18px;
	padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.line > img { width: 108px; height: 108px; object-fit: cover; border-radius: 0; border: 1px solid var(--line); }
.line h3 { font-size: 17px; margin-bottom: 4px; }
.line h3 a { color: inherit; text-decoration: none; }
.line .meta { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 10px; }
.line .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.line .linetotal { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.line .remove { border: 0; background: none; color: var(--ink-faint); font-size: 13.5px; cursor: pointer; text-decoration: underline; padding: 0; }
.line .remove:hover { color: var(--sale); }
.qty-stepper.sm button { width: 34px; height: 38px; font-size: 17px; }
.qty-stepper.sm input { width: 42px; height: 38px; font-size: 15px; }
@media (max-width: 640px) {
	.line { grid-template-columns: 84px minmax(0, 1fr); }
	.line > img { width: 84px; height: 84px; }
	.line .right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

.sumrow { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15.5px; color: var(--ink-soft); }
.sumrow b { color: var(--navy); font-weight: 700; }
.sumrow.save b, .sumrow.save { color: var(--stock-in); }

.voucher { display: flex; gap: 8px; margin-top: 16px; }
.voucher input { flex: 1 1 auto; border: 1px solid var(--aqua-line); border-radius: 0; padding: 11px 18px; font-size: 14.5px; background: #fff; }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
@media (max-width: 980px) { .checkout-layout { grid-template-columns: 1fr; } }

.stepbar { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.stepbar .s { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; color: var(--ink-faint); }
.stepbar .s i { width: 28px; height: 28px; border-radius: 0; background: var(--line); color: #fff; display: grid; place-items: center; font-size: 13px; font-style: normal; }
.stepbar .s.done i { background: var(--stock-in); }
.stepbar .s.on { color: var(--navy); }
.stepbar .s.on i { background: var(--cyan); }
.stepbar .bar { flex: 1 1 20px; height: 2px; background: var(--line); min-width: 16px; }

.co-block { border: 1px solid var(--line); border-radius: 0; margin-bottom: 20px; overflow: hidden; background: #fff; }
.co-body { padding: 22px; }

.fld { margin-bottom: 16px; }
.fld:last-child { margin-bottom: 0; }
.fld label { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.fld input, .fld select, .fld textarea {
	width: 100%; border: 1px solid var(--line); border-radius: 0;
	padding: 12px 14px; font-size: 15.5px; background: #fff; color: var(--ink); font-family: inherit;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(45 180 219 / .18); }
.fld textarea { min-height: 84px; resize: vertical; }
.fld .hint { font-size: 13px; color: var(--ink-faint); margin-top: 5px; }
.fld2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 620px) { .fld2, .fld3 { grid-template-columns: 1fr; } }

.choice {
	display: flex; gap: 13px; align-items: flex-start; border: 2px solid var(--line);
	border-radius: 0; padding: 15px 17px; cursor: pointer; margin-bottom: 11px; background: #fff;
}
.choice:hover { border-color: var(--aqua-line); background: #fcfeff; }
.choice.on { border-color: var(--cyan); background: var(--aqua-tint); }
.choice input { width: 19px; height: 19px; accent-color: var(--cyan); margin-top: 2px; flex: 0 0 auto; }
.choice .t { flex: 1 1 auto; min-width: 0; }
.choice b { display: block; color: var(--navy); font-size: 15.5px; }
.choice span { display: block; color: var(--ink-soft); font-size: 13.5px; }
.choice .p { font-weight: 800; color: var(--navy); font-size: 16px; white-space: nowrap; }
.choice .p.free { color: var(--stock-in); }
.choice img { width: 46px; height: 30px; object-fit: contain; }

/* Delivery date picker */
.datepick { border: 1px solid var(--aqua-line); border-radius: 0; overflow: hidden; }
.datepick-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--aqua-tint); border-bottom: 1px solid var(--aqua-line); }
.datepick-head b { color: var(--navy); font-size: 15.5px; }
.datepick-head .spacer { flex: 1 1 auto; }
.datepick-head button { width: 32px; height: 32px; border: 1px solid var(--aqua-line); background: #fff; border-radius: 0; cursor: pointer; display: grid; place-items: center; color: var(--navy); }
.datepick-head button:hover { background: var(--cyan); color: #fff; border-color: var(--cyan); }
.datepick-head :is(svg, .gi) { width: 16px; height: 16px; }
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 14px; }
.datepick-grid .dh { text-align: center; font-size: 11.5px; font-weight: 800; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 4px; }
.dcell {
	aspect-ratio: 1; border: 1px solid var(--line); border-radius: 0; background: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	cursor: pointer; font-size: 15px; font-weight: 700; color: var(--navy); padding: 2px;
}
.dcell small { font-size: 10px; font-weight: 600; color: var(--stock-in); }
.dcell:hover { border-color: var(--cyan); background: var(--aqua-tint); }
.dcell.on { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.dcell.on small { color: #e6f7fc; }
.dcell.off { background: var(--canvas); color: var(--ink-faint); cursor: not-allowed; border-style: dashed; }
.dcell.off small { color: var(--ink-faint); font-size: 9.5px; }
.dcell.full { background: #fdf3e2; border-color: #f0dcb4; color: #b7791f; cursor: not-allowed; }
.dcell.full small { color: #b7791f; }
.datepick-key { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 16px 14px; font-size: 12.5px; color: var(--ink-soft); }
.datepick-key span { display: flex; align-items: center; gap: 6px; }
.datepick-key i { width: 12px; height: 12px; border-radius: 0; display: block; }

.co-summary { border: 1px solid var(--aqua-line); border-radius: 0; overflow: hidden; background: #fff; }
.co-lines { padding: 6px 20px; max-height: 330px; overflow-y: auto; }
.co-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-line:last-child { border-bottom: 0; }
.co-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 0; border: 1px solid var(--line); }
.co-line b { display: block; font-size: 14px; color: var(--navy); font-weight: 700; line-height: 1.35; }
.co-line span { display: block; font-size: 12.5px; color: var(--ink-faint); }
.co-line .p { font-weight: 800; color: var(--navy); font-size: 15px; white-space: nowrap; }
.co-totals { padding: 16px 20px; background: var(--aqua-tint); border-top: 1px solid var(--aqua-line); }

/* Reassurance cards under the checkout summary. They also stop the column
   running out of content long before the form does. */
.travelcard { margin-top: 20px; border-radius: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.travelcard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.travelcard .t { padding: 18px 20px 20px; }
.travelcard h3 { font-size: 17px; margin-bottom: 7px; }
.travelcard p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 12px; }
.travelcard a { font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 5px; }
.travelcard a :is(svg, .gi) { width: 15px; height: 15px; }

.helpcard { margin-top: 20px; border-radius: 0; padding: 20px; background: linear-gradient(140deg, var(--navy), var(--navy-deep)); color: #cfe0ee; }
.helpcard h3 { color: #fff; font-size: 17px; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.helpcard h3 :is(svg, .gi) { width: 18px; height: 18px; color: var(--cyan-light); }
.helpcard p { font-size: 14.5px; margin-bottom: 14px; }
.helpcard .hrs { font-size: 13px; color: #9fc0d9; margin: 10px 0 0; text-align: center; }

/* ---------- Messages ----------
   A notice is a tab: a solid square down the left carrying the icon, joined
   to a rule along the top, with the message on a pale ground of the same
   tone. Navy for information, amber for "you need to do something", green
   for "done". The first bold phrase becomes the notice's own heading. */
.alert {
	--tone: var(--navy); --tone-tint: #f1f7fb; --tone-ink: #fff;
	position: relative; display: block; min-height: 58px; margin-bottom: 20px;
	padding: 15px 18px 15px 72px; font-size: 15px; line-height: 1.55; color: var(--ink-soft);
	background: var(--tone-tint); border: 0; border-top: 3px solid var(--tone);
}
.alert::before { content: ''; position: absolute; left: 0; top: -3px; bottom: 0; width: 54px; background: var(--tone); }
.alert > :is(svg, .gi):first-child { position: absolute; left: 13px; top: 13px; width: 28px; height: 28px; margin: 0; color: var(--tone-ink); z-index: 1; }
.alert b { color: var(--navy); }
.alert > div > b:first-child { display: block; font-size: 15.5px; font-weight: 800; font-stretch: 106%; margin-bottom: 2px; }
.alert a { font-weight: 700; }
.alert.warn { --tone: var(--amber); --tone-tint: var(--amber-tint); --tone-ink: var(--navy-ink); }
.alert.good { --tone: var(--stock-in); --tone-tint: #ecf7f0; --tone-ink: #fff; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--navy-deep); color: #fff; }
/* Direct child only. A nested .media img must not be pulled out of flow. */
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, rgb(2 29 56 / .96) 25%, rgb(2 29 56 / .7) 62%, rgb(2 29 56 / .25) 100%); }
.cta-band .wrap { position: relative; z-index: 1; padding: clamp(44px, 5.5vw, 76px) var(--gutter); }
.cta-band h2 { color: #fff; }
/* Needs to outrank `.split .copy p`, which is more specific than a bare
   `.cta-band p` and was painting body copy navy-on-navy. */
.cta-band p, .cta-band .split .copy p { color: #cfe0ee; font-size: 17.5px; }
.cta-band .featlist b { color: #fff; }
.cta-band .featlist span { color: #b9d2e6; }
.cta-band .featlist :is(svg, .gi) { color: var(--cyan-light); }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.cta-band .fineprint, .cta-band .split .copy .fineprint { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: #9fbdd6; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #b9d2e6; padding: 54px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 34px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: #b9d2e6; text-decoration: none; font-size: 15px; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand { margin-bottom: 4px; }
.site-footer .brand img { height: 52px; }
.site-footer .about { font-size: 17px; line-height: 1.65; margin: 16px 0; }
.site-footer .contact { display: grid; gap: 8px; font-size: 15px; }
.site-footer .contact a { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; }
.site-footer .contact :is(svg, .gi) { width: 17px; height: 17px; color: var(--cyan-light); }
.site-footer .promise li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; }
.site-footer .promise :is(svg, .gi) { width: 17px; height: 17px; color: var(--cyan-light); flex: 0 0 auto; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / .12); margin-top: 40px; padding: 20px 0; }
.footer-bottom .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.footer-bottom .spacer { flex: 1 1 auto; }

/* The analytics question. Fixed to the foot of the screen, compact, and gone
   for good once answered. Deliberately not called anything with cookie,
   consent or banner in it, because blockers hide those. */
.stats-ask {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	background: var(--navy-deep); color: #e6f0f8; border-top: 3px solid var(--cyan);
	box-shadow: 0 -8px 24px rgb(2 29 56 / .25);
}
.stats-ask[hidden] { display: none; }
.stats-ask .wrap { display: flex; align-items: center; gap: 12px 24px; padding-block: 14px; flex-wrap: wrap; }
.stats-ask p { flex: 1 1 520px; margin: 0; font-size: 15px; line-height: 1.5; }
.stats-ask p b { color: #fff; }
.stats-ask a { color: var(--cyan-light); }
.stats-ask-do { display: flex; gap: 10px; flex: 0 0 auto; }
.stats-ask .stats-no { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55); }
.stats-ask .stats-no:hover { background: rgb(255 255 255 / .1); }
@media (max-width: 560px) {
	.stats-ask-do { width: 100%; }
	.stats-ask-do .btn { flex: 1 1 0; justify-content: center; }
}
.footer-pay { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.footer-pay span { background: rgb(255 255 255 / .1); border-radius: 0; padding: 5px 10px; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .04em; }

/* ---------- Filtering in place ---------- */
/* The results fade while the new ones are fetched, so a filter feels like it
   did something even on a slow connection. Nothing moves, so the page does not
   jump under the cursor. */
#results { transition: opacity .15s ease; }
#results.is-loading { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	#results { transition: none; }
}
/* The Apply button exists for people without JavaScript. With it, every change
   applies itself, so the button would only be a second way to do the same thing. */
.js-filters .facet-apply { display: none; }
.facet-apply { padding: 14px 0 4px; }

/* --------------------------------------------------- checkout delivery block */

/* The postcode decides what can be delivered and what it costs, so it gets its
   own row with the lookup beside it rather than sitting in the middle of the
   address like an afterthought. */
.postcode-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.postcode-row input { max-width: 220px; text-transform: uppercase; }
/* The vertical padding used to be zero, which was written for the postcode row
   below, where this button is a flex item in a stretch row and takes its height
   from the input beside it. Used anywhere else, on a blog post or an
   information page, it collapsed to the height of its own text and read as a
   hairline rather than a button. The row that needs the old behaviour asks for
   it, rather than every other use paying for it. */
.btn-quiet {
	background: #fff; color: var(--navy); border: 1px solid var(--aqua-line);
	font-size: 14.5px; padding: 11px 18px; white-space: nowrap;
}
.postcode-row .btn-quiet { padding: 0 18px; }
.btn-quiet:hover { background: var(--aqua-tint); color: var(--navy); box-shadow: none; }

/* A Saturday costs more, so it says so on the day itself rather than only in
   the total, where somebody would find it after choosing. */
.dcell { position: relative; }
.dcell em {
	font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .01em;
	color: var(--sale); line-height: 1;
}
.dcell.on em { color: #fff; }
.dcell-extra { border-color: #f0dcb4; background: #fffdf7; }
.dcell-extra:hover { border-color: var(--cyan); }
.dcell-extra.on { background: var(--cyan); border-color: var(--cyan); }

#delivery-block { transition: opacity .18s ease; }
#delivery-block.is-loading { opacity: .45; pointer-events: none; }

@media (max-width: 560px) {
	.datepick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.postcode-row input { max-width: none; flex: 1 1 140px; }
}

/* The hidden attribute has to win.
   Every element this page hides and shows carries a class that sets display,
   .alert and .sumrow and .btn are all flex, and an author rule beats the user
   agent's [hidden] { display: none }. Without this the "put your postcode in"
   warning sat directly above the Place order button it was meant to replace,
   and a zero Saturday surcharge showed as a line reading GBP 0.00. */
[hidden] { display: none !important; }

/* The order summary was sticky, but its column was not, so it stopped
   following as soon as the aside itself had scrolled past. With the delivery
   block making the form twice as tall, that left most of the right hand side
   empty for the whole second half of the page. Sticking the column keeps the
   total, and what the customer is covered for, beside the form the whole way
   down. */
/* Below the sticky header, the white bar and the blue nav together (measured
   into --header-h by site.js). When the column is taller than the screen,
   site.js sticks it by its bottom edge instead ([data-stick]), so the Place
   order button is always on the screen. The basket summary works the same. */
.checkout-layout > aside { position: sticky; top: calc(var(--header-h, 146px) + 18px); align-self: start; }

/* The lines of the order, folded under a row of thumbnails so the total and
   the button fit on a laptop screen. The fold slides open on its grid row. */
.co-toggle {
	display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 20px;
	border: 0; border-bottom: 1px solid var(--aqua-line); background: #fff; cursor: pointer;
	font: inherit; text-align: left; color: var(--ink);
}
.co-toggle:hover { background: var(--canvas); }
.co-toggle:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.co-thumbs { display: flex; flex: 0 0 auto; }
.co-thumbs img {
	width: 36px; height: 36px; object-fit: cover; border: 2px solid #fff; margin-left: -10px;
	box-shadow: 0 0 0 1px var(--line);
}
.co-thumbs img:first-child { margin-left: 0; }
.co-count { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.co-count b { color: var(--navy); font-size: 15px; font-weight: 800; }
.co-count span { font-size: 14px; font-weight: 700; color: var(--cyan-dark); text-decoration: underline; text-underline-offset: 3px; }
.co-toggle .co-chev { width: 16px; height: 16px; color: var(--navy); transform: rotate(90deg); transition: transform .3s ease; }
.co-toggle[aria-expanded="true"] .co-chev { transform: rotate(-90deg); }
.co-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.co-fold.open { grid-template-rows: 1fr; }
.co-fold-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .35s; }
.co-fold.open .co-fold-inner { visibility: visible; transition: none; }
.co-fold.open .co-lines { border-bottom: 1px solid var(--aqua-line); }
.no-js .co-toggle { display: none; }
.no-js .co-fold { grid-template-rows: 1fr; }
.no-js .co-fold-inner { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
	.co-fold, .co-toggle .co-chev { transition: none; }
}
.co-lines { max-height: min(38vh, 340px); overflow-y: auto; scrollbar-width: thin; }
.co-lines::-webkit-scrollbar { width: 7px; }
.co-lines::-webkit-scrollbar-thumb { background: var(--aqua-line); border-radius: 0; }
@media (max-width: 980px) { .checkout-layout > aside { position: static; } }

/* ============================================================
   The customer's account
   ============================================================ */

/* Signing in and signing up.
   A form on its own leaves half a row empty, which is exactly the dead space
   the house rules are about. So the form is paired with a photograph and a
   short piece about what an account is actually for, and the pair fills the
   row at every width. */
.auth-split {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px); align-items: stretch;
}
.auth-form {
	background: #fff; border: 1px solid var(--line); border-radius: 0;
	padding: clamp(22px, 3vw, 36px); box-shadow: 0 18px 40px -32px rgba(0, 66, 124, .5);
}
.auth-form h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 8px; }
.auth-form .lede { color: var(--ink-soft); margin: 0 0 22px; }
.auth-form .altline { margin: 18px 0 0; font-size: 14.5px; color: var(--ink-soft); }

.auth-aside {
	position: relative; border-radius: 0; overflow: hidden; min-height: 420px;
	display: flex; align-items: flex-end; background: var(--navy);
}
.auth-aside img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	/* Slow drift, so the panel is never a flat rectangle of photograph. */
	animation: authdrift 26s ease-in-out infinite alternate;
}
@keyframes authdrift {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}
.auth-aside::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(160deg, rgba(2, 44, 82, .18) 0%, rgba(2, 44, 82, .92) 78%);
}
.auth-aside .inner { position: relative; z-index: 1; padding: clamp(22px, 3vw, 34px); color: #fff; }
.auth-aside h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0 0 14px; }
.auth-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.auth-aside li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: #dbeaf5; }
.auth-aside li :is(svg, .gi) { width: 20px; height: 20px; flex: 0 0 auto; color: var(--cyan); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
	.auth-aside img { animation: none; }
}
@media (max-width: 900px) {
	.auth-split { grid-template-columns: minmax(0, 1fr); }
	.auth-aside { min-height: 260px; order: -1; }
	/* A page whose button is the point (a back in stock link) keeps it on the first screen. */
	.auth-split.act-first .auth-aside { order: 0; min-height: 220px; }
}

/* The account itself: a menu down the side, the page beside it. */
.account-layout {
	display: grid; grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px); align-items: start;
}
@media (max-width: 900px) {
	.account-layout { grid-template-columns: minmax(0, 1fr); }
}

.acct-nav {
	background: #fff; border: 1px solid var(--line); border-radius: 0; overflow: hidden;
}
.acct-nav .who { padding: 18px 20px; background: var(--navy); color: #fff; }
.acct-nav .who b { display: block; font-size: 16px; }
.acct-nav .who span { font-size: 13px; color: #b6d5ea; word-break: break-all; }
.acct-nav a {
	display: flex; align-items: center; gap: 11px; padding: 12px 20px;
	border-bottom: 1px solid var(--line-soft); color: var(--ink); font-weight: 600;
	font-size: 14.5px; text-decoration: none;
}
.acct-nav a :is(svg, .gi) { width: 18px; height: 18px; color: var(--cyan-dark); flex: 0 0 auto; }
.acct-nav a:hover { background: var(--aqua-tint); }
.acct-nav a.on { background: var(--aqua-tint); color: var(--navy); box-shadow: inset 3px 0 0 var(--cyan); }
.acct-nav form { border-top: 1px solid var(--line); }
.acct-nav button {
	display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 20px;
	border: 0; background: none; font: inherit; font-weight: 600; font-size: 14.5px;
	color: var(--ink-soft); cursor: pointer; text-align: left;
}
.acct-nav button:hover { background: #fdf1f1; color: var(--sale); }

.acct-card {
	background: #fff; border: 1px solid var(--line); border-radius: 0;
	padding: clamp(18px, 2.4vw, 28px); margin-bottom: 20px;
}
.acct-card > h2 {
	display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
	font-size: 1.15rem; color: var(--navy);
}
.acct-card > h2 :is(svg, .gi) { width: 20px; height: 20px; color: var(--cyan-dark); }
.acct-card > .lede { color: var(--ink-soft); margin: 0 0 18px; font-size: 14.5px; }
.acct-card .foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

.acct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.acct-stat { padding: 16px 18px; border: 1px solid var(--line); border-radius: 0; background: var(--canvas); }
.acct-stat .lab { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.acct-stat .val { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.2; }
.acct-stat .meta { font-size: 12.5px; color: var(--ink-faint); }

/* One order in the list. A block rather than a table row, because it has to
   read on a phone and an order is four facts, not seven columns. */
.acct-order {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
	padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.acct-order:last-child { border-bottom: 0; padding-bottom: 0; }
.acct-order h3 { margin: 0 0 3px; font-size: 1rem; }
.acct-order h3 a { color: var(--navy); text-decoration: none; }
.acct-order h3 a:hover { text-decoration: underline; }
.acct-order .meta { font-size: 13.5px; color: var(--ink-soft); }
.acct-order .thumbs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.acct-order .thumbs img {
	width: 46px; height: 46px; border-radius: 0; object-fit: cover;
	border: 1px solid var(--line); background: var(--canvas);
}
.acct-order .right { text-align: right; }
.acct-order .right .total { font-size: 18px; font-weight: 800; color: var(--navy); }

.acct-address {
	border: 1px solid var(--line); border-radius: 0; padding: 16px 18px; background: var(--canvas);
}
.acct-address.is-default { border-color: var(--cyan); background: var(--aqua-tint); }
.acct-address h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.acct-address address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.acct-address .acts { margin-top: 12px; display: flex; gap: 8px; }

.tagchip {
	display: inline-block; padding: 2px 9px; border-radius: 0; font-size: 11.5px;
	font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	background: var(--aqua-tint); color: var(--navy);
}
.tagchip.green { background: #e3f6ec; color: #1f8a4c; }
.tagchip.amber { background: #fdf2e0; color: #8a6d1f; }
.tagchip.red   { background: #fdecec; color: var(--sale); }
.tagchip.grey  { background: #eef3f7; color: var(--ink-soft); }

/* The banner across the top of an account page.
   A signed in area is still part of the shop. Without this the account opened
   on a flat band of canvas, which is exactly the dead, flat section the rest of
   the site is built to avoid. */
.acct-banner { position: relative; overflow: hidden; background: var(--navy-deep); isolation: isolate; }
.acct-banner-media { position: absolute; inset: 0; z-index: 0; }
.acct-banner-media img {
	width: 100%; height: 100%; object-fit: cover; opacity: .5;
	animation: acctdrift 30s ease-in-out infinite alternate;
}
@keyframes acctdrift {
	from { transform: scale(1.06); }
	to   { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
.acct-banner::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(105deg, var(--navy-deep) 12%, rgba(2, 44, 82, .78) 55%, rgba(2, 44, 82, .55) 100%);
}
.acct-banner-inner {
	position: relative; z-index: 2; display: flex; gap: 24px; align-items: flex-end;
	padding-top: clamp(34px, 5vw, 60px); padding-bottom: clamp(30px, 4vw, 52px);
}
.acct-banner-inner .grow { flex: 1; min-width: 0; }
.acct-banner .eyebrow { color: var(--cyan); }
.acct-banner .eyebrow a { color: var(--cyan); }
.acct-banner .eyebrow::before { background: var(--cyan); }
.acct-banner h1 {
	color: #fff; margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15;
}
.acct-banner p { color: #cfe4f2; margin: 10px 0 0; max-width: 68ch; }
.acct-banner p.full-measure { max-width: none; }
.acct-banner-action { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) { .acct-banner-media img { animation: none; } }
@media (max-width: 760px) {
	.acct-banner-inner { flex-direction: column; align-items: stretch; }
}

/* An empty half of a row is a dead zone, and a single saved address left one.
   The tile that offers to add another fills it and is the thing somebody on
   that page is most likely to want next. */
.acct-add-tile {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
	border: 2px dashed var(--line); border-radius: 0; padding: 18px;
	background: #fff; color: var(--ink-soft); text-decoration: none; min-height: 100%;
}
.acct-add-tile:hover { border-color: var(--cyan); background: var(--aqua-tint); color: var(--navy); }
.acct-add-tile b { color: var(--navy); font-size: 15px; display: flex; align-items: center; gap: 9px; }
.acct-add-tile b :is(svg, .gi) { width: 19px; height: 19px; color: var(--cyan-dark); }
.acct-add-tile span { font-size: 13.5px; }

/* Totals inside an account card. Collapsed, or the rule above the total is
   drawn as two pieces with the cell spacing showing through the middle. */
.acct-card table { border-collapse: collapse; }

/* ---------- Every range on one page ---------- */

.range-index { columns: 3; column-gap: clamp(22px, 3vw, 44px); }
@media (max-width: 1040px) { .range-index { columns: 2; } }
@media (max-width: 700px)  { .range-index { columns: 1; } }

/* A block is a range and everything under it, and must never be split across a
   column break: half a list under the wrong heading is worse than a long page. */
.range-block {
	break-inside: avoid; background: #fff; border: 1px solid var(--line);
	border-radius: 0; padding: 18px 20px; margin-bottom: 20px;
}
.range-block h2 {
	display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px;
	padding-bottom: 10px; border-bottom: 2px solid var(--cyan); font-size: 1.15rem;
}
.range-block h2 a { color: var(--navy); text-decoration: none; }
.range-block h2 a:hover { color: var(--cyan-dark); }
.range-block h2 span { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.range-block .muted { color: var(--ink-soft); font-size: 14px; margin: 0; }

.range-list, .range-list ul { list-style: none; margin: 0; padding: 0; }
.range-list > li > a {
	display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
	color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.range-list a:hover { color: var(--cyan-dark); }
.range-list a span { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); font-weight: 700; }
.range-list ul { margin: 0 0 6px 12px; border-left: 2px solid var(--line); }
.range-list ul a {
	display: flex; align-items: baseline; gap: 10px; padding: 4px 0 4px 12px;
	color: var(--ink-soft); font-size: 13.5px; font-weight: 500; text-decoration: none;
}

/* ---------- The words a range has always had ---------- */

/* Full width, because that is what the house rule asks for and because this is
   the copy the range has ranked on for years. Four lines of it, then a button:
   long enough to be worth reading, short enough that the products are still on
   the first screen. */
.catcopy-text { max-width: none; }

/* Clamped by line count rather than by a pixel height, so it is the same number
   of lines at every width and every font size, and the browser adds its own
   ellipsis. No fade: over a photograph there is no single colour to fade to. */
.is-clamped .catcopy-text {
	display: -webkit-box; -webkit-line-clamp: var(--clamp-lines, 4);
	-webkit-box-orient: vertical; overflow: hidden;
}
.catcopy-more {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
	background: none; border: 0; padding: 4px 0; cursor: pointer;
	color: var(--cyan-dark); font: inherit; font-weight: 700; font-size: 15px;
}
.catcopy-more:hover { color: var(--navy); text-decoration: underline; }
.catcopy-more :is(svg, .gi) { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .18s ease; }
[data-readmore]:not(.is-clamped) .catcopy-more :is(svg, .gi) { transform: rotate(-90deg); }

/* ---------- Browsing the ranges beside the products ----------
   Each range is a row with a depth line under it showing how much is in it
   compared with the biggest, so the list reads at a glance as well as by name. */
.browse-list { margin: 0 -8px; }
.browse-more { margin: 6px 0 0; }
.browse-list a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: baseline;
	padding: 8px 8px 8px 10px; border-left: 3px solid transparent; color: var(--ink);
	font-size: 14px; text-decoration: none;
}
.browse-list a:hover { background: var(--aqua-tint); border-left-color: var(--navy); color: var(--navy); }
.browse-list a .c { font-size: 11.5px; color: var(--ink-faint); font-weight: 700; font-variant-numeric: tabular-nums; }
.browse-list a .bar { grid-column: 1 / -1; height: 3px; background: var(--line-soft); position: relative; }
.browse-list a .bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--cyan); }
.browse-up {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
	font-size: 13.5px; font-weight: 700; color: var(--cyan-dark); text-decoration: none;
}
.browse-up :is(svg, .gi) { width: 14px; height: 14px; }

/* A range with nothing in it today is shown, marked, and still linked. It might
   have twelve koi in it tomorrow, and a page nothing points at falls out of the
   index in the meantime. */
.range-block.is-empty { opacity: .72; }
.range-block h2 span,
.range-list a span { text-transform: none; }
.range-list li.is-empty > a { color: var(--ink-faint); }
.range-list li.is-empty > a span,
.range-block.is-empty h2 span {
	font-style: italic; font-weight: 600; color: var(--ink-faint);
}

/* ============================================================
   The blog, and the pages around the shop
   ============================================================ */

/* The newest post gets the whole width and a real picture. A grid of nine equal
   cards says nothing is more important than anything else, and there is always
   one thing the shop most wants read. */
.post-lead {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	background: #fff; border: 1px solid var(--line); border-radius: 0;
	overflow: hidden; text-decoration: none; margin-bottom: 26px;
	box-shadow: 0 20px 44px -34px rgb(1 29 56 / .5);
	transition: transform .2s, box-shadow .2s;
}
.post-lead:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgb(1 29 56 / .55); }
.post-lead .media { position: relative; overflow: hidden; background: var(--canvas); min-height: 320px; }
.post-lead .media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.post-lead:hover .media img { transform: scale(1.05); }
.post-lead .copy { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.post-lead h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--navy); margin: 0 0 12px; line-height: 1.2; }
.post-lead p { color: var(--ink-soft); margin: 0 0 18px; font-size: 15.5px; }

@media (max-width: 860px) {
	.post-lead { grid-template-columns: minmax(0, 1fr); }
	.post-lead .media { min-height: 220px; }
}

.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .posts { grid-template-columns: minmax(0, 1fr); } }

.post {
	display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
	border-radius: 0; overflow: hidden; text-decoration: none;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--aqua-line); }
.post .media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--canvas); }
.post .media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.post:hover .media img { transform: scale(1.06); }
.post .copy { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post h3 { font-size: 1.05rem; color: var(--navy); margin: 0 0 8px; line-height: 1.3; }
.post p { color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; }

.post .meta, .post-lead .meta {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px;
	font-size: 12px; color: var(--ink-faint);
}
.post .meta b, .post-lead .meta b {
	background: var(--aqua-tint); color: var(--navy); padding: 2px 9px; border-radius: 0;
	font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.post .more, .post-lead .more {
	margin-top: auto; display: inline-flex; align-items: center; gap: 5px;
	color: var(--cyan-dark); font-weight: 700; font-size: 14px;
}
.post .more :is(svg, .gi), .post-lead .more :is(svg, .gi) { width: 15px; height: 15px; }

/* ---------- One post, or one page ---------- */

.post-hero { position: relative; overflow: hidden; background: var(--navy-deep); isolation: isolate; }
.post-hero-media { position: absolute; inset: 0; z-index: 0; }
.post-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Dark enough for white type to hold at any brightness of photograph, light
   enough that the photograph is still a photograph. The first pass at this was
   a .55 opacity image under a .92 wash, which between them turned every banner
   into a navy rectangle. */
.post-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(180deg, rgba(1, 29, 56, .25) 0%, rgba(1, 29, 56, .82) 100%),
		linear-gradient(90deg, rgba(1, 29, 56, .7) 0%, rgba(1, 29, 56, .1) 70%);
}
.post-hero-inner {
	position: relative; z-index: 2;
	padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(34px, 5vw, 70px);
}
.post-hero h1 { color: #fff; margin: 0; max-width: 22ch; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.12; }
.post-hero .crumbs { color: #9fc0d9; }
.post-hero .crumbs a { color: #cfe0ee; }
.post-hero > .wrap > p { color: #cfe0ee; margin: 14px 0 0; max-width: 70ch; font-size: 17px; }
.post-meta {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 16px 0 0 !important; color: #9fc0d9; font-size: 14.5px;
}
.post-meta .tagchip { text-decoration: none; }

/* The column is the measure.
   This used to hold the words to 68ch as well as putting them in a column, so
   the text stopped about three hundred pixels short of the panel beside it and
   left a strip of nothing down the middle of every post. One cap is enough:
   the grid decides how wide the reading column is, the words fill it, and the
   panel fills the rest of the row. */
.post-layout {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: clamp(28px, 4vw, 56px); align-items: start;
}
@media (max-width: 920px) { .post-layout { grid-template-columns: minmax(0, 1fr); } }

/* Slightly larger than the rest of the site's body copy, because this column is
   wider than a card and the type has to hold a longer line. */
.post-body { font-size: 18px; line-height: 1.75; color: var(--ink-soft); }
.post-body > *:first-child { margin-top: 0; }
.post-body h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--navy); margin: 34px 0 12px; }
.post-body h3 { font-size: 1.2rem; color: var(--navy); margin: 28px 0 10px; }
.post-body h4 { font-size: 1.05rem; color: var(--navy); margin: 22px 0 8px; }
.post-body p { margin: 0 0 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: var(--cyan-dark); }
.post-body blockquote {
	margin: 24px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--cyan);
	color: var(--navy); font-size: 19px; font-style: italic;
}
.post-body strong { color: var(--navy); }

/* Pictures and video inside a post.
   A post about a shipment arriving is mostly the photographs of it, so they get
   the full width of the reading column rather than sitting in it at whatever
   size a WordPress editor happened to save. */
.post-body img {
	display: block; width: 100%; height: auto; border-radius: 0;
	margin: 26px 0; background: var(--aqua-tint);
}
.post-body figure { margin: 26px 0; }
.post-body figure img { margin: 0; }
.post-body figcaption {
	font-size: 14px; color: var(--ink-soft); margin-top: 10px; text-align: center;
}
.post-body iframe {
	display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
	border: 0; border-radius: 0; background: var(--navy-deep);
}

/* A run of pictures reads as a gallery rather than as a list of them. The
   markup is the list WordPress wrote, so the bullets and the indent come off
   and the items become a grid. */
.post-body ul:has(> li > figure) {
	list-style: none; padding: 0; margin: 26px 0;
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.post-body ul:has(> li > figure) > li { margin: 0; }
.post-body ul:has(> li > figure) figure { margin: 0; }
.post-body ul:has(> li > figure) img { aspect-ratio: 4 / 5; object-fit: cover; }
.post-updated { font-size: 14px; color: var(--ink-faint); font-style: italic; }

/* 146px clears the sticky header, which is the white bar and the blue nav
   together. At 20 the top of the panel parked underneath the navigation and the
   heading of whichever card was showing disappeared behind it.

   The height cap is the other half. A panel taller than the screen can never be
   scrolled to the bottom of once it is stuck, so the last card is unreachable.
   Capping it to the space actually available and letting it scroll inside
   itself means everything in it can be read at any window height. */
/* A contents page.
   One imported page is ten links and nothing else, which as a bulleted list is
   a narrow column of blue text beside a panel four times its height. As cards
   it fills the row, and each one can carry a line about where it goes. */
.hub {
	display: grid; gap: 14px; margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hub-card {
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px 20px; border: 1px solid var(--line); border-radius: 0;
	background: #fff; text-decoration: none; color: inherit;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hub-card:hover {
	border-color: var(--cyan); transform: translateY(-2px);
	box-shadow: 0 14px 30px -22px rgba(0, 66, 124, .55);
}
.hub-title {
	display: flex; align-items: center; gap: 8px;
	font-weight: 800; color: var(--navy); font-size: 16px; line-height: 1.3;
}
.hub-title :is(svg, .gi) { width: 15px; height: 15px; color: var(--cyan-dark); flex: 0 0 auto; margin-left: auto; }
.hub-note { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .hub-card:hover { transform: none; } }

/* What is in stock, inside the article.
   The shortest posts are two paragraphs beside a panel four times their height,
   which is the dead space the house rules exist to stop. This fills it with the
   one thing a six year old post about a delivery genuinely needs: the fish that
   are in that range today. */
.post-shop {
	display: block; margin: 40px 0 0; padding: 26px 0 0;
	border-top: 1px solid var(--line);
}
.post-shop-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.post-shop-head h2 { font-size: 1.25rem; color: var(--navy); margin: 0; }
.post-shop-all {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: 14.5px; color: var(--cyan-dark); text-decoration: none;
}
.post-shop-all:hover { text-decoration: underline; }
.post-shop-all :is(svg, .gi) { width: 14px; height: 14px; }
.post-shop-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
@media (max-width: 480px) {
	.post-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.post-aside {
	position: sticky; top: 146px; align-self: start; display: grid; gap: 18px;
	max-height: calc(100vh - 166px); overflow-y: auto; scrollbar-width: thin;
	/* Room for the shadow on the last card, which a scroll container clips. */
	padding-bottom: 4px;
}
.post-aside::-webkit-scrollbar { width: 7px; }
.post-aside::-webkit-scrollbar-thumb { background: var(--aqua-line); border-radius: 0; }
@media (max-width: 920px) {
	.post-aside { position: static; max-height: none; overflow: visible; }
}
.post-card {
	background: #fff; border: 1px solid var(--line); border-radius: 0;
	padding: 20px 22px;
}
.post-card.tint { background: var(--aqua-tint); border-color: var(--aqua-line); }
.post-card h2 {
	display: flex; align-items: center; gap: 9px; font-size: 1.05rem;
	color: var(--navy); margin: 0 0 12px;
}
.post-card h2 :is(svg, .gi) { width: 19px; height: 19px; color: var(--cyan-dark); }
.post-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 14px; }
.post-card ul { list-style: none; margin: 0 0 16px; padding: 0; }
.post-card ul li {
	position: relative; padding-left: 20px; margin-bottom: 9px;
	color: var(--ink-soft); font-size: 14.5px;
}
.post-card ul li::before {
	content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
	border-radius: 0; background: var(--cyan);
}
.post-card ul.plain li { padding-left: 0; }
.post-card ul.plain li::before { display: none; }
.post-card ul.plain a {
	display: flex; align-items: center; gap: 6px; padding: 7px 0;
	border-bottom: 1px solid var(--line-soft); color: var(--navy);
	font-weight: 600; font-size: 14.5px; text-decoration: none;
}
.post-card ul.plain li:last-child a { border-bottom: 0; }
.post-card ul.plain a:hover { color: var(--cyan-dark); }
.post-card ul.plain a :is(svg, .gi) { width: 14px; height: 14px; margin-left: auto; color: var(--cyan-dark); }
.post-card .btn + .btn { margin-top: 9px; }


/* ============================================================
   The shop's own panels
   Everything that used to be a pale rounded box with a line of text in it:
   the header, the product page's notices and guarantees, the basket summary
   and the checkout. Square, ruled, and built from three repeated devices so
   they read as one shop: viewfinder corners, a navy tab down the left, and a
   segmented "tank level" gauge.
   ============================================================ */

/* Header */
.headsearch { flex: 1 1 auto; position: relative; max-width: 620px; }
.headsearch input {
	width: 100%; height: 46px; border: 2px solid var(--navy); border-radius: 0;
	padding: 0 58px 0 18px; font-size: 15px; background: #fff; color: var(--ink); font-family: inherit;
}
.headsearch input:focus { outline: 0; box-shadow: 4px 4px 0 var(--cyan); }
.headsearch button {
	position: absolute; right: 0; top: 0; width: 46px; height: 46px; border: 0; border-radius: 0;
	background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.headsearch button:hover { background: var(--cyan); color: var(--navy-ink); }
.headsearch button :is(svg, .gi) { width: 24px; height: 24px; }
.headlinks { display: flex; align-items: stretch; gap: 0; flex: 0 0 auto; margin-left: auto; }
.headlink {
	display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 70px;
	padding: 5px 12px 6px; text-decoration: none; color: var(--navy); border-bottom: 3px solid transparent;
	font-size: 11.5px; font-weight: 700; font-stretch: 108%; letter-spacing: .02em; position: relative;
}
.headlink:hover { color: var(--navy); text-decoration: none; border-bottom-color: var(--cyan); background: var(--aqua-tint); }
.headlink :is(svg, .gi) { width: 30px; height: 30px; }
.headlink .count {
	position: absolute; top: 2px; right: 10px; background: var(--cyan); color: var(--navy-ink);
	font-size: 11px; min-width: 19px; height: 19px; display: grid; place-items: center;
	font-weight: 800; padding: 0 5px; border-radius: 0; box-shadow: 2px 2px 0 var(--navy);
}
@media (max-width: 980px) {
	.headlink { min-width: 0; padding: 3px 8px 4px; font-size: 10.5px; }
	.headlink :is(svg, .gi) { width: 26px; height: 26px; }
	.headsearch input { height: 42px; font-size: 14.5px; }
	.headsearch button { width: 42px; height: 42px; }
}

.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips a {
	background: rgb(1 29 56 / .45); border: 1px solid rgb(255 255 255 / .35);
	color: #fff; padding: 7px 14px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.hero-chips a:hover { background: #fff; border-color: #fff; color: var(--navy); }

.range.feature { background: var(--navy); align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 -4px 0 var(--cyan); }
.range.feature::after { display: none; }
.range.feature .t { width: auto; }
.range.feature :is(svg, .gi) { width: 56px; height: 56px; color: var(--cyan); margin: 0 auto 12px; }

/* A feature list is a column of the shop's icons, each in a small ruled square. */
.featlist { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.featlist li { display: flex; gap: 14px; align-items: flex-start; }
.featlist li > :is(svg, .gi) {
	width: 46px; height: 46px; padding: 8px; flex: 0 0 auto; color: var(--navy);
	box-shadow: inset 0 0 0 1px var(--aqua-line);
}
.section.navy .featlist li > :is(svg, .gi), .cta-band .featlist li > :is(svg, .gi) { color: var(--cyan-light); box-shadow: inset 0 0 0 1px rgb(127 208 232 / .4); }
.featlist b { display: block; color: var(--navy); font-size: 16px; font-stretch: 106%; }
.featlist span { display: block; color: var(--ink-soft); font-size: 14.5px; }

/* Product page: price and quantity breaks */
.pdp .pricing { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pdp .pricing .was { text-decoration: line-through; color: var(--ink-faint); font-size: 20px; }
.pdp .pricing .now { color: var(--navy); font-weight: 800; font-stretch: 110%; font-size: clamp(1.9rem, 3vw, 2.4rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pdp .pricing .was + .now { color: var(--sale); }
.pdp .pricing .off {
	align-self: center; background: var(--sale); color: #fff; font-size: 12px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; box-shadow: 3px 3px 0 var(--navy);
}
.qty-table { width: 100%; border-collapse: collapse; margin: 18px 0; border: 0; border-top: 3px solid var(--navy); }
.qty-table th { background: none; color: var(--navy); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 10px 14px 8px 0; text-align: left; border-bottom: 1px solid var(--navy); }
.qty-table td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-variant-numeric: tabular-nums; }
.qty-table tbody tr:nth-child(odd) td { background: linear-gradient(90deg, var(--canvas), transparent); }
.qty-table td:last-child, .qty-table th:last-child { text-align: right; font-weight: 800; color: var(--navy); padding-right: 0; }
.pdp-stock { font-size: 15px; margin-top: 6px; }
.pdp-stock .lvl { height: 14px; }
.pdp-stock .lvl i { width: 4px; }
.pdp-stock .lvl i:nth-child(1) { height: 6px; }
.pdp-stock .lvl i:nth-child(2) { height: 10px; }
.pdp-stock .lvl i:nth-child(3) { height: 14px; }

/* "This exact fish": the viewfinder corners, around the promise itself. */
.exact-panel {
	position: relative; background: var(--navy); color: #fff; padding: 20px 22px 20px 92px; margin-bottom: 22px;
}
.exact-panel::before, .exact-panel::after { content: ''; position: absolute; width: 18px; height: 18px; border: 0 solid var(--cyan); }
.exact-panel::before { top: 8px; left: 8px; border-top-width: 3px; border-left-width: 3px; }
.exact-panel::after { right: 8px; bottom: 8px; border-right-width: 3px; border-bottom-width: 3px; }
.exact-panel h3 { color: #fff; font-size: 16.5px; margin-bottom: 6px; }
.exact-panel h3 :is(svg, .gi) { position: absolute; left: 24px; top: 20px; width: 50px; height: 50px; color: var(--cyan); }
.exact-panel p { color: #cfe0ee; font-size: 14.5px; margin: 0; }
.exact-panel .ref {
	display: inline-block; margin-top: 10px; background: var(--cyan); color: var(--navy-ink);
	padding: 4px 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* The care facts: a ruled strip of four cells, not four floating cards. */
.care { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin: 26px 0; border: 1px solid var(--line); background: #fff; }
.care div { padding: 14px 12px 13px; text-align: center; border-left: 1px solid var(--line); }
.care div:first-child { border-left: 0; }
.care :is(svg, .gi) { width: 34px; height: 34px; color: var(--navy); margin: 0 auto 8px; }
.care b { display: block; color: var(--navy); font-size: 16px; font-weight: 800; font-stretch: 106%; line-height: 1.25; }
.care span { display: block; color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
@media (max-width: 760px) {
	.care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.care div:nth-child(3) { border-left: 0; }
	.care div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* What you are covered for: a ruled list with a navy title bar, each line
   led by the shop's own icon in a square. */
.assure { background: #fff; border: 1px solid var(--line); padding: 0; }
.assure h3 {
	display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 18px;
	background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; font-stretch: 112%;
	letter-spacing: .1em; text-transform: uppercase;
}
.assure h3 :is(svg, .gi) { width: 26px; height: 26px; color: var(--cyan); }
.assure ul { list-style: none; margin: 0; padding: 0; }
.assure li { display: flex; gap: 14px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-soft); }
.assure li > :is(svg, .gi) { width: 30px; height: 30px; flex: 0 0 auto; color: var(--navy); }
.assure li > svg { width: 22px; height: 22px; margin: 4px; color: var(--stock-in); }
.assure > a { display: flex; align-items: center; gap: 6px; padding: 12px 18px; font-size: 14.5px; text-decoration: none; }
.assure > a:hover { background: var(--aqua-tint); }
.assure > a :is(svg, .gi) { width: 14px; height: 14px; }

/* Basket lines */
.line-qty { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 12px; }
.line-qty .meta { margin-bottom: 0; align-self: center; }
.line .savings {
	display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--stock-in);
	padding: 4px 10px 4px 8px; background: #ecf7f0; border-left: 3px solid var(--stock-in);
}

/* Recommended food on a basket line. Under the line by default, spanning
   everything but the photo (the whole width on a phone); in the empty gap
   between the details and the total once the basket column is wide enough
   for all four to sit side by side. */
.basket-main { container: basketmain / inline-size; }
.line { scroll-margin-top: 120px; }
.line-food { grid-column: 2 / -1; }
.food-same { margin: 0; font-size: 13.5px; color: var(--ink-faint); padding-left: 12px; border-left: 3px solid var(--aqua-line); }
@media (max-width: 640px) { .line-food { grid-column: 1 / -1; } }
@container basketmain (min-width: 760px) {
	.line.has-food { grid-template-columns: 108px minmax(0, 1fr) minmax(250px, 310px) auto; }
	.line.has-food .line-food { grid-column: 3; grid-row: 1; }
	.line.has-food .right { grid-column: 4; grid-row: 1; }
}

/* The food itself: a tinted panel of one to three small rows, each with its
   own Add. Name across the top and price beside the button when the panel is
   narrow; one row each when there is room. */
.food-picks { container: foodpicks / inline-size; background: var(--aqua-tint); border-left: 3px solid var(--cyan); padding: 10px 12px 12px; }
.food-head {
	display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
	font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-dark);
}
.food-head::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.food-picks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.food-pick {
	display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "img name name" "img price add";
	gap: 4px 10px; align-items: center; background: #fff; border: 1px solid var(--aqua-line); padding: 6px;
}
.food-pick img { grid-area: img; width: 52px; height: 52px; object-fit: contain; align-self: start; }
.food-name {
	grid-area: name; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--navy); text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.food-name:hover { text-decoration: underline; }
.food-price { grid-area: price; display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.food-price s { color: var(--ink-faint); font-size: 12px; }
.food-price b { color: var(--navy); font-weight: 800; }
.food-price b.sale { color: var(--sale); }
.food-add {
	grid-area: add; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
	padding: 0 14px; border: 0; background: var(--cyan); color: var(--navy-ink); cursor: pointer;
	font: inherit; font-weight: 800; font-size: 13.5px; font-stretch: 106%; transition: background .15s, color .15s;
}
.food-add .gi { width: 20px; height: 20px; }
.food-add:hover, .food-add:focus-visible { background: var(--navy); color: #fff; }
@container foodpicks (min-width: 360px) {
	.food-pick { grid-template-areas: "img name add" "img price add"; }
	.food-pick img { align-self: center; }
	.food-name { align-self: end; }
	.food-price { align-self: start; }
	.food-add { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .food-add { transition: none; } }

/* On the product page, under the buy box. */
.pdp-food { margin-top: 18px; }

/* The order summary: a navy-capped panel with the total set large. */
.summary { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--navy); padding: 22px 24px 24px; position: sticky; top: calc(var(--header-h, 146px) + 18px); box-shadow: var(--shadow-lift); }
.summary h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.sumtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 3px solid var(--navy); margin-top: 12px; padding-top: 14px; }
.sumtotal span { font-size: 13px; font-weight: 800; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.sumtotal b { font-size: 32px; font-weight: 800; font-stretch: 110%; color: var(--navy); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* How close the basket is to the livestock minimum, as a segmented tank
   gauge: ten cells, filled from the left. */
.progress-note {
	position: relative; background: var(--canvas); border: 0; border-left: 4px solid var(--cyan);
	padding: 14px 16px 16px; font-size: 14px; color: var(--ink-soft); margin-bottom: 18px;
}
.progress-note b { display: block; color: var(--navy); font-size: 15px; font-stretch: 106%; margin-bottom: 4px; }
.progress-bar {
	display: block; height: 14px; margin-top: 12px; background: var(--aqua-line); overflow: hidden;
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
	mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
}
.progress-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--navy)); }

.paylogos { display: flex; gap: 0; flex-wrap: wrap; justify-content: center; margin-top: 16px; border: 1px solid var(--line); }
.paylogos span { flex: 1 1 33%; text-align: center; padding: 7px 6px; font-size: 11px; font-weight: 800; color: var(--navy); letter-spacing: .06em; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.secure-note { display: flex; align-items: center; gap: 9px; justify-content: center; font-size: 13px; color: var(--ink-soft); margin-top: 14px; }
.secure-note :is(svg, .gi) { width: 22px; height: 22px; color: var(--navy); }

/* Checkout blocks: the step number is a navy tab flush with the block's edge. */
.co-block > h2 {
	font-size: 18px; padding: 0 22px 0 0; margin: 0; border-bottom: 1px solid var(--line);
	display: flex; align-items: stretch; gap: 16px; background: #fff; min-height: 56px;
}
.co-block > h2 i {
	width: 56px; background: var(--navy); color: var(--cyan); display: grid; place-items: center;
	font-size: 20px; font-style: normal; font-weight: 800; font-stretch: 115%; flex: 0 0 auto;
}
.co-block > h2 { line-height: 56px; }
/* The same tab holding an icon instead of a step number (the order
   confirmation). Unsized, the icon fell back to a few pixels in the corner. */
.co-block > h2 > .gi {
	width: 56px; height: auto; align-self: stretch; flex: 0 0 auto; box-sizing: border-box;
	padding: 15px; background: var(--navy); color: var(--cyan);
}
.co-summary > h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 16px 20px; margin: 0; background: var(--navy); color: #fff; border-bottom: 0; }
.co-summary { border-top: 0; }

/* Folding the filters on a phone (site.js adds .can-refine). */
.refine-toggle { display: none; }
@media (max-width: 900px) {
	.can-refine .refine-toggle {
		display: flex; align-items: center; gap: 10px; width: 100%; margin: 16px 0 0; padding: 13px 16px;
		border: 0; background: var(--navy); color: #fff; cursor: pointer; text-align: left;
		font-weight: 800; font-size: 15px; font-stretch: 108%;
	}
	.can-refine .refine-toggle em { font-style: normal; font-size: 12px; background: var(--cyan); color: var(--navy-ink); padding: 2px 7px; }
	.can-refine .refine-toggle svg { margin-left: auto; width: 18px; height: 18px; color: var(--cyan); transition: transform .2s ease; }
	.can-refine .refine-open .refine-toggle svg { transform: rotate(45deg); }
	.can-refine .facets:not(.refine-open) > form { display: none; }
	.can-refine .facets { padding-bottom: 16px; }
}

/* Radios square too, like everything else: a navy frame with a solid square
   inside when chosen. */
.choice input[type=radio] {
	appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto;
	border: 2px solid var(--navy); background: #fff; display: grid; place-content: center; cursor: pointer;
}
.choice input[type=radio]::before { content: ''; width: 10px; height: 10px; background: var(--cyan); transform: scale(0); transition: transform .12s ease; }
.choice input[type=radio]:checked::before { transform: scale(1); }
.choice input[type=radio]:disabled { border-color: var(--line); cursor: not-allowed; }
.choice input[type=radio]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Gift voucher, in the payment step. It sits in the list with the other ways
   of paying and looks like them, with a code box where the radio would be,
   because a voucher is typed in rather than ticked. The inputs are restyled
   from scratch: `.choice input` sizes every input in a choice as a radio. */
.voucher-choice { cursor: default; }
.voucher-choice:hover { background: #fff; }
.voucher-choice.on:hover { background: var(--aqua-tint); }
.voucher-choice > .vc-mark { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; color: var(--navy); }
.voucher-choice > .vc-mark svg { width: 20px; height: 20px; }
.choice .voucher-entry { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.choice .voucher-entry input {
	flex: 1 1 220px; width: auto; height: auto; min-width: 0; margin: 0; accent-color: auto;
	border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; font-size: 16px;
	font-family: inherit; color: var(--ink); background: #fff; text-transform: uppercase; letter-spacing: .05em;
}
.choice .voucher-entry input:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(45 180 219 / .18); }
.choice .voucher-entry .btn { flex: 0 0 auto; padding: 0 20px; min-height: 48px; }
.choice .voucher-note { margin-top: 10px; font-size: 14px; font-weight: 600; }
.choice .voucher-note.bad { color: var(--sale); }
.choice .voucher-note.good { color: var(--stock-in); }
.voucher-applied { margin-top: 12px; border-top: 1px solid var(--aqua-line); }
.voucher-applied .va { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--aqua-line); }
.voucher-applied .va b { display: inline; font-size: 15px; letter-spacing: .03em; }
.voucher-applied .va .vl { display: block; color: var(--ink-soft); font-size: 13.5px; }
/* `.choice span` makes every span a block, which broke "£25.00 off this order,
   £0.00 left on it afterwards" into four lines. These two stay in the sentence. */
.choice .voucher-applied .vl span { display: inline; font-size: inherit; color: inherit; }
.voucher-applied .va button {
	flex: 0 0 auto; background: none; border: 0; padding: 8px 0; cursor: pointer;
	color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline;
}
.sumrow.sumdue { border-top: 1px solid var(--aqua-line); margin-top: 8px; padding-top: 12px; }
.sumrow.sumdue span { color: var(--navy); font-weight: 700; }
.sumrow.sumdue b { font-size: 20px; }

/* ============================================================
   Legibility floor
   Anything that reads as a sentence is at least 17px on a desktop and 16px on
   a phone, and everything a thumb has to hit is at least 44px tall on a phone.
   Short labels (a category, a price, "In stock") are left small on purpose.
   ============================================================ */
.announce { font-size: 17px; }
.trust > span:not(.trust-art) > span, .range span, .featlist span, .assure li, .alert, .alert > div > b:first-child,
.site-footer a, .site-footer .promise li, .footer-bottom .wrap,
.cat-hero-copy, .cat-hero-copy p, .browse-list a { font-size: 17px; }
.cat-hero-copy h2, .cat-hero-copy h3, .cat-hero-copy h4 { font-size: 18px; }
.pcard-body h3 { font-size: 17px; }
/* The title link fills two lines of height, so every label lines up and the
   link is a proper target rather than a line of text. */
.pcard-body h3 a { display: block; min-height: max(2.7em, 44px); }
@media (max-width: 980px) {
	.trust > span:not(.trust-art) > span, .range span, .featlist span, .assure li, .alert, .alert > div > b:first-child,
	.site-footer a, .site-footer .promise li, .footer-bottom .wrap,
	.cat-hero-copy, .cat-hero-copy p, .browse-list a, .pcard-body h3 { font-size: 16px; }

	.announce { padding: 0; font-size: 15px; }
	.announce a { min-height: 44px; }
	.navtoggle { width: 44px; height: 44px; }
	.brand { min-height: 44px; }
	.headsearch input, .headsearch button { height: 44px; }
	.headsearch button { width: 44px; }
	.hero-chips a { min-height: 44px; display: inline-flex; align-items: center; }
	.crumbs { padding-block: 4px; }
	.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
	.catcopy-more { min-height: 44px; }
	.shop-toolbar select { min-height: 44px; }
	.pagination a, .pagination span { min-width: 44px; height: 44px; }
	.site-footer .contact a, .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* The selling points sit on a faint drawn water line, so the band between the
   hero and the first section is never a flat strip of white. */
.trustbar {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 30c20-10 40-10 60 0s40 10 60 0 40-10 60 0 40 10 60 0' fill='none' stroke='%23cfe8f2' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom / 240px 40px,
		linear-gradient(180deg, #fff 55%, var(--aqua-tint));
}

/* Header link icons are masks on a pseudo element (glyph_mask()), so each
   link's own content is just its label. */
.headlink::before {
	content: ''; width: 30px; height: 30px; background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
@media (max-width: 980px) { .headlink::before { width: 26px; height: 26px; } }

/* The whole card is the link to the fish; the add button sits above it. */
.pcard-body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pcard-body h3 a:focus-visible { outline: 0; }
.pcard:has(h3 a:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pcard-foot form, .pcard-add { position: relative; z-index: 2; }

/* The photograph beside "About this fish" follows the text down. Clears the
   sticky header, which is the white bar and the blue nav together. */
.split .media.sticky-media { position: sticky; top: 170px; align-self: start; }
@media (max-width: 900px) { .split .media.sticky-media { position: relative; top: auto; } }

/* The shop's videos of the fish, on a product beside "About this fish" and on a
   range in the "see them before you buy" band (30 October 2026). Most are
   upright YouTube Shorts, so the frame is sized from the screen height and
   never runs past the screen below the sticky header; a wide video takes the
   column's width. */
.video-slot { --media-cap: min(calc(100svh - 230px), 760px); position: relative; }
.split .video-slot.sticky-media { position: sticky; top: 170px; align-self: start; }
.cta-band .video-slot { --media-cap: min(64vh, 620px); }
.video-frame {
	position: relative; width: 100%; aspect-ratio: 16 / 9; margin-inline: auto;
	background: var(--navy-deep); box-shadow: var(--shadow-lift); border-radius: 0; overflow: hidden;
}
.video-frame.is-tall { aspect-ratio: 9 / 16; width: min(100%, calc(var(--media-cap) * 9 / 16)); }
.video-frame:not(.is-tall) { max-width: calc(var(--media-cap) * 16 / 9); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
	.split .video-slot.sticky-media { position: relative; top: auto; }
	.video-slot { --media-cap: min(70svh, 640px); }
}
.pdp-note { color: var(--ink-soft); font-size: 17px; margin-top: -8px; }
.pdp-note :is(svg, .gi) { display: inline-block; vertical-align: -3px; margin-right: 4px; color: var(--cyan-dark); }
.pdp-meta { margin-top: 18px; color: var(--ink-faint); font-size: 17px; }
@media (max-width: 980px) { .pdp-note, .pdp-meta { font-size: 16px; } }

/* The hero search on a phone: the box gives way rather than pushing the
   button off the side of the screen. */
.hero-search input { min-width: 0; }
@media (max-width: 560px) { .hero-search .btn { padding-inline: 18px; } }

/* The photographed one-offs on the homepage. Each koi is a tall photograph,
   and at its own shape a row of them ran past the bottom of the screen. Here
   the frame is shorter and the whole fish is shown inside it, on dark water,
   rather than cropped: the head and tail are the point of the photograph. */
.products.frame-contain .pcard-media { aspect-ratio: 4 / 5 !important; background: var(--navy-deep); }
.products.frame-contain .pcard-media img { object-fit: contain; }
/* The label is just its text, with no box of its own taller than the words. */
.headlink > span:not(.count) { display: contents; }

/* Each sidebar group folds. The numbered title is the control, with a plus
   that turns to a minus when it is open. */
.facets .facet { padding: 0; }
.facets .facet[open] { padding-bottom: 18px; }
summary.facet-title { list-style: none; cursor: pointer; margin: 0; padding: 16px 0; min-height: 44px; }
summary.facet-title::-webkit-details-marker { display: none; }
.facet[open] > summary.facet-title { padding-bottom: 12px; }
.facet > summary.facet-title { position: relative; padding-right: 22px; }
.facet:not([open]) > summary.facet-title { color: var(--ink-soft); }
.facet > summary.facet-title:hover { color: var(--navy); }
.facets .facet > summary.facet-title { background-image:
	linear-gradient(var(--cyan-dark), var(--cyan-dark)), linear-gradient(var(--cyan-dark), var(--cyan-dark));
	background-repeat: no-repeat; background-size: 12px 2px, 2px 12px;
	background-position: right 2px center, right 7px center; }
.facets .facet[open] > summary.facet-title { background-size: 12px 2px, 0 0; }
.facets > .facet:first-of-type > summary.facet-title { padding-top: 14px; }

/* The delivery promises under the buy box: the four points side by side, each
   led by its icon, on the drawn water line the selling points use. */
.pdp-band {
	padding-block: clamp(32px, 4vw, 52px);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 30c20-10 40-10 60 0s40 10 60 0 40-10 60 0 40 10 60 0' fill='none' stroke='%23cfe8f2' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom / 240px 40px,
		#fff;
}
.assure-wide ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.assure-wide li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-bottom: 0; border-left: 1px solid var(--line-soft); }
.assure-wide li:first-child { border-left: 0; }
.assure-wide li > :is(svg, .gi) { width: 40px; height: 40px; }
.assure-wide > a { border-top: 1px solid var(--line-soft); }
.pdp-band .pdp-meta { margin-bottom: 0; }
@media (max-width: 900px) {
	.assure-wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.assure-wide li:nth-child(3) { border-left: 0; }
	.assure-wide li:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 480px) {
	.assure-wide ul { grid-template-columns: minmax(0, 1fr); }
	.assure-wide li { flex-direction: row; align-items: center; border-left: 0; border-top: 1px solid var(--line-soft); }
	.assure-wide li:first-child { border-top: 0; }
}
.alert > div > p { margin: 0; }

/* The drawn water line along the foot of a band, for sections that are all
   form or all text: the basket and the checkout. */
.band-water {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 30c20-10 40-10 60 0s40 10 60 0 40-10 60 0 40 10 60 0' fill='none' stroke='%23cfe8f2' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom / 240px 40px,
		linear-gradient(180deg, #fff 60%, var(--aqua-tint));
}

/* The product photograph is sized from the screen height and its column
   shrinks to it, so the buy box beside it is as tall as the picture rather
   than stopping half way down it. */
@media (min-width: 901px) {
	.pdp { grid-template-columns: auto minmax(0, 1fr); }
	.pdp .gallery-main { width: fit-content; }
	.pdp .gallery-main img { height: min(56vh, 560px); width: auto; max-width: min(46vw, 640px); }
}
.pdp-promises {
	list-style: none; margin: 0 0 18px; padding: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 22px;
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	font-size: 15px; font-weight: 700; color: var(--navy);
}
.pdp-promises li { display: inline-flex; align-items: center; gap: 8px; }
.pdp-promises :is(svg, .gi) { width: 26px; height: 26px; color: var(--cyan-dark); }
.pdp .care { margin: 20px 0 18px; }
.pdp-quarantine { margin: 0; }
@media (max-width: 980px) { .browse-up { min-height: 44px; } }

/* ============================================================
   Aqua Points
   The points row in the payment step is shaped like the gift voucher row
   beside it. Its sentences keep their bold words inline, because
   `.choice b` makes every b in a choice a block of its own.
   ============================================================ */
.points-choice .t > span b, .points-choice .t > span a { display: inline; font-size: inherit; }
.points-earn {
	display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px;
	background: var(--aqua-tint); border-left: 4px solid var(--cyan); color: var(--navy);
	font-size: 16px; font-weight: 600; line-height: 1.45;
}
.points-earn[hidden] { display: none; }
.points-earn :is(svg, .gi) { flex: 0 0 auto; width: 24px; height: 24px; color: var(--cyan-dark); }
.points-earn b { font-weight: 800; }
.points-earn a { color: var(--cyan-dark); font-weight: 700; }
.pdp-points {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px;
	font-size: 17px; font-weight: 600; color: var(--navy);
}
.pdp-points :is(svg, .gi) { flex: 0 0 auto; width: 26px; height: 26px; color: var(--cyan-dark); }
.pdp-points a { color: var(--cyan-dark); font-weight: 700; }
/* The points tile on the account page is a link to the points page. */
a.acct-stat-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease; }
a.acct-stat-link:hover, a.acct-stat-link:focus-visible { border-color: var(--cyan); background: var(--aqua-tint); }

/* ============================================================
   The two scheme pages: Aqua Points and Subscribe and save
   ============================================================ */
.scheme-hero .crumbs { color: #9fc0d9; padding: 0 0 18px; }
.scheme-hero .crumbs a { color: #cfe0ee; }
.scheme-hero .crumbs a:hover { color: #fff; }
.scheme-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.scheme-bonus { background: var(--cyan); color: var(--navy-ink); }
.scheme-bonus .wrap { display: flex; align-items: center; gap: 12px; padding-block: 14px; font-size: 17px; }
.scheme-bonus :is(svg, .gi) { width: 30px; height: 30px; flex: 0 0 auto; }
.scheme-steps { list-style: none; margin: 0; padding: 0; }
.scheme-steps .step p { font-size: 16px; }

/* Worked examples, each in a tile marked with the viewfinder corners the
   trust bar uses, so the page reads as part of the same shop. */
.pts-examples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pts-example {
	position: relative; background: #fff; box-shadow: var(--shadow);
	padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 4px;
}
.pts-example::before, .pts-example::after { content: ''; position: absolute; width: 18px; height: 18px; border: 0 solid var(--cyan); }
.pts-example::before { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.pts-example::after { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }
.pts-example .lab { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-dark); }
.pts-example b { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-stretch: 112%; color: var(--navy); line-height: 1.1; }
.pts-example .off { font-size: 17px; font-weight: 700; color: var(--stock-in); }
.pts-example .what { font-size: 16px; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 980px) { .pts-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pts-examples { grid-template-columns: minmax(0, 1fr); } }

.qa-list { margin: 22px 0 0; }
.qa-list dt { font-weight: 800; color: var(--navy); font-size: 18px; font-stretch: 106%; margin-top: 18px; }
.qa-list dt:first-child { margin-top: 0; }
.qa-list dd { margin: 4px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }

/* Subscribe and save on a product page, under the buy box. */
.subsave { margin: 16px 0 18px; padding: 16px 18px; background: var(--aqua-tint); border-left: 4px solid var(--cyan); }
.subsave-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; font-size: 16px; color: var(--ink-soft); line-height: 1.5; }
.subsave-head :is(svg, .gi) { flex: 0 0 auto; width: 30px; height: 30px; color: var(--cyan-dark); }
.subsave-head b { display: block; color: var(--navy); font-size: 17px; font-stretch: 106%; }
.subsave-row { display: flex; gap: 10px; flex-wrap: wrap; }
.subsave-row select {
	flex: 1 1 180px; min-height: 48px; border: 1px solid var(--line); border-radius: 0; padding: 0 14px;
	font: inherit; font-size: 16px; color: var(--ink); background: #fff;
}
.subsave-row .btn { flex: 0 0 auto; }

/* Back in stock alert, in the buy box of a sold out product. The subscribe and
   save panel's shape, in the amber of "out of stock". */
.restock { margin: 20px 0 18px; padding: 16px 18px; background: var(--amber-tint); border-left: 4px solid var(--amber); }
.restock-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; font-size: 16px; color: var(--ink-soft); line-height: 1.5; }
.restock-head :is(svg, .gi) { flex: 0 0 auto; width: 30px; height: 30px; color: var(--navy); }
.restock-head b { display: block; color: var(--navy); font-size: 17px; font-stretch: 106%; }
.restock-row { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.restock-row input[type="email"] {
	flex: 1 1 220px; min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 0; padding: 0 14px;
	font: inherit; font-size: 16px; color: var(--ink); background: #fff;
}
.restock-row input[type="email"]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; border-color: var(--navy); }
.restock-row input[aria-invalid="true"] { border-color: var(--danger, #c0392b); }
.restock-row .btn { flex: 0 0 auto; }
.restock-on, .restock-reply { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.restock-on :is(svg, .gi), .restock-reply :is(svg, .gi) { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.restock-on :is(svg, .gi), .restock-reply.is-ok :is(svg, .gi) { color: var(--stock-in); }
.restock-reply { margin-top: 12px; font-weight: 600; }
.restock-reply.is-no :is(svg, .gi) { color: var(--danger, #c0392b); }
.restock-on a { font-weight: 700; margin-left: 4px; }
.restock-phone { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.restock-phone a { font-weight: 700; }
@media (max-width: 480px) { .restock-row .btn { flex: 1 1 100%; } }
/* A form button that reads as a link, for a quiet second choice. */
.linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--cyan-dark); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--navy); }
.linkbtn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* The trap field on public forms (BotGuard). Off the screen rather than
   display:none, which some scripts know to skip. Named plainly, because
   blockers hide elements called "honeypot". */
.fm-extra { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.subsave-row .btn.is-in-box, .btn.is-in-box { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.is-in-box:hover { background: var(--cyan-dark); border-color: var(--cyan-dark); color: #fff; }

/* On a card: already in the box, so the button goes to the box instead. */
.pcard-add.is-in-box { background: var(--navy); color: #fff; text-decoration: none; }
.pcard-add.is-in-box:hover { background: var(--cyan-dark); color: #fff; }

/* The subscription box in the header, shown once something is in it. */
.headlink[hidden] { display: none; }
.headlink .hl-short { display: none; }
/* On a phone the four links share the row with the burger and the logo. The
   long label and the usual padding pushed them onto a row of their own, and
   the sticky header grew by a third. */
@media (max-width: 980px) {
	.headlink .hl-long { display: none; }
	.headlink .hl-short { display: inline; }
}
/* A narrow phone has room for four icons beside the logo, not four labelled
   ones, so with the subscription box showing the words go (still read out)
   and each link keeps the height it had, so the header does not jump. */
@media (max-width: 440px) {
	.headlinks.has-box .headlink { min-height: 56px; justify-content: center; padding-inline: 5px; }
	.headlinks.has-box .headlink > span:not(.count) {
		display: block; position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip-path: inset(50%); white-space: nowrap;
	}
	.headlinks.has-box .headlink .count { right: -2px; }
}
.headlink.bump .count { animation: box-bump .6s cubic-bezier(.2,.7,.3,1); }
@keyframes box-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.headlink.bump::before { animation: box-nudge .6s cubic-bezier(.2,.7,.3,1); }
@keyframes box-nudge { 0%, 100% { transform: none; } 35% { transform: translateY(-4px) rotate(-6deg); } }
/* The photograph that flies from the card to the header icon. */
.fly-to-box {
	position: fixed; z-index: 300; pointer-events: none; margin: 0; object-fit: cover;
	border: 3px solid var(--cyan); box-shadow: 0 12px 30px -10px rgb(2 29 56 / .5);
}
@media (prefers-reduced-motion: reduce) {
	.headlink.bump .count, .headlink.bump::before { animation: none; }
}

.box-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translateX(-50%);
	max-width: min(92vw, 520px); padding: 14px 18px; background: var(--navy-ink); color: #fff;
	font-size: 15px; box-shadow: 4px 4px 0 var(--cyan);
}

/* Every range on subscribe and save, one button each. */
.rangechips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.rangechips a {
	display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px;
	background: #fff; border: 1px solid var(--line); color: var(--navy); text-decoration: none;
	font-size: 14px; font-weight: 600; transition: border-color .15s, background .15s, box-shadow .15s;
}
.rangechips a small { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }
.rangechips a:hover { border-color: var(--navy); }
.rangechips a.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 3px 3px 0 var(--cyan); }
.rangechips a.on small { color: var(--cyan-light); }
.subsave-add {
	margin-top: 10px; padding: 8px 0; background: none; border: 0; cursor: pointer; text-align: left;
	color: var(--navy); font: inherit; font-size: 16px; font-weight: 700; text-decoration: underline;
}

/* A subscription's controls reuse the postcode row: a box and its button side
   by side. A select or a date in it shares the row rather than taking the full
   width, which pushed its button onto a line of its own. */
.postcode-row select, .postcode-row input[type=date] { flex: 1 1 160px; width: auto; min-width: 0; max-width: none; text-transform: none; }
.postcode-row input[type=date] { font-family: inherit; }
/* On a phone the scheme pages' copy runs across the whole photograph, so the
   water is darkened evenly behind it rather than only on the left. */
@media (max-width: 760px) {
	.scheme-hero .hero-media::after { background: linear-gradient(180deg, rgb(2 29 56 / .82) 0%, rgb(2 29 56 / .9) 100%); }
}
/* The card's add button took its height from the price beside it, 38px on a
   phone. A thumb needs 44. */
.pcard-add { min-height: 44px; }
/* A photograph faintly behind a band of tiles, so the band is never a flat
   colour: the worked examples on the Aqua Points page. */
.pts-worth { overflow: clip; }
.pts-worth > .section-bg {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: .14; filter: saturate(.85); z-index: 0; pointer-events: none;
}

/* ---------- Finding us (the Click and Collect page) ----------
   The shop's directions QR as the picture, in a navy frame with its label
   cut into the top edge like the temperament tags, and a cyan line that keeps
   sweeping down it the way a phone camera reads one. On a phone the words and
   the Maps button come first, because nobody can scan their own screen. */
.find-us-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
	gap: clamp(28px, 5vw, 72px); align-items: center;
}
.find-us-copy p { color: var(--ink-soft); font-size: 18px; line-height: 1.7; margin: 0 0 22px; }
.find-us-address {
	display: grid; gap: 2px; font-style: normal; font-size: 18px; color: var(--ink);
	padding: 14px 0 14px 20px; border-left: 4px solid var(--cyan); margin: 0 0 26px;
}
.find-us-address b { color: var(--navy); font-stretch: var(--wide); }
.find-us-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.find-us-qr { margin: 0; }
.find-us-code {
	position: relative; display: block; overflow: hidden; background: #fff;
	border: 6px solid var(--navy-deep); box-shadow: var(--shadow-lift);
	padding: 44px 22px 22px; transition: box-shadow .2s, transform .2s;
}
.find-us-code:hover { box-shadow: 10px 10px 0 var(--cyan-light); transform: translate(-2px, -2px); }
.find-us-code img { display: block; width: 100%; height: auto; }
.find-us-tag {
	position: absolute; top: 0; left: 0; right: 0; padding: 9px 12px 10px; text-align: center;
	background: var(--navy-deep); color: #fff; font-size: 12.5px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.find-us-scan {
	/* Covers the code itself, so the line travels exactly its height. */
	position: absolute; inset: 44px 22px 22px; pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--cyan) 18%, var(--cyan) 82%, transparent) no-repeat;
	background-size: 100% 3px; background-position: 0 0;
	filter: drop-shadow(0 0 6px rgb(45 180 219 / .8));
	animation: find-us-scan 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes find-us-scan { to { background-position: 0 100%; } }
.find-us-qr figcaption { margin-top: 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 920px) {
	.find-us-grid { grid-template-columns: minmax(0, 1fr); }
	.find-us-code { max-width: 300px; }
}
@media (max-width: 520px) {
	.find-us-actions .btn { width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	.find-us-scan { animation: none; opacity: 0; }
	.find-us-code, .find-us-code:hover { transition: none; transform: none; }
}
.choice .collect-directions { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--cyan-dark); }

/* ---------- The payment page ----------
   Stripe's form sits in the shop's own block, square like everything else
   (its corners are set to 0 in pay.js). The block holds its height while the
   form loads, so the Pay button does not jump down the page under a thumb. */
.pay-element { min-height: 220px; }
.pay-loading { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ink-soft); font-size: 15px; }
.pay-loading .gi { width: 18px; height: 18px; color: var(--cyan-dark); }
.pay-error {
	margin: 16px 0 0; padding: 12px 14px; border-left: 4px solid var(--sale);
	background: #fdeeee; color: #8f1c1c; font-weight: 600; font-size: 15px;
}
.pay-form #pay-button { margin-top: 20px; }
.pay-wallets { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); text-align: center; }
.pay-hold {
	display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px;
	background: var(--aqua-tint); border: 1px solid var(--aqua-line); border-left: 4px solid var(--cyan);
}
.pay-hold .gi { width: 22px; height: 22px; flex: none; color: var(--cyan-dark); margin-top: 1px; }
.pay-hold p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.pay-where { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--aqua-line); }
.pay-where p { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.pay-where .gi { width: 18px; height: 18px; flex: none; color: var(--cyan-dark); margin-top: 2px; }
.pay-where b { color: var(--navy); }
.choice .pay-marks { display: grid; place-items: center; color: var(--cyan-dark); }
.choice .pay-marks .gi { width: 22px; height: 22px; }
.pay-lede { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.pay-hold .gi + p a { font-weight: 700; }