:root {
  --purple: #7430d1;
  --purple-dark: #5a20ae;
  --purple-soft: #f2ebff;
  --green: #099a43;
  --green-soft: #eafaf1;
  --red: #d71920;
  --red-soft: #ffeff1;
  --text: #111827;
  --muted: #6f7682;
  --line: #eaeaf0;
  --bg: #f5f7fb;
  --white: #fff;
  --shadow: 0 16px 40px rgba(34, 20, 74, 0.12);
  --shadow-soft: 0 12px 30px rgba(28, 35, 58, 0.08);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #f5f7fb 0%, #fff 100%);
}
a { text-decoration: none; color: inherit; }
button, input, select { font: inherit; }
img { max-width: 100%; }

.topbar {
  position: sticky; top: 36px; z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(116, 48, 209, 0.08);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
}
.topbar-inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 78px; margin: auto;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-size: 1.2rem; font-weight: 950; letter-spacing: 0.04em;
  color: #171d2c; padding: 10px 0;
}
.logo span { color: var(--purple); }
nav {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800;
}
.nav-link {
  padding: 10px 18px; border-radius: 999px;
  color: #2a2f3b; transition: all 0.25s ease;
}
.nav-link:hover, .nav-link.active {
  background: linear-gradient(135deg, #7d39e7, #5b2ab6);
  color: #fff;
  box-shadow: 0 10px 22px rgba(116, 48, 209, 0.22);
}
.header-cart {
  border: 0; background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color: #fff; box-shadow: 0 12px 24px rgba(116, 48, 209, 0.22);
  border-radius: 999px; padding: 11px 18px; cursor: pointer; font-weight: 900;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.header-cart:hover { transform: translateY(-1px); }
.header-cart b { margin-left: 5px; color: #fff; }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; }
.min-order-notice {
  position: sticky;
  top: 0;
  z-index: 49;
  overflow: hidden;
  min-height: 36px;
  padding: 7px 14px;
  color: #123eaa;
  background: rgba(234, 243, 255, .96);
  border-bottom: 1px solid #c7dbf7;
  box-shadow: 0 5px 14px rgba(18, 62, 170, .08);
  font-size: .86rem;
  backdrop-filter: blur(10px);
}
.min-order-notice__track {
  display: flex;
  width: max-content;
  animation: min-order-marquee 12s linear infinite;
  will-change: transform;
}
.min-order-notice__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding-right: 56px;
  white-space: nowrap;
}
.min-order-notice__item strong { color: #e31b23; }
.min-order-notice__separator { color: #e31b23; font-size: 1rem; }
.min-order-notice__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #e31b23;
  box-shadow: 0 0 0 4px rgba(227, 27, 35, .12);
}
@keyframes min-order-marquee {
  to { transform: translateX(-12.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .min-order-notice__track { animation-duration: 24s; }
}

.hero {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 30px; padding: 0; position: relative;
}
.hero-slider {
  background: linear-gradient(135deg, #140d23 0%, #3f1a7c 44%, #6a2ed4 100%);
  border-radius: 30px; overflow: hidden; position: relative; box-shadow: 0 24px 60px rgba(80, 18, 132, 0.18);
  border: 1px solid rgba(255,255,255,0.08);
}
.hero-slider::after {
  content: ""; position: absolute; z-index: 0; top: -8px; right: -8px;
  width: min(30vw, 270px); aspect-ratio: 1.35; background: url("../images/animate.gif") center / cover no-repeat;
  opacity: 0.12; mix-blend-mode: screen; pointer-events: none;
}

/* Fixed page-wide fireworks atmosphere */
body > header,
body > main,
body > footer { position: relative; z-index: 1; }
body::before,
body::after { display: none; }
.hero-slider::after { display: none; }
.page-fireworks {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.firework-burst {
  position: absolute;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.08);
  background: repeating-conic-gradient(from 0deg, transparent 0deg 13deg, currentColor 13deg 14.5deg, transparent 14.5deg 28deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 12%, #000 17% 64%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 0 12%, #000 17% 64%, transparent 70%);
  animation: pageFirework 13s cubic-bezier(.2, .7, .3, 1) infinite;
}
.burst-1 { top: 7%; left: 8%; color: rgba(30, 91, 219, .18); animation-delay: 0s; }
.burst-2 { top: 10%; left: 47%; color: rgba(227, 27, 35, .13); animation-delay: 2.1s; }
.burst-3 { top: 16%; right: 7%; color: rgba(30, 91, 219, .15); animation-delay: 4.2s; }
.burst-4 { top: 43%; left: 4%; color: rgba(227, 27, 35, .11); animation-delay: 6.3s; }
.burst-5 { top: 48%; right: 9%; color: rgba(30, 91, 219, .13); animation-delay: 8.4s; }
.burst-6 { bottom: 12%; left: 14%; color: rgba(30, 91, 219, .12); animation-delay: 3.2s; }
.burst-7 { bottom: 8%; left: 52%; color: rgba(227, 27, 35, .1); animation-delay: 5.3s; }
.burst-8 { bottom: 14%; right: 5%; color: rgba(30, 91, 219, .12); animation-delay: 10.5s; }
.firework-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: .14;
  background: #1e5bdb;
  box-shadow: 0 0 8px currentColor;
  animation: pageSparkle 8s ease-in-out infinite;
}
.spark-1 { top: 23%; left: 24%; color: #1e5bdb; animation-delay: 0s; }
.spark-2 { top: 31%; right: 24%; color: #e31b23; animation-delay: 1.4s; }
.spark-3 { top: 63%; left: 30%; color: #1e5bdb; animation-delay: 2.8s; }
.spark-4 { top: 73%; right: 28%; color: #e31b23; animation-delay: 4.2s; }
.spark-5 { top: 86%; left: 70%; color: #1e5bdb; animation-delay: 5.6s; }
.spark-6 { top: 12%; right: 36%; color: #e31b23; animation-delay: 7s; }
@keyframes pageFirework {
  0%, 8% { opacity: 0; transform: scale(.08); }
  20% { opacity: .12; transform: scale(.48); }
  38% { opacity: .16; transform: scale(1); }
  58%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes pageSparkle {
  0%, 100% { opacity: .08; transform: translateY(8px) scale(.7); }
  45% { opacity: .2; transform: translateY(-8px) scale(1); }
}
@media (max-width: 600px) {
  .firework-burst { width: 64px; animation-duration: 15s; opacity: 0; }
  .burst-5, .burst-6, .burst-7, .burst-8, .spark-4, .spark-5, .spark-6 { display: none; }
  .firework-spark { opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
  .page-fireworks { display: none; }
}
.hero-slider-track {
  position: relative; min-height: 520px;
}
.hero-slide {
  display: none; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 36px;
  padding: 36px clamp(22px, 4vw, 48px); min-height: 520px;
  animation: slideIn 0.6s ease;
}
.hero-slide.active { display: grid; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.small-title { color: var(--purple); font-size: .74rem; font-weight: 950; letter-spacing: 1.5px; margin: 0 0 12px; }
.hero .small-title { color: #e5d7ff; }
.hero-copy {
  position: relative; z-index: 1; color: #fff;
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 4vw, 4.4rem); line-height: 0.96; margin: 0 0 18px; letter-spacing: -0.05em;
}
.hero-copy > p:not(.small-title) {
  color: rgba(255,255,255,0.88); max-width: 610px; line-height: 1.7; font-size: 1.04rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 22px; border-radius: 14px; font-weight: 900; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-btn:hover { transform: translateY(-2px); }
.hero-btn.primary {
  background: linear-gradient(135deg, #ffffff, #f0dfff); color: var(--purple-dark); box-shadow: 0 16px 28px rgba(255,255,255,0.18);
}
.hero-btn.secondary {
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.17);
}
.hero-poster {
  position: relative; display: flex; align-items: center; justify-content: center;
}
.hero-poster img {
  display: block; width: min(100%, 420px); border-radius: 22px; box-shadow: 0 28px 48px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.15); object-fit: cover;
}
.slider-control {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; font-size: 2rem; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(8px); transition: all 0.2s ease; z-index: 2;
}
.slider-control:hover { background: rgba(255,255,255,0.28); }
.slider-control.prev { left: 18px; }
.slider-control.next { right: 18px; }
.slider-dots {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px; z-index: 2;
}
.slider-dots .dot {
  width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.45); cursor: pointer;
  transition: all 0.3s ease;
}
.slider-dots .dot.active { width: 30px; border-radius: 999px; background: #fff; }

.shop { width: min(1180px, calc(100% - 32px)); margin: 40px auto 120px; }
.shop-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; }
.shop-head h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.search-wrap { display: flex; gap: 10px; }
.search-wrap input, .search-wrap select {
  height: 48px; border: 1px solid var(--line); background: rgba(255,255,255,0.9);
  border-radius: 999px; padding: 0 18px; outline: none; box-shadow: var(--shadow-soft);
}
.search-wrap input { width: 280px; }
.search-wrap input:focus, .search-wrap select:focus { border-color: rgba(116,48,209,0.4); box-shadow: 0 0 0 4px rgba(116,48,209,0.08); }

.category-tabs {
  margin: 26px 0 30px; display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
}
.category-tabs button {
  white-space: nowrap; border: 0; background: #f0f2f7; color: #3b4250;
  border-radius: 999px; padding: 10px 18px; cursor: pointer; font-size: .8rem; font-weight: 900; transition: all 0.25s ease;
}
.category-tabs button:hover, .category-tabs button.active {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; box-shadow: 0 10px 22px rgba(116,48,209,0.18);
}

.category-section { margin-bottom: 38px; }
.section-title {
  display: flex; align-items: center; margin: 0 0 14px; position: relative; height: 54px;
}
.section-title span {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; font-size: .92rem; font-weight: 950;
  padding: 15px 30px 15px 24px; border-radius: 16px 0 0 16px; position: relative; min-width: 180px;
}
.section-title span:after {
  content: ""; position: absolute; right: -18px; top: 0; border-top: 27px solid transparent; border-bottom: 27px solid transparent; border-left: 18px solid var(--purple);
}
.section-title:after {
  content: ""; height: 1px; background: linear-gradient(90deg, rgba(116,48,209,0.16), rgba(116,48,209,0)); flex: 1; margin-left: 18px;
}

.product-list { display: flex; flex-direction: column; gap: 14px; }
.product-row {
  background: rgba(255,255,255,0.9); min-height: 120px; border: 1px solid rgba(18,22,32,0.06);
  border-radius: 22px; box-shadow: var(--shadow-soft); display: grid; grid-template-columns: 92px 1fr auto auto;
  align-items: center; gap: 16px; padding: 16px 18px; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-row:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(31, 32, 60, 0.12); }
.product-thumb {
  width: 82px; height: 82px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #fff6ee, #f3eeff);
  position: relative; border: 1px solid rgba(116,48,209,0.08);
}
.product-thumb span:first-child { font-size: 2.2rem; }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.discount-badge {
  position: absolute; left: 0; top: 0; background: linear-gradient(135deg, #ff4d4d, #d71920); color: #fff;
  font-size: .58rem; font-weight: 900; padding: 5px 7px; border-radius: 0 0 10px 0;
}
.product-name { font-size: 1.02rem; font-weight: 900; margin-bottom: 8px; color: var(--text); }
.price-line { display: flex; align-items: baseline; gap: 8px; }
.price { color: var(--purple-dark); font-weight: 950; font-size: 1.3rem; }
.mrp { color: #8b93a2; text-decoration: line-through; font-size: .8rem; }
.pack { color: var(--muted); font-size: .76rem; margin-top: 8px; }
.qty-control { display: flex; align-items: center; gap: 14px; }
.qty-control button {
  width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--purple); color: #fff; font-size: 1.25rem; cursor: pointer;
  box-shadow: 0 10px 20px rgba(116,48,209,0.18); transition: transform 0.2s ease;
}
.qty-control button:hover { transform: translateY(-1px) scale(1.03); }
.qty-number { width: 20px; text-align: center; font-weight: 900; }
.row-total { min-width: 94px; text-align: right; color: var(--green); font-size: 1.12rem; font-weight: 950; }

.empty { padding: 35px; text-align: center; color: var(--muted); background: rgba(255,255,255,0.85); border-radius: 18px; box-shadow: var(--shadow-soft); }

.info-section {
  background: linear-gradient(135deg, #171a26, #1f2337 45%, #2d1b49 100%); color: #fff; padding: 45px max(16px, calc((100% - 1180px)/2));
  display: flex; justify-content: space-between; align-items: center; gap: 25px;
}
.info-section .small-title { color: #dfcfffff; }
.info-section h2 { margin: 0 0 6px; }
.info-section p:not(.small-title) { color: rgba(255,255,255,0.8); margin-bottom: 0; }
.contact-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-actions a {
  background: linear-gradient(135deg, #7d39e7, #5a2ab5); padding: 13px 17px; border-radius: 12px; font-weight: 900;
  box-shadow: 0 12px 24px rgba(116,48,209,0.18); transition: transform 0.25s ease;
}
.contact-actions a:hover { transform: translateY(-2px); }

.whatsapp-float {
  position: fixed; right: 12px; bottom: 18px; z-index: 70; width: 120px; height: 120px; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer;
  box-shadow: none; transition: transform 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.04); }
.wa-badge-image {
  display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none;
}

.cart-float {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 65; transition: .25s;
}
.cart-preview {
  min-width: 200px; height: 58px; padding: 7px 9px; border-radius: 15px; background: linear-gradient(135deg, #7d39e7, #5b2ab6); color: #fff;
  display: flex; align-items: center; gap: 9px; box-shadow: 0 10px 22px rgba(92, 29, 183, .18);
}
.preview-image {
  width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,0.14); color: #fff; display: grid; place-items: center; font-size: 1.8rem; overflow: hidden;
}
.preview-image img { width: 100%; height: 100%; object-fit: cover; }
.preview-text { min-width: 78px; display: flex; flex-direction: column; gap: 3px; }
.preview-text strong { font-size: .72rem; color: rgba(255,255,255,0.78); }
.preview-text b { font-size: 1.08rem; }
.cart-preview > button {
  height: 56px; padding: 0 15px; border: 0; border-left: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; font-weight: 950; cursor: pointer;
}
.cart-preview > button span { font-size: 1.2rem; margin-left: 4px; }

.overlay {
  position: fixed; inset: 0; background: rgba(11, 15, 27, 0.38); z-index: 85; opacity: 0; pointer-events: none; transition: .2s;
}
.overlay.active { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; z-index: 90; top: 0; right: 0; height: 100vh; width: min(430px, 100%);
  background: linear-gradient(180deg, #fff, #fbf9ff); transform: translateX(100%); transition: .25s; display: flex; flex-direction: column; box-shadow: -16px 0 40px rgba(18, 20, 32, 0.16);
}
.cart-drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; }
.drawer-head button { border: 0; background: transparent; font-size: 2rem; cursor: pointer; }
.drawer-items { flex: 1; overflow: auto; padding: 0 20px; }
.drawer-item {
  padding: 15px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 10px;
}
.drawer-item strong { display: block; }
.drawer-item small { color: var(--muted); }
.drawer-qty { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.drawer-qty button {
  width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
}
.drawer-qty button[data-remove] { width: auto; height: auto; border: 0; color: var(--red); padding: 5px 8px; font-weight: 700; }
.drawer-bottom { padding: 18px 20px; border-top: 1px solid var(--line); }
.drawer-bottom > div { display: flex; justify-content: space-between; margin: 6px 0; }
.drawer-bottom .grand { font-size: 1.25rem; margin-bottom: 13px; }
.cart-progress { margin: 10px 0 14px; }
.cart-progress-bar {
  width: 100%; height: 10px; background: #ececf4; border-radius: 999px; overflow: hidden; margin-bottom: 8px;
}
.cart-progress-bar span {
  display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d71920, #f59e0b, #099a43);
  transition: width 0.25s ease;
}
#cartMinMessage {
  display: block; color: var(--muted); line-height: 1.5; font-size: 0.8rem;
}
#cartMinMessage.success { color: var(--green); font-weight: 700; }
.order-btn, .call-btn, .mail-btn {
  width: 100%; display: block; text-align: center; border: 0; border-radius: 14px; padding: 13px; font-weight: 950; cursor: pointer; margin-top: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.order-btn:hover:not(:disabled), .call-btn:hover, .mail-btn:hover { transform: translateY(-1px); }
.order-btn { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; box-shadow: 0 12px 22px rgba(116,48,209,0.18); }
.order-btn:disabled {
  background: #d7d9e0; color: #6f7682; cursor: not-allowed; box-shadow: none; opacity: 0.82;
}
.call-btn { background: var(--purple); color: #fff; }
.mail-btn { background: #20b85c; color: #fff; border:0 solid black; border-radius: 10px; }

.summary-modal {
  position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); display: none; align-items: center; justify-content: center; z-index: 120; padding: 20px;
}
.summary-modal.open { display: flex; }
.summary-card {
  width: min(760px, 100%); background: rgba(255,255,255,0.96); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.18); padding: 24px; max-height: 90vh; overflow: auto;
}
.summary-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.summary-tag { margin: 0 0 6px; font-size: .7rem; letter-spacing: 2px; font-weight: 900; color: var(--purple); }
.summary-head h2 { margin: 0; }
.summary-head button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f5f5f7; font-size: 1.8rem; cursor: pointer;
}
.summary-address { margin-top: 18px; }
.address-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: .9rem;
}
.address-header span {
  background: #eefaf3; color: var(--green); padding: 6px 10px; border-radius: 999px; font-weight: 800;
}
.address-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.address-fields input, .address-fields textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit;
}
.address-fields textarea { grid-column: 1 / -1; resize: vertical; }
.summary-items-wrap {
  margin-top: 22px; background: #fafafb; border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.summary-items-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.summary-items { display: grid; gap: 12px; }
.summary-table-wrap { overflow-x: auto; }
.summary-table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; }
.summary-table th, .summary-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.summary-table th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.summary-table td:nth-child(1), .summary-table th:nth-child(1), .summary-table td:nth-child(3), .summary-table th:nth-child(3) { text-align: center; }
.summary-table td:nth-child(4), .summary-table th:nth-child(4), .summary-table td:nth-child(5), .summary-table th:nth-child(5) { text-align: right; white-space: nowrap; }
.summary-table td:last-child { font-weight: 900; color: var(--green); }
.price-summary {
  margin-top: 20px; background: linear-gradient(180deg, #fff, #faf7ff); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px;
}
.price-summary > div { display: flex; justify-content: space-between; align-items: center; }
.summary-total { font-size: 1.2rem; font-weight: 950; color: var(--text); }
.summary-warning {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-weight: 700; border: 1px solid rgba(215,25,32,0.15);
}
.summary-warning.success { background: var(--green-soft); color: var(--green); border-color: rgba(9,154,67,0.15); }
.summary-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }

footer { background: #0d0f17; color: #9da1ac; padding: 20px max(16px, calc((100% - 1180px)/2)); display: flex; justify-content: space-between; gap: 15px; font-size: .8rem; }

@media (max-width: 800px) {
  .hero-slider-track { min-height: auto; }
  .hero-slide { grid-template-columns: 1fr; padding: 28px 20px 54px; min-height: 450px; }
  .hero-copy { text-align: center; }
  .hero-copy > p:not(.small-title) { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-poster { max-width: 420px; width: 100%; margin: 0 auto; }
  .shop-head { flex-direction: column; align-items: stretch; }
  .search-wrap { width: 100%; }
  .search-wrap input { flex: 1; width: auto; }
  .product-row { grid-template-columns: 72px 1fr auto; }
  .row-total { grid-column: 2 / 4; text-align: left; }
  .qty-control { grid-column: 3; grid-row: 1 / 3; }
  .info-section { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .topbar-inner { width: calc(100% - 22px); }
  .mobile-menu { display: block; }
  nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0; background: rgba(255,255,255,0.97); padding: 14px; flex-direction: column; box-shadow: 0 10px 20px rgba(0,0,0,.08); border-bottom: 1px solid rgba(116,48,209,0.08);
  }
  nav.open { display: flex; }
  nav a, .header-cart { width: 100%; text-align: center; padding: 11px; }
  .hero { width: calc(100% - 22px); margin: 12px auto 18px; }
  .shop { width: calc(100% - 22px); margin-top: 25px; }
  .search-wrap { flex-direction: column; }
  .search-wrap input, .search-wrap select { width: 100%; }
  .category-tabs { margin-top: 18px; }
  .section-title span { min-width: 165px; font-size: .9rem; }
  .product-row { grid-template-columns: 62px 1fr auto; gap: 10px; padding: 12px; min-height: 104px; }
  .product-thumb { width: 62px; height: 62px; }
  .product-name { font-size: .9rem; }
  .price { font-size: 1.08rem; }
  .slider-control { width: 36px; height: 36px; }
  .cart-preview { min-width: 180px; height: 52px; }
  .whatsapp-float { width: 110px; height: 110px; right: 8px; bottom: 12px; }
  .address-fields { grid-template-columns: 1fr; }
  .summary-card { padding: 18px; }
}

.shop { width: min(1180px, calc(100% - 32px)); margin: 40px auto 120px; }
.shop-head { display: flex; justify-content: space-between; align-items: end; gap: 25px; }
.shop-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.search-wrap { display: flex; gap: 10px; }
.search-wrap input, .search-wrap select {
  height: 44px; border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 0 16px; outline: none;
}
.search-wrap input { width: 260px; }
.search-wrap input:focus, .search-wrap select:focus { border-color: var(--purple); }

.category-tabs {
  margin: 26px 0 30px; display: flex; gap: 9px; overflow-x: auto;
  padding-bottom: 5px; scrollbar-width: thin;
}
.category-tabs button {
  white-space: nowrap; border: 0; background: #ececf0; color: #525761;
  border-radius: 999px; padding: 10px 16px; cursor: pointer; font-size: .78rem; font-weight: 950;
}
.category-tabs button.active { background: var(--purple); color: #fff; }

.category-section { margin-bottom: 38px; }
.section-title {
  display: flex; align-items: center; margin: 0 0 14px;
  position: relative; height: 54px;
}
.section-title span {
  background: var(--purple); color: #fff; font-size: 1rem; font-weight: 950;
  padding: 15px 31px 15px 24px; border-radius: 15px 0 0 15px;
  position: relative; min-width: 190px;
}
.section-title span:after {
  content: ""; position: absolute; right: -18px; top: 0;
  border-top: 27px solid transparent; border-bottom: 27px solid transparent;
  border-left: 18px solid var(--purple);
}
.section-title:after {
  content: ""; height: 1px; background: var(--line); flex: 1; margin-left: 18px;
}

.product-list { display: flex; flex-direction: column; gap: 14px; }
.product-row {
  background: #fff; min-height: 112px; border: 1px solid #ececef;
  border-radius: 19px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 82px 1fr auto auto;
  align-items: center; gap: 14px; padding: 14px 17px;
}
.product-thumb {
  width: 78px; height: 78px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; background: #f1f1f4;
  font-size: 2.3rem; position: relative;
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.discount-badge {
  position: absolute; left: 0; top: 0; background: var(--red); color: #fff;
  font-size: .58rem; font-weight: 950; padding: 4px 5px; border-radius: 0 0 7px 0;
}
.product-name { font-size: 1rem; font-weight: 900; margin-bottom: 6px; }
.price-line { display: flex; align-items: baseline; gap: 8px; }
.price { color: var(--green); font-weight: 950; font-size: 1.05rem; }
.mrp { color: #8c9098; text-decoration: line-through; font-size: .75rem; }
.pack { color: #9a9da5; font-size: .73rem; margin-top: 6px; }
.qty-control { display: flex; align-items: center; gap: 16px; }
.qty-control button {
  width: 36px; height: 36px; border: 0; border-radius: 9px;
  background: var(--purple); color: #fff; font-size: 1.25rem; cursor: pointer;
}
.qty-control button:hover { background: var(--purple-dark); }
.qty-number { width: 18px; text-align: center; font-weight: 900; }
.row-total { min-width: 76px; text-align: right; color: var(--green); font-size: 1.08rem; font-weight: 950; }

.empty { padding: 35px; text-align: center; color: var(--muted); background: #fff; border-radius: 18px; }

.info-section {
  background: #151722; color: #fff; padding: 45px max(16px, calc((100% - 1180px)/2));
  display: flex; justify-content: space-between; align-items: center; gap: 25px;
}
.info-section .small-title { color: #d5bcff; }
.info-section h2 { margin: 0 0 6px; }
.info-section p:not(.small-title) { color: #c5c7d0; margin-bottom: 0; }
.contact-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-actions a { background: var(--purple); padding: 13px 17px; border-radius: 10px; font-weight: 900; }

.whatsapp-float {
  position: fixed; right: 12px; bottom: 18px; z-index: 70; width: 120px; height: 120px; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; box-shadow: none;
}
.cart-float {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 65; transition: .25s;
}
.cart-preview {
  min-width: 200px; height: 58px; padding: 7px 9px; border-radius: 15px; background: linear-gradient(135deg, #7830d8, #6320be); color: #fff; display: flex; align-items: center; gap: 9px; box-shadow: 0 10px 22px rgba(92, 29, 183, .18);
}
.preview-image {
  width: 56px; height: 56px; border-radius: 13px; background: #fff;
  color: #222; display: grid; place-items: center; font-size: 1.7rem; overflow: hidden;
}
.preview-image img { width: 100%; height: 100%; object-fit: cover; }
.preview-text { min-width: 72px; display: flex; flex-direction: column; gap: 3px; }
.preview-text strong { font-size: .72rem; color: #d9c8f7; }
.preview-text b { font-size: 1.05rem; }
.cart-preview > button {
  height: 56px; padding: 0 14px; border: 0; border-left: 1px solid rgba(255,255,255,.18);
  background: transparent; color: #fff; font-weight: 950; cursor: pointer;
}
.cart-preview > button span { font-size: 1.2rem; margin-left: 4px; }

.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 85;
  opacity: 0; pointer-events: none; transition: .2s;
}
.overlay.active { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; z-index: 90; top: 0; right: 0; height: 100vh;
  width: min(430px, 100%); background: #fff;
  transform: translateX(100%); transition: .25s; display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; }
.drawer-head button { border: 0; background: transparent; font-size: 2rem; cursor: pointer; }
.drawer-items { flex: 1; overflow: auto; padding: 0 20px; }
.drawer-item {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
}
.drawer-item strong { display: block; }
.drawer-item small { color: var(--muted); }
.drawer-qty { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.drawer-qty button {
  width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer;
}
.drawer-bottom { padding: 18px 20px; border-top: 1px solid var(--line); }
.drawer-bottom > div { display: flex; justify-content: space-between; margin: 6px 0; }
.drawer-bottom .grand { font-size: 1.25rem; margin-bottom: 13px; }
.order-btn, .call-btn, .mail-btn {
  width: 100%; display: block; text-align: center; border: 0; border-radius: 10px;
  padding: 13px; font-weight: 950; cursor: pointer; margin-top: 8px;
}
.order-btn { background: #20b85c; color: #fff; }
.call-btn { background: var(--purple); color: #fff; }
.mail-btn { background: #20b85c; color: #fff; border:0 solid black; border-radius: 10px; }

.summary-modal {
  position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45);
  display: none; align-items: center; justify-content: center; z-index: 120;
  padding: 20px;
}
.summary-modal.open { display: flex; }
.summary-card {
  width: min(760px, 100%); background: #fff; border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.18); padding: 24px; max-height: 90vh; overflow: auto;
}
.summary-head {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.summary-tag {
  margin: 0 0 6px; font-size: .7rem; letter-spacing: 2px; font-weight: 900; color: var(--purple);
}
.summary-head h2 { margin: 0; }
.summary-head button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f5f5f7; font-size: 1.8rem; cursor: pointer;
}
.summary-address { margin-top: 18px; }
.address-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
  font-size: .9rem;
}
.address-header span {
  background: #eefaf3; color: var(--green); padding: 6px 10px; border-radius: 999px; font-weight: 800;
}
.address-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.address-fields input, .address-fields textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit;
}
.address-fields textarea { grid-column: 1 / -1; resize: vertical; }
.summary-items-wrap {
  margin-top: 22px; background: #fafafb; border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.summary-items-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.summary-items { display: grid; gap: 12px; }
.summary-table-wrap { overflow-x: auto; }
.summary-table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; }
.summary-table th, .summary-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.summary-table th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.summary-table td:nth-child(1), .summary-table th:nth-child(1),
.summary-table td:nth-child(3), .summary-table th:nth-child(3) { text-align: center; }
.summary-table td:nth-child(4), .summary-table th:nth-child(4),
.summary-table td:nth-child(5), .summary-table th:nth-child(5) { text-align: right; white-space: nowrap; }
.summary-table td:last-child { font-weight: 900; color: var(--green); }
.summary-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.summary-item-name { font-weight: 800; }
.summary-item-meta { color: var(--muted); font-size: .78rem; }
.summary-item-price { font-weight: 900; color: var(--green); }
.price-summary {
  margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: grid; gap: 10px;
}
.price-summary > div {
  display: flex; justify-content: space-between; align-items: center;
}
.summary-total { font-size: 1.2rem; font-weight: 950; color: var(--text); }
.summary-actions {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px;
}

footer {
  background: #0d0f17; color: #9da1ac; padding: 20px max(16px, calc((100% - 1180px)/2));
  display: flex; justify-content: space-between; gap: 15px; font-size: .8rem;
}

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding: 30px; }
  .hero-copy { text-align: center; }
  .hero-poster { max-width: 430px; margin: auto; }
  .shop-head { flex-direction: column; align-items: stretch; }
  .search-wrap { width: 100%; }
  .search-wrap input { flex: 1; width: auto; }
  .product-row { grid-template-columns: 72px 1fr auto; }
  .row-total { grid-column: 2 / 4; text-align: left; }
  .qty-control { grid-column: 3; grid-row: 1 / 3; }
  .info-section { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .topbar-inner { width: calc(100% - 22px); }
  .mobile-menu { display: block; }
  nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; padding: 14px; flex-direction: column; box-shadow: 0 10px 20px rgba(0,0,0,.1); }
  nav.open { display: flex; }
  nav a, .header-cart { width: 100%; text-align: center; padding: 11px; }
  .hero { width: calc(100% - 22px); margin: 12px auto; padding: 24px 18px; border-radius: 18px; }
  .hero-slider::after { width: 190px; opacity: 0.08; }
  .shop { width: calc(100% - 22px); margin-top: 25px; }
  .search-wrap { flex-direction: column; }
  .search-wrap input, .search-wrap select { width: 100%; }
  .category-tabs { margin-top: 18px; }
  .section-title span { min-width: 165px; font-size: .9rem; }
  .product-row {
    grid-template-columns: 62px 1fr auto;
    gap: 10px; padding: 12px; min-height: 104px;
  }
  .product-thumb { width: 62px; height: 62px; }
  .product-name { font-size: .9rem; }
  .address-fields { grid-template-columns: 1fr; }
  .address-fields textarea { grid-column: auto; }
  .qty-control { gap: 8px; }
  .qty-control button { width: 31px; height: 31px; }
  .row-total { display: none; }
  .cart-float { bottom: 17px; }
  .cart-preview { min-width: 235px; height: 70px; }
  .preview-image { width: 51px; height: 51px; }
  .whatsapp-float { width: 58px; height: 58px; right: 12px; bottom: 16px; }
  footer { flex-direction: column; }
}
.footer-column a {
    display: block;
    margin-bottom: 12px;
    text-decoration: none;
}
#searchInput{
  position: sticky;
}

/* Festival night visual system */
:root {
  --navy: #07152f;
  --navy-deep: #040b20;
  --blue: #249dff;
  --cyan: #29e2f2;
  --pink: #f04fc7;
  --orange: #ff8a3d;
  --gold: #ffd166;
  --violet: #8455ff;
  --text: #f7faff;
  --muted: #b8c5df;
  --line: rgba(164, 195, 255, 0.18);
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.2);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 8% 14%, rgba(36, 157, 255, 0.18), transparent 22rem),
    radial-gradient(circle at 92% 28%, rgba(240, 79, 199, 0.14), transparent 24rem),
    radial-gradient(circle at 56% 78%, rgba(255, 138, 61, 0.1), transparent 26rem),
    var(--navy);
  position: relative;
}
body::before,
body::after {
  content: "";
  position: fixed;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  box-shadow: 18vw 8vh 0 rgba(41, 226, 242, .55), 72vw 18vh 0 rgba(255, 209, 102, .5), 88vw 62vh 0 rgba(240, 79, 199, .5), 12vw 78vh 0 rgba(132, 85, 255, .45);
  animation: twinkle 5s ease-in-out infinite alternate;
}
body::before { top: 12%; left: 4%; background: var(--cyan); }
body::after { top: 42%; right: 4%; background: var(--gold); animation-delay: 1.8s; }

.topbar {
  background: rgba(4, 11, 32, .78);
  border-bottom: 1px solid rgba(41, 226, 242, .2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.logo { color: #fff; text-shadow: 0 0 18px rgba(41, 226, 242, .2); }
.logo span { color: var(--cyan); }
nav { gap: 8px; }
.nav-link {
  color: #dbe9ff;
  position: relative;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 5px;
  height: 2px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  transform: scaleX(0);
  transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:hover { color: #fff; background: rgba(132, 85, 255, .16); }
.nav-link.active {
  background: linear-gradient(135deg, #227dff, #8847ff);
  color: #fff;
  box-shadow: 0 0 24px rgba(36, 157, 255, .35);
}
.nav-link.active::after { display: none; }
.header-cart {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: var(--navy-deep);
  box-shadow: 0 0 24px rgba(41, 226, 242, .28);
}
.header-cart b { color: var(--navy-deep); }
.header-cart b.bump { animation: countBump .45s ease; }
.header-cart:hover { box-shadow: 0 0 32px rgba(41, 226, 242, .45); transform: translateY(-2px) scale(1.02); }

.hero-slider {
  background: linear-gradient(135deg, #101d56, #362276 48%, #102f70);
  border-color: rgba(127, 215, 255, .28);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32), 0 0 44px rgba(132, 85, 255, .18);
}
.hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 22%, rgba(41, 226, 242, .24), transparent 20%), radial-gradient(circle at 82% 20%, rgba(240, 79, 199, .23), transparent 25%), radial-gradient(circle at 65% 92%, rgba(255, 138, 61, .18), transparent 24%);
  animation: heroGlow 8s ease-in-out infinite alternate;
}
.hero-slide { position: relative; isolation: isolate; }
.hero-slide:nth-child(1) { background: linear-gradient(125deg, rgba(27, 79, 186, .32), rgba(111, 55, 213, .2)); }
.hero-slide:nth-child(2) { background: linear-gradient(125deg, rgba(116, 36, 143, .32), rgba(239, 66, 170, .18)); }
.hero-slide:nth-child(3) { background: linear-gradient(125deg, rgba(183, 68, 39, .3), rgba(239, 66, 170, .18)); }
.hero-slide:nth-child(4) { background: linear-gradient(125deg, rgba(14, 145, 180, .3), rgba(35, 98, 225, .22)); }
.hero-poster { z-index: 1; }
.hero-poster img { box-shadow: 0 24px 50px rgba(0, 0, 0, .35), 0 0 28px rgba(41, 226, 242, .18); }
.hero-btn { position: relative; overflow: hidden; }
.hero-btn.primary { background: linear-gradient(100deg, var(--cyan), var(--blue), var(--violet)); color: #fff; box-shadow: 0 12px 28px rgba(36, 157, 255, .28); background-size: 180% 100%; }
.hero-btn.primary:hover { background-position: 100% 0; box-shadow: 0 0 28px rgba(41, 226, 242, .45); }
.hero-btn.secondary { background: rgba(5, 16, 47, .34); border-color: rgba(255, 255, 255, .3); }
.slider-control { background: rgba(5, 16, 47, .45); border: 1px solid rgba(255, 255, 255, .2); }
.slider-control:hover { background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 0 20px rgba(240, 79, 199, .35); }
.slider-dots .dot.active { background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: 0 0 14px rgba(41, 226, 242, .5); }

.shop { position: relative; z-index: 1; }
.small-title { color: var(--cyan); }
.shop-head h2, .info-section h2 { color: #fff; }
.search-wrap input, .search-wrap select {
  color: #122348;
  border-color: rgba(41, 226, 242, .28);
  box-shadow: 0 0 18px rgba(36, 157, 255, .08);
}
.search-wrap select { appearance: auto; }
.search-wrap input:focus, .search-wrap select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(41, 226, 242, .13), 0 0 22px rgba(41, 226, 242, .18); }
.category-tabs button { background: rgba(255, 255, 255, .08); color: #dce8ff; border: 1px solid rgba(164, 195, 255, .16); }
.category-tabs button:hover { background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff; }
.category-tabs button.active { background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 0 20px rgba(132, 85, 255, .35); }
.section-title span { background: linear-gradient(100deg, var(--blue), var(--violet), var(--pink)); box-shadow: 0 8px 22px rgba(132, 85, 255, .24); }
.section-title span:after { border-left-color: var(--pink); }
.section-title:after { background: linear-gradient(90deg, rgba(41, 226, 242, .5), transparent); }
.section-title span::before {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 7px; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--gold)); border-radius: 8px; animation: underlinePulse 2.8s ease-in-out infinite;
}
.product-row {
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 247, 255, .94));
  border: 1px solid rgba(115, 169, 255, .3);
  box-shadow: 0 14px 35px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-row:hover { transform: translateY(-5px); border-color: rgba(41, 226, 242, .7); box-shadow: 0 20px 44px rgba(0, 0, 0, .28), 0 0 24px rgba(41, 226, 242, .14); }
.product-thumb { background: linear-gradient(135deg, #dffbff, #eee3ff); border-color: rgba(36, 157, 255, .28); transition: transform .25s ease, box-shadow .25s ease; }
.product-row:hover .product-thumb { transform: scale(1.06) rotate(-2deg); box-shadow: 0 0 20px rgba(36, 157, 255, .25); }
.discount-badge { background: linear-gradient(135deg, var(--orange), var(--pink)); box-shadow: 0 4px 12px rgba(240, 79, 199, .25); }
.product-name { color: #14244a; }
.price { background: linear-gradient(90deg, #1688ef, #8a43ef, #e835b8); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.16rem; }
.mrp { color: #7583a0; }
.pack { color: #60708f; }
.qty-control button { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--navy-deep); box-shadow: 0 6px 14px rgba(36, 157, 255, .24); }
.qty-control button:hover { background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff; box-shadow: 0 0 18px rgba(240, 79, 199, .4); }
.row-total { color: #118eaa; }

.info-section { background: linear-gradient(115deg, #071b45, #302071 52%, #711b61); border-top: 1px solid rgba(41, 226, 242, .2); border-bottom: 1px solid rgba(240, 79, 199, .2); }
.info-section .small-title { color: var(--gold); }
.contact-actions a { background: linear-gradient(135deg, var(--orange), var(--pink)); box-shadow: 0 0 22px rgba(255, 138, 61, .22); }
.whatsapp-float { background: linear-gradient(135deg, #2ce7b5, #13aee7); box-shadow: 0 0 28px rgba(41, 226, 242, .3); }
.cart-float { z-index: 65; }
.cart-preview { background: linear-gradient(110deg, #176fe2, #743ddb 56%, #e33bad); box-shadow: 0 18px 40px rgba(0, 0, 0, .32), 0 0 28px rgba(132, 85, 255, .26); }
.preview-image { background: linear-gradient(135deg, rgba(41, 226, 242, .35), rgba(255, 209, 102, .28)); }
.preview-text strong { color: #bff8ff; }
.cart-preview > button:hover { color: var(--gold); }
.cart-drawer { background: linear-gradient(180deg, #081a3c, #11184a 60%, #321653); color: #fff; box-shadow: -18px 0 50px rgba(0, 0, 0, .35); border-left: 1px solid rgba(41, 226, 242, .25); }
.drawer-head, .drawer-bottom { border-color: rgba(164, 195, 255, .18); }
.drawer-item { border-color: rgba(164, 195, 255, .16); }
.drawer-item small, #cartMinMessage { color: #b8c5df; }
.drawer-qty button { background: rgba(255, 255, 255, .1); border-color: rgba(164, 195, 255, .22); color: #fff; }
.drawer-qty button[data-remove] { color: #ff9abf; }
.drawer-bottom .grand strong { background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cart-progress-bar { background: rgba(255, 255, 255, .14); }
.cart-progress-bar span { background: linear-gradient(90deg, var(--violet), var(--pink), var(--orange)); box-shadow: 0 0 14px rgba(240, 79, 199, .55); }
.order-btn { background: linear-gradient(100deg, var(--violet), var(--pink), var(--orange)); background-size: 180% 100%; box-shadow: 0 0 24px rgba(240, 79, 199, .26); }
.order-btn:hover:not(:disabled) { background-position: 100% 0; box-shadow: 0 0 30px rgba(255, 138, 61, .4); }
.summary-modal { background: rgba(3, 9, 27, .72); }
.summary-card { background: linear-gradient(145deg, #f8fbff, #fff4fc); border: 1px solid rgba(132, 85, 255, .3); }
.summary-tag { color: #7545ed; }
.summary-warning { background: #fff0f3; }
.summary-warning.success { background: #e9fff8; }
.footer-column a:hover { color: var(--cyan); }
footer { background: #03091b; border-top: 1px solid rgba(41, 226, 242, .16); }
.cart-toast {
  position: fixed; left: 50%; top: 94px; z-index: 140; transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: linear-gradient(110deg, rgba(19, 101, 220, .96), rgba(142, 62, 224, .96), rgba(229, 56, 170, .96));
  color: #fff; font-weight: 800; box-shadow: 0 12px 30px rgba(0, 0, 0, .28), 0 0 24px rgba(132, 85, 255, .3); transition: opacity .25s ease, transform .25s ease;
}
.cart-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cart-float.celebrate { animation: cartCelebrate .7s ease; }

@keyframes heroGlow { from { opacity: .7; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
@keyframes twinkle { from { opacity: .35; transform: scale(.75); } to { opacity: .9; transform: scale(1.15); } }
@keyframes underlinePulse { 50% { opacity: .45; transform: scaleX(.8); transform-origin: left; } }
@keyframes cartCelebrate { 35% { transform: translateX(-50%) scale(1.06) rotate(-1deg); } 70% { transform: translateX(-50%) scale(.98) rotate(1deg); } }
@keyframes countBump { 50% { transform: scale(1.35); color: var(--gold); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.site-page {
  min-height: 100vh;
  padding: 34px 16px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: #eaf3ff;
  background:
    radial-gradient(circle at 12% 12%, rgba(36, 157, 255, .2), transparent 22rem),
    radial-gradient(circle at 88% 20%, rgba(240, 79, 199, .16), transparent 24rem),
    var(--navy);
}
.site-page .container {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  padding: clamp(24px, 5vw, 48px);
  background: linear-gradient(145deg, rgba(12, 34, 78, .95), rgba(35, 25, 78, .94));
  border: 1px solid rgba(41, 226, 242, .24);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32), 0 0 34px rgba(132, 85, 255, .14);
}
.site-page h1 {
  color: #fff;
  background: linear-gradient(90deg, var(--cyan), #fff, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-page h2, .site-page h3 { color: #ffd9f4; }
.site-page p, .site-page li, .site-page .subtitle, .site-page .updated { color: #c7d5ef; }
.site-page a { color: var(--cyan); transition: color .2s ease; }
.site-page a:hover { color: var(--gold); }
.site-page .contact-box, .site-page .thank-you, .site-page .order, .site-page .empty {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(164, 195, 255, .2);
  color: #eaf3ff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.site-page .contact-item, .site-page .product { border-color: rgba(164, 195, 255, .18); }
.site-page button { background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; border: 0; box-shadow: 0 0 20px rgba(36, 157, 255, .2); cursor: pointer; }
.site-page input, .site-page textarea, .site-page select { background: rgba(255, 255, 255, .96); color: #122348; border-color: rgba(41, 226, 242, .3); }

/* Contrast pass for commerce surfaces */
:root {
  --primary: #2563eb;
  --secondary: #7c3aed;
  --accent: #ec4899;
  --cyan-bright: #06b6d4;
  --success: #16a34a;
  --orange-bright: #f97316;
  --dark-text: #172554;
  --secondary-text: #475569;
  --light-surface: #f8fafc;
}

.product-row {
  color: var(--dark-text);
  background: linear-gradient(135deg, #ffffff, var(--light-surface));
}
.product-name { color: var(--dark-text); font-weight: 900; }
.price { color: var(--primary); background: none; -webkit-text-fill-color: currentColor; font-weight: 950; }
.mrp { color: var(--secondary-text); }
.pack { color: var(--secondary-text); }
.qty-number { color: var(--dark-text); font-weight: 950; }
.qty-control button { color: #fff; background: linear-gradient(135deg, var(--cyan-bright), var(--primary)); }
.row-total { color: #0e7490; font-weight: 950; }
.discount-badge { z-index: 1; background: linear-gradient(135deg, #ef4444, var(--accent)); color: #fff; font-weight: 950; }

.summary-card {
  color: var(--dark-text);
  background: #fff;
  border: 1px solid #cbd5e1;
}
.summary-head { border-bottom-color: #cbd5e1; }
.summary-tag { color: var(--secondary); }
.summary-head h2,
.summary-items-head,
.summary-address,
.address-header,
.summary-card label { color: var(--dark-text); }
.summary-head button { color: var(--dark-text); background: #e2e8f0; }
.address-header span { color: #166534; background: #dcfce7; }
.address-fields input,
.address-fields textarea {
  color: var(--dark-text);
  background: #fff;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}
.address-fields input::placeholder,
.address-fields textarea::placeholder { color: #64748b; opacity: 1; }
.address-fields input:focus,
.address-fields textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.summary-items-wrap { background: #f8fafc; border-color: #cbd5e1; }
.summary-items-head span { color: var(--secondary-text); }
.summary-table { background: #fff; color: var(--dark-text); border: 1px solid #cbd5e1; }
.summary-table th {
  color: var(--dark-text);
  background: #eef2ff;
  border-bottom: 2px solid #a5b4fc;
  font-weight: 950;
}
.summary-table td { color: var(--dark-text); background: #fff; border-bottom-color: #cbd5e1; }
.summary-table td:nth-child(1) { color: #334155; }
.summary-table td:nth-child(3), .summary-table td:nth-child(4) { color: var(--dark-text); font-weight: 800; }
.summary-table td:last-child { color: var(--success); font-weight: 950; }
.price-summary { background: #f8fafc; border-color: #cbd5e1; color: var(--dark-text); }
.price-summary > div > span { color: var(--secondary-text); }
.price-summary strong { color: var(--dark-text); }
.price-summary .summary-total,
.price-summary .summary-total strong { color: var(--dark-text); }
.summary-warning { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.summary-warning.success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

.cart-preview { color: #fff; }
.preview-text strong, .preview-text b, .cart-preview > button { color: #fff; }
.preview-text strong { font-weight: 800; }
.preview-text b { font-size: 1.12rem; font-weight: 950; }
.cart-preview > button { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.cart-drawer .drawer-item strong { color: #fff; }
.cart-drawer .drawer-item small { color: #dbeafe; }
.cart-drawer .drawer-qty b { color: #fff; }
.cart-drawer .drawer-bottom { color: #fff; }

/* SS Crackers light brand theme */
:root {
  --purple: #123eaa;
  --purple-dark: #1e5bdb;
  --purple-soft: #eaf3ff;
  --green: #16a34a;
  --green-soft: #ecfdf3;
  --red: #e31b23;
  --red-soft: #fff1f2;
  --text: #172554;
  --muted: #475569;
  --line: #d6e5ff;
  --bg: #f5f9ff;
  --navy: #f5f9ff;
  --navy-deep: #123eaa;
  --blue: #1e5bdb;
  --cyan: #1e5bdb;
  --pink: #e31b23;
  --orange: #e31b23;
  --gold: #1e5bdb;
  --violet: #123eaa;
  --dark-text: #172554;
  --secondary-text: #475569;
}

body {
  color: #172554;
  background: linear-gradient(135deg, #f5f9ff 0%, #fff 52%, #eef5ff 100%);
}
body::before,
body::after {
  width: 7px;
  height: 7px;
  background: #1e5bdb;
  box-shadow: 18vw 8vh 0 rgba(30, 91, 219, .25), 72vw 18vh 0 rgba(227, 27, 35, .28), 88vw 62vh 0 rgba(30, 91, 219, .2), 12vw 78vh 0 rgba(227, 27, 35, .2);
}
body::after { background: #e31b23; }

.topbar {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid #d6e5ff;
  box-shadow: 0 8px 24px rgba(18, 62, 170, .1);
}
.logo { color: #123eaa; text-shadow: none; }
.logo span { color: #e31b23; }
.nav-link { color: #172554; }
.nav-link::after { background: linear-gradient(90deg, #123eaa, #e31b23); }
.nav-link:hover { color: #fff; background: linear-gradient(135deg, #1e5bdb, #e31b23); }
.nav-link.active { background: #123eaa; color: #fff; box-shadow: 0 8px 20px rgba(18, 62, 170, .25); }
.header-cart { background: linear-gradient(135deg, #e31b23, #b9131b); color: #fff; box-shadow: 0 8px 20px rgba(227, 27, 35, .2); }
.header-cart b { color: #fff; }
.header-cart:hover { box-shadow: 0 0 24px rgba(227, 27, 35, .3); }
.mobile-menu { color: #123eaa; }

.hero-slider {
  background: linear-gradient(135deg, #eaf3ff, #fff 58%, #f5f9ff);
  border: 1px solid #c7dbf7;
  box-shadow: 0 22px 55px rgba(18, 62, 170, .14);
}
.hero-slider::before {
  background: radial-gradient(circle at 12% 22%, rgba(30, 91, 219, .14), transparent 20%), radial-gradient(circle at 82% 20%, rgba(227, 27, 35, .1), transparent 25%), radial-gradient(circle at 65% 92%, rgba(30, 91, 219, .1), transparent 24%);
}
.hero-slider::after { opacity: .08; mix-blend-mode: multiply; }
.hero-slide:nth-child(1) { background: linear-gradient(125deg, rgba(234, 243, 255, .96), rgba(255, 255, 255, .82)); }
.hero-slide:nth-child(2) { background: linear-gradient(125deg, rgba(255, 245, 246, .94), rgba(234, 243, 255, .88)); }
.hero-slide:nth-child(3) { background: linear-gradient(125deg, rgba(255, 247, 239, .94), rgba(255, 239, 241, .9)); }
.hero-slide:nth-child(4) { background: linear-gradient(125deg, rgba(234, 251, 255, .95), rgba(234, 243, 255, .9)); }
.hero-copy { color: #172554; }
.hero .small-title { color: #123eaa; }
.hero-copy h1 { color: #172554; }
.hero-copy > p:not(.small-title) { color: #475569; }
.hero-btn.primary { background: linear-gradient(135deg, #123eaa, #1e5bdb); color: #fff; box-shadow: 0 10px 22px rgba(18, 62, 170, .24); }
.hero-btn.secondary { background: #fff; color: #123eaa; border-color: #b9cff2; }
.hero-btn.secondary:hover { background: #eaf3ff; color: #123eaa; }
.slider-control { background: #fff; color: #123eaa; border-color: #c7dbf7; box-shadow: 0 6px 16px rgba(18, 62, 170, .12); }
.slider-control:hover { background: #e31b23; color: #fff; box-shadow: 0 0 18px rgba(227, 27, 35, .25); }
.slider-dots .dot { background: #b9cff2; }
.slider-dots .dot.active { background: #e31b23; box-shadow: 0 0 12px rgba(227, 27, 35, .28); }

.small-title { color: #123eaa; }
.shop-head h2, .info-section h2 { color: #172554; }
.search-wrap input, .search-wrap select { background: #fff; color: #172554; border-color: #c7dbf7; }
.search-wrap input::placeholder { color: #64748b; opacity: 1; }
.search-wrap input:focus, .search-wrap select:focus { border-color: #1e5bdb; box-shadow: 0 0 0 4px rgba(30, 91, 219, .14); }
.category-tabs button { background: #fff; color: #172554; border-color: #d6e5ff; }
.category-tabs button:hover { background: #eaf3ff; color: #123eaa; }
.category-tabs button.active { background: #123eaa; color: #fff; box-shadow: 0 8px 18px rgba(18, 62, 170, .2); }
.section-title span { background: linear-gradient(100deg, #123eaa, #1e5bdb); color: #fff; box-shadow: 0 8px 20px rgba(18, 62, 170, .2); }
.section-title span:after { border-left-color: #1e5bdb; }
.section-title:after { background: linear-gradient(90deg, #b9cff2, transparent); }
.section-title span::before { background: linear-gradient(90deg, #fff, #e31b23); }

.product-row { background: #fff; border-color: #d6e5ff; box-shadow: 0 10px 26px rgba(18, 62, 170, .1); }
.product-row:hover { border-color: #1e5bdb; box-shadow: 0 16px 34px rgba(18, 62, 170, .16), 0 0 18px rgba(30, 91, 219, .12); }
.product-thumb { background: #f5f9ff; border-color: #d6e5ff; }
.product-name { color: #172554; }
.price { color: #123eaa; }
.mrp { color: #475569; }
.pack { color: #475569; }
.discount-badge { background: linear-gradient(135deg, #e31b23, #b9131b); color: #fff; }
.qty-control button { background: linear-gradient(135deg, #123eaa, #1e5bdb); color: #fff; }
.qty-control button:hover { background: #e31b23; color: #fff; box-shadow: 0 0 18px rgba(227, 27, 35, .28); }
.qty-number { color: #172554; }
.row-total { color: #123eaa; }

.info-section { background: linear-gradient(135deg, #eaf3ff, #fff); border-top: 1px solid #d6e5ff; border-bottom: 1px solid #d6e5ff; color: #172554; }
.info-section .small-title { color: #e31b23; }
.info-section p:not(.small-title) { color: #475569; }
.contact-actions a { background: linear-gradient(135deg, #123eaa, #1e5bdb); color: #fff; box-shadow: 0 8px 18px rgba(18, 62, 170, .2); }
.whatsapp-float { background: linear-gradient(135deg, #16a34a, #1e5bdb); box-shadow: 0 8px 24px rgba(22, 163, 74, .22); }

.cart-preview { background: linear-gradient(110deg, #123eaa, #1e5bdb 58%, #e31b23); box-shadow: 0 16px 32px rgba(18, 62, 170, .25); }
.preview-image { background: #eaf3ff; color: #123eaa; }
.preview-text strong, .preview-text b, .cart-preview > button { color: #fff; }
.cart-preview > button:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.cart-drawer { background: #fff; color: #172554; border-left: 1px solid #d6e5ff; box-shadow: -12px 0 38px rgba(18, 62, 170, .14); }
.drawer-head, .drawer-bottom { border-color: #d6e5ff; }
.drawer-head h2, .drawer-item strong, .drawer-bottom, .drawer-bottom .grand { color: #172554; }
.drawer-head button { color: #123eaa; }
.drawer-item { border-color: #d6e5ff; }
.drawer-item small { color: #475569; }
.drawer-qty button { background: #123eaa; border-color: #123eaa; color: #fff; }
.drawer-qty button[data-remove] { background: transparent; color: #e31b23; }
.drawer-bottom .grand strong { color: #123eaa; background: none; -webkit-text-fill-color: currentColor; }
.cart-progress-bar { background: #eaf3ff; }
.cart-progress-bar span { background: linear-gradient(90deg, #123eaa, #1e5bdb, #e31b23); box-shadow: none; }
#cartMinMessage { color: #475569; }
#cartMinMessage.success { color: #16a34a; }
.order-btn { background: linear-gradient(135deg, #e31b23, #b9131b); color: #fff; box-shadow: 0 8px 18px rgba(227, 27, 35, .2); }
.order-btn:hover:not(:disabled) { background: #123eaa; box-shadow: 0 0 22px rgba(18, 62, 170, .25); }

.summary-modal { background: rgba(18, 37, 84, .34); }
.summary-card { background: #fff; border-color: #c7dbf7; }
.summary-tag { color: #e31b23; }
.summary-head h2 { color: #172554; }
.summary-head button { color: #172554; background: #eaf3ff; }
.summary-table th { background: #123eaa; color: #fff; border-bottom-color: #123eaa; }
.summary-table td { color: #172554; background: #fff; border-bottom-color: #d6e5ff; }
.summary-table td:last-child { color: #16a34a; }
.summary-warning { color: #991b1b; background: #fff1f2; border-color: #fecaca; }
.summary-warning.success { color: #166534; background: #ecfdf3; border-color: #bbf7d0; }

footer { background: #eaf3ff; color: #475569; border-top: 1px solid #d6e5ff; }
.footer-column a:hover { color: #e31b23; }
.cart-toast { background: linear-gradient(110deg, #123eaa, #1e5bdb 60%, #e31b23); }

.site-page {
  color: #172554;
  background: linear-gradient(135deg, #f5f9ff 0%, #fff 52%, #eef5ff 100%);
}
.site-page .container { background: #fff; border-color: #d6e5ff; box-shadow: 0 18px 45px rgba(18, 62, 170, .12); }
.site-page h1 { color: #123eaa; background: none; -webkit-text-fill-color: currentColor; }
.site-page h2, .site-page h3 { color: #172554; }
.site-page p, .site-page li, .site-page .subtitle, .site-page .updated { color: #475569; }
.site-page a { color: #123eaa; }
.site-page a:hover { color: #e31b23; }
.site-page .contact-box, .site-page .thank-you, .site-page .order, .site-page .empty { background: #f5f9ff; border-color: #d6e5ff; color: #172554; box-shadow: 0 8px 22px rgba(18, 62, 170, .08); }
.site-page .contact-item, .site-page .product { border-color: #d6e5ff; }

/* Business-specific SS Crackers refinements */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .02em;
}
.brand-mark {
  width: 58px;
  height: 50px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #d6e5ff;
  background: #fff;
}
.brand-name { color: #123eaa; font-size: 1.05rem; line-height: 1.05; }
.brand-name b { display: block; color: #e31b23; font-size: .78rem; letter-spacing: .14em; margin-top: 4px; }

body::before,
body::after { animation: none; opacity: .55; }
.topbar { backdrop-filter: none; }
.nav-link, .category-tabs button, .hero-btn, .header-cart, .order-btn { border-radius: 6px; }
.nav-link.active { border-radius: 6px; }
.hero-slider { border-radius: 16px; }
.hero-slider::before { animation: none; }
.hero-slide { animation: none; }
.hero-poster img { border-radius: 12px; box-shadow: 0 12px 28px rgba(18, 62, 170, .14); }
.hero-btn { min-height: 44px; padding: 0 18px; }
.slider-control { width: 38px; height: 38px; }
.slider-dots .dot { width: 9px; height: 9px; }
.slider-dots .dot.active { width: 24px; }
.search-wrap input, .search-wrap select { border-radius: 6px; box-shadow: none; }
.category-tabs { padding-bottom: 2px; }
.category-tabs button { border-radius: 5px; padding: 9px 14px; }
.section-title { height: 46px; }
.section-title span { min-width: 170px; padding: 12px 20px; border-radius: 6px; }
.section-title span::before, .section-title span::after { display: none; }
.section-title:after { margin-left: 12px; }
.product-list { gap: 10px; }
.product-row { min-height: 104px; border-radius: 10px; box-shadow: 0 6px 18px rgba(18, 62, 170, .08); }
.product-row:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 62, 170, .13); }
.product-thumb { border-radius: 8px; }
.product-row:hover .product-thumb { transform: scale(1.03); }
.qty-control button { border-radius: 5px; box-shadow: none; }
.info-section { padding-top: 34px; padding-bottom: 34px; }
.contact-actions a { border-radius: 6px; }
.cart-preview { border-radius: 10px; box-shadow: 0 10px 24px rgba(18, 62, 170, .2); }
.preview-image { border-radius: 7px; }
.cart-drawer { box-shadow: -10px 0 28px rgba(18, 62, 170, .12); }
.cart-drawer .drawer-head h2,
.cart-drawer .drawer-item strong,
.cart-drawer .drawer-bottom,
.cart-drawer .drawer-bottom span { color: #172554; }
.cart-drawer .drawer-item small { color: #475569; }
.cart-drawer .drawer-qty b { color: #172554; }
.cart-drawer .drawer-bottom .grand strong { color: #123eaa; }
.checkout-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: #172554;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
.checkout-confirmation input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  border: 2px solid #1e5bdb;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.checkout-confirmation input:checked {
  border-color: #123eaa;
  background: #123eaa;
  box-shadow: inset 0 0 0 3px #fff;
}
.checkout-confirmation input:focus-visible {
  outline: 3px solid rgba(30, 91, 219, .22);
  outline-offset: 2px;
}
.drawer-head { padding: 18px 20px; }
.drawer-qty button { border-radius: 5px; }
.order-btn { border-radius: 6px; }
.summary-card { border-radius: 12px; box-shadow: 0 18px 42px rgba(18, 62, 170, .18); }
.summary-items-wrap, .price-summary { border-radius: 8px; }
.summary-table { border-radius: 6px; overflow: hidden; }
.summary-head button { border-radius: 6px; }
.cart-toast { border-radius: 6px; }
footer { padding-top: 18px; padding-bottom: 18px; }
#categoryTabs{
  text-transform: uppercase;
}
/* Special offer countdown banner */
.offer-countdown {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px) 20px 38px;
  color: #fff;
  text-align: center;
  background: radial-gradient(ellipse at 50% 115%, rgba(227, 27, 35, .32), transparent 48%), linear-gradient(115deg, #071b45, #123eaa 52%, #1e5bdb);
}
.offer-countdown__eyebrow {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.offer-countdown__subline {
  margin: 18px 0 36px;
  font-size: clamp(.72rem, 2vw, 1.2rem);
  font-weight: 800;
  letter-spacing: .28em;
}
.offer-countdown__subline span { padding: 0 .35em; }
.offer-countdown__timer {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 28px);
}
.offer-countdown__unit {
  display: grid;
  place-content: center;
  width: clamp(68px, 13vw, 175px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 24px;
  background: rgba(255,255,255,.14);
  box-shadow: 0 12px 36px rgba(4, 11, 32, .24);
}
.offer-countdown__unit span {
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.offer-countdown__unit small {
  margin-top: 12px;
  color: rgba(255,255,255,.72);
  font-size: clamp(.55rem, 1.3vw, .8rem);
  font-weight: 800;
  letter-spacing: .16em;
}
.offer-countdown__link {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 32px;
  border-radius: 999px;
  color: #111827;
  background: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}
.offer-countdown__link:hover { background: #ffe6ba; }
.service-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 44px clamp(16px, 3vw, 40px);
  background: linear-gradient(180deg, #f5f9ff, #fff);
}
.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  border: 1px solid #e6edf8;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(18, 62, 170, .08);
  text-align: center;
  animation: service-card-enter .65s both;
  animation-delay: calc(var(--card-order, 0) * 110ms);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.service-card::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  border-radius: 0 0 0 100%;
  background: #fff1f2;
  content: "";
  transition: background .28s ease, transform .28s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: #c7dbf7;
  box-shadow: 0 22px 42px rgba(18, 62, 170, .16);
}
.service-card:hover::before { transform: scale(1.14); background: #eaf3ff; }
.service-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  fill: none;
  stroke: #e31b23;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  transition: transform .28s ease, stroke .28s ease;
}
.service-card:hover .service-card__icon { transform: translateY(-3px) scale(1.08); stroke: #123eaa; }
.service-card h2 {
  margin: 0 0 16px;
  color: #123eaa;
  font-size: 1.12rem;
  font-weight: 900;
}
.service-card p {
  max-width: 320px;
  margin: 0;
  color: #475569;
  line-height: 1.65;
}
@keyframes service-card-enter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .offer-countdown { padding-inline: 10px; }
  .offer-countdown__subline { letter-spacing: .12em; margin-bottom: 24px; }
  .offer-countdown__unit { border-radius: 16px; }
  .offer-countdown__unit small { letter-spacing: .08em; }
}
@media (max-width: 900px) {
  .service-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 520px) {
  .service-highlights { grid-template-columns: 1fr; padding: 28px 18px; }
  .service-card { min-height: 220px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card { animation: none; transition: none; }
  .service-card:hover, .service-card:hover .service-card__icon { transform: none; }
}

/* Brighter firecracker bursts across the viewport */
.page-fireworks {
  z-index: 3;
  mix-blend-mode: normal;
}
.hero-fireworks {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-burst-1 { top: 12%; left: 8%; color: #00b8ff; animation-delay: .2s; }
.hero-burst-2 { top: 14%; right: 12%; color: #ff285a; animation-delay: 1.1s; }
.hero-burst-3 { top: 42%; left: 44%; color: #ffe23b; animation-delay: 2s; }
.hero-burst-4 { top: 58%; right: 7%; color: #a855f7; animation-delay: 2.9s; }
.hero-burst-5 { bottom: 8%; left: 23%; color: #23e68a; animation-delay: 3.8s; }
.hero-burst-6 { bottom: 12%; right: 28%; color: #ff8a24; animation-delay: 4.7s; }
.hero-burst-7 { top: 32%; left: 72%; color: #ff285a; animation-delay: 5.6s; }
.hero-burst-8 { top: 72%; left: 5%; color: #00b8ff; animation-delay: 6.5s; }
.firework-burst {
  width: clamp(92px, 11vw, 154px);
  animation-duration: 8s;
  filter: drop-shadow(0 0 7px currentColor);
}
.burst-1 { color: rgba(30, 91, 219, .68); animation-delay: 0s; }
.burst-2 { color: rgba(227, 27, 35, .58); animation-delay: 1.1s; }
.burst-3 { color: rgba(255, 209, 102, .68); animation-delay: 2.2s; }
.burst-4 { color: rgba(227, 27, 35, .55); animation-delay: 3.3s; }
.burst-5 { color: rgba(30, 91, 219, .62); animation-delay: 4.4s; }
.burst-6 { color: rgba(255, 209, 102, .62); animation-delay: 5.5s; }
.burst-7 { color: rgba(227, 27, 35, .58); animation-delay: 6.6s; }
.burst-8 { color: rgba(30, 91, 219, .62); animation-delay: 7.7s; }
.burst-9 { top: 28%; left: 19%; color: rgba(255, 209, 102, .68); animation-delay: 1.7s; }
.burst-10 { top: 33%; right: 18%; color: rgba(227, 27, 35, .58); animation-delay: 2.8s; }
.burst-11 { top: 60%; left: 11%; color: rgba(30, 91, 219, .64); animation-delay: 3.9s; }
.burst-12 { top: 68%; right: 13%; color: rgba(255, 209, 102, .68); animation-delay: 5s; }
.burst-13 { top: 82%; left: 39%; color: rgba(227, 27, 35, .56); animation-delay: 6.1s; }
.burst-14 { top: 4%; right: 35%; color: rgba(30, 91, 219, .64); animation-delay: 7.2s; }
.burst-15 { top: 52%; left: 48%; color: rgba(255, 209, 102, .65); animation-delay: 8.3s; }
.burst-16 { top: 91%; right: 31%; color: rgba(227, 27, 35, .58); animation-delay: 9.4s; }
.burst-17 { top: 19%; left: 31%; color: rgba(227, 27, 35, .6); animation-delay: .45s; }
.burst-18 { top: 23%; right: 32%; color: rgba(255, 209, 102, .7); animation-delay: .9s; }
.burst-19 { top: 37%; left: 3%; color: rgba(30, 91, 219, .68); animation-delay: 1.35s; }
.burst-20 { top: 42%; right: 4%; color: rgba(227, 27, 35, .62); animation-delay: 1.8s; }
.burst-21 { top: 57%; left: 27%; color: rgba(255, 209, 102, .7); animation-delay: 2.25s; }
.burst-22 { top: 64%; right: 29%; color: rgba(30, 91, 219, .68); animation-delay: 2.7s; }
.burst-23 { top: 76%; left: 5%; color: rgba(227, 27, 35, .62); animation-delay: 3.15s; }
.burst-24 { top: 79%; right: 3%; color: rgba(255, 209, 102, .7); animation-delay: 3.6s; }
.burst-25 { top: 3%; left: 68%; color: rgba(30, 91, 219, .68); animation-delay: 4.05s; }
.burst-26 { top: 14%; left: 83%; color: rgba(227, 27, 35, .62); animation-delay: 4.5s; }
.burst-27 { top: 32%; left: 65%; color: rgba(255, 209, 102, .7); animation-delay: 4.95s; }
.burst-28 { top: 48%; left: 36%; color: rgba(30, 91, 219, .68); animation-delay: 5.4s; }
.burst-29 { top: 69%; left: 57%; color: rgba(227, 27, 35, .62); animation-delay: 5.85s; }
.burst-30 { top: 88%; left: 23%; color: rgba(255, 209, 102, .7); animation-delay: 6.3s; }
.burst-31 { top: 93%; left: 75%; color: rgba(30, 91, 219, .68); animation-delay: 6.75s; }
.burst-32 { top: 7%; left: 4%; color: rgba(227, 27, 35, .62); animation-delay: 7.2s; }
.burst-1, .burst-5, .burst-11, .burst-14, .burst-19, .burst-22, .burst-25, .burst-28, .burst-31 { color: #00b8ff; }
.burst-2, .burst-4, .burst-7, .burst-10, .burst-13, .burst-17, .burst-20, .burst-23, .burst-26, .burst-29, .burst-32 { color: #ff285a; }
.burst-3, .burst-6, .burst-12, .burst-15, .burst-18, .burst-21, .burst-24, .burst-27, .burst-30 { color: #ffe23b; }
.burst-8, .burst-16 { color: #a855f7; }
.burst-9 { color: #23e68a; }
.burst-16, .burst-27 { color: #ff8a24; }
.spark-1, .spark-4 { color: #00b8ff; background: currentColor; }
.spark-2, .spark-5 { color: #ff285a; background: currentColor; }
.spark-3 { color: #ffe23b; background: currentColor; }
.spark-6 { color: #23e68a; background: currentColor; }
.firework-spark { opacity: .5; }
@keyframes pageFirework {
  0%, 7% { opacity: 0; transform: scale(.08) rotate(-12deg); }
  20% { opacity: .58; transform: scale(.5) rotate(8deg); }
  38% { opacity: .88; transform: scale(1.12) rotate(0); }
  58%, 100% { opacity: 0; transform: scale(1.4) rotate(12deg); }
}
@media (max-width: 600px) {
  .firework-burst { width: 82px; animation-duration: 9s; }
  .hero-fireworks .firework-burst { width: 72px; }
  .burst-5, .burst-6, .burst-7, .burst-8, .spark-4, .spark-5, .spark-6 { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .page-fireworks, .hero-fireworks { display: none; }
}
#products[hidden] { display: none !important; }
.phone-login-gate {
  width: min(1000px, calc(100% - 32px));
  margin: 52px auto 48px;
  text-align: center;
}
.phone-login-gate h2 {
  margin: 0 0 10px;
  color: #475569;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 600;
}
.phone-login-gate > p { margin: 0; color: #64748b; }
.phone-login-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 750px;
  margin: 28px auto 16px;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid #edf1f8;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(18, 37, 75, .12);
}
.phone-login-card input {
  flex: 1 1 300px;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #172554;
  background: #fff;
  font-size: 1.1rem;
}
.phone-login-card input:focus { outline: 3px solid rgba(30, 91, 219, .18); border-color: #1e5bdb; }
.phone-login-card button {
  min-width: 190px;
  height: 60px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #123eaa, #1e5bdb);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.phone-login-card button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 62, 170, .24); }
.phone-login-error { display: none; flex-basis: 100%; margin: 0; color: #b9131b; text-align: left; }
.phone-login-error.visible { display: block; }
.phone-login-gate > small { color: #64748b; }
.shopper-mobile-status { margin: 8px 0 0; color: #475569; font-size: .9rem; }
.shopper-mobile-status:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .phone-login-gate { margin: 34px auto; }
  .phone-login-card { flex-direction: column; align-items: stretch; padding: 22px; }
  .phone-login-card input, .phone-login-card button { width: 100%; flex-basis: auto; }
}
.order-track-page {
  width: min(900px, calc(100% - 32px));
  min-height: 70vh;
  margin: 44px auto;
}
.order-track-back { color: #123eaa; font-weight: 800; }
.order-track-page h1 { margin: 26px 0 8px; color: #172554; text-align: center; }
.order-track-intro { margin: 0 0 24px; color: #475569; text-align: center; }
.order-lookup-form {
  display: flex;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid #e6edf8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(18, 62, 170, .1);
}
.order-lookup-form input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  color: #172554;
}
.order-lookup-form input:focus { outline: 3px solid rgba(30, 91, 219, .16); border-color: #1e5bdb; }
.order-lookup-form button {
  min-width: 170px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #123eaa, #1e5bdb);
  font-weight: 800;
  cursor: pointer;
}
.order-lookup-form button:disabled { cursor: wait; opacity: .7; }
.order-lookup-message { min-height: 24px; margin: 18px 0; color: #475569; text-align: center; }
.order-lookup-message.error { color: #b9131b; }
.tracked-order {
  margin: 22px 0 40px;
  padding: clamp(18px, 4vw, 32px);
  border: 1px solid #d6e5ff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(18, 62, 170, .1);
}
.tracked-order__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #d6e5ff; }
.tracked-order__head h2 { margin: 0; color: #123eaa; font-size: 1.2rem; }
.tracked-order__head p { margin: 5px 0 0; color: #64748b; }
.tracked-order__status { align-self: center; padding: 7px 12px; border-radius: 999px; color: #fff; background: #123eaa; font-size: .85rem; font-weight: 800; }
.tracked-order__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 20px 0; }
.tracked-order__info div { display: grid; gap: 4px; }
.tracked-order__info span { color: #64748b; font-size: .82rem; }
.tracked-order__info strong { color: #172554; overflow-wrap: anywhere; }
.tracked-order__section-title { margin: 24px 0 12px; color: #172554; font-size: 1rem; }
.order-progress { list-style: none; margin: 18px 0 26px; padding: 0; }
.order-progress__step { position: relative; display: flex; align-items: flex-start; gap: 13px; min-height: 52px; color: #64748b; }
.order-progress__step:not(:last-child)::before { position: absolute; top: 25px; left: 11px; bottom: -1px; width: 2px; background: #d6e5ff; content: ""; }
.order-progress__marker { z-index: 1; display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 2px solid #cbd5e1; border-radius: 50%; color: transparent; background: #fff; font-size: .75rem; font-weight: 900; }
.order-progress__step.is-complete { color: #166534; }
.order-progress__step.is-complete::before { background: #16a34a; }
.order-progress__step.is-complete .order-progress__marker { border-color: #16a34a; color: #fff; background: #16a34a; }
.order-progress__step.is-current { color: #123eaa; font-weight: 900; }
.order-progress__step.is-current .order-progress__marker { border-color: #1e5bdb; background: #eaf3ff; box-shadow: 0 0 0 4px rgba(30, 91, 219, .12); }
.tracked-order__tracking { margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; color: #172554; background: #f5f9ff; }
.tracked-order__invoice { margin-top: 20px; padding: 12px 18px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(135deg, #123eaa, #1e5bdb); font-weight: 800; cursor: pointer; }
.tracked-order__invoice:hover { box-shadow: 0 8px 18px rgba(18, 62, 170, .2); transform: translateY(-1px); }
.tracked-order__invoice:disabled { cursor: wait; opacity: .7; transform: none; }
.tracked-order__items { width: 100%; margin: 18px 0; border-collapse: collapse; }
.tracked-order__items th, .tracked-order__items td { padding: 12px 8px; border-bottom: 1px solid #e7edf7; text-align: left; }
.tracked-order__items th { color: #475569; font-size: .85rem; }
.tracked-order__items td:last-child, .tracked-order__items th:last-child { text-align: right; }
.tracked-order__total { display: flex; justify-content: flex-end; gap: 28px; color: #172554; font-size: 1.1rem; font-weight: 900; }
.tracked-order__total strong { color: #123eaa; }
@media (max-width: 600px) {
  .order-lookup-form { flex-direction: column; padding: 18px; }
  .order-lookup-form button { min-height: 52px; }
  .tracked-order__items th, .tracked-order__items td { padding: 10px 4px; font-size: .9rem; }
  .tracked-order__info { grid-template-columns: 1fr; }
}