/**
 * Lucas Oil Dynamic Menus - Main Stylesheet
 * Version: 1.2.0
 * All classes prefixed with 'lucas-' to avoid conflicts
 */

/* ===================================
   Header Container
   =================================== */
.lucas-header-container {
    width: 100%;
    background: radial-gradient(at top, rgba(0, 42, 118, 1) 20%, rgba(0, 0, 0, 1) 100%);
    z-index: 100;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

.lucas-header-content {
    margin-left: auto;
    margin-right: auto;
    width: 1620px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 15px;
    position: relative;
}

/* ===================================
   Logo
   =================================== */
.lucas-header-logo {
    flex: 0 0 auto;
    width: 160px;
    min-width: 120px;
    /* Container height = logo image height (auto). bottom: 0 on the
       flag below then anchors to that exact same edge — guaranteed
       bottom alignment with no aspect-ratio rounding drift. */
    position: relative;
}

.lucas-header-logo a {
    display: block;
}

/* WPML French-language flag (Canadian flag here) sits 10px to the right
   of the logo, bottom-aligned (`bottom: 0` matches the logo image's
   bottom edge — both anchor to the same container bottom). Height is
   ~1/3 the logo's rendered height; pixel values per breakpoint because
   percentage heights are unreliable when the container height is auto. */
.lucas-header-flag {
    position: absolute;
    left: calc(100% + 10px);
    bottom: 0;
    height: 12px; /* base: ~1/3 of 36px logo at 160px width */
    width: auto;
    display: block;
    pointer-events: none;
}

/* Scope to img inside the link so the flag (sibling of the link) is
   NOT forced to 100% width. */
.lucas-header-logo a img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===================================
   Navigation Container
   =================================== */
.lucas-nav-container {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.lucas-nav-content {
    text-align: right;
    font-family: "niveau-grotesk", sans-serif;
    display: flex;
    align-items: center;
}

.lucas-nav-content a {
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    font-size: 16px;
}

.lucas-nav-content ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
}

.lucas-nav-content li {
    color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    transition-duration: 0.5s;
    padding: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.lucas-nav-content li a {
    color: #fff;
    text-decoration: none;
}

.lucas-nav-content li:hover,
.lucas-nav-content li:focus-within {
    cursor: pointer;
}

.lucas-nav-content li:focus-within a {
    outline: none;
}

/* Dropdown Menu */
.lucas-nav-content ul li ul {
    background-color: #003da5;
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    top: 100%;
    display: none;
    z-index: 1000;
    width: 270px;
    background: radial-gradient(at top, rgba(0, 42, 118, 1) 20%, rgba(0, 0, 0, 1) 100%);
    text-align: left;
}

.lucas-nav-content ul li:hover > ul,
.lucas-nav-content ul li:focus-within > ul,
.lucas-nav-content ul li ul:hover,
.lucas-nav-content ul li ul:focus {
    visibility: visible;
    opacity: 1;
    display: block;
}

.lucas-nav-content ul li ul li {
    clear: both;
    width: 100%;
}

.lucas-nav-content ul li ul li:hover {
    background-color: #003da5;
}

/* ===================================
   My Vehicle Container
   =================================== */
.lucas-my-vehicle-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.lucas-my-vehicle-container a,
.lucas-my-vehicle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #db0632;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    font-family: "niveau-grotesk", sans-serif;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.lucas-my-vehicle-container a:hover,
.lucas-my-vehicle-btn:hover {
    background-color: #b71820;
}

.lucas-my-vehicle-container img {
    height: 18px;
    width: auto;
}

/* ===================================
   Store Locator Container
   =================================== */
.lucas-store-locator-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.lucas-store-locator-container a,
.lucas-store-locator-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background-color: #db0632;
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.lucas-store-locator-container a:hover,
.lucas-store-locator-btn:hover {
    background-color: #b71820;
}

.lucas-store-locator-container svg {
    width: 20px;
    height: 20px;
}

/* ===================================
   Language Selector Container
   =================================== */
.lucas-language-wrapper {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.lucas-language-container {
    position: relative;
}

.lucas-language-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background-color: #db0632;
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.lucas-language-toggle:hover {
    background-color: #b71820;
}

.lucas-language-toggle svg {
    width: 20px;
    height: 20px;
}

/* Language Dropdown */
.lucas-language-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #002a76;
    border-radius: 5px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.lucas-language-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lucas-language-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 15px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #002a76;
}

.lucas-language-list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.lucas-language-list li {
    margin: 0;
    padding: 0;
}

.lucas-language-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #ffffff;
    text-decoration: none;
    font-family: "niveau-grotesk", sans-serif;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.lucas-language-list li a:hover {
    background-color: #003da5;
}

.lucas-language-list li.active a {
    background-color: #db0632;
}

.lucas-language-flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}

.lucas-language-flag-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 16px;
    background-color: #003da5;
    border-radius: 2px;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
}

.lucas-language-name {
    flex: 1;
}

.lucas-wpml-notice {
    padding: 10px 20px;
    margin: 0;
    font-size: 11px;
    color: #aaa;
    border-top: 1px solid #1f2b60;
}

/* ===================================
   Search Container
   =================================== */
.lucas-search-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.lucas-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background: #db0632;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.lucas-search-toggle:hover {
    background-color: #b71820;
}

.lucas-search-toggle svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
}

/* Search Dropdown Form */
.lucas-search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: #002a76;
    border-radius: 5px;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.lucas-search-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lucas-search-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 12px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #002a76;
}

.lucas-search-dropdown .lucas-search-form {
    display: flex;
    width: 100%;
}

.lucas-search-dropdown .lucas-search-field {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 5px 0 0 5px;
    font-size: 14px;
    outline: none;
    height: auto;
}

.lucas-search-dropdown .lucas-search-submit {
    padding: 10px 15px;
    background: #db0632;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.lucas-search-dropdown .lucas-search-submit:hover {
    background-color: #b71820;
}

.lucas-search-icon-mag {
    display: inline;
}

.lucas-search-icon-close {
    display: none;
}

/* Toggle icon states when active */
.lucas-search-toggle.active .lucas-search-icon-mag {
    display: none;
}

.lucas-search-toggle.active .lucas-search-icon-close {
    display: inline;
}

/* ===================================
   Mobile Navigation
   =================================== */
.lucas-mobile-nav {
    flex: 0 0 auto;
    display: none;
    align-items: center;
}

.lucas-mobile-nav-toggle {
    background-image: url("/wp-content/themes/lucasoilca/images/hamburger-menu.png");
    border: none;
    background-size: contain;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    flex-shrink: 0;
}

.lucas-mobile-nav-close {
    background-image: url("/wp-content/themes/lucasoilca/images/hamburger-menu-close.png");
    border: none;
    background-size: contain;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background-color: transparent;
}

.lucas-mobile-nav-container {
    display: block;
    height: 0px;
    background-color: #0e0f17;
    overflow: hidden;
    transition: height 0.3s ease;
}

.lucas-mobile-nav-container.active {
    height: auto;
    padding-bottom: 5px;
    padding-top: 10px;
    border-bottom: 2px solid #1f2b60;
    margin-bottom: 0px;
}

.lucas-mobile-link {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.0em;
    padding: 10px 20px;
    text-align: left;
    font-weight: 400;
    font-family: "niveau-grotesk", sans-serif;
    border-bottom: 1px solid #1f2b60;
}

.lucas-mobile-link:hover {
    background-color: #003da5;
    color: #ffffff;
}

.lucas-mobile-store-locator {
    display: flex;
    align-items: center;
}

.lucas-mobile-store-locator svg {
    flex-shrink: 0;
    margin-right: 8px;
}

.lucas-mobile-link-sub {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 1em;
    padding: 10px 20px 10px 35px;
    text-align: left;
    font-weight: 400;
    font-family: "niveau-grotesk", sans-serif;
    background-color: #003da5;
}

.lucas-mobile-link-sub:hover {
    background-color: #002a76;
}

/* Product Submenu */
.lucas-product-submenu {
    /* Hidden by default; jQuery slideToggle drives the open/close —
       previously the CSS forced display:block + height:0 which fought
       against slideToggle (caused "opens then immediately closes"). */
    display: none;
    background-color: #003da5;
    overflow: hidden;
    transition: height 0.3s ease;
}

.lucas-product-submenu.active {
    height: auto;
}

/* Mobile Search — input and submit button share one row.
   The flex must live on the <form> (the actual sibling-of-input/button
   container), not the outer .lucas-mobile-search div whose only child is
   the form itself. */
.lucas-mobile-search {
    padding: 15px 20px;
}

.lucas-mobile-search .lucas-search-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.lucas-mobile-search .lucas-search-field {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px;
    border: 1px solid #333;
    border-radius: 5px;
    background: #252525;
    color: #fff;
    font-size: 16px;
}

.lucas-mobile-search .lucas-search-submit {
    flex: 0 0 auto;
    background: #db0632;
    color: #fff;
    border: none;
    padding: 12px 20px;
    margin-top: 0;
    border-radius: 5px;
    cursor: pointer;
    font-family: "niveau-grotesk", sans-serif;
    text-transform: uppercase;
}

/* Mobile My Vehicle — flat link styled to match the Store Locator entry
   above it (no longer a red button). */
.lucas-mobile-my-vehicle {
    display: flex;
    align-items: center;
}

.lucas-mobile-my-vehicle img {
    flex-shrink: 0;
    height: 18px;
    width: auto;
    margin-right: 8px;
}

/* Mobile Language Switcher */
.lucas-mobile-language {
    padding: 10px 20px;
    border-bottom: 1px solid #1f2b60;
}

/* ===================================
   Products Mega Menu
   =================================== */
.lucas-mega-menu-container {
    background-color: #002a76;
    width: 100%;
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    display: none;
    z-index: 99;
    overflow: hidden;
    left: 0;
    top: 100%;
}

.lucas-mega-menu-container.active {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: auto;
}

.lucas-mega-menu-content {
    width: 1620px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
}

/* Lifestyle Product Navigation */
.lucas-lifestyle-nav {
    width: 65%;
    padding-left: 50px;
    margin-left: 0px;
    margin-right: 0;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

.lucas-lifestyle-item {
    display: inline-block;
    /* Sized so 5 tiles fit per row across the 65%-wide .lucas-lifestyle-nav.
       9 lifestyles + 1 View All = 10 tiles → 2 rows of 5. */
    width: 180px;
    height: 130px;
    margin: 5px;
    background-size: 100% auto;
    background-position: center;
    text-decoration: none;
    /* Frame stays fixed; image zooms inside via background-size transition */
    overflow: hidden;
    transition: background-size 0.5s ease;
}

.lucas-lifestyle-item:hover {
    background-size: 115% auto;
}

.lucas-lifestyle-overlay {
    width: 100%;
    height: 100%;
    margin: 0px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.40);
    transition: background-color 0.3s ease;
}

.lucas-lifestyle-item:hover .lucas-lifestyle-overlay {
    background-color: rgba(0, 0, 0, 0.0);
}

.lucas-lifestyle-item img {
    width: 86px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 30px;
}

.lucas-lifestyle-item h4 {
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px #000000;
    text-decoration: none;
    margin-top: 0px;
    font-weight: 600;
    font-family: "niveau-grotesk", sans-serif;
    text-align: center;
    vertical-align: bottom;
    position: relative;
    bottom: 0px;
    font-size: 14px;
}

/* All Products Container in Mega Menu — matches lifestyle tile dims so
   it slots into the 5-per-row grid as the 10th tile. */
.lucas-all-products-item {
    display: inline-block;
    width: 180px;
    height: 130px;
    margin: 4px 5px 5px 5px;
    background-size: 100% 100%;
    background-position: center;
    vertical-align: top;
    background: radial-gradient(at top, rgba(0, 42, 118, 1) 20%, rgba(0, 0, 0, 1) 100%);
}

.lucas-all-products-btn {
    background-color: rgba(0, 0, 0, 0.50);
    width: 100%;
    height: 100%;
    display: inline-block;
    text-decoration: none;
    vertical-align: bottom;
    text-align: center;
    position: relative;
}

.lucas-all-products-btn:hover {
    background-color: rgba(0, 0, 0, 0.0);
}

.lucas-all-products-btn h4 {
    color: #ffffff;
    text-shadow: 2px 2px 2px #000000;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 10px;
    font-weight: 600;
    font-family: "niveau-grotesk", sans-serif;
    text-align: center;
    vertical-align: bottom;
    position: relative;
    bottom: 0px;
}

.lucas-shield-outline {
    vertical-align: middle;
    width: 130px;
    height: 120px;
    background-image: url("/wp-content/themes/lucasoilca/images/shield-blue-outline.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    top: -8px;
    position: relative;
}

.lucas-shield-outline h4 {
    padding-top: 50px;
    width: 130%;
    position: relative;
    margin-left: -20px;
    font-size: 14px;
}

/* Category Product Navigation */
.lucas-category-nav {
    color: #ffffff;
    width: 34%;
    display: inline-block;
    vertical-align: top;
    margin-top: 0px;
}

.lucas-category-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    line-height: 30px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.lucas-category-nav a:hover {
    /* Subtle hover: brand-red color shift + small slide. No underline. */
    color: #db0632;
    text-decoration: none;
    transform: translateX(4px);
}

.lucas-category-nav h4 {
    font-weight: 300;
    font-size: 24px;
    /* Tighten line-height so text glyphs sit flush with the top of the icon
       grid. Default h4 line-height (~1.5) puts ~10px of implicit space above
       the cap-height, which makes the heading look pushed down vs the icons. */
    line-height: 1;
    margin-top: 5px;
    margin-bottom: 20px;
    font-family: "niveau-grotesk", sans-serif;
}

.lucas-nav-type-col-left {
    display: inline-block;
    width: 49%;
    margin-right: 10px;
    vertical-align: top;
}

.lucas-nav-type-col-right {
    display: inline-block;
    width: 47%;
    vertical-align: top;
}

.lucas-nav-type-col-left a,
.lucas-nav-type-col-right a {
    display: block;
    margin-bottom: 5px;
}

/* ===================================
   Background Classes for Categories
   =================================== */
.lucas-bg-agriculture {
    background-image: url("/wp-content/themes/lucasoilca/images/agriculture-thumb.jpg");
}

.lucas-bg-everyday-car {
    background-image: url("/wp-content/themes/lucasoilca/images/everyday-car-care-thmnb-1.jpg");
}

.lucas-bg-commercial {
    background-image: url("/wp-content/themes/lucasoilca/images/heavy-duty-trucking-thumb.jpg");
}

.lucas-bg-classic-cars {
    background-image: url("/wp-content/themes/lucasoilca/images/classic-car-thumb.jpg");
}

.lucas-bg-industrial {
    background-image: url("/wp-content/themes/lucasoilca/images/industrial-thumb.jpg");
}

.lucas-bg-racing {
    background-image: url("/wp-content/themes/lucasoilca/images/racing-thumb.jpg");
}

.lucas-bg-motorcycle {
    background-image: url("/wp-content/themes/lucasoilca/images/motorcycle-thumb.jpg");
}

.lucas-bg-marine {
    background-image: url("/wp-content/themes/lucasoilca/images/marine-thumb.jpg");
}

.lucas-bg-outdoor {
    background-image: url("/wp-content/themes/lucasoilca/images/outdoor-thumb-1.jpg");
}



/* ===================================
   Product Finder Section (Homepage)
   =================================== */
.lucas-product-finder-container {
    width: 100%;
    padding: 40px 0px;
}

.lucas-product-finder-content {
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
    width: 1620px;
    text-align: left;
}

.lucas-product-finder-content h3 {
    color: #db0632;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "niveau-grotesk", sans-serif;
    text-align: left;
    font-size: 42px;
    margin-bottom: 20px;
    line-height: 1.2em;
}

.lucas-ps-container {
    background-size: 100%;
    vertical-align: bottom;
    display: inline-block;
    margin: 8px;
    width: 360px;
    height: 480px;
}

.lucas-product-img {
    height: auto;
    text-align: center;
    vertical-align: bottom;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}

.lucas-product-btn {
    background-color: rgba(0, 0, 0, 0.50);
    width: 100%;
    height: 100%;
    display: inline-block;
    text-decoration: none;
    vertical-align: bottom;
    text-align: center;
    position: relative;
}

.lucas-product-btn:hover {
    background-color: rgba(0, 0, 0, 0.0);
}

.lucas-product-btn h4 {
    color: #ffffff;
    text-shadow: 2px 2px 2px #000000;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 10px;
    font-weight: 600;
    font-family: "niveau-grotesk", sans-serif;
    text-align: center;
    vertical-align: bottom;
    position: relative;
    bottom: 0px;
    font-size: 20px;
}

.lucas-prod-btn-pad {
    padding-top: 250px;
}

.lucas-shield-outline-finder {
    vertical-align: middle;
    width: 180px;
    height: 160px;
    background-image: url("/wp-content/themes/lucasoilca/images/shield-blue-outline.svg");
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
    top: 30%;
    position: relative;
}

.lucas-shield-outline-finder h4 {
    padding-top: 60px;
    width: 300px;
    position: relative;
    margin-left: -60px;
}

/* ===================================
   Buttons
   =================================== */
.lucas-blue-btn {
    font-family: "niveau-grotesk", sans-serif;
    display: block;
    background-color: #003da5;
    border-radius: 1px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    width: 250px;
    font-size: 26px;
    padding: 20px 0px;
}

.lucas-blue-btn:hover {
    background-color: #db0632;
}

.lucas-red-btn {
    font-family: "niveau-grotesk", sans-serif;
    display: block;
    background-color: #db0632;
    border-radius: 1px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    width: 250px;
    font-size: 26px;
    padding: 20px 0px;
}

.lucas-red-btn:hover {
    background-color: #003da5;
}

/* ===================================
   Close Navigation Button
   =================================== */
.lucas-close-nav-btn {
    float: right;
    margin-top: -300px;
    margin-right: 65px;
    background-color: #002a76;
    border: 1px solid rgba(145, 158, 255, 1.00);
    color: rgba(145, 158, 255, 1.00);
    z-index: 10;
    cursor: pointer;
    padding: 8px;
    text-decoration: none;
}

/* ===================================
   Utility Classes
   =================================== */
.lucas-hidden {
    display: none;
}

.lucas-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lucas-img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===================================
   Responsive Styles - Phone (min-width: 1px)
   =================================== */
@media screen and (min-width: 1px) {
    .lucas-header-container {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .lucas-header-content {
        width: 90%;
        padding: 0 15px;
    }
    
    .lucas-header-logo {
        width: 150px;
        min-width: 120px;
        flex: 0 0 auto;
    }
    .lucas-header-flag { height: 11px; } /* logo ~34px → 1/3 ≈ 11 */

    .lucas-nav-container {
        display: none;
    }
    
    .lucas-nav-content a {
        font-size: 18px;
    }
    
    .lucas-nav-content li {
        padding: 12px;
    }
    
    .lucas-search-container {
        display: none;
    }
    
    .lucas-my-vehicle-container {
        display: none;
    }
    
    .lucas-store-locator-container {
        display: none;
    }
    
    .lucas-language-wrapper {
        display: none;
    }
    
    .lucas-mobile-nav {
        display: flex;
    }
    
    .lucas-mobile-nav-toggle {
        width: 30px;
        height: 30px;
    }
    
    .lucas-mobile-nav-close {
        width: 50px;
        height: 30px;
    }
    
    .lucas-product-finder-container {
        padding: 40px 0px;
    }
    
    .lucas-product-finder-content {
        width: 90%;
        text-align: center;
    }
    
    .lucas-product-finder-content h3 {
        font-size: 32px;
        margin-bottom: 20px;
        line-height: 1.2em;
    }
    
    .lucas-ps-container {
        display: inline-block;
        margin: 8px;
        width: 100%;
        max-width: 360px;
        height: 480px;
    }
    
    .lucas-product-img {
        width: 100px;
    }
    
    .lucas-product-btn h4 {
        font-size: 18px;
        padding-top: 10px;
    }
    
    .lucas-mega-menu-content {
        width: 90%;
    }
    
    .lucas-lifestyle-nav {
        width: 65%;
        margin-right: 0;
    }

    .lucas-category-nav {
        width: 34%;
        /* margin-top: 20px; */
    }
    
    .lucas-lifestyle-item {
        width: calc(50% - 12px);
        height: 120px;
    }
    
    .lucas-all-products-item {
        width: calc(50% - 12px);
        height: 120px;
    }
}

/* ===================================
   Responsive Styles - Tablet (min-width: 768px)
   =================================== */
@media screen and (min-width: 768px) {
    .lucas-header-container {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .lucas-header-content {
        width: 768px;
        padding: 0 15px;
    }
    
    .lucas-header-logo {
        width: 200px;
        min-width: 150px;
        flex: 0 0 auto;
    }
    .lucas-header-flag { height: 15px; } /* logo ~45px → 1/3 ≈ 15 */

    .lucas-nav-container {
        display: none;
    }
    
    .lucas-nav-content a {
        font-size: 18px;
    }
    
    .lucas-nav-content li {
        padding: 12px;
    }
    
    .lucas-search-container {
        display: none;
    }
    
    .lucas-my-vehicle-container {
        display: none;
    }
    
    .lucas-store-locator-container {
        display: none;
    }
    
    .lucas-language-wrapper {
        display: none;
    }
    
    .lucas-mobile-nav {
        display: flex;
    }
    
    .lucas-mobile-nav-toggle {
        width: 50px;
        height: 50px;
    }
    
    .lucas-mobile-nav-close {
        width: 50px;
        height: 50px;
    }
    
    .lucas-product-finder-container {
        padding: 40px 0px;
    }
    
    .lucas-product-finder-content {
        width: 768px;
        text-align: left;
    }
    
    .lucas-product-finder-content h3 {
        font-size: 36px;
        margin-bottom: 20px;
        line-height: 1.2em;
    }
    
    .lucas-ps-container {
        display: inline-block;
        margin: 8px;
        width: 360px;
        height: 480px;
    }
    
    .lucas-product-img {
        width: 100px;
    }
    
    .lucas-product-btn h4 {
        font-size: 20px;
        padding-top: 0px;
    }
    
    .lucas-mega-menu-content {
        width: 768px;
    }
    
    .lucas-lifestyle-item {
        width: 150px;
        height: 110px;
    }
    
    .lucas-all-products-item {
        width: 150px;
        height: 110px;
    }
}

/* ===================================
   Responsive Styles - 1080p (min-width: 1280px)
   =================================== */
@media screen and (min-width: 1280px) {
    .lucas-header-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .lucas-header-content {
        width: 1280px;
        padding: 0 20px;
        gap: 12px;
    }
    
    .lucas-header-logo {
        width: 120px;
        min-width: 100px;
        flex: 0 0 auto;
    }
    .lucas-header-flag { height: 9px; } /* logo ~27px → 1/3 ≈ 9 */

    .lucas-nav-container {
        display: flex;
        flex: 1 1 auto;
    }
    
    .lucas-nav-content a {
        font-size: 13px;
    }
    
    .lucas-nav-content li {
        padding: 6px;
    }
    
    .lucas-search-container {
        display: flex;
    }
    
    .lucas-my-vehicle-container {
        display: flex;
    }
    
    .lucas-my-vehicle-container a,
    .lucas-my-vehicle-btn {
        padding: 8px 12px;
        font-size: 11px;
    }
    
    .lucas-store-locator-container {
        display: flex;
    }
    
    .lucas-store-locator-container a,
    .lucas-store-locator-btn {
        padding: 6px 8px;
    }
    
    .lucas-store-locator-container svg {
        width: 18px;
        height: 18px;
    }
    
    .lucas-language-wrapper {
        display: flex;
    }
    
    .lucas-language-toggle {
        padding: 6px 8px;
    }
    
    .lucas-language-toggle svg {
        width: 18px;
        height: 18px;
    }
    
    .lucas-search-toggle {
        padding: 6px 8px;
    }
    
    .lucas-mobile-nav {
        display: none;
    }
    
    .lucas-product-finder-container {
        padding: 40px 0px;
    }
    
    .lucas-product-finder-content {
        width: 1280px;
        text-align: left;
    }
    
    .lucas-product-finder-content h3 {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 1.2em;
    }
    
    .lucas-ps-container {
        display: inline-block;
        margin: 8px;
        width: 300px;
        height: 400px;
    }
    
    .lucas-product-img {
        width: 100px;
    }
    
    .lucas-product-btn h4 {
        font-size: 20px;
    }
    
    .lucas-mega-menu-content {
        width: 1280px;
    }
    
    .lucas-lifestyle-item {
        width: 180px;
        height: 130px;
    }
    
    .lucas-all-products-item {
        width: 180px;
        height: 130px;
    }
}

/* ===================================
   Responsive Styles - Full HD (min-width: 1620px)
   =================================== */
@media screen and (min-width: 1620px) {
    .lucas-header-container {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .lucas-header-content {
        width: 1620px;
        padding: 0 20px;
        gap: 16px;
    }
    
    .lucas-header-logo {
        width: 260px;
        min-width: 240px;
        flex: 0 0 auto;
    }
    .lucas-header-flag { height: 20px; } /* logo ~59px → 1/3 ≈ 20 */

    .lucas-nav-container {
        display: flex;
        flex: 1 1 auto;
    }
    
    .lucas-nav-content a {
        font-size: 16px;
    }
    
    .lucas-nav-content li {
        padding: 10px;
    }
    
    .lucas-search-container {
        display: flex;
    }
    
    .lucas-my-vehicle-container {
        display: flex;
    }
    
    .lucas-my-vehicle-container a,
    .lucas-my-vehicle-btn {
        padding: 7.5px 16px;
        font-size: 14px;
    }
    
    .lucas-store-locator-container {
        display: flex;
    }
    
    .lucas-store-locator-container a,
    .lucas-store-locator-btn {
        padding: 8px 10px;
    }
    
    .lucas-store-locator-container svg {
        width: 20px;
        height: 20px;
    }
    
    .lucas-language-wrapper {
        display: flex;
    }
    
    .lucas-language-toggle {
        padding: 8px 10px;
    }
    
    .lucas-language-toggle svg {
        width: 20px;
        height: 20px;
    }
    
    .lucas-search-toggle {
        padding: 9px 11px;
    }
    
    .lucas-mobile-nav {
        display: none;
    }
    
    .lucas-product-finder-container {
        padding: 40px 0px;
    }
    
    .lucas-product-finder-content {
        width: 1620px;
        text-align: left;
    }
    
    .lucas-product-finder-content h3 {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 1.2em;
    }
    
    .lucas-ps-container {
        display: inline-block;
        margin: 8px;
        width: 360px;
        height: 480px;
    }
    
    .lucas-product-img {
        width: 100px;
    }
    
    .lucas-product-btn h4 {
        font-size: 20px;
    }
    
    .lucas-mega-menu-content {
        width: 1620px;
    }
    /* Tile sizes intentionally NOT overridden at this breakpoint — base
       180×130 keeps 5 tiles per row across all desktop widths. */
}

/* ===================================
   Responsive Styles - Large Desktop (min-width: 1440px)
   =================================== */
@media screen and (min-width: 1440px) and (max-width: 1619px) {
    .lucas-header-content {
        width: 1400px;
        gap: 15px;
    }
    
    .lucas-header-logo {
        width: 140px;
    }
    .lucas-header-flag { height: 11px; } /* logo ~32px → 1/3 ≈ 11 */

    .lucas-nav-content a {
        font-size: 15px;
    }
    
    .lucas-nav-content li {
        padding: 9px;
    }
    
    .lucas-my-vehicle-container a,
    .lucas-my-vehicle-btn {
        padding: 5.25px 15px;
        font-size: 13px;
    }
}