/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/Button.module.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
.Button_button__aJ0V6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--smb-min-touch-target, 44px);
  padding: 0 24px;
  border-radius: var(--smb-radius-md);
  border: 0;
  font-family: var(--smb-font-display);
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease;
}
.Button_button__aJ0V6:hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .Button_button__aJ0V6:hover {
    transform: none;
  }
}

.Button_solid-lime__RIX0d    { background: var(--smb-lime);     color: var(--smb-ink); }
.Button_solid-tangerine__Z_Q_c { background: var(--smb-tangerine); color: var(--smb-ink); }
.Button_solid-ink__eyXy5     { background: var(--smb-ink);      color: var(--smb-white); }

.Button_outline-ink__iESEU {
  background: transparent;
  border: 2px solid var(--smb-ink);
  color: var(--smb-ink);
  font-family: var(--smb-font-body);
  font-weight: 700;
  text-transform: none;
  font-size: 17px;
}
.Button_outline-white__mbDvD {
  background: transparent;
  border: 2px solid var(--smb-white);
  color: var(--smb-white);
  font-family: var(--smb-font-body);
  font-weight: 700;
  text-transform: none;
  font-size: 15px;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/Hero.module.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Review, 2026-09-21 (A4): "It looks like a min-height is being applied
 * that the content does not need... Hero top padding is 26px, matching the
 * design." Confirmed right — the previous "full above the fold" attempt
 * (min-height bound to a clamped svh value) manufactured dead space no
 * viewport actually needed. Reverted to the reference's own literal
 * padding (reference/homepage-mobile.html: `padding: 26px 18px 40px`;
 * homepage-desktop.html: `padding: 68px 80px 76px`) — no heroSection
 * wrapper, no min-height, Section just uses its own padded default.
 */
.Hero_wrap__lNW_0 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Mobile fix (Rob, 2026-09-21 round 2 follow-up): the hero image is
     position:absolute below 768px specifically so it never adds to this
     box's height — a normal-flow image pushed "Shop the packs" (in the
     cobalt CtaBar, the next section) below the fold on short phones.
     overflow-y stays visible so the image can bleed down past .wrap's own
     bottom edge; overflow-x is `clip`, not `hidden` — hidden paired with a
     visible other axis computes to an implied `auto` scroll container per
     the CSS overflow spec, which axe then flags as a scrollable region with
     no keyboard focus path (scrollable-region-focusable). `clip` never
     creates a scrollport, so the same visual clipping doesn't trip it. */
  overflow-x: clip;
  overflow-y: visible;
  /* Section is rendered with padded={false} for Hero specifically — these
     match the reference's own literal hero padding exactly, not the
     generic section padding every other section uses (26/18/40 mobile,
     68/80/76 desktop; horizontal reuses the same gutter tokens the generic
     padding would have, since the reference's numbers happen to match). */
  padding: 26px var(--smb-gutter-mobile) 40px;
}
@media (min-width: 768px) {
  .Hero_wrap__lNW_0 {
    gap: 60px;
    overflow: hidden;
    /* Bug (Rob, 2026-09-22, "the CTA should be visible"): the reference's
       literal 68/76px padding, the 26px .copy gap and the 108px H1 cap
       (all below) together needed ~865px of page height before the CTA
       row cleared the fold — fixed regardless of *window* height, so on
       any real laptop under roughly 900px of actual browser viewport
       height (i.e. most of them: a 1440x900 or 1512x857 display, once
       Safari/Chrome's own chrome is subtracted, commonly lands at
       720-860px) the buttons sat below the fold with nothing on screen
       to say they existed. Confirmed live with a disposable local `next
       dev` (not the shared docker stack) at 10 real width/height pairs —
       not visible at 1280x720, 1280x800, 1366x768, 1440x810, 1512x857;
       only visible once height reached ~900px. Trimmed here + the H1's
       own vh-bounded clamp (below) claw back enough height that the CTA
       clears the fold across that whole realistic range, without
       reintroducing the min-height/forced-full-viewport approach A4
       already rejected for manufacturing dead space on tall viewports —
       these are straight reductions, so a genuinely tall viewport just
       gets a bit of extra breathing room below the buttons, not a
       stretched hero. */
    padding: 18px var(--smb-gutter-desktop) 40px;
  }
}
/*
 * Review, 2026-09-21 (A5): "Around 800px the cluster is almost entirely
 * off-canvas... between 768 and 1100 it should either scale down or move
 * below the text." The cluster's own 420x420 composition (below) already
 * activates at 768px; a fixed 420px cluster beside a non-shrinking text
 * column has no room between 768-1099px, so .wrap stays column (cluster
 * below the text, centred) until 1100px, where there's finally space for
 * both side by side — the same 1100px breakpoint BUILD-BRIEF.md section 7
 * already reserves for exactly this kind of "gets cramped" case, not a new
 * one.
 */
@media (min-width: 768px) and (max-width: 1099px) {
  .Hero_wrap__lNW_0 {
    align-items: center;
  }
}
@media (min-width: 1100px) {
  .Hero_wrap__lNW_0 {
    flex-direction: row;
    /* Bug (Rob, 2026-09-22, "the cta buttons are not right on the fold"):
       `align-items: center` centred the (shorter) text column against the
       (taller) image regardless of window height, so on any generously
       tall window the CTA row landed well above the true fold with a
       growing stretch of empty orange beneath it — the row's own height
       was always just the image's intrinsic height, never the viewport's.
       `stretch` + this min-height make .copy and .imageWrap actually fill
       the available first-screen height; .ctas's `margin-top: auto`
       (below) then pushes just the button row down to the bottom of that
       filled space, landing at the fold, while the eyebrow/H1/sub stay
       grouped at the top right after the header — the min-height is
       exactly what A4's 2026-09-21 review rejected for manufacturing dead
       space, done deliberately this time on Rob's direct instruction. 120px
       = AnnounceBar's 40px + Header's 80px (both desktop heights). */
    align-items: stretch;
    justify-content: space-between;
    min-height: calc(100svh - 120px);
  }
  /* Paired with .copy override below: lets text take an extra wrapped
     line rather than force .imageWrap past its min-width and overflow
     .wrap (see the imageWrap comment further down for the full story). */
  .Hero_copy__csuBp {
    flex-shrink: 1;
    min-width: 0;
  }
  .Hero_ctas__4iFP6 {
    margin-top: auto;
  }
}
.Hero_copy__csuBp {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 540px;
}
@media (min-width: 768px) {
  .Hero_copy__csuBp {
    gap: 10px;
    max-width: 780px;
    flex-shrink: 0;
  }
}
.Hero_eyebrow__0ZXf3 {
  font-family: var(--smb-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--smb-ink);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .Hero_eyebrow__0ZXf3 {
    font-size: 12px;
    letter-spacing: 0.2em;
  }
}
.Hero_h1__CpRsJ {
  margin: 0;
  font-family: var(--smb-font-display);
  /* min(8vw, 12vh): the reference's 108px desktop size assumed a tall
     enough window; bounding by height too means a wide-but-short window
     (see the .wrap padding comment above) gets a proportionally smaller
     headline instead of just running past the fold. Only bites below
     roughly 900px of actual height — 12vh already exceeds the 108px cap
     above that, so a genuinely tall viewport renders exactly as before. */
  font-size: clamp(46px, min(8vw, 12vh) + 10px, 108px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--smb-ink);
  text-transform: uppercase;
}
/*
 * 2026-09-22 fix, continued: at 390px wide the *shared* clamp above
 * computes to ~41px regardless of its floor — 46 or 38, tried first,
 * neither matters, because min(8vw, 12vh) + 10 already evaluates to ~41.2
 * at 390x664 (8vw = 31.2, well under the 12vh term), which is bigger than
 * either floor, so the floor never actually binds there. Measured directly
 * (Playwright, real line counts, not estimated): 41px still wraps to 4
 * lines at 354px of available width. Getting to 3 lines needs the headline
 * closer to 28-32px on real phones (measured across 360-430px wide
 * viewports) — a change to the *fluid* part, not the floor, which the
 * shared rule above can't do without also changing desktop's still-fluid
 * (not yet ceiling-capped) size at ~768-900px width. So: a separate,
 * mobile-only override, scoped to the same 768px breakpoint every other
 * rule in this file already uses — zero effect at 768px and up, where the
 * unmodified shared rule above still applies exactly as before.
 *
 * text-wrap: balance is scoped here too, not in the shared rule: measured
 * live, the desktop headline already wraps to 5 lines at 1280x800 — putting
 * balance in the shared rule would redistribute those words too, a real
 * (if subtle) desktop change the brief explicitly rules out. Scoped to
 * mobile only, it kills the "TO BE." orphan exactly where it was reported. */
@media (max-width: 767px) {
  .Hero_h1__CpRsJ {
    font-size: clamp(28px, 6vw + 6px, 44px);
    text-wrap: balance;
  }
}
.Hero_sub__2KmIh {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--smb-ink);
  font-weight: 500;
  /* Reference caps this at 280px on mobile specifically so the sticker
     cluster (absolutely positioned bottom-right) doesn't overlap the text. */
  max-width: 280px;
}
@media (min-width: 768px) {
  .Hero_sub__2KmIh {
    font-size: 20px;
    line-height: 1.45;
    max-width: 540px;
  }
}
/* 2026-09-22 fix: CTAs now render directly on the hero at every width
   (previously display:none below 768px, with a separate cobalt CtaBar
   section carrying them on mobile instead — removed, see Hero.tsx). */
.Hero_ctas__4iFP6 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.Hero_ctas__4iFP6 > a,
.Hero_ctas__4iFP6 > button {
  width: 100%;
}
@media (min-width: 768px) {
  .Hero_ctas__4iFP6 {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .Hero_ctas__4iFP6 > a,
  .Hero_ctas__4iFP6 > button {
    width: auto;
  }
}
/* Brief, 2026-09-24: "Free UK delivery · Printed in the UK" reassurance
   line under the CTAs. Deliberately quiet — smaller and lower-contrast
   than .sub, a footnote, not a second headline. */
.Hero_reassurance__gLO4i {
  margin: 0;
  font-family: var(--smb-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--smb-ink);
  opacity: 0.7;
}
@media (min-width: 768px) {
  .Hero_reassurance__gLO4i {
    font-size: 13px;
  }
}
/*
 * Round 2, item 3: hero-case.png replaces the three abstract CSS shapes.
 * Mobile — normal-flow sibling below .copy, ~70vw, bled off the right edge
 * via a negative margin that .wrap's own overflow:hidden then clips at the
 * section boundary (the bleed effect). 768-1099px scales fluidly with
 * clamp() rather than a fixed box, so it can never get squeezed to a sliver
 * the way the old fixed-420px cluster did beside a non-shrinking text
 * column (2026-09-21 review, A5) — there's nothing here to squeeze, it's a
 * single image that just gets proportionally smaller. 1100px+: right
 * column, ~420px, vertically centred against the headline (.wrap's
 * align-items: center, above).
 */
/* 2026-09-22 fix: this used to be position:absolute on mobile (bled off the
   right edge by ~18px and got clipped ~44px off its bottom by the cobalt
   CtaBar). The mobile hero image is now `.mobileImageWrap` below, a real
   normal-flow element between .sub and .ctas — this element (and its
   desktop layout, entirely unchanged) is hidden below 768px instead. */
.Hero_imageWrap__wotKE {
  display: none;
}
@media (min-width: 768px) {
  .Hero_imageWrap__wotKE {
    display: block;
    position: static;
    z-index: auto;
    align-self: center;
    /* Rob, 2026-09-22: "make the hero image a bit bigger" — first pass
       (420px → 480px, ~14%) apparently read as no change at all, so this
       is a much more assertive jump: up to 560px (~33%), bounded by
       `min(560px, calc(66vh - 115px))`. This image is a fixed 2:3 aspect
       ratio (width:height), so its rendered height is always 1.5x this
       width — a first attempt at this bound (`62vh` alone, no subtracted
       offset) undercounted the fixed costs above/around the image (the
       >=1100px min-height fix below reserves 100svh - 120px header/
       announce - 58px wrap's own top+bottom padding = vh - 178px of
       actual available content height; solving width*1.5 <= that gives
       width <= 0.667vh - 119px, i.e. ~66.7vh with a ~119px offset, rounded
       down a little further here for safety margin against .copy's own
       flex-shrink competition for the row's width) — measured directly:
       that undercounted version grew the whole hero past 100svh and put
       the CTA row below the fold again, the exact bug the min-height fix
       below exists to prevent. This formula was verified with a live
       geometry check across 1100-1920px wide / 620-1080px tall: zero
       fold-overflow at every size, image visibly bigger than the 420px
       original everywhere it isn't shrunk down by the width squeeze this
       file's `flex-shrink`/`min-width: 160px` rules already handle. */
    width: clamp(280px, 56vw, min(560px, calc(66vh - 115px)));
    max-width: none;
    margin-right: calc(-1 * var(--smb-gutter-desktop));
  }
}
@media (min-width: 1100px) {
  /* Bug (Rob, 2026-09-22, "looks right only zoomed out"): the tablet-band
     clamp() above already saturates at 420px by ~1000px viewport, and this
     query then pinned both columns rigid (flex-shrink: 0 here, and .copy's
     own flex-shrink: 0 above) — fine once .wrap has genuinely got ~1260px
     of row space (copy's 780px max-width + 60px gap + this 420px), which
     only happens once the viewport nears the 1440px .inner cap. Below
     that — roughly 1100-1420px, which covers most real laptop screens at
     their default scaling — the two fixed-width columns overflowed .wrap
     and its `overflow: hidden` (above) silently clipped the image's right
     edge instead of showing a scrollbar. Letting both columns actually
     shrink (image via flex-basis down to a sane floor, text via
     min-width: 0 so it wraps an extra line instead of refusing to
     narrow) means there is always enough room; only above ~1420px does
     either column reach its full 780px/420px size, same as before.
     Zooming out "fixed" it by widening the effective CSS-pixel viewport
     past that point — not evidence a real fix, just a wider viewport. */
  .Hero_imageWrap__wotKE {
    width: auto;
    flex: 0 1 min(560px, calc(66vh - 115px));
    min-width: 160px;
    /* .wrap is now `align-items: stretch` (see above), so this box is the
       full row height — centre the actual <img> within it rather than
       letting it stick to the top. */
    display: flex;
    align-items: center;
  }
}
/* `<picture>` defaults to `display: inline`, which does not reliably
   establish a full-width containing block for its `<img>` child once
   `.imageWrap` becomes a flex container (>=1100px, above) — measured
   directly: without this, the "bigger hero image" change below rendered
   at a fixed 280px regardless of how big `.imageWrap`'s own box actually
   was. Forcing `<picture>` to `display: block; width: 100%` makes it (not
   an ambiguous inline box) the containing block `.image`'s `width: 100%`
   resolves against. */
.Hero_imageWrap__wotKE picture {
  display: block;
  width: 100%;
}
.Hero_image__x5ZrL {
  display: block;
  width: 100%;
  height: auto;
}

/* 2026-09-22 fix: the mobile-only hero image, in normal flow between .sub
   and .ctas. Fully inside the viewport by construction — no absolute
   positioning, nothing to overflow or get clipped by a sibling. */
.Hero_mobileImageWrap__NVaCP {
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .Hero_mobileImageWrap__NVaCP {
    display: none;
  }
}
.Hero_mobileImage__IPhsU {
  display: block;
  max-width: 100%;
  /* Rob, 2026-09-22: "make the hero image a bit bigger" — was 200px. */
  max-height: 230px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/BeltScene.module.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Replaced 2026-09-22 — Rob: "replace tjhe belt scene on the site with the
 * one thats in the downloads folder called preview.html". The previous
 * version here (pure CSS shapes, no images, per BUILD-BRIEF.md section 10)
 * is gone; this ports that preview file's own `.smb-belt*`/`.smb-sticker`
 * rules class-for-class (renamed into this module's camelCase convention),
 * unchanged otherwise. Scene is decorative — aria-hidden in BeltScene.tsx —
 * and every animation stops under prefers-reduced-motion. Belt speed: one
 * full group (2160px) every 48s; two identical groups render back to back
 * (BeltScene.tsx) so the loop is seamless.
 */
.BeltScene_belt__raQo_ {
  position: relative;
  height: 430px;
  background: var(--smb-ink);
  overflow: hidden;
}
.BeltScene_track__N3TNH {
  display: flex;
  width: max-content;
  height: 100%;
  animation: BeltScene_belt-move__xGTyn 48s linear infinite;
  will-change: transform;
}
.BeltScene_group__2Pt54 {
  position: relative;
  width: 2160px;
  height: 100%;
  flex: none;
}
.BeltScene_surface__7MSUs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  background: repeating-linear-gradient(90deg, #26231e 0px, #26231e 4px, #312e28 4px, #312e28 60px);
  border-top: 2px solid #403c34;
}
.BeltScene_bag__jK_Xm {
  position: absolute;
  bottom: 78px;
  transform-origin: 50% 100%;
}
.BeltScene_bag__jK_Xm::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -7px;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
}
.BeltScene_bag__jK_Xm svg {
  display: block;
  width: 100%;
  height: 100%;
}
.BeltScene_bagHero__tX3LZ {
  z-index: 2;
  animation: BeltScene_bag-wiggle__Qrfpo 5.5s ease-in-out infinite;
}
.BeltScene_sticker__eXKEx {
  position: absolute;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
@keyframes BeltScene_belt-move__xGTyn {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-2160px);
  }
}
@keyframes BeltScene_bag-wiggle__Qrfpo {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-1.4deg);
  }
  45% {
    transform: rotate(1.1deg);
  }
  70% {
    transform: rotate(-0.7deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .BeltScene_track__N3TNH,
  .BeltScene_bagHero__tX3LZ {
    animation: none;
  }
}
@media (max-width: 720px) {
  .BeltScene_belt__raQo_ {
    height: 320px;
  }
  .BeltScene_track__N3TNH {
    transform-origin: left bottom;
    scale: 0.74;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/DurabilityItem.module.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.DurabilityItem_item__OprDv {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .DurabilityItem_item__OprDv {
    flex-direction: column;
    gap: 16px;
  }
}
.DurabilityItem_chip__CE5qj {
  width: 44px;
  height: 44px;
  border-radius: var(--smb-radius-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .DurabilityItem_chip__CE5qj {
    width: 54px;
    height: 54px;
    border-radius: var(--smb-radius-lg);
  }
}
.DurabilityItem_chip-cobalt__45YHH { background: var(--smb-cobalt); }
.DurabilityItem_chip-pink__YQHIn { background: var(--smb-pink); }
.DurabilityItem_chip-lime__oERDA { background: var(--smb-lime); }
.DurabilityItem_chip-tangerine__TOe2v { background: var(--smb-tangerine); }

.DurabilityItem_text__2aP1Y {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (min-width: 768px) {
  .DurabilityItem_text__2aP1Y {
    gap: 8px;
  }
}
.DurabilityItem_title__Tyrtl {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--smb-ink);
}
@media (min-width: 768px) {
  .DurabilityItem_title__Tyrtl {
    font-size: 19px;
  }
}
.DurabilityItem_body__OcznL {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--smb-text-muted-cream);
}
@media (min-width: 768px) {
  .DurabilityItem_body__OcznL {
    line-height: 1.5;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/DesignTile.module.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.DesignTile_tile__4rpjJ {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-decoration: none;
  transition: transform 120ms ease;
}
.DesignTile_tile__4rpjJ:hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .DesignTile_tile__4rpjJ:hover {
    transform: none;
  }
}
@media (min-width: 768px) {
  .DesignTile_tile__4rpjJ {
    gap: 12px;
  }
}

/* "Adding the design artwork" brief, acceptance criterion 2: real image,
   aspect-ratio 1/1, explicit width/height (on the <img> itself, in
   DesignTile.tsx) to hold the box before the image loads — CLS.
   Round 2, item 1: art is transparent now, so no white card behind it —
   the sticker sits directly on the section colour. transform: scale
   grows the sticker ~15% without touching the reserved layout box (no
   CLS impact, and it's free to bleed slightly into the grid gap the way
   an overlapping physical sticker would). filter: drop-shadow (not
   box-shadow) so the shadow follows the die-cut silhouette instead of
   the square bounding box. */
.DesignTile_art__Riqvv {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transform: scale(1.15);
  filter: drop-shadow(0 8px 20px rgba(22, 20, 15, 0.25));
}

.DesignTile_label__QQ7B_ {
  font-family: var(--smb-font-display);
  font-size: 13px;
  color: var(--smb-ink);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .DesignTile_label__QQ7B_ {
    font-size: 14px;
  }
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/app/page.module.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
.page_eyebrow__H9Slr {
  font-family: var(--smb-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--smb-lime);
  text-transform: uppercase;
}
/* Fix (round 2 axe pass): lime-on-pink (the designs section) contrasts at
   2.64:1 — the eyebrow's default lime only works on the dark tones
   (cobalt/ink). Pink needs the same ink text every other pink element uses. */
.page_eyebrowInk__0DSAz {
  color: var(--smb-ink);
}
@media (min-width: 768px) {
  .page_eyebrow__H9Slr {
    font-size: 12px;
    letter-spacing: 0.2em;
  }
}
.page_h2__REf9y {
  margin: 0;
  font-family: var(--smb-font-display);
  font-size: clamp(36px, 6vw + 8px, 66px);
  line-height: 0.93;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: inherit;
}
.page_h2Small__fOQgO {
  margin: 0;
  font-family: var(--smb-font-display);
  font-size: clamp(30px, 5vw + 6px, 50px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--smb-ink);
}

/* Packs */
.page_packsSection__kFiRd {
  position: relative;
}
.page_packsHead__b8Mjx {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .page_packsHead__b8Mjx {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 40px;
  }
}
.page_packsHeadCopy__e1xgp {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}
.page_packsIntro__dE2oa {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--smb-white);
  max-width: 400px;
}
@media (min-width: 768px) {
  .page_packsIntro__dE2oa {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
  }
}
.page_packsGrid__G_9dC {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 768px) {
  .page_packsGrid__G_9dC {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 26px;
    gap: 26px;
  }
}

/* Survive */
.page_surviveHead__sst1R {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
@media (min-width: 768px) {
  .page_surviveHead__sst1R {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 42px;
  }
}
.page_surviveIntro__86f72 {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--smb-text-muted-cream);
}
@media (min-width: 768px) {
  .page_surviveIntro__86f72 {
    font-size: 17px;
    line-height: 1.55;
    max-width: 420px;
  }
}
.page_surviveGrid__FVOOV {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .page_surviveGrid__FVOOV {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 26px;
    gap: 26px;
  }
}

/* Designs */
.page_designsHead__MpOLY {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .page_designsHead__MpOLY {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 36px;
  }
}
.page_designsGrid__MRAXk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
@media (min-width: 768px) {
  .page_designsGrid__MRAXk {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
  }
}
.page_designsSeeAllDesktop__fVjIx {
  display: none;
}
@media (min-width: 768px) {
  .page_designsSeeAllDesktop__fVjIx {
    display: inline-flex;
    flex-shrink: 0;
  }
}
.page_designsSeeAllMobile__ZmrJ6 {
  display: flex;
  width: 100%;
  margin-top: 4px;
}
@media (min-width: 768px) {
  .page_designsSeeAllMobile__ZmrJ6 {
    display: none;
  }
}

/* Newsletter */
.page_newsletterRow__jTV_A {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px) {
  .page_newsletterRow__jTV_A {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
  }
}
.page_newsletterCopy__pZOic {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .page_newsletterCopy__pZOic {
    max-width: 620px;
  }
}
.page_newsletterIntro__10DHT {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--smb-ink);
}
@media (min-width: 768px) {
  .page_newsletterIntro__10DHT {
    font-size: 17px;
    line-height: 1.5;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/NewsletterForm.module.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.NewsletterForm_form__0NR1_ {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
@media (min-width: 768px) {
  .NewsletterForm_form__0NR1_ {
    width: 460px;
    flex-shrink: 0;
  }
}
.NewsletterForm_label__lHo7f {
  font-family: var(--smb-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--smb-ink);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .NewsletterForm_label__lHo7f {
    font-size: 12px;
  }
}
.NewsletterForm_row__zvbnD {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
@media (min-width: 768px) {
  .NewsletterForm_row__zvbnD {
    flex-direction: row;
    gap: 10px;
  }
}
.NewsletterForm_input__Yyvgh {
  height: 52px;
  border-radius: var(--smb-radius-md);
  border: 2px solid var(--smb-ink);
  background: var(--smb-white);
  padding: 0 14px;
  font-family: var(--smb-font-body);
  font-size: 16px;
  color: var(--smb-ink);
  flex-grow: 1;
}
@media (min-width: 768px) {
  .NewsletterForm_input__Yyvgh {
    height: 56px;
    padding: 0 16px;
  }
}
.NewsletterForm_submit__T6eRh {
  height: 52px;
  border: 0;
  border-radius: var(--smb-radius-md);
  background: var(--smb-ink);
  color: var(--smb-white);
  font-family: var(--smb-font-display);
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 120ms ease;
}
.NewsletterForm_submit__T6eRh:hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .NewsletterForm_submit__T6eRh:hover {
    transform: none;
  }
}
@media (min-width: 768px) {
  .NewsletterForm_submit__T6eRh {
    height: 56px;
    padding: 0 26px;
    flex-shrink: 0;
  }
}
.NewsletterForm_error__Uy6LB {
  font-size: 13px;
  color: var(--smb-ink);
  font-weight: 700;
}
.NewsletterForm_consent__5LHiz {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--smb-ink);
  opacity: 0.75;
}
.NewsletterForm_consent__5LHiz a {
  color: inherit;
}
.NewsletterForm_success__ehGAz {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.NewsletterForm_success-headline__QDx7K {
  margin: 0;
  font-family: var(--smb-font-display);
  font-size: 18px;
  color: var(--smb-ink);
}
.NewsletterForm_success-line__xcuxM {
  margin: 0;
  font-size: 14px;
  color: var(--smb-ink);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/PhotoPlaceholder.module.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.PhotoPlaceholder_well__Aq8Lk {
  height: 190px;
  background: var(--smb-card-photo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.PhotoPlaceholder_roundedTop__b9M4y {
  border-radius: var(--smb-radius-xl) var(--smb-radius-xl) 0 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .PhotoPlaceholder_well__Aq8Lk {
    height: 300px;
    padding: 26px;
  }
}
.PhotoPlaceholder_note__XDZIq {
  font-family: var(--smb-font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--smb-text-muted-card);
  text-align: center;
  border: 1.5px dashed var(--smb-placeholder-border);
  border-radius: var(--smb-radius-sm);
  padding: 14px 12px;
}
@media (min-width: 768px) {
  .PhotoPlaceholder_note__XDZIq {
    font-size: 12px;
    line-height: 1.6;
    padding: 20px 16px;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/StickerBadge.module.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.StickerBadge_badge__Tbwne {
  position: absolute;
  top: -14px;
  right: -8px;
  background: var(--smb-pink);
  color: var(--smb-ink);
  font-family: var(--smb-font-display);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: var(--smb-radius-lg);
  transform: rotate(6deg);
}
@media (min-width: 768px) {
  .StickerBadge_badge__Tbwne {
    top: -18px;
    right: -14px;
    font-size: 14px;
    padding: 12px 16px;
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/PackCard.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.PackCard_card__Dn0Tf {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--smb-white);
  border-radius: var(--smb-radius-xl);
  /* Fix (2026-09-21 review, A2): overflow:hidden here clipped the rotated
     "Most bought" badge, which is meant to overhang the top-right corner.
     Clipping now lives on the photo well only (its own rounded top
     corners), so the card itself stays overflow: visible. */
  overflow: visible;
  transition: transform 120ms ease;
}
.PackCard_card__Dn0Tf:hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .PackCard_card__Dn0Tf:hover {
    transform: none;
  }
}
.PackCard_photo__UpxSW {
  display: block;
  width: 100%;
  height: 190px;
  /* Rob, 2026-09-22: "fit the images to the container not cropped" — the
     three real pack photos are different aspect ratios (portrait/landscape/
     landscape) and `cover` was cropping into each one to fill this fixed-
     height box. `contain` shows the whole photo; the background fills
     whatever letterbox space that leaves, using the same warm neutral the
     "breather" cream section already uses elsewhere, rather than a jarring
     white/black bar. */
  object-fit: contain;
  object-position: center;
  background: var(--smb-cream);
  border-radius: var(--smb-radius-xl) var(--smb-radius-xl) 0 0;
}
@media (min-width: 768px) {
  .PackCard_photo__UpxSW {
    height: 300px;
  }
}
.PackCard_body__pQQ1h {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  flex-grow: 1;
}
@media (min-width: 768px) {
  .PackCard_body__pQQ1h {
    gap: 11px;
    padding: 26px;
  }
}
.PackCard_title__GH5uM {
  margin: 0;
  font-family: var(--smb-font-display);
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--smb-ink);
}
@media (min-width: 768px) {
  .PackCard_title__GH5uM {
    font-size: 28px;
    letter-spacing: -0.035em;
  }
}
.PackCard_spec__IT8dx {
  font-family: var(--smb-font-mono);
  font-size: 12px;
  color: var(--smb-text-muted-card);
}
@media (min-width: 768px) {
  .PackCard_spec__IT8dx {
    font-size: 13px;
  }
}
.PackCard_copy__Y_0oQ {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--smb-text-body-card);
  flex-grow: 1;
}
@media (min-width: 768px) {
  .PackCard_copy__Y_0oQ {
    font-size: 16px;
    line-height: 1.5;
  }
}
.PackCard_footer__jASDH {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}
.PackCard_price__H6Uft {
  font-family: var(--smb-font-display);
  font-size: 23px;
  letter-spacing: -0.03em;
  color: var(--smb-ink);
}
@media (min-width: 768px) {
  .PackCard_price__H6Uft {
    font-size: 27px;
    letter-spacing: -0.035em;
  }
}
.PackCard_price__H6Uft.PackCard_placeholder__WXKlS {
  border-bottom: 2px dashed var(--smb-placeholder-border);
}
.PackCard_add__ESwOu {
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--smb-radius-md);
  background: var(--smb-tangerine);
  color: var(--smb-ink);
  font-family: var(--smb-font-display);
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 120ms ease;
  flex-shrink: 0;
}
.PackCard_add__ESwOu:hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .PackCard_add__ESwOu:hover {
    transform: none;
  }
}
@media (min-width: 768px) {
  .PackCard_add__ESwOu {
    height: 52px;
    padding: 0 24px;
    font-size: 15px;
  }
}
.PackCard_add__ESwOu:disabled {
  opacity: 0.6;
  cursor: default;
}
.PackCard_error__8We_5 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #b3261e;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/Ticker.module.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
.Ticker_ticker__pQiq2 {
  height: 54px;
  background: var(--smb-lime);
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .Ticker_ticker__pQiq2 {
    height: 64px;
  }
}
.Ticker_track__rbAR5 {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: Ticker_scroll__8HRG4 40s linear infinite;
}
@keyframes Ticker_scroll__8HRG4 {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .Ticker_track__rbAR5 {
    animation: none;
  }
}
.Ticker_item__9SjrG {
  font-family: var(--smb-font-display);
  font-size: 14px;
  color: var(--smb-ink);
  text-transform: uppercase;
  padding-right: 18px;
}
@media (min-width: 768px) {
  .Ticker_item__9SjrG {
    font-size: 18px;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/StickerRoundel.module.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.StickerRoundel_roundel__Bvtke {
  position: absolute;
  right: 22px;
  bottom: -36px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--smb-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-9deg);
}
@media (min-width: 768px) {
  .StickerRoundel_roundel__Bvtke {
    left: var(--smb-gutter-desktop);
    right: auto;
    bottom: -44px;
    width: 90px;
    height: 90px;
  }
}
.StickerRoundel_label__g0g8M {
  font-family: var(--smb-font-display);
  font-size: 11px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--smb-ink);
  text-align: center;
}
@media (min-width: 768px) {
  .StickerRoundel_label__g0g8M {
    font-size: 14px;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/components/CarouselSpotted.module.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.CarouselSpotted_wrap__kitUx {
  display: flex;
  flex-direction: column;
}
.CarouselSpotted_image__7I5mC {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}
.CarouselSpotted_copy__G95Ex {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px var(--smb-gutter-mobile) 34px;
}
@media (min-width: 768px) {
  .CarouselSpotted_copy__G95Ex {
    gap: 14px;
    padding: 40px var(--smb-gutter-desktop) 50px;
    max-width: 640px;
  }
}
.CarouselSpotted_h2__KfSE6 {
  margin: 0;
  font-family: var(--smb-font-display);
  font-size: clamp(30px, 5vw + 6px, 50px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--smb-text-on-dark);
}
.CarouselSpotted_sub__a3s2Z {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--smb-text-on-dark);
}
@media (min-width: 768px) {
  .CarouselSpotted_sub__a3s2Z {
    font-size: 17px;
    line-height: 1.55;
  }
}