/* Components only. Typography, containers and spacing live in design-system.css. */
/* HEADER */
.skip-link { position: fixed; top: -100px; left: var(--gutter); z-index: 100; padding: 12px 20px; color: var(--ink); background: var(--cyan); }
.skip-link:focus { top: 12px; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; min-height: var(--header-height); display: flex; align-items: center; background: linear-gradient(180deg,rgb(2 10 13 / 92%),rgb(2 10 13 / 50%) 75%,transparent); transition: background .25s, box-shadow .25s; }
.site-header.is-scrolled { background: rgb(3 13 17 / 95%); box-shadow: 0 1px 0 rgb(var(--accent-rgb) / 14%);  }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { position: relative; display: block; flex: 0 0 auto; width: clamp(200px, 16vw, 284px); aspect-ratio: 10 / 3; overflow: hidden; background: transparent; }
.brand-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-logo { position: absolute; top: 50%; left: -21.5%; width: 143%; height: auto; max-width: none; transform: translateY(-50%); filter: url("#brand-black-to-alpha"); }
.brand-logo--trimmed { left: 0; width: 100%; height: 100%; object-fit: contain; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px; border: 1px solid var(--cyan); border-right-color: var(--amber); border-radius: 999px; background: rgb(2 12 16 / 80%); box-shadow: -4px 0 18px rgb(var(--accent-rgb) / 18%), 4px 0 18px rgb(255 172 18 / 10%); }
.main-nav a { padding: 13px 18px; color: #e0e9ec; text-transform: uppercase; font-size: var(--text-body); font-weight: 800; letter-spacing: .025em; text-decoration: none; border-radius: 999px; white-space: nowrap; }
.main-nav a:hover { background: rgb(var(--accent-rgb) / 9%); color: var(--cyan); }
.main-nav a[aria-current="page"], .main-nav a.is-section-active { color: var(--accent); background: rgb(var(--accent-rgb) / 10%); }
.main-nav a span { color: var(--cyan); margin-left: 3px; }
.nav-products { position: relative; }
.nav-products > summary { display: flex; align-items: center; justify-content: center; gap: 9px; list-style: none; cursor: pointer; padding: 13px 18px; color: #e0e9ec; text-transform: uppercase; font-size: var(--text-body); font-weight: 800; letter-spacing: .025em; border-radius: 999px; white-space: nowrap; }
.nav-products > summary::-webkit-details-marker { display: none; }
.nav-products > summary:hover, .nav-products[open] > summary, .nav-products > summary.is-section-active { color: var(--accent); background: rgb(var(--accent-rgb) / 10%); }
.nav-products > summary::after { content: ''; width: 7px; height: 7px; flex: 0 0 auto; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-products[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.nav-products-panel { position: absolute; top: calc(100% + 16px); left: 0; display: grid; width: 260px; max-width: calc(100vw - 40px); padding: 8px; background: #06171c; border: 1px solid rgb(var(--accent-rgb) / 45%); border-radius: var(--radius-card); box-shadow: 0 22px 50px rgb(0 0 0 / 45%); }
.main-nav .nav-products-category { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; color: #e0e9ec; text-transform: none; font-size: var(--text-small); font-weight: 700; letter-spacing: 0; white-space: normal; }
.main-nav .nav-products-category:hover { color: var(--cyan); background: rgb(var(--accent-rgb) / 10%); }
.nav-products > summary:focus-visible, .nav-products-panel a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .account-button { text-decoration: none; }
.icon-button, .search-button, .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid rgb(var(--accent-rgb) / 70%); border-radius: 999px; color: #e0e9ec; background: rgb(2 12 16 / 80%); box-shadow: 0 0 12px rgb(var(--accent-rgb) / 12%); }
.icon-button svg, .search-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.search-button { display: flex; gap: 12px; width: 208px; padding: 0 18px; text-align: left; font-size: var(--text-body); color: #bccdd3; }
.search-button svg { color: var(--cyan); width: 21px; }
.cart-button { position: relative; }
.cart-button b { position: absolute; top: -5px; right: -3px; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: var(--amber); color: var(--ink); font-size: 11px; }
.menu-toggle { display: none; }
@media (min-width: 1200px) {
  .header-actions .icon-button { width: 52px; height: 52px; }
  .header-actions .search-button { height: 52px; }
  .header-actions .icon-button svg { width: 24px; height: 24px; }
  .cart-button b { min-width: 20px; height: 20px; font-size: 12px; }
}
@media (min-width: 1600px) {
  .header-actions .icon-button { width: 64px; height: 64px; }
  .header-actions .search-button { height: 64px; }
  .header-actions .icon-button svg { width: 28px; height: 28px; }
  .header-actions .search-button svg { width: 24px; height: 24px; }
  .cart-button b { min-width: 22px; height: 22px; }
}
/* HERO: existing photographic composition, shared text scale */
.hero { position: relative; isolation: isolate; height: min(100svh, 1000px); min-height: 720px; overflow: hidden; background: var(--ink-deep); }
.hero-shade { position: absolute; inset: 0; z-index: -3; display: block; }
.hero-shade > img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; transform: scale(1.04); transform-origin: center; filter: saturate(1.04) contrast(1.03); }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg,rgb(2 10 13 / 76%) 0%,rgb(2 10 13 / 48%) 24%,rgb(2 10 13 / 18%) 46%,rgb(2 10 13 / 10%) 66%,rgb(2 10 13 / 16%) 100%), linear-gradient(180deg,rgb(2 10 13 / 8%),transparent 72%,rgb(2 10 13 / 22%)); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg,transparent,var(--cyan),var(--amber),transparent); opacity: .45; }
.hero-layout { position: relative; height: 100%; }
.hero-content { position: absolute; top: 22%; left: 0; z-index: 5; width: 44%; max-width: 640px; }
.hero h1 { text-shadow: 0 4px 22px rgb(0 0 0 / 55%); }
.hero h1::after { content: ""; display: block; width: 120px; height: 2px; margin-top: 16px; background: linear-gradient(90deg,#fff,var(--cyan),transparent); }
.hero-lead { max-width: 470px; margin-top: 24px; color: #f1f6f7; text-shadow: 0 3px 14px rgb(0 0 0 / 70%); }
.hero-lead strong { color: var(--cyan); }
.hero-content .button { margin-top: 32px; }
.hero-fisherman { display: none; }
.hero-fisherman > img { width: 100%; height: auto; }
.flavour-stage { --stage-size: clamp(430px, 33vw, 680px); position: absolute; width: var(--stage-size); height: var(--stage-size); right: clamp(18px, 3vw, 58px); top: 52%; transform: translateY(-50%); }
.flavour-stage-rings { z-index: 3; pointer-events: none; }
.flavour-stage-content { z-index: 5; border-radius: 50%; touch-action: pan-y; }
.orbit-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle,rgb(0 10 13 / 94%) 0 38%,rgb(0 8 11 / 78%) 56%,rgb(0 8 11 / 38%) 74%,transparent 86%), radial-gradient(circle at 50% 50%, rgb(0 228 228 / 10%), transparent 58%); box-shadow: inset 0 0 70px rgb(0 0 0 / 68%); }
.orbit-ring, .orbit-dashes { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-ring { inset: 18%; border: 2px solid var(--cyan); border-right-color: var(--amber); box-shadow: 0 0 20px rgb(var(--accent-rgb) / 30%); animation: ring-spin 24s linear infinite; animation-play-state: paused; }
.orbit-dashes { inset: 3%; border: 1px dashed rgb(var(--accent-rgb) / 75%); border-right-color: var(--amber); animation: ring-spin-reverse 38s linear infinite; animation-play-state: paused; }
.orbit-dashes::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgb(var(--accent-rgb) / 18%); border-radius: 50%; }
.flavour-stage.is-highlighted .orbit-ring { box-shadow: 0 0 36px rgb(var(--accent-rgb) / 65%); }
.water-splash { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 0 20px rgb(var(--accent-rgb) / 45%)); pointer-events: none; transition: opacity .2s, transform .3s; }
.product-focus { position: absolute; z-index: 4; inset: 24%; display: grid; place-items: center; border-radius: 50%; }
.product-focus > img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.14); transition: opacity .2s, transform .3s; }
.product-focus.is-changing > img, .flavour-stage.is-changing .water-splash { opacity: 0; transform: scale(.95); }
.focus-halo { display: none; }
.product-caption { position: absolute; bottom: -3%; left: 50%; transform: translateX(-50%); padding: 8px 24px; min-width: 148px; text-align: center; white-space: nowrap; background: rgb(2 12 16 / 96%); border: 1px solid var(--cyan); border-right-color: var(--amber); border-radius: 999px; box-shadow: 0 0 16px rgb(var(--accent-rgb) / 22%); }
.product-caption strong { font-family: var(--font-body); font-size: var(--text-small); font-weight: 800; }
.product-caption span, .product-caption small { display: none; }
.orbit-item { --x: 50%; --y: 0%; position: absolute; z-index: 6; left: var(--x); top: var(--y); width: clamp(94px, 7.5vw, 148px); padding: 0; border: 0; transform: translate(-50%,-50%); background: none; color: var(--white); transition: transform .2s; }
.orbit-item:hover { transform: translate(-50%,-50%) scale(1.07); }
.orbit-item img { width: 100%; height: clamp(64px, 5.6vw, 110px); object-fit: contain; filter: drop-shadow(0 7px 10px rgb(0 0 0 / 70%)); }
.orbit-item span { display: block; width: max-content; min-width: 100px; max-width: 100%; margin: -3px auto 0; padding: 6px 12px; border: 1px solid var(--cyan); border-radius: 999px; background: rgb(2 12 16 / 97%); box-shadow: 0 0 10px rgb(var(--accent-rgb) / 22%); font: 800 var(--text-eyebrow) / 1.2 var(--font-body); white-space: nowrap; }
.orbit-item[data-accent="amber"] span { border-color: var(--amber); }
.orbit-item.is-active { display: none; }
.orbit-item[data-orbit-slot="0"] { --x: 25%; --y: 7%; }
.orbit-item[data-orbit-slot="1"] { --x: 75%; --y: 7%; }
.orbit-item[data-orbit-slot="2"] { --x: 8%; --y: 55%; }
.orbit-item[data-orbit-slot="3"] { --x: 92%; --y: 55%; }
.orbit-item[data-orbit-slot="4"] { --x: 50%; --y: 94%; }
.slider-arrow { position: absolute; z-index: 9; top: 47%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cyan); border-radius: 50%; background: rgb(2 12 16 / 95%); color: var(--white); font: 400 32px / 1 Arial,sans-serif; box-shadow: 0 0 12px rgb(var(--accent-rgb) / 28%); }
.slider-prev { left: 15%; }
.slider-next { right: 15%; border-color: var(--amber); }
.slide-count, .scroll-hint { display: none; }
/* BENEFIT STRIP */
.benefits { position: relative; padding-block: 40px; color: var(--text-on-light); background: var(--surface); }
.benefits-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.benefit-card { display: flex; align-items: center; min-width: 0; gap: 16px; padding-inline: 24px; }
.benefit-card:first-child { padding-left: 0; }
.benefit-card:last-child { padding-right: 0; }
.benefit-card + .benefit-card { border-left: 1px solid var(--border-light); }
.benefit-icon { flex: 0 0 64px; width: 64px; }
.benefit-icon img { width: 64px; height: 64px; object-fit: contain; }
.benefit-label { font: 400 var(--text-label) / 1.35 var(--font-heading); text-transform: uppercase; }
.benefit-accent { display: block; width: 40px; height: 2px; margin-block: 10px; background: linear-gradient(90deg,var(--cyan) 70%,var(--amber) 70%); }
.benefit-copy > p:last-child { color: var(--text-muted-on-light); font-size: var(--text-small); line-height: 1.5; }
/* FULL-WIDTH STORY */
.story-visual { display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.story-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; }
.story-section { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(620px, 41.67vw, 800px); background: var(--ink); }
.story-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgb(2 12 16 / 94%) 0%,rgb(2 12 16 / 82%) 26%,rgb(2 12 16 / 20%) 64%,rgb(2 12 16 / 4%)),linear-gradient(0deg,rgb(2 12 16 / 55%),transparent 40%); }
.story-content { width: min(600px, 48%); }
.story-eyebrow { color: var(--cyan); margin-bottom: 24px; }
.story-content h2 em { display: block; }
.story-lead { margin-top: 24px; color: #d7e1e5; }
.story-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.story-tagline { display: flex; align-items: center; gap: 16px; margin-top: 64px; color: #adbec5; font-size: var(--text-eyebrow); letter-spacing: .14em; text-transform: uppercase; }
.story-tagline span { width: 40px; height: 1px; flex: 0 0 40px; background: #9db2ba; }
/* PRODUCTS */
.products-section { background: var(--surface); color: var(--text-on-light); }
.products-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.all-products { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: var(--text-button); font-weight: 800; text-decoration: none; white-space: nowrap; }
.product-grid { display: grid; grid-template-columns: repeat(var(--home-product-count,5),minmax(0,1fr)); gap: var(--grid-gap); }
.shop-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s; }
.shop-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgb(3 21 28 / 12%); }
.shop-card > img, .shop-image-link > img, .shop-image-link > noscript > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: var(--space-3); background: #fff; }
.product-badge { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 5px 10px; border-radius: 6px; font-size: var(--text-eyebrow); font-weight: 800; }
.badge-new { background: var(--accent); }
.badge-sale { background: #e4401a; color: #fff; }
.wish-button { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #61777f; background: rgb(255 255 255 / 80%); font: 400 29px / 1 Arial,sans-serif; }
.shop-card-copy { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.shop-card h3 { margin-bottom: 8px; }
.shop-card p { color: var(--text-muted-on-light); font-size: var(--text-small); line-height: 1.6; }
.shop-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; margin-top: auto; }
.shop-card-footer strong { white-space: nowrap; font-size: var(--text-price); font-weight: 800; }
.shop-card-footer button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-control); color: var(--white); background: var(--ink); }
.shop-card-footer svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.category-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--grid-gap); margin-top: 24px; }
.category-grid > .category-card { grid-column: span 2; }
.category-grid > .category-card:nth-last-child(-n+2) { grid-column: span 3; }
@media (max-width: 899px) { .category-grid > .category-card, .category-grid > .category-card:nth-last-child(-n+2) { grid-column: auto; } }
.category-card { position: relative; isolation: isolate; min-height: 264px; overflow: hidden; border-radius: var(--radius-card); background: var(--ink); box-shadow: var(--shadow-card); }
.category-card > img, .category-card > noscript > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; transition: transform .35s; }
.category-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgb(2 12 16 / 97%),rgb(2 12 16 / 70%) 42%,rgb(2 12 16 / 5%) 100%); }
.category-card:hover > img, .category-card:hover > noscript > img { transform: scale(1.035); }
.category-copy { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: var(--card-padding); color: var(--white); }
.category-copy h3 { max-width: 85%; }
.category-copy p { margin-top: 16px; margin-bottom: 24px; color: #d7e1e5; font-size: var(--text-body); }
.category-copy .button { margin-top: auto; }
/* BAIT GUIDE: full-bleed photograph, same content rail as every section */
.bait-guide { --guide-intro: 420px; position: relative; isolation: isolate; overflow: hidden; background: var(--ink); padding-bottom: var(--section-space); }
.bait-guide-visual { position: absolute; z-index: -2; inset: 0 0 auto; height: calc(var(--guide-intro) + 160px); overflow: hidden; pointer-events: none; }
.bait-guide-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 84%; }
.bait-guide-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgb(6 16 21 / 98%) 0%,rgb(6 16 21 / 90%) 24%,rgb(6 16 21 / 52%) 43%,rgb(6 16 21 / 8%) 68%,rgb(6 16 21 / 6%)),linear-gradient(0deg,var(--ink) 0%,rgb(6 16 21 / 90%) 8%,transparent 37%); }
.bait-guide-shell { position: relative; }
.bait-guide-hero { display: flex; align-items: center; min-height: var(--guide-intro); padding-block: var(--section-space) 48px; }
.bait-guide-copy { width: min(600px, 48%); }
.bait-guide-eyebrow { margin-bottom: 24px; }
.bait-guide-eyebrow > span:first-child { color: var(--cyan); }
.bait-guide-eyebrow .eyebrow-divider { margin-inline: 12px; color: var(--cyan); }
.bait-guide-lead { margin-top: 24px; color: #d7e1e5; }
.bait-guide-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--grid-gap); }
.bait-card { --card-accent: var(--cyan); --card-text-accent: var(--cyan-on-light); position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid rgb(255 255 255 / 30%); border-top: 3px solid var(--card-accent); border-radius: var(--radius-card); color: var(--text-on-light); }
.bait-card-amber { --card-accent: var(--amber); --card-text-accent: var(--amber-on-light); }
.bait-card-head { display: flex; align-items: center; gap: 16px; padding: var(--card-padding) var(--card-padding) 16px; }
.bait-card-icon { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; }
.bait-card-heading { min-width: 0; }
.bait-card-heading h3 { line-height: 1.2; }
.bait-card-heading h3 span { color: var(--card-text-accent); }
.bait-card-heading > p { margin-top: 8px; font-size: var(--text-eyebrow); font-weight: 800; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.bait-card-text { padding: 0 var(--card-padding) 24px; min-height: 100px; font-size: var(--text-body); color: var(--text-muted-on-light); }
.bait-card-media { position: relative; overflow: hidden; margin-top: auto; aspect-ratio: 3 / 2; background: #eef2f3; }
.bait-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.bait-card:hover .bait-card-media img { transform: scale(1.035); }
.bait-card-footer { padding: 20px var(--card-padding) 24px; background: #f4f7f8; }
.bait-card-link { width: 100%; justify-content: space-between; --button-accent: var(--card-accent); box-shadow: none; }
/* WHY ABSOLUTE BAITS: one shared light surface, photography and a 2 x 2 benefit grid. */
.why-section {
  position: relative;
  isolation: isolate;
  background: var(--surface);
  color: var(--text-on-light);
}
.why-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas: "photo intro" "photo cards";
  column-gap: var(--space-7);
  row-gap: var(--space-6);
  align-items: start;
}
.why-intro { grid-area: intro; min-width: 0; }
.why-eyebrow { margin-bottom: var(--space-5); color: var(--text-muted-on-light); }
.why-eyebrow::after {
  content: "";
  display: block;
  width: var(--space-8);
  height: 2px;
  margin-top: var(--space-3);
  background: linear-gradient(90deg, var(--cyan) 65%, var(--amber));
}
.why-intro .section-title em { color: var(--heading-accent-on-light); }
.why-lead { max-width: 60ch; margin-top: var(--space-5); color: var(--text-muted-on-light); }
.why-photo {
  grid-area: photo;
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--space-5));
  pointer-events: none;
}
.why-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* No faces or carp are cropped by cover; only the photograph's outer edge fades. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}
.why-grid {
  grid-area: cards;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  min-width: 0;
}
.why-card {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--card-padding);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.why-icon { width: var(--space-8); height: var(--space-8); }
.why-card-copy { min-width: 0; }
.why-card-copy p { color: var(--text-muted-on-light); font-size: var(--text-body); }
.why-card-accent {
  display: block;
  width: var(--space-7);
  height: 2px;
  margin-block: var(--space-4);
  background: linear-gradient(90deg, var(--cyan) 65%, var(--amber));
}


/* FEATURED SHOWCASE: dark premium product strip using boilie-only photos. */
.featured-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-space);
  background: linear-gradient(180deg, #020b0f 0%, #061015 100%);
}
.featured-showcase::before,
.featured-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.featured-showcase::before {
  background:
    radial-gradient(circle at 0% 50%, rgb(var(--accent-rgb) / 12%), transparent 24%),
    radial-gradient(circle at 100% 50%, rgb(255 172 18 / 10%), transparent 24%);
}
.featured-showcase::after {
  background:
    repeating-radial-gradient(circle at 5% 28%, transparent 0 18px, rgb(var(--accent-rgb) / .06) 19px 20px, transparent 21px 38px),
    repeating-radial-gradient(circle at 96% 72%, transparent 0 18px, rgb(255 172 18 / .05) 19px 20px, transparent 21px 38px);
  opacity: .55;
  mask-image: linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}
.featured-showcase-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 15%, rgb(var(--accent-rgb) / 7%), transparent 18%),
    radial-gradient(circle at 80% 18%, rgb(255 172 18 / 6%), transparent 16%),
    linear-gradient(rgb(var(--accent-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--accent-rgb) / 0.05) 1px, transparent 1px);
  background-size: auto, auto, 180px 180px, 180px 180px;
  opacity: .18;
  pointer-events: none;
}
.featured-showcase .container {
  position: relative;
  z-index: 1;
}
.featured-showcase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-2);
}
.featured-showcase-copy {
  max-width: 62ch;
}
.featured-showcase-copy .section-title {
  margin-bottom: var(--space-3);
}
.featured-showcase-copy .lead {
  max-width: 56ch;
  color: rgb(240 247 249 / 86%);
}
.featured-showcase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}
.featured-boilie-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgb(var(--accent-rgb) / 20%);
  border-radius: 24px;
  background: linear-gradient(180deg, rgb(5 15 20 / 97%), rgb(3 10 13 / 98%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%), 0 18px 40px rgb(0 0 0 / 22%);
}
.featured-boilie-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 216px;
  padding: 20px 16px 12px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(2 12 16 / 36%), rgb(2 12 16 / 6%)),
    radial-gradient(circle at 50% 100%, rgb(255 255 255 / 4%), transparent 56%);
}
.featured-boilie-visual::before,
.featured-boilie-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  opacity: .58;
}
.featured-boilie-visual::before {
  width: 150px;
  height: 150px;
  left: -32px;
  bottom: -22px;
}
.featured-boilie-visual::after {
  width: 130px;
  height: 130px;
  right: -18px;
  top: -8px;
}
.featured-boilie-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 230px;
  max-height: 172px;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgb(0 0 0 / 40%));
}
.featured-boilie-visual--spice::before,
.featured-boilie-visual--spice::after { background: rgb(255 78 30 / 30%); }
.featured-boilie-visual--berry::before,
.featured-boilie-visual--berry::after { background: rgb(255 190 48 / 26%); }
.featured-boilie-visual--mary::before,
.featured-boilie-visual--mary::after { background: rgb(255 54 78 / 28%); }
.featured-boilie-visual--mitsigen::before,
.featured-boilie-visual--mitsigen::after { background: rgb(var(--accent-rgb) / 24%); }
.featured-boilie-visual--krill::before,
.featured-boilie-visual--krill::after { background: rgb(255 123 24 / 28%); }
.featured-boilie-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: 20px 8px 2px;
}
.featured-boilie-copy .card-title {
  color: var(--white);
}
.featured-boilie-flavour {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.flavour-hot,
.flavour-red { color: #ff4b3f; }
.flavour-amber,
.flavour-orange { color: var(--amber); }
.flavour-cyan { color: var(--cyan); }
.featured-boilie-meta {
  margin-top: 10px;
  color: rgb(238 245 247 / 88%);
  font-size: 1rem;
  line-height: 1.45;
}
.featured-boilie-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.featured-boilie-price strong {
  color: var(--cyan);
  font-size: var(--text-price);
  line-height: 1;
  font-weight: 800;
}
.featured-boilie-price span {
  color: rgb(177 190 196 / 86%);
  font-size: 1rem;
}
.featured-boilie-price s { color: rgb(177 190 196 / 86%); font-size: var(--text-small); }
.featured-boilie-copy .button {
  width: 100%;
  margin-top: 22px;
  justify-content: center;
}

/* REAL CATCHES: full-width light surface, shared container, no standalone photo panel. */
.catches-section {
  position: relative;
  isolation: isolate;
  background: var(--surface);
  color: var(--text-on-light);
}
.catches-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-radial-gradient(ellipse at -25% 52%, transparent 0 22px, rgb(var(--accent-on-light-rgb) / 6%) 23px 24px, transparent 25px 44px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 35%);
  mask-image: linear-gradient(90deg, #000, transparent 35%);
}
.catches-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "intro ." "features ." "actions .";
  column-gap: var(--space-7);
  row-gap: var(--space-6);
  align-items: start;
}
.catches-intro { grid-area: intro; min-width: 0; }
.catches-eyebrow { margin-bottom: var(--space-5); color: var(--text-muted-on-light); }
.catches-eyebrow::after {
  content: "";
  display: block;
  width: var(--space-8);
  height: 2px;
  margin-top: var(--space-3);
  background: linear-gradient(90deg, var(--cyan) 65%, var(--amber));
}
.catches-intro .section-title em { color: var(--heading-accent-on-light); }
.catches-lead { margin-top: var(--space-5); color: var(--text-muted-on-light); }
.catches-photo {
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0 0 0 50%;
  min-width: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%);
  mask-image: linear-gradient(90deg, transparent, #000 18%);
}
.catches-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% center;
}
.catches-grid {
  grid-area: features;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-6);
  min-width: 0;
}
.catches-feature {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}
.catches-feature:nth-child(even) { border-left: 1px solid var(--border-light); padding-left: var(--space-5); }
.catches-icon { width: var(--space-8); height: var(--space-8); }
.catches-feature-copy { min-width: 0; }
.catches-feature-copy p { color: var(--text-muted-on-light); font-size: var(--text-body); }
.catches-feature-accent {
  display: block;
  width: var(--space-6);
  height: 2px;
  margin-block: var(--space-3);
  background: linear-gradient(90deg, var(--cyan) 65%, var(--amber));
}
.catches-actions { grid-area: actions; }

@media (max-width: 1279px) {
  .catches-layout {
    grid-template-areas: "intro photo" "features features" "actions actions";
    column-gap: var(--space-6);
    row-gap: var(--space-7);
    align-items: center;
  }
  .catches-photo {
    grid-area: photo;
    position: relative;
    z-index: 0;
    inset: auto;
    margin-right: calc(-1 * var(--gutter));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%);
    mask-image: linear-gradient(90deg, transparent, #000 14%);
  }
  .catches-photo img { height: auto; object-fit: contain; }
}
@media (max-width: 767px) {
  .catches-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "photo" "features" "actions"; gap: var(--space-6); }
  .catches-photo {
    margin-inline: calc(-1 * var(--gutter));
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  }
  .catches-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--grid-gap); }
  .catches-feature { padding-block: var(--space-4); }
  .catches-feature:nth-child(even) { padding-left: 0; border-left: 0; }
  .catches-feature + .catches-feature { border-top: 1px solid var(--border-light); }
}

/* FOOTER */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #020a0d 0%, #061015 100%);
  color: var(--white);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgb(var(--accent-rgb) / 8%), transparent 22%),
    radial-gradient(circle at 100% 0%, rgb(255 172 18 / 7%), transparent 18%);
}
.site-footer-main {
  position: relative;
  border-top: 1px solid rgb(var(--accent-rgb) / 18%);
  border-bottom: 1px solid rgb(var(--accent-rgb) / 14%);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, .72fr) minmax(220px, .72fr) minmax(0, 1.6fr);
  gap: 0;
  padding-block: clamp(3.5rem, 2.833rem + 1.667vw, 5rem);
}
.footer-grid > * {
  min-width: 0;
  padding-inline: clamp(1.5rem, 1.056rem + 1.111vw, 2.5rem);
}
.footer-grid > * + * {
  border-left: 1px solid rgb(255 255 255 / 8%);
}
.footer-brand {
  display: inline-block;
  width: min(100%, 340px);
}
.footer-brand img { width: 100%; height: auto; }
.footer-brand-text {
  max-width: 28ch;
  margin-top: var(--space-5);
  color: rgb(233 242 245 / 86%);
  font-size: var(--text-body);
  line-height: 1.55;
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--space-6);
}
.footer-social {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 8%);
  color: var(--white);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.footer-social:hover {
  transform: translateY(-2px);
  background: rgb(var(--accent-rgb) / 14%);
  color: var(--cyan);
}
.footer-social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
}
.footer-title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-h3);
  text-transform: uppercase;
}
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer-links-list :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgb(235 243 246 / 88%);
  text-decoration: none;
  font-size: var(--text-body);
}
.footer-links-list :is(a, button) span {
  color: var(--white);
  font-size: 1.65rem;
  line-height: 1;
}
.footer-links-list :is(a, button):hover { color: var(--cyan); }
.footer-newsletter-text {
  max-width: 34ch;
  color: rgb(233 242 245 / 86%);
  font-size: var(--text-body);
  line-height: 1.5;
}
.footer-newsletter-form {
  display: block;
  margin-top: var(--space-5);
}
.footer-newsletter-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--white);
}
.footer-newsletter-fields input[type="email"] {
  min-width: 0;
  height: 64px;
  padding: 0 22px;
  border: 0;
  background: transparent;
  color: var(--text-on-light);
  font: 600 1rem/1.2 var(--font-body);
}
.footer-newsletter-fields input::placeholder { color: #7b8b93; }
.footer-newsletter-fields button {
  border: 0;
  background: #ff871b;
  color: var(--white);
}
.footer-newsletter-fields button:not(:disabled):hover { background: #ff972f; }
.footer-newsletter-fields button svg {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.footer-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.footer-feature {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
}
.footer-feature + .footer-feature {
  border-left: 1px solid rgb(255 255 255 / 10%);
  padding-left: var(--space-3);
}
.footer-feature svg {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  fill: none;
  stroke: #ff871b;
  stroke-width: 1.8;
}
.footer-feature strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-label);
  line-height: 1.35;
  text-transform: uppercase;
}
.footer-feature span {
  display: block;
  margin-top: 6px;
  color: rgb(233 242 245 / 78%);
  font-size: var(--text-small);
  line-height: 1.45;
}
.site-footer-bottom {
  position: relative;
  padding-block: 22px;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-bottom-inner p,
.footer-bottom-links :is(a, button) {
  color: rgb(233 242 245 / 82%);
  font-size: 1rem;
  text-decoration: none;
}
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.footer-bottom-links :is(a, button) + a {
  position: relative;
}
.footer-bottom-links :is(a, button) + a::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 1px;
  height: 22px;
  background: rgb(255 255 255 / 18%);
  transform: translateY(-50%);
}
.footer-bottom-links :is(a, button):hover { color: var(--cyan); }

@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ring-spin-reverse { to { transform: rotate(-360deg); } }
/* BREAKPOINTS: structure changes here, typography remains token-driven. */
@media (min-width: 1700px) {
  .bait-guide { --guide-intro: 460px; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) 0; }
  .footer-grid > *:nth-child(3) { border-left: 0; }
}
@media (max-width: 1535px) {
  .search-button { width: 52px; padding: 0; justify-content: center; }
  .search-button > span { display: none; }
  .main-nav a { padding-inline: 13px; }
  .benefit-card { gap: 12px; padding-inline: 16px; }
  .benefit-icon { flex-basis: 48px; width: 48px; }
  .benefit-icon img { width: 48px; height: 48px; }
  .bait-card-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .shop-card-copy { padding: 16px; }
}

@media (max-width: 1279px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .footer-grid > *:nth-child(3) { border-left: 0; }
  .footer-feature-row { grid-template-columns: 1fr; }
  .footer-feature + .footer-feature { border-left: 0; padding-left: 0; border-top: 1px solid rgb(255 255 255 / 10%); padding-top: 18px; }
  .why-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "photo intro" "cards cards";
    column-gap: var(--space-6);
    row-gap: var(--space-7);
    align-items: center;
  }

  .header-inner { gap: 16px; }
  .brand { width: 200px; }
  .main-nav a { padding-inline: 10px; }
  .header-actions { gap: 8px; }
  .header-actions .search-button { display: grid; place-items: center; width: 44px; height: 44px; aspect-ratio: 1; padding: 0; gap: 0; border-radius: 50%; }
  .header-actions .search-button > span { display: none; }
  .header-actions .search-button > svg { display: block; width: 21px; height: 21px; flex-shrink: 0; }
  .benefits-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 0; }
  .benefit-card:nth-child(4) { border-left: 0; padding-left: 0; }
  .benefit-icon { flex-basis: 56px; width: 56px; }
  .benefit-icon img { width: 56px; height: 56px; }
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .featured-showcase-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bait-guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bait-card-head { flex-direction: row; align-items: center; }
  .bait-card-text { min-height: 76px; }
  .category-copy h3 { max-width: 100%; }
  .category-copy { padding: 20px; }
  .story-content, .bait-guide-copy { width: 53%; }
}
@media (max-width: 1099px) {
  .main-nav { position: fixed; top: calc(var(--header-height) - 4px); left: var(--gutter); right: var(--gutter); display: none; flex-direction: column; align-items: stretch; max-height: calc(100dvh - var(--header-height) - 12px); overflow-y: auto; border-radius: var(--radius-card); padding: 12px; background: #061015; }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 14px 16px; font-size: var(--text-small); }
  .nav-products > summary { padding: 14px 16px; font-size: var(--text-small); }
  .nav-products-panel { position: static; width: auto; max-width: none; margin-top: 8px; box-shadow: none; }
  .menu-toggle { display: grid; gap: 5px; place-content: center; margin-left: auto; }
  .menu-toggle span { width: 18px; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 899px) {
  .featured-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { height: 1050px; min-height: 0; }
  .hero::before { background: linear-gradient(180deg,rgb(2 10 13 / 68%),transparent 55%,rgb(2 10 13 / 20%)); }
  .hero-content { position: relative; top: 132px; width: 100%; max-width: 560px; margin-inline: auto; text-align: center; }
  .hero h1::after { margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-fisherman { display: block; position: absolute; z-index: 2; left: 50%; bottom: -40px; width: 1050px; max-width: none; transform: translateX(-50%); pointer-events: none; }
  .flavour-stage { --stage-size: 380px; top: 595px; right: 50%; transform: translate(50%,-50%); }
  .orbit-item { width: 100px; }
  .orbit-item img { height: 70px; }
  .orbit-item span { min-width: 94px; }
  .benefits-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .benefit-card { padding-inline: 20px; }
  .benefit-card:nth-child(4) { border-left: 1px solid var(--border-light); padding-left: 20px; }
  .benefit-card:nth-child(odd) { border-left: 0; padding-left: 0; }
  .story-content { width: 64%; }
  .story-section::before { background: linear-gradient(90deg,rgb(2 12 16 / 94%),rgb(2 12 16 / 75%) 45%,rgb(2 12 16 / 12%)); }
  .category-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 248px; }
  .category-card > img, .category-card > noscript > img { object-position: center 52%; }
  .category-copy { padding: var(--card-padding); }
  .category-copy h3 { max-width: 70%; }
  .bait-guide-copy { width: 62%; }
  .bait-guide-visual { height: 520px; }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid > * { padding-inline: 0; }
  .footer-grid > * + * { border-left: 0; padding-top: 30px; border-top: 1px solid rgb(255 255 255 / 8%); }
  .footer-newsletter-fields { grid-template-columns: minmax(0, 1fr) 72px; }
  .footer-newsletter-fields input[type="email"] { height: 58px; }
  .footer-feature-row { gap: 18px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .footer-bottom-links { flex-wrap: wrap; gap: 16px 22px; }
  .footer-bottom-links :is(a, button) + a::before { display: none; }
  .why-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "photo" "cards"; gap: var(--space-6); }
  .why-photo { margin-inline: calc(-1 * var(--gutter)); }
  .why-grid { grid-template-columns: minmax(0, 1fr); }

  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto; gap: 8px; }
  .brand { width: 100%; max-width: 164px; }
  .menu-toggle { margin-left: 0; }
  .header-actions { gap: 6px; }
  .hero { height: 1040px; }
  .hero-content { top: 116px; max-width: 520px; }
  .hero-content .button { margin-top: 24px; }
  .hero-fisherman { width: 900px; bottom: -15px; }
  .flavour-stage { --stage-size: min(84vw, 380px); top: 58%; }
  .orbit-item { width: 88px; }
  .orbit-item img { height: 62px; }
  .orbit-item span { min-width: 88px; padding: 5px 8px; }
  .product-caption { padding: 7px 16px; min-width: 130px; }
  .orbit-item[data-orbit-slot="0"] { --x: 27%; --y: 4%; }
  .orbit-item[data-orbit-slot="1"] { --x: 73%; --y: 4%; }
  .orbit-item[data-orbit-slot="2"] { --x: 8%; --y: 54%; }
  .orbit-item[data-orbit-slot="3"] { --x: 92%; --y: 54%; }
  .orbit-item[data-orbit-slot="4"] { --x: 50%; --y: 94%; }
  .slider-prev { left: 20%; }
  .slider-next { right: 20%; }
  .benefits { padding-block: 32px; }
  .benefits-grid { gap: 24px 0; }
  .benefit-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .benefit-copy br { display: none; }
  .benefit-label { max-width: 18ch; }
  .story-section { min-height: 680px; }
  .story-visual img { object-position: 62% center; }
  .story-section::before { background: linear-gradient(180deg,rgb(2 12 16 / 92%) 0%,rgb(2 12 16 / 80%) 45%,rgb(2 12 16 / 12%) 82%,rgb(2 12 16 / 40%)); }
  .story-section { align-items: flex-start; }
  .story-content { width: 100%; max-width: 580px; }
  .story-lead { max-width: 42ch; }
  .story-tagline { margin-top: 40px; max-width: 320px; line-height: 1.6; }
  .products-heading { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .product-grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw,320px); grid-template-columns: none; overflow-x: auto; padding: 4px 2px 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #9eb6bf #e4ecef; }
  .featured-showcase-head { flex-direction: column; align-items: flex-start; }
  .featured-showcase-grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 320px); grid-template-columns: none; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #4c646e #0c171b; }
  .featured-boilie-card { scroll-snap-align: start; }
  .featured-boilie-visual { min-height: 220px; }
  .shop-card { scroll-snap-align: start; }
  .shop-card-copy { padding: var(--card-padding); }
  .category-grid { margin-top: 16px; }
  .bait-guide { --guide-intro: 570px; }
  .bait-guide-hero { align-items: flex-start; padding-bottom: 250px; }
  .bait-guide-copy { width: 100%; max-width: 520px; }
  .bait-guide-visual { height: 640px; }
  .bait-guide-visual img { object-position: 65% center; }
  .bait-guide-visual::after { background: linear-gradient(180deg,var(--ink) 0%,rgb(6 16 21 / 96%) 17%,rgb(6 16 21 / 82%) 35%,rgb(6 16 21 / 10%) 57%,rgb(6 16 21 / 8%) 77%,var(--ink) 100%); }
  .bait-guide-grid { grid-template-columns: 1fr; }
  .bait-card-head { gap: 16px; }
  .bait-card-text { min-height: 0; }
  .bait-card-media { aspect-ratio: 3 / 2; }
  .bait-card-footer { padding: 20px; }
}
@media (max-width: 374px) {
  .footer-social { width: 50px; height: 50px; }
  .why-card { grid-template-columns: minmax(0, 1fr); }

  .brand { max-width: 142px; }
  .header-inner { gap: 8px; }
  .hero { height: 1100px; }
  .hero-content { top: 108px; }
  .flavour-stage { top: 61%; }
  .orbit-item { width: 82px; }
  .orbit-item span { min-width: 82px; }
  .orbit-item[data-orbit-slot="2"] { --x: 13%; }
  .orbit-item[data-orbit-slot="3"] { --x: 87%; }
  .slider-prev { left: 22%; }
  .slider-next { right: 22%; }
  .bait-card-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 339px) {
  .brand { max-width: 126px; }
  .header-actions { gap: 6px; }
}

/* Explicit non-navigation controls preserve the footer layout. */
.pending-link { font: inherit; text-align: left; padding: 0; border: 0; background: none; color: inherit; }
.footer-links-list .pending-link { width: 100%; }
.footer-social.pending-link { display: grid; padding: 0; background: rgb(255 255 255 / 8%); }
.footer-social[href*="instagram.com"] svg { fill: none; }
.footer-social .fill-current { fill: currentColor; stroke: none; }

/* v13: existing product titles now lead to the matching category description. */
.shop-card h3 a,.featured-boilie-card h3 a{color:inherit;text-decoration:none}
.shop-card h3 a:hover,.featured-boilie-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}

/* v14: homepage product photos open the same standalone product page as the title. */
.shop-image-link { display:block; }