/* =========================================
   DFRNT BRUTALIST & GEN Z OVERRIDES
   ========================================= */

/* Typography Overrides */
:root {
    --font-display: 'Bebas Neue', display;
    --font-body: 'Space Grotesk', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.cf-hw-title,
.cf-302-section-title,
.cf-303-title,
.cf-304-story-title,
.cf-single-product-title,
.cf-cat-label-watermark {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

body,
p,
a,
div,
span {
    font-family: var(--font-body) !important;
}

/* Force specific sizes for Bebas Neue since it can be smaller visually */
.cf-hw-title {
    font-size: 6rem !important;
}

.cf-single-product-title {
    font-size: 2.5rem !important;
}

/* Kill Glassmorphism & Soft Shadows & All Border Radiuses */
* {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    /* Aggressive fix for all rounded leftovers */
}

/* Brutalist Buttons */
.cf-hw-btn,
.cf-304-btn-outline,
.button,
button,
input.button,
a.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    border-radius: 0 !important;
    border: 3px solid var(--cf-logo-color) !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-family: var(--font-display) !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.1em !important;
    color: #fff !important;
    background: #000 !important;
    box-shadow: 6px 6px 0px var(--cf-logo-color) !important;
    transition: all 0.1s ease !important;
    padding: 1rem 2rem !important;
}

.cf-hw-btn:hover,
.cf-304-btn-outline:hover,
.button:hover,
button:hover,
input.button:hover,
a.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 3px 3px 0px var(--cf-logo-color) !important;
    background: var(--cf-logo-color) !important;
    color: #000 !important;
    animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .94) both infinite !important;
}

/* Brutalist Cards */
.cf-302-card,
.cf-303-card,
.cf-304-story-image,
.cf-cat-label-card,
.woocommerce table.shop_table,
.cart_totals,
#customer_details,
#order_review_heading {
    border-radius: 0 !important;
    border: 3px solid #fff !important;
    box-shadow: 8px 8px 0px var(--cf-logo-color) !important;
    transition: all 0.2s ease !important;
}

.cf-shop-card {
    border-radius: 0 !important;
    border: 3px solid #fff !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Repeating text border tape effect */
.cf-shop-card::before {
    content: "DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT DIFFERENT DFRNT" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 30px !important;
    z-index: 20 !important;
    background: var(--cf-logo-color) !important;
    color: #000 !important;
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border-top: 3px solid #000 !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.cf-302-card:hover,
.cf-303-card:hover {
    transform: translate(4px, 4px) !important;
    box-shadow: 4px 4px 0px var(--cf-logo-color) !important;
    border-color: var(--cf-logo-color) !important;
}

.cf-shop-card:hover {
    transform: translate(0, -4px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important;
    border-color: var(--cf-logo-color) !important;
}

.cf-shop-card:hover::before {
    bottom: 0 !important;
    left: 0 !important;
}

/* Labels and Badges */
.prop-badge-nou,
.cf-303-prop-badge-nou,
.cf-sale-prop-1,
.cf-sale-prop-4,
.sale-text,
.sale-pct {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.1em !important;
    box-shadow: 3px 3px 0px #000 !important;
}

/* Remove default slider arrows or restyle them */
.cf-slide-nav-arrows {
    display: none !important;
    /* In archive we'll switch to grid anyway */
}

/* =========================================
   MOBILE EDGE-TO-EDGE & GRID FIXES
   ========================================= */
@media (max-width: 639px) {

    /* Give product grid side padding to prevent cut corners and box-shadow clip on mobile */
    .cf-shop {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        overflow-x: hidden;
    }

    .cf-cat-grid {
        gap: 2.5rem !important;
        /* Restoring gap instead of margin */
    }

    .cf-shop-card {
        border-left: 3px solid #fff !important;
        border-right: 3px solid #fff !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        border-bottom: 3px solid #fff !important;
        border-top: 3px solid #fff !important;
        width: 100% !important;
        min-height: 70vh !important;
    }

    .cf-shop-card::before {
        bottom: 0 !important;
        left: 0 !important;
    }

    /* Ensure the wrapper doesn't have internal padding causing gaps margins */
    .cf-cat-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =========================================
   GRAFFITI & SKATE AESTHETIC TWEAKS
   ========================================= */
.cf-attention-text {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    transform: rotate(-3deg) !important;
    background: #111 !important;
    padding: 1rem 2.5rem !important;
    border: 4px solid var(--cf-logo-color) !important;
    box-shadow: 8px 8px 0px var(--cf-logo-color) !important;
    color: #fff !important;
    display: inline-block !important;
    font-size: 1.5rem !important;
}

.cf-att-highlight {
    color: #000 !important;
    background: var(--cf-logo-color) !important;
    padding: 0px 8px !important;
    font-weight: 900 !important;
}

.cf-att-badge {
    position: absolute !important;
    top: -15px !important;
    right: -15px !important;
    background: #fff !important;
    color: #000 !important;
    padding: 5px 10px !important;
    transform: rotate(10deg) !important;
    border: 3px solid #000 !important;
    font-weight: 900 !important;
    font-family: var(--font-display) !important;
}

.cf-cat-label-watermark {
    transform: rotate(-10deg) scale(1.1) !important;
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15) !important;
    line-height: 0.8 !important;
    z-index: 0 !important;
}

.cf-cat-title {
    font-family: var(--font-display) !important;
    font-size: 3rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--cf-logo-color) !important;
    text-shadow: 4px 4px 0px rgba(255, 255, 255, 0.1) !important;
    padding-left: 1rem !important;
    margin-bottom: 2rem !important;
    border-left: 10px solid var(--cf-logo-color) !important;
}

/* =========================================
   DFRNT -> DIFFERENT CONSTANT SWAP
   ========================================= */
@keyframes dfrnt-swap-anim {

    0%,
    45% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) rotate(-5deg);
    }

    48% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) rotate(4deg);
    }

    50%,
    95% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(4deg);
    }

    98% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9) rotate(-2deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) rotate(-5deg);
    }
}

@keyframes dfrnt-hide-anim {

    0%,
    45% {
        color: var(--cf-logo-color);
        text-shadow: 4px 4px 0px rgba(255, 255, 255, 0.1);
    }

    48%,
    98% {
        color: transparent;
        text-shadow: none;
    }

    100% {
        color: var(--cf-logo-color);
        text-shadow: 4px 4px 0px rgba(255, 255, 255, 0.1);
    }
}

.cf-dfrnt-swap {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: crosshair;
    color: var(--cf-logo-color);
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    animation: dfrnt-hide-anim 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cf-dfrnt-swap::after {
    content: 'DIFFERENT';
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-size: 1.2em;
    /* little bigger than parent */
    color: var(--cf-logo-color);
    letter-spacing: 0.05em;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 3px 3px 0px #000;
    z-index: 10;

    /* Apply continuous infinite swap */
    animation: dfrnt-swap-anim 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cf-dfrnt-swap.dark-bg {
    animation: dfrnt-hide-anim 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cf-dfrnt-swap.dark-bg::after {
    text-shadow: 3px 3px 0px #fff;
    color: #000;
}

/* =========================================
   GRID BABYCARDS ADAPTATION
   ========================================= */
.cf-cat-label-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 400px !important;
    background: #000 !important;
    border: 3px solid var(--cf-logo-color) !important;
    box-shadow: 8px 8px 0px var(--cf-logo-color) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 2rem !important;
}

.cf-cat-label-card.has-baby-tc {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.cf-cat-label-watermark {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: rotate(-10deg) scale(1.1) !important;
    white-space: wrap !important;
    line-height: 0.8 !important;
    left: 50% !important;
    top: 50% !important;
    text-align: center !important;
}

/* Make sure trustcards inside babycards fill the container perfectly */
.cf-cat-label-card.has-baby-tc .cf-baby-trust-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
}

.cf-cat-label-card.has-baby-tc .cf-baby-trust-card .cf-shop-trust-card {
    border: none !important;
    box-shadow: none !important;
    height: 100% !important;
}

.cf-cat-label-count-stroke {
    font-family: var(--font-display) !important;
    font-size: 5rem !important;
    line-height: 1 !important;
    color: transparent !important;
    -webkit-text-stroke: 2px var(--cf-logo-color) !important;
    position: relative !important;
    z-index: 10 !important;
}

.cf-cat-label-count-label {
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    color: #fff !important;
    background: var(--cf-logo-color) !important;
    display: inline-block !important;
    padding: 0.2rem 1rem !important;
    transform: rotate(-5deg) translateY(-10px) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* =========================================
   HARDCORE REBEL: GLITCH & SPRAY EFFECTS
   ========================================= */

/* Glitch Animation for Hover States */
@keyframes glitch-anim {
    0% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(-2px, 2px);
    }

    10% {
        clip-path: inset(40% 0 10% 0);
        transform: translate(2px, -2px);
    }

    20% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(-2px, 2px);
    }

    30% {
        clip-path: inset(15% 0 70% 0);
        transform: translate(2px, -2px);
    }

    40% {
        clip-path: inset(55% 0 25% 0);
        transform: translate(-2px, 2px);
    }

    50% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(2px, -2px);
    }

    60% {
        clip-path: inset(70% 0 15% 0);
        transform: translate(-2px, 2px);
    }

    70% {
        clip-path: inset(5% 0 85% 0);
        transform: translate(2px, -2px);
    }

    80% {
        clip-path: inset(90% 0 0% 0);
        transform: translate(-2px, 2px);
    }

    90% {
        clip-path: inset(25% 0 65% 0);
        transform: translate(2px, -2px);
    }

    100% {
        clip-path: inset(60% 0 35% 0);
        transform: translate(-2px, 2px);
    }
}

.cf-glitch-hover:hover {
    animation: glitch-anim 0.4s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: var(--cf-logo-color) !important;
}

/* Spray Paint Speckle Overlay Background */
.cf-spray-bg {
    position: relative;
}

.cf-spray-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='transparent'/%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.25' mix-blend-mode='multiply'/%3E%3C/svg%3E");
    opacity: 0.6;
    mix-blend-mode: overlay;
}

/* Duct Tape / Marker Highlights */
.cf-duct-tape {
    background: #333;
    color: #fff;
    padding: 2px 10px;
    display: inline-block;
    transform: rotate(-2deg);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid #111;
    position: relative;
    /* make the edges look rough like ripped tape */
    clip-path: polygon(1% 0, 98% 3%, 100% 98%, 2% 100%);
}

.cf-marker-highlight {
    background: var(--cf-logo-color);
    color: #000;
    padding: 0 5px;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    /* Rough marker edges */
    clip-path: polygon(0% 10%, 100% 0%, 98% 90%, 2% 100%);
}

/* Vandalized Cross-out */
.cf-vandal-strike {
    position: relative;
    display: inline-block;
}

.cf-vandal-strike::after {
    content: '';
    position: absolute;
    left: -5%;
    top: 50%;
    width: 110%;
    height: 4px;
    background: red;
    transform: rotate(-10deg);
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    pointer-events: none;
}

/* =========================================
   EXTREME VANDALISM: GRID & CARDS
   ========================================= */

/* Make the grid look like a wall covered in crooked posters */
.cf-cat-grid {
    gap: 3rem !important;
    /* more breathing room for chaotic rotations */
}

.cf-shop-card {
    background: #050505 !important;
    border: 4px solid #222 !important;
    position: relative !important;
    border-radius: 0 !important;
    transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    margin-bottom: 2rem !important;
    overflow: visible !important;
    /* let tape spill out */
    width: 100% !important;
    /* Override old slider 85vw/80vw */
    max-width: none !important;
    /* Override old slider max-width */
}

/* Alternate rotations for chaos */
.cf-cat-grid> :nth-child(even) .cf-cat-label-card,
.cf-cat-grid> :nth-child(even) .cf-shop-trust-card {
    transform: rotate(2deg) !important;
}

.cf-cat-grid> :nth-child(odd) .cf-cat-label-card,
.cf-cat-grid> :nth-child(odd) .cf-shop-trust-card {
    transform: rotate(-3deg) !important;
}

/* Product cards get very subtle rotation */
.cf-shop-card:nth-child(even) {
    transform: rotate(0.5deg) !important;
}

.cf-shop-card:nth-child(odd) {
    transform: rotate(-0.5deg) !important;
}

/* Ensure hover pops it out of the chaos temporarily */
.cf-shop-card:hover {
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 50 !important;
    border-color: var(--cf-logo-color) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.8) !important;
}

.cf-shop-card:hover::before {
    bottom: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
}

/* Grungy Images Removed - Just a solid border */
.cf-shop-card-bg img {
    border: 3px solid #000 !important;
}

/* Matte Black Gaffer Tape */
.cf-duct-tape-corner {
    position: absolute;
    top: -15px;
    left: 10%;
    width: 100px;
    height: 35px;
    background: #111;
    /* Solid matte black */
    transform: rotate(-3deg);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
    z-index: 99;
    /* Higher z-index to break out of card */
    opacity: 0.95;
    border: none;
    clip-path: polygon(1% 2%, 99% 1%, 98% 98%, 2% 99%);
    /* Slightly jagged but cleaner */
    pointer-events: none;
    /* Don't block clicks */
}

/* Bundle Plus Sign - Gaffer Tape Style */
.cf-bundle-plus-tape {
    width: 60px;
    height: 60px;
    background: #111;
    transform: rotate(4deg);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
    clip-path: polygon(2% 2%, 98% 1%, 99% 99%, 1% 98%);
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    z-index: 99;
    pointer-events: none;
    font-family: var(--font-display) !important;
}

/* Bundle Price Badge - Gaffer Tape Style */
.cf-bundle-price-tape {
    background: #111;
    transform: rotate(-2deg);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.9);
    clip-path: polygon(1% 2%, 99% 1%, 98% 98%, 2% 99%);
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.cf-bundle-price-tape .bundle-text {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    opacity: 0.8;
    margin-bottom: 0.5rem;
    font-family: var(--font-body);
}

.cf-bundle-price-tape .prop-price {
    font-family: var(--font-display) !important;
    font-size: 2rem;
    font-weight: 900;
    color: var(--cf-logo-color);
    /* Matches theme color setting */
    line-height: 1;
}

/* Industrial White Marking Tape */
.cf-duct-tape-corner.alt-tape {
    transform: rotate(4deg);
    left: auto;
    right: -10px;
    top: -5px;
    background: #f8f9fa;
    /* Off-white / industrial */
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
    color: #000;
}

/* Force tape to top-right when there's a discount attached */
.cf-duct-tape-corner.top-right {
    left: auto;
    right: -10px;
}

/* Discount text inside the duct tape */
.cf-tape-discount {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #ff0000;
    /* Red text as requested */
    font-family: var(--font-display) !important;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 0px #000;
    /* To stand out against the white tape if needed */
}

/* Hide old sale badges */
.cf-sale-prop-1,
.cf-sale-prop-4 {
    display: none !important;
}

/* Minimalist Brutalist Price Tags on Archive -> Gaffer Tape Style */
.cf-vandal-price-wrapper {
    position: absolute;
    bottom: -5px;
    /* Push it down slightly */
    right: -10px;
    /* Slightly extruded */
    background: #111;
    /* Matte black */
    color: #fff;
    font-family: var(--font-display) !important;
    font-size: 1.8rem !important;
    padding: 8px 16px !important;
    transform: rotate(2deg);
    /* slight rotation like tape */
    border: none;
    /* No border for tape */
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
    /* Tape shadow */
    clip-path: polygon(1% 2%, 99% 1%, 98% 98%, 2% 99%);
    /* Jagged edges */
    z-index: 40;
    line-height: 1;
    pointer-events: none;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cf-shop-card:hover .cf-vandal-price-wrapper {
    transform: rotate(0deg) scale(1.05);
    /* Slight scale */
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
    background: #fff;
    color: #000;
}

/* Format old price inside the wrapper */
.cf-vandal-price-wrapper del {
    font-size: 1.8rem !important;
    color: inherit !important;
    opacity: 0.8;
    text-decoration: none !important;
    /* Remove native line-through */
    margin-right: 12px;
    /* Space between old and new price */
    letter-spacing: inherit;
    font-weight: 500;
    position: relative;
}

/* Format the active/new price inside the wrapper */
.cf-vandal-price-wrapper ins {
    font-size: 1.8rem !important;
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1;
    letter-spacing: inherit;
}

/* For simple products with no sale */
.cf-vandal-price-wrapper>.woocommerce-Price-amount {
    font-size: 1.8rem !important;
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 1;
    letter-spacing: inherit;
}

/* =========================================
   BUNDLE UI POSITIONING & RESPONSIVENESS
   ========================================= */
.cf-bundle-plus-tape-wrapper {
    right: -6px;
    top: 50%;
    transform: translate(50%, -50%);
}

.cf-bundle-price-badge {
    right: -10px;
    bottom: 3rem;
    transform: translateX(50%);
}

@media (max-width: 639px) {
    /* Group bundled items together tighter */
    .cf-bundle-part-follow {
        margin-top: -1.5rem !important;
    }

    /* Make the Bundle + symbol significantly bigger */
    .cf-bundle-plus-tape {
        width: 85px;
        height: 85px;
        font-size: 4.5rem;
    }

    .cf-bundle-plus-tape-wrapper {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -0.5rem; /* Centered in the reduced 1rem gap */
        transform: translate(-50%, 50%);
        z-index: 60;
    }

    .cf-bundle-price-badge {
        right: 0;
        bottom: auto;
        top: -1.5rem;
        transform: translateX(0);
    }
}