/* Capital Fireworks — customer site
   Palette matches the logo: patriotic navy + bright firework red, white paper.
   Gold is reserved for the literal firework-burst animation only. */
:root {
  --red:      #D4202A;
  --red-dark: #A8121C;
  --navy:     #1B2A5C;
  --navy-2:   #2B3C7A;
  --accent-spark: #F7C948;
  --ink:      #15151A;
  --paper:    #FFFFFF;
  --paper-2:  #F7F4ED;
  --muted:    #6F7280;
  --ok:       #1E8F4A;
  --warn:     #D4202A;
  --low:      #D97706;
  --line:     #E4E4EC;
  --radius:   10px;
  --shadow:   0 4px 16px rgba(27,42,92,.10);
}
* { box-sizing: border-box; }
html,body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color: var(--ink); background: var(--paper); }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { font-family: Georgia, 'Times New Roman', serif; color: var(--navy); }
h1 { font-size: 2.2rem; margin: .4em 0; }
h2 { font-size: 1.5rem; margin: 1em 0 .4em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; color: var(--muted); }
.lead { font-size: 1.15rem; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* Global guard: never let horizontal overflow trigger iOS shrink-to-fit. */
html, body { overflow-x: hidden; max-width: 100vw; }


/* ===== Header (white) ===== */
.site-header.light { background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 2px 8px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 50; }
.site-header.light .header-row { display: flex; align-items: center; gap: 18px; padding: 10px 18px; max-width: 1280px; margin: 0 auto; }
.brand { display: block; line-height: 0; }
.brand-logo { height: 70px; width: auto; display: block; }
.site-header.light .nav-main { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; margin-left: 14px; }
.site-header.light .nav-main a { color: var(--navy); font-weight: 600; font-size: .95rem; padding: 4px 0; }
.site-header.light .nav-main a:hover { color: var(--red); text-decoration: none; }
.site-header.light .nav-main a.hot { color: var(--red); }
.site-header.light .help-pick { color: var(--red); font-weight: 700; padding: 8px 14px; border: 1.5px solid transparent; border-radius: 6px; font-size: .95rem; }
.site-header.light .help-pick:hover { background: var(--red); color: #fff; text-decoration: none; }
.cart-pill { background: var(--red); color: #fff; padding: 9px 18px; border-radius: 999px; font-weight: bold; font-size: .9rem; }
.cart-pill:hover { background: var(--red-dark); text-decoration: none; color: #fff; }

/* Hamburger (hidden on desktop) */
.hamburger { display: none; width: 44px; height: 44px; background: transparent; border: 0; padding: 0; cursor: pointer; flex-direction: column; gap: 5px; justify-content: center; align-items: center; }
.hamburger span { display: block; width: 24px; height: 3px; background: var(--navy); border-radius: 2px; transition: transform .2s, opacity .2s; }
body.nav-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Closed (off-season) banner */
.closed-banner { background: var(--accent-spark); color: var(--navy); text-align: center; padding: 8px 16px; font-weight: 600; font-size: .9rem; }
.closed-banner a { color: var(--navy); }

/* ===== Hero ===== */
.hero { position: relative; padding: 40px 0; background: var(--paper); }
.hero-inner { max-width: 1180px; margin: 0 auto; padding: 0 18px; display: grid; grid-template-columns: 1.2fr 1.4fr; gap: 30px; align-items: center; width: 100%; }
.hero-text h1 { font-size: 2.4rem; line-height: 1.1; margin: 0 0 14px; }
.hero-text .accent { color: var(--red); }
.hero-cta { margin: 18px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== Buttons ===== */
.btn { display: inline-block; padding: 12px 22px; border-radius: var(--radius); font-weight: 600; border: none; cursor: pointer; font-size: 1rem; font-family: inherit; min-height: 44px; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); text-decoration: none; color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; text-decoration: none; }
.block { display: block; width: 100%; text-align: center; margin-top: 14px; }

/* ===== Category strip ===== */
.cat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 16px 18px; max-width: 1180px; margin: 0 auto; }
.cat-tile { background: var(--navy); color: #fff; padding: 22px 16px; border-radius: var(--radius); text-align: center; font-weight: 600; font-size: 1rem; }
.cat-tile:hover { background: var(--red); text-decoration: none; color: #fff; }

/* ===== Product grid ===== */
.product-grid {
  display: grid;
  /* min(100%, 220px) drops to 1 column on tiny screens instead of overflowing */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 18px;
  padding: 12px 18px 36px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
.product-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--ink);
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  /* Prevent long text or prices from forcing the card wider than its grid column */
  min-width: 0;
  overflow-wrap: break-word;
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.product-img {
  width: 100%;
  /* aspect-ratio scales image proportionally vs. fixed 160px */
  aspect-ratio: 4 / 3;
  height: auto;
  background: #f0eada center/cover no-repeat;
  border-radius: 8px;
  margin-bottom: 8px;
}
.product-card h3 { margin: 4px 0; font-size: 1rem; color: var(--ink); }
.product-card .row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.price { color: var(--red); font-weight: 700; font-size: 1.1rem; }
.price.big { font-size: 1.8rem; }
.badge { font-size: .75rem; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.badge.ok { background: #d8f1de; color: var(--ok); }
.badge.warn { background: #fbdada; color: var(--warn); }
.badge.low { background: #fde9c4; color: var(--low); }
.product-card .new-flag { position: absolute; top: 8px; right: 8px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* ===== Info cards row ===== */
.info-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding: 30px 18px; max-width: 1180px; margin: 0 auto; }
.info-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.info-card h3 { margin-top: 0; color: var(--navy); }

/* ===== Shop layout ===== */
.shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 18px; max-width: 1180px; margin: 0 auto; }
.shop-side .search { display: flex; gap: 4px; margin-bottom: 14px; }
.shop-side .search input { flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.shop-side .search button { padding: 8px 12px; background: var(--navy); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.cat-nav { display: flex; flex-direction: column; gap: 2px; }
.cat-nav a { padding: 8px 10px; border-radius: 6px; color: var(--ink); }
.cat-nav a.active, .cat-nav a:hover { background: var(--navy); color: #fff; text-decoration: none; }

/* ===== Product detail ===== */
.crumbs { padding: 12px 18px; color: var(--muted); font-size: .9rem; max-width: 1180px; margin: 0 auto; }
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 12px 18px 40px; max-width: 1180px; margin: 0 auto; }
.pd-img { background: #f0eada center/contain no-repeat; min-height: 380px; border-radius: var(--radius); border: 1px solid var(--line); }
.pd-media { width: 100%; }
.pd-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.pd-video iframe, .pd-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.pd-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.chip { background: #efeae0; padding: 4px 10px; border-radius: 999px; font-size: .85rem; }
.add-form { display: flex; gap: 10px; align-items: end; margin: 14px 0; }
.add-form input[type=number] { width: 80px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }

/* ===== Cart / Checkout ===== */
.cart-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.cart-table th, .cart-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.qty-input { width: 70px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; }
.cart-actions { display: flex; gap: 10px; margin: 14px 0; }
.cart-summary { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 14px; max-width: 380px; margin-left: auto; }
.cart-summary div { display: flex; justify-content: space-between; padding: 4px 0; }
.cart-summary .total { font-size: 1.2rem; font-weight: 700; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }

.checkout label { display: block; margin: 10px 0; }
.checkout label.check { display: flex; gap: 8px; align-items: flex-start; }
.checkout input[type=text], .checkout input[type=email], .checkout input[type=tel], .checkout input[type=date] {
  display: block; width: 100%; max-width: 420px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; margin-top: 4px;
}
.co-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; padding: 0 18px; max-width: 1180px; margin: 0 auto; }
.co-list { list-style: none; padding: 0; margin: 0; }
.co-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.co-totals { margin-top: 12px; }
.co-totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.co-totals .total { font-weight: 700; font-size: 1.2rem; border-top: 1px solid var(--line); padding-top: 8px; }
.pay-tabs { display: flex; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.pay-opt { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; cursor: pointer; }
.pay-pane { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 10px 0; }
.hidden { display: none; }

/* ===== Confirmation ===== */
.confirm { background: #fff; border-left: 6px solid var(--ok); padding: 24px; border-radius: var(--radius); margin: 24px 18px; max-width: 1180px; }

/* ===== Footer ===== */
.site-footer { background: var(--navy); color: #e9e4d4; margin-top: 40px; padding: 30px 0 18px; }
.footer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 0 18px 18px; border-bottom: 1px solid #2a3a66; }
.site-footer a { color: var(--accent-spark); }
.site-footer .small { color: #b8b1a0; padding: 12px 18px 0; }

/* ===== Flash messages ===== */
.flash { padding: 10px 14px; border-radius: 8px; margin: 10px 18px; max-width: 1180px; }
.flash-info { background: #e1ecff; color: #1b3a8f; }
.flash-ok   { background: #d8f1de; color: var(--ok); }
.flash-warn { background: #fbdada; color: var(--warn); }

/* ===== Age gate ===== */
.age-gate { position: fixed; inset: 0; background: rgba(14,26,58,.92); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.age-gate.hidden { display: none; }
.age-gate-card { background: #fff; border-radius: 14px; padding: 28px; max-width: 420px; text-align: center; }
.age-gate-card h2 { margin-top: 0; }
.age-gate-card form { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

/* ===== Info pages (About / Safety / Pickup) ===== */
.info-page { max-width: 780px; margin: 30px auto; padding: 0 18px; }
.info-page h1 { font-size: 2.2rem; margin: 0 0 6px; color: var(--navy); }
.info-page h2 { font-size: 1.3rem; margin: 1.6em 0 .5em; color: var(--red); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.info-page p, .info-page li { line-height: 1.6; color: var(--ink); }
.info-page .lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 24px; font-style: italic; }
.info-page ul, .info-page ol { padding-left: 22px; }
.info-page li { margin: 8px 0; }
.info-page a { color: var(--red); }

/* ===== Quiz (Help Me Pick) ===== */
.quiz-shell { max-width: 760px; margin: 30px auto; padding: 30px 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 24px rgba(14,26,58,.08); }
.quiz-progress { height: 6px; background: #eee; border-radius: 99px; overflow: hidden; margin-bottom: 24px; }
.quiz-progress #quiz-bar { display: block; height: 100%; background: var(--red); width: 0%; transition: width .25s; }
.quiz-q { font-family: Georgia,serif; color: var(--navy); font-size: 1.5rem; margin: 0 0 6px; }
.quiz-sub { color: var(--muted); margin: 0 0 22px; font-size: .95rem; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-opt { padding: 18px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; text-align: left; font-size: 1rem; transition: all .15s; font-family: inherit; }
@media (hover: hover) { .quiz-opt:hover { border-color: var(--red); background: #fff7f7; } }
.quiz-opt .lbl { font-weight: 700; color: var(--navy); display: block; margin-bottom: 4px; }
.quiz-opt .desc { color: var(--muted); font-size: .85rem; }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 22px; align-items: center; }
.quiz-back { background: none; border: none; color: var(--muted); cursor: pointer; font-family: inherit; font-size: .9rem; text-decoration: underline; }
.quiz-step { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.quiz-result h2 { font-family: Georgia,serif; color: var(--navy); font-size: 1.8rem; margin: 0 0 6px; }
.quiz-result .badge-fit { display: inline-block; background: var(--red); color: #fff; padding: 4px 10px; border-radius: 99px; font-size: .8rem; font-weight: 700; margin-bottom: 18px; letter-spacing: .04em; }
.quiz-result .mix-list { margin: 18px 0; border-top: 1px solid var(--line); }
.quiz-result .mix-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.quiz-result .mix-row .pname { font-weight: 600; color: var(--navy); }
.quiz-result .mix-row .pcat { color: var(--muted); font-size: .85rem; }
.quiz-result .mix-row .pqty { color: var(--muted); font-size: .85rem; margin-right: 14px; }
.quiz-result .mix-row .pprice { color: var(--red); font-weight: 700; min-width: 80px; text-align: right; }
.quiz-result .mix-total { display: flex; justify-content: space-between; padding: 14px 0; font-size: 1.2rem; font-weight: 700; color: var(--navy); border-top: 2px solid var(--navy); }
.quiz-result .mix-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ===== Responsive — phone (<= 720px) ===== */
@media (max-width: 720px) {
  .hamburger { display: flex; }
  input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=password], input[type=date], select, textarea { font-size: 16px; }
  .site-header.light .header-row { flex-wrap: wrap; padding: 8px 14px; }
  .brand-logo { height: 48px; }
  .site-header.light .nav-main { display: none; flex-basis: 100%; flex-direction: column; gap: 0; margin: 8px -14px 0; padding: 6px 14px 10px; border-top: 1px solid var(--line); }
  body.nav-open .site-header.light .nav-main { display: flex; }
  .site-header.light .nav-main a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .site-header.light .nav-main a:last-child { border-bottom: 0; }
  /* Mobile: header Help Me Pick stays inside the hamburger; the visible
     entry point lives on the shop page next to the category filter
     (.cat-nav-help) where customers actually feel overwhelmed. */
  .site-header.light .help-pick { display: none; }
  body.nav-open .site-header.light .help-pick { display: block; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); text-align: left; border-radius: 0; }
  body.nav-open .site-header.light .help-pick:hover { background: transparent; color: var(--red-dark); }

  .hero { padding: 24px 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 18px; padding: 0 14px; }
  .hero-text h1 { font-size: 1.7rem; }
  .hero-text p { font-size: .95rem; }
  .hero-video { order: -1; }
  .hero-cta { flex-wrap: wrap; }
  .hero-cta .btn { flex: 1; min-width: 140px; }

  .cat-strip { grid-template-columns: 1fr 1fr; padding: 14px; gap: 8px; }
  .cat-tile { padding: 18px 12px; font-size: .95rem; }

  /* min(100%, 150px) safely allows 2 columns on most phones but auto-collapses to 1 column on extremely narrow phones. Combined with min-width:0 on .product-card (set globally), this fully prevents the grid blowout we hit earlier. */
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; padding: 12px 14px 36px; }
  .shop-main { min-width: 0; max-width: 100%; }
  .shop-side { min-width: 0; max-width: 100%; }
  .shop-layout { min-width: 0; max-width: 100%; }
  .product-card h3 { font-size: .95rem; }
  .product-img { height: auto; }  /* let aspect-ratio do the work */

  .shop-layout { grid-template-columns: 1fr; gap: 14px; padding: 12px 0 14px; }

  /* Search bar full width, large enough font-size to keep iOS Safari from zooming on tap. */
  .shop-side { padding: 0 14px; }
  .shop-side .search input { font-size: 16px; padding: 10px 12px; }
  .shop-side .search button { padding: 10px 16px; font-weight: 600; }

  /* Category nav becomes a WRAPPED pill cluster so every filter is visible at a glance.
     Replaced horizontal scroll (where users couldn't see scrollbar and missed half the pills). */
  .shop-side .cat-nav {
    flex-direction: row;
    flex-wrap: wrap;       /* pills drop to next line instead of pushing off the edge */
    gap: 8px;              /* even spacing between rows and columns */
    padding: 4px 0 10px;
    margin: 8px 0 0;
    max-width: 100%;
  }
  .shop-side .cat-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;     /* slightly tighter so more fit per line */
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }
  .shop-side .cat-nav a.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
  }
  /* Override the inherited desktop hover so the pill doesn't get stuck navy after tap on iOS */
  .shop-side .cat-nav a:hover { background: var(--paper-2); color: var(--ink); }
  .shop-side .cat-nav a.active:hover { background: var(--navy); color: #fff; }

  .shop-main { padding: 0 14px; }
  .shop-main h1 { margin: 6px 0 4px; font-size: 1.5rem; }
  .product-detail { grid-template-columns: 1fr; gap: 18px; padding: 12px 14px 30px; }
  .pd-img { min-height: 240px; }

  .info-row { grid-template-columns: 1fr; padding: 18px 14px; }
  .info-page { padding: 0 14px; margin: 18px auto; }
  .info-page h1 { font-size: 1.7rem; }
  .info-page h2 { font-size: 1.15rem; }

  .co-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 14px; }
  .cart-summary { max-width: 100%; }
  .pay-tabs { flex-direction: column; }
  .pay-opt { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 14px; text-align: left; padding: 0 14px 18px; }

  .quiz-options { grid-template-columns: 1fr; }

  /* ===== Product detail page on phone ===== */
  .pd-meta { gap: 6px; row-gap: 8px; }
  .chip { font-size: .8rem; padding: 3px 8px; }
  .add-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
  .add-form > label { flex: 0 0 auto; }
  .add-form > button { flex: 1 1 100%; padding: 14px; font-size: 1.05rem; min-height: 48px; }
  .add-form input[type=number] { width: 84px; padding: 10px; }

  /* ===== Cart table -> card layout on phone ===== */
  .cart-table { display: block; border: 0; }
  .cart-table thead { display: none; }
  .cart-table tbody, .cart-table tr { display: block; }
  .cart-table tr {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin: 0 0 12px;
  }
  .cart-table td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border: 0; gap: 12px;
  }
  .cart-table td:first-child {
    display: block; padding: 0 0 10px;
    border-bottom: 1px solid var(--line); margin-bottom: 4px;
  }
  .cart-table td:nth-child(2)::before { content: 'Price'; color: var(--muted); font-size: .85rem; }
  .cart-table td:nth-child(3)::before { content: 'Qty';   color: var(--muted); font-size: .85rem; }
  .cart-table td:nth-child(4)::before { content: 'Total'; color: var(--muted); font-size: .85rem; font-weight: 700; }
  .qty-input { width: 80px; padding: 10px 8px; font-size: 16px; text-align: center; }

  /* Cart summary: full width, normal margin */
  .cart-summary { margin: 14px 0 0; padding: 16px; }
  .cart-summary .total { font-size: 1.25rem; }
  .cart-summary .btn.block { padding: 16px; font-size: 1.05rem; min-height: 50px; }

  /* Update + Empty cart actions: stack so neither gets squeezed */
  .cart-actions { flex-wrap: wrap; gap: 8px; }
  .cart-actions .btn { flex: 1 1 calc(50% - 4px); padding: 12px; font-size: .95rem; }

  /* ===== Checkout / Preorder forms ===== */
  .checkout label { display: block; margin-bottom: 12px; }
  .checkout input[type=text],
  .checkout input[type=email],
  .checkout input[type=tel],
  .checkout input[type=date] {
    width: 100%; padding: 12px; font-size: 16px;
    border: 1px solid var(--line); border-radius: 6px; box-sizing: border-box;
  }
  .checkout label.check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
  .checkout label.check input { margin-top: 4px; flex: 0 0 auto; }
  .co-totals .total { font-size: 1.25rem; }
  .pay-opt { padding: 14px; border: 2px solid var(--line); border-radius: 8px; display: block; }
  .pay-opt input[type=radio] { margin-right: 8px; transform: scale(1.2); }

  /* Place-order / Reserve buttons: nice big tap target */
  .btn.block { padding: 16px; font-size: 1.05rem; min-height: 50px; }
}

/* ===== Responsive — tablet (721-1024 px) ===== */
@media (min-width: 721px) and (max-width: 1024px) {
  /* Tablet & phone-landscape: collapse the shop sidebar so it doesn't shrink-to-fit on iOS */
  .shop-layout { grid-template-columns: 1fr; gap: 16px; padding: 14px 0; }
  .shop-side { padding: 0 16px; }
  .shop-side .cat-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 4px 0 10px;
    margin: 8px 0 0;
  }
  .shop-side .cat-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 16px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }
  .shop-side .cat-nav a.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
  }
  .shop-side .cat-nav a:hover { background: var(--paper-2); color: var(--ink); }
  .shop-side .cat-nav a.active:hover { background: var(--navy); color: #fff; }
  .shop-main { padding: 0 16px; }

  .hero-text h1 { font-size: 2.1rem; }
  .cat-strip { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .site-header.light .nav-main a { font-size: .9rem; }
  .info-page { max-width: 680px; }
}

/* ===== Help Me Pick button inside the shop category nav =====
   Lives at the top of .cat-nav (desktop sidebar) and as the first pill
   in the mobile horizontal cat-nav scroll. Gold accent so it stands out
   from the navy/white category buttons without competing with the red CTA. */
.cat-nav-help {
  display: flex; align-items: center; gap: 6px;
  background: var(--red); color: #fff;
  font-weight: 700; padding: 9px 14px; border-radius: 999px;
  border: 0; text-decoration: none; white-space: nowrap;
  margin-bottom: 8px;
}
.cat-nav-help:hover { background: var(--red-dark); color: #fff; text-decoration: none; }

@media (max-width: 720px) {
  /* On mobile the cat-nav is a horizontal scroll of pills. Make the help
     button the leftmost pill so it's the first thing users see when they
     hit the shop, then they swipe right through the category pills. */
  .cat-nav-help {
    flex: 0 0 auto;
    margin: 0 6px 0 0;
    padding: 9px 14px;
    font-size: .92rem;
  }
}

/* ===== Home page Help Me Pick CTA =====
   Big red pill above the category strip, with subtext explaining the quiz.
   Mirrors the .cat-nav-help shop-page pill but bigger and centered for home. */
.home-help-pick-wrap {
  max-width: 1180px;
  margin: 18px auto 6px;
  padding: 0 18px;
  text-align: center;
}
.home-help-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
}
.home-help-pick:hover { background: var(--red-dark); color: #fff; text-decoration: none; }
.home-help-pick-wrap p { margin: 8px 0 0; }

@media (max-width: 720px) {
  .home-help-pick { padding: 12px 22px; font-size: 1rem; }
  .home-help-pick-wrap { margin: 14px auto 4px; }
}

/* ===== Quiz mix editable rows ===== */
.mix-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mix-row-info { flex: 1; min-width: 0; }
.mix-row-info .pname { font-weight: 600; color: var(--navy); }
.mix-row-info .pcat { color: var(--muted); font-size: .85rem; }
.mix-row-ctl { display: flex; align-items: center; gap: 10px; }
.mix-row-ctl .mix-qty-input {
  width: 56px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px;
  text-align: center; font-size: 1rem;
}
.mix-row-ctl .pprice { color: var(--red); font-weight: 700; min-width: 80px; text-align: right; }
.mix-row-ctl .mix-remove-btn {
  background: transparent; border: 0;
  font-size: 1.3rem; color: var(--muted);
  width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer;
  line-height: 1;
}
.mix-row-ctl .mix-remove-btn:hover { background: #fbdada; color: var(--red); }
@media (max-width: 720px) {
  .mix-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .mix-row-ctl { justify-content: space-between; }
  .mix-row-ctl .pprice { min-width: 0; }
}

/* ===== Help Me Pick sparklers (outside the button for contrast) =====
   The gold ✨ emoji is hard to read on the red pill background. Moving them
   outside the button puts them on the normal page background where the
   native color reads cleanly. Two sparklers — one each side — flank the
   button like fireworks framing a banner. */
.home-help-pick-row,
.cat-nav-help-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hmp-spark {
  font-size: 1.4rem;
  line-height: 1;
  user-select: none;
  display: inline-block;
}
.home-help-pick-row .hmp-spark { font-size: 1.8rem; }

@media (max-width: 480px) {
  /* Very narrow phones: hide one of the sparklers on the shop-page button
     so the pill doesn't push the category row off-screen. */
  .cat-nav-help-row .hmp-spark-r { display: none; }
}