/* ═══ AutoGlow premium chrome — shared across all pages (matches homepage redesign) ═══ */
:root { --agx-black:#0a0a0a; --agx-gold:#1d1d1f; --agx-gold-light:#333333; }

/* Announcement bar */
.announce { background:#0a0a0a !important; }
.announce-track span { color:#e6e6e8 !important; font-family:'DM Sans',sans-serif; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; opacity:1 !important; font-weight:500; }
.announce-track span b, .announce-track span strong { color:#ffffff !important; }

/* Navigation */
.topbar { background:rgba(10,10,10,0.96) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(29,29,31,0.20) !important; box-shadow:none !important; }
.agx-logo { display:flex; flex-direction:column; line-height:1.1; text-decoration:none; }
.agx-logo-word { font-family:'Outfit',sans-serif; font-weight:800; font-size:1.35rem; color:#ffffff; letter-spacing:0.04em; }
.agx-logo-sub { font-family:'DM Sans',sans-serif; font-size:0.6rem; color:rgba(255,255,255,0.5); letter-spacing:0.3em; text-transform:uppercase; }
.topbar .nav-links a { color:#fff !important; background:none !important; position:relative; }
.topbar .nav-links a:hover { color:#ffffff !important; background:none !important; }
.topbar .nav-links a::after { content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:#1d1d1f; transition:right 0.25s ease; }
.topbar .nav-links a:hover::after { right:0; }
.topbar .nav-actions .btn-outline { border:1px solid rgba(255,255,255,.45) !important; color:#fff !important; background:transparent !important; border-radius:4px !important; }
.topbar .nav-actions .btn-outline:hover { background:rgba(255,255,255,.14) !important; }
.topbar .btn-dark { background:#1d1d1f !important; color:#ffffff !important; border-radius:4px !important; border:none !important; }
.topbar .btn-dark:hover { background:#333333 !important; }
.hamburger span { background:#fff !important; }

/* Mobile menu */
.mobile-menu { background:rgba(10,10,10,0.98) !important; }
.mobile-menu a { color:#fff !important; }
.mobile-menu a:hover { color:#ffffff !important; }
.mobile-close { color:#fff !important; }

/* Section labels — gold accent */
.section-label { color:#1d1d1f !important; letter-spacing:0.12em !important; text-transform:uppercase !important; }
.section-label::before, .section-label span { background:#1d1d1f !important; }

/* Footer */
.footer { background:#0a0a0a !important; border-top:1px solid rgba(29,29,31,0.20) !important; }
.footer-brand-name { color:#ffffff !important; font-family:'Outfit',sans-serif; letter-spacing:0.04em; }
.footer-desc, .footer-col ul li a, .footer-col ul li span { color:rgba(255,255,255,0.60) !important; }
.footer-col h4 { color:#fff !important; letter-spacing:0.1em; text-transform:uppercase; font-size:0.78rem !important; }
.footer-col ul li a:hover { color:#ffffff !important; }
.footer .social-btn { background:#1a1a1a !important; border:1px solid rgba(29,29,31,0.25) !important; }
.footer .social-btn:hover { border-color:#1d1d1f !important; transform:translateY(-2px); }
.footer-bottom { border-top:1px solid rgba(29,29,31,0.20) !important; }
.footer-bottom span { color:rgba(255,255,255,0.35) !important; }
.footer-bottom-links a { color:rgba(255,255,255,0.60) !important; }
.footer-bottom-links a:hover { color:#ffffff !important; }

/* Mobile bottom CTA bar — dark chrome, WhatsApp button stays green */
.mobile-cta-bar { background:#0a0a0a !important; border-top:1px solid rgba(29,29,31,0.30) !important; box-shadow:0 -4px 20px rgba(0,0,0,0.35) !important; }
.mobile-cta-bar .mcta-call { background:#1a1a1a !important; border:1px solid rgba(29,29,31,0.4) !important; color:#ffffff !important; }

/* FIX: cat-card images had no positioning rule — img filled the card in normal
   flow and pushed .cat-card-body below the overflow:hidden clip, so category
   titles never rendered. Make the img a background layer like brand-tile does. */
.cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

/* Restraint pass: quieter card borders on shop grid */
.pcard { border:1px solid rgba(29,29,31,0.15) !important; }
.pcard:hover { border:1px solid #1d1d1f !important; }

/* Mobile polish 2026-07-05 */
.price-now, .price-was { white-space:nowrap; }
.pcard-body::after, .related-body::after { content:none !important; display:none !important; }

/* Checkout-first: Add to Cart is the primary buy button; WhatsApp is a quiet support link */
.pdp-add, #pdpAddCart { background:#1d1d1f !important; color:#ffffff !important; border:none !important; font-weight:700 !important; }
.pdp-add:hover, #pdpAddCart:hover { background:#333333 !important; }
.pdp-wa, .btn-green.pdp-wa { background:transparent !important; border:1.5px solid rgba(37,211,102,0.55) !important; color:#157f3d !important; font-size:0.88rem !important; padding:11px 16px !important; font-weight:600 !important; }
.pdp-wa:hover { background:rgba(37,211,102,0.08) !important; }

/* Mobile pdp: get Add to Cart on screen sooner */
@media (max-width:768px) {
  .warranty-row { display:none !important; }   /* duplicate of the 1Y badge next to price */
  .pdp-free { display:none !important; }       /* duplicate of the Free-delivery chip */
  .pdp-info { gap:10px !important; }
  .pdp-thumbs { margin-top:6px !important; }
}
.mcta-add, .mobile-cta-bar .mcta-add { background:#1d1d1f !important; color:#ffffff !important; font-weight:700; }

/* Mobile pdp reorder: title -> rating -> pack -> qty -> Add to Cart -> everything else */
@media (max-width:768px) {
  .pdp-info > * { order:20; }
  .pdp-info > .pdp-brand { order:1; }
  .pdp-info > .pdp-title { order:2; }
  .pdp-info > .pdp-rating { order:3; }
  .pdp-info > .pdp-variant-label { order:4; }
  .pdp-info > .pdp-variants { order:5; }
  .pdp-info > .pdp-qty-row { order:6; }
  .pdp-info > #pdpAddCart { order:7; }
  .pdp-info > .pdp-wa { order:8; }
}

/* Emoji purge: hide icon holders that are now empty */
.feat-icon:empty, .trust-icon:empty, .why-icon:empty, .brand-art-icon:empty, .step-num:empty { display:none !important; }

.pdp-trust .trust-icon { display:none !important; }  /* text-only trust tiles after emoji purge */

/* 2026-07-07: WhatsApp float shows on ALL pages incl. those with the bottom bar
   (site.css hides it via .has-mobile-cta — overridden here; raised positions already exist) */
@media (max-width: 768px) {
  .has-mobile-cta .wa-float { display: grid !important; }
}

/* ============================================================
   2026-07-17 — Premium motion pass
   Scroll-reveal (JS adds .reveal + .is-revealed) + homepage hero
   entrance stagger. Both fully disabled under reduced-motion.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* Homepage hero — staggered fade + rise on load */
@keyframes agxHeroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.agx2-label, .agx2-title, .agx2-sub, .agx2-ctas, .agx2-feats {
  opacity: 0;
  animation: agxHeroRise .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.agx2-label { animation-delay: .05s; }
.agx2-title { animation-delay: .18s; }
.agx2-sub   { animation-delay: .34s; }
.agx2-ctas  { animation-delay: .50s; }
.agx2-feats { animation-delay: .64s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
  .agx2-label, .agx2-title, .agx2-sub, .agx2-ctas, .agx2-feats { opacity: 1 !important; animation: none !important; }
}

/* ============================================================
   2026-07-17 — Homepage reviews: continuous auto-scroll marquee
   JS wraps .review-grid in .review-marquee, adds .review-track,
   and clones the cards once for a seamless loop. Pauses on hover.
   ============================================================ */
.review-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.agx-reviews .review-grid.review-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 0;
  grid-template-columns: none;
  animation: reviewMarquee var(--rmq-duration, 30s) linear infinite;
}
.agx-reviews .review-grid.review-track .review-card {
  flex: 0 0 auto;
  width: min(360px, 82vw);
  margin-right: 20px;
}
.review-marquee:hover .review-grid.review-track { animation-play-state: paused; }

/* left → right drift (two identical halves → -50% loops seamlessly) */
@keyframes reviewMarquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .agx-reviews .review-grid.review-track { animation: none; }
}

/* ============================================================
   2026-07-17 — Green reserved for WhatsApp only. Buttons/accents
   now flip to champagne gold (--green token). Gold bg is light, so
   these need dark ink for contrast + a premium black→gold hover.
   ============================================================ */
.all-product-card:hover .c-btn,
.pcard:hover .order-btn,
.product-card:hover .btn-order,
.rv-add:hover,
.fbt-add:hover,
.pdp-add.is-added,
.fbt-add.is-added,
.add-to-cart-btn.is-added,
.cart-badge { color: #ffffff !important; }

/* ============================================================
   2026-07-23 — Discount badges, category cards, photo reviews, hero seal
   ============================================================ */
/* sale % badge + strikethrough */
.sale-pct{position:absolute;top:10px;left:10px;background:#1d1d1f;color:#ffffff;font-weight:800;font-size:.72rem;padding:3px 9px;border-radius:6px;letter-spacing:.02em;z-index:2}
.badge.badge-sale{background:#1d1d1f !important;color:#ffffff !important}
.c-old,.price-old{text-decoration:line-through;color:#9a9a9a;font-weight:600;font-size:.82em;margin-left:5px}

/* Shop by Category tiles */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.cat-tile{display:block;border:1.5px solid var(--line,#e8e8ed);border-radius:16px;overflow:hidden;background:#fff;transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.cat-tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.10);border-color:#1d1d1f}
.cat-tile-img{aspect-ratio:4/3;overflow:hidden;background:#f5f5f7}
.cat-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cat-tile:hover .cat-tile-img img{transform:scale(1.06)}
.cat-tile-body{padding:14px 16px}
.cat-tile-body h4{margin:0;font-family:'Outfit',sans-serif;font-weight:800;font-size:1rem;color:#1d1d1f}
.cat-tile-body span{font-size:.82rem;color:#6e6e73;font-weight:600}

/* Customer photo reviews */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.photo-cell{aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.photo-cell img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.photo-cell:hover img{transform:scale(1.05)}

/* Hero trust seal (top-right) */
.agx2-hero{position:relative}
.agx2-badge{position:absolute;top:22px;right:26px;background:rgba(10,10,10,.55);backdrop-filter:blur(6px);border:1.5px solid #1d1d1f;color:#fff;border-radius:12px;padding:10px 16px;font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem;text-align:center;line-height:1.3;z-index:3}
.agx2-badge-stars{display:block;color:#ffffff;font-size:.8rem;letter-spacing:2px;margin-bottom:2px}
@media(max-width:768px){.agx2-badge{display:none}}

/* =========================================================
   2026-07-23 — MONOCHROME (white bg + black accents); white accents
   on the DARK surfaces (hero / nav / announce / dark sections)
   ========================================================= */
.agx2-label{ color:#e8e8e8 !important; }
.agx2-title span{ color:#ffffff !important; }
.agx2-btn-gold{ background:#ffffff !important; color:#0a0a0a !important; }
.agx2-btn-gold:hover{ background:#e6e6e6 !important; }
.agx2-feat svg{ stroke:#e8e8e8 !important; }
.topbar .btn-dark{ background:#ffffff !important; color:#0a0a0a !important; }
.topbar .btn-dark:hover{ background:#e6e6e6 !important; }
.announce-track span b, .announce-track span strong, .announce strong{ color:#ffffff !important; }
.agx2-badge{ border-color:rgba(255,255,255,.55) !important; }
.agx2-badge-stars{ color:#ffffff !important; }
.agx-dark-section .section-label, .agx-reviews .section-label{ color:#e8e8e8 !important; }
/* footer accents (dark footer) → light */
.footer a:hover{ color:#ffffff !important; }

/* =========================================================
   2026-07-23 — GAP FIX: dark content sections → white (theme consistency)
   ========================================================= */
.agx-dark-section, .rv-section{ background:#ffffff !important; }
.agx-dark-section .section-title, .agx-dark-section h2, .agx-dark-section h3, .agx-dark-section h4,
.rv-section .section-title, .rv-section h2, .rv-section h3, .rv-section h4,
.agx-dark-section .section-label, .rv-section .section-label{ color:#1d1d1f !important; }
.agx-dark-section .section-sub, .agx-dark-section p, .rv-section .section-sub,
.agx-reviews .review-card p, .agx-reviews .review-card span{ color:#6e6e73 !important; }
.agx-dark-section .review-card{ background:#fff !important; border:1.5px solid #e8e8ed !important; }
.agx-dark-section .review-card strong{ color:#1d1d1f !important; }
.agx-dark-section .agx-verified{ color:#6e6e73 !important; }
/* remove any dark-section decorative glows/particles on white */
.agx-dark-section::before, .agx-dark-section::after, .agx-latest::before, .agx-reviews::before{ display:none !important; }

/* ═══════════════════════════════════════════════════════════
   2026-07-27 — Mobile optimisation (80% of buyers are on phones)
   ═══════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* PDP: the earlier reorder block pushed the PRICE below the buy button.
     Price + delivery chips must be seen BEFORE the customer is asked to buy. */
  .pdp-info > .pdp-price         { order:4; }
  .pdp-info > .pdp-trust-row     { order:5; }
  .pdp-info > .pdp-variant-label { order:6; }
  .pdp-info > .pdp-variants      { order:7; }
  .pdp-info > .pdp-qty-row       { order:8; }
  .pdp-info > #pdpAddCart        { order:9; }
  .pdp-info > .pdp-wa            { order:10; }

  /* Checkout: the total sat ~400px BELOW the Place Order button.
     Put the summary first so the buyer sees what they are paying. */
  /* Summary is a sticky desktop sidebar; on mobile it must scroll away,
     otherwise it pins to the top and covers the form. */
  .checkout-wrap .order-summary  { order:-1; position:static !important; top:auto !important; }

  /* Tap targets — thumbs need 44px */
  .rv-add, .fbt-add              { min-height:44px !important; }
  .wish-heart                    { width:44px !important; height:44px !important; }
  .footer-col ul li a            { display:inline-block; padding:7px 0; }

  /* The Place Order button is position:sticky and floated bare over the form
     fields. Give it a white halo so it reads as a bar, and let the last field
     scroll clear of it. */
  .checkout-form .place-order-btn { box-shadow:0 0 0 10px #fff, 0 8px 24px rgba(0,0,0,0.22); }
  .checkout-form                  { padding-bottom:84px; }

  /* The floating WhatsApp bubble sat on top of the sticky Buy Now bar and the
     sticky Place Order button. Lift it clear — but ONLY on the pages that have
     one, otherwise it floats over the hero copy. Browsers without :has() keep
     the original position, which is the old behaviour, so nothing breaks. */
  body:has(.mobile-cta-bar) .wa-float,
  body:has(.place-order-btn) .wa-float { bottom:132px !important; }

  /* Homepage hero: the photo is the hook — show it directly under the
     header, then the headline. (It sat below the trust icons before.) */
  .agx2-hero .agx2-mob-banner     { order:-1; }
  /* banner is a <picture>; the real box is the <img> inside it */
  .agx2-mob-banner img            { display:block; width:100%; height:auto; }
  .agx2-inner                     { padding-top:28px !important; }
}