/*
Theme Name: TIOPELONSALSITAS (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.3.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,900&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Poppins:wght@400;500;600;700;800&display=swap');

/* CSS Variables */
:root {
}

/* Inline Styles */

/* Extracted CSS from page */
: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;
  --display: 'Playfair Display', Georgia, serif;
  --body: 'Spectral', Georgia, serif;
  --sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --gut: clamp(20px, 5vw, 72px);
  --sec: clamp(64px, 9vw, 132px);
  --r: 14px;
  --nav-h: 74px;
  --shadow: 0 18px 44px rgba(20, 17, 16, 0.16);
}
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
  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: 0px;
  cursor: pointer;
}
.wrap {
  max-width: 1240px;
  margin: 0px 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;
}
.chiles {
  position: absolute;
  inset: 0px;
  pointer-events: none;
  background-image: url('assets/images/chiles-ink.webp');
  background-size: 230px auto;
  background-repeat: repeat;
}
.chiles.light {
  background-image: url('assets/images/chiles-white.webp');
}
.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);
}
.pill {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  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);
}
.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,
    box-shadow 0.16s,
    background 0.16s;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-red {
  background: var(--red);
  color: rgb(255, 255, 255);
  box-shadow: rgba(221, 28, 44, 0.3) 0px 8px 20px;
}
.btn-red:hover {
  background: var(--red-deep);
  box-shadow: rgba(221, 28, 44, 0.4) 0px 12px 26px;
}
.btn-ink {
  background: var(--ink);
  color: rgb(255, 255, 255);
}
.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: rgb(255, 255, 255);
}
.btn-ghost-l:hover {
  background: rgb(255, 255, 255);
  color: var(--ink);
  border-color: rgb(255, 255, 255);
}
.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;
}
.topbar {
  background: var(--ink);
  color: rgb(255, 255, 255);
  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: 0px;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1.5px solid rgba(20, 17, 16, 0.1);
  transition: box-shadow 0.2s;
}
.nav.stuck {
  box-shadow: rgba(20, 17, 16, 0.1) 0px 6px 22px;
}
.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 0px;
  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: rgb(255, 255, 255);
  border-radius: 99px;
  font-size: 11px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0px 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;
}
.hero {
  background: var(--teal);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero .wedge {
  position: absolute;
  inset: 0px;
  background: var(--yellow-deep);
  clip-path: polygon(0px 0px, 54% 0px, 40% 100%, 0px 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 0px 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(rgba(0, 0, 0, 0.34) 0px 30px 40px);
}
.hero-art .mascot {
  position: absolute;
  right: -11%;
  bottom: -17%;
  height: 52%;
  z-index: 2;
  opacity: 0.96;
  filter: drop-shadow(rgba(0, 0, 0, 0.22) 0px 12px 18px);
  pointer-events: none;
}
.hero-badge {
  position: absolute;
  left: -2%;
  top: 2%;
  z-index: 3;
  background: var(--red);
  color: rgb(255, 255, 255);
  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: rgba(0, 0, 0, 0.26) 0px 10px 24px;
}
.hero-badge b {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0px;
  font-weight: 900;
}
.values {
  background: var(--ink);
  color: rgb(255, 255, 255);
}
.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;
}
.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 0px 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: 0.16s;
}
.tier:hover {
  border-color: var(--ink);
}
.tier[aria-selected='true'] {
  background: var(--ink);
  color: rgb(255, 255, 255);
  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;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  box-shadow: rgba(20, 17, 16, 0.06) 0px 2px 0px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.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: 0px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 14px 16px);
  transition: transform 0.25s;
}
.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 0px 9px;
}
.sku p {
  font-size: 14.5px;
  line-height: 1.45;
  opacity: 0.86;
  flex: 1 1 auto;
}
.sku .heat {
  margin: 12px 0px 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: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 10px 16px;
  transition: background 0.16s;
}
.add:hover {
  background: var(--red);
}
.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(rgba(0, 0, 0, 0.26) 0px 24px 30px);
}
.band h2 {
  font-size: clamp(34px, 4.6vw, 58px);
}
.band .steps {
  display: flex;
  gap: 26px;
  margin: 26px 0px 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;
}
.story {
  background: var(--teal);
  color: rgb(255, 255, 255);
}
.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: rgba(0, 0, 0, 0.28) 0px 22px 46px;
  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 0px 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: rgb(255, 255, 255);
  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;
}
.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;
}
.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;
}
.dish:hover img {
  transform: scale(1.06);
}
.dish .cap {
  background: var(--ink);
  color: rgb(255, 255, 255);
  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;
}
.find {
  background: var(--ink);
  color: rgb(255, 255, 255);
}
.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: rgb(255, 255, 255);
  font-family: var(--sans);
  font-size: 14px;
  min-width: 0px;
}
.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;
}
.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;
}
.news {
  background: var(--teal);
  color: rgb(255, 255, 255);
  text-align: center;
}
.news .chiles {
  opacity: 0.11;
}
.news-in {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0px auto;
}
.news .field {
  justify-content: center;
  margin-top: 26px;
}
.news .field input {
  flex: 1 1 260px;
  max-width: 340px;
}
.foot {
  background: var(--ink);
  color: rgb(255, 255, 255);
}
.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: 0.16s;
}
.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;
}
@media (max-width: 1000px) {
  .hero-in,
  .band-in,
  .story-grid,
  .find-in,
  .copack-in {
    grid-template-columns: 1fr;
  }
  .hero .wedge {
    clip-path: polygon(0px 0px, 100% 0px, 100% 46%, 0px 62%);
  }
  .hero-art {
    order: -1;
    min-height: 0px;
  }
  .hero-art .mascot {
    height: 44%;
    right: 0px;
  }
  .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: auto ease 0s 1 normal none running none !important;
  }
}
.squad {
  background: var(--pink);
  color: rgb(255, 255, 255);
}
.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;
}
.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;
}
.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;
}
.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: rgb(255, 255, 255);
}
.tcard h4 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 21px;
  margin: 12px 0px 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 0px 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);
}
.flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  counter-reset: step 0;
}
.step {
  position: relative;
  padding-top: 38px;
}
.step::before {
  counter-increment: step 1;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0px;
  left: 0px;
  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;
}
.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 0px;
  line-height: 1.15;
}
.mon span {
  font-size: 13.5px;
  line-height: 1.4;
  opacity: 0.8;
  display: block;
}
.dash {
  background: var(--cream);
}
.dash .chiles {
  opacity: 0.04;
}
.dashbar {
  background: var(--ink);
  color: rgb(255, 255, 255);
}
.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: rgba(20, 17, 16, 0.05) 0px 2px 0px;
}
.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);
}
.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);
}
.chal {
  background: var(--pink);
  color: rgb(255, 255, 255);
  border-radius: var(--r);
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.chal .chiles {
  opacity: 0.13;
}
.chal > * {
  position: relative;
  z-index: 1;
}
.chal h3 {
  color: rgb(255, 255, 255);
  font-size: 23px;
  margin: 8px 0px;
}
.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 {
  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: rgb(255, 255, 255);
  border-radius: 99px;
  padding: 8px 14px;
  flex: 0 0 auto;
  transition: background 0.15s;
}
.copy button:hover {
  background: var(--red);
}
.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;
}
.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;
}
.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;
  }
}
.packs {
  display: flex;
  gap: 5px;
  margin-top: 12px;
}
.packs button {
  flex: 1 1 0px;
  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,
    border-color 0.15s,
    color 0.15s;
}
.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: rgb(255, 255, 255);
  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;
}
.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 / 1;
  display: grid;
  place-items: center;
  padding: 34px;
  overflow: hidden;
}
.gal .main img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(rgba(0, 0, 0, 0.28) 0px 18px 22px);
}
.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 / 1;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
.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;
}
.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,
    background 0.15s;
}
.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: rgb(255, 255, 255);
  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: 0px;
  background: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.qtybox input::-webkit-outer-spin-button,
.qtybox input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0px;
}
.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;
}
.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(rgba(0, 0, 0, 0.24) 0px 10px 14px);
}
.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 {
  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,
    border-color 0.15s;
}
.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 0px;
  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: 0px;
    margin-left: auto;
  }
  .packpick .lbl,
  .packpick .ea {
    margin-top: 0px;
  }
  .trust {
    grid-template-columns: 1fr;
  }
  .swap {
    flex-direction: column;
    text-align: center;
  }
}
.cur {
  font-size: 0.6em;
  vertical-align: 0.24em;
  margin-right: 0.03em;
  letter-spacing: -0.02em;
}
.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;
}
.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: rgb(255, 255, 255);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.skufilter button:hover {
  border-color: rgb(255, 255, 255);
}
.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: 0px;
}
.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: 0px;
  padding-top: 0px;
  margin-top: 0px;
}
.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: 0.15s;
}
.chips button:hover {
  border-color: var(--ink);
}
.chips button[aria-pressed='true'] {
  background: var(--ink);
  color: rgb(255, 255, 255);
  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: rgb(255, 255, 255);
  border-radius: var(--r);
  padding: 32px;
  text-align: center;
}
.qdone h3 {
  color: rgb(255, 255, 255);
  font-size: 26px;
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  .qrow {
    grid-template-columns: 1fr;
  }
}
.storyhero {
  background: var(--teal);
  color: rgb(255, 255, 255);
  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: rgb(255, 255, 255);
  margin: 0.16em 0px 0.3em;
  text-wrap: balance;
}
figure.photo {
  margin: 0px;
  border-radius: var(--r);
  overflow: hidden;
  border: 5px solid var(--cream);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 22px 46px;
}
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;
}
blockquote.pull {
  margin: 34px 0px 0px;
  padding: 26px 0px 0px;
  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,
    box-shadow 0.2s;
}
.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;
  }
}
.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 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ready li {
  counter-increment: r 1;
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 13px;
  align-items: baseline;
}
.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;
  }
}
.authwrap {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding-block: clamp(44px, 6vw, 88px);
}
.authcard {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r);
  padding: clamp(28px, 3.6vw, 44px);
  width: min(100%, 440px);
  box-shadow: rgba(20, 17, 16, 0.14) 0px 18px 44px;
}
.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 0px 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;
}
.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: rgb(255, 246, 222);
  border-radius: 99px;
  padding: 5px 11px;
  display: inline-block;
  margin-bottom: 14px;
}
.buildnote {
  background: rgb(255, 246, 222);
  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);
}
.carousel {
  position: relative;
}
.carousel .slides {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.carousel img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s;
  will-change: opacity;
}
.carousel img.on {
  opacity: 1;
}
.carousel .dots {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}
.carousel .dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 3px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.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: rgb(255, 255, 255) solid 2px;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .carousel img {
    transition: none;
  }
}
.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: rgb(255, 255, 255);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.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: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.recipe:hover .top img {
  transform: scale(1.05);
}
.recipe .top::after {
  content: '';
  position: absolute;
  inset: 0px;
  pointer-events: none;
  background: linear-gradient(
    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,
    transform 0.2s;
}
.recipe:hover .play {
  background: var(--ink);
  transform: scale(1.1);
}
.play svg {
  width: 22px;
  height: 22px;
  fill: rgb(255, 255, 255);
  margin-left: 3px;
}
.recipe .tag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
}
.recipe .cap {
  padding: 18px 20px 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--red);
}
.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;
}
.sec-head h1 {
  font-size: clamp(36px, 5.2vw, 64px);
  margin-block: 0.18em 0.42em;
}
.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 0px;
  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;
  }
}
.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,
    box-shadow 0.2s;
}
.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: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
}
.merch .im img.on {
  opacity: 1;
}
.merch .kind {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;
}
.merch .thumbs {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  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: 0px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.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: rgb(255, 255, 255) solid 2px;
  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;
}
.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: 0.15s;
}
.sizes button:hover {
  border-color: var(--ink);
}
.sizes button[aria-pressed='true'] {
  background: var(--ink);
  color: rgb(255, 255, 255);
  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);
}
.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,
    opacity 0.15s;
}
.express button:hover {
  transform: translateY(-1px);
}
.express .apple {
  background: var(--ink);
  color: rgb(255, 255, 255);
}
.express .gpay {
  background: rgb(255, 255, 255);
  color: var(--ink);
  border: 1.5px solid rgba(20, 17, 16, 0.2);
}
.codiv {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0px 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: 0px 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 0px;
  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;
  }
}
.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: rgb(255, 255, 255);
}
.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: rgb(255, 255, 255);
}
.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;
}
.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;
  }
}

/* From tio-pelons-child/style.css */
/*
Theme Name:   Tio Pelon's
Theme URI:    https://www.tiopelonsalsita.com
Description:  Divi child theme for Tio Pelon's Salsita. Carries the 2026 Product
              Guide design system onto the site, adds the azulejo tile banner,
              and replaces WooCommerce's variation dropdown with priced pack cards.
Author:       Tio Pelon's Salsita
Template:     Divi
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  tio-pelons
*/

/* ═══════════════════════════════════════════════════════════════════════════
   IMPORTANT — read before editing.

   This is NOT a copy of the prototype's brand.css. That file uses a global
   reset (*{margin:0}) and generic class names — .btn, .card, .price, .tabs,
   .nav, .stat — every one of which collides with Divi or WooCommerce. Pasting
   it into a live store breaks the layout and the shop.

   Everything here is either a custom property (--tp-*) or namespaced .tp-*,
   with only deliberate, targeted overrides of Divi/Woo selectors.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · brand tokens ──────────────────────────────────────────────────── */
:root {
  --tp-teal: #49b0a9;
  --tp-teal-deep: #33807a;
  --tp-teal-ink: #215b57;
  --tp-yellow: #ffc334;
  --tp-yellow-deep: #e7b82d;
  --tp-red: #dd1c2c;
  --tp-red-deep: #b01320;
  --tp-pink: #e04e71;
  --tp-orange: #f2873e;
  --tp-cream: #f7f2e8;
  --tp-ink: #141110;
  --tp-paper: #fff;

  --tp-display: 'Playfair Display', Georgia, serif;
  --tp-body: 'Spectral', Georgia, serif;
  --tp-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --tp-radius: 14px;
  --tp-rule: rgba(20, 17, 16, 0.14);
}

/* ── 2 · typography ────────────────────────────────────────────────────── */
body,
#et-boc .et-l p,
.et_pb_text {
  font-family: var(--tp-body);
  color: var(--tp-ink);
}
h1,
h2,
h3,
h4,
h5,
h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4 {
  font-family: var(--tp-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}
h5,
h6 {
  font-weight: 800;
}

/* uppercase utility labels — nav, buttons, eyebrows */
#top-menu li a,
.et_pb_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  font-family: var(--tp-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── 3 · buttons ───────────────────────────────────────────────────────── */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button {
  background: var(--tp-red);
  color: #fff;
  border-radius: 99px;
  padding: 15px 28px;
  border: 0;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover {
  background: var(--tp-red-deep);
  color: #fff;
  transform: translateY(-2px);
}
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button:disabled {
  background: rgba(20, 17, 16, 0.22);
  transform: none;
}

/* ── 4 · the azulejo banner ────────────────────────────────────────────────
   Glazed tile, not papel picado. Moorish tin-glaze -> Spanish azulejo
   (Talavera de la Reina) -> Puebla from 1531 -> San Antonio. Geometry is
   pure, so the tile never competes with the wordmark.                       */
.tp-azulejo {
  height: 54px;
  background: var(--tp-cream) url('assets/images/azulejo.svg') repeat-x left
    top/auto 54px;
  position: relative;
  z-index: 1;
  width: 100%;
}
.tp-azulejo--sm {
  height: 38px;
  background-size: auto 38px;
}
.tp-azulejo--flip {
  transform: scaleY(-1);
}
.tp-azulejo--plain {
  background-color: transparent;
}
@media (max-width: 767px) {
  .tp-azulejo {
    height: 40px;
    background-size: auto 40px;
  }
}

/* ── 5 · pack-size selector ────────────────────────────────────────────────
   Replaces the "Choose an option" dropdown on variable products. The real
   <select> stays in the DOM and keeps driving WooCommerce — it is only moved
   out of sight. See woocommerce/single-product/add-to-cart/variable.php.    */
.tp-packs {
  margin: 0 0 22px;
}
.tp-packs__label {
  font-family: var(--tp-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 9px;
}
.tp-packs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.tp-pack {
  position: relative;
  text-align: left;
  background: var(--tp-paper);
  border: 2px solid var(--tp-rule);
  border-radius: 12px;
  padding: 16px 15px 15px;
  cursor: pointer;
  font-family: var(--tp-sans);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.tp-pack:hover {
  border-color: rgba(20, 17, 16, 0.4);
}
.tp-pack[aria-pressed='true'] {
  border-color: var(--tp-ink);
  background: var(--tp-cream);
}
.tp-pack:focus-visible {
  outline: 2px solid var(--tp-red);
  outline-offset: 2px;
}
.tp-pack[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.tp-pack__qty {
  font-family: var(--tp-display);
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  display: block;
}
.tp-pack__lbl {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.55;
  margin-top: 4px;
  display: block;
}
.tp-pack__amt {
  font-weight: 700;
  font-size: 16px;
  margin-top: 11px;
  display: block;
  font-variant-numeric: tabular-nums;
}
.tp-pack__ea {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.5;
  display: block;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.tp-pack__tag {
  position: absolute;
  top: -9px;
  right: 10px;
  background: var(--tp-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 4px 9px;
}
.tp-pack__tag--best {
  background: var(--tp-teal);
}

/* the native select still runs the show — it is just not shown */
.tp-has-packs table.variations,
.tp-has-packs .reset_variations {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* per-unit line injected by pack-select.js */
.tp-perunit {
  font-family: var(--tp-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(20, 17, 16, 0.55);
  margin: 8px 0 18px;
}
.tp-perunit b {
  color: var(--tp-red);
  font-weight: 700;
}

/* ── 6 · product price typography ──────────────────────────────────────────
   Playfair's $ has a double stroke that overshoots the lining figures, so at
   display sizes it reads as an artifact. Set small and raised instead.      */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--tp-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  color: var(--tp-ink);
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.woocommerce div.product span.price .woocommerce-Price-currencySymbol {
  font-size: 0.6em;
  vertical-align: 0.24em;
  margin-right: 0.03em;
}

/* ── 7 · heat meter — [tp_heat level="3" label="Medium"] ───────────────── */
.tp-heat {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}
.tp-heat i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(20, 17, 16, 0.16);
  display: block;
}
.tp-heat i.is-on {
  background: var(--tp-red);
}
.tp-heat b {
  font-family: var(--tp-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.55;
  margin-left: 6px;
}

/* Source extracted CSS */

/* From assets/brand.css */
/* ══════════════════════════════════════════════════════════════════════════
   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('assets/images/chiles-ink.webp');
  background-size: 230px auto;
  background-repeat: repeat;
}
.chiles.light {
  background-image: url('assets/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 .cap {
  padding: 18px 20px 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--red);
}
.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;
  }
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
.container {
  max-width: none !important;
}

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.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;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
/* EC-MARQUEE-OVERFLOW-001: Local clip for a SOURCE marquee/ticker wrapper whose
   over-wide track would otherwise add horizontal page scroll. Applied at build
   time to the track's direct parent (see clipMarqueeOverflow). Works on every
   browser and never touches body/sticky-header behavior. */
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens.
   EC-NAV-483: and the width where small screens end is the source's to choose — see
   source-nav-breakpoint.js. 768px is the default, raised when the source's own CSS hides
   the primary list above it. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses.
   EC-NAV-502: a panel carried from the source keeps its own list classes and layout. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu):not([data-wpc-external-nav-panel] ul) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* EC-NAV-364: …but an auto margin on the menu <ul> IS the navbar's horizontal
   layout, not a stray UA default. Bootstrap's .navbar-nav.ml-auto (and the
   Tailwind / BS5 spellings) is what pushes the menu away from the brand over to
   the right edge; the ID-scoped "margin: 0 !important" resets above outrank the
   utility's own !important and collapse the whole bar to the left (Butterfly
   Cancer Care Foundation). Re-asserted here — last, and with a 3-element variant
   that ties the highest-specificity reset ("header nav.main-nav ul#…") so it wins
   on both counts. Additive: these selectors match ONLY a <ul> that literally
   carries the utility, so every other menu keeps today's layout byte-for-byte. */
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu):not([data-wpc-external-nav-panel] ul)
    > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    /* EC-NAV-295: Do NOT force the top-level item margin to zero here. This rule is
     ID-scoped (+ !important) and previously clobbered a source theme's inter-item spacing
     (e.g. .main-menu__list > li + li margin-left:37px), collapsing classic HTML
     navbars into a jammed-together row. Item spacing must come from the source theme
     (li margins) or from ulClasses on the ul (Tailwind gap-*). The gentle
     low-specificity .menu-item margin:0 default above still neutralises stray
     browser/WP margins for sites that ship none, and any source li spacing wins. */
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
}

/* EC-NAV-493: display:block !important used to ride along on the rule above, to
   beat an inline-flex utility class on the panel. On a wp_nav_menu() menu it
   decided nothing - the hide/show pair on .menu-item-has-children outranks it
   either way. On a captured hand-authored nav there is no .menu-item-has-children
   for those rules to match, so the blanket declaration was the only one left
   standing, and it beat the site's own unprefixed .submenu { display: none }:
   every CSS-hover dropdown shipped permanently open (Unitive Mind). The display
   is therefore scoped to the shapes WordPress itself generates, where visibility
   is already governed and nothing moves.

   The scope is .menu-item rather than the panel's own class because the class
   name says nothing about who wrote it - a hand-authored nav is free to call
   its panel sub-menu too, and scoping only .submenu would leave that site with
   the same permanently-open dropdown. Both walkers stamp .menu-item on every
   item they emit, and a captured nav carries it nowhere.

   Descendant, not child: EC-NAV-428 wraps the panel in a positioning div when
   the source revealed it through one, which puts a generation between the item
   and the panel. A child combinator reads as correctly scoped and would
   silently stop reaching that shape.
   NOTE: no backticks in this comment - it lives inside a JS template literal. */
.menu-item .submenu,
.menu-item .sub-menu {
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
/* EC-GALLERY-002d: [data-wpc-live-dialog] opts out — a dialog WPConvert injects on purpose
   (e.g. the gallery lightbox) is not snapshot debris, and these !important rules would
   otherwise beat even its inline styles and leave it permanently invisible. */
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
/* EC-NAV-429: the class guards above only see a utility class ON the element.
   A header the source lifts out of flow from an ancestor rule — Scorpion uses
   ".overlap #HeaderZone { position: absolute }" with no class on the header at
   all — passed every guard and was forced back into flow, dropping a
   deliberately transparent header onto the page background where its light link
   text became invisible. Such ids are detected from the source CSS. */
/* EC-NAV-526: a header toggle's restored panel ([data-wpc-toggle-panel]) is a
   dropdown the source positions itself (Sandton: .site .site-nav{position:absolute});
   forced into flow, the open panel pushed the whole page down. */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ):not([data-wpc-toggle-panel]),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav):not([data-wpc-toggle-panel]) {
  position: relative !important;
  z-index: 1000 !important;
}

/* EC-NAV-361: the rule above uses BARE TAG selectors, but <header> and <nav> are
   also valid SECTIONING content — a hero banner, an article header, a breadcrumb
   trail. Those live inside <main class="site-main">, and inflating them to
   z-index:1000 puts PAGE CONTENT on a layer above almost everything, where it
   beats any overlay the source site authored (Jegson Publicity: the enquiry modal
   is z-index:100, so the 78vh hero <header> painted straight over the open popup).
   Site chrome is always emitted OUTSIDE <main>, so scoping the repair to
   descendants of the content wrapper can never reach the real navbar.
   Only z-index is reset — position is left alone so the EC-NAV-190 absolute-overlay
   and EC-NAV-352 CSS-authored-fixed-nav behaviours are untouched. "auto" is what an
   un-styled hero has, and it is the value that restores the source ordering: the
   base rule already beats a Tailwind z-* utility (it is !important), so exempting
   those would merely leave them inflated to 1000 — the very bug being fixed. */
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
/* EC-NAV-296: Exclude the classic-theme sticky-header class family
   (.sticky-header / .sticky-header--normal / .sticky-header--cloned). Those are SEMANTIC
   class names from HTML themes (e.g. Visanet / Smart Travel International) that ship their
   OWN sticky-on-scroll mechanism: JS clones .main-header into a .sticky-header--cloned
   element whose source CSS keeps it position:fixed + visibility:hidden + translateY(-100%)
   (out of flow, hidden) until .active is added on scroll. The broad [class*=sticky]
   substring match also caught that clone and forced position:sticky !important, which —
   because sticky stays IN FLOW — made the invisible clone occupy ~114px of vertical space
   (white gap between navbar and hero, issue #1) and surface as a duplicate header band
   (issue #2). The exclusion is substring-scoped to sticky-header, so Tailwind's sticky
   utility (nav.sticky / header.sticky) and responsive variants like lg:sticky are
   UNAFFECTED — they never contain the sticky-header token. */
/* EC-NAV-363: same source-neutralisation exemption as the fixed block below. */
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}

/* EC-NAV-322: Inner <nav> must not be sticky when the header wrapper is already
   fixed/sticky — double-positioning clips menu text in pre-scroll (Kai.dev:
   fixed header + converter-injected nav.sticky.top-0). */
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
/* EC-NAV-296: same sticky-header clone exclusion (a .sticky-header--cloned does not carry
   a fixed token, but keep the guard symmetric in case a theme names a clone with both). */
/* EC-NAV-363: the substring selectors additionally exempt any framework position
   class the SOURCE cascade already neutralises (Bootstrap .fixed-top redeclared
   in-flow by a later .navbar{position:relative}). The exact-token `nav.fixed`
   (Tailwind) selectors are never guarded — they have no such override. */
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it.
 *
 * EC-NAV-442: suppressed when the site's own stylesheet holds the bar OUT of
 * flow — the margin is then the author's clearance, not a redundant gap. */

.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0;
}

/* EC-NAV-086: Fixed nav + full-viewport hero (Tailwind min-h-screen) — React/Vite SPAs
 * stack the hero at document top with fixed nav overlaid; body/main background shows through
 * any empty band under the bar. Pull the first min-h-screen hero up by the header bar height
 * (--wpconvert-header-bar-height from header.php EC-NAV-100; fallback 4rem) so background layers
 * align with the original SPA.
 * Only on front-page template (body.front-page); skip sections with explicit pt-* / mt-* utilities.
 * :first-of-type required: newline/whitespace between #primary and hero <section> breaks :first-child. */
body.front-page
  .site-main
  #primary
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']) {
  /* Logged out: --wp-admin--admin-bar--height is unset → 0px. Logged in: WP sets 32px / 46px (782px). */
  margin-top: calc(
    -1 * var(--wpconvert-header-bar-height, 4rem) -
      var(--wp-admin--admin-bar--height, 0px)
  );
}

/* EC-NAV-089: Admin bar is fixed at top:0; in-flow content gets html { margin-top } but fixed nav does not,
 * so the site navbar sits under #wpadminbar. Offset primary fixed nav; exclude full-screen mobile drawer.
 * EC-NAV-323: Also offset header.fixed — React/Vite SPAs (Kai.dev) use <header class="fixed top-0">,
 * not bare nav.fixed, so the round-1 EC-NAV-089 selectors never matched. */
body.admin-bar nav.fixed.top-0:not(#wpconvert-mobile-nav),
body.admin-bar nav.fixed[class*='top-0']:not(#wpconvert-mobile-nav),
body.admin-bar header.fixed.top-0,
body.admin-bar header.fixed[class*='top-0'] {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* EC-NAV-087: Merged / blog / legacy CSS often sets body { padding-top: 5rem+ } as “clearance”
 * for fixed headers. With a fixed overlay nav, that padding does NOT move the bar — it only
 * pushes <main> down while body background shows through → white/cream band (~nav height) under
 * the bar. Stay Boost ships this in bundled style.css; EC-NAV-086 margin alone cannot cancel it. */
body.front-page {
  padding-top: 0 !important;
}

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* EC-CSS-009: :where() = 0 specificity, same reasoning as EC-BTN-104 above. A
   bare "h1, h2, h3, h4, h5, h6" list ties a site's own "h1, h2, h3 { font-weight:
   400 }" on specificity (0,0,1) and, being emitted after the merged site CSS,
   wins — so a display face meant to render at 400 shipped bold everywhere. These
   declarations still beat the UA stylesheet, because author origin outranks
   user-agent origin regardless of specificity. */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
/* EC-CSS-LIST-RESET-001: no list reset — the site's CSS owns its lists (a framework
   preflight already resets them; a hand-written site relies on the browser's
   bullets and indent, which any author rule here would strip). */

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* EC-STATIC-013 / EC-NAV-352: Site CSS sets position:sticky on nav — override WPConvert base relative reset.
   Both selectors are scoped to <nav> and carry :not([class*='absolute']); the
   nav[role='navigation'] variant (1,4,1) beats the base [role='navigation'] rule
   (1,4,0) that the generated primary-nav markup otherwise matches. Source-order wins.
   EC-NAV-482: the source named its bar `.nav`, which may be any tag, so a
   <nav> inside that element is a menu wrapper and stays where the cascade put it. */
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ):not(.nav *),
nav[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav):not(.nav *) {
  position: sticky !important;
}

/* EC-NAV-478: the source positions this header with `.nav { position: sticky }`.
   The base reset only skips headers that advertise positioning as a class token, and the
   EC-NAV-352 / EC-NAV-162b overrides cover <nav> and header/.site-header by name — not this
   element. Without this rule the bar drops into flow, the hero is pushed below it, and a
   transparent bar's light ink lands on the page background. */
header.nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  position: sticky !important;
}

/* EC-NAV-433b: the EC-NAV-190 in-flow repair uses BARE tag selectors, and its
   :not([class*='…']) guards only see a utility class ON the element. A content
   header the SOURCE lifts out of flow from a stylesheet rule — Sabrina's
   ".set-product-head { position: absolute; top: 50% }" caption inside an
   overflow:hidden product frame — slipped past all three guards, was forced
   back into flow and clipped out of its frame. Restore the authored value for
   sectioning headers inside <main>, where the site header never lives. */
main.site-main
  header.nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  nav.nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  [role='banner'].nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  [role='navigation'].nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  position: sticky !important;
}

/* EC-PAGE-WIDTH-001: vertical rhythm for the fallback page template. Width,
   horizontal padding and breakpoints come from the source container .wrap
   (max-width: 1240px), which this page shares with every route template. */
.wpconvert-page-body {
  padding-top: clamp(2rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 6vw, 4.5rem);
}


/* TIO PELON'S — RECIPES PAGE BLACK CARDS */

/* Target recipe cards on the Recipes page */
body.page-slug-recipes .recipe-card,
body.page-slug-recipes .recipe-card-body,
body.page-id-recipes .recipe-card,
body.page-id-recipes .recipe-card-body,
body.page .recipes-grid .recipe-card,
body.page .recipes-grid .recipe-card-body {
    background-color: #000 !important;
    color: #fff !important;
}

/* Preserve rounded lower corners */
body.page .recipes-grid .recipe-card-body {
    border-radius: 0 0 16px 16px;
}


/* ==========================================
   TIO PELON'S — BLACK RECIPE CARD BOTTOMS
   ========================================== */

/* Change all four recipe caption backgrounds */
.recipes .recipe .cap {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Make recipe text readable on black */
.recipes .recipe .cap b,
.recipes .recipe .cap p,
.recipes .recipe .cap .meta {
    color: #ffffff !important;
}

/* Preserve the colored top borders */
.recipes .recipe .cap {
    border-top-width: 5px !important;
    border-top-style: solid !important;
}