/* ─────────────────────────────────────────────────────────────
   Cove Compounds — shared mobile layer (phones, ≤760px wide).
   Loaded last on every page so it overrides the page's own styles.
   Desktop is untouched: everything except the header's base styles
   lives inside the max-width:760px block.
   ───────────────────────────────────────────────────────────── */

/* Shared header — hidden on desktop */
.cc-mh, .cc-mh-sheet { display: none; }

@media (max-width: 760px) {

  /* ── Global iPhone basics ── */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
  a, button, [role="button"], [onclick], label, select { touch-action: manipulation; }
  /* iOS zooms into any field under 16px — never let that happen */
  input, select, textarea { font-size: 16px !important; }
  html.cc-mh-locked, html.cc-mh-locked body { overflow: hidden; }

  /* ── Replace each page's own header with the shared one ── */
  .has-cc-mh nav#navbar,
  .has-cc-mh body > nav:not(.sb-nav),
  .has-cc-mh .pd-nav,
  .has-cc-mh .nav-mob-panel,
  .has-cc-mh body > header.top { display: none !important; }
  /* Floating "Shop All" pill (homepage + product pages): clears the iPhone home bar,
     and on product pages rides above the Add to Cart bar whenever that bar is showing */
  .shop-all-fab {
    display: flex !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important; padding: 0 24px !important; min-height: 48px !important;
    transition: opacity .3s ease, transform .3s ease, bottom .3s ease !important;
  }
  .page-product:has(#pdStickyBar.visible) .shop-all-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  html.cc-mh-locked .shop-all-fab { display: none !important; }
  /* Room under the footer so the last lines scroll clear of the pill */
  html.page-home footer, html.page-product footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Scrolling promo bar sits in the page flow above the header (scrolls away; header stays) */
  .has-cc-mh .promo-bar { position: relative !important; top: auto !important; height: 30px; z-index: 951; }
  .has-cc-mh .promo-item { font-size: 12px; }

  /* ── The header ── */
  .cc-mh {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 950;
    height: 56px; padding: 0 4px 0 16px;
    background: rgba(11, 22, 32, 0.9);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .cc-mh-logo { display: flex; flex-direction: column; gap: 3px; text-decoration: none; line-height: 1; }
  .cc-mh-w { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; letter-spacing: .12em; color: #D4A96A; }
  .cc-mh-s { font-family: 'Montserrat', -apple-system, sans-serif; font-size: 8px; letter-spacing: .42em; text-transform: uppercase; color: #A07840; }
  .cc-mh-actions { display: flex; align-items: center; }
  .cc-mh-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px;
    background: transparent; color: #F5F0E8; cursor: pointer; text-decoration: none;
  }
  .cc-mh-btn:active { background: rgba(255, 255, 255, 0.1); }
  .cc-mh-btn:focus-visible { outline: 2px solid #D4A96A; outline-offset: -2px; }
  .cc-mh-badge {
    position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #D4A96A; color: #1A1612;
    font: 700 11px/18px 'Montserrat', -apple-system, sans-serif; text-align: center;
  }

  /* ── Menu sheet ── */
  .cc-mh-sheet { display: block; position: fixed; inset: 0; z-index: 949; }
  .cc-mh-sheet[hidden] { display: none; }
  .cc-mh-scrim { position: absolute; inset: 0; background: rgba(5, 10, 16, 0.55); }
  .cc-mh-panel {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 64px 12px 18px; /* clears the header */
    background: #0f1e2a; border-bottom: 1px solid rgba(212, 169, 106, 0.18);
    border-radius: 0 0 20px 20px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    animation: ccMhDrop .22s ease-out;
  }
  @keyframes ccMhDrop { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .cc-mh-panel { animation: none; } }
  .cc-mh-link {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 54px; padding: 0 12px; border-radius: 0;
    color: #F5F0E8; text-decoration: none;
    font: 500 17px/1.2 'Montserrat', -apple-system, sans-serif;
  }
  .cc-mh-link + .cc-mh-link { border-top: 1px solid rgba(255, 255, 255, 0.06); }
  .cc-mh-link svg { color: rgba(245, 240, 232, 0.35); flex-shrink: 0; }
  .cc-mh-link:active { background: rgba(255, 255, 255, 0.06); }
  .cc-mh-link.is-here { color: #D4A96A; }
  .cc-mh-contact {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 16px 12px 4px; margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font: 400 14px/1.4 'Montserrat', -apple-system, sans-serif; color: rgba(245, 240, 232, 0.55);
  }
  .cc-mh-contact a { color: #D4A96A; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
  /* When the page has a promo bar above the header, the open menu still starts under the header */
  .cc-mh-sheet { top: 0; }

  /* ═════════════ HOMEPAGE ═════════════ */
  /* Hero used to start under the old fixed header, hiding the headline */
  .has-cc-mh #hero { padding-top: 36px !important; padding-bottom: 40px !important; gap: 0 !important; }
  .has-cc-mh #hero h1 { font-size: 40px !important; line-height: 1.08 !important; }
  .has-cc-mh .hero-p { font-size: 16px !important; line-height: 1.6 !important; max-width: 34ch; margin-left: auto; margin-right: auto; }
  /* One clear call to action instead of three stacked "Shop" buttons */
  .has-cc-mh .btn-vials { display: none !important; }
  .has-cc-mh .hero-cta .btn {
    display: flex !important; align-items: center; justify-content: center;
    width: 100%; max-width: 340px; min-height: 52px; margin: 0 auto;
    border-radius: 14px !important; background: #D4A96A !important; color: #1A1612 !important;
    font-weight: 700 !important; letter-spacing: .12em !important;
  }
  /* Trust tags: one tidy row */
  .has-cc-mh .hero-pills { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; max-width: none !important; margin-top: 20px !important; }
  .has-cc-mh .hero-pills .pill { font-size: 10px !important; padding: 7px 10px !important; border-radius: 999px !important; letter-spacing: .1em !important; }
  .has-cc-mh .hero-vials { margin-top: 8px; }
  .has-cc-mh .hvial-wrap { width: 270px !important; height: 210px !important; }
  .has-cc-mh .hvial { height: 130px !important; }

  /* Research & Literature: swipe sideways instead of six full-height cards stacked (~4,000px) */
  #research .rgrid {
    display: flex !important; gap: 12px !important; margin: 28px -24px 0 !important; padding: 0 24px 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  #research .rgrid::-webkit-scrollbar { display: none; }
  #research .rc { flex: 0 0 84%; scroll-snap-align: start; border-radius: 18px !important; transform: none !important; }
  #research .rc-thumb { height: 132px; }
  #research .rc-body { padding: 16px 16px 6px; }
  #research .rc-tag { font-size: 10px; }
  #research .rc-title { font-size: 17px; }
  #research .rc-excerpt { font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #research .rc-src { font-size: 11px; }
  #research .rc-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; }

  /* FAQ: the page's own phone rule never applied (inline styles beat it) — one column, roomy rows */
  #faq { padding: 56px 20px !important; }
  #faq-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  #faq-grid > div:first-child .faq-item:last-child { border-bottom: 1px solid rgba(212, 169, 106, 0.15) !important; }
  #faq h2 { font-size: 30px !important; }
  .faq-q { font-size: 16px !important; min-height: 56px; padding: 16px 0 !important; }
  .faq-a { font-size: 15px !important; line-height: 1.7 !important; }

  /* Footer links: real tap targets instead of 11px text */
  footer .ft-links { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0 18px !important; }
  footer .ft-links a, footer a[href^="tel:"], footer a[href^="mailto:"], footer a[href="/terms"] {
    display: inline-flex !important; align-items: center; min-height: 44px; font-size: 14px !important;
  }

  /* Testimonial dots/arrows: bigger tap areas */
  .t-arrow { width: 44px !important; height: 44px !important; }

  /* ═════════════ SHOP ═════════════ */
  .page-shop .shop-hero { padding: 22px 16px 14px !important; }
  .page-shop .shop-hero h1 { font-size: 30px !important; line-height: 1.12 !important; margin-bottom: 6px !important; }
  .page-shop .shop-hero p { font-size: 14px !important; line-height: 1.5 !important; }
  .page-shop .trust-pills { display: none !important; }          /* same promises are on the homepage */
  /* Categories: one swipeable row instead of three rows of buttons */
  .page-shop .filter-bar { flex-direction: column; align-items: stretch !important; gap: 10px !important; padding: 0 0 16px !important; width: 100%; min-width: 0; }
  .page-shop .filter-pills {
    width: 100%; max-width: 100vw; min-width: 0; box-sizing: border-box;
    flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important; padding: 2px 16px 4px;
    scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .page-shop .filter-pills::-webkit-scrollbar { display: none; }
  .page-shop .filter-pill { flex: 0 0 auto; min-height: 40px !important; padding: 0 16px !important; font-size: 12px !important; border-radius: 999px !important; }
  .page-shop .sort-select { align-self: flex-start; margin: 0 16px; min-height: 44px !important; border-radius: 12px !important; padding: 0 36px 0 14px !important; }
  .page-shop .shop-section { padding: 0 12px 40px !important; }
  .page-shop .vgrid { gap: 10px !important; }
  .page-shop .scard { border-radius: 16px !important; border-width: 1.5px !important; }
  .page-shop .cinfo { padding: 12px 12px 12px !important; }
  .page-shop .cname { font-size: 15px !important; }
  .page-shop .csize { font-size: 11px !important; }
  .page-shop .cprice { font-size: 16px !important; margin-bottom: 10px !important; }
  .page-shop .ccat { display: none !important; }                 /* the category filter already says this */
  .page-shop .cadd-full { min-height: 46px !important; border-radius: 12px !important; font-size: 12px !important; }
  /* Quantity sheet: bigger close button, respects the iPhone home bar */
  .page-shop .qs-close { width: 44px !important; height: 44px !important; }
  .page-shop .qs-panel { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ═════════════ PRODUCT PAGE ═════════════ */
  .page-product .pd-crumb { display: none !important; }
  /* Photo, then name/price/description, then the lab certificate (it used to sit between photo and price) */
  .page-product .pd-wrap { display: flex !important; flex-direction: column; gap: 22px !important; padding: 16px 16px 110px !important; }
  .page-product .pd-left-col { display: contents !important; }
  .page-product .pd-wrap .pd-img-wrap { order: 1; max-width: none !important; border-radius: 20px !important; }
  .page-product .pd-wrap > div:not(.pd-left-col) { order: 2; }
  .page-product .pd-wrap .coa-section { order: 3; margin-top: 0 !important; border-radius: 16px !important; }
  .page-product .pd-name { font-size: 28px !important; line-height: 1.15 !important; }
  .page-product .pd-desc { font-size: 16px !important; line-height: 1.65 !important; }
  /* Add to Cart bar: full-width button, clears the iPhone home bar */
  .page-product #pdStickyBar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important; gap: 14px !important; }
  .page-product .pd-sticky-btn { flex: 1 1 auto; height: 50px !important; border-radius: 14px !important; font-size: 13px !important; font-weight: 700 !important; }
  .page-product .pd-sticky-price { font-size: 22px !important; }

  /* ═════════════ CHECKOUT ═════════════ */
  /* Remove the spacer left for the old fixed header, and put the order form BEFORE the Best Sellers upsell */
  .page-checkout body > div[style*="padding-top:106px"] { padding-top: 0 !important; display: flex; flex-direction: column; }
  .page-checkout #order { order: 1; padding: 16px 12px 28px !important; }
  .page-checkout .bs-section { order: 2; }
  /* Cart rows: name + price on top, quantity controls underneath (the name used to get squeezed) */
  .page-checkout .os-item {
    display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "name price" "ctrl ctrl";
    align-items: center; gap: 8px 12px !important; padding: 12px 0 !important;
  }
  .page-checkout .os-item-name { grid-area: name; font-size: 15px !important; font-weight: 500 !important; color: var(--ink, #1A1612) !important; line-height: 1.3; }
  .page-checkout .os-item-price { grid-area: price; font-size: 15px !important; font-weight: 600 !important; min-width: 0 !important; font-variant-numeric: tabular-nums; }
  .page-checkout .os-item-controls { grid-area: ctrl; gap: 8px !important; }
  .page-checkout .os-qty-btn { width: 40px !important; height: 40px !important; border-radius: 10px !important; font-size: 18px !important; }
  .page-checkout .os-qty-num { min-width: 28px; text-align: center; font-size: 16px; font-weight: 600; }
  .page-checkout .os-remove { margin-left: auto; min-height: 40px !important; border-radius: 10px !important; font-size: 12px !important; }

  .page-product .pd-size { display: none !important; }   /* the size is already in the product name */

  /* ═════════════ COAs / GUIDES / TERMS ═════════════ */
  /* Their headers left ~100px for the old fixed header; the new header is in the page flow */
  .page-coas .page-header, .page-guides .page-header, .page-terms .page-header { padding: 32px 20px 32px !important; }
  .page-coas .page-header h1, .page-guides .page-header h1, .page-terms .page-header h1 { font-size: 34px !important; line-height: 1.1 !important; }
  .page-coas .page-header p, .page-guides .page-header p, .page-terms .page-header p { font-size: 15px !important; line-height: 1.6 !important; }
  /* Guide tabs: one swipeable row, real tap targets */
  .page-guides .guide-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .page-guides .guide-tabs::-webkit-scrollbar { display: none; }
  .page-guides .guide-tab { flex: 0 0 auto; display: inline-flex !important; align-items: center; min-height: 48px; white-space: nowrap; font-size: 12px !important; }
  /* COA buttons: 44px tall */
  .page-coas .coa-btn { min-height: 44px !important; border-radius: 10px !important; }
  /* Terms: the table of contents links were 21px tall */
  .page-terms a[data-n] { display: flex !important; align-items: center; min-height: 44px; font-size: 15px !important; }

  /* ═════════════ ACCOUNT ═════════════ */
  .page-account .page-wrap { padding-top: 0 !important; }
  /* All account sections as one swipeable row of tabs (phones used to only get "Shop" and "Orders") */
  .page-account .sidebar {
    position: sticky !important; top: 56px; z-index: 20; background: rgba(11, 22, 32, 0.96) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    padding: 10px 0 !important; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .page-account .sb-nav { display: flex !important; flex-direction: row !important; flex: none !important; gap: 8px; padding: 0 0 0 12px !important; width: auto !important; }
  .page-account .sb-nav-item {
    display: inline-flex !important; flex: 0 0 auto; align-items: center; gap: 6px; width: auto !important;
    min-height: 40px; padding: 0 14px !important; border-radius: 999px !important;
    border: 1px solid rgba(245, 240, 232, 0.16) !important; background: transparent !important;
    color: rgba(245, 240, 232, 0.78) !important; font-size: 13px !important; white-space: nowrap;
  }
  .page-account .sb-nav-item svg { display: none; }
  .page-account .sb-nav-item.active { background: #D4A96A !important; border-color: #D4A96A !important; color: #1A1612 !important; font-weight: 600; }
  /* Shop is in the header; downloads, notifications and saved cards are empty placeholders */
  .page-account .sb-shop-link,
  .page-account .sb-nav-item[data-tab="downloads"],
  .page-account .sb-nav-item[data-tab="notifications"],
  .page-account .sb-nav-item[data-tab="cards"] { display: none !important; }
  .page-account .sb-footer { padding: 0 12px 0 0 !important; }
  .page-account .btn-logout { min-height: 40px; border-radius: 999px !important; font-size: 12px !important; padding: 0 14px !important; }
  .page-account .main-content { padding: 20px 16px 48px !important; }
  /* Dashboard: orders + member-since side by side, store credit full width */
  .page-account .dash-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .page-account .dash-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .page-account .dash-card { padding: 16px !important; border-radius: 16px !important; }
  .page-checkout #orderSubmitBtn { min-height: 56px; border-radius: 14px !important; letter-spacing: .06em !important; font-size: 14px !important; padding: 0 18px !important; }
}