/* ===========================================================
   Shree Nath Jewel Packers — Royal Design System (custom.css)
   Loads AFTER Bootstrap, so these rules take visual precedence.
   =========================================================== */

:root {
  --maroon: #8a6510;
  --maroon-dark: #6b4c0c;
  --maroon-light: #b08a2e;
  --gold: #c9a227;
  --gold-light: #e0c465;
  --gold-dark: #a8841a;
  --ivory: #faf5ec;
  --warm-white: #fffdf9;
  --charcoal: #1a1a1a;
  --blush: #e9b9c1;
  --sage: #8a9a72;
  --teal: #1f5c55;
}

/* ---------- Base ---------- */
html,
body {
  /* Nothing on this site scrolls sideways; this also stops off-canvas
     panels and edge-anchored dropdowns from creating a stray scrollbar. */
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: "Poppins", sans-serif;
  color: var(--charcoal);
  background-color: var(--warm-white);
}

h1, h2, h3, h4, .font-heading {
  font-family: "Playfair Display", serif;
}

a { color: var(--maroon); }
a:hover { color: var(--maroon-dark); }

::selection { background: var(--gold-light); color: var(--charcoal); }

/* ---------- Top utility bar ---------- */
.top-bar {
  background: var(--charcoal);
  color: var(--ivory);
  font-size: 0.82rem;
}
.top-bar a {
  color: var(--ivory);
  text-decoration: none;
}
.top-bar a:hover { color: var(--gold-light); }
.top-bar-peach {
  background: var(--ivory);
  color: var(--charcoal);
}
.top-bar-peach a { color: var(--charcoal); }
.top-bar-peach a:hover { color: #b39a5a; }
.top-bar-social-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 26, 0.06);
  color: var(--charcoal);
  font-size: 0.78rem;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.top-bar-social-icon:hover {
  background: linear-gradient(135deg, #e8d6a3, #cab273);
  color: var(--charcoal);
  transform: translateY(-2px);
}

/* ---------- Sticky header group (main navbar + departments bar) ---------- */
.header-sticky-group { z-index: 1030; }
@media (min-width: 992px) {
  /* Bootstrap's .navbar-collapse stays a flex item at the lg breakpoint
     even though every child inside it is d-lg-none — it was still eating
     ~79px of row width (its own default padding/gutter), which kept the
     ms-auto icon group from reaching the same right edge as the
     departments bar's "Shop" link below it. Zero it out entirely here. */
  #mainNavbar > .container > .navbar-collapse {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
  }
}

/* ---------- Header call-now display ---------- */
.header-call-now {
  padding-left: 0.9rem;
  border-left: 1px solid rgba(26, 26, 26, 0.12);
  white-space: nowrap;
}
.header-call-now-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(202, 178, 115, 0.18);
  color: #b39a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.header-call-now-label {
  font-size: 0.66rem;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.header-call-now-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.2s ease;
}
.header-call-now-number:hover { color: #b39a5a; }

/* ---------- Cart pill button ---------- */
.cart-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--charcoal);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  position: relative;
  box-shadow: 0 6px 16px rgba(26, 26, 26, 0.28);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cart-btn-pill:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(26, 26, 26, 0.38);
}
.cart-btn-pill:active { transform: translateY(0); }
.cart-btn-pill-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 50%;
  /* Gold on the now-black pill — the previous charcoal badge would have
     disappeared into the button. */
  background: linear-gradient(135deg, #e8d6a3, #cab273);
  color: var(--charcoal);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
@media (prefers-reduced-motion: reduce) {
  .cart-btn-pill, .top-bar-social-icon { transition: none !important; }
}

/* ---------- Departments navbar (3rd tier, icon nav on dark bg) ---------- */
.dept-navbar {
  background: var(--charcoal);
}
.dept-navbar-nav {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.dept-navbar-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.dept-navbar-link i { font-size: 0.85rem; }
.dept-navbar-link:hover {
  color: var(--charcoal);
  background: linear-gradient(135deg, #e8d6a3, #cab273);
}
.dept-navbar-departments {
  background: linear-gradient(135deg, #e8d6a3, #cab273);
  color: var(--charcoal);
  font-weight: 700;
}
.dept-navbar-departments:hover {
  background: linear-gradient(135deg, #dcc790, #b39a5a);
  color: var(--charcoal);
}
.dept-navbar-shop { background: rgba(255, 255, 255, 0.06); }
.dept-navbar .dropdown-toggle::after { margin-left: 0.45rem; }

/* ---------- Navbar ---------- */
.navbar-royal {
  background: var(--warm-white);
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
  transition: box-shadow 0.25s ease, padding 0.25s ease;
}
.navbar-royal.navbar-scrolled {
  box-shadow: 0 4px 18px rgba(26, 26, 26, 0.08);
}
.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: var(--maroon);
  font-size: 1.15rem;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 25%, #ffffff, var(--ivory) 65%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.35), 0 2px 6px rgba(138, 101, 16, 0.12);
}

/* ---------- Header polish: sticky-shrink ---------- */
.navbar-royal {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.navbar-royal.navbar-scrolled {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* ---------- Header search ---------- */
/* Keep a usable width, but stay shrinkable — a hard min-width here pushes
   the whole navbar past the viewport once the nav links need their space. */
.header-search.d-lg-block {
  flex: 1 1 220px;
  min-width: 0;
}
@media (min-width: 1200px) {
  .header-search.d-lg-block { flex-basis: 300px; }
}
@media (min-width: 1400px) {
  .header-search.d-lg-block { flex-basis: 380px; }
}
.header-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a8f8f;
  font-size: 0.9rem;
  pointer-events: none;
}
.header-search-input {
  padding: 0.7rem 1rem 0.7rem 44px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(138, 101, 16, 0.15);
  background: var(--ivory);
  font-size: 0.95rem;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, transform 0.25s ease;
}
.header-search-input::placeholder {
  color: #a2938c;
}
.header-search-input:hover {
  border-color: rgba(201, 162, 39, 0.5);
}
.header-search-input:focus {
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 0.22rem rgba(201, 162, 39, 0.2);
  transform: translateY(-1px);
}
.header-search-icon {
  font-size: 1rem;
  transition: color 0.25s ease;
}
.header-search-input:focus ~ .header-search-icon,
.header-search:focus-within .header-search-icon {
  color: var(--maroon);
}
.header-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(26, 26, 26, 0.16);
  z-index: 1050;
  overflow-y: auto;
  max-height: 360px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.header-search-results.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.header-search-result-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.header-search-result-item:hover {
  background: var(--ivory);
}
.header-search-result-item img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.header-search-viewall {
  display: block;
  text-align: center;
  padding: 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
  background: var(--ivory);
}
.header-search-viewall:hover {
  background: #f0e6d2;
}
.header-search-empty {
  padding: 0.9rem;
  font-size: 0.85rem;
  color: #8a8a8a;
  text-align: center;
}
.mobile-search-bar-wrap {
  background: var(--ivory);
  border-top: 1px solid rgba(138, 101, 16, 0.12);
  border-bottom: 1px solid rgba(138, 101, 16, 0.12);
}
.mobile-search-bar-wrap .container { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* ---------- Voice search (mobile header search bar) ----------
   Hidden by default (inline style="display:none" in the markup) — JS
   only reveals it after feature-detecting SpeechRecognition support, so
   a browser without it never shows a button that can't do anything. */
.header-search.has-voice .header-search-input { padding-right: 44px; }
.header-search.has-voice .header-search-placeholder { max-width: calc(100% - 96px); }
.header-search-voice-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #9a8f8f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.header-search-voice-btn:hover { background: rgba(201, 162, 39, 0.14); color: var(--gold-dark); }
.header-search-voice-btn.is-listening {
  color: #fff;
  background: var(--maroon);
  animation: voiceListeningPulse 1.3s ease-in-out infinite;
}
@keyframes voiceListeningPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 26, 26, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(139, 26, 26, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .header-search-voice-btn.is-listening { animation: none; }
}

/* ---------- Mobile top header row: Profile / Need Help / Wishlist ---------- */
.mobile-help-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  background: var(--gold-light);
  color: var(--charcoal);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.mobile-help-pill:hover, .mobile-help-pill:active { background: var(--gold); color: var(--charcoal); }
.mobile-help-pill i { font-size: 0.85rem; }
@media (max-width: 359.98px) {
  .mobile-help-pill span { display: none; }
  .mobile-help-pill { padding: 0.4rem; }
}

/* ---------- Animated rotating search placeholder ---------- */
.header-search-placeholder {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: #a2938c;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 60px);
  transition: opacity 0.2s ease;
}
.header-search-placeholder.is-hidden { opacity: 0; }
.header-search-placeholder-rotate {
  position: relative;
  height: 1.3em;
  display: inline-block;
  min-width: 160px;
}
.header-search-placeholder-rotate span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  color: #6b6b6b;
  font-weight: 400;
  white-space: nowrap;
}
.header-search-placeholder-rotate span.is-active {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .header-search-placeholder-rotate span { transition: none; }
}

/* ---------- Animated dropdowns (mega menu + any Bootstrap dropdown in header) ----------
   Only from lg up: there the menu is absolutely positioned, so keeping it
   display:block (and hiding it with opacity/visibility) lets it fade. Inside
   the collapsed mobile navbar the menu is position:static, where display:block
   would reserve its full height and push the links below it off-screen. */
@media (min-width: 992px) {
  .navbar-royal .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    pointer-events: none;
  }
  .navbar-royal .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}
/* Mobile: let Bootstrap show/hide it normally, with a light fade-in */
@media (max-width: 991.98px) {
  .navbar-royal .dropdown-menu.show {
    animation: navItemIn 0.28s ease both;
  }
}

/* ---------- Mega menu ---------- */
.mega-menu {
  /* Never wider than the viewport allows, and anchored so it can't spill
     off the right edge on mid-size laptops. */
  width: min(560px, calc(100vw - 32px));
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(26, 26, 26, 0.14);
  padding: 1.5rem !important;
}
@media (min-width: 992px) {
  .mega-menu {
    left: 50%;
    transform: translateX(-50%) translateY(10px);
  }
  .mega-menu.show {
    transform: translateX(-50%) translateY(0);
  }
}
.mega-menu-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.mega-menu-card:hover {
  transform: translateY(-3px);
}
.mega-menu-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.mega-menu-card-title {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--charcoal);
  margin-top: 0.5rem;
  font-size: 0.92rem;
}
.mega-menu-card-sub {
  font-size: 0.75rem;
  color: #8a8a8a;
}
@media (max-width: 991.98px) {
  .mega-menu {
    min-width: 0;
    box-shadow: none;
    padding: 0.5rem 0 !important;
  }
}
.brand-name {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: var(--maroon-dark);
  line-height: 1.1;
  font-size: 1.15rem;
}
.brand-sub {
  color: var(--gold-dark);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ---------- Nav links with animated gold underline ---------- */
.navbar-royal .nav-link {
  /* Serif nav to match the brand wordmark — reads more premium than the
     body sans, and pairs with the Playfair logotype above it. */
  font-family: "Playfair Display", serif;
  font-size: 1.02rem;
  letter-spacing: 0.015em;
  color: var(--charcoal);
  font-weight: 600;
  margin: 0 0.35rem;
  position: relative;
  transition: color 0.25s ease;
  white-space: nowrap;
}
.navbar-royal .nav-link::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-royal .nav-link:hover,
.navbar-royal .nav-link:focus,
.navbar-royal .nav-link.active {
  color: var(--maroon);
}
.navbar-royal .nav-link:hover::after,
.navbar-royal .nav-link:focus-visible::after,
.navbar-royal .nav-link.active::after {
  transform: scaleX(1);
}
/* The Shop caret shouldn't get an underline sliver of its own */
.navbar-royal .nav-link.dropdown-toggle::after {
  display: none;
}

/* ---------- Brand hover lift ---------- */
.navbar-brand {
  transition: transform 0.25s ease;
}
.navbar-brand:hover {
  transform: translateY(-1px);
}
.navbar-brand:hover .brand-mark {
  border-color: var(--gold-dark);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.5), 0 4px 12px rgba(138, 101, 16, 0.22);
}
.brand-mark {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.brand-logo {
  height: 54px;
  width: auto;
  display: block;
  transition: transform 0.25s ease;
}
.navbar-brand:hover .brand-logo {
  transform: scale(1.03);
}
.footer-brand-logo {
  height: 62px;
  width: auto;
  display: block;
}

/* ---------- Icon buttons ---------- */
.nav-icon-btn {
  color: var(--charcoal);
  position: relative;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  transition: color 0.22s ease, background-color 0.22s ease, transform 0.22s ease;
}
.nav-icon-btn:hover {
  color: var(--maroon);
  background-color: rgba(201, 162, 39, 0.14);
  transform: translateY(-2px);
}
.nav-icon-btn:active {
  transform: translateY(0) scale(0.94);
}
.nav-icon-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: var(--maroon);
  color: #fff;
  font-size: 0.62rem;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Pops when an item lands in the cart (toggled from script.js) */
.nav-icon-badge.badge-pop {
  animation: cartBadgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cartBadgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ---------- Animated hamburger (morphs into an X) ---------- */
.navbar-royal .navbar-toggler {
  border: 1px solid rgba(138, 101, 16, 0.2);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  position: relative;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.navbar-royal .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25);
}
.navbar-royal .navbar-toggler .navbar-toggler-icon {
  display: none;
}
.navbar-royal .navbar-toggler .toggler-bar {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--maroon);
  transform: translateX(-50%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-royal .navbar-toggler .toggler-bar:nth-child(1) { top: 14px; }
.navbar-royal .navbar-toggler .toggler-bar:nth-child(2) { top: 21px; }
.navbar-royal .navbar-toggler .toggler-bar:nth-child(3) { top: 28px; }
.navbar-royal .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}
.navbar-royal .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) scaleX(0.2);
}
.navbar-royal .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) {
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

/* ===========================================================
   Header responsive ladder + mobile drawer
   =========================================================== */

/* --- Mobile / tablet: the collapse becomes a card that slides down,
       with each row staggering in --- */
@media (max-width: 991.98px) {
  .navbar-royal .navbar-collapse {
    background: var(--warm-white);
    border-radius: 14px;
    margin-top: 0.85rem;
    padding: 1rem;
    box-shadow: 0 16px 36px rgba(26, 26, 26, 0.12);
    border: 1px solid rgba(201, 162, 39, 0.22);
    max-height: calc(100vh - 170px);
    overflow-y: auto;
  }
  .navbar-royal .navbar-collapse.show .nav-item,
  .navbar-royal .navbar-collapse.collapsing .nav-item {
    animation: navItemIn 0.36s ease both;
  }
  .navbar-royal .navbar-collapse.show .nav-item:nth-child(1) { animation-delay: 0.04s; }
  .navbar-royal .navbar-collapse.show .nav-item:nth-child(2) { animation-delay: 0.09s; }
  .navbar-royal .navbar-collapse.show .nav-item:nth-child(3) { animation-delay: 0.14s; }
  .navbar-royal .navbar-collapse.show .nav-item:nth-child(4) { animation-delay: 0.19s; }
  .navbar-royal .navbar-collapse.show .nav-item:nth-child(5) { animation-delay: 0.24s; }
  @keyframes navItemIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  /* Full-width tap targets on touch screens */
  .navbar-royal .nav-link {
    margin: 0;
    padding: 0.7rem 0.5rem;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .navbar-royal .nav-link:hover,
  .navbar-royal .nav-link:focus {
    background: rgba(201, 162, 39, 0.1);
  }
  .navbar-royal .nav-link::after { display: none; }
  /* Icon row: spread out, comfortable targets */
  .navbar-royal .navbar-collapse > .d-flex {
    justify-content: space-around;
    padding-top: 0.85rem;
    margin-top: 0.35rem;
    border-top: 1px solid rgba(138, 101, 16, 0.1);
  }
  .nav-icon-btn { width: 44px; height: 44px; font-size: 1.25rem; }
}

/* --- Tablet (768–991px): show a slimmer brand sub-line --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .brand-name { font-size: 1.05rem; }
}

/* --- Mid laptops (992–1399px): tighten the nav so the search keeps room --- */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .navbar-royal .nav-link {
    font-size: 0.95rem;
    margin: 0 0.15rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  .navbar-royal .navbar-nav { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .header-search.d-lg-block { margin-left: 1rem !important; margin-right: 1rem !important; }
  .navbar-royal .navbar-collapse > .d-flex { gap: 0.35rem !important; }
  .nav-icon-btn { width: 34px; height: 34px; font-size: 1.05rem; }
}

/* --- Phones (<= 575px) --- */
@media (max-width: 575.98px) {
  .top-bar { font-size: 0.72rem; }
  .top-bar .container { gap: 0.35rem 0.75rem; }
  .brand-mark { width: 40px; height: 40px; font-size: 1rem; }
  .brand-name { font-size: 0.95rem; }
  .brand-sub { font-size: 0.6rem; letter-spacing: 0.06em; }
  .brand-logo { height: 44px; }
  .navbar-royal { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .navbar-royal .navbar-collapse { max-height: calc(100vh - 140px); }
}

/* --- Very small phones (<= 360px): drop the brand sub-line --- */
@media (max-width: 360px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 0.9rem; }
  .brand-mark { width: 36px; height: 36px; font-size: 0.9rem; }
  .brand-logo { height: 38px; }
}

@media (max-width: 767.98px) {
  .footer-brand-logo { height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-royal .navbar-collapse.show .nav-item,
  .navbar-royal .nav-link::after,
  .nav-icon-badge.badge-pop {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Buttons ---------- */
.btn-royal {
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
  border: none;
  border-radius: 50px;
  color: var(--charcoal);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(202, 178, 115, 0.4);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease;
}
.btn-royal:hover {
  background: linear-gradient(90deg, #dcc790 0%, #b39a5a 50%, #a08548 100%);
  color: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(202, 178, 115, 0.5);
}
.btn-royal:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(202, 178, 115, 0.35);
}
.btn-royal-outline {
  background: linear-gradient(135deg, #ffffff 0%, #fdf6f2 100%);
  border: 1.5px solid #cab273;
  border-radius: 50px;
  color: #b39a5a;
  font-weight: 500;
  box-shadow: 0 3px 10px rgba(202, 178, 115, 0.15);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn-royal-outline:hover {
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
  border-color: #b39a5a;
  color: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(202, 178, 115, 0.4);
}
.btn-royal-outline:active {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .btn-royal, .btn-royal-outline { transition: background 0.25s ease !important; }
  .btn-royal:hover, .btn-royal-outline:hover, .btn-royal:active, .btn-royal-outline:active { transform: none !important; }
}
.btn-gold {
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
  border: none;
  border-radius: 50px;
  color: var(--charcoal);
  font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 8px 18px rgba(202, 178, 115, 0.4);
}
.btn-gold:hover {
  background: linear-gradient(90deg, #dcc790 0%, #b39a5a 50%, #a08548 100%);
  color: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(202, 178, 115, 0.5);
}
.btn-whatsapp {
  background: #25d366;
  color: #fff;
  border: none;
  font-weight: 500;
}
.btn-whatsapp:hover { background: #1eb956; color: #fff; }

/* ---------- Section styling ---------- */
.section-eyebrow {
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
}
.section-title {
  font-family: "Playfair Display", serif;
  color: var(--maroon-dark);
  font-weight: 700;
}
.section-divider {
  width: 64px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 0.75rem 0 1.25rem;
}
.section-divider.mx-auto { margin-left: auto; margin-right: auto; }
.bg-ivory { background-color: var(--ivory); }
.bg-maroon { background-color: var(--maroon); }
.bg-charcoal { background-color: var(--charcoal); }
.text-maroon { color: var(--maroon); }
.text-gold { color: var(--gold-dark); }

/* ---------- Profile quick-link rows (My Account page) ---------- */
.profile-quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background-color: var(--ivory);
  border-radius: 14px;
  color: var(--charcoal);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.profile-quick-link:hover { background-color: var(--gold-light); color: var(--charcoal); }
.profile-quick-link > span:first-child { display: flex; align-items: center; gap: 0.65rem; font-weight: 500; }
.profile-quick-link .bi-chevron-right { color: var(--gold-dark); transition: transform 0.2s ease; }
button.profile-quick-link { cursor: pointer; text-align: left; font: inherit; }
button.profile-quick-link[aria-expanded="true"] .bi-chevron-right { transform: rotate(90deg); }

/* ---------- Categories page (sidebar of categories + product grid) ---------- */
.categories-page-wrap {
  display: flex;
  align-items: stretch;
  min-height: 60vh;
}
.categories-sidebar {
  flex: 0 0 88px;
  width: 88px;
  background: var(--ivory);
  border-right: 1px solid rgba(138, 101, 16, 0.12);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.categories-sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0.35rem;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--charcoal);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.categories-sidebar-item.is-active {
  background: #fff;
  border-left-color: var(--gold);
  color: var(--gold-dark);
}
.categories-sidebar-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(138, 101, 16, 0.15);
  font-size: 1.1rem;
  color: var(--gold-dark);
}
.categories-sidebar-item.is-active .categories-sidebar-icon {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
}
.categories-sidebar-icon img { width: 100%; height: 100%; object-fit: cover; }
.categories-sidebar-icon-popular { background: var(--gold-light); }
.categories-content { flex: 1 1 auto; min-width: 0; padding: 1rem 0.75rem 2rem; }
@media (min-width: 768px) {
  .categories-sidebar { flex-basis: 170px; width: 170px; }
  .categories-sidebar-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    font-size: 0.85rem;
    padding: 0.75rem 1.1rem;
  }
  .categories-content { padding: 0.5rem 1.5rem 2rem; }
}

/* ---------- Order Details page ---------- */
.order-summary-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--ivory);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
}
.order-summary-card img,
.order-summary-card-img-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(138, 101, 16, 0.15);
  flex-shrink: 0;
}
.order-summary-card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--gold-dark);
}
.min-width-0 { min-width: 0; }

.order-status-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  background: #eaf7ee;
  border-radius: 14px;
}
.order-status-banner i { font-size: 1.5rem; color: #1e8a4c; }
.order-status-banner.is-terminal { background: #fdeaea; }
.order-status-banner.is-terminal i { color: var(--maroon); }

.order-stepper {
  display: flex;
  position: relative;
  padding-top: 0.25rem;
}
.order-stepper-track {
  position: absolute;
  top: 20px;
  /* Half of one step's width (100% / 5 steps / 2 = 10%) — centers the
     line on the first and last dots rather than spanning edge to edge. */
  left: 10%;
  right: 10%;
  height: 3px;
  background: #e5ded0;
  z-index: 0;
  border-radius: 2px;
  overflow: hidden;
}
.order-stepper-track-fill {
  height: 100%;
  background: var(--gold);
  transition: width 0.3s ease;
}
.order-stepper-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  gap: 0.3rem;
}
.order-stepper-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d8d0c0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #b0a68f;
  flex-shrink: 0;
}
.order-stepper-step.is-done .order-stepper-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.order-stepper-step.is-current .order-stepper-dot {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(139, 26, 26, 0.15);
}
.order-stepper-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.15;
}
.order-stepper-step.is-current .order-stepper-label { color: var(--maroon); }
.order-stepper-date {
  font-size: 0.58rem;
  color: #9a8f8f;
}

.order-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(138, 101, 16, 0.1);
  font-size: 0.85rem;
  color: #6b6b6b;
}
.order-info-row a {
  color: var(--maroon);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.order-info-row a:hover { text-decoration: underline; }

.order-address-card {
  padding: 1rem 1.1rem;
  background: var(--ivory);
  border-radius: 14px;
}

/* ---------- Hero (full-bleed edge-to-edge banner, ORRA-style) ---------- */
.hero-section {
  position: relative;
}
.hero-carousel #heroCarousel {
  position: relative;
}
.hero-banner {
  position: relative;
  width: 100%;
  /* Track the source photos' ~1.87:1 ratio so the crop stays gentle at any
     width, but stay inside sane min/max bounds. Per-breakpoint overrides
     below handle phones and very wide screens. */
  height: clamp(420px, 52vw, 720px);
  overflow: hidden;
  /* Dark base, not ivory — a light base flashes white through the
     cross-fade between slides. */
  background: var(--maroon-dark);
}
.hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Per-slide crop bias, tuned so the catalog title text baked into the top
   of each source photo is cropped away and only the product shows. */
.hero-banner-img.crop-a { object-position: center 75%; }
.hero-banner-img.crop-b { object-position: center 100%; }

/* Slide-specific: anchor to the top edge so a subject sitting high in the
   frame (e.g. the model's head on slide 1) is never clipped. No padding —
   padding leaves a visible band above the photo. */
.hero-banner.pad-top .hero-banner-img {
  object-position: center top;
}
.hero-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(26, 14, 16, 0.78) 0%,
    rgba(26, 14, 16, 0.5) 32%,
    rgba(26, 14, 16, 0.12) 58%,
    rgba(26, 14, 16, 0) 78%
  );
}
.hero-banner-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 680px;
  padding: 2rem max(24px, 6vw);
}
.hero-eyebrow {
  color: var(--gold-light);
}
.hero-title {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.16;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.hero-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.02rem;
  max-width: 540px;
}

/* Floating white "moti" sparkles — soft drifting pearls of light */
.hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 245, 220, 0.4) 55%, transparent 75%);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.95),
    0 0 28px rgba(255, 240, 200, 0.65),
    0 0 48px rgba(255, 235, 180, 0.35);
  opacity: 0;
  animation: heroSparkleDrift linear infinite;
}
@keyframes heroSparkleDrift {
  0%   { opacity: 0; transform: translate3d(0, 40px, 0) scale(0.5); }
  10%  { opacity: 1; }
  30%  { opacity: 0.75; transform: translate3d(10px, -60px, 0) scale(1.3); }
  50%  { opacity: 1; transform: translate3d(-6px, -120px, 0) scale(1); }
  75%  { opacity: 0.8; transform: translate3d(14px, -200px, 0) scale(1.45); }
  100% { opacity: 0; transform: translate3d(26px, -300px, 0) scale(0.8); }
}
.hero-sparkle:nth-child(1)  { width: 12px; height: 12px; left: 5%;  bottom: 4%;  animation-duration: 9s;    animation-delay: 0s; }
.hero-sparkle:nth-child(2)  { width: 7px;  height: 7px;  left: 13%; bottom: 18%; animation-duration: 7.5s;  animation-delay: 1.2s; }
.hero-sparkle:nth-child(3)  { width: 15px; height: 15px; left: 21%; bottom: 2%;  animation-duration: 11s;   animation-delay: 2.2s; }
.hero-sparkle:nth-child(4)  { width: 9px;  height: 9px;  left: 30%; bottom: 26%; animation-duration: 8.5s;  animation-delay: 0.6s; }
.hero-sparkle:nth-child(5)  { width: 11px; height: 11px; left: 38%; bottom: 9%;  animation-duration: 10s;   animation-delay: 3s; }
.hero-sparkle:nth-child(6)  { width: 6px;  height: 6px;  left: 47%; bottom: 22%; animation-duration: 6.5s;  animation-delay: 1.6s; }
.hero-sparkle:nth-child(7)  { width: 14px; height: 14px; left: 56%; bottom: 3%;  animation-duration: 12s;   animation-delay: 3.8s; }
.hero-sparkle:nth-child(8)  { width: 8px;  height: 8px;  left: 65%; bottom: 30%; animation-duration: 9s;    animation-delay: 1.9s; }
.hero-sparkle:nth-child(9)  { width: 11px; height: 11px; left: 74%; bottom: 12%; animation-duration: 10.5s; animation-delay: 0.3s; }
.hero-sparkle:nth-child(10) { width: 7px;  height: 7px;  left: 83%; bottom: 24%; animation-duration: 8s;    animation-delay: 2.6s; }
.hero-sparkle:nth-child(11) { width: 13px; height: 13px; left: 90%; bottom: 6%;  animation-duration: 11.5s; animation-delay: 0.9s; }
.hero-sparkle:nth-child(12) { width: 6px;  height: 6px;  left: 96%; bottom: 32%; animation-duration: 7s;    animation-delay: 4.2s; }

/* Entrance animations — replay each time a carousel item becomes active
   because Bootstrap toggles it between display:none and displayed. */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.carousel-item .hero-anim-1 { animation: heroFadeUp 0.6s ease both; animation-delay: 0.05s; }
.carousel-item .hero-anim-2 { animation: heroFadeUp 0.6s ease both; animation-delay: 0.15s; }
.carousel-item .hero-anim-3 { animation: heroFadeUp 0.6s ease both; animation-delay: 0.25s; }
.carousel-item .hero-anim-4 { animation: heroFadeUp 0.6s ease both; animation-delay: 0.35s; }
/* No fade/scale animation on the banner image itself — Bootstrap's
   carousel-fade already cross-fades slides, and a second opacity animation
   on top of it let the background wash through as a white haze. */

.hero-carousel .carousel-indicators {
  bottom: 16px;
  z-index: 3;
  margin: 0;
}
.hero-carousel .carousel-indicators [data-bs-target] {
  background-color: #fff;
  opacity: 0.5;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: opacity 0.2s ease, width 0.2s ease;
}
.hero-carousel .carousel-indicators .active {
  opacity: 1;
  width: 22px;
  border-radius: 4px;
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 2.75rem;
  height: 2.75rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(26, 26, 26, 0.18);
  opacity: 0.9;
  z-index: 3;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hero-carousel .carousel-control-prev { left: 18px; }
.hero-carousel .carousel-control-next { right: 18px; }
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
}
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  filter: invert(15%) sepia(30%) saturate(1500%) hue-rotate(310deg);
  width: 1.1rem;
  height: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item .hero-anim-1,
  .carousel-item .hero-anim-2,
  .carousel-item .hero-anim-3,
  .carousel-item .hero-anim-4,
  .hero-sparkle {
    animation: none !important;
  }
  .hero-sparkle { opacity: 0.35; }
}
/* ===========================================================
   Hero responsive ladder
   Phones stack the copy over a bottom-weighted scrim (a side scrim leaves
   no readable room at narrow widths); tablets and up keep the side scrim.
   =========================================================== */

/* --- Small phones (<= 400px) --- */
@media (max-width: 400px) {
  .hero-banner { height: 400px; }
  .hero-title { font-size: 1.45rem; }
  .hero-desc { font-size: 0.9rem; }
  .hero-banner-content .btn-lg {
    font-size: 0.95rem;
    padding: 0.55rem 1.2rem;
  }
}

/* --- Phones (<= 575px) --- */
@media (max-width: 575.98px) {
  .hero-banner { height: clamp(400px, 92vw, 470px); }
  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    width: 2.1rem;
    height: 2.1rem;
  }
  .hero-carousel .carousel-control-prev { left: 8px; }
  .hero-carousel .carousel-control-next { right: 8px; }
  .hero-carousel .carousel-control-prev-icon,
  .hero-carousel .carousel-control-next-icon { width: 0.85rem; height: 0.85rem; }
  /* Fewer sparkles on small screens — they crowd a narrow frame */
  .hero-sparkle:nth-child(n + 7) { display: none; }
}

/* --- Phones + small tablets (<= 767px) ---
   Copy is centred at the bottom over a bottom-weighted scrim, leaving the
   top half clear so the product itself stays visible. --- */
@media (max-width: 767.98px) {
  .hero-banner-scrim {
    background: linear-gradient(
      180deg,
      rgba(26, 14, 16, 0) 0%,
      rgba(26, 14, 16, 0.1) 32%,
      rgba(26, 14, 16, 0.55) 58%,
      rgba(26, 14, 16, 0.88) 82%,
      rgba(26, 14, 16, 0.94) 100%
    );
  }
  /* The products sit on the RIGHT of these wide banners with empty backdrop
     on the left, so a centred crop cuts them off on a narrow screen. Bias
     the crop right (and slightly up) to keep the product in frame. */
  .hero-banner-img,
  .hero-banner.pad-top .hero-banner-img {
    object-position: 78% 32%;
  }

  .hero-banner-content {
    max-width: 100%;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: 1.25rem 18px 3.5rem;
  }
  .hero-title {
    font-size: clamp(1.3rem, 5.8vw, 1.9rem);
    width: 100%;
    max-width: 100%;
    /* Long words must break rather than push the layout wider */
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .hero-desc {
    font-size: 0.92rem;
    width: 100%;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
  .hero-banner-content .btn-lg {
    align-self: center;
    width: auto;
    max-width: 100%;
    font-size: 0.95rem;
    padding: 0.6rem 1.5rem;
  }
}

/* --- Tablets (768–991px) --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-banner { height: clamp(440px, 58vw, 560px); }
  .hero-banner-content { max-width: 60%; padding: 2rem 32px; }
  .hero-banner-scrim {
    background: linear-gradient(
      90deg,
      rgba(26, 14, 16, 0.82) 0%,
      rgba(26, 14, 16, 0.6) 42%,
      rgba(26, 14, 16, 0.2) 70%,
      rgba(26, 14, 16, 0) 88%
    );
  }
  .hero-title { font-size: clamp(1.75rem, 4.2vw, 2.4rem); }
}

/* --- Small laptops (992–1199px) --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-banner-content { max-width: 58%; }
}

/* --- Very wide screens (>= 1600px): cap height, centre the copy column --- */
@media (min-width: 1600px) {
  .hero-banner { height: 720px; }
  .hero-banner-content {
    max-width: 760px;
    padding-left: max(24px, calc((100vw - 1500px) / 2));
  }
}

/* --- Short landscape viewports (e.g. phone held sideways) --- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-banner { height: 85vh; min-height: 300px; }
  .hero-banner-content { padding-top: 1rem; padding-bottom: 2rem; }
  .hero-title { font-size: 1.6rem; }
  .hero-desc { font-size: 0.9rem; }
}

/* ---------- Quick category icons (bridges hero -> Shop by Category) ----------
   Continuous auto-scrolling strip: the 4 icons are duplicated 4x in the
   markup (16 total) and the track animates by exactly -25% (one set) on a
   linear loop. Using 4 copies (not 2) matters here — the visible track is
   often wider than a single set, so with only 2 copies the loop point would
   momentarily run out of content and show blank background; 4 copies keeps
   at least 2 full sets of buffer ahead at all times. A mask-image fades the
   edges so icons scroll in/out softly instead of being hard-clipped by
   overflow:hidden. Paused on hover/focus for readability. */
.quick-category-icons {
  padding: 2rem 0 0.5rem;
  background: linear-gradient(180deg, #fbf2da 0%, var(--warm-white) 100%);
}
.quick-cat-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 64px, black calc(100% - 64px), transparent 100%);
}
.quick-cat-track-inner {
  display: flex;
  align-items: flex-start;
  width: max-content;
  gap: 3.5rem;
  animation: quickCatScroll 50s linear infinite;
}
.quick-cat-track:hover .quick-cat-track-inner,
.quick-cat-track-inner:focus-within {
  animation-play-state: paused;
}
@keyframes quickCatScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}
.quick-cat-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 190px;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--charcoal);
}
.quick-cat-badge {
  width: 160px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(26, 26, 26, 0.16));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
.quick-cat-icon:hover .quick-cat-badge {
  transform: translateY(-4px) scale(1.05);
  filter: drop-shadow(0 16px 26px rgba(201, 162, 39, 0.45));
}
.quick-cat-badge-tone-fix {
  /* This badge's source art renders in a brighter red than the rest of the
     set (maroon/black/pink) — darken + desaturate to pull it toward the
     brand's maroon family. A CSS filter on the whole image, not a real
     pixel edit, so it's an approximation. */
  filter: drop-shadow(0 6px 14px rgba(26, 26, 26, 0.16)) brightness(0.86) saturate(0.82) hue-rotate(-6deg);
}
.quick-cat-icon:hover .quick-cat-badge-tone-fix {
  transform: translateY(-4px) scale(1.05);
  filter: drop-shadow(0 16px 26px rgba(201, 162, 39, 0.45)) brightness(0.86) saturate(0.82) hue-rotate(-6deg);
}
.quick-cat-icon-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
  transition: color 0.2s ease;
}
.quick-cat-icon:hover .quick-cat-icon-label { color: var(--gold-dark); }

/* Full responsive ladder — the track's visible width is bounded by
   Bootstrap's .container max-width at each breakpoint (540/720/960/1140/
   1320px), so icon/badge size and scroll speed are tuned per tier instead
   of a single mobile/desktop split, which left 576-1199px screens showing
   full-size icons in a much narrower track. */
@media (max-width: 1199.98px) {
  .quick-cat-icon { width: 180px; }
  .quick-cat-badge { width: 150px; }
  .quick-cat-track-inner { gap: 3rem; animation-duration: 46s; }
}
@media (max-width: 991.98px) {
  .quick-cat-icon { width: 165px; }
  .quick-cat-badge { width: 135px; }
  .quick-cat-track-inner { gap: 2.5rem; animation-duration: 42s; }
}
@media (max-width: 767.98px) {
  .quick-cat-icon { width: 150px; }
  .quick-cat-badge { width: 125px; }
  .quick-cat-track-inner { gap: 2rem; animation-duration: 37s; }
}
@media (max-width: 575.98px) {
  .quick-cat-icon { width: 135px; }
  .quick-cat-badge { width: 112px; }
  .quick-cat-icon-label { font-size: 0.7rem; }
  .quick-cat-track-inner { gap: 2rem; animation-duration: 34s; }
  .quick-cat-track {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  }
}
@media (max-width: 360px) {
  .quick-cat-icon { width: 112px; }
  .quick-cat-badge { width: 90px; }
  .quick-cat-icon-label { font-size: 0.64rem; }
  .quick-cat-track-inner { gap: 1.5rem; animation-duration: 25s; }
  .quick-cat-track {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 26px, black calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 26px, black calc(100% - 26px), transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .quick-cat-track-inner { animation: none !important; }
  .quick-cat-badge, .quick-cat-icon-label { transition: none !important; }
}

/* ---------- Category cards ----------
   Source photos are inconsistent aspect ratios (some wide infographic-style
   with edge-to-edge title text) — object-fit:cover on a tall card cropped
   that text off. Cards now show the FULL image (object-fit:contain on a
   fixed-height, letterboxed media band) with the category name in a solid
   caption footer, so nothing is ever cut off regardless of source image. */
.category-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--warm-white);
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.08);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(138, 101, 16, 0.22);
}
.category-card::before {
  /* Gold rim that fades in on hover */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(201, 162, 39, 0.85);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.category-card:hover::before { opacity: 1; }
.category-card-media {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: linear-gradient(160deg, #fdf7ee 0%, #f6ead9 100%);
}
.category-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.6rem;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-card:hover .category-card-media img { transform: scale(1.06); }
.category-card-label {
  position: relative;
  z-index: 2;
  padding: 1rem 1.1rem 1.15rem;
  color: var(--charcoal);
  border-top: 1px solid rgba(201, 162, 39, 0.2);
}
.category-card-label h3 {
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
  color: var(--maroon-dark);
  transition: transform 0.3s ease;
}
.category-card:hover .category-card-label h3 { transform: translateX(3px); }
.category-card-label span {
  font-size: 0.78rem;
  color: #8a8a8a;
}
.category-card-arrow {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: var(--maroon-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-6px, 6px);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.category-card:hover .category-card-arrow {
  opacity: 1;
  transform: translate(0, 0);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
}
@media (max-width: 767.98px) {
  .category-card-media { height: 160px; }
  .category-card-label { padding: 0.8rem 0.9rem 0.95rem; }
  .category-card-label h3 { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .category-card, .category-card-media img, .category-card-label h3, .category-card-arrow {
    transition: none !important;
  }
}

/* ---------- Inner-page header band (Contact, FAQ, legal pages, etc.) ----------
   Static gradient — deliberately no ambient motion here (background
   animation was tried and explicitly rejected on the homepage sections). */
.page-header-band {
  background-image: linear-gradient(90deg, rgba(255, 224, 208, 0.95) 0%, rgba(255, 196, 168, 0.85) 35%, rgba(255, 196, 168, 0.45) 70%, rgba(255, 196, 168, 0.22) 100%), url("../images/image/header_image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2.5rem 0 3rem;
  color: var(--charcoal);
}
.page-header-band.page-header-band-compact {
  padding: 1.75rem 0 2.1rem;
}
.page-header-band .page-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(26, 26, 26, 0.35);
  margin-bottom: 0.9rem;
}
.page-header-band .page-breadcrumb .breadcrumb-item a {
  color: rgba(26, 26, 26, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.page-header-band .page-breadcrumb .breadcrumb-item a:hover { color: var(--charcoal); }
.page-header-band .page-breadcrumb .breadcrumb-item.active { color: var(--maroon-dark); }
.page-header-band .section-eyebrow { color: var(--maroon-dark); }
.page-header-title {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  margin: 0.25rem 0 0;
  color: var(--charcoal);
}
.page-header-band .section-divider { margin: 0.9rem 0 0; }
.page-header-band-compact .section-divider { display: none; }
.page-header-sub {
  color: rgba(26, 26, 26, 0.72);
  max-width: 640px;
  margin: 0.75rem 0 0;
}
.page-header-band-compact .page-header-sub {
  margin-top: 0.4rem;
  color: rgba(26, 26, 26, 0.6);
}
@media (max-width: 767.98px) {
  .page-header-band { padding: 2rem 0 2.4rem; }
}

/* ---------- Branded form focus states (replaces default Bootstrap blue) ---------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 0.2rem rgba(138, 101, 16, 0.15);
}

/* ---------- FAQ / policy accordion reskin ---------- */
.accordion-item {
  border-color: rgba(138, 101, 16, 0.1);
}
.accordion-button {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--charcoal);
}
.accordion-button:not(.collapsed) {
  background-color: rgba(201, 162, 39, 0.08);
  color: var(--maroon-dark);
  box-shadow: inset 0 -1px 0 rgba(138, 101, 16, 0.1);
}
.accordion-button:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 0.2rem rgba(138, 101, 16, 0.15);
}
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b4c0c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a6510'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ---------- Custom branding promo ---------- */
.branding-promo {
  background: linear-gradient(135deg, #e8d6a3 0%, #cab273 60%, #b39a5a 100%);
  border-radius: 18px;
  color: var(--charcoal);
  overflow: hidden;
}
.branding-promo p,
.branding-promo ul {
  color: rgba(26, 26, 26, 0.8) !important;
}
.branding-promo .btn-outline-light {
  border-color: rgba(26, 26, 26, 0.4);
  color: var(--charcoal);
}
.branding-promo .btn-outline-light:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: #fff;
}
.branding-promo .btn-gold {
  /* The promo background is now the same gold family as this button —
     a dark border/shadow keeps it from disappearing into the background. */
  border-color: rgba(26, 26, 26, 0.35);
  box-shadow: 0 8px 18px rgba(26, 26, 26, 0.25);
}
.branding-promo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  /* Anchored to the very top so nothing is ever trimmed off the hair/face —
     all the cropping room comes out of the empty saree fabric at the
     bottom instead, which is safe to lose. */
  object-position: center top;
}
@media (min-width: 992px) {
  /* height: 100% on the image can't reliably resolve against the row's
     stretch-computed height — depending on viewport width the browser can
     fall back to the photo's own portrait aspect ratio instead, which
     blows the whole row out to well over 900px. An explicit height here
     breaks that: both columns fill exactly this much, comfortably more
     than the text ever needs, and the photo crops to fit instead of
     dictating the row's size. */
  .branding-promo { height: 480px; }
  .branding-promo img { min-height: 0; }
  /* align-items: stretch is unreliable here — depending on the image's own
     intrinsic aspect ratio, browsers can size both columns to a much
     taller "hypothetical" cross size before stretch even applies, and the
     declared height never actually takes hold. Giving each column its own
     explicit height sidesteps the stretch calculation entirely instead of
     trusting it. 480px between 992-1199px because the heading wraps to two
     lines in that narrower range and needs the extra room. */
  .branding-promo > [class*="col-"] { height: 480px; min-height: 0; }
}
@media (min-width: 1400px) {
  /* From here the column is wide enough that the heading fits on one
     line (verified — it still wraps to two lines as late as 1300px), so
     the text needs noticeably less vertical room — a shorter, more
     compact card at these wider desktop widths. */
  .branding-promo,
  .branding-promo > [class*="col-"] {
    height: 400px;
  }
}
.branding-promo .badge-gold {
  background: var(--gold);
  color: var(--charcoal);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ---------- Product cards ---------- */
.product-card {
  border: 1px solid rgba(138, 101, 16, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.05);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(138, 101, 16, 0.16);
  border-color: rgba(201, 162, 39, 0.4);
}
.product-card .product-img-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(160deg, #fdf7ee 0%, #f6ead9 100%);
  position: relative;
}
.product-card .product-img-wrap::after {
  /* Soft sheen sweep on hover — subtle, not a gimmick */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  background-size: 220% 220%;
  background-position: 120% 0;
  transition: background-position 0.7s ease;
  pointer-events: none;
}
.product-card:hover .product-img-wrap::after { background-position: -20% 0; }
.product-card .product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.5rem;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .product-img-wrap img { transform: scale(1.08); }
.product-wishlist-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: var(--maroon-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(-4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.product-card:hover .product-wishlist-btn,
.product-wishlist-btn:focus-visible,
.product-wishlist-btn.is-active {
  /* Saved items keep the heart visible even without hover — otherwise
     the saved state would be invisible on touch devices. */
  opacity: 1;
  transform: translateY(0);
}
.product-wishlist-btn:hover {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.product-wishlist-btn.is-active {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}
.pdp-wishlist-btn.is-active {
  background: var(--maroon);
  color: #fff;
}
.pdp-link-btn.is-active { color: var(--maroon); font-weight: 600; }

.product-compare-btn {
  position: absolute;
  top: 0.6rem;
  right: 3.2rem;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: var(--maroon-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(-4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.product-card:hover .product-compare-btn,
.product-compare-btn:focus-visible,
.product-compare-btn.is-active {
  opacity: 1;
  transform: translateY(0);
}
.product-compare-btn:hover,
.product-compare-btn.is-active {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
}

/* ---------- Featured section background watermark icons ----------
   Static (no motion, per earlier feedback against ambient background
   animation) — very low opacity line icons scattered behind the grid. */
#featured { position: relative; overflow: hidden; }
#featured > .container { position: relative; z-index: 1; }
.featured-bg-icons {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.featured-bg-icon {
  position: absolute;
  color: #cab273;
  opacity: 0.1;
  font-size: 34px;
}
.fi-1 { top: 6%;  left: 4%;  font-size: 30px; transform: rotate(-12deg); }
.fi-2 { top: 18%; right: 6%; font-size: 26px; transform: rotate(10deg); }
.fi-3 { top: 48%; left: 2%;  font-size: 22px; transform: rotate(15deg); }
.fi-4 { bottom: 10%; right: 10%; font-size: 32px; transform: rotate(-8deg); }
.fi-5 { bottom: 22%; left: 9%;  font-size: 24px; transform: rotate(6deg); }
.fi-6 { top: 65%; right: 3%; font-size: 20px; transform: rotate(-15deg); }
@media (max-width: 767.98px) {
  .featured-bg-icon { font-size: 20px !important; }
}

/* ---------- Featured product badge sprite ----------
   featured-badges-sprite.png is a 4x2 grid (1536x1024, cells 384x512).
   The wrap is switched to the cell's 3:4 ratio so background-size:400% 200%
   scales both axes by the same factor — no stretching. */
.product-card .product-img-wrap.badge-sprite-wrap {
  aspect-ratio: 3 / 4;
  background: none;
}
.product-card .product-img-wrap .product-badge-sprite {
  position: absolute;
  width: 400%;
  height: 200%;
  max-width: none;
  padding: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .product-img-wrap .product-badge-sprite { transform: scale(1.06); }
.badge-pos-0 { left: 0%;    top: 0%;    transform-origin: 12.5% 25%; }
.badge-pos-1 { left: -100%; top: 0%;    transform-origin: 37.5% 25%; }
.badge-pos-2 { left: -200%; top: 0%;    transform-origin: 62.5% 25%; }
.badge-pos-3 { left: -300%; top: 0%;    transform-origin: 87.5% 25%; }
.badge-pos-4 { left: 0%;    top: -100%; transform-origin: 12.5% 75%; }
.badge-pos-5 { left: -100%; top: -100%; transform-origin: 37.5% 75%; }
.badge-pos-6 { left: -200%; top: -100%; transform-origin: 62.5% 75%; }
.badge-pos-7 { left: -300%; top: -100%; transform-origin: 87.5% 75%; }
@media (prefers-reduced-motion: reduce) {
  .product-card .product-img-wrap .product-badge-sprite { transition: none !important; }
}

.product-card .product-body { padding: 1rem 1.1rem 1.15rem; }
.product-card h3 a {
  transition: color 0.2s ease;
}
.product-card:hover h3 a { color: var(--maroon); }
.product-card .product-cat {
  font-size: 0.72rem;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-card .product-cat > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.product-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0.15rem 0 0.5rem;
  font-family: "Poppins", sans-serif;
}
.product-price .price-amount {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--maroon-dark);
}
.product-price .price-unit {
  font-size: 0.72rem;
  font-weight: 500;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.product-card .btn-royal .bi-arrow-right {
  display: inline-block;
  transition: transform 0.25s ease;
}
.product-card .btn-royal:hover .bi-arrow-right {
  transform: translateX(3px);
}
@media (max-width: 767.98px) {
  /* Narrow 2-column mobile cards were squeezing "Buy Now" into two lines
     next to the circular cart-add icon — tighten both so it stays on one line. */
  .product-card .d-flex.gap-2 { gap: 0.4rem; }
  .product-card .btn-royal.btn-sm {
    white-space: nowrap;
    font-size: 0.74rem;
    padding: 0.42rem 0.5rem;
  }
  .product-card .add-to-cart-btn.px-3 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}
@media (max-width: 359.98px) {
  .product-card .btn-royal.btn-sm { font-size: 0.68rem; padding: 0.4rem 0.4rem; }
}

/* ---------- Shop Page: sidebar filters + toolbar ---------- */
.shop-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.shop-filter-widget {
  background: #fff;
  border: 1px solid rgba(138, 101, 16, 0.1);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
}
.shop-filter-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.shop-filter-list { list-style: none; margin: 0; padding: 0; }
.shop-filter-item + .shop-filter-item { margin-top: 0.35rem; }
.shop-filter-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  color: #6a6a6a;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.shop-filter-item a:hover { background: rgba(202, 178, 115, 0.1); color: var(--charcoal); }
.shop-filter-item.is-active a {
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
  color: var(--charcoal);
  font-weight: 600;
}
.shop-filter-count {
  font-size: 0.72rem;
  color: inherit;
  opacity: 0.75;
}
.shop-price-filter .form-control { border-radius: 8px; border: 1.5px solid rgba(26, 26, 26, 0.12); }
.shop-price-filter .form-control:focus { border-color: #cab273; box-shadow: 0 0 0 3px rgba(202, 178, 115, 0.18); }

/* Poster shown whole (no crop, no overlay) — it already carries its own
   headline, feature icons and product strip. */
.shop-sidebar-poster {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(26, 26, 26, 0.12);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.shop-sidebar-poster img { width: 100%; height: auto; display: block; }
.shop-sidebar-poster:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(26, 26, 26, 0.2);
}
@media (min-width: 992px) {
  /* Below lg the sidebar is full-width; cap the poster so it doesn't
     dominate the page above the product grid. */
  .shop-sidebar-poster { max-width: none; }
}
@media (max-width: 991.98px) {
  .shop-sidebar-poster { max-width: 380px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-sidebar-poster { transition: none; }
}
/* ---------- Promo poster tile inside the product grid ----------
   Injected by shop.js render() as an extra grid cell, on the last page
   only, in the same row as the last products. The column doesn't stretch
   to match the product cards' height (a plain product-card row would pull
   every column to the tallest one via the row's default align-items:
   stretch) — a promo poster is exactly the place NOT to crop to fit, so it
   stays at its own natural (whole, uncropped) height and top-aligns with
   the product photos above it. */
.shop-grid-poster-col { align-self: flex-start; }
.shop-grid-poster-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.05);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.shop-grid-poster-card img { width: 100%; height: auto; display: block; }
.shop-grid-poster-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(138, 101, 16, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .shop-grid-poster-card { transition: none; }
}

/* ---------- Animated LED-box showcase ----------
   An 8-frame sprite strip (box-sequence.webp, 8 x 320px frames). Two
   stacked layers cross-fade between consecutive frames, so the lid
   dissolves open rather than snapping — with the fades eased (out while
   opening, in while closing) and long holds on the open frames so the
   jewellery is readable. Sequencing lives in script.js. */
.led-box-anim-card {
  display: block;
  margin-top: 1.25rem;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.led-box-anim-card:hover { transform: translateY(-4px); }
/* Used outside the shop sidebar (e.g. beside the testimonials block), where
   the column is much wider than the box should ever get. */
.led-box-anim-card-inline {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
.led-box-anim-stage {
  position: relative;
  display: block;
  aspect-ratio: 320 / 407;
  /* Barely-there lift while the box is open — reads as the box presenting
     itself, not as a separate "zoom" effect. */
  animation: ledBoxLift 6.4s ease-in-out infinite;
}

.led-box-layer {
  position: absolute;
  inset: 0;
  background-image: url("../images/image/box-sequence.png");
  background-image: image-set(
    url("../images/image/box-sequence.webp") type("image/webp"),
    url("../images/image/box-sequence.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: 800% 100%;
  opacity: 0;
  animation-duration: 6.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Each layer is pinned to one frame and fades during its own window; the
   windows overlap by ~2.5% so consecutive frames dissolve into each other.
   Open frames (4 and 5) hold longest so the jewellery is readable. */
.led-box-layer:nth-child(1) { background-position-x: 0%;       animation-name: ledFrame1; }
.led-box-layer:nth-child(2) { background-position-x: 14.2857%; animation-name: ledFrame2; }
.led-box-layer:nth-child(3) { background-position-x: 28.5714%; animation-name: ledFrame3; }
.led-box-layer:nth-child(4) { background-position-x: 42.8571%; animation-name: ledFrame4; }
.led-box-layer:nth-child(5) { background-position-x: 57.1429%; animation-name: ledFrame5; }
.led-box-layer:nth-child(6) { background-position-x: 71.4286%; animation-name: ledFrame6; }
.led-box-layer:nth-child(7) { background-position-x: 85.7143%; animation-name: ledFrame7; }
.led-box-layer:nth-child(8) { background-position-x: 100%;     animation-name: ledFrame8; }

@keyframes ledFrame1 { 0%, 20% { opacity: 1; } 22.5%, 97.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ledFrame2 { 0%, 20% { opacity: 0; } 22.5%, 24% { opacity: 1; } 26.5%, 100% { opacity: 0; } }
@keyframes ledFrame3 { 0%, 24% { opacity: 0; } 26.5%, 28% { opacity: 1; } 30.5%, 100% { opacity: 0; } }
@keyframes ledFrame4 { 0%, 28% { opacity: 0; } 30.5%, 46% { opacity: 1; } 48.5%, 100% { opacity: 0; } }
@keyframes ledFrame5 { 0%, 46% { opacity: 0; } 48.5%, 68% { opacity: 1; } 70.5%, 100% { opacity: 0; } }
@keyframes ledFrame6 { 0%, 68% { opacity: 0; } 70.5%, 72% { opacity: 1; } 74.5%, 100% { opacity: 0; } }
@keyframes ledFrame7 { 0%, 72% { opacity: 0; } 74.5%, 76% { opacity: 1; } 78.5%, 100% { opacity: 0; } }
@keyframes ledFrame8 { 0%, 76% { opacity: 0; } 78.5%, 97.5% { opacity: 1; } 100% { opacity: 0; } }

@keyframes ledBoxLift {
  0%, 26% { transform: scale(0.985); }
  32%, 68% { transform: scale(1); }
  76%, 100% { transform: scale(0.985); }
}

/* Warm bloom from the lid lamp, ramped in only while the box is open. */
.led-box-glow {
  position: absolute;
  left: 50%;
  top: 26%;
  width: 62%;
  height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 216, 156, 0.55) 0%, rgba(255, 198, 122, 0.22) 45%, rgba(255, 198, 122, 0) 72%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  animation: ledBoxGlow 6.4s ease-in-out infinite;
}
@keyframes ledBoxGlow {
  0%, 27% { opacity: 0; }
  34%, 66% { opacity: 1; }
  74%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hold the fully-open frame — the one that actually shows the product. */
  .led-box-anim-card, .led-box-anim-stage, .led-box-layer, .led-box-glow {
    animation: none !important;
    transition: none !important;
  }
  .led-box-anim-stage { transform: none; }
  .led-box-layer { opacity: 0; }
  .led-box-layer:nth-child(4) { opacity: 1; }
  .led-box-glow { opacity: 1; }
}
.shop-toolbar { padding-bottom: 1rem; border-bottom: 1px solid rgba(26, 26, 26, 0.08); }
.shop-view-toggle { display: inline-flex; border: 1.5px solid rgba(26, 26, 26, 0.12); border-radius: 10px; overflow: hidden; }
.shop-view-btn {
  width: 36px;
  height: 34px;
  border: none;
  background: #fff;
  color: #9a9a9a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.shop-view-btn + .shop-view-btn { border-left: 1.5px solid rgba(26, 26, 26, 0.12); }
.shop-view-btn.is-active { background: var(--charcoal); color: #fff; }
.shop-view-btn:hover:not(.is-active) { background: rgba(202, 178, 115, 0.12); color: var(--charcoal); }

.shop-grid-list .product-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.shop-grid-list .product-card .product-img-wrap {
  width: 240px;
  max-width: 42%;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
.shop-grid-list .product-card .product-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 575.98px) {
  .shop-grid-list .product-card { flex-direction: column; }
  .shop-grid-list .product-card .product-img-wrap { width: 100%; max-width: 100%; }
}

.shop-page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  border: 1.5px solid rgba(26, 26, 26, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--charcoal);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.shop-page-btn:hover:not(:disabled):not(.is-active) { border-color: #cab273; background: rgba(202, 178, 115, 0.1); }
.shop-page-btn.is-active {
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
  border-color: #cab273;
}
.shop-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Out-of-stock state — shared by every grid card (shop/categories/related/wishlist) */
.product-card .product-img-wrap.is-out-of-stock img {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.product-out-of-stock-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(26, 26, 26, 0.85);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}
.product-card .add-to-cart-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Product Detail Page — stock status line under the price */
.pdp-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
}
.pdp-stock-status.is-in-stock { color: #1e7e34; }
.pdp-stock-status.is-low-stock { color: #b8860b; }
.pdp-stock-status.is-out-of-stock { color: #c0392b; }

.badge-led {
  box-shadow: 0 0 0 0 rgba(202, 178, 115, 0.55);
  animation: ledBadgePulse 2.4s ease-in-out infinite;
}
@keyframes ledBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202, 178, 115, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(202, 178, 115, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-led { animation: none !important; }
  .product-wishlist-btn, .product-card .btn-royal .bi-arrow-right {
    transition: none !important;
  }
}
/* Portrait model shot beside a short text column — capped and cropped so it
   doesn't tower over the copy it sits next to. */
.brand-feature-img {
  max-height: 460px;
  object-fit: cover;
  object-position: center 22%;
}

/* ===========================================================
   MOTI JADAU — pearl-set frame for the Custom Branding photo
   -----------------------------------------------------------
   Four gold-collared corner pearls with a strand of small
   pearls strung between them, and ONE warm light that travels
   the strand clockwise every 15s, then rests.

   Nothing is ever painted over the photograph: the whole
   ornament lives in the <figure>'s own padding, so the gold
   foil shop name on the lid is untouched, and horizontal
   overflow is structurally impossible rather than merely
   unlikely.

   Pure CSS. No JS, no libraries, no new image assets.
   =========================================================== */

.moti-frame {
  /* ---- tunables ----
     Every clamp is deliberately narrow (the bead only ever moves between
     5.5px and 7.5px), so the vw basis never actually misbehaves — and the
     one invariant that matters, pad >= gap + pearl/2 + shadow, holds at
     BOTH ends of every clamp. Do not widen one of these without redoing
     that sum, or a bead will hang outside the figure. */
  --mf-pad: clamp(12px, 3vw, 20px);      /* gutter the ornament lives in     */
  --mf-gap: clamp(6px, 1.4vw, 9px);      /* photo edge -> thread centre-line */
  --mf-pearl: clamp(5.5px, 1.4vw, 7.5px);/* strand bead diameter             */
  --mf-step: calc(var(--mf-pearl) + clamp(2.5px, 0.7vw, 3.5px)); /* bead pitch */
  --mf-stud: calc(var(--mf-pearl) * 2.1);/* corner pearl diameter            */
  /* MUST match the radius of the <img>. Bootstrap 5.3 .rounded-4
     = var(--bs-border-radius-xl) = 1rem. */
  --mf-photo-radius: 1rem;
  /* A curve offset outwards by g has radius R+g — that is why the thread
     tracks the photo's corners exactly instead of drifting off them. */
  --mf-ring-radius: calc(var(--mf-photo-radius) + var(--mf-gap));
  --mf-loop: 15s;                        /* one lap of the light, incl. rest */

  position: relative;
  margin: 0;
  /* Everything decorative is drawn inside this padding and never outside
     the figure's own box — that is what makes overflow at 375px
     structurally impossible rather than merely unlikely.
     Do NOT add max-width:100% here: it caps the border box and silently
     cancels the negative margin below, so the photo quietly loses 40px
     again. A block-level figure can't overflow its column without one. */
  padding: var(--mf-pad);
}

/* NOTE for anyone tempted to "improve" this with container query units:
   don't. `container-type: inline-size` + a cqi value inside this element's
   own padding is a cycle, and the browser silently resolves it against the
   VIEWPORT instead — measured 13.5px (= 3.6vw) where the column maths said
   13px. The clamps above are tight enough that vw and cqi land on the same
   pixel at every real breakpoint anyway. */

/* From lg up the Bootstrap row already reserves a 48px gutter and the
   container its own 12px padding, so the frame can hang in that space and
   the photograph keeps its full width — no loss of scale on the printed
   name (measured: 534px at 1200px, identical to before this frame). Below
   lg there is only ~12px of slack, so the frame politely pays for itself
   out of the photo instead. */
@media (min-width: 992px) {
  .moti-frame { margin-inline: calc(var(--mf-pad) * -1); }
}

/* display:block kills the inline-box descender gap; without it the bottom
   run of beads hangs ~4px low and the whole frame looks crooked. */
.moti-frame .brand-feature-img {
  display: block;
  position: relative;
  box-shadow: 0 18px 38px -26px rgba(26, 26, 26, 0.5);
}

/* ---------- the thread ----------
   A hairline rounded rect offset --mf-gap outside the photo. Everything
   else is positioned against it. */
.moti-set {
  position: absolute;
  inset: calc(var(--mf-pad) - var(--mf-gap));
  border: 1px solid rgba(201, 162, 39, 0.30);   /* var(--gold) @ 30% */
  border-radius: var(--mf-ring-radius);
  pointer-events: none;        /* decorative: never eats a click or a drag */
  z-index: 1;
}

/* ---------- nacre ----------
   Shared by the strand beads and the corner pearls. --d is the pearl's
   diameter in whichever context it is used, so one recipe serves a 7px
   bead and a 16px stud at the correct proportions.

   Note layer 4: its gradient CENTRE is off-centre (36% 30%) while the
   silhouette (mask / border-radius) is dead centre. An off-centre falloff
   inside a centred circle is what turns a flat disc into a lit sphere.
   Its LAST stop is lighter than the one before it — that is reflected rim
   light, and without it a pearl reads as a dark-edged plastic dot. */
.moti-run,
.moti-stud {
  background-image:
    /* 1. specular pin-point, up-left of centre */
    radial-gradient(circle calc(var(--d) * 0.20) at 33% 27%,
      #ffffff 0%, rgba(255, 255, 255, 0.88) 32%, rgba(255, 255, 255, 0) 100%),
    /* 2. cool nacre sheen wrapping the highlight */
    radial-gradient(circle calc(var(--d) * 0.55) at 27% 21%,
      rgba(205, 222, 241, 0.50) 0%, rgba(205, 222, 241, 0) 100%),
    /* 3. warm bounce coming back off the gold thread, lower-right */
    radial-gradient(circle calc(var(--d) * 0.50) at 71% 79%,
      rgba(232, 214, 163, 0.85) 0%, rgba(201, 162, 39, 0.20) 46%,
      rgba(201, 162, 39, 0) 100%),
    /* 4. body: cool white -> cream -> warm terminator -> rim light */
    radial-gradient(circle calc(var(--d) * 0.75) at 36% 30%,
      #fffefb 0%, #f7f1e3 24%, #ece0c6 46%, #d3c093 68%,
      #ab9260 88%, #c8b489 100%);
}

/* ---------- the strand ---------- */
.moti-run {
  --d: var(--mf-pearl);
  position: absolute;
  display: none;            /* opt-in — see the @supports below */
  overflow: hidden;         /* keeps the travelling light on its own run */
  isolation: isolate;       /* the light blends with the beads, not the page */

  background-size: var(--mf-step) var(--mf-step);

  /* The bead's true silhouette: a centred circle with a sub-pixel feather
     so the edge stays smooth at any DPR. Same tile size as the paint, so
     paint and silhouette can never drift apart. */
  -webkit-mask-image: radial-gradient(circle calc(var(--mf-pearl) / 2) at 50% 50%,
      #000 calc(100% - 0.8px), transparent 100%);
          mask-image: radial-gradient(circle calc(var(--mf-pearl) / 2) at 50% 50%,
      #000 calc(100% - 0.8px), transparent 100%);
  -webkit-mask-size: var(--mf-step) var(--mf-step);
          mask-size: var(--mf-step) var(--mf-step);

  /* drop-shadow is applied AFTER the mask, so each bead casts its own
     little shadow and lifts off the ivory. A box-shadow here would shadow
     the strip instead of the beads. */
  filter: drop-shadow(0 1px 1.5px rgba(26, 26, 26, 0.20));
}

/* Without mask support the tiles would paint as solid rectangles, so the
   beads are opt-in. Thread + corner pearls still render everywhere, which
   still looks deliberate. */
@supports (mask-image: radial-gradient(#000, #000)) or
          (-webkit-mask-image: radial-gradient(#000, #000)) {
  .moti-run { display: block; }
}

/* `space` is the whole trick for even spacing: it fits a WHOLE number of
   beads into a run of any length and shares the remainder out between
   them, so a bead is never sliced in half at the end of a side and the
   strand needs no per-breakpoint tuning. */
.moti-run--top,
.moti-run--bottom {
  left: var(--mf-ring-radius);    /* stop where the corner arc begins */
  right: var(--mf-ring-radius);
  height: var(--mf-step);
  background-repeat: space no-repeat;
  -webkit-mask-repeat: space no-repeat;
          mask-repeat: space no-repeat;
}
.moti-run--top    { top: calc(var(--mf-step) / -2); }
.moti-run--bottom { bottom: calc(var(--mf-step) / -2); }

.moti-run--left,
.moti-run--right {
  top: var(--mf-ring-radius);
  bottom: var(--mf-ring-radius);
  width: var(--mf-step);
  background-repeat: no-repeat space;
  -webkit-mask-repeat: no-repeat space;
          mask-repeat: no-repeat space;
}
.moti-run--left  { left: calc(var(--mf-step) / -2); }
.moti-run--right { right: calc(var(--mf-step) / -2); }

/* ---------- the travelling light ----------
   One soft band per run. Because the PARENT is masked to circles, the band
   is only ever visible ON the beads — it reads as light running bead to
   bead, roughly three beads lit at a time, not as a rectangle sliding past.

   The band is warm gold on `multiply`, NOT white on `screen`: a screen
   blend can only lighten, and a pearl on this ivory page is already
   near-white, so a white glint would be invisible. Multiplying a warm gold
   instead shifts the HUE — the pearls briefly catch the gold, the way
   nacre does under a warm gallery lamp. Only transform animates. */
.moti-run::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  animation: var(--mf-loop) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.moti-run--top::after,
.moti-run--bottom::after {
  background: linear-gradient(90deg,
    rgba(224, 196, 101, 0) 38%, rgba(224, 196, 101, 0.55) 50%,
    rgba(224, 196, 101, 0) 62%);          /* var(--gold-light) */
}
.moti-run--left::after,
.moti-run--right::after {
  background: linear-gradient(180deg,
    rgba(224, 196, 101, 0) 38%, rgba(224, 196, 101, 0.55) 50%,
    rgba(224, 196, 101, 0) 62%);
}

/* Each run crosses during its own 18% of the loop and then parks
   off-screen. The negative delays phase the four runs so the light travels
   clockwise — top, right, bottom, left — and the last 22% of the loop
   (~3.3s) is a deliberate REST with nothing moving at all. That pause is
   what keeps it jewellery rather than a loading spinner. */
.moti-run--top::after    { animation-name: mf-sweep-right; animation-delay: 0s; }
.moti-run--right::after  { animation-name: mf-sweep-down;  animation-delay: calc(var(--mf-loop) * -0.80); }
.moti-run--bottom::after { animation-name: mf-sweep-left;  animation-delay: calc(var(--mf-loop) * -0.60); }
.moti-run--left::after   { animation-name: mf-sweep-up;    animation-delay: calc(var(--mf-loop) * -0.40); }

@keyframes mf-sweep-right { 0% { transform: translate3d(-125%, 0, 0); } 18%, 100% { transform: translate3d(125%, 0, 0); } }
@keyframes mf-sweep-left  { 0% { transform: translate3d(125%, 0, 0); }  18%, 100% { transform: translate3d(-125%, 0, 0); } }
@keyframes mf-sweep-down  { 0% { transform: translate3d(0, -125%, 0); } 18%, 100% { transform: translate3d(0, 125%, 0); } }
@keyframes mf-sweep-up    { 0% { transform: translate3d(0, 125%, 0); }  18%, 100% { transform: translate3d(0, -125%, 0); } }

/* ---------- the corner pearls ----------
   A larger pearl set in a thin gold collar, sitting exactly on the 45°
   point of each corner arc — 0.2929 x radius in from the corner is where a
   rounded rect's curve crosses its diagonal. They anchor the composition,
   cover the seam where two straight runs would otherwise meet a curve, and
   read unmistakably as SET STONES rather than page decoration.
   No rotation needed: a sphere looks the same from every angle. */
.moti-stud {
  --d: var(--mf-stud);
  position: absolute;
  width: var(--mf-stud);
  height: var(--mf-stud);
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 1.5px rgba(168, 132, 26, 0.45),   /* var(--gold-dark): the collar */
    inset -1px -1.5px 2.5px rgba(107, 76, 12, 0.22),  /* var(--maroon-dark) */
    0 1px 2px rgba(26, 26, 26, 0.20);       /* contact shadow */
}
.moti-stud--tl { top: calc(var(--mf-ring-radius) * 0.2929); left: calc(var(--mf-ring-radius) * 0.2929); }
.moti-stud--tr { top: calc(var(--mf-ring-radius) * 0.2929); right: calc(var(--mf-ring-radius) * 0.2929); transform: translate(50%, -50%); }
.moti-stud--br { bottom: calc(var(--mf-ring-radius) * 0.2929); right: calc(var(--mf-ring-radius) * 0.2929); transform: translate(50%, 50%); }
.moti-stud--bl { bottom: calc(var(--mf-ring-radius) * 0.2929); left: calc(var(--mf-ring-radius) * 0.2929); transform: translate(-50%, 50%); }

/* The same warm light briefly washing the corner pearl at the instant it
   hands over from one run to the next — that hand-off is what sells it as
   ONE light travelling a real strand rather than four separate effects.
   overflow:hidden keeps the scaling wash inside the pearl, so it can never
   become the page-level glow the client already rejected. (The collar is an
   outer box-shadow, which overflow does not clip.) */
.moti-stud::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(circle at 42% 38%,
    rgba(224, 196, 101, 0.85) 0%, rgba(201, 162, 39, 0.35) 45%,
    rgba(201, 162, 39, 0) 78%);
  animation: mf-glow var(--mf-loop) linear infinite;
}
@keyframes mf-glow {
  0%          { opacity: 0.6; transform: scale(1); }
  7%          { opacity: 0;   transform: scale(1.25); }
  7.01%, 100% { opacity: 0;   transform: scale(1); }
}
.moti-stud--tl::after { animation-delay: calc(var(--mf-loop) * -0.21); }
.moti-stud--tr::after { animation-delay: calc(var(--mf-loop) * -0.81); }
.moti-stud--br::after { animation-delay: calc(var(--mf-loop) * -0.61); }
.moti-stud--bl::after { animation-delay: calc(var(--mf-loop) * -0.41); }

/* Hover holds the light so the client can stop it and read the print.
   Pausing every band in the same tick keeps the lap in sync on resume. */
.moti-frame:hover .moti-run::after,
.moti-frame:hover .moti-stud::after { animation-play-state: paused; }

/* ---------- motion off ----------
   transform:none parks each band at its rest position — the middle of its
   own run — so the strand keeps one fixed warm highlight per side and a
   faint static sheen on each corner pearl, exactly as if lit by a
   stationary studio lamp. Nothing moves, nothing blinks, nothing
   disappears: every part that makes a pearl look like a pearl is static
   paint. */
@media (prefers-reduced-motion: reduce) {
  .moti-run::after  { animation: none; transform: none; opacity: 0.42; }
  .moti-stud::after { animation: none; transform: none; opacity: 0.28; }
}

/* ---------- Contact Page ---------- */
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: #fff;
  border: 1px solid rgba(202, 178, 115, 0.22);
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 8px 22px rgba(26, 26, 26, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(26, 26, 26, 0.09);
}
.contact-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #e8d6a3, #cab273);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.contact-info-icon.contact-info-icon-whatsapp {
  background: linear-gradient(135deg, #34e37f, #1fb457);
  color: #fff;
}
.contact-info-body h2 {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--charcoal);
}
.contact-phone-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.contact-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(202, 178, 115, 0.12);
  color: var(--maroon-dark);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.contact-phone-pill:hover {
  background: linear-gradient(90deg, #e8d6a3, #cab273);
  color: var(--charcoal);
  transform: translateY(-2px);
}
.contact-map-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(26, 26, 26, 0.06);
  border: 1px solid rgba(202, 178, 115, 0.22);
}
.contact-form-card {
  background: #fff;
  border: 1px solid rgba(202, 178, 115, 0.25);
  border-radius: 20px;
  padding: 2rem 2.25rem;
  box-shadow: 0 14px 34px rgba(26, 26, 26, 0.06);
}
.contact-form-card .form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
}
.contact-form-card .form-control {
  border-radius: 10px;
  border: 1.5px solid rgba(26, 26, 26, 0.12);
  padding: 0.65rem 0.9rem;
}
.contact-form-card .form-control:focus {
  border-color: #cab273;
  box-shadow: 0 0 0 3px rgba(202, 178, 115, 0.18);
}
@media (max-width: 575.98px) {
  .contact-form-card { padding: 1.5rem 1.25rem; }
  .contact-info-card { padding: 1.15rem 1.25rem; }
}

/* ---------- Shopping Cart Page ---------- */
.cart-table-wrap {
  background: #fff;
  border: 1px solid rgba(202, 178, 115, 0.25);
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.06);
}
.cart-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.cart-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9a9a9a;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  white-space: nowrap;
}
.cart-table tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
  vertical-align: middle;
  white-space: nowrap;
}
.cart-table tbody tr:last-child td { border-bottom: none; }
.cart-table-img img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 10px;
  background: linear-gradient(160deg, #fdf0e8 0%, #f8d9c9 100%);
  padding: 6px;
}
.cart-table-name { white-space: normal; min-width: 160px; }
.cart-table-name a {
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
}
.cart-table-name a:hover { color: var(--maroon); }
.cart-table-remove {
  border: none;
  background: none;
  color: #b0453f;
  margin-left: 0.6rem;
  font-size: 0.95rem;
  vertical-align: middle;
  transition: color 0.2s ease;
}
.cart-table-remove:hover { color: var(--maroon-dark); }

/* ===========================================================
   Cart Offcanvas — premium styling
   =========================================================== */
#cartOffcanvas {
  width: min(420px, 100vw);
  border-left: 1px solid rgba(201, 162, 39, 0.25);
  box-shadow: -18px 0 45px rgba(26, 26, 26, 0.18);
}
#cartOffcanvas .offcanvas-header {
  background: var(--ivory);
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25) !important;
}
#cartOffcanvas .offcanvas-title {
  color: var(--charcoal);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#cartOffcanvas .offcanvas-title::before {
  content: "\F8A4"; /* bootstrap-icons cart3 glyph */
  font-family: "bootstrap-icons", sans-serif;
  color: var(--gold);
  font-size: 1.1rem;
}
/* A logged-in customer's own profile photo takes the icon's place. */
#cartOffcanvas .offcanvas-title.has-avatar::before { display: none; }
#cartOffcanvas .cart-offcanvas-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gold);
}
#cartOffcanvas .btn-close {
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#cartOffcanvas .btn-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}
#cartOffcanvas .offcanvas-body {
  padding: 1.25rem 1.5rem;
  background: var(--warm-white);
}

/* Empty state */
#cartItemsContainer > p.text-muted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1rem !important;
  color: #a2938c !important;
}
#cartItemsContainer > p.text-muted::before {
  content: "\F8A4";
  font-family: "bootstrap-icons", sans-serif;
  font-size: 2.25rem;
  color: rgba(201, 162, 39, 0.4);
}

/* Line items — replaces the plain flex row rendered by script.js */
.cart-line-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0 0 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(138, 101, 16, 0.08);
  animation: heroFadeUp 0.35s ease both;
}
.cart-line-item:last-child { border-bottom: none; margin-bottom: 0; }
.cart-line-item .cart-line-img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(201, 162, 39, 0.25);
}
.cart-line-item .cart-line-body { flex: 1; min-width: 0; }
.cart-line-item .cart-line-name {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--charcoal);
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-line-item .cart-line-price {
  font-size: 0.82rem;
  color: var(--gold-dark);
  font-weight: 600;
}
.cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(138, 101, 16, 0.18);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.45rem;
  background: #fff;
}
.cart-qty-stepper button {
  border: none;
  background: transparent;
  width: 26px;
  height: 26px;
  line-height: 1;
  color: var(--maroon);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background-color 0.18s ease;
}
.cart-qty-stepper button:hover { background: rgba(201, 162, 39, 0.16); }
.cart-qty-input {
  width: 34px;
  border: none;
  text-align: center;
  font-size: 0.85rem;
  padding: 0;
  -moz-appearance: textfield;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-remove-btn {
  color: #b3554f;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.cart-remove-btn:hover {
  opacity: 1;
  color: var(--maroon-dark);
  transform: scale(1.1);
}

#cartSummary {
  border-top: 1px solid rgba(138, 101, 16, 0.15) !important;
  padding-top: 1.1rem !important;
}
#cartSubtotal {
  font-size: 1.4rem;
}
#cartCheckoutBtn {
  font-size: 1rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* ---------- Checkout Page ---------- */
.checkout-card {
  background: #fff;
  border: 1px solid rgba(202, 178, 115, 0.25);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.06);
}
.checkout-summary { position: sticky; top: 100px; }
.checkout-card .form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.35rem;
}
.checkout-card .form-control,
.checkout-card .form-select {
  border-radius: 10px;
  border: 1.5px solid rgba(26, 26, 26, 0.12);
  padding: 0.6rem 0.85rem;
}
.checkout-card .form-control:focus,
.checkout-card .form-select:focus {
  border-color: #cab273;
  box-shadow: 0 0 0 3px rgba(202, 178, 115, 0.18);
}
.checkout-line-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.checkout-line-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 10px;
  background: linear-gradient(160deg, #fdf0e8 0%, #f8d9c9 100%);
  padding: 6px;
  flex-shrink: 0;
}
.checkout-line-body { flex: 1; min-width: 0; }
.checkout-line-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--charcoal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-line-qty { font-size: 0.76rem; color: #9a9a9a; }
.checkout-line-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--maroon-dark);
  flex-shrink: 0;
}
.checkout-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.92rem;
  color: #6a6a6a;
}
.checkout-totals-row.checkout-total-final {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--charcoal);
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  margin-top: 0.4rem;
  padding-top: 0.9rem;
}
.checkout-payment-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1.5px solid rgba(26, 26, 26, 0.12);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.checkout-payment-option.is-checked {
  border-color: #cab273;
  background: rgba(202, 178, 115, 0.08);
}
.checkout-payment-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.checkout-payment-option input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #cab273;
}
.checkout-payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.checkout-payment-grid .checkout-payment-option {
  align-items: flex-start;
  padding: 0.7rem 0.75rem;
  margin-bottom: 0;
}
.checkout-payment-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(202, 178, 115, 0.14);
  color: #8a6510;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.checkout-payment-option.is-checked .checkout-payment-icon {
  background: linear-gradient(135deg, #e8d6a3, #cab273);
  color: var(--charcoal);
}
@media (max-width: 400px) {
  .checkout-payment-grid { grid-template-columns: 1fr; }
}
#checkoutSubmitBtn.is-busy { opacity: 0.7; pointer-events: none; }
.checkout-note { font-size: 0.8rem; color: #9a9a9a; }
.checkout-empty { text-align: center; padding: 4.5rem 1rem; }
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.checkout-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #b0b0b0;
  text-decoration: none;
}
.checkout-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ececec;
  color: #9a9a9a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.checkout-step-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.checkout-step.is-active .checkout-step-num {
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
  color: var(--charcoal);
}
.checkout-step.is-done .checkout-step-num {
  background: var(--charcoal);
  color: #fff;
}
.checkout-step.is-active .checkout-step-label,
.checkout-step.is-done .checkout-step-label {
  color: var(--charcoal);
}
.checkout-step-line {
  flex: 1 1 auto;
  height: 1px;
  max-width: 70px;
  background: rgba(26, 26, 26, 0.15);
}
@media (max-width: 575.98px) {
  .checkout-step-label { display: none; }
  .checkout-steps { gap: 0.5rem; }
}
@media (max-width: 991.98px) {
  .checkout-summary { position: static; }
}
.badge-led {
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
  color: var(--charcoal);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-custom {
  background: var(--maroon);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Why choose us ---------- */
.feature-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid rgba(201, 162, 39, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon);
  font-size: 1.4rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s ease, box-shadow 0.3s ease;
}
.feature-col:hover .feature-icon {
  transform: translateY(-4px) rotate(-6deg);
  background: var(--maroon);
  color: #fff;
  box-shadow: 0 10px 22px rgba(138, 101, 16, 0.3);
}

/* ---------- Testimonials placeholder ---------- */
.testimonial-placeholder {
  border: 1.5px dashed rgba(138, 101, 16, 0.3);
  border-radius: 14px;
  background: var(--ivory);
  padding: 2.5rem 1.5rem;
  transition: border-color 0.3s ease;
}
.testimonial-placeholder:hover { border-color: rgba(201, 162, 39, 0.6); }
.testimonial-placeholder i {
  display: inline-block;
  animation: quoteFloat 4s ease-in-out infinite;
}
@keyframes quoteFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- Product Detail Page ---------- */
.pdp-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #fdf0e8 0%, #f8d9c9 100%);
  box-shadow: 0 20px 50px rgba(26, 26, 26, 0.12);
}
.pdp-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2rem;
  transition: transform 0.15s ease-out;
}
.pdp-zoom-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--charcoal);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.14);
  backdrop-filter: blur(4px);
  cursor: zoom-in;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.pdp-zoom-btn:hover {
  background: linear-gradient(135deg, #e8d6a3, #cab273);
  color: var(--charcoal);
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(202, 178, 115, 0.4);
}

.pdp-zoom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 12, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.pdp-zoom-lightbox.is-open { opacity: 1; visibility: visible; }
.pdp-zoom-lightbox-toolbar {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.pdp-zoom-tool-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.pdp-zoom-tool-btn:hover { background: rgba(255, 255, 255, 0.24); transform: scale(1.05); }
.pdp-zoom-close-btn:hover { background: #cab273; color: var(--charcoal); }
.pdp-zoom-level {
  min-width: 48px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.pdp-zoom-lightbox-stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.pdp-zoom-lightbox-stage.is-dragging { cursor: grabbing; }
.pdp-zoom-lightbox-stage img {
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  user-select: none;
  transition: transform 0.12s ease-out;
}
.pdp-zoom-hint {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
@media (max-width: 767.98px) {
  .pdp-zoom-btn { width: 38px; height: 38px; font-size: 0.95rem; }
  .pdp-zoom-lightbox-toolbar { top: 0.75rem; right: 0.75rem; }
}
.pdp-wishlist-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(202, 178, 115, 0.4);
  color: #b39a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  backdrop-filter: blur(4px);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.pdp-wishlist-btn:hover {
  background: linear-gradient(135deg, #e8d6a3, #cab273);
  color: var(--charcoal);
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(202, 178, 115, 0.4);
}

.pdp-fade-in {
  opacity: 0;
  transform: translateY(24px);
  animation: pdpFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.pdp-fade-in-delay { animation-delay: 0.15s; }
@keyframes pdpFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.pdp-price .price-amount {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--maroon-dark);
}

.pdp-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid rgba(202, 178, 115, 0.5);
  border-radius: 999px;
  overflow: hidden;
  width: 130px;
}
.pdp-qty-btn {
  border: none;
  background: transparent;
  width: 36px;
  height: 40px;
  font-size: 1.1rem;
  color: var(--maroon-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pdp-qty-btn:hover {
  background: linear-gradient(135deg, #e8d6a3, #cab273);
  color: var(--charcoal);
}
.pdp-qty-input {
  border: none;
  border-left: 1px solid rgba(202, 178, 115, 0.35);
  border-right: 1px solid rgba(202, 178, 115, 0.35);
  width: 58px;
  height: 40px;
  text-align: center;
  font-weight: 600;
  color: var(--charcoal);
  background: transparent;
}
.pdp-qty-input:focus { outline: none; }
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-btn-dark {
  background: var(--charcoal);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  padding: 0.7rem 1.15rem;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pdp-btn-dark:hover {
  background: #3a3a3a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(26, 26, 26, 0.25);
}
.pdp-btn-dark:active { transform: translateY(0); }

.pdp-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #6a6a6a;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.pdp-link-btn:hover { color: var(--maroon); }
.pdp-link-btn .bi-heart.is-active { color: var(--maroon); }

.pdp-info-box {
  border: 1px solid rgba(202, 178, 115, 0.3);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  background: linear-gradient(160deg, #fdf0e8 0%, #fbf5ef 100%);
}
.pdp-info-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--charcoal);
  opacity: 0;
  transform: translateX(-10px);
  animation: pdpTrustIn 0.5s ease forwards;
}
.pdp-info-row + .pdp-info-row { margin-top: 0.6rem; }
.pdp-info-row i { color: #b39a5a; font-size: 1rem; flex-shrink: 0; }
.pdp-info-row:nth-child(1) { animation-delay: 0.5s; }
.pdp-info-row:nth-child(2) { animation-delay: 0.65s; }
.pdp-info-row:nth-child(3) { animation-delay: 0.8s; }
@keyframes pdpTrustIn {
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-fade-in, .pdp-info-row { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pdp-image-wrap img, .pdp-wishlist-btn, .pdp-zoom-btn, .pdp-qty-btn, .pdp-btn-dark { transition: none !important; }
}

/* ---------- Newsletter ---------- */
.newsletter-section {
  background: var(--charcoal);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.newsletter-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 15% 30%, rgba(201, 162, 39, 0.14), transparent 60%);
  pointer-events: none;
}
.newsletter-section .form-control {
  border-radius: 999px 0 0 999px;
  border: none;
  padding: 0.7rem 1.2rem;
  transition: box-shadow 0.25s ease;
}
.newsletter-section .form-control:focus {
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.35);
}
.newsletter-section .btn-gold {
  border-radius: 0 999px 999px 0;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ivory);
  color: rgba(26, 26, 26, 0.75);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
}
.site-footer p.small { line-height: 1.75; color: rgba(26, 26, 26, 0.68); }
.site-footer h5 {
  color: var(--charcoal);
  font-family: "Playfair Display", serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  padding-bottom: 0.7rem;
}
.site-footer h5 i { color: var(--gold-dark); font-size: 0.88rem; flex-shrink: 0; }
@media (max-width: 767.98px) {
  .site-footer h5 { font-size: 0.78rem; letter-spacing: 0.01em; gap: 0.35rem; }
  .site-footer h5 i { font-size: 0.78rem; }
}
.site-footer h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.site-footer ul a {
  display: inline-flex;
  align-items: center;
  color: rgba(26, 26, 26, 0.7);
  text-decoration: none;
  line-height: 1.9;
  transition: color 0.22s ease, transform 0.22s ease;
}
.site-footer ul a::before {
  content: "\F285"; /* bi-chevron-right */
  font-family: "bootstrap-icons", sans-serif;
  font-size: 0.65rem;
  margin-right: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--gold-dark);
  transition: width 0.22s ease, opacity 0.22s ease, margin-right 0.22s ease;
}
.site-footer ul a:hover {
  color: var(--maroon);
  transform: translateX(3px);
}
.site-footer ul a:hover::before {
  width: 0.7rem;
  opacity: 1;
  margin-right: 0.3rem;
}
.site-footer > .container > .pb-5 a:not(.social-icon):not(ul a) { color: rgba(26, 26, 26, 0.7); text-decoration: none; }
.site-footer .social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(26, 26, 26, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon-dark);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-footer .social-icon:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
  transform: translateY(-3px) rotate(8deg);
  box-shadow: 0 8px 18px rgba(201, 162, 39, 0.35);
}
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.footer-contact-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(138, 101, 16, 0.12);
  color: var(--maroon-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.footer-contact-row span:last-child,
.footer-contact-row a {
  color: rgba(26, 26, 26, 0.75);
  text-decoration: none;
  line-height: 1.5;
  padding-top: 0.35rem;
  transition: color 0.2s ease;
}
.footer-contact-row a:hover { color: var(--maroon); }
.footer-bottom {
  background: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(138, 101, 16, 0.18);
  font-size: 0.82rem;
  color: rgba(26, 26, 26, 0.7);
  letter-spacing: 0.01em;
}
.footer-bottom .text-white-50 {
  /* Bootstrap's utility sets white text with !important — the footer is
     now a light background, so this needs an equally-forceful override. */
  color: rgba(26, 26, 26, 0.5) !important;
}

/* ===========================================================
   Scroll reveal — fade-up as sections enter the viewport
   =========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .feature-col:hover .feature-icon,
  .testimonial-placeholder i,
  .site-footer .social-icon:hover {
    animation: none !important;
    transform: none !important;
  }
}

/* ===========================================================
   Mobile bottom navigation bar
   =========================================================== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1045;
  background: rgba(255, 253, 249, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 -12px 30px rgba(26, 26, 26, 0.1);
  padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
}
.mobile-bottom-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
}
@media (max-width: 767.98px) {
  .mobile-bottom-nav {
    display: flex;
    align-items: stretch;
  }
  /* Room so page content (and the footer) never sits under the fixed bar */
  body { padding-bottom: 68px; }
}
/* Placed with !important and after the base rules (further down this file)
   so cascade order can't silently override them again. The WhatsApp button
   is hidden because the bottom nav's own Chat item covers it; back-to-top
   is lifted clear of the fixed bottom nav bar. */
@media (max-width: 767.98px) {
  .whatsapp-float { display: none !important; }
  .float-btn-stack { bottom: 80px !important; }
}
.mobile-bottom-nav .mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  color: #9b8f8b;
  font-size: 0.62rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.3rem 0.1rem 0.15rem;
  position: relative;
  border: none;
  background: transparent;
  transition: color 0.25s ease;
}
.mobile-bottom-nav .mbn-label {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mobile-bottom-nav .mbn-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 30px;
  border-radius: 12px;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.mobile-bottom-nav .mbn-item i {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.mobile-bottom-nav .mbn-item:active .mbn-icon-wrap { transform: scale(0.88); }
.mobile-bottom-nav .mbn-item:active .mbn-label { transform: scale(0.94); }

/* Active state: a soft chip behind the icon + a small dot above it */
.mobile-bottom-nav .mbn-item.active {
  color: #d17a4a;
}
.mobile-bottom-nav .mbn-item.active::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d17a4a;
}
.mobile-bottom-nav .mbn-item.active .mbn-icon-wrap {
  background: rgba(255, 216, 198, 0.45);
}
.mobile-bottom-nav .mbn-item.active .mbn-icon-wrap i {
  transform: translateY(-1px);
}
/* The Cart FAB is already visually distinct (raised gradient circle) —
   skip the dot so it doesn't collide with the badge/circle. Its own
   gradient background (defined below) already wins over the chip tint
   above via source order, so no override needed there. */
.mobile-bottom-nav .mbn-item.mbn-cart.active::after { display: none; }

.mobile-bottom-nav .mbn-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, var(--maroon-light), var(--maroon-dark));
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 253, 249, 0.9);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mobile-bottom-nav .mbn-badge.badge-pop {
  animation: cartBadgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Cart: raised circular FAB, the classic "premium shopping app" treatment */
.mobile-bottom-nav .mbn-item.mbn-cart {
  justify-content: flex-start;
  padding-top: 0;
}
.mobile-bottom-nav .mbn-item.mbn-cart .mbn-icon-wrap {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(150deg, #e8d6a3 0%, #cab273 50%, #b39a5a 100%);
  box-shadow: 0 10px 22px rgba(202, 178, 115, 0.5), 0 0 0 4px rgba(255, 253, 249, 0.95);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.mobile-bottom-nav .mbn-item.mbn-cart .mbn-icon-wrap i {
  color: var(--charcoal);
  font-size: 1.35rem;
}
.mobile-bottom-nav .mbn-item.mbn-cart:active .mbn-icon-wrap {
  transform: translateX(-50%) scale(0.9);
}
.mobile-bottom-nav .mbn-item.mbn-cart .mbn-label {
  margin-top: 30px;
  color: #8a6529;
  font-weight: 700;
}
.mobile-bottom-nav .mbn-item.mbn-cart .mbn-badge {
  top: -2px;
  right: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav .mbn-badge.badge-pop { animation: none !important; }
}

/* ---------- Floating buttons ---------- */
.float-btn-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.whatsapp-float {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.back-to-top-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(26,26,26,0.25);
  border: none;
}
.back-to-top-btn:hover { background: var(--maroon-dark); color: #fff; }

/* ---------- Accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* (The hero is edge-to-edge — it must not carry section padding, or a
   band of page background shows above and below the banner.) */

/* ---------- Product Reviews (PDP) ---------- */
.review-star-picker {
  font-size: 1.5rem;
  color: var(--gold, #cab273);
  cursor: pointer;
}
.review-star-picker i {
  margin-right: 0.25rem;
  transition: transform 0.1s ease;
}
.review-star-picker i:hover {
  transform: scale(1.15);
}

/* ---------- Compare Page ---------- */
.compare-table { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(26,26,26,.05); }
.compare-table th, .compare-table td { padding: 1rem; vertical-align: middle; border-color: #eee; }
.compare-row-label {
  width: 160px;
  min-width: 140px;
  background: #f6f3ec;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--maroon-dark, #4a1f1f);
  white-space: nowrap;
}
.compare-table td { min-width: 200px; }
.compare-product-img {
  width: 100%;
  max-width: 140px;
  height: 140px;
  object-fit: contain;
  background: #f6f3ec;
  border-radius: 8px;
  padding: 8px;
}
.compare-remove-btn { float: right; }

/* ---------- PDP: thumbnail strip + variant selector ---------- */
.pdp-thumb-strip { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pdp-thumb-btn {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: #f6f3ec;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.pdp-thumb-btn img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb-btn.is-active, .pdp-thumb-btn:hover { border-color: var(--gold, #cab273); }

.pdp-variant-btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1.5px solid rgba(201, 162, 39, 0.4);
  background: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pdp-variant-btn:hover { border-color: var(--maroon); }
.pdp-variant-btn.is-active { border-color: var(--maroon); background: var(--maroon); color: #fff; }
.pdp-variant-btn:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }