/* ============================================================
   RFMA Theme — Main Stylesheet
   Dark header/footer · White content body · Red accent
   ============================================================ */

/* ── 1. CUSTOM PROPERTIES ───────────────────────────────── */
:root {
    /* Dark palette (header / footer / hero banners) */
    --color-dark:        #171a1d;
    --color-dark-alt:    #202328;
    --color-dark-light:  #2a2f36;
    --color-dark-border: rgba(255,255,255,0.1);

    /* Light palette (content area) */
    --color-white:       #ffffff;
    --color-light-bg:    #f6f7f8;
    --color-light-border:#e0e0e0;

    /* Accent */
    --color-accent:      #eb2227;
    --color-accent-hover:#c91a1f;
    --color-champagne:   #b6b1a4;  /* refined warm neutral, less gold */

    /* Text */
    --color-text-light:  #ffffff;
    --color-text-muted:  #c9c9c9;
    --color-text-dark:   #222222;
    --color-text-body:   #555555;

    /* Fonts */
    --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* Layout */
    --topbar-height:        41px;
    --header-height:        87px;
    --header-height-shrunk: 60px;
    --site-offset:          calc(var(--topbar-height) + var(--header-height));
    --container-width:      1280px;
    --container-padding:    0 30px;
    --radius:               4px;
    --transition:           0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. RESET & BASE ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }

/* Front page: strip any article / entry-content spacing so WPBakery
   rows sit flush against the header with zero white-space gap */
.home.page .page-main > article,
.home.page .page-main > article > .entry-content,
.front-page-article,
.front-page-article > .entry-content {
    margin:  0;
    padding: 0;
}
/* WPBakery sections / rows on front page — no default top gap */
.home.page .vc_section:first-child,
.home.page .vc_row:first-child,
.home.page .wpb_row:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body {
    font-family:      var(--font-body);
    font-size:        15.5px;
    line-height:      1.7;
    letter-spacing:   0.01em;
    color:            var(--color-text-dark);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    /* No padding-top — top bar scrolls naturally, header is sticky */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent-hover); }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    font-weight:    600;
    line-height:    1.2;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color:          var(--color-text-dark);
}
h1 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
h2 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
h3 { font-weight: 600; letter-spacing: -0.005em; }

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 3vw, 2rem); }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1.2em; color: var(--color-text-body); font-size: 16px; }

/* ── 3. LAYOUT ───────────────────────────────────────────── */
.container {
    max-width: var(--container-width);
    margin:    0 auto;
    padding:   var(--container-padding);
}

.site-content { min-height: 60vh; background-color: var(--color-white); }

/* ── 4. TOP BAR ──────────────────────────────────────────── */
/* Dark bar above the header — scrolls away naturally (position: relative) */
.top-bar {
    position:      relative;
    height:        var(--topbar-height);
    /* background:    radial-gradient(ellipse 70% 100% at 50% 50%,
                                   #2d333c 0%,
                                   #181b20 55%,
                                   #0b0c0e 100%); */
    background: radial-gradient(ellipse 70% 100% at 50% 50%,
                            #ec3236 0%,
                            #eb2227 55%,
                            #c91a1f 100%);
    /* border-bottom: 1px solid rgba(255,255,255,0.06); */
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display:       flex;
    align-items:   center;
    z-index:       1001;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.top-bar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
}

/* Left — social icons + divider + email */
.top-bar-left {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.top-bar-social {
    display:     flex;
    align-items: center;
    color:       rgba(255,255,255,0.8);
    transition:  color var(--transition);
}
.top-bar-social:hover { color: #fff; }

.top-bar-divider {
    display:          inline-block;
    width:            1px;
    height:           12px;
    /* background-color: rgba(201, 169, 110, 0.45); */
    background-color: rgba(255, 255, 255, 0.35);
    margin:           0 6px;
}

.top-bar-contact-link {
    display:        flex;
    align-items:    center;
    gap:            6px;
    font-size:      11px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color:          rgba(255, 255, 255, 0.9);
    transition:     color var(--transition);
}
.top-bar-contact-link:hover { color: #fff; }
.top-bar-location { cursor: default; }
.top-bar-location:hover { color: rgba(255, 255, 255, 0.9); }

/* Right */
.top-bar-right {
    display:     flex;
    align-items: center;
    gap:         16px;
}
.top-bar-right ul { display: none; } /* hide any nav menu output in top bar */

/* ── 5. HEADER ───────────────────────────────────────────── */
/* sticky — stays in document flow initially, locks to top once top bar scrolls away */
.site-header {
    position:      sticky;
    top:           0;
    z-index:       1000;
    background:    linear-gradient(180deg,
                                   rgba(255, 255, 255, 0.055) 0%,
                                   rgba(255, 255, 255, 0)     32%),
                   radial-gradient(ellipse 95% 170% at 50% 0%,
                                   #313842 0%,
                                   #1a1e23 50%,
                                   #0b0c0e 100%);
    border-bottom: 1px solid rgba(235, 34, 39, 0.25);
    box-shadow:    0 4px 20px rgba(0, 0, 0, 0.4);
    height:        var(--header-height);
    transition:    height var(--transition), box-shadow var(--transition);
}

.site-header.is-shrunk {
    height:     var(--header-height-shrunk);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.site-header.is-shrunk .site-tagline {
    display: none;
}

.header-inner {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    height:                100%;
    gap:                   16px;
}

/* Branding — left column */
.site-branding {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-shrink: 0;
    justify-self: start;
}

.site-logo-link { display: flex; align-items: center; }

.site-header .site-logo {
    height:     56px;
    width:      auto;
    max-width:  140px;
    object-fit: contain;
    filter:     drop-shadow(0 0 16px rgba(255, 255, 255, 0.18))
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    transition: height var(--transition);
}
.site-header.is-shrunk .site-logo { height: 38px; }

.site-title-group {
    display:         flex;
    flex-direction:  column;
    line-height:     1.15;
    text-decoration: none;
}

.site-name {
    font-family:    var(--font-heading);
    font-size:      1.9rem;
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--color-text-light);
    letter-spacing: 0.05em;
}

.site-tagline {
    font-family:    var(--font-body);
    font-size:      0.65rem;
    color:          var(--color-text-muted);
    font-weight:    400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space:    nowrap;
}

/* Header Actions — right column (search + cart + hamburger) */
.header-actions {
    display:         flex;
    align-items:     center;
    gap:             6px;
    justify-content: flex-end;
}

.header-icon-btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            38px;
    height:           38px;
    background:       transparent;
    border:           none;
    color:            rgba(255,255,255,0.75);
    cursor:           pointer;
    border-radius:    var(--radius);
    transition:       color var(--transition),
                      background-color var(--transition),
                      transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    position:         relative;
    padding:          0;
}
.header-icon-btn:hover {
    color:            #fff;
    background-color: rgba(255,255,255,0.07);
    transform:        scale(1.08);
}
.header-icon-btn:active { transform: scale(0.96); }

/* Cart badge — pulses briefly when the cart count changes (a tiny JS hook
   in main.js listens for WooCommerce's `added_to_cart` event and toggles
   .is-pulsing on the badge to retrigger the animation). */
.header-cart .cart-count {
    position:         absolute;
    top:              2px;
    right:            2px;
    min-width:        16px;
    height:           16px;
    background-color: var(--color-accent);
    color:            #fff;
    font-size:        10px;
    font-weight:      700;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    line-height:      1;
    padding:          0 3px;
    transform-origin: center;
}
@keyframes rfma-cart-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(235, 34, 39, 0.45); }
    40%  { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(235, 34, 39, 0);   }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(235, 34, 39, 0);    }
}
.header-cart .cart-count.is-pulsing {
    animation: rfma-cart-pulse 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Search slide-down panel — animates open/closed instead of display:none
   popping. max-height + opacity + border-widths all transition so the bar
   eases down and the borders fade in only when expanded. */
.header-search-bar {
    overflow:         hidden;
    max-height:       0;
    opacity:          0;
    background-color: var(--color-dark-alt);
    border-top:       0 solid rgba(255,255,255,0.08);
    border-bottom:    0 solid var(--color-accent);
    padding:          0;
    transition:       max-height          0.35s cubic-bezier(0.4, 0, 0.2, 1),
                      opacity             0.25s cubic-bezier(0.4, 0, 0.2, 1),
                      padding             0.35s cubic-bezier(0.4, 0, 0.2, 1),
                      border-top-width    0.35s linear,
                      border-bottom-width 0.35s linear;
}
.header-search-bar.is-open {
    max-height:          200px;
    opacity:             1;
    padding:             14px 0;
    border-top-width:    1px;
    border-bottom-width: 3px;
}
.header-search-bar .container {
    display:     flex;
    align-items: center;
    gap:         12px;
}
.header-search-bar .search-form {
    display: flex;
    flex:    1;
    gap:     0;
}
.header-search-bar .search-field {
    flex:             1;
    height:           44px;
    background-color: rgba(255,255,255,0.07);
    border:           1px solid rgba(255,255,255,0.12);
    border-right:     none;
    border-radius:    var(--radius) 0 0 var(--radius);
    padding:          0 16px;
    font-family:      var(--font-body);
    font-size:        14px;
    color:            #fff;
    outline:          none;
}
.header-search-bar .search-field::placeholder { color: rgba(255,255,255,0.35); }
.header-search-bar .search-submit {
    background-color: var(--color-accent);
    color:            #fff;
    border:           none;
    height:           44px;
    padding:          0 20px;
    font-family:      var(--font-body);
    font-size:        13px;
    font-weight:      600;
    text-transform:   uppercase;
    letter-spacing:   0.08em;
    cursor:           pointer;
    border-radius:    0 var(--radius) var(--radius) 0;
    transition:       background-color var(--transition);
}
.header-search-bar .search-submit:hover { background-color: var(--color-accent-hover); }
.header-search-close {
    background:  transparent;
    border:      none;
    color:       rgba(255,255,255,0.55);
    cursor:      pointer;
    padding:     6px;
    border-radius: var(--radius);
    transition:  color var(--transition);
    flex-shrink: 0;
}
.header-search-close:hover { color: #fff; }

/* ── 6. PRIMARY NAVIGATION ───────────────────────────────── */
/* Nav sits in the centre column of the 3-col header grid */
.main-navigation { justify-self: center; }

.main-navigation ul {
    display:     flex;
    align-items: center;
    gap:         0;
    list-style:  none;
}

.main-navigation ul li { position: relative; }

.main-navigation ul li a {
    display:        block;
    padding:        8px 16px;
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color:          var(--color-text-light);   /* WHITE by default */
    transition:     color var(--transition);
    white-space:    nowrap;
}

/* Hover & active nav links → RED */
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current_page_ancestor > a {
    color: var(--color-accent);
}

/* Sliding red underline — top-level nav links only */
.main-navigation > ul > li > a {
    position: relative;
}
.main-navigation > ul > li > a::after {
    content:     '';
    position:    absolute;
    bottom:      -2px;
    left:        50%;
    width:       0;
    height:      2px;
    background:  var(--color-accent);
    transition:  width 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-navigation > ul > li > a:hover::after,
.main-navigation > ul > li.current-menu-item > a::after,
.main-navigation > ul > li.current-menu-ancestor > a::after,
.main-navigation > ul > li.current_page_item > a::after,
.main-navigation > ul > li.current_page_ancestor > a::after {
    width: calc(100% - 32px);
    left:  16px;
}

/* Invisible bridge below each top-level nav item — keeps :hover alive while
   the cursor crosses the 6px gap between the nav link and the dropdown.
   Lives on the <li> (not inside the dropdown) so it isn't clipped by the
   dropdown's overflow:hidden. */
.main-navigation > ul > li::after {
    content:  '';
    position: absolute;
    top:      100%;
    left:     0;
    right:    0;
    height:   10px;
    background: transparent;
    pointer-events: auto;
}

/* ── Dropdown menus — frosted glass on dark, LEFT aligned ── */
.main-navigation ul ul {
    display:                 none;
    position:                absolute;
    top:                     100%;
    left:                    0;
    right:                   auto;
    min-width:               220px;
    margin-top:              6px;
    background:              rgba(20, 22, 26, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter:         blur(14px) saturate(140%);
    border:                  1px solid rgba(255, 255, 255, 0.08);
    border-top:              1px solid rgba(235, 34, 39, 0.7);
    border-radius:           6px;
    overflow:                hidden;
    z-index:                 200;
    box-shadow:              0 20px 40px rgba(0, 0, 0, 0.55);
    text-align:              left;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul { display: block; }  /* block, not flex */

.main-navigation ul ul li {
    display: block;    /* stack items vertically */
    width:   100%;
}

.main-navigation ul ul li a {
    display:        block;
    width:          100%;
    padding:        12px 20px;
    font-size:      12px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          rgba(255, 255, 255, 0.85);
    border-bottom:  1px solid rgba(255, 255, 255, 0.05);
    background:     transparent;
    text-align:     left;
    white-space:    nowrap;
    transition:     background-color var(--transition), color var(--transition);
}

.main-navigation ul ul li:last-child a { border-bottom: none; }

/* Dropdown hover → soft red tint, full white text */
.main-navigation ul ul li a:hover {
    background-color: rgba(235, 34, 39, 0.12);
    color:            #fff;
}

/* Dropdown active page → red bg, white text */
.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current_page_item > a {
    background-color: var(--color-accent);
    color:            var(--color-text-light);
}

/* ── 7. HEADER CART & HAMBURGER ─────────────────────────── */
.header-cart {
    position:    relative;
    color:       var(--color-text-muted);
    transition:  color var(--transition);
    display:     flex;
    align-items: center;
}
.header-cart:hover { color: var(--color-accent); }

.cart-count {
    position:         absolute;
    top:              -6px;
    right:            -8px;
    background-color: var(--color-accent);
    color:            #fff;
    font-size:        0.6rem;
    font-weight:      700;
    width:            16px;
    height:           16px;
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.menu-toggle {
    display:         none;
    flex-direction:  column;
    justify-content: space-between;
    width:           26px;
    height:          20px;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0;
    transition:      transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-toggle:hover  { transform: scale(1.1); }
.menu-toggle:active { transform: scale(0.95); }

.hamburger-bar {
    display:          block;
    width:            100%;
    height:           2px;
    background-color: var(--color-text-light);
    transition:       all var(--transition);
    border-radius:    2px;
}
.menu-toggle.is-active .hamburger-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.is-active .hamburger-bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .hamburger-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── 8. MOBILE MENU ──────────────────────────────────────── */
.mobile-nav {
    display:          none;
    background-color: var(--color-dark-alt);
    border-top:       1px solid var(--color-dark-border);
    padding:          0;
    max-height:       0;
    overflow:         hidden;
    transition:       max-height 0.35s ease;
}
.mobile-nav.is-open { max-height: 800px; }

.mobile-nav ul { list-style: none; }

.mobile-nav ul li a {
    display:        block;
    padding:        12px 24px;
    font-size:      0.85rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--color-text-muted);
    border-bottom:  1px solid var(--color-dark-border);
    transition:     color var(--transition), background var(--transition);
}
.mobile-nav ul li a:hover { color: var(--color-accent); background: var(--color-dark-light); }
.mobile-nav ul ul li a    { padding-left: 40px; font-size: 0.8rem; }

/* ── 9. PAGE HERO BANNER (title bars) ────────────────────── */
.page-hero {
    position:            relative;
    display:             flex;
    align-items:         center;
    min-height:          300px;
    background-color:    var(--color-dark);
    background-size:     cover;
    background-position: center 35%;
    background-repeat:   no-repeat;
    padding:             80px 0;
    margin-bottom:       0;
    overflow:            hidden;
}

/* Uniform dark overlay — strong enough for readable text over any photo */
.page-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
                    180deg,
                    rgba(15, 17, 20, 0.55) 0%,
                    rgba(15, 17, 20, 0.75) 100%
                );
    pointer-events: none;
}

/* Fallback: no image — just plain dark */
.page-hero:not(.page-hero--has-bg) .page-hero-overlay { display: none; }

.page-hero .container { position: relative; z-index: 1; width: 100%; }

/* Breadcrumb above the title */
.rfma-breadcrumb {
    display:        block;
    margin:         0 0 18px;
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color:          rgba(255, 255, 255, 0.6);
}
.rfma-breadcrumb a {
    color:           rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition:      color var(--transition);
}
.rfma-breadcrumb a:hover { color: #fff; }
.rfma-breadcrumb [aria-current="page"] { color: var(--color-champagne); }
.rfma-breadcrumb-sep {
    display:    inline-block;
    margin:     0 4px;
    color:      rgba(255, 255, 255, 0.3);
    font-weight: 400;
}

/* Title with a vertical red accent rule on its left */
.page-hero-title {
    position:       relative;
    padding-left:   22px;
    font-family:    var(--font-heading);
    font-size:      clamp(2.2rem, 5.5vw, 4rem);
    font-weight:    700;
    letter-spacing: -0.015em;
    color:          var(--color-text-light);
    margin:         0;
    line-height:    1.05;
    text-transform: uppercase;
    text-shadow:    0 2px 16px rgba(0, 0, 0, 0.5);
}
.page-hero-title::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        8%;
    bottom:     8%;
    width:      3px;
    background: var(--color-accent);
    box-shadow: 0 0 12px rgba(235, 34, 39, 0.5);
}
.page-hero-title span { color: var(--color-accent); }

/* Optional subtitle below the title (use <p class="page-hero-subtitle">…</p>) */
.page-hero-subtitle {
    font-family:    var(--font-body);
    font-size:      clamp(0.95rem, 1.4vw, 1.1rem);
    font-weight:    400;
    color:          rgba(255, 255, 255, 0.78);
    margin:         18px 0 0;
    padding-left:   22px;
    max-width:      640px;
    line-height:    1.6;
    letter-spacing: 0.01em;
}

/* ── 10. BUTTONS ─────────────────────────────────────────── */
.btn,
input[type="submit"],
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display:         inline-block;
    position:        relative;
    overflow:        hidden;
    padding:         14px 32px;
    font-family:     var(--font-body);
    font-size:       0.8rem;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  0.12em;
    border-radius:   var(--radius);
    cursor:          pointer;
    transition:      background-color var(--transition), color var(--transition), border-color var(--transition), transform 0.15s ease, box-shadow 0.2s ease;
    border:          2px solid transparent;
    text-align:      center;
    line-height:     1.4;
    white-space:     nowrap;
    text-decoration: none;
}

/* Subtle lift + red glow on hover for all buttons */
.btn-primary:hover,
.btn-outline:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover {
    transform:  translateY(-1px);
    box-shadow: 0 6px 18px rgba(235, 34, 39, 0.35);
}

/* ── Shiny button: cursor-tracking spotlight via background-image ────────
   We use a radial background-image layered on top of the button's
   background-color. CSS guarantees text content renders ABOVE all
   background layers, so text is always visible — no z-index gymnastics. */
:is(
    .btn,
    .btn-primary,
    .btn-outline,
    .innovation-button,
    .rev-btn,
    .vc_btn3,
    .vc_general,
    .gform_button,
    .search-submit,
    input[type="submit"],
    button[type="submit"],
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .footer-widget-col .subscribe form input[type="submit"]
) {
    position:         relative;
    overflow:         hidden;
    background-image: radial-gradient(
                          circle 90px at var(--mx, 50%) var(--my, 50%),
                          rgba(255, 255, 255, 0) 0%,
                          rgba(255, 255, 255, 0) 70%
                      );
    background-position: 0 0;
    background-repeat:   no-repeat;
    transition:       background-color var(--transition),
                      color            var(--transition),
                      border-color     var(--transition),
                      background-image 0.25s var(--transition),
                      transform        0.15s ease,
                      box-shadow       0.2s ease;
}

/* On hover: the radial spotlight becomes visible and tracks the cursor */
:is(
    .btn,
    .btn-primary,
    .btn-outline,
    .innovation-button,
    .rev-btn,
    .vc_btn3,
    .vc_general,
    .gform_button,
    .search-submit,
    input[type="submit"],
    button[type="submit"],
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .footer-widget-col .subscribe form input[type="submit"]
):hover {
    background-image: radial-gradient(
                          circle 90px at var(--mx, 50%) var(--my, 50%),
                          rgba(255, 255, 255, 0.32) 0%,
                          rgba(255, 255, 255, 0)   70%
                      );
}

/* Primary — red */
.btn-primary,
input[type="submit"],
button[type="submit"],
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
    background-color: var(--color-accent) !important;
    color:            #fff !important;
    border-color:     var(--color-accent) !important;
}
.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--color-accent-hover) !important;
    border-color:     var(--color-accent-hover) !important;
    color:            #fff !important;
}

/* Outline */
.btn-outline {
    background-color: transparent !important;
    color:            var(--color-accent) !important;
    border-color:     var(--color-accent) !important;
}
.btn-outline:hover {
    background-color: var(--color-accent) !important;
    color:            #fff !important;
    border-color:     var(--color-accent) !important;
}

/* Secondary WooCommerce buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--color-dark);
    color:            var(--color-text-light);
    border-color:     var(--color-dark);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--color-accent);
    border-color:     var(--color-accent);
    color:            #fff;
}

/* ── 11. FORMS ───────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: #fff;
    color:            var(--color-text-dark);
    border:           1px solid var(--color-light-border);
    border-radius:    var(--radius);
    padding:          10px 14px;
    font-family:      var(--font-body);
    font-size:        0.875rem;
    width:            100%;
    transition:       border-color var(--transition);
    appearance:       none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus { outline: none; border-color: var(--color-accent); }

label {
    font-size:      0.8rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--color-text-body);
    display:        block;
    margin-bottom:  6px;
}

/* ── 12. CONTENT AREA ────────────────────────────────────── */

/* page-main has no extra padding — inner page-content-wrap handles it */
.site-main  { }
.page-main  { }

/* inner pages: generous top/bottom space around content */
.page-content-wrap { padding: 80px 0 100px; }

/* WooCommerce pages: matching rhythm — but NOT page.php-rendered pages
   (cart, checkout, account). Those carry their own .page-content-wrap and
   keep the page-hero inside .site-main; padding here would gap the hero. */
.woocommerce-page .site-main:not(.page-main) { padding: 40px 0 60px; }

/* single posts */
.single-post-layout { padding: 64px 0 100px; }

.entry-content {
    color:          var(--color-text-body);
    font-size:      1rem;
    line-height:    1.75;
    letter-spacing: 0.005em;
}
.entry-content p {
    color:         var(--color-text-body);
    margin:        0 0 1.25em;
    font-size:     1.0625rem;
    line-height:   1.75;
}
.entry-content p:last-child { margin-bottom: 0; }

/* ── Editorial lead-in: first paragraph is larger, slightly lighter. */
.entry-content > p:first-of-type {
    font-size:   clamp(1.15rem, 1.6vw, 1.25rem);
    font-weight: 400;
    line-height: 1.65;
    color:       var(--color-text-dark);
}

.entry-content li {
    color:       var(--color-text-body);
    margin:      0 0 0.5em;
    line-height: 1.7;
}

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    color:          var(--color-text-dark);
    margin:         2em 0 0.7em;
    line-height:    1.2;
    letter-spacing: 0;
}
.entry-content h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-top: 1.4em; }

/* ── Refined H2 — tighter tracking + small red accent rule below */
.entry-content h2 {
    font-size:      clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight:    700;
    letter-spacing: -0.015em;
    margin:         2.5em 0 1.1em;
    padding-bottom: 18px;
    position:       relative;
}
.entry-content h2::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      40px;
    height:     2px;
    background: var(--color-accent);
}

.entry-content h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.005em; }
.entry-content h4 { font-size: 1.15rem; }
.entry-content h5 { font-size: 1rem; }
.entry-content h6 { font-size: 0.9rem; letter-spacing: 0.05em; }
.entry-content > *:first-child { margin-top: 0; }

/* ── Animated red underline on body links — excludes button-styled anchors
   so they keep their own cursor-tracking spotlight + hover lift. */
.entry-content a:not(.btn):not(.btn-primary):not(.btn-outline):not(.innovation-button):not(.rev-btn):not(.vc_btn3):not(.vc_general):not(.button):not(:has(.fa-file-pdf-o)) {
    color:               var(--color-accent);
    text-decoration:     none;
    background-image:    linear-gradient(var(--color-accent), var(--color-accent));
    background-repeat:   no-repeat;
    background-position: 0 100%;
    background-size:     0% 1px;
    padding-bottom:      2px;
    transition:          background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                         color           var(--transition);
}
.entry-content a:not(.btn):not(.btn-primary):not(.btn-outline):not(.innovation-button):not(.rev-btn):not(.vc_btn3):not(.vc_general):not(.button):not(:has(.fa-file-pdf-o)):hover {
    color:           var(--color-accent-hover);
    background-size: 100% 1px;
}

/* ── Refined image treatment — subtle shadow, italic captions, support
   for .alignwide / .alignfull breaking past the text column. */
.entry-content img {
    border-radius: var(--radius);
    box-shadow:    0 8px 30px rgba(0, 0, 0, 0.08);
    margin:        1.75em 0;
}
.entry-content figure { margin: 1.75em 0; }
.entry-content figure img { margin: 0; }
.entry-content .wp-caption-text,
.entry-content figcaption {
    font-family:    var(--font-body);
    font-size:      0.8rem;
    font-style:     italic;
    color:          var(--color-text-body);
    text-align:     center;
    margin-top:     0.8em;
    line-height:    1.55;
    letter-spacing: 0.01em;
}
.entry-content .alignwide,
.entry-content .alignfull {
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width:    100vw;
}
.entry-content .alignfull img {
    width:         100%;
    border-radius: 0;
    box-shadow:    none;
}

.entry-content ul, .entry-content ol { list-style: disc; padding-left: 1.5em; margin: 0 0 1.25em; }
.entry-content ol { list-style: decimal; }

/* ── Editorial blockquote / pull-quote — large italic, top + bottom
   hairlines, oversized red opening quote mark. */
.entry-content blockquote {
    position:    relative;
    border:      none;
    background:  none;
    border-top:    1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding:     2.4em 0 2em;
    margin:      2.5em 0;
    font-family: var(--font-body);
    font-size:   clamp(1.15rem, 2vw, 1.4rem);
    font-style:  italic;
    font-weight: 400;
    line-height: 1.5;
    text-align:  center;
    color:       var(--color-text-dark);
}
.entry-content blockquote::before {
    content:        '\201C';   /* curly opening double quote */
    position:       absolute;
    top:            -0.05em;
    left:           50%;
    transform:      translateX(-50%);
    font-family:    Georgia, 'Times New Roman', serif;
    font-size:      4.5rem;
    font-style:     normal;
    line-height:    1;
    color:          var(--color-accent);
    background:     #fff;
    padding:        0 18px;
}
.entry-content blockquote p {
    font-size:   inherit;
    line-height: inherit;
    color:       inherit;
    margin:      0 0 0.6em;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite {
    display:        block;
    margin-top:     1.2em;
    font-style:     normal;
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          var(--color-text-body);
}
.entry-content blockquote cite::before { content: '\2014\00a0'; /* em-dash + nbsp */ }

/* ── 13. POSTS GRID ──────────────────────────────────────── */
.posts-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   30px;
    margin-bottom:         50px;
}

.post-card {
    background-color: var(--color-white);
    border:           1px solid var(--color-light-border);
    border-radius:    var(--radius);
    overflow:         hidden;
    box-shadow:       0 2px 8px rgba(0,0,0,0.06);
    transition:       border-color var(--transition), box-shadow var(--transition);
}
.post-card:hover {
    border-color: var(--color-accent);
    box-shadow:   0 4px 20px rgba(235,34,39,0.12);
}

.post-card-thumbnail img { width: 100%; height: 200px; object-fit: cover; }

.post-card-body { padding: 24px; }

.post-meta { font-size: 0.72rem; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

.entry-title { font-size: 1.4rem; margin-bottom: 12px; }
.entry-title a { color: var(--color-text-dark); }
.entry-title a:hover { color: var(--color-accent); }

.entry-summary p { font-size: 0.875rem; margin-bottom: 16px; color: var(--color-text-body); }

/* ── 14. SINGLE POST ─────────────────────────────────────── */
.single-post-layout {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   40px;
    padding:               40px 0 70px;
    align-items:           start;
}

.post-thumbnail { margin-bottom: 30px; border-radius: var(--radius); overflow: hidden; }
.post-thumbnail img { width: 100%; max-height: 480px; object-fit: cover; }

.post-meta .post-date { color: var(--color-accent); }
.post-meta .post-cats a { color: var(--color-text-body); }

/* ── 15. SIDEBAR ─────────────────────────────────────────── */
.widget-area { display: flex; flex-direction: column; gap: 24px; }

.widget {
    background-color: var(--color-white);
    border:           1px solid var(--color-light-border);
    border-radius:    var(--radius);
    padding:          24px;
    box-shadow:       0 1px 4px rgba(0,0,0,0.05);
}
.widget-title {
    font-size:      1.1rem;
    color:          var(--color-text-dark);
    margin-bottom:  16px;
    padding-bottom: 10px;
    border-bottom:  2px solid var(--color-accent);
}
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--color-light-border); font-size: 0.875rem; color: var(--color-text-body); }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--color-text-body); }
.widget ul li a:hover { color: var(--color-accent); }

/* ── 16. FOOTER ──────────────────────────────────────────── */
.site-footer {
    position:   relative;
    background:
        /* subtle film-grain noise for tactile depth */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
        radial-gradient(ellipse 90% 120% at 50% 0%,
                        #22262c 0%,
                        #181b1f 50%,
                        #0f1114 100%);
    background-blend-mode: overlay, normal;
    color:      var(--color-text-light);
    margin-top: 0;
    overflow:   hidden;
}
/* Hairline red rule above footer that echoes the header bottom-border */
.site-footer::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    width:      80px;
    height:     2px;
    background: var(--color-accent);
    box-shadow: 0 0 10px rgba(235, 34, 39, 0.4);
    z-index:    2;
}
/* Decorative skull mark — sits in the upper-middle of the footer (right) */
.site-footer::after {
    content:             '';
    position:            absolute;
    top:                 43%;
    right:               -40px;
    transform:           translateY(-50%);
    width:               520px;
    height:              520px;
    background-image:    url('/wp-content/uploads/2026/05/Skull_Full_Leaf.png');
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     contain;
    opacity:             0.8;
    pointer-events:      none;
    z-index:             0;
}
.site-footer .footer-widgets,
.site-footer .footer-bottom {
    position: relative;
    z-index:  1;
}
@media (max-width: 768px) {
    .site-footer::after { width: 320px; height: 320px; top: 43%; right: -30px; transform: translateY(-50%); }
}

/* Brand column inside the footer widget grid (replaces centered footer-brand) */
.footer-widget-col--brand {
    padding-top: 0;
    position:    relative;
}
/* Vertical hairline divider between brand column and the widget columns */
.footer-widget-col--brand::after {
    content:    '';
    position:   absolute;
    top:        4px;
    bottom:     4px;
    right:      -36px;      /* sits in the middle of the 72px column gap */
    width:      1px;
    background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) {
    .footer-widget-col--brand::after { display: none; }
}

/* Heritage line: "Est. 2014 · Canada" — sits below the tagline accent rule */
.footer-est {
    font-family:    var(--font-body);
    font-size:      0.66rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color:          var(--color-champagne);
    margin:         0 0 20px;
    line-height:    1;
}
.footer-logo-link {
    display:         inline-block;
    text-decoration: none;
}
.footer-widget-col--brand .footer-logo {
    max-width: 35%;
    height:    auto;
    margin:    0 0 22px;
    display:   block;
    filter:    drop-shadow(0 0 16px rgba(255, 255, 255, 0.15))
               drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.footer-logo-text {
    display:        block;
    font-family:    var(--font-heading);
    font-size:      2.2rem;
    font-weight:    700;
    letter-spacing: -0.01em;
    color:          #fff;
    margin-bottom:  10px;
}
.footer-tagline {
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    line-height:    1.5;
    color:          rgba(255, 255, 255, 0.55);
    margin:         0 0 24px;
    padding:        0 0 16px;
    max-width:      260px;
    position:       relative;
}
.footer-tagline::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      28px;
    height:     1px;
    background: var(--color-accent);
}

/* Contact list under the brand column */
.footer-contact {
    list-style: none;
    margin:     0;
    padding:    0;
}
.footer-contact li {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        7px 0;
    font-size:      0.82rem;
    line-height:    1.5;
    letter-spacing: 0.01em;
    color:          rgba(255, 255, 255, 0.62);
    border:         none;
}
.footer-contact li:first-child { padding-top: 0; }
.footer-contact li:last-child  { padding-bottom: 0; }
.footer-contact li svg {
    flex-shrink: 0;
    color:       rgba(255, 255, 255, 0.4);
    transition:  color var(--transition);
}
.footer-contact li a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--transition);
}
.footer-contact li a:hover {
    color: #fff;
}
.footer-contact li:hover svg {
    color: var(--color-accent);
}

.footer-widgets {
    padding:       72px 0 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-widgets-grid {
    display:               grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap:                   40px 72px;
}

.footer-widget-col .widget {
    background:    none;
    border:        none;
    padding:       0;
    box-shadow:    none;
    margin-bottom: 0;
}
.footer-widget-col .widget + .widget {
    margin-top: 28px;
}
.footer-widget-col .widget-title {
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          var(--color-champagne);
    border:         none;
    padding:        0 0 12px;
    margin:         0 0 18px;
    position:       relative;
}
.footer-widget-col .widget-title::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      28px;
    height:     1px;
    background: var(--color-accent);
}
.footer-widget-col .widget ul {
    margin:  0;
    padding: 0;
}
.footer-widget-col .widget,
.footer-widget-col .widget .textwidget,
.footer-widget-col .widget p,
.footer-widget-col .widget li,
.footer-widget-col .widget a {
    color:          rgba(255, 255, 255, 0.62);
    font-size:      0.82rem;
    line-height:    1.7;
    letter-spacing: 0.01em;
}
.footer-widget-col .widget p {
    margin: 0 0 8px;
}
.footer-widget-col .widget p:last-child { margin-bottom: 0; }
.footer-widget-col .widget li {
    padding:       4px 0;
    border:        none;
}
.footer-widget-col .widget li:first-child { padding-top: 0; }
.footer-widget-col .widget li:last-child  { padding-bottom: 0; }
.footer-widget-col .widget a {
    transition: color var(--transition);
}
.footer-widget-col .widget a:hover {
    color: #fff;
}

/* Footer "Upcoming Events" — next-event card output by [rfma_next_event] */
.rfma-next-event {
    display:         block;
    padding:         12px 14px;
    margin:          0 0 12px;
    background:      rgba(255, 255, 255, 0.04);
    border:          1px solid rgba(255, 255, 255, 0.06);
    border-left:     3px solid var(--color-accent);
    border-radius:   4px;
    text-decoration: none;
    transition:      background var(--transition),
                     border-color var(--transition),
                     transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.rfma-next-event:hover {
    background:   rgba(255, 255, 255, 0.07);
    border-color: rgba(235, 34, 39, 0.45);
    border-left-color: var(--color-accent);
    transform:    translateY(-1px);
}
.footer-widget-col .widget a.rfma-next-event,
.footer-widget-col .widget a.rfma-next-event:hover {
    /* override the generic widget-link color rules above */
    color: inherit;
}
.rfma-next-event-title {
    display:        block;
    font-family:    var(--font-heading);
    font-size:      0.82rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color:          rgba(255, 255, 255, 0.92);
    line-height:    1.35;
    margin-bottom:  4px;
}
.rfma-next-event-date {
    display:        block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color:          var(--color-champagne);
}
.rfma-next-event-more {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--font-body);
    font-size:       0.72rem;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  0.14em;
    color:           var(--color-accent) !important;
    text-decoration: none;
    transition:      gap 0.18s ease, color var(--transition);
}
.rfma-next-event-more:hover {
    color: #fff !important;
    gap:   10px;
}
.rfma-next-event-empty a {
    color: var(--color-accent) !important;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.35);
    padding:    24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-bottom-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             12px 28px;
}

.copyright {
    font-family:    var(--font-body);
    font-size:      0.66rem;
    font-weight:    300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.45);
    margin:         0;
    line-height:    1.6;
}
.copyright a {
    color:      rgba(255, 255, 255, 0.7);
    font-weight: 400;
    transition: color var(--transition);
}
.copyright a:hover { color: var(--color-accent); }
.copyright-sep {
    display:    inline-block;
    margin:     0 6px;
    color:      rgba(255, 255, 255, 0.25);
}

/* Back-to-top — minimal text-with-arrow link in the footer-bottom strip */
.footer-back-top {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         8px 0;
    font-family:     var(--font-body);
    font-size:       0.66rem;
    font-weight:     500;
    text-transform:  uppercase;
    letter-spacing:  0.25em;
    color:           rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition:      color var(--transition);
}
.footer-back-top svg {
    flex-shrink: 0;
    transition:  transform var(--transition);
}
.footer-back-top:hover {
    color: #fff;
}
.footer-back-top:hover svg {
    transform: translateY(-2px);
    color:     var(--color-accent);
}

.footer-nav ul { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: 0; padding: 0; }
.footer-nav ul li a {
    font-size:      0.7rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color:          rgba(255, 255, 255, 0.55);
    transition:     color var(--transition);
}
.footer-nav ul li a:hover { color: var(--color-accent); }

/* ── 17. WOOCOMMERCE ─────────────────────────────────────── */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    background-color: var(--color-light-bg) !important;
    color:            var(--color-text-dark) !important;
    border-top-color: var(--color-accent) !important;
}
.woocommerce-error { border-top-color: #c0392b !important; }

/* ── Shop Archive Hero ─────────────────────────────────── */
.shop-hero {
    position:         relative;
    background-color: var(--color-dark);
    background-size:   cover;
    background-position: center;
    padding:          60px 0;
    margin-bottom:    0;
    overflow:         hidden;
}
.shop-hero--has-image { min-height: 280px; display: flex; align-items: center; }
.shop-hero-overlay {
    position:         absolute;
    inset:            0;
    background:       linear-gradient(to right, rgba(23,26,29,0.92) 40%, rgba(23,26,29,0.55) 100%);
}
.shop-hero-inner  { position: relative; z-index: 1; }

.shop-breadcrumb {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    flex-wrap:   wrap;
}
.shop-breadcrumb a     { color: var(--color-text-muted); }
.shop-breadcrumb a:hover { color: var(--color-accent); }
.shop-breadcrumb .sep  { color: rgba(255,255,255,0.3); }
.shop-breadcrumb .current { color: var(--color-accent); }

.shop-hero-title {
    font-family:    var(--font-heading);
    font-size:      clamp(2.2rem, 5vw, 4rem);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--color-text-light);
    line-height:    1;
    margin-bottom:  12px;
}
.shop-hero-desc {
    font-size:  0.9rem;
    color:      var(--color-text-muted);
    max-width:  600px;
    line-height: 1.7;
    margin:     0;
}

/* ── Shop Archive Main ─────────────────────────────────── */
.shop-archive-main { padding: 0 0 80px; }
.shop-archive-main > .container { padding-top: 40px; }

/* ── WooCommerce single product / cart / checkout wrapper ── */
.woocommerce-page-wrap { background: var(--color-white); }
.woocommerce-page-inner { padding: 50px 0 70px; }

/* Single product layout */
.woocommerce div.product {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   60px;
    align-items:           start;
}
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product .summary.entry-summary      { grid-column: 2; }
.woocommerce div.product .woocommerce-tabs           { grid-column: 1 / -1; }
.woocommerce div.product .related.products           { grid-column: 1 / -1; }

.woocommerce div.product .product_title {
    margin-bottom: 8px;
    line-height:   1.1;
}

.woocommerce div.product .woocommerce-product-rating {
    margin-bottom: 16px;
}

.woocommerce div.product form.cart {
    margin-top: 20px;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--color-light-border);
    margin-bottom: 0;
    padding:       0;
    list-style:    none;
    display:       flex;
    gap:           0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border:        none;
    border-radius: 0;
    background:    transparent;
    padding:       0;
    margin:        0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display:        block;
    padding:        12px 24px;
    font-family:    var(--font-heading);
    font-size:      1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--color-text-body);
    border-bottom:  3px solid transparent;
    transition:     color var(--transition), border-color var(--transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color:        var(--color-text-dark);
    border-bottom-color: var(--color-accent);
}
.woocommerce div.product .woocommerce-tabs .panel {
    padding:    30px 0;
    border:     none;
    background: transparent;
    color:      var(--color-text-body);
}

/* Related products */
.related.products > h2 {
    font-family:    var(--font-heading);
    font-size:      1.8rem;
    text-transform: uppercase;
    color:          var(--color-text-dark);
    margin-bottom:  24px;
    padding-bottom: 12px;
    border-bottom:  2px solid var(--color-accent);
}

@media (max-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce div.product .summary.entry-summary,
    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related.products { grid-column: 1; }
}

/* ── Sub-categories ────────────────────────────────────── */
.shop-subcats {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   16px;
    margin-bottom:         40px;
    padding-bottom:        40px;
    border-bottom:         1px solid var(--color-light-border);
}

.shop-subcat-card {
    display:         block;
    text-decoration: none;
    border:          1px solid var(--color-light-border);
    border-radius:   var(--radius);
    overflow:        hidden;
    transition:      border-color var(--transition), box-shadow var(--transition);
}
.shop-subcat-card:hover {
    border-color: var(--color-accent);
    box-shadow:   0 4px 16px rgba(235,34,39,0.12);
}
.shop-subcat-img {
    height:              100px;
    background-size:     cover;
    background-position: center;
    background-color:    var(--color-light-bg);
}
.shop-subcat-img--placeholder { background-color: var(--color-dark-light); }
.shop-subcat-name {
    display:        block;
    padding:        10px 12px;
    font-family:    var(--font-heading);
    font-size:      1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--color-text-dark);
}

/* ── Shop Toolbar ──────────────────────────────────────── */
.shop-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 0;
    margin-bottom:   28px;
    border-bottom:   1px solid var(--color-light-border);
    gap:             12px;
    flex-wrap:       wrap;
}

.shop-result-count .woocommerce-result-count {
    font-size:   0.78rem;
    color:       var(--color-text-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin:      0;
}

.shop-ordering .woocommerce-ordering select,
.woocommerce-ordering select {
    font-family:      var(--font-body);
    font-size:        0.78rem;
    padding:          8px 32px 8px 12px;
    border:           1px solid var(--color-light-border);
    border-radius:    var(--radius);
    background-color: var(--color-white);
    color:            var(--color-text-dark);
    cursor:           pointer;
    appearance:       none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
}

/* ── Product Grid ──────────────────────────────────────── */
/* woocommerce-layout.css adds ::before/::after clearfix pseudo-elements.
   In a CSS grid container these become actual grid items and occupy column 1,
   pushing all real products one cell to the right. Kill them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
}

/* Base grid — WooCommerce adds columns-X class driven by Customizer setting.
   minmax(0,1fr) prevents WooCommerce plugin width:% overrides from bleeding through. */
.woocommerce ul.products {
    display:               grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* default/fallback */
    gap:                   24px !important;
    list-style:            none !important;
    margin:                0 !important;
    padding:               0 !important;
}
/* Customizer/loop_shop_columns column overrides */
.woocommerce ul.products.columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

/* Single product: span full row, constrain width, centre it */
.woocommerce ul.products li.product:only-child {
    grid-column:  1 / -1 !important;
    max-width:    380px !important;
    width:        100% !important;
    margin:       0 auto !important;
    justify-self: center !important;
}

.woocommerce ul.products li.product {
    background-color: var(--color-white);
    position:         relative;
    overflow:         hidden;
    float:            none !important;
    clear:            none !important;
    width:            100% !important;   /* fill the grid cell; beats WC's 30.75% */
    max-width:        100% !important;
    margin:           0 !important;
    box-sizing:       border-box !important;
    transition:       box-shadow var(--transition);
}
/* Prevent WooCommerce first/last float-era classes from breaking grid layout */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
    float:       none !important;
    clear:       none !important;
    grid-column: auto !important;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    z-index:    1;
}

/* Product image link — must stay block so image is above title */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product > a:first-child {
    display: block;
}

.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img {
    width:      auto !important;
    height:     300px !important;
    max-width:  100% !important;
    object-fit: initial !important;
    display:    block !important;
    margin:     0 auto !important;
    transition: transform 0.6s ease !important;
}
.woocommerce ul.products li.product:hover img {
    transform: scale(1.04) !important;
}

/* Sale badge */
.woocommerce span.onsale {
    background-color: var(--color-accent);
    border-radius:    var(--radius);
    font-family:      var(--font-heading);
    font-weight:      700;
    font-size:        0.85rem;
    text-transform:   uppercase;
    letter-spacing:   0.05em;
    padding:          4px 10px;
    top:              12px;
    left:             12px;
    right:            auto;
}

/* Product info panel */
.woocommerce ul.products li.product .product-info-panel {
    padding:    18px 20px 20px;
    background: var(--color-white);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family:    var(--font-heading);
    font-size:      1.4rem;
    line-height:    1.15;
    padding:        18px 20px 6px;
    color:          var(--color-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Star rating — align with title/price, not float-left */
.woocommerce ul.products li.product .star-rating {
    float:       none !important;
    display:     block !important;
    margin:      0 20px 6px !important;
    text-align:  left !important;
}

.woocommerce ul.products li.product .price {
    font-family:    var(--font-heading);
    font-size:      1.2rem;
    font-weight:    600;
    color:          var(--color-text-body) !important;
    padding:        0 20px 8px;
    display:        block;
    letter-spacing: 0.02em;
}
.woocommerce ul.products li.product .price ins  { text-decoration: none; color: var(--color-accent) !important; }
.woocommerce ul.products li.product .price del  { color: var(--color-text-muted) !important; font-size: 0.9rem; margin-right: 6px; }

/* CTA button in product card */
.woocommerce ul.products li.product .button {
    display:          block !important;
    margin:           0 20px 20px !important;
    width:            calc(100% - 40px) !important;
    text-align:       center !important;
    background-color: var(--color-dark) !important;
    color:            var(--color-text-light) !important;
    border:           2px solid var(--color-dark) !important;
    font-size:        0.72rem !important;
    font-weight:      600 !important;
    letter-spacing:   0.1em !important;
    text-transform:   uppercase !important;
    padding:          10px 16px !important;
    border-radius:    var(--radius) !important;
    transition:       background-color var(--transition), border-color var(--transition) !important;
}
.woocommerce ul.products li.product .button:hover {
    background-color: var(--color-accent) !important;
    border-color:     var(--color-accent) !important;
    color:            #fff !important;
}

/* Shop pagination */
.shop-pagination { margin-top: 50px; }
.shop-pagination .woocommerce-pagination ul {
    display:    flex;
    gap:        6px;
    list-style: none;
    flex-wrap:  wrap;
    padding:    0;
    margin:     0;
}
.shop-pagination .woocommerce-pagination ul li a,
.shop-pagination .woocommerce-pagination ul li span {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    width:         38px;
    height:        38px;
    border:        1px solid var(--color-light-border);
    border-radius: var(--radius);
    font-size:     0.8rem;
    color:         var(--color-text-body);
    transition:    all var(--transition);
    background:    var(--color-white);
}
.shop-pagination .woocommerce-pagination ul li a:hover  { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.shop-pagination .woocommerce-pagination ul li span.current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ── Single Product ────────────────────────────────────── */
.woocommerce div.product .product_title { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 3rem); text-transform: uppercase; color: var(--color-text-dark); line-height: 1.1; }
.woocommerce div.product .price { font-family: var(--font-heading); font-size: 2rem; color: var(--color-accent) !important; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--color-text-body); margin-bottom: 20px; }

/* Cart & Checkout tables */
.woocommerce table.shop_table {
    border:           1px solid var(--color-light-border) !important;
    background-color: var(--color-white) !important;
    border-collapse:  collapse !important;
}
.woocommerce table.shop_table th {
    background-color: var(--color-light-bg) !important;
    color:            var(--color-text-dark) !important;
    font-family:      var(--font-heading) !important;
    font-size:        0.9rem !important;
    text-transform:   uppercase !important;
    letter-spacing:   0.06em !important;
    padding:          14px 16px !important;
    border-bottom:    2px solid var(--color-accent) !important;
}
.woocommerce table.shop_table td {
    border-bottom:    1px solid var(--color-light-border) !important;
    color:            var(--color-text-body) !important;
    padding:          12px 16px !important;
    background-color: transparent !important;
}
.woocommerce .order-total td,
.woocommerce .order-total th { color: var(--color-text-dark) !important; }

.woocommerce .cart-collaterals .cart_totals {
    background-color: var(--color-light-bg);
    border:           1px solid var(--color-light-border);
    border-radius:    var(--radius);
    padding:          24px;
}
.woocommerce-cart .cart_totals h2 { color: var(--color-text-dark) !important; }

/* Checkout headings */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-order-review h3,
#order_review_heading {
    font-family:    var(--font-heading) !important;
    font-size:      1.5rem !important;
    text-transform: uppercase !important;
    color:          var(--color-text-dark) !important;
    border-bottom:  2px solid var(--color-accent) !important;
    padding-bottom: 10px !important;
    margin-bottom:  20px !important;
}

/* Checkout form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background-color: var(--color-white) !important;
    border:           1px solid var(--color-light-border) !important;
    color:            var(--color-text-dark) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--color-accent) !important; }

.woocommerce-privacy-policy-text { margin-left: 30px; color: var(--color-text-body); font-size: 0.8rem; }

/* ── 18. EVENTON — refined event list cards ─────────────────────────── */

/* Kill EventOn's native text-decoration on description links so it doesn't
   double up with the theme's animated background-image underline.
   EventOn applies `text-decoration: underline !important` via a 3-class
   selector, so we need a 4-class selector to win the specificity battle. */
.entry-content .eventon_full_description .eventon_desc_in a,
.entry-content .eventon_full_description .eventon_desc_in a:hover,
.eventon_events_list .eventon_full_description .eventon_desc_in a,
.eventon_events_list .eventon_full_description .eventon_desc_in a:hover {
    text-decoration: none !important;
}

/* The page background gets a warm off-white so the cards have somewhere
   to sit. We target the .eventon_events_list wrapper specifically. */
.eventon_events_list,
.eventon_events_list ~ * {
    background: transparent !important;
}
body.page-template-default .page-content-wrap:has(.eventon_events_list),
body.page:has(.eventon_events_list) .page-content-wrap {
    background: linear-gradient(180deg, #f7f6f3 0%, #fdfcfa 100%);
}

/* Month header (JUNE, JULY, AUGUST…) */
.eventon_events_list h2.eventon_yearmonth_title,
.eventon_events_list .evcal_month_line .evcal_month_text,
.eventon_events_list .evo_month_row .month_des {
    font-family:    var(--font-heading);
    font-size:      0.78rem !important;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color:          var(--color-text-dark) !important;
    margin:         2.4em 0 1.2em !important;
    padding:        0 0 0.8em;
    border-bottom:  1px solid rgba(0, 0, 0, 0.08);
    background:     transparent !important;
}
.eventon_events_list h2.eventon_yearmonth_title:first-child,
.eventon_events_list .evcal_month_line:first-child .evcal_month_text { margin-top: 0 !important; }

/* Each event card — white surface, hairline border, soft drop-shadow */
.eventon_events_list .eventon_list_event {
    margin:        0 0 14px !important;
    background:    #ffffff !important;
    border:        1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 6px;
    overflow:      hidden;
    box-shadow:    0 1px 2px rgba(0, 0, 0, 0.04),
                   0 4px 12px rgba(0, 0, 0, 0.035);
    transition:    border-color var(--transition),
                   box-shadow   var(--transition),
                   transform    0.15s ease;
}
.eventon_events_list .eventon_list_event:hover {
    border-color: rgba(235, 34, 39, 0.35) !important;
    box-shadow:   0 14px 32px rgba(0, 0, 0, 0.08),
                  0 2px 6px rgba(235, 34, 39, 0.08);
    transform:    translateY(-1px);
}

/* Course Dates — staggered cascade reveal. The cards live inside per-month
   wrappers (.sep_month_events), so JS in main.js sets a serial --rfma-i on
   each card and triggers the cascade by adding .rfma-events-cascade to
   the list when it enters the viewport. */
@keyframes rfma-events-cascade {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
html.js-reveal .eventon_events_list:not(.rfma-events-cascade) .evcal_month_line,
html.js-reveal .eventon_events_list:not(.rfma-events-cascade) .eventon_list_event:not(.evo_lightbox_body) {
    opacity: 0;
}
html.js-reveal .eventon_events_list.rfma-events-cascade .evcal_month_line,
html.js-reveal .eventon_events_list.rfma-events-cascade .eventon_list_event:not(.evo_lightbox_body) {
    animation-name:            rfma-events-cascade;
    animation-duration:        0.5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode:       both;
    animation-delay:           calc(var(--rfma-i, 0) * 0.05s + 0.05s);
}
@media (prefers-reduced-motion: reduce) {
    html.js-reveal .eventon_events_list .evcal_month_line,
    html.js-reveal .eventon_events_list .eventon_list_event {
        opacity:   1 !important;
        animation: none !important;
    }
}

/* The clickable trigger row — override the plugin's inline background-color */
.eventon_events_list .eventon_list_event .desc_trig_outter { margin: 0 !important; }
.eventon_events_list .eventon_list_event .desc_trig {
    background:      #ffffff !important;
    display:         flex !important;
    align-items:     stretch !important;
    text-decoration: none !important;
    padding:         0 !important;
    border:          0 !important;
    box-shadow:      none !important;
    color:           inherit !important;
}

/* Left date block — solid red column with grid-arranged dates */
.eventon_events_list .eventon_list_event .evoet_c2 {
    background:      var(--color-accent) !important;
    color:           #fff !important;
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    min-width:       130px;
    padding:         18px 18px;
}
.eventon_events_list .eventon_list_event .evoet_dayblock {
    display:               grid !important;
    grid-template-columns: auto auto auto;
    grid-template-areas:   "start dash end"
                           "month month month";
    align-items:           center;
    justify-items:         center;
    column-gap:            10px;
    row-gap:               8px;
    background:            transparent !important;
    padding:               0 !important;
    color:                 #fff !important;
    position:              relative;
}
/* Dash sits in its own grid cell — deterministic placement between the dates */
.eventon_events_list .eventon_list_event .evoet_dayblock::before {
    content:     '\2013';
    grid-area:   dash;
    color:       rgba(255, 255, 255, 0.55);
    font-family: var(--font-heading);
    font-size:   1.3rem;
    line-height: 1;
    font-weight: 500;
}
.eventon_events_list .eventon_list_event .evo_start { display: contents !important; }
.eventon_events_list .eventon_list_event .evo_end   { display: contents !important; }

.eventon_events_list .eventon_list_event .evo_start em.date,
.eventon_events_list .eventon_list_event .evo_end em.date {
    font-family:    var(--font-heading);
    font-size:      1.8rem !important;
    font-weight:    700;
    font-style:     normal;
    color:          #fff !important;
    line-height:    1;
    letter-spacing: -0.02em;
}
.eventon_events_list .eventon_list_event .evo_start em.date { grid-area: start; }
.eventon_events_list .eventon_list_event .evo_end   em.date { grid-area: end;   }

.eventon_events_list .eventon_list_event .evo_start em.month {
    grid-area:      month;
    font-family:    var(--font-body);
    font-size:      0.62rem !important;
    font-weight:    600;
    font-style:     normal;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          rgba(255, 255, 255, 0.9) !important;
    line-height:    1;
}
.eventon_events_list .eventon_list_event .evo_start em.time,
.eventon_events_list .eventon_list_event .evo_end em.month,
.eventon_events_list .eventon_list_event .evo_end em.time { display: none !important; }

/* Right content area — title + sold-out badge */
.eventon_events_list .eventon_list_event .evoet_c3,
.eventon_events_list .eventon_list_event .evcal_desc {
    display:     flex !important;
    align-items: center !important;
    flex-wrap:   wrap;
    gap:         12px;
    padding:     18px 24px !important;
    flex:        1;
    min-width:   0;
    background:  #ffffff !important;
    color:       var(--color-text-dark) !important;
}
.eventon_events_list .eventon_list_event .evcal_desc {
    flex-direction: column !important;
    align-items:    flex-start !important;
    justify-content: center !important;
    gap:            4px !important;
}
.eventon_events_list .eventon_list_event .evoet_title,
.eventon_events_list .eventon_list_event .evcal_event_title {
    font-family:    var(--font-heading) !important;
    font-size:      0.95rem !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color:          var(--color-text-dark) !important;
    line-height:    1.3;
    background:     transparent !important;
    display:        block;
    width:          100%;
}
/* Subtitle / ticket-spots-remaining info — small, dimmed */
.eventon_events_list .eventon_list_event .evoet_subtitle,
.eventon_events_list .eventon_list_event .evo_below_title {
    display:        block !important;
    font-family:    var(--font-body) !important;
    font-size:      0.72rem !important;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color:          var(--color-text-body) !important;
    margin-top:     2px;
}
.eventon_events_list .eventon_list_event .evoet_subtitle:empty,
.eventon_events_list .eventon_list_event .evo_below_title:empty { display: none !important; }

/* SOLD OUT badge — covers both the plugin's classes and the
   .evoet_subtitle treatment used by the in-page JS that converts
   sold-out markers into a visible badge.                          */
.eventon_events_list .eventon_list_event .rfma-soldout,
.eventon_events_list .eventon_list_event .evcal_soldout,
.eventon_events_list .eventon_list_event .evo_soldout,
.eventon_events_list .eventon_list_event .evcal_full,
.eventon_events_list .eventon_list_event .evo_full,
.eventon_events_list .eventon_list_event .evoet_subtitle:not(:empty) {
    background:      var(--color-accent) !important;
    color:           #ffffff !important;
    font-family:     var(--font-body) !important;
    font-size:       0.78rem !important;
    font-weight:     700 !important;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    padding:         8px 16px !important;
    border-radius:   6px !important;
    line-height:     1.2 !important;
    box-shadow:      none !important;
    display:         inline-block !important;
    flex-shrink:     0;
    width:           auto !important;
    max-width:       140px;
    text-align:      center;
    text-shadow:     none !important;
    border:          none !important;
}

/* "X seats left" badge — injected by JS into the event card.
   Red-outline style; !important on colours to beat EventOn's
   generic `.evoet_cx span` colour rules.                        */
.eventon_events_list .eventon_list_event .rfma-seats-left {
    display:         inline-flex !important;
    align-items:     center;
    gap:             5px;
    flex-shrink:     0;
    margin-top:      2px;
    padding:         6px 13px !important;
    background:      #ffffff !important;
    border:          1.5px solid var(--color-accent) !important;
    border-radius:   4px;
    font-family:     var(--font-body) !important;
    font-size:       0.7rem !important;
    font-weight:     600 !important;
    text-transform:  uppercase;
    letter-spacing:  0.14em;
    color:           var(--color-accent) !important;
    line-height:     1.2 !important;
    text-shadow:     none !important;
}
.eventon_events_list .eventon_list_event .rfma-seats-left strong {
    font-weight:  700 !important;
    color:        var(--color-accent) !important;
    margin-right: 1px;
}

/* ── Expanded event card — refined detail panel ───────────────── */

/* The expanded card surface — sits inside the event card */
.eventon_events_list .eventon_list_event .event_description {
    background-color: #fafafa !important;
    border-top:       1px solid rgba(0, 0, 0, 0.08);
}
.eventon_events_list .eventon_list_event .evcal_eventcard {
    background:  transparent !important;
    padding:     28px 30px !important;
    border:      none !important;
}
.evcal_evdata_row,
.evorow .tbrow,
.dark1,
.evo_pop_body {
    background-color: transparent !important;
    color:            var(--color-text-body) !important;
}

/* Strip EventOn's gray row panels — make everything seamless, use
   hairline dividers between rows instead. */
.eventon_events_list .evocard_box,
.eventon_events_list .evocard_row,
.eventon_events_list .evo_metarow_time,
.eventon_events_list .evo_metarow_ICS,
.eventon_events_list .evo_metarow_tix {
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
}
.eventon_events_list .evocard_row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding:       18px 0 !important;
    margin:        0 !important;
}
.eventon_events_list .evocard_row:last-child { border-bottom: none !important; }

/* (1) "Event Details" section heading — champagne eyebrow + hairline */
.eventon_events_list .eventon_full_description h3.evo_h3 {
    font-family:    var(--font-body) !important;
    font-size:      0.72rem !important;
    font-weight:    600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    color:          var(--color-champagne) !important;
    margin:         0 0 16px !important;
    padding:        0 0 12px !important;
    border-bottom:  1px solid rgba(0, 0, 0, 0.08) !important;
    line-height:    1.3 !important;
}
/* Compact metadata-row headings (Time, Calendar) — no hairline, tight */
.eventon_events_list .evcal_evdata_cell h3.evo_h3 {
    font-family:    var(--font-body) !important;
    font-size:      0.68rem !important;
    font-weight:    600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color:          var(--color-champagne) !important;
    margin:         0 0 6px !important;
    padding:        0 !important;
    border:         none !important;
    line-height:    1.3 !important;
}
/* Hide the duplicate icon that sits INSIDE the heading — the row already
   has its own icon column to the left. */
.eventon_events_list .evcal_evdata_cell h3.evo_h3 .evcal_evdata_icons,
.eventon_events_list .evcal_evdata_cell h3.evo_h3 i {
    display: none !important;
}
.eventon_events_list .eventon_full_description h3.evo_h3 i {
    color:        var(--color-accent) !important;
    margin-right: 8px;
    font-size:    0.85rem;
}
.evo_metarow_tix .evcal_evdata_cell h3.evo_h3 { display: none !important; }

/* Hide ONLY the broken/placeholder ticket image (renders as an empty
   gradient). Do NOT hide .evoTX_wc — the purchase UI is nested inside it. */
.eventon_events_list .evotx_image { display: none !important; }

/* (3b) Collapsed description fade + MORE button refinement.
   EventOn fades the truncated description to #f3f3f3, but our card
   background is #fafafa — the mismatch shows as a gray band. Re-point
   the gradient to #fafafa and show a touch more text. */
.eventon_events_list .evcal_evdata_cell.shorter_desc .eventon_desc_in {
    height: 200px !important;
}
.eventon_events_list .evcal_evdata_cell.shorter_desc .eventon_desc_in:after {
    background: linear-gradient(to top,
        #fafafa 8%,
        rgba(250, 250, 250, 0) 70%) !important;
}
/* MORE / LESS toggle — slim red text-link instead of a heavy gray pill.
   Flex layout so text + arrow sit with a natural gap (no padding hacks). */
.eventon_events_list .eventon_shad_p { margin-top: 6px !important; }
.eventon_events_list .eventon_shad_p .evcal_btn {
    display:        inline-flex !important;
    align-items:    center;
    gap:            7px;
    background:      none !important;
    background-color: transparent !important;
    color:          var(--color-accent) !important;
    padding:        8px 0 !important;
    margin:         0 !important;
    font-family:    var(--font-body) !important;
    font-size:      0.72rem !important;
    font-weight:    600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    border:         none !important;
    border-radius:  0 !important;
    box-shadow:     none !important;
    min-height:     0 !important;
}
.eventon_events_list .eventon_shad_p .ev_more_text {
    padding-right: 0 !important;
}
/* Arrow sits inline (not absolute). White to show against the red pill. */
.eventon_events_list .eventon_shad_p .ev_more_arrow {
    position:     static !important;
    margin:       0 !important;
    border-color: transparent transparent #ffffff transparent !important;
}
/* Expanded ("LESS") state — EventOn renders this toggle as a solid red
   pill, so the arrow must be white to be visible against it. */
.eventon_events_list .eventon_shad_p .ev_more_arrow.ard {
    border-color: #ffffff transparent transparent transparent !important;
}

/* (5) Description body text — matches the editorial body rhythm */
.eventon_events_list .eventon_desc_in,
.eventon_events_list .eventon_desc_in p {
    font-family:    var(--font-body) !important;
    font-size:      1rem !important;
    line-height:    1.75 !important;
    color:          var(--color-text-body) !important;
    letter-spacing: 0.005em;
}
.eventon_events_list .eventon_desc_in p { margin: 0 0 1em !important; }
.eventon_events_list .eventon_desc_in p:last-child { margin-bottom: 0 !important; }
.eventon_events_list .eventon_desc_in strong { color: var(--color-text-dark) !important; }
.eventon_events_list .eventon_desc_in ul,
.eventon_events_list .eventon_desc_in ol { margin: 0 0 1em; padding-left: 1.4em; }
.eventon_events_list .eventon_desc_in li { margin-bottom: 0.4em; line-height: 1.65; }

/* (2) Metadata rows — date / location / add-to-calendar */
.eventon_events_list .evcal_evdata_row {
    border:     none !important;
    padding:    0 !important;
    margin:     0 !important;
    display:    flex !important;
    align-items: flex-start;
    gap:        14px;
}
/* Icon column — clean muted icon, no heavy badge */
.eventon_events_list .evcal_evdata_icons {
    background:      none !important;
    color:          var(--color-accent) !important;
    font-size:      0.9rem !important;
    width:          22px !important;
    height:         auto !important;
    flex-shrink:    0;
    padding:        0 !important;
    margin:         0 !important;
    display:        flex !important;
    align-items:    center;
    justify-content: center;
    line-height:    1.3 !important;
    margin-top:     1px;
}
.eventon_events_list .evcal_evdata_icons i { font-size: 0.9rem !important; }
.eventon_events_list .evcal_evdata_cell {
    color:       var(--color-text-body) !important;
    font-size:   0.95rem !important;
    line-height: 1.6 !important;
    flex:        1;
    min-width:   0;
    padding:     0 !important;
}
.eventon_events_list .evcal_evdata_cell a {
    color: var(--color-accent) !important;
}

/* (4) Ticket / price block */
.eventon_events_list .evo_metarow_tix {
    background:  #fff !important;
    border:      1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px;
    padding:     20px 22px !important;
    margin-top:  8px !important;
}
.eventon_events_list .evotx_price_line,
.eventon_events_list .evcal_evdata_cell .price,
.eventon_events_list .evo_metarow_tix .price {
    font-family: var(--font-heading) !important;
    font-size:   1.25rem !important;
    font-weight: 700 !important;
    color:       var(--color-text-dark) !important;
    letter-spacing: -0.01em;
}
.eventon_events_list .evo_metarow_tix .amount,
.eventon_events_list .evotx_price_line .amount {
    color: var(--color-accent) !important;
}
/* Quantity selector — clean up the default number input */
.eventon_events_list .evo_metarow_tix input[type="number"],
.eventon_events_list .evotx_tickets_n input[type="number"],
.eventon_events_list .ticket_qty input {
    font-family:   var(--font-body) !important;
    font-size:     0.95rem !important;
    padding:       8px 10px !important;
    border:        1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: var(--radius) !important;
    background:    #fff !important;
    color:         var(--color-text-dark) !important;
    min-height:    40px;
}
/* "X seats remaining" line inside the ticket block */
.eventon_events_list .evotx_remaining,
.eventon_events_list .evotx_remaining_stock {
    font-family:    var(--font-body) !important;
    font-size:      0.78rem !important;
    font-weight:    500 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-text-body) !important;
}
.eventon_events_list .evotx_remaining strong,
.eventon_events_list .evotx_remaining_stock span { color: var(--color-accent) !important; font-weight: 700; }

/* "Optional Ticket Additions" (evovo addon) — the plugin applies
   opacity:0.7 to label spans, making prices/text look faint. Restore
   full opacity and give the prices + names proper colour. */
.eventon_events_list .evovo_price_option label span,
.eventon_events_list .evovo_price_option .woocommerce-Price-amount,
.eventon_events_list .evovo_price_option .amount,
.eventon_events_list .evovo_price_option .desc {
    opacity: 1 !important;
}
.eventon_events_list .evovo_price_option label.value {
    color:       var(--color-text-dark) !important;
    font-weight: 500;
}
.eventon_events_list .evovo_price_option .woocommerce-Price-amount,
.eventon_events_list .evovo_price_option .amount {
    color:       var(--color-accent) !important;
    font-weight: 400 !important;
}
.eventon_events_list .evovo_price_option .desc {
    color: var(--color-text-body) !important;
}

@media (max-width: 600px) {
    .eventon_events_list .eventon_list_event .desc_trig { flex-direction: column; }
    /* EventOn injects a 10px red left border from the event's category
       colour (via a JS-added .evcal_list_a rule) — fine on desktop where
       the red doubles as the date column edge, but on mobile the date
       sits on top of the card, leaving the red bar as an unbalanced
       strip running down the side. Compound the two classes our element
       carries (`.desc_trig.evcal_list_a`) so this selector beats the
       runtime-injected rule's specificity. */
    .eventon_events_list .eventon_list_event .desc_trig.evcal_list_a {
        border-left: 0 !important;
    }
    /* Tight outer padding on mobile so nested ticket/description content
       has room to breathe. */
    .eventon_events_list .eventon_list_event .evcal_eventcard { padding: 16px 10px !important; }

    /* EventOn's own mobile rule ( @media (max-width: 568px) ) sets
       `.evcal_evdata_cell { margin-left: -30px }` to pull the text under
       the icon for an overlap design — but at this width it just hides
       the leading letters ("ME" instead of "TIME"). Neutralise the
       negative margin and put a real gap between the icon column and
       the cell content. */
    .eventon_events_list .evcal_eventcard .evcal_evdata_row {
        gap:     10px;
        padding: 14px 0 !important;
    }
    .eventon_events_list .evcal_eventcard .evcal_evdata_row .evcal_evdata_cell {
        margin-left:  0 !important;
        padding-left: 0 !important;
        min-width:    0;
        flex:         1;
    }
    .eventon_events_list .evcal_eventcard .evcal_evdata_row > .evcal_evdata_icons {
        flex-shrink: 0;
    }

    /* Inside the ticket card, the nested wrappers each layer their own
       padding/margin — trim them all on mobile so the option text has
       room to breathe. */
    .eventon_events_list .evoTX_wc          { padding-top: 6px !important; }
    .eventon_events_list .evoTX_wc_section  { padding-top: 18px !important; }
    .eventon_events_list .evovo_price_option {
        padding: 10px 6px !important;
    }
    .eventon_events_list .evovo_price_option .desc {
        margin-top: 4px;
    }

    /* Compact red date ribbon — single-line "MONTH | 05 — 07" instead of
       the desktop two-row block, so the header takes ~45px instead of
       ~72px and the title/status badge below get visual priority. */
    .eventon_events_list .eventon_list_event .evoet_c2 {
        min-width: 100%;
        padding:   11px 16px !important;
    }
    .eventon_events_list .eventon_list_event .evoet_dayblock {
        grid-template-columns: auto auto auto auto !important;
        grid-template-areas:   "month start dash end" !important;
        column-gap:            10px !important;
        row-gap:               0 !important;
        justify-content:       center;
    }
    .eventon_events_list .eventon_list_event .evo_start em.date,
    .eventon_events_list .eventon_list_event .evo_end em.date {
        font-size: 1.35rem !important;
    }
    .eventon_events_list .eventon_list_event .evo_start em.month {
        grid-area:      month !important;
        font-size:      0.7rem !important;
        align-self:     center;
        padding-right:  10px;
        margin-right:   0;
        border-right:   1px solid rgba(255, 255, 255, 0.28);
    }
    .eventon_events_list .eventon_list_event .evoet_dayblock::before {
        font-size: 1.05rem !important;
    }

    /* Tighten the white content area and align the title + status pill */
    .eventon_events_list .eventon_list_event .evcal_desc {
        padding: 16px 18px !important;
        gap:     8px !important;
    }
    .eventon_events_list .eventon_list_event .evoet_title,
    .eventon_events_list .eventon_list_event .evcal_event_title {
        font-size:   0.9rem !important;
        line-height: 1.35 !important;
    }
}

.entry-content table td,
.entry-content table th,
.comment-text table td,
.comment-text table th {
    background-color: transparent !important;
    border-color:     var(--color-light-border) !important;
    color:            var(--color-text-body);
}

.evoTX_wc_section td.label { font-size: 16px; color: var(--color-text-body); background-color: transparent !important; }
.evoTX_wc_section td.value { font-size: 14px; color: var(--color-text-body); background-color: transparent !important; }
.evoTX_wc_section select    { color: var(--color-text-dark); background-color: var(--color-white); border: 1px solid var(--color-light-border); }

li.cat-item-54 { display: none; }

/* ── 19. GRAVITY FORMS ───────────────────────────────────── */
/* 4-column layout */
.gform_wrapper .top_label li.gfield.gf_first_quarter,
.gform_wrapper .top_label li.gfield.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gf_third_quarter,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter { margin: 0 0 8px 0; width: 24%; }
.gform_wrapper .top_label li.gfield.gf_third_quarter  { padding-left: 26px; }
.gform_wrapper .top_label li.gfield.gf_fourth_quarter { padding-left: 10px; }
.gform_wrapper .top_label li.gfield.gfield_error.gf_first_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter { width: 21%; }
.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter { margin-right: 1%; }
.gform_wrapper .top_label li.gfield.gf_first_quarter { float: left; clear: left !important; }
.gform_wrapper .top_label li.gfield.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gf_third_quarter,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter { float: left; margin-left: 2%; clear: none !important; }
.gform_wrapper .top_label li.gfield.gfield_error.gf_second_quarter,
.gform_wrapper .top_label li.gfield.gfield_error.gf_third_quarter { margin-left: 3%; }
.gform_wrapper .top_label li.gfield.gf_first_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_first_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_first_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_first_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_second_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_second_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_second_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_second_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_third_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_third_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_third_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_third_quarter select.large,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter input.medium,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter input.large,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter select.medium,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter select.large { width: 95%; }
.gform_wrapper .top_label li.gfield.gf_first_quarter+li.gsection,
.gform_wrapper .top_label li.gfield.gf_third_quarter+li.gsection { padding: 16px 0 8px 0; }
.gform_wrapper .top_label li.gfield.gf_first_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_second_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_third_quarter+li.gfield,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter+li.gfield { clear: both; }
.gform_wrapper .top_label li.gfield.gf_first_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_second_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_third_quarter+.gform_footer,
.gform_wrapper .top_label li.gfield.gf_fourth_quarter+.gform_footer { clear: both; }

/* ── Gravity Forms — refined modern styling ──────────────────────── */
.gform_wrapper { color: var(--color-text-body) !important; }

/* Field labels — small uppercase */
.gform_wrapper .gfield_label {
    color:          var(--color-text-dark) !important;
    font-family:    var(--font-body) !important;
    font-size:      0.7rem !important;
    font-weight:    600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom:  7px !important;
}
.gform_wrapper .gfield_required { color: var(--color-accent) !important; }

/* Inputs / textarea / select */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
    background-color: #ffffff !important;
    color:            var(--color-text-dark) !important;
    border:           1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius:    var(--radius) !important;
    padding:          12px 14px !important;
    font-family:      var(--font-body) !important;
    font-size:        0.95rem !important;
    box-shadow:       none !important;
    transition:       border-color var(--transition), box-shadow var(--transition) !important;
    width:            100% !important;
    box-sizing:       border-box !important;
}
.gform_wrapper textarea { min-height: 140px !important; line-height: 1.6 !important; }
#gform_6 textarea { height: 188px !important; min-height: 0 !important; }

/* Focus state — red border + soft glow */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    border-color: var(--color-accent) !important;
    box-shadow:   0 0 0 3px rgba(235, 34, 39, 0.1) !important;
    outline:      none !important;
}

/* Field vertical rhythm */
.gform_wrapper .gfield { margin-bottom: 18px !important; }

/* Submit button — match the site's primary CTA */
.gform_wrapper .gform_footer { margin-top: 8px !important; }
.gform_wrapper .gform_footer input[type="submit"] {
    background-color: var(--color-accent) !important;
    color:           #fff !important;
    border:          2px solid var(--color-accent) !important;
    border-radius:   var(--radius) !important;
    padding:         14px 36px !important;
    font-family:     var(--font-body) !important;
    font-size:       0.8rem !important;
    font-weight:     600 !important;
    text-transform:  uppercase !important;
    letter-spacing:  0.12em !important;
    cursor:          pointer;
}
.gform_wrapper .gform_footer input[type="submit"]:hover {
    background-color: var(--color-accent-hover) !important;
    border-color:     var(--color-accent-hover) !important;
    transform:        translateY(-1px);
    box-shadow:       0 6px 18px rgba(235, 34, 39, 0.35);
}

/* ── Careers page — elevated form card + numbered section headings ── */

/* Soft off-white page background so the white form card floats */
.page-id-1358 .page-content-wrap,
.page-id-8059 .page-content-wrap {
    background-color: #f3f4f5;
}

/* The form sits on an elevated white card */
.rfma-careers-form,
.rfma-testimonial-form {
    max-width:     880px;
    margin:        0 auto;
    background:    #fff;
    border:        1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding:       52px 56px;
    box-shadow:    0 24px 60px rgba(0, 0, 0, 0.10),
                   0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Section counter — scoped to the form's field list */
.rfma-careers-form .gform_fields { counter-reset: rfma-section; }

/* Section dividers ("Personal Details", etc.) */
.gform_wrapper .gsection {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin:        36px 0 22px !important;
    padding:       0 0 12px !important;
}
.gform_wrapper .gsection:first-of-type { margin-top: 0 !important; }
.gform_wrapper .gsection_title {
    font-family:    var(--font-heading) !important;
    font-size:      1.05rem !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.005em !important;
    color:          var(--color-text-dark) !important;
    margin:         0 !important;
    padding:        0 !important;
    line-height:    1.2 !important;
}
/* Champagne-gold leading-zero number before each titled section */
.gform_wrapper .gsection_title:not(:empty) { counter-increment: rfma-section; }
.gform_wrapper .gsection_title:not(:empty)::before {
    content:        counter(rfma-section, decimal-leading-zero);
    color:          #c9a96e;
    font-weight:    700;
    margin-right:   12px;
    letter-spacing: 0.04em;
}
/* Cancel the .entry-content h2 red accent rule on form section titles —
   the .gsection already has its own hairline divider. */
.gform_wrapper .gsection_title::after { display: none !important; }

/* Intro copy above the testimonial form fields */
.rfma-form-intro {
    margin-bottom: 34px;
}
.rfma-form-intro h2 {
    margin-top: 0 !important;
}
.rfma-form-intro p {
    font-size:   1.02rem;
    line-height: 1.75;
    color:       var(--color-text-body);
    margin:      0;
}

@media (max-width: 768px) {
    .rfma-careers-form,
    .rfma-testimonial-form { padding: 32px 22px; }
}

/* ── Partners page — two-column intro + hairline logo grid ────────── */

/* Soft off-white page background so the white logo cells read crisply */
.page-id-1234 .page-content-wrap {
    background-color: #f3f4f5;
}

.rfma-partners-layout {
    display:               grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap:                   64px;
    align-items:           start;
}

/* Left column — intro copy, sticky so it stays beside a tall grid */
.rfma-partners-intro {
    position: sticky;
    top:      calc(var(--site-offset) + 48px);
}
.rfma-partners-intro .rfma-partners-eyebrow {
    font-family:    var(--font-heading);
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          var(--color-accent);
    margin:         0 0 16px;
}
.rfma-partners-intro h2 {
    margin-top: 0 !important;
    font-size:  clamp(1.9rem, 3vw, 2.6rem) !important;
}
.rfma-partners-intro p:not(.rfma-partners-eyebrow) {
    margin:      0 !important;
    font-size:   1.075rem;
    line-height: 1.8;
    color:       var(--color-text-body);
}

/* Right column — logo grid as clean hairline-bordered cells */
.rfma-partners-logos .lshowcase-clear-both { display: none; }
.rfma-partners-logos .lshowcase-logos { margin: 0; }
.rfma-partners-logos .lshowcase-flex {
    display:               grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   1px;
    width:                 100% !important;
    background:            var(--color-light-border);
    border:                1px solid var(--color-light-border);
    border-radius:         10px;
    overflow:              hidden;
}
/* Fills the trailing cell when the logo count doesn't divide evenly,
   so the grid never ends on an empty gray square. */
.rfma-partners-logos .lshowcase-flex::after {
    content:    '';
    background: #fff;
}
.rfma-partners-logos .lshowcase-thumb.lshowcase-normal {
    width:           auto !important;
    margin:          0 !important;
    background:      #fff;
    min-height:      172px;
    padding:         28px;
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    transition:      background 0.3s ease;
}
.rfma-partners-logos .lshowcase-thumb.lshowcase-normal:hover {
    background: #fcfcfc;
}
.rfma-partners-logos .lshowcase-wrap-responsive {
    padding: 0 !important;
    width:   100%;
}
.rfma-partners-logos .lshowcase-boxInner,
.rfma-partners-logos .lshowcase-boxInner a {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
}
/* The plugin sets `.lshowcase-thumb:hover .lshowcase-boxInner { overflow:hidden }`
   which clips the image to the boxInner's tight bounds the instant a cell is
   hovered — and our hover scale pushes the image past those bounds. */
.rfma-partners-logos .lshowcase-thumb:hover .lshowcase-boxInner,
.rfma-partners-logos .lshowcase-boxInner {
    overflow: visible !important;
}
/* Suppress the entry-content animated red underline on logo links */
.rfma-partners-logos .lshowcase-boxInner a {
    background-image: none !important;
}
.rfma-partners-logos .lshowcase-thumb img {
    max-width:     90%;
    max-height:    90px;
    width:         auto;
    height:        auto;
    object-fit:    contain;
    /* Reset the global .entry-content img treatment — the soft 30px-blur
       drop shadow extends past the logo and gets clipped by the next
       cell when the image scales on hover. */
    margin:        0;
    border-radius: 0;
    box-shadow:    none;
    filter:        grayscale(100%) opacity(0.6);
    transition:    filter 0.35s ease, transform 0.35s ease;
}
.rfma-partners-logos .lshowcase-boxInner a:hover img {
    filter:    grayscale(0%) opacity(1);
    transform: scale(1.07);
}
/* The Capital GMC logo artwork bleeds to its image edges (no built-in
   whitespace like the other logos) — render it smaller so it carries the
   same optical breathing room and never reads as cut off when it zooms. */
.rfma-partners-logos .lshowcase-thumb img[src*="GME_full_colour"] {
    max-width: 76%;
}

@media (max-width: 900px) {
    .rfma-partners-layout {
        grid-template-columns: 1fr;
        gap:                   40px;
    }
    .rfma-partners-intro { position: static; }
}
@media (max-width: 560px) {
    .rfma-partners-logos .lshowcase-flex {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Partner logos — staggered fade-up reveal. The thumbs are hidden until JS
   tags the parent .lshowcase-flex with `.rfma-stagger-start` (done by an
   IntersectionObserver in main.js once the grid scrolls into view); then
   per-child animation-delays produce the "one after the other" cascade. */
@keyframes rfma-partners-stagger {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
/* Animate the inner image wrap, not the thumb itself — the thumb keeps its
   white background so each cell reads as an empty white square while it's
   waiting (instead of revealing the gray container behind it). */
html.js-reveal .rfma-partners-logos .lshowcase-flex:not(.rfma-stagger-start) .lshowcase-thumb.lshowcase-normal .lshowcase-wrap-responsive {
    opacity: 0;
}
html.js-reveal .rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal .lshowcase-wrap-responsive {
    animation-name:            rfma-partners-stagger;
    animation-duration:        0.45s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode:       both;
}
/* 0.10s step — quick, snappy cascade. */
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(1)  .lshowcase-wrap-responsive { animation-delay: 0.05s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(2)  .lshowcase-wrap-responsive { animation-delay: 0.15s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(3)  .lshowcase-wrap-responsive { animation-delay: 0.25s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(4)  .lshowcase-wrap-responsive { animation-delay: 0.35s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(5)  .lshowcase-wrap-responsive { animation-delay: 0.45s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(6)  .lshowcase-wrap-responsive { animation-delay: 0.55s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(7)  .lshowcase-wrap-responsive { animation-delay: 0.65s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(8)  .lshowcase-wrap-responsive { animation-delay: 0.75s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(9)  .lshowcase-wrap-responsive { animation-delay: 0.85s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(10) .lshowcase-wrap-responsive { animation-delay: 0.95s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(11) .lshowcase-wrap-responsive { animation-delay: 1.05s; }
.rfma-partners-logos .lshowcase-flex.rfma-stagger-start .lshowcase-thumb.lshowcase-normal:nth-child(12) .lshowcase-wrap-responsive { animation-delay: 1.15s; }
@media (prefers-reduced-motion: reduce) {
    html.js-reveal .rfma-partners-logos .lshowcase-flex .lshowcase-thumb.lshowcase-normal .lshowcase-wrap-responsive {
        opacity:    1 !important;
        animation:  none !important;
    }
}

/* Complex-field sub-labels (First / Last, Street Address, etc.) */
.gform_wrapper .gform-field-label--type-sub,
.gform_wrapper .ginput_complex label {
    font-size:      0.66rem !important;
    font-weight:    500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color:          var(--color-text-body) !important;
    margin-top:     5px !important;
}

/* ── Contact-info block social icons — matches the footer "Follow Us"
   outlined-circle treatment. The contact block sits on a dark card
   (.vc_col-sm-4 background), so it uses the same white-toned values
   as the footer.                                                    */
.rfma-contact-social {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  22px;
}
.rfma-contact-social a {
    display:         inline-flex !important;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    color:           rgba(255, 255, 255, 0.7) !important;
    border:          1px solid rgba(255, 255, 255, 0.15);
    background:      rgba(255, 255, 255, 0.04);
    transition:      color var(--transition),
                     border-color var(--transition),
                     background-color var(--transition);
}
.rfma-contact-social a:hover {
    color:            #fff !important;
    border-color:     var(--color-accent);
    background-color: rgba(235, 34, 39, 0.15);
}

/* Legal inline layout */
.legal-inline { font-size: 16px; line-height: 2; color: var(--color-text-body); }
.ginput_container input {
    border:        none !important;
    border-bottom: 2px solid var(--color-accent) !important;
    background:    transparent !important;
    border-radius: 0 !important;
    padding:       2px 6px !important;
    color:         var(--color-text-dark) !important;
}
.inline-name    input { min-width: 300px; }
.inline-address input { min-width: 450px; }

/* ── 20. WPBAKERY PAGE BUILDER ───────────────────────────── */

/*
 * NOTE: Do NOT use !important on .vc_row margins.
 * WPBakery's JS applies negative margin-left inline to stretch rows to viewport width.
 * !important would override those inline styles and break full-width rows.
 */
.vc_row { clear: both; }

/* ── Front page: kill every possible source of the white gap above the first row ──
 * We target the article wrapper, entry-content div, wpb_content_element wrappers,
 * vc_section, and the first vc_row / vc_row-fluid — covering all WPBakery nesting.
 * Only use !important here on padding/margin-top because the side margins on
 * full-width rows are applied via inline JS and only use margin-left, not margin-top.
 */
.home .entry-content,
.front-page-article .entry-content {
    margin-top:  0 !important;
    padding-top: 0 !important;
}

.home .vc_section:first-child,
.home .vc_row:first-child,
.home .wpb_row:first-child,
.home .vc_row-fluid:first-child {
    margin-top:  0 !important;
    padding-top: 0 !important;
}

/* WPBakery wraps content in wpb_content_element → kill top margin */
.home .wpb_content_element { margin-bottom: 0; }

/* The vc_row-full-width helper div WPBakery injects before stretch rows */
.home .vc_row-full-width { display: block; margin: 0 !important; padding: 0 !important; clear: both; }

/* Inner page: WPBakery rows inside .page-content-wrap need to break out of container */
.page-content-wrap .vc_row-full-width-section,
.page-content-wrap [data-vc-full-width="true"] {
    /* WPBakery JS handles this with inline styles; don't override */
}

/* Remove padding from column-inner — WPBakery's default 15px creates gaps.
   Row-level spacing (padding/margin on .vc_row) handles section separation. */
.vc_column-inner { padding: 0 15px; }
.vc_row.vc_row-no-padding .vc_column-inner { padding: 0; }

/* Home page first row: fully flush so the slider/video sits edge-to-edge */
.home .entry-content > .vc_row:first-child .vc_column-inner,
.home .entry-content > .vc_section:first-child .vc_row:first-child .vc_column-inner {
    padding: 0 !important;
}

/* WPBakery text in light content areas */
.wpb_content_element p  { color: var(--color-text-body); }
.wpb_content_element h1,
.wpb_content_element h2,
.wpb_content_element h3,
.wpb_content_element h4 { color: var(--color-text-dark); }

/* Inner-page content padding */
.page-content-wrap { padding: 40px 0 60px; }

/* ── 21. PAGINATION & NAVIGATION ────────────────────────── */
.posts-navigation,
.post-navigation,
.page-links { margin: 40px 0; }

.nav-links { display: flex; gap: 12px; flex-wrap: wrap; }

.nav-links a, .nav-links span {
    display:       inline-block;
    padding:       8px 16px;
    border:        1px solid var(--color-light-border);
    border-radius: var(--radius);
    font-size:     0.8rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:         var(--color-text-body);
    transition:    all var(--transition);
    background:    var(--color-white);
}
.nav-links a:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.nav-links span.current { background-color: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ── 22. SEARCH FORM ─────────────────────────────────────── */
.search-form { display: flex; gap: 8px; }
.search-form input[type="search"] { flex: 1; }
.search-form button,
.search-form input[type="submit"] { flex-shrink: 0; width: auto; padding: 10px 20px; }

/* ── 23. COMMENTS ────────────────────────────────────────── */
.comments-area { margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--color-light-border); }
.comments-title { font-size: 1.5rem; margin-bottom: 24px; color: var(--color-text-dark); }
.comment-list { list-style: none; }
.comment-body { background: var(--color-light-bg); border: 1px solid var(--color-light-border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.comment-author .fn { font-weight: 600; color: var(--color-text-dark); }
.comment-metadata { font-size: 0.75rem; color: var(--color-text-body); }
.comment-content p { color: var(--color-text-body); }
#respond h3 { font-size: 1.5rem; margin-bottom: 20px; color: var(--color-text-dark); }
.comment-form-comment textarea { min-height: 120px; }

/* ── 24. NO RESULTS / 404 ────────────────────────────────── */
.no-results { padding: 60px 0; text-align: center; }
.no-results p { color: var(--color-text-body); margin-bottom: 24px; }
.error-404 { padding: 60px 0; }
.error-404 p { color: var(--color-text-body); }

/* ── 25. INNOVATION FRAMEWORK SHORTCODES ─────────────────── */

/* innovation_heading */
.innovation-heading { margin-bottom: 40px; text-align: center; }

.innovation-heading h2 {
    font-family:    var(--font-heading);
    font-size:      clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color:          var(--color-text-dark);
    line-height:    1.15;
    margin-bottom:  12px;
}

/* style1 — simple centred */
.innovation-heading.style1 h2 { }

/* style2 — red underline accent */
.innovation-heading.style2 h2 {
    padding-bottom: 16px;
    position: relative;
}
.innovation-heading.style2 h2::after {
    content:    '';
    display:    block;
    width:      60px;
    height:     3px;
    background: var(--color-accent);
    margin:     12px auto 0;
}

/* style3 — left-aligned with red left border (most common on RFMA) */
.innovation-heading.style3 {
    text-align:    left;
    padding-left:  22px;
    border-left:   3px solid var(--color-accent);
    margin-bottom: 36px;
    position:      relative;
}
.innovation-heading.style3 h2 {
    margin-bottom:  4px;
    max-width:      900px;
}
.innovation-heading.style3 p {
    color:     var(--color-text-body);
    font-size: 0.95rem;
    margin:    0;
}

/* Dark-background context — headings go white */
[style*="background-color:#"] .innovation-heading h2,
.vc_row[style*="background"] .innovation-heading h2,
.dark .innovation-heading h2 { color: var(--color-text-light); }

/* innovation_button */
.innovation-button {
    display:         inline-block;
    padding:         11px 28px;
    font-family:     var(--font-body);
    font-size:       0.8rem;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    border-radius:   var(--radius);
    text-decoration: none;
    transition:      background-color var(--transition), color var(--transition), border-color var(--transition);
    cursor:          pointer;
}
.innovation-button.style1 {
    background-color: var(--color-accent);
    color:            #fff;
    border:           2px solid var(--color-accent);
}
.innovation-button.style1:hover {
    background-color: var(--color-accent-hover);
    border-color:     var(--color-accent-hover);
    color:            #fff;
}
.innovation-button.style2 {
    background-color: transparent;
    color:            var(--color-accent);
    border:           2px solid var(--color-accent);
}
.innovation-button.style2:hover {
    background-color: var(--color-accent);
    color:            #fff;
}
.innovation-button.style3 {
    background-color: var(--color-dark);
    color:            var(--color-text-light);
    border:           2px solid var(--color-dark);
}
.innovation-button.style3:hover {
    background-color: var(--color-accent);
    border-color:     var(--color-accent);
    color:            #fff;
}

/* innovation_call_action — dark horizontal ribbon, text left / buttons right
   WPBakery structure: .vc_row > .vc_column > .vc_column-inner > .wpb_wrapper > .innovation-call-action
   We make the element full-width and lay out its children as a flex row.        */
.innovation-call-action {
    display:               grid;
    grid-template-columns: 1fr auto auto;
    align-items:           center;
    column-gap:            16px;
    row-gap:               0;
    background: radial-gradient(ellipse 70% 100% at 50% 50%,
                                #2a2f36 0%,
                                #1f2329 55%,
                                #15181c 100%);
    border-top:            2px solid var(--color-accent);
    border-bottom:         1px solid rgba(255,255,255,0.06);
    margin:                0 -15px -15px;
    padding:               34px 75px 44px 75px;
    box-shadow:            inset 0 1px 0 rgba(255,255,255,0.04);
}

.innovation-call-action h6 {
    display:        flex;
    align-items:    center;
    align-self:     stretch;
    margin:         0;
    padding-right:  24px;
    font-family:    var(--font-body);
    font-size:      0.9rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--color-text-light);
    line-height:    1.4;
}

.innovation-call-action .innovation-button {
    align-self:      center;
    justify-self:    center;
    font-size:       0.72rem;
    letter-spacing:  0.14em;
    padding:         11px 28px;
    border-width:    2px;
    border-style:    solid;
    margin:          0;
    line-height:     1.2;
}

.innovation-call-action .innovation-button.style1 {
    background:   transparent;
    border-color: rgba(255,255,255,0.45);
    color:        var(--color-text-light);
}
.innovation-call-action .innovation-button.style1:hover {
    background:   var(--color-accent);
    border-color: var(--color-accent);
    color:        #fff;
}

@media (max-width: 900px) {
    .innovation-call-action { padding: 22px 30px; }
}
@media (max-width: 768px) {
    .innovation-call-action {
        grid-template-columns: 1fr;
        justify-items:         center;
        text-align:            center;
        row-gap:               14px;
        /* The -15px bleed makes the dark gradient go edge-to-edge —
           so horizontal padding has to absorb that bleed plus the desired
           breathing room from the viewport edge (15 + 20 = 35). */
        padding:               24px 35px 28px;
        margin:                0 -15px -15px;
    }
    .innovation-call-action h6 { font-size: 0.82rem; padding-right: 0; }
    .innovation-call-action .innovation-button { justify-self: center; min-width: 180px; }
}

/* ── RFMA Partners Carousel (CSS marquee, no JS dependency) ── */
.rfma-partners {
    padding:          50px 0;
    background:       var(--color-white);
    border-top:       1px solid var(--color-light-border);
    border-bottom:    1px solid var(--color-light-border);
    cursor:           url('/wp-content/themes/rfma-theme/assets/images/crosshair-cursor.svg') 32 32, crosshair;
}
.rfma-partners *,
.rfma-partners a,
.rfma-partners img {
    cursor:           url('/wp-content/themes/rfma-theme/assets/images/crosshair-cursor.svg') 32 32, crosshair;
    overflow:         hidden;
}

/* Drag-to-scroll on the marquee otherwise triggers the browser's text /
   image selection — which renders the logos with an ugly dark/blue
   highlight rectangle behind them. Disable selection and native image
   dragging on every part of the carousel. (No pointer-events:none on
   the IMG — clicks need to reach the wrapping <a> so the partner links
   still navigate.) */
.rfma-partners,
.rfma-partners * {
    user-select:           none;
    -webkit-user-select:   none;
    -webkit-user-drag:     none;
    -webkit-touch-callout: none;
}
.rfma-partners img {
    -webkit-user-drag: none;
}

.rfma-partners__heading {
    text-align:     center;
    font-family:    var(--font-heading);
    font-size:      1.75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color:          var(--color-text-muted);
    margin-bottom:  32px;
}

.rfma-partners__viewport {
    overflow:  hidden;
    position:  relative;
    /* Fade masks on left + right edges */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, black 8%, black 92%, transparent 100%);
}

.rfma-partners__track {
    display:   flex;
    gap:       60px;
    width:     max-content;
    animation: rfma-marquee 35s linear infinite;
    align-items: center;
}

.rfma-partners__viewport:hover .rfma-partners__track {
    animation-play-state: paused;
}

@keyframes rfma-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.rfma-partners__item {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    justify-content: center;
}

.rfma-partners__item a {
    display: flex;
    align-items: center;
}

.rfma-partners__item img {
    height:     52px;
    width:      auto;
    max-width:  160px;
    object-fit: contain;
    display:    block;
    filter:     grayscale(100%) opacity(0.45);
    transition: filter 0.35s ease;
}

.rfma-partners__item a:hover img,
.rfma-partners__item img:hover {
    filter: grayscale(0%) opacity(1);
}

/* innovation_introduce */
.innovation-introduce { padding: 60px 0; text-align: center; }
.innovation-introduce h2 {
    font-family:    var(--font-heading);
    font-size:      clamp(1.8rem, 4vw, 2.8rem);
    text-transform: uppercase;
    color:          var(--color-text-dark);
    margin-bottom:  16px;
}
.innovation-introduce p { color: var(--color-text-body); max-width: 700px; margin: 0 auto 24px; }

/* innovation_icon_box — generic fallback */
.innovation-icon-box { padding: 24px; text-align: center; }
.innovation-icon-box .icon-box-icon { font-size: 2.5rem; color: var(--color-accent); margin-bottom: 16px; }
.innovation-icon-box h4 { font-family: var(--font-heading); font-size: 1.3rem; text-transform: uppercase; color: var(--color-text-dark); margin-bottom: 10px; }
.innovation-icon-box p  { color: var(--color-text-body); font-size: 0.9rem; }

/* ── CONTACT PAGE ────────────────────────────────────────── */

/* Contact info block (rendered by vc_raw_html base64 on contact page) */
.innovation-contact-info {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin-top:     8px;
}

.innovation-contact-info span {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size:     0.92rem;
    color:         var(--color-text-body);
    line-height:   1.5;
}
.innovation-contact-info span:last-child { border-bottom: none; }
.innovation-contact-info span:first-child { padding-top: 0; }

/* Circular icon badge — matches the footer "Follow Us" outlined circles */
.innovation-contact-info .fa {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    flex-shrink:     0;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.04);
    border:          1px solid rgba(255, 255, 255, 0.15);
    color:           rgba(255, 255, 255, 0.7);
    font-size:       0.9rem;
    padding-top:     0;
    text-align:      center;
}
.innovation-contact-info a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--transition);
}
.innovation-contact-info a:hover { color: var(--color-accent); }

/* ── Contact page 2-col layout ───────────────────────────── */

/* WPBakery boxed row on contact page — give it breathing room */
.page-id-270 .page-content-wrap .vc_row,
.page-id-270 .page-content-wrap .wpb_row {
    display:   flex;
    flex-wrap: wrap;
    gap:       0;
}

/* Left: form column */
.page-id-270 .vc_col-sm-8 {
    padding-right: 50px !important;
}

/* Right: info panel — dark card */
.page-id-270 .vc_col-sm-4 .vc_column-inner {
    background:    var(--color-dark);
    border-radius: var(--radius);
    padding:       32px 28px !important;
    position:      sticky;
    top:           100px;
}

/* Right column heading — white on dark */
.page-id-270 .vc_col-sm-4 .innovation-heading.style3 {
    border-left-color: var(--color-accent);
}
.page-id-270 .vc_col-sm-4 .innovation-heading.style3 h2 {
    color: var(--color-text-light);
}
.page-id-270 .vc_col-sm-4 .innovation-heading.style3 p {
    color: var(--color-text-muted);
}

/* Contact info items on dark background */
.page-id-270 .innovation-contact-info span {
    border-bottom-color: rgba(255,255,255,0.08);
    color: var(--color-text-muted);
}
.page-id-270 .innovation-contact-info span:last-child {
    border-bottom: none;
}
.page-id-270 .innovation-contact-info .fa {
    color:      rgba(255, 255, 255, 0.7);
    background:  rgba(255, 255, 255, 0.04);
    border:      1px solid rgba(255, 255, 255, 0.15);
}

/* Contact page form label + input tweaks */
.page-id-270 .gform_wrapper .gfield_label {
    color: var(--color-text-body) !important;
}

/* Contact info heading with description */
.innovation-heading.style3 p {
    font-size:      0.875rem;
    color:          var(--color-text-body);
    text-transform: none;
    letter-spacing: normal;
    font-family:    var(--font-body);
    font-weight:    400;
    margin-top:     8px;
    line-height:    1.7;
}

/* Responsive: stack columns on mobile */
@media (max-width: 768px) {
    .page-id-270 .vc_col-sm-8 { padding-right: 0 !important; }
    .page-id-270 .vc_col-sm-4 .vc_column-inner { position: static; margin-top: 30px; }
}

/* ── SHOP: Single product centering ─────────────────────── */

/* When only 1 product in the grid, center it at ~33% width
   instead of letting it sit flush-left in column 1           */
.woocommerce ul.products li.product:only-child {
    max-width:  360px !important;
    width:      100% !important;
    margin:     0 auto !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
}

/* Also center the ul itself so the card appears in the middle */
.woocommerce ul.products:has(li.product:only-child) {
    justify-content: center;
}

/* ── 25b. RFMA TACTICAL UNMUTE BUTTON ───────────────────── */
/* Replaces RevSlider's runtime-injected "Tap to Unmute" overlay */
.rfma-unmute-btn {
    position:      fixed;
    bottom:        28px;
    right:         28px;
    z-index:       9999;
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       11px 20px 11px 16px;
    background:    rgba(23, 26, 29, 0.88);
    border:        1px solid rgba(235, 34, 39, 0.55);
    border-left:   3px solid var(--color-accent);
    border-radius: 3px;
    cursor:        pointer;
    user-select:   none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:    background var(--transition), border-color var(--transition),
                   transform 0.15s ease, opacity 0.25s ease;
    box-shadow:    0 4px 24px rgba(0,0,0,0.45), 0 0 0 0 rgba(235,34,39,0);
    animation:     rfma-unmute-appear 0.4s cubic-bezier(0.16,1,0.3,1) both,
                   rfma-unmute-pulse  2.8s ease-in-out 0.6s infinite;
}
.rfma-unmute-btn:hover {
    background:      rgba(23, 26, 29, 0.96);
    border-color:    var(--color-accent);
    border-left-color: var(--color-accent);
    transform:       translateY(-1px);
}
.rfma-unmute-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Icon container */
.rfma-unmute-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    flex-shrink:     0;
    color:           var(--color-accent);
}
.rfma-unmute-icon svg { display: block; }

/* Text block */
.rfma-unmute-text {
    display:        flex;
    flex-direction: column;
    line-height:    1.15;
}
.rfma-unmute-label {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color:          rgba(255,255,255,0.45);
}
.rfma-unmute-action {
    font-family:    var(--font-heading);
    font-size:      1.1rem;
    font-weight:    400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          #fff;
    line-height:    1;
}

@keyframes rfma-unmute-appear {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rfma-unmute-pulse {
    0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0  0    0   rgba(235,34,39,0); }
    50%       { box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 14px  4px rgba(235,34,39,0.22); }
}

/* ── 25d. SCREEN READER ─────────────────────────────────── */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}

/* ── 26. RESPONSIVE ──────────────────────────────────────── */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
    .footer-widgets-grid { grid-template-columns: repeat(2, 1fr); }
    .single-post-layout  { grid-template-columns: 1fr; }
    /* On tablet, cap at 2 columns regardless of Customizer setting */
    .woocommerce ul.products,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .shop-subcats { grid-template-columns: repeat(3, 1fr); }
    .shop-hero { padding: 40px 0; }
}

/* Mobile ≤ 768px */
@media (max-width: 768px) {
    :root {
        --topbar-height:  0px;   /* hide top bar on mobile */
        --header-height:  64px;
    }

    .top-bar        { display: none; }
    .menu-toggle    { display: flex; }
    .main-navigation { display: none; }
    .mobile-nav     { display: block; }

    .site-title-group { display: none; }
    .site-header .site-logo        { height: 40px; }

    /* Buttons in body content carry `white-space: nowrap` and a wide horizontal
       padding for desktop — long button labels can overflow the column on mobile.
       Allow wrapping and tighten the padding so they stay inside the content area. */
    .entry-content .btn,
    .entry-content .btn-primary,
    .entry-content .btn-outline,
    .entry-content .innovation-button {
        white-space: normal;
        max-width:   100%;
        padding:     12px 22px;
    }

    /* Hidden nav otherwise leaves an empty 1fr column on the right, pushing
       the icons toward the centre. Drop to two columns so actions sit flush
       right. */
    .header-inner {
        grid-template-columns: 1fr auto;
        gap:                   12px;
    }
    .page-hero    { padding: 24px 0; min-height: 270px; }

    .posts-grid { grid-template-columns: 1fr; }
    .footer-widgets-grid { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }

    /* Mobile footer trim — drop the Company link column (same links are in
       the main menu), the redundant "Upcoming Events" callout, and the
       back-to-top link (mobile users just swipe), so the footer doesn't
       take five screens of scrolling. */
    .footer-widget-col:nth-child(2),
    .footer-widget-col:nth-child(3) { display: none; }
    .footer-back-top                { display: none; }

    /* Tighten the row gap between the brand block and the social/newsletter
       column — the 40px row-gap from the desktop grid feels airy on a
       single-column stack. Same with the surrounding section padding. */
    .footer-widgets      { padding: 40px 0; }
    .footer-widgets-grid { row-gap: 20px; }

    /* With Company and Upcoming Events hidden, the social icons sit just
       below the brand block. Drop the redundant "Follow Us" heading so
       they read as part of the company info block. */
    .rfma-follow-title { display: none; }
    .rfma-follow       { margin-bottom: 18px; }

    /* Mobile: always single column */
    .woocommerce ul.products,
    .woocommerce ul.products[class*="columns-"] { grid-template-columns: 1fr !important; }
    .shop-subcats { grid-template-columns: repeat(2, 1fr); }
    .shop-hero-title { font-size: 2rem; }
    .shop-toolbar { flex-direction: column; align-items: flex-start; }

    .gform_wrapper .top_label li.gfield.gf_first_quarter,
    .gform_wrapper .top_label li.gfield.gf_second_quarter,
    .gform_wrapper .top_label li.gfield.gf_third_quarter,
    .gform_wrapper .top_label li.gfield.gf_fourth_quarter {
        width: 100%; margin-left: 0 !important; padding-left: 0 !important;
        float: none !important; clear: both !important;
    }

    /* Prevent iOS Safari from auto-zooming the viewport when the search field
       gains focus. Any input <16px triggers the zoom — bump search field
       (and any other small inputs in the header) to 16px on mobile. */
    .header-search-bar .search-field { font-size: 16px; }

    /* Mobile nav: a viewport-anchored scrollable drawer. Fixed positioning so
       it survives the sticky header's height clipping and so its own scroll
       works independently of the page. */
    .mobile-nav {
        position:         fixed;
        top:              var(--header-height);
        left:             0;
        right:            0;
        bottom:           0;
        z-index:          999;
        max-height:       0;
        overflow-y:       auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-shadow:       0 12px 24px rgba(0,0,0,0.35);
    }
    .mobile-nav.is-open {
        max-height: calc(100vh - var(--header-height));
        padding-bottom: 24px;
    }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
    .site-branding { gap: 8px; }
    .site-header .site-logo     { height: 36px; }
    .page-hero-title { font-size: 1.5rem; }
}

/* ── 14. SECTION RHYTHM ──────────────────────────────────── */
/* Breathing room between stacked content blocks on inner pages */
.page-content-wrap > .container > *:not(:last-child) {
    margin-bottom: 60px;
}

/* Opt-in accent rule: drop <hr class="rfma-rule"> wherever a section break is wanted */
.rfma-rule {
    border:     0;
    height:     2px;
    width:      60px;
    background: var(--color-accent);
    margin:     40px 0;
}

/* Hide stray leading <br> tags in footer text widgets (legacy widget content) */
.footer-widget-col .widget_text .textwidget > br:first-child {
    display: none;
}

/* ── 18. FOOTER FOLLOW US + SUBSCRIBE FORM ─────────────────
   Both sit inside the 4th footer widget column.            */

/* Follow Us block (social icons) */
.rfma-follow { margin-bottom: 28px; }
.rfma-follow-title {
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          var(--color-champagne);
    border:         none;
    padding:        0 0 12px;
    margin:         0 0 18px;
    position:       relative;
}
.rfma-follow-title::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      28px;
    height:     1px;
    background: var(--color-accent);
}
.rfma-follow-icons {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.rfma-follow-icons a {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    color:           rgba(255, 255, 255, 0.7);
    border:          1px solid rgba(255, 255, 255, 0.15);
    background:      rgba(255, 255, 255, 0.04);
    transition:      color var(--transition),
                     border-color var(--transition),
                     background-color var(--transition);
}
.rfma-follow-icons a:hover {
    color:            #fff;
    border-color:     var(--color-accent);
    background-color: rgba(235, 34, 39, 0.15);
}

/* Newsletter Subscription title (matches the widget-title styling) */
.rfma-newsletter-title {
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          var(--color-champagne);
    border:         none;
    padding:        0 0 12px;
    margin:         0 0 18px;
    position:       relative;
}
.rfma-newsletter-title::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      28px;
    height:     1px;
    background: var(--color-accent);
}

.footer-widget-col .subscribe { margin-top: 0; }

.footer-widget-col .subscribe form {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin:         0;
    padding:        0;
}

/* Hide the empty <p> wrapper's default margins / collapse the envelope icon */
.footer-widget-col .subscribe form p {
    position:    relative;
    margin:      0;
    padding:     0;
    display:     block;
    line-height: 0;
}
.footer-widget-col .subscribe form .fa-envelope-o {
    position:       absolute;
    top:            50%;
    left:           14px;
    transform:      translateY(-50%);
    color:          rgba(255, 255, 255, 0.4);
    font-size:      13px;
    pointer-events: none;
    z-index:        1;
}

/* Email input — dark transparent with hairline border */
.footer-widget-col .subscribe form input[type="text"],
.footer-widget-col .subscribe form input[type="email"] {
    width:            100%;
    padding:          12px 14px 12px 38px;
    font-family:      var(--font-body);
    font-size:        0.82rem;
    font-weight:      400;
    letter-spacing:   0.01em;
    color:            #fff;
    background:       rgba(255, 255, 255, 0.04);
    border:           1px solid rgba(255, 255, 255, 0.12);
    border-radius:    var(--radius);
    outline:          none;
    box-shadow:       none;
    transition:       border-color var(--transition), background-color var(--transition);
    -webkit-appearance: none;
            appearance: none;
}
.footer-widget-col .subscribe form input[type="text"]::placeholder,
.footer-widget-col .subscribe form input[type="email"]::placeholder {
    color:          rgba(255, 255, 255, 0.4);
    text-transform: none;
    letter-spacing: 0.01em;
}
.footer-widget-col .subscribe form input[type="text"]:focus,
.footer-widget-col .subscribe form input[type="email"]:focus {
    border-color: var(--color-accent);
    background:   rgba(255, 255, 255, 0.06);
}

/* Submit button — full-width, matches site button rhythm */
.footer-widget-col .subscribe form input[type="submit"] {
    display:          block;
    width:            100%;
    padding:          12px 22px;
    font-family:      var(--font-body);
    font-size:        0.7rem;
    font-weight:      600;
    text-transform:   uppercase;
    letter-spacing:   0.18em;
    color:            #fff;
    background-color: var(--color-accent);
    border:           2px solid var(--color-accent);
    border-radius:    var(--radius);
    cursor:           pointer;
    transition:       background-color var(--transition), border-color var(--transition), transform 0.15s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
            appearance: none;
}
.footer-widget-col .subscribe form input[type="submit"]:hover {
    background-color: var(--color-accent-hover);
    border-color:     var(--color-accent-hover);
    transform:        translateY(-1px);
    box-shadow:       0 6px 18px rgba(235, 34, 39, 0.35);
}

/* Constant Contact success message */
.footer-widget-col .subscribe #success_message {
    display:        block;
    margin-top:     10px;
    padding:        10px 12px;
    font-size:      0.8rem;
    color:          var(--color-champagne);
    text-align:     center !important;
    background:     rgba(255, 255, 255, 0.04);
    border:         1px solid rgba(255, 255, 255, 0.08);
    border-radius:  var(--radius);
}

/* ── 19. WORDPRESS ALIGNMENT CLASSES ───────────────────────
   Standard classes the editor adds to images / captions / blocks.
   Required for "Align right/left/center" in the WP editor to work. */
.alignright {
    float:        right;
    margin:       0 0 1.2em 1.5em;
    max-width:    50%;
    height:       auto;
}
.alignleft {
    float:        left;
    margin:       0 1.5em 1.2em 0;
    max-width:    50%;
    height:       auto;
}
.aligncenter {
    display:      block;
    margin:       1em auto;
    height:       auto;
}
.alignnone {
    display:      block;
    margin:       1em 0;
    height:       auto;
}

/* Captioned images */
.wp-caption {
    max-width:    100%;
    margin-bottom: 1.5em;
}
.wp-caption.alignright { float: right; margin: 0 0 1.2em 1.5em; }
.wp-caption.alignleft  { float: left;  margin: 0 1.5em 1.2em 0; }
.wp-caption img        { max-width: 100%; height: auto; display: block; }
.wp-caption-text,
.wp-caption .wp-caption-dd {
    font-size:      0.78rem;
    line-height:    1.5;
    color:          var(--color-text-body);
    padding-top:    8px;
    font-style:     italic;
}

/* Clear floats after entry-content so the wrapper expands around floated images */
.entry-content::after {
    content: '';
    display: block;
    clear:   both;
}

/* On narrow screens, drop floats so images stack naturally */
@media (max-width: 600px) {
    .alignright,
    .alignleft,
    .wp-caption.alignright,
    .wp-caption.alignleft {
        float:     none;
        max-width: 100%;
        margin:    1em 0;
    }
}

/* ── 20. HERO — clean Vimeo background-video hero ([rfma_hero]) ──────────
   Replaces Revolution Slider on the home page. A poster image paints the
   LCP instantly; the Vimeo background video loads over it and the poster
   fades out once playback starts (JS adds .is-playing).                   */
.rfma-hero {
    position:     relative;
    width:        100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height:       440px;
    overflow:     hidden;
    background:   #0c0e10;
}
@media (min-width: 768px)  { .rfma-hero { height: 600px; } }
@media (min-width: 1600px) { .rfma-hero { height: 700px; } }
@media (min-width: 1920px) { .rfma-hero { height: 850px; } }

/* Mobile: show the video at its native 16:9 aspect, full viewport width,
   so it isn't cropped/zoomed to fill a taller cover box. */
@media (max-width: 767px) {
    .rfma-hero {
        height:       auto;
        aspect-ratio: 16 / 9;
    }
}

/* Poster image — covers the hero, sits above the video until playback */
.rfma-hero-poster {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    z-index:    2;
    opacity:    1;
    transition: opacity 0.6s ease;
    pointer-events: none;
    /* The hero shortcode renders inside .entry-content, which adds a
       1.75em vertical margin, soft drop-shadow, and 4px border-radius to
       every <img>. On an absolutely positioned element those margins push
       the poster off `inset:0`, leaving black bars above/below until the
       video loads. Reset them so the poster truly fills the hero box. */
    margin:        0 !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
}
.rfma-hero.is-playing .rfma-hero-poster { opacity: 0; }

/* Vimeo iframe — cover-fit, cropped cleanly to fill the hero box */
.rfma-hero-frame { position: absolute; inset: 0; z-index: 1; }
.rfma-hero-iframe {
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    width:      100vw;
    height:     56.25vw;          /* 16:9 from width  */
    min-width:  177.78vh;         /* 16:9 from height */
    min-height: 100%;
    border:     0;
    pointer-events: none;
}
/* Mobile: hero box is already 16:9, so the iframe just fills it 1:1 —
   no cover-fit cropping needed. */
@media (max-width: 767px) {
    .rfma-hero-iframe {
        top:        0;
        left:       0;
        transform:  none;
        width:      100%;
        height:     100%;
        min-width:  0;
        min-height: 0;
    }
}

/* Tap to Unmute button — dark panel, red muted-speaker icon, "AUDIO"
   eyebrow over a bold uppercase label, with a red bottom accent rule.    */
.rfma-hero-unmute {
    position:        absolute;
    bottom:          32px;
    right:           32px;
    z-index:         5;
    display:         inline-flex;
    align-items:     center;
    gap:             11px;
    padding:         10px 20px;
    background:      linear-gradient(180deg, #25272c 0%, #131418 100%);
    border:          1px solid rgba(255, 255, 255, 0.12);
    border-bottom:   3px solid var(--color-accent);
    border-radius:   10px;
    box-shadow:      0 12px 32px rgba(0, 0, 0, 0.5);
    cursor:          pointer;
    -webkit-appearance: none;
            appearance: none;
    transition:      transform 0.18s ease,
                     box-shadow 0.2s ease,
                     opacity 0.3s ease;
}
.rfma-hero-unmute:hover {
    transform:  translateY(-2px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.6);
}
.rfma-hero-unmute:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 3px;
}
.rfma-hero-unmute.is-fading { opacity: 0; }
.rfma-hero-unmute[hidden]   { display: none; }

.rfma-hero-unmute-icon {
    display: inline-flex;
    color:   var(--color-accent);
}
.rfma-hero-unmute-icon svg {
    width:  26px;
    height: 26px;
    display: block;
}
.rfma-hero-unmute-copy {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    line-height:    1;
}
.rfma-hero-unmute-eyebrow {
    font-family:    var(--font-body);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          #8b8d92;
    margin-bottom:  5px;
}
.rfma-hero-unmute-label {
    font-family:    var(--font-heading);
    font-size:      21px;
    font-weight:    700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color:          #ffffff;
}

@media (max-width: 1024px) {
    .rfma-hero-unmute          { gap: 10px; padding: 9px 17px; }
    .rfma-hero-unmute-icon svg { width: 23px; height: 23px; }
    .rfma-hero-unmute-label    { font-size: 18px; }
}
@media (max-width: 767px) {
    .rfma-hero-unmute {
        bottom:  16px;
        right:   16px;
        gap:     8px;
        padding: 8px 14px;
    }
    .rfma-hero-unmute-icon svg { width: 20px; height: 20px; }
    .rfma-hero-unmute-eyebrow  { font-size: 9px; letter-spacing: 0.2em; margin-bottom: 4px; }
    .rfma-hero-unmute-label    { font-size: 15px; }
}

/* ── 21. ABOUT RFMA — home page section (light editorial) ────
   Sits between the dark call-action band and the white Partners carousel.
   Clean cool off-white, no texture, crisp section boundaries.          */
.rfma-about-section {
    position:   relative;
    margin:     0;
    padding:    56px 0 64px;
    text-align: center;
    background: #fafafa;
    color:      var(--color-text-dark);
    overflow:   hidden;
}
/* Sit flush against the dark call-action above and the white partners below
   by neutralising the WPBakery row default margins on this row AND the rows
   immediately above and below it.                                          */
.vc_row.rfma-about-row,
.vc_row.rfma-about-row > .vc_column_container,
.vc_row.rfma-about-row .vc_column-inner,
.vc_row.rfma-about-row .wpb_wrapper,
.vc_row.rfma-about-row--prev,
.vc_row.rfma-about-row--next {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
    padding-top:   0 !important;
    padding-bottom: 0 !important;
}

/* Defensive: zero any <p> margins inside the wpb_wrapper holding the About
   section in case wpautop sneaks in empty paragraphs that JS missed. */
.rfma-about-wrapper > p {
    margin:  0 !important;
    padding: 0 !important;
}
.rfma-about-wrapper > p:empty { display: none !important; }
/* Top red accent rule echoing other section dividers */
.rfma-about-section::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    width:      60px;
    height:     2px;
    background: var(--color-accent);
}

.rfma-about-inner {
    max-width: 760px;
    margin:    0 auto;
    padding:   0 30px;
    position:  relative;
    z-index:   1;
}

/* Eyebrow — small uppercase red label that sits right above the headline */
.rfma-about-eyebrow {
    display:        inline-block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          var(--color-accent);
    margin:         0 0 12px;
    line-height:    1;
}

.rfma-about-section .rfma-about-title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.015em;
    color:          #1a1d22;
    margin:         0 0 24px;
    padding:        0 0 22px;
    position:       relative;
    text-transform: uppercase;
}
/* Centred red accent rule beneath the headline — overrides the
   .entry-content h2::after default (which is bottom-LEFT aligned). */
.rfma-about-section .rfma-about-title::after {
    content:    '' !important;
    display:    block !important;
    position:   absolute !important;
    bottom:     0 !important;
    left:       50% !important;
    transform:  translateX(-50%) !important;
    width:      48px !important;
    height:     2px !important;
    background: var(--color-accent) !important;
}

.rfma-about-body {
    font-family:    var(--font-body);
    font-size:      1rem;
    line-height:    1.75;
    letter-spacing: 0.005em;
    color:          #4a4f57;
    margin:         0 0 32px;
}
.rfma-about-body strong { color: #1a1d22; font-weight: 600; }

.rfma-about-cta {
    display:         flex;
    justify-content: center;
    gap:             14px;
    flex-wrap:       wrap;
}

@media (max-width: 768px) {
    .rfma-about-section { padding: 44px 0 52px; }
    .rfma-about-body    { font-size: 0.95rem; }
}

/* ── 22. About Us page — image+text column layout & CTA spacing ────── */
.entry-content .wp-block-columns.rfma-image-text-row {
    display:     flex;
    gap:         48px;
    align-items: center;
    margin:      2.5em 0;
}
.entry-content .rfma-image-text-row .wp-block-column {
    flex:      1;
    min-width: 0;
}
.entry-content .rfma-image-text-row figure { margin: 0; }
.entry-content .rfma-image-text-row img    { margin: 0; width: 100%; height: auto; }

@media (max-width: 768px) {
    .entry-content .wp-block-columns.rfma-image-text-row {
        flex-direction: column;
        gap:            24px;
    }
}

/* Spacing around the "Meet our world class instructors" CTA */
.entry-content .rfma-about-cta-row {
    margin:     2.5em 0 0;
    text-align: center;
}

/* ── 23. INSTRUCTORS PAGE ───────────────────────────────────────
   /about-us/instructors/ — refines the .instructor-bio block from
   Gutenberg columns into an editorial profile layout.            */

.entry-content .wp-block-columns.instructor-bio {
    display:      flex;
    align-items:  flex-start;
    gap:          56px;
    margin:       0;
    padding:      64px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.entry-content .wp-block-columns.instructor-bio:first-of-type { padding-top: 24px; }
.entry-content .wp-block-columns.instructor-bio:last-of-type  { border-bottom: none; padding-bottom: 24px; }

/* Image column */
.entry-content .instructor-bio .wp-block-column:first-child {
    flex-basis: 33.33%;
    flex-shrink: 0;
}
.entry-content .instructor-bio figure {
    margin: 0;
}
.entry-content .instructor-bio figure img {
    width:         100%;
    height:        auto;
    border-radius: 4px;
    box-shadow:    0 14px 36px rgba(0, 0, 0, 0.12);
    margin:        0;
    display:       block;
}

/* Bio column */
.entry-content .instructor-bio .wp-block-column:nth-child(2) {
    flex-basis: 66.66%;
    flex-grow:  1;
    min-width:  0;
}

/* Instructor name (h2) — large, no accent rule (we use a hairline under role) */
.entry-content .instructor-bio h2.instructor-title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight:    700;
    letter-spacing: -0.02em;
    line-height:    1.05;
    text-transform: uppercase;
    color:          #1a1d22;
    margin:         0 0 6px;
    padding:        0;
}
.entry-content .instructor-bio h2.instructor-title::after { display: none; }

/* "Founder" / sub-role (h4) — small caps red eyebrow */
.entry-content .instructor-bio h4.instructor-title {
    font-family:    var(--font-body);
    font-size:      0.7rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    line-height:    1;
    color:          var(--color-accent);
    margin:         0 0 18px;
    padding:        0;
}

/* Role/specialty paragraph (first p in bio column, contains <strong>) —
   small caps champagne eyebrow with hairline divider below */
.entry-content .instructor-bio .wp-block-column:nth-child(2) > p:first-of-type {
    font-family:    var(--font-body);
    font-size:      0.78rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height:    1.5;
    color:          var(--color-text-body);
    margin:         0 0 22px;
    padding:        0 0 18px;
    border-bottom:  1px solid rgba(0, 0, 0, 0.08);
}
.entry-content .instructor-bio .wp-block-column:nth-child(2) > p:first-of-type strong {
    font-weight: 600;
    color:       var(--color-text-dark);
}

/* Bio body paragraphs */
.entry-content .instructor-bio .wp-block-column:nth-child(2) > p {
    margin:      0 0 1em;
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--color-text-body);
}
.entry-content .instructor-bio .wp-block-column:nth-child(2) > p:last-child { margin-bottom: 0; }

/* Override the lead-in larger-first-paragraph styling on this page —
   first paragraphs of bio columns are NOT lead-ins, they're role labels. */
.entry-content .instructor-bio > * { font-size: inherit; }

@media (max-width: 768px) {
    .entry-content .wp-block-columns.instructor-bio {
        flex-direction: column;
        gap:            24px;
        padding:        40px 0;
    }
    .entry-content .instructor-bio figure img { max-width: 320px; }
}

/* ── 24. EMPTY WPBakery COLUMN HANDLING ────────────────────────────
   Pure-CSS: if a column's inner wrapper is empty (no image, no text),
   hide it and let the remaining sibling column(s) span full width.
   Uses `:has()` + `:empty` (Chrome 105+, Safari 15.4+, Firefox 121+).
   Falls back gracefully on older browsers — the layout looks as it
   did before (a bit cramped) rather than broken.                     */
.wpb_column:has(> .vc_column-inner > .wpb_wrapper:empty) {
    display: none !important;
}
.vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper:empty) > .wpb_column:not(:has(> .vc_column-inner > .wpb_wrapper:empty)) {
    width:     100% !important;
    max-width: 100% !important;
    flex:      0 0 100% !important;
}

/* ── 25. TRAINING PAGES — content rhythm refinements ──────────────
   Pages like /training/military-government/, /training/private/, etc.
   Use the .innovation-heading + .wpb_text_column structure. We refine
   the supporting text and paragraph rhythm.                          */

/* The first <p><strong>Title</strong></p> after the heading reads as
   a category label — promote it to a champagne small-caps eyebrow. */
.entry-content .wpb_text_column > .wpb_wrapper > p:first-child:has(> strong:only-child) {
    font-family:    var(--font-body);
    font-size:      0.74rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          var(--color-accent);
    margin:         0 0 18px;
    padding:        0 0 14px;
    border-bottom:  1px solid rgba(0, 0, 0, 0.08);
    max-width:      720px;
}
.entry-content .wpb_text_column > .wpb_wrapper > p:first-child:has(> strong:only-child) strong {
    font-weight: inherit;
    color:       inherit;
}

/* Constrain training-page body text to a readable measure */
.entry-content .wpb_text_column > .wpb_wrapper > p {
    max-width: 780px;
}

/* "Call or email" CTA paragraph — give it some breathing space */
.entry-content .wpb_text_column > .wpb_wrapper > p:last-child {
    margin-top: 1.8em;
}

/* ── 26. SHOP OVERVIEW PAGE ─────────────────────────────────────────
   /shop-overview/ — intro lockup + manually-curated category cards. */

/* Intro: text left, facility image right */
.entry-content .rfma-shop-intro {
    display:       flex;
    align-items:   center;
    gap:           56px;
    margin:        0 0 56px;
}
.entry-content .rfma-shop-intro-text { flex: 1; min-width: 0; }
.entry-content .rfma-shop-intro-img  { flex: 0 0 42%; }
.entry-content .rfma-shop-intro-img img {
    width:           100%;
    height:          420px;
    object-fit:      cover;
    object-position: center;
    border-radius:   6px;
    box-shadow:      0 14px 36px rgba(0, 0, 0, 0.12);
    margin:          0;
}
@media (max-width: 900px) {
    .entry-content .rfma-shop-intro-img img { height: 300px; }
}
.entry-content p.rfma-shop-eyebrow {
    display:        block;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color:          var(--color-accent);
    margin:         0 0 12px;
}
.entry-content h2.rfma-shop-title {
    font-family:    var(--font-heading);
    font-size:      clamp(1.7rem, 3vw, 2.4rem);
    font-weight:    700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color:          #1a1d22;
    margin:         0 0 16px;
    padding:        0;
}
.entry-content h2.rfma-shop-title::after { display: none; }
.entry-content p.rfma-shop-lead {
    font-size:   1.05rem;
    line-height: 1.7;
    margin:      0;
}

/* Category card grid */
.entry-content .rfma-shopcat-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   24px;
    margin:                0;
}
@media (max-width: 900px) {
    .entry-content .rfma-shopcat-grid { grid-template-columns: repeat(2, 1fr); }
    .entry-content .rfma-shop-intro   { flex-direction: column; gap: 32px; }
    .entry-content .rfma-shop-intro-img { flex: none; width: 100%; }
}
@media (max-width: 560px) {
    .entry-content .rfma-shopcat-grid { grid-template-columns: 1fr; }
}

/* Individual card */
.entry-content .rfma-shopcat-card {
    display:         flex;
    flex-direction:  column;
    background:      #ffffff;
    border:          1px solid rgba(0, 0, 0, 0.1);
    border-radius:   6px;
    overflow:        hidden;
    text-decoration: none !important;
    background-image: none !important;   /* cancel the entry-content link underline */
    padding-bottom:  0 !important;
    transition:      border-color var(--transition),
                     box-shadow   var(--transition),
                     transform    0.15s ease;
}
.entry-content .rfma-shopcat-card:hover {
    border-color: rgba(235, 34, 39, 0.4);
    box-shadow:   0 14px 32px rgba(0, 0, 0, 0.08),
                  0 2px 6px rgba(235, 34, 39, 0.08);
    transform:    translateY(-3px);
}

/* Card image (shown only when the category has a thumbnail) */
.entry-content .rfma-shopcat-img {
    display:    block;
    width:      100%;
    aspect-ratio: 16 / 10;
    overflow:   hidden;
    background: #f3f3f5;
}
.entry-content .rfma-shopcat-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    margin:     0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.entry-content .rfma-shopcat-card:hover .rfma-shopcat-img img {
    transform: scale(1.04);
}

/* Card body */
.entry-content .rfma-shopcat-body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        24px 24px 22px;
}
.entry-content .rfma-shopcat-name {
    font-family:    var(--font-heading);
    font-size:      1.15rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color:          #1a1d22;
    line-height:    1.2;
}
.entry-content .rfma-shopcat-desc {
    font-family:    var(--font-body);
    font-size:      0.9rem;
    line-height:    1.6;
    color:          var(--color-text-body);
    margin-top:     8px;
}
.entry-content .rfma-shopcat-link {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    margin-top:     auto;
    padding-top:    16px;
    font-family:    var(--font-body);
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color:          var(--color-accent);
}
.entry-content .rfma-shopcat-link svg {
    transition: transform var(--transition);
}
.entry-content .rfma-shopcat-card:hover .rfma-shopcat-link svg {
    transform: translateX(4px);
}

/* Closing note below the training card grid (rental-packages recommendation) */
.entry-content .rfma-training-note {
    max-width:    760px;
    margin:       52px auto 0;
    padding-top:  34px;
    border-top:   1px solid rgba(0, 0, 0, 0.1);
    text-align:   center;
    font-size:    1rem;
    line-height:  1.7;
    color:        var(--color-text-body);
}

/* ── 27. SINGLE PRODUCT PAGE — modern-luxury refinements ───────────── */

/* Product page main wrapper (our single-product.php template) */
.woocommerce-single-main {
    padding: 64px 0 84px;
}
/* Product names run long — use a smaller hero title than other pages
   (the generic .page-hero-title scales up to 4rem, too big here). */
.single-product .page-hero-title {
    font-size:   clamp(1.5rem, 3vw, 2.4rem) !important;
    line-height: 1.18 !important;
}
.single-product .page-hero { padding: 56px 0; }
/* The page-hero now carries the product title as the page H1, so hide the
   duplicate title WooCommerce renders inside the summary column. */
.woocommerce-single-main div.product .product_title {
    display: none !important;
}

/* Product gallery image — soft frame */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
    border-radius: 6px;
    box-shadow:    0 14px 36px rgba(0, 0, 0, 0.1);
}

/* Product title */
.woocommerce div.product .product_title {
    font-family:    var(--font-heading) !important;
    font-size:      clamp(1.6rem, 3vw, 2.3rem) !important;
    font-weight:    700 !important;
    letter-spacing: -0.02em !important;
    line-height:    1.12 !important;
    text-transform: uppercase;
    color:          #1a1d22 !important;
    margin:         0 0 14px !important;
}

/* Stock status — refined pill badge */
.woocommerce div.product .stock {
    display:         inline-block;
    font-family:     var(--font-body);
    font-size:       0.66rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.18em;
    padding:         6px 13px;
    border-radius:   4px;
    line-height:     1.2;
    margin:          0 0 18px;
}
.woocommerce div.product .stock.out-of-stock {
    background: rgba(0, 0, 0, 0.06);
    color:      var(--color-text-body);
    border:     1.5px solid rgba(0, 0, 0, 0.15);
}
.woocommerce div.product .stock.in-stock {
    background: rgba(235, 34, 39, 0.08);
    color:      var(--color-accent);
    border:     1.5px solid rgba(235, 34, 39, 0.3);
}

/* Price */
.woocommerce div.product .summary .price,
.woocommerce div.product .summary .price .amount {
    font-family:    var(--font-heading) !important;
    font-size:      1.8rem !important;
    font-weight:    700 !important;
    letter-spacing: -0.01em;
    color:          var(--color-accent) !important;
}

/* Short description body */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--color-text-body);
    margin:      0 0 22px;
}

/* Product meta — "Category: …" */
.woocommerce div.product .product_meta {
    margin-top:   24px;
    padding-top:  20px;
    border-top:   1px solid rgba(0, 0, 0, 0.08);
    font-family:  var(--font-body);
    font-size:    0.8rem;
}
.woocommerce div.product .product_meta > span {
    display:        block;
    margin-bottom:  6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-text-body);
}
.woocommerce div.product .product_meta a {
    color:           var(--color-accent);
    text-decoration: none;
}

/* Tab panel — description body matches editorial rhythm */
.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-family:    var(--font-heading);
    font-size:      clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight:    700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color:          #1a1d22;
    margin:         0 0 16px;
}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li {
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--color-text-body);
}

/* Related products — match the site-wide card system */
.woocommerce ul.products li.product {
    border:        1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px;
    transition:    border-color var(--transition),
                   box-shadow   var(--transition),
                   transform    0.15s ease !important;
}
.woocommerce ul.products li.product:hover {
    border-color: rgba(235, 34, 39, 0.4) !important;
    box-shadow:   0 14px 32px rgba(0, 0, 0, 0.08),
                  0 2px 6px rgba(235, 34, 39, 0.08) !important;
    transform:    translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size:      1.05rem !important;
    font-weight:    700 !important;
    letter-spacing: -0.005em !important;
}

/* ── 28. SCROLL REVEAL — gentle staged fade-up ─────────────────────
   Hidden state is gated on html.js-reveal (added by an inline head
   script before paint), so with JS disabled all content stays visible. */
html.js-reveal .reveal {
    opacity:    0;
    transform:  translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-reveal .reveal.is-in {
    opacity:   1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.js-reveal .reveal,
    html.js-reveal .reveal.is-in {
        opacity:    1 !important;
        transform:  none !important;
        transition: none !important;
    }
}

/* Footer fade-up — slightly more pronounced than the generic .reveal:
   bigger initial translateY and a longer ease so the footer feels like
   it "rises into place" rather than just appearing. */
html.js-reveal .footer-widgets.reveal {
    transform:  translateY(48px);
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-reveal .footer-widgets.reveal.is-in {
    transform: none;
}

/* WPBakery's `css_animation="bottom-to-top"` uses a `translateY(10%)`
   keyframe (where 10% is 10% of the row's own height — often 60-80px on
   a tall row) and a bouncy easing. It feels sluggish compared to our
   own `rfma-about-reveal` (flat 24px translateY, snappy ease-out).
   Swap WPBakery's animation for ours so all bottom-to-top reveals on
   the site move at the same crisp pace. */
html.js-reveal .wpb_animate_when_almost_visible.wpb_bottom-to-top.wpb_start_animation {
    animation-name:            rfma-about-reveal !important;
    animation-duration:        0.7s !important;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}


/* ── Page-hero reveal — staged fade-up of breadcrumb → title → subtitle
   on every inner page that uses .page-hero. The page-hero element itself
   keeps its background photo / dark overlay visible immediately; only
   the text content animates in. */
@keyframes rfma-hero-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
html.js-reveal .page-hero .rfma-breadcrumb,
html.js-reveal .page-hero .page-hero-title,
html.js-reveal .page-hero .page-hero-subtitle {
    animation: rfma-hero-reveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.js-reveal .page-hero .rfma-breadcrumb     { animation-delay: 0.05s; }
html.js-reveal .page-hero .page-hero-title     { animation-delay: 0.15s; }
html.js-reveal .page-hero .page-hero-subtitle  { animation-delay: 0.25s; }


/* ── First-visit header entrance — top bar slides down + header logo /
   icons fade in on the first page of a browsing session. Suppressed on
   subsequent same-session navigations (the inline head script omits the
   .rfma-first-visit class once a session flag is set) so it doesn't
   replay on every click. */
@keyframes rfma-topbar-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: none;              opacity: 1; }
}
@keyframes rfma-header-fade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
html.rfma-first-visit .top-bar {
    animation: rfma-topbar-down 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.rfma-first-visit .site-header .header-inner {
    animation: rfma-header-fade 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}


/* ── Lazy-image fade-in — when a `loading="lazy"` image finishes
   decoding it transitions from opacity 0 to 1 instead of popping in.
   A tiny JS snippet in main.js adds `[data-loaded]` once each image's
   load event fires. The hero poster carries `fetchpriority="high"`
   without `loading="lazy"`, so it's unaffected and renders immediately. */
html.js-reveal img[loading="lazy"] {
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-reveal img[loading="lazy"]:not([data-loaded]) {
    opacity: 0;
}
html.js-reveal img[loading="lazy"][data-loaded] {
    opacity: 1;
}


/* Universal reduced-motion guard for the polish layer above */
@media (prefers-reduced-motion: reduce) {
    html.js-reveal .page-hero .rfma-breadcrumb,
    html.js-reveal .page-hero .page-hero-title,
    html.js-reveal .page-hero .page-hero-subtitle,
    html.rfma-first-visit .top-bar,
    html.rfma-first-visit .site-header .header-inner {
        animation: none !important;
    }
    html.js-reveal img[loading="lazy"]:not([data-loaded]),
    html.js-reveal img[loading="lazy"][data-loaded] {
        opacity:   1 !important;
        transition: none !important;
    }
}

/* Page-load fade-up — used on About Us, Shop Overview, and every
   WooCommerce product archive (shop / category / tag). The animation
   plays once on initial paint, leaving existing markup, content width,
   and typography untouched. */
@keyframes rfma-about-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
html.js-reveal body.page-id-6291 .entry-content,         /* About Us */
html.js-reveal body.page-id-2071 .entry-content,         /* Shop Overview */
html.js-reveal body.page-id-270  .entry-content,         /* Contact Us */
html.js-reveal body.page-id-8059 .entry-content,         /* Submit a Testimonial */
html.js-reveal body.page-id-1358 .entry-content,         /* Careers */
html.js-reveal body.woocommerce-page.archive .site-main.shop-archive-main {
    animation: rfma-about-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    html.js-reveal body.page-id-6291 .entry-content,
    html.js-reveal body.page-id-2071 .entry-content,
    html.js-reveal body.page-id-270  .entry-content,
    html.js-reveal body.page-id-8059 .entry-content,
    html.js-reveal body.page-id-1358 .entry-content,
    html.js-reveal body.woocommerce-page.archive .site-main.shop-archive-main {
        animation: none;
    }
}

/* ── CLS reservation — hold the hero slider's space before Revolution
   Slider's JS sets its height, so the page doesn't jump on first load. */
rs-module-wrap { min-height: 600px; }
@media (max-width: 767px)  { rs-module-wrap { min-height: 360px; } }
@media (min-width: 1600px) { rs-module-wrap { min-height: 700px; } }
@media (min-width: 1920px) { rs-module-wrap { min-height: 850px; } }


/* ── 29. CART PAGE — modern-luxury refinement ──────────────────────────
   Light editorial page: the cart table spans full width, with a premium
   dark totals panel sitting below it, aligned right. Scoped to
   body.woocommerce-cart so nothing here touches the checkout.            */

/* Cart table full width; totals panel drops below it, right-aligned. */
.woocommerce-cart .woocommerce-cart-form { margin: 0; }
.woocommerce-cart .cart-collaterals {
    display:    flow-root;        /* contains the floated totals panel */
    width:      100%;
    margin-top: 40px;
}
.woocommerce-cart .cart-collaterals .cart_totals {
    float:     right;
    width:     420px;
    max-width: 100%;
}

/* ── Cart table — elevated white card ──────────────────────────────────── */
.woocommerce-cart table.shop_table.cart {
    border:        1px solid var(--color-light-border) !important;
    border-radius: 8px !important;
    overflow:      hidden;
    background:    #fff !important;
    box-shadow:    0 10px 30px rgba(0, 0, 0, 0.05);
}
.woocommerce-cart table.shop_table.cart thead th {
    background:     #fafafa !important;
    border-bottom:  2px solid var(--color-accent) !important;
    font-family:    var(--font-heading) !important;
    font-size:      0.72rem !important;
    letter-spacing: 0.16em !important;
    padding:        18px 18px !important;
}
.woocommerce-cart table.shop_table.cart td {
    padding:       16px 18px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    vertical-align: middle !important;
}

/* Product thumbnail */
.woocommerce-cart td.product-thumbnail img {
    width:         84px;
    height:        84px;
    object-fit:    cover;
    border-radius: 6px;
    border:        1px solid var(--color-light-border);
}

/* Product name */
.woocommerce-cart td.product-name {
    color:       var(--color-text-body);
    font-size:   0.85rem;
    line-height: 1.45;
}
/* `inline` (not block) so the stray "&nbsp;" WooCommerce's cart.php appends
   after the name trails the title harmlessly instead of forming its own
   empty line. The .variation <dl> below is block, so it still drops down. */
.woocommerce-cart td.product-name > a {
    display:         inline;
    font-family:     var(--font-heading);
    font-size:       1.05rem;
    font-weight:     600;
    line-height:     1.3;
    color:           var(--color-text-dark) !important;
    text-decoration: none;
    transition:      color var(--transition);
}
.woocommerce-cart td.product-name > a:hover { color: var(--color-accent) !important; }
.woocommerce-cart td.product-name strong { color: var(--color-text-dark); }

/* EventOn / variation meta (Event Time, Base Price, …) — WooCommerce
   renders these as a floated <dl class="variation"> which wraps messily.
   De-float it: each entry becomes a quiet micro-label above its value.   */
.woocommerce-cart td.product-name .variation {
    margin: 7px 0 0 !important;
    padding: 0;
}
.woocommerce-cart td.product-name .variation dt,
.woocommerce-cart td.product-name .variation dd {
    float:   none !important;
    clear:   none !important;
    display: block;
    width:   auto !important;
}
.woocommerce-cart td.product-name .variation dt {
    margin:         6px 0 1px !important;
    padding:        0 !important;
    font-family:    var(--font-heading);
    font-size:      0.62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color:          #9a9a9a;
}
.woocommerce-cart td.product-name .variation dd {
    margin:      0 !important;
    padding:     0 !important;
    font-size:   0.85rem;
    line-height: 1.4;
    color:       var(--color-text-dark);
}
.woocommerce-cart td.product-name .variation dd p { margin: 0 !important; }

/* Price + subtotal figures */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
    font-family: var(--font-heading);
    font-size:   1rem;
    color:       var(--color-text-dark) !important;
}
.woocommerce-cart td.product-subtotal { font-weight: 700; }

/* Remove (×) — clean circular control */
.woocommerce-cart td.product-remove a.remove {
    display:        inline-flex !important;
    align-items:    center;
    justify-content: center;
    width:          26px;
    height:         26px;
    border:         1px solid var(--color-light-border);
    border-radius:  50%;
    color:          #aaa !important;
    font-size:      18px;
    line-height:    1;
    transition:     background-color var(--transition), color var(--transition), border-color var(--transition);
}
.woocommerce-cart td.product-remove a.remove:hover {
    background:   var(--color-accent) !important;
    border-color: var(--color-accent);
    color:        #fff !important;
}

/* Quantity stepper */
.woocommerce-cart td.product-quantity .quantity input.qty {
    width:         72px;
    padding:       10px 8px;
    text-align:    center;
    border:        1px solid var(--color-light-border);
    border-radius: var(--radius);
    font-family:   var(--font-heading);
    font-size:     0.95rem;
}

/* ── Actions row — coupon + update cart ────────────────────────────────── */
.woocommerce-cart td.actions {
    padding:       20px 18px !important;
    background:    #fafafa !important;
    border-bottom: 0 !important;
}
.woocommerce-cart td.actions .coupon {
    display:        inline-flex;
    gap:            10px;
    align-items:    center;
    vertical-align: top;
    margin:         0 !important;
    float:          none !important;
}
.woocommerce-cart td.actions button[name="update_cart"] {
    float:  right !important;
    margin: 0 !important;
}

/* All three controls share one height so the row reads as a tidy set.
   box-sizing:border-box keeps them equal despite the 1px input border
   vs the 2px button border.                                              */
.woocommerce-cart td.actions .coupon .input-text,
.woocommerce-cart td.actions .coupon button,
.woocommerce-cart td.actions button[name="update_cart"] {
    height:      52px !important;
    box-sizing:  border-box !important;
    margin:      0 !important;
    line-height: 1 !important;
}
.woocommerce-cart td.actions .coupon .input-text {
    width:         240px !important;
    padding:       0 18px !important;
    border-radius: var(--radius);
}

/* Apply Coupon + Update Cart → matched quiet secondary buttons (not red) */
.woocommerce-cart td.actions .coupon button,
.woocommerce-cart td.actions button[name="update_cart"] {
    display:          inline-flex !important;
    align-items:      center;
    justify-content:  center;
    padding:          0 28px !important;
    min-width:        184px;
    background-color: transparent !important;
    background-image: none !important;
    color:            var(--color-dark) !important;
    border:           2px solid var(--color-dark) !important;
}
.woocommerce-cart td.actions .coupon button:hover,
.woocommerce-cart td.actions button[name="update_cart"]:hover {
    background-color: var(--color-dark) !important;
    border-color:     var(--color-dark) !important;
    color:            #fff !important;
    box-shadow:       0 6px 18px rgba(0, 0, 0, 0.18) !important;
}
.woocommerce-cart td.actions button[name="update_cart"]:disabled,
.woocommerce-cart td.actions button[name="update_cart"][disabled] {
    opacity: 0.4;
    cursor:  not-allowed;
}

/* ── Cart totals — premium dark panel ──────────────────────────────────── */
.woocommerce-cart .cart-collaterals .cart_totals {
    background:    linear-gradient(180deg, #20242a 0%, #131417 100%) !important;
    border:        0 !important;
    border-radius: 8px !important;
    padding:       34px 32px !important;
    box-shadow:    0 18px 44px rgba(0, 0, 0, 0.16);
}
.woocommerce-cart .cart_totals h2 {
    color:          #fff !important;
    font-size:      1.4rem !important;
    margin-top:     0 !important;
    padding-bottom: 16px !important;
    margin-bottom:  18px !important;
}
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table.shop_table {
    border:           0 !important;
    background:       transparent !important;
    margin:           0 !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    background:     transparent !important;
    border:         0 !important;
    border-bottom:  1px solid rgba(255, 255, 255, 0.09) !important;
    padding:        15px 0 !important;
    color:          rgba(255, 255, 255, 0.72) !important;
    font-size:      0.9rem;
}
.woocommerce-cart .cart_totals table th {
    font-family:    var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight:    600;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    color:         #fff !important;
    border-bottom: 0 !important;
    padding-top:   18px !important;
    font-size:     1.05rem;
}
.woocommerce-cart .cart_totals .order-total td .amount,
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
    color:       var(--color-accent) !important;
    font-family: var(--font-heading);
    font-size:   1.5rem;
    font-weight: 700;
}

/* Proceed to Checkout — full-width primary call to action */
.woocommerce-cart .wc-proceed-to-checkout { padding: 22px 0 0 !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display:    block !important;
    width:      100%;
    padding:    17px 24px !important;
    font-size:  0.9rem !important;
}

/* ── Empty cart — "Return to shop" as the site's primary red button ─────── */
.woocommerce-cart .return-to-shop a.button {
    padding:          14px 32px !important;
    background-color: var(--color-accent) !important;
    color:            #fff !important;
    border-color:     var(--color-accent) !important;
}
.woocommerce-cart .return-to-shop a.button:hover {
    background-color: var(--color-accent-hover) !important;
    border-color:     var(--color-accent-hover) !important;
    color:            #fff !important;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .woocommerce-cart .cart-collaterals .cart_totals {
        float: none !important;
        width: 100% !important;
    }
}
@media (max-width: 600px) {
    .woocommerce-cart td.actions .coupon {
        display:        flex;
        flex-direction: column;
        align-items:    stretch;
        width:          100%;
        gap:            10px;
    }
    .woocommerce-cart td.actions .coupon .input-text { width: 100% !important; }
    .woocommerce-cart td.actions .coupon button {
        width: 100% !important;
        float: none !important;
    }
    .woocommerce-cart td.actions button[name="update_cart"] {
        float:      none !important;
        width:      100%;
        margin-top: 12px;
    }
}


/* ── 30. COURSE DETAIL PAGES — modern-luxury refinement ─────────────────
   Individual training courses (children of the Civilian page, hence the
   body.parent-pageid-1125 scope) — e.g. /training/civilian/precision-rifle-i/.
   Polishes the WPBakery-built content: photo gallery, the duration/price
   heading, the topic lists and the joining-instructions download link.    */

/* Constrain the course copy to a comfortable reading measure — full-width
   description ran lines far too long to read well. The gallery and the
   Upcoming Courses list (which contains the EventOn calendar) stay full. */
.parent-pageid-1125 .entry-content .wpb_text_column:not(:has(.eventon_events_list)) {
    max-width:     1040px;
    margin-left:   auto;
    margin-right:  auto;
}
.parent-pageid-1125 .entry-content .wpb_text_column:not(:has(.eventon_events_list)) p,
.parent-pageid-1125 .entry-content .wpb_text_column ul li {
    font-size:   1.05rem;
    line-height: 1.8;
}
.parent-pageid-1125 .entry-content .wpb_text_column:not(:has(.eventon_events_list)) p {
    margin: 0 0 1.25em;
}
/* The general training-page rule caps body paragraphs at 780px — course
   pages use the wider 1040px measure, so let their paragraphs fill it. */
.parent-pageid-1125 .entry-content .wpb_text_column > .wpb_wrapper > p {
    max-width: none;
}
/* Opening line (directly under the price badge) → a larger lead paragraph */
.parent-pageid-1125 .entry-content .wpb_text_column .wpb_wrapper > h3:first-child + p {
    font-size:   1.13rem;
    line-height: 1.7;
    color:       #3a3d42;
    margin-bottom: 1.4em;
}

/* Duration + price headline → a confident red badge */
.parent-pageid-1125 .entry-content .wpb_text_column .wpb_wrapper > h3:first-child {
    display:         inline-block;
    margin:          0 0 22px;
    padding:         9px 20px;
    background:      var(--color-accent);
    color:           #fff;
    font-family:     var(--font-heading);
    font-size:       1rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.09em;
    border-radius:   4px;
}
.parent-pageid-1125 .entry-content .wpb_text_column .wpb_wrapper > h3:first-child::after {
    display: none;   /* cancel the theme's heading underline rule */
}

/* Photo gallery — override WPBakery/Isotope absolute layout with a clean,
   uniform responsive grid of rounded thumbnails. */
.parent-pageid-1125 .wpb_image_grid ul.wpb_image_grid_ul {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   10px;
    width:                 auto !important;
    height:                auto !important;
    margin:                0;
    padding:               0;
    list-style:            none;
}
.parent-pageid-1125 .wpb_image_grid ul.wpb_image_grid_ul li.isotope-item {
    position:  static !important;
    left:      auto !important;
    top:       auto !important;
    width:     auto !important;
    height:    auto !important;
    margin:    0 !important;
    transform: none !important;
    overflow:  hidden;
    border-radius: 5px;
}
.parent-pageid-1125 .wpb_image_grid ul.wpb_image_grid_ul li.isotope-item a {
    display: block;
}
.parent-pageid-1125 .wpb_image_grid ul.wpb_image_grid_ul li.isotope-item img {
    display:       block;
    width:         100%;
    aspect-ratio:  4 / 3;
    object-fit:    cover;
    border-radius: 5px;
    transition:    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.parent-pageid-1125 .wpb_image_grid ul.wpb_image_grid_ul li.isotope-item:hover img {
    transform: scale(1.06);
}

/* Topic lists — drop the dated underlined labels; use a crisp red marker
   and a bold, quiet label instead. */
.parent-pageid-1125 .entry-content .wpb_text_column ul {
    list-style: none;
    margin:     0 0 1.5em;
    padding:    0;
}
.parent-pageid-1125 .entry-content .wpb_text_column ul li {
    position:    relative;
    margin:      0 0 22px;
    padding:     0 0 0 26px;
    line-height: 1.75;
    color:       var(--color-text-body);
}
.parent-pageid-1125 .entry-content .wpb_text_column ul li::before {
    content:       "";
    position:      absolute;
    left:          0;
    top:           0.42em;
    width:         8px;
    height:        8px;
    background:    var(--color-accent);
    transform:     rotate(45deg);
}
/* The diamond marker is meant for the page's own bulleted lists — but
   the rule above also catches EventOn's expanded event descriptions
   (their ULs sit inside the same `.wpb_text_column` wrapper). Restore
   the default disc bullet for anything inside an EventOn description. */
.parent-pageid-1125 .entry-content .eventon_full_description ul,
.parent-pageid-1125 .entry-content .eventon_desc_in ul {
    list-style: disc;
    padding:    0 0 0 1.5em;
    margin:     0 0 1.25em;
}
.parent-pageid-1125 .entry-content .eventon_full_description ul li,
.parent-pageid-1125 .entry-content .eventon_desc_in ul li {
    position:    static;
    margin:      0 0 0.5em;
    padding:     0;
    line-height: 1.7;
}
.parent-pageid-1125 .entry-content .eventon_full_description ul li::before,
.parent-pageid-1125 .entry-content .eventon_desc_in ul li::before {
    content: none;
}
/* Topic label → its own line, like a course-syllabus sub-heading */
.parent-pageid-1125 .entry-content u {
    display:         block;
    margin:          0 0 4px;
    text-decoration: none;
    font-family:     var(--font-heading);
    font-size:       1.05rem;
    font-weight:     700;
    color:           var(--color-text-dark);
}

/* "Download Joining Instructions" PDF link → a proper button, with the
   same cursor-tracking spotlight as the site's other buttons (the JS sets
   --mx / --my; the radial gradient layers over the red background-color). */
.parent-pageid-1125 .entry-content a:has(.fa-file-pdf-o) {
    display:           inline-flex;
    align-items:       center;
    gap:               10px;
    margin-top:        20px;
    padding:           14px 32px;
    line-height:       1.4;
    background-color:  var(--color-accent) !important;
    background-image:  radial-gradient(circle 90px at var(--mx, 50%) var(--my, 50%),
                           rgba(255, 255, 255, 0) 0%,
                           rgba(255, 255, 255, 0) 70%) !important;
    background-repeat: no-repeat !important;
    color:             #fff !important;
    font-family:       var(--font-body);
    font-size:         0.8rem;
    font-weight:       600;
    text-transform:    uppercase;
    letter-spacing:    0.08em;
    border-radius:     4px;
    text-decoration:   none !important;
    transition:        background-color 0.2s ease,
                       background-image 0.25s ease,
                       transform 0.15s ease,
                       box-shadow 0.2s ease;
}
.parent-pageid-1125 .entry-content a:has(.fa-file-pdf-o):hover {
    background-color: var(--color-accent-hover) !important;
    background-image: radial-gradient(circle 90px at var(--mx, 50%) var(--my, 50%),
                          rgba(255, 255, 255, 0.32) 0%,
                          rgba(255, 255, 255, 0) 70%) !important;
    transform:        translateY(-1px);
    box-shadow:       0 6px 18px rgba(235, 34, 39, 0.35);
}
.parent-pageid-1125 .entry-content a:has(.fa-file-pdf-o) .fa-file-pdf-o {
    font-size: 16px !important;
}

@media (max-width: 560px) {
    .parent-pageid-1125 .wpb_image_grid ul.wpb_image_grid_ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* The relocated gallery sits in its own full-width row at the foot of the
   course content — give it clear separation from the section above. */
.parent-pageid-1125 .wpb-content-wrapper > .vc_row:last-child .wpb_gallery {
    margin-top: 8px;
}

/* Even, controlled spacing between course-content sections — WPBakery's
   per-column margin shims (vc_custom_*) plus default element margins were
   stacking into large, uneven gaps between rows. */
.parent-pageid-1125 .entry-content [class*="vc_custom_"] { margin-top: 0 !important; }
.parent-pageid-1125 .entry-content .wpb_content_element  { margin-bottom: 0; }
.parent-pageid-1125 .entry-content .wpb_wrapper > p:last-child,
.parent-pageid-1125 .entry-content .wpb_wrapper > ul:last-child { margin-bottom: 0; }
/* !important so the uniform row gap wins over the vc_custom_* reset above
   (rows that carry a vc_custom class would otherwise collapse to 0). */
.parent-pageid-1125 .wpb-content-wrapper > .vc_row + .vc_row { margin-top: 30px !important; }

/* Course pages have several standalone <strong> section titles per column.
   The general training-page rule only restyles the FIRST one (:first-child)
   into a red/underlined eyebrow, so it looked different from the identical
   titles below it. Neutralise that rule on course pages — the first <strong>
   title then renders exactly like the rest (plain bold), so all section
   titles are consistent. */
.parent-pageid-1125 .entry-content .wpb_text_column > .wpb_wrapper > p:first-child:has(> strong:only-child) {
    font-family:    inherit;
    font-size:      1.05rem;   /* match the other course-copy paragraphs */
    text-transform: none;
    letter-spacing: normal;
    color:          inherit;
    margin:         0 0 1.25em;
    padding:        0;
    border-bottom:  0;
    max-width:      none;
}
.parent-pageid-1125 .entry-content .wpb_text_column > .wpb_wrapper > p:first-child:has(> strong:only-child) strong {
    font-weight: bold;
    color:       inherit;
}

/* Inline content images (floated photos within the copy) — a clean, soft
   rounded frame and breathing room from the text. */
.parent-pageid-1125 .entry-content .wpb_text_column img {
    border:        0;
    border-radius: 8px;
    box-shadow:    0 14px 34px rgba(0, 0, 0, 0.18);
}
.parent-pageid-1125 .entry-content img.alignright { margin: 6px 0 22px 36px; }
.parent-pageid-1125 .entry-content img.alignleft  { margin: 6px 36px 22px 0; }
@media (max-width: 600px) {
    .parent-pageid-1125 .entry-content img.alignright,
    .parent-pageid-1125 .entry-content img.alignleft {
        float:  none;
        display: block;
        margin: 16px auto;
    }
}

/* ── External-product loop buttons — long-label fit ─────────────────────
   "Contact us for current pricing and orders" overflowed the fixed
   card-width button; trim side padding + letter-spacing so it fits. */
.woocommerce ul.products li.product a.button.product_type_external {
    background-color: var(--color-accent) !important;
    border-color:     var(--color-accent) !important;
    color:            #fff !important;
}