/* ==========================================================================
   GO NATURAL campaign page (/gonatural/) — owner: fix-be-gonatural
   --------------------------------------------------------------------------
   Everything the Go Natural page needs beyond its Elementor controls, keyed to
   CLASS NAMES rather than page or element ids, so a section keeps its styling
   when it is duplicated, moved or rebuilt in the editor:

     1. Widget base type        .elementor-widget-pl_gn_cards / _showcase
     2. Flip cards              "PL: Go Natural flip cards" widget  (.gn-row / .gn-card)
     3. Brand showcase          "PL: Go Natural brand showcase" widget (.kpf-*)
     4. Page sections           classes set in Advanced › CSS Classes:
                                gn-header, gn-nav, gn-nowrap, gn-hero-carousel,
                                gn-logo-link, gn-lead, gn-anchor,
                                gn-br-desktop-only, sweep-btn
     5. Reference layout        the old site's content width, container
                                padding and text defaults on this page
                                (2026-10: match packleader.co.za/go-natural/)

   Loaded by inc/gonatural-widgets.php on any page that uses one of the Go
   Natural widgets or a `gn-` CSS class (today: page 45 only). Sections 2–3
   used to be <style> blocks pasted into two Text Editor widgets; section 4
   used to be page/element Custom CSS (which the client's Elementor licence
   cannot show) and `.page-id-45 .elementor-element-<id>` rules in
   pl-global.css §35/§45. Values are unchanged — the page renders the same.
   Per-card image placement, colours, sizes and fonts are Elementor controls
   on the two widgets; the values below are their defaults.
   ========================================================================== */

/* -- 1. Widget base type ----------------------------------------------------
   The card and showcase markup inherits its base font, size, line height and
   colour from the widget wrapper. As Text Editor widgets that came from the
   kit's "Text" globals; the two widgets keep the same inheritance. */
.elementor-widget-pl_gn_cards,
.elementor-widget-pl_gn_showcase {
  font-family: var(--e-global-typography-text-font-family), Sans-serif;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: var(--e-global-typography-text-line-height);
  color: var(--e-global-color-text);
}

/* ==========================================================================
   2. FLIP CARDS ("Know the signs")
   ========================================================================== */

/* 6-up responsive grid: 3 columns -> 2 -> 1, equal heights per row */
.gn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
}
.gn-row .gn-card { max-width: none; }
@media (max-width: 1024px) { .gn-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .gn-row { grid-template-columns: 1fr; } }

/* Card colours are variables so the widget's Style › Cards colour pickers can
   set them: --gn-cream (card), --gn-green (flipped card + front button),
   --gn-ink (text), --gn-teal (button hover sweep). */
.gn-card {
  --gn-cream: #dcd6c8;
  --gn-green: #a9cc3f;
  --gn-ink: #173434;
  --gn-teal: #173434;

  position: relative;
  width: 100%;
  max-width: 485px;
  min-height: 360px;
  height: 100%;                 /* fill the column so equal-height rows match all cards */
  margin: 0 auto;
  display: grid;                /* stack both layers; height = tallest layer */
  border-radius: 26px;
  overflow: hidden;
  background: var(--gn-cream);
  box-shadow: 0 18px 40px rgba(20, 40, 30, .12);
  font-family: Georgia, 'Times New Roman', serif;
  transition: background-color .6s ease;        /* the colour wash */
}
.gn-card.is-open { background: var(--gn-green); }

/* both content layers occupy the SAME grid cell (stacked) */
.gn-card .gn-layer {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  transition: opacity .5s ease, visibility .5s ease;
}
.gn-card .gn-front { opacity: 1; visibility: visible; }
.gn-card.is-open .gn-front { opacity: 0; visibility: hidden; pointer-events: none; }

.gn-card .gn-back { opacity: 0; visibility: hidden; pointer-events: none; }
.gn-card.is-open .gn-back { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: .18s; }

/* padding-bottom reserves a band for the corner image so no text or button
   ever touches it (reserve > image height, both measured against width). */
.gn-card .gn-content {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 7%, 40px) clamp(24px, 7%, 36px);
  padding-bottom: 40%;
}

/* "Go natural" wordmark images (front button + back face) */
.gn-card .gn-logo-img { display: inline-block; width: auto; }
.gn-card .gn-logo-img--btn {
  height: 15px;
  vertical-align: middle;
  margin: 0 3px;
  position: relative;
  top: -1px;
  transition: filter .35s ease;
}
/* on hover the button fills with --gn-teal: flip the wordmark to white */
.gn-card .gn-btn--green:hover .gn-logo-img--btn { filter: brightness(0) invert(1); }

.gn-card .gn-back-logo { margin: 0 0 16px; line-height: 0; }
.gn-card .gn-logo-img--back { height: 28px; }

/* text */
.gn-card .gn-title,
.gn-card .gn-text,
.gn-card .gn-btn { transition: transform .55s ease, opacity .55s ease; }

.gn-card .gn-title {
  margin: 0 0 16px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.18;
  font-weight: 700;
  color: var(--gn-ink);
  letter-spacing: .2px;
}

/* 14px at every width (the floor; was forced by page Custom CSS) */
.gn-card .gn-text {
  margin: 0 0 22px;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gn-ink);
}

/* back text settles up into place when it opens */
.gn-card .gn-back .gn-title,
.gn-card .gn-back .gn-text,
.gn-card .gn-back .gn-btn { transform: translateY(14px); }
.gn-card.is-open .gn-back .gn-title,
.gn-card.is-open .gn-back .gn-text,
.gn-card.is-open .gn-back .gn-btn { transform: translateY(0); }

/* buttons */
.gn-card .gn-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  border-radius: 40px;
  padding: 12px 24px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1;
  transition: color .4s ease, border-color .4s ease, transform .25s ease, box-shadow .35s ease, opacity .55s ease;
}
/* the --gn-teal fill sweeps in from the LEFT on hover */
.gn-card .gn-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gn-teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.6, 0, .2, 1);
}
.gn-card .gn-btn:hover::before { transform: scaleX(1); }
/* keep label + icon above the fill */
.gn-card .gn-btn-label,
.gn-card .gn-hand { position: relative; z-index: 1; }
.gn-card .gn-btn-label { display: inline-block; white-space: nowrap; }

.gn-card .gn-btn--green { background: var(--gn-green); color: var(--gn-ink); border: 1px solid rgba(23, 52, 52, .17); }
.gn-card .gn-btn--green:hover {
  color: #fff;
  border-color: #173434;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(21, 48, 42, .32);
}
.gn-card .gn-btn--green:active { transform: translateY(0); }

.gn-card .gn-btn--white { background: #f4f3ee; color: var(--gn-ink); border: 1px solid rgba(23, 52, 52, .17); }
.gn-card .gn-btn--white:hover {
  color: #fff;
  border-color: #173434;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(21, 48, 42, .3);
}
.gn-card .gn-btn--white:active { transform: translateY(0); }

/* Pointer icon (widget "Button icon": the uploaded hand SVG draws in
   currentColor, so it follows the button text). */
.gn-card .gn-hand {
  width: 19px;
  height: 19px;
  flex: none;
  stroke-width: 1.4;
  transition: transform .3s ease;
}
/* an icon picked from the Elementor icon library instead of an SVG upload */
.gn-card .gn-hand--font { fill: currentColor; font-size: 19px; line-height: 1; }
.gn-card .gn-btn:hover .gn-hand { transform: translateY(-2px) rotate(-6deg); }

/* Corner images: transparent PNGs that bleed off the bottom + right edges (the
   card's overflow:hidden crops them). Width and the right/bottom offsets are
   per card — widget › Cards › <card> › Image placement — and arrive here as
   variables; these are the defaults for a new card. */
.gn-card .gn-img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  z-index: 1;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.6, 0, .2, 1), opacity .5s ease;
}
.gn-card .gn-img--dog  { width: var(--gn-pet-w, 74%);  right: var(--gn-pet-r, -10%);  bottom: var(--gn-pet-b, -10%); }
.gn-card .gn-img--food { width: var(--gn-food-w, 72%); right: var(--gn-food-r, -10%); bottom: var(--gn-food-b, -6%); }

.gn-card.is-open .gn-img--dog { transform: translateX(115%); opacity: 0; }
.gn-card .gn-img--food { transform: translateX(115%); opacity: 0; }
.gn-card.is-open .gn-img--food { transform: translateX(0); opacity: 1; transition-delay: .12s; }

@media (max-width: 1024px) {
  .gn-card .gn-title { font-size: clamp(22px, 3.2vw, 27px); }
}
@media (max-width: 600px) {
  .gn-card { min-height: 340px; }
  .gn-card .gn-content { padding: 30px 26px; padding-bottom: 51%; }
  .gn-card .gn-title { font-size: 25px; }
  .gn-card .gn-btn { padding: 13px 22px; font-size: 14px; }
}
@media (max-width: 360px) {
  .gn-card .gn-content { padding: 26px 22px; padding-bottom: 58%; }
  .gn-card .gn-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gn-card, .gn-card * { transition-duration: .001ms !important; }
}

/* ==========================================================================
   3. BRAND SHOWCASE ("Go natural with the family of brands that do it right")
   ========================================================================== */
.kpf-showcase {
  --kpf-bg: #ece9e1;            /* page/section background tint */
  --kpf-tip-bg: #ffffff;
  --kpf-tip-text: #173434;
  --kpf-radius: 18px;
  --kpf-dim: 0.35;             /* opacity of non-active items */
  --kpf-gap: 24px;
  --kpf-logo-gap: 10px;        /* logo distance above product (smaller/negative = lower) */
  --kpf-bag-h: 270px;          /* uniform display height for the product images */
  --kpf-can-h: 150px;          /* centre-piece product at rest (smaller than the bags) */
  --kpf-fan-h: 168px;          /* centre-piece hover image (wider; overflows its column on purpose) */
  --kpf-maxw: 1200px;
  --kpf-ease: cubic-bezier(0.22, 1, 0.36, 1);

  box-sizing: border-box;
  width: 100%;
  max-width: var(--kpf-maxw);
  margin: 0 auto;
  padding: 32px 16px 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.kpf-showcase *,
.kpf-showcase *::before,
.kpf-showcase *::after { box-sizing: border-box; }

/* Heading lockup: the wordmark (inline SVG, drawn in `color`) followed by live
   text, so it reflows and keeps a heading size on narrow screens. */
.kpf-showcase .kpf-heading {
  max-width: 620px;
  margin: 0 auto 28px;
  padding: 0;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: #173434;
}
.kpf-showcase .kpf-heading-logo {
  display: inline-block;
  width: auto;
  height: 0.875em;
  aspect-ratio: 915 / 184;
  vertical-align: -0.1em;
  color: #ABC322;
}
/* An uploaded SVG wordmark is recoloured with the widget's "Wordmark colour". */
.kpf-showcase svg.kpf-heading-logo :is(path, circle, ellipse, polygon) { fill: currentColor; }
/* Phones: the reference's lockup is an image that scales with the screen —
   88% of the column, ~20px type on 2 lines at 390 (18px at 360). Same here:
   5.2vw (the widget's Mobile font size; this is the default) in an 88% box,
   which also breaks the lines where the reference does. QA 2026-10-08 (D3):
   was 35px on 3 lines. */
@media (max-width: 767px) {
  .kpf-showcase .kpf-heading { font-size: 5.2vw; max-width: 88%; }
}

/* Product row */
.kpf-products {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--kpf-gap);
}

.kpf-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  outline: none;
  transition: transform 0.45s var(--kpf-ease);
  /* Kill the blue tap-flash and text/image selection on tap (mobile). */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.kpf-item .kpf-media { -webkit-user-drag: none; user-select: none; }
/* Lift the hovered/active product above its neighbours (its scaled image and
   tooltip overlap them). */
.kpf-item:hover,
.kpf-item.kpf-is-active { z-index: 10; }

.kpf-logo {
  height: 56px;
  display: flex;
  align-items: flex-end;            /* logo sits at the BOTTOM of its box, closer to the product */
  justify-content: center;
  margin-bottom: var(--kpf-logo-gap);
  transition: opacity 0.3s var(--kpf-ease);
}
.kpf-logo .kpf-media { max-height: 100%; width: auto; }
/* The hovered brand's own top logo hides (it reappears inside the tooltip). */
.kpf-item.kpf-is-active .kpf-logo { opacity: 0; }

.kpf-media-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-origin: bottom center;
  transition: transform 0.3s var(--kpf-ease);
}
/* Product grows on hover. */
.kpf-item.kpf-is-active .kpf-media-wrap { transform: scale(1.08); }
/* Sized by HEIGHT so every pack reads at a consistent size regardless of each
   image's aspect ratio (images are pre-trimmed to content). */
.kpf-media-wrap .kpf-media { width: auto; height: var(--kpf-bag-h); max-width: none; display: block; }
/* The centre-piece brand ("Centre-piece" switch; Weruva): smaller at rest,
   wider fan on hover. */
.kpf-item.kpf-item--featured .kpf-media--default { height: var(--kpf-can-h); }
.kpf-item.kpf-item--featured .kpf-media--hover { height: var(--kpf-fan-h); }

/* Two-state swap: the hover image fades in over the resting one */
.kpf-media-wrap--swap .kpf-media--hover {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.35s var(--kpf-ease);
}
.kpf-media-wrap--swap .kpf-media--default {
  transition: opacity 0.35s var(--kpf-ease);
}
.kpf-item.kpf-is-active .kpf-media-wrap--swap .kpf-media--default { opacity: 0; }
.kpf-item.kpf-is-active .kpf-media-wrap--swap .kpf-media--hover { opacity: 1; }

/* Centre-piece fan-out: the hover image grows from the centre so the side
   cans read as emerging from behind the front can. Centred explicitly (it is
   wider than its column) and anchored to the bottom so it shares a baseline
   with the resting image. */
.kpf-media-wrap--fan .kpf-media--hover {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  margin: 0;
  transform: translateX(-50%) scale(0.78);
  transform-origin: 50% 100%;
  transition: opacity 0.3s var(--kpf-ease), transform 0.45s var(--kpf-ease);
}
.kpf-item.kpf-is-active .kpf-media-wrap--fan .kpf-media--hover { transform: translateX(-50%) scale(1); }

/* "Make room": while the centre-piece fans out, its neighbours part — the
   adjacent tiles 46px, the next ones 18px. Single-row (desktop) layout only. */
@media (min-width: 901px) {
  .kpf-products:has(.kpf-item--featured:hover) .kpf-item:has(+ .kpf-item--featured),
  .kpf-products:has(.kpf-item--featured.kpf-is-active) .kpf-item:has(+ .kpf-item--featured) { transform: translateX(-46px); }
  .kpf-products:has(.kpf-item--featured:hover) .kpf-item:has(+ .kpf-item + .kpf-item--featured),
  .kpf-products:has(.kpf-item--featured.kpf-is-active) .kpf-item:has(+ .kpf-item + .kpf-item--featured) { transform: translateX(-18px); }
  .kpf-products:has(.kpf-item--featured:hover) .kpf-item--featured + .kpf-item,
  .kpf-products:has(.kpf-item--featured.kpf-is-active) .kpf-item--featured + .kpf-item { transform: translateX(46px); }
  .kpf-products:has(.kpf-item--featured:hover) .kpf-item--featured + .kpf-item + .kpf-item,
  .kpf-products:has(.kpf-item--featured.kpf-is-active) .kpf-item--featured + .kpf-item + .kpf-item { transform: translateX(18px); }
}

/* Tooltip card. --kpf-tip-shift (set by pl-gonatural.js; QA 2026-10-08 D1)
   slides it up or down when neither side of the product has room for it. */
.kpf-tooltip {
  position: absolute;
  top: calc(100% + 14px + var(--kpf-tip-shift, 0px));
  overscroll-behavior: contain;  /* a card taller than the window scrolls inside itself (script sets max-height) */
  left: 50%;
  width: 280px;
  max-width: 78vw;
  transform: translateX(-50%) translateY(8px);
  background: var(--kpf-tip-bg);
  border-radius: var(--kpf-radius);
  padding: 20px 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--kpf-ease), transform 0.3s var(--kpf-ease);
  z-index: 5;
}
.kpf-item.kpf-is-active .kpf-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Edge-anchor so tooltips never overflow the container: the first tile's
   tooltip pins left, the last tile's pins right. */
.kpf-item:first-child .kpf-tooltip {
  left: 0;
  transform: translateX(0) translateY(8px);
}
.kpf-item:first-child.kpf-is-active .kpf-tooltip {
  transform: translateX(0) translateY(0);
}
.kpf-item:last-child .kpf-tooltip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(8px);
}
.kpf-item:last-child.kpf-is-active .kpf-tooltip {
  transform: translateX(0) translateY(0);
}

/* Desktop hover effects — hover-capable pointers only. Touch devices get the
   same states from .kpf-is-active (pl-gonatural.js), on a single tap. */
@media (hover: hover) {
  .kpf-item:hover .kpf-logo { opacity: 0; }
  .kpf-item:hover .kpf-media-wrap { transform: scale(1.08); }
  .kpf-item:hover .kpf-media-wrap--swap .kpf-media--default { opacity: 0; }
  .kpf-item:hover .kpf-media-wrap--swap .kpf-media--hover { opacity: 1; }
  .kpf-item:hover .kpf-media-wrap--fan .kpf-media--hover { transform: translateX(-50%) scale(1); }
  .kpf-item:hover .kpf-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .kpf-item:first-child:hover .kpf-tooltip { transform: translateX(0) translateY(0); }
  .kpf-item:last-child:hover .kpf-tooltip { transform: translateX(0) translateY(0); }
}
/* Description copy: Raleway 14px (the floor) in the tooltip and the popup. */
.kpf-tooltip-text {
  margin: 12px 0 0;
  font-family: 'Raleway';
  font-size: 14px;
  line-height: 1.55;
  color: var(--kpf-tip-text, #173434);
}
.kpf-tip-logo-img { max-height: 38px; width: auto; display: block; }

/* Position-aware flip: when there isn't room below, the script adds
   .kpf-flip-up and the tooltip opens ABOVE the product. */
.kpf-item.kpf-flip-up .kpf-tooltip { top: auto; bottom: calc(100% + 14px - var(--kpf-tip-shift, 0px)); }

/* Keyboard focus: the tiles are role="button" but the block sets
   `outline: none`, so the ring only appears for keyboard users. */
.kpf-showcase .kpf-item:focus-visible {
  outline: 3px solid #173434;
  outline-offset: 6px;
  border-radius: 10px;
}

/* Phone popup (<= 768px). The script moves it to <body> so position:fixed
   centres on the viewport, so it cannot inherit the showcase's variables —
   hence the var() fallbacks (the widget's colour controls also target it). */
.kpf-sheet-backdrop, .kpf-sheet-backdrop * { box-sizing: border-box; }
.kpf-sheet-backdrop {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 99998;
}
.kpf-sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
/* While the popup is open, the page behind it cannot pan or scroll. */
html.kpf-modal-open, body.kpf-modal-open { overflow: hidden !important; }
.kpf-sheet-backdrop { overscroll-behavior: contain; touch-action: none; }
.kpf-sheet { overscroll-behavior: contain; touch-action: pan-y; }

.kpf-sheet {
  position: relative;
  width: min(88vw, 400px);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--kpf-tip-bg, #ffffff);
  border-radius: var(--kpf-radius, 18px);
  padding: 26px 24px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.25s var(--kpf-ease, ease), transform 0.25s var(--kpf-ease, ease);
}
.kpf-sheet-backdrop.is-open .kpf-sheet { opacity: 1; transform: scale(1); }
/* Close button — hard reset so the theme's <button> styles can't leak in. */
.kpf-sheet-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: #f0eee8 !important;
  border-radius: 50% !important;
  color: #7a756a !important;
  font: 400 20px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  transition: background 0.15s ease;
}
.kpf-sheet-close:hover { background: #e6e3da !important; }
/* keyboard users see where focus is once the sheet moves it to Close (QA 2026-10-12; mouse/touch stay ring-free) */
.kpf-sheet-close:focus-visible { outline: 2px solid #173434 !important; outline-offset: 2px !important; }
.kpf-sheet-body .kpf-tip-logo-img { max-height: 42px; width: auto; display: block; }
.kpf-sheet-body .kpf-tooltip-text { margin: 14px 0 0; line-height: 1.6; }

/* 769–1100: packs are sized by height, so from ~1000px down they outgrow their
   columns (at 900 the reference's packs overlap and run off both screen
   edges). Packs keep the reference's 270px for as long as they leave ~10px
   between neighbours (down to ~1020px) and only then shrink with the
   viewport: height = (column + 14px) / 0.711, the widest pack's (the
   centre-piece can's) width/height ratio; column = (100vw - 128px) / 5.
   QA 2026-10-08 (D2): was calc(27.5vw - 48px), sized for the old 24px page
   gutters — 234px at 1024 where the reference shows 270. The centre-piece
   keeps its proportions. */
@media (min-width: 769px) and (max-width: 1100px) {
  .kpf-showcase {
    --kpf-bag-h: min(270px, 28.13vw - 16.3px);
    --kpf-can-h: calc(min(270px, 28.13vw - 16.3px) * 0.556);
    --kpf-fan-h: calc(min(270px, 28.13vw - 16.3px) * 0.622);
  }
}

/* Phones/small tablets: 1 · 2 · 2 grid — the centre-piece gets the full-width
   first row, the others follow in their order. */
@media (max-width: 768px) {
  .kpf-showcase {
    --kpf-bag-h: 190px;
    --kpf-can-h: 120px;
    --kpf-fan-h: 150px;
  }
  .kpf-products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 22px;
    align-items: end;
  }
  .kpf-item.kpf-item--featured { order: -1; grid-column: 1 / -1; }
  .kpf-item .kpf-tooltip { display: none; }     /* descriptions live in the popup */

  /* On tap the product swaps to its hover image; the wrap does not grow, so
     the grid never jumps. */
  .kpf-item:hover .kpf-media-wrap,
  .kpf-item.kpf-is-active .kpf-media-wrap { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .kpf-showcase * { transition: none !important; }
}

/* ==========================================================================
   4. PAGE SECTIONS — classes set in each element's Advanced › CSS Classes
   ========================================================================== */

/* -- 4.1 "sweep-btn" (Where to buy / Buy Now buttons): the fill sweeps in from
   the left on hover, with a lift and shadow. */
.sweep-btn .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(23, 52, 52, .17);
  transition: color .4s ease, border-color .4s ease,
              transform .25s ease, box-shadow .35s ease;
}
.sweep-btn .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #173434;                 /* sweep colour */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.6, 0, .2, 1);
}
.sweep-btn .elementor-button:hover::before { transform: scaleX(1); }
/* keep the label above the sweep */
.sweep-btn .elementor-button-content-wrapper,
.sweep-btn .elementor-button-text { position: relative; z-index: 1; }
.sweep-btn .elementor-button:hover {
  color: #fff;
  border-color: #173434;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(21, 48, 42, .3);
}
.sweep-btn .elementor-button:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .sweep-btn .elementor-button,
  .sweep-btn .elementor-button::before { transition: none; }
}

/* -- 4.2 "gn-nowrap": the "Where to buy" pill never wraps its label. */
.elementor-element.gn-nowrap .elementor-button-text { white-space: nowrap; }

/* -- 4.3 "gn-anchor": sections the page nav links to (#standard, #signs,
   #brands) land clear of the sticky header. */
.gn-anchor { scroll-margin-top: 120px; }

/* -- 4.4 "gn-header": the sticky page header. Elementor pins it with an inline width, but pl-global.css
   `[data-elementor-type="wp-page"] > .e-con { width: auto !important }` beats that, and a fixed box with
   width auto shrinks to its content (1674px on a 1920 screen). Anchoring both edges makes it span the
   screen at any width. (Until 2026-10 the page was capped at 1440 and the bar with it.) */
.elementor[data-elementor-type="wp-page"] > .e-con.gn-header.elementor-sticky--active { left: 0 !important; right: 0 !important; }

/* -- 4.5 "gn-nav": the page's own menu --------------------------------------
   Submenus open on hover and on keyboard focus (hover-capable devices only:
   on touch, SmartMenus' tap-to-open stays in charge). */
@media (hover: hover) {
  .elementor-element.gn-nav .elementor-nav-menu--main li.menu-item-has-children:hover > ul.sub-menu,
  .elementor-element.gn-nav .elementor-nav-menu--main li.menu-item-has-children:focus-within > ul.sub-menu {
    display: block !important;
  }
}
/* Panel: an 8px inset so the rounded item pills clear the 20px panel corner
   (radius + shadow come from the widget's Dropdown style settings). */
.elementor-element.gn-nav .elementor-nav-menu--main ul.sub-menu {
  padding: 8px !important;
  animation: pl-dd-dissolve 200ms ease-out;
}
.elementor-element.gn-nav .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
  border-radius: 12px !important;
  line-height: 1.2;
  white-space: nowrap;
}
/* Brands (14 items) in two columns so the panel does not run over the section
   below. CSS columns rather than grid: SmartMenus shows the panel with an
   inline display:block on touch. */
.elementor-element.gn-nav .elementor-nav-menu--main li.pl-mega > ul.sub-menu {
  width: 404px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  column-count: 2;
  column-gap: 4px;
}
.elementor-element.gn-nav .elementor-nav-menu--main li.pl-mega > ul.sub-menu > li {
  break-inside: avoid;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-element.gn-nav .elementor-nav-menu--main ul.sub-menu { animation: none; }
}
/* Burger (phones, <= 767): the reference's 33px button, with an invisible
   44x44 hit area around it (::after), so neither the bar nor the button's
   grey square grows. */
.elementor-element.gn-nav .elementor-menu-toggle { position: relative; }
.elementor-element.gn-nav .elementor-menu-toggle::after {
  content: "";
  position: absolute;
  inset: -5.5px;
}
/* Phone menu panel as on the reference: it opens 10px lower (Elementor's
   default gap, which pl-main.js zeroes inline for the site header) and
   without the site's grey page scrim (the scrim stays, transparent, so a tap
   outside still closes the menu). */
.elementor-element.gn-nav .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown { padding-top: 10px; }
body:has(.gn-header) .pl-nav-scrim { background: transparent; }
/* Its links are 44px tall touch targets (were 40: 10px padding + 20px line).
   QA 2026-10-08 (D6). */
.elementor-element.gn-nav .elementor-nav-menu--dropdown a.elementor-item { min-height: 44px; }

/* -- 4.6 "gn-hero-carousel": 13px dots get a 6px halo (25px hit area); the
   widget's 6px dot gap makes neighbouring halos meet, not overlap. */
.elementor-element.gn-hero-carousel .swiper-pagination-bullet {
  position: relative;
}
.elementor-element.gn-hero-carousel .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* -- 4.7 "gn-logo-link": header/footer logo links — padding grows the tap
   area, the equal negative margin keeps the layout. */
.elementor-element.gn-logo-link a {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
  vertical-align: top;
}

/* -- 4.8 "gn-lead": the lead statement is an <h1> inside a Text Editor; it
   takes the widget's own typography (Style tab) instead of the theme's h1. */
.elementor-element.gn-lead h1 {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0 0 14.4px;
}

/* -- 4.9 "gn-br-desktop-only": line breaks typed into this text apply on
   desktop only (>= 1025px); tablets and phones let the line wrap naturally.
   Type a space before each line break. */
@media (max-width: 1024px) {
  .elementor-element.gn-br-desktop-only br { display: none; }
}

/* ==========================================================================
   5. REFERENCE LAYOUT (2026-10-08) — client: "fix this page as per the
   current website page", i.e. packleader.co.za/go-natural/.
   The page was designed on the old site, whose Site Settings differ from this
   site's kit in two values every section was laid out against:
     - Content width 1140px (this kit: 1370, and wider above 1440 since
       2026-10-08 — pl-global.css "Wider than the 1440 design");
     - Elementor's default container padding, 10px (this kit: 0).
   Both are restored for this page only, as defaults: a container whose own
   Padding / Content Width is set in the editor keeps its own value. Scoped to
   a page document that carries the Go Natural header (`gn-header`), so no
   other page can pick it up even if it uses a Go Natural widget.
   ========================================================================== */
.elementor[data-elementor-type="wp-page"]:has(.gn-header) .e-con {
  --container-default-padding-top: 10px;
  --container-default-padding-right: 10px;
  --container-default-padding-bottom: 10px;
  --container-default-padding-left: 10px;
}
/* Desktop and wide screens: the boxed sections keep the reference's 1140
   measure at every width (the old site does not widen them on big screens;
   its full-width bands run edge to edge). Tablet/phone keep the kit's. */
@media (min-width: 1025px) {
  .elementor[data-elementor-type="wp-page"]:has(.gn-header) .e-con { --container-max-width: 1140px; }
}
/* pl-global.css sizes every page's top-level sections by side margins
   (`width: auto !important`); this page's sections use their own Width
   setting (e.g. the Standard panel's 99%), as on the reference. */
.elementor[data-elementor-type="wp-page"]:has(.gn-header) > .e-con,
.elementor[data-elementor-type="wp-page"]:has(.gn-header) > :where(.elementor-section-wrap) > .e-con {
  width: var(--width) !important;
  max-width: min(100%, var(--width)) !important;
}

/* "Where to buy" / "Buy Now": the old kit gave every link a 25px line height,
   which is what makes these pills 39-51px tall on the reference. A Line
   Height set in the button's own Typography still wins (more specific). */
.elementor-widget-button.sweep-btn .elementor-button { line-height: 25px; }

/* Text that takes the kit's "Text" typography (paragraphs, list labels, the
   flip cards' base) inherited the old kit's values there: no size (16px) and
   no line height (the theme's 1.5), weight 400. This kit's Text is 17px /
   1.45em / 500, which made the intro and "Know the signs" copy run tighter
   and the "What you'll find" labels larger than on the reference. Custom
   properties inherit, so redefining them on this page's document reaches
   every widget that uses them; a widget's own Typography setting still wins. */
.elementor[data-elementor-type="wp-page"]:has(.gn-header) {
  --e-global-typography-text-font-size: 16px;
  --e-global-typography-text-line-height: 1.5;
  --e-global-typography-text-font-weight: 400;
}

/* Flip-card buttons are <button>s: this kit styles every button (600 weight,
   a green hover/focus fill at (0,2,1) that outranks the card colours). The
   reference's buttons are Medium 500 and keep their own fill; the hover
   colour comes from the teal sweep (::before). The widget's Button
   typography control still wins over the weight. */
.gn-card .gn-btn { font-weight: 500; }
.gn-card .gn-btn--green:is(:hover, :focus) { background: var(--gn-green); }
.gn-card .gn-btn--white:is(:hover, :focus) { background: #f4f3ee; }

/* Headings break like the reference: the site-wide `text-wrap: pretty`
   (pl-global.css, no lone last word) re-flows this page's card questions and
   section titles onto different lines than the old page shows. */
.elementor[data-elementor-type="wp-page"]:has(.gn-header) :is(h1, h2, h3, h4, .elementor-heading-title) { text-wrap: wrap; }

/* Flip cards on phones (spacing review 2026-10-13): the corner photo was absolutely placed in a band reserved as a
   fixed 51% of the card's width, but the photos differ in height — the cat ran 44–72px up under the "Go natural
   Solution" button, the pug left a 70–97px empty band. On phones each photo joins its face's flow instead, below
   the text, still bleeding off the right and bottom edges by its own Image placement offsets, so every card is as
   tall as its text plus its photo. Up to 900 (iPad portrait: the cat sat under the button at 744–834 too). */
@media (max-width: 900px) {
  .gn-card .gn-content { padding-bottom: 18px; }
  .gn-card .gn-img {
    position: relative;
    display: block;
    right: auto;
    bottom: auto;
    margin-left: auto;
  }
  .gn-card .gn-img--dog  { margin-right: var(--gn-pet-r, -10%);  margin-bottom: var(--gn-pet-b, -10%); }
  .gn-card .gn-img--food { margin-right: var(--gn-food-r, -10%); margin-bottom: var(--gn-food-b, -6%); }
  /* the photo stays in the bottom corner when the other face makes the card taller */
  .gn-card .gn-layer { display: flex; flex-direction: column; }
  .gn-card .gn-img { margin-top: auto; flex: none; }
}

/* Flip-card buttons after a tap (final phone check 2026-10-13): Android focuses the button the script moves to, and
   the theme's `button:focus { color: #fff }` turned "Back" white on its #f4f3ee fill (≈1.1 : 1) and the front button
   white on lime. A focused button that isn't hovered keeps its normal ink label; the hover sweep is unchanged. */
.gn-card .gn-btn:focus:not(:hover) { color: var(--gn-ink); }

/* iPad mini and other 600–767 screens get the phone layout (tablet check 2026-10-13): the intro logo (74e79b55) and
   the "mark" badge (5d73fa52) are sized as a share of the screen, so at 744 they grew to 373 × 88 and 465 × 478 and
   ran over the headings under them. They stop at their size on a 430 phone: 210 / 255px, now each Image widget's own
   Style › Max Width (Mobile) in Elementor (inc/qa-sync-editability.php, 2026-10-15). Until that sync has run, the old
   rule is printed by inc/gonatural-widgets.php (pl_gn_max_width_fallback_css()). */

/* Flip cards at 1101–1200 (tablet check 2026-10-13: at 1180 the fussy-eater button covered the cat's head) — the
   same in-flow photos as ≤900. */
@media (min-width: 1101px) and (max-width: 1200px) {
  .gn-card .gn-content { padding-bottom: 18px; }
  .gn-card .gn-img { position: relative; display: block; right: auto; bottom: auto; margin-left: auto; margin-top: auto; flex: none; }
  .gn-card .gn-img--dog  { margin-right: var(--gn-pet-r, -10%);  margin-bottom: var(--gn-pet-b, -10%); }
  .gn-card .gn-img--food { margin-right: var(--gn-food-r, -10%); margin-bottom: var(--gn-food-b, -6%); }
  .gn-card .gn-layer { display: flex; flex-direction: column; }
}

/* Flip cards on phones: centred (client 2026-10-15: "most items on mobile need to be centered so it reads
   correctly"). The question, text and button on the front, and the logo, solution text and Back button on the back,
   centre like "Know the signs" above them; the photo keeps its own placement in the bottom-right corner (each card's
   Image placement). Tablets and desktops are unchanged. The widget's Style › Cards › Alignment overrides it. */
@media (max-width: 767px) {
  .gn-card .gn-content { text-align: center; }
  /* Images as tall as their box (mobile QA 2026-10-15). An Image widget sized in % (Style › Width) inside a
     container was laid out shorter than its picture on phones (while the box was sized, the % was taken of a
     narrower width, e.g. the 210/255px caps above), so the picture ran into what follows: the "mark" sticker's arrow
     struck through "The mark" and its edge covered "of" from 430 up; the intro logo sat on "The next generation…";
     the hero logos hung 3–12px out of their box. A full-width box (the picture inside keeps its own width and
     alignment) is as tall as its picture. An Image widget given its own Width under Advanced keeps it. */
  .elementor[data-elementor-type="wp-page"]:has(.gn-header) :is(.e-con, .e-con-inner) > .elementor-widget-image:not([class*="elementor-widget__width-"]) { width: 100%; }

  /* "What you'll find / won't find" accordions (mobile review 2026-10-15): the +/− artwork is a 70 × 70 SVG drawn
     15px tall, so it kept a 70px-wide box and squeezed the titles to 138–208px (3–4 lines). The box is 24px here,
     the glyph unchanged; the 12px gap, the bodies' matching 36px indent (one left edge for title and body), the
     15px body text and the centred pill labels are the widgets' own Mobile values (inc/qa-sync-mobile-brand.php). */
  .elementor[data-elementor-type="wp-page"]:has(.gn-header) .elementor-widget-n-accordion .e-n-accordion-item-title-icon svg { width: 24px; }

  /* Burger: 44 × 44 like the site header's (was the reference's 33px square with an invisible hit area), growing
     around its own centre; the negative top/bottom margins keep the bar its height. (0,5,0): the widget's own
     alignment rule (`margin: 0 auto`, post CSS) is (0,4,0). */
  .elementor .elementor-element.elementor-widget-nav-menu.gn-nav .elementor-menu-toggle {
    --nav-menu-icon-size: 24px;
    padding: 10px;
    margin: -5.5px auto;
    border-radius: 8px;
  }
  .elementor-element.gn-nav .elementor-menu-toggle::after { inset: 0; }

  /* Hero dots: a 44 × 44 tap area each. The carousel's Space between dots is 15.5px on phones (its Mobile value),
     so the areas meet without overlapping; the dots themselves are unchanged, with a faint ring and shadow so the
     pale ones still read over the pale photos. */
  .elementor-element.gn-hero-carousel .swiper-pagination-bullet {
    box-shadow: 0 0 0 1px rgba( 23, 52, 52, 0.35 ), 0 1px 4px rgba( 0, 0, 0, 0.3 );
  }
  .elementor-element.gn-hero-carousel .swiper-pagination-bullet::after {
    inset: -15.5px calc( var( --swiper-pagination-bullet-horizontal-gap, 6px ) * -1 );
  }
}

/* The brand popup's close button: a 44 × 44 tap area around the 32px circle (mobile review 2026-10-15). */
.kpf-sheet-close::after {
  content: "";
  position: absolute;
  inset: -6px;
}