/*
 * Theme Name:  Kadence Child
 * Template:    kadence
 * Description: Child theme for Toke Haus
 * Version:     1.0.0
 * License:     GNU General Public License v3.0
 */

/* ==========================================================================
   Google Fonts — Fraunces (display headings) + DM Sans (body)
   Fraunces: optical-size variable font with beautiful weight contrast
   DM Sans:  geometric humanist — clean, readable, modern
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,700&display=swap');

/* ==========================================================================
   Global Typography
   ========================================================================== */

/* Body — DM Sans throughout */
body,
.entry-content,
input,
button,
select,
textarea {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

/* Display headings — Fraunces for editorial character */
.hh-hero-left h1,
.hh-rewards h2,
.hh-shipping-left h2,
.hh-reviews-header-left h2,
.hh-email-left h2 {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* Section eyebrows — DM Sans uppercase (no change in face, just explicit) */
.hh-eyebrow,
.hh-section-eyebrow,
.hh-feature-eyebrow,
.hh-deals-title,
.hh-footer-col-title {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* ==========================================================================
   SVG Icon Display Fixes
   Emoji replacements are now inline SVGs — ensure containers size correctly
   and icons inherit the right color in each context
   ========================================================================== */

/* Effect tiles — lime-green accent, vertically centred */
.hh-effect-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;        /* kill any residual font-size spacing */
  color: #A8F080 !important;      /* lime green */
  line-height: 0 !important;
}
.hh-effect-icon svg {
  flex-shrink: 0;
}

/* Trust bar — dark-green icons inside the mint circle */
.hh-trust-icon {
  color: #2D6A2D !important;
}
.hh-trust-icon svg {
  display: block;
}

/* Rewards — dark-green icons */
.hh-reward-icon {
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: #2D6A2D !important;
  margin-bottom: 12px !important;
}
.hh-reward-icon svg {
  display: block;
}

/* Referral banner — dark-green */
.hh-referral-icon {
  font-size: 0 !important;
  line-height: 0 !important;
  color: #2D6A2D !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Shipping section — white icons on green bg */
.hh-shipping-card-icon {
  font-size: 0 !important;
  line-height: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-top: 2px;
}
.hh-shipping-card-icon svg {
  display: block;
}

/* Footer social icons — muted white, green on hover */
.hh-footer-social {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0 !important;        /* hide any fallback text */
  line-height: 0 !important;
}
.hh-footer-social:hover {
  color: #A8F080 !important;
  border-color: rgba(168, 240, 128, 0.4) !important;
}
.hh-footer-social svg {
  display: block;
}

/* ==========================================================================
   Hero CTA Buttons
   Using .hh-hero-ctas parent for higher specificity than the inline
   body <style> block, which defines these at single-class specificity.
   ========================================================================== */

/* Primary — solid lime-green fill */
.hh-hero-ctas .hh-btn-primary {
  background: #a8f080 !important;
  color: #1a2e1a !important;
  border: none;
}

.hh-hero-ctas .hh-btn-primary:hover {
  background: #8fd668 !important;
  color: #1a2e1a !important;
  box-shadow: 0 4px 16px rgba(168, 240, 128, 0.35) !important;
  transform: translateY(-1px);
}

/* Secondary — white outline, unchanged */

.hh-hero-ctas .hh-btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.hh-hero-ctas .hh-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Stats bar — standalone full-width section below hero, above deals
   ========================================================================== */

/* Give the hero wrapper the same gradient so its full min-height is covered */
.hh-hero {
  background: linear-gradient(135deg, #2d6a2d 0%, #1a4a1a 100%) !important;
}

/* ── Kadence block hero overrides ────────────────────────────────────────────
   Kadence's kt-row-column-wrap defaults to display:grid with a restricted
   max-width. Override so the hero gets the full-bleed 55/45 flex split.
   ────────────────────────────────────────────────────────────────────────── */
.hh-hero .kt-row-column-wrap {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 480px !important;
  flex: 1 1 100% !important;
  padding: 0 !important;
}
.hh-hero .hh-hero-left {
  flex: 0 0 55% !important;
  width: 55% !important;
  max-width: 55% !important;
}
.hh-hero .hh-hero-feature {
  flex: 1 1 auto !important;
  width: 45% !important;
  max-width: 45% !important;
}
/* Kadence adds kb-row-layout-wrap as a wrapper — absorb into hero styling */
.kb-row-layout-wrap.hh-hero {
  display: flex !important;
  flex-direction: column !important;
}
.kb-row-layout-wrap.hh-hero > .kt-row-column-wrap {
  flex: 1 1 auto !important;
}

/* ── Kadence stats bar overrides ─────────────────────────────────────────────
   3-column rowlayout; kt-row-column-wrap is forced to 100% width so stats
   span edge-to-edge inside the full-bleed dark background strip.
   ────────────────────────────────────────────────────────────────────────── */
.hh-trust-stats .kt-row-column-wrap {
  display: flex !important;          /* override Kadence's default grid */
  flex-direction: row !important;
  width: 100% !important;
  max-width: 1100px !important;
  padding: 0 !important;
  align-items: center !important;   /* vertically centre columns within the row */
}
.hh-trust-stats .wp-block-kadence-column {
  display: flex !important;
  flex: 1 1 0 !important;           /* equal thirds */
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.hh-trust-stats .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;  /* centre number + label stack vertically */
  text-align: center !important;
}

.hh-trust-stats {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-top: -24px !important;
  background: #234d23 !important;
  /* padding-top compensates for the -24px hero overlap so visual space above
     and below the stats is equal: 28 + 24 = 52px top vs 28px bottom → use
     36px top (feels 12px after overlap) and 36px bottom for true symmetry.   */
  padding: 36px 40px !important;
  border-top: none !important;
  /* Centre the kt-row-column-wrap child both axes inside this flex column */
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}

/* ── Kadence trust bar overrides ─────────────────────────────────────────────
   5-column rowlayout full-bleed. Each hh-trust-item column needs to display
   as a horizontal flex row (icon left, text right) matching the original.
   ────────────────────────────────────────────────────────────────────────── */
.hh-trust-bar.kb-row-layout-wrap {
  margin-top: 0 !important;
}
.hh-trust-bar .kt-row-column-wrap {
  display: flex !important;          /* override Kadence's default grid */
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
}
.hh-trust-bar .wp-block-kadence-column.hh-trust-item {
  flex: 1 1 0 !important;           /* equal fifths */
  padding: 0 !important;
}
.hh-trust-bar .hh-trust-item .kt-inside-inner-col {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 24px !important;
  border-right: 1px solid #E4EBE0 !important;
  width: 100% !important;
  height: 100% !important;
}
.hh-trust-bar .hh-trust-item:last-child .kt-inside-inner-col {
  border-right: none !important;
}

/* ==========================================================================
   Deals panel — Premium 2-column card grid
   Design system: E-commerce Luxury palette + Minimal/Swiss style
   Via UI/UX Pro Max: cursor-pointer, hover lift, image zoom, contrast ≥4.5:1
   ========================================================================== */

/* Grid wrapper — constrained & centered */
.hh-hero-right {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 780px !important;
  margin: 32px auto 0 !important;
  padding: 0 !important;
  position: static !important;
  left: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
  flex: none !important;
}

/* Section header row */
.hh-deals-header {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  margin-bottom: 4px !important;
}

.hh-deals-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #374151 !important;
  flex: 1 !important;
}

.hh-live-badge {
  background: #16a34a !important;
  color: #ffffff !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
}

.hh-view-all {
  font-size: 11px !important;
  color: #9ca3af !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  transition: color 0.15s ease !important;
}

.hh-view-all:hover {
  color: #2D6A2D !important;
}

/* Card shell — white, shadow, hover lift */
.hh-deal-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.hh-deal-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* Thumbnail — 4:3 ratio, image zooms on card hover */
.hh-deal-thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
  display: block !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.hh-deal-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform 0.35s ease !important;
}

.hh-deal-card:hover .hh-deal-thumb img {
  transform: scale(1.05) !important;
}

/* Info area */
.hh-deal-info {
  padding: 12px 14px 14px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

/* Strain — uppercase eyebrow label */
.hh-deal-strain {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  margin-bottom: 1px !important;
}

/* Product name */
.hh-deal-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
}

/* Price — larger, dark (not green — cleaner, higher contrast) */
.hh-deal-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

.hh-deal-old {
  font-size: 11px !important;
  color: #d1d5db !important;
  text-decoration: line-through !important;
}

/* Discount badge — soft green pill instead of hard red */
.hh-save-badge {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid #bbf7d0 !important;
}

/* Grade badge — dark glass pill in image corner */
.hh-grade-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  margin-left: 0 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.hh-grade-aaaa {
  background: rgba(0,0,0,0.52) !important;
  color: #fbbf24 !important;
  border: none !important;
}

.hh-grade-aaa {
  background: rgba(0,0,0,0.52) !important;
  color: #e5e7eb !important;
  border: none !important;
}

/* ==========================================================================
   Priority #3 — Announcement bar: black background instead of green
   Black reads as a premium utility strip; saves the brand green for the hero
   ========================================================================== */
.hh-announce {
  background: #111 !important;
}

/* ==========================================================================
   Priority #5 — Shipping section: near-black background
   Breaks the green→white→green→white monotony, adds drama
   ========================================================================== */
/* ── Kadence shipping overrides ──────────────────────────────────────────────
   2-column rowlayout (text left / cards right). kt-row-column-wrap gets a
   max-width so the content centres inside the full-bleed dark section.
   ────────────────────────────────────────────────────────────────────────── */
.hh-shipping.kb-row-layout-wrap {
  background: #0F1F0F !important;
}
.hh-shipping .kt-row-column-wrap {
  display: flex !important;          /* Fix: Kadence defaults to grid — force side-by-side */
  flex-direction: row !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 64px !important;
  align-items: center !important;
}
.hh-shipping .hh-shipping-left.wp-block-kadence-column {
  padding: 0 !important;
}
.hh-shipping .hh-shipping-left .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
/* Target headings and paragraphs inside Kadence column */
.hh-shipping .hh-shipping-left .wp-block-heading {
  color: #ffffff !important;
}
.hh-shipping .hh-shipping-left .wp-block-heading em {
  color: #A8F080 !important;
  font-style: normal !important;
}
.hh-shipping .hh-shipping-left .wp-block-paragraph {
  color: rgba(255,255,255,0.7) !important;
}

.hh-shipping {
  background: #0F1F0F !important;
}

/* The shipping cards already use rgba(255,255,255,0.08) bg + white text
   so they read fine on #0F1F0F. Just tighten the border slightly for depth. */
.hh-shipping-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* ==========================================================================
   Priority #8 — Rewards section: dark background for contrast & exclusivity
   Premium loyalty/rewards sections use dark tones to convey value
   ========================================================================== */
/* ── Kadence rewards overrides ───────────────────────────────────────────────
   Single-column rowlayout. The column uses class hh-rewards-inner so the
   existing max-width/margin CSS constrains content inside the full-bleed bg.
   ────────────────────────────────────────────────────────────────────────── */
.hh-rewards.kb-row-layout-wrap {
  background: #0F1F0F !important;
}
.hh-rewards .kt-row-column-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
/* hh-rewards-inner on the column restores the max-width inner container */
.hh-rewards .hh-rewards-inner.wp-block-kadence-column {
  padding: 0 !important;
}
.hh-rewards .hh-rewards-inner .kt-inside-inner-col {
  max-width: 900px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
/* Target the wp:heading block's h2 inside rewards (Kadence wraps in wp-block-heading) */
.hh-rewards .hh-rewards-inner .wp-block-heading {
  color: #ffffff !important;
}
.hh-rewards .hh-rewards-inner .wp-block-heading em {
  color: #A8F080 !important;
  font-style: normal !important;
}
/* Paragraph block */
.hh-rewards .hh-rewards-inner .wp-block-paragraph.hh-rewards-sub {
  color: rgba(255,255,255,0.65) !important;
}

.hh-rewards {
  background: #0F1F0F !important;
}

/* Flip all reward section text for dark background.
   SPECIFICITY NOTE: The post's inline <style> uses !important on the same
   selectors (e.g. .hh-rewards h2). At equal specificity, the body-scoped
   inline style wins. We beat it by nesting into the parent containers that
   exist in the HTML (.hh-rewards-inner, .hh-rewards-grid, .hh-referral). */

/* Eyebrow — no !important in inline, child theme !important wins as-is */
.hh-rewards .hh-section-eyebrow {
  color: #A8F080 !important;
}

/* h2 — inline has color:#1A2E1A !important (specificity 0,0,1,1)
   Using .hh-rewards .hh-rewards-inner h2 (0,0,2,1) beats it */
.hh-rewards .hh-rewards-inner h2 {
  color: #ffffff !important;
}
.hh-rewards .hh-rewards-inner h2 em {
  color: #A8F080 !important;
}

/* Sub-text — no !important inline, this wins cleanly */
.hh-rewards-sub {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* Reward grid — no !important inline, child theme wins */
.hh-rewards-grid {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.hh-reward-cell {
  background: transparent !important;
}
.hh-reward-value {
  color: #A8F080 !important;
}

/* Cell headings/body — inline has !important at (0,0,1,1)
   .hh-rewards-grid .hh-reward-cell h4/p (0,0,2,1) beats it */
.hh-rewards-grid .hh-reward-cell h4 {
  color: #ffffff !important;
}
.hh-rewards-grid .hh-reward-cell p {
  color: rgba(255, 255, 255, 0.50) !important;
}

/* Reward SVG icons — lime on dark */
.hh-reward-icon {
  color: #A8F080 !important;
}

/* Referral strip */
.hh-referral {
  background: rgba(168, 240, 128, 0.08) !important;
  border: 1px solid rgba(168, 240, 128, 0.20) !important;
}

/* Referral text — inline has !important at (0,0,1,1)
   .hh-referral .hh-referral-text h4/p (0,0,2,1) beats it */
.hh-referral .hh-referral-text h4 {
  color: #ffffff !important;
}
.hh-referral .hh-referral-text p {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Referral icon and button */
.hh-referral-icon {
  color: #A8F080 !important;
}
.hh-referral-btn {
  background: #2D6A2D !important;
  color: #ffffff !important;
}
.hh-referral-btn:hover {
  background: #3A8A3A !important;
}

/* ── Kadence email CTA overrides ─────────────────────────────────────────────
   2-column rowlayout (text+perks left / form right). Inner kt-row-column-wrap
   gets a max-width so content centres inside the full-bleed dark section.
   ────────────────────────────────────────────────────────────────────────── */
.hh-email .kt-row-column-wrap {
  display: flex !important;          /* Fix: Kadence defaults to grid — force side-by-side */
  flex-direction: row !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 64px !important;
  align-items: center !important;
}
.hh-email .hh-email-left.wp-block-kadence-column,
.hh-email .hh-email-right.wp-block-kadence-column {
  padding: 0 !important;
}
/* wp:heading / wp:paragraph inside email left column */
.hh-email .hh-email-left .wp-block-heading {
  color: #ffffff !important;
}
.hh-email .hh-email-left .wp-block-heading em {
  color: #A8F080 !important;
  font-style: normal !important;
}
.hh-email .hh-email-left .wp-block-paragraph {
  color: rgba(255,255,255,0.7) !important;
}

/* ── Email right column: stack input + button as flex column, left-aligned ──
   The inline CSS sets width:100% on .hh-email-btn (no !important) so child
   theme wins. Force button to auto-width, lime-green fill, dark text.
   ────────────────────────────────────────────────────────────────────────── */
.hh-email .hh-email-right .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.hh-email .hh-email-input {
  width: 100% !important;
  box-sizing: border-box !important;
}
.hh-email .hh-email-btn {
  background: #A8F080 !important;
  color: #1A2E1A !important;
  width: auto !important;
  min-width: 180px !important;
  align-self: flex-start !important;
}
.hh-email .hh-email-btn:hover {
  background: #8fd668 !important;
  color: #1A2E1A !important;
}

/* ── Footer logo: real site logo image, wide enough for wordmark to read ────
   White-text PNG on dark #1A2E1A background. Width fixed at 140px so the
   "TOKE HAUS" wordmark is fully legible; height auto preserves aspect ratio.
   ────────────────────────────────────────────────────────────────────────── */
.hh-footer-logo-img {
  width: 140px !important;
  height: auto !important;
  display: block !important;
}
/* Hide the old letter-circle */
.hh-footer-logo-mark {
  display: none !important;
}
.hh-footer-brand-logo {
  gap: 0 !important;
}

/* ── Fix 6: Hero dark panel bleed into stats bar top-right ──────────────────
   The hh-hero-feature panel has a darker bg that overhangs 24px below the
   hero due to the negative-margin overlap. Clipping the hero wrapper and
   lifting the stats bar above it via z-index removes the artifact.
   ────────────────────────────────────────────────────────────────────────── */
.kb-row-layout-wrap.hh-hero {
  overflow: hidden !important;       /* clip feature panel to hero bounds */
}
.hh-trust-stats {
  position: relative !important;
  z-index: 1 !important;            /* sit above any hero overflow */
}

/* ── Kadence reviews overrides ───────────────────────────────────────────────
   Single-column rowlayout with hh-reviews-inner column.
   kt-row-column-wrap → uncapped so section uses full width.
   ────────────────────────────────────────────────────────────────────────── */
.hh-reviews .kt-row-column-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.hh-reviews .hh-reviews-inner.wp-block-kadence-column {
  padding: 0 !important;
}
.hh-reviews .hh-reviews-inner .kt-inside-inner-col {
  max-width: 1100px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ==========================================================================
   Mobile — Full pass at 768px and below
   ========================================================================== */
@media (max-width: 768px) {

  /* ── Stats bar ───────────────────────────────────────────────────────────
     3 stats, equal thirds. At 375px − 24px padding = 351px ÷ 3 = 117px/item.
  */
  .hh-trust-stats {
    gap: 0 !important;
    padding: 22px 12px !important;
    justify-content: space-evenly !important;
  }
  .hh-trust-stats > div {
    flex: 1 !important;
    text-align: center !important;
    min-width: 0 !important;
  }
  .hh-stat-label {
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
  }

  /* ── Trust bar ───────────────────────────────────────────────────────────
     5 columns at 75px each = completely illegible text at 375px.
     Fix: switch to a horizontally scrollable single row so all 5 items stay
     in their original horizontal layout but the user can scroll to see them.
     Each item gets a min-width so text has room; snap scrolling for polish.
  */
  .hh-trust-bar .kt-row-column-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;  /* breathing room above scrollbar */
  }
  .hh-trust-bar .wp-block-kadence-column.hh-trust-item {
    flex: 0 0 auto !important;       /* don't shrink — scroll instead */
    min-width: 160px !important;     /* enough for "Canada Post Xpresspost" */
    scroll-snap-align: start !important;
  }
  /* Tighten the inner padding on mobile so content sits well at 160px */
  .hh-trust-bar .hh-trust-item .kt-inside-inner-col {
    padding: 16px 16px !important;
  }

  /* ── Kadence hero — mobile column stacking ──────────────────────────────
     Override Kadence's kt-row-column-wrap to stack columns vertically.    */

  .hh-hero .kt-row-column-wrap {
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .hh-hero .hh-hero-left {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hh-hero .hh-hero-feature {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Hero effect tiles ───────────────────────────────────────────────────
     More padding in the panel, lock the 2×2 grid, give tiles room,
     bump description text from 9.5px (illegible on device) to 11px.      */

  .hh-hero-feature {
    padding: 36px 24px !important;
  }

  .hh-effect-grid {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hh-effect-tile {
    padding: 18px 12px 16px !important;
    gap: 10px !important;
  }

  /* Description text was 9.5px — bump to readable 11px on mobile */
  .hh-effect-desc {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* ── Rewards section ─────────────────────────────────────────────────────
     Problem: 2-column grid squeezes "$50 bonus" and "Monthly loyalty bonus"
     into cramped wrapping text. Fix: switch to 1-column grid with a
     horizontal icon-left / content-right sub-layout inside each cell.

     Cell HTML structure (4 sibling elements):
       span.hh-reward-icon  span.hh-reward-value  h4  p

     We use CSS subgrid columns [icon | content] with the icon spanning
     all 3 content rows so value + heading + body stack cleanly on the right.
  */

  .hh-rewards {
    padding: 48px 20px !important;
  }

  /* 1-column list on mobile — cells are full width, stacked */
  .hh-rewards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Sub-grid inside each cell: 40px icon column | fluid content column */
  .hh-reward-cell {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 16px !important;
    row-gap: 3px !important;
    align-items: start !important;
    padding: 20px !important;
  }

  /* Icon spans all 3 rows so it sits beside value + heading + body */
  .hh-reward-icon {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    align-self: start !important;
    margin-bottom: 0 !important;  /* override the desktop 12px bottom gap */
    padding-top: 2px !important;
  }

  /* Value row — reduce from 28px (wraps on mobile) to 22px */
  .hh-reward-value {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
  }

  /* Heading and body — placed in column 2, rows 2 and 3
     Uses the higher-specificity selectors already established above       */
  .hh-rewards-grid .hh-reward-cell h4 {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 2px !important;
  }

  .hh-rewards-grid .hh-reward-cell p {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin-top: 2px !important;
  }

  /* Referral strip — column layout, centred text (inline CSS already does
     this but reinforce padding to match the new section rhythm)           */
  .hh-referral {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 20px !important;
    gap: 12px !important;
  }

  .hh-referral-icon {
    margin: 0 auto !important;
  }

  /* ── Shipping — stack heading above cards on mobile ─────────────────────
     Desktop: heading LEFT, cards RIGHT (flex row).
     Mobile: heading TOP, cards BOTTOM (flex column).
  */
  .hh-shipping .kt-row-column-wrap {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .hh-shipping .hh-shipping-left.wp-block-kadence-column,
  .hh-shipping .wp-block-kadence-column:not(.hh-shipping-left) {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* ── Email CTA — stack heading above form on mobile ─────────────────────
     Desktop: perks LEFT, form RIGHT (flex row).
     Mobile: perks TOP, form BOTTOM (flex column).
  */
  .hh-email .kt-row-column-wrap {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .hh-email .hh-email-left.wp-block-kadence-column,
  .hh-email .hh-email-right.wp-block-kadence-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

}