/*
Theme Name: Creative IT
Theme URI: https://creative-it.ie
Description: Custom theme for Creative IT Ecommerce. Built for the Elementor → Gutenberg migration. Currently a Kadence child while we migrate templates; standalone planned for v0.18+.
Author: Creative IT
Author URI: https://creative-it.ie
Template: kadence
Version: 0.45.3
License: Proprietary
Text Domain: creative-it
*/

/* Most styles live in theme.json (colors, typography, spacing).
   This file is for CSS that can't be expressed in theme.json — header overrides,
   trust bar, sale badges, hover states beyond what core blocks expose. */

/* ============================================================
   Brand tokens (mirror of theme.json palette, available in CSS)
   ============================================================ */
:root {
    --cit-navy: #0F2238;
    --cit-navy-light: #1A2D44;
    --cit-navy-dark: #060F1E;
    --cit-orange: #F26522;
    --cit-orange-light: #FF8C5C;
    --cit-orange-dark: #C44E15;
    --cit-cream: #F5EDD9;
    --cit-text-light: #FFFFFF;
    --cit-text-muted: #6B7785;
}

/* ============================================================
   Promo strip (top of every page, above trust bar)
   Conditional — only renders when filter returns non-empty text.
   ============================================================ */
.cit-promo-strip {
    background-color: var(--cit-navy);
    color: var(--cit-text-light);
    text-align: center;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.cit-promo-strip .cit-promo-link {
    color: var(--cit-text-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}

.cit-promo-strip .cit-promo-link:hover {
    color: var(--cit-orange);
}

@media (max-width: 600px) {
    .cit-promo-strip {
        font-size: 0.8125rem;
        padding: 0.45rem 0.75rem;
    }
}

/* ============================================================
   Trustpilot trust bar (top of every page)
   ============================================================ */
.cit-trust-bar {
    background-color: var(--cit-orange);
    color: var(--cit-text-light);
    text-align: center;
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

/* ============================================================
   Top utility bar (phone, hours, free shipping)
   Sits between trust bar and Kadence's main header
   ============================================================ */
.cit-utility-bar {
    background-color: var(--cit-navy-dark);
    color: var(--cit-text-light);
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
    line-height: 1.4;
}

.cit-utility-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cit-utility-left,
.cit-utility-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.cit-utility-item {
    color: var(--cit-text-light);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cit-utility-item.cit-utility-phone {
    font-weight: 600;
}

.cit-utility-item:hover,
.cit-utility-phone:hover {
    color: var(--cit-orange) !important;
}

.cit-utility-icon {
    font-size: 1em;
    transform: rotate(90deg);
    display: inline-block;
}

.cit-shipping-badge {
    color: var(--cit-orange);
    font-weight: 600;
}

@media (max-width: 720px) {
    .cit-utility-bar {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    .cit-utility-bar-inner {
        gap: 0.25rem 0.75rem;
    }

    .cit-hide-mobile {
        display: none !important;
    }

    .cit-utility-left,
    .cit-utility-right {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .cit-utility-right {
        display: none; /* Hide shipping badge entirely on small phones */
    }
}

.cit-trust-bar .cit-stars {
    color: #FFD700;
    letter-spacing: 0.1em;
    margin-right: 0.5rem;
}

.cit-trust-bar strong {
    font-weight: 700;
}

.cit-trust-bar a {
    color: var(--cit-text-light);
    text-decoration: underline;
    margin-left: 0.5rem;
}

.cit-trust-bar a:hover {
    color: var(--cit-navy);
}

@media (max-width: 600px) {
    .cit-trust-bar {
        font-size: 0.8125rem;
    }
    .cit-trust-bar a {
        display: block;
        margin-top: 0.25rem;
    }
}

/* ============================================================
   Custom logo styling — sized for the navy header
   ============================================================ */
.cit-logo-img,
.site-branding .custom-logo {
    max-height: 50px !important;
    width: auto !important;
    height: auto;
    display: block;
}

@media (max-width: 720px) {
    .cit-logo-img,
    .site-branding .custom-logo {
        max-height: 38px !important;
    }
}

/* ============================================================
   SITE HEADER — custom replacement for Kadence's header
   NAVY top band, WHITE nav band (Laptops Direct pattern)
   ============================================================ */
.cit-site-header {
    background-color: var(--cit-background);
    position: relative;
    z-index: 100;
}

.cit-main-header {
    padding: 1.25rem 0;
}

.cit-main-header-navy {
    background-color: var(--cit-navy);
}

.cit-main-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2.5rem;
    align-items: center;
}

.cit-header-logo a {
    display: block;
}

.cit-header-logo-img {
    height: 48px;
    width: auto;
    display: block;
}

/* Header search */
.cit-header-search {
    display: flex;
    justify-content: center;
}

.cit-search-form {
    width: 100%;
    max-width: 560px;
    position: relative;
}

.cit-search-input {
    width: 100%;
    padding: 0.95rem 7.5rem 0.95rem 1.5rem;
    border: 2px solid var(--cit-background);
    border-radius: 999px;
    font-size: 1rem;
    background-color: var(--cit-background);
    color: var(--cit-text);
    transition: border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cit-search-input:focus {
    outline: none;
    border-color: var(--cit-orange);
}

.cit-search-input::placeholder {
    color: var(--cit-text-muted);
}

.cit-search-submit {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--cit-orange);
    border: none;
    color: var(--cit-text-light);
    height: 44px;
    padding: 0 1.4rem 0 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

.cit-search-submit:hover {
    background-color: var(--cit-orange-dark);
}

.cit-search-text {
    color: #ffffff;
}

/* Header actions: account, cart, mobile toggle */
.cit-header-actions {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.cit-header-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    color: var(--cit-text-light);
    font-size: 0.75rem;
    font-weight: 600;
    position: relative;
    transition: color 0.2s ease;
}

.cit-header-action:hover {
    color: var(--cit-orange);
}

.cit-header-action:hover svg {
    stroke: var(--cit-orange);
}

.cit-header-action svg {
    color: currentColor;
}

.cit-cart-action {
    position: relative;
}

.cit-cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background-color: var(--cit-orange);
    color: var(--cit-text-light);
    font-size: 0.6875rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Mobile menu toggle */
.cit-mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 6px 4px;
    flex-direction: column;
    justify-content: space-between;
}

.cit-mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--cit-text-light);
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

.cit-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.cit-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.cit-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================
   PRIMARY NAVIGATION — WHITE bar with mega-menu dropdowns
   Position relative so absolute-positioned dropdowns anchor correctly
   ============================================================ */
.cit-primary-nav {
    background-color: var(--cit-background);
    border-bottom: 1px solid var(--cit-border);
    position: relative;
}

.cit-primary-nav-white {
    background-color: var(--cit-background);
}

.cit-primary-nav > .cit-container {
    position: relative;
}

.cit-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}

.cit-nav-item {
    position: static; /* mega-menu spans full nav width */
    display: flex;
    align-items: stretch;
}

.cit-nav-item-right {
    /* removed margin-left: auto; — Services is now centered with the rest */
}

.cit-nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
    color: var(--cit-navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0;
    position: relative;
    transition: color 0.15s ease;
    text-transform: none;
}

/* Underline that appears below the link on hover/active */
.cit-nav-link::after {
    content: '';
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 0;
    height: 3px;
    background-color: var(--cit-orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.cit-nav-link:hover,
.cit-nav-item-has-dropdown:hover > .cit-nav-link {
    color: var(--cit-orange);
}

.cit-nav-link:hover::after,
.cit-nav-item:hover > .cit-nav-link::after {
    transform: scaleX(1);
}

/* Sale gets persistent highlight */
.cit-nav-item-sale > .cit-nav-link {
    color: var(--cit-orange);
    font-weight: 700;
}

.cit-nav-item-sale > .cit-nav-link::before {
    content: '⚡';
    margin-right: 0.35rem;
    font-size: 0.9em;
}

/* ============================================================
   MEGA-MENU DROPDOWN — anchored to nav container
   Width spans the whole site width; content uses .cit-container
   ============================================================ */
.cit-nav-dropdown {
    position: absolute;
    top: 100%;
    left: -50vw;
    right: -50vw;
    margin: 0 auto;
    width: 100vw;
    background-color: #FFFFFF !important; /* solid white, no transparency */
    background: #FFFFFF;
    border-top: 1px solid var(--cit-border);
    box-shadow: 0 16px 32px rgba(15, 34, 56, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0);
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 200;
    pointer-events: none;
}

/* Invisible bridge above the dropdown to keep it open
   while moving the cursor from the nav link down into the menu */
.cit-nav-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

.cit-nav-item-has-dropdown:hover > .cit-nav-dropdown,
.cit-nav-item-open > .cit-nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cit-mega-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    gap: 2.5rem;
    padding: 2.5rem 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cit-mega-col {
    display: flex;
    flex-direction: column;
}

.cit-mega-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cit-border);
}

.cit-mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cit-mega-list li {
    margin: 0;
}

.cit-mega-list a {
    display: block;
    padding: 0.4rem 0;
    color: var(--cit-text);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: color 0.12s ease, padding-left 0.12s ease;
}

.cit-mega-list a:hover {
    color: var(--cit-orange);
    padding-left: 0.25rem;
}

.cit-mega-promo-card {
    background: linear-gradient(135deg, var(--cit-background-cream) 0%, #FFE9D4 100%);
    border-radius: 0.75rem;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    position: relative;
    overflow: hidden;
}

.cit-mega-promo-card::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.15) 0%, transparent 70%);
    top: -60px;
    right: -60px;
    pointer-events: none;
}

.cit-mega-promo-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cit-orange);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 1;
}

.cit-mega-promo-card h5 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.75rem;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.cit-mega-promo-link {
    color: var(--cit-orange);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    align-self: flex-start;
    position: relative;
    z-index: 1;
}

.cit-mega-promo-link:hover {
    color: var(--cit-orange-dark);
}

/* ============================================================
   PHONES MEGA-MENU — balanced iPhone | Samsung + CRO rail
   5 columns on desktop; scoped to min-width so the mobile
   single-column rule (below) still wins on small screens.
   ============================================================ */
@media (min-width: 961px) {
    .cit-nav-mega-phones .cit-mega-inner {
        grid-template-columns: 1fr 1fr 1fr 1fr 1.05fr;
        gap: 2rem;
        max-width: 1320px;
    }
}

/* Big, obvious brand heading link (iPhone / Samsung Galaxy) */
.cit-mega-brandlink {
    display: block;
    text-decoration: none;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--cit-orange);
}

.cit-mega-brandlink__name {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cit-navy);
    line-height: 1.1;
}

.cit-mega-brandlink__cta {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cit-orange);
    margin-top: 0.2rem;
}

.cit-mega-brandlink:hover .cit-mega-brandlink__name {
    color: var(--cit-orange);
}

.cit-mega-brandlink:hover .cit-mega-brandlink__cta {
    color: var(--cit-orange-dark);
}

/* CRO rail list items read as actions, not plain nav */
.cit-mega-list--cro a {
    font-weight: 600;
}

/* Series headings are clickable (link to the series subcategory page) */
.cit-mega-title a {
    color: inherit;
    text-decoration: none;
}

.cit-mega-title a:hover {
    color: var(--cit-orange);
}

/* ============================================================
   CATEGORY "SHOP BY SERIES" pills (replaces subcategory tiles on phones)
   ============================================================ */
.cit-cat-series {
    padding: 1.5rem 0 0;
}

.cit-cat-series-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    align-items: flex-start;
}

.cit-cat-series-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.cit-cat-series-label {
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cit-navy);
    text-decoration: none;
}

a.cit-cat-series-label:hover {
    color: var(--cit-orange);
}

.cit-cat-series-pills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.cit-cat-series-pills a {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--cit-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cit-navy);
    text-decoration: none;
    background: #fff;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.cit-cat-series-pills a:hover {
    border-color: var(--cit-orange);
    color: var(--cit-orange);
}

/* ============================================================
   CATEGORY BRAND CARDS (Laptops-Direct-style range cards)
   ============================================================ */
.cit-cat-brandcards {
    padding: 1.5rem 0 0;
}

.cit-cat-brandcards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.cit-brandcard {
    position: relative;
    display: block;
    min-height: 210px;
    border: 1px solid var(--cit-border);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cit-brandcard:hover {
    box-shadow: 0 12px 28px rgba(15, 34, 56, 0.14);
    transform: translateY(-3px);
}

.cit-brandcard-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
}

.cit-brandcard-body {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    max-width: 64%;
}

.cit-brandcard-body h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cit-navy);
    margin: 0 0 0.4rem;
    line-height: 1.05;
}

.cit-brandcard-body p {
    font-size: 0.9rem;
    color: var(--cit-text);
    margin: 0 0 0.85rem;
    line-height: 1.4;
}

.cit-brandcard-cta {
    font-weight: 700;
    color: var(--cit-orange);
    font-size: 0.9rem;
}

.cit-brandcard--featured {
    background: linear-gradient(135deg, var(--cit-navy) 0%, #173456 100%);
    border-color: transparent;
}

.cit-brandcard--featured .cit-brandcard-body {
    max-width: 100%;
}

.cit-brandcard-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cit-orange);
    margin-bottom: 0.5rem;
}

.cit-brandcard-count {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.cit-brandcard--featured p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0.35rem 0 1rem;
}

.cit-brandcard-cta--light {
    color: #fff;
}

@media (max-width: 600px) {
    .cit-brandcard-body {
        max-width: 80%;
    }
    .cit-brandcard-media {
        opacity: 0.5;
    }
}

/* ============================================================
   HEADER + NAV — Mobile
   ============================================================ */
@media (max-width: 960px) {
    .cit-main-header-inner {
        grid-template-columns: auto 1fr auto;
        gap: 1rem;
    }

    .cit-header-search {
        display: none;
    }

    .cit-action-label {
        display: none;
    }

    .cit-header-actions {
        gap: 1rem;
    }

    .cit-mobile-toggle {
        display: flex;
    }

    .cit-primary-nav {
        display: none;
        border-top: none;
        border-bottom: none;
    }

    .cit-primary-nav.cit-primary-nav-open {
        display: block;
        background-color: var(--cit-background);
        max-height: 80vh;
        overflow-y: auto;
    }

    .cit-nav-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .cit-nav-item {
        border-bottom: 1px solid var(--cit-border);
        display: block;
    }

    .cit-nav-item-right {
        margin-left: 0;
    }

    .cit-nav-link {
        padding: 1rem 1.25rem;
        justify-content: space-between;
    }

    .cit-nav-link::after {
        display: none;
    }

    .cit-nav-dropdown {
        position: static;
        width: auto;
        left: auto;
        right: auto;
        background-color: var(--cit-background-alt);
        box-shadow: none;
        border-bottom: none;
        border-top: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        pointer-events: auto;
    }

    .cit-nav-item-open > .cit-nav-dropdown {
        display: block;
    }

    .cit-mega-inner {
        grid-template-columns: 1fr;
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .cit-mega-promo-card {
        order: -1;
    }

    body.cit-menu-open {
        overflow: hidden;
    }
}

/* ============================================================
   Old Kadence header overrides (DEPRECATED — left for safety)
   ============================================================ */
.site-header-wrap,
.site-header-row-container,
.site-header-row-container-inner,
.site-top-header-wrap,
.site-main-header-wrap {
    background-color: var(--cit-navy) !important;
    color: var(--cit-text-light) !important;
}

.site-header-wrap .site-branding a,
.site-header-wrap .site-description,
.site-header-wrap .header-navigation a,
.site-header-wrap .menu-item a,
.site-header-wrap .header-html,
.site-header-wrap .header-search a,
.site-header-wrap .header-account-wrap a,
.site-header-wrap .header-cart-wrap a {
    color: var(--cit-text-light) !important;
}

.site-header-wrap .header-navigation a:hover,
.site-header-wrap .menu-item a:hover,
.site-header-wrap .header-account-wrap a:hover,
.site-header-wrap .header-cart-wrap a:hover {
    color: var(--cit-orange) !important;
}

/* Site title (used when no logo image is set) — make it readable on navy */
.site-header-wrap .site-title,
.site-header-wrap .site-title a {
    color: var(--cit-text-light) !important;
}

/* Underline animation under nav items on hover */
.site-header-wrap .header-navigation .menu-item > a {
    position: relative;
    transition: color 0.2s ease;
}

/* ============================================================
   Buttons and CTAs site-wide
   ============================================================ */
.wp-block-button__link,
.wp-block-search__button,
button.button,
input.button,
.button,
a.button,
.btn,
.kt-btn-wrap a {
    background-color: var(--cit-orange) !important;
    color: var(--cit-text-light) !important;
    border: none !important;
    border-radius: 0.25rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
.wp-block-search__button:hover,
button.button:hover,
input.button:hover,
.button:hover,
a.button:hover {
    background-color: var(--cit-orange-dark) !important;
    color: var(--cit-text-light) !important;
}

/* Secondary button variant (navy with orange text — for less-loud CTAs) */
.is-style-secondary .wp-block-button__link,
.btn-secondary {
    background-color: var(--cit-navy) !important;
    color: var(--cit-orange) !important;
    border: 2px solid var(--cit-orange) !important;
}

.is-style-secondary .wp-block-button__link:hover,
.btn-secondary:hover {
    background-color: var(--cit-orange) !important;
    color: var(--cit-text-light) !important;
}

/* ============================================================
   WooCommerce: orange sale badges, navy product info
   ============================================================ */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
    background-color: var(--cit-orange) !important;
    color: var(--cit-text-light) !important;
    font-weight: 700 !important;
    border-radius: 0.25rem !important;
}

.woocommerce .price,
.woocommerce-page .price {
    color: var(--cit-navy) !important;
    font-weight: 700;
}

.woocommerce ul.products li.product .price {
    color: var(--cit-navy) !important;
}

.woocommerce a.added_to_cart,
.woocommerce .button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button.alt {
    background-color: var(--cit-orange) !important;
    color: var(--cit-text-light) !important;
}

.woocommerce a.added_to_cart:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover {
    background-color: var(--cit-orange-dark) !important;
}

/* ============================================================
   Links across the site default to orange accent
   ============================================================ */
.entry-content a:not(.button):not(.wp-block-button__link),
.site-main a:not(.button):not(.wp-block-button__link):not(.menu-item a) {
    color: var(--cit-orange);
}

.entry-content a:not(.button):not(.wp-block-button__link):hover {
    color: var(--cit-orange-dark);
}

/* ============================================================
   FRONT PAGE — shared utilities
   ============================================================ */
.cit-home {
    background-color: var(--cit-background);
}

/* Global container — used by every custom template (front-page, services,
   and future pages). Widened to 1320px to match the "big store" feel of
   LaptopsDirect / Currys / AO.com — denser content area, more presence. */
.cit-container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}

.cit-home .cit-btn {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.1s ease, color 0.2s ease;
    font-size: 1rem;
    line-height: 1.2;
}

.cit-home .cit-btn-primary {
    background-color: var(--cit-orange);
    color: var(--cit-text-light);
}

.cit-home .cit-btn-primary:hover {
    background-color: var(--cit-orange-dark);
    color: var(--cit-text-light);
    transform: translateY(-1px);
}

.cit-home .cit-btn-large {
    padding: 1.125rem 2.5rem;
    font-size: 1.125rem;
}

.cit-home .cit-btn-ghost {
    background-color: transparent;
    color: var(--cit-text-light);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.cit-home .cit-btn-ghost:hover {
    border-color: var(--cit-orange);
    color: var(--cit-orange);
}

.cit-home .cit-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.cit-home .cit-section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.cit-home .cit-section-subtitle {
    font-size: 1.125rem;
    color: var(--cit-text-muted);
    margin: 0;
}

/* ============================================================
   FRONT PAGE — Hero (bold, centered, decorative orbs)
   ============================================================ */
.cit-hero {
    background: linear-gradient(135deg, var(--cit-navy) 0%, var(--cit-navy-light) 100%);
    color: var(--cit-text-light);
    padding: 7rem 0 8rem;
    overflow: hidden;
    position: relative;
}

/* Large orange orb top-right */
.cit-hero-orb {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.28) 0%, rgba(242, 101, 34, 0.06) 50%, transparent 75%);
    top: -260px;
    right: -200px;
    pointer-events: none;
    z-index: 0;
}

/* Smaller cream orb bottom-left for depth */
.cit-hero-orb-small {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 237, 217, 0.08) 0%, transparent 70%);
    bottom: -160px;
    left: -120px;
    pointer-events: none;
    z-index: 0;
}

.cit-hero-inner {
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: 820px;
}

/* With-card variant: headline spans full width on top, then
   subtitle/CTAs on left + Trustpilot widget on right below.
   align-items: stretch so the content column matches the trust widget
   height; then we push CTAs to the bottom so the button bottom lines
   up with the trust widget bottom. */
.cit-hero-inner.cit-hero-with-card {
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-areas:
        "headline headline"
        "content  widget";
    gap: 1rem 3rem;
    align-items: stretch;
}

.cit-hero-inner.cit-hero-with-card .cit-hero-headline { grid-area: headline; }
.cit-hero-inner.cit-hero-with-card .cit-hero-content {
    grid-area: content;
    max-width: none;
    display: flex;
    flex-direction: column;
}

/* Push the CTA row to the bottom of the content column so its
   bottom edge lines up with the bottom of the trust widget.
   The base .cit-hero-cta has margin-bottom: 2.5rem (left over from
   an earlier layout where a rating line sat below it); we zero it
   out here so the button bottom is flush with the column bottom. */
.cit-hero-inner.cit-hero-with-card .cit-hero-content .cit-hero-cta {
    margin-top: auto;
    margin-bottom: 0;
}

.cit-hero-inner.cit-hero-with-card .cit-hero-trust-widget { grid-area: widget; }

/* ============================================================
   HERO — Trustpilot TrustBox wrapper
   Tall, narrow card on the right of the hero showing a single
   rotating 5-star review. The widget is rendered by Trustpilot's
   bootstrap script inside an iframe — we just provide the container.
   ============================================================ */
/* The Trustpilot Carousel template only renders its review section when
   given >=~320px of iframe height. Below that, it hides the review and just
   shows the summary header — which leaves a giant empty card.
   Strategy: give the iframe a tall data-style-height (380px) so the review
   renders, then clip the bottom empty padding via a fixed-height wrapper. */
.cit-hero-trust-widget {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    height: 290px;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #FFFFFF;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.cit-hero-trust-widget .trustpilot-widget {
    width: 100%;
    height: 100%;
}

/* Mobile: collapse the hero grid to a single stacked column. */
@media (max-width: 960px) {
    .cit-hero-inner.cit-hero-with-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "headline"
            "content"
            "widget";
        gap: 2rem;
        max-width: 600px;
    }

    .cit-hero-trust-widget {
        max-width: none;
        margin-left: 0;
    }
}

.cit-hero-content {
    color: var(--cit-text-light);
}

.cit-hero-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.cit-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--cit-text-light);
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}

.cit-hero-highlight {
    color: var(--cit-orange);
    display: inline-block;
    position: relative;
}

.cit-hero-subtitle {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 2.5rem;
    max-width: 620px;
}

.cit-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    align-items: center;
}

.cit-hero-link {
    color: var(--cit-text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.15rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cit-hero-link:hover {
    color: var(--cit-orange);
    border-bottom-color: var(--cit-orange);
}

/* (Removed: .cit-hero-rating / .cit-rating-count / .cit-hero-visual
   These were used by earlier hero variants that had inline rating text
   and a visual column. The hero now uses .cit-hero-trust-widget for
   social proof and no longer has a separate visual column.) */

.cit-hero-image {
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

@media (max-width: 900px) {
    .cit-hero {
        padding: 4rem 0 5rem;
    }

    .cit-hero-orb {
        width: 500px;
        height: 500px;
    }

    .cit-hero-orb-small {
        display: none;
    }
}

@media (max-width: 600px) {
    .cit-hero {
        padding: 3rem 0 4rem;
    }
}

@media (max-width: 480px) {
    .cit-hero-cta .cit-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   FRONT PAGE — Trust signals row
   ============================================================ */
.cit-trust-row {
    background-color: var(--cit-background-alt);
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--cit-border);
}

.cit-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.cit-trust-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.cit-trust-icon {
    color: var(--cit-orange);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.cit-trust-item .cit-trust-title {
    font-weight: 700;
    color: var(--cit-navy);
    font-size: 1rem;
}

.cit-trust-item .cit-trust-subtitle {
    color: var(--cit-text-muted);
    font-size: 0.875rem;
}

@media (max-width: 720px) {
    .cit-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 1rem;
    }
}

/* ============================================================
   FRONT PAGE — Featured categories grid
   ============================================================ */
.cit-categories-section {
    padding: 5rem 0;
    background-color: var(--cit-background);
}

.cit-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cit-category-card {
    background-color: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.cit-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(15, 34, 56, 0.12);
    border-color: var(--cit-orange);
}

.cit-category-image {
    background-color: var(--cit-background-alt);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cit-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.cit-category-card:hover .cit-category-image img {
    transform: scale(1.05);
}

.cit-category-image-placeholder {
    color: var(--cit-text-muted);
    font-size: 3rem;
    background-color: var(--cit-background-alt);
}

.cit-category-body {
    padding: 1.25rem;
}

.cit-category-card .cit-category-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cit-navy);
    margin: 0 0 0.25rem;
}

.cit-category-card:hover .cit-category-title {
    color: var(--cit-orange);
}

.cit-category-count {
    color: var(--cit-text-muted);
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .cit-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .cit-categories-grid {
        grid-template-columns: 1fr;
    }

    .cit-categories-section {
        padding: 3rem 0;
    }
}

/* ============================================================
   FRONT PAGE — Categories grid (5 cards, BOLD premium)
   Cream tiles matching brand poster, bigger presence, generous spacing
   ============================================================ */
.cit-categories-section {
    padding: 6rem 0;
    background-color: var(--cit-background);
}

.cit-categories-grid-five {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.cit-categories-grid-five .cit-category-card {
    background-color: var(--cit-background-cream);
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.cit-categories-grid-five .cit-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(15, 34, 56, 0.18);
    border: none;
}

.cit-categories-grid-five .cit-category-image {
    background-color: transparent;
    flex: 1;
    aspect-ratio: auto;
    padding: 1.75rem 1.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cit-categories-grid-five .cit-category-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.cit-categories-grid-five .cit-category-card:hover .cit-category-image img {
    transform: scale(1.06);
}

.cit-categories-grid-five .cit-category-body {
    padding: 0.5rem 1rem 1.75rem;
    text-align: center;
    background-color: transparent;
}

.cit-categories-grid-five .cit-category-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0;
    line-height: 1.2;
}

.cit-categories-grid-five .cit-category-card:hover .cit-category-title {
    color: var(--cit-orange);
}

@media (max-width: 1100px) {
    .cit-categories-grid-five {
        grid-template-columns: repeat(3, 1fr);
    }

    .cit-categories-grid-five .cit-category-card {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 720px) {
    .cit-categories-grid-five {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .cit-categories-section {
        padding: 3.5rem 0;
    }
}

@media (max-width: 420px) {
    .cit-categories-grid-five {
        grid-template-columns: 1fr;
    }

    .cit-categories-grid-five .cit-category-card {
        aspect-ratio: 16 / 9;
        flex-direction: row;
    }

    .cit-categories-grid-five .cit-category-image {
        padding: 1rem;
        flex: 0 0 40%;
    }

    .cit-categories-grid-five .cit-category-body {
        padding: 1rem;
        text-align: left;
        flex: 1;
        display: flex;
        align-items: center;
    }
}

/* ============================================================
   FRONT PAGE — Section utilities
   ============================================================ */
.cit-home .cit-section-title-left {
    text-align: left;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 1.25rem;
    line-height: 1.2;
}

.cit-home .cit-section-footer {
    text-align: center;
    margin-top: 2.5rem;
}

.cit-home .cit-link-arrow {
    color: var(--cit-orange);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cit-home .cit-link-arrow:hover {
    color: var(--cit-orange-dark);
}

.cit-home .cit-btn-ghost-navy {
    background-color: transparent;
    color: var(--cit-navy);
    border: 2px solid var(--cit-navy);
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cit-home .cit-btn-ghost-navy:hover {
    background-color: var(--cit-navy);
    color: var(--cit-text-light);
}

/* ============================================================
   FRONT PAGE — Shop our most wanted (Refurbed/Back Market pattern)
   Clean light cards, large product imagery, simple title below
   ============================================================ */
.cit-mostwanted-section {
    padding: 4rem 0;
    background-color: var(--cit-background);
}

.cit-mostwanted-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.cit-mostwanted-card {
    background-color: var(--cit-background-cream);
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--cit-navy);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
}

.cit-mostwanted-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 34, 56, 0.12);
}

.cit-mostwanted-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 1rem;
}

.cit-mostwanted-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.cit-mostwanted-card:hover .cit-mostwanted-image img {
    transform: scale(1.05);
}

.cit-mostwanted-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0;
    line-height: 1.2;
}

@media (max-width: 900px) {
    .cit-mostwanted-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cit-mostwanted-section {
        padding: 2.5rem 0;
    }
}

/* ============================================================
   FRONT PAGE — Best sellers (WooCommerce)
   ============================================================ */
.cit-bestsellers-section {
    padding: 5rem 0;
    background-color: var(--cit-background-alt);
}

.cit-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.cit-product-card {
    background-color: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.cit-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 34, 56, 0.1);
    border-color: var(--cit-orange);
}

.cit-product-image {
    background-color: var(--cit-background-alt);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.cit-product-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.cit-product-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: var(--cit-orange);
    color: var(--cit-text-light);
    padding: 0.25rem 0.65rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.cit-product-body {
    padding: 1rem;
}

.cit-product-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cit-product-price {
    color: var(--cit-navy);
    font-size: 1.1rem;
    font-weight: 700;
}

.cit-product-price .woocommerce-Price-amount {
    color: var(--cit-navy);
}

.cit-product-price del {
    color: var(--cit-text-muted);
    font-size: 0.875rem;
    margin-right: 0.5rem;
    font-weight: 400;
}

.cit-product-price ins {
    text-decoration: none;
    color: var(--cit-orange);
}

@media (max-width: 900px) {
    .cit-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cit-products-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FRONT PAGE — Why refurbished
   ============================================================ */
.cit-why-section {
    padding: 5rem 0;
    background-color: var(--cit-background);
}

.cit-why-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.cit-why-content .cit-hero-eyebrow {
    color: var(--cit-orange);
}

.cit-why-text {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cit-text);
    margin: 0 0 1.5rem;
}

.cit-why-points {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.cit-why-points li {
    padding: 0.5rem 0 0.5rem 1.75rem;
    position: relative;
    color: var(--cit-text);
    line-height: 1.4;
}

.cit-why-points li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.5rem;
    color: var(--cit-orange);
    font-weight: 700;
    font-size: 1.1rem;
}

.cit-why-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.cit-stat {
    background-color: var(--cit-navy);
    color: var(--cit-text-light);
    border-radius: 0.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cit-stat-number {
    color: var(--cit-orange);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.cit-stat-label {
    color: var(--cit-text-light);
    font-size: 0.875rem;
    opacity: 0.85;
}

@media (max-width: 900px) {
    .cit-why-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ============================================================
   FRONT PAGE — Customer reviews
   ============================================================ */
.cit-reviews-section {
    padding: 5rem 0;
    background-color: var(--cit-background-alt);
}

.cit-stars-large {
    color: #FFD700;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    margin-right: 0.25rem;
    display: inline-block;
    vertical-align: middle;
}

.cit-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cit-review-card {
    background-color: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.5rem;
    padding: 1.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cit-review-stars {
    color: #00b67a; /* Trustpilot green */
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.cit-review-text {
    color: var(--cit-text);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.cit-review-author {
    color: var(--cit-text-muted);
    font-size: 0.875rem;
    font-style: normal;
    border-top: 1px solid var(--cit-border);
    padding-top: 0.75rem;
}

@media (max-width: 900px) {
    .cit-reviews-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FRONT PAGE — Blog posts
   ============================================================ */
.cit-blog-section {
    padding: 5rem 0;
    background-color: var(--cit-background);
}

.cit-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cit-blog-card {
    background-color: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.cit-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 34, 56, 0.1);
    border-color: var(--cit-orange);
}

.cit-blog-image {
    background-color: var(--cit-background-alt);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.cit-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cit-blog-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cit-text-muted);
    font-size: 2rem;
}

.cit-blog-body {
    padding: 1.25rem;
}

.cit-blog-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.cit-blog-card:hover .cit-blog-title {
    color: var(--cit-orange);
}

.cit-blog-meta {
    color: var(--cit-text-muted);
    font-size: 0.8125rem;
}

@media (max-width: 900px) {
    .cit-blog-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FRONT PAGE — Mullingar shop callout
   ============================================================ */
.cit-shop-callout {
    padding: 5rem 0;
    background-color: var(--cit-background-cream);
}

.cit-shop-callout-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 4rem;
    align-items: center;
}

.cit-shop-content .cit-hero-eyebrow {
    color: var(--cit-orange);
}

.cit-shop-text {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cit-text);
    margin: 0 0 1.75rem;
}

.cit-shop-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 0 0 2rem;
}

.cit-shop-detail dt {
    color: var(--cit-text-muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.cit-shop-detail dd {
    color: var(--cit-navy);
    font-weight: 600;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.cit-shop-detail dd a {
    color: var(--cit-orange);
}

.cit-shop-image {
    text-align: center;
}

.cit-shop-image img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .cit-shop-callout-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .cit-shop-details {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cit-shop-image {
        order: -1;
    }
}

/* ============================================================
   FRONT PAGE — Newsletter signup
   ============================================================ */
.cit-newsletter-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--cit-navy) 0%, var(--cit-navy-light) 100%);
    color: var(--cit-text-light);
}

.cit-newsletter-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.cit-newsletter-title {
    color: var(--cit-text-light);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.cit-newsletter-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

.cit-newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.cit-newsletter-form input[type="email"] {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--cit-text-light);
    font-size: 1rem;
}

.cit-newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.cit-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--cit-orange);
    background-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 720px) {
    .cit-newsletter-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cit-newsletter-form {
        flex-direction: column;
    }
}

/* ============================================================
   SITE FOOTER — custom replacement for Kadence's footer
   ============================================================ */
.cit-site-footer {
    background-color: var(--cit-navy);
    color: var(--cit-text-light);
    margin-top: 0;
}

.cit-footer-main {
    padding: 4rem 0 3rem;
    border-bottom: 1px solid var(--cit-navy-light);
}

.cit-footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 3rem;
}

.cit-footer-brand {
    max-width: 320px;
}

.cit-footer-logo {
    display: inline-block;
    margin-bottom: 1.25rem;
}

.cit-footer-logo img {
    height: 38px;
    width: auto;
    display: block;
}

.cit-footer-tagline {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1.5rem;
}

.cit-footer-contact p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem;
}

.cit-footer-contact strong {
    color: var(--cit-text-light);
    font-weight: 700;
    display: block;
    margin-bottom: 0.15rem;
}

.cit-footer-contact a {
    color: var(--cit-orange);
    text-decoration: none;
}

.cit-footer-contact a:hover {
    color: var(--cit-orange-light);
}

.cit-footer-title {
    color: var(--cit-text-light);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1.25rem;
}

.cit-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cit-footer-list li {
    margin: 0;
}

.cit-footer-list a {
    display: block;
    padding: 0.35rem 0;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.15s ease, transform 0.15s ease;
}

.cit-footer-list a:hover {
    color: var(--cit-orange);
    transform: translateX(3px);
}

/* Mid: callout strip */
.cit-footer-callout {
    background-color: var(--cit-navy-dark);
    padding: 2.5rem 0;
}

.cit-footer-callout-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
    align-items: center;
}

.cit-footer-trustpilot {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cit-tp-stars {
    color: #00b67a; /* Trustpilot green */
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.cit-tp-content {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.cit-tp-content strong {
    color: var(--cit-text-light);
}

.cit-tp-reviews {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.cit-footer-trustpilot .cit-link-arrow {
    margin-left: auto;
}

.cit-footer-newsletter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: center;
}

.cit-newsletter-text h4 {
    color: var(--cit-text-light);
    font-size: 1.125rem;
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.cit-newsletter-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.4;
}

.cit-footer-newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.cit-footer-newsletter-form input[type="email"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--cit-text-light);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
}

.cit-footer-newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.cit-footer-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--cit-orange);
}

.cit-footer-newsletter-form .cit-btn-primary {
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
}

/* Bottom strip */
.cit-footer-bottom {
    padding: 1.75rem 0;
    background-color: var(--cit-navy);
}

.cit-footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 2rem;
    align-items: center;
}

.cit-footer-copyright p {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

.cit-footer-copyright .cit-cro {
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

.cit-footer-payment {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cit-pay-badge {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--cit-text-light);
    padding: 0.3rem 0.65rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cit-footer-social {
    display: flex;
    gap: 0.5rem;
}

.cit-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--cit-text-light);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cit-footer-social a:hover {
    background-color: var(--cit-orange);
    color: var(--cit-text-light);
}

.cit-footer-legal {
    display: flex;
    gap: 1.25rem;
}

.cit-footer-legal a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cit-footer-legal a:hover {
    color: var(--cit-orange);
}

/* Footer responsive */
@media (max-width: 960px) {
    .cit-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .cit-footer-brand {
        grid-column: 1 / -1;
        max-width: none;
    }

    .cit-footer-callout-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cit-footer-newsletter {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .cit-footer-bottom-inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        text-align: center;
        justify-items: center;
    }

    .cit-footer-payment,
    .cit-footer-social,
    .cit-footer-legal {
        justify-content: center;
    }
}

@media (max-width: 540px) {
    .cit-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cit-footer-trustpilot {
        flex-direction: column;
        text-align: center;
    }

    .cit-footer-trustpilot .cit-link-arrow {
        margin-left: 0;
    }

    .cit-footer-newsletter-form {
        flex-direction: column;
    }
}

/* ============================================================
   SERVICES PAGE — page-services.php
   Mini-homepage for the repairs side of the business.
   Bold positioning, conversion-focused, premium navy + orange.
   ============================================================ */
.cit-services-page {
    background-color: var(--cit-background);
}

/* -------- 1. HERO -------- */
.cit-services-hero {
    background-color: var(--cit-navy);
    color: var(--cit-text-light);
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
    overflow: hidden;
}

.cit-services-hero-orb {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.20) 0%, transparent 70%);
    top: -240px;
    right: -260px;
    pointer-events: none;
}

.cit-services-hero-orb-small {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.10) 0%, transparent 70%);
    bottom: -160px;
    left: -120px;
    pointer-events: none;
}

.cit-services-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.cit-services-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.cit-services-hero-title {
    font-size: clamp(2.75rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
    color: var(--cit-text-light);
}

.cit-services-hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
    margin: 0 0 2.5rem;
}

.cit-services-hero-cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.cit-services-phone-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: var(--cit-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cit-services-phone-cta:hover { color: var(--cit-orange); }

.cit-services-phone-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(242, 101, 34, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cit-orange);
    flex-shrink: 0;
}

.cit-services-phone-text { display: inline-flex; flex-direction: column; }
.cit-services-phone-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.65);
}
.cit-services-phone-number {
    font-size: 1.375rem;
    font-weight: 700;
}

/* WhatsApp icon inside hero CTA button - vertical-align tweak so SVG sits on text baseline */
.cit-services-hero-cta .cit-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}
.cit-services-cta-icon {
    flex-shrink: 0;
}

.cit-services-hero-meta {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
}
.cit-services-hero-meta strong { color: var(--cit-text-light); }

/* -------- 2. TRUST STATS ROW -------- */
.cit-services-stats {
    background-color: var(--cit-cream);
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--cit-border);
}
.cit-services-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}
.cit-services-stat { display: flex; flex-direction: column; gap: 0.5rem; }
.cit-services-stat-number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--cit-navy);
    line-height: 1;
    letter-spacing: -0.02em;
}
.cit-services-stat-label {
    font-size: 0.9375rem;
    color: var(--cit-text);
    line-height: 1.4;
}

/* -------- SHARED: section headers -------- */
.cit-services-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}
.cit-services-section-header-light { color: var(--cit-text-light); }
.cit-services-section-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.cit-services-section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: inherit;
    letter-spacing: -0.01em;
}
.cit-services-section-subtitle {
    font-size: 1.125rem;
    color: var(--cit-text-muted);
    margin: 0;
    line-height: 1.5;
}
.cit-services-section-header-light .cit-services-section-subtitle {
    color: rgba(255, 255, 255, 0.75);
}

/* -------- 3. SERVICES GRID -------- */
.cit-services-grid-section {
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.cit-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.cit-service-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 2rem;
    background-color: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 1rem;
    text-decoration: none;
    color: var(--cit-text);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.cit-service-card:hover {
    transform: translateY(-4px);
    border-color: var(--cit-orange);
    box-shadow: 0 16px 40px rgba(15, 34, 56, 0.12);
}
.cit-service-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    background-color: var(--cit-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cit-orange);
    margin-bottom: 0.25rem;
}
.cit-service-card-icon svg { width: 28px; height: 28px; }
.cit-service-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--cit-navy);
    line-height: 1.2;
}
.cit-service-card-text {
    font-size: 0.9375rem;
    color: var(--cit-text-muted);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.cit-service-card-cta {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-orange);
    margin-top: 0.25rem;
}

/* "Something else?" accent card */
.cit-service-card-accent {
    background: linear-gradient(135deg, var(--cit-navy) 0%, #1a3650 100%);
    border-color: var(--cit-navy);
    color: var(--cit-text-light);
}
.cit-service-card-accent .cit-service-card-icon {
    background-color: rgba(255, 255, 255, 0.10);
}
.cit-service-card-accent .cit-service-card-title { color: var(--cit-text-light); }
.cit-service-card-accent .cit-service-card-text { color: rgba(255, 255, 255, 0.80); }
.cit-service-card-accent:hover { border-color: var(--cit-orange); }

/* -------- 4. WHY CHOOSE US (navy band) -------- */
.cit-services-why {
    background-color: var(--cit-navy);
    color: var(--cit-text-light);
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.cit-services-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}
.cit-services-why-item { text-align: center; }
.cit-services-why-icon {
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    background-color: rgba(242, 101, 34, 0.15);
    color: var(--cit-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.cit-services-why-icon svg { width: 36px; height: 36px; }
.cit-services-why-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--cit-text-light);
}
.cit-services-why-item p {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
}

/* -------- 5. HOW IT WORKS (cream band) -------- */
.cit-services-how {
    background-color: var(--cit-cream);
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.cit-services-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.cit-services-how-step {
    background-color: var(--cit-background);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(15, 34, 56, 0.06);
}
.cit-services-how-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--cit-orange);
    color: var(--cit-text-light);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}
.cit-services-how-step h3 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--cit-navy);
}
.cit-services-how-step p {
    font-size: 1rem;
    color: var(--cit-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* -------- 6. LOCATIONS -------- */
.cit-services-locations {
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.cit-services-locations-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
}
.cit-services-shop-card {
    background: linear-gradient(135deg, var(--cit-navy) 0%, #1a3650 100%);
    color: var(--cit-text-light);
    border-radius: 1rem;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.cit-services-shop-eyebrow,
.cit-services-coverage-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.cit-services-shop-card h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 1.5rem;
    color: var(--cit-text-light);
    line-height: 1.1;
}
.cit-services-shop-address {
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
}
.cit-services-shop-hours {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
}
.cit-services-shop-hours strong {
    color: var(--cit-text-light);
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.cit-services-shop-cta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cit-services-directions {
    color: var(--cit-text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.cit-services-directions:hover {
    color: var(--cit-orange);
    border-bottom-color: var(--cit-orange);
}

.cit-services-coverage-card {
    background-color: var(--cit-cream);
    border-radius: 1rem;
    padding: 3rem;
}
.cit-services-coverage-card h3 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--cit-navy);
    line-height: 1.1;
}
.cit-services-coverage-card > p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cit-text);
    margin: 0 0 2rem;
}
.cit-services-coverage-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.cit-services-coverage-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--cit-text);
    font-size: 0.9375rem;
}
.cit-services-coverage-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--cit-orange);
    font-weight: 800;
}

/* -------- 7. TRUSTPILOT REVIEWS -------- */
/* Light cream band - Trustpilot iframes are transparent, so the surrounding
   section background bleeds through the review carousel text. Light bg keeps
   review copy legible. */
.cit-services-reviews {
    background-color: var(--cit-cream, #FAF7F2);
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.cit-services-trustpilot {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30);
}

/* -------- 8. FINAL CTA — orange banner -------- */
.cit-services-final-cta {
    background-color: var(--cit-orange);
    padding: clamp(4rem, 8vw, 6rem) 0;
    position: relative;
    overflow: hidden;
}
.cit-services-final-cta-inner {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: var(--cit-text-light);
    position: relative;
    z-index: 1;
}
.cit-services-final-cta-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.cit-services-final-cta-inner h2 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--cit-text-light);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.cit-services-final-cta-inner p {
    font-size: 1.125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 2.5rem;
}

.cit-services-big-phone {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--cit-navy);
    color: var(--cit-text-light);
    padding: 1.25rem 2.5rem;
    border-radius: 999px;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(15, 34, 56, 0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: -0.01em;
}
.cit-services-big-phone:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(15, 34, 56, 0.40);
    color: var(--cit-text-light);
}
.cit-services-big-phone svg { flex-shrink: 0; }

.cit-services-final-cta-actions {
    margin-top: 2rem;
}
.cit-btn-ghost-light {
    background-color: transparent;
    border: 2px solid var(--cit-text-light);
    color: var(--cit-text-light);
}
.cit-btn-ghost-light:hover {
    background-color: var(--cit-text-light);
    color: var(--cit-orange);
}

.cit-services-final-cta-note {
    margin-top: 2rem !important;
    font-size: 0.9375rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* -------- RESPONSIVE -------- */
@media (max-width: 960px) {
    .cit-services-stats-grid,
    .cit-services-grid,
    .cit-services-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cit-services-how-grid {
        grid-template-columns: 1fr;
    }
    .cit-services-locations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .cit-services-grid,
    .cit-services-why-grid,
    .cit-services-stats-grid {
        grid-template-columns: 1fr;
    }
    .cit-services-hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    .cit-services-phone-cta { justify-content: center; }
    .cit-services-shop-card,
    .cit-services-coverage-card {
        padding: 2rem;
    }
    .cit-services-coverage-list { grid-template-columns: 1fr; }
    .cit-services-big-phone {
        padding: 1rem 1.5rem;
        font-size: 1.5rem;
    }
}

/* ============================================================
   IPHONES ARCHIVE — taxonomy-product_cat-refurbished-iphones-ireland.php
   Swappie-inspired: hero band, shortcut chips, sidebar + 2-col cards.
   Each card aggregates a model with storage chips + "From €X".
   ============================================================ */
.cit-iphones-archive { background-color: var(--cit-background); }

/* -------- HERO -------- */
.cit-iphones-hero {
    background: linear-gradient(135deg, var(--cit-navy) 0%, #1a3856 100%);
    color: var(--cit-text-light);
    padding: clamp(3.5rem, 6vw, 5rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cit-iphones-hero::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.18) 0%, transparent 70%);
    top: -260px;
    right: -200px;
    pointer-events: none;
}
.cit-iphones-hero > .cit-container { position: relative; z-index: 1; }

.cit-iphones-hero-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.cit-iphones-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: var(--cit-text-light);
    letter-spacing: -0.02em;
}
.cit-iphones-hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.5;
}

/* -------- SHORTCUT CHIPS -------- */
.cit-iphones-shortcuts {
    background-color: var(--cit-cream);
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--cit-border);
}
.cit-iphones-chips {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.cit-iphone-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--cit-navy);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cit-iphone-chip:hover {
    border-color: var(--cit-orange);
    box-shadow: 0 4px 12px rgba(15, 34, 56, 0.08);
    transform: translateY(-1px);
}
.cit-iphone-chip-icon {
    color: var(--cit-orange);
    display: inline-flex;
    align-items: center;
}

/* -------- LAYOUT (sidebar + cards) -------- */
.cit-iphones-grid-section { padding: 3rem 0 6rem; }
.cit-iphones-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}

/* -------- SIDEBAR -------- */
.cit-iphones-sidebar {
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

.cit-iphones-sort {
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.cit-iphones-sort label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cit-text-muted);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.cit-iphones-sort select {
    width: 100%;
    padding: 0.5rem 0;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy);
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F2238' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 1.5rem;
}

.cit-iphones-filter-section {
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.cit-iphones-filter-section h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cit-border);
}

.cit-iphones-filter-group { border-bottom: 1px solid var(--cit-border); }
.cit-iphones-filter-group:last-child { border-bottom: none; }
.cit-iphones-filter-group summary {
    cursor: pointer;
    padding: 0.875rem 0;
    font-weight: 700;
    color: var(--cit-navy);
    font-size: 0.9375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.cit-iphones-filter-group summary::-webkit-details-marker { display: none; }
.cit-iphones-filter-group summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--cit-navy);
    border-bottom: 2px solid var(--cit-navy);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
    margin-bottom: 4px;
}
.cit-iphones-filter-group[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.cit-iphones-filter-group summary span {
    color: var(--cit-text-muted);
    font-weight: 500;
    font-size: 0.875rem;
    margin-left: auto;
    margin-right: 0.5rem;
}
.cit-iphones-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0 1rem;
}
.cit-iphones-filter-options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--cit-text);
    cursor: pointer;
}
.cit-iphones-filter-options input[type="checkbox"] {
    accent-color: var(--cit-orange);
    width: 1rem;
    height: 1rem;
}
.cit-iphones-filter-price { flex-direction: row !important; gap: 0.5rem !important; }
.cit-iphones-filter-price input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--cit-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.cit-iphones-sidebar-trust {
    background: var(--cit-cream);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.cit-iphones-sidebar-trust h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.75rem;
}
.cit-iphones-sidebar-trust ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cit-iphones-sidebar-trust li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.875rem;
    color: var(--cit-text);
}
.cit-iphones-sidebar-trust li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--cit-orange);
    font-weight: 800;
}

/* -------- PRODUCT CARDS -------- */
.cit-iphones-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.cit-iphone-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 1rem;
    text-decoration: none;
    color: var(--cit-text);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    align-items: center;
}
.cit-iphone-card:hover {
    border-color: var(--cit-orange);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15, 34, 56, 0.10);
}

.cit-iphone-card-deal {
    background: linear-gradient(135deg, #FCE9D9 0%, #FFF6ED 100%);
    border-color: transparent;
}

.cit-iphone-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--cit-orange);
    color: var(--cit-text-light);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 1;
}
.cit-iphone-card-badge-hot {
    background: var(--cit-navy);
}

.cit-iphone-card-image {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.cit-iphone-card-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}
.cit-iphone-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 0.75rem;
    display: block;
}

.cit-iphone-card-body {
    flex: 1;
    min-width: 0;
}

.cit-iphone-card-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--cit-navy);
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

.cit-iphone-card-storages {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.cit-iphone-card-storage {
    display: inline-flex;
    align-items: center;
    background: var(--cit-cream);
    color: var(--cit-navy);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    line-height: 1.2;
}

.cit-iphone-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: auto;
}
.cit-iphone-card-price-label {
    color: var(--cit-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}
.cit-iphone-card-price-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cit-navy);
    letter-spacing: -0.02em;
}

.cit-iphones-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--cit-cream);
    border-radius: 1rem;
    color: var(--cit-text);
    font-size: 1rem;
}
.cit-iphones-empty a { color: var(--cit-orange); font-weight: 700; }

/* -------- RESPONSIVE -------- */
@media (max-width: 1024px) {
    .cit-iphones-layout {
        grid-template-columns: 220px 1fr;
        gap: 2rem;
    }
}

@media (max-width: 860px) {
    .cit-iphones-layout {
        grid-template-columns: 1fr;
    }
    .cit-iphones-sidebar {
        position: static;
    }
    .cit-iphones-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .cit-iphone-card {
        flex-direction: column;
        text-align: center;
        align-items: stretch;
    }
    .cit-iphone-card-image {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
    .cit-iphone-card-storages { justify-content: center; }
    .cit-iphone-card-price { justify-content: center; }
}

/* ============================================================
   TYPOGRAPHY OVERRIDE — Inter font system-wide
   Replaces Kadence/system fonts with Inter for a premium tech feel
   (matches Refurbed / Stripe / GitHub typography).
   Loaded via Google Fonts in functions.php (creative_it_enqueue_fonts).
   ============================================================ */
:root {
    --cit-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
.cit-services-page,
.cit-iphones-archive,
.cit-home,
#colophon,
#masthead,
.site-header,
.site-footer {
    font-family: var(--cit-font-sans) !important;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter's character variants for cleaner letterforms */
}

/* Body text — comfortable reading weight */
body {
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* All headings inherit Inter and use a refined 700 (Bold) rather than
   800 (Extra Bold) — 800 in Inter starts to look heavy/chunky.
   Tight letter-spacing reads as premium. */
h1, h2, h3, h4, h5, h6,
.cit-hero-title,
.cit-services-hero-title,
.cit-iphones-hero-title,
.cit-section-title,
.cit-services-section-title,
.cit-services-shop-card h2,
.cit-services-coverage-card h3,
.cit-services-final-cta-inner h2,
.cit-services-how-step h3,
.cit-services-why-item h3,
.cit-service-card-title,
.cit-iphone-card-title,
.cit-service-card-title,
.cit-services-stat-number,
.cit-iphone-card-price-value {
    font-family: var(--cit-font-sans) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The very-large hero display headlines get -0.025em for extra punch.
   We keep 800 only at large sizes where it doesn't look chunky. */
.cit-hero-title,
.cit-services-hero-title,
.cit-iphones-hero-title,
.cit-services-final-cta-inner h2 {
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* Smaller helper labels — keep 600 for legibility */
.cit-hero-eyebrow,
.cit-services-eyebrow,
.cit-iphones-hero-eyebrow,
.cit-services-secti
/* ============================================================
   UTILITY BAR — second strip between Trustpilot bar + main header.
   "Big store" pattern (LaptopsDirect/Currys/Argos style) signaling
   active sales team, finance options, physical shop, customer service.
   ============================================================ */
.cit-utility-bar {
    background-color: #F5EDD9 !important;
    background: #F5EDD9 !important;
    border-bottom: 1px solid var(--cit-border) !important;
    color: var(--cit-navy) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 0 !important;
    position: relative;
    z-index: 2;
}

.cit-utility-bar * {
    color: var(--cit-navy) !important;
}

.cit-utility-finance-label { color: rgba(15, 34, 56, 0.65) !important; }
.cit-utility-finance-klarna { color: #17120F !important; }
.cit-utility-finance-humm { color: #FFFFFF !important; }

.cit-utility-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cit-utility-bar-left,
.cit-utility-bar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cit-utility-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: var(--cit-navy);
    transition: color 0.2s ease;
    line-height: 1.2;
}

.cit-utility-item:hover { color: var(--cit-orange); }
.cit-utility-item-static { cursor: default; opacity: 0.85; }
.cit-utility-item-phone strong { font-weight: 700; }
.cit-utility-item svg { flex-shrink: 0; opacity: 0.7; }

.cit-utility-finance {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cit-utility-finance-label { color: var(--cit-text-muted); }

.cit-utility-finance-brand {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0;
}

.cit-utility-finance-klarna {
    background-color: #FFA8CD;
    color: #17120F;
}

.cit-utility-finance-humm {
    background-color: #FF6B35;
    color: #FFFFFF;
    text-transform: lowercase;
    font-style: italic;
}

@media (max-width: 900px) {
    .cit-utility-bar-inner { font-size: 0.75rem; gap: 0.5rem; }
    .cit-utility-bar-left,
    .cit-utility-bar-right { gap: 1rem; }
    .cit-utility-item-static,
    .cit-utility-finance-label { display: none; }
}

@media (max-width: 600px) {
    .cit-utility-bar { display: none; }
}

/* ============================================================
   NAV — "Deals & Promotions" pill button + denser spacing
   Mimics LaptopsDirect's coloured CTA in the nav bar.
   ============================================================ */
.cit-nav-link-deals {
    background-color: var(--cit-orange) !important;
    color: #FFFFFF !important;
    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    margin: 0 0.5rem !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.cit-nav-link-deals:hover {
    background-color: #d8521b !important;
    transform: translateY(-1px);
}
.cit-nav-item-sale::before {
    display: none !important;
}

/* Tighter spacing between nav items so 12 categories fit comfortably */
.cit-nav-menu .cit-nav-link {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    font-size: 0.9375rem;
}

@media (max-width: 1100px) {
    .cit-nav-menu .cit-nav-link {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
        font-size: 0.875rem;
    }
}
s fit comfortably */
.cit-nav-menu .cit-nav-link {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    font-size: 0.9375rem;
}

@media (max-width: 1100px) {
    .cit-nav-menu .cit-nav-link {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
        font-size: 0.875rem;
    }
}

/* ============================================================
   FORCED OVERRIDES — max-specificity Kadence beaters
   v0.16.2: utility bar text colour, search icon size,
   refined Deals pill, logo max-height on all pages.
   ============================================================ */

/* Utility bar: force cream bg + navy text, beat Kadence */
html body div.cit-utility-bar,
html body div.cit-utility-bar a,
html body div.cit-utility-bar span,
html body div.cit-utility-bar strong {
    color: #0F2238 !important;
    background-color: transparent !important;
}
html body div.cit-utility-bar { background-color: #F5EDD9 !important; }
html body div.cit-utility-bar .cit-utility-finance-label { color: rgba(15,34,56,0.65) !important; }
html body div.cit-utility-bar .cit-utility-finance-klarna { background-color: #FFA8CD !important; color: #17120F !important; }
html body div.cit-utility-bar .cit-utility-finance-humm { background-color: #FF6B35 !important; color: #FFFFFF !important; }

/* Search icon: constrain SVG in header to a sensible size */
html body .cit-header svg,
html body .cit-primary-nav svg {
    max-width: 22px !important;
    max-height: 22px !important;
    width: auto !important;
    height: auto !important;
}

/* Refined Deals & Promotions: outlined pill, not a blob */
html body .cit-nav-link-deals {
    background-color: transparent !important;
    color: var(--cit-orange) !important;
    border: 1.5px solid var(--cit-orange) !important;
    padding: 0.45rem 0.875rem !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    margin: 0 0.4rem !important;
    line-height: 1.1 !important;
    transition: background-color .15s ease, color .15s ease;
}
html body .cit-nav-link-deals:hover {
    background-color: var(--cit-orange) !important;
    color: #FFFFFF !important;
    transform: none !important;
}

/* Logo: constrain to 48px max-height across ALL pages (homepage + inner) */
html body .site-logo img,
html body .site-branding img,
html body img.custom-logo,
html body .custom-logo-link img,
html body .header-logo img {
    max-height: 48px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
 across ALL pages (homepage + inner) */
html body .site-logo img,
html body .site-branding img,
html body img.custom-logo,
html body .custom-logo-link img,
html body .header-logo img {
    max-height: 48px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ============================================================
   BASE TEMPLATES — styles for page.php, single.php, archive.php,
   404.php, search.php, index.php. Brand-consistent typography,
   centred max-width container, comfortable reading rhythm.
   ============================================================ */

.cit-main.cit-page-wrap {
    background-color: var(--cit-background);
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    min-height: 50vh;
}

.cit-page-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--cit-border);
}
.cit-page-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.cit-archive-description {
    color: var(--cit-text-muted);
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* Page content (typographic flow for the_content() output) */
.cit-page-content,
.cit-post-content {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--cit-text);
    max-width: 760px;
}
.cit-page-content h2,
.cit-post-content h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; color: var(--cit-navy); }
.cit-page-content h3,
.cit-post-content h3 { font-size: 1.375rem; margin: 2rem 0 0.75rem; color: var(--cit-navy); }
.cit-page-content p,
.cit-post-content p { margin: 0 0 1.25rem; }
.cit-page-content a,
.cit-post-content a { color: var(--cit-orange); text-decoration: underline; text-underline-offset: 3px; }
.cit-page-content a:hover,
.cit-post-content a:hover { color: var(--cit-navy); }
.cit-page-content ul,
.cit-page-content ol,
.cit-post-content ul,
.cit-post-content ol { margin: 0 0 1.25rem 1.5rem; }
.cit-page-content li,
.cit-post-content li { margin-bottom: 0.5rem; }

/* Blog post lists (index.php, archive.php, search.php) */
.cit-posts-list { display: grid; gap: 2rem; }
.cit-post { border-bottom: 1px solid var(--cit-border); padding-bottom: 2rem; }
.cit-post:last-child { border-bottom: none; }
.cit-post-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.2; }
.cit-post-title a { color: var(--cit-navy); text-decoration: none; }
.cit-post-title a:hover { color: var(--cit-orange); }
.cit-post-meta { color: var(--cit-text-muted); font-size: 0.875rem; margin: 0 0 0.75rem; }
.cit-post-excerpt { color: var(--cit-text); line-height: 1.55; }
.cit-post-thumbnail { margin: 0 0 2rem; border-radius: 0.75rem; overflow: hidden; max-width: 760px; }
.cit-post-thumbnail img { width: 100%; height: auto; display: block; }
.cit-post-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cit-border); color: var(--cit-text-muted); font-size: 0.9375rem; }

/* 404 */
.cit-404 { text-align: center; padding: clamp(4rem, 8vw, 6rem) 0; }
.cit-404-inner { max-width: 560px; margin: 0 auto; }
.cit-404-number { display: block; font-size: clamp(5rem, 12vw, 9rem); font-weight: 800; color: var(--cit-orange); line-height: 1; margin-bottom: 1rem; letter-spacing: -0.04em; }
.cit-404-text { font-size: 1.125rem; color: var(--cit-text); margin: 1rem 0 2rem; }
.cit-404-search { margin: 2rem 0; }
.cit-404-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* Search form */
.cit-search-form { display: flex; gap: 0.5rem; max-width: 560px; }
.cit-search-input { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--cit-border); border-radius: 0.5rem; font-size: 1rem; }
.cit-search-input:focus { outline: 2px solid var(--cit-orange); outline-offset: 2px; }

.cit-no-results { text-align: center; padding: 4rem 1rem; color: var(--cit-text-muted); }
.cit-no-results h2 { color: var(--cit-navy); margin: 0 0 1rem; }
/* ============================================================
   BeRocket FILTER WIDGETS — brand-styled overrides
   Targets BeRocket (.berocket_aapf_widget, .bapf_*) classes
   when rendered inside our .cit-filter-widget wrapper.
   Goal: BeRocket output visually indistinguishable from the
   Swappie-style sidebar we already built.
   ============================================================ */

.cit-iphones-filter-empty {
    color: var(--cit-text-muted);
    font-size: 0.875rem;
    padding: 1rem 0;
    line-height: 1.5;
}
.cit-iphones-filter-empty a { color: var(--cit-orange); }

/* Widget wrapper */
.cit-filter-widget {
    border-bottom: 1px solid var(--cit-border);
    padding: 1rem 0;
}
.cit-filter-widget:last-child { border-bottom: none; }

.cit-filter-widget-title,
.cit-filter-widget .widget-title,
.cit-filter-widget .widgettitle,
.cit-filter-widget h3 {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--cit-navy) !important;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

/* BeRocket containers */
.cit-filter-widget .berocket_aapf_widget,
.cit-filter-widget .bapf_sfilter {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* BeRocket option lists */
.cit-filter-widget .bapf_ul,
.cit-filter-widget .berocket_aapf_widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
}

.cit-filter-widget .bapf_ul li,
.cit-filter-widget .berocket_aapf_widget li {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--cit-text) !important;
    font-size: 0.9375rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Checkboxes */
.cit-filter-widget input[type="checkbox"] {
    accent-color: var(--cit-orange) !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
}

/* Count badges (e.g., "(24)" next to filter options) */
.cit-filter-widget .bapf_count,
.cit-filter-widget .berocket_aapf_widget .count {
    color: var(--cit-text-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    background: transparent !important;
    margin-left: auto !important;
}

/* Price slider (BeRocket uses nouislider or jQuery UI slider) */
.cit-filter-widget .bapf_slidr_main,
.cit-filter-widget .ui-slider {
    background: var(--cit-border) !important;
    height: 4px !important;
    border: none !important;
    margin: 1.25rem 0.5rem !important;
    border-radius: 2px !important;
}
.cit-filter-widget .ui-slider-range,
.cit-filter-widget .bapf_slidr_main .noUi-connect {
    background: var(--cit-orange) !important;
}
.cit-filter-widget .ui-slider-handle,
.cit-filter-widget .noUi-handle {
    background: #FFFFFF !important;
    border: 2px solid var(--cit-orange) !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    top: -8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* Color swatches */
.cit-filter-widget .bapf_color > span,
.cit-filter-widget .berocket_aapf_widget .br_color {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 2px solid var(--cit-border) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
    display: inline-block !important;
}
.cit-filter-widget .bapf_color .bapf_curr-active,
.cit-filter-widget .berocket_aapf_widget .br_color.br_active {
    border-color: var(--cit-orange) !important;
    transform: scale(1.1) !important;
}

/* ============================================================
   GENERIC SHOP ARCHIVE — taxonomy-product_cat.php
   Layout used for every product category except iPhones.
   Sidebar (BeRocket filters) + WooCommerce product grid.
   ============================================================ */
.cit-shop-archive { background-color: var(--cit-background); }

.cit-shop-header-band {
    background-color: var(--cit-cream);
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid var(--cit-border);
}
.cit-shop-breadcrumb {
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
    margin-bottom: 0.75rem;
}
.cit-shop-breadcrumb a { color: var(--cit-text-muted); text-decoration: none; }
.cit-shop-breadcrumb a:hover { color: var(--cit-orange); }
.cit-shop-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.cit-shop-description {
    color: var(--cit-text-muted);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 720px;
}

.cit-shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    padding: 2.5rem 0 4rem;
    align-items: flex-start;
}

.cit-shop-sidebar {
    position: sticky;
    top: 1.5rem;
    align-self: start;
}
.cit-shop-sort {
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.cit-shop-sort label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cit-text-muted);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.cit-shop-sort select {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy);
    cursor: pointer;
    appearance: none;
    padding: 0.3rem 0;
}

.cit-shop-filter-section {
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.cit-shop-filter-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cit-border);
}
.cit-shop-filter-empty { color: var(--cit-text-muted); font-size: 0.875rem; }

.cit-shop-sidebar-trust {
    background: var(--cit-cream);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}
.cit-shop-sidebar-trust h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.75rem;
}
.cit-shop-sidebar-trust ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cit-shop-sidebar-trust li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.875rem;
    color: var(--cit-text);
}
.cit-shop-sidebar-trust li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--cit-orange);
    font-weight: 800;
}

.cit-shop-grid-wrap { min-width: 0; }
.cit-shop-grid-wrap .products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem !important;
}
.cit-shop-grid-wrap .products li.product {
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
.cit-shop-grid-wrap .products li.product:hover {
    border-color: var(--cit-orange);
    transform: translateY(-2px);
}
.cit-shop-grid-wrap .products li.product img { width: 100%; height: auto; border-radius: 0.5rem; }
.cit-shop-grid-wrap .products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0.75rem 0 0.5rem;
    padding: 0;
}
.cit-shop-grid-wrap .products li.product .price {
    color: var(--cit-navy);
    font-weight: 700;
}
.cit-shop-grid-wrap .products li.product .button {
    background-color: var(--cit-navy) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    margin-top: 0.5rem !important;
    font-weight: 600 !important;
}
.cit-shop-grid-wrap .products li.product .button:hover {
    background-color: var(--cit-orange) !important;
}

.cit-shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--cit-cream);
    border-radius: 1rem;
}
.cit-shop-empty h2 { color: var(--cit-navy); margin: 0 0 1rem; }
.cit-shop-empty a { color: var(--cit-orange); font-weight: 700; }

@media (max-width: 1024px) {
    .cit-shop-layout { grid-template-columns: 240px 1fr; gap: 2rem; }
    .cit-shop-grid-wrap .products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 860px) {
    .cit-shop-layout { grid-template-columns: 1fr; }
    .cit-shop-sidebar { position: static; }
}
@media (max-width: 600px) {
    .cit-shop-grid-wrap .products { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CATEGORY ARCHIVE — taxonomy-product_cat.php (kick-ass mode)
   Hero band, shortcut chips, subcategory tiles.
   Layout (sidebar + grid) inherits from .cit-shop-* styles.
   ============================================================ */
.cit-cat-archive { background-color: var(--cit-background); }

/* HERO */
.cit-cat-hero {
    background: linear-gradient(135deg, var(--cit-navy) 0%, #1a3856 100%);
    color: var(--cit-text-light);
    padding: clamp(3rem, 5vw, 4.5rem) 0;
    position: relative;
    overflow: hidden;
}
.cit-cat-hero-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.18) 0%, transparent 70%);
    top: -260px;
    right: -200px;
    pointer-events: none;
}
.cit-cat-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.cit-cat-breadcrumb {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.65);
    margin-bottom: 1.25rem;
}
.cit-cat-breadcrumb a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
}
.cit-cat-breadcrumb a:hover { color: var(--cit-orange); }
.cit-cat-hero-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.cit-cat-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: var(--cit-text-light);
    letter-spacing: -0.025em;
}
.cit-cat-hero-subtitle {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
    max-width: 720px;
    margin: 0;
}

/* SHORTCUT CHIPS */
.cit-cat-shortcuts {
    background-color: var(--cit-cream);
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--cit-border);
}
.cit-cat-chips {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.cit-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--cit-navy);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cit-cat-chip:hover {
    border-color: var(--cit-orange);
    box-shadow: 0 4px 12px rgba(15,34,56,0.08);
    transform: translateY(-1px);
}
.cit-cat-chip-icon {
    color: var(--cit-orange);
    display: inline-flex;
    align-items: center;
}

/* SUBCATEGORY TILES — modernised v0.28.3
 * Uses flex with max-width per tile so a category with just 2 subs (e.g.
 * smartphones → iPhones + Samsung) shows two compact cards rather than
 * stretching them to half the viewport. Section header uses the modern
 * eyebrow + h2 pattern that matches other sections. Image-less subs get a
 * stylised initial letter instead of an empty cream box. */
.cit-cat-subcategories {
    padding: 2.5rem 0 0.5rem;
}

.cit-cat-subcat-header {
    max-width: 760px;
    margin: 0 0 1.5rem;
}
.cit-cat-subcat-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--cit-orange);
    margin-bottom: 0.5rem;
}
.cit-cat-subcat-title {
    font-size: clamp(1.375rem, 2.25vw, 1.75rem);
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0;
}

.cit-cat-subcat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 0.5rem;
}
.cit-cat-subcat-tile {
    flex: 0 0 auto;
    width: calc(25% - 0.75rem);
    max-width: 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--cit-border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cit-cat-subcat-tile:hover {
    transform: translateY(-2px);
    border-color: #CFD6E0;
    box-shadow: 0 12px 28px rgba(15, 34, 56, 0.10);
}
.cit-cat-subcat-image {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #F7F8FA;
    position: relative;
}
/* Placeholder — big stylised initial in soft cream gradient */
.cit-cat-subcat-placeholder {
    background: linear-gradient(135deg, var(--cit-cream, #F5EDD9) 0%, #E5D8B1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cit-cat-subcat-initial {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--cit-navy);
    opacity: 0.18;
    line-height: 1;
    letter-spacing: -0.02em;
}
.cit-cat-subcat-body {
    padding: 0.875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.cit-cat-subcat-body h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0;
    line-height: 1.3;
}
.cit-cat-subcat-count {
    color: var(--cit-text-muted, #4A5568);
    font-size: 0.75rem;
    font-weight: 600;
}
.cit-cat-subcat-tile:hover .cit-cat-subcat-count {
    color: var(--cit-orange);
}

@media (max-width: 980px) {
    .cit-cat-subcat-tile { width: calc(33.333% - 0.667rem); }
}
@media (max-width: 720px) {
    .cit-cat-subcat-tile { width: calc(50% - 0.5rem); }
}
@media (max-width: 480px) {
    .cit-cat-subcat-tile { width: 100%; max-width: none; }
}

/* ============================================================
   SINGLE PRODUCT PAGE — woocommerce/content-single-product.php
   Refurbed/Swappie/Back Market-grade buy box + 7 sections.
   ============================================================ */
.cit-product-page { background-color: var(--cit-background); }

/* Defensive override against rogue <style> blocks inside product descriptions.
   Icecat / external feeds sometimes inject <style> with `html, body { display: flex;
   justify-content: center; align-items: center }` patterns, which collapses the
   whole site layout into a centered horizontal flex container. Force Kadence's
   expected flex-column body back with !important so that injected CSS can't win. */
html, body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 100vh !important;
    text-align: left !important;
    padding: 0 !important;
}

/* Custom main wrappers need to take the full flex track in Kadence's
   sticky-footer body{display:flex} layout. */
main.cit-product-page,
main.cit-services-page,
main.cit-business-page,
main.cit-pcb-page,
main.cit-iphones-archive,
main.cit-home,
main#primary {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.cit-product-breadcrumb-wrap {
    padding: 1.25rem 1.25rem 0;
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
}
.cit-product-breadcrumb-wrap a { color: var(--cit-text-muted); text-decoration: none; }
.cit-product-breadcrumb-wrap a:hover { color: var(--cit-orange); }

/* HERO: 2-col gallery + buy box */
.cit-product-hero { padding: 1.5rem 0 3rem; }
.cit-product-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: flex-start;
}

/* GALLERY */
.cit-product-gallery {
    background: var(--cit-background);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid var(--cit-border);
}
.cit-product-gallery .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.cit-product-gallery img { border-radius: 0.5rem; }

/* BUY BOX (right column) */
.cit-product-summary {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: auto !important;
    float: none !important;
}
.cit-product-summary-head { display: flex; flex-direction: column; gap: 0.5rem; }
.cit-product-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    font-weight: 800 !important;
    color: var(--cit-navy) !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}
.cit-product-rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}
.cit-product-rating-count { color: var(--cit-text-muted); text-decoration: none; }
.cit-product-rating-count:hover { color: var(--cit-orange); }
.cit-product-short-desc {
    color: var(--cit-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-top: 0.25rem;
}

/* STOCK + SHIPPING ROW */
.cit-product-stock-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.875rem 1rem;
    background: var(--cit-cream);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}
.cit-stock-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.cit-stock-in { color: #047857; }
.cit-stock-out { color: #B91C1C; }
.cit-shipping-est { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--cit-text); }
.cit-shipping-est svg { opacity: 0.65; }

/* PRICE */
.cit-product-price-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 0;
    border-top: 1px solid var(--cit-border);
    border-bottom: 1px solid var(--cit-border);
}
.cit-product-price .price {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--cit-navy) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}
.cit-product-price del {
    color: var(--cit-text-muted) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-right: 0.5rem !important;
}
.cit-product-savings {
    display: inline-block;
    align-self: flex-start;
    background: var(--cit-orange);
    color: #FFFFFF;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ADD TO CART (style WC default form) */
.cit-product-add-to-cart .quantity { margin-right: 0.5rem; }
.cit-product-add-to-cart .qty {
    width: 60px !important;
    padding: 0.75rem 0.5rem !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
}
.cit-product-add-to-cart .single_add_to_cart_button,
.cit-product-add-to-cart button[type=submit] {
    background: var(--cit-orange) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.95rem 1.5rem !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.cit-product-add-to-cart .single_add_to_cart_button:hover {
    background: #d8521b !important;
    transform: translateY(-1px);
}
.cit-product-add-to-cart .variations select {
    padding: 0.65rem 0.75rem !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 0.5rem !important;
    font-size: 0.9375rem !important;
    min-height: auto !important;
}

/* FINANCE */
.cit-product-finance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
}
.cit-finance-label { color: var(--cit-text); }
.cit-finance-brand {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.6875rem;
    line-height: 1;
}
.cit-finance-klarna { background-color: #FFA8CD; color: #17120F; }
.cit-finance-humm { background-color: #FF6B35; color: #FFFFFF; text-transform: lowercase; font-style: italic; }

/* TRUST GRID */
.cit-product-trust-grid {
    list-style: none;
    padding: 1rem;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    background: var(--cit-cream);
    border-radius: 0.75rem;
}
.cit-product-trust-grid li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.cit-product-trust-grid svg { color: var(--cit-orange); flex-shrink: 0; margin-top: 0.15rem; }
.cit-product-trust-grid strong { display: block; font-size: 0.875rem; font-weight: 700; color: var(--cit-navy); }
.cit-product-trust-grid span { font-size: 0.75rem; color: var(--cit-text-muted); }

/* META (SKU, categories) */
.cit-product-meta { font-size: 0.8125rem; color: var(--cit-text-muted); padding-top: 0.5rem; border-top: 1px solid var(--cit-border); }
.cit-product-meta .sku_wrapper, .cit-product-meta .posted_in, .cit-product-meta .tagged_as { display: block; margin-bottom: 0.25rem; }

/* SHARED SECTION FRAMEWORK */
.cit-product-section { padding: clamp(3rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--cit-border); }
.cit-product-section-header { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.cit-product-section-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cit-orange);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.cit-product-section h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.cit-product-section-lead { color: var(--cit-text-muted); font-size: 1rem; line-height: 1.5; margin: 0; }

/* WHY REFURBISHED */
.cit-product-why { background: var(--cit-background); }
.cit-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.cit-why-item {
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.75rem;
    padding: 1.75rem 1.5rem;
}
.cit-why-icon {
    width: 52px; height: 52px;
    border-radius: 0.75rem;
    background: var(--cit-cream);
    color: var(--cit-orange);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.cit-why-item h3 { font-size: 1.0625rem; font-weight: 700; color: var(--cit-navy); margin: 0 0 0.5rem; }
.cit-why-item p { font-size: 0.9375rem; color: var(--cit-text-muted); line-height: 1.55; margin: 0; }

/* GRADING */
.cit-product-grading { background: var(--cit-cream); }
.cit-grade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 960px; margin: 0 auto; }
/* 5-tier grid (New, A+, A, B, C) - tighter padding, wider max-width to fit 5 cards on desktop */
.cit-grade-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 1rem; max-width: 1240px; }
.cit-grade-grid--5 .cit-grade-card { padding: 1.5rem 1rem; }
.cit-grade-card {
    background: var(--cit-background);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    border: 2px solid var(--cit-border);
    text-align: center;
    transition: border-color 0.2s ease;
}
.cit-grade-card:hover { border-color: var(--cit-orange); }
.cit-grade-letter {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--cit-orange);
    color: #FFFFFF;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
/* "New" pill uses text rather than a single letter so widen the badge */
.cit-grade-letter--text {
    width: auto;
    min-width: 56px;
    padding: 0 1rem;
    font-size: 1rem;
    letter-spacing: 0.04em;
    border-radius: 28px;
}
.cit-grade-card-new .cit-grade-letter { background: #16a34a; }
.cit-grade-card-aplus .cit-grade-letter { background: #d97706; }
.cit-grade-card-b .cit-grade-letter { background: #f97316; }
.cit-grade-card-c .cit-grade-letter { background: var(--cit-navy); }
.cit-grade-card h3 { font-size: 1.25rem; font-weight: 800; color: var(--cit-navy); margin: 0 0 0.75rem; }
.cit-grade-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9375rem; color: var(--cit-text); }
.cit-grade-card li { padding-left: 1.1rem; position: relative; }
.cit-grade-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--cit-orange); font-weight: 800; }

/* TECH SPECS TABLE - grouped into sections (Key specs / Display / Connectivity /
   Camera & sensors / Physical & graphics / Other specs) by
   creative_it_group_product_specs() in functions.php. */
.cit-spec-group { max-width: 760px; margin: 0 auto 1.5rem; }
.cit-spec-group:last-child { margin-bottom: 0; }
.cit-spec-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--cit-orange);
    margin: 0 0 0.5rem;
    padding-left: 0.25rem;
}
/* The very first group (Key specs) gets a slightly heavier treatment so
   buyers see the must-read attributes pop without us shouting on every group. */
.cit-spec-group:first-child .cit-spec-group-title {
    color: var(--cit-navy);
    font-size: 0.8125rem;
}

.cit-spec-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: var(--cit-background);
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--cit-border);
}
.cit-spec-table tr:nth-child(odd) { background: var(--cit-cream); }
.cit-spec-table th, .cit-spec-table td { padding: 0.875rem 1.25rem; text-align: left; font-size: 0.9375rem; }
.cit-spec-table th { color: var(--cit-text-muted); font-weight: 600; width: 40%; }
.cit-spec-table td { color: var(--cit-text); font-weight: 500; }

/* TRUSTPILOT REVIEWS SECTION */
.cit-product-reviews { background: var(--cit-navy); color: var(--cit-text-light); }
.cit-product-reviews h2 { color: var(--cit-text-light); }
.cit-product-reviews .cit-product-section-eyebrow { color: var(--cit-orange); }
.cit-product-trustpilot {
    background: var(--cit-background);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 24px 64px rgba(0,0,0,0.30);
}

/* SUSTAINABILITY */
.cit-product-sustainability { background: linear-gradient(135deg, #d1fae5 0%, #e0f2fe 100%); }
.cit-sustainability-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: flex-start;
    max-width: 920px;
    margin: 0 auto;
}
.cit-sustainability-icon {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #047857;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cit-sustainability-eyebrow {
    display: inline-block;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: #047857; font-size: 0.8125rem; font-weight: 600;
    margin-bottom: 0.5rem;
}
.cit-sustainability-body h2 { color: var(--cit-navy); font-size: clamp(1.375rem, 2.5vw, 1.875rem); margin: 0 0 0.75rem; line-height: 1.2; }
.cit-sustainability-body > p { color: var(--cit-text); font-size: 1rem; margin: 0 0 1.25rem; }
.cit-sustainability-stats { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 2.5rem; flex-wrap: wrap; }
.cit-sustainability-stats li { display: flex; flex-direction: column; }
.cit-sustainability-stats strong { font-size: 1.75rem; font-weight: 800; color: var(--cit-navy); line-height: 1; letter-spacing: -0.02em; }
.cit-sustainability-stats span { color: var(--cit-text-muted); font-size: 0.875rem; margin-top: 0.25rem; }
.cit-sustainability-body small { color: var(--cit-text-muted); font-size: 0.75rem; display: block; line-height: 1.4; }

/* RELATED PRODUCTS */
.cit-product-related .products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cit-product-related .products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 0.75rem;
    padding: 1rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.cit-product-related .products li.product:hover { border-color: var(--cit-orange); transform: translateY(-2px); }

/* RESPONSIVE */
@media (max-width: 960px) {
    .cit-product-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .cit-product-summary { position: static; }
    .cit-why-grid { grid-template-columns: repeat(2, 1fr); }
    .cit-product-related .products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 1024px) {
    .cit-grade-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .cit-grade-grid { grid-template-columns: 1fr; }
    .cit-grade-grid--5 { grid-template-columns: 1fr; }
    .cit-sustainability-card { grid-template-columns: 1fr; }
    .cit-sustainability-icon { width: 64px; height: 64px; }
    .cit-sustainability-stats { gap: 1.5rem; }
    .cit-product-trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .cit-why-grid { grid-template-columns: 1fr; }
    .cit-product-related .products { grid-template-columns: 1fr !important; }
    .cit-spec-table th, .cit-spec-table td { padding: 0.625rem 0.875rem; font-size: 0.875rem; }
}

/* ============================================================
   PRODUCT PAGE — gallery sizing fixes (v0.19.1)
   Constrains WC gallery so FlexSlider does not explode to
   infinity. Sale flash anchored to gallery, not body.
   ============================================================ */
.cit-product-hero-inner > * { min-width: 0; }

.cit-product-gallery {
    position: relative !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
}

/* Lock the gallery viewport to a fixed 1:1 aspect ratio so the box doesn't
   resize when a different image is selected. DO NOT touch the .slick-list /
   .slick-track / .slick-slide widths or heights - slick.js calculates those
   dynamically (track width = slide count x slide width); overriding breaks
   the slider's translate-based animation. We only style the OUTER container
   and the image inside. The slider component sizes itself to the container. */
.cit-product-gallery .woocommerce-product-gallery,
.cit-product-gallery .flex-viewport,
.cit-product-gallery .woocommerce-product-gallery__wrapper,
.cit-product-gallery .woo-variation-gallery-slider-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    background: #fff;
}
/* Image inside: contain + centered, no forced dimensions on slick wrappers. */
.cit-product-gallery .woocommerce-product-gallery__image,
.cit-product-gallery .woo-variation-gallery-slider .slick-slide a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100%;
}
.cit-product-gallery img,
.cit-product-gallery .woo-variation-gallery-slider img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: auto !important;
}
.cit-product-gallery .onsale {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 5;
    background: var(--cit-orange) !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.75rem !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    min-height: auto !important;
    line-height: 1.4 !important;
}

.cit-product-summary { min-width: 0 !important; max-width: 100% !important; }

/* ============================================================
   SINGLE PRODUCT — Refurbed-style Description + Specs combined area
   (v0.19.2) sits directly below the buy box.
   ============================================================ */
.cit-product-info { background: var(--cit-background); }
.cit-product-info-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}

/* LEFT: Description blocks (collapsible <details>) */
.cit-product-info-desc {
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 1rem;
    overflow: hidden;
}
.cit-info-block,
.cit-info-block-link {
    border-bottom: 1px solid var(--cit-border);
}
.cit-info-block:last-of-type,
.cit-info-block-link:last-child { border-bottom: none; }

.cit-info-block summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    cursor: pointer;
    list-style: none;
}
.cit-info-block summary::-webkit-details-marker { display: none; }
.cit-info-block-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cit-navy);
    letter-spacing: -0.01em;
}
.cit-info-block-icon {
    width: 12px;
    height: 12px;
    border-right: 2.5px solid var(--cit-navy);
    border-bottom: 2.5px solid var(--cit-navy);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.cit-info-block[open] .cit-info-block-icon { transform: rotate(-135deg); margin-bottom: -4px; }

.cit-info-block-body {
    padding: 0 2rem 1.75rem;
    color: var(--cit-text);
    font-size: 0.9375rem;
    line-height: 1.65;
}
.cit-info-block-body h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 1.5rem 0 0.5rem;
}
.cit-info-block-body h4:first-child { margin-top: 0; }
.cit-info-block-body p { margin: 0 0 1rem; }
.cit-info-block-body strong { color: var(--cit-navy); font-weight: 700; }

/* Reviews row (link styled like a collapsible header) */
.cit-info-block-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    text-decoration: none;
    color: var(--cit-navy);
    transition: background-color 0.15s ease;
}
.cit-info-block-link:hover { background: var(--cit-cream); }
.cit-info-block-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 1rem;
    color: var(--cit-text-muted);
    font-size: 0.9375rem;
}
.cit-info-block-stars { color: #00B67A; letter-spacing: 0.05em; }
.cit-info-block-rating strong { color: var(--cit-text); font-weight: 700; }
.cit-info-block-arrow {
    color: var(--cit-navy);
    font-weight: 700;
    transition: transform 0.2s ease;
}
.cit-info-block-link:hover .cit-info-block-arrow { transform: translateX(4px); }

/* RIGHT: Specs panel with tabs */
.cit-product-info-specs {
    background: var(--cit-background);
    border: 1px solid var(--cit-border);
    border-radius: 1rem;
    overflow: hidden;
    position: sticky;
    top: 1.5rem;
    align-self: flex-start;
}
.cit-spec-tabs {
    display: flex;
    border-bottom: 1px solid var(--cit-border);
}
.cit-spec-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 1.25rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cit-text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cit-spec-tab:hover { color: var(--cit-navy); }
.cit-spec-tab-active {
    color: var(--cit-navy);
    border-bottom-color: var(--cit-orange);
    font-weight: 700;
}
.cit-spec-panels { padding: 0; }
.cit-spec-panel { padding: 1rem 0; }
.cit-spec-panel[hidden] { display: none; }
.cit-spec-features-content { padding: 1rem 2rem; font-size: 0.9375rem; line-height: 1.65; color: var(--cit-text); }
.cit-spec-features-content ul { padding-left: 1.25rem; }

/* Reusable spec table (used both inside the panel here and standalone) */
.cit-spec-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    border-radius: 0;
    border: none;
}
.cit-spec-table tr {
    border-bottom: 1px solid var(--cit-border);
}
.cit-spec-table tr:last-child { border-bottom: none; }
.cit-spec-table tr:nth-child(odd) { background: rgba(245, 237, 217, 0.4); }
.cit-spec-table th, .cit-spec-table td {
    padding: 0.875rem 1.5rem;
    text-align: left;
    font-size: 0.9375rem;
    vertical-align: top;
}
.cit-spec-table th {
    color: var(--cit-navy);
    font-weight: 600;
    width: 45%;
    white-space: nowrap;
}
.cit-spec-table td {
    color: var(--cit-text);
    font-weight: 500;
    text-align: right;
}
.cit-spec-empty { padding: 2rem; text-align: center; color: var(--cit-text-muted); }

/* Responsive */
@media (max-width: 960px) {
    .cit-product-info-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .cit-product-info-specs { position: static; }
    .cit-info-block summary,
    .cit-info-block-link { padding: 1.25rem 1.5rem; }
    .cit-info-block-body { padding: 0 1.5rem 1.5rem; }
}
@media (max-width: 540px) {
    .cit-spec-table th, .cit-spec-table td { padding: 0.625rem 1rem; font-size: 0.875rem; }
}

/* ============================================================
   PRODUCT BUY BOX — add-to-cart area fixes (v0.19.4)
   - Hide WC duplicate stock paragraph
   - Centre Add to cart button text properly
   ============================================================ */

/* Hide WC duplicate stock indicator — we already show ours in the cream badge */
.cit-product-add-to-cart .stock,
.cit-product-add-to-cart p.stock,
.cit-product-add-to-cart .availability {
    display: none !important;
}

/* Make the cart form layout tidy */
.cit-product-add-to-cart form.cart {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin: 0 !important;
}
.cit-product-add-to-cart .quantity { margin: 0 !important; }

/* Vertically centre Add to cart text — kill inherited line-height/padding from Kadence/WC base */
.cit-product-add-to-cart button[type=submit],
.cit-product-add-to-cart .single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: auto !important;
    min-height: 54px !important;
    line-height: 1 !important;
    padding: 0 1.5rem !important;
    margin: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Quantity input matches button height */
.cit-product-add-to-cart .qty {
    width: 64px !important;
    min-height: 54px !important;
    padding: 0 0.5rem !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* ============================================================
   PRODUCT SPECS PANEL — compact + scrollable (v0.19.5)
   Caps the panel so it never extends past the description
   column. The spec table scrolls internally.
   ============================================================ */
.cit-product-info-specs {
    display: flex !important;
    flex-direction: column !important;
    max-height: 620px !important;
}
.cit-spec-tabs { flex-shrink: 0; }
.cit-spec-panels {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(15,34,56,0.25) transparent;
}
/* Custom scrollbar (WebKit) — subtle, on-brand */
.cit-spec-panels::-webkit-scrollbar { width: 8px; }
.cit-spec-panels::-webkit-scrollbar-track { background: transparent; }
.cit-spec-panels::-webkit-scrollbar-thumb {
    background-color: rgba(15,34,56,0.20);
    border-radius: 4px;
}
.cit-spec-panels::-webkit-scrollbar-thumb:hover {
    background-color: rgba(15,34,56,0.40);
}

/* On mobile we drop the cap so the table can run naturally */
@media (max-width: 960px) {
    .cit-product-info-specs { max-height: none !important; }
    .cit-spec-panels { overflow-y: visible; }
}

/* ============================================================
   PRODUCT TITLE + TRUSTPILOT RATING (v0.19.6)
   - Kill inherited line-clamp so full title shows
   - Refurbed-style green Trustpilot rating under title
   ============================================================ */

/* Force title to wrap and never truncate */
.cit-product-title {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-height: none !important;
}

/* Universal Trustpilot rating under title — Refurbed pattern */
.cit-product-tp-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--cit-text);
    font-size: 0.875rem;
    line-height: 1.2;
    margin-top: 0.5rem;
    transition: color 0.15s ease;
}
.cit-product-tp-rating:hover { color: var(--cit-orange); }

.cit-product-tp-stars {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
.cit-product-tp-stars span {
    width: 18px;
    height: 18px;
    background-color: #00B67A;
    position: relative;
    border-radius: 2px;
}
.cit-product-tp-stars span::before {
    content: "\2605";
    color: #FFFFFF;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}

.cit-product-tp-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.cit-product-tp-meta strong {
    color: var(--cit-navy);
    font-weight: 700;
    font-size: 0.9375rem;
}
.cit-product-tp-source {
    color: var(--cit-text-muted);
    font-size: 0.8125rem;
}

/* Hide the old per-product rating row (still in template for backwards-compat if needed) */
.cit-product-rating-row { display: none; }

/* ============================================================
   HEADER LOGO + SEARCH FIXES (v0.19.7)
   - Properly target our actual logo class (cit-header-logo-img)
   - Match search input + button heights
   ============================================================ */

/* LOGO — target our actual class. Previous override missed it. */
html body .cit-header-logo img,
html body img.cit-header-logo-img,
html body .cit-header-logo-img {
    max-height: 44px !important;
    max-width: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* HEADER SEARCH — make input and button the same height + integrate cleanly */
.cit-header-search .cit-search-form {
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
}
.cit-header-search .cit-search-input {
    height: 46px !important;
    line-height: 1 !important;
    padding: 0 1.25rem !important;
    border: none !important;
    box-sizing: border-box !important;
    flex: 1 !important;
}
.cit-header-search .cit-search-submit {
    height: 46px !important;
    line-height: 1 !important;
    padding: 0 1.5rem !important;
    margin: 0 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    background: var(--cit-orange) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.cit-header-search .cit-search-submit svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
.cit-header-search .cit-search-submit:hover {
    background: #d8521b !important;
}

/* ============================================================
   HEADER SEARCH — unified pill (v0.19.8)
   Form is the white pill container with overflow:hidden.
   Input fills left, button fills right edge — no gap, no overflow.
   ============================================================ */
.cit-header-search .cit-search-form {
    display: flex !important;
    align-items: stretch !important;
    background: #FFFFFF !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    height: 48px !important;
    width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
}
.cit-header-search .cit-search-input {
    flex: 1 !important;
    height: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 1.25rem !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 0.9375rem !important;
    color: var(--cit-text) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 1 !important;
}
.cit-header-search .cit-search-input:focus,
.cit-header-search .cit-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.cit-header-search .cit-search-submit {
    height: 100% !important;
    padding: 0 1.5rem !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--cit-orange) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
.cit-header-search .cit-search-submit:hover {
    background: #d8521b !important;
}
.cit-header-search .cit-search-submit svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   HEADER SEARCH — Refurbed-style minimal (v0.19.9)
   Single input with icon-only button on the right.
   No orange block, no "SEARCH" text, no visual seam.
   ============================================================ */

/* Hide the "Search" text inside the button */
.cit-header-search .cit-search-submit .cit-search-text,
.cit-header-search .cit-search-submit span:not(.screen-reader-text) {
    display: none !important;
}

/* Form is a single white rounded card */
.cit-header-search .cit-search-form {
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    height: 46px !important;
    width: 100% !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    transition: border-color 0.15s ease !important;
}
.cit-header-search .cit-search-form:focus-within {
    border-color: var(--cit-orange) !important;
}

/* Input fills */
.cit-header-search .cit-search-input {
    flex: 1 !important;
    height: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 1.25rem !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 0.9375rem !important;
    color: var(--cit-text) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    outline: none !important;
}
.cit-header-search .cit-search-input:focus,
.cit-header-search .cit-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.cit-header-search .cit-search-input::placeholder {
    color: var(--cit-text-muted) !important;
    opacity: 1 !important;
}

/* Button is icon-only, transparent, dark icon */
.cit-header-search .cit-search-submit {
    height: 100% !important;
    width: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--cit-navy) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: normal !important;
    font-size: 0 !important;
}
.cit-header-search .cit-search-submit:hover { color: var(--cit-orange) !important; }
.cit-header-search .cit-search-submit svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   BUY BOX — Meta + Price two-column row (v0.20.0)
   SKU/Category/Brand on left, Price/Savings right-aligned.
   ============================================================ */
.cit-product-meta-price {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--cit-border);
    border-bottom: 1px solid var(--cit-border);
    margin: 0;
}

/* Meta (left) — compact, no top border (the parent row provides it) */
.cit-product-meta-inline {
    padding: 0 !important;
    border: none !important;
    font-size: 0.8125rem !important;
    color: var(--cit-text-muted) !important;
    line-height: 1.5 !important;
    flex-shrink: 0;
    min-width: 0;
}
.cit-product-meta-inline .sku_wrapper,
.cit-product-meta-inline .posted_in,
.cit-product-meta-inline .tagged_as {
    display: block !important;
    margin: 0 0 0.15rem !important;
}
.cit-product-meta-inline a {
    color: var(--cit-text) !important;
    text-decoration: none !important;
    font-weight: 600;
}
.cit-product-meta-inline a:hover { color: var(--cit-orange) !important; }

/* Price block (right) — strip the borders since parent row provides them */
.cit-product-meta-price .cit-product-price-row {
    border: none !important;
    padding: 0 !important;
    text-align: right;
    align-items: flex-end;
    flex-shrink: 0;
}
.cit-product-meta-price .cit-product-price { text-align: right; }
.cit-product-meta-price .cit-product-savings {
    align-self: flex-end !important;
    margin-left: auto;
}

/* Stack vertically on narrow viewports */
@media (max-width: 540px) {
    .cit-product-meta-price { flex-direction: column; align-items: stretch; }
    .cit-product-meta-price .cit-product-price-row { text-align: left; }
    .cit-product-meta-price .cit-product-savings { align-self: flex-start !important; margin-left: 0; }
}

/* ============================================================
   RELATED PRODUCTS — beat WC inline widths + Kadence column floats
   (v0.20.1) High-specificity grid that ignores inline style="width:X%"
   ============================================================ */
html body .cit-product-related .products,
html body .cit-product-related ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    overflow: visible !important;
}

/* Force every product card to ignore the inline width WC adds */
html body .cit-product-related .products li.product,
html body .cit-product-related .products li.product[style],
html body .cit-product-related .products > li {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 1rem !important;
    background: var(--cit-background) !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 0.75rem !important;
    transition: border-color 0.2s ease, transform 0.2s ease;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}
html body .cit-product-related .products li.product:hover {
    border-color: var(--cit-orange) !important;
    transform: translateY(-2px);
}

/* Card internals */
html body .cit-product-related .products li.product a {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    width: 100% !important;
}
html body .cit-product-related .products li.product img,
html body .cit-product-related .products li.product .attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 0.5rem !important;
    margin: 0 auto 0.75rem !important;
}
html body .cit-product-related .products li.product .woocommerce-loop-product__title {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--cit-navy) !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
html body .cit-product-related .products li.product .price {
    color: var(--cit-navy) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    margin: 0.25rem 0 0.5rem !important;
    display: block !important;
}
html body .cit-product-related .products li.product .price del {
    color: var(--cit-text-muted) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-right: 0.35rem !important;
}
html body .cit-product-related .products li.product .button,
html body .cit-product-related .products li.product .add_to_cart_button {
    background: var(--cit-navy) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    margin-top: auto !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    width: auto !important;
    align-self: flex-start !important;
}
html body .cit-product-related .products li.product .button:hover {
    background: var(--cit-orange) !important;
}

@media (max-width: 960px) {
    html body .cit-product-related .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 540px) {
    html body .cit-product-related .products { grid-template-columns: 1fr !important; }
}

/* ============================================================
   RELATED PRODUCTS — undo grid on WC section wrapper (v0.20.2)
   The WC <section class="related products"> was getting grid
   from the broad .products selector, nesting the <ul> grid
   into a 302px column. Only the <ul> should be grid.
   ============================================================ */
html body .cit-product-related section.products,
html body .cit-product-related .related.products,
html body section.products.related,
html body .related.products {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Grid ONLY on the actual <ul> */
html body .cit-product-related ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
}

/* Kadence injects entry/content-bg/loop-entry on each <li> — strip the float/width chain */
html body .cit-product-related ul.products > li,
html body .cit-product-related ul.products > li.product,
html body .cit-product-related ul.products > li.entry,
html body .cit-product-related ul.products > li[style] {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
    flex-basis: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

/* Hide the duplicate WC h2 "Related products" since we render our own */
html body .cit-product-related ul.products + h2,
html body .cit-product-related section.products > h2,
html body .cit-product-related .related.products > h2 {
    display: none !important;
}

/* ============================================================
   VARIABLE PRODUCT PAGE — 3-col layout (v0.20.3)
   Gallery | Variation dropdowns | Price + Cart
   ============================================================ */

/* Outer 3-col grid — gallery 1.3fr, variations 1fr, cart 1fr */
.cit-product-hero-inner-3col {
    grid-template-columns: 1.3fr 1fr 1fr !important;
    gap: 2rem !important;
    align-items: flex-start !important;
}

/* Buy box spans middle + right (cols 2-3), internally 2-col grid */
.cit-product-summary-variable {
    grid-column: 2 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem 2rem !important;
    position: static !important;
}

/* Most blocks span both inner cols by default */
.cit-product-summary-variable > .cit-product-summary-head,
.cit-product-summary-variable > .cit-product-stock-row,
.cit-product-summary-variable > .cit-product-meta-price,
.cit-product-summary-variable > .cit-product-trust-grid,
.cit-product-summary-variable > .cit-product-meta {
    grid-column: 1 / -1 !important;
}

/* The add-to-cart wrapper spans both cols, contains the variations form */
.cit-product-summary-variable > .cit-product-add-to-cart {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
}

/* The variations form is "invisible" to the grid — its children participate */
.cit-product-summary-variable .variations_form {
    display: contents !important;
}

/* Variations table (dropdowns) → left col of buy box */
.cit-product-summary-variable .variations_form .variations {
    grid-column: 1 !important;
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
}
.cit-product-summary-variable .variations,
.cit-product-summary-variable .variations tbody,
.cit-product-summary-variable .variations tr,
.cit-product-summary-variable .variations th,
.cit-product-summary-variable .variations td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.cit-product-summary-variable .variations tr { margin-bottom: 1rem !important; }
.cit-product-summary-variable .variations th label {
    display: block !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: var(--cit-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.4rem !important;
}
.cit-product-summary-variable .variations select {
    width: 100% !important;
    padding: 0.75rem 2.25rem 0.75rem 1rem !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 0.5rem !important;
    font-size: 0.9375rem !important;
    background-color: var(--cit-background) !important;
    color: var(--cit-text) !important;
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F2238' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.875rem center !important;
    line-height: 1 !important;
}
.cit-product-summary-variable .variations select:focus {
    outline: none !important;
    border-color: var(--cit-orange) !important;
}
.cit-product-summary-variable .reset_variations {
    display: inline-block !important;
    margin-top: 0.5rem !important;
    font-size: 0.8125rem !important;
    color: var(--cit-text-muted) !important;
    text-decoration: underline !important;
}

/* Single variation wrap (price + add to cart) → right col of buy box */
.cit-product-summary-variable .variations_form .single_variation_wrap {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}
.cit-product-summary-variable .single_variation {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--cit-navy) !important;
}
.cit-product-summary-variable .single_variation .price {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
.cit-product-summary-variable .variations_button {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
}

/* Responsive — stack at <960px */
@media (max-width: 960px) {
    .cit-product-hero-inner-3col {
        grid-template-columns: 1fr !important;
    }
    .cit-product-summary-variable {
        grid-column: 1 !important;
        grid-template-columns: 1fr !important;
    }
    .cit-product-summary-variable > .cit-product-add-to-cart {
        grid-template-columns: 1fr !important;
    }
    .cit-product-summary-variable .variations_form .variations,
    .cit-product-summary-variable .variations_form .single_variation_wrap {
        grid-column: 1 !important;
    }
}

/* ============================================================
   VARIATION SWATCHES — hide duplicate selected-value label
   (v0.20.4) Woo Variation Swatches plugin shows the selected
   variation NAME above the swatches. We dont need it because
   the active swatch is already highlighted underneath.
   ============================================================ */
html body .woo-selected-variation-item-name,
html body .variations .woo-selected-variation-item-name,
html body .variable-items-wrapper .woo-selected-variation-item-name,
html body .woo-variation-items-wrapper .woo-selected-variation-item-name {
    display: none !important;
}

/* Tighten label spacing now that the value name no longer sits between */
html body .variations .label label,
html body .variations th.label label {
    margin-bottom: 0.5rem !important;
}

/* While we are here, polish the swatch buttons themselves */
html body .variable-items-wrapper.button-variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
html body .variable-items-wrapper .variable-item.button-variable-item {
    padding: 0.55rem 0.95rem !important;
    border: 1.5px solid var(--cit-border) !important;
    border-radius: 0.5rem !important;
    background: var(--cit-background) !important;
    color: var(--cit-navy) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
}
html body .variable-items-wrapper .variable-item.button-variable-item:hover {
    border-color: var(--cit-navy) !important;
}
html body .variable-items-wrapper .variable-item.button-variable-item.selected {
    border-color: var(--cit-orange) !important;
    background: rgba(242, 101, 34, 0.06) !important;
    color: var(--cit-navy) !important;
}
html body .variable-items-wrapper .variable-item.button-variable-item.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
}
html body .variable-items-wrapper .variable-item.button-variable-item .variable-item-contents,
html body .variable-items-wrapper .variable-item.button-variable-item .variable-item-span-button {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
}

/* ============================================================
   VARIABLE PRODUCT — premium visual pass (v0.20.5)
   - Hide WC variation description (trailing copy in buy box)
   - Color swatches as real colour circles
   - Storage chips bigger/clearer
   - Condition cards more polished
   - Buy-box card elevated, sticky, premium
   ============================================================ */

/* 1. Hide variation description / fragments that trail down the buy box */
html body .cit-product-summary-variable .woocommerce-variation-description,
html body .cit-product-summary-variable .woocommerce-variation-availability,
html body .cit-product-summary-variable .single_variation .stock,
html body .cit-product-summary-variable .woocommerce-variation > *:not(.woocommerce-variation-price) {
    display: none !important;
}

/* 2. SPACING — give the variations column room to breathe */
html body .cit-product-summary-variable .variations tr {
    margin-bottom: 1.75rem !important;
}
html body .cit-product-summary-variable .variations th label {
    font-size: 0.6875rem !important;
    color: var(--cit-text-muted) !important;
    margin-bottom: 0.65rem !important;
}

/* 3. STORAGE / general button swatches — larger, premium */
html body .variable-items-wrapper .variable-item.button-variable-item {
    min-width: 64px !important;
    min-height: 44px !important;
    padding: 0.7rem 1.1rem !important;
    border: 2px solid var(--cit-border) !important;
    border-radius: 0.625rem !important;
    background: var(--cit-background) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--cit-navy) !important;
    box-shadow: none !important;
    transition: all 0.18s ease !important;
}
html body .variable-items-wrapper .variable-item.button-variable-item:hover {
    border-color: var(--cit-navy) !important;
    transform: translateY(-1px);
}
html body .variable-items-wrapper .variable-item.button-variable-item.selected {
    border-color: var(--cit-orange) !important;
    background: var(--cit-background) !important;
    box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.18) !important;
}

/* 4. COLOUR SWATCHES — true colour circles for known names */
html body .variable-item.button-variable-item-black,
html body .variable-item.button-variable-item-white,
html body .variable-item.button-variable-item-pink,
html body .variable-item.button-variable-item-teal,
html body .variable-item.button-variable-item-ultramarine,
html body .variable-item.button-variable-item-blue,
html body .variable-item.button-variable-item-red,
html body .variable-item.button-variable-item-green,
html body .variable-item.button-variable-item-gold,
html body .variable-item.button-variable-item-rose-gold,
html body .variable-item.button-variable-item-silver,
html body .variable-item.button-variable-item-grey,
html body .variable-item.button-variable-item-space-grey,
html body .variable-item.button-variable-item-graphite,
html body .variable-item.button-variable-item-yellow,
html body .variable-item.button-variable-item-purple,
html body .variable-item.button-variable-item-natural,
html body .variable-item.button-variable-item-starlight,
html body .variable-item.button-variable-item-midnight {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid var(--cit-border) !important;
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}
html body .variable-item.button-variable-item-black { background: #1a1a1a !important; }
html body .variable-item.button-variable-item-white { background: #FFFFFF !important; border-color: #d1d5db !important; }
html body .variable-item.button-variable-item-pink { background: #f9a8d4 !important; }
html body .variable-item.button-variable-item-teal { background: #5eead4 !important; }
html body .variable-item.button-variable-item-ultramarine { background: #4338ca !important; }
html body .variable-item.button-variable-item-blue { background: #3b82f6 !important; }
html body .variable-item.button-variable-item-red { background: #ef4444 !important; }
html body .variable-item.button-variable-item-green { background: #10b981 !important; }
html body .variable-item.button-variable-item-gold { background: #d4af37 !important; }
html body .variable-item.button-variable-item-rose-gold { background: #e0b9a8 !important; }
html body .variable-item.button-variable-item-silver { background: #c0c0c0 !important; }
html body .variable-item.button-variable-item-grey,
html body .variable-item.button-variable-item-space-grey { background: #4b5563 !important; }
html body .variable-item.button-variable-item-graphite { background: #2c2c2c !important; }
html body .variable-item.button-variable-item-yellow { background: #fde047 !important; }
html body .variable-item.button-variable-item-purple { background: #a855f7 !important; }
html body .variable-item.button-variable-item-natural { background: #e8dccc !important; }
html body .variable-item.button-variable-item-starlight { background: #f3eee5 !important; border-color: #d1d5db !important; }
html body .variable-item.button-variable-item-midnight { background: #1f2937 !important; }

/* Hide inner spans on colour circles so text doesnt show */
html body .variable-item.button-variable-item[class*="-black"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-white"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-pink"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-teal"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-ultramarine"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-blue"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-red"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-green"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-gold"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-silver"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-grey"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-purple"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-yellow"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-natural"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-starlight"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-midnight"] .variable-item-contents,
html body .variable-item.button-variable-item[class*="-graphite"] .variable-item-contents {
    display: none !important;
}

/* Selected colour circle — orange ring outside */
html body .variable-item.button-variable-item[class*="-black"].selected,
html body .variable-item.button-variable-item[class*="-white"].selected,
html body .variable-item.button-variable-item[class*="-pink"].selected,
html body .variable-item.button-variable-item[class*="-teal"].selected,
html body .variable-item.button-variable-item[class*="-ultramarine"].selected,
html body .variable-item.button-variable-item[class*="-blue"].selected,
html body .variable-item.button-variable-item[class*="-red"].selected,
html body .variable-item.button-variable-item[class*="-green"].selected,
html body .variable-item.button-variable-item[class*="-gold"].selected,
html body .variable-item.button-variable-item[class*="-silver"].selected,
html body .variable-item.button-variable-item[class*="-grey"].selected,
html body .variable-item.button-variable-item[class*="-purple"].selected,
html body .variable-item.button-variable-item[class*="-yellow"].selected,
html body .variable-item.button-variable-item[class*="-natural"].selected,
html body .variable-item.button-variable-item[class*="-starlight"].selected,
html body .variable-item.button-variable-item[class*="-midnight"].selected,
html body .variable-item.button-variable-item[class*="-graphite"].selected {
    border-color: #FFFFFF !important;
    box-shadow: 0 0 0 2px var(--cit-orange) !important;
    transform: scale(1.08) !important;
}

/* 5. CONDITION / STATE swatches — turn into mini cards with battery hints */
html body .variable-item.button-variable-item-like-new,
html body .variable-item.button-variable-item-excellent,
html body .variable-item.button-variable-item-very-good,
html body .variable-item.button-variable-item-good,
html body .variable-item.button-variable-item-fair,
html body .variable-item.button-variable-item-grade-a,
html body .variable-item.button-variable-item-grade-b,
html body .variable-item.button-variable-item-grade-c {
    flex: 1 1 0 !important;
    min-width: 90px !important;
    padding: 0.85rem 0.65rem !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

/* 6. BUY-BOX RIGHT COLUMN — premium card with sticky shadow */
html body .cit-product-summary-variable .variations_form .single_variation_wrap {
    background: var(--cit-background) !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 8px 24px rgba(15, 34, 56, 0.06) !important;
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

/* Best offer badge above price */
html body .cit-product-summary-variable .single_variation_wrap::before {
    content: "Best offer";
    display: inline-block;
    background: var(--cit-orange);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    align-self: flex-start;
}

/* Variation price — bigger, premium */
html body .cit-product-summary-variable .single_variation .woocommerce-variation-price .price,
html body .cit-product-summary-variable .single_variation > .price,
html body .cit-product-summary-variable .single_variation .price {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: var(--cit-navy) !important;
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 0 0.5rem 0 !important;
}

/* Add to cart row — premium pill button with cart icon */
html body .cit-product-summary-variable .variations_button {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
}
html body .cit-product-summary-variable .variations_button .qty {
    width: 64px !important;
    height: 54px !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 0.625rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 !important;
}
html body .cit-product-summary-variable .variations_button .single_add_to_cart_button {
    flex: 1 !important;
    height: 54px !important;
    background: var(--cit-orange) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0.625rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(242, 101, 34, 0.30) !important;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
html body .cit-product-summary-variable .variations_button .single_add_to_cart_button:hover {
    background: #d8521b !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(242, 101, 34, 0.40) !important;
}
html body .cit-product-summary-variable .variations_button .single_add_to_cart_button::before {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4h2l2.4 12.2a1 1 0 0 0 1 .8h9.8a1 1 0 0 0 1-.8L21 8H6'/><circle cx='9' cy='21' r='1.5' fill='white'/><circle cx='18' cy='21' r='1.5' fill='white'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/* Trust microcopy under cart button */
html body .cit-product-summary-variable .single_variation_wrap::after {
    content: "✓ Free shipping over €100   ·   ✓ 14-day returns   ·   ✓ 12-month warranty";
    display: block;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--cit-text-muted);
    text-align: center;
    line-height: 1.5;
}

/* ============================================================
   VARIABLE PRODUCT — reliable 3-col with custom form override
   (v0.20.6) variable.php now wraps dropdowns + cart in their
   own col divs so we can grid-position them reliably.
   ============================================================ */

/* Override prior display:contents approach */
html body .cit-product-summary-variable .variations_form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    margin: 0 !important;
    width: 100% !important;
}
html body .cit-product-summary-variable .cit-variations-col-left { grid-column: 1 !important; }
html body .cit-product-summary-variable .cit-variations-col-right { grid-column: 2 !important; }

/* Override the prior placement rules on .variations and .single_variation_wrap
   (they no longer need to be grid items themselves — wrapper divs handle it) */
html body .cit-product-summary-variable .variations { grid-column: auto !important; }
html body .cit-product-summary-variable .single_variation_wrap { grid-column: auto !important; }

/* COMPACT variations — get the cart above the fold */
html body .cit-product-summary-variable .variations tr {
    margin-bottom: 1rem !important;
}
html body .cit-product-summary-variable .variations th label {
    margin-bottom: 0.4rem !important;
}

/* RIGHT col is sticky so cart stays visible while scrolling variations */
html body .cit-product-summary-variable .cit-variations-col-right {
    position: sticky;
    top: 1.5rem;
    align-self: flex-start;
}
html body .cit-product-summary-variable .single_variation_wrap {
    position: static !important;
}

/* Show a placeholder cart panel BEFORE a variation is selected
   (single_variation is hidden by WC until full selection). */
html body .cit-product-summary-variable .cit-variations-col-right::before {
    content: "Choose your options";
    display: block;
    background: var(--cit-orange);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    width: max-content;
}

/* When a variation is selected, swap the badge text */
html body .cit-product-summary-variable .single_variation:not(:empty) ~ * .cit-variations-col-right::before,
html body .cit-product-summary-variable .variations_form.cit-variation-selected .cit-variations-col-right::before {
    content: "Best offer";
}

/* Disable old conflicting rule that set .single_variation_wrap as a flex column with sticky */
html body .cit-product-summary-variable .variations_form .single_variation_wrap {
    position: static !important;
    align-self: auto !important;
}

/* ============================================================
   VARIABLE PRODUCT — fix layout + colour swatch specificity
   (v0.20.7) Summary becomes flex column. Form is the 2-col grid.
   ============================================================ */

/* RESET: summary is flex column, NOT grid */
html body .cit-product-summary-variable {
    grid-column: 2 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    grid-template-columns: none !important;
    position: static !important;
}

/* Remove any grid placement on summary children — flex handles them */
html body .cit-product-summary-variable > * {
    grid-column: auto !important;
}

/* Add-to-cart wrapper takes full width, no internal grid */
html body .cit-product-summary-variable .cit-product-add-to-cart {
    width: 100% !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-column: auto !important;
}

/* THE form is the 2-col grid (left = dropdowns, right = price+cart) */
html body .cit-variations-form,
html body form.cit-variations-form,
html body .cit-product-summary-variable form.variations_form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-items: flex-start !important;
}

html body .cit-variations-col-left {
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
}
html body .cit-variations-col-right {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    position: sticky;
    top: 1.5rem;
    align-self: flex-start;
}

/* ============================================================
   COLOUR SWATCHES — fixed specificity (v0.20.7)
   Prefix with .variable-items-wrapper to beat general button rule.
   ============================================================ */
html body .variable-items-wrapper .variable-item.button-variable-item-black,
html body .variable-items-wrapper .variable-item.button-variable-item-white,
html body .variable-items-wrapper .variable-item.button-variable-item-pink,
html body .variable-items-wrapper .variable-item.button-variable-item-teal,
html body .variable-items-wrapper .variable-item.button-variable-item-ultramarine,
html body .variable-items-wrapper .variable-item.button-variable-item-blue,
html body .variable-items-wrapper .variable-item.button-variable-item-red,
html body .variable-items-wrapper .variable-item.button-variable-item-green,
html body .variable-items-wrapper .variable-item.button-variable-item-gold,
html body .variable-items-wrapper .variable-item.button-variable-item-rose-gold,
html body .variable-items-wrapper .variable-item.button-variable-item-silver,
html body .variable-items-wrapper .variable-item.button-variable-item-grey,
html body .variable-items-wrapper .variable-item.button-variable-item-space-grey,
html body .variable-items-wrapper .variable-item.button-variable-item-graphite,
html body .variable-items-wrapper .variable-item.button-variable-item-yellow,
html body .variable-items-wrapper .variable-item.button-variable-item-purple,
html body .variable-items-wrapper .variable-item.button-variable-item-natural,
html body .variable-items-wrapper .variable-item.button-variable-item-starlight,
html body .variable-items-wrapper .variable-item.button-variable-item-midnight {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid var(--cit-border) !important;
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
html body .variable-items-wrapper .button-variable-item-black { background-color: #1a1a1a !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-white { background-color: #FFFFFF !important; background-image: none !important; border-color: #d1d5db !important; }
html body .variable-items-wrapper .button-variable-item-pink { background-color: #f9a8d4 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-teal { background-color: #5eead4 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-ultramarine { background-color: #4338ca !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-blue { background-color: #3b82f6 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-red { background-color: #ef4444 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-green { background-color: #10b981 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-gold { background-color: #d4af37 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-rose-gold { background-color: #e0b9a8 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-silver { background-color: #c0c0c0 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-grey,
html body .variable-items-wrapper .button-variable-item-space-grey { background-color: #4b5563 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-graphite { background-color: #2c2c2c !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-yellow { background-color: #fde047 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-purple { background-color: #a855f7 !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-natural { background-color: #e8dccc !important; background-image: none !important; }
html body .variable-items-wrapper .button-variable-item-starlight { background-color: #f3eee5 !important; background-image: none !important; border-color: #d1d5db !important; }
html body .variable-items-wrapper .button-variable-item-midnight { background-color: #1f2937 !important; background-image: none !important; }

/* Hide the inner content/text on colour swatches */
html body .variable-items-wrapper .button-variable-item[class*="-black"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-white"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-pink"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-teal"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-ultramarine"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-blue"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-red"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-green"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-gold"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-silver"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-grey"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-purple"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-yellow"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-natural"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-starlight"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-midnight"] > *,
html body .variable-items-wrapper .button-variable-item[class*="-graphite"] > * {
    display: none !important;
}

/* Selected colour swatch — orange ring outside */
html body .variable-items-wrapper .button-variable-item[class*="-black"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-white"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-pink"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-teal"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-ultramarine"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-blue"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-red"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-green"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-gold"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-silver"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-grey"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-purple"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-yellow"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-natural"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-starlight"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-midnight"].selected,
html body .variable-items-wrapper .button-variable-item[class*="-graphite"].selected {
    border-color: #FFFFFF !important;
    box-shadow: 0 0 0 2px var(--cit-orange) !important;
    transform: scale(1.08) !important;
}

/* Responsive: stack at <960 */
@media (max-width: 960px) {
    html body .cit-variations-form,
    html body form.cit-variations-form { grid-template-columns: 1fr !important; }
    html body .cit-variations-col-right { position: static; }
}

/* ============================================================
   VARIATION SWATCHES — prevent wrapping inside swatch buttons
   (v0.20.12) Stop text from breaking across lines.
   ============================================================ */

/* Wrapper holds swatches in a flex row that wraps cleanly */
html body .variable-items-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Button swatches — NO text wrapping inside the button */
html body .variable-items-wrapper .variable-item.button-variable-item {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    flex: 0 0 auto !important;
    line-height: 1.1 !important;
}

/* Inner contents should not wrap either */
html body .variable-items-wrapper .variable-item .variable-item-contents,
html body .variable-items-wrapper .variable-item .variable-item-span,
html body .variable-items-wrapper .variable-item .variable-item-span-button {
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Hide the "Choose Your Options" placeholder once user has started selecting
   (any swatch with .selected class means selection is in progress) */
html body .cit-product-summary-variable:has(.variable-item.selected) .cit-variations-col-right::before {
    content: "Best offer" !important;
}

/* ============================================================
   VARIABLE PRODUCT — alignment + duplicate badge fix (v0.20.13)
   ============================================================ */

/* Force variation table + every cell to be left-aligned, full-width */
html body .cit-product-summary-variable .variations,
html body .cit-product-summary-variable .variations tbody,
html body .cit-product-summary-variable .variations tr,
html body .cit-product-summary-variable .variations th,
html body .cit-product-summary-variable .variations td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}
html body .cit-product-summary-variable .variations tr {
    margin-bottom: 1.25rem !important;
}
html body .cit-product-summary-variable .variations th.label,
html body .cit-product-summary-variable .variations th.label label {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
}
html body .cit-product-summary-variable .variations td.value {
    text-align: left !important;
    width: 100% !important;
}

/* Wrapper around swatches — left-aligned, full width */
html body .cit-product-summary-variable .variable-items-wrapper {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin-left: 0 !important;
}

/* Left col itself — make sure it fills full width with no centering */
html body .cit-variations-col-left {
    text-align: left !important;
    width: 100% !important;
}

/* Remove the DUPLICATE "Best offer" badge — keep only the one inside the cart card */
html body .cit-product-summary-variable .cit-variations-col-right::before {
    display: none !important;
    content: none !important;
}

/* Cart button — shrink text/padding to fit narrower cart column */
html body .cit-product-summary-variable .variations_button .single_add_to_cart_button {
    font-size: 0.9375rem !important;
    padding: 0 1rem !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
html body .cit-product-summary-variable .variations_button .qty {
    width: 52px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   VARIATION DROPDOWNS — premium styling for standard WC selects
   (v0.20.15) Replaces Variation Swatches Pro buttons. Clean
   Apple/Refurbed-style selects.
   ============================================================ */

/* Force variations table cells to flow vertically and fill width */
html body .cit-product-summary-variable .variations,
html body .cit-product-summary-variable .variations tbody,
html body .cit-product-summary-variable .variations tr,
html body .cit-product-summary-variable .variations th,
html body .cit-product-summary-variable .variations td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
html body .cit-product-summary-variable .variations tr {
    margin-bottom: 1.25rem !important;
}

/* Attribute label */
html body .cit-product-summary-variable .variations th.label label,
html body .cit-product-summary-variable .variations th label {
    display: block !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: var(--cit-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.5rem !important;
    text-align: left !important;
}

/* The actual <select> — premium Apple/Refurbed-style */
html body .cit-product-summary-variable .variations select,
html body .cit-product-summary-variable .variations td select {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    padding: 0 2.5rem 0 1rem !important;
    border: 1.5px solid var(--cit-border) !important;
    border-radius: 0.625rem !important;
    background-color: var(--cit-background) !important;
    color: var(--cit-navy) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F2238' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: none !important;
}
html body .cit-product-summary-variable .variations select:hover,
html body .cit-product-summary-variable .variations select:focus {
    border-color: var(--cit-navy) !important;
    outline: none !important;
}

/* ============================================================
   Cart page — Shopify-style two-column layout
   v0.29.3
   ============================================================ */

/* Force the cart page out of our theme's 760px reading-width content shell
   so the 1fr + 380px grid has real estate to work with.
   Actual ancestor chain on staging:
     .cit-container (1320px) > article.cit-page (1280px)
       > .cit-page-content (760px CAP) > .woocommerce > .cit-cart-wrap
   We override the cap on woocommerce-cart + woocommerce-checkout body classes. */
body.woocommerce-cart .cit-page-content,
body.woocommerce-checkout .cit-page-content,
body.woocommerce-cart article.cit-page,
body.woocommerce-checkout article.cit-page,
body.woocommerce-cart .cit-page-content > .woocommerce,
body.woocommerce-checkout .cit-page-content > .woocommerce,
body.woocommerce-cart .kadence-woo-cart-form-wrap,
body.woocommerce-checkout .kadence-woo-cart-form-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide our theme's auto-generated page title block — we render "Your Cart"
   inside .cit-cart-wrap and don't want a duplicate. */
body.woocommerce-cart .cit-page-header,
body.woocommerce-checkout .cit-page-header,
body.woocommerce-cart .cit-page-title,
body.woocommerce-checkout .cit-page-title {
    display: none !important;
}

/* Kill the Kadence-injected "Cart Summary" h2 that lands inside our form. */
body.woocommerce-cart .cit-cart-wrap .cart-summary,
body.woocommerce-cart .cit-cart-wrap form.woocommerce-cart-form > h2,
body.woocommerce-cart .cit-cart-wrap > h2:not(.cit-cart-summary__title):not(.cit-cart-empty__title):not(.cit-cart-crosssells__title) {
    display: none !important;
}

/* Belt-and-braces: if any Kadence wrapper sneaks in elsewhere, kill its cap too. */
body.woocommerce-cart .entry-content,
body.woocommerce-cart .entry-content-wrap,
body.woocommerce-cart .content-container,
body.woocommerce-cart .content-bg,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .entry-content-wrap,
body.woocommerce-checkout .content-container,
body.woocommerce-checkout .content-bg {
    max-width: 100% !important;
    width: 100% !important;
}

.cit-cart-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    color: var(--cit-navy);
}

/* ----- Cart header ----- */
.cit-cart-header {
    border-bottom: 1px solid #E6E9EE;
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
}
.cit-cart-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.cit-cart-header__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cit-navy);
    letter-spacing: -0.01em;
    margin: 0;
}
.cit-cart-header__continue {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--cit-navy);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}
.cit-cart-header__continue:hover {
    background-color: #F4F6F9;
    color: var(--cit-orange);
}

/* ----- Two-column grid ----- */
.cit-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 2.5rem;
    align-items: start;
}

/* ----- Line items column ----- */
.cit-cart-items {
    min-width: 0;
}
.cit-cart-items__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E6E9EE;
    margin-bottom: 0.5rem;
}
.cit-cart-items__count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cit-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cit-cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cit-cart-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto 24px;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid #EEF0F4;
    position: relative;
}
.cit-cart-line:last-child {
    border-bottom: none;
}

/* Product thumb */
.cit-cart-line__thumb {
    width: 96px;
    height: 96px;
    background-color: #F7F8FA;
    border: 1px solid #EDEFF3;
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cit-cart-line__thumb img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

/* Meta (title + variation + unit price) */
.cit-cart-line__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cit-cart-line__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cit-navy);
}
.cit-cart-line__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.cit-cart-line__title a:hover {
    color: var(--cit-orange);
}
.cit-cart-line__title .variation,
.cit-cart-line__title .wc-item-meta {
    list-style: none;
    margin: 0.375rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--cit-text-muted);
}
.cit-cart-line__title .variation dt,
.cit-cart-line__title .wc-item-meta-label {
    display: inline;
    font-weight: 500;
    margin-right: 0.25rem;
}
.cit-cart-line__title .variation dd,
.cit-cart-line__title .wc-item-meta-value {
    display: inline;
    margin: 0 0.75rem 0 0;
}
.cit-cart-line__title .variation dd p,
.cit-cart-line__title .wc-item-meta-value p {
    display: inline;
    margin: 0;
}
.cit-cart-line__title .backorder_notification {
    font-size: 0.75rem;
    color: var(--cit-orange-dark);
    margin: 0.5rem 0 0;
}
.cit-cart-line__unit-price {
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
    font-weight: 500;
}
.cit-cart-line__unit-price del {
    color: #9AA3AE;
    margin-right: 0.375rem;
}
.cit-cart-line__unit-price ins {
    background: none;
    text-decoration: none;
    color: var(--cit-orange-dark);
}

/* Quantity stepper — re-skin Woo's quantity input */
.cit-cart-line__qty .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #D6DAE1;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #FFFFFF;
}
.cit-cart-line__qty .quantity .qty {
    width: 44px;
    height: 36px;
    border: none;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cit-navy);
    background-color: transparent;
    -moz-appearance: textfield;
}
.cit-cart-line__qty .quantity .qty::-webkit-outer-spin-button,
.cit-cart-line__qty .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cit-cart-line__qty .quantity .qty:focus {
    outline: none;
    background-color: #F4F6F9;
}

/* Subtotal */
.cit-cart-line__subtotal {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy);
    text-align: right;
    min-width: 72px;
    white-space: nowrap;
}
.cit-cart-line__subtotal del {
    color: #9AA3AE;
    font-weight: 500;
    margin-right: 0.375rem;
}

/* Remove X */
.cit-cart-line__remove {
    align-self: start;
    justify-self: end;
}
.cit-cart-line__remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    color: #9AA3AE;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.cit-cart-line__remove-btn:hover {
    background-color: #FEEFE9;
    color: #C44E15;
}

/* Hidden actions row (we need update_cart for WC validation) */
.cit-cart-actions {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Trust strip under items */
.cit-cart-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    margin-top: 1.5rem;
    background-color: #F7F8FA;
    border-radius: 0.875rem;
}
.cit-cart-trust__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cit-text-muted);
}
.cit-cart-trust__item svg {
    color: var(--cit-orange);
    flex-shrink: 0;
}

/* ----- Summary column (sticky) ----- */
.cit-cart-summary {
    position: sticky;
    top: 1.5rem;
}
.cit-cart-summary__inner {
    background-color: #FFFFFF;
    border: 1px solid #E6E9EE;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 34, 56, 0.04);
}
/* Trustpilot MicroCombo at the top of the summary card */
.cit-cart-summary__trustpilot {
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #EEF0F4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}
.cit-cart-summary__trustpilot .trustpilot-widget {
    width: 100%;
}

.cit-cart-summary__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 1.25rem;
}

/* Discount code */
.cit-cart-coupon {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.cit-cart-coupon__input {
    flex: 1;
    height: 44px;
    padding: 0 0.875rem;
    border: 1px solid #D6DAE1;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    background-color: #FFFFFF;
    color: var(--cit-navy);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cit-cart-coupon__input:focus {
    outline: none;
    border-color: var(--cit-navy);
    box-shadow: 0 0 0 3px rgba(15, 34, 56, 0.08);
}
.cit-cart-coupon__btn {
    height: 44px;
    padding: 0 1.125rem;
    border: 1px solid var(--cit-navy);
    background-color: #FFFFFF;
    color: var(--cit-navy);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cit-cart-coupon__btn:hover {
    background-color: var(--cit-navy);
    color: #FFFFFF;
}

/* Totals rows */
.cit-cart-totals {
    margin-bottom: 1.25rem;
}
.cit-cart-totals__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--cit-navy);
}
.cit-cart-totals__label {
    color: var(--cit-text-muted);
    font-weight: 500;
}
.cit-cart-totals__value {
    font-weight: 600;
    color: var(--cit-navy);
}
.cit-cart-totals__value--muted {
    color: var(--cit-text-muted);
    font-weight: 500;
    font-size: 0.875rem;
}
.cit-cart-totals__row--coupon .cit-cart-totals__value {
    color: var(--cit-orange-dark);
}
.cit-cart-totals__row--coupon a {
    color: var(--cit-text-muted);
    font-size: 0.75rem;
    text-decoration: none;
    margin-left: 0.5rem;
}
.cit-cart-totals__row--coupon a:hover {
    color: var(--cit-orange);
}
.cit-cart-totals__row--total {
    border-top: 1px solid #E6E9EE;
    margin-top: 0.5rem;
    padding-top: 1rem;
}
.cit-cart-totals__row--total .cit-cart-totals__label {
    color: var(--cit-navy);
    font-weight: 700;
    font-size: 1rem;
}
.cit-cart-totals__value--total {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--cit-navy);
}
.cit-cart-totals__tax-note {
    font-size: 0.75rem;
    color: var(--cit-text-muted);
    margin: 0.25rem 0 0;
    text-align: right;
}

/* Big Checkout CTA (override Woo's defaults) */
.cit-cart-summary .checkout-button,
.cit-cart-checkout-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 56px !important;
    padding: 0 1.5rem !important;
    background-color: var(--cit-orange) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0.625rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(196, 78, 21, 0.2) !important;
}
.cit-cart-summary .checkout-button:hover,
.cit-cart-checkout-btn:hover {
    background-color: var(--cit-orange-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(196, 78, 21, 0.25) !important;
}
.cit-cart-summary .checkout-button:active,
.cit-cart-checkout-btn:active {
    transform: translateY(1px);
}
.cit-cart-summary .wc-proceed-to-checkout {
    padding: 0;
    margin: 0;
}

/* Small notes under CTA */
.cit-cart-summary__small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: 0.875rem 0 0;
    font-size: 0.75rem;
    color: var(--cit-text-muted);
    text-align: center;
}
.cit-cart-summary__small svg {
    color: var(--cit-text-muted);
    flex-shrink: 0;
}

/* Trust reasons block — under Checkout button */
.cit-cart-summary__reasons {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0.875rem 0.875rem 0.625rem;
    background-color: #F7F8FA;
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.cit-cart-summary__reason {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}
.cit-cart-summary__reason-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--cit-orange);
    border: 1px solid #EAEDF1;
}
.cit-cart-summary__reason-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    line-height: 1.35;
    min-width: 0;
}
.cit-cart-summary__reason-text strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cit-navy);
}
.cit-cart-summary__reason-text span {
    font-size: 0.75rem;
    color: var(--cit-text-muted);
    font-weight: 400;
}

/* Payment badges */
.cit-cart-summary__payments {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #EEF0F4;
    text-align: center;
}
.cit-cart-summary__payments > span {
    display: block;
    font-size: 0.6875rem;
    color: var(--cit-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.cit-cart-summary__pay-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
}
.cit-pay-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 0.5rem;
    background-color: #F7F8FA;
    border: 1px solid #EAEDF1;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #5B6772;
    letter-spacing: 0.01em;
}

/* ----- Empty cart ----- */
.cit-cart-empty {
    max-width: 560px;
    margin: 3rem auto 5rem;
    padding: 0 1.25rem;
    text-align: center;
}
.cit-cart-empty__icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    background-color: #F7F8FA;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cit-navy);
}
.cit-cart-empty__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}
.cit-cart-empty__sub {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cit-text-muted);
    margin: 0 0 2rem;
}
.cit-cart-empty__actions {
    margin-bottom: 2.5rem;
}
.cit-cart-empty__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 52px;
    padding: 0 1.75rem;
    background-color: var(--cit-orange);
    color: #FFFFFF;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(196, 78, 21, 0.2);
}
.cit-cart-empty__cta:hover {
    background-color: var(--cit-orange-dark);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(196, 78, 21, 0.25);
}
.cit-cart-empty__shortcuts-label {
    display: block;
    font-size: 0.75rem;
    color: var(--cit-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.875rem;
}
.cit-cart-empty__shortcuts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.cit-cart-empty__shortcut {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 0.875rem;
    border: 1px solid #D6DAE1;
    border-radius: 999px;
    color: var(--cit-navy);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.cit-cart-empty__shortcut:hover {
    border-color: var(--cit-navy);
    background-color: var(--cit-navy);
    color: #FFFFFF;
}

/* ----- Cross-sells ----- */
.cit-cart-crosssells {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #E6E9EE;
}
.cit-cart-crosssells__head {
    text-align: center;
    margin-bottom: 2rem;
}
.cit-cart-crosssells__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.cit-cart-crosssells__sub {
    font-size: 0.9375rem;
    color: var(--cit-text-muted);
    margin: 0;
}
.cit-cart-crosssells__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

/* ----- Notices on the cart page ----- */
.cit-cart-wrap .woocommerce-notices-wrapper {
    margin-bottom: 1.5rem;
}
.cit-cart-wrap .woocommerce-message,
.cit-cart-wrap .woocommerce-info,
.cit-cart-wrap .woocommerce-error {
    background-color: #F4F6F9;
    border-left: 3px solid var(--cit-navy);
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    font-size: 0.9375rem;
    color: var(--cit-navy);
}
.cit-cart-wrap .woocommerce-error {
    border-left-color: #C44E15;
    background-color: #FEEFE9;
    color: #7A2F0B;
}

/* ----- Mobile sticky checkout bar ----- */
.cit-cart-mobile-bar {
    display: none;
}

/* ----- Hide WC's default cart-collaterals shipping calculator block ----- */
/* Our summary card already covers shipping at checkout — kill the duplicate. */
.cit-cart-wrap .cart-collaterals,
.cit-cart-wrap .cart_totals {
    display: none !important;
}

/* ============================================================
   Responsive — cart
   ============================================================ */
@media (max-width: 1024px) {
    .cit-cart-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    .cit-cart-summary {
        position: static;
    }
    .cit-cart-trust {
        margin-bottom: 1rem;
    }
}

@media (max-width: 640px) {
    .cit-cart-wrap {
        padding: 1.25rem 1rem 6rem; /* extra bottom padding for sticky bar */
    }
    .cit-cart-header__title {
        font-size: 1.5rem;
    }
    .cit-cart-line {
        grid-template-columns: 72px minmax(0, 1fr) 24px;
        column-gap: 0.875rem;
        row-gap: 0.5rem;
        padding: 1.125rem 0;
    }
    .cit-cart-line__thumb {
        width: 72px;
        height: 72px;
        border-radius: 0.625rem;
    }
    .cit-cart-line__meta {
        grid-column: 2;
    }
    .cit-cart-line__remove {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }
    .cit-cart-line__qty {
        grid-column: 1 / span 2;
        margin-top: 0.5rem;
    }
    .cit-cart-line__subtotal {
        grid-column: 3;
        grid-row: 2;
        font-size: 0.9375rem;
        text-align: right;
    }
    .cit-cart-line__title {
        font-size: 0.9375rem;
    }
    .cit-cart-trust {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0.5rem;
    }
    .cit-cart-summary__inner {
        padding: 1.375rem 1.25rem;
    }

    /* Sticky mobile checkout bar */
    .cit-cart-mobile-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 0.75rem 1rem;
        background-color: #FFFFFF;
        border-top: 1px solid #E6E9EE;
        box-shadow: 0 -4px 16px rgba(15, 34, 56, 0.08);
        align-items: center;
        justify-content: space-between;
        gap: 0.875rem;
    }
    .cit-cart-mobile-bar__total {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
    }
    .cit-cart-mobile-bar__label {
        font-size: 0.6875rem;
        color: var(--cit-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
    }
    .cit-cart-mobile-bar__amount {
        font-size: 1.125rem;
        font-weight: 800;
        color: var(--cit-navy);
        line-height: 1.1;
    }
    .cit-cart-mobile-bar__btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        height: 48px;
        padding: 0 1.25rem;
        background-color: var(--cit-orange);
        color: #FFFFFF;
        border-radius: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 1px 3px rgba(196, 78, 21, 0.25);
    }
    .cit-cart-mobile-bar__btn:hover,
    .cit-cart-mobile-bar__btn:focus {
        background-color: var(--cit-orange-dark);
        color: #FFFFFF;
    }
}

/* ============================================================
   Checkout page — Shopify-style two-column layout
   v0.30.1
   ============================================================ */

/* ----- Minimal header on checkout: hide the noisy chrome -----
   Actual class names (verified in browser): cit-trust-bar, cit-utility-bar,
   cit-primary-nav, cit-header-search, cit-header-actions. */
body.woocommerce-checkout .cit-trust-bar,
body.woocommerce-checkout .cit-utility-bar,
body.woocommerce-checkout #cit-primary-nav,
body.woocommerce-checkout .cit-primary-nav,
body.woocommerce-checkout .cit-header-search,
body.woocommerce-checkout .cit-header-actions,
body.woocommerce-checkout .cit-mobile-menu-toggle,
body.woocommerce-checkout .cit-mobile-nav {
    display: none !important;
}

/* Keep masthead, slim it down */
body.woocommerce-checkout #masthead.cit-site-header,
body.woocommerce-checkout .cit-main-header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E6E9EE !important;
    padding: 0.75rem 0 !important;
    min-height: 64px;
}
body.woocommerce-checkout .cit-main-header.cit-main-header-navy {
    background-color: #FFFFFF !important;
}
body.woocommerce-checkout .cit-main-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Inject "Secure checkout" badge into the header inner */
body.woocommerce-checkout .cit-main-header-inner::after {
    content: "🔒 Secure checkout";
    align-self: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cit-text-muted);
    letter-spacing: 0.01em;
    margin-left: auto;
}

/* Footer on checkout: collapse the columns, keep a slim bottom row only */
body.woocommerce-checkout .cit-footer-main,
body.woocommerce-checkout .cit-footer-grid,
body.woocommerce-checkout .cit-footer-brand,
body.woocommerce-checkout .cit-footer-nav,
body.woocommerce-checkout .cit-footer-trustpilot,
body.woocommerce-checkout .cit-footer-newsletter,
body.woocommerce-checkout .cit-footer-cta {
    display: none !important;
}
body.woocommerce-checkout .cit-site-footer {
    background-color: #FFFFFF !important;
    border-top: 1px solid #E6E9EE !important;
    padding: 0.875rem 0 !important;
}
body.woocommerce-checkout .cit-footer-bottom {
    color: var(--cit-text-muted) !important;
    background: transparent !important;
    text-align: center;
}

/* ----- Kill the "Have a coupon?" nag that WC outputs above the form -----
   It lives in <div class="woocommerce"> as a SIBLING of the form, so my
   .cit-checkout-form-scoped rule didn't match. */
body.woocommerce-checkout .woocommerce > .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce > .checkout_coupon,
body.woocommerce-checkout > .woocommerce > .woocommerce-info {
    display: none !important;
}

/* ----- Kill WC core's default float layout on #order_review and #customer_details -----
   WC's checkout.scss puts these in a 50/50 split via float; our grid handles
   layout, so we force them back to block-level full-width. */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both;
}

/* Belt-and-braces: also clear floats inside our summary card so siblings stack */
.cit-checkout-summary__sticky::after {
    content: "";
    display: block;
    clear: both;
}
.cit-checkout-summary__sticky > * {
    clear: both;
}

/* ----- Page wrap ----- */
.cit-checkout-form {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    color: var(--cit-navy);
}

.cit-checkout-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid #E6E9EE;
    flex-wrap: wrap;
}
.cit-checkout-step-header__title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cit-navy);
    letter-spacing: -0.01em;
}
.cit-checkout-step-header__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--cit-navy);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cit-checkout-step-header__back:hover {
    background-color: #F4F6F9;
    color: var(--cit-orange);
}

/* ----- Two-column grid ----- */
.cit-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 3rem;
    align-items: start;
}

/* ----- Left: form sections ----- */
.cit-checkout-main {
    min-width: 0;
}
.cit-checkout-section {
    margin-bottom: 2rem;
}
.cit-checkout-section__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.25rem;
}
.cit-checkout-section__sub {
    font-size: 0.875rem;
    color: var(--cit-text-muted);
    margin: 0 0 1.25rem;
}

/* ----- WooCommerce form fields, restyled ----- */
.cit-checkout-form .woocommerce-billing-fields,
.cit-checkout-form .woocommerce-shipping-fields {
    margin-top: 0;
}
.cit-checkout-form .woocommerce-billing-fields h3,
.cit-checkout-form .woocommerce-shipping-fields h3,
.cit-checkout-form .woocommerce-additional-fields h3 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cit-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1.25rem 0 1rem;
}
.cit-checkout-form .woocommerce-billing-fields > h3 {
    display: none; /* "Billing details" duplicates our "Your details" */
}
.cit-checkout-form .woocommerce-shipping-fields h3#ship-to-different-address {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1.5rem 0 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cit-navy);
}
.cit-checkout-form .woocommerce-shipping-fields h3#ship-to-different-address label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
}
.cit-checkout-form .woocommerce-shipping-fields h3#ship-to-different-address input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cit-orange);
}

.cit-checkout-form .form-row {
    margin: 0 0 0.875rem;
    padding: 0;
}
.cit-checkout-form .form-row label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cit-navy);
    margin-bottom: 0.375rem;
}
.cit-checkout-form .form-row .required {
    color: var(--cit-orange-dark);
    text-decoration: none;
    margin-left: 0.125rem;
}
.cit-checkout-form .form-row .optional {
    color: var(--cit-text-muted);
    font-weight: 400;
    font-size: 0.75rem;
}
.cit-checkout-form .form-row .input-text,
.cit-checkout-form .form-row textarea,
.cit-checkout-form .form-row select,
.cit-checkout-form .select2-container .select2-selection--single {
    width: 100% !important;
    height: 48px;
    padding: 0 0.875rem !important;
    border: 1px solid #D6DAE1 !important;
    border-radius: 0.5rem !important;
    font-size: 0.9375rem !important;
    background-color: #FFFFFF !important;
    color: var(--cit-navy) !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cit-checkout-form .form-row textarea {
    height: auto;
    min-height: 110px;
    padding: 0.75rem 0.875rem !important;
    resize: vertical;
}
.cit-checkout-form .form-row .input-text:focus,
.cit-checkout-form .form-row textarea:focus,
.cit-checkout-form .form-row select:focus {
    outline: none;
    border-color: var(--cit-navy) !important;
    box-shadow: 0 0 0 3px rgba(15, 34, 56, 0.08) !important;
}
.cit-checkout-form .form-row.woocommerce-invalid .input-text,
.cit-checkout-form .form-row.woocommerce-invalid textarea,
.cit-checkout-form .form-row.woocommerce-invalid select {
    border-color: #C44E15 !important;
    background-color: #FFF7F3 !important;
}
.cit-checkout-form .form-row.woocommerce-validated .input-text,
.cit-checkout-form .form-row.woocommerce-validated select {
    border-color: #C9D2DC !important;
}
/* Select2 visual parity */
.cit-checkout-form .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
}
.cit-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important;
    padding-left: 0 !important;
    color: var(--cit-navy);
}
.cit-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 8px !important;
}

/* Two-column form rows where WC uses form-row-first / form-row-last */
.cit-checkout-form .form-row-first,
.cit-checkout-form .form-row-last {
    width: calc(50% - 0.4375rem);
    display: inline-block;
    vertical-align: top;
}
.cit-checkout-form .form-row-first {
    margin-right: 0.875rem;
}
.cit-checkout-form .form-row-wide {
    width: 100%;
}
.cit-checkout-form .form-row.notes {
    margin-top: 0.5rem;
}

/* Email + phone label hint */
.cit-checkout-form #billing_email_field label::after,
.cit-checkout-form #billing_phone_field label::after {
    content: "";
}

/* Reorder: surface email first */
.cit-checkout-form .woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cit-checkout-form #billing_email_field {
    order: -2;
}
.cit-checkout-form #billing_phone_field {
    order: -1;
}

/* Login + coupon nags at the top of the form — hide (we expose coupon in summary) */
.cit-checkout-form .woocommerce-form-coupon-toggle,
.cit-checkout-form .checkout_coupon,
.cit-checkout-form .woocommerce-form-login-toggle + .woocommerce-info,
.cit-checkout-form > .woocommerce-info {
    display: none !important;
}

/* WC notices that DO need to surface — make them readable */
.cit-checkout-form .woocommerce-NoticeGroup,
.cit-checkout-form .woocommerce-error,
.cit-checkout-form .woocommerce-message {
    background-color: #FEEFE9;
    border-left: 3px solid #C44E15;
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    color: #7A2F0B;
    list-style: none;
}
.cit-checkout-form .woocommerce-message {
    background-color: #ECF8F0;
    border-left-color: #1B7E48;
    color: #134A2A;
}

/* ----- RIGHT: order summary ----- */
.cit-checkout-summary {
    position: relative;
}
.cit-checkout-summary__sticky {
    position: sticky;
    top: 1.5rem;
    background-color: #FFFFFF;
    border: 1px solid #E6E9EE;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 1px 3px rgba(15, 34, 56, 0.04);
}

.cit-checkout-summary__trustpilot {
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #EEF0F4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}
.cit-checkout-summary__trustpilot .trustpilot-widget {
    width: 100%;
}

.cit-checkout-summary__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 1rem;
}

/* Line items list */
.cit-checkout-review__lines {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.cit-checkout-review__line {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    column-gap: 0.875rem;
    align-items: center;
}
.cit-checkout-review__line-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    background-color: #F7F8FA;
    border: 1px solid #EDEFF3;
    border-radius: 0.625rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cit-checkout-review__line-thumb img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}
.cit-checkout-review__line-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: var(--cit-navy);
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
}
.cit-checkout-review__line-meta {
    min-width: 0;
}
.cit-checkout-review__line-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cit-navy);
    line-height: 1.35;
}
.cit-checkout-review__line-variation {
    font-size: 0.75rem;
    color: var(--cit-text-muted);
    margin-top: 0.125rem;
}
.cit-checkout-review__line-variation > dl,
.cit-checkout-review__line-variation > p {
    margin: 0;
}
.cit-checkout-review__line-subtotal {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cit-navy);
    text-align: right;
    white-space: nowrap;
}

/* Coupon input in summary */
.cit-checkout-review__coupon {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.75rem 0 0;
    border-top: 1px dashed #EEF0F4;
}
.cit-checkout-review__coupon-input {
    flex: 1;
    height: 40px;
    padding: 0 0.75rem;
    border: 1px solid #D6DAE1;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: #FFFFFF;
    color: var(--cit-navy);
}
.cit-checkout-review__coupon-input:focus {
    outline: none;
    border-color: var(--cit-navy);
    box-shadow: 0 0 0 3px rgba(15, 34, 56, 0.08);
}
.cit-checkout-review__coupon-btn {
    height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--cit-navy);
    background-color: #FFFFFF;
    color: var(--cit-navy);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cit-checkout-review__coupon-btn:hover {
    background-color: var(--cit-navy);
    color: #FFFFFF;
}
.cit-checkout-review__coupon-btn.is-loading {
    opacity: 0.6;
    cursor: wait;
}
.cit-checkout-review__coupon-msg {
    margin: 0 0 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}
.cit-checkout-review__coupon-msg.is-error {
    background-color: #FEEFE9;
    color: #7A2F0B;
}
.cit-checkout-review__coupon-msg.is-success {
    background-color: #ECF8F0;
    color: #134A2A;
}

/* Totals rows */
.cit-checkout-review__totals {
    margin: 0 0 1rem;
}
.cit-checkout-review__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4375rem 0;
    font-size: 0.875rem;
    color: var(--cit-navy);
}
.cit-checkout-review__row-label {
    color: var(--cit-text-muted);
    font-weight: 500;
}
.cit-checkout-review__row-value {
    font-weight: 600;
    color: var(--cit-navy);
}
.cit-checkout-review__row--total {
    border-top: 1px solid #E6E9EE;
    padding-top: 0.875rem;
    margin-top: 0.5rem;
}
.cit-checkout-review__row--total .cit-checkout-review__row-label {
    color: var(--cit-navy);
    font-weight: 700;
    font-size: 1rem;
}
.cit-checkout-review__row-value--total {
    font-size: 1.375rem;
    font-weight: 800;
}

/* WC shipping methods (in totals area) */
.cit-checkout-review__totals .shipping {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    border-bottom: none;
}
.cit-checkout-review__totals .shipping th,
.cit-checkout-review__totals .shipping td {
    display: block;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
}
.cit-checkout-review__totals .shipping th {
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}
.cit-checkout-review__totals ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.cit-checkout-review__totals ul#shipping_method li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #E6E9EE;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}
.cit-checkout-review__totals ul#shipping_method li label {
    margin: 0;
    flex: 1;
    cursor: pointer;
}

/* ----- Payment block ----- targets the DEFAULT WC payment markup
   because Kadence (or a plugin) hooks the payment render and we let it
   be the canonical one to avoid duplicates. */
.cit-checkout-summary__sticky #payment.woocommerce-checkout-payment {
    border-top: 1px solid #E6E9EE !important;
    padding: 1.25rem 0 0 !important;
    margin-top: 1rem !important;
    background: transparent !important;
}
/* "Payment" heading injected via pseudo-element on the payment block */
.cit-checkout-summary__sticky #payment.woocommerce-checkout-payment::before {
    content: "Payment";
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.25rem;
}
.cit-checkout-summary__sticky #payment.woocommerce-checkout-payment::after {
    content: "All transactions are secure and encrypted.";
    display: block;
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
    margin: 0 0 1rem;
}

/* Payment method picker — turn each gateway into a card */
.cit-checkout-summary__sticky #payment ul.wc_payment_methods {
    list-style: none;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    background: transparent !important;
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method {
    background-color: #FFFFFF !important;
    border: 1px solid #E6E9EE !important;
    border-radius: 0.625rem;
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    padding: 0 !important;
    margin: 0 !important;
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method > label {
    display: flex !important;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem !important;
    margin: 0 !important;
    cursor: pointer;
    font-size: 0.9375rem !important;
    font-weight: 600;
    color: var(--cit-navy);
    line-height: 1.3;
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--cit-orange);
    flex-shrink: 0;
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method img {
    height: 24px;
    width: auto;
    margin-left: auto;
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
    border-color: var(--cit-navy) !important;
    background-color: #F7F8FA !important;
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method .payment_box {
    background-color: #F7F8FA !important;
    border-top: 1px solid #E6E9EE !important;
    padding: 0.875rem 0.875rem 1rem !important;
    margin: 0 !important;
    font-size: 0.8125rem;
    color: var(--cit-navy);
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method .payment_box::before {
    display: none !important;
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method .payment_box p {
    margin: 0 0 0.5rem;
}
.cit-checkout-summary__sticky #payment ul.wc_payment_methods li.wc_payment_method .payment_box p:last-child {
    margin: 0;
}

/* Place order row */
.cit-checkout-summary__sticky #payment .form-row.place-order {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.cit-checkout-summary__sticky #payment .form-row.place-order .woocommerce-terms-and-conditions-wrapper {
    margin: 0 0 0.875rem;
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
}
.cit-checkout-summary__sticky #payment .form-row.place-order noscript {
    display: none;
}

/* Big orange Place order button (the canonical #place_order from default template) */
.cit-checkout-summary__sticky #payment #place_order,
.cit-checkout-form #place_order {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100% !important;
    height: 56px !important;
    padding: 0 1.5rem !important;
    background-color: var(--cit-orange) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0.625rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(196, 78, 21, 0.2) !important;
    margin-top: 0.5rem !important;
    text-shadow: none !important;
}
.cit-checkout-summary__sticky #payment #place_order:hover,
.cit-checkout-form #place_order:hover {
    background-color: var(--cit-orange-dark) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(196, 78, 21, 0.25) !important;
}
.cit-checkout-summary__sticky #payment #place_order:active,
.cit-checkout-form #place_order:active {
    transform: translateY(1px);
}

/* Secure checkout micro-line under #place_order, injected via pseudo */
.cit-checkout-summary__sticky #payment .form-row.place-order::after {
    content: "🔒  Secure checkout — payment info is encrypted.";
    display: block;
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--cit-text-muted);
    text-align: center;
}

/* ============================================================
   About page — page-about.php
   v0.31.0
   ============================================================ */

.cit-about-page {
    color: var(--cit-navy);
    background-color: #FFFFFF;
}

/* ----- Hero ----- */
.cit-about-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
    padding: 4rem 0 3rem;
    border-bottom: 1px solid #EEF0F4;
}
.cit-about-hero-orb {
    position: absolute;
    top: -200px;
    right: -160px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.18) 0%, rgba(242, 101, 34, 0) 70%);
    pointer-events: none;
}
.cit-about-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
}
.cit-about-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cit-orange-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}
.cit-about-hero-title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cit-navy);
    margin: 0 0 1.25rem;
}
.cit-about-hero-title .cit-hero-highlight {
    color: var(--cit-orange);
}
.cit-about-hero-subtitle {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--cit-navy);
    max-width: 720px;
    margin: 0 0 1.75rem;
}
.cit-about-hero-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}
.cit-about-hero-link {
    color: var(--cit-navy);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 1.5px solid var(--cit-orange);
    padding: 0.25rem 0.125rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cit-about-hero-link:hover {
    color: var(--cit-orange);
    border-bottom-color: var(--cit-orange-dark);
}
.cit-about-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: #FFFFFF;
    border: 1px solid #EEF0F4;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(15, 34, 56, 0.04);
    margin: 0;
}
.cit-about-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cit-about-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cit-navy);
    line-height: 1.1;
    margin: 0;
}
.cit-about-stat-label {
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ----- Generic section scaffolding ----- */
.cit-about-section {
    padding: 4rem 0;
}
.cit-about-section-header {
    margin-bottom: 2.5rem;
    max-width: 720px;
}
.cit-about-section-header--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.cit-about-section-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cit-orange-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}
.cit-about-section-title {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cit-navy);
    margin: 0 0 1rem;
}
.cit-about-section-sub {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cit-text-muted);
    margin: 0;
}

/* ----- Story + Values ----- */
.cit-about-story {
    background-color: #FFFFFF;
}
.cit-about-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}
.cit-about-story-text p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--cit-navy);
    margin: 0 0 1.25rem;
}
.cit-about-story-text p:last-child {
    margin-bottom: 0;
}

.cit-about-values {
    background-color: #F7F8FA;
    border-radius: 1.25rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid #EEF0F4;
}
.cit-about-values-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cit-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1.25rem;
}
.cit-about-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}
.cit-about-value {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}
.cit-about-value-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #EAEDF1;
    color: var(--cit-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cit-about-value > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.cit-about-value strong {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy);
}
.cit-about-value span {
    font-size: 0.875rem;
    color: var(--cit-text-muted);
    line-height: 1.5;
}

/* ----- Process (5 steps) ----- */
.cit-about-process {
    background-color: #F7F8FA;
    border-top: 1px solid #EEF0F4;
    border-bottom: 1px solid #EEF0F4;
}
.cit-about-section-header {
    text-align: left;
}
.cit-about-process .cit-about-section-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.cit-about-process-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: process;
}
.cit-about-step {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #EEF0F4;
    border-radius: 1rem;
    padding: 1.75rem 1.25rem 1.5rem;
    text-align: left;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.cit-about-step:hover {
    border-color: var(--cit-orange-light);
    transform: translateY(-2px);
}
.cit-about-step-num {
    position: absolute;
    top: -14px;
    left: 1.25rem;
    width: 28px;
    height: 28px;
    background-color: var(--cit-navy);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #F7F8FA;
}
.cit-about-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(242, 101, 34, 0.1);
    color: var(--cit-orange-dark);
    margin: 0.25rem 0 0.875rem;
}
.cit-about-step h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    letter-spacing: -0.005em;
}
.cit-about-step p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--cit-text-muted);
    margin: 0;
}
.cit-about-step p a {
    color: var(--cit-orange-dark);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
.cit-about-step p a:hover {
    color: var(--cit-orange);
}

/* ----- Sustainability ----- */
.cit-about-sustainability {
    background-color: #FFFFFF;
}
.cit-about-sustainability-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}
.cit-about-sustainability-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cit-navy);
    margin: 0 0 1rem;
}
.cit-about-sustainability-text strong {
    color: var(--cit-navy);
    font-weight: 700;
}
.cit-about-sustainability-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.cit-about-impact-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.25rem;
    align-items: center;
    background-color: #F7F8FA;
    border: 1px solid #EEF0F4;
    border-radius: 1rem;
    padding: 1.25rem 1.25rem;
}
.cit-about-impact-icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--cit-orange);
    border: 1px solid #EAEDF1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cit-about-impact-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--cit-navy);
    line-height: 1.1;
    grid-column: 2;
}
.cit-about-impact-label {
    font-size: 0.875rem;
    color: var(--cit-text-muted);
    grid-column: 2;
    line-height: 1.4;
}

/* ----- Visit us ----- */
.cit-about-visit {
    background-color: #F7F8FA;
    border-top: 1px solid #EEF0F4;
    border-bottom: 1px solid #EEF0F4;
}
.cit-about-visit-card {
    background-color: #FFFFFF;
    border-radius: 1.25rem;
    padding: 2rem;
    border: 1px solid #EEF0F4;
    box-shadow: 0 1px 3px rgba(15, 34, 56, 0.04);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}
.cit-about-visit-text p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--cit-navy);
    margin: 0 0 1.25rem;
}
.cit-about-visit-meta {
    margin: 0 0 1.5rem;
    padding: 1rem 0 0;
    border-top: 1px solid #EEF0F4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.cit-about-visit-meta > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    column-gap: 0.875rem;
    align-items: baseline;
    font-size: 0.9375rem;
}
.cit-about-visit-meta dt {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cit-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
.cit-about-visit-meta dd {
    color: var(--cit-navy);
    font-weight: 500;
    margin: 0;
}
.cit-about-visit-meta dd a {
    color: var(--cit-navy);
    text-decoration: none;
    border-bottom: 1.5px solid var(--cit-orange);
}
.cit-about-visit-meta dd a:hover {
    color: var(--cit-orange);
}
.cit-about-visit-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cit-about-visit-link {
    color: var(--cit-navy);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 1.5px solid var(--cit-orange);
    padding: 0.25rem 0.125rem;
}
.cit-about-visit-link:hover {
    color: var(--cit-orange);
}
.cit-about-visit-map iframe {
    display: block;
    width: 100%;
    border-radius: 1rem;
    border: 1px solid #EEF0F4;
}

/* ----- Trustpilot ----- */
.cit-about-trustpilot {
    background-color: #FFFFFF;
    padding-bottom: 2.5rem;
}
.cit-about-trustpilot-wrap {
    margin-top: 1.5rem;
}

/* ----- Final CTA ----- */
.cit-about-final-cta {
    background-color: var(--cit-navy);
    color: #FFFFFF;
    padding: 4.5rem 0;
}
.cit-about-final-cta-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.cit-about-final-cta-title {
    color: #FFFFFF;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}
.cit-about-final-cta-sub {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 0 2rem;
}
.cit-about-final-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cit-about-final-cta .cit-btn-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.cit-about-final-cta .cit-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

/* ============================================================
   Responsive — About page
   ============================================================ */
@media (max-width: 1024px) {
    .cit-about-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
    .cit-about-story-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .cit-about-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cit-about-process-grid .cit-about-step:nth-child(5) {
        grid-column: 1 / -1;
    }
    .cit-about-sustainability-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .cit-about-visit-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

@media (max-width: 640px) {
    .cit-about-hero {
        padding: 2.5rem 0 2rem;
    }
    .cit-about-section {
        padding: 2.5rem 0;
    }
    .cit-about-hero-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.25rem;
    }
    .cit-about-process-grid {
        grid-template-columns: 1fr;
    }
    .cit-about-process-grid .cit-about-step:nth-child(5) {
        grid-column: auto;
    }
    .cit-about-values {
        padding: 1.5rem 1.25rem;
    }
    .cit-about-final-cta {
        padding: 3rem 0;
    }
}

/* Trust reasons under the summary */
.cit-checkout-summary__reasons {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0.875rem 0.875rem 0.625rem;
    background-color: #F7F8FA;
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.cit-checkout-summary__reason {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}
.cit-checkout-summary__reason-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--cit-orange);
    border: 1px solid #EAEDF1;
}
.cit-checkout-summary__reason-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    line-height: 1.35;
    min-width: 0;
}
.cit-checkout-summary__reason-text strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cit-navy);
}
.cit-checkout-summary__reason-text span {
    font-size: 0.75rem;
    color: var(--cit-text-muted);
    font-weight: 400;
}

.cit-checkout-summary__payments {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #EEF0F4;
    text-align: center;
}
.cit-checkout-summary__payments > span {
    display: block;
    font-size: 0.6875rem;
    color: var(--cit-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.cit-checkout-summary__pay-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
}

/* Mobile summary toggle — hidden on desktop */
.cit-checkout-summary-toggle {
    display: none;
}

/* ============================================================
   Responsive — checkout
   ============================================================ */
@media (max-width: 1024px) {
    .cit-checkout-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    .cit-checkout-summary__sticky {
        position: static;
    }

    /* Mobile: collapse summary by default, show via toggle */
    .cit-checkout-summary-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        padding: 0.875rem 1rem;
        margin: 0 0 1rem;
        background-color: #F7F8FA;
        border: 1px solid #E6E9EE;
        border-radius: 0.625rem;
        cursor: pointer;
        color: var(--cit-navy);
        font-size: 0.9375rem;
        font-weight: 600;
        text-align: left;
        order: -1; /* push toggle above the form sections */
    }
    .cit-checkout-summary-toggle__left {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--cit-navy);
    }
    .cit-checkout-summary-toggle__total {
        font-size: 1rem;
        font-weight: 800;
        color: var(--cit-navy);
    }
    .cit-checkout-summary-toggle__chev {
        transition: transform 0.15s ease;
    }
    .cit-checkout-summary-toggle[aria-expanded="true"] .cit-checkout-summary-toggle__chev {
        transform: rotate(180deg);
    }
    .cit-checkout-summary {
        display: none;
    }
    .cit-checkout-summary.is-open {
        display: block;
    }
    .cit-checkout-main {
        display: flex;
        flex-direction: column;
    }
    .cit-checkout-step-header {
        order: -2;
    }
    #customer_details {
        order: 1;
    }
}

@media (max-width: 640px) {
    .cit-checkout-form {
        padding: 1.25rem 1rem 3rem;
    }
    .cit-checkout-step-header__title {
        font-size: 1.375rem;
    }
    .cit-checkout-form .form-row-first,
    .cit-checkout-form .form-row-last {
        width: 100%;
        display: block;
    }
    .cit-checkout-form .form-row-first {
        margin-right: 0;
    }
    .cit-checkout-summary__sticky {
        padding: 1.25rem 1rem;
    }
}
html body .cit-product-summary-variable .variations select:focus-visible {
    border-color: var(--cit-orange) !important;
    box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.18) !important;
}

/* Clear button — small muted link below dropdowns */
html body .cit-product-summary-variable .reset_variations {
    display: inline-block !important;
    margin-top: 0.5rem !important;
    font-size: 0.8125rem !important;
    color: var(--cit-text-muted) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
html body .cit-product-summary-variable .reset_variations:hover {
    color: var(--cit-orange) !important;
}

/* ==========================================================================
   P1 — Static landing pages
   ==========================================================================
   Two new templates added together so they share scaffolding:
     - page-shop-mullingar.php   (.cit-shop-*)
     - page-for-business.php     (.cit-business-*)

   Shared scaffolding (hero, sections, headers, cards) is defined once with
   joined selectors; template-specific bits follow.
   ========================================================================== */

/* ---- Shared scaffolding -------------------------------------------------- */

.cit-shop-page,
.cit-business-page {
    color: #1B2436;
    background: #fff;
}
.cit-shop-page .cit-container,
.cit-business-page .cit-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Hero band (both templates) */
.cit-shop-hero,
.cit-business-hero {
    background: linear-gradient(135deg, var(--cit-navy, #0F2238) 0%, #1A3556 100%);
    color: #fff;
    padding: 4.5rem 0 3.75rem;
    position: relative;
    overflow: hidden;
}
.cit-shop-hero-orb,
.cit-business-hero-orb {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,101,34,0.15) 0%, rgba(242,101,34,0) 70%);
    right: -160px;
    top: -160px;
    pointer-events: none;
}
.cit-shop-hero-inner,
.cit-business-hero-inner {
    position: relative;
    z-index: 1;
}
.cit-shop-eyebrow,
.cit-business-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cit-orange, #F26522);
    margin-bottom: 1.125rem;
}
.cit-shop-hero-title,
.cit-business-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 1.125rem;
    max-width: 880px;
}
.cit-business-hero-title .cit-hero-highlight {
    color: var(--cit-orange, #F26522);
}
.cit-shop-hero-subtitle,
.cit-business-hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.88);
    max-width: 760px;
    margin: 0 0 1.75rem;
}
.cit-shop-hero-cta,
.cit-business-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}
.cit-shop-hero-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 2px;
}
.cit-shop-hero-link:hover { border-bottom-color: var(--cit-orange, #F26522); }
.cit-shop-hero-meta,
.cit-business-hero-meta {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.5;
}
.cit-shop-hero-meta strong,
.cit-business-hero-meta strong {
    color: #fff;
}

/* Section spacing — every full-bleed band gets the same vertical rhythm */
.cit-business-section,
.cit-shop-locate,
.cit-shop-hours-section,
.cit-shop-why,
.cit-shop-reserve,
.cit-shop-access,
.cit-shop-photos {
    padding: 3.5rem 0;
}
.cit-shop-hours-section,
.cit-shop-access,
.cit-business-why,
.cit-business-trustpilot {
    background: #F7F8FA;
}

/* Section headers (eyebrow + title + optional lead) */
.cit-shop-section-header,
.cit-business-section-header {
    margin-bottom: 2rem;
    max-width: 760px;
}
.cit-shop-section-eyebrow,
.cit-business-section-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cit-orange, #F26522);
    margin-bottom: 0.625rem;
}
.cit-shop-section-header h2,
.cit-business-section-header h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.625rem;
    line-height: 1.2;
}
.cit-shop-section-lead,
.cit-business-section-lead {
    font-size: 1rem;
    color: #4A5568;
    margin: 0;
    line-height: 1.6;
}
.cit-business-section-header-light .cit-business-section-eyebrow,
.cit-business-section-header-light h2 {
    /* alternate header style on the cream/light bands — leaves colors but
       drops the top margin since the band has its own padding */
}

/* ---- Shop-Mullingar — section 2 (Locate: address card + map) ----------- */

.cit-shop-locate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    align-items: stretch;
}
@media (max-width: 880px) {
    .cit-shop-locate-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }
}
.cit-shop-locate-card {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 14px;
    padding: 2rem;
}
.cit-shop-locate-card h2 {
    font-size: 1.75rem;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 1rem;
}
.cit-shop-locate-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cit-orange, #F26522);
    margin-bottom: 0.5rem;
}
.cit-shop-address {
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #1B2436;
    margin: 0 0 1.25rem;
}
.cit-shop-address-cta { margin-bottom: 1.5rem; }
.cit-shop-phone-block {
    padding-top: 1.25rem;
    border-top: 1px solid #ECEFF3;
}
.cit-shop-phone-label {
    display: block;
    font-size: 0.8125rem;
    color: #4A5568;
    margin-bottom: 0.25rem;
}
.cit-shop-phone-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    text-decoration: none;
}
.cit-shop-phone-number:hover { color: var(--cit-orange, #F26522); }
.cit-shop-map-wrap {
    position: relative;
    width: 100%;
    min-height: 400px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #ECEFF3;
}

/* ---- Shop-Mullingar — section 3 (Opening hours) ------------------------ */

.cit-shop-hours-card {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 14px;
    padding: 2rem;
    max-width: 640px;
}
.cit-shop-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}
.cit-shop-hours-table th,
.cit-shop-hours-table td {
    padding: 0.75rem 0;
    text-align: left;
    border-bottom: 1px dashed #ECEFF3;
}
.cit-shop-hours-table th {
    font-weight: 600;
    color: var(--cit-navy, #0F2238);
}
.cit-shop-hours-table td {
    text-align: right;
    color: #4A5568;
    font-variant-numeric: tabular-nums;
}
.cit-shop-hours-table tr:last-child th,
.cit-shop-hours-table tr:last-child td { border-bottom: 0; }
.cit-shop-hours-closed th { color: #6B7280; }
.cit-shop-hours-closed td { color: #6B7280; font-style: italic; }
.cit-shop-hours-note {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: #4A5568;
    line-height: 1.5;
}
.cit-shop-hours-note a {
    color: var(--cit-navy, #0F2238);
    text-decoration: underline;
}

/* ---- Shop-Mullingar — section 4 (Why visit) ---------------------------- */

.cit-shop-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.cit-shop-why-item {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 12px;
    padding: 1.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cit-shop-why-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,34,56,0.08);
}
.cit-shop-why-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: rgba(242,101,34,0.10);
    color: var(--cit-orange, #F26522);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.cit-shop-why-item h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.cit-shop-why-item p {
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.55;
    margin: 0;
}

/* ---- Shop-Mullingar — section 5 (Reserve & Collect) -------------------- */

.cit-shop-reserve-card {
    background: var(--cit-cream, #F5EDD9);
    border-radius: 16px;
    padding: 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}
@media (max-width: 800px) {
    .cit-shop-reserve-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 2rem 1.5rem;
    }
}
.cit-shop-reserve-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cit-orange, #F26522);
    margin-bottom: 0.625rem;
}
.cit-shop-reserve-card h2 {
    font-size: 1.75rem;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.75rem;
}
.cit-shop-reserve-card p {
    color: #1B2436;
    margin: 0;
    line-height: 1.6;
}
.cit-shop-reserve-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cit-shop-reserve-actions .cit-btn { text-align: center; }

/* ---- Shop-Mullingar — section 6 (Parking / access) --------------------- */

.cit-shop-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.cit-shop-access-item {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 12px;
    padding: 1.5rem;
}
.cit-shop-access-item h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.5rem;
}
.cit-shop-access-item p {
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.55;
    margin: 0;
}
.cit-shop-access-item a {
    color: var(--cit-navy, #0F2238);
    text-decoration: underline;
}

/* ---- Shop-Mullingar — section 7 (Photos placeholder) ------------------- */

.cit-shop-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.cit-shop-photo-tile {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #E9EDF2 0%, #DCE3EC 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4A5568;
    font-size: 0.9375rem;
    font-weight: 500;
}
.cit-shop-photo-label { letter-spacing: 0.02em; }

/* ---- Shop-Mullingar — section 8 (Final CTA — navy band) ---------------- */

.cit-shop-final-cta {
    background: var(--cit-navy, #0F2238);
    color: #fff;
    text-align: center;
    padding: 3.5rem 0;
}
.cit-shop-final-cta-inner h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin: 0 0 0.75rem;
}
.cit-shop-final-cta-inner p {
    color: rgba(255,255,255,0.88);
    font-size: 1.0625rem;
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.55;
}
.cit-shop-big-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    background: var(--cit-orange, #F26522);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1.125rem 2rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
    margin-bottom: 1.5rem;
}
.cit-shop-big-phone:hover {
    background: #D94F0F;
    color: #fff;
    transform: translateY(-1px);
}
.cit-shop-final-cta-actions {
    margin-bottom: 1.5rem;
}
.cit-shop-final-cta-note {
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin: 0;
}

/* ---- Business — section 2 (Who we serve) ------------------------------- */

.cit-business-who-grid,
.cit-business-what-grid,
.cit-business-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.cit-business-who-item,
.cit-business-what-item,
.cit-business-why-item {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 12px;
    padding: 1.75rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cit-business-who-item:hover,
.cit-business-what-item:hover,
.cit-business-why-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,34,56,0.08);
}
.cit-business-who-icon,
.cit-business-why-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: rgba(242,101,34,0.10);
    color: var(--cit-orange, #F26522);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.cit-business-who-item h3,
.cit-business-what-item h3,
.cit-business-why-item h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.cit-business-who-item p,
.cit-business-what-item p,
.cit-business-why-item p {
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.55;
    margin: 0;
}

/* Hero "or call" CTA — icon + label + number */
.cit-business-phone-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cit-business-phone-cta:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
}
.cit-business-phone-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: var(--cit-orange, #F26522);
    color: #fff;
    border-radius: 50%;
}
.cit-business-phone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.cit-business-phone-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}
.cit-business-phone-number {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

/* ---- Business — section 5 (Serjax handoff — cream band) ---------------- */

.cit-business-serjax {
    background: var(--cit-cream, #F5EDD9);
}
.cit-business-serjax-card {
    background: #fff;
    border: 1px solid #E5D8B1;
    border-radius: 16px;
    padding: 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}
@media (max-width: 800px) {
    .cit-business-serjax-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 2rem 1.5rem;
        gap: 1.5rem;
    }
}
.cit-business-serjax-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cit-orange, #F26522);
    margin-bottom: 0.625rem;
}
.cit-business-serjax-body h2 {
    font-size: 1.625rem;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.875rem;
    line-height: 1.25;
}
.cit-business-serjax-body p {
    color: #1B2436;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}
.cit-business-serjax-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
}
.cit-business-serjax-phone {
    color: var(--cit-navy, #0F2238);
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 1px solid #CFD6E0;
    padding-bottom: 2px;
}
.cit-business-serjax-phone:hover {
    color: var(--cit-orange, #F26522);
    border-bottom-color: var(--cit-orange, #F26522);
}
.cit-business-serjax-list {
    background: #FAF5E5;
    border: 1px dashed #D9C998;
    border-radius: 12px;
    padding: 1.5rem;
}
.cit-business-serjax-list-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cit-navy, #0F2238);
    margin-bottom: 0.875rem;
}
.cit-business-serjax-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cit-business-serjax-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.625rem;
    color: #1B2436;
    font-size: 0.9375rem;
    line-height: 1.45;
}
.cit-business-serjax-list li:last-child { margin-bottom: 0; }
.cit-business-serjax-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cit-orange, #F26522);
    font-weight: 700;
}

/* ---- Business — section 6 (Enquiry form) ------------------------------- */

.cit-business-enquiry {
    background: #fff;
}
.cit-business-form {
    background: #F7F8FA;
    border: 1px solid #ECEFF3;
    border-radius: 14px;
    padding: 2rem;
    max-width: 880px;
    margin: 0 auto;
}
.cit-business-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 640px) {
    .cit-business-form-row { grid-template-columns: minmax(0, 1fr); }
}
.cit-business-form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.cit-business-form-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1B2436;
    margin-bottom: 0.375rem;
}
.cit-business-form-field input,
.cit-business-form-field select,
.cit-business-form-field textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #CFD6E0;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    background: #fff;
    color: #1B2436;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.cit-business-form-field input:focus,
.cit-business-form-field select:focus,
.cit-business-form-field textarea:focus {
    outline: 0;
    border-color: var(--cit-navy, #0F2238);
    box-shadow: 0 0 0 3px rgba(15,34,56,0.10);
}
.cit-business-form-field textarea {
    min-height: 130px;
    resize: vertical;
}
.cit-business-form .cit-btn {
    margin-top: 0.5rem;
}
.cit-business-form-note {
    font-size: 0.8125rem;
    color: #4A5568;
    margin: 1rem 0 0;
    line-height: 1.5;
}

/* Success / error feedback above the form */
.cit-business-form-feedback {
    max-width: 880px;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.cit-business-form-feedback-success {
    background: #E7F4EC;
    color: #1F5132;
    border: 1px solid #B3DDC2;
}
.cit-business-form-feedback-error {
    background: #FBE7E7;
    color: #842029;
    border: 1px solid #F1AEAE;
}
.cit-business-form-feedback a { color: inherit; text-decoration: underline; }

/* ---- Business — section 7 (Trustpilot strip — light band) ------------- */

.cit-business-trustpilot-wrap {
    max-width: 1024px;
    margin: 0 auto;
}
.cit-business-trustpilot .cit-business-section-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   v0.22.0 — Homepage tightening + callout bands
   ==========================================================================
   1. Tighten section vertical rhythm on the homepage (5rem/6rem/7rem → ~3.5rem)
   2. Scope-protect homepage product card title against the two unscoped
      .cit-product-title !important rules at lines 4277 and 4924 that were
      leaking from the single-product page into the bestseller cards
   3. New .cit-callout-band primitive for the four homepage callout bands
      (Mullingar / Business / Schools / Reviews)
   ========================================================================== */

/* ---- 1. Tighter homepage section rhythm -------------------------------- */

.cit-home .cit-hero {
    padding: 4.5rem 0 4rem !important;
}
.cit-home .cit-trust-row {
    padding: 1.75rem 0 !important;
}
.cit-home .cit-categories-section {
    padding: 3.25rem 0 !important;
}
.cit-home .cit-bestsellers-section {
    padding: 3.25rem 0 !important;
    background: #fff !important;
}
@media (max-width: 768px) {
    .cit-home .cit-hero {
        padding: 3rem 0 2.75rem !important;
    }
    .cit-home .cit-categories-section,
    .cit-home .cit-bestsellers-section {
        padding: 2.5rem 0 !important;
    }
}

/* Headers within homepage sections — tighter bottom margin */
.cit-home .cit-section-header {
    margin-bottom: 1.5rem;
}
.cit-home .cit-section-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 0.5rem;
}

/* "Or browse everything" sits inline next to primary CTA */
.cit-home .cit-section-footer {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

/* ---- 2. Scope-protect homepage product card title ---------------------- */
/*
   Two unscoped .cit-product-title rules with !important elsewhere in this
   file (lines 4277 + 4924) target the single-product page H1 but leak into
   homepage cards. We need a more specific selector to win. Specificity here
   is 0,3,0 + !important — beats the 0,1,0 + !important rules.
*/
.cit-products-grid .cit-product-card .cit-product-title,
.cit-bestsellers-section .cit-product-card .cit-product-title {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--cit-navy) !important;
    margin: 0 0 0.5rem !important;
    letter-spacing: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-height: calc(0.9375rem * 1.35 * 2) !important;
    min-height: calc(0.9375rem * 1.35 * 2) !important;
}
.cit-bestsellers-section .cit-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 12px;
    padding: 1rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cit-bestsellers-section .cit-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,34,56,0.08);
}
.cit-bestsellers-section .cit-product-image {
    aspect-ratio: 4 / 3;
    background: #F7F8FA;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.875rem;
    overflow: hidden;
    position: relative;
}
.cit-bestsellers-section .cit-product-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
.cit-bestsellers-section .cit-product-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cit-bestsellers-section .cit-product-price {
    margin-top: auto;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cit-navy);
}
.cit-bestsellers-section .cit-product-price del {
    color: #9AA3B0;
    font-weight: 500;
    margin-right: 0.5rem;
    font-size: 0.9375rem;
}
.cit-bestsellers-section .cit-product-price ins {
    background: transparent;
    text-decoration: none;
    color: var(--cit-orange);
}
.cit-bestsellers-section .cit-product-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--cit-orange);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* ---- 3. Callout band primitive ----------------------------------------- */

.cit-callout-band {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}
.cit-callout-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 3rem;
    align-items: center;
}
@media (max-width: 880px) {
    .cit-callout-band {
        padding: 3rem 0;
    }
    .cit-callout-band-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}
.cit-callout-band--reversed .cit-callout-band-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.cit-callout-band--reversed .cit-callout-band-visual {
    order: 2;
}
@media (max-width: 880px) {
    .cit-callout-band--reversed .cit-callout-band-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    .cit-callout-band--reversed .cit-callout-band-visual {
        order: 0;
    }
}

.cit-callout-band-content { position: relative; z-index: 2; }
.cit-callout-band-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--cit-orange);
    margin-bottom: 0.875rem;
}
.cit-callout-band-title {
    font-size: clamp(1.625rem, 2.75vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cit-navy);
    margin: 0 0 1rem;
}
.cit-callout-band-body {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #4A5568;
    margin: 0 0 1.5rem;
    max-width: 540px;
}
.cit-callout-band-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
}
.cit-callout-band-link {
    color: var(--cit-navy);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid #CFD6E0;
    padding-bottom: 2px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.cit-callout-band-link:hover {
    color: var(--cit-orange);
    border-bottom-color: var(--cit-orange);
}

/* ---- Visual side (left or right depending on direction) ---------------- */

.cit-callout-band-visual {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cit-callout-band-visual-icon {
    width: 80px;
    height: 80px;
    color: var(--cit-orange);
    margin-bottom: 1.25rem;
}
.cit-callout-band-visual-headline {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    text-align: center;
    padding: 0 1.5rem;
}
.cit-callout-band-visual-sub {
    font-size: 1rem;
    color: #4A5568;
    margin: 0;
    text-align: center;
    padding: 0 1.5rem;
}
.cit-callout-band-visual-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

/* ==========================================================================
   WORKSTATIONS BAND (home page, between bestsellers and Mullingar)
   Educational band that explains the workstation category in plain English
   for buyers who search "best laptop for AutoCAD" without knowing the term.
   ========================================================================== */
.cit-workstations-band {
    background: linear-gradient(135deg, #0F2238 0%, #1A3559 100%);
    color: #fff;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    position: relative;
    overflow: hidden;
}
.cit-workstations-band::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 40rem;
    height: 40rem;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.15) 0%, transparent 60%);
    pointer-events: none;
}
.cit-workstations-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas:
        "intro usecases"
        "cta   cta";
    gap: 3rem 4rem;
    align-items: start;
}
.cit-workstations-intro { grid-area: intro; }
.cit-workstations-usecases { grid-area: usecases; }
.cit-workstations-cta { grid-area: cta; }

.cit-workstations-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange, #F26522);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.cit-workstations-title {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.1;
    margin: 0 0 1.5rem;
    color: #fff;
    letter-spacing: -0.02em;
}
.cit-workstations-title-accent { color: var(--cit-orange, #F26522); }

.cit-workstations-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1rem;
    max-width: 38rem;
}
.cit-workstations-lead strong { color: #fff; }

.cit-workstations-usecases {
    display: grid;
    gap: 0.875rem;
}
.cit-workstations-usecase {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.25rem;
    padding: 1.125rem 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    align-items: start;
}
.cit-workstations-usecase-icon {
    grid-row: span 2;
    align-self: center;
    color: var(--cit-orange, #F26522);
    flex-shrink: 0;
}
.cit-workstations-usecase strong {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}
.cit-workstations-usecase span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.4;
}

.cit-workstations-cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cit-workstations-help {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #25D366;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-left: auto;
}
.cit-workstations-help:hover { color: #1FB855; }

@media (max-width: 900px) {
    .cit-workstations-inner {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "usecases" "cta";
        gap: 2rem;
    }
    .cit-workstations-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .cit-workstations-cta .cit-btn {
        text-align: center;
    }
    .cit-workstations-help {
        margin-left: 0;
        justify-content: center;
    }
}

/* ---- Mega menu: workstation explainer column ----------------------- */
.cit-mega-col-explain {
    background: rgba(242, 101, 34, 0.06);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}
.cit-mega-explain-lead {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--cit-text-muted, #4a5568);
    margin: 0 0 0.75rem;
}
.cit-mega-explain-list {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.55;
}
.cit-mega-explain-list li {
    padding-left: 1rem;
    position: relative;
    margin-bottom: 0.25rem;
    color: var(--cit-text-muted, #4a5568);
}
.cit-mega-explain-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cit-orange, #F26522);
}
.cit-mega-explain-list strong { color: var(--cit-text, #1a202c); }
.cit-mega-explain-foot {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cit-text-muted, #4a5568);
    margin: 0;
    font-style: italic;
}

/* ---- Mobile tile: pro variant + sub-label ---------------------------- */
.cit-mobile-tile--pro {
    background: linear-gradient(135deg, #0F2238 0%, #1A3559 100%);
    color: #fff;
}
.cit-mobile-tile--pro .cit-mobile-tile__icon { color: var(--cit-orange, #F26522); }
.cit-mobile-tile--pro .cit-mobile-tile__label { color: #fff; }
.cit-mobile-tile__sub {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ---- Modifier: Mullingar (cream + warm shop visual) -------------------- */

.cit-callout-band--mullingar {
    background: var(--cit-cream, #F5EDD9);
}
.cit-callout-band--mullingar .cit-callout-band-visual {
    background: linear-gradient(135deg, #fff 0%, #FAF5E5 100%);
    border: 1px solid #E5D8B1;
}

/* ---- Modifier: Business (navy + light text) ---------------------------- */

.cit-callout-band--business {
    background: var(--cit-navy, #0F2238);
    color: #fff;
}
.cit-callout-band--business .cit-callout-band-title {
    color: #fff;
}
.cit-callout-band--business .cit-callout-band-body {
    color: rgba(255,255,255,0.85);
}
.cit-callout-band--business .cit-callout-band-link {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.4);
}
.cit-callout-band--business .cit-callout-band-link:hover {
    color: var(--cit-orange);
    border-bottom-color: var(--cit-orange);
}
.cit-callout-band--business .cit-callout-band-visual {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.10);
}
.cit-callout-band--business .cit-callout-band-visual-headline {
    color: #fff;
}
.cit-callout-band--business .cit-callout-band-visual-sub {
    color: rgba(255,255,255,0.78);
}

/* ---- Modifier: Schools (light, fresh — pale orange tint) ---------------- */

.cit-callout-band--schools {
    background: #FFF7F1;
}
.cit-callout-band--schools .cit-callout-band-visual {
    background: linear-gradient(135deg, #fff 0%, #FFE9D5 100%);
    border: 1px solid #FACBA3;
}

/* ---- Modifier: Reviews (Trustpilot carousel — full-width centered) ----- */

.cit-callout-band--reviews {
    background: #F7F8FA;
    padding: 3.5rem 0;
    text-align: center;
}
.cit-callout-band--reviews .cit-callout-band-inner {
    display: block;
}
.cit-callout-band--reviews .cit-callout-band-content {
    max-width: 720px;
    margin: 0 auto 2rem;
}
.cit-callout-band--reviews .cit-callout-band-title {
    margin-bottom: 0.5rem;
}
.cit-callout-band--reviews .cit-callout-band-body {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}
.cit-callout-band--reviews .cit-callout-band-trustpilot {
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================================================
   v0.23.0 — Category page: Refurbed-style filters + premium product cards
   ==========================================================================
   Goals (per Evan):
     1. Filters need to "blend with the theme" — accordion behavior, only
        Brand + Price open by default, soft theme-matched chrome instead of
        BeRocket's generic checkbox look.
     2. Product cards need to feel premium and quality-first — Refurbed-style
        clean cards with aspect-ratio image, condition badge, was/now price.

   These rules carry !important on most properties because they're fighting
   BeRocket's own plugin styles and Kadence parent-theme defaults. The
   specificity ladder runs: cit-shop-sidebar > cit-shop-filter-section >
   .bapf_sfilter > internal markup.
   ========================================================================== */

/* ---- 1. Layout polish for the sidebar + grid container ----------------- */

.cit-shop-layout {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 2.25rem !important;
    padding: 2.5rem 0 4rem !important;
}
@media (max-width: 980px) {
    .cit-shop-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.5rem !important;
    }
    .cit-shop-sidebar {
        position: static !important;
    }
}

/* ---- 2. Sort block (top of sidebar) — slimmer, no border --------------- */

.cit-shop-sort {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 1.25rem !important;
    display: none !important; /* sort moved into results toolbar above grid */
}

/* ---- 3. Filter section wrapper — flat surface, no card chrome ---------- */
/*
   The wrapper was a bordered card which made BeRocket's own headings look
   doubled-up. Strip the wrapper chrome — let each accordion be the chrome.
*/

.cit-shop-filter-section {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 1.5rem !important;
}
.cit-shop-filter-heading {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    color: var(--cit-text-muted) !important;
    margin: 0 0 0.5rem !important;
    padding: 0 0.25rem 0.625rem !important;
    border-bottom: 1px solid var(--cit-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.cit-shop-filter-heading::after {
    content: "Clear all";
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cit-orange);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.cit-shop-filter-section.has-active-filters .cit-shop-filter-heading::after {
    opacity: 1;
    pointer-events: auto;
}

/* ---- 4. BeRocket filter block → accordion item ------------------------- */
/*
   BeRocket wraps each filter in .bapf_sfilter (or similar). Our generic
   selector ".cit-shop-filter-section > div" catches it without depending on
   the exact class name from any one plugin version.
*/

.cit-shop-filter-section > .bapf_sfilter,
.cit-shop-filter-section > .br_filters_single,
.cit-shop-filter-section > .berocket_aapf_widget,
.cit-shop-filter-section > .widget,
.cit-shop-filter-section > .cit-filter-accordion {
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 0 0.5rem !important;
    overflow: hidden !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.cit-shop-filter-section > .bapf_sfilter:hover,
.cit-shop-filter-section > .br_filters_single:hover,
.cit-shop-filter-section > .berocket_aapf_widget:hover,
.cit-shop-filter-section > .widget:hover,
.cit-shop-filter-section > .cit-filter-accordion:hover {
    border-color: #CFD6E0 !important;
}

/* Accordion header — the filter title line that toggles open/close */
.cit-shop-filter-section .bapf_head,
.cit-shop-filter-section h3.bapf_sfilter_title,
.cit-shop-filter-section .br_aapf_title,
.cit-shop-filter-section .widget-title,
.cit-shop-filter-section .cit-filter-accordion-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--cit-navy) !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.cit-shop-filter-section .bapf_head::after,
.cit-shop-filter-section h3.bapf_sfilter_title::after,
.cit-shop-filter-section .br_aapf_title::after,
.cit-shop-filter-section .widget-title::after,
.cit-shop-filter-section .cit-filter-accordion-head::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--cit-text-muted);
    border-bottom: 2px solid var(--cit-text-muted);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.cit-shop-filter-section .bapf_sfilter.cit-filter-open .bapf_head::after,
.cit-shop-filter-section .br_filters_single.cit-filter-open h3.bapf_sfilter_title::after,
.cit-shop-filter-section .widget.cit-filter-open .widget-title::after,
.cit-shop-filter-section .cit-filter-accordion.cit-filter-open .cit-filter-accordion-head::after {
    transform: rotate(225deg);
}

/* Fix: on collapsible filters BeRocket injects a Font Awesome chevron
   (<i class="bapf_colaps_smb fa fa-chevron-down">) INSIDE the heading, right
   after the title text — a stray arrow. Only filters with its collapse option
   (h3.bapf_hascolarr) get it, which is why some headings show it and others
   don't. Hide it; the theme already renders its own caret on the right. */
.cit-shop-filter-section .bapf_colaps_smb,
.cit-shop-filter-section .bapf_head h3 > i.fa,
.cit-shop-filter-section h3.bapf_hascolarr > i {
    display: none !important;
}

/* Active filter indicator dot next to title */
.cit-shop-filter-section .bapf_sfilter.cit-filter-has-active .bapf_head::before,
.cit-shop-filter-section .cit-filter-accordion.cit-filter-has-active .cit-filter-accordion-head::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--cit-orange);
    border-radius: 50%;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Body of each filter — hidden by default, shown when .cit-filter-open */
.cit-shop-filter-section .bapf_body,
.cit-shop-filter-section .br_filter_body,
.cit-shop-filter-section .widget > *:not(.widget-title),
.cit-shop-filter-section .cit-filter-accordion-body {
    display: none !important;
    padding: 0 1rem 1rem !important;
    border-top: 1px solid var(--cit-border) !important;
    padding-top: 0.875rem !important;
}
.cit-shop-filter-section .bapf_sfilter.cit-filter-open .bapf_body,
.cit-shop-filter-section .br_filters_single.cit-filter-open .br_filter_body,
.cit-shop-filter-section .widget.cit-filter-open > *:not(.widget-title),
.cit-shop-filter-section .cit-filter-accordion.cit-filter-open .cit-filter-accordion-body {
    display: block !important;
}

/* ---- 5. Checkbox list inside each accordion — Refurbed-style ----------- */

.cit-shop-filter-section .bapf_sfilter ul,
.cit-shop-filter-section .br_filters_single ul,
.cit-shop-filter-section .cit-filter-accordion ul,
.cit-shop-filter-section .widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}
.cit-shop-filter-section .bapf_sfilter ul li,
.cit-shop-filter-section .br_filters_single ul li,
.cit-shop-filter-section .cit-filter-accordion ul li,
.cit-shop-filter-section .widget ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    list-style: none !important;
}
.cit-shop-filter-section .bapf_sfilter ul li > a,
.cit-shop-filter-section .bapf_sfilter ul li > label,
.cit-shop-filter-section .br_filters_single ul li > a,
.cit-shop-filter-section .br_filters_single ul li > label,
.cit-shop-filter-section .widget ul li > a,
.cit-shop-filter-section .cit-filter-accordion ul li > label {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding: 0.375rem 0.5rem !important;
    border-radius: 6px !important;
    font-size: 0.9375rem !important;
    color: var(--cit-text) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}
.cit-shop-filter-section .bapf_sfilter ul li > a:hover,
.cit-shop-filter-section .bapf_sfilter ul li > label:hover,
.cit-shop-filter-section .br_filters_single ul li > a:hover,
.cit-shop-filter-section .widget ul li > a:hover,
.cit-shop-filter-section .cit-filter-accordion ul li > label:hover {
    background: #F7F8FA !important;
    color: var(--cit-navy) !important;
}

/* Custom checkbox styling */
.cit-shop-filter-section input[type="checkbox"],
.cit-shop-filter-section input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 1.5px solid #CFD6E0 !important;
    border-radius: 4px !important;
    background: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: border-color 0.12s ease, background 0.12s ease !important;
}
.cit-shop-filter-section input[type="radio"] {
    border-radius: 50% !important;
}
.cit-shop-filter-section input[type="checkbox"]:hover,
.cit-shop-filter-section input[type="radio"]:hover {
    border-color: var(--cit-navy) !important;
}
.cit-shop-filter-section input[type="checkbox"]:checked,
.cit-shop-filter-section input[type="radio"]:checked {
    border-color: var(--cit-orange) !important;
    background: var(--cit-orange) !important;
}
.cit-shop-filter-section input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cit-shop-filter-section input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* Item count badge next to each filter option */
.cit-shop-filter-section .bapf_sfilter ul li .count,
.cit-shop-filter-section .bapf_sfilter ul li .bapf_count,
.cit-shop-filter-section .widget ul li .count,
.cit-shop-filter-section .br_filters_single .count {
    color: var(--cit-text-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    margin-left: auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Disabled / no-results items */
.cit-shop-filter-section .bapf_sfilter ul li.disabled,
.cit-shop-filter-section .bapf_sfilter ul li[data-disabled],
.cit-shop-filter-section .widget ul li.disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* ---- 6. Price slider (noUiSlider — BeRocket's range filter) ------------ */

.cit-shop-filter-section .bapf_slidr_main,
.cit-shop-filter-section .noUi-target,
.cit-shop-filter-section .br_filters_slider {
    margin: 1.25rem 0.5rem 1rem !important;
    background: var(--cit-border) !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 4px !important;
    border-radius: 2px !important;
}
.cit-shop-filter-section .noUi-connect {
    background: var(--cit-orange) !important;
    box-shadow: none !important;
}
.cit-shop-filter-section .noUi-handle {
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border: 2px solid var(--cit-orange) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    top: -8px !important;
    right: -9px !important;
    cursor: grab !important;
}
.cit-shop-filter-section .noUi-handle::before,
.cit-shop-filter-section .noUi-handle::after {
    display: none !important;
}
.cit-shop-filter-section .bapf_slidr_btm_main,
.cit-shop-filter-section .bapf_slidr_inputs {
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
    font-size: 0.875rem !important;
    color: var(--cit-text) !important;
}
.cit-shop-filter-section .bapf_slidr_btm_main input,
.cit-shop-filter-section .bapf_slidr_inputs input {
    width: 100% !important;
    padding: 0.375rem 0.5rem !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    background: #fff !important;
    color: var(--cit-text) !important;
}

/* ---- 7. Color/swatch filters (squares with hex backgrounds) ----------- */

.cit-shop-filter-section .bapf_colorbox,
.cit-shop-filter-section .br_filter_color {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--cit-border) !important;
    cursor: pointer !important;
    box-shadow: inset 0 0 0 2px #fff !important;
    transition: transform 0.12s ease, border-color 0.12s ease !important;
}
.cit-shop-filter-section .bapf_colorbox:hover,
.cit-shop-filter-section .br_filter_color:hover {
    transform: scale(1.08);
    border-color: var(--cit-navy) !important;
}
.cit-shop-filter-section .bapf_colorbox.bapf_carrow,
.cit-shop-filter-section .br_filter_color.checked,
.cit-shop-filter-section .bapf_colorbox.bapf_carr_lk {
    border-color: var(--cit-orange) !important;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--cit-orange) !important;
}

/* ---- 8. "Show more" / "Less" link inside large filters ----------------- */

.cit-shop-filter-section .bapf_show_all_a,
.cit-shop-filter-section .br_show_all {
    display: inline-block !important;
    margin-top: 0.625rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--cit-orange) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.cit-shop-filter-section .bapf_show_all_a:hover,
.cit-shop-filter-section .br_show_all:hover {
    text-decoration: underline !important;
}

/* ---- 9. Active filter chips at the top ("X" to remove) ----------------- */

.cit-shop-filter-section .bapf_selected_filters,
.cit-shop-filter-section .br_selected_filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
}
.cit-shop-filter-section .bapf_selected_filters span,
.cit-shop-filter-section .br_selected_filters span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    background: rgba(242,101,34,0.10) !important;
    color: var(--cit-navy) !important;
    border: 1px solid rgba(242,101,34,0.20) !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   PRODUCT CARDS — Refurbed-style premium grid
   ========================================================================== */

/* Override existing grid + card rules (lines 4004-4049) with cleaner ones */
.cit-shop-grid-wrap .products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2.5rem !important;
}
@media (max-width: 980px) {
    .cit-shop-grid-wrap .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 540px) {
    .cit-shop-grid-wrap .products {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
    }
}

.cit-shop-grid-wrap .products li.product {
    position: relative !important;
    background: #fff !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.cit-shop-grid-wrap .products li.product:hover {
    transform: translateY(-3px) !important;
    border-color: #CFD6E0 !important;
    box-shadow: 0 12px 32px rgba(15,34,56,0.10) !important;
}

/* Card link — wraps the entire card, kills WC default button styling */
.cit-shop-grid-wrap .products li.product a.woocommerce-LoopProduct-link,
.cit-shop-grid-wrap .products li.product > a {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    color: inherit !important;
    text-decoration: none !important;
    padding: 1rem !important;
}

/* Image area — fixed aspect-ratio, contained image, soft background */
.cit-shop-grid-wrap .products li.product img,
.cit-shop-grid-wrap .products li.product .attachment-woocommerce_thumbnail {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: contain !important;
    background: #F7F8FA !important;
    border-radius: 10px !important;
    padding: 1rem !important;
    margin: 0 0 1rem !important;
    box-sizing: border-box !important;
}

/* Sale badge ("Sale") — floating pill top-left */
.cit-shop-grid-wrap .products li.product .onsale,
.cit-shop-grid-wrap .products li.product span.onsale {
    position: absolute !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    background: var(--cit-orange) !important;
    color: #fff !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0.3125rem 0.625rem !important;
    border-radius: 999px !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(242,101,34,0.25) !important;
    line-height: 1 !important;
    z-index: 2 !important;
}

/* Product title — 2-line clamp, navy, small */
.cit-shop-grid-wrap .products li.product .woocommerce-loop-product__title,
.cit-shop-grid-wrap .products li.product h2.woocommerce-loop-product__title,
.cit-shop-grid-wrap .products li.product h3.woocommerce-loop-product__title {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--cit-navy) !important;
    margin: 0 0 0.625rem !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: calc(0.9375rem * 1.35 * 2) !important;
    max-height: calc(0.9375rem * 1.35 * 2) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Star rating row under title — subtle */
.cit-shop-grid-wrap .products li.product .star-rating {
    display: block !important;
    width: 5.4em !important;
    height: 1em !important;
    font-size: 0.75rem !important;
    margin: 0 0 0.5rem !important;
    color: var(--cit-orange) !important;
    line-height: 1 !important;
}

/* Price block — bold now, strikethrough was, "from" eyebrow */
.cit-shop-grid-wrap .products li.product .price {
    margin: auto 0 0 !important;
    color: var(--cit-navy) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}
.cit-shop-grid-wrap .products li.product .price del,
.cit-shop-grid-wrap .products li.product .price del .woocommerce-Price-amount {
    color: #9AA3B0 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    text-decoration: line-through !important;
    opacity: 1 !important;
    order: 2 !important;
}
.cit-shop-grid-wrap .products li.product .price ins,
.cit-shop-grid-wrap .products li.product .price ins .woocommerce-Price-amount {
    background: transparent !important;
    text-decoration: none !important;
    color: var(--cit-navy) !important;
    font-weight: 700 !important;
    order: 1 !important;
}
.cit-shop-grid-wrap .products li.product .price .woocommerce-Price-amount {
    color: inherit;
}

/* Hide the WC "Add to cart" / "Select options" button — card is the link */
.cit-shop-grid-wrap .products li.product .button,
.cit-shop-grid-wrap .products li.product .add_to_cart_button,
.cit-shop-grid-wrap .products li.product .added_to_cart {
    display: none !important;
}

/* ---- Results toolbar — sits above the product grid -------------------- */

.cit-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0.875rem 1.125rem;
    background: #fff;
    border: 1px solid var(--cit-border);
    border-radius: 12px;
    flex-wrap: wrap;
}
.cit-shop-toolbar-count {
    font-size: 0.9375rem;
    color: var(--cit-text);
}
.cit-shop-toolbar-count strong {
    color: var(--cit-navy);
    font-weight: 700;
}
.cit-shop-toolbar-sort {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--cit-text-muted);
}
.cit-shop-toolbar-sort label {
    font-weight: 600;
    color: var(--cit-text);
}
.cit-shop-toolbar-sort select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--cit-border);
    border-radius: 8px;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cit-navy);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F2238' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
}
.cit-shop-toolbar-sort select:focus {
    outline: 0;
    border-color: var(--cit-navy);
    box-shadow: 0 0 0 3px rgba(15,34,56,0.10);
}

/* Hide WC's default result-count and ordering blocks — toolbar replaces them */
.cit-shop-grid-wrap .woocommerce-result-count,
.cit-shop-grid-wrap .woocommerce-ordering {
    display: none !important;
}

/* ---- Pagination at the bottom of the grid ----------------------------- */

.cit-shop-grid-wrap .woocommerce-pagination {
    margin: 2rem 0 0 !important;
    text-align: center;
}
.cit-shop-grid-wrap .woocommerce-pagination ul.page-numbers {
    display: inline-flex !important;
    gap: 0.375rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
.cit-shop-grid-wrap .woocommerce-pagination ul.page-numbers li {
    margin: 0 !important;
    border: 0 !important;
}
.cit-shop-grid-wrap .woocommerce-pagination a.page-numbers,
.cit-shop-grid-wrap .woocommerce-pagination span.page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 0.875rem !important;
    border: 1px solid var(--cit-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--cit-navy) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease !important;
}
.cit-shop-grid-wrap .woocommerce-pagination a.page-numbers:hover {
    border-color: var(--cit-navy) !important;
    background: #F7F8FA !important;
}
.cit-shop-grid-wrap .woocommerce-pagination span.page-numbers.current {
    background: var(--cit-navy) !important;
    border-color: var(--cit-navy) !important;
    color: #fff !important;
}

/* ==========================================================================
   v0.23.1 — Mobile filter drawer (slide-in from right)
   ==========================================================================
   Standard ecomm pattern: filters hidden by default on mobile, revealed via
   a "Filter" button in the toolbar. Slides in from the right over a
   semi-transparent backdrop. Body scroll locks while open. Close via X,
   backdrop tap, ESC key, or "Show products" CTA at the bottom.
   ========================================================================== */

/* Hide drawer-only chrome on desktop */
.cit-shop-filter-toggle,
.cit-shop-sidebar-close,
.cit-shop-sidebar-apply,
.cit-shop-sidebar-drawer-header,
.cit-shop-filters-backdrop {
    display: none;
}

/* Mobile breakpoint — drawer mode */
@media (max-width: 980px) {

    /* "Filter" button — sits next to the sort dropdown in the toolbar */
    .cit-shop-filter-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.875rem;
        background: var(--cit-navy);
        color: #fff;
        border: 0;
        border-radius: 8px;
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease;
        position: relative;
    }
    .cit-shop-filter-toggle:hover { background: #1A3556; }
    .cit-shop-filter-toggle svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
    }
    .cit-shop-filter-toggle .cit-shop-filter-toggle-count {
        background: var(--cit-orange);
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 700;
        padding: 0.125rem 0.4375rem;
        border-radius: 999px;
        min-width: 18px;
        text-align: center;
        line-height: 1.2;
    }
    .cit-shop-filter-toggle .cit-shop-filter-toggle-count:empty {
        display: none;
    }

    /* Toolbar layout shift on mobile — group buttons together on the right */
    .cit-shop-toolbar {
        gap: 0.625rem;
    }
    .cit-shop-toolbar-count {
        flex: 1 1 100%;
        order: 1;
        font-size: 0.875rem;
    }
    .cit-shop-toolbar-sort {
        order: 2;
    }
    .cit-shop-filter-toggle {
        order: 3;
    }

    /* Sidebar becomes a fixed slide-in drawer */
    .cit-shop-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 88% !important;
        max-width: 380px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #fff !important;
        z-index: 1001 !important;
        transform: translateX(100%) !important;
        transition: transform 0.28s ease !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: -8px 0 32px rgba(0,0,0,0.18) !important;
        align-self: stretch !important;
    }
    body.cit-shop-filters-open .cit-shop-sidebar {
        transform: translateX(0) !important;
    }

    /* Backdrop — covers everything behind the drawer */
    .cit-shop-filters-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 34, 56, 0.55) !important;
        z-index: 1000 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease !important;
    }
    body.cit-shop-filters-open .cit-shop-filters-backdrop {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Lock body scroll while drawer is open */
    body.cit-shop-filters-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    /* Drawer header — title + close button */
    .cit-shop-sidebar-drawer-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1.125rem 1.25rem !important;
        border-bottom: 1px solid var(--cit-border) !important;
        position: sticky !important;
        top: 0 !important;
        background: #fff !important;
        z-index: 5 !important;
    }
    .cit-shop-sidebar-drawer-header h2 {
        margin: 0 !important;
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        color: var(--cit-navy) !important;
    }
    .cit-shop-sidebar-close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: transparent;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        color: var(--cit-navy);
        padding: 0;
        transition: background 0.12s ease;
    }
    .cit-shop-sidebar-close:hover {
        background: #F7F8FA;
    }
    .cit-shop-sidebar-close svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
    }

    /* Inner padding for the filter content inside the drawer */
    .cit-shop-sidebar > .cit-shop-filter-section,
    .cit-shop-sidebar > .cit-shop-sidebar-trust,
    .cit-shop-sidebar > .cit-shop-sort {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    .cit-shop-sidebar > .cit-shop-filter-section {
        padding-top: 1rem !important;
    }
    .cit-shop-sidebar > .cit-shop-sidebar-trust {
        margin: 1.25rem !important;
    }

    /* Sticky "Show products" CTA at the bottom */
    .cit-shop-sidebar-apply {
        display: flex !important;
        position: sticky !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 1.5rem 0 0 !important;
        padding: 1rem 1.25rem 1.25rem !important;
        background: #fff !important;
        border-top: 1px solid var(--cit-border) !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.04) !important;
        z-index: 5 !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .cit-shop-sidebar-apply-btn {
        width: 100%;
        padding: 0.875rem 1rem;
        background: var(--cit-orange);
        color: #fff;
        border: 0;
        border-radius: 10px;
        font-size: 0.9375rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        transition: background 0.15s ease;
    }
    .cit-shop-sidebar-apply-btn:hover {
        background: #D94F0F;
    }
    .cit-shop-sidebar-apply-clear {
        background: transparent;
        border: 0;
        color: var(--cit-text-muted);
        font-size: 0.8125rem;
        font-weight: 600;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
        padding: 0.25rem;
    }
    .cit-shop-sidebar-apply-clear:hover {
        color: var(--cit-navy);
    }
    .cit-shop-sidebar-apply-clear[hidden] {
        display: none;
    }

}

/* ==========================================================================
   v0.23.2 — Patches against plugin/theme leakage
   ==========================================================================
   Real-world fixes after looking at the rendered staging page:
     1. SALE badge was painting as a full-width orange strip because Kadence
        (or another plugin) styles span.onsale as block + width:100% — needed
        much stronger overrides
     2. BeRocket renders each filter option with checkbox / label / count as
        separate stacked elements, not inside a flex container
     3. BeRocket has its own +/- toggle next to our chevron — needed to kill
        the native one
     4. Product image had too much padding making the image feel small in
        the frame
     5. WC view-mode toggle (grid/list icons) was leaking through next to
        our toolbar
   ========================================================================== */

/* ---- 1. SALE badge — kill the strip, force pill ----------------------- */
/*
   Use the highest specificity we can without being silly. body.woocommerce
   wins over plain .woocommerce, and the cascade of selectors below covers
   every variant of where the badge might live in the DOM.
*/
body .cit-shop-grid-wrap .products li.product .onsale,
body .cit-shop-grid-wrap .products li.product span.onsale,
body.woocommerce .cit-shop-grid-wrap .products li.product .onsale,
body.woocommerce .cit-shop-grid-wrap .products li.product span.onsale,
.cit-shop-grid-wrap .products li.product > .onsale,
.cit-shop-grid-wrap .products li.product a > .onsale,
.cit-shop-grid-wrap .products li.product .woocommerce-LoopProduct-link .onsale {
    position: absolute !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0.3125rem 0.625rem !important;
    background: var(--cit-orange) !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(242,101,34,0.25) !important;
    transform: none !important;
    display: inline-block !important;
    z-index: 3 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
/* "Sale!" → "Sale" handled at source via woocommerce_sale_flash filter in
 * functions.php. CSS swap removed because it caused "SaleSALE!" doubling
 * when the original text wasn't fully suppressed. */

/* ---- 2. Filter row layout — checkbox + label + count on ONE line ------ */
/*
   BeRocket markup pattern: <li><input><label>NAME</label><span class="count">(N)</span></li>
   Making the li itself the flex container is the cleanest win — the children
   then sit horizontally regardless of plugin version.
*/
.cit-shop-sidebar .cit-shop-filter-section ul li,
.cit-shop-sidebar .cit-shop-filter-section .bapf_sfilter ul li,
.cit-shop-sidebar .cit-shop-filter-section .br_filters_single ul li,
.cit-shop-sidebar .cit-shop-filter-section .widget ul li,
.cit-shop-sidebar .cit-shop-filter-section .bapf_sfilter_blocks {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding: 0.4375rem 0.5rem !important;
    margin: 0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    transition: background 0.12s ease !important;
}
.cit-shop-sidebar .cit-shop-filter-section ul li:hover,
.cit-shop-sidebar .cit-shop-filter-section .bapf_sfilter ul li:hover {
    background: #F7F8FA !important;
}
/* Inside-the-row elements — kill block-level wrapping */
.cit-shop-sidebar .cit-shop-filter-section ul li label,
.cit-shop-sidebar .cit-shop-filter-section ul li > a,
.cit-shop-sidebar .cit-shop-filter-section ul li .bapf_dis_item_name,
.cit-shop-sidebar .cit-shop-filter-section ul li .bapf_item_name {
    display: inline !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: var(--cit-text) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.cit-shop-sidebar .cit-shop-filter-section ul li input[type="checkbox"],
.cit-shop-sidebar .cit-shop-filter-section ul li input[type="radio"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.cit-shop-sidebar .cit-shop-filter-section ul li .count,
.cit-shop-sidebar .cit-shop-filter-section ul li .bapf_count,
.cit-shop-sidebar .cit-shop-filter-section ul li .bapf_dis_item_count {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    color: var(--cit-text-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* Tighter scroll behavior — only scroll when content actually overflows */
.cit-shop-sidebar .cit-shop-filter-section ul,
.cit-shop-sidebar .cit-shop-filter-section .bapf_sfilter ul,
.cit-shop-sidebar .cit-shop-filter-section .br_filters_single ul {
    max-height: 240px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: #CFD6E0 transparent !important;
}
.cit-shop-sidebar .cit-shop-filter-section ul::-webkit-scrollbar {
    width: 6px;
}
.cit-shop-sidebar .cit-shop-filter-section ul::-webkit-scrollbar-thumb {
    background: #CFD6E0;
    border-radius: 3px;
}

/* ---- 3. Hide BeRocket's native toggle icon (we render our own chevron) - */
.cit-shop-filter-section .bapf_minus,
.cit-shop-filter-section .bapf_plus,
.cit-shop-filter-section .bapf_collapse_arrow,
.cit-shop-filter-section .bapf_sfilter > .bapf_head > i,
.cit-shop-filter-section .bapf_sfilter > .bapf_head > svg,
.cit-shop-filter-section .br_collapse_arrow,
.cit-shop-filter-section .widget-title .toggle,
.cit-shop-filter-section .widget-title i {
    display: none !important;
}

/* ---- 4. Product image — fill more of the frame ------------------------ */
/*
   Reduced padding from 1rem to 0.5rem so the image actually fills the
   container. Aspect ratio kept at 4:3 which matches WC's default thumb
   size. Background stays soft grey so a small image with vertical bars
   doesn't look broken.
*/
.cit-shop-grid-wrap .products li.product img,
.cit-shop-grid-wrap .products li.product .attachment-woocommerce_thumbnail,
.cit-shop-grid-wrap .products li.product a img {
    width: 100% !important;
    aspect-ratio: 5 / 4 !important;     /* shorter container — less wasted space */
    height: auto !important;
    max-height: 220px !important;
    object-fit: contain !important;
    object-position: center !important; /* center image both axes */
    background: #F7F8FA !important;
    border-radius: 10px !important;
    padding: 0 !important;              /* let the image fill — removed 0.5rem inset */
    margin: 0 0 0.875rem !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ---- 5. Hide WC grid/list view-mode toggle ---------------------------- */
.cit-shop-grid-wrap .wc-block-product-template__layouts,
.cit-shop-grid-wrap .product-view-mode,
.cit-shop-grid-wrap .display-mode-toggle,
.cit-shop-grid-wrap .woocommerce-products-header__display-mode,
.cit-shop-grid-wrap [class*="view-mode-toggle"],
.cit-shop-grid-wrap .yith-wcfm-product-view-mode,
.cit-shop-grid-wrap .product-list-grid-toggle {
    display: none !important;
}

/* ---- 6. noUiSlider tooltip blue bubbles → navy (BeRocket "8 GB" / "32 GB") -- */
.cit-shop-filter-section .noUi-tooltip,
.cit-shop-filter-section .bapf_slidr_main .noUi-tooltip,
.cit-shop-filter-section .noUi-pips,
.cit-shop-filter-section .noUi-value {
    background: var(--cit-navy) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    padding: 0.1875rem 0.375rem !important;
    box-shadow: none !important;
}
/* Override noUiSlider's blue handle/connect (commonly bundled with WP plugins) */
.cit-shop-filter-section .noUi-target {
    background: var(--cit-border) !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 4px !important;
    border-radius: 2px !important;
}
.cit-shop-filter-section .noUi-connects {
    border-radius: 2px !important;
    background: transparent !important;
}
.cit-shop-filter-section .noUi-connect {
    background: var(--cit-orange) !important;
    box-shadow: none !important;
}
.cit-shop-filter-section .noUi-handle {
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border: 2px solid var(--cit-orange) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    cursor: grab !important;
    right: -9px !important;
    top: -8px !important;
}
.cit-shop-filter-section .noUi-handle::before,
.cit-shop-filter-section .noUi-handle::after {
    display: none !important;
}

/* ==========================================================================
   v0.24.0 — /contact-us/ page
   ==========================================================================
   Routed support page. Reuses .cit-business-* primitives (hero / section /
   form / serjax card) for consistency; adds .cit-contact-* for the
   channels row, routed cards, FAQ accordion and handoff strip.
   ========================================================================== */

/* ---- Channel row in the hero (WhatsApp / Phone / Email / Visit) ------- */

.cit-contact-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.875rem;
    margin-top: 2rem;
    max-width: 1080px;
}
.cit-contact-channel {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cit-contact-channel:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.30);
    color: #fff;
    transform: translateY(-1px);
}
.cit-contact-channel-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.10);
    border-radius: 10px;
    color: #fff;
    flex-shrink: 0;
}
.cit-contact-channel-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.cit-contact-channel-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.125rem;
}
.cit-contact-channel-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    word-break: break-word;
}

/* WhatsApp gets the brand green — first card stands out */
.cit-contact-channel--whatsapp {
    background: #25D366;
    border-color: #25D366;
}
.cit-contact-channel--whatsapp:hover {
    background: #1FB855;
    border-color: #1FB855;
}
.cit-contact-channel--whatsapp .cit-contact-channel-icon {
    background: rgba(0,0,0,0.15);
    color: #fff;
}
.cit-contact-channel--whatsapp .cit-contact-channel-label {
    color: rgba(255,255,255,0.85);
}

/* ---- Routed cards (Buy / Order / Repair) ------------------------------ */

.cit-contact-routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.cit-contact-route {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 14px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cit-contact-route:hover {
    transform: translateY(-2px);
    border-color: #CFD6E0;
    box-shadow: 0 10px 28px rgba(15,34,56,0.08);
}
.cit-contact-route-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    background: rgba(242,101,34,0.10);
    color: var(--cit-orange);
    border-radius: 14px;
    margin-bottom: 1.125rem;
}
.cit-contact-route h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.625rem;
    line-height: 1.25;
}
.cit-contact-route p {
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    flex: 1;
}
.cit-contact-route-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
}
.cit-contact-route-actions .cit-btn-primary {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}
.cit-contact-route-actions .cit-btn-primary:hover {
    background: #1FB855;
    border-color: #1FB855;
    color: #fff;
}
.cit-contact-route-link {
    color: var(--cit-navy);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #CFD6E0;
    padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cit-contact-route-link:hover {
    color: var(--cit-orange);
    border-bottom-color: var(--cit-orange);
}

/* ---- FAQ accordion ----------------------------------------------------- */

.cit-contact-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem 2rem;
    max-width: 1080px;
    margin: 0 auto;
}
@media (max-width: 780px) {
    .cit-contact-faq-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.cit-contact-faq-item {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.cit-contact-faq-item[open] {
    border-color: #CFD6E0;
    box-shadow: 0 6px 18px rgba(15,34,56,0.05);
}
.cit-contact-faq-item > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cit-navy);
    cursor: pointer;
    list-style: none;
    line-height: 1.4;
}
.cit-contact-faq-item > summary::-webkit-details-marker {
    display: none;
}
.cit-contact-faq-item > summary::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--cit-text-muted);
    border-bottom: 2px solid var(--cit-text-muted);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.cit-contact-faq-item[open] > summary::after {
    transform: rotate(225deg);
}
.cit-contact-faq-item > p {
    margin: 0 !important;
    padding: 0 1.125rem 1.125rem !important;
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.6;
}
.cit-contact-faq-item > p a {
    color: var(--cit-navy);
    text-decoration: underline;
}

/* ---- Visit-shop band reuses serjax card chrome ------------------------ */
.cit-contact-visit .cit-business-serjax-list ul li:last-child {
    color: var(--cit-text-muted);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* ---- Business / Schools handoff strip --------------------------------- */

.cit-contact-handoff {
    background: #F7F8FA;
}
.cit-contact-handoff-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
}
@media (max-width: 780px) {
    .cit-contact-handoff-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.cit-contact-handoff-card {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 14px;
    padding: 1.75rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    color: var(--cit-text);
}
.cit-contact-handoff-card:hover {
    transform: translateY(-2px);
    border-color: #CFD6E0;
    box-shadow: 0 10px 28px rgba(15,34,56,0.08);
    color: var(--cit-text);
}
.cit-contact-handoff-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cit-orange);
    margin-bottom: 0.5rem;
}
.cit-contact-handoff-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.cit-contact-handoff-card p {
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.55;
    margin: 0 0 1rem;
}
.cit-contact-handoff-link {
    margin-top: auto;
    color: var(--cit-navy);
    font-size: 0.9375rem;
    font-weight: 600;
}
.cit-contact-handoff-card:hover .cit-contact-handoff-link {
    color: var(--cit-orange);
}

/* ==========================================================================
   v0.25.0 — Inner service / repair pages
   ==========================================================================
   Phone / computer / tablet / console / data-recovery / electronics / mail-in.
   Reuses cit-business-* primitives; adds:
     - .cit-service-steps          (numbered process lists)
     - .cit-service-brands         (brands strip band)
     - .cit-service-mailin-strip   (mail-in callout — reuses serjax chrome)
     - .cit-service-final-cta      (orange CTA at the end)
     - .cit-btn-whatsapp           (WhatsApp green button variant)
     - .cit-btn-ghost-light        (ghost button on dark backgrounds)
   ========================================================================== */

/* ---- WhatsApp button variant (used hero + final CTA) ------------------ */

.cit-btn-whatsapp {
    background: #25D366 !important;
    color: #fff !important;
    border-color: #25D366 !important;
}
.cit-btn-whatsapp:hover {
    background: #1FB855 !important;
    border-color: #1FB855 !important;
    color: #fff !important;
}

/* ---- Ghost button on dark backgrounds --------------------------------- */

.cit-btn-ghost-light {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.cit-btn-ghost-light:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* ---- Numbered process steps (mail-in, repair pages) ------------------- */

.cit-service-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: cit-step;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    max-width: 920px;
}
.cit-service-step {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.5rem 4.5rem;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cit-service-step:hover {
    border-color: #CFD6E0;
    box-shadow: 0 6px 18px rgba(15,34,56,0.06);
}
.cit-service-step-num {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cit-orange);
    color: #fff;
    border-radius: 50%;
    font-size: 0.9375rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cit-service-step h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.cit-service-step p {
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.55;
    margin: 0;
}

/* Compact variant — 4-step process bands inside cit-business-why */
.cit-service-steps-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: none;
}
.cit-service-steps-compact .cit-service-step {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
}
.cit-service-steps-compact .cit-service-step-num {
    position: static;
    margin-bottom: 0.875rem;
}

/* ---- Brands strip band (just a section header, no grid) --------------- */

.cit-service-brands {
    background: #F7F8FA;
    padding: 2.5rem 0 !important;
}
.cit-service-brands .cit-business-section-header {
    margin-bottom: 0;
    max-width: 880px;
}
.cit-service-brands .cit-business-section-header h2 {
    font-size: 1.375rem;
    line-height: 1.3;
}

/* ---- Mail-in strip — reuses serjax card with orange accent ------------ */

.cit-service-mailin-strip {
    background: var(--cit-cream, #F5EDD9);
}
.cit-service-mailin-strip .cit-business-serjax-card {
    border-color: #E5D8B1;
}

/* ---- Final CTA band (orange / navy split) ----------------------------- */

.cit-service-final-cta {
    background: linear-gradient(135deg, var(--cit-orange, #F26522) 0%, #D94F0F 100%);
    color: #fff;
    padding: 4rem 0;
    text-align: center;
}
.cit-service-final-cta h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    margin: 0 0 0.875rem;
    line-height: 1.2;
}
.cit-service-final-cta p {
    color: rgba(255,255,255,0.92);
    font-size: 1.0625rem;
    max-width: 620px;
    margin: 0 auto 2rem;
    line-height: 1.55;
}
.cit-service-final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    align-items: center;
}
.cit-service-final-cta-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 2px;
    transition: border-color 0.15s ease;
    margin-left: 0.5rem;
}
.cit-service-final-cta-link:hover {
    border-bottom-color: #fff;
    color: #fff;
}

/* Final-CTA WhatsApp button stays green even inside the orange band */
.cit-service-final-cta .cit-btn-whatsapp {
    background: #25D366 !important;
    border-color: #25D366 !important;
}
.cit-service-final-cta .cit-btn-whatsapp:hover {
    background: #1FB855 !important;
    border-color: #1FB855 !important;
}

/* ==========================================================================
   v0.25.3 — "What's in the box" buy-box block
   ==========================================================================
   Reassurance block on single product pages for laptops / desktops /
   gaming PCs / monitors. Sits between Finance and Trust Grid inside the
   buy box. PHP conditional on category — see content-single-product.php.
   ========================================================================== */

.cit-product-box-contents {
    background: var(--cit-cream, #F5EDD9);
    border: 1px solid #E5D8B1;
    border-radius: 12px;
    padding: 1rem 1.125rem;
    margin: 1rem 0;
}
.cit-product-box-contents-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cit-product-box-contents-title svg {
    color: var(--cit-orange, #F26522);
    flex-shrink: 0;
}
.cit-product-box-contents-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cit-product-box-contents-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--cit-text, #1B2436);
    margin: 0;
    padding: 0;
}
.cit-product-box-contents-list .cit-box-check {
    color: var(--cit-orange, #F26522);
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.cit-product-box-contents-list li strong {
    color: var(--cit-navy, #0F2238);
    font-weight: 700;
}

/* Under-gallery variant — sits directly below the product image, in the
 * left column. Slightly larger margins to breathe. */
.cit-product-box-contents-under-gallery {
    margin: 1.25rem 0 0 !important;
}

/* ==========================================================================
   v0.25.6 — Align bottom boxes (What's in the box + Trust grid)
   ==========================================================================
   Two bottom cream cards (one under gallery, one under buy box) need to
   line up at the same baseline. Make both column wrappers flex-column with
   stretch, then push the bottom box down with margin-top: auto.

   The parent grid (.cit-product-hero-inner) already aligns children to
   stretch by default, so both columns are the same height — we just need
   each column to be a flex container and push the bottom block down.
   ========================================================================== */

/* Gallery column becomes a flex column so the in-the-box block can be
 * pushed to the bottom. Don't stretch the image — only the bottom block. */
.cit-product-hero-inner > .cit-product-gallery,
.cit-product-hero-inner-3col > .cit-product-gallery {
    display: flex !important;
    flex-direction: column !important;
}
/* Push the in-the-box block to the bottom of the gallery column */
.cit-product-gallery .cit-product-box-contents-under-gallery {
    margin-top: auto !important;
}

/* Buy box column flex-column so the trust grid sticks to the bottom */
.cit-product-hero-inner > .cit-product-summary,
.cit-product-hero-inner-3col > .cit-product-summary {
    display: flex !important;
    flex-direction: column !important;
}
.cit-product-summary > .cit-product-trust-grid {
    margin-top: auto !important;
}

/* Only enforce this alignment on wider screens where the two-column
 * layout exists. On mobile the columns stack so equalising heights is
 * pointless — let content flow naturally. */
@media (max-width: 768px) {
    .cit-product-gallery .cit-product-box-contents-under-gallery,
    .cit-product-summary > .cit-product-trust-grid {
        margin-top: 1.25rem !important;
    }
}

/* ==========================================================================
   v0.25.7 — fix the actual root cause
   ==========================================================================
   The parent grid had `align-items: flex-start` baked in (line 4249), which
   meant both columns only took their natural content heights. No matter how
   many "margin-top: auto" tricks I added below, there was no extra space
   to push into. Switching to stretch lets the shorter column (usually the
   gallery side) grow to match the taller column, and the bottom boxes
   actually land at the same baseline.
   ========================================================================== */

.cit-product-hero-inner,
.cit-product-hero-inner-3col {
    align-items: stretch !important;
}

/* Reset stretch on mobile — columns stack, no equalisation needed */
@media (max-width: 768px) {
    .cit-product-hero-inner,
    .cit-product-hero-inner-3col {
        align-items: start !important;
    }
}

/* ==========================================================================
   v0.25.8 — Make the two bottom cream cards look like a proper matched pair
   ==========================================================================
   Even after stretching columns + pushing both boxes to the bottom, the
   boxes themselves had different intrinsic heights (in-the-box has a title
   row + 3 bullets; trust grid has 4 items in a 2×2 with no title). Result:
   both anchored to the same baseline but with different tops.

   Fix: give the trust grid the same padding/border-radius as the in-the-box,
   add a matching title row, and make both boxes display:flex column so any
   leftover vertical space distributes evenly. They now read as a clean
   matched pair.
   ========================================================================== */

/* Trust grid card — match the in-the-box visual treatment */
.cit-product-summary > .cit-product-trust-grid {
    padding: 1rem 1.125rem !important;
    border-radius: 12px !important;
    background: var(--cit-cream, #F5EDD9) !important;
    border: 1px solid #E5D8B1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Title row injected via ::before so we don't need to touch the PHP */
.cit-product-summary > .cit-product-trust-grid::before {
    content: "Why shop with us";
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    text-indent: 1.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F26522' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 18px 18px;
}

/* Force the 2x2 grid back inside the flex column wrapper */
.cit-product-summary > .cit-product-trust-grid > li {
    display: flex !important;
}
.cit-product-summary > .cit-product-trust-grid {
    /* Re-establish the 2x2 grid for the items only — wrap them in a
     * nested grid via display:grid in a pseudo. Actually CSS doesn't let
     * us do that cleanly. Switch to: keep flex column on parent, force
     * the four <li> children into a 2×2 grid via inline grid wrapper.
     * Simplest cross-browser: use a nested grid on the items themselves
     * via :nth-child positioning. */
}

/* The items themselves form a 2x2 — wrap them via flex-wrap */
.cit-product-summary > .cit-product-trust-grid {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    column-gap: 0.875rem !important;
    row-gap: 0.875rem !important;
}
.cit-product-summary > .cit-product-trust-grid > li {
    flex: 0 0 calc(50% - 0.4375rem) !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
}

/* ::before title needs full-width on row */
.cit-product-summary > .cit-product-trust-grid::before {
    flex: 0 0 100% !important;
    min-width: 100% !important;
}

/* In-the-box card — give it a flex-column structure too so it behaves
 * the same way and any leftover height is consistent */
.cit-product-gallery .cit-product-box-contents-under-gallery {
    display: flex !important;
    flex-direction: column !important;
}

/* Mobile fallback — single-column items for trust grid on narrow screens */
@media (max-width: 480px) {
    .cit-product-summary > .cit-product-trust-grid > li {
        flex: 0 0 100% !important;
    }
}

/* ==========================================================================
   v0.26.0 — Grading callout band (category pages) + /grading/ page styles
   ========================================================================== */

/* ---- Category page grading band --------------------------------------- */

.cit-cat-grading-band {
    background: var(--cit-cream, #F5EDD9);
    border-top: 1px solid #E5D8B1;
    border-bottom: 1px solid #E5D8B1;
    padding: 1.75rem 0;
}
.cit-cat-grading-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 2rem;
    align-items: center;
}
@media (max-width: 880px) {
    .cit-cat-grading-band-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}
.cit-cat-grading-band-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--cit-orange);
    margin-bottom: 0.375rem;
}
.cit-cat-grading-band-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}
.cit-cat-grading-band-lead {
    font-size: 0.875rem;
    color: #4A5568;
    margin: 0 0 0.625rem;
    line-height: 1.5;
}
.cit-cat-grading-band-link {
    color: var(--cit-navy);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #CFD6E0;
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cit-cat-grading-band-link:hover {
    color: var(--cit-orange);
    border-bottom-color: var(--cit-orange);
}

/* Grades row — 5 inline pills */
.cit-cat-grading-band-grades {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.625rem;
}
@media (max-width: 980px) {
    .cit-cat-grading-band-grades {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}
.cit-cat-grade {
    background: #fff;
    border: 1px solid #E5D8B1;
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}
.cit-cat-grade-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
}
.cit-cat-grade-text {
    font-size: 0.75rem;
    color: #4A5568;
    line-height: 1.35;
}

/* Per-grade colour accents on the label */
.cit-cat-grade-new   .cit-cat-grade-label { color: #1F7A4D; }
.cit-cat-grade-aplus .cit-cat-grade-label { color: var(--cit-navy); }
.cit-cat-grade-a     .cit-cat-grade-label { color: var(--cit-orange); }
.cit-cat-grade-b     .cit-cat-grade-label { color: #B4641F; }
.cit-cat-grade-c     .cit-cat-grade-label { color: #8A4A14; }

/* ---- Click-to-open keyboard popover (triggered from loop pill) -------- */
/* The pill on each card is a button with cursor pointer + subtle hover so it
   feels clickable. On click, the shared dialog at page bottom opens with
   the specific layout's explanation. */
button.cit-loop-keyboard {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.cit-loop-keyboard:hover {
    background: #ECF0F6;
    border-color: var(--cit-orange);
    color: var(--cit-navy);
}
button.cit-loop-keyboard:focus-visible {
    outline: 2px solid var(--cit-orange);
    outline-offset: 2px;
}

/* Centered dialog with backdrop */
.cit-kbd-popover[hidden] { display: none; }
.cit-kbd-popover {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.cit-kbd-popover-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 34, 56, 0.65);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.cit-kbd-popover-panel {
    position: relative;
    background: #fff;
    border-radius: 14px;
    max-width: 460px;
    width: 100%;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 20px 60px -10px rgba(15, 34, 56, 0.35);
    animation: cit-kbd-pop-in 0.18s ease-out;
}
@keyframes cit-kbd-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cit-kbd-popover-close {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    background: transparent;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--cit-text-muted, #4A5568);
    border-radius: 6px;
    line-height: 0;
}
.cit-kbd-popover-close:hover { background: #F4F6FA; color: var(--cit-navy); }
.cit-kbd-popover-eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--cit-orange);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.cit-kbd-popover-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--cit-navy);
    margin: 0 0 0.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.cit-kbd-popover-body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #2D3748;
    margin: 0 0 1rem;
}
.cit-kbd-popover-foot {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cit-text-muted, #4A5568);
    margin: 0;
    padding-top: 0.875rem;
    border-top: 1px solid #ECEFF3;
}
body.cit-kbd-popover-open { overflow: hidden; }

/* Product page keyboard row: now a link, mirror the condition row hover */
.cit-product-keyboard-row {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cit-product-keyboard-row:hover {
    background: #EAF0F8;
    border-color: #B6C5D6;
    transform: translateY(-1px);
}
.cit-product-keyboard-info {
    font-size: 0.8125rem;
    color: var(--cit-navy, #0F2238);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.cit-product-keyboard-row:hover .cit-product-keyboard-info {
    opacity: 1;
}
@media (max-width: 480px) {
    .cit-product-keyboard-info { font-size: 0.75rem; flex-basis: 100%; }
}

/* ---- Stock location row (Ships from Mullingar Shop / Warehouse) ------- */
.cit-product-stock-loc-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: #FFF7EB;
    border: 1px solid #F0D9A6;
    border-radius: 10px;
    margin: 0 0 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cit-product-stock-loc-row:hover {
    background: #FCEAC4;
    border-color: #E6BD66;
    transform: translateY(-1px);
}
.cit-product-stock-loc-icon {
    flex-shrink: 0;
    color: var(--cit-orange, #F26522);
    display: inline-flex;
    align-items: center;
}
.cit-product-stock-loc-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #8A5A14;
    flex-shrink: 0;
}
.cit-product-stock-loc-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.cit-product-stock-loc-info {
    font-size: 0.8125rem;
    color: var(--cit-navy, #0F2238);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.cit-product-stock-loc-row:hover .cit-product-stock-loc-info {
    opacity: 1;
}
@media (max-width: 480px) {
    .cit-product-stock-loc-row {
        flex-wrap: wrap;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
    }
    .cit-product-stock-loc-label { flex-basis: 100%; }
    .cit-product-stock-loc-info { font-size: 0.75rem; flex-basis: 100%; }
}

/* ---- /grading/ page — 5 grade cards in a column ----------------------- */

.cit-grading-grades-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 920px;
    margin: 0 auto;
}
.cit-grading-grade-card {
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 14px;
    padding: 1.75rem;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cit-grading-grade-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 34, 56, 0.08);
}
.cit-grading-grade-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
}
.cit-grading-grade-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.cit-grading-grade-card-new   .cit-grading-grade-card-badge { background: #E7F4EC; color: #1F7A4D; }
.cit-grading-grade-card-aplus .cit-grading-grade-card-badge { background: rgba(15,34,56,0.10); color: var(--cit-navy); }
.cit-grading-grade-card-a     .cit-grading-grade-card-badge { background: rgba(242,101,34,0.12); color: var(--cit-orange); }
.cit-grading-grade-card-b     .cit-grading-grade-card-badge { background: #F4E4D0; color: #B4641F; }
.cit-grading-grade-card-c     .cit-grading-grade-card-badge { background: #EFDBC0; color: #8A4A14; }

.cit-grading-grade-card-head h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0;
    line-height: 1.3;
}
.cit-grading-grade-card p {
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.6;
    margin: 0 0 0.875rem;
}
.cit-grading-grade-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem 1rem;
}
@media (max-width: 640px) {
    .cit-grading-grade-card-list {
        grid-template-columns: minmax(0, 1fr);
    }
}
.cit-grading-grade-card-list li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #1B2436;
    line-height: 1.5;
}
.cit-grading-grade-card-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cit-orange);
    font-weight: 700;
}
.cit-grading-grade-card-list li strong {
    color: var(--cit-navy);
    font-weight: 700;
}

/* ---- /grading/ page — Promise card ------------------------------------ */

.cit-grading-promise {
    background: var(--cit-navy);
    color: #fff;
}
.cit-grading-promise-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.cit-grading-promise-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--cit-orange);
    margin-bottom: 0.875rem;
}
.cit-grading-promise-card h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    margin: 0 0 1.25rem;
    line-height: 1.25;
}
.cit-grading-promise-card p {
    color: rgba(255,255,255,0.88);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}
.cit-grading-promise-card p:last-child { margin-bottom: 0; }

/* ==========================================================================
   v0.26.1 — Condition pill on category product cards
   ==========================================================================
   Sits between title and price on every product card in shop/category loops.
   Colour-coded so customers can scan a grid and spot the grade hierarchy at
   a glance. Class names use the grade slug (e.g. cit-loop-condition-pill--new,
   --grade-aplus, --grade-a, --ex-demo, --factory-refurbished, --grade-b).
   ========================================================================== */

.cit-loop-condition {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 0.625rem !important;
}

/* Keyboard layout badge - sits below the condition pills on every laptop
   card. Quietly informative, not as loud as the colour-coded condition. */
.cit-loop-keyboard {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin: 0 0 0.625rem !important;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: #F7F8FA;
    border: 1px solid #ECEFF3;
    color: var(--cit-text-muted, #4a5568);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    max-width: fit-content;
}
.cit-loop-keyboard-icon {
    flex-shrink: 0;
    color: var(--cit-navy, #0F2238);
}
.cit-loop-keyboard-text { white-space: nowrap; }
.cit-loop-condition-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    line-height: 1.2;
    background: #F7F8FA;
    border: 1px solid #ECEFF3;
    color: #4A5568;
    white-space: nowrap;
}

/* -- New ------------------------------------------------- */
.cit-loop-condition-pill--new {
    background: #E7F4EC;
    border-color: #B3DDC2;
    color: #1F7A4D;
}

/* -- Grade A+ (and all its source variants) -------------- */
.cit-loop-condition-pill--grade-aplus,
.cit-loop-condition-pill--grade-a-plus,
.cit-loop-condition-pill--new-open-box,
.cit-loop-condition-pill--ex-demo,
.cit-loop-condition-pill--factory-refurbished {
    background: rgba(15, 34, 56, 0.08);
    border-color: rgba(15, 34, 56, 0.18);
    color: var(--cit-navy);
}

/* -- Grade A --------------------------------------------- */
.cit-loop-condition-pill--grade-a {
    background: rgba(242, 101, 34, 0.10);
    border-color: rgba(242, 101, 34, 0.28);
    color: var(--cit-orange);
}

/* -- Grade B --------------------------------------------- */
.cit-loop-condition-pill--grade-b {
    background: #F4E4D0;
    border-color: #E5C499;
    color: #B4641F;
}

/* -- Grade C --------------------------------------------- */
.cit-loop-condition-pill--grade-c {
    background: #EFDBC0;
    border-color: #D4AB7A;
    color: #8A4A14;
}

/* Make sure WC's default loop wrapper doesn't push the pill off the link */
.cit-shop-grid-wrap .products li.product .cit-loop-condition {
    padding: 0 !important;
}

/* ==========================================================================
   v0.27.0 — GAMING MODE — Gaming PC category dark theme + new sections
   ==========================================================================
   Triggered by .cit-gaming-mode on the category <main>. Dark gradient hero,
   electric-cyan glow accent (alongside brand orange), darker product cards,
   and two new sections (component spotlight + benchmark grid).

   Keeps brand identity (navy + orange + Creative IT logo) but shifts the
   register to gaming.
   ========================================================================== */

.cit-gaming-mode {
    --gaming-cyan: #00D4FF;
    --gaming-cyan-glow: rgba(0, 212, 255, 0.35);
    --gaming-dark: #0A1626;
    --gaming-darker: #06101D;
    --gaming-card: #131F30;
    --gaming-border: rgba(255, 255, 255, 0.08);
    --gaming-border-strong: rgba(0, 212, 255, 0.25);
    --gaming-text: #E4E9F2;
    --gaming-muted: #8A95A8;
    background: var(--gaming-dark);
    color: var(--gaming-text);
}

/* ---- Gaming hero override ---------------------------------------------- */

.cit-gaming-mode .cit-cat-hero {
    background:
        radial-gradient(ellipse at top right, rgba(0, 212, 255, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(242, 101, 34, 0.18) 0%, transparent 50%),
        linear-gradient(135deg, var(--gaming-darker) 0%, var(--gaming-dark) 100%);
    border-bottom: 1px solid var(--gaming-border-strong);
    position: relative;
    overflow: hidden;
}
.cit-gaming-mode .cit-cat-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    opacity: 0.6;
}
.cit-gaming-mode .cit-cat-hero-inner {
    position: relative;
    z-index: 1;
}
.cit-gaming-mode .cit-cat-hero-eyebrow {
    color: var(--gaming-cyan);
    text-shadow: 0 0 12px var(--gaming-cyan-glow);
}
.cit-gaming-mode .cit-cat-hero-title {
    color: #fff;
}
.cit-gaming-mode .cit-cat-hero-subtitle {
    color: rgba(255,255,255,0.78);
}
.cit-gaming-mode .cit-cat-breadcrumb,
.cit-gaming-mode .cit-cat-breadcrumb a {
    color: rgba(255,255,255,0.6);
}

/* ---- Gaming shortcut chips override ----------------------------------- */

.cit-gaming-mode .cit-cat-shortcuts {
    background: var(--gaming-darker);
    border-bottom: 1px solid var(--gaming-border);
}
.cit-gaming-mode .cit-cat-chip {
    background: var(--gaming-card) !important;
    border-color: var(--gaming-border) !important;
    color: var(--gaming-text) !important;
}
.cit-gaming-mode .cit-cat-chip:hover {
    border-color: var(--gaming-cyan) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.25);
    transform: translateY(-1px);
}
.cit-gaming-mode .cit-cat-chip-icon {
    color: var(--gaming-cyan);
}

/* ---- Gaming section header (shared by spotlight + benchmarks) --------- */

.cit-gaming-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2rem;
}
.cit-gaming-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gaming-cyan);
    text-shadow: 0 0 8px var(--gaming-cyan-glow);
    margin-bottom: 0.875rem;
}
.cit-gaming-section-header h2 {
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.875rem;
    line-height: 1.2;
}
.cit-gaming-section-lead {
    font-size: 0.9375rem;
    color: var(--gaming-muted);
    line-height: 1.55;
    margin: 0;
}

/* ---- Section 2.1 — Component spotlight -------------------------------- */

.cit-gaming-spotlight {
    background: var(--gaming-darker);
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--gaming-border);
}
.cit-gaming-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.cit-gaming-spotlight-card {
    background: var(--gaming-card);
    border: 1px solid var(--gaming-border);
    border-radius: 14px;
    padding: 1.75rem;
    position: relative;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.cit-gaming-spotlight-card:hover {
    transform: translateY(-3px);
    border-color: var(--gaming-cyan);
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.20);
}
.cit-gaming-spotlight-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.10);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 14px;
    color: var(--gaming-cyan);
    margin-bottom: 1.25rem;
}
.cit-gaming-spotlight-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cit-gaming-spotlight-tagline {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cit-orange);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cit-gaming-spotlight-card p:not(.cit-gaming-spotlight-tagline) {
    font-size: 0.9375rem;
    color: var(--gaming-muted);
    line-height: 1.55;
    margin: 0;
}

/* ---- Section 2.2 — Benchmark grid ------------------------------------- */

.cit-gaming-benchmarks {
    background: var(--gaming-dark);
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--gaming-border);
}
.cit-gaming-benchmarks-table-wrap {
    max-width: 920px;
    margin: 0 auto;
    background: var(--gaming-card);
    border: 1px solid var(--gaming-border);
    border-radius: 14px;
    overflow: hidden;
}
.cit-gaming-benchmarks-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--gaming-text);
}
.cit-gaming-benchmarks-table thead {
    background: var(--gaming-darker);
}
.cit-gaming-benchmarks-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gaming-cyan);
    border-bottom: 1px solid var(--gaming-border-strong);
}
.cit-gaming-benchmarks-table td {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--gaming-border);
    color: var(--gaming-text);
}
.cit-gaming-benchmarks-table tr:last-child td {
    border-bottom: 0;
}
.cit-gaming-benchmarks-table tr:hover td {
    background: rgba(0, 212, 255, 0.04);
}
.cit-gaming-benchmarks-table strong {
    color: #fff;
    font-weight: 600;
}

/* FPS pill colour tiers */
.cit-fps {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
}
.cit-fps-pro {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.30);
    color: var(--gaming-cyan);
}
.cit-fps-smooth {
    background: rgba(72, 207, 100, 0.12);
    border-color: rgba(72, 207, 100, 0.30);
    color: #48CF64;
}
.cit-fps-aaa {
    background: rgba(242, 101, 34, 0.14);
    border-color: rgba(242, 101, 34, 0.35);
    color: var(--cit-orange);
}

.cit-gaming-benchmarks-note {
    margin: 1.5rem auto 0;
    max-width: 920px;
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--gaming-muted);
    line-height: 1.5;
}
.cit-gaming-benchmarks-note svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--gaming-cyan);
}
.cit-gaming-benchmarks-note a {
    color: var(--gaming-cyan);
    text-decoration: underline;
}
.cit-gaming-benchmarks-note a:hover {
    color: #fff;
}

/* ---- Gaming-mode product grid + cards (dark variant) ------------------ */

.cit-gaming-mode .cit-shop-grid-wrap .products li.product {
    background: var(--gaming-card) !important;
    border: 1px solid var(--gaming-border) !important;
}
.cit-gaming-mode .cit-shop-grid-wrap .products li.product:hover {
    border-color: var(--gaming-cyan) !important;
    box-shadow: 0 8px 28px rgba(0, 212, 255, 0.18) !important;
    transform: translateY(-3px) !important;
}
/* PRODUCT IMAGES STAY ON A WHITE TILE — even in gaming mode.
 * Reason: customer product photos vary between transparent PNGs (which would
 * show the dark card through) and solid-white JPGs (which would show as
 * white squares on dark). A consistent white tile inside the dark card
 * frames all images identically — premium Apple-store / Razer style — and
 * matches the photography people upload regardless of background. */
.cit-gaming-mode .cit-shop-grid-wrap .products li.product img,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .attachment-woocommerce_thumbnail {
    background: #FFFFFF !important;
}
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .woocommerce-loop-product__title {
    color: var(--gaming-text) !important;
}
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .price {
    color: #fff !important;
}
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .price del,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .price del .woocommerce-Price-amount {
    color: var(--gaming-muted) !important;
}
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .price ins,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .price ins .woocommerce-Price-amount {
    color: var(--gaming-cyan) !important;
}

/* Sale badge keeps brand orange but with cyan glow for gaming */
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .onsale {
    box-shadow: 0 2px 6px rgba(242, 101, 34, 0.25), 0 0 18px rgba(0, 212, 255, 0.30) !important;
}

/* Condition pills on cards — dark surface variants */
.cit-gaming-mode .cit-loop-condition-pill {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Sidebar adjustments — keep filter chrome readable on dark */
.cit-gaming-mode .cit-shop-filter-heading {
    color: var(--gaming-muted) !important;
    border-bottom-color: var(--gaming-border) !important;
}
.cit-gaming-mode .cit-shop-filter-section > .bapf_sfilter,
.cit-gaming-mode .cit-shop-filter-section > .br_filters_single,
.cit-gaming-mode .cit-shop-filter-section > .berocket_aapf_widget,
.cit-gaming-mode .cit-shop-filter-section > .widget,
.cit-gaming-mode .cit-shop-filter-section > .cit-filter-accordion {
    background: var(--gaming-card) !important;
    border-color: var(--gaming-border) !important;
}
.cit-gaming-mode .cit-shop-filter-section .bapf_head,
.cit-gaming-mode .cit-shop-filter-section h3.bapf_sfilter_title,
.cit-gaming-mode .cit-shop-filter-section .br_aapf_title,
.cit-gaming-mode .cit-shop-filter-section .widget-title,
.cit-gaming-mode .cit-shop-filter-section .cit-filter-accordion-head {
    color: var(--gaming-text) !important;
}
.cit-gaming-mode .cit-shop-sidebar-trust {
    background: var(--gaming-card) !important;
    border: 1px solid var(--gaming-border) !important;
}
.cit-gaming-mode .cit-shop-sidebar-trust h4 {
    color: var(--gaming-text) !important;
}
.cit-gaming-mode .cit-shop-sidebar-trust li {
    color: var(--gaming-muted) !important;
}
.cit-gaming-mode .cit-shop-toolbar {
    background: var(--gaming-card) !important;
    border-color: var(--gaming-border) !important;
}
.cit-gaming-mode .cit-shop-toolbar-count {
    color: var(--gaming-text) !important;
}
.cit-gaming-mode .cit-shop-toolbar-count strong {
    color: #fff !important;
}
.cit-gaming-mode .cit-shop-toolbar-sort label {
    color: var(--gaming-muted) !important;
}
.cit-gaming-mode .cit-shop-toolbar-sort select {
    background-color: var(--gaming-card) !important;
    border-color: var(--gaming-border) !important;
    color: var(--gaming-text) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300D4FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}

/* Grading band on gaming category — also dark */
.cit-gaming-mode .cit-cat-grading-band {
    background: var(--gaming-darker);
    border-top: 1px solid var(--gaming-border);
    border-bottom: 1px solid var(--gaming-border);
}
.cit-gaming-mode .cit-cat-grading-band-title {
    color: #fff;
}
.cit-gaming-mode .cit-cat-grading-band-lead {
    color: var(--gaming-muted);
}
.cit-gaming-mode .cit-cat-grading-band-link {
    color: var(--gaming-cyan);
    border-bottom-color: rgba(0, 212, 255, 0.3);
}
.cit-gaming-mode .cit-cat-grading-band-link:hover {
    color: #fff;
    border-bottom-color: var(--gaming-cyan);
}
.cit-gaming-mode .cit-cat-grade {
    background: var(--gaming-card);
    border-color: var(--gaming-border);
}
.cit-gaming-mode .cit-cat-grade-text {
    color: var(--gaming-muted);
}

/* Mobile — benchmark table goes scroll-x for narrow screens */
@media (max-width: 640px) {
    .cit-gaming-benchmarks-table-wrap {
        overflow-x: auto;
    }
    .cit-gaming-benchmarks-table {
        min-width: 480px;
    }
}

/* ==========================================================================
   v0.27.1 — Gaming mode readability sweep
   ==========================================================================
   First pass missed several text elements that inherit dark colours from
   the base CSS — grade labels in the grading band, condition pills on
   product cards, filter sidebar item text, sale-badge text. All needed
   explicit brighter colours for dark-surface readability.
   ========================================================================== */

/* ---- Grading band grade labels — brighten for dark surface ------------ */

.cit-gaming-mode .cit-cat-grade-new   .cit-cat-grade-label { color: #48CF64; }
.cit-gaming-mode .cit-cat-grade-aplus .cit-cat-grade-label { color: var(--gaming-cyan); }
.cit-gaming-mode .cit-cat-grade-a     .cit-cat-grade-label { color: var(--cit-orange); }
.cit-gaming-mode .cit-cat-grade-b     .cit-cat-grade-label { color: #E89B57; }
.cit-gaming-mode .cit-cat-grade-c     .cit-cat-grade-label { color: #D4A87F; }

/* ---- Condition pills on product cards — brighten in gaming mode ------ */

.cit-gaming-mode .cit-loop-condition-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--gaming-text) !important;
}
.cit-gaming-mode .cit-loop-condition-pill--new {
    background: rgba(72, 207, 100, 0.14) !important;
    border-color: rgba(72, 207, 100, 0.32) !important;
    color: #48CF64 !important;
}
.cit-gaming-mode .cit-loop-condition-pill--grade-aplus,
.cit-gaming-mode .cit-loop-condition-pill--grade-a-plus,
.cit-gaming-mode .cit-loop-condition-pill--new-open-box,
.cit-gaming-mode .cit-loop-condition-pill--ex-demo,
.cit-gaming-mode .cit-loop-condition-pill--factory-refurbished {
    background: rgba(0, 212, 255, 0.12) !important;
    border-color: rgba(0, 212, 255, 0.30) !important;
    color: var(--gaming-cyan) !important;
}
.cit-gaming-mode .cit-loop-condition-pill--grade-a {
    background: rgba(242, 101, 34, 0.14) !important;
    border-color: rgba(242, 101, 34, 0.32) !important;
    color: #FF8B4D !important;
}
.cit-gaming-mode .cit-loop-condition-pill--grade-b {
    background: rgba(232, 155, 87, 0.14) !important;
    border-color: rgba(232, 155, 87, 0.32) !important;
    color: #E89B57 !important;
}
.cit-gaming-mode .cit-loop-condition-pill--grade-c {
    background: rgba(212, 168, 127, 0.14) !important;
    border-color: rgba(212, 168, 127, 0.32) !important;
    color: #D4A87F !important;
}

/* ---- Filter sidebar — make ALL inner text readable on dark ------------ */
/* Every filter option, value, count, label, search input, slider input  */

.cit-gaming-mode .cit-shop-sidebar .cit-shop-filter-section ul li label,
.cit-gaming-mode .cit-shop-sidebar .cit-shop-filter-section ul li > a,
.cit-gaming-mode .cit-shop-sidebar .cit-shop-filter-section ul li .bapf_dis_item_name,
.cit-gaming-mode .cit-shop-sidebar .cit-shop-filter-section ul li .bapf_item_name {
    color: var(--gaming-text) !important;
}
.cit-gaming-mode .cit-shop-sidebar .cit-shop-filter-section ul li:hover {
    background: rgba(0, 212, 255, 0.06) !important;
}
.cit-gaming-mode .cit-shop-sidebar .cit-shop-filter-section ul li:hover label,
.cit-gaming-mode .cit-shop-sidebar .cit-shop-filter-section ul li:hover > a {
    color: #fff !important;
}
.cit-gaming-mode .cit-shop-filter-section ul li .count,
.cit-gaming-mode .cit-shop-filter-section ul li .bapf_count,
.cit-gaming-mode .cit-shop-filter-section ul li .bapf_dis_item_count {
    color: var(--gaming-muted) !important;
}

/* Custom checkbox — visible on dark */
.cit-gaming-mode .cit-shop-filter-section input[type="checkbox"],
.cit-gaming-mode .cit-shop-filter-section input[type="radio"] {
    border-color: rgba(255, 255, 255, 0.30) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.cit-gaming-mode .cit-shop-filter-section input[type="checkbox"]:checked,
.cit-gaming-mode .cit-shop-filter-section input[type="radio"]:checked {
    background: var(--gaming-cyan) !important;
    border-color: var(--gaming-cyan) !important;
}
.cit-gaming-mode .cit-shop-filter-section input[type="checkbox"]:checked::after {
    border-color: var(--gaming-dark) !important;
}

/* Price slider bubbles + range inputs */
.cit-gaming-mode .cit-shop-filter-section .noUi-target {
    background: rgba(255, 255, 255, 0.10) !important;
}
.cit-gaming-mode .cit-shop-filter-section .noUi-connect {
    background: var(--gaming-cyan) !important;
}
.cit-gaming-mode .cit-shop-filter-section .noUi-handle {
    background: var(--gaming-card) !important;
    border-color: var(--gaming-cyan) !important;
}
.cit-gaming-mode .cit-shop-filter-section .noUi-tooltip {
    background: var(--gaming-cyan) !important;
    color: var(--gaming-dark) !important;
}
.cit-gaming-mode .cit-shop-filter-section .bapf_slidr_btm_main input,
.cit-gaming-mode .cit-shop-filter-section .bapf_slidr_inputs input {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--gaming-text) !important;
}

/* Chevron on filter accordion headers — make visible */
.cit-gaming-mode .cit-shop-filter-section .bapf_head::after,
.cit-gaming-mode .cit-shop-filter-section h3.bapf_sfilter_title::after,
.cit-gaming-mode .cit-shop-filter-section .br_aapf_title::after,
.cit-gaming-mode .cit-shop-filter-section .widget-title::after,
.cit-gaming-mode .cit-shop-filter-section .cit-filter-accordion-head::after {
    border-color: var(--gaming-muted) !important;
}

/* ---- Product card title contrast - boost above gaming-text base ------ */

.cit-gaming-mode .cit-shop-grid-wrap .products li.product .woocommerce-loop-product__title,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product h2.woocommerce-loop-product__title,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product h3.woocommerce-loop-product__title {
    color: #fff !important;
}

/* Strikethrough was-price — readable muted */
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .price del,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .price del .woocommerce-Price-amount {
    color: rgba(255, 255, 255, 0.40) !important;
}

/* "X products in category" toolbar count */
.cit-gaming-mode .cit-shop-toolbar-count strong {
    color: var(--gaming-cyan) !important;
}

/* Pagination on dark — readable */
.cit-gaming-mode .cit-shop-grid-wrap .woocommerce-pagination a.page-numbers,
.cit-gaming-mode .cit-shop-grid-wrap .woocommerce-pagination span.page-numbers {
    background: var(--gaming-card) !important;
    border-color: var(--gaming-border) !important;
    color: var(--gaming-text) !important;
}
.cit-gaming-mode .cit-shop-grid-wrap .woocommerce-pagination a.page-numbers:hover {
    border-color: var(--gaming-cyan) !important;
    background: rgba(0, 212, 255, 0.08) !important;
    color: #fff !important;
}
.cit-gaming-mode .cit-shop-grid-wrap .woocommerce-pagination span.page-numbers.current {
    background: var(--gaming-cyan) !important;
    border-color: var(--gaming-cyan) !important;
    color: var(--gaming-dark) !important;
}

/* Mobile filter drawer in gaming mode — dark background carries through */
.cit-gaming-mode .cit-shop-sidebar {
    background: var(--gaming-dark) !important;
}
@media (max-width: 980px) {
    body.cit-shop-filters-open .cit-gaming-mode .cit-shop-sidebar {
        background: var(--gaming-dark) !important;
    }
    .cit-gaming-mode .cit-shop-sidebar-drawer-header {
        background: var(--gaming-dark) !important;
        border-bottom-color: var(--gaming-border) !important;
    }
    .cit-gaming-mode .cit-shop-sidebar-drawer-header h2 {
        color: #fff !important;
    }
    .cit-gaming-mode .cit-shop-sidebar-close {
        color: #fff !important;
    }
    .cit-gaming-mode .cit-shop-sidebar-apply {
        background: var(--gaming-dark) !important;
        border-top-color: var(--gaming-border) !important;
    }
}

/* ==========================================================================
   v0.27.2 — Kill Kadence parent-theme white content wrappers in gaming mode
   ==========================================================================
   Diagnosed via live DOM inspection: Kadence wraps each product card's title
   and price inside <div class="product-details content-bg entry-content-wrap">
   which has a hardcoded `background: #fff`. That's why product titles and
   prices were rendering as white-on-white inside our dark cards — the outer
   li.product WAS dark navy, but Kadence's content-bg div sitting inside it
   was solid white. Same trick applies to a handful of other Kadence shop
   surfaces (.product-details, .entry-content-wrap) that we need to make
   transparent so the gaming card chrome shows through.
   ========================================================================== */

/* Kill every Kadence "content-bg" inside gaming mode — transparent so dark
 * card / page background shines through. */
.cit-gaming-mode .content-bg,
.cit-gaming-mode .product-details,
.cit-gaming-mode .entry-content-wrap,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .product-details,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .content-bg,
.cit-gaming-mode .cit-shop-grid-wrap .products li.product .entry-content-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

/* But product card LI itself stays dark navy (already set above, restated for
 * cascade safety in case anything tries to nuke it after content-bg override). */
.cit-gaming-mode .cit-shop-grid-wrap .products li.product.content-bg,
.cit-gaming-mode .cit-shop-grid-wrap .products li.entry.content-bg {
    background: var(--gaming-card) !important;
}

/* ---- Filter section headings — maximum contrast pure white ------------- */
/* "Brand" / "Condition" / "GPU Model" etc — boost from --gaming-text
 * (#E4E9F2, slightly tinted) to pure #fff for highest readability. */
.cit-gaming-mode .cit-shop-filter-section .bapf_head,
.cit-gaming-mode .cit-shop-filter-section h3.bapf_sfilter_title,
.cit-gaming-mode .cit-shop-filter-section .br_aapf_title,
.cit-gaming-mode .cit-shop-filter-section .widget-title,
.cit-gaming-mode .cit-shop-filter-section .cit-filter-accordion-head {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* "FILTER" section eyebrow above all filter accordions — also brighter */
.cit-gaming-mode .cit-shop-filter-heading {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ---- Belt-and-braces: any other Kadence white surface on dark cat page -- */
.cit-gaming-mode .entry-header,
.cit-gaming-mode .single-entry-header,
.cit-gaming-mode .cit-cat-archive .entry-header {
    background: transparent !important;
}

/* ==========================================================================
   v0.27.3 — Hit the h3 inside .bapf_head (Kadence colours h3 at higher prio)
   ==========================================================================
   Live DOM showed BeRocket wraps each filter title in <h3> inside .bapf_head.
   Kadence/WP base styles set h3 colour to ~#1A202C which beats my parent
   .bapf_head rule via specificity. Targeting h3 + descendants directly with
   maximum specificity below.
   ========================================================================== */

.cit-gaming-mode .cit-shop-filter-section .bapf_head,
.cit-gaming-mode .cit-shop-filter-section .bapf_head h3,
.cit-gaming-mode .cit-shop-filter-section .bapf_head h3 *,
.cit-gaming-mode .cit-shop-filter-section .bapf_head .bapf_hascolarr,
.cit-gaming-mode .cit-shop-filter-section h3.bapf_sfilter_title,
.cit-gaming-mode .cit-shop-filter-section .br_aapf_title,
.cit-gaming-mode .cit-shop-filter-section .widget-title,
.cit-gaming-mode .cit-shop-filter-section .widget-title *,
.cit-gaming-mode .cit-shop-filter-section .cit-filter-accordion-head,
.cit-gaming-mode .cit-shop-filter-section .cit-filter-accordion-head * {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Filter item LABELS (checkbox text — "New", "CreativeIT" etc) — same issue */
.cit-gaming-mode .cit-shop-filter-section ul li,
.cit-gaming-mode .cit-shop-filter-section ul li *,
.cit-gaming-mode .cit-shop-filter-section ul li label,
.cit-gaming-mode .cit-shop-filter-section ul li label *,
.cit-gaming-mode .cit-shop-filter-section ul li > a,
.cit-gaming-mode .cit-shop-filter-section ul li > a * {
    color: var(--gaming-text) !important;
}
/* Counts in parens — softer */
.cit-gaming-mode .cit-shop-filter-section ul li .count,
.cit-gaming-mode .cit-shop-filter-section ul li .bapf_count,
.cit-gaming-mode .cit-shop-filter-section ul li .bapf_dis_item_count {
    color: var(--gaming-muted) !important;
}

/* Chevron icon (BeRocket's <i class="bapf_colaps_smb fa fa-chevron-up">) */
.cit-gaming-mode .cit-shop-filter-section .bapf_colaps_smb,
.cit-gaming-mode .cit-shop-filter-section .bapf_head i {
    color: var(--gaming-cyan) !important;
}

/* "FILTER" outer section heading — also force white */
.cit-gaming-mode .cit-shop-filter-heading,
.cit-gaming-mode .cit-shop-filter-heading * {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   v0.27.5 — Shrink filter heading text (universal — all categories)
   ==========================================================================
   BeRocket renders each filter title as <h3>Title</h3>. Kadence's base
   typography styles h3 as a regular heading (~1.5rem), which is way too
   large for a sidebar filter title. The wrapper .bapf_head was already
   set to 0.9375rem in the v0.23 base, but the inner h3 inherited its own
   size from Kadence's h3 rules at higher specificity. Forcing the h3
   directly to the intended size brings everything in line.
   ========================================================================== */

.cit-shop-filter-section .bapf_head h3,
.cit-shop-filter-section .bapf_head h3 *,
.cit-shop-filter-section h3.bapf_sfilter_title,
.cit-shop-filter-section .br_aapf_title h3,
.cit-shop-filter-section .widget-title h3,
.cit-shop-sidebar .cit-shop-filter-section h3 {
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
}

/* ==========================================================================
   v0.28.0 — /shop/ archive storefront primitives
   ==========================================================================
   The /shop/ archive uses archive-product.php which leans on the existing
   .cit-cat-* primitives for hero, chips, and grading band. New chrome
   below for the category tile grid, the all-products section header, and
   the footer help card.
   ========================================================================== */

/* ---- Shop archive hero meta line ("92 products in stock right now") --- */

.cit-shop-archive-hero-meta {
    margin: 1.5rem 0 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.cit-shop-archive-hero-meta strong {
    color: #fff;
}
.cit-shop-archive-hero-meta a {
    color: var(--cit-orange);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(242, 101, 34, 0.4);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
}
.cit-shop-archive-hero-meta a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* ---- Shared section header for shop archive ------------------------- */

.cit-shop-archive .cit-shop-archive-section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.5rem;
}
.cit-shop-archive-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--cit-orange);
    margin-bottom: 0.625rem;
}
.cit-shop-archive-section-title {
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}
.cit-shop-archive-section-lead {
    font-size: 1rem;
    color: var(--cit-text-muted, #4A5568);
    line-height: 1.55;
    margin: 0;
}

/* ---- 3. Category tile grid (8 categories, 4-up on desktop) ----------- */

.cit-shop-archive-categories {
    background: #fff;
    padding: 3.5rem 0;
}
.cit-shop-archive-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 980px) {
    .cit-shop-archive-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .cit-shop-archive-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cit-shop-archive-category-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ECEFF3;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cit-shop-archive-category-tile:hover {
    transform: translateY(-3px);
    border-color: #CFD6E0;
    box-shadow: 0 12px 28px rgba(15, 34, 56, 0.10);
}
.cit-shop-archive-category-image {
    aspect-ratio: 4 / 3;
    background-color: #F7F8FA;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.cit-shop-archive-category-image-placeholder {
    background: linear-gradient(135deg, #E9EDF2 0%, #DCE3EC 100%);
    position: relative;
}
.cit-shop-archive-category-image-placeholder::after {
    content: "";
    position: absolute;
    inset: 25%;
    background: rgba(15, 34, 56, 0.06);
    border-radius: 8px;
}
.cit-shop-archive-category-body {
    padding: 1rem 1.125rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cit-shop-archive-category-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0;
    line-height: 1.25;
}
.cit-shop-archive-category-count {
    font-size: 0.8125rem;
    color: var(--cit-text-muted, #4A5568);
    font-weight: 600;
}
.cit-shop-archive-category-tile:hover .cit-shop-archive-category-count {
    color: var(--cit-orange);
}

/* Gaming category tile — distinct dark visual treatment */
.cit-shop-archive-category-tile-gaming {
    background: linear-gradient(135deg, #0F2238 0%, #1A3556 100%);
    border-color: #1A3556;
    position: relative;
    overflow: hidden;
}
.cit-shop-archive-category-tile-gaming::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(0, 212, 255, 0.20) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}
.cit-shop-archive-category-tile-gaming .cit-shop-archive-category-image {
    background-color: #06101D;
    position: relative;
    z-index: 2;
}
.cit-shop-archive-category-tile-gaming .cit-shop-archive-category-body {
    position: relative;
    z-index: 2;
}
.cit-shop-archive-category-tile-gaming .cit-shop-archive-category-title {
    color: #fff;
}
.cit-shop-archive-category-tile-gaming .cit-shop-archive-category-count {
    color: #00D4FF;
}
.cit-shop-archive-category-tile-gaming:hover {
    border-color: #00D4FF;
    box-shadow: 0 12px 28px rgba(0, 212, 255, 0.20);
}
.cit-shop-archive-category-tile-gaming:hover .cit-shop-archive-category-count {
    color: #fff;
}

/* ---- 5. All products section ----------------------------------------- */

.cit-shop-archive-products {
    background: #F7F8FA;
    padding: 3.5rem 0;
    border-top: 1px solid #ECEFF3;
}

/* /shop/ now uses sidebar+grid layout (matches category pages) so the grid
 * inherits the default 3-col responsive behaviour. No full-width override. */

/* ---- Category accordion list (hand-rolled, top of shop sidebar) ------- */

.cit-filter-accordion-categories .cit-filter-accordion-body ul {
    max-height: 280px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #CFD6E0 transparent;
}
.cit-filter-accordion-categories .cit-filter-accordion-body ul::-webkit-scrollbar {
    width: 6px;
}
.cit-filter-accordion-categories .cit-filter-accordion-body ul::-webkit-scrollbar-thumb {
    background: #CFD6E0;
    border-radius: 3px;
}
.cit-filter-accordion-categories li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: 0.4375rem 0.5rem !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: var(--cit-text) !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}
.cit-filter-accordion-categories li > a:hover {
    background: #F7F8FA !important;
    color: var(--cit-navy) !important;
}
.cit-filter-accordion-categories li > a > span:first-child {
    flex: 1 !important;
    min-width: 0 !important;
}
.cit-filter-accordion-categories li > a .count {
    color: var(--cit-text-muted, #4A5568) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    margin-left: auto !important;
}
.cit-filter-accordion-categories li > a:hover .count {
    color: var(--cit-orange) !important;
}

/* ==========================================================================
   v0.28.2 — Honeypot field (spam protection on all custom forms)
   ==========================================================================
   Hidden via several layers — display:none alone is sometimes detected by
   bots that skip hidden inputs. We position absolutely off-screen, zero
   dimensions, opacity 0, tabindex=-1 (also set on the input itself) and
   visibility hidden. Bots that fill every text input still fill this one;
   their submission is silently dropped server-side.
   ========================================================================== */
.cit-form-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.cit-form-honeypot * {
    visibility: hidden !important;
}

/* ---- 6. Help footer card --------------------------------------------- */

.cit-shop-archive-help {
    background: #fff;
    padding: 3rem 0;
    border-top: 1px solid #ECEFF3;
}
.cit-shop-archive-help-card {
    background: var(--cit-cream, #F5EDD9);
    border: 1px solid #E5D8B1;
    border-radius: 16px;
    padding: 2rem 2.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}
@media (max-width: 800px) {
    .cit-shop-archive-help-card {
        grid-template-columns: minmax(0, 1fr);
        text-align: left;
    }
}
.cit-shop-archive-help-card h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--cit-navy);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}
.cit-shop-archive-help-card p {
    margin: 0 0 0.75rem;
    color: var(--cit-text, #1B2436);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.cit-shop-archive-help-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
}
@media (max-width: 800px) {
    .cit-shop-archive-help-actions { align-items: flex-start; }
}
.cit-shop-archive-help-link {
    color: var(--cit-navy);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #CFD6E0;
    padding-bottom: 2px;
}
.cit-shop-archive-help-link:hover {
    color: var(--cit-orange);
    border-bottom-color: var(--cit-orange);
}

/* ==========================================================================
   v0.25.4 — Condition pill + grading-explained details block
   ========================================================================== */

/* ---- Condition pill (clickable, sits under product title) ------------- */

.cit-product-condition-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #F0F9F4;
    border: 1px solid #C8E6D1;
    border-radius: 10px;
    text-decoration: none;
    margin: 1rem 0 0.875rem;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.cit-product-condition-row:hover {
    background: #E3F2EA;
    border-color: #8FD3A8;
    transform: translateY(-1px);
}
.cit-product-condition-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #1F7A4D;
    flex-shrink: 0;
}
.cit-product-condition-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.cit-product-condition-info {
    font-size: 0.8125rem;
    color: #1F7A4D;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}
.cit-product-condition-row:hover .cit-product-condition-info {
    color: #155233;
}

/* ---- Keyboard layout row (sits under Condition on product page) -------- */

.cit-product-keyboard-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: #F4F6FA;
    border: 1px solid #DBE2EC;
    border-radius: 10px;
    margin: 0 0 0.875rem;
}
.cit-product-keyboard-icon {
    flex-shrink: 0;
    color: var(--cit-navy, #0F2238);
    display: inline-flex;
    align-items: center;
}
.cit-product-keyboard-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    flex-shrink: 0;
}
.cit-product-keyboard-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
@media (max-width: 480px) {
    .cit-product-keyboard-row {
        flex-wrap: wrap;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
    }
    .cit-product-keyboard-label { flex-basis: 100%; }
}

@media (max-width: 480px) {
    .cit-product-condition-row {
        flex-wrap: wrap;
        gap: 0.375rem;
        padding: 0.625rem 0.875rem;
    }
    .cit-product-condition-label { flex-basis: 100%; }
    .cit-product-condition-value { font-size: 0.9375rem; }
    .cit-product-condition-info { font-size: 0.75rem; }
}

/* ---- Grading list (inside the "Grading & condition explained" details) -- */

.cit-grading-list {
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}
.cit-grading-list dt {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.25rem;
    padding: 0;
    position: relative;
    padding-left: 1.25rem;
}
.cit-grading-list dt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4375rem;
    width: 8px;
    height: 8px;
    background: var(--cit-orange, #F26522);
    border-radius: 50%;
}
.cit-grading-list dd {
    margin: 0 0 0 1.25rem;
    padding: 0;
    font-size: 0.9375rem;
    color: #4A5568;
    line-height: 1.55;
}

/* When the grading details block is the target (URL hash), give it a soft
 * highlight so the user knows it's the answer to what they clicked. */
.cit-info-block#cit-grading:target {
    border-color: var(--cit-orange, #F26522);
    box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.15);
}

/* ============================================================
   Mobile menu — app-style icon tile grid
   v0.32.0
   Hidden on desktop, full-screen overlay on mobile (<= 1024px)
   ============================================================ */

.cit-mobile-menu { display: none; }

body.cit-mobile-menu-open { overflow: hidden; }

@media (max-width: 1024px) {

    .cit-mobile-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background-color: #FFFFFF;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        visibility: hidden;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }
    .cit-mobile-menu.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    }
    .cit-mobile-menu__inner {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 1rem 2.5rem;
    }

    /* Top bar inside menu (brand + close) */
    .cit-mobile-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 0;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid #E6E9EE;
        position: sticky;
        top: 0;
        background: #FFFFFF;
        z-index: 2;
    }
    .cit-mobile-menu__brand {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--cit-navy);
        text-decoration: none;
        letter-spacing: -0.01em;
    }
    .cit-mobile-menu__brand-it {
        display: inline-block;
        margin-left: 0.125rem;
        padding: 0 0.3125rem;
        background-color: var(--cit-orange);
        color: #FFFFFF;
        border-radius: 0.3125rem;
        font-size: 0.875em;
    }
    .cit-mobile-menu__close {
        width: 40px;
        height: 40px;
        border: none;
        background-color: #F4F6F9;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--cit-navy);
        cursor: pointer;
    }
    .cit-mobile-menu__close:hover { background-color: #E6E9EE; }

    /* Search input */
    .cit-mobile-menu__search {
        position: relative;
        margin: 0.75rem 0 1rem;
    }
    .cit-mobile-menu__search-icon {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--cit-text-muted);
        pointer-events: none;
    }
    .cit-mobile-menu__search input[type="search"] {
        width: 100%;
        height: 48px;
        padding: 0 0.875rem 0 2.625rem;
        border: 1px solid #D6DAE1;
        border-radius: 0.625rem;
        font-size: 0.9375rem;
        background-color: #F7F8FA;
        color: var(--cit-navy);
        -webkit-appearance: none;
    }
    .cit-mobile-menu__search input[type="search"]:focus {
        outline: none;
        border-color: var(--cit-navy);
        background-color: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(15, 34, 56, 0.08);
    }

    /* Quick actions row (Sale, Track Order) */
    .cit-mobile-menu__quick {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
        margin-bottom: 1.5rem;
    }
    .cit-mobile-menu__quick-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 0.875rem;
        background-color: #F7F8FA;
        border: 1px solid #EAEDF1;
        border-radius: 0.625rem;
        color: var(--cit-navy);
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
    }
    .cit-mobile-menu__quick-item svg { color: var(--cit-navy); flex-shrink: 0; }
    .cit-mobile-menu__quick-item--sale {
        background-color: #FFF7F3;
        border-color: #FBDFCD;
        color: var(--cit-orange-dark);
    }
    .cit-mobile-menu__quick-item--sale svg { color: var(--cit-orange); }

    /* Section headings */
    .cit-mobile-menu__section {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--cit-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin: 1.25rem 0 0.75rem;
    }

    /* Category tiles grid (2 columns) */
    .cit-mobile-menu__tiles {
        list-style: none;
        margin: 0 0 0.5rem;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
    }
    .cit-mobile-menu__tiles > li { margin: 0; }
    .cit-mobile-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-align: center;
        padding: 1.125rem 0.875rem;
        background-color: #FFFFFF;
        border: 1px solid #E6E9EE;
        border-radius: 0.875rem;
        color: var(--cit-navy);
        text-decoration: none;
        transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.05s ease;
        min-height: 96px;
    }
    .cit-mobile-tile:active {
        transform: scale(0.97);
        background-color: #F4F6F9;
    }
    .cit-mobile-tile__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #F7F8FA;
        color: var(--cit-navy);
    }
    .cit-mobile-tile__label {
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--cit-navy);
    }

    /* Featured tile (Gaming PCs) */
    .cit-mobile-tile--featured {
        background-color: #FFF7F3;
        border-color: #FBDFCD;
    }
    .cit-mobile-tile--featured .cit-mobile-tile__icon {
        background-color: #FFFFFF;
        color: var(--cit-orange);
    }

    /* Service tiles (smaller, more compact, row-style) */
    .cit-mobile-menu__tiles--services {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .cit-mobile-tile--service {
        min-height: 76px;
        padding: 0.875rem 0.625rem;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 0.625rem;
    }
    .cit-mobile-tile--service .cit-mobile-tile__icon {
        width: 36px;
        height: 36px;
    }
    .cit-mobile-tile--service .cit-mobile-tile__label {
        font-size: 0.8125rem;
    }
    .cit-mobile-tile--all {
        background-color: var(--cit-navy);
        border-color: var(--cit-navy);
        color: #FFFFFF;
    }
    .cit-mobile-tile--all .cit-mobile-tile__icon {
        background-color: rgba(255, 255, 255, 0.15);
        color: #FFFFFF;
    }
    .cit-mobile-tile--all .cit-mobile-tile__label { color: #FFFFFF; }

    /* Footer link strip */
    .cit-mobile-menu__footer {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        border-top: 1px solid #E6E9EE;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
    }
    .cit-mobile-menu__footer a {
        font-size: 0.875rem;
        color: var(--cit-navy);
        font-weight: 500;
        text-decoration: none;
        padding: 0.5rem 0;
    }
    .cit-mobile-menu__footer a:hover { color: var(--cit-orange); }

    /* Belt-and-braces: hide the old desktop dropdown nav on mobile —
       the mobile menu now provides navigation. */
    .cit-primary-nav,
    .cit-primary-nav.cit-primary-nav-open {
        display: none !important;
    }
}

/* Narrower phones (< 380px) */
@media (max-width: 380px) {
    .cit-mobile-menu__inner { padding: 0 0.75rem 2rem; }
    .cit-mobile-tile {
        min-height: 88px;
        padding: 0.875rem 0.625rem;
    }
    .cit-mobile-tile__icon { width: 40px; height: 40px; }
    .cit-mobile-tile__label { font-size: 0.8125rem; }
}

/* ============================================================
   Variation pickers: button rows instead of native selects
   Works on all viewports (selects are visually hidden everywhere)
   ============================================================ */

.cit-vari-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cit-vari-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0;
}
.cit-vari-btn {
    appearance: none;
    -webkit-appearance: none;
    background-color: #FFFFFF;
    color: var(--cit-navy);
    border: 1.5px solid #D6DAE1;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 1rem;
    min-height: 44px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
    line-height: 1.2;
    letter-spacing: 0.005em;
}
.cit-vari-btn:hover {
    border-color: var(--cit-navy);
    background-color: #F7F8FA;
}
.cit-vari-btn.is-active {
    border-color: var(--cit-navy);
    background-color: var(--cit-navy);
    color: #FFFFFF;
}
.cit-vari-btn:active {
    transform: scale(0.97);
}

/* Per-variation price delta annotation (e.g. "Grade A+  +€30") */
.cit-vari-btn-delta {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cit-orange-dark);
    opacity: 0.85;
}
.cit-vari-btn.is-active .cit-vari-btn-delta {
    color: rgba(255, 255, 255, 0.75);
}

/* Out-of-stock variation buttons: greyed, strike-through, disabled.
   Set by JS when the option can't lead to any in-stock variation given
   the user's current selections of the other attributes. */
.cit-vari-btn--oos,
.cit-vari-btn[disabled] {
    color: #B0B0B0;
    background-color: #F5F5F5;
    border-color: #E2E2E2;
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 0.65;
    position: relative;
}
.cit-vari-btn--oos:hover,
.cit-vari-btn[disabled]:hover {
    background-color: #F5F5F5;
    border-color: #E2E2E2;
    color: #B0B0B0;
    transform: none;
}
.cit-vari-btn--oos::after {
    content: "Out of stock";
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #C44545;
    text-decoration: none;
    margin-top: 0.125rem;
    line-height: 1;
}
/* Hide the price delta on OOS buttons — irrelevant if you can't buy it */
.cit-vari-btn--oos .cit-vari-btn-delta {
    display: none;
}

/* Dated delivery line (CRO #3): "Order in 2h 47m for delivery Thursday 5 June" */
.cit-shipping-dated strong {
    color: var(--cit-navy);
    font-weight: 700;
}

/* ============================================================
   CRO #4a: Trade-in callout in buy box
   ============================================================ */
.cit-product-tradein {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0;
    padding: 0.875rem 1rem;
    background-color: #FFF7F3;
    border: 1px solid #FBDFCD;
    border-radius: 0.75rem;
}
.cit-product-tradein__icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--cit-orange);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #FBDFCD;
}
.cit-product-tradein__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    line-height: 1.3;
}
.cit-product-tradein__text strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cit-navy);
}
.cit-product-tradein__text span {
    font-size: 0.75rem;
    color: var(--cit-text-muted);
}
.cit-product-tradein__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--cit-orange);
    color: #FFFFFF;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.cit-product-tradein__btn:hover {
    background-color: var(--cit-orange-dark);
    color: #FFFFFF;
}

/* ============================================================
   CRO #4b: Newsletter capture band
   ============================================================ */
.cit-product-newsletter {
    padding: 2.5rem 0;
    background-color: var(--cit-navy);
}
.cit-product-newsletter-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.cit-product-newsletter-text strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.cit-product-newsletter-text span {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 1.5rem;
}
.cit-product-newsletter-form {
    display: flex;
    gap: 0.5rem;
    max-width: 460px;
    margin: 0 auto;
}
.cit-product-newsletter-form input[type="email"] {
    flex: 1;
    height: 50px;
    padding: 0 1rem;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
.cit-product-newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.cit-product-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--cit-orange);
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.18);
}
.cit-product-newsletter-btn {
    height: 50px;
    padding: 0 1.25rem;
    background-color: var(--cit-orange);
    color: #FFFFFF;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.cit-product-newsletter-btn:hover {
    background-color: var(--cit-orange-dark);
}
.cit-product-newsletter-fine {
    margin: 0.875rem 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   CRO #4c: Second CTA strip (after FAQ, before related)
   ============================================================ */
.cit-product-second-cta {
    padding: 2rem 0;
}
.cit-product-second-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background-color: #FFFFFF;
    border: 1px solid #E6E9EE;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(15, 34, 56, 0.04);
}
.cit-product-second-cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}
.cit-product-second-cta-text strong {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cit-navy);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.cit-product-second-cta-price {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--cit-navy);
}
.cit-product-second-cta-price del {
    color: #9AA3AE;
    font-weight: 500;
    font-size: 0.875rem;
    margin-right: 0.25rem;
}
.cit-product-second-cta-price ins {
    background: none;
    text-decoration: none;
}
.cit-product-second-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 48px;
    padding: 0 1.25rem;
    background-color: var(--cit-orange);
    color: #FFFFFF;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(196, 78, 21, 0.2);
}
.cit-product-second-cta-btn:hover {
    background-color: var(--cit-orange-dark);
    color: #FFFFFF;
}

@media (max-width: 640px) {
    .cit-product-tradein {
        flex-wrap: wrap;
    }
    .cit-product-tradein__btn {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
    .cit-product-newsletter {
        padding: 2rem 0;
    }
    .cit-product-newsletter-text strong {
        font-size: 1.25rem;
    }
    .cit-product-newsletter-form {
        flex-direction: column;
        gap: 0.5rem;
    }
    .cit-product-newsletter-btn {
        width: 100%;
    }
    .cit-product-second-cta-card {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        text-align: center;
    }
    .cit-product-second-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* The "Clear" / reset link WC adds beside variation rows */
.reset_variations {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--cit-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: 0.5rem;
}
.reset_variations:hover {
    color: var(--cit-orange);
}

/* ============================================================
   Mobile sticky add-to-cart bar
   Hidden on desktop, fixed bottom on mobile (<= 1024px)
   ============================================================ */

.cit-mobile-buybar { display: none; }

@media (max-width: 1024px) {
    .cit-mobile-buybar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 90;
        background-color: #FFFFFF;
        border-top: 1px solid #E6E9EE;
        padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(15, 34, 56, 0.08);
        transform: translateY(100%);
        transition: transform 0.2s ease;
    }
    .cit-mobile-buybar.is-ready {
        transform: translateY(0);
    }
    .cit-mobile-buybar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.875rem;
    }
    .cit-mobile-buybar__price-block {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        min-width: 0;
        flex: 1;
    }
    .cit-mobile-buybar__price-label {
        font-size: 0.6875rem;
        color: var(--cit-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 700;
    }
    .cit-mobile-buybar__price {
        font-size: 1.125rem;
        font-weight: 800;
        color: var(--cit-navy);
        line-height: 1.15;
    }
    .cit-mobile-buybar__price del {
        color: #9AA3AE;
        font-size: 0.8125rem;
        font-weight: 500;
        margin-right: 0.25rem;
    }
    .cit-mobile-buybar__price ins {
        background: none;
        text-decoration: none;
    }
    .cit-mobile-buybar__cta {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        height: 48px;
        padding: 0 1.125rem;
        background-color: var(--cit-orange);
        color: #FFFFFF;
        border: none;
        border-radius: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(196, 78, 21, 0.25);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .cit-mobile-buybar__cta:hover,
    .cit-mobile-buybar__cta:active {
        background-color: var(--cit-orange-dark);
        color: #FFFFFF;
    }
    .cit-mobile-buybar__hint {
        margin: 0.5rem 0 0;
        font-size: 0.75rem;
        color: var(--cit-orange-dark);
        text-align: center;
        animation: cit-buybar-pulse 0.4s ease;
    }
    @keyframes cit-buybar-pulse {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Push page content up so the sticky bar doesn't cover anything */
    body.single-product {
        padding-bottom: 80px;
    }
}

/* ============================================================
   Mobile variable product: NUKE the grid, rebuild as clean flex column
   ============================================================
   Matches the Refurbed / Swappie pattern: image -> title -> price ->
   variation pills -> big CTA -> trust signals. No nested grids.
   Uses body. prefix on critical selectors so we win specificity vs
   the existing desktop !important grid rules.
*/
@media (max-width: 960px) {

    /* ----- NUCLEAR GRID OVERRIDE -----
       The inner add-to-cart wrapper was the stubborn one. Using
       body-prefixed selectors to beat the existing two-class !important rule. */
    body .cit-product-summary-variable .cit-product-add-to-cart,
    body .cit-product-summary .cit-product-add-to-cart,
    html body div.cit-product-summary-variable > div.cit-product-add-to-cart {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        gap: 0.875rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The variations_form INSIDE add-to-cart — also flat column.
       Note: existing CSS sets it to "display: contents" which is harmful here. */
    body .cit-product-summary-variable .variations_form,
    body .cit-product-summary .variations_form,
    html body form.variations_form.cart {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        width: 100% !important;
    }
    body .cit-product-summary-variable .variations_form > *,
    body .cit-product-summary .variations_form > * {
        width: 100% !important;
        grid-column: unset !important;
        grid-area: unset !important;
    }

    /* The single_variation_wrap (price+qty+button shown after a variation
       is selected) — also a stubborn grid. Force flex column. */
    body .cit-product-summary-variable .single_variation_wrap,
    body .cit-product-summary .single_variation_wrap,
    html body .woocommerce-variation-add-to-cart {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        grid-column: unset !important;
        grid-template-columns: none !important;
    }
    /* Outer hero — simple flex column, gallery first then summary */
    .cit-product-hero-inner-3col,
    .cit-product-hero-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .cit-product-hero-inner-3col > .cit-product-gallery,
    .cit-product-hero-inner > .cit-product-gallery {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .cit-product-hero-inner-3col > .cit-product-summary,
    .cit-product-hero-inner > .cit-product-summary {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Gallery: ensure the image is visible and proportional */
    .cit-product-gallery,
    .cit-product-gallery .woocommerce-product-gallery,
    .cit-product-gallery .wvg-gallery,
    .cit-product-gallery .wvg-gallery-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    .cit-product-gallery .woocommerce-product-gallery__image img,
    .cit-product-gallery .wvg-gallery-image img,
    .cit-product-gallery img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: 420px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Variable summary: kill ALL nested grids, become flex column */
    .cit-product-summary-variable {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        position: static !important;
        grid-template-columns: none !important;
        padding: 0 !important;
    }
    .cit-product-summary-variable > * {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }

    /* The add-to-cart wrapper (variations form + buy button column) — flat column */
    .cit-product-summary-variable > .cit-product-add-to-cart,
    .cit-product-summary > .cit-product-add-to-cart {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        grid-template-columns: none !important;
    }

    /* The variations form itself + all immediate children flow column */
    .cit-product-summary-variable .variations_form,
    .cit-product-summary .variations_form {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        width: 100% !important;
    }
    .cit-product-summary-variable .variations_form > *,
    .cit-product-summary .variations_form > * {
        width: 100% !important;
        grid-column: unset !important;
    }

    /* Variations table (the Grade / Storage / Colour row container) */
    .cit-product-summary-variable .variations_form .variations {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .cit-product-summary-variable .variations_form .variations tbody,
    .cit-product-summary-variable .variations_form .variations tr,
    .cit-product-summary-variable .variations_form .variations td,
    .cit-product-summary-variable .variations_form .variations th {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
    }
    .cit-product-summary-variable .variations_form .variations th.label {
        font-size: 0.75rem !important;
        font-weight: 700;
        color: var(--cit-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.5rem !important;
    }

    /* The "single_variation_wrap" holds price + button + qty after a variation
       is selected. Stack everything vertically full-width. */
    .cit-product-summary-variable .variations_form .single_variation_wrap,
    .cit-product-summary-variable .variations_form .woocommerce-variation-add-to-cart {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    /* Title bigger and more prominent */
    .cit-product-summary-variable .cit-product-title,
    .cit-product-summary .cit-product-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    /* Price section larger */
    .cit-product-summary-variable .cit-product-meta-price,
    .cit-product-summary .cit-product-meta-price {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }
    .cit-product-summary-variable .cit-product-price,
    .cit-product-summary .cit-product-price {
        font-size: 1.875rem !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        color: var(--cit-navy) !important;
    }

    /* Add to cart button: full width, big, orange */
    .cit-product-summary-variable .single_add_to_cart_button,
    .cit-product-summary .single_add_to_cart_button,
    .cit-product-summary-variable button[name="add-to-cart"],
    .cit-product-summary button[name="add-to-cart"] {
        width: 100% !important;
        height: 54px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        background-color: var(--cit-orange) !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 0.625rem !important;
    }
    .cit-product-summary-variable .quantity,
    .cit-product-summary .quantity {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 140px !important;
    }
}

/* ============================================================
   Mobile single product page — layout reflow at <= 768px
   Compact gallery, reorganised buy box, tighter info blocks
   ============================================================ */
@media (max-width: 768px) {

    /* Product hero: stack gallery + summary in a single column with sane spacing */
    .cit-product-hero-inner,
    .cit-product-hero-inner-3col {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Compact gallery — limit height so buy box is visible on first scroll */
    .cit-product-gallery {
        max-width: 100%;
    }
    .cit-product-gallery .woocommerce-product-gallery__image,
    .cit-product-gallery .wvg-gallery-image,
    .cit-product-gallery img {
        max-height: 360px;
        object-fit: contain;
    }
    .cit-product-gallery .flex-control-thumbs li,
    .cit-product-gallery .wvg-gallery-thumb {
        width: 56px !important;
        height: 56px !important;
    }

    /* Buy box: tighter spacing, larger typography for touch */
    .cit-product-summary,
    .cit-product-summary-variable {
        padding: 1rem 0 0 !important;
    }
    .cit-product-title {
        font-size: 1.375rem !important;
        line-height: 1.25 !important;
    }
    .cit-product-meta-price {
        display: block !important;
        margin-bottom: 1rem;
    }
    .cit-product-meta {
        font-size: 0.8125rem;
        color: var(--cit-text-muted);
        margin-bottom: 0.5rem;
    }
    .cit-product-price {
        font-size: 1.75rem !important;
        font-weight: 800;
        line-height: 1.1;
    }
    .cit-product-savings {
        font-size: 0.8125rem;
        color: var(--cit-orange-dark);
        margin-top: 0.25rem;
    }

    /* Variation table: blow out the table layout to stacked rows */
    .cit-product-summary-variable .variations,
    .cit-product-summary-variable .variations tbody,
    .cit-product-summary-variable .variations tr,
    .cit-product-summary-variable .variations td,
    .cit-product-summary-variable .variations th {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
    }
    .cit-product-summary-variable .variations tr {
        margin-bottom: 0.875rem !important;
    }
    .cit-product-summary-variable .variations th.label {
        font-size: 0.75rem !important;
        font-weight: 700;
        color: var(--cit-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.375rem !important;
    }

    /* Add to cart row: stack quantity + button vertically, hide on mobile
       (the sticky buybar replaces it) */
    .cit-product-add-to-cart .single_variation_wrap,
    .cit-product-add-to-cart > form.cart {
        display: block !important;
    }
    .cit-product-add-to-cart .quantity {
        margin-bottom: 0.75rem;
    }
    .cit-product-add-to-cart .single_add_to_cart_button {
        width: 100% !important;
        height: 52px !important;
        font-size: 1rem !important;
    }

    /* Info blocks below the hero: tighter padding */
    .cit-info-block {
        padding: 1rem 1.125rem !important;
        margin: 0 1rem 0.75rem !important;
        border-radius: 0.875rem;
    }
    .cit-info-block-title {
        font-size: 0.9375rem !important;
    }
    .cit-info-block summary {
        padding: 0.5rem 0 !important;
    }

    /* Trust grid ("Why shop with us"): force 2x2 GRID on mobile (existing
       desktop rules use flex with 50% children + a 480px override that
       collapses to 100% — we flip the parent to display:grid so neither
       fires on phones, then the 2-column grid sticks). */
    .cit-product-summary > .cit-product-trust-grid,
    .cit-product-trust-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: unset !important;
        gap: 0.375rem 0.5rem !important;
        padding: 0.75rem !important;
        margin: 0.75rem 1rem 0 !important;
        border-radius: 0.875rem;
    }
    /* The ::before pseudo ("WHY SHOP WITH US" label) spans the whole row */
    .cit-product-summary > .cit-product-trust-grid::before,
    .cit-product-trust-grid::before {
        grid-column: 1 / -1 !important;
        flex: none !important;
        min-width: 0 !important;
        margin-bottom: 0.25rem !important;
    }
    /* Each li becomes a grid cell — reset any inherited flex sizing */
    .cit-product-summary > .cit-product-trust-grid > li,
    .cit-product-trust-grid li {
        flex: none !important;
        width: auto !important;
        padding: 0.375rem 0.5rem !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }
    .cit-product-trust-grid li svg {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0;
    }
    .cit-product-trust-grid li strong {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        display: block;
    }
    .cit-product-trust-grid li span {
        font-size: 0.6875rem !important;
        line-height: 1.2 !important;
        color: var(--cit-text-muted);
    }

    /* What's in the box: tighter padding, smaller list, no big icon box */
    .cit-product-box-contents {
        padding: 0.875rem 1rem !important;
        margin: 0.5rem 1rem 0 !important;
        border-radius: 0.875rem;
    }
    .cit-product-box-contents-title {
        font-size: 0.875rem !important;
        margin: 0 0 0.5rem !important;
        gap: 0.375rem !important;
    }
    .cit-product-box-contents-title svg {
        width: 16px !important;
        height: 16px !important;
    }
    .cit-product-box-contents-list {
        gap: 0.375rem !important;
    }
    .cit-product-box-contents-list li {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
        gap: 0.5rem !important;
        padding: 0 !important;
    }
    .cit-product-box-contents-list .cit-box-check {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0;
        margin-top: 2px;
    }
} /* close @media (max-width: 768px) opened at line ~14565 - was missing */

/* ==========================================================================
   PC BUILDER (page-pc-builder.php)
   Navy hero -> cream presets -> dark how-it-works -> builder UI ->
   navy guarantee -> white why-custom -> trust strip -> trustpilot -> orange final CTA.
   ========================================================================== */

/* ---- Kadence neutralisation (parent theme wraps content in .entry-content
   / .content-bg with white bg + narrow max-width that breaks full-width
   section bands). Same pattern as the cart/checkout fix at line ~6650. */
body.page-pc-builder .entry-content,
body.page-pc-builder .entry-content-wrap,
body.page-pc-builder .content-bg,
body.page-pc-builder .content-container,
body.page-pc-builder #primary,
body.page-pc-builder main,
body.page-pc-builder .site-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.cit-pcb-page { background: #fff; width: 100%; }
.cit-pcb-page > section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---- Defensive: force display:grid against any parent-theme override.
   Some parent-theme rules can set flex-direction:column on archive lists
   which would beat our display:grid on these grids by specificity. */
.cit-pcb-presets-grid,
.cit-pcb-how-grid,
.cit-pcb-why-grid,
.cit-pcb-trust-grid {
    display: grid !important;
    width: 100%;
    box-sizing: border-box;
}

/* -------- 1. Hero -------- */
.cit-pcb-hero {
    position: relative;
    background: linear-gradient(135deg, #0F2238 0%, #1A3559 100%);
    color: #fff;
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
}
.cit-pcb-hero-orb {
    position: absolute;
    top: -25%;
    right: -10%;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.22) 0%, transparent 60%);
    pointer-events: none;
}
.cit-pcb-hero-orb-small {
    position: absolute;
    bottom: -15%;
    left: -8%;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle, rgba(37, 211, 102, 0.10) 0%, transparent 60%);
    pointer-events: none;
}
.cit-pcb-hero-inner { position: relative; max-width: 880px; }
.cit-pcb-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange, #F26522);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.cit-pcb-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
    margin: 0 0 1.5rem;
    color: #fff;
    letter-spacing: -0.025em;
    font-weight: 800;
}
.cit-pcb-hero-accent { color: var(--cit-orange, #F26522); }
.cit-pcb-hero-subtitle {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 2.25rem;
    max-width: 42rem;
}
.cit-pcb-hero-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.cit-pcb-hero-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cit-pcb-hero-meta strong { color: #fff; font-weight: 700; }

/* -------- Section header shared -------- */
.cit-pcb-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.cit-pcb-section-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange, #F26522);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.cit-pcb-section-eyebrow--light { color: var(--cit-orange, #F26522); }
.cit-pcb-section-title {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.1;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--cit-navy, #0F2238);
}
.cit-pcb-section-title--light { color: #fff; }
.cit-pcb-section-subtitle {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--cit-text-muted, #4a5568);
    margin: 0;
}

/* -------- 2. Presets (cream band) -------- */
.cit-pcb-presets {
    background: var(--cit-cream, #FAF7F2);
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.cit-pcb-presets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.cit-pcb-preset {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E8E4DC;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    text-decoration: none;
    color: var(--cit-text, #1a202c);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cit-pcb-preset:hover {
    transform: translateY(-4px);
    border-color: var(--cit-orange, #F26522);
    box-shadow: 0 12px 32px -8px rgba(15, 34, 56, 0.18);
}
.cit-pcb-preset-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.625rem;
    background: rgba(242, 101, 34, 0.1);
    color: var(--cit-orange, #F26522);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.cit-pcb-preset-icon svg { width: 26px; height: 26px; }
.cit-pcb-preset-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--cit-text-muted, #4a5568);
    margin-bottom: 0.5rem;
}
.cit-pcb-preset-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.625rem;
    letter-spacing: -0.01em;
    color: var(--cit-navy, #0F2238);
}
.cit-pcb-preset-text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--cit-text-muted, #4a5568);
    margin: 0 0 1rem;
    flex-grow: 1;
}
.cit-pcb-preset-price {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--cit-navy, #0F2238);
    margin-bottom: 0.5rem;
}
.cit-pcb-preset-cta {
    color: var(--cit-orange, #F26522);
    font-weight: 700;
    font-size: 0.9375rem;
}
.cit-pcb-presets-foot {
    text-align: center;
    margin: 0;
    color: var(--cit-text-muted, #4a5568);
    font-size: 0.9375rem;
}
.cit-pcb-presets-foot a {
    color: var(--cit-orange, #F26522);
    font-weight: 700;
    text-decoration: none;
}
.cit-pcb-presets-foot a:hover { text-decoration: underline; }

/* -------- 3. How it works (dark band) -------- */
.cit-pcb-how {
    background: var(--cit-navy, #0F2238);
    color: #fff;
    padding: clamp(4rem, 8vw, 6rem) 0;
}
.cit-pcb-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.cit-pcb-how-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
}
.cit-pcb-how-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cit-orange, #F26522);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 1.25rem;
}
.cit-pcb-how-step h3 {
    font-size: 1.25rem;
    margin: 0 0 0.625rem;
    color: #fff;
    font-weight: 700;
}
.cit-pcb-how-step p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

/* -------- 4. Builder section -------- */
.cit-pcb-builder-section {
    background: #fff;
    padding: clamp(4rem, 8vw, 6rem) 0;
    scroll-margin-top: 2rem;
}
.cit-pcb-builder-head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.cit-pcb-builder-wrap {
    background: var(--cit-cream, #FAF7F2);
    border: 1px solid #E8E4DC;
    border-radius: 1rem;
    padding: 2rem;
    min-height: 200px;
}
/* If the plugin emits weak h1/h2 inside, tone them down so they don't fight our section title */
.cit-pcb-builder-wrap h1 { font-size: 1.5rem; margin: 0 0 1rem; }

/* -------- 5. Compatibility guarantee (navy split layout) -------- */
.cit-pcb-guarantee {
    background: linear-gradient(135deg, #0F2238 0%, #1A3559 100%);
    color: #fff;
    padding: clamp(4rem, 8vw, 6rem) 0;
    position: relative;
    overflow: hidden;
}
.cit-pcb-guarantee::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -8%;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(37, 211, 102, 0.12) 0%, transparent 60%);
    pointer-events: none;
}
.cit-pcb-guarantee-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3.5rem;
    align-items: start;
}
.cit-pcb-guarantee-lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1.75rem;
    max-width: 38rem;
}
.cit-pcb-guarantee-lead strong { color: #fff; }
.cit-pcb-guarantee-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cit-pcb-guarantee-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.cit-pcb-guarantee-list li:last-child { border-bottom: none; }
.cit-pcb-guarantee-list svg { color: #25D366; flex-shrink: 0; margin-top: 3px; }
.cit-pcb-guarantee-list strong { color: #fff; font-weight: 700; }

.cit-pcb-guarantee-promise {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
}
.cit-pcb-guarantee-promise-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #25D366;
    margin-bottom: 0.875rem;
}
.cit-pcb-guarantee-promise h3 {
    color: #fff;
    font-size: 1.3125rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.cit-pcb-guarantee-promise p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}
.cit-pcb-guarantee-link {
    color: #25D366;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
}
.cit-pcb-guarantee-link:hover { color: #1FB855; }

/* -------- 6. Why custom (white band) -------- */
.cit-pcb-why { background: #fff; padding: clamp(4rem, 8vw, 6rem) 0; }
.cit-pcb-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.cit-pcb-why-card {
    background: var(--cit-cream, #FAF7F2);
    border: 1px solid #E8E4DC;
    border-radius: 1rem;
    padding: 2rem 1.75rem;
}
.cit-pcb-why-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    background: rgba(242, 101, 34, 0.1);
    color: var(--cit-orange, #F26522);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.cit-pcb-why-icon svg { width: 28px; height: 28px; }
.cit-pcb-why-card h3 {
    font-size: 1.25rem;
    margin: 0 0 0.625rem;
    color: var(--cit-navy, #0F2238);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.cit-pcb-why-card p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--cit-text-muted, #4a5568);
    margin: 0;
}

/* -------- 7. Trust strip (cream) -------- */
.cit-pcb-trust {
    background: var(--cit-cream, #FAF7F2);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.cit-pcb-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.cit-pcb-trust-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}
.cit-pcb-trust-item svg {
    width: 28px;
    height: 28px;
    color: var(--cit-orange, #F26522);
    margin-bottom: 0.625rem;
}
.cit-pcb-trust-item strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cit-navy, #0F2238);
}
.cit-pcb-trust-item span {
    font-size: 0.875rem;
    color: var(--cit-text-muted, #4a5568);
}

/* -------- 8. Trustpilot reviews -------- */
.cit-pcb-reviews {
    background: var(--cit-cream, #FAF7F2);
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.cit-pcb-trustpilot {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #E8E4DC;
}

/* -------- 9. Final CTA (orange band) -------- */
.cit-pcb-final-cta {
    background: var(--cit-orange, #F26522);
    color: #fff;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    text-align: center;
}
.cit-pcb-final-cta h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 0.875rem;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.cit-pcb-final-cta p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.cit-pcb-final-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cit-pcb-final-cta-link {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9375rem;
}
.cit-pcb-final-cta-link:hover { text-decoration: underline; }
/* Keep WhatsApp button green inside orange band */
.cit-pcb-final-cta .cit-btn-whatsapp {
    background: #25D366 !important;
    border-color: #25D366 !important;
}
.cit-pcb-final-cta .cit-btn-whatsapp:hover {
    background: #1FB855 !important;
    border-color: #1FB855 !important;
}

/* -------- Responsive -------- */
@media (max-width: 1024px) {
    .cit-pcb-presets-grid { grid-template-columns: repeat(2, 1fr); }
    .cit-pcb-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .cit-pcb-guarantee-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
    .cit-pcb-how-grid { grid-template-columns: 1fr; gap: 1rem; }
    .cit-pcb-why-grid { grid-template-columns: 1fr; gap: 1rem; }
    .cit-pcb-hero-meta { gap: 1rem; }
    .cit-pcb-final-cta-actions { flex-direction: column; align-items: stretch; }
    .cit-pcb-final-cta-actions .cit-btn { text-align: center; }
}
@media (max-width: 520px) {
    .cit-pcb-presets-grid { grid-template-columns: 1fr; }
    .cit-pcb-trust-grid { grid-template-columns: 1fr; }
    .cit-pcb-hero-cta { flex-direction: column; align-items: stretch; }
    .cit-pcb-hero-cta .cit-btn { text-align: center; }
}

    /* When JS has moved box-contents next to trust grid on mobile,
       align their styling so they read as a matched pair. */
    .cit-product-box-contents--mobile-after-trust {
        margin: 0.5rem 1rem 0 !important;
    }

/* ==========================================================================
   404 PAGE (404.php)
   Friendly, helpful page-not-found with search, popular categories,
   help CTAs, and trust strip. Brand-aligned (navy + orange + cream).
   ========================================================================== */

.cit-404-page { background: #fff; }

/* -------- 1. Hero -------- */
.cit-404-hero {
    position: relative;
    background: linear-gradient(135deg, #0F2238 0%, #1A3559 100%);
    color: #fff;
    padding: clamp(4rem, 8vw, 6rem) 0;
    overflow: hidden;
}
.cit-404-hero-orb {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 45rem;
    height: 45rem;
    background: radial-gradient(circle, rgba(242, 101, 34, 0.20) 0%, transparent 60%);
    pointer-events: none;
}
.cit-404-hero-inner {
    position: relative;
    max-width: 760px;
    text-align: center;
}
.cit-404-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange, #F26522);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.cit-404-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}
.cit-404-lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 2rem;
    max-width: 38rem;
}

/* Search */
.cit-404-search {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: 999px;
    padding: 0.375rem 0.5rem 0.375rem 1.25rem;
    box-shadow: 0 14px 40px -10px rgba(15, 34, 56, 0.4);
    margin: 0 auto 1.75rem;
    max-width: 30rem;
}
.cit-404-search-icon { color: var(--cit-text-muted, #4a5568); flex-shrink: 0; }
.cit-404-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    color: var(--cit-navy, #0F2238);
}
.cit-404-search-input:focus { outline: none; }
.cit-404-search-submit {
    background: var(--cit-orange, #F26522);
    color: #fff;
    border: 0;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cit-404-search-submit:hover { background: #d8521a; }

.cit-404-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* -------- 2. Popular categories -------- */
.cit-404-cats {
    background: var(--cit-cream, #FAF7F2);
    padding: clamp(3.5rem, 7vw, 5rem) 0;
}
.cit-404-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.cit-404-section-head h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.75rem;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.cit-404-section-head p {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--cit-text-muted, #4a5568);
    margin: 0;
}

.cit-404-cats-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.cit-404-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1.25rem 1.125rem;
    background: #fff;
    border: 1px solid #E8E4DC;
    border-radius: 0.875rem;
    text-decoration: none;
    color: var(--cit-text, #1a202c);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cit-404-cat-tile:hover {
    transform: translateY(-3px);
    border-color: var(--cit-orange, #F26522);
    box-shadow: 0 10px 24px -8px rgba(15, 34, 56, 0.16);
}
.cit-404-cat-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: rgba(242, 101, 34, 0.08);
    color: var(--cit-orange, #F26522);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.375rem;
}
.cit-404-cat-icon svg { width: 20px; height: 20px; }
.cit-404-cat-label {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--cit-navy, #0F2238);
}
.cit-404-cat-sub {
    font-size: 0.8125rem;
    color: var(--cit-text-muted, #4a5568);
    line-height: 1.35;
}
.cit-404-cat-tile--featured {
    background: linear-gradient(135deg, var(--cit-orange, #F26522) 0%, #d8521a 100%);
    border-color: transparent;
    color: #fff;
}
.cit-404-cat-tile--featured .cit-404-cat-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.cit-404-cat-tile--featured .cit-404-cat-label { color: #fff; }
.cit-404-cat-tile--featured .cit-404-cat-sub { color: rgba(255, 255, 255, 0.85); }
.cit-404-cat-tile--featured:hover {
    border-color: transparent;
    box-shadow: 0 12px 28px -8px rgba(242, 101, 34, 0.5);
}

/* -------- 3. Help -------- */
.cit-404-help {
    background: #fff;
    padding: clamp(3.5rem, 7vw, 5rem) 0;
}
.cit-404-help-inner {
    display: grid;
    grid-template-columns: 1.1fr 1.5fr;
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.cit-404-help-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cit-orange, #F26522);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 0.875rem;
}
.cit-404-help-intro h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 800;
    color: var(--cit-navy, #0F2238);
    margin: 0 0 0.75rem;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.cit-404-help-intro p {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--cit-text-muted, #4a5568);
    margin: 0;
}

.cit-404-help-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}
.cit-404-help-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1.125rem 1.125rem;
    background: var(--cit-cream, #FAF7F2);
    border: 1px solid #E8E4DC;
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--cit-text, #1a202c);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.cit-404-help-card:hover {
    transform: translateY(-2px);
    border-color: var(--cit-orange, #F26522);
}
.cit-404-help-card svg {
    width: 24px;
    height: 24px;
    color: var(--cit-orange, #F26522);
    margin-bottom: 0.375rem;
}
.cit-404-help-card strong {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--cit-navy, #0F2238);
    line-height: 1.2;
}
.cit-404-help-card span {
    font-size: 0.8125rem;
    color: var(--cit-text-muted, #4a5568);
    line-height: 1.35;
}
.cit-404-help-card--wa { background: #E8F8EE; border-color: #B7E2C7; }
.cit-404-help-card--wa svg { color: #25D366; }
.cit-404-help-card--wa:hover { border-color: #25D366; background: #DFF5E5; }

/* -------- 4. Trust strip -------- */
.cit-404-trust {
    background: var(--cit-cream, #FAF7F2);
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
    border-top: 1px solid #E8E4DC;
}
.cit-404-trust-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cit-404-trust-grid li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}
.cit-404-trust-grid svg {
    width: 26px;
    height: 26px;
    color: var(--cit-orange, #F26522);
    margin-bottom: 0.375rem;
}
.cit-404-trust-grid strong {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--cit-navy, #0F2238);
}
.cit-404-trust-grid span {
    font-size: 0.8125rem;
    color: var(--cit-text-muted, #4a5568);
}

/* -------- Responsive -------- */
@media (max-width: 960px) {
    .cit-404-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .cit-404-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .cit-404-help-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 520px) {
    .cit-404-cta { flex-direction: column; align-items: stretch; }
    .cit-404-cta .cit-btn { text-align: center; }
    .cit-404-help-grid { grid-template-columns: 1fr; }
    .cit-404-search { flex-wrap: nowrap; padding: 0.375rem 0.5rem 0.375rem 1rem; }
    .cit-404-search-input { font-size: 0.9375rem; padding: 0.5rem 0.5rem; }
    .cit-404-search-submit { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
}

    /* Container padding tighter on phones */
    .cit-product-breadcrumb-wrap,
    .cit-product-hero .cit-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Hide finance pill row on very small screens to save vertical */
    .cit-product-finance {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
}