/* ═══════════════════════════════════════════════════════════
   AusHelix — style.css
   One stylesheet for the entire site.

   HOW TO USE THIS FILE
   ─────────────────────────────────────────────────────────
   • Each section is labelled with a large comment block
   • Find any section by searching for its header (e.g. "COLORS")
   • Colors, fonts, and spacing are all in the DESIGN TOKENS
     section at the top — change them there and they update everywhere

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────
   1.  DESIGN TOKENS  (colors, fonts, spacing — edit here first)
   2.  RESET & BASE
   3.  TYPOGRAPHY
   4.  LAYOUT HELPERS
   5.  NOTICE BAR
   6.  TICKER / MARQUEE
   7.  NAVIGATION
   8.  BUTTONS
   9.  HERO SECTION
   10. STATS BAR
   11. PRODUCT GRID (homepage cards)
   12. PRODUCT DETAIL PAGE
   13. HOW IT WORKS
   14. WHY AUSHELIX
   15. QUALITY SECTION
   16. SHIPPING STRIP
   17. FAQ ACCORDION
   18. CTA SECTION
   19. DISCLAIMER
   20. FOOTER
   21. RESPONSIVE (mobile / tablet)
   ═══════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   Change these values to restyle the entire site at once.
   ────────────────────────────────────────────────────────── */
:root {
  /* BRAND COLORS ─────────────────────── */
  --bg:          #f2f5fb;        /* Page background (light blue-white) */
  --dark-blue:   #061539;        /* Primary text, headings, footer bg   */
  --vivid-blue:  #0839d3;        /* Accent: buttons, links, badges       */
  --white:       #ffffff;        /* Cards, nav, surfaces                 */

  /* SURFACE COLORS ───────────────────── */
  --surface:     #ffffff;
  --surface-2:   #eaeff8;

  /* TEXT SHADES ─────────────────────── */
  --text:        #061539;        /* Primary text */
  --text-2:      #3a5080;        /* Secondary text / body copy */
  --text-3:      #8090b0;        /* Muted / placeholder */

  /* ACCENT TINTS ─────────────────────── */
  --accent-soft: rgba(8,57,211,0.08);
  --accent-mid:  rgba(8,57,211,0.16);
  --accent-glow: rgba(8,57,211,0.24);

  /* BORDERS ──────────────────────────── */
  --border:      rgba(6,21,57,0.08);
  --border-mid:  rgba(6,21,57,0.14);

  /* TYPOGRAPHY ───────────────────────── */
  --font:        'Inter', system-ui, sans-serif;
  --mono:        'DM Mono', 'Courier New', monospace;

  /* SHAPES ───────────────────────────── */
  --r:           10px;    /* Base border radius */
  --r-lg:        16px;
  --r-xl:        22px;
  --nav-h:       72px;    /* Nav bar height */

  /* TRANSITIONS ──────────────────────── */
  --ease:        cubic-bezier(0.25,0.46,0.45,0.94);
}


/* ──────────────────────────────────────────────────────────
   2. RESET & BASE
   ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
}
img   { display: block; max-width: 100%; }
a     { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }


/* ──────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

/* Gradient text — used on hero headline "Materials." */
.text-gradient {
  background: linear-gradient(110deg, var(--vivid-blue) 0%, #3a7fff 50%, #7ab4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Small all-caps label above headings */
.label-tag {
  display: inline-block;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vivid-blue);
  margin-bottom: 10px;
}


/* ──────────────────────────────────────────────────────────
   4. LAYOUT HELPERS
   ────────────────────────────────────────────────────────── */
/* .wrap — max-width container, centred */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section vertical rhythm */
.section    { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* Centred section header (label + heading + sub) */
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.section-head p {
  font-size: 0.9rem;
  color: var(--text-2);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.75;
}


/* ──────────────────────────────────────────────────────────
   5. NOTICE BAR
   The blue alert strip at the very top of every page.
   To change text: edit the <div class="notice"> in HTML.
   ────────────────────────────────────────────────────────── */
.notice {
  background: var(--vivid-blue);
  color: rgba(255,255,255,0.88);
  text-align: center;
  padding: 8px 1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ──────────────────────────────────────────────────────────
   6. TICKER / MARQUEE
   Scrolling dark strip below the notice bar.
   To change speed: adjust `animation: ticker Xs` (X = seconds).
   To add/remove items: edit .ticker-item spans in HTML.
   ────────────────────────────────────────────────────────── */
.ticker {
  background: var(--dark-blue);
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker-inner {
  display: flex;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
}
.ticker:hover .ticker-inner { animation-play-state: paused; } /* pause on hover */
.ticker-item {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.5);
  padding: 0 2rem;
}
.ticker-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--vivid-blue);
  opacity: 0.7;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  align-self: center;
  margin: 0 0.25rem;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }  /* -50% because content is duplicated */
}


/* ──────────────────────────────────────────────────────────
   7. NAVIGATION
   Sticky glass nav bar.
   --nav-h in Design Tokens controls the height.
   ────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(6,21,57,0.96);  /* dark so screen-blend logo shows correctly */  /* dark bg so screen-blend logo shows correctly */
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 4px 20px rgba(6,21,57,0.04);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* LOGO — 100px height, no background wrapper.
   mix-blend-mode:screen removes black bg against dark nav.
   To resize: change height: 100px in .logo-chip img        */
.logo-chip {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.18s;
}
.logo-chip:hover { opacity: 0.82; }
.logo-chip img {
  height: 100px;   /* ← RESIZE: change this to scale the nav logo */
  display: block;
  mix-blend-mode: screen;
}

/* Nav links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  transition: color 0.15s;
}
.nav-links a:hover,
.nav-links a.active { color: #fff; font-weight: 700; }

/* Nav CTA button */
.btn-nav {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 18px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: var(--r);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-nav:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.18); }


/* ──────────────────────────────────────────────────────────
   8. BUTTONS
   ────────────────────────────────────────────────────────── */
/* Primary button — solid vivid blue */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--vivid-blue), #1a52e8);
  color: #fff;
  border: none;
  border-radius: var(--r);
  box-shadow: 0 4px 16px var(--accent-glow);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-decoration: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0526a0, var(--vivid-blue));
  box-shadow: 0 6px 24px rgba(8,57,211,0.36);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Ghost button — outlined */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 26px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  color: var(--dark-blue);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r);
  box-shadow: 0 2px 8px rgba(6,21,57,0.06);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-decoration: none;
}
.btn-ghost:hover {
  border-color: var(--vivid-blue);
  color: var(--vivid-blue);
  transform: translateY(-1px);
}

/* Full-width product Add button */
.btn-add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  background: linear-gradient(135deg, var(--vivid-blue), #1a52e8);
  color: #fff;
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 700;
  border: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg); /* rounds bottom corners of card */
  box-shadow: 0 4px 12px var(--accent-glow);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-decoration: none;
}
.btn-add:hover {
  background: linear-gradient(135deg, #0526a0, var(--vivid-blue));
  box-shadow: 0 6px 20px rgba(8,57,211,0.36);
}

/* Add to cart — full width on product page */
.add-cart-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--vivid-blue), #1a52e8);
  color: #fff;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  border-radius: var(--r);
  box-shadow: 0 4px 16px var(--accent-glow);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-decoration: none;
}
.add-cart-btn:hover {
  background: linear-gradient(135deg, #0526a0, var(--vivid-blue));
  box-shadow: 0 6px 24px rgba(8,57,211,0.36);
  transform: translateY(-1px);
}


/* ──────────────────────────────────────────────────────────
   9. HERO SECTION
   The large opening section on index.html.
   ────────────────────────────────────────────────────────── */
.hero {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  position: relative;
  /* HERO BACKGROUND IMAGE
     To change the background image: update the url() path below.
     To hide the image: change opacity of .hero-overlay to 1.
     To show more image: lower the .hero-overlay opacity (0.7 = 30% image showing). */
  background-image: url('images/hero-bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Semi-transparent overlay — sits over the bg image, under the text.
   Opacity controls how much of the background image shows through.
   0.82 = subtle hint of image behind clean white surface. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(242,245,251,0.82);
  z-index: 1;
}

/* HERO INNER — centred single column
   To change vertical padding: edit the padding values below. */
.hero-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 88px 2rem 100px;
  text-align: center;
  position: relative;
  z-index: 2;  /* above .hero-overlay which is z-index: 1 */
}

/* LEFT COLUMN — text */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vivid-blue);
  background: var(--accent-soft);
  border: 1px solid var(--accent-mid);
  border-radius: 99px;
  padding: 5px 14px;
  margin-bottom: 24px;
}
.hero-title {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 20px;
}
.hero-body {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.78;
  max-width: 640px;
  margin: 0 auto 32px;  /* auto left/right centres it */
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }

/* Trust pills row below the CTA buttons */
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.trust-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 7px 16px;
  box-shadow: 0 2px 8px rgba(6,21,57,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
}
.trust-pill-val {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--vivid-blue);
}
.trust-pill-sep {
  width: 1px; height: 14px;
  background: rgba(6,21,57,0.12);
}
.trust-pill-txt { font-size: 0.72rem; color: var(--text-2); white-space: nowrap; }

/* RIGHT COLUMN — hero product card visual
   To change the hero product image: update src="..." in the .hero-card-image img
   To resize: change height in .hero-card-image img */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-card {
  width: 100%;
  max-width: 440px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 24px 64px rgba(6,21,57,0.12),
    0 4px 16px rgba(6,21,57,0.06),
    0 0 0 1px rgba(8,57,211,0.04);
  position: relative;
}
/* Holographic shimmer overlay on the card */
.hero-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(8,57,211,0.03) 0%,
    rgba(120,180,255,0.02) 50%,
    rgba(8,57,211,0.03) 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.hero-card-image {
  /* Light grey background — blends with product photo background */
  background: #f0f3f8;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-card-image img {
  max-height: 88%;   /* ← RESIZE: increase/decrease this to scale the hero vial */
  max-width: 72%;
  object-fit: contain;
  transition: transform 0.5s var(--ease);
}
.hero-card:hover .hero-card-image img { transform: scale(1.04); }

.hero-card-footer {
  padding: 20px 24px;
  position: relative;
  z-index: 2;
}
.hero-card-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; color: var(--dark-blue); }
.hero-card-sub  { font-size: 0.78rem; color: var(--text-2); margin-bottom: 12px; }
.hero-card-badges { display: flex; gap: 8px; flex-wrap: wrap; }

/* Small badge pills */
.badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  border-radius: 99px;
  padding: 4px 10px;
}
.badge-blue  { background: var(--accent-soft); color: var(--vivid-blue); border: 1px solid var(--accent-mid); }
.badge-green { background: rgba(5,122,85,0.08); color: #057a55; border: 1px solid rgba(5,122,85,0.2); }
.badge-solid { background: linear-gradient(135deg, var(--vivid-blue), #1a52e8); color: #fff; }


/* ──────────────────────────────────────────────────────────
   10. STATS BAR
   The four numbers below the hero.
   To change numbers: edit <span class="stat-num"> in HTML.
   ────────────────────────────────────────────────────────── */
.stats-bar {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  text-align: center;
  padding: 28px 16px;
  border-right: 1px solid var(--border);
  transition: background 0.2s;
}
.stat:last-child { border-right: none; }
.stat:hover      { background: var(--accent-soft); }
.stat-num {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--vivid-blue);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}


/* ──────────────────────────────────────────────────────────
   11. PRODUCT GRID (homepage product cards)

   HOW TO ADD A NEW PRODUCT
   ─────────────────────────
   1. Add your product image to the /images/ folder
   2. Copy the entire <!-- PRODUCT CARD --> block in index.html
   3. Update: image src, product name, price, and href link
   4. Create a new HTML file for the full product page
      (copy bac-water.html or retatrutide.html as a template)
   ────────────────────────────────────────────────────────── */
.products-section { padding: 64px 0 80px; }

.product-grid {
  display: grid;
  /* AUTO COLUMNS: cards fill the row, min width 260px each.
     Change 260px to make cards narrower or wider.              */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: visible;    /* IMPORTANT: changed from hidden so badges are never clipped */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
  text-decoration: none;
  color: inherit;
  position: relative;  /* badges positioned relative to card */
  cursor: pointer;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(6,21,57,0.1), 0 4px 12px rgba(8,57,211,0.06);
  border-color: rgba(8,57,211,0.18);
}

/* Product image area.
   To change card image height: edit height: 240px below.      */
.card-image {
  background: #f0f3f8;
  height: 240px;         /* ← RESIZE: change this to make card images taller/shorter */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: var(--r-lg) var(--r-lg) 0 0; /* round top corners; card has overflow:visible */
}
.card-image img {
  max-height: 90%;       /* ← RESIZE: change this to scale the vial within the card */
  max-width: 75%;
  object-fit: contain;
  transition: transform 0.4s var(--ease);
}
.card:hover .card-image img { transform: scale(1.06); }

/* CARD BADGES — positioned relative to .card (the outer container).
   Cards use overflow:visible so badges are NEVER clipped on hover.
   z-index: 10 keeps them above the image on all states.         */
.card-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 4px 10px;
  z-index: 10;           /* always on top, never clipped */
  pointer-events: none;
}
.card-badge-blue { background: linear-gradient(135deg, var(--vivid-blue), #1a52e8); color: #fff; }
.card-badge-grey { background: rgba(100,120,150,0.8); color: #fff; }

.card-badge-coa {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--vivid-blue);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(8,57,211,0.2);
  border-radius: 99px;
  padding: 3px 9px;
  z-index: 10;           /* always on top, never clipped */
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* Card text content */
.card-body {
  padding: 16px 18px 12px;
  flex: 1;
  border-top: 1px solid var(--border);
}
.card-cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vivid-blue);
  margin-bottom: 5px;
}
.card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-blue);
  margin-bottom: 3px;
  line-height: 1.3;
}
.card-subtitle { font-size: 0.74rem; color: var(--text-2); margin-bottom: 4px; }
.card-pills    { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.card-price    { font-size: 1.05rem; font-weight: 800; color: var(--dark-blue); }

/* The full-width Add button is .btn-add (defined in section 8) */


/* ──────────────────────────────────────────────────────────
   12. PRODUCT DETAIL PAGE
   Styles for bac-water.html / retatrutide.html
   ────────────────────────────────────────────────────────── */
.pd-page    { background: var(--white); min-height: 100vh; }
.pd-wrap    { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* Breadcrumb — "All Products › Product Name" */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 20px 0 0;
  font-size: 0.78rem;
  color: var(--text-2);
}
.breadcrumb a            { transition: color 0.15s; }
.breadcrumb a:hover      { color: var(--vivid-blue); }
.breadcrumb-sep          { color: var(--text-3); font-size: 0.65rem; }

/* Back / Next product navigation */
.pd-nav {
  display: flex;
  justify-content: space-between;
  padding: 12px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}
.pd-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
  padding: 0;
}
.pd-nav-btn:hover { color: var(--vivid-blue); }
.pd-nav-btn:disabled, .pd-nav-btn.disabled { opacity: 0.3; cursor: default; }

/* Two-column layout: image left, info right */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 64px;
}

/* PRODUCT IMAGE — sticky on scroll
   To resize: change max-height in .pd-image-wrap img   */
.pd-image-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  background: #f0f3f8;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(6,21,57,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 40px;
}
.pd-image-wrap img {
  max-height: 320px;   /* ← RESIZE: change to scale the product image on detail page */
  max-width: 100%;
  object-fit: contain;
}

/* Product info — right column */
.pd-name      { font-size: 1.75rem; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.02em; }
.pd-subtitle  { font-size: 0.88rem; color: var(--text-2); margin-bottom: 4px; }
.pd-cas       { font-family: var(--mono); font-size: 0.73rem; color: var(--text-3); margin-bottom: 16px; }
.pd-badges-row{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.pd-desc      { font-size: 0.88rem; color: var(--text-2); line-height: 1.82; margin-bottom: 24px; }
.pd-price     { font-size: 2.2rem; font-weight: 800; color: var(--vivid-blue); letter-spacing: -0.03em; margin-bottom: 20px; }

/* Multi-buy discount table */
.multibuy           { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.multibuy-head      { background: var(--bg); padding: 10px 16px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.multibuy-row       { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; font-size: 0.82rem; border-bottom: 1px solid var(--border); }
.multibuy-row:last-child { border-bottom: none; }
.mb-qty             { color: var(--text); font-weight: 500; }
.mb-off             { color: #057a55; font-weight: 700; font-size: 0.7rem; background: rgba(5,122,85,0.08); border-radius: 99px; padding: 3px 8px; }
.mb-price           { font-family: var(--mono); font-weight: 700; color: var(--dark-blue); }

/* Info / storage note box */
.storage-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-mid);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 16px;
}

/* Quantity stepper + Add to Cart row */
.qty-add { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.qty-ctrl { display: flex; align-items: center; border: 1.5px solid var(--border-mid); border-radius: var(--r); overflow: hidden; flex-shrink: 0; }
.qty-btn  { width: 40px; height: 48px; background: none; border: none; color: var(--text); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background 0.15s; cursor: pointer; }
.qty-btn:hover { background: var(--bg); }
.qty-val  { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; color: var(--text); border-left: 1px solid var(--border); border-right: 1px solid var(--border); user-select: none; }

/* Research disclaimer pill */
.disclaimer-pill {
  font-size: 0.73rem;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 14px;
  line-height: 1.6;
}

/* Product detail — tabbed section at the bottom */
.pd-tabs-section  { border-top: 1px solid var(--border); background: var(--white); }
.pd-tabs          { display: flex; border-bottom: 1px solid var(--border); max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.pd-tab {
  padding: 16px 24px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  text-decoration: none;
}
.pd-tab:hover      { color: var(--text); }
.pd-tab.active     { color: var(--vivid-blue); border-bottom-color: var(--vivid-blue); font-weight: 600; }
.pd-panel          { padding: 32px 2rem; max-width: 1200px; margin: 0 auto; }
.pd-panel.hidden   { display: none; }
.pd-panel h4       { font-size: 0.95rem; margin-bottom: 12px; }
.pd-panel p        { font-size: 0.84rem; color: var(--text-2); line-height: 1.85; margin-bottom: 12px; }
.pd-panel ul       { padding-left: 1.2rem; margin-bottom: 12px; }
.pd-panel ul li    { font-size: 0.84rem; color: var(--text-2); line-height: 1.85; margin-bottom: 4px; }

/* Specs table */
.spec-table        { width: 100%; border-collapse: collapse; }
.spec-table tr     { border-bottom: 1px solid var(--border); }
.spec-table td     { padding: 10px 0; font-size: 0.82rem; vertical-align: top; }
.spec-table td:first-child { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); width: 40%; font-weight: 600; }
.spec-table td:last-child  { color: var(--dark-blue); font-weight: 600; }

/* Variant select buttons (e.g. Single Vial / Pack of 2) */
.variant-btn {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 8px 20px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}
.variant-btn:hover  { border-color: var(--vivid-blue); color: var(--vivid-blue); }
.variant-btn.active { background: linear-gradient(135deg, var(--vivid-blue), #1a52e8); color: #fff; border-color: transparent; box-shadow: 0 4px 12px var(--accent-glow); }


/* ──────────────────────────────────────────────────────────
   13. HOW IT WORKS
   ────────────────────────────────────────────────────────── */
.how-section { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.how-steps   { display: flex; align-items: flex-start; max-width: 900px; margin: 0 auto 40px; }
.how-step    { flex: 1; text-align: center; padding: 0 20px; }
.how-num {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--vivid-blue);
  background: var(--accent-soft);
  border: 1.5px solid var(--accent-mid);
  border-radius: 99px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.how-step h4 { font-size: 0.92rem; margin-bottom: 8px; }
.how-step p  { font-size: 0.78rem; color: var(--text-2); line-height: 1.7; }
.how-arrow   { flex: 0 0 32px; display: flex; align-items: center; justify-content: center; padding-top: 8px; color: rgba(8,57,211,0.25); font-size: 1.3rem; font-weight: 200; }
.how-cta     { text-align: center; margin-top: 40px; }


/* ──────────────────────────────────────────────────────────
   14. WHY AUSHELIX (feature cards)
   ────────────────────────────────────────────────────────── */
.why-section { border-bottom: 1px solid var(--border); }
.why-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.why-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}
.why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6,21,57,0.07);
  border-color: rgba(8,57,211,0.16);
}
.why-icon { width: 40px; height: 40px; background: var(--accent-soft); border: 1px solid var(--accent-mid); border-radius: var(--r); display: flex; align-items: center; justify-content: center; color: var(--vivid-blue); font-size: 1.1rem; margin-bottom: 16px; }
.why-card h4 { font-size: 0.92rem; margin-bottom: 8px; }
.why-card p  { font-size: 0.8rem; color: var(--text-2); line-height: 1.75; }


/* ──────────────────────────────────────────────────────────
   15. QUALITY SECTION
   ────────────────────────────────────────────────────────── */
.quality-section { background: var(--white); border-bottom: 1px solid var(--border); }
.quality-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.quality-text h2 { font-size: 2rem; font-weight: 800; margin-bottom: 16px; letter-spacing: -0.02em; }
.quality-text p  { font-size: 0.88rem; color: var(--text-2); line-height: 1.85; margin-bottom: 14px; }
.quality-badges  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.quality-badge   { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 14px; font-size: 0.75rem; color: var(--text-2); }
.quality-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vivid-blue); flex-shrink: 0; }
.quality-rows    { display: flex; flex-direction: column; gap: 8px; }
.quality-row     { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 18px; font-size: 0.82rem; transition: background 0.15s; }
.quality-row:hover { background: rgba(8,57,211,0.04); border-color: rgba(8,57,211,0.12); }
.quality-row-val   { font-weight: 700; color: var(--vivid-blue); font-size: 0.82rem; }
.quality-row-val.amber { color: #c05800; }


/* ──────────────────────────────────────────────────────────
   16. SHIPPING STRIP
   Dark band with four shipping highlights.
   To change icons: swap the emoji in the HTML.
   ────────────────────────────────────────────────────────── */
.shipping-strip { background: var(--dark-blue); padding: 28px 0; }
.shipping-items { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.shipping-item  { text-align: center; padding: 8px 16px; border-right: 1px solid rgba(255,255,255,0.08); }
.shipping-item:last-child { border-right: none; }
.shipping-icon  { font-size: 1.3rem; display: block; margin-bottom: 8px; }
.shipping-label { font-size: 0.74rem; font-weight: 700; color: rgba(255,255,255,0.88); margin-bottom: 3px; }
.shipping-sub   { font-size: 0.66rem; color: rgba(255,255,255,0.4); }


/* ──────────────────────────────────────────────────────────
   17. FAQ ACCORDION
   Pure CSS — no JavaScript. Uses the <details> HTML element.
   ────────────────────────────────────────────────────────── */
.faq-section { background: var(--bg); border-bottom: 1px solid var(--border); }
.faq-list    { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

details.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
details.faq-item[open] {
  border-color: rgba(8,57,211,0.2);
  box-shadow: 0 4px 20px rgba(8,57,211,0.06);
}
details.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark-blue);
  cursor: pointer;
  transition: color 0.15s;
  gap: 16px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary:hover { color: var(--vivid-blue); }

/* The +/× icon */
details.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 200;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.25s, color 0.2s;
}
details.faq-item[open] summary::after {
  content: '×';
  color: var(--vivid-blue);
}

.faq-answer { padding: 0 22px 18px; font-size: 0.84rem; color: var(--text-2); line-height: 1.85; }


/* ──────────────────────────────────────────────────────────
   18. CTA SECTION
   ────────────────────────────────────────────────────────── */
.cta-section {
  padding: 96px 0;
  text-align: center;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(8,57,211,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.cta-section h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.03em; position: relative; }
.cta-section p  { font-size: 0.9rem; color: var(--text-2); margin-bottom: 32px; position: relative; }
.cta-actions    { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-note       { margin-top: 16px; font-size: 0.72rem; color: var(--text-3); position: relative; }


/* ──────────────────────────────────────────────────────────
   19. DISCLAIMER
   ────────────────────────────────────────────────────────── */
.disclaimer { padding: 28px 0; background: var(--bg); border-top: 1px solid var(--border); }
.disclaimer h4 { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c05800; margin-bottom: 8px; font-weight: 700; }
.disclaimer p  { font-size: 0.77rem; color: var(--text-3); line-height: 1.85; max-width: 860px; }


/* ──────────────────────────────────────────────────────────
   20. FOOTER
   ────────────────────────────────────────────────────────── */
.footer { background: var(--dark-blue); }
.footer-inner  { max-width: 1200px; margin: 0 auto; padding: 56px 2rem 40px; display: flex; gap: 64px; flex-wrap: wrap; }

/* Footer logo — screen blend works because footer is dark */
.footer-logo-chip {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.footer-logo-chip img {
  height: 28px;   /* ← RESIZE: change to scale footer logo */
  mix-blend-mode: screen;  /* makes black bg transparent on dark footer */
}

.footer-brand p { font-size: 0.78rem; color: rgba(255,255,255,0.38); line-height: 1.7; }
.footer-col     { display: flex; flex-direction: column; gap: 10px; }
.footer-heading { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.22); margin-bottom: 4px; font-weight: 700; }
.footer-col a   { font-size: 0.8rem; color: rgba(255,255,255,0.44); transition: color 0.15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom  { border-top: 1px solid rgba(255,255,255,0.07); padding: 20px 2rem; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-copy    { font-size: 0.74rem; color: rgba(255,255,255,0.28); }
.footer-legal   { font-size: 0.67rem; color: rgba(255,255,255,0.2); max-width: 500px; line-height: 1.65; }


/* ──────────────────────────────────────────────────────────
   21. RESPONSIVE
   Breakpoints for tablet and mobile.
   ────────────────────────────────────────────────────────── */

/* Large tablet */
@media (max-width: 1024px) {
  .hero-inner    { gap: 40px; padding: 64px 2rem 72px; }
  .quality-grid  { gap: 48px; }
}

/* Tablet / iPad */
@media (max-width: 900px) {
  /* Hero is already single-column and centred — nothing to change here */

  .quality-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Product detail: stack image above info */
  .pd-layout    { grid-template-columns: 1fr; }
  .pd-image-wrap{ position: static; }
}

/* Small tablet */
@media (max-width: 768px) {
  .stats-inner  { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(3) { border-top: 1px solid var(--border); }
  .stat:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }

  .shipping-items { grid-template-columns: repeat(2,1fr); }
  .shipping-item:nth-child(2) { border-right: none; }
  .shipping-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.08); }

  .how-steps  { flex-direction: column; align-items: center; gap: 20px; }
  .how-arrow  { transform: rotate(90deg); }
  .how-step   { padding: 0; max-width: 280px; }

  .why-grid   { grid-template-columns: 1fr; }
  .section    { padding: 56px 0; }
  .cta-section h2 { font-size: 1.8rem; }
  .footer-inner   { gap: 32px; }
}

/* Phone */
@media (max-width: 480px) {
  .wrap           { padding: 0 1.25rem; }
  .nav-inner      { padding: 0 1.25rem; }
  .nav-links      { display: none; }        /* links hidden — use scroll */
  .hero-inner     { padding: 48px 1.25rem 56px; }
  .hero-title     { font-size: 2.4rem; }
  .product-grid   { grid-template-columns: 1fr; }
  .qty-add        { flex-direction: column; }
  .add-cart-btn   { width: 100%; }
  .pd-tabs        { overflow-x: auto; }
  .cta-actions    { flex-direction: column; align-items: center; }
  .shipping-items { grid-template-columns: 1fr; }
  .shipping-item  { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
}


/* ══════════════════════════════════════════════════════════
   22. STOCK STATUS — card badges + detail page indicators
   ══════════════════════════════════════════════════════════ */

/* Low-stock badge: orange */
.card-badge-orange {
  background: linear-gradient(135deg, #c05800, #d97706);
  color: #fff;
}
/* Out-of-stock card — greyed out */
.card.card-oos {
  opacity: 0.62;
  cursor: default !important;
  filter: grayscale(0.3);
}
.card.card-oos .card-image img { filter: grayscale(0.35); }
/* Disabled add button */
.btn-add-oos,
.btn-add.btn-add-oos {
  background: rgba(100,116,139,0.55) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/* Detail page stock pill */
.pd-stock         { margin-bottom: 16px; }
.stock-ok         { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:700; color:#057a55; background:rgba(5,122,85,0.08); border:1px solid rgba(5,122,85,0.22); border-radius:99px; padding:6px 14px; }
.stock-low        { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:700; color:#c05800; background:rgba(192,88,0,0.08); border:1px solid rgba(192,88,0,0.22); border-radius:99px; padding:6px 14px; }
.stock-oos        { display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:700; color:#64748b; background:rgba(100,116,139,0.08); border:1px solid rgba(100,116,139,0.22); border-radius:99px; padding:6px 14px; }


/* ══════════════════════════════════════════════════════════
   23. FLOATING CART BUTTON
   ══════════════════════════════════════════════════════════ */
#ah-cart-float {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 200;
}
#ah-cart-float > button, #ah-cart-float > .ah-cart-float-link {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vivid-blue), #1a52e8);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(8,57,211,0.42), 0 2px 8px rgba(8,57,211,0.28);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
#ah-cart-float > button:hover, #ah-cart-float > .ah-cart-float-link:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(8,57,211,0.54); }
#ah-cart-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px; height: 22px;
  background: #ef4444;
  color: #fff;
  border-radius: 99px;
  font-size: 0.7rem; font-weight: 800;
  border: 2.5px solid #fff;
  align-items: center; justify-content: center;
  padding: 0 4px;
}

/* ══════════════════════════════════════════════════════════
   24. CART OVERLAY + DRAWER
   ══════════════════════════════════════════════════════════ */
#ah-cart-overlay {
  position: fixed; inset: 0;
  background: rgba(6,21,57,0.52);
  backdrop-filter: blur(4px);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s;
}
#ah-cart-overlay.open { opacity: 1; pointer-events: all; }

#ah-cart-drawer {
  position: fixed;
  top: 0; right: -480px;
  width: 100%; max-width: 460px;
  height: 100vh;
  background: var(--white);
  z-index: 400;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 48px rgba(6,21,57,0.18);
  transition: right 0.35s cubic-bezier(0.32,0,0.67,0);
}
#ah-cart-drawer.open {
  right: 0;
  transition: right 0.3s cubic-bezier(0.33,1,0.68,1);
}
/* Header */
.ah-cart-hd {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-shrink: 0;
  background: var(--white);
}
.ah-cart-hd h3     { font-size: 1.05rem; font-weight: 800; color: var(--dark-blue); margin-bottom: 2px; }
.ah-cart-hd-sub    { font-size: 0.7rem; color: var(--text-3); line-height: 1.5; max-width: 280px; }
.ah-close-x {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-2); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; margin-left: 10px;
  transition: background 0.15s;
}
.ah-close-x:hover { background: var(--surface-2); }
/* Body */
.ah-cart-body { flex: 1; overflow-y: auto; padding: 4px 0; }
/* Empty */
.ah-empty-cart { text-align: center; padding: 48px 24px; color: var(--text-3); }
.ah-empty-cart span { font-size: 2.2rem; display: block; margin-bottom: 12px; }
.ah-empty-cart p    { font-size: 0.88rem; margin-bottom: 10px; }
.ah-empty-cart a    { color: var(--vivid-blue); font-size: 0.84rem; font-weight: 600; }
/* Cart item */
.ah-ci {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.ah-ci:last-child { border-bottom: none; }
.ah-ci-info   { flex: 1; min-width: 0; }
.ah-ci-name   { font-size: 0.86rem; font-weight: 700; color: var(--dark-blue); margin-bottom: 3px; word-break: break-word; }
.ah-ci-up     { font-size: 0.72rem; color: var(--text-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ah-disc-tag  { background: rgba(5,122,85,0.1); color: #057a55; font-weight: 700; font-size: 0.67rem; border-radius: 4px; padding: 1px 6px; }
.ah-ci-right  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ah-ci-tot    { font-size: 0.9rem; font-weight: 800; color: var(--dark-blue); min-width: 54px; text-align: right; }
/* Qty control inside cart */
.ah-qc { display: flex; align-items: center; border: 1.5px solid var(--border-mid); border-radius: 8px; overflow: hidden; }
.ah-qc button { width: 28px; height: 30px; background: none; border: none; font-size: 1rem; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.ah-qc button:hover { background: var(--bg); }
.ah-qc span   { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; border-left: 1px solid var(--border); border-right: 1px solid var(--border); user-select: none; }
.ah-rm { width: 24px; height: 24px; border-radius: 50%; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; font-size: 0.72rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; }
.ah-rm:hover { background: rgba(239,68,68,0.18); }
/* Footer */
.ah-cart-ft { border-top: 1px solid var(--border); padding: 18px 20px 20px; background: var(--white); flex-shrink: 0; }
/* Totals */
.ah-tr       { display: flex; justify-content: space-between; align-items: center; font-size: 0.83rem; padding: 4px 0; color: var(--text-2); }
.ah-tr-grand { font-size: 1rem; font-weight: 800; color: var(--dark-blue); border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
/* CTA buttons */
.ah-cart-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ah-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px; background: #25D366; color: #fff; border: none;
  border-radius: var(--r); font-family: var(--font); font-size: 0.9rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 16px rgba(37,211,102,0.32); transition: all 0.2s;
}
.ah-wa-btn:hover { background: #1fba5a; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(37,211,102,0.42); }
.ah-em-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; background: var(--bg); color: var(--text-2);
  border: 1.5px solid var(--border-mid); border-radius: var(--r);
  font-family: var(--font); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.ah-em-btn:hover { border-color: var(--vivid-blue); color: var(--vivid-blue); }
.ah-cl-btn { background: none; border: none; color: var(--text-3); font-family: var(--font); font-size: 0.74rem; cursor: pointer; padding: 4px; transition: color 0.15s; width: 100%; text-align: center; }
.ah-cl-btn:hover { color: #ef4444; }

/* ══════════════════════════════════════════════════════════
   25. TOAST
   ══════════════════════════════════════════════════════════ */
#ah-toast {
  position: fixed; bottom: 96px; right: 28px; z-index: 500;
  background: var(--dark-blue); color: rgba(255,255,255,0.92);
  font-size: 0.82rem; font-weight: 600;
  padding: 10px 18px; border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(6,21,57,0.28);
  opacity: 0; transform: translateY(8px);
  transition: all 0.25s; pointer-events: none; max-width: 280px;
}
#ah-toast.ah-toast-show { opacity: 1; transform: translateY(0); }
#ah-toast.ah-toast-warn { background: #c05800; }

@media (max-width: 480px) {
  #ah-cart-drawer { max-width: 100%; right: -100%; }
  #ah-cart-float  { bottom: 16px; right: 16px; }
  #ah-toast       { right: 12px; bottom: 86px; }
}