/* ==========================================================================
   WALNUT Bakery — Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=League+Spartan:wght@700;800;900&display=swap');

:root {
  --brown-dark: #3b2314;
  --brown-mid: #5a3a22;
  --brown-light: #8a5a3a;
  --cream: #f7ecd6;
  --cream-deep: #f0dfb8;
  --tan: #e9c99a;
  --tan-deep: #ddb87f;
  --accent-orange: #c1552f;
  --text-dark: #3b2314;
  --text-light: #f7ecd6;
  --font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-hero: "League Spartan", "Poppins", "Helvetica Neue", Arial, sans-serif;
  --transition-fast: 0.25s ease;
  --transition-med: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  --container-w: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(-1px); }

.btn-light { background: var(--cream); color: var(--brown-dark); }
.btn-light:hover { background: #fff; }

.btn-outline {
  border-color: var(--cream);
  color: var(--cream);
  background: transparent;
}
.btn-outline:hover { background: var(--cream); color: var(--brown-dark); }

.btn-dark { background: var(--brown-dark); color: var(--cream); }
.btn-dark:hover { background: var(--brown-mid); }

.btn-outline-light {
  border-color: var(--cream);
  color: var(--cream);
  background: transparent;
}
.btn-outline-light:hover { background: var(--cream); color: var(--brown-dark); }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Same base color + paper-texture blend as .hero below — matching only
     background-color would still look mismatched, since the hero's
     soft-light-blended noise texture makes its *effective* color a touch
     lighter than flat --brown-dark; without the same texture here the
     header reads as a visibly darker bar sitting on top of the hero. */
  background-color: var(--brown-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-blend-mode: soft-light;
  transition: box-shadow var(--transition-fast), padding var(--transition-fast);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.25); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 24px;
  transition: padding var(--transition-fast);
}

/* Above the breakpoint where .main-nav collapses into the off-canvas
   mobile panel (900px), take the nav out of the space-between flex flow
   and center it on the header directly. With space-between alone, the
   nav's position depends on the logo's and the button's widths — since
   those aren't equal, the nav visibly drifts off the true screen center.
   Absolute positioning + left:50% centers it regardless of either
   sibling's width; ORDER NOW ends up sitting a bit further right as a
   result, since it's no longer being pulled inward by the nav's flex space. */
@media (min-width: 901px) {
  .header-inner { position: relative; }
  .main-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--cream);
  flex-shrink: 0;
}
.logo-main {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8c99a;
}
.logo-sub {
  font-size: 0.6rem;
  letter-spacing: 3px;
  margin-top: 4px;
  color: var(--cream);
  opacity: 0.85;
}

.main-nav ul {
  display: flex;
  gap: 34px;
}
.main-nav a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--cream);
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--tan-deep);
  transition: width var(--transition-fast);
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 100%; }
.main-nav a.active { color: var(--tan-deep); }

.header-btn { white-space: nowrap; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background-color: var(--brown-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-blend-mode: soft-light;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-height, 90px));
  display: flex;
  align-items: center;
}
.hero .container {
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  width: 100%;
}
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: center;
  max-width: 460px;
}
.hero-text h1 {
  color: var(--cream);
  font-family: var(--font-hero);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3.3rem, 4.4vw + 3.3vh, 7rem);
  letter-spacing: -0.5px;
  line-height: 0.96;
}
.hero-text .line {
  display: block;
  overflow: hidden;
}
.hero-text .line:nth-child(1) { color: var(--cream); }
.hero-text .line:nth-child(2) { color: var(--tan-deep); }

.hero-sub {
  color: var(--cream);
  opacity: 0.8;
  margin: 26px 0 34px;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  max-width: 380px;
}

.hero-image {
  position: relative;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
}
.hero-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(64vh, 620px);
  margin: 0 auto;
  /* No frame, shadow, or background box — the photo sits directly on
     the hero section's background, edge to edge. */
  transition: transform 0.6s ease;
}
.hero-image:hover .hero-img { transform: scale(1.02); }

.badge-circle {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  animation: spin 18s linear infinite;
}
.badge-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.badge-center {
  position: relative;
  z-index: 2;
  animation: counterspin 18s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes counterspin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ==========================================================================
   Hero — large screens (>=1025px): bigger hero image (cropping the right/
   bottom edge is acceptable), hero text shifted toward the left edge of
   its column instead of sitting dead-center
   ========================================================================== */
@media (min-width: 1025px) {
  /* Keep some top/bottom breathing room (rather than 0) so the badge
     circle — offset -30px above the image's top-left corner — still has
     room to sit inside the hero instead of being clipped by it. */
  .hero {
    /* An explicit height (not just min-height) so the absolutely
       positioned .hero-image below has a definite containing-block
       height to resolve its own height:100% against — otherwise the
       percentage falls back to "auto" and the image renders at its
       natural pixel size again (the same class of bug fixed earlier). */
    height: calc(100vh - var(--header-height, 90px));
  }
  .hero .container { padding-top: 40px; padding-bottom: 40px; }
  .hero-inner {
    grid-template-columns: minmax(340px, 1fr);
    height: calc(100vh - var(--header-height, 90px) - 80px);
    align-items: center;
  }
  .hero-text {
    justify-self: start;
    align-self: center;
  }
  .hero-image {
    /* Taken out of the grid flow and pinned to the hero section's own
       right edge (not just the padded/max-width container's edge) so
       the image sits flush against the right side of the screen. */
    position: absolute;
    /* top+bottom insets (rather than top:0; height:100%) give the image's
       box a bit of breathing room from .hero's edges. Now that the badge
       circle sits at top:30px (moved down, overlapping the photo) rather
       than -30px above it, it no longer needs a large top buffer, so this
       is trimmed down from 40px to give the image more vertical room to
       size up into. */
    top: 12px;
    bottom: 12px;
    /* Kept flush-ish with the hero's right edge (not pushed further in)
       so the photo still reaches the edge with no blank strip showing —
       pushing this out further left previously uncovered background
       instead of more of the image. The "move left" effect now comes
       from widening the image itself below, not from offsetting this
       box away from the edge. */
    right: 8px;
    height: auto;
    /* fit-content (not plain "auto") so the box reliably shrink-wraps to
       the image's actual rendered width — needed for the badge circle
       (positioned relative to this box's top-left corner) to stay
       visually attached to the image's corner. */
    width: fit-content;
    max-width: none;
    display: flex;
    /* Anchor to the top so any extra height overflows (and crops) at the
       bottom only, not symmetrically top+bottom — keeps the badge
       circle's anchor point (top-left of this box) stable. */
    align-items: flex-start;
    justify-content: flex-end;
  }
  .hero-img {
    /* Deliberately oversized relative to the box (height:122%, anchored
       to the top via align-items:flex-start above) so it crops at the
       bottom, and width is capped independently of height — cropping
       the right side too. max-width is kept just tight enough to clear
       the text column; object-fit:cover prevents the mismatch between
       the height and the capped width from stretching the photo out of
       proportion (a plain img would distort here, since max-width
       doesn't make the browser recompute height to match). Dialed back
       from 132% to 122% — less oversizing means less of the photo has
       to be cropped away to fill the box, showing more of it overall. */
    height: 122%;
    max-height: none;
    width: auto;
    /* vw (not "%") so this doesn't depend on .hero-image's own
       shrink-to-fit width — a percentage here is circular (the parent's
       shrink-to-fit size needs this cap resolved first) and gets
       ignored, leaving a gap between the badge and the visibly smaller,
       capped image. */
    /* Widened slightly from 52vw (then 53vw) so the box (right-anchored,
       flush to the hero's edge) grows leftward — this is what actually
       moves the visible image closer to the text, rather than leaving a
       gap on the right. Checked a wide matrix of real resolutions
       (1366-2560px, including common laptop sizes like 1600/1680/1728)
       to keep a safe margin before the text column — 2560px wide is the
       tightest case, so this is close to the practical ceiling. */
    max-width: 53.3vw;
    margin: 0;
    object-fit: cover;
    /* With object-fit:cover, the default crop is centered — since the
       box here ends up narrower (relative to height) than most photos'
       natural aspect ratio, a centered crop cuts off both the left and
       right edges. Anchoring to "left top" keeps the photo's left edge
       (and top edge) fully visible and lets any necessary crop come
       from the right/bottom instead — matching where the box itself is
       already allowed to overflow and get clipped. */
    object-position: left top;
  }
  .badge-circle {
    /* Moved down further still (was 30px) so more of the badge overlaps
       the photo rather than just grazing its top edge. */
    top: 65px;
    left: -30px;
  }
}

/* ==========================================================================
   Features
   ========================================================================== */
.features {
  background:
    radial-gradient(circle, rgba(59,35,20,0.08) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--cream);
  padding: 56px 0;
  border-top: 1px solid rgba(59,35,20,0.08);
  border-bottom: 1px solid rgba(59,35,20,0.08);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.feature-item {
  text-align: center;
  padding: 0 16px;
  position: relative;
}
.feature-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(59,35,20,0.12);
}
.feature-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  color: var(--brown-dark);
  transition: transform var(--transition-fast);
}
.feature-item:hover .feature-icon { transform: translateY(-6px) scale(1.08); }
.feature-icon svg { width: 100%; height: 100%; }
.feature-item h3 {
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.feature-item p {
  font-size: 0.85rem;
  color: var(--brown-mid);
  max-width: 220px;
  margin: 0 auto;
}

/* ==========================================================================
   Products
   ========================================================================== */
.products {
  background: var(--cream-deep);
  padding: 90px 0;
}
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
  gap: 20px;
  flex-wrap: wrap;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: var(--accent-orange);
  font-weight: 700;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.eyebrow-light { color: var(--tan-deep); }

/* Centered eyebrows (section headers that are centered) get a centered line */
.reviews-header .eyebrow,
.instagram-header .eyebrow {
  flex-direction: row;
}
.products-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--brown-dark);
}
.products-header h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent-orange);
  margin-top: 18px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.product-card {
  background: var(--cream);
  border: 1px solid rgba(59,35,20,0.1);
  border-radius: 6px;
  overflow: hidden;
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(59,35,20,0.18);
}
.product-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover .product-img img { transform: scale(1.08); }
.product-card h4 {
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 18px 18px 4px;
  color: var(--brown-dark);
}
.product-card .price {
  padding: 0 18px 18px;
  color: var(--accent-orange);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ==========================================================================
   Story
   ========================================================================== */
.story {
  background: var(--brown-dark);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.story-image img {
  border-radius: 10px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
  transition: transform 0.6s ease;
}
.story-image:hover img { transform: scale(1.03); }

.story-text h2 {
  color: var(--cream);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 12px 0 0;
}
.story-text h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--tan-deep);
  margin: 18px 0 22px;
}
.story-text p {
  color: var(--cream);
  opacity: 0.8;
  margin-bottom: 14px;
  max-width: 420px;
  font-size: 0.95rem;
}
.story-text .btn { margin-top: 20px; }

.story-decor {
  position: absolute;
  right: 4%;
  bottom: -6%;
  width: 220px;
  height: 220px;
  color: rgba(232,201,154,0.18);
  z-index: 0;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(8deg); }
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews {
  background: var(--cream);
  padding: 90px 0;
}
.reviews-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 50px;
}
.reviews-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--brown-dark);
  margin-top: 6px;
}
.reviews-header h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent-orange);
  margin: 18px auto 0;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.review-card {
  background: var(--cream-deep);
  border: 1px solid rgba(59,35,20,0.08);
  padding: 34px 28px;
  border-radius: 8px;
  position: relative;
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}
.review-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(59,35,20,0.15);
}
.quote-mark {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  color: var(--accent-orange);
  opacity: 0.55;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.stars {
  color: var(--accent-orange);
  letter-spacing: 2px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.review-card p {
  font-size: 0.9rem;
  color: var(--brown-mid);
  margin-bottom: 22px;
  min-height: 90px;
}
.reviewer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.reviewer-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brown-dark);
}
.reviewer-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--brown-mid);
  opacity: 0.8;
}

/* ==========================================================================
   Instagram
   ========================================================================== */
.instagram {
  background: var(--brown-dark);
  padding: 90px 0;
}
.instagram-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 46px;
}
.instagram-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: var(--cream);
  margin: 8px 0 0;
}
.instagram-header h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--tan-deep);
  margin: 18px auto 26px;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.instagram-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(247,236,214,0.12);
}
.instagram-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.instagram-overlay {
  position: absolute;
  inset: 0;
  background: rgba(59,35,20,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.instagram-overlay svg { width: 26px; height: 26px; }
.instagram-item:hover .instagram-overlay { opacity: 1; }
.instagram-item:hover img { transform: scale(1.1); }

/* ==========================================================================
   Weekend Specials
   ========================================================================== */
.specials {
  background:
    repeating-linear-gradient(135deg, rgba(59,35,20,0.05) 0px, rgba(59,35,20,0.05) 2px, transparent 2px, transparent 16px),
    var(--tan);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--accent-orange);
}
.specials-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.specials-text .eyebrow { color: var(--accent-orange); }
.specials-text h2 {
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  color: var(--brown-dark);
  margin-bottom: 0;
}
.specials-text h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--brown-dark);
  margin: 20px 0 24px;
}
.specials-text p {
  color: var(--brown-mid);
  margin-bottom: 28px;
  font-size: 1.05rem;
}

.specials-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.specials-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--brown-dark);
  font-weight: 500;
}
.specials-list-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent-orange);
}
.specials-list-icon svg { width: 100%; height: 100%; }
.specials-list strong { font-weight: 700; }

.specials-image {
  position: relative;
}
.specials-image::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 2px dashed rgba(59,35,20,0.3);
  border-radius: 16px;
  z-index: -1;
}
.specials-image img {
  border-radius: 10px;
  box-shadow: 0 25px 50px rgba(59,35,20,0.25);
}
.offer-badge {
  position: absolute;
  top: -26px;
  right: 4%;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.3;
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
  animation: pulse 2.4s ease-in-out infinite;
}
.offer-badge::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed rgba(193,85,47,0.5);
  border-radius: 50%;
  animation: spin 14s linear infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* ==========================================================================
   Visit Us
   ========================================================================== */
.visit {
  background:
    radial-gradient(circle, rgba(59,35,20,0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--cream-deep);
  padding: 90px 0;
}
.visit-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.visit-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--brown-dark);
  margin: 8px 0 0;
}
.visit-text h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent-orange);
  margin: 18px 0 20px;
}
.visit-text > p {
  color: var(--brown-mid);
  font-size: 0.95rem;
  margin-bottom: 30px;
  max-width: 420px;
}

.visit-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
.visit-details li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.visit-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--accent-orange);
  margin-top: 2px;
}
.visit-icon svg { width: 100%; height: 100%; }
.visit-details h4 {
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--brown-dark);
  margin-bottom: 4px;
}
.visit-details p {
  font-size: 0.88rem;
  color: var(--brown-mid);
}

.visit-map {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(59,35,20,0.18);
  aspect-ratio: 4 / 3.2;
}
.visit-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(12%) saturate(85%);
}
/* Click-to-activate overlay: keeps normal page-scroll behavior over the
   map until the visitor deliberately clicks in, instead of hijacking the
   scroll/trackpad gesture to zoom the map. */
.visit-map .map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,35,20,0.08);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.visit-map .map-overlay:hover { background: rgba(59,35,20,0.18); }
.visit-map .map-overlay span {
  background: var(--brown-dark);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.visit-map.active .map-overlay { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--brown-dark);
  color: var(--cream);
  padding: 70px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(247,236,214,0.12);
}
.footer-brand p {
  opacity: 0.75;
  font-size: 0.85rem;
  margin: 16px 0 20px;
  max-width: 240px;
}
.social-icons {
  display: flex;
  gap: 18px;
}
.social-icons a {
  /* No circular border/background — these are now flat PNG icons that
     already look like standalone marks, so a background circle behind
     them just reads as an unwanted shape. */
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.social-icons svg { width: 16px; height: 16px; }
.social-icons img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.social-icons a:hover {
  opacity: 0.75;
  transform: translateY(-4px);
}

.footer-col h5 {
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  margin-bottom: 22px;
  color: var(--tan-deep);
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a {
  font-size: 0.85rem;
  opacity: 0.8;
  transition: opacity var(--transition-fast), padding-left var(--transition-fast);
}
.footer-col ul a:hover { opacity: 1; padding-left: 4px; }
.footer-col p {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 12px;
}

.footer-bottom {
  text-align: center;
  padding: 24px 0;
  font-size: 0.78rem;
  opacity: 0.6;
}

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast), background var(--transition-fast);
  z-index: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.back-to-top svg { width: 18px; height: 18px; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--brown-dark); transform: translateY(-4px); }

/* ==========================================================================
   Tablet (<=1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* padding-left/right only (not the "0 24px" shorthand) so this never
     zeroes out vertical padding on elements that also carry another
     class with its own top/bottom padding, e.g. .header-inner */
  .container { padding-left: 24px; padding-right: 24px; }
  .main-nav ul { gap: 20px; }
  .main-nav a { font-size: 0.72rem; }
  .header-btn { padding: 12px 20px; font-size: 0.75rem; }
  .hero-inner { gap: 30px; }
  .features-grid { gap: 20px; }
  .products-grid { gap: 22px; }
  .story-inner { gap: 40px; }
  .reviews-grid { gap: 22px; }
  .instagram-grid { grid-template-columns: repeat(4, 1fr); }
  .visit-inner { gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

/* ==========================================================================
   Tablet / small tablet (<=900px) — nav collapses
   ========================================================================== */
@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 80%);
    background: var(--brown-dark);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1050;
    padding-top: 100px;
    box-shadow: -10px 0 40px rgba(0,0,0,0.3);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0 40px;
  }
  .main-nav ul li { border-bottom: 1px solid rgba(247,236,214,0.1); }
  .main-nav a { display: block; padding: 18px 0; font-size: 0.95rem; }
  .header-btn { display: none; }
  .hamburger {
    display: flex;
    width: 30px;
    height: 22px;
    position: relative;
  }
  .hamburger::before {
    /* Invisible expanded hit-area so the tap target meets a comfortable
       minimum size without changing the icon's visual size. */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .hamburger span { height: 2.5px; }
  .header-inner { padding-top: 22px; padding-bottom: 22px; }

  .hero .container { padding-top: 100px; padding-bottom: 50px; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .hero-text { order: 2; align-items: center; max-width: 100%; }
  .hero-image { order: 1; margin-bottom: 20px; }
  .hero-img { max-height: 46vh; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  /* From the hamburger-menu breakpoint down, match the true-mobile badge
     placement (bottom-right of the image) instead of the old top-center
     style, per explicit request. */
  .badge-circle { top: auto; left: auto; right: -12px; bottom: -12px; transform: none; }

  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .feature-item:nth-child(2)::after { display: none; }
  .feature-item:not(:last-child)::after { display: none; }

  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .products-header { flex-direction: column; align-items: flex-start; }

  .story-inner { grid-template-columns: 1fr; text-align: center; }
  .story-text p { margin-left: auto; margin-right: auto; }
  .story-decor { display: none; }

  .specials-inner { grid-template-columns: 1fr; text-align: center; }
  .specials-image { order: -1; max-width: 460px; margin: 0 auto; }

  .reviews-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }

  .instagram-grid { grid-template-columns: repeat(3, 1fr); }

  .visit-inner { grid-template-columns: 1fr; text-align: center; }
  .visit-text > p { margin-left: auto; margin-right: auto; }
  .visit-details li { text-align: left; }
  .visit-map { max-width: 520px; margin: 0 auto; }
}

/* ==========================================================================
   Mobile (<=600px)
   ========================================================================== */
@media (max-width: 600px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .header-inner { padding-top: 22px; padding-bottom: 22px; }
  .hero .container { padding-top: 90px; padding-bottom: 40px; }
  .hero-text h1 { font-size: clamp(2.8rem, 10.5vw + 3.2vh, 4.3rem); }
  .hero-img { max-height: 40vh; }
  .badge-circle {
    top: auto;
    left: auto;
    right: -12px;
    bottom: -12px;
    transform: none;
    width: 80px;
    height: 80px;
  }
  .features-grid { grid-template-columns: 1fr; gap: 30px; }
  .products { padding: 60px 0; }
  .products-header { align-items: center; text-align: center; }
  .products-header h2::after { margin-left: auto; margin-right: auto; }
  .products-grid { grid-template-columns: 1fr; }
  .story, .specials { padding: 60px 0; }
  .reviews, .instagram, .visit { padding: 60px 0; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .offer-badge { width: 78px; height: 78px; font-size: 0.55rem; right: 4%; }
  .back-to-top { bottom: 18px; right: 18px; width: 42px; height: 42px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}