/* ============================================================
   ENHANCED.CSS — Nova Halal Meat
   Additional sections layered on top of styles.css:
   • Postcode delivery checker
   • Live order ticker
   • Trust strip (as featured in)
   • Our Farms cards
   • Interactive Cut Diagram
   • How To Cook It guides
   • Provenance / Halal Transparency
   ============================================================ */

/* ===========================================
   POSTCODE CHECKER
   =========================================== */
.postcode-section {
  padding: 100px 40px;
  background:
    /* Dark gradient overlay to keep text readable */
    linear-gradient(90deg, rgba(10, 6, 6, 0.96) 0%, rgba(10, 6, 6, 0.82) 35%, rgba(10, 6, 6, 0.55) 70%, rgba(10, 6, 6, 0.75) 100%),
    /* The delivery photo */
    url('images/delivery-bg.png') center / cover no-repeat;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
/* Top fade so the section blends with whatever sits above it */
.postcode-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* Bottom fade so it blends into the next section (ticker) */
.postcode-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.postcode-wrap {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.postcode-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 24px 0 16px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.postcode-lede {
  font-size: 17px;
  color: var(--cream);
  max-width: 460px;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.postcode-form {
  width: 100%;
}
.postcode-field {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  padding: 8px 8px 8px 24px;
  background: rgba(10, 6, 6, 0.75);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* Bounce attention animation — plays when section enters viewport */
.postcode-section.in-view .postcode-field {
  animation: pcBounce 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
@keyframes pcBounce {
  0%   { transform: scale(1)   translateY(0); box-shadow: 0 0 0 0 rgba(255, 107, 26, 0); }
  15%  { transform: scale(1.04) translateY(-6px); box-shadow: 0 14px 40px -10px rgba(255, 107, 26, 0.6); border-color: var(--orange); }
  35%  { transform: scale(0.98) translateY(2px); box-shadow: 0 6px 20px -10px rgba(255, 107, 26, 0.4); }
  55%  { transform: scale(1.02) translateY(-3px); box-shadow: 0 10px 30px -10px rgba(255, 107, 26, 0.5); border-color: var(--orange); }
  75%  { transform: scale(0.99) translateY(1px); }
  100% { transform: scale(1) translateY(0); box-shadow: 0 0 0 0 rgba(255, 107, 26, 0); }
}
/* Gentle pulse on the CHECK button at the same time */
.postcode-section.in-view .pc-submit {
  animation: pcSubmitPulse 1.4s ease-out 0.2s;
}
@keyframes pcSubmitPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--orange-glow); }
  30%      { box-shadow: 0 0 0 12px rgba(255, 107, 26, 0); }
  60%      { box-shadow: 0 0 0 0 rgba(255, 107, 26, 0); }
}
.postcode-field:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.15);
}
.pc-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--orange);
  margin-right: 14px;
}
.pc-icon svg { width: 100%; height: 100%; }
#pcInput {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 0;
  min-width: 0;
}
#pcInput::placeholder { color: rgba(245, 237, 224, 0.4); letter-spacing: 1px; }
.pc-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: var(--bg);
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.pc-submit:hover {
  transform: translateX(2px);
  box-shadow: 0 12px 24px -8px var(--orange-glow);
}
.pc-submit svg { width: 14px; height: 14px; }
.postcode-result {
  margin-top: 20px;
  padding: 12px 20px;
  background: rgba(10, 6, 6, 0.75);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  min-height: 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
  width: fit-content;
}
.postcode-result.show {
  opacity: 1;
  transform: translateY(0);
}
.postcode-result.success { color: var(--orange); border: 1px solid var(--line-orange); }
.postcode-result.error { color: #ff8a4c; border: 1px solid rgba(255, 138, 76, 0.3); }

@media (max-width: 900px) {
  .postcode-section {
    padding: 80px 20px;
    /* On mobile, shift the image so the delivery person is more visible */
    background-position: 70% center;
  }
  .postcode-wrap { grid-template-columns: 1fr; gap: 40px; }
  .pc-submit { padding: 12px 18px; font-size: 12px; }
  .pc-submit svg { width: 12px; height: 12px; }
}
@media (max-width: 480px) {
  .postcode-field { padding: 6px 6px 6px 18px; }
  #pcInput { font-size: 14px; }
}

/* ===========================================
   LIVE ORDER TICKER
   =========================================== */
.ticker-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  padding: 16px 40px;
}
.ticker-wrap {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.ticker-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
  flex-shrink: 0;
  background: rgba(255, 107, 26, 0.06);
}
.ticker-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  position: relative;
  animation: tickerPulse 1.5s ease-in-out infinite;
}
@keyframes tickerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 26, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(255, 107, 26, 0); }
}
.ticker-feed {
  position: relative;
  height: 22px;
  flex: 1;
  overflow: hidden;
}
.ticker-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cream);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-item.active {
  opacity: 1;
  transform: translateY(0);
}
.ticker-item.leaving {
  opacity: 0;
  transform: translateY(-20px);
}
.ticker-emoji { font-size: 16px; flex-shrink: 0; }
.ticker-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ticker-text strong { color: var(--orange); font-weight: 600; }
.ticker-time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .ticker-section { padding: 14px 16px; }
  .ticker-wrap { gap: 14px; }
  .ticker-pulse { font-size: 10px; padding: 4px 10px; }
  .ticker-pulse span:last-child { display: none; }
  .ticker-item { font-size: 12.5px; gap: 8px; }
  .ticker-time { display: none; }
}

/* ===========================================
   TRUST / FEATURED IN STRIP
   =========================================== */
.trust-strip {
  padding: 80px 40px;
  background:
    radial-gradient(ellipse at center, rgba(255, 107, 26, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border-top: 1px solid var(--line-orange);
  border-bottom: 1px solid var(--line-orange);
  position: relative;
  overflow: hidden;
}
.trust-strip::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, var(--orange-glow), transparent 70%);
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
}
.trust-inner {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.trust-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 36px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.trust-label::before,
.trust-label::after {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--orange);
  opacity: 0.5;
}
.trust-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: center;
}
.trust-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  border: 1px solid var(--line-orange);
  border-radius: 14px;
  background: rgba(255, 107, 26, 0.04);
  backdrop-filter: blur(6px);
  transition: border-color 0.3s, transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.trust-logo:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  background: rgba(255, 107, 26, 0.1);
  box-shadow: 0 18px 40px -16px var(--orange-glow);
}
.tl-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tl-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.trust-logo-hmc {
  border-color: var(--orange);
  background: rgba(255, 107, 26, 0.12);
  box-shadow: inset 0 0 24px rgba(255, 107, 26, 0.1);
}
.trust-logo-hmc .tl-name { color: #fff; }
.trust-logo-hmc .tl-sub { color: var(--orange); }

@media (max-width: 900px) {
  .trust-strip { padding: 60px 20px; }
  .trust-logos { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .trust-logo { padding: 14px 10px; }
  .tl-name { font-size: 16px; }
  .trust-label::before, .trust-label::after { width: 24px; }
}
@media (max-width: 480px) {
  .trust-logos { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================
   OUR FARMS
   =========================================== */
.farms {
  padding: 40px 40px 60px;
  position: relative;
}
.farms .section-head {
  max-width: 1400px;
  margin: 0 auto 60px;
}
.farms-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.farm-card {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}
.farm-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width 0.5s var(--ease-out);
}
.farm-card:hover {
  border-color: var(--line-orange);
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.6);
}
.farm-card:hover::before { width: 100%; }
.farm-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.farm-tag {
  color: var(--orange);
  padding: 4px 10px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
}
.farm-est { color: var(--muted); }
.farm-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.farm-people {
  font-size: 13px;
  color: var(--orange);
  font-style: italic;
  font-family: var(--font-display);
  margin-top: -10px;
}
.farm-quote {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  font-style: italic;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-left: 2px solid var(--orange);
  border-radius: 6px;
}
.farm-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}
.farm-cuts { color: var(--cream); }
.farms-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 40px auto 0;
  padding: 14px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--cream);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
  width: fit-content;
}
.farms-link {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
.farms-link svg { width: 14px; height: 14px; }
.farms-link:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 107, 26, 0.05);
}

@media (max-width: 1100px) {
  .farms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .farms { padding: 80px 16px; }
  .farms-grid { grid-template-columns: 1fr; gap: 18px; }
  .farm-card { padding: 22px; }
  .farm-name { font-size: 24px; }
}

/* ===========================================
   INTERACTIVE CUT DIAGRAM
   =========================================== */
.cuts-section {
  padding: 60px 40px 80px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 107, 26, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 107, 26, 0.05) 0%, transparent 50%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
/* Faint grid background for character */
.cuts-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 40%, transparent 80%);
  pointer-events: none;
}
.cuts-section .section-head {
  max-width: 1200px;
  margin: 0 auto 50px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.cuts-interactive {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cuts-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.cuts-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  background: rgba(255, 255, 255, 0.02);
}
.cuts-tab .ct-icon { font-size: 16px; filter: grayscale(0.4); transition: filter 0.3s; }
.cuts-tab:hover {
  color: var(--cream);
  border-color: var(--line-orange);
}
.cuts-tab:hover .ct-icon { filter: none; }
.cuts-tab.active {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(255, 107, 26, 0.08);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.08);
}
.cuts-tab.active .ct-icon { filter: none; }

.cuts-stage {
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(255, 107, 26, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
  border: 1px solid var(--line-orange);
  border-radius: 24px;
  padding: 50px;
  min-height: 500px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: center;
}

/* Decorative corner brackets — adds a butcher-chart "blueprint" feel */
.stage-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--orange);
  pointer-events: none;
}
.stage-corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 24px 0 0 0; }
.stage-corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-radius: 0 24px 0 0; }
.stage-corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-radius: 0 0 0 24px; }
.stage-corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 24px 0; }

/* Each animal chart is a relatively-positioned wrapper so the hotspot
   buttons can be absolutely positioned by % over the image. */
.cut-chart {
  position: relative;
  grid-column: 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  /* Square-ish container so images can sit naturally without being squashed */
  aspect-ratio: 1 / 1;
  display: none;
}
.cut-chart.active { display: block; }
/* Subtle glow halo behind each animal */
.chart-stage-bg {
  position: absolute;
  inset: 10% 5%;
  background: radial-gradient(ellipse at center, rgba(255, 107, 26, 0.15), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.cut-chart img {
  position: relative;
  width: 100%;
  height: 100%;
  /* object-fit: contain ensures the whole image is shown, never cropped */
  object-fit: contain;
  display: block;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(255, 107, 26, 0.25));
}

/* Hotspot buttons — round glowing dots overlaid on the image */
.cut-hot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--orange);
  cursor: pointer;
  padding: 0;
  transform: translate(-50%, -50%);
  animation: hotspotPulse 2s ease-in-out infinite;
  transition: transform 0.25s var(--ease-out), background 0.25s;
  z-index: 3;
}
.cut-hot:hover {
  transform: translate(-50%, -50%) scale(1.3);
  background: var(--orange-light);
}
.cut-hot.selected {
  background: #fff;
  border-color: var(--orange);
  transform: translate(-50%, -50%) scale(1.35);
  animation: none;
  box-shadow: 0 0 0 6px rgba(255, 107, 26, 0.25);
}
@keyframes hotspotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 26, 0.7); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 107, 26, 0); }
}

.cuts-detail {
  grid-column: 2;
  min-height: 300px;
  padding: 0 0 0 30px;
  border-left: 1px dashed var(--line-orange);
}
.cd-default {
  font-family: var(--font-body);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding-top: 20px;
}
.cd-arrow-big {
  display: inline-flex;
  font-size: 48px;
  color: var(--orange);
  font-family: var(--font-display);
  line-height: 1;
  animation: cdArrow 1.4s ease-in-out infinite;
}
@keyframes cdArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-12px); }
}
.cd-default-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cd-default-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.cd-content {
  animation: fadeUp 0.5s var(--ease-out);
}
.cd-tag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 14px;
  background: rgba(255, 107, 26, 0.05);
}
.cd-name {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.cd-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 22px;
}
.cd-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.cd-spec span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.cd-spec strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
}
.cd-spec.accent strong { color: var(--orange); }

/* Hint strip below the stage */
.cuts-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px auto 0;
  padding: 10px 20px;
  background: rgba(255, 107, 26, 0.06);
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  width: fit-content;
}
.cuts-interactive .cuts-hint {
  display: flex;
}
.cuts-hint strong { color: var(--orange); font-weight: 700; }
.cuts-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: tickerPulse 1.5s ease-in-out infinite;
}

@media (max-width: 900px) {
  .cuts-section { padding: 80px 16px; }
  .cuts-stage {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    min-height: auto;
    gap: 28px;
  }
  .cut-chart, .cuts-detail { grid-column: 1; }
  .cut-chart { max-width: 320px; }
  .cuts-detail {
    border-left: none;
    border-top: 1px dashed var(--line-orange);
    padding: 24px 0 0 0;
  }
  .cd-name { font-size: 28px; }
  .cuts-tab { padding: 10px 16px; font-size: 11px; }
  .cuts-tab .ct-icon { font-size: 14px; }
  .cut-hot { width: 18px; height: 18px; }
  .cuts-hint { font-size: 10px; padding: 8px 14px; }
}

/* ===========================================
   HOW TO COOK IT
   =========================================== */
.cook-section {
  padding: 120px 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.cook-section .section-head {
  margin-bottom: 60px;
  max-width: 700px;
}
.cook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cook-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.4s;
}
.cook-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at top right, rgba(255, 107, 26, 0.15), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}
.cook-card:hover {
  border-color: var(--line-orange);
  transform: translateY(-4px);
}
.cook-card:hover::after { opacity: 1; }
.cook-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cook-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.03em;
}
.cook-method {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.cook-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.cook-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cook-steps li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
}
.cook-steps li span:first-child { color: var(--cream); }
.cook-steps li span:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--orange);
  text-transform: uppercase;
}
.cook-tip {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  font-style: italic;
  font-family: var(--font-display);
}
.cook-tip-icon {
  color: var(--orange);
  flex-shrink: 0;
  font-style: normal;
}

@media (max-width: 1100px) {
  .cook-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .cook-section { padding: 80px 16px; }
  .cook-grid { grid-template-columns: 1fr; }
}

/* ===========================================
   PROVENANCE / HALAL TRANSPARENCY
   =========================================== */
.provenance {
  padding: 60px 40px 80px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.prov-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
/* On its own, center the cert card */
.prov-cert-card-wrap {
  display: flex;
  justify-content: center;
}

/* LEFT: receipt-style trace */
.prov-receipt {
  margin-top: 40px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  font-family: var(--font-mono);
  position: relative;
}
.prov-receipt::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 14px;
  background:
    linear-gradient(135deg, transparent 33%, var(--bg-2) 33%) 0 0 / 14px 14px,
    linear-gradient(45deg, transparent 33%, var(--bg-2) 33%) 0 0 / 14px 14px;
  background-color: transparent;
}
.prov-receipt-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 20px;
}
.prov-receipt-num { color: var(--orange); font-weight: 600; }

.prov-trace {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 20px;
}
.prov-trace li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}
.prov-trace li:last-child { border-bottom: none; padding-bottom: 0; }
.prov-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.15);
  margin-top: 6px;
}
.prov-trace li > div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.prov-trace li > div span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.prov-date {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--orange);
  text-transform: uppercase;
  text-align: right;
  margin-top: 6px;
}
.prov-receipt-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.prov-cert-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
}
.prov-cert-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}
.prov-view {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-orange);
  transition: color 0.3s;
}
.prov-view:hover { color: var(--orange); }

/* RIGHT: HMC card */
.prov-right {
  display: flex;
  justify-content: center;
  width: 100%;
}
.prov-cert-card {
  background:
    radial-gradient(circle at top right, rgba(255, 107, 26, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%);
  border: 1px solid var(--line-orange);
  border-radius: 22px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.prov-cert-card::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.1), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.prov-cert-head {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.prov-cert-badge {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--orange);
}
.prov-cert-badge svg { width: 100%; height: 100%; }
.prov-cert-head h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.prov-cert-head p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}
.prov-promises {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.prov-promises li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--cream);
}
.prov-promises li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--orange);
}
.prov-cert-link {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--orange);
  color: var(--bg);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s, box-shadow 0.3s;
}
.prov-cert-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px var(--orange-glow);
}
.prov-cert-link svg { width: 14px; height: 14px; }
.prov-imam {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.prov-imam-label { color: var(--muted); }
.prov-imam-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--orange);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .prov-grid { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 700px) {
  .provenance { padding: 80px 16px; }
  .prov-receipt, .prov-cert-card { padding: 22px; }
  .prov-imam { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   TESTIMONIALS V2 — Redesigned (Compact)
   ============================================================ */
.testi-v2 {
  position: relative;
  padding: 70px 40px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 107, 26, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 107, 26, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.testi-v2-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.testi-v2-glow-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--orange-glow), transparent 70%);
  top: -100px; left: -200px;
  opacity: 0.4;
}
.testi-v2-glow-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--orange-glow), transparent 70%);
  bottom: -200px; right: -300px;
  opacity: 0.35;
}

/* ===== HEAD WITH BIG STATS ===== */
.testi-v2-head {
  max-width: 1400px;
  margin: 0 auto 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.testi-v2-head .section-tag {
  justify-content: center;
  margin: 0 auto 18px;
}
.testi-v2-head .section-title {
  margin-bottom: 36px;
  font-size: clamp(32px, 4.5vw, 56px);
}
.testi-v2-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 20px 32px;
  border: 1px solid var(--line-orange);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at center, rgba(255, 107, 26, 0.05) 0%, transparent 70%),
    rgba(10, 6, 6, 0.5);
  backdrop-filter: blur(8px);
  max-width: 1000px;
  margin: 0 auto;
}
.tv2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 28px;
  flex: 1;
  min-width: 150px;
}
.tv2-stat-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.03em;
}
.tv2-stat-num span {
  font-size: 22px;
  opacity: 0.7;
  font-style: italic;
}
.tv2-stat-stars {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 2px;
  margin-top: 2px;
}
.tv2-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-top: 2px;
}
.tv2-stat-divider {
  width: 1px;
  height: 44px;
  background: var(--line-orange);
  flex-shrink: 0;
}

/* ===== FEATURED HERO QUOTE — compact ===== */
.testi-v2-hero {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 36px 44px 30px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 107, 26, 0.12), transparent 50%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%);
  border: 1px solid var(--line-orange);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.testi-v2-hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255, 107, 26, 0.15), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.tv2-quote-mark {
  position: absolute;
  top: 0px; left: 26px;
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 1;
  color: var(--orange);
  opacity: 0.2;
  font-style: italic;
  font-weight: 400;
}
.tv2-hero-quote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.tv2-hero-quote em {
  color: var(--orange);
  font-style: italic;
}
.tv2-hero-author {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line-orange);
  position: relative;
  z-index: 1;
}
.tv2-author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tv2-author-info strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
}
.tv2-author-info span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.tv2-hero-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.tv2-hero-stars {
  color: var(--orange);
  font-size: 15px;
  letter-spacing: 2px;
}
.tv2-hero-date {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ===== AVATARS ===== */
.tv2-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.tv2-avatar-mh { background: linear-gradient(135deg, #FF8A4C, #C73E11); width: 52px; height: 52px; font-size: 18px; }
.tv2-avatar-ak { background: linear-gradient(135deg, #FF6B1A, #E04518); }
.tv2-avatar-fa { background: linear-gradient(135deg, #FFB07C, #FF6B1A); }
.tv2-avatar-yt { background: linear-gradient(135deg, #E04518, #8B2A0A); }
.tv2-avatar-zm { background: linear-gradient(135deg, #FF9357, #C73E11); }
.tv2-avatar-bk { background: linear-gradient(135deg, #FF6B1A, #FF9357); }
.tv2-avatar-mk { background: linear-gradient(135deg, #FFB07C, #E04518); }

/* ===== TESTIMONIAL SLIDER — 3 cards per slide, swipeable ===== */
.testi-v2-slider {
  max-width: 1400px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.testi-v2-track {
  display: flex;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.testi-v2-slide {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 4px;          /* room for the card hover lift so it doesn't clip */
}

/* Slider controls — arrows + dot indicators */
.testi-v2-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
}
.testi-v2-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.3s;
}
.testi-v2-arrow:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 107, 26, 0.06);
}
.testi-v2-arrow:active { transform: scale(0.95); }
.testi-v2-arrow svg { width: 18px; height: 18px; }

.testi-v2-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.testi-v2-dot {
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.4s var(--ease-out), background 0.3s;
}
.testi-v2-dot:hover { background: rgba(255, 107, 26, 0.6); }
.testi-v2-dot.is-active {
  width: 44px;
  background: var(--orange);
}
.tv2-card {
  padding: 20px 20px 16px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
.tv2-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--orange);
  border-radius: 14px 0 0 0;
  transition: width 0.5s var(--ease-out);
}
.tv2-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-orange);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.5);
}
.tv2-card:hover::before { width: 100%; }

.tv2-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tv2-card-head > div:not(.tv2-avatar):not(.tv2-card-verified) {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tv2-card-head strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
}
.tv2-card-head span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}
.tv2-card-verified {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  flex-shrink: 0;
}
.tv2-card-verified svg { width: 12px; height: 12px; }

.tv2-card-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--cream);
  font-family: var(--font-body);
  flex: 1;
}

.tv2-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.tv2-card-stars {
  color: var(--orange);
  font-size: 12px;
  letter-spacing: 2px;
}
.tv2-card-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ===== BOTTOM TRUST BADGES ===== */
.testi-v2-badges {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
.tv2-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(10, 6, 6, 0.5);
  backdrop-filter: blur(8px);
  transition: border-color 0.3s, transform 0.3s;
}
.tv2-badge:hover {
  border-color: var(--line-orange);
  transform: translateY(-2px);
}
.tv2-badge-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 107, 26, 0.1);
  border: 1px solid var(--line-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
}
.tv2-badge-mark svg { width: 18px; height: 18px; }
.tv2-badge > div:last-child { display: flex; flex-direction: column; }
.tv2-badge strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
}
.tv2-badge span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .testi-v2-slide { grid-template-columns: repeat(2, 1fr); }
  .testi-v2-badges { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .testi-v2 { padding: 60px 20px; }
  .tv2-stat-divider { display: none; }
  .testi-v2-stats { flex-direction: column; gap: 18px; padding: 22px 18px; }
  .tv2-stat { padding: 10px 0; border-bottom: 1px dashed var(--line); width: 100%; }
  .tv2-stat:last-child { border-bottom: none; }
  .tv2-stat-num { font-size: 34px; }
  .testi-v2-hero { padding: 30px 22px; }
  .tv2-quote-mark { font-size: 90px; left: 16px; }
  .tv2-hero-quote { font-size: 18px; }
  .tv2-hero-author { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tv2-hero-rating { flex-direction: row; align-self: flex-start; align-items: center; gap: 10px; }
  /* On mobile, stack the 3 cards inside each slide vertically.
     We keep the 2-slide structure (reviews 1-3 / 4-6) so users can still
     swipe between two "pages" of reviews. */
  .testi-v2-slide { grid-template-columns: 1fr; gap: 12px; }
  .testi-v2-arrow { width: 40px; height: 40px; }
  .testi-v2-arrow svg { width: 16px; height: 16px; }
}

/* ============================================================
   NAVBAR — MEGA MENU
   ============================================================ */
/* Mega-menu trigger — now a real link (not button) so it navigates to shop.html */
.nav-link-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--cream);
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
  text-decoration: none;
}
.nav-link-trigger:hover,
.nav-item-mega.is-open .nav-link-trigger {
  color: var(--orange);
}
/* Chevron is a separate clickable button next to the Shop link.
   Clicking it ONLY toggles the menu — it never navigates. */
.nav-chev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  border-radius: 50%;
  transition: background 0.25s;
}
.nav-chev-btn:hover {
  background: rgba(255, 107, 26, 0.12);
}
.nav-chev {
  transition: transform 0.3s var(--ease);
  color: currentColor;
}
.nav-item-mega.is-open .nav-chev {
  transform: rotate(180deg);
}

/* Mega-menu item container */
.nav-item-mega {
  position: relative;
}

/* MEGA-MENU PANEL */
.mega-menu {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  width: min(1100px, calc(100vw - 60px));
  background:
    radial-gradient(circle at top right, rgba(255, 107, 26, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-orange);
  border-radius: 22px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 107, 26, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out),
    visibility 0s linear 0.3s;
  overflow: hidden;
}
.nav-item-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out),
    visibility 0s linear 0s;
}

.mega-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 0;
  padding: 22px;
  align-items: start;              /* let each column be its content's height */
}
.mega-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.mega-col-main {
  padding-right: 22px;
  border-right: 1px solid var(--line);
}
.mega-col-side {
  padding-left: 22px;
}
.mega-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mega-label::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--line-orange);
}

/* Meat category links */
.mega-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mega-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: all 0.25s var(--ease-out);
}
.mega-cat:hover {
  background: rgba(255, 107, 26, 0.06);
  border-color: var(--line-orange);
  transform: translateX(3px);
}
.mega-cat-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.mega-cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.mega-cat:hover .mega-cat-img img {
  transform: scale(1.08);
}
.mega-cat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-cat-info strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1;
}
.mega-cat-info span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  text-transform: uppercase;
}
.mega-cat:hover .mega-cat-info strong { color: var(--orange); }

/* Right column: featured product card.
   With Quick Links moved to the left column, the right column is just the
   featured card. It takes its natural height — no stretching. */
.mega-featured {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 107, 26, 0.05);
  border: 1px solid var(--line-orange);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.mega-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -14px var(--orange-glow);
}
.mega-featured-img {
  height: 200px;
  overflow: hidden;
  background: var(--bg);
}
.mega-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.mega-featured:hover .mega-featured-img img {
  transform: scale(1.05);
}
.mega-featured-body {
  padding: 14px 16px 16px;
}
.mega-featured-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mega-featured-body h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.mega-featured-body p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.mega-featured-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--orange);
  text-transform: uppercase;
  font-weight: 600;
}

/* Quick links — now sit below the categories in the left column.
   Use a 3-col grid so they line up neatly and fill the width. */
.mega-quick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.mega-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mega-quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--cream);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.mega-quick-link svg {
  width: 16px;
  height: 16px;
  color: var(--orange);
  flex-shrink: 0;
}
.mega-quick-link:hover {
  background: rgba(255, 107, 26, 0.06);
  border-color: var(--orange);
  color: var(--orange);
}

/* MOBILE: collapse mega-menu into a simple accordion */
@media (max-width: 900px) {
  .nav-item-mega { width: 100%; }
  .mega-menu {
    position: static;
    transform: none;
    width: 100%;
    max-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin-top: 0;
    transition: max-height 0.4s var(--ease-out), opacity 0.3s;
  }
  .nav-item-mega.is-open .mega-menu {
    max-height: 1200px;
    transform: none;
  }
  .mega-inner {
    grid-template-columns: 1fr;
    padding: 12px 0 8px;
    gap: 24px;
  }
  .mega-col-main { padding-right: 0; border-right: none; padding-bottom: 24px; border-bottom: 1px dashed var(--line); }
  .mega-col-side { padding-left: 0; }
  .mega-cats { grid-template-columns: 1fr; gap: 6px; }
  .mega-featured-img { height: 110px; }
}

/* ============================================================
   PAGE HERO — shared by story/qurbani/contact subpages
   ============================================================ */
.page-hero {
  position: relative;
  padding: 180px 40px 80px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 107, 26, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(255, 107, 26, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  pointer-events: none;
}
.page-hero::before {
  /* Subtle grid texture */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
}
.page-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.page-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(255, 107, 26, 0.04);
  margin-bottom: 30px;
  animation: fadeUp 0.8s var(--ease-out);
}
.page-hero-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
  animation: pulse 2s ease-in-out infinite;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.5vw, 120px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 30px;
  max-width: 1100px;
  animation: fadeUp 0.9s var(--ease-out) 0.15s both;
}
.page-hero-title em {
  font-style: italic;
  color: var(--orange);
  font-weight: 400;
}
.page-hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
  animation: fadeUp 1s var(--ease-out) 0.3s both;
}

@media (max-width: 900px) {
  .page-hero { padding: 130px 20px 50px; }
  .page-hero-sub { font-size: 16px; }
}

/* ============================================================
   CART SYSTEM — icon + slide-out drawer
   ============================================================ */

/* ---- Cart icon in navbar ---- */
.nav-cart {
  position: relative;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.nav-cart:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 107, 26, 0.08);
}
.nav-cart svg { width: 18px; height: 18px; }
.nav-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--orange);
  color: var(--bg);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  border: 2px solid var(--bg);
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-cart-badge.is-visible { transform: scale(1); }
.nav-cart-badge.bump { animation: badgeBump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes badgeBump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.35); }
}

/* ---- Drawer backdrop ---- */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  z-index: 998;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.cart-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0s;
}

/* ---- Drawer ---- */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(480px, 100vw);
  height: 100vh;
  background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border-left: 1px solid var(--line-orange);
  box-shadow: -40px 0 80px -20px rgba(0, 0, 0, 0.6);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-head h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.cart-head-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--orange);
  text-transform: uppercase;
}
.cart-close {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.cart-close:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: rotate(90deg);
}
.cart-close svg { width: 16px; height: 16px; }

/* ---- Free delivery progress bar ---- */
.cart-progress {
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 107, 26, 0.04);
}
.cart-progress-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--cream);
  margin-bottom: 8px;
}
.cart-progress-text strong { color: var(--orange); }
.cart-progress-bar {
  height: 4px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}
.cart-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange-light));
  border-radius: 999px;
  transition: width 0.5s var(--ease-out);
}

/* ---- Cart items ---- */
.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
}
.cart-items::-webkit-scrollbar { width: 6px; }
.cart-items::-webkit-scrollbar-track { background: transparent; }
.cart-items::-webkit-scrollbar-thumb {
  background: var(--line-orange);
  border-radius: 999px;
}
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 16px 14px;
  border-bottom: 1px dashed var(--line);
  align-items: center;
  animation: cartItemIn 0.4s var(--ease-out);
}
@keyframes cartItemIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.cart-item.is-removing {
  animation: cartItemOut 0.3s var(--ease-out) forwards;
}
@keyframes cartItemOut {
  to { opacity: 0; transform: translateX(40px); height: 0; padding: 0; margin: 0; }
}
.cart-item-img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
}
.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cart-item-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  text-transform: uppercase;
}
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  width: fit-content;
}
.cart-item-qty button {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.cart-item-qty button:hover {
  background: var(--orange);
  color: var(--bg);
}
.cart-item-qty span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  min-width: 22px;
  text-align: center;
}
.cart-item-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.cart-item-price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: -0.01em;
}
.cart-item-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.cart-item-remove:hover {
  color: #ff6464;
  background: rgba(255, 100, 100, 0.08);
}
.cart-item-remove svg { width: 14px; height: 14px; }

/* ---- Empty cart state ---- */
.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
  text-align: center;
  gap: 16px;
}
.cart-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 107, 26, 0.06);
  border: 1px solid var(--line-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
}
.cart-empty-icon svg { width: 36px; height: 36px; }
.cart-empty h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.cart-empty p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
}
.cart-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--orange);
  color: var(--bg);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cart-empty-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px var(--orange-glow);
}

/* ---- Cart footer / totals ---- */
.cart-foot {
  padding: 20px 28px 26px;
  background: var(--bg-2);
  border-top: 1px solid var(--line-orange);
}
.cart-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.cart-total-row span { color: var(--muted); }
.cart-total-row strong {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--cream);
}
.cart-total-row-final {
  padding-top: 12px;
  border-top: 1px dashed var(--line-orange);
  margin-top: 4px;
}
.cart-total-row-final span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
}
.cart-total-row-final strong {
  font-size: 26px;
  color: var(--orange);
  letter-spacing: -0.02em;
}
.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: var(--orange);
  color: var(--bg);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.cart-checkout-btn svg { width: 16px; height: 16px; }
.cart-checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px var(--orange-glow);
  background: var(--orange-light);
}
.cart-foot-secondary {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.cart-foot-secondary span svg {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  margin-right: 4px;
  color: var(--orange);
}

/* ---- Toast notification when item added ---- */
.cart-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 107, 26, 0.12), transparent 60%),
    var(--bg-3);
  border: 1px solid var(--line-orange);
  border-radius: 14px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s var(--ease-out), opacity 0.4s;
  z-index: 1000;
  max-width: 320px;
}
.cart-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.cart-toast-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-toast-icon svg { width: 18px; height: 18px; }
.cart-toast-text {
  font-size: 13px;
  color: var(--cream);
  line-height: 1.3;
}
.cart-toast-text strong {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--orange);
  display: block;
  margin-bottom: 2px;
}

@media (max-width: 600px) {
  .cart-drawer { width: 100vw; border-left: none; }
  .cart-toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

/* Product card + button — added feedback (when wired by cart) */
.prod-add {
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.prod-add:hover {
  background: var(--orange) !important;
  color: var(--bg) !important;
  transform: scale(1.08);
}
.prod-add.is-added {
  background: #3cc878 !important;
  color: var(--bg) !important;
  animation: prodAddPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes prodAddPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ============================================================
   HERO RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 900px) {
  .hero {
    height: auto;          /* On mobile, let it size to content */
    min-height: 100vh;
    max-height: none;
    padding: 110px 24px 50px;
  }
  .hero-slide {
    padding: 60px 0 30px;
  }
  .hero-slide::after {
    /* Slightly darker on mobile so text always stays readable */
    background:
      linear-gradient(180deg, rgba(10, 6, 6, 0.7) 0%, rgba(10, 6, 6, 0.85) 100%);
  }
}
@media (max-width: 600px) {
  .hero { padding: 100px 18px 40px; }
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 6, 0.85);
  backdrop-filter: blur(12px);
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 100px 20px 20px;
  overflow-y: auto;
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
}

.search-panel {
  width: 100%;
  max-width: 720px;
  background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-orange);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7);
  transform: scale(0.95) translateY(-20px);
  transition: transform 0.4s var(--ease-out);
}
.search-overlay.is-open .search-panel {
  transform: scale(1) translateY(0);
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
}
.search-input-wrap > svg {
  width: 22px;
  height: 22px;
  color: var(--orange);
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--cream);
  padding: 24px 20px;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.search-input::placeholder { color: rgba(245, 237, 224, 0.3); }
.search-close {
  background: none;
  border: 1px solid var(--line);
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  flex-shrink: 0;
}
.search-close:hover {
  color: var(--orange);
  border-color: var(--orange);
  transform: rotate(90deg);
}
.search-close svg { width: 14px; height: 14px; }
.search-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  margin-right: 10px;
}

.search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 0;
}
.search-results::-webkit-scrollbar { width: 6px; }
.search-results::-webkit-scrollbar-thumb { background: var(--line-orange); border-radius: 999px; }

.search-section {
  padding: 14px 24px 4px;
}
.search-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.search-result {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}
.search-result:hover, .search-result.is-focused {
  background: rgba(255, 107, 26, 0.08);
}
.search-result-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
}
.search-result-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.search-result-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 107, 26, 0.08);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.search-result-icon svg { width: 20px; height: 20px; }
.search-result-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.search-result-text strong mark {
  background: rgba(255, 107, 26, 0.15);
  color: var(--orange);
  padding: 0 2px;
  border-radius: 3px;
}
.search-result-text span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.search-result-price {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--orange);
}
.search-result-arrow {
  color: var(--muted);
  transition: transform 0.2s, color 0.2s;
}
.search-result-arrow svg { width: 14px; height: 14px; }
.search-result:hover .search-result-arrow,
.search-result.is-focused .search-result-arrow {
  color: var(--orange);
  transform: translateX(3px);
}

.search-empty, .search-hint {
  padding: 30px 24px;
  text-align: center;
}
.search-empty h4, .search-hint h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 6px;
}
.search-empty p, .search-hint p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.search-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}
.search-quick button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  background: transparent;
  color: var(--orange);
  cursor: pointer;
  transition: all 0.25s;
}
.search-quick button:hover {
  background: var(--orange);
  color: var(--bg);
}

@media (max-width: 600px) {
  .search-overlay { padding-top: 60px; }
  .search-input { font-size: 18px; padding: 18px 12px; }
}

/* ============================================================
   NAVBAR RESPONSIVE
   ============================================================ */
/* Tablet — slightly tighter */
@media (max-width: 1100px) {
  .nav { padding: 14px 24px; }
  .nav-links { gap: 22px; }
  .nav-links a, .nav-link-trigger { font-size: 13px; }
  .nav-inner { gap: 20px; }
  .logo-img { height: 48px; }
}
/* Mobile — hide center links, keep logo + cart + hamburger */
@media (max-width: 900px) {
  .nav { padding: 12px 18px; }

  /* When the slide-out drawer is open, give the navbar a solid background
     so the logo, search/cart icons, and X button stay clearly visible
     above the drawer. Without this the drawer's dark blurred backdrop
     visually swallows the nav bar. The navbar's z-index (100) is higher
     than the drawer's (99) so the logo + X close stay on top. */
  .nav.menu-open {
    background: rgba(10, 6, 6, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--line);
  }

  .nav-links {
    display: flex !important;        /* override any earlier display:none */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    /* Fully opaque solid background so page content doesn't bleed through.
       (Nested backdrop-filters get cancelled by Chromium when the parent
       .nav also has backdrop-filter, so we use solid color instead.) */
    background: #0a0606;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* Top padding leaves room for the navbar (logo + X stay visible on top) */
    padding: 88px 24px 60px;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-out);
    overflow-y: auto;
    z-index: 99;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links > a,
  .nav-links > .nav-item {
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a, .nav-link-trigger {
    font-size: 18px !important;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .nav-cta span { display: none; }
  .nav-cta { padding: 10px !important; width: 40px; height: 40px; justify-content: center; }
  .nav-cta svg { margin: 0; }
  .logo-img { height: 38px; }
  .nav-mobile-toggle {
    display: inline-flex !important;
  }

  /* When the menu is open, hide the search / cart / Order Now buttons
     so the navbar shows just the LOGO (left) and X close button (right).
     Cleaner header strip when the drawer is open. */
  .nav.menu-open .nav-search,
  .nav.menu-open .nav-cart,
  .nav.menu-open .nav-cta {
    display: none !important;
  }
}
@media (max-width: 600px) {
  .nav { padding: 10px 14px; }
  .nav-inner { gap: 8px; }
  .logo-img { height: 32px; }
  .nav-right { gap: 8px; }
}

/* Hamburger button — hidden on desktop, shown on mobile via media query.
   When the slide-out menu is open it must remain visible and clickable so
   users can close the menu. The open menu overlay sits at z-index 99, so
   the button needs its own stacking context above that. */
.nav-mobile-toggle {
  display: none;
  position: relative;
  z-index: 200;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s;
}
.nav-mobile-toggle:hover { border-color: var(--orange); color: var(--orange); }
.nav-mobile-toggle svg { width: 20px; height: 20px; }
.nav-mobile-toggle .icon-close { display: none; }
/* When menu is open: make the button highly visible (X icon, brighter ring)
   so users always know how to close it. */
.nav.menu-open .nav-mobile-toggle {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 107, 26, 0.08);
}
.nav.menu-open .nav-mobile-toggle .icon-burger { display: none; }
.nav.menu-open .nav-mobile-toggle .icon-close { display: block; }


/* "Clean" hero slide — no background image, no overlay (used by slide 1
   which uses the floating product cards on the right instead) */
.hero-slide-clean::before,
.hero-slide-clean::after {
  display: none !important;
}

/* Floating product cards (Ribeye + Lamb Shoulder) — visible on every slide,
   sitting absolutely-positioned on the right side of the hero. */
.hero-visual {
  opacity: 1;
  visibility: visible;
}

/* Each slide gets its own set of floating cards. Only the active slide's
   set is visible. They fade in/out smoothly when slides change. */
.hero-visual-set {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease 0.2s, visibility 0s linear 0.9s;
}
.hero-visual-set.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease 0.5s, visibility 0s linear 0.5s;
}

/* "Special" floating card variant — for cards with an icon instead of a
   product image (e.g. countdown, speed, savings). Smaller, more compact. */
.float-card-special {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.float-card-special .float-card-label {
  padding: 0;
  gap: 2px;
}
.float-info-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 107, 26, 0.1);
  border: 1px solid var(--line-orange);
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.float-info-icon svg { width: 26px; height: 26px; }

/* Mobile: smaller / repositioned carousel controls + floating cards */
@media (max-width: 900px) {
  .carousel-controls { right: 24px; bottom: 24px; left: auto; }
  .hero-visual { display: none; }    /* Hide floating cards on small screens */
}

/* ============================================================
   ============================================================
   FULL-SITE MOBILE RESPONSIVE OVERRIDES
   Final layer — overrides any conflicting earlier rules.
   ============================================================
   ============================================================ */

/* ---------- TABLET & SMALLER (max 1100px) ---------- */
@media (max-width: 1100px) {
  /* Sections that use 40px horizontal padding tighten up */
  .hero, .marquee, .postcode-section,
  .ticker, .featured-in, .categories,
  .story, .craft, .featured, .delivery,
  .provenance, .cuts, .farms, .testimonials,
  .contact, .cta-banner, .footer { padding-left: 28px !important; padding-right: 28px !important; }

  /* Floating cards stay hidden on tablet too (already hidden at 1200px) */
  .hero-visual { display: none !important; }

  /* Generic grid two-up tightening */
  .cat-grid, .cuts-grid, .farms-grid,
  .craft-grid, .testimonials-grid,
  .features-grid { gap: 16px; }
}

/* ---------- MOBILE (max 900px) ---------- */
@media (max-width: 900px) {

  /* ===== HERO ===== */
  .hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 100px 18px 36px !important;   /* tight bottom — dots sit in flow */
    align-items: flex-start !important;
    display: block !important;
  }
  .hero-content {
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-carousel {
    height: auto !important;
    min-height: 0 !important;
  }
  /* On mobile each slide is in normal flow but only the active one shows */
  .hero-slide {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    width: 100% !important;
    padding: 20px 0 !important;
    display: none !important;
  }
  .hero-slide.active {
    display: flex !important;
    flex-direction: column !important;
  }
  .hero-slide::before, .hero-slide::after { display: none !important; }

  .hero-title {
    font-size: clamp(36px, 9vw, 54px) !important;
    line-height: 1 !important;
    margin-bottom: 24px !important;
  }
  .hero-line { line-height: 1.05 !important; }
  .hero-eyebrow {
    margin-bottom: 18px !important;
    font-size: 10px !important;
    padding: 7px 14px !important;
  }
  .hero-sub { font-size: 14px !important; line-height: 1.55 !important; }
  .hero-sub br { display: none !important; }
  .hero-bottom { margin-bottom: 22px !important; }
  .hero-actions {
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
  }
  .btn-primary, .btn-ghost {
    padding: 12px 18px !important;
    font-size: 12px !important;
  }
  .hero-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
    padding: 14px 0 0 !important;
  }
  .meta-num { font-size: 28px !important; }
  .meta-label { font-size: 10px !important; line-height: 1.3 !important; }
  .hero-scroll { display: none !important; }

  /* Carousel dots — sit in normal flow below the slide content */
  .carousel-controls {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 28px auto 0 !important;
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
    gap: 0 !important;
  }
  .carousel-dot { width: 22px !important; height: 3px !important; }
  .carousel-dot.active { width: 36px !important; }
  .carousel-dots { gap: 8px !important; }

  /* ===== SECTION HEADS (everywhere) ===== */
  .section-head h2,
  .section-title, .sec-title,
  .qbn-section-title, .del-section-title,
  .story-section-title, .shop-section-title {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.05 !important;
  }
  .section-head p,
  .section-lede, .sec-lede,
  .qbn-section-lede, .del-section-lede {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Universal "tight on mobile" for all big sections */
  .postcode-section, .ticker, .featured-in, .categories, .story,
  .craft, .featured, .delivery, .provenance, .cuts, .farms,
  .testimonials, .contact, .cta-banner {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ===== GRID SECTIONS — all become single column ===== */
  .cat-grid, .cuts-grid, .farms-grid, .craft-grid,
  .testimonials-grid, .features-grid,
  .story-split, .featured-grid, .provenance-grid,
  .reviews-grid, .stats-grid, .delivery-grid,
  .contact-wrap, .farm-cards { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Two-up grids → one column on mobile */
  .qbn-share-grid, .story-values-grid,
  .del-zones-grid, .del-chain, .del-options,
  .shop-cats .cat-row,
  .shop-cats .cat-row-rev,
  .shop-cta-inner, .ty-cards,
  .checkout-wrap {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .cat-row, .cat-row-rev { display: flex !important; flex-direction: column !important; }
  .cat-row-rev .cat-visual { order: -1 !important; }

  /* Shop page category numbers */
  .cat-num { font-size: 60px !important; top: -10px !important; left: -8px !important; }
  .cat-name { font-size: clamp(28px, 7vw, 40px) !important; }
  .cat-cuts { gap: 6px !important; }
  .cat-cut-pill { padding: 5px 10px !important; font-size: 10px !important; }
  .cat-meta { grid-template-columns: 1fr 1fr !important; }

  /* ===== CART DRAWER ===== */
  .cart-drawer { width: 100vw !important; }

  /* ===== FOOTER ===== */
  .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .footer-tagline { font-size: 15px !important; }

  /* ===== CHECKOUT PAGE ===== */
  .checkout { padding: 30px 16px 60px !important; }
  .checkout-step-indicator { display: none !important; }
  .ch-field-row { grid-template-columns: 1fr !important; }
  .ch-slots { grid-template-columns: 1fr !important; }
  .nav-checkout { padding: 12px 16px !important; }
  .cs-sticky { position: static !important; }
  .checkout-back span { display: none !important; }

  /* ===== POSTCODE CHECKER ===== */
  .postcode-section { padding: 60px 18px !important; }
  .postcode-title { font-size: clamp(26px, 6.5vw, 36px) !important; }
  .postcode-form { max-width: 100% !important; }
  .postcode-field { padding: 4px 4px 4px 14px !important; }
  .postcode-field input { font-size: 14px !important; padding: 12px 0 !important; }
  .pc-submit { padding: 10px 14px !important; font-size: 11px !important; }
  .pc-submit span { display: inline !important; }
  .postcode-bullets { grid-template-columns: 1fr !important; }

  /* ===== CONTACT SECTION ===== */
  .contact-wrap { grid-template-columns: 1fr !important; }
  .contact-form-row { grid-template-columns: 1fr !important; }
  .contact-info { padding: 24px !important; }

  /* ===== INTERACTIVE CUT DIAGRAM ===== */
  .cuts-stage { max-width: 100% !important; }
  .cuts-image { aspect-ratio: 1 / 1 !important; }
  .cuts-tabs { gap: 6px !important; }
  .cuts-tab { padding: 8px 14px !important; font-size: 11px !important; }
  .cuts-tab-emoji { font-size: 22px !important; }

  /* ===== TICKER ===== */
  .ticker-feed { font-size: 13px !important; }

  /* ===== FEATURED PRODUCT ===== */
  .featured-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .featured-img-wrap { max-width: 100% !important; aspect-ratio: 1 / 1 !important; }
  .featured-title { font-size: clamp(30px, 7vw, 44px) !important; }
  .featured-cta { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  .featured-cta .btn-primary { width: 100% !important; justify-content: center !important; }

  /* ===== TESTIMONIALS ===== */
  .stats-bar { grid-template-columns: 1fr 1fr !important; gap: 18px !important; padding: 22px 18px !important; }
  .stat-num { font-size: 32px !important; }
  .hero-quote { font-size: 22px !important; padding: 30px 22px !important; }
  .reviews-grid { grid-template-columns: 1fr !important; }
  .trust-badges { grid-template-columns: 1fr !important; }

  /* ===== STORY / QURBANI / DELIVERY hero pages ===== */
  .qbn-hero { padding: 110px 18px 60px !important; }
  .qbn-hero-title { font-size: clamp(34px, 8vw, 56px) !important; }
  .qbn-cd-row { gap: 4px !important; }
  .qbn-cd-item strong { font-size: 24px !important; }
  .qbn-cd-item { min-width: 38px !important; }
  .qbn-cd-sep { font-size: 18px !important; padding-bottom: 10px !important; }
  .qbn-countdown { padding: 14px 18px !important; }
  .qbn-hero-actions { flex-direction: column !important; align-items: stretch !important; }
  .qbn-btn-primary, .qbn-btn-ghost { justify-content: center !important; padding: 14px 22px !important; }
  .qbn-shares, .qbn-process, .qbn-imam, .qbn-faq, .qbn-cta { padding: 60px 18px !important; }
  .qbn-imam-inner { padding: 30px 20px !important; }
  .qbn-quote-mark { left: 14px !important; font-size: 80px !important; }
  .qbn-tl-item { grid-template-columns: 50px 1fr !important; gap: 16px !important; padding-bottom: 30px !important; }
  .qbn-tl-marker { width: 50px !important; height: 50px !important; font-size: 16px !important; }
  .qbn-tl-line { left: 24px !important; top: 50px !important; }

  /* Story page */
  .story-hero { padding: 100px 18px 50px !important; }
  .story-hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .story-hero-right { height: 320px !important; max-width: 380px !important; margin: 0 auto !important; }
  .story-polaroid { width: 170px !important; padding: 10px 10px 32px !important; }
  .story-polaroid-cap { font-size: 14px !important; }
  .story-handwrite { font-size: 18px !important; }
  .story-hero-meta { grid-template-columns: 1fr 1fr !important; }
  .story-chapters { padding: 60px 18px !important; }
  .story-chapter, .story-chapter-rev {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 60px !important;
  }
  .story-ch-year {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    position: static !important;
    font-size: 48px !important;
  }
  .story-values, .story-signature { padding: 60px 18px !important; }
  .story-sig-inner { padding: 36px 20px !important; }

  /* Delivery page */
  .del-hero { padding: 110px 18px 50px !important; }
  .del-hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .del-hero-title { font-size: clamp(32px, 8vw, 52px) !important; }
  .del-hero-right { max-width: 380px !important; margin: 0 auto !important; }
  .del-float-temp, .del-float-time { padding: 10px 14px !important; }
  .del-float-num { font-size: 18px !important; }
  .del-pc-field { flex-wrap: wrap !important; padding: 6px !important; }
  .del-pc-field > svg { display: none !important; }
  .del-pc-btn { width: 100% !important; justify-content: center !important; }
  .del-zones, .del-coldchain, .del-schedule, .del-faq, .del-cta { padding: 60px 18px !important; }
  .del-zones-grid { grid-template-columns: 1fr !important; }
  .del-chain { grid-template-columns: 1fr !important; gap: 14px !important; }
  .del-chain-arrow { transform: rotate(90deg) !important; }
  .del-options { grid-template-columns: 1fr !important; }
  .del-cta-inner { grid-template-columns: 1fr !important; padding: 28px 20px !important; text-align: center !important; }
  .del-cta-actions { align-items: center !important; }

  /* Shop page */
  .shop-hero { padding: 100px 18px 50px !important; }
  .shop-hero-title { font-size: clamp(38px, 9vw, 60px) !important; }
  .shop-hero-stats { flex-direction: column !important; gap: 16px !important; padding: 18px 20px !important; }
  .shs-divider { display: none !important; }
  .shs { flex-direction: row !important; align-items: baseline !important; gap: 12px !important; width: 100% !important; }
  .shs strong { font-size: 26px !important; }
  .shop-cats { padding: 60px 18px !important; gap: 70px !important; }
  .shop-cta { padding: 0 18px 60px !important; }
  .shop-cta-inner { padding: 28px 20px !important; text-align: center !important; }
  .shop-cta-right { align-items: center !important; }

  /* Thank you page */
  .ty { padding: 40px 18px 60px !important; }
  .ty-cards { grid-template-columns: 1fr !important; }
  .ty-check { width: 70px !important; height: 70px !important; }
  .ty-title { font-size: clamp(32px, 8vw, 56px) !important; }
  .ty-recap, .ty-next { padding: 22px 18px !important; }
  .ty-actions { flex-direction: column !important; gap: 12px !important; }
  .ty-btn-primary, .ty-btn-ghost { justify-content: center !important; }
}

/* ---------- SMALL MOBILE (max 600px) ---------- */
@media (max-width: 600px) {
  .hero { padding: 90px 14px 120px !important; }
  .hero-title { font-size: clamp(32px, 9vw, 44px) !important; }
  .hero-sub { font-size: 13px !important; }
  .hero-meta { grid-template-columns: 1fr 1fr !important; gap: 12px 14px !important; }
  .meta-num { font-size: 24px !important; }
  .btn-primary, .btn-ghost { padding: 11px 16px !important; font-size: 11px !important; }
  .btn-text { font-size: 12px !important; }
  .btn-ghost span:last-child { font-size: 12px !important; }

  /* Cards stack better */
  .cat-meta { grid-template-columns: 1fr !important; }
  .footer-cols { grid-template-columns: 1fr !important; gap: 22px !important; }

  /* Cart drawer takes full screen with safe padding */
  .cart-head { padding: 18px 18px !important; }
  .cart-foot { padding: 16px 18px 20px !important; }
  .cart-item { padding: 12px 8px !important; grid-template-columns: 60px 1fr auto !important; gap: 10px !important; }
  .cart-item-img { width: 60px !important; height: 60px !important; }

  /* Story polaroids smaller */
  .story-hero-right { height: 280px !important; }
  .story-polaroid { width: 150px !important; }

  /* Section heads further tightened */
  .section-head h2,
  .section-title, .sec-title { font-size: clamp(24px, 8vw, 34px) !important; }

  /* Stats bars */
  .stats-bar { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}

/* ============================================================
   GLOBAL OVERFLOW + BOX-SIZING SAFETY (final layer)
   ============================================================ */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Make sure cart drawer + search overlay + mega menu don't break layout */
.cart-drawer, .search-overlay, .mega-menu { max-width: 100vw; }

/* ============================================================
   HERO RESPONSIVE FIT — make sure eyebrow pill + title + buttons +
   sub-text + meta numbers all stay visible at every viewport.
   Three tiers based on viewport HEIGHT (more reliable than width
   for the "does it fit?" question on laptops).
   ============================================================ */

/* ---------- LAPTOP (≤900 px tall) — most common laptops 1366×768, 1440×900 ---------- */
@media (min-width: 901px) and (max-height: 900px) {
  .hero {
    padding: 110px 40px 90px;
    min-height: 0;
    max-height: none;
  }
  .hero-title {
    font-size: clamp(40px, 5.4vw, 84px);
    margin-bottom: 28px;
  }
  .hero-eyebrow {
    margin-bottom: 24px;
    padding: 6px 14px;
    font-size: 10px;
  }
  .hero-actions {
    margin-bottom: 24px;
    gap: 12px;
  }
  .btn-primary, .btn-ghost {
    padding: 13px 22px;
    font-size: 13px;
  }
  .hero-bottom {
    margin-bottom: 22px;
  }
  .hero-sub {
    font-size: 15px;
    line-height: 1.55;
  }
  .hero-meta {
    gap: 40px;
    padding-top: 18px;
    max-width: 720px;
  }
  .meta-num { font-size: 46px; }
  .meta-label { font-size: 10px; }
  .hero-scroll { display: none; }   /* free up the bottom strip for dots */
}

/* ---------- SHORT LAPTOP (≤760 px tall) — older 1366×768 with browser chrome ---------- */
@media (min-width: 901px) and (max-height: 760px) {
  .hero {
    padding: 100px 36px 80px;
  }
  .hero-title {
    font-size: clamp(36px, 4.6vw, 68px);
    margin-bottom: 22px;
  }
  .hero-eyebrow {
    margin-bottom: 18px;
  }
  .hero-actions { margin-bottom: 18px; }
  .hero-bottom { margin-bottom: 16px; }
  .hero-sub { font-size: 14px; max-width: 440px; }
  .hero-meta {
    gap: 32px;
    padding-top: 14px;
  }
  .meta-num { font-size: 38px; }
}

/* ---------- VERY SHORT (≤640 px tall) — rare laptops/tablets in landscape ---------- */
@media (min-width: 901px) and (max-height: 640px) {
  .hero { padding: 90px 32px 76px; }
  .hero-title { font-size: clamp(32px, 4vw, 56px); margin-bottom: 18px; }
  .hero-eyebrow { margin-bottom: 14px; }
  .meta-num { font-size: 32px; }
  .hero-meta { gap: 24px; padding-top: 12px; }
}

/* On laptop viewports the floating product cards on the right can crowd the
   text. Pull them in slightly and reduce their size at narrower widths so the
   title doesn't get pushed off-screen vertically. */
@media (min-width: 901px) and (max-width: 1400px) {
  .hero-visual {
    right: 24px;
    width: 420px;
    height: 420px;
  }
}
@media (min-width: 901px) and (max-width: 1200px) {
  /* The CSS earlier hides .hero-visual at ≤1200px. Keep that behaviour but
     give the text more horizontal room. */
  .hero-content { max-width: 100%; }
}