/* =========================================
   1. GOOGLE FONTS IMPORT
   (Must be at the very top of the file)
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

/* =========================================
   MACRO SYNC: HIGH-ENERGY RETAIL THEME
   Brand Color: #ff4000 (Electric Orange)
========================================= */

:root {
    /* Core Brand Colors */
    --macro-primary: #ff4000;
    --macro-primary-hover: #e63900;
    --macro-dark: #111111;
    --macro-light: #ffffff;
    
    /* UI & Accent Colors */
    --macro-accent: #ffd700; /* Gold/Yellow for urgency/sales */
    --macro-bg-gray: #f8f9fa;
    --macro-border: #e0e0e0;
    
    /* Typography & Structure */
    --macro-radius: 4px; 
    --macro-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --macro-shadow-hover: 0 8px 24px rgba(255, 64, 0, 0.15); 
}

/* Base Typography Overrides */
body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
    color: var(--macro-dark);
}

/* =========================================
   GLOBAL HEADER OVERHAUL
========================================= */

/* 1. The Bold Top Stripe */
#header {
    border-top: 5px solid var(--macro-primary) !important;
    background-color: var(--macro-light);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 2. Logo Placement */
#header .logo {
    max-height: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 3. The Search Bar - Fixed Alignment & Border */
#header .ps-searchbar__form {
    border: 2px solid var(--macro-dark) !important;
    border-radius: var(--macro-radius) !important;
    background-color: var(--macro-light) !important;
    display: flex !important;
    align-items: center;
    position: relative !important; /* Anchors the floating icon */
    padding: 0 !important;
}

/* Float the magnifier icon to the left */
#header .ps-searchbar__magnifier {
    color: var(--macro-primary) !important;
    font-size: 24px !important;
    position: absolute !important;
    left: 15px !important;
    pointer-events: none; /* Lets you click 'through' the icon to type */
}

/* Push the text to the right so it doesn't overlap the icon */
#header .ps-searchbar__input {
    border: none !important;
    box-shadow: none !important;
    padding: 12px 20px 12px 80px !important; /* 50px left padding clears the icon! */
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--macro-dark) !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: 100% !important;
}

#header .ps-searchbar__input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Make the magnifier icon act as our "Search Button" block */
.ps-searchbar__magnifier {
    color: var(--macro-primary) !important;
    font-size: 24px !important;
    padding: 0 15px !important;
    cursor: pointer;
}

/* 4. User & Cart Icons */
.header-nav .cart-preview .shopping-cart, 
.header-nav .user-info a {
    color: var(--macro-dark) !important;
    font-weight: 700 !important;
}

.header-nav .cart-preview.active i {
    color: var(--macro-primary) !important;
}


/* =========================================
   GLOBAL BUTTONS, HIGHLIGHTS & BADGES
========================================= */

/* Solid Buttons (Add to cart, Subscribe, etc.) */
.btn-primary, 
.product-add-to-cart .add-to-cart,
.product-miniature__add {
    background-color: var(--macro-primary) !important;
    border-color: var(--macro-primary) !important;
    color: var(--macro-light) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: var(--macro-radius) !important;
}

.btn-primary:hover, 
.product-add-to-cart .add-to-cart:hover,
.product-miniature__add:hover {
    background-color: var(--macro-primary-hover) !important;
    border-color: var(--macro-primary-hover) !important;
    box-shadow: var(--macro-shadow-hover) !important;
}

/* Outline Buttons (See Details, All Products) */
.btn-outline-primary {
    color: var(--macro-primary) !important;
    border-color: var(--macro-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: var(--macro-radius) !important;
}

.btn-outline-primary:hover {
    background-color: var(--macro-primary) !important;
    color: var(--macro-light) !important;
}

/* =========================================
   PRODUCT BADGES - HUMMINGBIRD BUG FIX (#976)
========================================= */

/* 1. The Trojan Horse: Redefine the Bootstrap RGB variables locally */
.product-flags .badge.new,
.product-miniature .badge.new {
    --bs-primary-rgb: 255, 215, 0 !important; /* Forces Hummingbird to evaluate as Yellow */
    background-color: var(--macro-accent) !important;
    color: var(--macro-dark) !important;
    border: none !important; 
}

.product-flags .badge.discount,
.product-miniature .badge.discount {
    --bs-secondary-rgb: 255, 64, 0 !important; /* Forces Hummingbird to evaluate as Electric Orange */
    background-color: var(--macro-primary) !important;
    color: var(--macro-light) !important;
    border: none !important; 
}

.product-flags .badge.out_of_stock,
.product-miniature .badge.out_of_stock {
    --bs-primary-rgb: 17, 17, 17 !important; /* Forces Hummingbird to evaluate as Black */
    background-color: var(--macro-dark) !important;
    color: var(--macro-light) !important;
    border: none !important; 
}

/* Kills the leftover blue borders caused by the same bug */
.product-flags .badge {
    border-color: transparent !important;
}

/* =========================================
   PHASE 3.4: PRODUCT PAGE PRICING BLOCK
========================================= */

/* 1. Huge, High-Energy Retail Price */
.product__price {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: var(--macro-primary) !important;
    letter-spacing: -1px;
}

/* 2. The Pricing Extras Box (Holds Installments & Gifts) */
.macro-pricing-extras {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 12px 15px;
    background-color: var(--macro-bg-gray);
    border-radius: var(--macro-radius);
    border-left: 4px solid var(--macro-primary); /* Sharp orange accent line */
}

/* 3. Refined Installment Badge */
.macro-pricing-extras .installment-badge {
    background-color: var(--macro-light) !important;
    border: 1px solid var(--macro-border) !important;
    padding: 6px 12px !important;
    border-radius: var(--macro-radius) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.macro-pricing-extras .installment-badge span,
.macro-pricing-extras .installment-badge i {
    color: var(--macro-primary) !important; /* Uses the orange variable */
}

/* =========================================
   PHASE 3.3: CATALOG GRIDS (PRODUCT CARDS)
========================================= */

/* 1. Base Card Styling & Setup */
.product-miniature {
    background-color: var(--macro-light) !important;
    border: 1px solid var(--macro-border) !important;
    border-radius: var(--macro-radius) !important;
    overflow: hidden; /* Ensures the image doesn't spill over rounded corners */
    transition: all 0.3s ease-in-out !important;
    position: relative;
    padding-bottom: 15px; /* Gives the Add to Cart button breathing room */
}

/* 2. The Hover 'Lift & Glow' Effect */
.product-miniature:hover {
    border-color: var(--macro-primary) !important; /* Border turns orange */
    box-shadow: var(--macro-shadow-hover) !important; /* Custom orange-tinted shadow */
    transform: translateY(-5px); /* Lifts the card up slightly */
    z-index: 2; /* Ensures the hovered card sits above its neighbors */
}

/* 3. Clean up the Image Container */
.product-miniature__image-container {
    border-bottom: 1px solid var(--macro-bg-gray);
    margin-bottom: 10px;
    background-color: var(--macro-light); /* Prevents transparent PNG issues */
}

/* 4. Bold Typography for Grid Titles */
.product-miniature__title {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--macro-dark) !important;
    margin-top: 10px;
    display: block;
    transition: color 0.2s ease;
}

/* Title turns orange when hovered */
.product-miniature__title:hover {
    color: var(--macro-primary) !important;
    text-decoration: none !important;
}

/* 5. Aggressive Pricing inside the Grid */
.product-miniature__price {
    color: var(--macro-primary) !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: -0.5px;
}

/* Strike-through retail price (RCP) */
.product-miniature__regular-price {
    color: #888888 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* 6. Quick View Button Polish */
.product-miniature__quickview-button {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: var(--macro-dark) !important;
    border: 1px solid var(--macro-dark) !important;
    border-radius: var(--macro-radius) !important;
    transition: all 0.2s ease;
    font-weight: 700 !important;
}

/* Quick View turns solid orange on hover */
.product-miniature__quickview-button:hover {
    background-color: var(--macro-primary) !important;
    color: var(--macro-light) !important;
    border-color: var(--macro-primary) !important;
}

/* =========================================
   PHASE 3.5: THE GLOBAL FOOTER
========================================= */

/* 1. The Newsletter Strip - High Contrast */
.ps-emailsubscription {
    background-color: var(--macro-bg-gray) !important;
    border-top: 1px solid var(--macro-border);
    border-bottom: 4px solid var(--macro-primary); /* Bold orange separator line */
}

.ps-emailsubscription p.h3 {
    font-weight: 800 !important;
    color: var(--macro-dark) !important;
    text-transform: uppercase;
}

.ps-emailsubscription input[type="email"] {
    border: 2px solid var(--macro-dark) !important;
    border-radius: var(--macro-radius) !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
}

.ps-emailsubscription input[type="email"]:focus {
    box-shadow: none !important;
    border-color: var(--macro-primary) !important;
    outline: none !important;
}

/* 2. Main Dark Footer Area */
.footer__main {
    background-color: var(--macro-dark) !important;
    color: var(--macro-light) !important;
    padding-top: 50px !important;
}

/* Footer Headings */
.footer__main .footer-block__title {
    color: var(--macro-light) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Footer Links - Smooth Slide Animation */
.footer__main .footer-block__list li a {
    color: #aaaaaa !important; /* Soft grey text */
    transition: all 0.2s ease-in-out !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-block;
}

.footer__main .footer-block__list li a:hover {
    color: var(--macro-primary) !important;
    transform: translateX(5px); /* Slides the link slightly right on hover */
}

/* Store Contact Info Icons */
.ps-contactinfo__infos, 
.ps-contactinfo__email a {
    color: #aaaaaa !important;
}

.ps-contactinfo__email i {
    color: var(--macro-primary) !important; /* Orange email icon */
    margin-right: 8px;
}

/* 3. Bottom Copyright Strip */
.footer .copyright {
    background-color: #000000 !important; /* Pure black to anchor the page */
    padding: 15px 0;
    margin-top: 20px;
}

.footer .copyright a {
    color: #666666 !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.footer .copyright a:hover {
    color: var(--macro-light) !important;
}

/* =========================================
   PHASE 3.6: MOBILE RESPONSIVENESS POLISH
========================================= */

@media (max-width: 767px) {
    
    /* 1. Make the Pricing Box stack neatly */
    .macro-pricing-extras {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px;
    }

    /* 2. Left-Aligned Premium Free Gift Banner (Mobile) */
    .macro-free-gift-banner {
        flex-direction: row !important; /* Keeps image and text side-by-side */
        text-align: left !important;    /* Forces text to the left */
        padding: 12px 10px !important;  /* Tighter padding for mobile screens */
        align-items: center !important; 
    }
    
    .macro-free-gift-banner div:first-child {
        margin-right: 15px !important; /* Restores space between image and text */
        margin-bottom: 0 !important;   /* Removes the bottom gap from the old centered layout */
    }

    .macro-free-gift-banner span:first-of-type {
        font-size: 11px !important; /* Slightly smaller "Free Gift Included" text */
        display: block !important;  /* Forces the next line to drop down */
        margin-bottom: 3px !important;
    }

    .macro-free-gift-banner span:last-of-type {
        font-size: 13px !important; /* Slightly smaller Gift Name */
        display: block !important;
        line-height: 1.3 !important;
    }

    /* 3. Shrink the Huge Price slightly so it doesn't break the layout */
    .product__price {
        font-size: 1.8rem !important;
    }

    /* 4. Tweak the Search Bar to fit perfectly */
    #header .ps-searchbar__input {
        font-size: 13px !important;
        padding: 10px 15px 10px 40px !important; /* Adjust padding for smaller icon */
    }
    
    #header .ps-searchbar__magnifier {
        left: 10px !important;
        font-size: 20px !important;
    }
    
    /* 5. Footer padding adjustment for thumbs */
    .footer__main {
        padding-top: 30px !important;
    }
}

/* =========================================
   FREE GIFT FLOATING BADGE (MINIATURES)
========================================= */

/* 1. Create a new anchor point directly below the image */
.product-miniature__bottom {
    position: relative !important; 
}

/* 2. Pull the badge UP into the image area */
.macro-gift-badge {
    position: absolute !important;
    top: -45px !important;  /* Negative top pulls it upwards into the photo */
    right: 10px !important; /* Snugs it against the right side */
    background-color: var(--macro-accent) !important; 
    color: var(--macro-dark) !important;             
    font-weight: 800 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 20px !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    pointer-events: none !important; /* Lets users click the image underneath */
}

.macro-gift-badge i {
    font-size: 14px !important;
    color: var(--macro-primary) !important; 
}

/* =========================================
   PHASE 4: LOGIN, CART, AND CHECKOUT
========================================= */

/* 1. Login & Registration Forms */
.page-authentication #content, 
.page-customer-account #content,
.login-form {
    background-color: var(--macro-light);
    border: 2px solid var(--macro-border);
    border-top: 4px solid var(--macro-primary); /* Bold orange top line */
    border-radius: var(--macro-radius);
    padding: 30px;
    box-shadow: var(--macro-shadow);
}

.login-form .form-control {
    border: 2px solid var(--macro-border) !important;
    border-radius: var(--macro-radius) !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
}

.login-form .form-control:focus {
    border-color: var(--macro-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 64, 0, 0.15) !important;
}

/* 2. The Cart Page Summary Box */
.cart-summary {
    background-color: var(--macro-bg-gray) !important;
    border: 2px solid var(--macro-dark) !important; /* Thick dark border */
    border-radius: var(--macro-radius) !important;
    box-shadow: var(--macro-shadow);
    padding: 20px !important;
}

/* Make the total price massive */
.cart-summary-line.cart-total .value {
    color: var(--macro-primary) !important;
    font-weight: 800 !important;
    font-size: 1.8rem !important;
}

/* Full width checkout button */
.cart-summary .checkout a.btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px !important;
    font-size: 16px !important;
}

/* 3. The Checkout Process Steps */
#checkout .checkout-step {
    background-color: var(--macro-light);
    border: 1px solid var(--macro-border) !important;
    border-radius: var(--macro-radius) !important;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

/* Highlight the active step in Orange */
#checkout .checkout-step.-current {
    border: 2px solid var(--macro-primary) !important;
    box-shadow: var(--macro-shadow-hover) !important;
}

#checkout .checkout-step .step-title {
    font-weight: 800 !important;
    text-transform: uppercase;
    color: var(--macro-dark);
}

#checkout .checkout-step.-current .step-title {
    color: var(--macro-primary) !important;
}

/* 4. The Final "Place Order" Button */
#payment-confirmation .btn-primary {
    width: 100% !important;
    font-size: 18px !important;
    padding: 18px !important;
    animation: macroPulse 2s infinite; /* Adds a "Buy Now" heartbeat */
}

/* Heartbeat animation for the final button */
@keyframes macroPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 64, 0, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 64, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 64, 0, 0); }
}

/* =========================================
   PHASE 5: SIDEBAR, CATEGORIES & SPECIAL PAGES (HUMMINGBIRD FIX)
========================================= */

/* -----------------------------------------
   1. Left Column (Facets & Category Tree) 
----------------------------------------- */
#left-column .left-block {
    background-color: var(--macro-light);
    border: 1px solid var(--macro-border);
    border-top: 4px solid var(--macro-primary); /* Bold orange top line */
    border-radius: var(--macro-radius);
    padding: 20px;
    box-shadow: var(--macro-shadow);
    margin-bottom: 25px;
}

/* Bold Sidebar Headings */
#left-column .left-block__title {
    font-weight: 800 !important;
    text-transform: uppercase;
    color: var(--macro-dark);
    border-bottom: 2px solid var(--macro-bg-gray);
    padding-bottom: 12px;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    font-size: 1.1rem;
}

/* -----------------------------------------
   2. Category Page Header (Premium Look)
----------------------------------------- */
.category__header {
    background: linear-gradient(135deg, var(--macro-dark) 0%, #2a2a2a 100%) !important;
    border-radius: var(--macro-radius) !important;
    border-left: 5px solid var(--macro-primary) !important; /* Thick orange accent */
    color: var(--macro-light) !important;
    padding: 35px 30px !important;
    box-shadow: var(--macro-shadow);
    margin-bottom: 35px !important;
    position: relative;
    overflow: hidden;
}

.category__header .page-title-section {
    color: var(--macro-light) !important;
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.category__header .category__description p {
    color: #cccccc !important; /* Softer white for readable body text */
    font-size: 15px;
    line-height: 1.6;
    max-width: 800px;
}

/* Make the Category Image pop */
.category__header .category__cover img {
    border-radius: var(--macro-radius);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* -----------------------------------------
   3. Special Pages (New, Best Sellers, Drops)
----------------------------------------- */
#new-products .page-title-section,
#best-sales .page-title-section,
#prices-drop .page-title-section {
    background-color: var(--macro-bg-gray);
    border-left: 5px solid var(--macro-primary);
    padding: 20px 25px;
    border-radius: var(--macro-radius);
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -1px;
    box-shadow: var(--macro-shadow);
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
    color: var(--macro-dark);
}

/* Inject high-energy visual icons via CSS! */
#new-products .page-title-section::before {
    content: "🔥 ";
}

#best-sales .page-title-section::before {
    content: "👑 ";
}

#prices-drop .page-title-section::before {
    content: "💥 ";
}

/* -----------------------------------------
   4. Subcategories (Inside the Dark Header)
----------------------------------------- */
.category__header .subcategory__link {
    background: rgba(255, 255, 255, 0.05); /* Subtle glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--macro-radius);
    padding: 10px;
    transition: all 0.3s ease;
}

.category__header .subcategory__name {
    color: var(--macro-light) !important; /* Force text to white */
    font-weight: 600;
    margin-top: 10px;
}

.category__header .subcategory__link:hover {
    background: rgba(255, 64, 0, 0.1); /* Subtle Electric Orange glow */
    border-color: var(--macro-primary);
}

.category__header .subcategory__link:hover .subcategory__name {
    color: var(--macro-primary) !important;
}

/* =========================================
   PHASE 6: HOMEPAGE VISUAL OVERHAUL (HUMMINGBIRD)
========================================= */

/* 1. Featured Products Section Title */
.featured-products .products-section-title {
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 2rem !important;
    color: var(--macro-dark);
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Add an aggressive orange underline to the Homepage title */
.featured-products .products-section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 5px;
    background-color: var(--macro-primary);
    margin: 10px auto 0;
    border-radius: 5px;
}

/* 2. All Products Button on Homepage */
.featured-products .all-product-link a {
    background-color: var(--macro-dark) !important;
    color: var(--macro-light) !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border-radius: var(--macro-radius);
    transition: all 0.3s ease;
    border: 2px solid var(--macro-dark) !important;
    display: inline-block;
}

.featured-products .all-product-link a:hover {
    background-color: var(--macro-primary) !important;
    border-color: var(--macro-primary) !important;
    box-shadow: var(--macro-shadow-hover);
    text-decoration: none;
}

/* 3. Main Image Slider / Carousel Polish */
.carousel {
    border-radius: var(--macro-radius);
    overflow: hidden;
    box-shadow: var(--macro-shadow);
    border-bottom: 5px solid var(--macro-primary); /* Bold bottom accent */
    margin-bottom: 40px !important;
}

.carousel .carousel-caption {
    background: rgba(17, 17, 17, 0.85); /* Dark semi-transparent background */
    border-left: 4px solid var(--macro-primary);
    padding: 20px;
    border-radius: var(--macro-radius);
    text-align: left;
    bottom: 20%;
}

.carousel .carousel-caption h1,
.carousel .carousel-caption .display-1,
.carousel .carousel-caption .text-uppercase {
    color: var(--macro-light) !important;
    font-weight: 800;
    text-transform: uppercase;
}

/* 4. Homepage Banners (Below the Slider) */
.banner img {
    border-radius: var(--macro-radius);
    box-shadow: var(--macro-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner:hover img {
    transform: translateY(-5px);
    box-shadow: var(--macro-shadow-hover);
}

/* =========================================
   PHASE 7: MOBILE TYPOGRAPHY & UX POLISH
========================================= */

@media (max-width: 767px) {
    
    /* 1. Global Proportional Font Scaling */
    /* Shrinking the root size from 16px to 14px automatically scales down 
       ALL headers, paragraphs, and buttons across the entire store proportionally. */
    html, body {
        font-size: 14px !important; 
    }

    /* 2. Reclaim Screen Real Estate */
    /* Hummingbird's default desktop padding is too aggressive for mobile screens. 
       This tightens the gaps so more products fit on the screen. */
    .category__header {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
    }
    
    #wrapper .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 3. Product Grid Mobile Tweaks */
    /* Ensure the cards look sharp even when squeezed into a 2-column mobile grid */
    .product-miniature {
        padding-bottom: 10px !important;
    }

    .product-miniature__title {
        font-size: 13px !important;
        margin-top: 5px !important;
    }

    .product-miniature__price {
        font-size: 16px !important; /* Keep the price highly readable */
    }

    /* Shrink the Add to Cart button slightly for thumbs */
    .product-miniature__add {
        padding: 8px !important;
        font-size: 12px !important;
    }
}

/* =========================================
   PHASE 8: TRUE TOP-CENTER LOGO (SPLIT HEADER)
========================================= */

/* --- DESKTOP VIEW (768px and up) --- */
@media (min-width: 768px) {
    /* 1. Make the main header the anchor point for the floating logo */
    #header {
        position: relative !important;
    }
    
    /* 2. Squeeze the left and right top columns so they don't overlap the center */
    .header-top__left {
        flex: 0 0 33% !important;
        max-width: 33% !important;
    }
    
    .header-top__right {
        flex: 0 0 33% !important;
        max-width: 33% !important;
        margin-left: auto !important; /* Pushes Sign In/Cart to the far right */
        display: flex !important;
        justify-content: flex-end !important;
    }

    /* 3. Rip the logo out of the bottom row and float it in the top center */
    .header-bottom__logo {
        position: absolute !important;
        top: 10px !important; /* Distance from the very top of the screen */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Centers it perfectly */
        z-index: 1050 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    .header-bottom__logo .logo {
        max-height: 50px !important; /* Adjust so it fits the top bar height */
        width: auto !important;
    }

    /* 4. Center the remaining Navigation Menu and Search Bar on the 2nd line */
    .header-bottom__row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 10px !important; /* Adds breathing room below the logo */
    }

    #_desktop_ps_searchbar {
        margin-left: 30px !important; /* Space between Categories and Search */
        margin-right: 0 !important;
    }
}

/* --- MOBILE VIEW (Up to 767px) --- */
@media (max-width: 767px) {
    /* 1. Make the mobile row relative so we can float the logo inside it */
    .header-bottom__row {
        position: relative !important;
        display: flex !important;
        justify-content: space-between !important; /* Spreads Hamburger and Cart to edges */
        align-items: center !important;
        min-height: 65px !important; 
    }
    
    /* 2. Absolute center the logo between the mobile icons */
    .header-bottom__logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
        width: auto !important;
    }

    .header-bottom__logo .logo {
        max-height: 38px !important; /* Prevents overlap with mobile icons */
    }

    /* 3. Ensure the Hamburger menu stays strictly on the left */
    .ps-mainmenu {
        order: -1 !important;
    }
}