/* ============================================================
   SNACK PAPER — Desktop layer (>=1024px)
   Progressive enhancement over the mobile-first design.
   Mobile is untouched (everything here is inside the media query).
   ============================================================ */
@media (min-width:1024px) {

  /* Widen the centered column into a real desktop canvas */
  .phone { max-width: 1760px !important; }

  /* ---- Header: 3-column grid, logo perfectly centered ---- */
  #hdr {
    padding: 24px 48px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: initial;
  }
  .hdr-logo { text-decoration: none; grid-column: 2; justify-self: center; }
  .hdr-logo-img { height: 49px; }
  .ham { display: none; }
  .sp-desknav { display: flex; }
  .sp-desknav-left { grid-column: 1; justify-self: end; margin-right: 56px; }
  .hdr-right-group { grid-column: 3; justify-self: stretch; width: 100%; display: flex; align-items: center; justify-content: space-between; }
  .sp-desknav-right { justify-self: start; margin-left: 56px; }
  .sp-desknav-ul { display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
  .sp-desknav-ul li { margin: 0; }
  .sp-desknav-ul li a,
  .sp-desknav > a {
    display: block;
    color: var(--k);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .sp-desknav-ul li a:hover,
  .sp-desknav > a:hover,
  .sp-desknav-ul li.current-menu-item > a,
  .sp-desknav-ul li.current_page_item > a {
    border-bottom-color: var(--k);
  }
  .hdr-right { gap: 24px; }

  /* ---- Trust strip ---- */
  .trust { max-width: 1600px; margin: 0 auto; }

  /* ---- Hero (centered editorial, larger) — "SNACK PAPER" now on its own line, much bigger ---- */
  .np-paper { max-width: 900px; margin: 0 auto; padding: 64px 44px; }
  .np-kicker { font-size: 10px; }
  .np-headline { font-size: 44px; line-height: 1.1; margin-bottom: 18px; }
  .np-headline .neo { display: block; font-size: 70px; margin-top: 10px; line-height: 1; }
  .np-deck { font-size: 16px; line-height: 1.7; padding-bottom: 16px; margin-bottom: 20px; }
  .np-img-row { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
  .np-cta-row { gap: 14px; }
  .np-cta, .np-cta-o { padding: 14px 26px; font-size: 14px; }

  /* ---- Top Sellers + Heritage Box combined into one row, both shrunk down ---- */
  .np-combo { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; padding: 36px 44px; }
  .np-combo .spotlight,
  .np-combo .gift-box { max-width: none; margin: 0; height: 100%; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; }
  .np-combo .spotlight { padding: 22px 24px; border: 1px solid var(--bd); border-radius: 6px; }
  .np-combo .spotlight-title { font-size: 17px; }
  .np-combo .sp-grid { max-width: none; grid-template-columns: 1fr 1fr; gap: 14px; }
  .np-combo .sp-img { aspect-ratio: 1.1; }
  .np-combo .gift-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px 26px; max-width: none; margin: 0; box-sizing: border-box; }
  .np-combo .gift-cols { grid-template-columns: 160px auto; justify-content: center; gap: 32px; }
  .np-combo .gift-vid-wrap { max-width: 160px; margin: 0; }
  .np-combo .gift-features { max-width: 260px; }
  .np-combo .gift-headline { font-size: 24px; }
  .np-combo .gift-strip { max-width: none; }

  /* ---- "Our Story" section: center everything on desktop (mobile stays left-aligned) ---- */
  .story { padding: 60px 44px; text-align: center; }
  .sh { max-width: 720px; margin-left: auto; margin-right: auto; }
  .sp2 { max-width: 640px; margin-left: auto; margin-right: auto; }

  /* ---- Section spacing + headings ---- */
  .sec { max-width: 1600px; margin: 0 auto; padding: 44px 44px; }
  .srow { margin-bottom: 24px; }
  .stitle { font-size: 30px; }
  .ssub { font-size: 11px; }

  /* ---- Product grids: 4 across ---- */
  .pgrid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .pgrid-bestsellers .pcard:nth-child(n+7){display:flex}

  /* ---- Customer videos: keep the auto-scroll marquee, just size it up ---- */
  .videos, .more-vids { max-width: 1600px; margin: 0 auto; }
  .vid-hdr, .more-vids-hdr { padding: 0 44px; }
  .vid-track { padding: 0 44px 6px; gap: 16px; }
  .vid-card { width: 190px; }

  /* ---- Categories: wrap into a centered grid, real product panels 4 across ---- */
  .cats { max-width: 1600px; margin: 0 auto; padding-bottom: 12px; }
  .cats-hdr { padding: 0 44px; }
  .catsc { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 34px; padding: 4px 44px 28px; overflow: visible; }
  .cat-panel { margin: 0 44px; border-radius: 6px; }
  .cat-panel.open { max-height: 900px; }
  .cat-panel-inner { max-height: 820px; padding: 24px; }
  .cp-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }

  /* ---- Footer: center the brand block, links grid, and legal row on desktop (mobile untouched) ---- */
  .ftr { padding: 54px 44px; text-align: center; }
  .flogo { margin: 0 auto 10px; display: flex; justify-content: center; }
  .ftag { text-align: center; }
  .fmigr { text-align: center; }
  .fsocial { width: fit-content; margin: 0 auto 18px; }
  .fwa { max-width: 340px; margin: 0 auto 20px; justify-content: center; }
  .flinks { width: fit-content; margin: 0 auto 18px; justify-content: center; text-align: left; }
  .fdiv { max-width: 900px; margin: 18px auto; }
  .fmeta { display: flex; align-items: center; justify-content: space-between; max-width: 900px; margin: 0 auto; flex-wrap: nowrap; }
  .fmeta span { display: inline; }
  .fmeta-fssai::after, .fmeta-copy::after { content: ""; }
  .fmeta-fssai { order: 1; text-align: left; }
  .fmeta-copy { order: 2; text-align: center; }
  .fmeta-email { order: 3; text-align: right; }

  /* ---- Hide the mobile bottom tab bar; it's replaced by the header on desktop ---- */
  .sticky-bottom { display: none !important; }
  .phone-scroll { padding-bottom: 0 !important; }
}