/* Mobile-specific product modal improvements */
@media (max-width: 768px) {
  .product-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* center the modal as a floating card instead of a bottom sheet */
    align-items: center;
    justify-content: center;
    padding: 14px;
  }
  .product-modal-content {
    width: 96%;
    max-width: 780px;
    max-height: 95vh; /* increased height */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    box-shadow: 0 22px 68px rgba(2,8,12,0.5);
    border-left: 4px solid var(--gold-metallic);
  }
  .modal-grid {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(85vh - 60px);
  }
  .modal-left {
    padding: 8px;
    background: white;
  }
  .modal-main-image {
    background: #ffffff;
    padding: 4px;
    border-radius: 10px;
    max-height: 40vh;
  }
  .modal-main-image img {
    width: 100%;
    max-width: 180px;
    height: auto;
    max-height: calc(40vh - 24px);
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }
  .modal-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
  }
  .modal-thumbs img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex: 0 0 auto;
  }
  .modal-right {
    padding: 12px;
    overflow-y: visible;
    background: white;
  }
  .modal-title {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 6px;
    font-weight: 700;
  }
  .modal-price {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .modal-section {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .modal-section-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    color: #2d3748;
    letter-spacing: 0.3px;
  }
  .modal-section p {
    font-size: 13px;
    line-height: 1.9;
    color: #4a5568;
  }
  .modal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
  }
  .modal-price {
    font-size: 18px;
  }
  .modal-stock {
    font-weight: 600;
  }
  .modal-section-title {
    margin-top: 10px;
    margin-bottom: 6px;
  }
  .modal-weights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 8px 0;
  }
  .weight-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
  }
  .weight-option.active {
    border-color: #b8941e;
    background: linear-gradient(135deg, #f4f1e8 0%, #fff9e6 100%);
    box-shadow: 0 0 0 2px rgba(184,148,30,0.15);
  }
  .modal-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end; /* align buttons to right on mobile */
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 8px;
    background: transparent;
  }
  .modal-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 8px;
    background: #fff;
  }
  .modal-qty .qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
  }
  .modal-qty span {
    min-width: 28px;
    font-size: 15px;
    font-weight: 600;
  }
  #modalAddToCart.btn-primary {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: #1a202c;
    border: 2px solid #1a202c;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(26,32,44,0.25);
    transition: all 0.3s ease;
  }
  #modalAddToCart.btn-primary:hover {
    background: #2d3748;
    border-color: #2d3748;
    box-shadow: 0 4px 12px rgba(26,32,44,0.35);
    transform: translateY(-1px);
  }
  #modalAddToCart.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(26,32,44,0.3);
  }
  #modalBuyNow.btn-secondary {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: #ffffff;
    border: 2px solid #1a202c;
    color: #1a202c;
    box-shadow: 0 2px 8px rgba(26,32,44,0.15);
    transition: all 0.3s ease;
  }
  #modalBuyNow.btn-secondary:hover {
    background: #f7fafc;
    box-shadow: 0 4px 12px rgba(26,32,44,0.25);
    transform: translateY(-1px);
  }
  .modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(2,8,12,0.18);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Prevent accidental horizontal overflow on small / zoomed viewports
   - Hide horizontal scroll on mobile devices while preserving vertical scrolling
   - Ensure testimonials and hero sections do not cause page wide overflow
*/
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
  }

  /* Testimonials: keep the scattered cards visually intact but clip to viewport on small screens */
  .reviews-section,
  .reviews-cards {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Hero: make sure absolutely positioned logo/content don't push page width */
  .hero, .hero * {
    max-width: 100vw;
    box-sizing: border-box;
  }

  .hero .hero-logo-wrapper {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    max-width: 80vw !important;
  }
}

/* Targeted header cart icon override (loaded after main.css) ---------------------------------
   Reduce cart icon and badge size in header areas while keeping strong specificity.
   This overrides the earlier universal 30px !important rule and keeps responsiveness.
*/
.nav-wrapper .cart-btn .cart-icon,
.site-header .nav-wrapper .cart-btn .cart-icon,
.mobile-hero-header .cart-icon,
.site-header .cart-btn .cart-icon,
.nav-wrapper .cart-icon svg,
.nav-wrapper .cart-icon img,
.nav-wrapper .cart-btn svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

.nav-wrapper .cart-count,
.site-header .cart-count,
.mobile-hero-header .cart-count,
.nav-wrapper .nav-cart-badge {
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Consolidated mobile-only rules: hero header + product grid + compact card tweaks */
@media (max-width: 820px) {
  /* Performance: Remove fixed background on mobile to prevent scroll lag and show whole image */
  .hero {
    background-attachment: scroll !important;
    /* Fill the hero image on mobile (cover ensures no empty gaps) */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Make sure mobile uses the correct accent across the header and hero */
  :root {
    --nav-accent: #C9A24D; /* mobile-only metallic gold */
    --mobile-banner-h: clamp(96px, 22vw, 160px); /* share banner height across hero + overlays */
  }
  /* Hide desktop navbar on mobile and show mobile hero header */
  .site-header, header.site-header, nav.navbar {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    z-index: -1 !important;
  }
  /* Categories removed in mobile CSS */

  .mobile-hero-header {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    background: rgba(4,15,26,0.96); /* translucent dark background */
    --mobile-header-h: 56px; /* compact header height */
    --mobile-icon-size: 42px; /* icon sizes slightly reduced */
    --mobile-edge-padding: 2px; /* spacing from right edge for icons (reduced to move icons closer to edge) */
    --mobile-header-padding: 4px; /* vertical padding reduced */
    --mobile-logo-gap: calc((var(--mobile-header-h) - var(--mobile-nav-logo-size)) / 2); /* equal top/bottom/left gap */
    --mobile-logo-pad: calc(var(--mobile-header-padding) * 2); /* use padding space */
    --mobile-logo-size: calc(var(--mobile-header-h) - var(--mobile-logo-pad));
    --mobile-nav-logo-size: 96px; /* enlarged navbar logo for mobile */
    --mobile-hero-logo-size: 104px; /* slightly larger hero logo for mobile */
    /* Responsive banner height: clamps between small and large phones */
    --nav-accent: #C9A24D; /* mobile nav accent color */
    padding: 0; /* header height is fixed; inner row will provide equal gaps */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1060 !important; /* raised so header sits above banner (banner z-index:1015) */
    box-shadow: 0 2px 8px rgba(2,6,10,0.06);
    border-bottom: 1px solid rgba(2,6,10,0.06);
    overflow: visible; /* allow badges/overlays to overflow (prevents cart bubble clipping) */
    height: var(--mobile-header-h) !important;
    visibility: visible !important;
    align-items: center;
  }
  :root {
    /* Make hero content offset equal to the banner height so there is no extra gap */
    --hero-content-offset: var(--mobile-banner-h, 160px);
  }

  .mobile-hero-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    height: var(--mobile-header-h);
    line-height: 1;
    padding-left: 12px;
    padding-right: 4px;
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Center the title block exactly in the bar (absolute centering) */
  .mobile-hero-row .site-title {
    position: absolute; /* absolute center to avoid shifting when icons change */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1010; /* sit above background but below interactive icons */
    pointer-events: none; /* allow taps to reach cart/hamburger on the right */
    text-align: center;
    white-space: nowrap;
    max-width: calc(100% - 120px); /* reserve space for left logo + right icons */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-hero-header .navbar-logo {
    width: var(--mobile-nav-logo-size) !important;
    height: var(--mobile-nav-logo-size) !important;
    margin: 0;
    order: 0;
    flex: 0 0 var(--mobile-nav-logo-size);
    display: block !important;
    object-fit: contain;
    background: rgba(4,15,26,0.96) !important; /* match navbar */
    border-radius: 9999px !important;
    padding: 6px !important; /* inner padding so logo sits inside the dark circle */
    border: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
    align-self: center;
    padding: 0 !important;
    object-position: center center;
    position: relative !important;
    top: 0 !important;
     /* shift left slightly and push the logo down so it drops out of the fixed header
       (negative X moves it left; positive Y moves it downward) */
     transform: translateX(-12.3px) translateY(calc((var(--mobile-nav-logo-size) - var(--mobile-header-h)) / 2 + 6px)) !important;
    z-index: 1070 !important; /* sit above banner and overlay */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide the floating hero logo on mobile — we'll use the banner instead */
  .hero .hero-logo-wrapper { display: none !important; }

  /* Hero banner inserted in HTML — style it for mobile */
  .hero-banner {
    position: absolute; /* place at top of hero */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* let the image determine the banner height so it sits directly under the header */
    height: auto !important;
    overflow: hidden;
    display: block; /* let intrinsic image size control height */
    z-index: 1015; /* sit above the overlay so banner is fully visible but below navbar/logo */
    pointer-events: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    --hero-banner-border-h: clamp(2px, 0.65vw, 5px);
  }
  /* Invisible divider element used to anchor spacing between banner and hero content
     - top should sit immediately below the banner
     - height equals the hero content offset so its bottom meets the hero content top
     - kept transparent (not visible) per request, pointer-events disabled
  */
  .hero-divider {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--mobile-banner-h,160px));
    /* collapse the divider so the next section sits directly after the banner */
    height: 0; /* previously used to push content down; now removed */
    background: transparent;
    border: 0 solid transparent;
    z-index: 1025;
    pointer-events: none;
    display: none; /* keep it out of flow entirely */
  }
  .hero-banner img {
    /* full-width banner that fills the hero area */
    width: 100%;
    height: var(--mobile-banner-h, 160px) !important; /* force banner to match banner height variable */
    max-width: 100%;
    object-fit: cover; /* crop and fill to avoid empty gaps */
    object-position: center center; /* keep focal point centered */
    display: block;
    padding: 0;
    margin: 0;
    background-color: transparent;
  }

  /* Golden border line at the bottom of banner connecting to hero */
  .hero-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, #d4af37 0%, #f4e5b8 50%, #d4af37 100%);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4), 0 -1px 3px rgba(212, 175, 55, 0.2);
    z-index: 1035;
    pointer-events: none;
  }

  /* Keep only the legacy decorative line disabled; desktop stylesheet handles ::after bar */
  .hero-banner::before { content: none !important; }

  /* Push hero content down so it sits below the absolute banner on mobile */
  .hero-content { margin-top: 0; }

  /* Make the hero overlay start immediately beneath the banner (subtract 1px
     to avoid tiny rounding gaps on some devices). This places a solid blue
     translucent overlay for the whole hero except the banner area. */
  .hero::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: var(--mobile-banner-h, 160px);
    bottom: 0;
    background: rgba(4,15,26,0.72) !important;
    z-index: 1;
    pointer-events: none;
  }

  /* No extra divider below the banner */
  .hero::after { content: none !important; }

  /* Site title rules moved to .mobile-hero-row section below to avoid duplication */

  .mobile-hero-header .cart-btn {
    background: transparent;
    border: none;
    color: #C9A24D !important;
    font-size: 1.08rem !important;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1015;
    flex: 0 0 40px;
    height: 40px;
    width: 40px;
    border-radius: 6px;
    position: absolute; /* pin to right edge */
    right: 46px; /* sit left of hamburger */
    top: 50%;
    transform: translateY(-50%);
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mobile-hero-header .cart-icon {
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    color: #C9A24D !important;
    stroke: currentColor;
    fill: none;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mobile-hero-header .hamburger {
    background: transparent;
    border: none;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 !important;
    z-index: 1020;
    flex: 0 0 46px;
    height: 46px;
    width: 46px;
    position: absolute; /* pin to right edge */
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mobile-hero-header .hamburger span {
    width: 24px !important;
    height: 2.5px !important;
    background: #C9A24D !important;
    display: block !important;
    border-radius: 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mobile-hero-header .cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--spice-red);
    color: var(--white);
    border-radius: 50% !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px !important;
    text-align: center;
    padding: 0 !important;
    position: absolute; /* anchor to the cart button now */
    top: -4px; /* overlap icon like reference, but stay visible */
    right: -4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    box-sizing: border-box;
  }

  body { padding-top: 56px !important; margin: 0; }

  /* Products grid: 2-up compact cards */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .product-card {
    border-radius: 10px;
    padding-bottom: 0.2rem;
    overflow: hidden;
    min-height: auto;
  }

  .product-image-wrapper {
    height: 88px;
  }

  .product-body {
    padding: 0.5rem;
  }

  .product-name {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }
  

  .product-card .btn-primary, .product-card .add-to-cart-btn {
    font-size: 0.82rem;
    padding: 0.45rem 0.65rem;
    min-height: 36px;
    border-radius: 10px;
  }

  .qty-selector {
    padding: 0.25rem 0.35rem;
    gap: 0.35rem;
    border-radius: 8px;
  }

  .qty-selector button {
    height: 24px;
    font-size: 0.85rem;
    border-radius: 6px;
  }

  .qty-display {
    min-width: 22px;
    font-size: 0.9rem;
  }

  .product-price {
    font-size: 1.0rem;
    line-height: 1.05;
    margin-bottom: 0.3rem;
    font-family: "Times New Roman", Times, serif;
    font-weight: 700;
    color: var(--herbal-dark);
      margin-bottom: 0.8rem;
    }

  .product-badge { display: none !important; }

  /* Reduce site title and section/title sizes so text is visible on narrow screens */
  .site-title {
    font-size: 0.68rem !important;
    max-width: calc(100% - 112px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Responsive hero content offsets for common phone widths
     - smaller phones get a smaller offset so content doesn't push too far down
     - larger phones get a larger offset to better align with background spoon
  */
}


@media (max-width: 360px) {
  :root { --hero-content-offset: 180px; }
  /* Very small phones: reduce banner height and tighten hero so content fits without excess space */
  :root { --mobile-banner-h: clamp(56px, 18vw, 110px); }
  .hero-content { padding: 0.5rem 0.75rem !important; margin-top: 4px !important; }
  .hero-title { font-size: 1.18rem !important; }
}

@media (min-width: 361px) and (max-width: 420px) {
  :root { --hero-content-offset: 210px; --mobile-banner-h: clamp(64px, 18vw, 120px); }
  .hero-content { padding: 0.6rem 0.9rem !important; margin-top: 5px !important; }
  .hero-title { font-size: 1.3rem !important; }
}

@media (min-width: 421px) and (max-width: 520px) {
  :root { --hero-content-offset: 260px; }
}

@media (min-width: 521px) and (max-width: 820px) {
  :root { --hero-content-offset: 320px; }
}


  /* Make header icons a touch smaller to free space for title */
  .cart-btn, .hamburger {
    flex: 0 0 40px;
    height: 40px;
    width: 40px;
  }

  /* Cart SVG styling (use currentColor for ease of theming) */
  .mobile-hero-header .cart-icon {
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    color: var(--nav-accent);
    stroke: currentColor;
    fill: none;
  }

  /* Hero circular logo wrapper - absolutely positioned to stay fixed */
  .hero .hero-logo-wrapper {
    /* Circular badge with same background as the mobile navbar so it reads as one unit */
    width: var(--mobile-hero-logo-size, 200px) !important; /* responsive hero badge size */
    height: var(--mobile-hero-logo-size, 200px) !important;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4,15,26,0.96) !important; /* match mobile nav bar color */
    border: none !important; /* remove gold ring */
    box-shadow: 0 6px 24px rgba(0,0,0,0.45); /* deeper shadow for depth */
    box-sizing: border-box;
    position: absolute !important;
    /* place the circular logo below the fixed header to avoid overlapping it on mobile */
    top: calc(var(--mobile-header-h, 56px) + 14px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* center horizontally only */
    z-index: 1200 !important; /* sit above the sticky header so the top of the badge is fully visible */
    aspect-ratio: 1 / 1;
    padding: 10px; /* inner padding so logo doesn't touch edges */
    pointer-events: none; /* avoid blocking header interactions if overlapping */
  }

  /* Ensure hero logo image fills the inner dark circle but stays contained */
  .hero .hero-logo-wrapper .hero-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
    border-radius: 50%;
    margin: 0;
    padding: 6px; /* keep a small breathing room from the gold ring */
    background: transparent;
  }

  /* Center the site title in the header between left logo and right icons */
  .mobile-hero-row { 
    position: relative; 
  }
  
  .mobile-hero-row .site-title {
    flex: 1;
    text-align: center;
    order: 1;
    max-width: calc(100% - 140px);
    overflow: hidden;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile override for Option 3: keep title visually centered and nudged to align with hero logo */
  .mobile-hero-row .site-title {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 0;
    transform: translateY(2px);
  }

  .mobile-hero-row .site-title::before {
    content: '';
    position: absolute;
    width: 160%;
    height: 36px;
    border-radius: 999px;
    background: rgba(184,148,30,0.05);
    z-index: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .mobile-hero-row .site-title-line-1,
  .mobile-hero-row .site-title-line-2 { position: relative; z-index: 2; }

  .mobile-hero-row .site-title-line-1 { font-size: 1.28rem !important; }
  .mobile-hero-row .site-title-line-2 { font-size: 0.62rem !important; margin-top: 6px !important; }

  .mobile-hero-row .site-title-line-1 {
    display: inline-block !important; /* size to text so underline matches from M to U */
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.28rem !important;
    letter-spacing: 0.05em;
    color: #C9A24D !important;
    line-height: 1.1;
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
    padding-bottom: 3px !important; /* tighter spacing so underline sits just under MADHU */
    position: relative !important; /* for the pseudo-element */
  }

  .mobile-hero-row .site-title-line-2 {
    display: block !important;
    font-size: 0.62rem !important;
    line-height: 1;
    color: #E8D4A8 !important;
    margin-top: 8px !important; /* increased gap to avoid underline overlap (half of total gap) */
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero .hero-logo-wrapper .hero-logo {
    filter: saturate(0.98) contrast(0.98);
    opacity: 0.99; /* slightly more visible but not overpowering */
  }

  /* Position hero content at bottom of hero section */
  .hero-content {
    text-align: center;
    overflow: visible;
    position: absolute !important;
    /* Pin hero content directly below the banner so it doesn't overlap or sit too high */
    top: calc(var(--mobile-banner-h,160px) + 16px) !important;
    left: 50% !important;
    /* center horizontally and offset vertically relative to `top` */
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.6rem 0 0.6rem !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ensure hero section has proper height and positioning context */
  .hero {
    position: relative !important;
    /* Compact hero for mobile: lower height and keep content near the top */
    min-height: 40vh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-bottom: 0.2rem !important;
    overflow: visible !important; /* ensure absolutely positioned logo isn't clipped */
  }

  /* Ensure hero title has proper spacing at bottom */
  .hero-content .hero-title {
    position: relative;
    z-index: 4;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important; /* slightly tighter gap below title */
  }

  /* Slightly smaller hero subtitle to improve fit under the title */
  .hero-content .hero-subtitle {
    font-size: 0.78rem !important; /* reduced for tighter mobile fit */
    line-height: 1.18 !important;
    margin-top: 0.35rem !important;
    margin-bottom: 0.6rem !important; /* less vertical space before CTAs */
    max-width: 92% !important;
    color: rgba(255,255,255,0.95) !important;
  }

  /* Section titles and subtitles — reduce so longer headings fit */
  .section-title {
    font-size: 1.12rem !important;
    line-height: 1.05 !important;
    margin-bottom: 0.35rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .section-subtitle {
    font-size: 0.88rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Special smaller size for testimonial title so it stays on one readable line */
  .testimonials .section-title {
    font-size: 1.0rem !important;
  }

  /* Footer: allow the copyright to wrap and reduce font size so it's fully visible */
  .footer-bottom p {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0.35rem 0 !important;
  }

  /* Contact form send button: reduce padding and font-size for compact layout */
  .contact-form .btn-primary {
    font-size: 0.84rem !important;
    padding: 0.4rem 0.6rem !important;
    min-height: 34px !important;
    border-radius: 8px !important;
  }

  /* If the hero heading was too large, ensure it shrinks slightly on small phones */
  /* Make hero title fit on one line for mobile */
  .hero-title {
    font-size: 1.40rem !important; /* increased per request */
    line-height: 1.06 !important;
    /* allow wrapping if needed while keeping a large first-line appearance */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 94% !important;
    margin: 0.2rem auto !important;
    letter-spacing: 0.2px !important;
  }

  /* Mobile: stack hero CTAs vertically (Shop Now centered, Explore beneath) */
  .hero .hero-buttons {
    display: flex;
    flex-direction: column; /* stack on mobile */
    gap: 0.9rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.95rem; /* gap from subtitle to CTAs */
  }

  .hero .hero-buttons .btn-primary,
  .hero .hero-buttons .btn-secondary {
    display: block; /* ensure identical outer box for both buttons */
    box-sizing: border-box; /* include border in width so outline and filled look equal */
    text-align: center; /* center label inside */
    white-space: nowrap;
    padding: 0.36rem 0.6rem !important; /* smaller tappable padding for compact look */
    min-height: 32px !important; /* reduced tappable height */
    line-height: 1.05 !important; /* consistent text line spacing */
    font-size: 0.85rem !important; /* slightly smaller font */
    border-radius: 8px !important;
    gap: 0.3rem;
    width: min(50%, 160px); /* narrower buttons on mobile */
    max-width: 160px;
    margin: 0 auto; /* center block-level buttons */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Primary CTA uses the metallic nav accent */
  .hero .hero-buttons .btn-primary {
    background: var(--nav-accent) !important;
    color: #040f1a !important; /* dark text for contrast */
    border: none !important;
  }

  /* Force primary CTA to center on mobile (override any desktop margins) */
  .hero .hero-buttons .btn-primary {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    width: min(70%, 220px) !important; /* ensure same width as secondary */
  }

  /* Secondary CTA uses an outline with the accent */
  .hero .hero-buttons .btn-secondary {
    background: transparent !important;
    color: var(--nav-accent) !important;
    border: 2px solid var(--nav-accent) !important;
  }
}

/* Strong override: hide hero circular logo on mobile so only navbar logo remains */
@media (max-width: 900px) {
  .hero .hero-logo-wrapper { display: none !important; }
}

/* mobile: make product action button compact */
@media (max-width: 820px) {
  .product-actions .btn-secondary {
    padding: 0.32rem 0.6rem !important;
    font-size: 0.9rem !important;
    min-height: 34px !important;
    border-radius: 8px !important;
  }
}

/* mobile: align price and view button consistently */
@media (max-width: 820px) {
  .product-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
  }
  .product-actions { margin-left: auto; }
  .product-actions .btn-secondary, .product-actions .btn-secondary:hover {
    box-shadow: none !important;
    background: transparent !important;
    color: var(--gold) !important;
    border: 2px solid var(--gold) !important;
    transform: none !important;
  }
}

/* mobile: set consistent card height and pin footer */
@media (max-width: 820px) {
  .product-card { display:flex; flex-direction:column; min-height: 320px; }
  .product-card .product-body { flex:1 1 auto; display:flex; flex-direction:column; }
  .product-card .product-footer { margin-top: auto; }
}

/* Make hero logo visible up to 900px so it's easier to test on tablets and some wide phones */
@media (max-width: 900px) {
  .hero .hero-logo-wrapper { display: flex !important; position: absolute !important; z-index: 1200 !important; }
}

/* Ensure CTAs stack and match width on narrower screens up to 900px
   This keeps Shop Now centered and identical in width to Explore when the layout narrows. */
@media (max-width: 900px) {
  .hero .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.9rem !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 0.95rem !important;
  }

  .hero .hero-buttons .btn-primary,
  .hero .hero-buttons .btn-secondary {
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 0.44rem 0.75rem !important; /* slightly reduced on larger small screens */
    min-height: 36px !important;
    line-height: 1.05 !important;
    font-size: 0.90rem !important;
    border-radius: 10px !important;
    width: min(60%, 180px) !important;
    max-width: 180px !important;
    margin: 0 auto !important;
  }

  /* remove desktop margins that could push primary off-center */
  .hero .hero-buttons .btn-primary { margin-left: auto !important; margin-right: auto !important; }
}

/* Optional toggle class to force show hero logo for testing */
.show-hero-logo .hero .hero-logo-wrapper { display: flex !important; position: absolute !important; z-index: 1200 !important; }

/* Strong override: ensure mobile title is absolutely centered and visible
   This comes last to override earlier mobile-specific rules that may conflict. */
@media (max-width: 900px) {
  .mobile-hero-row .site-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1100 !important;
    pointer-events: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #C9A24D !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap !important;
    max-width: calc(100% - 120px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Header/cart adjustments: allow badge to overflow and add spacing between cart and hamburger */
.mobile-hero-header {
  overflow: visible !important; /* allow the cart badge to show outside header bounds */
}

.mobile-hero-row .cart-btn {
  margin-right: 10px; /* create gap so cart badge doesn't hover over hamburger */
}

/* Remove hero logo entirely (global override) -------------------------------------------
   This forces the hero circular badge to be hidden on all viewports so only the
   navbar logo is visible when required. Kept as a strong override at the end
   of the file to beat any earlier display rules. */
.hero .hero-logo-wrapper {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mobile-hero-header .cart-count,
.mobile-hero-row .cart-count {
  top: -4px !important;
  right: -4px !important;
}

/* Mobile: thinner underline positioned between title and subtitle */
@media (max-width: 900px) {
  .mobile-hero-row .site-title-line-1::after {
    content: '';
    position: absolute;
    left: 50%; /* center horizontally */
    transform: translateX(-50%); /* center the underline under MADHU */
    top: calc(100% + 1px); /* place underline just under MADHU with minimal gap */
    width: 100%; /* match text width */
    height: 1px; /* ultra-thin underline */
    border-radius: 2px;
    background: linear-gradient(90deg,#B8941E 0%, #E8C971 60%);
    box-shadow: 0 0 4px rgba(184,148,30,0.10);
    opacity: 1;
    z-index: 1012;
    pointer-events: none;
  }
}