/* BENDES Search v3 */

/* Search input visibility fix — box-shadow to avoid layout shift */
.header-search__input {
    box-shadow: inset 0 -1px 0 0 #d0d0d0 !important;
    border: 0 !important;
    transition: box-shadow 0.2s;
}
.header-search__input:focus {
    box-shadow: inset 0 -2px 0 0 #222 !important;
}

/* Two-column layout inside nav-wrap */
.bsd-main {
    display: flex;
    min-height: 380px;
}

/* LEFT panel */
.bsd-left {
    flex: 0 0 290px;
    padding: 20px 24px;
    border-right: 1px solid #f0f0f0;
    overflow-y: auto;
}

/* Fixed-height tags box — no jumping */
.bsd-tags-box {
    min-height: 76px;
    margin-bottom: 4px;
}
.bsd-tags-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}

/* Tag: selected (dark) */
.bsd-tag-on {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 13px;
    background: #252525;
    color: #fff;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.2px;
    white-space: nowrap;
    animation: bsdTin 0.15s ease;
}
@keyframes bsdTin {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
.bsd-tag-x {
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.12s;
}
.bsd-tag-x:hover { opacity: 1; }

/* Tag: suggestion (outline) */
.bsd-tag-off {
    display: inline-block;
    padding: 5px 13px;
    border: 1px solid #ddd;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #666;
    cursor: pointer;
    transition: all 0.12s;
    background: #fff;
    font-family: inherit;
    white-space: nowrap;
}
.bsd-tag-off:hover { border-color: #252525; color: #252525; }

/* Section label */
.bsd-sec-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #bbb;
    margin-bottom: 10px;
}

.bsd-sep { height: 1px; background: #f0f0f0; margin: 14px 0; }

/* History */
.bsd-hist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12.5px;
    font-weight: 300;
    color: #555;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s;
}
.bsd-hist-item:hover { color: #252525; }
.bsd-hist-icon { width: 12px; height: 12px; opacity: 0.25; flex-shrink: 0; }
.bsd-hist-x {
    margin-left: auto;
    font-size: 14px;
    color: #ccc;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.12s;
}
.bsd-hist-item:hover .bsd-hist-x { opacity: 1; }

/* Popular query pills */
.bsd-pop-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.bsd-pop-tag {
    padding: 5px 13px;
    border: 1px solid #e8e8e8;
    border-radius: 100px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 400;
    color: #666;
    cursor: pointer;
    background: #fafafa;
    transition: all 0.12s;
}
.bsd-pop-tag:hover { border-color: #333; color: #333; background: #fff; }

/* RIGHT panel */
.bsd-right {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}
.bsd-right .bsd-sec-label { padding-left: 4px; margin-bottom: 14px; }

/* Image grid — 3 columns, square cells */
.bsd-img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    min-height: 360px;
}
.bsd-img-cell {
    display: block;
    aspect-ratio: 1;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: opacity 0.12s;
    text-decoration: none;
}
.bsd-img-cell:hover { opacity: 0.8; }
.bsd-img-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}
.bsd-img-hover {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 5px 7px;
    background: linear-gradient(transparent, rgba(0,0,0,0.45));
    color: #fff;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.3px;
    opacity: 0;
    transition: opacity 0.15s;
}
.bsd-img-cell:hover .bsd-img-hover { opacity: 1; }

/* Category chips row */
.bsd-cats-row {
    display: none;
    gap: 4px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Results footer */
.bsd-res-footer {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 0;
    margin-top: 4px;
}
.bsd-btn-all {
    padding: 9px 28px;
    background: #252525;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.bsd-btn-all:hover { background: #444; }
.bsd-cnt { font-size: 12px; font-weight: 300; color: #999; }

/* Override nav-wrap defaults */
.header__search-nav-wrap a.bsd-img-cell:hover,
.header__search-nav-wrap a.bsd-img-cell:focus,
.header__search-nav-wrap a.bsd-hist-item:hover,
.header__search-nav-wrap a.bsd-hist-item:focus {
    color: #252525;
}

/* Close/Back button — hidden on desktop */
.bsd-close-btn {
    display: none;
}

/* Mobile layout container — hidden on desktop */
.bsd-mob-layout { display: none; }


/* Zero-results message */
.bsd-zero-msg {
    grid-column: 1 / -1;
    padding: 16px 12px 8px;
    font-size: 13px;
    font-weight: 300;
    color: #888;
    text-align: center;
    line-height: 1.5;
}

/* Mobile */
@media (max-width: 767px) {

    /* Override style.css narrow container — fullscreen on mobile */
    .header-search__container {
        width: 100% !important;
        max-width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Nav wrap fills remaining space */
    .header__search-nav-wrap {
        max-height: none !important;
        flex: 1 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Close/Back button */
    .bsd-close-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        background: #fff;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        font-family: Manrope, sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        flex-shrink: 0;
    }
    .bsd-close-btn:active { background: #f5f5f4; }
    .bsd-close-btn svg { opacity: 0.5; flex-shrink: 0; }

    /* Search input compact */
    .header__search-control { flex-shrink: 0; }
    .header-search__input { height: 48px !important; padding: 12px 45px 12px 16px !important; }

    /* === Mobile flat layout === */
    .bsd-mob-layout {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0;
        overflow: hidden;
    }

    /* Tags — horizontal scroll, single line */
    .bsd-mob-tags {
        display: flex;
        gap: 6px;
        padding: 10px 14px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-shrink: 0;
        flex-wrap: nowrap;
        border-bottom: 1px solid #f5f5f4;
    }
    .bsd-mob-tags::-webkit-scrollbar { display: none; }
    .bsd-mob-tags .bsd-tag-on,
    .bsd-mob-tags .bsd-tag-off {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Grid — stretches to fill available space */
    .bsd-mob-grid {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 2px;
        padding: 2px;
    }
    .bsd-mob-grid .bsd-img-cell {
        overflow: hidden;
        position: relative;
        min-height: 0;
        background: #f5f5f5;
    }
    .bsd-mob-grid .bsd-img-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .bsd-mob-grid .bsd-img-hover {
        opacity: 1;
        font-size: 10px;
        padding: 3px 5px;
    }

    /* Footer — right under grid */
    .bsd-mob-layout .bsd-res-footer {
        flex-shrink: 0;
        padding: 10px 14px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .bsd-mob-layout .bsd-btn-all {
        width: 100%;
        padding: 10px;
        font-size: 12px;
        border-radius: 6px;
    }
    .bsd-mob-layout .bsd-cnt {
        display: block;
        text-align: center;
        margin-top: 4px;
    }

    
    .bsd-mob-grid .bsd-zero-msg {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        font-size: 12px;
    }

    /* Hide desktop layout elements */
    .bsd-main { display: none !important; }
}

/* Carousel dots override - must beat .owl-theme .owl-dots .owl-dot span */
.liked-block .owl-dots {
    display: flex !important;
    justify-content: center;
    gap: 3px;
    margin-top: 18px;
    padding: 0 50px;
}
.liked-block .owl-dots .owl-dot {
    flex: 1;
    max-width: 100px;
    padding: 8px 0 !important;
    margin: 0 !important;
    display: block !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
}
.liked-block .owl-dots .owl-dot span {
    display: block !important;
    height: 3px !important;
    width: 100% !important;
    border-radius: 0 !important;
    background: #e0e0e0 !important;
    transition: background 0.25s;
}
.liked-block .owl-dots .owl-dot.active span,
.liked-block .owl-dots .owl-dot:hover span {
    background: #222 !important;
}
/* Hide price and name text */
.liked-block .unit__price { display: none !important; }
.liked-block .unit__name { display: none !important; }
/* === BENDES Recommendations Block === */
.bendes-recs-wrap { padding: 40px 0 50px; }
.bendes-recs-inner { width: 100%; padding-left: 15px; padding-right: 15px; margin: 0 auto; max-width: 1700px; }
@media (min-width: 1200px) { .bendes-recs-inner { padding-left: 30px; padding-right: 30px; } }
.bendes-recs-title { font-family: Bendes, serif; font-size: 30px; font-weight: 400; color: #222; text-transform: uppercase; margin-bottom: 40px; text-align: center; }
.bendes-recs-carousel-wrap { position: relative; }
.bendes-recs-slide { display: block; text-decoration: none; }
.bendes-recs-img { background: #f5f5f5; overflow: hidden; }
.bendes-recs-img img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; transition: transform 0.4s; }
.bendes-recs-slide:hover img { transform: scale(1.04); }

/* Custom nav buttons */
.bendes-recs-prev, .bendes-recs-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: none; border: none; cursor: pointer; padding: 10px; opacity: 0.4; transition: opacity 0.2s; }
.bendes-recs-prev:hover, .bendes-recs-next:hover { opacity: 0.9; }
.bendes-recs-prev { left: 4px; }
.bendes-recs-next { right: 4px; }
.bendes-recs-prev svg, .bendes-recs-next svg { display: block; }

/* Dots */
.bendes-recs-wrap .owl-dots { display: flex !important; gap: 3px; margin-top: 18px; }
.bendes-recs-wrap .owl-dot { flex: 1; padding: 8px 0 !important; background: none !important; border: none !important; cursor: pointer; display: block !important; }
.bendes-recs-wrap .owl-dot span { display: block !important; height: 2px !important; width: 100% !important; border-radius: 0 !important; background: #ddd !important; transition: background 0.3s; }
.bendes-recs-wrap .owl-dot.active span { background: #222 !important; }

/* Hide owl default nav completely */
.bendes-recs-wrap .owl-nav { display: none !important; }

/* Mobile fixes */
@media (max-width: 767px) {
  .bendes-recs-wrap { padding: 24px 0 30px; }
  .bendes-recs-title { font-size: 22px; margin-bottom: 20px; }
  .bendes-recs-prev, .bendes-recs-next { padding: 2px; }
  .bendes-recs-prev svg, .bendes-recs-next svg { width: 10px; height: 18px; }
  .bendes-recs-prev { left: 6px; }
  .bendes-recs-next { right: 6px; }
  .bendes-recs-wrap .owl-dots { margin-top: 10px; }
}

/* ===== Custom dark search bar ===== */
.bw-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #1a1a1a;
    border-radius: 16px 16px 0 0;
    position: relative;
}
.bw-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: rgba(255,255,255,0.06);
}
.bw-bar-back {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
    transition: all 0.15s;
}
.bw-bar-back:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.bw-bar-input-wrap { flex: 1; position: relative; }
.bw-bar-input {
    width: 100%;
    padding: 9px 38px 9px 16px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    background: rgba(255,255,255,0.06);
    color: #fff;
    transition: all 0.15s;
    box-sizing: border-box;
}
.bw-bar-input::placeholder { color: rgba(255,255,255,0.3); }
.bw-bar-input:focus { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); }
.bw-bar-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    transition: all 0.15s;
}
.bw-bar-clear:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* ===== WIZARD in dropdown ===== */
@keyframes bwIn { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }

/* Hide original OC search control — we use our own bw-bar */
.header-search__container .header__search-control { display:none !important; }

/* When wizard is active, nav-wrap gets dark bg + contained width */
.bw-wizard-active > .header__search-nav-wrap { max-height:none !important; background:#1a1a1a !important; }
.bw-wizard-active { max-width:640px !important; margin-left:auto !important; margin-right:auto !important; }



.bw-wrap { display:none; padding:24px 28px; overflow-y:auto; }
.bw-trail { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.bw-crumb { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.65); border-radius:100px; font-size:12px; animation:bwIn .2s ease; }
.bw-crumb-x { cursor:pointer; opacity:.4; font-size:12px; line-height:1; transition:opacity .12s; }
.bw-crumb-x:hover { opacity:1; }
.bw-step { animation:bwIn .3s ease; }
.bw-q { font-size:15px; font-weight:400; color:rgba(255,255,255,0.9); margin-bottom:14px; }
.bw-q em { font-style:normal; color:rgba(255,255,255,0.25); font-weight:300; font-size:12px; }
.bw-grid { display:grid; gap:8px; grid-template-columns:repeat(3,1fr); }
.bw-grid.bw-cols2 { grid-template-columns:repeat(2,1fr); }
.bw-grid.bw-occ-grid { grid-template-columns:repeat(3,1fr); }
.bw-grid.bw-price { grid-template-columns:repeat(3,1fr); }
.bw-pill { display:flex; align-items:center; justify-content:center; gap:7px; padding:13px 8px; border:1px solid rgba(255,255,255,0.1); border-radius:10px; font-size:13px; font-weight:400; color:rgba(255,255,255,0.55); cursor:pointer; background:rgba(255,255,255,0.03); font-family:inherit; transition:all .18s; text-align:center; line-height:1.3; min-height:46px; }
.bw-pill:hover { border-color:rgba(255,255,255,0.25); color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.06); }
.bw-occ { flex-direction:column; gap:5px; padding:16px 8px 12px; min-height:92px; border-radius:12px; }
.bw-ic { width:26px; height:26px; color:rgba(255,255,255,0.4); transition:all .15s; }
.bw-ic svg { width:100%; height:100%; }
.bw-occ:hover .bw-ic { color:rgba(255,255,255,0.75); }
.bw-ol { font-size:12.5px; font-weight:500; letter-spacing:.2px; }
.bw-os { font-size:10px; color:rgba(255,255,255,0.25); font-weight:300; line-height:1.3; }
.bw-hl { border-color:rgba(57,123,107,0.25); }
.bw-hl .bw-ic { color:#397B6B; opacity:.8; }
.bw-hl .bw-os { color:#397B6B; opacity:.5; }
.bw-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,0.12); }
.bw-pill-title { font-size:13px; font-weight:500; }
.bw-pill-sub { font-size:10px; opacity:.4; font-weight:300; }
.bw-cta { display:flex; align-items:center; gap:14px; margin-top:16px; padding:16px 20px; border:1.5px solid #397B6B; border-radius:12px; background:rgba(57,123,107,0.15); cursor:pointer; transition:all .2s; text-decoration:none; animation:bwIn .4s ease; }
.bw-cta:hover { background:rgba(57,123,107,0.25); border-color:#4a9484; }
.bw-cta-ic { width:30px; height:30px; color:#4a9484; flex-shrink:0; }
.bw-cta-ic svg { width:100%; height:100%; }
.bw-cta-txt { flex:1; }
.bw-cta-t { font-size:13px; font-weight:600; color:rgba(255,255,255,0.9); display:block; margin-bottom:3px; }
.bw-cta-s { font-size:11px; color:rgba(255,255,255,0.45); font-weight:300; display:block; }
.bw-cta-arr { color:#4a9484; font-size:18px; font-weight:500; }
.bw-reset { display:inline-block; font-size:10px; color:rgba(255,255,255,0.2); cursor:pointer; text-decoration:underline; text-underline-offset:3px; margin-top:12px; background:none; border:none; font-family:inherit; transition:color .15s; }
.bw-reset:hover { color:rgba(255,255,255,0.5); }

/* Desktop: wizard fills the nav-wrap */
@media (min-width: 768px) {
  .bw-wrap { min-height:380px; border-radius:0; }
}

/* Mobile wizard */
@media (max-width: 767px) {
  .bw-bar { border-radius: 0; padding: 10px 12px; gap: 8px; }
  .bw-bar-back { width: 32px; height: 32px; }
  .bw-bar-input { height: 36px; font-size: 14px; padding: 8px 36px 8px 14px; }
  .bw-wrap { padding:16px 14px; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; border-radius: 0; }
  .bw-grid { gap:6px; max-width:100%; }
  .bw-grid.bw-occ-grid { grid-template-columns:repeat(3,1fr); }
  .bw-grid.bw-price { grid-template-columns:repeat(2,1fr); }
  .bw-occ { min-height:78px; padding:12px 4px 10px; }
  .bw-ic { width:22px; height:22px; }
  .bw-ol { font-size:11px; }
  .bw-os { font-size:9px; }
  .bw-pill { font-size:12px; padding:10px 6px; min-height:40px; }
  .bw-q { font-size:14px; }
  .bw-cta { padding:14px 16px; gap:10px; max-width:100%; }
  .bw-cta-ic { width:26px; height:26px; }
  .bw-cta-t { font-size:12px; }
  .bw-cta-s { font-size:10px; }
}
@media (max-width: 374px) {
  .bw-grid.bw-occ-grid { grid-template-columns:repeat(2,1fr); }
  .bw-occ { min-height:64px; }
}