/**
 * Main CSS Stylesheet - v1
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 */

/* =========================================================
   MODERN TYPOGRAPHY & BASE STYLES
   ========================================================= */

body { 
    margin: 0; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    font-size: 62.5%; 
    color: #333333; 
    background-color: #f1f1eb; 
    line-height: 1.6; 
}

a img { border: none; }
a:link, #navEZPagesTOC ul li a { color: #1a56db; text-decoration: none; transition: color 0.2s; }
a:visited { color: #1a56db; text-decoration: none; }
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover { color: #A4343A; }
a:active { color: #A4343A; }

/* Headers - Bolder and Tighter */
h1, h2, h3, h4, h5, h6 { 
    margin: 0.5em 0; 
    font-weight: 700; 
    color: #000000; 
    line-height: 1.3;
}
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger { font-size: 1.3em; }

/* Completely hide the default greeting */
h2.greeting { 
    display: none !important; 
}

.biggerText { font-size: 1.4em; }
CODE { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 1.2em; }
FORM, SELECT, INPUT { display: inline; font-size: 1.2em; margin: 0.1em; font-family: inherit; }
TEXTAREA { margin: auto; display: block; width: 95%; font-family: inherit; }
input:focus, select:focus, textarea:focus { background: #E4FEF5; outline: 1px solid #A4343A; }

FIELDSET { padding: 1em; margin: 0.5em 0em; border: 1px solid #dddddd; border-radius: 4px; }
LEGEND { font-weight: bold; padding: 0.3em 0.8em; color: #111; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
LABEL, h4.optionName { line-height: 1.5em; padding: 0.2em; cursor: pointer; }
LABEL.checkboxLabel, LABEL.radioButtonLabel { margin: 0.5em 0.3em; }

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg { float: left; }
LABEL.inputLabel { width: 9em; float: left; font-weight: 600; }
LABEL.inputLabelPayment { width: 14em; float: left; padding-left: 2.5em; }
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel { width: 11em; float: left; font-weight: 600; }
#checkoutPayment LABEL.radioButtonLabel { font-weight: bold; }

P, ADDRESS { padding: 0.5em 0; font-size: 1.3em; }
ADDRESS { font-style: normal; }
.clearBoth { clear: both; }
HR { height: 1px; margin: 1.5em 0; border: none; border-bottom: 1px solid #e0e0e0; }

.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution { line-height: 1.8em; padding: 0.2em; border: 1px solid #9a9a9a; }
.messageStackWarning, .messageStackError { background-color: #ff0000; color: #ffffff; }
.messageStackSuccess { background-color: #99FF99; color: #000000; }
.messageStackCaution { background-color: #FFFF66; color: #000000; }

/* Adjusted for 100% width and no border to allow edge-to-edge header */
#mainWrapper { background-color: #f1f1eb; text-align: left; width: 100%; vertical-align: top; border: none; margin: 0; }
#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage { margin: 0em; padding: 0em; }
#navColumnOneWrapper, #navColumnTwoWrapper { margin-left: 0.5em; margin-right: 0.5em; }
#tagline { color:#000000; font-size: 2em; text-align: right; vertical-align: middle; }
#sendSpendWrapper { border: 1px solid #cacaca; float: right; margin: 0em 0em 1em 1em; }
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper { margin: 0; width: 47%; }
.wrapperAttribsOptions { margin: 0.3em 0em; }
.navNextPrevCounter { margin: 0em; font-size: 0.9em; }
.navNextPrevList { display: inline; white-space: nowrap; margin: 0; padding: 0.5em 0em; list-style-type: none; }
#navEZPagesTOCWrapper { font-weight: bold; float: right; height: 1%; border: 1px solid #9a9a9a; }
#navEZPagesTOC ul { margin: 0; padding: 0.5em 0em; list-style-type: none; line-height: 1.5em; }
#navEZPagesTOC ul li { white-space: nowrap; }
#navEZPagesTOC ul li a { padding: 0em 0.5em; margin: 0; }
#navCategoryIcon, .buttonRow, #indexProductListCatDescription { margin: 0.5em; }
#navBreadCrumb { padding: 0.5em 0.5em; background-color: #f1f1eb; font-size: 0.95em; font-weight: bold; margin: 0em; }
#navColumnOne, #navColumnTwo { background-color: transparent; }

#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert { vertical-align: top; }
#productDescription, .shippingEstimatorWrapper { padding: 0.5em; }
.alert { color: #FF0000; margin-left: 0.5em; }
.important { font-weight: bold; }
.gvBal { float: right; }
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix { padding: 0.8em; }
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP { font-size: 0.9em; }

#cartAdd { float: right; text-align: center; margin: 1em; border: 1px solid #000000; padding: 1em; }
.tableHeading TH { border-bottom: 1px solid #9a9a9a; }
.tableHeading, #cartSubTotal { background-color: #e9e9e9; }
#cartSubTotal { border-top: 1px solid #cccccc; font-weight: bold; text-align: right; line-height: 2.2em; padding-right: 2.5em; }
.tableRow, .tableHeading, #cartSubTotal { height: 2.2em; }
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay { padding: 0.5em 0em; }
.cartUnitDisplay, .cartTotalDisplay { text-align: right; padding-right: 0.2em; }
#scUpdateQuantity { width: 2em; }
.cartQuantity { width: 4.7em; }
.cartNewItem { color: #33CC33; position: relative; }
.cartOldItem { color: #660099; position: relative; }
.cartBoxTotal { text-align: right; font-weight: bold; }
.cartRemoveItemDisplay { width: 3.5em; }
.cartAttribsList { margin-left: 1em; }
#mediaManager { width: 50%; margin: 0.2em; padding: 0.5em; background-color: #E4FEf5; border: 1px solid #003D00; }
.mediaTitle { float: left; }
.mediaTypeLink { float: right; }

/* Pricing Hierarchy - Fluidly Scales Down */
.normalprice, .productSpecialPriceSale { 
    text-decoration: line-through; 
    color: #888888;
    font-size: clamp(0.9em, 1.5vw, 1.125em);
}
.productSpecialPrice, .productSalePrice { 
    color: #000000; 
    font-weight: 800;
    font-size: clamp(1.3em, 2.5vw, 1.8em);
}
.productSpecialPriceSale, .productPriceDiscount { 
    color: #a4343a; 
    font-weight: 800;
    font-size: clamp(1.1em, 2vw, 1.5em);
}

/* Product Name Linking - Fluidly Scales Down */
.swiper-slide a, 
.modern-grid-card a, 
.categoryListBoxContents a {
    font-size: clamp(1em, 2vw, 1.3em);
    color: #000000;
    font-weight: 600;
    display: inline-block;
    margin-top: 5px;
    line-height: 1.2;
    text-decoration: none;
}

.orderHistList { margin: 1em; padding: 0.2em 0em; list-style-type: none; } 
#cartBoxListWrapper ul, #ezPageBoxList ul { list-style-type: none; }
#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal { margin: 0; padding: 0.2em 0em; } 
#cartBoxEmpty, #cartBoxVoucherBalance { font-weight: bold; }
.totalBox { width: 5.5em; text-align: right; padding: 0.2em; }
.lineTitle, .amount { text-align: right; padding: 0.2em; }
.amount { width: 5.5em; }

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage { margin: 0em 1em 1em 0em ; }
#cartImage { margin: 0.5em 1em; }
.attribImg { width: 20%; margin: 0.3em 0em; }
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew { margin: 1em 0em; }
.centerBoxWrapper { border: 1px solid #9a9a9a; height: 1%; margin: 0 0 1.1em 0; }

/* Custom Box Headings */
h2.centerBoxHeading, .productListing-rowheading {
    font-size: 2.5em;
    color: #000000;
    background: #f1f1eb; 
    text-transform: uppercase;
    padding: 0.5em 0.2em;
    height: auto;
    margin: 0;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg { text-align: center; }

/* Make white image backgrounds transparent against the gray website background */
.centerBoxContents img, 
.centerBoxContentsFeatured img, 
.centerBoxContentsSpecials img, 
.centerBoxContentsNew img, 
.categoryListBoxContents img, 
#productMainImage img, 
.additionalImages img, 
#cartImage img,
.buttonRow img, 
input[type="image"] {
    mix-blend-mode: multiply;
}

.back { float: left; }
.forward, #shoppingCartDefault #PPECbutton { float: right; }
.bold { font-weight: bold; }
.rowOdd { background-color: #E8E8E8; height: 1.5em; vertical-align: top; }
.rowEven { background-color: #F0F0F0; height: 1.5em; vertical-align: top; }
.hiddenField { display: none; }
.visibleField { display: inline; }
#myAccountGen li, #myAccountNotify li { margin: 0; } 
.accountTotalDisplay, .accountTaxDisplay { width: 20%; text-align: right; }
.accountQuantityDisplay { width: 10%; vertical-align: top; }
TR.tableHeading { background-color: #cacaca; height: 2em; }
#siteMapList { width: 90%; float: right; }
.ratingRow { margin: 1em 0em 1.5em 0em; }
LABEL#textAreaReviews { font-weight: normal; margin: 1em 0em; }
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart { background-color: #f1f1eb; }
.information {padding: 10px 3px; line-height: 150%;}
#shoppingcartBody #shippingEstimatorContent { clear: both; }
.seDisplayedAddressLabel { background-color:#85C285; text-align: center; }
.seDisplayedAddressInfo { text-transform: uppercase; text-align: center; font-weight: bold; }
#seShipTo { padding: 0.2em; }
.productListing-data, .linkListing-data { border-bottom:solid black 1px; }
div#preload { display: none; }

/* =========================================================
   NEW UNIFIED HEADER & MENU DESIGN
   ========================================================= */

td.columnRight, td.columnLeft, #navSuppWrapper { 
    display: none !important; 
    width: 0 !important; 
    height: 0 !important; 
    opacity: 0; 
    visibility: collapse; 
}

#headerWrapper {
    position: sticky;
    top: 0;
    z-index: 99990;
    background: #8b7d6b; 
    border-bottom: 2px solid #eaeaea;
    margin: 0;
    padding: 0;
    
    /* Prevents the 1-pixel jitter during scrolling */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#unified-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    position: relative; /* Essential for mobile search overlay */
}

/* =========================================================
   DYNAMIC LOGO SWAP & ALIGNMENT
   ========================================================= */
#unified-logo {
    flex: 1 1 0%;
    display: flex;
    justify-content: flex-start;
    position: relative;
    height: 40px;
}

#unified-logo a {
    display: flex;
    align-items: center;
    position: relative;
    width: 145px; 
    height: 100%;
}

#unified-logo img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: auto;
}

#unified-logo img.logo-main {
    height: 40px;
    opacity: 1;
}

/* =========================================================
   MOBILE ICONS (1 Row)
   ========================================================= */
.header-icon-container.right-side {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    justify-content: flex-end;
    width: auto;
}

#search-toggle-btn { order: 1; }
#cart-icon-btn { order: 2; }
#account-icon-btn { order: 3; }
#menu-toggle-btn { order: 4; }

#menu-toggle-btn, #search-toggle-btn { cursor: pointer; line-height: 1; }

#menu-toggle-btn svg, #search-toggle-btn svg, #cart-icon-btn svg, #account-icon-btn svg {
    width: 28px;
    height: 28px;
    stroke: #ffffff;
    fill: none;
    transition: stroke 0.2s;
}

#menu-toggle-btn:hover svg, #search-toggle-btn:hover svg, #cart-icon-btn:hover svg, #account-icon-btn:hover svg {
    stroke: #FFCD00;
}

#cart-icon-btn, #account-icon-btn { position: relative; display: inline-block; }

.cart-badge {
    position: absolute; top: -6px; right: -8px; background-color: #FF0000;
    color: #fff; font-size: 11px; font-weight: bold; padding: 2px 6px;
    border-radius: 50%; line-height: 1; border: 2px solid #fff;
}

/* =========================================================
   MOBILE SEARCH OVERLAY
   ========================================================= */
#modern-search-container {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #8b7d6b; 
    display: flex; align-items: center; justify-content: center;
    padding: 0 15px; z-index: 100;
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
}

#modern-search-container.open { opacity: 1; visibility: visible; }

.modern-search-form {
    display: flex; align-items: center; background: #e9e9e9;
    border-radius: 50px; padding: 4px; width: 100%; max-width: 600px;
    margin: 0 auto; border: 2px solid #ccc; transition: all 0.3s ease;
    height: 45px; box-sizing: border-box; /* Dynamic via Theme Tester */
}

.modern-search-form:focus-within {
    border-color: #000; background: #f1f1eb; box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

#zc-search-input {
    flex-grow: 1; background: transparent; border: none; padding: 0 15px;
    font-size: 1.1em; outline: none; color: #333; width: 100%;
    height: 100%; box-sizing: border-box;
}

#modern-search-submit {
    background: #333; border: none; border-radius: 50%; width: 37px; height: 37px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background 0.3s; flex-shrink: 0;
}

#modern-search-submit:hover { background: #A4343A; }
#modern-search-submit svg { width: 18px; height: 18px; stroke: #fff; }
#close-search-btn { font-size: 32px; color: #fff; cursor: pointer; margin-left: 15px; line-height: 1; }

/* =========================================================
   DESKTOP MEDIA QUERY (1 Row)
   ========================================================= */
@media (min-width: 992px) {
    
    #modern-search-container {
        position: static; opacity: 1; visibility: visible;
        background: transparent !important; flex: 0 1 600px;
        margin: 0 20px; padding: 0; z-index: 1;
    }
    
    #close-search-btn { display: none !important; }
    #search-toggle-btn { display: none !important; }

    /* Desktop: 1 Row Horizontal */
    .header-icon-container.right-side {
        flex: 1 1 0%;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 20px !important;
    }
    #cart-icon-btn { order: 1; }
    #account-icon-btn { order: 2; }
    #menu-toggle-btn { order: 3; }
}

/* =========================================================
   UNIVERSAL MENU SETTINGS
   ========================================================= */
#universal-menu {
    position: fixed; top: 0; right: -320px; width: 300px; height: 100%;
    background-color: #f1f1eb; z-index: 99999; overflow-y: auto;
    transition: right 0.3s ease; box-shadow: -2px 0 10px rgba(0,0,0,0.5); 
}

#universal-menu.open { right: 0; }

#universal-menu-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 99998;
}

#universal-menu-overlay.open { display: block; }

.menu-header {
    background-color: #e9e9e9; padding: 15px; text-align: right; border-bottom: 1px solid #ccc;
}

#close-menu-btn { font-size: 32px; cursor: pointer; line-height: 1; color: #333; }

.universal-nav-list { list-style: none; padding: 0; margin: 0; padding-bottom: 80px; }

.universal-nav-list a {
    display: block; padding: 10px 15px; font-size: 1.1em; color: #444;
    text-decoration: none; border-bottom: 1px solid #e9e9e9;
}

.universal-nav-list a:hover { background-color: #eaeaea; color: #A4343A; }
.universal-nav-list details { border-bottom: 1px solid #ddd; }

.universal-nav-list summary {
    background-color: #e9e9e9; padding: 12px 15px; font-size: 1.1em;
    font-weight: bold; color: #222; cursor: pointer; list-style: none;
    position: relative; text-transform: uppercase;
}

.universal-nav-list summary::-webkit-details-marker { display: none; }

.universal-nav-list summary::after {
    content: '+'; position: absolute; right: 20px; font-size: 1.4em; line-height: 1; color: #666;
}

.universal-nav-list details[open] > summary::after { content: '-'; }

.universal-nav-list details ul { list-style: none; padding: 0; margin: 0; background-color: #f1f1eb; }
.universal-nav-list details details summary { background-color: #f1f1eb; font-weight: normal; text-transform: none; padding-left: 20px; }
.universal-nav-list details details ul a { padding-left: 35px; font-size: 1.05em; background-color: #f1f1eb; }
.universal-nav-list details details details summary { padding-left: 35px; font-size: 1.05em; background-color: #ebebeb; }
.universal-nav-list details details details ul a { padding-left: 50px; font-size: 1em; background-color: #f1f1eb; }

/* Hide the duplicate heading on the main index page */
h1#indexDefaultHeading { display: none; }

/* Hide breadcrumb only on the main home page */
#indexHomeBody #navBreadCrumb { display: none !important; }

/* Remove top padding from the main column on the home page */
#indexHomeBody .centerColumn { padding-top: 0 !important; }

/* Hide the hardcoded Zen Cart line breaks left behind by the hidden greeting */
#indexHomeBody .centerColumn > br { display: none !important; }

/* =========================================================
   SWIPER CAROUSEL TABLE FIX
   ========================================================= */
table#contentMainWrapper {
    table-layout: fixed !important; 
    width: 100% !important;
}

/* Force spacing before Swiper JS initializes */
.centerBoxWrapper .swiper-wrapper {
    display: flex;
    gap: 15px; 
}

.centerColumn, .centerBoxWrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Contains the slider so it cannot blow up the page width */
    box-sizing: border-box;
}

/* Polish the Carousel Cards - FLUIDLY SCALES DOWN */
.centerBoxWrapper .swiper-slide, #productListing .swiper-slide {
    width: clamp(145px, 22vw, 260px) !important; /* Forces products to scale dynamically to fit more per row */
    height: auto !important; 
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Styling for the dynamic "See More" final card */
.centerBoxWrapper .swiper-slide.see-more-slide, #productListing .swiper-slide.see-more-slide {
    background: #f4f4f4;
    border: 2px dashed #ccc;
    cursor: pointer;
    transition: background 0.3s;
}

.centerBoxWrapper .swiper-slide.see-more-slide:hover, #productListing .swiper-slide.see-more-slide:hover {
    background: #e9e9e9;
}

/* =========================================================
   MODERN GRID FOR NON-HOMEPAGE LISTINGS - FLUIDLY SCALES DOWN
   ========================================================= */
.modern-grid-wrapper {
    display: grid;
    /* Calculates columns based on a much smaller 145px minimum, packing more items horizontally */
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 15px;
    padding: 10px 0 30px 0;
    width: 100%;
}

.modern-grid-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* Forces all cards in a row to stretch to match the tallest one */
}

/* =========================================================
   TOP COMMAND CENTER (JAVASCRIPT CONTROLLED)
   ========================================================= */
.sticky-action-bar {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    box-sizing: border-box;
    margin-bottom: 5px;
}

/* Force the action bar to stay inline (not sticky) on mobile and tablet */
@media (max-width: 991px) {
    .sticky-action-bar {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 0 10px 0 !important;
        z-index: auto !important;
    }
}

/* Restores original H1 layout */
.sticky-action-bar h1 {
    font-size: 1.4em !important;
    color: #36454f !important;
    text-transform: uppercase;
    margin-top: 0 !important; 
    margin-bottom: 10px !important;
}

/* Neutralize Zen Cart's clunky line breaks */
.sticky-action-bar br {
    display: none;
}

/* =========================================================
   SWIPER CAROUSEL PRICE STACKING FIX
   ========================================================= */
.centerBoxWrapper .swiper-slide, 
#productListing .swiper-slide {
    display: block !important;
}

/* Add a tiny bit of breathing room between the side-by-side prices */
.swiper-slide .normalprice, 
.swiper-slide .productSpecialPrice, 
.swiper-slide .productPriceDiscount {
    display: inline-block;
    margin: 0 4px;
}

/* =========================================================
   PREMIUM SMART CART UI
   ========================================================= */
.smart-cart-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    width: 100%;
    max-width: 160px;
    height: 42px; /* Fixed height prevents layout jumping when swapping buttons */
    margin-left: auto;
    margin-right: auto;
}

/* Primary "Add to cart" Button */
.smart-btn.add {
    width: 100%;
    height: 100%;
    background-color: #a4343a;
    color: #ffffff;
    border: none;
    border-radius: 25px; /* Perfect pill shape */
    font-size: 1.05em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(164, 52, 58, 0.2);
    transition: all 0.2s ease;
}

.smart-btn.add:hover {
    background-color: #80262c;
    box-shadow: 0 6px 10px rgba(128, 38, 44, 0.3);
    transform: translateY(-2px); /* Slight lift effect on hover */
}

.smart-btn.add:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(128, 38, 44, 0.2);
}

/* Active Cart State (Minus & Plus Buttons) */
.smart-btn.minus, .smart-btn.plus {
    width: clamp(28px, 4vw, 38px); /* Fluid scale for small cards */
    height: clamp(28px, 4vw, 38px);
    background-color: #f4f4f4;
    color: #333333;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

.smart-btn.minus:hover, .smart-btn.plus:hover {
    background-color: #e9e9e9;
    border-color: #ccc;
    color: #a4343a; /* Ties the hover state back to your brand red */
}

.smart-btn.minus:active, .smart-btn.plus:active {
    transform: scale(0.92); /* Satisfying tactile click effect */
}

/* Quantity Input Field */
.smart-qty {
    width: clamp(35px, 5vw, 50px); /* Scales the input width to fit tight cards */
    text-align: center;
    border: none;
    font-weight: 800;
    font-size: 1.3em;
    color: #000;
    background: transparent;
    margin: 0 5px;
    -moz-appearance: textfield;
    outline: none;
    transition: border 0.2s ease;
}

.smart-qty:focus {
    border-bottom: 2px solid #a4343a;
    border-radius: 0;
}

/* Hides default arrows in Chrome/Edge */
.smart-qty::-webkit-outer-spin-button,
.smart-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Sold Out Button State */
.smart-btn.sold-out {
    width: 100%;
    height: 100%;
    background-color: #888888;
    color: #ffffff;
    border: none;
    border-radius: 25px; 
    font-size: 1.05em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    box-shadow: none; /* Flat look to indicate inactivity */
}

/* =========================================================
   CARD ALIGNMENT & FLEXBOX (SWIPER FIX)
   ========================================================= */
/* 1. Force Swiper slides to stretch to the tallest item in the row */
.swiper-slide.modern-grid-card {
    height: auto !important; 
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

/* Fluid Image Scaling for all product cards */
.swiper-slide img,
.modern-grid-card img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain; /* Shrinks image uniformly without squishing */
}

.modern-grid-card .itemTitle {
    margin-bottom: 15px;
}

/* 2. Anchor the price (and the button right below it) to the absolute bottom */
.modern-grid-card .card-price-wrapper {
    margin-top: auto; 
    text-align: center;
}
/* Ensure Swiper calculates enough room to scroll past the final slide */
.swiper-wrapper {
    padding-right: 20px !important; 
    box-sizing: border-box;
}

/* Ensure flex containers inside carousels don't get squished */
.swiper-slide {
    flex-shrink: 0;
}

/* Remove any accidental borders from the wrapper itself */
h1#categoryIcon, 
div#categoryIcon {
    border-bottom: none !important;
}

/* Style ONLY the link text */
a#categoryIcon,
#categoryIcon a,
#categoryIcon a:link,
#categoryIcon a:visited {
    color: #222 !important;
    font-size: 1.2em !important;
    font-weight: 800 !important;
    text-decoration: none !important; /* Kills the default black underline */
    letter-spacing: -0.5px;
    border-bottom: 3px solid #ffc107 !important; /* The yellow accent */
    padding-bottom: 3px;
    display: inline-block;
    transition: all 0.2s ease;
}

/* Turn text and border red on hover */
a#categoryIcon:hover,
#categoryIcon a:hover {
    color: #a4343a !important; 
    border-bottom: 3px solid #a4343a !important;
    text-decoration: none !important;
}

/* Universal Modern Button */
.modern-btn {
    background: linear-gradient(135deg, #a4343a 0%, #8a2a2f 100%);
    color: #ffffff !important;
    font-size: 0.85em;
    font-weight: bold;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none !important;
    text-align: center;
}
.modern-btn:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-1px);
    color: #fff !important;
}

/* --- SMART LAYOUT WRAPPER --- */
#smart-layout-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    align-items: flex-start; /* CRITICAL: Allows children to be sticky */
}

/* Stops all animations while the page is initially loading */
.sidebar-preload #smart-sidebar,
.sidebar-preload #smart-main-content,
.sidebar-preload #sidebar-open-tab {
    transition: none !important;
}

/* --- SIDEBAR DESKTOP --- */
#smart-sidebar {
    width: 220px;
    background: #fcfcfc;
    border-right: 1px solid #eaeaea;
    transition: margin-left 0.3s ease;
    
    /* Perfect Sticky Positioning */
    position: sticky;
    top: var(--header-height, 120px);
    height: calc(100vh - var(--header-height, 120px));
    overflow-y: auto; 
    flex-shrink: 0;
    z-index: 100;
}

#smart-main-content {
    flex-grow: 1;
    transition: width 0.3s ease, margin-left 0.3s ease;
    width: calc(100% - 220px); 
    min-height: 100vh;
}

/* State: Closed - Tab gets its own lane */
.sidebar-is-closed #smart-sidebar { 
    margin-left: -225px; 
    visibility: hidden; 
    transition: margin-left 0.3s ease, visibility 0s 0.3s; 
}
.sidebar-is-closed #smart-main-content { 
    width: calc(100% - 35px); /* Shrinks content slightly to fit the tab */
    margin-left: 35px; /* Pushes content safely away from the tab */
}

.sidebar-is-open #smart-sidebar { 
    visibility: visible;
    transition: margin-left 0.3s ease, visibility 0s 0s;
}

/* --- TOGGLE BUTTONS --- */
.sidebar-toggle-btn {
    background: #a4343a;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 1000;
}
.sidebar-toggle-btn:hover { background: #8a2a2f; }

#sidebar-close-btn { width: 100%; padding: 10px; border-radius: 0; }

/* --- MENU STYLING --- */
.smart-sidebar-nav { padding: 0; margin: 0; list-style: none; }
.smart-sidebar-nav details { border-bottom: 1px solid #eaeaea; }
.smart-sidebar-nav summary { padding: 12px 15px; cursor: pointer; font-weight: bold; background: #fff; display: flex; justify-content: space-between; align-items: center; }
.smart-sidebar-nav summary::-webkit-details-marker { display: none; }
.smart-sidebar-nav summary::after { content: '+'; color: #a4343a; font-size: 1.2em; }
.smart-sidebar-nav details[open] > summary::after { content: '−'; }
.smart-sidebar-nav ul { padding: 0 0 0 15px; margin: 0; background: #f9f9f9; list-style: none; }
.smart-sidebar-nav li a { display: block; padding: 10px 15px; color: #444; text-decoration: none; border-bottom: 1px solid #f0f0f0; }
.smart-sidebar-nav li a:hover { background: #f0f0f0; color: #a4343a; padding-left: 18px; transition: all 0.2s; }
.sidebar-content {
    padding-bottom: 100px; /* Prevents TrustedSite badge from covering the last links */
}

/* --- MOBILE BEHAVIOR --- */
@media (max-width: 768px) {
    #smart-sidebar {
        position: fixed;
        top: var(--header-height, 120px); /* Drops sidebar below the sticky header */
        left: 0;
        width: 100vw; 
        height: calc(100vh - var(--header-height, 120px)); /* Fills remaining screen space */
        z-index: 9999;
        margin-left: -100vw;
    }
    #smart-main-content { 
        width: 100%; 
        margin-left: 0 !important; /* Disables the desktop lane on mobile */
    }
    .sidebar-is-closed #smart-sidebar { margin-left: -100vw; }
    .sidebar-is-open #smart-sidebar { margin-left: 0; }
    
    /* Pad the footer so the bottom tab never covers parse time */
    #mainWrapper {
        padding-bottom: 35px !important; 
    }
}

/* --- HIDE SIDEBAR SCROLLBAR --- */
/* Chrome, Safari and Opera */
#smart-sidebar::-webkit-scrollbar {
    display: none; 
}
/* Firefox, IE and Edge */
#smart-sidebar {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

/* --- CLOSE BUTTON HOVER FIX --- */
#sidebar-close-btn:hover {
    background: #8a2a2f !important;
}

/* =========================================================
   SIDEBAR OPEN ARROW (DYNAMIC DESKTOP/MOBILE TAB)
   ========================================================= */
#sidebar-open-tab {
    position: fixed !important;
    left: 0 !important;
    top: var(--header-height, 120px) !important;
    width: 28px !important;  
    height: 40px !important; 
    background: #a4343a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99 !important;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2) !important;
    transition: opacity 0.2s, visibility 0.2s !important;
}

#sidebar-open-tab:hover {
    background: #8a2a2f !important;
}

/* Hide the tab entirely when the sidebar is open */
.sidebar-is-open #sidebar-open-tab {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Icon Swapping defaults */
.icon-mobile { display: none; }
.icon-desktop { display: block; }

/* --- MOBILE TAB REPOSITIONING --- */
@media (max-width: 768px) {
    #sidebar-open-tab {
        top: auto !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80px !important; /* Wider target for thumbs */
        height: 35px !important; /* Matches footer padding */
        border-radius: 8px 8px 0 0 !important; /* Rounded at the top */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.3) !important;
    }
    
    /* Swap Icons */
    .icon-mobile { display: block; }
    .icon-desktop { display: none; }
}

/* =========================================================
   MOBILE SIDEBAR OVERRIDES (Z-INDEX, FONTS & HEADER)
   ========================================================= */
@media (max-width: 768px) {
    
    /* 1. Force Sidebar Above Sticky Control Center */
    #smart-sidebar {
        z-index: 99999 !important; 
    }

    /* 2. Dynamically Scale Sidebar Link Fonts */
    .smart-sidebar-nav a, 
    .smart-sidebar-nav summary {
        font-size: clamp(16px, 4.5vw, 20px) !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* 3. Scale the + and - Toggle Icons */
    .smart-sidebar-nav summary::after {
        font-size: clamp(22px, 6vw, 28px) !important;
    }
    
    /* 4. Increase the "Shop by Category" Header Bar Height */
    #smart-sidebar > div:first-child {
        height: 55px !important;
    }
    
    /* 5. Scale up the "Shop by Category" Text */
    #smart-sidebar > div:first-child > div {
        font-size: clamp(18px, 5.5vw, 24px) !important;
    }
    
    /* 6. Enlarge the Close Button Hitbox and Arrow Icon */
    #sidebar-close-btn {
        width: 55px !important;
    }
    #sidebar-close-btn svg {
        width: 32px !important;
        height: 32px !important;
    }
	
	/* 7. Move the Open Tab to the Bottom Right */
    #sidebar-open-tab {
        left: auto !important; /* Clears the original center positioning */
        right: 15px !important; /* Pins it 15px from the right screen edge */
        transform: none !important; /* Removes the center-alignment math */
    }
}
/* =========================================================
   FREE SHIPPING BADGE (PRODUCT CARDS)
   ========================================================= */
.modern-grid-card {
    position: relative; 
}

.free-shipping-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #28a745; 
    color: #ffffff;
    font-size: 0.75em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    pointer-events: none; 
}

/* =========================================================
   MODERN GRID CARD TWEAKS
   ========================================================= */

/* 1. Safely stack the pricing without hiding normal text prices */
.modern-grid-card .card-price-wrapper {
    display: flex !important; 
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 5px !important;
    width: 100%;
    
    /* RESTORED: Standard text prices are visible again! */
    font-size: 14px !important; 
    line-height: 1.2 !important;
}

/* Allow normal spans to be controlled by flex-basis */
.modern-grid-card .card-price-wrapper span {
    display: inline-block !important;
}

/* Force the Free Shipping badge to take a full line */
.modern-grid-card .free-shipping-badge {
    flex-basis: 100% !important;
    margin: 0 auto 6px auto !important;
    font-size: 11px !important;
    line-height: normal !important;
}

/* MSRP stays inline, absorbing the invisible   next to it */
.modern-grid-card .normalprice {
    font-size: 13px !important;
    margin-bottom: 3px !important;
    flex-basis: auto !important; 
}

/* Sale Price and Discount are forced to their own separate lines */
.modern-grid-card .productSpecialPrice,
.modern-grid-card .productSalePrice {
    flex-basis: 100% !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

.modern-grid-card .productPriceDiscount {
    flex-basis: 100% !important;
    font-size: 12px !important;
}

/* 2. Reduce the product title font size */
.modern-grid-card .itemTitle, 
.modern-grid-card .itemTitle a {
    font-size: 1em !important;
    line-height: 1.3 !important;
}

/* 3. Free Shipping Badge breathing room */
/* Adds padding to the top of the image so badges don't overlap the actual item */
.modern-grid-card a img.listingProductImage,
.swiper-slide a img {
    padding-top: 15px !important; 
    box-sizing: border-box !important;
}

/* =========================================================
   CAROUSEL & LAYOUT TWEAKS
   ========================================================= */

/* 1. Restore product title font size inside carousels */
.swiper-slide .itemTitle, 
.swiper-slide .itemTitle a {
    font-size: 1.3em !important;
}

/* 2. Symmetrical right-side padding to balance the closed sidebar */
#smart-main-content {
    /* Adjust this pixel value to perfectly match the width of your closed sidebar */
    padding-right: 30px !important; 
    box-sizing: border-box !important;
}

/* Remove the right padding on mobile since the sidebar hides/overlays */
@media (max-width: 768px) {
    #smart-main-content {
        padding-right: 0px !important; 
    }
}

/* =========================================================
   BOTTOM PAGINATION CONTAINER (Responsive)
   ========================================================= */
.bottom-pagination-container {
    /* Controlled inline by PHP on desktop */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    width: 100%;
}

/* Force bottom links to appear WHENEVER the sticky bar is disabled (991px and below) */
@media (max-width: 991px) {
    .bottom-pagination-container {
        display: flex !important;
    }
}

/* Mobile Layout ONLY (767px and below): Forces bottom items to stack */
@media (max-width: 767px) {
    .bottom-pagination-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .bottom-pagination-container .navSplitPagesResult,
    .bottom-pagination-container .navSplitPagesLinks {
        float: none !important;
        text-align: left !important;
        margin: 0 !important;
    }
}