/* =========================
   2025 Headings (site-wide)
   ========================= */

/* TXP Brand Colors */
:root {
    --txp-blue: #005CB9;
    --txp-blue-dark: #004991;
    --txp-yellow: #FFCC0C;
    --txp-red: #DF271C;
    --txp-red-dark: #b2271f;
    --txp-sky: #DFEFFF;
    --txp-dark-gray: #424242;
}

body {
    font-size: 14px;
    margin: 0;
    position: relative;
    background: #fff;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
    line-height: 1.428571429;
    color: #333333;
    background-color: #fff;
}

/* H1 (unchanged) */
h1, .h1 {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300; /* Figma: Light */
    font-style: normal;
    font-size: 48px;
    line-height: 64px;
    letter-spacing: 0;
    color: var(--txp-blue);
    margin: 0 0 .5em;
    text-align: left !important;
}

/* H2 - Raleway - 40px - Light */
h2, .h2 {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300; /* Light */
    font-style: normal;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--txp-blue);
    margin: 0 0 .5em;
    text-align: left !important;
}

/* H3 - Ubuntu - 27px - Bold */
h3, .h3 {
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-style: normal;
    font-size: 27px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--txp-blue);
    margin: 0 0 .5em;
    text-align: left !important;
}

/* H4 - Ubuntu - 23px - Bold */
h4, .h4 {
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-style: normal;
    font-size: 23px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--txp-blue);
    margin: 0 0 .5em;
    text-align: left !important;
}

/* H5 - Raleway - 19px - Semi Bold */
h5, .h5 {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600; /* Semi Bold */
    font-style: normal;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--txp-blue);
    margin: 0 0 .5em;
    text-align: left !important;
}

/* H6 - Ubuntu - 16px - Extra Bold */
h6, .h6 {
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800; /* Extra Bold */
    font-style: normal;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--txp-blue);
    margin: 0 0 .5em;
    text-align: left !important;
}

@media (max-width: 900px) {
    h1 {
        font-size: 28px;
    }
}


@media (max-width: 900px) {
    h2 {
        font-size: 25px;
        padding: 0 10px
    }
}

@media (max-width: 900px) {
    h3 {
        font-size: 20px
    }
}

/*Remove Neat Hero Image watermark*/
a[href="https://neat.firecms.co"] {
    display: none !important;
}

/* Scope as tightly as you want; example for the apparel details page */
.text-rich ul {
    list-style: disc;
    margin-left: 1.5rem; /* adjust if needed */
    padding-left: 0; /* optional */
}

    .text-rich ul li::before {
        content: none; /* kill the custom “›” bullet */
    }

    .text-rich ul li::marker {
        font-size: 0.8em; /* tweak: 0.65–0.85 usually */
    }

html body a {
    color: var(--txp-red);
    text-decoration: none;
    background-color: transparent;
}

    html body a:hover,
    html body a:focus {
        text-decoration: underline;
        text-underline-offset: 2px; /* nicer underline */
        text-decoration-thickness: .08em;
        color: var(--txp-red);
    }

    :where(.prose, .richtext, .article, .content) a:visited {
        color: #B21F16;
    }

    /* Accessibility focus ring (optional; keeps your existing palette) */
    html body a:focus-visible {
        outline: 2px solid var(--txp-blue);
        outline-offset: 2px;
    }

/* panel */
.tab-content {
    background-color: white !important;
    border: 2px solid var(--txp-blue);
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-width: 2px;
    padding: 30px;
}

/* tab bar */
.nav-tabs {
    gap: 19px;
    padding-top: 20px;
    border-bottom: none !important; /* ← remove the straight blue line */
    margin-bottom: 0; /* flush against tab-content */
}

/* tab items */
.nav-item {
    height: 40px;
    padding: 0;
    background: transparent;
    margin-bottom: 0 !important;
}

/* links (all states) */
.nav-tabs .nav-link {
    display: block;
    border-radius: 0px 20px 0 0; /* rounded top only */
    padding: 10px 15px;
    background-color: #D0CFCF;
    font: 700 15px Raleway,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    line-height: 20px;
    text-transform: uppercase;
    color: black;
    border: none !important; /* ← kill Bootstrap’s 1px borders */
    box-shadow: none;
}

    /* active state */
    .nav-tabs .nav-link.active,
    .nav-tabs .nav-link.show {
        background-color: var(--txp-blue) !important;
        color: var(--txp-yellow) !important;
        border: none !important; /* keep it clean */
    }

/* --- LinkGroup card --- */
.lg-card {
    border: 2px solid #D0CFCF;
    border-radius: 20px 0 20px 0;
    background: #fff;
    padding: 16px 18px 14px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Header */
.lg-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    text-align: left;
}

.lg-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--txp-blue);
    font-size: 32px;
    line-height: 1;
    margin-left: 15px;
    --fa-primary-color: var(--txp-blue);
    --fa-primary-opacity: 1.0;
    --fa-secondary-color: var(--txp-red);
    --fa-secondary-opacity: 1.0;
}

.lg-card__title {
    margin: 0;
    color: var(--txp-blue);
    font: 700 22px/34px Raleway,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    text-align: left;
}

/* Blue divider: start after icon (50) + gap (10) = 60px; give right breathing room */
.lg-card__divider {
    border: 0;
    height: 1px;
    background: var(--txp-blue);
    /* top | right | bottom | left */
    margin: 8px 17px 10px 17px;
    width: auto;
}

/* --- Links authored as UL/LI/A --- */
.lg-card__list > ul,
.lg-card__list > div > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .lg-card__list > ul > li,
    .lg-card__list > div > ul > li {
        position: relative;
    }

        /* separators BETWEEN items (no line under title) */
        .lg-card__list > ul > li + li::before,
        .lg-card__list > div > ul > li + li::before {
            content: "";
            position: absolute;
            top: 0;
            left: 16px;
            right: 16px;
            height: 1px;
            background: #E6E6E6;
        }

        /* LEFT-align link text to the same 16px inset as separators */
        .lg-card__list > ul > li > a,
        .lg-card__list > div > ul > li > a,
        .lg-card__list > p > a { /* <-- fixed missing comma here */
            display: block;
            text-decoration: none;
            text-align: left;
            padding-left: 16px;
            padding-right: 16px;
            color: var(--txp-red);
            font: 700 16px/39px Raleway,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
        }

/* Nuke any legacy borders so no stray top gray line appears */
.lg-card__list ul,
.lg-card__list li {
    border: 0 !important;
    background-image: none !important;
}

/* --- Fallback if it’s P/A instead of UL/LI --- */
.lg-card__list > p {
    margin: 0;
}

    .lg-card__list > p + p {
        position: relative;
    }

        .lg-card__list > p + p::before {
            content: "";
            position: absolute;
            top: 0;
            left: 16px;
            right: 16px;
            height: 1px;
            background: #E6E6E6;
        }

/* Hover/focus */
.lg-card__list a:hover {
    text-decoration: underline;
}

.lg-card__list a:focus-visible {
    outline: 2px solid var(--txp-blue);
    outline-offset: 2px;
}

/* Heading + Text 50 (Figma spec) */
.hat50 {
    max-width: 626px; /* keep the block narrow */
    margin: 0; /* left aligned inside page container */
}

/* Body/copy */
.hat50__body {
    color: var(--txp-dark-gray);
    text-align: left;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15px;
    line-height: 24px;
    max-width: 626px;
}
    /* Normalize margins inside the body rich text */
    .hat50__body p {
        margin: 0 0 10px 0;
    }

        .hat50__body p:last-child {
            margin-bottom: 0;
        }

/* Optional: smaller title on narrow screens */
@media (max-width: 576px) {
    .hat50__title {
        font-size: 36px;
        line-height: 44px;
    }
}

/* ContentPage2025 only */
.content-page-2025 .hat50 :is(h1,h2,h3,h4,h5) {
    text-align: left !important;
}

/*-------------------------*/
/*  Transfer Selector Tool
/*-------------------------*/

.transfer-selector-section {
    justify-items: center;
    align-items: start; /* <-- allow content to sit from the top */
    position: relative;
    display: grid;
    place-items: center; /* center the core block */
    overflow: hidden;
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0, rgba(255,255,255,0) 1cm), linear-gradient(183.02deg, #fff 10.79%, rgba(255,255,255,.40) 60.21%, #fff 101.03%), radial-gradient(40vw 36vw at 86% 22%, rgba(223,39,28,.70) 0 40%, rgba(223,39,28,0) 70%), radial-gradient(48vw 40vw at 14% 20%, rgba(250,211,109,.90) 0 40%, rgba(250,211,109,0) 70%), radial-gradient(48vw 38vw at 28% 78%, rgba(0,92,185,.70) 0 35%, rgba(0,92,185,0) 65%), radial-gradient(55vw 45vw at 86% 82%, rgba(250,211,109,.85) 0 40%, rgba(250,211,109,0) 70%);
    background-repeat: no-repeat;
    overflow: clip;
    background-size: cover;
    min-height: clamp(640px, 88vh, 960px); /* was clamp(520px, 80vh, 760px) */
}

/* Headings / subtitle */
.tw-title {
    font-family: "Ubuntu Sans", Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 31px;
    line-height: 46px;
    letter-spacing: 0;
    text-align: center;
    color: var(--txp-blue);
}

.tw-subtitle {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 700 !important; /* Bold */
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: var(--txp-dark-gray) !important;
}

/* Common card shell for steps */
.tw-card {
    overflow: visible; /* allow the tab to nudge up */
    padding-top: 16px; /* small breathing room for content */
    background: #fff;
    border: 2px solid rgba(0,92,185,.25);
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 1.25rem 1.25rem 1.5rem;
    position: relative;
    border-width: 2px;
    width: 100%; /* UPDATED: let Bootstrap column define width */
    box-sizing: border-box; /* UPDATED */
    margin-top: 0;
}

/* UPDATED: remove all explicit widths/heights for steps */
.tw-step-1 {
    height: 454px;
}

.tw-step-2 {
    height: 454px;
}

.tw-step-3 {
    height: 314px;
}

.fabric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; /* equal vertical & horizontal spacing */
}

.tw-step-2 .tw-step-body {
    padding: 7px;
    overflow-y: auto;
    overflow-x: hidden; /* prevent horiz scrollbar */
}

    .tw-step-2 .tw-step-body .row {
        --bs-gutter-x: 16px; /* horizontal gap */
        --bs-gutter-y: 16px; /* vertical gap (same as x) */
        margin-left: 0; /* neutralize Bootstrap's negative margins */
        margin-right: 0;
    }

@media (min-width: 992px) {
    .tw-results-card {
        min-height: 454px;
    }

        .tw-results-card .tw-step-body {
            height: 100%;
        }
}


/* Left pane (blue bordered box) */
.res-left {
    border: 2px solid var(--txp-blue);
    border-radius: 5px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Curved blue tab */
.tw-step-tab {
    position: relative; /* was absolute */
    top: 0;
    left: 0;
    background: var(--txp-blue);
    color: #fff;
    border-top-right-radius: 20px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    width: 220px;
    min-height: 61px;
    position: relative; /* not absolute */
    margin: 0; /* no gap */
    z-index: 1;
    border-bottom-left-radius: 0; /* flat bottom edge like Figma */
    border-bottom-right-radius: 0;
    text-align: left;
}

.tw-step-tab__title {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900; /* Black */
    font-size: 15px;
    line-height: 20px;
    color: var(--txp-yellow);
    display: inline-block;
    padding: 0px 0px;
    border-radius: 3px;
    width: max-content;
    text-align: left;
}

.tw-step-tab__subtitle {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 13px;
    line-height: 20px;
    color: #fff;
    text-align: left;
}

.tw-step-tab2 {
    position: relative; /* was absolute */
    top: 0;
    left: 0;
    background: var(--txp-blue);
    color: #fff;
    border-top-right-radius: 20px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    width: 320px;
    min-height: 61px;
    position: relative; /* not absolute */
    margin: 0; /* no gap */
    z-index: 1;
    border-bottom-left-radius: 0; /* flat bottom edge like Figma */
    border-bottom-right-radius: 0;
    text-align: left;
}

.tw-step-tab2__title {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900; /* Black */
    font-size: 15px;
    line-height: 20px;
    color: var(--txp-yellow);
    display: inline-block;
    padding: 0px 0px;
    border-radius: 3px;
    width: max-content;
    text-align: left;
}

.tw-step-tab2__subtitle {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 13px;
    line-height: 20px;
    color: #fff;
    text-align: left;
}

/* Light boxes */
.tw-box {
    border-radius: 5px;
    padding: 20px;
}

.tw-box--light {
    background: var(--txp-sky);
}

/* SELECT with solid red caret */
.txp-select {
    position: relative;
}

    .txp-select::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 13px solid var(--txp-red); /* solid red triangle */
        pointer-events: none;
    }

.tw-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 50px;
    padding: 15px 40px 15px 20px;
    border-radius: 5px;
    border: 2px solid var(--txp-yellow);
    background: #fff;
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: var(--txp-blue);
}

/* Step 1 helper text (blue text under dropdown) */
.tw-help {
    font-family: "Ubuntu Sans", Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 500; /* Medium */
    font-size: 19px;
    line-height: 29px;
    color: var(--txp-blue);
}

/* Fabric cards (Step 2) */
.fabric-card {
    background: var(--txp-sky);
    border: 0;
    border-radius: 5px;
    margin: 0; /* ensure no stray margins */
    height: 128px;
    min-height: 128px;
    width: 100%;
    padding: 16px; /* inner padding of each card */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fabric-card__icon {
    width: 44px;
    height: 44px; /* placeholder; real SVG will replace */
    background: rgba(0,92,185,.12);
    border-radius: 999px;
    display: inline-block;
}

    .fabric-card__icon img {
        display: block;
        max-width: 40px;
        height: auto;
    }

.fabric-card__label {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: 13px;
    text-align: center;
    color: var(--txp-blue-dark);
    white-space: normal;
    line-height: 1.2;
}

.fabric-card:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--txp-blue); /* or var(--txp-yellow) */
    border-radius: 5px; /* match the card */
}

/* only when keyboard focusing (optional, nicer UX) */
.fabric-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--txp-blue);
}

.fabric-card.is-selected {
    box-shadow: 0 0 0 3px var(--txp-yellow);
    background-color: #C7E2FF;
}

/* Step 3 edit rows */
.edit-row {
    background: #fff;
    border: 2px solid var(--txp-yellow);
    border-radius: 5px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 50px;
    margin-bottom: 15px;
}

.edit-label {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-size: 15px;
    line-height: 1;
    color: var(--txp-blue);
}

.edit-value {
    text-align: center;
    background: transparent;
    width: 40%; /* UPDATED: responsive width instead of 120px */
    min-width: 90px; /* UPDATED: guard for very narrow screens */
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: 17px;
    line-height: 1;
    color: var(--txp-blue);
}

    .edit-value::placeholder {
        color: var(--txp-blue);
        opacity: 1;
    }

.tw-select-size {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 2px solid var(--txp-yellow);
    background: #fff;
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--txp-blue);
}

/* Step 3 assist text */
.tw-assist {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: 13px;
    line-height: 31px;
    color: var(--txp-red);
}

/* CTA (4th container) */
.tw-cta {
    background: var(--txp-blue);
    border-radius: 5px;
    padding: 22px 34px; /* keep Figma spacing */
    width: 100%; /* UPDATED: fill column */
    box-sizing: border-box; /* UPDATED */
    height: 120px; /* OK to keep fixed; button block */
    margin-top:20px;
}

.tw-cta-btn {
    width: 100%;
    max-width: 340px; /* UPDATED: caps width but still responsive */
    height: 39px;
    border-radius: 5px;
    background: var(--txp-yellow);
    border: 0;
    padding: 0 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 39px;
    color: var(--txp-blue);
    text-align: center;
    white-space: nowrap;
}
/* Dim the button when disabled */
    .tw-cta-btn.is-disabled {
        opacity: .6;
        cursor: not-allowed;
    }

/* Bootstrap-style invalid feedback (if you want a red border) */
    .tw-cta-btn.is-invalid {
        border-color: #dc3545 !important;
    }
/* hover/focus/active */
.btn.tw-cta-btn:hover,
.btn.tw-cta-btn:focus,
.btn.tw-cta-btn:active {
    background: goldenrod;
    border-color: goldenrod;
    color: var(--txp-blue);
    box-shadow: none; /* optional: kill Bootstrap glow */
}


/* Under 1200px: allow wrapping so it doesn't clip */
@media (max-width: 1199.98px) {
    .btn.tw-cta-btn {
        white-space: normal !important; /* was nowrap */
        height: auto !important; /* was 39px */
        line-height: 1.25 !important; /* multi-line readable */
        padding: .75rem 1rem !important; /* larger touch target */
        width: 100%;
        max-width: 340px; /* keep your cap */
        word-break: break-word;
        hyphens: auto;
    }
}

    .transfer-selector-section .transfer-wizard.container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--bs-gutter-x,.75rem);
        padding-right: var(--bs-gutter-x,.75rem);
        max-width: 100%; /* default below sm */
    }

@media (min-width:576px) {
    .transfer-selector-section .transfer-wizard.container {
        max-width: 540px;
    }
}

@media (min-width:768px) {
    .transfer-selector-section .transfer-wizard.container {
        max-width: 720px;
    }
}

@media (min-width:992px) {
    .transfer-selector-section .transfer-wizard.container {
        max-width: 960px;
    }
}

@media (min-width:1200px) {
    .transfer-selector-section .transfer-wizard.container {
        max-width: 1140px;
    }
}

@media (min-width:1400px) {
    .transfer-selector-section .transfer-wizard.container {
        max-width: 1280px;
    }
}

@media (min-width:1600px) {
    .transfer-selector-section .transfer-wizard.container {
        max-width: 1450px;
    }
}

@media (min-width:1800px) {
    .transfer-selector-section .transfer-wizard.container {
        max-width: 1600px;
    }
}

/* Bootstrap flex quirk guard: allow columns to shrink without overflow */
.transfer-wizard .row > [class*="col-"] {
    min-width: 0;
}

/* Kill the trailing margin from the last control inside a box */
.tw-box .edit-row:last-child,
.tw-box .form-group:last-child,
.tw-box .txp-select:last-child {
    margin-bottom: 0;
}

/* Optional: slightly tighter padding for compact boxes */
.tw-box--tight {
    padding: 12px 16px; /* was 20px all around */
}

/* Left column typography */
.res-title {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 31px;
    color: var(--txp-blue);
}

.res-sub {
    font-family: Raleway, system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: var(--txp-dark-gray);
}

.selector-price-warning-text {
    font-family: Raleway, system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: var(--txp-dark-gray);
}

/* Price block separators with no layout shift */
.res-price {
    position: relative;
    padding: 12px 0; /* add top/bottom breathing room */
}

    .res-price::before,
    .res-price::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: #e3e3e3; /* match your comp color */
        pointer-events: none;
    }

    .res-price::before {
        top: 0;
    }

    .res-price::after {
        bottom: 0;
    }

    /* Tighten vertical rhythm between rows */
    .res-price .row {
        margin: .25rem 0;
    }

        /* IMPORTANT: inside .res-price, collapse hidden rows */
        .res-price .row.invisible { /* keep your existing JS logic; just collapse here */
            display: none !important;
            visibility: hidden; /* harmless, keeps your attr logic consistent */
        }

.res-price--red {
    font-family: Raleway, system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    color: var(--txp-red);
}

.res-price--blue {
    font-family: Raleway, system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    color: var(--txp-blue);
}

/* Yellow buttons (left pane) */
.res-yellow-btn {
    background: var(--txp-yellow);
    color: var(--txp-blue) !important;
    border: 0;
    border-radius: 5px;
    height: 39px;
    padding: 0 15px;
    font: 700 14px/39px Verdana, Geneva, Tahoma, sans-serif;
    white-space: nowrap;
}

    .res-yellow-btn:hover {
        color: #fff !important; /* white text */
    }

.res-card {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    min-height: clamp(160px, 22vh, 202px);
    background-color: #d9d9d9; /* fallback */

    background-repeat: no-repeat;
    background-size: cover; /* image fills card */
    background-position: center; /* centered */
}

    /* Easy View */
    .res-card.back-od {
        background-image: linear-gradient( to right, #231F20 0%, rgba(35,31,32,0.95) 10%, rgba(35,31,32,0.65) 40%, rgba(35,31,32,0.25) 60%, rgba(35,31,32,0.15) 80% ), url('../images/easy-view-designer.jpg');
    }

    /* AI Uploader */
    .res-card.back-ai {
        background-image: linear-gradient( to right, #231F20 0%, rgba(35,31,32,0.95) 10%, rgba(35,31,32,0.65) 40%, rgba(35,31,32,0.25) 60%, rgba(35,31,32,0.15) 80% ), url('../images/ai-upload.jpg');
    }

.res-card__inner {
    position: relative; /* keep above ::before */
    padding: 22px 26px;
}

.res-card__title {
    font-family: Ubuntu, system-ui, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
}

/* ========== Right column: split 50/50 on lg+ ========== */
@media (min-width: 992px) {
    /* make the right column a flex column that fills its lane */
    .col-lg-7.d-flex.flex-column {
        min-height: 100%;
    }

        /* each res-card takes half the height */
        .col-lg-7.d-flex.flex-column > .res-card {
            flex: 1 1 0;
            display: flex; /* so the inner can center vertically */
            min-height: 0; /* allow flex to control height */
        }

        /* if you set a min-height earlier for mobile, neutralize it on lg+ */
        .col-lg-7.d-flex.flex-column > .res-card {
            min-height: 0 !important;
        }

            /* center the content inside each card without stretching children */
            .col-lg-7.d-flex.flex-column > .res-card .res-card__inner {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center; /* vertical centering */
                align-items: center; /* horizontal centering of child items */
            }

    /* prevent the red button from stretching full width */
    .res-card__inner .res-action {
        align-self: center; /* ignore align-items:stretch */
        width: auto; /* keep its natural width */
    }

    /* keep a gap between the two cards */
    .col-lg-7.d-flex.flex-column > .res-card + .res-card {
        margin-top: 1rem;
    }
}

/* Action buttons on the gray cards */
.res-action {
    border-radius: 5px;
    border: 0;
    height: 39px;
    padding: 0 15px;
    font: 700 14px/39px Verdana, Geneva, Tahoma, sans-serif;
    color: #fff;
}

.res-action--blue {
    background: var(--txp-blue);
}

.res-action--red {
    background: var(--txp-red);
    color:white !important;
}

/* Results main card: white background + blue outline; matches comp */
.tw-results-card {
    background: #fff;
    border: 2px solid var(--txp-blue);
    border-radius: 14px;
    padding: 1.25rem;
}

/* Make the tab sit flush with the card border (no gap) */
.results .tw-step-tab {
    margin-bottom: 0;
}

/* restore default bullets + indentation */
.res-sub ul {
    list-style: disc; /* show bullets */
    list-style-position: outside;
    margin: 0.5rem 0 0 1.25rem; /* or use only padding-left */
    padding-left: 1.25rem;
}

/* in case a global rule hid markers */
.res-sub li::marker {
    content: initial; /* re-enable default bullet glyph */
}

/* if something set display:flex on ULs globally, undo it here */
.res-sub ul {
    display: block;
}

/* Make the number column behave like a proper numeric gutter */
.res-price .row {
    align-items: baseline;
}
    .res-price .row > [class*="col-"] {
        padding-left: .25rem;
        padding-right: .25rem;
    }

/* Right-align and use tabular figures so 0–9 all take same width */
.amount {
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1; /* fallback for older engines */
    min-width: 7ch; /* keep the column width consistent across rows */
}

/* Optional: nudge the $ closer to the digits */
.amount--money {
    letter-spacing: 0.01em;
}

/* ==== Results panel: fluid instead of hard fixed ==== */
.tw-results-card {
    background: #fff;
    border: 2px solid var(--txp-blue);
    border-radius: 14px;
    padding: 1.25rem;
    /* desktop-ish feel but responsive */
    min-height: clamp(480px, 58vh, 510px);
    height: auto;
}

/* Keep left column content from forcing the panel taller */
.res-left {
    display: flex;
    flex-direction: column;
}

/* ===== Tablet tuning (992–1199px) ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .tw-results-card {
        padding: 1rem;
    }

    .res-card__inner {
        padding: 16px 18px;
    }

    .res-title {
        font-size: 28px;
        line-height: 32px;
    }

    .res-sub {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 1rem;
    }

    .res-price .row {
        margin-bottom: .25rem;
    }

    .res-action {
        height: 36px;
        line-height: 36px;
    }
    /* If you used .h-100 on the left column, relax it here */
    .res-left.h-100 {
        height: auto;
    }
}

.selector-alert-warnings {
    min-height: 44px; /* match banner height */
    transition: opacity .2s;
}

    .selector-alert-warnings.hidden {
        opacity: 0;
        visibility: hidden;
    }

/* --- Icon Heading Text Group --- */
.iconheadingtextgroup {
    display: flex;
    gap: 20px; /* space between icon and text */
    padding: 10px;
    width: 100%;
    max-width: 1200px;
    align-items: center;
}

    .iconheadingtextgroup + .iconheadingtextgroup {
        border-top: 2px solid #D0CFCF; /* mismo color y grosor de Figma */
    }

/* Icon */
.iconheadingtextgroup__icon {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    align-items: center;
    justify-content: center;
    font-size: 6rem; /* controls FontAwesome size */
}

/* Content container */
.iconheadingtextgroup__content {
    flex: 1;
    text-align: left !important;
}

/* Heading */
.iconheadingtextgroup__header h4 {
    font-family: 'Ubuntu Sans', sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 34px;
    margin-bottom: 8px;
    text-align: left !important;
}

/* Text */
.iconheadingtextgroup__text {
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    text-align: left;
}

/* --- Icon Heading Text Card --- */
.iconheadingtextcard {
    border: 2px solid #D0CFCF;
    border-radius: 20px 0 20px 0;
    background: #fff;
    padding: 16px 18px 14px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
}

/* Icon */
.iconheadingtextcard__icon {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem; /* controls FontAwesome size */
    margin: 0 auto;
}

/* Content container */
.iconheadingtextcard__content h4 {
    flex: 1;
    text-align: left !important;
}

/* Heading */
.iconheadingtextcard__header h4 {
    font-family: 'Ubuntu Sans', sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 34px;
    margin-bottom: 8px;
    text-align: center !important;
    color: var(--txp-blue);
}

.iconheadingtextcard__header h4 a {
    font-family: 'Ubuntu Sans', sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 34px;
    margin-bottom: 8px;
    text-align: center !important;
    color: var(--txp-blue);
}

/* Text */
.iconheadingtextcard__text {
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    text-align: left !important;
}

@media (min-width: 992px) { /* lg and up */
    .col-lg-5ths {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Break out of centered containers to full viewport width */
.full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

/* Optional: avoid side scrollbars from box-shadows etc. */
html, body {
    overflow-x: hidden;
}

/* Make the canvas cover the section area */
.transfer-selector-section {
    position: relative;
}

    .transfer-selector-section .neat-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

.custom-card-img {
    height: 276px;
    object-fit: contain;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section1-container {
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

.background-image-container {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    z-index: 1;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .background-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .background-image-container::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(270deg, rgba(52, 52, 52, 0) 36.18%, #231F20 100%);
        z-index: 2; /* above image, below text */
    }

@media (max-width: 768px) {
    .section1-container {
        overflow: hidden; /* safety */
    }

    .custom-offset {
        padding-top: 90px;
    }

    .separator-title-section {
        padding: 20px;
        text-align: center !important;
    }

        .separator-title-section h1 {
            font-size: 28px;
            text-align: center !important;
        }

    .background-image-container img {
        height: 100%; /* keep vertical coverage */
        max-width: none; /* allow >100% */
        object-fit: cover;
        object-position: center;
        transform-origin: center;
    }

    .background-image-container::after {
        /* darker and wider fade on the left */
        background: linear-gradient( 90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 35%, rgba(0, 0, 0, 0.35) 65%, rgba(0, 0, 0, 0.00) 90% );
    }

    /* Nudge hero text/button left + tighten max width to avoid blending */
    .section1-content-container .custom-offset {
        margin-left: 0 !important;
        padding-left: 12px; /* was pushed in by layout; keep it light */
        padding-right: 12px;
    }

    .hero-features-mobile {
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        width: 100vw;
        background: var(--txp-dark-gray);
        padding: 28px 0;
        color: #fff;
    }

        /* Keep content nicely centered; tweak max-width to taste */
        .hero-features-mobile .container {
            max-width: 560px;
        }

        /* One feature = icon above, text centered below */
        .hero-features-mobile .feature-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 18px 12px;
        }

        /* Icon sizing and spacing */
        .hero-features-mobile .icon-img {
            width: 44px; /* 40–48 works well */
            height: auto;
            margin-bottom: 12px;
            opacity: 0.95;
        }

        /* Text style: strong, centered, limited line length */
        .hero-features-mobile .items-format {
            color: #fff !important;
            font-family: Raleway;
            font-weight: 800;
            font-size: 16px;
            max-width: 26ch; /* keeps lines tidy like the Figma */
        }

        /* Optional: subtle separators between rows */
        .hero-features-mobile .feature-row:not(:last-child) {
            border-bottom: 1px solid rgba(255,255,255,0.12);
        }

    .hero-topbar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 90px;
        background: #232323; /* black bar */
        display: flex;
        align-items: center;
        padding: 0 16px;
        z-index: 4; /* above gradient/image */
    }

        /* Title as text */
        .hero-topbar h2 {
            margin: 0;
            color: #fff;
            font-size: 1.6rem; /* adjust to match Figma */
            font-weight: 700;
            line-height: 1.1;
        }

        /* Title as image (logo) */
        .hero-topbar img#ucmax-title-image {
            max-height: 48px; /* fits inside 90px bar */
            width: auto;
            display: block;
        }
}

@media (min-width: 769px) {
    .hero-topbar {
        position: static;
        background: transparent;
        height: auto;
        padding: 0;
    }

        .hero-topbar h2 {
            margin: 0;
        }
}

.section1-content-container {
    padding: 20px; /* Add padding for readability */
    width: 100%; /* Ensure it spans full width */
    position: relative;
    z-index: 3;
}

.features-image {
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.page-button-2col {
    border-radius: 5px !important;
    background: var(--txp-red) !important;
    font-family: Raleway !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-align: center !important;
    vertical-align: middle !important;

    padding-right: 20px;
    padding-left: 20px;
}

    .page-button-2col:not(:disabled):not(.disabled):hover {
        filter: brightness(.95) !important;
        background-color: var(--txp-dark-gray) !important;
        color: white !important;
    }

@media (max-width: 768px) {
    .accordion {
        width: 100%; /* Ensure the accordion takes the full width of the screen */
    }

    .prod-features-pic {
        margin-top: 2rem;
    }

    .page-button-2col {
        margin-top: 15px;
    }
}

@media (max-width: 450px) {
    .btn.btn-learn-more {
        font-size: 16px; /* Optionally reduce font size for better fit */
    }
}

@media (max-width: 380px) {
    .btn.btn-learn-more {
        font-size: 12px; /* Optionally reduce font size for better fit */
    }
}

/* Hide features list on mobile */
@media (max-width: 768px) {
    .hero-features {
        display: none !important;
    }
}

/* If you aren’t using Bootstrap display utilities, also add: */
@media (max-width: 768px) {
    #file-drop-zone {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .d-md-none {
        display: none !important;
    }

    .d-md-block {
        display: block !important;
    }
}

.product-page .content-wrap {
    background: white;
}

/* Responsive margin adjustments for different devices */
.product-page .mt-lg-7,
.product-page .mt-lg-6 {
    margin-top: 2rem !important;
}

.product-page .mt-md-5 {
    margin-top: 2.5rem !important;
}

/* General typography improvements */
.product-page .description-format {
    text-align: justify;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 127%;
    letter-spacing: 0;
    color: var(--txp-yellow);
}

.product-page .items-format {
    font-size: 1.4rem;
    font-family: Raleway;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0;
}

.product-page .upload-box {
    color: black;
    font-size: 1.2rem;
    padding: 20px;
    border: 3px dashed #1f75fd;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-width: 3px;
    border-style: dashed;
    gap: 5px;
    opacity: 1;
    border: 3px dashed var(--txp-yellow);
}

.upload-box-bold {
    color: black;
    font-size: 1.4rem;
    font-weight: 700;
}

.upload-box-regular {
    color: black;
    font-size: 1.2rem;
}

.learn-more-section p {
    font-weight: 400 !important;
}

/* Learn More Section */
.learn-more-section {
    position: relative;
    background-color: var(--txp-blue-dark);
    overflow: hidden;
    padding: 40px 0;
    font-weight: 400 !important;
}

.related-videos-section {
    position: relative;
    background-color: #ECECEC;
    overflow: hidden;
}

.related-videos-section .inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px; /* horizontal padding */
}

.learn-more-section-content {
    position: relative;
    z-index: 1;
}

.title-section {
    background-color: #1f75fd;
    padding: 60px 10px;
    color: white;
}

.no-logo-text-format {
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 35px;
    line-height: 100%;
    letter-spacing: 0;
    color: white;
    margin-bottom: 30px;
    margin-top: 10px;
    text-align:left;
}

@media (max-width: 769px) {
    .no-logo-text-format {
        margin-left:20px;
    }

}

/*.start-button-container {
    margin-bottom:235px;
}*/

.separator-title-section {
    display: flex;
    align-items: center;
    justify-content: center;
    /* let it grow if heading becomes 2–4 lines */
    min-height: 183px; /* keeps current look as a baseline */
    height: auto; /* remove fixed height behavior */

    padding: 28px 0; /* controls bar height nicely */
    background-color: var(--txp-yellow);
    color: var(--txp-blue);
    text-align: center;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

    .separator-title-section h1 {
        max-width: 720px; /* tweak until you get the wrap you want */
        margin: 0 auto;
        padding: 0 24px; /* left/right breathing room */
        line-height: 1.1;
        text-wrap: balance; /* optional polish */
    }

    .separator-title-section h2 {
        max-width: 720px; /* tweak until you get the wrap you want */
        margin: 0 auto;
        padding: 0 24px; /* left/right breathing room */
        line-height: 1.1;
        text-wrap: balance; /* optional polish */
        text-align: center !important;
        overflow-wrap: normal; /* undo break-word/anywhere */
        word-break: normal; /* undo break-all */
        hyphens: manual; /* don’t auto-hyphenate words */
    }


.page-button {
    padding: 10px 15px;
    color: white;
    font-size: 1.1rem;
    font-weight: 800;
    background-color: var(--txp-blue);
    border-style: solid;
    border-width: 2px;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    border-radius: 5px;
    text-transform: uppercase;
}

    .page-button:hover {
        background-color: #30343c;
        border-color: #30343c;
        color: white;
    }

    .page-button.selected {
        background-color: white;
        color: #1f75fd;
        border-color: #1f75fd;
    }

.page-button-yellow {
    border-radius: 5px;
    background-color: var(--txp-yellow) !important;
    font-family: "Raleway", sans-serif !important;
    font-synthesis: none;
    font-optical-sizing: auto;
    text-transform: uppercase;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-align: center;
    vertical-align: middle;
    color: var(--txp-blue) !important;
    border: none !important;
}
    .page-button-yellow.selected {
        background-color: var(--txp-yellow) !important;
        
    border: none !important;
    }

.page-button-blue {
    border-radius: 5px;
    background-color: var(--txp-blue) !important;
    font-family: "Raleway", sans-serif !important;
    font-synthesis: none;
    font-optical-sizing: auto;
    text-transform: uppercase;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-align: center;
    vertical-align: middle;
    color: white !important;
    border: none !important;
}

    .page-button-blue.selected {
        background-color: var(--txp-blue) !important;
        border: none !important;
    }

/* Let button text wrap instead of being forced on one line */
.page-button-yellow,
.page-button-blue {
    white-space: normal !important; /* override .btn */
    line-height: 1.3;
}

@media (max-width: 768px) {
    .product-detail-buttons .page-button-yellow,
    .product-detail-buttons .page-button-blue {
        font-size: 12px !important;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%; /* each button full width */
        margin-bottom: 8px; /* small gap between them */
    }
}


.box-text {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    color: white !important;
}

.features-description-format {
    text-align: justify;
    color: #d4273e;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--txp-blue);
}

.product-page hr {
    height: 2px;
    border: none;
    background-color: lightgray;
    margin: 0 1rem;
}

.learn-more-title {
    color: white;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
}

.btn-learn-more {
    background-color: var(--txp-blue);
    background: var(--txp-blue);
    color: white !important;
    width: 100%;
    height: 55px;
    white-space: normal;
    word-wrap: break-word;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px !important;
    display: flex;
    align-items: center;
    justify-content: center !important; /* center the group */
    gap: .5rem; /* space between text and icon */
    margin-left: 0;
    float: none;
}

    /* fixed square wrapper */
    .btn-learn-more .caret {
        width: 1.25em;
        height: 1.25em;
        display: inline-grid;
        place-items: center;
        line-height: 0;
        font-size: 1.25em; 
    }

        /* works for FA <svg> (svg-inline--fa) or <i> fallback */
        .btn-learn-more .caret .svg-inline--fa,
        .btn-learn-more .caret i {
            display: block;
            transform-box: fill-box; /* important for SVG */
            transform-origin: 50% 50%;
            transition: transform .18s ease;
            font-size: 1.15em; /* tweak size */
        }

    /* CLOSED (down): slight up-nudge */
    .btn-learn-more.collapsed .caret .svg-inline--fa,
    .btn-learn-more.collapsed .caret i {
        transform: translateY(-5px) scaleY(1);
    }

    /* OPEN (up): flip + push down a bit */
    .btn-learn-more:not(.collapsed) .caret .svg-inline--fa,
    .btn-learn-more:not(.collapsed) .caret i {
        transform: translateY(5px) scaleY(-1);
    }

.accordion-header .btn-learn-more::after,
.accordion .btn-link::after,
.accordion-button::after {
    content: none !important;
    background-image: none !important;
}

.accordion-header {
    background-color: var(--txp-blue-dark);
}


.btn-learn-more:hover {
    color: white !important;
    background-color: var(--txp-dark-gray) !important;
    border: 2px solid var(--txp-dark-gray) !important;
}

/* Remove the ugly bootstrap focus look and keep your normal style */
.btn-learn-more:focus,
.btn-learn-more:active,
.btn-learn-more:focus:active {
    outline: none;
    box-shadow: none;
    color: var(--txp-blue) !important;
    background-color: white !important;
    border: 2px solid var(--txp-blue) !important;
}

.accordion-item-container {
    padding: 20px;
    font-size: .8rem;
}

.image-caption {
    background-color: lightgray;
    height: 40px;
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-ev {
    font-size: 1.1rem;
    font-family: Verdana;
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 0;
}

.ev-items-format {
    color: black;
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
}

.gray-background {
    background: #ECECEC;
}

.label-ev {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; 
    padding: 10px 0px;
}

.product-page .text-rich hr {
    margin: 0 !important;
}

.product-page .image-container {
    width: 100%;
    height: 50%;
    overflow: hidden;
    position: relative;
}

    .product-page .image-container img {
        width: 100%;
        height: auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.image-container-2col {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .image-container-2col img {
        width: 100%;
        height: auto;
    }

.label-ev-2col {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: lightgray;
    text-align: center;
    width: 100%;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 10px 0px;
}

.product-page .content-container {
    padding: 0px;
}

.dynamic-hr {
    margin-top: 80px;
    margin-bottom: 30px;
}

@media (min-width: 1700px) {
    .custom-offset {        
        padding-right: 10%;
    }
}

.hawk-container {
    width: 100%;
}

.hawk-toast-container {
    width: 100%;
}

@media (min-width: 1700px) {
    .section1-container .section1-content-container {
        margin-left: calc(-50vw + 50% + 70px);
        padding-left: 0;
        max-width: 760px; /* keep lines readable */
        margin-right: 32px; /* optional right breathing room */
    }
}

/* 1400–1699px: lighter nudge */
@media (min-width: 1400px) and (max-width: 1699.98px) {
    .section1-container .section1-content-container {
        margin-left: calc(-25vw + 25% + 24px);
    }
}

.product-page .video-wrapper {
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden; /* <-- required to clip the iframe */
}

    /* (Bootstrap 4) make sure the responsive box also respects rounding */
    .product-page .video-wrapper .embed-responsive {
        height: 100%;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        overflow: hidden;
    }

    /* iframe hygiene */
    .product-page .video-wrapper iframe {
        width: 100%;
        height: 100%;
        display: block;
        border: 0;
    }

/* Main Video Layout */
.video-page {
    max-width: 1400px;
}

.main-video-section {
    text-align: left;
}

/* remove extra Bootstrap padding on small screens */
@media (min-width: 992px) {
    .main-video-section {
        padding-left: 0;
        margin-left: 0;
    }
}

/* Video Styling */
.row.align-items-start {
    align-items: flex-start !important;
}

.video-page {
    max-width: 1400px;

}

.video-title, .video-description {
    text-align: left;
}

.video-page .row {
    display: flex;
    align-items: flex-start; /* make both columns equal height */
}

.main-video-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.main-video-section,
.sidebar-column {
    display: flex;
    flex-direction: column;
}

.video-title h3{
    font-family: Raleway;
    font-weight: 300;
    font-size: 40px;
    color: var(--txp-blue);
    text-align: left;
    margin-bottom: 1rem;
}

.video-description {
    text-align: left;
    color: var(--txp-dark-gray);
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.video-fulldescription {
    text-align: left;
    color: var(--txp-dark-gray);
    font-size: 1.5rem;
    line-height: 1.6;
}

.video-frame iframe {
    width: 100%;
    height: 500px;
    border: 2px solid #E6E6E6;
    border-radius: 12px 0 12px 0; /* upper-left & lower-right rounded */
    background-color: #ffffff;
    box-shadow: none;
}

/* Sidebar Styling */
.sidebar-card {
    border: 2px solid #E6E6E6;
    border-radius: 12px 0 12px 0; /* upper-left & lower-right rounded */
    background-color: #ffffff;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    height: 500px; /* aligns with video height */
    width: 325px;
}

    /* Header */
    .sidebar-card .card-header {
        background-color: #f8f9fa;
        border-bottom: none !important;
        padding: 0.75rem 1rem;
        border-top-left-radius: 12px; /* match outer shape */
    }

        .sidebar-card .card-header h1 {
            font-family: Raleway;
            font-weight: 700;
            font-size: 16px;
            text-decoration-color: var(--txp-blue);
            text-align: left !important;
            margin: 0;
            padding-left: 0;
        }

    /* Scroll Body */
    .sidebar-card .card-body.sidebar-scroll {
        background-color: #fff;
        flex: 1;
        overflow-y: auto;
        padding: 1rem 1rem 0.5rem;
    }

    /* Footer */
    .sidebar-card .card-footer {
        border-top: 2px solid #E6E6E6;
        background-color: #f8f9fa;
        text-align: center;
        padding: 0.75rem 1rem;
        border-bottom-right-radius: 12px; /* match outer shape */
    }

/* Sidebar Scrollbars */
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: #c5c5c5;
    border-radius: 3px;
}

    .sidebar-scroll::-webkit-scrollbar-thumb:hover {
        background-color: #999;
    }

/* Sidebar Video Items */
.related-video {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 1rem;
}

.related-video video-thumb:hover {
    transform: scale(1.05);
}

    /* Thumbnail container */
    .related-video .thumb {
        flex: 0 0 115px;
    }

    /* Thumbnail image */
    .related-video .video-thumb {
        width: 115px;
        height: 68px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-size: cover;
        background-position: center;
        transition: transform 0.2s ease;
    }

        .related-video .video-thumb:hover {
            transform: scale(1.05);
        }



.sidebar-card .card-body {
    padding: 1rem 1rem 0.5rem;
}

    

/* Buttons */
.sidebar-card .btn {
    display: flex; /* enables true centering */
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */

    width: 244px;
    height: 39px;
    border-radius: 5px;
    background-color: var(--txp-blue);
    color: #fff;
    font-family: Verdana, sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    text-decoration: none;
    border: none;
    margin: 0 auto; /* centers button inside footer */
    transition: background-color 0.2s ease;
}

    .sidebar-card .btn:hover {
        background-color: #004a94;
    }

/* Maintain responsive alignment */
@media (max-width: 991.98px) {
    .video-page .row {
        align-items: flex-start; /* revert for stacked view */
    }

    .sidebar-card {
        height: auto;
    }
}

.sidebar-card .related-video .video-thumb {
    width: 115px !important;
    height: 68px !important;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sidebar-card .related-video {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 1rem;
}

.sidebar-card .video-info a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    font-family: 'Ubuntu Sans', sans-serif;
    font-weight: 700; /* Regular weight (or 300 for lighter look) */
    font-size: 15px;
    line-height: 22px;
    color: var(--txp-red);
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
}

    .sidebar-card .video-info a:hover {
        color: #a30000;
        text-decoration: underline;
    }

.sidebar-card > .card-footer {
    margin-top: 16px !important; /* this creates the gap */
}

.sidebar-card > .card-body.sidebar-scroll {
    padding-bottom: 24px !important;
}

    .sidebar-card > .card-body.sidebar-scroll > .related-video:last-of-type {
        margin-bottom: 16px !important;
    }

.sidebar-card .card-footer {
    text-align: left !important; /* align content to left */
    padding-left: 1rem; /* add a little left padding */
}

.sidebar-card .btn {
    margin: 0 !important; /* remove auto-centering */
    display: inline-flex; /* keep vertical centering inside button */
    align-items: center;
    justify-content: center;
}

/* === PRODUCT CATEGORIES HERO === */

.hero-gradient-2025 {
    min-height: 452px;
    display: flex;
    align-items: center;
    /* sizing/positioning for both layers */
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: normal; /* change to overlay/multiply if you want stronger tint */
}

/* Optional: vertical gradient on mobile for readability */
@media (max-width: 767.98px) {
    .hero-gradient-2025 {
        background-image: linear-gradient( to bottom, #231F20 0%, rgba(35,31,32,0.9) 50%, rgba(35,31,32,0.4) 100% ), var(--hero-bg, none);
    }
}

/* type rules (unchanged) */
.category-hero .no-logo-text-format h1 {
    font-family: "Ubuntu",sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #fff;
    text-align: left;
    /* no left margin here */
}

.hero-eyebrow {
    font-family: "Ubuntu",sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 29px;
    color: var(--txp-yellow) !important;
    text-transform: uppercase;
    text-align: left;
}

    .hero-eyebrow p {
        font-family: "Ubuntu",sans-serif !important;
        font-weight: 700 !important;
        font-size: 22px !important;
        line-height: 29px !important;
        color: var(--txp-yellow) !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }

.hero-desc {
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
}

    .hero-desc p {
        color: #fff !important;
        font-family: Verdana, Geneva, Tahoma, sans-serif !important;
        font-size: 14px !important;
        line-height: 24px !important;
        text-align: left !important;
    }

/* shared offset: 0 on mobile */
.hero-offset {
    margin-left: 0 !important;
}

/* tablet up */
@media (min-width:768px) {
    .hero-offset {
        margin-left: 30px;
    }
}

/* desktop/XL up */
@media (min-width:1200px) {
    .hero-offset {
        margin-left: 100px;
    }
}

/* smaller H1 on very small screens if needed */
@media (max-width:767.98px) {
    .category-hero .no-logo-text-format h1 {
        font-size: 30px;
        padding-left: 30px;
    }

    .hero-eyebrow {
        padding-left: 30px;
    }

    .hero-desc {
        padding-left: 30px;
    }
}

/* keep inline CMS alignment from overriding */
.category-hero .no-logo-text-format [style*="text-align"] {
    text-align: left !important;
}

/* ===== Buttons ===== */
.txp-primary-btn,
.txp-red-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 39px;
    border-radius: 5px;
    font-weight: 700;
    padding: 0 15px;
    text-decoration: none;
    border: none;
    white-space: nowrap; /* avoid full-width on desktop */
}

.txp-primary-btn {
    background: var(--txp-blue) !important;
    color: #fff !important;
    font-size: 14px;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: normal;
    font-weight: 800;
    line-height: 39px; /* 278.571% */
    display: inline-flex;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

    .txp-primary-btn:not(:disabled):not(.disabled):hover {
        filter: brightness(.95) !important;
        background-color: var(--txp-dark-gray) !important;
        color: white !important;
    }

.txp-yellow-btn {
    background: var(--txp-yellow) !important;
    color: var(--txp-blue) !important;
    font-size: 14px;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: normal;
    font-weight: 800;
    line-height: 39px; /* 278.571% */
    display: inline-flex;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

    .txp-yellow-btn:not(:disabled):not(.disabled):hover {
        filter: brightness(.95) !important;
        background-color: var(--txp-dark-gray) !important;
        color: white !important;
    }

.txp-red-btn {
    background-color: var(--txp-red) !important;
    color: white !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    font-size: 14px;
    align-self: flex-start; /* fixes centering weirdness */
    height: 39px; /* unify height */
    padding: 0 15px; /* identical padding */
    min-width: 155px; /* enforce consistent width */
    text-transform: uppercase;
}

    .txp-red-btn:not(:disabled):not(.disabled):hover {
        filter: brightness(.95);
        background-color: var(--txp-dark-gray) !important;
        color: white !important;
    }

/* ===== Featured tile ===== */
.txp-featured-tile {
    position: relative;
    overflow: hidden;
    background: #fff;
    min-height: 388px;
    height: auto;
    border: 1px solid #D0CFCF; /* solid */
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

    /* Media area uses one consistent height */
    .txp-featured-tile .ratio {
        --bs-aspect-ratio: 0; /* disable Bootstrap aspect-ratio helper */
        height: 388px; /* same visual height as min-height above */
    }

    .txp-featured-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Blue panel */
.txp-featured-panel {
    position: absolute;
    left: 0px; /* “stuck to left margin” feel */
    top: 50%;
    transform: translateY(-50%);
    width: 211px;
    min-height: 247px;
    background: var(--txp-blue);
    color: #fff;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100% - 48px); /* stays inside the image */
    overflow: hidden;
    justify-content: flex-start;
    align-items: flex-start;
}

.txp-featured-title {
    font-family: Ubuntu, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
}

.txp-featured-desc {
    font-family: Raleway, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #fff;
}

/* ===== Primary card ===== */
.card.txp-primary-card {
    border-radius: 5px;
    border: 1px solid #D0CFCF;
}

    .card.txp-primary-card .ratio {
        --bs-aspect-ratio: 0;
        height: 180px; /* fixed media height (tweak 160–200 if needed) */
    }

    .card.txp-primary-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card.txp-primary-card .card-body {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .card.txp-primary-card .card-footer {
        margin-top: auto;
    }

/* Titles/descriptions */
.txp-card-title,
.txp-secondary-title {
    font-family: Ubuntu, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
}

.txp-card-desc {
    font-family: Raleway, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #3c3c3c;
}

.txp-secondary-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    border-radius: 5px;
    border: 1px solid #D0CFCF;
}

    /* Optional: clamp secondary descriptions so the three items fit nicely */
    .txp-secondary-card .txp-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* ===== Mobile tweaks ===== */
@media (max-width: 767.98px) {
    .txp-featured-tile .ratio {
        height: 320px;
    }

    .txp-featured-tile {
        border-radius: 12px; /* clip both image and panel */
        overflow: hidden;
    }

    .txp-featured-panel {
        position: static; /* stack under image */
        transform: none;
        margin: 0; /* ← no side margins -> full width */
        width: 100%;
        min-height: auto;
        border-radius: 0 0 12px 12px; /* rounds bottom only, image rounds top */
        padding: 16px; /* inner padding instead of side margins */
    }
}

/* Make ALL our “VIEW PRODUCT” buttons exactly the same height */
.btn.txp-primary-btn,
.btn.txp-red-btn {
    /* kill Bootstrap's variable-driven sizing */
    --bs-btn-padding-y: 0 !important;
    --bs-btn-padding-x: 15px !important;
    --bs-btn-line-height: 39px !important;
    --bs-btn-border-width: 0 !important;
    /* enforce our box */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 39px !important;
    line-height: 39px !important; /* backstop in case vars don't apply */
    padding: 0 15px !important;
    min-width: 50px; /* keeps widths consistent */
    font-size: 14px; /* optional: keep text size identical */
    white-space: nowrap;
}

/* keep featured's red button from stretching inside the blue panel */
.txp-featured-panel .btn.txp-red-btn {
    align-self: flex-start;
}

/* secondary buttons: inline on desktop, full width only on mobile */
.btn.txp-primary-btn {
    align-self: flex-start; /* prevent flex stretching */
    width: auto;
}

/* Mobile: stretch to full width */
@media (max-width: 767.98px) {
    .txp-secondary-card {
        align-items: stretch; /* children can stretch */
    }

    .txp-primary-card {
        align-items: stretch; /* children can stretch */
    }

        .btn.txp-primary-btn {
            align-self: stretch;
            width: 100%;
        }
}

/* Auto-pack percent widths at ≥lg; mobile stays full-width */
@media (min-width: 992px) {
    .txp-w-40 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .txp-w-30 {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .txp-w-20 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* match vertical gap to horizontal gap (≈32 px) */
.txp-gx-3 {
    margin-left: -1rem;
    margin-right: -1rem;
}

    .txp-gx-3 > .txp-item {
        padding-left: 1rem;
        padding-right: 1rem;
    }

/* NEW: vertical gap helper  */
.txp-gy-3 {
    margin-top: -1rem;
    margin-bottom: -1rem;
}

    .txp-gy-3 > .txp-item {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

@media (min-width: 992px) {
    .txp-item {
        flex: 0 0 auto; /* let cards size naturally */
        max-width: none; /* remove hard ceiling */
    }

    /* keep normal widths as preferred basis */
    .txp-w-40 {
        flex-basis: 40%;
    }

    .txp-w-30 {
        flex-basis: 30%;
    }

    .txp-w-20 {
        flex-basis: 20%;
    }
}

.txp-item {
    min-width: 0;
}

/* Primary card: override Bootstrap’s .ratio behavior */
.card.txp-primary-card .ratio {
    position: relative;
    height: 180px; /* fixed height for media zone */
    overflow: hidden;
}

    /* Remove Bootstrap’s pseudo-element padding trick */
    .card.txp-primary-card .ratio::before {
        content: none !important;
        display: none !important;
    }

    /* Make the image fully fill the .ratio area */
    .card.txp-primary-card .ratio img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
        display: block;
    }

/* Secondary card media box */
.txp-media {
    position: relative;
    height: 180px; /* same as primary */
    width: 100%;
    overflow: hidden;
    background-color: #f8f9fa;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    /* Fill the box with the image */
    .txp-media img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
        display: block;
    }

/* Cosmetic consistency for both wrappers */
.card.txp-primary-card .ratio,
.txp-media {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #f8f9fa; /* ensures same bg when image fails */
}

.section-separator {
    padding-top: 50px !important;
    outline-width: 2px;
}

/* Don't equalize column heights in this grid */
.related-videos-section .row {
    align-items: flex-start !important; /* was: stretch */
}

/* Make sure the columns themselves aren’t forcing flex/equal-height */
.other-products-item {
    display: block; /* override any d-flex you added earlier */
}

    /* Keep the image constraint you added (example) */
    .other-products-item .image-container {
        aspect-ratio: 16 / 9; /* or your chosen height */
        overflow: hidden;
    }

        .other-products-item .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    /* Remove any "stick to bottom" behavior if you used it */
    .other-products-item .page-button {
        margin-top: 12px !important; /* just a small gap */
    }

/* modern: works on flex rows in all current browsers */
.related-videos-section .row {
    row-gap: 24px;
}

    /* fallback for very old browsers */
    .related-videos-section .row > [class*="col-"] {
        margin-bottom: 24px;
    }

/* Make the link a proper card container */
.video-image-link {
    position: relative;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

    .video-image-link img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 6px; /* optional */
    }

    /* Centered red play badge ~57x57 (from your measurements) */
    .video-image-link .play-badge {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 57.33px;
        height: 56.73px;
        border-radius: 50%;
        background: var(--txp-red);
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none; /* clicks go to the <a> */
    }

        .video-image-link .play-badge::before {
            content: "";
            border-left: 18px solid #fff; /* white triangle */
            border-top: 11px solid transparent;
            border-bottom: 11px solid transparent;
            margin-left: 2px; /* optical centering */
        }

    /* subtle hover */
    .video-image-link:hover .play-badge {
        transform: translate(-50%, -50%) scale(1.07);
        transition: transform .12s ease-out;
    }

/* Equal gutters (H & V) for BS4 */
.video-grid {
    margin-left: -12px;
    margin-right: -12px;
}
    /* 24px row gutter total */
    .video-grid > [class*="col-"] {
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 24px;
    }

/* Cards fill the column, keep 16:9, rounded corners */
.video-card {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

.video-grid .video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play badge (~57x57) */
.play-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 57px;
    height: 57px;
    border-radius: 50%;
    background: var(--txp-red);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    pointer-events: none;
}

    .play-badge::before {
        content: "";
        border-left: 18px solid #fff;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        margin-left: 2px;
    }

.video-card:hover .play-badge {
    transform: translate(-50%,-50%) scale(1.07);
    transition: transform .12s ease-out;
}

/* stop whole-card/image zoom within the video grid */
.video-grid .video-card,
.video-grid .video-image-link,
.video-grid .video-card:hover,
.video-grid .video-image-link:hover {
    transform: none !important;
}

    .video-grid .video-card img,
    .video-grid .video-image-link img,
    .video-grid .video-card:hover img,
    .video-grid .video-image-link:hover img {
        transform: none !important;
        transition: none !important;
    }

.play-badge {
    transition: transform .12s ease-out; /* animate badge only */
    will-change: transform;
}

/* if you want it when hovering anywhere on the card */
.video-card:hover .play-badge,
.video-image-link:hover .play-badge {
    transform: translate(-50%, -50%) scale(1.07);
}

/* or only when cursor is directly over the badge */
.play-badge {
    pointer-events: auto;
}

    .play-badge:hover {
        transform: translate(-50%, -50%) scale(1.07);
    }

/* Light-blue band */
.video-hero {
    height: 120px;
    background: var(--txp-sky);
    margin-bottom: 50px; /* space under the bar */
    display: flex; /* vertical centering */
    align-items: center; /* vertical centering */
}

/* Title + sub */
.vl-title {
    margin: 0;
    font-family: "Ubuntu Sans", sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 34px;
    color: var(--txp-blue);
}

.vl-sub {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: #4a4a4a;
}

/* Right side: label + custom select */
.vl-label {
    margin-right: 10px;
    font-weight: 600;
    color: #1b4a86;
    font-size: 18px;
    color: var(--txp-blue);
    padding-right:10px;
}

/* visually hidden but screen-reader accessible */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
/* pill */
.select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0px 12px; /* keep only this one */
    border: 2px solid var(--txp-yellow);
    border-radius: 5px;
    background: #fff;
    min-height: 50px;
    width: auto;
    box-sizing: border-box;
}

/* value (unchanged except padding-right so caret area is clickable) */
.select-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0;
    font-family: "Raleway", system-ui, sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--txp-blue);
    width: 100%;
    flex: 1 1 auto;
    cursor: pointer;
    position: relative;
    z-index: 2;
    padding: 0 50px 0 0; /* <-- makes caret area clickable */
}

/* caret */
.select-wrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 14px solid var(--txp-red);
    pointer-events: none;
    transition: transform .15s ease;
    z-index: 3;
}

/* rotate ONLY when .open is set */
.select-wrap.open::after {
    transform: translateY(-50%) rotate(180deg);
}

/* yellow pill wrapper – desktop / tablet */
.number-textbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 200px;
    border-radius: 5px;
    border: 2px solid var(--txp-yellow);
    background: #FFFFFF;
    box-sizing: border-box;
    width: 100%;
    gap: 12px;
    padding: 10px 18px 10px 24px; /* small left padding */
    flex-wrap: wrap; /* <--- add this */
}

    /* the warning message should always be on its own line */
    .number-textbox #color-limit-message {
        flex: 0 0 100%; /* full width row */
        margin-top: 6px; /* small gap under the input */
        margin-left:28px;
    }

    /* red arrows – keep as you already had */
    .number-textbox input[type="number"]::-webkit-inner-spin-button,
    .number-textbox input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='18'%20viewBox='0%200%2016%2018'%3E%3Cpolygon%20points='8,2%204,6%2012,6'%20fill='%23DF271C'/%3E%3Cpolygon%20points='8,16%204,12%2012,12'%20fill='%23DF271C'/%3E%3C/svg%3E") no-repeat center center;
        width: 18px;
        border-left: 1px solid #D0CFCF;
        cursor: pointer;
    }

    /* label inside pill */
    .number-textbox > label {
        flex: 0 0 160px; /* same as before */
        margin: 0 8px 0 28px; /* small left indent so it matches selects */
        font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        color: #7B7B7B;
    }

    /* number input – keep as you have it, just no extra margin-left */
    .number-textbox input[type="number"] {
        width: 90px;
        max-width: 90px;
        height: 32px;
        margin-left: 0;
        border-radius: 3px;
        border: 1px solid #D0CFCF;
        font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 800;
        font-size: 17px;
        line-height: 1;
        color: var(--txp-blue);
        text-align: center; /* was right; now centered */
        box-sizing: border-box;
    }

.select-prefix {
    font: 700 15px Raleway,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
    color: #7B7B7B;
}

.calc-select-prefix {
    display: inline-flex; /* label + icon in one row */
    align-items: center;
    font: 700 15px Raleway,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
    color: #7B7B7B;
    min-width: 160px;
    margin-right: 12px;
    margin-left: 17px;
}

    .calc-select-prefix .fa-info-circle {
        margin-left: 6px; /* space between text and icon */
        font-size: 14px; /* a bit smaller than text */
    }

/* Desktop / tablet: pill + icon in one row */
.calculator-form-options .art-source-group {
    display: flex;
    flex-direction: row; /* row, not column */
    align-items: center;
    flex-wrap: nowrap;
}

    .calculator-form-options .art-source-group .vl-filter {
        flex: 1 1 auto;
        max-width: 100%;
    }

/* ===== Calculator popover (Figma style) ===== */

.popover.txp-calc-popover {
    max-width: 260px; /* flexible, but similar to 224px from Figma */
    border-radius: 5px;
    border: 2px solid var(--txp-blue);
    background-color: #F4F4F4;
    box-shadow: none; /* remove Bootstrap shadow */
    padding: 0;
}

    /* inner spacing */
    .popover.txp-calc-popover .popover-header {
        margin: 0;
        padding: 12px 28px 4px 16px; /* room for the close X on the right */
        background: transparent;
        border-bottom: 0;
        font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 700; /* Bold */
        font-size: 14px;
        line-height: 1; /* 100% */
        letter-spacing: 0;
        color: var(--txp-dark-gray);
    }

    .popover.txp-calc-popover .popover-body {
        padding: 0 16px 12px 16px;
        font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 500; /* Medium */
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
        color: var(--txp-dark-gray);
    }

    /* Red close “X” in top-right corner */
    .popover.txp-calc-popover .popover-close {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 10px;
        height: 10px;
        padding: 0;
        border: none;
        background: none;
        color: var(--txp-red);
        font-size: 16px; /* so the &times; looks nice */
        line-height: 10px;
        cursor: pointer;
    }

    /* Arrow colors (border + fill) */
    .popover.txp-calc-popover.bs-popover-right .arrow::before {
        border-right-color: var(--txp-blue); /* border color */
    }

    .popover.txp-calc-popover.bs-popover-right .arrow::after {
        border-right-color: #F4F4F4; /* fill color */
    }

    .popover.txp-calc-popover.bs-popover-left .arrow::before {
        border-left-color: var(--txp-blue);
    }

    .popover.txp-calc-popover.bs-popover-left .arrow::after {
        border-left-color: #F4F4F4;
    }

    .popover.txp-calc-popover.bs-popover-top .arrow::before {
        border-top-color: var(--txp-blue);
    }

    .popover.txp-calc-popover.bs-popover-top .arrow::after {
        border-top-color: #F4F4F4;
    }

    .popover.txp-calc-popover.bs-popover-bottom .arrow::before {
        border-bottom-color: var(--txp-blue);
    }

    .popover.txp-calc-popover.bs-popover-bottom .arrow::after {
        border-bottom-color: #F4F4F4;
    }

#screen-print-container {
    position: relative;
}

/* Fixed helper card on the right of the calculator */
.calc-help-panel {
    position: absolute;
    top: 0;
    right: 0; /* locked to the right side of the calculator */
    width: 224px; /* from Figma; can be tweaked */
    max-width: 100%;
    background: #F4F4F4;
    border: 2px solid var(--txp-blue);
    border-radius: 5px;
    padding: 14px 16px 12px;
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--txp-dark-gray);
    z-index: 20;
}

/* header: title + red X */
.calc-help-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.calc-help-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* red cross */
.calc-help-close {
    position: absolute;
    top: 8px;
    right: 10px;
    /* bigger X */
    font-size: 34px; /* was smaller – bump this */
    line-height: 1;
    width: 18px;
    height: 18px;
    color: var(--txp-red);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.calc-help-body {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

    .calc-help-body p {
        margin: 0 0 4px;
    }

/* the small button that wraps the info icon */
.calc-help-trigger {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    padding: 0;
    margin-left: 10px;
    margin-top:7px;
    background: var(--txp-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .calc-help-trigger svg {
        width: 10px;
        height: 16px;
    }

    .calc-help-trigger:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 92, 185, 0.4);
    }

.calculator-form-options .div-calculate {
    margin-top: 30px;
}

/* Tablet + mobile: stack label over control, full-width pills */
@media (max-width: 767.98px) {
    .calculator-form-options .number-textbox {
        flex-direction: column; /* label -> input -> message */
        align-items: flex-start;
    }

        .calculator-form-options .number-textbox #color-limit-message {
            flex: 0 0 auto; /* don’t try to share row */
            width: 100%;
            margin-top: 6px;
        }

    /* make the columns full-width instead of col-5/7 */
    .calculator-form-options .vl-filter.col-7,
    .calculator-form-options .number-textbox.col-5,
    .calculator-form-options .number-textbox.col-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* DROPDOWNS ---------------------------------------------------- */
    .calculator-form-options .select-wrap {
        flex-direction: column;
        align-items: flex-start;
        flex: 1 1 auto; /* grow / shrink as needed */
        width: auto; /* override width:100% from .w-100 */
    }

        .calculator-form-options .select-wrap::after {
            top: auto;
            bottom: 12px; /* position near the select text */
            transform: rotate(0deg);
        }

        .calculator-form-options .select-wrap.open::after {
            transform: rotate(180deg); /* rotate on mobile too */
        }

    .calculator-form-options .calc-select-prefix {
        width: 100%;
        margin: 0 0 4px; /* label on top, small gap below */
        margin-top: 10px;
    }

    .calculator-form-options .select-control {
        width: 100%;
        max-width: 100%;
    }

    /* NUMBER PILLS ------------------------------------------------- */
    .calculator-form-options .number-textbox {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 12px; /* matches .select-wrap */
        gap: 4px;
    }

        .calculator-form-options .number-textbox > label {
            flex: 0 0 auto;
            margin: 0 0 2px; /* no left margin on mobile */
        }

        .calculator-form-options .number-textbox input[type="number"] {
            width: 100%;
            max-width: 100%;
        }

    /* keep the pill + ? on one row */
    .calculator-form-options .vl-filter {
        display: flex !important; /* in case something overrides .d-flex */
        align-items: center;
        flex-wrap: nowrap; /* don't allow wrapping */
    }


        .calculator-form-options .vl-filter .calc-help-trigger {
            flex: 0 0 auto;
            margin-left: 8px;
            margin-top: 0;
        }
}


/* HRs (placed inside the same content container in markup) */
.video-hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 16px 0;
}

/* left summary */
.pager-summary {
    font-style: italic;
    color: #555;
    font-size: 13px;
}

/* page numbers with pipes */
.pager-pages {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    font-size:16px;
    font-weight:700;
}

    .pager-pages li {
        margin: 0 8px;
        font-size: 14px;
    }

        .pager-pages li + li {
            position: relative;
        }

            .pager-pages li + li::before {
                content: "|";
                position: absolute;
                left: -10px;
                color: #bdbdbd;
            }

    .pager-pages a {
        text-decoration: none;
        color: var(--txp-red); /* inactive = red */
    }

    .pager-pages .active a {
        color: #000; /* active = black */
        cursor: default;
    }

/* Right buttons */
.pager-nav {
    display: flex;
    align-items: center;
}

.pager-btn {
    display: inline-block;
    min-width: 72px; /* was width:72px; */
    height: 39px;
    border: 0;
    border-radius: 5px;
    background: var(--txp-blue);
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 39px;
    text-align: center;
    padding: 0 15px; /* lets long text expand safely */
}

    .pager-btn:hover {
        background-color: var(--txp-dark-gray);
        color: white !important;
    }

    .pager-btn + .pager-btn {
        margin-left: 12px; /* guaranteed gap */
    }

    .pager-btn,
    .pager-btn:hover,
    .pager-btn:focus {
        text-decoration: none !important;
        color: white !important;
    }

    .pager-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

/* ≤ 870px: numbers wrap; Prev/Next drop below */
@media (max-width: 1280px) {
    #pagerBar {
        flex-wrap: wrap;
        gap: 8px; /* small vertical breathing */
    }

        /* Left group (summary + numbers) stays on first row, full width */
        #pagerBar > .d-flex {
            order: 1;
            width: 100%;
        }

    /* Numbers: wrap to next line, tight spacing, no pipes */
    .pager-pages {
        display: flex;
        flex-wrap: wrap; /* <-- key change: allow wrapping */
        gap: 6px 10px; /* row/column spacing */
        margin: 0;
        padding: 0;
    }

        .pager-pages li + li::before {
            display: none !important;
        }
        /* kill the pipe separators */
        .pager-pages li {
            margin: 0; /* remove extra separation */
            padding: 0; /* keep numbers tight */
            font-size: 14px;
            white-space: nowrap; /* keep each number intact */
        }

    /* Prev/Next on their own row, full width, left/right */
    .pager-nav {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
    }
}

/* Tablet-ish: hide PREVIOUS / NEXT, keep only the numbers */
@media (max-width: 1279.98px) and (min-width: 768px) {
    .pager-nav {
        display: none !important;
    }
}

/* Small mobile: show PREVIOUS / NEXT again on their own row */
@media (max-width: 767.98px) {
    .pager-nav {
        display: flex !important;
        order: 2;
        width: 100%;
        justify-content: space-between;
        margin-top: 6px;
    }
}

/* Component wrapper */
.hero-size-carousel {
    border-radius: 40px 0 40px 0;
    overflow: hidden;
    position: relative;
}

    /* Make indicators vertical, left-aligned like the homepage */
    .hero-size-carousel .carousel-indicators {
        position: absolute !important; /* override BS placement */
        left: 18px !important;
        top: 14px !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        transform: none !important;
        z-index: 3; /* sit above the image */
    }

        .hero-size-carousel .carousel-indicators li {
            width: 12px !important;
            height: 12px !important;
            border-radius: 50% !important;
            background-color: rgba(255,255,255,.95) !important;
            border: 0 !important;
            margin: 0 !important;
            opacity: 1 !important;
            cursor: pointer; /* hand on dots too */
        }

        .hero-size-carousel .carousel-indicators .active {
            background-color: var(--txp-blue) !important; /* your blue */
        }

    /* ensure the slide layout fills the card */
    .hero-size-carousel .carousel,
    .hero-size-carousel .carousel-inner,
    .hero-size-carousel .carousel-item {
        height: 100%;
    }

        .hero-size-carousel .carousel-item > a {
            display: flex;
            align-items: stretch;
            height: 100%;
            width: 100%;
        }

        /* image fill */
        .hero-size-carousel .carousel-item img {
            display: block;
            width: 100%;
            height: 100% !important; /* override .img-fluid */
            object-fit: cover;
        }

    /* Scoped to this component */
    .hero-size-carousel a,
    .hero-size-carousel a:hover,
    .hero-size-carousel a:focus {
        text-decoration: none !important;
    }

    .hero-size-carousel a {
        cursor: pointer !important; /* show hand */
        text-decoration: none !important; /* keep no-underline on hover */
    }

/* ===== Photo Gallery (Bootstrap 4) ===== */

.photo-gallery {
    position: relative;
    width: 100%;
    background: #ECECEC;
    border-radius: 20px 0 20px 0;
    overflow: hidden;
    padding: 20px 40px 90px;
    /* THIS is the key: a real height for children to inherit */
    height: clamp(480px, 60vh, 650px);
}

/* give it height “feel” on larger screens */
@media (min-width: 992px) {
    .photo-gallery {
        min-height: 600px;
    }
}

@media (max-width: 991.98px) {
    .photo-gallery {
        min-height: 480px;
        padding: 16px 20px 82px;
    }
}

/* make carousel occupy the stage */
.photo-gallery .carousel,
.photo-gallery .carousel-inner,
.photo-gallery .carousel-item,
.photo-gallery .pg-stage {
    height: 100%;
}

/* stage centers the image and respects padding */
.photo-gallery .pg-stage {
    height: 100%;
    display: -ms-flexbox; /* IE11 flex */
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.photo-gallery .pg-img {
    height: 100%;
    width: auto;
    max-width: none; /* important: don’t cap it */
    object-fit: contain; /* harmless here */
    display: block;
    border-radius: 6px;
}

/* bottom controls (arrows + dots) */
.photo-gallery .pg-controls {
    position: absolute;
    left: 50%;
    bottom: 22px; /* leave a bit of space under dots */
    transform: translateX(-50%);
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
}

/* indicators (auto width based on count) */
.photo-gallery .pg-indicators {
    list-style: none;
    margin: 0 14px; /* space between arrows and dots */
    padding: 0;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

    .photo-gallery .pg-indicators li {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #D0CFCF;
        cursor: pointer;
        margin: 0 5px;
    }

    .photo-gallery .pg-indicators .active {
        background: var(--txp-blue);
    }

/* arrows */
.photo-gallery .pg-arrow {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .photo-gallery .pg-arrow .chev {
        box-sizing: content-box; /* keep the stroke outside the box */
        width: 16px;
        height: 16px; /* square “V” that we rotate */
        border: 4px solid var(--txp-red);
        border-right: none;
        border-bottom: none; /* gives a “∧” stroke */
    }

    .photo-gallery .pg-arrow .chev {
        position: relative;
        width: 15px;
        height: 26px;
    }

.photo-gallery .pg-arrow {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .photo-gallery .pg-arrow .chev {
        box-sizing: content-box;
        width: 16px;
        height: 16px; /* square */
        border: 4px solid var(--txp-red);
        border-right: none;
        border-bottom: none; /* "∧" */
    }

.photo-gallery .pg-next .chev {
    transform: rotate(135deg);
}

.photo-gallery .pg-prev .chev {
    transform: rotate(-45deg);
}

.full-width-section-color-background {
    background: var(--txp-sky);
}

.full-width-section-color-background {
    background: var(--txp-sky);
}

    .separator-title-section + p:has(> br:only-child),
    .full-width-section-color-background + p:has(> br:only-child) {
        background: var(--txp-sky);
        margin: 0 !important; /* kill transparent margin */
        padding: 1rem 0; /* preserve spacing */
        width: 100vw; /* full-bleed */
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    .full-width-section-color-background ul,
    .richtext-content ul,
    .full-bleed ul {
        list-style: disc outside; /* classic bullet */
        margin-left: 1.5rem;
    }

        /* remove any custom chevron icons in these areas */
        .full-width-section-color-background ul li::before,
        .richtext-content ul li::before,
        .full-bleed ul li::before {
            content: none !important;
        }

        /* red dot bullet */
        .full-width-section-color-background ul li::marker,
        .richtext-content ul li::marker,
        .full-bleed ul li::marker {
            color: var(--txp-red);
            font-size: 0.9em; /* slightly larger bullet */
        }

        /* optional: tighten vertical rhythm */
        .full-width-section-color-background ul li,
        .richtext-content ul li,
        .full-bleed ul li {
            margin-bottom: .3rem;
        }

    .separator-title-section + p > br:only-child,
    .full-width-section-color-background + p > br:only-child {
        display: none;
    }

/* ================== APPAREL HERO ================== */

.hero-gradient-2025.hero-apparel-100 {
    min-height: 300px !important;
    overflow: hidden;
    padding: 0 !important;
}

/* ================== APPAREL – TOP FILTER PILLS ================== */

/*.filter-pill {*/
.filter-pill {
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 287px;
max-width: 100%;
height: 42px; /* compact height */
min-height: 0;
padding: 8px 16px;
border: 2px solid var(--txp-yellow);
border-radius: 5px;
background: #FFFFFF;
box-sizing: border-box;
gap: 8px;
}

/* Label (gray) */
/*.filter-label*/
.filter-label {
    font-family: "Raleway", system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    color: #7B7B7B;
    white-space: nowrap;
}

/* Value (blue) */
.filter-value {
    font-family: "Raleway", system-ui, sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--txp-blue);
}

/* Truncate long values */
.filter-value--truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* Search pill layout */
.filter-pill-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    /* Search input inside pill */
/*    .filter-pill-search .search-pill-input*/
    .filter-pill-search .search-pill-input {
        border: none;
        outline: none;
        background: transparent;
        font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight: 800;
        font-size: 17px;
        line-height: 1;
        letter-spacing: 0;
        color: var(--txp-blue) !important;
        flex: 1 1 auto;
        min-width: 0; /* let it shrink in the pill */
    }

        /* Force text color when the browser autofills */
        .filter-pill-search .search-pill-input:-webkit-autofill,
        .filter-pill-search .search-pill-input:-webkit-autofill:hover,
        .filter-pill-search .search-pill-input:-webkit-autofill:focus,
        .filter-pill-search .search-pill-input:-webkit-autofill:active {
            -webkit-text-fill-color: var(--txp-blue) !important;
            caret-color: var(--txp-blue);
            transition: background-color 999999s ease-in-out 0s; /* prevents yellow autofill bg flash */
        }

        /* Placeholder mimics gray label */
        .filter-pill-search .search-pill-input::placeholder {
            color: #7B7B7B;
            font-weight: 700;
        }

/* Search icon button */
/*.filter-icon-btn*/
.filter-icon-btn {
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/*    .filter-icon-btn .fa*/
    .filter-icon-btn .fa {
        font-size: 16px;
        color: var(--txp-red); /* same red as caret */
        padding-top: 10px;
    }

/* Generic inline icon span (if used elsewhere) */
.filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    font-size: 16px;
    color: var(--txp-red);
}

/* Stack pills full width on small screens */
@media (max-width: 575.98px) {
    .filter-pill {
        width: 100%;
    }
}

/* ================== CHIPS ================== */

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 2px solid var(--txp-yellow);
    box-sizing: border-box;
    max-width: 100%;
    flex: 0 0 auto; /* size by content */
}

/* ================== TOP FILTERS BAR LAYOUT ================== */

/* Light blue full-bleed bar */
.full-bleed.top-filters-bar {
    position: relative;
    background: #E5F3FF !important;
}

/* Kill extra vertical padding inside this bar only */
.top-filters-bar > .content-container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Main flex row: chips left, pills right */
.top-filters-inner {
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* single row on desktop */
}

/* Make the bar flex but keep it respecting the content-container */
.full-bleed.top-filters-bar .top-filters-inner {
    display: flex;
    align-items: center;
    padding: 12px 0 10px; /* same vertical rhythm as apparel */
    gap: 16px;
}

/* Push the pills (your filter dropdown) to the right inside the container */
.full-bleed.top-filters-bar .top-filters-pills {
    margin-left: auto; /* this is the magic */
}

/* Left side: chips */
.top-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 0 1 auto;
}

/* Right side: pills (items-per-page + search) */
.top-filters-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    flex: 0 1 auto;
}

/* Stack vertically on tablet/mobile */
@media (max-width: 768px) {
    .top-filters-inner {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .top-filters-pills {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }
}

/* Match the horizontal padding of the product grid (pl-5 pr-5) */
.full-bleed.top-filters-bar > .content-container {
    padding-left: 3rem; /* same as .pl-5 */
    padding-right: 3rem; /* same as .pr-5 */
}

/* ================== ITEMS PER PAGE DROPDOWN ================== */

/* Compact select pill to match search pill height */
.top-filters-bar .select-wrap {
    position: relative;
    width: auto;
    padding: 4px 10px !important;
    height: 42px; /* match .filter-pill */
    min-height: 0 !important;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid var(--txp-yellow);
    border-radius: 5px;
    background: #fff;
}

    /* Label inside select pill */
    .top-filters-bar .select-wrap label {
        font-size: 14px;
        line-height: 1;
        margin-right: 4px;
        font-family: "Raleway", system-ui, sans-serif;
        font-weight: 700;
        color: #7B7B7B;
        white-space: nowrap;
    }

/* Actual <select> element */
.top-filters-bar .select-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0;
    font-family: "Raleway", system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    color: var(--txp-blue);
    width: 100%;
    flex: 1 1 auto;
    cursor: pointer;
    padding: 0 24px 0 0; /* space for caret */
}

/* Red caret for the select */
.top-filters-bar .select-wrap::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid var(--txp-red);
    pointer-events: none;
}

/* Optional: browser dropdown item padding (ignored where unsupported) */
.sort-by-select .select-control option {
    padding: 4px 10px;
    line-height: 1.4;
}

/* ================== LEGACY APPAREL RESULTS (UNCHANGED) ================== */

.categories-section .main-category-title {
    color: #5c5c5c;
    font-family: Raleway, sans-serif;
    padding-bottom: 28px;
    padding-left: 20px;
    padding-top: 10px;
    text-align: left;
    font-size: 24px;
}

.categories-section form input[type=text] {
    width: 79%;
}

.categories-section form input[type=submit] {
    background: #7a7a7a;
    color: white;
    padding: 1px 10px;
}

    .categories-section form input[type=submit]:hover {
        background: #707070;
    }

.categories-section form input[type=radio] {
    display: none;
}

.apparel-results .title {
    font-size: 42px;
    color: #5c5c5c;
    font-weight: 400;
    font-family: Raleway, sans-serif;
    padding-top: 10px;
    padding-bottom: 10px;
}

.apparel-results .sub-title {
    color: #999;
    min-height: 25px;
    text-transform: capitalize;
}

.apparel-results .apparel-item {
    background: white;
    border-color: #ddd;
    border-radius: 3px;
    cursor: pointer;
    margin: 5px;
    width: 192px;
    min-width: 192px;
    max-width: 192px;
    box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.3);
}

    .apparel-results .apparel-item:hover {
        border: 1px solid #eee;
        border-top: 1px solid #bbb;
        box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.8)
    }

    .apparel-results .apparel-item .image-container {
        padding: 5px;
        max-height: 250px;
        min-height: 250px;
        height: 250px;
    }

        .apparel-results .apparel-item .image-container img {
            max-height: 100%;
            margin: 0 auto;
            display: block;
        }

    .apparel-results .apparel-item .flex-column {
        height: 100%;
    }

    .apparel-results .apparel-item .title {
        line-height: 20px;
        border-top: 1px solid #ddd;
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-size: 14px;
        padding: 5px;
        color: #333;
    }

    .apparel-results .apparel-item .description {
        font-size: 12px;
        background: #f6f6f6;
        border-top: 1px solid #eee;
        padding: 5px 8px;
    }

        .apparel-results .apparel-item .description .price span {
            font-size: 14px;
            color: green;
            font-weight: bold;
            line-height: 20px;
        }

@media screen and (max-width: 576px) {
    .categories-section {
        width: 80%;
        margin-top: 5px;
        margin-right: auto;
        margin-left: auto;
    }

        .categories-section .main-category-title {
            padding-bottom: 0;
        }

    .apparel-results .apparel-item {
        margin: 2px;
    }

    .categories-section .category-container .category {
        line-height: 35px;
    }

    .categories-section .category-container li .subcategory-item {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ================== CATEGORY SIDEBAR – NEW LOOK ================== */

/* Container: keep old background, add top border, and narrower max-width */
.categories-section .category-container {
    border-top: 1px solid #D0CFCF;
    margin-left: auto; /* push to the right side of the column */
    margin-right: 16px; /* no extra gap on the right */
}

/* Top-level category row (Sportswear, T-Shirts, etc.) */
.category {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    padding-right: 32px; /* space for arrow */
    border-bottom: 1px solid #D0CFCF;
    font-family: "Raleway", system-ui, sans-serif;
    font-weight: 800; /* ExtraBold-ish */
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--txp-dark-gray);
    cursor: pointer;
}

    /* hide the old FA icons */
    .category .fa-plus,
    .category .fa-chevron-down {
        display: none !important;
    }

/* Figma-style caret */
.categories-section .category {
    position: relative;
}

    .categories-section .category::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 16px;
        width: 17px;
        height: 11px;
        background-repeat: no-repeat;
        background-size: 17px 11px;
        background-image: url("data:image/svg+xml,%3Csvg width='17' height='11' viewBox='0 0 17 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.50003L8.5 9.50003L15.5 1.50003' stroke='%23DF271C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        transform: translateY(-50%) rotate(0deg);
        transition: transform 0.2s ease;
    }

    .categories-section .category:not(.collapsed)::after {
        transform: translateY(-50%) rotate(180deg);
    }

/* Remove default UL spacing inside groups */
.categories-section ul {
    list-style: none;
    margin: 4px 0 10px;
    padding: 0;
}

/* Subcategory links – default (red) */
.categories-section .subcategory-item {
    font-family: "Raleway", system-ui, sans-serif;
    font-weight: 600; /* SemiBold */
    letter-spacing: 0;
    color: var(--txp-red); /* red */
    text-decoration: none;
    flex: 1 1 auto;
    font-size: 15px;
    margin-right: 8px; /* small gap before pill */
}

    /* Selected subcategory text (active) -> dark gray */
    .categories-section .subcategory-item.active {
        color: var(--txp-dark-gray);
        cursor: default;
        text-decoration: none;
    }

/* Count pill – default (blue) */
.categories-section .apparelCountPill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    margin-left: auto; /* push to the right edge of the li */
    background: var(--txp-blue);
    color: #ffffff;
    font-family: "Raleway", system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    border-radius: 999px;
}

/* Active pill (paired with active link) -> dark gray */
.categories-section
.subcategory-item.active + .apparelCountPill {
    background: var(--txp-dark-gray);
}

/* Kill underline for all states */
.categories-section .subcategory-item,
.categories-section .subcategory-item:visited,
.categories-section .subcategory-item:hover {
    text-decoration: none;
}

/* On hover, make the whole row look "selected-gray" */
.categories-section li:hover .subcategory-item {
    color: var(--txp-dark-gray);
}
/* And darken the pill on hover too */
.categories-section li:hover .apparelCountPill {
    background: var(--txp-dark-gray);
}

/* ===== APPAREL CATEGORY SIDEBAR – TWEAKS ===== */

/* 1) No top separator on the whole block */
.categories-section .category-container {
    border-top: 0; /* kill old top border */
}

/* 1 + 2) Category rows: taller, aligned, custom inset separator */
.categories-section .category {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px; /* controls row height & left/right padding */
    border-bottom: 0; /* remove full-width border from earlier rule */
}

    /* Inset bottom line for each category row (except we’ll skip the very top line) */
    .categories-section .category::before {
        content: "";
        position: absolute;
        left: 16px; /* same as text padding-left */
        right: 16px; /* same inset on the right */
        bottom: 0;
        border-bottom: 1px solid #D0CFCF;
    }

/* 2 + 4) Subcategory block: align text with category text, inset bottom line */
.categories-section ul {
    list-style: none;
    margin: 4px 0 10px;
    padding: 0 16px 10px; /* left = 16px so red text lines up with category */
    border-bottom: 0; /* we’ll draw our own inset line */
    position: relative;
}

    /* 2) Each subcategory row – no extra indent */
    .categories-section ul li {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* link on left, pill on right */
        padding: 3px 0;
    }

/* 4) Count pill: keep a right cushion from the edge */
.categories-section .apparelCountPill {
    margin-left: auto; /* overrides the old fixed 8px */
    margin-right: 0;
}

/* Move apparel sidebar closer to the products grid */
.categories-section {
    padding-left: 0; /* remove default Bootstrap left gutter */
    padding-right: 0; /* optional – keeps things tight */
}

/* ================== BRANDS FILTER PANEL ================== */

.brand-filter-panel {
    max-width: 280px;              /* same as category-container */
    margin: 8px 8px 12px;          /* L/R = 8px to match categories */
    padding: 10px 18px 12px 18px;  /* even inner padding */
    background: #fff;
    border: 1px solid #DFDFDF;
    box-sizing: border-box;
    font-family: "Raleway", system-ui, sans-serif;
}

/* Title "Brands" */
.brand-filter-title {
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    color: var(--txp-dark-gray);
}

/* Divider under the title */
.brand-filter-divider {
    margin: 4px 0 8px;
    border: 0;
    border-top: 1px solid #D0CFCF;
}

/* List container */
.brand-filter-list {
    font-size: 14px;
}

/* One row per brand */
.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0;
}

/* Left side: checkbox + label */
.brand-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
}

/* Checkbox tweaks */
.brand-checkbox {
    cursor: pointer;
    margin-left: 2px; /* <-- small indent */
}

/* Brand text */
.brand-label {
    cursor: pointer;
    color: #0657A8;
    font-weight: 600;
}

/* Reuse pill style, just tiny spacing adjustment */
.brand-row .apparelCountPill {
    margin-left: 12px;
}

/* Hover state – subtle, optional */
.brand-row:hover .brand-label {
    color: var(--txp-dark-gray);
}

/* Checkbox spacing inside Brands panel */
.brand-filter-panel .form-check-input {
    position: static; /* make sure it’s not weirdly positioned */
    margin: 0 6px 0 2px; /* small left indent, 6px gap before text */
    vertical-align: middle;
}

/* Brand label text */
.brand-filter-panel .form-check-label {
    vertical-align: middle;
}

/* Let both the category container and brands box span the full sidebar width */
.categories-section .brand-filter-panel {
    max-width: none; /* remove the 280px cap */
    margin-left: 16px;
    margin-right: 31px;
}

/* Inner padding so content still looks nice */
.categories-section .brand-filter-panel {
    padding: 10px 16px 12px 16px; /* left/right same as category rows */
}

    .apparel-product-card img {
        border-radius: 5px 5px 0 0;
    }

    .apparel-product-card .list-group-item,
    .apparel-product-card .card-body {
        font: inherit;
        color: inherit;
    }

.apparel-product-card .card-body {
    margin-top: auto; /* pushes it to the bottom of the card */
}

.shop-now-link {
    font-weight: 700; /* bold */
    font-size: 16px; /* optional: bump size */
    color: var(--txp-blue); /* optional: make it match your blue */
    text-decoration: none;
}

    .shop-now-link:hover {
        text-decoration: none;
    }

/* Even 24px gaps between apparel cards (Bootstrap 4) */
.apparel-card-row {
    margin-left: -12px; /* custom gutter: 12px each side */
    margin-right: -12px;
}

    .apparel-card-row > .apparel-card-col {
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 24px; /* vertical spacing between rows */
        display: flex;
        display: flex; /* column is a flex container */
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 24px; /* vertical gap between rows */
    }

        /* Optional: equal-height cards */
        .apparel-card-row > .apparel-card-col .apparel-product-card {
            height: 100%;
            color: var(--txp-dark-gray);
            border-radius: 5px;
            font-family: inherit;
            font-weight: 400;
            font-size: 13px;
            line-height: 20px;
            letter-spacing: 0;
            display: flex;
            flex-direction: column;
            width: 100%;
        }

/* normalize middle content height so "Starting at / Shop Now" lines up */
.apparel-product-card .list-group {
    margin-bottom: 0; /* no extra gap under list */
    min-height: 190px; /* tweak this number until all bottoms align */
}

@media (min-width: 768px) {
    .apparel-product-card .list-group {
        min-height: 190px;
    }
}

/* ================================
   Remove thin border on content container
   ================================ */
body.call-us-layout .content-container {
    border-top: none !important;
    box-shadow: none !important; /* also removes faint shadow line */
}

/* ===========================================================
   CONTACT US — FINAL FIX: Sidebar spans full column, aligned top & bottom
   =========================================================== */

/* --- Heading --- */
body.contact-us-page h1 {
    width: 100%;
    text-align: left;
    margin-bottom: 1.5rem;
    padding-left: 0.25rem;
}

/* ===========================================================
   MAIN LAYOUT — Two-column grid
   =========================================================== */
body.contact-us-page .content-container.content-page-2025 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 400px; /* wider sidebar */
    grid-template-areas:
        "title sidebar"
        "intro sidebar"
        "cards sidebar";
    column-gap: 40px;
    align-items: start;
    width: 100%;
    margin-top: 0 !important; /* remove .mt-5 offset */
    padding-top: 0; /* align flush under yellow nav */
    position: relative;
}

    /* --- Title --- */
    body.contact-us-page .content-container.content-page-2025 > h1 {
        grid-area: title;
        margin-bottom: 1.5rem;
    }

    /* --- Intro paragraph --- */
    body.contact-us-page .content-container.content-page-2025 > p:first-of-type {
        grid-area: intro;
        max-width: 68%;
        margin: 0 0 1.5rem 0;
    }

    /* --- Card grid --- */
    body.contact-us-page .content-container.content-page-2025 > .mt-5.row.justify-content-left {
        grid-area: cards;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-top: 0 !important;
        padding-bottom: 2rem;
    }

        body.contact-us-page
        .content-container.content-page-2025 > .mt-5.row.justify-content-left > div[class*="col-"] {
            flex: 0 0 calc(33.333% - 1.5rem);
            max-width: calc(33.333% - 1.5rem);
        }

    /* ===========================================================
   SIDEBAR — Full column height, aligned under menu
   =========================================================== */
    body.contact-us-page .content-container.content-page-2025 > .sidebarsection {
        grid-area: sidebar;
        align-self: stretch !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
        background-color: var(--txp-sky);
        padding: 1.75rem 1.75rem 2rem;
        box-sizing: border-box;
        margin-top: 0 !important;
        position: relative;
    }

/* make sidebar reach the full height of its container */
body.contact-us-page .content-container.content-page-2025 {
    min-height: 100%;
}

    body.contact-us-page
    .content-container.content-page-2025 > .sidebarsection::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /*border-radius: 8px;*/
        background: var(--txp-sky);
        z-index: -1;
    }

    /* Neutralize nested bootstrap column */
    body.contact-us-page
    .content-container.content-page-2025 > .sidebarsection > [class*="col-"] {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove extra inner .p-4 background */
    body.contact-us-page
    .content-container.content-page-2025 > .sidebarsection .p-4 {
        background: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 991.98px) {
    body.contact-us-page .content-container.content-page-2025 {
        display: block !important;
    }

        body.contact-us-page
        .content-container.content-page-2025 > .mt-5.row.justify-content-left > div[class*="col-"] {
            flex: 0 0 48%;
            max-width: 48%;
        }

        body.contact-us-page .content-container.content-page-2025 > .sidebarsection {
            width: 100% !important;
            margin-top: 2rem !important;
            border-radius: 8px;
        }

        body.contact-us-page .content-container.content-page-2025 > p:first-of-type {
            max-width: 100%;
        }
}

@media (max-width: 575.98px) {
    body.contact-us-page
    .content-container.content-page-2025 > .mt-5.row.justify-content-left > div[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===========================================================
   SIDEBAR WIDTH OVERRIDE — force 400px and align top edge
   =========================================================== */

/* 1️⃣ Force the grid column width */
body.contact-us-page .content-container.content-page-2025 {
    grid-template-columns: minmax(0, 1fr) 400px !important; /* try 420px or 440px if needed */
}

    /* 2️⃣ Sidebar section uses full grid width, ignoring Bootstrap col */
    body.contact-us-page .content-container.content-page-2025 > .sidebarsection {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        align-self: stretch !important;
        background-color: var(--txp-sky);
        padding: 1.75rem 1.75rem 2rem;
        box-sizing: border-box;
        margin-top: 0 !important;
    }

        /* 3️⃣ Neutralize nested .col-* in sidebar partial */
        body.contact-us-page .content-container.content-page-2025 > .sidebarsection > [class*="col-"] {
            flex: none !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

    /* 4️⃣ Align top exactly under menu bar */
    body.contact-us-page .content-container.content-page-2025.mt-5 {
        margin-top: 0 !important;
        /*padding-top: 1.25rem;*/ /* small breathing room under nav */
    }

body.contact-us-page header .nav-back {
    margin-bottom: 0 !important; /* removes the 10px bottom gap */
}

/* ===========================================================
   CONTACT US — bottom alignment for sidebar
   =========================================================== */
body.contact-us-page .content-container.content-page-2025 {
    align-items: stretch; /* ensure grid rows match heights */
}

    body.contact-us-page .content-container.content-page-2025 > .sidebarsection {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        min-height: 100%;
        /* match bottom of last card exactly */
        padding-bottom: 0 !important;
    }

    body.contact-us-page .content-container.content-page-2025 > .mt-5.row.justify-content-left {
        margin-bottom: 0 !important; /* keep card grid tight */
        padding-bottom: 0 !important;
    }

    /* CONTACT US — Visually extend the blue sidebar below the cards */
    body.contact-us-page .content-container.content-page-2025 > .sidebarsection {
        position: relative; /* anchor for the pseudo element */
        background: transparent; /* we'll paint the blue on ::after */
        z-index: 0;
    }

        /* This draws the light-blue panel and pushes it past the bottom */
        body.contact-us-page .content-container.content-page-2025 > .sidebarsection::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: -60px; /* <-- how far to extend below the cards (tweak) */
            background: var(--txp-sky); /* light blue */
            z-index: -1;
        }

/* ===========================================================
   CONTACT US — Align "Contact Us" and "Send a Message" headings
   =========================================================== */

/* Lower the left column (main content) slightly so both headings line up */
body.contact-us-page .content-container.content-page-2025 {
    align-items: flex-start;
    margin-top: 0 !important;
}

    /* Move the sidebar content upward a little to align its heading visually */
    body.contact-us-page .content-container.content-page-2025 > .sidebarsection {
        padding-top: 5rem; /* adjust between 2rem–3rem until the headings match */
    }

    /* ===========================================================
   CONTACT US — Align "Contact Us" heading with "Send a Message"
   =========================================================== */

    /* Move Contact Us heading and intro paragraph down to align with sidebar */
    body.contact-us-page .content-container.content-page-2025 > h1 {
        margin-top: 4.75rem; /* tweak between 4.5–5rem to match perfectly */
    }

    body.contact-us-page .content-container.content-page-2025 > p:first-of-type {
        margin-top: 1rem; /* keeps spacing under heading consistent */
    }

/* ===========================================================
   CONTACT US — Sidebar form field styling
   =========================================================== */
body.contact-us-page .sidebarsection input[type="text"],
body.contact-us-page .sidebarsection input[type="email"],
body.contact-us-page .sidebarsection textarea {
    border: 2px solid var(--txp-yellow) !important; /* yellow border */
    border-radius: 5px !important;
    box-shadow: none !important;
    font-family: 'Raleway', sans-serif !important; /* clean bold font */
    font-weight: 800 !important;
    color: var(--txp-blue) !important; /* deep blue text */
    font-size: 17px !important;
}

    /* Keep same look on focus */
    body.contact-us-page .sidebarsection input[type="text"]:focus,
    body.contact-us-page .sidebarsection input[type="email"]:focus,
    body.contact-us-page .sidebarsection textarea:focus {
        border-color: var(--txp-yellow) !important;
        outline: none !important;
        color: var(--txp-blue) !important;
    }


/* Sidebar form: force font + color for value text */
body.contact-us-page .sidebarsection .form-control {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 800 !important;
    color: var(--txp-blue) !important; /* typed text color */
    caret-color: var(--txp-blue); /* cursor color */
}

    /* Sidebar form: placeholders (all browsers) */
    body.contact-us-page .sidebarsection .form-control::placeholder {
        color: var(--txp-blue) !important;
        opacity: 1 !important; /* Bootstrap lowers opacity; restore it */
        font-family: 'Raleway', sans-serif !important;
        font-weight: 800 !important;
    }

    /* Older Edge/IE placeholder fallbacks (safe to include) */
    body.contact-us-page .sidebarsection .form-control:-ms-input-placeholder {
        color: var(--txp-blue) !important;
        font-weight: 800 !important;
    }

    body.contact-us-page .sidebarsection .form-control:-ms-input-placeholder {
        color: var(--txp-blue) !important;
        font-weight: 800 !important;
    }

/* CONTACT US — Inline labels inside the three fields (stable) */
body.contact-us-page .sidebar-form .mb-3 {
    position: relative;
    margin-bottom: 1.1rem;
}

/* Put label inside the control and remove it from normal flow */
body.contact-us-page .sidebar-form .form-label {
    position: absolute !important; /* force absolute so it can't fall back */
    display: inline-block !important; /* avoid block reflow space */
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    margin: 0 !important;
    pointer-events: none;
    z-index: 2;
    color: #7B7B7B;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}

/* Inputs/textarea visuals */
body.contact-us-page .sidebar-form .form-control {
    border: 2px solid var(--txp-yellow) !important;
    box-shadow: none !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 800 !important;
    color: var(--txp-blue) !important;
    font-size: 14px;
    padding-left: 90px; /* room for the label */
}

    /* Placeholder (hint) */
    body.contact-us-page .sidebar-form .form-control::placeholder {
        color: var(--txp-blue);
        opacity: 0.7;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
    }

    /* Focus state */
    body.contact-us-page .sidebar-form .form-control:focus {
        border-color: var(--txp-yellow) !important;
        outline: none;
        box-shadow: none;
    }

/* Textarea-specific tweaks: keep the label on the first line and avoid overlap */
body.contact-us-page .sidebar-form #message.form-control {
    padding-top: 12px; /* a little breathing room for first line */
    padding-left: 90px;
}

/* CONTACT US — Align "Message:" and "Your message" perfectly */
body.contact-us-page .sidebar-form label[for="message"] {
    position: absolute !important;
    top: 50%; /* same vertical centering as others */
    left: 16px;
    transform: translateY(-50%);
    margin: 0;
    color: var(--txp-blue) !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    pointer-events: none;
    line-height: 1;
}

/* Remove extra top padding so text baseline aligns again */
body.contact-us-page .sidebar-form #message.form-control {
    padding-top: 0.75rem !important; /* match input vertical padding */
    padding-left: 90px;
}

/* ========= Sidebar inline labels: baseline alignment (tunable) ========= */
body.contact-us-page .sidebar-form {
    /* Tweak these two to align "Message:" with "Your message" */
    --label-left: 16px; /* left inset for labels */
    --label-pad-left: 96px; /* left padding so text clears label */
    --ta-pad-top: 0.72rem; /* first-line vertical offset inside textarea */
    --ta-label-offset: 0.06rem; /* tiny nudge so label and first line match */
}

    /* Field container */
    body.contact-us-page .sidebar-form .mb-3 {
        position: relative;
        margin-bottom: 1.1rem;
    }

    /* Labels inside controls */
    body.contact-us-page .sidebar-form .form-label {
        position: absolute !important;
        left: var(--label-left);
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
        pointer-events: none;
        z-index: 2;
        font-family: 'Raleway', sans-serif !important;
        font-weight: 800 !important;
        font-size: 14px !important;
        color: var(--txp-blue) !important;
        line-height: 1;
    }

    /* Textarea label: sit on the first text line, not vertically centered */
    body.contact-us-page .sidebar-form label[for="message"] {
        top: calc(var(--ta-pad-top) + var(--ta-label-offset));
        transform: none; /* no 50% centering for textarea */
    }

    /* Inputs/textarea: spacing for labels + visual style */
    body.contact-us-page .sidebar-form .form-control {
        border: 2px solid var(--txp-yellow) !important;
        box-shadow: none !important;
        padding-left: var(--label-pad-left) !important;
        font-family: 'Raleway', sans-serif !important;
        font-weight: 800 !important;
        color: var(--txp-blue) !important;
        font-size: 14px;
    }

    /* Textarea first line position */
    body.contact-us-page .sidebar-form #message.form-control {
        padding-top: var(--ta-pad-top) !important;
    }

    /* Placeholder style */
    body.contact-us-page .sidebar-form .form-control::placeholder {
        color: var(--txp-blue);
        opacity: 0.7;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
    }

/* ============================
   CONTACT US — Input styling
   ============================ */
body.contact-us-page .floating-label {
    position: relative;
}

    /* yellow border + text color */
    body.contact-us-page .floating-label .form-control {
        border: 2px solid var(--txp-yellow);
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
        color: var(--txp-blue);
        padding-left: 6rem; /* make space for the gray label */
        height: auto;
        min-height: 46px;
    }

    /* fixed gray label inside each box */
    body.contact-us-page .floating-label .fixed-label {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: #8c8c8c;
        font-family: 'Raleway', sans-serif;
        font-weight: 800;
        pointer-events: none; /* don’t block input */
    }

    /* fix alignment for textarea (top aligned label) */
    body.contact-us-page .floating-label textarea + .fixed-label {
        top: 1rem;
        transform: none;
    }



/* ============================
   CONNECT WITH TXP SECTION
   ============================ */

/* Full-bleed band that starts at the LEFT edge of the viewport */
.connect-with-txp-section {
    background: #ECECEC;
    /* extend both sides from the middle out to the viewport edges */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* no space above; sits right under the blue sidebar */
    padding-top: 4rem;
    padding-bottom: 3rem;
    /* avoid any accidental overlap/scrollbars */
    position: relative;
    overflow: hidden;
}

.connect-with-txp-container {
    max-width: 1600px; /* match bottom row */
    margin: 0 auto;
    text-align: center;
    padding: 0 16px;
}

    .connect-with-txp-container .section-title {
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 200 !important;
        font-size: 40px !important;
        text-align: center !important;
        color: var(--txp-dark-gray) !important;
        margin: 0 auto 2rem;
    }

    .connect-with-txp-container .summary-video {
        --cols: 5;
        display: grid;
        grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
        gap: 30px; /* your final spacing */
        justify-items: stretch;
        align-items: start;
    }

    .connect-with-txp-container .card.video-image-link {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        border: 0 !important;
    }

        .connect-with-txp-container .card.video-image-link img {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 16 / 9 !important;
            object-fit: cover !important;
            display: block !important;
        }

    .connect-with-txp-container .video-image-link .TXP-GRAY {
        margin-top: 6px !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        font-size: 14px !important;
    }


body.contact-us-page .content-container.content-page-2025 > .connect-with-txp-section {
    grid-column: 1 / -1 !important;
    margin-top: 5rem !important;
}

body.contact-us-page
.content-container.content-page-2025 > .mt-5.row.justify-content-left {
    margin-bottom: 0 !important;
}

/* responsive grid */
/* breakpoints */
@media (max-width: 1200px) {
    .connect-with-txp-section .connect-with-txp-container .summary-video {
        --cols: 4;
    }
}

@media (max-width: 992px) {
    .connect-with-txp-section .connect-with-txp-container .summary-video {
        --cols: 3;
    }
}

@media (max-width: 768px) {
    .connect-with-txp-section .connect-with-txp-container .summary-video {
        --cols: 2;
    }
}

@media (max-width: 480px) {
    .connect-with-txp-section .connect-with-txp-container .summary-video {
        --cols: 1;
    }
}

/* ===========================================================
   CONTACT US — Sidebar text paragraph (Figma spec)
   =========================================================== */
body.contact-us-page .sidebarsection .p-4 p {
    font-family: Verdana, sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    color: var(--txp-dark-gray) !important;
    margin-bottom: 1rem !important;
}

/*-------------------------- Apparel Details Page  ----------------------------------------*/

body.apparel-details .product-detail-container {
    padding: 20px 60px 40px;
}

@media (max-width: 991.98px) {
    body.apparel-details .product-detail-container {
        padding: 16px 12px 32px;
    }
}

/* MAIN TWO-COLUMN LAYOUT */

body.apparel-details .product-main-2025 {
    align-items: flex-start;
}

/* ===== LEFT: GALLERY ===== */

body.apparel-details .apparel-gallery-2025 {
    max-width: 420px;
}

    body.apparel-details .apparel-gallery-2025 #productslider {
        height: 100%;
    }

body.apparel-details .apparel-main-frame {
    border: 2px solid #E0E0E0;
    border-radius: 20px 0 20px 0;
    background: #F7F7F7;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* big image */
body.apparel-details .image-container .product-image {
    display: none;
    max-height: 705px;
    max-width: 82%;
    object-fit: contain;
}

    body.apparel-details .image-container .product-image.active {
        display: block;
    }

/* thumbnail strip */
body.apparel-details .apparel-thumb-strip {
    margin-top: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding-top: 8px;
    padding-bottom: 4px;
}

/* Thumbnail strip under main apparel image */
body.apparel-details .thumb-strip-wrapper {
    overflow: hidden; /* no horizontal scroll */
    margin-top: 16px; /* tweak 12–20px to taste */
}

body.apparel-details #carouselindicators li {
    flex: 1 1 0;
    max-width: none;
    margin: 0;
}

/* Make the indicator row a flex row and give it gaps */
body.apparel-details .thumb-strip-wrapper .carousel-indicators {
    display: flex !important;
    justify-content: flex-start;
    column-gap: 8px; /* <— space between thumbs */
    padding: 0;
}

    /* Each indicator should size to its content, not stretch */
    body.apparel-details .thumb-strip-wrapper .carousel-indicators .indicator {
        flex: 0 0 auto; /* no flex-grow */
        margin: 0; /* reset any Bootstrap margin */
    }

        /* Optional: give the inner box a fixed-ish width so all thumbs match */
        body.apparel-details .thumb-strip-wrapper .carousel-indicators .indicator .data-slide-image {
            width: 76px; /* or whatever size matches Figma */
        }

    body.apparel-details .thumb-strip-wrapper .carousel-indicators .indicator:last-child {
        margin-right: 0; /* no extra gap after last one */
    }

body.apparel-details #carouselindicators {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

    body.apparel-details #carouselindicators li.indicator {
        width: 72px;
        height: 99px;
        border: 2px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        margin: 0;
    }

        body.apparel-details #carouselindicators li.indicator.active,
        body.apparel-details #carouselindicators li.indicator:hover {
            border-color: var(--txp-blue);
        }

@media (max-width: 1000px) {
    body.apparel-details .image-container .product-image {
        max-height: 60vh;
    }
}

/* ===== RIGHT: CONTENT ===== */

/*body.apparel-details .product-container {
    padding: 20px 40px 20px 30px;
}*/

@media (max-width: 1000px) {
    body.apparel-details .product-container {
        padding: 16px 0 0;
    }
}

/* title */
body.apparel-details .product-container .product-title {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    color: var(--txp-blue);
    margin-bottom: 8px;
    font-size: 35px;
    line-height: 100%;
    letter-spacing: 0;
}

/* description */
body.apparel-details .product-container .product-description {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
    line-height: 22px;
    color: var(--txp-dark-gray);
    margin-bottom: 12px;
}

/* color swatches */
body.apparel-details .product-container .colors-container {
    margin: 15px 0 10px;
    font-size: 0;
    padding: 0;
    list-style: none;
}

    body.apparel-details .product-container .colors-container .color-selector {
        display: inline-block;
        margin-right: 6px;
        margin-bottom: 6px;
        width: 28px;
        height: 28px;
        vertical-align: top;
        position: relative;
    }

        body.apparel-details .product-container .colors-container .color-selector img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            cursor: pointer;
            border: 1px solid #DDD;
            box-sizing: border-box;
        }

            body.apparel-details .product-container .colors-container .color-selector img + i {
                display: inline-block;
                position: absolute;
                color: #fff;
                z-index: 2;
                width: 100%;
                line-height: 28px;
                font-size: 18px;
                text-align: center;
                top: 0;
                left: 0;
                opacity: 0;
                text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
                pointer-events: none;
            }

        body.apparel-details .product-container .colors-container .color-selector.active img {
            border-width: 2px;
            border-color: var(--txp-blue);
        }

            body.apparel-details .product-container .colors-container .color-selector.active img + i,
            body.apparel-details .product-container .colors-container .color-selector:hover img + i {
                opacity: 1;
                transition: opacity .25s ease-in;
            }

        body.apparel-details .product-container .colors-container .color-selector:hover img {
            opacity: .8;
            transition: opacity .25s ease-in;
        }

/* SPEC BUTTONS / ADD TO CART ROW */

body.apparel-details .apparel-addtocart {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 8px;
}

    body.apparel-details .apparel-addtocart .btn {
        border-radius: 4px;
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 600;
        font-size: 14px;
        padding: 9px 14px;
        white-space: nowrap;
    }

        body.apparel-details .apparel-addtocart .btn:hover {
            background-color: var(--txp-dark-gray);
            color: white;
        }

/* yellow spec buttons */
body.apparel-details .btn-spec-sheet {
    background: var(--txp-yellow);
    border: 1px solid #FFB700;
    color: var(--txp-blue);
}

/* green Add to Cart */
body.apparel-details .btn-add-to-cart {
    background: #2E9F42;
    border: 1px solid #208733;
    color: #FFFFFF !important;
}

/* flip card (legacy) */
body.apparel-details .flip-container {
    perspective: 1000px;
}

/* keep existing flip styles from old CSS if any */

/* error list */
body.apparel-details .apparel-error {
    display: none;
    margin: 6px 0 8px;
    padding: 8px 10px;
    border-radius: 4px;
    background: #FFE9EA;
    color: #B21C1C;
    font-size: 13px;
}

/* ===== PRICING TABLES ===== */

body.apparel-details .product-container .product-price-container {
    overflow-x: auto;
}

/* table wrapper */
body.apparel-details .product-container .price-table {
    display: none;
    width: 100%;
    margin: 10px 0 6px;
    border: 1px solid #CFCFCF;
    min-width: 360px;
    border-radius: 6px;
    border-collapse: collapse;
    background: #FFFFFF;
}

    body.apparel-details .product-container .price-table.active {
        display: table;
    }

    /* header row */
    body.apparel-details .product-container .price-table th {
        padding: 6px 4px;
        background-color: var(--txp-sky);
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 600;
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        color: var(--txp-blue);
        border: 1px solid #CFCFCF;
    }

    /* body cells */
    body.apparel-details .product-container .price-table td {
        min-width: 60px;
        padding: 4px 4px;
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.3;
        text-align: center;
        color: var(--txp-dark-gray);
        border: 1px solid #E0E0E0;
    }

    body.apparel-details .product-container .price-table .size-cell {
        font-weight: 700;
    }

    /* qty input cell */
    body.apparel-details .product-container .price-table .size-row td.qty {
        padding-left: 0;
        width: 12%;
    }

        body.apparel-details .product-container .price-table .size-row td.qty input {
            border: 1px solid #CFCFCF;
            border-radius: 2px;
            width: 100%;
            height: 30px;
            font-size: 15px;
            box-sizing: border-box;
        }

            body.apparel-details .product-container .price-table .size-row td.qty input::-webkit-inner-spin-button,
            body.apparel-details .product-container .price-table .size-row td.qty input::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

    /* active tier highlight */
    body.apparel-details .product-container .price-table .size-row .price-cell.active {
        background-color: rgba(201, 233, 214, 0.6);
    }

    /* stock / qty error */
    body.apparel-details .product-container .price-table .size-row .error,
    body.apparel-details .product-container .price-table .size-row .qty-error,
    body.apparel-details .product-container .price-table .size-row .stock.out-of-stock {
        background: #FFD4D4 !important;
    }

    /* aggregation row */
    body.apparel-details .product-container .price-table tr.aggregation-row {
        background-color: #F3F6FB;
    }

        body.apparel-details .product-container .price-table tr.aggregation-row td {
            font-weight: 700;
        }

    /* red discount chip inside each price cell */
    body.apparel-details .product-container .price-table .tier_price {
        display: block;
        margin-bottom: 2px;
    }

    body.apparel-details .product-container .price-table .apparel-discount {
        display: inline-block;
        padding: 1px 4px;
        border-radius: 2px;
        font-size: 10px;
        line-height: 1.3;
        background: var(--txp-red);
        color: #FFFFFF;
        border: 1px solid #BF1F16;
    }

    /* total price cell (last column) */
    body.apparel-details .product-container .price-table .total-price-cell {
        background-color: #EEEEEE;
    }

/* ===== TRUCK MESSAGE ===== */

body.apparel-details .ship-msg-bottom {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 4px;
    background: #E5F3FF;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--txp-blue);
}

    body.apparel-details .ship-msg-bottom .ship-msg-icon svg {
        display: block;
    }

    body.apparel-details .ship-msg-bottom .ship-msg-text strong {
        font-weight: 700;
    }

@media (max-width: 576.98px) {
    body.apparel-details .ship-msg-bottom {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* reset legacy layout on apparel details so Bootstrap grid can take over */
body.apparel-details .product-detail {
    display: block; /* ensure it's a normal block container */
    width: 100%;
}

    body.apparel-details .product-detail .image-container,
    body.apparel-details .product-detail .product-container {
        float: none !important; /* kill old float-based layout */
        width: auto !important;
    }

/* Apparel product detail – remove old gray box around carousel */
body.product-details .product-detail .image-container {
    border: none; /* override legacy 1px solid #ddd */
    background: #fff; /* keep white bg */
}

/* Figma-style shipping message under carousel (left side) */
.ship-msg-2025 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

    .ship-msg-2025 .ship-msg-icon {
        flex: 0 0 auto;
    }

    .ship-msg-2025 .ship-msg-text {
        font-family: "Raleway", "Cabin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 25px;
        color: var(--txp-dark-gray);
    }


.ship-sep {
    border-top: 1px solid #e6e6e6;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 48px;
    bottom: 20px;
}

/* red % OFF band row under each size */
body.apparel-details .product-container .price-table .apparel-discount-row td {
    background: var(--txp-red);
    color: #fff;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    border-top: none; /* fuse with numeric row above */
    padding: 2px 4px;
}

body.apparel-details .product-container .price-table .apparel-discount-cell {
    white-space: nowrap;
}

/* Remove border from qty input inside price table */
.price-table .qty-input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent; /* optional */
    padding: 6px 2px;
    font-size: 14px;
}

    /* Optional: make the number spinner arrows invisible (Chrome/Edge) */
    .price-table .qty-input::-webkit-outer-spin-button,
    .price-table .qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

body.apparel-details .btn-add-to-cart {
    background: var(--txp-blue) !important;
    border-color: var(--txp-blue) !important;
    color: #FFF !important;
    border-radius: 5px;
    min-width: 137px;
    height: 39px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.apparel-details .btn-add-to-cart {
    min-width: 137px;
    height: 39px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Flip back (Added! Go to checkout) – make it blue, not green */
body.apparel-details #flip-cart .back a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid var(--txp-blue);
    background: #ffffff;
    color: var(--txp-blue);
    font-family: Verdana, system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 39px;
    padding: 0 15px;
    min-height: 39px;
    text-decoration: none;
    white-space: nowrap;
}

    body.apparel-details #flip-cart .back a i {
        margin-right: 6px;
        color: #26A65B; /* keep the green check if you like */
    }

    body.apparel-details #flip-cart .back a:hover {
        background: var(--txp-blue);
        color: #ffffff;
    }

/* Base style just for these 3 apparel buttons */
.apparel-addtocart .page-button-yellow,
.apparel-addtocart .page-button-blue,
.apparel-addtocart #flip-cart .back a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px; /* Figma */
    padding: 0 24px; /* horizontal only */
    border-radius: 5px;
    font-family: Verdana, system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2; /* no tall line-height */
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap; /* keeps them from getting taller on tablet */
}

/* Force Add to Cart to use the same height as the yellow buttons */
.apparel-addtocart .btn-add-to-cart.page-button-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 5px;
    line-height: 1.2;
}

body.apparel-details .btn-add-to-cart.page-button-blue:hover,
body.apparel-details .btn-add-to-cart.page-button-blue:focus {
    background: var(--txp-dark-gray) !important;
    color: #fff !important;
    outline: 0 !important;
}

body.apparel-details .page-button-yellow:hover,
body.apparel-details .page-button-yellow:focus {
    background: var(--txp-dark-gray) !important;
    color: #fff !important;
    outline: 0 !important;
}

/* Yellow + blue color skins */
.apparel-addtocart .page-button-yellow {
    background-color: var(--txp-yellow);
    color: var(--txp-blue) !important;
    border: none;
}

.apparel-addtocart .page-button-blue,
.apparel-addtocart #flip-cart .back a {
    background-color: var(--txp-blue);
    color: #FFFFFF !important;
    border: none;
}

    /* Small spacing between icon and text */
    .apparel-addtocart .page-button-yellow i,
    .apparel-addtocart .page-button-blue i,
    .apparel-addtocart #flip-cart .back a i {
        margin-right: 8px;
    }

/* Lay out the 3 buttons on one flex row, vertically centered */
.apparel-addtocart {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* vertical alignment */
    gap: 16px; /* space between buttons */
}

    /* Kill any stray margins that tilt things */
    .apparel-addtocart > a,
    .apparel-addtocart > #flip-cart {
        margin: 0;
    }

    /* Back face: make it match the front blue button */
    .apparel-addtocart #flip-cart .back a {
        background: var(--txp-blue);
        color: #fff;
        text-transform: uppercase;
        font-family: Verdana, system-ui, sans-serif;
        font-weight: 700;
        font-size: 14px;
        border-radius: 5px;
    }

    /* “Disabled” state: keep flip working, just block clicks + fade */
    .apparel-addtocart .btn-add-to-cart.not-allow-click {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none; /* don’t click when disabled */
    }

/* Mobile: stack buttons and make them full width */
@media (max-width: 575.98px) {
    .apparel-addtocart {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* children stretch to full width */
        gap: 12px;
    }

        .apparel-addtocart > a,
        .apparel-addtocart > #flip-cart {
            width: 100%;
        }

        /* Ensure both faces of the flip button span full width */
        .apparel-addtocart #flip-cart .front a,
        .apparel-addtocart #flip-cart .back a {
            width: 100%;
            justify-content: center;
        }
}

/* MOBILE: make the 3 apparel buttons full-width and same height/padding */
@media (max-width: 767.98px) {
    .apparel-addtocart {
        display: flex;
        flex-direction: column;
        gap: 12px; /* space between buttons */
    }

        .apparel-addtocart .page-button-yellow,
        .apparel-addtocart .page-button-blue,
        .apparel-addtocart #flip-cart .front a,
        .apparel-addtocart #flip-cart .back a {
            width: 100%;
            box-sizing: border-box;
            height: 45px; /* same as desktop Figma height, adjust if you want taller */
            padding: 0 24px; /* same horizontal padding for all */
            border-radius: 5px; /* keep corners consistent */
        }
}

/* Disable Add to Cart without killing animations */
#add-to-cart-apparel.not-allow-click {
    pointer-events: none; /* no clicks */
    cursor: default;
    opacity: 0.6; /* optional, just to look disabled */
}
    /* Keep FA spinner spinning even when disabled */
    #add-to-cart-apparel .fa-spinner,
    #add-to-cart-apparel.not-allow-click .fa-spinner {
        animation: fa-spin 1s linear infinite !important;
    }

/* Reset any Bootstrap default arrow */
body.apparel-details .carousel-control-prev-icon,
body.apparel-details .carousel-control-next-icon {
    width: 48px;
    height: 48px;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 24px !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* LEFT (prev) – red chevron */
body.apparel-details .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='24' viewBox='0 0 15 24' fill='none'%3E%3Cpath d='M13 22L2 12L13 2' stroke='%23DF271C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* RIGHT (next) – red chevron */
body.apparel-details .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='24' viewBox='0 0 15 24' fill='none'%3E%3Cpath d='M2 22L13 12L2 2' stroke='%23DF271C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

    /* Make sure no pseudo-content is used instead */
    body.apparel-details .carousel-control-prev-icon::before,
    body.apparel-details .carousel-control-next-icon::before {
        content: none !important;
    }
/*-------------------------- End Apparel Details Page  ----------------------------------------*/

/* NAMES */

.names-title {
    border-top: 2px solid #D0CFCF;
    color: var(--txp-dark-gray) !important;
    padding-top: 8px; /* adjust this value to taste */
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 0 8px; /* a bit of gap before the cards */
}

/*--------------------------Stock Product Forms   ----------------------------------------*/
.product-form-container .product-form-options {
    background: transparent;
}

@media (max-width: 400px) {
    .product-form-container .product-form-options {
        padding: 20px 10px;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .product-form-container .product-form-options {
        border-right: solid 1px #ddd
    }
}

.product-form-container .product-form-options .product-option {
    margin-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
}

    .product-form-container .product-form-options .product-option .title {
        color: #333333;
        font-weight: bold;
        padding-bottom: 14px;
        font-size: 20px;
        text-align: left;
        margin: 0;
    }

    .product-form-container .product-form-options .product-option input[type="radio"] {
        width: 0;
        opacity: 0;
        height: 0;
    }

    .product-form-container .product-form-options .product-option input[type="number"] {
        margin-right: 10px;
        margin-left: 5px;
        border-radius: 3px;
        border: 1px solid #ccc;
        height: 35px;
        background: #fff;
        font-size: 24px;
        text-align: center;
        width: 60px;
        padding-left: 5px !important;
    }

    .product-form-container .product-form-options .product-option .option {
        float: left;
    }

        .product-form-container .product-form-options .product-option .option label {
            width: 100%;
            height: 100%;
            padding: 4px;
        }

    .product-form-container .product-form-options .product-option .block-select {
        min-height: 35px;
        margin-bottom: 10px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        border: 2px solid #D0CFCF
    }

        .product-form-container .product-form-options .product-option .block-select:hover {
            border: 2px solid #c4d1e1;
        }

        .product-form-container .product-form-options .product-option .block-select.active {
            border: 2px solid #0071e3;
        }

        .product-form-container .product-form-options .product-option .option-style span {
            display: block;
        }

    .product-form-container .product-form-options .product-option .option-color {
        color: white;
        height: 74px;
        width: 74px;
        border-radius: 3px;
        margin: 0px 4px 4px 0px;
        cursor: pointer;
        position: relative;
        font-size: 11px;
        border: 2px solid #e2ebf6;
    }

        .product-form-container .product-form-options .product-option .option-color:hover {
            border: 2px solid #c4d1e1;
        }

        .product-form-container .product-form-options .product-option .option-color.active {
            border: 2px solid #0071e3;
        }


    .product-form-container .product-form-options .product-option .check-select.active label:after {
        content: "\f00c";
        font-family: FontAwesome;
        position: absolute;
        right: 0;
        top: 0px;
        text-align: center;
        left: 0;
        line-height: 58px;
        color: #fff;
        font-size: 26px;
        text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
    }

    .product-form-container .product-form-options .product-option .option-color span {
        display: inline-block;
        position: absolute;
        background: rgba(255,255,255,0.9);
        color: #333;
        text-align: center;
        padding: 1px 0 1px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        border-radius: 2px;
    }

    .product-form-container .product-form-options .product-option .option-quantity {
        float: none;
        display: inline-block;
    }

        .product-form-container .product-form-options .product-option .option-quantity label {
            width: auto;
            display: inline-block;
            font-size: 13pt;
            margin-bottom: 10px;
        }

@media(max-width: 360px ) {
    .product-form-container .product-form-options .product-option .option-quantity label {
        width: 60px;
        text-align: right;
    }
}

.product-form-container .product-form-options .product-option .form-calculate.disabled {
    cursor: not-allowed;
    pointer-events: none !important;
    background: #ccc !important;
    color: white;
    border: none;
}

.product-option .form-requirements {
    border: 1px solid #ddd;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding: 12px 12px 12px 15px;
    border-left: 3px solid #f6db6f;
}

    .product-option .form-requirements li .field-validation-error {
        background: inherit;
        color: inherit;
    }



.terms-use {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 10px;
    padding: 0px 15px 10px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .terms-use {
        border-left: solid 1px #ddd
    }
}

@media (max-width: 1170px) {
    .terms-use {
        width: 100%
    }
}

.terms-use hr {
    margin: 10px 0
}

.terms-use h2 {
    font-size: 26px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px
}

.terms-use.single {
    padding: 12px 12px 12px 15px;
    border-left: 3px solid #f6db6f
}

    .terms-use.single.calculator-numbers-button-background {
        border-left: 0;
        border-top: 0;
        margin-top: -12px;
        padding: 0px 12px 12px 15px;
        clear: both
    }

@media (max-width: 768px) {
    .terms-use.single:last-child {
        margin-bottom: 20px
    }
}

.terms-use.single p {
    margin: 0
}

.terms-use.single ul {
    list-style-type: disc;
    padding-left: 20px;
    padding-right: 0
}

.terms-use.single h5 {
    font-size: 16px;
    text-align: left;
    font-weight: bold;
    margin: 0 0 10px
}

.terms-use.upload-instruction-single {
    padding: 20px 35px 20px 20px;
    position: relative;
    margin-bottom: 10px;
    float: right;
    width: 27%;
    margin-left: 1%
}

@media (max-width: 900px) {
    .terms-use.upload-instruction-single {
        margin-bottom: 20px;
        width: 48%;
        margin-right: 1%;
        margin-left: 1%;
        min-height: 130px
    }
}

@media (max-width: 600px) {
    .terms-use.upload-instruction-single {
        margin-bottom: 20px;
        width: 98%;
        margin-right: 1%;
        margin-left: 1%;
        min-height: initial
    }
}

.terms-use.upload-instruction-single p {
    margin: 0
}

.terms-use.upload-instruction-single strong {
    font-size: 16px;
    display: block;
    padding-bottom: 5px
}

.terms-use.upload-instruction-single.phone {
    padding: 12px 35px 12px 60px;
    margin-left: 0%;
    float: left
}

    .terms-use.upload-instruction-single.phone .fa {
        position: absolute;
        left: 0;
        top: 20px;
        text-align: center;
        width: 60px;
        font-size: 34px;
        color: rgba(0,0,0,0.5)
    }

.terms-use.terms-videos, .terms-use.terms-blogs {
    width: 23.5%;
    float: right;
    min-height: 613.4px
}

@media (max-width: 900px) {
    .terms-use.terms-videos, .terms-use.terms-blogs {
        width: 100%;
        margin-bottom: 20px;
        min-height: initial
    }
}

.terms-use.terms-videos .summary-video-load, .terms-use.terms-blogs .summary-video-load {
    border-top: 1px solid #ddd;
    text-align: center;
    padding-top: 8px;
    font-size: 12px;
    text-transform: uppercase
}

.terms-use.terms-videos .summary-video, .terms-use.terms-videos .summary-blog, .terms-use.terms-blogs .summary-video, .terms-use.terms-blogs .summary-blog {
    font-size: 12px;
    margin-top: 6px;
    cursor: pointer
}

@media (max-width: 900px) {
    .terms-use.terms-videos .summary-video, .terms-use.terms-videos .summary-blog, .terms-use.terms-blogs .summary-video, .terms-use.terms-blogs .summary-blog {
        width: 30%;
        display: inline-block;
        margin: 0 1%
    }
}

@media (max-width: 768px) {
    .terms-use.terms-videos .summary-video, .terms-use.terms-videos .summary-blog, .terms-use.terms-blogs .summary-video, .terms-use.terms-blogs .summary-blog {
        width: 47%
    }
}

@media (max-width: 450px) {
    .terms-use.terms-videos .summary-video, .terms-use.terms-videos .summary-blog, .terms-use.terms-blogs .summary-video, .terms-use.terms-blogs .summary-blog {
        width: 98%
    }
}

.terms-use.terms-videos .summary-video:after, .terms-use.terms-videos .summary-blog:after, .terms-use.terms-blogs .summary-video:after, .terms-use.terms-blogs .summary-blog:after {
    content: "";
    display: table;
    clear: both
}

.terms-use.terms-videos .summary-video .thumb-wrap, .terms-use.terms-videos .summary-blog .thumb-wrap, .terms-use.terms-blogs .summary-video .thumb-wrap, .terms-use.terms-blogs .summary-blog .thumb-wrap {
    border: solid 1px #eee;
    float: left;
    width: 120px;
    height: 68px;
    overflow: hidden;
    position: relative
}

    .terms-use.terms-videos .summary-video .thumb-wrap div, .terms-use.terms-videos .summary-blog .thumb-wrap div, .terms-use.terms-blogs .summary-video .thumb-wrap div, .terms-use.terms-blogs .summary-blog .thumb-wrap div {
        position: relative;
        top: 0;
        height: 70px
    }

.terms-use.terms-videos .summary-video .video-title, .terms-use.terms-videos .summary-video .video-date, .terms-use.terms-videos .summary-video .video-views, .terms-use.terms-videos .summary-video .article-title, .terms-use.terms-videos .summary-video .article-date, .terms-use.terms-videos .summary-video .article-blog-title, .terms-use.terms-videos .summary-blog .video-title, .terms-use.terms-videos .summary-blog .video-date, .terms-use.terms-videos .summary-blog .video-views, .terms-use.terms-videos .summary-blog .article-title, .terms-use.terms-videos .summary-blog .article-date, .terms-use.terms-videos .summary-blog .article-blog-title, .terms-use.terms-blogs .summary-video .video-title, .terms-use.terms-blogs .summary-video .video-date, .terms-use.terms-blogs .summary-video .video-views, .terms-use.terms-blogs .summary-video .article-title, .terms-use.terms-blogs .summary-video .article-date, .terms-use.terms-blogs .summary-video .article-blog-title, .terms-use.terms-blogs .summary-blog .video-title, .terms-use.terms-blogs .summary-blog .video-date, .terms-use.terms-blogs .summary-blog .video-views, .terms-use.terms-blogs .summary-blog .article-title, .terms-use.terms-blogs .summary-blog .article-date, .terms-use.terms-blogs .summary-blog .article-blog-title {
    padding-left: 10px;
    float: left;
    font-size: 10px;
    width: calc(100% - 120px)
}

.terms-use.terms-videos .summary-video .video-title, .terms-use.terms-videos .summary-video .article-title, .terms-use.terms-videos .summary-video .article-blog-title, .terms-use.terms-videos .summary-blog .video-title, .terms-use.terms-videos .summary-blog .article-title, .terms-use.terms-videos .summary-blog .article-blog-title, .terms-use.terms-blogs .summary-video .video-title, .terms-use.terms-blogs .summary-video .article-title, .terms-use.terms-blogs .summary-video .article-blog-title, .terms-use.terms-blogs .summary-blog .video-title, .terms-use.terms-blogs .summary-blog .article-title, .terms-use.terms-blogs .summary-blog .article-blog-title {
    font-weight: bold;
    font-size: 12px
}

.terms-use.terms-videos .summary-video .video-time, .terms-use.terms-videos .summary-blog .video-time, .terms-use.terms-blogs .summary-video .video-time, .terms-use.terms-blogs .summary-blog .video-time {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 1px 4px
}

.terms-use.terms-blogs h2 {
    color: #ef2028
}


.terms-use .register-input-container {
    width: 100%;
    position: relative
}

    .terms-use .register-input-container:after {
        content: "";
        display: table;
        clear: both
    }

    .terms-use .register-input-container input[type=text] {
        width: 100%;
        margin-bottom: 10px
    }

    .terms-use .register-input-container input[type=checkbox] {
        position: relative;
        top: 2px;
        margin-right: 4px
    }

.terms-use.update {
    height: 54px;
    border: 0;
    position: relative;
    margin-top: 10px
}

    .terms-use.update button, .terms-use.update a {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border: none;
        background: var(--txp-blue);
        color: white;
        -webkit-transition: background 0.2s ease-in;
        transition: background 0.2s ease-in;
        border-radius: 4px;
        font-size: 18px;
        padding-top: 6px;
    }

        .terms-use.update button.blue, .terms-use.update a.blue {
            background: #0657A8;
            padding-bottom: 0
        }

            .terms-use.update button.blue:hover, .terms-use.update a.blue:hover {
                background: #0c4782
            }

        .terms-use.update button a, .terms-use.update a a {
            color: #fff
        }

            .terms-use.update button a:hover, .terms-use.update a a:hover {
                text-decoration: none
            }

        .terms-use.update button:hover, .terms-use.update a:hover {
            background: var(--txp-blue-dark);
            -webkit-transition: background 0.2s ease-in;
            transition: background 0.2s ease-in
        }

        .terms-use.update button.not-allow-click, .terms-use.update a.not-allow-click {
            background: #ccc;
            cursor: not-allowed
        }

@media (max-width: 900px) {
    .terms-use.update.desktop {
        display: none
    }
}

@media (min-width: 901px) {
    .terms-use.update.mobile {
        display: none
    }
}

.terms-use.update.cart {
    margin-top: 0px
}

.terms-use.sidebar li {
    border-top: 1px solid #ddd;
    padding: 10px
}

    .terms-use.sidebar li a {
        background: none;
        color: #0657A8;
        text-transform: none;
        border: 0;
        box-shadow: none;
        font-size: 14px;
        font-weight: normal
    }

        .terms-use.sidebar li a:hover {
            color: #333
        }

.terms-use-wrapper {
    width: 25.5%;
    float: right;
}

@media (max-width: 900px) {
    .terms-use-wrapper {
        width: 100%
    }
}

.terms-use-wrapper.calculator-numbers-button-width {
    width: 100%
}

.terms-use-wrapper > div {
    width: 100%
}

.terms-use-wrapper.top-margin {
    margin-top: 25px
}

.terms-use-wrapper:after {
    content: "";
    display: table;
    clear: both
}

.terms-use-wrapper .terms-use {
    float: left;
    width: 100%
}

    .terms-use-wrapper .terms-use.total.checkout {
        padding: 15px
    }

        .terms-use-wrapper .terms-use.total.checkout .sumary-item-title {
            font-size: 20px;
            color: var(--txp-blue) !important;
        }

        .terms-use-wrapper .terms-use.total.checkout .sumary-item-info {
            font-size: 13px
        }

    .terms-use-wrapper .terms-use.search {
        padding-top: 15px
    }

        .terms-use-wrapper .terms-use.search .ID-input {
            position: relative
        }

            .terms-use-wrapper .terms-use.search .ID-input .fa {
                color: #999;
                position: absolute;
                left: 12px;
                top: 12px
            }

            .terms-use-wrapper .terms-use.search .ID-input input {
                padding-left: 30px
            }

        .terms-use-wrapper .terms-use.search input[type="submit"] {
            background: #0657A8;
            border-color: #0657A8;
            color: white;
            height: 35px;
            margin-top: 5px;
            text-transform: uppercase;
            width: 100%
        }

        .terms-use-wrapper .terms-use.search select {
            margin-top: 5px;
            margin-bottom: 10px;
            width: 100%
        }

        .terms-use-wrapper .terms-use.search .half {
            display: inline-block;
            vertical-align: top;
            width: 48%
        }

@media (max-width: 900px) {
    .terms-use-wrapper .terms-use.search .half {
        float: right
    }
}

.terms-use-wrapper .terms-use.search .half.first {
    margin-right: 2%
}

@media (max-width: 900px) {
    .terms-use-wrapper .terms-use.search .half.first {
        float: left
    }
}

.terms-use-wrapper button, .terms-use-wrapper a {
    width: 100%;
    border: none;
    background: #26A65B;
    color: white;
    -webkit-transition: background 0.2s ease-in;
    transition: background 0.2s ease-in;
    border-radius: 4px;
    height: 54px;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.3);
    margin-bottom: 10px
}

@media (min-width: 900px) and (max-width: 1170px) {
    .terms-use-wrapper button.long-link, .terms-use-wrapper a.long-link {
        padding-top: 3px
    }
}

.terms-use-wrapper button:hover, .terms-use-wrapper a:hover {
    background: #043e77;
    -webkit-transition: background 0.2s ease-in;
    transition: background 0.2s ease-in
}

.terms-use-wrapper button.not-allow-click, .terms-use-wrapper a.not-allow-click {
    background: #ccc;
    cursor: not-allowed
}

.terms-use-wrapper button.disabled, .terms-use-wrapper a.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6
}

.terms-use-wrapper a {
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 15px;
}

.summary-video a {
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 0px;
}

.terms-use-wrapper a.simplelink {
    background: none;
    border: 0;
    box-shadow: none;
    color: #26A65B;
    font-size: 14px;
    text-decoration: underline;
    text-transform: none;
    padding: 0
}

    .terms-use-wrapper a.simplelink:hover {
        color: #1d7d44;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in
    }


.product-form-quote .terms-use.summary-details,
.product-form-quote .quote-summary-box {
    border: 2px solid #D0CFCF;
    border-radius: 0;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #fff;
    padding: 20px 32px;
    max-width: 345px;
    margin-left: auto;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

    /* separator in the middle */
    .product-form-quote .terms-use.summary-details hr {
        margin: 16px 0;
        border-top: 1px solid #D0CFCF;
    }

/* Shipment titles: Transfers / Heat Presses / Total */
.terms-use-wrapper .terms-use.total .alert-heading {
    display: flex; /* make it a row */
    align-items: baseline; /* align text nicely */
    justify-content: flex-start; /* text starts on the left */
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 17px; /* your reduced size */
    line-height: 1.3;
    color: var(--txp-blue);
    margin: 0 0 .35em;
    text-align: left !important;
}

    /* "Shipment 1 of 2" span to the right */
    .terms-use-wrapper .terms-use.total .alert-heading span {
        margin-left: auto; /* pushes it to the right edge */
        text-align: right;
        font-family: Verdana, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 22px;
        color: var(--txp-dark-gray);
    }

/*--------------------------End Stock Product Forms  ----------------------------------------*/

/* Full-bleed background for the whole section */
.express-names-fullbleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: linear-gradient( to right, #ECECEC 0, #ECECEC 58.3333%, #DFEFFF 58.3333%, #DFEFFF 100% );
}

    /* Row stays flush to avoid a gap between panels */
    .express-names-fullbleed .names-panels-row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Panels (left/right) */
    .express-names-fullbleed .names-panel-left,
    .express-names-fullbleed .names-panel-right {
        padding-top: 32px; /* tweak to match Figma vertical spacing */
        padding-bottom: 32px;
    }

    /* Left grey panel (~60%) */
    .express-names-fullbleed .names-panel-left {
        background: #ECECEC;
    }

    /* Right panel */
    .express-names-fullbleed .names-panel-right {
        background: transparent; /* or #DFEFFF */
    }

    /* Inner content padding (like p-5) */
    .express-names-fullbleed .product-form-options {
        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }

        /* Inner content – simulate your global .content-container margins */
        .express-names-fullbleed .product-form-options.content-container {
            /* If content-container already has max-width + margin:0 auto; keep that. */
            padding-left: 24px;
            padding-right: 24px;
        }

@media (max-width: 767.98px) {
    .express-names-fullbleed .product-form-options {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .express-names-fullbleed .product-form-options.content-container {
        padding-left: 40px;
        padding-right: 40px; /* feels closer to the Figma mock */
    }
}

/* ===== EXPRESS NAMES – OPTION CARDS ===== */

/* OUTER CARD (generic block-select) */
.block-select.option {
    border: 2px solid #D0D0D0;
    border-radius: 5px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    /* INNER IMAGE AREA – base */
    .block-select.option .img-wrap {
        width: 100%;
        height: 70px; /* base height; overridden in left panel */
        background: #D9D9D9;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 3px;
    }

    /* IMAGE INSIDE */
    .block-select.option img {
        max-width: 100%;
        max-height: 90%;
        object-fit: contain;
    }

    /* LABEL TEXT – base */
    .block-select.option span {
        font-family: "Ubuntu Sans", sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
        text-align: center;
        color: var(--txp-blue);
        display: block;
    }

/* ===== Base card style used elsewhere on the site ===== */
.product-form-options .product-option .option-style,
.product-form-options .product-option .option-style-notext {
    box-sizing: border-box;
    background: #ffffff;
    border: 2px solid #dddddd;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

/* Active state (blue border) */
.product-form-options .product-option .option.active {
    border-color: var(--txp-blue);
}

/* ----- FORMAT / FONT – LEFT PANEL (Express Names) ----- */

/* Font labels can wrap a bit tighter */
.product-form-options .product-option .option-style-notext span {
    font-size: 13px;
    line-height: 1.3;
}

/* FONT cards – outer white card & layout (left panel) */
.names-panel-left .product-option .option-style-notext {
    border: 2px solid #d3d3d3;
    border-radius: 5px;
    background: #ffffff;
    margin-bottom: 16px;
    padding: 0; /* match format cards (no internal padding) */
}

/* FORMAT cards – same frame as fonts (left panel) */
.names-panel-left .product-option .option-style {
    border: 2px solid #d3d3d3;
    border-radius: 5px;
    background: #ffffff;
    padding: 0;
    display: flex;
    flex-direction: column;
}

    /* Labels under images (Format + Font) – left panel */
.names-panel-left .product-option .block-select span, .names-panel-left .product-option .block-select label {
    display: block;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4; /* avoid tall lines */
    color: var(--txp-blue);
    text-align: center;
    margin: 0;
    padding: 6px 0 10px;
}

/* Font card images – keep proportions */
.names-panel-left .product-option .option-style-notext .img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Format card images – keep proportions */
.names-panel-left .product-option .option-style .img-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Shared gray zone geometry (Format + Font) in left panel */
.names-panel-left .product-option .option-style .img-wrap,
.names-panel-left .product-option .option-style-notext .img-wrap {
    background: #d9d9d9;
    height: 86px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Extra padding for format gray zone (margin + padding) */
.names-panel-left .product-option .option-style .img-wrap {
    margin: 10px 16px 4px;
    padding: 10px 24px;
}

/* Make FONT gray zone behave like FORMAT gray zone (same padding) */
.names-panel-left .product-option .option-style-notext .img-wrap {
    padding: 10px 24px;
}

/* Gap between cards in the left panel */
.names-panel-left .product-option {
    column-gap: 12px; /* horizontal space between cards */
    row-gap: 16px; /* vertical space between rows */
}

/* Font row: avoid extra flex row gap (margin-bottom handles it) */
.names-panel-left .product-option-fonts {
    row-gap: 0;
}

/* Make FORMAT and FONT cards use the same width & bottom margin */
.names-panel-left .product-option .option-style-notext {
    flex: 0 0 calc(20% - 12px);
    max-width: calc(20% - 12px);
    margin-bottom: 16px;
}

/* Remove right margin on every 3rd card so the row aligns flush */
.names-panel-left .product-option-fonts .option-style-notext:nth-child(3n) {
    margin-right: 0;
}

/* Responsive: 2 per row on md, 1 per row on xs for FONT cards */
@media (max-width: 991.98px) {
    .names-panel-left .product-option .option-style-notext {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .names-panel-left .product-option .option-style-notext {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== EXPRESS NAMES – COLOR PICKER ===== */

/* Top “selected color” card */
.color-option .color-selected-card {
    display: flex;
    align-items: stretch;
    height: 81px;
    max-width: 300px;
    border-radius: 5px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
    overflow: hidden; /* keeps corners clean */
}

/* Left swatch (big color block) */
.color-option .color-selected-swatch {
    width: 116.75px; /* Figma value */
    height: 81px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background: #2499E7; /* default until a color is chosen */
    flex-shrink: 0;
}

/* Right white area */
.color-option .color-selected-info {
    flex: 1;
    border: 2px solid #D0CFCF;
    border-left: none; /* no border touching swatch */
    border-radius: 0 5px 5px 0; /* round right side only */
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 24px;
}

/* Color name text in card */
.color-option .color-selected-name {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: var(--txp-blue);
}

/* ==== Grid of small color squares ==== */

.color-option .color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 12px; /* vertical / horizontal gap between squares */
}

/* Each item wrapper */
.color-option .color-item {
    flex: 0 0 auto;
}

/* Small swatches */
.color-option .option-color {
    width: 57.5px !important;
    height: 49.25px !important;
    border-radius: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid transparent;
    display: block;
    font-size: 0; /* so label text doesn't affect size */
}

    /* Label fills the square */
    .color-option .option-color label {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    /* Hide the text for each little square (we show it only in the big card) */
    .color-option .option-color span {
        position: absolute !important;
        left: -9999px !important;
        font-size: 11px; /* keep it readable for screen readers */
    }

    /* Selected square border */
    .color-option .option-color.active {
        border-color: var(--txp-blue) !important;
    }

    /* Keep the original radio hiding for colors too */
    .color-option .option-color input[type="radio"] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.express-input-container input {
    margin-right: 5px;
    border-radius: 3px;
    border: 1px solid #ccc;
    height: 35px;
    padding-left: 10px;
    background: #fff;
    margin-bottom: 6px;
}

    .express-input-container input:-ms-input-placeholder {
        color: #a9a9a9 !important;
    }

@media (max-width: 600px) {
    .express-input-container input {
        width: 51%;
        margin-right: 10px;
        margin-left: 0px;
    }
}

.express-input-container .fa {
    color: red;
    cursor: pointer;
}

    .express-input-container .fa:hover {
        color: darkred;
    }

.express-input-container label {
    width: 30px;
    text-align: center;
}

@media (max-width: 600px) {
    .express-input-container label {
        width: 10%;
        margin-right: 5px;
    }
}

.express-input-container.more input {
    margin-left: 14px;
    margin-right: 4px;
}

@media (max-width: 600px) {
    .express-input-container.more input {
        margin-left: 4px;
        margin-right: 14px;
    }
}

.express-input-container.titles span {
    margin-left: 12px;
}

@media (max-width: 600px) {
    .express-input-container.titles span {
        margin-left: 0;
        display: inline-block;
        margin-right: 5px;
    }
}

.express-input-container.titles span.letter-height {
    margin-left: 125px;
}

@media (max-width: 600px) {
    .express-input-container.titles span.letter-height {
        margin-left: 0;
        width: 29%;
    }
}

@media (max-width: 600px) {
    .express-input-container.titles span.names {
        width: 55%;
        margin-left: -7px;
    }
}

@media (max-width: 600px) {
    .express-input-container.titles span.line {
        width: 10%;
    }
}

.names-list .btn.grey {
    margin-left: 12px;
}

#express-names-container h3 {
    text-align: left;
    font-size: 26px;
    margin-top: 10px;
    margin-bottom: 10px;
}

    #express-names-container h3 span {
        display: inline-block;
        background: transparent;
        color: #0657A8;
        width: 36px;
        line-height: 28px;
        border: 2px solid #0657A8;
        text-align: center;
        border-radius: 65%;
        padding: 1px 0 3px;
        position: relative;
        top: 0px;
        margin-right: 5px;
    }

.express-options {
    margin: 10px 0;
}

#express-names-container .product-form-options .product-option .option-style {
    padding: 0px;
}

#express-names-container .option-color {
    margin: 0px;
}

#express-names-container .product-form-options .product-option .option-style img {
    height: auto;
}

#express-names-container .product-form-options .product-option .option-style-notext img {
    padding: 2px 0px;
}

#express-names-container .product-form-options .product-option .option-color {
    width: 100%;
}

/* EXPRESS NAMES – word inputs (Figma style) */
.word-control {
    border-radius: 5px !important;
    border: 2px solid var(--txp-yellow) !important; /* yellow border */

    padding: 15px 20px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
}

/* Optionally full-width on small screens */
@media (max-width: 600px) {
    .word-control {
        width: 100%;
    }
}

/* Express names row layout */
.express-input-container {
    display: flex;
    align-items: center;
    gap: 8px; /* space between label, input, and X */
}

    /* small fixed-width index label */
    .express-input-container > label {
        width: 24px;
        text-align: left;
        margin: 0;
    }

    /* input should take all remaining space */
    .express-input-container .word-control {
        flex: 1 1 auto;
        width: auto; /* override any leftover widths */
    }

    /* X icon stays snug on the right */
    .express-input-container .delete-input {
        flex: 0 0 auto;
        margin-left: 8px;
    }

/* Preview box: hug the image, no extra white bars */
#sample-text-container.names-text-container {
    display: inline-block; /* shrink to image width/height */
    padding: 0; /* no internal padding */
    height: auto; /* let the image define the height */
    line-height: 0; /* remove extra line space around <img> */
    background-color: transparent !important; /* kill the white bg from JS */
}

/* Optional: make the image fill the container cleanly */
#sample-text-container img {
    display: block;
}

/* Make each name row a wrapping flex row */
.names-list .express-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    /* label – small fixed width on the left */
    .names-list .express-input-container > label {
        width: 16px; /* adjust if you want */
        margin-right: 8px;
    }

    /* text box – takes all remaining space on the row */
    .names-list .express-input-container .word-control {
        flex: 1 1 auto;
    }

    /* red X – stays on the same row, right side */
    .names-list .express-input-container .delete-input {
        margin-left: 8px;
    }

/* Make each name row a 3-column grid:
       [label] [input] [X]  + alerts under the last 2 columns */
#express-names-container .express-input-container {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    column-gap: .5rem;
    align-items: center;
    margin-bottom: .25rem;
}

    /* Kill old floats / margins so grid can take over */
    #express-names-container .express-input-container label,
    #express-names-container .express-input-container .word-control,
    #express-names-container .express-input-container .delete-input,
    #express-names-container .express-input-container .names-input-alert {
        float: none !important;
        margin: 0 !important;
    }

    #express-names-container .express-input-container > label {
        grid-column: 1;
        text-align: left;
    }

    #express-names-container .express-input-container > .word-control {
        grid-column: 2;
        width: 100% !important; /* keep the nice full-width input */
    }

    /* Works whether it’s <i> or <span>, as long as it has .delete-input */
    #express-names-container .express-input-container > .delete-input {
        grid-column: 3;
        cursor: pointer;
        text-align: center;
    }

    /* Alerts directly under the input (and X), no huge gap, no extra left offset */
    #express-names-container .express-input-container .names-input-alert {
        grid-column: 2 / 4; /* span under input + X */
        font-size: 14px !important;
        font-weight: 700;
        text-transform: uppercase;
        margin-top: -5px !important; /* small gap under the box */
    }

/* MAIN TWO-COLUMN LAYOUT */
body.apparel-details .product-main-2025,
.product-detail-container.apparel-details-container .product-main-2025 {
    align-items: flex-start;
}

/* ===== LEFT: GALLERY ===== */

body.apparel-details .apparel-gallery-2025,
.product-detail-container.apparel-details-container .apparel-gallery-2025 {
    max-width: 420px;
}

    body.apparel-details .apparel-gallery-2025 #productslider,
    .product-detail-container.apparel-details-container .apparel-gallery-2025 #productslider {
        height: 100%;
    }

body.apparel-details .apparel-main-frame,
.product-detail-container.apparel-details-container .apparel-main-frame {
    border: 2px solid #E0E0E0;
    border-radius: 20px 0 20px 0;
    background: #F7F7F7;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* big image */
body.apparel-details .image-container .product-image,
.product-detail-container.apparel-details-container .image-container .product-image {
    display: none;
    max-height: 705px;
    max-width: 82%;
    object-fit: contain;
}

    body.apparel-details .image-container .product-image.active,
    .product-detail-container.apparel-details-container .image-container .product-image.active {
        display: block;
    }

/* thumbnail strip (old horizontal strip – still here if used elsewhere) */
body.apparel-details .apparel-thumb-strip,
.product-detail-container.apparel-details-container .apparel-thumb-strip {
    margin-top: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding-top: 8px;
    padding-bottom: 4px;
}

/* Thumbnail strip under main apparel image */
body.apparel-details .thumb-strip-wrapper,
.product-detail-container.apparel-details-container .thumb-strip-wrapper {
    overflow: hidden; /* no horizontal scroll */
    margin-top: 16px; /* tweak 12–20px to taste */
}

body.apparel-details #carouselindicators li,
.product-detail-container.apparel-details-container #carouselindicators li {
    flex: 1 1 0;
    max-width: none;
    margin: 0;
}

/* Make the indicator row a flex row and give it gaps */
body.apparel-details .thumb-strip-wrapper .carousel-indicators,
.product-detail-container.apparel-details-container .thumb-strip-wrapper .carousel-indicators {
    display: flex !important;
    justify-content: flex-start;
    column-gap: 8px; /* <— space between thumbs */
    padding: 0;
}

    /* Each indicator should size to its content, not stretch */
    body.apparel-details .thumb-strip-wrapper .carousel-indicators .indicator,
    .product-detail-container.apparel-details-container .thumb-strip-wrapper .carousel-indicators .indicator {
        flex: 0 0 auto; /* no flex-grow */
        margin: 0; /* reset any Bootstrap margin */
    }

        /* Optional: give the inner box a fixed-ish width so all thumbs match */
        body.apparel-details .thumb-strip-wrapper .carousel-indicators .indicator .data-slide-image,
        .product-detail-container.apparel-details-container .thumb-strip-wrapper .carousel-indicators .indicator .data-slide-image {
            width: 76px; /* or whatever size matches Figma */
        }

        body.apparel-details .thumb-strip-wrapper .carousel-indicators .indicator:last-child,
        .product-detail-container.apparel-details-container .thumb-strip-wrapper .carousel-indicators .indicator:last-child {
            margin-right: 0; /* no extra gap after last one */
        }

body.apparel-details #carouselindicators,
.product-detail-container.apparel-details-container #carouselindicators {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

    body.apparel-details #carouselindicators li.indicator,
    .product-detail-container.apparel-details-container #carouselindicators li.indicator {
        width: 72px;
        height: 99px;
        border: 2px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        margin: 0;
    }

        body.apparel-details #carouselindicators li.indicator.active,
        body.apparel-details #carouselindicators li.indicator:hover,
        .product-detail-container.apparel-details-container #carouselindicators li.indicator.active,
        .product-detail-container.apparel-details-container #carouselindicators li.indicator:hover {
            border-color: var(--txp-blue);
        }

@media (max-width: 1000px) {
    body.apparel-details .image-container .product-image,
    .product-detail-container.apparel-details-container .image-container .product-image {
        max-height: 60vh;
    }
}

/* ===== RIGHT: CONTENT ===== */

@media (max-width: 1000px) {
    body.apparel-details .product-container,
    .product-detail-container.apparel-details-container .product-container {
        padding: 16px 0 0;
    }
}

/* Big image for Express Names hero */
.product-details .image-container .product-image {
    display: none;
    max-height: 705px;
    max-width: 82%;
    object-fit: contain;
}

/* Show the image when its slide is active */
.product-details .carousel-item.active .product-image {
    display: block;
}

/* Reset Bootstrap default arrow icons */
.product-detail-container .carousel-control-prev-icon,
.product-detail-container .carousel-control-next-icon {
    width: 48px;
    height: 48px;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 24px !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* LEFT (prev) – red chevron */
.product-detail-container .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='24' viewBox='0 0 15 24' fill='none'%3E%3Cpath d='M13 22L2 12L13 2' stroke='%23DF271C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* RIGHT (next) – red chevron */
.product-detail-container .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='24' viewBox='0 0 15 24' fill='none'%3E%3Cpath d='M2 22L13 12L2 2' stroke='%23DF271C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

    /* Make sure Bootstrap's pseudo-content doesn't interfere */
    .product-detail-container .carousel-control-prev-icon::before,
    .product-detail-container .carousel-control-next-icon::before {
        content: none !important;
    }

/* Express Names hero – big image sizing */
.product-detail-container.apparel-details-container
.product-slider-section.image-container .product-image {
    max-height: 705px;
    max-width: 82%;
    object-fit: contain;
}

/* Center the slide content */
.product-detail-container.apparel-details-container
.apparel-main-frame .carousel-inner .carousel-item {
    text-align: center;
}

/* --- EXPRESS NAMES HERO: FIX BIG IMAGE CROPPING --- */

/* First: stop the generic product-page centering from messing these images */
.product-detail-container.apparel-details-container .image-container .product-image {
    position: static !important;
    top: auto !important;
    transform: none !important;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 705px;
    margin: 0 auto;
}

/* Only show the image for the active slide */
.product-detail-container.apparel-details-container .carousel-item .product-image {
    display: none;
}

.product-detail-container.apparel-details-container .carousel-item.active .product-image {
    display: block;
}

/* --- EXPRESS NAMES HERO: FIX THUMBNAILS BEING CUT --- */

.product-detail-container.apparel-details-container #carouselindicators li.indicator {
    width: auto; /* let width be driven by inner box */
    height: auto; /* no hard 99px crop */
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

    /* keep a nice, consistent thumb width */
    .product-detail-container.apparel-details-container
    #carouselindicators li.indicator .data-slide-image {
        width: 76px;
    }

    /* make the thumb image fit the little frame */
    .product-detail-container.apparel-details-container
    #carouselindicators li.indicator img {
        width: 100%;
        height: auto;
        position: static;
        top: auto;
        transform: none;
    }

/* EXPRESS NAMES HERO – make big image cover frame */
.product-detail-container.apparel-details-container
.apparel-main-frame .carousel-inner,
.product-detail-container.apparel-details-container
.apparel-main-frame .carousel-inner .carousel-item {
    height: 100%;
}

    /* Image fills the whole frame and is cropped (cover) */
    .product-detail-container.apparel-details-container
    .apparel-main-frame .carousel-inner .carousel-item .product-image {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }

/* Stretch frame so the slide area, not just content, fills it */
.product-detail-container.apparel-details-container .apparel-main-frame {
    align-items: stretch; /* override center so slides fill height */
}

/* Ensure all slides have a fixed height equal to the frame */
.product-detail-container.apparel-details-container .apparel-main-frame {
    height: 480px; /* pick a good height; 380 was too small for cover */
    position: relative;
    overflow: hidden;
}

    /* Force carousel items to match frame height */
    .product-detail-container.apparel-details-container
    .apparel-main-frame .carousel-inner .carousel-item {
        height: 100%;
        position: relative;
    }

        /* FIX: absolute image prevents reflow flicker */
        .product-detail-container.apparel-details-container
        .apparel-main-frame .carousel-inner .carousel-item .product-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            max-width: none !important;
            max-height: none !important;
        }

@media (max-width: 700px) {
    .product-detail-container.apparel-details-container .apparel-main-frame {
        height: 340px;
    }
}

/****************************
 EBOOK PAGE STYLING
****************************/
.content-page-2025.mt-5 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* The wrapper that centers the box */
.featured-hero-inner {
    max-width: 1325px;
    margin: 0 auto;
    padding: 0 20px;
}

/****************************
FEATURECARD WHITE CARD
*****************************/
.featured-card {
    display: grid;
    grid-template-columns: 30% 70%; 
    background: #ffffff;
    border-radius: 20px 0 20px 0;
    padding-top: 40px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    height: auto;
}

.featured-card-content {
    display: flex;
    flex-direction: column;
    width: 313px;
    height: 348px;
}

.featured-card-image {
    width: 100%;
    height: 100%;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

    .featured-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* keep proportions, no distortion */
        display: block;
    }

.two-col-inner {
    max-width: 1325px; /* exact same as featured card */
    margin: 0 auto; /* center it */
    padding-top: 50px;
}

/* LEFT SIDE CONTENT */
.featured-card-content h2 {
    font-family: "Raleway";
    font-size: 21px;
    font-weight: 700;
    color: var(--txp-red);
    margin-bottom: 12px;
}

.featured-card-content h5 {
    font-family: Ubuntu Sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: var(--txp-blue);
    margin-bottom: 18px;
}

.featured-card-content p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--txp-dark-gray);
    margin-bottom: 14px;
    text-align:left;
}

/* RESPONSIVE */
@media (max-width: 992px) {

    .featured-card {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 40px 30px; /* kept from first block */
    }

    .featured-card h2 {
        text-align: left;
        padding: 0px; /* kept from first block */
    }

    .featured-card-image {
        justify-content: center;
    }

        .featured-card-image img {
            max-width: 100%;
        }
}

/* Make left side a vertical stack */
.featured-card.p-5 .featured-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*     Move button to bottom inside left column */
    .featured-card.p-5 .featured-card-content a.btn {
        margin-top: auto !important; /* pushes to bottom */
        display: inline-block;
        padding-bottom: 12px; /* bottom padding */
    }

/* two-column layout with readable spacing */
.twocolumnwithsidebar .content-block {
    margin-bottom: 1.5rem;
}

/* fix content overflowing full width */
.twocolumnwithsidebar .col-left,
.twocolumnwithsidebar .col-right {
    display: block;
}

/************************************************************
  FORCE ICON HEADING (H6) TO MATCH FIGMA
************************************************************/
div.iconheadingtextgroup__content h6 {
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 23px !important;
    line-height: 34px !important;
    letter-spacing: 0 !important;
    color: var(--txp-blue) !important;
    margin: 0 0 8px 0 !important;
}

/* ======================================
   TWO COLUMN SIDEBAR
   ====================================== */
.sidebar-blue {
    background-color: var(--txp-sky);
    padding: 2rem 18rem 2.5rem 4rem;
    border-radius: 0 0 0 0;
    box-sizing: border-box;
}

/* Ensure sidebar stretches full height next to content */
.twocolumnwithsidebar .row {
    align-items: flex-start;
}

.sidebar-blue .content-block {
    margin-bottom: 1.5rem;
}

/* LEFT SIDE */
.col-left p,
.col-left li {
    font-family: Verdana, sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    color: var(--txp-dark-gray); 
    margin-bottom: 1rem;
    padding-right: 10rem;
}

/* RIGHT SIDE */
.sidebar-blue input,
.sidebar-blue select,
.sidebar-blue textarea {
    width: 100%;
    border-radius: 4px;
}

/* Align H6 headers in sidebar consistently */
.sidebar-blue h6 {
    margin-top: -20px !important;
    font-weight: 700;
    font-family: Ubuntu Sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 23px;
    line-height: 34px;
}

/* Remove the rogue <p><br></p> ONLY on this page */
.content-container.content-page-2025 > p:empty {
    display: none !important;
}

.content-container.content-page-2025 > p > br:only-child {
    display: none !important;
}

/* ============================================================
   ACTIVE CAMPAIGN FORM — TRUE SIDEBAR OVERRIDES
   Targets ONLY form #_form_83_ inside .sidebar-blue
   ============================================================ */
.sidebar-blue form[id^="_form_"][id$="_"] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
}

/* LABELS */
.sidebar-blue form[id^="_form_"] ._form-label {
    font-family: Ubuntu Sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    margin-bottom: 6px !important;
}

/* INPUTS + SELECTS + TEXTAREA */
.sidebar-blue form[id^="_form_"] input[type="text"]:not(._submit),
.sidebar-blue form[id^="_form_"] select:not(._submit),
.sidebar-blue form[id^="_form_"] textarea:not(._submit) {
    width: 100% !important;
    height: 40px !important;
    border-radius: 5px !important;
    border: 2px solid var(--txp-yellow) !important;
    background: #FFF !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
}

/* MULTI-SELECT FIX */
.sidebar-blue form[id^="_form_"] select[multiple] {
    height: 110px !important;
    padding-top: 8px !important;
}

/* PLACEHOLDER */
.sidebar-blue form[id^="_form_"] input::placeholder {
    color: #999 !important;
}

/* SUBMIT BUTTON */
.sidebar-blue form[id^="_form_"] ._submit {
    width: 160px !important;
    height: 40px !important;
    background: var(--txp-blue) !important;
    border-radius: 5px !important;
    color: #FFF !important;
    text-transform: uppercase !important;
    font-family: Verdana, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    margin-top: 12px !important;
    cursor: pointer !important;
}

/* REMOVE INTERNAL PADDING */
.sidebar-blue form[id^="_form_"] ._form-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* REMOVE EXTRA PARAGRAPH SPACING */
.sidebar-blue form[id^="_form_"] p {
    margin: 0 !important;
}

/* Remove ActiveCampaign injected HR */
.sidebar-blue hr {
    display: none !important;
}

/* =====================================================
   Override — Inputs (First, Email, Other)
   ===================================================== */
.sidebar-blue form[id^="_form_"][id$="_"] ._form_element input[type="text"],
.sidebar-blue form[id^="_form_"][id$="_"] input[type="text"]:not(._submit),
.sidebar-blue form[id^="_form_"][id$="_"] select:not(._submit),
.sidebar-blue form[id^="_form_"][id$="_"] textarea:not(._submit) {
    color: var(--txp-blue) !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    line-height: 100% !important;
}

/* ============================================
   Hard override the AC system ID rule
   ============================================ */
.sidebar-blue [id^="_form_"] input[type="text"]:not(._submit) {
    color: var(--txp-blue) !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    line-height: 100% !important;
}

/* Match AC's injected rule — wins every time */
.sidebar-blue [id^="_form_"] input[type="text"]:not(._submit) {
    color: var(--txp-blue) !important;
}

/* FINAL WHITE BACKGROUND KILLER – NO ID NEEDED */
.sidebar-blue > div[class^="_form_"] > form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Also kill the outer wrapper that AC injects */
.sidebar-blue > div[class^="_form_"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

    /* Remove background that AC injects on form-content */
    .sidebar-blue > div[class^="_form_"] ._form-content {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }


/* Sidebar body text under the title */
.sidebar-blue > p,
.sidebar-blue .content-block p {
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    color: var(--txp-dark-gray) !important;
    margin-bottom: 1rem;
}

/* ============================================
   FANWEAR SIDEBAR — BULLETED LIST TYPOGRAPHY
   ============================================ */
.sidebar-blue ul,
.sidebar-blue ul li {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important; 
    font-size: 15px !important;
    line-height: 13px !important;
    letter-spacing: 0 !important;
    color: var(--txp-blue) !important;
    padding-left: 20px; 
}

    .sidebar-blue ul li::marker {
        color: var(--txp-blue) !important;
    }

/* STOP INPUT FROM TOUCHING SUBMIT BUTTON */
.sidebar-blue form[id^="_form_"] ._submit,
.sidebar-blue button._submit,
.sidebar-blue [id^="_form_"] button[type="submit"] {
    font-family: Verdana, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background: var(--txp-blue) !important;
    border-radius: 5px !important;
    height: 40px !important;
    width: 140px !important;
}

/* Restore the real sidebar background */
.col-right.sidebar-blue {
    position: relative;
}

    .col-right.sidebar-blue::after {
        content: "";
        position: absolute;
        top: -50px; /* lift background UP – adjust this number */
        bottom: 0;
        left: 0; /* ensure it starts at left of the sidebar */
        right: 0;
        width: 100vw;
        background: var(--txp-sky);
        z-index: -1;
    }

/* Ensure the white card controls the band height */
.featured-card {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    min-height: 360px;
}

/* When the panels stack, kill the split and keep only the right-panel color */
@media (max-width: 991.98px) {

    /* If the wrapper has a gradient, remove it */
    .express-names-fullbleed,
    .express-names-fullbleed .content-container,
    .express-names-fullbleed .names-panels-row {
        background: #E7F3FF !important; /* same light blue as the right side */
        background-image: none !important;
    }

        /* Make both panels use the right-side background */
        .express-names-fullbleed .names-panel-left,
        .express-names-fullbleed .names-panel-right {
            background: transparent !important; /* or #E7F3FF if they had solid colors */
        }

    .hero-panel-right, .hero-panel-left {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .names-panel-right {
        padding-left: 20px !important;
    }
}

/* Ultra-wide screens: keep the right panel content centered / padded */
@media (min-width: 1400px) {
    .express-names-fullbleed .names-panel-right .product-form-options {
        max-width: 560px; /* tweak 520–640px to taste */
        margin-left: auto;
        margin-right: auto;
    }
}

/****************************************************
 NUMBERS PAGE 2025
*****************************************************/


.numbers-panels-row {
    align-items: stretch;
}

/* FIX LEFT PANEL BACKGROUND */
.numbers-panel-left {
    background: #F7F7F7 !important;
}

/* FIX RIGHT PANEL BACKGROUND */
.numbers-panel-right {
    background: #E7F3FF !important;
}



    .numbers-panel-left .product-form-options,
    .numbers-panel-right .product-form-quote {
        height: 100%;
    }

/* Page title and step titles */
.numbers-page .numbers-main-title {
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.3;
    color: var(--txp-blue);
    margin-bottom: 24px;
}

.numbers-page .numbers-step-title {
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--txp-blue);
    margin: 18px 0 12px;
}

    .numbers-page .numbers-step-title .graySubtitle {
        font-weight: 400;
        color: #7B7B7B;
    }

/* Style cards (Step 1) */
.numbers-page .product-form-options .product-option .option-style {
    background: #FFFFFF;
    border-radius: 5px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .numbers-page .product-form-options .product-option .option-style:hover,
    .numbers-page .product-form-options .product-option .option-style.active {
        border-color: var(--txp-blue);
        box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    }

/* Size cards (Step 2) – keep existing markup, just modernize */
.numbers-page .product-form-options .product-option .option-size {
    background: #FFFFFF;
    border-radius: 5px;
    border: 2px solid #E0E0E0;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .numbers-page .product-form-options .product-option .option-size:hover,
    .numbers-page .product-form-options .product-option .option-size.active {
        border-color: var(--txp-blue);
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

/* Reuse Names color styles – we only tweak spacing */
.numbers-page .color-option .color-grid {
    margin-top: 4px;
}

/* Quantity section (Step 4) */
.numbers-page .numbers-qty-section {
    margin-top: 22px;
}

/* Wrap for quantity items – keeps them in rows with gaps */
.numbers-page .numbers-qty-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* Individual quantity blocks – uses existing .option-quantity wrapper */
.numbers-page #five-packs-container .numbers-qty-item,
.numbers-page #express-packs-container .numbers-qty-item,
.numbers-page #kits-container .numbers-qty-item {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
    padding: 10px 14px;
    border-radius: 5px;
    border: 2px solid var(--txp-yellow);
    background: #FFFFFF;
    box-sizing: border-box;
    width: 100%; /* llena la columna/celda */
}

    /* Label text inside quantity block (grey, bold) */
    .numbers-page #five-packs-container .numbers-qty-item label,
    .numbers-page #express-packs-container .numbers-qty-item label,
    .numbers-page #kits-container .numbers-qty-item label {
        margin: 0;
        margin-right: 10px;
        font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        color: #7B7B7B;
    }

    /* Number input itself (blue, extra bold) */
    .numbers-page #five-packs-container .numbers-qty-item .quantity,
    .numbers-page #express-packs-container .numbers-qty-item .quantity,
    .numbers-page #kits-container .numbers-qty-item .quantity {
        flex: 0 0 70px;
        max-width: 80px;
        height: 32px;
        padding: 4px 8px;
        border-radius: 3px;
        border: 1px solid #D0CFCF;
        font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 800;
        font-size: 17px;
        line-height: 1;
        color: var(--txp-blue);
        text-align: right;
        box-sizing: border-box;
    }


/* Ensure requirement list and quote box breathe a little */
.numbers-page .product-form-quote .terms-use {
    margin-top: 12px;
}

.numbers-page .terms-use.total .numbers-subtotal-label {
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 28px;
    color: var(--txp-blue);
}

@media (max-width: 870px) {
    .product-form-quote {
        padding-left: 0px !important;
    }
}

#settingsTabs {
    margin: 0 !important; /* kill margin: 0 auto */
    max-width: 100% !important; /* let it fill the container */
}

/* Tiny tweak: make tabs feel a bit more spaced on small screens */
@media (max-width: 576px) {
    #settingsTabs {
        padding: 0 12px;
    }
}

/* Full-bleed background for the whole section */
.numbers-fullbleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: linear-gradient( to right, #ECECEC 0, #ECECEC 58.3333%, #DFEFFF 58.3333%, #DFEFFF 100% );
}

    .numbers-fullbleed .content-container {
        background: transparent !important;
        max-width: 1440px;
        margin: 0 auto;
    }

.numbers-panel-left,
.numbers-panel-right {
    background: transparent !important;
}

.numbers-panels-row {
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .numbers-fullbleed {
        background: #ffffff;
        margin-left: 0;
        margin-right: 0;
    }

    .numbers-panel-left,
    .numbers-panel-right {
        background: transparent !important;
    }
}

.numbers-page .product-form-options .product-option {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

    /* Cada tarjeta ocupa 1/3 del ancho (con gap) en desktop */
    .numbers-page .product-form-options .product-option .option-style {
        flex: 0 0 calc(33.333% - 11px);
        max-width: calc(33.333% - 11px);
        border: 2px solid #D0CFCF;
    }

    /* Make the step title its own full-width row above the cards */
    .numbers-page .product-form-options .product-option .numbers-step-title {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 8px; /* a little breathing room above the cards */
    }

@media (max-width: 991.98px) {
    .numbers-page .product-form-options .product-option .option-style {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

@media (max-width: 575.98px) {
    .numbers-page .product-form-options .product-option .option-style {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ONLY the left-colored swatch gets the border */
.color-option .color-selected-card .color-selected-swatch {
    border: 2px solid #D0CFCF; /* gris Figma */
    border-right: none; /* no borde en el lado que toca la parte blanca */
    border-radius: 5px 0 0 5px; /* redondeado solo de lado izquierdo */
    box-sizing: border-box;
}

/* right side keeps its own border */
.color-option .color-selected-card .color-selected-info {
    border: 2px solid #D0CFCF;
    border-left: none !important; /* evita doble borde entre swatch e info */
    border-radius: 0 5px 5px 0;
}

/* Línea divisoria entre el color y el texto del indicador seleccionado */
.color-option .color-selected-swatch {
    border-right: 2px solid #D0CFCF !important; /* línea gris vertical */
}

/* TAB 1 – FIVE PACKS: 3 columnas */
#five-packs-container .numbers-qty-wrapper .numbers-qty-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column-gap: 16px;
    grid-row-gap: 10px;
}

/* Mobile – stack one per row */
@media (max-width: 767.98px) {
    #five-packs-container .numbers-qty-wrapper .numbers-qty-grid {
        display: block !important; /* disable grid */
    }

        #five-packs-container .numbers-qty-wrapper .numbers-qty-grid .numbers-qty-item {
            width: 100% !important;
            max-width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 8px; /* space between cards */
        }
}

/* TAB 2 y 3 – un solo bloque full width */
#express-packs-container .numbers-qty-wrapper .numbers-qty-grid,
#kits-container .numbers-qty-wrapper .numbers-qty-grid {
    display: block;
}

.numbers-page .quantity::-webkit-inner-spin-button,
.numbers-page .quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='18'%20viewBox='0%200%2016%2018'%3E%3Cpolygon%20points='8,2%204,6%2012,6'%20fill='%23DF271C'/%3E%3Cpolygon%20points='8,16%204,12%2012,12'%20fill='%23DF271C'/%3E%3C/svg%3E") no-repeat center center;
    width: 18px;
    border-left: 1px solid #D0CFCF;
    cursor: pointer;
}

/*********************************************
 * PREVIEW CARD GENERIC (Numbers / Calculator)
 *********************************************/
/* Outer gray card */
.preview-number-container {
    width: 100%;
    margin: 0 auto 24px;
    background: #D9D9D9;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-sizing: border-box;
    position: relative;
}

    /* Inner content: remove default modal chrome */
    .preview-number-container #modal-content-numbers {
        position: relative;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    /* Frame that holds tee image + overlay */
    .preview-number-container .tee-preview-frame {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }

        /* Tee image */
        .preview-number-container .tee-preview-frame .tee {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;
            box-sizing: border-box;
        }

    /* Swatches bar under the tee */
    .preview-number-container .clipart-swatches {
        list-style: none;
        margin: 0; /* no extra margin around the bar */
        padding: 12px 16px 16px;
        background: #FFFFFF;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        border: 1px solid #ddd;
    }

        /* Individual color circles */
        .preview-number-container .clipart-swatches .swatch {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid #FFFFFF; /* inner white ring */
            box-shadow: 0 0 0 1px #DDDDDD; /* subtle outer border */
            cursor: pointer;
        }

    /* === Shirt preview: fixed center for the number === */

    /* Make sure the tee frame is the positioning context */
    .preview-number-container .tee-preview-frame {
        position: relative; /* anchor for absolute children */
    }

    /* Center of the shirt: this point stays fixed for all sizes */
    .preview-number-container #number-ex-container {
        position: absolute;
        top: 48%; /* <-- move number up/down here (45, 50, etc.) */
        left: 50%;
        transform: translate(-50%, -50%); /* center on that point */
        pointer-events: none;
        width: auto;
        height: auto;
    }

        /* Children inside number-ex-container (SVG, IMG, etc.) */
        .preview-number-container #number-ex-container > * {
            position: static !important; /* cancel old absolute 0,0 */
            display: block;
            margin: 0 auto;
            /* IMPORTANT: let JS width/height win, no max-* limits here */
            /* remove max-width / max-height / height:auto */
        }


/* kill the Bootstrap col padding on our select labels */
.product-form-options .calc-select-prefix[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* ============================
   Checkout "Order Summary" box
   ============================ */

/* Card shell – same feel as calculator box */
.terms-use.total {
    border: 2px solid #D0CFCF;
    border-radius: 20px 0 20px 0;
    background: #fff;
    padding: 20px 32px;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

    /* Heading: Order Summary */
    .terms-use.total h2 {
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 700;
        font-size: 23px;
        line-height: 34px;
        color: var(--txp-dark-gray);
        margin: 0 0 12px;
        text-align: left;
    }

    /* Shipment titles (Transfers / Heat Presses / Total) */
    .terms-use.total .summary-item {
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 700;
        font-size: 19px;
        line-height: 28px;
        color: var(--txp-blue);
        margin: 0 0 6px;
    }

    /* Space around separators */
    .terms-use.total hr {
        margin: 16px 0;
        border-top: 1px solid #D0CFCF;
    }

    /* Kill legacy float behavior inside this box */
    .terms-use.total .summary-item span {
        float: none !important;
    }

    .sumary-item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 500; /* was 500 */
        font-size: 18px; /* slightly smaller than headings */
        color: var(--txp-blue) !important;
        margin-bottom: 2px;
    }

        /* 4) Keep the amounts on the right bold & red (as you already had) */
        .sumary-item-title span {
            margin-left: 8px;
            font-weight: 700;
            font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: var(--txp-dark-gray);
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1, "lnum" 1;
            min-width: 7ch;
        }

    /* Final Order Total row a bit stronger */
    .summary-item-total .sumary-item-title {
        margin-top: 8px;
        font-size: 17px;
        font-weight: 700;
        color: var(--txp-blue); /* blue to make it feel like a headline */
        text-transform: uppercase;
    }

        .summary-item-total .sumary-item-title span {
            font-size: 18px;
        }

/* CALCULATORS – make Total row label/value left/right */
.product-form-quote .summary-item-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .product-form-quote .summary-item-total b {
        font-weight: 500;
        margin-right: 4px;
    }

    .product-form-quote .summary-item-total .total-price {
        font-weight: 700;
        color: var(--txp-dark-gray);
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
        min-width: 7ch;
        text-align: right;
        margin-left: auto;
        float: none !important;
        display: inline-block;
    }

.summary-description {
    color: var(--txp-blue);
}

.product-form-quote .terms-use {
    border: 2px solid #D0CFCF;
    border-radius: 20px 0 20px 0;
    background: #fff;
    padding: 16px 24px;
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

    /* Horizontal rule inside the card */
    .product-form-quote .terms-use hr {
        margin: 12px 0;
        border-top: 1px solid #D0CFCF;
    }

    /* Generic row: label + value (Unit Price, Quantity, Subtotal, etc.) */
    .product-form-quote .terms-use .summary-item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.4;
        color: var(--txp-blue); /* blue to make it feel like a headline */
        margin-bottom: 2px;
    }

    .product-form-quote .terms-use .summary-item-total .summary-item-title .total-price {
        margin-left: auto; /* pushes the span to the right edge */
    }

        /* Values on the right (all spans inside summary-item-title) */
        .product-form-quote .terms-use .summary-item-title span {
            margin-left: 8px;
            font-weight: 700;
            color: var(--txp-dark-gray); /* red numbers */
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1, "lnum" 1;
            min-width: 7ch; /* nice column alignment */
            float: none !important;
        }

    /* Subtotal / Discounted Total rows get a bit more emphasis */
    .product-form-quote .terms-use .summary-item.summary-total .summary-item-title {
        font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-weight: 700;
        font-size: 19px;
        line-height: 28px;
        color: var(--txp-blue);
    }

        .product-form-quote .terms-use .summary-item.summary-total .summary-item-title .total-price {
            font-size: 17px;
        }

/* Normalize colon spacing in numbers subtotal row */
.terms-use.total .summary-item-title {
    color: var(--txp-blue); /* blue to make it feel like a headline */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px; /* tighten spacing */
    font-family: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

    .terms-use.total .summary-item-title span {
        font-size: 18px; /* match calculator value size */
        font-weight: 700;
        color: var(--txp-dark-gray); /* red values */
        text-align: right;
        min-width: 7ch;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1, "lnum" 1;
    }

.calculator-form-options .product-form-options ol li {
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    text-align: left;
}

.calculator-form-options .product-form-quote p {
    font-family: Verdana, sans-serif;
    font-weight: 400;
    font-size: 13px;
    text-align: left;
}

.calculators-inner-title {
    font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--txp-dark-gray);
}

#image-resizer-container .form-group.col-12.col-lg-6 {
    display: flex;
    flex-direction: column;
}

#image-resizer-container .form-group.col-12.col-lg-6 .btn {
    margin-top: auto; /* button goes to the bottom within its own column */
}

/* keep labels on one line */
#image-resizer-container .number-textbox label {
    white-space: nowrap;
    text-align: left; /* just in case something was centering text */
}

/* IMAGE RESIZER – make the ruler a single 2-column table that fills its column */

#image-resizer-container .measurement-container {
    max-width: 100%; /* fill the col-lg-4, full width on mobile */
}

/* header + body rows become flex rows, one per line */
#image-resizer-container .measurement-header-container .measurement-header-item,
#image-resizer-container .measurement-body-container .measurement-body-item {
    float: none; /* kill multi-column float layout */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    display: flex;
}

/* show only the first header row (markup has 8 copies for the old grid) */
#image-resizer-container .measurement-header-container .measurement-header-item {
    display: none;
}

    #image-resizer-container .measurement-header-container .measurement-header-item:first-child {
        display: flex;
    }

    /* cells: two equal columns per row */
    #image-resizer-container .measurement-header-container .measurement-header-item div,
    #image-resizer-container .measurement-body-container .measurement-body-item div {
        display: block; /* override inline-block from base styles */
        flex: 0 0 50%; /* two columns */
        text-align: center;
        box-sizing: border-box;
    }

/* “Ruler Details” link row spans full width */
#image-resizer-container .measurement-body-container .measurement-body-item a {
    width: 100%;
}

/* TEAM NUMBERS TAB – keep centered layout */
#team-numbers .calculators-shirt-preview {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* Put the card border on the modal content (tee + swatches) */
#team-numbers #modal-content-numbers {
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden; /* makes radius clean around image & swatches */
}

/* Center the tee frame inside the card */
#team-numbers .tee-preview-frame {
    margin: 0 auto;
}

/* Center swatches and keep them inside the same card */
#team-numbers .clipart-swatches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 8px 8px;
}

/* Title should be its own row, not sharing space */
#team-numbers .team-player-section .title {
    display: block;
    float: none;
    margin-bottom: 12px;
}

/* Grid: take the full width below the title */
#team-numbers #player-number-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr)); /* 2 columns */
    grid-column-gap: 32px;
    grid-row-gap: 12px;
    width: 100%;
    max-width: 100%;
}

/* Each row (label + input) */
#team-numbers .team-player-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #ffc627;
    border-radius: 4px;
    padding: 6px 12px;
    background: #fff;
    box-sizing: border-box;
}

/* Label text */
#team-numbers .team-player-label {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: #1d1d1d;
}

/* Numeric input */
#team-numbers .team-player-entry .player-number {
    width: 60px;
    max-width: 70px;
    margin-left: 12px;
}

/* Buttons row – sits under the grid */
#team-numbers .player-number-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    #team-numbers .player-number-actions .btn {
        margin: 0; /* gap handles spacing */
    }

/* Mobile: single column */
@media (max-width: 768px) {
    #team-numbers #player-number-container {
        grid-template-columns: 1fr; /* stack on mobile */
    }
}

.cal-number-container-padding {
    padding-left: 10%;
    padding-right: 10%;
}

/* TEAM NUMBERS – size cards layout */
#team-numbers .team-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

    /* the size cards that come from OrderOptionSize (they're .check-select) */
    #team-numbers .team-size-grid .check-select {
        flex: 0 0 calc(50% - 8px); /* 2 per row on desktop/tablet */
        max-width: calc(50% - 8px);
    }

/* TEAM NUMBERS – size cards layout */
#league-numbers .team-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

    /* the size cards that come from OrderOptionSize (they're .check-select) */
    #league-numbers .team-size-grid .check-select {
        flex: 0 0 calc(50% - 8px); /* 2 per row on desktop/tablet */
        max-width: calc(50% - 8px);
    }

/* On small screens: 1 per row, full-width and centered */
@media (max-width: 767.98px) {
    #team-numbers .team-size-grid .check-select {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


@media (max-width: 767.98px) {
    #team-numbers .cal-number-container-padding {
        padding-left: 0;
        padding-right: 0;
    }
}

/* TEAM NUMBERS – fix vertical alignment of player rows on mobile */
@media (max-width: 767.98px) {

    /* Make each yellow card a compact flex row, centered vertically */
    #team-numbers .team-player-section .team-player-entry {
        display: flex !important;
        align-items: center !important; /* center label + input vertically */
        justify-content: space-between;
        padding: 8px 16px !important; /* kill the giant built-in padding */
        min-height: 0 !important; /* in case something set a big min-height */
        box-sizing: border-box;
    }

        /* Label: no extra margin pushing things down/up */
        #team-numbers .team-player-section .team-player-entry .team-player-label {
            margin: 0 !important;
            line-height: 1.2;
        }
}

/* TEAM NUMBERS – mobile layout fix for player rows */
@media (max-width: 767.98px) {
    #team-numbers .calculator-form-options .team-player-entry.number-textbox {
        display: flex !important;
        flex-direction: row !important;      /* override column */
        align-items: center !important;       /* vertical centering now works */
        justify-content: space-between;
        padding: 8px 16px !important;        /* smaller, cleaner padding */
        min-height: 0 !important;            /* kill big min-height */
        height: auto !important;
        box-sizing: border-box;
    }

    #team-numbers .calculator-form-options
    .team-player-entry.number-textbox .team-player-label {
        margin: 0 !important;
        line-height: 1.3;
    }

    #league-numbers .calculator-form-options .team-player-entry.number-textbox {
        display: flex !important;
        flex-direction: row !important; /* override column */
        align-items: center !important; /* vertical centering now works */
        justify-content: space-between;
        padding: 8px 16px !important; /* smaller, cleaner padding */
        min-height: 0 !important; /* kill big min-height */
        height: auto !important;
        box-sizing: border-box;
    }

        #league-numbers .calculator-form-options
        .team-player-entry.number-textbox .team-player-label {
            margin: 0 !important;
            line-height: 1.3;
        }
}

/* Range section – stack 3 cards like Figma */
.numbers-page .league-range-section .league-range-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 420px;
    margin: 0 auto;
}

/* reuse number-textbox as the yellow card */
.league-range-grid .number-textbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border: 2px solid var(--txp-yellow);
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

    .league-range-grid .number-textbox label {
        margin: 0;
        font-weight: 600;
    }

/* numeric input uses your qty-input styling */
.league-range-grid .qty-input {
    width: 90px;
    max-width: 90px;
    height: 32px;
    text-align: center;
}

/* League tab – Additional Number Info section: align content to the left */
#league-numbers .product-option.league-range-section {
    display: block; /* kill any flex centering from generic styles */
    align-items: flex-start; /* safety: if display:flex still applied from somewhere */
}

/* Grid under the title: left-aligned column stack */
#league-numbers .league-range-section .league-range-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 420px;
    margin: 8px 0 0 0; /* no auto-centering */
}
/* Kill old absolute-positioning styles from legacy cart code */
.register-inputs.shopping-cart .additional-products a {
    position: static !important;
}

/* Product images */
.register-inputs.shopping-cart .additional-products .product-suggestion-img {
    width: 100%;
    height: 180px; /* adjust to change rectangular shape */
    object-fit: cover; /* crop the edges, fill area */
    object-position: center; /* center crop vertically */
    border-radius: 0;
    display: block;
}


/* Spacing between the items */
.additional-products .col-6.col-md-3 {
    padding: 10px; /* even spacing */
}

/* Title text */
.additional-products .suggestion-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--txp-blue);
    text-align: center;
    margin-top: 8px;
}

.suggestion-link {
    text-decoration: none;
    color: var(--txp-blue); 
}

.suggestion-link:hover {
    text-decoration: none !important;
}

/* Main Order Summary Wrapper Styling (The overall right-side container) */
#fixedquote {
    background-color: #f4f4f4; /* Light Gray Background */
    border: 1px solid #ddd;
    /* --- UPDATED BORDER RADIUS --- */
    border-top-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    /* ----------------------------- */
    padding: 10px 20px; /* Internal spacing */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Optional: subtle shadow */
}

/* ... rest of the CSS from the previous response ... */

/* Style the buttons container to ensure it stays outside the summary box if needed, or adjust */
.terms-use.update.cart {
    margin-bottom: 20px; /* Space between buttons and summary box */
}

/* Style for the Total section inside the summary box */
.terms-use.total {
    padding: 0; /* Remove default padding if present */
    background: transparent; /* Ensure background is transparent to show #fixedquote's color */
    border: none; /* Remove any default border */
}

/* Style for the individual line items in the summary */
.summary-item {
    padding: 5px 0;
}

    /* Style for the total line to make it stand out */
    .summary-item.summary-item-total {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 2px solid #ccc; /* Separator line for the total */
    }

/* Style for the button inside the Order Summary Partial (Keep it blue) */
/* Assuming the 'blue' button style is defined elsewhere, but ensuring the long-link button is visible */
.terms-use.update.cart button.long-link {
    background-color: var(--txp-blue, #005CB9); /* Ensure blue color is used */
    color: white;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    padding: 12px 20px;
    width: 100%; /* Make the button full width */
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}

    .terms-use.update.cart button.long-link:hover {
        background-color: var(--txp-blue-dark, #004991);
    }

.SubtotalCart {
    text-align: center;
    font-size: 2rem; 
    font-weight: 700; 
    padding: 10px 0; 
}

.ShippingTaxCart {
    font-size: 14px;
    font-weight: 400; /* Semi-bold text */
    text-align: center;
    margin-top: 4px;
    margin-bottom:6px;
}

.cart-press .actions a {
    /* Reduce the font size */
    font-size: 12px;
    /* Optional: Make them look more like utility links */
    text-transform: uppercase;
    font-weight: 600;
    color: var(--txp-blue);
}

/* Optional: Adjust the spacing between the links if they appear too far apart */
.cart-press td .actions {
    margin-bottom: 2px;
}

table.cart-press,
.cart-press th,
.cart-press td,
.cart-press tr {
    /* Guaranteed clean look */
    background-color: white !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure padding is generous for a clean list look */
.cart-press th,
.cart-press td {
    padding: 8px 10px !important; /* REDUCED vertical padding to 8px (from 15px) */
    vertical-align: top !important;
}

/* --- 2. THE HEADER SEPARATOR (The Strong Line) --- */

.cart-press thead tr {
    /* This strong, dark line will ALWAYS appear under the header */
    border-bottom: 2px solid #ccc !important;
    transition: none !important; /* Prevent hover from changing header line */
}

/* --- 3. THE ITEM SEPARATORS (The Subtle Lines between items) --- */

/* Apply the 1px line ONLY to rows that are NOT in the <thead> */
/* This ensures the item line rule never touches the header row */
.cart-press > tr:not(:first-child),
.cart-press tr:not(.cart-press thead tr) {
    border-bottom: 1px solid #eee !important;
    transition: background-color 0.15s ease-in-out;
}

/* 🎯 THE CRITICAL FIX: Remove the line from the last row (which is NOT the header) */
/* We use :last-child which correctly targets the final <tr> element */
table.cart-press > tr:last-child {
    border-bottom: none !important;
}

ul ::marker {
    /* Apply the brand red color directly to the bullet point */
    color: var(--txp-red); /* Uses your defined variable */
}

.text-rich p {
    color: var(--txp-dark-gray);
    text-align: left;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15px;
    line-height: 24px;
    padding-bottom:10px;
}

.styles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin: 40px auto 60px;
}

/* Card Container */
.style-card {
    background: #fff;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.style-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: white;          /* softer than #e3e3e3 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e0e0e0;
}

.style-card-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Content bottom half */
.style-card-body {
    padding: 20px;
    flex: 1;
}

.style-card-title {
    font-family: "Ubuntu", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 25px !important;
    color: var(--txp-dark-gray) !important;
    margin-bottom: 8px !important;
}

.style-card-subtitle {
    font-family: "Ubuntu", sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #555 !important;
    margin-bottom: 12px !important;
}

/* description text inside the card */
.style-card .style-card-description,
.style-card .style-card-description p {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: var(--txp-dark-gray);
    margin: 0; /* kill extra p spacing if you want */
}

/* 📱 Responsive Grid */
@media (max-width: 1199px) {
    .styles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

/* wrapper */
.experience-filter {
    position: relative;
    width: 287px; /* Figma */
    font-family: "Raleway", sans-serif;
}

/* yellow header (open state look) */
.experience-filter-toggle {
    width: 100%;
    background: var(--txp-yellow);
    border: 2px solid var(--txp-yellow);
    border-radius: 5px 5px 0 0;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    outline: none;
    margin-bottom: 0; /* kill any bottom margin on the header */
}

/* text "Sort By:" and selected text */
.experience-filter-label,
.experience-filter-value {
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    color: var(--txp-dark-gray);
}

.experience-filter-label {
    margin-right: 4px;
}

/* caret */
.experience-filter-caret svg {
    display: block;
}

/* dropdown panel */
.experience-filter-menu {
    position: absolute;
    top: 100%; /* directly under the header */
    margin-top: -2px; /* overlap the header’s bottom border so there’s no gap */
    left: 0;
    width: 100%;
    background: #fff;
    border: 2px solid var(--txp-yellow);
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: none;
    z-index: 1000;
}

.experience-filter.is-open .experience-filter-menu {
    display: block;
}

.experience-filter-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* each row */
.experience-filter-menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #D0CFCF; /* separators with left/right margin via padding */
}

    .experience-filter-menu li:last-child {
        border-bottom: none;
    }

/* checkbox + text */
.experience-filter-option {
    display: flex;
    align-items: center;
}

/* custom checkbox */
.experience-filter-checkbox {
    width: 15px;
    height: 15px;
    border: 2px solid var(--txp-blue);
    border-radius: 50%;
    margin-right: 8px;
    appearance: none; /* remove default */
    -webkit-appearance: none;
    background: #fff;
    position: relative;
    cursor: pointer;
}

    .experience-filter-checkbox:checked::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        background: var(--txp-blue);
    }

/* option label text */
.experience-filter-text {
    font-family: "Raleway", sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: 14px;
    line-height: 17px;
    color: var(--txp-blue);
}

/* blue count pill on the right */
.experience-filter-count {
    min-width: 31px;
    height: 15px;
    padding: 0 6px;
    border-radius: 5px;
    background: var(--txp-blue);
    color: #fff;
    font-family: "Raleway", sans-serif;
    font-weight: 900; /* Black */
    font-size: 11px;
    line-height: 15px;
    text-align: center;
}

/* optional: change header border when closed */
.experience-filter:not(.is-open) .experience-filter-toggle {
    border-radius: 5px; /* look like a normal closed dropdown */
}

/* Let Bootstrap grid treat inner .txp-item as direct children of .row */
.tag-filter-item {
    display: contents;
}

/* restore vertical spacing between rows of cards in this grid */
.row.txp-gy-3 .txp-item {
    padding-bottom: 3rem; /* tweak to match the old gap (e.g., 1rem, 24px, etc.) */
}

/* Remove black focus ring on the filter header */
.experience-filter-toggle:focus,
.experience-filter-toggle:focus-visible,
.experience-filter-toggle:active {
    outline: none;
    box-shadow: none;
    border-color: var(--txp-yellow); /* keep the yellow border */
}

.experience-filter-caret svg {
    transition: transform 0.2s ease-in-out;
    transform-origin: center;
}

/* rotate when dropdown is open */
.experience-filter.is-open .experience-filter-caret svg {
    transform: rotate(180deg);
}

/*****************************/
/* Clip Art Categories Pages */
/*****************************/
.categories-section .category-container {
    border-radius: 20px 0 20px 0;
    overflow: hidden;
    box-shadow: 0px 0px 0px 0;
}

.category-results .view-artwork {
    border-radius: 20px 0 20px 0;
    box-shadow: 0px 0px 0px 0;
}

.category-results .view-artwork-card {
    background: #e7edf2;
    border-radius: 3px;
    cursor: pointer;
    margin: 5px;
    text-align: center;
    min-width: 180px;
    max-width: 200px;
    padding-top: 15px;
    font-weight: 700;
}

.category-results .category-title {
    color: var(--txp-blue);
}

/*.categories-section .category-container li .subcategory-item.active {
    background-color: var(--txp-blue);
}*/
.categories-section .category-container li .subcategory-item {
    color: var(--txp-blue);
}

.category-results .subcategory-title {
    color: var(--txp-blue);
}

.category-card {
    border-radius: 20px 0 20px 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9d9d9;
}

    .category-card > a.card {
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: inherit;
        padding: 0;
        background: transparent;
        display: block;
    }

    .category-card img {
        display: block; /* removes baseline gap */
        width: 100%;
        height: 250px;
        object-fit: contain; /* or cover, depending on your look */
    }


.pager-btn.disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}

body.error-page .content-grey-wrapper.error-page {
    padding: 48px 0;
}

body.error-page .error-card {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 24px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
    max-width: 980px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    body.error-page .error-card {
        grid-template-columns: 1fr;
    }

    body.error-page .error-illustration {
        display: none;
    }
}

body.error-page .error-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 102, 204, .08);
    color: #0b5ed7;
}

body.error-page .error-title {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

body.error-page .error-code {
    font-size: 56px;
    line-height: 1;
    font-weight: 800;
    color: #0f172a;
}

body.error-page .error-divider {
    color: rgba(0,0,0,.25);
}

body.error-page .error-message {
    font-size: 18px;
    font-weight: 600;
    color: rgba(0,0,0,.65);
}

body.error-page .error-help {
    margin-top: 10px;
    color: rgba(0,0,0,.62);
    max-width: 60ch;
}

body.error-page .error-search {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

body.error-page .error-search-input {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.14);
    padding: 0 14px;
}

    body.error-page .error-search-input:focus {
        outline: none;
        border-color: rgba(0,102,204,.45);
        box-shadow: 0 0 0 4px rgba(0,102,204,.12);
    }

body.error-page .error-search-btn {
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--txp-blue);
    color: #fff;
    font-weight: 700;
}

body.error-page .error-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body.error-page .error-links {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14px;
}

    body.error-page .error-links a {
        color: rgba(0,0,0,.62);
        text-decoration: none;
    }

        body.error-page .error-links a:hover {
            text-decoration: underline;
        }

body.error-page .error-illustration {
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0,102,204,.10), rgba(0,102,204,.03));
}

body.error-page .error-mark {
    width: 140px;
    height: auto;
    opacity: .55;
    fill: #0b5ed7;
}
/* Card outer shape */
.vinyl-card {
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden; /* lets border + media corners clip cleanly */
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Image area: clips + has its own border that follows radius */
.vinyl-card-media {
    border-top-right-radius: 20px; /* top corners for the media box */
    overflow: hidden;
    margin: 10px; /* gives “padding” between border and card edge */
    background: #fff;
}

    /* The link becomes the flex box that centers the image */
    .vinyl-card-media > a {
        display: flex;
        align-items: center; /* vertical center */
        justify-content: center; /* horizontal center */
        padding: 12px; /* (1) padding inside */
        min-height: 240px; /* (2) equal media height across cards */
    }

    /* Keep proportions, no crop */
    .vinyl-card-media img.custom-card-img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        display: block;
    }

/* Move Chat + ReCAPTCHA on scroll bottom see js in _layout*/
.lift-chat {
    bottom: 55px !important;
}

.unit-price-disclaimer
{
    padding:0px 0px 0px 10px !important;
    text-align:left !important;
    font-style:italic;
}

.cart-press .cart-type-meta {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--txp-blue-dark);
}

    .cart-press .cart-type-meta b {
        color: #374151;
        font-weight: 800;
    }

.cart-item-description a {
    color: var(--txp-blue);
    text-decoration: none;
    font-weight: 500;
}

    .cart-item-description a:hover {
        text-decoration: underline;
        color: var(--txp-blue);
    }

    .cart-item-description a:visited {
        color: var(--txp-blue);
    }

    .cart-item-description a:focus {
        outline: none;
        text-decoration: underline;
        color: var(--txp-blue);
    }
.cart-meta {
    color: slategray; /* same tone as cart-color-item */
    font-weight: 500 !important;
    display: inline !important;
}

.cart-meta-row {
    margin-top: 2px;
    font-size: smaller; /* keeps same scale as cart-color-item */
    line-height: 1.25;
    color: slategray;
}

.cart-meta-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-right: 4px;
    font-weight: 800;
    display: inline !important;
}

.cart-meta-value {
    color: #374151;
    display: inline !important;
}

.cart-meta-list {
    margin: 2px 0 0 0;
    padding-left: 16px;
    color: slategray;
    font-size: smaller;
}

    .cart-meta-list li {
        margin: 1px 0;
    }

.cart-meta,
.cart-meta * {
    white-space: nowrap;
}

.cart-press thead th {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--txp-dark-gray); /* optional: slightly softer than pure black */
    height: 30px !important;
    
}

/* Bottom bulk-action buttons -> look like right-side action links */
.button-selected .btn.grey {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-right: 18px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--txp-blue) !important;
    cursor: pointer;
}

    /* Icon spacing + match link color */
    .button-selected .btn.grey i {
        margin-right: 6px;
        color: var(--txp-blue) !important;
    }

    /* Hover/focus like a link */
    .button-selected .btn.grey:hover,
    .button-selected .btn.grey:focus {
        text-decoration: underline;
        outline: none;
    }

.cart-press .cart-thumb {
    width: 90px;
    height: 90px;
    border-radius: 12px 0 12px 0;
    background: #f3f4f6;
    border: 1.5px solid rgba(0,0,0,.08);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .cart-press .cart-thumb > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

/* =========================
   ORDERS – FILTER BAR LAYOUT
   ========================= */
/* Row that holds both cards */
.order-search.mb-3.d-flex {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
}

.order-search .filter-box {
    display: flex;
    align-items: flex-start;
}

/* ----- VIEW BY CARD ----- */
.order-search .order-view-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

    /* Equal-width toggle buttons */
    .order-search .order-view-toggle .btn {
        flex: 0 0 150px; /* fixed, equal width */
        white-space: nowrap;
        text-align: center;
        padding: 0.35rem 0.75rem;
    }

    /* Info icon stays inside, doesn’t stretch row */
    .order-search .order-view-toggle .shipgroup-tooltip {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

/* Lock first card width so Search card expands */
.order-search .filter-box:first-child {
    flex: 0 0 auto;
    min-width: 355px;
}

/* ----- SEARCH CARD ----- */
.order-search .search-card {
    flex: 1 1 auto;
    min-width: 0; /* avoid overflow when tight */
}

    .order-search .search-card > .d-flex {
        width: 100%;
    }

/* Row with From / To / Search pills */
.order-search .search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

    /* Date inputs – fixed width, no grow */
    .order-search .search-row #date-picker-from,
    .order-search .search-row #date-picker-to {
        flex: 0 0 115px;
    }

    .order-search .search-row .filter-pill-search {
        display: flex;
        align-items: center;
        padding: 2px 8px;
        width: auto !important; /* override global pill width */
        max-width: none !important;
        gap: 8px;
    }

        /* Last pill (Search label + input + icon) takes remaining width */
        .order-search .search-row .filter-pill-search:last-child {
            flex: 1 1 auto;
            min-width: 0;
        }

            /* No extra gap between "Search:" and the input */
            .order-search .search-row .filter-pill-search:last-child .filter-label {
                margin-right: 0;
            }

            /* Main search input flexes to fill remaining space in the pill */
            .order-search .search-row .filter-pill-search:last-child .search-pill-input {
                flex: 1 1 auto;
                min-width: 120px;
            }

            /* Magnifier right of the input */
            .order-search .search-row .filter-pill-search:last-child .filter-icon-btn {
                margin-left: 6px;
            }

#searchText {
    width: 100%;
}

.order-search .search-card #searchText {
    width: auto;
    flex: 1 1 auto;
}

/* Remove extra left padding search input */
.order-search .search-pill-input#searchText {
    padding-left: 0 !important;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 575.98px) {
    /* View By buttons – you already had this */
    .order-search .order-view-toggle {
        flex-wrap: wrap;
        gap: 6px;
    }

        .order-search .order-view-toggle .btn {
            flex: 1 0 100%; /* full-width buttons, stacked */
            width: 100%;
        }

    /* Stack pills vertically instead of side-by-side */
    .order-search .search-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px; /* a little breathing room between rows */
    }

        /* Each pill takes the full card width */
        .order-search .search-row .filter-pill-search {
            width: 100% !important;
            padding: 4px 8px;
        }

        /* Let the date inputs grow full-width on mobile */
        .order-search .search-row #date-picker-from,
        .order-search .search-row #date-picker-to {
            flex: 1 1 auto;
            width: 100%;
        }

        /* Main Search pill still flexes, but fills the row */
        .order-search .search-row .filter-pill-search:last-child {
            flex: 1 1 auto;
            min-width: 0;
        }

            .order-search .search-row .filter-pill-search:last-child .search-pill-input {
                width: 100%;
            }
}


@media (max-width: 991.98px) {
    .order-search.mb-3.d-flex {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .order-search .filter-box {
        min-width: 100% !important;
    }
}


@media (min-width: 992px) and (max-width: 1210px) {
    .order-search.mb-3.d-flex {
        flex-wrap: wrap;
        justify-content: flex-start; /* or flex-end if you want it right-aligned */
        gap: 12px;
    }

        /* When wrapping, each card should be allowed to take a full row */
        .order-search.mb-3.d-flex > .filter-box {
            flex: 1 1 100%;
            min-width: 0; /* don't force overflow */
        }

            /* keep your 'View By' card from getting huge if you want */
            .order-search.mb-3.d-flex > .filter-box:first-child {
                flex: 0 0 auto;
                min-width: 355px; /* keep your design */
            }

    /* force Search card to drop to next line and span full width */
    .order-search .search-card {
        flex: 1 1 100%;
        min-width: 355px;
    }
}



/* Invoice */
/*body.dealer.dealer-invoices .filter-pill-search {
    max-width: 170px;
    margin-bottom: 6px;
}


body.dealer.dealer-invoices .gap-2 > * {
    margin-right: .5rem;
}
    body.dealer.dealer-invoices .gap-2 > *:last-child {
        margin-right: 0;
    }*/

/* Base layout – desktop/tablet */
/*body.dealer.dealer-invoices .dealer-invoices-filter {
    display: flex;
    align-items: center;
}

body.dealer.dealer-invoices .filter-date-title {
    font-weight: bold;
    margin-right: 8px;
    white-space: nowrap;
}

body.dealer.dealer-invoices .dealer-invoices-filter-inputs {
    display: flex;
    align-items: center;
}

    body.dealer.dealer-invoices .dealer-invoices-filter-inputs > * {
        margin-right: .5rem;
    }

        body.dealer.dealer-invoices .dealer-invoices-filter-inputs > *:last-child {
            margin-right: 0;
        }*/

/* Mobile: stack label above inputs */
/*@media (max-width: 575.98px) {
    body.dealer.dealer-invoices .dealer-invoices-filter {
        flex-direction: column;
        align-items: flex-start;
    }

    body.dealer.dealer-invoices .dealer-invoices-filter-inputs {
        margin-top: 4px;*/ /* little padding between label and inputs */
    /*}
}*/

/* ============================
   INVOICE PAGE – Filter bar
   ============================ */

/* Shrink the date pills a bit */
body.dealer.dealer-invoices .filter-pill-search {
    max-width: 180px;
    margin-bottom: 6px;
}

    body.dealer.dealer-invoices .filter-pill-search input.search-pill-input {
        width: 160px;
        max-width: 160px;
        min-width: 110px;
    }


/* Base layout – desktop/tablet */
body.dealer.dealer-invoices .dealer-invoices-filter {
    display: flex;
    align-items: center;
}

body.dealer.dealer-invoices .filter-date-title {
    font-weight: bold;
    margin-right: 8px;
    white-space: nowrap;
}

body.dealer.dealer-invoices .dealer-invoices-filter-inputs {
    display: flex;
    align-items: center;
}

    body.dealer.dealer-invoices .dealer-invoices-filter-inputs > * {
        margin-right: .5rem;
    }

        body.dealer.dealer-invoices .dealer-invoices-filter-inputs > *:last-child {
            margin-right: 0;
        }

/* Mobile: stack label above inputs */
@media (max-width: 575.98px) {
    body.dealer.dealer-invoices .col-md.d-flex.justify-content-end.align-items-center {
        justify-content: flex-start !important;
    }

    body.dealer.dealer-invoices .dealer-invoices-filter {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        text-align: left;
    }

    body.dealer.dealer-invoices .dealer-invoices-filter-inputs {
        margin-top: 4px; /* little padding between label and inputs */
        justify-content: flex-start;
        width: 100%;
    }
}

/* Footer Fix on Mobile */
/* Default / Desktop */
.footer-wrapper {
    display: flex;
    flex-wrap: nowrap; /* keep all 4 on one row */
    justify-content: flex-start; /* LEFT justify */
    align-items: flex-start;
    max-width: 1440px;
    margin: 0 auto;
}

    .footer-wrapper .footer-links {
        flex: 0 0 25%;
        max-width: 25%;
        box-sizing: border-box;
    }

@media (max-width: 575.98px) {
    .footer-wrapper .footer-links {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: center;
    }
}

/* =========================
   KENTICO RICHTEXT TABLES
   ========================= */

/* Kentico RichText tables (content pages) */
.text-rich table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

    /* First row = "header" row (your HTML uses <td> not <th>) */
    .text-rich table tbody tr:first-child td {
        background: var(--txp-sky);
        color: var(--txp-blue-dark);
        font-weight: 500;
    }

    /* Cell spacing + borders */
    .text-rich table td {
        padding: 10px 14px;
        line-height: 1.35;
        vertical-align: middle;
        border: 1px solid #d9d9d9;
    }

    /* Optional: keep those header values centered */
    .text-rich table tbody tr:first-child td:not(:first-child) {
        text-align: center;
        white-space: nowrap;
    }

    /* Optional: align numeric columns center, keep first column left */
    .text-rich table tbody tr td:first-child {
        text-align: left;
        font-weight: 500;
    }

    .text-rich table tbody tr td:not(:first-child) {
        text-align: center;
    }

/* ==================================================
   PRODUCT CATEGORY TILES - TOP RIGHT BADGES (Secondary)
   ================================================== */

.txp-tile-badges {
    position: absolute;
    top: 20px; /* tweak: 20px / 30px */
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* right align */
    gap: 8px;
    z-index: 5;
}

/* shared "badge button" style */
.txp-badge {
    background: var(--txp-blue);
    height: 27px;
    line-height: 27px;
    padding: 0 15px 0 12px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    text-align: right;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.txp-badge-yellow {
    background: var(--txp-yellow);
    color:var(--txp-blue);
}

/* Label (top) typically larger */
.txp-badge--label {
    min-width: 110px;
    color: var(--txp-yellow);
    background: var(--txp-blue);
}

/* Price badges (smaller) */
.txp-badge--price {
    min-width: 53px;
}

/* Gray "struck" badge defaults (can stay fixed per design) */
.txp-badge--strike {
    background: #ECECEC;
    color: #7B7B7B;
}

/* Yellow price badge defaults */
.txp-badge--sale {
    background: var(--txp-yellow);
    color: var(--txp-blue);
}

/* Red line crossing the struck text */
.txp-strike {
    position: relative;
    display: inline-block;
}

    /* Use a real red line (more like your figma spec than text-decoration) */
    .txp-strike::after {
        content: "";
        position: absolute;
        left: -2px;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 2px solid #FF4E4E;
        pointer-events: none;
    }

/* 1) Let badges size to content (no forced width) */
.txp-badge--label,
.txp-badge--price {
    min-width: 0 !important; /* overrides previous min-width */
    width: auto !important;
}

/* 2) Center text in the LABEL badge */
.txp-badge--label {
    justify-content: center !important;
    text-align: center !important;
    padding-left: 14px; /* optional: keep balanced */
    padding-right: 14px;
}


/* =========================================================
   CHECKOUT – CLEAN + MINIMAL (only what you need)
   ========================================================= */

body.checkout .content-wrap {
    background: #f6f7f9;
}

    /* Tighten page title spacing */
    body.checkout .content-cart-container > h1 {
        margin: 6px 0 10px;
        line-height: 1.15;
    }

    /* If warnings sit under the H1, keep them tight */
    body.checkout .content-cart-container > .alert {
        margin: 0 0 10px;
    }

/* Reduce the gap before the first card */
body.checkout .register-inputs.shopping-cart {
    padding: 8px 0 28px;
}

/* Headings */
body.checkout h4 {
    color: var(--txp-blue-dark);
    margin-bottom:20px;
}

/* Shared "card" surface */
body.checkout .checkout-table,
body.checkout .alert-box.ok,
body.checkout .alert-box.ok.purchase {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,.05);
}

/* Card padding */
body.checkout .checkout-table {
    padding: 16px;
}

    /* Remove list bullets inside cards */
    body.checkout .checkout-table ul,
    body.checkout .shipping-address-container,
    body.checkout ul.checkout-items.payment {
        list-style: none;
        padding: 0;
        margin: 0;
    }
/* =========================================================
   CREDIT CARD DROPDOWN – FINAL POLISH (no markup/id changes)
   ========================================================= */

/* Dropdown list hidden by default */
body.checkout #dropDownCreditCards ul.content {
    display: none !important;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0,0,0,.14);
    padding: 6px;
    margin-top: 8px;
    z-index: 50;
}

body.checkout #dropDownCreditCards #cc-drop:checked ~ ul.content {
    display: block !important;
}

/* Make the CC payment row align cleanly */
body.checkout ul.checkout-items.payment li.credit-card {
    display: flex;
    align-items: center; /* keeps dropdown aligned with radio row */
    gap: 16px;
}

/* Push dropdown to the right, keep it centered relative to the row */
body.checkout #dropDownCreditCards {
    margin-left: auto;
    align-self: center;
    position: relative;
    top: -1px; /* tiny nudge up (fixes “slightly lower”) */
}

    /* Selected pill */
    body.checkout #dropDownCreditCards #active-cc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        min-height: 42px;
        padding: 10px 44px 10px 12px;
        background: #fff;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 12px;
        position: relative;
    }

        /* Force the contents inside the pill to vertically center (Visa + text) */
        body.checkout #dropDownCreditCards #active-cc .current-selection {
            display: flex;
            align-items: center;
            gap: 8px;
            line-height: 1.1;
        }

    /* Focus ring when open */
    body.checkout #dropDownCreditCards .cc-drop:checked ~ #active-cc {
        border-color: rgba(0,0,0,.12);
        box-shadow: 0 0 0 3px rgba(11,98,180,.12);
    }

    /* Caret handling (if you have an icon element, pin it; otherwise draw one) */
    body.checkout #dropDownCreditCards #active-cc .caret,
    body.checkout #dropDownCreditCards #active-cc .chevron,
    body.checkout #dropDownCreditCards #active-cc .fa-caret-down,
    body.checkout #dropDownCreditCards #active-cc .fa-chevron-down {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        pointer-events: none;
    }

    body.checkout #dropDownCreditCards #active-cc:not(:has(.caret, .chevron, .fa-caret-down, .fa-chevron-down))::after {
        content: "";
        position: absolute;
        right: 16px;
        top: 50%;
        width: 10px;
        height: 10px;
        border-right: 2px solid rgba(0,0,0,.55);
        border-bottom: 2px solid rgba(0,0,0,.55);
        transform: translateY(-60%) rotate(45deg);
        pointer-events: none;
    }

    /* Dropdown rows: make each row flex so the Visa icon centers perfectly */
    body.checkout #dropDownCreditCards ul.content li {
        border: 0 !important;
        margin: 0 !important;
        padding: 10px 10px !important;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center; /* fixes Visa icon centering in the list */
        gap: 8px;
        line-height: 1.1;
    }

        body.checkout #dropDownCreditCards ul.content li:hover {
            background: #f3f7ff;
        }

        body.checkout #dropDownCreditCards ul.content li.selected {
            background: #eaf2ff;
            font-weight: 800;
        }

        /* Card logo: remove baseline quirks (NO translateY) */
        body.checkout #dropDownCreditCards #active-cc img,
        body.checkout #dropDownCreditCards ul.content li img {
            height: 18px;
            width: auto;
            margin: 0; /* gap handled by flex */
            display: block; /* removes baseline misalignment */
            flex: 0 0 auto;
        }

/* "Add New Credit Card" — align under the radio/icon, not far left */
body.checkout ul.checkout-items.payment li.new-creditcard-button {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-left: 28px; /* aligns under radio + icon area */
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--txp-blue) !important;
    background: transparent;
    border: 0;
    cursor: pointer;
}

    body.checkout ul.checkout-items.payment li.new-creditcard-button:hover {
        text-decoration: underline;
    }

    body.checkout ul.checkout-items.payment li.new-creditcard-button::before {
        content: none !important;
    }

/* Mobile: let it stack cleanly if it can’t fit on one row */
@media (max-width: 640px) {
    body.checkout ul.checkout-items.payment li.credit-card {
        flex-wrap: wrap;
        gap: 10px;
    }

    body.checkout #dropDownCreditCards {
        width: 100%;
        margin-left: 0;
        top: 0;
    }

        body.checkout #dropDownCreditCards #active-cc {
            width: 100%;
        }
}

/* =========================================================
   FIX: opening the dropdown should NOT change row height
   ========================================================= */

/* Anchor for the absolute dropdown menu */
body.checkout #dropDownCreditCards {
    position: relative;
}

    /* Dropdown panel should overlay (not push layout down) */
    body.checkout #dropDownCreditCards ul.content {
        position: absolute;
        top: calc(100% + 8px); /* sits under the pill */
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0; /* important: since we're using top now */
        z-index: 999;
    }

/* Safety: keep the row looking normal even if something else forces centering */
body.checkout ul.checkout-items.payment li.credit-card {
    align-items: center; /* keep your original */
}

/* Optional: on small screens, keep the menu from going off-screen */
@media (max-width: 768px) {
    body.checkout #dropDownCreditCards ul.content {
        left: 0;
        right: auto;
        min-width: 260px;
        width: 100%;
    }
}


/* ===========================
   SHIPPING ADDRESS – NEW LOOK
   =========================== */

body.checkout .shipping-address-container {
    list-style: none;
    padding: 0;
    margin: 0;
}

    /* each address row */
    body.checkout .shipping-address-container > li.checkout-items.shipping-address {
        background: #fff;
        border: 1px solid rgba(0,0,0,.10);
        border-radius: 12px;
        padding: 14px 16px;
        margin: 0 0 12px 0;
        transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
    }

        /* hover */
        body.checkout .shipping-address-container > li.checkout-items.shipping-address:hover {
            border-color: rgba(0,0,0,.14);
            box-shadow: 0 10px 24px rgba(0,0,0,.06);
        }

        /* selected/active row */
        body.checkout .shipping-address-container > li.checkout-items.shipping-address.active {
            border-color: rgba(11, 98, 180, .28);
            box-shadow: 0 0 0 3px rgba(11, 98, 180, .10);
        }

    /* radio alignment */
    body.checkout .shipping-address-container .action-links-billing {
        display: inline-flex;
        align-items: flex-start;
        margin-right: 10px;
    }

    /* tighten typography a touch */
    body.checkout .shipping-address-container .contact-name {
        font-weight: 800;
    }

    body.checkout .shipping-address-container .delete-address-button {
        font-weight: 700;
        text-decoration: underline;
    }

    /* "Add New Shipping Address" as a clean link */
    body.checkout .shipping-address-container > li.new-shipping-address.link-row {
        background: transparent;
        border: 0;
        padding: 0;
        margin: 6px 0 0;
    }

body.checkout a.add-shipping-link {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--txp-blue) !important;
    text-decoration: none;
    cursor: pointer;
}

    body.checkout a.add-shipping-link:hover {
        text-decoration: underline;
    }

/* =========================================
   SHIPPING ADDRESS – MINIMAL CLEANUP
   ========================================= */

body.checkout ul.shipping-address-container > li.checkout-items.shipping-address div[style*="margin-left:23px"] {
    position: absolute;
    right: 18px;
    top: 16px;
    margin: 0 !important;
}

/* Give the content room so it doesn't collide with Delete */
body.checkout ul.shipping-address-container > li.checkout-items.shipping-address {
    padding-right: 140px; /* adjust if your link is longer */
}

/* Remove the odd container border/background */
body.checkout ul.shipping-address-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

    /* Make each address row a clean white card */
    body.checkout ul.shipping-address-container > li.checkout-items.shipping-address {
        background: #fff;
        border: 1px solid rgba(0,0,0,.10);
        border-radius: 14px;
        padding: 16px 18px 16px 54px; /* left padding reserves space for radio */
        margin: 0 0 14px 0;
        position: relative;
    }

        /* Active row (keep subtle) */
        body.checkout ul.shipping-address-container > li.checkout-items.shipping-address.active {
            border-color: rgba(11, 98, 180, .28);
            box-shadow: 0 0 0 3px rgba(11, 98, 180, .10);
        }

        /* Put the radio in the left “gutter” reliably */
        body.checkout ul.shipping-address-container > li.checkout-items.shipping-address .action-links-billing {
            position: absolute;
            left: 18px;
            top: 18px;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Neutralize the inline margin-left:23px wrapper around Delete */
        body.checkout ul.shipping-address-container > li.checkout-items.shipping-address div[style*="margin-left:23px"] {
            margin-left: 0 !important;
        }

    /* Hide Delete Address for PRIMARY shipping address */
    body.checkout
    ul.shipping-address-container
    li.checkout-items.shipping-address.default-address
    .delete-address-button {
        display: none !important;
    }

/* ============================
   CHECKOUT ONLY – Right Summary
   (Override #fixedquote safely)
   ============================ */

body.checkout #fixedquote {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.06) !important;
    /* match left-side cards */
    padding: 18px 18px !important;
    /* remove the weird “2 rounded corners” look */
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}

/* optional: if the wrapper has extra spacing/behavior you don’t want */
body.checkout .terms-use-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}



    /* ==============================
   RIGHT SIDEBAR CARD (CHECKOUT VIEW ONLY)
   Note: #fixedquote exists on cart too, so we scope hard.
   ============================== */

    body.checkout .content-container.content-cart-container #fixedquote {
        background: #fff !important;
        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 30px rgba(0,0,0,.06) !important;
        padding: 18px !important;
    }

    /* ==============================
   GREEN (#26A65B) -> TXP BLUE (VIEW ONLY)
   Scope to checkout content so header icons won't change.
   ============================== */

    /* payment method icon when checked */
    body.checkout .content-container.content-cart-container
    .checkout-table .checkout-items li input.select-payment-method:checked ~ label .fa {
        color: #0657A8 !important;
    }

    /* any green icons inside the checkout view content only */
    body.checkout .content-container.content-cart-container .checkout-table .fa,
    body.checkout .content-container.content-cart-container .register-inputs .fa {
        color: #0657A8 !important;
    }

    /* any green "success" buttons inside view only */
    body.checkout .content-container.content-cart-container .btn-success,
    body.checkout .content-container.content-cart-container button.btn-success {
        background: #0657A8 !important;
        border-color: #0657A8 !important;
    }

        body.checkout .content-container.content-cart-container .btn-success:hover,
        body.checkout .content-container.content-cart-container button.btn-success:hover {
            filter: brightness(.95);
        }


    /* =========================================================
   CHECKOUT VIEW ONLY – force green actions to TXP blue
   Uses --txp-blue variable
   Scoped so header/nav is NOT affected
   ========================================================= */

    body.checkout .content-container.content-cart-container button#apply-promo-code,
    body.checkout .content-container.content-cart-container #promo-code-div button,
    body.checkout .content-container.content-cart-container button#get-verified,
    body.checkout .content-container.content-cart-container a#get-verified,
    body.checkout .content-container.content-cart-container button.change-primary-billing,
    body.checkout .content-container.content-cart-container button.change-primary-shipping,
    body.checkout .content-container.content-cart-container button[type="submit"] {
        background: var(--txp-blue) !important;
        border-color: var(--txp-blue) !important;
        color: #fff !important;
    }

        /* Hover / active */
        body.checkout .content-container.content-cart-container button#apply-promo-code:hover,
        body.checkout .content-container.content-cart-container #promo-code-div button:hover,
        body.checkout .content-container.content-cart-container button#get-verified:hover,
        body.checkout .content-container.content-cart-container a#get-verified:hover,
        body.checkout .content-container.content-cart-container button.change-primary-billing:hover,
        body.checkout .content-container.content-cart-container button.change-primary-shipping:hover,
        body.checkout .content-container.content-cart-container button[type="submit"]:hover {
            filter: brightness(0.95);
        }

        /* Focus ring */
        body.checkout .content-container.content-cart-container button#apply-promo-code:focus,
        body.checkout .content-container.content-cart-container #promo-code-div button:focus,
        body.checkout .content-container.content-cart-container button#get-verified:focus,
        body.checkout .content-container.content-cart-container button[type="submit"]:focus {
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08), 0 0 0 6px rgba(6, 87, 168, .18) !important;
        }
    /* =========================================================
   CHECKOUT ONLY – OVERRIDE legacy green buttons to TXP blue
   (does NOT affect header, cart, or global buttons)
   ========================================================= */

    body.checkout .content-container.content-cart-container .green-button,
    body.checkout .content-container.content-cart-container button.green-button,
    body.checkout .content-container.content-cart-container .green-button:hover,
    body.checkout .content-container.content-cart-container .green-button:focus {
        background-color: var(--txp-blue) !important;
        border-color: var(--txp-blue) !important;
        color: #fff !important;
    }

        /* Normalize hover/active state */
        body.checkout .content-container.content-cart-container .green-button:hover {
            filter: brightness(0.95);
        }

    /* Remove any legacy green shadows */
    body.checkout .content-container.content-cart-container .green-button {
        box-shadow: none !important;
    }

@media (min-width: 1800px) {

    /* Force the row to bottom-align its columns */
    .dtf-features-row {
        align-items: flex-end !important;
    }

        /* Also force JUST the image column to bottom-align (in case row gets overridden elsewhere) */
        .dtf-features-row .prod-features-pic {
            align-self: flex-end !important;
            display: flex !important;
        }

            /* Push the image to the bottom of that flex column */
            .dtf-features-row .prod-features-pic .features-image {
                margin-top: auto !important;
                display: block;
            }

        /* your alignment rules */
        .dtf-features-row {
            align-items: flex-end !important;
        }

            .dtf-features-row .prod-features-pic {
                align-self: flex-end !important;
                display: flex !important;
            }

                .dtf-features-row .prod-features-pic .features-image {
                    margin-top: auto !important;
                    display: block;
                }

            /* kill the extra “invisible” bottom space under the last button */
            .dtf-features-row .feature-tabs {
                padding-bottom: 0 !important;
                margin-bottom: 0 !important;
            }

                .dtf-features-row .feature-tabs > .col-12:last-child {
                    padding-bottom: 0 !important;
                    margin-bottom: 0 !important;
                }

                    .dtf-features-row .feature-tabs > .col-12:last-child .page-button {
                        margin-bottom: 0 !important;
                    }
}

/* Only between back-to-back sections */
.product-page .ev-two-col + .ev-two-col {
    position: relative;
}

    .product-page .ev-two-col + .ev-two-col::before {
        content: "";
        display: block;
        height: 3px;
        background-color: lightgray;
        /* Match col-md-12 + hr margin */
        margin-left: calc(1rem - 30px);
        margin-right: calc(1rem - 30px);
        margin-top: 0;
    }

    .product-page .ev-two-col + .ev-two-col::before {
        margin-bottom: 4rem; /* optional: gives breathing room below line too */
    }

/* mimic mt-lg-7 (only on lg+) */
@media (min-width: 992px) {
    .product-page .ev-two-col + .ev-two-col::before {
        margin-top: 4rem; /* tune to match mt-lg-7 */
    }
}

.ev-two-col.p-5 + .ev-two-col.p-5 {
    padding-top: 0 !important;
}

/* Center top event header only */
.card.event .title,
.card.event .location {
    text-align: center !important;
}

/* Center icon + text nicely on the location line */
.card.event .location {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* For iconwithtext display template or manual code on hawk page: */
.hero-features .items-format {
    color: #fff; /* hero features: white */
}

.learn-more-section-content .items-format {
    color: var(--txp-dark-gray); /* learn more section: dark */
}

/* Styling for the Careers Page Iframe */

.jobs-card-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin: 40px 0;
}


.jobs-card-header {
    height: 8px;
    background: var(--txp-blue);
    width: 100%;
}

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


    .jobs-card-body iframe {
        border: none !important;
        display: block;
    }


        .jobs-card-body iframe::-webkit-scrollbar {
            width: 6px;
        }

        .jobs-card-body iframe::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 10px;
        }

/* END Careers Page Ifram styling */

/* Resize by percentage - right align the Calculate button */
#image-resizer-container #resize-percentage {
    margin-left: auto !important;

}

/* MOBILE: hide the background tiles behind the Subscribe card (no layout change) */
@media (max-width: 768px) {
    .subscribe-embed {
        position: relative;
        z-index: 5; 
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 0 0 15px #fff;
    }
}

/* Needed for wrapping issue example: Add Credit Card Modal - Credit Card Number text */
.new-modal-container > input[type='checkbox'].active ~ .modal-content .inside-form label, .new-modal-container > input[type='checkbox']:checked ~ .modal-content .inside-form label {
    font-weight: normal;
    float: left;
    width: 180px;
}

/* Align checkbox and text horizontally */
._row._checkbox-radio {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Keeps checkbox and text centered vertically */
    gap: 8px !important; /* Adds a clean space between the box and text */
    margin-top: 5px !important;
}

    /* Ensure the checkbox doesn't expand to full width */
    ._row._checkbox-radio input[type="checkbox"] {
        margin: 0 !important;
        width: 18px !important; 
        height: 18px !important;
        cursor: pointer;
    }

    /* Fix the label container */
    ._row._checkbox-radio span,
    ._row._checkbox-radio label {
        display: inline-block !important;
        margin: 0 !important;
        cursor: pointer;
        line-height: 1 !important;
    }