/*
Theme Name:  SirsiRuchi
Theme URI:   https://sirsiruchi.in
Description: Custom child theme for SirsiRuchi, built on GeneratePress.
Author:      SirsiRuchi
Version:     1.0.0
Template:    generatepress
Text Domain: sirsiruchi
*/

/* Fonts (abhi @import se; baad me performance ke liye self-host karenge) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* =========================================================
   SIRSIRUCHI DESIGN SYSTEM
   (yahi humne static design me banaya tha)
   ========================================================= */

/* ============================================================
   DESIGN TOKENS  (locked to brief: red #E12713 + white system)
   ============================================================ */
:root {
   --red: #E12713;
   /* primary brand */
   --red-deep: #B71D0C;
   /* hover / depth */
   --red-ink: #7E1308;
   /* darkest red for gradients */
   --white: #FFFFFF;
   --ink: #1A1A1A;
   /* dark text */
   --ink-soft: #55504D;
   /* secondary text */
   --bg-soft: #F8F8F8;
   /* light background */
   --border: #EEEEEE;
   --success: #22C55E;
   --warm: #FFF5EE;
   /* warm food accent */
   --warm-2: #FDE7DC;
   /* warmer step */
   --peach: #FDC9B2;
   /* matches product photo backdrop */
   --gold: #C9821B;
   /* spice tone used only inside food illustrations */

   --shadow-sm: 0 2px 8px rgba(26, 26, 26, .06);
   --shadow-md: 0 12px 32px rgba(26, 26, 26, .10);
   --shadow-red: 0 12px 28px rgba(225, 39, 19, .30);

   --r-sm: 10px;
   --r-md: 16px;
   --r-lg: 24px;
   --r-xl: 32px;
   --r-pill: 999px;

   --ff-display: 'Poppins', system-ui, sans-serif;
   --ff-body: 'Inter', system-ui, sans-serif;

   --maxw: 1200px;
   --pad: clamp(20px, 5vw, 40px);
   --gap-section: clamp(64px, 9vw, 112px);

   --header-h: 64px;
}

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

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

@media (prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }
}

body {
   font-family: var(--ff-body);
   color: var(--ink);
   background: var(--white);
   line-height: 1.6;
   font-size: 16px;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

img,
svg {
   display: block;
   max-width: 100%;
   height: auto
}

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

button {
   font-family: inherit;
   cursor: pointer;
   border: none;
   background: none
}

ul {
   list-style: none
}

h1,
h2,
h3,
h4 {
   font-family: var(--ff-display);
   line-height: 1.12;
   letter-spacing: -.02em;
   font-weight: 700;
   color: var(--ink)
}

h2 {
   font-size: clamp(1.9rem, 5vw, 2.9rem)
}

h3 {
   font-size: clamp(1.2rem, 3vw, 1.5rem)
}

.wrap {
   max-width: var(--maxw);
   margin-inline: auto;
   padding-inline: var(--pad)
}

.section {
   padding-block: var(--gap-section)
}

:focus-visible {
   outline: 3px solid var(--red);
   outline-offset: 3px;
   border-radius: 4px
}

.skip {
   position: absolute;
   left: -9999px;
   top: 0;
   z-index: 200;
   background: var(--ink);
   color: #fff;
   padding: 12px 18px;
   border-radius: 0 0 10px 0;
   font-weight: 600
}

.skip:focus {
   left: 0
}

/* eyebrow label – recurring structural device */
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .74rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 14px;
}

.eyebrow::before {
   content: "";
   width: 22px;
   height: 2px;
   background: var(--red);
   border-radius: 2px
}

.section-head {
   max-width: 640px;
   margin-bottom: clamp(34px, 5vw, 52px)
}

.section-head.center {
   margin-inline: auto;
   text-align: center
}

.section-head p {
   color: var(--ink-soft);
   margin-top: 14px;
   font-size: 1.04rem
}

/* spice-dash divider (signature motif) */
.dash {
   display: flex;
   gap: 6px;
   justify-content: center;
   margin: 0 auto
}

.dash span {
   width: 6px;
   height: 6px;
   border-radius: 2px;
   background: var(--red);
   transform: rotate(45deg);
   opacity: .85
}

.dash span:nth-child(2) {
   opacity: .55
}

.dash span:nth-child(3) {
   opacity: .3
}

/* ----------- BUTTONS ----------- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1rem;
   padding: 15px 26px;
   border-radius: var(--r-pill);
   transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
   white-space: nowrap;
}

.btn svg {
   width: 18px;
   height: 18px
}

.btn-primary {
   background: var(--red);
   color: #fff;
   box-shadow: var(--shadow-red)
}

.btn-primary:hover {
   background: var(--red-deep);
   transform: translateY(-2px)
}

.btn-primary:active {
   transform: translateY(0)
}

.btn-ghost {
   background: var(--white);
   color: var(--ink);
   border: 1.5px solid var(--border)
}

.btn-ghost:hover {
   border-color: var(--ink);
   transform: translateY(-2px)
}

.btn-lg {
   padding: 18px 34px;
   font-size: 1.06rem
}

.btn-block {
   width: 100%
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
   background: var(--ink);
   color: #fff;
   font-size: .84rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 38px;
   overflow: hidden;
   position: relative;
   text-align: center;
}

.announce .track {
   display: flex;
   flex-direction: column
}

.announce .msg {
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding-inline: 16px
}

.announce .msg b {
   color: #fff
}

.announce strong {
   color: #FFC9C0;
   font-weight: 600
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
   position: sticky;
   top: 0;
   z-index: 90;
   background: rgba(255, 255, 255, .86);
   backdrop-filter: saturate(160%) blur(12px);
   -webkit-backdrop-filter: saturate(160%) blur(12px);
   border-bottom: 1px solid transparent;
   transition: box-shadow .3s, border-color .3s;
}

.header.scrolled {
   box-shadow: var(--shadow-sm);
   border-bottom-color: var(--border)
}

.nav {
   display: flex;
   align-items: center;
   gap: 18px;
   height: var(--header-h)
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.25rem;
   letter-spacing: -.02em
}

.brand .logo {
   height: 60px;
   width: auto;
   flex: none
}

.foot-logo {
   margin-bottom: 14px
}

.foot-logo .logo {
   height: 34px
}

.brand b {
   color: var(--red)
}

.nav-links {
   display: none;
   gap: 28px;
   margin-left: 24px;
   font-weight: 500;
   font-size: .95rem
}

.nav-links a {
   position: relative;
   padding: 4px 0;
   color: var(--ink-soft);
   transition: color .2s
}

.nav-links a:hover {
   color: var(--ink)
}

.nav-links a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -2px;
   width: 0;
   height: 2px;
   background: var(--red);
   transition: width .25s
}

.nav-links a:hover::after {
   width: 100%
}

.nav-actions {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 8px
}

.icon-btn {
   width: 44px;
   height: 44px;
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   position: relative;
   color: var(--ink);
   transition: background .2s;
   padding: 0;
}

.icon-btn:hover {
   background: var(--bg-soft)
}

.icon-btn svg {
   width: 22px;
   height: 22px
}

.cart-count {
   position: absolute;
   top: 5px;
   right: 4px;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   background: var(--red);
   color: #fff;
   font-size: .68rem;
   font-weight: 700;
   font-family: var(--ff-display);
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   line-height: 1;
   transform: scale(0);
   transition: transform .25s cubic-bezier(.3, 1.4, .5, 1)
}

.cart-count.show {
   transform: scale(1)
}

.header .btn {
   display: none;
   padding: 11px 22px
}

.menu-toggle {
   display: grid
}

@media(min-width:880px) {
   .nav-links {
      display: flex
   }

   .menu-toggle {
      display: none
   }

   .header .btn {
      display: inline-flex
   }
}

/* ============================================================
   HERO — the thesis: pack + dish + spice glow
   ============================================================ */
.hero {
   position: relative;
   background: linear-gradient(180deg, var(--warm) 0%, #fff 78%);
   overflow: hidden;
   padding-top: clamp(36px, 7vw, 64px);
   padding-bottom: clamp(36px, 7vw, 72px)
}

.hero::before {
   /* warm radial spice glow */
   content: "";
   position: absolute;
   top: -12%;
   right: -18%;
   width: 70vw;
   height: 70vw;
   max-width: 760px;
   max-height: 760px;
   background: radial-gradient(circle, rgba(225, 39, 19, .16), rgba(225, 39, 19, 0) 62%);
   pointer-events: none;
}

.hero-grid {
   display: grid;
   gap: clamp(24px, 5vw, 40px);
   align-items: center;
   position: relative;
   z-index: 2
}

.hero-rating {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
   padding: 7px 14px;
   border-radius: var(--r-pill);
   font-size: .86rem;
   font-weight: 500;
   margin-bottom: 20px
}

.hero-rating .stars {
   color: #F5A623;
   letter-spacing: 1px;
   font-size: .95rem
}

.hero-rating b {
   font-family: var(--ff-display)
}

.hero h1 {
   font-size: clamp(2.2rem, 7vw, 3.7rem);
   font-weight: 800;
   margin-bottom: 18px
}

.hero h1 .hl {
   color: var(--red);
   position: relative;
   white-space: nowrap
}

.hero .lead {
   font-size: clamp(1.04rem, 2.4vw, 1.18rem);
   color: var(--ink-soft);
   max-width: 520px;
   margin-bottom: 28px
}

.hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 30px
}

.hero-trust {
   display: grid;
   grid-template-columns: repeat(2, auto);
   gap: 12px 26px;
   justify-content: start
}

.hero-trust li {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: .92rem;
   font-weight: 500;
   color: var(--ink)
}

.hero-trust .tick {
   width: 22px;
   height: 22px;
   flex: none;
   border-radius: var(--r-pill);
   background: rgba(34, 197, 94, .12);
   color: var(--success);
   display: grid;
   place-items: center
}

.hero-trust .tick svg {
   width: 13px;
   height: 13px
}

.hero-visual {
   position: relative;
   display: grid;
   place-items: center;
   min-height: 320px
}

.hero-visual .pack {
   width: min(78%, 360px);
   filter: drop-shadow(0 26px 36px rgba(126, 19, 8, .28));
   animation: float 6s ease-in-out infinite
}

.hero-visual .bowl {
   position: absolute;
   width: 42%;
   max-width: 230px;
   bottom: -2%;
   right: 2%;
   filter: drop-shadow(0 18px 26px rgba(126, 19, 8, .22));
   animation: float 6s ease-in-out infinite .8s
}

.hero-badge {
   position: absolute;
   top: 4%;
   left: 0;
   background: #fff;
   border-radius: var(--r-md);
   box-shadow: var(--shadow-md);
   padding: 11px 15px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   font-size: .84rem;
   font-family: var(--ff-display);
   animation: float 5.4s ease-in-out infinite .4s
}

.hero-badge .dot {
   width: 30px;
   height: 30px;
   border-radius: var(--r-pill);
   background: var(--warm);
   display: grid;
   place-items: center;
   font-size: 1.05rem
}

.hero-visual .prod-frame {
   width: min(92%, 440px);
   border-radius: var(--r-xl);
   overflow: hidden;
   background: var(--peach);
   box-shadow: 0 30px 60px -18px rgba(126, 19, 8, .45);
   animation: float 6s ease-in-out infinite
}

.hero-visual .prod-frame img {
   width: 100%;
   display: block
}

/* drifting spice flecks */
.fleck {
   position: absolute;
   border-radius: 2px;
   opacity: .0;
   pointer-events: none;
   animation: drift 9s linear infinite
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

@keyframes drift {
   0% {
      opacity: 0;
      transform: translateY(20px) rotate(0)
   }

   12% {
      opacity: .7
   }

   88% {
      opacity: .5
   }

   100% {
      opacity: 0;
      transform: translateY(-80px) rotate(220deg)
   }
}

@media (prefers-reduced-motion:reduce) {

   .hero-visual .prod-frame,
   .hero-badge,
   .fleck {
      animation: none
   }

   .fleck {
      display: none
   }
}

@media(min-width:880px) {
   .hero-grid {
      grid-template-columns: 1.05fr .95fr
   }

   .hero-visual {
      min-height: 480px
   }
}

/* ============================================================
   WHY CHOOSE — glass cards
   ============================================================ */
.why {
   background: linear-gradient(180deg, #fff, var(--bg-soft))
}

.why-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.why-card {
   position: relative;
   background: rgba(255, 255, 255, .7);
   border: 1px solid var(--border);
   backdrop-filter: blur(8px);
   border-radius: var(--r-lg);
   padding: 26px 24px;
   box-shadow: var(--shadow-sm);
   transition: transform .25s, box-shadow .25s, border-color .25s;
   overflow: hidden;
}

.why-card::after {
   content: "";
   position: absolute;
   inset: 0 0 auto 0;
   height: 3px;
   background: linear-gradient(90deg, var(--red), var(--gold));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s
}

.why-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md);
   border-color: transparent
}

.why-card:hover::after {
   transform: scaleX(1)
}

.why-ic {
   width: 54px;
   height: 54px;
   border-radius: var(--r-md);
   background: var(--warm);
   display: grid;
   place-items: center;
   margin-bottom: 16px;
   color: var(--red)
}

.why-ic svg {
   width: 28px;
   height: 28px
}

.why-card h3 {
   font-size: 1.16rem;
   margin-bottom: 7px
}

.why-card p {
   color: var(--ink-soft);
   font-size: .94rem
}

/* ============================================================
   PRODUCT SHOWCASE
   ============================================================ */
.shop {
   background: var(--white)
}

.shop-grid {
   display: grid;
   gap: 22px;
   grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
   align-items: stretch
}

.pcard {
   position: relative;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   overflow: hidden;
   transition: transform .25s, box-shadow .25s, border-color .25s
}

.pcard:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md)
}

.pcard.featured {
   border-color: var(--red);
   box-shadow: 0 0 0 1px var(--red), var(--shadow-md)
}

.pcard .tag {
   position: absolute;
   top: 14px;
   left: 14px;
   z-index: 3;
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .72rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 6px 12px;
   border-radius: var(--r-pill)
}

.pcard .tag.save {
   left: auto;
   right: 14px;
   background: var(--ink)
}

.pcard .media {
   background: var(--peach);
   display: grid;
   place-items: center;
   overflow: hidden
}

.pcard .media img {
   width: 100%;
   display: block;
   transition: transform .5s
}

.pcard:hover .media img {
   transform: scale(1.06)
}

.pcard .body {
   padding: 20px 22px 24px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.pcard h3 {
   font-size: 1.22rem;
   margin-bottom: 3px
}

.pcard .qtytxt {
   font-size: .84rem;
   color: var(--ink-soft);
   margin-bottom: 12px
}

.pcard .feat {
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 7px
}

.pcard .feat li {
   display: flex;
   gap: 8px;
   font-size: .9rem;
   color: var(--ink-soft)
}

.pcard .feat svg {
   width: 16px;
   height: 16px;
   color: var(--success);
   flex: none;
   margin-top: 3px
}

.price {
   display: flex;
   align-items: baseline;
   gap: 10px;
   margin-bottom: 4px
}

.price .now {
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.7rem;
   color: var(--ink)
}

.price .was {
   font-size: 1rem;
   color: var(--ink-soft);
   text-decoration: line-through
}

.price .off {
   font-size: .78rem;
   font-weight: 700;
   color: var(--success);
   background: rgba(34, 197, 94, .12);
   padding: 3px 8px;
   border-radius: var(--r-pill)
}

.unitprice {
   font-size: .8rem;
   color: var(--ink-soft);
   margin-bottom: 16px
}

.pcard .actions {
   margin-top: auto;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.qty {
   display: flex;
   align-items: center;
   border: 1.5px solid var(--border);
   border-radius: var(--r-pill);
   overflow: hidden;
   width: fit-content
}

.qty button {
   width: 40px;
   height: 40px;
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--ink);
   display: grid;
   place-items: center;
   transition: background .15s
}

.qty button:hover {
   background: var(--bg-soft)
}

.qty input {
   width: 42px;
   text-align: center;
   border: none;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1rem;
   color: var(--ink);
   background: none;
   -moz-appearance: textfield
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0
}

/* ============================================================
   STORY
   ============================================================ */
.story {
   background: var(--ink);
   color: #fff;
   position: relative;
   overflow: hidden
}

.story::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 15% 20%, rgba(225, 39, 19, .28), transparent 45%)
}

.story .wrap {
   position: relative;
   z-index: 2
}

.story-grid {
   display: grid;
   gap: clamp(28px, 5vw, 56px);
   align-items: center
}

.story h2 {
   color: #fff
}

.story .eyebrow {
   color: #FF9080
}

.story .eyebrow::before {
   background: #FF9080
}

.story p {
   color: rgba(255, 255, 255, .78);
   margin-top: 16px;
   font-size: 1.04rem
}

.story .signoff {
   margin-top: 22px;
   font-family: var(--ff-display);
   font-weight: 600;
   color: #fff
}

.story .signoff span {
   display: block;
   font-family: var(--ff-body);
   font-weight: 400;
   font-size: .86rem;
   color: rgba(255, 255, 255, .6)
}

.story-visual {
   position: relative;
   display: grid;
   place-items: center;
   min-height: 280px
}

.story-visual .map-card {
   width: 100%;
   max-width: 420px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--r-lg);
   padding: 26px
}

.story-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   margin-top: 24px
}

.story-stats div {
   text-align: center;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--r-md);
   padding: 16px 8px
}

.story-stats b {
   display: block;
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.7rem;
   color: #fff
}

.story-stats span {
   font-size: .74rem;
   color: rgba(255, 255, 255, .6);
   letter-spacing: .04em
}

@media(min-width:880px) {
   .story-grid {
      grid-template-columns: 1fr 1fr
   }
}

/* ============================================================
   HOW IT WORKS  (a real 3-step sequence -> numbered)
   ============================================================ */
.how {
   background: var(--warm)
}

.steps {
   display: grid;
   gap: 20px;
   grid-template-columns: 1fr;
   counter-reset: step
}

.step {
   position: relative;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 28px 24px;
   text-align: center
}

.step .num {
   position: absolute;
   top: -16px;
   left: 50%;
   transform: translateX(-50%);
   width: 34px;
   height: 34px;
   border-radius: var(--r-pill);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 700;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-red)
}

.step .art {
   width: 96px;
   height: 96px;
   margin: 14px auto 16px
}

.step h3 {
   font-size: 1.18rem;
   margin-bottom: 8px
}

.step p {
   color: var(--ink-soft);
   font-size: .94rem
}

@media(min-width:760px) {
   .steps {
      grid-template-columns: repeat(3, 1fr)
   }
}

/* ============================================================
   INGREDIENTS
   ============================================================ */
.ing {
   background: #fff
}

.ing-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
}

.ing-card {
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 22px 14px;
   text-align: center;
   transition: transform .25s, background .25s
}

.ing-card:hover {
   transform: translateY(-5px);
   background: var(--warm)
}

.ing-card .ill {
   width: 60px;
   height: 60px;
   margin: 0 auto 12px;
   animation: floats 5s ease-in-out infinite
}

.ing-card:nth-child(2n) .ill {
   animation-delay: .6s
}

.ing-card:nth-child(3n) .ill {
   animation-delay: 1.1s
}

.ing-card b {
   font-family: var(--ff-display);
   font-size: .98rem
}

.ing-card span {
   display: block;
   font-size: .78rem;
   color: var(--ink-soft);
   margin-top: 2px
}

@keyframes floats {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-7px)
   }
}

@media (prefers-reduced-motion:reduce) {
   .ing-card .ill {
      animation: none
   }
}

.ing-note {
   text-align: center;
   margin-top: 26px;
   font-size: .9rem;
   color: var(--ink-soft)
}

.ing-note b {
   color: var(--ink)
}

/* ============================================================
   RECIPE
   ============================================================ */
.recipe {
   background: var(--bg-soft)
}

.recipe-grid {
   display: grid;
   gap: clamp(26px, 5vw, 48px);
   align-items: start
}

.video {
   position: relative;
   border-radius: var(--r-lg);
   overflow: hidden;
   background: linear-gradient(150deg, var(--red-ink), var(--red));
   aspect-ratio: 4/3;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-md)
}

.video .play {
   width: 78px;
   height: 78px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, .92);
   display: grid;
   place-items: center;
   color: var(--red);
   transition: transform .25s;
   cursor: pointer
}

.video .play:hover {
   transform: scale(1.08)
}

.video .play svg {
   width: 30px;
   height: 30px;
   margin-left: 4px
}

.video .label {
   position: absolute;
   bottom: 16px;
   left: 18px;
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .95rem
}

.video .label span {
   display: block;
   font-weight: 400;
   font-size: .78rem;
   opacity: .8
}

.recipe-meta {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 20px
}

.chip {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-pill);
   padding: 7px 14px;
   font-size: .82rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 7px
}

.chip svg {
   width: 15px;
   height: 15px;
   color: var(--red)
}

.recipe ol {
   counter-reset: r;
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-bottom: 24px
}

.recipe ol li {
   position: relative;
   padding-left: 46px;
   color: var(--ink-soft)
}

.recipe ol li::before {
   counter-increment: r;
   content: counter(r);
   position: absolute;
   left: 0;
   top: -2px;
   width: 30px;
   height: 30px;
   border-radius: var(--r-pill);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: .9rem;
   display: grid;
   place-items: center
}

.recipe ol li b {
   color: var(--ink)
}

@media(min-width:820px) {
   .recipe-grid {
      grid-template-columns: .9fr 1.1fr
   }
}

/* ============================================================
   REVIEWS — carousel
   ============================================================ */
.reviews {
   background: #fff;
   overflow: hidden
}

.rv-viewport {
   overflow: hidden
}

.rv-track {
   display: flex;
   transition: transform .5s cubic-bezier(.4, 0, .2, 1)
}

.rv-card {
   flex: 0 0 100%;
   padding: 4px
}

.rv-inner {
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 28px 26px;
   height: 100%
}

.rv-stars {
   color: #F5A623;
   letter-spacing: 2px;
   margin-bottom: 14px
}

.rv-text {
   font-size: 1.08rem;
   color: var(--ink);
   margin-bottom: 20px;
   font-weight: 500
}

.rv-who {
   display: flex;
   align-items: center;
   gap: 13px
}

.rv-av {
   width: 46px;
   height: 46px;
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   font-family: var(--ff-display);
   font-weight: 700;
   color: #fff;
   font-size: 1.05rem
}

.rv-who b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block
}

.rv-who span {
   font-size: .8rem;
   color: var(--ink-soft)
}

.rv-who .verified {
   font-size: .72rem;
   color: var(--success);
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 4px
}

.rv-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 24px
}

.rv-arrow {
   width: 46px;
   height: 46px;
   border-radius: var(--r-pill);
   border: 1.5px solid var(--border);
   display: grid;
   place-items: center;
   color: var(--ink);
   transition: background .2s, border-color .2s;
   padding: 0;
}

.rv-arrow:hover {
   background: var(--red);
   color: #fff;
   border-color: var(--red)
}

.rv-dots {
   display: flex;
   gap: 8px
}

.rv-dot {
   width: 9px;
   height: 9px;
   border-radius: var(--r-pill);
   background: var(--border);
   transition: width .3s, background .3s
}

.rv-dot.active {
   width: 26px;
   background: var(--red)
}

@media(min-width:760px) {
   .rv-card {
      flex-basis: 50%
   }
}

@media(min-width:1080px) {
   .rv-card {
      flex-basis: 33.333%
   }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
   background: var(--ink);
   color: #fff
}

.trust-grid {
   display: grid;
   gap: 14px;
   grid-template-columns: repeat(2, 1fr)
}

.trust-item {
   display: flex;
   align-items: center;
   gap: 13px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--r-md);
   padding: 16px 18px
}

.trust-item .tic {
   width: 42px;
   height: 42px;
   flex: none;
   border-radius: var(--r-md);
   background: rgba(225, 39, 19, .18);
   color: #FF9080;
   display: grid;
   place-items: center
}

.trust-item .tic svg {
   width: 22px;
   height: 22px
}

.trust-item b {
   font-family: var(--ff-display);
   font-size: .96rem
}

.trust-item span {
   font-size: .78rem;
   color: rgba(255, 255, 255, .6)
}

@media(min-width:660px) {
   .trust-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
   background: #fff
}

.faq-list {
   max-width: 760px;
   margin-inline: auto;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.faq-item {
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   overflow: hidden;
   background: #fff;
   transition: border-color .2s, box-shadow .2s
}

.faq-item.open {
   border-color: var(--red);
   box-shadow: var(--shadow-sm)
}

.faq-q {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   text-align: left;
   padding: 20px 22px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1.02rem;
   color: var(--ink)
}

.faq-q .ic {
   flex: none;
   width: 28px;
   height: 28px;
   border-radius: var(--r-pill);
   background: var(--warm);
   color: var(--red);
   display: grid;
   place-items: center;
   transition: transform .3s, background .3s
}

.faq-item.open .faq-q .ic {
   transform: rotate(45deg);
   background: var(--red);
   color: #fff
}

.faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease
}

.faq-a p {
   padding: 0 22px 22px;
   color: var(--ink-soft)
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final {
   background: linear-gradient(135deg, var(--red), var(--red-ink));
   color: #fff;
   text-align: center;
   position: relative;
   overflow: hidden
}

.final::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .16), transparent 40%)
}

.final .wrap {
   position: relative;
   z-index: 2;
   max-width: 680px
}

.final h2 {
   color: #fff;
   font-size: clamp(2rem, 5.5vw, 3rem)
}

.final p {
   color: rgba(255, 255, 255, .9);
   margin: 16px auto 30px;
   font-size: 1.1rem;
   max-width: 480px
}

.final .btn-primary {
   background: #fff;
   color: var(--red);
   box-shadow: 0 12px 28px rgba(0, 0, 0, .25)
}

.final .btn-primary:hover {
   background: var(--warm)
}

.final .sub {
   margin-top: 18px;
   font-size: .84rem;
   color: rgba(255, 255, 255, .8);
   display: flex;
   gap: 18px;
   justify-content: center;
   flex-wrap: wrap
}

.final .sub span {
   display: inline-flex;
   align-items: center;
   gap: 6px
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
   background: #111;
   color: rgba(255, 255, 255, .7);
   padding-block: clamp(48px, 7vw, 72px) 28px
}

.foot-grid {
   display: grid;
   gap: 34px;
   grid-template-columns: 1fr
}

.foot-brand .brand {
   color: #fff;
   margin-bottom: 14px
}

.foot-brand p {
   font-size: .9rem;
   max-width: 300px;
   margin-bottom: 18px
}

.socials {
   display: flex;
   gap: 10px
}

.socials a {
   width: 40px;
   height: 40px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, .08);
   display: grid;
   place-items: center;
   color: #fff;
   transition: background .2s, transform .2s
}

.socials a:hover {
   background: var(--red);
   transform: translateY(-3px)
}

.socials svg {
   width: 18px;
   height: 18px
}

.foot-col h4 {
   color: #fff;
   font-size: .82rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   margin-bottom: 16px
}

.foot-col ul {
   display: flex;
   flex-direction: column;
   gap: 11px
}

.foot-col a {
   font-size: .9rem;
   transition: color .2s
}

.foot-col a:hover {
   color: #fff
}

.foot-contact li {
   font-size: .9rem;
   margin-bottom: 11px;
   display: flex;
   gap: 9px
}

.foot-contact svg {
   width: 17px;
   height: 17px;
   flex: none;
   margin-top: 3px;
   color: var(--red)
}

.fssai {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 10px;
   font-size: .78rem;
   background: rgba(255, 255, 255, .06);
   padding: 7px 12px;
   border-radius: var(--r-sm)
}

.foot-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   margin-top: 38px;
   padding-top: 24px;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: space-between;
   font-size: .82rem
}

@media(min-width:680px) {
   .foot-grid {
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 40px
   }
}

@media(min-width:920px) {
   .foot-grid {
      grid-template-columns: 1.8fr 1fr 1fr 1.3fr
   }
}

/* ============================================================
   MOBILE MENU
   ============================================================ */
.scrim {
   position: fixed;
   inset: 0;
   background: rgba(26, 26, 26, .5);
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s;
   z-index: 95
}

.scrim.show {
   opacity: 1;
   visibility: visible
}

.mobile-menu {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: min(82vw, 330px);
   background: #fff;
   z-index: 96;
   transform: translateX(100%);
   transition: transform .35s cubic-bezier(.4, 0, .2, 1);
   padding: 22px;
   display: flex;
   flex-direction: column;
   box-shadow: -12px 0 40px rgba(0, 0, 0, .16)
}

.mobile-menu.show {
   transform: translateX(0)
}

.mobile-menu .top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 26px
}

.mobile-menu nav {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.mobile-menu nav a {
   padding: 14px 12px;
   border-radius: var(--r-sm);
   font-family: var(--ff-display);
   font-weight: 500;
   font-size: 1.06rem;
   transition: background .15s
}

.mobile-menu nav a:hover {
   background: var(--bg-soft)
}

.mobile-menu .btn {
   margin-top: 20px
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: min(92vw, 400px);
   background: #fff;
   z-index: 110;
   transform: translateX(100%);
   transition: transform .38s cubic-bezier(.4, 0, .2, 1);
   display: flex;
   flex-direction: column;
   box-shadow: -12px 0 40px rgba(0, 0, 0, .18)
}

.cart.show {
   transform: translateX(0)
}

.cart-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 22px;
   border-bottom: 1px solid var(--border)
}

.cart-head h3 {
   font-size: 1.15rem
}

.cart-items {
   flex: 1;
   overflow-y: auto;
   padding: 8px 22px
}

.cart-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   text-align: center;
   color: var(--ink-soft);
   gap: 14px
}

.cart-empty svg {
   width: 64px;
   height: 64px;
   color: var(--border)
}

.ci {
   display: flex;
   gap: 14px;
   padding: 18px 0;
   border-bottom: 1px solid var(--border)
}

.ci .thumb {
   width: 62px;
   height: 62px;
   flex: none;
   border-radius: var(--r-sm);
   background: var(--peach);
   overflow: hidden
}

.ci .thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.ci .info {
   flex: 1;
   min-width: 0
}

.ci .info b {
   font-family: var(--ff-display);
   font-size: .95rem;
   display: block
}

.ci .info .pr {
   color: var(--red);
   font-weight: 600;
   font-size: .9rem;
   margin-top: 2px
}

.ci .ctrls {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 8px
}

.ci .ctrls .qty {
   transform: scale(.85);
   transform-origin: left
}

.ci .rm {
   font-size: .78rem;
   color: var(--ink-soft);
   text-decoration: underline
}

.ci .rm:hover {
   color: var(--red)
}

.cart-foot {
   border-top: 1px solid var(--border);
   padding: 20px 22px;
   background: var(--bg-soft)
}

.cart-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 8px;
   font-size: .92rem;
   color: var(--ink-soft)
}

.cart-row.total {
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: 1.2rem;
   color: var(--ink);
   margin: 12px 0 16px
}

.cart-row.total span {
   color: var(--red)
}

.cart-note {
   text-align: center;
   font-size: .78rem;
   color: var(--ink-soft);
   margin-top: 12px
}

/* ============================================================
   STICKY MOBILE BUY BAR
   ============================================================ */
.buybar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 80;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(10px);
   border-top: 1px solid var(--border);
   padding: 10px var(--pad);
   padding-bottom: calc(10px + env(safe-area-inset-bottom));
   display: flex;
   align-items: center;
   gap: 14px;
   transform: translateY(120%);
   transition: transform .35s ease;
   box-shadow: 0 -6px 20px rgba(0, 0, 0, .06)
}

.buybar.show {
   transform: translateY(0)
}

.buybar .bb-info b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block;
   line-height: 1.2
}

.buybar .bb-info .pr {
   font-size: .84rem
}

.buybar .bb-info .pr .now {
   color: var(--red);
   font-weight: 700
}

.buybar .bb-info .pr .was {
   text-decoration: line-through;
   color: var(--ink-soft);
   margin-left: 5px;
   font-size: .78rem
}

.buybar .btn {
   margin-left: auto;
   flex: none
}

@media(min-width:880px) {
   .buybar {
      display: none !important
   }
}

body.has-buybar {
   padding-bottom: 74px
}

@media(min-width:880px) {
   body.has-buybar {
      padding-bottom: 0
   }
}

/* toast */
.toast {
   position: fixed;
   left: 50%;
   bottom: 90px;
   transform: translate(-50%, 30px);
   background: var(--ink);
   color: #fff;
   padding: 13px 20px;
   border-radius: var(--r-pill);
   font-size: .9rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 9px;
   box-shadow: var(--shadow-md);
   opacity: 0;
   visibility: hidden;
   transition: .3s;
   z-index: 130
}

.toast.show {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0)
}

.toast svg {
   width: 18px;
   height: 18px;
   color: var(--success)
}

@media(min-width:880px) {
   .toast {
      bottom: 30px
   }
}

/* scroll reveal */
.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .6s ease, transform .6s ease
}

.reveal.in {
   opacity: 1;
   transform: none
}

@media (prefers-reduced-motion:reduce) {
   .reveal {
      opacity: 1;
      transform: none;
      transition: none
   }
}

/* ---- VERSATILITY / USES ---- */
.uses {
   background: var(--bg-soft)
}

.uses-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(2, 1fr)
}

@media(min-width:620px) {
   .uses-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(min-width:980px) {
   .uses-grid {
      grid-template-columns: repeat(6, 1fr)
   }
}

.use-card {
   position: relative;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 22px 14px 18px;
   text-align: center;
   transition: transform .25s, box-shadow .25s, border-color .25s
}

.use-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md)
}

.use-card.hot {
   border-color: var(--red)
}

.use-card .pill {
   position: absolute;
   top: -10px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .62rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 4px 10px;
   border-radius: var(--r-pill);
   white-space: nowrap
}

.use-ic {
   width: 64px;
   height: 64px;
   margin: 0 auto 12px;
   border-radius: var(--r-md);
   background: var(--peach);
   display: grid;
   place-items: center
}

.use-ic svg {
   width: 38px;
   height: 38px
}

.use-card b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block;
   line-height: 1.2
}

.use-card span {
   display: block;
   font-size: .76rem;
   color: var(--ink-soft);
   margin-top: 4px
}

.uses-note {
   text-align: center;
   margin-top: 28px;
   font-size: .95rem;
   color: var(--ink-soft);
   max-width: 620px;
   margin-inline: auto
}

.uses-note b {
   color: var(--ink)
}

.uses-cta {
   display: flex;
   justify-content: center;
   margin-top: 24px
}

/* =========================================================
   MINI CART DRAWER (WooCommerce mini-cart inside .cart)
   ========================================================= */
.cart .cart-body {
   flex: 1;
   overflow-y: auto;
   padding: 8px 22px;
}

.cart .widget_shopping_cart_content {
   display: flex;
   flex-direction: column;
   min-height: 100%;
}

.cart ul.woocommerce-mini-cart {
   list-style: none;
   margin: 0;
   padding: 0;
}

.cart li.woocommerce-mini-cart-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 0;
   border-bottom: 1px solid var(--border);
}

.cart li.woocommerce-mini-cart-item img {
   order: 1;
   width: 54px;
   height: 54px;
   border-radius: var(--r-sm);
   object-fit: cover;
   background: var(--peach);
}

.cart li.woocommerce-mini-cart-item a:not(.remove) {
   order: 2;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .95rem;
   color: var(--ink);
   text-decoration: none;
}

.cart li.woocommerce-mini-cart-item .quantity {
   display: block;
   color: var(--ink-soft);
   font-size: .85rem;
   margin-top: 3px;
}

.cart li.woocommerce-mini-cart-item a.remove {
   order: 3;
   margin-left: auto;
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   border-radius: var(--r-pill);
   color: var(--ink-soft);
   font-size: 1.1rem;
   text-decoration: none;
   background: var(--bg-soft);
}

.cart li.woocommerce-mini-cart-item a.remove:hover {
   color: #fff;
   background: var(--red);
}

.cart .woocommerce-mini-cart__total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: 1.15rem;
   padding: 18px 0;
   border-top: 1px solid var(--border);
   margin-top: 6px;
}

.cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
   color: var(--red);
}

.cart .woocommerce-mini-cart__buttons {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 0 0 8px;
   margin: 0;
}

.cart .woocommerce-mini-cart__buttons a {
   display: block;
   text-align: center;
   text-decoration: none;
}

.cart .woocommerce-mini-cart__buttons a.checkout {
   background: var(--red);
   color: #fff;
   border-radius: var(--r-pill);
   padding: 15px;
   font-family: var(--ff-display);
   font-weight: 600;
   box-shadow: var(--shadow-red);
}

.cart .woocommerce-mini-cart__buttons a.checkout:hover {
   background: var(--red-deep);
}

.cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
   background: #fff;
   color: var(--ink);
   border: 1.5px solid var(--border);
   border-radius: var(--r-pill);
   padding: 14px;
   font-family: var(--ff-display);
   font-weight: 600;
}

.cart p.woocommerce-mini-cart__empty-message {
   padding: 48px 0;
   text-align: center;
   color: var(--ink-soft);
}

/* =========================================================
   MOBILE OVERFLOW FIX
   Off-canvas panels (cart drawer + mobile menu) band hone par
   translateX(100%) se page ke right extend ho jaate the ->
   horizontal scroll/shift. Root level par clip karke fix.
   ========================================================= */
html {
   overflow-x: hidden;
   overflow-x: clip;
}

body {
   overflow-x: hidden;
   overflow-x: clip;
   max-width: 100%;
}

img,
svg,
video,
iframe {
   max-width: 100%;
   height: auto;
}

/* Off-canvas panels viewport se kabhi bahar na faylein */
.cart,
.mobile-menu {
   max-width: 100vw;
}

/* WooCommerce: wide cart table mobile par apne andar scroll ho,
   page ko chauda na kare */
.woocommerce table.shop_table {
   max-width: 100%;
}

@media (max-width:600px) {

   .woocommerce-cart-form,
   .woocommerce-cart .woocommerce {
      overflow-x: auto;
   }

   .wc-block-cart,
   .wp-block-woocommerce-cart,
   .wc-block-checkout {
      max-width: 100%;
   }

   .wc-block-cart .wc-block-cart-items {
      max-width: 100%;
   }
}

/* Koi bhi block/section galti se viewport se chauda na ho */
.section,
.wrap,
main,
header,
footer {
   max-width: 100%;
}

/*
Theme Name:  SirsiRuchi
Theme URI:   https://sirsiruchi.in
Description: Custom child theme for SirsiRuchi, built on GeneratePress.
Author:      SirsiRuchi
Version:     1.0.0
Template:    generatepress
Text Domain: sirsiruchi
*/

/* Fonts (abhi @import se; baad me performance ke liye self-host karenge) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* =========================================================
   SIRSIRUCHI DESIGN SYSTEM
   (yahi humne static design me banaya tha)
   ========================================================= */

/* ============================================================
   DESIGN TOKENS  (locked to brief: red #E12713 + white system)
   ============================================================ */
:root {
   --red: #E12713;
   /* primary brand */
   --red-deep: #B71D0C;
   /* hover / depth */
   --red-ink: #7E1308;
   /* darkest red for gradients */
   --white: #FFFFFF;
   --ink: #1A1A1A;
   /* dark text */
   --ink-soft: #55504D;
   /* secondary text */
   --bg-soft: #F8F8F8;
   /* light background */
   --border: #EEEEEE;
   --success: #22C55E;
   --warm: #FFF5EE;
   /* warm food accent */
   --warm-2: #FDE7DC;
   /* warmer step */
   --peach: #FDC9B2;
   /* matches product photo backdrop */
   --gold: #C9821B;
   /* spice tone used only inside food illustrations */

   --shadow-sm: 0 2px 8px rgba(26, 26, 26, .06);
   --shadow-md: 0 12px 32px rgba(26, 26, 26, .10);
   --shadow-red: 0 12px 28px rgba(225, 39, 19, .30);

   --r-sm: 10px;
   --r-md: 16px;
   --r-lg: 24px;
   --r-xl: 32px;
   --r-pill: 999px;

   --ff-display: 'Poppins', system-ui, sans-serif;
   --ff-body: 'Inter', system-ui, sans-serif;

   --maxw: 1200px;
   --pad: clamp(20px, 5vw, 40px);
   --gap-section: clamp(64px, 9vw, 112px);

   --header-h: 64px;
}

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

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

@media (prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }
}

body {
   font-family: var(--ff-body);
   color: var(--ink);
   background: var(--white);
   line-height: 1.6;
   font-size: 16px;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

img,
svg {
   display: block;
   max-width: 100%;
   height: auto
}

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

button {
   font-family: inherit;
   cursor: pointer;
   border: none;
   background: none
}

ul {
   list-style: none
}

h1,
h2,
h3,
h4 {
   font-family: var(--ff-display);
   line-height: 1.12;
   letter-spacing: -.02em;
   font-weight: 700;
   color: var(--ink)
}

h2 {
   font-size: clamp(1.9rem, 5vw, 2.9rem)
}

h3 {
   font-size: clamp(1.2rem, 3vw, 1.5rem)
}

.wrap {
   max-width: var(--maxw);
   margin-inline: auto;
   padding-inline: var(--pad)
}

.section {
   padding-block: var(--gap-section)
}

:focus-visible {
   outline: 3px solid var(--red);
   outline-offset: 3px;
   border-radius: 4px
}

.skip {
   position: absolute;
   left: -9999px;
   top: 0;
   z-index: 200;
   background: var(--ink);
   color: #fff;
   padding: 12px 18px;
   border-radius: 0 0 10px 0;
   font-weight: 600
}

.skip:focus {
   left: 0
}

/* eyebrow label – recurring structural device */
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .74rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 14px;
}

.eyebrow::before {
   content: "";
   width: 22px;
   height: 2px;
   background: var(--red);
   border-radius: 2px
}

.section-head {
   max-width: 640px;
   margin-bottom: clamp(34px, 5vw, 52px)
}

.section-head.center {
   margin-inline: auto;
   text-align: center
}

.section-head p {
   color: var(--ink-soft);
   margin-top: 14px;
   font-size: 1.04rem
}

/* spice-dash divider (signature motif) */
.dash {
   display: flex;
   gap: 6px;
   justify-content: center;
   margin: 0 auto
}

.dash span {
   width: 6px;
   height: 6px;
   border-radius: 2px;
   background: var(--red);
   transform: rotate(45deg);
   opacity: .85
}

.dash span:nth-child(2) {
   opacity: .55
}

.dash span:nth-child(3) {
   opacity: .3
}

/* ----------- BUTTONS ----------- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1rem;
   padding: 15px 26px;
   border-radius: var(--r-pill);
   transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
   white-space: nowrap;
}

.btn svg {
   width: 18px;
   height: 18px
}

.btn-primary {
   background: var(--red);
   color: #fff;
   box-shadow: var(--shadow-red)
}

.btn-primary:hover {
   background: var(--red-deep);
   transform: translateY(-2px)
}

.btn-primary:active {
   transform: translateY(0)
}

.btn-ghost {
   background: var(--white);
   color: var(--ink);
   border: 1.5px solid var(--border)
}

.btn-ghost:hover {
   border-color: var(--ink);
   transform: translateY(-2px)
}

.btn-lg {
   padding: 18px 34px;
   font-size: 1.06rem
}

.btn-block {
   width: 100%
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
   background: var(--ink);
   color: #fff;
   font-size: .84rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 38px;
   overflow: hidden;
   position: relative;
   text-align: center;
}

.announce .track {
   display: flex;
   flex-direction: column
}

.announce .msg {
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding-inline: 16px
}

.announce .msg b {
   color: #fff
}

.announce strong {
   color: #FFC9C0;
   font-weight: 600
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
   position: sticky;
   top: 0;
   z-index: 90;
   background: rgba(255, 255, 255, .86);
   backdrop-filter: saturate(160%) blur(12px);
   -webkit-backdrop-filter: saturate(160%) blur(12px);
   border-bottom: 1px solid transparent;
   transition: box-shadow .3s, border-color .3s;
}

.header.scrolled {
   box-shadow: var(--shadow-sm);
   border-bottom-color: var(--border)
}

.nav {
   display: flex;
   align-items: center;
   gap: 18px;
   height: var(--header-h)
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.25rem;
   letter-spacing: -.02em
}

.brand .logo {
   height: 60px;
   width: auto;
   flex: none
}

.foot-logo {
   margin-bottom: 14px
}

.foot-logo .logo {
   height: 34px
}

.brand b {
   color: var(--red)
}

.nav-links {
   display: none;
   gap: 28px;
   margin-left: 24px;
   font-weight: 500;
   font-size: .95rem
}

.nav-links a {
   position: relative;
   padding: 4px 0;
   color: var(--ink-soft);
   transition: color .2s
}

.nav-links a:hover {
   color: var(--ink)
}

.nav-links a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -2px;
   width: 0;
   height: 2px;
   background: var(--red);
   transition: width .25s
}

.nav-links a:hover::after {
   width: 100%
}

.nav-actions {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 8px
}

.icon-btn {
   width: 44px;
   height: 44px;
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   position: relative;
   color: var(--ink);
   transition: background .2s
}

.icon-btn:hover {
   background: var(--bg-soft)
}

.icon-btn svg {
   width: 22px;
   height: 22px
}

.cart-count {
   position: absolute;
   top: 5px;
   right: 4px;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   background: var(--red);
   color: #fff;
   font-size: .68rem;
   font-weight: 700;
   font-family: var(--ff-display);
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   line-height: 1;
   transform: scale(0);
   transition: transform .25s cubic-bezier(.3, 1.4, .5, 1)
}

.cart-count.show {
   transform: scale(1)
}

.header .btn {
   display: none;
   padding: 11px 22px
}

.menu-toggle {
   display: grid
}

@media(min-width:880px) {
   .nav-links {
      display: flex
   }

   .menu-toggle {
      display: none
   }

   .header .btn {
      display: inline-flex
   }
}

/* ============================================================
   HERO — the thesis: pack + dish + spice glow
   ============================================================ */
.hero {
   position: relative;
   background: linear-gradient(180deg, var(--warm) 0%, #fff 78%);
   overflow: hidden;
   padding-top: clamp(36px, 7vw, 64px);
   padding-bottom: clamp(36px, 7vw, 72px)
}

.hero::before {
   /* warm radial spice glow */
   content: "";
   position: absolute;
   top: -12%;
   right: -18%;
   width: 70vw;
   height: 70vw;
   max-width: 760px;
   max-height: 760px;
   background: radial-gradient(circle, rgba(225, 39, 19, .16), rgba(225, 39, 19, 0) 62%);
   pointer-events: none;
}

.hero-grid {
   display: grid;
   gap: clamp(24px, 5vw, 40px);
   align-items: center;
   position: relative;
   z-index: 2
}

.hero-rating {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
   padding: 7px 14px;
   border-radius: var(--r-pill);
   font-size: .86rem;
   font-weight: 500;
   margin-bottom: 20px
}

.hero-rating .stars {
   color: #F5A623;
   letter-spacing: 1px;
   font-size: .95rem
}

.hero-rating b {
   font-family: var(--ff-display)
}

.hero h1 {
   font-size: clamp(2.2rem, 7vw, 3.7rem);
   font-weight: 800;
   margin-bottom: 18px
}

.hero h1 .hl {
   color: var(--red);
   position: relative;
   white-space: nowrap
}

.hero .lead {
   font-size: clamp(1.04rem, 2.4vw, 1.18rem);
   color: var(--ink-soft);
   max-width: 520px;
   margin-bottom: 28px
}

.hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 30px
}

.hero-trust {
   display: grid;
   grid-template-columns: repeat(2, auto);
   gap: 12px 26px;
   justify-content: start
}

.hero-trust li {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: .92rem;
   font-weight: 500;
   color: var(--ink)
}

.hero-trust .tick {
   width: 22px;
   height: 22px;
   flex: none;
   border-radius: var(--r-pill);
   background: rgba(34, 197, 94, .12);
   color: var(--success);
   display: grid;
   place-items: center
}

.hero-trust .tick svg {
   width: 13px;
   height: 13px
}

.hero-visual {
   position: relative;
   display: grid;
   place-items: center;
   min-height: 320px
}

.hero-visual .pack {
   width: min(78%, 360px);
   filter: drop-shadow(0 26px 36px rgba(126, 19, 8, .28));
   animation: float 6s ease-in-out infinite
}

.hero-visual .bowl {
   position: absolute;
   width: 42%;
   max-width: 230px;
   bottom: -2%;
   right: 2%;
   filter: drop-shadow(0 18px 26px rgba(126, 19, 8, .22));
   animation: float 6s ease-in-out infinite .8s
}

.hero-badge {
   position: absolute;
   top: 4%;
   left: 0;
   background: #fff;
   border-radius: var(--r-md);
   box-shadow: var(--shadow-md);
   padding: 11px 15px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   font-size: .84rem;
   font-family: var(--ff-display);
   animation: float 5.4s ease-in-out infinite .4s
}

.hero-badge .dot {
   width: 30px;
   height: 30px;
   border-radius: var(--r-pill);
   background: var(--warm);
   display: grid;
   place-items: center;
   font-size: 1.05rem
}

.hero-visual .prod-frame {
   width: min(92%, 440px);
   border-radius: var(--r-xl);
   overflow: hidden;
   background: var(--peach);
   box-shadow: 0 30px 60px -18px rgba(126, 19, 8, .45);
   animation: float 6s ease-in-out infinite
}

.hero-visual .prod-frame img {
   width: 100%;
   display: block
}

/* drifting spice flecks */
.fleck {
   position: absolute;
   border-radius: 2px;
   opacity: .0;
   pointer-events: none;
   animation: drift 9s linear infinite
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

@keyframes drift {
   0% {
      opacity: 0;
      transform: translateY(20px) rotate(0)
   }

   12% {
      opacity: .7
   }

   88% {
      opacity: .5
   }

   100% {
      opacity: 0;
      transform: translateY(-80px) rotate(220deg)
   }
}

@media (prefers-reduced-motion:reduce) {

   .hero-visual .prod-frame,
   .hero-badge,
   .fleck {
      animation: none
   }

   .fleck {
      display: none
   }
}

@media(min-width:880px) {
   .hero-grid {
      grid-template-columns: 1.05fr .95fr
   }

   .hero-visual {
      min-height: 480px
   }
}

/* ============================================================
   WHY CHOOSE — glass cards
   ============================================================ */
.why {
   background: linear-gradient(180deg, #fff, var(--bg-soft))
}

.why-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.why-card {
   position: relative;
   background: rgba(255, 255, 255, .7);
   border: 1px solid var(--border);
   backdrop-filter: blur(8px);
   border-radius: var(--r-lg);
   padding: 26px 24px;
   box-shadow: var(--shadow-sm);
   transition: transform .25s, box-shadow .25s, border-color .25s;
   overflow: hidden;
}

.why-card::after {
   content: "";
   position: absolute;
   inset: 0 0 auto 0;
   height: 3px;
   background: linear-gradient(90deg, var(--red), var(--gold));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s
}

.why-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md);
   border-color: transparent
}

.why-card:hover::after {
   transform: scaleX(1)
}

.why-ic {
   width: 54px;
   height: 54px;
   border-radius: var(--r-md);
   background: var(--warm);
   display: grid;
   place-items: center;
   margin-bottom: 16px;
   color: var(--red)
}

.why-ic svg {
   width: 28px;
   height: 28px
}

.why-card h3 {
   font-size: 1.16rem;
   margin-bottom: 7px
}

.why-card p {
   color: var(--ink-soft);
   font-size: .94rem
}

/* ============================================================
   PRODUCT SHOWCASE
   ============================================================ */
.shop {
   background: var(--white)
}

.shop-grid {
   display: grid;
   gap: 22px;
   grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
   align-items: stretch
}

.pcard {
   position: relative;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   overflow: hidden;
   transition: transform .25s, box-shadow .25s, border-color .25s
}

.pcard:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md)
}

.pcard.featured {
   border-color: var(--red);
   box-shadow: 0 0 0 1px var(--red), var(--shadow-md)
}

.pcard .tag {
   position: absolute;
   top: 14px;
   left: 14px;
   z-index: 3;
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .72rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 6px 12px;
   border-radius: var(--r-pill)
}

.pcard .tag.save {
   left: auto;
   right: 14px;
   background: var(--ink)
}

.pcard .media {
   background: var(--peach);
   display: grid;
   place-items: center;
   overflow: hidden
}

.pcard .media img {
   width: 100%;
   display: block;
   transition: transform .5s
}

.pcard:hover .media img {
   transform: scale(1.06)
}

.pcard .body {
   padding: 20px 22px 24px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.pcard h3 {
   font-size: 1.22rem;
   margin-bottom: 3px
}

.pcard .qtytxt {
   font-size: .84rem;
   color: var(--ink-soft);
   margin-bottom: 12px
}

.pcard .feat {
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 7px
}

.pcard .feat li {
   display: flex;
   gap: 8px;
   font-size: .9rem;
   color: var(--ink-soft)
}

.pcard .feat svg {
   width: 16px;
   height: 16px;
   color: var(--success);
   flex: none;
   margin-top: 3px
}

.price {
   display: flex;
   align-items: baseline;
   gap: 10px;
   margin-bottom: 4px
}

.price .now {
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.7rem;
   color: var(--ink)
}

.price .was {
   font-size: 1rem;
   color: var(--ink-soft);
   text-decoration: line-through
}

.price .off {
   font-size: .78rem;
   font-weight: 700;
   color: var(--success);
   background: rgba(34, 197, 94, .12);
   padding: 3px 8px;
   border-radius: var(--r-pill)
}

.unitprice {
   font-size: .8rem;
   color: var(--ink-soft);
   margin-bottom: 16px
}

.pcard .actions {
   margin-top: auto;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.qty {
   display: flex;
   align-items: center;
   border: 1.5px solid var(--border);
   border-radius: var(--r-pill);
   overflow: hidden;
   width: fit-content
}

.qty button {
   width: 40px;
   height: 40px;
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--ink);
   display: grid;
   place-items: center;
   transition: background .15s
}

.qty button:hover {
   background: var(--bg-soft)
}

.qty input {
   width: 42px;
   text-align: center;
   border: none;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1rem;
   color: var(--ink);
   background: none;
   -moz-appearance: textfield
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0
}

/* ============================================================
   STORY
   ============================================================ */
.story {
   background: var(--ink);
   color: #fff;
   position: relative;
   overflow: hidden
}

.story::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 15% 20%, rgba(225, 39, 19, .28), transparent 45%)
}

.story .wrap {
   position: relative;
   z-index: 2
}

.story-grid {
   display: grid;
   gap: clamp(28px, 5vw, 56px);
   align-items: center
}

.story h2 {
   color: #fff
}

.story .eyebrow {
   color: #FF9080
}

.story .eyebrow::before {
   background: #FF9080
}

.story p {
   color: rgba(255, 255, 255, .78);
   margin-top: 16px;
   font-size: 1.04rem
}

.story .signoff {
   margin-top: 22px;
   font-family: var(--ff-display);
   font-weight: 600;
   color: #fff
}

.story .signoff span {
   display: block;
   font-family: var(--ff-body);
   font-weight: 400;
   font-size: .86rem;
   color: rgba(255, 255, 255, .6)
}

.story-visual {
   position: relative;
   display: grid;
   place-items: center;
   min-height: 280px
}

.story-visual .map-card {
   width: 100%;
   max-width: 420px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--r-lg);
   padding: 26px
}

.story-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   margin-top: 24px
}

.story-stats div {
   text-align: center;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--r-md);
   padding: 16px 8px
}

.story-stats b {
   display: block;
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.7rem;
   color: #fff
}

.story-stats span {
   font-size: .74rem;
   color: rgba(255, 255, 255, .6);
   letter-spacing: .04em
}

@media(min-width:880px) {
   .story-grid {
      grid-template-columns: 1fr 1fr
   }
}

/* ============================================================
   HOW IT WORKS  (a real 3-step sequence -> numbered)
   ============================================================ */
.how {
   background: var(--warm)
}

.steps {
   display: grid;
   gap: 20px;
   grid-template-columns: 1fr;
   counter-reset: step
}

.step {
   position: relative;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 28px 24px;
   text-align: center
}

.step .num {
   position: absolute;
   top: -16px;
   left: 50%;
   transform: translateX(-50%);
   width: 34px;
   height: 34px;
   border-radius: var(--r-pill);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 700;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-red)
}

.step .art {
   width: 96px;
   height: 96px;
   margin: 14px auto 16px
}

.step h3 {
   font-size: 1.18rem;
   margin-bottom: 8px
}

.step p {
   color: var(--ink-soft);
   font-size: .94rem
}

@media(min-width:760px) {
   .steps {
      grid-template-columns: repeat(3, 1fr)
   }
}

/* ============================================================
   INGREDIENTS
   ============================================================ */
.ing {
   background: #fff
}

.ing-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
}

.ing-card {
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 22px 14px;
   text-align: center;
   transition: transform .25s, background .25s
}

.ing-card:hover {
   transform: translateY(-5px);
   background: var(--warm)
}

.ing-card .ill {
   width: 60px;
   height: 60px;
   margin: 0 auto 12px;
   animation: floats 5s ease-in-out infinite
}

.ing-card:nth-child(2n) .ill {
   animation-delay: .6s
}

.ing-card:nth-child(3n) .ill {
   animation-delay: 1.1s
}

.ing-card b {
   font-family: var(--ff-display);
   font-size: .98rem
}

.ing-card span {
   display: block;
   font-size: .78rem;
   color: var(--ink-soft);
   margin-top: 2px
}

@keyframes floats {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-7px)
   }
}

@media (prefers-reduced-motion:reduce) {
   .ing-card .ill {
      animation: none
   }
}

.ing-note {
   text-align: center;
   margin-top: 26px;
   font-size: .9rem;
   color: var(--ink-soft)
}

.ing-note b {
   color: var(--ink)
}

/* ============================================================
   RECIPE
   ============================================================ */
.recipe {
   background: var(--bg-soft)
}

.recipe-grid {
   display: grid;
   gap: clamp(26px, 5vw, 48px);
   align-items: start
}

.video {
   position: relative;
   border-radius: var(--r-lg);
   overflow: hidden;
   background: linear-gradient(150deg, var(--red-ink), var(--red));
   aspect-ratio: 4/3;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-md)
}

.video .play {
   width: 78px;
   height: 78px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, .92);
   display: grid;
   place-items: center;
   color: var(--red);
   transition: transform .25s;
   cursor: pointer
}

.video .play:hover {
   transform: scale(1.08)
}

.video .play svg {
   width: 30px;
   height: 30px;
   margin-left: 4px
}

.video .label {
   position: absolute;
   bottom: 16px;
   left: 18px;
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .95rem
}

.video .label span {
   display: block;
   font-weight: 400;
   font-size: .78rem;
   opacity: .8
}

.recipe-meta {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 20px
}

.chip {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-pill);
   padding: 7px 14px;
   font-size: .82rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 7px
}

.chip svg {
   width: 15px;
   height: 15px;
   color: var(--red)
}

.recipe ol {
   counter-reset: r;
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-bottom: 24px
}

.recipe ol li {
   position: relative;
   padding-left: 46px;
   color: var(--ink-soft)
}

.recipe ol li::before {
   counter-increment: r;
   content: counter(r);
   position: absolute;
   left: 0;
   top: -2px;
   width: 30px;
   height: 30px;
   border-radius: var(--r-pill);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: .9rem;
   display: grid;
   place-items: center
}

.recipe ol li b {
   color: var(--ink)
}

@media(min-width:820px) {
   .recipe-grid {
      grid-template-columns: .9fr 1.1fr
   }
}

/* ============================================================
   REVIEWS — carousel
   ============================================================ */
.reviews {
   background: #fff;
   overflow: hidden
}

.rv-viewport {
   overflow: hidden
}

.rv-track {
   display: flex;
   transition: transform .5s cubic-bezier(.4, 0, .2, 1)
}

.rv-card {
   flex: 0 0 100%;
   padding: 4px
}

.rv-inner {
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 28px 26px;
   height: 100%
}

.rv-stars {
   color: #F5A623;
   letter-spacing: 2px;
   margin-bottom: 14px
}

.rv-text {
   font-size: 1.08rem;
   color: var(--ink);
   margin-bottom: 20px;
   font-weight: 500
}

.rv-who {
   display: flex;
   align-items: center;
   gap: 13px
}

.rv-av {
   width: 46px;
   height: 46px;
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   font-family: var(--ff-display);
   font-weight: 700;
   color: #fff;
   font-size: 1.05rem
}

.rv-who b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block
}

.rv-who span {
   font-size: .8rem;
   color: var(--ink-soft)
}

.rv-who .verified {
   font-size: .72rem;
   color: var(--success);
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 4px
}

.rv-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 24px
}

.rv-arrow {
   width: 46px;
   height: 46px;
   border-radius: var(--r-pill);
   border: 1.5px solid var(--border);
   display: grid;
   place-items: center;
   color: var(--ink);
   transition: background .2s, border-color .2s
}

.rv-arrow:hover {
   background: var(--red);
   color: #fff;
   border-color: var(--red)
}

.rv-dots {
   display: flex;
   gap: 8px
}

.rv-dot {
   width: 9px;
   height: 9px;
   border-radius: var(--r-pill);
   background: var(--border);
   transition: width .3s, background .3s
}

.rv-dot.active {
   width: 26px;
   background: var(--red)
}

@media(min-width:760px) {
   .rv-card {
      flex-basis: 50%
   }
}

@media(min-width:1080px) {
   .rv-card {
      flex-basis: 33.333%
   }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
   background: var(--ink);
   color: #fff
}

.trust-grid {
   display: grid;
   gap: 14px;
   grid-template-columns: repeat(2, 1fr)
}

.trust-item {
   display: flex;
   align-items: center;
   gap: 13px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--r-md);
   padding: 16px 18px
}

.trust-item .tic {
   width: 42px;
   height: 42px;
   flex: none;
   border-radius: var(--r-md);
   background: rgba(225, 39, 19, .18);
   color: #FF9080;
   display: grid;
   place-items: center
}

.trust-item .tic svg {
   width: 22px;
   height: 22px
}

.trust-item b {
   font-family: var(--ff-display);
   font-size: .96rem
}

.trust-item span {
   font-size: .78rem;
   color: rgba(255, 255, 255, .6)
}

@media(min-width:660px) {
   .trust-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
   background: #fff
}

.faq-list {
   max-width: 760px;
   margin-inline: auto;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.faq-item {
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   overflow: hidden;
   background: #fff;
   transition: border-color .2s, box-shadow .2s
}

.faq-item.open {
   border-color: var(--red);
   box-shadow: var(--shadow-sm)
}

.faq-q {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   text-align: left;
   padding: 20px 22px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1.02rem;
   color: var(--ink)
}

.faq-q .ic {
   flex: none;
   width: 28px;
   height: 28px;
   border-radius: var(--r-pill);
   background: var(--warm);
   color: var(--red);
   display: grid;
   place-items: center;
   transition: transform .3s, background .3s
}

.faq-item.open .faq-q .ic {
   transform: rotate(45deg);
   background: var(--red);
   color: #fff
}

.faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease
}

.faq-a p {
   padding: 0 22px 22px;
   color: var(--ink-soft)
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final {
   background: linear-gradient(135deg, var(--red), var(--red-ink));
   color: #fff;
   text-align: center;
   position: relative;
   overflow: hidden
}

.final::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .16), transparent 40%)
}

.final .wrap {
   position: relative;
   z-index: 2;
   max-width: 680px
}

.final h2 {
   color: #fff;
   font-size: clamp(2rem, 5.5vw, 3rem)
}

.final p {
   color: rgba(255, 255, 255, .9);
   margin: 16px auto 30px;
   font-size: 1.1rem;
   max-width: 480px
}

.final .btn-primary {
   background: #fff;
   color: var(--red);
   box-shadow: 0 12px 28px rgba(0, 0, 0, .25)
}

.final .btn-primary:hover {
   background: var(--warm)
}

.final .sub {
   margin-top: 18px;
   font-size: .84rem;
   color: rgba(255, 255, 255, .8);
   display: flex;
   gap: 18px;
   justify-content: center;
   flex-wrap: wrap
}

.final .sub span {
   display: inline-flex;
   align-items: center;
   gap: 6px
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
   background: #111;
   color: rgba(255, 255, 255, .7);
   padding-block: clamp(48px, 7vw, 72px) 28px
}

.foot-grid {
   display: grid;
   gap: 34px;
   grid-template-columns: 1fr
}

.foot-brand .brand {
   color: #fff;
   margin-bottom: 14px
}

.foot-brand p {
   font-size: .9rem;
   max-width: 300px;
   margin-bottom: 18px
}

.socials {
   display: flex;
   gap: 10px
}

.socials a {
   width: 40px;
   height: 40px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, .08);
   display: grid;
   place-items: center;
   color: #fff;
   transition: background .2s, transform .2s
}

.socials a:hover {
   background: var(--red);
   transform: translateY(-3px)
}

.socials svg {
   width: 18px;
   height: 18px
}

.foot-col h4 {
   color: #fff;
   font-size: .82rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   margin-bottom: 16px
}

.foot-col ul {
   display: flex;
   flex-direction: column;
   gap: 11px
}

.foot-col a {
   font-size: .9rem;
   transition: color .2s
}

.foot-col a:hover {
   color: #fff
}

.foot-contact li {
   font-size: .9rem;
   margin-bottom: 11px;
   display: flex;
   gap: 9px
}

.foot-contact svg {
   width: 17px;
   height: 17px;
   flex: none;
   margin-top: 3px;
   color: var(--red)
}

.fssai {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 10px;
   font-size: .78rem;
   background: rgba(255, 255, 255, .06);
   padding: 7px 12px;
   border-radius: var(--r-sm)
}

.foot-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   margin-top: 38px;
   padding-top: 24px;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: space-between;
   font-size: .82rem
}

@media(min-width:680px) {
   .foot-grid {
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 40px
   }
}

@media(min-width:920px) {
   .foot-grid {
      grid-template-columns: 1.8fr 1fr 1fr 1.3fr
   }
}

/* ============================================================
   MOBILE MENU
   ============================================================ */
.scrim {
   position: fixed;
   inset: 0;
   background: rgba(26, 26, 26, .5);
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s;
   z-index: 95
}

.scrim.show {
   opacity: 1;
   visibility: visible
}

.mobile-menu {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: min(82vw, 330px);
   background: #fff;
   z-index: 96;
   transform: translateX(100%);
   transition: transform .35s cubic-bezier(.4, 0, .2, 1);
   padding: 22px;
   display: flex;
   flex-direction: column;
   box-shadow: -12px 0 40px rgba(0, 0, 0, .16)
}

.mobile-menu.show {
   transform: translateX(0)
}

.mobile-menu .top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 26px
}

.mobile-menu nav {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.mobile-menu nav a {
   padding: 14px 12px;
   border-radius: var(--r-sm);
   font-family: var(--ff-display);
   font-weight: 500;
   font-size: 1.06rem;
   transition: background .15s
}

.mobile-menu nav a:hover {
   background: var(--bg-soft)
}

.mobile-menu .btn {
   margin-top: 20px
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: min(92vw, 400px);
   background: #fff;
   z-index: 110;
   transform: translateX(100%);
   transition: transform .38s cubic-bezier(.4, 0, .2, 1);
   display: flex;
   flex-direction: column;
   box-shadow: -12px 0 40px rgba(0, 0, 0, .18)
}

.cart.show {
   transform: translateX(0)
}

.cart-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 22px;
   border-bottom: 1px solid var(--border)
}

.cart-head h3 {
   font-size: 1.15rem
}

.cart-items {
   flex: 1;
   overflow-y: auto;
   padding: 8px 22px
}

.cart-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   text-align: center;
   color: var(--ink-soft);
   gap: 14px
}

.cart-empty svg {
   width: 64px;
   height: 64px;
   color: var(--border)
}

.ci {
   display: flex;
   gap: 14px;
   padding: 18px 0;
   border-bottom: 1px solid var(--border)
}

.ci .thumb {
   width: 62px;
   height: 62px;
   flex: none;
   border-radius: var(--r-sm);
   background: var(--peach);
   overflow: hidden
}

.ci .thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.ci .info {
   flex: 1;
   min-width: 0
}

.ci .info b {
   font-family: var(--ff-display);
   font-size: .95rem;
   display: block
}

.ci .info .pr {
   color: var(--red);
   font-weight: 600;
   font-size: .9rem;
   margin-top: 2px
}

.ci .ctrls {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 8px
}

.ci .ctrls .qty {
   transform: scale(.85);
   transform-origin: left
}

.ci .rm {
   font-size: .78rem;
   color: var(--ink-soft);
   text-decoration: underline
}

.ci .rm:hover {
   color: var(--red)
}

.cart-foot {
   border-top: 1px solid var(--border);
   padding: 20px 22px;
   background: var(--bg-soft)
}

.cart-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 8px;
   font-size: .92rem;
   color: var(--ink-soft)
}

.cart-row.total {
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: 1.2rem;
   color: var(--ink);
   margin: 12px 0 16px
}

.cart-row.total span {
   color: var(--red)
}

.cart-note {
   text-align: center;
   font-size: .78rem;
   color: var(--ink-soft);
   margin-top: 12px
}

/* ============================================================
   STICKY MOBILE BUY BAR
   ============================================================ */
.buybar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 80;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(10px);
   border-top: 1px solid var(--border);
   padding: 10px var(--pad);
   padding-bottom: calc(10px + env(safe-area-inset-bottom));
   display: flex;
   align-items: center;
   gap: 14px;
   transform: translateY(120%);
   transition: transform .35s ease;
   box-shadow: 0 -6px 20px rgba(0, 0, 0, .06)
}

.buybar.show {
   transform: translateY(0)
}

.buybar .bb-info b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block;
   line-height: 1.2
}

.buybar .bb-info .pr {
   font-size: .84rem
}

.buybar .bb-info .pr .now {
   color: var(--red);
   font-weight: 700
}

.buybar .bb-info .pr .was {
   text-decoration: line-through;
   color: var(--ink-soft);
   margin-left: 5px;
   font-size: .78rem
}

.buybar .btn {
   margin-left: auto;
   flex: none
}

@media(min-width:880px) {
   .buybar {
      display: none !important
   }
}

body.has-buybar {
   padding-bottom: 74px
}

@media(min-width:880px) {
   body.has-buybar {
      padding-bottom: 0
   }
}

/* toast */
.toast {
   position: fixed;
   left: 50%;
   bottom: 90px;
   transform: translate(-50%, 30px);
   background: var(--ink);
   color: #fff;
   padding: 13px 20px;
   border-radius: var(--r-pill);
   font-size: .9rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 9px;
   box-shadow: var(--shadow-md);
   opacity: 0;
   visibility: hidden;
   transition: .3s;
   z-index: 130
}

.toast.show {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0)
}

.toast svg {
   width: 18px;
   height: 18px;
   color: var(--success)
}

@media(min-width:880px) {
   .toast {
      bottom: 30px
   }
}

/* scroll reveal */
.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .6s ease, transform .6s ease
}

.reveal.in {
   opacity: 1;
   transform: none
}

@media (prefers-reduced-motion:reduce) {
   .reveal {
      opacity: 1;
      transform: none;
      transition: none
   }
}

/* ---- VERSATILITY / USES ---- */
.uses {
   background: var(--bg-soft)
}

.uses-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(2, 1fr)
}

@media(min-width:620px) {
   .uses-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(min-width:980px) {
   .uses-grid {
      grid-template-columns: repeat(6, 1fr)
   }
}

.use-card {
   position: relative;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 22px 14px 18px;
   text-align: center;
   transition: transform .25s, box-shadow .25s, border-color .25s
}

.use-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md)
}

.use-card.hot {
   border-color: var(--red)
}

.use-card .pill {
   position: absolute;
   top: -10px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .62rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 4px 10px;
   border-radius: var(--r-pill);
   white-space: nowrap
}

.use-ic {
   width: 64px;
   height: 64px;
   margin: 0 auto 12px;
   border-radius: var(--r-md);
   background: var(--peach);
   display: grid;
   place-items: center
}

.use-ic svg {
   width: 38px;
   height: 38px
}

.use-card b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block;
   line-height: 1.2
}

.use-card span {
   display: block;
   font-size: .76rem;
   color: var(--ink-soft);
   margin-top: 4px
}

.uses-note {
   text-align: center;
   margin-top: 28px;
   font-size: .95rem;
   color: var(--ink-soft);
   max-width: 620px;
   margin-inline: auto
}

.uses-note b {
   color: var(--ink)
}

.uses-cta {
   display: flex;
   justify-content: center;
   margin-top: 24px
}

/* =========================================================
   MINI CART DRAWER (WooCommerce mini-cart inside .cart)
   ========================================================= */
.cart .cart-body {
   flex: 1;
   overflow-y: auto;
   padding: 8px 22px;
}

.cart .widget_shopping_cart_content {
   display: flex;
   flex-direction: column;
   min-height: 100%;
}

.cart ul.woocommerce-mini-cart {
   list-style: none;
   margin: 0;
   padding: 0;
}

.cart li.woocommerce-mini-cart-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 0;
   border-bottom: 1px solid var(--border);
}

.cart li.woocommerce-mini-cart-item img {
   order: 1;
   width: 54px;
   height: 54px;
   border-radius: var(--r-sm);
   object-fit: cover;
   background: var(--peach);
}

.cart li.woocommerce-mini-cart-item a:not(.remove) {
   order: 2;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .95rem;
   color: var(--ink);
   text-decoration: none;
}

.cart li.woocommerce-mini-cart-item .quantity {
   display: block;
   color: var(--ink-soft);
   font-size: .85rem;
   margin-top: 3px;
}

.cart li.woocommerce-mini-cart-item a.remove {
   order: 3;
   margin-left: auto;
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   border-radius: var(--r-pill);
   color: var(--ink-soft);
   font-size: 1.1rem;
   text-decoration: none;
   background: var(--bg-soft);
}

.cart li.woocommerce-mini-cart-item a.remove:hover {
   color: #fff;
   background: var(--red);
}

.cart .woocommerce-mini-cart__total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: 1.15rem;
   padding: 18px 0;
   border-top: 1px solid var(--border);
   margin-top: 6px;
}

.cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
   color: var(--red);
}

.cart .woocommerce-mini-cart__buttons {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 0 0 8px;
   margin: 0;
}

.cart .woocommerce-mini-cart__buttons a {
   display: block;
   text-align: center;
   text-decoration: none;
}

.cart .woocommerce-mini-cart__buttons a.checkout {
   background: var(--red);
   color: #fff;
   border-radius: var(--r-pill);
   padding: 15px;
   font-family: var(--ff-display);
   font-weight: 600;
   box-shadow: var(--shadow-red);
}

.cart .woocommerce-mini-cart__buttons a.checkout:hover {
   background: var(--red-deep);
}

.cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
   background: #fff;
   color: var(--ink);
   border: 1.5px solid var(--border);
   border-radius: var(--r-pill);
   padding: 14px;
   font-family: var(--ff-display);
   font-weight: 600;
}

.cart p.woocommerce-mini-cart__empty-message {
   padding: 48px 0;
   text-align: center;
   color: var(--ink-soft);
}

/* =========================================================
   MOBILE OVERFLOW FIX
   Off-canvas panels (cart drawer + mobile menu) band hone par
   translateX(100%) se page ke right extend ho jaate the ->
   horizontal scroll/shift. Root level par clip karke fix.
   ========================================================= */
html {
   overflow-x: hidden;
   overflow-x: clip;
}

body {
   overflow-x: hidden;
   overflow-x: clip;
   max-width: 100%;
}

img,
svg,
video,
iframe {
   max-width: 100%;
   height: auto;
}

/* Off-canvas panels viewport se kabhi bahar na faylein */
.cart,
.mobile-menu {
   max-width: 100vw;
}

/* WooCommerce: wide cart table mobile par apne andar scroll ho,
   page ko chauda na kare */
.woocommerce table.shop_table {
   max-width: 100%;
}

@media (max-width:600px) {

   .woocommerce-cart-form,
   .woocommerce-cart .woocommerce {
      overflow-x: auto;
   }

   .wc-block-cart,
   .wp-block-woocommerce-cart,
   .wc-block-checkout {
      max-width: 100%;
   }

   .wc-block-cart .wc-block-cart-items {
      max-width: 100%;
   }
}

/* Koi bhi block/section galti se viewport se chauda na ho */
.section,
.wrap,
main,
header,
footer {
   max-width: 100%;
}


/* ========== ABOUT PAGE STYLES ========== */
/* ---- ABOUT PAGE ADDITIONS ---- */
.about-hero {
   background: linear-gradient(180deg, var(--warm) 0%, #fff 80%)
}

.about-hero .prod-frame {
   width: min(92%, 420px);
   border-radius: var(--r-xl);
   overflow: hidden;
   background: var(--peach);
   box-shadow: 0 30px 60px -18px rgba(126, 19, 8, .45);
   animation: float 6s ease-in-out infinite
}

.about-hero .prod-frame img {
   width: 100%;
   display: block
}

@media (prefers-reduced-motion:reduce) {
   .about-hero .prod-frame {
      animation: none
   }
}

.lede-grid {
   display: grid;
   gap: clamp(28px, 5vw, 56px);
   align-items: center
}

@media(min-width:880px) {
   .lede-grid {
      grid-template-columns: 1.05fr .95fr
   }
}

.prose p {
   color: var(--ink-soft);
   font-size: 1.06rem;
   margin-top: 16px
}

.prose p:first-of-type {
   margin-top: 0
}

.pull {
   position: relative;
   max-width: 820px;
   margin-inline: auto;
   text-align: center
}

.pull blockquote {
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: clamp(1.5rem, 4vw, 2.3rem);
   line-height: 1.25;
   color: #fff;
   letter-spacing: -.02em
}

.pull .mark {
   font-size: 3rem;
   color: #FF9080;
   line-height: 0;
   display: block;
   margin-bottom: 6px
}

.pull cite {
   display: block;
   margin-top: 20px;
   font-style: normal;
   color: rgba(255, 255, 255, .7);
   font-size: .95rem
}

.steps.four {
   grid-template-columns: 1fr
}

@media(min-width:560px) {
   .steps.four {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(min-width:960px) {
   .steps.four {
      grid-template-columns: repeat(4, 1fr)
   }
}

.loc-grid {
   display: grid;
   gap: clamp(24px, 4vw, 44px);
   align-items: center
}

@media(min-width:820px) {
   .loc-grid {
      grid-template-columns: 1fr 1fr
   }
}

.loc-list li {
   display: flex;
   gap: 12px;
   margin-bottom: 16px;
   font-size: .98rem
}

.loc-list svg {
   width: 20px;
   height: 20px;
   flex: none;
   margin-top: 3px;
   color: #FF9080
}

.loc-list a {
   text-decoration: underline;
   text-underline-offset: 2px
}

.loc-socials {
   display: flex;
   gap: 10px;
   margin-top: 8px
}

.loc-socials a {
   width: 42px;
   height: 42px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, .08);
   display: grid;
   place-items: center;
   color: #fff;
   transition: background .2s, transform .2s
}

.loc-socials a:hover {
   background: var(--red);
   transform: translateY(-3px)
}

.loc-socials svg {
   width: 18px;
   height: 18px
}

/*
Theme Name:  SirsiRuchi
Theme URI:   https://sirsiruchi.in
Description: Custom child theme for SirsiRuchi, built on GeneratePress.
Author:      SirsiRuchi
Version:     1.0.0
Template:    generatepress
Text Domain: sirsiruchi
*/

/* Fonts (abhi @import se; baad me performance ke liye self-host karenge) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* =========================================================
   SIRSIRUCHI DESIGN SYSTEM
   (yahi humne static design me banaya tha)
   ========================================================= */

/* ============================================================
   DESIGN TOKENS  (locked to brief: red #E12713 + white system)
   ============================================================ */
:root {
   --red: #E12713;
   /* primary brand */
   --red-deep: #B71D0C;
   /* hover / depth */
   --red-ink: #7E1308;
   /* darkest red for gradients */
   --white: #FFFFFF;
   --ink: #1A1A1A;
   /* dark text */
   --ink-soft: #55504D;
   /* secondary text */
   --bg-soft: #F8F8F8;
   /* light background */
   --border: #EEEEEE;
   --success: #22C55E;
   --warm: #FFF5EE;
   /* warm food accent */
   --warm-2: #FDE7DC;
   /* warmer step */
   --peach: #FDC9B2;
   /* matches product photo backdrop */
   --gold: #C9821B;
   /* spice tone used only inside food illustrations */

   --shadow-sm: 0 2px 8px rgba(26, 26, 26, .06);
   --shadow-md: 0 12px 32px rgba(26, 26, 26, .10);
   --shadow-red: 0 12px 28px rgba(225, 39, 19, .30);

   --r-sm: 10px;
   --r-md: 16px;
   --r-lg: 24px;
   --r-xl: 32px;
   --r-pill: 999px;

   --ff-display: 'Poppins', system-ui, sans-serif;
   --ff-body: 'Inter', system-ui, sans-serif;

   --maxw: 1200px;
   --pad: clamp(20px, 5vw, 40px);
   --gap-section: clamp(64px, 9vw, 112px);

   --header-h: 64px;
}

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

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

@media (prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }
}

body {
   font-family: var(--ff-body);
   color: var(--ink);
   background: var(--white);
   line-height: 1.6;
   font-size: 16px;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

img,
svg {
   display: block;
   max-width: 100%;
   height: auto
}

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

button {
   font-family: inherit;
   cursor: pointer;
   border: none;
   background: none
}

ul {
   list-style: none
}

h1,
h2,
h3,
h4 {
   font-family: var(--ff-display);
   line-height: 1.12;
   letter-spacing: -.02em;
   font-weight: 700;
   color: var(--ink)
}

h2 {
   font-size: clamp(1.9rem, 5vw, 2.9rem)
}

h3 {
   font-size: clamp(1.2rem, 3vw, 1.5rem)
}

.wrap {
   max-width: var(--maxw);
   margin-inline: auto;
   padding-inline: var(--pad)
}

.section {
   padding-block: var(--gap-section)
}

:focus-visible {
   outline: 3px solid var(--red);
   outline-offset: 3px;
   border-radius: 4px
}

.skip {
   position: absolute;
   left: -9999px;
   top: 0;
   z-index: 200;
   background: var(--ink);
   color: #fff;
   padding: 12px 18px;
   border-radius: 0 0 10px 0;
   font-weight: 600
}

.skip:focus {
   left: 0
}

/* eyebrow label – recurring structural device */
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .74rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 14px;
}

.eyebrow::before {
   content: "";
   width: 22px;
   height: 2px;
   background: var(--red);
   border-radius: 2px
}

.section-head {
   max-width: 640px;
   margin-bottom: clamp(34px, 5vw, 52px)
}

.section-head.center {
   margin-inline: auto;
   text-align: center
}

.section-head p {
   color: var(--ink-soft);
   margin-top: 14px;
   font-size: 1.04rem
}

/* spice-dash divider (signature motif) */
.dash {
   display: flex;
   gap: 6px;
   justify-content: center;
   margin: 0 auto
}

.dash span {
   width: 6px;
   height: 6px;
   border-radius: 2px;
   background: var(--red);
   transform: rotate(45deg);
   opacity: .85
}

.dash span:nth-child(2) {
   opacity: .55
}

.dash span:nth-child(3) {
   opacity: .3
}

/* ----------- BUTTONS ----------- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1rem;
   padding: 15px 26px;
   border-radius: var(--r-pill);
   transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
   white-space: nowrap;
}

.btn svg {
   width: 18px;
   height: 18px
}

.btn-primary {
   background: var(--red);
   color: #fff;
   box-shadow: var(--shadow-red)
}

.btn-primary:hover {
   background: var(--red-deep);
   transform: translateY(-2px)
}

.btn-primary:active {
   transform: translateY(0)
}

.btn-ghost {
   background: var(--white);
   color: var(--ink);
   border: 1.5px solid var(--border)
}

.btn-ghost:hover {
   border-color: var(--ink);
   transform: translateY(-2px)
}

.btn-lg {
   padding: 18px 34px;
   font-size: 1.06rem
}

.btn-block {
   width: 100%
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
   background: var(--ink);
   color: #fff;
   font-size: .84rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 38px;
   overflow: hidden;
   position: relative;
   text-align: center;
}

.announce .track {
   display: flex;
   flex-direction: column
}

.announce .msg {
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding-inline: 16px
}

.announce .msg b {
   color: #fff
}

.announce strong {
   color: #FFC9C0;
   font-weight: 600
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
   position: sticky;
   top: 0;
   z-index: 90;
   background: rgba(255, 255, 255, .86);
   backdrop-filter: saturate(160%) blur(12px);
   -webkit-backdrop-filter: saturate(160%) blur(12px);
   border-bottom: 1px solid transparent;
   transition: box-shadow .3s, border-color .3s;
}

.header.scrolled {
   box-shadow: var(--shadow-sm);
   border-bottom-color: var(--border)
}

.nav {
   display: flex;
   align-items: center;
   gap: 18px;
   height: var(--header-h)
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.25rem;
   letter-spacing: -.02em
}

.brand .logo {
   height: 60px;
   width: auto;
   flex: none
}

.foot-logo {
   margin-bottom: 14px
}

.foot-logo .logo {
   height: 60px
}

.brand b {
   color: var(--red)
}

.nav-links {
   display: none;
   gap: 28px;
   margin-left: 24px;
   font-weight: 500;
   font-size: .95rem
}

.nav-links a {
   position: relative;
   padding: 4px 0;
   color: var(--ink-soft);
   transition: color .2s
}

.nav-links a:hover {
   color: var(--ink)
}

.nav-links a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -2px;
   width: 0;
   height: 2px;
   background: var(--red);
   transition: width .25s
}

.nav-links a:hover::after {
   width: 100%
}

.nav-actions {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 8px
}

.icon-btn {
   width: 44px;
   height: 44px;
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   position: relative;
   color: var(--ink);
   transition: background .2s
}

.icon-btn:hover {
   background: var(--bg-soft)
}

.icon-btn svg {
   width: 22px;
   height: 22px
}

.cart-count {
   position: absolute;
   top: 5px;
   right: 4px;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   background: var(--red);
   color: #fff;
   font-size: .68rem;
   font-weight: 700;
   font-family: var(--ff-display);
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   line-height: 1;
   transform: scale(0);
   transition: transform .25s cubic-bezier(.3, 1.4, .5, 1)
}

.cart-count.show {
   transform: scale(1)
}

.header .btn {
   display: none;
   padding: 11px 22px
}

.menu-toggle {
   display: grid
}

@media(min-width:880px) {
   .nav-links {
      display: flex
   }

   .menu-toggle {
      display: none
   }

   .header .btn {
      display: inline-flex
   }
}

/* ============================================================
   HERO — the thesis: pack + dish + spice glow
   ============================================================ */
.hero {
   position: relative;
   background: linear-gradient(180deg, var(--warm) 0%, #fff 78%);
   overflow: hidden;
   padding-top: clamp(36px, 7vw, 64px);
   padding-bottom: clamp(36px, 7vw, 72px)
}

.hero::before {
   /* warm radial spice glow */
   content: "";
   position: absolute;
   top: -12%;
   right: -18%;
   width: 70vw;
   height: 70vw;
   max-width: 760px;
   max-height: 760px;
   background: radial-gradient(circle, rgba(225, 39, 19, .16), rgba(225, 39, 19, 0) 62%);
   pointer-events: none;
}

.hero-grid {
   display: grid;
   gap: clamp(24px, 5vw, 40px);
   align-items: center;
   position: relative;
   z-index: 2
}

.hero-rating {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
   padding: 7px 14px;
   border-radius: var(--r-pill);
   font-size: .86rem;
   font-weight: 500;
   margin-bottom: 20px
}

.hero-rating .stars {
   color: #F5A623;
   letter-spacing: 1px;
   font-size: .95rem
}

.hero-rating b {
   font-family: var(--ff-display)
}

.hero h1 {
   font-size: clamp(2.2rem, 7vw, 3.7rem);
   font-weight: 800;
   margin-bottom: 18px
}

.hero h1 .hl {
   color: var(--red);
   position: relative;
   white-space: nowrap
}

.hero .lead {
   font-size: clamp(1.04rem, 2.4vw, 1.18rem);
   color: var(--ink-soft);
   max-width: 520px;
   margin-bottom: 28px
}

.hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 30px
}

.hero-trust {
   display: grid;
   grid-template-columns: repeat(2, auto);
   gap: 12px 26px;
   justify-content: start
}

.hero-trust li {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: .92rem;
   font-weight: 500;
   color: var(--ink)
}

.hero-trust .tick {
   width: 22px;
   height: 22px;
   flex: none;
   border-radius: var(--r-pill);
   background: rgba(34, 197, 94, .12);
   color: var(--success);
   display: grid;
   place-items: center
}

.hero-trust .tick svg {
   width: 13px;
   height: 13px
}

.hero-visual {
   position: relative;
   display: grid;
   place-items: center;
   min-height: 320px
}

.hero-visual .pack {
   width: min(78%, 360px);
   filter: drop-shadow(0 26px 36px rgba(126, 19, 8, .28));
   animation: float 6s ease-in-out infinite
}

.hero-visual .bowl {
   position: absolute;
   width: 42%;
   max-width: 230px;
   bottom: -2%;
   right: 2%;
   filter: drop-shadow(0 18px 26px rgba(126, 19, 8, .22));
   animation: float 6s ease-in-out infinite .8s
}

.hero-badge {
   position: absolute;
   top: 4%;
   left: 0;
   background: #fff;
   border-radius: var(--r-md);
   box-shadow: var(--shadow-md);
   padding: 11px 15px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   font-size: .84rem;
   font-family: var(--ff-display);
   animation: float 5.4s ease-in-out infinite .4s
}

.hero-badge .dot {
   width: 30px;
   height: 30px;
   border-radius: var(--r-pill);
   background: var(--warm);
   display: grid;
   place-items: center;
   font-size: 1.05rem
}

.hero-visual .prod-frame {
   width: min(92%, 440px);
   border-radius: var(--r-xl);
   overflow: hidden;
   background: var(--peach);
   box-shadow: 0 30px 60px -18px rgba(126, 19, 8, .45);
   animation: float 6s ease-in-out infinite
}

.hero-visual .prod-frame img {
   width: 100%;
   display: block
}

/* drifting spice flecks */
.fleck {
   position: absolute;
   border-radius: 2px;
   opacity: .0;
   pointer-events: none;
   animation: drift 9s linear infinite
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

@keyframes drift {
   0% {
      opacity: 0;
      transform: translateY(20px) rotate(0)
   }

   12% {
      opacity: .7
   }

   88% {
      opacity: .5
   }

   100% {
      opacity: 0;
      transform: translateY(-80px) rotate(220deg)
   }
}

@media (prefers-reduced-motion:reduce) {

   .hero-visual .prod-frame,
   .hero-badge,
   .fleck {
      animation: none
   }

   .fleck {
      display: none
   }
}

@media(min-width:880px) {
   .hero-grid {
      grid-template-columns: 1.05fr .95fr
   }

   .hero-visual {
      min-height: 480px
   }
}

/* ============================================================
   WHY CHOOSE — glass cards
   ============================================================ */
.why {
   background: linear-gradient(180deg, #fff, var(--bg-soft))
}

.why-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.why-card {
   position: relative;
   background: rgba(255, 255, 255, .7);
   border: 1px solid var(--border);
   backdrop-filter: blur(8px);
   border-radius: var(--r-lg);
   padding: 26px 24px;
   box-shadow: var(--shadow-sm);
   transition: transform .25s, box-shadow .25s, border-color .25s;
   overflow: hidden;
}

.why-card::after {
   content: "";
   position: absolute;
   inset: 0 0 auto 0;
   height: 3px;
   background: linear-gradient(90deg, var(--red), var(--gold));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .3s
}

.why-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md);
   border-color: transparent
}

.why-card:hover::after {
   transform: scaleX(1)
}

.why-ic {
   width: 54px;
   height: 54px;
   border-radius: var(--r-md);
   background: var(--warm);
   display: grid;
   place-items: center;
   margin-bottom: 16px;
   color: var(--red)
}

.why-ic svg {
   width: 28px;
   height: 28px
}

.why-card h3 {
   font-size: 1.16rem;
   margin-bottom: 7px
}

.why-card p {
   color: var(--ink-soft);
   font-size: .94rem
}

/* ============================================================
   PRODUCT SHOWCASE
   ============================================================ */
.shop {
   background: var(--white)
}

.shop-grid {
   display: grid;
   gap: 22px;
   grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
   align-items: stretch
}

.pcard {
   position: relative;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   overflow: hidden;
   transition: transform .25s, box-shadow .25s, border-color .25s
}

.pcard:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md)
}

.pcard.featured {
   border-color: var(--red);
   box-shadow: 0 0 0 1px var(--red), var(--shadow-md)
}

.pcard .tag {
   position: absolute;
   top: 14px;
   left: 14px;
   z-index: 3;
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .72rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 6px 12px;
   border-radius: var(--r-pill)
}

.pcard .tag.save {
   left: auto;
   right: 14px;
   background: var(--ink)
}

.pcard .media {
   background: var(--peach);
   display: grid;
   place-items: center;
   overflow: hidden
}

.pcard .media img {
   width: 100%;
   display: block;
   transition: transform .5s
}

.pcard:hover .media img {
   transform: scale(1.06)
}

.pcard .body {
   padding: 20px 22px 24px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.pcard h3 {
   font-size: 1.22rem;
   margin-bottom: 3px
}

.pcard .qtytxt {
   font-size: .84rem;
   color: var(--ink-soft);
   margin-bottom: 12px
}

.pcard .feat {
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 7px
}

.pcard .feat li {
   display: flex;
   gap: 8px;
   font-size: .9rem;
   color: var(--ink-soft)
}

.pcard .feat svg {
   width: 16px;
   height: 16px;
   color: var(--success);
   flex: none;
   margin-top: 3px
}

.price {
   display: flex;
   align-items: baseline;
   gap: 10px;
   margin-bottom: 4px
}

.price .now {
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.7rem;
   color: var(--ink)
}

.price .was {
   font-size: 1rem;
   color: var(--ink-soft);
   text-decoration: line-through
}

.price .off {
   font-size: .78rem;
   font-weight: 700;
   color: var(--success);
   background: rgba(34, 197, 94, .12);
   padding: 3px 8px;
   border-radius: var(--r-pill)
}

.unitprice {
   font-size: .8rem;
   color: var(--ink-soft);
   margin-bottom: 16px
}

.pcard .actions {
   margin-top: auto;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.qty {
   display: flex;
   align-items: center;
   border: 1.5px solid var(--border);
   border-radius: var(--r-pill);
   overflow: hidden;
   width: fit-content
}

.qty button {
   width: 40px;
   height: 40px;
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--ink);
   display: grid;
   place-items: center;
   transition: background .15s
}

.qty button:hover {
   background: var(--bg-soft)
}

.qty input {
   width: 42px;
   text-align: center;
   border: none;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1rem;
   color: var(--ink);
   background: none;
   -moz-appearance: textfield
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0
}

/* ============================================================
   STORY
   ============================================================ */
.story {
   background: var(--ink);
   color: #fff;
   position: relative;
   overflow: hidden
}

.story::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 15% 20%, rgba(225, 39, 19, .28), transparent 45%)
}

.story .wrap {
   position: relative;
   z-index: 2
}

.story-grid {
   display: grid;
   gap: clamp(28px, 5vw, 56px);
   align-items: center
}

.story h2 {
   color: #fff
}

.story .eyebrow {
   color: #FF9080
}

.story .eyebrow::before {
   background: #FF9080
}

.story p {
   color: rgba(255, 255, 255, .78);
   margin-top: 16px;
   font-size: 1.04rem
}

.story .signoff {
   margin-top: 22px;
   font-family: var(--ff-display);
   font-weight: 600;
   color: #fff
}

.story .signoff span {
   display: block;
   font-family: var(--ff-body);
   font-weight: 400;
   font-size: .86rem;
   color: rgba(255, 255, 255, .6)
}

.story-visual {
   position: relative;
   display: grid;
   place-items: center;
   min-height: 280px
}

.story-visual .map-card {
   width: 100%;
   max-width: 420px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: var(--r-lg);
   padding: 26px
}

.story-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   margin-top: 24px
}

.story-stats div {
   text-align: center;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--r-md);
   padding: 16px 8px
}

.story-stats b {
   display: block;
   font-family: var(--ff-display);
   font-weight: 800;
   font-size: 1.7rem;
   color: #fff
}

.story-stats span {
   font-size: .74rem;
   color: rgba(255, 255, 255, .6);
   letter-spacing: .04em
}

@media(min-width:880px) {
   .story-grid {
      grid-template-columns: 1fr 1fr
   }
}

/* ============================================================
   HOW IT WORKS  (a real 3-step sequence -> numbered)
   ============================================================ */
.how {
   background: var(--warm)
}

.steps {
   display: grid;
   gap: 20px;
   grid-template-columns: 1fr;
   counter-reset: step
}

.step {
   position: relative;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 28px 24px;
   text-align: center
}

.step .num {
   position: absolute;
   top: -16px;
   left: 50%;
   transform: translateX(-50%);
   width: 34px;
   height: 34px;
   border-radius: var(--r-pill);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 700;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-red)
}

.step .art {
   width: 96px;
   height: 96px;
   margin: 14px auto 16px
}

.step h3 {
   font-size: 1.18rem;
   margin-bottom: 8px
}

.step p {
   color: var(--ink-soft);
   font-size: .94rem
}

@media(min-width:760px) {
   .steps {
      grid-template-columns: repeat(3, 1fr)
   }
}

/* ============================================================
   INGREDIENTS
   ============================================================ */
.ing {
   background: #fff
}

.ing-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
}

.ing-card {
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   padding: 22px 14px;
   text-align: center;
   transition: transform .25s, background .25s
}

.ing-card:hover {
   transform: translateY(-5px);
   background: var(--warm)
}

.ing-card .ill {
   width: 60px;
   height: 60px;
   margin: 0 auto 12px;
   animation: floats 5s ease-in-out infinite
}

.ing-card:nth-child(2n) .ill {
   animation-delay: .6s
}

.ing-card:nth-child(3n) .ill {
   animation-delay: 1.1s
}

.ing-card b {
   font-family: var(--ff-display);
   font-size: .98rem
}

.ing-card span {
   display: block;
   font-size: .78rem;
   color: var(--ink-soft);
   margin-top: 2px
}

@keyframes floats {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-7px)
   }
}

@media (prefers-reduced-motion:reduce) {
   .ing-card .ill {
      animation: none
   }
}

.ing-note {
   text-align: center;
   margin-top: 26px;
   font-size: .9rem;
   color: var(--ink-soft)
}

.ing-note b {
   color: var(--ink)
}

/* ============================================================
   RECIPE
   ============================================================ */
.recipe {
   background: var(--bg-soft)
}

.recipe-grid {
   display: grid;
   gap: clamp(26px, 5vw, 48px);
   align-items: start
}

.video {
   position: relative;
   border-radius: var(--r-lg);
   overflow: hidden;
   background: linear-gradient(150deg, var(--red-ink), var(--red));
   aspect-ratio: 4/3;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow-md)
}

.video .play {
   width: 78px;
   height: 78px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, .92);
   display: grid;
   place-items: center;
   color: var(--red);
   transition: transform .25s;
   cursor: pointer
}

.video .play:hover {
   transform: scale(1.08)
}

.video .play svg {
   width: 30px;
   height: 30px;
   margin-left: 4px
}

.video .label {
   position: absolute;
   bottom: 16px;
   left: 18px;
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .95rem
}

.video .label span {
   display: block;
   font-weight: 400;
   font-size: .78rem;
   opacity: .8
}

.recipe-meta {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 20px
}

.chip {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-pill);
   padding: 7px 14px;
   font-size: .82rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 7px
}

.chip svg {
   width: 15px;
   height: 15px;
   color: var(--red)
}

.recipe ol {
   counter-reset: r;
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-bottom: 24px
}

.recipe ol li {
   position: relative;
   padding-left: 46px;
   color: var(--ink-soft)
}

.recipe ol li::before {
   counter-increment: r;
   content: counter(r);
   position: absolute;
   left: 0;
   top: -2px;
   width: 30px;
   height: 30px;
   border-radius: var(--r-pill);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: .9rem;
   display: grid;
   place-items: center
}

.recipe ol li b {
   color: var(--ink)
}

@media(min-width:820px) {
   .recipe-grid {
      grid-template-columns: .9fr 1.1fr
   }
}

/* ============================================================
   REVIEWS — carousel
   ============================================================ */
.reviews {
   background: #fff;
   overflow: hidden
}

.rv-viewport {
   overflow: hidden
}

.rv-track {
   display: flex;
   transition: transform .5s cubic-bezier(.4, 0, .2, 1)
}

.rv-card {
   flex: 0 0 100%;
   padding: 4px
}

.rv-inner {
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 28px 26px;
   height: 100%
}

.rv-stars {
   color: #F5A623;
   letter-spacing: 2px;
   margin-bottom: 14px
}

.rv-text {
   font-size: 1.08rem;
   color: var(--ink);
   margin-bottom: 20px;
   font-weight: 500
}

.rv-who {
   display: flex;
   align-items: center;
   gap: 13px
}

.rv-av {
   width: 46px;
   height: 46px;
   border-radius: var(--r-pill);
   display: grid;
   place-items: center;
   font-family: var(--ff-display);
   font-weight: 700;
   color: #fff;
   font-size: 1.05rem
}

.rv-who b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block
}

.rv-who span {
   font-size: .8rem;
   color: var(--ink-soft)
}

.rv-who .verified {
   font-size: .72rem;
   color: var(--success);
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 4px
}

.rv-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 24px
}

.rv-arrow {
   width: 46px;
   height: 46px;
   border-radius: var(--r-pill);
   border: 1.5px solid var(--border);
   display: grid;
   place-items: center;
   color: var(--ink);
   transition: background .2s, border-color .2s
}

.rv-arrow:hover {
   background: var(--red);
   color: #fff;
   border-color: var(--red)
}

.rv-dots {
   display: flex;
   gap: 8px
}

.rv-dot {
   width: 9px;
   height: 9px;
   border-radius: var(--r-pill);
   background: var(--border);
   transition: width .3s, background .3s
}

.rv-dot.active {
   width: 26px;
   background: var(--red)
}

@media(min-width:760px) {
   .rv-card {
      flex-basis: 50%
   }
}

@media(min-width:1080px) {
   .rv-card {
      flex-basis: 33.333%
   }
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
   background: var(--ink);
   color: #fff
}

.trust-grid {
   display: grid;
   gap: 14px;
   grid-template-columns: repeat(2, 1fr)
}

.trust-item {
   display: flex;
   align-items: center;
   gap: 13px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: var(--r-md);
   padding: 16px 18px
}

.trust-item .tic {
   width: 42px;
   height: 42px;
   flex: none;
   border-radius: var(--r-md);
   background: rgba(225, 39, 19, .18);
   color: #FF9080;
   display: grid;
   place-items: center
}

.trust-item .tic svg {
   width: 22px;
   height: 22px
}

.trust-item b {
   font-family: var(--ff-display);
   font-size: .96rem
}

.trust-item span {
   font-size: .78rem;
   color: rgba(255, 255, 255, .6)
}

@media(min-width:660px) {
   .trust-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
   background: #fff
}

.faq-list {
   max-width: 760px;
   margin-inline: auto;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.faq-item {
   border: 1px solid var(--border);
   border-radius: var(--r-md);
   overflow: hidden;
   background: #fff;
   transition: border-color .2s, box-shadow .2s
}

.faq-item.open {
   border-color: var(--red);
   box-shadow: var(--shadow-sm)
}

.faq-q {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   text-align: left;
   padding: 20px 22px;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: 1.02rem;
   color: var(--ink)
}

.faq-q .ic {
   flex: none;
   width: 28px;
   height: 28px;
   border-radius: var(--r-pill);
   background: var(--warm);
   color: var(--red);
   display: grid;
   place-items: center;
   transition: transform .3s, background .3s
}

.faq-item.open .faq-q .ic {
   transform: rotate(45deg);
   background: var(--red);
   color: #fff
}

.faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease
}

.faq-a p {
   padding: 0 22px 22px;
   color: var(--ink-soft)
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final {
   background: linear-gradient(135deg, var(--red), var(--red-ink));
   color: #fff;
   text-align: center;
   position: relative;
   overflow: hidden
}

.final::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .16), transparent 40%)
}

.final .wrap {
   position: relative;
   z-index: 2;
   max-width: 680px
}

.final h2 {
   color: #fff;
   font-size: clamp(2rem, 5.5vw, 3rem)
}

.final p {
   color: rgba(255, 255, 255, .9);
   margin: 16px auto 30px;
   font-size: 1.1rem;
   max-width: 480px
}

.final .btn-primary {
   background: #fff;
   color: var(--red);
   box-shadow: 0 12px 28px rgba(0, 0, 0, .25)
}

.final .btn-primary:hover {
   background: var(--warm)
}

.final .sub {
   margin-top: 18px;
   font-size: .84rem;
   color: rgba(255, 255, 255, .8);
   display: flex;
   gap: 18px;
   justify-content: center;
   flex-wrap: wrap
}

.final .sub span {
   display: inline-flex;
   align-items: center;
   gap: 6px
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
   background: #111;
   color: rgba(255, 255, 255, .7);
   padding-block: clamp(48px, 7vw, 72px) 28px
}

.foot-grid {
   display: grid;
   gap: 34px;
   grid-template-columns: 1fr
}

.foot-brand .brand {
   color: #fff;
   margin-bottom: 14px
}

.foot-brand p {
   font-size: .9rem;
   max-width: 300px;
   margin-bottom: 18px
}

.socials {
   display: flex;
   gap: 10px
}

.socials a {
   width: 40px;
   height: 40px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, .08);
   display: grid;
   place-items: center;
   color: #fff;
   transition: background .2s, transform .2s
}

.socials a:hover {
   background: var(--red);
   transform: translateY(-3px)
}

.socials svg {
   width: 18px;
   height: 18px
}

.foot-col h4 {
   color: #fff;
   font-size: .82rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   margin-bottom: 16px
}

.foot-col ul {
   display: flex;
   flex-direction: column;
   gap: 11px
}

.foot-col a {
   font-size: .9rem;
   transition: color .2s
}

.foot-col a:hover {
   color: #fff
}

.foot-contact li {
   font-size: .9rem;
   margin-bottom: 11px;
   display: flex;
   gap: 9px
}

.foot-contact svg {
   width: 17px;
   height: 17px;
   flex: none;
   margin-top: 3px;
   color: var(--red)
}

.fssai {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 10px;
   font-size: .78rem;
   background: rgba(255, 255, 255, .06);
   padding: 7px 12px;
   border-radius: var(--r-sm)
}

.foot-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   margin-top: 38px;
   padding-top: 24px;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: space-between;
   font-size: .82rem
}

@media(min-width:680px) {
   .foot-grid {
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 40px
   }
}

@media(min-width:920px) {
   .foot-grid {
      grid-template-columns: 1.8fr 1fr 1fr 1.3fr
   }
}

/* ============================================================
   MOBILE MENU
   ============================================================ */
.scrim {
   position: fixed;
   inset: 0;
   background: rgba(26, 26, 26, .5);
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s;
   z-index: 95
}

.scrim.show {
   opacity: 1;
   visibility: visible
}

.mobile-menu {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: min(82vw, 330px);
   background: #fff;
   z-index: 96;
   transform: translateX(100%);
   transition: transform .35s cubic-bezier(.4, 0, .2, 1);
   padding: 22px;
   display: flex;
   flex-direction: column;
   box-shadow: -12px 0 40px rgba(0, 0, 0, .16)
}

.mobile-menu.show {
   transform: translateX(0)
}

.mobile-menu .top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 26px
}

.mobile-menu nav {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.mobile-menu nav a {
   padding: 14px 12px;
   border-radius: var(--r-sm);
   font-family: var(--ff-display);
   font-weight: 500;
   font-size: 1.06rem;
   transition: background .15s
}

.mobile-menu nav a:hover {
   background: var(--bg-soft)
}

.mobile-menu .btn {
   margin-top: 20px
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: min(92vw, 400px);
   background: #fff;
   z-index: 110;
   transform: translateX(100%);
   transition: transform .38s cubic-bezier(.4, 0, .2, 1);
   display: flex;
   flex-direction: column;
   box-shadow: -12px 0 40px rgba(0, 0, 0, .18)
}

.cart.show {
   transform: translateX(0)
}

.cart-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 22px;
   border-bottom: 1px solid var(--border)
}

.cart-head h3 {
   font-size: 1.15rem
}

.cart-items {
   flex: 1;
   overflow-y: auto;
   padding: 8px 22px
}

.cart-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   text-align: center;
   color: var(--ink-soft);
   gap: 14px
}

.cart-empty svg {
   width: 64px;
   height: 64px;
   color: var(--border)
}

.ci {
   display: flex;
   gap: 14px;
   padding: 18px 0;
   border-bottom: 1px solid var(--border)
}

.ci .thumb {
   width: 62px;
   height: 62px;
   flex: none;
   border-radius: var(--r-sm);
   background: var(--peach);
   overflow: hidden
}

.ci .thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.ci .info {
   flex: 1;
   min-width: 0
}

.ci .info b {
   font-family: var(--ff-display);
   font-size: .95rem;
   display: block
}

.ci .info .pr {
   color: var(--red);
   font-weight: 600;
   font-size: .9rem;
   margin-top: 2px
}

.ci .ctrls {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 8px
}

.ci .ctrls .qty {
   transform: scale(.85);
   transform-origin: left
}

.ci .rm {
   font-size: .78rem;
   color: var(--ink-soft);
   text-decoration: underline
}

.ci .rm:hover {
   color: var(--red)
}

.cart-foot {
   border-top: 1px solid var(--border);
   padding: 20px 22px;
   background: var(--bg-soft)
}

.cart-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 8px;
   font-size: .92rem;
   color: var(--ink-soft)
}

.cart-row.total {
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: 1.2rem;
   color: var(--ink);
   margin: 12px 0 16px
}

.cart-row.total span {
   color: var(--red)
}

.cart-note {
   text-align: center;
   font-size: .78rem;
   color: var(--ink-soft);
   margin-top: 12px
}

/* ============================================================
   STICKY MOBILE BUY BAR
   ============================================================ */
.buybar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 80;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(10px);
   border-top: 1px solid var(--border);
   padding: 10px var(--pad);
   padding-bottom: calc(10px + env(safe-area-inset-bottom));
   display: flex;
   align-items: center;
   gap: 14px;
   transform: translateY(120%);
   transition: transform .35s ease;
   box-shadow: 0 -6px 20px rgba(0, 0, 0, .06)
}

.buybar.show {
   transform: translateY(0)
}

.buybar .bb-info b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block;
   line-height: 1.2
}

.buybar .bb-info .pr {
   font-size: .84rem
}

.buybar .bb-info .pr .now {
   color: var(--red);
   font-weight: 700
}

.buybar .bb-info .pr .was {
   text-decoration: line-through;
   color: var(--ink-soft);
   margin-left: 5px;
   font-size: .78rem
}

.buybar .btn {
   margin-left: auto;
   flex: none
}

@media(min-width:880px) {
   .buybar {
      display: none !important
   }
}

body.has-buybar {
   padding-bottom: 74px
}

@media(min-width:880px) {
   body.has-buybar {
      padding-bottom: 0
   }
}

/* toast */
.toast {
   position: fixed;
   left: 50%;
   bottom: 90px;
   transform: translate(-50%, 30px);
   background: var(--ink);
   color: #fff;
   padding: 13px 20px;
   border-radius: var(--r-pill);
   font-size: .9rem;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 9px;
   box-shadow: var(--shadow-md);
   opacity: 0;
   visibility: hidden;
   transition: .3s;
   z-index: 130
}

.toast.show {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0)
}

.toast svg {
   width: 18px;
   height: 18px;
   color: var(--success)
}

@media(min-width:880px) {
   .toast {
      bottom: 30px
   }
}

/* scroll reveal */
.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .6s ease, transform .6s ease
}

.reveal.in {
   opacity: 1;
   transform: none
}

@media (prefers-reduced-motion:reduce) {
   .reveal {
      opacity: 1;
      transform: none;
      transition: none
   }
}

/* ---- VERSATILITY / USES ---- */
.uses {
   background: var(--bg-soft)
}

.uses-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(2, 1fr)
}

@media(min-width:620px) {
   .uses-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(min-width:980px) {
   .uses-grid {
      grid-template-columns: repeat(6, 1fr)
   }
}

.use-card {
   position: relative;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 22px 14px 18px;
   text-align: center;
   transition: transform .25s, box-shadow .25s, border-color .25s
}

.use-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-md)
}

.use-card.hot {
   border-color: var(--red)
}

.use-card .pill {
   position: absolute;
   top: -10px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--red);
   color: #fff;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .62rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 4px 10px;
   border-radius: var(--r-pill);
   white-space: nowrap
}

.use-ic {
   width: 64px;
   height: 64px;
   margin: 0 auto 12px;
   border-radius: var(--r-md);
   background: var(--peach);
   display: grid;
   place-items: center
}

.use-ic svg {
   width: 38px;
   height: 38px
}

.use-card b {
   font-family: var(--ff-display);
   font-size: .96rem;
   display: block;
   line-height: 1.2
}

.use-card span {
   display: block;
   font-size: .76rem;
   color: var(--ink-soft);
   margin-top: 4px
}

.uses-note {
   text-align: center;
   margin-top: 28px;
   font-size: .95rem;
   color: var(--ink-soft);
   max-width: 620px;
   margin-inline: auto
}

.uses-note b {
   color: var(--ink)
}

.uses-cta {
   display: flex;
   justify-content: center;
   margin-top: 24px
}

/* =========================================================
   MINI CART DRAWER (WooCommerce mini-cart inside .cart)
   ========================================================= */
.cart .cart-body {
   flex: 1;
   overflow-y: auto;
   padding: 8px 22px;
}

.cart .widget_shopping_cart_content {
   display: flex;
   flex-direction: column;
   min-height: 100%;
}

.cart ul.woocommerce-mini-cart {
   list-style: none;
   margin: 0;
   padding: 0;
}

.cart li.woocommerce-mini-cart-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 0;
   border-bottom: 1px solid var(--border);
}

.cart li.woocommerce-mini-cart-item img {
   order: 1;
   width: 54px;
   height: 54px;
   border-radius: var(--r-sm);
   object-fit: cover;
   background: var(--peach);
}

.cart li.woocommerce-mini-cart-item a:not(.remove) {
   order: 2;
   font-family: var(--ff-display);
   font-weight: 600;
   font-size: .95rem;
   color: var(--ink);
   text-decoration: none;
}

.cart li.woocommerce-mini-cart-item .quantity {
   display: block;
   color: var(--ink-soft);
   font-size: .85rem;
   margin-top: 3px;
}

.cart li.woocommerce-mini-cart-item a.remove {
   order: 3;
   margin-left: auto;
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   border-radius: var(--r-pill);
   color: var(--ink-soft);
   font-size: 1.1rem;
   text-decoration: none;
   background: var(--bg-soft);
}

.cart li.woocommerce-mini-cart-item a.remove:hover {
   color: #fff;
   background: var(--red);
}

.cart .woocommerce-mini-cart__total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: 1.15rem;
   padding: 18px 0;
   border-top: 1px solid var(--border);
   margin-top: 6px;
}

.cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
   color: var(--red);
}

.cart .woocommerce-mini-cart__buttons {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 0 0 8px;
   margin: 0;
}

.cart .woocommerce-mini-cart__buttons a {
   display: block;
   text-align: center;
   text-decoration: none;
}

.cart .woocommerce-mini-cart__buttons a.checkout {
   background: var(--red);
   color: #fff;
   border-radius: var(--r-pill);
   padding: 15px;
   font-family: var(--ff-display);
   font-weight: 600;
   box-shadow: var(--shadow-red);
}

.cart .woocommerce-mini-cart__buttons a.checkout:hover {
   background: var(--red-deep);
}

.cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
   background: #fff;
   color: var(--ink);
   border: 1.5px solid var(--border);
   border-radius: var(--r-pill);
   padding: 14px;
   font-family: var(--ff-display);
   font-weight: 600;
}

.cart p.woocommerce-mini-cart__empty-message {
   padding: 48px 0;
   text-align: center;
   color: var(--ink-soft);
}

/* =========================================================
   MOBILE OVERFLOW FIX
   Off-canvas panels (cart drawer + mobile menu) band hone par
   translateX(100%) se page ke right extend ho jaate the ->
   horizontal scroll/shift. Root level par clip karke fix.
   ========================================================= */
html {
   overflow-x: hidden;
   overflow-x: clip;
}

body {
   overflow-x: hidden;
   overflow-x: clip;
   max-width: 100%;
}

img,
svg,
video,
iframe {
   max-width: 100%;
   height: auto;
}

/* Off-canvas panels viewport se kabhi bahar na faylein */
.cart,
.mobile-menu {
   max-width: 100vw;
}

/* WooCommerce: wide cart table mobile par apne andar scroll ho,
   page ko chauda na kare */
.woocommerce table.shop_table {
   max-width: 100%;
}

@media (max-width:600px) {

   .woocommerce-cart-form,
   .woocommerce-cart .woocommerce {
      overflow-x: auto;
   }

   .wc-block-cart,
   .wp-block-woocommerce-cart,
   .wc-block-checkout {
      max-width: 100%;
   }

   .wc-block-cart .wc-block-cart-items {
      max-width: 100%;
   }
}

/* Koi bhi block/section galti se viewport se chauda na ho */
.section,
.wrap,
main,
header,
footer {
   max-width: 100%;
}


/* ========== ABOUT PAGE STYLES ========== */
/* ---- ABOUT PAGE ADDITIONS ---- */
.about-hero {
   background: linear-gradient(180deg, var(--warm) 0%, #fff 80%)
}

.about-hero .prod-frame {
   width: min(92%, 420px);
   border-radius: var(--r-xl);
   overflow: hidden;
   background: var(--peach);
   box-shadow: 0 30px 60px -18px rgba(126, 19, 8, .45);
   animation: float 6s ease-in-out infinite
}

.about-hero .prod-frame img {
   width: 100%;
   display: block
}

@media (prefers-reduced-motion:reduce) {
   .about-hero .prod-frame {
      animation: none
   }
}

.lede-grid {
   display: grid;
   gap: clamp(28px, 5vw, 56px);
   align-items: center
}

@media(min-width:880px) {
   .lede-grid {
      grid-template-columns: 1.05fr .95fr
   }
}

.prose p {
   color: var(--ink-soft);
   font-size: 1.06rem;
   margin-top: 16px
}

.prose p:first-of-type {
   margin-top: 0
}

.pull {
   position: relative;
   max-width: 820px;
   margin-inline: auto;
   text-align: center
}

.pull blockquote {
   font-family: var(--ff-display);
   font-weight: 700;
   font-size: clamp(1.5rem, 4vw, 2.3rem);
   line-height: 1.25;
   color: #fff;
   letter-spacing: -.02em
}

.pull .mark {
   font-size: 3rem;
   color: #FF9080;
   line-height: 0;
   display: block;
   margin-bottom: 6px
}

.pull cite {
   display: block;
   margin-top: 20px;
   font-style: normal;
   color: rgba(255, 255, 255, .7);
   font-size: .95rem
}

.steps.four {
   grid-template-columns: 1fr
}

@media(min-width:560px) {
   .steps.four {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(min-width:960px) {
   .steps.four {
      grid-template-columns: repeat(4, 1fr)
   }
}

.loc-grid {
   display: grid;
   gap: clamp(24px, 4vw, 44px);
   align-items: center
}

@media(min-width:820px) {
   .loc-grid {
      grid-template-columns: 1fr 1fr
   }
}

.loc-list li {
   display: flex;
   gap: 12px;
   margin-bottom: 16px;
   font-size: .98rem
}

.loc-list svg {
   width: 20px;
   height: 20px;
   flex: none;
   margin-top: 3px;
   color: #FF9080
}

.loc-list a {
   text-decoration: underline;
   text-underline-offset: 2px
}

.loc-socials {
   display: flex;
   gap: 10px;
   margin-top: 8px
}

.loc-socials a {
   width: 42px;
   height: 42px;
   border-radius: var(--r-pill);
   background: rgba(255, 255, 255, .08);
   display: grid;
   place-items: center;
   color: #fff;
   transition: background .2s, transform .2s
}

.loc-socials a:hover {
   background: var(--red);
   transform: translateY(-3px)
}

.loc-socials svg {
   width: 18px;
   height: 18px
}

/* ========== CONTACT PAGE STYLES ========== */
.contact-grid {
   display: grid;
   gap: clamp(24px, 5vw, 48px);
}

@media(min-width:880px) {
   .contact-grid {
      grid-template-columns: 1fr 1fr;
      align-items: start;
   }
}

.contact-info .method {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 15px 0;
   border-bottom: 1px solid var(--border);
   text-decoration: none;
}

.contact-info .method:last-of-type {
   border-bottom: none;
}

.method .mic {
   width: 46px;
   height: 46px;
   flex: none;
   border-radius: var(--r-md);
   background: var(--warm);
   color: var(--red);
   display: grid;
   place-items: center;
}

.method .mic svg {
   width: 22px;
   height: 22px;
}

.method b {
   font-family: var(--ff-display);
   font-size: .98rem;
   display: block;
   color: var(--ink);
   margin-bottom: 2px;
}

.method span span,
.method>span>span {
   color: var(--ink-soft);
   font-size: .94rem;
}

.contact-info a.method:hover b {
   color: var(--red);
}

.contact-socials {
   display: flex;
   gap: 10px;
   margin-top: 18px;
}

.contact-socials a {
   width: 42px;
   height: 42px;
   border-radius: var(--r-pill);
   background: var(--warm);
   color: var(--red);
   display: grid;
   place-items: center;
   transition: background .2s, transform .2s;
}

.contact-socials a:hover {
   background: var(--red);
   color: #fff;
   transform: translateY(-3px);
}

.contact-socials svg {
   width: 18px;
   height: 18px;
}

.contact-form-card {
   background: var(--bg-soft);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: clamp(22px, 4vw, 32px);
}

.contact-form-card h3 {
   margin-bottom: 6px;
}

.contact-form-card .sub {
   color: var(--ink-soft);
   font-size: .92rem;
   margin-bottom: 18px;
}

.contact-form .field {
   margin-bottom: 14px;
}

.contact-form label {
   display: block;
   font-family: var(--ff-display);
   font-weight: 500;
   font-size: .88rem;
   color: var(--ink);
   margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
   width: 100%;
   border: 1.5px solid var(--border);
   border-radius: var(--r-sm);
   padding: 13px 14px;
   font-family: var(--ff-body);
   font-size: 1rem;
   color: var(--ink);
   background: #fff;
}

.contact-form input:focus,
.contact-form textarea:focus {
   outline: none;
   border-color: var(--red);
   box-shadow: 0 0 0 3px rgba(225, 39, 19, .12);
}

.contact-form textarea {
   min-height: 120px;
   resize: vertical;
}

.contact-form .btn {
   margin-top: 4px;
}

.contact-or {
   text-align: center;
   font-size: .86rem;
   color: var(--ink-soft);
   margin-top: 14px;
}

.contact-or a {
   color: var(--red);
}

.map-embed {
   border-radius: var(--r-lg);
   overflow: hidden;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
}

.map-embed iframe {
   display: block;
   width: 100%;
   height: 340px;
   border: 0;
}

/* ========== FLOATING WHATSAPP BUTTON ========== */
.wa-float {
   position: fixed;
   right: 18px;
   z-index: 70;
   bottom: calc(18px + env(safe-area-inset-bottom));
   width: 56px;
   height: 56px;
   border-radius: var(--r-pill);
   background: #25D366;
   color: #fff;
   display: grid;
   place-items: center;
   box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
   transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.wa-float svg {
   width: 30px;
   height: 30px;
}

.wa-float:hover {
   transform: scale(1.08);
   box-shadow: 0 14px 30px rgba(37, 211, 102, .55);
}

.wa-float::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: #25D366;
   opacity: .5;
   z-index: -1;
   animation: wa-pulse 2.4s ease-out infinite;
}

@keyframes wa-pulse {
   0% {
      transform: scale(1);
      opacity: .5
   }

   70% {
      transform: scale(1.7);
      opacity: 0
   }

   100% {
      opacity: 0
   }
}

/* sticky mobile buy bar ke upar baithe */
body.has-buybar .wa-float {
   bottom: calc(84px + env(safe-area-inset-bottom));
}

/* cart drawer / mobile menu khulne par chhup jaaye */
body:has(#scrim.show) .wa-float {
   opacity: 0;
   pointer-events: none;
   transform: scale(.85);
}

@media (min-width:880px) {
   .wa-float {
      right: 24px;
      bottom: 24px;
      width: 60px;
      height: 60px;
   }
}

@media (prefers-reduced-motion:reduce) {
   .wa-float::before {
      display: none;
   }
}