/* ============================================================================
   Pecan & Petal. Homepage (FLOWERBX-style, luxury / minimal / editorial)
   Slice: homepage  .  Author: Facet
   ----------------------------------------------------------------------------
   PALETTE RULE: the central theme layer (mu-plugins/zzz-pnp-overrides.php) owns
   every color. This file NEVER hardcodes a palette hex. All color comes from:
     var(--pnp-bronze)       dark bands / buttons  (WHITE text on these)
     var(--pnp-bronze-dark)  button / link hover
     var(--pnp-peach)        page ground
     var(--pnp-coral)        Sale / Subscribe spark
     var(--pnp-ink)          body text on light
   Muted text, hairlines and image scrims are DERIVED from those via color-mix(),
   so a single palette retune in the central layer cascades everywhere here too.
   White (#fff) is used only for text on bronze bands and for card surfaces;
   rgba(0,0,0,x) is used only for shadows. Both are structural, not palette.
   ============================================================================ */

/* ---- scope + derived tokens ------------------------------------------------ */
.pnp-home{
  /* derived, palette-driven. Do not hardcode; retunes with the central layer */
  --pnp-muted:      color-mix(in srgb, var(--pnp-ink)   58%, var(--pnp-peach));
  --pnp-line:       color-mix(in srgb, var(--pnp-bronze) 20%, transparent);
  --pnp-line-soft:  color-mix(in srgb, var(--pnp-bronze) 12%, transparent);
  --pnp-surface:    #fff;                 /* card surface (structural white) */
  --pnp-peach-deep: color-mix(in srgb, var(--pnp-peach) 82%, var(--pnp-bronze));
  --pnp-scrim:      color-mix(in srgb, var(--pnp-ink) 42%, transparent);
  --pnp-scrim-hi:   color-mix(in srgb, var(--pnp-ink) 70%, transparent);
  --pnp-onbronze:   color-mix(in srgb, #fff 82%, var(--pnp-bronze)); /* soft white on bronze */

  --pnp-maxw: 1240px;
  --pnp-gap:  2rem;

  background: var(--pnp-peach);
  color: var(--pnp-ink);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: clip;
}
.pnp-home *,
.pnp-home *::before,
.pnp-home *::after{ box-sizing: border-box; }

.pnp-home h1,.pnp-home h2,.pnp-home h3,.pnp-home h4{
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  color: var(--pnp-ink);
  margin: 0;
}
.pnp-home p{ margin: 0; }
.pnp-home img{ max-width: 100%; display: block; }

/* full-bleed utility (self-contained; mirrors the theme's .hcf-fullbleed) */
.pnp-fullbleed{
  width: 100vw;
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}

/* shared inner container + section rhythm (generous editorial whitespace) */
.pnp-wrap{ max-width: var(--pnp-maxw); margin: 0 auto; padding: 0 var(--pnp-gap); }
.pnp-section{ padding: 5.5rem 0; }
.pnp-section--tight{ padding: 4rem 0; }

/* shared eyebrow + section heading */
.pnp-eyebrow{
  font-family: "Manrope", sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--pnp-bronze);
  margin: 0 0 .9rem;
}
.pnp-h2{ font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 500; line-height: 1.06; }
.pnp-lead{
  font-family: "Manrope", sans-serif;
  font-size: 1.06rem; line-height: 1.7; color: var(--pnp-muted);
}

/* shared buttons ------------------------------------------------------------
   Solid = bronze band + white text (matches the site button system).
   Ghost = bronze outline on light. Link = tracked READ MORE / SHOP NOW. */
.pnp-btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: .95rem 2.1rem; border-radius: 3px; border: 1.5px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pnp-btn--solid{ background: var(--pnp-bronze); color: #fff; }
.pnp-btn--solid:hover{ background: var(--pnp-bronze-dark); color: #fff; }
.pnp-btn--ghost{ background: transparent; color: var(--pnp-bronze); border-color: var(--pnp-bronze); }
.pnp-btn--ghost:hover{ background: var(--pnp-bronze); color: #fff; }
.pnp-btn--onphoto{ background: #fff; color: var(--pnp-bronze); }
.pnp-btn--onphoto:hover{ background: var(--pnp-bronze); color: #fff; }
.pnp-link{
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pnp-bronze); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.pnp-link svg{ width: 15px; height: 15px; transition: transform .18s ease; }
.pnp-link:hover{ color: var(--pnp-bronze-dark); }
.pnp-link:hover svg{ transform: translateX(4px); }

/* ============================================================================
   (1) HERO. full-bleed image carousel, overlay headline + CTA
   ============================================================================ */
.pnp-hero{ position: relative; background: var(--pnp-ink); overflow: hidden; }
/* horizontal slide track: translateX moves the slides left/right (arrows, dots,
   autoplay, and touch swipe all drive the same transform) */
.pnp-hero__slides{
  display: flex;
  min-height: clamp(520px, 82vh, 780px);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
  touch-action: pan-y;                   /* let vertical page scroll through; JS owns horizontal */
}
.pnp-hero__slide{
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.pnp-hero__slide.is-active{ z-index: 1; }
@media (prefers-reduced-motion: reduce){ .pnp-hero__slides{ transition: none; } }
/* legibility scrim: bottom-weighted, palette-derived (never a hardcoded hex) */
.pnp-hero__slide::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
      to top,
      var(--pnp-scrim-hi) 0%,
      var(--pnp-scrim) 34%,
      transparent 68%);
}
.pnp-hero__copy{
  position: relative; z-index: 2;
  max-width: var(--pnp-maxw);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pnp-gap) clamp(3rem, 7vh, 5.5rem);
  color: #fff;
  text-align: center;
}
.pnp-hero__copy .inner{ max-width: 640px; margin: 0 auto; }
.pnp-hero__eyebrow{
  font-family: "Manrope", sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: #fff; opacity: .92; margin: 0 0 1rem;
}
.pnp-hero h1,
.pnp-hero__title{
  color: #fff;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  line-height: 1.03;
  margin: 0 0 1.1rem;
}
.pnp-hero__title em{ font-style: italic; }
.pnp-hero__sub{
  font-family: "Manrope", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6;
  color: #fff; opacity: .95;
  max-width: 46ch; margin: 0 auto 1.8rem;
}
/* dots + arrows */
.pnp-hero__dots{
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.5rem;
  display: flex; justify-content: center; gap: .6rem;
}
.pnp-hero__dot{
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: color-mix(in srgb, #fff 55%, transparent);
  transition: background .18s ease, transform .18s ease;
}
.pnp-hero__dot.is-active{ background: #fff; transform: scale(1.15); }
.pnp-hero__arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #fff 20%, transparent);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .18s ease;
}
.pnp-hero__arrow:hover{ background: color-mix(in srgb, #fff 34%, transparent); }
.pnp-hero__arrow svg{ width: 22px; height: 22px; }
.pnp-hero__arrow.prev{ left: 1.4rem; }
.pnp-hero__arrow.next{ right: 1.4rem; }

/* ============================================================================
   (2) PECAN & PETAL PICKS. horizontal product carousel (WooCommerce loop)
   Cards come straight from ul.products li.product, so the theme's image-stack
   hover-swap (mu-plugins/pnp-hover-swap.php), 10px radius, and Sale/Best-Seller
   badges all apply automatically. We only: lay the loop out horizontally, and
   relabel the price to "From $X".
   ============================================================================ */
.pnp-picks{
  background: var(--pnp-peach);
  /* left/right offset that aligns the first and last card with the centered
     content column; collapses to the plain gutter once the viewport is
     narrower than the wrap, so mobile keeps a sensible edge inset */
  --pnp-edge: max(var(--pnp-gap), calc((100vw - var(--pnp-maxw)) / 2 + var(--pnp-gap)));
}
.pnp-picks__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.2rem;
}
.pnp-picks__head .txt{ text-align: left; }
.pnp-picks__nav{ display: flex; gap: .6rem; }
.pnp-picks__btn{
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  color: var(--pnp-ink); cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
  transition: background .18s ease, color .18s ease;
}
.pnp-picks__btn:hover{ background: var(--pnp-bronze); color: #fff; border-color: var(--pnp-bronze); }
.pnp-picks__btn svg{ width: 20px; height: 20px; }

/* full-width carousel: break the scroll track out of the centered content
   column to span the viewport; the heading (still in .pnp-wrap) stays aligned.
   .pnp-home has overflow-x:clip, so 100vw cannot add a page-level scrollbar. */
.pnp-picks__track{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* turn the shortcode's grid into a horizontal scroller (beats theme !important) */
.pnp-picks__track .woocommerce ul.products,
.pnp-picks__track ul.products{
  display: flex !important;
  grid-template-columns: none !important;
  gap: 1.4rem !important;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pnp-edge);
  padding: .4rem var(--pnp-edge) 1.2rem;
  margin: 0 !important;
  scrollbar-width: none;
  list-style: none;
}
.pnp-picks__track .woocommerce ul.products::-webkit-scrollbar,
.pnp-picks__track ul.products::-webkit-scrollbar{ display: none; }
.pnp-picks__track .woocommerce ul.products li.product,
.pnp-picks__track ul.products li.product{
  flex: 0 0 clamp(230px, 24vw, 268px);
  width: auto !important; margin: 0 !important;
  scroll-snap-align: start;
  text-align: left;
}
/* relabel price: copy only, scoped to picks (color stays theme-owned) */
.pnp-picks__track .woocommerce ul.products li.product .price::before{
  content: "From ";
  display: inline; text-transform: none;
  font-weight: 500; font-size: .82rem; color: var(--pnp-muted);
}
.pnp-picks__track .woocommerce ul.products li.product .price{
  font-family: "Manrope", sans-serif;
}

/* ============================================================================
   (3) BRAND STATEMENT. centered text block, abundant whitespace
   ============================================================================ */
.pnp-statement{ background: var(--pnp-peach); text-align: center; }
.pnp-statement .pnp-wrap{ max-width: 860px; }
.pnp-statement__mark{ display: flex; justify-content: center; margin-bottom: 1.6rem; }
.pnp-statement__mark svg{ width: 48px; height: 48px; }
.pnp-statement h2{
  font-size: clamp(1.8rem, 3.4vw, 2.75rem);
  font-weight: 400; line-height: 1.22;
  color: var(--pnp-ink);
}
.pnp-statement h2 em{ font-style: italic; color: var(--pnp-bronze); }
.pnp-statement__by{
  margin-top: 1.6rem;
  font-family: "Manrope", sans-serif; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pnp-muted);
}

/* ============================================================================
   (4) CATEGORY SHOWCASE. 2x2 tiles, image + name + SHOP NOW overlay
   ============================================================================ */
.pnp-cats__grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.pnp-cat{
  position: relative; display: block;
  aspect-ratio: 16 / 11;
  border-radius: 10px; overflow: hidden;
  text-decoration: none;
  background: var(--pnp-peach-deep);
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.pnp-cat__img{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .6s ease;
}
.pnp-cat::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--pnp-scrim-hi), transparent 62%);
  transition: background .3s ease;
}
.pnp-cat:hover .pnp-cat__img{ transform: scale(1.05); }
.pnp-cat__body{
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 1.8rem;
  color: #fff;
}
.pnp-cat__name{
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500;
  line-height: 1.1; margin: 0 0 .5rem; color: #fff;
}
.pnp-cat__shop{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; opacity: .92;
}
.pnp-cat__shop svg{ width: 15px; height: 15px; transition: transform .18s ease; }
.pnp-cat:hover .pnp-cat__shop svg{ transform: translateX(4px); }

/* ============================================================================
   (5) SUBSCRIPTION. full-width hero band + 3-col tier grid
   ============================================================================ */
.pnp-sub-hero{
  position: relative;
  min-height: clamp(360px, 46vh, 480px);
  background-size: cover; background-position: center;
  display: flex; align-items: center;
}
.pnp-sub-hero::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
      var(--pnp-scrim-hi) 0%,
      var(--pnp-scrim) 42%,
      transparent 74%);
}
.pnp-sub-hero__copy{
  position: relative; z-index: 2;
  max-width: var(--pnp-maxw); width: 100%;
  margin: 0 auto; padding: 0 var(--pnp-gap);
  color: #fff;
}
.pnp-sub-hero__copy .inner{ max-width: 500px; }
.pnp-sub-hero .pnp-eyebrow{ color: var(--pnp-onbronze); }
.pnp-sub-hero h2{ color: #fff; font-weight: 400; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.05; margin: 0 0 1rem; }
.pnp-sub-hero p{ font-family: "Manrope", sans-serif; color: #fff; opacity: .95; font-size: 1.05rem; line-height: 1.6; max-width: 40ch; margin: 0 0 1.7rem; }

.pnp-tiers{ background: var(--pnp-peach); }
.pnp-tiers__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  margin-top: 2.6rem;
}
.pnp-tier{
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line-soft);
  border-radius: 10px;
  padding: 2.4rem 2rem;
  text-align: center;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pnp-tier:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.pnp-tier--featured{ border-color: var(--pnp-bronze); }
.pnp-tier__flag{
  align-self: center;
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--pnp-coral);
  padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.pnp-tier__name{ font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 500; margin: 0 0 .4rem; }
.pnp-tier__cadence{ font-family: "Manrope", sans-serif; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pnp-muted); margin-bottom: 1.3rem; }
.pnp-tier__price{ font-family: "Fraunces", Georgia, serif; font-size: 2.6rem; font-weight: 500; color: var(--pnp-ink); line-height: 1; }
.pnp-tier__price sup{ font-size: 1.1rem; vertical-align: super; }
.pnp-tier__per{ font-family: "Manrope", sans-serif; font-size: .82rem; color: var(--pnp-muted); margin-bottom: 1.5rem; }
.pnp-tier__list{ list-style: none; padding: 0; margin: 0 0 1.8rem; text-align: left; }
.pnp-tier__list li{
  font-family: "Manrope", sans-serif; font-size: .92rem; color: var(--pnp-ink);
  padding: .5rem 0 .5rem 1.6rem; position: relative;
  border-bottom: 1px solid var(--pnp-line-soft);
}
.pnp-tier__list li:last-child{ border-bottom: 0; }
.pnp-tier__list li::before{
  content: ""; position: absolute; left: 0; top: .78rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pnp-bronze);
}
.pnp-tier .pnp-btn{ margin-top: auto; }

/* ============================================================================
   (6) INFO / SERVICE. 4-col image + text + READ MORE
   ============================================================================ */
.pnp-info__grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem;
}
.pnp-info-card{ text-align: left; }
.pnp-info-card__img{
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: var(--pnp-peach-deep); margin-bottom: 1.2rem;
}
.pnp-info-card__img span{
  display: block; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.pnp-info-card:hover .pnp-info-card__img span{ transform: scale(1.05); }
.pnp-info-card h3{ font-size: 1.3rem; font-weight: 500; margin: 0 0 .5rem; }
.pnp-info-card p{
  font-family: "Manrope", sans-serif; font-size: .93rem; line-height: 1.6;
  color: var(--pnp-muted); margin: 0 0 1rem;
}

/* ============================================================================
   (7) BRAND HERITAGE. narrative block + CTA (2-col image + copy)
   ============================================================================ */
.pnp-heritage .pnp-wrap{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pnp-heritage__media{
  border-radius: 12px; overflow: hidden;
  aspect-ratio: 5 / 6;
  background-size: cover; background-position: center;
  background-color: var(--pnp-peach-deep);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.pnp-heritage h2{ font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 400; line-height: 1.08; margin: 0 0 1.3rem; }
.pnp-heritage h2 em{ font-style: italic; color: var(--pnp-bronze); }
.pnp-heritage p{ font-family: "Manrope", sans-serif; font-size: 1.02rem; line-height: 1.75; color: var(--pnp-muted); }
.pnp-heritage p + p{ margin-top: 1.1rem; }
.pnp-heritage .pnp-cta-row{ margin-top: 2rem; }

/* ============================================================================
   (8) PRESS / PARTNER LOGO BAR
   ============================================================================ */
.pnp-press{ background: var(--pnp-peach); border-top: 1px solid var(--pnp-line-soft); border-bottom: 1px solid var(--pnp-line-soft); }
.pnp-press__label{
  text-align: center;
  font-family: "Manrope", sans-serif; font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--pnp-muted);
  margin-bottom: 2rem;
}
.pnp-press__row{
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(2rem, 6vw, 4.5rem);
}
.pnp-press__logo{
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem); font-weight: 500;
  letter-spacing: .04em;
  color: var(--pnp-bronze);
  opacity: .62;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.pnp-press__logo:hover{ opacity: 1; }

/* ============================================================================
   (9) SUSTAINABILITY. 2-col image + text
   ============================================================================ */
.pnp-sustain .pnp-wrap{
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pnp-sustain__media{
  border-radius: 12px; overflow: hidden;
  aspect-ratio: 6 / 5;
  background-size: cover; background-position: center;
  background-color: var(--pnp-peach-deep);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.pnp-sustain h2{ font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 400; line-height: 1.08; margin: 0 0 1.3rem; }
.pnp-sustain p{ font-family: "Manrope", sans-serif; font-size: 1.02rem; line-height: 1.75; color: var(--pnp-muted); }
.pnp-sustain__points{ list-style: none; padding: 0; margin: 1.6rem 0 0; }
.pnp-sustain__points li{
  position: relative; padding: 0 0 1.1rem 2.2rem;
  font-family: "Manrope", sans-serif; font-size: .98rem; line-height: 1.55; color: var(--pnp-ink);
}
.pnp-sustain__points li b{ display: block; font-weight: 700; margin-bottom: .1rem; }
.pnp-sustain__points svg{
  position: absolute; left: 0; top: .1rem;
  width: 22px; height: 22px; color: var(--pnp-bronze);
}

/* ============================================================================
   (10) NEWSLETTER. bronze band, white text (spark = coral submit)
   ============================================================================ */
.pnp-news{ background: var(--pnp-bronze); }
.pnp-news .pnp-wrap{
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
  padding-top: 4rem; padding-bottom: 4rem;
}
.pnp-news__copy{ max-width: 46ch; }
.pnp-news__copy .pnp-eyebrow{ color: var(--pnp-onbronze); }
.pnp-news h2{ color: #fff; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.08; margin: 0 0 .6rem; }
.pnp-news p{ color: var(--pnp-onbronze); font-family: "Manrope", sans-serif; font-size: 1.02rem; line-height: 1.55; }
.pnp-news__form{ display: flex; gap: .6rem; flex: 0 1 480px; min-width: 300px; }
.pnp-news__form input{
  flex: 1; border: 0; border-radius: 3px;
  padding: 1rem 1.1rem;
  font-family: "Manrope", sans-serif; font-size: 1rem;
  color: var(--pnp-ink); background: #fff;
}
.pnp-news__form input::placeholder{ color: var(--pnp-muted); }
.pnp-news__form button{
  border: 0; border-radius: 3px; cursor: pointer;
  background: var(--pnp-coral); color: #fff;
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 2rem;
  transition: filter .18s ease;
}
.pnp-news__form button:hover{ filter: brightness(1.06); }
.pnp-news__fine{
  flex-basis: 100%;
  font-family: "Manrope", sans-serif; font-size: .78rem;
  color: var(--pnp-onbronze); opacity: .8; margin-top: .2rem;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1000px){
  .pnp-section{ padding: 4rem 0; }
  .pnp-info__grid{ grid-template-columns: repeat(2, 1fr); gap: 2rem 1.6rem; }
  .pnp-tiers__grid{ grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .pnp-heritage .pnp-wrap,
  .pnp-sustain .pnp-wrap{ grid-template-columns: 1fr; gap: 2.2rem; }
  .pnp-sustain__media{ order: -1; }           /* image first on stack */
}
@media (max-width: 720px){
  .pnp-section{ padding: 3.25rem 0; }
  .pnp-cats__grid{ grid-template-columns: 1fr; gap: 1.1rem; }
  .pnp-info__grid{ grid-template-columns: 1fr; gap: 2.2rem; }
  .pnp-picks__head{ flex-direction: column; align-items: flex-start; }
  .pnp-picks__nav{ display: none; }           /* swipe on mobile */
  .pnp-hero__arrow{ display: none; }           /* swipe / dots on mobile */
  .pnp-news .pnp-wrap{ flex-direction: column; align-items: flex-start; }
  .pnp-news__form{ width: 100%; flex-basis: auto; }
}

/* ============================================================================
   MOTION SAFETY
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .pnp-hero__slide{ transition: none; }
  .pnp-cat__img,
  .pnp-info-card__img span,
  .pnp-link svg,
  .pnp-cat__shop svg,
  .pnp-tier{ transition: none; }
}