/* SurinNet visual pass 2. Scope: homepage only. No commerce controls or
   layout contracts outside the homepage are changed by this stylesheet. */

html.html-home-page {
    --surin-ink: #142b3d;
    --surin-muted: #526677;
    --surin-line: #dfe7ed;
    --surin-surface: #f5f8fa;
    --surin-red: #e71949;
    --surin-red-dark: #bb1037;
    --surin-focus: #126aab;
}

html.html-home-page body {
    color: var(--surin-ink);
    background: #fff;
}

html.html-home-page header {
    background: #fff;
    box-shadow: 0 6px 24px rgba(20, 43, 61, .08);
}

html.html-home-page .header-lower {
    border-bottom: 1px solid var(--surin-line);
}

html.html-home-page .top-menu > li > a,
html.html-home-page .megaMenu-link {
    color: var(--surin-ink);
    font-weight: 700;
}

html.html-home-page .top-menu > li > a:hover,
html.html-home-page .megaMenu-link:hover {
    color: var(--surin-red-dark);
}

html.html-home-page #small-search-box-form {
    border: 1px solid var(--surin-line);
    border-radius: 12px;
    background: var(--surin-surface);
}

html.html-home-page #small-search-box-form:focus-within {
    border-color: var(--surin-focus);
    box-shadow: 0 0 0 3px rgba(18, 106, 171, .13);
}

html.html-home-page .header-lower a:focus-visible,
html.html-home-page .header-lower button:focus-visible,
html.html-home-page .home-page a:focus-visible,
html.html-home-page .home-page button:focus-visible {
    outline: 3px solid var(--surin-focus);
    outline-offset: 3px;
}

/* Keep the existing Nivo slider sizing and image crop behavior. */
html.html-home-page .theme-custom .nivo-controlNav a.active {
    background: var(--surin-red);
}

html.html-home-page .customCategoryhomePage {
    padding-block: 24px 34px;
    background: linear-gradient(180deg, #fff 0%, var(--surin-surface) 100%);
}

html.html-home-page .customCategoryhomePage .cat-title,
html.html-home-page .customCategoryhomePage a {
    color: var(--surin-ink);
}

html.html-home-page .customCategoryhomePage a:hover {
    color: var(--surin-red-dark);
}

html.html-home-page .customCategoryhomePage .owl-nav button,
html.html-home-page .customCategoryhomePage .owl-nav a {
    box-shadow: 0 4px 12px rgba(20, 43, 61, .12);
}

html.html-home-page .AllInOneImage-section,
html.html-home-page .all-in-One-section,
html.html-home-page .trustWorthy,
html.html-home-page .vendor-manufacture {
    scroll-margin-top: 24px;
}

html.html-home-page .AllInOneImage-section .item-box,
html.html-home-page .all-in-One-section .item-box,
html.html-home-page .trustWorthy .inner {
    border: 1px solid rgba(20, 43, 61, .09);
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(20, 43, 61, .07);
    transition: border-color .18s ease, box-shadow .18s ease;
}

html.html-home-page .AllInOneImage-section .item-box:hover,
html.html-home-page .all-in-One-section .item-box:hover,
html.html-home-page .trustWorthy .inner:hover {
    border-color: rgba(231, 25, 73, .35);
    box-shadow: 0 10px 28px rgba(20, 43, 61, .11);
}

html.html-home-page .AllInOneImage-section .item-box .picture,
html.html-home-page .all-in-One-section .item-box .picture {
    background: #fff;
}

html.html-home-page .AllInOneImage-section .item-box .picture img,
html.html-home-page .all-in-One-section .item-box .picture img {
    object-fit: contain;
}

html.html-home-page .vendor-manufacture {
    background: var(--surin-surface);
}

html.html-home-page .vendor-manufacture .item {
    border: 1px solid var(--surin-line);
    border-radius: 14px;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    html.html-home-page .AllInOneImage-section .item-box,
    html.html-home-page .all-in-One-section .item-box,
    html.html-home-page .trustWorthy .inner {
        transition: none;
    }
}