/* ===== CSS Reset & Variables (matching homepage) ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --sage:        #7C9473;
      --sage-light:  #A3B89C;
      --sage-dark:   #5B7253;
      --cream:       #FAF8F3;
      --cream-dark:  #F0EDE5;
      --warm-white:  #FFFDF9;
      --text-dark:   #2C3E2D;
      --text-muted:  #5A6B5B;
      --gold:        #B8963E;
      --gold-light:  #E8D5A8;
      --border:      #DDD8CE;
      --shadow-sm:   0 2px 8px rgba(92,114,83,.08);
      --shadow-md:   0 8px 30px rgba(92,114,83,.12);
      --shadow-lg:   0 16px 50px rgba(92,114,83,.16);
      --radius:      12px;
      --radius-lg:   20px;
      --font-heading: 'Playfair Display', 'Georgia', serif;
      --font-body:    'Inter', 'Segoe UI', sans-serif;
      --transition:   .35s cubic-bezier(.4,0,.2,1);
      --red:         #D94F4F;
      --green:       #3A8F5C;
      --announce-h:  40px; /* fallback; JS syncs this to the bar's real rendered height */
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      color: var(--text-dark);
      background: var(--cream);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img { display: block; max-width: 100%; height: auto; }
    a   { text-decoration: none; color: inherit; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    ul, ol { list-style: none; }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ===== Animated Entrance ===== */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section-label {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: .8rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--sage);
      margin-bottom: 12px;
    }
    .section-title {
      font-family: var(--font-heading);
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 16px;
      line-height: 1.25;
    }
    .section-subtitle {
      max-width: 560px;
      margin: 0 auto 48px;
      color: var(--text-muted);
      font-size: 1.05rem;
    }
    .text-center { text-align: center; }

    /* ===========================
       NAVBAR
    ============================== */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      background: rgba(250,248,243,.85);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(221,216,206,.5);
      transition: box-shadow var(--transition);
    }
    .navbar.scrolled { box-shadow: var(--shadow-sm); }
    .navbar-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 72px;
    }
    .logo {
      font-family: var(--font-heading);
      font-size: 1.55rem;
      font-weight: 700;
      color: var(--sage-dark);
      letter-spacing: .5px;
    }
    .logo span { color: var(--gold); }
    .nav-links {
      display: flex; gap: 32px; list-style: none;
    }
    .nav-links a {
      font-size: .9rem;
      font-weight: 500;
      color: var(--text-muted);
      position: relative;
      transition: color var(--transition);
    }
    .nav-links a::after {
      content: '';
      position: absolute; bottom: -4px; left: 0;
      width: 0; height: 2px;
      background: var(--sage);
      border-radius: 1px;
      transition: width var(--transition);
    }
    .nav-links a:hover { color: var(--sage-dark); }
    .nav-links a:hover::after { width: 100%; }

    .nav-icons {
      display: flex; align-items: center; gap: 16px;
    }
    .nav-icon-btn {
      width: 42px; height: 42px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted);
      transition: all var(--transition);
      position: relative;
    }
    .nav-icon-btn:hover { color: var(--sage-dark); background: rgba(124,148,115,.08); }
    .nav-icon-btn svg { width: 20px; height: 20px; }
    .nav-icon-btn .badge-count {
      position: absolute; top: 4px; right: 4px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--sage);
      color: #fff;
      font-size: .65rem;
      font-weight: 600;
      display: flex; align-items: center; justify-content: center;
    }
    /* Wishlist badge starts hidden (empty list) and is only unhidden by
       JS once something's saved — [hidden] needs this explicit rule since
       its default UA-stylesheet display:none is otherwise overridden by
       the display:flex rule above (equal specificity). */
    .nav-icon-btn .badge-count[hidden] { display: none; }

    .nav-toggle {
      display: none; background: none; border: none; cursor: pointer;
      width: 28px; height: 28px; position: relative;
    }
    .nav-toggle span {
      display: block; width: 24px; height: 2px;
      background: var(--text-dark);
      border-radius: 2px;
      position: absolute; left: 2px;
      transition: var(--transition);
    }
    .nav-toggle span:nth-child(1) { top: 6px; }
    .nav-toggle span:nth-child(2) { top: 13px; }
    .nav-toggle span:nth-child(3) { top: 20px; }

    /* ===========================
       BREADCRUMB
    ============================== */
    .breadcrumb {
      padding: 92px 0 16px;
      background: var(--cream);
    }
    .breadcrumb-list {
      display: flex; align-items: center; gap: 8px;
      flex-wrap: wrap;
      font-size: .82rem;
      color: var(--text-muted);
    }
    .breadcrumb-list a {
      color: var(--text-muted);
      transition: color var(--transition);
    }
    .breadcrumb-list a:hover { color: var(--sage-dark); }
    .breadcrumb-list .sep { color: var(--border); }
    .breadcrumb-list .current {
      color: var(--text-dark);
      font-weight: 500;
    }

    /* ===========================
       PRODUCT HERO SECTION
    ============================== */
    .product-hero {
      padding: 16px 0 60px;
      background: var(--cream);
    }
    .product-hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start;
    }

    /* --- Image Gallery --- */
    .gallery {
      position: sticky;
      top: 96px;
    }
    .gallery-main {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: linear-gradient(135deg, var(--cream-dark), rgba(124,148,115,.06));
      border: 1px solid var(--border);
      position: relative;
      cursor: crosshair;
    }
    .gallery-main img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .4s ease;
    }
    .gallery-main.zoomed img {
      transform: scale(2);
    }
    .gallery-discount-badge {
      position: absolute;
      top: 16px; left: 16px;
      padding: 8px 16px;
      background: var(--red);
      color: #fff;
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .5px;
      z-index: 5;
    }
    .gallery-tag {
      position: absolute;
      top: 16px; right: 16px;
      padding: 8px 16px;
      background: var(--sage);
      color: #fff;
      border-radius: 50px;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      z-index: 5;
    }
    .gallery-thumbnails {
      display: flex;
      gap: 12px;
      margin-top: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding-bottom: 4px;
    }
    .gallery-thumbnails::-webkit-scrollbar { display: none; }
    .gallery-thumb {
      flex: 0 0 80px;
      width: 80px; height: 80px;
      border-radius: var(--radius);
      overflow: hidden;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all var(--transition);
      background: var(--cream-dark);
      scroll-snap-align: start;
    }
    .gallery-thumb:hover { border-color: var(--sage-light); }
    .gallery-thumb.active {
      border-color: var(--sage);
      box-shadow: 0 0 0 3px rgba(124,148,115,.15);
    }
    .gallery-thumb img {
      width: 100%; height: 100%;
      object-fit: cover;
    }

    /* Mobile gallery swipe */
    .gallery-mobile-nav {
      display: none;
      justify-content: center;
      align-items: center;
      gap: 2px;
      margin-top: 12px;
    }
    /* The visible dot is small (8px), but the tappable button around it
       is a full ~32px so it's actually reliable to hit with a thumb —
       this is the ONLY navigation control left once the thumbnail strip
       is hidden on mobile, so it needs a real touch target. */
    .gallery-dot {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
      cursor: pointer;
    }
    .gallery-dot::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--border);
      transition: all var(--transition);
    }
    .gallery-dot.active::before {
      background: var(--sage);
      width: 24px;
      border-radius: 4px;
    }

    /* --- Product Info --- */
    .product-info-col {
      padding-top: 8px;
    }
    .product-category-tag {
      display: inline-flex;
      align-items: center; gap: 6px;
      padding: 6px 16px;
      background: rgba(124,148,115,.10);
      border: 1px solid rgba(124,148,115,.18);
      border-radius: 50px;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--sage-dark);
      margin-bottom: 16px;
    }
    .product-title {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.2;
      margin-bottom: 8px;
    }
    .product-short-desc {
      font-size: 1rem;
      color: var(--text-muted);
      margin-bottom: 20px;
      max-width: 480px;
      line-height: 1.7;
    }

    /* Rating */
    .product-rating {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .stars-row { display: flex; gap: 2px; }
    .stars-row svg { width: 18px; height: 18px; color: var(--gold); }
    .rating-number {
      font-weight: 600;
      font-size: .95rem;
      color: var(--text-dark);
    }
    .reviews-count {
      font-size: .88rem;
      color: var(--text-muted);
    }
    .reviews-count a {
      color: var(--sage);
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .reviews-count a:hover { color: var(--sage-dark); }

    /* Price */
    .price-block {
      display: flex; align-items: baseline; gap: 12px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .current-price {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 3vw, 2rem);
      font-weight: 700;
      color: var(--text-dark);
    }
    .original-price {
      font-size: 1.1rem;
      color: var(--text-muted);
      text-decoration: line-through;
    }
    .discount-percent {
      padding: 4px 12px;
      background: rgba(217,79,79,.10);
      color: var(--red);
      border-radius: 50px;
      font-size: .78rem;
      font-weight: 600;
    }
    .price-tax-note {
      font-size: .78rem;
      color: var(--text-muted);
      margin-bottom: 24px;
    }

    /* Stock */
    .stock-status {
      display: inline-flex;
      align-items: center; gap: 8px;
      margin-bottom: 24px;
      font-size: .85rem;
      font-weight: 500;
    }
    .stock-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--green);
      animation: stockPulse 2s ease-in-out infinite;
    }
    @keyframes stockPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(58,143,92,.4); }
      50% { box-shadow: 0 0 0 6px rgba(58,143,92,0); }
    }
    .stock-in { color: var(--green); }
    .stock-low { color: var(--gold); }

    /* Divider */
    .info-divider {
      height: 1px;
      background: var(--border);
      margin: 24px 0;
    }

    /* Variant Selector */
    .variant-section { margin-bottom: 24px; }
    .variant-label {
      font-size: .85rem;
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 10px;
    }
    .variant-options {
      display: flex; gap: 10px;
      flex-wrap: wrap;
    }
    .variant-btn {
      padding: 10px 22px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-size: .85rem;
      font-weight: 500;
      color: var(--text-dark);
      background: var(--warm-white);
      transition: all var(--transition);
      min-width: 44px; min-height: 44px;
      display: flex; align-items: center; justify-content: center;
    }
    .variant-btn:hover { border-color: var(--sage-light); }
    .variant-btn.active {
      border-color: var(--sage);
      background: rgba(124,148,115,.10);
      color: var(--sage-dark);
      box-shadow: 0 0 0 3px rgba(124,148,115,.12);
    }

    /* Quantity selector */
    .qty-section { margin-bottom: 28px; }
    .qty-label {
      display: block;
      font-size: .85rem;
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 10px;
    }
    /* Real WooCommerce <input name="quantity"> stays in the DOM (and in
       sync via main.js) so the add-to-cart request carries the right
       amount — it's just not the control the shopper sees or touches.
       display:none still submits with the form (only `disabled` inputs
       don't) and keeps it out of the tab order, unlike the custom
       −/+ stepper next to it which carries its own aria-labels. */
    .wc-qty-visually-hidden { display: none; }
    .qty-selector {
      display: inline-flex;
      align-items: center;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--warm-white);
    }
    .qty-btn {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-dark);
      transition: all var(--transition);
      user-select: none;
    }
    .qty-btn:hover { background: rgba(124,148,115,.08); color: var(--sage-dark); }
    .qty-btn:disabled { color: var(--border); cursor: not-allowed; }
    .qty-value {
      width: 52px;
      text-align: center;
      font-size: .95rem;
      font-weight: 600;
      color: var(--text-dark);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      padding: 10px 0;
    }

    /* Action buttons */
    .action-buttons {
      display: flex; gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .btn-add-cart-lg {
      flex: 1;
      min-width: 160px;
      padding: 16px 32px;
      background: var(--sage);
      color: #fff;
      border-radius: 50px;
      font-size: .95rem;
      font-weight: 600;
      letter-spacing: .5px;
      transition: all var(--transition);
      box-shadow: 0 4px 20px rgba(124,148,115,.30);
      display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .btn-add-cart-lg:hover {
      background: var(--sage-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(124,148,115,.40);
    }
    .btn-add-cart-lg svg { width: 20px; height: 20px; }
    .btn-buy-now {
      flex: 1;
      min-width: 160px;
      padding: 16px 32px;
      background: var(--text-dark);
      color: #fff;
      border-radius: 50px;
      font-size: .95rem;
      font-weight: 600;
      transition: all var(--transition);
      display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .btn-buy-now:hover {
      background: #1a2a1b;
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .btn-buy-now svg { width: 20px; height: 20px; }

    /* Wishlist & Share */
    .secondary-actions {
      display: flex; gap: 16px;
      margin-bottom: 28px;
    }
    .action-link {
      display: flex; align-items: center; gap: 8px;
      font-size: .85rem;
      font-weight: 500;
      color: var(--text-muted);
      transition: color var(--transition);
      min-height: 44px;
      padding: 0 4px;
    }
    .action-link:hover { color: var(--sage-dark); }
    .action-link svg { width: 18px; height: 18px; }
    .action-link.wishlisted { color: var(--red); }
    .action-link.wishlisted svg { fill: var(--red); }

    /* Delivery info */
    .delivery-info {
      background: var(--warm-white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 24px;
      margin-bottom: 28px;
    }
    .delivery-row {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 10px 0;
    }
    .delivery-row + .delivery-row {
      border-top: 1px solid rgba(221,216,206,.5);
    }
    .delivery-row svg {
      width: 20px; height: 20px;
      color: var(--sage);
      flex-shrink: 0;
      margin-top: 2px;
    }
    .delivery-row-text strong {
      display: block;
      font-size: .85rem;
      font-weight: 600;
      color: var(--text-dark);
    }
    .delivery-row-text span {
      font-size: .8rem;
      color: var(--text-muted);
    }

    /* ===========================
       TRUST BADGES
    ============================== */
    .trust-badges {
      padding: 48px 0;
      background: var(--warm-white);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .trust-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }
    .trust-badge {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 22px;
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: 50px;
      transition: all var(--transition);
      white-space: nowrap;
    }
    .trust-badge:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-sm);
      border-color: var(--sage-light);
    }
    .trust-badge-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(124,148,115,.15), rgba(124,148,115,.05));
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .trust-badge-icon svg { width: 18px; height: 18px; color: var(--sage); }
    .trust-badge span {
      font-size: .82rem;
      font-weight: 600;
      color: var(--text-dark);
    }

    /* ===========================
       LIFESTYLE BANNER
       (scoped to one product only — see
       aarvika_render_scoped_lifestyle_banner() in
       inc/product-sections.php)
    ============================== */
    .aarvika-lifestyle-banner-section {
      margin: 54px 0; /* 48–60px vertical spacing */
    }
    .aarvika-lifestyle-banner {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      text-align: center;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .aarvika-lifestyle-banner-img {
      display: block;
      width: 100%;
      height: auto; /* keeps natural aspect ratio — no cropping, no stretching */
      margin: 0 auto;
    }
    @media (max-width: 640px) {
      .aarvika-lifestyle-banner-section { margin: 48px 0; }
    }

    /* ===========================
       PRODUCT DETAILS TABS / ACCORDION
    ============================== */
    .product-details-section {
      padding: 80px 0;
      background: var(--cream);
    }
    .details-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }

    /* Detail cards */
    .detail-card {
      background: var(--warm-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: all var(--transition);
    }
    .detail-card:hover {
      box-shadow: var(--shadow-sm);
      border-color: var(--sage-light);
    }
    .detail-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 28px;
      cursor: pointer;
      transition: background var(--transition);
      gap: 16px;
      min-height: 44px;
    }
    .detail-card-header:hover { background: rgba(124,148,115,.03); }
    .detail-card-header h3 {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-dark);
      display: flex; align-items: center; gap: 12px;
    }
    .detail-card-header h3 .detail-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(124,148,115,.12), rgba(124,148,115,.04));
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .detail-card-header h3 .detail-icon svg { width: 16px; height: 16px; color: var(--sage); }
    .detail-toggle {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(124,148,115,.10);
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
      flex-shrink: 0;
    }
    .detail-card.open .detail-toggle {
      background: var(--sage);
      transform: rotate(45deg);
    }
    .detail-toggle svg { width: 14px; height: 14px; color: var(--sage); }
    .detail-card.open .detail-toggle svg { color: #fff; }
    .detail-card-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s cubic-bezier(.4,0,.2,1);
    }
    .detail-card.open .detail-card-body {
      max-height: 800px;
    }
    .detail-card-content {
      padding: 0 28px 24px;
      font-size: .9rem;
      color: var(--text-muted);
      line-height: 1.8;
    }
    .detail-card-content ul {
      margin-top: 8px;
    }
    .detail-card-content li {
      padding: 6px 0;
      padding-left: 24px;
      position: relative;
    }
    .detail-card-content li::before {
      content: '';
      position: absolute; left: 0; top: 14px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(124,148,115,.25);
    }

    /* Ingredients list */
    .ingredients-full {
      font-size: .82rem;
      color: var(--text-muted);
      line-height: 1.8;
      padding: 16px 20px;
      background: var(--cream);
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }

    /* Specs table */
    .specs-table {
      width: 100%;
      border-collapse: collapse;
    }
    .specs-table tr + tr {
      border-top: 1px solid var(--border);
    }
    .specs-table td {
      padding: 12px 0;
      font-size: .88rem;
    }
    .specs-table td:first-child {
      font-weight: 600;
      color: var(--text-dark);
      width: 40%;
    }
    .specs-table td:last-child {
      color: var(--text-muted);
    }

    /* ===========================
       REVIEWS SECTION
    ============================== */
    .reviews-section {
      padding: 80px 0;
      background: var(--warm-white);
      border-top: 1px solid var(--border);
    }
    .reviews-header {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 48px;
      margin-bottom: 48px;
      align-items: start;
    }

    /* Rating overview */
    .rating-overview {
      text-align: center;
      padding: 32px;
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .rating-big {
      font-family: var(--font-heading);
      font-size: 3.5rem;
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1;
      margin-bottom: 8px;
    }
    .rating-overview .stars-row {
      justify-content: center;
      margin-bottom: 8px;
    }
    .rating-overview .stars-row svg { width: 22px; height: 22px; }
    .rating-total {
      font-size: .85rem;
      color: var(--text-muted);
    }

    /* Rating bars */
    .rating-bars { padding-top: 8px; }
    .rating-bar-row {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 10px;
    }
    .rating-bar-label {
      font-size: .82rem;
      font-weight: 600;
      color: var(--text-dark);
      display: flex; align-items: center; gap: 4px;
      white-space: nowrap;
      min-width: 50px;
    }
    .rating-bar-label svg { width: 14px; height: 14px; color: var(--gold); }
    .rating-bar-track {
      flex: 1;
      height: 8px;
      background: var(--cream-dark);
      border-radius: 4px;
      overflow: hidden;
    }
    .rating-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      border-radius: 4px;
      transition: width 1s ease;
    }
    .rating-bar-count {
      font-size: .78rem;
      color: var(--text-muted);
      min-width: 32px;
      text-align: right;
    }

    /* Review cards */
    .reviews-list {
      display: grid;
      gap: 20px;
    }
    .review-card {
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      transition: all var(--transition);
    }
    .review-card:hover {
      box-shadow: var(--shadow-sm);
      border-color: var(--sage-light);
    }
    .review-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .review-author {
      display: flex; align-items: center; gap: 12px;
    }
    .review-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--sage-light), var(--sage));
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }
    .review-author-info h5 {
      font-size: .9rem;
      font-weight: 600;
      color: var(--text-dark);
    }
    .review-author-info span {
      font-size: .75rem;
      color: var(--text-muted);
    }
    .review-verified {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: .72rem;
      font-weight: 600;
      color: var(--green);
      padding: 4px 12px;
      background: rgba(58,143,92,.08);
      border-radius: 50px;
    }
    .review-verified svg { width: 14px; height: 14px; }
    .review-stars { margin-bottom: 12px; }
    .review-stars svg { width: 14px; height: 14px; color: var(--gold); }
    .review-text {
      font-size: .9rem;
      color: var(--text-dark);
      line-height: 1.7;
    }
    .review-date {
      margin-top: 12px;
      font-size: .78rem;
      color: var(--text-muted);
    }
    .review-helpful {
      margin-top: 12px;
      display: flex; align-items: center; gap: 16px;
      font-size: .8rem;
      color: var(--text-muted);
    }
    .review-helpful button {
      display: flex; align-items: center; gap: 4px;
      font-size: .8rem;
      color: var(--text-muted);
      padding: 4px 8px;
      border-radius: 6px;
      transition: all var(--transition);
    }
    .review-helpful button:hover { color: var(--sage-dark); background: rgba(124,148,115,.08); }
    .review-helpful button svg { width: 14px; height: 14px; }

    .load-more-reviews {
      display: block;
      margin: 32px auto 0;
      padding: 14px 40px;
      background: transparent;
      border: 1.5px solid var(--border);
      color: var(--text-dark);
      border-radius: 50px;
      font-size: .9rem;
      font-weight: 500;
      transition: all var(--transition);
    }
    .load-more-reviews:hover {
      border-color: var(--sage);
      color: var(--sage-dark);
      background: rgba(124,148,115,.06);
    }

    /* ===========================
       FAQ SECTION
    ============================== */
    .product-faq {
      padding: 80px 0;
      background: var(--cream);
      border-top: 1px solid var(--border);
    }
    .faq-list {
      max-width: 760px;
      margin: 0 auto;
    }
    .faq-item {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 12px;
      background: var(--warm-white);
      overflow: hidden;
      transition: border-color var(--transition), box-shadow var(--transition);
    }
    .faq-item.active {
      border-color: var(--sage-light);
      box-shadow: var(--shadow-sm);
    }
    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      background: none;
      font-size: .95rem;
      font-weight: 500;
      color: var(--text-dark);
      text-align: left;
      cursor: pointer;
      transition: color var(--transition);
      gap: 16px;
      min-height: 44px;
    }
    .faq-question:hover { color: var(--sage-dark); }
    .faq-question .faq-icon {
      flex-shrink: 0;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(124,148,115,.10);
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
    }
    .faq-item.active .faq-icon {
      background: var(--sage);
      transform: rotate(45deg);
    }
    .faq-icon svg { width: 14px; height: 14px; color: var(--sage); }
    .faq-item.active .faq-icon svg { color: #fff; }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s cubic-bezier(.4,0,.2,1);
    }
    .faq-item.active .faq-answer { max-height: 300px; }
    .faq-answer-inner {
      padding: 0 24px 20px;
      font-size: .9rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .faq-answer-inner p {
      margin: 0 0 12px;
    }

    .faq-answer-inner p:last-child {
      margin-bottom: 0;
    }

    /* ===========================
       RELATED PRODUCTS
    ============================== */
    .related-products {
      padding: 80px 0;
      background: var(--warm-white);
      border-top: 1px solid var(--border);
    }
    .products-scroll {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .product-card {
      background: var(--warm-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: all var(--transition);
      position: relative;
    }
    .product-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
    }
    .product-card-image {
      height: 260px;
      background: linear-gradient(135deg, var(--cream-dark), rgba(124,148,115,.08));
      display: flex; align-items: center; justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .product-card-image img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .product-card:hover .product-card-image img { transform: scale(1.06); }
    .product-card-tag {
      position: absolute;
      top: 14px; left: 14px;
      padding: 5px 12px;
      background: var(--sage);
      color: #fff;
      border-radius: 50px;
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      z-index: 2;
    }
    .product-card-info { padding: 20px; }
    .product-card-category {
      font-size: .7rem;
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--sage);
      margin-bottom: 6px;
    }
    .product-card-info h3 {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 8px;
    }
    .product-card-stars {
      display: flex; gap: 2px;
      margin-bottom: 10px;
    }
    .product-card-stars svg { width: 13px; height: 13px; color: var(--gold); }
    .product-card-footer {
      display: flex; align-items: center; justify-content: space-between;
    }
    .product-card-price {
      font-family: var(--font-heading);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-dark);
    }
    .product-card-price .old {
      font-size: .8rem;
      font-weight: 400;
      color: var(--text-muted);
      text-decoration: line-through;
      margin-left: 6px;
    }
    .product-card-cart {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--sage);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
      box-shadow: 0 2px 12px rgba(124,148,115,.25);
    }
    .product-card-cart:hover {
      background: var(--sage-dark);
      transform: scale(1.1);
    }
    .product-card-cart svg { width: 18px; height: 18px; }

    /* Wishlist-page-only "remove" control (see content-product.php) —
       sits opposite the Sale/Featured tag so the two never collide. */
    .product-card-remove {
      position: absolute;
      top: 14px; right: 14px;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: var(--warm-white);
      border: 1px solid var(--border);
      color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
      z-index: 2;
    }
    .product-card-remove svg { width: 16px; height: 16px; }
    .product-card-remove:hover {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      transform: scale(1.08);
    }

    /* ❤️ Add/remove-wishlist toggle shown on every product card EXCEPT the
       Wishlist page itself (which shows .product-card-remove instead — see
       content-product.php), so the two never appear together. */
    .product-card-wishlist {
      position: absolute;
      top: 14px; right: 14px;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: var(--warm-white);
      border: 1px solid var(--border);
      color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
      z-index: 2;
    }
    .product-card-wishlist svg { width: 16px; height: 16px; }
    .product-card-wishlist:hover {
      border-color: var(--red);
      color: var(--red);
      transform: scale(1.08);
    }
    .product-card-wishlist.wishlisted {
      color: var(--red);
      border-color: var(--red);
    }
    .product-card-wishlist.wishlisted svg {
      fill: var(--red);
    }
    .product-card-wishlist.wishlist-pop {
      animation: aarvikaWishlistPop .32s ease;
    }
    @keyframes aarvikaWishlistPop {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.28); }
      100% { transform: scale(1); }
    }

    /* ===========================
       RECENTLY VIEWED
    ============================== */
    .recently-viewed {
      padding: 80px 0;
      background: var(--cream);
      border-top: 1px solid var(--border);
    }
    .recently-scroll {
      display: flex; gap: 20px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding-bottom: 8px;
    }
    .recently-scroll::-webkit-scrollbar { display: none; }
    .recently-card {
      flex: 0 0 200px;
      scroll-snap-align: start;
      background: var(--warm-white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: all var(--transition);
      cursor: pointer;
    }
    .recently-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-sm);
    }
    .recently-card-image {
      height: 160px;
      background: var(--cream-dark);
      overflow: hidden;
    }
    .recently-card-image img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .recently-card-info {
      padding: 14px;
    }
    .recently-card-info h4 {
      font-family: var(--font-heading);
      font-size: .88rem;
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 4px;
    }
    .recently-card-info span {
      font-size: .85rem;
      font-weight: 600;
      color: var(--sage-dark);
    }

    /* ===========================
       FOOTER
    ============================== */
    .footer {
      padding: 80px 0 32px;
      background: var(--text-dark);
      color: rgba(255,255,255,.75);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 60px;
    }
    .footer-brand .logo {
      color: #fff;
      margin-bottom: 16px;
      display: inline-block;
    }
    .footer-brand p {
      font-size: .88rem;
      line-height: 1.7;
      margin-bottom: 24px;
      max-width: 320px;
    }
    .footer-social {
      display: flex; gap: 12px;
    }
    .footer-social a {
      width: 42px; height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.18);
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
    }
    .footer-social a:hover {
      background: var(--sage);
      border-color: var(--sage);
      transform: translateY(-2px);
    }
    .footer-social a svg { width: 18px; height: 18px; color: rgba(255,255,255,.85); }
    .footer-col h4 {
      font-family: var(--font-heading);
      color: #fff;
      font-size: 1rem;
      margin-bottom: 20px;
    }
    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 12px; }
    .footer-col a {
      font-size: .88rem;
      transition: color var(--transition);
    }
    .footer-col a:hover { color: var(--sage-light); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.1);
      padding-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      font-size: .82rem;
    }

    /* ===========================
       WHATSAPP FLOATING BUTTON
    ============================== */
    .whatsapp-float {
      position: fixed;
      bottom: 28px; right: 28px;
      z-index: 999;
      width: 60px; height: 60px;
      border-radius: 50%;
      background: #25D366;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(37,211,102,.40);
      transition: transform .3s ease, box-shadow .3s ease, bottom .25s ease;
      animation: whatsappPulse 2s ease-in-out infinite;
    }
    .whatsapp-float:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 28px rgba(37,211,102,.55);
      animation: none;
    }
    .whatsapp-float svg { width: 32px; height: 32px; fill: #fff; }
    @keyframes whatsappPulse {
      0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.40); }
      50%      { box-shadow: 0 4px 30px rgba(37,211,102,.65), 0 0 0 12px rgba(37,211,102,.12); }
    }

    /* ===========================
       STICKY MOBILE CTA
    ============================== */
    .sticky-mobile-cta {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 998;
      background: rgba(250,248,243,.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid var(--border);
      padding: 12px 16px;
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .sticky-cta-inner {
      display: flex; align-items: center; gap: 12px;
    }
    .sticky-cta-price {
      flex-shrink: 0;
    }
    .sticky-cta-price .current-price {
      font-size: 1.2rem;
    }
    .sticky-cta-price .original-price {
      font-size: .78rem;
    }
    .sticky-cta-buttons {
      flex: 1;
      display: flex; gap: 8px;
    }
    .sticky-cta-buttons .btn-add-cart-lg {
      padding: 12px 20px;
      font-size: .85rem;
      min-width: auto;
    }
    .sticky-cta-buttons .btn-buy-now {
      padding: 12px 20px;
      font-size: .85rem;
      min-width: auto;
    }

    /* ===========================
       SHARE MODAL
    ============================== */
    .share-modal-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(44,62,45,.5);
      backdrop-filter: blur(4px);
      z-index: 2000;
      align-items: center; justify-content: center;
    }
    .share-modal-overlay.active { display: flex; }
    .share-modal {
      background: var(--warm-white);
      border-radius: var(--radius-lg);
      padding: 36px;
      max-width: 420px;
      width: 90%;
      box-shadow: var(--shadow-lg);
      animation: modalIn .3s ease;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(20px) scale(.95); }
      to { opacity: 1; transform: none; }
    }
    .share-modal h3 {
      font-family: var(--font-heading);
      font-size: 1.3rem;
      margin-bottom: 24px;
      color: var(--text-dark);
      text-align: center;
    }
    .share-options {
      display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
      margin-bottom: 24px;
    }
    .share-option {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 12px;
      border-radius: var(--radius);
      transition: all var(--transition);
      cursor: pointer;
      min-width: 72px;
    }
    .share-option:hover { background: rgba(124,148,115,.06); }
    .share-option-icon {
      width: 48px; height: 48px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem;
    }
    .share-option span {
      font-size: .75rem;
      color: var(--text-muted);
      font-weight: 500;
    }
    .share-copy-row {
      display: flex; gap: 8px;
    }
    .share-copy-input {
      flex: 1;
      padding: 10px 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: .82rem;
      color: var(--text-dark);
      background: var(--cream);
      outline: none;
    }
    .share-copy-btn {
      padding: 10px 20px;
      background: var(--sage);
      color: #fff;
      border-radius: var(--radius);
      font-size: .82rem;
      font-weight: 600;
      transition: background var(--transition);
    }
    .share-copy-btn:hover { background: var(--sage-dark); }
    .share-close {
      display: block;
      margin: 16px auto 0;
      font-size: .88rem;
      color: var(--text-muted);
      padding: 8px 24px;
    }
    .share-close:hover { color: var(--sage-dark); }

    /* ===========================
       SKELETON LOADING
    ============================== */
    .skeleton {
      background: linear-gradient(90deg, var(--cream-dark) 25%, var(--cream) 50%, var(--cream-dark) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s ease-in-out infinite;
      border-radius: var(--radius);
    }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ===========================
       RESPONSIVE
    ============================== */
    @media (max-width: 1200px) {
      .products-scroll { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 960px) {
      .product-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .gallery {
        position: static;
      }
      .details-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .reviews-header {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .rating-overview {
        max-width: 320px;
        margin: 0 auto;
      }
      .products-scroll { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-toggle { display: block; }
      .nav-links.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 72px; left: 0; right: 0;
        background: var(--cream);
        padding: 24px;
        gap: 20px;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        z-index: 1001;
      }

      .gallery-main { aspect-ratio: 4 / 3; }
      .gallery-thumbnails { display: none; }
      .gallery-mobile-nav { display: flex; }

      .trust-grid { gap: 10px; }
      .trust-badge { padding: 10px 16px; }
      .trust-badge span { font-size: .75rem; }
      .trust-badge-icon { width: 30px; height: 30px; }

      .sticky-mobile-cta { display: block; }
      /* Default mobile resting position for the WhatsApp bubble on pages
         that have NO sticky Add to Cart bar (home, shop, cart, etc — the
         bar only exists on single product pages). Just a safe-area-aware
         bottom offset, nothing that assumes a cart bar is present.
         On product pages, main.js measures the bar's real rendered height
         at runtime and raises the bubble by exactly that much via an
         inline style (see positionFloatingButtons() in main.js) — that
         inline style always wins over this rule, so the two buttons never
         overlap there either. */
      .whatsapp-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

      .products-scroll { grid-template-columns: repeat(2, 1fr); gap: 16px; }

      .product-details-section { padding: 60px 0; }
      .reviews-section { padding: 60px 0; }
      .product-faq { padding: 60px 0; }
      .related-products { padding: 60px 0; }
      .recently-viewed { padding: 60px 0; }

      .container { padding: 0 16px; }

      /* Compact product cards on mobile: a fixed 260px (desktop) image
         height makes cards very tall once the grid narrows to 1-2
         columns. An aspect-ratio keeps the image fully visible and
         proportional at any card width instead. */
      .product-card-image { height: auto; aspect-ratio: 1 / 1; }
      .product-card-info { padding: 14px; }
      .product-card-category { font-size: .66rem; letter-spacing: 1.2px; margin-bottom: 4px; }
      .product-card-info h3 { font-size: .9rem; margin-bottom: 6px; line-height: 1.35; }
      .product-card-stars { margin-bottom: 6px; }
      .product-card-stars svg { width: 12px; height: 12px; }
      .product-card-stock { font-size: .68rem; margin-bottom: 6px; }
      /* Description is still in the markup/data — only visually clamped
         so it can't blow out the card's height. */
      .product-card-info p {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; font-size: .78rem; line-height: 1.5; margin-bottom: 10px;
      }
      .product-card-price { font-size: 1rem; }
      .product-card-cart { width: 40px; height: 40px; }
      .product-card-cart svg { width: 17px; height: 17px; }
    }

    @media (max-width: 480px) {
      .breadcrumb { padding: 84px 0 12px; }
      .product-hero { padding: 8px 0 40px; }

      .product-title { font-size: 1.5rem; }
      .current-price { font-size: 1.5rem; }

      .action-buttons { flex-direction: column; }
      .btn-add-cart-lg, .btn-buy-now { width: 100%; min-width: auto; }

      .gallery-main { aspect-ratio: 1 / 1; }

      .detail-card-header { padding: 18px 20px; }
      .detail-card-content { padding: 0 20px 20px; }
      .detail-card-header h3 { font-size: 1rem; }

      .review-card { padding: 20px; }

      .products-scroll { grid-template-columns: 1fr 1fr; gap: 12px; }
      .product-card-info { padding: 12px; }

      .recently-card { flex: 0 0 160px; }
      .recently-card-image { height: 120px; }
      .recently-card-info { padding: 10px; }
      .recently-card-info h4 { font-size: .8rem; }

      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
      .footer-bottom { flex-direction: column; text-align: center; }

      .section-title { font-size: 1.6rem; }

      /* Same reasoning as the 768px rule above: this is just the resting
         position for pages without a sticky cart bar. On product pages
         main.js re-measures the (now taller, buttons-stacked) bar and
         raises the bubble by its real height, so it still always clears
         it — this value is never relied on there. */
      .whatsapp-float { width: 52px; height: 52px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 16px; }
      .whatsapp-float svg { width: 28px; height: 28px; }

      .woocommerce ul.products { gap: 10px; }
      .product-card-info { padding: 10px; }

      .sticky-cta-buttons { flex-direction: column; }

      .share-modal { padding: 24px; }

      /* Header: logo + search/wishlist/cart icons + hamburger were sized
         for tablet width and don't fit 320-480px without crowding.
         Compact them so nothing touches the edge or wraps. */
      .navbar-inner { height: 64px; }
      .main-brand-logo { height: 38px; }
      .nav-icons { gap: 6px; }
      .nav-icon-btn { width: 36px; height: 36px; }
      .nav-icon-btn svg { width: 18px; height: 18px; }
    }

    @media (max-width: 375px) {
      .container { padding: 0 12px; }
      .product-title { font-size: 1.35rem; }
      .trust-badge { padding: 8px 12px; }
      .trust-badge span { font-size: .7rem; }
    }

    @media (max-width: 320px) {
      .product-title { font-size: 1.25rem; }
      .product-short-desc { font-size: .9rem; }
      .current-price { font-size: 1.3rem; }
      .navbar-inner { height: 60px; }
      .breadcrumb { padding: 76px 0 10px; }
    }

    /* ===========================
       FOCUS STATES (Accessibility)
    ============================== */
    *:focus-visible {
      outline: 2px solid var(--sage);
      outline-offset: 3px;
      border-radius: 4px;
    }
    button:focus-visible,
    a:focus-visible {
      outline: 2px solid var(--sage);
      outline-offset: 3px;
    }

    /* Print */
    @media print {
      .navbar, .sticky-mobile-cta, .whatsapp-float { display: none !important; }
    }
  
/* --- Dropdown & Logo Overrides --- */
.main-brand-logo {
  height: 48px;
  width: auto;
  display: block;
}
.nav-dropdown {
  position: relative;
}
.dropdown-icon {
  vertical-align: -3px;
  margin-left: 2px;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--warm-white);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-radius: var(--radius);
  padding: 12px;
  min-width: 220px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  margin: 0;
}
.nav-dropdown:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu-brand-link {
  display: block;
  padding: 8px;
  border-radius: var(--radius);
  transition: background-color 0.2s ease;
}
.submenu-brand-link:hover {
  background-color: var(--cream);
}
.submenu-logo {
  height: 60px;
  width: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .submenu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding-left: 16px;
  }
  .nav-dropdown.active .submenu {
    display: block;
  }
}

/* ===========================================================
   AUDIT FIX: homepage sections had no CSS at all.
   main.css only ever covered the navbar, footer, FAQ, trust
   badges, and the single-product page (gallery/related products) —
   the hero, Shop-by-Concern, Natural Active Ingredients / "Ask AI"
   explainer, the AI quiz, the homepage Featured Products grid,
   testimonials, and the CTA banner had zero matching rules, so the
   browser rendered them with default styles (plain stacked text,
   unsized inline SVGs blowing up to their ~300px browser default).
   The rules below use only the existing design tokens/patterns
   already defined above (--sage, --cream, --gold, var(--radius),
   var(--shadow-*), the .section-label/.section-title conventions,
   the .trust-badge "pill" pattern, etc.) so nothing here introduces
   a new visual language — it wires the existing design system to
   the markup that was missing it.

   NOTE: no design mockup/reference was included in this project
   (screenshot.png is the default WordPress placeholder image), so
   if the client has an original Figma/HTML comp for these sections,
   compare against it — these rules are a faithful, non-redesigning
   completion based on the tokens already in this file, not a pixel
   match to an unseen source design.
   =========================================================== */

/* ===========================================================
   STATIC HERO HEADER — image-only, original aspect ratio,
   single "Shop Now" CTA positioned over the image.
   =========================================================== */
.hero-static-header {
  position: relative;
  margin-top: 72px;
  overflow: hidden;
}
body.has-announcement-bar .hero-static-header { margin-top: calc(72px + var(--announce-h)); }

/* Sized purely by the image's own intrinsic aspect ratio (no vh/min-height
   guess) — this is what keeps the CTA's %-based position locked to the
   same visual spot on the image at every screen size, since the wrapper
   never letterboxes or crops away from the image's real bounds. */
.hero-static-media {
  position: relative;
  width: 100%;
  line-height: 0;
  background: var(--cream);
}
.hero-static-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* full image always visible — no cropping, no stretching */
}

/* Positions the theme's existing .btn-primary (unchanged design — same
   background, radius, hover, transition) inside the blank area of the
   glass card, centered below "Nature's Blend". Coordinates were measured
   directly from the actual aarv_banner image (1536x840px): the card
   text block ends around y=539, the card's straight-edge area runs to
   about y=760 before the bottom corners start rounding, and the card is
   horizontally centered around x=1200 — so the button center sits at
   left: 78.1%, top: 77.4% of the image. Using left/top + a centering
   transform (rather than right/bottom offsets) means this stays locked
   to the same point on the image at any screen width, independent of
   the button's own rendered size. Shadow matches how .btn-primary was
   used in the previous hero (stronger drop shadow for legibility over
   the photo); hover is untouched — inherited from .btn-primary:hover. */
.hero-shop-cta.btn-primary {
  position: absolute;
  left: 78.1%;
  top: 77.4%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 18px 38px;
  font-size: 1.12rem;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.hero-shop-cta.btn-primary:hover {
  transform: translate(-50%, -50%) translateY(-2px);
}

@media (max-width: 782px) {
  .hero-static-header { margin-top: 60px; }
  body.has-announcement-bar .hero-static-header { margin-top: calc(60px + var(--announce-h)); }
  .hero-shop-cta.btn-primary { padding: 12px 26px; font-size: .92rem; }
}
@media (max-width: 480px) {
  .hero-shop-cta.btn-primary { padding: 10px 20px; font-size: .82rem; }
}

.btn-primary, .btn-secondary, .btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 32px; border-radius: 50px; font-weight: 600; font-size: .95rem;
  transition: all var(--transition);
}
.btn-primary { background: var(--sage); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--sage-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--text-dark); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--sage); color: var(--sage-dark); }
.btn-white { background: #fff; color: var(--sage-dark); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* --- Shop by Concern --- */
.concerns { padding: 90px 0; }
.concerns-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.concern-card {
  display: block; text-align: center; padding: 32px 20px;
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); position: relative;
  transition: all var(--transition);
}
.concern-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--sage-light); }
.concern-icon { font-size: 2.2rem; margin-bottom: 14px; }
.concern-card h4 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-dark); margin-bottom: 6px; }
.concern-card p { font-size: .85rem; color: var(--text-muted); margin-bottom: 12px; }
.concern-arrow { display: inline-flex; color: var(--sage); }
.concern-arrow svg { width: 18px; height: 18px; }

/* --- Natural Active Ingredients (badges) --- */
.badges { padding: 100px 0; background: var(--warm-white); }
.badges-row {
  display: grid; gap: 28px;
}
.badges-row-primary { grid-template-columns: repeat(5, 1fr); margin-bottom: 48px; }
.badges-row-secondary {
  grid-template-columns: repeat(3, 1fr);
  max-width: 860px; margin-left: auto; margin-right: auto; margin-bottom: 48px;
}
.badge-card {
  padding: 28px 18px; text-align: center;
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius);
}
.badge-icon {
  width: 48px; height: 48px; margin: 0 auto 14px;
  border-radius: 50%; background: rgba(124,148,115,.10);
  display: flex; align-items: center; justify-content: center;
}
.badge-icon svg { width: 22px; height: 22px; color: var(--sage); }
.badge-card h4 { font-family: var(--font-heading); font-size: .95rem; color: var(--text-dark); margin-bottom: 6px; }
.badge-card p { font-size: .8rem; color: var(--text-muted); }
.badges-note { font-size: .78rem; color: var(--text-muted); font-style: italic; margin-top: -20px; }

/* --- Ask AI ingredient explainer --- */
.ing-explainer { max-width: 640px; margin: 0 auto; text-align: center; }
.ing-search-row { display: flex; gap: 10px; margin-bottom: 16px; }
.ing-input {
  flex: 1; padding: 14px 18px; border-radius: 50px; border: 1px solid var(--border);
  font-family: inherit; font-size: .95rem; background: var(--warm-white);
}
.ing-input:focus { outline: none; border-color: var(--sage); }
.ing-btn {
  padding: 14px 24px; border-radius: 50px; background: var(--sage); color: #fff;
  font-weight: 600; white-space: nowrap; transition: background var(--transition);
}
.ing-btn:hover { background: var(--sage-dark); }
.ing-popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.ing-chip {
  padding: 7px 16px; border-radius: 50px; background: var(--warm-white);
  border: 1px solid var(--border); font-size: .8rem; color: var(--text-muted); cursor: pointer;
  transition: all var(--transition);
  font-family: inherit; line-height: normal; display: inline-flex; align-items: center;
}
.ing-chip:hover { border-color: var(--sage); color: var(--sage-dark); }
.ing-chip-toggle {
  background: transparent; border-style: dashed; color: var(--sage-dark); font-weight: 600;
}
.ing-chip-toggle:hover { background: rgba(124,148,115,.08); border-color: var(--sage); }
/* Extra ingredients revealed by "+ More" — built at runtime from the
   ingredient knowledge base (see main.js), so this only needs to size
   and animate the container; the chips themselves reuse .ing-chip. */
.ing-more-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 260ms ease, opacity 220ms ease, margin-bottom 260ms ease;
  margin-bottom: 0;
}
.ing-more-chips.expanded { opacity: 1; margin-bottom: 20px; }
@media (prefers-reduced-motion: reduce) {
  .ing-more-chips { transition: none; }
}
.ing-result-box {
  display: none; text-align: left; padding: 20px 24px; border-radius: var(--radius);
  background: var(--warm-white); border: 1px solid var(--border); margin-top: 8px;
}
.ing-result-box.active { display: block; }
.ing-result-title { font-family: var(--font-heading); font-weight: 600; color: var(--sage-dark); margin-bottom: 8px; }

/* --- AI Quiz --- */
.ai-quiz { padding: 90px 0; }
.quiz-wrap { max-width: 720px; margin: 0 auto; background: var(--warm-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; }
.quiz-progress { display: flex; justify-content: center; gap: 10px; margin-bottom: 28px; }
.quiz-progress-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.quiz-progress-dot.done { background: var(--sage); }
.quiz-step { display: none; text-align: center; }
.quiz-step.active { display: block; }
.quiz-step-label { color: var(--sage); font-weight: 600; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.quiz-step h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 8px; }
.quiz-step > p { color: var(--text-muted); margin-bottom: 24px; }
.quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 28px; }
.quiz-option {
  padding: 18px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: .9rem; font-weight: 500; transition: all var(--transition);
}
.quiz-option:hover { border-color: var(--sage-light); }
.quiz-option.selected { border-color: var(--sage); background: rgba(124,148,115,.08); color: var(--sage-dark); }
.quiz-opt-icon { display: block; font-size: 1.6rem; margin-bottom: 6px; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; }
.quiz-btn { padding: 12px 28px; border-radius: 50px; font-weight: 600; }
.quiz-btn-next { background: var(--sage); color: #fff; margin-left: auto; }
.quiz-btn-next:disabled { opacity: .4; cursor: not-allowed; }
.quiz-btn-back { color: var(--text-muted); }
.quiz-result { display: none; text-align: center; }
.quiz-result.active { display: block; }
.quiz-result-header { margin-bottom: 24px; }
.result-emoji { font-size: 2.4rem; margin-bottom: 8px; }
.quiz-result-header h3 { font-family: var(--font-heading); font-size: 1.4rem; }
.quiz-result-content { text-align: left; margin-bottom: 20px; }
.quiz-result-content ul { list-style: disc; padding-left: 20px; }
.quiz-result-content li { margin-bottom: 10px; color: var(--text-dark); }
.quiz-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); }
.quiz-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--sage); border-radius: 50%; animation: aarvika-spin 1s linear infinite; }
@keyframes aarvika-spin { to { transform: rotate(360deg); } }
.quiz-restart { color: var(--sage-dark); font-weight: 600; }

/* --- Featured Products (homepage) --- */
.products { padding: 90px 0; background: var(--warm-white); }
.products-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}

/* --- Testimonials --- */
.testimonials { padding: 90px 0; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  padding: 32px; background: var(--warm-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.quote-icon { color: var(--sage-light); margin-bottom: 12px; }
.quote-icon svg { width: 28px; height: 28px; }
.testimonial-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.testimonial-stars svg { width: 16px; height: 16px; color: var(--gold); }
.testimonial-card blockquote { color: var(--text-dark); font-size: .95rem; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--sage);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0;
}
.testimonial-author-info h5 { font-size: .9rem; color: var(--text-dark); }
.testimonial-author-info span { font-size: .78rem; color: var(--text-muted); }

/* --- CTA banner --- */
.cta-banner {
  padding: 80px 0; text-align: center;
  background: linear-gradient(135deg, var(--sage), var(--sage-dark)); color: #fff;
}
.cta-banner h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px; }
.cta-banner p { opacity: .9; margin-bottom: 28px; }

/* --- product-card-tag reused for homepage cards on sale/featured (product-card-image already positions :relative via existing rules above) --- */
.product-card-image { position: relative; }

@media (max-width: 1024px) {
  .concerns-grid { grid-template-columns: repeat(3, 1fr); }
  .badges-row-primary { grid-template-columns: repeat(3, 1fr); }
  .badges-row-secondary { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .badges { padding: 60px 0; }
  .products { padding: 56px 0; }
  .concerns-grid { grid-template-columns: repeat(2, 1fr); }
  .badges-row-primary { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .badges-row-secondary { grid-template-columns: repeat(2, 1fr); max-width: 100%; gap: 14px; }
  .badges-row-primary, .badges-row-secondary { margin-bottom: 24px; }
  /* Primary row has 5 cards, secondary has 3 — in a 2-col grid that
     leaves one card alone on the final row each time. Stretch it full
     width instead of leaving a lopsided gap next to it. */
  .badges-row-primary .badge-card:last-child,
  .badges-row-secondary .badge-card:last-child { grid-column: 1 / -1; }
  .badge-card { padding: 18px 16px; }
  .badge-icon { width: 40px; height: 40px; margin-bottom: 10px; }
  /* Card text varies a lot in length ("Never tested on animals." vs a
     full sentence), which made cards in the same row uneven and the grid
     tall. Clamp to 2 lines so every card lands at the same height without
     touching the font size itself. */
  .badge-card p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .products-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .quiz-wrap { padding: 24px; }
  .ing-search-row { flex-direction: column; }
}

@media (max-width: 380px) {
  .badges { padding: 70px 0; }
  .badges-row-primary, .badges-row-secondary { gap: 10px; }
  .badge-card { padding: 16px 10px; }
  /* Font sizes intentionally left unchanged here — text stays readable
     down to the smallest supported width; only spacing tightens. */
}

/* ===========================================================
   V2 POLISH PASS — premium refinement layer
   Adds: botanical leaf dividers, unified button/card hover language,
   WooCommerce core page styling (Shop/Cart/Checkout/My Account/
   Search/404), generic page-hero (About/Contact/FAQ pages), and
   smoother mobile menu + micro-interactions.
   Everything below reuses the tokens defined at the top of this file —
   no new colors, fonts, or spacing scale introduced.
   =========================================================== */

/* --- Botanical leaf divider ------------------------------------ */
.leaf-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; width: 100%; max-width: 220px;
  margin: 0 auto 28px;
  color: var(--sage);
}
.leaf-divider--left { margin: 0 0 28px; justify-content: flex-start; }
.leaf-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
.leaf-divider--left .leaf-divider-line:first-child { display: none; }
.leaf-divider-icon { width: 30px; height: 15px; flex-shrink: 0; }

/* Soft botanical watermark used behind a few key sections for organic
   depth — pure CSS, no images, very low opacity so it reads as texture
   rather than decoration competing with content. */
.botanical-glow { position: relative; isolation: isolate; }
.botanical-glow::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 8% 15%, rgba(124,148,115,.10), transparent 40%),
    radial-gradient(circle at 92% 85%, rgba(184,150,62,.08), transparent 40%);
  pointer-events: none;
}

/* --- Unified button language ------------------------------------ */
.btn-primary, .btn-secondary, .btn-white,
.quiz-btn-next, .quiz-btn-back, .ing-btn,
button[type="submit"], .button, input[type="submit"],
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button {
  letter-spacing: .3px;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary:active, .woocommerce a.button:active, .woocommerce button.button:active { transform: translateY(0) scale(.98); }

/* WooCommerce's own button markup (Apply Coupon, Update Cart, Proceed to
   Checkout, My Account actions, etc.) ships with no visual styling here
   (woocommerce_enqueue_styles is filtered off — see functions.php), so
   without this they render as bare, unstyled browser buttons. This gives
   them the same premium look/weight as the rest of the site's buttons. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 28px;
  background: linear-gradient(135deg, var(--sage), var(--sage-dark));
  color: #fff; font-weight: 600; font-size: .92rem;
  border-radius: 999px; box-shadow: var(--shadow-sm);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: linear-gradient(135deg, var(--sage-dark), var(--sage));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: #fff;
}
.woocommerce a.button.disabled, .woocommerce button.button.disabled,
.woocommerce a.button:disabled, .woocommerce button.button:disabled {
  opacity: .5; cursor: not-allowed; transform: none;
}
/* Proceed to Checkout — the primary cart CTA — gets the same solid,
   high-contrast treatment as the single-product Buy Now / Place Order
   buttons so it reads as the obvious next step. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  width: 100%; min-height: 54px; font-size: 1rem;
  background: #2F4F3A; box-shadow: 0 4px 20px rgba(47,79,58,.30);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: #41684E; box-shadow: 0 8px 30px rgba(47,79,58,.40);
}

/* Consistent "lift" hover used across every card type on the site */
.product-card, .concern-card, .badge-card, .testimonial-card, .quiz-option,
.woocommerce ul.products li.product {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover, .woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.testimonial-card:hover { box-shadow: var(--shadow-sm); border-color: var(--sage-light); }

/* Icon buttons: consistent, gentle hover across header + cards */
.nav-icon-btn, .product-card-cart, .ing-chip, .concern-arrow {
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.product-card-cart:hover { transform: scale(1.08); }

/* --- Typography polish ------------------------------------------ */
h1, h2, h3, .section-title, .page-hero-title { letter-spacing: -.2px; }
.section-label { position: relative; }

/* --- Mobile menu: smooth open instead of a hard display toggle -- */
@media (max-width: 768px) {
  .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--cream);
    padding: 0 24px; gap: 20px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    z-index: 1001;
    max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
    transition: max-height var(--transition), opacity var(--transition), padding var(--transition);
  }
  .nav-links.active {
    max-height: 70vh; opacity: 1; padding: 24px; pointer-events: auto; overflow-y: auto;
  }
}

/* --- Generic page hero (About / Contact / FAQ / custom WP Pages) ---
   padding-top only needs to clear the fixed 72px navbar plus a small,
   natural gap underneath it — the previous 150px left a large dead
   zone between the nav and the page title on every page using this
   class. Reduced site-wide here (header/typography/colors untouched). */
.page-hero {
  padding: 108px 0 60px;
  background: linear-gradient(180deg, var(--cream-dark), var(--cream));
}
.page-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--text-dark);
}
.page-content-wrap { padding: 60px 0 100px; max-width: 760px; margin: 0 auto; }
.page-content-wrap .page-content { color: var(--text-dark); }
.page-content-wrap .page-content h2 {
  font-family: var(--font-heading); font-size: 1.6rem; margin: 40px 0 16px; color: var(--text-dark);
}
.page-content-wrap .page-content p { margin-bottom: 18px; color: var(--text-muted); }
.page-content-wrap .page-content ul, .page-content-wrap .page-content ol { margin: 0 0 18px 20px; list-style: disc; color: var(--text-muted); }
.page-content-wrap .page-content a { color: var(--sage-dark); text-decoration: underline; text-decoration-color: var(--sage-light); }
.page-content-wrap .page-content img { border-radius: var(--radius); margin: 24px 0; }

/* --- Return Policy page --- */
.rp-wrap { padding: 60px 0 100px; max-width: 860px; margin: 0 auto; }

.rp-intro { text-align: center; margin: 0 auto 40px; max-width: 640px; }
.rp-intro p { color: var(--text-muted); font-size: 1.02rem; }

.rp-highlights {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-bottom: 56px;
}
.rp-highlight-box {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 20px;
  background: var(--warm-white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.rp-highlight-box--wide { max-width: 460px; }
.rp-highlight-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(184,150,62,.12);
  display: flex; align-items: center; justify-content: center;
}
.rp-highlight-icon svg { width: 20px; height: 20px; color: var(--gold); }
.rp-highlight-box h4 { font-family: var(--font-heading); font-size: .95rem; color: var(--text-dark); margin-bottom: 4px; }
.rp-highlight-box p { font-size: .82rem; color: var(--text-muted); margin: 0; line-height: 1.55; }
.rp-highlight-box p a { color: var(--sage-dark); text-decoration: underline; text-decoration-color: var(--sage-light); }

.rp-section { margin-bottom: 44px; }
.rp-section--last { margin-bottom: 0; }
.rp-section h2 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-heading); font-size: 1.4rem; color: var(--text-dark);
  margin-bottom: 16px;
}
.rp-section-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(124,148,115,.10);
  display: flex; align-items: center; justify-content: center;
}
.rp-section-icon svg { width: 18px; height: 18px; color: var(--sage); }
.rp-section p { color: var(--text-muted); margin-bottom: 14px; }
.rp-section p a, .rp-note-box p a { color: var(--sage-dark); text-decoration: underline; text-decoration-color: var(--sage-light); }
.rp-section p:last-child { margin-bottom: 0; }

.rp-list { margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.rp-list li {
  position: relative; padding-left: 30px; color: var(--text-muted); line-height: 1.6;
}
.rp-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background-size: 11px; background-repeat: no-repeat; background-position: center;
}
.rp-list--check li::before {
  background-color: rgba(58,143,92,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A8F5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.rp-list--cross li::before {
  background-color: rgba(217,79,79,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D94F4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

.rp-note-box {
  background: var(--cream-dark); border: 1px dashed var(--sage-light); border-radius: var(--radius);
  padding: 18px 20px;
}
.rp-note-box p { margin: 0; }

.rp-contact-row { display: flex; flex-wrap: wrap; gap: 12px; }
.rp-contact-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--sage); color: #fff; font-size: .85rem; font-weight: 500;
  transition: var(--transition);
}
.rp-contact-pill:hover { background: var(--sage-dark); }
.rp-contact-pill svg { width: 16px; height: 16px; }

@media (max-width: 860px) {
  .rp-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rp-wrap { padding: 40px 0 70px; }
  .rp-section h2 { font-size: 1.2rem; gap: 10px; }
  .rp-section-icon { width: 32px; height: 32px; }
  .rp-section-icon svg { width: 16px; height: 16px; }
  .rp-section { margin-bottom: 34px; }
  .rp-contact-row { flex-direction: column; align-items: flex-start; }
  .au-media-block { gap: 20px; }
}
@media (max-width: 400px) {
  .rp-wrap { padding: 32px 0 56px; }
  .rp-highlight-box { padding: 18px 16px; gap: 12px; }
  .rp-note-box { padding: 16px; }
}

/* ===========================================================
   ABOUT US PAGE — media images (aarv_banner-1.png / test1-scaled.jpeg)
   Scoped to this page only; two Media Library photos placed beside
   their section copy as a clean two-column row (image | text/list).
   NOTE: this was originally done with float, but a float next to a
   <ul> pushes each wrapped list item's bullet marker off to the
   float's edge — it ends up hidden behind the image, so only the
   first item shows a visible bullet. Flexbox avoids that entirely:
   the list gets its own column and every marker renders normally.
   Responsive: side-by-side on wider screens, stacks full-width on
   narrow screens.
   =========================================================== */
.au-media-block {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}
.au-img {
  display: block;
  flex: 0 0 260px;
  width: 260px;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}
.au-media-block .au-media-text,
.au-media-block > ul {
  flex: 1 1 260px;
  min-width: 220px;
  margin: 0;
}
.au-media-block .au-media-text p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .au-media-block { flex-direction: column; }
  .au-img { width: 100%; max-width: 340px; margin: 0 auto; }
}

/* ===========================================================
   ABOUT US PAGE — "Numbers Speak For Themselves!" stats strip
   Code-recreation of the reference GIF (no embedded image/animation
   file). Fonts/colors reuse the same tokens as the rest of the page;
   the entrance motion reuses the site's .reveal scroll-in system
   (see main.js) with a slightly springier easing curve, scoped to
   just these elements, to match the GIF's gentle overshoot-and-settle
   fade-up more closely than the default .reveal ease.
   =========================================================== */
.au-stats { padding: 4px 0 40px; }
.au-stats-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 32px 64px;
}
.au-stats-heading {
  flex: 0 0 auto; max-width: 220px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--text-dark);
}
.au-stats-row {
  flex: 1 1 auto;
  display: flex; flex-wrap: wrap;
  gap: 40px 72px;
}
.au-stat { display: flex; flex-direction: column; }
.au-stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1;
  color: var(--text-dark);
}
.au-stat-label {
  margin-top: 8px;
  font-size: .95rem;
  color: var(--text-muted);
}
/* Springier fade-up for just this block — matches the GIF's slight
   overshoot as the numbers settle into place. */
.au-stats-heading.reveal,
.au-stat.reveal {
  transition: opacity .8s cubic-bezier(.34,1.56,.64,1),
              transform .8s cubic-bezier(.34,1.56,.64,1);
}
@media (max-width: 600px) {
  .au-stats-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .au-stats-row { gap: 28px 48px; }
}
@media (max-width: 400px) {
  .au-stats-row { gap: 22px 32px; }
  .au-stats-heading { max-width: 100%; }
}

/* --- WooCommerce shop archive --- */
.shop-main { padding: 150px 0 80px; }
.shop-header { margin-bottom: 36px; }
.woocommerce-breadcrumb {
  font-size: .82rem; color: var(--text-muted); margin-bottom: 20px; display: block;
}
.woocommerce-breadcrumb a { color: var(--sage-dark); }

.woocommerce-notices-wrapper { margin-bottom: 24px; }
.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews {
  background: var(--warm-white); border: 1px solid var(--border); border-left: 3px solid var(--sage);
  border-radius: var(--radius); padding: 16px 20px; list-style: none; color: var(--text-dark);
  font-size: .92rem; margin-bottom: 20px;
}
.woocommerce-error { border-left-color: var(--red); }
.woocommerce-message .button, .woocommerce-info .button { margin-left: 12px; }

.woocommerce-result-count, .woocommerce-ordering {
  display: inline-block; font-size: .85rem; color: var(--text-muted); margin-bottom: 24px;
}
.woocommerce-ordering select {
  border: 1px solid var(--border); border-radius: 50px; padding: 8px 16px;
  font-family: inherit; font-size: .85rem; background: var(--warm-white); color: var(--text-dark);
}

.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  list-style: none;
}
.woocommerce ul.products li.product { list-style: none; }

.woocommerce-pagination { margin-top: 48px; text-align: center; }
.woocommerce-pagination ul.page-numbers { display: inline-flex; gap: 8px; list-style: none; }
.woocommerce-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--text-dark); font-size: .88rem;
  transition: all var(--transition);
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover { background: var(--sage); color: #fff; border-color: var(--sage); }

/* --- WooCommerce forms (checkout / my account / login / lost password) --- */
.woocommerce form .form-row label { font-size: .85rem; color: var(--text-dark); margin-bottom: 6px; display: block; }
.woocommerce form .form-row .required { color: var(--red); }
.woocommerce form .input-text,
.woocommerce form textarea,
.woocommerce-page form .input-text,
.woocommerce-input-wrapper select,
.select2-container .select2-selection--single {
  width: 100%; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: .92rem; background: var(--warm-white); color: var(--text-dark);
  transition: border-color var(--transition);
}
.woocommerce form .input-text:focus, .woocommerce form textarea:focus {
  outline: none; border-color: var(--sage);
}
.woocommerce form .form-row { margin-bottom: 18px; }
.woocommerce-checkout #payment { background: var(--warm-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-top: 24px; }
.woocommerce-checkout #payment ul.payment_methods { border: none; padding: 0; margin-bottom: 16px; }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td {
  padding: 12px 0; border-bottom: 1px solid var(--border); text-align: left; font-size: .9rem;
}
.woocommerce-checkout-review-order-table .order-total td { font-weight: 700; color: var(--sage-dark); font-size: 1.05rem; }

/* ===========================================================
   CHECKOUT — compact simplified layout
   Full Name / Complete Address / PIN Code / Mobile Number only.
   Hidden fields (last name, company, address2, city, state,
   country, email) stay in the DOM for form submission but take
   no visual space. Purely visual/spacing — no coupon, discount,
   shipping-cost, or plugin behaviour is touched here.
   =========================================================== */
.woocommerce-checkout { padding: 40px 0 80px; }

.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details { max-width: 480px; margin: 0 auto 28px; float: none; width: 100%; }
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { width: 100%; float: none; }

/* Card wrapper around the four visible fields, matching the payment box */
.woocommerce-checkout .woocommerce-billing-fields {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.woocommerce-checkout .woocommerce-billing-fields h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 16px;
}

/* Hidden fields (type=hidden) take zero space — belt-and-braces in case
   a child theme/plugin re-adds visible markup around them. */
.woocommerce-checkout .form-row input[type="hidden"] { display: none; }

/* WooCommerce still wraps type="hidden" fields in their normal
   <p class="form-row"> row with a visible <label> above them (only the
   <input> itself is invisible). Without this, "Town / City", "State" and
   "Email address" appeared on screen as bare labels with no working field
   under them — visible but not editable. These rows are hidden completely
   since the fields are intentionally folded away (values are still
   posted via the hidden inputs, so nothing downstream breaks). */
.woocommerce-checkout #billing_last_name_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #billing_city_field,
.woocommerce-checkout #billing_state_field,
.woocommerce-checkout #billing_company_field,
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #billing_email_field {
  display: none !important;
}

/* Tighter, more compact rows than the generic WooCommerce form rules
   above — this only applies inside the checkout billing card. */
.woocommerce-checkout .woocommerce-billing-fields .form-row { margin-bottom: 14px; }
.woocommerce-checkout .woocommerce-billing-fields .form-row:last-child { margin-bottom: 0; }
.woocommerce-checkout .woocommerce-billing-fields label {
  font-size: .82rem; font-weight: 500; margin-bottom: 5px;
}
.woocommerce-checkout .woocommerce-billing-fields .input-text,
.woocommerce-checkout .woocommerce-billing-fields textarea {
  padding: 11px 14px; font-size: .9rem; border-radius: 10px;
}
.woocommerce-checkout .woocommerce-billing-fields textarea.address-textarea {
  min-height: 76px; resize: vertical; line-height: 1.5;
}

/* Order review + payment sit in their own compact card below */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout table.woocommerce-checkout-review-order-table { margin-top: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--warm-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 20px;
}
.woocommerce-checkout #payment { padding: 20px 24px; margin-top: 16px; }
.woocommerce-checkout .place-order { margin-top: 16px; }

/* Premium "Place Order" CTA — matches the weight/hover language of the
   .btn-add-cart-lg / .btn-buy-now buttons elsewhere on the site, in the
   brand's dark green. */
.woocommerce-checkout #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 16px 32px;
  background: #2F4F3A;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .3px;
  border: none;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(47,79,58,.30);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus {
  background: #41684E;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(47,79,58,.40);
}
.woocommerce-checkout #place_order:active {
  transform: translateY(0) scale(.98);
}

@media (max-width: 640px) {
  .woocommerce-checkout { padding: 24px 0 60px; }
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-checkout-review-order,
  .woocommerce-checkout #payment { padding: 18px; border-radius: var(--radius); }
  .woocommerce-checkout #place_order { width: 100%; }
}

/* --- WooCommerce cart page --- */
.woocommerce-cart table.cart, .woocommerce table.shop_table {
  width: 100%; border-collapse: collapse; margin-bottom: 32px;
}
.woocommerce table.shop_table th {
  text-align: left; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); padding: 14px 12px; border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table td {
  padding: 18px 12px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.woocommerce table.shop_table td.product-thumbnail img {
  width: 80px; border-radius: var(--radius); border: 1px solid var(--border);
}
.woocommerce table.shop_table td.product-name a { color: var(--text-dark); font-weight: 500; }
.woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal { color: var(--sage-dark); font-weight: 600; }
.woocommerce table.shop_table .quantity .qty {
  width: 60px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); text-align: center;
}
.woocommerce a.remove {
  color: var(--red) !important; font-size: 1.2rem !important; transition: transform var(--transition);
}
.woocommerce a.remove:hover { transform: scale(1.2); }
.woocommerce-cart .cart-collaterals {
  background: var(--warm-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; margin-top: 24px;
}
.woocommerce-cart .cart_totals table { width: 100%; }
.woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--border); }
.woocommerce-cart .cart_totals .order-total td { font-weight: 700; color: var(--sage-dark); font-size: 1.1rem; }
.woocommerce-shipping-calculator a { color: var(--sage-dark); text-decoration: underline; }

/* --- WooCommerce My Account --- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 14px 20px; color: var(--text-dark); font-size: .9rem; transition: background var(--transition);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--sage); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: rgba(124,148,115,.1); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table { margin-top: 0; }
.woocommerce-account .addresses .address { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }

/* --- 404 / search results (uses index.php fallback markup) --- */
.search-no-results .page-content, .error404 .page-content { text-align: center; }

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .shop-main { padding: 120px 0 60px; }
  .page-hero { padding: 90px 0 40px; }
}

/* ===========================================================
   CART PAGE — mobile card layout
   Reflows table.cart's rows into stacked cards (image + info +
   qty/remove/subtotal) instead of a cramped, horizontally-scrolling
   table. Uses WooCommerce core's own data-title attributes (already
   present in cart/cart.php) for the Price/Qty/Subtotal captions —
   no template override needed. Desktop table is untouched.
   =========================================================== */
@media (max-width: 768px) {
  .woocommerce-cart table.cart thead { display: none; }
  .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody,
  .woocommerce-cart table.cart tr, .woocommerce-cart table.cart td {
    display: block; width: 100%;
  }
  .woocommerce-cart table.cart tr {
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .woocommerce-cart table.cart td {
    padding: 0; border-bottom: none; width: auto;
  }
  .woocommerce-cart table.cart td.product-thumbnail {
    grid-column: 1; grid-row: 1 / span 4; align-self: start;
  }
  .woocommerce-cart table.cart td.product-thumbnail img { width: 100%; }
  .woocommerce-cart table.cart td.product-remove {
    position: absolute; top: 14px; right: 14px; width: auto;
  }
  .woocommerce-cart table.cart td.product-remove a.remove {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(217,79,79,.08);
  }
  .woocommerce-cart table.cart td.product-name {
    grid-column: 2; padding-right: 34px !important; font-size: .96rem; line-height: 1.4;
  }
  .woocommerce-cart table.cart td.product-price,
  .woocommerce-cart table.cart td.product-quantity,
  .woocommerce-cart table.cart td.product-subtotal {
    grid-column: 2;
  }
  /* Small uppercase caption ("Price" / "Quantity" / "Subtotal") above
     each value, sourced from WooCommerce's own data-title attribute —
     no content is invented, just made visible. */
  .woocommerce-cart table.cart td.product-price[data-title]::before,
  .woocommerce-cart table.cart td.product-quantity[data-title]::before,
  .woocommerce-cart table.cart td.product-subtotal[data-title]::before {
    content: attr(data-title);
    display: block;
    font-size: .68rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-muted); margin-top: 6px; margin-bottom: 2px;
  }
  .woocommerce-cart table.cart td.product-subtotal { font-weight: 700; color: var(--sage-dark); }
  .woocommerce-cart table.cart .quantity .qty { width: 64px; padding: 10px 8px; }

  .woocommerce-cart .cart-collaterals { padding: 20px; }
  .woocommerce-cart .wc-proceed-to-checkout { padding: 0 !important; }
}

/* ===========================================================
   PREMIUM PRODUCT SECTIONS (Overview / Benefits / Ingredients /
   How to Use / Suitable For / Storage / Caution / Why You'll Love It)
   Rendered by inc/product-sections.php. Rounded cards, subtle shadow,
   generous spacing, leaf dividers between cards — all existing tokens.
   =========================================================== */
.aarvika-sections { max-width: 820px; margin: 0 auto; }

.aarvika-section-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 40px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.aarvika-section-card:hover { box-shadow: var(--shadow-md); }

.aarvika-section-heading {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.aarvika-section-icon {
  font-size: 1.4rem; line-height: 1;
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,148,115,.10); border-radius: 50%;
}
.aarvika-section-heading h3 {
  font-family: var(--font-heading); font-size: 1.3rem; color: var(--text-dark); font-weight: 600;
}

.aarvika-section-text { color: var(--text-muted); font-size: 1rem; line-height: 1.8; }

/* Key Benefits / Why You'll Love It — checklist */
.aarvika-checklist { display: flex; flex-direction: column; gap: 14px; }
.aarvika-checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-dark); font-size: .98rem; }
.aarvika-checklist svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  color: var(--sage); background: rgba(124,148,115,.12); border-radius: 50%; padding: 3px;
  box-sizing: content-box;
}

/* Key Ingredients — premium ingredient cards */
.aarvika-ingredient-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.aarvika-ingredient-card {
  background: #fff;
  border-radius: 16px;
  border-top: 3px solid #355b38;
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.aarvika-ingredient-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.aarvika-ingredient-name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600;
  color: #355b38; margin-bottom: 12px; line-height: 1.3;
}
.aarvika-ingredient-name-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.aarvika-ingredient-source {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 16px; padding-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}
.aarvika-ingredient-source-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.aarvika-ingredient-source-value { font-size: .9rem; color: var(--text-muted); }
.aarvika-ingredient-benefits { display: flex; flex-direction: column; gap: 10px; }
.aarvika-ingredient-benefits li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-dark); font-size: .92rem; line-height: 1.5; }
.aarvika-ingredient-benefits svg {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  color: #355b38; background: rgba(53,91,56,.12); border-radius: 50%; padding: 3px;
  box-sizing: content-box;
}

@media (max-width: 640px) {
  .aarvika-ingredient-grid { grid-template-columns: 1fr; }
  .aarvika-ingredient-card { padding: 20px; }
}

/* How to Use — numbered steps */
.aarvika-steps { display: flex; flex-direction: column; gap: 18px; counter-reset: aarvika-step; }
.aarvika-steps li { display: flex; align-items: flex-start; gap: 16px; counter-increment: aarvika-step; }
.aarvika-step-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--sage); color: #fff; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.aarvika-step-num::before { content: counter(aarvika-step); }
.aarvika-steps li > span:last-child { color: var(--text-dark); font-size: .98rem; padding-top: 4px; }

/* Suitable For — badges */
.aarvika-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.aarvika-badge {
  padding: 9px 20px; border-radius: 50px;
  background: rgba(124,148,115,.10); color: var(--sage-dark);
  font-size: .85rem; font-weight: 600; letter-spacing: .2px;
  border: 1px solid rgba(124,148,115,.25);
}

/* Leaf divider sits between cards, not inside them */
.aarvika-sections > .leaf-divider { margin: 36px auto; max-width: 160px; }

@media (max-width: 640px) {
  .aarvika-section-card { padding: 26px 22px; }
  .aarvika-section-heading h3 { font-size: 1.1rem; }
}

/* ===========================================================
   AARVIKA ROUTINE BUILDER — result cards, connectors, summary panel.
   Reuses the existing .quiz-wrap/.quiz-step/.quiz-option card language,
   the .aarvika-checklist/.aarvika-badge components from the product
   sections, and the same tokens throughout — no new design language.
   =========================================================== */
.quiz-progress-dot.current { background: var(--sage-light); }

.routine-section { margin-bottom: 40px; }
.routine-heading {
  font-family: var(--font-heading); font-size: 1.3rem; color: var(--text-dark);
  margin-bottom: 20px; text-align: center;
}
.routine-cards { display: flex; flex-direction: column; align-items: center; gap: 0; }
.routine-connector { color: var(--sage-light); font-size: 1.3rem; line-height: 1; margin: 4px 0; }

.routine-card {
  width: 100%; max-width: 560px;
  display: flex; gap: 20px;
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 20px; margin-bottom: 4px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.routine-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.routine-card-image {
  flex-shrink: 0; width: 96px; height: 96px; border-radius: var(--radius);
  overflow: hidden; background: var(--cream);
}
.routine-card-image img { width: 100%; height: 100%; object-fit: cover; }
.routine-card-body { flex: 1; min-width: 0; }
.routine-card-body h4 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-dark); margin-bottom: 8px; }
.routine-card-reason { font-size: .88rem; color: var(--text-dark); margin-bottom: 10px; line-height: 1.6; }
.routine-card-reason strong { color: var(--sage-dark); }
.routine-card-benefits { margin-bottom: 14px; gap: 6px !important; }
.routine-card-benefits li { font-size: .85rem !important; color: var(--text-dark) !important; }
.routine-card-benefits svg { width: 16px; height: 16px; padding: 2px; }
.routine-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.routine-card-actions .btn-primary, .routine-card-actions .btn-secondary {
  padding: 10px 20px; font-size: .82rem;
}
/* .btn-primary's default sage-on-white text only measures ~3.3:1 contrast —
   below the 4.5:1 needed for normal-weight text. Scoped to this section
   only (not a site-wide button change) using the existing --sage-dark
   token, which measures ~5.3:1. */
.routine-card-actions .btn-primary,
.routine-card-actions .btn-primary:link,
.routine-card-actions .btn-primary:visited { background: var(--sage-dark); color: #fff; }
.routine-card-actions .btn-primary:hover { background: var(--sage); }

.routine-summary {
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px; margin-top: 20px;
}
.routine-summary h4 {
  font-family: var(--font-heading); font-size: 1.05rem; color: var(--sage-dark);
  margin: 20px 0 12px;
}
.routine-summary h4:first-child { margin-top: 0; }
.routine-summary-meta {
  display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border); font-size: .88rem; color: var(--text-dark);
}
.routine-summary-meta strong { color: var(--sage-dark); }

/* Question-step Next/Back buttons share the same low-contrast sage-on-white
   issue as above — same fix, same reasoning, kept local to .quiz-wrap. */
.quiz-wrap .quiz-btn-next { background: var(--sage-dark); }
.quiz-wrap .quiz-btn-next:hover:not(:disabled) { background: var(--sage); }
.quiz-wrap .quiz-btn-back { color: var(--text-dark); }

/* Result header + progress label: make sure these never rely on inherited
   color (defensive — guarantees dark text on the light card regardless of
   where this markup is injected). */
.quiz-result-header h3 { color: var(--text-dark); }
.quiz-result-header p { color: var(--text-dark); }

@media (max-width: 640px) {
  .routine-card { flex-direction: column; }
  .routine-card-image { width: 100%; height: 160px; }
  .routine-summary-meta { flex-direction: column; gap: 8px; }
}

/* ===========================================================
   ANNOUNCEMENT BAR + HERO BANNER IMAGE — homepage only
   Scoped with body.has-announcement-bar / element IDs so nothing
   here touches any other template. --announce-h is kept in sync
   with the bar's real rendered height by main.js (handles the
   text wrapping to two lines on very narrow screens).
   =========================================================== */

.announcement-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  background: var(--green);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
}
.announcement-bar p {
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 1.4;
}
.announcement-bar strong { font-weight: 700; letter-spacing: .3px; }

/* Push the fixed navbar down by the announcement bar's height so nothing
   sits underneath it (the hero's own offset is handled in its own rules). */
body.has-announcement-bar .navbar { top: var(--announce-h); }

/* ===========================================================
   PRODUCTS CAROUSEL — "Products For Your Natural Care"
   Replaces the old static 4-up grid. Same .product-card design;
   the track is rendered twice server-side (see front-page.php) so
   the JS in main.js can auto-scroll it in an infinite seamless
   loop. Card sizing uses % flex-basis of the viewport (not the
   track), so it stays correct at any product count.
   =========================================================== */

.products-carousel {
  position: relative;
  padding: 0 8px;
}
.products-carousel-viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.products-carousel-viewport.is-dragging { cursor: grabbing; user-select: none; }
.products-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  will-change: transform;
}
.carousel-card {
  flex: 0 0 calc((100% - 24px * 3) / 4); /* desktop: 4 visible */
  min-width: 0;
}
@media (max-width: 1024px) {
  .carousel-card { flex-basis: calc((100% - 24px * 2) / 3); } /* tablet: 3 visible */
}
@media (max-width: 640px) {
  .products-carousel-track { gap: 16px; }
  .carousel-card { flex-basis: calc((100% - 16px * 1) / 2); } /* mobile: 2 visible */
  /* Keep the wheel card a short rectangle: one truncated line instead
     of two, so the description never makes the card taller than its
     image + title + price content needs. The full description stays
     in the data (wp_trim_words in inc/product-carousel.php) — this is
     purely a visual clamp. */
  .carousel-card .product-card-info p {
    -webkit-line-clamp: 1;
  }
}

.carousel-arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--sage-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.carousel-arrow:hover { background: var(--sage); color: #fff; transform: translateY(-50%) scale(1.08); }
.carousel-arrow-prev { left: -14px; }
.carousel-arrow-next { right: -14px; }
@media (max-width: 768px) {
  .carousel-arrow { display: none; } /* mobile relies on swipe */
}

/* --- Stock status badge on each card --- */
.product-card-stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 600; letter-spacing: .2px;
  margin-bottom: 10px;
}
.product-card-stock-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.product-card-stock.is-in { color: var(--green); }
.product-card-stock.is-in .product-card-stock-dot { background: var(--green); }
.product-card-stock.is-low { color: var(--gold); }
.product-card-stock.is-low .product-card-stock-dot { background: var(--gold); }
.product-card-stock.is-out { color: var(--red); }
.product-card-stock.is-out .product-card-stock-dot { background: var(--red); }

/* ===========================================================
   FOOTER — centered brand block (logo, tagline, copy, social icons)
   .footer-brand becomes a centered flex column so the logo, "NATURAL
   HYBRID" tagline, description paragraph and social icons all share
   one exact center line — only this column changes; the other footer
   columns, the grid, and the dark background are untouched.
   =========================================================== */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand .logo {
  display: inline-flex;
  justify-content: center;
  margin: 0 0 16px; /* logo → tagline spacing, within the 12–18px target */
}
.footer-brand-logo {
  height: 150px; /* +~15% over the previous 130px — capped at the source
                    PNG's native 150px height so it stays crisp, not
                    upscaled/blurry (a true +20% would exceed native res) */
  width: auto;
  display: block;
}
.footer-brand-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}
.footer-tagline {
  text-align: center;
  color: var(--sage-light);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.footer-brand p {
  text-align: center;
  margin: 0 auto 24px;
  max-width: 340px;
}
.footer-social {
  justify-content: center;
}


/* ===========================================================
   SEARCH OVERLAY
   Full-viewport modal: dark backdrop, centred white panel,
   results list with product image / icon / price / type chip.
   z-index: 1200 — above the navbar (z-index: 1000) and any
   other stacked element on the page.
   =========================================================== */
.search-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(30, 42, 35, .72);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(72px, 12vh, 140px);
  opacity: 0; transition: opacity .25s ease;
}
.search-overlay[hidden]       { display: none; }
.search-overlay.active        { opacity: 1; pointer-events: auto; }

.search-overlay-inner {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - clamp(72px,12vh,140px) - 32px);
  overflow-y: auto; padding: 6px 0 8px;
  animation: searchSlideDown .25s ease forwards;
  overscroll-behavior: contain;
}
@keyframes searchSlideDown {
  from { transform: translateY(-10px); }
  to   { transform: translateY(0); }
}

/* --- Input row --- */
.search-field-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 12px; border-bottom: 1px solid var(--border);
}
.search-field-icon { color: var(--text-muted); flex-shrink: 0; width: 20px; height: 20px; }
.search-field {
  flex: 1; border: none; outline: none;
  font-size: 1.05rem; font-family: var(--font-body); color: var(--text-dark);
  background: transparent;
}
.search-field::placeholder { color: var(--text-muted); }
.search-clear {
  color: var(--text-muted); border: none; background: none; padding: 4px;
  cursor: pointer; transition: color var(--transition);
}
.search-clear:hover { color: var(--text-dark); }

/* --- Hint / empty state --- */
.search-hint {
  padding: 20px 20px; font-size: .85rem;
  color: var(--text-muted); text-align: center; margin: 0;
}

/* --- Results list --- */
.search-results { list-style: none; margin: 4px 0; }
.search-result-item { border-bottom: 1px solid var(--border); }
.search-result-item:last-child { border-bottom: none; }
.search-result-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; text-decoration: none; color: var(--text-dark);
  transition: background var(--transition);
}
.search-result-link:hover,
.search-result-link:focus { background: var(--warm-white); outline: none; }

.search-result-img {
  width: 48px; height: 48px; border-radius: var(--radius);
  object-fit: cover; flex-shrink: 0; background: var(--warm-white);
}
.search-result-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--sage-dark);
}
.search-result-text { flex: 1; min-width: 0; }
.search-result-title { display: block; font-weight: 600; font-size: .92rem; }
.search-result-price {
  display: block; font-size: .82rem; color: var(--sage-dark);
  font-weight: 600; margin-top: 2px;
}
.search-result-type {
  display: inline-block; margin-top: 3px;
  font-size: .7rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; padding: 2px 7px;
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text-muted);
}
.search-result-arrow { color: var(--text-muted); flex-shrink: 0; }
.search-result-loading,
.search-result-empty {
  padding: 20px; text-align: center;
  font-size: .88rem; color: var(--text-muted);
}

/* --- Close button (top right of overlay) --- */
.search-overlay-close {
  position: absolute; top: clamp(16px,4vh,28px); right: clamp(16px,3vw,32px);
  display: flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.9); font-size: .8rem; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase;
  background: none; border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px; padding: 6px 14px 6px 10px; cursor: pointer;
  transition: background var(--transition);
}
.search-overlay-close:hover { background: rgba(255,255,255,.1); }
body.search-open { overflow: hidden; }

/* ===========================================================
   TESTIMONIALS CAROUSEL
   Mirrors the products carousel layout; cards use the same
   .testimonial-card design (padding, border, radius) unchanged.
   Desktop: 3 | Tablet: 2 | Mobile: 1
   =========================================================== */
.testimonials-carousel {
  position: relative; padding: 0 8px; margin-top: 48px;
}
.testimonials-carousel-viewport {
  overflow: hidden; touch-action: pan-y; cursor: grab;
}
.testimonials-carousel-viewport.is-dragging { cursor: grabbing; user-select: none; }
.testimonials-carousel-track {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 24px;
  will-change: transform;
}
.testimonial-carousel-card {
  flex: 0 0 calc((100% - 24px * 2) / 3); /* desktop: 3 visible */
  min-width: 0;
}
@media (max-width: 1024px) {
  .testimonial-carousel-card { flex-basis: calc((100% - 24px * 1) / 2); } /* tablet: 2 */
}
@media (max-width: 640px) {
  .testimonials-carousel-track { gap: 16px; }
  .testimonial-carousel-card { flex-basis: 100%; } /* mobile: 1 */
}

/* Photo avatar inside testimonial card */
.testimonial-avatar-photo {
  background: none !important;
  overflow: hidden;
}
.testimonial-avatar-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}

/* =========================================================================
   ELEMENTOR PREMIUM POLISH (theme-level styling only)
   -------------------------------------------------------------------------
   The About page (and any other Elementor-built page) is authored and
   maintained entirely in Elementor — no template files or Elementor
   content/JSON are touched here. This block only upgrades the *visual
   defaults* Elementor content inherits from the theme, using Elementor's
   own standard widget classes, so existing pages pick up a more premium
   look automatically without republishing or re-editing anything.
   Some rules use !important because Elementor renders certain controls
   (color, background, border-radius, box-shadow) as high-specificity,
   per-element inline/ID styles that would otherwise win.
   ========================================================================= */

/* --- Wider page container --- */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1240px;
}

/* --- Base typography inside Elementor content --- */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading) !important;
  color: var(--text-dark);
  line-height: 1.2;
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-body);
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 1.02rem;
}
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --- Section / widget spacing rhythm --- */
.elementor-section { padding-top: 0; padding-bottom: 0; }
.elementor-top-section.elementor-element {
  margin-bottom: 0;
}
.elementor-widget-wrap > .elementor-element {
  margin-bottom: 28px;
}
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 16px;
}

/* --- Buttons --- */
.elementor-widget-button .elementor-button,
.elementor-button.elementor-size-md,
a.elementor-button {
  font-family: var(--font-body) !important;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 16px 36px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--sage), var(--sage-dark)) !important;
  box-shadow: var(--shadow-md) !important;
  border: none !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), background .3s ease !important;
}
.elementor-widget-button .elementor-button:hover,
a.elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
  background: linear-gradient(135deg, var(--sage-dark), var(--sage)) !important;
}
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon i {
  transition: transform .3s ease;
}
.elementor-widget-button .elementor-button:hover .elementor-button-icon {
  transform: translateX(4px);
}

/* --- Cards: icon-box / image-box / call-to-action / testimonial widgets --- */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-call-to-action .elementor-cta,
.elementor-widget-testimonial .elementor-testimonial-wrapper {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 34px 28px !important;
  transition: var(--transition);
}
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover,
.elementor-widget-image-box .elementor-image-box-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--sage-light);
}
.elementor-icon-box-icon .elementor-icon,
.elementor-image-box-img {
  border-radius: 50% !important;
}
.elementor-icon-box-title,
.elementor-image-box-title {
  font-family: var(--font-heading) !important;
  color: var(--text-dark) !important;
}
.elementor-icon-box-description,
.elementor-image-box-description {
  color: var(--text-muted) !important;
  font-size: .92rem;
  line-height: 1.6;
}

/* --- Counter widget (stat blocks) --- */
.elementor-widget-counter .elementor-counter {
  text-align: center;
}
.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--font-heading) !important;
  color: var(--text-dark) !important;
}
.elementor-widget-counter .elementor-counter-title {
  color: var(--text-muted) !important;
  font-size: .9rem;
  letter-spacing: .3px;
}

/* --- Testimonial widget --- */
.elementor-widget-testimonial .elementor-testimonial-wrapper {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 56px !important;
  box-shadow: var(--shadow-lg) !important;
}
.elementor-testimonial-content {
  font-family: var(--font-heading) !important;
  font-size: 1.3rem !important;
  line-height: 1.6 !important;
  color: var(--text-dark) !important;
}
.elementor-testimonial-meta { justify-content: center; }
.elementor-testimonial-name { font-family: var(--font-heading) !important; }
.elementor-testimonial-image img {
  border-radius: 50% !important;
}

/* --- Image styling --- */
.elementor-widget-image img,
.elementor-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform .6s ease;
}
.elementor-widget-image:hover img {
  transform: scale(1.02);
}

/* --- Responsive: tablet --- */
@media (max-width: 1024px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100%;
    padding: 0 32px;
  }
  .elementor-widget-icon-box .elementor-icon-box-wrapper,
  .elementor-widget-image-box .elementor-image-box-wrapper {
    padding: 28px 22px !important;
  }
  .elementor-testimonial-wrapper { padding: 40px 32px !important; }
}

/* --- Responsive: mobile --- */
@media (max-width: 600px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    padding: 0 18px;
  }
  .elementor-widget-wrap > .elementor-element {
    margin-bottom: 20px;
  }
  .elementor-widget-button .elementor-button,
  a.elementor-button {
    width: 100%;
    justify-content: center;
    padding: 15px 24px !important;
  }
  .elementor-testimonial-content { font-size: 1.08rem !important; }
  .elementor-widget-image img { border-radius: var(--radius); }
}

/* ===========================================================
   WISHLIST PAGE (/wishlist/) — page-wishlist.php
   Reuses the site's existing .product-card design (same grid pattern
   as .woocommerce ul.products) and .btn-primary / .page-hero language;
   only the elements below (grid wrapper, empty state, loading/count
   text) are new. Card markup itself comes straight from
   woocommerce/content-product.php via AJAX (see assets/js/main.js).
   =========================================================== */
.wishlist-main { }
.wishlist-wrap { padding: 50px 0 100px; }

.wishlist-count-label {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.wishlist-loading {
  text-align: center;
  color: var(--text-muted);
  font-size: .95rem;
  padding: 60px 0;
}

.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* --- Empty state --- */
.wishlist-empty {
  max-width: 440px;
  margin: 20px auto 0;
  padding: 50px 20px 20px;
  text-align: center;
}
.wishlist-empty-icon {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,148,115,.15), rgba(124,148,115,.05));
  color: var(--sage);
}
.wishlist-empty-icon svg { width: 32px; height: 32px; }
.wishlist-empty h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.wishlist-empty p {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 28px;
}

.wishlist-noscript {
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
  padding: 40px 0;
}

@media (max-width: 1024px) {
  .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .wishlist-wrap { padding: 36px 0 70px; }
  .wishlist-empty { padding: 30px 20px 10px; }
}
@media (max-width: 640px) {
  .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .wishlist-count-label { margin-bottom: 14px; }
}
@media (max-width: 400px) {
  /* A single column at very narrow widths would push the page height
     far past two rows of cards for even a modest wishlist — keep 2
     columns (cards already compact to a square image + tight padding
     via the shared .product-card mobile rules) so the page stays short
     and scannable instead of turning into a long single-file list. */
  .wishlist-grid { gap: 10px; }
  .wishlist-empty-icon { width: 64px; height: 64px; }
  .wishlist-empty-icon svg { width: 26px; height: 26px; }
  .wishlist-empty h2 { font-size: 1.3rem; }
}