/* ============================================================
   Kit Studio MT — style.css
   Palette: Pitch #0B2B1D · Turf #146C43 · Gold #EDA414 · Chalk #F7F6F1
   Type: Archivo Black (display, italic, uppercase) · Manrope (body)
   Square corners everywhere. No gradients, no glows, no pure black.
   ============================================================ */

:root {
  --pitch: #0B2B1D;
  --turf: #146C43;
  --gold: #EDA414;
  --gold-hover: #f5b32d;
  --gold-text: #3D2A00;
  --chalk: #F7F6F1;

  --page-bg: #F7F6F1;
  --card-bg: #ffffff;
  --card-border: #e2e0d6;
  --ink: #1B1F1D;
  --heading: #0B2B1D;
  --stat: #146C43;
  --btn: #0B2B1D;
  --btn-invert-fg: #F7F6F1;
}

[data-theme="dark"] {
  --page-bg: #161A17;
  --card-bg: #212722;
  --card-border: rgba(247, 246, 241, 0.16);
  --ink: #F7F6F1;
  --heading: #F7F6F1;
  --stat: #7FCB9F;
  --btn: #F7F6F1;
  --btn-invert-fg: #0B2B1D;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--page-bg);
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  transition: background 0.3s;
}

a { color: var(--turf); text-decoration: none; }
a:hover { color: var(--gold); }

img { max-width: 100%; display: block; }

button {
  font-family: 'Manrope', sans-serif;
  background: none;
  border: none;
  cursor: pointer;
}

.display {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-weight: 400;
}

.gold { color: #EDA414; }

/* ---------- Buttons ---------- */

.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: var(--gold-text);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 11px 22px;
  transition: background 0.15s;
}
.btn-gold:hover { background: var(--gold-hover); color: var(--gold-text); }

.btn-gold--lg { font-size: 16px; padding: 18px 36px; }
.btn-gold--cta { font-size: 15px; padding: 16px 32px; }

.btn-outline {
  display: inline-block;
  border: 2px solid var(--btn);
  color: var(--btn);
  background: transparent;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 13px 26px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-outline:hover { background: var(--btn); color: var(--btn-invert-fg); }

.btn-outline--chalk { border-color: #F7F6F1; color: #F7F6F1; }
.btn-outline--chalk:hover { background: #F7F6F1; color: #0B2B1D; }

/* ---------- Logo lockup ---------- */

.logo-lockup { display: flex; align-items: center; gap: 12px; }
.logo-text { display: flex; flex-direction: column; }
.logo-name {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1;
  font-weight: 400;
}
.logo-malta {
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 4px;
  margin-top: 3px;
}

.logo--reversed .lm-jersey { fill: #F7F6F1; }
.logo--reversed .lm-line, .logo--reversed .lm-circle { stroke: #0B2B1D; }
.logo--reversed .logo-name { color: #F7F6F1; }
.logo--reversed .logo-malta { color: #EDA414; }

.logo--full .lm-jersey { fill: #0B2B1D; }
.logo--full .lm-line, .logo--full .lm-circle { stroke: #F7F6F1; }
.logo--full .logo-name { color: #1B1F1D; }
.logo--full .logo-malta { color: #EDA414; }

[data-theme="dark"] .logo--full .lm-jersey { fill: #F7F6F1; }
[data-theme="dark"] .logo--full .lm-line,
[data-theme="dark"] .logo--full .lm-circle { stroke: #0B2B1D; }
[data-theme="dark"] .logo--full .logo-name { color: #F7F6F1; }

.lm-dot { fill: #EDA414; }

/* ---------- Nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 56px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav--dark { background: #0B2B1D; }

.nav--light {
  background: var(--page-bg);
  border-bottom: 1px solid var(--card-border);
  transition: background 0.3s;
}
[data-theme="dark"] .nav--light { background: #0B2B1D; border-bottom: none; }

.nav-links { display: flex; align-items: center; gap: 36px; }

.nav-link { font-weight: 600; font-size: 14px; }
.nav--dark .nav-link { color: #F7F6F1; }
.nav--dark .nav-link:hover { color: #EDA414; }
.nav--light .nav-link { color: var(--ink); }
.nav--light .nav-link:hover { color: #146C43; }
[data-theme="dark"] .nav--light .nav-link { color: #F7F6F1; }
[data-theme="dark"] .nav--light .nav-link:hover { color: #EDA414; }

.nav-link--active {
  font-weight: 700;
  padding-bottom: 2px;
}
.nav--dark .nav-link--active {
  color: #EDA414;
  border-bottom: 2px solid #EDA414;
}
.nav--light .nav-link--active {
  color: var(--stat);
  border-bottom: 2px solid var(--stat);
}

.nav-actions { display: flex; align-items: center; gap: 14px; }

.theme-toggle {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  border: 2px solid rgba(247, 246, 241, 0.4);
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.nav--dark .theme-toggle { color: #F7F6F1; }
.nav--light .theme-toggle { color: var(--btn); border-color: var(--card-border); }
[data-theme="dark"] .nav--light .theme-toggle { color: #F7F6F1; border-color: rgba(247, 246, 241, 0.4); }
.theme-toggle:hover { border-color: #EDA414; color: #EDA414; }

.bag-btn {
  position: relative;
  font-weight: 800;
  font-size: 13px;
  border: 2px solid rgba(247, 246, 241, 0.4);
  padding: 9px 14px;
  cursor: pointer;
  color: #F7F6F1;
}
.nav--light .bag-btn { color: var(--btn); border-color: var(--card-border); }
[data-theme="dark"] .nav--light .bag-btn { color: #F7F6F1; border-color: rgba(247, 246, 241, 0.4); }

.bag-count {
  position: absolute;
  top: -9px;
  right: -9px;
  background: #EDA414;
  color: #3D2A00;
  font-size: 11px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile nav actions (bag + burger) */
.nav-mobile-actions {
  display: none;
  align-items: center;
  gap: 12px;
}

.nav-burger {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
  padding: 6px 2px;
}
.nav-burger span { width: 22px; height: 2.5px; background: #F7F6F1; display: block; }
.nav-burger span:last-child { width: 14px; background: #EDA414; }
.nav--light .nav-burger span { background: var(--btn); }
.nav--light .nav-burger span:last-child { background: #EDA414; }
[data-theme="dark"] .nav--light .nav-burger span { background: #F7F6F1; }
[data-theme="dark"] .nav--light .nav-burger span:last-child { background: #EDA414; }

.mobile-menu {
  display: none;
  background: #0B2B1D;
  border-top: 1px solid rgba(247, 246, 241, 0.15);
  padding: 20px;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 64px;
  z-index: 19;
}
.mobile-menu .theme-toggle {
  border: none;
  border-bottom: 1px solid rgba(247, 246, 241, 0.1);
  letter-spacing: 1px;
  color: #F7F6F1;
}
body.menu-open .mobile-menu { display: flex; }
.mobile-menu a, .mobile-menu button {
  color: #F7F6F1;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 4px;
  text-align: left;
  border-bottom: 1px solid rgba(247, 246, 241, 0.1);
}
.mobile-menu a:hover { color: #EDA414; }
.mobile-menu .btn-gold {
  color: #3D2A00;
  text-align: center;
  border-bottom: none;
  margin-top: 12px;
  padding: 14px;
}
.mobile-menu .btn-gold:hover { color: #3D2A00; }

/* ---------- Hero ---------- */

.hero {
  background: #0B2B1D;
  position: relative;
  overflow: hidden;
  padding: 110px 56px 120px;
}

.hero-mark, .hero-dot {
  position: absolute;
  right: -260px;
  top: 50%;
  margin-top: -410px;
  width: 820px;
  height: 820px;
}
.hero-mark { opacity: 0.12; }
.hero-dot { pointer-events: none; }

.hero-inner {
  position: relative;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.kicker {
  color: #EDA414;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3.5px;
}

.hero-title {
  font-size: 124px;
  letter-spacing: -1px;
  line-height: 0.92;
  color: #F7F6F1;
}
.hero-title .gold { color: #EDA414; }

.hero-sub {
  color: #F7F6F1;
  font-size: 19px;
  line-height: 1.6;
  max-width: 520px;
}

/* ---------- Sections ---------- */

.section { padding: 88px 56px; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.section-kicker {
  color: var(--stat);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.section-title {
  font-size: 52px;
  letter-spacing: -1px;
  color: var(--heading);
  line-height: 1;
}

.see-all {
  color: var(--stat);
  font-weight: 700;
  font-size: 14px;
  border-bottom: 2px solid var(--stat);
  padding-bottom: 3px;
}
.see-all:hover { color: #EDA414; border-bottom-color: #EDA414; }

/* ---------- Product grid & cards ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.product-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: border-color 0.15s;
}
.product-card:hover { border-color: var(--stat); }

.card-media {
  height: 300px;
  position: relative;
  overflow: hidden;
  display: block;
}

.card-title a { color: inherit; }
.card-title a:hover { color: var(--stat); }
.product-card--mystery .card-title a:hover { color: #EDA414; }

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-slot {
  width: 100%;
  height: 100%;
  background: var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--stat);
  font-weight: 600;
  font-size: 13px;
}

.card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #0B2B1D;
  color: #F7F6F1;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  white-space: nowrap;
  pointer-events: none;
}

.price-plate {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #EDA414;
  color: #3D2A00;
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-size: 21px;
  letter-spacing: -1px;
  padding: 7px 15px;
  pointer-events: none;
  font-weight: 400;
}

.card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-title { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.4; }

.card-stats {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--stat);
}

.btn-add {
  display: inline-block;
  align-self: flex-start;
  border: 2px solid var(--btn);
  color: var(--btn);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 8px 16px;
  transition: background 0.15s, color 0.15s;
}
.btn-add:hover { background: var(--btn); color: var(--btn-invert-fg); }
.add-short { display: none; }

.card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.cash-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--stat);
}
.cash-link:hover { color: var(--gold); }
.product-card--mystery .cash-link { color: rgba(247, 246, 241, 0.7); }
.product-card--mystery .cash-link:hover { color: var(--gold); }

/* Mystery card (always dark, in both themes) */
.product-card--mystery {
  background: #0B2B1D;
  border: 1px solid #0B2B1D;
  display: flex;
  flex-direction: column;
}
.product-card--mystery:hover { border-color: #EDA414; }
.product-card--mystery .card-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mystery-mark {
  position: absolute;
  opacity: 0.1;
}
.mystery-q {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-size: 110px;
  color: #EDA414;
  position: relative;
  font-weight: 400;
}
.product-card--mystery .card-title { color: #F7F6F1; }
.product-card--mystery .card-stats { color: #EDA414; }
.product-card--mystery .btn-add { border-color: #EDA414; color: #EDA414; }
.product-card--mystery .btn-add:hover { background: #EDA414; color: #3D2A00; }

/* ---------- Delivery strip (Turf, home) ---------- */

.delivery-strip { background: #146C43; padding: 80px 56px; }

.delivery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

.delivery-title {
  font-size: 40px;
  letter-spacing: -1px;
  color: #F7F6F1;
  line-height: 1.02;
}
.delivery-title .gold { color: #EDA414; }

.step { color: #F7F6F1; }
.step-num {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-size: 28px;
  color: #EDA414;
  margin-bottom: 10px;
  font-weight: 400;
}
.step-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.step-body { font-size: 14px; line-height: 1.6; opacity: 0.9; }

/* ---------- Community teaser ---------- */

.community {
  padding: 88px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.community-media { height: 460px; }

.community-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.community-title {
  font-size: 46px;
  letter-spacing: -1px;
  color: var(--heading);
  line-height: 1.02;
}

.community-copy { font-size: 16px; line-height: 1.7; max-width: 480px; color: var(--ink); }

/* ---------- Footer ---------- */

.footer { background: #0B2B1D; padding: 64px 56px 40px; }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-brand { display: flex; flex-direction: column; gap: 14px; }

.footer-slogan {
  font-size: 26px;
  letter-spacing: -1px;
  color: #F7F6F1;
}
.footer-slogan .gold { color: #EDA414; }

.footer-cols { display: flex; gap: 72px; }

.footer-col { display: flex; flex-direction: column; gap: 10px; }

.footer-col-title {
  color: #EDA414;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
}

.footer-col a { color: #F7F6F1; font-size: 14px; font-weight: 600; }
.footer-col a:hover { color: #EDA414; }

.footer-bottom {
  border-top: 1px solid rgba(247, 246, 241, 0.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  color: rgba(247, 246, 241, 0.55);
  font-size: 12.5px;
  font-weight: 600;
  gap: 12px;
  flex-wrap: wrap;
}

/* Condensed footer */
.footer--condensed {
  background: #0B2B1D;
  padding: 36px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-mini {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-size: 15px;
  text-transform: uppercase;
  color: #F7F6F1;
  font-weight: 400;
}
.footer-mini .gold { color: #EDA414; }
.footer-note { color: rgba(247, 246, 241, 0.55); font-size: 12.5px; font-weight: 600; }

.credit-link { color: rgba(247, 246, 241, 0.75); font-weight: 700; }
.credit-link:hover { color: #EDA414; }

/* ---------- Shop page ---------- */

.shop-head {
  background: #0B2B1D;
  padding: 64px 56px 0;
  position: relative;
  overflow: hidden;
}

.shop-head-mark {
  position: absolute;
  right: -160px;
  top: -140px;
  opacity: 0.1;
}

.shop-head-inner { position: relative; }

.page-title {
  font-size: 72px;
  letter-spacing: -1px;
  color: #F7F6F1;
  line-height: 1;
}

.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-bottom: 24px;
  align-items: center;
}

.shop-search {
  background: transparent;
  border: 1.5px solid rgba(247, 246, 241, 0.4);
  color: #F7F6F1;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 9px 14px;
  width: 240px;
  max-width: 100%;
  border-radius: 0;
  margin-left: auto;
}
.shop-search::placeholder { color: rgba(247, 246, 241, 0.55); }
.shop-search:focus { outline: none; border-color: #EDA414; }

.filter-chip {
  background: transparent;
  color: #F7F6F1;
  border: 1.5px solid rgba(247, 246, 241, 0.4);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  padding: 9px 18px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-chip:hover { border-color: #EDA414; color: #EDA414; }
.filter-chip--active,
.filter-chip--active:hover {
  background: #EDA414;
  color: #3D2A00;
  border-color: #EDA414;
}

.shop-grid-wrap { padding: 56px; }

.kit-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--stat);
  letter-spacing: 2px;
  margin-bottom: 24px;
}

.shop-grid-wrap .card-media { height: 280px; }
.shop-grid-wrap .card-body { padding: 16px; gap: 9px; }
.shop-grid-wrap .card-title { font-size: 14.5px; }
.shop-grid-wrap .card-stats { font-size: 11px; }
.shop-grid-wrap .price-plate { font-size: 20px; padding: 6px 14px; }
.shop-grid-wrap .btn-add { font-size: 11.5px; padding: 7px 14px; }
.shop-grid-wrap .mystery-q { font-size: 92px; }

/* ---------- About page ---------- */

.about-head {
  padding: 88px 56px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.about-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.about-title {
  font-size: 64px;
  letter-spacing: -1px;
  color: var(--heading);
  line-height: 0.98;
}

.about-copy { font-size: 17px; line-height: 1.7; max-width: 520px; color: var(--ink); }

.about-media { height: 520px; }

/* Delivery band (Pitch, about) */
.delivery-band { background: #0B2B1D; padding: 80px 56px; }

.delivery-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 56px;
  align-items: start;
}

.delivery-band-title {
  font-size: 44px;
  letter-spacing: -1px;
  color: #F7F6F1;
  line-height: 1.02;
}
.delivery-band-title .gold { color: #EDA414; }

.delivery-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

.delivery-card {
  border: 1.5px solid rgba(247, 246, 241, 0.3);
  padding: 24px;
  color: #F7F6F1;
}
.delivery-card-title { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.delivery-card-body { font-size: 14px; line-height: 1.6; opacity: 0.9; }

/* Contact CTA */
.contact-cta {
  padding: 88px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.contact-title {
  font-size: 48px;
  letter-spacing: -1px;
  color: var(--heading);
  line-height: 1;
}

.contact-copy { font-size: 16px; line-height: 1.7; max-width: 520px; color: var(--ink); }

.contact-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- Bag drawer ---------- */

.bag-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 43, 29, 0.55);
  z-index: 55;
  display: none;
}
body.bag-open .bag-backdrop { display: block; }

.bag-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100%;
  background: #0B2B1D;
  color: #F7F6F1;
  z-index: 60;
  display: none;
  flex-direction: column;
  padding: 24px;
  box-shadow: -8px 0 30px rgba(11, 43, 29, 0.35);
}
body.bag-open .bag-panel { display: flex; }

.bag-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(247, 246, 241, 0.15);
}

.bag-title {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -0.5px;
}

.bag-close {
  color: #F7F6F1;
  font-size: 26px;
  line-height: 1;
  padding: 2px 8px;
}
.bag-close:hover { color: #EDA414; }

.bag-items {
  flex: 1;
  overflow-y: auto;
  padding: 14px 0;
}

.bag-empty { font-size: 14px; color: rgba(247, 246, 241, 0.7); }

.bag-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(247, 246, 241, 0.1);
}

.bag-item-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bag-item-meta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(247, 246, 241, 0.6);
}

.bag-item-price {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-size: 15px;
  color: #EDA414;
  white-space: nowrap;
}

.bag-item-remove {
  color: rgba(247, 246, 241, 0.55);
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
}
.bag-item-remove:hover { color: #EDA414; }

.bag-foot {
  border-top: 1px solid rgba(247, 246, 241, 0.15);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bag-delivery-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.bag-delivery {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(247, 246, 241, 0.85);
}
.bag-delivery--fee { color: #EDA414; }

.bag-ship-hint {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #7FCB9F;
  margin-top: -6px;
}

.bag-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.bag-total-label {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
}

.bag-total {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-size: 26px;
  letter-spacing: -1px;
  color: #EDA414;
}

.bag-send {
  text-align: center;
  font-size: 15px;
  padding: 16px;
  width: 100%;
}

.bag-error {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #F09595;
}

.bag-note {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(247, 246, 241, 0.7);
}

/* ---------- Product page ---------- */

.pp {
  padding: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.pp-loading {
  color: var(--stat);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
}

.pp-media {
  height: 620px;
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.pp-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pp-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1.5px solid var(--card-border);
  background: var(--card-bg);
  cursor: pointer;
  opacity: 0.75;
  overflow: hidden;
  transition: border-color 0.15s, opacity 0.15s;
}
.pp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pp-thumb:hover { opacity: 1; }
.pp-thumb--active {
  border-color: #EDA414;
  opacity: 1;
}

.pp-media--mystery {
  background: #0B2B1D;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.pp-media--mystery .mystery-q { font-size: 140px; }

.pp-panel {
  background: #0B2B1D;
  color: #F7F6F1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pp-kicker {
  color: #EDA414;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
}

.pp-title {
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 1.02;
  color: #F7F6F1;
}

.pp-stats {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #7FCB9F;
}

.pp-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(247, 246, 241, 0.85);
}

.pp-back {
  color: rgba(247, 246, 241, 0.7);
  font-weight: 700;
  font-size: 13px;
  align-self: flex-start;
}
.pp-back:hover { color: #EDA414; }

.pp-missing {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 0;
}
.pp-missing .pp-title { color: var(--heading); font-size: 44px; }

.opt-select {
  background: rgba(247, 246, 241, 0.07);
  border: 1.5px solid rgba(247, 246, 241, 0.4);
  border-radius: 0;
  color: #F7F6F1;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 12px;
  width: 100%;
  cursor: pointer;
}
.opt-select:focus { outline: none; border-color: #EDA414; }
.opt-select--error { border-color: #F09595; }
.opt-select option { background: #0B2B1D; color: #F7F6F1; }

.opt-label {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(247, 246, 241, 0.6);
}

.opt-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(247, 246, 241, 0.9);
  cursor: pointer;
}
.opt-check input {
  accent-color: #EDA414;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.opt-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 8px;
}

.opt-field {
  background: rgba(247, 246, 241, 0.07);
  border: 1.5px solid rgba(247, 246, 241, 0.3);
  border-radius: 0;
  color: #F7F6F1;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 11px 12px;
  width: 100%;
  text-transform: uppercase;
}
.opt-field::placeholder { color: rgba(247, 246, 241, 0.5); }
.opt-field:focus { outline: none; border-color: #EDA414; }

.opt-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(247, 246, 241, 0.15);
  padding-top: 12px;
}

.opt-total {
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-size: 24px;
  letter-spacing: -1px;
  color: #EDA414;
}

.opt-add {
  text-align: center;
  font-size: 15px;
  padding: 15px;
  width: 100%;
}

@media (max-width: 1024px) {
  .pp { padding: 32px; gap: 28px; }
  .pp-media { height: 480px; position: static; }
}

@media (max-width: 760px) {
  .pp { padding: 20px; grid-template-columns: minmax(0, 1fr); }
  .pp-media { height: 380px; }
  .pp-panel { padding: 22px 20px; }
  .pp-title { font-size: 30px; }
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #0B2B1D;
  color: #F7F6F1;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 24px;
  z-index: 50;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 8px 24px rgba(11, 43, 29, 0.35);
}
.toast-label {
  color: #EDA414;
  font-family: 'Archivo Black', sans-serif;
  font-style: italic;
  font-weight: 400;
}

/* ============================================================
   Tablet — ≤1024px
   ============================================================ */

@media (max-width: 1024px) {
  .nav { padding: 16px 32px; }
  .nav-links { gap: 22px; }
  .nav-link--hide-tablet { display: none; }

  .hero { padding: 72px 32px 80px; }
  .hero-mark, .hero-dot {
    width: 560px;
    height: 560px;
    right: -190px;
    margin-top: -280px;
  }
  .hero-title { font-size: 84px; }
  .hero-sub { font-size: 16px; max-width: 440px; }
  .kicker { font-size: 13px; letter-spacing: 3px; }

  .section { padding: 56px 32px; }
  .section-title { font-size: 38px; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .card-media { height: 260px; }

  .delivery-strip { padding: 56px 32px; }
  .delivery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .delivery-title { grid-column: 1 / -1; font-size: 32px; margin-bottom: 4px; }

  .community { padding: 56px 32px; grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .community-media { height: 380px; }
  .community-title { font-size: 38px; }

  .footer { padding: 48px 32px 32px; }
  .footer--condensed { padding: 32px; }

  .shop-head { padding: 48px 32px 0; }
  .page-title { font-size: 52px; }
  .shop-grid-wrap { padding: 32px; }

  .about-head { padding: 56px 32px; grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .about-title { font-size: 48px; }
  .about-media { height: 420px; }

  .delivery-band { padding: 56px 32px; }
  .delivery-band-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .delivery-band-title { font-size: 36px; }

  .contact-cta { padding: 56px 32px; }
  .contact-title { font-size: 38px; }
}

/* ============================================================
   Mobile — ≤760px
   ============================================================ */

@media (max-width: 760px) {
  .nav { padding: 14px 20px; }
  .nav-links { display: none; }
  .nav-mobile-actions { display: flex; }

  .hero { padding: 56px 20px 64px; }
  .hero-mark, .hero-dot {
    width: 440px;
    height: 440px;
    right: -235px;
    margin-top: -220px;
  }
  .hero-title { font-size: 56px; line-height: 0.94; }
  .hero-sub { font-size: 15px; }
  .kicker { font-size: 11px; letter-spacing: 2.5px; }
  .hero .btn-gold--lg {
    align-self: stretch;
    text-align: center;
    font-size: 14px;
    padding: 16px 28px;
  }

  .section { padding: 44px 20px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .section-title { font-size: 30px; }

  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .card-media { height: 280px; }
  .product-card--mystery .card-media { height: 200px; }
  .mystery-q { font-size: 72px; }

  .card-body {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .card-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .btn-add { align-self: center; padding: 11px 14px; font-size: 11px; white-space: nowrap; }
  .add-full { display: none; }
  .add-short { display: inline; }
  .card-actions { align-items: center; gap: 5px; flex-shrink: 0; }
  .cash-link { font-size: 11px; white-space: nowrap; }

  .delivery-strip { padding: 44px 20px; }
  .delivery-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .delivery-title { font-size: 28px; line-height: 1.05; margin-bottom: 6px; }
  .step { display: flex; gap: 16px; }
  .step-num { font-size: 22px; min-width: 34px; margin-bottom: 0; }
  .step-title { font-size: 14.5px; margin-bottom: 4px; }
  .step-body { font-size: 13px; }

  .community { padding: 44px 20px; }
  .community-media { height: 300px; }
  .community-title { font-size: 30px; }

  .footer { padding: 40px 20px 28px; }
  .footer-top { flex-direction: column; gap: 32px; margin-bottom: 32px; }
  .footer-cols { gap: 48px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }

  .footer--condensed {
    padding: 28px 20px;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    justify-content: center;
  }
  .footer-note { font-size: 11px; }

  .shop-head { padding: 40px 20px 0; }
  .page-title { font-size: 40px; }
  .filter-row { margin-top: 24px; padding-bottom: 20px; }
  .filter-chip { font-size: 11.5px; padding: 8px 14px; }
  .shop-search { width: 100%; margin-left: 0; margin-top: 4px; }
  .shop-grid-wrap { padding: 24px 20px 44px; }

  .about-head { padding: 44px 20px; }
  .about-title { font-size: 36px; }
  .about-media { height: 340px; }
  .about-copy { font-size: 16px; }

  .delivery-band { padding: 44px 20px; }
  .delivery-band-title { font-size: 30px; }
  .delivery-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .contact-cta { padding: 44px 20px; }
  .contact-title { font-size: 30px; }
  .contact-actions { flex-direction: column; align-self: stretch; }
  .contact-actions .btn-gold--cta,
  .contact-actions .btn-outline { text-align: center; }

  .toast { width: calc(100% - 40px); justify-content: center; }
}