/* =========================================================
   app.css — base theme + blocks
   ========================================================= */

/* ---------- Variables / Base ---------- */
:root{
  --container: 1200px;
  --gap: 16px;
  --gap-small: 8px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 56px;
  --space-8: 80px;

  --brand: #0b6bff;
  --brand-dark: #0751c0;
  --bg: #ffffff;
  --bg-soft: #f7f7f9;
  --text: #1a1a1a;
  --muted: #6a6d74;
  --border: #e6e6ea;
  --shadow: 0 6px 24px rgba(0,0,0,.08);
  --radius: 12px;

  /* Hero typographic scale tuned for reference page */
  --h1: clamp(34px, 5vw, 56px);
  --h2: clamp(22px, 2.8vw, 34px);
  --h3: clamp(18px, 2.1vw, 22px);
  --lead: clamp(1.25rem, 2.2vw, 20px);
  --body: 16px;
}

*,
*::before,
*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font: var(--body)/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-top: 80px; /* Account for fixed header */
  text-rendering:optimizeLegibility;
}

.only-desktop{ display:block; }
.only-mobile{ display:none; }
.do{ display:inline; }
.mo{ display:none; }

@media (max-width: 768px){
  .only-desktop{ display:none; }
  .only-mobile{ display:block; }
  .do{ display:none; }
  .mo{ display:inline; }
  
  .hero__rating.only-mobile { order: -3; margin-bottom: 6px; }
  .hero__title-mobile { order: -2; /*margin-bottom: 10px;*/ }
  .hero__media { order: -1; }
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0 0 var(--space-3); padding-left: 1.2em; }
p{ margin:0 0 var(--space-3); }
h1,h2,h3{ margin:0 0 var(--space-3); line-height:1.2; }
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gap); }

p.ship-estimate { font-size: 0.95rem; color: #374151; margin: 0px !important; text-align: left !important; }

/* ------ Order Summary ------- */

.order-summary {border:1px solid #e5e7eb;border-radius:10px;padding:14px;margin:18px 0 8px;background:#fff}
.order-summary__title {font-size:18px;margin:0 0 8px}
.order-summary__list {list-style:none;margin:0 0 8px;padding:0}
.order-summary__item,
.order-summary__line,
.order-summary__total {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}
.order-summary__total {font-weight:700;border-top:1px dashed #e5e7eb;margin-top:4px;padding-top:10px}

/* Free shipping motivator */
.free-ship {
  margin-top: 12px;
  background: #FAFAFC;
  border: 1px solid #E8E8EE;
  border-radius: 10px;
  padding: 12px;
}
.free-ship__bar {
  height: 20px;
  background: #EEEFF5;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.free-ship__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1B6FBA, #5385d3);
  transition: width 220ms ease;
}
.free-ship__msg {
  margin: 0;
  font-size: 18px;
  color: #333;
}
.free-ship.is-unlocked .free-ship__msg {
  color: #0161c8;
  font-weight: 600;
}


/* ----- Order Bumps (upsells) ----- */
.order-bumps {
  margin: 22px 0 28px;
  display: grid;
  gap: 16px;
}

/* card */
.ob {
  border: 2px dashed #222;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  background: #f8ffdd;
}

/* header strip */
.ob__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  background: #FDFC98;
  border-bottom: 1px dashed rgba(0,0,0,0.15);
}

.ob__arrow {
  display: block;
  width: 34px;
  height: auto;
  flex: 0 0 auto;
}

.ob__check {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  cursor: pointer;
}

.ob__title {
  cursor: pointer;
  font-weight: 800;
  font-size: 18px;
  color: #1ba44c;
  line-height: 1.2;
}

/* body */
.ob__body {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 8px;
}

.ob__thumb {
  width: 84px;
  height: 84px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ob__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.ob__copy {
  font-size: 15px;
  line-height: 1.5;
  color: #2b2b2b;
}

.ob__badge {
  display: inline-block;
  font-weight: 800;
  margin-right: 4px;
}

/* spacing harmony with variants grid */
.offers .variants + .order-bumps { margin-top: 18px; }

/* mobile tweaks */
@media (max-width: 640px) {
  .ob__title { font-size: 18px; }
  .ob__body { grid-template-columns: 72px 1fr; }
  .ob__thumb { width: 72px; height: 72px; }
}





/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:20px; font-weight:700;
  max-width: 400px;
  box-shadow: var(--shadow); transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn--primary{
  background-color: rgb(250 204 21);
  color:#111; border-radius: 1.5rem; padding: 16px 32px; font-size:18px; font-weight: 700;
  box-shadow: 0 10px 18px rgba(255,180,0,.25), inset 0 0 0 1px rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 8px; justify-content: center;
  border-color: rgb(234 179 8);
  border-width: 2px;
  text-decoration: none; transition: all 0.3s ease;
}
.btn--primary:hover{ background: linear-gradient(#ffd54d, #ffbf1a); transform: translateY(-1px); }
.btn-arrow{ width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 900px){
  .btn--primary {
    margin: 0 auto;
  }
}



/* 5-segment "battery" bar */
.stockbar{
  display:inline-flex;
  gap:4px;
  vertical-align:middle;
  border: 1px solid silver;
  padding: 2px;
  margin-bottom: 4px;
  margin-left: 2px;
}
.stockbar .u{
  width:16px; height:10px;
  border-radius:2px;
  background:#e5e7eb;        /* empty segment */
  display:inline-block;
}
.stockbar .f{
  background:#ef4444;        /* filled (red) */
}

/* Sale Ends Timer */
.meta-timer {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;   /* ensures each digit is same width */
  min-width: 7ch;                       /* reserve space for 00:00:00 */
  text-align: left;                     /* so it doesn't look weird centered */
  font-weight: 700;
}

/* Under-Checkout Button reassurance note */
.atc-note{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /*font-size: 13px;*/
  color: var(--muted, #4b5563);
}

.atc-note__text{
  line-height: 1.4;
}


/* Button Shaking Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10% { transform: translateX(-2px) rotate(-1deg); }
  20% { transform: translateX(2px) rotate(1deg); }
  30% { transform: translateX(-2px) rotate(-1deg); }
  40% { transform: translateX(2px) rotate(1deg); }
  50% { transform: translateX(-1px) rotate(-0.5deg); }
  60% { transform: translateX(1px) rotate(0.5deg); }
  70% { transform: translateX(-1px) rotate(-0.5deg); }
  80% { transform: translateX(1px) rotate(0.5deg); }
  90% { transform: translateX(-1px) rotate(-0.5deg); }
}

.btn--shaking {
  animation: shake 1.2s ease-in-out;
}

.btn--shaking:hover {
  animation: none;
}
.btn--xl{ padding:16px 22px; font-size:18px; border-radius:12px; }

.btn--cta {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 24px;        /* larger font */
  font-weight: 600;       /* semi-bold, not heavy bold */
  padding: 25px 36px;     /* more breathing room */
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, transform .06s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.btn--cta.btn--block {
  width: 100%;
  max-width: 480px;
  display: block;
  margin: 32px auto 0;
}

.btn--cta:hover {
  background-color: #43a047;
  transform: translateY(-1px);
}

.btn--cta:active {
  background-color: #388e3c;
}



/* ---------- Top stripe ---------- */
.top-stripe{
  background:#0f172a; color:#fff; text-align:center; font-weight:700;
  padding:8px 12px; letter-spacing:.2px;
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000; background:#fff; border-bottom:1px solid #e3f2fd;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  padding: 0 20px;
}
.site-header.is-sticky{ box-shadow: var(--shadow); border-color: var(--border); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.logo img{ height:36px; width:auto; }

.logo{ 
  font-size: 1.5rem; 
  font-weight: 700; 
  color: var(--brand); 
  text-decoration: none; 
}

.top-nav{
  display: flex;
  align-items: center;
}

.top-nav ul{ 
  display: flex; 
  gap: 0; 
  list-style:none; 
  padding:0; 
  margin:0; 
  align-items: center;
}

.top-nav li{
  position: relative;
}

.top-nav li:not(:last-child)::after{
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: #e0e0e0;
}

.top-nav a{ 
  color: #111; 
  font-weight: 600; 
  opacity: 0.85;
  text-decoration: none;
  padding: 8px 16px;
  transition: all 0.2s ease; 
}

.top-nav a:hover{ 
  opacity: 1; 
  color: var(--brand);
}

.mobile-menu-toggle{
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger-line{
  width: 24px;
  height: 2px;
  background: #333;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1){
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2){
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3){
  transform: rotate(-45deg) translate(6px, -6px);
}
.top-nav a[aria-current="true"]{ color:var(--brand); opacity:1; }
.top-nav a:hover{ opacity:1; }

/* ---------- Sections ---------- */
section{ padding: var(--space-7) 0; }
.section-label{ margin-bottom: var(--space-2); }
.section-label > span{
  display:inline-block; padding:4px 10px; background:#eef2ff; color:#3730a3; border-radius:999px; font-weight:700; font-size:13px;
}

/* =========================================================
   HERO
   ========================================================= */
   .hero-container{

    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(249 249 249 / 1);
    padding: 0px 20px;
   }
.hero{ padding-top: 20px; padding-bottom: 36px; }
.hero__inner{
  display:flex;
  justify-content: center;



  grid-template-columns: 1.1fr .9fr;  /* text a little wider than image */
  gap: 2px;
  align-items: center;
}

.hero__text{ max-width: 680px; } 
.hero__text>h1{
  font-size: 3rem;
}
.hero__badges{ display:flex; align-items:center; gap:12px; margin-bottom: var(--space-2); }
.hero__rating {
  display: flex;
  align-items: center;
  gap: 6px; /* space between stars and label */
}

.hero__rating .stars {
  display: inline-flex !important; /* override previous flex */
}

.hero__rating .star-icon {
  width: 18px;
  height: 18px;
  color: #f59e0b; /* gold */
  flex-shrink: 0;
}

.hero__rating .label {
  font-size: 14px;
  font-weight: 600;
  color: #374151; /* dark gray */
  white-space: nowrap; /* prevent wrapping */
}



.sub{ font-size: var(--lead); color:#363a44;font-weight: 600; }

/* bullets with red circular check icons */
.bullets{ margin: 20px 0; padding-left:0; list-style:none; }
.bullets li{
  display:flex; align-items:flex-start; gap:12px; margin:10px 0;
  font-weight:700; color:#1f2937;
}
.bullets li::before{
  content:""; width:24px; height:24px; margin-top:2px; flex:0 0 24px;
  border-radius:999px; background:#ef4444;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd"></path></svg>') center/14px 14px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd"></path></svg>') center/24px 24px no-repeat;
}

.note{ color:var(--muted); font-size:16px; }

/* CTA Section */
.cta-section{ margin: 20px 0; }
.shipping-info{
  display: flex; align-items: center;
  margin: 16px 4px;
  
  color: rgba(0, 0, 0, 1); 
  /* font-size: 0.75rem; */ 
  font-weight: 500;
}
.pulsing-dot{
  width: 8px; height: 8px; background-color: #1BBA86; border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
  margin-right: 7px;
}
@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
    box-shadow: rgb(173, 244, 161) 0px 0px 0px 2.63813px;
  }
  50% { 
    opacity: 0.6; 
    transform: scale(1.4);
    box-shadow: rgb(173, 244, 161) 0px 0px 0px 5px;
  }
}
.shipping-info .bullet{ color: #000000; margin: 0 4px; }

/* Quote Section */
.hero__quote{
  margin-top: 24px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 12px;
  background: #ffffff; 
  max-width: 400px;
}
.quote-content{ width: 100%; }
.quote-profile{ display: flex; align-items: flex-start; gap: 12px; }
.hero__quote-img img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.star-img{ width: 50px; height: 10px; }
.quote-rating{ flex: 1; }
.quote-rating .stars{ display: flex; gap: 2px; margin-bottom: 8px; }
.hero__quote blockquote{ 
  margin: 0 0 8px 0; color: #374151; font-size: 14px; line-height: 1.5;
  font-style: italic;
}
.quote-author{ display: flex; align-items: center; gap: 8px; }
.author-name{ color: #374151; font-weight: 600; font-size: 14px; }
.verified-badge{
  display: flex; align-items: center; gap: 4px;
  color: #6b7280; font-size: 12px; font-weight: 500;
}
.verified-badge svg{ flex-shrink: 0; }

.hero__featured-on{ margin-bottom:28px; }
.only-desktop{ display:block; }
.only-mobile{ display:none; }

/* Media side */
.hero__media .hero__main{
  position: relative;
  width: 512px;
}
.hero__media .hero__main img{
  width:100%; border-radius:16px;
   
}

/* Discount Badge Overlay */
.hero__discount-badge{
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #ef4444;
  color: #ffcc33;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  z-index: 10;
}

.discount-text{
  display: block;
  line-height: 1.2;
}

/* Guarantee Badges */
.hero__guarantees{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  align-items: flex-end;
}

.guarantee-badge{
  background: #ef4444;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-align: center;
  min-width: 140px;
}

/* US Company Badge */
.hero__us-badge{
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.us-company-badge{
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  color: #374151;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.us-company-badge .flag{
  font-size: 14px;
}

.us-company-badge .text{
  letter-spacing: 0.2px;
}

/* show all five thumbs in one row */
.hero__thumbs{
  display:flex;
  /*margin-left: 3rem;*/
  gap: 6px; margin-top:8px;
  justify-content: center;
}
.hero__thumbs img{
  width:60px !important; height: 60px !important; border-radius:10px; border:1px solid var(--border);
  opacity:.95; transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease, border-color .12s ease;
  cursor:pointer;
}
.hero__thumbs img:hover{ opacity:1; transform: translateY(-1px); }
.hero__thumbs img.is-active{
  border-color:#0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.25);
}

/* reduce top padding of next section like the reference */
section.hero + section{ padding-top: 16px; }

/* =========================================================
   IMAGE + IMAGE (duo)
   ========================================================= */
.image-image .ii-grid{
  display:grid; gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
  align-items:center;
}

.image-image{
  padding: 48px 0px;

}

@media (max-width: 768px) {
  .image-image .ii-grid {
    grid-template-columns: 1fr; /* stack into 1 column on mobile */
  }
  
  .image-image {padding: 20px 0;}
}

.container>h2{
  text-align: center;
   max-width: 800px;
  margin: auto;
  margin-bottom: 8px;
}
.container>p{
  max-width: 800px;
  margin: auto;
  text-align: center;
  margin-bottom: 32px;
}

/* =========================================================
   SLIDING IMAGES (continuous carousel)
   ========================================================= */
.slider-container{
  overflow: hidden; /* Hide the scrollbar */
  position: relative;
  width: 100%;
}
.sliding-images{
  margin-top: 10px;
 background-color: rgb(249 249 249 / 1);
 /*padding: 48px 0px !important;*/

}


.sliding-images .slider{
  display: flex; 
  gap: 16px; 
  animation: slide 60s linear infinite;
  width: max-content; /* Allow content to extend beyond container */
}

.sliding-images .slider:hover{
  animation-play-state: paused; /* Pause on hover */
}

.sliding-images .slide{
  flex: 0 0 auto; 
  width: 200px; 
  height: 260px;
  border-radius: 12px; 
  overflow: hidden; 
  border: 1px solid var(--border); 
  background: #fff;
}

.sliding-images .slide img{
  width: 100%;
  height: auto;
  display: block;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* Move by half the total width since we duplicated images */
  }
}

/* Hide scrollbar for webkit browsers */
.slider-container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
.slider-container {
  scrollbar-width: none;
}

/* =========================================================
   IMAGE + TEXT
   ========================================================= */
.image-text .grid{
  display:grid; gap: var(--space-5);
  grid-template-columns: 1fr 1fr; align-items:center;
}
.image-text .media img{ width:100%; border-radius:14px; }
.image-text .icons{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px 16px; margin-top: var(--space-3); padding-left:0; list-style:none; }
.image-text .icons li{ display:flex; align-items:center; gap:10px;flex-direction: column; }
.image-text .icons img{ width:80px; }
.image-text .icons .lbl{ font-size: 1.125rem; font-weight: 700; }
.image-text .note{ font-size: 0.75rem; text-align: center;margin-top: 24px !important; }
.image-text .icons .val {text-align: center;}

/* Specs section styling */
.image-text--specs{
  background-color: #f9f9f9;
}


/* =========================================================
   IMAGE CARDS (benefits, features, reviews)
   ========================================================= */
.image-cards.white{ background:#fff; }
.image-cards-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.image-cards-container .btn{
  margin-top: 24px;
  width: 100%;
}
.image-cards.gray{ background:var(--bg-soft); }

.image-cards .grid.cards{
  display:grid; gap:20px;
  grid-template-columns: repeat(3, 1fr);
}
.image-cards .card{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.image-cards .card img{ border-radius:12px; margin-bottom:10px; }

/* Reviews specific styling */
.image-cards.reviews .card{
  text-align: center;
}
.image-cards.reviews .card h3{
  font-size: 1.125rem;
  margin-bottom: 4px;
  margin-top: 8px;
  font-weight: 600;
}
.image-cards.reviews .card p{
  margin-bottom: 4px;
}
.image-cards.reviews .stars{
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 8px;
}
.image-cards.reviews .stars svg{
  width: 16px;
  height: 16px;
  color: #fbbf24;
}

/* =========================================================
   PROMO (guarantee / sale)
   ========================================================= */
.promo .promo__grid{
  display:grid; gap: var(--space-5);
  grid-template-columns: 1fr 1fr; align-items:center;
}
.promo--compact .promo__media img{ border-radius:16px; }
.promo .bullets{ 
  padding-left: 0; 
  list-style: none; 
  margin: 20px 0; 
}

.promo .bullets li{
  display: flex; 
  align-items: flex-start; 
  gap: 12px; 
  margin: 10px 0;
  font-weight: 700; 
  color: white;
}

.promo .bullets li::before{
  content: ""; 
  width: 32px; 
  height: 32px; 
  margin-top: 2px; 
  flex: 0 0 32px;
  border-radius: 999px; 
  background: #fbbf24;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd"></path></svg>') center/16px 16px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd"></path></svg>') center/32px 32px no-repeat;
}

/* All promo backgrounds */
.promo{
  background-color: #3cb54b;
    padding: 20px 0;
}

.promo--guarantee{
  background-color: #3cb54b;
  color: white;
}

.promo--guarantee h2,
.promo--guarantee p,
.promo--guarantee .bullets li{
  color: white;
}

/* Promo info section with pulsing dot */
.promo-info{
  display: flex; 
  align-items: center; 
  gap: 4px; 
  margin-top: 12px;
  color: white; 
  font-size: 14px; 
  font-weight: 500;
  margin: 20px 4px;
}
.promo-info .note{
  color: white;
}
.promo-info .pulsing-dot{
  width: 8px; 
  height: 8px; 
  background-color: #1BBA86; 
  border-radius: 50%;
  animation: buttonPulse 1.725s ease-out infinite forwards;
  flex-shrink: 0;
}

/* Synchronized pulsing animation for both button and dot */
@keyframes buttonPulse {
  0%, 100% { 
    box-shadow: rgb(173, 244, 161) 0px 0px 0px 2.63813px;
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    box-shadow: rgb(173, 244, 161) 0px 0px 0px 5px;
    transform: scale(1);
    opacity: 0.8;
  }
}

.btn--pulsing{
  animation: buttonPulse 1.725s ease-out infinite forwards;
  transition: box-shadow 0.3s ease;
}

.btn--pulsing:hover{
  animation: none;
  box-shadow: rgb(173, 244, 161) 0px 0px 0px 2.63813px;
  transform: scale(1);
  opacity: 1;
}

/* Promo alignment control (image_align: "left" | "right") */
.promo--left  .promo__media { order: 0; }  /* default DOM order: media then text */
.promo--left  .promo__text  { order: 0; }
.promo__text>h2{
  color: white;
}

/* Promo rating section for promo--left */
.promo--left .promo__rating{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.promo--left .promo__rating .stars{
  display: flex;
  gap: 2px;
}
.promo--left .promo__rating .stars svg{
  width: 16px;
  height: 16px;
  color: #fbbf24;
}
.promo--left .promo__rating .rating-text{
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
}
.promo--right .promo__media { order: 1; }  /* push image after text on desktop */
.promo--right .promo__text  { order: 0; }

/* CTA visibility control */
.promo__cta--desktop {
  display: block;
}

.promo__cta--mobile {
  display: none;
  margin-top: 20px;
}

/* On mobile, always show text first, image second */
@media (max-width: 900px){
  .promo .promo__media { order: 2; }
  .promo .promo__text  { order: 1; }
  
  /* Hide desktop CTA, show mobile CTA */
  .promo__cta--desktop {
    display: none;
  }
  
  .promo__cta--mobile {
    display: block;
  }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  background: white;
  padding: 48px 0;
}

.faq-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 2rem;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faq-item.active {
  background: white;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  background: #f9fafb;
  transition: background-color 0.3s ease;
}

.faq-item.active .faq-question {
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}

.faq-question-text {
  font-weight: 700;
  font-size: 1.125rem;
  color: #1f2937;
  flex: 1;
}

.faq-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-icon svg {
  position: absolute;
  color: #6b7280;
  transition: all 0.3s ease;
}

.faq-icon-plus {
  display: block;
}

.faq-icon-minus {
  display: none;
}

.faq-item.active .faq-icon-plus {
  display: none;
}

.faq-item.active .faq-icon-minus {
  display: block;
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 24px;
  background: white;
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
}

.faq-answer p {
  margin: 0;
}

.faq-answer p:not(:last-child) {
  margin-bottom: 12px;
}

/* =========================================================
   OFFERS (variant selector)
   ========================================================= */
   
.variant-card.is-disabled {
  opacity: .55;
  pointer-events: none; /* prevents hover effects; JS already guards interactions */
  filter: grayscale(0.2);
}

.badge--soldout {
  display: inline-block;
  position: absolute;
  top: 8px;
  left: 8px;
  background: #b91c1c;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: .02em;
}

.variant__image { position: relative; }
   
.offers .variants{
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 16px; 
  margin: var(--space-3) 0 var(--space-4);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.variant-card{
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 0 0 1px var(--border);
}

.variant-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.variant-card.is-selected{
  border-color: #869bc4;
  /* box-shadow: 0 0 0 1px var(--brand) inset, var(--shadow); */
  background: #cee0e5;
}

.variant__image{
  margin-bottom: 12px;
}

.variant__image img{
  width: 100%;
  object-fit: fill;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.variant__content{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.variant__title{
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  line-height: 1.3;
}

.variant__pricing{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.price--current{
  font-size: 1.125rem;
  font-weight: 800;
  color: #1f2937;
}

.price--original{
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: line-through;
}

.price--save{
  font-size: 0.75rem;
  font-weight: 700;
  color: #1b5e20;
}

.variant__shipping{
  margin: 8px 0;
}

.shipping-badge{
  background: #e3f2fd;
  color: #075985;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-block;
}

/* Badge styles for variant selector */
.variant__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  /*margin: 8px 0;*/
}

/* Desktop badges - hidden on mobile */
.variant__badges--desktop{
  display: flex;
    justify-content: center;
    margin-top: 8px;
}
.variant__badges--top,
.variant__badges--bottom{
  display: none;
}

.badge{
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
}

.badge--popular{
  background: #fc0;
  color: #000;
}

.badge--shipping{
  background: gray;
  color: white;
}

.variant__quantity{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

/* Hide number input arrows (Chrome, Safari, Edge, Opera) */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide number input arrows (Firefox) */
.qty-input[type=number] {
  -moz-appearance: textfield;
}


.qty-btn{
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.qty-btn:hover{
  border-color: var(--brand);
  color: var(--brand);
}

.variant-card.is-selected .qty-btn{
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}

.qty-input{
  width: 50px;
  height: 28px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1f2937;
  background: white;
}

.variant-card.is-selected .qty-input{
  border-color: var(--brand);
  background: #fbfdff;
}

.offers .btn{ 
  width: 100%; 
  max-width: 400px;
  margin: 32px auto 0;
  display: block;
}

/* ---------- Footer ---------- */
.site-footer{ 
  background: #333333; 
  color: white; 
  padding: 20px 0; 
  text-align: center;
}

.footer-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-brand{
  margin-bottom: 8px;
}

.footer-logo{
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-nav{
  margin: 0;
}

.footer-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li{
  margin: 0;
}

.footer-links a{
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.footer-links a:hover{
  opacity: 0.8;
}

.footer-disclaimers{
  margin-top: 16px;
}
.footer-disclaimers p{
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.4);
}
.footer-copyright{
  margin-top: 8px;
}

.footer-copyright p{
  margin: 0;
  font-size: 14px;
  color: white;
  opacity: 0.9;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .hero__inner{ grid-template-columns: 1fr; /*gap: 22px;*/flex-direction: column; }
  .hero__media{ order:-1; }
  .hero__media .hero__main{
    position: relative;
    width: 100%;
  }
  .hero__text {margin-top: 16px;}
  .hero-container {padding: 0 8px;}
}

@media (max-width: 900px){
  body{
    padding-top: 54px; /* Account for fixed header */
  }
  
  .container {
    padding: 0 var(--gap-small);
  }
  
  .hero {
    padding-top: 10px;
  }
  
  .hero__title-mobile h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    text-align: center;
  }

  .image-text .grid{ grid-template-columns: 1fr; }
  .image-text .icons{ grid-template-columns: repeat(2,1fr); }

  .image-text .grid{
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .image-text .text{ order: 1; }
  .image-text .media{ order: 2; }

  .promo .promo__grid{ grid-template-columns: 1fr; }
  .image-cards .grid.cards{ grid-template-columns: 1fr; }

  .mobile-menu-toggle{ display: flex; }

  .top-nav ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
  }
  .top-nav ul.active{ display: flex; }
  .top-nav li:not(:last-child)::after{ display: none; }
  .top-nav a{
    padding: 12px 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    display: block;
    width: 100%;
  }
  .top-nav li:last-child a{ border-bottom: none; }

  /* ===== OFFERS ===== */
  #offers {
    scroll-margin-top: 80px; /* match your header height */  
  }
  
  .offers .variants{
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
  }

  .variant-card{
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
    align-items: center;
    padding: 4px;
    text-align: left;
  }

  .variant__image{ grid-column: 1; }
  .variant__image img{
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
  }

  .variant__content{
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr auto; /* left = text, right = qty */
    grid-auto-rows: auto;
    row-gap: 6px;
  }

  .variant__header{
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
  }
  .variant__title{ font-size: 0.875rem; margin: 0; }

  .variant__pricing{
    grid-column: 1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
  }
  .price--current{ font-size: 1rem; }
  .price--original{ font-size: 0.75rem; }
  .price--save{ font-size: 0.6875rem; }

  .variant__quantity{
    grid-column: 2;
    justify-self: end;
    align-self: center;
    display: flex;
    gap: 6px;
    margin: 0;
  }
  .qty-btn{ width: 24px; height: 24px; font-size: 0.875rem; }
  .qty-input{
    width: 40px;
    height: 24px;
    font-size: 0.75rem;
    text-align: center;
  }

  /* badges */
  .variant__badges{ display: flex; gap: 6px; flex-wrap: wrap; }
  .variant__badges--desktop{ display: none; }
  .variant__badges--bottom{
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }
  .badge{ font-size: 0.6875rem; padding: 2px 6px; }

  /* ===== FOOTER ===== */
  .footer-content{ gap: 20px; }
  .footer-links{ gap: 16px; }
  .footer-links a{ font-size: 13px; }
  .footer-copyright p{ font-size: 13px; }
}



@media (max-width: 640px){
  .only-desktop{ display:none; }
  .only-mobile{ display:block; }
  .do{ display:none; }
  .mo{ display:inline; }
  section{ padding: var(--space-5) 0; }
  
  .site-footer{
    padding: 20px 0;
  }
  
  .footer-content{
    gap: 16px;
  }
  
  .footer-logo{
    height: 28px;
  }
  
  .footer-links{
    gap: 12px;
  }
  
  .footer-links a{
    font-size: 12px;
  }
  
  .footer-copyright p{
    font-size: 12px;
  }
  
  .header__inner{ padding:8px 0; }
  .top-nav ul{ gap:12px; font-size:14px; }
  .sliding-images .slide{ width:200px; }
}