/**
 * NicheCycle — PLP Styles
 * Category hero banner, product card badges, attribute tags, Add to Cart button.
 * Appended to styles.css via tar.gz deploy — safe to update without overriding core.
 */

/* ============================================================
   CATEGORY HERO BANNER
   ============================================================ */

.nc-category-hero {
    background-color: #111827;
    background-image: linear-gradient(135deg, #111827 0%, #19548E 100%);
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    padding: 2.5rem 0;
}

.nc-category-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: block;
}

.nc-category-hero__content {
    flex: 1;
    min-width: 0;
}

.nc-category-hero__series {
    font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.5rem;
}

.nc-category-hero__title {
    font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 1rem;
    line-height: 1.1;
}

.nc-category-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.nc-category-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    padding: 0 0.75rem 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.nc-category-hero__badge:last-child {
    border-right: none;
}

.nc-category-hero__badge--highlight {
    color: #5bc8d4;
}

@media (max-width: 768px) {
    .nc-category-hero {
        padding: 2rem 0;
    }
    .nc-category-hero__graphic {
        display: none;
    }
}

/* ============================================================
   PRODUCT CARD — IN STOCK / OUT OF STOCK BADGE
   ============================================================ */

.nc-product-card {
    position: relative;
}

.nc-stock-badge-wrap {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 2;
}

.nc-stock-badge {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}

.nc-stock-badge--in {
    background: #d1fae5;
    color: #065f46;
}

.nc-stock-badge--out {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================================
   PRODUCT CARD — SKU
   ============================================================ */

.nc-card-sku {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.125rem 0 0.5rem;
}

/* ============================================================
   PRODUCT CARD — ATTRIBUTE PILL TAGS
   ============================================================ */

.nc-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.5rem 0 0.25rem;
}

.nc-card-tag {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.nc-card-tag--highlight {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

/* ============================================================
   PRODUCT CARD — ADD TO CART BUTTON (full-width in grid)
   ============================================================ */

.nc-atc-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.05em;
    border-radius: 4px;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.nc-atc-btn:hover {
    opacity: 0.9;
}

/* ============================================================
   PLP IMPROVEMENTS — v22i (2026-07-23)
   ============================================================ */

/* ── Hero banner — more presence ─────────────────────────── */
.nc-category-hero {
    padding: 3rem 0 2.5rem !important;
    border-bottom: 3px solid #19548E;
}

.nc-category-hero__title {
    font-size: clamp(1.9rem, 4vw, 3rem) !important;
    margin-bottom: 0.5rem !important;
}

.nc-category-hero__meta {
    margin-top: 0.75rem;
}

.nc-category-hero__badge {
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.65) !important;
}

/* ── Sidebar — filter groups ───────────────────────────────── */

/* Sidebar wrapper — light background, softer border */
.sidebar-main .block {
    background: #F9F8F6 !important;
    border-color: #D4D1CA !important;
    border-radius: 6px !important;
    padding: 0 !important;
    overflow: hidden;
}

/* "Shop By" heading */
.sidebar-main .block-title .title {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #19548E !important;
    padding: 14px 14px 10px !important;
    display: block !important;
    border-bottom: 1px solid #D4D1CA;
}

/* Filter group items */
.sidebar-main .filter-options-item,
.sidebar-main [class*="filter-option"] {
    border-bottom: 1px solid #E5E3DE !important;
    padding: 0 !important;
}

.sidebar-main .filter-options-item:last-child {
    border-bottom: none !important;
}

/* Filter group title (BRAND, CARBURETOR TYPE, etc.) */
.sidebar-main .filter-options-title,
.sidebar-main [data-role="title"],
.sidebar-main dl > dt {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #374151 !important;
    padding: 10px 14px !important;
    border-left: 3px solid #19548E !important;
    background: #F2F1EE !important;
    cursor: pointer;
    margin: 0 !important;
}

/* Filter option values */
.sidebar-main .filter-options-content,
.sidebar-main [data-role="content"],
.sidebar-main dl > dd {
    padding: 8px 14px 10px !important;
}

/* Filter checkboxes / links */
.sidebar-main .filter-options-content a,
.sidebar-main .item a,
.sidebar-main dl > dd a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.82rem !important;
    color: #374151 !important;
    text-decoration: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 0 !important;
    transition: color 0.15s !important;
}

.sidebar-main .filter-options-content a:hover,
.sidebar-main .item a:hover {
    color: #19548E !important;
}

/* Count label in filter */
.sidebar-main .filter-options-content .count,
.sidebar-main .item .count {
    font-size: 0.72rem !important;
    color: #9CA3AF !important;
    background: #E5E7EB !important;
    border-radius: 10px !important;
    padding: 1px 7px !important;
    margin-left: 6px !important;
}

/* HIDE link */
.sidebar-main .action.see-all,
.sidebar-main .filter-options .filter-clear {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #19548E !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* ── Toolbar — product count + sort ────────────────────────── */
.toolbar-products {
    background: #F2F1EE !important;
    border: 1px solid #D4D1CA !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    margin-bottom: 16px !important;
}

/* "20 poducts" — style the count, can't fix Hyva typo without phtml */
.toolbar-amount {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #374151 !important;
}

.toolbar-amount .toolbar-number {
    color: #19548E !important;
    font-size: 1rem !important;
}

/* Sort label */
.toolbar-sorter .sorter-label {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #6B7280 !important;
    margin-right: 6px !important;
}

/* Sort dropdown */
.toolbar-sorter .sorter-options {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.82rem !important;
    border: 1px solid #D4D1CA !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    color: #374151 !important;
    background: #fff !important;
}

/* ── Product list rows ─────────────────────────────────────── */

/* Row wrapper — tighter bottom border, less whitespace */
.nc-product-card.flex-row,
.product-item.flex-row,
.nc-product-card:not([class*="grid"]) {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    gap: 0 !important;
}

/* Reduce huge bottom padding on list view cards */
.nc-product-card.md\:pb-8 {
    padding-bottom: 16px !important;
}

/* Image column — consistent size in list view */
.product-item-photo.lg\:w-1\/5 {
    min-width: 140px;
    max-width: 180px;
}

/* Product title in list view — left-align, reduce size slightly */
.product-info-title-block a.product-item-link {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
}

/* ATC / price column in list view */
.nc-product-card .pb-5 {
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* ── Subcategory cards (apptrian extension) ─────────────────── */

/* Outer grid wrapper */
.apptrian-subcategories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

@media (max-width: 1024px) {
    .apptrian-subcategories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 640px) {
    .apptrian-subcategories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Each category image wrapper */
.apptrian-subcategories-category-image {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid #E5E3DE !important;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
    background: #F9F8F6 !important;
    position: relative !important;
}

.apptrian-subcategories-category-image:hover {
    border-color: #19548E !important;
    box-shadow: 0 8px 24px rgba(25, 84, 142, 0.18) !important;
    transform: translateY(-3px) !important;
}

/* Image fills card */
.apptrian-subcategories-category-image a {
    display: block !important;
}

.apptrian-subcategories-category-image img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s !important;
}

.apptrian-subcategories-category-image:hover img {
    transform: scale(1.04) !important;
}

/* Category name label */
.apptrian-subcategories-category-name {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #111827 !important;
    padding: 10px 14px 12px !important;
    display: block !important;
    border-top: 1px solid #E5E3DE !important;
    background: #fff !important;
}

/* "Subcategories" heading */
.apptrian-subcategories-heading {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #19548E !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #19548E !important;
    display: inline-block !important;
}

/* ── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 768px) {
    .nc-category-hero {
        padding: 2rem 0 1.75rem !important;
    }
    .nc-category-hero__title {
        font-size: 1.6rem !important;
    }
    .toolbar-products {
        border-radius: 4px !important;
        padding: 8px 12px !important;
    }
}

/* ============================================================
   MOBILE FIXES — v22j (2026-07-23)
   ============================================================ */

@media (max-width: 767px) {

    /* ── Subcategory page ── */

    /* Subcategory grid: 2-col on mobile */
    .apptrian-subcategories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Shorter image height on mobile cards */
    .apptrian-subcategories-category-image img {
        height: 120px !important;
    }

    /* Sidebar on subcategory page — collapse it, it's just filter links */
    /* Hyva collapses it via Alpine on mobile already, just style the closed state */
    .sidebar-main .block {
        margin-bottom: 0 !important;
    }

    /* Remove the big empty space between sidebar and subcategory grid */
    .sidebar-main {
        margin-bottom: 8px !important;
    }

    /* Compact "Shop By" label in collapsed state */
    .sidebar-main .block-title .title {
        font-size: 0.72rem !important;
        padding: 12px 14px !important;
    }

    /* ── Product list page ── */

    /* Mobile toolbar — stack count above sort */
    .toolbar-products {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px 12px !important;
    }

    .toolbar-amount {
        font-size: 0.72rem !important;
    }

    .toolbar-sorter {
        width: 100% !important;
    }

    .toolbar-sorter .sorter-options {
        width: 100% !important;
        padding: 6px 8px !important;
    }

    /* Product list card — tighter image height, visible bottom border */
    .nc-product-card {
        border-bottom: 1px solid #E5E3DE !important;
        padding-bottom: 20px !important;
        margin-bottom: 4px !important;
    }

    /* Constrain image height in list mode on mobile */
    .product-item-photo img {
        max-height: 220px !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    /* Price — slightly smaller on mobile */
    .nc-product-card .price-box .price {
        font-size: 1.25rem !important;
    }

    /* ATC button — full width, good tap target */
    .nc-atc-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Stock badge on mobile list cards — top-right */
    .nc-stock-badge-wrap {
        top: 8px !important;
        right: 8px !important;
    }
}

/* ── Apptrian class name corrections (v22k) ─────────────────── */

/* Grid container — correct class is apptrian-subcategories-grid */
.apptrian-subcategories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
    list-style: none !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    .apptrian-subcategories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .apptrian-subcategories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* LI wrapper — no bullet, no extra spacing */
.apptrian-subcategories-category-wrapper {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Inner card div */
.apptrian-subcategories-category {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid #E5E3DE !important;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
    background: #F9F8F6 !important;
    height: 100% !important;
}

.apptrian-subcategories-category:hover {
    border-color: #19548E !important;
    box-shadow: 0 8px 24px rgba(25, 84, 142, 0.18) !important;
    transform: translateY(-3px) !important;
}

.apptrian-subcategories-category a {
    display: block !important;
}

.apptrian-subcategories-category img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s !important;
}

@media (max-width: 767px) {
    .apptrian-subcategories-category img {
        height: 110px !important;
    }
}

.apptrian-subcategories-category:hover img {
    transform: scale(1.04) !important;
}

/* ── Apptrian grid override — high specificity (v22l) ────────
   apptrian_subcategories.css loads AFTER nc-plp.css and forces
   display:block on .apptrian-subcategories-grid. We beat it
   with a more specific selector (parent context added).
   ────────────────────────────────────────────────────���─────── */

.column.main .apptrian-subcategories-grid,
.page-main .apptrian-subcategories-grid,
body .apptrian-subcategories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
    list-style: none !important;
    padding: 0 !important;
}

/* LI items must be block (not inline-block per apptrian default) */
.column.main .apptrian-subcategories-grid li,
.page-main .apptrian-subcategories-grid li,
body .apptrian-subcategories-grid li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    .column.main .apptrian-subcategories-grid,
    .page-main .apptrian-subcategories-grid,
    body .apptrian-subcategories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .column.main .apptrian-subcategories-grid,
    .page-main .apptrian-subcategories-grid,
    body .apptrian-subcategories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* Inner category card — full height, no margin from apptrian default */
.column.main .apptrian-subcategories-grid .apptrian-subcategories-category,
body .apptrian-subcategories-grid .apptrian-subcategories-category {
    margin: 0 !important;
    display: block !important;
    height: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid #E5E3DE !important;
    background: #F9F8F6 !important;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}

.column.main .apptrian-subcategories-grid .apptrian-subcategories-category:hover,
body .apptrian-subcategories-grid .apptrian-subcategories-category:hover {
    border-color: #19548E !important;
    box-shadow: 0 8px 24px rgba(25, 84, 142, 0.18) !important;
    transform: translateY(-3px) !important;
}

/* Image — override apptrian's aspect-ratio:1/1 with fixed height */
.column.main .apptrian-subcategories-grid .apptrian-subcategories-category-image img,
body .apptrian-subcategories-grid .apptrian-subcategories-category-image img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    display: block !important;
    aspect-ratio: unset !important;
    transition: transform 0.3s !important;
}

@media (max-width: 767px) {
    .column.main .apptrian-subcategories-grid .apptrian-subcategories-category-image img,
    body .apptrian-subcategories-grid .apptrian-subcategories-category-image img {
        height: 110px !important;
    }
}

.column.main .apptrian-subcategories-grid .apptrian-subcategories-category:hover img,
body .apptrian-subcategories-grid .apptrian-subcategories-category:hover img {
    transform: scale(1.04) !important;
}

/* Category name label */
.column.main .apptrian-subcategories-grid .apptrian-subcategories-category-name,
body .apptrian-subcategories-grid .apptrian-subcategories-category-name {
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #111827 !important;
    padding: 10px 14px 12px !important;
    text-align: left !important;
    display: block !important;
    border-top: 1px solid #E5E3DE !important;
    background: #fff !important;
    margin: 0 !important;
}

/* ── Breadcrumbs inside hero (v22m) ─────────────────────────── */

/* Override default Hyva breadcrumb margins when inside hero */
.nc-category-hero .breadcrumbs {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.nc-category-hero .breadcrumbs ol {
    padding: 0 !important;
    background: transparent !important;
}

/* Breadcrumb text — white, semi-transparent */
.nc-category-hero .breadcrumbs .item,
.nc-category-hero .breadcrumbs .item a,
.nc-category-hero .breadcrumbs li {
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 0.78rem !important;
    font-family: 'DM Sans', sans-serif !important;
}

.nc-category-hero .breadcrumbs .item a:hover {
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: underline !important;
}

/* Active (current) breadcrumb item */
.nc-category-hero .breadcrumbs .item.last,
.nc-category-hero .breadcrumbs li:last-child {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
}

/* Separator arrows */
.nc-category-hero .breadcrumbs .items > li + li::before,
.nc-category-hero .breadcrumbs .item + .item::before {
    color: rgba(255, 255, 255, 0.40) !important;
}

/* Hide the outer white gap that Hyva adds above breadcrumbs via md:mt-11 */
.nc-category-hero .breadcrumbs.mx-3\.5.md\:mt-11 {
    margin-top: 0 !important;
}

/* ── Subcategory card width fix (v22n) ──────────────────────── */

/* Force li wrappers to fill their grid cell fully */
body .apptrian-subcategories-grid li.apptrian-subcategories-category-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Inner card fills the li */
body .apptrian-subcategories-grid .apptrian-subcategories-category {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Image fills card width, no overflow */
body .apptrian-subcategories-grid .apptrian-subcategories-category-image {
    width: 100% !important;
    overflow: hidden !important;
}

body .apptrian-subcategories-grid .apptrian-subcategories-category-image img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    display: block !important;
    aspect-ratio: unset !important;
}

/* Category name — no overflow clip, wrap properly */
body .apptrian-subcategories-grid .apptrian-subcategories-category-name {
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    padding: 10px 12px 12px !important;
}

@media (max-width: 767px) {
    body .apptrian-subcategories-grid .apptrian-subcategories-category-image img {
        height: 110px !important;
    }
}

/* ── Grid / List mode toggle icons (v22q) ───────────────────── */

/* Hide the base64-embedded SVG images inside the buttons */
.modes .mode-list svg,
.modes .mode-grid svg {
    display: none !important;
}

/* Shared button styles */
.modes .modes-mode {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    border: 1px solid #D4D1CA !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s !important;
    opacity: 1 !important;
    margin-left: 6px !important;
    position: relative !important;
}

.modes .modes-mode:hover {
    border-color: #19548E !important;
    background: #F0F6FC !important;
}

/* Active state */
.modes .modes-mode.active {
    background: #19548E !important;
    border-color: #19548E !important;
    opacity: 1 !important;
}

/* List icon — horizontal lines ━━━ */
.modes .mode-list::after {
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Crect x='0' y='0' width='16' height='3' rx='1' fill='%23374151'/%3E%3Crect x='0' y='5.5' width='16' height='3' rx='1' fill='%23374151'/%3E%3Crect x='0' y='11' width='16' height='3' rx='1' fill='%23374151'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.modes .mode-list.active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'%3E%3Crect x='0' y='0' width='16' height='3' rx='1' fill='%23ffffff'/%3E%3Crect x='0' y='5.5' width='16' height='3' rx='1' fill='%23ffffff'/%3E%3Crect x='0' y='11' width='16' height='3' rx='1' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* Grid icon — 2×2 squares ⊞ */
.modes .mode-grid::after {
    content: '' !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Crect x='0' y='0' width='6.5' height='6.5' rx='1' fill='%23374151'/%3E%3Crect x='8.5' y='0' width='6.5' height='6.5' rx='1' fill='%23374151'/%3E%3Crect x='0' y='8.5' width='6.5' height='6.5' rx='1' fill='%23374151'/%3E%3Crect x='8.5' y='8.5' width='6.5' height='6.5' rx='1' fill='%23374151'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.modes .mode-grid.active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Crect x='0' y='0' width='6.5' height='6.5' rx='1' fill='%23ffffff'/%3E%3Crect x='8.5' y='0' width='6.5' height='6.5' rx='1' fill='%23ffffff'/%3E%3Crect x='0' y='8.5' width='6.5' height='6.5' rx='1' fill='%23ffffff'/%3E%3Crect x='8.5' y='8.5' width='6.5' height='6.5' rx='1' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* Inactive grid icon — slightly dimmed */
.modes .mode-grid:not(.active) {
    opacity: 0.6 !important;
}
.modes .mode-grid:not(.active):hover {
    opacity: 1 !important;
}

/* ── Sort direction toggle button (v22q) ───────────────────── */
.nc-sort-dir-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 4px 8px !important;
    border: 1px solid #D4D1CA !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #374151 !important;
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
    line-height: 1 !important;
}

.nc-sort-dir-btn:hover {
    border-color: #19548E !important;
    color: #19548E !important;
    background: #F0F6FC !important;
}

.nc-sort-dir-btn svg {
    flex-shrink: 0 !important;
}

.nc-sort-dir-label {
    font-size: 10px !important;
    line-height: 1 !important;
}

/* ============================================================
   SEARCH RESULTS PAGE — HERO BANNER
   Targets h1.page-title directly (Mirasvit strips .page-title-wrapper
   from the Ajax-rendered DOM, but the h1 survives inside main)
   ============================================================ */

body.catalogsearch-result-index h1.page-title,
body.catalogsearch-advanced-result h1.page-title {
    /* Full-bleed background via negative margin trick */
    background: #19548E;
    width: calc(100% + 4rem);       /* extend past container padding ~2rem each side */
    margin-left: -2rem;
    margin-right: -2rem;
    margin-top: -1rem;              /* pull up under breadcrumbs gap */
    margin-bottom: 1.5rem;
    padding: 1.75rem 2rem 1.5rem;
    font-family: 'Barlow Semi Condensed', sans-serif !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

body.catalogsearch-result-index h1.page-title .base,
body.catalogsearch-advanced-result h1.page-title .base {
    color: #ffffff !important;
}

/* ============================================================
   SEARCH RESULTS — DID YOU MEAN / RELATED TERMS (pill chips)
   Both the Hyva search_data block (search_suggestions + search_recommendations)
   use our nc-search-suggestions template override.
   ============================================================ */

.nc-search-suggestions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    background: #F4F7FB;
    border: 1px solid #D4DCE8;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.nc-search-suggestions__label {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B7C99;
    white-space: nowrap;
    margin-right: 0.25rem;
}

.nc-search-suggestions__chip {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #19548E;
    background: #ffffff;
    border: 1px solid #B8CADE;
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}

.nc-search-suggestions__chip:hover {
    background: #19548E;
    border-color: #19548E;
    color: #ffffff;
    text-decoration: none;
}

/* ============================================================
   SEARCH RESULTS — MISSPELL NOTICE (Did you mean)
   Styled via misspell_notice.phtml override → .nc-search-notice
   ============================================================ */

.nc-search-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-left: 4px solid #19548E;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    color: #1E3A5F;
    line-height: 1.5;
}

.nc-search-notice__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: #19548E;
}

.nc-search-notice strong {
    font-weight: 700;
}

.nc-search-notice a {
    color: #19548E;
    font-weight: 600;
    text-decoration: underline;
}

.nc-search-notice a:hover {
    color: #0C4E54;
}


/* ============================================================
   SEARCH RESULTS — HERO GAP FIX
   The h1 sits inside a container with Tailwind my-6/lg:mt-8 margins.
   Before that container are two zero/small divs (empty div + page messages)
   totalling ~56px. Pull h1 up to eliminate all dead space.
   ============================================================ */

body.catalogsearch-result-index main .container:has(h1.page-title),
body.catalogsearch-advanced-result main .container:has(h1.page-title) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Pull the h1 up past the empty divs that precede its container (~56px) */
body.catalogsearch-result-index h1.page-title,
body.catalogsearch-advanced-result h1.page-title {
    margin-top: -4rem !important;
}

/* ============================================================
   SEARCH RESULTS — NO RESULTS NOTICE OVERRIDE
   When Mirasvit puts search suggestions inside .message.notice,
   strip the orange background so the pill chips render cleanly.
   ============================================================ */

body.catalogsearch-result-index .message.notice:has(.nc-search-suggestions),
body.catalogsearch-result-index .message.notice:has(.nc-search-notice) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Fallback — the no-results message.notice box on search pages */
body.catalogsearch-result-index .message.notice .nc-search-suggestions,
body.catalogsearch-result-index .message.notice .nc-search-notice {
    /* already styled — just make sure the orange wrapper doesn't bleed through */
    position: relative;
    z-index: 1;
}


/* ============================================================
   STOCK BADGE — list view: flow above price, not absolute overlay
   (nc-list-price-col is set only when viewIsGrid = false)
   ============================================================ */
@media (min-width: 1024px) {
    .nc-list-price-col .nc-stock-badge-wrap {
        position: static;
        display: block;
        margin-bottom: 0.375rem;
        text-align: right;
    }
}

/* ============================================================
   OOS BUTTON + NOTIFY WHEN AVAILABLE — v20260805
   Replaces stockstatus child block in !isSaleable branch.
   AW CustomStockStatus .stock-notification-button is kept
   intact — only restyled here, JS behaviour unchanged.
   ============================================================ */

/* Grey disabled Out of Stock button */
.nc-oos-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.625rem 1rem !important;
    font-family: var(--font-family-barlow, 'Barlow Semi Condensed', sans-serif);
    font-size: 0.8125rem !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #E5E7EB !important;
    color: #9CA3AF !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 4px;
    cursor: default;
    pointer-events: none;
    margin-top: 1rem;
}

/* Amber Notify When Available button — AW stock-notification-button */
.stock-notification-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.625rem 1rem !important;
    font-family: var(--font-family-barlow, 'Barlow Semi Condensed', sans-serif);
    font-size: 0.8125rem !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #92400E !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: background 0.15s ease;
}

.stock-notification-button:hover {
    background: #7C3610 !important;
}

/* Bell icon prepended via CSS */
.stock-notification-button::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox=0 0 24 24 fill=none stroke=%23ffffff stroke-width=2.5 stroke-linecap=round stroke-linejoin=round%3E%3Cpath d=M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9/%3E%3Cpath d=M13.73 21a2 2 0 0 1-3.46 0/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/* Ensure the AW notification wrapper is visible when JS shows it
   (it starts display:none — JS changes it, so no override needed here) */
.aw-cus__stock-notification {
    width: 100%;
}
/* ── PDP OOS State ────────────────────────────────────────────────────────── */
.nc-pdp-oos-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
}

.nc-pdp-oos-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-family: var(--font-family-barlow, 'Barlow Semi Condensed', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #6B7280;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: not-allowed;
    opacity: 0.85;
}