/*
 * MerchStudio version 0.01 - Brand File
 * Copyright (c) 2026 MerchStudio Inc.
 * Brand specific styles for 143 Transfers.
 * @author    Keziah
 * @version   tpl/brand/client/css/143.css - 0.01 - 07-28-2026 - keziah
 */
html {
    scroll-behavior: smooth;
}

/* 
 * =========================================
 * HEADER SECTION
 * Hardcoded to Dark Theme
 * =========================================
 */
body #merch_header {
    background: linear-gradient(180deg, #000000 0%, #000000 100%);
    border-bottom: none;
    position: relative; /* Required for z-index to take effect */
    z-index: 900; /* Sits higher than the merch_menu's 9990 */
}

/* HEADER Styles */
#logo_wrap {
    max-width: 280px; /* Increased slightly for a better size ratio */
}

/* 
 * Phone Number Styling
 * We match the gray, italicized look.
 * Using relative positioning moves it up visually.
 * Margin-right pushes it leftwards to center under "TRANSFERS".
 */
.phone {
    align-self: flex-end;
    margin-right: 90px; /* Increased to push the text left under TRANSFERS */
    position: relative;
    top: -20px; 
    margin-top: 0; 
}

.phone a,
.phone a:link,
.phone a:visited {
    color: #aaaaaa; /* Hardcoded light grey */
    font-style: italic;
    font-weight: 400;
    text-decoration: none;
    font-size: 0.85rem; 
}

/* 
 * Main Navigation Menu
 * We apply a multi-stop gradient angled at 105deg to create a slanted lighting flare,
 * a yellow bottom border for contrast, and center the uppercase text.
 */
#merch_menu {
    background: linear-gradient(
        155deg, 
        #3b0b75 5%, 
        #8a3ab9 25%, 
        #3b0b75 50%, 
        #3b0b75 50%, 
        #a072b9 100%
    );
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allows the menu links to stack gracefully on smaller screens */
    padding: 10px 90px; /* Creates a 90px safe zone on the edges so text can't touch the icons */
    box-sizing: border-box; /* Keeps the padding from stretching the page wider */
    border: none;
    border-bottom: 2px solid #feea04; /* Hardcoded brand yellow */
}

/* Styling for links and buttons in the menu */
/* mm_link: Main Menu static Link */
/* mm_button: Main Menu toggle Button */
.mm_link,
.mm_link:link,
.mm_link:visited,
.mm_button {
    color: #ddd;
}

/* 
 * Main Menu Hover State
 * Turns text to the theme highlight color and forces a transparent background 
 * to override the default gray block.
 */
#merch_menu .mm_link:hover, 
#merch_menu .mm_button:hover {
    color: #feea04; /* Hardcoded brand yellow */
    background-color: transparent; 
}

/* 
 * Sticky Menu Icons
 * Pin the mini logo to the left and mini cart to the right 
 * so they don't disrupt the centered navigation links.
 */
#mm_logo_icon {
    position: absolute;
    left: 20px;
}

#merch_menu #mm_cart_wrap {
    position: absolute;
    right: 20px;
}

/* 
 * Sticky Cart Dropdown 
 * Elevate the menu over the hero image and position the cart dropdown
 */
#merch_menu {
    z-index: 895; 
}

#merch_menu #mm_cart_wrap .drop_panel {
    position: absolute;
    top: 45px;
    right: -10px;
    width: 320px;
    z-index: 950; 
    
    /* 143 Theme specific dropdown styling */
    background-color: #121212; 
    border: 1px solid #333333; /* Kept your exact dark border */
    box-shadow: 0px 4px 8px 0px var(--shadow); /* Uses the exact same yellow glow as the header */
}

/* 
 * Main Menu Links Base State
 * We apply a transparent border to the base state of top-level links
 * to prevent layout shifting when the hover border is applied.
 * We include a transition here for a smooth color and border fade.
 */
body #merch_menu .mm_list > .mm_item > a.mm_link {
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
}

/* 
 * Main Menu Hover & Active States
 * We use direct child combinators (>) to target only the top-level main menu items,
 * ensuring dropdown links are excluded from this specific border effect.
 */
body #merch_menu .mm_list > .mm_item > a.mm_link:hover,
body #merch_menu .mm_list > .mm_item > a.mm_link.active {
    color: #feea04; 
    background-color: transparent;
    border-bottom: 3px solid #feea04;
    text-decoration: none;
}

/* Ensure the menu toggle button turns yellow on hover, but doesn't get the underline */
body #merch_header #merch_menu .mm_button:hover {
    color: #feea04; 
    background-color: transparent; 
}
/* 
 * Sticky Menu Cart Fixes
 * Strip the default background from the button and set up the hover toggle.
 */
#merch_menu #mm_cart_wrap button,
#merch_menu #mm_cart_wrap .drop_trigger {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

#merch_menu #mm_cart_wrap .default_icon {
    display: inline-block;
    filter: brightness(0) invert(1); 
}

#merch_menu #mm_cart_wrap .hover_icon {
    display: none;
}

#merch_menu #mm_cart_wrap:hover .default_icon {
    display: none;
}

#merch_menu #mm_cart_wrap:hover .hover_icon {
    display: inline-block;
}

/* 
 * Header Tools (Login & Cart)
 * Toggle between the default gradient SVG and the yellow hover SVG.
 */
.head_icon_wrap {
    cursor: pointer;
}

.head_icon_wrap .default_icon {
    display: inline-block;
}

.head_icon_wrap .hover_icon {
    display: none; /* Hide the yellow icon by default */
}

/* On hover, swap the icons */
.head_icon_wrap:hover .default_icon {
    display: none; 
}
.head_icon_wrap:hover .hover_icon {
    display: inline-block;
}

/* Make the label text turn yellow on hover too! */
.head_label {
    color: #ffffff;
    transition: color 0.2s ease-in-out;
}
.head_icon_wrap:hover .head_label {
    color: #feea04;
}

/* Resizes the header icons without changing their spacing */
.header_user_cart_wrap .merch_icon {
    width: 27px; 
    height: 27px;
}

/*
 * Search Bar Refinement
 * We darken the search input to push it back into the header background.
 */
#merch_search_form input[type="search"] {
    background-color: #121212; /* Hardcoded dark base */
    border: 1px solid #333333; /* Hardcoded dark line */
    color: #ffffff; /* Hardcoded white text */
}

/*
 * Typography Configuration
 * Establishing the brand font stack globally across the application.
 */
body {
    font-family: 'Inter', sans-serif;
}

h1, 
h2, 
h3, 
.merch_title,
.mm_link, 
.mm_button {
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Header Tools specific text styling */
.header_tools .head_label {
    font-family: 'Inter', sans-serif;
    text-transform: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: #ffffff;
}

/*
 * Script Accent Font
 * Utilized for energetic, short callout phrases.
 */
.accent_text {
    font-family: 'Caveat', cursive;
    font-size: 1.25em; 
}

/* 
 * =========================================
 * HOME PAGE
 * =========================================
 */
.home #merch_main {
    padding-bottom: 0;
}

/* 
 * =========================================
 * HERO SECTION
 * Hardcoded to Dark Theme
 * =========================================
 */

#merch_main .hero_wrap {
    background-image: url('/assets/2026_08/hero_bg_6a70863f763983_86040652_1920.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 0; 
    padding-left: 0;
    padding-right: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -30px;
}

#merch_main .hero_grid {
    align-items: flex-end; 
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
    max-width: 1750px; 
    width: 100%;
    padding: 0 80px; 
    box-sizing: border-box;
}

#merch_main .hero_content {
    text-align: left;
    padding-bottom: 60px; 
}

#merch_main .hero_kicker {
    color: #feea04; 
    font-family: 'Inter', sans-serif;
    /* Bumped max size to 1.3rem */
    font-size: clamp(0.9rem, 1.2vw, 1.3rem); 
    font-weight: 700;
    letter-spacing: 1.5px;
    /* Scaled margin so it breathes more on big screens */
    margin-bottom: clamp(10px, 1.5vw, 20px); 
    text-transform: uppercase;
}

#merch_main .hero_title {
    color: #ffffff; 
    font-family: 'Bebas Neue', sans-serif;
    /* Massive jump! The '6.5vw' tells it to grow much faster, capping at a huge 7.5rem */
    font-size: clamp(2.5rem, 6.5vw, 7.5rem); 
    font-style: italic;
    line-height: 0.95;
    margin: 0 0 clamp(20px, 2.5vw, 35px) 0;
    padding-left: 0;
    text-align: left;
    text-transform: uppercase;
}

#merch_main .hero_title em {
    font-style: italic;
}

#merch_main .hero_title .highlight {
    color: #feea04; 
    font-style: italic;
}

#merch_main .hero_desc {
    color: #ffffff; 
    font-family: 'Inter', sans-serif;
    /* Bumped max size to 1.5rem */
    font-size: clamp(0.9rem, 1.4vw, 1.5rem); 
    line-height: 1.5;
    margin-bottom: clamp(30px, 3vw, 45px);
    /* Let the text run wider so it doesn't look like a tiny column */
    max-width: 750px; 
}

#merch_main .hero_actions {
    align-items: center;
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    margin-top: clamp(25px, 2.5vw, 35px);
    margin-bottom: clamp(25px, 2.5vw, 35px);
}

#merch_main .btn_gang,
#merch_main .btn_single {
    align-items: center;
    justify-content: center; 
    border-radius: 4px;
    display: flex;
    font-family: 'Inter', sans-serif;
    /* Scaled button text */
    font-size: clamp(0.95rem, 1.2vw, 1.2rem); 
    font-weight: 800;
    letter-spacing: 0.5px;
    /* Scaled padding so the buttons get physically thicker/wider on big screens */
    padding: clamp(12px, 1.5vw, 18px) clamp(24px, 3vw, 36px); 
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#merch_main .btn_gang {
    background-color: #feea04; 
    border: none;
    color: #000000; 
}

#merch_main .btn_single {
    background-color: #000000; 
    border: 1px solid #570eef; 
    color: #ffffff; 
}

/*
 * Button Hover States
 * Separated to apply distinct outline and border color changes alongside the lift effect.
 */
#merch_main .btn_gang:hover {
    outline: 2px solid #570eef;
    outline-offset: 2px;
    transform: translateY(-2px);
}

#merch_main .btn_single:hover {
    border-color: #feea04;
    transform: translateY(-2px);
}

/*
 * Free Sample Link Base
 * Grouped base, link, and visited states. Added transition for smooth hover.
 */
#merch_main .hero_sample,
#merch_main .hero_sample:link,
#merch_main .hero_sample:visited {
    align-items: center;
    color: #feea04; 
    display: inline-flex;
    font-family: 'Inter', sans-serif;
    /* Scaled the free sample text */
    font-size: clamp(0.9rem, 1.1vw, 1.2rem); 
    font-weight: 800;
    gap: 8px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/*
 * Free Sample Link Hover
 * Inverts to white with an underline for clear interactive feedback.
 */
#merch_main .hero_sample:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* SVG Sprite Icon Sizing */
#merch_main .btn_icon {
    width: 22px;
    height: 22px;
    margin-left: 8px;
}

#merch_main .btn_icon_bolt {
    width: 18px;
    height: 22px;
    margin-left: 8px;
}

#merch_main .sample_icon {
    width: 18px;
    height: 18px;
    margin-left: 5px;
}

#merch_main .hero_visual {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

#merch_main .hero_img {
    display: block;
    height: auto;
    max-width: 100%;
    transform: scale(1.08);
    transform-origin: bottom center;
    margin-bottom: 0; 
}

/*
 * Responsive Viewport Adjustments
 */
@media (max-width: 1024px) {
    #merch_main .hero_wrap {
        padding-top: 40px;
    }

    #merch_main .hero_grid {
        gap: 20px;
        padding: 0 20px;
    }

    #merch_main .hero_content {
        padding-bottom: 40px;
    }

    #merch_main .hero_img {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    #merch_main .hero_wrap {
        padding-top: 30px;
        margin-top: -30px; /* Changed from 0 to -30px to pull it up flush! */
    }

    #merch_main .hero_grid {
        grid-template-columns: 1fr;
        align-items: center;
    }

    #merch_main .hero_content {
        padding-bottom: 20px;
    }

    #merch_main .hero_actions {
        flex-direction: column;
        align-items: flex-start;
    }

    #merch_main .btn_gang,
    #merch_main .btn_single {
        width: 100%;
        box-sizing: border-box;
    }
}
/* 
 * =========================================
 * FEATURES BANNER
 * Hardcoded to Dark Theme
 * =========================================
 */

#merch_main .features_banner {
    background: linear-gradient(155deg, #3b0b75 5%, #8a3ab9 25%, #3b0b75 48%, #3b0b75 55%, #a072b9 90%);
    padding: clamp(20px, 3vw, 35px) 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: none;
}

#merch_main .features_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    max-width: 1750px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 40px;
    box-sizing: border-box;
}

#merch_main .feature_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 15%;
    min-width: 150px; 
}

#merch_main .feature_icon {
    width: clamp(35px, 4vw, 45px);
    height: clamp(35px, 4vw, 45px);
    color: #feea04; /* Hardcoded yellow */
    margin-bottom: clamp(8px, 1.5vw, 15px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

#merch_main .feature_item:hover .feature_icon {
    transform: translateY(-5px) scale(1.15); 
}

#merch_main .feature_title {
    color: #ffffff; /* Hardcoded white */
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0 0 2px 0;
    text-transform: uppercase;
    white-space: nowrap; 
}

#merch_main .feature_desc {
    color: #ffffff; /* Hardcoded white */
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.65rem, 0.8vw, 0.75rem);
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    opacity: 0.85; 
}

@media (max-width: 600px) {
    #merch_main .features_grid {
        gap: 25px 15px; 
    }
    
    #merch_main .feature_item {
        flex-basis: 40%; 
        min-width: 140px;
    }
    
    #merch_main .feature_icon {
        margin-bottom: 8px;
    }
}

/* 
 * =========================================
 * WHAT WE OFFER SECTION
 * Theme-aware (Light/Dark mode)
 * =========================================
 */

#merch_main .offers_wrap {
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-top: none; 
    overflow: hidden; /* Clips the zooming color bomb inside the section */
    background-color: #000;
}

/* Base Layer: Still Background Photo */
#merch_main .offers_wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/2026_08/bomb_bg_6a8465c21a74e3_41802599_1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Top Layer: Upward Color Bomb Burst PNG */
#merch_main .offers_wrap::after {
    content: '';
    position: absolute;
    /* Spans the full width, but starts at top: 0 and extends 200% tall */
    top: 0;
    left: 0;
    width: 100%;
    height: 200%; 
    
    background-image: url('/assets/2026_09/color_bomb_full_40_6a9ad9e0065b05_99783980_1920.png');
    background-size: contain;
    /* Centers the image file inside its 200% tall frame */
    background-position: center center; 
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    
    /* 
     * The magic: Since the box is 200% tall, its vertical center (50%) 
     * aligns PERFECTLY with the bottom edge (100%) of the parent offers_wrap!
     */
    transform-origin: center 50%; 
    transform: scale(var(--bomb-scale, 0.5));
    opacity: clamp(0.2, var(--bomb-scale, 0.5), 1);
    will-change: transform;
}
/* Ensure all content sits safely above the background layers */
#merch_main .offers_container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 80px; 
    box-sizing: border-box; 
}

#merch_main .offers_container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 80px; 
    box-sizing: border-box; 
}

#merch_main .offers_header {
    text-align: center;
    margin-bottom: 50px;
}

#merch_main .offers_title {
    color: var(--contrast); 
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 4rem);
    letter-spacing: 1.5px;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

#merch_main .offers_subtitle {
    color: var(--text); 
    opacity: 0.8; 
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    font-weight: 500;
    margin: 0;
}

#merch_main .offers_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

#merch_main .offer_card {
    background-color: var(--bg); 
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#merch_main .offer_card:hover {
    transform: translateY(-5px);
    /* Utilizes the exact same shadow variable as the cart dropdown for the intense glow */
    box-shadow: 0px 8px 25px 0px var(--shadow); 
}

/* Image and Fade Wrapper */
#merch_main .offer_img_wrap {
    width: 100%;
    height: 320px;
    position: relative;
    background-color: var(--info_bg); 
}

#merch_main .offer_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 
 * The magic gradient!
 * Fades from transparent to the dynamic background color. 
 */
#merch_main .offer_img_fade {
    position: absolute;
    bottom: -2px; 
    left: 0;
    width: 100%;
    height: 102px; 
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
    z-index: 1; 
}
#merch_main .offer_icon_ring {
    position: absolute;
    top: 260px; /* Shifted down to match the new 320px image height */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background-color: var(--bg); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Temporary placeholder until you have the real SVGs */
#merch_main .offer_icon_placeholder {
    width: 70px;
    height: 70px;
    border: 3px solid #8a3ab9;
    border-radius: 8px; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8a3ab9;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 1px;
}

#merch_main .offer_card_content {
    padding: 85px 25px 30px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    z-index: 1;
}

#merch_main .offer_card_title {
    color: var(--contrast); 
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    line-height: 1.2;
    min-height: 2.8rem; 
}

#merch_main .offer_card_desc {
    color: var(--text); 
    opacity: 0.8;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 25px 0;
    flex-grow: 1;
}

#merch_main .offer_link {
    color: #8a3ab9;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

#merch_main .offer_link_icon {
    width: 16px;
    height: 16px;
}

#merch_main .offer_link:hover {
    color: #feea04;
}

/* 
 * Stretches the link's clickable area to cover the entire offer card.
 * The parent (.offer_card) already has position: relative; so this works perfectly.
 */
#merch_main .offer_link::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}
@media (max-width: 1024px) {
    #merch_main .offers_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 600px) {
    #merch_main .offers_grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile 2-Column Grid Layout (Tall Aspect Ratio) */
@media (max-width: 768px) {
    #merch_main .offers_wrap {
        padding: 40px 0;
    }

    #merch_main .offers_container {
        padding: 0 12px;
    }

    #merch_main .offers_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 cards side-by-side */
        gap: 12px;
        max-width: 100%;
        margin: 0 auto;
    }

    #merch_main .offer_card {
        border-radius: 14px;
    }

    /* 
     * TALL CARD RATIO FIX: 
     * Keeps image tall (220px) so cards retain their portrait shape 
     */
    #merch_main .offer_img_wrap {
        height: 220px; 
    }

    /* Adjusts icon ring position to match the taller image frame */
    #merch_main .offer_icon_ring {
        top: 170px;
        width: 72px;
        height: 72px;
    }

    #merch_main .offer_icon_placeholder {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    /* Compact text layout */
    #merch_main .offer_card_content {
        padding: 42px 10px 16px 10px;
    }

    #merch_main .offer_card_title {
        font-size: 0.9rem;
        min-height: auto;
        margin-bottom: 6px;
        line-height: 1.15;
    }

    #merch_main .offer_card_desc {
        font-size: 0.72rem;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    #merch_main .offer_link {
        font-size: 0.72rem;
    }

    #merch_main .offer_link_icon {
        width: 12px;
        height: 12px;
    }

    /* Center-burst Color Bomb scaled for 2-column layout */
    #merch_main .offers_wrap::after {
        top: 0;
        height: 100%;
        background-position: center center;
        transform-origin: center center;
        transform: scale(calc(var(--bomb-scale, 0.5) * 1.6));
        opacity: clamp(0.6, var(--bomb-scale, 0.5), 1);
    }
}

/* 
 * =========================================
 * SECTION 04: READY-TO-PRESS DESIGNS
 * Theme-Aware (Light/Dark Mode)
 * =========================================
 */

#merch_main .ready_wrap {
    background-color: var(--bg); /* Flips based on theme */
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .ready_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* -- Header Typography -- */
#merch_main .ready_header {
    text-align: center;
    margin-bottom: 50px;
}

#merch_main .ready_kicker {
    color: #8c52ff; /* Purple for Light Mode */
    font-family: 'Inter', sans-serif;
    font-weight: 900; /* Bumped up to make it extra bold */
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    letter-spacing: 4px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

/* Flips the kicker to Yellow when Dark Mode is active */
html[data-theme="dark"] #merch_main .ready_kicker {
    color: #feea04; 
}

#merch_main .ready_title {
    color: var(--contrast); /* Automatically flips Black to White */
    font-family: 'Bebas Neue', sans-serif;
    font-style: italic; 
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 0.95;
    margin: 0 0 5px 0; /* Reduced from 20px to pull the description closer */
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .ready_desc {
    color: #808080; /* Static Gray for both modes */
    font-family: 'Inter', sans-serif;
    font-size: 1.0rem; /* Increased from 0.95rem */
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
}

/* -- Product Grid -- */
#merch_main .ready_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
    margin-bottom: 60px;
}

#merch_main .ready_card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: var(--bg);
    border-radius: 12px;
    border: 1px solid rgba(128, 128, 128, 0.2); /* Faint border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); /* Soft drop shadow */
    overflow: hidden; /* Clips the image inside the rounded corners */
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 
 * Light Mode (Default) Hover 
 * Applies the purple border and subtle purple glow
 */
#merch_main .ready_card:hover {
    transform: translateY(-5px);
    border-color: #8c52ff; 
    box-shadow: 0 8px 25px rgba(140, 82, 255, 0.15); 
}

/* 
 * Dark Mode Hover Override 
 * Removes the purple border and applies the intense theme shadow glow
 */
html[data-theme="dark"] #merch_main .ready_card:hover {
    border-color: rgba(128, 128, 128, 0.2); /* Resets to faint border to avoid yellow/purple clash */
    box-shadow: 0px 8px 25px 0px var(--shadow); 
}

#merch_main .ready_img_wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--info_bg);
    border-radius: 0; /* Resetting this so the parent card handles the rounding */
    overflow: hidden;
    margin-bottom: 0; /* Resetting margin so padding handles the spacing below */
}

#merch_main .ready_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

#merch_main .ready_card:hover .ready_img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

#merch_main .ready_card_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 20px; /* Gives the text breathing room inside the border */
    flex-grow: 1; /* Pushes the price to the bottom if title lengths vary */
}

#merch_main .ready_category {
    color: #808080; /* Gray category text */
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Automatically injects the slash before the category name */
#merch_main .ready_category::before {
    content: '/ ';
}

#merch_main .ready_card_title {
    color: var(--contrast);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 15px 0;
}

#merch_main .ready_price {
    color: #8c52ff; /* Purple price for light mode */
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
    margin-top: auto; 
}

/* Flips the price to Yellow when Dark Mode is active */
html[data-theme="dark"] #merch_main .ready_price {
    color: #feea04;
}

/* -- Standalone CTA Button -- */
#merch_main .ready_actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

#merch_main .ready_btn {
    background-color: #000000; /* Black button for Light Mode */
    color: #ffffff; /* White text for Light Mode */
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    padding: 16px 32px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease; /* Removed background-color transition */
    white-space: nowrap;
    border: none;
    box-sizing: border-box;
}

/* Flips to Yellow for Dark Mode to maintain theme consistency */
html[data-theme="dark"] #merch_main .ready_btn {
    background-color: #feea04;
    color: #000000;
}

/* Simple hover state: lift and purple outline */
#merch_main .ready_btn:hover {
    outline: 2px solid #570eef;
    outline-offset: 2px;
    transform: translateY(-2px); 
}

#merch_main .ready_btn .btn_icon {
    width: 22px;
    height: 22px;
}

/* -- Responsive Breakpoints -- */
@media (max-width: 1024px) {
    #merch_main .ready_grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cards per row on tablets */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #merch_main .ready_wrap {
        padding: 60px 0;
    }
    #merch_main .ready_grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cards side-by-side on mobile */
        gap: 15px;
    }
    #merch_main .ready_card_title {
        font-size: 0.85rem;
    }
    #merch_main .ready_price {
        font-size: 0.8rem;
    }
    #merch_main .ready_btn {
        width: 100%;
    }
}

/* 
 * =========================================
 * DTF TRANSFERS ORDER OPTIONS
 * Theme-aware background, flex grid, purple hover animations
 * =========================================
 */

#merch_main .dtf_wrap {
    background-color: #000000; /* Dark fallback */
    background-image: url('/assets/2026_08/dtf_transfers_bg_6a7dc4527e7e63_31423950_1920.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 80px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .dtf_container {
    max-width: 1750px;
    margin: 0 auto;
    width: 100%;
    padding: 0 80px; 
    box-sizing: border-box; 
}

#merch_main .dtf_header {
    text-align: center;
    margin-bottom: 50px;
}

#merch_main .dtf_header_badge {
    background-color: transparent; /* Removes the yellow box */
    color: #feea04; /* Brand yellow text */
    font-family: 'Bebas Neue', sans-serif; /* Matches the hero typography */
    font-style: italic;
    font-weight: normal;
    
    /* Dynamically scales from 3.5rem on mobile up to 5rem on desktop */
    font-size: clamp(3.5rem, 6vw, 5rem); 
    
    padding: 0; 
    margin-bottom: 0px; /* Tightens the vertical gap to sit flush above the H2 */
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block; 
    line-height: 1; /* Keeps the text block tightly spaced */
}

#merch_main .dtf_title {
    color: var(--contrast); 
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 4rem);
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    line-height: 1.0; 
}

#merch_main .dtf_subtitle {
    color: var(--text); 
    opacity: 0.8; 
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
}

/* 
 * Flexbox Grid: 3 on top row, 2 centered on bottom row!
 */
#merch_main .dtf_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

#merch_main .dtf_card {
    flex: 1 1 calc(33.333% - 25px); 
    min-width: 290px; 
    max-width: 420px; 
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); 
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
/* Lifts the card up 5 pixels and deepens the shadow on hover */
#merch_main .dtf_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* 
 * Image & Fade Handlers
 */
#merch_main .dtf_img_wrap {
    width: 100%;
    height: 250px;
    position: relative;
    background-color: var(--info_bg); 
}

#merch_main .dtf_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#merch_main .dtf_card_badge {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 48px;
    height: 48px;
    z-index: 5;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#merch_main .dtf_card_badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Standard Black Fade */
#merch_main .dtf_img_fade {
    position: absolute;
    bottom: -2px; 
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, transparent 0%, #000000 100%);
    z-index: 1;
}

/* 
 * The Hover Magic: An invisible purple fade sits on top, 
 * and becomes fully visible when you hover over the card! 
 */
#merch_main .dtf_img_fade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, #722bff 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#merch_main .dtf_card:hover .dtf_img_fade::after {
    opacity: 1;
}

/* 
 * Text Content Handlers
 */
#merch_main .dtf_card_content {
    background-color: #000000;
    padding: 20px 25px 30px 25px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    z-index: 2;
    transition: background-color 0.3s ease;
}

#merch_main .dtf_card:hover .dtf_card_content {
    background-color: #722bff; /* Background turns purple on hover */
}

#merch_main .dtf_card_title {
    color: #ffffff; 
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.3rem;
    font-style: italic;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    line-height: 1;
    letter-spacing: 0.5px;
}

#merch_main .dtf_card_desc {
    color: #8b919e; 
    opacity: 0.9;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 25px 0;
    flex-grow: 1;
    /* Added transition so the color changes smoothly */
    transition: color 0.3s ease, opacity 0.3s ease; 
}
/* Turns the subtext yellow when the card is hovered! */
#merch_main .dtf_card:hover .dtf_card_desc {
    color: #feea04;
    opacity: 1;
}

#merch_main .dtf_link {
    color: #ffffff; /* FIXED: Now default white text */
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease; 
}

#merch_main .dtf_link_icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 
 * Stretches the link's clickable area to cover the entire parent card.
 * The parent (.dtf_card) must have position: relative; for this to work.
 */
#merch_main .dtf_link::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}
/* 
 * Prevents absolutely positioned badges/icons from blocking clicks
 * allowing the stretched link ::after layer underneath to catch them.
 */
#merch_main .offer_icon_ring,
#merch_main .dtf_card_badge {
    pointer-events: none;
}
/* 
 * Responsive Breakpoints for DTF Transfers Block
 */
@media (max-width: 1024px) {
    #merch_main .dtf_grid {
        gap: 20px;
    }
    #merch_main .dtf_card {
        flex: 1 1 calc(50% - 20px); 
    }
}

/* Mobile 2-Column Grid Layout (Sleek Portrait Cards) */
@media (max-width: 768px) {
    #merch_main .dtf_wrap {
        padding: 40px 0;
    }

    #merch_main .dtf_container {
        padding: 0 12px; /* Tightens container edges for max screen space */
    }

    #merch_main .dtf_header {
        margin-bottom: 30px;
    }

    #merch_main .dtf_grid {
        gap: 12px; /* Compact gap between side-by-side cards */
    }

    #merch_main .dtf_card {
        /* Forces 2 cards per row on mobile screens */
        flex: 1 1 calc(50% - 6px); 
        min-width: 0; 
        max-width: 100%;
        border-radius: 12px;
    }

    /* Scales down image wrapper height to keep vertical ratio balanced */
    #merch_main .dtf_img_wrap {
        height: 160px; 
    }

    /* Adjusts corner badge scale for compact mobile cards */
    #merch_main .dtf_card_badge {
        top: 10px;
        left: 10px;
        width: 36px;
        height: 36px;
    }

    /* Compact text content area */
    #merch_main .dtf_card_content {
        padding: 16px 12px 20px 12px;
    }

    #merch_main .dtf_card_title {
        font-size: 1.4rem;
        margin-bottom: 6px;
        line-height: 1.0;
    }

    #merch_main .dtf_card_desc {
        font-size: 0.75rem;
        line-height: 1.35;
        margin-bottom: 14px;
    }

    #merch_main .dtf_link {
        font-size: 0.72rem;
        letter-spacing: 0.5px;
    }

    #merch_main .dtf_link_icon {
        width: 14px;
        height: 14px;
    }
}
/* 
 * =========================================
 * SECTION 09: FREE SAMPLE BLOCK
 * =========================================
 */

#merch_main .sample_wrap {
    background-color: #111111;
    background-image: url('/assets/2026_09/free_sample_section_bg_v5_6a9ae4a1824ef6_02872656_1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .sample_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center; /* Changed back from flex-start to center */
}

/* -- Visual / Image -- */
#merch_main .sample_visual {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Added scale(1.1) to make the whole heatpress graphic pop a bit larger */
    transform: translateY(40px) scale(1.1); 
}

#merch_main .sample_img {
    width: 100%;
    max-width: 700px; /* Bumped up from 600px */
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
}

#merch_main .sample_visual:hover .sample_img {
    transform: scale(1.03) translateY(-5px);
}

/* -- Content & Typography -- */
#merch_main .sample_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

#merch_main .sample_kicker {
    color: #feea04;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing: 4px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

#merch_main .sample_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 0.95;
    margin: 0 0 10px 0; /* Reduced from 20px to pull the description closer */
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .sample_title .highlight {
    color: #feea04;
    font-style: italic;
}

#merch_main .sample_desc {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 40px 0; /* Increased significantly to make room for the pop-out envelope */
    max-width: 550px;
}

/* -- Highlight Box -- */
#merch_main .sample_feature_box {
    background-color: rgba(34, 34, 34, 0.85); /* Updated per designer */
    border: 1px solid #8B919E; /* Updated per designer */
    padding: 20px 30px;
    border-radius: 12px;
    margin-bottom: 40px;
    display: flex;
    align-items: center; 
    gap: 20px; 
    overflow: visible; /* Keeps the envelope breaking out */
}

/* Styles for the envelope */
#merch_main .sample_feature_img {
    width: 210px; /* Made the image larger */
    height: auto;
    flex-shrink: 0; 
    
    /* Top: -75px (breaks out top significantly)
       Right: 0 
       Bottom: -20px (flush with bottom border)
       Left: -25px (keeps it 5px tucked INSIDE the left border) */
    margin: -75px 0 -20px -25px; 
    
    align-self: flex-end; /* Keeps the base pinned to the bottom */
    
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)); 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    position: relative;
    z-index: 2; 
    
    transform-origin: bottom center; /* Locks the base during animation */
}

/* Hover state: grows upward and slides left to break out of the box */
#merch_main .sample_feature_box:hover .sample_feature_img {
    transform: scale(1.12) translateX(-8px); 
}

#merch_main .sample_feature_text h4 {
    color: #feea04; /* Switched to Yellow */
    font-family: 'Bebas Neue', sans-serif; /* Matched to main headers */
    font-size: 1.6rem;
    font-style: italic; /* Added italic */
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 4px 0;
    line-height: 1.1;
}

#merch_main .sample_feature_text p {
    color: #ffffff; /* Switched to White */
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

/* -- CTA Button (Decoupled, no shrinking) -- */
#merch_main .sample_btn {
    background-color: #feea04;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    padding: 18px 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    border: none;
    box-sizing: border-box;
}

#merch_main .sample_btn:hover {
    outline: 2px solid #570eef; /* Adds the purple outline */
    outline-offset: 2px;
    transform: translateY(-2px);
}
/* -- Responsive Breakpoints -- */
@media (max-width: 1024px) {
    #merch_main .sample_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    /* This magic property flattens the div so we can mix its children with the image */
    #merch_main .sample_content {
        display: contents; 
    }

    /* Assigning the exact visual order for mobile/tablet */
    #merch_main .sample_kicker { order: 1; }
    #merch_main .sample_title { order: 2; margin-bottom: 10px; }
    
    #merch_main .sample_desc { 
        order: 3; 
        margin-bottom: 20px; 
    }
    
    /* Tucks the heat press right between the description and the box! */
    #merch_main .sample_visual { 
        order: 4; 
        transform: translateY(0); /* Removes the downward nudge from desktop */
        margin: 20px 0 40px 0;
    }
    
    #merch_main .sample_feature_box { 
        order: 5; 
        text-align: left; /* Keeps the box text aligned left even when the rest is centered */
    }
    
    #merch_main .sample_actions { order: 6; }
}

@media (max-width: 768px) {
    #merch_main .sample_wrap {
        padding: 60px 0;
    }
    
    #merch_main .sample_btn {
        width: 100%;
        font-size: 1.1rem;
    }

    /* Tucks the envelope inside the box on small screens to prevent side-scrolling */
    #merch_main .sample_feature_box {
        flex-direction: column;
        padding: 40px 20px 20px 20px;
        text-align: center;
        gap: 15px;
    }
    
    #merch_main .sample_feature_img {
        margin: -70px 0 0 0; /* Resets the left break-out, keeps it popping out the top */
        align-self: center;
    }
    
    #merch_main .sample_feature_text h4 {
        text-align: center;
    }
}
/* 
 * =========================================
 * SECTION 05: PRODUCT PROOF
 * =========================================
 */

#merch_main .proof_wrap {
    background-color: #570eef; /* Purple fallback */
    background-image: url('/assets/2026_08/product_proof_bg_6a905ac418bc45_91991304_1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .proof_container {
    display: grid;
    
    /* FIX: Creates two precise columns matching your content, and centers them perfectly in the screen */
    grid-template-columns: minmax(auto, 650px) minmax(auto, 360px);
    justify-content: center; 
    
    gap: 80px; /* Adjust this to push the columns closer together or further apart */
    align-items: center;
    max-width: 1750px; 
    width: 100%;
    margin: 0 auto;
    padding: 0 40px; 
    box-sizing: border-box;
}

/* Left Column Styling */
#merch_main .proof_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Removed justify-self and max-width since the grid handles it now! */
}

/* -- TITLE TYPOGRAPHY FIXES -- */
#merch_main .proof_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-style: normal; /* FIX: Removes italics from "See What" and "Looks Like" */
    font-size: clamp(3rem, 5vw, 4rem); 
    line-height: 0.85;
    margin: 0 0 25px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .proof_title .highlight {
    color: #feea04;
    font-style: italic; 
    font-size: clamp(3.5rem, 6vw, 5rem); 
    letter-spacing: 2px;
    line-height: 0.85;
    display: inline-block; 
    margin: 0; 
}

#merch_main .proof_desc {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 500px;
}
#merch_main .proof_desc strong,
#merch_main .proof_desc em {
    font-family: 'Inter', sans-serif;
    font-weight: 900; 
    font-style: oblique;    
    letter-spacing: 0.5px; 
}

/* -- FEATURE BOXES FIXES -- */
#merch_main .proof_features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 330px)); 
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 40px;
}

#merch_main .proof_feature_box {
    background-color: rgba(76, 21, 119, 0.7); 
    border-radius: 12px;
    padding: 12px 20px; 
    display: flex;
    align-items: center;
    
    /* FIX: Centers the icon and text group inside the purple box */
    justify-content: center; 
    
    gap: 15px;
    text-align: left; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#merch_main .proof_feature_box:hover {
    background-color: rgba(114, 43, 255, 0.7); /* Precise Hover RGBA */
    transform: translateY(-2px);
}

#merch_main .proof_feature_icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

#merch_main .proof_feature_text h4 {
    color: #feea04;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem; 
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
}

#merch_main .proof_feature_text p {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem; /* FIX: Increased from 0.75rem */
    opacity: 0.9;
    margin: 0;
    line-height: 1.4;
}

/* Right Column Video Wrap */
#merch_main .proof_video_wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    /* Removed justify-self here too! */
}

#merch_main .video_placeholder {
    position: relative;
    width: 100%;
    max-width: 360px; /* Forces a tall mobile ratio */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

#merch_main .video_img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

#merch_main .video_placeholder:hover .video_img {
    transform: scale(1.03);
}

/* -- PLAY BUTTON FIXES -- */
#merch_main .play_overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px; 
    height: 75px;
    /* FIX: Changed to a solid, sleek dark gray matching the mockup */
    background-color: rgba(35, 35, 35, 0.9); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

#merch_main .video_placeholder:hover .play_overlay {
    /* FIX: Now uses a sleek, 75% translucent black on hover */
    background-color: rgba(0, 0, 0, 0.75); 
    transform: translate(-50%, -50%) scale(1.05);
}

#merch_main .play_icon {
    width: 32px;
    height: 32px;
    
    /* FIX: Reset to 0 (or try -2px) to optically center the SVG triangle */
    margin-left: 0; 
}

/* -- Product Proof Button Hover -- */
/* Uses a deep, darker purple outline to contrast against the purple background */
#merch_main .proof_btn:hover {
    outline: 2px solid #2e0782; 
    outline-offset: 2px;
    transform: translateY(-2px);
}

/* Responsive Scaling */
@media (max-width: 1024px) {
    #merch_main .proof_container {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 0;
    }
    
    /* FIX: Dissolves the left wrapper so we can interleave the video */
    #merch_main .proof_content {
        display: contents; 
    }
    
    /* FIX: Reorders everything logically top-to-bottom */
    #merch_main .proof_title { 
        order: 1; 
    }
    
    #merch_main .proof_desc { 
        order: 2; 
        margin: 0 auto 40px auto; /* Centers the text block perfectly */
    }
    
    /* Tucks the video exactly between the description and the feature boxes */
    #merch_main .proof_video_wrap { 
        order: 3; 
        margin-bottom: 40px; 
        width: 100%;
    }
    
    #merch_main .proof_features { 
        order: 4; 
        margin: 0 auto 40px auto; 
        grid-template-columns: 1fr; /* Stacks the feature boxes in a single column */
        max-width: 330px; /* Keeps them from stretching too wide on iPads */
    }
    
    #merch_main .proof_btn { 
        order: 5; 
        margin: 0 auto; 
    }
}
/* 
 * =========================================
 * SECTION 06: COLOR COMPARISON SLIDER
 * =========================================
 */

#merch_main .compare_wrap {
    background-color: #111111;
    background-image: url('/assets/2026_08/color_comparison_bg_6a7f01cb6cbf44_97452884_1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .compare_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* -- Header Typography -- */
#merch_main .compare_kicker {
    color: #ffffff; 
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: clamp(0.85rem, 2vw, 1.3rem); 
    letter-spacing: 4px; /* Increased letter spacing */
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

#merch_main .compare_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 0.9;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .compare_title .highlight {
    color: #feea04;
    font-style: italic;
}

#merch_main .compare_desc {
    color: #a0a0a0; 
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem; /* Reduced to match standard DTF subtext size */
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

#merch_main .compare_desc strong {
    color: #ffffff;
}

/* -- Comparison Capsules (Labels) -- */
#merch_main .compare_capsules {
    display: flex;
    justify-content: space-between; /* Pushes the capsules apart */
    width: 100%;
    max-width: 800px; /* Constrains the width so they hover over their respective halves */
    margin: 0 auto 20px auto; /* Centers the container */
    padding: 0 20px;
    box-sizing: border-box;
}

#merch_main .capsule {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px 24px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none; /* Resets default button styling */
    cursor: pointer; /* Gives the user a hand icon to indicate clickability */
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Adds a nice little pop when they hover over the buttons */
#merch_main .capsule:hover {
    transform: scale(1.05);
}

#merch_main .capsule_standard {
    background-color: #ffffff;
    color: #000000;
}

#merch_main .capsule_expanded {
    background-color: #8c52ff;
    color: #ffffff;
}

/* -- Interactive Slider Magic -- */
#merch_main .compare_slider_wrap {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Widened to show the full uncropped image */
    aspect-ratio: 2 / 1; /* Adjusted ratio to reveal the fabric on the sides */
    border: 3px solid #33343b; /* Thick gray border added */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background-color: #000;
}

#merch_main .compare_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#merch_main .compare_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The magic clip-path that reveals the top image based on the slider variable */
#merch_main .compare_overlay {
    clip-path: polygon(0 0, var(--position) 0, var(--position) 100%, 0 100%);
}

/* The visual slider line and handle */
#merch_main .slider_line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--position);
    width: 4px;
    background-color: #ffffff; /* Changed to white to match new design */
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10;
}

#merch_main .slider_handle {
    position: absolute;
    top: 50%;
    left: var(--position);
    width: 48px;
    height: 48px;
    background-color: #ffffff; /* Changed to white to match new design */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 10;
}
/* 
 * Smooth Slide Animation 
 * Applied via JS only on button click so manual dragging stays instant 
 */
#merch_main .compare_slider_wrap.animate_slide .compare_overlay {
    transition: clip-path 0.5s ease-in-out;
}

#merch_main .compare_slider_wrap.animate_slide .slider_line,
#merch_main .compare_slider_wrap.animate_slide .slider_handle {
    transition: left 0.5s ease-in-out;
}

#merch_main .slider_handle svg {
    width: 18px;
    height: 18px;
    color: #8c52ff; /* Purple arrows to match design */
}

/* The actual interactive input element (invisible but draggable) */
#merch_main .compare_range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 20;
    margin: 0;
}

/* -- Features Row -- */
#merch_main .compare_features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 80px; /* Increased horizontal gap for stacking */
    margin-bottom: 60px;
}

#merch_main .comp_feat_item {
    display: flex;
    flex-direction: column; /* Stacks icon on top of text */
    align-items: center;
    gap: 16px;
}

#merch_main .comp_feat_item span {
    color: #ffffff;
    font-family: 'Inter', sans-serif; /* Adjusted font family */
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Styling for the new color SVGs */
#merch_main .comp_feat_icon {
    height: 40px; /* Forces all icons to share the same height */
    width: auto;  /* Width scales proportionally based on their unique viewBox */
    display: block;
}

/* -- Call To Action -- */
#merch_main .compare_cta {
    background-color: #8c52ff; /* Switched to purple */
    color: #ffffff;
    font-family: 'Inter', sans-serif;
}

#merch_main .compare_cta:hover {
    background-color: #7a45e6;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    #merch_main .compare_features {
        gap: 40px;
    }
    
    #merch_main .compare_slider_wrap {
        aspect-ratio: 4/5;
    }
    
    #merch_main .capsule {
        font-size: 0.75rem;
        padding: 8px 16px;
    }

    #merch_main .comp_feat_item span {
        color: #ffffff;
        font-family: 'Inter', sans-serif; /* Adjusted font family */
        font-weight: 700;
        font-size: 0.8rem;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }
}

/* 
 * =========================================
 * SECTION 07: PAIN & REASSURANCE BLOCK
 * =========================================
 */

#merch_main .pain_wrap {
    background-color: #0d0d0d;
    background-image: url('/assets/2026_08/tshirt_bg_6a859c4f8ae026_57050405_1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .pain_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* -- Header Typography -- */
#merch_main .pain_header {
    text-align: center;
    margin-bottom: 60px;
}

#merch_main .pain_kicker {
    color: #feea04; 
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    /* Matched to the comparison block kicker */
    font-size: clamp(0.85rem, 2vw, 1.3rem); 
    letter-spacing: 4px; 
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

#merch_main .pain_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 0.95;
    margin: 0 0 25px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .pain_title .highlight {
    color: #feea04;
    font-style: italic;
}

#merch_main .pain_desc {
    color: #a0a0a0;
    font-family: 'Inter', sans-serif;
    /* Matched exactly to the comparison block description */
    font-size: 0.95rem; 
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
}

/* -- Pain Points Grid -- */
#merch_main .pain_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1100px;
    margin-bottom: 60px;
}

#merch_main .pain_card {
    background-color: #313136; 
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1); 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    /* Added smooth transitions for the hover effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* New Hover State for Pain Cards */
#merch_main .pain_card:hover {
    /* Lifts the card slightly and scales it up 2% for that zoom effect */
    transform: translateY(-5px) scale(1.02); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); /* Deepens the shadow to match the lift */
}

#merch_main .pain_img_wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

#merch_main .pain_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#merch_main .pain_card_body {
    padding: 25px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#merch_main .pain_card_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 1px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

#merch_main .pain_icon {
    width: 26px; 
    height: 26px;
    flex-shrink: 0;
}

#merch_main .pain_card_desc {
    color: #a0a0a0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* -- Reassurance Banner -- */
#merch_main .reassure_banner {
    width: 100%;
    max-width: 1100px;
    background-color: #340c4f;
    background-image: url('/assets/2026_08/cta_bg_6a85a05fcc4088_29115184_1200.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 45px 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* Brings the left text block and right button toward the center */
    align-items: center;
    gap: 60px; /* Controls the exact distance between the text and button */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

#merch_main .reassure_content {
    text-align: center; /* Centers the text lines relative to each other */
}

#merch_main .reassure_kicker {
    color: #feea04;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-style: italic;
    /* Increased the bounds so it scales from 1.5rem up to 2rem */
    font-size: clamp(1.5rem, 3vw, 2rem); 
    letter-spacing: 2px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

#merch_main .brand_svg_143 {
    height: 3.2rem; /* Increased height to match the larger text */
    width: auto;
    margin: 0 10px; /* Slight bump to margins for the larger size */
}

#merch_main .reassure_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3rem); /* Tweaked to match the visual weight */
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .reassure_btn {
    background-color: #feea04;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    padding: 16px 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    border: none;
    box-sizing: border-box;
}

/* -- Reassurance Button Arrow -- */
#merch_main .btn_icon_circle {
    width: 27px;
    height: 27px;
}

#merch_main .reassure_btn:hover,
#merch_main .reassure_btn:active {
    outline: 2px solid #570eef;
    outline-offset: 2px;
    transform: translateY(-2px);
}

/* -- Responsive Breakpoints -- */
@media (max-width: 1024px) {
    #merch_main .pain_grid {
        gap: 20px;
    }
    
    #merch_main .reassure_banner {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 40px 30px;
    }
    
    #merch_main .reassure_content {
        text-align: center;
    }

    #merch_main .reassure_kicker {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    #merch_main .pain_grid {
        grid-template-columns: 1fr;
        max-width: 450px;
    }

    #merch_main .pain_wrap {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    #merch_main .pain_grid {
        grid-template-columns: 1fr;
        max-width: 450px;
    }

    #merch_main .pain_wrap {
        padding: 60px 0;
    }

    /* Reassurance Banner Mobile Fixes */
    #merch_main .reassure_banner {
        padding: 30px 16px;
    }

    #merch_main .reassure_kicker {
        font-size: clamp(1rem, 4.5vw, 1.3rem);
        flex-wrap: wrap; /* Allows text to wrap gracefully on tiny screens */
        gap: 4px;
    }

    #merch_main .brand_svg_143 {
        height: 2.2rem; /* Scaled down for mobile screens */
        margin: 0 4px;
    }

    #merch_main .reassure_title {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }

    #merch_main .reassure_btn {
        font-size: 1rem; /* Scaled down from fixed 1.4rem */
        padding: 12px 20px;
        width: 100%; /* Spans full width on mobile for easy tapping */
    }

    #merch_main .btn_icon_circle {
        width: 20px;
        height: 20px;
    }
}

/* 
 * =========================================
 * SECTION 08: SIMPLE PROCESS BLOCK
 * =========================================
 */

#merch_main .process_wrap {
    background-color: #0d0d0d;
    background-image: url('/assets/2026_08/process_bg_6a87156bdac168_61112436_1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .process_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* -- Header Typography -- */
#merch_main .process_header {
    text-align: center;
    margin-bottom: 60px;
}

#merch_main .process_kicker {
    color: #feea04;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.5rem); /* Matches other kickers */
    letter-spacing: 4px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

#merch_main .process_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 4.5rem); /* Matches other main titles */
    line-height: 0.95;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Turns the spanned text yellow */
#merch_main .process_title .highlight {
    color: #feea04; 
}

#merch_main .process_desc {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
}

/* -- Process Grid & Cards -- */
#merch_main .process_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    width: 100%;
    max-width: 1100px;
    margin-bottom: 50px;
}

#merch_main .process_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#merch_main .process_img_wrap {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin-bottom: 25px;
    /* Added transitions for smooth hover effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Lifts and slightly scales the image and badge together on card hover */
#merch_main .process_card:hover .process_img_wrap {
    transform: translateY(-5px) scale(1.03); 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); 
}

#merch_main .process_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* Ensures clipping if the PNGs aren't strictly circular */
    display: block;
}

/* Precisely positions the larger yellow SVG numbers overlapping the circle */
#merch_main .process_badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 95px; /* Increased significantly from 65px */
    height: auto;
    z-index: 5;
    transform: translate(-15%, -15%); /* Adjusted pull to account for the larger size */
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.4));
}

#merch_main .process_card_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

#merch_main .process_card_desc {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    max-width: 320px;
}

/* -- Process Actions (Buttons) -- */
#merch_main .process_actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

/* Decoupled base button styling with fixed sizes */
#merch_main .process_btn {
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    display: flex;
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem; /* Fixed font size, no shrinking! */
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 16px 32px; /* Fixed padding */
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}

#merch_main .process_btn:hover {
    transform: translateY(-2px); /* Smooth lift, no text shifting */
}

/* Yellow Button */
#merch_main .process_btn_yellow {
    background-color: #feea04;
    color: #000000;
    border: none;
}

/* Yellow Button Hover - Purple Outline */
#merch_main .process_btn_yellow:hover {
    outline: 2px solid #570eef;
    outline-offset: 2px;
}

/* Dark Button */
#merch_main .process_btn_dark {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #570eef;
}

/* Dark Button Hover - Yellow Border */
#merch_main .process_btn_dark:hover {
    border-color: #feea04; 
}

/* Icons inside the standalone buttons */
#merch_main .process_btn .btn_icon {
    width: 22px;
    height: 22px;
    margin-left: 8px;
}

#merch_main .process_btn .btn_icon_bolt {
    width: 18px;
    height: 22px;
    margin-left: 8px;
}

/* -- Responsive Breakpoints -- */
@media (max-width: 1024px) {
    #merch_main .process_grid {
        gap: 30px;
    }
    #merch_main .process_badge {
        width: 75px; /* Scaled down for tablets */
        transform: translate(-10%, -10%);
    }
}

@media (max-width: 768px) {

    #merch_main .process_actions {
        flex-direction: column;
        max-width: 400px;
    }
    
    #merch_main .process_btn {
        width: 100%; /* Forces both buttons to span full width on mobile */
    }
    #merch_main .process_wrap {
        padding: 60px 0;
    }
    #merch_main .process_grid {
        grid-template-columns: 1fr;
        gap: 60px;
        max-width: 400px;
    }
    #merch_main .process_badge {
        width: 65px; /* Scaled down for mobile */
    }
    #merch_main .process_actions {
        flex-direction: column;
        max-width: 400px;
    }
    #merch_main .process_actions .btn_gang,
    #merch_main .process_actions .btn_single {
        width: 100%; 
        box-sizing: border-box;
    }
}

/* 
 * =========================================
 * SECTION 11: PRICE & VALUE BLOCK
 * =========================================
 */

#merch_main .pv_wrap {
    background-color: #570eef;
    background-image: url('/assets/2026_09/price_and_value_bg_6a997ee5eb1576_66891850_1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .pv_container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1.2fr; 
    gap: 80px;
    align-items: center;
}

/* -- Visual & Animation -- */
#merch_main .pv_visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

#merch_main .pv_main_img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    filter: drop-shadow(0 25px 45px rgba(0,0,0,0.6));
    animation: float_shirt 6s ease-in-out infinite; 
}

@keyframes float_shirt {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* -- Typography -- */
#merch_main .pv_content {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
}

#merch_main .pv_kicker {
    color: #feea04;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing: 4px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

#merch_main .pv_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 0.95;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .pv_title .highlight {
    color: #feea04;
    font-style: italic; /* Keeps the slant only on the yellow price! */
}

#merch_main .pv_desc {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 auto 40px auto; 
    max-width: 600px;
}

/* -- Horizontal Cards Stack -- */
#merch_main .pv_cards_stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
}

/* Remove browser focus outline on the stretched link */
#merch_main .pv_link,
#merch_main .pv_link:focus,
#merch_main .pv_link:hover,
#merch_main .pv_link::after {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Base Card */
#merch_main .pv_card {
    display: flex;
    flex-direction: row;
    background-color: #000000;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05); 
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
    min-height: 200px;
    
    /* Anti-Flicker Fix for webkit browsers */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Triggers the whole card to lift up smoothly (No Zoom) */
#merch_main .pv_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border-color: transparent; /* Hides border to prevent artifacts */
}

/* Left Side: Text Content */
#merch_main .pv_card_content {
    flex: 1; 
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background-color: #000000;
    z-index: 2;
    transition: background-color 0.3s ease;
}

/* Triggers the purple background on hover */
#merch_main .pv_card:hover .pv_card_content {
    background-color: #722bff; 
}

/* Card Typography */
#merch_main .pv_card_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.1rem;
    font-style: italic;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    line-height: 1;
    letter-spacing: 0.5px;
}

#merch_main .pv_card_desc {
    color: #8b919e;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 20px 0;
    transition: color 0.3s ease;
}

/* Triggers the yellow text on hover */
#merch_main .pv_card:hover .pv_card_desc {
    color: #feea04; 
}

/* Link / Button Styling */
#merch_main .pv_link {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Adds the nice text spacing! */
    display: flex;
    align-items: center;
    gap: 9px;
    align-self: flex-end; 
    margin-top: auto; 
    text-decoration: none; 
}

/* Stretches the clickable link over the WHOLE card invisibly */
#merch_main .pv_link::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 20; 
}

#merch_main .pv_link_icon {
    width: 20px;
    height: 20px;
}

/* Right Side: Image wrapper */
#merch_main .pv_img_wrap {
    flex: 1; 
    position: relative;
    background-color: var(--info_bg);
    overflow: hidden; 
}

/* Image inside the cards */
#merch_main .pv_card_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}

/* Floating DTF Badge positioned in the lower right */
#merch_main .pv_badge {
    position: absolute;
    bottom: 15px; 
    right: 15px;
    width: 55px; 
    height: 55px;
    z-index: 5;
    pointer-events: none; 
}

#merch_main .pv_badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Horizontal Gradient Fade (Black Default) */
#merch_main .pv_img_fade {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px; /* Pulled 1px further left to completely kill the hard seam */
    width: 180px; /* Increased from 100px for a much smoother, longer fade */
    background: linear-gradient(to right, #000000 0%, transparent 100%);
    z-index: 1;
}

/* Horizontal Gradient Fade (Purple Hover Overlay) */
#merch_main .pv_img_fade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #722bff 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Triggers the purple fade over the image edge on hover */
#merch_main .pv_card:hover .pv_img_fade::after {
    opacity: 1;
}

/* Mobile Responsive View */
@media (max-width: 1024px) {
    #merch_main .pv_container {
        grid-template-columns: 1fr; 
        text-align: center;
        gap: 50px;
    }
    
    #merch_main .pv_main_img {
        max-width: 450px; 
    }
}

/* Mobile Responsive View (Kept Horizontal!) */
@media (max-width: 768px) {
    #merch_main .pv_wrap {
        padding: 60px 0;
    }

    /* Keep the card horizontal, just lower the minimum height */
    #merch_main .pv_card {
        min-height: 140px;
    }
    
    /* Shrink the padding to give the text more room to breathe */
    #merch_main .pv_card_content {
        padding: 15px;
    }
    
    /* Scale down the typography for mobile */
    #merch_main .pv_card_title {
        font-size: 1.4rem;
        margin-bottom: 6px;
    }
    
    #merch_main .pv_card_desc {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: 12px;
    }
    
    #merch_main .pv_link {
        font-size: 0.7rem;
    }
    
    #merch_main .pv_link_icon {
        width: 14px;
        height: 14px;
    }
    
    /* Shrink the DTF badge and tuck it tighter into the corner */
    #merch_main .pv_badge {
        width: 35px; 
        height: 35px;
        bottom: 10px;
        right: 10px;
    }

    /* Shorten the gradient fade slightly so it doesn't swallow the smaller image */
    #merch_main .pv_img_fade {
        width: 60px;
    }
}

/* 
 * =========================================
 * SECTION 12: REVIEWS BLOCK (SEPARATED)
 * =========================================
 */

#merch_main .reviews_wrap {
    background-color: #1a0a2e;
    background-image: url('/assets/2026_09/reviews_bg_6a9ab1fcd2ec38_94494446_1920.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#merch_main .reviews_container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* -- Header Section -- */
#merch_main .reviews_header_block {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#merch_main .reviews_kicker {
    color: #feea04;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing: 4px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

#merch_main .reviews_title {
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 0.95;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .reviews_title .highlight {
    color: #feea04;
    font-style: italic;
}

#merch_main .reviews_desc {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 600px;
}

/* -- Text Reviews Grid (Top Row) -- */
#merch_main .reviews_text_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

#merch_main .review_text_card {
    background-color: #3b3b42; /* The exact gray from your mockup */
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Meta Data (Avatar, Name, Stars) */
#merch_main .review_meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 25px; 
    position: relative;
}

/* The edge-to-edge dark gray dividing line */
#merch_main .review_meta::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -30px; 
    right: -30px; 
    height: 1px; 
    background-color: rgba(0, 0, 0, 0.35); /* Subtle dark gray line */
}

#merch_main .review_avatar {
    width: 50px;
    height: 50px;
    background-color: #8c52ff;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    flex-shrink: 0;
}

#merch_main .review_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Forces the name, stars, and date perfectly flush left */
}

#merch_main .review_name {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: none; /* Keeps standard Title Case formatting */
    line-height: 1.2;
}

#merch_main .review_stars {
    height: 14px;
    width: auto;
    margin: 5px 0;
    display: block;
    margin-left: -2px; /* Pulls the SVG slightly left to eliminate invisible padding */
}

/* Instant Yellow CSS trick for the SVG */
#merch_main .yellow_stars {
    filter: invert(79%) sepia(85%) saturate(718%) hue-rotate(352deg) brightness(101%) contrast(104%);
}

#merch_main .review_date {
    color: #a0a5b1;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
}

#merch_main .review_text {
    color: #d1d1d1;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* -- Shared Link Styling (Mid and Bottom) -- */
#merch_main .reviews_link_wrap {
    text-align: center;
    margin: 20px 0 40px 0;
}

#merch_main .reviews_link {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

#merch_main .reviews_link:hover {
    color: #feea04;
}

#merch_main .link_icon {
    width: 18px;
    height: 18px;
}

/* -- Image Reviews Grid (Bottom Row) -- */
#merch_main .reviews_image_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

#merch_main .review_img_card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    aspect-ratio: 4 / 3; 
}

#merch_main .review_img_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

#merch_main .review_img_card:hover img {
    transform: scale(1.05);
}

/* -- Bottom CTA Banner (New Design) -- */
#merch_main .reviews_cta_banner {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5); 
    border: 1px solid #722bff;
    border-radius: 12px;
    margin: 120px auto 0 auto; 
    padding: 50px 100px 50px 40px; 
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    /* Reduced from 1150px to 950px to pull the text and image closer together */
    max-width: 950px; 
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Character Overlap */
#merch_main .reviews_cta_visual {
    position: absolute;
    /* Pushed right so it sits completely inside the left purple line */
    left: 20px; 
    bottom: 0; 
    /* Slightly reduced width so she fits the tighter spacing */
    width: 480px; 
    z-index: 2;
    pointer-events: none;
}
#merch_main .reviews_cta_img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
}

/* Right Side Text Block */
#merch_main .reviews_cta_content {
    text-align: center;
    /* Increased from 50% to 55% so text doesn't cramp */
    width: 55%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

#merch_main .reviews_cta_title {
    color: #feea04;
    font-family: 'Bebas Neue', sans-serif;
    /* Forces the browser to stop artificially bolding the font! */
    font-weight: 400; 
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-style: italic;
    line-height: 1;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#merch_main .reviews_cta_subtitle {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0 0 25px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#merch_main .reviews_btn_yellow {
    background-color: #feea04;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 14px 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
/* The large curved yellow arrow */
#merch_main .cta_floating_arrow {
    position: absolute;
    /* Increased from 30px to 55px to push it closer to the button */
    right: 55px; 
    top: 55%; 
    transform: translateY(-50%); 
    width: 90px; 
    z-index: 10;
    pointer-events: none; 
}

/* Targets the new purple arrow SVG */
#merch_main .btn_icon_purple {
    width: 24px;
    height: 24px;
    /* Ensures it stays purple just in case the SVG code isn't pre-colored */
    color: #722bff; 
    fill: #722bff;
}
#merch_main .reviews_btn_yellow:hover {
    transform: translateY(-2px);
    background-color: #ffffff;
}

/* Targets the SVG icon to make it purple like the design */
#merch_main .btn_icon_purple {
    width: 20px;
    height: 20px;
    color: #722bff; /* Forces the inner icon color to purple */
    fill: #722bff;
}

/* -- Responsive Breakpoints -- */
@media (max-width: 1024px) {
    #merch_main .reviews_text_grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    #merch_main .reviews_image_grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    /* Keep the wrapper and grids! */
    #merch_main .reviews_wrap {
        padding: 60px 0;
    }
    
    #merch_main .reviews_text_grid,
    #merch_main .reviews_image_grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        max-width: 450px;
        margin: 0 auto 30px auto;
    }

    /* New Banner Mobile Adjustments */
    #merch_main .reviews_cta_banner {
        flex-direction: column;
        justify-content: center;
        margin-top: 160px; /* Lots of space for the character to sit on top */
        padding: 120px 20px 40px 20px;
    }

    #merch_main .reviews_cta_visual {
        left: 50%;
        bottom: auto;
        top: -120px; /* Pops the character out the top of the box on mobile */
        transform: translateX(-50%);
        width: 260px;
    }

    #merch_main .reviews_cta_content {
        width: 100%;
        text-align: center;
    }
    
    /* Keep the button full-width on mobile */
    #merch_main .reviews_btn_yellow {
        width: 100%;
        box-sizing: border-box;
    }
}
/* 
 * =========================================
 * FOOTER STYLES
 * =========================================
 */

/* 
 * Main Footer Background
 * Uses the official background photo and ensures it scales to fit any screen
 */
#merch_footer {
    background-image: url('https://dev.143transfers.com/assets/2026_07/footer_bg_6a6c85d0185702_67791439_1920_1920.jpg'); 
    background-size: cover; 
    background-position: center left; 
    background-repeat: no-repeat;
    color: #ffffff;
    border-top: none;
    padding: 60px 20px; 
}

/* 
 * Sub-Footer Background (Copyright & Payments row)
 * Solid black to anchor the bottom of the page.
 */
#sub_footer,
.sub_footer_wrap {
    background-color: #000000;
    color: #ffffff;
    border-top: none;
    padding: 15px 20px;
}
/* 
 * =========================================
 * FOOTER GRID & TYPOGRAPHY
 * =========================================
 */
.brand_col {
    padding-left: 70px; 
}
.footer_grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    gap: 30px;
    max-width: 1750px;
    margin: 0 auto; 
}

.footer_col h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.50rem; 
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 25px; 
    text-transform: uppercase;
}

.footer_desc,
.newsletter_col p {
    font-family: 'Inter', sans-serif;
    font-size: 1.00rem; 
    line-height: 1.6; 
    color: #ffffff;
}

.footer_col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_col ul li {
    margin-bottom: 15px; 
}

.footer_col a {
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.00rem; 
    font-weight: 400;
    transition: color 0.2s ease-in-out;
}

.footer_col a:hover {
    color: #feea04; 
}
/* 
 * =========================================
 * FOOTER LOGO OVERLAP
 * =========================================
 */
.footer_logo_wrap {
    position: relative;
    margin-top: -90px; 
    margin-bottom: 15px;
    z-index: 10;
    display: flex;
    justify-content: flex-start; 
}

.footer_heart_logo {
    width: 180px; 
    height: auto;
    filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.4)); 
}

/* 
 * =========================================
 * NEWSLETTER INPUT
 * =========================================
 */
.newsletter_col p {
    margin-bottom: 45px; 
}

.newsletter_col {
    text-align: left;
}

.newsletter_input_wrap {
    display: flex;
    align-items: center; 
    max-width: 280px; 
    height: 42px; 
    border-radius: 6px;
    border: 1px solid #570eef;
    overflow: hidden; 
}

.newsletter_input_wrap input {
    flex: 1;
    height: 100% !important; 
    background-color: #000000 !important; 
    color: #ffffff !important;
    border: none !important; 
    padding: 0 15px !important;
    margin: 0 !important;
    outline: none;
    font-size: 0.95rem;
    box-shadow: none !important;
}

.newsletter_input_wrap input::placeholder {
    color: #888888 !important;
}

.newsletter_input_wrap button {
    height: 100% !important; 
    width: 60px; 
    background-color: #feea04 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.newsletter_input_wrap button:hover {
    background-color: #ffffff !important; 
}

/* 
 * =========================================
 * SUB-FOOTER ALIGNMENT
 * =========================================
 */
.copyright_text {
    padding-left: 80px; 
    white-space: nowrap; 
}
.sub_footer_inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr; 
    gap: 30px;
    max-width: 1750px;
    margin: 0 auto;
    font-size: 0.85rem;
    align-items: center;
}

.payment_icons {
    grid-column: 5; 
}

.sub_footer_inner a {
    color: #a072b9; 
    text-decoration: none;
}

.sub_footer_inner a:hover {
    color: #ffffff;
}

.footer_socials {
    display: flex;
    gap: 15px;
    margin-top: 25px; 
}

.social_link {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}
.social_link:hover {
    transform: scale(1.1);
}

.payment_icons {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-end; 
}

.payment_icons svg {
    opacity: 0.95;
    transition: opacity 0.2s;
}
.payment_icons svg:hover {
    opacity: 1;
}

/* 
 * =========================================
 * FOOTER RESPONSIVE ADJUSTMENTS
 * =========================================
 */

/* Tablet View: Wrap to 3 columns and full-width the outer columns */
@media (max-width: 1024px) {
    .footer_grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .brand_col {
        grid-column: span 3;
        padding-left: 0; /* Resets the 70px desktop padding */
        text-align: center;
    }
    .footer_logo_wrap {
        justify-content: center;
    }
    .footer_socials {
        justify-content: center;
    }
    .newsletter_col {
        grid-column: span 3;
        text-align: center;
    }
    .newsletter_input_wrap {
        margin: 0 auto; /* Centers the input horizontally */
    }
    
    /* Sub-footer adjustments */
    .sub_footer_inner {
        grid-template-columns: 1fr 1fr;
    }
    .copyright_text {
        padding-left: 0; /* Resets the 80px desktop padding */
    }
    .payment_icons {
        grid-column: 2; /* Overrides the desktop grid-column: 5 */
    }
}

/* Mobile View: Stack everything into a single column */
@media (max-width: 768px) {
    .footer_grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .brand_col,
    .newsletter_col {
        grid-column: 1;
    }
    .footer_logo_wrap {
        margin-top: -50px; /* Pulls the logo up a bit less aggressively on mobile */
    }
    
    /* Sub-footer single column stack */
    .sub_footer_inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }
    .payment_icons {
        grid-column: 1;
        justify-content: center;
    }
    .copyright_text {
        white-space: normal; /* Allows the copyright text to wrap if needed */
    }
}
/* 
 * =========================================
 * DOUBLE-CART BUG FIX
 * Auto-hides the top header cart when the mouse leaves
 * =========================================
 */
@media (min-width: 1025px) {
    #desktop_cart_wrap:not(:hover):not(:focus-within) .drop_panel.open {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
    }
}