/**
 * Main CSS - Core Layout and Structure
 *
 * @package DS_Theme_Rugged_Dark
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens) + Base Reset + Layout Utilities
   ========================================================================== */
/* Slice 13 root-cause fix: this block used to live only in the theme's
   root style.css. Per architecture, every real site runs a CHILD theme
   (CONTEXT.md: "the parent is never the active theme on a client site"),
   and inc/enqueue-scripts.php enqueues get_stylesheet_uri() (the ACTIVE
   theme's style.css) as the "dst-style" handle, not the parent's own
   style.css. Child themes are documented as carrying "No CSS rules — the
   parent theme styles everything," so these design tokens, the base
   reset, and the .container/.section-padding utilities were silently
   NEVER loaded on any client site — only main.css/components.css (which
   ARE enqueued via get_template_directory_uri()) were live. Every
   var(--dst-*) consumer across main.css/components.css/transax-override.css
   depends on this block; without it every var() declaration is invalid,
   so backgrounds/borders/clip-paths/padding built on shorthand properties
   silently fall back to their initial values (transparent/0/none) instead
   of erroring. This explained: hero/CTA buttons rendering with no
   background or border (symptom 2), hero content and other sections
   sitting flush against the viewport edge because .container/.hero-content
   padding uses var(--dst-gutter) (symptom 4), and hero dots rendering as
   hollow/dark squares because .hero-dot.active::before's fill uses
   var(--dst-primary-red) (symptom 5). style.css itself is left untouched
   (WP still needs its header block to recognize the theme), but its
   operative CSS is now duplicated here so it actually ships. */

:root {
    /* Colors */
    --dst-primary-red: #c41e2f;
    --dst-dark-red: #8b1621;
    --dst-charcoal: #1a1a1a;
    --dst-steel: #2d2d2d;
    --dst-rust: #8b4513;
    --dst-concrete: #3a3a3a;
    --dst-light-gray: #f5f5f5;
    --dst-white: #ffffff;
    --dst-gold: #d4a84b;

    /* Typography */
    --dst-font-heading: 'Oswald', sans-serif;
    --dst-font-body: 'Open Sans', sans-serif;

    /* Spacing */
    --dst-section-padding: 80px;
    --dst-container-max: 1400px;
    --dst-gutter: 20px;

    /* Signature Effects */
    --dst-clip-angle: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
    --dst-clip-angle-left: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    --dst-clip-angle-right: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
    --dst-clip-subtle: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
    --dst-clip-subtle-flip: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
    --dst-shadow-heavy: 0 20px 40px rgba(0, 0, 0, 0.4);
    --dst-shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.3);
    --dst-transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--dst-font-body);
    font-size: 16px;
    line-height: 1.6;
    background: var(--dst-charcoal);
    color: var(--dst-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dst-font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 { font-size: 56px; }
h2 { font-size: 42px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
    margin-bottom: 1em;
}

a {
    color: var(--dst-primary-red);
    text-decoration: none;
    transition: var(--dst-transition);
}

a:hover {
    color: var(--dst-dark-red);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
}

.section-padding {
    padding: var(--dst-section-padding) 0;
}

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

.bg-charcoal {
    background: var(--dst-charcoal);
}

.bg-steel {
    background: var(--dst-steel);
}

.bg-primary-red {
    background: var(--dst-primary-red);
}

/* Texture Overlay Effect */
.texture-overlay {
    position: relative;
}

.texture-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 42px;
    margin-bottom: 10px;
}

.section-header h2 span {
    color: var(--dst-primary-red);
}

.section-header .divider {
    width: 80px;
    height: 4px;
    background: var(--dst-primary-red);
    margin: 15px auto;
}

/* WordPress core: screen-reader text + skip link (header.php uses .skip-link) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--dst-steel);
    clip: auto !important;
    clip-path: none;
    color: var(--dst-white);
    display: block;
    font-size: 14px;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    background: var(--dst-primary-red);
    color: var(--dst-white);
    padding: 10px 20px;
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    font-family: var(--dst-font-heading);
    text-transform: uppercase;
}

.skip-link:focus {
    top: 10px;
}

/* WordPress Alignments */
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

.alignwide {
    max-width: calc(100% + 100px);
    margin-left: -50px;
    margin-right: -50px;
}

.alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* WordPress Captions */
.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 14px;
    color: #888;
    margin-top: 0.5em;
}

/* WordPress Gallery */
.gallery {
    display: grid;
    grid-gap: 10px;
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

.gallery-item {
    margin: 0;
}

.gallery-item img {
    display: block;
    width: 100%;
}

/* Grid Systems (mobile-first: base = smallest column count, min-width scales up) */
.grid-2col,
.grid-3col,
.grid-4col {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 577px) {
    .grid-3col,
    .grid-4col { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .content-grid { grid-template-columns: 1fr 350px; gap: 50px; }
}

@media (min-width: 992px) {
    .grid-2col { grid-template-columns: repeat(2, 1fr); }
    .grid-3col { grid-template-columns: repeat(3, 1fr); }
    .grid-4col { grid-template-columns: repeat(4, 1fr); gap: 30px; }
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */

.top-bar {
    background: linear-gradient(135deg, var(--dst-charcoal) 0%, var(--dst-steel) 100%);
    padding: 8px 0;
    border-bottom: 3px solid var(--dst-primary-red);
}

.top-bar-inner {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    display: flex;
    gap: 30px;
    align-items: center;
}

.contact-info a {
    color: var(--dst-white);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--dst-transition);
}

.contact-info a:hover {
    color: var(--dst-primary-red);
}

.contact-info i {
    color: var(--dst-primary-red);
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons a {
    width: 32px;
    height: 32px;
    background: var(--dst-primary-red);
    color: var(--dst-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--dst-transition);
}

.social-icons a:hover {
    background: var(--dst-dark-red);
    transform: translateY(-2px);
}

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

.site-header {
    background: linear-gradient(180deg, var(--dst-steel) 0%, var(--dst-charcoal) 100%);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: padding 0.3s ease;
}

/* Symptom 1: navigation.js toggles .is-scrolled on .site-header past the
   top-bar height, but no CSS ever consumed the class — the header (and its
   70px logo) never shrank, so the sticky header could overlap page content
   at full height. Shrinks header padding + logo/title size together so the
   sticky bar compacts instead of overflowing. */
.site-header.is-scrolled {
    padding: 8px 0;
}

.header-inner {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo img,
.custom-logo {
    height: 70px;
    width: auto;
    transition: height 0.3s ease;
}

.site-header.is-scrolled .site-logo img,
.site-header.is-scrolled .custom-logo {
    height: 46px;
}

.site-header.is-scrolled .site-title {
    font-size: 20px;
}

.site-title {
    font-family: var(--dst-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--dst-white);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.site-title:hover {
    color: var(--dst-primary-red);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.main-navigation {
    display: flex;
    gap: 5px;
}

.main-navigation ul {
    display: flex;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    color: var(--dst-white);
    text-decoration: none;
    padding: 12px 20px;
    font-family: var(--dst-font-heading);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 3px solid transparent;
    transition: var(--dst-transition);
    display: block;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--dst-primary-red);
    border-bottom-color: var(--dst-primary-red);
    background: rgba(196, 30, 47, 0.1);
}

/* Navigation CTA Button */
.nav-cta > a,
.main-navigation .nav-cta > a {
    background: var(--dst-primary-red) !important;
    color: var(--dst-white) !important;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
    border-radius: 0;
    margin-left: 10px;
    padding: 12px 24px !important;
    border-bottom: none !important;
}

.nav-cta > a:hover,
.main-navigation .nav-cta > a:hover {
    background: var(--dst-dark-red) !important;
}

/* Dropdown Menus */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--dst-steel);
    box-shadow: var(--dst-shadow-medium);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--dst-transition);
    z-index: 100;
    flex-direction: column;
    border-top: 3px solid var(--dst-primary-red);
}

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

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

.main-navigation .sub-menu li:last-child a {
    border-bottom: none;
}

/* Multi-column dropdown flow (slice 23): the fixed-2-column ".k4-mega" /
   "li.k4-mega-menu" mechanism formerly here was dead code — no walker,
   shortcode, or admin UI in this repo ever emitted either class (grep
   confirmed, 2026-08-07), and the live TRAILER menu (13 children) never
   carried it. Removed rather than kept alongside a second mechanism.
   Replaced with an automatic, item-count-agnostic column-flow rule
   (CSS Grid, no class needed) — see the min-width:992 tier in
   responsive.css, which is where this theme's desktop dropdown chrome
   is actually established (this file's dropdown rules above are the
   unguarded base that responsive.css's mobile tier overrides and its
   min-width:992 tier restores/extends). Documented in
   docs/wiki/theme/frontend-conventions.md. */

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--dst-white);
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

/* ===== Hero Slideshow ===== */
.hero {
    position: relative;
    height: 600px;
    background: linear-gradient(135deg, var(--dst-charcoal) 0%, var(--dst-steel) 50%, var(--dst-charcoal) 100%);
    overflow: hidden;
}

.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0s;
    z-index: 2;
}

/* Slide text entrance animation */
.hero-slide.active .hero-text {
    animation: heroTextIn 600ms ease-out 200ms both;
}

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    /* Motion (Ken Burns keyframes, image slides only) lives in the slice-18
       block below, scoped to .hero-slide--kenburns — replaces the old flat
       transition-on-.active zoom that used to live here unconditionally. */
}

/* ===== Slice 08 — LCP <img> (first slide only) =====
   Additive, mobile-first (no max-width queries). Sits in the same absolute
   layer as .hero-bg, positioned right after it in the markup so it paints
   on top without needing an explicit stacking fight with .hero-gradient /
   .hero-content — those come later in the DOM and stay on top naturally.
   Mirrors .hero-bg's opacity/Ken-Burns treatment for visual parity: the
   <img> replaces .hero-bg as what's actually visible; .hero-bg remains
   underneath purely as a CSS fallback if the image request fails.
   z-index: 0 (not auto) makes "above the bg, below .hero-content" explicit
   while still staying in the same stacking tier as .hero-gradient, which
   is later in the DOM and so still paints on top to darken the image for
   text contrast — a positive z-index here would wrongly jump the gradient. */
.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    z-index: 0;
    /* Motion (Ken Burns keyframes, image slides only) lives in the slice-18
       block below, scoped to .hero-slide--kenburns. */
}

/* ===== Slice 17 — hero video slide (ADR-0002 poster-first) =====
   .hero-slide-video sits in the same absolute layer as .hero-bg /
   .hero-slide-img, later in the DOM (see inc/shortcodes.php) so it paints
   above both without needing an explicit stacking fight — .hero-gradient /
   .hero-content come later still and stay on top for text contrast, same
   reasoning as the slice-08 comment above. Starts at opacity 0: the poster
   (.hero-bg / the slide-1 <img>) is what's actually visible on first paint,
   so the video can NEVER be the LCP element. hero-slideshow.js adds
   .is-loaded once the browser fires loadeddata/canplay, fading the video up
   to the SAME 0.3 opacity as .hero-bg/.hero-slide-img (visual parity — the
   hero's dark gradient + text-contrast treatment applies equally whether
   the layer underneath is a still or motion). No transform/animation on
   THIS element itself — the <video> never Ken-Burns-pans; it's the poster
   underneath (.hero-bg/.hero-slide-img) that keeps its Ken Burns motion on
   mobile per ADR-0002 s3, and stops again on desktop once video is
   expected to play. See the slice-18 block below for both rules. */
.hero-slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    transition: opacity 600ms ease-in;
}

.hero-slide-video.is-loaded {
    opacity: 0.3;
}

/* ===== Slice 18 — Ken Burns motion (PRD-0002 s4 + ADR-0002 s3) =====
   .hero-slide--kenburns is added by dst_shortcode_hero() to EVERY slide,
   image or video. That's deliberate, not an oversight: ADR-0002 s3 requires
   mobile to get "the poster only (Ken Burns'd)" for a video slide — on a
   phone the <video> never even loads (hero-slideshow.js gates the lazy
   load/play behind the same min-width match used below), so its poster
   needs the identical motion an image slide gets, or a video slide would go
   flat/static on mobile. The min-width override further down removes the
   animation again at the desktop breakpoint specifically for
   .hero-slide--video, where the loaded/playing video supplies its own
   motion and a competing pan/zoom on the poster underneath would be
   redundant. transform-origin is a static per-slide value (alternates
   odd/even by DOM position via nth-child, NOT part of the keyframes) — the
   animation itself only scales, so a fixed off-center origin is what turns
   a pure zoom into a pan+zoom. Wrapped in prefers-reduced-motion:
   no-preference — the ONLY gate on the animation; there is no JS toggle.
   Scoped to .active so only the visible slide burns CPU animating. */
.hero-slide--kenburns .hero-bg,
.hero-slide--kenburns .hero-slide-img {
    transform-origin: top left;
}

.hero-slide--kenburns:nth-child(even) .hero-bg,
.hero-slide--kenburns:nth-child(even) .hero-slide-img {
    transform-origin: bottom right;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-slide--kenburns.active .hero-bg,
    .hero-slide--kenburns.active .hero-slide-img {
        animation: dst-hero-kenburns 14s ease-in-out infinite alternate;
    }
}

@keyframes dst-hero-kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08);
    }
}

/* Desktop-and-up: a video slide's poster stops Ken Burns-ing once a
   <video> is expected to load/play there (hero-slideshow.js uses the same
   768px threshold to decide whether to fetch/play the video at all — see
   its DST_HERO_VIDEO_MIN_WIDTH constant). Image slides are untouched by
   this rule (no .hero-slide--video class on them), so they keep panning at
   every breakpoint. */
@media (min-width: 768px) {
    .hero-slide--video.active .hero-bg,
    .hero-slide--video.active .hero-slide-img {
        animation: none;
    }
}

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0.7) 50%, rgba(26, 26, 26, 0.4) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 80px var(--dst-gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.hero-text {
    max-width: 600px;
}

.hero-badge {
    display: inline-block;
    background: var(--dst-primary-red);
    color: var(--dst-white);
    padding: 8px 16px;
    font-family: var(--dst-font-heading);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
}

.hero h1 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero h1 span {
    color: var(--dst-primary-red);
}

.hero-subtitle {
    font-size: 18px;
    color: #ccc;
    margin-bottom: 30px;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

/* ===== Hero Arrows ===== */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    color: var(--dst-white);
    border: 2px solid rgba(255, 255, 255, 0.2);
    width: 48px;
    height: 48px;
    border-radius: 0;
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s, background 0.3s, border-color 0.3s;
    opacity: 0.6;
}

.hero:hover .hero-arrow {
    opacity: 1;
}

/* Ensure arrows are always tappable on touch devices */
@media (hover: none) {
    .hero-arrow {
        opacity: 0.7;
    }
}

.hero-arrow:hover {
    background: var(--dst-primary-red);
    border-color: var(--dst-primary-red);
}

.hero-arrow-prev {
    left: 20px;
}

.hero-arrow-next {
    right: 20px;
}

/* ===== Hero Dots ===== */
.hero-dots {
    position: absolute;
    bottom: 8px; /* 44px buttons: keeps the 12px visual dots at their original height */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0; /* buttons carry their own breathing room; keeps 44px targets from overlapping */
}

/* 44x44 tap target (a11y); the 12px visual dot is rendered by ::before */
.hero-dot {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-dot::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
    transition: background 0.3s, border-color 0.3s;
}

.hero-dot:hover::before {
    border-color: var(--dst-white);
    background: rgba(255, 255, 255, 0.3);
}

.hero-dot.active::before {
    background: var(--dst-primary-red);
    border-color: var(--dst-primary-red);
}

/* Progress bar on active dot */
.hero-dot.active::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--dst-white);
    position: absolute;
    top: 30px; /* 2px below the visual dot (dot spans 16px-28px inside the 44px button) */
    left: calc(50% - 8px);
    animation: dotProgress var(--dst-hero-autoplay, 6000ms) linear forwards;
}

@keyframes dotProgress {
    from { width: 0; }
    to { width: 16px; }
}

/* Deal Badge */
.deal-badge {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    text-align: center;
}

.deal-badge a {
    display: block;
    transition: transform 0.3s;
}

.deal-badge a:hover {
    transform: scale(1.05);
}

.deal-badge img {
    width: 220px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.deal-cta {
    text-align: center;
    margin-top: 15px;
    background: var(--dst-primary-red);
    padding: 12px 24px;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
    font-family: var(--dst-font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dst-white);
    text-decoration: none;
    display: block;
    transition: background 0.3s;
}

.deal-cta:hover {
    background: var(--dst-dark-red);
    color: var(--dst-white);
}

/* ==========================================================================
   PAGE HERO
   ========================================================================== */

.page-hero {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, var(--dst-charcoal) 0%, var(--dst-steel) 100%);
    text-align: center;
}

.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

.page-hero h1 {
    position: relative;
    z-index: 2;
    font-size: 48px;
    margin-bottom: 10px;
}

.page-subtitle {
    position: relative;
    z-index: 2;
    font-size: 18px;
    color: #ccc;
}

/* ==========================================================================
   SEARCH SECTION
   ========================================================================== */

.search-section {
    background: var(--dst-primary-red);
    padding: 40px 0;
    position: relative;
}

.search-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--dst-charcoal), var(--dst-steel), var(--dst-charcoal));
}

.search-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
    text-align: center;
}

.search-section h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.search-box {
    display: flex;
    gap: 0;
    background: var(--dst-white);
    clip-path: polygon(2% 0, 98% 0, 100% 100%, 0% 100%);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.search-box input {
    flex: 1;
    padding: 18px 25px;
    border: none;
    font-size: 16px;
    outline: none;
    color: var(--dst-charcoal);
}

.search-box button {
    background: var(--dst-charcoal);
    color: var(--dst-white);
    border: none;
    padding: 18px 40px;
    font-family: var(--dst-font-heading);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: -10px;
}

.search-box button:hover {
    background: var(--dst-steel);
}

/* ==========================================================================
   FEATURED INVENTORY SECTION
   ========================================================================== */

.featured-section {
    background: var(--dst-charcoal);
    padding: var(--dst-section-padding) 0;
    position: relative;
    overflow: hidden;
}

/* Edge fade effect */
.featured-section::before,
.featured-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 5;
    pointer-events: none;
}

.featured-section::before {
    left: 0;
    background: linear-gradient(to right, var(--dst-charcoal) 0%, var(--dst-charcoal) 20%, transparent 100%);
}

.featured-section::after {
    right: 0;
    background: linear-gradient(to left, var(--dst-charcoal) 0%, var(--dst-charcoal) 20%, transparent 100%);
}

.slider-container {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 60px;
    position: relative;
}

/* Slice 15: on the live homepage, [dealsector_featuredinventorys] is placed
   directly in the editor content instead of via [dst_featured_inventory], so
   the .featured-section/.slider-container wrapper above never renders around
   it — the plugin's own featured-inventory-template.php wrapper
   (.carousel.position-relative.slideWrapper) lands as a bare child of
   <main class="site-main">, with zero margin/padding/max-width (flush left,
   no vertical rhythm). This mirrors .slider-container's centering directly
   onto that actual wrapper so spacing/centering hold regardless of which
   shortcode authored the section, without touching PHP/templates.
   [dealsector_relatedinventorys] on view-detail pages reuses the exact same
   wrapper markup+classes, so both selectors below are scoped to avoid it:
   the direct-child combinator (related inventory is nested inside
   .dst-inventory-wrapper, never a direct child of .site-main) and the
   :has(.dst-featured-item, .k4-featured-item) check (related items use
   .dst-related-item/.k4-related-item, not .dst-featured-item/.k4-featured-item)
   both independently exclude it. TEMPORARY dual .dst-*/.k4-* class check
   (ADR-0003) — the generator still emits .k4-featured-item until Recreate
   Templates regenerates DB pages. */
main.site-main > .slideWrapper,
.slideWrapper:has(.dst-featured-item, .k4-featured-item) {
    max-width: var(--dst-container-max);
    margin: var(--dst-section-padding) auto;
    padding: 0 var(--dst-gutter);
}

@media (min-width: 768px) {
    main.site-main > .slideWrapper,
    .slideWrapper:has(.dst-featured-item, .k4-featured-item) {
        padding: 0 60px;
    }
}

/* ==========================================================================
   CATEGORIES SECTION
   ========================================================================== */

.categories-section {
    background: linear-gradient(180deg, var(--dst-steel) 0%, var(--dst-charcoal) 100%);
    padding: var(--dst-section-padding) 0;
}

.categories-grid {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.category-card {
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
    position: relative;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    display: block;
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: all 0.4s;
}

.category-card:hover img {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.category-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dst-dark-red);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    transition: all 0.4s;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
}

.category-card:hover .category-overlay {
    background: var(--dst-primary-red);
    padding: 20px;
}

.category-overlay h3 {
    font-size: 16px;
    color: var(--dst-white);
    text-align: center;
    margin: 0;
}

/* ==========================================================================
   BRANDS SECTION
   ========================================================================== */

.brands-section {
    background: var(--dst-steel);
    padding: 60px 0;
    border-top: 5px solid var(--dst-primary-red);
    border-bottom: 5px solid var(--dst-primary-red);
}

.brands-inner {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
}

.brands-header {
    background: var(--dst-primary-red);
    padding: 15px 40px;
    display: inline-block;
    margin-bottom: 40px;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
}

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

.brands-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    align-items: center;
}

.brand-logo {
    background: var(--dst-white);
    padding: 20px 25px;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    transition: var(--dst-transition);
    cursor: pointer;
    border-left: 4px solid var(--dst-primary-red);
}

.brand-logo:hover {
    background: var(--dst-light-gray);
    border-left-color: var(--dst-dark-red);
    transform: translateX(5px);
}

.brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */

.about-section {
    background: var(--dst-steel);
    padding: var(--dst-section-padding) 0;
    position: relative;
}

.about-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.about-section h2 {
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
}

.about-section h2 span {
    color: var(--dst-primary-red);
}

.about-highlight {
    color: var(--dst-primary-red);
    font-family: var(--dst-font-heading);
    font-size: 20px;
    margin: 20px 0;
}

.about-text {
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 30px;
}

.years-badge {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--dst-charcoal);
    padding: 20px 40px;
    border-radius: 8px;
    border: 2px solid var(--dst-primary-red);
}

.years-badge .number {
    font-family: var(--dst-font-heading);
    font-size: 48px;
    font-weight: 700;
    color: var(--dst-primary-red);
}

.years-badge .text {
    font-family: var(--dst-font-heading);
    font-size: 16px;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.3;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: linear-gradient(180deg, var(--dst-charcoal) 0%, #0d0d0d 100%);
    padding: 60px 0 0;
}

.footer-inner {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--dst-steel);
}

.footer-col h3,
.footer-col .widget-title {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--dst-primary-red);
}

.footer-logo img {
    height: 60px;
    width: auto;
}

.footer-address {
    margin-top: 20px;
    color: #888;
    line-height: 1.8;
}

.footer-address a {
    color: var(--dst-white);
    text-decoration: none;
}

.footer-address a:hover {
    color: var(--dst-primary-red);
}

.hours-table {
    width: 100%;
}

.hours-table tr td {
    padding: 8px 0;
    color: #ccc;
}

.hours-table tr td:last-child {
    text-align: right;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links a:hover {
    color: var(--dst-primary-red);
}

.footer-links a i {
    color: var(--dst-primary-red);
    width: 16px;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.footer-social a {
    width: 44px;
    height: 44px;
    background: var(--dst-steel);
    color: var(--dst-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 18px;
    transition: var(--dst-transition);
}

.footer-social a:hover {
    background: var(--dst-primary-red);
    transform: translateY(-3px);
}

.footer-bottom {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #9a9a9a; /* >= 4.5:1 contrast on the dark footer gradient */
    font-size: 14px;
}

.footer-bottom a {
    display: inline-block;
}

.footer-bottom img {
    height: 30px;
    width: auto; /* pairs with the height attribute so the badge never distorts */
    opacity: 0.7;
    transition: opacity 0.3s;
}

.footer-bottom img:hover {
    opacity: 1;
}

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */

/* Base state - elements start hidden/offset */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animated state - when element enters viewport */
.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from left */
.scroll-animate-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.scroll-animate-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up */
.scroll-animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children animation delays */
.scroll-animate-stagger > *:nth-child(1) { transition-delay: 0s; }
.scroll-animate-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.scroll-animate-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.scroll-animate-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.scroll-animate-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.scroll-animate-stagger > *:nth-child(6) { transition-delay: 0.5s; }
.scroll-animate-stagger > *:nth-child(7) { transition-delay: 0.6s; }
.scroll-animate-stagger > *:nth-child(8) { transition-delay: 0.7s; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .scroll-animate-left,
    .scroll-animate-right,
    .scroll-animate-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   INVENTORY PAGE
   ========================================================================== */

/* Inventory Intro — editable content zone above the feed */
.inventory-intro {
    background: var(--dst-charcoal);
    padding: 50px 0 10px;
    text-align: center;
}

.inventory-intro .wp-block-group__inner-container {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
}

.inventory-intro-heading {
    color: var(--dst-white);
    font-family: var(--dst-font-heading);
    font-size: 32px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.inventory-intro-heading span {
    color: var(--dst-primary-red);
}

.inventory-intro-text {
    color: #bbb;
    font-size: 17px;
    line-height: 1.7;
    max-width: 860px;
    margin: 0 auto 10px;
}

/* Inventory Below — editable content zone below the feed */
.inventory-below {
    background: var(--dst-steel);
    padding: 60px 0;
    text-align: center;
    border-top: 3px solid var(--dst-primary-red);
}

.inventory-below .wp-block-group__inner-container {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
}

.inventory-below-heading {
    color: var(--dst-white);
    font-family: var(--dst-font-heading);
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.inventory-below-heading span {
    color: var(--dst-primary-red);
}

.inventory-below-text {
    color: #aaa;
    font-size: 16px;
    line-height: 1.75;
    max-width: 820px;
    margin: 0 auto 15px;
}

.inventory-section {
    background: var(--dst-charcoal);
    padding: 60px 0;
}

.inventory-container {
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
}

/* Sidebar */
.inventory-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.filter-content {
    background: var(--dst-steel);
    padding: 0;
    border: 1px solid var(--dst-concrete);
    border-radius: 8px;
    overflow: hidden;
}

/* Sidebar Contact Box */
.sidebar-contact-box {
    background: var(--dst-steel);
    padding: 25px;
    margin-top: 30px;
    border: 1px solid var(--dst-concrete);
    text-align: center;
}

.sidebar-contact-box h4 {
    color: var(--dst-white);
    font-family: var(--dst-font-heading);
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.sidebar-contact-box p {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Main Inventory Area */
.inventory-main {
    min-width: 0;
}

/* Inventory Grid Wrapper */
.inventory-grid-wrapper {
    min-height: 400px;
}

/* DealSector pagination text */
.inventory-grid-wrapper .pagination_wrapper {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--dst-concrete);
}

/* CTA Section */
.inventory-cta {
    background: linear-gradient(135deg, var(--dst-steel) 0%, var(--dst-charcoal) 100%);
    padding: 80px 0;
    text-align: center;
    border-top: 4px solid var(--dst-primary-red);
}

.inventory-cta .cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.inventory-cta h2 {
    color: var(--dst-white);
    font-family: var(--dst-font-heading);
    font-size: 36px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.inventory-cta p {
    color: #aaa;
    font-size: 18px;
    margin-bottom: 30px;
}

.inventory-cta .cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Page Hero for Inventory */
.page-hero {
    position: relative;
    padding: 100px 0 80px;
    background: var(--dst-charcoal);
    text-align: center;
    overflow: hidden;
}

.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--dst-charcoal) 0%, var(--dst-steel) 50%, var(--dst-charcoal) 100%);
    opacity: 0.8;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--dst-primary-red);
}

.page-hero .container {
    position: relative;
    z-index: 2;
    max-width: var(--dst-container-max);
    margin: 0 auto;
    padding: 0 var(--dst-gutter);
}

.page-hero h1 {
    color: var(--dst-white);
    font-family: var(--dst-font-heading);
    font-size: 48px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.page-hero .page-subtitle {
    color: #aaa;
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

/* Page Hero — Compact (View Detail pages) */
.page-hero--compact {
    padding: 40px 0 30px;
}
.page-hero--compact h1 {
    font-size: 28px;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.page-hero--compact .hero-stock {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 10px;
}
.page-hero--compact .breadcrumbs {
    font-size: 13px;
    color: #888;
}
.page-hero--compact .breadcrumbs a {
    color: #aaa;
    text-decoration: none;
}
.page-hero--compact .breadcrumbs a:hover {
    color: var(--dst-primary-red);
}
.page-hero--compact .breadcrumbs .separator {
    margin: 0 6px;
    color: #666;
}
.page-hero--compact .breadcrumbs .current {
    color: var(--dst-white);
}
@media (min-width: 992px) {
    .page-hero--compact {
        padding: 50px 0 35px;
        text-align: left;
    }
    .page-hero--compact h1 {
        font-size: 36px;
    }
}

/* Page Hero with Featured Image */
.page-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(45, 45, 45, 0.75) 50%, rgba(26, 26, 26, 0.85) 100%);
    z-index: 1;
}

.page-hero .page-hero-bg {
    opacity: 0.5;
}

/* ==========================================================================
   PAGE CONTENT / ENTRY CONTENT — WordPress Editor Styles
   ========================================================================== */

.page-content {
    background: var(--dst-charcoal);
}

.page-content .container {
    max-width: 1000px;
}

/* Entry Content — styles for content authored in the WP editor */
.entry-content {
    color: #ccc;
    font-size: 17px;
    line-height: 1.8;
}

.entry-content h2 {
    color: var(--dst-white);
    font-size: 36px;
    margin-top: 50px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--dst-primary-red);
}

.entry-content h3 {
    color: var(--dst-white);
    font-size: 26px;
    margin-top: 40px;
    margin-bottom: 15px;
}

.entry-content h4 {
    color: var(--dst-primary-red);
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 12px;
}

.entry-content h5,
.entry-content h6 {
    color: var(--dst-white);
    margin-top: 25px;
    margin-bottom: 10px;
}

.entry-content p {
    margin-bottom: 1.4em;
    color: #ccc;
}

.entry-content strong,
.entry-content b {
    color: var(--dst-white);
    font-weight: 700;
}

.entry-content a {
    color: var(--dst-primary-red);
    text-decoration: underline;
    text-decoration-color: rgba(196, 30, 47, 0.4);
    text-underline-offset: 3px;
    transition: var(--dst-transition);
}

.entry-content a:hover {
    color: var(--dst-white);
    text-decoration-color: var(--dst-white);
}

/* Images in content */
.entry-content img {
    border-radius: 8px;
    box-shadow: var(--dst-shadow-medium);
}

.entry-content .wp-block-image {
    margin: 30px 0;
}

.entry-content .wp-block-image figcaption {
    color: #888;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    font-style: italic;
}

/* WordPress Columns Block */
.entry-content .wp-block-columns {
    gap: 40px;
    margin: 40px 0;
}

.entry-content .wp-block-column {
    min-width: 0;
}

/* Lists */
.entry-content ul,
.entry-content ol {
    padding-left: 0;
    margin-bottom: 1.5em;
    list-style: none;
}

.entry-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    color: #ccc;
}

.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--dst-primary-red);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.entry-content ol {
    counter-reset: dst-counter;
}

.entry-content ol li {
    counter-increment: dst-counter;
    position: relative;
    padding-left: 36px;
    margin-bottom: 12px;
    color: #ccc;
}

.entry-content ol li::before {
    content: counter(dst-counter);
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: var(--dst-primary-red);
    color: var(--dst-white);
    font-family: var(--dst-font-heading);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

/* Blockquote / Quote Block */
.entry-content blockquote,
.entry-content .wp-block-quote {
    border-left: 4px solid var(--dst-primary-red);
    background: var(--dst-steel);
    padding: 25px 30px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
}

.entry-content blockquote p {
    font-size: 19px;
    font-style: italic;
    color: var(--dst-white);
    margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    color: #888;
    font-style: normal;
}

/* Separator / Divider Block */
.entry-content hr,
.entry-content .wp-block-separator {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--dst-primary-red), transparent);
    margin: 40px 0;
}

/* Cover Block */
.entry-content .wp-block-cover {
    border-radius: 8px;
    overflow: hidden;
    margin: 30px 0;
    min-height: 300px;
}

/* Group Block with background */
.entry-content .wp-block-group.has-background {
    padding: 30px;
    border-radius: 8px;
    margin: 30px 0;
}

/* Table Block */
.entry-content table,
.entry-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}

.entry-content table th {
    background: var(--dst-primary-red);
    color: var(--dst-white);
    padding: 12px 16px;
    font-family: var(--dst-font-heading);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: left;
}

.entry-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--dst-concrete);
    color: #ccc;
}

.entry-content table tr:hover td {
    background: rgba(196, 30, 47, 0.05);
}

/* Button Block */
.entry-content .wp-block-button .wp-block-button__link {
    font-family: var(--dst-font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 30px;
    transition: var(--dst-transition);
    clip-path: var(--dst-clip-subtle);
}

.entry-content .wp-block-button.is-style-fill .wp-block-button__link {
    background: var(--dst-primary-red);
    color: var(--dst-white);
}

.entry-content .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background: var(--dst-dark-red);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
    border: 2px solid var(--dst-primary-red);
    color: var(--dst-primary-red);
    background: transparent;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--dst-primary-red);
    color: var(--dst-white);
}

/* Media & Text Block */
.entry-content .wp-block-media-text {
    margin: 40px 0;
    gap: 40px;
}

.entry-content .wp-block-media-text .wp-block-media-text__media img {
    border-radius: 8px;
}

/* Gallery Block */
.entry-content .wp-block-gallery {
    margin: 30px 0;
    gap: 12px;
}

.entry-content .wp-block-gallery .wp-block-image img {
    border-radius: 6px;
}

/* Spacer — let it work as-is */

/* Video Block */
.entry-content .wp-block-video video,
.entry-content .wp-block-embed iframe {
    border-radius: 8px;
    box-shadow: var(--dst-shadow-medium);
}

/* First element in content — no extra top margin */
.entry-content > *:first-child {
    margin-top: 0;
}

/* Last element — no trailing bottom margin */
.entry-content > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   View Detail Page — outer containment for DealSector lightSlider.
   These target the page-template wrapper elements that sit OUTSIDE
   the DealSector template content. The gallery/grid overflow rules
   live in the inline <style> within dealsector-templates.php and
   travel with the DB page content after "Recreate Templates."
   ========================================================================== */
.inventory-detail .inventory-content { overflow: hidden; }
.inventory-detail .inventory-content .container { overflow: hidden; }
.dst-inventory-wrapper { overflow: hidden; min-width: 0; max-width: 100%; }

/* View Detail page: extra safety for wide content */
.dealsector-detail .site-main { overflow-x: hidden; }
.dealsector-detail img { max-width: 100%; height: auto; }
.dealsector-detail table { max-width: 100%; overflow-x: auto; display: block; }

/* ==========================================================================
   ERROR 404 PAGE (T6)
   Mobile-first: base = stacked/small (smallest screens), min-width:768
   enhances to the row layout + larger icon. Search form markup lives in
   searchform.php and reuses the homepage [dst_search_bar] `.search-box`
   component (white angled input + dark angled submit) rather than
   duplicating it — see "SEARCH SECTION" above and its responsive.css
   min-width:768 tier for the stack→row behavior that comes along for
   free here. `.error-404__icon` replaces the old 🚛 emoji placeholder
   with a themed Font Awesome fa-truck badge (steel circle, white icon,
   angled red accent bar echoing the .page-hero::after / .search-
   section::before brand motif) — no external/client-hosted image.
   ========================================================================== */

.error-404__content {
    max-width: 600px;
    margin: 0 auto;
}

.error-404__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    margin: 0 auto 34px;
    border-radius: 50%;
    background: var(--dst-steel);
    border: 1px solid var(--dst-concrete);
    box-shadow: var(--dst-shadow-medium);
    position: relative;
}

.error-404__icon i {
    font-size: 44px;
    color: var(--dst-white);
}

.error-404__icon::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    width: 46px;
    height: 4px;
    background: var(--dst-primary-red);
    clip-path: var(--dst-clip-subtle);
}

.error-404__lead {
    color: #aaa;
    margin-bottom: 30px;
}

.error-404__buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 50px;
}

.error-404__buttons .btn {
    width: 100%;
    justify-content: center;
}

.error-404__search {
    margin-top: 10px;
}

.error-404__search h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .error-404__icon {
        width: 140px;
        height: 140px;
        margin-bottom: 38px;
    }

    .error-404__icon i {
        font-size: 56px;
    }

    .error-404__buttons {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .error-404__buttons .btn {
        width: auto;
    }
}