/* =============================================================
   RAJARAJESHWARA RAKHI STORE — STYLESHEET
   Design tokens: deep maroon + marigold gold + mango-leaf green
   on a warm saffron-cream base. Signature element: the "toran"
   (hanging festive garland) used as a divider motif.
============================================================= */

:root {
  /* Colors */
  --maroon-deep: #4A0C18;
  --maroon: #7A1029;
  --maroon-soft: #93233F;
  --gold: #C9971F;
  --gold-light: #E8C468;
  --cream: #FFF6E9;
  --cream-warm: #FBEAD1;
  --green: #194A3A;
  --ink: #2B1210;
  --ink-soft: #5B3A34;
  --white: #FFFFFF;

  /* Typography */
  --font-display-en: 'Marcellus', serif;
  --font-display-te: 'Ramaraja', serif;
  --font-body-en: 'Poppins', sans-serif;
  --font-body-te: 'Anek Telugu', sans-serif;

  /* Layout */
  --max-width: 1180px;
  --radius: 14px;
  --shadow-card: 0 10px 30px rgba(74, 12, 24, 0.14);
  --transition: 0.3s ease;
}

/* =============================================================
   RESET & BASE
============================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-body-en);
  color: var(--ink);
  background: radial-gradient(circle at top left, rgba(232, 196, 104, 0.2), transparent 28%), var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
  font-size: 16px;
}

body.modal-open {
  overflow: hidden;
}

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

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

ul {
  list-style: none;
}

.container {
  width: 92%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Telugu inline text helper — used next to English labels throughout */
.te {
  font-family: var(--font-body-te);
  opacity: 0.85;
  font-size: 0.92em;
  display: inline-block;
  margin-left: 0.35em;
}

.te-block {
  font-family: var(--font-body-te);
  color: var(--ink-soft);
  margin-top: 1rem;
}

/* Scroll-reveal animation base state (activated via JS) */
[data-aos] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: transform, opacity;
}
[data-aos].in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.btn,
.fab,
.back-to-top,
.collection-card,
.product-card,
.trust-item,
.contact-card,
.instagram-post,
.countdown-box,
.category-card,
.card-hover {
  will-change: transform, box-shadow;
}

.collection-card,
.product-card,
.trust-item,
.contact-card,
.instagram-post,
.countdown-box,
.category-card,
.card-hover {
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition), border-color var(--transition);
}

.collection-card:hover,
.product-card:hover,
.trust-item:hover,
.contact-card:hover,
.instagram-post:hover,
.countdown-box:hover,
.category-card:hover,
.card-hover:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 14px 32px rgba(74, 12, 24, 0.16);
  filter: brightness(1.01);
}

.btn:hover,
.btn:focus-visible,
.fab:hover,
.fab:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible {
  transform: translate3d(0, -3px, 0);
  filter: drop-shadow(0 8px 16px rgba(74, 12, 24, 0.16));
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(255, 246, 233, 0.96);
  backdrop-filter: blur(6px);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

body.loaded .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(74, 12, 24, 0.12);
  border-top-color: var(--maroon-soft);
  animation: spin 0.9s linear infinite;
}

.page-loader p {
  margin-top: 0.85rem;
  color: var(--maroon-soft);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.particle-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 196, 104, 0.9) 0%, rgba(232, 196, 104, 0.2) 70%, transparent 100%);
  animation: particleFloat var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes particleFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(0.95);
    opacity: 0.2;
  }
  50% {
    transform: translate3d(12px, -18px, 0) scale(1.12);
    opacity: 0.8;
  }
  100% {
    transform: translate3d(-8px, 18px, 0) scale(0.96);
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn,
  .fab,
  .back-to-top,
  .collection-card,
  .product-card,
  .trust-item,
  .contact-card,
  .instagram-post,
  .countdown-box,
  .category-card,
  .card-hover,
  .particle {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =============================================================
   BUTTONS
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, #B07E17 100%);
  color: var(--maroon-deep);
  box-shadow: 0 8px 20px rgba(201, 151, 31, 0.35);
}

.btn-whatsapp {
  background: #1FA855;
  color: var(--white);
  box-shadow: 0 8px 20px rgba(31, 168, 85, 0.3);
}

/* =============================================================
   HEADER / NAVIGATION
============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--cream);
  border-bottom: 1px solid rgba(74, 12, 24, 0.08);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-en {
  font-family: var(--font-display-en);
  font-size: 1.05rem;
  color: var(--maroon-deep);
  font-weight: 700;
}

.brand-te {
  font-family: var(--font-display-te);
  font-size: 0.85rem;
  color: var(--maroon-soft);
}

.nav-links {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.nav-link {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}

.nav-link .te {
  font-size: 0.85em;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width var(--transition);
}

.nav-link:hover,
.nav-link.active-link {
  color: var(--maroon-deep);
}

.nav-link:hover::after,
.nav-link.active-link::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--maroon-deep);
  color: var(--cream);
  transition: transform var(--transition);
}

.icon-btn.whatsapp {
  background: #1FA855;
}

.icon-btn:hover {
  transform: translateY(-2px) scale(1.05);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cream);
  font-weight: 600;
  transition: transform var(--transition), color var(--transition);
}

.social-link:hover {
  transform: translateY(-2px);
  color: var(--gold-light);
}

.social-link .social-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--maroon-deep);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* =============================================================
   TORAN — signature decorative garland element
   Rendered with layered CSS gradients: mango-leaf bunting on a
   string, with hanging marigold "bells" and gold beads.
============================================================= */
.toran {
  height: 46px;
  width: 100%;
  background-repeat: repeat-x;
  background-size: 64px 46px;
  background-image:
    /* string */
    linear-gradient(var(--gold-light), var(--gold-light));
  background-position: center top;
  background-size: 100% 2px;
  position: relative;
}

.toran::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 7px at 12px 8px, var(--gold) 98%, transparent 100%),
    linear-gradient(135deg, var(--green) 45%, transparent 46%),
    linear-gradient(-135deg, var(--green) 45%, transparent 46%);
  background-repeat: repeat-x;
  background-size: 64px 46px;
  background-position: 0 0, 32px 2px, 32px 2px;
}

.toran::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle 5px at 44px 14px, var(--maroon) 96%, transparent 100%);
  background-repeat: repeat-x;
  background-size: 64px 46px;
}

/* =============================================================
   HERO
============================================================= */
.hero {
  position: relative;
  background: radial-gradient(ellipse at top, var(--maroon-soft) 0%, var(--maroon-deep) 55%, #34060F 100%);
  color: var(--cream);
  padding-bottom: 5.5rem;
  overflow: hidden;
}

.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    radial-gradient(circle, var(--gold-light) 1.5px, transparent 1.6px);
  background-size: 34px 34px;
  pointer-events: none;
}

.hero-content {
  position: relative;
  text-align: center;
  padding-top: 4.5rem;
  max-width: 780px;
}

.eyebrow,
.section-eyebrow {
  font-family: var(--font-body-en);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 1rem;
}

.section-eyebrow {
  color: var(--maroon-soft);
  text-align: center;
}

.hero h1 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.4rem;
}

.hero-en {
  font-family: var(--font-display-en);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 400;
  color: var(--white);
}

.hero-te {
  font-family: var(--font-display-te);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--gold-light);
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--cream-warm);
  margin-bottom: 2.2rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.hero-address {
  font-size: 0.92rem;
  color: var(--gold-light);
  opacity: 0.9;
}

/* =============================================================
   SECTION TITLES (shared)
============================================================= */
.section-title {
  font-family: var(--font-display-en);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  color: var(--maroon-deep);
  text-align: center;
  margin-bottom: 1rem;
}

.section-title .te {
  display: block;
  font-family: var(--font-display-te);
  font-size: 0.7em;
  color: var(--maroon-soft);
  margin-top: 0.3rem;
  margin-left: 0;
}

.section-title.light {
  color: var(--cream);
}

.section-title.light .te {
  color: var(--gold-light);
}

.section-desc {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 3rem;
  color: var(--ink-soft);
}

.br-desktop {
  display: none;
}

@media (min-width: 700px) {
  .br-desktop { display: inline; }
}

/* =============================================================
   COLLECTION SECTION
============================================================= */
.collection {
  padding: 5rem 0 4rem;
}

.collection-toolbar {
  max-width: 720px;
  margin: 0 auto 2rem;
  text-align: center;
}

.filter-panel {
  max-width: 980px;
  margin: 0 auto 2rem;
  padding: 1.2rem;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 246, 233, 0.95), rgba(251, 234, 209, 0.95));
  border: 1px solid rgba(74, 12, 24, 0.12);
  box-shadow: 0 12px 30px rgba(74, 12, 24, 0.1);
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--maroon-deep);
  font-weight: 600;
}

.filter-select {
  border: 1px solid rgba(74, 12, 24, 0.14);
  border-radius: 999px;
  padding: 0.7rem 0.95rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--maroon-deep);
  outline: none;
}

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.filter-chip,
.clear-filters {
  border: 1px solid rgba(74, 12, 24, 0.14);
  border-radius: 999px;
  padding: 0.6rem 0.95rem;
  background: rgba(255, 255, 255, 0.85);
  color: var(--maroon-soft);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.filter-chip.active,
.filter-chip:hover,
.clear-filters:hover {
  background: var(--maroon-deep);
  color: var(--cream);
  border-color: var(--maroon-deep);
}

.filter-actions {
  display: flex;
  justify-content: center;
}

.search-shell {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 246, 233, 0.95), rgba(251, 234, 209, 0.95));
  border: 1px solid rgba(74, 12, 24, 0.12);
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  box-shadow: 0 12px 30px rgba(74, 12, 24, 0.12);
}

.search-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-right: 0.7rem;
  fill: none;
  stroke: var(--maroon-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--maroon-deep);
  padding: 0.1rem 0;
}

.search-input::placeholder {
  color: rgba(74, 12, 24, 0.6);
}

.search-hint {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.95rem;
}

@media (max-width: 1100px) {
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }
}

.cat-card {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(74, 12, 24, 0.08);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(74, 12, 24, 0.14);
}

.cat-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

.cat-body {
  padding: 0.8rem 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.cat-body h3 {
  font-family: var(--font-display-en);
  font-weight: 400;
  font-size: 0.98rem;
  color: var(--maroon-deep);
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--maroon-deep);
}

.price-display-stack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.product-price-discounted {
  font-weight: 700;
  color: var(--maroon-deep);
}

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

.discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(122, 16, 41, 0.08);
  color: var(--maroon);
}

.cart-item-price-stack {
  justify-content: flex-end;
  margin-left: auto;
}

.product-card-footer .btn {
  padding: 0.7rem 0.95rem;
  min-height: 42px;
  border-radius: 10px;
  font-size: 0.86rem;
  width: 100%;
  justify-content: center;
}

.cat-body p {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0;
}

.product-pill {
  display: inline-block;
  margin: 0 0 0.15rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(201, 151, 31, 0.16);
  color: var(--maroon-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-meta {
  margin-bottom: 0.25rem;
}

.search-result-card .cat-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.product-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 12, 24, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.product-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.product-modal {
  width: min(920px, 100%);
  max-height: min(94vh, 900px);
  overflow: auto;
  background: linear-gradient(135deg, rgba(255, 246, 233, 0.98) 0%, rgba(251, 234, 209, 0.98) 100%);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(74, 12, 24, 0.22);
  padding: 1rem;
  position: relative;
  border: 1px solid rgba(74, 12, 24, 0.08);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.3s ease;
}

.product-modal-backdrop.is-open .product-modal {
  transform: translateY(0) scale(1);
}

.product-modal-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.05fr);
  gap: 1.25rem;
  align-items: start;
}

.product-modal-media {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.product-gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.product-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 246, 233, 0.94);
  color: var(--maroon-deep);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(74, 12, 24, 0.16);
  transition: transform 0.2s ease, background 0.2s ease;
}

.product-gallery-arrow:hover,
.product-gallery-arrow:focus-visible {
  background: rgba(201, 151, 31, 0.14);
  transform: translateY(-50%) scale(1.05);
}

.product-gallery-arrow-prev {
  left: 12px;
}

.product-gallery-arrow-next {
  right: 12px;
}

.product-gallery-stage img,
.product-modal img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 20px;
  border: 1px solid rgba(74, 12, 24, 0.08);
  box-shadow: 0 12px 28px rgba(74, 12, 24, 0.12);
}

.product-gallery-nav {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}

.product-gallery-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(74, 12, 24, 0.2);
  transition: background var(--transition), transform var(--transition);
}

.product-gallery-dot.active {
  background: var(--maroon-soft);
  transform: scale(1.15);
}

.product-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.product-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.product-modal-body h3 {
  font-family: var(--font-display-en);
  color: var(--maroon-deep);
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.product-modal-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--maroon-soft);
}

.product-modal-stock {
  color: var(--green);
  font-weight: 700;
}

.product-modal-description {
  color: var(--ink-soft);
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  line-height: 1.6;
}

.product-modal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.product-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(74, 12, 24, 0.08);
}

.qty-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--maroon-deep);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(74, 12, 24, 0.06);
}

.qty-stepper button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--maroon-deep);
  color: var(--cream);
  cursor: pointer;
  font-size: 1rem;
}

.qty-value {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  color: var(--maroon-deep);
}

.modal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.8rem;
  background: rgba(74, 12, 24, 0.08);
  color: var(--maroon-deep);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.8rem;
}

.product-modal-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.product-modal-actions .btn {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 14px;
  padding: 0.8rem 1rem;
  font-size: 1.125rem;
  line-height: 1.2;
  height: auto;
  min-height: 0;
}

@media (max-width: 768px) {
  .product-modal-backdrop {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .product-gallery-stage {
    min-height: 220px;
  }

  .product-modal {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    padding: 0.85rem;
    overflow-y: auto;
  }

  .product-modal-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .product-modal img {
    aspect-ratio: 4 / 3.2;
    border-radius: 14px;
  }

  .product-qty-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-modal-actions {
    flex-direction: column;
  }

  .product-modal-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .product-modal {
    padding: 0.75rem;
  }

  .product-modal-body h3 {
    font-size: 1.15rem;
  }

  .product-modal-description {
    font-size: 0.94rem;
  }
}

@media (max-width: 640px) {
  .sticky-cart-bar {
    width: min(94vw, 520px);
    padding: 0.72rem 0.8rem;
    /* Was previously an un-wrapped flex row while the button below is
       forced to width:100% — that overflowed the pill on narrow screens.
       Wrapping lets the meta row and the button each take their own
       full-width row instead. */
    flex-wrap: wrap;
  }

  /* Reserved bottom space ONLY while the bar is visible (has-sticky-cart
     is toggled in lockstep with the [hidden] attribute by
     renderStickyCartBar(), the single source of truth). Empty cart = no
     class = no reserved space. env(safe-area-inset-bottom) keeps it clear
     of notch/home-indicator devices too. */
  body.has-sticky-cart:not(.modal-open) {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  .sticky-cart-meta {
    width: 100%;
    justify-content: space-between;
  }

  .sticky-cart-view-btn {
    width: 100%;
    text-align: center;
  }

  .container {
    width: min(92%, 100%);
  }

  .hero-content {
    padding-top: 2.25rem;
  }

  .section-title {
    font-size: clamp(1.45rem, 6vw, 1.9rem);
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .cat-body {
    padding: 1rem 1rem 1.25rem;
  }

  .product-card-footer .btn {
    width: 100%;
    justify-content: center;
    padding: 0.68rem 0.8rem;
  }

  .cart-shell {
    grid-template-columns: 1fr;
  }

  .cart-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-item img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
  }

  .contact-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .footer-content {
    padding: 2.3rem 0 1.6rem;
  }
}

@media (max-width: 420px) {
  body {
    font-size: 15px;
  }

  .btn {
    padding: 0.8rem 1.1rem;
    font-size: 0.92rem;
  }

  .brand-text {
    display: none;
  }

  .cart-item-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-item-price {
    font-size: 0.95rem;
  }

  .cart-actions {
    gap: 0.45rem;
  }
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.4rem 1.4rem;
  border: 1px dashed rgba(74, 12, 24, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 246, 233, 0.7);
  color: var(--ink-soft);
}

.empty-state h3 {
  color: var(--maroon-deep);
  margin-bottom: 0.4rem;
}


.cart-section {
  padding: 4rem 0 5rem;
}

.cart-shell {
  display: grid;
  grid-template-columns: 1.7fr 0.9fr;
  gap: 1.5rem;
  align-items: start;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(74, 12, 24, 0.08);
}

.cart-item img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 14px;
}

.cart-item-info {
  flex: 1;
}

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.cart-item-title {
  color: var(--maroon-deep);
  font-weight: 700;
}

.cart-item-price {
  color: var(--maroon-soft);
  font-weight: 700;
}

.cart-item-meta {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
}

.cart-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.qty-btn,
.remove-btn {
  border: 1px solid rgba(74, 12, 24, 0.14);
  background: rgba(255, 246, 233, 0.9);
  color: var(--maroon-deep);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-weight: 700;
}

.remove-btn {
  width: auto;
  padding: 0 0.8rem;
}

.cart-summary {
  padding: 1.3rem;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(74, 12, 24, 0.96), rgba(122, 16, 41, 0.96));
  color: var(--cream);
  box-shadow: 0 16px 36px rgba(74, 12, 24, 0.16);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 246, 233, 0.16);
}

.summary-row.grand-total {
  font-size: 1.05rem;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 0.3rem;
}

/* Step-by-step price breakdown (Original -> Product Discount -> Offer ->
   Final) shown under each cart line in the checkout order summary.
   Display-only styling — no pricing values are computed here. */
.price-breakdown {
  margin: 0.2rem 0 0.75rem;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid rgba(255, 246, 233, 0.25);
  background: rgba(255, 246, 233, 0.06);
  border-radius: 0 10px 10px 0;
}

.price-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0;
  font-size: 1rem;
  color: #000;
}

.price-breakdown-row.discount-off span:last-child {
  color: #d32f2f;
}

.price-breakdown-row.final-price {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  font-size: 1.1rem;
  color: #000;
  font-weight: 700;
}

@media (max-width: 480px) {
  .price-breakdown-row {
    font-size: 0.8rem;
  }
}

.delivery-select-label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 1rem 0 1rem;
  font-size: 0.95rem;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
}

.checkout-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.92rem;
  color: var(--cream);
}

.checkout-field input,
.checkout-field textarea,
.checkout-field select {
  border: 1px solid rgba(255, 246, 233, 0.18);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--maroon-deep);
  font: inherit;
  outline: none;
}

.cart-checkout {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

.sticky-cart-bar {
  position: fixed;
  left: 50%;
  bottom: 0.95rem;
  transform: translateX(-50%);
  width: min(92vw, 520px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 0.95rem;
  background: rgba(74, 12, 24, 0.97);
  color: var(--cream);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(74, 12, 24, 0.25);
  z-index: 999;
}

/* Single source of truth for visibility is the `hidden` attribute that
   renderStickyCartBar() sets on #stickyCartBar based on cartState. Without
   this rule, the unconditional `display: flex` above wins over the
   browser's built-in `[hidden] { display: none }` (author CSS always beats
   the UA stylesheet at equal specificity), so the bar stayed visible —
   reserving space, catching clicks, and flashing on load — even with 0
   items on BOTH desktop and mobile. This is the actual fix for that. */
.sticky-cart-bar[hidden] {
  display: none !important;
}

/* The product modal (quantity selector, Add to Cart, Place Order,
   description) goes full-screen on mobile and its own z-index (400) sits
   below the sticky bar's (999), so the bar was floating on top of those
   controls whenever the modal was open. Reuse the existing `modal-open`
   body class (already toggled by openProductModal/closeProductModal) so
   the cart bar never overlaps the modal, on any breakpoint. */
body.modal-open .sticky-cart-bar {
  display: none !important;
}

.sticky-cart-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sticky-cart-icon {
  font-size: 1.15rem;
}

.sticky-cart-count {
  font-weight: 700;
}

.sticky-cart-subtotal {
  color: var(--gold-light);
  font-weight: 700;
}

.sticky-cart-view-btn {
  background: var(--gold);
  color: var(--maroon-deep);
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}

.empty-cart {
  text-align: center;
  padding: 2rem;
  border-radius: 18px;
  background: rgba(255, 246, 233, 0.8);
  color: var(--ink-soft);
  border: 1px dashed rgba(74, 12, 24, 0.18);
}

/* The floating call/WhatsApp/Instagram/share buttons (.fab, right: 1.3rem,
   54px, shrinking to 46px + right: 0.8rem at <=600px) live in the same
   bottom-right corner as this bar. Anchoring left + insetting right (instead
   of centering) keeps the two from overlapping at narrower widths, while
   max-width preserves the original centered look on larger screens. */
@media (max-width: 680px) {
  .sticky-cart-bar {
    left: 0.95rem;
    right: calc(1.3rem + 54px + 0.6rem);
    transform: none;
    width: auto;
    max-width: 480px;
  }
}

@media (max-width: 600px) {
  .sticky-cart-bar {
    right: calc(0.8rem + 46px + 0.5rem);
  }
}

@media (max-width: 900px) {
  .cart-shell {
    grid-template-columns: 1fr;
  }
}

/* divider between sections, echoes the toran motif at smaller scale */
.divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity: 0.5;
  margin: 0 auto;
  width: 92%;
  max-width: var(--max-width);
}

/* =============================================================
   ABOUT SECTION
============================================================= */
.about {
  padding: 5rem 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-image img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 3px solid var(--gold-light);
}

.about-text .section-eyebrow {
  text-align: left;
}

.about-text .section-title {
  text-align: left;
}

.about-text .section-title .te {
  margin-left: 0;
}

.about-text p {
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-text .section-eyebrow,
  .about-text .section-title {
    text-align: center;
  }
}

/* =============================================================
   WHY CHOOSE US
============================================================= */
.why-us {
  padding: 5rem 0;
  background: var(--cream-warm);
}

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

.why-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition);
}

.why-card:hover {
  transform: translateY(-5px);
}

.why-icon {
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
}

.why-card h3 {
  font-family: var(--font-display-en);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--maroon-deep);
  margin-bottom: 0.5rem;
}

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

/* =============================================================
   STORE TIMINGS
============================================================= */
.timings {
  background: linear-gradient(135deg, var(--maroon-deep), var(--maroon));
  color: var(--cream);
  padding: 4.5rem 0;
  text-align: center;
}

.timings-content {
  max-width: 560px;
}

.timings-icon {
  font-size: 2.6rem;
  margin-bottom: 0.5rem;
}

.timings-hours {
  font-family: var(--font-display-en);
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--gold-light);
  margin: 0.6rem 0 0.3rem;
}

.timings-days {
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.timings-note {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* =============================================================
   CONTACT
============================================================= */
.contact {
  padding: 5rem 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.contact-card {
  background: linear-gradient(135deg, rgba(255, 246, 233, 0.95), rgba(251, 234, 209, 0.95));
  border: 1px solid rgba(74, 12, 24, 0.1);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 24px rgba(74, 12, 24, 0.08);
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
}

.contact-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.contact-card h4 {
  font-family: var(--font-display-en);
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--maroon-deep);
  margin-bottom: 0.15rem;
}

.contact-card p,
.contact-card a {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.contact-card a {
  color: var(--maroon-soft);
  text-decoration: none;
}

.contact-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.contact-map {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 3px solid var(--gold-light);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.map-link {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  background: var(--maroon-deep);
  color: var(--cream);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   FOLLOW US
============================================================= */
.follow-us {
  padding: 1rem 0 4rem;
}

.follow-card {
  background: linear-gradient(135deg, rgba(255, 246, 233, 0.96) 0%, rgba(251, 234, 209, 0.96) 100%);
  border: 1px solid rgba(74, 12, 24, 0.1);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(74, 12, 24, 0.1);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.6rem;
  align-items: center;
}

.follow-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.follow-copy {
  color: var(--ink-soft);
  max-width: 620px;
}

.follow-btn {
  align-self: flex-start;
  margin-top: 0.3rem;
}

.instagram-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.instagram-post {
  min-height: 130px;
  border-radius: 18px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--cream);
  background: linear-gradient(135deg, rgba(74, 12, 24, 0.95) 0%, rgba(122, 16, 41, 0.95) 100%);
  border: 1px solid rgba(232, 196, 104, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform var(--transition), box-shadow var(--transition);
}

.instagram-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(74, 12, 24, 0.16);
}

.post-tag {
  display: inline-block;
  align-self: flex-start;
  background: rgba(232, 196, 104, 0.2);
  color: var(--gold-light);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.instagram-post h3 {
  font-family: var(--font-display-en);
  font-size: 1rem;
  margin: 0;
  color: var(--cream);
}

@media (max-width: 900px) {
  .follow-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .follow-card {
    padding: 1.25rem;
  }

  .instagram-feed {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   FOOTER
============================================================= */
.site-footer {
  background: var(--maroon-deep);
  color: var(--cream-warm);
  position: relative;
  padding-top: 0;
}

.toran-footer {
  filter: brightness(1.1);
}

.footer-content {
  padding: 3rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.footer-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold);
}

.footer-name {
  font-family: var(--font-display-en);
  font-size: 1.05rem;
}

.footer-name .te {
  font-family: var(--font-display-te);
  display: block;
  margin-left: 0;
  margin-top: 0.2rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--gold-light);
}

.footer-contact {
  font-size: 0.88rem;
  opacity: 0.9;
}

.footer-contact a {
  color: var(--gold-light);
}

.footer-bottom {
  font-size: 0.8rem;
  opacity: 0.7;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.2rem;
  width: 100%;
}

/* =============================================================
   FLOATING ACTION BUTTONS
============================================================= */
.fab {
  position: fixed;
  right: 1.3rem;
  z-index: 300;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  cursor: pointer;
  animation: floatButton 3.2s ease-in-out infinite;
  will-change: transform;
}

.fab:hover,
.fab:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
}

.fab:active {
  transform: scale(0.96);
}

.fab-whatsapp {
  bottom: 5.5rem;
  background: #1FA855;
}

.fab-call {
  bottom: 1.3rem;
  background: var(--maroon-deep);
}

.fab-instagram {
  bottom: 9.8rem;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.fab-share {
  bottom: 14rem;
  background: var(--gold);
  color: var(--maroon-deep);
}

.fab-share.copied {
  background: var(--maroon-deep);
  color: var(--cream);
}

.back-to-top {
  position: fixed;
  left: 1.3rem;
  bottom: 1.3rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--maroon-deep);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 300;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@keyframes floatButton {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (max-width: 600px) {
  .fab {
    width: 46px;
    height: 46px;
    right: 0.8rem;
  }

  .fab-call {
    bottom: 0.8rem;
  }

  .fab-whatsapp {
    bottom: 5rem;
  }

  .fab-instagram {
    bottom: 9.1rem;
  }

  .fab-share {
    bottom: 13.2rem;
  }

  .back-to-top {
    left: 0.8rem;
    bottom: 0.8rem;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 640px) {
  /* Touch-target pass: several controls were sized for mouse pointers
     (30-40px). Bumping them closer to the ~44px touch guideline on
     small screens only, so the desktop/tablet look is unchanged. */
  .qty-stepper button {
    width: 38px;
    height: 38px;
  }

  .qty-btn,
  .remove-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .remove-btn {
    padding: 0 1rem;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .nav-toggle {
    padding: 10px;
  }
}

/* =============================================================
   MOBILE RESPONSIVE NAV
============================================================= */
@media (max-width: 900px) {
  /* ROOT-CAUSE FIX: .nav-wrapper (brand + icon buttons + language
     switcher + hamburger toggle) was a single-line, non-wrapping flex
     row. Below ~420px the combined content width of those items
     exceeds the row's available space, so the row overflowed past the
     container/viewport edge (the hamburger button was measured
     rendering ~34px past the container's right edge). That invisible
     horizontal overflow is what threw off centering for the hero,
     product grid, and sticky cart below it. Letting the row wrap keeps
     every item inside the container — no negative margins or
     transforms needed, and .container's own centering is untouched. */
  .nav-wrapper {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--cream);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
  }

  .nav-links.open {
    max-height: 480px;
  }

  .nav-link {
    padding: 0.9rem 1.5rem;
    width: 100%;
    border-bottom: 1px solid rgba(74,12,24,0.06);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media (max-width: 480px) {
  .brand-text { display: none; }
  .hero-content { padding-top: 3rem; }
}

/* =============================================================
   OFFERS MANAGEMENT (PHASE) — homepage sections, offer badge,
   offer cards/slider, and the standalone offer.html page.
   Follows the existing design tokens; no changes to any rule
   above this point.
============================================================= */

/* ---- Offer Badge (used on product cards + modal + detail page) ---- */
.offer-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: calc(100% - 1.2rem);
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: var(--gold-light);
  color: var(--maroon-deep);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 14px rgba(74, 12, 24, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Static (non-absolute) variant for places without a positioned
   image wrapper, e.g. next to the product-pill category tag. */
.offer-badge.offer-badge-static {
  position: static;
  margin: 0 0 0.15rem;
}

/* ---- Homepage: Offers Section shell ---- */
.offers-section {
  padding: 2.4rem 0 3.2rem;
}

.offers-section-head {
  margin-bottom: 1.2rem;
}

.offers-section-head h2 {
  font-family: var(--font-display-en);
  color: var(--maroon-deep);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 0.35rem;
}

.offers-section-head p {
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0;
}

/* ---- Homepage: Launch Offer / Festival Banner ---- */
.offer-hero-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 220px;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg, rgba(74, 12, 24, 0.96), rgba(122, 16, 41, 0.94));
  color: var(--cream);
  text-decoration: none;
}

.offer-hero-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.offer-hero-banner-inner {
  position: relative;
  padding: 1.6rem 1.8rem;
  max-width: 680px;
}

.offer-hero-banner-eyebrow {
  display: inline-block;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(232, 196, 104, 0.24);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.offer-hero-banner-title {
  font-family: var(--font-display-en);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  margin: 0 0 0.4rem;
}

.offer-hero-banner-desc {
  margin: 0 0 0.7rem;
  color: rgba(255, 246, 233, 0.9);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 560px;
}

.offer-hero-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--maroon-deep);
  font-weight: 700;
  font-size: 0.88rem;
}

/* ---- Homepage: Active Offers Slider ---- */
.offers-slider-wrap {
  position: relative;
  margin-bottom: 1.6rem;
}

.offers-slider {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.offers-slider::-webkit-scrollbar {
  height: 6px;
}

.offers-slider::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 999px;
}

.offer-slide {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(320px, 78vw);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(74, 12, 24, 0.96), rgba(122, 16, 41, 0.94));
  color: var(--cream);
  text-decoration: none;
  min-height: 170px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 12px 26px rgba(74, 12, 24, 0.14);
}

.offer-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.offer-slide-inner {
  position: relative;
  padding: 1rem 1.1rem;
}

.offer-slide-discount {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--gold-light);
  color: var(--maroon-deep);
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.offer-slide-title {
  font-family: var(--font-display-en);
  font-size: 1.05rem;
  margin: 0;
}

/* ---- Homepage: Offer Cards grid ---- */
.offers-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.offer-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(74, 12, 24, 0.1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}

.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(74, 12, 24, 0.16);
}

.offer-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(74, 12, 24, 0.94), rgba(122, 16, 41, 0.94));
}

.offer-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.offer-card-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.offer-card-body h3 {
  margin: 0;
  font-family: var(--font-display-en);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--maroon-deep);
}

.offer-card-body p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.offer-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--maroon);
  font-size: 0.86rem;
}

/* ---- Standalone offer.html page ---- */
.offer-page-shell {
  min-height: 100vh;
  padding-bottom: 3.5rem;
}

.offer-page-crumbs {
  width: min(1180px, 92%);
  margin: 1.4rem auto 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.offer-page-crumbs a {
  color: var(--maroon-soft);
  font-weight: 600;
}

.offer-page-body {
  width: min(1180px, 92%);
  margin: 2rem auto 0;
}

.offer-page-count {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.offer-page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.2rem;
  color: var(--maroon-soft);
  font-weight: 600;
}

.offer-not-found {
  width: min(720px, 92%);
  margin: 3rem auto;
  text-align: center;
  background: var(--white);
  border-radius: 20px;
  padding: 2.4rem 1.6rem;
  box-shadow: 0 10px 28px rgba(74, 12, 24, 0.1);
}

.offer-not-found h1 {
  font-family: var(--font-display-en);
  color: var(--maroon-deep);
  font-size: 1.4rem;
}

/* ---- Responsive: 320 / 360 / 375 / 390 / 414 / 768 / 1024 / desktop ---- */
@media (max-width: 1024px) {
  .offers-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .offers-section { padding: 1.8rem 0 2.4rem; }
  .offer-hero-banner { min-height: 180px; }
  .offer-hero-banner-inner { padding: 1.2rem 1.2rem; }
}

@media (max-width: 480px) {
  .offers-cards-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .offer-card-body { padding: 0.8rem 0.85rem 1rem; }
  .offer-card-body h3 { font-size: 0.98rem; }
  .offer-hero-banner { border-radius: 16px; min-height: 160px; }
  .offer-hero-banner-inner { padding: 1rem 1rem; }
  .offer-hero-banner-desc { display: none; }
  .offer-slide { width: min(260px, 82vw); min-height: 150px; }
}

@media (max-width: 360px) {
  .offers-cards-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   COLLECTION PAGE UI/UX REDESIGN (Homepage "Our Rakhi Collection")
   Everything below is scoped to #categoryGrid and to the .collection
   section's own filter/search elements (id="collection" on index.html
   only). collection.html and offer.html reuse the same .cat-card /
   .cat-body / .collection-grid / .product-pill / .discount-badge
   classes and are completely unaffected — every selector here either
   starts from #categoryGrid or from .collection (a class that only
   exists on this one section). No shared/global rule above this point
   was changed; these are additive, higher-specificity overrides.
   No business logic, Supabase, Admin, Cart or Checkout code is touched.
   ===================================================================== */

/* ---------- Filter & search area: spacing + responsiveness ---------- */
.collection .collection-toolbar {
  margin-bottom: 1.6rem;
}

.collection .search-shell {
  padding: 0.95rem 1.2rem;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.collection .search-shell:focus-within {
  border-color: rgba(74, 12, 24, 0.28);
  box-shadow: 0 14px 34px rgba(74, 12, 24, 0.16);
}

.collection .filter-panel {
  padding: 1.5rem 1.6rem 1.6rem;
  margin-bottom: 2.4rem;
}

.collection .filter-row {
  gap: 1rem 1.1rem;
}

.collection .filter-select {
  min-height: 46px;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.collection .filter-select:focus-visible,
.collection .search-input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.collection .filter-chip-row {
  gap: 0.65rem;
}

.collection .filter-chip,
.collection .clear-filters {
  min-height: 44px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.collection .filter-chip:active,
.collection .clear-filters:active {
  transform: scale(0.96);
}

@media (max-width: 760px) {
  .collection .filter-panel {
    padding: 1.25rem 1.1rem 1.35rem;
    border-radius: 20px;
  }

  /* Three cramped columns → one comfortable, full-width column so each
     select gets a proper touch target instead of being squeezed. */
  .collection .filter-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Chips scroll horizontally like a modern app filter bar instead of
     wrapping into a dense, multi-row block. */
  .collection .filter-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 0.35rem;
    margin: 0 -0.1rem 0.9rem;
    scrollbar-width: none;
  }

  .collection .filter-chip-row::-webkit-scrollbar {
    display: none;
  }

  .collection .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ------------------------- Product grid layout ------------------------ */
#categoryGrid.collection-grid {
  gap: 1.75rem 1.35rem;
  align-items: stretch;
}

@media (max-width: 1100px) {
  #categoryGrid.collection-grid {
    gap: 1.5rem 1.1rem;
  }
}

@media (max-width: 760px) {
  #categoryGrid.collection-grid {
    gap: 1.1rem 0.8rem;
  }
}

@media (max-width: 480px) {
  #categoryGrid.collection-grid {
    gap: 1rem 0.7rem;
  }

  body.has-sticky-cart:not(.modal-open) #categoryGrid.collection-grid {
    margin-bottom: 1rem;
  }
}

/* ------------------------------ Product card --------------------------- */
#categoryGrid .cat-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(74, 12, 24, 0.07);
  box-shadow: 0 8px 22px rgba(74, 12, 24, 0.08);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

#categoryGrid .cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 38px rgba(74, 12, 24, 0.16);
  border-color: rgba(74, 12, 24, 0.12);
}

/* Touch feedback for mobile/Android — a quick, subtle press-down so a
   tap always feels acknowledged, without needing hover support. */
#categoryGrid .cat-card:active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: 0.28s;
}

/* Image container: fixed, identical aspect ratio on every card (so every
   card is the same height regardless of the source photo's own
   proportions) with a soft brand-tinted backdrop behind the image. Using
   object-fit: contain on the img means the whole product is always
   visible — nothing is cropped or artificially zoomed — while this
   wrapper keeps the tile itself perfectly square across the grid. */
#categoryGrid .cat-card .cat-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 246, 233, 0.9), rgba(251, 234, 209, 0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
}

#categoryGrid .cat-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.35s ease;
}

@media (hover: hover) {
  #categoryGrid .cat-card:hover img {
    transform: scale(1.045);
  }
}

#categoryGrid .cat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.1rem 1.15rem;
}

/* Reserve room for exactly 2 lines of product name so a one-line name
   doesn't leave a shorter box than a two-line name on the card next to
   it — keeps every card's internal rows aligned with its neighbors. */
#categoryGrid .cat-body h3 {
  min-height: 2.5em;
}

#categoryGrid .price-display-stack {
  min-height: 1.4rem;
}

/* Pin "View Details" to the bottom of every card regardless of how much
   space the name/price/badge above it used. */
#categoryGrid .product-card-footer {
  margin-top: auto;
  padding-top: 0.5rem;
}

#categoryGrid .product-card-footer .btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

#categoryGrid .product-card-footer .btn:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  #categoryGrid .cat-body {
    padding: 0.75rem 0.8rem 0.85rem;
    gap: 0.35rem;
  }

  #categoryGrid .product-card-footer .btn {
    padding: 0.6rem 0.8rem;
    min-height: 38px;
    font-size: 0.82rem;
  }
}

/* --------------------- Fade-in on load / filter change ------------------
   Snappier, more premium timing than the generic sitewide [data-aos]
   fade (0.7s) — cards rise + fade in at ~320ms. Index.html staggers the
   transition-delay per card in JS so a fresh search/filter result cascades
   in instead of popping all at once. Purely visual; no markup/behavior
   change to the underlying [data-aos] reveal mechanism used elsewhere. */
#categoryGrid[data-aos],
#categoryGrid .cat-card[data-aos] {
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  #categoryGrid .cat-card,
  #categoryGrid .cat-card img,
  #categoryGrid .product-card-footer .btn {
    transition: none !important;
  }
}

/* --------------------- Mini Cart Popup ------------------
   Small confirmation popup that opens automatically right after "Add to
   Cart" (from the homepage product modal, and from the standalone product
   page). It is intentionally `position: fixed` and never touches
   `overflow` on <body> or <html> — unlike the full product modal, it must
   never lock/shift page scroll or reflow layout, since it can open while
   the shopper is mid-scroll. It never calls history.pushState either, so
   it has zero effect on browser Back. Purely additive UI; does not replace
   the sticky cart bar or cart.html. */
.mini-cart-popup {
  position: fixed;
  top: 84px;
  right: 1.2rem;
  z-index: 1200;
  width: min(92vw, 360px);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(74, 12, 24, 0.1);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}

.mini-cart-popup.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mini-cart-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: var(--maroon-deep);
  color: var(--cream);
}

.mini-cart-popup-header strong {
  font-family: var(--font-display-en);
  font-size: 1rem;
}

.mini-cart-popup-close {
  background: none;
  border: none;
  color: var(--cream);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.mini-cart-popup-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(74, 12, 24, 0.08);
}

.mini-cart-popup-item img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.mini-cart-popup-item-name {
  font-weight: 600;
  font-size: 0.92rem;
}

.mini-cart-popup-item-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.mini-cart-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
}

.mini-cart-popup-subtotal {
  font-weight: 700;
}

.mini-cart-popup-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 0.9rem;
}

.mini-cart-popup-actions .btn {
  flex: 1;
  padding: 0.55rem 0.7rem;
  font-size: 0.88rem;
  text-align: center;
}

@media (max-width: 640px) {
  .mini-cart-popup {
    top: auto;
    bottom: 5.4rem;
    right: 0.7rem;
    left: 0.7rem;
    width: auto;
  }
}
#upiNumberDisplay,
#whatsappNumberDisplay,
#paymentInstructionsList {
    color: #2b1d14 !important;
}

/* "WhatsApp Number" and "Payment Instructions" labels in the UPI section
   were inheriting the light .checkout-field text color (meant for a
   dark-background modal elsewhere) and were hard to read here. Target
   only those two labels (2nd/3rd direct <span> children of #upiPhoneField)
   so the "UPI Payment Number" label above them is left as-is. */
#upiPhoneField > span:nth-of-type(2),
#upiPhoneField > span:nth-of-type(3) {
    color: #2b1d14 !important;
}