/* ══════════════════════════════════════════════════════════════════════════
   TÍO PELÓN'S — WEBSITE REDESIGN
   Design system lifted 1:1 from the 2026 Product Guide (catalog.html) so the
   site, the catalog and the jar labels finally read as one brand.
   Every token below is the same value the catalog uses. Change once, changes
   everywhere — same discipline as the print piece.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── brand palette (identical to catalog :root) ── */
  --teal: #49b0a9;
  --teal-deep: #33807a;
  --teal-ink: #215b57;
  --yellow: #ffc334;
  --yellow-deep: #e7b82d;
  --red: #dd1c2c;
  --red-deep: #b01320;
  --pink: #e04e71;
  --orange: #f2873e;
  --cream: #f7f2e8;
  --ink: #141110;
  --paper: #fff;

  /* ── type (identical to catalog) ── */
  --display: 'Playfair Display', Georgia, serif;
  --body: 'Spectral', Georgia, serif;
  --sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* ── web-only tokens ── */
  --gut: clamp(20px, 5vw, 72px); /* page gutter */
  --sec: clamp(64px, 9vw, 132px); /* section rhythm */
  --r: 14px; /* card radius */
  --nav-h: 74px;
  --shadow: 0 18px 44px rgba(20, 17, 16, 0.16);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* the UA sheet's [hidden]{display:none} loses to any author display rule —
   .cartgrid{display:grid} silently defeated it and the empty cart still
   rendered its grid. Make the attribute authoritative. */
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ── shared furniture ────────────────────────────────────────────────────── */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--gut);
}
.sec {
  padding-block: var(--sec);
  position: relative;
  overflow: hidden;
}

.kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: block;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(36px, 5.2vw, 64px);
  margin-block: 0.18em 0.42em;
}
h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
}
.lede {
  font-size: clamp(17px, 1.5vw, 20.5px);
  line-height: 1.55;
  max-width: 56ch;
}
.small {
  font-size: 15px;
  line-height: 1.5;
}
.tiny {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

/* the real brand chile pattern from the label art, as page texture */
.chiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../images/chiles-ink.webp');
  background-size: 230px auto;
  background-repeat: repeat;
}
.chiles.light {
  background-image: url('../images/chiles-white.webp');
}

/* the serape stripe off the catalog back cover — brand's strongest rule */
.serape {
  height: 9px;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--red), var(--red)) 0 0 /100% 22% no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 26% /100% 22% no-repeat,
    linear-gradient(var(--teal), var(--teal)) 0 52% /100% 22% no-repeat,
    linear-gradient(var(--orange), var(--orange)) 0 78% /100% 22% no-repeat,
    var(--cream);
}

/* pills — catalog's .pill, unchanged */
.pill {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  border-radius: 99px;
  padding: 6px 13px;
  display: inline-block;
  white-space: nowrap;
}
.pill.teal {
  background: var(--teal);
}
.pill.pink {
  background: var(--pink);
}
.pill.red {
  background: var(--red);
}
.pill.yellow {
  background: var(--yellow);
  color: var(--ink);
}
.pill.cream {
  background: var(--cream);
  color: var(--ink);
}

/* buttons */
.btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 20px rgba(221, 28, 44, 0.3);
}
.btn-red:hover {
  background: var(--red-deep);
  box-shadow: 0 12px 26px rgba(221, 28, 44, 0.4);
}
.btn-ink {
  background: var(--ink);
  color: #fff;
}
.btn-yellow {
  background: var(--yellow);
  color: var(--ink);
}
.btn-ghost {
  border-color: currentColor;
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--yellow);
  border-color: var(--ink);
}
.btn-ghost-l {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}
.btn-ghost-l:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* heat meter — the label's heat-o-meter, reduced to dots (catalog .heat) */
.heat {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.heat i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(20, 17, 16, 0.16);
}
.heat i.on {
  background: var(--red);
}
.on-dark .heat i {
  background: rgba(255, 255, 255, 0.28);
}
.on-dark .heat i.on {
  background: var(--yellow);
}
.heat b {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.55;
  margin-left: 6px;
}

/* ═══ 0 · ANNOUNCEMENT + NAV ══════════════════════════════════════════════ */
.topbar {
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}
.topbar em {
  font-style: normal;
  color: var(--yellow);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1.5px solid rgba(20, 17, 16, 0.1);
  transition: box-shadow 0.2s ease;
}
.nav.stuck {
  box-shadow: 0 6px 22px rgba(20, 17, 16, 0.1);
}
.nav-in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-logo img {
  height: 34px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nav-links a {
  padding: 6px 0;
  border-bottom: 2.5px solid transparent;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.nav-links a:hover {
  border-color: var(--red);
  color: var(--red);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 8px;
}
.cart {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cart .n {
  background: var(--red);
  color: #fff;
  border-radius: 99px;
  font-size: 11px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 5px;
}
.burger {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  place-items: center;
}
.burger span,
.burger span::before,
.burger span::after {
  content: '';
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
}
.burger span::before {
  position: absolute;
  top: -7px;
}
.burger span::after {
  position: absolute;
  top: 7px;
}

/* ═══ 1 · HERO ════════════════════════════════════════════════════════════ */
.hero {
  background: var(--teal);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* the catalog cover's yellow wedge, rotated for a wide viewport */
.hero .wedge {
  position: absolute;
  inset: 0;
  background: var(--yellow-deep);
  clip-path: polygon(0 0, 54% 0, 40% 100%, 0 100%);
  z-index: -1;
}
.hero-in {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding-block: clamp(52px, 7vw, 92px) clamp(72px, 9vw, 116px);
}
.hero h1 {
  font-size: clamp(46px, 7.4vw, 104px);
  letter-spacing: -0.03em;
  margin: 0.14em 0 0.3em;
}
.hero h1 .l2 {
  display: block;
  font-style: italic;
  font-weight: 700;
}
.hero .lede {
  font-size: clamp(17px, 1.55vw, 21px);
  max-width: 44ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.hero-note {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 26px;
  opacity: 0.72;
}
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
}
.hero-art .pack {
  width: min(100%, 530px);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.34));
}
.hero-art .mascot {
  position: absolute;
  right: -11%;
  bottom: -17%;
  height: 52%;
  z-index: 2;
  opacity: 0.96;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
  pointer-events: none;
}
.hero-badge {
  position: absolute;
  left: -2%;
  top: 2%;
  z-index: 3;
  background: var(--red);
  color: #fff;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.11em;
  line-height: 1.45;
  text-transform: uppercase;
  transform: rotate(-11deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}
.hero-badge b {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0;
  font-weight: 900;
}

/* ═══ 2 · VALUES STRIP ════════════════════════════════════════════════════ */
.values {
  background: var(--ink);
  color: #fff;
}
.values-in {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block: 24px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.values-in span {
  display: flex;
  align-items: center;
  gap: 11px;
}
.values-in span::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  flex: 0 0 auto;
}

/* ═══ 3 · THE RANGE ═══════════════════════════════════════════════════════ */
.range {
  background: var(--cream);
}
.range .chiles {
  opacity: 0.05;
}
.sec-head {
  position: relative;
  z-index: 1;
  max-width: 60ch;
}
.tiers {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: 34px 0 40px;
  position: relative;
  z-index: 1;
}
.tier {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 99px;
  border: 2px solid rgba(20, 17, 16, 0.2);
  transition: all 0.16s ease;
}
.tier:hover {
  border-color: var(--ink);
}
.tier[aria-selected='true'] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  position: relative;
  z-index: 1;
}
.sku {
  background: var(--paper);
  border-radius: var(--r);
  padding: 26px 24px 26px;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 0 rgba(20, 17, 16, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.sku:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.sku .flag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
}
.cutbox {
  position: relative;
  height: 250px;
  margin-bottom: 14px;
}
.cutbox img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.3));
  transition: transform 0.25s ease;
}
.sku:hover .cutbox img {
  transform: scale(1.05) rotate(-1.5deg);
}
.sku h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
}
.sku .wt {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 7px 0 9px;
}
.sku p {
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0.86;
  flex: 1 1 auto;
}
.sku .heat {
  margin: 12px 0 14px;
  justify-content: center;
}
.buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1.5px solid rgba(20, 17, 16, 0.1);
  padding-top: 14px;
  margin-top: auto;
}
.price {
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
}
.price s {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  opacity: 0.45;
  margin-left: 5px;
}
.add {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border-radius: 99px;
  padding: 10px 16px;
  transition: background 0.16s ease;
}
.add:hover {
  background: var(--red);
}

/* ═══ 4 · VARIETY PACK BAND ═══════════════════════════════════════════════ */
.band {
  background: var(--yellow);
  position: relative;
}
.band .chiles {
  opacity: 0.07;
}
.band-in {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.band-art img {
  width: min(100%, 520px);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.26));
}
.band h2 {
  font-size: clamp(34px, 4.6vw, 58px);
}
.band .steps {
  display: flex;
  gap: 26px;
  margin: 26px 0 30px;
  flex-wrap: wrap;
}
.band .steps div {
  max-width: 19ch;
}
.band .steps b {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 900;
  display: block;
  line-height: 1;
}
.band .steps span {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}

/* ═══ 5 · STORY ═══════════════════════════════════════════════════════════ */
.story {
  background: var(--teal);
  color: #fff;
}
.story .chiles {
  opacity: 0.1;
}
.story-in {
  position: relative;
  z-index: 1;
}
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(26px, 4vw, 62px);
  align-items: center;
}
.photo {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28);
  border: 5px solid var(--cream);
}
.quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.28;
  margin: 26px 0 16px;
}
.attrib {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.82;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(40px, 5vw, 66px);
  position: relative;
  z-index: 1;
}
.stat {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
  padding: 22px 20px;
}
.stat .n {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1;
}
.stat .l {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 8px;
  line-height: 1.4;
}

/* ═══ 6 · WAYS TO USE ═════════════════════════════════════════════════════ */
.dishes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.dish {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}
.dish:hover {
  transform: translateY(-6px);
}
.dish .im {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.dish img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.dish:hover img {
  transform: scale(1.06);
}
.dish .cap {
  background: var(--ink);
  color: #fff;
  padding: 16px 18px 18px;
}
.dish .cap b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  display: block;
  line-height: 1.15;
}
.dish .cap span {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  display: block;
  margin-top: 6px;
}

/* ═══ 7 · FIND US ═════════════════════════════════════════════════════════ */
.find {
  background: var(--ink);
  color: #fff;
}
.find .chiles {
  opacity: 0.06;
}
.find-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}
.bars {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-top: 6px;
}
.bar {
  display: grid;
  grid-template-columns: 150px 1fr 52px;
  align-items: center;
  gap: 14px;
}
.bar .nm {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
}
.bar .track {
  height: 16px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  overflow: hidden;
}
.bar .val {
  display: block;
  height: 100%;
  background: var(--yellow);
  border-radius: 99px;
}
.bar .pct {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  text-align: right;
}
.bar.none .val {
  background: rgba(255, 255, 255, 0.3);
}
.locator {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r);
  padding: 26px;
}
.field {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.field input {
  flex: 1 1 190px;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  padding: 14px 20px;
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  min-width: 0;
}
.field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.field input:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 1px;
}
.deep {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.deep div {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.deep b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  display: block;
  line-height: 1;
}
.deep span {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.66;
  display: block;
  margin-top: 5px;
}

/* ═══ 8 · CO-PACK ═════════════════════════════════════════════════════════ */
.copack {
  background: var(--cream);
  position: relative;
}
.copack .chiles {
  opacity: 0.05;
}
.copack-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
}
.steps4 {
  display: grid;
  gap: 2px;
  margin-top: 26px;
  border-radius: var(--r);
  overflow: hidden;
}
.steps4 div {
  background: var(--paper);
  padding: 17px 20px;
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.steps4 b {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--red);
  flex: 0 0 24px;
}
.steps4 span {
  font-size: 15.5px;
}

/* ═══ 9 · NEWSLETTER ══════════════════════════════════════════════════════ */
.news {
  background: var(--teal);
  color: #fff;
  text-align: center;
}
.news .chiles {
  opacity: 0.11;
}
.news-in {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0 auto;
}
.news .field {
  justify-content: center;
  margin-top: 26px;
}
.news .field input {
  flex: 1 1 260px;
  max-width: 340px;
}

/* ═══ 10 · FOOTER ═════════════════════════════════════════════════════════ */
.foot {
  background: var(--ink);
  color: #fff;
}
.foot-in {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(48px, 6vw, 78px) 34px;
}
.foot img.mark {
  height: 96px;
  width: auto;
  margin-bottom: 18px;
}
.foot h5 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 14px;
}
.foot ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15px;
}
.foot ul a:hover {
  color: var(--yellow);
}
.foot .addr {
  font-size: 15px;
  line-height: 1.65;
  opacity: 0.78;
  max-width: 32ch;
}
.social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  transition: all 0.16s ease;
}
.social a:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}
.social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .hero-in,
  .band-in,
  .story-grid,
  .find-in,
  .copack-in {
    grid-template-columns: 1fr;
  }
  .hero .wedge {
    clip-path: polygon(0 0, 100% 0, 100% 46%, 0 62%);
  }
  .hero-art {
    order: -1;
    min-height: 0;
  }
  .hero-art .mascot {
    height: 44%;
    right: 0;
  }
  .band-art {
    order: -1;
  }
  .dishes {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot-in {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 820px) {
  .nav-links,
  .nav-cta {
    display: none;
  }
  .burger {
    display: grid;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .deep {
    grid-template-columns: repeat(2, 1fr);
  }
  .bar {
    grid-template-columns: 120px 1fr 44px;
  }
  .values-in {
    justify-content: flex-start;
    gap: 14px 26px;
    font-size: 11px;
  }
}
@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  .shelf {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .sku {
    padding: 16px 13px 18px;
  }
  .cutbox {
    height: 150px;
  }
  .sku h4 {
    font-size: 16.5px;
  }
  .sku p {
    display: none;
  }
  .buy {
    flex-direction: column;
    gap: 9px;
  }
  .dishes {
    grid-template-columns: 1fr;
  }
  .foot-in {
    grid-template-columns: 1fr;
  }
  .hero-badge {
    width: 92px;
    height: 92px;
    font-size: 9.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══ SALSITA SQUAD ═══════════════════════════════════════════════════════
   Pink belongs to the Squad across the whole site — it's the colour the
   existing ambassador page already uses, so members recognise it. ══════ */
.squad {
  background: var(--pink);
  color: #fff;
}
.squad .chiles {
  opacity: 0.11;
}
.squad-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
.perks {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.perks div {
  max-width: 16ch;
}
.perks b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  display: block;
  line-height: 1;
  color: var(--yellow);
}
.perks span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.82;
  display: block;
  margin-top: 6px;
  line-height: 1.4;
}

/* ── the Heat Ladder — tiers ride the label's own heat-o-meter ── */
.ladder {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rung {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 15px 20px;
  transition: transform 0.16s ease;
}
.rung:hover {
  transform: translateX(5px);
}
.rung.top {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.rung.top .heat i {
  background: rgba(20, 17, 16, 0.2);
}
.rung.top .heat i.on {
  background: var(--red);
}
.rung .nm {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
}
.rung .rq {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.72;
  display: block;
  margin-top: 3px;
}
.rung .rate {
  font-family: var(--display);
  font-weight: 900;
  font-size: 23px;
  white-space: nowrap;
}

/* ── tier cards on the recruitment page ── */
.tiergrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.tcard {
  background: var(--paper);
  border-radius: var(--r);
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--teal);
}
.tcard:nth-child(2) {
  border-top-color: var(--yellow);
}
.tcard:nth-child(3) {
  border-top-color: var(--orange);
}
.tcard:nth-child(4) {
  border-top-color: var(--red);
}
.tcard:nth-child(5) {
  border-top-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.tcard h4 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 21px;
  margin: 12px 0 2px;
}
.tcard .rq {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.6;
}
.tcard .rate {
  font-family: var(--display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  margin: 14px 0 4px;
}
.tcard .rate small {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  display: block;
  margin-top: 5px;
}
.tcard ul {
  list-style: none;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1.5px solid rgba(20, 17, 16, 0.1);
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  line-height: 1.4;
}
.tcard:nth-child(5) ul {
  border-top-color: rgba(255, 255, 255, 0.2);
}
.tcard li {
  display: flex;
  gap: 9px;
}
.tcard li::before {
  content: '›';
  font-weight: 700;
  color: var(--red);
  flex: 0 0 auto;
}
.tcard:nth-child(5) li::before {
  color: var(--yellow);
}

/* ── how it works: a real 6-step sequence, so numbering earns its place ── */
.flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 38px;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--red);
  background: var(--cream);
  border-radius: 99px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.step::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 40px;
  right: -12px;
  height: 2px;
  background: rgba(20, 17, 16, 0.14);
}
.step:last-child::after {
  display: none;
}
.step b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  display: block;
  line-height: 1.2;
}
.step span {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.8;
  display: block;
  margin-top: 6px;
}

/* ── the season calendar — a reason to post every single month ── */
.season {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mon {
  background: var(--paper);
  border-radius: 12px;
  padding: 18px 20px;
  border-left: 5px solid var(--teal);
}
.mon.now {
  background: var(--yellow);
  border-left-color: var(--red);
}
.mon .m {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}
.mon b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  display: block;
  margin: 5px 0 5px;
  line-height: 1.15;
}
.mon span {
  font-size: 13.5px;
  line-height: 1.4;
  opacity: 0.8;
  display: block;
}

/* ═══ SQUAD DASHBOARD — the tool members log into ═════════════════════════ */
.dash {
  background: var(--cream);
}
.dash .chiles {
  opacity: 0.04;
}
.dashbar {
  background: var(--ink);
  color: #fff;
}
.dashbar-in {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.dashbar img {
  height: 26px;
  width: auto;
  filter: invert(1) brightness(2);
}
.dashbar .who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pink);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
}

.dgrid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(16px, 2vw, 24px);
  position: relative;
  z-index: 1;
  align-items: start;
}
.card {
  background: var(--paper);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: 0 2px 0 rgba(20, 17, 16, 0.05);
}
.card h3 {
  font-size: 20px;
  margin-bottom: 4px;
}
.card .hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(20, 17, 16, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.kpi {
  background: var(--paper);
  padding: 20px;
}
.kpi .n {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi .l {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 7px;
}
.kpi .d {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--teal-deep);
}
.kpi .d.flat {
  color: rgba(20, 17, 16, 0.45);
}

/* tier progress — the single most motivating object on the page */
.prog {
  margin-top: 8px;
}
.prog .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 9px;
}
.prog .track {
  height: 22px;
  background: rgba(20, 17, 16, 0.09);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.prog .val {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--red));
  border-radius: 99px;
}
.prog .note {
  font-size: 14px;
  margin-top: 12px;
  opacity: 0.8;
}
.prog .note b {
  font-weight: 600;
  color: var(--red);
  font-family: var(--body);
}

/* this month's challenge */
.chal {
  background: var(--pink);
  color: #fff;
  border-radius: var(--r);
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.chal .chiles {
  opacity: 0.13;
}
.chal > * {
  position: relative;
  z-index: 1;
}
.chal h3 {
  color: #fff;
  font-size: 23px;
  margin: 8px 0 8px;
}
.chal p {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.94;
}
.chal .due {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 99px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-top: 16px;
}

/* copy-able link + code */
.copy {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}
.copy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy button {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  border-radius: 99px;
  padding: 8px 14px;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
.copy button:hover {
  background: var(--red);
}

/* leaderboard */
.lb {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(20, 17, 16, 0.08);
  border-radius: 10px;
  overflow: hidden;
}
.lb .r {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--paper);
  padding: 11px 14px;
  font-size: 14.5px;
}
.lb .r.me {
  background: var(--yellow);
  font-weight: 600;
}
.lb .r .pos {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}
.lb .r.me .pos {
  opacity: 1;
  color: var(--red);
}
.lb .r .jars {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* content kit */
.kit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.kit a {
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transition: transform 0.16s ease;
}
.kit a:hover {
  transform: translateY(-3px);
}
.kit .im {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.kit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kit .t {
  padding: 11px 12px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}
.kit .t span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 4px;
}

@media (max-width: 1000px) {
  .squad-in {
    grid-template-columns: 1fr;
  }
  .tiergrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flow {
    grid-template-columns: repeat(3, 1fr);
  }
  .step:nth-child(3)::after {
    display: none;
  }
  .season {
    grid-template-columns: repeat(2, 1fr);
  }
  .dgrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .tiergrid,
  .flow,
  .season,
  .kit,
  .kpis {
    grid-template-columns: 1fr;
  }
  .step::after {
    display: none;
  }
  .perks {
    gap: 18px;
  }
  .rung {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .rung .rate {
    grid-column: 2;
    font-size: 19px;
  }
}

/* ═══ PACK SIZES ══════════════════════════════════════════════════════════
   Replaces Woo's "Choose an option" dropdown. The dropdown hid the prices,
   was mislabelled "Quantity" next to an actual quantity field, and blocked
   Add to cart until touched. Packs are shown, priced, and pre-selected. ══ */
.packs {
  display: flex;
  gap: 5px;
  margin-top: 12px;
}
.packs button {
  flex: 1 1 0;
  border: 1.5px solid rgba(20, 17, 16, 0.18);
  border-radius: 9px;
  padding: 7px 3px 6px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.packs button small {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
}
.packs button:hover {
  border-color: var(--ink);
}
.packs button[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.packs button[aria-pressed='true'] small {
  opacity: 0.72;
}
.packs button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.sku .save {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 9px;
  min-height: 12px;
}

/* ═══ PRODUCT PAGE ════════════════════════════════════════════════════════ */
.pdp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
.gal {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.gal .main {
  background: var(--cream);
  border-radius: var(--r);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 34px;
  overflow: hidden;
}
.gal .main img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28));
}
.thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 9px;
}
.thumbs button {
  background: var(--cream);
  border-radius: 10px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.thumbs button[aria-pressed='true'] {
  border-color: var(--ink);
}
.thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumbs button:first-child img {
  object-fit: contain;
  padding: 9px;
}

.crumb {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(20, 17, 16, 0.5);
  margin-bottom: 18px;
}
.crumb a:hover {
  color: var(--red);
}
.pdp h1 {
  font-size: clamp(32px, 4.2vw, 50px);
  margin-bottom: 12px;
}
.rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.stars {
  color: var(--yellow);
  letter-spacing: 2px;
  font-size: 15px;
}
.pdp .bigprice {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pdp .perjar {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(20, 17, 16, 0.55);
  margin-top: 8px;
}
.pdp .perjar b {
  color: var(--red);
  font-weight: 700;
}

/* the pack picker — three real cards, not a select element */
.packpick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.packpick button {
  position: relative;
  text-align: left;
  background: var(--paper);
  border: 2px solid rgba(20, 17, 16, 0.14);
  border-radius: 12px;
  padding: 16px 15px 15px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.packpick button:hover {
  border-color: rgba(20, 17, 16, 0.4);
}
.packpick button[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--cream);
}
.packpick .qty {
  font-family: var(--display);
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
}
.packpick .lbl {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  margin-top: 4px;
  display: block;
}
.packpick .amt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  margin-top: 11px;
  display: block;
  font-variant-numeric: tabular-nums;
}
.packpick .ea {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.5;
  display: block;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.packpick .tag {
  position: absolute;
  top: -9px;
  right: 10px;
  background: var(--red);
  color: #fff;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 4px 9px;
}
.packpick .tag.best {
  background: var(--teal);
}
.packpick button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.addrow {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  align-items: stretch;
  flex-wrap: wrap;
}
.qtybox {
  display: flex;
  align-items: center;
  border: 2px solid rgba(20, 17, 16, 0.14);
  border-radius: 99px;
  background: var(--paper);
  overflow: hidden;
  flex: 0 0 auto;
}
.qtybox button {
  width: 44px;
  height: 100%;
  font-size: 19px;
  font-weight: 600;
  transition: background 0.15s;
}
.qtybox button:hover {
  background: var(--cream);
}
.qtybox input {
  width: 42px;
  text-align: center;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qtybox input::-webkit-outer-spin-button,
.qtybox input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.addrow .btn {
  flex: 1 1 200px;
  justify-content: center;
}

.points {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--cream);
  border-radius: 10px;
  padding: 13px 16px;
  margin-top: 16px;
  font-size: 14.5px;
}
.points b {
  font-weight: 600;
}
.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1.5px solid rgba(20, 17, 16, 0.12);
}
.trust div {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
}
.trust b {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 5px;
}

/* cross-sell — the Variety Pack is the same $35 as a 3-pack, so say so */
.swap {
  background: var(--yellow);
  border-radius: var(--r);
  padding: 22px 24px;
  margin-top: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.swap img {
  width: 104px;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.24));
}
.swap h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 5px;
}
.swap p {
  font-size: 14.5px;
  line-height: 1.45;
  margin-bottom: 11px;
}

/* tabs */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid rgba(20, 17, 16, 0.12);
  margin-top: 8px;
  flex-wrap: wrap;
}
.tabs button {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.tabs button[aria-selected='true'] {
  border-bottom-color: var(--red);
  color: var(--red);
}
.tabpanel {
  padding-top: 26px;
  max-width: 70ch;
}
.tabpanel[hidden] {
  display: none;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 4px;
}
.spec th,
.spec td {
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid rgba(20, 17, 16, 0.1);
}
.spec th {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  width: 42%;
}

@media (max-width: 1000px) {
  .pdp {
    grid-template-columns: 1fr;
  }
  .gal {
    position: static;
  }
}
@media (max-width: 560px) {
  .packpick {
    grid-template-columns: 1fr;
  }
  .packpick button {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 15px;
  }
  .packpick .amt {
    margin-top: 0;
    margin-left: auto;
  }
  .packpick .lbl,
  .packpick .ea {
    margin-top: 0;
  }
  .trust {
    grid-template-columns: 1fr;
  }
  .swap {
    flex-direction: column;
    text-align: center;
  }
}

/* Playfair's $ has a double stroke that overshoots the lining figures — at
   display sizes it reads as an artifact. Set it small and raised, the way
   price typography normally handles a currency mark. */
.cur {
  font-size: 0.6em;
  vertical-align: 0.24em;
  margin-right: 0.03em;
  letter-spacing: -0.02em;
}

/* The azulejo banner was removed from the site on 2026-09-17 — Oscar's call.
   The artwork survives at assets/azulejo.svg and in the Divi child theme, so
   it is still available for packaging, shelf talkers or a future header. */

/* ═══ SHOP PAGE ═══════════════════════════════════════════════════════════ */
.skulink {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
}
.skulink:hover h4 {
  color: var(--red);
}
.sku .buy {
  align-items: baseline;
}
.sku .from {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
  margin-right: 5px;
}
.sku .add {
  display: inline-block;
}

/* ═══ STORE LOCATOR ═══════════════════════════════════════════════════════ */
.skufilter {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.skufilter button {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 8px 15px;
  border-radius: 99px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.skufilter button:hover {
  border-color: #fff;
}
.skufilter button[aria-pressed='true'] {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}

.storecount {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 18px;
}
.storecount b {
  font-size: 17px;
  opacity: 1;
  color: var(--red);
}
.storelist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.store {
  background: var(--cream);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.store b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16.5px;
  display: block;
  line-height: 1.2;
}
.store b em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red);
  display: block;
  margin-bottom: 3px;
}
.store span {
  font-size: 13.5px;
  opacity: 0.68;
  display: block;
  margin-top: 5px;
  line-height: 1.4;
}
.store .tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
}
.store .tags .pill {
  font-size: 9px;
  padding: 4px 9px;
  letter-spacing: 0.09em;
}

.heb-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--yellow);
  border-radius: var(--r);
  padding: 26px 30px;
  margin-top: 32px;
}
.heb-note h3 {
  font-size: 21px;
  margin-bottom: 6px;
}
.heb-note p {
  font-size: 15px;
  line-height: 1.5;
  max-width: 62ch;
  margin: 0;
}

/* ═══ CO-PACKING QUESTIONNAIRE ════════════════════════════════════════════ */
.qform {
  background: var(--paper);
  border-radius: var(--r);
  padding: clamp(24px, 3.4vw, 44px);
}
.qstep {
  border-top: 1.5px solid rgba(20, 17, 16, 0.1);
  padding-top: 26px;
  margin-top: 30px;
}
.qstep:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.qstep > .kicker {
  color: var(--red);
  margin-bottom: 16px;
}
.qrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.qf {
  margin-bottom: 18px;
}
.qf label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.6;
  display: block;
  margin-bottom: 7px;
}
.qf label .req {
  color: var(--red);
  opacity: 1;
}
.qf input,
.qf select,
.qf textarea {
  width: 100%;
  background: var(--cream);
  border: 1.5px solid rgba(20, 17, 16, 0.12);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
}
.qf input:focus,
.qf select:focus,
.qf textarea:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.qf textarea {
  min-height: 96px;
  resize: vertical;
}
.qf .hint {
  font-size: 13px;
  opacity: 0.55;
  margin-top: 6px;
  line-height: 1.4;
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chips button {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 17px;
  border-radius: 99px;
  border: 1.5px solid rgba(20, 17, 16, 0.18);
  transition: all 0.15s ease;
}
.chips button:hover {
  border-color: var(--ink);
}
.chips button[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.chips button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.qnote {
  background: var(--cream);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 14.5px;
  line-height: 1.5;
  margin-top: 8px;
}
.qnote b {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  display: block;
  margin-bottom: 5px;
}
.qdone {
  background: var(--teal);
  color: #fff;
  border-radius: var(--r);
  padding: 32px;
  text-align: center;
}
.qdone h3 {
  color: #fff;
  font-size: 26px;
  margin-bottom: 8px;
}

@media (max-width: 700px) {
  .qrow {
    grid-template-columns: 1fr;
  }
}

/* ═══ STORY PAGE ══════════════════════════════════════════════════════════ */
.storyhero {
  background: var(--teal);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.storyhero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  padding-block: clamp(44px, 6vw, 82px) clamp(52px, 7vw, 92px);
}
.storyhero h1 {
  font-size: clamp(38px, 5.4vw, 72px);
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0.16em 0 0.3em;
  text-wrap: balance;
}

figure.photo {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 5px solid var(--cream);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24);
}
figure.photo img {
  width: 100%;
  display: block;
}
figure.photo figcaption {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 11px 14px;
  line-height: 1.4;
  opacity: 0.75;
}

.wrap.narrow > * {
  max-width: 760px;
}
.wrap.split {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
}
.wrap.split.reverse figure.photo {
  order: 2;
}
.body-lg {
  font-size: clamp(17px, 1.55vw, 19.5px);
  line-height: 1.62;
  margin-bottom: 1.1em;
  max-width: 66ch;
}
.body-lg a {
  color: var(--red-deep);
  border-bottom: 1.5px solid currentColor;
}

blockquote.pull {
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 2px solid var(--ink);
}
blockquote.pull p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(21px, 2.5vw, 30px);
  line-height: 1.3;
  margin-bottom: 14px;
  text-wrap: balance;
}
blockquote.pull cite {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.collabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.collab {
  background: var(--paper);
  border-radius: var(--r);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.collab:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.collab .cutbox {
  height: 170px;
  margin-bottom: 16px;
}
.collab h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 7px;
}
.collab:hover h4 {
  color: var(--red);
}
.collab p {
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0.82;
}

.values-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: clamp(34px, 4vw, 52px);
}
.values-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px 22px;
}
.values-list b {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--yellow);
  flex: 0 0 auto;
}
.values-list span {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.25;
}
.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.mv p {
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.86;
  margin-top: 9px;
}

@media (max-width: 900px) {
  .storyhero-in,
  .wrap.split {
    grid-template-columns: 1fr;
  }
  .wrap.split.reverse figure.photo {
    order: -1;
  }
  .collabs {
    grid-template-columns: 1fr;
  }
  .values-list,
  .mv {
    grid-template-columns: 1fr;
  }
}

/* ═══ APPLY HANDOFF ═══════════════════════════════════════════════════════
   The application itself lives in AffiliateWP, which already collects
   Instagram, shipping address, platform and motivation. This panel primes
   applicants for those fields so fewer of them abandon the real form. ═══ */
.readybox {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 34px);
}
.readybox h3 {
  font-size: 22px;
}
.ready {
  list-style: none;
  counter-reset: r;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ready li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 13px;
  align-items: baseline;
}
/* b and span are separate children — both belong in the text column, or the
   description wraps into the 26px number column one word at a time */
.ready b,
.ready span {
  grid-column: 2;
}
.ready li::before {
  content: counter(r, decimal-leading-zero);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--red);
}
.ready b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  display: block;
  line-height: 1.25;
}
.ready span {
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0.72;
  display: block;
  margin-top: 3px;
}
@media (max-width: 900px) {
  #apply .wrap {
    grid-template-columns: 1fr !important;
  }
}

/* ═══ AFFILIATE PAGES ═════════════════════════════════════════════════════
   Design for the two live WordPress pages. /affiliate-sign-up/ is a WPForms
   application Oscar reviews by hand; /affiliate-login/ is AffiliateWP. ═══ */
.authwrap {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding-block: clamp(44px, 6vw, 88px);
}
/* the card sits inside a coloured section, so it must reset the inherited
   text colour or every label renders white on white */
.authcard {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r);
  padding: clamp(28px, 3.6vw, 44px);
  width: min(100%, 440px);
  box-shadow: 0 18px 44px rgba(20, 17, 16, 0.14);
}
.authcard h1,
.authcard label,
.authcard .sub,
.authcard .authfoot {
  color: var(--ink);
}
.authcard h1 {
  font-size: clamp(28px, 3.2vw, 38px);
  margin-bottom: 8px;
}
.authcard .sub {
  font-size: 15.5px;
  opacity: 0.7;
  margin-bottom: 24px;
}
.authcard .qf {
  margin-bottom: 16px;
}
.authrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 20px;
  font-size: 14px;
  flex-wrap: wrap;
}
.authrow label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.authrow a {
  color: var(--red-deep);
  font-weight: 600;
  font-size: 13.5px;
}
.authfoot {
  border-top: 1.5px solid rgba(20, 17, 16, 0.1);
  margin-top: 22px;
  padding-top: 20px;
  text-align: center;
  font-size: 15px;
}
.authfoot a {
  color: var(--red-deep);
  font-weight: 600;
  border-bottom: 1.5px solid currentColor;
}
.authside {
  max-width: 420px;
  margin-top: 26px;
}
.authside li {
  display: flex;
  gap: 11px;
  font-size: 15px;
  margin-bottom: 10px;
  line-height: 1.45;
}
.authside li::before {
  content: '›';
  color: var(--yellow);
  font-weight: 700;
  flex: 0 0 auto;
}

.speclabel {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  background: #fff6de;
  border-radius: 99px;
  padding: 5px 11px;
  display: inline-block;
  margin-bottom: 14px;
}
.buildnote {
  background: #fff6de;
  border: 1.5px solid var(--yellow);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.5;
  margin-top: 22px;
}
.buildnote b {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  display: block;
  margin-bottom: 5px;
}
@media (max-width: 700px) {
  .authcard {
    padding: 24px;
  }
}
.agree {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.45;
  margin-top: 6px;
  cursor: pointer;
}
.agree input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--red);
}

/* ═══ HERO CAROUSEL ═══════════════════════════════════════════════════════
   Cross-fades the creator photographs in the Squad hero. Fixed aspect ratio
   so the frame never jumps between images of differing dimensions. ═══════ */
.carousel {
  position: relative;
}
.carousel .slides {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}
.carousel img.on {
  opacity: 1;
}
.carousel .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}
.carousel .dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.carousel .dots button:hover {
  background: rgba(255, 255, 255, 0.85);
}
.carousel .dots button[aria-current='true'] {
  background: var(--yellow);
  transform: scale(1.25);
}
.carousel .dots button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .carousel img {
    transition: none;
  }
}

/* ═══ RECIPE CARDS ════════════════════════════════════════════════════════
   A photograph from the 2026 shoot showing the exact jar each recipe uses.
   The colour class survives as a top accent on the caption so the card is
   still tied to its salsa when the photo is doing the talking. ═══════════ */
.recipes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.recipe {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: #fff;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.recipe:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.recipe .top {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.recipe .top img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.recipe:hover .top img {
  transform: scale(1.05);
}
/* keeps the play badge and tag legible over any part of a photograph */
.recipe .top::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 17, 16, 0.34) 0%,
    rgba(20, 17, 16, 0) 34%,
    rgba(20, 17, 16, 0) 62%,
    rgba(20, 17, 16, 0.42) 100%
  );
}
.play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(20, 17, 16, 0.62);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.recipe:hover .play {
  background: var(--ink);
  transform: scale(1.1);
}
.play svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  margin-left: 3px;
}
.recipe .tag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
}

/* RECIPE CARDS — BLACK CAPTION BACKGROUND */
.recipes .recipe .cap {
    background: #141110 !important;
    color: #ffffff !important;
    padding: 18px 20px 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 14px 14px;
    border-top: 5px solid var(--red);
}

/* Keep recipe descriptions white */
.recipes .recipe .cap b,
.recipes .recipe .cap p {
    color: #ffffff !important;
}

.recipe.teal .cap {
  border-top-color: var(--teal);
}
.recipe.orange .cap {
  border-top-color: var(--orange);
}
.recipe.pink .cap {
  border-top-color: var(--pink);
}
.recipe .cap b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  display: block;
  line-height: 1.15;
}
.recipe .cap p {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.72;
  margin-top: 8px;
  flex: 1 1 auto;
}
.recipe .meta {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.recipe .meta svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex: 0 0 auto;
}
.recipe .meta .salsa {
  color: var(--yellow);
  opacity: 1;
}
@media (max-width: 1000px) {
  .recipes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .recipes {
    grid-template-columns: 1fr;
  }
}
.mc-note {
  flex: 1 1 100%;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  opacity: 0.72;
  margin-top: 10px;
  text-align: center;
}
.mc-note code {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 11px;
}
/* section lead headings render as h1 on their own page, h2 elsewhere */
.sec-head h1 {
  font-size: clamp(36px, 5.2vw, 64px);
  margin-block: 0.18em 0.42em;
}

/* ═══ CART ════════════════════════════════════════════════════════════════
   Design for /cart/. The live store runs WooCommerce, so this is a spec for
   how the Woo cart template should look, not a replacement for it. ═══════ */
.cartgrid {
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
}
.cartline {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1.5px solid rgba(20, 17, 16, 0.1);
}
.cartline:first-child {
  border-top: 1.5px solid rgba(20, 17, 16, 0.1);
}
.cartline .thumb {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  background: var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cartline .thumb img {
  max-width: 76%;
  max-height: 84%;
  object-fit: contain;
}
.cartline h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}
.cartline .sub {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  margin-top: 5px;
}
.cartline .lineprice {
  font-family: var(--display);
  font-weight: 900;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.cartline .rm {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
  margin-top: 8px;
  display: block;
  text-align: right;
}
.cartline .rm:hover {
  opacity: 1;
  color: var(--red);
}
.cartqty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(20, 17, 16, 0.16);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 10px;
}
.cartqty button {
  width: 34px;
  height: 32px;
  font-size: 16px;
  font-weight: 600;
}
.cartqty button:hover {
  background: var(--cream);
}
.cartqty span {
  min-width: 34px;
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.summary {
  background: var(--cream);
  border-radius: var(--r);
  padding: 26px;
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.summary h3 {
  font-size: 21px;
  margin-bottom: 18px;
}
.srow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 15.5px;
  margin-bottom: 11px;
}
.srow.free {
  color: var(--teal-deep);
  font-weight: 600;
}
.srow.total {
  border-top: 1.5px solid rgba(20, 17, 16, 0.14);
  margin-top: 16px;
  padding-top: 16px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
}
.srow.total span:last-child {
  font-variant-numeric: tabular-nums;
}
.paywith {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1.5px solid rgba(20, 17, 16, 0.12);
}
.paywith span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
  width: 100%;
}
.paychip {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--paper);
  border: 1.5px solid rgba(20, 17, 16, 0.14);
  border-radius: 7px;
  padding: 7px 11px;
}
.cartempty {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 20px;
}
.cartempty h2 {
  margin-bottom: 10px;
}
@media (max-width: 860px) {
  .cartgrid {
    grid-template-columns: 1fr;
  }
  .summary {
    position: static;
  }
  .cartline {
    grid-template-columns: 72px 1fr;
    gap: 14px;
  }
  .cartline .thumb {
    width: 72px;
    height: 72px;
  }
  .cartline .lineprice {
    grid-column: 2;
    text-align: left;
  }
  .cartline .rm {
    text-align: left;
  }
}

/* ═══ MERCH ═══════════════════════════════════════════════════════════════
   Oscar's own product photography, three shots on-model. Cards carry a thumb
   strip so front, back and worn are all reachable without a detail page. ═══ */
.merchgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.merch {
  background: var(--paper);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.merch:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.merch .im {
  aspect-ratio: 4/5;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.merch .im img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.merch .im img.on {
  opacity: 1;
}
.merch .kind {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
}
.merch .thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(transparent, rgba(20, 17, 16, 0.45));
}
.merch .thumbs button {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: var(--cream);
  padding: 0;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.merch .thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.merch .thumbs button[aria-pressed='true'] {
  border-color: var(--yellow);
  transform: translateY(-2px);
}
.merch .thumbs button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.merch .cap {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border-top: 5px solid var(--ink);
}
.merch.yellow .cap {
  border-top-color: var(--yellow);
}
.merch.teal .cap {
  border-top-color: var(--teal);
}
.merch.orange .cap {
  border-top-color: var(--orange);
}
.merch .cap h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
}
.merch .cap p {
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0.8;
  margin-top: 8px;
  flex: 1 1 auto;
}
.merch .backprint {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
  background: var(--cream);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
  opacity: 0.75;
}
.merch .opts {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  margin-top: 12px;
}

/* ═══ SIZE PICKER ═════════════════════════════════════════════════════════
   A size must be chosen before Add to cart does anything — the same rule
   WooCommerce enforces on a variable product. ═════════════════════════════ */
.sizes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.sizes button {
  min-width: 44px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1.5px solid rgba(20, 17, 16, 0.18);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}
.sizes button:hover {
  border-color: var(--ink);
}
.sizes button[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.sizes button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.sizelabel {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  margin-top: 14px;
}
.sizelabel .req {
  color: var(--red);
  opacity: 1;
}
.sizehint {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--red);
  margin-top: 8px;
  min-height: 15px;
}
.merch .add[disabled] {
  background: rgba(20, 17, 16, 0.22);
  cursor: not-allowed;
}
.merch .add[disabled]:hover {
  background: rgba(20, 17, 16, 0.22);
}

/* ═══ CHECKOUT ════════════════════════════════════════════════════════════
   Design for /checkout/. The card field is where Stripe Elements mounts —
   a Stripe-hosted iframe, so raw card data never touches the site or its
   server. Nothing here collects a card number itself. ════════════════════ */
.cogrid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
}
.costep {
  margin-bottom: 34px;
}
.costep > .kicker {
  color: var(--red);
  margin-bottom: 14px;
}
.express {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.express button {
  border-radius: 10px;
  padding: 14px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}
.express button:hover {
  transform: translateY(-1px);
}
.express .apple {
  background: var(--ink);
  color: #fff;
}
.express .gpay {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid rgba(20, 17, 16, 0.2);
}
.codiv {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 26px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.45;
}
.codiv::before,
.codiv::after {
  content: '';
  flex: 1 1 auto;
  height: 1.5px;
  background: rgba(20, 17, 16, 0.14);
}
.cardmount {
  background: var(--cream);
  border: 1.5px dashed rgba(20, 17, 16, 0.28);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}
.cardmount .lock {
  font-size: 22px;
  display: block;
  margin-bottom: 8px;
}
.cardmount b {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  display: block;
  margin-bottom: 6px;
}
.cardmount p {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
  max-width: 46ch;
  margin: 0 auto;
}
.corow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 15px;
  margin-bottom: 10px;
}
.corow.total {
  border-top: 1.5px solid rgba(20, 17, 16, 0.14);
  margin-top: 14px;
  padding-top: 14px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 21px;
}
.coitem {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(20, 17, 16, 0.09);
  font-size: 14px;
}
.coitem img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--paper);
  border-radius: 8px;
  padding: 5px;
}
.coitem .v {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  display: block;
  margin-top: 3px;
}
.coitem .p {
  font-family: var(--sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
  .cogrid {
    grid-template-columns: 1fr;
  }
  .express {
    grid-template-columns: 1fr;
  }
}

/* ═══ CO-PACKING SERVICES ═════════════════════════════════════════════════ */
.capgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.cap {
  background: var(--paper);
  border-radius: 12px;
  padding: 20px 22px;
  border-top: 4px solid var(--teal);
}
.cap:nth-child(2) {
  border-top-color: var(--yellow);
}
.cap:nth-child(3) {
  border-top-color: var(--orange);
}
.cap:nth-child(4) {
  border-top-color: var(--red);
}
.cap:nth-child(5) {
  border-top-color: var(--pink);
}
.cap b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  display: block;
  line-height: 1;
}
.cap .t {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  margin-top: 8px;
  display: block;
}
.cap span {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  display: block;
  margin-top: 6px;
  line-height: 1.5;
}

.steps6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(20, 17, 16, 0.1);
}
.steps6 div {
  background: var(--paper);
  padding: 24px 24px 26px;
}
.steps6 b {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--red);
  display: block;
  margin-bottom: 10px;
}
.steps6 h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 7px;
}
.steps6 p {
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0.82;
}

.fit2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.fitbox {
  border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 30px);
}
.fitbox.yes {
  background: var(--teal);
  color: #fff;
}
.fitbox.no {
  background: var(--cream);
  border: 1.5px solid rgba(20, 17, 16, 0.14);
}
.fitbox h3 {
  font-size: 22px;
  margin-bottom: 14px;
}
.fitbox.yes h3 {
  color: #fff;
}
.fitbox ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.45;
}
.fitbox li {
  display: flex;
  gap: 11px;
}
/* <b> followed by a text node makes two flex items and the bold half
   collapses into a narrow column — keep list content in one child */
.fitbox li > span {
  flex: 1 1 auto;
}
.fitbox li > b {
  display: inline;
}
.fitbox li::before {
  content: '›';
  font-weight: 700;
  flex: 0 0 auto;
}
.fitbox.yes li::before {
  color: var(--yellow);
}
.fitbox.no li::before {
  color: var(--red);
}

.certrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.cert {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1.5px solid rgba(20, 17, 16, 0.16);
  border-radius: 99px;
  padding: 9px 16px;
}
@media (max-width: 900px) {
  .steps6 {
    grid-template-columns: 1fr;
  }
  .fit2 {
    grid-template-columns: 1fr;
  }
}

/* EC-BTN-104 + EC-NAV-121: Re-assert hero / CTA text-white on buttons & links.
   Uses class~= (word match) not class*= (substring) to avoid matching hover:text-white etc. */
button[class~='text-white/90'],
a[class~='text-white/90'] {
  color: rgba(255, 255, 255, 0.9);
}
button[class~='text-white/80'],
a[class~='text-white/80'] {
  color: rgba(255, 255, 255, 0.8);
}
button[class~='text-white/70'],
a[class~='text-white/70'] {
  color: rgba(255, 255, 255, 0.7);
}
button[class~='text-white/60'],
a[class~='text-white/60'] {
  color: rgba(255, 255, 255, 0.6);
}
button[class~='text-white/50'],
a[class~='text-white/50'] {
  color: rgba(255, 255, 255, 0.5);
}
button[class~='text-white/40'],
a[class~='text-white/40'] {
  color: rgba(255, 255, 255, 0.4);
}
button[class~='text-white'],
a[class~='text-white'] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* EC-ANIM-008b / EC-ANIM-009: carousel-only override — scroll-reveal elements animate via IO in functions.php */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}