/** Shopify CDN: Minification failed

Line 882:2 Unexpected "{"
Line 882:3 Expected identifier but found "%"
Line 894:4 Unexpected "{"
Line 894:5 Expected identifier but found "%"
Line 895:4 Unexpected "{"
Line 895:5 Expected identifier but found "%"
Line 920:6 Unexpected "{"
Line 920:7 Expected identifier but found "%"

**/

  :root{
    --bg:#F5F1E8;
    --bg-soft:#EDE6D6;
    --bg-deep:#E4DBC6;
    --ink:#2B2014;
    --ink-soft:#4A3B28;
    --ink-mute:#6B5A44;
    --gold:#B8924A;
    --gold-deep:#9A7838;
    --gold-light:#D4B26A;
    --line:#D8CDB5;
    --white:#FBF8F1;
    --danger:#A94A2C;
    --accent-red:#c44545;
    --bg-dark: #1a1a1a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-weight:600;line-height:1.15;letter-spacing:-0.01em}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  .narrow{max-width:880px;margin:0 auto;padding:0 24px}

  /* ── ANNOUNCEMENT BAR ── */
  .topbar{
    background:var(--ink);
    color:var(--bg);
    text-align:center;
    padding:10px 16px;
    font-size:13px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    font-weight:500;
  }
  .topbar strong{color:var(--gold-light)}

  /* ── HEADER ── */
  header.site{
    border-bottom:1px solid var(--line);
    background:var(--bg);
    position:sticky;top:0;z-index:50;
  }
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
  .logo{font-size:24px;font-weight:600;letter-spacing:0.02em;color:var(--ink)}
  .logo span{color:var(--gold)}
  nav.main a{color:var(--ink-soft);text-decoration:none;margin-left:28px;font-size:14px;font-weight:500}
  nav.main a:hover{color:var(--gold)}
  .header-cta{
    background:var(--ink);color:var(--bg);
    padding:10px 20px;border-radius:2px;font-size:13px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
    text-decoration:none;border:none;cursor:pointer;
  }
  .header-cta:hover{background:var(--gold-deep)}

  /* ── HERO ── */
  .hero{padding:80px 0 60px;position:relative;overflow:hidden}
  .hero::before{
    content:"";position:absolute;top:-50%;right:-20%;width:600px;height:600px;
    background:radial-gradient(circle, rgba(184,146,74,0.08) 0%, transparent 70%);
    pointer-events:none;
  }
  .hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;position:relative}
  .eyebrow{
    display:inline-block;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--gold-deep);font-weight:600;margin-bottom:20px;
    border-left:2px solid var(--gold);padding-left:12px;
  }
  .hero h1{
    font-size:clamp(30px,5vw,50px);
    margin-bottom:24px;
    color:var(--ink);
  }
  .hero h1 em{font-style:italic;color:var(--gold-deep);font-weight:500}
  .hero-sub{
    font-size: clamp(15px, 1.1vw , 19px);color:var(--ink-soft);max-width:540px;margin-bottom:10px;line-height:1.6;
  }

  p.hero-sub2 {
    margin-bottom: 36px;
    font-size: clamp(15px, 1.1vw , 19px);color:var(--gold-deep);
}
  .cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
  .btn-primary{
    background: var(--ink);
    color: var(--white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 11px 22px;
    border-radius: 999px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    font-size: 14px;
    padding: 20px 30px;
  }
  .btn-primary svg {
      width: 14px;
      height: 14px;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .btn-primary:hover{background:var(--gold-deep);transform:translateY(-1px);color:#fff;    border-color: var(--ap-gold);}
  .btn-secondary{
    color:var(--ink);text-decoration:underline;text-underline-offset:4px;
    font-size:16px;font-weight:500;
  }
  .trust-line{display:flex;gap:24px;flex-wrap:wrap;color:var(--ink-mute);font-size:16px}
  .trust-line span{display:flex;align-items:center;gap:6px}
  .trust-line svg{width:20px;height:20px;color:var(--gold-deep)}

  /* Trustpilot widget hero */
  .trustpilot-hero{
    margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .tp-stars{display:flex;gap:2px}
  .tp-box{
    width:22px;height:22px;background:#00B67A;
    display:flex;align-items:center;justify-content:center;
  }
  .tp-box svg{width:14px;height:14px}
  .tp-half{position:relative;background:#DCDCE6;overflow:hidden}
  .tp-half::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:50%;background:#00B67A;
  }
  .tp-half svg{position:relative;z-index:2}
  .tp-text{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .tp-text strong{font-weight:700;color:var(--ink);font-size:14px}
  .tp-logo{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink)}

  .hero-visual{
    background:linear-gradient(135deg,var(--bg-deep) 0%,var(--bg-soft) 100%);
    aspect-ratio:4/5;border-radius:4px;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 30px 60px -20px rgba(43,32,20,0.25);
  }
  .hero-visual::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse at center, rgba(212,178,106,0.25) 0%, transparent 60%);
  }
  .hero-visual-label{
    position:absolute;bottom:24px;left:24px;right:24px;
    background:rgba(43,32,20,0.85);color:var(--bg);padding:14px 18px;border-radius:2px;
    font-size:13px;backdrop-filter:blur(8px);z-index:2;
  }
  .hero-visual-label strong{color:var(--gold-light);display:block;margin-bottom:2px;font-size:14px}
  .placeholder-icon{font-size:120px;opacity:0.3;color:var(--ink-soft);position:relative;z-index:1}

  /* ── TRUST BAR ── */
  .trust-bar-holder{
    background:var(--white);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:24px 0;
  }
  @media (max-width: 768px) {
        .trust-item {
            margin-right: 12px;
        }
        .trust-bar-holder .wrap{
          padding: 0;
        }
    }
  .trust-bar-holder .wrap{display:flex;justify-content:space-around;gap:32px;flex-wrap:wrap;align-items:center}
  .trust-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);font-weight:500}
  .trust-item .icon{
    width:32px;height:32px;border-radius:50%;background:var(--bg-deep);
    display:flex;align-items:center;justify-content:center;color:var(--gold-deep);
    font-weight:700;font-size:14px;
  }
  .stars{color:var(--gold)}

  /* ── PROBLEM SECTION ── */
  .problem{padding:100px 0;background:var(--bg)}
  .section-head{text-align:center;max-width:720px;margin:0 auto 60px}
  .section-head .eyebrow{margin-left:auto;margin-right:auto;border-left:none;border-bottom:2px solid var(--gold);padding:0 0 6px}
  .section-head h2{font-size:clamp(32px,4vw,48px);margin-bottom:16px}
  .section-head p{font-size:18px;color:var(--ink-soft)}
  .problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .problem-card{
    background:var(--white);padding:32px;border-radius:3px;
    border:1px solid var(--line);
    position:relative;
  }
  .problem-card .num{
    font-size:48px;color:var(--gold);
    line-height:1;margin-bottom:12px;font-style:italic;
  }
  .problem-card h3{font-size:20px;margin-bottom:10px;color:var(--ink)}
  .problem-card p{color:var(--ink-soft);font-size:15px;line-height:1.6}

  /* ── SCIENCE SECTION ── */
  .science{padding:100px 0;background:var(--ink);color:var(--bg)}
  .science .eyebrow{color:var(--gold-light);border-color:var(--gold-light)}
  .science h2{color:var(--white);font-size:clamp(32px,4vw,48px);margin-bottom:24px}
  .science-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
  .science-text p{color:var(--bg-soft);font-size:17px;margin-bottom:20px;line-height:1.7}
  .science-text strong{color:var(--gold-light);font-weight:600}
  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
  .stat{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(212,178,106,0.2);
    padding:24px;border-radius:3px;
  }
  .stat .num{
    font-size:42px;color:var(--gold-light);
    line-height:1;margin-bottom:6px;font-weight:600;
  }
  .stat p{font-size:13px;color:var(--bg-deep);line-height:1.5;margin:0}
  .source{font-size:12px;color:var(--gold-light);font-style:italic;margin-top:24px;display:block}

  /* ── HOW IT WORKS ── */
  .how{padding:100px 0;background:var(--bg-soft)}
  .how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
  .step{text-align:center;position:relative}
  .step-num{
    width:64px;height:64px;border-radius:50%;
    background:var(--ink);color:var(--gold-light);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;font-weight:600;
    margin:0 auto 20px;
  }
  .step h3{font-size:22px;margin-bottom:12px}
  .step p{color:var(--ink-soft);font-size:15px;line-height:1.6}
  .step-time{
    display:inline-block;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--gold-deep);font-weight:600;margin-top:10px;
  }

  /* ── SPORTS SECTION ── */
  .sports{padding:100px 0;background:var(--bg)}
  .sports-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
  .sport-card{
    background:var(--white);
    border:1px solid var(--line);
    padding:28px 24px;border-radius:3px;
    transition:all 0.25s;
  }
  .sport-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 30px -10px rgba(43,32,20,0.15)}
  .sport-icon{
    width:48px;height:48px;border-radius:50%;
    background:var(--bg-deep);color:var(--gold-deep);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;font-size:22px;
  }
  .sport-card h4{font-size:17px;margin-bottom:10px;color:var(--ink)}
  .sport-card p{font-size:14px;color:var(--ink-mute);line-height:1.55}

  /* ── PRODUCTS ── */
  .products{padding:100px 0;background:var(--bg-soft)}
  .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
  .product-card{
    background:var(--white);border:1px solid var(--line);
    border-radius:3px;overflow:hidden;
    display:flex;flex-direction:column;
  }
  .product-img{
    aspect-ratio:1/1;background:linear-gradient(135deg,var(--bg-deep),var(--bg-soft));
    display:flex;align-items:center;justify-content:center;position:relative;
  }
  .product-img::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at center, rgba(212,178,106,0.3) 0%, transparent 60%);
  }
  .product-img .ph{font-size:80px;color:var(--ink-soft);opacity:0.3;position:relative;z-index:1}
  .badge{
    position:absolute;top:14px;left:14px;
    background:var(--ink);color:var(--gold-light);
    font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
    padding:6px 12px;border-radius:2px;font-weight:600;z-index:2;
  }
  .product-body{padding:28px;flex:1;display:flex;flex-direction:column}
  .product-card h3{font-size:22px;margin-bottom:8px}
  .product-tagline{font-size:14px;color:var(--ink-mute);margin-bottom:18px}
  .product-features{list-style:none;margin-bottom:24px;flex:1}
  .product-features li{
    font-size:14px;color:var(--ink-soft);padding:6px 0 6px 22px;position:relative;
  }
  .product-features li::before{
    content:"✓";position:absolute;left:0;color:var(--gold-deep);font-weight:700;
  }
  .price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
  .price{font-size:28px;color:var(--ink);font-weight:600}
  .price-old{font-size:16px;color:var(--ink-mute);text-decoration:line-through}
  .product-cta{
    background:var(--ink);color:var(--bg);text-align:center;
    padding:14px;border-radius:2px;text-decoration:none;
    font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
    transition:background 0.2s;
  }
  .product-cta:hover{background:var(--gold-deep)}

  /* ── REVIEWS ── */
  .reviews{padding:100px 0;background:var(--bg)}
  .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
  .review-card{
    background:var(--white);border:1px solid var(--line);
    padding:32px;border-radius:3px;
  }
  .review-stars{color:var(--gold);font-size:16px;margin-bottom:14px;letter-spacing:2px}
  .review-text{font-size:15px;color:var(--ink-soft);line-height:1.7;margin-bottom:20px;font-style:italic}
  .review-author{display:flex;align-items:center;gap:12px}
  .review-avatar{
    width:42px;height:42px;border-radius:50%;
    background:var(--bg-deep);color:var(--gold-deep);
    display:flex;align-items:center;justify-content:center;
    font-weight:600;font-size:15px;
  }
  .review-name{font-weight:600;font-size:14px;color:var(--ink)}
  .review-meta{font-size:12px;color:var(--ink-mute)}
  .trustpilot-summary{
    text-align:center;margin-top:50px;
    padding:24px;background:var(--white);border:1px solid var(--line);border-radius:3px;
    display:inline-flex;flex-direction:column;align-items:center;
    margin-left:50%;transform:translateX(-50%);
  }
  .trustpilot-summary .score{
    font-size:32px;font-weight:600;
  }
  .trustpilot-summary .meta{font-size:13px;color:var(--ink-mute);margin-top:4px}

  /* ── COMPARISON ── */
  .compare{padding:100px 0;background:var(--ink);color:var(--bg)}
  .compare h2{color:var(--white);font-size:clamp(32px,4vw,44px);margin-bottom:48px;text-align:center}
  .compare .eyebrow{color:var(--gold-light);border-color:var(--gold-light)}
  .compare-table{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(212,178,106,0.2);border-radius:3px;
    overflow:hidden;max-width:880px;margin:0 auto;
  }
  .compare-row{
    display:grid;grid-template-columns:1.6fr 1fr 1fr;
    border-bottom:1px solid rgba(212,178,106,0.15);
  }
  .compare-row:last-child{border:none}
  .compare-row.head{background:rgba(212,178,106,0.08);font-weight:600}
  .compare-cell{padding:20px 24px;font-size:15px;color:var(--bg-soft)}
  .compare-cell.label{color:var(--white);font-weight:500}
  .compare-cell.us{
    background:rgba(212,178,106,0.06);color:var(--gold-light);font-weight:600;
    border-left:1px solid rgba(212,178,106,0.2);border-right:1px solid rgba(212,178,106,0.2);
  }
  .check{color:var(--gold-light);font-weight:700}
  .cross{color:var(--ink-mute)}

  /* ── FAQ ── */
  .faq{padding:100px 0;background:var(--bg)}
  .faq-item{
    border-bottom:1px solid var(--line);
    padding:24px 0;
  }
  .faq-q{
    font-size:20px;font-weight:500;color:var(--ink);
    cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    list-style:none;
  }
  .faq-q::-webkit-details-marker{display:none}
  .faq-q::after{
    content:"+";font-size:24px;color:var(--gold-deep);
    transition:transform 0.2s;font-weight:300;
  }
  details[open] .faq-q::after{content:"−"}
  .faq-a{padding-top:16px;color:var(--ink-soft);font-size:16px;line-height:1.7}

  /* ── FINAL CTA ── */
  .final-cta{
    padding:120px 0;text-align:center;
    background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg-deep) 100%);
    position:relative;overflow:hidden;
  }
  .final-cta::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse at center, rgba(184,146,74,0.12) 0%, transparent 60%);
    pointer-events:none;
  }
  .final-cta h2{font-size:clamp(36px,5vw,56px);margin-bottom:20px;position:relative}
  .final-cta h2 em{color:var(--gold-deep);font-style:italic}
  .final-cta p{font-size:19px;color:var(--ink-soft);max-width:600px;margin:0 auto 36px;position:relative}
  .final-cta .btn-primary{font-size:16px;padding:20px 44px;position:relative}
  .final-trust{margin-top:24px;font-size:13px;color:var(--ink-mute);position:relative}

  /* ── FOOTER ── */
  footer{background:var(--ink);color:var(--bg-soft);padding:48px 0 24px}
  footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
  .foot-logo{font-size:22px;color:var(--white);margin-bottom:12px}
  .foot-tagline{font-size:13px;color:var(--ink-mute);max-width:280px;line-height:1.6}
  footer h5{color:var(--white);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
  footer ul{list-style:none}
  footer ul li{margin-bottom:8px}
  footer ul a{color:var(--bg-soft);text-decoration:none;font-size:14px;opacity:0.7}
  footer ul a:hover{color:var(--gold-light);opacity:1}
  .foot-bottom{
    border-top:1px solid rgba(212,178,106,0.15);
    margin-top:40px;padding-top:24px;
    text-align:center;font-size:12px;color:var(--ink-mute);
  }

  /* ── RESPONSIVE ── */
  @media (max-width:900px){
    .hero{padding:48px 0 40px}
    .hero-grid,.science-grid{grid-template-columns:1fr;gap:40px}
    .problem-grid,.how-steps,.review-grid,.product-grid{grid-template-columns:1fr}
    .sports-grid{grid-template-columns:repeat(2,1fr)}
    .compare-row{grid-template-columns:1.4fr 1fr 1fr}
    .compare-cell{padding:14px 12px;font-size:13px}
    nav.main{display:none}
    footer .wrap{grid-template-columns:1fr 1fr;gap:32px}
    .stat-grid{grid-template-columns:1fr}
  }

    .hero h1 {
        margin-bottom: 10px;
    }

      .section-title {
      text-align: center;
      font-size: clamp(28px, 3.4vw, 40px);
      margin-bottom: 14px; letter-spacing: -0.01em;
    }
    .section-intro {
      text-align: center; max-width: 600px; margin: 0 auto 44px;
      font-size: 16px; color: var(--text-soft);
    }

    .products-section { background: #f9f9f9; }
    .products-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }
    .product-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden;
      display: flex; flex-direction: column;
      position: relative;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .product-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.07);
    }
    .product-card.featured { border: 2px solid var(--gold); }
    .product-badge {
      position: absolute; top: 14px; left: 14px;
      background: var(--gold); color: #fff;
      font-size: 11px; font-weight: 700;
      padding: 5px 10px; border-radius: 4px;
      text-transform: uppercase; letter-spacing: 0.06em;
      z-index: 2;
    }
    .product-discount-tag {
      position: absolute; top: 14px; right: 14px;
      background: #c44545; color: #fff;
      font-size: 13px; font-weight: 700;
      padding: 6px 12px; border-radius: 6px; z-index: 2;
    }
    .product-image {
      background: var(--bg-soft);
      aspect-ratio: 4 / 3;
      display: flex; align-items: center; justify-content: center;
      font-size: 64px; color: var(--gold);
    }
    .product-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .product-body { padding: 24px 22px 22px; flex: 1; display: flex; flex-direction: column; }
    .product-card h3 { font-size: 22px; margin-bottom: 6px; }
    .product-tagline {
      font-size: 12px; color: var(--gold);
      text-transform: uppercase; letter-spacing: 0.08em;
      font-weight: 600; margin-bottom: 10px;
    }
    .product-desc {
      font-size: 14px; color: var(--text-soft);
      margin-bottom: 10px; flex: 1;
    }
    .product-features {
      list-style: none; margin-bottom: 10px;
      font-size: 13px; color: var(--text-soft);    margin-left: 0;
    }
    .product-features li {
      padding: 4px 0;
      display: flex; align-items: center; gap: 8px;
    }
    .product-features li::before {
      content: '✓'; color: #5a7d4f; font-weight: 700;
    }
    .price-row {
      display: flex; align-items: baseline; gap: 10px;
      margin-bottom: 16px; flex-wrap: wrap;
          line-height: normal;
    }
    .price-now {
      font-size: 28px; font-weight: 700; color: var(--text);
    }
    .price-was {
      font-size: 16px; color: var(--text-muted);
      text-decoration: line-through;
    }
    .price-save {
      font-size: 11px; color: var(--accent-red);
      font-weight: 700; letter-spacing: 0.04em;
      width: 100%;
    }
    .product-cta {
      display: block; text-align: center;
      background: var(--bg-dark); color: var(--gold-light);
      padding: 14px 18px; border-radius: 6px;
      font-size: 13px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      text-decoration: none;
      transition: background 0.15s ease;
      font-family: 'Gilmer Heavy';
    }
    .product-cta:hover { background: #000; }

    @media (max-width: 1024px) {
  .products-grid {
    display: flex; 
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 20px 0;
    margin: 0 -15px;
    padding-left: 15px; 
    scrollbar-width: none; 
  }}

  
@media (max-width: 767px) {
  .product-card {
    flex: 0 0 85%; 
    scroll-snap-align: center;
  }}

      .section-eyebrow {
      text-align: center;
      font-size: 12px; color: var(--gold);
      font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; margin-bottom: 12px;
    }
    .section_C { padding: 64px 0; }

.product-features li {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
}


.hero-visual {
  position: relative;
  min-height: 500px;
  border-radius: 24px;
  overflow: hidden;

  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;

  display: flex;
  align-items: flex-end;

  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

.hero-visual-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.15) 45%,
      rgba(0,0,0,0.05) 100%
    );
}

.hero-visual-content {
  position: relative;
  z-index: 2;

  padding: 32px;
  color: #fff;

  width: 100%;
}

.hero-icon {
  width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);

  font-size: 32px;

  margin-bottom: 18px;
}

.hero-visual-label strong {
  display: block;

  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 10px;

  font-weight: 700;
}

.hero-visual-label span {
  display: block;

  font-size: 16px;
  line-height: 1.6;

  color: rgba(255,255,255,0.88);
}

@media (max-width: 768px) {

  .hero-visual {
    min-height: 380px;
    border-radius: 18px;
    order: -1;
  }

  .hero-visual-content {
    padding: 22px;
  }

  .hero-visual-label strong {
    font-size: 22px;
  }

  .hero-visual-label span {
    font-size: 10px;
  }

  .hero-visual-label {
        padding: 10px 10px;
  }

  .hero-icon {
    width: 58px;
    height: 58px;
    font-size: 24px;
  }
}


/* product carousel */


  .ap-vergelijk__intro {
    text-align: center;
    margin-bottom: 32px;
  }

  .ap-vergelijk__label {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B8963E;
    margin-bottom: 8px;
  }

  .ap-vergelijk__titel {
    font-size: 32px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 auto;
    line-height: 1.3;
  }

  .ap-vergelijk__swiper {
    position: relative;
  }


  .ap-model {
    scroll-snap-align: start;
    background: #FFFFFF;
    border: 1px solid #E8E2D6;
    border-radius: 16px;
    padding: 24px 20px;
    position: relative;
    transition: box-shadow 0.2s ease;
  }


  .ap-model:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  }

  .ap-model--actief {
    border: 2px solid #B8963E;
  }

  .ap-model__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 4px 10px;
    margin-bottom: 10px;
  }

  .ap-model img {
    display: inline-block;
    vertical-align: middle;
    max-width: 45%;
    height: auto;
    -ms-interpolation-mode: bicubic;
    border-radius: 30px;
    float: right;
    margin-bottom: 10px;
  }

  .ap-model__badge--actief {
    background: #FDF3DC;
    color: #7A5200;
  }

  .ap-model__badge--grijs {
    background: #F2EDE4;
    color: #888070;
  }

  .ap-model__naam {
    font-size: 20px;
    font-weight: 800;
    color: #1A1A1A;
    margin: 0 0 4px;
  }

  .ap-model__prijs {
    font-size: 14px;
    color: #888;
    margin: 0 0 16px;
  }

  .ap-model__divider {
    border: none;
    border-top: 1px solid #F0EBE0;
    margin: 16px 0;
  }

  .ap-model__sectielabel {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B0A898;
    margin: 0 0 4px;
  }

  .ap-model__waarde {
    font-size: 13px;
    color: #444;
    margin: 0 0 12px;
    line-height: 1.45;
  }

  .ap-model__checks {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
  }

  .ap-model__check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #444;
    margin-bottom: 7px;
    line-height: 1.4;
  }

  .ap-model__check-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
  }

  .ap-model__check-icon--aan {
    background: #B8963E;
    color: #fff;
  }

  .ap-model__check-icon--uit {
    background: #EDE8DE;
    color: #EDE8DE;
  }

  .ap-model__check--uit {
    opacity: 0.35;
  }

  .ap-model__voor-wie {
    font-size: 12px;
    color: #888;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid #F0EBE0;
  }

  .ap-model__cta {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 11px 0;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease;
  }

  .ap-model__cta:hover {
    opacity: 0.85;
  }

  .ap-model__cta--actief {
    background: #B8963E;
    color: #fff;
  }

  .ap-model__cta--grijs {
    background: #F2EDE4;
    color: #5A5040;
  }

  {% comment %} @media (min-width: 900px) {
    .ap-vergelijk__grid {
      overflow: visible;
      flex-wrap: wrap;
      justify-content: center;
    }

    .ap-model {
      min-width: unset;
      max-width: unset;
      flex: 1 1 calc(33.333% - 8px);
    }
  } {% endcomment %}
    {% comment %} .ap-vergelijk__swiper {
      position: relative;
    }

    .ap-vergelijk__swiper::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 60px;
      background: linear-gradient(to left, #f9f9f9, transparent);
      pointer-events: none;
      z-index: 2;
    }
    .ap-vergelijk__swiper::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 60px;
      background: linear-gradient(to right, #f9f9f9, transparent);
      pointer-events: none;
      z-index: 2;
    } {% endcomment %}
  @media (max-width: 680px) {

    .ap-model--actief {
      order: -1;
    }
    .ap-vergelijk {
      padding: 0 0 50px;
    }
    .ap-vergelijk__intro {
            padding: 48px 24px 0;
    }
    .ap-vergelijk__titel {
        font-size: 22px;
    }

    .ap-vergelijk__label {
        font-size: 14px;
    }
    .ap-vergelijk .swiper-slide {
      width: 100% !important;
    }

  }


  .ap-swiper-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E8E2D6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ap-swiper-prev {
  left: 0;
}

.ap-swiper-next {
  right: 0;
}



.ap-vergelijk__swiper {
  overflow: hidden;

}

.ap-vergelijk .swiper {
    padding: 0 30px !important;
}

.ap-vergelijk .swiper-slide {
  width: 24.5% ;
  height: auto;
  display: flex;
}

.ap-vergelijk {
  overflow: visible;
}  


/* Mobile Styles (up to 768px) */
@media screen and (max-width: 768px) {
  
  .problem-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
    

    gap: 16px;
    padding: 20px;
    margin: 0 -20px;
  }


  .problem-grid::-webkit-scrollbar {
    display: none;
  }
  .problem-grid {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
  }


  .problem-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #ffffff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: auto;
  }


  .section-head {
    margin-bottom: 24px;
    text-align: left;
  }

  #ap-vergelijk .section-head, #reviews .section-head {
    text-align: center;
  }

 .problem-card .num {
    font-size: 2rem;
  } 

  .problem-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .problem-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
  }
}



@media screen and (max-width: 768px) {
  

  .how-steps {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 10px 20px 30px 20px;
    margin: 0 -20px; 
  }


  .how-steps::-webkit-scrollbar {
    display: none;
  }
  .how-steps {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }


  .step {
    flex: 0 0 82%; 
    scroll-snap-align: center;
    background: #f9f9f9; 
    border-radius: 16px;
    padding: 20px 5px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }


  .step-num {
    width: 32px;
    height: 32px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .step h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }

  .step p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    flex-grow: 1;
  }

  .step-time {
    padding-top: 15px;
    border-top: 1px solid #eee;
  }
}

@media screen and (max-width: 768px) {
  .problem-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 20px;
    margin: 0 -20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .problem-grid::-webkit-scrollbar {
    display: none;
  }

  .problem-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  .how-steps {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 10px 20px 30px 20px;
    margin: 0 -20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .how-steps::-webkit-scrollbar {
    display: none;
  }

  .step {
    flex: 0 0 82%;
    scroll-snap-align: center;
    background: #f9f9f9;
    border-radius: 0;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }

  .step p {
    flex-grow: 1;
  }

  .sports-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 10px 20px 30px 20px;
    margin: 0 -20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sports-grid::-webkit-scrollbar {
    display: none;
  }

  .sport-card {
    flex: 0 0 75%;
    scroll-snap-align: center;
    background: #ffffff;
    padding: 24px;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
}

@media screen and (max-width: 768px) {
  .stat-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 10px 20px 20px 20px;
    margin: 0 -20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .stat-grid::-webkit-scrollbar {
    display: none;
  }

  .stat {
    flex: 0 0 65%;
    scroll-snap-align: center;
    background: #ffffff;
    padding: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .stat .num {
    font-size: 2rem;
  }

  .stat p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    color: #000;
    font-weight: 800;
  }
}

@media screen and (max-width: 768px) {
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #4a3721; 
    margin: 0 -20px;
  }


  .compare-row {
    display: flex;
    min-width: 600px;
    border-bottom: 1px solid #4a3721;
  }

  .compare-row.head {
    background: rgba(74, 55, 33, 0.5);
  }

  .compare-row:last-child {
    border-bottom: none;
  }

  .compare-cell {
    flex: 1;
    padding: 15px 12px;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    border-right: 1px solid #4a3721;
    color: #fff;
  }

  .compare-cell:last-child {
    border-right: none;
  }

  .compare-cell.us {
    color: #c5a363; 
    font-weight: 600;
    background: rgba(197, 163, 99, 0.05);
  }

  .compare-cell.label {
    font-weight: bold;
    background: rgba(0, 0, 0, 0.2);
    flex: 0 0 180px;
  }
}

@media screen and (min-width: 769px) {
  .compare-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    border-bottom: 1px solid #4a3721;
  }
}

.problem-visual {
  text-align: center;
  margin: 40px 0 30px 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.problem-visual:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.problem-visual img {
  width: 100%;
  max-width: 100%;
  height: 550px;
  display: block;
  transition: transform 0.5s ease;
  object-fit: cover;
}

.problem-visual:hover img {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .problem-visual {
    margin: 30px 0 20px 0;
    border-radius: 16px;
  }
  
  .problem-visual-caption {
    font-size: 11px;
    margin-top: 8px;
  }
    .problem-visual img {
      height: 300px;
  }

}



  @media (min-width: 768px) {
    .ap-compare__row:last-child .ap-compare__cell {
      border-bottom: 1px solid transparent;
    }
  }


  :root {
    --ap-bg-page: #16100A;
    --ap-bg-card: #241A11;
    --ap-bg-highlight: #2D2117;
    --ap-border: #3A2C1E;
    --ap-border-soft: #2E2218;
    --ap-gold: #D4B07F;
    --ap-gold-bright: #E8CC9A;
    --ap-text: #F1E9D9;
    --ap-text-soft: #B5AB97;
    --ap-text-muted: #8E8372;
    --ap-radius: 16px;
    --ap-radius-sm: 10px;
    --ap-font-display: 'Fraunces', 'Times New Roman', serif;
    --ap-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  }

  /* --- Section --- */
  .ap-compare {
    width: 100%;
    max-width: 1010px;
    background: var(--ap-bg-card);
    border-radius: var(--ap-radius);
    padding: 56px 48px 40px;
    color: var(--ap-text);
    border: 1px solid var(--ap-border-soft);
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6);
  }

  /* --- Header --- */
  .ap-compare__header { margin-bottom: 36px; }

  .ap-compare__eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ap-gold);
    margin: 0 0 14px;
  }

  .ap-compare__title {
    font-weight: 400;
    font-size: clamp(25px, 4vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ap-text);
    margin: 0 0 10px;
  }

  .ap-compare__lede {
    font-weight: 300;
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ap-text-muted);
    margin: 0;
  }

  /* --- Table grid --- */
  .ap-compare__table {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    width: 100%;
  }

  .ap-compare__row {
    display: contents;
  }

  .ap-compare__cell {
    padding: 20px 18px;
    border-bottom: 1px solid var(--ap-border);
    display: flex;
    align-items: center;
  }



  /* Header row */
  .ap-compare__cell--head-empty {
    padding-left: 0;
  }

  .ap-compare__cell--head-amara,
  .ap-compare__cell--head-other {
    font-weight: 500;
    font-size: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .ap-compare__cell--head-amara {
    background: var(--ap-bg-highlight);
    border-top-left-radius: var(--ap-radius-sm);
    border-top-right-radius: var(--ap-radius-sm);
    color: var(--ap-gold);
    gap: 10px;
  }

  .ap-compare__cell--head-other {
    color: var(--ap-text-muted);
  }

  .ap-compare__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ap-gold);
    display: inline-block;
    flex-shrink: 0;
  }

  /* Body rows */
  .ap-compare__cell--label {
    padding-left: 0;
    gap: 14px;
    color: var(--ap-text-soft);
    font-size: 15px;
  }

  .ap-compare__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--ap-text-muted);
    stroke-width: 1.5;
  }

  .ap-compare__cell--amara {
    background: var(--ap-bg-highlight);
    color: var(--ap-text);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.45;
  }

  .ap-compare__cell--other {
    color: var(--ap-text-soft);
    font-size: 15px;
    line-height: 1.45;
  }

  .ap-compare__row:last-child .ap-compare__cell--amara {
    border-bottom-left-radius: var(--ap-radius-sm);
    border-bottom-right-radius: var(--ap-radius-sm);
  }

  /* --- Footer --- */
  .ap-compare__footer {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--ap-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .ap-compare__trust {
    font-size: 13px;
    color: var(--ap-text-muted);
    margin: 0;
    letter-spacing: 0.01em;
  }

  .ap-compare__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ap-gold);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 11px 22px;
    border: 1px solid var(--ap-border);
    border-radius: 999px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    cursor: pointer;
  }

  .ap-compare__cta:hover {
    background: var(--ap-bg-highlight);
    border-color: var(--ap-gold);
    color: var(--ap-gold-bright);
  }

  .ap-compare__cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .ap-compare__cta:hover svg {
    transform: translateX(3px);
  }

  /* --- Entrance animation --- */
  @keyframes ap-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .ap-compare__header,
  .ap-compare__row,
  .ap-compare__footer {
    animation: ap-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }

  .ap-compare__row:nth-child(1) { animation-delay: 0.10s; }
  .ap-compare__row:nth-child(2) { animation-delay: 0.18s; }
  .ap-compare__row:nth-child(3) { animation-delay: 0.26s; }
  .ap-compare__row:nth-child(4) { animation-delay: 0.34s; }
  .ap-compare__row:nth-child(5) { animation-delay: 0.42s; }
  .ap-compare__row:nth-child(6) { animation-delay: 0.50s; }
  .ap-compare__footer { animation-delay: 0.60s; }

  @media (prefers-reduced-motion: reduce) {
    .ap-compare__header,
    .ap-compare__row,
    .ap-compare__footer { animation: none; }
  }

@media (max-width: 720px) {
  .ap-compare {
    padding: 36px 20px 28px;
    overflow: hidden; /* Keeps the main card tidy */
  }

  .ap-compare__scroll-container {
    width: 100%;
    overflow-x: auto; /* Enables horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding-bottom: 10px; /* Space for the scrollbar */
  }

  .ap-compare__table {
    display: grid;
    grid-template-columns: 140px 180px 180px; /* Forces specific widths on mobile */
    min-width: 500px; /* Ensures the table is wider than the screen to trigger scroll */
  }

  /* Adjust cell padding for tighter mobile view */
  .ap-compare__cell {
    padding: 16px 12px;
    font-size: 14px;
  }

  .ap-compare__cell--label {
    padding-left: 0;
    font-size: 13px;
    gap: 8px;
  }

  .ap-compare__icon {
    width: 16px;
    height: 16px;
  }

  /* Remove the "AmaraPure" and "Salon" labels we previously added via ::before 
     because the headers are now visible again in the scroll view */
  .ap-compare__cell--amara::before,
  .ap-compare__cell--other::before {
    display: none;
  }

  /* Optional: Add a subtle indicator that the table is scrollable */
  .ap-compare__scroll-container {
    background: linear-gradient(to right, var(--ap-bg-card) 30%, rgba(255,255,255,0)),
                linear-gradient(to right, rgba(255,255,255,0), var(--ap-bg-card) 70%) 0 100%,
                radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
                radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: var(--ap-bg-card);
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}
  .ap-compare-holder {
    margin: 0;
     padding: 60px 20px;
    background: var(--ap-bg-page);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}