/* =========================================================
   AeternaVita responsive balance fix v2
   Keeps desktop premium. Tightens education pages and mobile nav.
   Load as the LAST stylesheet.
   ========================================================= */

:root {
  --av-page-x: clamp(14px, 4vw, 28px);
  --av-mobile-card-radius: 22px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body { min-width: 0; }
img, video, canvas, svg { max-width: 100%; height: auto; }
button, .button, .ghost-button, input, select, textarea { max-width: 100%; box-sizing: border-box; }

.nav { max-width: min(1120px, calc(100vw - 28px)) !important; }
.products .product-grid, .product-grid { width: min(1380px, calc(100vw - 36px)) !important; }
.checkout-layout, .about-story-grid, .about-section-premium, .cart-hero, .about-hero-premium, .product-detail, .category-products-page, .account-dashboard, .account-shell, .checkout-page, .articles-shell { max-width: calc(100vw - 24px) !important; }

/* Mobile nav: use a clean 2-row wrap instead of a cramped horizontal scroll */
@media (max-width: 900px) {
  .nav {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    gap: 10px 13px !important;
    padding: 8px 10px 10px !important;
    border-radius: 28px !important;
  }

  .nav-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 auto !important;
    order: 0 !important;
  }

  .nav a, .nav-dropdown-trigger, .cart-link, .signin-link, .account-link, .admin-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    letter-spacing: 1.35px !important;
    line-height: 1 !important;
  }

  .nav-dropdown { flex: 0 0 auto !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
  .nav-dropdown::after { display: none !important; }
  .cart-mini-icon { font-size: 14px !important; line-height: 1 !important; display: inline-block !important; transform: translateY(1px); }

  .nav-dropdown-menu {
    position: fixed !important;
    top: 74px !important;
    left: 12px !important;
    right: 12px !important;
    transform: translateY(8px) !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: min(60vh, 420px) !important;
    overflow: auto !important;
    z-index: 999 !important;
  }

  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown-menu:hover { transform: translateY(0) !important; }
}

@media (max-width: 380px) {
  .nav { gap: 9px 10px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .nav a, .nav-dropdown-trigger, .cart-link, .signin-link, .account-link, .admin-link { font-size: 9px !important; letter-spacing: 1.05px !important; }
}

/* Homepage hero */
@media (max-width: 900px) {
  .refined-hero { min-height: auto !important; padding: 100px 12px 28px !important; align-items: flex-start !important; }
  .hero-lux-card { width: 100% !important; max-width: 560px !important; padding: 16px 12px 18px !important; border-radius: 24px !important; }
  .hero-logo-row, .hero-logo-row-left-only { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; align-items: center !important; }
  .hero-offer-link { order: 2 !important; min-height: 54px !important; padding: 10px 14px !important; }
  .hero-offer-link strong { font-size: 20px !important; }
  .hero-logo, .hero-logo-dominant { order: 1 !important; width: min(300px, 78vw) !important; margin-bottom: 2px !important; }
  .hero-headline, h1.hero-headline { font-size: 10px !important; max-width: 320px !important; letter-spacing: 1.35px !important; }
  .hero-copy { font-size: 12px !important; line-height: 1.45 !important; max-width: 360px !important; }
  .purpose-grid { width: 100% !important; max-width: 360px !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .purpose-card { height: 128px !important; min-height: 128px !important; }
  .purpose-title-overlay { font-size: 23px !important; }
  .research-notice { max-width: 360px !important; margin-top: 10px !important; padding: 11px 12px !important; font-size: 11px !important; line-height: 1.45 !important; }
  .hero-accent { font-size: 12px !important; letter-spacing: .8px !important; }
  .hero-actions { gap: 8px !important; }
  .hero-actions .button, .av-whatsapp-community-button { width: 100% !important; max-width: 330px !important; min-height: 38px !important; padding: 9px 12px !important; white-space: normal !important; }
  .av-whatsapp-community-note { max-width: 330px !important; font-size: 11px !important; }
}

/* Education/articles pages */
@media (max-width: 900px) {
  .articles-shell, .recon-shell, .dosages-shell, .calculator-shell, .single-calc-shell, .visual-calc-shell {
    padding-top: 112px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
  }

  .articles-card, .recon-card, .dosages-card, .calculator-hero-card, .single-calc-card, .info-panel, .quick-summary {
    width: 100% !important;
    max-width: 720px !important;
    padding: 18px 14px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .articles-card h1, .recon-card h1, .dosages-card h1, .calculator-hero-card h1 {
    font-size: clamp(32px, 11vw, 48px) !important;
    line-height: 1.04 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  .articles-kicker { text-align: center !important; font-size: 11px !important; letter-spacing: 2px !important; }
  .articles-intro { max-width: 100% !important; font-size: 17px !important; line-height: 1.55 !important; text-align: center !important; }
  .articles-warning { padding: 14px !important; font-size: 14px !important; line-height: 1.55 !important; text-align: center !important; margin: 22px 0 !important; }
  .article-resource-grid { grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 18px !important; }
  .article-resource-card { padding: 16px !important; border-radius: 20px !important; }
  .article-resource-card h2 { font-size: 22px !important; line-height: 1.15 !important; }
  .article-resource-card p { font-size: 14px !important; line-height: 1.55 !important; }
  .article-resource-footer { align-items: stretch !important; gap: 10px !important; }
  .article-resource-footer a { display: block !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; }
}

/* Product grids */
@media (max-width: 860px) {
  .products, .category-products-page { padding: 100px 12px 42px !important; }
  .products-title, .products h2, .category-page-heading h1 { font-size: clamp(28px, 9vw, 42px) !important; margin-top: 10px !important; }
  .category-page-heading { padding: 0 8px !important; }
  .category-page-heading p { font-size: 13px !important; line-height: 1.55 !important; }
  .products .product-grid, .product-grid { width: 100% !important; max-width: 560px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin-top: 18px !important; }
  .products .card, .card { min-width: 0 !important; padding: 10px 8px 12px !important; border-radius: var(--av-mobile-card-radius) !important; }
  .products .vial-img, .card .vial-img { width: min(150px, 100%) !important; max-height: 150px !important; margin: -2px auto 4px !important; object-fit: contain !important; }
  .products .card h3, .card h3 { font-size: 16px !important; line-height: 1.08 !important; margin: 4px 0 6px !important; }
  .products .price-pill { font-size: 10.5px !important; padding: 5px 8px !important; }
  .products .card-actions, .card-actions { display: grid !important; grid-template-columns: 42px 1fr !important; gap: 6px !important; width: 100% !important; padding-top: 8px !important; justify-content: stretch !important; }
  .products .stock-pill, .stock-pill { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; text-align: center !important; font-size: 8px !important; padding: 5px 6px !important; }
  .products .qty-input, .qty-input { width: 42px !important; min-height: 34px !important; padding: 6px 4px !important; }
  .products .quick-add, .products .card-actions .button, .card-actions .button { width: 100% !important; min-height: 34px !important; padding: 7px 7px !important; font-size: 8.5px !important; letter-spacing: .75px !important; white-space: nowrap !important; }
}

@media (max-width: 390px) {
  .products .product-grid, .product-grid { grid-template-columns: 1fr !important; max-width: 300px !important; }
  .products .vial-img, .card .vial-img { width: min(210px, 100%) !important; max-height: 210px !important; }
}

/* Cart/checkout/account/about */
@media (max-width: 900px) {
  .cart-premium-shell, .checkout-page, .account-shell, .account-dashboard, .about-premium-shell, .product-detail {
    padding-top: 100px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .cart-hero, .about-hero-premium { width: 100% !important; max-width: 720px !important; min-height: auto !important; padding: 22px 18px !important; border-radius: 24px !important; margin-bottom: 14px !important; }
  .cart-hero h1, .about-hero-copy h1 { font-size: clamp(34px, 11vw, 48px) !important; }
  .cart-hero p, .about-hero-copy p { font-size: 13px !important; line-height: 1.55 !important; }
  .checkout-layout { width: 100% !important; max-width: 720px !important; grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 38px !important; }
  .checkout-card, .summary-card, .notice-card, .account-card, .dashboard-panel, .dashboard-menu, .about-logo-panel, .about-copy-panel, .about-glass-card, .about-cape-panel, .about-final-cta, .legal-card { padding: 16px !important; border-radius: 20px !important; }
  .checkout-field-grid, .checkout-field-grid.three, .two-col, .dashboard-grid, .about-story-grid, .about-card-grid, .product-focus-grid, .compound-grid, .recon-grid, .calculator-grid, .single-calc-grid { grid-template-columns: 1fr !important; }
  .checkout-item, .cart-line { grid-template-columns: 70px minmax(0, 1fr) !important; gap: 10px !important; padding: 10px !important; border-radius: 18px !important; }
  .checkout-item img, .cart-line-img { width: 70px !important; height: 70px !important; object-fit: contain !important; border-radius: 14px !important; }
  .checkout-qty, .checkout-line-total, .cart-controls { grid-column: 1 / -1 !important; text-align: left !important; }
  .summary-card { position: relative !important; top: auto !important; }
}

@media (max-width: 980px) {
  .product-detail { width: 100% !important; max-width: 760px !important; grid-template-columns: 1fr !important; gap: 20px !important; text-align: center !important; }
  .product-visual { position: relative !important; top: auto !important; }
  .product-visual .vial-img, .product-visual img { width: min(300px, 82vw) !important; max-height: 310px !important; object-fit: contain !important; }
  .product-meta, .summary-grid, .compare-grid { grid-template-columns: 1fr !important; }
  .top-buy { justify-content: center !important; }
}

@media (max-width: 760px) {
  .site-footer.index-footer { padding: 32px 16px 24px !important; margin-top: 30px !important; }
  .index-footer .footer-top { grid-template-columns: 1fr !important; gap: 26px !important; text-align: center !important; margin-bottom: 28px !important; }
  .index-footer .footer-brand-icon { width: 88px !important; height: 88px !important; }
  .index-footer .footer-column h4 { margin-bottom: 10px !important; }
  .index-footer .footer-disclaimer-text { font-size: 10.5px !important; line-height: 1.65 !important; }
}

@media (max-width: 900px) {
  .admin-shell { padding-top: 100px !important; }
  .admin-panel { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .admin-toolbar, .admin-title, .admin-actions, .admin-tabs { align-items: stretch !important; }
}


/* Mobile dropdown tap fix */
@media (max-width: 900px) {
  .nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .nav-dropdown:not(.is-open) .nav-dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Compact homepage research focus on mobile */
.mobile-research-focus { display: none; }
@media (max-width: 900px) {
  .refined-hero .purpose-grid { display: none !important; }
  .mobile-research-focus {
    display: grid;
    gap: 9px;
    width: 100%;
    max-width: 350px;
    margin: 6px auto 2px;
    padding: 12px;
    border: 1px solid rgba(196,139,77,.24);
    border-radius: 18px;
    background: rgba(255,255,255,.48);
  }
  .mobile-focus-label {
    color: var(--gold);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }
  .mobile-focus-pills {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
  }
  .mobile-focus-pills span {
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 6px 5px;
    border-radius: 999px;
    background: rgba(64,37,95,.07);
    color: var(--violet);
    font-family: 'Playfair Display',serif;
    font-size: 13px;
    line-height: 1;
  }
}
/* =========================================================
   AETERNA VITA HOMEPAGE VIAL SHOWCASE
   Desktop: vial, three research cards, vial.
   Mobile: compact vial columns beside stacked research labels.
   ========================================================= */
.purpose-showcase {
  width: min(900px, 100%);
  margin: 12px auto 15px;
  display: grid;
  grid-template-columns: minmax(72px, 105px) minmax(0, 1fr) minmax(72px, 105px);
  align-items: center;
  gap: 12px;
}
.purpose-showcase .purpose-grid {
  width: 100% !important;
  margin: 0 !important;
  min-width: 0;
}
.purpose-vial {
  display: block;
  width: 100%;
  max-width: 105px;
  max-height: 190px;
  object-fit: contain;
  justify-self: center;
  filter: contrast(1.02) drop-shadow(0 12px 22px rgba(74,49,100,.10));
}

@media (max-width: 900px) {
  .refined-hero .purpose-showcase {
    width: 100%;
    max-width: 390px;
    grid-template-columns: 70px minmax(0, 210px) 70px;
    gap: 7px;
    margin: 8px auto 10px;
  }
  .refined-hero .purpose-showcase .purpose-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    max-width: none !important;
  }
  .refined-hero .purpose-showcase .purpose-card {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
  }
  .refined-hero .purpose-showcase .purpose-card img,
  .refined-hero .purpose-showcase .purpose-card::before,
  .refined-hero .purpose-showcase .purpose-card::after,
  .refined-hero .purpose-showcase .purpose-card p {
    display: none !important;
  }
  .refined-hero .purpose-showcase .purpose-title-overlay {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 18px !important;
    text-shadow: none !important;
  }
  .purpose-vial {
    width: 68px;
    max-height: 174px;
  }
  .mobile-research-focus {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .refined-hero .purpose-showcase {
    grid-template-columns: 56px minmax(0, 190px) 56px;
    gap: 5px;
  }
  .purpose-vial {
    width: 54px;
  }
  .refined-hero .purpose-showcase .purpose-title-overlay {
    font-size: 16px !important;
  }
}

/* =========================================================
   AETERNA VITA MOBILE VIAL WIDTH V3
   Explicit final override: narrower centre labels, larger vials.
   ========================================================= */
@media (max-width: 900px) {
  .refined-hero .purpose-showcase {
    width: 100% !important;
    max-width: 390px !important;
    display: grid !important;
    grid-template-columns: 76px 176px 76px !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  .refined-hero .purpose-showcase .purpose-grid {
    width: 176px !important;
    max-width: 176px !important;
    min-width: 0 !important;
    justify-self: center !important;
  }

  .refined-hero .purpose-showcase .purpose-card {
    width: 176px !important;
    max-width: 176px !important;
  }

  .refined-hero .purpose-showcase .purpose-vial {
    width: 76px !important;
    max-width: 76px !important;
    max-height: 190px !important;
  }
}

@media (max-width: 380px) {
  .refined-hero .purpose-showcase {
    grid-template-columns: 64px 164px 64px !important;
    column-gap: 6px !important;
  }

  .refined-hero .purpose-showcase .purpose-grid,
  .refined-hero .purpose-showcase .purpose-card {
    width: 164px !important;
    max-width: 164px !important;
  }

  .refined-hero .purpose-showcase .purpose-vial {
    width: 64px !important;
    max-width: 64px !important;
    max-height: 178px !important;
  }
}
/* =========================================================
   AETERNA VITA MOBILE VIAL WIDTH V5
   Narrower centre labels and larger product vials.
   ========================================================= */
@media (max-width: 900px) {
  .refined-hero .purpose-showcase {
    width: 100% !important;
    max-width: 380px !important;
    grid-template-columns: 84px 150px 84px !important;
    justify-content: center !important;
    column-gap: 8px !important;
  }
  .refined-hero .purpose-showcase .purpose-grid,
  .refined-hero .purpose-showcase .purpose-card {
    width: 150px !important;
    max-width: 150px !important;
  }
  .refined-hero .purpose-showcase .purpose-vial {
    width: 84px !important;
    max-width: 84px !important;
    max-height: 205px !important;
  }
}
@media (max-width: 380px) {
  .refined-hero .purpose-showcase {
    grid-template-columns: 70px 142px 70px !important;
    column-gap: 6px !important;
  }
  .refined-hero .purpose-showcase .purpose-grid,
  .refined-hero .purpose-showcase .purpose-card {
    width: 142px !important;
    max-width: 142px !important;
  }
  .refined-hero .purpose-showcase .purpose-vial {
    width: 70px !important;
    max-width: 70px !important;
    max-height: 190px !important;
  }
}