/* ==========================================================================
   TSS LUXURY SUITE - SEARCH & AUTOCOMPLETE STYLESHEET
   The Shakir Stops: Outfit Typography + Luxury Natural Palette Design System
   Matches Header Search Autocomplete Dropdown & Results Page perfectly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL SEARCH INPUT & ICON (Header Bar Integration)
   Fixes icon overlap bug: provides proper 46px left padding for the search icon.
   -------------------------------------------------------------------------- */
.dgwt-wcas-search-wrapp,
.dgwt-wcas-sf-wrapp {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
input[type="search"].dgwt-wcas-search-input {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #171717 !important;
    letter-spacing: 0.2px !important;
    border-radius: 6px !important;
    border: 1px solid #E5E7EB !important;
    background: #FBF9F7 !important;
    padding-left: 46px !important; /* Guaranteed clearance for the magnifying glass icon */
    padding-right: 18px !important;
    height: 42px !important;
    line-height: normal !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus,
input[type="search"].dgwt-wcas-search-input:focus {
    background: #FFFFFF !important;
    border-color: #171717 !important;
    box-shadow: 0 0 0 1px #171717 !important;
    outline: none !important;
}

.dgwt-wcas-search-input::placeholder {
    color: #8C857B !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   2. SINGLE-COLUMN LUXURY DROPDOWN (No clunky side preview box)
   Clean, modern, high-fashion layout like Zara / Massimo Dutti / The Shakir Stops.
   -------------------------------------------------------------------------- */
/* Hide the bulky details preview box completely */
.dgwt-wcas-details-wrapp,
body.dgwt-wcas-details-left .dgwt-wcas-details-wrapp,
body.dgwt-wcas-details-right .dgwt-wcas-details-wrapp {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Main Suggestions Dropdown Container */
.dgwt-wcas-suggestions-wrapp,
body.dgwt-wcas-details-left .dgwt-wcas-suggestions-wrapp,
body.dgwt-wcas-details-right .dgwt-wcas-suggestions-wrapp {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: #FFFFFF !important;
    border: 1px solid #E8E5DF !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 45px -8px rgba(15, 13, 26, 0.14), 0 4px 14px rgba(15, 13, 26, 0.04) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: min(72vh, 520px) !important;
    margin-top: 8px !important;
    padding: 0 !important;
    min-width: 380px !important;
    max-width: 480px !important;
    width: 100% !important;
    z-index: 999999 !important;
}

/* Custom Slim Luxury Scrollbar */
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar {
    width: 5px !important;
}
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-track {
    background: #FAF8F5 !important;
}
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb {
    background: #D4D4D4 !important;
    border-radius: 4px !important;
}
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb:hover {
    background: #A3A3A3 !important;
}

.dgwt-wcas-suggestions-wrapp * {
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* --------------------------------------------------------------------------
   3. SECTION HEADLINES (e.g., "CATEGORIES", "PRODUCTS")
   -------------------------------------------------------------------------- */
.dgwt-wcas-suggestion-headline {
    background: #FAF8F5 !important;
    color: #737373 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid #F0ECE4 !important;
    border-top: 1px solid #F0ECE4 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion-headline:first-child {
    border-top: none !important;
}

/* --------------------------------------------------------------------------
   4. SUGGESTION ROW (INDIVIDUAL ITEMS)
   -------------------------------------------------------------------------- */
.dgwt-wcas-suggestion {
    padding: 10px 16px !important;
    border-bottom: 1px solid #F5F4F0 !important;
    transition: background-color 0.16s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 64px !important;
}

.dgwt-wcas-suggestion:last-child {
    border-bottom: none !important;
}

.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion-selected {
    background-color: #FAF8F5 !important;
}

/* Category Suggestions */
.dgwt-wcas-suggestion-cat {
    min-height: 40px !important;
    padding: 8px 16px !important;
}

.dgwt-wcas-suggestion-cat .dgwt-wcas-st {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #262626 !important;
}

.dgwt-wcas-suggestion-cat:hover .dgwt-wcas-st,
.dgwt-wcas-suggestion-cat.dgwt-wcas-suggestion-selected .dgwt-wcas-st {
    color: #0A0A0A !important;
}

.dgwt-wcas-suggestion-cat .dgwt-wcas-st-count {
    color: #8C857B !important;
    font-size: 11.5px !important;
    margin-left: 6px !important;
}

/* --------------------------------------------------------------------------
   5. PRODUCT THUMBNAIL (Apparel Vertical Portrait 3:4 Ratio)
   -------------------------------------------------------------------------- */
.dgwt-wcas-si {
    width: 44px !important;
    height: 58px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #F7F6F2 !important;
    border: 1px solid #ECEAE4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.dgwt-wcas-si img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: block !important;
    transition: transform 0.25s ease !important;
}

.dgwt-wcas-suggestion:hover .dgwt-wcas-si img,
.dgwt-wcas-suggestion-selected .dgwt-wcas-si img {
    transform: scale(1.05) !important;
}

/* --------------------------------------------------------------------------
   6. PRODUCT CONTENT & TYPOGRAPHY
   Vertical stacking: Title gets 100% width, no awkward wrapping into 5-6 lines.
   -------------------------------------------------------------------------- */
.dgwt-wcas-content-wrapp {
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 3px !important;
    overflow: hidden !important;
}

.dgwt-wcas-st {
    width: 100% !important;
    text-align: left !important;
    line-height: 1.35 !important;
}

.dgwt-wcas-st-breadcrumbs {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #8C857B !important;
    margin-bottom: 2px !important;
}

.dgwt-wcas-st-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Max 2 clean lines */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #171717 !important;
    letter-spacing: -0.1px !important;
    line-height: 1.32 !important;
    transition: color 0.16s ease !important;
}

.dgwt-wcas-suggestion:hover .dgwt-wcas-st-title,
.dgwt-wcas-suggestion-selected .dgwt-wcas-st-title {
    color: #0A0A0A !important;
}

/* Highlighted matching keywords */
.dgwt-wcas-st strong,
.dgwt-wcas-st mark {
    color: #0A0A0A !important;
    font-weight: 700 !important;
    background: transparent !important;
    text-decoration: underline !important;
    text-decoration-color: #171717 !important;
    text-underline-offset: 2px !important;
}

/* SKU */
.dgwt-wcas-sku {
    color: #A3A3A3 !important;
    font-size: 10.5px !important;
    margin-top: 1px !important;
}

/* --------------------------------------------------------------------------
   7. PRICE FORMATTING (Horizontal Inline Luxury Row)
   -------------------------------------------------------------------------- */
.dgwt-wcas-sp {
    display: flex !important;
    flex-direction: row !important; /* Horizontal inline row */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    text-align: left !important;
    margin-top: 2px !important;
}

.dgwt-wcas-sp .woocommerce-Price-amount {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #171717 !important;
    letter-spacing: -0.2px !important;
}

.dgwt-wcas-sp del {
    color: #9CA3AF !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

.dgwt-wcas-sp del .woocommerce-Price-amount {
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
}

.dgwt-wcas-sp ins {
    text-decoration: none !important;
    background: transparent !important;
    font-weight: 600 !important;
    color: #0A0A0A !important;
}

/* Discount percentage label in suggestions */
.dgwt-wcas-sp span:not(.woocommerce-Price-amount):not(del),
.dgwt-wcas-sp small {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #047857 !important; /* Emerald green discount badge */
}

/* --------------------------------------------------------------------------
   8. "SEE ALL RESULTS" BUTTON (Bottom Action - Sticky & Never Cut Off)
   -------------------------------------------------------------------------- */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    background: #FFFFFF !important;
    padding: 10px 14px 14px 14px !important;
    margin: 0 !important;
    border-top: 1px solid #F0ECE4 !important;
    border-bottom: none !important;
    display: block !important;
    min-height: auto !important;
    cursor: pointer !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03) !important;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more:hover {
    background: #FFFFFF !important;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more .dgwt-wcas-st-more {
    background: #171717 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    padding: 11px 18px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more:hover .dgwt-wcas-st-more,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-selected .dgwt-wcas-st-more {
    background: #000000 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}

/* --------------------------------------------------------------------------
   9. NO RESULTS STATE
   -------------------------------------------------------------------------- */
.dgwt-wcas-suggestion-nores,
.dgwt-wcas-suggestion.dgwt-wcas-nores {
    padding: 24px 20px !important;
    text-align: center !important;
    font-size: 13.5px !important;
    color: #737373 !important;
    line-height: 1.5 !important;
}

.dgwt-wcas-suggestion-nores p {
    margin: 0 !important;
    color: #737373 !important;
}

/* --------------------------------------------------------------------------
   10. MOBILE SEARCH OVERLAY (Full screen luxury overlay)
   -------------------------------------------------------------------------- */
.dgwt-wcas-overlay-mobile {
    background: #FFFFFF !important;
}

.dgwt-wcas-om-bar {
    background: #FAF8F5 !important;
    border-bottom: 1px solid #ECEAE4 !important;
    padding: 10px 14px !important;
}

.dgwt-wcas-om-return {
    color: #171717 !important;
}

/* --------------------------------------------------------------------------
   11. SEARCH RESULTS ARCHIVE PAGE UI ENHANCEMENTS (/?s=...)
   -------------------------------------------------------------------------- */
.tss-search-summary-wrap {
    margin-bottom: 16px;
}

.tss-search-query-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FAF8F5;
    border: 1px solid #ECEAE4;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #171717;
}

.tss-search-query-badge span.tss-badge-term {
    color: #0A0A0A;
    font-weight: 600;
}

.tss-btn-browse-shop {
    display: inline-block;
    background: #171717;
    color: #FFFFFF !important;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    margin-top: 16px;
    transition: all 0.25s ease;
}

.tss-btn-browse-shop:hover {
    background: #000000;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}