/* Country select2 matched to the plain text inputs on forms */
.select2-container--default .select2-selection--single{height:48px;border:1px solid #e0e0e0;border-radius:3px;}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:46px;padding-left:15px;color:#333;font-size:14px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;}
.select2-container--default .select2-results__option{font-size:14px;}
.select2-dropdown{border-color:#e0e0e0;}
.select2-container{width:100% !important;}
.block2-txt-child2{display:flex;flex-direction:column;align-items:center;gap:10px;width:30px;}
.buy-combo{display:inline-flex;align-items:stretch;height:45px;}
.buy-combo-main{background:#222;color:#fff;border:none;padding:0 34px;text-transform:uppercase;letter-spacing:2px;font-size:13px;cursor:pointer;transition:background .3s;}
.buy-combo-main:hover{background:#111;}
.buy-combo-main:disabled{background:#c9c9c9;cursor:not-allowed;border:1px solid #111;border-right:none;box-sizing:border-box;}
.buy-combo-wish{width:54px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#fff;color:#111;border:1px solid #111;text-decoration:none;transition:background .2s;}
.buy-combo-wish:hover{background:#f7f7f7;}
.buy-combo-wish i{font-size:18px;line-height:1;}
@media (max-width:767px){.buy-combo{width:100%;}.buy-combo-main{flex:1;}}

/* Touch screens have no hover: the theme parks .block2-btn at bottom:-50px and
   slides it up on :hover, so the first tap made the button leap out from under
   the photo. Pin it in place instead — keyed on the pointer, not the width, so
   a phone held sideways behaves like a phone. */
@media (hover: none) {
    .block2-pic .block2-btn,
    .block2-pic:hover .block2-btn { bottom: 14px; }

    /* Same reason: the photo zoomed to 1.1 on tap and stayed there. */
    .hov-img0:hover img { transform: none; }
}
.cart-icon-b2,.block2-txt-child2 .js-wishlist-toggle{font-size:18px;color:#b0b0b0;}
.cart-icon-b2:hover,.block2-txt-child2 .js-wishlist-toggle:hover,.block2-txt-child2 .js-wishlist-toggle:focus,.block2-txt-child2 .js-wishlist-toggle:visited,.block2-txt-child2 .js-wishlist-toggle.active{color:#222;}
/* Wishlist / cart icon links are <a> tags: pin every state so the browser's
   default blue (visited/focus/tap-highlight) never bleeds onto the icon. */
.js-wishlist-toggle,.cart-icon-b2{-webkit-tap-highlight-color:transparent;}
.buy-combo-wish,.buy-combo-wish:link,.buy-combo-wish:visited,.buy-combo-wish:focus,.buy-combo-wish:active{color:#111;}
.buy-combo-wish i,.js-wishlist-toggle i,.cart-icon-b2 i{color:inherit;}
.pd-wish,.pd-wish:link,.pd-wish:visited,.pd-wish:focus,.pd-wish:active{color:#111;}
.wrap-header-cart .header-cart{display:flex;flex-direction:column;max-height:100vh;}
.wrap-header-cart .header-cart-content{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
@media (max-width:400px){
    .wrap-header-cart .header-cart{width:100vw !important;padding-left:22px !important;padding-right:22px !important;}
    .header-cart-item-img img{width:56px !important;height:56px !important;}
}

/* Native form controls (checkbox/radio/range) — black instead of browser blue */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: #222222; }
input:focus, textarea:focus, select:focus { outline-color: #222222; }
::selection { background: #222222; color: #fff; }

/* Neutralize Bootstrap's default blue on the storefront */
a:not([class]) { color: #222222; }
a:not([class]):hover { color: #000; }
.btn-primary { background-color: #222222; border-color: #222222; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #111111; border-color: #111111; box-shadow: none; }
.btn-outline-primary { color: #222222; border-color: #222222; }
.btn-outline-primary:hover { background-color: #222222; border-color: #222222; color: #fff; }
.form-control:focus, .custom-select:focus { border-color: #222222; box-shadow: 0 0 0 .2rem rgba(0,0,0,.12); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: #222222; border-color: #222222; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(0,0,0,.15); }
.page-item.active .page-link { background-color: #222222; border-color: #222222; }
.page-link { color: #222222; }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(0,0,0,.15); }
.text-primary { color: #222222 !important; }
.bg-primary { background-color: #222222 !important; }
a.text-primary:hover { color: #000 !important; }

/* ===== Dark sections (footer, topbar): keep buttons/hovers visible on black ===== */
/* Newsletter SUBSCRIBE button — white on the dark footer, dark on hover */
.subscribe-form button.bg1 { background: #fff !important; color: #222 !important; border: none !important; }
.subscribe-form button.bg1:hover { background: #111 !important; color: #fff !important; }
/* Scroll-to-top — visible on any background */
/* Круглая кнопка «наверх», видна всегда и стоит в одном столбике с чатом. */
.btn-back-to-top {
    display: flex !important;
    width: 52px !important; height: 52px !important;
    right: 40px !important; bottom: 24px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
    opacity: 1 !important;
    transition: transform .2s, background .2s;
}
.symbol-btn-back-to-top { color: #222 !important; font-size: 22px; }
.btn-back-to-top:hover { background: #222 !important; transform: translateY(-2px); }
.btn-back-to-top:hover .symbol-btn-back-to-top { color: #fff !important; }
@media (max-width: 767px) {
    .btn-back-to-top { width: 48px !important; height: 48px !important; right: 16px !important; bottom: 16px !important; }
    .symbol-btn-back-to-top { font-size: 20px; }
}
/* Link/text hovers on dark backgrounds must stay light, not turn #222 (invisible) */
footer a:hover, footer .hov-cl1:hover,
.top-bar a:hover, .top-bar .hov-cl1:hover, .top-bar .topbar-dropdown-toggle:hover { color: #fff !important; }

/* Product card text (name + price) — black */
.block2-txt-child1 a, .block2-txt-child1 .js-name-b2 { color: #222 !important; }
.block2-txt-child1 .stext-105 { color: #222 !important; }
/* Stock badges + approximate price on cards */
.badge-stock { position:absolute; top:14px; left:14px; z-index:3; font-size:11px; letter-spacing:.5px;
    line-height:22px; height:22px; padding:0 10px; text-transform:uppercase; border-radius:11px; }
.badge-soldout { background:#222; color:#fff; }
.badge-low { background:#fff; color:#222; border:1px solid #222; }
.approx-price { display:block; font-size:12px; color:#999; margin-top:3px; }

/* Side-cart buttons: black primary + grey/white secondary (no blue) */
.mc-btn-primary { background: #222 !important; color: #fff !important; border: 1px solid #222 !important; }
.mc-btn-primary:hover { background: #000 !important; color: #fff !important; }
.mc-btn-secondary { background: #fff !important; color: #222 !important; border: 1px solid #bbb !important; }
.mc-btn-secondary:hover { background: #efefef !important; color: #111 !important; border-color: #222 !important; }

/* ===== Hero page: transparent nav bar over the video (topbar stays dark) ===== */
.hero-page .container-menu-desktop { height: 40px; }   /* only topbar reserves flow space */
.hero-page .wrap-menu-desktop {
    background: transparent !important;
    box-shadow: none !important;
}
.hero-page .wrap-menu-desktop .logo,
.hero-page .wrap-menu-desktop .main-menu > li > a,
.hero-page .wrap-menu-desktop .icon-header-item { color: #fff !important; }
.hero-page .wrap-menu-desktop .main-menu > li > a:hover,
.hero-page .wrap-menu-desktop .icon-header-item:hover { color: #d8dcff !important; }
/* When scrolled (sticky) → solid white nav with dark text */
.hero-page .fix-menu-desktop .wrap-menu-desktop {
    background: #fff !important;
    box-shadow: 0 0px 3px 0px rgba(0,0,0,0.2) !important;
}
.hero-page .fix-menu-desktop .wrap-menu-desktop .logo,
.hero-page .fix-menu-desktop .wrap-menu-desktop .main-menu > li > a,
.hero-page .fix-menu-desktop .wrap-menu-desktop .icon-header-item { color: #333 !important; }

/* Logo image swaps between white (over hero) and black (default / scrolled).
   The <img> can't inherit `color`, so we toggle two variants by visibility. */
.hdr-logo-white { display: none; }
.hero-page .wrap-menu-desktop .hdr-logo-black { display: none; }
.hero-page .wrap-menu-desktop .hdr-logo-white { display: inline-block; }
.hero-page .fix-menu-desktop .wrap-menu-desktop .hdr-logo-black { display: inline-block; }
.hero-page .fix-menu-desktop .wrap-menu-desktop .hdr-logo-white { display: none; }

/* The Cozastore theme absolutely-positions the mobile logo img with a
   `max-width: calc(100% - 20px)`. With position:absolute the .logo-mobile
   container collapses to 0 width, so max-width goes negative and the logo
   disappears. Keep it in normal flow and let the inline height/width size it. */
.logo-mobile img {
    position: static !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
}

/* Hero video section */
.hero-video-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}
.hero-video-wrap video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    object-fit: cover;
}
/* Vertical mobile cut: fill the portrait viewport, no extra scaling */
@media (max-width: 768px) {
    .hero-video-wrap video.is-portrait {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        min-width: 0; min-height: 0;
        transform: none;
        object-fit: cover;
    }
}
.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    z-index: 2;
    /* The transparent nav overlaps the top of the hero, so nudge the centered
       block down to sit at the optical centre of the visible area. */
    padding-top: 90px;
}
.hero-video-overlay .hero-sub {
    font-size: 14px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: .85;
}
.hero-video-overlay h1 {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 3px;
    text-indent: 3px;              /* compensate trailing letter-spacing → optical center */
    text-transform: uppercase;
    margin-bottom: 32px;
    line-height: 1.1;
}
.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 44px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 13px;
    letter-spacing: 3px;
    text-indent: 3px;              /* offset the trailing letter-spacing so text sits centered */
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s, color .3s;
}
.btn-hero:hover { background: #fff; color: #333; text-decoration: none; }

/* Toasts */
#kaysin-toasts {
    position: fixed; top: 24px; right: 24px; z-index: 99999;
    display: flex; flex-direction: column; gap: 12px; max-width: 360px; width: calc(100% - 48px);
    pointer-events: none;
}
@media (min-width: 576px) { #kaysin-toasts { width: 360px; } }
.k-toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 12px;
    background: #fff; color: #2b2b2b; border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(16,24,40,.16); border: 1px solid #eef0f2;
    border-left: 4px solid #222222; font-size: 14px; line-height: 1.45;
    transform: translateX(120%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.k-toast.show { transform: translateX(0); opacity: 1; }
.k-toast.hide { transform: translateX(120%); opacity: 0; }
.k-toast .k-ic {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; margin-top: 1px;
}
.k-toast .k-msg { flex: 1 1 auto; padding-top: 2px; }
.k-toast .k-x { flex: 0 0 auto; cursor: pointer; color: #b5bbc4; font-size: 17px; line-height: 1; padding: 2px 2px 0; transition: color .2s; }
.k-toast .k-x:hover { color: #555; }
/* Monotone toasts — same dark accent for every type; the icon (✓ / ✕ / i) conveys meaning */
.k-toast.k-success, .k-toast.k-error, .k-toast.k-info { border-left-color: #222222; }
.k-toast.k-success .k-ic, .k-toast.k-error .k-ic, .k-toast.k-info .k-ic { background: #222222; }

/* Hide cart count badge when empty */
.icon-header-noti[data-notify="0"]::after,
.icon-header-noti[data-notify=""]::after { display: none; }

/* Top bar — active state for lang/currency links */
.right-top-bar a.active { color: #111111; }
.right-top-bar form button.topbar-logout {
    background: none;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.3);
    color: #b2b2b2;
    font-family: Poppins-Regular;
    font-size: 12px;
    height: 100%;
    padding: 0 25px;
    cursor: pointer;
}
.right-top-bar form button.topbar-logout:hover { color: #111111; }

@media (min-width: 992px) {
    .topbar-wide { padding-left: 30px; padding-right: 0; }
    .topbar-wide .right-top-bar { margin-right: 0; }

    .menu-wide { width: 100%; max-width: 100%; padding-left: 30px; padding-right: 30px; }
    .menu-wide .wrap-icon-header .icon-header-item:last-child { padding-right: 0; }
}

/* Top bar dropdowns (language / currency) */
.topbar-dropdown {
    position: relative;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,0.3);
}
.topbar-dropdown:first-child {
    border-left: 1px solid rgba(255,255,255,0.3);
}
.topbar-dropdown-toggle {
    font-family: Poppins-Regular;
    font-size: 12px;
    color: #b2b2b2;
    height: 100%;
    padding: 0 25px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: color .3s;
    user-select: none;
}
.topbar-dropdown-toggle:hover { color: #111111; }
.topbar-dropdown-toggle i {
    font-size: 12px;
    transition: transform .3s;
}
.topbar-dropdown.open .topbar-dropdown-toggle i { transform: rotate(180deg); }
.topbar-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s, visibility .25s;
    z-index: 1200;
}
.topbar-dropdown.open .topbar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.topbar-dropdown-menu li { display: block; }
.topbar-dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 18px;
    font-family: Poppins-Regular;
    font-size: 13px;
    color: #555;
    border: none;
    transition: background .2s, color .2s;
}
.topbar-dropdown-menu a:hover { background: #f6f6f6; color: #111111; }
.topbar-dropdown-menu a.active { color: #111111; font-weight: 600; }
.topbar-dropdown-menu a.active::after {
    content: '\2713';
    font-size: 12px;
}

/* Mobile menu language / currency switchers */
.m-switch-wrap { padding: 18px 25px 6px; border-top: 1px solid #eee; margin-top: 12px; }
.m-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.m-switch-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #999; }
.m-switch-pills { display: flex; gap: 8px; }
.m-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 32px; padding: 0 12px;
    border: 1px solid #e0e0e0; border-radius: 16px; font-size: 13px; font-weight: 600; color: #555; text-decoration: none; transition: all .2s; }
.m-pill:hover { border-color: #222222; color: #222222; }
.m-pill.active { background: #222; border-color: #222; color: #fff; }
/* Rich-text content from CKEditor */
.ck-content h3 { font-size: 18px; font-weight: 600; color: #333; margin: 26px 0 12px; }
.ck-content p { margin-bottom: 14px; line-height: 1.7; }
.ck-content ul, .ck-content ol { padding-left: 22px; line-height: 1.9; margin-bottom: 14px; }
.ck-content a { color: #222222; }

.mobile-langcurr { display:none; background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:12px 18px; }
.mobile-langcurr.open { display:block; }
.mlc-row { display:flex; align-items:center; gap:12px; padding:7px 0; }
.mlc-label { font-size:12px; color:#888; min-width:70px; text-transform:uppercase; letter-spacing:.5px; }
.mlc-pills { display:flex; gap:8px; flex-wrap:wrap; }
.mlc-pill { padding:6px 14px; border:1px solid #ddd; border-radius:16px; font-size:13px; color:#222; text-decoration:none; }
.mlc-pill.active { background:#222; color:#fff; border-color:#222; }
.mlc-account { border-top:1px solid #eee; margin-top:4px; padding-top:12px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color:#222 !important; }
@media (min-width: 992px) { .mobile-langcurr { display:none !important; } }

/* ===== Mobile gallery: swipeable strip with a progress line =====
   Applies to the product page and the quick-view modal alike; both render the
   same .wrap-slick3 markup. Desktop is deliberately left untouched. */
@media (max-width: 767px) {
    .wrap-slick3 { flex-direction: column; }
    .wrap-slick3 .slick3 { width: 100%; order: 1; }
    .wrap-slick3-arrows { display: none !important; }

    /* One fixed frame for every photo: portrait, landscape or square all get
       the same box and sit centred inside it, so the layout never jumps
       between slides. */
    .wrap-slick3 .item-slick3 .wrap-pic-w {
        aspect-ratio: 3 / 4;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .wrap-slick3 .item-slick3 img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
    }

    /* Thumbnails become segments of a progress line — one per photo.
       The script wraps the dots in .gal-thumbs for the desktop column, so the
       ordering has to sit on the wrapper, not on the list itself. */
    .gal-thumbs,
    .wrap-slick3-dots {
        width: 100%;
        order: 2;
        margin: 12px 0 0;
        padding: 0;
    }
    .gal-thumbs .wrap-slick3-dots { margin: 0; }
    .slick3-dots {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #e2e2e2;
        border-radius: 1px;
        overflow: hidden;
    }
    .slick3-dots li {
        flex: 1 1 0;
        width: auto !important;
        height: 2px;
        margin: 0;
        padding: 0;
        background: transparent;
        overflow: hidden;
        transition: background .3s ease;
    }
    .slick3-dots li img,
    .slick3-dots li .slick3-dot-overlay { display: none !important; }
    .slick3-dots li.slick-active { background: #111111; }
}

/* Product cards on mobile: same fixed frame as the gallery, so a landscape or
   square photo no longer crops to a portrait crop of itself. */
@media (max-width: 767px) {
    .block2 .block2-pic {
        aspect-ratio: 3 / 4;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .block2 .block2-pic img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
    }
}


/* ===== Desktop gallery: fixed-height thumbnail column =====
   The theme stacks thumbnails vertically but lets the column grow with the
   photo count, so a product with many shots stretched the whole block. Taking
   the column out of flow pins it to the height of the main image; anything
   past that scrolls. */
@media (min-width: 768px) {
    /* Wider thumbnails, slightly narrower main shot. At 3:4 roughly 3.7
       thumbnails fit the height of the main photo, so a product with five
       images already scrolls instead of squeezing everything in. */
    .wrap-slick3 .slick3 {
        width: 74%;
        margin-left: auto;
    }

    /* One frame for every shot, photo fitted inside and centred — portrait,
       landscape and square all keep the same block and nothing is cropped. */
    .wrap-slick3 .item-slick3 .wrap-pic-w {
        aspect-ratio: 3 / 4;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .wrap-slick3 .item-slick3 img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
    }

    /* Thumbnails follow the same rule, so the strip stays a tidy column. */
    .slick3-dots li img {
        aspect-ratio: 3 / 4;
        object-fit: contain;
        background: #ffffff;
    }

    /* The theme's grey ‹ › boxes over the photo — navigation is the thumbnail
       column now, same as Farfetch. */
    .wrap-slick3-arrows { display: none !important; }

    .gal-thumbs {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 20%;
    }

    .gal-thumbs .wrap-slick3-dots {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        padding: 2px;
    }
    .wrap-slick3-dots::-webkit-scrollbar { width: 0; height: 0; }

    /* Soft top and bottom edges. A mask fades the thumbnails themselves, so
       nothing is painted over them and the page background stays visible. */
    .gal-thumbs.is-scrollable .wrap-slick3-dots {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    }
    .gal-thumbs.at-start .wrap-slick3-dots {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    }
    .gal-thumbs.at-end .wrap-slick3-dots {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
        mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
    }
    .gal-thumbs.at-start.at-end .wrap-slick3-dots {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .slick3-dots li { margin-bottom: 10px; }
    .slick3-dots li:last-child { margin-bottom: 0; }
    .slick3-dots li img { display: block; }

    .slick3-dot-overlay { border-width: 1px; }
    .slick3-dot-overlay:hover { border-color: #bbbbbb; }
    .slick3-dots .slick-active .slick3-dot-overlay {
        border-color: #111111;
        border-width: 2px;
    }

    /* Step buttons: present but quiet — semi-transparent until hovered. */
    .gal-thumb-btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        width: 30px;
        height: 30px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(17, 17, 17, .55);
        color: #fff;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        transition: background .2s, opacity .2s;
    }
    .gal-thumbs.is-scrollable .gal-thumb-btn { display: flex; }
    .gal-thumb-btn:hover { background: #111111; }
    .gal-thumb-btn[disabled] { opacity: 0; pointer-events: none; }
    .gal-thumb-btn.up { top: 8px; }
    .gal-thumb-btn.down { bottom: 8px; }
}

@media (max-width: 767px) {
    .gal-thumb-btn { display: none !important; }
}

/* ===== Fullscreen gallery ===== */
.wrap-slick3 .item-slick3 img { cursor: zoom-in; }

.k-lb {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: #ffffff;
    display: none;
    flex-direction: column;
}
.k-lb.open { display: flex; }

.k-lb-track {
    flex: 1 1 auto;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.k-lb-track::-webkit-scrollbar { width: 0; height: 0; }

.k-lb-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px 64px;
    box-sizing: border-box;
}
.k-lb-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.k-lb-close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 17, 17, .08);
    color: #111111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.k-lb-close:hover { background: rgba(17, 17, 17, .16); }

.k-lb-count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    color: #888888;
    pointer-events: none;
}

.k-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 17, 17, .08);
    color: #111111;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, opacity .2s;
}
.k-lb-nav:hover { background: rgba(17, 17, 17, .16); }
.k-lb-nav[disabled] { opacity: 0; pointer-events: none; }
.k-lb-nav.prev { left: 18px; }
.k-lb-nav.next { right: 18px; }

/* Touch devices swipe instead — the arrows would cover the photo. */
@media (hover: none) {
    .k-lb-nav { display: none; }
    .k-lb-slide { padding: 52px 0 56px; }
}

body.k-lb-open { overflow: hidden; }

/* Product cards on desktop. The width/height attributes on the <img> become
   presentational CSS, and that height overrides aspect-ratio — height:auto
   hands the sizing back to the ratio. Unscoped so the wishlist grid, which has
   no #catalog wrapper, is framed like the rest. */
@media (min-width: 768px) {
    .block2 .block2-pic img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        display: block;
    }
}

/* ===== Buttons survive an enlarged font =====
   The theme gives buttons a fixed height with only a min-width, so when the
   reader bumps up the font size the label wraps to a second line and spills
   out of the box. Let the label stay on one line and let the button grow
   instead of the text breaking. */
.block2-btn,
.add-cart-btn,
.buy-combo-main,
.buy-combo-wish,
.btn-hero,
.about-strip-btn,
.pd-wish,
.js-show-filter,
.js-show-search,
.mc-btn-primary,
.mc-btn-secondary,
.subscribe-form button {
    white-space: nowrap;
    height: auto;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.25;
}

.add-cart-btn,
.buy-combo,
.buy-combo-main,
.buy-combo-wish { min-height: 45px; }

.btn-hero,
.about-strip-btn { min-height: 46px; }

/* Wrapping is fine on the narrowest phones — running off the screen is not. */
@media (max-width: 400px) {
    .block2-btn,
    .add-cart-btn,
    .buy-combo-main {
        white-space: normal;
        max-width: 100%;
    }
}

/* ===== Buy row: stepper and the add-to-cart button stay on one line =====
   The combo has a natural width of its own, so a longer label (Azerbaijani
   "ÇANTAYA ƏLAVƏ ET" is half again as wide as "ADD TO BAG") pushed it past the
   free space and the flex row wrapped it underneath. min-width:0 lets it
   shrink below its content width instead of breaking the row. */
@media (max-width: 1199px) {
    .wrap-num-product { margin-right: 10px !important; }

    .buy-combo {
        flex: 1 1 auto;
        min-width: 0;
    }
    .buy-combo-main {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 12px;
        letter-spacing: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Portrait phones keep the stacked layout — there the row is genuinely
   too narrow for both, and squeezing would leave an unreadable label. */
@media (max-width: 575px) {
    .wrap-num-product { margin-right: 0 !important; width: 100%; }
    .buy-combo { flex: 0 0 100%; }
    .buy-combo-main { letter-spacing: 2px; padding: 0 20px; }
}

/* COLOR | SIZE row — shared between the product page and the quick-view
   modal, so both read the same. */
.pd-params { display: flex; align-items: flex-start; gap: 40px; }
.pd-param-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.pd-param-value { font-size: 15px; color: #222; font-weight: 500; }
.pd-param-sep { width: 1px; align-self: stretch; background: #e6e6e6; }
.pd-color-swatch { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }

/* Quick-view modal — wider, so the COLOR | SIZE row and gallery both breathe. */
.wrap-modal1 .container { max-width: 1140px; }

/* Divider lines inside the quick-view, matching the product page's .pd-sep.
   The "View details" button itself is styled by #qv-detail in home.css /
   home-catalog.css, where the id selector wins over any class. */
.qv-sep { border: none; border-top: 1px solid #eaeaea; margin: 22px 0; }

/* Attribute rows: label column on the left, values on the right, split by a
   continuous vertical divider (like COLOR | SIZE, but stacked rows). */
.qv-attrs-grid { display: grid; grid-template-columns: 96px 1fr; align-items: stretch; }
.qv-attrs-grid .qv-attr-k { display: flex; align-items: center; padding: 8px 22px 8px 0; font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.qv-attrs-grid .qv-attr-v { display: flex; align-items: center; padding: 8px 0 8px 22px; border-left: 1px solid #e6e6e6; font-size: 14px; color: #333; }

/* COLOR | SIZE keeps its label-on-top look, but shares the 96px left column
   and the 22px value inset so its divider and value line up with the block
   above/below. */
.qv-cs { display: grid; grid-template-columns: 96px 1fr; align-items: start; }
.qv-cs-color { justify-self: start; display: flex; flex-direction: column; align-items: center; }
.qv-cs-size { border-left: 1px solid #e6e6e6; padding-left: 22px; }

/* Sold-out sits in place of the buy button (inside .buy-combo), stretching
   to the same height as a clear red badge. Shared by the product page and
   the quick-view modal. */
.sold-out-badge { display: flex; align-items: center; justify-content: center; padding: 0 34px; background: #fbecec; color: #c0392b; border: 1px solid #eccfcf; border-right: none; box-sizing: border-box; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }