/**
 * TransAX/DealSector Widget Override Styles
 *
 * This file overrides the default styling of TransAX/DealSector
 * dynamically injected widgets, forms, chat buttons, and modals.
 *
 * @package DS_Theme_Rugged_Dark
 */

/* ==========================================================================
   INVENTORY GRID OVERRIDES
   ========================================================================== */

.ds-inventory-grid,
.dealsector-inventory-grid,
.transax-inventory-grid,
[class*="ds-inventory"] {
    display: grid !important;
    gap: 24px !important;
}

/* grid-template-columns split out: .ds-inventory-grid/.dealsector-inventory-grid
   get theirs from the mobile-first tiers below (slice 21); the other two
   selectors were never touched by the old responsive override and keep a
   flat 3-column grid at every width. */
.transax-inventory-grid,
[class*="ds-inventory"] {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Mobile-first (slice 21). Legacy breakpoints here were max-width:992
   (1-vs-2-col) and max-width:576 (2-vs-1-col) — NEITHER aligns with the
   canonical min-width grid the way responsive.css's 991/1199 legacy
   breakpoints do:
   - max-width:576 (inclusive of 576) is complementary to min-width:577 —
     that one lines up with canonical and needed no adjustment.
   - max-width:992 (inclusive of 992) is NOT complementary to canonical
     min-width:992 — at exactly 992px the original showed 2 columns, but
     a naive min-width:992 tier would show 3. Using min-width:993 instead
     reproduces the original pixel-for-pixel; documented here and in
     docs/wiki/theme/frontend-conventions.md rather than silently rounded
     to the canonical breakpoint. */
.ds-inventory-grid,
.dealsector-inventory-grid {
    grid-template-columns: 1fr !important;
}

.transax-form,
.dealsector_form {
    padding: 20px !important;
}

@media (min-width: 577px) {
    .ds-inventory-grid,
    .dealsector-inventory-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .transax-form,
    .dealsector_form {
        padding: 30px !important;
    }
}

@media (min-width: 993px) {
    .ds-inventory-grid,
    .dealsector-inventory-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.ds-inventory-item,
.dealsector-item,
.transax-item,
[class*="ds-vehicle-card"] {
    background: var(--dst-steel) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--dst-concrete) !important;
    transition: var(--dst-transition) !important;
}

.ds-inventory-item:hover,
.dealsector-item:hover,
.transax-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--dst-shadow-heavy) !important;
    border-color: var(--dst-primary-red) !important;
}

/* ==========================================================================
   TRANSAX FORM STYLING
   ========================================================================== */

.transax-form,
.dealsector_form,
[class*="transax-form"],
[class*="ds-form"],
.dst-styled form {
    background: var(--dst-steel) !important;
    border-radius: 8px !important;
}

/* padding split out: .transax-form/.dealsector_form get their padding from
   the mobile-first tiers above (base 20px / min-width:577 30px, slice 21)
   since those two alone had a mobile override; the attribute-selector and
   .dst-styled variants were never touched by it and keep a flat 30px. */
[class*="transax-form"],
[class*="ds-form"],
.dst-styled form {
    padding: 30px !important;
}

.transax-form input[type="text"],
.transax-form input[type="email"],
.transax-form input[type="tel"],
.transax-form input[type="number"],
.transax-form select,
.transax-form textarea,
.dealsector_form input[type="text"],
.dealsector_form input[type="email"],
.dealsector_form input[type="tel"],
.dealsector_form input[type="number"],
.dealsector_form select,
.dealsector_form textarea,
[class*="ds-form"] input,
[class*="ds-form"] select,
[class*="ds-form"] textarea {
    background: var(--dst-charcoal) !important;
    border: 2px solid var(--dst-concrete) !important;
    color: var(--dst-white) !important;
    padding: 15px 20px !important;
    font-family: var(--dst-font-body) !important;
    font-size: 16px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    transition: var(--dst-transition) !important;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%) !important;
    border-radius: 0 !important;
}

.transax-form input:focus,
.transax-form select:focus,
.transax-form textarea:focus,
.dealsector_form input:focus,
.dealsector_form select:focus,
.dealsector_form textarea:focus,
[class*="ds-form"] input:focus,
[class*="ds-form"] select:focus,
[class*="ds-form"] textarea:focus {
    border-color: var(--dst-primary-red) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(196, 30, 47, 0.2) !important;
}

.transax-form input::placeholder,
.dealsector_form input::placeholder {
    color: #888 !important;
}

.transax-form label,
.dealsector_form label,
[class*="ds-form"] label {
    color: var(--dst-white) !important;
    font-family: var(--dst-font-heading) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* Form Buttons */
.transax-form button,
.transax-form input[type="submit"],
.dealsector_form button,
.dealsector_form input[type="submit"],
[class*="ds-form"] button,
[class*="ds-form"] input[type="submit"],
.transax-submit,
.ds-submit-btn {
    background: var(--dst-primary-red) !important;
    color: var(--dst-white) !important;
    font-family: var(--dst-font-heading) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    clip-path: var(--dst-clip-angle) !important;
    border: none !important;
    padding: 15px 30px !important;
    cursor: pointer !important;
    transition: var(--dst-transition) !important;
    border-radius: 0 !important;
}

.transax-form button:hover,
.transax-form input[type="submit"]:hover,
.dealsector_form button:hover,
.dealsector_form input[type="submit"]:hover {
    background: var(--dst-dark-red) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   TRANSAX CHAT WIDGET
   ========================================================================== */

.transax-chat-button,
.transax-chat-widget,
[class*="transax-chat"],
[class*="ds-chat"],
.chat-widget-button,
.live-chat-btn {
    background: var(--dst-primary-red) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%) !important;
    color: var(--dst-white) !important;
    font-family: var(--dst-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    box-shadow: var(--dst-shadow-medium) !important;
}

.transax-chat-button:hover,
[class*="transax-chat"]:hover,
[class*="ds-chat"]:hover {
    background: var(--dst-dark-red) !important;
    transform: scale(1.05) !important;
}

/* Chat Widget Icon */
.transax-chat-button i,
.transax-chat-button svg,
[class*="ds-chat"] i,
[class*="ds-chat"] svg {
    color: var(--dst-white) !important;
    fill: var(--dst-white) !important;
}

/* ==========================================================================
   TRANSAX POPUP/MODAL DIALOGS
   ========================================================================== */

.transax-modal,
.transax-popup,
.transax-dialog,
[class*="ds-modal"],
[class*="ds-popup"],
.ds-overlay-content,
.transax-overlay {
    background: var(--dst-charcoal) !important;
    border: 2px solid var(--dst-primary-red) !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.transax-modal .modal-header,
.transax-popup .popup-header,
[class*="ds-modal"] .modal-header,
[class*="ds-popup"] .popup-header,
.ds-overlay-header {
    background: var(--dst-steel) !important;
    border-bottom: 3px solid var(--dst-primary-red) !important;
    font-family: var(--dst-font-heading) !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--dst-white) !important;
    padding: 20px 25px !important;
}

.transax-modal .modal-body,
.transax-popup .popup-body,
[class*="ds-modal"] .modal-body,
[class*="ds-popup"] .popup-body {
    padding: 25px !important;
    color: var(--dst-white) !important;
}

.transax-modal .modal-footer,
.transax-popup .popup-footer,
[class*="ds-modal"] .modal-footer,
[class*="ds-popup"] .popup-footer {
    background: var(--dst-steel) !important;
    border-top: 1px solid var(--dst-concrete) !important;
    padding: 20px 25px !important;
}

/* Modal Close Button */
.transax-modal .close,
.transax-popup .close,
[class*="ds-modal"] .close,
.modal-close,
.popup-close {
    color: var(--dst-white) !important;
    opacity: 0.7 !important;
    font-size: 28px !important;
    transition: var(--dst-transition) !important;
}

.transax-modal .close:hover,
.transax-popup .close:hover {
    color: var(--dst-primary-red) !important;
    opacity: 1 !important;
}

/* Modal Overlay */
.transax-overlay-bg,
.ds-overlay-bg,
.modal-backdrop,
[class*="ds-backdrop"] {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ==========================================================================
   PAY AS LOW AS / FINANCING CALCULATOR BUTTONS
   ========================================================================== */

.pay-as-low-as,
.financing-calc-btn,
[class*="financing-calc"],
[class*="payment-calc"],
.ds-payment-button,
.transax-payment-btn,
.calculate-payment {
    background: var(--dst-gold) !important;
    color: var(--dst-charcoal) !important;
    font-family: var(--dst-font-heading) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    clip-path: var(--dst-clip-angle) !important;
    padding: 12px 25px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: var(--dst-transition) !important;
}

.pay-as-low-as:hover,
[class*="financing-calc"]:hover,
[class*="payment-calc"]:hover {
    background: #c49a3f !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   TRANSAX FILTER CONTROLS
   ========================================================================== */

.transax-filters,
.ds-filters,
[class*="ds-filter"],
.inventory-filters {
    background: var(--dst-steel) !important;
    padding: 25px !important;
    border-radius: 8px !important;
    margin-bottom: 30px !important;
}

.transax-filters select,
.ds-filter-dropdown,
[class*="ds-filter"] select,
.filter-select {
    background: var(--dst-charcoal) !important;
    border: 2px solid var(--dst-concrete) !important;
    color: var(--dst-white) !important;
    padding: 12px 20px !important;
    font-family: var(--dst-font-body) !important;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%) !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c41e2f' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 20px !important;
    padding-right: 45px !important;
}

.transax-filters select:focus,
[class*="ds-filter"] select:focus {
    border-color: var(--dst-primary-red) !important;
    outline: none !important;
}

/* Filter Labels */
.transax-filters label,
.ds-filters label,
[class*="ds-filter"] label {
    color: var(--dst-white) !important;
    font-family: var(--dst-font-heading) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Range Sliders */
.transax-range-slider,
[class*="ds-range"],
.filter-range {
    accent-color: var(--dst-primary-red) !important;
}

/* Checkboxes */
.transax-filters input[type="checkbox"],
[class*="ds-filter"] input[type="checkbox"] {
    accent-color: var(--dst-primary-red) !important;
    width: 18px !important;
    height: 18px !important;
}

/* ==========================================================================
   TRANSAX PRICE DISPLAY
   ========================================================================== */

.ds-price,
.transax-price,
[class*="ds-price"],
.vehicle-price {
    color: var(--dst-primary-red) !important;
    font-family: var(--dst-font-heading) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

.ds-price-original,
.transax-price-original,
.price-was {
    color: #888 !important;
    text-decoration: line-through !important;
    font-size: 16px !important;
}

.ds-price-savings,
.savings-badge {
    background: var(--dst-primary-red) !important;
    color: var(--dst-white) !important;
    padding: 5px 12px !important;
    font-family: var(--dst-font-heading) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   TRANSAX DETAIL PAGE OVERRIDES
   ========================================================================== */

.dealsector-detail .ds-gallery,
.dealsector-detail [class*="ds-gallery"],
.dst-inventory-detail .vehicle-gallery {
    background: var(--dst-charcoal) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--dst-concrete) !important;
}

.dealsector-detail .ds-specs-table,
.dealsector-detail [class*="ds-specs"],
.dst-inventory-detail .specs-table {
    background: var(--dst-steel) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.dealsector-detail .ds-specs-table td,
.dealsector-detail .ds-specs-table th,
[class*="ds-specs"] td,
[class*="ds-specs"] th {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--dst-concrete) !important;
    color: var(--dst-white) !important;
}

.dealsector-detail .ds-specs-table tr:last-child td {
    border-bottom: none !important;
}

.dealsector-detail .ds-specs-table th,
[class*="ds-specs"] th {
    background: var(--dst-charcoal) !important;
    font-family: var(--dst-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* ==========================================================================
   TRANSAX STATUS BADGES
   ========================================================================== */

.ds-status-badge,
.transax-badge,
[class*="ds-badge"],
.vehicle-status {
    font-family: var(--dst-font-heading) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 6px 14px !important;
    border-radius: 0 !important;
}

.ds-status-available,
.badge-available {
    background: #4caf50 !important;
    color: var(--dst-white) !important;
}

.ds-status-pending,
.badge-pending {
    background: #ff9800 !important;
    color: var(--dst-charcoal) !important;
}

.ds-status-sold,
.badge-sold {
    background: var(--dst-primary-red) !important;
    color: var(--dst-white) !important;
}

/* ==========================================================================
   TRANSAX TABS
   ========================================================================== */

.ds-tabs,
.transax-tabs,
[class*="ds-tab"] {
    border-bottom: 2px solid var(--dst-concrete) !important;
}

.ds-tabs .tab,
.transax-tabs .tab,
[class*="ds-tab-item"] {
    background: transparent !important;
    color: #888 !important;
    font-family: var(--dst-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px 25px !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    cursor: pointer !important;
    transition: var(--dst-transition) !important;
}

.ds-tabs .tab.active,
.ds-tabs .tab:hover,
.transax-tabs .tab.active,
.transax-tabs .tab:hover {
    color: var(--dst-primary-red) !important;
    border-bottom-color: var(--dst-primary-red) !important;
}

/* ==========================================================================
   TRANSAX CONTACT BUTTONS
   ========================================================================== */

.ds-contact-btn,
.transax-contact-btn,
[class*="ds-cta"],
.confirm-availability,
.request-info {
    background: var(--dst-primary-red) !important;
    color: var(--dst-white) !important;
    font-family: var(--dst-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    clip-path: var(--dst-clip-angle) !important;
    padding: 15px 30px !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--dst-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ds-contact-btn:hover,
.transax-contact-btn:hover,
[class*="ds-cta"]:hover {
    background: var(--dst-dark-red) !important;
    transform: translateY(-2px) !important;
}

/* Secondary Contact Button */
.ds-contact-btn-secondary,
.transax-contact-secondary {
    background: transparent !important;
    border: 2px solid var(--dst-white) !important;
    color: var(--dst-white) !important;
}

.ds-contact-btn-secondary:hover {
    background: var(--dst-white) !important;
    color: var(--dst-charcoal) !important;
}

/* ==========================================================================
   TRANSAX LOADING STATES
   ========================================================================== */

.ds-loading,
.transax-loading,
[class*="ds-spinner"] {
    border-color: var(--dst-steel) !important;
    border-top-color: var(--dst-primary-red) !important;
}

/* ==========================================================================
   DST-STYLED CLASS (Applied via JavaScript Observer)
   ========================================================================== */

.dst-styled {
    /* This class is added dynamically to TransAX elements */
    /* Ensures our styles take effect even on late-loading widgets */
}

.dst-styled button:not([class*="close"]) {
    font-family: var(--dst-font-heading) !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   RESPONSIVE OVERRIDES — converted to mobile-first (slice 21); see the
   base + min-width:577/993 rules near the top of this file
   (INVENTORY GRID OVERRIDES / TRANSAX FORM STYLING sections). This section
   intentionally left empty rather than deleted, so a future max-width
   addition here doesn't slip in unnoticed without re-reading that note.
   ========================================================================== */

/* ==========================================================================
   INVENTORY VIEW TOGGLE (Row / Grid)
   Mobile-first: filter button visible by default, hidden on desktop.
   ========================================================================== */

.dst-view-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 0;
    border-bottom: 2px solid var(--dst-concrete, #3a3a3a);
}

.dst-view-label {
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-right: 4px;
}

.dst-view-btn {
    background: var(--dst-steel, #2d2d2d);
    border: 2px solid var(--dst-concrete, #3a3a3a);
    color: #888;
    width: 44px;  /* 44px min touch target */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.dst-view-btn:hover {
    color: var(--dst-white, #fff);
    border-color: var(--dst-primary-red, #c41e2f);
}

.dst-view-btn.active {
    background: var(--dst-primary-red, #c41e2f);
    border-color: var(--dst-primary-red, #c41e2f);
    color: var(--dst-white, #fff);
}

/* Mobile-first: filter button shown by default */
.dst-mobile-filter-btn {
    margin-left: auto;
    background: var(--dst-steel, #2d2d2d);
    border: 2px solid var(--dst-concrete, #3a3a3a);
    color: var(--dst-white, #fff);
    padding: 10px 16px;
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px; /* touch target */
}

/* Desktop: hide mobile filter button (sidebar is visible) */
@media (min-width: 992px) {
    .dst-mobile-filter-btn {
        display: none;
    }
    .dst-view-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ==========================================================================
   DUAL VIEW: ROW vs GRID
   Mobile-first: single column base, expand on larger screens.
   Default = row view. .dst-grid-active = card/grid view. (Runtime class,
   toggled by inc/shortcodes.php JS — not DB-stored markup, no legacy
   .k4-grid-active needed; see ADR-0003.)
   ========================================================================== */

/* Default: show row, hide card */
.ds-item-row { display: block; }
.ds-item-card { display: none; }

/* Grid active: hide row, show card */
.dst-grid-active .ds-item-row { display: none; }
.dst-grid-active .ds-item-card { display: block; }

/* Mobile-first grid: single column by default.
   gap needs !important here: #dealsector_showresults is also matched by
   .inventory_wrapper > div:first-child (components.css, row-view flex
   reset) which sets "gap: 0 !important". Without !important on these
   grid-mode values too, that row-view reset silently wins regardless of
   specificity (an !important declaration always beats a non-!important
   one), leaving grid view with 0 gap between cards — this was the actual
   cause of "no spacing between cards" in grid view (slice 15). */
.dst-grid-active #dealsector_showresults {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px !important;
}

/* Tablet: 2 columns */
@media (min-width: 577px) {
    .dst-grid-active #dealsector_showresults {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px !important;
    }
}

/* Desktop: 3 columns */
@media (min-width: 993px) {
    .dst-grid-active #dealsector_showresults {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px !important;
    }
}

/* ==========================================================================
   INVENTORY CARD STYLES (Grid View)
   TEMPORARY dual .dst-*/.k4-* selectors (ADR-0003) — this is the LIVE
   styling for the current inc/dealsector-templates.php card markup; drop
   the .k4-* half once Recreate Templates regenerates DB pages.
   ========================================================================== */

.dst-inventory-card,
.k4-inventory-card {
    background: var(--dst-steel, #2d2d2d);
    border: 1px solid var(--dst-concrete, #3a3a3a);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dst-inventory-card:hover,
.k4-inventory-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    border-color: var(--dst-primary-red, #c41e2f);
}

.dst-card-image-link,
.k4-card-image-link {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--dst-charcoal, #1a1a1a);
}

.dst-card-image-link img,
.k4-card-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dst-inventory-card:hover .dst-card-image-link img,
.k4-inventory-card:hover .k4-card-image-link img {
    transform: scale(1.05);
}

.dst-card-image-link .image_overlay,
.k4-card-image-link .image_overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--dst-primary-red, #c41e2f);
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    text-transform: uppercase;
}

.dst-card-body,
.k4-card-body {
    padding: 16px;
}

.dst-card-title,
.k4-card-title {
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.dst-card-title a,
.k4-card-title a {
    color: var(--dst-white, #fff);
    text-decoration: none;
}

.dst-card-title a:hover,
.k4-card-title a:hover {
    color: var(--dst-primary-red, #c41e2f);
}

.dst-card-stock,
.k4-card-stock {
    font-size: 12px;
    color: #888;
    margin: 0 0 10px 0;
}

.dst-card-pricing,
.k4-card-pricing {
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid var(--dst-primary-red, #c41e2f);
}

.dst-card-price-main,
.k4-card-price-main {
    font-size: 14px;
    color: var(--dst-white, #fff);
}

.dst-card-price-main label,
.k4-card-price-main label {
    display: inline;
    font-size: 14px;
}

.dst-card-price-sale,
.k4-card-price-sale {
    font-size: 18px;
    font-weight: 700;
    color: var(--dst-primary-red, #c41e2f);
    font-family: var(--dst-font-heading, Oswald, sans-serif);
}

.dst-card-price-sale:empty,
.k4-card-price-sale:empty,
.dst-card-price-msrp:empty,
.k4-card-price-msrp:empty {
    display: none;
}

.dst-card-price-msrp,
.k4-card-price-msrp {
    font-size: 12px;
    color: #888;
}

.dst-card-price-msrp .line_through,
.k4-card-price-msrp .line_through {
    text-decoration: line-through;
}

.dst-card-actions,
.k4-card-actions {
    display: flex;
    gap: 8px;
}

.dst-card-actions .dst-btn,
.k4-card-actions .k4-btn {
    flex: 1;
    text-align: center;
    padding: 12px 14px; /* larger touch target on mobile */
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    min-height: 44px; /* touch target */
}

@media (min-width: 993px) {
    .dst-card-actions .dst-btn,
    .k4-card-actions .k4-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-height: auto;
    }
}

.dst-card-actions .dst-btn-primary,
.k4-card-actions .k4-btn-primary {
    background: var(--dst-primary-red, #c41e2f);
    color: #fff;
    border: none;
}

.dst-card-actions .dst-btn-primary:hover,
.k4-card-actions .k4-btn-primary:hover {
    background: var(--dst-dark-red, #a01525);
}

.dst-card-actions .dst-btn-secondary,
.k4-card-actions .k4-btn-secondary {
    background: transparent;
    color: var(--dst-white, #fff);
    border: 1px solid var(--dst-concrete, #3a3a3a);
}

.dst-card-actions .dst-btn-secondary:hover,
.k4-card-actions .k4-btn-secondary:hover {
    border-color: var(--dst-primary-red, #c41e2f);
    color: var(--dst-primary-red, #c41e2f);
}

/* ==========================================================================
   ROW VIEW LISTING STYLES (DealSector Template)
   ========================================================================== */

/* Slice 15: row-view breathing room between listings. #dealsector_showresults
   (the flex column that stacks .ds-item-row items) is forced to
   "gap: 0 !important" by .inventory_wrapper > div:first-child in
   components.css, so the .ds-separator's own margin never produced visible
   space between rows. margin-bottom on the row itself is unaffected by that
   flex "gap" reset (gap and item margins are independent), so it reliably
   opens up space without touching the reset rule. Mirrors the grid-view gap
   breakpoints/values above for a consistent rhythm between the two views. */
.ds-item-row {
    margin-bottom: 16px;
}

@media (min-width: 577px) {
    .ds-item-row {
        margin-bottom: 20px;
    }
}

@media (min-width: 993px) {
    .ds-item-row {
        margin-bottom: 24px;
    }
}

.ds-separator {
    border-color: var(--dst-concrete, #3a3a3a);
    margin: 15px 0;
}

.ds-title-row {
    margin-bottom: 0;
}

.ds-item-title {
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    font-size: 20px;
    color: var(--dst-white, #fff);
    text-decoration: none;
    text-transform: uppercase;
}

.ds-item-title:hover {
    color: var(--dst-primary-red, #c41e2f);
}

.ds-subtitle {
    font-size: 14px;
    color: #aaa;
}

.ds-our-price {
    font-size: 18px;
    color: var(--dst-white, #fff);
}

.ds-our-price label {
    font-size: 18px;
    display: inline;
}

.ds-msrp {
    color: #888;
    font-size: 14px;
}

.ds-msrp .line_through {
    text-decoration: line-through;
}

.dssalePrice {
    color: var(--dst-primary-red, #c41e2f);
    font-weight: 700;
    font-size: 22px;
    font-family: var(--dst-font-heading, Oswald, sans-serif);
}

.dssalePrice label.dssalePrice {
    font-size: 14px;
    font-weight: 400;
    display: inline;
}

.ds-content-row {
    margin-top: 10px;
}

.img-overlay-container {
    position: relative;
    overflow: hidden;
}

.img-overlay-container .image_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(196, 30, 47, 0.9);
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.img-overlay-container:hover .image_overlay {
    transform: translateY(0);
}

.photo-of-gallery-x {
    width: 100%;
    height: auto;
    display: block;
}

.brand_logo_max_width {
    max-width: 120px;
    height: auto;
    margin-bottom: 10px;
}

.ds-stock-number {
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    font-size: 14px;
    margin: 10px 0;
}

.ds-stock-number a {
    color: var(--dst-white, #fff);
    text-decoration: none;
}

.ds-stock-number a:hover {
    color: var(--dst-primary-red, #c41e2f);
}

/* Mobile actions (slice 22) — restyled to the desktop button treatment
   (components.css ".inventory_wrapper .wp-block-button .wp-block-button__link":
   steel fill, uppercase Oswald label, trapezoid clip-path, steel-lighten
   hover). Mobile has no Gallery-equivalent action (markup is CALL/DETAILS/
   FINANCING only — see inc/dealsector-templates.php), so all three buttons
   take the desktop STEEL treatment; none gets the desktop red accent since
   there is no mobile button standing in for the Gallery action. Icons are
   already in the markup (matching FA classes to their desktop counterparts:
   fa-phone/fa-cogs/fa-check-square) so no ::before icon injection needed.
   Layout stays full-width stacked (mobile-appropriate); only color/border/
   typography/icon-gap/clip-path are brought to parity with desktop.

   Selector coverage (both markup generations, slice-21 OR'd fallback
   pattern): the slice-21 ID→class rename only touched the ANCESTOR toggle
   div (id="content-mobile" vs class="k4-vis-mobile" — see the .k4-vis-*
   rules below and in components.css). This component's own classes
   (.ds-mobile-actions/.ds-mobile-btn) never changed, so the bare class
   selectors already match under either generation; the #content-mobile-
   scoped selectors are kept anyway, explicit and OR'd, for grep-ability and
   consistency with that pattern (same "redundant but explicit" precedent as
   components.css's .wp-block-buttons rule above). Drop the #content-mobile
   variants alongside the other #content-mobile fallbacks once Recreate
   Templates is confirmed run (see dealsector-templates wiki). */
.ds-mobile-actions,
#content-mobile.ds-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.ds-mobile-actions .ds-mobile-btn,
#content-mobile.ds-mobile-actions .ds-mobile-btn,
.ds-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 15px; /* desktop uses 10px 15px; kept taller for touch */
    background: var(--dst-steel, #2d2d2d);
    color: var(--dst-white, #fff);
    text-decoration: none;
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    font-size: 13px; /* matches desktop .wp-block-button__link */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 10px) 100%, 0 100%);
    transition: var(--dst-transition, all 0.3s ease);
    cursor: pointer;
    min-height: 48px; /* touch target, exceeds 44px minimum */
    box-sizing: border-box;
}

.ds-mobile-actions .ds-mobile-btn:hover,
#content-mobile.ds-mobile-actions .ds-mobile-btn:hover,
.ds-mobile-btn:hover {
    background: var(--dst-concrete, #3a3a3a);
    color: var(--dst-white, #fff);
}

/* Desktop action buttons */
.ds-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ds-action-buttons .wp-block-button .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--dst-primary-red, #c41e2f);
    color: #fff;
    text-decoration: none;
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
    width: 100%;
    cursor: pointer;
}

.ds-action-buttons .wp-block-button .wp-block-button__link:hover {
    background: var(--dst-dark-red, #a01525);
}

.ds-btn-gallery .wp-block-button__link {
    background: var(--dst-gold, #d4a84b) !important;
    color: var(--dst-charcoal, #1a1a1a) !important;
}

.ds-btn-gallery .wp-block-button__link:hover {
    background: #c49a3f !important;
}

/* Quote bar */
.ds-quote-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dst-steel, #2d2d2d);
    border: 1px solid var(--dst-concrete, #3a3a3a);
    padding: 12px 20px;
    margin-top: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.ds-quote-text {
    font-size: 14px;
    color: #ccc;
}

.ds-quote-call {
    color: var(--dst-primary-red, #c41e2f);
    text-decoration: none;
}

.ds-quote-btn {
    background: var(--dst-primary-red, #c41e2f);
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    font-family: var(--dst-font-heading, Oswald, sans-serif);
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ds-quote-btn:hover {
    background: var(--dst-dark-red, #a01525);
    color: #fff;
}

/* Mobile-first visibility helpers for DealSector templates (slice 21:
   renamed from #content-mobile/#content-desktop IDs to classes — see
   components.css's ".inventory_wrapper .dst-vis-*/.k4-vis-*" rules, which
   are the ones actually in effect wherever ".inventory_wrapper" wraps the
   markup (their extra ancestor class makes them more specific than these
   bare rules). Kept here, renamed for consistency, as a fallback for any
   .dst-vis-mobile/.dst-vis-desktop (or legacy .k4-vis-mobile/.k4-vis-desktop
   — ADR-0003 TEMPORARY dual selector, DB markup not yet regenerated)
   element rendered outside .inventory_wrapper. */
/* Mobile: show mobile content, hide desktop content */
.dst-vis-mobile,
.k4-vis-mobile { display: block; }
.dst-vis-desktop,
.k4-vis-desktop { display: none; }

/* Mobile: quote bar stacked */
.ds-quote-bar {
    flex-direction: column;
    text-align: center;
}

/* Desktop: flip visibility */
@media (min-width: 992px) {
    .dst-vis-mobile,
    .k4-vis-mobile { display: none; }
    .dst-vis-desktop,
    .k4-vis-desktop { display: block; }

    .ds-quote-bar {
        flex-direction: row;
        text-align: left;
    }
}

/* Center the LOAD MORE label inside the full-width trapezoid button
   (wrapper is text-center, but the stretched .load_more button kept its
   label left-aligned). Master, 2026-08-07. */
.inventory_wrapper .loadMore_Wrapper .load_more,
.loadMore_Wrapper .btn.load_more {
    text-align: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   ITEM VIDEO STYLING (PRD-0002 story 5, slice 19)

   DealSector renders any media record with fileType:"video" as a bare
   <video controls><source></video> in the exact same slot as a sibling
   <img class="photo-of-gallery-x">, but ships zero video-specific CSS —
   so the listing template's hardcoded width="400" height="300" attrs (and
   the detail template's unset ones) leak through unstyled. Verified live
   on k426-test.local (2026-08-07):

     - Row-view listing card: $$itemImageSlider$$ lands inside
       .img-overlay-container (dealsector-templates.php line ~207). Sibling
       <img> sizing comes from components.css' own
       ".inventory_wrapper .img-overlay-container img" rule: 100% wide,
       height:auto capped at max-height:250px, object-fit:cover — the
       container's overflow:hidden crops it, so no letterbox needed.
     - Detail page main gallery: $$itemImageSlider$$ (full carousel) lands
       inside .dst-gallery-main (or legacy .k4-gallery-main — ADR-0003) >
       ... > #viewdetailresult
       .invUnitCarouseltest (LightSlider). Sibling <img> sizing comes from
       the PLUGIN's own dealsector.css: "#viewdetailresult
       .photo-of-gallery-x" is a fixed height:500px, object-fit:contain,
       with the plugin's own gray (rgb(183,183,183)) letterbox — no
       breakpoint overrides it (checked dealsector.css's mobile media
       queries; the relevant rules are commented out), so no min-width
       variant is needed here either.

   Grid-view cards (.dst-inventory-card/.k4-inventory-card, the alternate
   view toggled via .dst-grid-active) always render $$itemMainImage$$ — a plain pre-sized
   image URL token, never $$itemImageSlider$$ — so a video can never land
   there; no rule needed.
   ========================================================================== */

/* Row-view listing card video — mirror the sibling <img> box exactly */
.inventory_wrapper .img-overlay-container video {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: cover !important;
    display: block !important;
    background: var(--dst-charcoal, #1a1a1a) !important;
}

/* Detail page main gallery slider video — mirror the plugin's own
   #viewdetailresult .photo-of-gallery-x box, charcoal letterbox instead
   of the plugin's default gray (contain needs a fill color since the
   video's aspect ratio rarely matches the fixed 500px slide height). */
#viewdetailresult .invUnitCarouseltest video {
    width: 100% !important;
    height: 500px !important;
    object-fit: contain !important;
    display: block !important;
    background: var(--dst-charcoal, #1a1a1a) !important;
}

/* Tint the native control bar so it reads as themed against the charcoal
   letterbox rather than the browser-default light gray. Webkit-only
   (Chrome/Safari/Edge) — full native <video> control skinning is out of
   scope without a custom JS player; Firefox falls back to its own skin. */
.inventory_wrapper .img-overlay-container video::-webkit-media-controls-panel,
#viewdetailresult .invUnitCarouseltest video::-webkit-media-controls-panel {
    background-color: rgba(26, 26, 26, 0.75);
}