/**
 * Responsive CSS - Mobile-First Media Queries
 *
 * MIGRATED (slice 21, 2026-08-07): was 4 desktop-first `max-width` blocks
 * (1199/991/767/575) layered on top of main.css/components.css "desktop"
 * defaults. Rebuilt as base (mobile) styles + `min-width` tiers so every
 * declaration here now reads top-down with the cascade instead of against
 * it. Visual output is unchanged at every width — this is a pure refactor,
 * verified via the slice-21 before/after screenshot matrix
 * (docs/issues/evidence/21-*.png) and computed-style spot checks.
 *
 * Canonical breakpoints: min-width 577 / 768 / 992 / 1200px.
 *
 * ONE deliberate deviation: the legacy "small mobile" boundary was
 * `max-width: 575px` (not 576), so its mobile-first complement is
 * `min-width: 576px`, not the canonical 577. Using 577 here would move the
 * boundary by 1px and change the computed style of every property in that
 * tier at exactly width=576 — a silent visual diff the parity requirement
 * forbids. 576 reproduces the original pixel-for-pixel; documented here and
 * in docs/wiki/theme/frontend-conventions.md rather than silently bent to
 * fit the canonical grid.
 *
 * Reading a tier: every declaration in a `min-width` block either (a)
 * changes a property from what the previous (narrower) tier set, or (b)
 * explicitly restores a main.css/components.css unguarded default that a
 * narrower tier had overridden. In mobile-first CSS nothing "falls back"
 * automatically the way desktop-first `max-width` cascades did — a value
 * set at a narrow tier persists upward until something overrides it. Every
 * revert below exists because omitting it would leak a mobile value into a
 * wider viewport (verified per-property against main.css/components.css).
 *
 * @package DS_Theme_Rugged_Dark
 */

/* ==========================================================================
   BASE — mobile, all widths up to 575px (was: max-width:575 ∪ max-width:767
   ∪ max-width:991 ∪ max-width:1199, narrowest-set-wins)
   ========================================================================== */

/* ----- Typography ----- */
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

/* ----- Container / section padding ----- */
.container {
    padding: 0 15px;
}

:root {
    --dst-section-padding: 50px;
}

/* ----- Top Bar ----- */
.top-bar-inner {
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

.contact-info {
    flex-direction: column;
    gap: 10px;
}

/* ----- Header ----- */
.site-header {
    padding: 10px 0;
}

.site-logo img,
.custom-logo {
    height: 50px;
}

/* ----- Navigation: mobile right-side slide-out drawer (slice 24) -----
   The drawer IS the base nav presentation below 992px (ground-up mobile-
   first, not a desktop overlay retrofit). .main-navigation stays
   `display: flex` at all times — off-canvas is achieved purely via
   `transform: translateX(100%)`, which (a) keeps the slide animatable
   (display:none can't transition) and (b) means the class hooks other
   CSS/JS already reference (.is-open, .mobile-menu-toggle.active) needed
   no renaming. Closed-state focus/AT reachability is handled by JS
   toggling the `inert` property on the nav (navigation.js), not CSS —
   inert removes off-canvas links from both the tab order and the
   accessibility tree regardless of transform position, which
   visibility/opacity tricks alone would not. */
.main-navigation {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80vw;
    max-width: 320px;
    background: var(--dst-charcoal);
    z-index: 999;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 90px 0 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

.main-navigation.is-open {
    transform: translateX(0);
}

.main-navigation ul {
    flex-direction: column;
    text-align: left;
}

.main-navigation a {
    font-size: 20px;
    padding: 15px 30px;
}

/* Submenu accordion (slice 24) — collapsed by default (max-height:0),
   expanded via the `.focus` class navigation.js's existing dropdown-
   toggle bookkeeping already applies/removes (extended this slice to
   also fire from the injected .submenu-toggle caret button, so state
   stays in sync across keyboard, mouse, and touch). 1200px is a
   deliberately generous ceiling (largest live submenu, TRAILER's 13
   items, is ~700px tall) rather than a measured scrollHeight, trading a
   slightly front-loaded transition curve for zero JS height measurement. */
.main-navigation .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    border: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.main-navigation .menu-item-has-children.focus > .sub-menu {
    max-height: 1200px;
}

/* slice 23: no per-class mobile override needed — the min-width:992
   grid enhancement (below) never applies below 992px, so mobile
   .sub-menu stays the plain single-column stack this tier already
   sets above. See main.css nav section for the k4-mega removal note. */

.main-navigation .sub-menu a {
    font-size: 16px;
    padding-left: 48px;
    border-bottom: none;
}

/* Accordion caret (slice 24) — injected by navigation.js next to each
   parent-with-children link so the link itself still navigates normally;
   only this button toggles the in-drawer accordion. Hidden entirely at
   >=992 (min-width:992 tier) where the desktop dropdown stays hover-
   driven, unchanged. */
/* top is a fixed offset, NOT top:50%/translateY(-50%) — the caret's
   containing block is the <li>, and that <li> grows tall once its
   submenu expands (the caret is a sibling of the .sub-menu, both
   children of the same li). Centering within the li's full height would
   drift the caret down toward the middle of the combined header+submenu
   box instead of staying pinned to the single-row header. 5px vertically
   centers a 44px caret within the ~54px header row (15px padding +
   ~24px line-height + 15px padding) established by `.main-navigation a`
   above. */
.submenu-toggle {
    position: absolute;
    top: 5px;
    right: 4px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--dst-white);
    font-size: 14px;
    cursor: pointer;
    z-index: 1;
}

.submenu-toggle i {
    transition: transform 0.25s ease;
}

.main-navigation .menu-item-has-children.focus > .submenu-toggle i {
    transform: rotate(180deg);
}

.nav-cta > a,
.main-navigation .nav-cta > a {
    margin: 20px 30px 0;
}

.mobile-menu-toggle {
    display: block;
    z-index: 1001;
}

.mobile-menu-toggle.active i::before {
    content: "\f00d"; /* Font Awesome times icon */
}

/* Backdrop (slice 24) — injected by navigation.js (appended to <body>
   once on init) rather than added to header.php; a single fixed overlay
   has no semantic relationship to the nav markup itself, so a JS-owned
   element keeps header.php untouched. Sits below the drawer (z-index 998
   vs the drawer's 999) and above page content. Faded via opacity/
   visibility (not display) so it can transition; pointer-events toggles
   with it so the backdrop is click-through while hidden. */
.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.nav-drawer-open .nav-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Scroll lock (slice 24) — navigation.js pairs this class with an inline
   `position: fixed; top: -<scrollY>px` on <body> (the "fixed-body"
   technique) so the page cannot scroll while the drawer is open AND the
   visual scroll position survives close with no jump (restored via
   `window.scrollTo` using the saved offset on close). `overflow: hidden`
   here is a belt-and-suspenders backstop, not the primary lock
   mechanism. */
body.nav-drawer-open {
    overflow: hidden;
}

/* ----- Hero ----- */
.hero {
    height: auto;
    min-height: 400px;
}

.hero-slide {
    position: absolute;
    min-height: 400px;
}

.hero h1 {
    font-size: 28px;
}

.hero-content {
    padding: 60px 20px;
}

.hero-subtitle {
    font-size: 16px;
}

.hero-arrow {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.hero-arrow-prev { left: 10px; }
.hero-arrow-next { right: 10px; }

/* Always-visible arrows on touch devices. Duplicates main.css's
   `@media (hover:none) { .hero-arrow { opacity:.7 } }` (a capability query,
   not a width one) — kept for exact legacy parity since the two conditions
   aren't identical (a touch laptop at desktop width matches hover:none but
   not this tier). Harmless overlap below 992px either way. */
.hero .hero-arrow {
    opacity: 0.7;
}

.hero-dots {
    bottom: 16px;
    gap: 8px;
}

.hero-dot {
    width: 10px;
    height: 10px;
}

.hero-buttons {
    flex-direction: column;
}

.hero-buttons .btn {
    width: 100%;
    justify-content: center;
}

.deal-badge {
    /* No markup currently renders .deal-badge (grep across inc/*.php,
       page-templates/, patterns/ found none) — inert today, migrated for
       parity anyway in case it's reinstated. */
    display: none;
    right: 40px;
}

.deal-badge img {
    width: 180px;
}

/* ----- Search Section ----- */
.search-section h2 {
    font-size: 24px;
}

.search-box {
    flex-direction: column;
    clip-path: none;
    border-radius: 8px;
}

.search-box input {
    border-radius: 8px 8px 0 0;
}

.search-box button {
    clip-path: none;
    border-radius: 0 0 8px 8px;
    margin-left: 0;
}

/* ----- Featured Section ----- */
.featured-section::before,
.featured-section::after {
    width: 50px;
}

.slider-container {
    padding: 0 30px;
}

/* ----- Categories Grid ----- */
.categories-grid {
    gap: 15px;
}

.category-card {
    flex: 0 0 100%;
    max-width: 100%;
    height: 180px;
}

.category-overlay h3 {
    font-size: 14px;
}

/* ----- Brands Grid ----- */
.brands-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.brands-header {
    padding: 12px 25px;
}

.brands-header h2 {
    font-size: 22px;
}

.brand-logo {
    height: 60px;
    padding: 15px;
}

/* ----- About Section ----- */
.about-inner {
    padding: 0 15px;
}

.about-section h2 {
    font-size: 24px;
}

.about-highlight {
    font-size: 16px;
}

.years-badge {
    padding: 15px 25px;
    flex-direction: column;
    text-align: center;
}

.years-badge .number {
    font-size: 40px;
}

.years-badge .text {
    text-align: center;
}

/* ----- Page Hero ----- */
.page-hero {
    padding: 50px 0;
}

.page-hero h1 {
    font-size: 28px;
}

/* ----- Entry Content ----- */
.entry-content {
    font-size: 16px;
}

.entry-content h2 {
    font-size: 26px;
    margin-top: 35px;
}

.entry-content h3 {
    font-size: 20px;
    margin-top: 30px;
}

.entry-content .wp-block-columns {
    flex-direction: column;
}

.entry-content .wp-block-media-text {
    grid-template-columns: 1fr !important;
}

.entry-content .wp-block-media-text .wp-block-media-text__media {
    grid-row: 1;
}

.entry-content .wp-block-media-text .wp-block-media-text__content {
    grid-row: 2;
    padding: 20px 0 !important;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
    padding: 20px;
}

.entry-content blockquote p {
    font-size: 17px;
}

/* ----- Inventory Editable Content Zones ----- */
.inventory-intro { padding: 30px 0 0; }
.inventory-intro-heading { font-size: 22px; }
.inventory-intro-text { font-size: 14px; padding: 0 5px; }
.inventory-below { padding: 35px 0; }
.inventory-below-heading { font-size: 22px; }
.inventory-below-text { font-size: 14px; padding: 0 5px; }

/* ----- Inventory Page ----- */
.inventory-section {
    padding: 40px 0;
}

.inventory-container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 15px;
}

.inventory-sidebar {
    position: static;
    order: -1;
}

.filter-content {
    grid-template-columns: 1fr;
}

.filter-header {
    clip-path: none;
}

.inventory-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.inventory-cta {
    padding: 50px 0;
}

.inventory-cta h2 {
    font-size: 28px;
}

.inventory-cta .cta-buttons {
    flex-direction: column;
}

.inventory-cta .cta-buttons .btn {
    width: 100%;
    justify-content: center;
}

/* ----- DealSector Inventory — mobile layout -----
   #content-desktop/#content-mobile visibility now lives with the rest of
   the toggle logic in components.css (`.dst-vis-desktop`/`.dst-vis-mobile`,
   or legacy `.k4-vis-desktop`/`.k4-vis-mobile` — ADR-0003 dual selector,
   slice 21 ID-toggle retirement) — see that file for the base/min-992
   tiers. Nothing content-toggle-related remains here. */
.inventory_wrapper .wp-block-columns {
    flex-direction: column !important;
    gap: 15px !important;
}

.inventory_wrapper .wp-block-column {
    /* Consolidated here (was split across this file's old max-width:767
       block AND components.css's old max-width:991 block, both setting
       flex-basis/width/max-width:100% identically) — this single
       declaration now covers the full 0–991 range components.css's own
       :first-child/:nth-child(2)/:nth-child(3) rules don't already claim
       by higher specificity; reverted together at min-width:992 below. */
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}

.inventory_wrapper .wp-block-button .wp-block-button__link {
    padding: 18px 20px !important;
    font-size: 16px !important;
    min-height: 54px !important;
}

.inventory_wrapper .wp-block-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.inventory_wrapper a[style*="text-transform: uppercase"] {
    font-size: 20px !important;
}

.inventory_wrapper figure.wp-block-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.inventory_wrapper figure.wp-block-table table {
    min-width: 100% !important;
}

.inventory_wrapper figure.wp-block-table td {
    padding: 12px 10px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

.inventory_wrapper .inventory_custom_button1 {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 20px 15px !important;
}

.sidebar-contact-box {
    text-align: center;
}

.sidebar-contact-box .btn {
    width: 100%;
    justify-content: center;
}

/* ----- Footer ----- */
.footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
}

.footer-col {
    text-align: center;
}

.footer-social {
    justify-content: center;
}

.footer-links a {
    justify-content: center;
}

.footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

/* ----- Buttons ----- */
.btn {
    padding: 12px 25px;
    font-size: 14px;
}

.btn-lg {
    padding: 15px 30px;
    font-size: 16px;
}

/* ----- Inventory Cards ----- */
.inventory-card-content {
    padding: 15px;
}

.inventory-card h3 {
    font-size: 14px;
    height: auto;
}

.price-sale {
    font-size: 20px;
}

/* ----- Content Grid (generic page sidebar) ----- */
.content-sidebar {
    order: -1;
}

/* ----- Section Headers ----- */
.section-header h2 {
    font-size: 24px;
}

/* ----- Service Cards / CTA / Contact Info / Financing (block patterns) ----- */
.service-card {
    padding: 30px 20px;
}

.service-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.cta-box {
    padding: 20px;
}

.contact-info-box {
    padding: 25px;
}

.financing-features {
    flex-direction: column;
}

.feature-item {
    justify-content: center;
}

.post-navigation {
    flex-direction: column;
}

.nav-next {
    text-align: left;
}

/* ==========================================================================
   MIN-WIDTH: 576px — "mobile" tier proper (was: max-width:767, i.e. the
   576–767 slice of it; the ≤575 slice stayed in BASE above)
   ========================================================================== */

@media (min-width: 576px) {
    /* Typography */
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    /* h3 unchanged at 20px (max-width:767's value) — no rule needed */

    /* Categories Grid — 767's value differs from 575's */
    .category-card {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        height: 150px;
    }

    /* Brands Grid — 767's value equals 575's (both repeat(2,1fr), gap:15px)
       — no rule needed, inherited from BASE unchanged. */

    /* Hero */
    .hero h1 {
        font-size: 32px;
    }

    /* Hero arrows unchanged from BASE at this tier (both draw from the
       max-width:767 block) — no rule needed. */
}

/* ==========================================================================
   MIN-WIDTH: 768px — tablet portrait+ (was: max-width:991 range, i.e. the
   768–991 slice of it, restoring what max-width:767 no longer reaches)
   ========================================================================== */

@media (min-width: 768px) {
    /* Typography */
    h1 { font-size: 42px; }
    h2 { font-size: 36px; }
    h3 { font-size: 24px; }

    /* Section padding */
    :root {
        --dst-section-padding: 60px;
    }

    /* Container: max-width:767's `padding:0 15px` no longer reaches this
       tier — restore the var(--dst-gutter)-driven default (main.css). */
    .container {
        padding: 0 var(--dst-gutter);
    }

    /* Top Bar / Header: restore row layout + defaults, nothing below 767
       carries them further */
    .top-bar-inner {
        flex-direction: row;
        text-align: left;
    }

    .contact-info {
        flex-direction: row;
        gap: 30px;
    }

    .site-header {
        padding: 15px 0;
    }

    .site-logo img,
    .custom-logo {
        height: 70px;
    }

    /* Navigation: still the max-width:991 fixed-overlay behavior through
       this tier — no change from BASE (991's nav rules reach through 768). */

    /* Hero */
    .hero {
        min-height: 500px;
    }

    .hero-slide {
        min-height: 500px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-content {
        padding: 60px 20px;
    }

    .hero-arrow {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Arrow prev/next offset: neither 991 nor 1199 touch left/right —
       restore the 20px default now that 767's 10px no longer applies. */
    .hero-arrow-prev { left: 20px; }
    .hero-arrow-next { right: 20px; }

    /* .hero .hero-arrow opacity:0.7 no longer applies past 767 — restore
       the bare .hero-arrow default (0.6) it was beating on specificity. */
    .hero .hero-arrow {
        opacity: 0.6;
    }

    .hero-dots {
        bottom: 8px;
        gap: 0;
    }

    .hero-dot {
        width: 44px;
        height: 44px;
    }

    .hero-buttons {
        flex-direction: row;
    }

    .hero-buttons .btn {
        width: auto;
        justify-content: normal;
    }

    .deal-badge {
        display: none; /* max-width:991's hide still applies through 991 */
    }

    /* Search: 767's mobile stack no longer applies — restore desktop bar */
    .search-box {
        flex-direction: row;
        clip-path: polygon(2% 0, 98% 0, 100% 100%, 0% 100%);
        border-radius: 0;
    }

    .search-box input {
        border-radius: 0;
    }

    .search-box button {
        clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
        border-radius: 0;
        margin-left: -10px;
    }

    .featured-section::before,
    .featured-section::after {
        width: 150px;
    }

    .slider-container {
        padding: 0 60px;
    }

    .categories-grid {
        gap: 20px;
    }

    .category-card {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
        height: 200px; /* neither 991 nor 1199 set height — restore default */
    }

    .category-overlay h3 {
        font-size: 16px;
    }

    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px; /* neither 991 nor 1199 set gap at this width — restore default */
    }

    .brands-header {
        padding: 15px 40px;
    }

    .brands-header h2 {
        font-size: 28px;
    }

    .brand-logo {
        height: 80px;
        padding: 20px 25px;
    }

    .about-inner {
        padding: 0 40px;
    }

    .about-section h2 {
        font-size: 28px;
    }

    .about-highlight {
        font-size: 18px;
    }

    .years-badge {
        padding: 20px 40px;
        flex-direction: row;
        text-align: left;
    }

    .years-badge .number {
        font-size: 48px;
    }

    .years-badge .text {
        text-align: left;
    }

    /* Page Hero */
    .page-hero {
        padding: 60px 0;
    }

    .page-hero h1 {
        font-size: 36px;
    }

    /* Entry Content */
    .entry-content h2 { font-size: 30px; margin-top: 50px; }
    .entry-content h3 { font-size: 22px; margin-top: 40px; }

    .entry-content .wp-block-columns {
        gap: 25px;
    }

    /* Inventory Editable Content Zones */
    .inventory-intro { padding: 40px 0 5px; }
    .inventory-intro-heading { font-size: 26px; }
    .inventory-intro-text { font-size: 15px; padding: 0; }
    .inventory-below { padding: 45px 0; }
    .inventory-below-heading { font-size: 26px; }
    .inventory-below-text { font-size: 15px; padding: 0; }

    /* Inventory Page */
    .inventory-container {
        grid-template-columns: 1fr;
        gap: 40px; /* neither 991 nor 1199 set gap — restore default */
        padding: 0 var(--dst-gutter);
    }

    .inventory-sidebar {
        position: static;
        order: -1;
    }

    .filter-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .inventory-header {
        flex-direction: row;
        gap: 0;
        align-items: normal;
    }

    /* DealSector tablet adjustments (max-width:991 range) */
    .inventory_wrapper .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 20px !important; /* restore default now that 767's 15px no longer applies */
    }

    .inventory_wrapper .wp-block-columns > .wp-block-column:first-child {
        flex-basis: 100% !important;
    }

    .inventory_wrapper .wp-block-columns > .wp-block-column:nth-child(2) {
        flex-basis: 60% !important;
    }

    .inventory_wrapper .wp-block-columns > .wp-block-column:nth-child(3) {
        flex-basis: 35% !important;
    }

    .inventory_wrapper .wp-block-button .wp-block-button__link {
        padding: 10px 15px !important;
        font-size: 13px !important;
        min-height: auto !important;
    }

    .inventory_wrapper .wp-block-buttons {
        flex-direction: column !important; /* unchanged from components.css default */
        gap: 6px !important;
        width: auto !important;
    }

    .inventory_wrapper a[style*="text-transform: uppercase"] {
        font-size: 24px !important;
    }

    .inventory_wrapper .inventory_custom_button1 {
        flex-direction: row !important;
        text-align: left !important;
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    /* Categories Grid (generic content grid) */
    .content-grid {
        grid-template-columns: 1fr; /* unchanged — matches main.css default already */
    }

    .content-sidebar {
        order: -1; /* still stacked-above through 991 */
    }

    /* Section Headers */
    .section-header h2 {
        font-size: 32px;
    }

    /* About Section */
    .about-section h2 {
        font-size: 28px;
    }

    .about-highlight {
        font-size: 18px;
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px; /* only max-width:1199 sets gap in this range — restore its 40px */
    }

    .footer-col {
        text-align: left;
    }

    .footer-social {
        justify-content: flex-start;
    }

    .footer-links a {
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: row;
        text-align: left;
    }

    /* Buttons: max-width:767's compact sizing no longer applies — restore default */
    .btn {
        padding: 15px 30px;
        font-size: 16px;
    }

    .btn-lg {
        padding: 18px 40px;
        font-size: 18px;
    }

    /* Inventory Cards */
    .inventory-card-content {
        padding: 20px;
    }

    .inventory-card h3 {
        font-size: 15px;
        height: 40px;
    }

    .price-sale {
        font-size: 24px;
    }

    /* Entry Content Mobile overrides no longer apply — restore defaults */
    .entry-content {
        font-size: 17px;
    }

    .entry-content .wp-block-media-text {
        grid-template-columns: unset !important; /* restore main.css's 2-col grid default */
    }

    .entry-content .wp-block-media-text .wp-block-media-text__media {
        grid-row: auto;
    }

    .entry-content .wp-block-media-text .wp-block-media-text__content {
        grid-row: auto;
        padding: 0 !important;
    }

    .entry-content blockquote,
    .entry-content .wp-block-quote {
        padding: 25px 30px;
    }

    .entry-content blockquote p {
        font-size: 19px;
    }

    /* Sidebar contact box: max-width:767's centering no longer applies */
    .sidebar-contact-box {
        text-align: left;
    }

    .sidebar-contact-box .btn {
        width: auto;
        justify-content: normal;
    }

    /* Service Cards / CTA / Contact / Financing: restore component defaults */
    .service-card {
        padding: 40px 30px;
    }

    .service-icon {
        width: 80px;
        height: 80px;
        font-size: inherit;
    }

    .cta-box {
        padding: 30px;
    }

    .contact-info-box {
        padding: 40px;
    }

    .financing-features {
        flex-direction: row;
    }

    .feature-item {
        justify-content: flex-start;
    }

    .post-navigation {
        flex-direction: row;
    }

    .nav-next {
        text-align: right;
    }

    /* Inventory CTA / intro-below headings unaffected by 991 for these two
       — 767's mobile sizes no longer apply, restore defaults */
    .inventory-cta {
        padding: 80px 0;
    }

    .inventory-cta h2 {
        font-size: 36px;
    }

    .inventory-cta .cta-buttons {
        flex-direction: row;
    }

    .inventory-cta .cta-buttons .btn {
        width: auto;
        justify-content: normal;
    }

    /* Page Hero mobile size no longer applies at this tier — already set
       above (36px) matches max-width:991's value, no separate rule needed. */
}

/* ==========================================================================
   MIN-WIDTH: 992px — tablet landscape+ (was: max-width:1199 range /
   restoring the desktop default for everything max-width:991 touched)
   ========================================================================== */

@media (min-width: 992px) {
    /* Navigation: restore desktop horizontal bar — nothing below 992
       reaches here anymore */
    .main-navigation {
        display: flex;
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        background: transparent;
        z-index: auto;
        flex-direction: row;
        justify-content: normal;
        align-items: normal;
        padding: 0;
        overflow-y: visible;
        transform: none;
        transition: none;
        box-shadow: none;
    }

    .main-navigation ul {
        flex-direction: row;
        text-align: left;
    }

    .main-navigation a {
        font-size: 15px;
        padding: 12px 20px;
    }

    /* slice 24 drawer accordion (max-height/overflow) is a mobile-only
       mechanism — must be explicitly reverted here or the base tier's
       `max-height: 0; overflow: hidden;` would leak upward and clip the
       hover-driven desktop dropdown to zero height regardless of its
       opacity/visibility state below. */
    .main-navigation .sub-menu {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        background: var(--dst-steel);
        box-shadow: var(--dst-shadow-medium);
        border: none;
        border-top: 3px solid var(--dst-primary-red);
        max-height: none;
        overflow: visible;
        transition: var(--dst-transition);
    }

    /* Accordion caret never shows at desktop — dropdown stays hover-only. */
    .submenu-toggle {
        display: none;
    }

    /* Drawer backdrop never applies at desktop. */
    .nav-drawer-backdrop {
        display: none;
    }

    /* Scroll lock is a mobile-drawer-only concept; nothing sets
       body.nav-drawer-open at >=992 (the resize handler in
       navigation.js closes/unlocks before this tier is reachable), but
       revert defensively for the same reason every other property above
       is explicit rather than assumed. */
    body.nav-drawer-open {
        overflow: visible;
    }

    .main-navigation li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* slice 23: first-level dropdowns auto-flow into columns of max 7
       items. grid-template-rows: repeat(7, auto) is what actually caps
       the column at 7 — CSS can't count list items, but the grid engine
       fills 7 rows per column structurally before wrapping, whatever
       the item count (13 items -> 2 cols of 7/6; 5 items -> 1 col of 5,
       no visual change from the old single-column look). Scoped to
       `> ul > li > .sub-menu` (first level only) so nested sub-sub-menus
       (none exist in the current live menus, but the walker doesn't
       prevent them) fall through to the generic .sub-menu rule above
       and stay single-column flex — deeper levels are not part of this
       slice's scope. */
    .main-navigation > ul > li > .sub-menu {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(7, auto);
        grid-auto-columns: minmax(220px, max-content);
        column-gap: 8px;
        min-width: 220px;
        max-width: calc(100vw - 40px); /* edge-safety belt: never exceed viewport even at 3+ columns */
    }

    /* Edge safety: dropdowns anchored to the trailing end of the primary
       menu (TRAILER today; whatever sits last on other sites) would clip
       the right side of the viewport once they grow past one column.
       Right-align under the last couple of top-level items instead of
       the default left:0 anchor — same trigger, dropdown just grows
       leftward instead of rightward. */
    .main-navigation > ul > li:nth-last-child(-n+2) > .sub-menu {
        left: auto;
        right: 0;
    }

    /* Remove the trailing divider at the bottom of each full 7-item
       column (the plain :last-child rule below only catches the very
       last item overall, which sits in the final, often-shorter column). */
    .main-navigation > ul > li > .sub-menu > li:nth-child(7n) > a {
        border-bottom: none;
    }

    .main-navigation .sub-menu a {
        font-size: 14px;
        border-bottom: 1px solid var(--dst-concrete);
    }

    .nav-cta > a,
    .main-navigation .nav-cta > a {
        margin: 0 0 0 10px;
    }

    .mobile-menu-toggle {
        display: none;
    }

    /* Hero */
    .hero {
        height: 600px;
        min-height: auto;
    }

    .hero-slide {
        min-height: 0;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero-content {
        padding: 80px var(--dst-gutter);
    }

    .hero-arrow {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .deal-badge {
        display: block; /* max-width:991's hide no longer applies */
        right: 40px; /* max-width:1199's value still applies through 1199 */
    }

    /* Categories Grid */
    .category-card {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }

    /* Brands Grid */
    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Footer Grid — max-width:1199's value still applies through 1199 */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    /* Content zones: restore desktop */
    .inventory-intro { padding: 50px 0 10px; }
    .inventory-intro-heading { font-size: 32px; }
    .inventory-intro-text { font-size: 17px; }
    .inventory-below { padding: 60px 0; }
    .inventory-below-heading { font-size: 30px; }
    .inventory-below-text { font-size: 16px; }

    /* Inventory Page — 3-col grid resumes */
    .inventory-container {
        grid-template-columns: 300px 1fr;
    }

    .inventory-sidebar {
        position: sticky;
        order: 0;
    }

    /* .filter-content's own tablet 2-col accordion (max-width:991) no
       longer applies; the 992+ sticky-scroll pair (components.css, slice
       16) takes over from here — no grid-template-columns rule needed. */

    /* DealSector: 3-column desktop layout resumes; wp-block-columns wrap
       and column-stack from the 991-and-below tiers no longer apply.
       flex-direction was set unconditionally in BASE above (mirrors the
       original: BOTH this file's max-width:767 block AND components.css's
       max-width:991 block set it to column) and must be explicitly
       reverted here — mobile-first values persist upward otherwise. */
    .inventory_wrapper .wp-block-columns {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .inventory_wrapper .wp-block-column {
        flex-basis: auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: inherit !important;
    }

    .inventory_wrapper .wp-block-columns > .wp-block-column:first-child {
        flex-basis: 60% !important;
    }

    .inventory_wrapper .wp-block-columns > .wp-block-column:nth-child(2) {
        flex-basis: 35% !important;
    }

    .inventory_wrapper .wp-block-columns > .wp-block-column:nth-child(3) {
        flex-basis: 22% !important;
    }

    /* Entry Content */
    .entry-content h2 { font-size: 36px; margin-top: 50px; }
    .entry-content h3 { font-size: 26px; margin-top: 40px; }

    .entry-content .wp-block-columns {
        gap: 40px;
    }
}

/* ==========================================================================
   MIN-WIDTH: 1200px — full desktop (was: outside all responsive.css
   max-width blocks — restoring the plain main.css/components.css defaults)
   ========================================================================== */

@media (min-width: 1200px) {
    .category-card {
        flex: 0 0 calc(25% - 15px);
        max-width: calc(25% - 15px);
    }

    .brands-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .hero h1 {
        font-size: 56px;
    }

    .deal-badge {
        right: 80px;
    }

    .deal-badge img {
        width: 220px;
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 50px;
    }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION FIXES — not a width breakpoint, out of scope for
   the mobile-first migration (max-height + orientation, applies across all
   widths whenever the viewport is short-and-wide)
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        height: auto;
        padding: 40px 0;
    }

    .hero-content {
        padding: 40px 20px;
    }

    .main-navigation {
        overflow-y: auto;
    }
}

/* ==========================================================================
   SMALL MOBILE — LightSlider arrow nudge only.
   The rest of the legacy max-width:575 block (typography, category-card,
   brands-grid, hero h1/badge, section-header h2) merged into BASE above,
   verified identical against the small-mobile (375/320px) evidence shots.
   LightSlider (`.lSAction`) is third-party carousel CSS with no author
   default to invert against — kept as a documented, justified max-width
   exception rather than guessed at.
   ========================================================================== */

@media (max-width: 575px) {
    .lSAction > .lSPrev {
        left: -40px !important;
    }

    .lSAction > .lSNext {
        right: -40px !important;
    }

    .lSAction > a {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    /* Hide non-essential elements */
    .top-bar,
    .site-header,
    .hero,
    .search-section,
    .featured-section,
    .deal-badge,
    .social-icons,
    .footer-social,
    nav,
    .btn,
    video,
    audio {
        display: none !important;
    }

    /* Reset colors */
    body {
        background: white !important;
        color: black !important;
    }

    /* Reset links */
    a {
        color: black !important;
        text-decoration: underline !important;
    }

    /* Show URLs */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 12px;
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Footer */
    .site-footer {
        background: white !important;
        color: black !important;
        border-top: 1px solid #ccc;
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --dst-primary-red: #ff0000;
        --dst-concrete: #666666;
    }

    .btn-primary {
        border: 2px solid white;
    }

    .main-navigation a {
        border-bottom-width: 4px;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .deal-badge img {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}