/**
 * Custom (non-Elementor) product template — styling foundation.
 *
 * STANDARD (see docs/product-page-styling.md):
 *  - All spacing/radii/color come from the design tokens below. No raw px for
 *    spacing/gap/padding/margin anywhere except these :root definitions —
 *    enforced by .stylelintrc.json.
 *  - Components use BEM under the `nf-pdp` / `nf-` namespace so nothing leaks
 *    into Elementor or the theme during the mixed migration.
 *  - Loaded ONLY on the product template (ProductTemplate module, product flag).
 *    Scoped reset lives under .nf-pdp so it can't touch the global theme.
 *
 * Tokens are authored here for now (product-only). When this is promoted to
 * other page types, extract this :root block into a shared assets/.../ui/tokens.css.
 */

:root {
  /* Spacing scale (4px base) — the single source of truth for gaps/margins/padding */
  --nf-space-3xs: 4px;
  --nf-space-2xs: 8px;
  --nf-space-xs: 12px;
  --nf-space-sm: 16px;
  --nf-space-md: 24px;
  --nf-space-lg: 32px;
  --nf-space-xl: 48px;
  --nf-space-2xl: 64px;

  /* Radii */
  --nf-radius-sm: 6px;
  --nf-radius: 8px;
  --nf-radius-lg: 16px;

  /* Layout */
  --nf-pdp-max: 1680px;
  --nf-pdp-gutter: var(--nf-space-sm);
  --nf-pdp-hero-gap: var(--nf-space-lg);
  --nf-pdp-section-gap: var(--nf-space-xl);

  /* Typography */
  --nf-font-size-title: clamp(1.6rem, 2.5vw, 2.2rem);

  /* Color — PLACEHOLDERS; confirm exact Nutrisslim brand values before section migration */
  --nf-color-text: #1a1a1a;
  --nf-color-muted: #6b7280;
  --nf-color-border: #e5e7eb;
  --nf-color-surface: #f7f7f7;
  --nf-color-band: #f5f5f5;
  --nf-color-gift-bg: #ebebeb;
  --nf-color-accent: #1fb25a;
  --nf-color-dark: #000000;
  --nf-color-on-dark: #ffffff;
  --nf-color-on-accent: #ffffff;
}

/* Scoped reset — confined to the custom template root so it never touches the theme. */
.nf-pdp,
.nf-pdp *,
.nf-pdp *::before,
.nf-pdp *::after {
  box-sizing: border-box;
}

.nf-pdp {
  max-width: var(--nf-pdp-max);
  margin: 0 auto;
  padding: 0 var(--nf-pdp-gutter) var(--nf-space-2xl);
}

/* Full-bleed bands (badges/ingredients) break out of the centered .nf-pdp box
   with width:100vw + negative inline margins. .nf-pdp must NOT clip horizontally,
   or it would crop those bands — and the slider arrows positioned at the band
   edges — to its max-width on screens wider than --nf-pdp-max (the white-gutter /
   missing-arrow bug on big screens). Contain the resulting ~scrollbar-width
   overflow at the page root with overflow-x: clip — clip, not hidden, so it never
   creates a scroll container that would break position: sticky. Scoped to product
   pages: this file only loads on the custom product template. */
html,
body {
  overflow-x: clip;
}

.nf-pdp__breadcrumb {
  margin: var(--nf-space-sm) 0 var(--nf-space-md);
}

/* Hero: fluid flex-wrap. The three columns sit on one row when there's room
   and wrap to new lines when there isn't. flex-basis sets each column's ideal
   width; once the row can't fit them, the trailing column(s) wrap and the
   remaining ones grow to fill — so the gallery image never shrinks to a tiny
   thumbnail and gets larger as columns wrap. */
.nf-pdp__hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nf-pdp-hero-gap);
  align-items: flex-start;
}

.nf-pdp__hero-col {
  min-width: 0;
}

/* Fixed-width gallery: the product image stays one constant size instead of
   scaling with the viewport. It never grows/shrinks with the flex row (so it
   isn't tiny next to the details/ATC columns, and doesn't blow up to full width
   once it wraps to its own row); it only caps to 100% on phones narrower than
   the fixed width. */
.nf-pdp__hero-gallery {
  flex: 0 0 auto;
  width: 380px;
  max-width: 100%;
}

.nf-pdp__hero-details {
  flex: 1.3 1 360px;
}

.nf-pdp__hero-atc {
  flex: 1 1 300px;
}

.nf-pdp__title {
  margin: 0 0 var(--nf-space-3xs);
  font-size: var(--nf-font-size-title);
}

.nf-pdp__disclaimer {
  margin: 0 0 var(--nf-space-sm);
  color: var(--nf-color-muted);
  font-size: 14px;
}

.nf-pdp__section {
  margin-top: var(--nf-pdp-section-gap);
}

/* Repeated hero (after product FAQ) — same grid as top hero, spaced from prior section */
.nf-pdp__hero--repeat {
  margin-top: var(--nf-pdp-section-gap);
}

/* Full-bleed bands that sit back-to-back must not leave a white stripe from
   .nf-pdp__section margin between them. */
.nf-pdp__section:has(
    > .nf-pdp__guarantee,
    > .nf-product-bottom-features,
    > .nf-pdp__stats,
    > .nf-badges-swiper,
    > .nf-content-slider[data-content-type="ingredient"]
  )
  + .nf-pdp__section:has(
    > .nf-pdp__guarantee,
    > .nf-product-bottom-features,
    > .nf-pdp__stats,
    > .nf-badges-swiper,
    > .nf-content-slider[data-content-type="ingredient"]
  ) {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Vertical rhythm — legacy widget CSS carries Elementor-era outer margins.
   Inside the custom template, .nf-pdp__section owns section-to-section spacing;
   direct children lose block-start/block-end margins so gaps stay uniform.
   -------------------------------------------------------------------------- */

.nf-pdp__hero-col {
  display: flex;
  flex-direction: column;
  gap: var(--nf-space-sm);
}

.nf-pdp__hero-col > * {
  margin-block: 0;
}

.nf-pdp__hero .product-short-description {
  margin: 0;
  padding-top: 0;
}

.nf-pdp div.mainReview {
  padding-left: 0;
}

.nf-pdp__hero .qaa-accordion-wrapper {
  margin: 0;
}

.nf-pdp__section > .pqa-accordion,
.nf-pdp__section > .nf-content-slider,
.nf-pdp__section > .nf-media-content,
.nf-pdp__section > .nf-procons,
.nf-pdp__section > .product-faq,
.nf-pdp__section > .nf-faq-title,
.nf-pdp__section > .nf-review-cumulative,
.nf-pdp__section > .qaa-accordion-wrapper,
.nf-pdp__section > .nf-pdp__traceability,
.nf-pdp__section > .nf-pdp__brand-story,
.nf-pdp__section > .nf-pdp__experts,
.nf-pdp__section > .nf-pdp__we-are-nature,
.nf-pdp__section > .nf-badges-swiper,
.nf-pdp__section > .nf-pdp__guarantee,
.nf-pdp__section > .nf-pdp__stats,
.nf-pdp__section > .nf-product-bottom-features {
  margin-block: 0;
}

.nf-pdp__section > .pqa-accordion {
  margin-inline: 0;
}

.nf-pdp__section > .nf-faq-title {
  margin-bottom: var(--nf-space-md);
  text-align: center;
}

.nf-pdp__section .nf-procons.list-section h2 {
  margin: 0 0 var(--nf-space-md);
}

/* Cap the pros/cons middle image so it stays balanced on wide screens
   (the column is 30% of the row, which gets oversized past ~1200px). */
.nf-pdp__section .nf-procons .middle-img img {
  max-width: 280px;
  height: auto;
}

.nf-pdp__section .product-faq {
  margin-top: 0 !important;
}

.nf-pdp__section .nf-media-content .option-row {
  margin-bottom: var(--nf-space-md);
}

.nf-pdp__section .nf-media-content .option-row:last-child {
  margin-bottom: 0;
}

.nf-pdp__section .nf-media-content .media-banner-section {
  margin-top: var(--nf-space-md);
}

.nf-pdp__section .nf-media-content .description_text {
  width: auto;
  margin-top: 0;
  margin-inline: 0;
}

.nf-pdp__section .nf-media-content .media-content-subsection-single {
  margin-top: var(--nf-space-md);
  margin-inline: 0;
}

.nf-pdp
  .nf-content-slider[data-content-type="ingredient"]
  .aa-ingredients-title {
  margin-top: 0;
  margin-bottom: var(--nf-space-xl);
  font-size: var(--nf-font-size-title);
  font-weight: 500;
  line-height: 1.2;
}

/* Trusted reviews carousel (TrustedReviewsRenderer / nf-trusted-review-widget).
   Widget CSS is enqueued by ProductTemplate; these overrides position nav arrows
   inside the .nf-pdp container instead of at -50px (which breaks outside max-width). */
.nf-pdp__section--reviews > .prs-reviews-title,
.nf-pdp__section > .prs-reviews-title {
  margin: 0 0 var(--nf-space-sm);
  text-align: center;
  font-size: var(--nf-font-size-title);
  /* This h2 is the #reviewsanchor scroll target. Offset so the fixed
     .nf-site-header (~105px) doesn't overlap the scrolled-to position. */
  scroll-margin-top: calc(var(--nf-space-2xl) + var(--nf-space-xl));
}

.nf-pdp__section--reviews > #nf-product-reviews {
  margin-top: var(--nf-space-sm);
  /* Keep the review list (names, stars, divider lines) off the screen edges —
     the .nf-pdp gutter alone is too tight on narrow viewports. */
  padding-inline: var(--nf-space-md);
}

.nf-pdp__section > .nf-prs,
.nf-pdp__section--reviews > .nf-prs {
  margin-block: 0;
}

.nf-pdp .nf-prs.prs-review-summary-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--nf-space-md);
  padding: var(--nf-space-sm) 0 var(--nf-space-xs);
  overflow: visible;
}

.nf-pdp .prs-review-left {
  gap: var(--nf-space-xs);
}

.nf-pdp .prs-rating-summary {
  gap: var(--nf-space-2xs);
}

/* Slider gutter just wide enough to hold the 45px nav arrows so they sit beside
   the cards (never over them). Smaller than before so the cards are a bit larger. */
.nf-pdp .prs-review-right {
  padding-inline: var(--nf-space-xl);
}

.nf-pdp .prs-nav-arrow-left {
  left: 0;
}

.nf-pdp .prs-nav-arrow-right {
  right: 0;
}

/* Gift widget — styles were scoped to .elementor-widget-gift_widget on Elementor pages. */
.nf-pdp__gift {
  padding: var(--nf-space-2xs);
  background-color: var(--nf-color-gift-bg);
}

.nf-pdp__gift.grid-middle-noGutter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.nf-pdp__gift .gitftTitle {
  flex: 1 1 auto;
  min-width: 0;
}

.nf-pdp__gift .gitftTitle h3 {
  line-height: 1.35;
  font-size: 1.3125rem;
  display: flex;
  align-items: center;
  padding-left: 3.6875rem;
  position: relative;
  margin: 0;
}

.nf-pdp__gift .gitftTitle h3::before {
  content: "";
  width: 3.25rem;
  height: 3.25rem;
  left: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  display: block;
}

.nf-pdp__gift .gitftTitle p {
  font-weight: 300;
  font-size: 0.875rem;
  padding-left: 3.6875rem;
  margin: 0;
}

.nf-pdp__gift .gitftTitle p:last-child {
  margin-bottom: 0;
}

.nf-pdp__gift .gitftImg {
  flex: 0 0 10rem;
  max-width: 10rem;
}

.nf-pdp__gift .gitftImg img.img-responsive {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .nf-pdp__gift.grid-middle-noGutter {
    gap: var(--nf-space-xs);
  }

  .nf-pdp__gift .gitftImg {
    flex: 0 0 38%;
    max-width: 38%;
  }

  .nf-pdp__gift .gitftTitle h3 br {
    display: none;
  }

  .nf-pdp__gift .gitftTitle p {
    padding-left: 0;
  }
}

/* Cumulative review summary (ReviewCumulativeRenderer / NfReviewCumulative widget).
   The shared widget CSS (assets/modules/nf-review-cumulative) lays out the three
   columns; here we shrink-wrap and center the block so it reads like the legacy
   Elementor widget container instead of stretching across the full --nf-pdp-max
   section. Breakdown bars are pinned to a compact width so they don't fan out. */
.nf-pdp .nf-review-cumulative {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

@media (min-width: 769px) {
  .nf-pdp .nf-review-cumulative__content {
    flex: 0 1 auto;
  }
  .nf-pdp .nf-review-cumulative__breakdown {
    flex: 0 0 240px;
    min-width: 0;
  }
}

/* On narrow phones the widget's min-widths (content 300px, breakdown 200px,
   header 150px) exceed the available width, so the block overflows to the
   right and looks off-center. Drop them so the centered flex column fits. */
@media (max-width: 768px) {
  .nf-pdp .nf-review-cumulative__content,
  .nf-pdp .nf-review-cumulative__header,
  .nf-pdp .nf-review-cumulative__breakdown {
    min-width: 0;
  }
  /* Widen the breakdown so the rating bars aren't stubby in the stacked layout
     (the widget caps it at 60%). */
  .nf-pdp .nf-review-cumulative__breakdown {
    width: 85%;
  }
}

/* The widget stacks the summary into a centered single column at <=768px, which
   leaves a lot of empty side space on mid-size screens. Keep the row layout
   down to ~600px so it only stacks on real phones. */
@media (min-width: 601px) and (max-width: 768px) {
  .nf-pdp .nf-review-cumulative {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    text-align: left;
  }
  .nf-pdp .nf-review-cumulative__header {
    width: auto;
    text-align: left;
  }
  .nf-pdp .nf-review-cumulative__content {
    flex-direction: row;
    align-items: flex-start;
  }
  .nf-pdp .nf-review-cumulative__rating {
    align-items: flex-start;
  }
  .nf-pdp .nf-review-cumulative__average {
    justify-content: flex-start;
  }
  /* Let the breakdown column grow so the rating bars are long enough to read,
     instead of shrinking to their (short) content width. */
  .nf-pdp .nf-review-cumulative__breakdown {
    flex: 1 1 260px;
    width: auto;
    min-width: 220px;
  }
}

/* Mobile: slightly tighter gap once the columns have stacked. The flex-wrap
   on .nf-pdp__hero handles the actual column wrapping fluidly (no fixed
   column counts), so no grid breakpoints are needed here. */
@media (max-width: 768px) {
  .nf-pdp__hero {
    gap: var(--nf-space-md);
  }
  /* Once stacked, center the fixed-width product image in the row. */
  .nf-pdp__hero-gallery {
    margin-inline: auto;
  }
}

/* ==========================================================================
   Static marketing blocks (no ACF / no product data) — see
   src/Shared/ProductPage/Render/{Traceability,Guarantee,BrandStory,
   BrandStats,Experts,WeAreNature}Renderer.php
   ========================================================================== */

/* Full-bleed helper: break a colored banner out of the .nf-pdp max-width box. */
.nf-pdp__guarantee,
.nf-pdp__stats-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Badge carousel — full-bleed green band on the section wrapper (matches the
   legacy Elementor section). The localized badge SVGs are white, so they're
   invisible without this band.

   Full-bleed is driven by the .nf-pdp__section--badges modifier class (added by
   the product template) so it does NOT depend on :has() — browsers without :has
   support would otherwise leave the section at the .nf-pdp max-width (centered
   white gutters on screens wider than --nf-pdp-max). The :has() selector is kept
   as a defensive fallback. max-width:none guards against any inherited cap. */
.nf-pdp__section--badges,
.nf-pdp__section:has(> .nf-badges-swiper) {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  background: var(--nf-color-accent);
  padding-block: var(--nf-space-sm);
  content-visibility: visible;
  contain: none;
}

.nf-pdp .nf-badges-swiper {
  width: 100%;
  margin-inline: 0;
  background: transparent;
}

.nf-pdp .nf-badges-swiper .swiper-slide .inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Legacy rule uses width: 30% but the slide has no fixed width, so SVGs render
   at intrinsic size — cap them to match production (~80px). */
.nf-pdp .nf-badges-swiper img {
  width: auto !important;
  max-width: 7rem;
  max-height: 7rem;
  height: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .nf-pdp .nf-badges-swiper img {
    max-width: 8rem;
    max-height: 5.5rem;
  }
}

/* Ingredient slider — full-bleed light band on the section wrapper (not the
   slider child) so WP Rocket lazy-render paint containment does not clip the
   gray background. White cards with grey gaps between slides (Swiper
   spaceBetween — see nf-content-slider/js/widget.js).

   Full-bleed is driven by the .nf-pdp__section--ingredients modifier class
   (added by the product template) so it does NOT depend on :has() — see the
   badge band note above. The :has() selector is kept as a defensive fallback;
   max-width:none guards against any inherited cap. */
.nf-pdp__section--ingredients,
.nf-pdp__section:has(> .nf-content-slider[data-content-type="ingredient"]) {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  background: var(--nf-color-band);
  padding-block: calc(var(--nf-space-2xl) + var(--nf-space-md));
  content-visibility: visible;
  contain: none;
}

.nf-pdp .nf-content-slider[data-content-type="ingredient"] {
  width: 100%;
  margin-inline: 0;
  background: transparent;
}

/* The band bleeds full width, but keep the cards within the page container so
   they don't run to the viewport edges. Floor keeps room for the nav arrows
   inside the grey band. Desktop only — mobile keeps the full-width layout. */
@media (min-width: 769px) {
  .nf-pdp__section--ingredients,
  .nf-pdp__section:has(> .nf-content-slider[data-content-type="ingredient"]) {
    padding-inline: max(
      var(--nf-space-2xl),
      calc((100vw - var(--nf-pdp-max)) / 2)
    );
  }
}

.nf-pdp
  .nf-content-slider[data-content-type="ingredient"]
  .aa-ingredient-swiper-wrapper {
  position: relative;
  overflow: hidden;
  padding-inline: var(--nf-space-2xl);
  margin-inline: 0;
}

.nf-pdp
  .nf-content-slider[data-content-type="ingredient"]
  .aa-ingredient-swiper-wrapper
  .swiper-container {
  overflow: hidden !important;
}

.nf-pdp
  .nf-content-slider[data-content-type="ingredient"]
  .swiper-container
  .swiper-wrapper {
  justify-content: flex-start !important;
}

.nf-pdp
  .nf-content-slider[data-content-type="ingredient"]
  .swiper-slide.aa-ingredient-item {
  height: auto;
  box-sizing: border-box;
}

.nf-pdp .nf-content-slider[data-content-type="ingredient"] .ingredincenprev {
  left: 0;
}

.nf-pdp .nf-content-slider[data-content-type="ingredient"] .ingredincennext {
  right: 0;
}

@media (max-width: 768px) {
  .nf-pdp__section--ingredients,
  .nf-pdp__section:has(> .nf-content-slider[data-content-type="ingredient"]) {
    padding-block: var(--nf-space-2xl);
    overflow: hidden;
  }

  .nf-pdp .nf-content-slider[data-content-type="ingredient"] {
    overflow: hidden !important;
  }

  .nf-pdp
    .nf-content-slider[data-content-type="ingredient"]
    .aa-ingredient-swiper-wrapper {
    padding-inline: 0;
    overflow: hidden !important;
  }

  .nf-pdp
    .nf-content-slider[data-content-type="ingredient"]
    .aa-ingredient-swiper-wrapper
    .swiper-container {
    overflow: hidden !important;
  }

  .nf-pdp
    .nf-content-slider[data-content-type="ingredient"]
    .swiper-slide.aa-ingredient-item {
    width: 100% !important;
  }

  .nf-pdp
    .nf-content-slider[data-content-type="ingredient"]
    .swiper-slide
    .inner {
    max-width: 100% !important;
    /* Keep the title/description clear of the edge-positioned arrows. Uses
       !important to beat the widget's `padding-left/right: 0 !important` mobile
       reset (nf-content-slider/css/style.css @media max-width:767px). */
    padding-left: calc(var(--nf-space-md) + var(--nf-space-3xs)) !important;
    padding-right: calc(var(--nf-space-md) + var(--nf-space-3xs)) !important;
  }
}

/* Bottom product features (image + check-list + ATC) — full-bleed light band,
   content kept within the page container (same pattern as the ingredient slider).
   Overrides the block's own `margin: 0 -10px` to break out of the container. */
.nf-pdp .nf-product-bottom-features {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--nf-color-band);
  padding-block: var(--nf-space-xl);
}

@media (min-width: 769px) {
  .nf-pdp .nf-product-bottom-features {
    padding-inline: max(
      var(--nf-space-2xl),
      calc((100vw - var(--nf-pdp-max)) / 2)
    );
  }
}

/* Bottom-features product image: one constant size instead of scaling with the
   50% column. The shared widget CSS sets the image to width:500px capped by the
   theme's img{max-width:100%}, plus a 250px left indent — so it renders small on
   desktop and stretches full-bleed on mobile. Scope a fixed width to .nf-pdp so
   production Elementor pages keep their own layout. */
.nf-pdp .nf-product-bottom-features .imagePart {
  padding-left: var(--nf-space-sm) !important;
}

.nf-pdp .nf-product-bottom-features .imagePart img {
  width: 380px !important;
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .nf-pdp .nf-product-bottom-features .imagePart img {
    width: 300px !important;
    margin-inline: auto;
  }
}

/* Product FAQ — the column card layout (centered icon over title over answer)
   is scoped to .elementor-widget-nf_product_faq in the shared FAQ CSS, so the
   custom template falls back to the row layout. Restore the stacked layout. */
.nf-pdp .product-faq .faq-item {
  flex-direction: column;
}

.nf-pdp .product-faq .faqGrid .swiper-wrapper .faq-item,
.nf-pdp .product-faq .swiper-slide.faq-item {
  padding: 0;
  background-color: var(--nf-color-band);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nf-pdp .product-faq .faq-answer p {
  padding-inline: var(--nf-space-2xl);
  padding-bottom: var(--nf-space-sm);
}

@media (min-width: 1024px) {
  .nf-pdp .product-faq .faqGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nf-space-sm);
  }

  .nf-pdp .product-faq .faqGrid .swiper-wrapper {
    display: contents !important;
  }

  .nf-pdp .product-faq .faqGrid .swiper-slide {
    width: 100% !important;
    flex-shrink: 0;
    height: auto;
  }
}

/* --- A. Traceability --------------------------------------------------- */
.nf-pdp__traceability {
  text-align: center;
}

.nf-pdp__traceability-heading {
  margin: 0 0 var(--nf-space-sm);
  font-size: var(--nf-font-size-title);
}

.nf-pdp__traceability-intro {
  margin: 0 auto var(--nf-space-lg);
  color: var(--nf-color-text);
}

.nf-pdp__traceability-items {
  display: flex;
  gap: var(--nf-space-lg);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nf-pdp__traceability-item {
  flex: 1 1 0;
  max-width: 22rem;
}

.nf-pdp__traceability-icon {
  width: var(--nf-space-2xl);
  height: var(--nf-space-2xl);
  margin: 0 auto var(--nf-space-2xs);
  object-fit: contain;
}

.nf-pdp__traceability-title {
  margin: 0 0 var(--nf-space-3xs);
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.nf-pdp__traceability-desc {
  margin: 0;
  color: var(--nf-color-muted);
}

/* --- B. 60-day guarantee ---------------------------------------------- */
.nf-pdp__guarantee {
  display: flex;
  gap: var(--nf-space-md);
  align-items: center;
  justify-content: center;
  padding: var(--nf-space-md) var(--nf-pdp-gutter);
  background: var(--nf-color-accent);
  color: var(--nf-color-on-accent);
}

.nf-pdp__guarantee-seal {
  flex: 0 0 auto;
  width: 9.375rem;
  height: auto;
}

.nf-pdp__guarantee-text {
  max-width: 90ch;
  color: var(--nf-color-on-accent);
  text-align: center;
}

.nf-pdp__guarantee-heading {
  margin: 0 0 var(--nf-space-2xs);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nf-color-on-accent);
}

.nf-pdp .nf-pdp__guarantee h2.nf-pdp__guarantee-heading {
  color: var(--nf-color-on-accent);
}

.nf-pdp__guarantee-body {
  margin: 0;
  color: var(--nf-color-on-accent);
  line-height: 1.5;
}

/* --- C. Brand story + #WeAreNature accordion -------------------------- */
.nf-pdp__brand-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nf-space-lg);
  align-items: center;
  background: var(--nf-color-surface);
  padding: var(--nf-space-lg);
  border-radius: var(--nf-radius-lg);
}

.nf-pdp__brand-story-logo {
  display: block;
  width: 100%;
  height: auto;
}

.nf-pdp__brand-story-item {
  border-bottom: 1px solid var(--nf-color-border);
}

.nf-pdp__brand-story-item:last-child {
  border-bottom: none;
}

.nf-pdp__brand-story-summary {
  padding: var(--nf-space-sm) 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.nf-pdp__brand-story-summary::-webkit-details-marker {
  display: none;
}

.nf-pdp__brand-story-summary::after {
  content: "+";
  float: right;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--nf-color-text);
}

.nf-pdp__brand-story-item[open] .nf-pdp__brand-story-summary::after {
  content: "\2212"; /* minus */
}

.nf-pdp__brand-story-body {
  padding: 0 0 var(--nf-space-sm);
  color: var(--nf-color-text);
}

/* --- D. Brand stats --------------------------------------------------- */
.nf-pdp__stats {
  text-align: center;
}

.nf-pdp__stats-heading {
  margin: 0 0 var(--nf-space-lg);
  font-size: var(--nf-font-size-title);
  color: var(--nf-color-text);
}

.nf-pdp__stats-band {
  padding: var(--nf-space-xl) var(--nf-pdp-gutter);
  background: var(--nf-color-dark);
  color: var(--nf-color-on-dark);
}

.nf-pdp__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--nf-space-md);
  max-width: var(--nf-pdp-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.nf-pdp__stats-item {
  display: flex;
  flex-direction: column;
  gap: var(--nf-space-2xs);
}

.nf-pdp__stats-value {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.nf-pdp__stats-label {
  font-weight: 300;
}

/* --- E. Experts ------------------------------------------------------- */
.nf-pdp__experts {
  text-align: center;
}

.nf-pdp__experts-heading {
  margin: 0 0 var(--nf-space-sm);
  font-size: var(--nf-font-size-title);
}

.nf-pdp__experts-intro {
  max-width: 80ch;
  margin: 0 auto var(--nf-space-lg);
}

.nf-pdp__experts-list {
  display: flex;
  gap: var(--nf-space-xl);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nf-pdp__experts-card {
  display: flex;
  flex-direction: column;
  gap: var(--nf-space-3xs);
}

.nf-pdp__experts-photo {
  width: 5rem;
  height: auto;
  margin: 0 auto var(--nf-space-2xs);
}

.nf-pdp__experts-name {
  font-size: 1.125rem;
  font-weight: 500;
}

.nf-pdp__experts-title {
  color: var(--nf-color-muted);
}

/* --- F. #WeAreNature -------------------------------------------------- */
.nf-pdp__we-are-nature {
  text-align: center;
}

.nf-pdp__we-are-nature-heading {
  margin: 0 0 var(--nf-space-2xs);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--nf-color-accent);
}

.nf-pdp .nf-pdp__we-are-nature h2.nf-pdp__we-are-nature-heading {
  color: var(--nf-color-accent);
}

.nf-pdp__we-are-nature-tagline {
  margin: 0 0 var(--nf-space-sm);
  font-size: 1.375rem;
  font-weight: 500;
}

.nf-pdp__we-are-nature-body {
  max-width: 80ch;
  margin: 0 auto;
  font-weight: 300;
}

/* Tablet */
@media (max-width: 1200px) {
  .nf-pdp__brand-story {
    grid-template-columns: 1fr;
  }
  .nf-pdp__brand-story-logo {
    width: 100%;
    height: auto;
    min-height: 180px;
    object-fit: cover;
    border-radius: var(--nf-radius);
  }
  .nf-pdp__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@keyframes nf-traceability-slide {
  0%,
  30% {
    transform: translateX(0);
  }
  33%,
  63% {
    transform: translateX(-100%);
  }
  66%,
  96% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}

/* Mobile */
@media (max-width: 768px) {
  nav.nf-pdp__breadcrumb nav {
    font-size: 14px;
  }

  .nf-pdp__disclaimer {
    margin-block-start: calc(-1 * var(--nf-space-xs));
  }

  .nf-pdp__traceability {
    overflow: hidden;
  }
  .nf-pdp__traceability-items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-start;
    overflow: visible;
    animation: nf-traceability-slide 9s infinite;
  }
  .nf-pdp__traceability-item {
    flex: 0 0 100%;
    max-width: none;
  }
  .nf-pdp__guarantee {
    flex-direction: column;
    text-align: center;
  }
  .nf-pdp__guarantee-heading {
    font-size: 18px;
  }
  .nf-pdp__brand-story {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--nf-pdp-gutter);
    border-radius: 0;
  }

  /* No white gap between the full-bleed stats band and the full-bleed
     brand-story band on mobile. */
  .nf-pdp__section:has(> .nf-pdp__stats)
    + .nf-pdp__section:has(> .nf-pdp__brand-story) {
    margin-top: 0;
  }

  /* "Big" option images (not the small icons) run edge to edge on mobile. */
  .nf-pdp .option-with-icons-wrapper .option-main-img {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    padding: 0 !important;
  }

  .nf-pdp .option-with-icons-wrapper .option-main-img img {
    width: 100%;
  }

  /* Text column: widen to the full content width (only the page gutter inset,
     so it's wider than before but not edge to edge like the image). Drop the
     widget's extra asymmetric paddings. */
  .nf-pdp .option-with-icons-wrapper .option-content {
    width: 100%;
    max-width: 100%;
    padding-right: 0 !important;
  }

  .nf-pdp .option-with-icons-wrapper .icon-text-item {
    padding-left: 0;
  }

  .nf-pdp__experts-list {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--nf-space-sm);
  }

  .nf-pdp__experts-card {
    flex: 1 1 0;
    min-width: 0;
  }

  .nf-pdp__experts-photo {
    width: 5rem;
    max-width: 100%;
  }

  /* Summary → filters → list, then review carousel last (no carousel between 4.8/5 and Popular topic) */
  .nf-pdp__section--reviews {
    display: flex;
    flex-direction: column;
  }

  .nf-pdp__section--reviews > .nf-prs.prs-review-summary-container {
    display: contents;
  }

  .nf-pdp__section--reviews > .prs-reviews-title {
    order: 0;
  }

  .nf-pdp__section--reviews .prs-review-left {
    order: 1;
  }

  /* Keep the review carousel ("Ocene strank") right after the 4,9/5 summary,
     before the full review list — it must not jump below the last reviews. */
  .nf-pdp__section--reviews .prs-review-right {
    order: 2;
    margin-top: var(--nf-space-md);
    padding-inline: var(--nf-space-sm);
  }

  /* The widget hard-codes 42px side margins on the swiper, leaving a wide gap
     between the card and the edge-positioned arrows. Tighten so the card sits
     just inside the ~32px mobile arrows. */
  .nf-pdp__section--reviews .prs-reviews-swiper.swiper {
    margin-inline: var(--nf-space-md) !important;
  }

  .nf-pdp__section--reviews > #nf-product-reviews {
    order: 3;
    margin-top: var(--nf-space-md);
  }

  .nf-pdp .prs-star,
  .nf-pdp .prs-review-card-stars {
    font-size: 18px;
  }
}

.nf-pdp .prs-star,
.nf-pdp .prs-review-card-stars {
  font-size: 20px;
}