/*
Theme Name: Hablo Español Pro
Theme URI: https://habloespanol.ie/
Author: Hablo Español
Author URI: https://habloespanol.ie/
Description: Block theme rápido y responsive para Hablo Español. Diseñado para cursos, servicios, blog y WooCommerce.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
Version: 1.6.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hablo-espanol-pro
Tags: full-site-editing, block-patterns, blog, e-commerce, education, one-column, two-columns, custom-colors, custom-logo
*/

/* Small, performance-friendly tweaks that complement theme.json.
   Keep this file tiny. */
:root {
  --he-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Better focus outlines for accessibility */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Prevent long URLs from breaking layouts */
.wp-block-post-content, .wp-block-query, .wp-site-blocks {
  overflow-wrap: anywhere;
}

/* WooCommerce blocks & classic shortcodes – light polish */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: 999px;
}

/* Navigation: desktop links + mobile overlay that doesn't clip text */
.wp-block-navigation__container {
  gap: 1.25rem;
}

/* Make the responsive overlay panel breathe on mobile */
.wp-block-navigation__responsive-container.is-menu-open {
  inset: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 1.25rem;
  box-sizing: border-box;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  gap: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  padding: 0.65rem 0.25rem;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
}

/* Avoid "mobile look" on large screens due to overly narrow containers */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
  width: 100%;
}


/* Elegant premium layer (still lightweight) */
:root{
  --he-radius: 22px;
  --he-radius-sm: 14px;
  --he-border: rgba(0,0,0,.10);
  --he-border-2: rgba(0,0,0,.14);
  --he-shadow-soft: 0 10px 30px rgba(15,15,16,.08);
  --he-shadow-hover: 0 18px 45px rgba(15,15,16,.12);
  --he-transition: 180ms cubic-bezier(.2,.8,.2,1);
}

/* Card block styles */
.wp-block-group.is-style-he-card{
  border: 1px solid var(--he-border);
  border-radius: var(--he-radius);
  box-shadow: var(--he-shadow-soft);
  overflow: hidden;
}
.wp-block-group.is-style-he-card-hover{
  border: 1px solid var(--he-border);
  border-radius: var(--he-radius);
  box-shadow: var(--he-shadow-soft);
  transition: transform var(--he-transition), box-shadow var(--he-transition), border-color var(--he-transition);
  overflow: hidden;
}
.wp-block-group.is-style-he-card-hover:hover{
  transform: translateY(-3px);
  box-shadow: var(--he-shadow-hover);
  border-color: var(--he-border-2);
}

/* Pill style for small badges */
.wp-block-group.is-style-he-pill{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

/* Checklist list style */
ul.is-style-he-checklist{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
ul.is-style-he-checklist li{
  position: relative;
  padding-left: 1.6rem;
  margin: .55rem 0;
}
ul.is-style-he-checklist li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.02rem;
  font-weight: 800;
  color: var(--wp--preset--color--primary);
}

/* Buttons: subtle premium hover */
.wp-block-button .wp-block-button__link{
  transition: transform var(--he-transition), box-shadow var(--he-transition), filter var(--he-transition);
  box-shadow: 0 10px 22px rgba(248,8,0,.18);
}
.wp-block-button .wp-block-button__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,15,16,.16);
  filter: saturate(1.05);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  box-shadow: 0 12px 28px rgba(15,15,16,.10);
}

/* Navigation: underline indicator + better spacing */
.wp-block-navigation-item__content{
  position: relative;
  padding: .25rem 0;
}
@media (min-width: 782px){
  .wp-block-navigation-item__content::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:2px;
    background: var(--wp--preset--color--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--he-transition);
    opacity:.9;
  }
  .wp-block-navigation-item__content:hover::after,
  .current-menu-item > .wp-block-navigation-item__content::after,
  .current_page_item > .wp-block-navigation-item__content::after{
    transform: scaleX(1);
  }
}

/* Mobile overlay menu: top anchored (like before), center-aligned text, larger tap targets */
@media (max-width: 782px){
  .wp-block-navigation__responsive-container.is-menu-open{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 1.25rem calc(18px + env(safe-area-inset-bottom, 0px));
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center;
  }

  /* Center the menu options in the available screen space */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    margin: 0 auto;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    text-align: center;
    gap: .25rem;
    flex: 1 1 auto;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child{
    border-bottom: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.25rem;
    padding: 1rem .25rem;
    border-radius: 16px;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active{
    background: rgba(0,0,0,.04);
  }

  /* Mobile menu buttons: larger hit area + more visible close */
  .wp-block-navigation__responsive-container-open{
    min-width: 46px;
    min-height: 46px;
    padding: 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.90);
    box-shadow: 0 10px 22px rgba(15,15,16,.10);
  }
  .wp-block-navigation__responsive-container-open svg{
    width: 24px;
    height: 24px;
  }

  .wp-block-navigation__responsive-container-close{
    min-height: 50px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 26px rgba(15,15,16,.12);
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .wp-block-navigation__responsive-container-close svg{
    width: 26px;
    height: 26px;
  }
  .wp-block-navigation__responsive-container-close::after{
    content: "Close";
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .01em;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    margin: 0;
    z-index: 2147483401;
  }

  /* Prevent any scrolling while the mobile menu is open (fixed screen) */
  html.he-nav-open,
  body.he-nav-open{
    overflow: hidden;
  }
  body.he-nav-open{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    touch-action: none;
  }

  /* Ensure the overlay itself never scrolls (use dynamic viewport units to avoid iOS 100vh bounce) */
  .wp-block-navigation__responsive-container.is-menu-open{
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
    overflow: hidden;
  }

}


/* Page/post "paper" feel */
.he-content-card{
  border: 1px solid var(--he-border);
  border-radius: var(--he-radius);
  box-shadow: var(--he-shadow-soft);
  background: #fff;
}

/* Better blog grids */
.wp-block-post-template.is-flex-container{
  gap: 1.25rem;
}

@media (max-width: 781px){
  .he-cta-desktop{display:none !important;}
}


/* Table polish */
.wp-block-table table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--he-radius-sm);
  background:#fff;
}
.wp-block-table th, .wp-block-table td{
  padding: .85rem .9rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.wp-block-table tr:last-child td{ border-bottom: none; }
.wp-block-table thead th{
  background: #FAFAFA;
  font-weight: 800;
}

/* Mobile-first, readable tables: convert enhanced tables to "cards".
   JS adds .he-table-responsive and data-label attributes.
*/
@media (max-width: 782px){
  .wp-block-table.he-table-responsive{ overflow: visible; }
  .wp-block-table.he-table-responsive table{
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .wp-block-table.he-table-responsive thead{
    display:none;
  }
  .wp-block-table.he-table-responsive tbody,
  .wp-block-table.he-table-responsive tr,
  .wp-block-table.he-table-responsive td{
    display:block;
    width:100%;
  }
  .wp-block-table.he-table-responsive tr{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: var(--he-radius-sm);
    background:#fff;
    box-shadow: 0 10px 22px rgba(15,15,16,.08);
    margin: 0 0 1rem 0;
    overflow:hidden;
  }
  .wp-block-table.he-table-responsive td{
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: .75rem .9rem;
  }
  .wp-block-table.he-table-responsive td:last-child{
    border-bottom: none;
  }
  .wp-block-table.he-table-responsive td::before{
    content: attr(data-label);
    display:block;
    font-size: .82rem;
    font-weight: 800;
    color: var(--wp--preset--color--muted);
    margin-bottom: .15rem;
  }
}

/* WooCommerce — single product mobile polish (no visual rebrand)
   - Mobile: keep CTA (add-to-cart) high, show highlights, use accordions.
   - Desktop: preserve WooCommerce default reading flow.
*/
.woocommerce div.product div.images img{
  border-radius: var(--he-radius);
}

@media (min-width: 783px){
  /* Highlights + mobile accordions are mobile-only */
  .he-product-highlights-wrap,
  .he-product-details-accordion,
  .he-wc-accordion-group{
    display: none !important;
  }
}

@media (max-width: 782px){
  /* Hide the long excerpt in the summary on mobile (we show it in a details accordion below). */
  .he-excerpt-desktop{
    display: none !important;
  }

  .he-product-highlights-wrap{
    margin: 0.85rem 0 0.9rem;
  }
  .he-product-highlights{
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .he-product-highlights li{
    position: relative;
    padding-left: 1.55rem;
    margin: .45rem 0;
    line-height: 1.35;
  }
  .he-product-highlights li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.02rem;
    font-weight: 900;
    color: var(--wp--preset--color--primary);
  }

  /* Make the purchase controls feel "app-like" and easier to tap */
  .woocommerce div.product form.cart{
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .woocommerce div.product form.cart .quantity{
    display: flex;
    justify-content: center;
  }

  .woocommerce div.product form.cart .qty{
    min-height: 48px;
    border-radius: 16px;
    padding: .6rem .75rem;
    text-align: center;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  }

  .woocommerce div.product form.cart .single_add_to_cart_button,
  .woocommerce div.product form.cart .button{
    width: 100% !important;
    min-height: 52px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 800;
  }

  /* Accordions (used for the short description + transformed tabs) */
  .he-wc-accordion,
  details.he-wc-accordion{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: var(--he-radius-sm);
    background: #fff;
    box-shadow: 0 10px 22px rgba(15,15,16,.08);
    overflow: hidden;
    margin: 1rem 0;
  }

  .he-wc-accordion summary{
    cursor: pointer;
    padding: 1rem 1rem;
    font-weight: 900;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }
  .he-wc-accordion summary::-webkit-details-marker{ display:none; }

  .he-wc-accordion summary::after{
    content: "▾";
    font-size: 1.05rem;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform var(--he-transition);
    opacity: .85;
  }
  .he-wc-accordion[open] summary::after{
    transform: rotate(180deg);
  }

  .he-wc-accordion__content{
    padding: 0 1rem 1rem;
  }

  .he-wc-accordion-group{
    margin-top: 1rem;
  }
}

/* Mobile: keep cookie banners and chat widgets anchored to viewport bottom.
   Some third-party widgets can appear "floating" mid-screen on iOS when the
   browser UI expands/collapses while scrolling. This adds safe-area support
   and enforces bottom/right anchoring on common providers.
*/
@media (max-width: 782px){
  :root{
    --he-safe-bottom: env(safe-area-inset-bottom, 0px);
    --he-safe-right: env(safe-area-inset-right, 0px);
  }

  /* Cookie banners (CookieYes, GDPR Cookie Consent, Complianz, Cookiebot, OneTrust, etc.) */
  #cookie-law-info-bar,
  #cookie-notice,
  .cookie-notice-container,
  .cmplz-cookiebanner,
  .cmplz-manage-consent,
  #cky-consent,
  .cky-consent-container,
  #CybotCookiebotDialog,
  #onetrust-banner-sdk,
  .ot-sdk-container{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 2147483000 !important;
  }

  #cookie-law-info-bar,
  #cookie-notice,
  .cookie-notice-container,
  .cmplz-cookiebanner,
  #cky-consent,
  .cky-consent-container,
  #onetrust-banner-sdk{
    padding-bottom: var(--he-safe-bottom) !important;
  }

  /* Chat widgets (Brevo/Sendinblue Conversations, Crisp, Tidio, Tawk, Intercom, HubSpot, FB, etc.) */
  #sib-conversations,
  #brevo-conversations,
  #sendinblue-conversations,
  .crisp-client,
  #tidio-chat,
  #tawkchat-container,
  .tawk-min-container,
  .fb_dialog,
  .fb-customerchat,
  #intercom-container,
  .intercom-lightweight-app,
  .intercom-app,
  #hubspot-messages-iframe-container{
    bottom: calc(16px + var(--he-safe-bottom)) !important;
    right: calc(16px + var(--he-safe-right)) !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 2147483500 !important;
  }
}


/* Blog — editorial polish */
/* Category list as pill buttons (core Categories block) */
.he-blog-cats.wp-block-categories ul,
.he-blog-cats.wp-block-categories-list{
  list-style:none;
  padding-left:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  align-items:center;
}

.he-blog-cats a{
  display:inline-block;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 22px rgba(15,15,16,.06);
  text-decoration:none;
  font-weight:800;
  font-size:.92rem;
  transition: transform var(--he-transition), box-shadow var(--he-transition), background var(--he-transition);
}
.he-blog-cats a:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,15,16,.10);
}
.he-blog-cats .current-cat > a{
  border-color: rgba(0,0,0,.18);
}

/* Search block in blog headers */
.he-blog-search.wp-block-search{
  width:min(420px, 100%);
}
.he-blog-search input[type="search"]{
  border-radius:999px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  padding:.72rem 1rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* Blog card meta + category pills inside cards */
.he-blog-card__cats a{
  display:inline-block;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  color: var(--wp--preset--color--muted);
  text-decoration:none;
  font-weight:800;
  font-size:.85rem;
  margin-right:.35rem;
}
.he-blog-card__cats a:hover{
  background: rgba(0,0,0,.04);
  color: var(--wp--preset--color--ink);
}

/* Featured kicker */
.he-blog-feature .he-kicker{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}

/* Single post: author line spacing */
.he-single-content .wp-block-post-author{
  gap:.5rem;
}

/* Responsive: featured layout stacks nicely */
@media (max-width: 782px){
  .he-blog-feature .wp-block-columns{
    flex-direction: column;
  }
  .he-blog-feature .wp-block-column{
    flex-basis: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   HABLO ESPAÑOL PRO — v1.6.0 improvements
   ───────────────────────────────────────────────────────────────────
   Scope:
   1.  Headings   – balanced scale, fluid sizing
   2.  Tables     – premium desktop, card mobile (with accent strip)
   3.  Product loop – clean cards, correct button sizing after add
   4.  Cart notices – contained, styled
   5.  Header cart icon + live badge
   6.  Mobile FAB + Desktop toast
   7.  Mobile nav submenus collapsed
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  --he-red:        #F80800;          /* matches theme primary */
  --he-red-glow:   rgba(248,8,0,.18);
  --he-ink:        #0F0F10;
  --he-muted:      #4B5563;
  --he-radius:     20px;
  --he-radius-sm:  12px;
  --he-radius-xs:  8px;
  --he-border:     rgba(0,0,0,.09);
  --he-border-md:  rgba(0,0,0,.14);
  --he-shadow:     0 8px 28px rgba(15,15,16,.07);
  --he-shadow-lg:  0 16px 44px rgba(15,15,16,.11);
  --he-ease:       200ms cubic-bezier(.25,.8,.25,1);
}

/* ── 1. HEADINGS — balanced fluid scale ─────────────────────────── */
/*
  H1: main hero / page title  → 2.6–3.1rem  (was 3.8rem – too large)
  H2: section headings        → 1.9–2.4rem
  H3: card headings           → 1.35–1.7rem
  All get tighter tracking and weight 900 for crispness.
*/
h1, .wp-block-heading[level="1"], .entry-title {
  font-size: clamp(2.4rem, 5vw, 3.1rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.06 !important;
}
h2, .wp-block-heading[level="2"] {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
h3, .wp-block-heading[level="3"] {
  font-size: clamp(1.25rem, 2.5vw, 1.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
}
h4 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* WooCommerce page titles (h1 inside .woocommerce) stay in the same range */
.woocommerce-page h1.page-title,
body.woocommerce-cart h1,
body.woocommerce-checkout h1 {
  font-size: clamp(2.2rem, 4.5vw, 2.9rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

/* ── 2. TABLES — premium desktop, card mobile ───────────────────── */

/* Desktop: elegant bordered table with accent header */
.wp-block-table table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--he-border-md) !important;
  border-radius: var(--he-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--he-shadow) !important;
  background: #fff !important;
  font-size: .97rem !important;
}

/* Header row: red background, white text */
.wp-block-table thead tr {
  background: var(--he-red) !important;
}
.wp-block-table thead th {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: .82rem !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: .85rem 1.1rem !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255,255,255,.15) !important;
}
.wp-block-table thead th:last-child {
  border-right: none !important;
}

/* Body rows */
.wp-block-table tbody tr {
  transition: background var(--he-ease) !important;
}
.wp-block-table tbody tr:hover {
  background: rgba(248,8,0,.03) !important;
}
.wp-block-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,.018) !important;
}
.wp-block-table tbody tr:nth-child(even):hover {
  background: rgba(248,8,0,.04) !important;
}
.wp-block-table td {
  padding: .85rem 1.1rem !important;
  border-bottom: 1px solid var(--he-border) !important;
  border-right: 1px solid var(--he-border) !important;
  vertical-align: middle !important;
  line-height: 1.45 !important;
}
.wp-block-table td:last-child {
  border-right: none !important;
}
.wp-block-table tr:last-child td {
  border-bottom: none !important;
}

/* ─── Mobile table cards — with red left-accent strip ─── */
@media (max-width: 782px) {
  .wp-block-table.he-table-responsive {
    overflow: visible !important;
  }
  .wp-block-table.he-table-responsive table {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .wp-block-table.he-table-responsive thead {
    display: none !important;
  }
  .wp-block-table.he-table-responsive tbody,
  .wp-block-table.he-table-responsive tr,
  .wp-block-table.he-table-responsive td {
    display: block !important;
    width: 100% !important;
  }
  .wp-block-table.he-table-responsive tr {
    background: #fff !important;
    border: 1px solid var(--he-border-md) !important;
    border-left: 4px solid var(--he-red) !important;   /* <— accent strip */
    border-radius: var(--he-radius-sm) !important;
    box-shadow: var(--he-shadow) !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
    transition: box-shadow var(--he-ease) !important;
  }
  .wp-block-table.he-table-responsive tr:hover {
    box-shadow: var(--he-shadow-lg) !important;
  }
  .wp-block-table.he-table-responsive td {
    border-bottom: 1px solid var(--he-border) !important;
    border-right: none !important;
    padding: .7rem 1rem !important;
    font-size: .94rem !important;
  }
  .wp-block-table.he-table-responsive td:last-child {
    border-bottom: none !important;
  }
  /* Column label injected by JS */
  .wp-block-table.he-table-responsive td::before {
    content: attr(data-label) !important;
    display: block !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--he-red) !important;
    margin-bottom: .2rem !important;
  }
}

/* ── 3. WOOCOMMERCE PRODUCT LOOP — card grid ────────────────────── */
.woocommerce ul.products {
  display: grid !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2.5rem !important;
  gap: 1.25rem !important;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)) !important;
}
@media (max-width: 560px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

.woocommerce ul.products li.product {
  border: 1px solid var(--he-border) !important;
  border-radius: var(--he-radius) !important;
  box-shadow: var(--he-shadow) !important;
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform var(--he-ease), box-shadow var(--he-ease) !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--he-shadow-lg) !important;
}

/* Product image */
.woocommerce ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: .98rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  padding: .75rem 1rem .2rem !important;
  color: var(--he-ink) !important;
  flex: 1 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  display: block !important;
  padding: .1rem 1rem .6rem !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: var(--he-red) !important;
}

/* ── Add-to-cart button: fixed width, never grows ── */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display: block !important;
  width: calc(100% - 2rem) !important;   /* never wider than card */
  max-width: 260px !important;           /* hard cap */
  margin: auto auto .9rem !important;
  padding: .65rem 1.1rem !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  transition: transform var(--he-ease), filter var(--he-ease) !important;
}
.woocommerce ul.products li.product .button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}

/* ── FIX: "View basket" link that appears after adding ──
   Keep it tidy on its own line, small and unobtrusive     */
.woocommerce ul.products li.product .added_to_cart.wc-forward {
  display: block !important;
  text-align: center !important;
  margin: -.5rem 1rem .9rem !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: var(--he-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── 4. WOO NOTICES — contained, red-accented ──────────────────── */
.woocommerce-notices-wrapper {
  margin-bottom: 1.5rem !important;
}
.woocommerce-notices-wrapper .woocommerce-message {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .75rem !important;
  padding: .8rem 1rem !important;
  margin-bottom: 0 !important;
  border: 1px solid var(--he-border-md) !important;
  border-left: 4px solid var(--he-red) !important;
  border-radius: var(--he-radius-sm) !important;
  background: #fff !important;
  box-shadow: var(--he-shadow) !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
}
.woocommerce-notices-wrapper .woocommerce-message .button {
  background: var(--he-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: .38rem .9rem !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: filter var(--he-ease) !important;
}
.woocommerce-notices-wrapper .woocommerce-message .button:hover {
  filter: brightness(1.08) !important;
}

/* ── 5. HEADER CART ICON ────────────────────────────────────────── */
.he-header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 42px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
  font-size: 1.1rem;
  color: var(--he-ink);
  flex-shrink: 0;
  transition: transform var(--he-ease), box-shadow var(--he-ease);
}
.he-header-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
/* Badge */
.he-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--he-red);
  color: #fff;
  border-radius: 999px;
  font-size: .55rem;
  font-weight: 900;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(248,8,0,.35);
}

/* ── 6. MOBILE NAV — collapse sub-menus ─────────────────────────── */
@media (max-width: 782px) {
  /* Collapse sub-menus so "All Pages" wall disappears */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item .wp-block-navigation__submenu-container {
    display: none !important;
  }
  /* Subtle indicator on items with children */
  .wp-block-navigation__responsive-container.is-menu-open
  .has-child > .wp-block-navigation-item__content::after {
    content: " ›" !important;
    position: static !important;
    transform: none !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
    font-size: .85em;
    opacity: .45;
    transition: none !important;
  }
  /* Scrollable overlay container */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
    overflow-y: auto !important;
    max-height: calc(100dvh - 130px) !important;
  }
}

/* ── 7. DESKTOP TOAST — slide in from right ─────────────────────── */
#he-cart-toast {
  position: fixed;
  top: 78px;
  right: 18px;
  z-index: 99999;
  background: #fff;
  border: 1px solid var(--he-border-md);
  border-radius: var(--he-radius);
  box-shadow: var(--he-shadow-lg);
  padding: .9rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  width: 268px;
  transform: translateX(calc(100% + 28px));
  opacity: 0;
  pointer-events: none;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease;
}
#he-cart-toast.he-toast-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
#he-cart-toast .he-toast-icon { font-size: 1.3rem; flex-shrink: 0; padding-top: .05rem; }
#he-cart-toast .he-toast-body { flex: 1; min-width: 0; }
#he-cart-toast .he-toast-title {
  font-weight: 800; font-size: .88rem;
  color: var(--he-ink); line-height: 1.25;
}
#he-cart-toast .he-toast-sub {
  font-size: .76rem; color: var(--he-muted); margin-top: .08rem;
}
#he-cart-toast .he-toast-cta {
  display: inline-block;
  margin-top: .42rem;
  padding: .34rem .8rem;
  background: var(--he-red);
  color: #fff !important;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  transition: filter var(--he-ease);
}
#he-cart-toast .he-toast-cta:hover { filter: brightness(1.09); }
#he-cart-toast .he-toast-close {
  background: none; border: none;
  cursor: pointer; opacity: .35;
  font-size: .9rem; padding: 0;
  line-height: 1; flex-shrink: 0;
  margin-top: 3px;
  transition: opacity var(--he-ease);
}
#he-cart-toast .he-toast-close:hover { opacity: .8; }

/* ── 8. MOBILE FLOATING CART FAB ───────────────────────────────── */
#he-mobile-cart-fab {
  display: none;
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 9990;
  background: var(--he-red);
  color: #fff;
  border-radius: 999px;
  padding: .68rem 1.15rem;
  font-weight: 800;
  font-size: .88rem;
  text-decoration: none;
  box-shadow: 0 10px 26px var(--he-red-glow);
  align-items: center;
  gap: .4rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 270ms ease, transform 300ms cubic-bezier(.2,.8,.2,1);
}
#he-mobile-cart-fab.he-fab-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 782px) {
  #he-mobile-cart-fab { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   v1.6.1 — TARGETED FIXES
   1. Mobile table: text clipping + cleaner 2-col row layout
   2. Add-to-basket button: never expands when state changes
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. MOBILE TABLE — complete override ────────────────────────── */
@media (max-width: 782px) {

  /* Prevent any horizontal scroll */
  .wp-block-table.he-table-responsive,
  .wp-block-table.he-table-responsive table,
  .wp-block-table.he-table-responsive tbody {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Destroy table structure */
  .wp-block-table.he-table-responsive table {
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .wp-block-table.he-table-responsive thead {
    display: none !important;
  }
  .wp-block-table.he-table-responsive tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: .85rem !important;
  }

  /* Each row = a clean card */
  .wp-block-table.he-table-responsive tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1.5px solid rgba(0,0,0,.10) !important;
    border-left: 4px solid var(--he-red) !important;
    border-radius: var(--he-radius-sm) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.07) !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* Every cell: full-width block, text wraps */
  .wp-block-table.he-table-responsive td {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: .5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: .6rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    font-size: .94rem !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
  .wp-block-table.he-table-responsive td:last-child {
    border-bottom: none !important;
  }

  /* First cell = course name — spans full width, larger */
  .wp-block-table.he-table-responsive td:first-child {
    display: block !important;
    background: rgba(248,8,0,.04) !important;
    padding: .75rem 1rem !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    line-height: 1.4 !important;
  }

  /* Label (from JS) — left, small red uppercase */
  .wp-block-table.he-table-responsive td::before {
    content: attr(data-label) !important;
    flex-shrink: 0 !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--he-red) !important;
    opacity: .85 !important;
    white-space: nowrap !important;
  }
  /* First cell has no inline label (name spans full row) */
  .wp-block-table.he-table-responsive td:first-child::before {
    display: none !important;
  }
}

/* ── 2. ADD-TO-BASKET BUTTON — never grows on state change ──────── */
/*
  WooCommerce changes the button's class to .added after click.
  We pin width via inline-block + auto margins so it never
  stretches to fill the card regardless of class changes.
*/
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display: inline-block !important;   /* key: inline-block = shrinks to content */
  width: auto !important;
  min-width: 140px !important;
  max-width: calc(100% - 2rem) !important;
  margin: auto 1rem .9rem !important;
  padding: .62rem 1.4rem !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: .87rem !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: transform var(--he-ease), filter var(--he-ease) !important;
}
/* Wrapper trick: center the inline-block inside the flex column card */
.woocommerce ul.products li.product {
  align-items: stretch !important;
}
/* Force the button area to center itself */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
  align-self: center !important;
}
.woocommerce ul.products li.product .button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.07) !important;
}
/* State: after added — same size, never expands */
.woocommerce ul.products li.product .button.added,
.woocommerce ul.products li.product a.button.added {
  width: auto !important;
  min-width: 140px !important;
  max-width: calc(100% - 2rem) !important;
}

/* "View basket" link — tidy, below button */
.woocommerce ul.products li.product .added_to_cart.wc-forward {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin: -.4rem 0 .85rem !important;
  padding: 0 1rem !important;
  font-size: .79rem !important;
  font-weight: 700 !important;
  color: var(--he-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  white-space: nowrap !important;
  align-self: center !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v1.6.2 — Home page visual enhancements
   1. "Why choose us" — icon-based list replacing bullets
   2. Stats strip — credibility numbers between hero and services
   3. Star ratings — real ★ characters styled properly
   4. Testimonial card polish — quote mark accent
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. WHY CHOOSE US — icon list ───────────────────────────────── */
.he-why-list {
  list-style: none;
  padding: 0;
  margin: .1rem 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.he-why-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--wp--preset--color--muted, #4B5563);
}
.he-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(248,8,0,.08);
  color: var(--he-red, #F80800);
  margin-top: .05rem;
}
.he-why-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}
.he-why-text strong {
  color: var(--wp--preset--color--ink, #0F0F10);
  font-weight: 800;
}

/* ── 2. STATS STRIP ─────────────────────────────────────────────── */
.he-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  background: var(--he-red, #F80800);
  padding: 1.5rem 1.25rem;
  margin: 0 -1.25rem; /* bleed edge-to-edge inside constrained layout */
}
.he-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .5rem 2rem;
  flex: 1;
  min-width: 130px;
}
.he-stat-number {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.he-stat-plus,
.he-stat-star {
  font-size: 1.3rem;
  font-weight: 900;
  color: rgba(255,255,255,.75);
  vertical-align: super;
}
.he-stat-star {
  font-size: 1.1rem;
  vertical-align: middle;
  margin-left: .05rem;
}
.he-stat-label {
  font-size: .73rem;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .25rem;
  max-width: 120px;
  line-height: 1.3;
}
.he-stat-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .he-stats-strip {
    gap: .25rem;
    padding: 1.25rem 1rem;
  }
  .he-stat {
    padding: .4rem 1rem;
    min-width: calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
  }
  .he-stat-divider {
    display: none;
  }
  .he-stat-number {
    font-size: 1.75rem;
  }
}

/* ── 3. STAR RATINGS ────────────────────────────────────────────── */
.he-stars {
  display: inline-block;
  color: #F59E0B; /* warm amber gold */
  font-size: 1rem;
  letter-spacing: .05em;
  line-height: 1;
}

/* ── 4. TESTIMONIAL CARDS — quote accent ────────────────────────── */
/* Add a decorative opening quote mark in the background */
.is-style-he-card-hover .wp-block-quote {
  position: relative;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.is-style-he-card-hover .wp-block-quote::before {
  content: '\201C'; /* " */
  position: absolute;
  top: -1rem;
  left: -.25rem;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--he-red, #F80800);
  opacity: .10;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
}
.is-style-he-card-hover .wp-block-quote p {
  font-size: .95rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--wp--preset--color--muted, #4B5563);
  position: relative; /* sit above the ::before */
  z-index: 1;
}

/* Testimonial name heading — tighten it */
.is-style-he-card-hover > h3:first-child {
  margin-bottom: .1rem !important;
}

/* ── 5. MISC POLISH ─────────────────────────────────────────────── */
/* "Why choose" card — slightly more breathing room at bottom */
.wp-block-group.is-style-he-card .wp-block-buttons {
  margin-top: .5rem;
}

/* Footer Instagram link — make it not look broken (pointer cursor) */
.wp-block-social-links .wp-social-link {
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════
   v1.6.3 — Refined stats strip + icon fixes
   ═══════════════════════════════════════════════════════════════════ */

/* ── STATS STRIP — subtle, elegant (override the red version) ────── */
.he-stats-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  /* Light, barely-there background — not loud at all */
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.07) !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  padding: 1.75rem 1.25rem !important;
  margin: 0 !important;
}
.he-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: .4rem 2.25rem !important;
  flex: 1 !important;
  min-width: 110px !important;
}
.he-stat-number {
  font-size: 2rem !important;
  font-weight: 900 !important;
  /* Red number — the only accent colour */
  color: var(--he-red, #F80800) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}
.he-stat-plus {
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: var(--he-red, #F80800) !important;
  opacity: .65 !important;
  vertical-align: super !important;
}
.he-stat-star {
  font-size: 1.1rem !important;
  color: #F59E0B !important;  /* amber gold for star, not red */
  vertical-align: middle !important;
  margin-left: .05rem !important;
  opacity: 1 !important;
}
.he-stat-label {
  font-size: .72rem !important;
  font-weight: 700 !important;
  /* Dark muted label — not white */
  color: var(--wp--preset--color--muted, #4B5563) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  margin-top: .3rem !important;
  max-width: 110px !important;
  line-height: 1.3 !important;
}
.he-stat-divider {
  width: 1px !important;
  height: 2.25rem !important;
  background: rgba(0,0,0,.10) !important;  /* subtle grey line */
  flex-shrink: 0 !important;
}
@media (max-width: 600px) {
  .he-stats-strip {
    padding: 1.25rem .75rem !important;
  }
  .he-stat {
    padding: .4rem 1rem !important;
    min-width: calc(50% - 1.5rem) !important;
    flex: 0 0 calc(50% - 1.5rem) !important;
  }
  .he-stat-divider {
    display: none !important;
  }
  .he-stat-number {
    font-size: 1.65rem !important;
  }
}

/* ── WHY ICON — slightly smaller, tighter ────────────────────────── */
.he-why-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
}
.he-why-icon svg {
  width: 14px !important;
  height: 14px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v1.6.4 — Native blocks: why-list, stats strip, mini-cart
   Font inheritance guaranteed — all use wp-block-* classes which
   already inherit --wp--preset--font-family--system from theme.json
   ═══════════════════════════════════════════════════════════════════ */

/* ── WHY LIST — native wp:list with is-style-he-why-list ─────────── */
/* Remove default bullet and add the red square icon via ::before    */
ul.is-style-he-why-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .55rem !important;
  /* Font inherited automatically from wp-block-list → theme.json */
}
ul.is-style-he-why-list li {
  position: relative !important;
  padding-left: 2.1rem !important;
  font-size: .92rem !important;
  line-height: 1.5 !important;
}
/* Red rounded square icon */
ul.is-style-he-why-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .18em !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: rgba(248,8,0,.09) !important;
  /* Checkmark drawn with border trick */
}
/* Checkmark on top of the square */
ul.is-style-he-why-list li::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: .32em !important;
  width: 6px !important;
  height: 10px !important;
  border: 2px solid var(--he-red, #F80800) !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
}
ul.is-style-he-why-list li strong {
  color: var(--wp--preset--color--ink, #0F0F10) !important;
  font-weight: 800 !important;
}

/* ── STATS STRIP — native wp:group with he-stats-strip class ─────── */
.he-stats-strip.wp-block-group {
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.07) !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  padding: 1.75rem 1.25rem !important;
  margin: 0 !important;
  gap: 0 !important;
  /* Font: inherited from wp-block-group → theme.json system font */
}

/* Each stat item */
.he-stat.wp-block-group {
  align-items: center !important;
  text-align: center !important;
  padding: .4rem 2rem !important;
  flex: 1 !important;
  min-width: 110px !important;
  /* Vertical separator via box-shadow right side */
  box-shadow: 1px 0 0 rgba(0,0,0,.09) !important;
  gap: .2rem !important;
}
.he-stat.wp-block-group:last-child {
  box-shadow: none !important;
}

/* The number paragraph */
.he-stat-number.wp-block-paragraph,
p.he-stat-number {
  font-size: 2rem !important;
  font-weight: 900 !important;
  color: var(--he-red, #F80800) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
  /* Font: inherits system-ui from theme.json — same as headings */
}
/* Special: rating stat has a star — make the ★ amber */
.he-stat-rating.wp-block-paragraph,
p.he-stat-rating {
  color: var(--he-red, #F80800) !important;
}
p.he-stat-rating {
  /* "5 ★" — colour the star part amber without JS */
  background: linear-gradient(90deg,
    var(--he-red, #F80800) 0 55%,
    #F59E0B 55% 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* The label paragraph */
.he-stat-label.wp-block-paragraph,
p.he-stat-label {
  font-size: .71rem !important;
  font-weight: 700 !important;
  color: var(--wp--preset--color--muted, #4B5563) !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  max-width: 110px !important;
  /* Font: inherits system-ui — guaranteed same family */
}

/* Mobile: 2×2 grid */
@media (max-width: 600px) {
  .he-stats-strip.wp-block-group {
    flex-wrap: wrap !important;
    padding: 1.25rem .75rem !important;
  }
  .he-stat.wp-block-group {
    flex: 0 0 calc(50% - 1rem) !important;
    min-width: 0 !important;
    padding: .6rem .5rem !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
  }
  .he-stat.wp-block-group:nth-child(3),
  .he-stat.wp-block-group:nth-child(4) {
    border-bottom: none !important;
  }
  p.he-stat-number { font-size: 1.65rem !important; }
}

/* ── WOO MINI-CART — styled to match header aesthetic ────────────── */
/*
  wp:woocommerce/mini-cart renders:
  .wc-block-mini-cart
    .wc-block-mini-cart__button (the clickable icon area)
      .wc-block-mini-cart__quantity-badge (count bubble)
  
  When cart is empty WooCommerce adds: .wc-block-mini-cart--hidden-price
  We also hide it when count is 0 via CSS (the block itself handles this)
*/
.he-header-mini-cart .wc-block-mini-cart__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.07) !important;
  padding: 0 .6rem !important;
  text-decoration: none !important;
  color: var(--he-ink, #0F0F10) !important;
  transition: transform var(--he-ease, 200ms), box-shadow var(--he-ease, 200ms) !important;
  cursor: pointer !important;
  /* Font: inherits theme system font — no override needed */
}
.he-header-mini-cart .wc-block-mini-cart__button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
}

/* Cart icon inside the button */
.he-header-mini-cart .wc-block-mini-cart__icon {
  width: 20px !important;
  height: 20px !important;
  color: var(--he-ink, #0F0F10) !important;
}

/* Item count badge — red pill */
.he-header-mini-cart .wc-block-mini-cart__quantity-badge {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background: var(--he-red, #F80800) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: .55rem !important;
  font-weight: 900 !important;
  min-width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 5px rgba(248,8,0,.3) !important;
  line-height: 1 !important;
}

/* Price text next to icon — hide it (we set hasHiddenPrice:true in block but belt+braces) */
.he-header-mini-cart .wc-block-mini-cart__amount {
  display: none !important;
}

/* ── HIDE MINI-CART WHEN EMPTY ───────────────────────────────────── */
/*
  WooCommerce adds aria-label="0 items in cart" when empty.
  We can't rely on that reliably across all WC versions, so we use
  the data attribute that WC sets, plus our JS fallback.
  WC also adds .wc-block-mini-cart--has-count when count > 0
*/
.he-header-mini-cart:not(.he-cart-has-items) {
  /* Default: hide until JS confirms items exist */
  /* We show it immediately if WC block reports items */
}
/* When WC reports items exist */
.wc-block-mini-cart[data-cart-items-count="0"] .wc-block-mini-cart__button,
.wc-block-mini-cart:not([data-cart-items-count]) .wc-block-mini-cart__button {
  /* Don't hide by default — WC handles this with JS */
}

/* Drawer/modal that opens on click — constrain and style */
.he-header-mini-cart .wc-block-mini-cart__drawer {
  font-family: var(--wp--preset--font-family--system) !important;
}
.he-header-mini-cart .wc-block-mini-cart__drawer .wc-block-cart__submit-button {
  border-radius: 999px !important;
  background: var(--he-red, #F80800) !important;
  font-weight: 800 !important;
}

/* ── REMOVE OLD RAW-HTML CART STYLES (superseded) ────────────────── */
/* These targeted #he-header-cart-link which no longer exists in header */
.he-header-cart { display: none !important; }
.he-cart-badge  { display: none !important; }