.valyx-home-hero{--vh-brand:#0f172a;--vh-brand-hover:#17233b;--vh-text:#101828;--vh-muted:#667085;--vh-border:#e6eaf0;--vh-soft:#f8fafc;--vh-blue:#2563eb;--vh-green:#16845b;background:#fff;color:var(--vh-text);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.valyx-home-hero,.valyx-home-hero *,.valyx-home-hero *:before,.valyx-home-hero *:after{box-sizing:border-box}.valyx-home-hero__container{width:min(calc(100% - 48px),1200px);margin-inline:auto;padding:54px 0 44px}.valyx-home-hero__top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);align-items:center;gap:62px}.valyx-home-hero__eyebrow{margin:0 0 15px;color:var(--vh-blue);font-size:10px;line-height:1.2;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.valyx-home-hero__title{max-width:560px;margin:0;color:var(--vh-brand);font-size:clamp(46px,4vw,60px);line-height:1.02;font-weight:600;letter-spacing:-.055em}.valyx-home-hero__title span{display:block;color:var(--vh-blue)}.valyx-home-hero__lead{max-width:520px;margin:22px 0 0;color:var(--vh-muted);font-size:16px;line-height:1.65;letter-spacing:-.015em}.valyx-home-hero__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}.valyx-home-hero__button{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;border:1px solid transparent;border-radius:11px;font-size:14px;font-weight:600;text-decoration:none;transition:.18s ease}.valyx-home-hero__button:hover{transform:translateY(-1px)}.valyx-home-hero__button--primary{background:var(--vh-brand);color:#fff;box-shadow:0 8px 18px rgba(15,23,42,.12)}.valyx-home-hero__button--primary:hover{background:var(--vh-brand-hover);color:#fff}.valyx-home-hero__button--secondary{border-color:var(--vh-border);background:#fff;color:var(--vh-brand)}.valyx-home-hero__button--secondary:hover{border-color:#cbd5e1;background:var(--vh-soft);color:var(--vh-brand)}.valyx-home-hero__button svg{width:14px;height:14px;stroke:currentColor}.valyx-home-hero__proof{margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none}.valyx-home-hero__proof li{display:flex;align-items:flex-start;gap:10px}.valyx-home-hero__proof-icon{width:30px;height:30px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#edf8f3;color:var(--vh-green)}.valyx-home-hero__proof-icon svg{width:15px;height:15px;stroke:currentColor}.valyx-home-hero__proof strong,.valyx-home-hero__proof small{display:block}.valyx-home-hero__proof strong{font-size:11px;line-height:1.3;font-weight:600}.valyx-home-hero__proof small{margin-top:3px;color:var(--vh-muted);font-size:9px;line-height:1.35}.valyx-home-hero__featured{position:relative;min-height:500px;overflow:hidden;border-radius:22px;background:#eaf2ff}.valyx-home-hero__slides{position:absolute;inset:0}.valyx-home-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.015);transition:opacity .42s ease,visibility .42s ease,transform .55s ease}.valyx-home-hero__slide.is-active{opacity:1;visibility:visible;transform:scale(1)}.valyx-home-hero__slide-image{width:100%;height:100%;display:block;object-fit:cover}.valyx-home-hero__slide-top{position:absolute;top:20px;right:20px;left:20px;z-index:3;display:flex;justify-content:space-between;gap:12px}.valyx-home-hero__badge{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.76);border-radius:999px;background:rgba(255,255,255,.82);color:var(--vh-brand);font-size:10px;font-weight:600;backdrop-filter:blur(10px)}.valyx-home-hero__badge svg{width:15px;height:15px;stroke:currentColor}.valyx-home-hero__badge--status{font-weight:700;letter-spacing:.05em;text-transform:uppercase}.valyx-home-hero__badge--status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vh-green)}.valyx-home-hero__slide-price{position:absolute;right:24px;bottom:24px;left:24px;z-index:3;max-width:200px;color:var(--vh-brand)}.valyx-home-hero__slide-price small,.valyx-home-hero__slide-price strong,.valyx-home-hero__slide-price span{display:block}.valyx-home-hero__slide-price small{font-size:10px;font-weight:600}.valyx-home-hero__slide-price strong{margin-top:4px;font-size:28px;line-height:1;font-weight:700}.valyx-home-hero__slide-price span{margin-top:6px;font-size:10px;font-weight:600}.valyx-home-hero__slider-arrow{position:absolute;top:50%;z-index:5;width:42px;height:42px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.76);border-radius:50%;background:rgba(255,255,255,.88);color:var(--vh-brand);cursor:pointer;transform:translateY(-50%)}.valyx-home-hero__slider-arrow--prev{left:18px}.valyx-home-hero__slider-arrow--next{right:18px}.valyx-home-hero__slider-arrow svg{width:18px;height:18px;stroke:currentColor}.valyx-home-hero__dots{position:absolute;bottom:18px;left:50%;z-index:5;display:flex;gap:7px;transform:translateX(-50%)}.valyx-home-hero__dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(15,23,42,.22)}.valyx-home-hero__dot.is-active{width:20px;background:var(--vh-brand)}.valyx-home-hero__featured-link{position:absolute;inset:0;z-index:1}.valyx-home-hero__discovery{margin-top:42px}.valyx-home-hero__purpose-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.valyx-home-hero__purpose-head h2{margin:0;color:var(--vh-brand);font-size:19px;font-weight:600}.valyx-home-hero__purpose-head a{color:var(--vh-blue);font-size:12px;font-weight:600;text-decoration:none}.valyx-home-hero__purposes{margin-top:18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.valyx-home-hero__purpose{min-height:48px;display:flex;align-items:center;gap:10px;padding:8px 13px;border:1px solid var(--vh-border);border-radius:10px;background:#fff;color:var(--vh-text);font-size:12px;font-weight:600;text-decoration:none}.valyx-home-hero__purpose-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--vh-soft);color:var(--vh-brand)}.valyx-home-hero__purpose-icon svg{width:15px;height:15px;stroke:currentColor}.valyx-home-hero__cards{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.valyx-home-hero__card{position:relative;min-height:150px;overflow:hidden;display:block;padding:22px;border-radius:16px;color:var(--vh-brand);text-decoration:none;transition:.18s ease}.valyx-home-hero__card:hover{transform:translateY(-2px);color:var(--vh-brand);box-shadow:0 14px 28px rgba(15,23,42,.08)}.valyx-home-hero__card--blue{background:#eaf2ff}.valyx-home-hero__card--green{background:#edf8f3}.valyx-home-hero__card--lavender{background:#eef2ff}.valyx-home-hero__card-copy{position:relative;z-index:2;width:48%;max-width:48%;min-width:0}.valyx-home-hero__card-copy strong,.valyx-home-hero__card-copy small{display:block;max-width:100%;overflow-wrap:anywhere;word-break:normal}.valyx-home-hero__card-copy strong{font-size:15px;font-weight:600}.valyx-home-hero__card-copy small{margin-top:7px;color:var(--vh-muted);font-size:11px;line-height:1.45}.valyx-home-hero__card-arrow{position:absolute;bottom:18px;left:20px;z-index:2;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.88);font-size:22px}.valyx-home-hero__card img{position:absolute;right:0;bottom:0;width:46%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none}@media(max-width:1040px){.valyx-home-hero__top{grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr);gap:42px}.valyx-home-hero__featured{min-height:440px}}@media(max-width:900px){.valyx-home-hero__container{width:min(calc(100% - 32px),720px);padding:40px 0 36px}.valyx-home-hero__top{grid-template-columns:1fr;gap:30px}.valyx-home-hero__featured{min-height:470px}.valyx-home-hero__purposes{grid-template-columns:repeat(3,minmax(0,1fr))}.valyx-home-hero__cards{grid-template-columns:1fr}}@media(max-width:600px){.valyx-home-hero__container{width:100%;padding:28px 0 30px}.valyx-home-hero__copy{padding-inline:18px}.valyx-home-hero__eyebrow{margin-bottom:10px;font-size:9px}.valyx-home-hero__title{font-size:clamp(36px,10.8vw,46px);line-height:1.04}.valyx-home-hero__lead{margin-top:16px;font-size:14px}.valyx-home-hero__actions{margin-top:22px;display:grid;grid-template-columns:1fr}.valyx-home-hero__button{width:100%;min-height:48px;font-size:13px}.valyx-home-hero__proof{margin-top:20px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.valyx-home-hero__proof li{display:block}.valyx-home-hero__proof-icon{margin-bottom:7px;width:25px;height:25px}.valyx-home-hero__featured{min-height:370px;margin:0 18px;border-radius:18px}.valyx-home-hero__slide-top{top:14px;right:14px;left:14px}.valyx-home-hero__badge{padding:7px 9px;font-size:8px}.valyx-home-hero__slide-price{right:16px;bottom:18px;left:16px}.valyx-home-hero__discovery{margin-top:30px;padding-inline:18px}.valyx-home-hero__purposes{overflow-x:auto;scroll-snap-type:x mandatory;grid-template-columns:repeat(5,minmax(128px,40vw));padding-bottom:4px;scrollbar-width:none}.valyx-home-hero__purposes::-webkit-scrollbar{display:none}.valyx-home-hero__cards{overflow-x:auto;scroll-snap-type:x mandatory;grid-template-columns:repeat(3,minmax(292px,86vw));padding-bottom:4px;scrollbar-width:none}.valyx-home-hero__cards::-webkit-scrollbar{display:none}.valyx-home-hero__card{min-height:154px;padding:20px 18px;scroll-snap-align:start}.valyx-home-hero__card-copy{width:54%;max-width:54%;padding-right:8px}.valyx-home-hero__card-copy strong{font-size:14px;line-height:1.28}.valyx-home-hero__card-copy small{margin-top:6px;font-size:10px;line-height:1.42}.valyx-home-hero__card img{right:4px;bottom:4px;width:40%;height:92%;object-fit:contain;object-position:center bottom}.valyx-home-hero__card-arrow{left:18px;bottom:16px}}@media(max-width:430px){.valyx-home-hero__cards{grid-template-columns:repeat(3,minmax(280px,88vw))}.valyx-home-hero__card{padding:19px 17px}.valyx-home-hero__card-copy{width:56%;max-width:56%}.valyx-home-hero__card img{right:2px;width:38%;height:90%}}@media(max-width:390px){.valyx-home-hero__title{font-size:35px}.valyx-home-hero__featured{min-height:340px}.valyx-home-hero__badge:last-child{display:none}}

/* =========================================================
   HERO SLIDE IMAGE FIT MODES
   Append this after your existing slider-image styles.
   ========================================================= */

.valyx-home-hero__slides,
.valyx-home-hero__slide,
.valyx-home-hero__slide-media {
    position: absolute;
    inset: 0;
}

.valyx-home-hero__slide-media {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(255, 255, 255, 0.64) 0%,
            rgba(232, 242, 255, 0.78) 38%,
            rgba(205, 224, 249, 0.96) 100%
        );
}

.valyx-home-hero__slide-image {
    width: 100%;
    height: 100%;

    display: block;

    object-position: center;
}

/* page-hero-1.png and page-hero-2.png remain full-bleed. */
.valyx-home-hero__slide--cover .valyx-home-hero__slide-image {
    object-fit: cover;
}

/* hero-1.png, hero-4.png and hero-5.png remain fully visible. */
.valyx-home-hero__slide--contain .valyx-home-hero__slide-media {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 14px 16px 22px;
}

.valyx-home-hero__slide--contain .valyx-home-hero__slide-image {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

@media (max-width: 1040px) {
    .valyx-home-hero__slide--contain .valyx-home-hero__slide-media {
        padding: 12px 14px 20px;
    }
}

@media (max-width: 600px) {
    .valyx-home-hero__slide--contain .valyx-home-hero__slide-media {
        padding: 6px 7px 16px;
    }

    .valyx-home-hero__slide--contain .valyx-home-hero__slide-image {
        object-position: center center;
    }
}

@media (max-width: 390px) {
    .valyx-home-hero__slide--contain .valyx-home-hero__slide-media {
        padding: 4px 5px 14px;
    }
}

/* =========================================================
   HERO SLIDER ARROWS — HOVER REVEAL
   Hidden by default on pointer devices; visible on hover/focus.
   Touch devices retain visible controls for usability.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
    .valyx-home-hero__slider-arrow {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform:
            translateY(-50%)
            scale(0.92);

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease,
            background 0.18s ease,
            border-color 0.18s ease;
    }

    .valyx-home-hero__featured:hover
        .valyx-home-hero__slider-arrow,
    .valyx-home-hero__featured:focus-within
        .valyx-home-hero__slider-arrow {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform:
            translateY(-50%)
            scale(1);
    }
}

@media (hover: none), (pointer: coarse) {
    .valyx-home-hero__slider-arrow {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Keep slider controls above the full-card shop link. */
.valyx-home-hero__slider-arrow,
.valyx-home-hero__dots {
    z-index: 6;
}


/* =========================================================
   HERO SLIDES — ALL IMAGES FULL-BLEED
   Final override: every slide now uses cover.
   ========================================================= */

.valyx-home-hero__slide-media {
    display: block;
    padding: 0;
}

.valyx-home-hero__slide-image,
.valyx-home-hero__slide--cover .valyx-home-hero__slide-image,
.valyx-home-hero__slide--contain .valyx-home-hero__slide-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.valyx-home-hero__slide--contain .valyx-home-hero__slide-media {
    display: block;
    padding: 0;
}

@media (max-width: 1040px) {
    .valyx-home-hero__slide--contain .valyx-home-hero__slide-media {
        padding: 0;
    }
}

@media (max-width: 600px) {
    .valyx-home-hero__slide--contain .valyx-home-hero__slide-media {
        padding: 0;
    }

    .valyx-home-hero__slide--contain .valyx-home-hero__slide-image {
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 390px) {
    .valyx-home-hero__slide--contain .valyx-home-hero__slide-media {
        padding: 0;
    }
}