/* Header: a full-width white bar that sticks to the top of the screen.
   main.css positions the template header absolutely over the page (with a
   40px gap on desktop and a boxed 1200px bar); put it back in the normal
   flow instead so pages start below it and nothing hides underneath. */
.sticky-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header_area {
  position: relative;
}

.header_area .main_menu .main_box {
  max-width: 100%;
  margin: 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

/* Page top banners no longer need room for an overlapping header. */
.organic-breadcrumb {
  padding-top: 0;
}

.logo_h img {
  max-height: 55px;
  width: auto;
}

.single-product .pack-info {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}


/* Footer trimmed to a single line - match the header's height (65px)
   instead of the template's original 80-100px top/bottom padding meant
   for a full multi-column footer. */
.footer-area {
  padding: 0;
  height: 65px;
  display: flex;
  align-items: center;
}

.footer-area .container {
  width: 100%;
}

.footer-area .footer-bottom,
.footer-area .footer-text {
  padding: 0;
}

/* Festive price-list background: a soft pink-lavender wash with a faint
   copy of the banner's floral pattern, plus flowers / sweets / crackers that
   bloom and fade (FestiveBackground.jsx). */
.festive-section {
  position: relative;
  /* clip, not hidden: hidden turns this section into a scroll container,
     which silently stops the sticky category bars inside it from sticking.
     (hidden stays as the fallback for browsers without clip.) */
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, #fff6fa 0%, #fbf1ff 50%, #fff6fa 100%);
}

.festive-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/patterns/diwali-damask.webp") 0 0 / 240px 160px repeat;
  opacity: 0.06;
  pointer-events: none;
}

.festive-section > .container {
  position: relative;
  z-index: 1;
}

.festive-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.festive-item {
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  opacity: 0;
  will-change: transform, opacity;
}

.festive-item svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Flowers: open up while turning, hold, then fade. */
.festive-item.is-bloom {
  animation: festive-bloom var(--dur) ease-out forwards;
}

/* Sweets: pop in with a bounce, then drift upward and fade. */
.festive-item.is-sweet {
  animation: festive-sweet var(--dur) ease-out forwards;
}

/* Crackers: burst outward fast, then fade. */
.festive-item.is-burst {
  animation: festive-burst var(--dur) cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes festive-bloom {
  0% {
    transform: scale(0.15) rotate(calc(var(--rot) - 60deg));
    opacity: 0;
  }
  20% {
    opacity: 0.85;
  }
  45% {
    transform: scale(1) rotate(var(--rot));
    opacity: 0.85;
  }
  100% {
    transform: scale(1.06) rotate(calc(var(--rot) + 12deg));
    opacity: 0;
  }
}

@keyframes festive-sweet {
  0% {
    transform: translateY(12px) scale(0.3) rotate(var(--rot));
    opacity: 0;
  }
  22% {
    transform: translateY(0) scale(1.08) rotate(var(--rot));
    opacity: 0.9;
  }
  32% {
    transform: translateY(0) scale(1) rotate(var(--rot));
  }
  75% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-26px) scale(0.95) rotate(var(--rot));
    opacity: 0;
  }
}

@keyframes festive-burst {
  0% {
    transform: scale(0.05) rotate(var(--rot));
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  45% {
    transform: scale(1) rotate(var(--rot));
    opacity: 0.85;
  }
  100% {
    transform: scale(1.18) rotate(var(--rot));
    opacity: 0;
  }
}

/* Ground chakkar: whirls on the spot while its spark ring flickers. */
.festive-item.is-chakkar {
  animation: festive-chakkar var(--dur) linear forwards;
}

.festive-item.is-chakkar .chakkar-sparks {
  animation: chakkar-flicker 0.12s steps(2) infinite;
}

@keyframes festive-chakkar {
  0% {
    transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
  10% {
    transform: scale(1) rotate(160deg);
    opacity: 0.9;
  }
  82% {
    opacity: 0.9;
  }
  100% {
    transform: scale(0.85) rotate(1440deg);
    opacity: 0;
  }
}

@keyframes chakkar-flicker {
  to {
    opacity: 0.55;
  }
}

/* 100 wala: a strip of crackers on a string (wider than it is tall);
   each cracker vanishes in a flash, one after another. */
.festive-item.is-wala {
  width: calc(var(--size) * 3.4);
  margin-left: calc(var(--size) * -1.7);
  transform: rotate(calc(var(--rot) / 3));
  animation: festive-wala var(--dur) ease-out forwards;
}

.festive-item.is-wala .wala-cracker,
.festive-item.is-wala .wala-flash {
  transform-box: fill-box;
  transform-origin: center;
}

.festive-item.is-wala .wala-cracker {
  animation: wala-pop-out 0.05s linear forwards;
  animation-delay: calc(0.35s + var(--k) * 0.16s);
}

.festive-item.is-wala .wala-flash {
  opacity: 0;
  animation: wala-flash 0.32s ease-out forwards;
  animation-delay: calc(0.35s + var(--k) * 0.16s);
}

@keyframes festive-wala {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

@keyframes wala-pop-out {
  to {
    opacity: 0;
  }
}

@keyframes wala-flash {
  0% {
    opacity: 1;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Cards let the celebration show through faintly (mostly visible on phones,
   where there is little margin) - still easily readable. */
.festive-section .product-row {
  background: rgba(255, 255, 255, 0.88);
}

@media (prefers-reduced-motion: reduce) {
  .festive-layer {
    display: none;
  }
}

/* ==========================================================================
   Diwali theme - colours taken from the hero banners: magenta ribbons,
   gold lettering, night-sky indigo
   ========================================================================== */

:root {
  --brand-primary: #d6045f; /* magenta - "SALE" ribbon, deepened for white text */
  --brand-primary-light: #e8036a;
  --brand-purple: #7a1fa2;
  --brand-crimson: #a3033a; /* offer cards */
  --brand-gold: #fdc62f; /* "DIWALI" lettering */
  --brand-dark: #1d0b3f; /* night sky */
  --brand-tint: #fdedf4;
  --brand-tint-soft: #fef5f9;
  --brand-border: #f5c2d8;
  --brand-gradient: linear-gradient(90deg, #e8036a 0%, #7a1fa2 100%);
  /* Plum floral pattern cut from the hero banner's corner (a mirrored,
     seamless tile), used for buttons instead of a gradient. */
  --brand-pattern: #68024d url("/img/patterns/diwali-damask.webp") 0 0 / 180px 120px repeat;
  /* Category headings: #FEBE10 gold over the floral pattern, dark plum names
     with #920972 magenta for the count and arrow. */
  --brand-heading-color: #febe10;
  --brand-heading-pattern: linear-gradient(rgba(254, 190, 16, 0.92), rgba(254, 190, 16, 0.92)),
    #68024d url("/img/patterns/diwali-damask.webp") 0 0 / 180px 120px repeat;
  --brand-heading-ink: #4a0233;
  --brand-heading-accent: #920972;
}

/* Every button on the site should read as one family. .primary-btn
   (main.css) was authored entirely for <a> tags: it's a full pill
   (border-radius: 50px), never resets the browser's default <button>
   border, and its hover is a black skewed sweep (.primary-btn:before)
   that either goes fully invisible (narrow buttons) or reads as a dark
   overlay (wide buttons). Rather than patching each button that happens
   to be a real <button> one at a time - which is how the border and
   missing hover on the cart's plain "Checkout" button slipped through -
   fix all of it once on the base class so nothing can miss it again. */
.primary-btn {
  background: var(--brand-pattern);
  border: 0;
  border-radius: 8px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease,
    box-shadow 0.2s ease;
}

.primary-btn:before {
  content: none;
}

.primary-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.primary-btn:active {
  transform: scale(0.97);
}

/* main.css also has a more specific ".contact_form .primary-btn { border-
   radius: 0 }" for the original template's contact submit button, which
   beats the rule above on specificity alone - match it here too. */
.contact_form .primary-btn {
  border-radius: 8px;
}

/* Header cart icon */
.cart-nav-item {
  margin-left: 10px;
}

.cart-icon-link {
  display: flex !important;
  align-items: center;
  color: #222 !important;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.cart-icon-link .MuiBadge-badge {
  font-size: 10px;
  height: 16px;
  min-width: 16px;
}

.cart-label {
  display: none;
}

/* Mobile nav: the template renders the collapsed menu as a plain inline
   block with no visual boundary, so it just runs straight into whatever
   is below it. Give it its own floating card instead. */
@media (max-width: 991px) {
  .header_area .navbar-collapse.mobile-menu-panel {
    margin: 0 -15px !important;
    width: calc(100% + 30px);
    padding: 8px !important;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    border-top: 1px solid #f2f2f2;
  }

  .mobile-menu-panel .menu_nav {
    flex-direction: column;
    /* Beats the "align-items-center" Bootstrap utility class hardcoded on
       this <ul> for the desktop horizontal layout - its !important always
       wins over specificity alone, so this needs !important too. */
    align-items: stretch !important;
  }

  .mobile-menu-panel .nav-item {
    margin-right: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f5f5f5;
  }

  .mobile-menu-panel .nav-item:last-child {
    border-bottom: 0;
  }

  .mobile-menu-panel .nav-link {
    display: flex !important;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 14px 12px !important;
    font-size: 14px !important;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-menu-panel .nav-item.active .nav-link,
  .mobile-menu-panel .nav-link:hover {
    background: var(--brand-tint-soft);
    color: var(--brand-primary) !important;
  }

  .mobile-menu-panel .cart-nav-item {
    margin-left: 0 !important;
  }

  .mobile-menu-panel .cart-icon-link {
    width: 100%;
    justify-content: flex-start !important;
  }

  .mobile-menu-panel .cart-label {
    display: inline;
  }
}

/* Hero: full-width Diwali offer banner carousel, directly below the
   sticky header. The deep purple matches the banners so any letterboxing
   blends in. */
.banner-area {
  background: var(--brand-dark) !important;
  padding: 0;
}

.banner-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 5 / 2;
  background: var(--brand-dark);
  touch-action: pan-y;
}

.banner-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .banner-carousel-track {
    transition: none;
  }
}

.banner-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}

.banner-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px) brightness(0.7);
  transform: scale(1.15);
}

.banner-slide-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.banner-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--brand-dark);
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s ease;
}

.banner-carousel:hover .banner-carousel-arrow,
.banner-carousel-arrow:focus-visible {
  opacity: 1;
}

.banner-carousel-arrow:hover {
  background: #fff;
}

.banner-carousel-prev {
  left: 14px;
}

.banner-carousel-next {
  right: 14px;
}

.banner-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.banner-carousel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.banner-carousel-dot.is-active {
  width: 26px;
  background: var(--brand-gold);
}

/* Phones: no hover, so hide arrows (swipe instead). */
@media (max-width: 767px) {
  .banner-carousel-arrow {
    display: none;
  }

  .banner-carousel-dots {
    bottom: 6px;
    gap: 6px;
  }

  .banner-carousel-dot {
    width: 7px;
    height: 7px;
  }

  .banner-carousel-dot.is-active {
    width: 18px;
  }
}

/* Page breadcrumb / hero banners (Contact, Cart) */
.organic-breadcrumb {
  background: var(--brand-gradient) !important;
}

.organic-breadcrumb .breadcrumb-banner {
  padding: 70px 0;
}

.organic-breadcrumb .breadcrumb-banner p {
  max-width: 640px;
  margin: 10px auto 0;
  opacity: 0.95;
}

/* Product catalog (homepage) */
.product-catalog-area {
  padding: 60px 0 20px;
}

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 10px;
}

.catalog-toolbar input[type="search"] {
  height: 48px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  background: #fff;
  flex: 1 1 260px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-toolbar input[type="search"]:hover {
  border-color: var(--brand-primary);
}

.catalog-toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(232, 3, 106, 0.18);
}

/* Custom dropdown (replaces native <select>, whose open option list can't
   be styled - it renders with the OS's own look, not the site's theme). */
.catalog-toolbar .catalog-select {
  flex: 0 0 220px;
}

.catalog-select {
  position: relative;
}

.catalog-select-trigger {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #222;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-select-trigger:hover {
  border-color: var(--brand-primary);
}

.catalog-select-trigger i {
  flex: 0 0 auto;
  color: var(--brand-primary);
  font-size: 12px;
}

.catalog-select[data-open="true"] .catalog-select-trigger {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(232, 3, 106, 0.18);
}

/* OK button pinned to the bottom of the multi-select (category) list. */
.catalog-select-footer {
  position: sticky;
  bottom: -6px; /* cover the menu's own bottom padding */
  margin: 6px -6px -6px;
  padding: 8px 6px;
  background: #fff;
  border-top: 1px solid #eee;
  border-radius: 0 0 10px 10px;
}

.catalog-select-ok {
  display: block;
  width: 100%;
  height: 40px;
  line-height: normal;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.catalog-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.catalog-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.catalog-select-option i {
  flex: 0 0 12px;
  font-size: 11px;
  color: var(--brand-primary);
  opacity: 0;
}

/* Multi-select category list uses checkbox icons, always visible, rather
   than a checkmark that only appears once selected. */
.catalog-select-menu.is-multiple .catalog-select-option i {
  flex: 0 0 14px;
  font-size: 15px;
  color: #ccc;
  opacity: 1;
}

.catalog-select-menu.is-multiple .catalog-select-option.is-selected i {
  color: var(--brand-primary);
}

.catalog-select-option.is-selected {
  background: var(--brand-tint);
  font-weight: 600;
  color: var(--brand-crimson);
}

.catalog-select-option.is-selected i {
  opacity: 1;
}

.catalog-select-option:hover {
  background: var(--brand-tint);
}

.catalog-category-block {
  margin-top: 30px;
}

.category-pill-header {
  position: sticky;
  top: 65px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1px solid rgba(146, 9, 114, 0.25);
  background: var(--brand-heading-pattern);
  color: var(--brand-heading-ink);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  margin-bottom: 18px;
  transition: filter 0.2s ease;
}

.category-pill-header:hover {
  filter: brightness(1.05);
}

.category-pill-header > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-pill-toggle {
  flex: 0 0 auto;
  font-size: 13px;
  opacity: 0.9;
}

.category-pill-header .category-count {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 600;
  text-transform: none;
  color: var(--brand-heading-accent);
}

.category-pill-toggle {
  color: var(--brand-heading-accent);
}

.catalog-empty {
  padding: 20px 0;
  color: #777;
}

/* Product row cards */
.product-row-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.product-row {
  flex-direction: row !important;
  align-items: center;
  margin-bottom: 0 !important;
  border-radius: 10px;
  overflow: hidden;
}

.product-row-media {
  position: relative;
  flex: 0 0 90px;
}

.product-row .product-row-media img {
  width: 90px;
  height: 90px;
  margin: 0;
  object-fit: contain;
  background: var(--brand-tint-soft);
  padding: 8px;
}

/* Rows with a real photo: the thumbnail is a button with an eye badge
   that opens the photo viewer. */
.product-row-zoom {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.product-row-zoom-icon {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(29, 11, 63, 0.72);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.15s ease;
}

.product-row-zoom:hover .product-row-zoom-icon,
.product-row-zoom:focus-visible .product-row-zoom-icon {
  transform: scale(1.12);
  background: var(--brand-primary);
}

.product-row-zoom:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Product photo viewer: centred card over a dimmed page (above the cart). */
.product-viewer {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 8, 40, 0.75);
  backdrop-filter: blur(3px);
  animation: compliance-fade 0.2s ease-out;
}

.product-viewer-stage {
  position: relative;
  max-width: min(92vw, 520px);
}

.product-viewer-card {
  position: relative;
  margin: 0;
  padding: 14px 14px 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  text-align: center;
  animation: product-viewer-pop 0.22s ease-out;
}

.product-viewer-card img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  border-radius: 10px;
  object-fit: contain;
}

.product-viewer-card figcaption {
  margin-top: 10px;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 15px;
}

.product-viewer-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes product-viewer-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Opening effects ------------------------------------------------------
   The product's own cracker goes off first and reveals the photo
   (ProductImageViewer.jsx picks the effect from the category and sets
   --reveal-delay / --reveal-ms to match its timing). */
.product-viewer.has-fx {
  /* a darker night sky so the fire shows */
  background: rgba(12, 4, 28, 0.88);
}

.product-viewer.has-fx .product-viewer-card {
  animation: viewer-reveal-burst var(--reveal-ms) cubic-bezier(0.2, 0.8, 0.3, 1) var(--reveal-delay) both;
}

.product-viewer.is-fountain .product-viewer-card {
  animation-name: viewer-reveal-rise;
  animation-timing-function: ease-out;
}

.product-viewer.is-chakkar .product-viewer-card {
  animation-name: viewer-reveal-spin;
}

.product-viewer.is-wala .product-viewer-card {
  animation-name: viewer-reveal-wipe;
  animation-timing-function: linear;
}

.product-viewer.is-sparkler .product-viewer-card {
  animation-name: viewer-reveal-glitter;
}

.product-viewer.has-fx .product-viewer-close {
  animation: compliance-fade 0.3s ease-out calc(var(--reveal-delay) + var(--reveal-ms)) both;
}

/* Out of the flash: a circle opening from the centre, white-hot at first. */
@keyframes viewer-reveal-burst {
  from {
    clip-path: circle(0% at 50% 50%);
    transform: scale(0.8);
    filter: brightness(2.4) saturate(0.6);
  }
  to {
    clip-path: circle(100% at 50% 50%);
    transform: scale(1);
    filter: none;
  }
}

/* Rising out of the fountain's spray, from the bottom up. */
@keyframes viewer-reveal-rise {
  from {
    clip-path: inset(100% 0 0 0 round 16px);
    transform: translateY(30px);
    filter: brightness(1.8);
  }
  to {
    clip-path: inset(-60px round 16px); /* past the edges so the shadow shows */
    transform: translateY(0);
    filter: none;
  }
}

/* Spinning out of the chakkar's wheel. */
@keyframes viewer-reveal-spin {
  from {
    transform: rotate(-540deg) scale(0);
    filter: brightness(2);
  }
  to {
    transform: rotate(0) scale(1);
    filter: none;
  }
}

/* Left to right, keeping pace with the wala popping across. */
@keyframes viewer-reveal-wipe {
  from {
    clip-path: inset(0 100% 0 0 round 16px);
  }
  to {
    clip-path: inset(-60px round 16px); /* past the edges so the shadow shows */
  }
}

/* A glittering circle where the sparkler was drawing. */
@keyframes viewer-reveal-glitter {
  0% {
    clip-path: circle(0% at 50% 50%);
    filter: brightness(2.2) saturate(0.5);
  }
  60% {
    filter: brightness(1.4);
  }
  100% {
    clip-path: circle(100% at 50% 50%);
    filter: none;
  }
}

.viewer-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* Everything below is placed at the centre of the screen. */
.fx-bomb,
.fx-rocket,
.fx-shell,
.fx-chakkar,
.fx-sparkler,
.fx-wala {
  position: absolute;
  left: 50%;
  top: 50%;
}

/* Bomb: the fuse burns down, the cracker shakes and goes off (0.7s). */
.fx-bomb {
  width: 30px;
  height: 46px;
  margin: -23px 0 0 -15px;
  animation: fx-bomb-shake 0.7s ease-in forwards;
}

.fx-bomb-body {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, transparent 0 38%, #fdc62f 38% 50%, transparent 50%),
    linear-gradient(90deg, #8e0230, #e8036a 45%, #a3033a);
  box-shadow: 0 0 18px rgba(253, 198, 47, 0.35);
}

.fx-bomb-fuse {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 3px;
  height: 26px;
  margin-left: -1.5px;
  background: #c9b48a;
  transform-origin: bottom center;
  animation: fx-fuse-burn 0.7s linear forwards;
}

.fx-fuse-spark,
.fx-sparkler-tip {
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 3px #fdc62f, 0 0 18px 6px rgba(232, 3, 106, 0.6);
  animation: fx-crackle 0.12s steps(2) infinite;
}

@keyframes fx-fuse-burn {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

@keyframes fx-bomb-shake {
  0%,
  55% {
    transform: none;
    opacity: 1;
  }
  65% {
    transform: translateX(-3px) rotate(-4deg);
  }
  75% {
    transform: translateX(3px) rotate(4deg);
  }
  85% {
    transform: translateX(-3px) rotate(-3deg) scale(1.08);
  }
  99% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* A crackling spark: the glow flickers between two sizes. */
@keyframes fx-crackle {
  from {
    box-shadow: 0 0 8px 3px #fdc62f, 0 0 18px 6px rgba(232, 3, 106, 0.6), 7px -6px 0 -3px #fff,
      -6px -4px 0 -3px #ffd96b;
  }
  to {
    box-shadow: 0 0 12px 5px #fdc62f, 0 0 26px 9px rgba(232, 3, 106, 0.5), -8px -7px 0 -3px #fff,
      6px 5px 0 -3px #ffd96b;
  }
}

/* Rocket: shoots up from below the screen to the centre (0.85s) on a trail
   of fire, then bursts. */
.fx-rocket {
  width: 14px;
  height: 46px;
  margin: -23px 0 0 -7px;
  animation: fx-rocket-rise 0.85s cubic-bezier(0.3, 0.1, 0.6, 1) forwards;
}

.fx-rocket-body {
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(90deg, #8e0230, #e8036a 45%, #a3033a);
}

.fx-rocket-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: -12px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #fdc62f;
}

.fx-rocket-flame {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 10px;
  height: 22px;
  margin-left: -5px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(ellipse at 50% 20%, #fff 0 25%, #fdc62f 45%, rgba(232, 3, 106, 0.8) 70%, transparent 75%);
  transform-origin: top center;
  animation: fx-flame-flicker 0.08s ease-in-out infinite alternate;
}

.fx-rocket-trail {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff3b0, rgba(253, 198, 47, 0.7) 30%, rgba(232, 3, 106, 0) 100%);
  box-shadow: 0 0 10px rgba(253, 198, 47, 0.6);
  transform-origin: bottom center;
  animation: fx-trail 1.1s ease-out forwards;
}

@keyframes fx-rocket-rise {
  0% {
    transform: translateY(65vh);
    opacity: 1;
  }
  99% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes fx-trail {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  /* fully drawn as the rocket reaches the top (0.85s), then gone */
  77% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

@keyframes fx-flame-flicker {
  from {
    transform: scaleY(0.8);
  }
  to {
    transform: scaleY(1.25);
  }
}

/* Aerial shots: glowing shells climb to their burst points one after
   another (0.6s each, staggered by the JS delays). */
.fx-shell {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px #fdc62f, 0 14px 10px -2px rgba(253, 198, 47, 0.6),
    0 30px 12px -4px rgba(232, 3, 106, 0.35);
  opacity: 0;
  animation: fx-shell-rise 0.6s cubic-bezier(0.25, 0.6, 0.4, 1) both;
}

@keyframes fx-shell-rise {
  0% {
    transform: translate(calc(var(--dx) * 0.6), calc(65vh - var(--dy) * 0.2));
    opacity: 1;
  }
  99% {
    transform: translate(var(--dx), var(--dy));
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy));
    opacity: 0;
  }
}

/* Counts the shots of a multi-shot item as they burst ("7 / 7 SHOTS"). */
.fx-shot-counter {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  padding: 6px 16px;
  border: 1px solid rgba(253, 198, 47, 0.6);
  border-radius: 20px;
  background: rgba(12, 4, 28, 0.7);
  color: #ffe9a0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  animation: compliance-fade 0.3s ease-out both;
}

.fx-shot-counter strong {
  display: inline-block;
  min-width: 2ch;
  color: #fff;
  font-size: 18px;
  text-align: right;
}

/* Fountain: a flower pot near the bottom sprays sparks up; the photo rises
   out of the spray. */
.fx-fountain {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  width: 0;
  height: 0;
  animation: fx-fade-out 0.4s ease-in 1.5s forwards;
}

/* The flower pot: a cone with a gold stripe round its middle. */
.fx-fountain-pot {
  position: absolute;
  left: -26px;
  top: -6px;
  width: 52px;
  height: 56px;
  background: linear-gradient(180deg, transparent 0 46%, #fdc62f 46% 60%, transparent 60%),
    linear-gradient(90deg, #8e0230, #e8036a 45%, #a3033a);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}

.fx-fountain-spark {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px 3px var(--c), 0 10px 8px -2px var(--c);
  opacity: 0;
  animation: fx-fountain-spray 0.9s cubic-bezier(0.2, 0.7, 0.5, 1) infinite;
}

/* Up and out, then falling back a little as it fades. */
@keyframes fx-fountain-spray {
  0% {
    transform: translate(0, 0) scale(1.3);
    opacity: 1;
  }
  75% {
    transform: translate(var(--dx), calc(-1 * var(--h))) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--dx) * 1.3), calc(-0.88 * var(--h))) scale(0.6);
    opacity: 0;
  }
}

@keyframes fx-fade-out {
  to {
    opacity: 0;
  }
}

/* Chakkar: a wheel of fire spinning faster and faster, throwing sparks,
   until the photo spins out of it. */
.fx-chakkar {
  width: 0;
  height: 0;
  animation: fx-chakkar-life 0.95s ease-in forwards;
}

.fx-chakkar-wheel {
  position: absolute;
  left: -70px;
  top: -70px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #fff3b0 30deg,
    transparent 75deg,
    #e8036a 120deg,
    transparent 165deg,
    #fdc62f 210deg,
    transparent 255deg,
    #7cf0ff 300deg,
    transparent 345deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 50% 64%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 46%, #000 50% 64%, transparent 70%);
  filter: drop-shadow(0 0 8px #fdc62f);
  animation: fx-spin 0.22s linear infinite;
}

.fx-chakkar-spark {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: #ffd96b;
  box-shadow: 0 0 6px #fdc62f;
  opacity: 0;
  animation: fx-chakkar-throw 0.35s ease-out infinite;
}

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

@keyframes fx-chakkar-throw {
  0% {
    transform: rotate(var(--a)) translateY(-44px);
    opacity: 1;
  }
  100% {
    transform: rotate(calc(var(--a) + 40deg)) translateY(-110px) scaleY(0.4);
    opacity: 0;
  }
}

@keyframes fx-chakkar-life {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  75% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Wala: a string of crackers across the screen popping left to right
   (80ms apart) while the photo is wiped in behind them. */
.fx-wala {
  left: 6%;
  right: 6%;
  height: 0;
  display: flex;
  justify-content: space-between;
  border-top: 2px solid #c9b48a;
  animation: fx-fade-out 0.3s ease-in 1.2s forwards;
}

.fx-wala-cracker {
  position: relative;
  width: 9px;
  height: 22px;
  margin-top: -11px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8e0230, #e8036a 45%, #a3033a);
  animation: fx-wala-pop 0.2s ease-out calc(var(--i) * 80ms) forwards;
}

.fx-wala-cracker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe38a 35%, rgba(232, 3, 106, 0.5) 65%, transparent 72%);
  opacity: 0;
  animation: cracker-flash 0.35s ease-out calc(var(--i) * 80ms) forwards;
}

@keyframes fx-wala-pop {
  to {
    background: transparent;
  }
}

/* Sparkler: a tilted sparkler stick burning down from the top - the grey
   coating shrinks while the white-hot burning point slides down with it,
   throwing short, forked, crackling sparks every way (1.3s). The photo then
   glitters in as it fades. */
.fx-sparkler {
  width: 0;
  height: 0;
  transform: rotate(-22deg);
  animation: fx-fade-out 0.3s ease-in 1.3s forwards;
}

/* the bare wire, also the handle below the coating */
.fx-sparkler-wire {
  position: absolute;
  left: -1.5px;
  top: -120px;
  width: 3px;
  height: 270px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6d737a, #c3c8ce 50%, #6d737a);
}

/* the coating that burns away from the top */
.fx-sparkler-coat {
  position: absolute;
  left: -3.5px;
  top: -120px;
  width: 7px;
  height: 160px;
  border-radius: 3px;
  background: linear-gradient(90deg, #3b3531, #6b625b 50%, #3b3531);
  transform-origin: bottom center;
  animation: fx-sparkler-coat 1.3s linear forwards;
}

.fx-sparkler-burn {
  position: absolute;
  left: 0;
  top: -120px;
  width: 0;
  height: 0;
  animation: fx-sparkler-burn 1.3s linear forwards;
}

/* the white-hot burning point and its glow */
.fx-sparkler-tip {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  box-shadow: 0 0 10px 4px #fff3b0, 0 0 30px 12px rgba(253, 198, 47, 0.55);
}

/* A spark: a short white-gold streak flying out from the burning point,
   with a little fork at its end; each one lives 0.32s and re-fires, at
   staggered times, so the crackle never stops. */
.fx-sparkler-spark {
  position: absolute;
  left: -1px;
  top: calc(-1 * var(--len));
  width: 2px;
  height: var(--len);
  border-radius: 1px;
  background: linear-gradient(0deg, #fff 0%, #ffe9a0 55%, rgba(253, 198, 47, 0));
  transform-origin: bottom center;
  opacity: 0;
  animation: fx-sparkler-spark 0.32s ease-out infinite;
}

.fx-sparkler-spark::before,
.fx-sparkler-spark::after {
  content: "";
  position: absolute;
  left: 0;
  top: -6px;
  width: 1.5px;
  height: 9px;
  background: #fff3b0;
  transform-origin: bottom center;
  transform: rotate(38deg);
}

.fx-sparkler-spark::after {
  transform: rotate(-38deg);
}

@keyframes fx-sparkler-coat {
  to {
    transform: scaleY(0.4);
  }
}

/* keeps the burning point on the top of the shrinking coating */
@keyframes fx-sparkler-burn {
  to {
    transform: translateY(96px);
  }
}

@keyframes fx-sparkler-spark {
  0% {
    transform: rotate(var(--a)) translateY(0) scaleY(0.2);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scaleY(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-viewer,
  .product-viewer-card,
  .product-viewer.has-fx .product-viewer-card,
  .product-viewer.has-fx .product-viewer-close {
    animation: none;
  }
}

.product-row .discount-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.product-row .product-details {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
}

.product-row .product-details h6 {
  font-size: 14px;
  margin-bottom: 4px;
}

.product-row .prd-bottom {
  flex: 0 0 auto;
  flex-direction: row !important;
  align-items: center;
  border-top: 0;
  border-left: 1px solid #eee;
  padding: 10px 16px;
}

.quick-add-group {
  display: flex;
  gap: 6px;
  animation: quick-add-pulse 0.25s ease;
}

.quick-add-btn {
  min-width: 42px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-tint);
  color: var(--brand-crimson);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-add-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  transform: scale(1.03);
}

.quick-add-btn:active {
  transform: scale(0.95);
}

@keyframes quick-add-pulse {
  from {
    transform: scale(0.9);
    opacity: 0.6;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Inline qty stepper shown in place of the quick-add row once a product
   is already in the cart, so it can be adjusted without opening the cart. */
.in-cart-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Pops in (with a little overshoot) as the cracker burst goes off. */
  animation: cart-controls-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cart-controls-pop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Cracker burst fired from a tapped +N / Add to Cart button. Fixed to the
   viewport (rendered into <body>) so sparks fly past the card edges. */
.cracker-burst {
  position: fixed;
  /* Above the cart panel (1101) so the cart 100 wala's final burst shows too;
     below the compliance notice (2000). */
  z-index: 1200;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cracker-burst-flash {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe38a 35%, rgba(232, 3, 106, 0.5) 65%, transparent 72%);
  animation: cracker-flash 0.45s ease-out forwards;
}

.cracker-spark {
  position: absolute;
  left: -2px;
  top: -8px;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--color);
  box-shadow: 0 0 8px var(--color);
  opacity: 0;
  animation: cracker-spark 0.7s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}

.cracker-spark.is-dot {
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

@keyframes cracker-flash {
  from {
    transform: scale(0.2);
    opacity: 1;
  }
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* Rotate first so translateY travels outward along --angle (0deg = up). */
@keyframes cracker-spark {
  0% {
    transform: rotate(var(--angle)) translateY(0) scaleY(0.4);
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--angle)) translateY(calc(-1 * var(--dist))) scaleY(0.25);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .in-cart-controls {
    animation: none;
  }
}

.qty-step-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  overflow: hidden;
}

.qty-step-btn {
  width: 36px;
  height: 38px;
  border: 0;
  background: var(--brand-tint);
  color: var(--brand-crimson);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.qty-step-btn:hover {
  background: var(--brand-primary);
  color: #fff;
}

.qty-step-btn:active {
  background: var(--brand-crimson);
}

.qty-step-input {
  width: 54px;
  height: 38px;
  border: 0;
  border-left: 1px solid var(--brand-border);
  border-right: 1px solid var(--brand-border);
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #333;
  background: #fff;
  -moz-appearance: textfield;
}

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

.qty-step-remove {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #f5d6d6;
  border-radius: 8px;
  background: #fdecec;
  color: #c0392b;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.qty-step-remove:hover {
  background: #f8d7d7;
  transform: scale(1.08);
}

.qty-step-remove:active {
  transform: scale(0.95);
}

.product-row .prd-bottom .add-to-cart-btn.primary-btn {
  min-width: 170px;
  width: auto;
  height: 40px;
  padding: 0 22px;
  line-height: normal;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease,
    box-shadow 0.2s ease;
}

.product-row .prd-bottom .add-to-cart-btn.primary-btn:active {
  transform: scale(0.95);
}

/* The reference site's buttons all use a hover:scale-105 + active:scale-95
   micro-interaction; the template's .primary-btn hover is instead a skewed
   shine-sweep sized for wide buttons, which at this width sweeps fully past
   and off, leaving no visible cue - so match the reference's pattern here. */
.product-row .prd-bottom .add-to-cart-btn.primary-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(214, 4, 95, 0.3);
}

/* Mobile & tablet: keep the thumbnail + details as a compact top row and
   wrap the quick-add / add-to-cart / qty-stepper controls onto their own
   full-width row underneath, instead of stacking everything vertically. */
@media (max-width: 991px) {
  .product-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 14px;
  }

  .product-row .prd-bottom {
    flex: 0 0 100%;
    flex-direction: column !important;
    border-left: 0;
    border-top: 1px solid #eee;
    margin-top: 2px;
    padding-top: 12px;
    width: 100%;
  }

  .quick-add-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .quick-add-btn {
    width: 100%;
  }

  .product-row .prd-bottom .add-to-cart-btn.primary-btn {
    width: 100%;
  }

  .in-cart-controls {
    width: 100%;
  }

  .qty-step-group {
    flex: 1;
  }

  .qty-step-btn {
    flex: 1;
  }

  .catalog-toolbar .catalog-select {
    flex: 1 1 100%;
  }

  /* One compact row on phones too: name on the left, count + chevron on
     the right. Leave position alone - the base rule's sticky must stay. */
  .category-pill-header {
    gap: 10px;
    padding: 10px 16px 10px 18px;
    font-size: 13px;
  }

  .category-pill-header .category-count {
    font-size: 12px;
  }
}

/* Floating WhatsApp / Call buttons */
.floating-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sit above the bottom cart bar while it is showing. */
body.has-cart-bar .floating-actions {
  bottom: calc(84px + env(safe-area-inset-bottom));
}

/* Bottom cart bar (Zomato-style): pinned summary + "View Cart" while the
   cart has items. Hidden below the screen edge otherwise. */
.cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-bar.is-visible {
  transform: none;
}

/* Full screen width, flush with the bottom edge. */
.cart-bar-btn {
  pointer-events: auto;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: var(--brand-pattern);
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 -6px 20px rgba(29, 11, 63, 0.25);
  transition: filter 0.2s ease;
}

.cart-bar-btn:hover {
  filter: brightness(1.06);
}

.cart-bar-btn:active {
  filter: brightness(0.94);
}

.cart-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cart-bar-summary {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.cart-bar-count {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.92;
}

.cart-bar-total {
  font-size: 18px;
  font-weight: 700;
}

.cart-bar-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.cart-bar-cta i {
  font-size: 22px;
}

/* Keep the end of the page reachable above the bar. */
body.has-cart-bar .footer-area {
  padding-bottom: 80px;
}

.floating-action-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.floating-action-btn:hover {
  transform: scale(1.08);
}

.floating-whatsapp {
  background: #25d366;
}

/* Cart popup: a dismissible slide-over panel opened from the header cart
   icon (or the footer's Cart link) - not a page, not a persistent bar. */
.cart-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(20, 8, 40, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cart-popup-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1101;
  width: 400px;
  max-width: 92vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.cart-popup.is-open {
  transform: translateX(0);
}

/* Opening: a 100 wala hangs down the middle of the panel and burns from the
   top down; the panel is revealed top-to-bottom in step with the fire
   (both run for WALA_MS = 1.4s, see CartDrawer.jsx). */
.cart-popup.is-open.is-wala-open {
  transition: none; /* no slide - the burning wala opens it */
  animation: cart-wala-reveal 1.4s linear;
}

@keyframes cart-wala-reveal {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.cart-wala {
  position: fixed;
  top: 0;
  bottom: 0;
  /* hangs down the middle of the cart panel (panel: 400px, max 92vw) */
  right: calc(min(400px, 92vw) / 2);
  width: 64px;
  margin-right: -32px;
  z-index: 1102;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* The fuse string: burns away from the top as the fire falls. */
.cart-wala-string {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #9aa3ad, #eef2f5 50%, #8a939c);
  transform-origin: bottom center;
  animation: cart-wala-fuse 1.4s linear forwards;
}

@keyframes cart-wala-fuse {
  to {
    transform: scaleY(0);
  }
}

.cart-wala-seg {
  position: relative;
  flex: 1 1 0;
}

/* Red crackers braided down both sides, hanging down and outward. */
.cart-wala-cracker {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 28px;
  margin-left: -4.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #9e0016, #e8233a 45%, #ff5a6e 55%, #b3001b);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25);
  transform-origin: top center;
}

.cart-wala-cracker.is-left {
  transform: rotate(66deg);
  animation: cart-wala-fly-left 0.5s ease-out forwards;
  animation-delay: var(--pop);
}

/* staggered half a step so the two sides interleave like a braid */
.cart-wala-cracker.is-right {
  top: 50%;
  transform: rotate(-66deg);
  animation: cart-wala-fly-right 0.5s ease-out forwards;
  animation-delay: var(--pop);
}

/* When the fire reaches a pair, both crackers are flung off and fade. */
@keyframes cart-wala-fly-left {
  0% {
    transform: rotate(66deg);
    opacity: 1;
  }
  100% {
    transform: translate(-46px, 26px) rotate(170deg);
    opacity: 0;
  }
}

@keyframes cart-wala-fly-right {
  0% {
    transform: rotate(-66deg);
    opacity: 1;
  }
  100% {
    transform: translate(46px, 30px) rotate(-190deg);
    opacity: 0;
  }
}

/* Little flash as each pair pops. */
.cart-wala-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe066 35%, rgba(255, 170, 0, 0.5) 60%, transparent 72%);
  opacity: 0;
  animation: cart-wala-pop 0.3s ease-out forwards;
  animation-delay: var(--pop);
}

@keyframes cart-wala-pop {
  0% {
    opacity: 1;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* The fireball falling from the top to the bottom. */
.cart-wala-fire {
  position: absolute;
  left: 50%;
  top: 0;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff3b0 18%, #ffd23f 34%, rgba(255, 140, 0, 0.55) 52%, transparent 70%);
  animation: cart-wala-climb 1.4s linear forwards, cart-wala-flicker 0.08s steps(2) infinite;
}

@keyframes cart-wala-climb {
  to {
    top: 100%;
  }
}

@keyframes cart-wala-flicker {
  to {
    transform: scale(0.85);
  }
}

/* Yellow sparks spraying out of the fireball. */
.cart-wala-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 16px;
  margin: -8px 0 0 -1.5px;
  border-radius: 2px;
  background: #ffe066;
  box-shadow: 0 0 6px #ffb300;
  transform-origin: center;
  animation: cart-wala-spark 0.34s ease-out infinite;
  animation-delay: calc(var(--k) * -0.034s);
}

.cart-wala-spark:nth-child(3n) {
  background: #fff;
}

@keyframes cart-wala-spark {
  0% {
    transform: rotate(calc(var(--k) * 36deg)) translateY(0);
    opacity: 1;
  }
  100% {
    transform: rotate(calc(var(--k) * 36deg)) translateY(-54px);
    opacity: 0;
  }
}

/* Phones: the panel is full width, so its middle is the screen's middle. */
@media (max-width: 480px) {
  .cart-wala {
    right: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-popup.is-open.is-wala-open {
    animation: none;
  }
}

.cart-popup-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #eee;
}

.cart-popup-header h5 {
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-popup-header h5 .fa-shopping-cart {
  color: var(--brand-primary);
}

.cart-popup-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: #f5f5f5;
  color: #555;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-popup-close:hover {
  background: var(--brand-primary);
  color: #fff;
}

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

.cart-popup-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #f2f2f2;
}

.cart-popup-item img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: var(--brand-tint-soft);
  border-radius: 6px;
  padding: 4px;
  flex: 0 0 60px;
}

.cart-popup-item-info {
  flex: 1;
  min-width: 0;
}

.cart-popup-item-info h6 {
  font-size: 14px;
  margin-bottom: 4px;
}

.cart-popup-item-info p {
  margin: 0 0 8px;
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 13px;
}

.cart-popup-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 6px;
}

.cart-popup-qty button {
  width: 28px;
  height: 28px;
  border: 0;
  background: var(--brand-tint);
  font-size: 14px;
  cursor: pointer;
}

.cart-popup-qty button:hover {
  background: var(--brand-primary);
  color: #fff;
}

.cart-popup-qty span {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.cart-popup-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.cart-popup-item-total {
  font-weight: 700;
  font-size: 14px;
}

.cart-popup-remove {
  border: 0;
  background: transparent;
  color: #c0392b;
  cursor: pointer;
  font-size: 15px;
}

.cart-popup-remove:hover {
  color: #e74c3c;
}

.cart-popup-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px;
  color: #777;
  text-align: center;
}

.cart-popup-empty-btn {
  /* .primary-btn (main.css) assumes an <a> tag, which has no default
     border; this is a real <button>, so the browser's default button
     border needs resetting explicitly. */
  border: 0;
  margin-top: 8px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease,
    box-shadow 0.2s ease;
}

/* Cart popup: step 2, customer details form before the WhatsApp handoff */
.cart-popup-back {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  border: 0;
  background: #f5f5f5;
  color: #555;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-popup-back:hover {
  background: var(--brand-primary);
  color: #fff;
}

.cart-popup-details {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.cart-popup-details-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px;
}

.cart-popup-order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--brand-tint-soft);
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--brand-crimson);
  margin-bottom: 20px;
}

.cart-popup-details-body .form-group {
  margin-bottom: 16px;
}

.cart-popup-details-body label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #444;
}

.cart-popup-details-body textarea {
  resize: vertical;
}

.cart-popup-section-title {
  margin: 24px 0 14px;
  padding-top: 18px;
  border-top: 1px solid #eee;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--brand-dark);
}

.cart-popup-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cart-popup-empty-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(214, 4, 95, 0.3);
}

.cart-popup-empty-btn:active {
  transform: scale(0.95);
}

.cart-popup-empty .fa-shopping-cart {
  font-size: 34px;
  color: #ddd;
}

.cart-popup-footer {
  flex: 0 0 auto;
  padding: 18px 22px;
  border-top: 1px solid #eee;
}

.cart-popup-subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 14px;
}

.cart-popup-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}

.cart-popup-continue {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  color: #777;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cart-popup-continue:hover {
  color: var(--brand-primary);
}

.cart-popup-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: #888;
}

/* Coupon code, just above "Send Order via WhatsApp". */
.cart-coupon {
  margin-bottom: 12px;
}

.cart-coupon label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #444;
}

.cart-coupon-row {
  display: flex;
  gap: 8px;
}

.cart-coupon-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cart-coupon-row .form-control::placeholder {
  text-transform: none;
  letter-spacing: normal;
}

.cart-coupon-row .form-control.is-invalid {
  border-color: #d32f2f;
}

.cart-coupon-btn {
  flex: 0 0 auto;
  padding: 0 18px;
  border: 1px solid var(--brand-primary);
  border-radius: 4px;
  background: var(--brand-tint);
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cart-coupon-btn:hover:not(:disabled) {
  background: var(--brand-primary);
  color: #fff;
}

.cart-coupon-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.cart-coupon-btn.is-remove {
  border-color: #ccc;
  background: #fff;
  color: #777;
}

.cart-coupon-status {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
}

.cart-coupon-status:empty {
  display: none;
}

.cart-coupon-status .is-error {
  color: #d32f2f;
}

.cart-coupon-status .is-success {
  color: #2e7d32;
  font-weight: 600;
}

/* "Surprise gifts unlocked" popup: above the cart (1100-1102), below the
   cracker bursts (1200) so the crackers go off over it. */
.coupon-gift-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 8, 40, 0.6);
  animation: compliance-fade 0.25s ease-out;
}

.coupon-gift {
  width: 100%;
  max-width: 340px;
  padding: 28px 24px 22px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  animation: coupon-gift-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes coupon-gift-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.coupon-gift-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-pattern);
  color: var(--brand-gold);
  font-size: 34px;
  animation: coupon-gift-wiggle 1.2s ease-in-out 0.4s 2;
}

@keyframes coupon-gift-wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-12deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-6deg);
  }
  80% {
    transform: rotate(4deg);
  }
}

.coupon-gift h4 {
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-primary);
}

.coupon-gift-lead {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--brand-dark);
}

.coupon-gift-code {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border: 1px dashed var(--brand-primary);
  border-radius: 6px;
  background: var(--brand-tint-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-crimson);
}

.coupon-gift-note {
  margin-bottom: 18px;
  font-size: 13px;
  color: #777;
}

.coupon-gift-btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .coupon-gift,
  .coupon-gift-icon {
    animation: none;
  }
}

.cart-popup-sent {
  text-align: center;
}

.cart-popup-sent-icon {
  width: 64px;
  height: 64px;
  margin: 10px auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  color: var(--brand-primary);
  font-size: 28px;
}

.cart-popup-sent h6 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.cart-popup-sent p {
  font-size: 14px;
  line-height: 1.55;
  color: #555;
}

.cart-popup-sent .cart-popup-sent-order {
  font-weight: 600;
  color: var(--brand-crimson);
  margin-bottom: 16px;
}

.cart-popup-sent .cart-popup-sent-hint {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f7f7f7;
  font-size: 12.5px;
  color: #777;
  text-align: left;
}

@media (max-width: 480px) {
  .cart-popup {
    width: 100%;
    max-width: 100%;
  }
}

.floating-call {
  background: var(--brand-primary);
}

/* Footer */
.footer-area {
  height: auto;
  padding: 50px 0 0;
  background: var(--brand-dark);
  color: #ece6f7;
  display: block;
}

.footer-brand img {
  /* logo-round.png is trimmed to the badge with transparent corners, so no
     cream ring shows on the dark background. */
  height: 56px;
  width: 56px;
  display: block;
  margin-bottom: 16px;
}

/* Columns stack on narrow screens - keep each block clear of the next
   heading (the social icons were touching "Contact Us"). */
.footer-brand-col,
.footer-links-col {
  margin-bottom: 32px;
}

.footer-brand-col p {
  color: #b9aed6;
  font-size: 14px;
  margin-bottom: 16px;
}

.footer-links-col h6 {
  color: var(--brand-gold);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

.footer-links-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-col li {
  margin-bottom: 12px;
  font-size: 14px;
  color: #ece6f7;
}

.footer-links-col li i {
  width: 20px;
  color: var(--brand-gold);
  margin-right: 6px;
}

.footer-area a,
.footer-cart-link {
  color: #ece6f7;
  text-decoration: none;
}

.footer-area a:hover,
.footer-cart-link:hover {
  color: var(--brand-gold);
}

.footer-cart-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.footer-social-icon:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.footer-social-instagram {
  background: radial-gradient(
    circle at 30% 110%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}

.footer-social-facebook {
  background: #1877f2;
}

.footer-social-whatsapp {
  background: #25d366;
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0;
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
  color: #b9aed6;
}

.footer-area .footer-text {
  padding: 0;
}

/* Contact page */
.contact_area {
  padding-top: 60px;
}

@media (max-width: 767px) {
  .contact_area {
    padding-top: 40px;
  }
}

.contact-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.contact-card h5 {
  margin-bottom: 20px;
  font-weight: 700;
}

.contact-card-item {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}

.contact-card-item:last-child {
  margin-bottom: 0;
}

.contact-card-item i {
  width: 20px;
  padding-top: 3px;
  color: var(--brand-primary);
  font-size: 16px;
}

.contact-card-item h6 {
  margin-bottom: 4px;
  font-weight: 600;
}

.contact-card-item p {
  margin: 0;
  color: #777;
  font-size: 14px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease,
    box-shadow 0.2s ease;
}

.quick-action-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.quick-action-btn:active {
  transform: scale(0.97);
}

.quick-action-btn:last-child {
  margin-bottom: 0;
}

.quick-action-call {
  background: var(--brand-primary);
}

.quick-action-whatsapp {
  background: #25d366;
}

.quick-action-email {
  background: var(--brand-purple);
  color: #fff !important;
}

.contact-form-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.contact-form-card h5 {
  font-weight: 700;
  margin-bottom: 6px;
}

.contact-form-subtext {
  color: #777;
  font-size: 14px;
  margin-bottom: 24px;
}

.contact_form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #444;
}

.whatsapp-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  line-height: normal;
  background: #25d366 !important;
  border: 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease,
    box-shadow 0.2s ease;
}

.whatsapp-submit-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.whatsapp-submit-btn:active {
  transform: scale(0.97);
}

.contact-form-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: #777;
  background: #f0fbf4;
  border-radius: 6px;
  padding: 10px 14px;
}


/* Order page - opened from the "Order PDF" link in a WhatsApp order. */
.order-view {
  padding-top: 40px;
  background: #fafafa;
  min-height: 70vh;
}

.order-view-card {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  padding: 28px;
}

.order-view-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.order-view-header h4 {
  margin: 0 0 4px;
  font-weight: 700;
}

.order-view-header p {
  margin: 0;
  color: #888;
}

.order-view-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  line-height: normal;
}

.order-view-download:disabled {
  opacity: 0.75;
  cursor: wait;
}

.order-view-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px 0;
}

.order-view-parties h6 {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--brand-primary);
}

.order-view-parties p {
  margin: 0 0 2px;
  color: #333;
}

.order-view-address {
  white-space: pre-line;
}

.order-view-table-wrap {
  overflow-x: auto;
}

.order-view-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.order-view-table th,
.order-view-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}

.order-view-table thead th {
  background: var(--brand-dark);
  color: #fff;
  font-weight: 600;
}

.order-view-table th:nth-child(n + 3),
.order-view-table td:nth-child(n + 3) {
  text-align: right;
  white-space: nowrap;
}

.order-view-table tfoot td {
  background: var(--brand-tint);
  font-weight: 700;
  color: var(--brand-dark);
  text-align: right;
}

.order-view-invalid {
  text-align: center;
}

.order-view-invalid .fa {
  font-size: 40px;
  color: #ddd;
  margin-bottom: 12px;
}

@media (max-width: 575px) {
  .order-view {
    padding-top: 24px;
  }

  .order-view-card {
    padding: 18px;
  }

  .order-view-parties {
    grid-template-columns: 1fr;
  }

  .order-view-table th,
  .order-view-table td {
    padding: 8px;
  }
}

/* First-visit compliance notice: a bottom sheet over a dimmed, locked page.
   Sits above everything else (header 1000, cart bar 1050, cart 1100). */
.compliance-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px;
  background: rgba(20, 8, 40, 0.6);
  backdrop-filter: blur(3px);
  animation: compliance-fade 0.25s ease-out;
}

.compliance-sheet {
  width: 100%;
  max-width: 620px;
  padding: 26px 26px calc(22px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #fff;
  text-align: center;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  animation: compliance-rise 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.compliance-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  color: var(--brand-primary);
  font-size: 24px;
}

.compliance-sheet h5 {
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-dark);
}

.compliance-sheet p {
  margin: 0 auto 20px;
  max-width: 520px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #555;
}

.compliance-btn {
  width: 100%;
  max-width: 360px;
  height: 48px;
  line-height: normal;
  font-size: 15px;
  font-weight: 700;
}

@keyframes compliance-fade {
  from {
    opacity: 0;
  }
}

@keyframes compliance-rise {
  from {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compliance-backdrop,
  .compliance-sheet {
    animation: none;
  }
}

/* Keep the gap after the count - translation drops the leading space of
   the (translated) word that follows it. */
.category-count .notranslate {
  margin-right: 0.3em;
}

/* Language notch: a white water drop hanging from the bottom-right edge of
   the sticky header, like a phone's front-camera notch (LanguageNotch.jsx,
   rendered inside .sticky-wrapper so it moves with the header). Tapping it
   drops down the language card. */
.lang-notch {
  --notch-bg: #fff;
  position: absolute;
  top: 100%;
  right: 22px;
  z-index: 2;
  transition: transform 0.25s ease;
}

/* Tucked up behind the header while scrolling down. */
.lang-notch.is-retracted {
  transform: translateY(-100%);
}

/* The header sits above the notch so it can tuck in behind it. */
.sticky-wrapper .header_area {
  z-index: 3;
}

.lang-notch-btn {
  position: relative;
  width: 52px;
  height: 44px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 0 0 26px 26px;
  background: var(--notch-bg);
  color: var(--brand-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 8px 14px -6px rgba(29, 11, 63, 0.25);
  transform-origin: top center;
  animation: lang-notch-drip 4s ease-in-out infinite;
}

/* Concave "shoulders" so the drop flows out of the header's edge. */
.lang-notch-btn::before,
.lang-notch-btn::after {
  content: "";
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.lang-notch-btn::before {
  left: -14px;
  background: radial-gradient(circle at 0 100%, transparent 14px, var(--notch-bg) 14.5px);
}

.lang-notch-btn::after {
  right: -14px;
  background: radial-gradient(circle at 100% 100%, transparent 14px, var(--notch-bg) 14.5px);
}

.lang-notch-btn .fa-globe {
  font-size: 18px;
  line-height: 1;
}

.lang-notch-code {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--brand-crimson);
}

.lang-notch.is-open .lang-notch-btn {
  animation: none;
}

/* A gentle "drip" now and then so the notch gets noticed. */
@keyframes lang-notch-drip {
  0%,
  86%,
  100% {
    transform: scaleY(1);
  }
  92% {
    transform: scale(1.04, 1.14);
  }
}

.lang-notch-card {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  width: 230px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(29, 11, 63, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0.2s;
}

.lang-notch.is-open .lang-notch-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.lang-notch-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-crimson);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.lang-notch-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-notch-option {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #333;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lang-notch-option:hover {
  background: var(--brand-tint);
}

.lang-notch-option.is-active {
  background: var(--brand-tint);
  color: var(--brand-primary);
}

.lang-notch-native {
  font-size: 15px;
  font-weight: 600;
}

.lang-notch-english {
  font-size: 12px;
  color: #999;
}

.lang-notch-option .fa-check {
  margin-left: auto;
  color: var(--brand-primary);
}

@media (prefers-reduced-motion: reduce) {
  .lang-notch-btn {
    animation: none;
  }
}

/* Hide Google Translate's own banner, tooltips and hover highlights - the
   language bar is the only control. */
.goog-te-banner-frame,
iframe.skiptranslate,
.skiptranslate > iframe,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-yAWNEb-L7lbkb {
  display: none !important;
}

body {
  top: 0 !important;
}

.goog-text-highlight,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
  background: none !important;
  box-shadow: none !important;
}