/* Chillax local fonts */
@font-face {
  font-family: "Chillax";
  src: url("assets/fonts/Chillax/Chillax-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chillax";
  src: url("assets/fonts/Chillax/Chillax-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chillax";
  src: url("assets/fonts/Chillax/Chillax-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chillax";
  src: url("assets/fonts/Chillax/Chillax-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Color Palette System */
:root {
  /* palette (existing hex vars kept) */
  --color-light-salmon: #F2E494;        /* OLD #F2E494, #D4967D */
  --color-buttercream: #FDF9EE;         /* OLD #FDF9EE */
  --color-dark-cyan: #495A58;           /* OLD #495A58 */
  --color-denim: #5B7083;               /* OLD #5B7083 */
  --color-dusty-blue: #A3B8CC;          /* OLD #A3B8CC */
  --color-white: #FFFFFF;               /* OLD #FFFFFF */
  --color-text: #222222;                /* OLD #222222 */

  /* add RGB versions for use with rgba(var(--...-rgb), a) */
  --color-rgb-light-salmon: 242, 228, 148;      /* #F2E494 */
  --color-rgb-dark-cyan: 73, 90, 88;            /* #495A58 */
  --color-rgb-text: 34, 34, 34;          /* #222222 */
  --color-rgb-denim: 91, 112, 131;       /* #5B7083 */
  --color-rgb-dusty-blue: 163, 184, 204; /* #A3B8CC */
  --color-rgb-white: 255, 255, 255;
  --color-rgb-shadow: 34, 34, 34;

  /* Utility */
  --radius: 12px;
  --container-max: 1100px;
  --gutter: 1.125rem;
  --focus-ring: 3px;
  --transition-fast: 180ms;

  /* shadows can now reference the rgb var */
  --shadow-soft: 0 8px 20px rgba(var(--color-rgb-shadow), 0.06);
  --shadow-hover: 0 14px 36px rgba(var(--color-rgb-shadow), 0.12);

  /* how much the hero extends past the image to reveal the accent color */
  --hero-accent-gap: 8rem;
  /* how much the space the menu has before starting */
  --menu-accent-gap: 4rem;
  /* add site header height variable (tweak if your header feels too tall/short) */
  --site-header-height: 64px;
}

/* Global reset & base */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* normal text: Chillax Regular */
  font-family: "Chillax", Roboto, -apple-system, system-ui, Arial, sans-serif;
  /* The page background now uses buttercream; light-salmon is reserved for hero + CTA */
  background-color: var(--color-buttercream);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  min-height: 100vh;
}

/* Layout container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header & Navigation */
/* Header: make semi-transparent so the hero shows through */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;            /* top:0; left:0; right:0 */
  z-index: 60;                  /* above hero */
  background-color: rgba(var(--color-rgb-white), 0.85);
  border-bottom: 1px solid rgba(var(--color-rgb-denim), 0.06);
  backdrop-filter: blur(6px);
}

/* restore original vertical padding so header keeps its expected height */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0; /* restore vertical spacing */
  padding-inline-start: var(--gutter);
  padding-inline-end: var(--gutter);
}
.brand {
  color: var(--color-dark-cyan);
  text-decoration: none;
  /* brand: Chillax Bold */
  font-family: "Chillax";
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.2px;
}
.primary-nav {
  margin: 0;
}
.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  color: var(--color-denim);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}
.primary-nav a:hover,
.primary-nav a:focus {
  background: rgba(var(--color-rgb-dusty-blue), 0.12);
  color: var(--color-dark-cyan);
  outline: none;
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
}

/* Header cart button (icon-only, accent colored) */
.cart-btn {
  position: relative;              /* for badge positioning */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--color-light-salmon);
  color: var(--color-dark-cyan); /* SVG uses currentColor / stroke */
  box-shadow: 0 8px 22px rgba(var(--color-rgb-light-salmon),0.16);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease;
}

/* Scaled-up, stroked SVG for clearer outline */
.cart-btn svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
}

/* Wheels are filled by circle elements; ensure they use the currentColor */
.cart-btn svg circle { fill: currentColor; }

/* Hover / focus state consistent with other primary buttons but keeps icon visible */
.cart-btn:hover,
.cart-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  background: linear-gradient(180deg, var(--color-dusty-blue), rgba(var(--color-rgb-dusty-blue),0.9));
  color: var(--color-white);
  outline: none;
}

/* Visible focus ring for keyboard users */
.cart-btn:focus-visible {
  box-shadow: 0 0 0 var(--focus-ring) rgba(156,175,136,0.18);
}

/* Cart icon slide: keep parent shadow static, animate inner target only */
.cart-btn {
  /* keep overflow visible so the badge (positioned outside) is not clipped */
  overflow: visible;
}

/* inner element to be translated; created by JS if missing */
.cart-btn .cart-icon-target {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 1;
  transform-origin: center center;
  will-change: transform;
}

/* subtle forward-and-back translation: stays within the button body */
@keyframes nossa-slide-once {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}

/* apply the animation to the inner target when the parent gets the class */
.cart-btn.slide-once .cart-icon-target {
  animation: nossa-slide-once 360ms cubic-bezier(.2,.9,.2,1);
}

/* Item count badge */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #e23b3b; /* red */
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  pointer-events: none; /* badge should not intercept clicks */
}

/* Header: group right-side controls so nav, toggle and cart align with equal spacing */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem; /* consistent spacing between nav-toggle, nav and cart */
}

/* Slight size tweak for small screens */
@media (max-width: 640px) {
  .cart-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
  .cart-btn svg { width: 20px; height: 20px; }
  .cart-badge { top: -5px; right: -5px; min-width: 16px; height: 16px; font-size: 0.68rem; }
}

/* Hero / Story */
/* keep generic .hero for non-full-bleed variants (index.html, story block) */
.hero {
  position: relative;
  /* baseline background - will normally be covered by image; hero full-bleed uses accent */
  background-color: transparent;
}

/* full-bleed hero variant (shop.html)
   - make the hero image absolutely positioned so its top aligns with the viewport top
   - keep the header above the image via z-index; overlay content sits above the image
*/
.hero.full-bleed {
  position: relative;
  margin-top: calc(-1 * var(--site-header-height)); /* pulls hero image under header */
  padding-top: 0;                                    /* overlay container is absolutely positioned below */
  padding-bottom: var(--hero-accent-gap);            /* accent band under image */
  overflow: hidden;
  background-color: var(--color-light-salmon);
}

/* image remains in normal flow (not absolutely positioned) and fills the section */
.hero.full-bleed .hero-image {
  margin: 0;
  width: 100%;
  height: 52vh;
  min-height: 320px;
  max-height: 720px;
  overflow: hidden;
}
.hero.full-bleed .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* gradient limited to image area (starts below the header and stops above the accent band) */
.hero.full-bleed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--hero-accent-gap));
  background: linear-gradient(90deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0) 70%);
  z-index: 1;
  pointer-events: none;
}

/* overlay container sits above the image but below the header */
.hero.full-bleed > .container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: calc(var(--hero-accent-gap));
  display: flex;
  align-items: center;
  z-index: 2;
  padding-left: calc(var(--gutter) * 1.5);
  padding-right: var(--gutter);
}

/* keep the decorative gradient restricted to the image area */
.hero.full-bleed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* gradient covers the image height only (not the accent strip) */
  bottom: calc(var(--hero-accent-gap));
  background: linear-gradient(90deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0) 70%);
  z-index: 1;
  pointer-events: none;
}

/* Hero inner pieces */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 2rem;
  align-items: center;
}
.hero-image {
  margin: 0;
}
.hero-text {
  pointer-events: auto;     /* allow interaction with text links if any */
  color: #ffffff;
  max-width: 720px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 420px);
  max-width: 42rem;
}

/* heading style tuned for overlay */
.hero-text h1,
.hero-text #hero-title {
  margin: 0;
  color: var(--color-white);
  text-shadow: 0 6px 18px rgba(0,0,0,0.45);
  font-size: clamp(1.25rem, 4.5vw, 2.25rem);
  line-height: 1.12;
}

.hero-text .lead {
  color: rgba(34,34,34,0.8);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.02rem;
}

/* Menu Grid */
.section-header {
  margin-bottom: var(--menu-accent-gap);
}
.menu-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.menu-card {
  background: var(--color-buttercream);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms ease;
  cursor: pointer;
}
.menu-card img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}
.card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.item-title {
  margin: 0;
  color: var(--color-dark-cyan);
  font-size: 1.05rem;
  font-weight: 600;
}
.item-desc {
  margin: 0;
  color: var(--color-denim);
  font-size: 0.95rem;
}
.card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Card interactions */
.menu-card:hover,
.menu-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.menu-card:focus {
  outline: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  color: white;
  transition: background 200ms ease, transform 160ms ease, box-shadow 200ms ease;
  font-size: 0.95rem;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring) rgba(156,175,136,0.18);
  transform: translateY(-1px);
}

/* Primary Pre-order CTA
   Use the reserved accent --color-light-salmon for important pre-order buttons.
   Note: the file previously used a 'darken()' call (Sass). Keep same structure if preprocessed.
*/
.btn.primary,
.btn.pre-order {
  background: linear-gradient(180deg, var(--color-light-salmon), darken(var(--color-light-salmon), 4%));
  color: white;
  box-shadow: 0 8px 22px rgba(212,150,125,0.16);
}
@supports (-webkit-backdrop-filter: blur(20px)) {
  /* Safari (blur in native support) */
  .btn.primary,
  .btn.pre-order {
    background: transparent;
    position: relative;
  }
  .btn.primary::after,
  .btn.pre-order::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, var(--color-light-salmon), darken(var(--color-light-salmon), 4%));
    opacity: 0.8;
    z-index: -1;
    border-radius: 10px;
  }
}

/* Hover: transition to dusty blue (unchanged) */
.btn.primary:hover,
.btn.pre-order:hover,
.btn.primary:focus-visible,
.btn.pre-order:focus-visible {
  background: linear-gradient(180deg, var(--color-dusty-blue), rgba(var(--color-rgb-dusty-blue), 0.9));
  box-shadow: 0 12px 30px rgba(var(--color-rgb-shadow), 0.14);
  transform: translateY(-3px);
}

/* Secondary style (used where appropriate) */
.btn.secondary {
  background: transparent;
  color: var(--color-denim);
  border: 1px solid rgba(91,112,131,0.08);
  padding: 0.5rem 0.75rem;
}
.btn.secondary:hover,
.btn.secondary:focus {
  background: rgba(163,184,204,0.06);
}

/* Price */
.price {
  font-weight: 700;
  color: var(--color-denim);
}

/* Pickup instructions highlight */
.pickup {
  padding: 2rem 0;
}
.pickup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.pickup-notes {
  margin-top: 1rem;
  background: transparent;
  border: 1px solid rgba(156,175,136,0.22); /* soft sage outline */
  border-radius: 10px;
  padding: 1rem;
  color: var(--color-denim);
  box-shadow: 0 6px 18px rgba(34,34,34,0.03);
}
.pickup h3 { color: var(--color-dark-cyan); margin-top: 0; }

/* Footer */
.site-footer {
  border-top: 1px solid rgba(91,112,131,0.06);
  padding: 1.25rem 0;
  margin-top: 2rem;
}
.footer-inner {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.contact a { color: var(--color-dark-cyan); text-decoration: none; }

/* Small utility */
.lead { font-size: 1.03rem; color: rgba(34,34,34,0.85); }
.sub { color: var(--color-denim); font-size: 0.95rem; margin-bottom: 1rem; }

/* Responsive behavior */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .pickup-grid { grid-template-columns: 1fr; }
  .hero.full-bleed > .container {
    justify-content: center;
    align-items: flex-end;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    /* bottom remains constrained by base rule so overlay stays above accent band */
  }
  .hero.full-bleed .hero-text {
    width: 100%;
    max-width: var(--container-max);
    padding-top: 1rem;
    padding-bottom: 1.25rem;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .menu-grid { grid-template-columns: 1fr; gap: 1rem; }
  .nav-toggle { display: block; }

  /* Mobile nav: simple overlay */
  .primary-nav {
    position: absolute;
    top: 64px;
    right: var(--gutter);
    left: var(--gutter);
    background: white;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    display: none;
    padding: 0.75rem;
  }
  .primary-nav[data-open="true"] { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0.5rem; }

  .hero-image img { height: 320px; object-fit: cover; }

  /* Make hero text comfortably readable on small phones */
  .hero-text .lead { font-size: 1rem; }
  .hero-image img { height: 44vh; min-height: 260px; }
  .hero > .container { align-items: flex-end; } /* place text lower on small screens */
  .hero-text { padding: 1rem; }
  .hero-text h1 { font-size: 1.02rem; }
}

/* Accessibility: only show the visible focus ring for keyboard users.
   Use :focus-visible instead of :focus so mouse clicks don't force the
   smaller 8px border-radius or sticky hover color. */
:focus { outline: none; }

a:focus-visible,
button:focus-visible {
  box-shadow: 0 0 0 var(--focus-ring) rgba(91,112,131,0.14);
  /* don't reset border-radius here — keep each control's own radius */
}

/* ------------------------------------------------------------
   Story block: add dedicated rules for story-inner / story-image
   These mirror the hero-* layout behavior but are scoped to the
   story section and include responsive image constraints so the
   story image cannot force horizontal overflow.
   ------------------------------------------------------------ */
.story-inner {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 2rem;
  align-items: center;
  /* prevent grid children from overflowing the grid track */
  min-width: 0;
}
.story-image {
  margin: 0;
  min-width: 0;
  border-radius: var(--radius); /* match .menu-card radius */
  overflow: hidden;             /* clip the img to the rounded container */
}

/* ensure the img fills the rounded container cleanly */
.story-image img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0; /* container handles rounding */
}

/* story-text should behave like hero-text in layout but use page text color */
.story-text {
  pointer-events: auto;
  color: var(--color-text);
  max-width: 720px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 420px);
  max-width: 42rem;
  min-width: 0;
}

/* Heading style tuned for story block (maps hero overlay sizing to story h2) */
.story-text h2,
.story-text #story-title {
  margin: 0;
  color: var(--color-dark-cyan);
  text-shadow: none;
  font-size: clamp(1.1rem, 3.6vw, 1.6rem);
  line-height: 1.18;
}

.story-text .lead {
  color: rgba(34,34,34,0.85);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.02rem;
}

/* Ensure normal page content sits below the header (works whether header is fixed or sticky) */
main {
  padding-top: var(--site-header-height);
}

/* Make non-full-bleed hero content visible below the header.
   We rely on the main padding above; this keeps full-bleed heroes unaffected. */
.hero:not(.full-bleed) > .container {
  position: relative;
  z-index: 2;
}

/* Prevent hero grid children from forcing a wider layout on small screens */
.hero-inner,
.hero-inner > * ,
.hero-image,
.hero-text {
  min-width: 0;
}

/* Constrain hero images (both full-bleed and non-full-bleed) so they never exceed container width */
.hero-image img,
.story-image img,
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Safety: if anything else still overflows, allow the layout to stack earlier */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
}

/* Non full-bleed hero: use accent color and keep content below the header */
.hero:not(.full-bleed) {
  background-color: var(--color-light-salmon);
  /* leave room for the fixed/sticky header and add comfortable vertical spacing */
  padding-top: calc(var(--site-header-height) + 1rem);
  padding-bottom: 2.5rem;
  overflow: hidden; /* defensive: prevents unintended overflow from children */
}

/* Ensure container/content sits above header background and is interactive */
.hero:not(.full-bleed) > .container {
  position: relative;
  z-index: 2;
}

/* Defensive image constraints for the decorative hero image on index.html */
.hero:not(.full-bleed) .hero-image,
.hero:not(.full-bleed) .hero-image img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  min-width: 0; /* allow shrinking on narrow viewports */
}

/* Make the hero grid column flexible to avoid horizontal scrolling on narrow screens */
.hero-inner {
  grid-template-columns: 1fr minmax(0, 420px);
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
}

/* Index hero: rounded, padded image like menu cards and larger image column */
.hero:not(.full-bleed) .hero-image {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0.6rem;                   /* slightly tighter to give more room for the image */
  background: var(--color-buttercream);
  box-shadow: var(--shadow-soft);
}

/* Make the img fill the padded area cleanly */
.hero:not(.full-bleed) .hero-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Give the image column more real-estate so the image appears larger */
.hero:not(.full-bleed) .hero-inner {
  grid-template-columns: 1fr minmax(0, 720px); /* increased from 540px to 720px */
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .hero:not(.full-bleed) .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero:not(.full-bleed) .hero-image {
    padding: 0.5rem;
  }
}

/* ===== Cart + Add-to-cart button styles (append near the end of file) ===== */

/* ADD-TO-CART circular button (replaces previous text Pre-order) */
.btn.add-to-cart {
  position: relative;          /* parent for spin-target; keep shadow on this element */
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  background: var(--color-light-salmon);
  color: var(--color-dark-cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  border: 0;
  box-shadow: 0 8px 20px rgba(var(--color-rgb-shadow), 0.06);
  transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease;
  overflow: visible;
}

/* Inner element that will be rotated — keeps the parent's shadow static */
.btn.add-to-cart .spin-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* ensure transforms on this child do not create their own stacking context affecting the parent */
  transform-origin: center center;
  will-change: transform;
}

/* Hover / focus behavior still applied to button so the button moves and shadow remains correct */
.btn.add-to-cart:hover,
.btn.add-to-cart:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  background: linear-gradient(180deg, var(--color-dusty-blue), rgba(var(--color-rgb-dusty-blue), 0.9));
  color: var(--color-white);
}

/* Spin animation: single 360deg rotation used when clicked */
@keyframes nossa-spin-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Class applied briefly by JS to trigger a single rotation */
.btn.add-to-cart.spin-once .spin-target {
  animation: nossa-spin-once 420ms cubic-bezier(.4,.0,.2,1);
}

/* Cart drawer (right dock on desktop, bottom dock on mobile) */
.cart-drawer {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 380px;
  max-width: 96%;
  transform: translateX(110%);
  /* Slower, accelerating mid-phase and soft landing:
     longer duration + custom cubic-bezier gives the "start slow, speed up, softly reach" feel. */
  transition: transform 480ms cubic-bezier(0.15, 0.15, 0.20, 1);
  will-change: transform;
  z-index: 120;
  background: var(--color-buttercream);
  box-shadow: -18px 0 40px rgba(34,34,34,0.08);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(var(--color-rgb-shadow), 0.04);
  overflow: hidden;
}

/* open state */
.cart-drawer.open {
  transform: translateX(0);
}

/* mobile: dock to bottom */
@media (max-width: 640px) {
  .cart-drawer {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 54vh;
    width: 100%;
    transform: translateY(110%);
    border-left: 0;
    border-top: 1px solid rgba(var(--color-rgb-shadow), 0.04);
    box-shadow: 0 -18px 40px rgba(34,34,34,0.08);
  }
  .cart-drawer.open { transform: translateY(0); }
}

.cart-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* header */
.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(var(--color-rgb-shadow), 0.06);
}
.cart-header h3 {
  margin: 0;
  color: var(--color-dark-cyan);
  font-size: 1.05rem;
}
.cart-close {
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  color: var(--color-denim);
  cursor: pointer;
}

/* body */
.cart-body {
  padding: 0.5rem 0;
  overflow: auto;
  flex: 1 1 auto;
}
.cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-empty {
  padding: 1.25rem;
  color: rgba(var(--color-rgb-text), 0.8);
}

/* each cart item row */
.cart-item {
  display: grid;
  grid-template-columns: 56px 1fr 80px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 0;
}
.cart-item + .cart-item {
  border-top: 1px solid rgba(var(--color-rgb-shadow), 0.06); /* separator line only */
}

/* thumbnail */
.cart-item .thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
}
.cart-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* info (name + short desc) */
.cart-item .info {
  min-width: 0;
}
.cart-item .info .name {
  margin: 0;
  font-weight: 700;
  color: var(--color-dark-cyan);
  font-size: 0.95rem;
}
.cart-item .info .short {
  margin: 0.25rem 0 0 0;
  color: var(--color-denim);
  font-size: 0.83rem;
}

/* controls (qty + remove) */
.cart-item .controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
.qty-controls {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(var(--color-rgb-shadow), 0.06);
  background: white;
}
.qty-controls button {
  width: 30px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-denim);
  font-weight: 700;
}
.qty-controls .qty {
  min-width: 28px;
  text-align: center;
  padding: 0 6px;
  font-weight: 700;
  color: var(--color-dark-cyan);
}

/* remove link */
.cart-item .remove {
  background: transparent;
  border: 0;
  color: var(--color-denim);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
}

/* footer */
.cart-footer {
  padding: 0.75rem;
  border-top: 1px solid rgba(var(--color-rgb-shadow), 0.06);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.cart-subtotal {
  color: var(--color-dark-cyan);
  font-weight: 700;
}
.checkout-btn {
  background: linear-gradient(180deg, var(--color-light-salmon), rgba(var(--color-rgb-light-salmon), 0.92));
  color: var(--color-dark-cyan);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 0;
  box-shadow: 0 8px 20px rgba(var(--color-rgb-shadow), 0.06);
}
.checkout-btn:hover,
.checkout-btn:focus-visible {
  background: linear-gradient(180deg, var(--color-dusty-blue), rgba(var(--color-rgb-dusty-blue), 0.9));
  color: var(--color-white);
}

/* --- Product modal styles (append to the end of style.css) --- */

/* Dimming overlay and modal container */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
}
.product-modal.open {
  display: flex;
}

/* Overlay */
.product-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(0.5px);
}

/* Dialog */
.product-modal .modal-dialog {
  position: relative;
  background: var(--color-buttercream);
  margin: 1.25rem;
  width: min(980px, 95%);
  max-height: calc(100vh - 4rem);
  overflow: auto;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  z-index: 1201;
  outline: none;
  display: flex;
  flex-direction: column;
}

/* Close button */
.product-modal .modal-close {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  padding: 0.5rem;
  cursor: pointer;
}

/* Content layout */
.product-modal .modal-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem 1.25rem 0.75rem 1.25rem;
  align-items: start;
}
.product-modal .modal-left {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-modal .modal-left .modal-image {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* Right column */
.product-modal .modal-right {
  padding-bottom: 0.5rem;
}
.product-modal .modal-title {
  margin: 0 0 0.5rem 0;
  color: var(--color-dark-cyan);
}
.product-modal .modal-longdesc {
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.product-modal .modal-ingredients h4,
.product-modal .modal-disclaimer h4,
.product-modal .modal-allergy h4 {
  margin: 0.5rem 0 0.25rem 0;
  font-size: 0.95rem;
  color: var(--color-dark-cyan);
}
.product-modal .modal-ingredients-list {
  margin: 0 0 0.75rem 1rem;
  padding: 0;
  color: var(--color-dark-cyan);
}

/* Actions row */
.product-modal .modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.75rem 1rem 1rem 1rem;
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* Qty controls */
.product-modal .qty-controls,
.product-modal .modal-qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.product-modal .qty-controls button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--color-white);
  cursor: pointer;
  font-size: 1.1rem;
}
.product-modal .modal-qty {
  min-width: 28px;
  text-align: center;
  font-weight: 600;
}

/* Add item button: left text + right price */
.product-modal .modal-add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--color-light-salmon); /* accent */
  color: var(--color-dark-cyan);
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.product-modal .modal-add-to-cart .modal-add-text {
  margin-right: 0.25rem;
}
.product-modal .modal-add-to-cart .modal-add-price {
  background: rgba(0,0,0,0.08);
  color: var(--color-dark-cyan);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-weight: 700;
}

/* Prevent body scroll when modal open */
body.modal-open {
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 760px) {
  .product-modal .modal-content {
    grid-template-columns: 1fr;
  }
  .product-modal .modal-left {
    order: -1;
    padding: 0 1rem;
  }
  .product-modal .modal-right {
    padding: 0 1rem;
  }
  .product-modal .modal-dialog {
    width: calc(100% - 2rem);
    margin: 1rem;
  }
}