@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ---------- Design tokens ---------- */
:root {
  --background: 35 25% 97%;
  --foreground: 25 35% 15%;
  --border: 30 20% 88%;
  --input: 30 20% 88%;
  --ring: 28 65% 52%;

  --primary: 25 35% 25%;
  --primary-foreground: 35 25% 97%;

  --secondary: 35 75% 68%;
  --secondary-foreground: 25 35% 15%;

  --accent: 25 85% 65%;
  --accent-foreground: 25 35% 15%;

  --muted: 30 20% 92%;
  --muted-foreground: 25 20% 45%;

  --card: 35 30% 98%;
  --card-foreground: 25 35% 15%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;

  --radius: 0.75rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "DM Sans", sans-serif;
  overflow-x: clip;
  line-height: 1.5;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}
h4 {
  font-size: 1.25rem;
  font-weight: 500;
}
p {
  max-width: 65ch;
}

@media (min-width: 768px) {
  h1 { font-size: 3.75rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.875rem; }
  h4 { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  h1 { font-size: 4.5rem; }
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }

.section { padding: 5rem 0; }
.section-muted { background: hsl(var(--muted)); }

.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.flex-wrap { flex-wrap: wrap; }

.text-muted { color: hsl(var(--muted-foreground)); }
.text-lg { font-size: 1.125rem; }
.leading-relaxed { line-height: 1.7; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-12 { margin-top: 3rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.65rem 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: scale(1.05); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-primary:hover { background: hsl(var(--primary) / 0.9); }

.btn-outline {
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}
.btn-outline:hover { background: hsl(var(--muted)); }

.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.btn-secondary:hover { background: hsl(var(--secondary) / 0.85); }

.btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); }
.btn-ghost:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }

.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; border-radius: 999px; }
.btn-full { width: 100%; }
.btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(8px);
}
.header-inner {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--primary));
  transition: color 0.2s ease;
}
.logo:hover { color: hsl(var(--primary) / 0.8); }

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) { .nav-desktop { display: flex; } }

.nav-link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  transition: color 0.2s ease;
  padding-bottom: 4px;
}
.nav-link:hover { color: hsl(var(--foreground)); }
.nav-link.active { color: hsl(var(--primary)); }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -21px;
  height: 2px;
  background: hsl(var(--primary));
}

.nav-toggle {
  display: flex;
  padding: 0.5rem;
  border-radius: var(--radius);
}
.nav-toggle:hover { background: hsl(var(--muted)); }
@media (min-width: 768px) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
.mobile-nav.open { display: block; }
.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.mobile-nav-panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 280px;
  max-width: 85vw;
  background: hsl(var(--background));
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
.mobile-nav-panel .logo { margin-bottom: 1rem; }
.mobile-nav-link {
  font-size: 1.1rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.mobile-nav-link.active { color: hsl(var(--primary)); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: hsl(var(--muted));
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.4), rgba(0,0,0,0.6));
}
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 1rem;
}
.hero-content h1 { color: hsl(var(--foreground)); margin-bottom: 1.5rem; }
.hero-content p {
  color: hsl(var(--muted-foreground));
  font-size: 1.25rem;
  max-width: 48rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
}
@media (min-width: 768px) { .hero-content p { font-size: 1.5rem; } }

.page-hero {
  padding: 5rem 0;
  background: hsl(var(--muted));
}

/* ---------- Cards ---------- */
.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(0,0,0,0.15);
}

.product-card { display: flex; flex-direction: column; height: 100%; cursor: pointer; }
.product-card-img {
  position: relative;
  height: 13rem;
  background: hsl(var(--muted));
  overflow: hidden;
  padding: 1.25rem 1rem;
}
.product-card-img img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 0.5s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.product-card-body { padding: 1.25rem; flex-grow: 1; display: flex; flex-direction: column; }
.product-card-top { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
.product-card-top h3 { font-size: 1.05rem; line-height: 1.3; min-width: 0; overflow-wrap: break-word; transition: color 0.2s ease; }
.product-card:hover .product-card-top h3 { color: hsl(var(--primary)); }
.product-price { font-weight: 500; font-size: 1rem; white-space: nowrap; color: hsl(var(--primary)); flex-shrink: 0; }
@media (min-width: 768px) {
  .product-card-top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
}
.product-desc {
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  line-height: 1.6;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
}
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-outline { border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }

/* ---------- Featured / CTA sections ---------- */
.cta-card {
  background: hsl(var(--card));
  border-radius: 1.25rem;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.cta-card-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 1.25rem;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cta-card-primary p { color: hsl(var(--primary-foreground) / 0.9); }

/* ---------- Filters (Products page) ---------- */
.filters-section {
  padding: 2rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
.filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.subfilter-wrap {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.subfilter-wrap.show {
  max-height: 200px;
  opacity: 1;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--border));
}
.subfilter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* Featured products grid (home page) — 2 per row on mobile, adapts to item count on larger screens */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-content: center;
}
@media (min-width: 640px) {
  .featured-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    gap: 1.5rem;
  }
}

.empty-state { text-align: center; padding: 4rem 1rem; color: hsl(var(--muted-foreground)); }
.empty-state h3 { color: hsl(var(--foreground)); margin-bottom: 0.5rem; }

/* ---------- Product detail ---------- */
/* Mobile stacks image over info with a tight gap so the name/category sit close
   under the photo; desktop places them side by side with generous spacing and
   restores the info column's vertical padding for alignment with the image. */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.detail-info { padding: 0; }
@media (min-width: 1024px) {
  .detail-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .detail-info { padding: 1.5rem 0; }
}
.detail-image {
  background: hsl(var(--muted));
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.detail-image img { width: 100%; height: 100%; object-fit: contain; }
/* Reserve a consistent height for the info column so swapping products in place
   (AJAX prev/next) doesn't move the Prev/Next bar. Sized to cover the tallest
   product in the catalog, so every product occupies the same footprint; the
   Add-to-Order button (margin-top:auto) pins to the bottom, and a genuinely
   longer description than today's would simply expand past it. On desktop the
   square image already governs the row height, so this mainly matters on the
   stacked mobile layout. Sized to the tallest product's content after the
   mobile layout dropped the info column's vertical padding. */
.detail-info { min-height: 31rem; }
/* Product name: fluid so long names shrink where they wrap on narrow screens,
   while staying prominent on desktop. Tighter line-height trims multi-line names. */
.detail-name { font-size: clamp(2.25rem, 4vw, 2.75rem); line-height: 1.15; }
.detail-price { font-size: 1.875rem; font-weight: 500; color: hsl(var(--primary)); margin: 1.5rem 0 2rem; }
.detail-ingredients { padding-left: 1.25rem; margin: 0 0 1rem; }
.detail-ingredients li { margin-bottom: 0.25rem; }
.detail-size { color: hsl(var(--muted-foreground)); margin: 0 0 1.5rem; }
.detail-size-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; font-weight: 600; color: hsl(var(--foreground)); margin-right: 0.5rem; }
.detail-actions {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) { .detail-actions { flex-direction: row; align-items: center; } }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; }

/* ---------- Product swipe transition (macOS-style slide) ----------
   Prev/next swaps the detail content in place (AJAX, see public/js/main.js)
   inside a same-document View Transition tagged 'forward'/'backward'. Only the
   detail region is given its own transition name, so ONLY it slides — the
   header, footer and Back link (captured as 'root') stay perfectly still.
   Browsers without View Transitions just swap instantly. */
[data-detail-region] { view-transition-name: product-detail; }

/* 'root' = everything except the detail region; keep it static (no cross-fade,
   no slide) so the top nav bar doesn't move. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

/* Clip the slide to the region's own box so it doesn't sweep over the header. */
::view-transition-group(product-detail) { overflow: clip; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes pd-slide-out-left  { to   { transform: translateX(-100%); } }
  @keyframes pd-slide-in-right  { from { transform: translateX(100%);  } }
  @keyframes pd-slide-out-right { to   { transform: translateX(100%);  } }
  @keyframes pd-slide-in-left   { from { transform: translateX(-100%); } }

  /* forward = moving to the next product: current slides out left, next in from right */
  :root:active-view-transition-type(forward)::view-transition-old(product-detail) {
    animation: 320ms cubic-bezier(0.4, 0, 0.2, 1) both pd-slide-out-left;
  }
  :root:active-view-transition-type(forward)::view-transition-new(product-detail) {
    animation: 320ms cubic-bezier(0.4, 0, 0.2, 1) both pd-slide-in-right;
  }
  /* backward = moving to the previous product: current slides out right, prev in from left */
  :root:active-view-transition-type(backward)::view-transition-old(product-detail) {
    animation: 320ms cubic-bezier(0.4, 0, 0.2, 1) both pd-slide-out-right;
  }
  :root:active-view-transition-type(backward)::view-transition-new(product-detail) {
    animation: 320ms cubic-bezier(0.4, 0, 0.2, 1) both pd-slide-in-left;
  }
}

/* Category jump menu on the detail page — a wrapping row of pill links that
   deep-link into the filtered products view. */
.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

/* Prev/next product navigation. Two buttons that push apart; a disabled
   placeholder keeps the remaining button on its side at either end. */
.product-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.product-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  max-width: 45%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  color: hsl(var(--foreground));
  transition: background-color 0.2s ease, color 0.2s ease;
}
.product-nav-btn:hover { background: hsl(var(--muted)); color: hsl(var(--primary)); }
.product-nav-btn.is-disabled { visibility: hidden; }
.product-nav-btn-next { margin-left: auto; text-align: right; }
.product-nav-text { display: flex; flex-direction: column; min-width: 0; }
.product-nav-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); }
.product-nav-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-nav-btn svg { flex-shrink: 0; }

/* ---------- About page ---------- */
.about-image { height: 500px; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.12); }
.about-image img { width: 100%; height: 100%; object-fit: cover; }

.value-card { background: hsl(var(--card)); border-radius: 0.85rem; padding: 2rem; box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.value-icon {
  background: hsl(var(--primary) / 0.1);
  width: 4rem; height: 4rem;
  border-radius: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  color: hsl(var(--primary));
}

/* ---------- Locations page ---------- */
.location-card-body { padding: 1.5rem; display: flex; flex-direction: column; height: 100%; }
.location-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; color: hsl(var(--muted-foreground)); }
.location-row svg { flex-shrink: 0; margin-top: 3px; color: hsl(var(--primary)); }

/* ---------- Footer ---------- */
.site-footer {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  margin-top: 5rem;
}
/* Only set vertical padding here — leave .container's responsive horizontal
   padding intact so the footer lines up with the rest of the page. */
.footer-inner { padding-top: 3rem; padding-bottom: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
.footer-brand p { color: hsl(var(--primary-foreground) / 0.8); line-height: 1.7; }
.footer-links { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-links a, .footer-contact a {
  color: hsl(var(--primary-foreground) / 0.8);
  transition: color 0.2s ease;
}
.footer-links a:hover, .footer-contact a:hover { color: hsl(var(--primary-foreground)); }
.footer-contact { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.footer-contact a { display: flex; align-items: center; gap: 0.5rem; }
.social-row { display: flex; gap: 1rem; }
.social-row a { color: hsl(var(--primary-foreground) / 0.8); transition: transform 0.2s ease, color 0.2s ease; }
.social-row a:hover { color: hsl(var(--primary-foreground)); transform: scale(1.1); }
.footer-bottom {
  border-top: 1px solid hsl(var(--primary-foreground) / 0.2);
  margin-top: 3rem;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }
.footer-bottom p { color: hsl(var(--primary-foreground) / 0.6); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: hsl(var(--primary-foreground) / 0.6); }
.footer-bottom-links a:hover { color: hsl(var(--primary-foreground)); }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; }

/* ---------- Scroll-reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.page-enter { animation: pageEnter 0.5s cubic-bezier(0.4,0,0.2,1); }
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo-img {
  height: 240px;
  width: auto;
  display: block;
  margin: 0 auto;
  padding-bottom: 1.5rem;
}

.header-logo-img {
  height: 64px;
  width: auto;
}

.header-logo-img-mobile {
  height: 48px;
  width: auto;
  margin-top: 0.2rem;
}