/* ---- Tokens (brand colors as provided) ---- */
:root {
  --red: #E31E24;
  --ink: #1A1A1A;
  --off-white: #FAF7F2;
  --white: #FFFFFF;

  --font-display: "Archivo", -apple-system, Segoe UI, sans-serif;
  --font-body: "Inter", -apple-system, Segoe UI, sans-serif;

  --max-width: 1080px;

  /* Deep oxblood accent — used to give the Visit Us CTA its own
     identity, distinct from both the cream page background and
     the black footer it sits above. */
  --maroon: #2B1114;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
}

h1, h2 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

a { color: var(--red); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 12px 16px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---- Store status strip ---- */
/* Sits above the header on every page. Text is filled in live by
   js/store-hours.js (checking Carterville/Central time, not the
   visitor's own device); the markup's own text is the no-JS
   fallback. */
.store-status-strip {
  background: var(--ink);
  color: #d9d9d9;
  text-align: center;
  padding: 8px 24px;
}

.store-status {
  margin: 0;
  font-size: 0.85rem;
}

.store-status a {
  color: var(--white);
}

/* ---- Header ---- */
.site-header {
  background: var(--off-white);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(26,26,26,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}

.brand-logo {
  height: 56px;
  width: auto;
  display: block;
}

.nav-toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-checkbox:focus-visible ~ .nav-toggle {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.site-nav a:hover { color: var(--red); }

.site-nav a[aria-current="page"],
.nav-dropdown-toggle.is-active {
  color: var(--red);
}

/* Sits inline with the plain nav links, so it reads as a nav-ending
   CTA rather than another text link. Hidden on mobile in favor of
   the sticky .mobile-action-bar's own Directions action. */
.nav-directions-btn {
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* ---- Nav dropdown ---- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--ink);
  font: inherit;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}

.nav-dropdown-toggle::-webkit-details-marker {
  display: none;
}

.nav-dropdown-toggle::marker {
  content: "";
}

.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown[open] .nav-dropdown-toggle {
  color: var(--red);
}

.nav-caret {
  transition: transform 0.15s ease;
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown[open] .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  min-width: 180px;
}

.nav-dropdown-menu a {
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--off-white);
  color: var(--red);
}

/* Desktop-only floating popover. Kept in its own min-width query so
   its position/transform can never leak into the mobile accordion
   below, which needs static, untransformed, in-flow layout. */
@media (min-width: 701px) {
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    background: var(--white);
    border: 1px solid rgba(26,26,26,0.08);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(26,26,26,0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown[open] .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---- Hero ---- */
/* The storefront sign sits in a fixed vertical band of the photo
   (see background-position below), so the H1 and CTA are split to
   the top and bottom of the box — via .hero-inner's own column flex
   — instead of stacked together, so neither ever overlaps the sign.
   Two gradients (top-down for the headline, bottom-up for the
   button) keep both readable while leaving the sign itself clear. */
.hero {
  display: flex;
  justify-content: center;
  min-height: 440px;
  text-align: center;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0) 28%),
    linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 38%),
    url("../assets/hero-exterior.png") 31% 18% / cover no-repeat;
}

.hero-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 28px 24px 40px;
}

.hero-headline {
  color: var(--white);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-display);
  border: 2px solid var(--red);
}

.btn-primary {
  background: var(--red);
  color: var(--white);
}

.btn-primary:hover {
  background: #c71a20;
  border-color: #c71a20;
}

.btn-ghost {
  background: transparent;
  color: var(--red);
}

.btn-ghost:hover {
  background: var(--red);
  color: var(--white);
}

.btn-ghost-ink {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-ghost-ink:hover {
  background: var(--ink);
  color: var(--white);
}

/* ---- Category CTAs ---- */
.category-cta {
  padding: 64px 0;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px 12px;
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(26,26,26,0.1);
}

.category-card h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 1.05rem;
  margin: 0;
}

.category-card-browse {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--red);
}

/* ---- This Week In The Store ---- */
.this-week {
  background: var(--white);
  padding: 64px 0;
  border-top: 1px solid rgba(26,26,26,0.06);
  border-bottom: 1px solid rgba(26,26,26,0.06);
}

.this-week-header {
  text-align: center;
  margin-bottom: 32px;
}

.this-week-header h2 {
  font-size: 1.4rem;
  margin: 0;
}

.this-week-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.week-card {
  background: var(--off-white);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
}

.week-card-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 4px;
}

.week-card-size {
  color: #777;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 18px;
}

.week-card-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--red);
  margin: 0;
}

.this-week-more {
  text-align: center;
  margin: 32px 0 0;
}

.this-week-more a {
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.this-week-more a:hover {
  text-decoration: underline;
}

/* ---- Stop In Today ---- */
.stop-in {
  background: var(--off-white);
  padding: 64px 0;
}

.stop-in-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.stop-in-content h2 {
  font-size: 1.6rem;
}

.stop-in-content address {
  font-style: normal;
  color: #333;
  margin: 0 0 12px;
}

.stop-in-hours {
  color: #333;
  margin: 0 0 24px;
}

.stop-in-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Shared real map embed (a free Google Maps iframe endpoint, no API
   key required) — used here and on visit-us.html. */
.map-embed {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(26,26,26,0.08);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.stop-in-map {
  aspect-ratio: 4 / 3;
}

/* ---- Highlights ---- */
.highlights {
  background: var(--white);
  padding: 64px 0;
  border-top: 1px solid rgba(26,26,26,0.06);
}

.highlights-heading {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 36px;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.highlight-card {
  text-align: center;
}

.highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--off-white);
  color: var(--red);
  margin-bottom: 14px;
}

.highlight-card h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 1rem;
  margin: 0 0 6px;
}

.highlight-card p {
  color: #555;
  font-size: 0.9rem;
  margin: 0;
}

/* ---- Brands ----
   A contained, rounded panel (like the Visit Us CTA on category
   pages) rather than a full-bleed dark band, so it reads as its
   own element instead of running straight into the footer below. */
.brands {
  background: var(--off-white);
  padding: 64px 0;
}

.brands-panel {
  background: var(--maroon);
  border: 2px solid var(--red);
  border-radius: 20px;
  padding: 48px 32px;
  box-shadow: 0 24px 48px rgba(26,26,26,0.16);
  text-align: center;
}

.brands-panel h2 {
  color: var(--white);
  font-size: 1.4rem;
}

.brands-sub {
  color: #d9d9d9;
  margin: 6px 0 32px;
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brand-list li {
  font-family: var(--font-display);
  font-weight: 600;
  color: #e9e2df;
  font-size: 1rem;
}

/* ---- Page header (Visit Us / Specials / Category pages) ---- */
.page-header {
  background: var(--white);
  padding: 72px 0 56px;
  text-align: center;
  border-bottom: 1px solid rgba(26,26,26,0.06);
}

.page-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.page-header-sub {
  color: #555;
  font-size: 1.05rem;
  margin: 8px 0 0;
}

/* Page-header callout (Category pages) — a small "not exhaustive
   inventory" notice below the H1. Deliberately styled differently
   from the Visit Us CTA panel at the bottom of the page (cream
   background + red outline here, vs. the solid --maroon panel
   there) so the two don't read as the same component. Currently
   scoped to beer.html only, pending review before rolling out to
   the other category pages. */
.page-header-callout {
  max-width: 680px;
  margin: 20px auto 0;
  padding: 20px 28px;
  background: var(--off-white);
  border: 2px solid var(--red);
  border-radius: 16px;
  text-align: left;
}

.page-header-callout .page-header-sub {
  margin: 0;
}

/* ---- Specials page ---- */
.legal-strip {
  background: var(--ink);
  color: #cfcfcf;
  text-align: center;
  font-size: 0.8rem;
  padding: 10px 24px;
}

/* New Arrivals comes first on the Specials page. */
.new-arrivals {
  padding: 48px 0;
  border-bottom: 1px solid rgba(26,26,26,0.06);
}

.new-arrivals h2 {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

/* Used once there are several new arrivals at once — a grid of the
   same .product-card the category pages use. */
.new-arrivals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Full-width spotlight card for a single new arrival: image left,
   story right. Stacks at 700px. */
.arrival-feature {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 3fr;
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: 14px;
  overflow: hidden;
}

/* White (not the grey .product-card-image fallback) so white-backdrop
   bottle shots blend into the card instead of showing as a box.
   object-fit: contain (not cover) so a bottle shot is never cropped. */
.arrival-feature-image {
  background: var(--white);
  min-height: 320px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrival-feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: contain;
}

.arrival-feature-body {
  padding: 32px 36px;
}

.arrival-feature-badge {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.arrival-feature-name {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  margin: 0 0 4px;
}

.arrival-feature-meta {
  color: #777;
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.arrival-feature-desc {
  color: #333;
  margin: 0 0 20px;
}

.arrival-feature-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(26,26,26,0.08);
  border-bottom: 1px solid rgba(26,26,26,0.08);
}

.arrival-feature-notes dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 2px;
}

.arrival-feature-notes dd {
  margin: 0;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.45;
}

.arrival-feature-price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--red);
  font-size: 1.8rem;
  line-height: 1;
  margin: 0;
}

.on-sale {
  padding: 48px 0 64px;
}

.on-sale h2 {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.on-sale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.on-sale-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(26,26,26,0.08);
  border-radius: 10px;
  padding: 16px;
}

/* White so white-backdrop product shots blend into the card;
   object-fit: contain so a case photo is never cropped. */
.on-sale-image {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--white);
  margin-bottom: 14px;
  overflow: hidden;
}

.on-sale-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.on-sale-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 2px;
}

.on-sale-meta {
  color: #777;
  font-size: 0.85rem;
  margin: 0 0 8px;
}

.on-sale-price-row {
  margin: 0;
}

.on-sale-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red);
  font-size: 1.1rem;
}

.on-sale-price-old {
  color: #999;
  text-decoration: line-through;
  font-size: 0.9rem;
  margin-left: 4px;
}


/* Cream section + contained, red-bordered panel (same technique as
   .visit-cta / .brands-panel) so the signup reads as its own element
   instead of running straight into the black footer below. The panel
   is --ink (not --maroon) because the Zite form paints its own dark
   background — matching it keeps the form seamless inside the box. */
.special-alert {
  background: var(--off-white);
  padding: 0 0 88px;
  text-align: center;
}

.special-alert-panel {
  max-width: 560px;
  margin: 0 auto;
  background: var(--ink);
  border: 2px solid var(--red);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 24px 48px rgba(26,26,26,0.16);
  color: var(--white);
}

.special-alert-embed {
  max-width: 480px;
  margin: 0 auto;
}

/* The Zite snippet hardcodes height:700px on its container via an
   inline style, which is much taller than this short form actually
   needs. Override it here (rather than editing the snippet itself)
   to remove the excess blank space — the form centers itself
   vertically in this height, so any surplus shows up as dead space
   above the headline. Sized for the form's *expanded* state: clicking
   "+ Add your name" reveals First/Last Name fields (~90px taller),
   and anything under ~450px makes the iframe scroll at that point.
   Adjust this value if the form ever grows or shrinks. */
.special-alert-embed > div {
  height: 450px !important;
}

/* ---- Product pages (Spirits / Beer / Wine / Ready-to-Drink) ---- */
.breadcrumb {
  margin: 0 0 16px;
}

.breadcrumb-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: #777;
}

.breadcrumb-list li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: #bbb;
}

.breadcrumb-list a {
  color: #777;
  text-decoration: none;
}

.breadcrumb-list a:hover {
  color: var(--red);
}

.breadcrumb-list li[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.jump-nav {
  padding: 24px 0 48px;
}

.jump-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jump-pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(26,26,26,0.12);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.jump-pill:hover,
.jump-pill:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

.product-section {
  padding: 48px 0;
  border-top: 1px solid rgba(26,26,26,0.06);
  scroll-margin-top: 90px;
}

.product-section-intro {
  max-width: 640px;
  margin: 0 0 28px;
}

.product-section-intro h2 {
  font-size: 1.4rem;
}

.product-section-intro p {
  color: #555;
  margin: 6px 0 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.product-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(26,26,26,0.08);
  border-radius: 10px;
  padding: 14px;
}

.product-card-image {
  aspect-ratio: 3 / 4;
  background: rgba(26,26,26,0.06);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

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

.product-card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 2px;
}

.product-card-meta {
  color: #777;
  font-size: 0.85rem;
  margin: 0;
}

.product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 1;
}

/* ---- Visit Us CTA (Category pages) ----
   A standalone callout, not a second footer: it sits on the page's
   own cream background with room to breathe on both sides, and the
   panel itself uses --maroon (not --ink) so it reads as its own
   element rather than bleeding into the black footer directly below. */
.visit-cta {
  background: var(--off-white);
  padding: 64px 0 88px;
}

.visit-cta-panel {
  background: var(--maroon);
  border: 2px solid var(--red);
  border-radius: 20px;
  padding: 48px 56px;
  box-shadow: 0 24px 48px rgba(26,26,26,0.16);
  color: var(--white);
}

/* Single centered column — there's no second (hours/address) block
   anymore, so this no longer needs the two-up space-between layout
   the panel originally had. */
.visit-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.visit-cta-content {
  max-width: 560px;
}

.visit-cta-content h2 {
  color: var(--white);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
}

.visit-cta-desc {
  color: #d9d9d9;
  margin: 8px 0 24px;
}

.visit-cta-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Placeholder sections (Category pages) ---- */
.placeholder-section {
  padding: 64px 0;
  text-align: center;
}

.placeholder-inner {
  max-width: 560px;
  margin: 0 auto;
}

.placeholder-inner p {
  color: #444;
}

/* ---- Visit Us page ---- */
.visit-info {
  padding: 64px 0;
  background: var(--off-white);
  border-bottom: 1px solid rgba(26,26,26,0.06);
}

.visit-info-inner {
  max-width: 640px;
  margin: 0 auto;
}

.visit-info-inner h2 {
  font-size: 1.3rem;
  margin: 32px 0 12px;
}

.visit-info-inner h2:first-child {
  margin-top: 0;
}

.visit-info-inner > p {
  color: #333;
  margin: 0;
}

.full-hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 1px solid rgba(26,26,26,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.full-hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(26,26,26,0.06);
  color: #333;
}

.full-hours-list li:last-child {
  border-bottom: none;
}

/* Highlighted by js/store-hours.js to mark the current day. */
.full-hours-list li.is-today {
  background: rgba(227,30,36,0.06);
  color: var(--ink);
  font-weight: 700;
}

.visit-info-inner .map-embed {
  margin: 12px 0 4px;
}

.visit-info-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* The intro blurb, gallery, and Food Trucks feature folded in from
   the retired about.html. */
.visit-story {
  background: var(--white);
  padding: 64px 0 40px;
  border-top: 1px solid rgba(26,26,26,0.06);
}

.visit-story-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.visit-divider {
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 28px;
  background: var(--red);
  border-radius: 999px;
}

.visit-story-inner p {
  color: #333;
}

.visit-gallery {
  background: var(--white);
  padding: 0 0 56px;
}

.visit-gallery-feature {
  aspect-ratio: 2.5 / 1;
  background: rgba(26,26,26,0.06);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.visit-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.visit-gallery-item {
  aspect-ratio: 5 / 4;
  background: rgba(26,26,26,0.06);
  border-radius: 10px;
  overflow: hidden;
}

.visit-gallery-feature img,
.visit-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visit-feature {
  background: var(--white);
  padding: 56px 0;
  text-align: center;
  border-top: 1px solid rgba(26,26,26,0.06);
  border-bottom: 1px solid rgba(26,26,26,0.06);
}

.visit-feature-inner {
  max-width: 560px;
  margin: 0 auto;
}

.visit-feature h2 {
  font-size: 1.4rem;
}

.visit-feature p {
  color: #333;
  margin: 8px 0 0;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: 56px 0 32px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

.site-footer h2 {
  color: var(--white);
  font-size: 1.2rem;
}

.site-footer a { color: var(--white); }

.site-footer address {
  font-style: normal;
  margin: 0 0 16px;
  color: #d9d9d9;
}

.footer-col p {
  margin: 0 0 16px;
  color: #d9d9d9;
}

.footer-note {
  font-size: 0.85rem;
  color: #9a9a9a;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
}

/* ---- Mobile action bar ----
   Pinned to the bottom of the screen at <=700px, where the header's
   nav (and its Get Directions button) are tucked behind the
   hamburger toggle — this puts Directions/Call/Hours one tap away
   without opening the menu. Hidden above 700px. */
.mobile-action-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.mobile-action-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px 8px;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .on-sale-grid { grid-template-columns: repeat(2, 1fr); }
  .new-arrivals-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .stop-in-grid { grid-template-columns: 1fr; }
  .stop-in-map { aspect-ratio: 16 / 9; }
  .highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .visit-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--off-white);
    padding: 8px 24px 24px;
    border-bottom: 1px solid rgba(26,26,26,0.08);
    box-shadow: 0 12px 24px rgba(26,26,26,0.1);
  }

  .nav-toggle-checkbox:checked ~ .site-nav {
    display: flex;
  }

  .site-nav a {
    padding: 10px 0;
    border-bottom: 1px solid rgba(26,26,26,0.06);
  }

  .site-nav > a:last-child {
    border-bottom: none;
  }

  /* Get Directions is hidden here (the sticky bottom bar takes over),
     so the link before it becomes the visually-last item and needs
     the same treatment. */
  .nav-directions-btn {
    display: none;
  }

  .site-nav > a:nth-last-child(2) {
    border-bottom: none;
  }

  .mobile-action-bar {
    display: flex;
  }

  body {
    padding-bottom: 60px;
  }

  .nav-toggle-checkbox:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-checkbox:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-toggle-checkbox:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-dropdown {
    width: 100%;
    border-bottom: 1px solid rgba(26,26,26,0.06);
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 10px 0;
  }

  .nav-dropdown-menu {
    padding: 0 0 8px 12px;
    min-width: 0;
    display: none;
  }

  .nav-dropdown[open] .nav-dropdown-menu {
    display: flex;
  }

  .nav-dropdown-menu a {
    padding: 8px 0;
    border-bottom: none;
  }

  .footer-inner { grid-template-columns: 1fr; }
  .page-header { padding: 48px 0 40px; }
  .page-header-callout { padding: 16px 20px; text-align: center; }

  .arrival-feature { grid-template-columns: 1fr; }
  .arrival-feature-image { min-height: 0; height: 340px; }
  .arrival-feature-body { padding: 24px 20px; }
  .arrival-feature-notes { grid-template-columns: 1fr; gap: 10px; }

  .breadcrumb-list { justify-content: flex-start; }
  .visit-cta-panel { padding: 36px 24px; }
  .visit-cta-content { max-width: none; }

  .this-week-grid { grid-template-columns: 1fr; }
  .stop-in-content { text-align: center; }
  .stop-in-actions { justify-content: center; }
  .brands-panel { padding: 36px 24px; }
  .special-alert-panel { padding: 16px 12px; }
  /* Narrower form wraps its text onto more lines, so it needs more
     height than desktop's 450px (again sized for the expanded
     "+ Add your name" state) before the iframe starts scrolling. */
  .special-alert-embed > div { height: 540px !important; }
  .brand-list { gap: 10px 22px; }
}

@media (max-width: 600px) {
  /* Stay at 2 columns (not 1fr) so the compact tiles form a 2x2
     grid instead of a tall single-column stack on small phones. */
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .on-sale-grid { grid-template-columns: 1fr; }
  .new-arrivals-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .highlights-grid { grid-template-columns: 1fr; gap: 28px; }
}