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

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

.ds-inventory-grid,
.dealsector-inventory-grid,
.transax-inventory-grid,
[class*="ds-inventory"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

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

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

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

.transax-form,
.dealsector_form,
[class*="transax-form"],
[class*="ds-form"],
.k4-styled form {
    background: var(--k4-steel) !important;
    padding: 30px !important;
    border-radius: 8px !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(--k4-charcoal) !important;
    border: 2px solid var(--k4-concrete) !important;
    color: var(--k4-white) !important;
    padding: 15px 20px !important;
    font-family: var(--k4-font-body) !important;
    font-size: 16px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    transition: var(--k4-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(--k4-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(--k4-white) !important;
    font-family: var(--k4-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(--k4-primary-red) !important;
    color: var(--k4-white) !important;
    font-family: var(--k4-font-heading) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    clip-path: var(--k4-clip-angle) !important;
    border: none !important;
    padding: 15px 30px !important;
    cursor: pointer !important;
    transition: var(--k4-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(--k4-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(--k4-primary-red) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%) !important;
    color: var(--k4-white) !important;
    font-family: var(--k4-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    box-shadow: var(--k4-shadow-medium) !important;
}

.transax-chat-button:hover,
[class*="transax-chat"]:hover,
[class*="ds-chat"]:hover {
    background: var(--k4-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(--k4-white) !important;
    fill: var(--k4-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(--k4-charcoal) !important;
    border: 2px solid var(--k4-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(--k4-steel) !important;
    border-bottom: 3px solid var(--k4-primary-red) !important;
    font-family: var(--k4-font-heading) !important;
    font-size: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--k4-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(--k4-white) !important;
}

.transax-modal .modal-footer,
.transax-popup .popup-footer,
[class*="ds-modal"] .modal-footer,
[class*="ds-popup"] .popup-footer {
    background: var(--k4-steel) !important;
    border-top: 1px solid var(--k4-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(--k4-white) !important;
    opacity: 0.7 !important;
    font-size: 28px !important;
    transition: var(--k4-transition) !important;
}

.transax-modal .close:hover,
.transax-popup .close:hover {
    color: var(--k4-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(--k4-gold) !important;
    color: var(--k4-charcoal) !important;
    font-family: var(--k4-font-heading) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    clip-path: var(--k4-clip-angle) !important;
    padding: 12px 25px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: var(--k4-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(--k4-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(--k4-charcoal) !important;
    border: 2px solid var(--k4-concrete) !important;
    color: var(--k4-white) !important;
    padding: 12px 20px !important;
    font-family: var(--k4-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(--k4-primary-red) !important;
    outline: none !important;
}

/* Filter Labels */
.transax-filters label,
.ds-filters label,
[class*="ds-filter"] label {
    color: var(--k4-white) !important;
    font-family: var(--k4-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(--k4-primary-red) !important;
}

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

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

.ds-price,
.transax-price,
[class*="ds-price"],
.vehicle-price {
    color: var(--k4-primary-red) !important;
    font-family: var(--k4-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(--k4-primary-red) !important;
    color: var(--k4-white) !important;
    padding: 5px 12px !important;
    font-family: var(--k4-font-heading) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}

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

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

.dealsector-detail .ds-specs-table,
.dealsector-detail [class*="ds-specs"],
.k4-inventory-detail .specs-table {
    background: var(--k4-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(--k4-concrete) !important;
    color: var(--k4-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(--k4-charcoal) !important;
    font-family: var(--k4-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(--k4-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(--k4-white) !important;
}

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

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

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

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

.ds-tabs .tab,
.transax-tabs .tab,
[class*="ds-tab-item"] {
    background: transparent !important;
    color: #888 !important;
    font-family: var(--k4-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(--k4-transition) !important;
}

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

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

.ds-contact-btn,
.transax-contact-btn,
[class*="ds-cta"],
.confirm-availability,
.request-info {
    background: var(--k4-primary-red) !important;
    color: var(--k4-white) !important;
    font-family: var(--k4-font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    clip-path: var(--k4-clip-angle) !important;
    padding: 15px 30px !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--k4-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(--k4-dark-red) !important;
    transform: translateY(-2px) !important;
}

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

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

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

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

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

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

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

/* ==========================================================================
   RESPONSIVE OVERRIDES
   ========================================================================== */

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

@media (max-width: 576px) {
    .ds-inventory-grid,
    .dealsector-inventory-grid {
        grid-template-columns: 1fr !important;
    }

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

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

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

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

.k4-view-btn {
    background: var(--k4-steel, #2d2d2d);
    border: 2px solid var(--k4-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;
}

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

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

/* Mobile-first: filter button shown by default */
.k4-mobile-filter-btn {
    margin-left: auto;
    background: var(--k4-steel, #2d2d2d);
    border: 2px solid var(--k4-concrete, #3a3a3a);
    color: var(--k4-white, #fff);
    padding: 10px 16px;
    font-family: var(--k4-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) {
    .k4-mobile-filter-btn {
        display: none;
    }
    .k4-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. .k4-grid-active = card/grid view.
   ========================================================================== */

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

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

/* Mobile-first grid: single column by default */
.k4-grid-active #dealsector_showresults {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
}

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

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

/* ==========================================================================
   INVENTORY CARD STYLES (Grid View)
   ========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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(--k4-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) {
    .k4-card-actions .k4-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-height: auto;
    }
}

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

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

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

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

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

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

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

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

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

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

.ds-our-price {
    font-size: 18px;
    color: var(--k4-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(--k4-primary-red, #c41e2f);
    font-weight: 700;
    font-size: 22px;
    font-family: var(--k4-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(--k4-font-heading, Oswald, sans-serif);
    font-size: 14px;
    margin: 10px 0;
}

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

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

/* Mobile actions */
.ds-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.ds-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px; /* generous touch targets */
    background: var(--k4-primary-red, #c41e2f);
    color: #fff;
    text-decoration: none;
    font-family: var(--k4-font-heading, Oswald, sans-serif);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height: 48px; /* touch target */
}

.ds-mobile-btn:hover {
    background: var(--k4-dark-red, #a01525);
    color: #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(--k4-primary-red, #c41e2f);
    color: #fff;
    text-decoration: none;
    font-family: var(--k4-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(--k4-dark-red, #a01525);
}

.ds-btn-gallery .wp-block-button__link {
    background: var(--k4-gold, #d4a84b) !important;
    color: var(--k4-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(--k4-steel, #2d2d2d);
    border: 1px solid var(--k4-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(--k4-primary-red, #c41e2f);
    text-decoration: none;
}

.ds-quote-btn {
    background: var(--k4-primary-red, #c41e2f);
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    font-family: var(--k4-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(--k4-dark-red, #a01525);
    color: #fff;
}

/* Mobile-first visibility helpers for DealSector templates */
/* Mobile: show mobile content, hide desktop content */
#content-mobile { display: block; }
#content-desktop { display: none; }

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

/* Desktop: flip visibility */
@media (min-width: 992px) {
    #content-mobile { display: none; }
    #content-desktop { display: block; }

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