/* ── OCS Instant Search Modal ────────────────────────── */
body.ocs-is-open { overflow: hidden; }

.e-search-btn {cursor: pointer;}

#ocs-is-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--ocs-is-overlay-bg, rgba(0,0,0,.5));
    z-index: 99998;
    backdrop-filter: blur(2px);
}
#ocs-is-overlay.ocs-is-active { display: block; }

body.ocs-is-fullscreen #ocs-is-modal { width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; }

#ocs-is-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    background: var(--ocs-is-modal-bg, #fff);
    border-radius: var(--ocs-is-modal-radius, 12px);
    box-shadow: var(--ocs-is-modal-shadow, 0 20px 60px rgba(0,0,0,.25));
    overflow: hidden;
    flex-direction: column;

    /* Desktop: centered panel */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(var(--ocs-is-modal-width, 900px), 95vw);
    max-height: 85vh;
}
#ocs-is-modal.ocs-is-active { display: flex; }

#ocs-is-modal.ocs-is-active.ocs-is-mlayout-1 .ocs-is-left { 
    border-right: 0px;
}

/* Mobile: full screen */
@media (max-width: 640px) {
    #ocs-is-modal {
        top: 0; left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

.ocs-is-header {
    border-bottom: 1px solid var(--ocs-is-border, #e5e7eb);
    background: var(--ocs-is-header-bg, #F2F6F4);
    flex-shrink: 0;
    padding: 24px 32px 16px 32px;
}
.ocs-is-search-row {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1440px;
    margin: 0 auto;
}
.ocs-is-header-label {
    font-size: var(--ocs-is-header-label-size, 21px);
    font-weight: var(--ocs-is-header-label-weight, 600);
    color: var(--ocs-text-mt, #0A1A10);
    white-space: nowrap;
    flex-shrink: 0;
}
.ocs-is-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ocs-is-input-bg, #fff);
    border-radius: var(--ocs-is-input-radius, 100px);
    padding: 10px 16px;
    min-width: 0;
}
.ocs-is-search-icon { flex-shrink: 0; width: 17px; height: 17px; }
.ocs-is-input-wrap .ocs-is-input {
    flex: 1;
    border: none !important;
    background: transparent;
    font-size: var(--ocs-is-input-size, 16px);
    font-weight: var(--ocs-is-input-weight, 400);
    outline: none;
    color: var(--ocs-is-input-color, #717471);
    min-width: 0;
    padding: 0 0px !important;
}
.ocs-is-input-wrap .ocs-is-input:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.ocs-is-input-wrap .ocs-is-input::placeholder { color: var(--ocs-is-text-muted, #9ca3af); }
body button.ocs-is-clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    border-radius: 50% !important;
    background: var(--ocs-is-clear-bg, #c7c9cc) !important;
    color: #fff;
    text-transform: none !important;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}
body button.ocs-is-clear[hidden] { display: none; }
body button.ocs-is-clear:hover { background: var(--ocs-is-clear-bg-hover, #9ca3af) !important; }
.ocs-is-clear img { width: 10px; height: 10px; filter: brightness(0) invert(1); }
body button.ocs-is-close {
    background: none;
    border: none;
    font-size: var(--ocs-is-close-size, 20px);
    line-height: 1;
    cursor: pointer;
    color: var(--ocs-is-text-secondary, #6b7280);
    padding: 0 2px;
    flex-shrink: 0;
    transition: color .15s;
    padding: 13px;
}
.ocs-is-close:hover { color: var(--ocs-is-text-primary, #111); }
body button.ocs-is-close:is(:hover, :focus) { background: none; border: none; }

.ocs-is-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    /* +20px to offset .ocs-is-right's extra left padding without shrinking the grid */
    max-width: 1460px;
    min-width: 1460px;
    margin: 0 auto;
    padding: 18px 32px;
}

/* ── Left panel ── */
.ocs-is-left {
    width: var(--ocs-is-left-width, 350px);
    flex-shrink: 0;
    border-right: 1px solid var(--ocs-is-left-border, #eee);
    overflow-y: auto;
    padding: 22px 20px;
}

.ocs-is-left .ocs-is-section-title {
    text-transform: uppercase;
    font-size: var(--ocs-is-left-title-size, 12px);
    font-weight: var(--ocs-is-left-title-weight, 700);
    color: var(--ocs-is-left-title-color, #6A756C);
    margin-bottom: 3px;
}

@media (max-width: 1400px) {
    .ocs-is-body {
        min-width: 100%;
    }
}


@media (max-width: 1280px) {
    .ocs-is-left { width: 250px; }
}

@media (max-width: 768px) {
        .ocs-is-left { width: 200px; padding: 22px 0px 22px 10px; }
        .ocs-is-header-label {
            display: none;
        }
        .ocs-is-body {
            padding: 18px 16px;
        }
        .ocs-is-search-row {
            gap: 16px;
        }
        .ocs-is-header {
            padding: 24px 16px 16px 16px;
        }
}

@media (max-width: 640px) {
    #ocs-is-modal .ocs-is-body { flex-direction: column; }
    #ocs-is-modal .ocs-is-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 10px 6px;
        max-height: 200px;
        flex-shrink: 1;
    }
    #ocs-is-modal .ocs-is-right .ocs-is-section-title { font-size: 24px; }
}

.ocs-is-section { margin-bottom: 8px; }
.ocs-is-section[style*="none"] { display: none; }

.ocs-is-right .ocs-is-section-title {
    font-size: var(--ocs-is-right-title-size, 28px);
    font-weight: var(--ocs-is-right-title-weight, 700);
    color: var(--ocs-is-primary-color, #0A1A10);
    text-transform: none;
    letter-spacing: 0px;
    padding: 0px; 
}

.ocs-is-section-body {
    padding-left: 0px;
}

.ocs-is-sugg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9.6px 5px;
    cursor: pointer;
    font-size: var(--ocs-is-item-font-size, 14px);
    font-weight: var(--ocs-is-item-font-weight, 600);
    color: var(--ocs-is-item-color, #364239);
    transition: background .12s;
}
.ocs-is-sugg-item:hover { background: var(--ocs-is-hover-bg, #f5f5f5); }
.ocs-is-sugg-icon { flex-shrink: 0; width: 16px; height: 16px; opacity: .6; }

.ocs-is-section .ocs-is-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9.6px 5px;
    font-size: var(--ocs-is-item-font-size, 14px);
    font-weight: var(--ocs-is-item-font-weight, 600);
    color: var(--ocs-is-item-color, #364239);
    text-decoration: none;
    transition: background .12s;
}
.ocs-is-section .ocs-is-cat-item:hover, .ocs-is-section .ocs-is-cat-item:focus { background: var(--ocs-is-hover-bg, #f5f5f5); color: var(--ocs-is-item-color, #364239); }
.ocs-is-cat-icon { flex-shrink: 0; width: 16px; height: 16px; opacity: .6; }
.ocs-is-cat-label { flex: 1; }
.ocs-is-cat-count { font-size: var(--ocs-is-cat-count-size, 11px); color: var(--ocs-is-cat-count-color, #aaa); display: none; }

/* ── Right panel ── */
.ocs-is-right {
    flex: 1;
    overflow-y: auto;
    padding: 15px 0px 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    /* View all button moved to footer — not inside scroll area */
}
@media (max-width: 768px) { .ocs-is-right { padding: 15px 6px; } }

.ocs-is-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) { .ocs-is-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .ocs-is-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ocs-is-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ocs-is-products { grid-template-columns: repeat(1, 1fr); } }

.ocs-is-card {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    border-bottom: 1px solid var(--ocs-block-border, #D2D5D3);
    border-radius: var(--ocs-is-card-item-radius, 0px);
    overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}

.ocs-is-card-img {
    aspect-ratio: 1.55;
    background: transparent;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    padding: var(--ocs-is-card-img-padding, 6px 6px);
}

/* Image wrapper — mirrors .ocs-slides in the search-results card */
.ocs-is-slides {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: 0;
    overflow: hidden;
    background: var(--ocs-is-slides-bg, var(--ocs-card-img-bg, #ffffff00));
    padding: 0px 24px;
    border-radius: 0px;
}

.ocs-is-slides > img,
.ocs-is-slides > .ocs-is-slide,
.ocs-is-slides > .ocs-is-slide-main,
.ocs-is-slides > .ocs-is-slide-hover {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    height: 100%;
    object-fit: contain; /* contain for glasses — they have transparent backgrounds */
    display: block;
    padding: 0;
    box-sizing: border-box;
    max-height: 159px;
    min-height: 0;
    mix-blend-mode: multiply;
}
.ocs-is-card-img .ocs-is-card-no-img { grid-column: 1; grid-row: 1; width: 100%; height: 100%; background: var(--ocs-is-card-noimg-bg, #f0f0f0); }

.ocs-is-tags {
    grid-column: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 8px;
    padding: 0px;
    pointer-events: none;
    overflow-x: auto;
    /* Transparent thin scrollbar, revealed on hover (Firefox + Chromium 121+) */
    scrollbar-width: thin;
    cursor: auto;
    scrollbar-color: transparent transparent;
}
.ocs-is-tags:hover {
    scrollbar-color: #b1b1b1 transparent;
}

/* WebKit scrollbar — thin, transparent until hover (the standard
   scrollbar-color above is ignored by older WebKit builds) */
.ocs-is-tags::-webkit-scrollbar { height: 4px; }
.ocs-is-tags::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}
.ocs-is-tags:hover::-webkit-scrollbar-thumb {
    background: #b1b1b1;
}
.ocs-is-tags--top {
    grid-row: 1;
    align-items: start;
}
.ocs-is-tags--bot {
    grid-row: 3;
    align-items: end;
    /* Flip vertically so the horizontal scrollbar renders on top of the row;
       children are flipped back so their content reads normally. */
    transform: scaleY(-1);
}
.ocs-is-tags--bot > * { transform: scaleY(-1); }
.ocs-is-tag-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ocs-is-tag-group--left   { grid-column: 1; justify-content: flex-start; }
.ocs-is-tag-group--center { grid-column: 2; justify-content: center; }
.ocs-is-tag-group--right  { grid-column: 3; justify-content: flex-end; }
.ocs-is-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ocs-is-tag-size, 12px);
    font-weight: var(--ocs-is-tag-weight, 400);
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 10px;
    border-radius: var(--ocs-is-tag-radius, 30px);
    white-space: nowrap;
    line-height: 18px;
    pointer-events: auto;
}
.ocs-is-tag svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.ocs-is-card-info {
    padding: var(--ocs-is-card-info-padding, 8px 0px 8px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}
.ocs-is-card-primary {
    gap: 0px;
    font-size: var(--ocs-is-primary-size, 16px);
    font-weight: var(--ocs-is-primary-weight, 600);
    text-transform: none;
    color: var(--ocs-is-primary-color, #0A1A10);
}

.ocs-is-card-primary span {
    display: inline;
}

.ocs-is-card-primary span:not(:first-child) {
    padding-left: 4px;
}

.ocs-is-card-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-size: var(--ocs-is-secondary-size, 13px);
    font-weight: var(--ocs-is-secondary-weight, 500);
    color: var(--ocs-text);
}
.ocs-is-field-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ocs-is-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}
.ocs-is-card-price {
    font-size: var(--ocs-is-price-size, 16px);
    font-weight: var(--ocs-is-price-weight, 400);
    color: var(--ocs-is-price-color, #0A1A10);
}
.ocs-is-card-colours {
    font-size: var(--ocs-is-colours-size, 12px);
    color: var(--ocs-is-colours-color, #999);
    display: none;
}

.ocs-is-footer {
    flex-shrink: 0;
    border-top: 1px solid #fff;
    padding: 12px 16px;
    background: var(--ocs-is-footer-bg, #fff);
}
@media (max-width: 768px) { .ocs-is-footer { padding: 6px 0px; } }
.ocs-is-view-all {
    display: block;
    text-align: center;
    padding: 12px;
    background: var(--ocs-is-viewall-bg, #118745);
    color: var(--ocs-is-viewall-color, #fff) !important;
    border-radius: var(--ocs-is-viewall-radius, 6px);
    text-decoration: none !important;
    font-size: var(--ocs-is-view-all-size, 14px);
    font-weight: var(--ocs-is-view-all-weight, 600);
    letter-spacing: 0;
    transition: background .15s;
    cursor: pointer;
}
.ocs-is-view-all:hover { background: var(--ocs-is-view-all-hover-bg, #136a39); }

.ocs-is-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--ocs-is-no-results-color, #888);
    font-size: var(--ocs-is-no-results-size, 14px);
}
.ocs-is-no-results-msg {
    grid-column: 1 / -1;
    padding: 10px 0 16px;
    color: var(--ocs-is-no-results-msg-color, #555);
    font-size: var(--ocs-is-no-results-msg-size, 13px);
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}
.ocs-is-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 20px;
    color: var(--ocs-is-empty-color, #aaa);
    font-size: var(--ocs-is-empty-size, 13px);
    font-style: italic;
}

/* Loading spinner */
.ocs-is-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.8);
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.ocs-is-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ocs-is-spinner-border, #eee);
    border-top-color: var(--ocs-is-spinner-top-color, #333);
    border-radius: 50%;
    animation: ocs-spin .7s linear infinite;
}
@keyframes ocs-spin { to { transform: rotate(360deg); } }

/* Sale price in instant search cards */
.ocs-is-price-sale { display: inline-flex; align-items: center; gap: 5px; }
.ocs-is-price-regular { text-decoration: line-through; font-size: var(--ocs-is-price-regular-size, 14px); font-weight: var(--ocs-is-price-regular-weight, 400); color: var(--ocs-is-price-regular-color, #6A756C); }

/* ── IS Hover mode ── */
.ocs-is-hover-mode .ocs-is-slide-main,
.ocs-is-hover-mode .ocs-is-slide-hover {
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
    transition: opacity 0.25s ease;
}
.ocs-is-hover-mode .ocs-is-slide-main  { opacity: 1; }
.ocs-is-hover-mode .ocs-is-slide-hover { opacity: 0; }
.ocs-is-hover-mode:hover .ocs-is-slide-main  { opacity: 0; }
.ocs-is-hover-mode:hover .ocs-is-slide-hover { opacity: 1; }
@media (pointer: coarse) {
    .ocs-is-hover-mode:hover .ocs-is-slide-main  { opacity: 1; }
    .ocs-is-hover-mode:hover .ocs-is-slide-hover { opacity: 0; }
}

/* ── IS Scroll mode ── */
.ocs-is-scroll-mode .ocs-is-slide {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
    cursor: pointer;
}