.hp-page{
    --hp-primary:var(--sf-primary,#2563eb);
    --hp-secondary:var(--sf-secondary,#0f172a);
    --hp-accent:var(--sf-accent,#f97316);
    --hp-surface:var(--sf-surface,#fff);
    --hp-card:var(--sf-card-bg,#fff);
    --hp-text:var(--sf-text,#0f172a);
    --hp-muted:var(--sf-muted,#64748b);
    --hp-border:var(--sf-border,#e5e7eb);
    --hp-soft:var(--sf-soft,#f8fafc);
    background:var(--hp-soft);
    color:var(--hp-text);
    padding:12px 0 50px;
}

.hp-container{display:grid;gap:0}
.hp-block{margin-top:32px}
.hp-block:first-child{margin-top:0}
.hp-content-block{content-visibility:auto;contain-intrinsic-size:420px}

.hp-section-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
}

.hp-section-header h2{
    margin:0;
    color:var(--hp-secondary);
    font-family:var(--sf-heading-font,inherit);
    font-size:24px;
    line-height:1.18;
    letter-spacing:-.035em;
}

.hp-section-header p{
    max-width:680px;
    margin:5px 0 0;
    color:var(--hp-muted);
    font-size:13px;
    font-weight:720;
    line-height:1.55;
}

.hp-view-all-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    color:var(--hp-primary);
    font-size:13px;
    font-weight:900;
}

.hp-view-all-link svg{width:17px;height:17px;transition:transform .18s ease}
.hp-view-all-link:hover svg{transform:translateX(2px)}

.hp-responsive-grid{
    display:grid!important;
    grid-template-columns:repeat(var(--hp-cols-desktop,1),minmax(0,1fr))!important;
    gap:16px!important;
    align-items:stretch;
}

.hp-button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:12px;
    padding:10px 17px;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}

.hp-button:hover{transform:translateY(-1px)}
.hp-button-primary{
    background:var(--hp-primary);
    color:#fff;
    box-shadow:0 10px 22px color-mix(in srgb,var(--hp-primary) 24%,transparent);
}

/* Full-image hero. Exact admin ratios prevent crop or stretch. */
.hp-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:100%;
    aspect-ratio:256/99;
    border:1px solid var(--hp-border);
    border-radius:20px;
    background:color-mix(in srgb,var(--hp-primary) 5%,var(--hp-surface));
    box-shadow:0 15px 42px rgba(15,23,42,.08);
}

.hp-hero-slide{
    position:absolute;
    inset:0;
    z-index:1;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .42s ease,visibility .42s ease;
}

.hp-hero-slide.is-active{z-index:2;opacity:1;visibility:visible;pointer-events:auto}
.hp-hero-link,.hp-hero-media,.hp-hero-media img{display:block;width:100%;height:100%}
.hp-hero-media img{object-fit:contain;object-position:center;background:var(--hp-surface)}

.hp-hero-controls{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    pointer-events:none;
}

.hp-hero-controls[hidden]{display:none!important}
.hp-hero-arrow{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.54);
    border-radius:50%;
    background:rgba(15,23,42,.34);
    color:#fff;
    box-shadow:0 7px 20px rgba(15,23,42,.14);
    backdrop-filter:blur(10px);
    pointer-events:auto;
    transition:background-color .18s ease,transform .18s ease;
}
.hp-hero-arrow:hover{background:rgba(15,23,42,.58);transform:scale(1.03)}
.hp-hero-arrow svg{width:18px;height:18px}

.hp-hero-dots{
    position:absolute;
    bottom:13px;
    left:50%;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:999px;
    padding:7px 9px;
    background:rgba(15,23,42,.30);
    transform:translateX(-50%);
    backdrop-filter:blur(10px);
    pointer-events:auto;
}

.hp-hero-dot{
    width:7px;
    height:7px;
    border:0;
    border-radius:999px;
    padding:0;
    background:rgba(255,255,255,.60);
    transition:width .2s ease,background-color .2s ease;
}
.hp-hero-dot.is-active{width:24px;background:#fff}
.hp-hero-dot[hidden]{display:none!important}

.hp-hero-empty{
    position:absolute;
    inset:0;
    z-index:4;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:clamp(24px,5vw,58px);
    background:linear-gradient(115deg,var(--hp-secondary),var(--hp-primary));
    color:#fff;
}
.hp-hero-empty.is-visible,.hp-hero-empty:not([hidden]){display:flex}
.hp-hero-empty strong{font-size:clamp(25px,4vw,44px);letter-spacing:-.04em}
.hp-hero-empty a{border-radius:12px;padding:12px 17px;background:#fff;color:var(--hp-secondary);font-weight:900}

/* One-row trust strip on every device. */
.hp-trust{
    margin-top:14px;
    overflow:hidden;
    border:1px solid var(--hp-border);
    border-radius:17px;
    background:var(--hp-surface);
    box-shadow:0 7px 24px rgba(15,23,42,.04);
}

.hp-trust-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-trust-item{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 15px;
    border-right:1px solid var(--hp-border);
}
.hp-trust-item:last-child{border-right:0}
.hp-trust-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:color-mix(in srgb,var(--hp-primary) 9%,var(--hp-surface));
    color:var(--hp-primary);
}
.hp-trust-icon svg{width:19px;height:19px}
.hp-trust-copy{min-width:0;display:grid;gap:2px}
.hp-trust-copy strong{overflow:hidden;color:var(--hp-secondary);font-size:12px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.hp-trust-copy small{overflow:hidden;color:var(--hp-muted);font-size:10px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}

/* Shared category/brand carousel */
.hp-carousel-controls{display:flex;gap:7px}
.hp-carousel-button{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--hp-border);
    border-radius:11px;
    background:var(--hp-surface);
    color:var(--hp-secondary);
    transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.hp-carousel-button:hover{
    border-color:color-mix(in srgb,var(--hp-primary) 55%,var(--hp-border));
    background:color-mix(in srgb,var(--hp-primary) 6%,var(--hp-surface));
    color:var(--hp-primary);
}
.hp-carousel-button svg{width:17px;height:17px}

.hp-card-row{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    padding:1px 1px 5px;
}
.hp-card-row::-webkit-scrollbar{display:none}

.hp-slide-card{
    flex:0 0 calc((100% - (var(--hp-cols-desktop,6) - 1)*14px)/var(--hp-cols-desktop,6));
    min-width:0;
    scroll-snap-align:start;
}

.hp-category-card{
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--hp-border);
    border-radius:17px;
    background:var(--hp-card);
    box-shadow:0 7px 24px rgba(15,23,42,.045);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.hp-category-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--hp-primary) 42%,var(--hp-border));
    box-shadow:0 13px 32px rgba(15,23,42,.075);
}
.hp-category-media{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:color-mix(in srgb,var(--hp-primary) 4%,var(--hp-soft));
}
.hp-category-media img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.hp-category-card:hover .hp-category-media img{transform:scale(1.035)}
.hp-category-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:var(--hp-primary);
    font-size:34px;
    font-weight:900;
    background:linear-gradient(145deg,color-mix(in srgb,var(--hp-primary) 10%,var(--hp-surface)),var(--hp-surface));
}

.hp-card-title{
    display:block;
    max-width:100%;
    overflow:hidden;
    color:var(--hp-secondary);
    font-size:13px;
    font-weight:900;
    line-height:1.35;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.hp-category-card>.hp-card-title{padding:11px 10px 12px}

.hp-brand-card{
    display:grid;
    justify-items:center;
    gap:8px;
    border:1px solid var(--hp-border);
    border-radius:16px;
    padding:13px 11px 12px;
    background:var(--hp-card);
    text-align:center;
    box-shadow:0 7px 24px rgba(15,23,42,.04);
    transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.hp-brand-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--hp-primary) 42%,var(--hp-border));
    box-shadow:0 12px 30px rgba(15,23,42,.07);
}
.hp-brand-logo{
    width:100%;
    aspect-ratio:16/9;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:11px;
    background:color-mix(in srgb,var(--hp-primary) 3%,var(--hp-soft));
}
.hp-brand-logo img{width:82%;height:76%;object-fit:contain}
.hp-brand-logo>span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:color-mix(in srgb,var(--hp-primary) 10%,var(--hp-surface));
    color:var(--hp-primary);
    font-size:20px;
    font-weight:900;
}

/* Existing global product-card design remains untouched. */
.hp-product-grid{
    display:grid!important;
    grid-template-columns:repeat(var(--hp-cols-desktop,4),minmax(0,1fr))!important;
    gap:16px!important;
    align-items:stretch;
}
.hp-product-item{min-width:0;display:flex}
.hp-product-item>.product-card{width:100%;height:100%}

/* Full-image promotional banners. */
.hp-promo{
    position:relative;
    overflow:hidden;
    display:block;
    width:100%;
    aspect-ratio:1600/500;
    border:1px solid var(--hp-border);
    border-radius:17px;
    background:color-mix(in srgb,var(--hp-primary) 4%,var(--hp-surface));
    box-shadow:0 9px 30px rgba(15,23,42,.06);
    transition:transform .2s ease,box-shadow .2s ease;
}
.hp-promo:hover{transform:translateY(-1px);box-shadow:0 13px 34px rgba(15,23,42,.08)}
.hp-promo-media,.hp-promo-media img{display:block;width:100%;height:100%}
.hp-promo-media img{object-fit:cover;object-position:center}

.hp-final-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border:1px solid var(--hp-border);
    border-radius:17px;
    padding:19px 21px;
    background:var(--hp-surface);
}
.hp-final-cta>div{display:grid;gap:4px}
.hp-final-cta strong{color:var(--hp-secondary);font-size:19px;font-weight:900;letter-spacing:-.02em}
.hp-final-cta span{color:var(--hp-muted);font-size:12px;font-weight:700}

/* Responsive visibility */
@media(min-width:1181px){
    .hp-hide-desktop{display:none!important}
    .hp-device-tablet,.hp-device-mobile{display:none!important}
}

@media(max-width:1180px) and (min-width:768px){
    .hp-responsive-grid{grid-template-columns:repeat(var(--hp-cols-tablet,1),minmax(0,1fr))!important}
    .hp-hide-tablet{display:none!important}
    .hp-device-desktop,.hp-device-mobile{display:none!important}
    .hp-hero{aspect-ratio:256/99}
    .hp-promo{aspect-ratio:1200/500}
    .hp-slide-card{flex-basis:calc((100% - (var(--hp-cols-tablet,4) - 1)*14px)/var(--hp-cols-tablet,4))}
    .hp-product-grid{grid-template-columns:repeat(var(--hp-cols-tablet,3),minmax(0,1fr))!important}
    .hp-trust-copy small{display:none}
}

@media(max-width:767px){
    .hp-page{padding:9px 0 34px}
    .hp-block{margin-top:24px}
    .hp-content-block{contain-intrinsic-size:360px}
    .hp-responsive-grid{grid-template-columns:repeat(var(--hp-cols-mobile,1),minmax(0,1fr))!important;gap:11px!important}
    .hp-hide-mobile{display:none!important}
    .hp-device-desktop,.hp-device-tablet{display:none!important}

    .hp-section-header{align-items:center;gap:12px;margin-bottom:11px}
    .hp-section-header h2{font-size:19px;line-height:1.2}
    .hp-section-header p{display:none}
    .hp-view-all-link{font-size:12px}

    .hp-hero{aspect-ratio:256/99;border-radius:14px;box-shadow:0 9px 28px rgba(15,23,42,.075)}
    .hp-hero-controls{padding:0 8px}
    .hp-hero-arrow{display:none}
    .hp-hero-dots{bottom:9px;padding:6px 8px}
    .hp-hero-dot.is-active{width:20px}
    .hp-hero-empty{align-items:flex-start;justify-content:flex-end;flex-direction:column;padding:22px}

    .hp-trust{margin-top:11px;border-radius:14px}
    .hp-trust-row{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        overflow:visible;
    }
    .hp-trust-item{
        min-width:0;
        min-height:86px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:7px;
        padding:10px 5px;
        text-align:center;
        border-right:1px solid var(--hp-border);
    }
    .hp-trust-icon{width:32px;height:32px;flex:0 0 32px;border-radius:9px}
    .hp-trust-icon svg{width:17px;height:17px}
    .hp-trust-copy{display:block;width:100%}
    .hp-trust-copy strong{display:block;overflow:visible;font-size:10px;line-height:1.2;text-overflow:clip;white-space:normal}
    .hp-trust-copy small{display:none}

    .hp-carousel-controls{display:flex;gap:6px;flex:0 0 auto}
    .hp-carousel-button{width:32px;height:32px;border-radius:10px}
    .hp-carousel-button svg{width:15px;height:15px}
    .hp-content-block{content-visibility:visible;contain-intrinsic-size:auto}
    .hp-card-row{gap:10px;padding-bottom:3px;scroll-snap-type:x proximity}
    .hp-slide-card{flex-basis:calc((100% - (var(--hp-cols-mobile,2) - 1)*10px)/var(--hp-cols-mobile,2))}
    .hp-category-card{border-radius:14px}
    .hp-category-card>.hp-card-title{padding:9px 8px 10px;font-size:11px}
    .hp-brand-card{gap:6px;border-radius:14px;padding:10px 8px 9px}
    .hp-brand-card .hp-card-title{font-size:11px}

    .hp-product-grid{grid-template-columns:repeat(var(--hp-cols-mobile,2),minmax(0,1fr))!important;gap:10px!important}

    .hp-promo{aspect-ratio:1080/600;border-radius:14px}

    .hp-final-cta{align-items:flex-start;flex-direction:column;gap:13px;border-radius:15px;padding:16px}
    .hp-final-cta strong{font-size:17px}
}

@media(max-width:390px){
    .hp-trust-item{min-height:82px;padding:9px 3px}
    .hp-trust-copy strong{font-size:9px}
    .hp-product-grid{gap:9px!important}
    .hp-card-row{gap:9px}
    .hp-slide-card{flex-basis:calc((100% - (var(--hp-cols-mobile,2) - 1)*9px)/var(--hp-cols-mobile,2))}
}

@media(prefers-reduced-motion:reduce){
    .hp-hero-slide,.hp-category-card,.hp-category-media img,.hp-brand-card,.hp-promo,.hp-button,.hp-view-all-link svg{transition:none!important}
    .hp-card-row{scroll-behavior:auto}
}


/* =========================================================
   Home viewport containment v2
   Keeps the homepage tied to the actual browser viewport.
   This prevents data-heavy carousels/grids from widening the
   page while preserving internal horizontal carousel scrolling.
   ========================================================= */
.hp-page{
    width:100%;
    max-width:100vw;
    min-width:0;
    overflow-x:hidden;
}

@supports (overflow:clip){
    .hp-page{overflow-x:clip}
}

.hp-container{
    width:min(1240px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    min-width:0!important;
    margin-inline:auto!important;
    contain:inline-size;
}

.hp-container,
.hp-container > *,
.hp-block,
.hp-content-block,
.hp-carousel-section,
.hp-section-header,
.hp-responsive-grid,
.hp-product-grid,
.hp-product-item,
.hp-final-cta,
.hp-trust,
.hp-trust-row{
    min-width:0!important;
    max-width:100%;
}

.hp-section-header > *{
    min-width:0;
    max-width:100%;
}

.hp-card-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto;
    overflow-y:hidden;
}

.hp-slide-card,
.hp-category-card,
.hp-brand-card,
.hp-product-item,
.hp-product-item > .product-card{
    min-width:0;
    max-width:100%;
}

.hp-hero,
.hp-promo,
.hp-trust,
.hp-final-cta{
    width:100%;
    max-width:100%;
}

@media(max-width:767px){
    .hp-container{
        width:calc(100vw - 26px)!important;
        max-width:calc(100vw - 26px)!important;
    }
}

@media(max-width:390px){
    .hp-container{
        width:calc(100vw - 22px)!important;
        max-width:calc(100vw - 22px)!important;
    }
}