/* =============================================================
   HOMEPAGE HERO SLIDER — css/hero.css
   Left-aligned · Progress-bar dots · No arrows · 3 s auto-advance
   ============================================================= */

/* ── Shell ───────────────────────────────────────────────────── */
.pq-hero {
  position:   relative;
  width:      100%;
  height:     620px;       /* fixed — slides are all absolute */
  overflow:   hidden;
  background: var(--pq-ink);
}

/* ── Track fills the shell ────────────────────────────────────── */
.pq-hero-slider__track {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}

/* ── Every slide — ALWAYS absolute, NEVER relative ───────────── */
.pq-hero-slide {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  display:        flex;
  align-items:    center;
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transition:     opacity .7s ease, visibility .7s ease;
  z-index:        1;
}

/* Only opacity/visibility change — no layout reflow */
.pq-hero-slide.is-active {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  z-index:        2;
}

/* ── Background image ─────────────────────────────────────────── */
.pq-hero__bg {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  z-index:         0;
}
.pq-hero__bg--placeholder {
  background: linear-gradient(135deg, var(--pq-sage), var(--pq-blue));
}

/* ── Gradient overlay ─────────────────────────────────────────── */
.pq-hero-slide::before {
  content:        '';
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(8, 22, 14, .88) 0%,
    rgba(8, 22, 14, .70) 35%,
    rgba(8, 22, 14, .35) 58%,
    rgba(8, 22, 14, .08) 75%,
    transparent 100%
  );
}

/* ── Content panel ────────────────────────────────────────────── */
.pq-hero__panel {
  position:     relative;
  z-index:      2;
  margin-left:  max(var(--pq-gutter), calc((100vw - var(--pq-max)) / 2 + var(--pq-gutter)));
  margin-right: auto;
  max-width:    540px;
  padding:      clamp(48px, 7vw, 100px) 0 clamp(64px, 9vw, 120px);
  animation:    pqHeroIn .6s cubic-bezier(.22,.68,0,1.2) both;
}
.pq-hero-slide:not(.is-active) .pq-hero__panel { animation: none; }

@keyframes pqHeroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Kicker ───────────────────────────────────────────────────── */
.pq-hero__kicker {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         6px 13px;
  margin-bottom:   16px;
  border-radius:   999px;
  border:          1px solid rgba(255,255,255,.28);
  background:      rgba(255,255,255,.12);
  color:           #fff;
  font-size:       .68rem;
  font-weight:     750;
  letter-spacing:  .07em;
  text-transform:  uppercase;
  backdrop-filter: blur(6px);
}

/* ── Featured product card ────────────────────────────────────── */
.pq-hero-product {
  display:         inline-flex;
  flex-direction:  column;
  gap:             5px;
  margin-bottom:   16px;
  padding:         12px 16px;
  border-radius:   18px;
  border:          1px solid rgba(255,255,255,.2);
  background:      rgba(255,255,255,.12);
  color:           #fff;
  text-decoration: none;
  backdrop-filter: blur(14px);
  width:           fit-content;
  transition:      background .2s ease;
}
.pq-hero-product:hover { background: rgba(255,255,255,.22); }
.pq-hero-product__eyebrow  { font-size: .65rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #a8e6bf; }
.pq-hero-product__rating   { display: inline-flex; align-items: center; gap: 7px; color: #f4c55a; font-size: .84rem; }
.pq-hero-product__rating em { color: rgba(255,255,255,.65); font-style: normal; font-size: .76rem; }
.pq-hero-product__prices   { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 800; }
.pq-hero-product__prices del { color: rgba(255,255,255,.48); font-size: .88rem; font-weight: 600; }
.pq-hero-product__prices ins { color: #fff; font-size: 1.05rem; text-decoration: none; }

/* ── Heading ──────────────────────────────────────────────────── */
.pq-hero h1 {
  margin:         0 0 14px;
  color:          #fff;
  font-size:      clamp(2.4rem, 4.5vw, 4rem);
  line-height:    1.04;
  letter-spacing: -.05em;
  font-weight:    800;
  text-shadow:    0 2px 14px rgba(0,0,0,.30);
  max-width:      520px;
}

/* ── Body text ────────────────────────────────────────────────── */
.pq-hero p {
  margin:      0 0 26px;
  color:       rgba(255,255,255,.88);
  font-size:   1rem;
  line-height: 1.65;
  max-width:   400px;
  text-shadow: 0 1px 5px rgba(0,0,0,.35);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.pq-hero .pq-buttons  { display: flex; gap: 10px; flex-wrap: wrap; }
.pq-hero .pq-btn      { min-height: 46px; padding: 0 24px; font-size: .9rem; font-weight: 700; border-radius: 999px; }
.pq-hero .pq-btn--primary {
  background: var(--pq-green) !important; color: #fff !important; border: none;
  box-shadow: 0 8px 24px rgba(33,80,52,.38);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.pq-hero .pq-btn--primary:hover { background: #1a4a2e !important; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(33,80,52,.44); }
.pq-hero .pq-btn--ghost {
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.48); color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
.pq-hero .pq-btn--ghost:hover { background: rgba(255,255,255,.24); border-color: #fff; }

/* ── Progress dots ────────────────────────────────────────────── */
.pq-hero-slider__footer {
  position: absolute;
  z-index:  5;
  bottom:   24px;
  left:     max(var(--pq-gutter), calc((100vw - var(--pq-max)) / 2 + var(--pq-gutter)));
}
.pq-hero-slider__dots    { display: flex; align-items: center; gap: 10px; }
.pq-hero-slider__dot {
  position:      relative;
  width:         28px; height: 4px;
  padding:       0; border: none;
  border-radius: 999px;
  background:    rgba(255,255,255,.30);
  cursor:        pointer;
  overflow:      hidden;
  transition:    width .25s ease, background .25s ease;
  box-shadow:    0 0 0 8px transparent; /* larger tap target */
}
.pq-hero-slider__dot.is-active  { width: 72px; background: rgba(255,255,255,.20); }
.pq-hero-slider__dot-bar {
  display: block; position: absolute; inset: 0;
  width: 0%; background: #fff; border-radius: 999px; animation: none;
}
.pq-hero-slider__dot.is-active .pq-hero-slider__dot-bar {
  animation: pqDotFill var(--pq-hero-dur, 3000ms) linear both;
}
.pq-hero-slider__dot.is-active[data-paused] .pq-hero-slider__dot-bar {
  animation-play-state: paused;
}
@keyframes pqDotFill { from { width: 0%; } to { width: 100%; } }
.pq-hero-slider__dot.was-active .pq-hero-slider__dot-bar { width: 100%; animation: none; }

/* ══════════════════════════════════════════════════════════════
   MOBILE — the critical fix:
   On mobile all slides are position:absolute, so the section
   needs an explicit height (NOT auto/min-height) to be visible.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Fixed height — never auto on mobile with absolute slides */
  .pq-hero { height: 560px; }

  .pq-hero__bg { object-position: 60% center; }

  /* Softer overlay on mobile so the photo shows through */
  .pq-hero-slide::before {
    background: linear-gradient(
      160deg,
      rgba(8, 22, 14, .78) 0%,
      rgba(8, 22, 14, .62) 40%,
      rgba(8, 22, 14, .40) 70%,
      rgba(8, 22, 14, .60) 100%
    );
  }

  /* Simple side gutters — no complex calc() that breaks on narrow screens */
  .pq-hero__panel {
    margin-left:    var(--pq-gutter);
    margin-right:   var(--pq-gutter);
    max-width:      100%;
    width:          auto;
    padding-top:    44px;
    padding-bottom: 68px;
  }

  .pq-hero h1 {
    font-size:   clamp(1.85rem, 7.5vw, 2.5rem);
    max-width:   100%;
    line-height: 1.1;
  }

  .pq-hero p {
    font-size: .92rem;
    max-width: 100%;
    margin-bottom: 22px;
  }

  .pq-hero .pq-btn { min-height: 44px; padding: 0 20px; font-size: .86rem; }

  /* Dots aligned to left gutter */
  .pq-hero-slider__footer { left: var(--pq-gutter); bottom: 18px; }
  .pq-hero-slider__dot          { width: 22px; }
  .pq-hero-slider__dot.is-active { width: 56px; }
}

@media (max-width: 480px) {
  .pq-hero { height: 520px; }

  .pq-hero__panel { padding-top: 38px; padding-bottom: 62px; }

  .pq-hero h1 { font-size: clamp(1.7rem, 8.5vw, 2.2rem); }

  /* Hide body paragraph on very small screens to keep hero tight */
  .pq-hero p { display: none; }

  .pq-hero .pq-btn { min-height: 42px; padding: 0 16px; font-size: .84rem; }
}