/* =====================================================================
   OUT / outlet category hero (term 318 — /product-category/חנות/sale-sale/)
   Designer Figma: light-gray banner strip with the lighting collection,
   centered black "Outlet" title + red underline, on the otherwise-black page.
   Scoped to body.term-318 only. Loaded AFTER woocommerce.css (cascade win).
   Does NOT touch the product grid (.section-products__items) or mobile-product-fix.css.
   Reversible: delete this file + img/outlet-banner.jpg + the enqueue block.
   ===================================================================== */

/* tighten the section + breadcrumb that sit above the banner box */
body.term-318 .shop-banner { padding-bottom: 28px; }
body.term-318.black-bg .shop-banner .breadcrumb {
    padding-top: 22px;
    padding-bottom: 16px;
}

/* the title row becomes the gray lamp banner box */
body.term-318 .shop-banner .banner__title-section {
    position: relative;
    margin: 0;
    padding: 20px 24px;
    min-height: 175px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #d9d9d9;
    background-image: url(../img/outlet-banner.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* "Outlet" — black over the gray, keeping the theme's existing light title font */
body.term-318 .shop-banner .banner__title-section .section-title {
    color: #111111 !important;
    font-size: clamp(42px, 6vw, 92px);
    line-height: 1;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    position: relative;
    z-index: 2;
}

/* red underline under the title (Figma: ~252x15 under the 91px word) */
body.term-318 .shop-banner .banner__title-section .section-title::after {
    content: "";
    display: block;
    width: clamp(120px, 16vw, 252px);
    height: 11px;
    margin: 16px auto 0;
    background: #e30000;
}

/* this hero shows only the banner — no subtitle, no category circles (matches Figma) */
body.term-318 .shop-banner .shop-banner__subtitle { display: none; }
body.term-318 .shop-banner .cat-circles { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 992px) {
    body.term-318 .shop-banner .banner__title-section { min-height: 170px; padding: 20px; }
    body.term-318 .shop-banner .banner__title-section .section-title { font-size: clamp(38px, 9vw, 64px); }
}

/* ---------- mobile: lamps strip at top, Outlet below (Figma mobile) ---------- */
@media (max-width: 767px) {
    body.term-318 .shop-banner { padding-bottom: 18px; }
    /* keep enough top padding so the breadcrumb clears the sticky mobile header */
    body.term-318.black-bg .shop-banner .breadcrumb { padding-top: 46px; padding-bottom: 12px; }
    body.term-318 .shop-banner .banner__title-section {
        min-height: 150px;
        padding: 14px 14px 20px;
        justify-content: flex-end;
        background-size: contain;         /* whole lamp strip visible across the width */
        background-position: center 16px; /* lamps toward the top */
    }
    body.term-318 .shop-banner .banner__title-section .section-title { font-size: 44px; }
    body.term-318 .shop-banner .banner__title-section .section-title::after { height: 8px; margin-top: 12px; }
}