/* ==========================================================================
   Modern storefront layer: brand mark, hero slider, product cards, sections.
   Loads after identity.css and reuses its design tokens.
   ========================================================================== */

:root {
    --ja-accent: #1455ac;
    --ja-accent-dark: #0f4088;
    --ja-sale: #e11d48;
    --ja-star: #f59e0b;
    --ja-shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
    --ja-shadow-md: 0 6px 24px rgba(17, 24, 39, .08);
    --ja-shadow-lg: 0 16px 40px rgba(17, 24, 39, .12);
    --ja-ease: cubic-bezier(.4, 0, .2, 1);
}

/* identity.css forces every .fi to the regular face, which breaks solid icons. */
[class^="fi-sr-"],
[class*=" fi-sr-"] {
    font-family: "uicons-solid-rounded" !important;
}

/* --------------------------------------------------------------------------
   Category glyphs (used when a category has no uploaded icon)
   -------------------------------------------------------------------------- */

.ja-cat-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ja-cat-size, 20px);
    height: var(--ja-cat-size, 20px);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(20, 85, 172, .12), rgba(20, 85, 172, .04));
    color: var(--ja-accent);
}

.ja-cat-glyph i {
    font-size: calc(var(--ja-cat-size, 20px) * .48);
    line-height: 1;
}

.__cate-item .__img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.__cate-item .ja-cat-glyph {
    width: 80px;
    height: 80px;
    transition: transform .25s var(--ja-ease), background-color .25s var(--ja-ease);
}

.__cate-item a:hover .ja-cat-glyph {
    transform: translateY(-3px);
    background: linear-gradient(145deg, rgba(20, 85, 172, .2), rgba(20, 85, 172, .08));
}

/* --------------------------------------------------------------------------
   Mega menu: the first panel renders with .is-active, which restores
   visibility and pointer events inside the still-closed wrapper. That turns the
   whole invisible strip under the navbar into a hover target, so the menu opens
   from anywhere. Gate all interaction on the wrapper's own .show state.
   -------------------------------------------------------------------------- */

.ja-header .megamenu-wrap {
    pointer-events: none;
}

.ja-header .megamenu-wrap.show {
    pointer-events: auto;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Overrides `.megamenu-wrap:hover` in style.css, which reveals the panel
   without the toggle link ever being hovered. */
.ja-header .megamenu-wrap:not(.show),
.ja-header .megamenu-wrap:not(.show):hover {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* identity.css sets `.mega_menu.is-active { visibility:visible; pointer-events:auto }`.
   A child with pointer-events:auto still receives clicks even when the parent
   has pointer-events:none, so the first (always-active) panel becomes an
   invisible overlay that blocks typing on login/register and the rest of the
   page. Only block pointer events while closed — leave visibility to the wrap
   itself so opening .show restores the active panel correctly. */
.ja-header .megamenu-wrap:not(.show) *,
.ja-header .megamenu-wrap:not(.show) .mega_menu,
.ja-header .megamenu-wrap:not(.show) .mega_menu.is-active {
    pointer-events: none !important;
}

.ja-header .megamenu-wrap.show .mega_menu.is-active {
    pointer-events: auto !important;
    visibility: visible !important;
}

/* --------------------------------------------------------------------------
   Brand mark in the navbar
   -------------------------------------------------------------------------- */

.ja-header .ja-brand {
    order: 1;
    margin: 0 !important;
    padding: 0;
    text-decoration: none;
}

.ja-header .ja-brand-mark {
    height: 34px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.ja-header .ja-brand-text {
    line-height: 1.1;
    min-width: 0;
}

.ja-header .ja-brand-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--id-text);
    white-space: nowrap;
    letter-spacing: 0;
}

.ja-header .ja-brand-tagline {
    font-size: 11px;
    font-weight: 500;
    color: var(--id-text-muted);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ja-header .ja-brand-mark {
        height: 28px;
    }

    .ja-header .ja-brand-name {
        font-size: 15px;
    }
}

/* --------------------------------------------------------------------------
   Mobile navbar: identity.css pins the row to nowrap at every width, which
   pushes the toggler and brand past the viewport and scrolls the whole page.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* min-width:max-content on the topbar items stops the container from ever
       shrinking, which stretches the whole document past the viewport. */
    .ja-header .topbar .container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 16px;
    }

    .ja-header .topbar .container > div,
    .ja-header .topbar .topbar-text,
    .ja-header .topbar .dropdown,
    .ja-header .__language-bar {
        min-width: 0;
    }

    .ja-header .topbar,
    .ja-header .topbar a,
    .ja-header .topbar button,
    .ja-header .topbar-link {
        font-size: 12px;
    }

    .ja-header .ja-nav-container {
        flex-wrap: wrap !important;
        gap: 10px;
    }

    .ja-header .navbar-toggler {
        order: 0;
        flex-shrink: 0;
    }

    .ja-header .ja-brand {
        order: 1;
        min-width: 0;
        margin-inline-end: auto !important;
    }

    .ja-header .ja-brand-text {
        min-width: 0;
        overflow: hidden;
    }

    .ja-header .ja-brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ja-header .navbar-toolbar {
        order: 2;
        flex-shrink: 0;
        margin-inline-start: 0 !important;
    }

    .ja-header .search-form-mobile {
        order: 5;
    }
}

/* Nothing in the storefront should widen the document sideways. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Always-on desktop search bar (upstream keeps it behind a toggle icon)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .ja-header .ja-nav-container {
        gap: 16px;
    }

    .ja-header .ja-nav-links {
        flex: 0 1 auto !important;
        flex-grow: 0 !important;
    }

    .ja-header .search-form-mobile {
        position: relative;
        inset: auto;
        display: block;
        order: 3;
        flex: 1 1 240px;
        min-width: 180px;
        max-width: 460px;
        width: auto;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: 1;
    }

    .ja-header .navbar-toolbar {
        order: 4;
    }

    .ja-header .open-search-form-mobile {
        display: none !important;
    }

    .ja-header .search_form {
        position: relative;
    }

    .ja-header .search-bar-input {
        width: 100%;
    }

    /* custom.css pins this button with [dir] rules, so it is reset back to a
       plain flex item sitting next to the input. */
    [dir] .ja-header .navbar form .search_button {
        position: static;
        inset: auto;
        flex-shrink: 0;
        padding: 0;
        border: 0;
        border-radius: var(--id-radius-sm) !important;
        background: transparent !important;
    }

    .ja-header .search_button .input-group-text {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: var(--id-radius-sm);
        background: var(--ja-accent);
    }

    .ja-header .search_button .input-group-text i,
    .ja-header .search_button .input-group-text i.text-white {
        color: #fff !important;
        font-size: 16px;
        line-height: 1;
    }

    .ja-header .search-card {
        position: absolute;
        top: calc(100% + 8px);
        inset-inline: 0;
        z-index: 1060;
        border: 1px solid var(--id-border);
        border-radius: var(--id-radius);
        box-shadow: var(--ja-shadow-md);
    }
}

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */

.retouch-full-width-slider .hero-slider .ja-hero-slide,
.ja-hero-slide {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--id-radius);
    background: var(--ja-hero-bg, var(--id-muted));
    box-shadow: var(--ja-shadow-md);
}

/* Overrides the fixed slide heights and contain-fit coming from style.css. */
.__top-slider-images .hero-slider .ja-hero-img,
.hero-slider .ja-hero-img,
.ja-hero-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    object-position: center;
    background: transparent;
}

/* .hero-slider is forced to direction:ltr upstream, so the overlay pins itself
   to LTR too and only the copy inside follows the page direction. */
.ja-hero-overlay {
    position: absolute;
    inset: 0;
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 clamp(20px, 5vw, 64px);
    pointer-events: none;
}

.ja-hero-content {
    max-width: min(46%, 520px);
    direction: ltr;
    text-align: left;
    color: #fff;
}

[dir="rtl"] .ja-hero-content {
    direction: rtl;
    text-align: right;
}

.ja-hero-title {
    font-size: clamp(20px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 .5rem;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

.ja-hero-subtitle {
    font-size: clamp(12px, 1.25vw, 17px);
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.ja-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(10px, 1.8vw, 22px);
    padding: clamp(7px, 1vw, 13px) clamp(16px, 2vw, 30px);
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    transition: transform .25s var(--ja-ease), background-color .25s var(--ja-ease), color .25s var(--ja-ease);
}

.ja-hero-btn i {
    font-size: .85em;
    line-height: 1;
}

.ja-hero-slide:hover .ja-hero-btn {
    background: var(--ja-accent);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 767.98px) {
    .ja-hero-img {
        aspect-ratio: 16 / 9;
    }

    .ja-hero-content {
        max-width: 58%;
    }

    .ja-hero-subtitle {
        display: none;
    }
}

.hero-slider .owl-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.hero-slider .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0;
    background: rgba(255, 255, 255, .5);
    transition: width .3s var(--ja-ease), background-color .3s var(--ja-ease);
}

.hero-slider .owl-dots .owl-dot.active span {
    width: 24px;
    background: #fff;
}

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.ja-card {
    display: flex;
    flex-direction: column;
    background: var(--id-surface);
    border: 1px solid var(--id-border);
    border-radius: var(--id-radius);
    overflow: hidden;
    transition: transform .28s var(--ja-ease), box-shadow .28s var(--ja-ease), border-color .28s var(--ja-ease);
}

.ja-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--ja-shadow-lg);
}

.ja-card-media {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.ja-card-media-link,
.ja-card-media-link picture,
.ja-hero-slide picture {
    display: block;
}

.ja-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 14px;
    transition: transform .45s var(--ja-ease);
}

.ja-card:hover .ja-card-img {
    transform: scale(1.06);
}

.ja-card-badges {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

.ja-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.ja-badge-sale {
    background: var(--ja-sale);
    color: #fff;
}

.ja-badge-soft {
    background: rgba(20, 85, 172, .1);
    color: var(--ja-accent);
}

.ja-card-tools {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .28s var(--ja-ease), transform .28s var(--ja-ease);
}

[dir="rtl"] .ja-card-tools {
    transform: translateX(-8px);
}

.ja-card:hover .ja-card-tools,
.ja-card:focus-within .ja-card-tools {
    opacity: 1;
    transform: translateX(0);
}

.ja-card-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--id-border);
    border-radius: 50%;
    background: #fff;
    color: var(--id-text-soft);
    box-shadow: var(--ja-shadow-sm);
    cursor: pointer;
    transition: background-color .2s var(--ja-ease), color .2s var(--ja-ease), border-color .2s var(--ja-ease);
}

.ja-card-tool:hover {
    background: var(--ja-accent);
    border-color: var(--ja-accent);
    color: #fff;
}

.ja-card-tool i {
    font-size: 15px;
    line-height: 1;
}

.ja-card-cart {
    position: absolute;
    inset-inline: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 0;
    border-radius: var(--id-radius-sm);
    background: var(--ja-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .28s var(--ja-ease), transform .28s var(--ja-ease), background-color .2s var(--ja-ease);
}

.ja-card-cart i {
    font-size: 15px;
    line-height: 1;
}

.ja-card-cart:hover {
    background: var(--ja-accent-dark);
}

.ja-card:hover .ja-card-cart,
.ja-card:focus-within .ja-card-cart {
    opacity: 1;
    transform: translateY(0);
}

/* Touch devices never fire hover, so keep the primary action reachable. */
@media (hover: none) {
    .ja-card-cart,
    .ja-card-tools {
        opacity: 1;
        transform: none;
    }
}

.ja-card-stockout {
    position: absolute;
    inset-inline: 10px;
    bottom: 10px;
    padding: 8px 12px;
    border-radius: var(--id-radius-sm);
    background: rgba(17, 24, 39, .82);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.ja-card.is-out-of-stock .ja-card-img {
    opacity: .55;
}

.ja-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 16px;
    border-top: 1px solid var(--id-border);
}

.ja-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
}

.ja-card-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--id-text);
    text-decoration: none;
    min-height: 2.9em;
    transition: color .2s var(--ja-ease);
}

.ja-card-title a:hover {
    color: var(--ja-accent);
}

.ja-card-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--ja-star);
    font-size: 12px;
}

.ja-card-rating .fi-rr-star {
    color: #d1d5db;
}

.ja-card-rating-count {
    margin-inline-start: 4px;
    color: var(--id-text-muted);
    font-size: 12px;
}

.ja-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.ja-price-now {
    color: var(--id-text);
    font-size: 16px;
    font-weight: 800;
}

.ja-price-was {
    color: var(--id-text-muted);
    font-size: 13px;
    font-weight: 500;
}

/* Owl needs explicit stretching for equal-height cards in a row. */
.owl-carousel .owl-stage {
    display: flex;
}

.owl-carousel .owl-item {
    display: flex;
    height: auto;
}

.owl-carousel .owl-item > div,
.owl-carousel .owl-item > article {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Homepage sections
   -------------------------------------------------------------------------- */

.__inline-61 {
    gap: 36px !important;
}

.section-header,
.feature-product-title,
.arrival-title {
    letter-spacing: 0;
}

.__inline-62,
.__featured-deal-wrap {
    background: var(--id-surface);
    border: 1px solid var(--id-border);
    border-radius: var(--id-radius);
    box-shadow: none;
}

.feature-product-title,
.arrival-title,
.featured_deal_title {
    position: relative;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 800;
}

.view-all-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: gap .2s var(--ja-ease);
}

.view-all-text:hover {
    gap: 8px;
}

.brand-slider .__brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    padding: 12px;
    background: var(--id-surface);
    border: 1px solid var(--id-border);
    border-radius: var(--id-radius-sm);
    transition: border-color .25s var(--ja-ease), box-shadow .25s var(--ja-ease), transform .25s var(--ja-ease);
}

.brand-slider .__brand-item:hover {
    border-color: transparent;
    box-shadow: var(--ja-shadow-md);
    transform: translateY(-3px);
}

.brand-slider .__brand-item img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}