/* =========================================================================
   Pukka — Brand fonts + accents
   Loaded last so it wins. Sets Avenir for body and the Grano placeholder
   (Baloo 2) for headlines on the components WE render. Elementor-built
   headings/text should also be set via Elementor → Site Settings → Global
   Fonts to the same families (see notes handed over).
   ========================================================================= */

/* Body / UI → Avenir */
body,
.pk-header, .pk-footer, .pk-quiz, .pk-cart, .pk-mm,
.woocommerce, .woocommerce-page,
button, input, select, textarea {
	font-family: var(--pk-font-body);
}

/* Headlines → Grano placeholder (our own component titles) */
.pkcard__title, .pkcard__title a,
.pk-quiz__q, .pk-quiz__hero h2, .pk-quiz__intro h2, .pk-quiz__rbody-head h3,
.pk-archive-head__title,
.pk-footer__news-copy h3,
.pk-sp__title,
.pk-cart__title,
.woocommerce-cart h1, .woocommerce-checkout h1,
.pk-gifts__title {
	font-family: var(--pk-font-display);
	letter-spacing: 0;
}

/* Bright-lime brand pops */
::selection { background: var(--pk-accent, #84FF83); color: var(--pk-ink, #002301); }
.pk-basket__count { background: var(--pk-red, #EF4444); } /* keep the count red for visibility */

/* Accent underline under active primary nav (a lime pop on the dark green). */
.pk-nav__item.is-active > .pk-nav__link { border-bottom-color: var(--pk-accent, #84FF83); }

/* =========================================================================
   Bolder, bigger type — Pukka is confident, not quiet.
   ========================================================================= */
body { font-size: 17px; line-height: 1.6; }

/* Product cards */
.pkcard__title, .pkcard__title a { font-size: 17px; font-weight: 600; }
.pk-price, .pkcard__price { font-size: 22px; }
.pk-brand, .pkcard__brand, .pkcard__brand a { font-size: 13px; }

/* Buttons / CTAs */
.pk-add, .pk-quiz__btn, .pk-cart__btn, .pk-hero__cta,
.woocommerce-checkout #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 16px; font-weight: 700; }

/* Quiz */
.pk-quiz__q { font-size: clamp(25px, 3.4vw, 36px); }
.pk-quiz__qsub, .pk-quiz__lede { font-size: 16px; }
.pk-quiz__opt-txt b { font-size: 16.5px; }
.pk-quiz__hero h2 { font-size: clamp(28px, 4.4vw, 46px); }
.pk-quiz__pcard-name { font-size: 16px; }

/* Header */
.pk-nav__link { font-size: 16px; }
.pk-util__msg, .pk-util__links a { font-size: 14px; }

/* Footer */
.pk-footer { font-size: 15.5px; }
.pk-footer__heading { font-size: 14px; }

/* =========================================================================
   Dark brand panel utility — Pukka Green background, Accent on top.
   Add class "pk-panel-dark" to any Elementor section/HTML for a brand panel.
   ========================================================================= */
.pk-panel-dark {
	background: var(--pk-ink, #002301);
	color: var(--pk-light-green, #D1EED1);
	border-radius: var(--pk-radius, 16px);
}
.pk-panel-dark h1, .pk-panel-dark h2, .pk-panel-dark h3,
.pk-panel-dark h4, .pk-panel-dark .pk-accent-text { color: var(--pk-accent, #84FF83); }
.pk-panel-dark a:not(.pk-add):not(.button) { color: var(--pk-accent, #84FF83); }

/* The full-bleed quiz section becomes a dark Pukka-green band (card stays white). */
.pk-quiz--full { background: var(--pk-ink, #002301); }

/* Cart count badge → bright lime pop with a dark number. */
.pk-basket__count { background: var(--pk-accent, #84FF83) !important; color: var(--pk-ink, #002301) !important; border-color: #fff; }