/* ============================================================
   PADDLE PUP — Main Stylesheet
   Config variables are in script.js CONFIG block.
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --navy:        #0B3D63;
  --ocean:       #1B82C4;
  --sky:         #E8F2F9;
  --base:        #FCFCFA;
  --sand:        #F4A259;
  --sand-dark:   #D98A3A;
  --text:        #1A2B3C;
  --text-muted:  #5A7A96;
  --border:      #D0E3F0;
  --white:       #FFFFFF;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;

  --shadow-sm:   0 2px 8px rgba(11,61,99,0.08);
  --shadow-md:   0 4px 20px rgba(11,61,99,0.12);
  --shadow-lg:   0 8px 40px rgba(11,61,99,0.16);

  --font-head:   'Poppins', system-ui, sans-serif;
  --font-body:   'Inter', system-ui, sans-serif;

  --transition:  0.2s ease;
  --bar-height:  40px;
  --nav-height:  68px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
ul { list-style: none; }

/* ── Utility ── */
.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 20px;
}
.section-pad { padding-block: 72px; }
.section-pad-sm { padding-block: 48px; }
.bg-sky    { background: var(--sky); }
.bg-navy   { background: var(--navy); }
.bg-white  { background: var(--white); }
.text-center { text-align: center; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tag--save { background: #FFEDD5; color: #C05621; }
.tag--free { background: #D1FAE5; color: #065F46; }

/* ── Wave divider ── */
.wave-divider { line-height: 0; overflow: hidden; }
.wave-divider svg { display: block; width: 100%; }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
#announcement-bar {
  background: var(--navy);
  color: var(--white);
  height: var(--bar-height);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 200;
}
.marquee-track {
  display: flex;
  height: 100%;
  align-items: center;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding-inline: 48px;
}
.marquee-item::before {
  content: '·';
  margin-right: 48px;
  opacity: 0.5;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
#main-header {
  position: sticky;
  top: var(--bar-height);
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}
.nav-logo {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.nav-logo span { color: var(--ocean); }

/* ── LOGO SWAP: Replace the text logo below with an <img> tag once you have a real logo file ── */

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--navy); }

.nav-cart {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  transition: border-color var(--transition), color var(--transition);
}
.nav-cart:hover { border-color: var(--ocean); color: var(--ocean); }
.cart-count {
  background: var(--sand);
  color: var(--white);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 680px) {
  .nav-links-wrap { display: none; }
  .nav-links-wrap.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(var(--bar-height) + var(--nav-height));
    left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 20px;
    gap: 16px;
    box-shadow: var(--shadow-md);
  }
  .nav-hamburger { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
#hero {
  background: var(--sky);
  padding-block: 56px 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Image side */
.hero-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--border);
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 32px;
}
.hero-img-placeholder svg { opacity: 0.35; }
.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product details side */
.hero-details { padding-top: 8px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ocean);
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 10px;
}
.hero-hook {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  font-style: italic;
}

/* Stars */
.stars-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
/* IMPORTANT: Only display the star rating once you have real verified reviews.
   Remove the comment wrapper below when ready. */
.stars-placeholder {
  display: flex;
  gap: 3px;
  color: #FBBF24;
  font-size: 1.1rem;
}
.stars-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Price */
.price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.price-current {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
}
.price-was {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: line-through;
}
/* ACCC NOTE: The "was" price ($149.00) must reflect a genuine former selling price
   or the manufacturer's recommended retail price. Do not use an invented "was" price.
   Australian Consumer Law (ACL) prohibits misleading price comparisons.
   If you are launching at $74 for the first time, remove the strikethrough price
   until you have a legitimate comparison price to reference. */

/* Swatches */
.selector-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.colour-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
  position: relative;
}
.swatch:hover  { transform: scale(1.12); }
.swatch.active { border-color: var(--navy); box-shadow: 0 0 0 2px var(--white) inset; }
.swatch[data-colour="Blue Camo"]          { background: #4A7FA8; }
.swatch[data-colour="Floral"]             { background: linear-gradient(135deg,#F9A8D4,#FDE68A); }
.swatch[data-colour="Fluorescent Green"]  { background: #8DFF4F; border-color: #ccc; }
.swatch[data-colour="Orange"]             { background: #F97316; }
.swatch[data-colour="Pink"]               { background: #F472B6; }
.swatch[data-colour="Purple"]             { background: #A855F7; }

.colour-name-display {
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 20px;
}

/* Sizes */
.size-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.size-btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--white);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.size-btn:hover   { border-color: var(--ocean); color: var(--ocean); }
.size-btn.active  { border-color: var(--navy); color: var(--navy); background: var(--sky); }

.size-guide-link {
  font-size: 0.82rem;
  color: var(--ocean);
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 24px;
  display: inline-block;
}

/* Add to cart */
.cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.qty-selector {
  display: flex;
  align-items: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-btn {
  width: 38px;
  height: 48px;
  font-size: 1.2rem;
  color: var(--navy);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.qty-btn:hover { background: var(--sky); }
.qty-display {
  width: 42px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--navy);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}

.btn-primary {
  flex: 1;
  min-width: 200px;
  padding: 14px 28px;
  background: var(--sand);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  letter-spacing: 0.02em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(244,162,89,0.35);
  /* CHECKOUT: Wire this button to your chosen checkout (Shopify Buy Button, Snipcart, etc.)
     Replace the onclick in script.js with the provider's cart add function. */
}
.btn-primary:hover {
  background: var(--sand-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(244,162,89,0.45);
}
.btn-primary:active { transform: translateY(0); }

.hero-trust-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.trust-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.trust-pill svg { color: var(--ocean); flex-shrink: 0; }

/* ============================================================
   BUNDLE & SAVE
   ============================================================ */
#bundle {
  background: var(--white);
  padding-block: 48px;
}
.bundle-header {
  text-align: center;
  margin-bottom: 28px;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}
.section-sub {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--text-muted);
}

.bundle-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 680px) {
  .bundle-cards { grid-template-columns: 1fr; }
}

.bundle-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
  background: var(--white);
}
.bundle-card:hover { border-color: var(--ocean); }
.bundle-card.selected {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11,61,99,0.1);
}
.bundle-card.popular .bundle-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sand);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 100px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bundle-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.bundle-radio input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--navy);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.bundle-label { display: block; cursor: pointer; width: 100%; }
.bundle-qty   { font-weight: 700; color: var(--navy); font-size: 1rem; margin-bottom: 2px; }
.bundle-price {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
}
.bundle-per   { font-size: 0.8rem; color: var(--text-muted); }
.bundle-save  { margin-top: 6px; }

/* Optional add-ons:
   If you add any optional extras here, they MUST default to unchecked (off).
   Pre-ticked paid add-ons are a dark pattern and an ACCC target. */

/* ============================================================
   EMOTIONAL VALUE SECTION
   ============================================================ */
#value-section {
  background: var(--sky);
  padding-block: 72px;
}
.value-inner {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}
.value-inner .section-title { margin-bottom: 20px; }
.value-inner p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 14px;
}
.value-inner p:last-child { margin-bottom: 0; }

/* ============================================================
   BENEFIT CARDS
   ============================================================ */
#benefits {
  background: var(--white);
  padding-block: 72px;
}
.benefit-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
@media (max-width: 760px) {
  .benefit-cards { grid-template-columns: 1fr; gap: 20px; }
}
.benefit-card {
  background: var(--sky);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
}
.benefit-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--ocean);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.benefit-card h3 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.benefit-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
#how-it-works {
  background: var(--sky);
  padding-block: 72px;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 40px;
  left: calc(16.67% + 24px);
  right: calc(16.67% + 24px);
  height: 2px;
  background: var(--border);
}
@media (max-width: 680px) {
  .steps-grid { grid-template-columns: 1fr; gap: 24px; }
  .steps-grid::before { display: none; }
}
.step {
  text-align: center;
  position: relative;
}
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}
.step h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.step p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   SIZE CHART
   ============================================================ */
#size-chart {
  background: var(--white);
  padding-block: 72px;
}
.size-tip {
  background: var(--sky);
  border-left: 4px solid var(--ocean);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 32px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.size-tip svg { flex-shrink: 0; margin-top: 2px; }

.measure-guide {
  margin-bottom: 28px;
  padding: 18px 20px;
  background: var(--sky);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.measure-guide strong { color: var(--navy); }

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: var(--white);
}
thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--sky); }
tbody td {
  padding: 16px;
  font-size: 0.9rem;
  color: var(--text);
  vertical-align: middle;
}
.size-label {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}
.breed-photo-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
/* breed photo for XS   — replace emoji with <img> once you have the photo */
/* breed photo for S    — replace emoji with <img> once you have the photo */
/* breed photo for M    — replace emoji with <img> once you have the photo */
/* breed photo for L    — replace emoji with <img> once you have the photo */
/* breed photo for XL   — replace emoji with <img> once you have the photo */

.breed-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   REVIEWS
   ============================================================ */
/* PLACEHOLDER REVIEWS — Replace with REAL customer reviews before launch.
   Publishing fabricated testimonials breaches Australian Consumer Law (ACCC)
   and Meta/TikTok ad policy. Do not invent names, locations, or stories.
   Only add a review card when you have a genuine verified customer quote. */
#reviews {
  background: var(--sky);
  padding-block: 72px;
}
.review-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 760px) {
  .review-cards { grid-template-columns: 1fr; }
}
.review-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-stars { color: #FBBF24; font-size: 1rem; letter-spacing: 2px; }
.review-quote {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
  flex: 1;
}
.review-author { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

.review-collect {
  margin-top: 48px;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  max-width: 560px;
  margin-inline: auto;
  margin-top: 48px;
  box-shadow: var(--shadow-sm);
}
.review-collect h3 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.review-collect p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   FOUNDER / BRAND STORY
   ============================================================ */
/* Fill with a TRUE founder story. A real detail converts better and
   protects the brand. Do not publish an invented personal history. */
#founder {
  background: var(--white);
  padding-block: 72px;
}
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 760px) {
  .founder-grid { grid-template-columns: 1fr; gap: 32px; }
}
.founder-img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--border);
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
  padding: 24px;
}
/* FOUNDER IMAGE: Replace placeholder with a real photo — a genuine personal
   image builds far more trust than stock photography. */
.founder-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ocean);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.founder-text h2 {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 20px;
}
.founder-text p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 14px;
}
.founder-text p:last-of-type { margin-bottom: 0; }
.founder-sig {
  margin-top: 24px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
}

/* ============================================================
   GUARANTEE
   ============================================================ */
/* The guarantee stated here must be genuinely honoured.
   Review terms before launch and ensure your returns process can fulfil them.
   Under ACL, you must not make false or misleading representations
   about your refund and return policies. */
#guarantee {
  background: var(--navy);
  padding-block: 64px;
}
.guarantee-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.guarantee-badge {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 3px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
}
.guarantee-text { flex: 1; min-width: 240px; }
.guarantee-text h2 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.guarantee-text p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
}

/* ============================================================
   SHIPPING
   ============================================================ */
/* IMPORTANT: Only state delivery windows you can genuinely meet.
   If the product is drop-shipped, transit times may be longer than
   standard domestic delivery. Overstating delivery speed is a common
   cause of chargebacks and ACCC complaints.
   Edit the timeframes below to match your actual fulfilment process. */
#shipping {
  background: var(--sky);
  padding-block: 64px;
}
.shipping-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 680px) {
  .shipping-cards { grid-template-columns: 1fr; }
}
.shipping-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}
.shipping-icon {
  width: 44px;
  height: 44px;
  background: var(--sky);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ocean);
}
.shipping-card h3 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.shipping-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ============================================================
   FAQ
   ============================================================ */
#faq {
  background: var(--white);
  padding-block: 72px;
}
.faq-list {
  max-width: 760px;
  margin: 48px auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-head);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--navy);
  transition: color var(--transition);
}
.faq-question:hover { color: var(--ocean); }
.faq-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sky);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
  color: var(--ocean);
}
.faq-item.open .faq-icon {
  background: var(--ocean);
  color: var(--white);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-answer-inner {
  padding-bottom: 20px;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.75;
}
.faq-answer-inner a { color: var(--ocean); text-decoration: underline; }

/* ============================================================
   FINAL CTA BAND
   ============================================================ */
#final-cta {
  background: var(--sky);
  padding-block: 72px;
}
.final-cta-inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.final-cta-inner .section-title { margin-bottom: 12px; }
.final-cta-inner .section-sub   { margin-bottom: 32px; }
.final-cta-selectors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}
.final-cta-selectors select {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A7A96' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}
.final-cta-inner .btn-primary {
  width: 100%;
  max-width: 360px;
  flex: none;
  margin-inline: auto;
  display: block;
  margin-bottom: 24px;
}
.payment-icons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0.6;
}
.payment-icon {
  background: var(--navy);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  letter-spacing: 0.04em;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding-block: 48px 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand-name {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.footer-tagline {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 16px;
}
.footer-socials {
  display: flex;
  gap: 10px;
}
.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  transition: background var(--transition);
}
.social-btn:hover { background: rgba(255,255,255,0.2); }

.footer-col-title {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links a {
  font-size: 0.85rem;
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
}
.footer-bottom a { transition: color var(--transition); }
.footer-bottom a:hover { color: var(--white); }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
#sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  box-shadow: 0 -4px 20px rgba(11,61,99,0.12);
  gap: 12px;
  align-items: center;
}
#sticky-cta .btn-primary { flex: 1; padding: 13px 20px; font-size: 0.95rem; }
.sticky-price {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
@media (max-width: 680px) {
  #sticky-cta { display: flex; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero {
  background: var(--sky);
  padding-block: 64px 48px;
  text-align: center;
}
.contact-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.contact-hero p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 500px;
  margin-inline: auto;
  line-height: 1.65;
}
.contact-body {
  padding-block: 56px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Form */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.form-group input,
.form-group textarea,
.form-group select {
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(27,130,196,0.12);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.optional-label { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; }

.form-submit .btn-primary {
  width: 100%;
  padding: 14px;
}

.form-note {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.contact-info h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.contact-info-block {
  background: var(--sky);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
}
.contact-info-block p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.contact-info-block a { color: var(--ocean); }
.contact-info-block strong { color: var(--navy); }

/* Thank-you page */
.thankyou-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}
.thankyou-inner h1 {
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--navy);
  margin-bottom: 12px;
}
.thankyou-inner p { color: var(--text-muted); max-width: 460px; margin-inline: auto; line-height: 1.65; }
.thankyou-icon {
  width: 72px;
  height: 72px;
  background: var(--sky);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--ocean);
}

/* ============================================================
   ACCESSIBILITY / FOCUS
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--ocean);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   PRINT / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  * { transition-duration: 0.01ms !important; }
}