:root {
    --bs-primary-rgb: 0, 51, 102;
    --bs-secondary-rgb: 153, 0, 51;
    --primary: #003366;
    --secondary: #990033;
    --moss-green: #999966;
    --moss-green-100: #F5F5F0;
    --bs-body-color: #555555;
    --bs-box-shadow: 0px 0px 4px 0px #00000040;
    --sbw: 500px;
    --sbw-mini: 106px;
    --bs-breadcrumb-item-active-color: #990033;
    --bs-link-color: #990033;
    --bs-btn-hover-color: #003366;
}
/* common css */
html {
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #FAFAFA;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

.fs-10px {
    font-size: 0.625rem;
}

.fs-12px {
    font-size: 0.75rem;
}

.fs-14px {
    font-size: 0.875rem;
}

.fs-28px {
    font-size: calc(1.25rem + 0.4vw);
}

a {
    text-decoration: none;
    color: var(--secondary);
    transition: color 0.3s ease;
}

    a:hover {
        color: var(--primary);
    }

.text-hover-secondary:hover {
    color: var(--secondary) !important;
}

.bg-mos-green-100 {
    background-color: var(--moss-green-100);
}

.text-gardient-style-1 {
    background: radial-gradient(50% 50% at 50% 50%, #0A1F62 0%, #990033 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.shadow-bottom {
    box-shadow: 0px 4px 15px 0px #00000033;
}

.border-top-gardient::before {
    content: "";
    width: 100%;
    position: absolute;
    top: -5px;
    border-image-source: linear-gradient(to right, #FF0000 0%, #FF9500 100%);
    border-top: 5px solid;
    border-image-slice: 1;
    left: 0;
}

.accordion-button:focus { box-shadow: none;}

.btn {
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s ease-in-out;
    padding: 0.625rem;
}

    .btn:first-child:active {
        background-color: transparent;
    }

.btn-primary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--primary);
        color: rgba(var(--bs-white-rgb));
        border-color: var(--primary);
    }

.btn-link {
    text-decoration: none;
}

.btn-outline-primary {
    border-color: var(--secondary) !important;
    color: var(--secondary) !important;
}

    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
        background-color: var(--secondary) !important;
        border: 1px solid rgba(var(--bs-white-rgb)) !important;
        color: rgba(var(--bs-white-rgb)) !important;
    }

.btn.btn-outline-primary.btn-sm {
    background-color: var(--secondary) !important;
    border: 1px solid rgba(var(--bs-white-rgb)) !important;
    color: rgba(var(--bs-white-rgb)) !important;
}

    .btn.btn-outline-primary.btn-sm:hover,
    .btn.btn-outline-primary.btn-sm:focus,
    .btn.btn-outline-primary.btn-sm:active {
        background-color: rgba(var(--bs-white-rgb)) !important;
        border: 1px solid var(--secondary) !important;
        color: var(--secondary) !important;
    }

.btn.btn-sm {
    font-size: 0.875rem;
}

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

label.required::after {
    content: " *";
    color: red;
    font-weight: bold;
}

.table > :not(caption) > * > * {
    padding: 1rem;
}

.table thead tr th:first-child, .table tbody tr td:first-child {
    padding-left: 0;
}

.table thead tr th:last-child, .table tbody tr td:last-child {
    padding-right: 0;
}

th {
    text-transform: uppercase;
}

.w-h-16px {
    width: 16px;
    height: 16px;
}

.w-h-70px {
    width: 70px;
    height: 70px;
}

.w-h-50px {
    width: 50px;
    height: 50px;
}

.w-h-120px {
    width: 120px;
    height: 120px;
}

.w-h-100px {
    width: 100px;
    height: 100px;
}

.w-109px {
    width: 109px;
}

.w-120px {
    width: 120px;
}

.w-h-22px {
    width: 22px;
    height: 22px;
}

.w-h-24px {
    width: 24px;
    height: 24px;
}

.min-w-h-44px {
    min-width: 44px;
    min-height: 44px;
}

.w-50px {
    width: 50px;
}

.w-75px {
    width: 75px;
}

.min-w-100px {
    min-width: 100px;
}

.min-w-150px {
    min-width: 150px;
}

.min-w-250px {
    min-width: 250px;
}

.dropdown-toggle-none::after {
    border: 0 !important;
}

.dropdown-menu {
    -webkit-box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    box-shadow: 0 5px 10px rgba(30, 32, 37, .12);
    top: 100%;
    animation-name: DropDownSlide;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

@keyframes DropDownSlide {
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    0% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary);
}


.cursor-pointer {
    cursor: pointer;
}

.msn-10px {
    margin-left: -10px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.flex-between {
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.down-aroow-white {
    background-image: url(/images/down-arrow-white.svg);
    background-repeat: no-repeat;
}

.form-select:focus,
.form-control:focus {
    box-shadow: none;
}

.form-control::placeholder {
    opacity: 0.45;
}

/* Dropdown polish: render the empty-value "Select …" option as a muted
   placeholder both in the menu and in the closed select, so it reads
   as a hint rather than a real selected value. Real selected values
   keep the default text color, matching adjacent .form-control inputs.
   Skipped for selects with an explicit text color (e.g. .text-white on
   the header category select) so their styling is preserved. */
.form-select:not(.text-white) option[value=""] {
    color: var(--bs-secondary-color, #6c757d);
}

.form-select:not(.text-white):has(option[value=""]:checked) {
    color: var(--bs-secondary-color, #6c757d);
}

.form-select:disabled {
    background-color: var(--bs-secondary-bg, #e9ecef);
    opacity: 1;
}

/* hover css */
.hover-style-1 img {
    transition: transform 0.3s ease;
}

.hover-style-1:hover img {
    animation: shakeZoom 1.5s ease forwards;
}

@keyframes shakeZoom {
    0% {
        transform: rotateZ(0deg);
    }

    25% {
        transform: rotateZ(25deg);
    }

    50% {
        transform: rotateZ(-25deg);
    }

    75% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.box-hover-top {
    transition: transform 0.3s ease-in-out;
}

    .box-hover-top:hover {
        transform: translateY(-15px);
    }

.box-hover {
    transition: 0.3s ease-in-out;
}

    .box-hover img {
        transition: all .5s linear;
    }

    .box-hover:hover {
        box-shadow: 0px 5px 4px 0px #00000040;
        border: none;
    }

        .box-hover:hover img {
            transform: scale(1.1);
        }

        .box-hover:hover button {
            background-color: var(--secondary);
            color: rgba(var(--bs-white-rgb));
            border: 1px solid var(--secondary);
        }

        .box-hover:hover a {
            color: var(--secondary);
            border-color: var(--secondary);
            background-color: transparent;
        }

    .box-hover a:hover, .box-hover a:active {
        background-color: transparent;
        color: var(--secondary);
        border-color: var(--secondary);
    }

.box-hover-shadow {
    transition: 0.5s ease-in-out;
}

    .box-hover-shadow:hover {
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
    }

.circle-animation {
    animation: pulse-bg 1s ease-in-out infinite alternate;
    background: #54D9EB;
}

@keyframes pulse-bg {
    0% {
        background: rgba(213, 250, 255,0.1);
    }

    50% {
        background: rgba(213, 250, 255,0.5);
    }

    100% {
        background: rgba(213, 250, 255,1);
    }
}

/* navbar css */
.navbar-toggler {
    background-color: rgba(var(--bs-white-rgb));
    padding: 0.25rem 0.4rem;
}

/* footer css */
/* footer ul li a{color: var(--bs-body-color); text-decoration: none; transition: 0.3s ease-in-out;} */
/* footer ul li a:hover, footer ul li a:focus{color: var(--primary) !important; text-decoration: none;} */

/* slider css */
.banner-slider-bg {
    background-image: url(/images/banner-bg.png);
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.banner-slider .owl-stage {
    display: flex;
    align-items: center;
}
/* .owl-carousel .owl-item img{width: auto; height: auto;} */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #003366;
}

.owl-theme .owl-nav {
    margin: 0;
}

.slider-style-1.owl-theme .owl-nav button {
    font-size: 18px;
    border-radius: 12px;
    transition: 0.3s ease-in-out;
    position: absolute;
    top: 30%;
    background: rgba(var(--bs-white-rgb));
    width: 34px;
    height: 50px;
    margin: 0;
    color: var(--secondary);
}

    .slider-style-1.owl-theme .owl-nav button:hover {
        background-color: var(--secondary);
        color: rgba(var(--bs-white-rgb));
    }

.slider-style-1.owl-carousel .owl-nav button.owl-prev {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.slider-style-1.owl-carousel .owl-nav button.owl-next {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.slider-style-2.owl-theme .owl-nav button {
    font-size: 20px;
    position: absolute;
    top: -48px;
    right: -5px;
    transition: 0.3s ease-in-out;
    line-height: 22px;
    margin: 0;
}

    .slider-style-2.owl-theme .owl-nav button:hover {
        background-color: transparent;
        color: var(--secondary);
    }

.slider-style-2.owl-carousel .owl-nav button.owl-prev {
    right: 20px;
}

.slider-style-3.owl-theme .owl-nav button {
    font-size: 24px;
    line-height: 24px;
    transition: 0.3s ease-in-out;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    background: var(--secondary);
    width: 41px;
    height: 41px;
    margin: 0;
    color: rgba(var(--bs-white-rgb));
}

    .slider-style-3.owl-theme .owl-nav button:hover {
        background-color: var(--primary);
        color: rgba(var(--bs-white-rgb));
    }

.slider-style-3.owl-carousel .owl-nav button.owl-prev {
    left: 14px;
}

.slider-style-3.owl-carousel .owl-nav button.owl-next {
    right: 14px;
}

.sub-detail-slider .owl-stage-outer {
    height: 400px;
    overflow: hidden;
}

.sub-detail-slider .owl-stage, .sub-detail-slider .owl-item {
    height: 100%;
}

/* pagination css */
.pagination .page-link{color:var(--primary);border-radius:6px;margin-right:4px;transition:background-color .3s ease,color .3s ease}
.pagination .page-item:not(.active):not(.disabled) .page-link:hover{color:var(--primary);background-color:rgba(0,51,102,.1);border-color:var(--primary)}
.pagination .page-item.active .page-link{background-color:var(--primary);border-color:var(--primary);color:#fff}
.pagination .page-item.disabled .page-link{pointer-events:none;opacity:.5;background-color:transparent}

/* tabs css */
.tab-content > .active:focus-visible {
    outline: 0 none;
}

.nav-pills .nav-link {
    border: 1px solid var(--bs-secondary-border-subtle);
    color: var(--bs-body-color);
    padding: 0.625rem 2rem;
}

    .nav-pills .nav-link.active, .nav-pills .nav-link:hover {
        color: var(--primary);
        font-weight: 700;
        background-color: rgba(0, 51, 102, 0.1);
        border-color: var(--primary);
    }

.nav-pills.style-2 .nav-link.active, .nav-pills.style-2 .nav-link:hover {
    font-weight: 400;
}

.nav-pills.style-3 .nav-item .nav-link {
    margin-right: 0.525rem;
    background-color: rgba(var(--bs-light-rgb), 0.7);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    border: 0;
    color: var(--primary);
    font-weight: 700;
}

    .nav-pills.style-3 .nav-item .nav-link.active, .nav-pills.style-3 .nav-item .nav-link:hover {
        background-color: var(--primary);
        color: rgba(var(--bs-white-rgb));
    }

.nav-pills.style-4 .nav-item .nav-link {
    margin-right: 0.2rem;
    background-color: transparent;
    border-radius: 0.313rem;
    padding: 0.313rem 0.938rem;
    font-size: 0.875rem;
    border: 0;
    color: rgba(var(--bs-black-rgb));
    font-weight: 700;
}

    .nav-pills.style-4 .nav-item .nav-link.active, .nav-pills.style-4 .nav-item .nav-link:hover {
        background-color: rgba(var(--bs-white-rgb));
    }

/* offcanavs css */
.offcanvas.offcanvas-product {
    width: var(--sbw);
    max-width: 100%;
}

/* product page css */
.product-container {
    height: calc(100vh - 120px);
}

.left-chest-position {
    top: 14%;
    right: 18%;
}

.right-chest-position {
    top: 14%;
    left: 18%;
}

.center-chest-position {
    top: 32%;
    transform: translate(-50%, -50%);
    left: 50%;
}

.left-sleev-position {
    top: 17%;
    right: 0%;
}

.right-sleev-position {
    top: 17%;
    left: 0%;
}

.header-search[aria-expanded="false"] .bi-search::before {
    content: "\f52a";
    transition: transform .25s ease;
    transform: scale(1);
}

.header-search[aria-expanded="true"] .bi-search::before {
    content: "\F659";
    transform: scale(1.1);
}

.h-250px {
    height: 250px;
}

.h-20px {
    height: 20px;
}

/* Camera CSS */
.blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px) brightness(0.8);
    -webkit-backdrop-filter: blur(10px) brightness(0.8);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 29% 65% at 50% 50%, transparent 60%, black 61%);
    mask-image: radial-gradient(ellipse 29% 65% at 50% 50%, transparent 60%, black 61%);
}

.oval-border {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    height: 80%;
    border: 2px dotted rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Login Page */


.list-group-flush.custom-list-style>.list-group-item  { border-width: 0 0 0 !important;  display: flex; align-items: flex-start; background-color: transparent;}
.list-group-flush.custom-list-style>.list-group-item::before { content: "\f26b"; font-family: bootstrap-icons !important; font-style: normal; font-weight: 400 !important; vertical-align: middle; flex-shrink: 0; margin-right: 10px; color: var(--primary); }

.product-color{width:26px;height:26px;display:block;border:1px solid #000;border-radius:20%;padding:0;transition:border-color .25s ease,padding .25s ease,box-shadow .25s ease,transform .2s ease;}
.product-color span{display:block;width:100%;height:100%; transition:transform .25s ease;}
.product-color:hover{border-color:#000;padding:0px;transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,.25);}
.product-color.active{border-color:#000;padding:1px;transform:scale(1.2);box-shadow:0 3px 8px rgba(0,0,0,.35);}
.product-color:active{transform:scale(.95);}

.font-preview-badge {transition: all .15s ease;}
.font-preview-badge.active {border-color: #0d6efd; background-color: #f8f9fa;}

.not-found-fs {
        font-size: 100px;
}

@media (min-width:380px) {
    .btn {
        font-size: 0.875rem;
    }
}

@media (min-width:576px) {
    .w-h-sm-150px {
        width: 150px;
        height: 150px;
    }

    .w-h-sm-180px {
        width: 180px;
        height: 180px;
    }

    .banner-slider.owl-carousel img {
        max-width: 400px;
    }

    .not-found-fs {
        font-size: 200px;
    }
}

@media (max-width: 991px) {
    .navbar .navbar-collapse {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 11;
        top: 100%;
    }
}

@media (min-width: 992px) {
    .searchbar-width {
        width: min(80%, 876px);
    }

    .w-lg-auto {
        width: auto;
    }

    .w-lg-75px {
        width: 75px;
    }

    .w-h-lg-70px {
        width: 70px;
        height: 70px;
    }

    .w-h-lg-150px {
        width: 150px;
        height: 150px;
    }

    .btn {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }

    .rounded-lg-3 {
        border-radius: 8px;
    }

    .mx-lg-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .product-container {
        height: calc(100vh - 125px);
    }

    .banner-slider.owl-carousel img {
        width: auto;
        max-width: 100%;
    }

    .sub-detail-slider .owl-stage-outer {
        height: 684px
    }

    .slider-style-1.owl-theme .owl-nav button {
        font-size: 24px;
        width: 49px;
        height: 76px;
    }
}

@media (min-width:1200px) {
    .fs-28px {
        font-size: 1.75rem;
    }

    .btn-lg {
        padding: 1.25rem 1.5rem;
    }

    h1, .h1 {
        font-size: 4rem;
    }

    h2, .h2 {
        font-size: 3rem;
    }

    h3, .h3 {
        font-size: 2.25rem;
    }

    .w-xl-120px {
        width: 120px
    }



    .section-curve::before {
        content: '';
        position: absolute;
        top: 0;
        right: -135px;
        bottom: 0;
        left: 0;
        background: #FBF5F2;
        clip-path: circle(50.2% at 100% 50%);
        z-index: -1;
    }

    .offcanvas.offcanvas-product {
        transform: none;
        width: 400px;
        transition: width .28s ease;
        visibility: visible;
        top: 66px;
    }

        .offcanvas.offcanvas-product.mini {
            width: 0px;
        }

            .offcanvas.offcanvas-product.mini .offcanvas-body {
                overflow-x: hidden;
            }

        .offcanvas.offcanvas-product ~ .product-section {
            margin-left: 400px;
            transition: margin-left 0.28s ease;
        }

        .offcanvas.offcanvas-product.mini ~ .product-section {
            margin-left: 0px;
        }

    .offcanvas-product .button-offcanvas {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        transition: left 0.3s ease, transform 0.3s ease;
    }

        .offcanvas-product .button-offcanvas:hover {
            color: inherit;
        }

    .offcanvas-product.mini .button-offcanvas i::before {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .modal-xl {
        --bs-modal-width: 1000px;
    }

    .product-container {
        height: calc(100vh - 122px);
    }
}

@media (min-width:1400px) {
    .w-h-xxl-112px {
        width: 112px;
        height: 112px;
    }

    .offcanvas.offcanvas-product {
        transform: none;
        width: 500px;
    }

        .offcanvas.offcanvas-product ~ .product-section {
            margin-left: 500px;
        }

    .min-h-xxl-600px {
        min-height: 600px;
    }
}

@media (min-width: 1500px) {
    .container {
        max-width: 1500px;
    }
}

@media (max-width: 1199px) {
    .products-mobile-slider {
        margin-left: -10px;
        width: auto;
        margin-right: -10px;
    }

        .products-mobile-slider.owl-carousel .owl-stage {
            display: flex;
            flex-direction: row;
        }

        .products-mobile-slider .owl-item {
            min-height: 100%;
            float: none;
        }

            .products-mobile-slider .owl-item > div {
                height: 100%;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
            }
}
/* Engraving styles moved to engraving.css */

/* ── Video Category Badges (shared across Cart, Orders, Browse) ── */
.vcard-badge-regular { background: rgba(153, 0, 51, 0.9); color: #fff; }
.vcard-badge-tournament { background: rgba(21, 101, 192, 0.9); color: #fff; }
.vcard-badge-championship { background: rgba(255, 193, 7, 0.95); color: #212529; }
.vcard-badge-interview { background: rgba(46, 125, 50, 0.9); color: #fff; }

/* ── Video/Cart Shared Utilities ── */
.vs-badge { font-size: .65rem; }
.vs-badge-sm { font-size: .55rem; }
.fs-icon-empty { font-size: 4rem; }
.video-thumb-mobile { height: 120px; }
.video-thumb-desktop { width: 110px; height: 80px; }
.video-thumb-order { width: 80px; height: 60px; }
.video-meta-text { font-size: .75rem; }

/* ── Shared Utility Classes ── */
.fs-icon-error { font-size: 3rem; }
.fs-icon-lg { font-size: 3.5rem; }
.sticky-top-1 { top: 1rem; }
.icon-box-50 { width: 50px; height: 50px; }
.icon-box-36 { width: 36px; height: 36px; }
.icon-box-42 { width: 42px; height: 42px; }
.border-eng { border-color: var(--eng-border); }
.wizard-bg { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); min-height: 60vh; }
.ls-wide { letter-spacing: .5px; }
.cursor-pointer { cursor: pointer; }
.max-w-300 { max-width: 300px; }
.max-w-340 { max-width: 340px; }
.max-w-720 { max-width: 720px; }
.fs-hint { font-size: 0.7rem; }

/* ── Wishlist Product Card ─────────────────────────────────── */
.wl-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .25s ease, transform .25s ease;
}
.wl-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

/* Image area */
.wl-card-img {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    min-height: 180px;
}
.wl-card-img img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.wl-card-price {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--primary, #003366);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    letter-spacing: .3px;
}

/* Body */
.wl-card-body {
    padding: 1rem 1rem 0.5rem;
    flex: 1;
}
.wl-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wl-card-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.wl-card-attr {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
}
.wl-card-attr--ship {
    color: var(--primary, #003366);
    background: rgba(0,51,102,.06);
}

/* Footer */
.wl-card-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.wl-card-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wl-card-qty-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
.wl-card-qty input {
    width: 56px;
    padding: 0.2rem 0.25rem;
    font-size: 0.85rem;
    border-radius: 0.4rem;
}
.wl-card-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}
.wl-card-actions .btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
}
.wl-card-actions .btn-primary {
    flex: 1;
}

/* Video image variant — cover instead of contain */
.wl-card-img--video {
    padding: 0;
    min-height: 170px;
    overflow: hidden;
}
.wl-card-img--video img {
    width: 100%;
    height: 100%;
    max-height: 170px;
    object-fit: cover;
    mix-blend-mode: normal;
}

/* Type badge (top-left) */
.wl-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    line-height: 1.2;
    z-index: 2;
    color: #fff;
    background: var(--primary, #003366);
}
.wl-badge--tournament   { background: #1d4ed8; }
.wl-badge--championship { background: #b91c1c; }
.wl-badge--interview    { background: #7c3aed; }
.wl-badge--video        { background: #0369a1; }
.wl-badge--engraving    { background: #92400e; }

/* List view item */
.wl-list-item {
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .2s ease;
}
.wl-list-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
}

/* ===== Dual-handle price range slider ===== */
.price-range-slider {
    position: relative;
    height: 28px;
    margin: 0 6px;
}
.price-range-track,
.price-range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    border-radius: 4px;
    transform: translateY(-50%);
    pointer-events: none;
}
.price-range-track {
    left: 0;
    right: 0;
    background: #e2e8f0;
}
.price-range-fill {
    background: #990033;
}
.price-range-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    margin: 0;
    padding: 0;
}
.price-range-input:focus {
    outline: none;
}
.price-range-input::-webkit-slider-runnable-track {
    background: transparent;
    height: 4px;
    border: none;
}
.price-range-input::-moz-range-track {
    background: transparent;
    height: 4px;
    border: none;
}
.price-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #990033;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    pointer-events: auto;
    margin-top: -7px;
    position: relative;
    z-index: 3;
}
.price-range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #990033;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    pointer-events: auto;
}
.price-range-input:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.2rem rgba(153, 0, 51, 0.25);
}
.price-range-input:focus::-moz-range-thumb {
    box-shadow: 0 0 0 0.2rem rgba(153, 0, 51, 0.25);
}
.price-range-input-min::-webkit-slider-thumb { z-index: 4; }
.price-range-input-max::-webkit-slider-thumb { z-index: 5; }

/* Inner card/section <header> elements should stack naturally (no global z-index) */
body > header {
    position: relative;
}

.bg-brand-secondary-soft {
    background-color: #990033;
    box-shadow: -6px 4px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.profile-dropdown-menu {
    min-width: 220px;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0.5rem;
    z-index: 1101;
    background-color: #fff;
}

.profile-dropdown-menu .dropdown-item {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    color: var(--bs-dark, #212529);
}

.profile-dropdown-menu .dropdown-item:hover,
.profile-dropdown-menu .dropdown-item:focus {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-dark, #212529);
}

.profile-dropdown-menu .dropdown-header {
    color: var(--bs-secondary, #6c757d) !important;
    white-space: nowrap;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
    letter-spacing: 1px;
}

.form-label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}

.form-control[readonly][disabled],
.form-select[disabled] {
    cursor: not-allowed;
    opacity: 1;
}

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

.greeting-block .greeting-icon {
    font-size: 2.25rem;
    line-height: 1;
}

.greeting-block .greeting-label {
    letter-spacing: 1px;
}

.tracking-wide {
    letter-spacing: 1px;
}

#profileHeaderCard {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.logout-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.logout-active #globalLoader {
    display: none !important;
    visibility: hidden !important;
}

.logout-overlay.is-active {
    display: flex;
    animation: logout-overlay-fade 220ms ease-out both;
}

.logout-overlay-card {
    max-width: 460px;
    width: 100%;
    animation: logout-card-pop 280ms ease-out both;
}

.logout-ring {
    position: relative;
    width: 84px;
    height: 84px;
}

.logout-ring .spinner-border {
    width: 84px;
    height: 84px;
    border-width: 4px;
    opacity: 0.4;
}

.logout-progress {
    height: 4px;
    width: 220px;
    max-width: 100%;
    background-color: rgba(13, 110, 253, 0.12);
    border-radius: 999px;
    overflow: hidden;
}

.logout-progress-bar {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, #0d6efd, transparent);
    animation: logout-progress-slide 1.4s ease-in-out infinite;
}

@keyframes logout-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes logout-card-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes logout-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
    .logout-overlay.is-active { animation: none; }
    .logout-overlay-card { animation: none; }
    .logout-progress-bar { animation: none; width: 100%; opacity: 0.6; }
    .logout-ring .spinner-border { animation: none; }
}

body.logout-active {
    overflow: hidden;
}

[id^="NotiflixConfirmWrap"] > div[class*="-content"],
[id^="NotiflixReportWrap"]  > div[class*="-content"] {
    max-width: min(90vw, 480px) !important;
    box-sizing: border-box;
}

[id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-head"] > div,
[id^="NotiflixReportWrap"]  > div[class*="-content"] > div[class*="-head"] > div {
    max-height: 60vh;
    overflow-y: auto;
    line-height: 1.55;
    white-space: normal;
    word-wrap: break-word;
    padding: 0.25rem 0;
}

[id^="NotiflixConfirmWrap"] > div[class*="-content"] > div[class*="-head"] > h5,
[id^="NotiflixReportWrap"]  > div[class*="-content"] > div[class*="-head"] > h5 {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    height: auto;
    max-height: none;
    overflow: visible;
}

@media (max-width: 480px) {
    [id^="NotiflixConfirmWrap"] > div[class*="-content"],
    [id^="NotiflixReportWrap"]  > div[class*="-content"] {
        max-width: 92vw !important;
    }
}

.min-w-0 {
    min-width: 0;
}

.sidebar-panel {
    background-color: #ffffff;
    border: 1px solid #E5E7EB;
}

/* ===== Site header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    transition: transform .3s ease;
    will-change: transform;
}

.site-header .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.site-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

.header-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.header-brand-text {
    font-size: 1.4rem;
    letter-spacing: .3px;
    white-space: nowrap;
    line-height: 1;
}

@media (min-width: 576px) {
    .header-logo {
        width: 48px;
        height: 48px;
    }

    .header-brand-text {
        font-size: 1.15rem;
    }
}

@media (min-width: 992px) {
    .header-logo {
        width: 60px;
        height: 60px;
    }

    .header-brand-text {
        font-size: 1.8rem;
    }
}

/* Search */
.header-search {
    max-width: 720px;
    margin: 0 auto;
}

.header-search-group {
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.header-search-group .header-search-cat,
.header-search-group .header-search-input,
.header-search-group .header-search-btn {
    font-size: .875rem;
}

.header-search .header-search-cat {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: 220px;
    padding-right: 2.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: #DFDFDF;
    color: #1a1a1a;
    border: 0;
    border-right: 1px solid #E5E7EB;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23003366' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.header-search .header-search-cat:focus {
    box-shadow: none;
    background-color: #DFDFDF;
}

.header-search .header-search-cat option {
    color: #1a1a1a;
    background-color: #fff;
}

.header-search-input {
    border: 0;
    background-color: #fff;
    color: #1a1a1a;
}

.header-search-input::placeholder {
    color: #9ca3af;
}

.header-search-input:focus {
    box-shadow: none;
    background-color: #fff;
    color: #1a1a1a;
}

.header-search-btn {
    background-color: #DFDFDF;
    color: var(--primary);
    border: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: 1px solid #E5E7EB;
    transition: background-color .15s ease, color .15s ease;
}

.header-search-btn:hover,
.header-search-btn:focus {
    background-color: #C8C8C8;
    color: var(--primary);
}

.header-search-mobile .input-group {
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

/* Right-side icon buttons — rounded-square frame with corner badge */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 0;
    background-color: transparent;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}

.header-icon-btn:hover,
.header-icon-btn:focus-visible {
    background-color: rgba(255, 255, 255, .14);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.header-icon-btn .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (min-width: 576px) {
    .header-badge {
        top: -6px;
        right: -6px;
        min-width: 24px;
        height: 22px;
        font-size: .72rem;
    }
}

/* Mobile drawer */
.mobile-drawer {
    width: 86vw;
    max-width: 320px;
}

.mobile-drawer .offcanvas-header {
    padding: 1rem;
}

.drawer-section {
    border-bottom: 1px solid #E5E7EB;
}

.drawer-section:last-child {
    border-bottom: 0;
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    color: #1a1a1a;
    text-decoration: none;
    font-size: .95rem;
    transition: background-color .15s ease, color .15s ease;
}

.drawer-link:hover,
.drawer-link:focus {
    background-color: #F5F7FA;
    color: var(--primary);
}

.drawer-link i {
    font-size: 1.1rem;
    color: var(--primary);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.drawer-link.text-danger i {
    color: var(--bs-danger);
}

/* ===== Discover The Latest section ===== */
.discover-latest {
    background-color: #fafafa;
    position: relative;
    overflow: hidden;
}

.discover-latest::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--bs-secondary-rgb), .08), transparent 70%);
    pointer-events: none;
}

.discover-latest::after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), .07), transparent 70%);
    pointer-events: none;
}

.discover-header {
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.discover-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--secondary);
    padding: .35rem .85rem;
    background-color: #ffffff;
    border: 1px solid rgba(var(--bs-secondary-rgb), .18);
    border-radius: 999px;
    margin-bottom: .85rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.discover-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 4px rgba(var(--bs-secondary-rgb), .15);
}

.discover-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.6px;
    line-height: 1.1;
    margin: 0 0 .65rem;
}

.discover-title-accent {
    background: linear-gradient(90deg, var(--secondary), #c44569);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    font-weight: 800;
    display: inline-block;
    padding-right: .12em;
    line-height: 1.2;
}

.discover-subtitle {
    color: #6c757d;
    font-size: .95rem;
    line-height: 1.55;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .discover-title {
        font-size: 2.1rem;
    }
}

@media (min-width: 992px) {
    .discover-title {
        font-size: 2.6rem;
    }
}

/* Editorial cards with gradient image panel + named footer */
.latest-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
    z-index: 1;
}

.latest-card:hover,
.latest-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(16, 24, 40, .14), 0 6px 16px rgba(16, 24, 40, .06);
    color: inherit;
    text-decoration: none;
    outline: none;
}

/* White visual panel — image is the hero on clean white */
.latest-card-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6%;
    overflow: hidden;
    background: #ffffff;
}

.latest-card-img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.latest-card:hover .latest-card-img,
.latest-card:focus-visible .latest-card-img {
    transform: scale(1.07);
}

/* Colored footer — the brand-tinted band per theme */
.latest-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1rem 1rem;
    position: relative;
    overflow: hidden;
    transition: filter .3s ease;
}

.latest-card:hover .latest-card-footer,
.latest-card:focus-visible .latest-card-footer {
    filter: saturate(1.15) brightness(1.05);
}

.latest-card-name {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -.1px;
    line-height: 1.2;
}

.latest-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
    font-size: .85rem;
    border: 1px solid rgba(255, 255, 255, .35);
    transition: background-color .25s ease, transform .25s ease;
    flex-shrink: 0;
}

.latest-card:hover .latest-card-arrow,
.latest-card:focus-visible .latest-card-arrow {
    background: #ffffff;
    color: var(--primary);
    transform: rotate(45deg);
}

@media (min-width: 768px) {
    .latest-card-footer {
        padding: 1rem 1.25rem 1.1rem;
    }

    .latest-card-name {
        font-size: 1.05rem;
    }
}

@media (min-width: 1200px) {
    .latest-card-name {
        font-size: 1.15rem;
    }

    .latest-card-arrow {
        width: 36px;
        height: 36px;
    }
}

/* Theme gradients now applied to the footer band */
.latest-card--theme-1 .latest-card-footer {
    background: linear-gradient(135deg, #0a4a8a 0%, #003366 100%);
}

.latest-card--theme-2 .latest-card-footer {
    background: linear-gradient(135deg, #c44569 0%, #990033 100%);
}

.latest-card--theme-3 .latest-card-footer {
    background: linear-gradient(135deg, #e8c4a0 0%, #a87555 100%);
}

.latest-card--theme-4 .latest-card-footer {
    background: linear-gradient(135deg, #b4b482 0%, #6d6d3e 100%);
}

/* Theme accent — a thin colored top border on the white image area
   so the color flows visually from card to card */
.latest-card--theme-1 .latest-card-visual { border-top: 3px solid #003366; }
.latest-card--theme-2 .latest-card-visual { border-top: 3px solid #990033; }
.latest-card--theme-3 .latest-card-visual { border-top: 3px solid #6d6d3e; }
.latest-card--theme-4 .latest-card-visual { border-top: 3px solid #a87555; }

/* ===== Home hero banner — compact modern ===== */
.hero-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #001a33 0%, #003366 55%, #0a4a8a 100%);
    color: #ffffff;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.hero-orb--red {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(196, 69, 105, .55), transparent 70%);
    top: -100px;
    right: -80px;
}

.hero-orb--blue {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(10, 74, 138, .8), transparent 70%);
    bottom: -100px;
    left: -80px;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: .3rem .75rem;
    border-radius: 999px;
    margin-bottom: .75rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 3px rgba(var(--bs-secondary-rgb), .35);
    animation: hero-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--bs-secondary-rgb), .35); }
    50%      { box-shadow: 0 0 0 5px rgba(var(--bs-secondary-rgb), .15); }
}

.hero-headline {
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.6px;
    margin: 0 0 .65rem;
    color: #ffffff;
}

.hero-headline-accent {
    background: linear-gradient(90deg, #ff6b8a 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    display: inline-block;
    padding-right: .12em;
}

@media (min-width: 576px) {
    .hero-headline {
        font-size: 2rem;
    }
}

@media (min-width: 992px) {
    .hero-headline {
        font-size: 2.4rem;
    }
}

@media (min-width: 1200px) {
    .hero-headline {
        font-size: 2.8rem;
    }
}

.hero-sub {
    font-size: .9rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .78);
    margin: 0;
    max-width: 460px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #ffffff;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.hero-chip i {
    color: var(--secondary);
    font-size: .85rem;
    transition: color .2s ease;
}

.hero-chip:hover,
.hero-chip:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary);
    transform: translateY(-2px);
    outline: none;
}

.hero-chip:hover i,
.hero-chip:focus-visible i {
    color: var(--secondary);
}

/* Compact trust strip */
.hero-trust {
    color: rgba(255, 255, 255, .65);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.hero-trust-item i {
    color: #ff6b8a;
    font-size: .9rem;
}

.hero-trust-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .15);
    display: none;
}

@media (min-width: 576px) {
    .hero-trust-divider {
        display: inline-block;
    }
}

/* Product stage — compact */
.hero-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 340px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-stage-glow {
    position: absolute;
    inset: 8% 8% 0 8%;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(255, 107, 138, .45) 0%,
        rgba(196, 69, 105, .25) 40%,
        transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

.hero-stage-ring {
    position: absolute;
    width: 75%;
    height: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 50px rgba(255, 255, 255, .04);
    pointer-events: none;
    z-index: 0;
}

.hero-stage-slider {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-stage-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8%;
}

.hero-stage-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .32));
}

.hero-stage-slider .owl-dots {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .35rem;
}

.hero-stage-slider .owl-dots .owl-dot span {
    width: 7px;
    height: 7px;
    margin: 0;
    background: rgba(255, 255, 255, .25);
    transition: width .25s ease, background-color .25s ease;
}

.hero-stage-slider .owl-dots .owl-dot.active span {
    width: 20px;
    background: var(--secondary);
    border-radius: 999px;
}

@media (min-width: 992px) {
    .hero-stage {
        max-width: 380px;
    }
}

/* CTA button (left column) */
.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #ffffff;
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .78rem;
    padding: .65rem .75rem .65rem 1.15rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    white-space: nowrap;
}

.hero-cta-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--secondary);
    color: #ffffff;
    font-size: .8rem;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}

.hero-cta-btn:hover,
.hero-cta-btn:focus-visible {
    background: var(--secondary);
    color: #ffffff;
    transform: translateY(-2px);
    outline: none;
}

.hero-cta-btn:hover .hero-cta-btn-icon,
.hero-cta-btn:focus-visible .hero-cta-btn-icon {
    background: #ffffff;
    color: var(--secondary);
    transform: translateX(3px);
}

/* Featured Picks mosaic — 3 tiles side by side */
.hero-picks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero-picks {
        gap: .85rem;
    }
}

.hero-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1),
                background-color .25s ease,
                border-color .25s ease,
                box-shadow .3s ease;
}

.hero-pick:hover,
.hero-pick:focus-visible {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 18px 32px rgba(0, 0, 0, .32);
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

/* Number badge */
.hero-pick-num {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 2;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, .65);
}

/* Image area */
.hero-pick-img-wrap {
    position: relative;
    z-index: 1;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12%;
    background: rgba(255, 255, 255, .04);
}

.hero-pick-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3));
}

.hero-pick:hover .hero-pick-img-wrap img,
.hero-pick:focus-visible .hero-pick-img-wrap img {
    transform: scale(1.08);
}

/* Footer with name + arrow */
.hero-pick-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    padding: .55rem .7rem .65rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.hero-pick-label {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: .1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-pick-arrow {
    color: rgba(255, 255, 255, .6);
    font-size: .8rem;
    flex-shrink: 0;
    transition: color .25s ease, transform .25s ease;
}

.hero-pick:hover .hero-pick-arrow,
.hero-pick:focus-visible .hero-pick-arrow {
    color: #ffffff;
    transform: translate(2px, -2px);
}

@media (min-width: 768px) {
    .hero-pick-label {
        font-size: .82rem;
    }
    .hero-pick-body {
        padding: .7rem .85rem .8rem;
    }
    .hero-pick-num {
        font-size: .68rem;
        top: 10px;
        left: 12px;
    }
}

@media (min-width: 1200px) {
    .hero-pick-label {
        font-size: .9rem;
    }
}

/* ===== Team Products hero card ===== */
.team-hero-section {
    background-color: #fafafa;
}

.team-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(135deg, #001a33 0%, #003366 55%, #0a4a8a 100%);
    color: #ffffff;
    padding: 2rem 1.5rem 1.5rem;
    box-shadow: 0 24px 50px rgba(0, 26, 51, .25);
}

@media (min-width: 768px) {
    .team-hero {
        padding: 2.5rem 2rem 1.75rem;
    }
}

@media (min-width: 992px) {
    .team-hero {
        padding: 3rem 3rem 2rem;
    }
}

/* Decorative bg layers */
.team-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.team-hero-orb--red {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(196, 69, 105, .5), transparent 70%);
    top: -140px;
    right: -100px;
}

.team-hero-orb--blue {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(10, 74, 138, .7), transparent 70%);
    bottom: -120px;
    left: -100px;
}

.team-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Eyebrow */
.team-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: .3rem .75rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.team-hero-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 3px rgba(var(--bs-secondary-rgb), .35);
    animation: hero-pulse 2.4s ease-in-out infinite;
}

/* Headline */
.team-hero-headline {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.6px;
    margin: 0 0 .85rem;
    color: #ffffff;
}

.team-hero-accent {
    background: linear-gradient(90deg, #ff6b8a 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    display: inline-block;
    padding-right: .1em;
}

@media (min-width: 768px) {
    .team-hero-headline {
        font-size: 2.2rem;
    }
}

@media (min-width: 1200px) {
    .team-hero-headline {
        font-size: 2.6rem;
    }
}

.team-hero-sub {
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 1.5rem;
    max-width: 440px;
}

/* CTA */
.team-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #ffffff;
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .78rem;
    padding: .6rem .7rem .6rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    align-self: flex-start;
}

.team-hero-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--secondary);
    color: #ffffff;
    font-size: .8rem;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}

.team-hero-cta:hover,
.team-hero-cta:focus-visible {
    background: var(--secondary);
    color: #ffffff;
    transform: translateY(-2px);
    outline: none;
}

.team-hero-cta:hover .team-hero-cta-icon,
.team-hero-cta:focus-visible .team-hero-cta-icon {
    background: #ffffff;
    color: var(--secondary);
    transform: translate(3px, -3px);
}

/* Floating product cards */
.team-hero-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
    height: 100%;
}

.team-hero-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .32);
}

/* The middle card sits slightly higher — adds visual rhythm */
.team-hero-card--lifted {
    transform: translateY(-12px);
}

.team-hero-card--lifted:hover {
    transform: translateY(-18px);
}

.team-hero-card-img {
    aspect-ratio: 1 / 1;
    background: #F5F7FA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12%;
    overflow: hidden;
}

.team-hero-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.team-hero-card:hover .team-hero-card-img img {
    transform: scale(1.08);
}

.team-hero-card-body {
    padding: .6rem .7rem .75rem;
    background: #ffffff;
}

.team-hero-card-name {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 .2rem;
    line-height: 1.2;
}

.team-hero-card-price {
    font-size: .8rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1;
}

@media (min-width: 768px) {
    .team-hero-card-body {
        padding: .75rem .9rem .9rem;
    }
    .team-hero-card-name {
        font-size: .82rem;
    }
    .team-hero-card-price {
        font-size: .92rem;
    }
}

@media (min-width: 1200px) {
    .team-hero-card-name {
        font-size: .9rem;
    }
    .team-hero-card-price {
        font-size: 1rem;
    }
}

/* Bottom stat strip */
.team-hero-stats {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .9rem 1.5rem;
}

.team-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
    letter-spacing: .3px;
}

.team-hero-stat strong {
    color: #ffffff;
    font-weight: 800;
    margin-right: .15rem;
}

.team-hero-stat i {
    color: #ff6b8a;
    font-size: .95rem;
}

.team-hero-stat-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .18);
    display: none;
}

@media (min-width: 576px) {
    .team-hero-stat-divider {
        display: inline-block;
    }
}

@media (min-width: 992px) {
    .team-hero-stats {
        margin-top: 2.5rem;
    }
}

/* ===== Category navbar — full-width horizontal scroll ===== */
.cat-nav {
    background: #ffffff;
    border-bottom: 1px solid #ECEEF2;
    width: 100%;
    padding: .65rem 0;
}

@media (min-width: 768px) {
    .cat-nav {
        padding: .85rem 0;
    }
}

/* Scrollable row — spans full width */
.cat-nav-scroll {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .25rem 1rem .35rem;
}

.cat-nav-scroll::-webkit-scrollbar {
    display: none;
}

@media (min-width: 576px) {
    .cat-nav-scroll {
        gap: 1rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 768px) {
    .cat-nav-scroll {
        gap: 1.25rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .cat-nav-scroll {
        gap: 1.75rem;
        justify-content: center;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Pill (icon + name vertical) — bigger icons + room for 2-line text */
.cat-pill {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    width: 96px;
    padding: .25rem 0;
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.cat-pill:hover,
.cat-pill:focus-visible {
    transform: translateY(-4px);
    text-decoration: none;
    outline: none;
}

.cat-pill-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #F5F7FA 0%, #E5EAF1 100%);
    border: 1px solid rgba(0, 51, 102, .06);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1),
                box-shadow .3s ease,
                border-color .25s ease,
                background .3s ease;
}

.cat-pill-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
}

.cat-pill:hover .cat-pill-icon,
.cat-pill:focus-visible .cat-pill-icon {
    background: linear-gradient(135deg, #FFFFFF 0%, #EEF2F8 100%);
    border-color: rgba(0, 51, 102, .18);
    box-shadow: 0 14px 28px rgba(16, 24, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
    transform: scale(1.05);
}

.cat-pill-icon img {
    width: 66%;
    max-height: 68%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.cat-pill:hover .cat-pill-icon img,
.cat-pill:focus-visible .cat-pill-icon img {
    transform: scale(1.1);
}

/* Text: 2-line wrap, no cut */
.cat-pill-name {
    font-size: .74rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    line-height: 1.2;
    letter-spacing: .1px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    transition: color .2s ease;
}

.cat-pill:hover .cat-pill-name,
.cat-pill:focus-visible .cat-pill-name {
    color: var(--secondary);
}

@media (min-width: 576px) {
    .cat-pill {
        width: 104px;
    }

    .cat-pill-icon {
        width: 88px;
        height: 88px;
        border-radius: 24px;
    }

    .cat-pill-name {
        font-size: .78rem;
    }
}

@media (min-width: 992px) {
    .cat-pill {
        width: 116px;
    }

    .cat-pill-icon {
        width: 100px;
        height: 100px;
        border-radius: 26px;
    }

    .cat-pill-name {
        font-size: .85rem;
    }
}


/* ===== Video Spinner — interactive tabs + crossfading card ===== */
.video-spinner {
    background-color: #F0F4F9;
    border-top: 1px solid #E5EAF1;
    border-bottom: 1px solid #E5EAF1;
}

.vsp-header {
    margin-bottom: 1rem;
}

/* Section title — compact two-tone */
.vsp-mega-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.15;
    margin: 0 0 .35rem;
}

.vsp-mega-blue {
    color: var(--primary);
}

.vsp-mega-red {
    color: var(--secondary);
}

@media (min-width: 768px) {
    .vsp-mega-title {
        font-size: 1.45rem;
    }
}

@media (min-width: 992px) {
    .vsp-mega-title {
        font-size: 1.65rem;
    }
}

.vsp-tagline {
    color: #6c757d;
    font-size: .82rem;
    line-height: 1.4;
    margin: 0;
    max-width: 480px;
}

.vsp-watch-all {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color .2s ease;
}

.vsp-watch-all:hover,
.vsp-watch-all:focus {
    color: var(--primary);
}

/* Left — vertical tab list */
.vsp-tabs {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    height: 100%;
}

.vsp-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem .6rem .7rem;
    background: #ffffff;
    border: 1px solid #ECEEF2;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    color: var(--primary);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.vsp-tab:hover {
    border-color: rgba(0, 51, 102, .18);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(16, 24, 40, .06);
}

.vsp-tab.is-active {
    background: linear-gradient(135deg, #003366 0%, #0a4a8a 100%);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(0, 26, 51, .22);
}

.vsp-tab-num {
    flex: 0 0 auto;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: rgba(0, 51, 102, .3);
    line-height: 1;
    align-self: flex-start;
    margin-top: .15rem;
    transition: color .25s ease;
}

.vsp-tab.is-active .vsp-tab-num {
    color: rgba(255, 255, 255, .55);
}

.vsp-tab-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #F5F7FA 0%, #E5EAF1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: .9rem;
    transition: background .25s ease, color .25s ease;
}

.vsp-tab.is-active .vsp-tab-icon {
    background: rgba(255, 255, 255, .15);
    color: #ffffff;
}

.vsp-tab-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.vsp-tab-title {
    font-size: .85rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    letter-spacing: -.1px;
    transition: color .25s ease;
}

.vsp-tab.is-active .vsp-tab-title {
    color: #ffffff;
}

.vsp-tab-desc {
    font-size: .7rem;
    color: #6c757d;
    line-height: 1.3;
    transition: color .25s ease;
}

.vsp-tab.is-active .vsp-tab-desc {
    color: rgba(255, 255, 255, .75);
}

.vsp-tab-arrow {
    flex: 0 0 auto;
    color: rgba(0, 51, 102, .25);
    font-size: .9rem;
    transition: color .25s ease, transform .25s ease;
}

.vsp-tab:hover .vsp-tab-arrow {
    color: var(--secondary);
    transform: translate(2px, -2px);
}

.vsp-tab.is-active .vsp-tab-arrow {
    color: #ffffff;
    transform: translate(2px, -2px);
}

/* Auto-progress bar at the bottom of the active tab */
.vsp-tab-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #ff6b8a, var(--secondary));
    opacity: 0;
    border-radius: 0 0 14px 14px;
    pointer-events: none;
    transition: opacity .15s ease;
}

.vsp-tab.is-active .vsp-tab-progress {
    opacity: 1;
    animation: vsp-progress 5s linear forwards;
}

@keyframes vsp-progress {
    from { width: 0; }
    to   { width: 100%; }
}

.video-spinner:hover .vsp-tab.is-active .vsp-tab-progress,
.video-spinner:focus-within .vsp-tab.is-active .vsp-tab-progress {
    animation-play-state: paused;
}

@media (min-width: 768px) {
    .vsp-tab {
        padding: 1rem 1.1rem 1rem 1rem;
        gap: 1rem;
    }
    .vsp-tab-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .vsp-tab-title {
        font-size: 1rem;
    }
    .vsp-tab-desc {
        font-size: .78rem;
    }
}

/* Right — crossfading display card */
.vsp-display {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 10px 24px rgba(0, 26, 51, .14);
}

@media (min-width: 992px) {
    .vsp-display {
        aspect-ratio: auto;
        height: 100%;
        min-height: 300px;
    }
}

.vsp-display-card {
    position: absolute;
    inset: 0;
    text-decoration: none;
    color: #ffffff;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .55s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.vsp-display-card.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.vsp-display-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: scale(1);
    transition: transform 8s linear;
}

.vsp-display-card.is-active img {
    transform: scale(1.05);
}

.vsp-display-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, .35) 60%,
        rgba(0, 26, 51, .85) 100%);
    pointer-events: none;
    z-index: 1;
}

.vsp-display-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .4rem;
}

.vsp-display-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.vsp-display-bottom {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vsp-display-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: .3rem .65rem;
    border-radius: 999px;
}

.vsp-display-tag i {
    color: #ff6b8a;
    font-size: .8rem;
}

/* "Now Showing" live indicator (top-right) */
.vsp-display-live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: .28rem .55rem .28rem .5rem;
    border-radius: 999px;
}

.vsp-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6b8a;
    box-shadow: 0 0 0 3px rgba(255, 107, 138, .25);
    animation: vsp-live-pulse 1.6s ease-in-out infinite;
}

@keyframes vsp-live-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(255, 107, 138, .25);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 107, 138, .08);
        transform: scale(1.15);
    }
}

.vsp-display-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.15;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.vsp-display-meta {
    font-size: .78rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.35;
    margin: 0 0 .25rem;
    max-width: 380px;
}

.vsp-display-play {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    align-self: flex-start;
    background: #ffffff;
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: .75rem;
    padding: .55rem .9rem .55rem .75rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.vsp-display-play i {
    background: var(--secondary);
    color: #ffffff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: transform .25s ease;
}

.vsp-display-card:hover .vsp-display-play {
    background: var(--secondary);
    color: #ffffff;
    transform: translateY(-2px);
}

.vsp-display-card:hover .vsp-display-play i {
    background: #ffffff;
    color: var(--secondary);
    transform: scale(1.08);
}

@media (min-width: 768px) {
    .vsp-display-overlay {
        padding: 1.1rem 1.25rem;
    }
    .vsp-display-title {
        font-size: 1.35rem;
    }
    .vsp-display-meta {
        font-size: .85rem;
    }
}

@media (min-width: 1200px) {
    .vsp-display-title {
        font-size: 1.55rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vsp-display-card,
    .vsp-display-card img,
    .vsp-tab-progress {
        transition: none;
        animation: none;
    }
}

/* ===== Engraving section — full-width red gradient (mirrors Team Products) ===== */
.eng-hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #4d0019 0%, #800028 55%, #990033 100%);
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(77, 0, 25, .25) inset;
}

/* Decorative orbs */
.eng-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.eng-hero-orb--light {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 130, 160, .35), transparent 70%);
    top: -140px;
    right: -100px;
}

.eng-hero-orb--dark {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(40, 0, 15, .55), transparent 70%);
    bottom: -120px;
    left: -100px;
}

.eng-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Eyebrow */
.eng-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: .3rem .75rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.eng-hero-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffd6e0;
    box-shadow: 0 0 0 3px rgba(255, 214, 224, .35);
    animation: hero-pulse 2.4s ease-in-out infinite;
}

/* Headline — white on red */
.eng-hero-headline {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.6px;
    margin: 0 0 .85rem;
    color: #ffffff;
}

.eng-hero-accent {
    background: linear-gradient(90deg, #ffd6e0 0%, #ffe8ec 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    display: inline-block;
    padding-right: .1em;
}

@media (min-width: 768px) {
    .eng-hero-headline {
        font-size: 2.2rem;
    }
}

@media (min-width: 1200px) {
    .eng-hero-headline {
        font-size: 2.6rem;
    }
}

.eng-hero-sub {
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 1.5rem;
    max-width: 440px;
}

/* CTA — white pill matching team-hero */
.eng-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: #ffffff;
    color: var(--secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .78rem;
    padding: .6rem .7rem .6rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    align-self: flex-start;
}

.eng-hero-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--secondary);
    color: #ffffff;
    font-size: .8rem;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}

.eng-hero-cta:hover,
.eng-hero-cta:focus-visible {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
    outline: none;
}

.eng-hero-cta:hover .eng-hero-cta-icon,
.eng-hero-cta:focus-visible .eng-hero-cta-icon {
    background: #ffffff;
    color: var(--primary);
    transform: translate(3px, -3px);
}

/* Wide bat showcase — no card frame, image floats directly on red */
.eng-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.eng-stage-label {
    text-align: center;
}

.eng-stage-label-tag {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    margin-bottom: .2rem;
}

.eng-stage-label-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -.3px;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

@media (min-width: 768px) {
    .eng-stage-label-name {
        font-size: 1.7rem;
    }
}

@media (min-width: 1200px) {
    .eng-stage-label-name {
        font-size: 2rem;
    }
}

/* Bat image strip — direct floating product (no card) */
.eng-bat-strip {
    position: relative;
    width: 100%;
    aspect-ratio: 15 / 2;
    overflow: hidden;
}

/* Resting (offscreen right, tilted as if "wound up" to be thrown) */
.eng-bat-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translateX(110%) translateY(-6%) rotate(8deg);
    transition: opacity .55s cubic-bezier(.2, .8, .25, 1),
                transform .85s cubic-bezier(.2, 1.25, .35, 1);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Thrown in and settled at center */
.eng-bat-img.is-active {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0deg);
    pointer-events: auto;
}

/* Leaving — slides off to the left with reverse tilt */
.eng-bat-img.is-leaving {
    opacity: 0;
    transform: translateX(-110%) translateY(-4%) rotate(-6deg);
    transition: opacity .5s cubic-bezier(.4, 0, .8, .4),
                transform .65s cubic-bezier(.4, 0, .8, .4);
}

@media (prefers-reduced-motion: reduce) {
    .eng-bat-img {
        transform: none;
        transition: opacity .25s ease;
    }
    .eng-bat-img.is-leaving {
        transform: none;
    }
}

/* Dot indicators */
.eng-stage-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
}

.eng-stage-dot {
    position: relative;
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .25s ease, width .25s ease;
}

.eng-stage-dot:hover,
.eng-stage-dot:focus-visible {
    background: rgba(255, 255, 255, .4);
    outline: none;
}

.eng-stage-dot.is-active {
    width: 44px;
    background: rgba(255, 255, 255, .22);
}

.eng-stage-dot-fill {
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: inherit;
    transform-origin: left center;
    transform: scaleX(0);
}

.eng-stage-dot.is-active .eng-stage-dot-fill {
    animation: eng-dot-fill 3s linear forwards;
}

@keyframes eng-dot-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.eng-stage:hover .eng-stage-dot.is-active .eng-stage-dot-fill,
.eng-stage:focus-within .eng-stage-dot.is-active .eng-stage-dot-fill {
    animation-play-state: paused;
}

@media (min-width: 768px) {
    .eng-stage-card-name {
        font-size: 1.1rem;
    }

    .eng-stage-card-price {
        font-size: .92rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eng-stage-card {
        transition: opacity .2s ease;
        transform: none;
    }

    .eng-stage-dot-fill {
        animation: none;
        transform: scaleX(1);
    }
}

/* Stat strip — white on red gradient */
.eng-hero-stats {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .9rem 1.5rem;
}

.eng-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    letter-spacing: .3px;
}

.eng-hero-stat strong {
    color: #ffffff;
    font-weight: 800;
    margin-right: .15rem;
}

.eng-hero-stat i {
    color: #ffd6e0;
    font-size: .95rem;
}

.eng-hero-stat-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .2);
    display: none;
}

@media (min-width: 576px) {
    .eng-hero-stat-divider {
        display: inline-block;
    }
}

@media (min-width: 992px) {
    .eng-hero-stats {
        margin-top: 2.5rem;
    }
}

/* ===== Site footer ===== */
.site-footer {
    --footer-link-color: rgba(255, 255, 255, .7);
    --footer-link-hover: #ffffff;
    --footer-divider: rgba(255, 255, 255, .1);
    font-size: .82rem;
}

.site-footer .footer-heading {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: 1.2px;
    color: #fff;
    margin-bottom: .85rem;
    position: relative;
    padding-bottom: .45rem;
    font-weight: 700;
}

.site-footer .footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 2px;
    background: var(--secondary);
    border-radius: 2px;
}

.site-footer .footer-list {
    margin: 0;
}

.site-footer .footer-list li {
    margin-bottom: .35rem;
}

.site-footer .footer-link {
    color: var(--footer-link-color);
    text-decoration: none;
    font-size: .82rem;
    line-height: 1.5;
    transition: color .15s ease, padding-left .15s ease;
    display: inline-block;
}

.site-footer .footer-link:hover,
.site-footer .footer-link:focus {
    color: var(--footer-link-hover);
}

.site-footer .footer-list .footer-link:hover,
.site-footer .footer-list .footer-link:focus {
    padding-left: 3px;
}

.site-footer .footer-contact {
    color: var(--footer-link-color);
    font-size: .82rem;
    line-height: 1.55;
}

.site-footer .footer-contact i {
    color: #ffffff;
    font-size: .85rem;
}

/* Bottom strip */
.site-footer .footer-bottom {
    background-color: rgba(0, 0, 0, .22);
    border-top: 1px solid var(--footer-divider);
}

.site-footer .footer-bottom p {
    color: rgba(255, 255, 255, .65);
    font-size: .75rem;
    letter-spacing: .2px;
}

/* Compact mobile footer */
@media (max-width: 767.98px) {
    .site-footer .container.py-4 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .site-footer .footer-heading {
        font-size: .68rem;
        margin-bottom: .55rem;
        padding-bottom: .35rem;
    }

    .site-footer .footer-heading::after {
        width: 18px;
    }

    .site-footer .footer-list li {
        margin-bottom: .25rem;
    }

    .site-footer .footer-link,
    .site-footer .footer-contact {
        font-size: .78rem;
    }

    .site-footer .footer-bottom p {
        font-size: .7rem;
    }

    .site-footer .row.g-3 {
        --bs-gutter-y: 1.25rem;
    }
}

.sidebar-panel .form-check-input {
    background-color: #fff;
    border-color: rgba(0, 51, 102, .25);
}

.sidebar-panel .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.sidebar-panel .input-group-text,
.sidebar-panel .form-control {
    background-color: #fff;
    border-color: rgba(0, 51, 102, .15);
}

.sidebar-panel .form-control:focus {
    background-color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 .15rem rgba(0, 51, 102, .15);
}

.lift-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.lift-card:hover,
.lift-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
    border-color: rgba(0, 0, 0, .12);
}

.product-card {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover,
.product-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .10), 0 4px 10px rgba(16, 24, 40, .06);
}

.product-card-img-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 10%;
    background: #f7f7f8;
}

.product-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
}

.lift-card:hover .product-card-img {
    transform: scale(1.06);
}

.product-card-name {
    font-size: .85rem;
    line-height: 1.3;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    word-break: break-word;
}

.product-card-price {
    font-size: .95rem;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.product-card-rating {
    font-size: .75rem;
}

.product-card-rating .bi {
    margin-right: 1px;
}

.product-card-wishlist {
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(255, 255, 255, .95);
    color: var(--secondary);
    border: 1px solid var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, transform .2s;
    font-size: .75rem;
    line-height: 1;
}

.product-card-wishlist:hover,
.product-card-wishlist:focus-visible {
    transform: scale(1.08);
    outline: none;
}

.product-card-wishlist.is-active {
    background: var(--secondary);
    color: #fff;
}

.product-card-wishlist.is-active .bi-heart::before {
    content: "\F415";
}

.product-card-description {
    font-size: .72rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.product-card-cta {
    font-size: .72rem;
    letter-spacing: .8px;
    padding: .5rem .5rem;
    border-radius: .65rem;
}

@media (min-width: 576px) {
    .product-card-cta {
        font-size: .78rem;
        padding: .55rem .75rem;
    }
}

.search-side-img-wrap {
    width: 110px;
    min-height: 130px;
}

.search-side-img {
    max-height: 110px;
}

@media (min-width: 576px) {
    .product-card-name {
        font-size: .85rem;
    }

    .product-card-price {
        font-size: 1rem;
    }

    .search-side-img-wrap {
        width: 160px;
        min-height: 160px;
    }

    .search-side-img {
        max-height: 140px;
    }
}

@media (min-width: 992px) {
    .product-card-name {
        font-size: .9rem;
    }

    .product-card-price {
        font-size: 1.05rem;
    }
}

/* ========== Product Details Page (modern, compact) ========== */
.pd-section {
    background: #FAFAFA;
}

/* gallery card — thin outer border, contains main image + vertical thumb column */
.pd-gallery-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.pd-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 78px;
    gap: 8px;
    align-items: stretch;
}

.pd-gallery-main {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    position: relative;
}

.pd-gallery-slider {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.pd-gallery-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    height: 100%;
    padding: 8px;
}

.pd-gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
    transition: transform .35s ease;
}

.pd-gallery-main:hover .pd-gallery-slide img {
    transform: scale(1.02);
}

/* compact slider heights — override the global .sub-detail-slider defaults */
.pd-gallery-card .sub-detail-slider .owl-stage-outer {
    height: 240px;
}

@media (min-width: 768px) {
    .pd-gallery-card .sub-detail-slider .owl-stage-outer {
        height: 280px;
    }
}

@media (min-width: 1200px) {
    .pd-gallery-card .sub-detail-slider .owl-stage-outer {
        height: 320px;
    }
}

/* vertical thumbnail column on the right of the main image */
.pd-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-start;
}

.pd-thumb {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
    cursor: pointer;
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 4px;
}

.pd-thumb:hover {
    border-color: #111827;
}

.pd-thumb.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

@media (max-width: 575.98px) {
    .pd-gallery-grid {
        grid-template-columns: 1fr 64px;
        gap: 6px;
    }

    .pd-gallery-card {
        padding: 6px;
    }
}

.pd-info {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.pd-info-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.pd-sku {
    font-size: .7rem;
    letter-spacing: .06em;
    color: #6B7280;
    font-weight: 700;
    text-transform: uppercase;
}

.pd-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}

.pd-stock--in {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid rgba(4, 120, 87, 0.18);
}

.pd-stock--out {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid rgba(185, 28, 28, 0.18);
}

.pd-stock i {
    font-size: .75rem;
    line-height: 1;
}

.pd-name {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--primary);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.pd-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-bottom: 12px;
}

.pd-price-sell {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--secondary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pd-price-mrp {
    font-size: .9rem;
    color: #9CA3AF;
    text-decoration: line-through;
    font-weight: 500;
}

.pd-short-desc {
    color: #4B5563;
    font-size: .85rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

.pd-form {
    margin: 0;
}

.pd-variants {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
    margin-bottom: 14px;
}

.pd-variant {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .pd-variants {
        grid-template-columns: 1fr;
    }
}

.pd-variant-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .04em;
    margin: 0;
    text-transform: uppercase;
}

.pd-variant-select {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: .85rem;
    background-color: #fff;
    color: #111827;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.pd-variant-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(153, 0, 51, 0.10);
    outline: none;
}

.pd-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pd-quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    height: 40px;
    flex-shrink: 0;
}

.pd-qty-btn {
    width: 34px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
    cursor: pointer;
}

.pd-qty-btn:hover {
    background: rgba(0, 51, 102, 0.06);
}

.pd-qty-btn:focus {
    outline: none;
}

.pd-qty-btn:disabled {
    color: #D1D5DB;
    cursor: not-allowed;
}

.pd-qty-input {
    width: 40px;
    height: 100%;
    border: 0;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    background: #fff;
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    color: var(--primary);
}

.pd-qty-input:focus {
    outline: none;
}

.pd-cta {
    flex: 1 1 180px;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    background: var(--secondary);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .01em;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    box-shadow: 0 4px 12px rgba(153, 0, 51, 0.20);
}

.pd-cta:hover {
    background: #7a0028;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(153, 0, 51, 0.28);
    color: #fff;
}

.pd-cta:disabled {
    background: #D1D5DB;
    color: #6B7280;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.pd-wishlist {
    width: 40px;
    height: 40px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    color: var(--secondary);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    flex-shrink: 0;
}

.pd-wishlist:hover {
    background: rgba(153, 0, 51, 0.08);
    border-color: rgba(153, 0, 51, 0.35);
}

.pd-wishlist.active,
.pd-wishlist[aria-pressed="true"] {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.pd-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed #E5E7EB;
}

.pd-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #F9FAFB;
    border-radius: 8px;
    border: 1px solid #F0F2F5;
}

.pd-trust-item i {
    font-size: 1.05rem;
    color: var(--secondary);
    flex-shrink: 0;
    line-height: 1;
}

.pd-trust-item strong {
    font-size: .72rem;
    color: var(--primary);
    display: block;
    line-height: 1.2;
    font-weight: 700;
}

.pd-trust-item span {
    font-size: .65rem;
    color: #6B7280;
    display: block;
    line-height: 1.3;
    margin-top: 1px;
}

.pd-description {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.pd-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pd-section-title-tag {
    display: inline-block;
    font-size: .62rem;
    font-weight: 800;
    color: var(--secondary);
    background: rgba(153, 0, 51, 0.08);
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pd-description-content {
    color: #374151;
    font-size: .9rem;
    line-height: 1.6;
}

.pd-description-content p {
    margin-bottom: .85em;
}

.pd-description-content p:last-child {
    margin-bottom: 0;
}

.pd-description-content h1,
.pd-description-content h2,
.pd-description-content h3,
.pd-description-content h4 {
    color: var(--primary);
    margin-top: 1.1em;
    margin-bottom: .5em;
    font-weight: 700;
}

.pd-description-content ul,
.pd-description-content ol {
    padding-left: 1.2rem;
    margin-bottom: .85em;
}

.pd-description-content li {
    margin-bottom: .3em;
}

.pd-description-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.pd-description-content a {
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pd-description-content a:hover {
    color: #7a0028;
}

/* compact gallery slider height overrides */
.pd-gallery .sub-detail-slider .owl-stage-outer {
    height: 320px;
}

@media (min-width: 576px) {
    .pd-trust {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .pd-info {
        padding: 20px;
    }

    .pd-name {
        font-size: 1.45rem;
        margin-bottom: 12px;
    }

    .pd-price-sell {
        font-size: 1.6rem;
    }

    .pd-price-mrp {
        font-size: 1rem;
    }

    .pd-description {
        padding: 22px;
    }

    .pd-section-title {
        font-size: 1.25rem;
    }

    .pd-description-content {
        font-size: .95rem;
        line-height: 1.65;
    }

    .pd-gallery .sub-detail-slider .owl-stage-outer {
        height: 440px;
    }
}

@media (max-width: 575.98px) {
    .pd-info {
        padding: 14px;
    }

    .pd-name {
        font-size: 1.1rem;
    }

    .pd-price-sell {
        font-size: 1.25rem;
    }

    .pd-actions {
        gap: 6px;
    }

    .pd-cta {
        flex: 1 1 100%;
        order: 3;
    }

    .pd-quantity {
        order: 1;
    }

    .pd-wishlist {
        order: 2;
    }

    .pd-description {
        padding: 14px;
    }

    .pd-section-title {
        font-size: 1rem;
    }

    .pd-gallery .sub-detail-slider .owl-stage-outer {
        height: 280px;
    }
}



/* ========== Product Details v2 — modern (reference-matched) ========== */
.pd2-section {
    background: #FAFAFA;
}

/* outer white card wrapping gallery + info */
.pd2-card {
    background: #ffffff;
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .pd2-card { padding: 2rem; }
}

@media (min-width: 992px) {
    .pd2-card { padding: 2.5rem; }
}

.pd2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .pd2-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (min-width: 1400px) {
    .pd2-grid { gap: 3rem; }
}

/* ---------- Gallery ---------- */
.pd2-gallery {
    display: flex;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .pd2-gallery { flex-direction: column-reverse; }
}

.pd2-thumbs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 80px;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .pd2-thumbs {
        flex-direction: row;
        width: 100%;
        gap: 0.75rem;
        overflow-x: auto;
    }
}

.pd2-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    background: #ffffff;
    transition: border-color 0.2s ease;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .pd2-thumb {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
}

.pd2-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    display: block;
    padding: 4px;
}

.pd2-thumb:hover,
.pd2-thumb.is-active {
    border-color: var(--secondary);
}

.pd2-main-image {
    flex: 1;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    min-width: 0;
}

.pd2-slider {
    background: #ffffff;
}

.pd2-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #ffffff;
    padding: 16px;
}

.pd2-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* slider height */
.pd2-card .sub-detail-slider .owl-stage-outer {
    height: 320px;
}

@media (min-width: 768px) {
    .pd2-card .sub-detail-slider .owl-stage-outer { height: 380px; }
}

@media (min-width: 1200px) {
    .pd2-card .sub-detail-slider .owl-stage-outer { height: 440px; }
}

/* hide owl arrows — reference uses thumbnail-driven nav */
.pd2-card .sub-detail-slider .owl-nav { display: none; }

/* ---------- Info ---------- */
.pd2-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.pd2-meta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pd2-sku {
    color: #6B7280;
    font-weight: 600;
}

.pd2-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.pd2-stock-badge i { font-size: 0.85rem; }

.pd2-stock-badge--in {
    background-color: #ECFDF5;
    color: #059669;
}

.pd2-stock-badge--out {
    background-color: #FEF2F2;
    color: #B91C1C;
}

.pd2-stock-badge--pickup-only {
    background-color: #FEF3C7;
    color: #B45309;
    border: 1px solid rgba(180, 83, 9, 0.25);
}

/* ── Pickup-only notice on the PDP ──
   Slim one-line info banner under the variant selectors. The header chip
   already calls out the "Pickup at Counter only" state; this just supplies
   the short "why" so the customer can decide whether to remove or proceed.

   Margins mirror the PDP rhythm. On mobile, the options-grid above has no
   bottom margin so the notice supplies symmetric 1rem gaps on both sides.
   On desktop (≥992px), the options-grid below already adds 2rem of bottom
   spacing, so the notice keeps its top margin at 0 and adds 2rem below to
   maintain the same gap pattern between major blocks. */
.pd2-pickup-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.5rem 0.75rem;
    background: #FFFBEB;
    border-left: 3px solid #D97706;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #78350F;
}

@media (min-width: 992px) {
    .pd2-pickup-notice {
        margin: 0 0 2rem;
    }
}

.pd2-pickup-notice-icon {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: #B45309;
    line-height: 1;
}

.pd2-pickup-notice-text {
    flex: 1 1 auto;
}

.pd2-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

@media (min-width: 992px) {
    .pd2-title { font-size: 2rem; }
}

.pd2-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .pd2-price {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}

.pd2-price-sell {
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
}

.pd2-price-mrp {
    font-size: 1rem;
    color: #9CA3AF;
    text-decoration: line-through;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 992px) {
    .pd2-price-mrp { font-size: 1.1rem; }
}

.pd2-form { margin: 0; }

.pd2-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
    .pd2-options-grid { grid-template-columns: 1fr; }
}

@media (min-width: 992px) {
    .pd2-options-grid { margin-bottom: 2rem; }
}

.pd2-input-group { min-width: 0; }

.pd2-input-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pd2-custom-select {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1F2937;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd2-custom-select:hover,
.pd2-custom-select:focus {
    border-color: var(--secondary);
    outline: none;
}

.pd2-custom-select:focus {
    box-shadow: 0 0 0 3px rgba(153, 0, 51, 0.12);
}

.pd2-action-area {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    height: 52px;
}

@media (max-width: 575.98px) {
    .pd2-action-area {
        flex-wrap: wrap;
        height: auto;
        gap: 0.5rem;
    }
}

.pd2-qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    height: 52px;
}

.pd2-qty-btn {
    background: none;
    border: 0;
    width: 40px;
    height: 100%;
    cursor: pointer;
    color: var(--secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 800;
}

.pd2-qty-btn i {
    font-weight: 800;
    -webkit-text-stroke: 0.5px currentColor;
}

.pd2-qty-btn:hover {
    background: rgba(153, 0, 51, 0.06);
    color: var(--secondary);
}

.pd2-qty-btn:disabled {
    color: #D1D5DB;
    cursor: not-allowed;
}

.pd2-qty-input {
    width: 40px;
    height: 100%;
    text-align: center;
    border: 0;
    font-weight: 700;
    font-size: 1rem;
    color: #1F2937;
    background: #fff;
}

.pd2-qty-input:focus { outline: none; }

.pd2-btn-primary {
    flex: 1;
    background-color: var(--secondary);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(153, 0, 51, 0.20);
    height: 52px;
    min-width: 0;
    padding: 0 1.25rem;
}

.pd2-btn-primary i { font-size: 1.05rem; }

.pd2-btn-primary:hover {
    background-color: #6a0226;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(153, 0, 51, 0.30);
    color: #fff;
}

.pd2-btn-primary:disabled {
    background-color: #D1D5DB;
    color: #6B7280;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 575.98px) {
    .pd2-btn-primary {
        flex: 1 1 100%;
        order: 3;
    }
}

.pd2-btn-wishlist {
    width: 52px;
    height: 52px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    color: #6B7280;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.pd2-btn-wishlist:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

.pd2-btn-wishlist.active,
.pd2-btn-wishlist[aria-pressed="true"] {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

/* ---------- Description card ---------- */
.pd2-section-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1F2937;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .pd2-section-title { font-size: 1.45rem; }
}

.pd2-section-title-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--secondary);
    background: rgba(153, 0, 51, 0.08);
    padding: 5px 11px;
    border-radius: 999px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pd2-description-content {
    color: #334155;
    font-size: 0.96rem;
    line-height: 1.75;
}

.pd2-description-content p { margin-bottom: 1em; }
.pd2-description-content p:last-child { margin-bottom: 0; }

.pd2-description-content h1,
.pd2-description-content h2,
.pd2-description-content h3,
.pd2-description-content h4 {
    color: #1F2937;
    margin-top: 1.3em;
    margin-bottom: 0.5em;
    font-weight: 700;
}

.pd2-description-content ul,
.pd2-description-content ol {
    padding-left: 1.3rem;
    margin-bottom: 1em;
}

.pd2-description-content li { margin-bottom: 0.35em; }

.pd2-description-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.pd2-description-content a {
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pd2-description-content a:hover { color: #6a0226; }




/* ========== Featured Products section — compact ========== */
.fp-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F8 60%, #FFFFFF 100%);
    padding: 32px 0;
    position: relative;
}

@media (min-width: 992px) {
    .fp-section { padding: 48px 0; }
}

.fp-header {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

@media (min-width: 992px) {
    .fp-header { margin-bottom: 28px; gap: 12px; }
}

.fp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(153, 0, 51, 0.08);
    font-size: .68rem;
    font-weight: 700;
    color: var(--secondary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.fp-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 4px rgba(153, 0, 51, 0.18);
    display: inline-block;
}

.fp-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.025em;
}

@media (min-width: 576px) { .fp-title { font-size: 1.9rem; } }
@media (min-width: 768px) { .fp-title { font-size: 2.2rem; } }
@media (min-width: 1200px) { .fp-title { font-size: 2.5rem; } }

.fp-title-accent {
    color: var(--secondary);
    display: inline-block;
}

.fp-footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

@media (min-width: 992px) { .fp-footer { margin-top: 32px; } }

.fp-view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .22s ease, transform .15s ease, box-shadow .22s ease;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.18);
}

.fp-view-all i {
    font-size: .95rem;
    transition: transform .22s ease;
}

.fp-view-all:hover {
    background: var(--secondary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(153, 0, 51, 0.28);
}

.fp-view-all:hover i { transform: translateX(3px); }

@media (max-width: 575.98px) {
    .fp-section { padding: 24px 0; }
    .fp-header { margin-bottom: 16px; }
    .fp-view-all { padding: 10px 18px; font-size: .8rem; }
    .fp-footer { margin-top: 18px; }
}


/* ========== Breadcrumb — modern ========== */
.brc-section {
    background: #ffffff;
    border-bottom: 1px solid #E5E7EB;
    padding: 14px 0;
}

@media (min-width: 992px) {
    .brc-section { padding: 10px 0; }
}

.brc {
    display: block;
}

.brc-list {
    list-style: none;
    margin: 0;
    padding: 4px 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    overflow: visible;
}

.brc-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.brc-item--current {
    min-width: 0;
    flex-shrink: 1;
}

/* home icon — circular tinted button */
.brc-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: rgba(0, 51, 102, 0.08);
    color: var(--primary);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
    line-height: 1;
    overflow: visible;
}

.brc-home i {
    font-size: .95rem;
    line-height: 1;
    display: inline-block;
}

.brc-home:hover {
    background: var(--primary);
    color: #fff;
}

/* intermediate links */
.brc-link {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 8px;
    color: #64748B;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
    white-space: nowrap;
}

.brc-link:hover {
    background: rgba(0, 51, 102, 0.06);
    color: var(--primary);
}

/* chevron separator */
.brc-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
    flex-shrink: 0;
    pointer-events: none;
    line-height: 1;
    padding: 0 2px;
}

.brc-sep i {
    font-size: .75rem;
    line-height: 1;
    display: inline-block;
}

/* current page */
.brc-current {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(153, 0, 51, 0.08);
    color: var(--secondary);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.005em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .brc-home {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .brc-home i { font-size: .85rem; }

    .brc-link,
    .brc-current {
        font-size: .78rem;
        padding: 5px 8px;
    }

    .brc-sep i { font-size: .7rem; }

    .brc-list { gap: 4px; }

    .brc-item--current { max-width: 200px; }
}


/* ========== Checkout Steps — compact, full-width ========== */
.cs-section {
    background: #ffffff;
    border-bottom: 1px solid #E5E7EB;
    padding: 10px 0;
}

@media (min-width: 992px) {
    .cs-section { padding: 12px 0; }
}

.cs-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 6px;
}

.cs-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    position: relative;
}

/* Connector — flexible line between steps (vertically centered with the badge) */
.cs-connector {
    flex: 1 1 auto;
    height: 2px;
    background: #E5E7EB;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    transition: background-color .35s ease;
    min-width: 12px;
}

.cs-connector::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #10B981, #059669);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.cs-connector--done::after {
    transform: scaleX(1);
}

/* Step icon — small circular badge */
.cs-step-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    color: #94A3B8;
    border: 1.5px solid #E5E7EB;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease,
                box-shadow .3s ease, transform .2s ease;
    position: relative;
    flex-shrink: 0;
}

.cs-step-icon i {
    font-size: .82rem;
    line-height: 1;
}

.cs-step-num {
    display: none;
}

/* Step label inline next to badge */
.cs-step-label {
    font-size: .8rem;
    font-weight: 600;
    color: #94A3B8;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: color .25s ease;
    white-space: nowrap;
}

/* --- DONE state --- */
.cs-step--done .cs-step-icon {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.22);
}

.cs-step--done .cs-step-label {
    color: #059669;
    font-weight: 700;
}

/* --- ACTIVE state --- */
.cs-step--active .cs-step-icon {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.25),
                0 0 0 4px rgba(0, 51, 102, 0.10);
}

.cs-step--active .cs-step-label {
    color: var(--primary);
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .cs-connector::after { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 767.98px) {
    .cs-stepper { gap: 4px; }

    .cs-step { gap: 6px; }

    .cs-step-icon {
        width: 26px;
        height: 26px;
        border-width: 1.5px;
    }

    .cs-step-icon i { font-size: .72rem; }

    .cs-step-label { font-size: .72rem; }
}

/* ---------- Mobile — hide labels except active for compactness ---------- */
@media (max-width: 575.98px) {
    .cs-section { padding: 8px 0; }

    .cs-step { gap: 4px; }

    .cs-step-icon {
        width: 24px;
        height: 24px;
    }

    .cs-step-icon i { font-size: .68rem; }

    .cs-step-label {
        font-size: .65rem;
        font-weight: 700;
    }

    /* On mobile only the active step shows its label */
    .cs-step:not(.cs-step--active) .cs-step-label {
        display: none;
    }

    .cs-connector { min-width: 6px; }
}


/* ========== Cart Items — modern responsive cards ========== */
.ci-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ci-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.ci-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

@media (min-width: 992px) {
    .ci-card { padding: 18px; }
}

/* ---------- Top row: media + body + price ---------- */
.ci-top {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .ci-top {
        grid-template-columns: 100px 1fr auto;
        gap: 18px;
        align-items: center;
    }
}

/* media */
.ci-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ci-media-img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.ci-media--video {
    border: 0;
    background: #0F172A;
}

.ci-media--video .ci-media-img {
    object-fit: cover;
    padding: 0;
}

.ci-media-veil {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
}

.ci-media-play {
    position: absolute;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1;
    opacity: 0.95;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

/* body */
.ci-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ci-name {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 992px) {
    .ci-name {
        font-size: 1.05rem;
        -webkit-line-clamp: 1;
    }
}

.ci-name-icon {
    color: #10B981;
    margin-right: 6px;
}

.ci-sub {
    margin: 0;
    font-size: .82rem;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ci-sub i { font-size: .85rem; line-height: 1; }

/* status pill — out of stock / inactive */
.ci-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.ci-status i { font-size: .78rem; line-height: 1; }

.ci-status--oos {
    background: rgba(220, 38, 38, 0.10);
    color: #B91C1C;
}

.ci-status--inactive {
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
}

/* customization / video badges */
.ci-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.ci-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    border: 1px solid transparent;
}

.ci-badge i { font-size: .8rem; line-height: 1; }

.ci-badge--attr {
    background: #F1F5F9;
    color: #334155;
}

.ci-badge--ship {
    background: rgba(100, 116, 139, 0.10);
    color: #475569;
}

.ci-badge--digital {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
}

.ci-badge--pickup {
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
}

.ci-badge--pickup-only {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.25);
    font-weight: 600;
}

.ci-badge--regular {
    background: rgba(0, 51, 102, 0.10);
    color: var(--primary);
}

.ci-badge--tournament {
    background: rgba(245, 158, 11, 0.12);
    color: #B45309;
}

.ci-badge--championship {
    background: rgba(168, 85, 247, 0.12);
    color: #7E22CE;
}

.ci-badge--interview {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.ci-badge--field {
    background: rgba(220, 38, 38, 0.10);
    color: #B91C1C;
}

.ci-badge--date {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
}

.ci-badge--time {
    background: rgba(100, 116, 139, 0.10);
    color: #475569;
}

/* order line an admin removed / cancelled (Account/OrderDetails) */
.ci-badge--removed {
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.25);
}

/* desktop-only price column */
.ci-price-col {
    display: none;
}

@media (min-width: 992px) {
    .ci-price-col {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        white-space: nowrap;
    }
}

.ci-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ---------- Foot: qty + subtotal + actions ---------- */
.ci-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #F1F5F9;
}

/* quantity stepper */
.ci-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    height: 40px;
    flex-shrink: 0;
}

.ci-qty--locked { opacity: 0.55; }

.ci-qty-btn {
    width: 36px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--secondary);
    font-size: 1.1rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.ci-qty-btn i {
    -webkit-text-stroke: 0.5px currentColor;
}

.ci-qty-btn:hover {
    background: rgba(153, 0, 51, 0.06);
}

.ci-qty-btn:disabled {
    color: #CBD5E1;
    cursor: not-allowed;
}

.ci-qty-input {
    width: 40px;
    height: 100%;
    border: 0;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    background: #ffffff;
    text-align: center;
    font-weight: 700;
    font-size: .95rem;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.ci-qty-input:focus { outline: none; }

/* subtotal */
.ci-subtotal-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
}

.ci-subtotal-label {
    font-size: .7rem;
    color: #94A3B8;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ci-subtotal {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.ci-subtotal--strike {
    color: #94A3B8;
    text-decoration: line-through;
}

/* actions */
.ci-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ci-action {
    width: 36px;
    height: 36px;
    border: 1px solid #E5E7EB;
    background: #ffffff;
    border-radius: 9px;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: .92rem;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}

.ci-action:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: translateY(-1px);
}

.ci-action--danger:hover {
    background: var(--secondary);
    color: #ffffff;
    border-color: var(--secondary);
}

.ci-action.move-to-wishlist:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
}

/* ---------- Grand total ---------- */
.ci-grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid #E5E7EB;
    margin-top: 4px;
}

.ci-grand-label {
    font-size: .92rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.01em;
}

.ci-grand-count {
    font-weight: 500;
    color: #64748B;
    margin-left: 4px;
}

.ci-grand-total {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

@media (min-width: 992px) {
    .ci-grand { padding: 18px 22px; }
    .ci-grand-label { font-size: 1rem; }
    .ci-grand-total { font-size: 1.65rem; }
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 575.98px) {
    .ci-card { padding: 12px; border-radius: 12px; }

    .ci-top {
        grid-template-columns: 72px 1fr;
        gap: 10px;
    }

    .ci-name { font-size: .9rem; }

    .ci-badge { font-size: .65rem; padding: 3px 8px; }
    .ci-badge i { font-size: .72rem; }

    .ci-foot {
        gap: 8px;
        padding-top: 10px;
        margin-top: 10px;
    }

    .ci-qty { height: 36px; }
    .ci-qty-btn { width: 32px; font-size: 1rem; }
    .ci-qty-input { width: 36px; font-size: .88rem; }

    .ci-subtotal { font-size: .98rem; }
    .ci-subtotal-label { display: none; }

    .ci-action {
        width: 32px;
        height: 32px;
        font-size: .82rem;
    }

    .ci-grand { padding: 14px; }
    .ci-grand-total { font-size: 1.3rem; }
}


/* ========== Checkout Address page — modern ========== */
.ca-section {
    background: transparent;
}

/* eyebrow + section headings */
.ca-block {
    margin-bottom: 28px;
}

.ca-block-head {
    margin-bottom: 16px;
}

.ca-block-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ca-eyebrow {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(153, 0, 51, 0.08);
    padding: 4px 11px;
    border-radius: 999px;
    line-height: 1;
    margin-bottom: 8px;
}

.ca-block-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.015em;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ca-block-title i {
    font-size: 1.05rem;
    color: var(--primary);
}

@media (min-width: 992px) {
    .ca-block-title { font-size: 1.4rem; }
    .ca-block-title i { font-size: 1.2rem; }
}

/* ---------- Notices ---------- */
.ca-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    margin-bottom: 22px;
}

.ca-notice i {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.ca-notice-title {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.ca-notice-text {
    font-size: .9rem;
    color: #475569;
    line-height: 1.5;
}

.ca-notice--digital {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
    border-color: rgba(16, 185, 129, 0.25);
}

.ca-notice--digital i { color: #059669; }

/* ---------- Empty state ---------- */
.ca-empty {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

.ca-empty-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    padding: 32px 28px;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

@media (min-width: 768px) {
    .ca-empty-card { padding: 40px 36px; }
}

.ca-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(0, 51, 102, 0.08);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
}

.ca-empty-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0 0 8px;
}

.ca-empty-text {
    font-size: .95rem;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 20px;
}

.ca-empty-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

@media (min-width: 576px) {
    .ca-empty-actions {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }
}

/* ---------- Buttons ---------- */
.ca-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.ca-btn i { font-size: .95rem; }

.ca-btn--primary {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 6px 14px rgba(0, 51, 102, 0.18);
}

.ca-btn--primary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(153, 0, 51, 0.25);
}

.ca-btn--outline {
    background: #ffffff;
    color: var(--primary);
    border-color: #E5E7EB;
}

.ca-btn--outline:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* Size modifiers kept for API compatibility but heights are uniform across the checkout flow */
.ca-btn--sm {
    padding: 0 18px;
    font-size: .9rem;
}

.ca-btn--lg {
    padding: 0 26px;
    font-size: .95rem;
}

.ca-btn--lg i { transition: transform .2s ease; }

.ca-btn--lg:hover i { transform: translateX(3px); }

/* ---------- Fulfillment methods ---------- */
.ca-fulfillment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .ca-fulfillment-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.ca-method {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .15s ease;
    margin: 0;
}

.ca-method:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 51, 102, 0.10);
}

.ca-method-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ca-method-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(0, 51, 102, 0.10);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background-color .2s ease, color .2s ease;
}

.ca-method-icon--alt {
    background: rgba(16, 185, 129, 0.10);
    color: #059669;
}

.ca-method-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.ca-method-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.ca-method-text {
    font-size: .82rem;
    color: #64748B;
    line-height: 1.45;
}

.ca-method-check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.ca-method.fulfillment-selected,
.fulfillment-option.fulfillment-selected {
    border-color: var(--secondary);
    background: linear-gradient(135deg, rgba(153, 0, 51, 0.04), rgba(153, 0, 51, 0));
    box-shadow: 0 12px 30px rgba(153, 0, 51, 0.12);
}

.ca-method.fulfillment-selected .ca-method-icon,
.fulfillment-option.fulfillment-selected .ca-method-icon {
    background: var(--secondary);
    color: #ffffff;
}

.ca-method.fulfillment-selected .ca-method-check,
.fulfillment-option.fulfillment-selected .ca-method-check {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
    transform: scale(1.05);
}

/* ---------- Address grid ---------- */
.ca-address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

@media (min-width: 768px) {
    .ca-address-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (min-width: 1200px) {
    .ca-address-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* ---------- Address card ---------- */
.ca-addr {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .15s ease;
    margin: 0;
}

.ca-addr:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.ca-addr-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* check indicator — top right */
.ca-addr-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ca-addr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-right: 32px;
}

.ca-addr-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--primary);
    font-size: .95rem;
    line-height: 1.3;
    min-width: 0;
}

.ca-addr-name i {
    color: var(--primary);
    flex-shrink: 0;
    font-size: 1rem;
}

.ca-addr-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-addr-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .85rem;
    color: #475569;
    line-height: 1.5;
}

.ca-addr-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ca-addr-line i {
    color: #94A3B8;
    font-size: .9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.ca-addr-line span {
    min-width: 0;
    word-break: break-word;
}

.ca-addr-email {
    word-break: break-all;
}

/* Edit / Delete footer — reuses the Address Book's .ab-action buttons. Pulled out to
   the card edges and pushed to the bottom so footers line up across a grid row. */
.ca-addr-actions {
    display: flex;
    align-items: stretch;
    margin: auto -16px -16px;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFC;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    cursor: default;
}

.ca-addr-actions .ab-action + .ab-action {
    border-left: 1px solid #F1F5F9;
}

/* default badge */
.ca-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ca-badge i { font-size: .75rem; line-height: 1; }

.ca-badge--shipping {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.ca-badge--billing {
    background: rgba(245, 158, 11, 0.14);
    color: #B45309;
}

/* selected states (preserves JS hook names) */
.ca-addr.address-card-shipping-selected {
    border-color: #10B981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0));
    box-shadow: 0 12px 26px rgba(16, 185, 129, 0.12);
}

.ca-addr.address-card-shipping-selected .ca-addr-check {
    background: #10B981;
    border-color: #10B981;
    color: #ffffff;
}

.ca-addr.address-card-billing-selected {
    border-color: #F59E0B;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0));
    box-shadow: 0 12px 26px rgba(245, 158, 11, 0.14);
}

.ca-addr.address-card-billing-selected .ca-addr-check {
    background: #F59E0B;
    border-color: #F59E0B;
    color: #ffffff;
}

/* ---------- Different billing toggle ---------- */
.ca-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
    margin: 6px 0 24px;
}

.ca-toggle:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.ca-toggle-switch {
    flex-shrink: 0;
}

.ca-toggle-switch .form-check-input {
    cursor: pointer;
    width: 2.5em;
    height: 1.3em;
    background-color: #CBD5E1;
    border-color: transparent;
    transition: background-color .2s ease;
}

.ca-toggle-switch .form-check-input:checked {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.ca-toggle-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(153, 0, 51, 0.18);
}

.ca-toggle-label {
    font-weight: 700;
    color: var(--primary);
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ca-toggle-label i {
    font-size: 1rem;
    color: var(--secondary);
}

/* ---------- Actions footer ---------- */
.ca-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .ca-actions {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
}

.ca-actions-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 768px) {
    .ca-actions-right {
        flex-direction: row;
        gap: 12px;
    }
}

.ca-btn:disabled,
.ca-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .ca-method {
        padding: 14px;
        gap: 12px;
    }

    .ca-method-icon { width: 40px; height: 40px; font-size: 1.05rem; }
    .ca-method-title { font-size: .92rem; }
    .ca-method-text { font-size: .78rem; }

    .ca-method-check { top: 12px; right: 12px; width: 22px; height: 22px; }

    .ca-addr { padding: 14px; }
    .ca-addr-name { font-size: .88rem; }
    .ca-addr-body { font-size: .8rem; }
    .ca-addr-check { width: 22px; height: 22px; }

    .ca-toggle { padding: 12px 14px; }
    .ca-toggle-label { font-size: .85rem; }

    .ca-btn { font-size: .88rem; }
}


/* ========== Checkout Summary — modern ========== */
.cs2-section { background: transparent; }

/* alerts */
.cs2-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    background: #ffffff;
    margin-bottom: 18px;
    font-size: .9rem;
    color: #334155;
    line-height: 1.5;
}

.cs2-alert i {
    flex-shrink: 0;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 1px;
}

.cs2-alert--danger {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.25);
}

.cs2-alert--danger i { color: #B91C1C; }

.cs2-alert--warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.30);
}

.cs2-alert--warning i { color: #B45309; }

.cs2-alert a {
    color: var(--secondary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cs2-alert-list { margin: 6px 0 0; padding-left: 1.2rem; }
.cs2-alert-list li { margin-bottom: 3px; }

/* page header */
.cs2-page-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 22px;
}

.cs2-page-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cs2-page-title i { font-size: 1.3rem; color: var(--primary); }

@media (min-width: 992px) {
    .cs2-page-title { font-size: 1.8rem; }
    .cs2-page-title i { font-size: 1.55rem; }
}

/* layout grid */
.cs2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

@media (min-width: 992px) {
    .cs2-grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 28px;
    }
}

@media (min-width: 1400px) {
    .cs2-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; }
}

.cs2-items-col { min-width: 0; }

.cs2-side-col { min-width: 0; }

.cs2-sticky {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 992px) {
    .cs2-sticky {
        position: sticky;
        top: 90px;
    }
}

/* ---------- Generic card ---------- */
.cs2-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.cs2-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #FAFBFC 0%, #F1F4F8 100%);
    border-bottom: 1px solid #E5E7EB;
}

@media (min-width: 768px) {
    .cs2-card-head { padding: 16px 20px; }
}

.cs2-card-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cs2-card-title {
    font-weight: 800;
    color: var(--primary);
    font-size: 1rem;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cs2-card-title i { color: var(--primary); font-size: 1.05rem; }

.cs2-card-title-count {
    font-weight: 600;
    color: #64748B;
    font-size: .9rem;
}

.cs2-card-subtitle {
    font-size: .78rem;
    color: #64748B;
    font-weight: 500;
}

.cs2-card-body {
    padding: 16px;
}

.cs2-card-body--flush { padding: 0; }

/* ---------- Parcel grouping ---------- */
.cs2-parcel {
    border-left: 3px solid var(--secondary);
}

.cs2-parcel--digital {
    border-left-color: #10B981;
}

.cs2-parcel--other {
    border-left-color: #94A3B8;
}

/* every row in the group was removed / cancelled */
.cs2-parcel--removed {
    border-left-color: #CBD5E1;
}

.cs2-parcel + .cs2-parcel {
    margin-top: 0;
}

.cs2-parcel-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid #E5E7EB;
    background: rgba(153, 0, 51, 0.05);
    cursor: pointer;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .15s ease;
}

.cs2-parcel-toggle:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: -2px;
}

.cs2-parcel-toggle:hover {
    background: rgba(153, 0, 51, 0.10);
}

.cs2-parcel-toggle--digital {
    background: rgba(16, 185, 129, 0.08);
}

.cs2-parcel-toggle--digital:hover {
    background: rgba(16, 185, 129, 0.14);
}

.cs2-parcel-icon {
    color: var(--secondary);
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.cs2-parcel-icon--digital { color: #047857; }

.cs2-parcel-label {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    font-weight: 700;
    color: #0F172A;
    font-size: .92rem;
    min-width: 0;
}

.cs2-parcel-name { white-space: nowrap; }

/* In the flex header the gap handles spacing — drop the standalone margins. */
.cs2-parcel-label .od-parcel-status,
.cs2-parcel-label .od-tracking { margin-left: 0; }

.cs2-parcel-count {
    font-size: .78rem;
    color: #64748B;
    font-weight: 600;
}

.cs2-parcel-chevron {
    color: var(--secondary);
    font-size: .75rem;
    transition: transform .2s ease;
}

.cs2-parcel-toggle--digital .cs2-parcel-chevron { color: #047857; }

.cs2-parcel-toggle.collapsed .cs2-parcel-chevron {
    transform: rotate(-90deg);
}

.cs2-parcel-empty {
    padding: 14px 16px;
    color: #94A3B8;
    font-size: .85rem;
}

/* ---------- Line item ---------- */
.cs2-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    min-width: 0;
}

.cs2-line:last-child { border-bottom: 0; }

@media (min-width: 768px) {
    .cs2-line { padding: 16px 20px; gap: 14px; }
}

.cs2-line-media {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

@media (min-width: 768px) {
    .cs2-line-media { width: 76px; height: 76px; }
}

.cs2-line-media--video {
    border: 0;
    background: #0F172A;
}

.cs2-line-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs2-line-img--contain {
    object-fit: contain;
    padding: 4px;
}

.cs2-line-veil {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
}

.cs2-line-play {
    position: absolute;
    color: #ffffff;
    font-size: 1.45rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.cs2-line-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs2-line-name {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs2-line-name-icon { color: #10B981; margin-right: 6px; }

.cs2-line-sub {
    margin: 0;
    font-size: .78rem;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cs2-line-sub i { font-size: .85rem; }

.cs2-line-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.cs2-line-qty {
    margin: 4px 0 0;
    font-size: .78rem;
    color: #64748B;
}

.cs2-line-qty strong { color: var(--primary); font-weight: 700; }

/* Info icon beside the tax row in the order summary, opening the per-item
   tax breakdown. Sized to sit inline with the row label without changing its
   line height. */
.cs2-info-btn {
    border: 0;
    background: none;
    padding: 0;
    margin-left: 6px;
    line-height: 1;
    color: var(--primary);
    vertical-align: baseline;
    cursor: pointer;
}

.cs2-info-btn:hover,
.cs2-info-btn:focus-visible {
    opacity: .75;
}

.cs2-info-btn i {
    font-size: .85em;
}

/* Tax breakdown table inside the modal. */
.cs2-tax-table thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #64748B;
    border-bottom: 2px solid #E2E8F0;
}

.cs2-tax-table td {
    font-size: .88rem;
}

.cs2-tax-table-total td {
    border-top: 2px solid #E2E8F0;
}

/* Per-line tax, shown under the qty line on order details. Deliberately a
   shade lighter than .cs2-line-qty so it reads as supporting detail rather
   than competing with the quantity and unit price above it. */
.cs2-line-tax {
    margin: 2px 0 0;
    font-size: .74rem;
    color: #94A3B8;
}

.cs2-line-tax strong { color: #64748B; font-weight: 600; }

.cs2-line-total {
    flex-shrink: 0;
    font-weight: 800;
    color: var(--primary);
    font-size: .98rem;
    font-variant-numeric: tabular-nums;
    align-self: center;
    letter-spacing: -0.01em;
}

/* units an admin removed / cancelled — kept in place, greyed out */
.cs2-line--removed { background: #FAFBFC; }
.cs2-line--removed .cs2-line-media { opacity: .55; filter: grayscale(1); }
.cs2-line--removed .cs2-line-name,
.cs2-line--removed .cs2-line-qty strong { color: #64748B; }
.cs2-line--removed .cs2-line-total { color: #94A3B8; font-weight: 700; }
.cs2-line--removed .cs2-line-total del { text-decoration-thickness: 1.5px; }

.cs2-line-removed-note {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .76rem;
    font-weight: 600;
    color: #b91c1c;
}

.cs2-line-removed-note i { font-size: .8rem; }

@media (max-width: 575.98px) {
    .cs2-line-total { font-size: .88rem; }
    .cs2-line { gap: 10px; padding: 12px 14px; }
    .cs2-line-media { width: 56px; height: 56px; }
    .cs2-line-name { font-size: .85rem; }
}

/* ---------- Sidebar cards ---------- */
.cs2-side-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    border-top: 3px solid #E5E7EB;
}

.cs2-side-card--success { border-top-color: #10B981; }
.cs2-side-card--warning { border-top-color: #F59E0B; }
.cs2-side-card--price { border-top-color: var(--secondary); }

.cs2-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 8px;
}

.cs2-side-title {
    font-weight: 800;
    color: var(--primary);
    font-size: .96rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}

.cs2-side-title i { font-size: 1.05rem; }

.cs2-side-card--success .cs2-side-title i { color: #059669; }
.cs2-side-card--warning .cs2-side-title i { color: #B45309; }
.cs2-side-card--price .cs2-side-title i { color: var(--secondary); }

.cs2-side-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(16, 185, 129, 0.25);
    transition: background-color .18s ease, color .18s ease;
}

.cs2-side-edit i { font-size: .75rem; }

.cs2-side-edit:hover {
    background: #047857;
    color: #ffffff;
}

.cs2-side-edit--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.30);
}

.cs2-side-edit--warning:hover {
    background: #B45309;
    color: #ffffff;
}

.cs2-side-body {
    padding: 4px 16px 16px;
}

.cs2-side-strong {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--primary);
    font-size: .92rem;
}

.cs2-side-text {
    margin: 0 0 3px;
    font-size: .84rem;
    color: #475569;
    line-height: 1.5;
}

.cs2-side-meta {
    margin: 6px 0 0;
    font-size: .82rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cs2-side-meta i {
    color: #94A3B8;
    font-size: .9rem;
}

.cs2-side-meta--break { word-break: break-all; }

.cs2-side-same {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #059669;
    font-size: .88rem;
}

.cs2-side-same i { font-size: 1rem; }

/* price list */
.cs2-price-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs2-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cs2-price-row dt {
    margin: 0;
    font-weight: 500;
    color: #64748B;
    font-size: .88rem;
}

.cs2-price-row dd {
    margin: 0;
    font-weight: 600;
    color: var(--primary);
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}

.cs2-price-row--discount dd {
    color: #059669;
    font-weight: 700;
}

/* refund block (Account/OrderDetails): Order Total → Refunded → Net Total */
.cs2-price-row--strong dt { color: var(--primary); font-weight: 700; }
.cs2-price-row--strong dd { font-weight: 700; }

.cs2-price-row--refund dt {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #047857;
    font-weight: 600;
}

.cs2-price-row--refund dd { color: #047857; font-weight: 700; }

.cs2-price-row--sub { padding-left: 12px; }
.cs2-price-row--sub dt,
.cs2-price-row--sub dd { font-size: .8rem; font-weight: 500; color: #64748B; }

.cs2-refund-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
}

.cs2-refund-pill--done {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.cs2-refund-pill--processing {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.cs2-price-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 14px 0 10px;
}

.cs2-price-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cs2-price-total-label {
    font-weight: 800;
    color: var(--primary);
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.cs2-price-total-value {
    font-weight: 800;
    color: var(--secondary);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.cs2-side-foot {
    padding: 12px 16px 16px;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFC;
}

/* agreement checkbox */
.cs2-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    margin-bottom: 12px;
    transition: border-color .18s ease, background-color .18s ease;
}

.cs2-agree:hover {
    border-color: var(--primary);
}

.cs2-agree-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cs2-agree-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid #CBD5E1;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .8rem;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    margin-top: 1px;
}

.cs2-agree-check:checked + .cs2-agree-box {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
}

.cs2-agree-text {
    font-size: .82rem;
    color: #334155;
    line-height: 1.45;
}

.cs2-agree-text a {
    color: var(--secondary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cs2-side-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ========== Order Confirmation — modern ========== */
.conf-section { background: transparent; position: relative; }

.conf-card {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
    padding: 36px 24px 32px;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 768px) {
    .conf-card { padding: 48px 48px 40px; }
}

/* soft radial glow behind the checkmark */
.conf-glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: 480px;
    background: radial-gradient(circle at center, rgba(70, 156, 35, 0.18), rgba(70, 156, 35, 0) 60%);
    pointer-events: none;
    z-index: 0;
}

.conf-card > *:not(.conf-glow) { position: relative; z-index: 1; }

/* checkmark */
.conf-check {
    width: 96px;
    height: 96px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: rgba(70, 156, 35, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(70, 156, 35, 0.08);
}

.conf-check svg { width: 64px; height: 64px; }

.success-checkmark svg { width: 64px; height: 64px; }

.success-check-circle {
    stroke-dasharray: 166; stroke-dashoffset: 166;
    stroke-width: 2; stroke-miterlimit: 10; stroke: #469C23;
    animation: strokeDraw .6s cubic-bezier(.65, 0, .45, 1) forwards;
}

.success-check-path {
    stroke-dasharray: 48; stroke-dashoffset: 48;
    stroke-width: 3; stroke-linecap: round; stroke: #469C23;
    animation: strokeDraw .3s cubic-bezier(.65, 0, .45, 1) .4s forwards;
}

@keyframes strokeDraw { to { stroke-dashoffset: 0; } }

/* title + subtitle */
.conf-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    opacity: 0;
    transform: translateY(20px) scale(.92);
    animation: confPopIn .5s ease .6s forwards;
}

@media (min-width: 768px) { .conf-title { font-size: 2rem; } }

.conf-subtitle {
    font-size: .95rem;
    color: #64748B;
    margin: 0 0 22px;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(10px);
    animation: confPopIn .4s ease .9s forwards;
}

@media (min-width: 768px) { .conf-subtitle { font-size: 1.02rem; } }

@keyframes confPopIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* order number */
.conf-order {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.04), rgba(153, 0, 51, 0.06));
    border: 1px solid rgba(0, 51, 102, 0.12);
    border-radius: 999px;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(10px);
    animation: confPopIn .4s ease 1.1s forwards;
}

.conf-order-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.conf-order-label i { color: var(--primary); font-size: .85rem; }

.conf-order-num {
    font-size: 1rem;
    font-weight: 800;
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* "what's next" list */
/* price summary (Subtotal → Tax w/ breakdown icon → Total) */
.conf-price {
    margin: 0 auto 20px;
    max-width: 440px;
    padding: 14px 16px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    animation: confPopIn .4s ease 1.2s forwards;
}

.conf-next {
    list-style: none;
    margin: 0 auto 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 440px;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    animation: confPopIn .4s ease 1.3s forwards;
}

.conf-next li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

.conf-next-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0, 51, 102, 0.10);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.conf-next-text {
    font-size: .85rem;
    color: #334155;
    line-height: 1.45;
}

/* actions — primary on top, secondary row below */
.conf-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(10px);
    animation: confPopIn .4s ease 1.5s forwards;
}

.conf-actions-primary {
    width: 100%;
    max-width: 320px;
}

.conf-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.conf-actions-secondary .ca-btn {
    flex: 0 1 auto;
}

@media (max-width: 480px) {
    .conf-actions-primary { max-width: 100%; }

    .conf-actions-secondary {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .conf-actions-secondary .ca-btn { width: 100%; }
}

/* confetti (kept inline so behavior matches existing JS) */
.success-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10000;
}

.confetti-piece {
    position: absolute;
    top: -10px;
    opacity: 0;
    animation: confettiFall var(--fall-duration, 2.5s) ease-in var(--fall-delay, 0s) forwards;
}

@keyframes confettiFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(100vh) rotate(var(--rotation, 720deg)) scale(.4); }
}

/* reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .conf-title,
    .conf-subtitle,
    .conf-order,
    .conf-next,
    .conf-actions {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .success-check-circle,
    .success-check-path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .confetti-piece { display: none; }
}

@media (max-width: 575.98px) {
    .conf-card { padding: 28px 18px 24px; border-radius: 18px; }
    .conf-check { width: 80px; height: 80px; margin-bottom: 18px; }
    .conf-check svg { width: 50px; height: 50px; }
    .conf-title { font-size: 1.35rem; }
    .conf-subtitle { font-size: .88rem; margin-bottom: 18px; }
    .conf-order { padding: 8px 14px; gap: 10px; margin-bottom: 22px; }
    .conf-order-label { font-size: .65rem; }
    .conf-order-num { font-size: .9rem; }
    .conf-next { gap: 8px; margin-bottom: 22px; }
    .conf-next li { padding: 8px 12px; gap: 10px; }
    .conf-next-icon { width: 28px; height: 28px; font-size: .82rem; }
    .conf-next-text { font-size: .8rem; }
}


/* ========== Empty Cart — modern ========== */
.empty-cart {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.empty-cart-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 22px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.06);
    padding: 36px 24px 32px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 768px) {
    .empty-cart-card { padding: 48px 40px 40px; }
}

/* soft radial accent behind the icon */
.empty-cart-glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at center, rgba(153, 0, 51, 0.10), rgba(153, 0, 51, 0) 65%);
    pointer-events: none;
    z-index: 0;
}

.empty-cart-card > *:not(.empty-cart-glow) {
    position: relative;
    z-index: 1;
}

/* big bag icon with floating "0" badge */
.empty-cart-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(153, 0, 51, 0.08);
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(153, 0, 51, 0.05);
    position: relative;
}

.empty-cart-icon > i {
    font-size: 2.4rem;
    line-height: 1;
}

.empty-cart-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--secondary);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(153, 0, 51, 0.25);
}

.empty-cart-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.025em;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .empty-cart-title { font-size: 1.85rem; }
}

.empty-cart-text {
    margin: 0 auto 24px;
    font-size: .95rem;
    color: #64748B;
    line-height: 1.6;
    max-width: 380px;
}

@media (min-width: 768px) {
    .empty-cart-text { font-size: 1rem; }
}

.empty-cart-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

@media (min-width: 480px) {
    .empty-cart-actions {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }

    .empty-cart-actions .ca-btn { flex: 0 1 auto; }
}

@media (max-width: 575.98px) {
    .empty-cart-card { padding: 28px 18px 24px; border-radius: 18px; }
    .empty-cart-icon { width: 80px; height: 80px; margin-bottom: 16px; }
    .empty-cart-icon > i { font-size: 2rem; }
    .empty-cart-text { font-size: .9rem; }
}


/* ========== Confirm Order Modal — modern ========== */
.cc-modal .modal-dialog { max-width: 540px; }

.cc-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

/* header — brand navy */
.cc-header {
    background: linear-gradient(135deg, #003366 0%, #002347 100%);
    color: #ffffff;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cc-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.cc-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-title-icon i {
    font-size: 1.05rem;
    line-height: 1;
}

@media (min-width: 576px) {
    .cc-title { font-size: 1.15rem; }
}

.cc-close {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .18s ease, transform .15s ease;
}

.cc-close i { font-size: .9rem; line-height: 1; }

.cc-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.cc-close:focus { outline: none; }

/* body */
.cc-body {
    padding: 22px;
    background: #ffffff;
}

@media (min-width: 576px) {
    .cc-body { padding: 26px; }
}

/* price callout */
.cc-price-card {
    background: linear-gradient(135deg, rgba(153, 0, 51, 0.06), rgba(0, 51, 102, 0.06));
    border: 1px solid rgba(153, 0, 51, 0.18);
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.cc-price-label {
    font-size: .68rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
}

.cc-price-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 6px;
}

@media (min-width: 576px) { .cc-price-value { font-size: 2.8rem; } }

.cc-price-note {
    font-size: .76rem;
    color: #64748B;
    line-height: 1.4;
}

/* info rows */
.cc-info {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cc-info-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .92rem;
    line-height: 1;
}

.cc-info-icon--primary {
    background: rgba(0, 51, 102, 0.10);
    color: var(--primary);
}

.cc-info-icon--warn {
    background: rgba(245, 158, 11, 0.14);
    color: #B45309;
}

.cc-info-icon--danger {
    background: rgba(220, 38, 38, 0.10);
    color: #B91C1C;
}

.cc-info-text {
    font-size: .85rem;
    color: #334155;
    line-height: 1.55;
    flex: 1;
    min-width: 0;
}

.cc-info-text strong { color: var(--primary); font-weight: 700; }

.cc-emph-primary { color: var(--secondary) !important; font-weight: 800 !important; }

.cc-noun { font-weight: 700; color: var(--primary); }

/* accept block */
.cc-accept {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    background: #F8FAFC;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
    margin: 0;
}

.cc-accept:hover {
    border-color: var(--secondary);
    background: rgba(153, 0, 51, 0.04);
}

.cc-accept-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.cc-accept-box {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid #CBD5E1;
    background: #ffffff;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .9rem;
    line-height: 1;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .15s ease;
}

.cc-accept-input:checked ~ .cc-accept-box {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
    transform: scale(1.05);
}

.cc-accept:has(.cc-accept-input:checked) {
    border-color: var(--secondary);
    background: rgba(153, 0, 51, 0.08);
}

.cc-accept-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cc-accept-title {
    font-weight: 800;
    color: var(--primary);
    font-size: .82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
}

.cc-accept:has(.cc-accept-input:checked) .cc-accept-title {
    color: var(--secondary);
}

.cc-accept-sub {
    font-size: .8rem;
    color: #64748B;
    line-height: 1.4;
}

/* footer */
.cc-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    background: #FAFBFC;
    border-top: 1px solid #E5E7EB;
}

@media (max-width: 480px) {
    .cc-footer {
        flex-direction: column;
        padding: 14px 18px;
    }
    .cc-footer .ca-btn { width: 100%; }
}

/* OK button pulse when enabled */
.cdp-confirm-ok:not(:disabled) {
    animation: ccOkPulse 1.6s ease-out 1;
}

@keyframes ccOkPulse {
    0%   { box-shadow: 0 6px 14px rgba(0, 51, 102, 0.18), 0 0 0 0 rgba(153, 0, 51, 0.55); }
    70%  { box-shadow: 0 6px 14px rgba(0, 51, 102, 0.18), 0 0 0 12px rgba(153, 0, 51, 0); }
    100% { box-shadow: 0 6px 14px rgba(0, 51, 102, 0.18), 0 0 0 0 rgba(153, 0, 51, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cc-close:hover { transform: none; }
    .cdp-confirm-ok:not(:disabled) { animation: none; }
    .cc-accept-input:checked ~ .cc-accept-box { transform: none; }
}

@media (max-width: 575.98px) {
    .cc-modal .modal-dialog { margin: 0.5rem; }
    .cc-content { border-radius: 16px; }
    .cc-header { padding: 14px 18px; }
    .cc-body { padding: 18px; }
    .cc-price-card { padding: 14px 16px; margin-bottom: 18px; }
    .cc-info { margin-bottom: 16px; gap: 10px; }
    .cc-info-icon { width: 30px; height: 30px; font-size: .82rem; }
    .cc-info-text { font-size: .8rem; }
    .cc-accept { padding: 12px 14px; gap: 10px; }
    .cc-accept-box { width: 22px; height: 22px; }
    .cc-accept-title { font-size: .78rem; }
    .cc-accept-sub { font-size: .76rem; }
}


/* ========== Account Address Book — modern ========== */
.ab-section { background: transparent; }

.ab-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.ab-head-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ab-eyebrow {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(153, 0, 51, 0.08);
    padding: 4px 11px;
    border-radius: 999px;
    line-height: 1;
    align-self: flex-start;
}

.ab-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.25;
}

.ab-title i { font-size: 1.3rem; }

@media (min-width: 992px) {
    .ab-title { font-size: 1.75rem; }
    .ab-title i { font-size: 1.5rem; }
}

.ab-subtitle {
    margin: 2px 0 0;
    font-size: .9rem;
    color: #64748B;
    line-height: 1.4;
}

/* grid */
.ab-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 768px) {
    .ab-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (min-width: 1200px) {
    .ab-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* card */
.ab-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.ab-card:hover {
    transform: translateY(-2px);
    border-color: #CBD5E1;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.ab-card--default {
    border-color: rgba(0, 51, 102, 0.20);
    box-shadow: 0 6px 18px rgba(0, 51, 102, 0.08);
}

/* card header */
.ab-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #FAFBFC 0%, #F1F4F8 100%);
    border-bottom: 1px solid #E5E7EB;
    flex-wrap: wrap;
}

.ab-card-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 700;
    color: var(--primary);
    font-size: .95rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ab-card-name i {
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.ab-card-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ab-card-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* card body */
.ab-card-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px;
    flex: 1;
}

.ab-card-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .85rem;
    color: #475569;
    line-height: 1.5;
}

.ab-card-line i {
    color: #94A3B8;
    font-size: .92rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.ab-card-line span {
    min-width: 0;
    word-break: break-word;
}

.ab-card-email { word-break: break-all; }

/* card footer */
.ab-card-foot {
    display: flex;
    align-items: stretch;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFC;
}

.ab-action-form {
    margin: 0;
    flex: 1;
    display: flex;
    border-left: 1px solid #F1F5F9;
}

.ab-action {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 11px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.ab-action i { font-size: .9rem; }

.ab-action:hover {
    background: rgba(0, 51, 102, 0.06);
    color: var(--primary);
}

.ab-action--danger {
    color: #B91C1C;
}

.ab-action--danger:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #B91C1C;
}

@media (max-width: 575.98px) {
    .ab-head { margin-bottom: 16px; }
    .ab-title { font-size: 1.25rem; }
    .ab-card-head { padding: 12px 14px; }
    .ab-card-body { padding: 12px 14px; gap: 7px; }
    .ab-card-body { font-size: .82rem; }
    .ab-action { padding: 10px 12px; font-size: .78rem; }
}


/* ========== Address Form (Create / Edit) — modern ========== */
.af-section { background: transparent; }

.af-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.af-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.af-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.af-title i { font-size: 1.3rem; }

@media (min-width: 992px) {
    .af-title { font-size: 1.75rem; }
    .af-title i { font-size: 1.5rem; }
}

.af-subtitle {
    margin: 0;
    font-size: .9rem;
    color: #64748B;
    line-height: 1.45;
}

/* validation summary */
.af-validation {
    display: block;
    padding: 12px 16px;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 12px;
    color: #B91C1C;
    margin-bottom: 18px;
    font-size: .88rem;
    line-height: 1.5;
}

.af-validation:empty { display: none; }

.af-validation ul { margin: 0; padding-left: 1.2rem; }

/* form */
.af-form { display: block; }

.af-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1200px) {
    .af-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* ---------- Card ---------- */
.af-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
}

.af-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FAFBFC 0%, #F1F4F8 100%);
    border-bottom: 1px solid #E5E7EB;
}

.af-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 51, 102, 0.10);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.af-card-icon--alt {
    background: rgba(153, 0, 51, 0.10);
    color: var(--secondary);
}

.af-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .af-card-title { font-size: 1.05rem; }
}

.af-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

@media (min-width: 768px) {
    .af-card-body { padding: 22px; }
}

/* ---------- Field ---------- */
.af-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.af-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 576px) {
    .af-row { grid-template-columns: 1fr 1fr; }
}

.af-label {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.af-label--required::after {
    content: " *";
    color: var(--secondary);
}

.af-input,
.af-select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background-color: #ffffff;
    color: #0F172A;
    font-size: .92rem;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.af-input::placeholder { color: #94A3B8; }

.af-input:hover,
.af-select:hover {
    border-color: #94A3B8;
}

.af-input:focus,
.af-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(153, 0, 51, 0.12);
    outline: none;
}

.af-input:disabled,
.af-select:disabled {
    background-color: #F1F5F9;
    color: #94A3B8;
    cursor: not-allowed;
}

/* server-side validation (.input-validation-error / .field-validation-error) */
.af-input.input-validation-error,
.af-select.input-validation-error {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

.af-input--stacked {
    margin-bottom: 8px;
}

/* select chevron */
.af-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1rem;
    cursor: pointer;
}

.af-error {
    color: #B91C1C;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 2px;
    display: block;
}

.af-error:empty { display: none; }

/* ---------- Default-address toggles ---------- */
.af-defaults {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid #F1F5F9;
}

.af-default {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1.5px solid #E5E7EB;
    background: #FAFBFC;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
    margin: 0;
}

.af-default:hover {
    border-color: var(--primary);
    background: rgba(0, 51, 102, 0.04);
}

.af-default-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.af-default-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #CBD5E1;
    background: #ffffff;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .85rem;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.af-default-input:checked ~ .af-default-box {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.af-default:has(.af-default-input:checked) {
    border-color: var(--primary);
    background: rgba(0, 51, 102, 0.06);
}

.af-default-text {
    flex: 1;
    font-size: .88rem;
    color: #334155;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.af-default-text strong {
    color: var(--primary);
    font-weight: 700;
}

.af-default-icon {
    color: #10B981;
    font-size: .98rem;
    line-height: 1;
}

.af-default-icon--billing { color: #F59E0B; }

/* ---------- Action bar ---------- */
.af-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

@media (min-width: 576px) {
    .af-actions {
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
    }
}

@media (max-width: 575.98px) {
    .af-head { margin-bottom: 18px; }
    .af-title { font-size: 1.25rem; }
    .af-subtitle { font-size: .85rem; }
    .af-card-head { padding: 12px 14px; }
    .af-card-icon { width: 32px; height: 32px; font-size: .95rem; }
    .af-card-title { font-size: .95rem; }
    .af-card-body { padding: 14px; gap: 12px; }
    .af-label { font-size: .72rem; }
    .af-input,
    .af-select { padding: 10px 12px; font-size: .88rem; }
    .af-default { padding: 10px 12px; }
    .af-default-text { font-size: .82rem; }
}


/* ========== Profile — modern ========== */
.pp-section { background: transparent; }

/* ---------- Hero header ---------- */
.pp-hero {
    position: relative;
    background: linear-gradient(135deg, #003366 0%, #001f3f 100%);
    color: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.18);
    isolation: isolate;
}

@media (min-width: 768px) {
    .pp-hero { padding: 24px 28px; }
}

/* decorative orbs */
.pp-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
    z-index: 0;
    opacity: 0.6;
}

.pp-hero-orb--light {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(153, 0, 51, 0.55) 0%, rgba(153, 0, 51, 0) 70%);
    top: -120px;
    right: -80px;
}

.pp-hero-orb--dark {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 163, 224, 0.35) 0%, rgba(0, 163, 224, 0) 70%);
    bottom: -100px;
    left: -50px;
}

.pp-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* avatar */
.pp-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #F1F5F9 100%);
    color: var(--primary);
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
    .pp-avatar {
        width: 72px;
        height: 72px;
        font-size: 1.65rem;
    }
}

.pp-hero-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-hero-name {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .pp-hero-name { font-size: 1.6rem; }
}

.pp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}

.pp-hero-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.pp-hero-email i { font-size: .85rem; color: rgba(255, 255, 255, 0.65); }

.pp-hero-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* greeting block */
.pp-greeting {
    display: none;
    align-items: center;
    gap: 12px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .pp-greeting { display: inline-flex; }
}

.pp-greeting-icon {
    font-size: 1.6rem;
    color: #FFD580;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.pp-greeting-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.pp-greeting-label {
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.pp-greeting-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* lock icon */
.pp-lock {
    color: #94A3B8;
    font-size: .75rem;
    margin-left: 4px;
}

/* locked input variant */
.af-input--locked,
.af-select.af-input--locked {
    background-color: #F1F5F9;
    color: #64748B;
    cursor: not-allowed;
    border-color: #E5E7EB;
}

.af-input--locked:hover,
.af-select.af-input--locked:hover {
    border-color: #E5E7EB;
}

/* address card spans both columns on xl+ */
.pp-address-card {
    margin-top: 16px;
}

@media (min-width: 1200px) {
    .pp-address-card { margin-top: 20px; }
}

/* 4-column row for City / Zip / Country / State */
.pp-row-4 {
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .pp-row-4 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
    .pp-row-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 575.98px) {
    .pp-hero { padding: 16px; border-radius: 14px; }
    .pp-avatar { width: 56px; height: 56px; font-size: 1.25rem; border-width: 2px; }
    .pp-hero-name { font-size: 1.15rem; }
    .pp-hero-email { font-size: .76rem; }
    .pp-hero-chip { font-size: .68rem; padding: 2px 9px; }
    .pp-lock { font-size: .7rem; }
}


/* ========== My Orders — modern ========== */
.ord-section { background: transparent; }

.ord-head { margin-bottom: 20px; }

.ord-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ord-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ord-title i { font-size: 1.3rem; }

@media (min-width: 992px) {
    .ord-title { font-size: 1.75rem; }
    .ord-title i { font-size: 1.5rem; }
}

.ord-subtitle {
    margin: 0;
    font-size: .9rem;
    color: #64748B;
    line-height: 1.45;
}

/* ---------- Tabs ---------- */
.ord-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #F1F5F9;
    border-radius: 12px;
    margin-bottom: 22px;
    border: 1px solid #E5E7EB;
}

.ord-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #475569;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    letter-spacing: 0.01em;
}

.ord-tab i { font-size: .98rem; line-height: 1; }

.ord-tab:hover:not(.active) {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.55);
}

.ord-tab.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.ord-tab:focus { outline: none; }

@media (max-width: 575.98px) {
    .ord-tabs { width: 100%; display: flex; }
    .ord-tab { flex: 1; justify-content: center; padding: 9px 12px; font-size: .82rem; }
    .ord-tab span { display: inline; }
}

/* ---------- List ---------- */
.ord-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- Order card ---------- */
.ord-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.ord-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.ord-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FAFBFC 0%, #F1F4F8 100%);
    border-bottom: 1px solid #E5E7EB;
    flex-wrap: wrap;
}

.ord-card-head-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ord-card-num {
    font-weight: 800;
    color: var(--primary);
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.ord-card-date {
    font-size: .78rem;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.ord-card-date i { font-size: .82rem; color: #94A3B8; }

.ord-card-head-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* status badge — override Bootstrap StatusBadgeClass colors with a unified pill style */
.ord-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    background: #F1F5F9;
    color: #334155;
}

.ord-status.bg-success,
.ord-status.text-bg-success {
    background-color: rgba(16, 185, 129, 0.14) !important;
    color: #047857 !important;
}

.ord-status.bg-warning,
.ord-status.text-bg-warning {
    background-color: rgba(245, 158, 11, 0.16) !important;
    color: #B45309 !important;
}

.ord-status.bg-danger,
.ord-status.text-bg-danger {
    background-color: rgba(220, 38, 38, 0.12) !important;
    color: #B91C1C !important;
}

.ord-status.bg-primary,
.ord-status.text-bg-primary {
    background-color: rgba(0, 51, 102, 0.10) !important;
    color: var(--primary) !important;
}

.ord-status.bg-info,
.ord-status.text-bg-info {
    background-color: #16A34A !important;
    color: #ffffff !important;
}

.ord-status.bg-secondary,
.ord-status.text-bg-secondary {
    background-color: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important;
}

/* card body — meta grid */
.ord-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding: 16px 18px;
    align-items: center;
}

@media (min-width: 768px) {
    .ord-card-body {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ord-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ord-meta-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    line-height: 1;
    flex-shrink: 0;
}

.ord-meta-icon--primary { background: rgba(0, 51, 102, 0.10); color: var(--primary); }
.ord-meta-icon--info    { background: rgba(14, 165, 233, 0.12); color: #0369A1; }
.ord-meta-icon--success { background: rgba(16, 185, 129, 0.12); color: #047857; }
.ord-meta-icon--muted   { background: rgba(100, 116, 139, 0.10); color: #475569; }

.ord-meta-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ord-meta-label {
    font-size: .68rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.ord-meta-value {
    font-size: .9rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ord-meta-payment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ord-meta-payment img {
    display: inline-block;
    vertical-align: middle;
}

.ord-meta-muted { color: #94A3B8; font-weight: 500; }

/* total — right-aligned with bigger red price */
.ord-meta--total {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    justify-self: end;
}

@media (max-width: 767.98px) {
    .ord-meta--total {
        grid-column: span 2;
        align-items: stretch;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        background: linear-gradient(135deg, rgba(153, 0, 51, 0.04), rgba(0, 51, 102, 0.04));
        border-radius: 10px;
        text-align: left;
    }
}

.ord-meta-total {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

@media (min-width: 768px) {
    .ord-meta-total { font-size: 1.35rem; }
}

/* total with an admin refund: net total over the refunded amount */
.ord-meta-total-group {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ord-meta-refund {
    font-size: .74rem;
    font-weight: 600;
    color: #047857;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* lazy-load placeholder */
.ord-loading {
    text-align: center;
    padding: 40px 16px;
    color: #64748B;
    font-size: .9rem;
}

.ord-loading p { margin: 10px 0 0; }

@media (max-width: 575.98px) {
    .ord-card-head { padding: 12px 14px; }
    .ord-card-head-text { gap: 2px; }
    .ord-card-num { font-size: .92rem; }
    .ord-card-date { font-size: .72rem; }
    .ord-card-body { padding: 12px 14px; gap: 10px 14px; }
    .ord-meta-icon { width: 30px; height: 30px; font-size: .85rem; }
    .ord-meta-value { font-size: .82rem; }
}


/* ========== Order Details — modern ========== */
.od-section { background: transparent; }

/* ---------- Hero header ---------- */
.od-hero {
    position: relative;
    background: linear-gradient(135deg, #003366 0%, #001f3f 100%);
    color: #ffffff;
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.20);
    isolation: isolate;
}

@media (min-width: 768px) {
    .od-hero { padding: 28px 32px; }
}

.od-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
    z-index: 0;
    opacity: 0.6;
}

.od-hero-orb--light {
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(153, 0, 51, 0.45) 0%, rgba(153, 0, 51, 0) 70%);
    top: -100px; right: -60px;
}

.od-hero-orb--dark {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(0, 163, 224, 0.30) 0%, rgba(0, 163, 224, 0) 70%);
    bottom: -90px; left: -40px;
}

.od-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.od-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.od-hero-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.od-hero-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1;
}

.od-hero-num {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) { .od-hero-num { font-size: 1.95rem; } }

.od-hero-meta { display: inline-flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.od-hero-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-size: .88rem;
    font-weight: 600;
}

.od-hero-date i {
    color: rgba(255, 255, 255, 0.65);
    font-size: .95rem;
}

.od-hero-badges {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.od-hero-badges .ord-status {
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* On the dark navy hero the default faint/tinted pills are invisible. Override with
   bright solid fills. Green = settled/active states (Confirmed/Processing/Shipped,
   Delivered/Picked Up, Paid, Refunded, Cancelled); amber = Pending; red = Failed. */
.od-hero-badges .ord-status.bg-info,
.od-hero-badges .ord-status.text-bg-info,
.od-hero-badges .ord-status.bg-success,
.od-hero-badges .ord-status.text-bg-success,
.od-hero-badges .ord-status.bg-primary,
.od-hero-badges .ord-status.text-bg-primary,
.od-hero-badges .ord-status.bg-secondary,
.od-hero-badges .ord-status.text-bg-secondary {
    background-color: #16A34A !important;
    color: #ffffff !important;
}

.od-hero-badges .ord-status.bg-warning,
.od-hero-badges .ord-status.text-bg-warning {
    background-color: #FBBF24 !important;
    color: #422006 !important;
}

.od-hero-badges .ord-status.bg-danger,
.od-hero-badges .ord-status.text-bg-danger {
    background-color: #FB7185 !important;
    color: #4C0519 !important;
}

/* ---------- Parcel header enhancements ---------- */
.od-parcel-status {
    margin-left: 8px;
    font-size: .62rem !important;
    padding: 4px 10px !important;
    vertical-align: middle;
}

.od-tracking {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    font-size: .76rem;
    font-weight: 500;
    color: #64748B;
    letter-spacing: 0;
    text-transform: none;
}

.od-tracking i { font-size: .82rem; color: #94A3B8; }

/* ---------- Parcel delivery timeline ---------- */
.od-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding: 10px 18px;
    background: #FAFBFC;
    border-top: 1px solid #E5E7EB;
    font-size: .78rem;
    color: #64748B;
}

.od-timeline-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

.od-timeline-step i { font-size: .9rem; color: #94A3B8; }

.od-timeline-step--done { color: #047857; font-weight: 700; }
.od-timeline-step--done i { color: #10B981; }

/* ---------- Live UPS tracking (deep-link + on-demand scan timeline) ---------- */
.od-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 18px;
    border-top: 1px solid #E5E7EB;
}

.od-track-num {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: #475569;
}

.od-track-num > i { color: #94A3B8; }
.od-track-carrier { font-weight: 600; color: #334155; }

.od-track-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
    word-break: break-all;
}

.od-track-link:hover { text-decoration: underline; }
.od-track-link i { font-size: .72rem; color: inherit; }
.od-track-plain { font-weight: 600; color: #334155; word-break: break-all; }

/* Compact "Track package" button sitting inline in the parcel header. */
.od-track-btn {
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: .72rem;
    line-height: 1.45;
    gap: 4px;
}

.od-track-btn i { font-size: .82rem; }

.od-track-panel { flex-basis: 100%; }
.od-track-panel[hidden] { display: none; }

/* Live scan panel rendered directly under the parcel header (not at the bottom). */
.cs2-parcel > .od-track-panel {
    padding: 10px 16px 14px;
    border-bottom: 1px solid #E5E7EB;
    background: #FCFCFD;
}

.od-track-head { font-size: .82rem; color: #334155; padding: 8px 0 2px; }

.od-track-loading,
.od-track-error,
.od-track-empty {
    font-size: .8rem;
    padding: 8px 0;
    color: #64748B;
}

.od-track-error { color: #B91C1C; }

/* Vertical scan history — reuses .od-timeline-step rows in a column */
.od-timeline--scan {
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 2px;
    padding: 12px 16px;
    list-style: none;
    background: #FAFBFC;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}

.od-timeline--scan .od-timeline-step { align-items: flex-start; }
.od-timeline--scan .od-timeline-step i { color: #2563EB; margin-top: 2px; }
.od-scan-text { display: flex; flex-direction: column; gap: 2px; }
.od-scan-status { font-weight: 600; color: #334155; }
.od-scan-meta { color: #64748B; font-size: .74rem; }

/* ---------- Package-tracking modal ---------- */
.track-modal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #E5E7EB;
}

.track-modal-id {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    min-width: 0;
}

.track-modal-id > i { color: #94A3B8; }
.track-modal-carrier { font-weight: 700; color: #334155; }
.track-modal-number { font-weight: 600; color: #2563EB; word-break: break-all; }
.track-modal-ups { flex-shrink: 0; white-space: nowrap; }

#trackingModalBody .od-track-head { padding-top: 0; font-size: .9rem; }
#trackingModalBody .od-timeline--scan { margin-top: 10px; max-height: none; }

/* ---------- Addresses row ---------- */
.od-addr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
}

@media (min-width: 576px) {
    .od-addr-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---------- Payment card ---------- */
.od-payment-card { border-top-color: #94A3B8; }

.od-payment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.od-payment-card-img {
    width: 44px;
    height: auto;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: contain;
}

.od-payment-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.od-payment-line {
    font-weight: 700;
    color: var(--primary);
    font-size: .9rem;
    line-height: 1.3;
}

.od-payment-sub {
    color: #64748B;
    font-size: .82rem;
}

.od-payment-foot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid #F1F5F9;
}

.od-payment-type {
    font-size: .78rem;
    color: #64748B;
    font-weight: 500;
}

.od-payment-refund { display: flex; gap: 8px; }
.od-payment-refund i { color: #047857; font-size: .95rem; }

.od-payment-refund-text {
    font-weight: 600;
    color: var(--primary);
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
}

/* removed / cancelled notice at the top of the Items card */
.od-removed-notice {
    margin: 12px 16px;
}

.od-removed-notice strong { color: #0F172A; margin-right: 4px; }

/* ---------- Sidebar actions ---------- */
.od-side-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Download button (line items) ---------- */
.od-download {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.30);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
    text-transform: none;
}

.od-download i { font-size: .8rem; }

.od-download:hover {
    background: #047857;
    color: #ffffff;
    border-color: #047857;
    transform: translateY(-1px);
}

.od-download:focus { outline: none; }

@media (max-width: 575.98px) {
    .od-hero { padding: 18px 18px; border-radius: 14px; }
    .od-hero-num { font-size: 1.35rem; }
    .od-hero-date { font-size: .8rem; }
    .od-parcel-status { display: inline-block; margin-top: 4px; }
    .od-tracking { display: block; margin-left: 0; margin-top: 3px; }
    .od-timeline { padding: 10px 14px; gap: 8px 14px; font-size: .74rem; }
}


/* ========== My Videos — modern ========== */
.mv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: linear-gradient(135deg, #FAFBFC 0%, #F1F4F8 100%);
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    margin-bottom: 18px;
}

.mv-stats {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.mv-stat {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}

.mv-stat-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.mv-stat-label {
    font-size: .68rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.mv-stat--avail .mv-stat-value { color: #047857; }

/* grid */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 576px) {
    .mv-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (min-width: 1200px) {
    .mv-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* ---------- Card ---------- */
.mv-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.mv-card:hover {
    transform: translateY(-2px);
    border-color: #CBD5E1;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.mv-card--pending { opacity: 0.85; }

/* thumb */
.mv-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0F172A;
    overflow: hidden;
}

.mv-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.mv-card:hover .mv-card-thumb img { transform: scale(1.05); }

.mv-card-thumb-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.20) 0%, rgba(15, 23, 42, 0.60) 100%);
}

.mv-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
    transition: transform .25s ease;
}

.mv-card:hover .mv-card-play {
    transform: translate(-50%, -50%) scale(1.1);
}

/* status pill — top right */
.mv-card-status {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mv-card-status i { font-size: .78rem; }

.mv-card-status--avail {
    background: rgba(16, 185, 129, 0.85);
    color: #ffffff;
}

.mv-card-status--soon {
    background: rgba(245, 158, 11, 0.85);
    color: #ffffff;
}

.mv-card-status--off {
    background: rgba(100, 116, 139, 0.85);
    color: #ffffff;
}

/* card header — type pill */
.mv-card-head {
    padding: 10px 14px 0;
}

.mv-card-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 51, 102, 0.08);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.mv-card-type i { font-size: .82rem; }

/* card body */
.mv-card-body {
    padding: 10px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mv-card-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-card-title-icon { color: #10B981; margin-right: 6px; }

.mv-card-vs {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(153, 0, 51, 0.10);
    color: var(--secondary);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin: 0 4px;
    vertical-align: middle;
}

.mv-card-cat {
    margin: 0;
}

.mv-card-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mv-card-meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: #64748B;
    line-height: 1.3;
}

.mv-card-meta li i {
    color: #94A3B8;
    font-size: .88rem;
    flex-shrink: 0;
}

.mv-card-meta li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* card footer — full-width action */
.mv-card-foot {
    padding: 12px 14px;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFC;
}

.mv-card-foot .ca-btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .mv-toolbar { padding: 12px 14px; }
    .mv-stat-value { font-size: 1.25rem; }
    .mv-card-thumb { aspect-ratio: 16 / 10; }
    .mv-card-play { font-size: 1.9rem; }
    .mv-card-title { font-size: .88rem; }
    .mv-card-meta li { font-size: .75rem; }
}


/* ========== Wishlist v2 — modern ========== */
.wl2-section { background: transparent; }

/* ---------- Header ---------- */
.wl2-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.wl2-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wl2-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wl2-title i {
    color: var(--secondary);
    font-size: 1.3rem;
}

@media (min-width: 992px) {
    .wl2-title { font-size: 1.75rem; }
    .wl2-title i { font-size: 1.5rem; }
}

.wl2-subtitle {
    margin: 0;
    font-size: .88rem;
    color: #64748B;
}

.wl2-count {
    font-weight: 800;
    color: var(--primary);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- View toggle ---------- */
.wl2-tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #F1F5F9;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}

.wl2-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.wl2-view-btn i { font-size: .92rem; line-height: 1; }

.wl2-view-btn:hover:not(.active) { color: var(--primary); }

.wl2-view-btn.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

@media (max-width: 480px) {
    .wl2-view-btn span { display: none; }
    .wl2-view-btn { padding: 8px 11px; }
}

/* ---------- List view ---------- */
.wl2-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wl2-item {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.wl2-item:hover {
    border-color: #CBD5E1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

@media (min-width: 992px) {
    .wl2-item { padding: 18px; }
}

.wl2-item-top {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .wl2-item-top {
        grid-template-columns: 100px 1fr auto;
        gap: 18px;
        align-items: center;
    }
}

.wl2-item-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wl2-item-media img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.wl2-item-media--video {
    border: 0;
    background: #0F172A;
}

.wl2-item-media--video img {
    object-fit: cover;
    padding: 0;
}

.wl2-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wl2-item-name {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 992px) {
    .wl2-item-name {
        font-size: 1.05rem;
        -webkit-line-clamp: 1;
    }
}

.wl2-item-price-col {
    display: none;
}

@media (min-width: 992px) {
    .wl2-item-price-col {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        white-space: nowrap;
    }
}

.wl2-item-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.wl2-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #F1F5F9;
}

/* mobile-only inline price below the name */
@media (max-width: 991.98px) {
    .wl2-item-foot::before {
        content: "";
    }
}

.wl2-actions-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Quantity stepper ---------- */
.wl2-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    height: 40px;
    flex-shrink: 0;
}

.wl2-qty--locked { opacity: 0.55; }

.wl2-qty--compact { height: 36px; }

.wl2-qty-btn {
    width: 36px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--secondary);
    font-size: 1.05rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .18s ease;
}

.wl2-qty--compact .wl2-qty-btn { width: 30px; font-size: .95rem; }

.wl2-qty-btn i { -webkit-text-stroke: 0.5px currentColor; }

.wl2-qty-btn:hover { background: rgba(153, 0, 51, 0.06); }

.wl2-qty-btn:disabled { color: #CBD5E1; cursor: not-allowed; }

.wl2-qty-input {
    width: 40px;
    height: 100%;
    border: 0;
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    background: #ffffff;
    text-align: center;
    font-weight: 700;
    font-size: .92rem;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.wl2-qty--compact .wl2-qty-input { width: 34px; font-size: .85rem; }

.wl2-qty-input:focus { outline: none; }

/* ---------- Icon actions (edit / remove) ---------- */
.wl2-action {
    width: 36px;
    height: 36px;
    border: 1px solid #E5E7EB;
    background: #ffffff;
    border-radius: 9px;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: .92rem;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}

.wl2-action:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: translateY(-1px);
}

.wl2-action--danger:hover {
    background: var(--secondary);
    color: #ffffff;
    border-color: var(--secondary);
}

/* ---------- Card (grid) view ---------- */
.wl2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 576px) { .wl2-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 992px) { .wl2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .wl2-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.wl2-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.wl2-card:hover {
    transform: translateY(-3px);
    border-color: #CBD5E1;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.wl2-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    overflow: hidden;
    border-bottom: 1px solid #F1F5F9;
}

.wl2-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    display: block;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.wl2-card:hover .wl2-card-media img { transform: scale(1.04); }

.wl2-card-media--video {
    background: #0F172A;
}

.wl2-card-media--video img {
    object-fit: cover;
    padding: 0;
}

.wl2-card-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
    z-index: 2;
}

.wl2-card-price {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--secondary);
    font-size: .85rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.wl2-card-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #B91C1C;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
    transition: background-color .18s ease, color .18s ease, transform .15s ease;
    z-index: 2;
}

.wl2-card-remove:hover {
    background: var(--secondary);
    color: #ffffff;
    transform: rotate(90deg);
}

.wl2-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.wl2-card-title {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5em;
}

.wl2-card-foot {
    padding: 10px 14px 14px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FAFBFC;
}

.wl2-card-cta {
    flex: 1;
    min-height: 36px;
    height: 36px;
    padding: 0 14px;
    font-size: .82rem;
}

.wl2-card-cta i { font-size: .9rem; }

/* ---------- Footer actions ---------- */
.wl2-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

@media (min-width: 768px) {
    .wl2-actions {
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
    }
}

@media (max-width: 575.98px) {
    .wl2-head { margin-bottom: 14px; }
    .wl2-title { font-size: 1.25rem; }
    .wl2-item { padding: 12px; border-radius: 12px; }
    .wl2-item-top { grid-template-columns: 72px 1fr; gap: 10px; }
    .wl2-item-name { font-size: .9rem; }
    .wl2-item-foot { gap: 8px; padding-top: 10px; margin-top: 10px; }
    .wl2-qty { height: 36px; }
    .wl2-qty-btn { width: 32px; font-size: 1rem; }
    .wl2-qty-input { width: 36px; font-size: .88rem; }
    .wl2-action { width: 32px; height: 32px; font-size: .82rem; }
    .wl2-actions-row .ca-btn { flex: 1 1 100%; }
}


/* ========== Embroidery Customizer — modern ========== */

/* ---------- Page shell (no body scroll) ---------- */
:root {
    --emb-header-h: 64px;
    --emb-footer-h: 64px;
}

body.emb-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.emb-page .emb-page-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.emb-page .product-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
    position: relative;
}

body.emb-page .product-container > .tab-content,
body.emb-page .product-container > .tab-content > .tab-pane.active {
    height: 100%;
    overflow: hidden;
}

body.emb-page .product-section {
    overflow-y: auto;
    height: 100%;
}

body.emb-page .emb-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 1040;
}

body.emb-page .emb-footer {
    flex: 0 0 auto;
    position: relative;
}

/* ----- Desktop (xl+): sidebar is a permanent left column ----- */
@media (min-width: 1200px) {
    /* Drawer sits above content but BELOW the footer so the price/CTAs stay clickable */
    body.emb-page .offcanvas.offcanvas-product {
        bottom: var(--emb-footer-h);
        height: auto;
        z-index: 1035;
    }
    body.emb-page .emb-footer { z-index: 1045; }
}

/* ----- Mobile/tablet (< xl): sidebar opens as a modal-style overlay ----- */
@media (max-width: 1199.98px) {
    /* Full-height overlay — slide-in offcanvas covers the whole viewport
       (including the footer) so the user can scroll the entire sidebar
       content from top to bottom without anything obscuring it. */
    body.emb-page .offcanvas.offcanvas-product {
        top: 0;
        bottom: 0;
        height: 100%;
        z-index: 1055;
    }
    body.emb-page .offcanvas-backdrop {
        z-index: 1050;
    }
    body.emb-page .emb-footer { z-index: 1040; }
}

/* ---------- Custom brand scrollbars (embroidery shell) ---------- */

/* Firefox */
body.emb-page .emb-sidebar-body,
body.emb-page .product-section,
body.emb-page .emb-input--textarea,
body.emb-page .emb-fonts-body,
body.emb-page .emb-stage-tabs {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 51, 102, 0.40) transparent;
}

/* WebKit / Chromium / Edge / Safari */
body.emb-page .emb-sidebar-body::-webkit-scrollbar,
body.emb-page .product-section::-webkit-scrollbar,
body.emb-page .emb-input--textarea::-webkit-scrollbar,
body.emb-page .emb-fonts-body::-webkit-scrollbar,
body.emb-page .emb-stage-tabs::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.emb-page .emb-sidebar-body::-webkit-scrollbar-track,
body.emb-page .product-section::-webkit-scrollbar-track,
body.emb-page .emb-input--textarea::-webkit-scrollbar-track,
body.emb-page .emb-fonts-body::-webkit-scrollbar-track,
body.emb-page .emb-stage-tabs::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

body.emb-page .emb-sidebar-body::-webkit-scrollbar-thumb,
body.emb-page .product-section::-webkit-scrollbar-thumb,
body.emb-page .emb-input--textarea::-webkit-scrollbar-thumb,
body.emb-page .emb-fonts-body::-webkit-scrollbar-thumb,
body.emb-page .emb-stage-tabs::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary) 0%, #002347 100%);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 30px;
    transition: background .25s ease;
}

body.emb-page .emb-sidebar-body::-webkit-scrollbar-thumb:hover,
body.emb-page .product-section::-webkit-scrollbar-thumb:hover,
body.emb-page .emb-input--textarea::-webkit-scrollbar-thumb:hover,
body.emb-page .emb-fonts-body::-webkit-scrollbar-thumb:hover,
body.emb-page .emb-stage-tabs::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--secondary) 0%, #7a0028 100%);
    background-clip: padding-box;
}

body.emb-page .emb-sidebar-body::-webkit-scrollbar-thumb:active,
body.emb-page .product-section::-webkit-scrollbar-thumb:active,
body.emb-page .emb-fonts-body::-webkit-scrollbar-thumb:active,
body.emb-page .emb-stage-tabs::-webkit-scrollbar-thumb:active {
    background: var(--secondary);
    background-clip: padding-box;
}

body.emb-page .emb-sidebar-body::-webkit-scrollbar-corner,
body.emb-page .product-section::-webkit-scrollbar-corner {
    background: transparent;
}

/* ---------- Header ---------- */
.emb-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #ffffff;
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    position: relative;
    z-index: 5;
}

.emb-header-left { justify-self: start; }
.emb-header-text { justify-self: center; text-align: center; }
.emb-header-close { justify-self: end; }

.emb-header-left {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.emb-header-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 0;
    background: var(--primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color .18s ease, transform .15s ease;
}

.emb-header-toggle:hover { background: var(--secondary); transform: translateY(-1px); }

.emb-header-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.emb-header-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.emb-header-text {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.emb-header-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emb-header-title-accent {
    color: var(--secondary);
}

.emb-header-title-icon {
    color: var(--secondary);
    font-size: 0.95em;
    margin-right: 8px;
    vertical-align: -0.05em;
}

.emb-header-text .emb-header-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.emb-header-text .emb-header-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .emb-header-text .emb-header-logo { width: 32px; height: 32px; }
    .emb-header-text { gap: 8px; }
}

@media (min-width: 992px) {
    .emb-header-title { font-size: 1.55rem; }
}

@media (max-width: 575.98px) {
    .emb-header { padding: 10px 14px; }
    .emb-header-logo { width: 36px; height: 36px; }
    .emb-header-title { font-size: 1.1rem; }
}

.emb-header-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .15s ease;
    flex-shrink: 0;
}

.emb-header-close:hover {
    background: var(--secondary);
    color: #ffffff;
    transform: rotate(90deg);
}

/* ---------- Footer ---------- */
.emb-footer {
    background: #ffffff;
    border-top: 1px solid #E5E7EB;
    padding: 12px 18px;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
}

.emb-footer-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.emb-footer-price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-right: auto;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(153, 0, 51, 0.06), rgba(0, 51, 102, 0.06));
    border: 1px solid rgba(153, 0, 51, 0.18);
    border-radius: 10px;
}

.emb-footer-price-label {
    font-size: .7rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.emb-footer-price-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.emb-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.emb-footer-feedback {
    font-size: .82rem;
    color: #64748B;
    margin-top: 8px;
    text-align: right;
}

@media (max-width: 575.98px) {
    .emb-footer { padding: 10px 14px; }
    .emb-footer-inner { gap: 8px; }
    .emb-footer-price { padding: 5px 10px; }
    .emb-footer-price-value { font-size: 1.1rem; }
    .emb-footer-actions { width: 100%; }
    .emb-footer-actions .ca-btn { flex: 1; min-width: 0; }
}

/* ---------- Sidebar ---------- */
.emb-sidebar { background: #FAFBFC; }

.emb-sidebar-collapse {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 56px;
    border-radius: 0 12px 12px 0;
    background: #ffffff;
    color: var(--primary);
    border: 1px solid #E5E7EB;
    border-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 4px 0 10px rgba(15, 23, 42, 0.06);
    transition: background-color .18s ease, color .18s ease;
    z-index: 2;
}

.emb-sidebar-collapse:hover {
    background: var(--primary);
    color: #ffffff;
}

/* When the sidebar is collapsed (.mini), flip the chevron to point right (expand) */
.offcanvas.offcanvas-product.mini .emb-sidebar-collapse i {
    transform: rotate(180deg);
    transition: transform .3s ease;
}

.emb-sidebar-body {
    padding: 18px 18px 28px;
    overflow-x: hidden;
    overflow-y: auto;
}

.emb-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #E5E7EB;
}

.emb-sidebar-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
}

.emb-sidebar-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Reset-all button — filled amber so it's clearly visible against the sidebar header */
.emb-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1.5px solid #D97706;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #ffffff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-transform: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.30);
    white-space: nowrap;
}

.emb-reset-btn i {
    font-size: .95rem;
    line-height: 1;
    transition: transform .45s ease;
}

.emb-reset-btn:hover {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
    border-color: #B45309;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.40);
}

.emb-reset-btn:hover i {
    transform: rotate(-180deg);
}

.emb-reset-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

.emb-reset-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), 0 4px 12px rgba(245, 158, 11, 0.30);
}

/* Footer variant — same look but sized to match the .ca-btn neighbours so the
   footer row aligns cleanly. */
.emb-reset-btn--footer {
    height: 44px;
    padding: 0 18px;
    font-size: .9rem;
    gap: 8px;
}

.emb-reset-btn--footer i { font-size: 1rem; }

@media (max-width: 575.98px) {
    .emb-reset-btn span { display: none; }
    .emb-reset-btn {
        padding: 0;
        width: 34px;
        height: 34px;
        justify-content: center;
        gap: 0;
    }

    .emb-reset-btn--footer {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }
}

/* ---------- Section ---------- */
.emb-section {
    margin-bottom: 22px;
}

.emb-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.emb-section-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--secondary);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.emb-section-title {
    margin: 0;
    font-size: .92rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
}

/* ---------- Field (text input / textarea) ---------- */
.emb-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 8px 12px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.emb-field:focus-within {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(153, 0, 51, 0.10);
}

.emb-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.emb-field-label {
    font-size: .68rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0;
}

.emb-input {
    width: 100%;
    border: 0;
    padding: 0;
    font-size: .92rem;
    font-family: inherit;
    color: #0F172A;
    background: transparent;
    line-height: 1.4;
}

.emb-input:focus { outline: none; }

.emb-input::placeholder { color: #94A3B8; }

.emb-input--textarea {
    resize: none;
    min-height: 50px;
    max-height: 80px;
}

.emb-field-counter {
    font-size: .68rem;
    color: #94A3B8;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- Thread colors ---------- */

/* Active-color preview card */
.emb-color-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.emb-color-preview-swatch {
    width: 44px;
    height: 44px;
    border-radius: 0;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10),
                0 4px 10px rgba(15, 23, 42, 0.08);
    transition: background-color .25s ease;
}

.emb-color-preview-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.2;
}

.emb-color-preview-label {
    font-size: .6rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.emb-color-preview-name {
    font-size: .92rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emb-color-preview-hex {
    font-size: .72rem;
    color: #94A3B8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* Swatch grid */
.emb-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 7px;
}

.emb-color {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: border-color .18s ease, transform .15s ease, box-shadow .18s ease;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
}

.emb-color-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
    transition: transform .15s ease;
}

.emb-color-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9))
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

.emb-color:hover {
    transform: translateY(-2px);
}

.emb-color:hover .emb-color-swatch {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18),
                0 4px 12px rgba(153, 0, 51, 0.20);
}

.emb-color.active,
.emb-color.selected,
.product-color.active,
.product-color.selected {
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px rgba(153, 0, 51, 0.18);
    transform: translateY(-1px);
}

.emb-color.active .emb-color-check,
.emb-color.selected .emb-color-check,
.product-color.active .emb-color-check,
.product-color.selected .emb-color-check {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.emb-color.active .emb-color-swatch,
.emb-color.selected .emb-color-swatch,
.product-color.active .emb-color-swatch,
.product-color.selected .emb-color-swatch {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.20);
}

.emb-color-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 6px 10px;
    background: #F1F5F9;
    border-radius: 999px;
    font-size: .72rem;
    color: #475569;
    line-height: 1;
}

.emb-color-meta i {
    color: var(--secondary);
    font-size: .82rem;
}

.emb-color-meta strong {
    color: var(--primary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---------- Color palette (grouped by family) ---------- */
.emb-color-palette {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.emb-color-family {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emb-color-family-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
}

.emb-color-family-label {
    font-size: .62rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
    position: relative;
    padding-left: 14px;
}

/* Tiny brand-red dot before each family label so they read as section markers */
.emb-color-family-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 3px rgba(153, 0, 51, 0.12);
}

.emb-color-family-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #F1F5F9;
    color: #475569;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ---------- Fonts ---------- */
.emb-fonts {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.emb-fonts-accordion .accordion-item {
    border: 0;
    border-bottom: 1px solid #F1F5F9;
}

.emb-fonts-accordion .accordion-item:last-child { border-bottom: 0; }

.emb-fonts-toggle.accordion-button {
    padding: 12px 14px;
    background: #ffffff;
    color: var(--primary);
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: background-color .18s ease, color .18s ease;
}

.emb-fonts-toggle.accordion-button:not(.collapsed) {
    background: rgba(0, 51, 102, 0.06);
    color: var(--primary);
}

.emb-fonts-toggle.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.emb-fonts-body { padding: 12px; background: #FAFBFC; }

.emb-fonts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 992px) {
    .emb-fonts-grid { grid-template-columns: repeat(3, 1fr); }
}

.emb-font {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .18s ease, transform .15s ease, box-shadow .18s ease;
    min-height: 70px;
}

.emb-font:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.10);
}

.emb-font.active,
.font-preview-badge.active {
    border-color: var(--secondary);
    background: rgba(153, 0, 51, 0.04);
    box-shadow: 0 0 0 2px rgba(153, 0, 51, 0.12);
}

.emb-font-img {
    max-width: 100%;
    height: 24px;
    object-fit: contain;
    margin-bottom: 4px;
}

.emb-font-name {
    font-size: .72rem;
    font-weight: 600;
    color: #475569;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.emb-font.active .emb-font-name,
.font-preview-badge.active .emb-font-name {
    color: var(--secondary);
    font-weight: 700;
}

.emb-font-check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--secondary);
    font-size: .85rem;
    opacity: 0;
    transition: opacity .18s ease;
}

.emb-font.active .emb-font-check,
.font-preview-badge.active .emb-font-check {
    opacity: 1;
}

/* ---------- Design Stage / Preview area ---------- */
.emb-stage {
    padding: 18px;
}

@media (min-width: 1200px) {
    .emb-stage { padding: 28px 28px 28px 36px; }
}

.emb-stage-head { margin-bottom: 14px; }

.emb-stage-eyebrow {
    display: inline-block;
    font-size: .65rem;
    font-weight: 800;
    color: var(--secondary);
    background: rgba(153, 0, 51, 0.08);
    padding: 4px 11px;
    border-radius: 999px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.emb-stage-hint {
    margin: 6px 0 0;
    font-size: .85rem;
    color: #64748B;
}

.emb-stage-tabs {
    border: 0;
    margin-bottom: 14px !important;
    gap: 6px;
}

.emb-stage-tab.nav-link {
    padding: 8px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    color: #475569;
    font-weight: 700;
    font-size: .82rem;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.emb-stage-tab.nav-link:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.emb-stage-tab.nav-link.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* Single-location products show this caption in place of the tab strip. Styled as
   flat text on purpose — the filled pill it replaces was being mistaken for a
   back-navigation button. */
.emb-stage-viewlabel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #64748B;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: default;
}

.emb-stage-viewlabel i {
    color: #94A3B8;
    font-size: .95rem;
    line-height: 1;
}

.emb-stage-viewlabel strong {
    color: #334155;
    font-weight: 800;
}

.emb-stage-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emb-stage-pane {
    width: 100%;
    padding: 24px;
    text-align: center;
}

.emb-stage-preview {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.emb-stage-img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

/* Preview loader — the overlay images are live PulseID fetches, so while any
   request for this stage is in flight we dim the stale stitching and show a
   spinner. The server-emitted inline style on .logo-overlay only sets
   position/size/transform, never opacity, so no !important is needed here. */
.emb-stage-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #64748B;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    pointer-events: none;
}

.emb-stage-preview.is-loading .emb-stage-spinner {
    display: flex;
}

.emb-stage-preview .logo-overlay {
    transition: opacity .18s ease-in-out;
}

.emb-stage-preview.is-loading .logo-overlay {
    opacity: .3;
}

/* The Back overlay (cap + pinbag share #logoOverlay-Back) is now sized in % of the
   preview image, so it scales proportionally on every viewport automatically — the
   old fixed-px breakpoint overrides are no longer needed (and previously mis-sized
   the pinbag overlay on small screens). */

/* ---------- Preview notice (embroidery design body) ---------- */
.emb-stage-note {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px 18px 14px 20px;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 60%, rgba(254, 243, 199, 0.55) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid #F59E0B;
    border-radius: 12px;
    color: #78350F;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
    overflow: hidden;
}

/* Decorative corner shine */
.emb-stage-note::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0) 60%);
    pointer-events: none;
    z-index: 0;
}

.emb-stage-note > * { position: relative; z-index: 1; }

/* Circular icon badge with soft pulse */
.emb-stage-note-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.30),
                0 0 0 4px rgba(245, 158, 11, 0.10);
    position: relative;
}

.emb-stage-note-icon i {
    font-size: 1.1rem;
    line-height: 1;
}

.emb-stage-note-icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(245, 158, 11, 0.45);
    animation: emb-note-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes emb-note-pulse {
    0%   { transform: scale(0.95); opacity: 0.7; }
    70%  { transform: scale(1.20); opacity: 0; }
    100% { transform: scale(1.20); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .emb-stage-note-icon::after { animation: none; }
}

/* Body — label + text */
.emb-stage-note-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.emb-stage-note-label {
    display: inline-block;
    font-size: .65rem;
    font-weight: 800;
    color: #B45309;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.emb-stage-note-text {
    margin: 0;
    font-size: .85rem;
    color: #78350F;
    line-height: 1.55;
    letter-spacing: 0.005em;
}

.emb-stage-note-text strong {
    color: #92400E;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .emb-stage-note { padding: 12px 14px; gap: 11px; }
    .emb-stage-note-icon { width: 32px; height: 32px; }
    .emb-stage-note-icon i { font-size: .95rem; }
    .emb-stage-note-label { font-size: .6rem; }
    .emb-stage-note-text { font-size: .78rem; }
}

@media (max-width: 575.98px) {
    .emb-stage { padding: 14px; }
    .emb-stage-pane { padding: 14px; }
    .emb-stage-img { max-height: 280px; }
    .emb-stage-card { min-height: 320px; }
}


/* ========== Embroidery Landing — modern ========== */

/* ---------- Hero ---------- */
.el-hero {
    position: relative;
    background: linear-gradient(135deg, #002347 0%, #003366 45%, #001528 100%);
    color: #ffffff;
    padding: 32px 0 36px;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 992px) {
    .el-hero { padding: 44px 0 52px; }
}

/* Subtle diagonal stripe pattern for texture */
.el-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.025) 0,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 16px
    );
    pointer-events: none;
    z-index: 0;
}

/* Staggered entrance animations */
.el-hero-anim {
    opacity: 0;
    transform: translateY(18px);
    animation: el-hero-rise .7s cubic-bezier(.2, .8, .2, 1) forwards;
}

.el-hero-anim-1 { animation-delay: 0.05s; }
.el-hero-anim-2 { animation-delay: 0.15s; }
.el-hero-anim-3 { animation-delay: 0.28s; }
.el-hero-anim-4 { animation-delay: 0.42s; }
.el-hero-anim-5 { animation-delay: 0.55s; }

@keyframes el-hero-rise {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .el-hero-anim { opacity: 1; transform: none; animation: none; }
}

.el-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    z-index: 0;
    opacity: 0.6;
}

.el-hero-orb--red {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(153, 0, 51, 0.55) 0%, rgba(153, 0, 51, 0) 70%);
    top: -180px; right: -120px;
}

.el-hero-orb--blue {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(0, 163, 224, 0.35) 0%, rgba(0, 163, 224, 0) 70%);
    bottom: -160px; left: -80px;
}

.el-hero > .container { position: relative; z-index: 1; }

.el-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(153, 0, 51, 0.20);
    color: #ffffff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.el-hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 4px rgba(153, 0, 51, 0.28);
}

.el-hero-title {
    margin: 12px 0 10px;
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

@media (min-width: 576px) { .el-hero-title { font-size: 1.8rem; } }
@media (min-width: 992px) { .el-hero-title { font-size: 2.2rem; } }
@media (min-width: 1400px) { .el-hero-title { font-size: 2.5rem; } }

.el-hero-title-accent {
    background: linear-gradient(95deg, #FFB301 0%, var(--secondary) 55%, #FF6F61 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding-right: .12em;
    line-height: 1.16;
    animation: el-hero-gradient-shift 6s ease-in-out infinite;
}

@keyframes el-hero-gradient-shift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

@media (prefers-reduced-motion: reduce) {
    .el-hero-title-accent { animation: none; }
}

.el-hero-sub {
    margin: 0 0 16px;
    font-size: .9rem;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.55;
    max-width: 520px;
}

@media (min-width: 992px) { .el-hero-sub { font-size: .95rem; max-width: 500px; } }

/* Stats strip */
.el-hero-stats {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
}

@media (min-width: 992px) { .el-hero-stats { justify-content: flex-start; } }

.el-hero-stats li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    line-height: 1.1;
}

.el-hero-stats li:first-child { padding-left: 0; }
.el-hero-stats li:last-child { border-right: 0; padding-right: 0; }

@media (min-width: 992px) { .el-hero-stats li { padding: 0 16px; } }

.el-hero-stat-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #ffffff 0%, #FFD7B5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (min-width: 992px) { .el-hero-stat-num { font-size: 1.35rem; } }

.el-hero-stat-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.el-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

@media (min-width: 992px) { .el-hero-actions { justify-content: flex-start; } }

/* Primary CTA with subtle shimmer + arrow slide */
.el-hero-cta-shimmer {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(153, 0, 51, 0.40) !important;
}

.el-hero-cta-shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.20) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    animation: el-hero-cta-shine 3.6s ease-in-out 1s infinite;
}

@keyframes el-hero-cta-shine {
    0% { left: -80%; }
    60%, 100% { left: 180%; }
}

@media (prefers-reduced-motion: reduce) {
    .el-hero-cta-shimmer::before { animation: none; }
}

.el-hero-cta-arrow {
    margin-left: 4px;
    transition: transform .25s ease;
}

.el-hero-cta-shimmer:hover .el-hero-cta-arrow { transform: translateX(4px); }

/* Outline variant tweaked for the dark hero background */
.el-hero-btn-on-dark {
    border-color: rgba(255, 255, 255, 0.50) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.el-hero-btn-on-dark:hover {
    background: #ffffff !important;
    color: var(--primary) !important;
    border-color: #ffffff !important;
}

/* Hero art */
.el-hero-art {
    position: relative;
    display: inline-block;
}

.el-hero-art-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 0;
    animation: el-hero-ring-spin 28s linear infinite;
}

.el-hero-art-ring::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 4px rgba(153, 0, 51, 0.25);
}

.el-hero-art-ring--alt {
    width: 230px;
    height: 230px;
    border-color: rgba(255, 255, 255, 0.08);
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 38s;
}

.el-hero-art-ring--alt::before {
    background: #FFB301;
    box-shadow: 0 0 0 4px rgba(255, 179, 1, 0.25);
}

@media (max-width: 991.98px) {
    .el-hero-art-ring { width: 340px; height: 340px; }
    .el-hero-art-ring--alt { width: 270px; height: 270px; }
}

@media (max-width: 575.98px) {
    .el-hero-art-ring { width: 260px; height: 260px; }
    .el-hero-art-ring--alt { width: 200px; height: 200px; }
}

@keyframes el-hero-ring-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.el-hero-art-main {
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: 240px;
    height: auto;
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.40));
    animation: el-hero-float 5.5s ease-in-out infinite;
}

@media (max-width: 991.98px) { .el-hero-art-main { width: 200px; } }
@media (max-width: 575.98px) { .el-hero-art-main { width: 180px; } }

/* Layered caps: scarlet front + white slightly behind & rotated for depth */
.el-hero-art-back {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 230px;
    transform: translate(-65%, -45%) rotate(-12deg);
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.32));
    animation: el-hero-float 5.5s ease-in-out infinite 1.2s;
    opacity: 0.95;
}

.el-hero-art-front {
    position: relative;
    z-index: 1;
    transform: rotate(6deg);
}

@media (max-width: 991.98px) {
    .el-hero-art-back { width: 190px; }
}

@media (max-width: 575.98px) {
    .el-hero-art-back { width: 170px; transform: translate(-72%, -45%) rotate(-14deg); }
}

.el-hero-art-floater {
    position: absolute;
    z-index: 2;
    width: 62px;
    height: 62px;
    bottom: -8px;
    right: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #F1F5F9 100%);
    border-radius: 50%;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.30),
                0 0 0 3px rgba(255, 255, 255, 0.08);
    animation: el-hero-float 5.5s ease-in-out infinite 0.6s reverse;
}

@media (max-width: 575.98px) {
    .el-hero-art-floater { width: 64px; height: 64px; padding: 12px; bottom: -6px; right: 0; }
}

/* Stitched-to-order tag */
.el-hero-art-tag {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: -10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff 0%, #FFF7E6 100%);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    transform: rotate(-6deg);
}

.el-hero-art-tag i {
    color: var(--secondary);
    font-size: .85rem;
}

@media (max-width: 575.98px) {
    .el-hero-art-tag { top: 6px; left: -6px; padding: 6px 10px; font-size: .66rem; }
}

@keyframes el-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
    .el-hero-art-main, .el-hero-art-floater { animation: none; }
}

/* ---------- Section headers ---------- */
.el-section-head {
    text-align: center;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

@media (min-width: 992px) { .el-section-head { margin-bottom: 24px; gap: 10px; } }

.el-section-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

@media (min-width: 768px) { .el-section-title { font-size: 1.55rem; } }
@media (min-width: 1200px) { .el-section-title { font-size: 1.8rem; } }

.el-section-title-accent { color: var(--secondary); }

.el-section-sub {
    margin: 0;
    font-size: .95rem;
    color: #64748B;
    line-height: 1.55;
    max-width: 560px;
}

@media (min-width: 768px) { .el-section-sub { font-size: 1rem; } }

/* ---------- How it works ---------- */
/* ---------- How It Works — premium step timeline ---------- */
.eng-how {
    position: relative;
    padding: 36px 0 40px;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 992px) { .eng-how { padding: 56px 0 64px; } }

/* Decorative orbs — matches the brand palette */
.eng-how-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.eng-how-orb--gold {
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.30) 0%, rgba(250, 204, 21, 0) 70%);
    top: -120px; left: -100px;
}

.eng-how-orb--red {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(153, 0, 51, 0.18) 0%, rgba(153, 0, 51, 0) 70%);
    bottom: -120px; right: -80px;
}

.eng-how > .container { position: relative; z-index: 1; }

/* Flow layout — vertical on mobile, horizontal with arrow connectors on desktop */
.eng-how-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
}

@media (min-width: 768px) {
    .eng-how-flow {
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 0;
    }
}

/* Step card — clean white with colored top gradient strip */
.eng-how-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 22px 22px 20px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s ease,
                border-color .2s ease;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 768px) {
    .eng-how-card { padding: 26px 24px 22px; }
}

.eng-how-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--primary), #0056a3);
    z-index: 2;
}

.eng-how-card--02::before { background: linear-gradient(90deg, var(--secondary), #c4144a); }
.eng-how-card--03::before { background: linear-gradient(90deg, #10B981, #34D399); }

.eng-how-card:hover {
    transform: translateY(-5px);
    border-color: #CBD5E1;
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.10);
}

/* Watermark number — huge faded numeral behind the content */
.eng-how-watermark {
    position: absolute;
    top: -6px;
    right: -8px;
    z-index: 0;
    font-size: 7.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    color: rgba(15, 23, 42, 0.05);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
}

.eng-how-card--02 .eng-how-watermark { color: rgba(153, 0, 51, 0.07); }
.eng-how-card--03 .eng-how-watermark { color: rgba(16, 185, 129, 0.08); }

/* Card head — badge + icon side by side */
.eng-how-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.eng-how-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 51, 102, 0.08);
    color: var(--primary);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.eng-how-card--02 .eng-how-badge {
    background: rgba(153, 0, 51, 0.10);
    color: var(--secondary);
}

.eng-how-card--03 .eng-how-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

/* Icon — colored circular badge with soft shadow */
.eng-how-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, #002347 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 10px 22px rgba(0, 51, 102, 0.28);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.eng-how-card--02 .eng-how-icon {
    background: linear-gradient(135deg, var(--secondary) 0%, #7a0028 100%);
    box-shadow: 0 10px 22px rgba(153, 0, 51, 0.30);
}

.eng-how-card--03 .eng-how-icon {
    background: linear-gradient(135deg, #10B981 0%, #047857 100%);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.32);
}

.eng-how-card:hover .eng-how-icon {
    transform: scale(1.08) rotate(-4deg);
}

.eng-how-title {
    position: relative;
    z-index: 1;
    margin: 0 0 6px;
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.eng-how-text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: .88rem;
    color: #64748B;
    line-height: 1.55;
}

/* Arrow connector between cards — only renders on desktop */
.eng-how-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: var(--secondary);
    font-size: 1.4rem;
    opacity: 0.7;
    animation: eng-how-arrow-slide 2.4s ease-in-out infinite;
}

@media (min-width: 768px) {
    .eng-how-arrow { display: inline-flex; }
}

@keyframes eng-how-arrow-slide {
    0%, 100% { transform: translateX(0); opacity: 0.55; }
    50%      { transform: translateX(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .eng-how-arrow { animation: none; opacity: 0.8; }
    .eng-how-card { transition: none; }
    .eng-how-card:hover { transform: none; }
    .eng-how-card:hover .eng-how-icon { transform: none; }
}

/* ---------- Product sections ---------- */
.el-products {
    padding: 28px 0;
}

@media (min-width: 992px) { .el-products { padding: 36px 0; } }

.el-products--alt {
    background: linear-gradient(180deg, #F8FAFC 0%, #ffffff 100%);
}

/* ---------- Trust strip ---------- */
.el-trust {
    background: #FAFBFC;
    border-top: 1px solid #E5E7EB;
    padding: 20px 0;
}

@media (min-width: 992px) { .el-trust { padding: 28px 0; } }

.el-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) { .el-trust-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.el-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.el-trust-item:hover {
    transform: translateY(-2px);
    border-color: #CBD5E1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.el-trust-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(0, 51, 102, 0.10);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.el-trust-icon--info    { background: rgba(14, 165, 233, 0.12); color: #0369A1; }
.el-trust-icon--success { background: rgba(16, 185, 129, 0.12); color: #047857; }
.el-trust-icon--gold    { background: rgba(245, 158, 11, 0.14); color: #B45309; }

.el-trust-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    min-width: 0;
}

.el-trust-text strong {
    font-size: .88rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
}

.el-trust-text span {
    font-size: .72rem;
    color: #64748B;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .el-trust-icon { width: 36px; height: 36px; font-size: 1rem; }
    .el-trust-item { padding: 11px 13px; gap: 10px; }
    .el-trust-text strong { font-size: .82rem; }
    .el-trust-text span { font-size: .68rem; }
}


/* ========== Engraving Landing — modern ========== */

/* On the dark-navy .el-hero backdrop, use a vibrant yellow → orange gradient
   for a warm, high-contrast accent that pops against the navy. */
.el-hero .eng-hero-accent {
    background: linear-gradient(95deg, #FDE047 0%, #FACC15 45%, #F97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Baseball is round — scale it up close to the bat height inside the wide
   eng-bat-strip (15:2). */
.eng-bat-img--ball.is-active {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
}

/* ---------- Product feature cards (editorial alternating layout) ---------- */
.eng-products {
    position: relative;
    padding: 40px 0 56px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 60%, #FFFFFF 100%);
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 992px) { .eng-products { padding: 64px 0 80px; } }

.eng-products-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.eng-products-orb--blue {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(0, 51, 102, 0.18) 0%, rgba(0, 51, 102, 0) 70%);
    top: -140px; right: -120px;
}

.eng-products-orb--gold {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.22) 0%, rgba(250, 204, 21, 0) 70%);
    bottom: -140px; left: -100px;
}

/* Stacked list of feature cards */
.eng-feature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

@media (min-width: 992px) { .eng-feature-list { gap: 36px; } }

/* Single editorial card — content + media side-by-side on desktop */
.eng-feature {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
    border: 1px solid #E5E7EB;
    border-radius: 28px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1),
                box-shadow .35s ease,
                border-color .2s ease;
    isolation: isolate;
}

@media (min-width: 768px) {
    .eng-feature {
        grid-template-columns: 1.05fr 1fr;
        align-items: stretch;
    }
    .eng-feature--reverse .eng-feature-content { order: 2; }
    .eng-feature--reverse .eng-feature-media   { order: 1; }
}

.eng-feature:hover {
    transform: translateY(-6px);
    border-color: #CBD5E1;
    box-shadow: 0 32px 56px rgba(15, 23, 42, 0.14);
    color: inherit;
    text-decoration: none;
}

/* Giant ghost numeral hiding in the card corner */
.eng-feature-num {
    position: absolute;
    top: -12px;
    right: 18px;
    z-index: 0;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 11rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    color: rgba(0, 51, 102, 0.05);
    pointer-events: none;
    user-select: none;
}

.eng-feature--reverse .eng-feature-num { left: 18px; right: auto; }
.eng-feature--ball .eng-feature-num { color: rgba(15, 23, 42, 0.06); }

@media (max-width: 575.98px) {
    .eng-feature-num { font-size: 8rem; top: -6px; right: 8px; }
    .eng-feature--reverse .eng-feature-num { left: 8px; }
}

/* Content side */
.eng-feature-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 24px 26px;
    order: 2;
}

@media (min-width: 768px) {
    .eng-feature-content { order: 1; padding: 44px 38px; }
}

@media (min-width: 1200px) {
    .eng-feature-content { padding: 56px 52px; gap: 18px; }
}

/* Sticker-style tag — slightly rotated for that 2026 magazine feel */
.eng-feature-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--secondary) 0%, #7a0028 100%);
    color: #ffffff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(153, 0, 51, 0.32);
    transform: rotate(-2deg);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.eng-feature:hover .eng-feature-tag { transform: rotate(0); }

.eng-feature-tag i { font-size: .78rem; }

.eng-feature-tag--keepsake {
    background: linear-gradient(135deg, var(--primary) 0%, #002347 100%);
    box-shadow: 0 10px 22px rgba(0, 51, 102, 0.32);
}

/* Display title with italic-emphasis accent */
.eng-feature-title {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -0.025em;
    line-height: 1.18;
    padding-bottom: .08em;
}

.eng-feature-title em {
    font-style: italic;
    display: inline-block;
    padding: 0 .18em .12em 0;
    background: linear-gradient(95deg, #FDE047 0%, #FACC15 45%, #F97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: inherit;
}

@media (min-width: 768px)  { .eng-feature-title { font-size: 2.2rem; } }
@media (min-width: 1200px) { .eng-feature-title { font-size: 2.6rem; } }

.eng-feature-desc {
    margin: 0;
    font-size: .96rem;
    color: #475569;
    line-height: 1.6;
    max-width: 520px;
}

/* Feature chip row */
.eng-feature-chips {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eng-feature-chips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.eng-feature-chips li i {
    font-size: .9rem;
    color: var(--secondary);
}

/* Footer row — price + CTA */
.eng-feature-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px dashed #E2E8F0;
}

.eng-feature-price {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.eng-feature-price-tag {
    font-size: .58rem;
    font-weight: 800;
    color: #94A3B8;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eng-feature-price-val {
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) { .eng-feature-price-val { font-size: 1.8rem; } }

/* Pill CTA with circular arrow capsule (modern, sticker-button hybrid) */
.eng-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 20px;
    border-radius: 999px;
    background: var(--primary);
    color: #ffffff;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    box-shadow: 0 12px 26px rgba(0, 51, 102, 0.26);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.eng-feature-cta-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .25s ease, color .25s ease;
}

.eng-feature:hover .eng-feature-cta {
    background: var(--secondary);
    box-shadow: 0 16px 32px rgba(153, 0, 51, 0.32);
}

.eng-feature:hover .eng-feature-cta-arrow {
    background: #ffffff;
    color: var(--secondary);
    transform: translateX(4px) rotate(-12deg);
}

/* Media side — mesh gradient background + floating product image */
.eng-feature-media {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    isolation: isolate;
    order: 1;
}

@media (min-width: 768px) {
    .eng-feature-media { order: 2; min-height: auto; padding: 36px; }
}

.eng-feature-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.eng-feature--bat .eng-feature-mesh,
.eng-feature--ball .eng-feature-mesh {
    background: linear-gradient(135deg, #001a33 0%, #003366 55%, #0a4a8a 100%);
}

/* White-line check grid overlay, masked to fade at the edges */
.eng-feature-mesh::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
}

.eng-feature:hover .eng-feature-mesh {
    transform: scale(1.08) rotate(2deg);
}

/* Glow ring hidden — backdrop stays solid primary */
.eng-feature-glow { display: none; }

.eng-feature-media img {
    position: relative;
    z-index: 1;
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 28px 32px rgba(15, 23, 42, 0.28));
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.eng-feature--ball .eng-feature-media img { max-width: 60%; }

.eng-feature:hover .eng-feature-media img {
    transform: scale(1.08) rotate(-4deg);
}

/* Mobile compact tweaks */
@media (max-width: 575.98px) {
    .eng-feature { border-radius: 22px; }
    .eng-feature-content { padding: 22px 20px 22px; gap: 14px; }
    .eng-feature-title { font-size: 1.55rem; }
    .eng-feature-desc { font-size: .9rem; }
    .eng-feature-chips li { font-size: .72rem; padding: 6px 11px; }
    .eng-feature-price-val { font-size: 1.4rem; }
    .eng-feature-cta { font-size: .8rem; padding: 7px 7px 7px 16px; }
    .eng-feature-cta-arrow { width: 28px; height: 28px; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .eng-feature,
    .eng-feature:hover,
    .eng-feature:hover .eng-feature-mesh,
    .eng-feature:hover .eng-feature-glow,
    .eng-feature:hover .eng-feature-media img,
    .eng-feature:hover .eng-feature-tag,
    .eng-feature:hover .eng-feature-cta-arrow {
        transition: none;
        transform: none;
    }
}

/* ============================================================
   Bat Wizard (BWZ) — modern editorial wizard UI
   ============================================================ */

/* ---------- Header banner ---------- */
.bwz-header {
    position: relative;
    background: linear-gradient(135deg, #001a33 0%, #003366 55%, #0a4a8a 100%);
    color: #ffffff;
    padding: 28px 0 30px;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 992px) { .bwz-header { padding: 36px 0 40px; } }

.bwz-header-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.bwz-header-orb--gold {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.32) 0%, rgba(250, 204, 21, 0) 70%);
    top: -150px; right: -100px;
}

.bwz-header-orb--blue {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(10, 74, 138, 0.7) 0%, rgba(10, 74, 138, 0) 70%);
    bottom: -120px; left: -80px;
}

.bwz-header-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
}

.bwz-header > .container { position: relative; z-index: 1; }

.bwz-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bwz-header-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FACC15;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.25);
}

.bwz-header-title {
    margin: 12px 0 6px;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: #ffffff;
}

@media (min-width: 576px) { .bwz-header-title { font-size: 1.7rem; } }
@media (min-width: 992px) { .bwz-header-title { font-size: 2rem; } }

.bwz-header-accent {
    background: linear-gradient(95deg, #FDE047 0%, #FACC15 45%, #F97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding-right: .12em;
}

.bwz-header-sub {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 580px;
}

/* ---------- Progress bar (overrides engraving.css .eng-step-* styles) ---------- */
.bwz-progress.eng-progress-section {
    background: #FFFFFF !important;
    padding: 10px 0 9px;
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.bwz-progress-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 880px;
    margin: 0 auto;
    gap: 4px;
}

.bwz-progress .bwz-step {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.bwz-progress .eng-step-dot.bwz-step-dot {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #64748B !important;
    border: 1.5px solid #E2E8F0 !important;
    font-size: .75rem !important;
    font-weight: 800;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
    line-height: 1;
    animation: none !important;
}

.bwz-progress .bwz-step.active .bwz-step-dot,
.bwz-progress .eng-step-indicator.active .bwz-step-dot {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 5px 12px rgba(0, 51, 102, 0.28) !important;
    transform: scale(1.04);
    animation: none !important;
}

.bwz-progress .bwz-step.completed .bwz-step-dot,
.bwz-progress .eng-step-indicator.completed .bwz-step-dot {
    background: #10B981 !important;
    color: #ffffff !important;
    border-color: #10B981 !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.28) !important;
}

.bwz-progress .bwz-step-label {
    font-size: .72rem;
    font-weight: 700;
    color: #64748B;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: none;
}

@media (min-width: 768px) { .bwz-progress .bwz-step-label { display: inline; } }

.bwz-progress .bwz-step.active .bwz-step-label,
.bwz-progress .eng-step-indicator.active .bwz-step-label { color: var(--primary); }
.bwz-progress .bwz-step.completed .bwz-step-label,
.bwz-progress .eng-step-indicator.completed .bwz-step-label { color: #047857; }

.bwz-progress .eng-step-line.bwz-step-line {
    flex: 1;
    height: 2px !important;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 51, 102, 0.18) 0,
        rgba(0, 51, 102, 0.18) 5px,
        transparent 5px,
        transparent 10px
    ) !important;
    border-radius: 2px;
    min-width: 18px;
    margin: 0;
}

.bwz-progress .eng-step-indicator.completed + .eng-step-line.bwz-step-line {
    background: linear-gradient(90deg, #10B981, rgba(16, 185, 129, 0.5)) !important;
}

/* ---------- Step heading ---------- */
.bwz-step-head {
    margin-bottom: 14px;
}

.bwz-step-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 51, 102, 0.08);
    color: var(--primary);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 6px;
}

.bwz-step-title {
    margin: 0 0 3px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

@media (min-width: 768px) { .bwz-step-title { font-size: 1.25rem; } }

.bwz-step-desc {
    margin: 0;
    font-size: .82rem;
    color: #64748B;
    line-height: 1.5;
}

/* Section sub-heads (e.g. Bat Finish, Engraving Style) */
.bwz-section-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
    font-size: .85rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
    line-height: 1;
}

.bwz-section-head i { color: var(--secondary); font-size: .92rem; }

/* Spacing for the embroidery-style section headers when reused in the wizard */
.bwz-sec-head { margin: 6px 0 14px; }
.bwz-sec-head + #bat-products-grid,
.bwz-sec-head + .bat-styles-grid { margin-top: 0; }
.bwz-sec-head:not(:first-of-type) { margin-top: 22px; }

/* Larger title variant for the wizard section heads */
.bwz-sec-head--lg .el-section-title {
    font-size: 1.7rem;
}
@media (min-width: 768px)  { .bwz-sec-head--lg .el-section-title { font-size: 2.1rem; } }
@media (min-width: 1200px) { .bwz-sec-head--lg .el-section-title { font-size: 2.4rem; } }

.bwz-sec-head--lg .el-section-sub {
    margin-top: 6px;
    font-size: .92rem;
    line-height: 1.5;
}

/* ---------- Option cards (Step 1) ---------- */
.bwz-option-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 576px) { .bwz-option-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .bwz-option-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

.bwz-option-grid .bwz-option--wide { grid-column: span 1; }
@media (min-width: 576px) { .bwz-option-grid:has(.bwz-option--wide) { grid-template-columns: 1fr 1fr; } }

.eng-option-card.bwz-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px;
    background: #ffffff;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s ease,
                border-color .2s ease,
                background-color .2s ease;
    overflow: hidden;
    isolation: isolate;
}

.eng-option-card.bwz-option::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #0056a3);
    opacity: 0;
    transform: none;
    transition: opacity .25s ease;
    border-radius: 16px 16px 0 0;
}

.eng-option-card.bwz-option:hover {
    transform: translateY(-4px);
    border-color: #CBD5E1 !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.10);
}

.eng-option-card.bwz-option:hover::before { opacity: 1; transform: none; }

.eng-option-card.bwz-option.selected,
.eng-option-card.bwz-option.is-selected {
    background: linear-gradient(180deg, #ffffff 0%, #F0F5FB 100%);
    border-color: var(--primary) !important;
    box-shadow: 0 18px 32px rgba(0, 51, 102, 0.14),
                inset 0 0 0 1px rgba(0, 51, 102, 0.20);
}

.eng-option-card.bwz-option.selected::before,
.eng-option-card.bwz-option.is-selected::before {
    opacity: 1;
    transform: none;
}

/* Selected check badge */
.bwz-option-check {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity .25s ease, transform .25s cubic-bezier(.2, 1.25, .35, 1);
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.30);
}

.bwz-option.selected .bwz-option-check,
.bwz-option.is-selected .bwz-option-check,
.eng-option-card.selected.bwz-option .bwz-option-check,
.eng-option-card.is-selected.bwz-option .bwz-option-check {
    opacity: 1;
    transform: scale(1);
}

/* Icon — colored rounded square tile (overrides engraving.css's circular .eng-option-icon) */
.eng-option-card.bwz-option .bwz-option-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary) 0%, #002347 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.26);
    margin-bottom: 2px;
    transform: none;
}

.eng-option-card.bwz-option .bwz-option-icon i {
    color: #ffffff !important;
    font-size: .95rem !important;
}

.eng-option-card.bwz-option:hover .bwz-option-icon,
.eng-option-card.bwz-option.selected .bwz-option-icon {
    transform: scale(1.06);
    background: linear-gradient(135deg, var(--primary) 0%, #002347 100%);
}

.eng-option-card.bwz-option .bwz-option-icon--alt {
    background: linear-gradient(135deg, var(--secondary) 0%, #7a0028 100%);
    box-shadow: 0 8px 18px rgba(153, 0, 51, 0.28);
}

.eng-option-card.bwz-option .bwz-option-icon--gold {
    background: linear-gradient(135deg, #F97316 0%, #C2410C 100%);
    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.30);
}

.eng-option-card.bwz-option .bwz-option-icon--success {
    background: linear-gradient(135deg, #10B981 0%, #047857 100%);
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.30);
}

.eng-option-card.bwz-option:hover .bwz-option-icon--alt,
.eng-option-card.bwz-option.selected .bwz-option-icon--alt {
    background: linear-gradient(135deg, var(--secondary) 0%, #7a0028 100%);
}
.eng-option-card.bwz-option:hover .bwz-option-icon--gold,
.eng-option-card.bwz-option.selected .bwz-option-icon--gold {
    background: linear-gradient(135deg, #F97316 0%, #C2410C 100%);
}
.eng-option-card.bwz-option:hover .bwz-option-icon--success,
.eng-option-card.bwz-option.selected .bwz-option-icon--success {
    background: linear-gradient(135deg, #10B981 0%, #047857 100%);
}

.bwz-option-title {
    margin: 0;
    font-size: .88rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.bwz-option-desc {
    margin: 0;
    font-size: .74rem;
    color: #64748B;
    line-height: 1.45;
}

/* ---------- Navigation actions row — sticky floating buttons (no bar) ---------- */
.bwz-actions {
    position: sticky;
    bottom: 18px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 28px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none; /* allow clicks to pass through the empty bar area */
}

/* Buttons themselves remain clickable */
.bwz-actions > * { pointer-events: auto; }

/* Subtle fade overlay above the sticky buttons so content doesn't merge with them */
.bwz-actions::before {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: -18px;
    height: calc(100% + 36px);
    background: linear-gradient(to top, rgba(248, 250, 252, 0.92) 30%, rgba(248, 250, 252, 0) 100%);
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.bwz-actions--end { justify-content: flex-end; }

/* Strengthen the floating buttons' shadow so they stand out cleanly */
.bwz-actions .ca-btn--primary {
    box-shadow: 0 12px 28px rgba(0, 51, 102, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.bwz-actions .ca-btn--outline {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

/* Give the wizard section a little extra room at the bottom so the sticky
   actions don't crash into the footer when the user scrolls all the way down. */
.wizard-bg { padding-bottom: 90px !important; }

/* Step 4 wraps the actions row in #bat-order-actions, which would isolate the
   sticky context. `display: contents` makes the wrapper transparent for layout
   so the .bwz-actions inside behaves like a direct child of .eng-wizard-step. */
#bat-order-actions { display: contents; }

/* Premium primary button inside the wizard */
.bwz-actions .ca-btn--primary {
    background: linear-gradient(135deg, var(--primary), #0056a3) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(0, 51, 102, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease !important;
}

.bwz-actions .ca-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--secondary), #7a0028) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(153, 0, 51, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.bwz-actions .ca-btn--primary:disabled,
.bwz-actions .ca-btn--primary.is-invalid-step {
    background: #94A3B8 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 0.65;
}

/* When the Next button is in the "needs attention" state, hover should
   nudge the user toward the click that reveals the validation reason. */
.bwz-actions .ca-btn--primary.is-invalid-step:hover {
    transform: none;
}

/* Premium outline button inside the wizard */
.bwz-actions .ca-btn--outline {
    background: #ffffff !important;
    color: var(--primary) !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .25s ease !important;
}

.bwz-actions .ca-btn--outline:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 51, 102, 0.12) !important;
    background: #ffffff !important;
}

.bwz-actions-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bwz-wishlist-btn,
.bwz-actions .ca-btn--outline.bwz-wishlist-btn {
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.bwz-wishlist-btn:hover,
.bwz-actions .ca-btn--outline.bwz-wishlist-btn:hover {
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(153, 0, 51, 0.28) !important;
}

.bwz-wishlist-btn i,
.bwz-actions .ca-btn--outline.bwz-wishlist-btn i {
    color: inherit;
}

/* ---------- Step 3 / 4 sections — clean modern card panels ---------- */
.bwz-panel {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    padding: 22px 22px 24px;
    margin-bottom: 16px;
    box-shadow:
        0 0 0 1px #E5E7EB,
        0 1px 3px rgba(15, 23, 42, 0.03),
        0 12px 28px rgba(15, 23, 42, 0.04);
    transition: box-shadow .3s ease;
}

@media (min-width: 768px) {
    .bwz-panel { padding: 28px 30px 30px; margin-bottom: 20px; }
}

.bwz-panel:last-of-type { margin-bottom: 0; }

.bwz-panel:hover {
    box-shadow:
        0 0 0 1px #CBD5E1,
        0 2px 6px rgba(15, 23, 42, 0.05),
        0 20px 40px rgba(15, 23, 42, 0.06);
}


/* Section header — centered embroidery-landing style (same as Step 2) */
.bwz-panel > .el-section-head {
    text-align: center;
    margin: 4px 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
}

.bwz-panel > .el-section-head .ca-eyebrow {
    margin-bottom: 8px;
}

/* ---------- Step 3: Form fields, members header, order summary ---------- */
.bwz-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .bwz-form-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .bwz-form-grid--2-1 { grid-template-columns: 2fr 1fr; }
}

.bwz-form-field {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
}

.bwz-form-field > .bwz-form-label,
.bwz-form-field > .bwz-form-input,
.bwz-form-field > .bwz-form-select,
.bwz-form-field > .input-group,
.bwz-form-field > .bwz-form-error {
    grid-column: 1 / -1;
}

.bwz-form-field > .bwz-form-help {
    grid-column: 1;
    align-self: center;
}

.bwz-form-field > .bwz-form-count {
    grid-column: 2;
    align-self: center;
    justify-self: end;
}

.bwz-form-label {
    margin: 0;
    font-size: .68rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}

.bwz-form-req { color: var(--secondary); }
.bwz-form-optional {
    margin-left: 4px;
    font-size: .62rem;
    font-weight: 600;
    color: #94A3B8;
    letter-spacing: 0;
    text-transform: none;
}

.bwz-form-select,
.bwz-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #ffffff;
    color: #0F172A;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.bwz-form-select:focus,
.bwz-form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.12),
                0 2px 6px rgba(0, 51, 102, 0.10);
    transform: translateY(-1px);
}

.bwz-form-select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003366'%3E%3Cpath d='M8 11.5L2 5.5l1.4-1.4L8 8.7l4.6-4.6L14 5.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    cursor: pointer;
}

.bwz-form-select:hover:not(:disabled),
.bwz-form-input:hover:not(:disabled) { border-color: #CBD5E1; }

.bwz-form-select:focus,
.bwz-form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.16);
}

.bwz-form-select:disabled,
.bwz-form-input:disabled {
    background-color: #F8FAFC;
    color: #94A3B8;
    cursor: not-allowed;
    box-shadow: none;
}

.bwz-form-help {
    margin: 4px 0 0;
    font-size: .74rem;
    color: #64748B;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.bwz-form-help::before {
    content: "\F431"; /* bi-info-circle-fill */
    font-family: "bootstrap-icons";
    color: var(--primary);
    font-size: .85rem;
    flex-shrink: 0;
}

.bwz-form-help i { display: none; }

.bwz-form-count {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 51, 102, 0.06);
    color: var(--primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bwz-form-error {
    margin-top: 3px;
    font-size: .68rem;
    color: var(--secondary);
    font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────
   Read-only Finish/Style block (Individual orders, Step 3)
   Locked selections pulled from Step 2 + a "Change" button that jumps
   back. Designed as a subtle navy-tinted card so users recognize it as
   read-only context rather than another input.
   ─────────────────────────────────────────────────────────────────── */
.bwz-readonly-block {
    margin: 0 0 18px;
    padding: 14px 16px 16px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(0, 51, 102, 0.06) 0%, rgba(0, 51, 102, 0.02) 100%),
        #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.12);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bwz-readonly-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.bwz-readonly-block-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 51, 102, 0.10);
    color: var(--primary);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
}

.bwz-readonly-block-eyebrow i {
    font-size: .78rem;
    color: var(--primary);
}

.bwz-readonly-block-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid var(--secondary);
    color: var(--secondary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}

.bwz-readonly-block-edit i { font-size: .82rem; }

.bwz-readonly-block-edit:hover {
    background: var(--secondary);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(153, 0, 51, 0.30);
}

.bwz-readonly-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 576px) {
    .bwz-readonly-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.bwz-readonly {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bwz-readonly-label {
    font-size: .60rem;
    font-weight: 800;
    color: #64748B;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.bwz-readonly-value {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.10);
    color: var(--primary);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.bwz-readonly-value-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.10), rgba(0, 51, 102, 0.04));
    color: var(--primary);
}

.bwz-readonly-value-icon i { font-size: .95rem; line-height: 1; }

.bwz-readonly-value-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy fallback — old `<i>` markup inside .bwz-readonly-value */
.bwz-readonly-value > i {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 1rem;
}

/* Action row that sits below the section header inside .bwz-panel */
.bwz-members-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bwz-members-actions--solo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .bwz-members-actions--solo { flex-wrap: wrap; }
}

/* ---------- Modern data table (Roster Members / Players & Coaches) ---------- */
#roster-members-list,
#manual-players-list {
    margin-top: 8px;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

#roster-members-list .table-responsive,
#manual-players-list .table-responsive {
    border-radius: 14px;
    overflow-x: auto;
}

#roster-members-list .table,
#manual-players-list .table {
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    min-width: 720px;
}

/* Header — solid primary navy backdrop with white mini-cap text */
#roster-members-list .table thead th,
#manual-players-list .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--primary) !important;
    color: #ffffff !important;
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 12px !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    white-space: nowrap;
    box-shadow: none !important;
    vertical-align: middle !important;
    line-height: 1.4;
}

#roster-members-list .table thead th:first-child,
#manual-players-list .table thead th:first-child {
    padding-left: 18px !important;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
#roster-members-list .table thead th:last-child,
#manual-players-list .table thead th:last-child {
    padding-right: 18px !important;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Form-check container inside thead — keep toggle + label vertically centered */
#roster-members-list .table thead .form-check,
#manual-players-list .table thead .form-check {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding-left: 0 !important;
    min-height: 22px;
    vertical-align: middle;
}

/* "Include Name" / "Order Bat" labels inside the navy header */
#roster-members-list .table thead .form-check-label,
#manual-players-list .table thead .form-check-label {
    color: #ffffff !important;
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 !important;
    line-height: 1;
}

/* iOS toggle switches inside the navy header — white knob, red on-state */
#roster-members-list .table thead .form-check-input[type="checkbox"],
#manual-players-list .table thead .form-check-input[type="checkbox"] {
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30) !important;
}

#roster-members-list .table thead .form-check-input[type="checkbox"]::before,
#manual-players-list .table thead .form-check-input[type="checkbox"]::before {
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30);
}

#roster-members-list .table thead .form-check-input[type="checkbox"]:checked,
#manual-players-list .table thead .form-check-input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--secondary), #7a0028) !important;
    box-shadow: 0 4px 10px rgba(153, 0, 51, 0.45) !important;
}

#roster-members-list .table thead .form-check-input[type="checkbox"]:focus-visible,
#manual-players-list .table thead .form-check-input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45) !important;
}

/* Row entry animation (staggered) */
#roster-members-list .table tbody tr,
#manual-players-list .table tbody tr {
    transition: background-color .2s ease, box-shadow .2s ease;
    animation: bwz-row-in .35s cubic-bezier(.2, .8, .2, 1) backwards;
}

@keyframes bwz-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#roster-members-list .table tbody tr:nth-child(1),
#manual-players-list .table tbody tr:nth-child(1) { animation-delay: .02s; }
#roster-members-list .table tbody tr:nth-child(2),
#manual-players-list .table tbody tr:nth-child(2) { animation-delay: .05s; }
#roster-members-list .table tbody tr:nth-child(3),
#manual-players-list .table tbody tr:nth-child(3) { animation-delay: .08s; }
#roster-members-list .table tbody tr:nth-child(4),
#manual-players-list .table tbody tr:nth-child(4) { animation-delay: .11s; }
#roster-members-list .table tbody tr:nth-child(5),
#manual-players-list .table tbody tr:nth-child(5) { animation-delay: .14s; }
#roster-members-list .table tbody tr:nth-child(n+6),
#manual-players-list .table tbody tr:nth-child(n+6) { animation-delay: .17s; }

/* Cells — generous padding, hairline divider between rows */
#roster-members-list .table tbody td,
#manual-players-list .table tbody td {
    padding: 15px 12px !important;
    font-size: .88rem !important;
    color: #1E293B;
    vertical-align: middle;
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

#roster-members-list .table tbody td:first-child,
#manual-players-list .table tbody td:first-child { padding-left: 18px !important; }
#roster-members-list .table tbody td:last-child,
#manual-players-list .table tbody td:last-child { padding-right: 18px !important; }

#roster-members-list .table tbody tr:last-child td,
#manual-players-list .table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* Smooth row hover with a left-to-right tint */
#roster-members-list .table tbody tr:hover,
#manual-players-list .table tbody tr:hover {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.05) 0%, rgba(0, 51, 102, 0.02) 50%, transparent 100%) !important;
}

/* Selected row — gradient tint + navy left accent bar */
#roster-members-list .table tbody tr.table-active,
#manual-players-list .table tbody tr.table-active {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.08) 0%, rgba(0, 51, 102, 0.02) 60%, transparent 100%) !important;
    box-shadow: inset 4px 0 0 0 var(--primary);
    position: relative;
}

#roster-members-list .table tbody tr.table-active:hover,
#manual-players-list .table tbody tr.table-active:hover {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.12) 0%, rgba(0, 51, 102, 0.04) 60%, transparent 100%) !important;
}

/* Row number — clean text in tabular numerics */
#roster-members-list .table tbody td:first-child,
#manual-players-list .table tbody td:first-child {
    color: #94A3B8 !important;
    font-size: .75rem !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    width: 44px;
}

/* Member name cell — strong typography */
#roster-members-list .table tbody td.fw-semibold,
#manual-players-list .table tbody td.fw-semibold {
    font-weight: 700 !important;
    color: var(--primary) !important;
    font-size: .92rem !important;
    letter-spacing: -0.005em;
}

/* Player # bubble — modern filled pill */
#roster-members-list .table tbody .badge.bg-primary.bg-opacity-10,
#manual-players-list .table tbody .badge.bg-primary.bg-opacity-10 {
    background: linear-gradient(135deg, var(--primary), #0056a3) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0, 51, 102, 0.30);
    padding: 5px 11px !important;
    font-size: .7rem !important;
    border-radius: 999px !important;
}

/* Skipped rows — strike + muted */
#roster-members-list .roster-row-skipped,
#manual-players-list .roster-row-skipped {
    opacity: 0.55;
}

#roster-members-list .roster-row-skipped .fw-semibold,
#manual-players-list .roster-row-skipped .fw-semibold {
    text-decoration: line-through;
    text-decoration-color: rgba(148, 163, 184, 0.7);
    text-decoration-thickness: 1.5px;
}

/* ---------- Roster Card View — modernized "Select All" toolbar + member cards ---------- */

/* Responsive card grid — 1 col mobile, 2 cols sm/md, 3 cols lg+ */
#roster-members-list .row > [class*="col-"],
#manual-players-list .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

@media (min-width: 576px) {
    #roster-members-list .row > [class*="col-"],
    #manual-players-list .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (min-width: 992px) {
    #roster-members-list .row > [class*="col-"],
    #manual-players-list .row > [class*="col-"] {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
}

/* Select-all toolbar (the d-flex.justify-content-end row above the cards) */
#roster-members-list > .d-flex.justify-content-end.gap-3,
#manual-players-list > .d-flex.justify-content-end.gap-3 {
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 32px !important;
    padding: 10px 14px;
    margin: 0 0 12px !important;
    background: #F8FAFC;
    border-radius: 12px;
    box-shadow: 0 0 0 1px #E5E7EB,
                inset 0 1px 2px rgba(15, 23, 42, 0.03);
    flex-wrap: wrap;
}

#roster-members-list > .d-flex.justify-content-end.gap-3 .form-check,
#manual-players-list > .d-flex.justify-content-end.gap-3 .form-check {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Drop Bootstrap's -1.5em input offset — it pulls the second toggle into the gap,
   leaving it as close to the first label as to its own */
#roster-members-list > .d-flex.justify-content-end.gap-3 .form-check-input,
#manual-players-list > .d-flex.justify-content-end.gap-3 .form-check-input {
    margin: 0 !important;
}

#roster-members-list > .d-flex.justify-content-end.gap-3 .form-check-label,
#manual-players-list > .d-flex.justify-content-end.gap-3 .form-check-label {
    font-size: .7rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    margin: 0 !important;
}

/* Member card — premium clean white panel */
#roster-members-list .roster-member-card,
#manual-players-list .roster-member-card {
    position: relative;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow:
        0 0 0 1px #E5E7EB,
        0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1),
                background-color .25s ease;
    animation: bwz-row-in .35s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* Cards in a grid row stretch to the tallest one — push everything under the head to
   the bottom so Finish / Style / toggles line up when a card has no Player # */
#roster-members-list .roster-member-card > .bwz-review-card-head,
#manual-players-list .roster-member-card > .bwz-review-card-head {
    margin-bottom: auto;
}

#roster-members-list .roster-member-card:hover,
#manual-players-list .roster-member-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px #CBD5E1,
        0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

/* Checked state — soft navy gradient with strong navy ring + left accent */
#roster-members-list .roster-member-card.checked,
#manual-players-list .roster-member-card.checked {
    background: linear-gradient(135deg, #F4F8FC 0%, #E8EFF8 100%) !important;
    box-shadow:
        0 0 0 1.5px var(--primary),
        0 10px 22px rgba(0, 51, 102, 0.12),
        inset 3px 0 0 0 var(--primary) !important;
}

#roster-members-list .roster-member-card.checked:hover,
#manual-players-list .roster-member-card.checked:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1.5px var(--primary),
        0 14px 28px rgba(0, 51, 102, 0.18),
        inset 3px 0 0 0 var(--primary) !important;
}

/* Skipped state — muted with strike on the name */
#roster-members-list .roster-member-card.skipped,
#manual-players-list .roster-member-card.skipped {
    background: #FAFBFD !important;
    opacity: 0.7;
    box-shadow: 0 0 0 1px #E5E7EB !important;
}

#roster-members-list .roster-member-card.skipped:hover,
#manual-players-list .roster-member-card.skipped:hover {
    opacity: 0.9;
}

#roster-members-list .roster-member-card.skipped .fw-semibold,
#manual-players-list .roster-member-card.skipped .fw-semibold {
    text-decoration: line-through;
    text-decoration-color: rgba(148, 163, 184, 0.6);
    text-decoration-thickness: 1.5px;
    color: #64748B !important;
}

/* Card content typography */
#roster-members-list .roster-member-card .fw-semibold,
#manual-players-list .roster-member-card .fw-semibold {
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    letter-spacing: -0.005em;
}

#roster-members-list .roster-member-card .text-muted,
#manual-players-list .roster-member-card .text-muted {
    font-size: .75rem !important;
    color: #64748B !important;
}

/* Manual-added badge inside cards */
#roster-members-list .roster-member-card .badge.bg-info,
#manual-players-list .roster-member-card .badge.bg-info {
    background: rgba(14, 165, 233, 0.14) !important;
    color: #0369A1 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Card-options row — refined divider + label sizing */
#roster-members-list .roster-member-card .roster-member-options,
#manual-players-list .roster-member-card .roster-member-options {
    border-top: 1px solid #F1F5F9 !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    gap: 14px !important;
}

#roster-members-list .roster-member-card .roster-member-options .form-check-label,
#manual-players-list .roster-member-card .roster-member-options .form-check-label {
    font-size: .72rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 6px;
}

#roster-members-list .roster-member-card.checked .roster-member-options .form-check-label,
#manual-players-list .roster-member-card.checked .roster-member-options .form-check-label {
    color: var(--primary) !important;
}

/* Pill-style role badges */
#roster-members-list .badge,
#manual-players-list .badge {
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: .64rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    line-height: 1 !important;
}

#roster-members-list .badge.bg-secondary,
#manual-players-list .badge.bg-secondary {
    background: rgba(0, 51, 102, 0.10) !important;
    color: var(--primary) !important;
}

#roster-members-list .badge.bg-warning,
#manual-players-list .badge.bg-warning {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #92400E !important;
}

#roster-members-list .badge.bg-primary,
#manual-players-list .badge.bg-primary {
    background: rgba(0, 51, 102, 0.10) !important;
    color: var(--primary) !important;
}

/* iOS-style toggle switches for checkboxes inside the roster table */
#roster-members-list .form-check-input[type="checkbox"],
#manual-players-list .form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: #CBD5E1;
    cursor: pointer;
    transition: background-color .25s ease, box-shadow .25s ease;
    flex-shrink: 0;
}

#roster-members-list .form-check-input[type="checkbox"]::before,
#manual-players-list .form-check-input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

#roster-members-list .form-check-input[type="checkbox"]:hover,
#manual-players-list .form-check-input[type="checkbox"]:hover {
    background: #94A3B8;
}

#roster-members-list .form-check-input[type="checkbox"]:checked,
#manual-players-list .form-check-input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--primary), #0056a3);
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.30);
}

#roster-members-list .form-check-input[type="checkbox"]:checked::before,
#manual-players-list .form-check-input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

#roster-members-list .form-check-input[type="checkbox"]:focus-visible,
#manual-players-list .form-check-input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.18);
    outline: none;
}

/* Radio buttons stay as filled-circle (modernized) */
#roster-members-list .form-check-input[type="radio"],
#manual-players-list .form-check-input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #CBD5E1;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#roster-members-list .form-check-input[type="radio"]:hover,
#manual-players-list .form-check-input[type="radio"]:hover {
    border-color: var(--primary);
}

#roster-members-list .form-check-input[type="radio"]:checked,
#manual-players-list .form-check-input[type="radio"]:checked {
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.22);
}

#roster-members-list .form-check-input[type="radio"]:checked::before,
#manual-players-list .form-check-input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #0056a3);
}

#roster-members-list .form-check-input:focus,
#manual-players-list .form-check-input:focus {
    outline: none;
}

#roster-members-list .form-check-label,
#manual-players-list .form-check-label {
    font-size: .62rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Edit/Delete icon buttons — soft pill chips with hover fill */
#roster-members-list .roster-edit-btn,
#roster-members-list .roster-delete-btn,
#manual-players-list .roster-edit-btn,
#manual-players-list .roster-delete-btn {
    width: 32px !important;
    height: 32px;
    margin: 0 2px !important;
    padding: 0 !important;
    border: 0;
    border-radius: 10px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}

#roster-members-list .roster-edit-btn,
#manual-players-list .roster-edit-btn {
    background: rgba(0, 51, 102, 0.06);
}

#roster-members-list .roster-edit-btn:hover,
#manual-players-list .roster-edit-btn:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 51, 102, 0.30);
}

#roster-members-list .roster-edit-btn i,
#manual-players-list .roster-edit-btn i {
    color: var(--primary) !important;
    font-size: 1rem;
    transition: color .2s ease;
}

#roster-members-list .roster-edit-btn:hover i,
#manual-players-list .roster-edit-btn:hover i {
    color: #ffffff !important;
}

#roster-members-list .roster-delete-btn,
#manual-players-list .roster-delete-btn {
    background: rgba(220, 38, 38, 0.06);
}

#roster-members-list .roster-delete-btn:hover,
#manual-players-list .roster-delete-btn:hover {
    background: #DC2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.32);
}

#roster-members-list .roster-delete-btn i,
#manual-players-list .roster-delete-btn i {
    color: #DC2626 !important;
    font-size: 1rem;
    transition: color .2s ease;
}

#roster-members-list .roster-delete-btn:hover i,
#manual-players-list .roster-delete-btn:hover i {
    color: #ffffff !important;
}

/* The "manually added" annotation icon next to a member name */
#roster-members-list .bi-person-plus,
#manual-players-list .bi-person-plus {
    color: #0EA5E9 !important;
    font-size: .9rem;
    vertical-align: -1px;
    margin-left: 4px;
}

/* List/Card view toggle — Linear-style segmented tabs */
.bwz-view-toggle {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.05);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bwz-view-btn {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .92rem;
    cursor: pointer;
    transition: color .25s ease, background-color .3s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.bwz-view-btn:hover { color: var(--primary); }

.bwz-view-btn.is-active,
.bwz-view-btn.active {
    background: linear-gradient(135deg, var(--primary), #0056a3);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 51, 102, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Add Member / Add Person — premium gradient button */
.bwz-add-btn {
    padding: 9px 18px !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--primary), #0056a3) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease !important;
}

.bwz-add-btn:hover {
    background: linear-gradient(135deg, #0056a3, var(--primary)) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 51, 102, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.bwz-add-btn i { font-size: .95rem; }

/* Actions bar — help text on the left, view toggle + Add button on the right */
.bwz-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.bwz-actions-bar-help {
    flex: 1 1 320px;
    min-width: 0;
}

.bwz-actions-bar .bwz-members-actions--solo {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Help note — inline tip with refined typography (no boxy background) */
.bwz-help-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #475569;
    font-size: .8rem;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.bwz-help-note span {
    flex: 1 1 auto;
    min-width: 0;
}

.bwz-help-note i {
    flex-shrink: 0;
    color: var(--primary);
    font-size: .95rem;
    margin-top: 1px;
}

.bwz-help-note strong {
    color: var(--primary);
    font-weight: 800;
    letter-spacing: 0.005em;
}

/* Tablet / small desktop — let the help wrap to its own row so right-side controls stay full-width */
@media (max-width: 991.98px) {
    .bwz-actions-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .bwz-actions-bar-help { flex: 1 1 100%; }

    .bwz-actions-bar .bwz-members-actions--solo {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    .bwz-actions-bar { gap: 10px; }
    .bwz-help-note { font-size: .78rem; line-height: 1.45; }

    /* Push the Add button to fill remaining space next to the view toggle */
    .bwz-actions-bar .bwz-members-actions--solo .bwz-add-btn { flex: 1 1 auto; }
}

@media (max-width: 479.98px) {
    .bwz-actions-bar .bwz-members-actions--solo {
        align-items: center;
        gap: 8px;
    }
    .bwz-help-note { font-size: .74rem; }
    .bwz-help-note i { font-size: .85rem; }
}

/* Validation popup — centered premium card with dimmed backdrop.
   Stays open until the user dismisses via close X / "Got it" button / backdrop. */
.bwz-warn-note {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1080;
    width: auto;
    min-width: 320px;
    max-width: min(440px, 92vw);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 32px 30px 24px;
    border-radius: 24px;
    background: #ffffff;
    border: 0;
    color: #0F172A;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 8px 24px rgba(15, 23, 42, 0.12),
        0 32px 80px rgba(15, 23, 42, 0.32);
    cursor: default;
    font-family: inherit;
    /* Smooth-scroll long messages on tiny viewports */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Large round warning badge at the top */
.bwz-warn-note::before {
    content: "\F33B"; /* bi-exclamation-triangle-fill */
    font-family: "bootstrap-icons";
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
    color: #ffffff;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 32px rgba(217, 119, 6, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.30);
    margin-bottom: 18px;
    animation: bwz-warn-pulse 2s ease-in-out infinite;
}

/* The injected message text */
.bwz-warn-msg {
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 500;
    color: #1E293B;
    letter-spacing: -0.005em;
    margin-bottom: 22px;
    padding: 0 4px;
}

/* "Got it" primary CTA */
.bwz-warn-cta {
    appearance: none;
    -webkit-appearance: none;
    align-self: stretch;
    border: 0;
    border-radius: 12px;
    padding: 12px 22px;
    background: linear-gradient(135deg, var(--primary) 0%, #002347 100%);
    color: #ffffff;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 51, 102, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease;
}

.bwz-warn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 51, 102, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.bwz-warn-cta:active {
    transform: translateY(0);
}

/* Inline close X in the top-right of the card */
.bwz-warn-note::after {
    content: "\F622"; /* bi-x */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.04);
    color: #64748B;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    cursor: pointer;
}

.bwz-warn-note:hover::after {
    background: #0F172A;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Bouncy scale entrance */
.bwz-warn-note:not(.d-none) {
    animation: bwz-toast-in .45s cubic-bezier(.2, 1.5, .35, 1);
}

@keyframes bwz-toast-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes bwz-warn-pulse {
    0%, 100% { box-shadow: 0 14px 32px rgba(217, 119, 6, 0.40),
                           inset 0 1px 0 rgba(255, 255, 255, 0.30),
                           0 0 0 0 rgba(245, 158, 11, 0.0); }
    50%      { box-shadow: 0 14px 32px rgba(217, 119, 6, 0.40),
                           inset 0 1px 0 rgba(255, 255, 255, 0.30),
                           0 0 0 14px rgba(245, 158, 11, 0.20); }
}

/* Backdrop scrim */
.bwz-warn-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.50);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1079;
    animation: bwz-warn-backdrop-in .3s ease forwards;
    cursor: pointer;
}

@keyframes bwz-warn-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Tablets — tighten spacing slightly */
@media (max-width: 767.98px) {
    .bwz-warn-note { padding: 28px 26px 22px; }
    .bwz-warn-note::before { width: 62px; height: 62px; font-size: 1.65rem; margin-bottom: 16px; }
    .bwz-warn-msg { font-size: .96rem; }
}

/* Small phones */
@media (max-width: 575.98px) {
    .bwz-warn-note {
        min-width: 0;
        max-width: calc(100vw - 24px);
        padding: 24px 20px 20px;
        border-radius: 20px;
    }
    .bwz-warn-note::before { width: 56px; height: 56px; font-size: 1.5rem; margin-bottom: 14px; }
    .bwz-warn-msg { font-size: .92rem; margin-bottom: 18px; padding: 0; }
    .bwz-warn-cta { font-size: .86rem; padding: 11px 16px; }
    .bwz-warn-note::after { top: 10px; right: 10px; width: 30px; height: 30px; font-size: 1rem; }
}

/* Ultra-small phones (320px / iPhone SE 1st gen) */
@media (max-width: 359.98px) {
    .bwz-warn-note { padding: 20px 16px 18px; border-radius: 18px; }
    .bwz-warn-note::before { width: 52px; height: 52px; font-size: 1.35rem; margin-bottom: 12px; }
    .bwz-warn-msg { font-size: .88rem; line-height: 1.45; margin-bottom: 14px; }
    .bwz-warn-cta { font-size: .82rem; padding: 10px 14px; }
}

/* Landscape phones (short viewports) — compact vertical rhythm so the
   popup never overflows the screen height */
@media (max-height: 500px) and (orientation: landscape) {
    .bwz-warn-note { padding: 18px 22px 16px; max-height: calc(100vh - 16px); }
    .bwz-warn-note::before { width: 44px; height: 44px; font-size: 1.15rem; margin-bottom: 10px; }
    .bwz-warn-msg { font-size: .88rem; margin-bottom: 12px; }
    .bwz-warn-cta { font-size: .82rem; padding: 9px 16px; }
    .bwz-warn-note::after { top: 8px; right: 8px; width: 28px; height: 28px; font-size: .92rem; }
    /* Disable the pulsing badge animation — saves vertical space + reduces motion in cramped layouts */
    .bwz-warn-note::before { animation: none; }
}

/* Honor user motion preferences across all breakpoints */
@media (prefers-reduced-motion: reduce) {
    .bwz-warn-note:not(.d-none),
    .bwz-warn-note::before,
    .bwz-warn-backdrop {
        animation: none !important;
    }
}

/* ============================================================
   Step 4 — Preview Your Engraving (premium tiles + review table)
   ============================================================ */

/* Preview tiles — same card pattern as Step 2 finish/style cards */
.bwz-preview-grid { margin-bottom: 14px; }

.bwz-preview-tile {
    cursor: pointer;
    position: relative;
    padding: 8px !important;
    background:
        linear-gradient(135deg, rgba(0, 51, 102, 0.16) 0%, rgba(0, 51, 102, 0.06) 100%),
        #ffffff !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
                0 8px 22px rgba(15, 23, 42, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    column-gap: 10px;
    row-gap: 0;
    align-items: center;
    height: 100%;
    text-align: left !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.bwz-preview-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.10),
                0 4px 10px rgba(16, 24, 40, 0.06) !important;
}

/* Image — solid white photo frame, edge-to-edge with a hairline bottom divider */
.bwz-preview-tile-img {
    grid-column: 1 / -1;
    grid-row: 1;
    display: block;
    width: calc(100% + 16px) !important;
    max-width: none !important;
    height: 140px !important;
    object-fit: contain !important;
    object-position: center;
    padding: 16px 20px !important;
    margin: -8px -8px 10px -8px !important;
    border: 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 16px 16px 0 0 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.02);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.12));
}

@media (min-width: 768px) {
    .bwz-preview-tile-img { height: 200px !important; padding: 20px 24px !important; }
}

@media (min-width: 1200px) {
    .bwz-preview-tile-img { height: 132px !important; padding: 22px 26px !important; }
}

.bwz-preview-tile:hover .bwz-preview-tile-img {
    transform: scale(1.03);
}

/* Index pill on the image (top-left) */
.bwz-preview-tile-index {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #ffffff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Zoom icon on the image (top-right) */
.bwz-preview-tile-zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.18);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.bwz-preview-tile:hover .bwz-preview-tile-zoom {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: scale(1.06);
}

.bwz-preview-tile .rv-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Name — left side of the footer row. No nowrap/ellipsis: the name must always be
   readable in full, so it wraps at spaces when the tile gets narrow. */
.bwz-preview-tile-name {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
    /* Last resort only — a single word wider than the tile. Normal wrapping still
       breaks at spaces first, so real names never split mid-word. */
    overflow-wrap: break-word;
}

@media (min-width: 576px) { .bwz-preview-tile-name { font-size: 1.15rem !important; } }
@media (min-width: 992px) { .bwz-preview-tile-name { font-size: 1.25rem !important; } }

/* "Bat N" tag on the right of the name row — same typography as the name, red color */
.bwz-preview-tile-tag {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    margin: 4px 6px 6px 0;
    padding: 0;
    background: transparent;
    color: var(--secondary);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
}

@media (min-width: 576px) { .bwz-preview-tile-tag { font-size: 1.2rem; } }
@media (min-width: 992px) { .bwz-preview-tile-tag { font-size: 1.3rem; } }
@media (min-width: 1200px) { .bwz-preview-tile-tag { font-size: 1.4rem; } }

/* Footer — one row beneath the image: player name on the left, this bat's Finish
   and Engraving Style on the right.

   Nothing here truncates. Every flex item keeps its automatic min-content floor
   (no min-width: 0), so when the tile is too narrow the row wraps — pills drop
   below the name, then onto separate lines from each other — instead of one side
   shrinking the other into an ellipsis. That makes the layout self-adjusting at
   every tile width, which matters because the tile is ~700px at 1-up phone/tablet
   widths but back down to ~350px once the grid goes 2-up at 768px. */
.bwz-preview-tile-footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin: 4px 6px 6px 6px;
}

.bwz-preview-tile-specs {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bwz-preview-tile-spec {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.bwz-preview-tile-spec-label {
    flex: 0 0 auto;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6B7280;
}

.bwz-preview-tile-spec-value {
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary);
    overflow-wrap: break-word;
}

/* Varied — the order mixes finishes and/or styles across bats, so accent the
   detail that actually differs from bat to bat. */
.bwz-preview-tile-spec.is-varied {
    border-color: rgba(var(--bs-secondary-rgb), 0.35);
    background: rgba(var(--bs-secondary-rgb), 0.06);
}

.bwz-preview-tile-spec.is-varied .bwz-preview-tile-spec-label,
.bwz-preview-tile-spec.is-varied .bwz-preview-tile-spec-value {
    color: var(--secondary);
}

@media (min-width: 992px) {
    .bwz-preview-tile-spec-label { font-size: .62rem; }
    .bwz-preview-tile-spec-value { font-size: .8rem; }
}

/* Review summary chips — stacked label+value cards above the preview tiles */
.bwz-review-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 14px;
    margin: 0 0 16px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F4F8FC 100%);
    border-radius: 14px;
    box-shadow: 0 0 0 1px #E5E7EB,
                0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Column counts assume 4–5 chips (Team, Tournament, Year, [Player #], Qty) — Finish
   and Style moved to the per-bat preview tile footers, so a fixed 6-column track
   would leave dead space on the right. */
@media (min-width: 576px) { .bwz-review-tags { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) {
    .bwz-review-tags {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 10px;
    }
}

.bwz-review-tags:empty { display: none; }

.bwz-review-tags .badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #E5E7EB !important;
    color: #0F172A !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    text-align: left !important;
    white-space: normal !important;
    min-width: 0;
}

.bwz-review-tags .badge:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-1px);
}

/* Label on top — small uppercase navy */
.bwz-review-tags .badge .text-muted {
    color: var(--primary) !important;
    font-size: .56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    margin: 0 !important;
    line-height: 1;
}

/* Value below — strong slate-900 */
.bwz-review-tags .badge .fw-semibold {
    color: #0F172A !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .bwz-review-tags { padding: 12px; gap: 6px; }
    .bwz-review-tags .badge { padding: 8px 10px !important; }
    .bwz-review-tags .badge .fw-semibold { font-size: .82rem !important; }
}

/* Member count chip inside the section title */
.bwz-review-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), #0056a3);
    color: #ffffff;
    font-size: .85rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.30);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

/* Review members — grid (card) view */
.bwz-review-grid-wrap { margin-top: 4px; }

.bwz-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 576px) { .bwz-review-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .bwz-review-grid { grid-template-columns: repeat(3, 1fr); } }

.bwz-review-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px;
    background:
        linear-gradient(135deg, rgba(0, 51, 102, 0.12) 0%, rgba(0, 51, 102, 0.04) 100%),
        #ffffff;
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(0, 51, 102, 0.10),
                0 6px 16px rgba(15, 23, 42, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform .2s ease, box-shadow .2s ease;
}

.bwz-review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(0, 51, 102, 0.18),
                0 12px 26px rgba(15, 23, 42, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bwz-review-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.bwz-review-card-name-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.bwz-review-card-head > .bwz-review-card-name {
    margin: 0 !important;
    min-width: 0;
}

.bwz-review-card-head > .bwz-review-card-idx {
    flex-shrink: 0;
}

.bwz-review-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #0056a3);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.28);
}

.bwz-review-card-avatar--coach {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.30);
}

.bwz-review-card-idx {
    font-size: 1rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.bwz-review-card-name {
    margin: 4px 0 2px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.015em;
    line-height: 1.2;
    word-break: break-word;
}

.bwz-review-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Unified Player / Coach badge — used across all roster & review locations.
   Shared pill geometry, font, and uppercase text — color variants applied below. */
.bwz-review-card-role,
#roster-members-list .badge.bg-secondary,
#roster-members-list .badge.bg-primary,
#roster-members-list .badge.bg-warning,
#manual-players-list .badge.bg-secondary,
#manual-players-list .badge.bg-primary,
#manual-players-list .badge.bg-warning,
.bwz-review-table-wrap .badge.bg-secondary,
.bwz-review-table-wrap .badge.bg-primary,
.bwz-review-table-wrap .badge.bg-light,
.bwz-review-table-wrap .badge.bg-warning,
.bwz-review-table-wrap .badge.bg-info {
    display: inline-flex !important;
    align-items: center;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: .64rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* Player — navy tint */
.bwz-review-card-role,
#roster-members-list .badge.bg-secondary,
#roster-members-list .badge.bg-primary,
#manual-players-list .badge.bg-secondary,
#manual-players-list .badge.bg-primary,
.bwz-review-table-wrap .badge.bg-secondary,
.bwz-review-table-wrap .badge.bg-primary,
.bwz-review-table-wrap .badge.bg-light,
.bwz-review-table-wrap .badge.bg-light.text-dark,
.bwz-review-table-wrap .badge.bg-light.border {
    background-color: rgba(0, 51, 102, 0.10) !important;
    background-image: none !important;
    color: var(--primary) !important;
    border-color: transparent !important;
}

/* Coach — amber tint */
.bwz-review-card-role.is-coach,
#roster-members-list .badge.bg-warning,
#roster-members-list .badge.bg-warning.text-dark,
#manual-players-list .badge.bg-warning,
#manual-players-list .badge.bg-warning.text-dark,
.bwz-review-table-wrap .badge.bg-warning,
.bwz-review-table-wrap .badge.bg-warning.text-dark,
.bwz-review-table-wrap .badge.bg-info,
.bwz-review-table-wrap .badge.bg-info.text-info,
.bwz-review-table-wrap .badge.bg-info.bg-opacity-10 {
    background-color: rgba(245, 158, 11, 0.16) !important;
    background-image: none !important;
    color: #92400E !important;
    border-color: transparent !important;
}

.bwz-review-card-num {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(153, 0, 51, 0.10);
    color: var(--secondary);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bwz-review-card-pair {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 51, 102, 0.08);
}

.bwz-review-card-pair-label {
    font-size: .58rem;
    font-weight: 800;
    color: #64748B;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bwz-review-card-pair-value {
    font-size: .78rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.005em;
    text-align: right;
    word-break: break-word;
}

/* Roster card options row (Include Name / Order Bat) — single horizontal line, left aligned */
.bwz-review-card .bwz-review-card-options,
#roster-members-list .bwz-review-card-options,
#manual-players-list .bwz-review-card-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding-top: 10px !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(0, 51, 102, 0.10) !important;
    min-width: 0;
    width: 100%;
}

.bwz-review-card .bwz-review-card-options .form-check,
#roster-members-list .bwz-review-card-options .form-check,
#manual-players-list .bwz-review-card-options .form-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding-left: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
    width: auto !important;
}

.bwz-review-card .bwz-review-card-options .form-check-input,
#roster-members-list .bwz-review-card-options .form-check-input,
#manual-players-list .bwz-review-card-options .form-check-input {
    flex-shrink: 0;
    float: none !important;
    margin: 0 !important;
    position: relative !important;
    left: 0 !important;
}

.bwz-review-card .bwz-review-card-options .form-check-label,
#roster-members-list .bwz-review-card-options .form-check-label,
#manual-players-list .bwz-review-card-options .form-check-label {
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    letter-spacing: 0.01em;
    margin: 0 !important;
    line-height: 1.1;
    text-transform: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.bwz-review-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* "Added" tag — sky-blue tinted pill */
.bwz-review-card-role--added {
    background: rgba(14, 165, 233, 0.14) !important;
    color: #0369A1 !important;
}

/* Review members table — mirrors the Step 3 roster table styling */
.bwz-review-table-wrap {
    margin-top: 8px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 0 0 1px #E5E7EB,
        0 1px 2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.bwz-review-table-wrap .table-responsive {
    border-radius: 14px;
    overflow-x: auto;
}

.bwz-review-table-wrap .table {
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    min-width: 580px;
}

.bwz-review-table-wrap .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--primary) !important;
    color: #ffffff !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 12px !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    white-space: nowrap;
    box-shadow: none !important;
    vertical-align: middle !important;
    line-height: 1.4;
}

.bwz-review-table-wrap .table thead th:first-child {
    padding-left: 18px !important;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.bwz-review-table-wrap .table thead th:last-child {
    padding-right: 18px !important;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Row entry animation (staggered) */
.bwz-review-table-wrap .table tbody tr {
    transition: background-color .2s ease, box-shadow .2s ease;
    animation: bwz-row-in .35s cubic-bezier(.2, .8, .2, 1) backwards;
}

.bwz-review-table-wrap .table tbody tr:nth-child(1) { animation-delay: .02s; }
.bwz-review-table-wrap .table tbody tr:nth-child(2) { animation-delay: .05s; }
.bwz-review-table-wrap .table tbody tr:nth-child(3) { animation-delay: .08s; }
.bwz-review-table-wrap .table tbody tr:nth-child(4) { animation-delay: .11s; }
.bwz-review-table-wrap .table tbody tr:nth-child(5) { animation-delay: .14s; }
.bwz-review-table-wrap .table tbody tr:nth-child(n+6) { animation-delay: .17s; }

.bwz-review-table-wrap .table tbody td {
    padding: 15px 12px !important;
    font-size: .88rem !important;
    color: #1E293B;
    vertical-align: middle;
    border-bottom: 1px solid #F1F5F9 !important;
    border-top: 0 !important;
    background: transparent;
}

.bwz-review-table-wrap .table tbody td:first-child { padding-left: 18px !important; }
.bwz-review-table-wrap .table tbody td:last-child  { padding-right: 18px !important; }

.bwz-review-table-wrap .table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.bwz-review-table-wrap .table tbody tr:hover {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.05) 0%, rgba(0, 51, 102, 0.02) 50%, transparent 100%) !important;
}

/* Row number — slate-400 tabular numerics, narrow */
.bwz-review-table-wrap .table tbody td:first-child {
    color: #94A3B8 !important;
    font-size: .75rem !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    width: 44px;
}

/* Member name — bold slate-900 */
.bwz-review-table-wrap .table tbody td.fw-semibold {
    font-weight: 700 !important;
    color: var(--primary) !important;
    font-size: .92rem !important;
    letter-spacing: -0.005em;
}

/* Role / Finish / Style pill badges */
.bwz-review-table-wrap .badge {
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: .64rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    line-height: 1 !important;
}

.bwz-review-table-wrap .badge.bg-secondary,
.bwz-review-table-wrap .badge.bg-primary,
.bwz-review-table-wrap .badge.bg-light {
    background: rgba(0, 51, 102, 0.10) !important;
    color: var(--primary) !important;
}

.bwz-review-table-wrap .badge.bg-warning,
.bwz-review-table-wrap .badge.bg-info {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #92400E !important;
}

/* Notes (info + warning) — also reused inside the Step 4 notice popup */
.bwz-review-notes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: -2px 0 16px;
    text-align: left;
}

@media (min-width: 768px) {
    .bwz-review-notes { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ---------- Step 4 Notice Popup — premium centered modal ---------- */
.bwz-notice-popup {
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.bwz-notice-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    animation: bwz-notice-backdrop-in .25s ease forwards;
}

@keyframes bwz-notice-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.bwz-notice-popup-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 22px;
    padding: 30px 28px 24px;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 18px 40px rgba(15, 23, 42, 0.18),
        0 36px 80px rgba(15, 23, 42, 0.32);
    text-align: center;
    animation: bwz-notice-pop-in .45s cubic-bezier(.2, 1.5, .35, 1);
}

@keyframes bwz-notice-pop-in {
    0%   { opacity: 0; transform: scale(0.88) translateY(8px); }
    60%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.bwz-notice-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.05);
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.bwz-notice-popup-close:hover {
    background: #0F172A;
    color: #ffffff;
    transform: rotate(90deg);
}

.bwz-notice-popup-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #0056a3);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 14px 28px rgba(0, 51, 102, 0.30);
}

.bwz-notice-popup-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

@media (min-width: 768px) { .bwz-notice-popup-title { font-size: 1.5rem; } }

.bwz-notice-popup-sub {
    margin: 6px 0 18px;
    font-size: .88rem;
    color: #64748B;
    line-height: 1.5;
}

.bwz-notice-popup-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
    margin-bottom: 20px;
}

.bwz-notice-popup-cta {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 12px 22px;
    background: linear-gradient(135deg, var(--primary), #002347);
    color: #ffffff;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 51, 102, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease;
}

.bwz-notice-popup-cta:hover {
    background: linear-gradient(135deg, var(--secondary), #7a0028);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(153, 0, 51, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@media (max-width: 575.98px) {
    .bwz-notice-popup-card { padding: 26px 20px 20px; border-radius: 18px; }
    .bwz-notice-popup-icon { width: 56px; height: 56px; font-size: 1.4rem; }
    .bwz-notice-popup-title { font-size: 1.15rem; }
    .bwz-notice-popup-sub { font-size: .82rem; }
    .bwz-notice-popup-cta { padding: 11px 18px; font-size: .9rem; }
}

.bwz-review-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .82rem;
    line-height: 1.45;
    font-weight: 500;
    text-align: left;
}

.bwz-review-note i {
    flex-shrink: 0;
    font-size: 1.05rem;
    margin-top: 1px;
}

.bwz-review-note strong { font-weight: 800; }

.bwz-review-note--info {
    background: rgba(0, 51, 102, 0.05);
    color: #1E293B;
    box-shadow: inset 3px 0 0 0 var(--primary);
}

.bwz-review-note--info i { color: var(--primary); }
.bwz-review-note--info strong { color: var(--primary); }

.bwz-review-note--warn {
    background: rgba(245, 158, 11, 0.10);
    color: #78350F;
    box-shadow: inset 3px 0 0 0 #D97706;
}

.bwz-review-note--warn i { color: #D97706; }
.bwz-review-note--warn strong { color: #92400E; }

@media (max-width: 575.98px) {
    .bwz-preview-tile-name { font-size: .9rem; }
    .bwz-preview-tile-media { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Wishlist Confirmation Modal — premium centered card
   ============================================================ */
.bwz-wishlist-modal .modal-dialog {
    max-width: 460px;
}

.bwz-wishlist-modal .modal-content.bwz-wishlist-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 32px 28px 24px;
    overflow: visible;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 18px 40px rgba(15, 23, 42, 0.18),
        0 36px 80px rgba(15, 23, 42, 0.32) !important;
    text-align: center;
}

.bwz-wishlist-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.05);
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.bwz-wishlist-close:hover {
    background: #0F172A;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Hero heart icon — red gradient with pulse halo */
.bwz-wishlist-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary) 0%, #7a0028 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 14px 32px rgba(153, 0, 51, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.30);
    animation: bwz-wishlist-pulse 2.4s ease-in-out infinite;
}

@keyframes bwz-wishlist-pulse {
    0%, 100% { box-shadow: 0 14px 32px rgba(153, 0, 51, 0.40),
                           inset 0 1px 0 rgba(255, 255, 255, 0.30),
                           0 0 0 0 rgba(153, 0, 51, 0.0); }
    50%      { box-shadow: 0 14px 32px rgba(153, 0, 51, 0.40),
                           inset 0 1px 0 rgba(255, 255, 255, 0.30),
                           0 0 0 14px rgba(153, 0, 51, 0.18); }
}

.bwz-wishlist-title {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

@media (min-width: 768px) { .bwz-wishlist-title { font-size: 1.5rem; } }

.bwz-wishlist-sub {
    margin: 0 0 18px;
    font-size: .9rem;
    color: #64748B;
    line-height: 1.5;
}

.bwz-wishlist-price {
    display: block;
    margin-top: 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}

.bwz-wishlist-price:empty { display: none; }

/* Info list */
.bwz-wishlist-info {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.bwz-wishlist-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 51, 102, 0.05);
    color: #1E293B;
    font-size: .82rem;
    line-height: 1.5;
    font-weight: 500;
    box-shadow: inset 3px 0 0 0 var(--primary);
}

.bwz-wishlist-info-item--warn {
    background: rgba(245, 158, 11, 0.10);
    color: #78350F;
    box-shadow: inset 3px 0 0 0 #D97706;
}

.bwz-wishlist-info-item strong {
    font-weight: 800;
    color: #92400E;
}

.bwz-wishlist-info-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 51, 102, 0.12);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    margin-top: -1px;
}

.bwz-wishlist-info-item--warn .bwz-wishlist-info-icon {
    background: rgba(245, 158, 11, 0.20);
    color: #D97706;
}

/* Action buttons — scoped to the wishlist modal to avoid collision with the
   .bwz-wishlist-btn class on the Step 4 trigger button */
.bwz-wishlist-actions {
    display: flex;
    gap: 10px;
}

.bwz-wishlist-modal .bwz-wishlist-btn {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.bwz-wishlist-modal .bwz-wishlist-btn--cancel {
    background: #ffffff !important;
    color: var(--primary) !important;
    border: 1.5px solid #E2E8F0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.bwz-wishlist-modal .bwz-wishlist-btn--cancel:hover {
    border-color: var(--primary) !important;
    background: #ffffff !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 51, 102, 0.12) !important;
}

.bwz-wishlist-modal .bwz-wishlist-btn--confirm {
    background: linear-gradient(135deg, var(--secondary), #7a0028) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(153, 0, 51, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.bwz-wishlist-modal .bwz-wishlist-btn--confirm:hover {
    background: linear-gradient(135deg, #b30040, var(--secondary)) !important;
    color: #ffffff !important;
    border: 0 !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(153, 0, 51, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.bwz-wishlist-modal .bwz-wishlist-btn i { font-size: 1rem; }

@media (max-width: 575.98px) {
    .bwz-wishlist-modal .modal-content.bwz-wishlist-card { padding: 26px 20px 20px; border-radius: 18px; }
    .bwz-wishlist-icon { width: 60px; height: 60px; font-size: 1.5rem; margin-bottom: 12px; }
    .bwz-wishlist-title { font-size: 1.2rem; }
    .bwz-wishlist-sub { font-size: .85rem; }
    .bwz-wishlist-info-item { padding: 10px 12px; font-size: .78rem; }
    .bwz-wishlist-btn { padding: 11px 14px; font-size: .85rem; }
}

/* ============================================================
   Roster / Manual Member Modal — premium modal-content
   ============================================================ */

.eng-modal .modal-dialog {
    max-width: 460px;
}

@media (min-width: 768px) {
    .eng-modal .modal-dialog { max-width: 500px; }
}

.eng-modal .modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 12px 30px rgba(15, 23, 42, 0.16),
        0 32px 80px rgba(15, 23, 42, 0.30) !important;
}

/* Gradient header — cleaner brand gradient with subtle pattern */
.eng-modal .modal-header-gradient {
    position: relative;
    background: linear-gradient(135deg, #001a33 0%, var(--primary) 50%, #0056a3 100%) !important;
    padding: 12px 16px !important;
    overflow: hidden;
}

.eng-modal .modal-header-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(153, 0, 51, 0.30), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.10), transparent 60%);
    pointer-events: none;
}

.eng-modal .modal-header-gradient > * {
    position: relative;
    z-index: 1;
}

.eng-modal .modal-header-gradient .modal-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: .98rem !important;
    letter-spacing: -0.015em;
}

.eng-modal .modal-header-gradient .icon-box-36 {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.eng-modal .modal-header-gradient .icon-box-36 i {
    font-size: 1rem !important;
}

.eng-modal .modal-header-gradient .btn-close {
    border: 0 !important;
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0.85 !important;
    width: 28px;
    height: 28px;
    padding: 0;
    box-shadow: none !important;
    transition: opacity .2s ease, transform .2s ease;
}

.eng-modal .modal-header-gradient .btn-close:hover {
    opacity: 1 !important;
    transform: rotate(90deg);
}

/* Body — compact and refined */
.eng-modal .modal-body {
    padding: 14px 16px !important;
    background: #ffffff;
}

@media (min-width: 576px) {
    .eng-modal .modal-body { padding: 16px 20px !important; }
}

/* Modern form labels inside the modal */
.eng-modal .modal-body .form-label {
    font-size: .68rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px !important;
}

.eng-modal .modal-body .form-label .text-danger {
    color: var(--secondary) !important;
}

/* Input groups — flat, clean, focus halo */
.eng-modal .modal-body .input-group {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1.5px #E2E8F0;
    background: #ffffff;
    transition: box-shadow .2s ease;
}

.eng-modal .modal-body .input-group:focus-within {
    box-shadow: 0 0 0 1.5px var(--primary),
                0 0 0 5px rgba(0, 51, 102, 0.12);
}

.eng-modal .modal-body .input-group-text {
    background: #ffffff !important;
    border: 0 !important;
    color: #94A3B8 !important;
    padding: 0 12px !important;
    font-size: .95rem;
}

.eng-modal .modal-body .input-group:focus-within .input-group-text {
    color: var(--primary) !important;
}

.eng-modal .modal-body .form-control,
.eng-modal .modal-body .form-select {
    border: 0 !important;
    background: #ffffff !important;
    padding: 8px 12px 8px 4px !important;
    font-size: .88rem !important;
    font-weight: 600;
    color: #0F172A !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.eng-modal .modal-body .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003366'%3E%3Cpath d='M8 11.5L2 5.5l1.4-1.4L8 8.7l4.6-4.6L14 5.5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}

.eng-modal .modal-body .form-control::placeholder {
    color: #CBD5E1;
    font-weight: 500;
}

/* Form help / char count / hint */
.eng-modal .modal-body .form-text,
.eng-modal .modal-body .eng-char-count {
    font-size: .7rem !important;
    color: #94A3B8 !important;
    font-variant-numeric: tabular-nums;
}

.eng-modal .modal-body .fs-hint {
    font-size: .72rem !important;
    color: #475569 !important;
    margin-top: 8px !important;
}

.eng-modal .modal-body .fs-hint i { color: var(--primary); }

/* Sub-section dividers (Bat Finish / Engraving Style) */
.eng-modal .modal-body hr {
    margin: 12px 0 !important;
    border: 0;
    border-top: 1px solid #F1F5F9;
    opacity: 1;
}

.eng-modal .modal-body h6 {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: .65rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 8px !important;
}

.eng-modal .modal-body h6 i {
    color: var(--secondary) !important;
    font-size: .88rem !important;
}

.eng-modal .modal-body .small.text-muted {
    font-size: .58rem !important;
    color: #94A3B8 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 4px !important;
}

/* Preview box — clean light backdrop with the bat image clearly visible */
.eng-modal .modal-body .eng-preview-box {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    margin-bottom: 10px !important;
}

.eng-modal .modal-body .eng-preview-box img {
    display: block;
    max-width: 100%;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.15));
}

/* Compact radio options for finish & style */
.eng-modal .modal-body #roster-edit-finish-options,
.eng-modal .modal-body #roster-edit-style-options,
.eng-modal .modal-body #manual-edit-finish-options,
.eng-modal .modal-body #manual-edit-style-options {
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.eng-modal .modal-body .form-check {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.eng-modal .modal-body .form-check-input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 1.5px solid #CBD5E1;
    cursor: pointer;
}

.eng-modal .modal-body .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.eng-modal .modal-body .form-check-label {
    font-size: .78rem !important;
    color: #475569 !important;
    cursor: pointer;
}

.eng-modal .modal-body .fs-hint { margin-top: 4px !important; }

/* Footer — compact and refined */
.eng-modal .modal-footer {
    padding: 10px 16px !important;
    background: #F8FAFC !important;
    border-top: 1px solid #F1F5F9 !important;
    gap: 8px;
}

@media (min-width: 576px) {
    .eng-modal .modal-footer { padding: 12px 20px !important; }
}

.eng-modal .modal-footer .btn-outline-secondary {
    background: #ffffff !important;
    color: var(--primary) !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 999px !important;
    padding: 7px 18px !important;
    font-weight: 700;
    font-size: .82rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.eng-modal .modal-footer .btn-outline-secondary:hover {
    border-color: var(--primary) !important;
    background: #ffffff !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 51, 102, 0.12);
}

.eng-modal .modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--primary), #0056a3) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 20px !important;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease;
}

.eng-modal .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary), #7a0028) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(153, 0, 51, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.eng-modal .modal-footer .btn-primary:disabled {
    background: #94A3B8 !important;
    box-shadow: none !important;
    opacity: 0.6;
}

.eng-modal .modal-footer .btn i { margin-right: 4px; }

/* Order Summary — receipt-style card with stacked rows + prominent total */
.bwz-order-summary {
    margin-top: 16px;
    padding: 0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 0 0 1px #E5E7EB,
        0 4px 14px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

/* Header — prominent red title */
.bwz-order-summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 14px;
    border-bottom: 1px dashed #E2E8F0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--secondary);
    letter-spacing: -0.015em;
    text-transform: none;
}

@media (min-width: 768px) { .bwz-order-summary-head { font-size: 1.3rem; } }

.bwz-order-summary-head i {
    color: var(--secondary);
    font-size: 1.3rem;
}

/* List of stat rows (Bats, Per bat) */
.bwz-order-summary-list {
    list-style: none;
    margin: 0;
    padding: 6px 18px 10px;
}

.bwz-order-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
}

.bwz-order-summary-row:last-child {
    border-bottom: 0;
}

.bwz-order-summary-key {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: -0.005em;
}

.bwz-order-summary-key i {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 51, 102, 0.08);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
}

.bwz-order-summary-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.bwz-order-summary-val--muted { color: #475569; }

/* Total bar — full-width red gradient with prominent value */
.bwz-order-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--secondary) 0%, #7a0028 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.bwz-order-summary-total-key {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.bwz-order-summary-total-key i {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    letter-spacing: 0;
}

.bwz-order-summary-total-val {
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

@media (max-width: 575.98px) {
    .bwz-order-summary-head { padding: 12px 14px 10px; }
    .bwz-order-summary-list { padding: 4px 14px 8px; }
    .bwz-order-summary-total { padding: 14px; }
    .bwz-order-summary-val { font-size: .95rem; }
    .bwz-order-summary-total-val { font-size: 1.3rem; }
}

@media (min-width: 768px) {
    .bwz-order-summary-val { font-size: 1.15rem; }
    .bwz-order-summary-total-val { font-size: 1.7rem; }
}

/* Info note (replaces Bootstrap alert-info) */
.bwz-info-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 8px;
    background: rgba(0, 51, 102, 0.06);
    border: 1px solid rgba(0, 51, 102, 0.14);
    color: var(--primary);
    font-size: .76rem;
    line-height: 1.45;
    margin-bottom: 10px;
}

.bwz-info-note i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--primary);
    font-size: .85rem;
}

/* ---------- Style Guide card (sits above the Engraving Style grid) ---------- */
.bwz-style-guide {
    position: relative;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.12);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.bwz-style-guide-head {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    line-height: 1;
}

.bwz-style-guide-head i {
    font-size: .95rem;
    color: var(--secondary);
}

.bwz-style-guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 768px) {
    .bwz-style-guide-list { grid-template-columns: 1fr 1fr; }
    .bwz-style-guide-item--note { grid-column: 1 / -1; }
}

.bwz-style-guide-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.10);
    border-radius: 10px;
    line-height: 1.35;
}

.bwz-style-guide-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), #002347);
    color: #ffffff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.22);
}

.bwz-style-guide-badge--alt {
    background: linear-gradient(135deg, var(--secondary), #7a0028);
    box-shadow: 0 4px 10px rgba(153, 0, 51, 0.22);
}

.bwz-style-guide-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bwz-style-guide-text strong {
    font-size: .85rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
}

.bwz-style-guide-text span {
    font-size: .76rem;
    color: #64748B;
}

/* Warning row — white card with amber accent on border + icon */
.bwz-style-guide-item--note {
    background: #ffffff;
    border-color: rgba(245, 158, 11, 0.30);
    color: #92400E;
    font-size: .82rem;
}

.bwz-style-guide-item--note i {
    flex-shrink: 0;
    font-size: 1.05rem;
    color: #D97706;
}

.bwz-style-guide-item--note strong {
    font-weight: 800;
    color: #92400E;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bwz-option,
    .bwz-option:hover,
    .bwz-option-check,
    .bwz-step-dot {
        transition: none;
        transform: none;
    }
}

/* ---------- Step 2: Finish & Style cards (full-width banner rows) ---------- */

/* ============================================================
   Step 3 — Engraving Style tabs (Roster vs Individual)
   ============================================================ */

/* The groups are mutually exclusive and the choice drives Step 4 (a Roster style
   requires 10+ players and 1+ coach; an Individual style drops the roster), so the
   tabs read as a real either/or rather than a filter. */
.bwz-style-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
}

/* Inactive reads as an outlined, clearly clickable option; active is a solid navy
   fill. A white-on-grey pill was too close to its neighbour to tell apart at a
   glance, so the two states differ on fill, text colour, border and elevation at
   once rather than on background alone. */
.bwz-style-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid #D8DEE7;
    border-radius: 12px;
    background: #ffffff;
    color: #64748B;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease,
                border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bwz-style-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.bwz-style-tab.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.28);
}

/* Pointer down into the open panel, so the tab visibly owns the content below it. */
.bwz-style-tab.is-active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--primary);
    border-radius: 2px;
}

.bwz-style-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.bwz-style-tab i { flex: 0 0 auto; font-size: .95rem; }

.bwz-style-tab-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bwz-style-tab-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #EEF2F7;
    color: #475569;
    font-size: .7rem;
    font-weight: 800;
}

.bwz-style-tab.is-active .bwz-style-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* Rule for the open group — repeated per panel so the consequence of the choice is
   visible whichever tab is showing. */
.bwz-style-panel-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 13px;
    border-radius: 10px;
    background: rgba(var(--bs-primary-rgb), 0.05);
    box-shadow: inset 3px 0 0 0 var(--primary);
    font-size: .82rem;
    line-height: 1.45;
    color: #475569;
}

.bwz-style-panel-note i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--primary);
    font-size: .9rem;
}

@media (min-width: 768px) {
    .bwz-style-tab { font-size: .9rem; padding: 11px 14px; }
    .bwz-style-panel-note { font-size: .86rem; }
}

/* Phones: the two labels will not sit side by side legibly, so drop to the short
   form and let the icon plus count carry the rest. */
@media (max-width: 575.98px) {
    .bwz-style-tab { gap: 6px; padding: 9px 8px; font-size: .78rem; }
    .bwz-style-tab-text { display: none; }
    /* Flex order keeps the short label ahead of its count, matching the wide layout. */
    .bwz-style-tab i { order: 1; }
    .bwz-style-tab::after {
        order: 2;
        content: "Roster";
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bwz-style-tab[data-style-tab="individual"]::after { content: "Individual"; }
    .bwz-style-tab-count { order: 3; }
}

/* Card grid — 1-up on phones, 2-up on tablet/desktop */
#bat-products-grid > [class*="col-"],
.bat-styles-grid > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

@media (min-width: 576px) {
    #bat-products-grid > [class*="col-"],
    .bat-styles-grid > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Card — soft primary-navy gradient backdrop over white */
#bat-products-grid .eng-product-card,
.bat-styles-grid .eng-style-card {
    cursor: pointer;
    position: relative;
    padding: 8px !important;
    background:
        linear-gradient(135deg, rgba(0, 51, 102, 0.16) 0%, rgba(0, 51, 102, 0.06) 100%),
        #ffffff !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
                0 8px 22px rgba(15, 23, 42, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    column-gap: 10px;
    row-gap: 0;
    align-items: center;
    height: 100%;
    text-align: left !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Image spans the full row */
#bat-products-grid .eng-product-card > img,
.bat-styles-grid .eng-style-card > img {
    grid-column: 1 / -1;
}

/* Title goes left, price goes right (same row) — matches Step 4 preview tile */
#bat-products-grid .eng-product-card > .fw-semibold,
.bat-styles-grid .eng-style-card > .fw-semibold {
    grid-column: 1;
}

#bat-products-grid .eng-product-card > .text-primary {
    grid-column: 2;
    justify-self: end;
}

/* Out-of-stock finish — greyed out and not selectable (engraving-bat.js) */
#bat-products-grid .eng-product-card.is-out-of-stock {
    cursor: not-allowed;
}

#bat-products-grid .eng-product-card.is-out-of-stock > img {
    filter: grayscale(1);
    opacity: .55;
}

#bat-products-grid .eng-product-card.is-out-of-stock:hover {
    transform: none;
}

#bat-products-grid .eng-product-card > .eng-stock-badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(153, 0, 51, 0.10);
    color: var(--secondary);
    font-weight: 600;
}

/* Style cards keep their original layout (title left, price below — chips column 2) */
.bat-styles-grid .eng-style-card > .text-primary {
    grid-column: 1;
    justify-self: start;
}

#bat-products-grid .eng-product-card:hover,
.bat-styles-grid .eng-style-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.10),
                0 4px 10px rgba(16, 24, 40, 0.06) !important;
}

#bat-products-grid .eng-product-card.selected,
.bat-styles-grid .eng-style-card.selected {
    background:
        linear-gradient(135deg, rgba(153, 0, 51, 0.16) 0%, rgba(153, 0, 51, 0.06) 100%),
        #ffffff !important;
    box-shadow: 0 0 0 2px var(--secondary),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Check badge — secondary red filled circle in the top-left */
#bat-products-grid .eng-product-card.selected::after,
.bat-styles-grid .eng-style-card.selected::after {
    content: "\F26B"; /* bi-check2 */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--secondary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: none;
    animation: bwz-check-pop .35s cubic-bezier(.2, 1.5, .35, 1);
}

@keyframes bwz-check-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---------- Zoom button (overlay on Step 2 finish/style image) ---------- */
.bwz-zoom-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.18);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

#bat-products-grid .eng-product-card:hover .bwz-zoom-btn,
.bat-styles-grid .eng-style-card:hover .bwz-zoom-btn,
.bwz-zoom-btn:focus-visible {
    opacity: 1;
}

.bwz-zoom-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: scale(1.06);
}

/* Zoom button stays visible on selected cards (it's in the opposite corner from the check) */
#bat-products-grid .eng-product-card.selected .bwz-zoom-btn,
.bat-styles-grid .eng-style-card.selected .bwz-zoom-btn {
    opacity: 1;
}

@media (max-width: 575.98px) {
    .bwz-zoom-btn { opacity: 1; }
}

/* ---------- Zoom lightbox modal — full viewport gallery ---------- */
.bwz-zoom-modal { padding: 0 !important; }

.bwz-zoom-modal .modal-dialog {
    max-width: none !important;
    width: 100vw !important;
    margin: 0 !important;
    height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* Frosted dark backdrop (overrides Bootstrap's default) */
body.modal-open .modal-backdrop.show {
    background-color: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Panel — fills the full viewport with a lighter translucent dark backdrop */
.bwz-zoom-modal .modal-content.bwz-zoom-card {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(51, 65, 85, 0.55);
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    transform: scale(0.98);
    opacity: 0;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bwz-zoom-modal.show .modal-content.bwz-zoom-card {
    transform: scale(1);
    opacity: 1;
}

/* Top header — section label + product/style name centered at the top of the screen */
.bwz-zoom-topbar {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    max-width: calc(100vw - 160px);
    text-align: center;
}

.bwz-zoom-topbar-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
}

.bwz-zoom-topbar-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    word-break: break-word;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) { .bwz-zoom-topbar-title { font-size: 1.3rem; } }
@media (min-width: 1200px) { .bwz-zoom-topbar-title { font-size: 1.5rem; } }

@media (max-width: 575.98px) {
    .bwz-zoom-topbar { top: 10px; padding: 7px 14px; max-width: calc(100vw - 110px); }
    .bwz-zoom-topbar-title { font-size: .95rem; }
}

/* Close — glass circle in the top-right of the viewport */
.bwz-zoom-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.bwz-zoom-close:hover {
    background: #ffffff;
    color: var(--primary);
    transform: scale(1.06) rotate(90deg);
}

@media (max-width: 575.98px) {
    .bwz-zoom-close { width: 38px; height: 38px; top: 10px; right: 10px; font-size: .9rem; }
}

/* Prev / Next navigation — glass circles on the sides of the viewport */
.bwz-zoom-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.bwz-zoom-nav--prev { left: 18px; }
.bwz-zoom-nav--next { right: 18px; }

.bwz-zoom-nav:hover:not(:disabled) {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
}

.bwz-zoom-nav--prev:hover:not(:disabled) { transform: translateY(-50%) translateX(-3px) scale(1.06); }
.bwz-zoom-nav--next:hover:not(:disabled) { transform: translateY(-50%) translateX(3px) scale(1.06); }

.bwz-zoom-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .bwz-zoom-nav { width: 40px; height: 40px; font-size: 1rem; }
    .bwz-zoom-nav--prev { left: 10px; }
    .bwz-zoom-nav--next { right: 10px; }
}

/* Image wrap — fills the viewport; scrolls internally when zoomed, scrollbars hidden.
   `safe center` keeps the image centered when it fits and aligns it to the start when it overflows,
   so panning still reaches the edges. */
.bwz-zoom-img-wrap {
    position: absolute;
    top: 100px;
    bottom: 96px;
    left: 90px;
    right: 90px;
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    overflow: auto;
    overscroll-behavior: contain;
    isolation: isolate;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE 10+ */
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-x pan-y;
}

.bwz-zoom-img-wrap::-webkit-scrollbar { display: none; }

.bwz-zoom-img-wrap.is-pannable { cursor: grab; }
.bwz-zoom-img-wrap.is-panning { cursor: grabbing; }

@media (max-width: 575.98px) {
    .bwz-zoom-img-wrap { top: 80px; bottom: 70px; left: 56px; right: 56px; }
}

/* Decorative orbs hidden in the minimal layout */
.bwz-zoom-bg-orb { display: none; }

.bwz-zoom-img-wrap img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
    animation: bwz-zoom-img-in .4s cubic-bezier(.2, .8, .2, 1);
    transition: width .25s cubic-bezier(.2, .8, .2, 1), height .25s cubic-bezier(.2, .8, .2, 1);
    transform: none !important;
}

/* Zoom toolbar — glass pill at the bottom-center of the viewport */
.bwz-zoom-toolbar {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

.bwz-zoom-tool-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.bwz-zoom-tool-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.20);
    transform: scale(1.08);
}

.bwz-zoom-tool-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bwz-zoom-tool-btn--level {
    width: auto;
    min-width: 68px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.bwz-zoom-tool-btn--level:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.20);
    transform: none;
}

@media (max-width: 575.98px) {
    .bwz-zoom-toolbar { bottom: 16px; padding: 4px 6px; }
    .bwz-zoom-tool-btn { width: 32px; height: 32px; font-size: .9rem; }
    .bwz-zoom-tool-btn--level { min-width: 56px; padding: 0 12px; font-size: .78rem; }
}

@keyframes bwz-zoom-img-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Caption strip below the image — white text on dark backdrop */
.bwz-zoom-caption {
    padding: 18px 60px 8px;
    text-align: center;
    background: transparent;
    border-top: 0;
}

.bwz-zoom-caption-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

.bwz-zoom-caption-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 3px rgba(153, 0, 51, 0.30);
    flex-shrink: 0;
}

.bwz-zoom-caption-divider {
    opacity: 0.45;
}

.bwz-zoom-caption-title {
    margin: 12px 0 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) { .bwz-zoom-caption-title { font-size: 1.7rem; } }
@media (min-width: 1200px) { .bwz-zoom-caption-title { font-size: 1.95rem; } }

@media (prefers-reduced-motion: reduce) {
    .bwz-zoom-modal .modal-content.bwz-zoom-card,
    .bwz-zoom-img-wrap img,
    .bwz-zoom-close {
        transition: none;
        animation: none;
        transform: none;
    }
}

/* Inner image — edge-to-edge white surface with a hairline divider at the bottom */
/* Image — matches the Step 4 preview tile image (edge-to-edge white photo frame) */
#bat-products-grid .eng-product-card > img,
.bat-styles-grid .eng-style-card > img {
    display: block;
    width: calc(100% + 16px) !important;
    max-width: none !important;
    height: 140px !important;
    object-fit: contain !important;
    object-position: center;
    padding: 16px 20px !important;
    margin: -8px -8px 10px -8px !important;
    border: 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    border-radius: 16px 16px 0 0 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.02) !important;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.12));
}

@media (min-width: 768px) {
    #bat-products-grid .eng-product-card > img,
    .bat-styles-grid .eng-style-card > img {
        height: 200px !important;
        padding: 20px 24px !important;
    }
}

@media (min-width: 1200px) {
    #bat-products-grid .eng-product-card > img,
    .bat-styles-grid .eng-style-card > img {
        height: 132px !important;
        padding: 22px 26px !important;
    }
}

#bat-products-grid .eng-product-card:hover > img,
.bat-styles-grid .eng-style-card:hover > img {
    transform: scale(1.06);
}

/* Title — large navy headline (sits left in title/price row, on the soft gradient) */
#bat-products-grid .eng-product-card > .fw-semibold,
.bat-styles-grid .eng-style-card > .fw-semibold {
    margin: 8px 6px 8px 10px !important;
    padding: 0;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
    word-break: break-word;
    align-self: center;
}

@media (min-width: 576px) {
    #bat-products-grid .eng-product-card > .fw-semibold,
    .bat-styles-grid .eng-style-card > .fw-semibold { font-size: 1.2rem !important; }
}

@media (min-width: 992px) {
    #bat-products-grid .eng-product-card > .fw-semibold,
    .bat-styles-grid .eng-style-card > .fw-semibold { font-size: 1.3rem !important; }
}

@media (min-width: 1200px) {
    #bat-products-grid .eng-product-card > .fw-semibold,
    .bat-styles-grid .eng-style-card > .fw-semibold { font-size: 1.4rem !important; }
}

/* Description hidden — title + price chip only */
#bat-products-grid .eng-product-card > .text-muted {
    display: none !important;
}

/* Price — soft frosted pill on the title row (right) over the light gradient */
#bat-products-grid .eng-product-card > .text-primary,
.bat-styles-grid .eng-style-card > .text-primary {
    margin: 8px 10px 8px 0 !important;
    padding: 4px 12px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px !important;
    color: var(--secondary) !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.60) inset,
                0 4px 10px rgba(15, 23, 42, 0.08);
    align-self: center;
}

/* Style cards: price stays left-aligned under the title */
.bat-styles-grid .eng-style-card > .text-primary {
    margin: 0 6px 8px 6px !important;
    align-self: start;
}

@media (min-width: 576px) {
    #bat-products-grid .eng-product-card > .text-primary,
    .bat-styles-grid .eng-style-card > .text-primary {
        font-size: 1.2rem !important;
    }
}

@media (min-width: 992px) {
    #bat-products-grid .eng-product-card > .text-primary,
    .bat-styles-grid .eng-style-card > .text-primary {
        font-size: 1.3rem !important;
    }
}

@media (min-width: 1200px) {
    #bat-products-grid .eng-product-card > .text-primary,
    .bat-styles-grid .eng-style-card > .text-primary {
        font-size: 1.4rem !important;
    }
}

/* Style card uses a 3-row grid: image, title, price stacked left; chips on the right */
.bat-styles-grid .eng-style-card {
    grid-template-rows: auto auto auto;
}

.bat-styles-grid .eng-style-card > img {
    grid-row: 1;
}

.bat-styles-grid .eng-style-card > .fw-semibold {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
}

.bat-styles-grid .eng-style-card > .text-primary {
    grid-column: 1 !important;
    grid-row: 3;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 6px 8px 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--secondary) !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

@media (min-width: 768px) {
    .bat-styles-grid .eng-style-card > .text-primary {
        font-size: 1.3rem !important;
    }
}

@media (min-width: 1200px) {
    .bat-styles-grid .eng-style-card > .text-primary {
        font-size: 1.4rem !important;
    }
}

/* Per-style meta chips — full-width row below title/price on phones+tablets,
   stacked on the right side (spanning title+price rows) on large desktop. */
.bat-styles-grid .eng-style-card > .bwz-style-meta {
    grid-column: 1 / -1;
    grid-row: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    margin: 2px 6px 8px 6px !important;
}

@media (min-width: 1200px) {
    .bat-styles-grid .eng-style-card > .bwz-style-meta {
        grid-column: 2;
        grid-row: 2 / span 2;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: center;
        margin: 2px 6px 6px 0 !important;
    }
}

.bwz-style-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: var(--primary);
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 992px) { .bwz-style-meta-chip { font-size: .7rem; } }
@media (min-width: 1200px) { .bwz-style-meta-chip { font-size: .72rem; text-align: right; } }

.bwz-style-meta-chip i {
    font-size: .9rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Single-member variant chip — red tint on the light gradient card */
.bwz-style-meta--single .bwz-style-meta-chip:not(.bwz-style-meta-chip--warn) {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.95);
    color: var(--secondary);
}

/* Warning chip — amber-tinted */
.bwz-style-meta-chip--warn {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.30);
    color: #92400E;
}

.bwz-style-meta-chip--warn i {
    color: #D97706;
}

@media (prefers-reduced-motion: reduce) {
    #bat-products-grid .eng-product-card,
    #bat-products-grid .eng-product-card:hover,
    #bat-products-grid .eng-product-card > img,
    .bat-styles-grid .eng-style-card,
    .bat-styles-grid .eng-style-card:hover,
    .bat-styles-grid .eng-style-card > img,
    #bat-products-grid .eng-product-card::before,
    .bat-styles-grid .eng-style-card::before,
    #bat-products-grid .eng-product-card.selected::after,
    .bat-styles-grid .eng-style-card.selected::after {
        transition: none;
        transform: none;
        animation: none;
    }
}

/* Strip the wizard step's card styling — no background, border, or shadow */
.eng-wizard-step {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}

/* =============================================================
   Ball Engraving Wizard — uses the shared bwz-* foundation
   plus ball-specific form / supply / preview tiles.
   ============================================================= */

/* Step 2 — Text + static preview, side-by-side on md+ */
.bwz-ball-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

@media (min-width: 768px) {
    .bwz-ball-form { grid-template-columns: 280px 1fr; gap: 24px; }
}

.bwz-ball-form-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(0, 51, 102, 0.06), rgba(0, 51, 102, 0.02)),
        #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.10);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bwz-ball-preview-frame {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bwz-ball-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bwz-ball-preview-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.bwz-ball-preview-style {
    font-size: .92rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.005em;
}

.bwz-ball-preview-hint {
    font-size: .68rem;
    font-weight: 700;
    color: #64748B;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bwz-ball-form-fields { min-width: 0; }

.bwz-ball-fields-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.bwz-ball-fields-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.bwz-ball-fields-eyebrow i { font-size: .82rem; color: var(--secondary); }

.bwz-ball-fields-hint {
    font-size: .78rem;
    color: #64748B;
    line-height: 1.45;
}

.bwz-ball-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bwz-ball-line {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bwz-ball-line .bwz-form-input {
    padding: 11px 14px;
    font-size: .94rem;
}

.bwz-ball-line .bwz-form-count {
    align-self: flex-end;
    font-size: .68rem;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.bwz-ball-line .bwz-form-count.text-warning { color: #B45309 !important; }
.bwz-ball-line .bwz-form-count.text-danger  { color: #B91C1C !important; }

/* Ball Supply — premium radio cards (mirrors Step 1 Order Type cards) */
.bwz-supply-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .bwz-supply-grid { grid-template-columns: 1fr 1fr; }
}

.bwz-supply-option {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 2px solid #E2E8F0;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
    margin: 0;
}

.bwz-supply-option:hover {
    border-color: rgba(0, 51, 102, 0.30);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 51, 102, 0.10);
}

.bwz-supply-option.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.06), rgba(0, 51, 102, 0.02)), #ffffff;
    box-shadow: 0 10px 22px rgba(0, 51, 102, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bwz-supply-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bwz-supply-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.12), rgba(0, 51, 102, 0.04));
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bwz-supply-icon--alt {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(245, 158, 11, 0.08));
    color: #B45309;
}

.bwz-supply-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bwz-supply-title {
    font-size: .96rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.bwz-supply-desc {
    font-size: .8rem;
    color: #475569;
    line-height: 1.4;
}

.bwz-supply-price {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 51, 102, 0.10);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    width: fit-content;
}

.bwz-supply-price--alt {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.bwz-supply-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #E2E8F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: .82rem;
    transition: background-color .2s ease, border-color .2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.bwz-supply-option.selected .bwz-supply-check {
    background: var(--primary);
    border-color: var(--primary);
}

/* Step 3 — Ball preview circular frame */
.bwz-ball-review {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.bwz-ball-review-frame {
    position: relative;
    width: min(360px, 80vw);
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.bwz-ball-review-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #64748B;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bwz-ball-review-spinner.d-none { display: none !important; }

.bwz-ball-review-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ─── Ball style cards (Step 1) — match the bat-style card treatment ─── */
#ball-styles-grid .eng-style-card {
    cursor: pointer;
    position: relative;
    padding: 8px !important;
    background:
        linear-gradient(135deg, rgba(0, 51, 102, 0.16) 0%, rgba(0, 51, 102, 0.06) 100%),
        #ffffff !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
                0 8px 22px rgba(15, 23, 42, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    text-align: left !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

#ball-styles-grid .eng-style-card .bwz-ball-style-img-wrap {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 51, 102, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#ball-styles-grid .eng-style-card .bwz-ball-style-img-wrap img {
    max-height: 88%;
    max-width: 88%;
    object-fit: contain;
    transition: transform .3s ease;
}

#ball-styles-grid .eng-style-card:hover .bwz-ball-style-img-wrap img {
    transform: scale(1.03);
}

#ball-styles-grid .eng-style-card > .fw-semibold {
    padding: 6px 10px 0;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -0.01em;
}

#ball-styles-grid .eng-style-card > .text-primary {
    padding: 0 10px 8px;
    font-size: .82rem !important;
    font-weight: 700 !important;
    color: var(--secondary) !important;
}

#ball-styles-grid .eng-style-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.10),
                0 4px 10px rgba(16, 24, 40, 0.06) !important;
}

#ball-styles-grid .eng-style-card.selected {
    background:
        linear-gradient(135deg, rgba(153, 0, 51, 0.16) 0%, rgba(153, 0, 51, 0.06) 100%),
        #ffffff !important;
    box-shadow: 0 0 0 2px var(--secondary),
                inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

#ball-styles-grid .eng-style-card.selected::after {
    content: "\F26B"; /* bi-check2 */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--secondary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
    animation: bwz-check-pop .35s cubic-bezier(.2, 1.5, .35, 1);
}

/* =============================================================
   Bat Engraving Wizard — Cross-device responsive polish
   Covers Step 1-4 at sm (<576), md (<768), lg (<992), xs (<480).
   ============================================================= */

/* --- Step 3: form grid — fill space at sm before 3-col at md --- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .bwz-form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .bwz-form-grid--2-1 { grid-template-columns: 1fr; }
}

/* --- Progress bar: compact label at tablets, hide at phones --- */
@media (min-width: 576px) and (max-width: 767.98px) {
    .bwz-progress .bwz-step-label {
        display: inline;
        font-size: .62rem;
        letter-spacing: 0;
    }
    .bwz-progress .bwz-step-label { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Action bar (Members) at 480-767px: full-width Add button, evenly distributed --- */
@media (max-width: 767.98px) {
    .bwz-members-actions.bwz-members-actions--solo {
        gap: 10px;
        align-items: stretch;
    }
    .bwz-members-actions.bwz-members-actions--solo .bwz-view-toggle {
        flex-shrink: 0;
    }
    .bwz-members-actions.bwz-members-actions--solo .bwz-add-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 14px !important;
    }
    .bwz-view-btn { width: 42px; height: 36px; }
}

/* --- Edit/Delete touch targets: 36px on mobile (was 32px) --- */
@media (max-width: 767.98px) {
    #roster-members-list .roster-edit-btn,
    #roster-members-list .roster-delete-btn,
    #manual-players-list .roster-edit-btn,
    #manual-players-list .roster-delete-btn {
        width: 36px !important;
        height: 36px;
    }
    #roster-members-list .roster-edit-btn i,
    #roster-members-list .roster-delete-btn i,
    #manual-players-list .roster-edit-btn i,
    #manual-players-list .roster-delete-btn i {
        font-size: 1.05rem;
    }
}

/* --- Step 4: bottom action row stacks on phones with full-width tap targets --- */
@media (max-width: 575.98px) {
    .bwz-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .bwz-actions .ca-btn { width: 100%; justify-content: center; }
    .bwz-actions-right {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .bwz-actions--end { align-items: stretch; }
    /* Extra breathing room so stacked buttons clear the footer */
    .wizard-bg { padding-bottom: 140px !important; }
}

/* --- Review card typography scales down on phones --- */
@media (max-width: 575.98px) {
    .bwz-review-card { padding: 12px 12px 10px; gap: 5px; }
    .bwz-review-card-name { font-size: .92rem; }
    .bwz-review-card-pair { padding: 5px 8px; }
    .bwz-review-card-pair-label { font-size: .54rem; }
    .bwz-review-card-pair-value { font-size: .72rem; }
}

/* --- Order summary: stack key/value on very narrow phones --- */
@media (max-width: 479.98px) {
    .bwz-order-summary-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .bwz-order-summary-total-val { font-size: 1.4rem; }
    .bwz-order-summary-row {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* --- Step 1 option cards: tighter on small phones --- */
@media (max-width: 479.98px) {
    .bwz-option { padding: 16px 14px; }
    .bwz-option-title { font-size: .98rem; }
    .bwz-option-desc { font-size: .78rem; }
}

/* --- Section heads — keep readable on small phones --- */
@media (max-width: 575.98px) {
    .bwz-sec-head .el-section-title,
    .bwz-sec-head--lg .el-section-title { font-size: 1.45rem !important; }
    .bwz-sec-head .el-section-sub { font-size: .82rem; }
}

/* --- Review tags: 2 cols at sm phones, 4 at md tablets --- */
@media (min-width: 480px) and (max-width: 575.98px) {
    .bwz-review-tags { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .bwz-review-tags { grid-template-columns: repeat(4, 1fr); }
}

/* --- Preview tile tag — guard against very long names --- */
.bwz-preview-tile-tag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Modal dialogs — tighter on small phones for usable touch zones --- */
@media (max-width: 479.98px) {
    .eng-modal .modal-dialog,
    .bwz-wishlist-modal .modal-dialog {
        margin: 8px;
    }
    .bwz-notice-popup-card {
        padding: 20px 18px !important;
    }
    .bwz-zoom-modal .modal-dialog { margin: 8px; }
}

/* --- Roster table: keep horizontal scroll smooth + clamp font on phones --- */
@media (max-width: 767.98px) {
    #roster-members-list .table-responsive,
    #manual-players-list .table-responsive {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    #roster-members-list .table,
    #manual-players-list .table {
        font-size: .82rem;
    }
}