/* ============================== *
 * CSS OVERRIDE 
 * ============================== */

/* ============================== *
 * FONTS
 * ============================== */

@import url('https://fonts.googleapis.com/css2?family=Candal&display=swap');

@import url('https://fonts.googleapis.com/css2?family=42dot+Sans:wght@300..800&display=swap');

/* ============================== *
 * CSS CUSTOM PROPERTIES
 * ============================== */
:root {
    /* Brand Colors */
    --brand-primary-color: #f25141;
    --brand-secondary-color: #000;

    /* 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-grid-template-areas: "secondary-callouts" "callouts" "content";
    
    /* 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: white;
    --header-link-color: white;
    --header-link-visited-color: white;
    --header-nav-background-color: var(--brand-primary-color);
    --header-nav-hover-background-color: var(--brand-secondary-color);
    
    /* Search */
    --search-input-background-color: #f7f7f7;
    --search-input-border-color: #bdbdbd;
    --search-input-focus-background-color: #22a6b3;
    
    /* Icons */
    --icon-button-background-color: var(--brand-primary-color);
    --icon-button-size: 40px;
    --icon-button-color: #fff;
    
    /* 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;
    
    /* Footer */
    --footer-cta-background: #2b2c2c;
    --footer-background-color: #2b2c2c;
    --footer-text-color: #fff;
    --footer-link-color: white;
    --footer-info-box-border-color: #888;
    --footer-border: none;
    
    /* Callouts */
    --callout-border-color: #d6d6d6;
    --callout-accent-color: var(--brand-secondary-color);
    --callout-message-background: var(--brand-secondary-color);
    --callout-title-underline-color: #c6ccb5;
    
    /* Categories */
    --category-overlay-background: #202020c4;
    --category-hover-brightness: 65%;
    --category-default-brightness: 50%;
    
    /* Products */
    --product-border-color: grey;
    --product-preview-background: #e5e5e5;
}

/* ============================== *
 * TYPOGRAPHY 
 * ============================== */
h1, h2, h3, h4, h5, h6, 
.homepage__secondary-callouts .callout__title {
    font-family: "Candal", 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: "Candal", 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: 75px;
}
    

/* 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);
}

header.header--site .nav--site .nav-list {
    display: flex !important; 
    justify-content: space-between;
    width: 70%;
    text-transform: 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);
}

/* ============================== *
 * 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) !important;
    width: var(--icon-button-size, 40px) !important;
    padding: var(--half-gutter, 0.5rem) !important;
    font-size: var(--form-input-font-size, 18px) !important;
    letter-spacing: 2px !important;
    border: none !important;
    outline: none !important;
    border-radius: 25px !important;
    transition: all 0.4s ease !important;
    background-color: var(--search-input-focus-background-color, #22a6b3) !important;
    padding-right: var(--icon-button-size, 40px) !important;
    pointer-events: none !important;
} 

header.header--site .search-box .input-search { 
    background-color: var(--search-input-background-color, #f7f7f7) !important;
    border-radius: 25px !important;
    padding: calc(1.25 * var(--gutter, 1rem)) !important;
    border: 1px solid #fff !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;
    border-radius: 0px !important;
    border-bottom: 1px solid rgba(255,255,255,.5) !important;
    border: 1px solid var(--search-input-border-color, #bdbdbd) !important;
    background-color: var(--search-input-focus-background-color, #22a6b3) !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;
    font-weight: bold !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;
    margin: 0;
    padding: 0;
}

.slide__image img {
    height: 70vh;
    object-fit: var(--homepage-slide-image-fit, cover);
}

.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: flex;
    gap: 0;
}

.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;
}

.cat .cat__image {
    height: auto;
    width: 100%;
    margin: 0 auto;
    display: block;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    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: 0;
}

.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;
}

.homepage__callouts .callout .img-wrap {
    position: initial;
    display: block;
    width: 100%;
    margin: auto;
    height: 100%;
}

.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: "Bowlby One", 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: "Bowlby One", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--callout-accent-color, #dd7347);
}

.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: 200px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 3em;
    margin-left: 10%;
    margin-top: 5%;
    color: var(--text-copy-color, black);
}

.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: 100%;
    position: relative;
    min-height: 70vh;
}

.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%;
    padding: 40px 20px;
    background-color: var(--footer-cta-background);
}

.cta-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24%;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.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: #fff;
    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 {
    margin-top: -25px;
    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: 0;
    margin-left: 20%;
    margin-right: 20%;
    /*margin: auto;*/
    justify-content: center;
}

.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: 40px !important;
    border-radius: 4px !important;
    vertical-align: middle;
}

.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;
    margin-bottom: 2rem;
}

.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%;
}

/* ============================== *
 * CATEGORY DISPLAY
 * ============================== */
.category {
    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;
}

.products.products--grid .product__title h3 {
    font-size: .8em;
}

.categories {
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(300px, 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;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    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;
}

/* ============================== *
 * 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;
    }
}

/* ============================== *
 * 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;
};
        display: block; /* Ensure it shows on desktop */
    }
}

@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;
    }
    
    .fa-search:before {
        vertical-align: -webkit-baseline-middle;
    }
    
    .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;
    }
}

/* ============================== *
 * MOBILE HEADER COMPLETE REDESIGN
 * ============================== */

/* Global Mobile Overflow Prevention */
@media all and (max-width: 1034px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    * {
        box-sizing: border-box;
    }
    
    /* Prevent any element from exceeding viewport */
    img, video, iframe, object, embed {
        max-width: 100%;
        height: auto;
    }
    
    /* Reset header wrapper */
    .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;
    }
    
    /* Reset header structure */
    header.header--site {
        display: block !important;
        width: 100%;
        padding: 0;
        grid-template: none !important;
        grid-template-areas: none !important;
    }
    
    /* Mobile Header Top Bar */
    .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;
    }
    
    /* Cart Indicator Specific Styling */
    .cart-indicator {
        position: relative !important;
        display: flex !important;
    }
    
    .cart-indicator a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    .cart-content-count {
        position: absolute !important;
        top: -8px !important;
        right: -8px !important;
        background: #D62300 !important;
        color: white !important;
        border-radius: 50% !important;
        font-size: 11px !important;
        font-weight: bold !important;
        min-width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px !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;
    }
}