body {
	font-family: 'Muli', sans-serif /*{body-font-family}*/;
	font-size: 14px /*{body-font-size}*/;
	color: #252525 /*{body-font-colour}*/;
	background-color: #ffffff;
}


/*------------- Text Styling -------------*/
a,
.pagination > li > a,
.pagination > li > span  {
	color: #252525 /*{link-text-colour}*/;
}
a:hover,
a:focus {
	color: #252525 /*{link-text-colour}*/;
	opacity:0.8;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: 'Montserrat', sans-serif /*{headers-font-family}*/;
	color: #333333 /*{headers-colour}*/;
}
h1,
.h1 {
	font-size: 32px /*{header-1-font-size}*/;
}
h2,
.h2 {
	font-size: 24px /*{header-2-font-size}*/;
}
h3,
.h3 {
	font-size: 20px /*{header-3-font-size}*/;
}
h4,
.h4 {
	font-size: 18px /*{header-4-font-size}*/;
}
h5,
.h5 {
	font-size: 15px /*{header-5-font-size}*/;
}


/*------------- Button Styling -------------*/
.btn-default,
.label-default,
body.active #mobile-menu .closebtn {
	color: #FFFFFF /*{btn-default-text-colour}*/;
	background-color: #373842 /*{btn-default-bg-colour}*/;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.btn-default:active:hover
.open .dropdown-toggle.btn-default,
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
	color: #FFFFFF /*{btn-default-text-colour-hover}*/;
	background-color: #26272d /*{btn-default-bg-colour-hover}*/;
}

.btn-primary,
.btn-success,
.label-primary,
.label-success,
.blog-thumbnail .blog-date,
#wrapper-staticmenu .navbar-nav > li > a:after,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	color: #FFFFFF /*{btn-primary-text-colour}*/;
	background-color: #95b675 /*{btn-primary-bg-colour}*/;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.open .dropdown-toggle.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success,
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
	color: #ffffff /*{btn-primary-text-colour-hover}*/;
	background-color: #7fa25e /*{btn-primary-bg-colour-hover}*/;
}

.btn-warning,
.label-warning {
	color: #ffffff /*{btn-warning-text-colour}*/;
	background-color: #f0ad4e /*{btn-warning-bg-colour}*/;
}
.thumbnail-badge.label-warning span {
	color: #ffffff /*{btn-warning-text-colour}*/;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning:active:hover,
.open .dropdown-toggle.btn-warning,
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
	color: #ffffff /*{btn-warning-text-colour-hover}*/;
	background-color: #ed9c28 /*{btn-warning-bg-colour-hover}*/;
}

.btn-danger,
.label-danger {
	color: #ffffff /*{btn-danger-text-colour}*/;
	background-color: #d9534f /*{btn-danger-bg-colour}*/;
}
.thumbnail-badge.label-danger span {
	color: #ffffff /*{btn-danger-text-colour}*/;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger:active:hover,
.open .dropdown-toggle.btn-danger,
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
	color: #ffffff /*{btn-danger-text-colour-hover}*/;
	background-color: #d2322d /*{btn-danger-bg-colour-hover}*/;
}

.btn-info,
.label-info {
	color: #ffffff /*{btn-info-text-colour}*/;
	background-color: #8b8c9a /*{btn-info-bg-colour}*/;
}
.thumbnail-badge.label-info span {
	color: #ffffff /*{btn-info-text-colour}*/;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info:active:hover,
.open .dropdown-toggle.btn-info,
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
	color: #ffffff /*{btn-info-text-colour-hover}*/;
	background-color: #9b9cab /*{btn-info-bg-colour-hover}*/;
}

.btn-inverse {
	color: #333333 /*{btn-inverse-text-colour}*/;
  border-color: #333333 /*{btn-inverse-border-colour}*/;
	background-color: #ffffff;
}

/* Pagination */
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
	border-radius: 50%;
}
.pagination > li > a,
.pagination > li > span {
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  color: #989898;
  background-color:#fff;
  margin: 0 3px;
  border: none;
  display: inline-block;
  text-align: center;
}

/*--------- HEADER ---------*/
/* Annoucement Bar */
#wrapper-announcement {
  background-color: #373842 /*{announcement-bg}*/;
}
#wrapper-announcement,
#wrapper-announcement a {
  color: #fff /*{announcement-text}*/;
}

/* Header Cart */
#header-cart span,
.mob-cart span.cart-count {
  background-color: #95b675 /*{btn-primary-bg-colour}*/;
  color: #fff /*{btn-primary-text-colour}*/;
}

/* Main Menu */
#wrapper-staticmenu .navbar-nav > li > a {
  color: #363741 /*{header-menu-link}*/;
	font-family: 'Montserrat', sans-serif /*{headers-font-family}*/;
}
#wrapper-staticmenu .navbar-nav > li:hover > a,
#mobile-menu a:focus,
header .list-social a:hover .fa,
footer .list-social .fa:hover {
  color: #95b675 /*{header-menu-link-hover}*/;
}

/*--------- HOME PAGE ---------*/
.carousel-caption-wrapper,
.wrapper-featured-grid .caption,
.wrapper-featured-grid .grid-item:hover:before,
#instafeed > a:hover:after {
	background-color: rgba(55, 56, 66, 0.9) /*{carousel-bg-colour}*/;
}
.carousel-caption h1,
.carousel-caption h1 a,
.carousel-caption p,
.wrapper-featured-grid .caption h2.headline,
.wrapper-featured-grid .caption .linktext,
#instafeed > a span.likes {
	color: #ffffff /*{carousel-text-colour}*/;
}

/*--------- FOOTER ---------*/
/* USPS */
.wrapper-usps .fa {
  color: #95b675 /*{usp-colour}*/;
}

/* --- HERO GEAR 2026 ULTRA-TRUST PAYMENT ROW --- */
.atc-payment-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #fafafa; /* Very light grey background to make the section pop */
    border-radius: 4px;
}

.payment-label {
    font-size: 13px;
    font-weight: 900; 
    color: #333;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.payment-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 25px; /* Increased gap so big icons have room to breathe */
}

.payment-icons img {
    height: 38px !important; /* The "Ultra-Trust" size */
    width: auto !important;
    transition: transform 0.2s ease-in-out;
}

/* Desktop Hover Effect */
.payment-icons img:hover {
    transform: scale(1.1);
}

/* Mobile: Ensure they sit in two neat rows on phones */
@media (max-width: 480px) {
    .payment-icons {
        gap: 20px;
        max-width: 280px; /* Forces a neat 3x2 grid on mobile */
    }
}

/* --- HERO GEAR 2026: COMPACT 3x2 GRID --- */
.category-grid-container-hero {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    /* Reduced from 1240px to 1080px to shrink the overall height */
    max-width: 1080px !important; 
    margin: 10px auto 30px auto !important; /* Tight top margin to pull grid UP */
    width: 90% !important;
}

.tile-item {
    width: 100% !important;
    margin: 0 !important;
}

/* --- HERO GEAR 2026: PRO-FRAME CATEGORY TILES --- */
.tile-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px; /* Matches the rugged GoPro look */
    
    /* The 1px frame: Change #000 to #333 if you want a dark charcoal look instead */
    border: 1px solid #000 !important; 
    
    /* Optional: This adds a tiny 3px white gap between the image and the black border */
    /* padding: 3px; 
    background-color: #fff; */

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect: Makes the frame 'pop' when someone hovers */
.tile-item a:hover img {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-color: #0071BC !important; /* Changes border to 'Hero Blue' on hover */
}

/* Mobile: Remains 2 across for easy tapping */
@media (max-width: 767px) {
    .category-grid-container-hero {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 95% !important;
    }
}

/* --- HERO GEAR 2026: FINAL POLISH & BOLD SIDEBAR --- */

/* 1. Header Centering & Spacing */
body { padding-top: 15px !important; }

.wrapper-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

.header-bold-links {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
}

/* 2. Brand Sidebar: Solid Black & Bold */
aside a.list-group-item {
    color: #000000 !important; /* Forces solid black font */
    font-weight: 800 !important; /* Bold */
    font-size: 15px !important;
    text-transform: uppercase !important;
    padding: 8px 0 !important;
    border: none !important;
}

aside a.list-group-item:hover {
    color: #555555 !important;
}

/* 3. Grid Fix: Darker Borders for Tiles */
.category-grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* --- HERO GEAR 2026: HIGH-VISIBILITY TILE BORDERS --- */

.category-tile-item img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    /* Use a darker, thicker border for high contrast on white background */
    border: 3px solid #1a1a1a !important; 
    /* Adding a subtle 'rugged' shadow to help tiles stand out */
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1) !important; 
    transition: transform 0.2s ease-in-out;
}

.category-tile-item img:hover {
    transform: scale(1.02); /* Slight pop on hover for better UX */
    border-color: #000000 !important;
}

/* 4. TOTAL SUPPRESSION: Hide "Shop by" text */
.home-category-header, .home-brand-header, h2.text-center, h3.title, #n_homepage h2, #n_homepage h3, .wrapper-logo h2 { 
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- HERO GEAR 2026: MATCHING INSTRUCTION HEADER --- */
.tile-instruction-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important; /* Exact match to h4 */
    font-weight: 900 !important; /* Exact match to rugged brand text */
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 3px solid #000; /* Matching the sidebar underline style */
    display: inline-block;
}

/* --- HERO GEAR 2026: PERFECT BALANCE BRAND SIDEBAR --- */

aside a.list-group-item {
    font-size: 15.5px !important; /* The sweet spot between 14px and 17px */
    font-weight: 800 !important; 
    color: #000000 !important;
    padding: 10px 12px !important; /* Balanced padding for hit-zone and height */
    margin-bottom: 3px !important; 
    display: block !important;
    border-radius: 4px;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background 0.15s ease;
}

/* Maintain visual feedback */
aside a.list-group-item:hover {
    background-color: #f4f4f4 !important;
    color: #333 !important;
}

/* --- HERO GEAR 2026: ABSOLUTE ZERO GAP TOP --- */

/* Targets the highest level elements to remove all default spacing */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Targets the main header containers for ultimate top alignment */
#wrapper-header, 
#wrapper-announcement, 
header#wrapper-header .container:first-child,
.wrapper-social {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Pulls the logo stack higher by overriding internal component margins */
.wrapper-logo {
    margin-top: -10px !important; /* Pulls logo 10px higher into the social icon area */
    padding-top: 0 !important;
}

/* Hero Gear - Forced Double Size Social Icons */
#footer .list-social li a i, 
.list-social i {
    font-size: 64px !important; /* Force double size */
    width: 64px !important;    /* Ensures the hit-box scales with the icon */
    height: 64px !important;
    line-height: 64px !important;
    color: #000000 !important; /* Force black */
    display: inline-block !important;
}

/* Adjust mobile specifically so it doesn't break the layout */
@media (max-width: 768px) {
    #footer .list-social li a i {
        font-size: 48px !important; /* Slightly smaller for phones */
    }
}

/* ============================================================
   HERO GEAR 2026: PRECISION BUTTON & CART STYLING
   ============================================================ */

/* 1. RESET GLOBAL HOVERS - Stops the Green Cart Row Error */
.cart-main .row:hover, 
.cart-main div:hover, 
.cart-main .addtocart:hover {
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 2. NUCLEAR POP - RESTORED VIA ATTRIBUTE TARGETING */
/* Targets the specific AJAX function Neto uses for the Buy button */
[rel^="addCartItem"], 
.addtocart, 
#n_adds {
    background-color: #39FF14 !important; /* NUCLEAR GREEN */
    color: #000 !important;
    border: 2px solid #32CD32 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
    box-shadow: 0 4px 20px rgba(57, 255, 20, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: inline-block !important;
    opacity: 1 !important;
}

/* THE POP: Button grows and glows brighter on hover */
[rel^="addCartItem"]:hover, 
.addtocart:hover, 
#n_adds:hover {
    background-color: #32CD32 !important;
    transform: scale(1.08) translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(57, 255, 20, 0.9) !important;
}

/* 3. FOREST GREEN - FOR CHECKOUT BUTTON */
.cart-main a.btn-checkout, 
.cart-main button[name="checkout"] {
    background-color: #1E8449 !important; /* FOREST GREEN */
    color: #FFFFFF !important;
    font-weight: 800 !important;
    padding: 16px 30px !important;
    border: none !important;
    display: block !important;
}

/* 4. LIGHT GREY CART SUMMARY BOX */
.cart-totals-wrapper {
    background-color: #F5F5F5 !important;
    border: 1px solid #E0E0E0 !important;
}

/* HERO GEAR: HIDE DUPLICATE GOOGLE PAY ICON */
/* This targets the second instance of the Google Pay logo, ensuring only Stripe's version shows */
.payment-icon-container[style*="url("]:nth-of-type(2n) .sr-only:contains("Google Pay") {
    display: none !important;
}

.payment-methods li:nth-child(even) .payment-icon-container[style*="google"] {
    display: none !important;
}

/* Hero Gear 2026: Rugged 3-Column Grid for Camera Models */
.product-spec-list {
    column-count: 3;
    column-gap: 40px;
    column-rule: 1px solid #eee;
    list-style-position: inside;
    margin: 30px 0;
    font-size: 14px;
    line-height: 2;
}

/* Switches to 1 column for phones so it's readable */
@media (max-width: 767px) {
    .product-spec-list {
        column-count: 1;
        column-rule: none;
    }
}

/* HERO GEAR 2026: DISABLED BLOCK START 
   (Everything between here and the 'END' tag below is now ignored)

/* HERO GEAR 2026: FORCE FOOTER ALIGNMENT (REPLACEMENT BLOCK) */

/* 1. Kill all padding on the homepage main content area */
.cms-page-home .wrapper-main, 
.cms-page-home #main-content,
.cms-page-home .main-content {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

/* 2. Pull the footer UP to swallow the rogue white gap */
footer, #footer, .footer-bottom {
    margin-top: -100px !important;
    position: relative;
    z-index: 99; 
    clear: both !important;
}

/* 3. Remove the 'Clearfix' spacer */
.cms-page-home .wrapper-main:after,
.cms-page-home #main-content:after {
    content: none !important;
    display: none !important;
}

/* 4. Ensure the Brand Slider isn't pushed away */
.cms-page-home .container-fluid,
.cms-page-home .brands-slider {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

/* HERO GEAR 2026: REMOVE SPACING FROM HOME DESCRIPTION TEXT */
#homepage-content .tight-description p, 
#homepage-content p:last-child {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

#homepage-content + .container h3 {
    margin-top: 10px !important;
}

.category-grid-container {
    margin-bottom: 0px !important;
}

main.col-md-9 {
    padding-bottom: 0px !important;
}

#homepage-content {
    padding-top: 0px !important;
}

/* HERO GEAR 2026: DISABLED BLOCK END */

/* HERO GEAR 2026: CONSOLIDATED IPHONE 13+ MASTER STABILITY */
@media only screen and (max-width: 991px) {
    /* 1. Force Categories TOP / Shop by Brand Links BOTTOM */
    #main-content .container > .row, 
    .body-content > .row { 
        display: flex !important; 
        flex-direction: column !important; 
    }
    /* Moves the 'Shop by Brand' sidebar to the bottom */
    .col-md-3 { order: 2 !important; width: 100% !important; margin-top: 40px !important; }
    /* Keeps the 'Category Tiles' at the top */
    .col-md-9 { order: 1 !important; width: 100% !important; }

            /* 2. BRAND SLIDER: Force Static 2-Column Grid (Kills Slider Math) */
    .brand-slider, 
    .partner-logos-wrapper, 
    .slick-track, 
    .slick-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Forces 2 per row */
        gap: 15px !important;
        transform: none !important; /* Critical: Stops the 'long line' horizontal push */
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        left: 0 !important;
        overflow: visible !important;
    }

    /* Force the individual icons to behave inside the grid */
    .slick-slide, 
    .brand-slider-item, 
    .brand-slider a {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
        float: none !important;
        position: static !important; /* Stops slider from absolute-positioning icons */
    }

    .brand-slider-item img, 
    .slick-slide img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 3. THE GAP & OVERLAP FIX: Force the Footer down and away */
    footer, #footer, .site-footer {
        margin-top: 40px !important; /* Changed from negative to positive to PUSH away */
        clear: both !important;
        position: relative !important;
        display: block !important;
    }


    /* 4. PADDING RESET: Tighten the home page tiles */
    .cms-page-home .wrapper-main, .category-grid-container {
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
}


/* HERO GEAR 2026: MULTI-LOGO CHECKOUT ROW */
/* 1. Hide the single Visa icon for our renamed method */
label[for*="payment_method_stripe"] img, 
.payment-method-list img[src*="visa"] {
    display: none !important;
}

/* 2. Inject the full strip of logos next to the text */
label[for*="payment_method_stripe"]:after {
    content: "";
    display: inline-block;
    width: 140px; 
    height: 25px;
    margin-left: 10px;
    vertical-align: middle;
    /* HERO GEAR: Placeholder until we upload the real strip tomorrow */
    background-image: none !important; 
    background-color: transparent;
}

/* HERO GEAR 2026: SAFE MOBILE STACKING (IMAGES & PRICE RECOVERY) */
@media (max-width: 767px) {
    /* 1. Reset everything to standard blocks to bring images back */
    .product-sku, .product-options, .product-price, .variation-wrapper {
        display: block !important; 
        float: none !important;
        width: 100% !important;
        clear: both !important;
        text-align: left !important; /* Forces Price back to the Left */
    }

    /* 2. Create the physical gaps without using 'Table' math */
    .product-sku {
        margin-bottom: 30px !important; /* Massive gap below SKU */
        padding-bottom: 10px;
        border-bottom: 1px solid #f2f2f2;
    }

    /* 3. Ensure the Gallery isn't crushed */
    .product-image-container, .slick-list, .slick-track {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* This forces the box to the left, even if JavaScript tries to move it right */
#ajax_search_results {
    right: auto !important;
    left: 0 !important;
    margin-left: 0 !important;
    transform: translateX(0) !important;
    text-align: left !important;
}

/* This targets the actual list items to ensure text doesn't hug the right */
.ajax_search_results_list, 
#ajax_search_results li, 
#ajax_search_results a {
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    direction: ltr !important;
}