/* ==========================================================================
   Home page bundle — hero, advice teaser, tools teaser
   Shared cards/grids come from the global bundle.
   ========================================================================== */

/* ---------- Band tweaks specific to the home page ---------- */
.pc-band-tight > .pc-trust { padding-top: 0; padding-bottom: 0; }
.pc-band-tight { padding: 6px 0; }
.pc-band-tight .pc-trust-in { border-top: none; border-bottom: none; }

/* The hero sits directly on the page background, above the first band. */
.pc-hs + .pc-band { margin-top: 22px; }

/* ==========================================================================
   Hero slider — big product stage on the left, clickable tiles on the right
   ========================================================================== */
.pc-hs {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px; padding-top: 28px; padding-bottom: 8px;
}

/* ---------- Stage ---------- */
.pc-hs-stage {
  position: relative; border-radius: var(--pc-radius-lg); overflow: hidden;
  min-height: 440px; background: var(--pc-yellow-soft);
}
.pc-hs-slide {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; align-items: center; padding: 48px;
  opacity: 0; visibility: hidden; transform: scale(1.02);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.pc-hs-slide.active { opacity: 1; visibility: visible; transform: none; }

.pc-hs-kicker {
  display: inline-block; align-self: flex-start; background: var(--pc-surface);
  color: var(--pc-teal); font-weight: 800; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 7px 14px; border-radius: 100px; margin-bottom: 16px;
}
/* Product names vary wildly in length — clamp so the price and button below
   are always visible instead of being pushed out of the slide. */
.pc-hs-title {
  font-size: 40px; line-height: 1.08; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: break-word;
}
.pc-hs-text {
  font-size: 16px; line-height: 1.6; color: var(--pc-muted); margin: 0 0 22px; max-width: 440px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-hs-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pc-hs-price { font-family: var(--pc-serif); font-size: 26px; }
.pc-hs-price .woocommerce-Price-amount { font-family: var(--pc-serif); }
.pc-hs-price del { color: var(--pc-muted3); font-size: 18px; margin-right: 6px; }
.pc-hs-price ins { text-decoration: none; }

.pc-hs-media { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; }
.pc-hs-media img {
  display: block; margin: 0 auto; max-height: 320px; max-width: 100%;
  width: auto; object-fit: contain;
  /* Product shots are usually on white — multiply drops that box into the
     slide tint so the image reads as cut out. */
  mix-blend-mode: multiply;
}
.pc-hs-media .pc-icon { opacity: .35; }
.pc-hs-copy { min-width: 0; }

/* ---------- Side tiles ---------- */
.pc-hs-side { display: grid; grid-template-rows: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; }
.pc-hs-tile {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  border: none; border-radius: 18px; padding: 14px; overflow: hidden;
  font-family: var(--pc-sans); position: relative; transition: transform .15s, box-shadow .15s;
}
.pc-hs-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(46, 42, 34, .14); }
.pc-hs-tile.active { box-shadow: 0 0 0 3px var(--pc-ink); }

.pc-hs-tile-media {
  width: 74px; height: 74px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center;
}
.pc-hs-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.pc-hs-tile-media .pc-icon { color: currentColor; opacity: .8; }

.pc-hs-tile-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-hs-tile-name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.pc-hs-tile-cta { font-size: 12px; font-weight: 800; opacity: .85; text-decoration: underline; }

/* ---------- Dots (mobile) ---------- */
.pc-hs-dots { display: none; grid-column: 1 / -1; justify-content: center; gap: 8px; padding-top: 4px; }
.pc-hs-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--pc-border2);
}
.pc-hs-dot.active { background: var(--pc-ink); width: 24px; border-radius: 100px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pc-hs { grid-template-columns: minmax(0, 1fr) 250px; }
  .pc-hs-title { font-size: 32px; -webkit-line-clamp: 2; }
  .pc-hs-slide { padding: 34px; }
  .pc-hs-media img { max-height: 260px; }
}
@media (max-width: 900px) {
  .pc-hs { grid-template-columns: 1fr; }
  .pc-hs-stage { min-height: 380px; }
  .pc-hs-side { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
}
@media (max-width: 620px) {
  .pc-hs-stage { min-height: 0; }
  .pc-hs-slide {
    position: relative; grid-template-columns: 1fr; padding: 26px; gap: 16px;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .pc-hs-slide.active { display: grid; }
  .pc-hs-title { font-size: 26px; -webkit-line-clamp: 3; }
  .pc-hs-text { font-size: 15px; margin-bottom: 18px; }
  .pc-hs-media { order: -1; }
  .pc-hs-media img { max-height: 190px; }
  .pc-hs-side { display: none; }
  .pc-hs-dots { display: flex; }
}

/* ---------- Hero ---------- */
.pc-hero { padding-top: 40px; padding-bottom: 8px; }
.pc-hero-card {
  background: var(--pc-yellow-soft); border-radius: var(--pc-radius-lg); padding: 52px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden; min-height: 419px;
}
.pc-hero-pill {
  align-self: flex-start; background: var(--pc-surface); color: var(--pc-teal); font-weight: 800;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px; margin-bottom: 20px;
}
.pc-hero-card h1 { font-size: 52px; line-height: 1.04; margin: 0 0 18px; }
.pc-hero-card p { font-size: 18px; line-height: 1.6; color: var(--pc-muted); margin: 0 0 28px; max-width: 430px; }
.pc-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pc-hero-mark {
  position: absolute; opacity: .5; width: 236px; height: 232px;
  right: -60px; bottom: -80px; pointer-events: none;
}

/* ---------- Advice teaser ----------
   The band clips its own glow layer, so it needs enough vertical room for the
   cards that stand proud of the teal panel — otherwise they get cut off.
   ------------------------------------------------------------------------ */
.pc-band-teaser > .pc-wrap { padding-top: 170px; padding-bottom: 170px; }

/* The panel is narrower than the section, so the card grid can sit across its
   right edge. The cards are positioned out of flow, so the teal block is
   exactly as tall as its own text — nothing else feeds its height. */
.pc-teaser {
  position: relative;
  background: var(--pc-teal); border-radius: var(--pc-radius-lg);
  padding: 40px 44px; color: #fff; width: 82%;
}
.pc-teaser > div:first-child { max-width: 50%; }
.pc-teaser .pc-kicker { color: var(--pc-teal-soft); }
.pc-teaser h2 { font-size: 36px; margin: 0 0 14px; line-height: 1.1; color: #fff; }
.pc-teaser p { font-size: 16px; line-height: 1.6; color: #D8E8EB; margin: 0 0 22px; }

/* Tip cards: solid cards sitting over the teal panel and breaking past its
   top, right and bottom edges. The panel must not clip them. */
.pc-teaser { overflow: visible; }
.pc-tip-grid {
  position: absolute; top: 50%; right: -26%; transform: translateY(-50%);
  width: 54%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch;
}

.pc-tip-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pc-surface); border: 1px solid var(--pc-border);
  border-radius: 18px; color: var(--pc-ink);
  box-shadow: 0 2px 4px rgba(20, 45, 52, .10), 0 14px 30px rgba(20, 45, 52, .22);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.pc-tip-card:hover {
  color: var(--pc-ink); transform: translateY(-5px); border-color: var(--pc-border2);
  box-shadow: 0 4px 8px rgba(20, 45, 52, .12), 0 22px 44px rgba(20, 45, 52, .28);
}

.pc-tip-media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 2 / 1; overflow: hidden; flex: none;
  background: var(--pc-yellow-soft);
}
.pc-tip-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.pc-tip-card:hover .pc-tip-media img { transform: scale(1.07); }
.pc-tip-icon { display: flex; opacity: .45; color: var(--pc-ink); }

.pc-tip-body { padding: 12px 14px 13px; display: flex; flex-direction: column; flex: 1; }
.pc-tip-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pc-teal); margin-bottom: 6px;
}
.pc-tip-title {
  font-weight: 700; font-size: 14px; line-height: 1.32; color: var(--pc-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-tip-meta { margin-top: auto; padding-top: 6px; font-size: 11px; color: var(--pc-muted2); font-weight: 700; }

/* Scroll-in (JS adds .is-in) */
.pc-tip-card { opacity: 0; transform: translateY(18px); }
.pc-tip-card.is-in { opacity: 1; transform: none; }
.pc-tip-card.is-in:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .pc-tip-card { opacity: 1; transform: none; }
}

/* ==========================================================================
   Newsletter — copy left, Ninja Form right
   ========================================================================== */
.pc-news {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
  border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg);
  background: var(--pc-surface); padding: 40px 44px;
  box-shadow: 0 1px 2px rgba(46, 42, 34, .04), 0 12px 30px rgba(46, 42, 34, .07);
}
.pc-news-copy h2 { font-size: 32px; margin: 0 0 10px; line-height: 1.15; }
.pc-news-copy p { font-size: 16px; line-height: 1.65; color: var(--pc-muted); margin: 0; max-width: 460px; }

.pc-news-note { font-size: 12px; color: var(--pc-muted2); margin: 12px 0 0; line-height: 1.5; }
.pc-news-fallback { font-size: 16px; color: var(--pc-muted); margin: 0; }

/* ---------- Ninja Forms inside the newsletter block ---------- */
.pc-news-form .nf-form-fields-required,
.pc-news-form .nf-field-label label { display: none; }
.pc-news-form .nf-form-content { padding: 0; max-width: none; }
.pc-news-form .nf-field-container { margin-bottom: 10px; }
.pc-news-form input[type="text"],
.pc-news-form input[type="email"] {
  width: 100%; padding: 15px 17px !important; height: auto !important;
  border: 1px solid var(--pc-border2) !important; border-radius: 12px !important;
  font-family: var(--pc-sans) !important; font-size: 15px !important;
  background: var(--pc-surface) !important; color: var(--pc-ink) !important;
}
.pc-news-form input:focus { border-color: var(--pc-teal) !important; }
.pc-news-form input[type="button"],
.pc-news-form input[type="submit"],
.pc-news-form button[type="submit"] {
  width: 100%; background: var(--pc-ink) !important; color: var(--pc-bg) !important;
  border: none !important; border-radius: 12px !important; padding: 15px 26px !important;
  font-family: var(--pc-sans) !important; font-weight: 800 !important; font-size: 16px !important;
  cursor: pointer;
}
.pc-news-form input[type="button"]:hover { background: var(--pc-ink-soft) !important; }
.pc-news-form .nf-error-msg { color: #C0562E; font-size: 13px; font-weight: 700; }
.pc-news-form .nf-response-msg {
  background: var(--pc-teal-soft); color: var(--pc-teal-dark);
  border-radius: 12px; padding: 14px 16px; font-weight: 700;
}

/* ---------- Tools teaser ---------- */
.pc-tools-teaser {
  border: 2px dashed var(--pc-border2); border-radius: 24px; padding: 34px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap; background: var(--pc-surface2);
}
.pc-tools-teaser h2 { font-size: 30px; margin: 0 0 8px; }
.pc-tools-teaser p { color: var(--pc-muted); margin: 0; font-size: 16px; }
.pc-tools-teaser > div { flex: 1; min-width: 260px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .pc-teaser { width: 86%; padding: 34px; }
  .pc-teaser > div:first-child { max-width: 52%; }
  .pc-tip-grid { right: -16%; width: 56%; }
}
@media (max-width: 900px) {
  .pc-hero-card { padding: 36px; min-height: 0; }
  .pc-hero-card h1 { font-size: 40px; }

  /* Stacked — back in flow, nothing overhanging, so no extra room needed. */
  .pc-band-teaser > .pc-wrap { padding-top: 52px; padding-bottom: 52px; }
  .pc-news { grid-template-columns: 1fr; gap: 24px; padding: 30px; }
  .pc-news-copy h2 { font-size: 26px; }
  .pc-teaser { width: 100%; padding: 32px; }
  .pc-teaser > div:first-child { max-width: none; }
  .pc-tip-grid {
    position: static; transform: none; width: auto; margin-top: 26px;
  }
}
@media (max-width: 620px) {
  .pc-hero-card { padding: 28px; }
  .pc-hero-card h1 { font-size: 32px; }
  .pc-hero-card p { font-size: 16px; }
  .pc-hero-cta .pc-btn { flex: 1; }
  .pc-tip-grid { grid-template-columns: 1fr; }
  .pc-tools-teaser { padding: 26px; }
}

/* ==========================================================================
   Reviews slider — "Loved by parents"
   The [cusrev_reviews_slider] shortcode owns the slider mechanics (track,
   dots, autoplay), so nothing here sets `display` or `position` on its
   elements — colours come in via shortcode parameters and only surface,
   type and spacing are adjusted below.
   ========================================================================== */
.pc-section-head-center { justify-content: center; text-align: center; }

.pc-home-reviews { margin-top: 6px; }
.pc-home-reviews .cr-review-card,
.pc-home-reviews .cr-slider-review {
  border-radius: var(--pc-radius-sm);
  box-shadow: 0 2px 12px rgba(46, 42, 34, .06);
}
.pc-home-reviews .cr-comment-text { font-size: 15px; line-height: 1.6; color: #4C463A; }
.pc-home-reviews .woocommerce-review__author { font-weight: 800; color: var(--pc-ink); }
.pc-home-reviews .woocommerce-review__published-date,
.pc-home-reviews .cr-meta-author-featured-date { color: var(--pc-muted2); font-size: 13px; }
.pc-home-reviews .woocommerce-review__verified { color: var(--pc-teal); font-weight: 700; font-size: 13px; }
.pc-home-reviews .cr-comment-productname-a,
.pc-home-reviews .iv-comment-product-a { color: var(--pc-teal); font-weight: 700; font-size: 13px; }

/* Slider dots picked out in brand colours. */
.pc-home-reviews .slick-dots li button:before,
.pc-home-reviews .cr-slider-dot { color: var(--pc-border2); }
.pc-home-reviews .slick-dots li.slick-active button:before,
.pc-home-reviews .cr-slider-dot.cr-active { color: var(--pc-teal); }

/* ==========================================================================
   Product video reel — "Watch before you buy"
   Uses the shared PCUtil.carousels markup (.pc-cat-rail / .pc-cat-slide /
   .pc-rail-btn) for the arrows; layout and cards are styled here.
   ========================================================================== */
.pc-reel-nav { display: flex; gap: 8px; }
.pc-reel-nav .pc-rail-btn {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--pc-border); background: var(--pc-surface); color: var(--pc-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.pc-reel-nav .pc-rail-btn:hover:not(:disabled) { background: var(--pc-yellow); }
.pc-reel-nav .pc-rail-btn:disabled { opacity: .4; cursor: default; }

.pc-reel {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 18px * 4) / 5);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.pc-reel::-webkit-scrollbar { display: none; }
.pc-reel-card {
  scroll-snap-align: start; min-width: 0;
  background: var(--pc-surface); border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-sm); overflow: hidden;
  box-shadow: 0 3px 16px rgba(46, 42, 34, .06);
  display: flex; flex-direction: column;
}
.pc-reel-media { aspect-ratio: 9 / 16; background: #111; }
.pc-reel-media iframe,
.pc-reel-media video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

.pc-reel-product {
  display: flex; align-items: center; gap: 10px; padding: 12px; color: var(--pc-ink);
  border-top: 1px solid var(--pc-border);
}
.pc-reel-product:hover .pc-reel-name { color: var(--pc-teal); }
.pc-reel-thumb { flex: none; width: 42px; height: 42px; border-radius: 9px; overflow: hidden; background: var(--pc-surface2); }
.pc-reel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-reel-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-reel-name {
  font-size: 13px; font-weight: 700; line-height: 1.3; transition: color .15s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-reel-price { font-size: 13px; font-weight: 800; color: var(--pc-teal); }
.pc-reel-price del { color: var(--pc-muted3); font-weight: 600; margin-right: 4px; }
.pc-reel-price ins { text-decoration: none; }

@media (max-width: 1100px) { .pc-reel { grid-auto-columns: calc((100% - 18px * 2) / 3); } }
@media (max-width: 620px)  { .pc-reel { grid-auto-columns: 72%; gap: 14px; } }