/* Site redesign (2026-09-28, header made global 2026-09-30) - two scopes
   in this one file:
   - body.hp-site: the header (topbar, logo/search/icons, All Categories
     mega-dropdown, compact sticky header) - set on EVERY frontend page,
     so the header looks and behaves identically everywhere.
   - body.homepage-redesign-v2: hero, features, categories, promos,
     product sections, sidebar - set ONLY on the homepage route. These
     render their own dedicated markup (hp-* classes, see the *-v2 blade
     views) instead of overriding the shared theme's classes.
   Custom properties below are on :root (not either body class) since
   both scopes need var(--hp-green) etc. */

:root {
    --hp-green: #1e8e3e;
    --hp-green-dark: #15803d;
    --hp-text: #111;
    --hp-muted: #555;
    --hp-line: #e5e7eb;
}

body.hp-site {
    font-family: 'Inter', system-ui, sans-serif;
}

/* ---- Top bar ---- */
body.hp-site .topbar-area.topbar-bg-4 {
    background: #000;
    min-height: 48px;
}

body.hp-site .topbar-social {
    display: flex;
    gap: 26px;
}

body.hp-site .topbar-social li a {
    color: #fff;
}

body.hp-site .topbar-right-contents .list li a,
body.hp-site .topbar-right-offer .list li a {
    font-size: 14px;
    color: #fff;
}

body.hp-site .topbar-right-contents .list li a:hover,
body.hp-site .topbar-right-offer .list li a:hover {
    color: #4ade80;
    text-decoration: none;
}

body.hp-site .topbar-right-offer .list {
    display: flex;
    align-items: center;
}

body.hp-site .topbar-right-offer .list li {
    position: relative;
}

body.hp-site .topbar-right-offer .list li + li {
    margin-left: 11px;
    padding-left: 11px;
}

body.hp-site .topbar-right-offer .list li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: #666;
}

/* ---- Header: logo + search + account icons row ---- */
body.hp-site .topbar-bottom-four-v2 {
    background: #fff;
    border-bottom: 1px solid var(--hp-line);
    padding: 20px 0;
}

body.hp-site .topbar-logo img {
    width: 210px;
    height: auto;
}

body.hp-site .hp-search-unit {
    display: flex;
    align-items: stretch;
    height: 50px;
    border: 1.5px solid #cfd4d9;
    border-radius: 6px;
    background: #fff;
    position: relative;
}

body.hp-site .hp-search-ico {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #888;
    pointer-events: none;
}

body.hp-site .hp-search-unit .form--control {
    flex: 1;
    height: 100%;
    border: 0;
    border-radius: 6px 0 0 6px;
    box-shadow: none;
    padding-left: 46px;
    font-size: 15px;
    color: #222;
    background: transparent;
}

body.hp-site .hp-search-unit .right-position-button {
    position: static;
    height: calc(100% + 3px);
    margin: -1.5px -1.5px -1.5px 0;
    width: 86px;
    flex-shrink: 0;
    background: var(--hp-green);
    border-radius: 0 6px 6px 0;
    border: 0;
}

body.hp-site .hp-search-unit .right-position-button:hover {
    background: var(--hp-green-dark);
}

body.hp-site .header-account-icons-v2 .track-icon-list {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: flex-end;
}

/* Icon order: Login/Register -> Wishlist -> Cart */
body.hp-site .header-account-icons-v2 .track-icon-list-item.single-icon {
    order: 1;
}

body.hp-site .header-account-icons-v2 .track-icon-list > .single-icon:not(.track-icon-list-item):not(.cart-shopping) {
    order: 2;
}

body.hp-site .header-account-icons-v2 .track-icon-list > .single-icon.cart-shopping {
    order: 3;
}

body.hp-site .login-account .accounts {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}

body.hp-site .single-icon .icon-notification {
    background: var(--hp-green) !important;
}

/* ---- Categories nav row: All Categories + menu ---- */
body.hp-site .navbar-area.nav-five {
    border-bottom: 1px solid var(--hp-line);
}

body.hp-site .nav-category-bars {
    font-size: 16px;
    font-weight: 600;
}

body.hp-site .nav-category-bars .category-caret {
    font-size: 12px;
    margin-left: 4px;
}

body.hp-site .nav-category.category_bars {
    border-right: 0;
    padding-right: 0;
}

@media (min-width: 992px) {
    body.hp-site .navbar-area.nav-five .nav-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

body.hp-site .navbar-nav {
    display: flex;
    gap: 33px;
    margin-left: 44px;
    font-size: 15px;
    font-weight: 500;
}

body.hp-site .navbar-nav li a {
    position: relative;
    padding: 14px 0;
    display: inline-block;
    color: var(--hp-text);
}

body.hp-site .navbar-nav li a:hover {
    color: var(--hp-green);
}

body.hp-site .navbar-nav li.active a,
body.hp-site .navbar-nav li.current-menu-item a {
    color: var(--hp-green);
    font-weight: 600;
}

body.hp-site .navbar-nav li.active a::after,
body.hp-site .navbar-nav li.current-menu-item a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--hp-green);
}

/* ---- Hero slider (hp-hero, own dedicated markup) ---- */
body.homepage-redesign-v2 .hp-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 1432 / 318;
    margin: 16px 20px 24px;
}

/* The 1432/318 (~4.5:1) ratio was sized for the desktop banner and made
   the hero only ~77px tall on phone. 16:9 with object-fit:cover (already
   set on .hp-hero-slide img) keeps a sensible height and just crops the
   sides instead of squashing the image. */
@media (max-width: 767.98px) {
    body.homepage-redesign-v2 .hp-hero {
        aspect-ratio: 16 / 9;
        margin: 12px 16px 20px;
    }
}

body.homepage-redesign-v2 .hp-hero-slides {
    display: flex;
    height: 100%;
    transition: transform .6s ease;
}

body.homepage-redesign-v2 .hp-hero-slide {
    flex: 0 0 100%;
    height: 100%;
    display: block;
}

body.homepage-redesign-v2 .hp-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.homepage-redesign-v2 .hp-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    border: 0;
    cursor: pointer;
    z-index: 5;
}

body.homepage-redesign-v2 .hp-hero-arrow i {
    font-size: 20px;
    color: #111;
}

body.homepage-redesign-v2 .hp-hero-prev { left: 14px; }
body.homepage-redesign-v2 .hp-hero-next { right: 14px; }

body.homepage-redesign-v2 .hp-hero-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

body.homepage-redesign-v2 .hp-hero-dots button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    padding: 0;
    cursor: pointer;
}

body.homepage-redesign-v2 .hp-hero-dots button.on {
    background: #22c55e;
}

/* ---- Features (USP row, hp-features, own dedicated markup) ---- */
body.homepage-redesign-v2 .hp-features {
    margin: 0 20px 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 20px 0;
}

body.homepage-redesign-v2 .hp-feature {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 22px;
    border-left: 1.5px solid #ddd;
    min-width: 0;
}

body.homepage-redesign-v2 .hp-feature:first-child {
    border-left: 0;
}

body.homepage-redesign-v2 .hp-feature i {
    font-size: 42px;
    color: var(--hp-green);
    flex-shrink: 0;
}

body.homepage-redesign-v2 .hp-feature h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--hp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.homepage-redesign-v2 .hp-feature p {
    font-size: 14px;
    color: var(--hp-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1024px) {
    body.homepage-redesign-v2 .hp-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 14px;
    }

    body.homepage-redesign-v2 .hp-feature:nth-child(4) {
        border-left: 0;
    }
}

/* ---- Features on mobile: continuous right-to-left marquee ----
   client's explicit request: instead of the 5 items wrapping into
   uneven rows (2+2+1) on narrow phones, they should scroll continuously,
   slow, right-to-left, never stopping. The blade now renders the same 5
   items TWICE, each set wrapped in a .hp-features__group (the 2nd marked
   .hp-features__group--dup) inside one .hp-features__track. On desktop
   both wrapper levels are display:contents (they vanish from layout
   entirely, so .hp-feature still lands directly in today's unchanged
   5-col grid) and the dup group is hidden outright. Only the mobile
   media query below turns the track into a flex row and animates it -
   translating exactly -50% loops seamlessly because the 2nd (identical)
   group is then sitting exactly where the 1st one started. */
body.homepage-redesign-v2 .hp-features__track,
body.homepage-redesign-v2 .hp-features__group {
    display: contents;
}

body.homepage-redesign-v2 .hp-features__group--dup {
    display: none;
}

@media (max-width: 767.98px) {
    body.homepage-redesign-v2 .hp-features {
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 16px 0;
    }

    body.homepage-redesign-v2 .hp-features__track {
        display: flex;
        width: max-content;
        animation: hp-features-marquee 22s linear infinite;
    }

    body.homepage-redesign-v2 .hp-features__track:hover,
    body.homepage-redesign-v2 .hp-features__track:active {
        animation-play-state: paused;
    }

    body.homepage-redesign-v2 .hp-features__group {
        display: flex;
    }

    body.homepage-redesign-v2 .hp-features__group--dup {
        display: flex;
    }

    /* Same recurring trap as elsewhere: a bare 1fr track can't shrink
       below the text's min-content width, so "24/7 Support / We're Here
       to Help" was clipped at the box's right edge - not relevant here
       since cards now have a fixed width instead of a grid track, but the
       fixed sizing below serves the same purpose (never let text force a
       card wider/narrower than its neighbours). */
    body.homepage-redesign-v2 .hp-feature {
        flex: 0 0 auto;
        width: 190px;
        border-left: 1.5px solid #ddd;
        gap: 10px;
        padding: 4px 18px;
        min-width: 0;
    }

    body.homepage-redesign-v2 .hp-features__group > .hp-feature:first-child {
        border-left: 0;
    }

    body.homepage-redesign-v2 .hp-feature i {
        font-size: 28px;
    }

    body.homepage-redesign-v2 .hp-feature h4 {
        font-size: 12px;
    }

    body.homepage-redesign-v2 .hp-feature p {
        font-size: 11px;
    }

    @keyframes hp-features-marquee {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }
}

/* ---- Categories (hp-categories, own dedicated markup) ---- */
body.homepage-redesign-v2 .hp-categories {
    margin: 20px 20px 0;
    padding: 0 0 6px;
}

body.homepage-redesign-v2 .hp-cat-slick {
    display: flex;
    position: relative;
}

body.homepage-redesign-v2 .hp-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--hp-text);
    padding: 0 16px;
}

body.homepage-redesign-v2 .hp-cat-circle {
    width: 114px;
    height: 114px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s;
}

/* rotating pastel palette, one per circle (targets the slide wrapper div,
   since .hp-cat is now the only child of each slide - its own nth-child
   would always be 1) */
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+1) .hp-cat-circle { background: #FDE8E8; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+2) .hp-cat-circle { background: #E8F4FD; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+3) .hp-cat-circle { background: #E8FDF0; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+4) .hp-cat-circle { background: #FDF6E8; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+5) .hp-cat-circle { background: #F3E8FD; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+6) .hp-cat-circle { background: #E8FDFB; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+7) .hp-cat-circle { background: #FDEDE8; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+8) .hp-cat-circle { background: #EEE8FD; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+9) .hp-cat-circle { background: #E8FDE8; }
body.homepage-redesign-v2 .hp-cat-slick > div:nth-child(10n+10) .hp-cat-circle { background: #FDE8F4; }

body.homepage-redesign-v2 .hp-cat-circle img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

/* Mobile gap fix: at slidesToShow:3 (breakpoint 575 in the slick config),
   each slide only gets roughly container-width/3 (~110-120px on a typical
   phone) - the fixed 114px circle already eats nearly all of that budget,
   so .hp-cat's own left/right padding had no real room left and slick's
   JS-computed slide width just let the circles overflow into each other
   once it initialized, erasing the gap that showed briefly before JS ran.
   Shrinking the circle here frees genuine room for the padding to show as
   a real gap instead of fighting slick's fixed-width math. */
@media (max-width: 575.98px) {
    body.homepage-redesign-v2 .hp-cat-circle {
        width: 80px;
        height: 80px;
    }

    body.homepage-redesign-v2 .hp-cat {
        padding: 0 8px;
        font-size: 12px;
    }
}

body.homepage-redesign-v2 .hp-cat:hover .hp-cat-circle {
    transform: translateY(-4px);
}

/* slick renders these as siblings of .slick-list inside .hp-cat-slick;
   they need explicit positioning or they sit inline in the flow and
   look like nothing rendered at all */
body.homepage-redesign-v2 .hp-cat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    display: grid;
    place-items: center;
    cursor: pointer;
}

body.homepage-redesign-v2 .hp-cat-prev { left: -18px; }
body.homepage-redesign-v2 .hp-cat-next { right: -18px; }

body.homepage-redesign-v2 .hp-cat-arrow.slick-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* ---- Promo cards (hp-promos, own dedicated markup) ---- */
body.homepage-redesign-v2 .hp-promos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 24px 18px 24px;
}

/* auto-fit + a 280px minimum only fits 2 columns in a ~724px tablet
   content width, wrapping the 3rd banner onto its own lone row - force a
   fixed 3 columns here instead of leaving it to auto-fit's guess. */
@media (min-width: 576px) and (max-width: 991.98px) {
    body.homepage-redesign-v2 .hp-promos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media (max-width: 575.98px) {
    body.homepage-redesign-v2 .hp-promos {
        grid-template-columns: minmax(0, 1fr);
        margin-left: 16px;
        margin-right: 16px;
    }
}

body.homepage-redesign-v2 .hp-promo {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
    transition: transform .25s;
}

body.homepage-redesign-v2 .hp-promo:hover {
    transform: translateY(-3px);
}

body.homepage-redesign-v2 .hp-promo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- All Categories hover mega-dropdown (desktop only, >=992px) ----
   Reuses the exact same hover/flyout pattern the theme already ships for
   .navbar-nav li.menu-item-has-children (see new-home-page.css) - just
   rooted at .hp-allcat instead of .navbar-nav, so behavior is proven and
   consistent with the rest of the site. Below 992px this dropdown stays
   hidden and the existing categoryNav off-canvas sidebar (untouched,
   still driven by the site's own click handler in footer.blade.php)
   keeps working exactly as before. */
@media (min-width: 992px) {
    body.hp-site .hp-allcat {
        position: relative;
    }

    body.hp-site .hp-allcat-dropdown {
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 260px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        border-bottom: 3px solid var(--hp-green);
        z-index: 993;
        visibility: hidden;
        opacity: 0;
        transition: all .2s ease-in;
    }

    body.hp-site .hp-allcat:hover > .hp-allcat-dropdown {
        visibility: visible;
        opacity: 1;
    }

    body.hp-site .hp-allcat-list {
        list-style: none;
        margin: 0;
        padding: 8px 0;
    }

    body.hp-site .hp-allcat-list > li {
        display: block;
    }

    body.hp-site .hp-allcat-list > li + li {
        border-top: 1px solid var(--hp-line);
    }

    body.hp-site .hp-allcat-list li a {
        display: block;
        padding: 11px 22px;
        font-size: 14px;
        color: var(--hp-text);
        white-space: nowrap;
    }

    body.hp-site .hp-allcat-list li > a:hover {
        background: var(--hp-green);
        color: #fff;
    }

    /* flyout submenus - same nesting logic as the theme's own primary menu */
    body.hp-site .hp-allcat-list .menu-item-has-children {
        position: relative;
    }

    body.hp-site .hp-allcat-list .menu-item-has-children > .sub-menu {
        position: absolute;
        left: 100%;
        top: 0;
        min-width: 220px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        border-bottom: 3px solid var(--hp-green);
        list-style: none;
        margin: 0;
        padding: 8px 0;
        visibility: hidden;
        opacity: 0;
        transition: all .2s ease-in;
        z-index: 994;
    }

    body.hp-site .hp-allcat-list .menu-item-has-children > .sub-menu .sub-menu {
        left: auto;
        right: 100%;
    }

    body.hp-site .hp-allcat-list .menu-item-has-children:hover > .sub-menu {
        visibility: visible;
        opacity: 1;
    }

    body.hp-site .hp-allcat-list .sub-menu li + li {
        border-top: 1px solid var(--hp-line);
    }

    body.hp-site .hp-allcat-list .sub-menu li a:hover {
        background: var(--hp-green);
        color: #fff;
    }

    /* the old click-toggled off-canvas sidebar must not be reachable on
       desktop anymore - the hover dropdown above replaces it here. Its
       click handler (footer.blade.php) is shared site-wide so it isn't
       touched; this just keeps the panel itself off-screen regardless
       of whether JS adds its .show class. */
    body.hp-site .categoryNav,
    body.hp-site .categoryNav_overlay {
        display: none !important;
    }

    /* tighten the theme's own product-thumbnail megamenu panel (feedback:
       felt too big/messy) - only within our new dropdown, the theme's
       other usages of .category-megamenu elsewhere are untouched */
    body.hp-site .hp-allcat-list .category-megamenu {
        max-width: 300px;
        max-height: 300px;
        padding: 12px;
        gap: 0;
    }

    body.hp-site .hp-allcat-list .category-megamenu .single-megamenu {
        width: 100%;
        min-width: 0;
    }

    body.hp-site .hp-allcat-list .category-megamenu .single-megamenu > .submenu-title {
        font-size: 12px;
        margin-bottom: 8px;
    }

    body.hp-site .hp-allcat-list .single-category-megamenu {
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left !important;
    }

    body.hp-site .hp-allcat-list .single-category-megamenu:not(:first-child) {
        margin-top: 10px !important;
        padding-top: 10px;
        border-top: 1px solid var(--hp-line);
    }

    body.hp-site .hp-allcat-list .single-category-megamenu .image-contents {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
    }

    body.hp-site .hp-allcat-list .single-category-megamenu .category-thumb {
        max-width: 44px;
        height: 44px;
        border-radius: 6px;
        overflow: hidden;
    }

    body.hp-site .hp-allcat-list .single-category-megamenu > .submenu-title {
        font-size: 12px;
        line-height: 1.3;
        margin-bottom: 0;
        min-height: 0;
        -webkit-line-clamp: 2;
    }
}

/* ---- Compact sticky header on scroll (desktop only, >=992px) ----
   #hpCompactHeader is a separate, always-in-DOM fixed bar (not
   position:sticky on a row inside the normal header - that doesn't work
   when the containing header isn't itself a scroll container). It's
   translated off-screen by default and slides down when body.is-sticky
   is set by the IntersectionObserver script in header-variant-03.blade.php.
   No padding/spacer is added anywhere: the compact bar is position:fixed
   and just floats over the page, and the normal header never leaves the
   flow, so there's no gap to fill. (A padding-top compensation here
   previously caused an infinite on/off flicker loop: it pushed the
   sentinel back into view, which turned sticky off, which removed the
   padding, which pushed the sentinel back out, which turned sticky back
   on - forever, right at the scroll boundary.) */
@media (min-width: 992px) {
    body.hp-site .hp-compact-header {
        display: none;
    }

    body.hp-site.is-sticky .hp-compact-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        height: 76px;
        background: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
        transform: translateY(-100%);
        animation: hpCompactSlideDown .25s ease forwards;
    }

    @keyframes hpCompactSlideDown {
        to { transform: translateY(0); }
    }

    body.hp-site .hp-compact-inner {
        height: 76px;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    body.hp-site .hp-compact-logo img {
        max-height: 40px;
        width: auto;
    }

    body.hp-site .hp-compact-allcat {
        white-space: nowrap;
        cursor: pointer;
        flex-shrink: 0;
    }

    body.hp-site .hp-compact-search {
        flex: 1;
        min-width: 0;
    }

    body.hp-site .hp-compact-search .hp-search-unit {
        height: 50px;
    }

    body.hp-site .hp-compact-icons {
        flex-shrink: 0;
    }

    body.hp-site .hp-compact-icons .track-icon-list {
        display: flex;
        align-items: center;
        gap: 24px;
    }
}

@media (max-width: 991.98px) {
    body.hp-site .hp-compact-header {
        display: none !important;
    }
}

/* ---- Left sidebar cleanup (homepage only) ---- */
body.homepage-redesign-v2 .col-xxl-3 section {
    padding-top: 16px;
    padding-bottom: 0;
}

body.homepage-redesign-v2 .col-xxl-3 section:first-child {
    padding-top: 0;
}

body.homepage-redesign-v2 .hp-kidsbanner .ad_thumb img {
    width: 100%;
    height: auto;
    display: block;
}

body.homepage-redesign-v2 .col-xxl-3 .single-promo {
    padding: 14px 18px;
}

body.homepage-redesign-v2 .col-xxl-3 .single-promo .icon {
    font-size: 26px;
    margin-right: 12px;
}

body.homepage-redesign-v2 .col-xxl-3 .single-promo .promo-inner-title {
    font-size: 16px;
    line-height: 1.3;
}

body.homepage-redesign-v2 .col-xxl-3 .single-promo .promo-inner-para {
    font-size: 13px;
    line-height: 1.3;
}

body.homepage-redesign-v2 .col-xxl-3 .sidebar-wrapper {
    padding: 16px;
}

body.homepage-redesign-v2 .col-xxl-3 .sidebar-title {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 12px;
}

/* ---- Layout: fixed 275px sidebar + 28px gap + flexible right column ----
   replaces the Bootstrap col-xxl-3/col-xxl-9 flex-basis split (25%/75%)
   with an exact CSS grid, so the right column's own sections (Our
   Specialty, the 3 banners, Flash Deals) can all share one true left/
   right edge instead of drifting with Bootstrap's percentage math.

   FIX (2026-09-29): the previous selector was `.left-right-area .row`,
   which matches EVERY nested Bootstrap row anywhere below this point on
   the page (allProduct__area, save-area, featured-area, download-area
   all have their own .row's) - each of those got squeezed into a 275px
   first column too. Scoped to the exact outer row's own classes
   (row.flex-xxl-row.flex-column-reverse, from frontend-page-master.blade.php)
   plus a direct-child combinator, so it can only ever match that one row. */
@media (min-width: 1200px) {
    body.homepage-redesign-v2 .left-right-area > .container > .row.flex-xxl-row {
        display: grid;
        grid-template-columns: 275px minmax(0, 1fr);
        gap: 28px;
    }

    body.homepage-redesign-v2 .left-right-area > .container > .row.flex-xxl-row > .col-xxl-3,
    body.homepage-redesign-v2 .left-right-area > .container > .row.flex-xxl-row > .col-xxl-9 {
        width: auto;
        max-width: none;
        flex: none;
        padding-left: 0;
        padding-right: 0;
        /* a 1fr grid track defaults to min-width:auto, which lets it grow
           to fit content that doesn't wrap (a flex header row, a 6-col
           grid) instead of respecting the 1fr size - that's what was
           pushing the timer/View All button/cards off to the right and
           out of view. minmax(0,1fr) above plus min-width:0 here forces
           the track to actually shrink to the space available. */
        min-width: 0;
    }

    /* match the hero/categories/features sections' own full-width, 20px
       side-margin convention instead of Bootstrap's narrower .container-one
       cap, so the sidebar+content area lines up edge-to-edge with them
       instead of floating ~80px narrower in the middle of the page. */
    body.homepage-redesign-v2 .left-right-area > .container-one {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ---- Right column sections: one shared left/right edge, tight spacing ---- */
body.homepage-redesign-v2 .popularProduct__area,
body.homepage-redesign-v2 .hp-sidepromos,
body.homepage-redesign-v2 .hp-flashdeals {
    padding: 0;
    margin-top: 18px;
}

body.homepage-redesign-v2 .popularProduct__area:first-child {
    margin-top: 0;
}

body.homepage-redesign-v2 .popularProduct__area .container,
body.homepage-redesign-v2 .popularProduct__area .container_1608 {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* ---- "Our Specialty" header row ---- */
body.homepage-redesign-v2 .hp-spec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
}

body.homepage-redesign-v2 .hp-spec-head .title {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

body.homepage-redesign-v2 .hp-spec-head .viewAll_btn {
    color: var(--hp-green);
    font-size: 16px;
    white-space: nowrap;
}

/* ---- "Our Specialty" grid + cards (.hp-spec-grid / .hp-pcard) ----
   minmax(0,1fr), not bare 1fr: a plain 1fr track can't shrink below its
   content's own min-content width, so a long clamped title or a
   nowrap price line can blow a column open and starve the others. */
body.homepage-redesign-v2 .hp-spec-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1280px) {
    body.homepage-redesign-v2 .hp-spec-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.homepage-redesign-v2 .hp-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.homepage-redesign-v2 .hp-pcard {
    min-width: 0;
}

body.homepage-redesign-v2 .hp-pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 14px;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .2s;
}

body.homepage-redesign-v2 .hp-pcard__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #2e9e5b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 1;
}

body.homepage-redesign-v2 .hp-pcard__badge--sale {
    background: #e53935;
}

body.homepage-redesign-v2 .hp-pcard:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

body.homepage-redesign-v2 .hp-pcard__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    margin: -14px -14px 12px;
    background: #fff;
}

body.homepage-redesign-v2 .hp-pcard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.homepage-redesign-v2 .hp-pcard__title {
    font-size: 15px;
    line-height: 1.35;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 3);
}

body.homepage-redesign-v2 .hp-pcard__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #111;
}

body.homepage-redesign-v2 .hp-pcard__meta .rating {
    font-size: 13px;
    font-weight: 400;
    color: #888;
}

body.homepage-redesign-v2 .hp-pcard__meta .rating i {
    color: #f5a623;
    font-size: 12px;
}

body.homepage-redesign-v2 .hp-pcard__btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 100%;
    border: 1.5px solid var(--hp-green);
    border-radius: 30px;
    color: var(--hp-green);
    font-size: 14px;
    white-space: nowrap;
    padding: 0 10px;
}

body.homepage-redesign-v2 .hp-pcard__btn:hover {
    background: var(--hp-green);
    color: #fff;
}

body.homepage-redesign-v2 .hp-pcard__icons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

body.homepage-redesign-v2 .hp-pcard__icons a {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--hp-green);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--hp-green);
    font-size: 14px;
}

/* ---- 3 banners (.hp-sidepromos / .hp-promo) ----
   .hp-sidepromos shares the base .hp-promos class (main promo-cards
   section), which carries its own margin:24px 18px 24px - that 18px
   side margin was misaligning these banners against the product grid's
   edges, needs to be zeroed here. 16:9 (not the images' native 1.5:1)
   trims a little off the top/bottom without cutting into the baked-in
   text/buttons the way the old fixed 311x130 box did. */
body.homepage-redesign-v2 .hp-sidepromos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 20px 0 0;
    width: 100%;
}

body.homepage-redesign-v2 .hp-sidepromos .hp-promo {
    border-radius: 10px;
    overflow: hidden;
}

body.homepage-redesign-v2 .hp-sidepromos .hp-promo img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 768px) {
    body.homepage-redesign-v2 .hp-sidepromos {
        grid-template-columns: 1fr;
    }
}

/* ---- Flash Deals header ---- */
body.homepage-redesign-v2 .hp-flashdeals-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

body.homepage-redesign-v2 .hp-flashdeals-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.homepage-redesign-v2 .hp-flashdeals-title i {
    font-size: 30px;
    color: #e53935;
}

body.homepage-redesign-v2 .hp-flashdeals-title h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: var(--hp-text);
}

body.homepage-redesign-v2 .hp-flashdeals-title p {
    font-size: 15px;
    color: #666;
    margin: 2px 0 0;
}

body.homepage-redesign-v2 .hp-flashdeals-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* shared with .hp-spec-head .viewAll_btn (Our Specialty) so the two
   "View All" links can never drift apart - plain text link, no button
   chrome, same as the doc's .hp-viewall spec */
body.homepage-redesign-v2 .hp-spec-head .viewAll_btn,
body.homepage-redesign-v2 .hp-flashdeals-right .viewAll_btn {
    display: flex;
    align-items: center;
    border: 0;
    padding: 0;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--hp-green);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

/* ---- Countdown: number inside the box, label below/outside it ---- */
body.homepage-redesign-v2 .hp-flashdeals-timer {
    display: flex;
    align-items: center;
    gap: 14px;
    /* the theme's own .loopCounter_global class (also on this same element)
       sets flex-wrap:wrap - unoverridden, that's what let the 4th box
       (Seconds) drop to its own line on narrow phones. */
    flex-wrap: nowrap;
}

body.homepage-redesign-v2 .hp-flashdeals-timer .loopCounter_global__item {
    /* the theme's own default puts a green border+padding directly on
       this outer div (var(--main-color-one)) - neutralize it here, the
       actual visible box comes from the inner span below instead */
    border: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.homepage-redesign-v2 .hp-flashdeals-timer .loopCounter_global__item::after {
    display: none;
}

body.homepage-redesign-v2 .hp-flashdeals-timer .loopCounter_global__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 40px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

body.homepage-redesign-v2 .hp-flashdeals-timer .loopCounter_global__item small {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

body.homepage-redesign-v2 .hp-flashdeals-timer .loopCounter_global__item + .loopCounter_global__item::before {
    content: ":";
    position: absolute;
    left: -10px;
    top: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #999;
}

/* on a narrow phone the full-size boxes (46px + 14px gaps x4) don't fit
   the available width even with wrapping disabled above - shrink the
   boxes/gap/labels here so all 4 genuinely fit on one row instead of
   overflowing off-screen. */
@media (max-width: 575.98px) {
    body.homepage-redesign-v2 .hp-flashdeals-right {
        flex-wrap: wrap;
        gap: 10px;
    }

    body.homepage-redesign-v2 .hp-flashdeals-timer {
        gap: 10px;
    }

    body.homepage-redesign-v2 .hp-flashdeals-timer .loopCounter_global__item span {
        width: 38px;
        height: 34px;
        font-size: 15px;
    }

    body.homepage-redesign-v2 .hp-flashdeals-timer .loopCounter_global__item small {
        font-size: 11px;
    }

    body.homepage-redesign-v2 .hp-flashdeals-timer .loopCounter_global__item + .loopCounter_global__item::before {
        left: -6px;
        top: 6px;
        font-size: 15px;
    }
}

/* ---- Flash Deals grid + cards (.hp-flashdeals-grid / .hp-fcard) ----
   minmax(0,1fr): with only 2 real products, plain 1fr columns stretched
   those 2 cards huge and left the other 4 columns at 0 width, because a
   nowrap product name's min-content width doesn't fit in a bare 1fr
   track. minmax(0,1fr) forces all 6 tracks to the same width regardless
   of how many cards are actually present. */
body.homepage-redesign-v2 .hp-flashdeals-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1280px) {
    body.homepage-redesign-v2 .hp-flashdeals-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.homepage-redesign-v2 .hp-flashdeals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.homepage-redesign-v2 .hp-fcard {
    min-width: 0;
    position: relative;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.homepage-redesign-v2 .hp-fcard__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e53935;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 1;
}

body.homepage-redesign-v2 .hp-fcard__wish {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #777;
    font-size: 20px;
    z-index: 1;
}

body.homepage-redesign-v2 .hp-fcard__img {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -12px -12px 10px;
}

body.homepage-redesign-v2 .hp-fcard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.homepage-redesign-v2 .hp-fcard__name {
    font-size: 15px;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

body.homepage-redesign-v2 .hp-fcard__rating {
    font-size: 13px;
    color: #f5a623;
    margin: 4px 0 8px;
}

body.homepage-redesign-v2 .hp-fcard__rating span {
    color: #888;
    margin-left: 4px;
}

body.homepage-redesign-v2 .hp-fcard__bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

body.homepage-redesign-v2 .hp-fcard__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--hp-green);
}

body.homepage-redesign-v2 .hp-fcard__old {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin-left: 6px;
}

body.homepage-redesign-v2 .hp-fcard__cart {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--hp-green);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
}

/* ---- Ads (.hp-ads) - one outer card, plain rows, no nested borders ---- */
body.homepage-redesign-v2 .hp-ads {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 18px;
    margin-top: 20px;
}

body.homepage-redesign-v2 .hp-ads h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px;
}

body.homepage-redesign-v2 .hp-ads__item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #eee;
}

body.homepage-redesign-v2 .hp-ads__item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

body.homepage-redesign-v2 .hp-ads__thumb {
    position: relative;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: 6px;
    overflow: hidden;
}

body.homepage-redesign-v2 .hp-ads__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.homepage-redesign-v2 .hp-ads__badge {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    background: #2e9e5b;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.homepage-redesign-v2 .hp-ads__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.35;
    color: #222;
    margin-bottom: 6px;
}

body.homepage-redesign-v2 .hp-ads__price {
    font-size: 17px;
    color: #111;
}

body.homepage-redesign-v2 .hp-ads__old {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}

/* ---- Express Delivery + Gallery: same card language as Ads ---- */
body.homepage-redesign-v2 .col-xxl-3 .single-promo .icon {
    font-size: 44px;
}

body.homepage-redesign-v2 .col-xxl-3 .single-promo .promo-inner-title {
    font-size: 20px;
    font-weight: 500;
}

body.homepage-redesign-v2 .col-xxl-3 .single-promo .promo-inner-para {
    font-size: 15px;
    color: #777;
}

body.homepage-redesign-v2 .instagram .sidebar-title {
    font-size: 22px;
    font-weight: 700;
}

/* ---- "Special" (news-area / single-news-update) - same card language
   as the other sidebar blocks: smaller thumb, clamped title, tight rows,
   divider between items instead of the theme's oversized 150x120 thumb ---- */
body.homepage-redesign-v2 .news-area .sidebar-title {
    font-size: 22px;
    font-weight: 700;
}

body.homepage-redesign-v2 .single-news-update {
    padding: 14px 0;
    border-top: 1px solid #eee;
}

body.homepage-redesign-v2 .single-news-update:first-of-type {
    padding-top: 0;
    border-top: 0;
}

body.homepage-redesign-v2 .single-news-update .news-flex-content .news-update-thumb {
    max-width: 84px;
    width: 84px;
    height: 84px;
    max-height: 84px;
    margin-right: 14px;
    border-radius: 6px;
    flex-shrink: 0;
}

body.homepage-redesign-v2 .single-news-update .news-flex-content .news-update-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.homepage-redesign-v2 .single-news-update .common-title-three {
    font-size: 15px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.homepage-redesign-v2 .single-news-update .dates {
    font-size: 13px;
    color: #999;
}

/* ---- Vendor tabs (Top Rated / Top Selling / Weekly Top) active state ----
   the theme has no active-tab styling for these at all by default */
body.homepage-redesign-v2 .vendor_search_tab {
    cursor: pointer;
    color: #666;
}

body.homepage-redesign-v2 .vendor_search_tab.active {
    /* the theme's own .tabs li.active only sets color:var(--white) and
       relies on animated ::before/::after pseudo-elements (z-index:-1)
       for a green background - those sit BEHIND the tab's own opaque
       grey background (.tabs li{background-color:var(--border-color)})
       and never actually show through, leaving white-on-grey (or
       invisible) text. Overriding with a solid, guaranteed-visible
       background+text combo instead of depending on that. */
    background-color: var(--hp-green) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ---- "Hot Items" (.featured-area, row 287) - same card language as
   Our Specialty/Flash Deals, restyling only (not rebuilding the grid).
   This section uses isotope.js client-side masonry filtering
   (.row.grid / .grid-item / imageloaded), which positions cards via JS,
   not CSS layout - swapping it for a CSS grid the way Our Specialty was
   rebuilt would break the category-tab filtering. Bootstrap columns and
   the grid/grid-item classes are left completely untouched here. */
body.homepage-redesign-v2 .featured-area {
    padding-top: 18px;
    padding-bottom: 18px;
}

body.homepage-redesign-v2 .featured-area .title-left .title {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

body.homepage-redesign-v2 .featured-area .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 16px;
}

body.homepage-redesign-v2 .featured-area .product-button {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* the theme's own .isootope-button .list has an 18px font and a
   30px margin-right baked on, on top of which our flex gap above was
   adding even more space between the 3 tabs - remove the theme's own
   margin so gap is the only thing controlling spacing. Also hides the
   theme's animated underline (::before) that was left showing under
   the active tab beneath our solid green pill. */
body.homepage-redesign-v2 .featured-area .product-button .list {
    margin-right: 0 !important;
    margin-top: 0;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f3f3f3;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

body.homepage-redesign-v2 .featured-area .product-button .list::before {
    display: none;
}

body.homepage-redesign-v2 .featured-area .product-button .list.active {
    background: var(--hp-green);
    color: #fff;
}

/* Cards now use the exact same shared .hp-pcard partial/CSS as Our
   Specialty (see partials/hp-product-card.blade.php) - no per-section
   card CSS needed here anymore. Only the isotope item wrapper's WIDTH
   is controlled here, via percentage (required by the existing
   isotope({percentPosition:true}) init, unchanged) instead of Bootstrap
   columns, to get 6 per row matching Our Specialty. The .grid/.grid-item
   /cat-XX/data-filter structure itself is completely untouched. */
body.homepage-redesign-v2 .featured-area .grid {
    margin: 0 -6px;
}

body.homepage-redesign-v2 .featured-area .hp-iso-item {
    width: 16.6666%;
    padding: 6px;
    box-sizing: border-box;
}

body.homepage-redesign-v2 .featured-area .hp-iso-item .hp-pcard {
    height: 100%;
}

@media (max-width: 1280px) {
    body.homepage-redesign-v2 .featured-area .hp-iso-item {
        width: 25%;
    }
}

@media (max-width: 768px) {
    body.homepage-redesign-v2 .featured-area .hp-iso-item {
        width: 50%;
    }
}

/* ---- "Unlock the Full D-Shopp Experience" app-download banner ----
   theme default is a light-blue card with a red/blue accented form -
   restyled to the same green brand language as the rest of the page,
   structure (2-column text+phone-mockup layout) left untouched. Shared
   .download-area widget (used on 2 other pages too), so this is scoped
   to the homepage body class rather than editing the addon/blade. */
body.homepage-redesign-v2 .download-area {
    padding-top: 40px;
    padding-bottom: 60px;
}

body.homepage-redesign-v2 .download-left-contents.bg-item-two {
    background: linear-gradient(135deg, #eafbf1 0%, #f3fdf7 100%);
    box-shadow: 0 8px 30px rgba(30, 142, 62, .08);
}

body.homepage-redesign-v2 .download-contents .span-title {
    color: var(--hp-green);
    letter-spacing: .3px;
}

body.homepage-redesign-v2 .download-contents .download-title {
    color: #0e2a1b;
    font-weight: 700 !important;
}

body.homepage-redesign-v2 .download-contents .download-title a {
    color: inherit;
}

body.homepage-redesign-v2 .download-form .single-input .form--control {
    background: #fff;
    border: 1.5px solid #dcefe1 !important;
}

body.homepage-redesign-v2 .download-form .single-input .form--control:focus {
    border-color: var(--hp-green) !important;
    box-shadow: 0 0 0 3px rgba(30, 142, 62, .12) !important;
}

body.homepage-redesign-v2 .download-form .single-input button {
    background-color: var(--hp-green) !important;
    border-radius: 0 10px 10px 0;
}

body.homepage-redesign-v2 .download-form .single-input button:hover {
    background-color: var(--hp-green-dark) !important;
}

body.homepage-redesign-v2 .googleplay-btn {
    display: flex;
    gap: 14px;
}

body.homepage-redesign-v2 .googleplay {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    transition: transform .2s ease;
}

body.homepage-redesign-v2 .googleplay:hover {
    transform: translateY(-3px);
}

body.homepage-redesign-v2 .download-mobile-img img {
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .18));
}

/* ---- "Save area" promo strip ("Only Verified items / Just For You") ----
   client's explicit direction: the promo image should be the FULL-WIDTH
   background photo of the whole strip (like .hp-hero/.hp-promos elsewhere
   on this page), not confined to a left column. The image column is
   pulled out of flow and stretched with inset:0 to cover the entire
   .save-inner-wrapper (position:absolute insets resolve against the
   wrapper's padding edge, so this bleeds flush regardless of the
   wrapper's own padding - no width/height guesswork). A dark gradient
   sits above the photo and below the text so the white text stays
   readable over any uploaded image. The text column then spans the
   full width on top of it. */
body.homepage-redesign-v2 .save-area .save-inner-wrapper {
    position: relative;
    overflow: hidden;
}

body.homepage-redesign-v2 .save-area .col-lg-4 {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
}

body.homepage-redesign-v2 .save-area .save-thumbs {
    width: 100%;
    height: 100%;
}

body.homepage-redesign-v2 .save-area .save-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.homepage-redesign-v2 .save-area .save-inner-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .28) 100%);
}

body.homepage-redesign-v2 .save-area .col-lg-8 {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

@media (min-width: 992px) {
    body.homepage-redesign-v2 .save-area .col-lg-8 {
        padding: 30px 100px;
    }
}

@media (min-width: 1600px) and (max-width: 1849.98px) {
    body.homepage-redesign-v2 .save-area .col-lg-8 {
        padding: 30px 60px;
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    body.homepage-redesign-v2 .save-area .col-lg-8 {
        padding: 30px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    body.homepage-redesign-v2 .save-area .col-lg-8 {
        padding: 30px 50px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.homepage-redesign-v2 .save-area .col-lg-8 {
        padding: 30px;
    }
}

@media (max-width: 991.98px) {
    body.homepage-redesign-v2 .save-area .col-lg-8 {
        padding: 20px 30px;
    }
}

@media (max-width: 375px) {
    body.homepage-redesign-v2 .save-area .col-lg-8 {
        padding: 20px;
    }
}

/* ---- "Quick deals" (.flashSale_area) - restyled to match the rest of
   the homepage's card language (Our Specialty/Flash Deals/Hot Items all
   use .hp-pcard/.hp-fcard already); this section still uses the theme's
   own default .product_card markup, so it's restyled in place rather than
   rebuilt, scoped to .flashSale_area only so no other page using
   .product_card elsewhere is affected. */
body.homepage-redesign-v2 .flashSale_area .section-title .title {
    font-size: 28px;
    font-weight: 700;
    color: #111;
}

body.homepage-redesign-v2 .flashSale_area .flashSale_countdown__para {
    color: #666;
    font-size: 14px;
}

body.homepage-redesign-v2 .flashSale_area .loopCounter_global__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 38px;
    padding: 0 6px;
    margin-left: 6px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

body.homepage-redesign-v2 .flashSale_area .product_card {
    border-color: #ececec;
    border-radius: 10px;
    transition: box-shadow .2s;
}

body.homepage-redesign-v2 .flashSale_area .product_card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

body.homepage-redesign-v2 .flashSale_area .product_card__thumb,
body.homepage-redesign-v2 .flashSale_area .product_card__thumb__bgImg {
    background: #fff;
}

/* image-fit bug: the theme only ever set max-width/max-height on this
   img (no object-fit), so a narrow/tall product photo rendered small and
   centered instead of filling its box - same fix as the hp-pcard/hp-fcard
   cards elsewhere on the page. */
body.homepage-redesign-v2 .flashSale_area .product_card__thumb__bgImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.homepage-redesign-v2 .flashSale_area .product_card__price {
    color: var(--hp-green);
}

/* ---- "Quick deals" when it renders in the LEFT SIDEBAR (275px column) ----
   the addon's own default template (row-cols-xl-6 grid, wide countdown
   row, centered button) is built for a full-width main column.
   Bootstrap's row-cols-* classes react to viewport width, not container
   width, so at desktop viewports they still force 6 (or 4/3/2) equal
   columns into this narrow sidebar, squeezing everything unreadable.
   This is the client's own placement for this widget (its addon_location
   is dynamic_page_left_sidebar) - not something to relocate, just
   reflowed here into a compact single-column list matching the other
   sidebar widgets' visual language (small thumb + text beside it). */
body.homepage-redesign-v2 .col-xxl-3 .flashSale_area {
    padding-top: 16px;
    padding-bottom: 0;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .section-title .title {
    font-size: 17px;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .flashSale_countdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .flashSale_countdown__para {
    font-size: 12px;
    width: 100%;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .loopCounter_global__item {
    min-width: 34px;
    height: 30px;
    font-size: 12px;
    margin-left: 0;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .row.g-4 {
    margin: 0;
    row-gap: 10px;
    display: flex;
    flex-direction: column;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .row.g-4 > .col {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card__thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card__thumb__bgImg {
    height: 100%;
}

/* the hover-reveal cart/wishlist/compare/quick-view overlay can't fit a
   64px thumb - it's a convenience overlay, not content, so it's hidden
   only in this narrow-sidebar context */
body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card__thumb__icons {
    display: none;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card__thumb__percent {
    top: 2px;
    left: 2px;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card__thumb__percent .percent-box {
    font-size: 10px;
    padding: 2px 5px;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card__contents {
    padding: 0;
    min-width: 0;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card__title {
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .product_card__price {
    font-size: 14px;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .rating-wrap,
body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .rating-wrap .ratings,
body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .rating-wrap p {
    font-size: 11px;
    margin: 2px 0 0;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .btn-wrapper.center-text {
    margin-top: 14px !important;
}

body.homepage-redesign-v2 .col-xxl-3 .flashSale_area .btn-wrapper .cmn-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 8px 10px;
}

/* ============================================================
   Mobile/tablet header rework (2026-09-30), all pages, <992px.
   ============================================================
   Below 992px the desktop header (topbar, logo/search/icons row,
   nav row with its hover-only All-Categories dropdown, and the
   theme's own old mobile bar living inside .responsive-mobile-menu)
   is hidden outright - none of its hover-driven interactions work
   on touch anyway, and its "All Categories" list was rendering as
   permanently-open plain text with no <992px styling of its own.
   #hpCompactHeader - previously a desktop-only slide-down-on-scroll
   bar - becomes the ONE, always-visible mobile header instead,
   reusing its existing logo/search/icons markup. Its
   .hp-compact-allcat element already carries the site's own
   .category_bars class, whose click handler (footer.blade.php,
   untouched) already opens the existing .categoryNav off-canvas
   drawer - so no new JS is needed to open it, just a visual
   restyle from "All Categories" text into a bare hamburger icon.
   The drawer's own expand/collapse-on-tap accordion behaviour
   (main.js's .categoryNav__list li.menu-item-has-children click
   handler, toggling a .show class) is also pre-existing and
   untouched - only a plain .sub-menu reveal rule was actually
   missing (the theme only ever styled the megamenu .cate-list
   variant's .show state, not a plain nested <ul class="sub-menu">). */
@media (max-width: 991.98px) {
    body.hp-site .topbar-area,
    body.hp-site .topbar-bottom-four-v2,
    body.hp-site nav.navbar-area {
        display: none !important;
    }

    body.hp-site .hp-compact-header {
        display: block !important;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        height: auto;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
        transform: none !important;
        animation: none !important;
    }

    body.hp-site .hp-compact-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        height: auto;
        padding: 8px 0;
    }

    body.hp-site .hp-compact-allcat {
        order: 1;
        flex-shrink: 0;
    }

    /* the hover-flyout dropdown panel never applies on touch - .category_bars
       (already on this element) is what opens the real .categoryNav drawer */
    body.hp-site .hp-compact-allcat .hp-allcat-dropdown {
        display: none !important;
    }

    body.hp-site .hp-compact-allcat .nav-category-bars {
        font-size: 0;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    body.hp-site .hp-compact-allcat .nav-category-bars i.la-bars {
        font-size: 24px;
        color: var(--hp-text);
    }

    body.hp-site .hp-compact-allcat .nav-category-bars i.category-caret {
        display: none;
    }

    body.hp-site .hp-compact-logo {
        order: 2;
        flex: 1;
        min-width: 0;
    }

    body.hp-site .hp-compact-logo img {
        max-height: 32px;
        width: auto;
    }

    body.hp-site .hp-compact-icons {
        order: 3;
        flex-shrink: 0;
    }

    body.hp-site .hp-compact-icons .track-icon-list {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    body.hp-site .hp-compact-icons .single-icon .icon i {
        font-size: 22px;
    }

    body.hp-site .hp-compact-icons .icon-notification {
        font-size: 11px;
        min-width: 16px;
        height: 16px;
    }

    /* full-width search row below the icon row */
    body.hp-site .hp-compact-search {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
    }

    body.hp-site .hp-compact-search .hp-search-unit {
        display: flex;
        align-items: stretch;
        height: 44px;
    }

    body.hp-site .hp-compact-search .hp-search-unit input {
        flex: 1;
        min-width: 0;
    }

    body.hp-site .hp-compact-search .right-position-button {
        flex: 0 0 52px;
        width: 52px;
    }
}

@media (max-width: 575.98px) {
    /* Login/Register text hidden below 576px - just the user icon stays */
    body.hp-site .hp-compact-icons .login-account .icon-title {
        display: none;
    }
}

/* Drawer main links (Home/Shop/Blog/FAQ/Contact/About/Become a Seller),
   shown above the categories accordion - unstyled otherwise since this
   <ul> is new. */
body.hp-site .hp-drawer-mainlinks {
    list-style: none;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--hp-line, #e5e7eb);
}

body.hp-site .hp-drawer-mainlinks li a {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--hp-text, #111);
}

body.hp-site .hp-drawer-mainlinks li a:hover {
    color: var(--hp-green);
}

/* the theme only ever styled the megamenu (.cate-list) variant's .show
   state - a plain nested <ul class="sub-menu"> (e.g. "Sports & Outdoors")
   never actually appears even though the click handler adds the .show
   class correctly. */
.categoryNav__list li.menu-item-has-children:not(.cate-list) > .sub-menu {
    display: none;
}

.categoryNav__list li.menu-item-has-children.show:not(.cate-list) > .sub-menu {
    display: block;
    list-style: none;
    padding-left: 14px;
}

/* body scroll lock while the drawer is open */
body:has(.categoryNav.show) {
    overflow: hidden;
}

/* The drawer (992/991) sat BELOW the now-always-visible compact mobile
   header (1000), so its own top strip - title, close button, and the
   first couple of links - rendered hidden behind the header. */
.categoryNav_overlay {
    z-index: 1101 !important;
}

/* The theme's own .categoryNav__list is position:absolute (top:0/bottom:0)
   inside .categoryNav__inner, which is position:relative but has NO
   explicit height of its own - since its only child is taken out of flow
   by that absolute positioning, .categoryNav__inner collapses to ~0px
   height, so the list's top:0/bottom:0 has nothing real to stretch
   against and the whole category list renders with zero visible height
   (drawer opens, "All Category" title shows, but every category below it
   is invisible - confirmed live on a real device). The theme even left
   .categoryNav__inner::-webkit-scrollbar styling in style.css, which only
   makes sense if that element was meant to be the scrolling box - it was
   just never given overflow or a real height to make that work. Fixed by
   making .categoryNav a flex column so .categoryNav__inner gets genuine
   height (flex:1 over the remaining space after the main-links list and
   the "All Category" title), then .categoryNav__list (already stretched
   to fill it) scrolls within that real height. */
.categoryNav {
    z-index: 1102 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.categoryNav_sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.categoryNav_sidebar > .hp-drawer-mainlinks,
.categoryNav_sidebar > .categoryNav__title {
    flex-shrink: 0;
}

.categoryNav__inner {
    flex: 1 1 auto;
    min-height: 0;
}

.categoryNav__list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* NOTE ON THE PREVIOUS FIX HERE: hiding every .cate-list li outright
   also hid "Beauty & Elegance" completely, because that category has NO
   plain flat-list entry of its own at all - its .cate-list entry (with
   the real category-megamenu panel/children) IS the only place it
   exists as a top-level item; the "Beauty & Elegance" seen nested under
   "Sports & Outdoors" is a separate, oddly-tagged cross-reference in the
   admin menu data, not this category's real parent listing. Only
   "Fashion." is a genuine duplicate (it has both a plain entry AND a
   .cate-list entry with the same name) - de-duplication now happens by
   matching text in a small script instead of blanket-hiding the whole
   .cate-list type, so a category that ONLY exists as a .cate-list entry
   is never accidentally removed. See the script in
   header-variant-03.blade.php. */

/* Chevron indicator for any parent category with children (plain
   .sub-menu OR the .cate-list megamenu variant) - the theme only ever
   drew this for a different, unused class name (.has_children, not
   .menu-item-has-children, which is what this menu's real markup uses),
   so a plain parent like "Sports & Outdoors" showed no expand hint at
   all. */
.categoryNav__list li.menu-item-has-children > a {
    position: relative;
}

.categoryNav__list li.menu-item-has-children > a::after,
.categoryNav__list li.cate-list.menu-item-has-children > a::after {
    content: "\f105" !important;
    font-family: "Line Awesome Free" !important;
    font-weight: 900 !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
}

/* .category-megamenu is a desktop hover-preview panel: a group heading
   (plain, non-clickable <h5>) followed by a few sample PRODUCTS, each
   itself just a <h5> product-name label sitting next to a separate
   <a><img></a> thumbnail link - the name text is never inside the link.
   Previously only the images were hidden here, leaving a list of
   unclickable product-name labels that looked exactly like a normal
   subcategory drill-down (same indentation/typography as a real
   .sub-menu), but tapping them did nothing - genuinely confusing, since
   .cate-list entries (Fashion./Beauty & Elegance) were the only ones in
   the drawer that behaved this way while every other category expands to
   real, tappable subcategory links. Hiding the whole panel instead makes
   these entries plain links like every other top-level category (tap ->
   goes straight to that category's page), consistent with the rest of
   the drawer. The desktop hover dropdown's own copy of this panel
   (.hp-allcat-list .category-megamenu, styled separately above) is
   untouched. */
.categoryNav .category-megamenu {
    display: none !important;
}

/* no content is left to expand under these entries now, so the expand
   chevron (added above for any menu-item-has-children) would be
   misleading here - only draw it for a genuine .sub-menu parent. */
.categoryNav__list li.cate-list.menu-item-has-children > a::after {
    content: none !important;
}

/* .container-one is Bootstrap's own container class (bootstrap5.min.css)
   and steps through the framework's default tiers: 540px at >=576px,
   720px at >=768px, 960px at >=992px. That's exactly what boxed "Our
   Specialty" / Flash Deals / the product page in ~120px on each side at
   tablet widths, while the hero/features/categories sections above them
   use their own full-width wrapper instead of .container-one and so
   didn't have the same gap - the inconsistency, not either width alone,
   was the actual bug. Below 1200px every section now shares one full-
   width-with-gutter container so edges line up across the whole page. */
@media (max-width: 1199.98px) {
    body.hp-site .container.container-one {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 575.98px) {
    body.hp-site .container.container-one {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================
   Category/subcategory/child-category listing grid (2026-09-30) -
   reuses the same shared .hp-pcard partial/markup as the homepage
   "Our Specialty" grid and the product page's "More from this store"
   (both scoped elsewhere, since neither is unconditionally global) -
   this page has no admin-configurable filter sidebar at all currently
   (checked: category.blade.php/subcategory.blade.php/child_category.
   blade.php never had one, unlike the separate shop-page listing), so
   only the card grid itself is redone here.
   ============================================================ */
body.hp-site .hp-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.hp-site .hp-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    body.hp-site .hp-category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body.hp-site .hp-category-grid .hp-pcard {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 14px;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .2s;
}

body.hp-site .hp-category-grid .hp-pcard:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

body.hp-site .hp-category-grid .hp-pcard__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #2e9e5b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 1;
}

body.hp-site .hp-category-grid .hp-pcard__badge--sale {
    background: #e53935;
}

body.hp-site .hp-category-grid .hp-pcard__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin: -14px -14px 12px;
    background: #fff;
}

body.hp-site .hp-category-grid .hp-pcard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.hp-site .hp-category-grid .hp-pcard__title {
    font-size: 15px;
    line-height: 1.35;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 3);
}

body.hp-site .hp-category-grid .hp-pcard__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #111;
}

body.hp-site .hp-category-grid .hp-pcard__meta .rating {
    font-size: 13px;
    font-weight: 400;
    color: #888;
}

body.hp-site .hp-category-grid .hp-pcard__meta .rating i {
    color: #f5a623;
    font-size: 12px;
}

body.hp-site .hp-category-grid .hp-pcard__btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 100%;
    border: 1.5px solid var(--hp-green);
    border-radius: 30px;
    color: var(--hp-green);
    font-size: 14px;
    white-space: nowrap;
    padding: 0 10px;
}

body.hp-site .hp-category-grid .hp-pcard__btn:hover {
    background: var(--hp-green);
    color: #fff;
}

body.hp-site .hp-category-grid .hp-pcard__icons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

body.hp-site .hp-category-grid .hp-pcard__icons a {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--hp-green);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--hp-green);
    font-size: 14px;
}

/* Sort bar above the category/subcategory/child-category grid
   (2026-09-30). These pages have no real filter sidebar anywhere on the
   site to link a "Filters" button to (checked: the theme's own filter
   sidebar markup, in frontend/product/all.blade.php, is dead code - no
   route renders that view - and /shop-page is a page-builder layout with
   no filter UI either), so per the client's own call this stays a plain
   working sort control on the existing data, not a new filter system. */
body.hp-site .hp-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

body.hp-site .hp-sort-bar__count {
    font-size: 14px;
    color: #555;
}

body.hp-site .hp-sort-bar__form {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.hp-site .hp-sort-bar__form label {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
}

body.hp-site .hp-sort-bar__form select {
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 14px;
    background: #fff;
    color: #111;
}

@media (max-width: 575.98px) {
    body.hp-site .hp-sort-bar {
        margin: 12px 0;
        padding: 10px 12px;
    }

    body.hp-site .hp-sort-bar__count {
        font-size: 13px;
    }
}