/* ============================== *
 * FONTS
 * ============================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* ============================== *
 * CHECKOUT - RENAME SHIPPING DISCOUNT TO GL CODE
 * ============================== */
/* Changes only the visible Order Overview label. The discount remains active. */
#discountUsageTotal > .oo-tuple__label {
    font-size: 0 !important;
}

#discountUsageTotal > .oo-tuple__label::after {
    content: "GL Code:";
    font-size: var(--font-size-s, 0.875rem) !important;
    font-weight: normal !important;
    color: inherit !important;
}

/* ============================== *
 * CHECKOUT - HIDE SHIPPING DISCOUNT DETAILS
 * ============================== */
/* Keeps the shipping discount active in the background while hiding
   the Shipping Discount heading, Free Shipping text, Remove link,
   and Applied Amount from the Billing & Payment page. */
#discounts {
    display: none !important;
}


/* ============================== *
 * CSS CUSTOM PROPERTIES
 * ============================== */
:root {
    /* Brand Colors */
    --brand-primary-color: #2ba7d2;
    --brand-secondary-color: #000000 !important;
     --primaryText: #fff;
    --secondaryText: #fff;
    --hoverColor: grey;
    --text-copy-font-family: "Lato";
    --heading-font: "Oswald";

    /* Layout Variables */
    --categories-per-row-medium: 4;
    --category-products-per-row-large: 5;
    --customization-column-widths: 1fr 3fr;
    --category-product-name-text-alignment: center;
    --category-title-font-size: 2rem;
    --homepage-categories-per-row: 3;
    --homepage-grid-template-areas: "slide" "callouts" "secondary-callouts" "content";
    --homepage-padding: 10px;
    --rounded-corners: 10px;
    --hide-homepage-heading: flex;    /* None or Flex */
    
    /* Component Colors */
    --table-header-background-color: var(--brand-secondary-color);
    --button-primary-background-color: var(--brand-primary-color);
    --button-primary-hover-background-color: var(--brand-secondary-color);
    
    /* Header */
    --header-background-color: #fff;
    --header-link-color: #fff;
    --header-link-visited-color: #fff;
    --header-nav-background-color: var(--brand-primary-color);
    --header-nav-hover-background-color: var(--brand-secondary-color);
    --header-nav-hover-text-color: #fff;
    
    /* Search */
    --search-input-background-color: #f7f7f7;
    --search-input-border-color: #fff;
    --search-input-focus-background-color: #22a6b3;
    
    /* Icons */
    --icon-button-background-color: #fff;
    --icon-button-size: 40px;
    --icon-button-color: var(--brand-primary-color);
    
    /* Identity Selector */
    --identity-selector-background-color: #f7f7f7;
    --identity-selector-border-color: #bdbdbd;
    --identity-selector-text-color: #323232;
    
    /* Slide Tray */
    --slide-tray-background-color: #fff;
    --slide-tray-width: 35%;
    --slide-tray-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
    --tray-overlay-background: rgba(0, 0, 0, 0.5);
    
    /* Navigation */
    --nav-tray-background: #ededed;
    --nav-tray-secondary-background: #d8d8d8;
    --nav-tray-tertiary-background: #b9b9b9;
    --nav-tray-hover-background: #fff;
    --nav-uppercase: none;      /* Uppercase or None */
    
    /* Footer */
    --footer-cta-background: #ffffff;
    --footer-cta-text-color: #313131;
    --footer-cta-gap: 10%;
    --footer-background-color: #d4d3d3;
    --footer-bottom-background-color: #d4d3d3;
    --footer-text-color: #fff;
    --footer-link-color: white;
    --footer-info-box-border-color: #888;
    --footer-border: none;
    --footer-container-max-width: 90%;
    
    /* Callouts */
    --callout-border-color: #fff;
    --callout-accent-color: var(--brand-primary-color);
    --callout-message-background: var(--brand-secondary-color);
    --callout-title-underline-color: #c6ccb5;
    
    /* Categories */
    --category-product-name-font-size:1em;
    --category-overlay-background: #202020c4;
    --category-hover-brightness: 65%;
    --category-default-brightness: 50%;
    
    /* Products */
    --product-border-color: #fff;
    --product-preview-background: #e5e5e5;

}

/* ============================== *
 * TYPOGRAPHY 
 * ============================== */
h1, h2, h3, h4, h5, h6, 
.homepage__secondary-callouts .callout__title {
    font-family: var(--heading-font), sans-serif;
    font-weight: 400;
    font-style: normal;
}

h2 {
    color: var(--text-heading-color, #000000) !important;
    font-size: var(--h2-font-size, 2em) !important;
    margin: auto;
}

h3 {
    font-size: var(--font-size-normal, 1.2rem);
    color: var(--text-heading-color, black) !important;
}

.subtitle {
    font-family: var(--heading-font), sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--callout-accent-color, #dd7347);
    text-align: center;
}

/* ============================== *
 * LAYOUT CONTAINERS
 * ============================== */
.container--homepage {
    grid-template-areas: var(--homepage-grid-template-areas);
    row-gap: 0;
    padding: 0; 
}

.container#bodyContainer {
    width: 100%;
    padding: 0; 
    max-width: 100%;
}

.container#bodyContainer, 
.container {
    padding: 0;
}

.not-wide {
    padding: 2% 10%;
}

/* ============================== *
 * HEADER STRUCTURE
 * ============================== */
header.header--site {
    display: block;
    padding-top: 0;
}

.header__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(2.5 * var(--gutter, 1rem));
    width: 100%;
    background-color: var(--header-background-color);
}

/* Header Left Section */
.header__left {
    display: flex; 
    align-items: center; 
    z-index: 999;
}

.header__left ul {
    list-style: none;
    margin-left: 0;
    display: flex;
    gap: calc(1.25 * var(--gutter, 1rem)) !important;
}

.header__left li {
    display: inline-block;
}

/* Header Center - Logo */
.header__center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: 1;
    text-align: center;
}

header.header--site .header__center {
    grid-area: logo;
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100%;
}

img.header--logo {
    max-height: 115px;
}

/* Header Right Section */
.header__right {
    display: flex;
    align-items: center;
    gap: calc(1.0625 * var(--gutter, 1rem));
    margin-left: auto; 
}

/* Header Navigation */
header.header--site .nav--site {
    grid-area: nav;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: var(--header-nav-background-color, #202020);
    padding: var(--homepage-padding);
}

header.header--site .nav--site > .nav-list {
    display: flex !important; 
    justify-content: space-between;
    width: 70%;
    text-transform: var(--nav-uppercase);
}

header.header--site .nav--site .nav-list li {
    margin-bottom: 0;
    padding: var(--half-gutter, 0.5rem) calc(1.25 * var(--gutter, 1rem));
    margin-right: 0;
}

header.header--site .nav--site .nav-list li:hover {
    background-color: var(--header-nav-hover-background-color, #343434);
}

/* Header User Navigation */
.nav--user {
    display: flex;
    align-items: center;
}

.nav--user ul {
    display: flex;
    gap: var(--gutter, 1rem);
}

header.header--site .nav--user .nav-list.horizontal li:not(:first-of-type) {
    margin-right: 0;
    margin-left: 0;
}

header.header--site .nav--user .nav-list.horizontal li + li {
    padding-left: 0;
}

header.header--site .nav--user .nav-list {
    flex-flow: nowrap;
    gap: calc(1.25 * var(--gutter, 1rem)) !important;
}

.nav-list.horizontal li {
    display: inline-block;
    text-align: center;
}

header.header--site .nav--user {
    grid-area: user-nav;
    justify-self: center;
    z-index: 99999;
}


/* Header Links */
header.header--site a:link, 
header.header--site a:visited {
    color: var(--header-link-color, white);
}

header.header--site .nav--site .nav-list li:hover a {
    color: var(--header-nav-hover-text-color) !important;
}

/* ============================== *
 * SEARCH FUNCTIONALITY
 * ============================== */
header.header--site .search-box {
    grid-area: search;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-inner {
    display: flex;
    align-items: center;
    position: relative;
}

.search-box .input-search {
    height: var(--icon-button-size, 40px);
    width: var(--icon-button-size, 40px) !important;
    font-size: var(--form-input-font-size, 18px);
    letter-spacing: 2px;
    outline: none;
    transition: all 0.4s ease;
    pointer-events: none;
} 

header.header--site .search-box .input-search { 
    background-color: var(--search-input-background-color, #f7f7f7) !important;
    border-radius: 25px !important;
    padding: calc(1.1 * var(--gutter, 1rem)) !important;
    border: 1px solid var(--search-input-border-color) !important;
}

.search-box input[type=text]:focus {
    box-shadow: var(--shadow-standard, 0 2px 5px rgba(0, 0, 0, 0.2));
    color: var(--text-copy-color, #454545) !important;
}

.search-inner:focus-within .input-search {
    width: 300px !important;
    opacity: 1;
    pointer-events: auto !important;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}  

.input-search::placeholder {
    color: var(--color-grey, #888) !important; 
    font-weight: 100 !important;
}

.btn-search {
    border-radius: 50%;
    position: absolute;
    right: 0;
}

/* ============================== *
 * ICONS AND BUTTONS
 * ============================== */
i.fa.fa-shopping-cart, 
i.fa.fa-user, 
i.fa.fa-map-marker, 
i.fa.fa-bars, 
.btn-search,
i.fa.fa-calendar {
    width: var(--icon-button-size, 40px) !important;
    height: var(--icon-button-size, 40px) !important;
    color: var(--icon-button-color, #fff) !important;
    background-color: var(--icon-button-background-color, #202020) !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none !important;
    font-size: calc(1.25 * var(--gutter, 1rem)) !important;
    cursor: pointer !important;
}

i.fa.fa-shopping-cart, 
i.fa.fa-user, 
i.fa.fa-bars, 
.btn-search,
i.fa.fa-calendar {
    border-radius: 50% !important;
}

i.fa.fa-shopping-cart, 
i.fa.fa-user {
    right: 0 !important;
}

i.fa.fa-user {
    z-index: 999999;
    position: relative;
}

i.fa.fa-map-marker {
    z-index: 9999;
    position: relative;
}

.menu-toggle {
    display: inline-block;
    z-index: 99999;
    position: relative;
}

a.button.button--theme--primary {
    width: 200px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 2.2em;
    border-radius: 0px;
    text-transform: uppercase;
}

/* ============================== *
 * IDENTITY SELECTOR
 * ============================== */
.identity-selector {
    position: relative;
    display: inline-flex; 
    align-items: center; 
}

.identity-selector::after {
    content: '\25BC';
    position: absolute;
    right: calc(1.25 * var(--gutter, 1rem));
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--identity-selector-text-color, #323232);
    font-size: var(--font-size-s, 12px); 
    z-index: 9999;
}

.identity-selector:hover::after {
    color: var(--icon-button-background-color, #202020) !important;
}

.identity-selector select {
    height: var(--icon-button-size, 40px) !important;
    width: fit-content;
    padding: var(--quarter-gutter, 0.25rem) !important;
    font-size: var(--form-input-font-size, 18px) !important;
    letter-spacing: 2px !important;
    border: none !important;
    outline: none !important;
    transition: all 0.4s ease !important;
    padding-right: calc(2.8125 * var(--gutter, 1rem)) !important;
    background-color: var(--identity-selector-background-color, #f7f7f7) !important;
    padding-left: calc(1.5625 * var(--gutter, 1rem)) !important;
    appearance: none;
    background-size: 12px 12px;
    color: var(--identity-selector-text-color, #323232);
    border: 1px solid var(--identity-selector-border-color, #bdbdbd) !important;
    cursor: pointer;
    z-index: 1000;
    position: inherit;
    border-radius: 25px;
}   

.identity-selector select:hover {
    color: var(--text-copy-color, #454545);
}

.identity-selector select:focus {
    box-shadow: var(--shadow-standard, 0 2px 5px rgba(0, 0, 0, 0.2));
}

.identity-selector select option {
    background-color: var(--body-background-color, white); 
    color: var(--text-copy-color, black); 
    padding: var(--half-gutter, 0.5rem); 
    font-size: var(--font-size-s, 14px); 
}

.identity-selector select option:hover {
    background-color: var(--color-x-light-grey, #f0f0f0) !important;
}

.identity-selector select option:checked {
    background-color: var(--icon-button-background-color, #202020) !important;
    color: var(--icon-button-color, white); 
}

.identity-selector select option:focus {
    background-color: var(--color-light-grey, #e6e6e6) !important;
}

label#identitySelectorLabel {
    background-color: rgba(255, 255, 255, 0.11);
    margin-right: 0px;
    border-radius: 25px 0 0 25px;
}

/* ============================== *
 * NAVIGATION DROPDOWNS
 * ============================== */
.has-children ul {
    background: var(--header-nav-background-color, #202020);
    border: 0;
}

.has-children:hover > a {
    color: var(--header-link-color, white) !important;
    background: var(--header-nav-hover-background-color, #343434) !important;
}

.has-children ul a:hover {
    background: none !important;
}

li.has-children {
    width: fit-content;
    min-width: 200px;
}

/* ============================== *
 * SLIDE OUT TRAYS (MOBILE MENU)
 * ============================== */
.slide-tray {
    position: fixed;
    top: 0;
    height: 100%;
    width: var(--slide-tray-width, 35%);
    background-color: var(--slide-tray-background-color, #fff);
    z-index: 1001;
    box-shadow: var(--slide-tray-shadow, 2px 0px 10px rgba(0, 0, 0, 0.2));
    transform: translateX(-100%); 
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow-y: auto;
}

.left-tray {
    left: 0;
    transform: translateX(-105%);
}

.right-tray {
    right: 0;
    transform: translateX(100%);
}

.left-tray, .right-tray {
    z-index: 1001; 
}

.slide-tray.active {
    transform: translateX(0);
}

.tray-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--tray-overlay-background, rgba(0, 0, 0, 0.5));
    z-index: 1000;
    transition: opacity 0.4s ease out;
    opacity: 0;
}

.tray-overlay.active {
    display: block;
    z-index: 999999;
    opacity: 1;
}

.left-tray.active {
    left: calc(-4.6875 * var(--gutter, 1rem));
    transform: translateX(-100%);
    z-index: 9999999;
    padding-left: calc(1.5625 * var(--gutter, 1rem));
}

.right-tray.active {
    right: calc(-4.6875 * var(--gutter, 1rem));
    z-index: 9999999;
    padding-right: calc(2.8125 * var(--gutter, 1rem));
}

.left-tray.active, .right-tray.active {
    transform: translateX(0);
}  

.left-tray a, .right-tray a, .left-tray button, .right-tray button {      
    position: relative; 
}  

/* Tray Navigation Structure */
.tray.has-children > ul,
.tray2.has-children > ul,
.tray3.has-children > ul {
    display: none !important; 
}

.has-children.tray ul {
    position: relative;
}

.has-children.tray ul ul {
    left: 0;
    top: 0;
    background: var(--nav-tray-secondary-background, #d8d8d8);
    border-bottom: 1px solid var(--color-grey, grey);
    border-top: 1px solid var(--color-grey, grey);
}

.has-children.tray ul ul ul {
    background: var(--nav-tray-tertiary-background, #b9b9b9);
}

.tray.active > ul,
.tray2.active > ul,
.tray3.active > ul {
    display: block !important; 
}

.nav--site .has-children:hover > ul {
    display: block;
}

.slide-tray li a {
    color: var(--text-copy-color, black) !important;
    padding: 0 calc(1.875 * var(--gutter, 1rem));
    line-height: 3;
}

#leftTray ul, #rightTray ul {
    list-style: none;
    line-height: 3;
    font-size: var(--form-input-font-size, 18px) !important;
    letter-spacing: 2px !important;
    width: 100%;
    margin-left: 0em;
}

#leftTray nav {
    padding-left: calc(3.4375 * var(--gutter, 1rem));
    padding-top: calc(3.4375 * var(--gutter, 1rem));
}

#rightTray nav {
    padding-left: calc(3.4375 * var(--gutter, 1rem));
    padding-top: calc(3.4375 * var(--gutter, 1rem));
}

.has-children.tray ul {
    color: var(--text-copy-color, #000000) !important;
    background: var(--nav-tray-background, #ededed);
}

.has-children.tray:hover > a, 
.has-children.tray2:hover > a, 
.has-children.tray3:hover > a {
    color: #000 !important;
    background: var(--nav-tray-hover-background, #dd6220) !important;
}

.has-children.tray .has-children.tray2 > a::after, 
.has-children.tray .has-children.tray3 > a::after {
    content: "\f107" !important;
}

.has-children > a::after {
    margin-left: 10px;
    right: initial;
    content: "\f078";
    font-family: "FontAwesome";
    position: absolute;
    right: 8px; 
}

/* ============================== *
 * SLIDER/BANNER
 * ============================== */
.homepage__slider {
    max-width: none;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: auto;
    padding: var(--homepage-padding);
}
.owl-carousel .owl-stage-outer{
    border-radius: var(--rounded-corners);
}
.slide__image img {
    height: 500px !important;
    object-fit: cover;
    object-position: center;
}

@media all and (max-width: 1034px) {
    .slide__image img {
        height: 250px !important;
    }
}
.products.products--grid .product__image img {
    border-radius: var(--rounded-corners);
}
.slide img {
    border: 0;
    background: var(--body-background-color, white);
    box-shadow: var(--homepage-slide-shadow, none);
}

.slider {
    width: 100%;
    margin-top: 0;
}

.owl-stage {
    padding-bottom: 0;
}

.slide.style-b .slide__title .title, 
.slide.style-a .slide__title .title {
    font-family: "Bowlby One", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--text-heading-color, black);
    font-size: var(--h1-font-size, var(--font-size-xxxl, 2.488rem));
}

.slide.style-a {
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 2fr;
    grid-gap: 0;
}

.slide__contents {
    padding: 5%;
    border: 1px solid var(--callout-border-color, #d6d6d6);
    height: 100%;
}

.slide.style-a .slide__image {
    border: 1px solid var(--callout-border-color, #d6d6d6);
}

/* ============================== *
 * CATEGORY GRID
 * ============================== */
.cats {
    display: grid;
    gap: var(--homepage-padding);
    margin: var(--homepage-padding);
    grid-template: auto / repeat(var(--homepage-categories-per-row), 1fr);
}

.cat {
    margin-bottom: 0;
    display: initial;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 300px;
    background: radial-gradient(circle, rgba(60, 60, 60, 0.7) 0%, rgba(40, 40, 40, 0.9) 100%);
    max-height: 350px;
    min-width: 300px;
    border-radius: var(--rounded-corners);
}

.cat .cat__image {
    height: auto;
    width: 100%;
    margin: 0 auto;
    display: block;
    transform: scale(1.2);
    background: radial-gradient(rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.72));
    backdrop-filter: opacity(3.5);
    box-shadow: var(--shadow-standard, 0 19px 38px rgba(0, 0, 0, 0.3)), 0 15px 12px rgba(0, 0, 0, 0.2);
    transition: 1s ease;
    filter: brightness(var(--category-default-brightness, 50%));
    transform-origin: center center;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    max-height: 300px;
    object-fit: cover;
}

.cat .cat__image:hover {
    transform: scale(1.1);
    opacity: 1;
    filter: brightness(var(--category-hover-brightness, 65%));
}

.cats__title {
    margin: calc(3 * var(--gutter, 1rem)) 0;
}

.cat__link h3 {
    text-align: center;
    top: 50%;
    color: var(--homepage-category-link-color, white) !important;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.63);
    font-size: var(--h2-font-size, 2em);
    position: absolute;
    bottom: 50%;
    z-index: 10;
    width: 100%;
    margin: auto;
    padding: 0;
}

a.king-cat-title {
    color: var(--homepage-category-link-color, #ffffff) !important;
    font-size: var(--h2-font-size, 2em) !important;
    margin: auto;
    text-align: center;
    font-family: "Bowlby One", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.56);
}

/* ============================== *
 * CALLOUTS
 * ============================== */

/* Main Callouts */
.homepage__callouts .callouts {
    grid-template: auto / repeat(4, 1fr);
    grid-gap: var(--homepage-padding);
    margin: var(--homepage-padding);
}

.homepage__callouts .callout {
    box-shadow: none;
    border: 1px solid var(--callout-border-color, #d6d6d6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    min-height: 500px;
}

figure.callout {
    text-align: center;
}

figure.callout.hide {
    display: var(--hide-homepage-heading);
}

.homepage__callouts .callout .img-wrap {
    position: initial;
    display: block;
    width: 100%;
    margin: auto;
    height: 100%;
    border-radius: var(--rounded-corners)
}

.homepage__callouts h2 {
    width: 80%;
}

.callout--title h2::after {
    content: "";
    display: block;
    width: calc(2.5 * var(--gutter, 1rem));
    height: var(--quarter-gutter, 0.25rem);
    background-color: var(--callout-title-underline-color, #c6ccb5);
    margin: var(--half-gutter, 0.5rem) auto;
    border-radius: 3px;
}

.callout--title {
    font-family: var(--heading-font), sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--text-heading-color, #000000);
    line-height: 2;
    margin-top: var(--half-gutter, 0.5rem);
}

.callout--subtitle.first {
    font-family: var(--heading-font), sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--callout-accent-color, #dd7347);
    text-align: center;
}

.callout--subtitle {
    font-family: "42dot Sans", sans-serif;
    font-weight: 800;
    font-style: normal;
    color: var(--callout-accent-color, #dd7347);
    line-height: 2;
    margin-bottom: var(--half-gutter, 0.5rem);
}

.callout__cta {
    background-color: var(--body-background-color, white);
    width: fit-content;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 3em;
    margin-left: 10%;
    margin-top: 5%;
    color: var(--text-copy-color, black);
    min-width: 200px;
    padding: 0px 15px;
}

.callout--message {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--callout-message-background, #db754e);
    padding: var(--half-gutter, 0.5rem) calc(1.25 * var(--gutter, 1rem));
    color: var(--icon-button-color, white);
}

/* Secondary Callouts */
.homepage__secondary-callouts .callout__title {
    font-size: 5em;
    text-align: left;
    padding: 0 10%;
    font-size: clamp(2rem, 3vw + 1rem, 5em) !important;
}

.homepage__secondary-callouts .callouts {
    grid-template: auto / repeat(2, 1fr);
    grid-gap: 0;
}

.homepage__secondary-callouts .callout {
    background: radial-gradient(circle, rgb(255 255 255 / 0%) 0%, rgb(0 0 0 / 22%) 60%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    position: relative;
    min-height: 70vh;
    margin: var(--homepage-padding);
    border-radius: var(--rounded-corners);
}

.homepage__secondary-callouts .callout__image {
    box-shadow: var(--homepage-secondary-callout-shadow, none);
}

.homepage__secondary-callouts .callout__image img {
    display: block;
    width: 100%;
    height: 70vh;
    object-fit: cover;
    min-height: 500px;
}

.homepage__secondary-callouts .callout a {
    color: var(--homepage-category-link-color, white) !important;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.19);
}

.homepage__secondary-callouts .callout a:hover {
    color: initial;
}

.img-wrap.has-bg-image {
    width: 100%;
    height: 300px; 
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
}

figure.callout:hover .img-wrap.has-bg-image {
    background-image: var(--bg-img-hover);
}

/* ============================== *
 * FOOTER 
 * ============================== */
.footer-wrapper {
    margin-top: 0;
    background: var(--footer-background-color, #2b2c2c);
    border-top: var(--footer-border, none);
}

footer.footer--site {
    grid-template-areas: var(--footer-grid-template-areas, 
                                "logo" 
                                "footer-cta" 
                                "sm-links" 
                                "cc" 
                                "nav" 
                                "content" 
                                "copyright" 
                                "legal");
}

footer.footer--site .header__center {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-area: logo;
    position: relative;
    width: 100%;
    margin: auto;
}

.footie-top-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;
}

.footer--infoBox {
    display: flex;
    align-items: center;
    border-right: 1px solid var(--footer-info-box-border-color, #888);
    padding: 0 calc(1.875 * var(--gutter, 1rem));
    width: 305px;
    flex-direction: column;
    height: 23px;
}

.footer--infoBox:last-child {
    border-right: none;
}

.footer-cta {
    grid-area: footer-cta;
    background-color: var(--footer-background-color, #2b2c2c);
    padding: calc(2.5 * var(--gutter, 1rem)) 0;
    color: var(--footer-text-color, #fff);
    font-family: "42dot Sans", sans-serif;
}

.single-cta {
    display: flex;
    align-items: center;
    gap: var(--gutter, 1rem);
}

.single-cta i {
    font-size: calc(1.5 * var(--gutter, 1rem));
    color: var(--footer-text-color, #fff);
}

.cta-text span {
    font-size: var(--font-size-normal, 1rem);
    line-height: 1.5;
    color: var(--footer-text-color, #fff);
}

footer.footer--site .copyright p {
    color: white !important;
}



/* Footer CTA Title Section */
.cta__title {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 20px 0;
}

.callout--title h2 {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
}

/* Footer CTA Section */
.footer-cta-section {
    width: 100%;
    background-color: var(--footer-cta-background);
}

.cta-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 80%;
    margin: 20px auto;
    flex-wrap: wrap;
    grid-gap: var(--footer-cta-gap);
}

.cta--infoBox {
    flex: 1;
    max-width: 300px;
    min-width: 200px;
}

.single-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

.single-cta:hover {
    transform: translateY(-5px);
}

.footer-cta-section .cat__image {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 15px;
}

.cta-text {
    width: 100%;
}

.cta-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--footer-cta-text-color);
    margin-bottom: 8px;
    line-height: 1.3;
}

.cta-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.4;
}

.cta-link {
    font-size: 14px;
    color: #007bff;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.cta-link:hover {
    color: #0056b3;
}

.nav-list.horizontal.legal p, 
footer.footer--site a {
    color: var(--footer-link-color, white) !important;
}

/* ============================== *
 * CATEGORY PAGES
 * ============================== */
.king-cats-main-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
}

.king-cats-main {
    flex: 1 1 calc(33.3% - calc(1.25 * var(--gutter, 1rem))); 
    margin: 0px; 
    position: relative;
}

.king-cat-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--homepage-category-link-color, white); 
    font-size: var(--font-size-xl, 1.5rem); 
    text-align: center;
    z-index: 1; 
}

.king-cat__image {
    display: block; 
    width: 100%; 
    height: auto;
}

.page__title h1:after {
    content: "";
    display: block;
    width: calc(2.5 * var(--gutter, 1rem));
    height: var(--quarter-gutter, 0.25rem);
    background-color: var(--callout-title-underline-color, #c6ccb5);
    margin: var(--half-gutter, 0.5rem) auto;
    border-radius: 3px;
}

/* ============================== *
 * PRODUCT LANDING PAGE
 * ============================== */
.product-landing::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--product-border-color, grey);
    transform: translateX(-50%);
    z-index: 1;
}

.product-landing {
    grid-gap: 0;
    display: grid;
    position: relative;
    min-height: 100vh;
}

.product-landing .product__images img {
    max-width: 60%;
    margin: auto;
    margin-top: 10px;
}

.product-landing .product__info {
    padding: 2%;
}

h2.inserted-product-title {
    text-align: left;
    margin-top: calc(1.5625 * var(--gutter, 1rem));
}

/* ============================== *
 * PRODUCT GRID 
 * ============================== */
figure.product {
    outline: 1px solid var(--product-border-color, grey);
    outline-offset: 0px;
}

.products.products--grid {
    grid-gap: var(--homepage-padding);
    margin: auto;
    justify-content: center;
    padding: var(--homepage-padding);
}

.products.products--grid .product__cta, 
.category__cta {
    display: none;
}

.products.products--grid .product {
    margin: auto;
    max-width: 500px;
    height: 100%;
    min-height: 300px;
    min-width: 100%;
    display: grid;
}

figcaption.product__info {
    text-align: center;
    padding: 15px;
}

/* ============================== *
 * CONFIGURATION/CUSTOMIZATION
 * ============================== */
.config__preview {
    background: var(--product-preview-background, #e5e5e5);
}

.configuration-wrapper {
    grid-template-areas:
        "title preview"
        "budget preview"
        "config preview"
        "configfinish preview";
    gap: 0;
    margin-top: 0;
}


#btnDownloadProof a.button.button--small.button--theme--primary, 
button#btnResetTemplate {
    height: 38px !important;
    border-radius: 4px !important;
    vertical-align: middle;
    margin: 2em;
}

.accordion__panel__header {
    border-radius: 0;
    border: 1px solid #ebebeb !important;
    background: #ebebeb;
}

.configuration-wrapper h1 {
    padding: 3% 4% !important;
}

div#pfActions p {
    display: inline-block;
}

.configuration-wrapper .config__preview #followme #pfActions {
    display: inline-block;
    align-items: start;
    justify-items: center;
}

.configuration-wrapper #configureDiv {
    grid-area: config;
    padding: 0;
}

.accordion__panel__header {
    border: 0;
}

.accordion__panel.open .accordion__panel__content {
    border: 0;
    padding: 15px;
}

.multipage-preview {
    display: grid;
    grid-template: auto / repeat(3, 1fr);
    gap: var(--gutter);
    max-height: fit-content;
    overflow-y: hidden;
    align-items: start;
    justify-items: start;
    border: 1px dotted var(--color-x-light-grey);
    overscroll-behavior: contain;
    margin: 0;
    padding: 5%;
}

.configuration-wrapper .configure__finish {
    grid-area: configfinish;
    display: grid;
    grid-template: auto / 1fr;
    gap: var(--gutter);
    padding-top: var(--gutter);
    border-top: 1px solid var(--divider-color);
    padding: 5%;
}

/* ============================== *
 * LOGIN PAGE
 * ============================== */
.login__box fieldset {
    padding: var(--gutter);
    background: #ffffff7d;
    backdrop-filter: blur(3px);
    border-radius: 10px;
}

.login__box .swap-pane .swap-trigger.current {
    background: #ffffff6e;
    color: var(--color-dark-grey);
}

.login__box .swap-pane .swap-trigger {
    padding: 0.25em 1em;
    background: #36363663;
    color: var(--body-background-color);
    border-radius: 4px 4px 0 0;
}

.login__box .swap-pane {
    display: flex;
    justify-content: center;
}

.login__box .form input[type=text], .login__box .form input[type=password], .login__box .form input[type=email] {
    background: var(--body-background-color);
    opacity: 1;
    border-radius: 4px;
    border: 0px;
}

/* ============================== *
 * CATEGORY DISPLAY
 * ============================== */
.category {
    display: initial;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: radial-gradient(circle, rgba(60, 60, 60, 0.7) 0%, rgba(40, 40, 40, 0.9) 100%);
    border-radius: var(--rounded-corners);
}

.categories {
    gap: var(--homepage-padding);
    grid-template-columns: repeat(auto-fit, minmax(333px, 1fr));
}

.category:hover {
    transition: .8s ease;
}

.category__copy, 
.category__title {
    padding: 0 1vw;   
}

.category__title {
    position: absolute;
    bottom: 50%;
    z-index: 10;
    width: 100%;
    margin: auto;
    padding: 0;
}

.category .category__title a:link, 
.category .category__title a:visited, 
.category .category__title a:hover, 
.category .category__title a:active {
    color: var(--homepage-category-link-color, white);
}

.category__info {
    display: none;
}

.category__cta {
    display: none;
    height: 0px;
}

.category__image img:hover {
    transform: scale(1.1);
    opacity: 1;
    transition: 1s ease;
    filter: brightness(var(--category-hover-brightness, 65%));
}

.category__image {
    overflow: hidden;
}

.category__image img {
    height: auto;
    width: 100%;
    margin: 0 auto;
    display: block;
    transform: scale(1.2);
    background: radial-gradient(rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.72));
    backdrop-filter: opacity(3.5);
    box-shadow: var(--shadow-standard, 0 19px 38px rgba(0, 0, 0, 0.3)), 0 15px 12px rgba(0, 0, 0, 0.2);
    transition: 1s ease;
    filter: brightness(var(--category-default-brightness, 50%));
    transform-origin: center center;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    max-height: 300px;
    object-fit: cover;
}

section.categories.subcategories {
    padding-top: 0 !important;
}

* + .categories, 
.categories + * {
    margin-top: 0px;
}

.categories + .products {
    margin-top: 0px;
    padding-top: 0px !important;
}

.container:has(.categories) {
    grid-gap: 0;
}
section.categories.topcategories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
    justify-content: center;
    gap: 20px;
}

/* ============================== *
 * BULK ORDERING
 * ============================== */
.page__text, 
.toggleWidget, 
section#bulkOrderingView {
    width: 80% !important;
    padding: var(--container-padding) !important;
    max-width: 100%;
    margin: auto;
}

.page__text + .categories {
    border-top: 0;
    padding-top: var(--gutter);
}

.categories:has(select#selectedSubcategory) {
    --local-categories-per-row: 1;
    display: grid;
    grid-template-columns: repeat(var(--local-categories-per-row, var(--categories-per-row-medium)), 1fr);
    margin: auto;
    margin-bottom: calc(3.125 * var(--gutter, 1rem));
}

/* ============================== *
 * RESPONSIVE DESIGN - MOBILE
 * ============================== */

/* Mobile: Single column stack, NO line */
@media screen and (max-width: 767px) {
    .product-landing {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "images"
            "info" 
            "pricing";
    }
    
    /* Remove line on mobile */
    .product-landing::after {
        display: none;
    }
}

/* Desktop: Two columns WITH line */
@media screen and (min-width: 768px) {
    .product-landing {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "images info"
            "images pricing";
    }
    
    /* Keep/restore the dividing line on desktop */
    .product-landing::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: grey;
        transform: translateX(-50%);
        z-index: 1000 !important;
        position: absolute !important;
        right: 0 !important;
    }
    
    .btn-search {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        z-index: 1001 !important;
    }
    
    /* Ensure hamburger menu is visible */
    .menu-toggle {
        display: block !important;
        z-index: 9999 !important;
    }
}

/* ============================== *
 * MOBILE SLIDE-OUT TRAY IMPROVEMENTS
 * ============================== */
@media all and (max-width: 1034px) {
    .slide-tray {
        width: 85% !important;
        max-width: 350px !important;
    }
    
    .left-tray.active,
    .right-tray.active {
        transform: translateX(0) !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 !important;
    }
    
    .left-tray.active {
        left: 0 !important;
    }
    
    .right-tray.active {
        right: 0 !important;
    }
    
    /* Tray Navigation Improvements */
    #leftTray nav,
    #rightTray nav {
        padding: 30px 20px !important;
    }
    
    #leftTray ul,
    #rightTray ul {
        font-size: 16px !important;
        letter-spacing: 1px !important;
    }
    
    .slide-tray li a {
        padding: 0 20px !important;
        line-height: 2.5 !important;
        font-size: 16px !important;
    }
}

.homepage__slider {
        grid-area: slide;
}

/* ============================== *
 * MOBILE CONTENT FIXES
 * ============================== */
@media all and (max-width: 1034px) {
    /* Fix main containers */
    .container#bodyContainer {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }
    
    /* Fix slider/banner */
    .homepage__slider,
    .slider,
    .owl-carousel {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    .slide__image img {
        width: 100% !important;
        height: 40vh !important;
        object-fit: cover !important;
    }


    
    /* Fix callouts grid */
    .homepage__callouts .callouts {
        grid-template: auto / 1fr !important;
        padding: 0 15px !important;
    }
    
    .homepage__secondary-callouts .callouts {
        grid-template: auto / 1fr !important;
        padding: 0 15px !important;
    }
    
    /* Fix category grid */
    .cats {
        flex-direction: column !important;
        padding: 0 15px !important;
    }
    
    .cat {
        min-width: unset !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    /* Fix footer CTA section */
    .footer-cta-section {
        padding: 20px 15px !important;
    }
    
    .cta-row {
        flex-direction: column !important;
        gap: 20px !important;
    }
}

/* ============================== *
 * TABLET RESPONSIVE (768px - 1033px)
 * ============================== */
@media all and (min-width: 768px) and (max-width: 1033px) {
    .header__top {
        padding: 20px 30px !important;
    }
    
    .header__center {
        max-width: 150px !important;
    }
    
    img.header--logo {
        max-height: 60px;
    }
    
    .slide-tray {
        width: 50% !important;
    }
    
    .homepage__callouts .callouts {
        grid-template: auto / repeat(2, 1fr) !important;
    }

    .search-box {
        display: none !important;
    }
    
    .search-inner:focus-within .input-search {
        width: 300px !important;
    }
}

/* ============================== *
 * SMALL MOBILE (max-width: 480px)
 * ============================== */
@media all and (max-width: 480px) {
    .header__top {
        padding: 12px 15px !important;
        min-height: 60px !important;
    }
    
    .header__center {
        max-width: 100px !important;
    }
    
    img.header--logo {
        max-height: 40px;
    }
    
    /* Smaller icons for very small screens */
    i.fa.fa-bars, 
    i.fa.fa-shopping-cart, 
    i.fa.fa-user, 
    i.fa.fa-search, 
    .btn-search {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    .search-box {
        display: none !important;
    }

    .header__left,
    .header__right {
        gap: 8px !important;
    }
    
    .nav--user ul {
        gap: 8px !important;
    }
    
    .search-inner:focus-within .input-search {
        width: 200px !important;
    }
    
    .slide-tray {
        width: 95% !important;
    }
    
    /* Adjust content spacing */
    .homepage__callouts .callout {
        min-height: 200px !important;
    }
    
    .slide__image img {
        height: 30vh !important;
    }
}

/* ============================== *
 * ACCESSIBILITY & TOUCH IMPROVEMENTS
 * ============================== */
@media all and (max-width: 1034px) {
    button, 
    a, 
    .menu-toggle, 
    .cart-indicator, 
    .btn-search {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 1rem !important;
        line-height: 1.3 !important;
    }
    
    p {
        margin-bottom: 1rem !important;
    }

    button:focus,
    a:focus,
    input:focus {
        outline: 2px solid #D62300 !important;
        outline-offset: 2px !important;
    }
}

/* ============================== *
 * UTILITY CLASSES
 * ============================== */
.header-wrapper {
    padding-bottom: 0;
    border-bottom: 0;
}

.container.container--header {
    width: 100%;
}

.callout--title h2 {
    text-align: center;
    margin: auto;
}

@media all and (max-width: 1280px) {
    .homepage__callouts .callout {
        min-height: 380px;
    }
    
    .homepage__callouts h2 {
        font-size: var(--font-size-l, 1.4em);
    }
    
    header.header--site .nav--site .nav-list {
        width: 90%;
    }
}

@media all and (max-width: 1034px) {
    header.header--site .nav--site {
        display: none;
    }
    
    /* Mobile Icon Sizing */
    i.fa.fa-bars, i.fa.fa-shopping-cart, i.fa.fa-user, i.fa.fa-map-marker, i.fa.fa-search, .btn-search {
        width: calc(2.1875 * var(--gutter, 1rem)) !important;
        height: calc(2.1875 * var(--gutter, 1rem)) !important;
        border: none !important;
        font-size: var(--gutter, 1rem) !important;
    }
    
    .container#bodyContainer, .container {
        padding: 0;
    }
    
    .identity-selector select {
        height: calc(2.1875 * var(--gutter, 1rem)) !important;
        padding: var(--quarter-gutter, 0.25rem) !important;
        font-size: var(--font-size-s, .8em) !important;
        margin-left: calc(-2.1875 * var(--gutter, 1rem));
        padding-left: calc(3.125 * var(--gutter, 1rem)) !important;
    }
    
    .search-box .input-search {
        height: calc(2.1875 * var(--gutter, 1rem)) !important;
        width: calc(2.1875 * var(--gutter, 1rem)) !important;
        font-size: var(--font-size-s, .8em) !important;
    }
    
    header.header--site .search-box .input-search {
        padding: 0 var(--gutter, 1rem) !important;
    }
    
    .slide-tray {
        width: 45%;
    }
    
    header.header--site .nav--user .nav-list.horizontal {
        gap: calc(1.0625 * var(--gutter, 1rem)) !important;
    }
    
    header.header--site .nav--user {
        justify-content: flex-end;
    }
    
    .homepage__callouts .callout {
        min-height: 350px;
    }
}

@media all and (max-width: 768px) {
    .header__top {
        padding: calc(1.25 * var(--gutter, 1rem));
    }
    
    .identity-selector {
        display: none;
    }
    
    .slide-tray {
        width: 85%;
    }
    
    header.header--site .header__center img {
        max-height: 75px;
    }
    
    .search-inner:focus-within .input-search {
        width: 225px !important;
    }
    
    header.header--site .nav--user .nav-list.horizontal li + li {
        border-left: none;
    }
    
    .homepage__callouts .callout {
        min-height: 275px;
    }
    
    .homepage__callouts .callouts {
        grid-template: auto / repeat(2, 1fr);
    }
    
    /* Footer CTA Responsive */
    .cta-row {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    
    .cta--infoBox {
        max-width: 280px;
        width: 100%;
    }
    
    .footer-cta-section .cat__image {
        width: 50px;
        height: 50px;
    }
    
    .footer-cta-section .callout--title h2 {
        font-size: 28px;
    }
}

@media all and (max-width: 480px) {
    /* Smaller Mobile Icons */
    i.fa.fa-bars, i.fa.fa-shopping-cart, i.fa.fa-user, i.fa.fa-map-marker, i.fa.fa-search, .btn-search {
        width: calc(1.5625 * var(--gutter, 1rem)) !important;
        height: calc(1.5625 * var(--gutter, 1rem)) !important;
        border: none !important;
        font-size: var(--font-size-s, 12px) !important;
    }
    
    .identity-selector select {
        height: calc(1.5625 * var(--gutter, 1rem)) !important;
        padding: var(--quarter-gutter, 0.25rem) !important;
        font-size: var(--font-size-s, .8em) !important;
        margin-left: calc(-1.5625 * var(--gutter, 1rem));
        padding-left: calc(1.875 * var(--gutter, 1rem)) !important;
    }
    
    .search-box .input-search {
        height: calc(1.5625 * var(--gutter, 1rem)) !important;
        width: calc(0.3125 * var(--gutter, 1rem)) !important;
        font-size: var(--font-size-s, .8em) !important;
    }
    
    header.header--site .search-box .input-search {
        padding: 0 var(--three-quarter-gutter, 0.75rem) !important;
    }
    
    header.header--site .nav--user .nav-list.horizontal {
        gap: calc(1.0625 * var(--gutter, 1rem)) !important;
    }
    
    header.header--site .nav--user {
        width: 70px;
        justify-content: flex-end;
    }
    
    header.header--site .header__center img {
        max-height: 55px;
    }
    
    .homepage__callouts .callout {
        min-height: 225px;
    }
    
    .callout__cta {
        width: fit-content;
        padding: 0 var(--three-quarter-gutter, 0.75rem);
    }
    
    .homepage__secondary-callouts .callout__title {
        font-size: var(--font-size-l, 22px) !important;
    }
    
    .callout--subtitle.first {
        font-size: var(--font-size-s, .8em) !important;
    }
    
    .callout--title {
        font-size: var(--font-size-s, .8em) !important;
    }
    
    /* Footer CTA Small Mobile */
    .footer-cta-section {
        padding: 30px 15px;
    }
    
    .cta__title {
        padding: 15px 15px 0;
    }
}

    /* Cart Indicator Specific Styling */
    .cart-indicator {
        position: relative;
        display: flex;
    }
    
    .cart-indicator a {
            display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    }
    
    .cart-content-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #D62300;
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    }

/* ============================== *
 * MOBILE HEADER
 * ============================== */

/* Global Mobile Overflow Prevention */
@media all and (max-width: 1034px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    * {
        box-sizing: border-box;
    }
    
    img, video, iframe, object, embed {
        max-width: 100%;
        height: auto;
    }
    
    .header-wrapper {
        width: 100%;
        max-width: 100vw;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }
    
    .container.container--header {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    
    header.header--site {
        display: block !important;
        width: 100%;
        padding: 0;
        grid-template: none !important;
        grid-template-areas: none !important;
    }
    
    .header__top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        width: 100%;
        background-color: var(--header-background-color);
        position: relative;
        min-height: 70px;
        box-sizing: border-box;
    }
    
    /* Left Section - Hamburger & Search */
    .header__left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        z-index: 999;
        flex-shrink: 0;
    }
    
    .header__left ul {
        display: flex !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .header__left li {
        display: flex !important;
    }
    
    /* Center Section - Logo */
    .header__center {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 120px !important;
        z-index: 1;
    }
    
    img.header--logo {
        max-height: 75px !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    
    /* Right Section - User & Cart */
    .header__right {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        z-index: 999;
        flex-shrink: 0;
    }
    
    .nav--user {
        display: flex !important;
        align-items: center !important;
    }
    
    .nav--user ul {
        display: flex !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        align-items: center !important;
    }
    
    .nav--user li {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Mobile Icon Styling */
    i.fa.fa-bars, 
    i.fa.fa-shopping-cart, 
    i.fa.fa-user, 
    i.fa.fa-search, 
    .btn-search {
        width: 44px !important;
        height: 44px !important;
        background-color: var(--icon-button-background-color, #2B0200) !important;
        color: var(--icon-button-color, #fff) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        border: none !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide mobile-only text */
    .mobile-only {
        display: none !important;
    }
    
    /* Search Box Mobile Styling */
    .search-box {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .search-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .search-box .input-search {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        border: none !important;
        background: var(--search-input-background-color, #f7f7f7) !important;
        padding: 0 44px 0 12px !important;
        font-size: 14px !important;
        pointer-events: none !important;
        transition: all 0.3s ease !important;
    }
    
    .search-inner:focus-within .input-search {
        width: 250px !important;
        border-radius: 22px !important;
        pointer-events: auto !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        z-index: 1;
    }
}

@media all and (max-width: 680px) {
  .configuration-wrapper {
    grid-template-areas:
        "title"
        "budget"
        "config"
        "preview"
        "configfinish";
    gap: 0;
    margin-top: 0;
  }
}

.footer-content {
    position: relative;
    z-index: 2;
    margin-top: 50px;
}
.footer-logo {
  margin-bottom: 30px;
}
.footer-logo img {
    max-width: 200px;
}

.footer-text {
  width: 85%;
}

.footer-text p {
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--secondaryText);
    line-height: 28px;
}

.footer-social-icon span {
    color: var(--secondaryText);
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-social-icon a {
    color: var(--secondaryText);
    font-size: 16px;
    margin-right: 15px;
}

.footer-social-icon i {
    text-align: center;
    border-radius: 50%;
	  width:25% !important;
}

li.sm-list-item {
    width: 12% !important;
}

.footie-row {
  display: grid;
  grid-row-gap: 25px;
  grid-column-gap: 25px;
  grid-template-areas: 'col1 col2';
}

@media screen and (max-width: 1080px){
  .footie-row {
      grid-template-areas:
          'col1'
          'col2';
      margin-left: 10%;
  }
}

.footer--column,
.footer--infoBox {
    width: 27vw;
}

.footer--infoBox {
    margin-left: 20%;
}

.footer-widget-heading h3 {
    font-family: var(--text-copy-font-family);
  color: var(--secondaryText) !important;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 40px;
  position: relative;
}

.footer-widget-heading h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  height: 2px;
  width: 50px;
  background: var(--hoverColor);
}

.footer-widget ul {
    margin-left: 0px;
}

.footer-menu ul {
    float: right;
}

.footer-menu li {
  display: inline-block;
  margin-left: 20px;
}

.footer-menu li:hover a{
  color: var(--hoverColor);
}

.footer-menu li a {
  font-size: 14px;
  color: var(--secondaryText);
}

.footer-widget ul li {
    display: inline-block;
    float: left;
    margin-bottom: 12px;
    width: 50%;
}

.footer-widget ul li a:hover{
    color: var(--hoverColor);
}

.footer-widget ul li a {
    color: var(--secondaryText);
    text-transform: capitalize;
}

.floater {
  float: right;
}

.subscribe-form {
    position: relative;
    overflow: hidden;
}

.subscribe-form input {
    width: 100%;
    padding: 14px 28px;
    background: var(--secondaryBg);
    border: 1px solid var(--secondaryBg);
    color: var(--primaryText);
}

.subscribe-form button {
    position: absolute;
    right: 0;
    background: var(--hoverColor);
    padding: 13px 20px;
    border: 1px solid var(--hoverColor);
    top: 0;
}

.subscribe-form button i {
    color: var(--primaryText);
    font-size: 22px;
    transform: rotate(-6deg);
}

.footie-bottom-row {
  display: grid;
  grid-row-gap: 25px;
  grid-column-gap: 25px;
  grid-template-areas: 'col1 col2';
}

@media screen and (max-width: 1080px){
  .footie-bottom-row {
      grid-template-areas:
          'col1'
          'col2';
  }
}
.copyright-area{
    background: var(--footer-bottom-background-color, #2b2c2c);
    padding: 1% 5%;
} 

.copyright-text p {
    margin: 0;
    font-size: 14px;
    color: var(--secondaryText);
}
.copyright-text p a{
    color: var(--hoverColor);
}
.footer-menu .cc-list li {
  width: 30px;
}
 /* Fix */
@media screen and (max-width: 1400px) {
  header.header--site .nav--site .nav-list {
    width: 100%;
    justify-content: center;
    gap: 0;
  }
  
  header.header--site .nav--site .nav-list li {
    padding: 0.5rem 0.6rem;
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 1200px) {
  header.header--site .nav--site .nav-list li {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
  }
}

@media screen and (max-width: 1100px) {
  header.header--site .nav--site {
    display: none !important;
  }
}

@media screen and (max-width: 1200px) {
  .not-wide {
    padding: 2% 5%;
  }
}

@media screen and (max-width: 992px) {
  .not-wide {
    padding: 2% 3%;
  }
}
.homepage__callouts {
    display: none !important;
}
.footer-social-icon {
    display: none !important;
}
.cats__title .subtitle {
    display: none !important;
}
/* Footer text */
.footer-wrapper,
.footer-wrapper p,
.footer-wrapper span,
.footer-wrapper a,
.footer-wrapper h3,
.footer-wrapper li,
.footer-wrapper .cta-text span,
.footer-wrapper .copyright-text p,
.footer-wrapper .footer-widget ul li a,

/* Copyright area */
.copyright-area,
.copyright-area p,
.copyright-area a,

/* Footer menu */
.footer-menu li a,
.footer-menu .cc-list li a {
    color: #000 !important;
}
/* ============================== *
 * NAVIGATION ARROW FIX
 * ============================== */

/* 1. Remove the rigid minimum width forcing items to stretch out */
header.header--site .nav--site .nav-list li.has-children {
    min-width: 0; 
    width: auto;
}

/* 2. Turn the link into a flex container to keep text and arrow together */
header.header--site .nav--site .nav-list li.has-children > a {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-right: 25px !important; /* Makes room for the arrow inside the link */
}

/* 3. Standardize the arrow positioning relative to the text length */
header.header--site .nav--site .nav-list li.has-children > a::after {
    position: absolute;
    right: 5px;   /* Locks it a fixed distance from the end of the text */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
}
/* Hide Apparel, Top Sellers, New Items text */
.homepage .cats .cat h3,
.cats .cat h3 {
    display: none !important;
}
/* REMOVE DARK OVERLAY BUT KEEP HOVER EFFECTS */
.cat {
    background: transparent !important;
}

/* make image fully normal (no dimming) */
.cat .cat__image {
    filter: brightness(100%) !important;
}

/* keep your smooth transition */
.cat .cat__image {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* optional: keep hover effect but lighter */
.cat .cat__image:hover {
    filter: brightness(100%) !important;
    transform: scale(1.1);
}

/* ============================== *
 * PRODUCT PAGE — SMALLER IMAGE + DIVIDER LEFT
 * ============================== */
@media screen and (min-width: 768px) {
    .product-landing {
        grid-template-columns: 40% 60%;
    }
    .product-landing::after {
        left: 40%;
    }
}

.product-landing .product__images img {
    max-width: 500px !important;
    height: auto;
}

.product-landing .product__info {
    padding: 2% 6% 2% 4%;
}

/* Uniform spacing between ALL fields, button, and pricing sections */
.product-landing .product__options.form,
.product-landing .product__ordering.form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 !important;
    padding: 0 !important;
}

.product-landing .product__options.form > *,
.product-landing .product__ordering.form > * {
    margin: 0 !important;
    padding-bottom: 0 !important;
}

/* Match the gap between the two forms (Size/Color vs Quantity) to the internal gap */
.product-landing .product__ordering.form {
    margin-top: 1.25rem !important;
}

/* Match the gap before the pricing table to the same rhythm */
.product-landing .product__info.formContainer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.product-landing .product__pricing {
    margin-top: 1.25rem !important;
}

/* Select Size / Quantity / Add to Cart — consistent width AND height, stacked */
.product-landing select,
.product-landing input[type="number"],
.product-landing input[type="text"] {
    width: 100%;
    max-width: 450px;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    display: block;
    border-radius: 4px;
}

.product-landing a.button.button--theme--primary.btnAddToCart,
.product-landing button.button--theme--primary.btnAddToCart {
    width: 100%;
    max-width: 450px;
    height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    border-radius: 4px;
}

.product-landing a.button.button--theme--primary.btnAddToCart i,
.product-landing button.button--theme--primary.btnAddToCart i {
    margin-right: 8px !important;
    line-height: 1;
}

/* Soften/remove the vertical divider per request */
.product-landing::after {
    background-color: #e0e0e0 !important;
    display: none !important;
}

/* Lighten the pricing table — less "admin panel," more "storefront" */
.product-landing .table--pricing.product-price-breaks thead,
.product-landing .table--pricing.product-price-breaks th {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

.product-landing .table--pricing.product-price-breaks {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

/* Remove the large empty space below Item Total caused by forced full-height layout */
.product-landing {
    min-height: unset;
}

/* Shrink the quantity/price breakdown table to match the dropdowns/button width and alignment */
.product-landing .product__pricing {
    max-width: 450px;
    margin-left: 4%;
}

.product-landing .table--pricing.product-price-breaks {
    max-width: 450px;
    width: 100%;
    margin-left: 0;
}

/* ============================== *
 * SHOPPING CART PAGE
 * ============================== */

/* Just add side padding — don't cap width, that made everything look tiny */
.cart {
    padding: 0 4%;
}

/* Each cart line item: image | details (flex) */
.cart__item.itemRecord {
    display: flex;
    gap: 3%;
    align-items: flex-start;
}

.item__preview {
    flex-shrink: 0;
    max-width: 220px;
}

.item__details {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3%;
}

/* The quantity/price block on the right — give it breathing room */
.item__pricing {
    padding-right: 2%;
    text-align: right;
    flex-shrink: 0;
}

.item__pricing .quantity input.qtyInput {
    width: 80px;
}

/* Footer controls (Empty Cart / Save Cart / Checkout) */
.cart__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

.cart__controls .button {
    white-space: nowrap;
    flex: 0 1 auto;
}

.cart__pricing {
    text-align: right;
    padding-right: 1%;
}

/* Mobile: stack image/details, remove right padding pressure */
@media screen and (max-width: 767px) {
    .cart__item.itemRecord {
        flex-direction: column;
    }
    .item__preview {
        max-width: 100%;
    }
    .item__pricing {
        text-align: left;
        padding-right: 0;
    }
    .cart__pricing {
        text-align: left;
        padding-right: 0;
    }
    .cart__controls {
        flex-direction: column;
    }
}

/* ============================== *
 * CHECKOUT PAGE
 * ============================== */

/* Just add side padding — don't cap width tightly */
.checkout {
    padding: 0 4%;
}

/* Main content area: panes on the left, order summary on the right */
.checkout__content {
    display: flex;
    gap: 4%;
    align-items: flex-start;
    flex-wrap: wrap;
}

.checkout-panes {
    flex: 1 1 600px;
    min-width: 0;
}

/* Order Overview sidebar */
.order-overview {
    flex: 0 1 320px;
    border: 1px solid #ddd;
    border-radius: var(--rounded-corners, 10px);
    padding: 5%;
    margin-top: 0;
}

.oo-title h3 {
    margin-top: 0;
}

.oo-values {
    margin: 1em 0;
}

.oo-element {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.order-overview .button {
    white-space: nowrap;
}

/* Item scheduling table on Shipping Address step */
.table--item-scheduling {
    width: 100%;
    border-collapse: collapse;
}

.table--item-scheduling th,
.table--item-scheduling td {
    padding: 1em 1.5em;
    text-align: left;
}

.table--item-scheduling th:last-child,
.table--item-scheduling td:last-child {
    text-align: right;
    padding-right: 2em;
}

/* Progress bar breathing room */
.progress-bar {
    padding: 0 2%;
}

/* Mobile: stack panes and summary */
@media screen and (max-width: 900px) {
    .checkout__content {
        flex-direction: column;
    }
    .order-overview {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* ============================== *
 * HOMEPAGE FEATURED CATEGORY TILES
 * Targets by URL, not position — survives
 * category reordering and additions.
 * ============================== */

/* Hide all category tiles by default */
.cats .cat {
    display: none !important;
}

/* ============================== *
 * NAV LABEL WRAP FIX
 * Keeps multi-word nav labels on one
 * line and fixes the Apparel arrow
 * overlap that happened when it wrapped.
 * ============================== */
header.header--site .nav--site > .nav-list {
    width: 100%;
    justify-content: space-evenly;
    flex-wrap: nowrap;
}

header.header--site .nav--site .nav-list li {
    white-space: nowrap;
    padding: 0.6rem 0.9rem;
}

header.header--site .nav--site .nav-list li a {
    white-space: nowrap;
}

@media screen and (max-width: 1600px) {
    header.header--site .nav--site .nav-list li {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 1400px) {
    header.header--site .nav--site .nav-list li {
        padding: 0.4rem 0.45rem;
        font-size: 0.78rem;
        letter-spacing: -0.01em;
    }
}

@media screen and (max-width: 1200px) {
    header.header--site .nav--site .nav-list li {
        padding: 0.35rem 0.3rem;
        font-size: 0.72rem;
    }
}

/* ============================== *
 * DROPDOWN SUBMENU FIX
 * Submenus stay hidden until hovered,
 * and stack vertically (not flex row)
 * once shown, overriding layout inherited
 * from the shared .nav-list class.
 * ============================== */
li.has-children ul {
    display: none !important;
}

li.has-children:hover > ul {
    display: block !important;
}

li.has-children ul li {
    display: block !important;
    width: 100%;
}
/* ===== FIX NEW CALLOUT SIZE ===== */
.homepage__secondary-callouts .callouts {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3 in one row */
    gap: 15px;
    margin: 20px;
}

/* Remove huge height */
.homepage__secondary-callouts .callout {
    min-height: unset !important;
    height: 350px !important; /* adjust as needed */
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
}

/* Fix background image scaling */
.homepage__secondary-callouts .callout {
    background-size: cover !important;
    background-position: center !important;
}

/* If using img instead of background */
.homepage__secondary-callouts .callout__image img {
    height: 100% !important;
    min-height: unset !important;
    object-fit: cover;
}
/* Remove white CTA box + text */
.homepage__secondary-callouts .callout__cta {
    background: transparent !important;
    color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Make entire tile clickable */
.homepage__secondary-callouts .callout a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==========================================================
   LEFT SIDEBAR: CLICK-ONLY SUBCATEGORY EXPANSION
   Works with the updated sidebar JavaScript that toggles
   the "active" class on li.has-children elements.
   ========================================================== */

/* Keep every left-tray submenu closed by default and on hover */
#leftTray li.has-children > ul.child,
#leftTray li.has-children:hover > ul.child {
    display: none !important;
}

/* Open only the submenu belonging to the clicked active category */
#leftTray li.has-children.active > ul.child {
    display: block !important;
}

/* Show a pointer because parent categories now toggle on click */
#leftTray li.has-children > a {
    cursor: pointer;
}

/* Rotate the category arrow while its submenu is open */
#leftTray li.has-children.active > a::after {
    transform: rotate(180deg);
}

/* Allow the arrow rotation to animate smoothly */
#leftTray li.has-children > a::after {
    transition: transform 0.2s ease;
}
.products.products--grid .product__copy,
.products.products--grid .product__copy *,
.products.products--grid .product__copy p,
.products.products--grid .product__copy span,
.products.products--grid .product__copy strong,
.products.products--grid .product__copy small{
    font-family: "Lato", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
/* FORCE product title styling */
.products .product .product__title h3 a.productLink {
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    display: block;
}

/* ==========================================================
   CHECKOUT: LATICRETE BUDGET PAYMENT RULES
   ========================================================== */

/* Show an additional-budget message only when the checkout
   displays the remaining order balance notice. */
#budgetOrderBalance:not([style*="display: none"])::after {
    content: "Additional budget is required. Your available LATICRETE Budget does not cover the full order total. Please contact your manager to request additional funds. Once your budget has been updated, return to checkout to complete your order.";
    display: block;
    max-width: 560px;
    margin-top: 14px;
    padding: 14px 16px;
    border-left: 4px solid #f4a000;
    background-color: #fff7e6;
    color: #333333;
    font-family: var(--text-copy-font-family, "Lato"), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    box-sizing: border-box;
}

/* When Laticrete Budget is available to the user, hide the entire
   Credit Card option, including its radio button and label text.
   Open Account remains visible. */
#paymentMethods:has(#paymentMethodBudget) label[for="paymentMethodCard"],
#paymentMethods:has(#paymentMethodBudget) #paymentMethodCard {
    display: none !important;
}

/* Hide the complete Credit Card entry section for users who
   have Laticrete Budget available. */
.editBillingAddressInactive:has(#paymentMethodBudget) #paymentCard {
    display: none !important;
}
/* ==========================================================
   SEARCH RESULTS: REMOVE SEARCH-TERM HIGHLIGHTING
   ========================================================== */
mark.ais-Highlight-highlighted,
.ais-Highlight-highlighted {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    font-weight: inherit !important;
    padding: 0 !important;
}

/* ==========================================================
   SEARCH RESULTS: REMOVE GRAY PRODUCT-CARD BACKGROUND
   ========================================================== */
.ais-Hits-item,
.ais-Hits-item figure.product,
.ais-Hits-item .product__image,
.ais-Hits-item .product__image a {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove hover effects, shadows, and dotted outlines from search results */
.ais-Hits-item,
.ais-Hits-item:hover,
.ais-Hits-item figure.product,
.ais-Hits-item figure.product:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.ais-Hits-item .product__image,
.ais-Hits-item .product__image:hover,
.ais-Hits-item .product__image img,
.ais-Hits-item .product__image img:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

/* Remove temporary gray lines when clicking search-result items */
.ais-Hits-item a:active,
.ais-Hits-item a:focus,
.ais-Hits-item a:focus-visible,
.ais-Hits-item figure.product:active,
.ais-Hits-item figure.product:focus,
.ais-Hits-item figure.product:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove border and click effects from product-detail images */
.product-landing .product__images .img-wrap,
.product-landing .product__images .img-wrap:hover,
.product-landing .product__images .img-wrap a,
.product-landing .product__images .img-wrap a:active,
.product-landing .product__images .img-wrap a:focus,
.product-landing .product__images .img-wrap a:focus-visible,
.product-landing .product__images .img-wrap img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ============================== *
 * SEARCH RESULTS - ALIGN VIEW BUTTONS
 * ============================== */

/* Make each search-result product card use a full-height flex layout */
.ais-Hits-item figure.product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Allow the product information area to fill available space */
.ais-Hits-item .product__info {
    flex: 1 1 auto !important;
}

/* Push every View button to the same position */
.ais-Hits-item .product__cta {
    margin-top: auto !important;
    padding-top: 1rem !important;
}

/* Center the word View vertically and horizontally */
.ais-Hits-item .product__cta .button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.container--header {
    max-width: 100% !important;
    padding: 0 !important;
}
.container--footer {
    max-width: 100% !important;
    padding: 0 !important;
}
.footer-menu .cc-list {
    display: none !important;
}
.footer--column.col2 ul li:nth-child(1) a,
.footer--column.col2 ul li:nth-child(2) a {
    pointer-events: none;
    cursor: default;
    font-weight: 700;
    font-size: 18px;
    color: #333;
    text-decoration: none;
}
body > div.footer-wrapper > div > footer > div > div > div > div.footer--column.col2 > div > ul > li:nth-child(8) > a {
    white-space: nowrap;
    font-size: 16px; /* slightly smaller */
}
.accessibility-text p,
.copyright-text p {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin: 0;
}
.accessibility-text {
    margin-bottom: 8px;
}
body > div.copyright-area > div > div.accessibility-text > p > a {
    color: #005F8F !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color .25s ease;
}

body > div.copyright-area > div > div.accessibility-text > p > a:hover {
    color: #00A9E0 !important;
    text-decoration: underline !important;
}

/* ============================== *
 * CHECKOUT - HIDE BUDGET CODE CONTROLS
 * ============================== */

/* Hide the complete Budget Code payment-method option, including the
   radio button and label, even after an applied budget is removed. */
#paymentMethods .radio-set > .datum:has(#paymentMethodBudget),
#paymentMethods .radio-set > .datum:has(label[for="paymentMethodBudget"]),
#paymentMethods .radio-set > .radio-inline:has(#paymentMethodBudget),
#paymentMethods .radio-set > .radio-inline:has(label[for="paymentMethodBudget"]) {
    display: none !important;
}

/* Fallback: hide the radio input and its label directly. */
#paymentMethodBudget,
label[for="paymentMethodBudget"] {
    display: none !important;
}

/* Hide the Budget Code label, input field, and Apply button.
   The Continue button remains visible because it is outside this container. */
#budgetFormContainer {
    display: none !important;
}

/* Hide the Remove text and trash icon next to the applied budget. */
a.link--remove.btnRemoveBudget,
#appliedBudgetsContainer a.link--remove,
#appliedBudgetsContainer a.btnRemoveBudget {
    display: none !important;
    visibility: hidden !important;
}

/* ==========================================================
   CHECKOUT: BLOCK CONTINUE WHEN BUDGET IS INSUFFICIENT
   ========================================================== */

/* Hides both Continue buttons whenever an unpaid order balance
   is displayed after the Budget Code is applied. */
.checkout__content:has(
    #budgetOrderBalance:not([style*="display: none"]):not([style*="display:none"])
) button.btnContinue {
    display: none !important;
}