/* QuickGravy backdrop, shared with GravyGo™: warm paper, the faint spice-doodle
   wallpaper (assets/spice-pattern.svg, the same file quickgravy.co.in uses), soft
   orange and lime glows, and a whisper of moving film grain. Loaded after
   styles.css and mobile.css so it sets the page surfaces. The dark hero, the footer,
   the product cards and the sheets keep their own colours.

   Alive: in each light section the doodles drift slowly and the glows breathe, on
   GPU-only layers behind the content. All of it stops under reduced motion. */
:root {
  --paper: #fff8ec;
  --paper-glow-orange: rgba(201, 90, 30, .13);
  --paper-glow-lime: rgba(199, 223, 100, .24);
  --spice-url: url("assets/spice-pattern.svg");
  --spice-tile: 480px;
}

html, body { background: var(--spice-url) 0 0 / var(--spice-tile) repeat, var(--paper); }

/* Film grain over everything, like quickgravy.co.in. Never blocks a tap. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9990;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.1  0 0 0 0 0.06  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: qg-grain .9s steps(2) infinite;
}
@keyframes qg-grain {
  0% { transform: translate(0, 0); }
  50% { transform: translate(1.2%, -.8%); }
  100% { transform: translate(-.6%, 1%); }
}

/* ---------- Living sections: drifting doodles + breathing glows ---------- */
.product-section, .about-section, .how-section, .legal, .track {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: hidden would break the sticky category chips inside. */
  overflow: clip;
  background: var(--paper);
}
.product-section::before, .about-section::before, .how-section::before, .legal::before, .track::before {
  content: "";
  position: absolute;
  inset: -12% -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 86% 10%, var(--paper-glow-orange), transparent 70%),
    radial-gradient(40% 42% at 10% 92%, var(--paper-glow-lime), transparent 70%);
  animation: qg-breathe 16s ease-in-out infinite alternate;
}
.product-section::after, .about-section::after, .how-section::after, .legal::after, .track::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--spice-tile));
  left: calc(-1 * var(--spice-tile));
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--spice-url) 0 0 / var(--spice-tile) repeat;
  will-change: transform;
  backface-visibility: hidden;
  animation: qg-drift 70s linear infinite;
}
/* Neighbouring sections drift and breathe slightly out of step. */
.about-section::before, .legal::before { animation-duration: 19s; animation-delay: -6s; }
.how-section::before { animation-duration: 13s; animation-delay: -3s; }
.about-section::after { animation-duration: 84s; }
.how-section::after { animation-direction: reverse; }
@keyframes qg-drift { to { transform: translate3d(var(--spice-tile), var(--spice-tile), 0); } }
@keyframes qg-breathe {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  50% { transform: translate3d(-3%, 2%, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(2%, -2%, 0) scale(.96); opacity: .8; }
}

.service-strip { background: rgba(255, 253, 247, .72); border-color: rgba(23, 36, 24, .1); }

/* ---------- How it works: three steps as cards, less empty space ---------- */
.how-section { padding: clamp(56px, 7vw, 84px) 0; }
.how-grid { margin-top: 32px; gap: 18px; counter-reset: step; }
.how-grid article {
  position: relative;
  min-height: 0;
  padding: 26px 24px 24px !important;
  overflow: hidden;
  border: 1px solid rgba(23, 36, 24, .1) !important;
  border-radius: 20px;
  background: rgba(255, 253, 247, .86);
  box-shadow: 0 14px 34px -24px rgba(74, 45, 19, .45);
}
/* Big step number as a watermark in the corner. */
.how-grid article::after {
  content: attr(data-step);
  position: absolute;
  right: 14px;
  bottom: -18px;
  color: rgba(201, 90, 30, .1);
  font-family: var(--display-font);
  font-size: 108px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.how-grid article > span { width: 40px; height: 40px; font-size: 14px; background: #c95a1e; box-shadow: 0 6px 14px -6px rgba(201, 90, 30, .7); }
.how-grid h3 { font-size: 18px; }
.how-grid p { max-width: 30ch; }
/* A dotted path joins the steps on wide screens. */
@media (min-width: 901px) {
  .how-grid { position: relative; }
  .how-grid::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; border-top: 2px dashed rgba(201, 90, 30, .25); z-index: -1; }
  .how-grid article { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
  .how-grid article:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(74, 45, 19, .55); }
}

/* ---------- Delivery: a brand-green band instead of a white box ---------- */
.delivery-section { padding: clamp(40px, 6vw, 72px) 0; background: transparent; }
.delivery-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 6%, 64px);
  border: 0;
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(199, 223, 100, .22), transparent 70%),
    radial-gradient(50% 80% at 0% 100%, rgba(201, 90, 30, .28), transparent 70%),
    linear-gradient(135deg, #1d5f35 0%, #143f24 100%);
  box-shadow: 0 30px 60px -36px rgba(20, 63, 36, .7);
}
/* The same doodles, light on dark, drifting. */
.delivery-card::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--spice-tile));
  left: calc(-1 * var(--spice-tile));
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  /* A light copy of the doodles (no CSS filter): a filtered, moving layer made phones
     redraw the whole card every frame, which showed as the button blinking. */
  background: url("assets/spice-pattern-light.svg") 0 0 / var(--spice-tile) repeat;
  will-change: transform;
  backface-visibility: hidden;
  animation: qg-drift 80s linear infinite;
}
.delivery-card .kicker { color: #e8f45d; }
.delivery-card h2 { color: #fff; }
.delivery-card > div > p:not(.kicker) { color: rgba(255, 255, 255, .78); }
.delivery-card .inline-pincode label { color: rgba(255, 255, 255, .85); }
.delivery-card .inline-pincode input { border-color: transparent; background: #fff; }
.delivery-card .inline-pincode input:focus { box-shadow: 0 0 0 3px rgba(232, 244, 93, .45); }
.delivery-card .inline-pincode .button--primary { color: #143320; background: #e8f45d; box-shadow: 0 3px 0 #a9b45a; }
.delivery-card .inline-pincode .button--primary:hover { background: #f0f78a; }
.delivery-card .inline-pincode output { color: rgba(255, 255, 255, .8); }
.delivery-card .inline-pincode output.error { color: #ffc9b8; }
.delivery-card .inline-pincode output.pending { color: #e8f45d; }

/* ---------- Phones ---------- */
@media (max-width: 900px) {
  body { background: var(--spice-url) 0 0 / var(--spice-tile) repeat, var(--paper); }
  .site-header { background: rgba(255, 248, 236, .97) !important; border-bottom-color: rgba(23, 36, 24, .1); }
  /* The pinned chips need a solid strip so cards don't show through as they scroll under it. */
  .shop-controls { background: var(--paper); }
  .about-section, .service-strip { background: rgba(255, 253, 247, .6); }
  .about-section { background: var(--paper); }
  .how-section { padding: 40px 0; }
  .how-grid { margin-top: 20px; gap: 12px; }
  .how-grid article { padding: 20px 18px !important; }
  .how-grid article::after { font-size: 84px; bottom: -14px; }
  .delivery-section { padding: 24px 0 40px; background: transparent; }
  .delivery-card { padding: 28px 22px; border-radius: 22px; }
  .delivery-card h2 { font-size: 28px; }
  /* The brown hero runs right down to the flavour ticker, which sits across its bottom edge. */
  .hero { -webkit-mask-image: none; mask-image: none; }
  .hero__stage { padding-bottom: 0; }
  .hero__media { margin-bottom: 0; padding-bottom: 0; }
  /* The photo runs to the very bottom of the brown: soft top and sides, hard bottom edge. */
  .hero .hero__media picture img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 100%), linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  /* The ticker lies across the photo's bottom edge; Shop the range starts right below it. */
  .flavour-ribbon { position: relative; z-index: 3; margin: -26px 0 0; padding: 6px 0; rotate: none; background: rgba(25, 85, 47, .92); }
  .flavour-ribbon span { font-size: 10.5px; line-height: 14px; }
  /* The photo starts right under the text; "Shop the range" floats over its dark top, above the tubs. */
  .hero .hero__inner { padding-bottom: 0; }
  .hero .hero__actions { position: relative; z-index: 3; margin-top: 8px; }
  .hero .hero__actions .button--primary { min-height: 40px; width: auto; padding: 0 26px; font-size: 14px; }
  .hero .hero__media { margin-top: -38px; }
  /* A taller hero: more brown above the text, a larger headline, and the photo a little
     wider than the screen (only the outer edges of the props are trimmed). */
  .hero .hero__inner { padding-top: 40px; }
  .hero h1 { font-size: clamp(36px, 10.6vw, 52px); }
  .hero .hero__content > p:not(.kicker) { margin-top: 14px; font-size: 15px; }
  .hero .hero__media { width: 116%; max-width: none; margin-left: -8%; }
  /* Kuttappan's peek in the photo's corner sits just above the ticker. */
  .hero__kp:not([hidden]) { bottom: 36px; }
  /* Like quickgravy.co.in on phones: fainter and still grain. */
  body::after { opacity: .018; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .product-section::before, .about-section::before, .how-section::before, .legal::before, .track::before,
  .product-section::after, .about-section::after, .how-section::after, .legal::after, .track::after,
  .delivery-card::before { animation: none; }
  .how-grid article:hover { transform: none; }
}

/* "Contains cashew": inside the ingredients box header on wide screens, so that card's
   box lines up with its neighbours. Phones hide the box, so the line under the name stays. */
.product-card__allergen-tag { display: none; }
@media (min-width: 901px) {
  .product-card__info > .product-card__allergen { display: none; }
  .product-card__ingredients h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .product-card__allergen-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; color: #8a321b; background: #fbe7dd; font-size: 10px; letter-spacing: .04em; white-space: nowrap; margin: -3px 0; }
}