/* =====================================================
   style.css - Homegrown CSS for Vyedi website
===================================================== */

:root {
  --products-primary: #9b4d20;
  --products-gold: #c89532;
  --products-dark: #2b211b;
  --products-light: #fffaf2;
  --products-border: #eadfce;
  --products-muted: #756b62;
}

/* =========================================================
   CONTAINER
========================================================= */

.products-container {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #fffdf9;
  color: #2b211b;
  line-height: 1.6;
}

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

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

/* =====================================================
   GLOBAL
===================================================== */

:root {
  --primary: #9d4b24;
  --primary-dark: #71351b;
  --gold: #c9983e;
  --gold-light: #e8c879;
  --cream: #fff8ed;
  --cream-dark: #f5ead9;
  --dark: #2b211b;
  --muted: #766b62;
  --white: #ffffff;
  --border: #eadfd2;
  --shadow: 0 15px 45px rgba(67, 39, 20, 0.1);
  --max-width: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

section {
  width: 100%;
}

.section-heading {
  max-width: var(--max-width);
  margin: 0 auto 45px;
  padding: 0 25px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.section-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1.15;
  margin-top: 8px;
  color: var(--dark);
}

.section-heading p {
  margin-top: 10px;
  color: var(--muted);
  max-width: 600px;
}

.section-heading.centered {
  display: block;
  text-align: center;
}

.section-heading.centered p {
  margin: 12px auto 0;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: var(--primary);
}

.view-all {
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
  transition: 0.3s;
}

.view-all:hover {
  transform: translateX(5px);
}

/* =====================================================
   ANNOUNCEMENT BAR
===================================================== */

.announcement {
  background: var(--dark);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.announcement-content {
  max-width: var(--max-width);
  margin: auto;
  min-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 6px 20px;
}

/* =====================================================
   HEADER
===================================================== */

.header {
  background: #fffdf9;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition:
    box-shadow 0.4s var(--ease),
    min-height 0.35s var(--ease);
}

.header.scrolled {
  box-shadow: 0 10px 30px rgba(67, 39, 20, 0.08);
}

.header-container {
  max-width: var(--max-width);
  margin: auto;
  min-height: 82px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  transition: min-height 0.35s var(--ease);
}

.header.scrolled .header-container {
  min-height: 66px;
}

/* Logo */

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.logo-symbol {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 25px;
  background: #fff9ee;
  transition: transform 0.4s var(--ease);
}

.logo:hover .logo-symbol {
  transform: rotate(180deg);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-text strong {
  font-family: Georgia, serif;
  font-size: 24px;
  letter-spacing: 2px;
}

.logo-text small {
  margin-top: 6px;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
}

.site-logo {
  width: 100px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Primary navigation */

.navigation {
  display: flex;
  align-items: center;
  gap: 26px;
}

.navigation a {
  font-size: 14px;
  font-weight: 600;
  color: #4a4039;
  position: relative;
  padding: 30px 0;
}

.navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.35s var(--ease);
}

.navigation a:hover::after,
.navigation a.active::after {
  width: 100%;
}

.navigation a:focus {
  outline: none;
}

.navigation a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Header action icons (search / account / cart / hamburger) */

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-button {
  border: none;
  background: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: 0.3s;
}

.icon-button:hover {
  background: var(--cream-dark);
  transform: scale(1.08);
}

.cart-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--dark);
  color: white;
  padding: 10px 15px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.3s var(--ease);
}

.cart-button:hover {
  transform: translateY(-2px);
}

.cart-button b {
  position: absolute;
  top: -7px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--gold);
  color: var(--dark);
  font-size: 10px;
  transition: transform 0.3s var(--ease);
}

.cart-button b.bump {
  animation: cartBump 0.4s var(--ease);
}

@keyframes cartBump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

/* Hamburger button — hidden on desktop, shown under 900px (see media queries) */
.menu-button {
  display: none;
  border: none;
  background: transparent;
  font-size: 25px;
  min-width: 44px;
  min-height: 44px;
}

/* Expandable search bar under the header */

.search-area {
  max-height: 0;
  overflow: hidden;
  border-top: 0px solid var(--border);
  padding: 0 25px;
  transition:
    max-height 0.35s var(--ease),
    padding 0.35s var(--ease),
    border-color 0.35s;
}

.search-area.show {
  max-height: 110px;
  padding: 15px 25px;
  border-top: 1px solid var(--border);
}

.search-box {
  max-width: 700px;
  margin: auto;
  display: flex;
  border: 1px solid var(--border);
  background: white;
  border-radius: 30px;
  overflow: hidden;
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  padding: 13px 20px;
}

.search-box button {
  border: none;
  background: var(--primary);
  color: white;
  padding: 0 25px;
}

/* =====================================================
   DESKTOP "CATEGORIES" DROPDOWN (opens on :hover ≥769px,
   opens on tap ≤768px via JS toggling .active)
===================================================== */

.nav-category {
  position: relative;
}

.nav-category-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  color: #3d342f;
  text-decoration: none !important;
  position: relative;
  cursor: pointer;
}

/* Remove the underline pseudo-elements inherited from .navigation a */
.nav-category-link::before,
.nav-category-link::after {
  content: none !important;
  display: none !important;
}

.category-arrow {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.category-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  width: 760px;
  padding: 24px;
  background: #fffdf9;
  border: 1px solid #eadcc9;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(70, 40, 20, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
  z-index: 99999;
  isolation: isolate; /* keep content behind the menu from showing through */
}

@media (min-width: 769px) {
  .nav-category:hover .category-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.category-dropdown-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.category-dropdown-inner a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #eadfd2;
  border-radius: 10px;
  color: #3d342f;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none !important;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.category-dropdown-inner a::before,
.category-dropdown-inner a::after {
  content: none !important;
  display: none !important;
}

.category-dropdown-inner a:hover,
.category-dropdown-inner a:focus-visible {
  background: #f8efe2;
  border-color: #c58a3a;
  color: #9b5427;
  transform: translateY(-2px);
}

.category-dropdown-inner a:focus,
.category-dropdown-inner a:active,
.category-dropdown-inner a:visited {
  text-decoration: none !important;
  box-shadow: none !important;
}

.category-dropdown *,
.category-dropdown *::before,
.category-dropdown *::after {
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .nav-category {
    width: 100%;
  }

  .nav-category-link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
  }

  .category-dropdown {
    position: static;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
      max-height 0.3s ease,
      opacity 0.25s ease,
      visibility 0.25s ease;
  }

  .nav-category.active .category-dropdown {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
    pointer-events: auto;
  }

  .nav-category.active .category-arrow {
    transform: rotate(180deg);
  }

  .category-dropdown-inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .category-dropdown-inner a {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* =====================================================
   DESKTOP "SERVICES" DROPDOWN (same pattern as Categories)
===================================================== */

.nav-services {
  position: relative;
}

.nav-services-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  color: #3d342f;
  text-decoration: none !important;
  cursor: pointer;
}

.nav-services-link::before,
.nav-services-link::after {
  content: none !important;
  display: none !important;
}

.services-arrow {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.services-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  width: 760px;
  padding: 24px;
  background: #fffdf9;
  border: 1px solid #eadcc9;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(70, 40, 20, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
  z-index: 99999;
}

@media (min-width: 769px) {
  .nav-services:hover .services-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.services-dropdown-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.services-dropdown-inner a {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #eadfd2;
  border-radius: 10px;
  color: #3d342f;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.services-dropdown-inner a::before,
.services-dropdown-inner a::after {
  content: none !important;
  display: none !important;
}

.services-dropdown-inner a:hover,
.services-dropdown-inner a:focus-visible {
  background: #f8efe2;
  border-color: #c58a3a;
  color: #9b5427;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .nav-services {
    width: 100%;
  }

  .nav-services-link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
  }

  .services-dropdown {
    position: static;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
      max-height 0.3s ease,
      opacity 0.25s ease,
      visibility 0.25s ease;
  }

  .nav-services.active .services-dropdown {
    opacity: 1;
    visibility: visible;
    max-height: 700px;
    pointer-events: auto;
  }

  .nav-services.active .services-arrow {
    transform: rotate(180deg);
  }

  .services-dropdown-inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .services-dropdown-inner a {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* =====================================================
   MOBILE SLIDE-DOWN MENU (#mobileMenu)
   Hidden entirely on desktop; on mobile it's a full accordion
   panel with its own header, nav list and Categories/Services
   accordions, toggled by JS adding/removing the "open" class.
===================================================== */

.mobile-menu {
  display: none; /* desktop: never shown */
}

@media (max-width: 768px) {
  #mobileMenu {
    display: none;
    width: 100%;
    box-sizing: border-box;
    background: #fffdf9;
    color: #29251f;
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 999;
  }

  #mobileMenu.open {
    display: block;
    padding: 0 18px 25px;
    background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
  }

  /* Menu header / brand */

  .mobile-menu-header {
    width: 100%;
    padding: 22px 8px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e8dfd2;
  }

  .mobile-menu-title {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu-eyebrow {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 5px;
    color: #8b6b3f;
  }

  .mobile-menu-subtitle {
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9b9285;
  }

  /* Nav list */

  .mobile-nav-list {
    width: 100%;
    padding: 8px 0 0;
    box-sizing: border-box;
  }

  /* Touch target ≥ 44px tall, per mobile accessibility guidelines */
  .mobile-nav-item {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    color: #302c26;
    text-decoration: none;
    border-bottom: 1px solid #eee7dc;
    transition:
      background 0.2s ease,
      padding-left 0.2s ease;
  }

  .mobile-nav-item:active {
    background: #f3ecdf;
    padding-left: 13px;
  }

  .mobile-nav-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 13px;
    border-radius: 50%;
    background: #f4eee5;
    color: #8b6b3f;
    font-size: 17px;
  }

  .mobile-nav-text {
    flex: 1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;
    color: #302c26;
  }

  .mobile-nav-arrow {
    font-size: 17px;
    color: #a98b62;
    transition: transform 0.2s ease;
  }

  .mobile-nav-item:active .mobile-nav-arrow {
    transform: translateX(4px);
  }

  /* Categories / Services accordions inside the mobile menu */

  .mobile-dropdown {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #eee7dc;
  }

  .mobile-dropdown-trigger {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    color: #302c26;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-dropdown-trigger:active {
    background: #f3ecdf;
  }

  .mobile-dropdown-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f4eee5;
    color: #8b6b3f;
    font-size: 13px;
    transition:
      transform 0.35s ease,
      background 0.35s ease;
  }

  .mobile-dropdown.open .mobile-dropdown-arrow {
    transform: rotate(180deg);
    background: #eadfce;
  }

  .mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 0 0 18px;
    box-sizing: border-box;
    background: #fcf8f2;
    border-left: 1px solid transparent;
    transition:
      max-height 0.4s ease,
      opacity 0.25s ease,
      padding-bottom 0.4s ease;
  }

  .mobile-dropdown.open .mobile-dropdown-content {
    max-height: 700px;
    opacity: 1;
    padding-bottom: 10px;
    border-left-color: #d8c9b5;
  }

  .mobile-sub-item {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 1px 0;
    padding: 7px 10px;
    box-sizing: border-box;
    color: #5b554c;
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
    transition:
      background 0.2s ease,
      transform 0.2s ease;
  }

  .mobile-sub-item span:first-child {
    width: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .mobile-sub-item:active {
    background: #f0e8dc;
    color: #8b6b3f;
    transform: translateX(3px);
  }

  /* Menu footer */

  .mobile-menu-footer {
    width: 100%;
    padding: 28px 10px 5px;
    box-sizing: border-box;
    text-align: center;
  }

  .mobile-footer-line {
    width: 45px;
    height: 1px;
    margin: 0 auto 18px;
    background: #b39468;
  }

  .mobile-menu-footer p {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.7;
    font-style: italic;
    color: #766d61;
  }

  .mobile-menu-footer p strong {
    color: #8b6b3f;
    font-weight: 500;
  }

  .mobile-menu-footer > span {
    display: block;
    margin-top: 10px;
    font-size: 8px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #aaa093;
  }
}

@media (max-width: 380px) {
  #mobileMenu.open {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mobile-nav-text {
    font-size: 16px;
  }

  .mobile-nav-icon {
    width: 37px;
    height: 37px;
    min-width: 37px;
  }
}

/* =====================================================
   HERO
===================================================== */

.hero {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 40%, #f2d9a6 0%, rgba(242, 217, 166, 0) 28%),
    linear-gradient(120deg, #fff9ed, #f8ead7);
}

.hero-background {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 10% 20%,
    rgba(201, 152, 62, 0.13),
    rgba(201, 152, 62, 0) 25%
  );
  pointer-events: none;
}

.hero-container {
  max-width: var(--max-width);
  min-height: 680px;
  margin: auto;
  padding: 70px 25px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-content {
  max-width: 650px;
}

/* Hero load-in sequence: one orchestrated reveal, not scroll-triggered */
.hero-reveal {
  opacity: 0;
  transform: translateY(22px);
  animation: heroIn 0.9s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.12s + 0.15s);
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 25px;
}

.hero-label span {
  color: var(--gold);
}

.hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(48px, 5.5vw, 75px);
  line-height: 1.04;
  letter-spacing: -2px;
  color: var(--dark);
}

.hero h1 span {
  color: var(--primary);
  font-style: italic;
}

.hero-content > p {
  max-width: 590px;
  color: var(--muted);
  font-size: 17px;
  margin-top: 25px;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.primary-button,
.secondary-button,
.light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 15px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.primary-button {
  background: var(--primary);
  color: white;
  box-shadow: 0 10px 25px rgba(157, 75, 36, 0.2);
}

.primary-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(157, 75, 36, 0.3);
}

.primary-button span,
.secondary-button span {
  transition: transform 0.3s var(--ease);
}

.primary-button:hover span,
.secondary-button:hover span {
  transform: translateX(4px);
}

.secondary-button {
  background: white;
  color: var(--primary);
  border: 1px solid var(--border);
}

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

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
  font-size: 12px;
  color: var(--muted);
}

.hero-features strong {
  color: var(--primary);
  margin-right: 4px;
}

/* Hero visual (mandala) */

.hero-visual {
  height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.mandala {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  border: 1px solid rgba(157, 75, 36, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle, #fffaf0 0%, #f4dfb8 65%, #e4bd72 100%);
  box-shadow: 0 30px 70px rgba(105, 65, 25, 0.18);
  animation: float 6s ease-in-out infinite;
}

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

.mandala::before,
.mandala::after {
  content: "";
  position: absolute;
  inset: 25px;
  border-radius: 50%;
  border: 1px dashed rgba(157, 75, 36, 0.4);
  animation: spin 40s linear infinite;
}

.mandala::after {
  inset: 65px;
  border-style: solid;
  animation: spin 30s linear infinite reverse;
}

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

.mandala-inner {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 75px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Floating info cards over the hero visual */

.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  padding: 15px 18px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.8);
  min-width: 220px;
  animation: cardFloat 5s ease-in-out infinite;
}

.card-bottom {
  animation-delay: 1.2s;
}

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

.floating-card > span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--cream);
  font-size: 21px;
}

.floating-card div {
  display: flex;
  flex-direction: column;
}

.floating-card strong {
  font-size: 13px;
}

.floating-card small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

.card-top {
  top: 55px;
  right: 5px;
}

.card-bottom {
  bottom: 65px;
  left: 10px;
}

.hero-bottom-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 50px;
  background: #fffdf9;
  clip-path: ellipse(70% 60% at 50% 100%);
}

/* =====================================================
   HOME — CATEGORY TILES
===================================================== */

.categories {
  padding: 90px 0;
  background: #fffdf9;
}

.category-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.category-card {
  min-height: 230px;
  padding: 25px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: white;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.category-card::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  top: -65px;
  right: -65px;
  background: rgba(201, 152, 62, 0.12);
  transition: transform 0.5s var(--ease);
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}

.category-card:hover::before {
  transform: scale(1.5);
}

.category-icon {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  background: var(--cream);
  margin-bottom: 18px;
  transition: transform 0.4s var(--ease);
}

.category-card:hover .category-icon {
  transform: scale(1.12) rotate(-8deg);
}

.category-card h3 {
  font-family: Georgia, serif;
  font-size: 17px;
}

.category-card p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}

.category-card > span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  margin-top: 13px;
  transition: transform 0.3s var(--ease);
}

.category-card:hover > span {
  transform: translateX(4px);
}

/* =====================================================
   KUNDALI PROMO SECTION
===================================================== */

.kundali-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #2d211a, #463025);
  color: white;
  overflow: hidden;
}

.kundali-container {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 80px;
}

.kundali-visual {
  height: 450px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kundali-circle {
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 1px solid rgba(232, 200, 121, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle,
    rgba(201, 152, 62, 0.18),
    transparent 65%
  );
}

.kundali-circle::before,
.kundali-circle::after {
  content: "";
  position: absolute;
  inset: 35px;
  border-radius: 50%;
  border: 1px dashed rgba(232, 200, 121, 0.45);
}

.kundali-circle::after {
  inset: 90px;
  border-style: solid;
}

.kundali-center {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 55px;
  z-index: 2;
}

.zodiac {
  position: absolute;
  color: var(--gold-light);
  font-size: 30px;
}

.zodiac-1 {
  top: 30px;
  left: 50%;
}
.zodiac-2 {
  right: 35px;
  top: 45%;
}
.zodiac-3 {
  bottom: 35px;
  left: 45%;
}
.zodiac-4 {
  left: 30px;
  top: 45%;
}

/* Kundali constellation orbit: the ring rotates slowly while each glyph
   counter-rotates so the symbols themselves stay upright */
.kundali-visual.in-view .kundali-circle {
  animation: orbit 0s linear infinite;
}

.kundali-visual.in-view .zodiac {
  animation: counterOrbit 50s linear infinite;
}

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

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

.stars span {
  position: absolute;
  color: var(--gold-light);
  opacity: 0.8;
  animation: twinkle 2.6s ease-in-out infinite;
}

.stars span:nth-child(1) {
  top: 10%;
  left: 20%;
}
.stars span:nth-child(2) {
  top: 25%;
  right: 10%;
  animation-delay: 0.4s;
}
.stars span:nth-child(3) {
  bottom: 10%;
  right: 20%;
  animation-delay: 0.8s;
}
.stars span:nth-child(4) {
  bottom: 25%;
  left: 15%;
  animation-delay: 1.2s;
}
.stars span:nth-child(5) {
  top: 50%;
  left: 5%;
  animation-delay: 1.6s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.kundali-content {
  max-width: 600px;
}

.kundali-content .eyebrow {
  color: var(--gold-light);
}

.kundali-content h2 {
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 1.1;
  margin-top: 12px;
}

.kundali-content h2 span {
  color: var(--gold-light);
  font-style: italic;
}

.kundali-content > p {
  color: #d6ccc4;
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.8;
}

.kundali-list {
  margin: 25px 0;
  display: grid;
  gap: 12px;
}

.kundali-list div {
  color: #eee6df;
  font-size: 14px;
}

.kundali-list span {
  color: var(--gold-light);
  margin-right: 8px;
}

.kundali-content .primary-button {
  margin-top: 8px;
  background: var(--gold);
  color: var(--dark);
}

@media (max-width: 768px) {
  /* Rotating zodiac circle */
  .kundali-circle {
    width: 230px;
    height: 230px;
    position: relative;
  }

  .zodiac {
    position: absolute;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--gold-light);
    font-size: 22px;
    z-index: 3;

    /* Keep symbols upright */
    animation: zodiacCounterRotate 20s linear infinite;
  }

  /* Top */
  .zodiac-1 {
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Right */
  .zodiac-2 {
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
  }

  /* Bottom */
  .zodiac-3 {
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Left */
  .zodiac-4 {
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
  }
}

@keyframes zodiacCounterRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

/* =====================================================
   FEATURED PRODUCTS
===================================================== */

.featured-products {
  padding: 100px 0;
}

.product-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.product-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease),
    box-shadow 0.4s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}

.product-card.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.product-card.in-view:hover {
  transform: translateY(-7px) scale(1);
  box-shadow: var(--shadow);
}

.product-image {
  height: 250px;
  background: linear-gradient(135deg, #fff4df, #ead3aa);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.product-card:hover .product-image img {
  transform: scale(1.08);
}

.product-placeholder {
  font-size: 75px;
  transition: transform 0.5s var(--ease);
}

.product-card:hover .product-placeholder {
  transform: scale(1.1) rotate(-4deg);
}

.product-badge {
  position: absolute;
  top: 13px;
  left: 13px;
  padding: 5px 10px;
  border-radius: 20px;
  background: #9b4d207d;
  color: white;
  font-size: 10px;
  font-weight: 700;
}

.product-info {
  padding: 18px;
}

.product-category {
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.product-info h3 {
  font-family: Georgia, serif;
  font-size: 18px;
  margin-top: 5px;
}

.product-rating {
  font-size: 11px;
  color: var(--gold);
  margin-top: 6px;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.product-price strong {
  font-size: 18px;
}

.product-price del {
  color: #aaa;
  font-size: 12px;
}

.add-cart {
  width: 100%;
  margin-top: 15px;
  padding: 11px;
  border: 1px solid var(--primary);
  background: white;
  color: var(--primary);
  border-radius: 5px;
  font-weight: 700;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}

.add-cart:hover {
  background: var(--primary);
  color: white;
}

.add-cart.added {
  background: var(--dark);
  border-color: var(--dark);
  color: white;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.products-breadcrumb {
  background: #fffaf3;
  border-bottom: 1px solid var(--products-border);
}

.products-breadcrumb .products-container {
  min-height: 55px;

  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 13px;
}

.products-breadcrumb a {
  color: var(--products-primary);
  text-decoration: none;
}

.products-breadcrumb strong {
  color: var(--products-dark);
}

/* =====================================================
   PROMO BANNER
===================================================== */

.promo-section {
  padding: 30px 25px 100px;
}

.promo-container {
  max-width: var(--max-width);
  min-height: 330px;
  margin: auto;
  padding: 55px 70px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, #8c3f20, #b3632e);
  color: white;
}

.promo-container::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  right: -100px;
  top: -150px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.promo-container.in-view::before {
  animation: spin 60s linear infinite;
}

.promo-content {
  position: relative;
  z-index: 2;
}

.promo-content > span {
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

.promo-content h2 {
  font-family: Georgia, serif;
  font-size: 43px;
  line-height: 1.15;
  margin: 12px 0;
}

.promo-content p {
  color: #f5e6d8;
  margin-bottom: 20px;
}

.light-button {
  background: white;
  color: var(--primary);
}

.promo-symbol {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.promo-symbol div {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 75px;
  color: var(--gold-light);
}

/* =====================================================
   WHY US / TRUST BADGES
===================================================== */

.why-us {
  padding: 90px 0;
  background: var(--cream);
}

.trust-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.trust-card {
  background: white;
  padding: 35px 25px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

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

.trust-icon {
  width: 60px;
  height: 60px;
  margin: auto;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--primary);
  transition:
    transform 0.4s var(--ease),
    background 0.4s var(--ease);
}

.trust-card:hover .trust-icon {
  transform: scale(1.12);
  background: var(--gold-light);
}

.trust-card h3 {
  font-family: Georgia, serif;
  margin-top: 18px;
  font-size: 19px;
}

.trust-card p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter {
  padding: 80px 25px;
  background: #fffdf9;
}

.newsletter-container {
  max-width: 900px;
  margin: auto;
  padding: 45px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: white;
}

.newsletter h2 {
  font-family: Georgia, serif;
  font-size: 30px;
  margin-top: 7px;
}

.newsletter p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 5px;
}

.newsletter form {
  min-width: 360px;
  display: flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.newsletter input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 13px 15px;
}

.newsletter button {
  border: none;
  background: var(--primary);
  color: white;
  padding: 0 20px;
  font-weight: 700;
  transition: background 0.3s;
}

.newsletter button:hover {
  background: var(--primary-dark);
}

/* =====================================================
   FOOTER
===================================================== */

.footer {
  background: var(--dark);
  color: white;
  padding-top: 70px;
}

.footer-container {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px 60px;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 50px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo span {
  color: var(--gold-light);
  font-size: 30px;
}

.footer-logo strong {
  font-family: Georgia, serif;
  font-size: 26px;
  letter-spacing: 2px;
}

.footer-brand > p {
  color: #bdb2aa;
  font-size: 13px;
  max-width: 300px;
  margin-top: 15px;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.social-icons a {
  color: #cfc5be;
  font-size: 11px;
  transition:
    color 0.3s,
    transform 0.3s;
  display: inline-block;
}

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

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-column h3 {
  font-family: Georgia, serif;
  color: white;
  margin-bottom: 8px;
}

.footer-column a {
  color: #bdb2aa;
  font-size: 13px;
  transition: 0.3s;
}

.footer-column a:hover {
  color: var(--gold-light);
  transform: translateX(3px);
}

.footer-bottom {
  max-width: var(--max-width);
  margin: auto;
  padding: 20px 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #938880;
  font-size: 11px;
}

/* =====================================================
   ABOUT PAGE
===================================================== */

.about-hero {
  padding: 70px 0 80px;
  background:
    radial-gradient(circle at 85% 20%, #f2d9a6 0%, rgba(242, 217, 166, 0) 30%),
    linear-gradient(120deg, #fff9ed, #f8ead7);
  text-align: center;
}

.about-hero-container {
  max-width: 800px;
  margin: auto;
  padding: 0 25px;
}

.about-hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.15;
  color: var(--dark);
  margin-top: 12px;
}

.about-hero h1 span {
  color: var(--primary);
  font-style: italic;
}

.about-hero > .about-hero-container > p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin-top: 22px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.story-section {
  padding: 100px 0;
}

.story-container {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 70px;
}

.story-visual {
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-rings {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(157, 75, 36, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle, #fffaf0 0%, #f4dfb8 65%, #e4bd72 100%);
  box-shadow: 0 30px 70px rgba(105, 65, 25, 0.18);
}

.story-ring-outer {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px dashed rgba(157, 75, 36, 0.4);
  animation: spin 45s linear infinite;
}

.story-ring-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 70%;
  background: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  color: var(--gold-light);
  font-size: 65px;
  box-shadow:
    0 8px 25px rgba(80, 45, 20, 0.12),
    inset 0 0 0 1px rgba(180, 120, 50, 0.12);
}

.story-ring-inner img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

.story-badge {
  position: absolute;
  bottom: 10px;
  right: -10px;
  animation: cardFloat 5s ease-in-out infinite;
}

.story-content .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.story-content h2 {
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1.2;
  color: var(--dark);
}

.story-content h2 span {
  color: var(--primary);
  font-style: italic;
}

.story-content > p {
  color: var(--muted);
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.85;
}

.mini-stats {
  display: flex;
  gap: 35px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.mini-stats > div {
  display: flex;
  flex-direction: column;
}

.mini-stats strong {
  font-family: Georgia, serif;
  font-size: 30px;
  color: var(--primary);
}

.mini-stats span {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.values-section {
  padding: 90px 0;
  background: var(--cream);
}

/* Journey / timeline */

.journey-section {
  padding: 90px 0;
}

.timeline {
  max-width: 900px;
  margin: auto;
  padding: 0 25px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 45px 60px;
}

.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1px var(--gold);
}

.timeline-item:nth-child(odd) .timeline-dot {
  right: -7px;
}

.timeline-item:nth-child(even) .timeline-dot {
  left: -7px;
}

.timeline-year {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--primary);
  background: var(--cream);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.timeline-content h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  color: var(--dark);
}

.timeline-content p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.7;
}

/* Founder quote */

.quote-section {
  padding: 40px 25px 100px;
}

.quote-container {
  max-width: 800px;
  margin: auto;
  text-align: center;
  padding: 60px 40px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 15px;
}

.quote-mark {
  font-family: Georgia, serif;
  font-size: 70px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
}

.quote-container > p {
  font-family: Georgia, serif;
  font-size: 24px;
  font-style: italic;
  line-height: 1.55;
  color: var(--dark);
}

.quote-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.quote-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.quote-author strong {
  display: block;
  font-size: 14px;
}

.quote-author small {
  color: var(--muted);
  font-size: 12px;
}

.founder-photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 2px solid var(--gold-light);
  box-shadow: 0 6px 20px rgba(70, 40, 20, 0.15);
}

.founder-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.founder-info strong {
  font-size: 16px;
}

.founder-info small {
  font-size: 13px;
  opacity: 0.75;
}

.ceo-link {
  color: inherit;
  text-decoration: none;
}

.ceo-link:hover {
  color: var(--gold-light);
  text-decoration: underline;
}

.story-quote {
  margin-top: 40px;
  padding: 20px 30px;
  border-top: 1px solid #ded5c7;
  border-bottom: 1px solid #ded5c7;
}

.story-quote p {
  margin: 20px auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1.5;
  color: #29251f;
}

.story-quote p strong {
  color: #8b6b3f;
}

.quote-line {
  display: block;
  width: 40px;
  height: 1px;
  background: #b08a52;
  margin: 25px auto;
}

.story-quote h4 {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
}

.story-quote small {
  font-size: 12px;
  letter-spacing: 2px;
  color: #8b8174;
}

@media (max-width: 900px) {
  .story-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .story-content {
    max-width: 600px;
    margin: auto;
  }

  .mini-stats {
    justify-content: center;
  }

  .timeline::before {
    left: 8px;
  }

  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    width: 100%;
    left: 0;
    text-align: left;
    padding: 0 0 45px 40px;
  }

  .timeline-item:nth-child(odd) .timeline-dot,
  .timeline-item:nth-child(even) .timeline-dot {
    left: 1px;
    right: auto;
  }
}

@media (max-width: 700px) {
  .story-quote {
    padding: 45px 20px;
  }

  .story-quote p {
    font-size: 24px;
  }
}

@media (max-width: 650px) {
  .about-hero {
    padding: 50px 0 60px;
  }

  .story-section,
  .journey-section {
    padding: 60px 0;
  }

  .story-content h2 {
    font-size: 30px;
  }

  .quote-container {
    padding: 40px 22px;
  }

  .quote-container > p {
    font-size: 18px;
  }
}

/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-hero {
  padding-bottom: 150px;
}

.contact-info-section {
  padding: 0 0 90px;
}

.contact-info-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  transform: translateY(-70px);
}

.contact-info-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.contact-info-card:hover {
  transform: translateY(-6px);
}

.contact-info-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.contact-info-card h3 {
  font-family: Georgia, serif;
  font-size: 16px;
}

.contact-info-card p {
  color: var(--dark);
  font-weight: 700;
  font-size: 13px;
  margin-top: 6px;
}

.contact-info-card > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 6px;
}

.contact-main {
  padding: 0 0 100px;
}

.contact-main-container {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: start;
}

.contact-form-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 45px;
}

.contact-form-panel h2 {
  font-family: Georgia, serif;
  font-size: 32px;
  margin-top: 8px;
  color: var(--dark);
}

.contact-form-intro {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
  margin-bottom: 30px;
  line-height: 1.7;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--dark);
  background: white;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 152, 62, 0.15);
}

.form-error {
  display: none;
  color: #b3412c;
  font-size: 11px;
  margin-top: 6px;
}

.form-group.invalid input,
.form-group.invalid textarea {
  border-color: #b3412c;
}

.form-group.invalid .form-error {
  display: block;
}

.contact-submit {
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
}

.contact-submit.sending {
  opacity: 0.75;
  pointer-events: none;
}

.contact-submit.sent {
  background: #3f7a4f;
  box-shadow: none;
}

.contact-side-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-side-card {
  background: linear-gradient(135deg, #2d211a, #463025);
  color: white;
  border-radius: 15px;
  padding: 32px;
}

.contact-side-icon {
  font-size: 30px;
  margin-bottom: 12px;
}

.contact-side-card h3 {
  font-family: Georgia, serif;
  font-size: 20px;
}

.contact-side-card p {
  color: #d6ccc4;
  font-size: 13px;
  margin: 12px 0 18px;
  line-height: 1.7;
}

.contact-side-card .secondary-button {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.contact-hours,
.contact-socials {
  background: white;
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 28px 32px;
}

.contact-hours h3,
.contact-socials h3 {
  font-family: Georgia, serif;
  font-size: 17px;
  margin-bottom: 14px;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.hours-row:last-child {
  border-bottom: none;
}

.hours-row span {
  color: var(--muted);
}

.contact-social-icons a {
  color: var(--dark);
}

.contact-social-icons a:hover {
  color: var(--primary);
}

.location-section {
  padding: 20px 25px 100px;
}

.location-container {
  max-width: var(--max-width);
  margin: auto;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  border: 1px solid var(--border);
}

.location-text {
  padding: 55px;
}

.location-text h2 {
  font-family: Georgia, serif;
  font-size: 34px;
  margin-top: 8px;
  color: var(--dark);
}

.location-text > p {
  color: var(--muted);
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.8;
}

.location-address {
  margin-top: 22px;
  font-weight: 700;
  font-size: 14px;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.location-visual {
  height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f2d9a6, #e4bd72);
}

.location-pin-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-ring {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(43, 33, 27, 0.25);
  animation: pulseRing 2.4s ease-out infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.location-pin {
  font-size: 40px;
  z-index: 2;
  animation: cardFloat 3s ease-in-out infinite;
}

.faq-section {
  padding: 30px 0 110px;
}

.faq-list {
  max-width: 800px;
  margin: auto;
  padding: 0 25px;
  display: grid;
  gap: 14px;
}

.faq-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  text-align: left;
  border: none;
  background: white;
  padding: 20px 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.faq-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition:
    transform 0.35s var(--ease),
    background 0.35s;
}

.faq-item.open .faq-icon {
  transform: rotate(135deg);
  background: var(--gold-light);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.faq-answer > p {
  overflow: hidden;
  padding: 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-answer > p {
  padding: 0 24px 22px;
}

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

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

  .location-container {
    grid-template-columns: 1fr;
  }

  .location-visual {
    height: 220px;
    order: -1;
  }

  .location-text {
    padding: 40px 30px;
  }
}

@media (max-width: 650px) {
  .contact-info-grid {
    grid-template-columns: 1fr 1fr;
    transform: translateY(-40px);
    gap: 12px;
  }

  .contact-info-card {
    padding: 20px 14px;
  }

  .contact-form-panel {
    padding: 28px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .location-text h2 {
    font-size: 27px;
  }
}

/* =====================================================
   RETURNS PAGE
===================================================== */

.returns-hero {
  padding-bottom: 130px;
}

.returns-highlights-section {
  padding: 0 0 90px;
}

.returns-highlights-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  transform: translateY(-70px);
}

.returns-highlight-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease);
}

.returns-highlight-card:hover {
  transform: translateY(-6px);
}

.returns-highlight-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.returns-highlight-card h3 {
  font-family: Georgia, serif;
  font-size: 17px;
}

.returns-highlight-card p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.6;
}

.process-section {
  padding: 30px 0 100px;
}

.process-steps {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}

.process-steps::before {
  content: "";
  position: absolute;
  top: 44px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--border);
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 22px;
  text-align: center;
}

.process-step-number {
  width: 30px;
  height: 30px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-step-icon {
  font-size: 30px;
  margin-bottom: 12px;
}

.process-step h3 {
  font-family: Georgia, serif;
  font-size: 16px;
}

.process-step p {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 8px;
  line-height: 1.65;
}

.eligibility-section {
  padding: 20px 0 100px;
  background: var(--cream);
}

.eligibility-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.eligibility-panel {
  background: white;
  border-radius: 14px;
  padding: 34px;
  border: 1px solid var(--border);
}

.eligibility-panel h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.eligibility-yes {
  border-top: 4px solid #4c8a5c;
}

.eligibility-yes h3 span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e7f3ea;
  color: #3f7a4f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.eligibility-no {
  border-top: 4px solid #b3412c;
}

.eligibility-no h3 span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fbe7e2;
  color: #b3412c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.eligibility-panel ul {
  list-style: none;
  display: grid;
  gap: 13px;
}

.eligibility-panel li {
  font-size: 14px;
  color: var(--dark);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}

.eligibility-yes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #3f7a4f;
  font-weight: 700;
}

.eligibility-no li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #b3412c;
  font-weight: 700;
}

.refund-methods-section {
  padding: 90px 0 100px;
}

.refund-methods-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.refund-method-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 34px 26px;
  text-align: center;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

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

.refund-method-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.refund-method-card h3 {
  font-family: Georgia, serif;
  font-size: 17px;
}

.refund-method-card p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.6;
}

.refund-timeframe {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--cream);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

@media (max-width: 1100px) {
  .returns-highlights-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process-steps {
    grid-template-columns: 1fr 1fr;
  }

  .process-steps::before {
    display: none;
  }

  .refund-methods-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
}

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

@media (max-width: 650px) {
  .returns-hero {
    padding-bottom: 110px;
  }

  .returns-highlights-grid {
    grid-template-columns: 1fr 1fr;
    transform: translateY(-40px);
    gap: 12px;
  }

  .returns-highlight-card {
    padding: 20px 14px;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .eligibility-panel {
    padding: 26px 22px;
  }
}

/* =====================================================
   SHIPPING PAGE
===================================================== */

.shipping-hero {
  padding-bottom: 130px;
}

.shipping-highlights-section {
  padding: 0 0 90px;
}

.shipping-highlights-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  transform: translateY(-70px);
}

.shipping-highlight-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease);
}

.shipping-highlight-card:hover {
  transform: translateY(-6px);
}

.shipping-highlight-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.shipping-highlight-card h3 {
  font-family: Georgia, serif;
  font-size: 17px;
}

.shipping-highlight-card p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.6;
}

/* Five-step delivery journey re-uses .process-steps grid; just widen it */
.shipping-journey-steps {
  grid-template-columns: repeat(5, 1fr);
}

.shipping-journey-steps.process-steps::before {
  left: 9%;
  right: 9%;
}

.rates-section {
  padding: 20px 0 100px;
  background: var(--cream);
}

.rates-table-wrap {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  overflow-x: auto;
}

.rates-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.rates-table thead {
  background: var(--dark);
  color: white;
}

.rates-table th {
  text-align: left;
  padding: 16px 20px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
}

.rates-table td {
  padding: 18px 20px;
  font-size: 14px;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
}

.rates-table tbody tr:last-child td {
  border-bottom: none;
}

.rates-table tbody tr:nth-child(even) {
  background: var(--cream);
}

.rates-table td:first-child {
  font-weight: 700;
}

.info-callouts-section {
  padding: 90px 0 100px;
}

.info-callouts-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.info-callout {
  background: white;
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 38px;
}

.info-callout-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.info-callout h3 {
  font-family: Georgia, serif;
  font-size: 21px;
  color: var(--dark);
}

.info-callout p {
  color: var(--muted);
  font-size: 14px;
  margin: 14px 0 22px;
  line-height: 1.75;
}

.info-callout-dark {
  background: linear-gradient(135deg, #2d211a, #463025);
  border: none;
  color: white;
}

.info-callout-dark h3 {
  color: white;
}

.info-callout-dark p {
  color: #d6ccc4;
}

.intl-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

@media (max-width: 1100px) {
  .shipping-highlights-grid {
    grid-template-columns: 1fr 1fr;
  }

  .shipping-journey-steps {
    grid-template-columns: 1fr 1fr;
  }

  .shipping-journey-steps.process-steps::before {
    display: none;
  }
}

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

@media (max-width: 650px) {
  .shipping-hero {
    padding-bottom: 110px;
  }

  .shipping-highlights-grid {
    grid-template-columns: 1fr 1fr;
    transform: translateY(-40px);
    gap: 12px;
  }

  .shipping-highlight-card {
    padding: 20px 14px;
  }

  .shipping-journey-steps {
    grid-template-columns: 1fr;
  }

  .rates-table th,
  .rates-table td {
    padding: 12px 14px;
    font-size: 12.5px;
  }

  .info-callout {
    padding: 26px 22px;
  }
}

/* =====================================================
   TERMS & CONDITIONS PAGE
===================================================== */

.terms-hero {
  padding-bottom: 45px;
}

.terms-meta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.terms-updated {
  font-size: 12px;
  color: var(--muted);
  background: white;
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 20px;
}

.terms-print {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 20px;
  transition: 0.3s;
}

.terms-print:hover {
  background: var(--cream-dark);
}

.terms-layout-section {
  padding: 60px 0 110px;
}

.terms-layout {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 60px;
  align-items: start;
}

.terms-sidebar {
  position: sticky;
  top: 100px;
}

.terms-sidebar-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 16px;
}

.terms-toc {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--border);
}

.terms-toc a {
  padding: 9px 0 9px 18px;
  font-size: 13.5px;
  color: var(--muted);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition:
    color 0.3s,
    border-color 0.3s;
}

.terms-toc a em {
  font-style: normal;
  color: var(--gold);
  font-weight: 700;
  margin-right: 6px;
  font-size: 11px;
}

.terms-toc a:hover {
  color: var(--dark);
}

.terms-toc a.active {
  color: var(--primary);
  font-weight: 700;
  border-left-color: var(--primary);
}

.terms-toc-mobile {
  display: none;
}

.terms-content {
  min-width: 0;
}

.terms-section {
  padding-bottom: 42px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 110px;
}

.terms-section-last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.terms-number {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 13px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.terms-section h2 {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--dark);
  margin-bottom: 14px;
}

.terms-section p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.85;
  margin-bottom: 14px;
}

.terms-section p:last-child {
  margin-bottom: 0;
}

.terms-section a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terms-section ul {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 6px 0 4px;
}

.terms-section li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.terms-section li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--gold);
  font-size: 12px;
}

.terms-contact-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: var(--cream);
  border-radius: 12px;
  padding: 26px;
  margin: 20px 0 28px;
}

.terms-contact-box strong {
  display: block;
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 4px;
}

.terms-contact-box span {
  font-size: 13px;
  color: var(--dark);
}

@media (max-width: 1000px) {
  .terms-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .terms-sidebar {
    display: none;
  }

  .terms-toc-mobile {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }

  .terms-toc-mobile a {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
    background: var(--cream);
    padding: 8px 14px;
    border-radius: 20px;
    white-space: nowrap;
  }

  .terms-toc-mobile a.active {
    background: var(--primary);
    color: white;
  }
}

@media (max-width: 650px) {
  .terms-section h2 {
    font-size: 21px;
  }

  .terms-contact-box {
    grid-template-columns: 1fr;
  }

  .terms-meta {
    flex-direction: column;
  }
}

/* =====================================================
   CATEGORIES PAGE
===================================================== */

.categories-hero {
  position: relative;
  padding: 70px 0 60px;
  overflow: hidden;
  background: linear-gradient(120deg, #fff9ed, #f8ead7);
  text-align: center;
}

.categories-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 85% 15%,
    #f2d9a6 0%,
    rgba(242, 217, 166, 0) 32%
  );
  pointer-events: none;
}

.categories-hero-container {
  max-width: 800px;
  margin: auto;
  padding: 0 25px;
  position: relative;
  z-index: 2;
}

.categories-hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.15;
  color: var(--dark);
  margin-top: 12px;
}

.categories-hero h1 span {
  color: var(--primary);
  font-style: italic;
}

.categories-hero > .categories-hero-container > p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin-top: 20px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.categories-search-box {
  max-width: 560px;
  margin: 30px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 14px 22px;
  box-shadow: var(--shadow);
}

.categories-search-box span {
  font-size: 16px;
}

.categories-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
}

.categories-stats-section {
  padding: 0 25px 70px;
}

.categories-stats {
  max-width: 900px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
  text-align: center;
}

.categories-stats > div {
  display: flex;
  flex-direction: column;
}

.categories-stats strong {
  font-family: Georgia, serif;
  font-size: 32px;
  color: var(--primary);
}

.categories-stats span {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* Sticky filter tabs */

.category-tabs-wrap {
  position: sticky;
  top: 82px;
  z-index: 500;
  background: rgba(255, 253, 249, 0.97);
  border-bottom: 1px solid var(--border);
  padding: 50px 10px 12px;
}

.header.scrolled ~ .category-tabs-wrap {
  top: 66px;
}

.category-tabs {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: white;
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 30px;
  white-space: nowrap;
  transition: 0.3s;
}

.category-tab:hover {
  border-color: var(--gold);
}

.category-tab.active {
  background: var(--dark);
  color: white;
  border-color: var(--dark);
}

/* Explorer grid */

.category-explorer-section {
  padding: 60px 0 40px;
}

.category-explorer-grid {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  transition: opacity 0.2s ease;
}

.category-explorer-grid.filtering {
  opacity: 0.3;
}

.category-item-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 20px;
  text-align: center;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.category-item-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}

.category-item-card.hidden {
  display: none;
}

.category-item-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: transform 0.35s var(--ease);
}

.category-item-card:hover .category-item-icon {
  transform: scale(1.1) rotate(-6deg);
}

.category-item-card h3 {
  font-family: Georgia, serif;
  font-size: 16px;
  color: var(--dark);
}

.category-item-card p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.6;
  min-height: 32px;
}

.category-item-count {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 13px;
  border-radius: 20px;
  background: var(--cream);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.category-item-highlight {
  background: linear-gradient(160deg, #fff9ed, #f7e6c8);
  border-color: var(--gold);
}

.category-item-highlight .category-item-icon {
  background: var(--dark);
  color: var(--gold-light);
}

.category-item-highlight .category-item-count {
  background: var(--dark);
  color: var(--gold-light);
}

.category-no-results {
  display: none;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 60px 25px;
}

.category-no-results.show {
  display: block;
}

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

@media (max-width: 900px) {
  .category-explorer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-tabs-wrap {
    top: 70px;
  }
}

@media (max-width: 650px) {
  .categories-hero {
    padding: 50px 0 40px;
  }

  .categories-search-box {
    padding: 11px 18px;
  }

  .categories-stats {
    gap: 20px 26px;
  }

  .categories-stats strong {
    font-size: 24px;
  }

  .category-explorer-section {
    padding: 40px 0 20px;
  }

  .category-explorer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .category-item-card {
    padding: 18px 12px;
  }

  .category-item-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .category-item-card h3 {
    font-size: 13.5px;
  }

  .category-item-card p {
    font-size: 10.5px;
    min-height: 26px;
  }
}

/* =====================================================
   SCROLL PROGRESS / BACK-TO-TOP / REVEAL ANIMATION SYSTEM
===================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--primary));
  z-index: 2000;
  transition: width 0.1s linear;
}

.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--dark);
  color: var(--gold-light);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(43, 33, 27, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    visibility 0.35s,
    background 0.3s;
  z-index: 1500;
}

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

.back-to-top:hover {
  background: var(--primary);
}

@media (max-width: 650px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
}

/* Generic scroll-reveal: fades/slides in the first time a section enters
   the viewport, then stays put (never re-hides on scroll up) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}

.reveal[data-reveal="left"] {
  transform: translateX(-50px);
}

.reveal[data-reveal="right"] {
  transform: translateX(50px);
}

.reveal.in-view {
  opacity: 1;
  transform: translate(0, 0);
}

/* Staggered children inside grids, driven by an inline --i index set in JS */
.category-card.reveal,
.trust-card.reveal {
  transition-delay: calc(var(--i, 0) * 0.08s);
}

/* =====================================================
   TOAST
===================================================== */

.toast-message {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--dark);
  color: white;
  padding: 14px 26px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  z-index: 3000;
  animation: toastIn 0.4s var(--ease);
}

.toast-message.hide {
  animation: toastOut 0.3s var(--ease) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

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

  .reveal,
  .product-card,
  .hero-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================
   RESPONSIVE — GENERAL LAYOUT BREAKPOINTS
===================================================== */

@media (max-width: 1100px) {
  .navigation {
    gap: 15px;
  }

  .navigation a {
    font-size: 12px;
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .navigation {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content {
    max-width: 700px;
    margin: auto;
  }

  .hero-buttons,
  .hero-features {
    justify-content: center;
  }

  .hero-visual {
    height: 420px;
  }

  .kundali-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kundali-content {
    max-width: 700px;
    margin: auto;
  }

  .kundali-list {
    text-align: left;
    max-width: 400px;
    margin: 25px auto;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .announcement-content {
    gap: 10px;
    justify-content: space-between;
    font-size: 9px;
  }

  .announcement-content span:nth-child(2) {
    display: none;
  }

  .header-container {
    min-height: 70px;
    padding: 0 15px;
  }

  .logo {
    min-width: auto;
  }

  .logo-text small {
    display: none;
  }

  .logo-text strong {
    font-size: 20px;
  }

  .logo-symbol {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .cart-button span {
    display: none;
  }

  .hero {
    min-height: auto;
  }

  .hero-container {
    min-height: auto;
    padding: 60px 20px 80px;
  }

  .hero h1 {
    font-size: 45px;
  }

  .hero-content > p {
    font-size: 14px;
  }

  .hero-visual {
    height: 350px;
  }

  .mandala {
    width: 270px;
    height: 270px;
  }

  .mandala-inner {
    width: 100px;
    height: 100px;
    font-size: 52px;
  }

  .floating-card {
    min-width: 175px;
    padding: 10px;
  }

  .card-top {
    top: 10px;
    right: 0;
  }

  .card-bottom {
    bottom: 20px;
    left: 0;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 30px;
  }

  .section-heading h2 {
    font-size: 34px;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 15px;
  }

  .category-card {
    min-height: 200px;
  }

  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 15px;
  }

  .product-image {
    height: 180px;
  }

  .product-info {
    padding: 13px;
  }

  .product-info h3 {
    font-size: 15px;
  }

  .kundali-section {
    padding: 70px 0;
  }

  .kundali-content h2 {
    font-size: 40px;
  }

  .kundali-circle {
    width: 270px;
    height: 270px;
  }

  .promo-container {
    padding: 40px 25px;
  }

  .promo-content h2 {
    font-size: 35px;
  }

  .promo-symbol {
    display: none;
  }

  .trust-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 15px;
  }

  .newsletter-container {
    flex-direction: column;
    align-items: stretch;
    padding: 30px 20px;
  }

  .newsletter form {
    min-width: 0;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 35px 20px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 39px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .category-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .product-image {
    height: 120px;
  }

  .product-placeholder {
    font-size: 40px;
  }

  .product-badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 8px;
  }

  .product-info {
    padding: 10px;
  }

  .product-category {
    font-size: 8px;
  }

  .product-info h3 {
    font-size: 12px;
    margin-top: 3px;
    line-height: 1.3;
  }

  .product-rating {
    font-size: 9px;
    margin-top: 4px;
  }

  .product-price {
    margin-top: 6px;
  }

  .product-price strong {
    font-size: 14px;
  }

  .product-price del {
    font-size: 10px;
  }

  .add-cart {
    margin-top: 8px;
    padding: 8px;
    font-size: 11px;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   MOBILE APP-READY ENHANCEMENTS (appended)
   These rules only fire inside existing mobile breakpoints
   (≤900px) — nothing here changes the desktop site.
===================================================== */

/* --- Fix: the products.js hamburger toggles the ".active" class
   on #mobileMenu, but no rule made ".mobile-menu.active" visible.
   This makes the menu you already built actually open. --- */
@media (max-width: 900px) {
  .mobile-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
    border-bottom: 1px solid var(--border);
    transition:
      max-height 0.4s var(--ease),
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .mobile-menu.active {
    max-height: 640px;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }

  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 25px;
    font-size: 15px;
    font-weight: 600;
    color: #3d342f;
    border-bottom: 1px solid #f0e8db;
    -webkit-tap-highlight-color: transparent;
    transition:
      background 0.2s ease,
      padding-left 0.2s ease;
  }

  .mobile-menu a:last-child {
    border-bottom: none;
  }

  .mobile-menu a:active {
    background: var(--cream-dark);
    padding-left: 30px;
  }
}

/* --- Hamburger → close icon while the menu is open. Uses the
   aria-expanded attribute products.js already sets, so no HTML
   or JS changes are needed. --- */
@media (max-width: 900px) {
  .menu-button {
    position: relative;
    transition: color 0.2s ease;
  }

  .menu-button[aria-expanded="true"] {
    color: transparent;
  }

  .menu-button[aria-expanded="true"]::after {
    content: "✕";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-size: 20px;
  }
}

/* --- Fix: products.js toggles ".active" on the search bar, but the
   original CSS only styled ".show". Adds the missing hook so search
   actually expands, plus touch-friendly sizing on small screens. --- */
.search-area.active {
  max-height: 110px;
  padding: 15px 25px;
  border-top: 1px solid var(--border);
}

@media (max-width: 650px) {
  .search-area.show,
  .search-area.active {
    padding: 12px 15px;
  }
}

/* --- General touch/app polish: no accidental horizontal scroll,
   no grey tap flash, and 16px inputs so iOS Safari/WebViews don't
   auto-zoom on focus. --- */
@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  a,
  button {
    -webkit-tap-highlight-color: transparent;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* =========================================================
   VYEDI MOBILE EXPERIENCE — AMAZON-STYLE APP LAYOUT
   IMPORTANT:
   All rules below are restricted to max-width: 650px.
   Desktop styling above is intentionally untouched.
========================================================= */

@media (max-width: 650px) {
  /* ---------- MOBILE PAGE FOUNDATION ---------- */
  html {
    scroll-padding-top: 145px;
  }

  body {
    padding-bottom: 68px;
    background: #f7f5f1;
  }

  /* ---------- COMPACT ANNOUNCEMENT ---------- */
  .announcement {
    min-height: 28px;
    font-size: 9px;
    letter-spacing: 0.35px;
  }

  .announcement-content {
    min-height: 28px;
    padding: 5px 12px;
    gap: 0;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
  }

  .announcement-content span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .announcement-content span:nth-child(2) {
    display: none;
  }

  .announcement-content span:nth-child(3) {
    display: inline;
  }

  /* ---------- MOBILE HEADER ---------- */
  .header {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #e8e4dd;
    box-shadow: 0 2px 12px rgba(43, 33, 27, 0.07);
  }

  .header-container {
    min-height: 58px;
    height: 58px;
    padding: 0 12px;
    gap: 7px;
  }

  .header.scrolled .header-container {
    min-height: 58px;
  }

  .logo {
    flex: 1;
    min-width: 0;
    height: 48px;
  }

  .site-logo {
    width: 82px;
    max-height: 45px;
    object-fit: contain;
  }

  .header-actions {
    gap: 2px;
  }

  .header-actions .icon-button {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  /* Search is always visible on mobile, like a shopping app. */
  #searchButton {
    display: none;
  }

  .cart-button {
    width: 42px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 21px;
    font-size: 18px;
  }

  .cart-button span {
    display: none;
  }

  .cart-button b {
    top: -2px;
    right: -1px;
    min-width: 17px;
    height: 17px;
    font-size: 9px;
  }

  .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    width: 40px;
    height: 40px;
    font-size: 23px;
    border-radius: 50%;
  }

  /* Search row */
  .search-area,
  .search-area.show,
  .search-area.active {
    display: block;
    max-height: 74px;
    padding: 7px 12px 9px;
    border-top: 0;
    overflow: visible;
    background: #fff;
  }

  .search-box {
    height: 48px;
    width: 100%;
    max-width: none;
    border: 1px solid #d8d3ca;
    border-radius: 13px;
    background: #f7f7f7;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  }

  .mobile-search-icon {
    width: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: #25211d;
    transform: rotate(-20deg);
  }

  .search-box input {
    min-width: 0;
    padding: 0 4px;
    font-size: 15px;
    background: transparent;
  }

  .search-box input::placeholder {
    color: #77736d;
    opacity: 1;
  }

  .search-box button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 0 13px 13px 0;
    font-size: 0;
    background: var(--primary);
    position: relative;
  }

  .search-box button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-arrow-icon {
    width: 27px;
    height: 27px;
    display: block;
    color: #fff;
  }

  /* ---------- DELIVERY STRIP ---------- */
  
/* =========================================================
   MOBILE DELIVERY PIN CHECKER
   ========================================================= */

.mobile-delivery-animation {
  flex: 1 1 auto;
  min-width: 40px;
  height: 22px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}



.mobile-delivery-truck {
  position: absolute;
  right: 0;
  top: 1px;
  width: 32px;
  height: 20px;
  color: #9d4b24;
  animation: vyediDeliveryTruckMove 3.8s linear infinite;
  will-change: transform;
}

@keyframes vyediDeliveryTruckMove {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    transform: translateX(calc(-100% - var(--delivery-truck-travel, 0px)));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-delivery-truck {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.mobile-delivery-bar {
  width: 100%;
  border: 0;
  border-top: 1px solid #eeeae4;
  border-bottom: 1px solid #e1ddd6;
  background: #fff;
  color: #403b35;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 13px;
  gap: 7px;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.mobile-delivery-bar:active {
  background: #faf8f5;
}

.mobile-delivery-pin {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: #28231f;
  display: flex;
  align-items: center;
}

.mobile-delivery-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-delivery-bar strong {
  font-weight: 700;
  margin-left: 2px;
}

.mobile-delivery-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: #6b6259;
  transition: transform 0.2s ease;
}

.mobile-delivery-bar.is-open .mobile-delivery-arrow {
  transform: rotate(180deg);
}

.mobile-delivery-panel {
  width: 100%;
  padding: 13px;
  background: #fff;
  border-bottom: 1px solid #e1ddd6;
  box-sizing: border-box;
}

.mobile-delivery-panel[hidden] {
  display: none;
}

.mobile-delivery-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #28231f;
  margin-bottom: 3px;
}

.mobile-delivery-panel-subtitle {
  font-size: 11px;
  color: #756d64;
  margin-bottom: 10px;
}

.mobile-delivery-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.mobile-delivery-input-row input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #d8d1c8;
  border-radius: 4px;
  background: #fff;
  color: #28231f;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.mobile-delivery-input-row input:focus {
  border-color: #9d4b24;
  box-shadow: 0 0 0 2px rgba(157, 75, 36, 0.08);
}

.mobile-delivery-input-row button {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 17px;
  border: 0;
  border-radius: 4px;
  background: #9d4b24;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mobile-delivery-input-row button:active {
  opacity: 0.88;
}

.mobile-delivery-input-row button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mobile-delivery-result {
  min-height: 18px;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.4;
}

.mobile-delivery-result.success {
  color: #2f6b3a;
}

.mobile-delivery-result.error {
  color: #a33a2b;
}

.mobile-delivery-contact {
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
}

.mobile-delivery-contact a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.mobile-delivery-contact a:hover {
  opacity: 0.82;
}

.mobile-delivery-result.loading {
  color: #756d64;
}

.mobile-delivery-bar {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 13px;
    gap: 7px;
    border-top: 1px solid #eeeae4;
    border-bottom: 1px solid #e1ddd6;
    background: #fff;
    color: #403b35;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
  }

  .mobile-delivery-pin {
    font-size: 20px;
    line-height: 1;
    color: #28231f;
  }

  .mobile-delivery-bar strong {
    font-weight: 700;
  }

  .mobile-delivery-arrow {
    margin-left: auto;
    font-size: 18px;
    color: #6b6259;
  }

  /* ---------- HORIZONTAL CATEGORY STRIP ---------- */
  .mobile-shortcuts {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-height: 76px;
    padding: 7px 8px 5px;
    background: #fff;
    border-bottom: 1px solid #e8e3db;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-shortcuts::-webkit-scrollbar {
    display: none;
  }

  .mobile-shortcuts a {
    flex: 0 0 76px;
    min-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 9px;
    color: #312b25;
    font-size: 11px;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-shortcuts a:active {
    background: #f5eee3;
  }

  .mobile-shortcuts a span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf6ef;
    border: 1px solid #e7dccb;
    font-size: 20px;
    box-shadow: 0 2px 7px rgba(70, 40, 20, 0.05);
  }

  .mobile-shortcuts a small {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    color: #51483f;
  }

  /* ---------- MOBILE MENU ---------- */
  #mobileMenu.open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    max-height: none;
    overflow-y: auto;
    z-index: 1600;
    padding-top: 10px;
    padding-bottom: 35px;
    background: #fffdf9;
  }

  /* ---------- AMAZON-STYLE HERO ---------- */
  .hero {
    min-height: auto;
    margin: 0;
    background:
      radial-gradient(
        circle at 82% 35%,
        rgba(230, 193, 122, 0.32),
        transparent 33%
      ),
      linear-gradient(135deg, #fffaf1 0%, #f4eadb 100%);
  }

  .hero-container {
    min-height: auto;
    padding: 27px 15px 34px;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
  }

  .hero-content {
    width: 100%;
    max-width: none;
  }

  .hero-label {
    padding: 6px 10px;
    margin-bottom: 14px;
    font-size: 9px;
    letter-spacing: 0.6px;
  }

  .hero h1 {
    max-width: 330px;
    font-size: 40px;
    line-height: 1.02;
    letter-spacing: -1.3px;
  }

  .hero-content > p {
    max-width: 340px;
    margin-top: 13px;
    font-size: 13px;
    line-height: 1.55;
  }

  .hero-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 17px;
  }

  .primary-button,
  .secondary-button,
  .light-button {
    min-height: 46px;
    padding: 11px 10px;
    gap: 6px;
    border-radius: 9px;
    font-size: 11px;
  }

  .hero-features {
    gap: 8px;
    margin-top: 15px;
    font-size: 9px;
    justify-content: flex-start;
  }

  .hero-features > div {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(234, 223, 210, 0.9);
    border-radius: 999px;
    padding: 5px 7px;
  }

  .hero-visual {
    width: 100%;
    height: 285px;
    margin-top: 4px;
  }

  .mandala {
    width: 235px;
    height: 235px;
  }

  .story-ring-inner {
    width: 67%;
    height: 67%;
  }

  .story-ring-inner img {
    width: 72%;
    height: 72%;
  }

  .floating-card {
    min-width: 145px;
    max-width: 165px;
    padding: 8px 9px;
    gap: 7px;
    border-radius: 9px;
  }

  .floating-card > span {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 17px;
  }

  .floating-card strong {
    font-size: 10px;
  }

  .floating-card small {
    font-size: 8px;
  }

  .card-top {
    top: 4px;
    right: 1px;
  }

  .card-bottom {
    bottom: 10px;
    left: 1px;
  }

  .hero-bottom-wave {
    display: none;
  }

  /* ---------- CATEGORY SECTION ---------- */
  .categories {
    padding: 42px 0 38px;
    background: #fff;
  }

  .section-heading {
    padding: 0 15px;
    margin-bottom: 18px;
    gap: 10px;
  }

  .section-heading h2 {
    font-size: 29px;
  }

  .section-heading p {
    font-size: 12px;
  }

  .view-all {
    font-size: 12px;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 0 12px;
  }

  .category-card {
    min-height: 160px;
    padding: 15px 9px;
    border-radius: 12px;
  }

  .category-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 9px;
    font-size: 26px;
  }

  .category-card h3 {
    font-size: 14px;
  }

  .category-card p {
    font-size: 9px;
    margin-top: 2px;
  }

  .category-card > span {
    font-size: 9px;
    margin-top: 8px;
  }

  /* ---------- KUNDALI ---------- */
  .kundali-section {
    padding: 55px 0;
  }

  .kundali-container {
    padding: 0 15px;
    gap: 18px;
  }

  .kundali-visual {
    height: 270px;
  }

  .kundali-circle {
    width: 230px;
    height: 230px;
  }

  .kundali-center {
    width: 75px;
    height: 75px;
    font-size: 40px;
  }

  .zodiac {
    font-size: 22px;
  }

  .kundali-content h2 {
    font-size: 32px;
  }

  .kundali-content > p {
    font-size: 13px;
  }

  /* ---------- PRODUCTS ---------- */
  .featured-products {
    padding: 45px 0;
  }

  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 0 12px;
  }

  .product-card {
    border-radius: 12px;
    overflow: hidden;
  }

  .product-image {
    height: 150px;
  }

  .product-info {
    padding: 10px;
  }

  .product-info h3 {
    font-size: 12px;
    line-height: 1.35;
  }

  .product-category {
    font-size: 8px;
  }

  .product-rating {
    font-size: 9px;
  }

  .product-price strong {
    font-size: 15px;
  }

  .product-price del {
    font-size: 9px;
  }

  .add-cart {
    min-height: 36px;
    padding: 7px;
    font-size: 10px;
    border-radius: 7px;
  }

  /* ---------- PROMO ---------- */
  .promo-section {
    padding: 35px 12px;
  }

  .promo-container {
    padding: 32px 22px;
    border-radius: 14px;
  }

  .promo-content h2 {
    font-size: 30px;
  }

  /* ---------- TRUST ---------- */
  .why-us {
    padding: 48px 0;
  }

  .trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 0 12px;
  }

  .trust-card {
    padding: 19px 12px;
    border-radius: 12px;
  }

  .trust-card h3 {
    font-size: 13px;
  }

  .trust-card p {
    font-size: 10px;
    line-height: 1.5;
  }

  /* ---------- NEWSLETTER ---------- */
  .newsletter {
    padding: 40px 12px;
  }

  .newsletter-container {
    padding: 25px 16px;
    border-radius: 13px;
  }

  .newsletter-container h2 {
    font-size: 25px;
  }

  /* ---------- FOOTER ---------- */
  .footer {
    padding-top: 45px;
    padding-bottom: 78px;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    padding: 0 16px 40px;
  }

  .footer-column a {
    font-size: 11px;
  }

  .footer-column h3 {
    font-size: 15px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  /* ---------- FIXED BOTTOM APP NAV ---------- */
  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 67px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #ddd8d0;
    box-shadow: 0 -8px 24px rgba(45, 34, 25, 0.09);
    z-index: 1800;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-bottom-item {
    position: relative;
    border: 0;
    background: transparent;
    color: #2c2722;
    text-decoration: none;
    min-width: 0;
    min-height: 67px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: "Segoe UI", Arial, sans-serif;
  }

  .mobile-bottom-icon {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
  }

  .mobile-bottom-item small {
    font-size: 9px;
    font-weight: 700;
    color: #6e665e;
  }

  .mobile-bottom-item.active {
    color: var(--primary);
  }

  .mobile-bottom-item.active small {
    color: var(--primary);
  }

  .mobile-bottom-item:active {
    transform: scale(0.96);
  }

  .mobile-cart-icon b {
    position: absolute;
    top: -4px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gold);
    color: var(--dark);
    font-size: 8px;
    font-weight: 800;
  }

  /* Back-to-top stays above bottom navigation. */
  .back-to-top {
    right: 14px;
    bottom: 83px;
    width: 39px;
    height: 39px;
    font-size: 16px;
    z-index: 1850;
  }

  .toast-message {
    bottom: 83px;
    max-width: calc(100% - 30px);
    text-align: center;
    padding: 11px 17px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .header-container {
    padding: 0 9px;
  }

  .site-logo {
    width: 75px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero-buttons {
    grid-template-columns: 1fr;
  }

  .mobile-shortcuts a {
    flex-basis: 70px;
    min-width: 70px;
  }

  .mobile-shortcuts {
    min-height: 73px;
  }

  .mobile-shortcuts a span {
    width: 39px;
    height: 39px;
    font-size: 18px;
  }
}

/* Hide newly added mobile-only components on desktop explicitly. */
@media (min-width: 651px) {
  .mobile-delivery-bar,
  .mobile-shortcuts,
  .mobile-bottom-nav,
  .mobile-search-icon {
    display: none !important;
  }
}

/* =========================================================
   VYEDI MOBILE NAVIGATION
   MOBILE ONLY
   ========================================================= */

@media (max-width: 768px) {
  /* -------------------------------------------------------
     HIDE TOP MOBILE ACTIONS
     ------------------------------------------------------- */

  .mobile-header-actions,
  .mobile-actions,
  .mobile-menu-button,
  .mobile-header .header-actions {
    display: none !important;
  }

  /* -------------------------------------------------------
     MOBILE BOTTOM NAVIGATION
     ------------------------------------------------------- */

  #vyediMobileBottomNav {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    height: 68px;

    background: rgba(255, 255, 255, 0.98);

    border-top: 1px solid #eadfd2;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    align-items: stretch;

    z-index: 99990;

    box-shadow: 0 -5px 20px rgba(43, 33, 27, 0.1);

    padding-bottom: env(safe-area-inset-bottom);
  }

  .vyedi-bottom-item {
    position: relative;

    border: none;

    background: transparent;

    color: #5f554d;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 3px;

    cursor: pointer;

    padding: 6px 2px;

    font-family: inherit;

    -webkit-tap-highlight-color: transparent;
  }

  .vyedi-bottom-icon {
    width: 28px;

    height: 27px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 20px;

    line-height: 1;
  }

  .vyedi-bottom-label {
    font-size: 9px;

    font-weight: 600;

    line-height: 1.1;
  }

  .vyedi-bottom-item.active {
    color: #a95727;
  }

  .vyedi-bottom-item.active .vyedi-bottom-icon {
    transform: translateY(-1px);
  }

  /* -------------------------------------------------------
     CART BADGE
     ------------------------------------------------------- */

  .vyedi-mobile-cart-badge {
    position: absolute;

    top: 6px;

    right: calc(50% - 19px);

    min-width: 15px;

    height: 15px;

    padding: 0 4px;

    border-radius: 20px;

    background: #c89532;

    color: white;

    font-size: 8px;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid white;
  }

  /* -------------------------------------------------------
     MOBILE MENU OVERLAY
     ------------------------------------------------------- */

  #vyediMobileDrawer {
    position: fixed;

    inset: 0;

    z-index: 100000;

    pointer-events: none;

    visibility: hidden;
  }

  #vyediMobileDrawer.open {
    pointer-events: auto;

    visibility: visible;
  }

  .vyedi-mobile-overlay {
    position: absolute;

    inset: 0;

    background: rgba(30, 22, 17, 0.48);

    opacity: 0;

    transition: opacity 0.28s ease;

    backdrop-filter: blur(3px);
  }

  #vyediMobileDrawer.open .vyedi-mobile-overlay {
    opacity: 1;
  }

  /* -------------------------------------------------------
     MOBILE DRAWER
     ------------------------------------------------------- */

  .vyedi-mobile-drawer {
    position: absolute;

    top: 0;

    right: 0;

    width: min(88vw, 360px);

    height: 100%;

    background: #fffaf3;

    box-shadow: -10px 0 40px rgba(43, 33, 27, 0.2);

    transform: translateX(105%);

    transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.25, 1);

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
  }

  #vyediMobileDrawer.open .vyedi-mobile-drawer {
    transform: translateX(0);
  }

  /* -------------------------------------------------------
     DRAWER HEADER
     ------------------------------------------------------- */

  .vyedi-mobile-drawer-header {
    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 18px;

    background: #fff;

    border-bottom: 1px solid #eadfd2;
  }

  .vyedi-mobile-drawer-brand {
    display: flex;

    align-items: center;

    gap: 10px;
  }

  .vyedi-mobile-drawer-brand img {
    width: 60px;

    height: 60px;

    object-fit: contain;
  }

  .vyedi-mobile-drawer-brand strong {
    display: block;

    color: #8d481f;

    font-family: Georgia, serif;

    font-size: 22px;
  }

  .vyedi-mobile-drawer-brand span {
    display: block;

    color: #88776a;

    font-size: 9px;
  }

  .vyedi-mobile-close {
    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 1px solid #eadfd2;

    background: #fffaf3;

    color: #40291f;

    font-size: 27px;

    line-height: 1;

    cursor: pointer;
  }

  /* -------------------------------------------------------
     MENU TITLE
     ------------------------------------------------------- */

  .vyedi-mobile-menu-title {
    margin: 18px;

    padding: 15px;

    border-radius: 14px;

    background: linear-gradient(135deg, #fff5df, #f8e4c2);

    display: flex;

    gap: 12px;

    align-items: center;
  }

  .vyedi-mobile-menu-title > span {
    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #bd762e;
  }

  .vyedi-mobile-menu-title strong {
    display: block;

    color: #3b2921;

    font-size: 15px;
  }

  .vyedi-mobile-menu-title small {
    display: block;

    margin-top: 3px;

    color: #927b68;

    font-size: 10px;
  }

  /* -------------------------------------------------------
     NAVIGATION
     ------------------------------------------------------- */

  .vyedi-mobile-nav {
    padding: 0 18px;
  }

  .vyedi-mobile-nav a {
    min-height: 56px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 0 12px;

    text-decoration: none;

    color: #3f322b;

    border-bottom: 1px solid #eee3d8;

    font-size: 14px;

    font-weight: 600;
  }

  .vyedi-mobile-nav a:active {
    background: #f8eee3;
  }

  .mobile-nav-icon {
    width: 32px;

    height: 32px;

    border-radius: 10px;

    background: #f9ead5;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;
  }

  .mobile-nav-arrow {
    margin-left: auto;

    color: #b77a3d;

    font-size: 22px;
  }

  /* -------------------------------------------------------
     QUICK ACCESS
     ------------------------------------------------------- */

  .vyedi-mobile-quick {
    margin: 22px 18px 0;

    padding-top: 17px;

    border-top: 1px solid #eadfd2;
  }

  .vyedi-mobile-quick-title {
    color: #9c582d;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 8px;
  }

  .vyedi-mobile-quick a {
    min-height: 46px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #59483d;

    text-decoration: none;

    font-size: 13px;

    border-bottom: 1px solid #f0e8df;
  }

  .vyedi-mobile-quick a span:first-child {
    width: 28px;

    text-align: center;
  }

  .mobile-drawer-cart-count {
    margin-left: auto;

    min-width: 21px;

    height: 21px;

    border-radius: 50%;

    background: #c89532;

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 10px;

    font-weight: 800;
  }

  /* -------------------------------------------------------
     DRAWER FOOTER
     ------------------------------------------------------- */

  .vyedi-mobile-drawer-footer {
    margin-top: auto;

    padding: 25px 20px 90px;

    text-align: center;

    color: #9a8878;

    font-size: 10px;

    line-height: 1.6;
  }

  .vyedi-mobile-drawer-footer span {
    color: #c89532;

    margin: 0 5px;
  }

  /* -------------------------------------------------------
     PREVENT BODY SCROLL WHEN MENU OPEN
     ------------------------------------------------------- */

  body.vyedi-menu-open {
    overflow: hidden;
  }

  /* -------------------------------------------------------
     EXTRA SMALL PHONES
     ------------------------------------------------------- */

  @media (max-width: 380px) {
    #vyediMobileBottomNav {
      height: 64px;
    }

    .vyedi-bottom-icon {
      font-size: 18px;
    }

    .vyedi-bottom-label {
      font-size: 8px;
    }
  }
}

/* =========================================================
   VYEDI MOBILE HEADER + BOTTOM NAVIGATION
   DESKTOP COMPLETELY UNCHANGED
========================================================= */

@media (max-width: 768px) {
  /* =======================================================
     REMOVE EXISTING TOP-RIGHT PROFILE / CART / HAMBURGER
     
     Your actual HTML uses .header-actions.
  ======================================================= */

  .header-actions {
    display: none !important;
  }

  /* =======================================================
     MOBILE BOTTOM NAVIGATION
  ======================================================= */

  #vyediMobileBottomNav {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    height: 68px;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    background: rgba(255, 255, 255, 0.98);

    border-top: 1px solid #e8ddd1;

    box-shadow: 0 -6px 22px rgba(55, 38, 27, 0.12);

    z-index: 999999;

    padding: 0 2px env(safe-area-inset-bottom);

    box-sizing: border-box;
  }

  /* =======================================================
     EACH BUTTON
  ======================================================= */

  .vyedi-mobile-nav-item {
    position: relative;

    border: none;

    outline: none;

    background: transparent;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    padding: 5px 2px;

    color: #403832;

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 600;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
  }

  /* =======================================================
     ICON
  ======================================================= */

  .vyedi-mobile-nav-icon {
    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    line-height: 1;
  }

  /* =======================================================
     ACTIVE
  ======================================================= */

  .vyedi-mobile-nav-item.active {
    color: #a95727;
  }

  .vyedi-mobile-nav-item.active .vyedi-mobile-nav-icon {
    transform: translateY(-1px);
  }

  /* =======================================================
     CART BADGE
  ======================================================= */

  .vyedi-mobile-cart-badge {
    position: absolute;

    top: 5px;

    right: calc(50% - 18px);

    min-width: 15px;

    height: 15px;

    padding: 0 3px;

    border-radius: 50%;

    background: #c89532;

    color: white;

    font-size: 8px;

    font-weight: 800;

    display: none;

    align-items: center;

    justify-content: center;

    border: 2px solid white;

    box-sizing: border-box;
  }

  /* =======================================================
     EXISTING MOBILE MENU
     
     IMPORTANT:
     Your existing CSS uses .open.
  ======================================================= */

  #mobileMenu {
    position: fixed !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 68px !important;

    width: 100% !important;

    max-height: calc(100vh - 68px) !important;

    overflow-y: auto !important;

    background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%) !important;

    z-index: 999998 !important;

    box-shadow: 0 -8px 30px rgba(50, 35, 25, 0.15);
  }

  /* Closed */

  #mobileMenu:not(.open) {
    display: none !important;
  }

  /* Open */

  #mobileMenu.open {
    display: block !important;

    animation: vyediMobileMenuIn 0.25s ease;
  }

  @keyframes vyediMobileMenuIn {
    from {
      opacity: 0;

      transform: translateY(15px);
    }

    to {
      opacity: 1;

      transform: translateY(0);
    }
  }

  /* =======================================================
     MOBILE MENU LINKS
  ======================================================= */

  #mobileMenu a {
    display: flex;

    align-items: center;

    min-height: 52px;

    padding: 0 22px;

    box-sizing: border-box;

    color: #3d342f;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    border-bottom: 1px solid #eee5da;
  }

  #mobileMenu a:active {
    background: #f5eadc;
  }

  /* =======================================================
     BODY SPACE FOR BOTTOM NAV
  ======================================================= */

  body {
    padding-bottom: 68px;
  }
}

/* =========================================================
   DESKTOP SAFETY
   Absolutely no desktop changes.
========================================================= */

@media (min-width: 769px) {
  #vyediMobileBottomNav {
    display: none !important;
  }
}

/* =========================================================
   MOBILE — REMOVE LOGO HEADER
   SEARCH BAR BECOMES THE TOP ELEMENT
   DESKTOP UNCHANGED
========================================================= */

@media (max-width: 768px) {
  /* Remove the entire top logo/header row */
  .site-header {
    display: none !important;
  }

  /* If your header uses these wrappers, hide them too */
  .header-main,
  .main-header,
  .header-container,
  .header-inner {
    display: none !important;
  }

  /* Search bar becomes the first element */
  .mobile-search,
  .search-container {
    margin-top: 0 !important;
  }
}

/* =========================================================
   VYEDI MOBILE BOTTOM NAV
   IPHONE-STYLE CURVES + WATER-DROP / ZOOM TAP EFFECT
   MOBILE ONLY — DESKTOP UNCHANGED
   ========================================================= */

@media (max-width: 768px) {
  #vyediMobileBottomNav {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    height: 68px;

    /* Rounded bottom-left + bottom-right corners */
    border-radius: 18px;

    /* Keep the ripple inside the rounded navigation */
    overflow: hidden;
    isolation: isolate;

    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);

    box-shadow:
      0 -2px 10px rgba(0, 0, 0, 0.05),
      0 8px 28px rgba(67, 39, 20, 0.14);

    padding-bottom: 0;
  }

  .vyedi-bottom-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    border: 0;
    border-radius: 14px;
    background: transparent;

    transform: translateZ(0) scale(1);
    transform-origin: center;
    will-change: transform;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    transition:
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 180ms ease;
  }

  /* Immediate physical press — subtle iPhone-like compression */
  .vyedi-bottom-item.is-pressing {
    transform: translateZ(0) scale(0.9);
  }

  /* Keep the pressed state visually clean */
  .vyedi-bottom-item.is-pressing .vyedi-bottom-icon {
    transform: scale(0.94);
  }

  /* Active tab */
  .vyedi-bottom-item.active {
    background: rgba(157, 75, 36, 0.055);
  }

  .vyedi-bottom-item.active .vyedi-bottom-icon {
    animation: vyediIconPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes vyediIconPop {
    0% {
      transform: scale(1);
    }
    42% {
      transform: scale(1.24);
    }
    72% {
      transform: scale(0.94);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Water-drop ripple created by JS at the exact touch point */
  .vyedi-ripple {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0;
    top: 0;

    border-radius: 50%;
    pointer-events: none;

    background: radial-gradient(
      circle,
      rgba(157, 75, 36, 0.24) 0%,
      rgba(157, 75, 36, 0.13) 42%,
      rgba(157, 75, 36, 0) 72%
    );

    transform: translate(-50%, -50%) scale(0);
    opacity: 0;

    z-index: -1;

    animation: vyediWaterDrop 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }

  @keyframes vyediWaterDrop {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0.62;
    }

    35% {
      transform: translate(-50%, -50%) scale(2.2);
      opacity: 0.38;
    }

    70% {
      transform: translate(-50%, -50%) scale(5.8);
      opacity: 0.16;
    }

    100% {
      transform: translate(-50%, -50%) scale(8.5);
      opacity: 0;
    }
  }

  /* A tiny highlight gives the touch a liquid/water feel */
  .vyedi-bottom-item::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    left: 50%;
    top: 38%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
  }

  .vyedi-bottom-item.is-pressing::after {
    animation: vyediTouchHighlight 260ms ease-out forwards;
  }

  @keyframes vyediTouchHighlight {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.75;
    }
    100% {
      transform: translate(-50%, -50%) scale(3);
      opacity: 0;
    }
  }

  /* Do not scale the cart badge with the button */
  .vyedi-mobile-cart-badge {
    transform: none !important;
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .vyedi-bottom-item,
    .vyedi-bottom-item.is-pressing {
      transition: none;
      transform: none;
    }

    .vyedi-bottom-item.active .vyedi-bottom-icon,
    .vyedi-ripple,
    .vyedi-bottom-item.is-pressing::after {
      animation: none !important;
    }
  }
}

/* Desktop: mobile navigation never appears */
@media (min-width: 769px) {
  #vyediMobileBottomNav {
    display: none !important;
  }
}

/* =========================================================
   DESKTOP SAFETY
   NOTHING CHANGES ABOVE 768px
========================================================= */

@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   VYEDI WELCOME SPLASH
========================================================= */

#vyediSplash {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fdfcf7;

  opacity: 1;
  visibility: visible;

  transition:
    opacity 700ms ease,
    visibility 700ms ease;
}

#vyediSplash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vyedi-splash-content {
  text-align: center;
}

.vyedi-splash-logo {
  display: block;

  width: 150px;
  max-width: 45vw;
  height: auto;

  margin: 0 auto;

  opacity: 0;
  transform: scale(0.55);

  animation: vyediLogoEnter 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.vyedi-splash-content h1 {
  margin: 24px 0 0;

  font-size: 28px;
  font-weight: 600;

  opacity: 0;
  transform: translateY(15px);

  animation: vyediWelcomeEnter 600ms ease forwards;

  animation-delay: 500ms;
}

.vyedi-splash-content p {
  margin: 8px 0 0;

  font-size: 15px;

  opacity: 0;

  animation: vyediWelcomeFade 500ms ease forwards;

  animation-delay: 800ms;
}

@keyframes vyediLogoEnter {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }

  60% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes vyediWelcomeEnter {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vyediWelcomeFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .vyedi-splash-logo {
    width: 125px;
  }

  .vyedi-splash-content h1 {
    font-size: 24px;
  }

  .vyedi-splash-content p {
    font-size: 14px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #vyediSplash {
    transition: none;
  }

  .vyedi-splash-logo,
  .vyedi-splash-content h1,
  .vyedi-splash-content p {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   HIDE MOBILE BOTTOM NAV DURING VYEDI SPLASH
========================================================= */

body:has(#vyediSplash:not(.hide)) .mobile-bottom-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Smoothly bring bottom navigation back */
.mobile-bottom-nav {
  transition:
    opacity 500ms ease,
    visibility 500ms ease;
}

/* =========================================================
   MOBILE HERO CONTENT — CENTER EVERYTHING
========================================================= */

@media (max-width: 768px) {
  .hero-container .hero-content {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .hero-container .hero-label {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-container h1 {
    width: 100%;
    text-align: center;
  }

  .hero-container .hero-content > p {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-container .hero-buttons {
    width: 100%;
    justify-content: center;
  }

  .hero-container .hero-features {
    justify-content: center;
  }
}

/* =========================================================
   MOBILE — CENTER HERO TITLE
========================================================= */

@media (max-width: 768px) {
  .hero-container .hero-content h1.hero-reveal {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* =========================================================
   HERO CIRCLE — MULTIPLE ROTATING IMAGES
========================================================= */

.story-ring-inner {
  position: relative;
  overflow: hidden;
}

.story-ring-inner .hero-circle-image {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  object-fit: contain;
  border-radius: 50%;

  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.story-ring-inner .hero-circle-image.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 768px) {
  .mandala-inner {
    width: 300px;
    height: 300px;
    font-size: 85px;
  }
}

@media (max-width: 768px) {
  .story-ring-inner .hero-circle-image {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .mandala::before {
    inset: 15px;
  }

  .mandala::after {
    inset: 35px;
  }
}

/* =====================================================
   SCROLLING ANNOUNCEMENT BAR
===================================================== */

.announcement {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.announcement-track {
  display: flex;
  width: max-content;
  animation: announcementScroll 30s linear infinite;
}

.announcement-content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.announcement-content span {
  display: inline-flex;
  align-items: center;
  margin-right: 100px;
}

/* Continuous scrolling */

@keyframes announcementScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Mobile */

@media (max-width: 768px) {
  .announcement-track {
    animation-duration: 30s;
  }

  .announcement-content span {
    margin-right: 30px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .announcement-track {
    animation: none;
  }
}

.kundali-center {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.kundali-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

@media (max-width: 768px) {
  .kundali-center {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
  }

  .kundali-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }
}

/* =========================
   ZODIAC CIRCULAR ORBIT
========================= */

.zodiac-orbit {
  position: absolute;
  width: 270px;
  height: 270px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;

  animation: zodiacOrbit 20s linear infinite;

  pointer-events: none;
  z-index: 5;
}

.zodiac-slot {
  position: absolute;
  width: 34px;
  height: 34px;
}

.zodiac-slot span {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--gold-light);
  font-size: 24px;

  /* keeps zodiac upright while orbit rotates */
  animation: zodiacKeepUpright 20s linear infinite;
}

/* TOP */
.zodiac-slot-1 {
  top: -17px;
  left: 50%;
  margin-left: -17px;
}

/* RIGHT */
.zodiac-slot-2 {
  top: 50%;
  right: -17px;
  margin-top: -17px;
}

/* BOTTOM */
.zodiac-slot-3 {
  bottom: -17px;
  left: 50%;
  margin-left: -17px;
}

/* LEFT */
.zodiac-slot-4 {
  top: 50%;
  left: -17px;
  margin-top: -17px;
}

/* ROTATE THE WHOLE CIRCLE */
@keyframes zodiacOrbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* KEEP SYMBOLS UPRIGHT */
@keyframes zodiacKeepUpright {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

/* =========================================================
   MOBILE View Zodiac Orbit
    ========================================================= */
@media (max-width: 768px) {
  .zodiac-orbit {
    width: 205px;
    height: 205px;
    animation-duration: 20s;
  }

  .zodiac-slot {
    width: 32px;
    height: 32px;
  }

  .zodiac-slot span {
    font-size: 22px;
    animation-duration: 20s;
  }

  .zodiac-slot-1 {
    top: -16px;
    margin-left: -16px;
  }

  .zodiac-slot-2 {
    right: -16px;
    margin-top: -16px;
  }

  .zodiac-slot-3 {
    bottom: -16px;
    margin-left: -16px;
  }

  .zodiac-slot-4 {
    left: -16px;
    margin-top: -16px;
  }
}

@media (max-width: 768px) {
  .kundali-content {
    width: 100%;
    max-width: 100%;
    text-align: center !important;
    margin: 0 auto;
  }

  .kundali-content h2 {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  .kundali-content > p {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  .kundali-list {
    text-align: center !important;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .kundali-list div {
    text-align: left;
  }

  .kundali-content .primary-button {
    display: block;
    width: fit-content;
    margin: 25px auto 0;
  }
}
/* =========================================================
   MOBILE FOOTER LOGO - FINAL FIX
   ========================================================= */

@media (max-width: 768px) {
  .footer-brand {
    width: 100% !important;
    text-align: center !important;
  }

  .footer-brand > a.logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 auto 18px !important;
  }

  .footer-brand > a.logo img.site-logo {
    width: auto !important;
    height: 100px !important;

    max-width: none !important;
    max-height: none !important;

    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: contain !important;
    display: block !important;

    margin: 0 auto !important;
  }

  .footer-brand > p {
    width: 100% !important;
    max-width: 300px !important;

    margin: 0 auto 20px !important;

    text-align: center !important;
  }

  .footer-brand .social-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* =========================================================
   MOBILE FOOTER SOCIAL ICONS
   Remove background, border, and shadow for smaller screens
========================================================= */

@media (max-width: 600px) {
  .social-icons a {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .social-icons svg {
    width: 28px;
    height: 28px;
  }
}

/* =========================================================
   MOBILE FOOTER BOTTOM / LICENSE
   ========================================================= */

@media (max-width: 768px) {
  .footer-bottom {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    gap: 8px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }

  .footer-bottom p {
    width: 100%;
    margin: 0 !important;
    text-align: center !important;
  }
}

/*===========================================================
   MOBILE FOOTER BOTTOM / LICENSE
   ========================================================= */
.footer {
  padding-bottom: 0 !important;
}

.footer-bottom {
  padding-bottom: 5px !important;
}

/* =========================================================
   VYEDI MOBILE DRAWER
========================================================= */

/* Desktop: completely disabled */
#vyediMobileDrawer {
  display: none !important;
}

/* Mobile only */
@media (max-width: 768px) {
  #vyediMobileDrawer {
    display: block !important;
  }
}

/* =====================================================
   CART BADGE
   ===================================================== */

.vyedi-cart-item {
  position: relative;
}

.vyedi-cart-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vyedi-cart-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Product count bubble */

.vyedi-mobile-cart-badge {
  position: absolute;

  top: -8px;
  right: -10px;

  min-width: 17px;
  height: 17px;

  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  border-radius: 50%;

  background: #9d4b24;
  color: #ffffff;

  border: 2px solid #ffffff;

  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;

  z-index: 10;
}

/* Bigger numbers */

.vyedi-mobile-cart-badge[data-count="10"],
.vyedi-mobile-cart-badge[data-count="11"],
.vyedi-mobile-cart-badge[data-count="12"] {
  border-radius: 10px;
  min-width: 21px;
}

/* Hide badge when cart is empty */

.vyedi-mobile-cart-badge.empty {
  display: none;
}

/* Small animation when quantity changes */

.vyedi-mobile-cart-badge.bump {
  animation: vyediCartBadgeBump 0.3s ease;
}

@keyframes vyediCartBadgeBump {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

/* Hide breadcrumb on mobile devices */

@media (max-width: 768px) {
  .products-breadcrumb {
    display: none;
  }
}

/* =========================================================
   VYEDI LANGUAGE SWITCHER
   ========================================================= */

.vyedi-language-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.vyedi-language-label {
  font-size: 13px;
  font-weight: 600;
  color: #51443b;
  white-space: nowrap;
}

.vyedi-language-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.vyedi-language-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9b4d20;
  pointer-events: none;
  z-index: 2;
}

.vyedi-language-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  min-width: 125px;
  height: 40px;

  padding: 0 34px 0 38px;

  border: 1px solid #eadfd3;
  border-radius: 10px;

  background-color: #fffaf2;

  color: #2b211b;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.vyedi-language-select:hover {
  border-color: #c89532;
  background-color: #ffffff;
}

.vyedi-language-select:focus {
  border-color: #9b4d20;

  box-shadow: 0 0 0 3px rgba(155, 77, 32, 0.12);
}

/* Custom arrow */

.vyedi-language-select-wrap::after {
  content: "";

  position: absolute;
  right: 13px;
  top: 50%;

  width: 7px;
  height: 7px;

  border-right: 1.5px solid #51443b;
  border-bottom: 1.5px solid #51443b;

  transform: translateY(-65%) rotate(45deg);

  pointer-events: none;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {
  .vyedi-language-label {
    display: none;
  }

  .vyedi-language-select {
    min-width: 115px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .vyedi-language-switcher {
    gap: 0;
  }

  .vyedi-language-select {
    min-width: 105px;
    height: 36px;

    padding-left: 34px;
    padding-right: 30px;

    border-radius: 9px;

    font-size: 13px;
  }

  .vyedi-language-icon {
    left: 9px;
  }

  .vyedi-language-icon svg {
    width: 16px;
    height: 16px;
  }

  .vyedi-language-select-wrap::after {
    right: 11px;
    width: 6px;
    height: 6px;
  }
}

/* =========================================================
   VYEDI MOBILE LANGUAGE SELECTOR
   ========================================================= */
@media (max-width: 650px) {
  .vyedi-language-switcher {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin-top: 10px;
    padding: 8px 20px 20px;

    box-sizing: border-box;
  }

  .vyedi-language-select-wrap {
    position: relative;

    display: flex;
    align-items: center;

    width: 105px;
    height: 30px;

    padding: 0 24px;

    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #ead9c7;
    border-radius: 15px;

    box-shadow: 0 2px 7px rgba(70, 45, 25, 0.08);
  }

  /* LANGUAGE ICON */
  .vyedi-language-icon {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 5px;

    color: #9b4d20;
  }

  .vyedi-language-icon svg {
    width: 13px;
    height: 13px;

    display: block;
  }

  /* LANGUAGE SELECT */
  .vyedi-language-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    flex: 1;

    width: 0;
    min-width: 0;

    height: 28px;

    margin: 0;
    padding: 0 14px 0 0;

    box-sizing: border-box;

    border: none !important;
    outline: none !important;

    background: transparent !important;
    background-image: none !important;

    color: #51443b;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
  }

  /* REMOVE DEFAULT MICROSOFT ARROW */
  .vyedi-language-select::-ms-expand {
    display: none;
  }

  /* CUSTOM ARROW */
  .vyedi-language-select-wrap::after {
    content: "";

    position: absolute;

    right: 9px;
    top: 50%;

    width: 5px;
    height: 5px;

    border-right: 1px solid #9b4d20;
    border-bottom: 1px solid #9b4d20;

    transform: translateY(-65%) rotate(45deg);

    pointer-events: none;
  }

  .vyedi-language-select option {
    background: #ffffff;
    color: #51443b;

    font-size: 12px;
  }
}

/* =========================================================
   MOBILE ADD TO CART - TOUCH FIX
   ========================================================= */

@media (max-width: 768px) {
  .product-card {
    position: relative;
    z-index: 1;
  }

  .product-info {
    position: relative;
    z-index: 5;
  }

  .add-cart {
    position: relative;
    z-index: 10;

    pointer-events: auto !important;
    touch-action: manipulation;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
  }

  .add-cart::before,
  .add-cart::after {
    pointer-events: none;
  }

  /* Keep product content above decorative layers */
  .product-card *,
  .product-info * {
    pointer-events: auto;
  }

  /* Bottom navigation stays above page,
     but does not interfere with product cards */
  #vyediMobileBottomNav {
    z-index: 9999;
  }
}

/* Login and Signup */


/* =========================================================
   CUSTOMER REVIEWS
========================================================= */

.customer-reviews-section {
  margin-top: 45px;
  padding: 45px 0 10px;
  border-top: 1px solid var(--border-color, #e8ded5);
}

.customer-reviews-section .section-heading {
  max-width: 720px;
  margin-bottom: 35px;
}

.reviews-summary {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
  padding: 28px;
  margin-bottom: 30px;
  border: 1px solid var(--border-color, #e8ded5);
  border-radius: 18px;
  background: #fff;
}

.reviews-summary-rating {
  text-align: center;
  padding-right: 30px;
  border-right: 1px solid var(--border-color, #e8ded5);
}

.reviews-summary-rating strong {
  display: block;
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  color: var(--text-color, #2f241f);
}

.reviews-summary-stars {
  margin: 10px 0 7px;
  color: #b8892f;
  font-size: 19px;
  letter-spacing: 3px;
}

#reviewsTotalCount {
  color: var(--muted-color, #81736b);
  font-size: 12px;
}

.reviews-rating-distribution {
  display: grid;
  gap: 9px;
}

.review-rating-row {
  display: grid;
  grid-template-columns: 32px 1fr 35px;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--muted-color, #81736b);
}

.review-rating-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #eee7e1;
}

.review-rating-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #b8892f;
}

.write-review-card {
  padding: 32px;
  margin-bottom: 45px;
  border: 1px solid var(--border-color, #e8ded5);
  border-radius: 18px;
  background: #fcfaf8;
}

.write-review-heading {
  margin-bottom: 25px;
}

.write-review-heading > span {
  display: block;
  margin-bottom: 7px;
  color: #9b4d20;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.write-review-heading h3 {
  margin: 0 0 7px;
  font-size: 24px;
  font-weight: 600;
}

.write-review-heading p {
  margin: 0;
  color: var(--muted-color, #81736b);
  font-size: 12px;
  line-height: 1.6;
}

.product-review-form {
  display: grid;
  gap: 20px;
}

.review-form-rating {
  display: flex;
  align-items: center;
  gap: 18px;
}

.review-form-rating > label,
.review-form-field > label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color, #2f241f);
  font-size: 11px;
  font-weight: 700;
}

.review-form-rating > label {
  margin: 0;
}

.review-star-input {
  display: flex;
  gap: 2px;
}

.review-star-input button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b8892f;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease;
}

.review-star-input button:hover {
  transform: scale(1.12);
}

.review-star-input button.selected {
  color: #b8892f;
}

.review-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.review-form-field {
  min-width: 0;
}

.review-form-field input,
.review-form-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color, #e8ded5);
  border-radius: 10px;
  background: #fff;
  color: var(--text-color, #2f241f);
  padding: 12px 14px;
  font: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.review-form-field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.review-form-field input:focus,
.review-form-field textarea:focus {
  border-color: #9b4d20;
  box-shadow: 0 0 0 3px rgba(155, 77, 32, .08);
}

.review-form-field label span {
  color: var(--muted-color, #81736b);
  font-weight: 400;
}

.review-form-field small {
  display: block;
  margin-top: 7px;
  color: var(--muted-color, #81736b);
  font-size: 10px;
  line-height: 1.5;
}

#reviewVideos {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px dashed #cdbeb2;
  border-radius: 10px;
  background: #fff;
  font-size: 11px;
}

.review-video-upload-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.review-video-upload-item {
  padding: 10px;
  border: 1px solid var(--border-color, #e8ded5);
  border-radius: 9px;
  background: #fff;
  color: var(--muted-color, #81736b);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-form-message {
  min-height: 18px;
  color: var(--muted-color, #81736b);
  font-size: 11px;
  line-height: 1.5;
}

.review-form-message.success {
  color: #367d4f;
}

.review-form-message.error {
  color: #b44343;
}

.review-submit-button {
  justify-self: start;
  min-width: 170px;
  padding: 13px 20px;
  border: 0;
  border-radius: 9px;
  background: #9b4d20;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.review-submit-button:hover {
  transform: translateY(-1px);
}

.review-submit-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.customer-reviews-list-header {
  margin-bottom: 18px;
}

.customer-reviews-list-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.customer-reviews-items {
  display: grid;
  gap: 15px;
}

.customer-review-card {
  padding: 24px;
  border: 1px solid var(--border-color, #e8ded5);
  border-radius: 15px;
  background: #fff;
}

.customer-review-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.customer-review-customer {
  display: flex;
  align-items: center;
  gap: 11px;
}

.customer-review-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f2e5da;
  color: #9b4d20;
  font-size: 12px;
  font-weight: 700;
}

.customer-review-customer strong {
  display: block;
  font-size: 12px;
}

.customer-review-customer small {
  display: block;
  margin-top: 3px;
  color: var(--muted-color, #81736b);
  font-size: 10px;
}

.customer-review-stars {
  color: #b8892f;
  letter-spacing: 2px;
  font-size: 13px;
}

.customer-review-text {
  margin: 17px 0 0;
  color: var(--text-color, #2f241f);
  font-size: 13px;
  line-height: 1.75;
}

.customer-review-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.customer-review-video {
  width: 100%;
  max-height: 300px;
  display: block;
  border-radius: 10px;
  background: #111;
  object-fit: contain;
}

.customer-review-empty {
  padding: 30px;
  text-align: center;
  border: 1px dashed var(--border-color, #e8ded5);
  border-radius: 14px;
  color: var(--muted-color, #81736b);
  font-size: 12px;
}

@media (max-width: 768px) {
  .customer-reviews-section {
    margin-top: 55px;
    padding-top: 45px;
  }

  .reviews-summary {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 22px;
  }

  .reviews-summary-rating {
    padding-right: 0;
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 1px solid var(--border-color, #e8ded5);
  }

  .write-review-card {
    padding: 22px;
  }

  .review-form-grid {
    grid-template-columns: 1fr;
  }

  .review-form-rating {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .review-video-upload-list {
    grid-template-columns: 1fr;
  }

  .customer-review-card-header {
    flex-direction: column;
  }

  .customer-review-videos {
    grid-template-columns: 1fr;
  }

  .customer-review-video {
    max-height: 320px;
  }

  .review-submit-button {
    width: 100%;
  }
}


/* =========================================================
   REVIEW LOAD MORE
========================================================= */

.customer-reviews-load-more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.load-more-reviews-button {
  min-width: 190px;
  padding: 12px 20px;
  border: 1px solid #9b4d20;
  border-radius: 9px;
  background: #fff;
  color: #9b4d20;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background .2s ease,
    color .2s ease,
    transform .15s ease;
}

.load-more-reviews-button:hover {
  background: #9b4d20;
  color: #fff;
  transform: translateY(-1px);
}

/* =========================================================
   MOBILE REVIEW POLISH
========================================================= */

@media (max-width: 768px) {

  .customer-reviews-section {
    margin-top: 40px;
    padding: 38px 0 10px;
  }

  .customer-reviews-section .section-heading {
    margin-bottom: 22px;
  }

  .customer-reviews-section .section-heading h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .customer-reviews-section .section-heading p {
    max-width: 300px;
    font-size: 11px;
    line-height: 1.5;
  }

  .reviews-summary {
    gap: 18px;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 14px;
  }

  .reviews-summary-rating {
    padding-bottom: 17px;
  }

  .reviews-summary-rating strong {
    font-size: 38px;
  }

  .reviews-summary-stars {
    margin: 7px 0 5px;
    font-size: 17px;
    letter-spacing: 2px;
  }

  .reviews-rating-distribution {
    gap: 7px;
  }

  .review-rating-row {
    grid-template-columns: 28px 1fr 24px;
    gap: 7px;
    font-size: 10px;
  }

  .review-rating-bar {
    height: 6px;
  }

  .write-review-card {
    padding: 18px;
    margin-bottom: 28px;
    border-radius: 14px;
  }

  .write-review-heading {
    margin-bottom: 18px;
  }

  .write-review-heading h3 {
    font-size: 21px;
  }

  .write-review-heading p {
    font-size: 11px;
  }

  .product-review-form {
    gap: 15px;
  }

  .review-form-grid {
    gap: 13px;
  }

  .review-form-field input,
  .review-form-field textarea {
    padding: 11px 12px;
    font-size: 12px;
    border-radius: 8px;
  }

  .review-form-field textarea {
    min-height: 105px;
  }

  .review-star-input button {
    width: 27px;
    height: 27px;
    font-size: 23px;
  }

  .customer-reviews-list-header {
    margin-bottom: 12px;
  }

  .customer-reviews-list-header h3 {
    font-size: 19px;
  }

  .customer-reviews-items {
    gap: 10px;
  }

  .customer-review-card {
    padding: 16px;
    border-radius: 12px;
  }

  .customer-review-card-header {
    gap: 10px;
  }

  .customer-review-avatar {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
    font-size: 10px;
  }

  .customer-review-customer strong {
    font-size: 11px;
  }

  .customer-review-customer small {
    font-size: 9px;
  }

  .customer-review-stars {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .customer-review-text {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
  }

  .customer-review-videos {
    gap: 8px;
    margin-top: 12px;
  }

  .customer-review-video {
    max-height: 260px;
    border-radius: 8px;
  }

  .customer-review-empty {
    padding: 22px 16px;
    border-radius: 12px;
    font-size: 11px;
  }

  .customer-reviews-load-more {
    margin-top: 16px;
  }

  .load-more-reviews-button {
    width: 100%;
    min-width: 0;
    padding: 11px 16px;
  }
}

@media (max-width: 430px) {

  .customer-reviews-section {
    padding-top: 32px;
  }

  .customer-reviews-section .section-heading h2 {
    font-size: 29px;
  }

  .reviews-summary {
    padding: 15px;
  }

  .write-review-card {
    padding: 15px;
  }

  .customer-review-card {
    padding: 14px;
  }

}


/* =========================================================
   CUSTOMER REVIEWS -> RELATED PRODUCTS SPACING
========================================================= */

.customer-reviews-section {
  padding-bottom: 0;
}

.customer-reviews-section .customer-reviews-list {
  margin-bottom: 0;
}

.related-products {
  margin-top: 24px;
}

@media (max-width: 768px) {
  .customer-reviews-section {
    padding-bottom: 0;
  }

  .related-products {
    margin-top: 16px;
  }
}

/* =========================================================
   CUSTOMER REVIEWS HEADING LAYOUT
========================================================= */

.customer-reviews-section .section-heading {
  display: block;
  max-width: 900px;
  margin: 0 auto 35px;
  padding: 0;
  text-align: center;
}

.customer-reviews-section .section-heading > span {
  display: block;
  margin-bottom: 8px;
}

.customer-reviews-section .section-heading h2 {
  margin: 0 0 10px;
}

.customer-reviews-section .section-heading p {
  margin: 0 auto;
  max-width: 650px;
}

/* =========================================================
   CUSTOMER REVIEW CONTENT WIDTH
========================================================= */

.customer-reviews-section .section-heading,
.customer-reviews-section .reviews-summary,
.customer-reviews-section .write-review-card,
.customer-reviews-section .customer-reviews-list {
  width: 88%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .customer-reviews-section .section-heading,
  .customer-reviews-section .reviews-summary,
  .customer-reviews-section .write-review-card,
  .customer-reviews-section .customer-reviews-list {
    width: 100%;
  }
}


/* =========================================================
   MOBILE DELIVERY ARROW - TAP HINT
   ========================================================= */

.mobile-delivery-arrow {
  display: inline-block;
  transform-origin: center;
  animation: vyediDeliveryArrowHint 1.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes vyediDeliveryArrowHint {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  20% {
    transform: translateY(2px) scale(1.08);
  }

  40% {
    transform: translateY(5px) scale(1.15);
  }

  60% {
    transform: translateY(2px) scale(1.08);
  }

  80% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-delivery-arrow {
    animation: none;
  }
}

/* =========================================================
   VYEDI NEWSLETTER
   ========================================================= */

.newsletter-message {
  margin: 12px 0 0;
  min-height: 20px;
  font-size: 14px;
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

.newsletter-message:empty {
  display: none;
}

#newsletterForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0;
  row-gap: 10px;
}

#newsletterForm input[type="email"] {
  min-width: 0;
}

#newsletterForm button[type="submit"] {
  white-space: nowrap;
}

#newsletterForm button:disabled {
  opacity: 0.65;
  cursor: wait;
}

#newsletterForm #newsletterMessage {
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 0;
  min-height: 22px;
  box-sizing: border-box;
  text-align: left;
}

#newsletterForm #newsletterMessage.success {
  padding: 8px 12px;
  border-radius: 6px;
  background: #f1f8f2;
  color: #2e7d32;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

#newsletterForm #newsletterMessage.error {
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff3f3;
  color: #c62828;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

@media (max-width: 600px) {
  #newsletterForm {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  #newsletterForm button[type="submit"] {
    width: 100%;
  }

  #newsletterForm #newsletterMessage {
    grid-column: 1;
  }
}

/* =========================================================
   FINAL NEWSLETTER BUTTON OVERRIDE
   ========================================================= */

#newsletterForm button[type="submit"] {
  width: 170px !important;
  min-width: 170px !important;
  height: 46px !important;
  padding: 12px 28px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  #newsletterForm button[type="submit"] {
    width: 100% !important;
    min-width: 100% !important;
    height: 46px !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
  }
}



/* ============================================================
   MOBILE CATEGORY IMAGE CIRCLES
============================================================ */

.mobile-shortcuts a > span {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-shortcuts a > span > img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.mobile-shortcuts a small {
  margin-top: 5px;
}