/* Hartley's Potato Chips mockup: ONE shared stylesheet for every page. */
@layer base {
      html, body { margin: 0; padding: 0; }
      body { overscroll-behavior: none; }
    }
    ::-webkit-scrollbar { display: none; }
@keyframes cartBounce {
  0% { transform: scale(1); }
  25% { transform: scale(0.92); }
  50% { transform: scale(1.08); }
  75% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.cart-bounce-active {
  animation: cartBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes toastSlideIn {
  0% {
    transform: translateY(24px) scale(0.94);
    opacity: 0;
  }
  60% {
    transform: translateY(-4px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes toastSlideOut {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(16px) scale(0.94);
    opacity: 0;
  }
}
@keyframes badgePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.toast-enter {
  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast-exit {
  animation: toastSlideOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.badge-pop-active {
  animation: badgePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cart-bounce-active,
  .toast-enter,
  .toast-exit,
  .badge-pop-active {
    animation: none !important;
  }
}

/* ---------- Layout tokens ---------- */
:root { --header-offset: 7.125rem; }          /* phone: 2-line announcement bar (50px) + 64px header; js/hartleys.js syncs it to the real height below 1024px */
@media (min-width: 640px)  { :root { --header-offset: 6.5rem; } }
@media (min-width: 1024px) { :root { --header-offset: 7rem; } } /* desktop: same as Stitch pt-28 */

/* ---------- Hometown Heroes earn tiles: icon-left row layout on phones/tablets (matches Stitch mobile screen) ---------- */
.earn-icon-img { width: 44px; height: 44px; object-fit: contain; }
@media (max-width: 1023.98px) {
  .earn-tile { display: grid !important; grid-template-columns: 44px 1fr auto; column-gap: 12px; row-gap: 4px; align-items: start; padding: 14px 16px !important; }
  .earn-head, .earn-body { display: contents !important; }
  .earn-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; background: none !important; box-shadow: none !important; }
  .earn-title { grid-column: 2; grid-row: 1; align-self: center; margin: 0 !important; }
  .earn-badge { grid-column: 3; grid-row: 1; align-self: center; white-space: nowrap; }
  .earn-desc { grid-column: 2 / span 2; grid-row: 2; }
  .earn-icon-plain { background: none !important; box-shadow: none !important; }
}

/* Small badge/label text: 12px minimum on phones and tablets, Stitch's 11px at desktop */
.text-badge { font-size: 12px; }
@media (min-width: 1024px) { .text-badge { font-size: 11px; } }

/* ---------- Product cards: button sits at the card bottom so buttons line up across a row (all widths) ---------- */
.product-card { display: flex; flex-direction: column; }
.product-card__cta { margin-top: auto; }
@media (max-width: 1279.98px) {
  /* below 1280 a name can wrap: reserve 2 lines so pack size and price also line up (1280+ names fit on 1 line) */
  .product-card__title { min-height: calc(2em * 1.375); }
}

/* ---------- Announcement bar on phones: balanced, centered wrap; decorative dots hidden ---------- */
.announcement-text { text-wrap: balance; }
@media (max-width: 639.98px) {
  .announcement-dot { display: none; }
}

/* ---------- Phone/tablet tap targets: at least 44px, without changing visible size ---------- */
@media (max-width: 1023.98px) {
  /* invisible hit area centered on the link; layout and look unchanged */
  .tap-44 { position: relative; }
  .tap-44::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  /* footer link lists and legal links: each row is a 44px tap row (no overlapping hit areas) */
  .footer-links > li { margin-top: 0 !important; }
  .footer-links { margin-block: -13px; }  /* keep the old gap to the heading and below the list (13px = (44 - 18) / 2) */
  .footer-links a { display: flex; align-items: center; min-height: 44px; }
  .footer-legal { row-gap: 0 !important; margin-block: -14px; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-newsletter input, .footer-newsletter button { min-height: 44px; }
}

/* ==== Lewistown frame (wide screens, 1440px and wider only) ====
   Chosen layout from options/wide-c (2026-10-26). Active when <html> has class "lewistown-frame".
   Mild fluid type (16px at 1440 to 18px at 1920+), containers to 88rem, map texture fills the side
   margins of the light sections, hero and Hometown Heroes banner blend frameless into the background.
   Below 1440px nothing here applies. */
@media (min-width: 1440px) {
  html.lewistown-frame { font-size: clamp(16px, calc(10px + 0.4167vw), 18px); }   /* 16px at 1440, 18px at 1920 and up */
  .lewistown-frame [data-section] .max-w-7xl { max-width: 88rem; }
  .lewistown-frame .earn-title { font-size: 1.0625rem !important; }
  .lewistown-frame .text-badge { font-size: 0.6875rem; }

  /* Hero: texture edge to edge, image blended */
  .lewistown-frame [data-section="hero"] { background: #FCF0D7 url(../img/lewistown-map-bg.png) center top / cover no-repeat; }
  .lewistown-frame [data-section="hero"] > div { background: transparent; }
  .lewistown-frame [data-section="hero"] .max-w-\[1376px\] { max-width: none; overflow: visible; display: flex; justify-content: center; }
  .lewistown-frame [data-section="hero"] img { width: auto !important; max-width: min(100%, 96rem) !important; max-height: calc(100vh - 7rem); margin: 0 auto !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); }

  /* Light sections: map texture in the margins, fading out before the content */
  .lewistown-frame [data-section="shop-by-category"], .lewistown-frame [data-section="family-favorites"], .lewistown-frame [data-section="stay-in-touch"], .lewistown-frame [data-section="flavor-of-lewistown"] { position: relative; isolation: isolate; }
  .lewistown-frame [data-section="shop-by-category"]::before, .lewistown-frame [data-section="family-favorites"]::before, .lewistown-frame [data-section="stay-in-touch"]::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url(../img/lewistown-map-bg.png) center top / 1536px auto repeat; opacity: 0.55;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 46rem), transparent calc(50% - 38rem), transparent calc(50% + 38rem), #000 calc(50% + 46rem), #000 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 46rem), transparent calc(50% - 38rem), transparent calc(50% + 38rem), #000 calc(50% + 46rem), #000 100%); }
  .lewistown-frame [data-section="flavor-of-lewistown"] > div:first-child img { opacity: 0.22; }  /* the existing map layer, stronger toward the edges */
  .lewistown-frame [data-section="flavor-of-lewistown"] > div:first-child {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 46rem), rgba(0,0,0,.35) calc(50% - 38rem), rgba(0,0,0,.35) calc(50% + 38rem), #000 calc(50% + 46rem), #000 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 46rem), rgba(0,0,0,.35) calc(50% - 38rem), rgba(0,0,0,.35) calc(50% + 38rem), #000 calc(50% + 46rem), #000 100%); }

  /* Hometown Heroes: blurred scene fills the navy margins, banner edges fade into it */
  .lewistown-frame [data-section="hometown-heroes"] .max-w-\[1376px\]:not(img) { max-width: none; overflow: visible; isolation: isolate; }
  .lewistown-frame [data-section="hometown-heroes"] .max-w-\[1376px\]:not(img)::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: url(../img/heroes-banner-historic-to-heroic.jpg) center / cover no-repeat; filter: blur(42px) saturate(0.9); opacity: 0.55; transform: scale(1.08); }
  .lewistown-frame [data-section="hometown-heroes"] img.max-w-\[1376px\] { max-width: 92rem; width: 100%; max-height: 820px; object-fit: cover; object-position: center top;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%); }
}

/* scale fixed-px text with the root font size (1440px and wider only) */
@media (min-width: 1440px) {
  /* px-sized text from the base page, re-expressed in rem so it scales with the root size */
  .lewistown-frame [data-section] .text-\[13px\] { font-size: 0.8125rem; }
  .lewistown-frame [data-section] .text-\[14px\] { font-size: 0.875rem; }
  .lewistown-frame [data-section] .text-\[15px\] { font-size: 0.9375rem; }
  .lewistown-frame [data-section] .text-\[16px\] { font-size: 1rem; }
  .lewistown-frame [data-section] .text-\[17px\] { font-size: 1.0625rem; }
  .lewistown-frame [data-section] .text-\[18px\] { font-size: 1.125rem; }
  .lewistown-frame [data-section] .text-\[19px\] { font-size: 1.1875rem; }
  .lewistown-frame [data-section] .text-\[20px\] { font-size: 1.25rem; }
  .lewistown-frame [data-section] .text-\[22px\] { font-size: 1.375rem; }
  .lewistown-frame [data-section] .text-\[26px\] { font-size: 1.625rem; }
  .lewistown-frame [data-section] .lg\:text-\[17px\] { font-size: 1.0625rem; }
}