body.kofc-storeui {
    overflow-x: clip;
    overflow-y: visible;
}

body.kofc-storeui .kofc-kb-content {
    font-size: 15px;
    line-height: 1.6;
    color: #1D1526;
}
body.kofc-storeui .kofc-kb-content p,
body.kofc-storeui .kofc-kb-content ul,
body.kofc-storeui .kofc-kb-content ol,
body.kofc-storeui .kofc-kb-content h1,
body.kofc-storeui .kofc-kb-content h2,
body.kofc-storeui .kofc-kb-content h3,
body.kofc-storeui .kofc-kb-content h4 {
    max-width: 1000px;
}
body.kofc-storeui .kofc-kb-content p,
body.kofc-storeui .kofc-kb-content li {
    font-size: 18px;
    line-height: 1.6;
    color: #1D1526;
}
/* "less gaps" - the stock rhythm stacked a large bottom margin under every block.
   Tighten the vertical rhythm without letting paragraphs run together. */
body.kofc-storeui .kofc-kb-content p {
    margin: 0 0 0.75em;
}
body.kofc-storeui .kofc-kb-content ul,
body.kofc-storeui .kofc-kb-content ol {
    margin: 0 0 0.75em;
    padding-left: 1.25em;
}
body.kofc-storeui .kofc-kb-content li {
    margin-bottom: 0.25em;
}
/* Lead headings 18px (Jon's number). Top margin stays larger than the bottom so a
   heading binds to the text it introduces rather than floating between blocks. */
body.kofc-storeui .kofc-kb-content h1,
body.kofc-storeui .kofc-kb-content h2,
body.kofc-storeui .kofc-kb-content h3,
body.kofc-storeui .kofc-kb-content h4 {
    font-size: 20px;
    line-height: 1.35;
    color: #1D1526;
    margin: 1.25em 0 0.4em;
    font-weight: 700;
}
body.kofc-storeui .kofc-kb-content > *:first-child {
    margin-top: 0;
}
/* The article H1 is chrome, not prose - it keeps its own scale but shares the ink
   and the measure so the page has one left edge. */
body.kofc-storeui .kofc-kb-title {
    max-width: 560px;
    color: #1D1526;
    margin: 0 0 0.6em;
}

/* ---------- 0c. KB TABLE OF CONTENTS (Jon: "Article sections" limited to h1+h2;
   the h3 entries were crowding it). PM-approved. The plugin builds a
   HIERARCHICAL TOC: h2s become top-level <li>, and h3/h4 go into nested <ul>s. So on
   any article that HAS h2s, hiding the nested levels IS exactly "h1+h2 only" -
   Frequent Rider goes from 52 entries to 4. On an article with NO h2, the plugin has
   already promoted its h3s to the top level, so this degrades to a usable TOC instead
   of an empty one. Measured, not assumed: a literal h1+h2 filter would have emptied
   MEMBER FLOAT's 10-entry TOC completely.

   THE EMPTY GUARD is a safety net for a future article with no headings at all - an
   empty titled rail reads as broken, worse than the crowding it replaced. It does not
   fire on any of today's 16 articles. ---------- */
body.kofc-storeui .pakb-toc-wrap ul ul {
    display: none;
}
body.kofc-storeui .pakb-toc-wrap:not(:has(> ul > li)) {
    display: none;
}

body.kofc-storeui .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods {
    max-width: 720px;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(138, 91, 201, 0.16);
    border-radius: var(--kofc-radius, 0.3rem);
    border-collapse: collapse;
    overflow: hidden;
}
body.kofc-storeui .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods th,
body.kofc-storeui .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods td {
    padding: 0.7em 0.9em;
    border-bottom: 1px solid rgba(138, 91, 201, 0.16);
    vertical-align: middle;
}
body.kofc-storeui .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods tr:last-child td {
    border-bottom: 0;
}
/* Phones: a 2-3 column table at 390px cannot hold its columns, and the plugin ships no
   responsive treatment. Allow it to scroll INSIDE its own box rather than widening the
   page - a horizontally scrolling body is the defect this layer spent today removing. */
@media (max-width: 767px) {
    body.kofc-storeui .woocommerce-MyAccount-content table.woocommerce-MyAccount-paymentMethods {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- 1. Typography: Raleway (Jon 2026-07-27), SELF-HOSTED variable
   woff2 (the strip kills fonts.googleapis.com links by design + house rule =
   no CDN). One variable file per subset covers weights 400-700. ---------- */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/raleway-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/raleway-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
body.kofc-storeui h1,
body.kofc-storeui h2,
body.kofc-storeui h3,
body.kofc-storeui h4,
body.kofc-storeui h5,
body.kofc-storeui h6,
body.kofc-storeui button,
body.kofc-storeui input,
body.kofc-storeui select,
body.kofc-storeui textarea {
    font-family: inherit;
}
body.kofc-storeui,
body.kofc-storeui * {
    -webkit-font-smoothing: antialiased;
}
body.kofc-storeui {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-weight: 400;
}
/* CL6 T3: strong/b = 500 - the ONLY emphasis lever now that body is 300. Beats
   bootstrap's bare b,strong{font-weight:bolder} on specificity + source order.
   The order-total rose strong rule keeps its own 700 (semantic, later + more specific). */
body.kofc-storeui strong,
body.kofc-storeui b {
    font-weight: 500;
}

/* ---------- 2. WP admin bar vs the kit fixed header ---------- */
body.kofc-storeui.admin-bar .header-area {
    top: 32px;
}
@media (max-width: 782px) {
    body.kofc-storeui.admin-bar .header-area {
        top: 46px;
    }
}
body.kofc-storeui.admin-bar .page-content-wrapper {
    margin-top: calc(3.125rem + 32px);
}
@media (max-width: 782px) {
    body.kofc-storeui.admin-bar .page-content-wrapper {
        margin-top: calc(3.125rem + 46px);
    }
}
body.kofc-storeui.admin-bar .suha-offcanvas-wrap {
    top: 32px;
}
@media (max-width: 782px) {
    body.kofc-storeui.admin-bar .suha-offcanvas-wrap {
        top: 46px;
    }
}

/* ---------- 3. Chrome details ---------- */
body.kofc-storeui .page-content-wrapper {
    padding-bottom: 1rem;
}
body.kofc-storeui .sidenav-profile .user-profile i {
    font-size: 3rem;
    color: #ffffff;
    line-height: 1;
}

body.kofc-storeui .sidenav-profile .user-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
body.kofc-storeui .sidenav-profile .kofc-fr-line {
    display: block;
    margin: 0.45rem 0 0;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
}
body.kofc-storeui .sidenav-profile .kofc-fr-line .ti {
    display: block;
    margin: 0.2rem auto 0;
    font-size: 1rem;
    color: #ffffff;
}
body.kofc-storeui .cart-icon-wrap a {
    position: relative;
    display: inline-block;
    font-size: 1.25rem;
    color: #020310;
}
body.kofc-storeui .cart-icon-wrap a span {
    position: absolute;
    top: -0.3rem;
    right: -0.55rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 50rem;
    background-color: #ad4a68;
    color: #ffffff;
    font-size: 0.625rem;
    line-height: 1rem;
    text-align: center;
    font-weight: 700;
}
body.kofc-storeui .suha-footer-nav ul li a {
    position: relative;
}
body.kofc-storeui .kofc-cart-count-dot {
    position: absolute;
    top: -0.35rem;
    right: 50%;
    margin-right: -1.15rem;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.2rem;
    border-radius: 50rem;
    background-color: #ad4a68;
    color: #ffffff;
    font-size: 0.6rem;
    line-height: 0.95rem;
    text-align: center;
    font-weight: 700;
}

/* Neutralize the (style-stripped) qode wrapper divs so they never add gaps */
body.kofc-storeui .wrapper,
body.kofc-storeui .wrapper_inner,
body.kofc-storeui .content,
body.kofc-storeui .content_inner,
body.kofc-storeui .full_width,
body.kofc-storeui .full_width_inner {
    margin: 0;
    padding: 0;
    min-height: 0;
}

/* ---------- 4. WooCommerce notices as kit cards ---------- */
body.kofc-storeui .woocommerce-message,
body.kofc-storeui .woocommerce-info,
body.kofc-storeui .woocommerce-error {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.075);
    color: #020310;
    font-size: 0.875rem;
}
body.kofc-storeui .woocommerce-error {
    border-left: 4px solid #D96A8B;
}
body.kofc-storeui .woocommerce-message {
    border-left: 4px solid #00b894;
}
body.kofc-storeui .woocommerce-info {
    border-left: 4px solid #8A5BC9;
}
body.kofc-storeui .woocommerce-message .button,
body.kofc-storeui .woocommerce-info .button,
body.kofc-storeui .woocommerce-error .button {
    float: right;
    margin-left: 0.75rem;
}

/* ---------- 5. Generic WC buttons -> kit pill buttons ---------- */
body.kofc-storeui .woocommerce .button,
body.kofc-storeui .woocommerce button.button,
body.kofc-storeui .woocommerce a.button,
body.kofc-storeui .woocommerce input.button,
body.kofc-storeui #place_order {
    display: inline-block;
    border: 0;
    border-radius: 50rem;
    /* CL6 DEFAULT button tier: flat --kofc-btn-bg + dark --kofc-btn-text. The
       PRIMARY CTAs (#place_order / add-to-cart / checkout-button) override the bg
       to the gradient below + get white text there, so this dark text applies to
       generic/utility buttons only (which are the light-lavender default tier). */
    background-color: var(--kofc-btn-bg, #d6b0ff);
    color: var(--kofc-btn-text, #6800c4);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.55rem 1.1rem;
    line-height: 1.5;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
body.kofc-storeui .woocommerce .button:hover,
body.kofc-storeui #place_order:hover {
    background-color: #7449B3;
    color: #ffffff;
}
body.kofc-storeui .woocommerce .button:disabled,
body.kofc-storeui .woocommerce .button.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Toolbar above the grid: result count + orderby. A plugin select2-enhances
   the orderby select but its CSS is stripped, leaving a ghost text duplicate -
   hide the select2 shell, force the native select visible, style it kit-like. */
body.kofc-storeui .woocommerce-result-count {
    font-size: 0.75rem;
    color: #62658a;
    margin: 0 0 0.4rem;
}
body.kofc-storeui .woocommerce-ordering {
    margin: 0 0 0.75rem;
}
body.kofc-storeui .woocommerce-ordering .select2-container,
body.kofc-storeui .woocommerce-ordering .select2 {
    display: none !important;
}
body.kofc-storeui .woocommerce-ordering select.orderby {
    position: static !important;
    width: auto !important;
    height: 2.4rem !important;
    opacity: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    border: 1px solid rgba(138, 91, 201, 0.16) !important;
    border-radius: 0.5rem;
    background-color: #ffffff;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    color: #020310;
}

/* ---------- 6. [products] grid -> kit product cards ---------- */
body.kofc-storeui .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
    padding: 0;
    list-style: none;
}
body.kofc-storeui .woocommerce ul.products::before,
body.kofc-storeui .woocommerce ul.products::after {
    display: none;
}
body.kofc-storeui .woocommerce ul.products li.product {
    position: relative;
    width: auto;
    float: none;
    margin: 0;
    padding: 0.75rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
    text-align: left;
    display: flex;
    flex-direction: column;
}
body.kofc-storeui .woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    border-radius: 0.4rem;
    margin-bottom: 0.5rem;
}
/* Bridge parent loop tile: a.product-category > span.image-wrapper > img,
   then a.product-category.product-info > h6 + span.price */
body.kofc-storeui .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.kofc-storeui .woocommerce ul.products li.product h2,
body.kofc-storeui .woocommerce ul.products li.product h6 {
    font-size: 0.875rem;
    font-weight: 500;
    color: #020310;
    margin: 0 0 0.25rem;
    padding: 0;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}
body.kofc-storeui .woocommerce ul.products li.product a.product-info,
body.kofc-storeui .woocommerce ul.products li.product a.product-category {
    display: block;
    text-decoration: none;
}
body.kofc-storeui .woocommerce ul.products li.product .top-product-section {
    position: relative;
}
body.kofc-storeui .woocommerce ul.products li.product .price {
    display: block;
    color: #c62e5c;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
body.kofc-storeui .woocommerce ul.products li.product .price del {
    color: #62658a;
    font-size: 0.75rem;
    font-weight: 500;
    margin-right: 0.3rem;
}
body.kofc-storeui .woocommerce ul.products li.product .price ins {
    text-decoration: none;
}
body.kofc-storeui .woocommerce ul.products li.product .button {
    margin-top: auto;
    align-self: flex-start;
}
body.kofc-storeui .woocommerce ul.products li.product .onsale {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 5;
    min-height: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 50rem;
    background-color: #ffaf00;
    color: #5b3d00;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}
/* envy_stock_catalog loop badge: <span class="onsale out-of-stock-button">
   <span class="out-of-stock-button-inner">out of stock|Low Stock!</span></span>.
   It inherits the .onsale pill above - pin it top-RIGHT so it cannot overlap
   the real sale flash (span.onsale, top-left). */
body.kofc-storeui .woocommerce ul.products li.product .onsale.out-of-stock-button {
    left: auto;
    right: 0.9rem;
    background-color: #ad4a68;
}
body.kofc-storeui .woocommerce ul.products li.product .out-of-stock-button-inner {
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* Pagination -> pill buttons */
body.kofc-storeui .woocommerce nav.woocommerce-pagination {
    text-align: center;
    margin: 1rem 0;
}
body.kofc-storeui .woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    gap: 0.35rem;
    border: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.kofc-storeui .woocommerce nav.woocommerce-pagination ul li {
    border: 0;
    float: none;
    overflow: visible;
}
body.kofc-storeui .woocommerce nav.woocommerce-pagination ul li a,
body.kofc-storeui .woocommerce nav.woocommerce-pagination ul li span {
    display: inline-block;
    min-width: 2.1rem;
    height: 2.1rem;
    line-height: 2.1rem;
    padding: 0 0.5rem;
    border-radius: 50rem;
    background-color: #ffffff;
    color: #020310;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
}
body.kofc-storeui .woocommerce nav.woocommerce-pagination ul li span.current,
body.kofc-storeui .woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: #8A5BC9;
    color: #ffffff;
}

/* Cart/checkout line-item meta: WCPA policy-acknowledgment text dumps whole
   paragraphs under the product name. The LIVE cart page hides dl.variation via
   page CSS - same call here (the data still rides the order). */
body.kofc-storeui .woocommerce table.shop_table dl.variation,
body.kofc-storeui .woocommerce table.shop_table .wc-item-meta {
    display: none;
}

/* ---------- 7. Cart page ---------- */
body.kofc-storeui .woocommerce table.shop_table {
    width: 100%;
    border: 0;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
body.kofc-storeui .woocommerce table.shop_table th,
body.kofc-storeui .woocommerce table.shop_table td {
    border: 0;
    border-bottom: 1px solid rgba(138, 91, 201, 0.16);
    padding: 0.65rem 0.6rem;
    color: #020310;
    background-color: transparent;
    vertical-align: middle;
}
body.kofc-storeui .woocommerce table.shop_table thead th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kofc-label, #17836E); /* CL6 J3: table headers take the LABEL role */
}
body.kofc-storeui .woocommerce table.shop_table tbody tr:last-child td {
    border-bottom: 0;
}
body.kofc-storeui .woocommerce table.cart td.product-thumbnail img {
    width: 3rem;
    height: auto;
    border-radius: 0.4rem;
}
body.kofc-storeui .woocommerce table.cart td.product-name a {
    color: #020310;
    font-weight: 500;
}
body.kofc-storeui .woocommerce table.cart a.remove {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.5rem;
    border-radius: 50rem;
    background-color: #FFFFFF;
    color: #c62e5c !important;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}
body.kofc-storeui .woocommerce table.cart a.remove:hover {
    background-color: #ad4a68;
    color: #ffffff !important;
}
body.kofc-storeui .woocommerce table.cart input.qty,
body.kofc-storeui .woocommerce .quantity input.qty {
    width: 3.6rem;
    height: 2.2rem;
    border: 1px solid rgba(138, 91, 201, 0.16);
    border-radius: 0.4rem;
    text-align: center;
    font-size: 0.875rem;
    background-color: #ffffff;
    color: #020310;
}
/* actions row (the theme cart.php override omits the coupon form on purpose -
   coupons surface via [COUPON-CODE-BLOCK] elsewhere) */
body.kofc-storeui .woocommerce table.cart td.actions {
    padding: 0.75rem 0.6rem;
    text-align: right;
}
/* the override adds a SECOND in-table proceed-to-checkout row with inline
   border styling - the skin keeps ONE checkout CTA (in the totals card) */
body.kofc-storeui .woocommerce table.cart tr:has(td.actions a.checkout-button) {
    display: none;
}
/* totals */
body.kofc-storeui .woocommerce .cart_totals {
    width: 100%;
    float: none;
}
body.kofc-storeui .woocommerce .cart_totals h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
body.kofc-storeui .woocommerce .cart_totals .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
}
body.kofc-storeui .woocommerce .cart_totals table.shop_table td strong,
body.kofc-storeui .woocommerce .cart_totals .order-total .amount {
    color: #c62e5c;
    font-weight: 700;
}

/* Mobile stacked cart: woocommerce-smallscreen.css (kept by the strip) turns
   .shop_table_responsive into label-left stacked blocks at <=768px. Skin that
   stacked shape as kit cards instead of leaving WC's bare default. */
@media (max-width: 768px) {
    body.kofc-storeui .woocommerce table.shop_table_responsive tr {
        display: block;
        background-color: #ffffff;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
        margin-bottom: 0.6rem;
        padding: 0.5rem 0.75rem;
    }
    body.kofc-storeui .woocommerce table.shop_table,
    body.kofc-storeui .woocommerce table.shop_table_responsive {
        background-color: transparent;
        box-shadow: none;
    }
    body.kofc-storeui .woocommerce table.shop_table_responsive tr td {
        display: block;
        text-align: right;
        border-bottom: 1px solid rgba(138, 91, 201, 0.16);
        padding: 0.45rem 0;
    }
    body.kofc-storeui .woocommerce table.shop_table_responsive tr td::before {
        float: left;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--kofc-label, #17836E); /* CL6 J3: responsive data labels */
        line-height: 1.8;
    }
    body.kofc-storeui .woocommerce table.shop_table_responsive tr td:last-child {
        border-bottom: 0;
    }
    body.kofc-storeui .woocommerce table.shop_table_responsive tr td.product-remove,
    body.kofc-storeui .woocommerce table.shop_table_responsive tr td.actions {
        text-align: right;
    }
}

/* ---------- 8. Checkout ---------- */
body.kofc-storeui .woocommerce form.checkout h3,
body.kofc-storeui #order_review_heading {
    font-size: 1rem;
    font-weight: 700;
    color: #020310;
    margin: 1rem 0 0.5rem;
}
body.kofc-storeui .woocommerce form .form-row {
    padding: 0;
    margin: 0 0 0.75rem;
}
body.kofc-storeui .woocommerce form .form-row label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kofc-label, #17836E); /* CL6: field labels (Name:/Email:) take the label token */
    margin-bottom: 0.2rem;
    display: block;
}
body.kofc-storeui .woocommerce form .form-row input.input-text,
body.kofc-storeui .woocommerce form .form-row textarea,
body.kofc-storeui .woocommerce form .form-row select,
body.kofc-storeui .woocommerce form .form-row .select2-selection--single {
    width: 100%;
    height: 3.125rem;
    border: 1px solid rgba(138, 91, 201, 0.16);
    border-radius: 0.5rem;
    background-color: #ffffff;
    padding: 0 1rem;
    font-size: 0.875rem;
    color: #020310;
    box-shadow: none;
}
body.kofc-storeui .woocommerce form .form-row textarea {
    height: 6rem;
    padding: 0.75rem 1rem;
}
body.kofc-storeui .woocommerce form .form-row input.input-text:focus,
body.kofc-storeui .woocommerce form .form-row textarea:focus,
body.kofc-storeui .woocommerce form .form-row select:focus {
    outline: 0;
    border-color: #8A5BC9;
}
body.kofc-storeui .woocommerce form .form-row .select2-selection--single {
    display: flex;
    align-items: center;
}
body.kofc-storeui .woocommerce form .form-row .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
}
/* billing/shipping wrappers as cards */
body.kofc-storeui .woocommerce-billing-fields,
body.kofc-storeui .woocommerce-additional-fields,
body.kofc-storeui .woocommerce-account-fields {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
    padding: 1rem;
    margin-bottom: 1rem;
}
/* order review + payment */
body.kofc-storeui #order_review {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
    padding: 1rem;
}
body.kofc-storeui #order_review table.shop_table {
    box-shadow: none;
    margin-bottom: 0.5rem;
}
body.kofc-storeui .woocommerce #payment {
    background-color: transparent;
    border-radius: 0.5rem;
}
body.kofc-storeui .woocommerce #payment ul.payment_methods {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
}
body.kofc-storeui .woocommerce #payment ul.payment_methods li {
    background-color: #f9f9f9;
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
body.kofc-storeui .woocommerce #payment ul.payment_methods li label {
    font-weight: 700;
    color: #020310;
    margin-left: 0.35rem;
}
body.kofc-storeui .woocommerce #payment div.payment_box {
    background-color: #ffffff;
    border-radius: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    font-size: 0.8rem;
    color: #62658a;
}
body.kofc-storeui .woocommerce #payment div.payment_box::before {
    display: none;
}
body.kofc-storeui #place_order {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
    margin-top: 0.5rem;
}
/* functions.php custom_1_wc_checkout_fields injects 4 label-less member-data
   carrier fields (auto-prefilled, order section) - hide the bare inputs; the
   values still submit as form defaults. */
body.kofc-storeui #member-username_field,
body.kofc-storeui #member-id_field,
body.kofc-storeui #member-email_field,
body.kofc-storeui #lieutenant_field {
    display: none;
}

/* ---------- 8b. Single product CONTAINER (option-gated template; DTWPB
   product-type templates define the layout WITHIN - keep this THIN) ---------- */
body.kofc-storeui--product .kofc-product-wrap div.product {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
    padding: 1rem;
}
body.kofc-storeui--product .woocommerce-product-gallery {
    margin-bottom: 1rem;
}
body.kofc-storeui--product .woocommerce-product-gallery img,
body.kofc-storeui--product .kofc-product-wrap div.product img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kofc-radius);
}
body.kofc-storeui--product .kofc-product-wrap .product_title {
    font-size: 1.7rem; /* ~27px desktop; 1.35rem (~22px) mobile override further down */
    line-height: 1.2;
    /* CL3 X1 (CL6 reconciliation): the product h1 takes the HEADING role so the product
       page and the member page share one headline treatment - color --kofc-h1 #7004d3,
       weight from the shared CL6 heading rule below (400-as-truth, Raleway floor).
       The old `font-weight:600` was DELETED rather than flipped to 400: CL6's later
       equal-specificity rule already sets 400, so the 600 here was a SPENT declaration
       that only read as a contradiction. Same reasoning as DESIGN T4. */
    color: var(--kofc-h1, #7004d3);
}
body.kofc-storeui--product .kofc-product-wrap .summary .price,
body.kofc-storeui--product .kofc-product-wrap .summary .price .amount {
    color: #c62e5c;
    font-weight: 700;
    font-size: 1.05rem;
}
/* SUPERSEDES CL3-P1b (which had flattened this to var(--kofc-radius)): one
   button language everywhere - add-to-cart is a BUTTON, so it is a pill. Width
   is already capped below, which is the correct lever if it reads bulbous. */
body.kofc-storeui--product .kofc-product-wrap form.cart .single_add_to_cart_button {
    border-radius: var(--kofc-radius-pill, 999px);
    background-color: #8A5BC9;
    border: 0;
    color: #ffffff;
    padding: 0.8rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
}
body.kofc-storeui--product .kofc-product-wrap form.cart .quantity input.qty {
    width: 4.5rem;
    height: 2.9rem;
    border: 1px solid rgba(138, 91, 201, 0.16);
    border-radius: var(--kofc-radius-sm);
    text-align: center;
    background-color: #ffffff;
    appearance: textfield;
    -moz-appearance: textfield;
}
body.kofc-storeui--product .kofc-product-wrap .wcpa_form_outer {
    margin: 0.75rem 0;
}
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs,
body.kofc-storeui--product .kofc-product-wrap .related.products {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
    padding: 1rem;
    margin-top: 0.75rem;
}


body.kofc-storeui--product .page-content-wrapper p[style*="text-align: right"] {
    font-size: 14px;
    color: var(--kofc-muted, #7b7481);
}
body.kofc-storeui--product .page-content-wrapper p[style*="text-align: right"] > a {
    font-size: 14px;
    font-weight: 400;
    color: var(--kofc-accent-outside, #7a17e2);
    text-decoration: none;
}
body.kofc-storeui--product .page-content-wrapper p[style*="text-align: right"] > a:hover {
    text-decoration: underline;
}

/* ===== DESKTOP MENU DROPDOWN (Jon via DESIGN/PM 2026-07-29) =====================
   In-place panel under the fixed bar, replacing the page-sliding offcanvas at
   desktop widths. Below 1024px this panel is display:none and the drawer is
   untouched. The toggler's parent (.navbar-logo-container) is the positioning
   context, so the panel anchors under the MENU button.
   BUILT FOR AN UNKNOWN ITEM COUNT (Jon edits the menu tables himself): height is
   capped with internal scroll, labels ellipsis rather than widening the panel,
   and multi-column comes from column-count - there is NO nth-child or
   fixed-count styling anywhere in this block. */
body.kofc-storeui .kofc-menu-panel {
    display: none;
}
body.kofc-storeui .navbar-logo-container {
    position: relative;
}
@media (min-width: 1024px) {
    body.kofc-storeui .kofc-menu-panel {
        display: block;
        position: absolute;
        top: calc(100% + 0.6rem);
        right: 0;
        z-index: 1040;
        min-width: 15rem;
        max-width: 32rem;
        /* never run off the bottom of the viewport - that would re-create the
           reachability problem this item exists to fix */
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        background-color: #ffffff;
        border: 1px solid rgba(138, 91, 201, 0.16);
        border-radius: 0.3rem;
        /* the ONE sanctioned shadow in the flat language: a floating overlay */
        box-shadow: 0 0.5rem 1.5rem rgba(2, 3, 16, 0.12);
        padding: 0.4rem;
    }
    body.kofc-storeui .kofc-menu-panel[hidden] {
        display: none;
    }
    body.kofc-storeui .kofc-menu-panel-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    body.kofc-storeui .kofc-menu-panel--cols .kofc-menu-panel-list {
        column-count: 2;
        column-gap: 0.4rem;
    }
    body.kofc-storeui .kofc-menu-panel-list li {
        margin: 0;
        break-inside: avoid;
    }
    body.kofc-storeui .kofc-menu-panel-list li a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.55rem 0.75rem;
        border-radius: 0.3rem;
        color: #1D1526;
        font-size: 15px;
        line-height: 1.3;
        text-decoration: none;
        white-space: nowrap;
    }
    body.kofc-storeui .kofc-menu-panel-list li a .kofc-menu-panel-label {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.kofc-storeui .kofc-menu-panel-list li a i {
        flex: 0 0 auto;
        font-size: 1.05rem;
        color: var(--kofc-primary, #8A5BC9);
    }
    body.kofc-storeui .kofc-menu-panel-list li a:hover,
    body.kofc-storeui .kofc-menu-panel-list li a:focus {
        background-color: var(--kofc-lav-tint, #E4D9F7);
        color: #1D1526;
        text-decoration: none;
    }
}
/* ===== END DESKTOP MENU DROPDOWN ===== */

/* ---------- 9. Misc content on Base pages ---------- */
body.kofc-storeui .page-content-wrapper h1,
body.kofc-storeui .page-content-wrapper h2.kofc-page-h {
    font-size: 1.15rem;
    font-weight: 700;
    color: #020310;
    margin: 0.75rem 0 0.5rem;
}
body.kofc-storeui .kofc-section-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(2, 3, 16, 0.05);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
/* member-home nav tiles use tabler icons where the kit used images */
body.kofc-storeui .catagory-card .card-body a i {
    display: block;
    font-size: 1.9rem;
    line-height: 1;
    color: #8A5BC9;
    margin: 0 auto 0.35rem;
    text-align: center;
}
body.kofc-storeui .catagory-card .card-body a {
    text-align: center;
}

/* ===== B1b krewe polish (elegant + festive) - appended 2026-07-28 =====
   reserved gold #8a6d3b / #82612f (celebratory/reward/dues moments ONLY). */
body.kofc-storeui {
    --kofc-radius: 0.3rem;
    --kofc-radius-sm: 0.25rem;
    --kofc-radius-pill: 999px;
    --kofc-shadow: none;
    --kofc-shadow-raise: none;
    --kofc-hairline: 1px solid rgba(138, 91, 201, 0.16);
    --kofc-primary: #8A5BC9;
    --kofc-primary-deep: #7449B3;
    --kofc-lav-tint: #E4D9F7;
    --kofc-peri: #5b6ecf;
    --kofc-peri-tint: #E7EBFA;
    --kofc-mint: #62CDB8;
    --kofc-mint-ink: #17836E;
    --kofc-danger: #ad4a68;
    --kofc-btn-bg: #d6b0ff;
    --kofc-btn-text: #6800c4;
    --kofc-h1: #7004d3;
    --kofc-accent-outside: #7004d3; /* JON PALETTE 2026-07-30: ONE link purple */
    --kofc-text-uncarded: #726d76;
    --kofc-muted: #7b7481;
    --kofc-label: #17836E;
    --kofc-bg-uncarded: #fdfdf7;
    /* JON PALETTE 2026-07-30 (official scheme): white content bg; #f5fffa gap/alt
       surfaces; #7004d3 H1+links; #d6b0ff buttons (purple text); #faf1ff callout
       bg; cyan #5cdde3 = DECORATIVE accent only (1.6:1 - never text on white);
       text-safe cyan for h2/strong = #0b6e74 (rollout pending Jon's per-surface look). */
    --kofc-alt-bg: #f5fffa;
    --kofc-callout-bg: #faf1ff;
    --kofc-accent-cyan: #5cdde3;
    --kofc-h2-ink: #0b6e74;
}

/* ===== ITEM B: TWO-STYLE BUTTON SYSTEM =====*/

body.kofc-storeui--member,
body.kofc-storeui--account,
body.kofc-storeui--calendar,
body.kofc-storeui--event,
body.kofc-storeui--policy {
    /* JON PALETTE RULING 2026-07-30 night: button text = deep purple on lavender
       (7.77:1 AAA) - the near-white #f5fffa (1.79:1) is retired for button TEXT. */
    --kofc-btn-text: #6800c4;
}
/* Utility classes for template/content authors (vardues C5 button, form-page
   cleanups): put kofc-btn-style1 (on white card) or kofc-btn-style2 (not on
   white) on any anchor/button. The !important trio exists to beat Bridge
   [button] AUTHORED INLINE styles (same measured justification as the account
   band rule below - inline style attributes beat any selector without it). */
body.kofc-storeui .kofc-btn-style1,
body.kofc-storeui .kofc-btn-style2 {
    display: inline-block;
    border-radius: var(--kofc-radius-pill, 999px) !important;
    padding: 0.55em 1.3em;
    font-weight: 500;
    line-height: 1.8;
    text-decoration: none !important;
}
body.kofc-storeui .kofc-btn-style1 {
    background: var(--kofc-btn-bg, #d6b0ff) !important;
    background-color: var(--kofc-btn-bg, #d6b0ff) !important;
    color: var(--kofc-btn-text, #6800c4) !important;
    border: 1px solid var(--kofc-btn-bg, #d6b0ff) !important;
}
body.kofc-storeui .kofc-btn-style2 {
    background: #f5fffa !important;
    background-color: #f5fffa !important;
    color: var(--kofc-accent-outside, #7a17e2) !important;
    border: 1px solid var(--kofc-accent-outside, #7a17e2) !important;
}
body.kofc-storeui .kofc-btn-style1:hover {
    background: #c79cff !important;
    background-color: #c79cff !important;
    color: var(--kofc-btn-text, #6800c4) !important;
    text-decoration: none !important;
}
body.kofc-storeui .kofc-btn-style2:hover {
    background: var(--kofc-lav-tint, #E4D9F7) !important;
    background-color: var(--kofc-lav-tint, #E4D9F7) !important;
    color: var(--kofc-accent-outside, #7a17e2) !important;
    text-decoration: none !important;
}
/* Size modifier (stack with either style): DESIGN's smaller-button spec for
   supporting actions (FR PROGRAM button = style2 + sm): 13px, ~6x16 padding,
   inline-block left-aligned, never full width. */
body.kofc-storeui .kofc-btn-sm {
    font-size: 13px !important;
    padding: 6px 16px !important;
}
/* ===== END ITEM B SYSTEM ===== */

/* --- Knob 1: softer / rounded card surfaces + gentle purple-tinted shadow.
   Mirrors the exact card selectors so radius/shadow/hairline win by order.
   NOTE: notices are handled separately below so their semantic colored
   left-accent border survives (no border shorthand on them). --- */
body.kofc-storeui .woocommerce ul.products li.product,
body.kofc-storeui .woocommerce table.shop_table,
body.kofc-storeui .woocommerce-billing-fields,
body.kofc-storeui .woocommerce-additional-fields,
body.kofc-storeui .woocommerce-account-fields,
body.kofc-storeui #order_review,
body.kofc-storeui .kofc-section-card,
body.kofc-storeui--product .kofc-product-wrap div.product,
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs,
body.kofc-storeui--product .kofc-product-wrap .related.products {
    border-radius: var(--kofc-radius);
    box-shadow: var(--kofc-shadow);
    border: var(--kofc-hairline);
}
/* notices: keep the colored left accent, only soften radius + shadow */
body.kofc-storeui .woocommerce-message,
body.kofc-storeui .woocommerce-info,
body.kofc-storeui .woocommerce-error {
    border-radius: var(--kofc-radius);
    box-shadow: var(--kofc-shadow);
}
/* pagination pills + payment blocks: soften only (keep pill radius) */
body.kofc-storeui .woocommerce nav.woocommerce-pagination ul li a,
body.kofc-storeui .woocommerce nav.woocommerce-pagination ul li span {
    box-shadow: var(--kofc-shadow);
}
body.kofc-storeui .woocommerce #payment ul.payment_methods li,
body.kofc-storeui .woocommerce #payment div.payment_box {
    border-radius: var(--kofc-radius-sm);
}
/* inputs: a touch more rounding + an accessible soft focus ring */
body.kofc-storeui .woocommerce form .form-row input.input-text,
body.kofc-storeui .woocommerce form .form-row textarea,
body.kofc-storeui .woocommerce form .form-row select,
body.kofc-storeui .woocommerce form .form-row .select2-selection--single,
body.kofc-storeui .woocommerce-ordering select.orderby,
body.kofc-storeui .woocommerce table.cart input.qty,
body.kofc-storeui .woocommerce .quantity input.qty,
body.kofc-storeui--product .kofc-product-wrap form.cart .quantity input.qty {
    border-radius: var(--kofc-radius-sm);
}
body.kofc-storeui .woocommerce form .form-row input.input-text:focus,
body.kofc-storeui .woocommerce form .form-row textarea:focus,
body.kofc-storeui .woocommerce form .form-row select:focus {
    border-color: #8A5BC9;
    box-shadow: 0 0 0 3px rgba(138, 91, 201, 0.12);
}
/* member-home nav tiles: round the hover-highlight into a soft chip */
body.kofc-storeui .catagory-card {
    border-radius: var(--kofc-radius-sm);
    transition: background-color 0.2s ease;
}
/* app-chrome header: swap the flat kit halo for a clean purple hairline +
   soft drop (chrome refinement only; placing the Cleo crest = B7/chrome) */
body.kofc-storeui .header-area {
    box-shadow: 0 1px 0 rgba(138, 91, 201, 0.16);
}
/* tasteful lift on product tiles (pointer devices only, so tap does not
   stick the hover state on touch) */
@media (hover: hover) {
    body.kofc-storeui .woocommerce ul.products li.product {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    body.kofc-storeui .woocommerce ul.products li.product:hover {
        transform: translateY(-2px);
        box-shadow: var(--kofc-shadow-raise);
    }
}

/* --- Knob 3 + 4: Raleway elegance + a restrained festive header accent.
   Refined weight (600) with subtle letter-spacing on headings; more
   tracking on the small uppercase labels; body copy left readable. --- */
body.kofc-storeui h1,
body.kofc-storeui h2,
body.kofc-storeui h3,
body.kofc-storeui h4,
body.kofc-storeui h5,
body.kofc-storeui h6 {
    /* CL6 T5 (400-as-truth): headings drop to the font's thinnest = 400 (Raleway
       floor; Jon ruled 300, clamps to 400); differentiate by SIZE + COLOR, not weight. */
    font-weight: 400;
    letter-spacing: 0.01em;
}
body.kofc-storeui .page-content-wrapper h1,
body.kofc-storeui .page-content-wrapper h2.kofc-page-h,
body.kofc-storeui--product .kofc-product-wrap .product_title,
body.kofc-storeui #order_review_heading,
body.kofc-storeui .woocommerce form.checkout h3,
body.kofc-storeui .woocommerce .cart_totals h2 {
    font-weight: 400; /* CL6 T2/T5 - 400-as-truth (Raleway floor) */
    letter-spacing: 0.02em;
}
body.kofc-storeui .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.kofc-storeui .woocommerce ul.products li.product h2,
body.kofc-storeui .woocommerce ul.products li.product h6 {
    font-weight: 400; /* CL6 T5 - 400-as-truth (Raleway floor) */
    letter-spacing: 0.01em;
}
/* small uppercase labels read more refined with extra tracking */
body.kofc-storeui .woocommerce table.shop_table thead th,
body.kofc-storeui .suha-footer-nav ul li a {
    letter-spacing: 0.06em;
}
/* restrained festive flourish: a short purple-to-magenta rule under the
   MAIN page header only (not every heading) - Muses/Freret restraint */
body.kofc-storeui .page-content-wrapper h1,
body.kofc-storeui .page-content-wrapper h2.kofc-page-h {
    padding-bottom: 0.15rem;
}
body.kofc-storeui .page-content-wrapper h1::after,
body.kofc-storeui .page-content-wrapper h2.kofc-page-h::after {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    margin-top: 0.4rem;
    border-radius: 50rem;
    background-color: #8A5BC9;
}

/* --- Knob 2 (part): elevate the PRIMARY conversion CTAs to a subtle
   purple-to-magenta gradient (the theme's own login-gradient family) with a
   soft purple glow. Small utility .button pills stay solid purple, so the
   gradient marks hierarchy rather than shouting everywhere. --- */
body.kofc-storeui #place_order,
body.kofc-storeui .woocommerce .cart_totals .checkout-button,
body.kofc-storeui--product .kofc-product-wrap form.cart .single_add_to_cart_button {
    background-color: #8A5BC9;
    background-image: linear-gradient(135deg, #7A4BBD 0%, #8A5BC9 100%);
    letter-spacing: 0.03em;
    /* CL6 Q2 PRIMARY tier: keep gradient + glow, and force WHITE text (the base
       button rule now sets dark --kofc-btn-text, which would be unreadable on the
       dark gradient). This is what keeps Place Order / Add-to-Cart legible. */
    color: #ffffff;
}
/* soft glow retained ONLY on add-to-cart + place-order (SOFTEN sec 3) */
body.kofc-storeui #place_order,
body.kofc-storeui--product .kofc-product-wrap form.cart .single_add_to_cart_button {
    box-shadow: 0 6px 16px -6px rgba(138, 91, 201, 0.25);
}
body.kofc-storeui #place_order:hover,
body.kofc-storeui .woocommerce .cart_totals .checkout-button:hover,
body.kofc-storeui--product .kofc-product-wrap form.cart .single_add_to_cart_button:hover {
    background-image: linear-gradient(135deg, #7449B3 0%, #7A4BBD 100%);
    color: #ffffff;
}
body.kofc-storeui #place_order:hover,
body.kofc-storeui--product .kofc-product-wrap form.cart .single_add_to_cart_button:hover {
    box-shadow: 0 8px 20px -6px rgba(138, 91, 201, 0.35);
}
/* generic pill buttons: a hair of tracking for a more composed look */
body.kofc-storeui .woocommerce .button,
body.kofc-storeui .woocommerce a.button,
body.kofc-storeui .woocommerce button.button,
body.kofc-storeui .woocommerce input.button {
    letter-spacing: 0.02em;
}

/* --- Knob 2 (reserved GOLD garnish): OPT-IN classes ONLY, for reward /
   frequent-rider-level / celebratory / "included in dues" moments. These do
   NOT render until markup adds the class - deliberately reserved so gold
   never becomes a general accent. Wiring them onto the actual dues/reward
   elements (e.g. an "Included in your dues" badge on package tiles, a gold
   hairline on the member-home dues highlight card) is B7/template territory
   and is NOT done here. --- */
body.kofc-storeui .kofc-gold-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px; /* CL3-P6: flattened per ruling */
    background-image: linear-gradient(135deg, #8a6d3b 0%, #82612f 100%);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}
body.kofc-storeui .kofc-gold-badge--outline {
    background-image: none;
    background-color: transparent;
    color: #82612f;
    border: 1px solid #8a6d3b;
}
/* combine with a card surface (e.g. class="kofc-section-card kofc-highlight-card") */
body.kofc-storeui .kofc-highlight-card {
    border-top: 2px solid #8a6d3b;
    background-image: linear-gradient(180deg, rgba(162, 129, 82, 0.06) 0%, rgba(255, 255, 255, 0) 40%);
}
body.kofc-storeui .kofc-gold-divider {
    height: 2px;
    border: 0;
    margin: 0.9rem 0;
    border-radius: 50rem;
    background-image: linear-gradient(90deg, rgba(162, 129, 82, 0) 0%, #8a6d3b 50%, rgba(162, 129, 82, 0) 100%);
}

/* --- Mobile stacked cart: re-assert the kit's transparent-table / card-per-row
   shape (section 7) AFTER the global card shadow above, and upgrade each row
   card to the softer polish shadow. Keeps the stacked-cart behavior intact. --- */
@media (max-width: 768px) {
    body.kofc-storeui .woocommerce table.shop_table,
    body.kofc-storeui .woocommerce table.shop_table_responsive {
        background-color: transparent;
        box-shadow: none;
        border: 0;
    }
    body.kofc-storeui .woocommerce table.shop_table_responsive tr {
        border-radius: var(--kofc-radius);
        box-shadow: var(--kofc-shadow);
        border: var(--kofc-hairline);
    }
    body.kofc-storeui .woocommerce table.shop_table_responsive tr td::before {
        letter-spacing: 0.06em;
    }
}
/* ===== end B1b polish ===== */

/* ===== SOFTEN change list 1, sec 3c (HEAD DESIGN 2026-07-28) =====
   (a) PRICE COLOR EXCEPTION: WooCommerce prices are INK (#020310) with a grey
   (#62658a) strike-through compare - NOT the rose map. Coral/rose prices read as
   clearance/error. Rose (#D96A8B) stays ONLY on the cart-count dot, Sale!/discount
   badges, and remove icons. This block loads last so it wins over the sec-2 swaps.
   (b) content-area paragraphs bumped 12px -> 15px (links were 16px = inverted
   hierarchy). Scoped conservatively to the product short-description + WC tabs
   content; badges/labels/captions untouched. */
body.kofc-storeui .woocommerce ul.products li.product .price,
body.kofc-storeui .woocommerce ul.products li.product .price ins,
body.kofc-storeui .woocommerce ul.products li.product .price ins .amount,
body.kofc-storeui .woocommerce ul.products li.product .price .amount,
body.kofc-storeui--product .kofc-product-wrap .summary .price,
body.kofc-storeui--product .kofc-product-wrap .summary .price .amount,
body.kofc-storeui--product .kofc-product-wrap .summary .price ins,
body.kofc-storeui--product .kofc-product-wrap .summary .price ins .amount,
body.kofc-storeui .woocommerce .cart_totals .order-total .amount,
body.kofc-storeui .woocommerce .price,
body.kofc-storeui .woocommerce .price .amount {
    color: #020310;
}
body.kofc-storeui .woocommerce ul.products li.product .price del,
body.kofc-storeui .woocommerce ul.products li.product .price del .amount,
body.kofc-storeui--product .kofc-product-wrap .summary .price del,
body.kofc-storeui--product .kofc-product-wrap .summary .price del .amount,
body.kofc-storeui .woocommerce .price del,
body.kofc-storeui .woocommerce .price del .amount {
    color: #62658a;
}
body.kofc-storeui .woocommerce div.product .woocommerce-product-details__short-description,
body.kofc-storeui .woocommerce div.product .woocommerce-product-details__short-description p,
body.kofc-storeui .woocommerce div.product .woocommerce-tabs .panel p,
body.kofc-storeui .woocommerce-Tabs-panel p {
    font-size: 0.9375rem;
}

/* ============================================================================
   WPBakery responsive-visibility shim (cleanbase compat) - 2026-07-29
   WPBakery "Hide on device" (Responsive Options) tags columns with
   vc_hidden-{xs,sm,md,lg}. Those rules live ONLY in the js_composer plugin
   sheet (handle js_composer_front), which enqueues only when a page's
   post_content holds a literal [vc_row shortcode. On cleanbase pages that
   condition is unreliable, so the device-visibility rules go missing and every
   responsive-hidden column renders at once - incl. the desktop/mobile
   dual-render twins (e.g. [VARDUES-CODE-BLOCK] desk vs [VARDUESMOB-CODE-BLOCK]
   mob), producing doubled content. These four rules reproduce js_composer.min
   verbatim (same breakpoints, display:none !important) so Responsive Options
   behave identically on cleanbase pages. Scoped to body.kofc-storeui = the
   cleanbase family only, never global. Reversible: delete this block + bump
   $ver. Upstream defines no vc_hidden-xl and no bare .vc_hidden{display:none},
   so none is added here (faithful reproduction). */
@media (max-width:767px){
    body.kofc-storeui .vc_hidden-xs{display:none !important;}
}
@media (min-width:768px) and (max-width:991px){
    body.kofc-storeui .vc_hidden-sm{display:none !important;}
}
@media (min-width:992px) and (max-width:1199px){
    body.kofc-storeui .vc_hidden-md{display:none !important;}
}
@media (min-width:1200px){
    body.kofc-storeui .vc_hidden-lg{display:none !important;}
}

/* ============================================================================
   CL2 PART A - chrome quick wins (HEAD DESIGN change list 2, 2026-07-29)
   A1 admin-bar offset | A2 crest sizing | A3 labeled MENU toggler | A5 prose 15px
   Scoped body.kofc-storeui throughout; A1 additionally scoped body.admin-bar so
   members WITHOUT the WP admin bar are untouched (verify both per CL2). */
/* A1: logged-in WP admin bar (32px desktop / 46px <=782px) pushed the fixed
   header down visually; pin the header below it only when the bar exists. */
body.kofc-storeui.admin-bar .header-area {
    top: 32px;
}
@media (max-width: 782px) {
    body.kofc-storeui.admin-bar .header-area {
        top: 46px;
    }
}
/* A2: crest replaces the back arrow. 36px tall, links member home. */
body.kofc-storeui .kofc-header-crest {
    display: flex;
    align-items: center;
}
body.kofc-storeui .kofc-header-crest a {
    display: block;
    line-height: 0;
}
body.kofc-storeui .kofc-header-crest img {
    height: 36px;
    width: auto;
    display: block;
}
/* A3: labeled MENU toggler - icon + 12px/600 uppercase label, lavender primary,
   hairline 3px pill (badge language, NOT 50rem), >=44px tap target. */
body.kofc-storeui .suha-navbar-toggler {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(138, 91, 201, 0.45);
    border-radius: 3px;
    cursor: pointer;
}
body.kofc-storeui .suha-navbar-toggler .kofc-menu-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8A5BC9;
    line-height: 1;
}
/* A5: member-home card prose to 15px (links are 16px - fixes the inverted
   hierarchy). Captions/badges/small stay as-is. */
body.kofc-storeui .kofc-member-home p {
    font-size: 15px;
}

/* ============================================================================
   CL3 P1 product-page pass (2026-07-29)
   New rules only (in-place value edits landed inline above, at the existing
   selectors). P1a mobile title override, P1b CTA row layout + spinner-free
   qty companion selectors, P1c qty native spinner removal, P1d tab-button
   styling (no tab styling existed before this pass). Scoped to the product
   container prefixes already used by the neighbor rules above. */

/* P1a: title mobile override (paired with the in-place 1.7rem/line-height
   edit on .product_title above). */
@media (max-width: 600px) {
    body.kofc-storeui--product .kofc-product-wrap .product_title {
        font-size: 1.35rem;
    }
}

/* P1b: CTA row layout - qty + add-to-cart sit side by side, button grows to
   fill remaining space with a sane cap. Gradient/glow rules (Knob 2 block
   above) are untouched. */
body.kofc-storeui--product .kofc-product-wrap form.cart {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
body.kofc-storeui--product .kofc-product-wrap form.cart .single_add_to_cart_button {
    flex: 1 1 auto;
    max-width: 340px;
}

/* P1c: WooCommerce's native number input renders (Suha kit does not inject
   +/- buttons on product pages) - hide its native spinner arrows. */
body.kofc-storeui--product .kofc-product-wrap form.cart .quantity input.qty::-webkit-outer-spin-button,
body.kofc-storeui--product .kofc-product-wrap form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* P1d: tab buttons - no styling existed for these before this pass. Covers
   both the Bridge ul.tabs markup and the WC 3.x+ .wc-tabs markup. */
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs ul.tabs li a,
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs .wc-tabs li a {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--kofc-radius);
    color: #3A2F45;
    background: transparent;
}
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs ul.tabs li.active a,
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs .wc-tabs li.active a {
    background: #8A5BC9;
    color: #fff;
}
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs ul.tabs,
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs .wc-tabs {
    border: 0;
    box-shadow: none;
}
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs ul.tabs li,
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs .wc-tabs li {
    border: 0;
}
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs ul.tabs li::after,
body.kofc-storeui--product .kofc-product-wrap .woocommerce-tabs ul.tabs::before {
    display: none;
}

/* CL3-P6 gold sale moment (2026-07-29, default ON - Jon veto at wake-up):
   the sale/Early-Bird flash beside the buy-box price gets the gold-badge
   treatment (the ONE celebratory gold spot on product pages; price stays
   ink via the 3c/CL1 price rules). Covers the standard WC sale flash in the
   product summary; if the Early-Bird promo is custom markup, extend this
   selector list at the bronze render (exact-selector confirm deferred per
   the B2 checklist). No new gold surfaces. */
body.kofc-storeui--product .kofc-product-wrap .summary span.onsale,
body.kofc-storeui--product .kofc-product-wrap .summary .onsale {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0 0 8px;
    padding: 0.25rem 0.7rem;
    border-radius: 4px;
    background: none;
    background-image: linear-gradient(135deg, #8a6d3b 0%, #82612f 100%);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    box-shadow: none;
}

/* CL3 addendum (PM/Jon 2026-07-29): hide the WC gallery zoom trigger (the
   magnifying-glass icon) on storeui product pages. CSS-only per ruling. */
body.kofc-storeui--product .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Cart coupon field (2026-07-29, Jon plugin-functionality rule): the native WC
   coupon form re-rendered into td.actions on the storeui cart (lib hook
   kofc_storeui_cart_coupon_field). Kit styling: hairline input + lavender
   apply button, one flex row, wraps on narrow screens. */
body.kofc-storeui .woocommerce .kofc-cart-coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    margin: 0 0 10px;
}
body.kofc-storeui .woocommerce .kofc-cart-coupon input.input-text {
    flex: 1 1 160px;
    max-width: 260px;
    height: 2.6rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(138, 91, 201, 0.16);
    border-radius: 0.3rem;
    background: #ffffff;
    color: #020310;
    font-size: 0.85rem;
}
body.kofc-storeui .woocommerce .kofc-cart-coupon .kofc-cart-coupon-apply {
    flex: 0 0 auto;
    height: 2.6rem;
    line-height: 1;
}

/* accessiBe overlay (2026-07-29, Jon): member-area only; public keeps it.
   NOTE - the access-widget-ui selector below is BELT-AND-BRACES ONLY and does
   NOT work on its own: that custom element is shadow-DOM TAMPER-LOCKED (its
   :host rule sets display/opacity/visibility !important, beating even an
   inline display:none !important - measured live 2026-07-29). The element is
   killed by DOM REMOVAL in _cleanbase-lib.php (kofc_storeui_hide_accessibe,
   mirroring the proven admin-area remover kofc-hide-acsb). These rules still
   usefully cover the plain .acsb-trigger/.acsb-widget divs. Revert = delete
   BOTH blocks. */
body.kofc-storeui access-widget-ui,
body.kofc-storeui .acsb-trigger,
body.kofc-storeui .acsb-widget {
    display: none !important;
}

/* Qty steppers (QA measurement 2026-07-29): the theme's buttons_added
   plus/minus inputs rendered browser-default (2px outset black, h25) against
   the themed h35 qty input - the mismatch also read as line-item table
   misalignment. Kit-style the trio and align it.
   SCOPE WIDENED 2026-07-29 (QA: same defect on PRODUCT pages, not just cart):
   the old selector carried an intermediate descendant .woocommerce, which the
   cart markup has but the product page does not - there "woocommerce" is a
   BODY class, so the rule matched zero elements (measured live: 0 matches,
   buttons 28px/2px-outset-black vs a 46px qty input). Dropping that ancestor
   scopes the rule to body.kofc-storeui = every storeui surface, cart included.
   HEIGHT: buttons stretch to the qty input instead of a fixed 2.2rem, because
   the input is h35 on the cart but h46 on product pages - a fixed height would
   fix one surface and break the other. min-height keeps them sane if some
   surface renders the trio non-flex. */
body.kofc-storeui .quantity.buttons_added {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
}
body.kofc-storeui .quantity.buttons_added input.minus,
body.kofc-storeui .quantity.buttons_added input.plus {
    width: 2rem;
    min-height: 2.2rem;
    align-self: stretch;
    padding: 0;
    border: 1px solid rgba(138, 91, 201, 0.16);
    border-radius: 0.3rem;
    background: #ffffff;
    color: #8A5BC9;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

body.kofc-storeui img.emoji,
body.kofc-storeui img.wp-smiley {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* ============================================================================
   MOBILE CART - KIT CARD LAYOUT (Jon ruling 2026-07-29, option B; reference =
   3rdparty-template/mobile-temp/html/dist/cart.html + its style.css).
   PROBLEM: below the table breakpoint the cart rendered half-table/half-stack.
   The desktop header row (PRODUCT|PRICE|QUANTITY|SUBTOTAL) stayed visible
   while each cell stacked unlabeled beneath it, so values floated with no
   meaning ("$49.88 / stepper / $99.76").
   APPROACH: each cart row becomes a kit line-item CARD - red circular remove
   X, thumbnail, product name with price/subtotal beneath, quantity control on
   the right, dashed separators between items. WC's own data-title attributes
   (present in this markup: Product/Price/Quantity/Subtotal) supply small muted
   labels so nothing is ambiguous.
   MOBILE ONLY (max-width 767.98px). The desktop table is aligned and
   Jon-approved, so it is deliberately untouched.
   Qty stays a REAL editable stepper - the kit's static pill would break WC. */
@media (max-width: 767.98px) {
    body.kofc-storeui .woocommerce-cart-form table.shop_table thead {
        display: none;
    }
    body.kofc-storeui .woocommerce-cart-form table.shop_table,
    body.kofc-storeui .woocommerce-cart-form table.shop_table tbody {
        display: block;
        width: 100%;
        border: 0;
    }
    body.kofc-storeui .woocommerce-cart-form table.shop_table tr.cart_item {
        display: grid;
        grid-template-columns: 1.75rem 3.5rem 1fr auto;
        grid-template-areas:
            "remove thumb name qty"
            "remove thumb meta qty";
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.15rem;
        padding: 0.85rem 0;
        border: 0;
        border-bottom: 0.125rem dashed #f1f1f2;
        background: #ffffff;
    }
    body.kofc-storeui .woocommerce-cart-form table.shop_table tr.cart_item:last-of-type {
        border-bottom: 0;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item > td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-remove {
        grid-area: remove;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-remove a.remove {
        color: #ffffff !important;
        background-color: #ea4c62;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
        border-radius: 50%;
        font-size: 0.75rem;
        display: inline-block;
        text-align: center;
        text-decoration: none;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-remove a.remove:hover {
        background-color: #020310;
        color: #ffffff !important;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-thumbnail {
        grid-area: thumb;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-thumbnail img {
        width: 3.5rem;
        height: auto;
        border-radius: 0.3rem;
        display: block;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-name {
        grid-area: name;
        font-size: 0.8125rem;
        line-height: 1.25;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-name a {
        color: #020310;
        text-decoration: none;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-price,
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-subtotal {
        grid-area: meta;
        font-size: 0.75rem;
        color: #62658a;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-subtotal {
        justify-self: end;
        text-align: right;
        color: #020310;
        font-weight: 600;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-price::before,
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-subtotal::before {
        content: attr(data-title) " ";
        color: #62658a;
        font-weight: 400;
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-quantity {
        grid-area: qty;
        justify-self: end;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item td.product-quantity label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item .quantity.buttons_added input.minus,
    body.kofc-storeui .woocommerce-cart-form tr.cart_item .quantity.buttons_added input.plus {
        width: 1.6rem;
        min-height: 1.9rem;
    }
    body.kofc-storeui .woocommerce-cart-form tr.cart_item .quantity.buttons_added input.qty {
        width: 2.4rem;
        min-height: 1.9rem;
        padding: 0 0.15rem;
        text-align: center;
    }
    body.kofc-storeui .woocommerce-cart-form tr td.actions {
        display: block;
        padding: 1rem 0 0;
        border: 0;
    }
    body.kofc-storeui .woocommerce-cart-form td.actions .coupon {
        display: block;
        padding: 1.25rem;
        border: 1px solid rgba(138, 91, 201, 0.16);
        border-radius: 0.4rem;
        background: #ffffff;
    }
    body.kofc-storeui .woocommerce-cart-form td.actions .coupon input.input-text {
        width: 100%;
        margin: 0 0 0.5rem 0;
    }
    body.kofc-storeui .woocommerce-cart-form td.actions .coupon button {
        width: 100%;
    }
    body.kofc-storeui .cart_totals {
        width: 100%;
        float: none;
        margin-top: 1rem;
        padding: 1rem 1.25rem;
        border: 1px solid rgba(138, 91, 201, 0.16);
        border-radius: 0.4rem;
        background: #ffffff;
    }
    body.kofc-storeui .cart_totals .checkout-button {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* ============================================================================
   HEADER SPEC (Jon 2026-07-29 via PM, verbatim: bar +20% height, crest bigger
   and scaled with it, page title weight 600 -> 300 with font-size +15%, title
   colour #eb74ff). HEAD DESIGN records these as tokens so they are canon.
   Derivations, so the numbers are auditable rather than eyeballed:
     bar    kit .header-area height 3.125rem (50px) x1.20 = 3.75rem (60px)
     crest  36px x1.20 = 44px (keeps the same optical inset in the taller bar)
     title  kit h6 renders 16px; +15% = 18.4px = 1.15rem
   The content wrapper and the admin-bar offsets MUST track the taller bar or
   the first screenful sits under the fixed header - the kit hard-codes
   3.125rem in .page-content-wrapper and our A1 rules add the admin-bar height
   on top of that same constant. */
body.kofc-storeui .header-area {
    height: 3.75rem;
}
body.kofc-storeui .page-content-wrapper {
    margin-top: 3.75rem;
}
body.kofc-storeui.admin-bar .page-content-wrapper {
    margin-top: calc(3.75rem + 32px);
}
@media (max-width: 782px) {
    body.kofc-storeui.admin-bar .page-content-wrapper {
        margin-top: calc(3.75rem + 46px);
    }
}
body.kofc-storeui .kofc-header-crest img {
    height: 44px;
}
/* Beats the earlier "Knob 3+4" heading rule (body.kofc-storeui h6, weight 600)
   on specificity alone - one extra class - so no !important is needed. */
body.kofc-storeui .page-heading h6 {
    font-weight: 300;
    font-size: 1.15rem;
    color: #7d19c4;
}

/* Cart icon: grey -> brand purple, to match the header icon language
   (Jon 2026-07-29). Overrides the #020310 ink set earlier in this file. */
body.kofc-storeui .cart-icon-wrap a {
    /* C2 (Jon PDF pg 3, 2026-07-29): bag/cart icon in the top bar -> #7004d3.
       Absorbed into the BUILD G rail (chrome CSS = this file's partition);
       BUILD F notified so it is not re-done in the vardues rail. */
    color: #7004d3;
}
/* C2 REAL TARGET (live render proof 2026-07-29): the VISIBLE glyph is the <i>,
   which kit-style.css colors independently (.cart-icon-wrap a i -> #62658a), so
   the anchor rule above never reached it - the icon stayed grey. Color the icon
   itself. No !important needed: the page's inline a{!important} rule selects
   anchors, not this element, and this selector outweighs the kit's. */
body.kofc-storeui .cart-icon-wrap a i {
    color: #7004d3;
}

/* ============================================================================
   TOTALS TABLE - SHIPPING ROW ALIGNMENT (Jon screenshot 2026-07-29: the
   "Float Delivery: $4.00" value sat indented/right-shifted while every other
   totals value was flush-left in its column).
   CAUSE: WooCommerce renders the shipping row as a LIST inside the cell -
   ul#shipping_method > li > label - and the browser's default list padding
   (plus the label's own margins) pushes that value in, while sibling rows
   contain a bare amount. Zeroing the list/label box makes the shipping value
   share the same left edge as the other values.
   Applied to BOTH the cart totals and the checkout order-review table, which
   uses the identical markup - the checkout copy was checked while in here per
   the same report. */
body.kofc-storeui .cart_totals ul#shipping_method,
body.kofc-storeui .woocommerce-checkout-review-order-table ul#shipping_method,
body.kofc-storeui .woocommerce-shipping-totals ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.kofc-storeui .cart_totals ul#shipping_method li,
body.kofc-storeui .woocommerce-checkout-review-order-table ul#shipping_method li,
body.kofc-storeui .woocommerce-shipping-totals ul#shipping_method li {
    margin: 0;
    padding: 0;
    list-style: none;
    text-indent: 0;
}
body.kofc-storeui .cart_totals ul#shipping_method label,
body.kofc-storeui .woocommerce-checkout-review-order-table ul#shipping_method label,
body.kofc-storeui .woocommerce-shipping-totals ul#shipping_method label {
    margin: 0;
    padding: 0;
    display: inline;
}

/* ============================================================================
   MENU TOGGLER CENTERING (Jon screenshot 2026-07-29: icon + MENU label read
   off-centre in the pill). CAUSE: the kit's hamburger bars are three DECREASING
   widths (1rem / 0.5rem / 0.75rem) left-aligned (display:block), so the icon is
   lopsided-left next to the label; and our A3 override dropped the kit's
   justify-content. FIX: centre the toggler content in the pill and centre the
   staggered bars so the icon reads balanced. Bars keep their widths. */
body.kofc-storeui .suha-navbar-toggler {
    justify-content: center;
}
body.kofc-storeui .suha-navbar-toggler > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================================================
   HIDE the hardcoded title.php store-nav row (STORE | INDIVIDUAL | PACKAGES |
   CART) on NEW-TEMPLATE (storeui) product pages ONLY (Jon screenshot
   2026-07-29). Old-template product pages keep it; the REAL removal is the
   title.php cleanup in the dynamic-menu redesign. Two selectors in SEPARATE
   rules (a :has() in a shared list would drop the whole list on older engines):
   a positional first-child match + a content-precise :has() on the /store/ link. */
body.kofc-storeui--product .kofc-product-wrap .summary > p:first-child {
    display: none;
}
body.kofc-storeui--product .kofc-product-wrap p:has(a[href*="/store/"]) {
    display: none;
}

/* MENU TOGGLER LABEL - ROOT CAUSE FIX (Jon's 3rd raise, 2026-07-29).
   WHY THE FIRST TWO FIXES FAILED: they adjusted the CONTAINER (centering, padding). The defect is not
   in the container - it is that the LABEL ELEMENT ITSELF is being rendered as a hamburger BAR.
   MEASURED LIVE: span.kofc-menu-label computed to width 12px / HEIGHT 2px, with a grey background,
   despite a 12px font. The word MENU was overflowing a 2px-tall painted bar - which is exactly the
   "label/icon relationship off, crowding, clipping" Jon keeps seeing.
   THE RULE DOING IT (kit-style.css, the Suha kit):
       .suha-navbar-toggler span { height:0.125rem; width:1rem; background:#62658a }
       .suha-navbar-toggler span:last-child { width:0.75rem }
   i.e. the kit styles EVERY span inside the toggler as one of the three hamburger lines, and our text
   label happens to be a span in that container (and is :last-child, hence the 12px width).
   WHY IT KEPT WINNING: `.suha-navbar-toggler span` is specificity (0,1,1); a bare `.kofc-menu-label`
   is (0,1,0), so every label-only fix LOST on specificity. This selector is (0,2,2) and wins cleanly -
   no !important needed.
   FIX = take the label OUT of bar-mode and let it be text again. The toggler is already
   display:flex/align:center/justify:center with gap:7px, so once the label is auto-sized the icon and
   label centre themselves - that is the alignment half of the defect, solved by the same change.
   nowrap prevents the label wrapping (and therefore clipping) at narrow widths. */
body.kofc-storeui .suha-navbar-toggler span.kofc-menu-label {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #62658a;
    white-space: nowrap;
}
/* PART 2 OF THE SAME DEFECT - the PILL could never fit the label.
   MEASURED after part 1: the label became real text (38x12) but sat OUTSIDE the pill
   (labelInsideToggler = false). The kit sizes the toggler as a fixed ICON SQUARE:
       .suha-navbar-toggler { width:2rem; height:2rem; flex:0 0 2rem }   (kit-style.css)
   `flex: 0 0 2rem` pins flex-BASIS to 32px with no grow and no shrink, so in the flex bar the
   box can never widen. Content needs ~85px (16px icon + 7px gap + 38px label + 24px padding);
   it had a 20px content box. That overflow IS the "crowding / clipping at the bar edge".
   NOTE WHY THE EARLIER PARTIAL FIXES PLATEAUED: an existing rule already set min-width:44px,
   which raised the floor but left flex-basis at 32px - and flex-basis, not width, is what sizes
   a flex item. Overriding `width` alone was never going to work.
   FIX: let it size to content, keep the 44px minimum as the touch target. */
body.kofc-storeui .suha-navbar-toggler {
    width: auto;
    flex: 0 0 auto;
    min-width: 44px;
    /* THE THIRD CONSTRAINT, and the one that kept the box at 44px even after width:auto and
       flex-basis:auto were winning: a max-width:2rem cap. Measured live - computed max-width
       was 32px while my width/flex overrides WERE applying (computed flex-basis:auto). A
       max-width cap beats an auto width every time, and min-width:44px then floored it back
       to 44, which is why the pill looked "almost right but still crowded".
       THREE separate kit constraints had to be released for one visual defect:
         1. .suha-navbar-toggler span  -> label rendered as a 2px hamburger bar
         2. flex: 0 0 2rem             -> flex-basis pinned to 32px
         3. max-width: 2rem            -> hard cap (this line)
       Each was individually invisible; fixing any one alone changed nothing on screen, which
       is exactly why this defect survived two previous attempts. */
    max-width: none;
}

/* ACCOUNT-PAGE NAV BAND (rehearsal rider, Jon 2026-07-29): the band under
   "CLICK FOR NAVIGATION MENU" on the account page rendered as run-on text -
   "MEMBER HOMESTORECARTLOG OUT" - with no spacing at all.
   ROOT CAUSE (measured live on 63935): those links are STATIC WPBakery [button]
   shortcodes in the page CONTENT - <a class="qbutton"> directly inside
   div.wpb_wrapper - NOT the dynamic menu. So the B6 styled member layout was never
   going to cover them: B6 only affects the dynamic menu shortcode. And .qbutton's
   styling lives in the BRIDGE PARENT THEME CSS, which the cleanbase template
   dequeues - leaving bare inline anchors with margin 0, hence the run-on.
   FIX: style them as DEFAULT-tier nav pills (CL6 R2 explicitly puts nav pills in the
   default tier: flat --kofc-btn-bg, dark --kofc-btn-text, pill radius, label 500).
   SAFETY - why this cannot hit the dues ladder: the dues buttons also carry .qbutton,
   but they are PRIMARY tier and live inside .kofc-member-home. Verified live on this
   page: 21 .qbutton elements, ZERO inside .kofc-member-home. This rule is scoped to
   body.kofc-storeui--account AND to a direct child of .wpb_wrapper, so it cannot
   reach the member-home ladder or any storeui button elsewhere.
   NOTE: the real fix is content-side - STORE D converting this static block to the
   dynamic menu shortcode (S1 recipe) - which also resolves the duplicate desktop/mobile
   link sets rendering together. This is the tonight-safe presentation fix. */
/* !important is REQUIRED here and is not laziness: the Bridge [button] shortcode
   emits AUTHORED INLINE STYLES on every one of these anchors -
   `color:#18bca6; border-color:#18bca6; font-weight:400; border-radius:2px;
   background-color:#ffffff` - and an inline style attribute beats any stylesheet
   selector no matter how specific. Measured live: without !important only display
   and margin applied (the two properties the inline style does not set), which fixed
   the run-on but left white/teal/2px-radius boxes. Only the properties that actually
   fight the inline style carry !important; everything else stays normal. */
body.kofc-storeui--account .wpb_wrapper > a.qbutton {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 8px 18px !important;
    /* ITEM B (2026-07-29, Jon's typo-corrected ruling ~00:2x): this band sits
       on the PAGE background, not a white card -> STYLE 2 = OUTLINE pill
       (bg #f5fffa, text #7a17e2, border #7a17e2). */
    background: #f5fffa !important;
    background-color: #f5fffa !important;
    color: var(--kofc-accent-outside, #7a17e2) !important;
    border: 1px solid var(--kofc-accent-outside, #7a17e2) !important;
    border-radius: var(--kofc-radius-pill, 999px) !important;
    font-size: 0.9rem;
    font-weight: 500 !important;
    line-height: 1.8;
    text-decoration: none;
}
body.kofc-storeui--account .wpb_wrapper > a.qbutton:hover {
    background: var(--kofc-lav-tint, #E4D9F7) !important;
    background-color: var(--kofc-lav-tint, #E4D9F7) !important;
    color: var(--kofc-accent-outside, #7a17e2) !important;
    text-decoration: none;
}



/* ---------- KB ARTICLE SIDE-RAIL (Jon ruling 2026-07-30 night): article content
   starts at the TOP of the page; the auto-generated Article sections list is KEPT
   and floats RIGHT beside the text on desktop (280px rail). On phones/tablets the
   rail stacks above the content at full width. Jon's live hand-edits tonight
   (1000px caps, 18px body, 20px headings) are the baseline and preserved. ---------- */
body.kofc-storeui .kofc-kb-article {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 992px) {
    body.kofc-storeui .kofc-kb-article .pakb-toc-wrap {
        float: right;
        width: 280px;
        margin: 0 0 20px 28px;
    }
    body.kofc-storeui .kofc-kb-content .vc_row,
    body.kofc-storeui .kofc-kb-content .wpb_row {
        clear: none;
    }
}

/* ---------- HEADER TITLE STRIP (Jon 2026-07-30 night): the wayfinding title moved
   OUT of the fixed bar - the left logo and right cart/menu cluster have unequal
   widths, so an in-bar title can never sit on true page center and shifts with its
   own length. It now renders on its own full-width centered strip directly below
   the bar (same .page-heading h6 typography). Long titles simply wrap here - the
   old 18-char bar cap concern no longer applies. ---------- */
body.kofc-storeui .kofc-title-strip {
    text-align: center;
    padding: 10px 12px 0;
}