/* =========================================================
   Rainzon homepage refresh — premium hero, calm quick links
   ========================================================= */
.home .wrap{max-width:1320px}

/* Hero product collage (used when no banner artwork exists) */
.h-collage{position:relative;width:100%;height:100%;min-height:360px;isolation:isolate}
.h-collage-glow{position:absolute;right:4%;top:12%;width:68%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(214,239,110,.34),rgba(214,239,110,0) 68%);filter:blur(2px);z-index:0}
.h-collage-card{position:absolute;display:flex;flex-direction:column;padding:8px;border-radius:17px;
  background:#fff;border:1px solid #E5DFD0;color:#0B1F1A;text-decoration:none;
  box-shadow:0 28px 48px -34px rgba(11,31,26,.5),0 3px 0 rgba(11,31,26,.03);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;z-index:1}
.h-collage-card:hover{transform:translateY(-5px) rotate(0deg);box-shadow:0 34px 58px -30px rgba(11,31,26,.55)}
.h-collage-card--1{width:44%;left:5%;top:11%;transform:rotate(-2.4deg);z-index:3}
.h-collage-card--2{width:37%;right:1%;top:1%;transform:rotate(2.4deg);z-index:2}
.h-collage-card--3{width:33%;right:5%;bottom:0;transform:rotate(-1.4deg);z-index:1}
.h-collage-card--1::after{content:"EDITOR'S PICK";position:absolute;left:15px;top:15px;z-index:2;
  padding:4px 7px;border-radius:999px;background:#0B1F1A;color:#D6EF6E;
  font-size:6.5px;font-weight:800;letter-spacing:.12em}
.h-collage-media{display:grid;place-items:center;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:11px;
  background:linear-gradient(145deg,#F8F5EA,#EFEBDD)}
.h-collage-media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s ease}
.h-collage-card:hover .h-collage-media img{transform:scale(1.04)}
.h-collage-copy{display:flex;flex-direction:column;gap:1px;padding:8px 4px 3px;min-width:0}
.h-collage-copy small{font-size:7px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8C978D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-collage-copy strong{font-size:11px;line-height:1.25;font-weight:750;color:#17271F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-collage-copy span{font-size:11px;font-weight:800;color:#14664B;margin-top:1px}
.h-stage .h-float-a{left:0;bottom:4%;z-index:5}
.h-stage .h-float-b{right:-2px;top:0;z-index:5}
.h-stage .h-stage-num{z-index:0}

/* Quick links — soft paper tiles instead of a rainbow wall */
.home .h-apps{padding:20px 0 4px}
.home .h-apps-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:12px 10px;max-width:none}
.home .h-app{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;text-decoration:none}
.home .h-app-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:17px!important;
  background:#F4F0E4!important;color:#2F5A45!important;border:1px solid #E8E2D4!important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 20px -18px rgba(11,31,26,.45)!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important}
.home .h-app-ic::after{content:"";position:absolute;inset:1px;border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%);pointer-events:none}
.home .h-app-ic .ico{position:relative;z-index:1;width:25px;height:25px}
.home .h-app:hover .h-app-ic{transform:translateY(-2px);box-shadow:0 18px 26px -18px rgba(11,31,26,.5)!important}
.home .h-app b{display:block;max-width:100%;font-size:10.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  color:#314238;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .h-app-1{background:#F7EFD9!important;color:#8C6A23!important}
.home .h-app-2{background:#F4EBDD!important;color:#8A642F!important}
.home .h-app-3{background:#EEF4E4!important;color:#3E704D!important}
.home .h-app-4{background:#EAF4E7!important;color:#2F6B4D!important}
.home .h-app-5{background:#FAE9E2!important;color:#B45237!important}
.home .h-app-6{background:#F7EDE7!important;color:#A45E4A!important}
.home .h-app-7{background:#ECF2E9!important;color:#4E705A!important}
.home .h-app-8{background:#E8F2E7!important;color:#2F6B4F!important}
.home .h-app-9{background:#F6EFE1!important;color:#866B3B!important}
.home .h-app-10{background:#EDF3EA!important;color:#426A51!important}
.home .h-app-img{background:#fff!important;padding:6px}
.home .h-app-img img{width:100%;height:100%;object-fit:contain}

/* Category rail: larger cards + editorial discovery tiles */
.home .h-cat-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.home .h-cat-media{aspect-ratio:1/1;border-radius:18px;background:#F5F2E8;border:1px solid #E8E2D4}
.home .h-cat-fallback{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;
  background:radial-gradient(circle at 30% 20%,#FFFDF7 0%,#F1EDDF 68%,#E8E2D2 100%)}
.home .h-cat-fallback-letter{position:absolute;left:-4px;bottom:-22px;font-family:var(--font-display);font-size:120px;line-height:1;font-weight:700;letter-spacing:-.08em;color:#2F5A45;opacity:.055;pointer-events:none}
.home .h-cat-fallback .ico{position:relative;z-index:1}
.home .h-cat-fallback .ico{width:40px;height:40px;color:#47705A;opacity:.9}
.home .h-cat-meta strong{font-size:12.5px}
.home .h-cat-meta small{font-size:9.5px}
.home .h-cat--promo .h-cat-media{position:relative;display:flex;align-items:flex-end;padding:17px;border:0;overflow:hidden}
.home .h-cat--promo .h-cat-media::after{content:"";position:absolute;right:-35px;top:-45px;width:150px;height:150px;border-radius:50%;
  background:rgba(214,239,110,.22)}
.home .h-cat--promo-ink .h-cat-media{background:linear-gradient(145deg,#0C3125,#14523C)!important;color:#F7F4E6!important}
.home .h-cat--promo-lime .h-cat-media{background:linear-gradient(145deg,#E4F3C4,#D6EF6E)!important;color:#17341F!important}
.home .h-cat-promo-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px}
.home .h-cat-promo-copy small{font-size:7px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.home .h-cat-promo-copy strong{font-family:var(--font-display);font-size:clamp(19px,2vw,27px);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.home .h-cat-promo-copy span{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:9px;font-weight:800;letter-spacing:.01em;opacity:.9}
.home .h-cat--promo .h-cat-meta strong{font-size:12px}
.home .h-cat--promo .h-cat-go{opacity:1;transform:none;background:rgba(255,255,255,.9)}

/* Promise line */
.home .h-promise{border-bottom-color:#E8E2D4}
.home .h-promise-in span{font-size:10.5px}

/* Phone — bring back a compact, product-led hero */
@media(max-width:760px){
  .home .h-hero{display:block!important;padding:10px 0 0}
  .home .h-hero-shell{border-radius:19px;border-color:#E6E0D2;background:linear-gradient(145deg,#FAF8F0 0%,#F1F5E8 100%);
    box-shadow:0 20px 38px -32px rgba(11,31,26,.35)}
  .home .h-slides{height:auto}
  .home .h-slide{position:relative;display:none;grid-template-columns:1fr;padding:0;gap:0;overflow:visible}
  .home .h-slide.is-active{display:flex;flex-direction:column;opacity:1;visibility:visible}
  .home .h-slide::before{display:none}
  .home .h-slide-copy{order:1;padding:20px 18px 2px;max-width:none;text-align:left;align-self:stretch}
  .home .h-kicker{display:inline-flex;width:max-content;padding:5px 9px;border-radius:999px;
    background:rgba(11,31,26,.055);border:1px solid rgba(11,31,26,.07);font-size:8px;letter-spacing:.12em;opacity:1}
  .home .h-kicker-line{width:11px}
  .home .h-display{font-size:32px;line-height:1.02;letter-spacing:-.045em;margin-top:12px}
  .home .h-lede{display:block;margin-top:8px;max-width:32ch;font-size:11.5px;line-height:1.55;opacity:.68}
  .home .h-cta-row{display:flex;justify-content:flex-start;margin-top:14px;gap:8px;flex-wrap:wrap}
  .home .h-btn{height:38px;padding:0 15px;font-size:10.5px}
  .home .h-btn-quiet{display:none}
  .home .h-trust{display:none}
  .home .h-stage{order:2;display:block;position:relative;height:195px;padding:6px 10px 10px;margin:0;z-index:1}
  .home .h-stage-frame{position:absolute;inset:8px 10px 10px;width:auto;height:auto;max-width:none;
    border-radius:14px;padding:7px;background:linear-gradient(145deg,#EFE8D5,#FAF7EE);box-shadow:none}
  .home .h-stage-frame::before{inset:-4px;border-radius:18px}
  .home .h-stage-frame img{width:100%;height:100%;object-fit:contain}
  .home .h-collage{min-height:0;height:100%}
  .home .h-collage-card{padding:6px;border-radius:13px;box-shadow:0 18px 28px -22px rgba(11,31,26,.45)}
  .home .h-collage-card--1{width:41%;left:11%;top:2%;transform:rotate(-2deg)}
  .home .h-collage-card--2{width:35%;right:9%;top:14%;transform:rotate(2deg)}
  .home .h-collage-card--3{display:none}
  .home .h-collage-card--1::after{left:10px;top:10px;font-size:6px;padding:3px 6px}
  .home .h-collage-copy{padding:6px 2px 1px}
  .home .h-collage-copy small{font-size:6.5px}
  .home .h-collage-copy strong{font-size:9.5px}
  .home .h-collage-copy span{font-size:9.5px}
  .home .h-float{display:none}
  .home .h-stage-num{display:none}
  .home .h-hero-bar{display:flex!important;height:39px;padding:0 11px;gap:9px;background:rgba(255,255,255,.34)}
  .home .h-counter strong{font-size:11.5px}
  .home .h-counter span{font-size:8px}
  .home .h-progress{gap:5px;flex:1}
  .home .h-progress button{flex:1;height:14px}
  .home .h-arrows{gap:4px}
  .home .h-arrows button{width:27px;height:27px}

  .home .h-apps{padding:14px 0 2px}
  .home .h-apps-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px 6px}
  .home .h-app-ic{width:54px;height:54px;border-radius:15px!important}
  .home .h-app-ic .ico{width:23px;height:23px}
  .home .h-app b{font-size:9.5px}

  .home .h-cat-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px}
  .home .h-cat{flex:0 0 43vw;scroll-snap-align:start}
  .home .h-cat-media{aspect-ratio:1/1.06;border-radius:14px}
  .home .h-cat-promo-copy strong{font-size:20px}
  .home .h-cat-meta strong{font-size:11.5px}
  .home .h-cat-meta small{font-size:9px}
}
@media(max-width:380px){
  .home .h-display{font-size:29px}
  .home .h-app-ic{width:50px;height:50px}
  .home .h-app b{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .h-collage-card,.home .h-app-ic{transition:none!important}
}

/* Final cascade guards for legacy home/eshop overrides */
.home .h-cats .h-cat-rail{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.home .h-cats .h-cat{min-width:0!important}
.home .h-cats .h-cat--promo-ink .h-cat-media{background:linear-gradient(145deg,#0C3125,#14523C)!important;color:#F7F4E6!important}
.home .h-cats .h-cat--promo-lime .h-cat-media{background:linear-gradient(145deg,#E4F3C4,#D6EF6E)!important;color:#17341F!important}
@media(max-width:760px){
  .home .h-cats .h-cat-rail{display:flex!important;gap:10px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;
    margin:0 -16px!important;padding:0 16px 4px!important}
  .home .h-cats .h-cat{flex:0 0 43vw!important;width:43vw!important;scroll-snap-align:start!important}
  .home .h-cats .h-cat-media{width:100%!important;height:auto!important;aspect-ratio:1/1.06!important;border-radius:14px!important;
    background:#F4F1E8!important;overflow:hidden!important}
  .home .h-cats .h-cat--promo-ink .h-cat-media{background:linear-gradient(145deg,#0C3125,#14523C)!important}
  .home .h-cats .h-cat--promo-lime .h-cat-media{background:linear-gradient(145deg,#E4F3C4,#D6EF6E)!important}
  .home .h-cats .h-cat .h-cat-promo-copy{display:flex!important;position:relative!important;z-index:2!important}
}
@media(max-width:760px){
  body.home .h-cats .h-cat-rail{display:flex!important;gap:10px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;
    grid-template-columns:none!important;margin:0 -16px!important;padding:0 16px 4px!important}
  body.home .h-cats .h-cat{flex:0 0 43vw!important;width:43vw!important;max-width:43vw!important;scroll-snap-align:start!important}
  body.home .h-cats .h-cat .h-cat-media{width:100%!important;height:auto!important;aspect-ratio:1/1.06!important}
}
.home .h-cat-fallback .ico{width:68px!important;height:68px!important;color:#3D6B55!important;opacity:.58!important}
.home .h-cat-fallback-letter{font-size:184px!important;bottom:-42px!important;opacity:.038!important}
.home .h-cat--promo .h-cat-promo-copy{position:absolute!important;left:17px!important;right:17px!important;bottom:17px!important;z-index:3!important}
@media(max-width:760px){
  .home .h-cat-fallback .ico{width:48px!important;height:48px!important}
  .home .h-cat-fallback-letter{font-size:120px!important;bottom:-28px!important}
  .home .h-cat--promo .h-cat-promo-copy{left:12px!important;right:12px!important;bottom:12px!important}
}

/* Tablet — keep the product composition instead of a text-only banner */
@media(min-width:761px) and (max-width:1024px){
  .home .h-slide.is-active{display:grid!important;grid-template-columns:1.12fr .88fr!important;align-items:center!important;
    min-height:355px!important;padding:0!important;gap:0!important;position:relative!important}
  .home .h-slide-copy{order:1!important;padding:34px 12px 34px 34px!important;align-self:center!important}
  .home .h-stage{order:2!important;display:block!important;position:relative!important;height:345px!important;
    padding:8px 14px 8px 0!important;margin:0!important}
  .home .h-stage-frame{position:absolute!important;inset:8px 14px 8px 0!important;width:auto!important;height:auto!important;
    max-width:none!important;border-radius:16px!important;padding:7px!important}
  .home .h-stage-frame img{width:100%!important;height:100%!important;object-fit:contain!important}
  .home .h-collage{min-height:0!important;height:100%!important}
  .home .h-collage-card--1{width:50%!important;left:0!important;top:15%!important}
  .home .h-collage-card--2{width:43%!important;right:0!important;top:3%!important}
  .home .h-collage-card--3{display:none!important}
  .home .h-collage-card{padding:6px!important;border-radius:14px!important}
  .home .h-collage-copy{padding:6px 2px 1px!important}
  .home .h-collage-copy small{font-size:6.5px!important}
  .home .h-collage-copy strong{font-size:9.5px!important}
  .home .h-collage-copy span{font-size:9.5px!important}
  .home .h-float,.home .h-stage-num,.home .h-slide::before{display:none!important}
  .home .h-hero-bar{display:flex!important}
  .home .h-display{font-size:clamp(32px,4.6vw,44px)!important}
}

/* Compact banner + auto product edit */
.h-collage-card{transition:opacity .18s ease,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.h-collage-live{position:absolute;left:6%;top:4px;z-index:7;display:inline-flex;align-items:center;gap:5px;
  padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(11,31,26,.08);
  color:#3E6652;font-size:6.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;backdrop-filter:blur(5px)}
.h-collage-live i{width:4px;height:4px;border-radius:50%;background:#0F8A5C;box-shadow:0 0 0 3px rgba(15,138,92,.10);animation:hLive 2.6s ease-in-out infinite}
@keyframes hLive{0%,100%{opacity:1}50%{opacity:.35}}

@media(min-width:1025px){
  .home .h-slides{height:318px!important}
  .home .h-slide-copy{padding:27px 24px 24px 38px!important}
  .home .h-display{font-size:clamp(34px,3.25vw,48px)!important;margin-top:12px!important;line-height:.98!important}
  .home .h-lede{font-size:12px!important;line-height:1.55!important;margin-top:10px!important;max-width:36ch!important}
  .home .h-cta-row{margin-top:17px!important}
  .home .h-btn{height:40px!important;font-size:11px!important}
  .home .h-trust{margin-top:13px!important;font-size:9.5px!important}
}
@media(min-width:761px) and (max-width:1024px){
  .home .h-slide.is-active{min-height:305px!important}
  .home .h-slide-copy{padding:24px 10px 24px 28px!important}
  .home .h-display{font-size:clamp(28px,4vw,38px)!important}
  .home .h-lede{font-size:11px!important;line-height:1.5!important;margin-top:8px!important}
  .home .h-cta-row{margin-top:13px!important}
  .home .h-btn{height:36px!important;font-size:10px!important}
  .home .h-trust{display:none!important}
  .home .h-stage{height:295px!important}
}
@media(max-width:760px){
  .home .h-hero{padding:7px 0 0!important}
  .home .h-stage{height:152px!important;padding:5px 8px 5px!important}
  .home .h-collage-card--1{width:43%!important;left:12%!important;top:5%!important}
  .home .h-collage-card--2{width:36%!important;right:10%!important;top:12%!important}
  .home .h-collage-card--3{display:none!important}
  .home .h-collage-media{aspect-ratio:4/3!important}
  .home .h-collage-copy{padding:4px 2px 0!important}
  .home .h-collage-copy small{font-size:6px!important}
  .home .h-collage-copy strong{font-size:8.5px!important}
  .home .h-collage-copy span{font-size:8.5px!important;margin-top:0!important}
  .home .h-collage-card--1::after{font-size:5px!important;padding:2px 4px!important;left:7px!important;top:7px!important}
  .home .h-collage-live{display:none!important}
  .home .h-slide-copy{padding:11px 15px 7px!important}
  .home .h-kicker{padding:3px 7px!important;font-size:7px!important;margin-bottom:3px!important}
  .home .h-display{font-size:26px!important;line-height:1.02!important;margin:0 0 3px!important}
  .home .h-lede{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
    overflow:hidden!important;font-size:10.5px!important;line-height:1.45!important;margin:0 0 8px!important;max-width:34ch!important}
  .home .h-cta-row{margin-top:0!important;gap:6px!important}
  .home .h-btn{height:33px!important;padding:0 12px!important;font-size:9.5px!important;border-radius:8px!important}
  .home .h-hero-bar{height:34px!important}
  .home .h-hero-bar .h-arrows button{width:25px!important;height:25px!important}
  .home .h-collage-card{transition:opacity .16s ease}
}
@media(prefers-reduced-motion:reduce){
  .h-collage-live i{animation:none}
}
@media(min-width:1025px){
  .home .h-collage-card{padding:7px!important;border-radius:15px!important}
  .home .h-collage-card--1{width:31.5%!important;left:1.5%!important;top:8%!important;right:auto!important;bottom:auto!important;transform:rotate(-1.8deg)!important}
  .home .h-collage-card--2{width:31.5%!important;left:34.2%!important;right:auto!important;top:2%!important;bottom:auto!important;transform:rotate(1.1deg)!important;z-index:4!important}
  .home .h-collage-card--3{width:31.5%!important;left:auto!important;right:1.5%!important;top:8%!important;bottom:auto!important;transform:rotate(-1.2deg)!important;z-index:3!important}
  .home .h-collage-copy{padding:6px 3px 2px!important}
  .home .h-collage-copy small{font-size:6px!important;letter-spacing:.09em!important}
  .home .h-collage-copy strong{font-size:9.5px!important}
  .home .h-collage-copy span{font-size:9.5px!important}
  .home .h-collage-card--1::after{font-size:5.5px!important;padding:3px 5px!important;left:11px!important;top:11px!important}
}
/* Final compact dimensions */
@media(min-width:1025px){
  .home .h-slides{height:300px!important}
  .home .h-slide-copy{padding:24px 22px 20px 36px!important}
  .home .h-display{font-size:clamp(32px,3vw,44px)!important;margin-top:10px!important}
  .home .h-lede{font-size:11.5px!important;line-height:1.48!important;margin-top:8px!important}
  .home .h-cta-row{margin-top:14px!important}
  .home .h-btn{height:37px!important;font-size:10.5px!important}
  .home .h-trust{margin-top:10px!important;font-size:8.5px!important}
}
@media(min-width:761px) and (max-width:1024px){
  .home .h-slide.is-active{min-height:285px!important}
  .home .h-slide-copy{padding:21px 10px 21px 27px!important}
  .home .h-display{font-size:clamp(27px,3.7vw,35px)!important}
  .home .h-lede{font-size:10.5px!important;line-height:1.45!important;margin-top:7px!important}
  .home .h-cta-row{margin-top:11px!important}
  .home .h-btn{height:34px!important;font-size:9.5px!important}
  .home .h-stage{height:275px!important}
}
@media(max-width:760px){
  .home .h-stage{height:140px!important;padding:4px 7px 4px!important}
  .home .h-collage-card--1{width:38%!important;left:13%!important;top:4%!important}
  .home .h-collage-card--2{width:33%!important;right:10%!important;top:10%!important}
  .home .h-collage-copy{padding:3px 2px 0!important}
  .home .h-collage-copy small{font-size:5.5px!important}
  .home .h-collage-copy strong{font-size:8px!important}
  .home .h-collage-copy span{font-size:8px!important}
  .home .h-slide-copy{padding:8px 15px 3px!important}
  .home .h-kicker{padding:2px 6px!important;font-size:6.5px!important;margin-bottom:2px!important}
  .home .h-display{font-size:25px!important;line-height:.98!important;margin:0 0 2px!important}
  .home .h-lede{-webkit-line-clamp:1!important;font-size:10px!important;line-height:1.4!important;margin:0 0 6px!important}
  .home .h-btn{height:31px!important;padding:0 11px!important;font-size:9px!important}
  .home .h-hero-bar{height:31px!important}
  .home .h-hero-bar .h-arrows button{width:23px!important;height:23px!important}
}
@media(min-width:1025px){.home .h-slides{height:288px!important}}
@media(min-width:761px) and (max-width:1024px){.home .h-slide.is-active{min-height:265px!important}.home .h-stage{height:255px!important}}
/* Compact category cards — wide editorial crops instead of oversized squares */
.home .h-cats .h-cat-media{height:auto!important;aspect-ratio:1.8/1!important}
.home .h-cat-fallback-letter{font-size:128px!important;bottom:-26px!important;opacity:.045!important}
.home .h-cat-fallback .ico{width:54px!important;height:54px!important}
@media(min-width:761px) and (max-width:1024px){
  .home .h-cats .h-cat-media{aspect-ratio:1.7/1!important}
  .home .h-cat-fallback .ico{width:44px!important;height:44px!important}
  .home .h-cat-fallback-letter{font-size:100px!important;bottom:-20px!important}
}
@media(max-width:760px){
  body.home .h-cats .h-cat .h-cat-media{aspect-ratio:1.5/1!important;height:auto!important;border-radius:12px!important}
  .home .h-cat-fallback .ico{width:38px!important;height:38px!important}
  .home .h-cat-fallback-letter{font-size:84px!important;bottom:-18px!important}
  .home .h-cats .h-cat{padding-bottom:0!important}
  .home .h-cats .h-cat-media + .h-cat-meta{padding-top:7px!important}
}

/* Smart category tiles — one icon system, compact responsive sizing */
.home .h-cats .h-cat--tile{position:relative!important;display:flex!important;align-items:center!important;gap:13px!important;
  width:auto!important;min-height:112px!important;height:auto!important;padding:15px 16px!important;
  border:1px solid #E5DFCF!important;border-radius:15px!important;
  background:linear-gradient(145deg,#FFFFFF 0%,#FCFAF3 100%)!important;
  color:#122019!important;text-decoration:none!important;overflow:hidden!important;
  box-shadow:0 10px 24px -26px rgba(11,31,26,.55)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important}
.home .h-cats .h-cat--tile:hover{transform:translateY(-2px)!important;border-color:#C9DCCB!important;
  box-shadow:0 18px 30px -26px rgba(11,31,26,.65)!important}
.home .h-cat-tile-icon{flex:0 0 48px!important;width:48px!important;height:48px!important;border-radius:14px!important;
  display:grid!important;place-items:center!important;background:#EAF3EC!important;color:#0F5138!important}
.home .h-cat-tile-icon .ico{width:27px!important;height:27px!important;display:block!important}
.home .h-cat--tone-2 .h-cat-tile-icon{background:#F7F0DD!important;color:#8A6420!important}
.home .h-cat--tone-3 .h-cat-tile-icon{background:#F7EDE6!important;color:#A95738!important}
.home .h-cat-tile-copy{display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important}
.home .h-cat-tile-copy strong{display:block!important;margin:0!important;color:#122019!important;
  font-family:var(--font-display,'Bricolage Grotesque',sans-serif)!important;font-size:14.5px!important;
  font-weight:650!important;line-height:1.15!important;letter-spacing:-.025em!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.home .h-cat-tile-copy small{display:block!important;margin:0!important;color:#7B8075!important;
  font-size:9px!important;font-weight:700!important;line-height:1.2!important;letter-spacing:.09em!important;text-transform:uppercase!important}
.home .h-cat-tile-go{position:absolute!important;top:12px!important;right:13px!important;width:22px!important;height:22px!important;
  display:grid!important;place-items:center!important;border-radius:50%!important;color:#9AA69C!important;
  opacity:.65!important;transition:opacity .2s ease,transform .2s ease!important}
.home .h-cat--tile:hover .h-cat-tile-go{opacity:1!important;transform:translate(1px,-1px)!important}
.home .h-cat--tile:focus-visible{outline:2px solid #0F8A5C!important;outline-offset:2px!important}

.home .h-cats .h-cat--promo{min-height:112px!important;padding:15px 17px!important;border:0!important;overflow:hidden!important}
.home .h-cats .h-cat--promo-ink{background:linear-gradient(135deg,#0B2F23 0%,#14523C 100%)!important;color:#F7F4E6!important}
.home .h-cats .h-cat--promo-lime{background:linear-gradient(135deg,#E7F4C7 0%,#D6EF6E 100%)!important;color:#17341F!important}
.home .h-cats .h-cat--promo .h-cat-promo-copy{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:5px!important;
  padding:0 28px 0 0!important;z-index:2!important;color:inherit!important;text-align:left!important}
.home .h-cats .h-cat--promo .h-cat-promo-copy small{font-size:7px!important;font-weight:800!important;line-height:1.2!important;
  letter-spacing:.13em!important;text-transform:uppercase!important;opacity:.7!important}
.home .h-cats .h-cat--promo .h-cat-promo-copy strong{font-family:var(--font-display,'Bricolage Grotesque',sans-serif)!important;
  font-size:18px!important;font-weight:600!important;line-height:1.05!important;letter-spacing:-.035em!important;color:inherit!important}
.home .h-cats .h-cat--promo .h-cat-promo-copy span{display:inline-flex!important;align-items:center!important;gap:5px!important;
  margin-top:2px!important;font-size:8.5px!important;font-weight:700!important;line-height:1.2!important;color:inherit!important;opacity:.78!important}
.home .h-cats .h-cat--promo .h-cat-tile-go{color:inherit!important;opacity:.55!important;top:13px!important;right:14px!important}
.home .h-cats .h-cat--promo:hover .h-cat-tile-go{opacity:.95!important}

@media(min-width:761px) and (max-width:1024px){
  .home .h-cats .h-cat--tile{min-height:100px!important;padding:12px!important;gap:10px!important}
  .home .h-cat-tile-icon{flex-basis:40px!important;width:40px!important;height:40px!important;border-radius:12px!important}
  .home .h-cat-tile-icon .ico{width:23px!important;height:23px!important}
  .home .h-cat-tile-copy strong{font-size:12px!important}
  .home .h-cat-tile-copy small{font-size:7.5px!important}
  .home .h-cats .h-cat--promo{min-height:100px!important;padding:12px!important}
  .home .h-cats .h-cat--promo .h-cat-promo-copy strong{font-size:15px!important}
}
@media(max-width:760px){
  .home .h-cats .h-cat--tile{min-height:104px!important;padding:12px 11px!important;gap:9px!important;border-radius:13px!important}
  .home .h-cat-tile-icon{flex-basis:38px!important;width:38px!important;height:38px!important;border-radius:11px!important}
  .home .h-cat-tile-icon .ico{width:21px!important;height:21px!important}
  .home .h-cat-tile-copy strong{font-size:12px!important}
  .home .h-cat-tile-copy small{font-size:7px!important;letter-spacing:.07em!important}
  .home .h-cat-tile-go{top:9px!important;right:9px!important;width:18px!important;height:18px!important}
  .home .h-cats .h-cat--promo{min-height:104px!important;padding:12px 11px!important}
  .home .h-cats .h-cat--promo .h-cat-promo-copy{padding-right:17px!important;gap:4px!important}
  .home .h-cats .h-cat--promo .h-cat-promo-copy strong{font-size:15px!important}
  .home .h-cats .h-cat--promo .h-cat-promo-copy small{font-size:6px!important}
  .home .h-cats .h-cat--promo .h-cat-promo-copy span{font-size:7px!important}
}

/* Four-class selectors beat the legacy mobile eshop card rules */
.home .h-cats .h-cat.h-cat--tile{display:flex!important;align-items:center!important;width:auto!important;
  height:auto!important;min-height:112px!important;padding:15px 16px!important;gap:13px!important;
  border:1px solid #E5DFCF!important;border-radius:15px!important;overflow:hidden!important;
  background:linear-gradient(145deg,#FFFFFF 0%,#FCFAF3 100%)!important;
  box-shadow:0 10px 24px -26px rgba(11,31,26,.55)!important}
.home .h-cats .h-cat.h-cat--promo{min-height:112px!important;height:auto!important;padding:15px 17px!important;
  border:0!important;border-radius:15px!important;overflow:hidden!important}
.home .h-cats .h-cat.h-cat--promo-ink{background:linear-gradient(135deg,#0B2F23 0%,#14523C 100%)!important;color:#F7F4E6!important}
.home .h-cats .h-cat.h-cat--promo-lime{background:linear-gradient(135deg,#E7F4C7 0%,#D6EF6E 100%)!important;color:#17341F!important}
.home .h-cats .h-cat.h-cat--promo .h-cat-promo-copy{position:static!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;left:auto!important;right:auto!important;bottom:auto!important;padding:0 26px 0 0!important}
.home .h-cats .h-cat.h-cat--promo .h-cat-promo-copy strong{font-size:18px!important;line-height:1.05!important}
@media(min-width:761px) and (max-width:1024px){
  .home .h-cats .h-cat.h-cat--tile{min-height:100px!important;padding:12px!important;gap:10px!important}
  .home .h-cats .h-cat.h-cat--promo{min-height:100px!important;padding:12px!important}
  .home .h-cats .h-cat.h-cat--promo .h-cat-promo-copy strong{font-size:15px!important}
}
@media(max-width:760px){
  .home .h-cats .h-cat.h-cat--tile{min-height:104px!important;height:auto!important;padding:12px 11px!important;gap:9px!important;
    border-radius:13px!important;background:linear-gradient(145deg,#FFFFFF 0%,#FCFAF3 100%)!important}
  .home .h-cats .h-cat.h-cat--promo{min-height:104px!important;height:auto!important;padding:12px 11px!important;border-radius:13px!important}
  .home .h-cats .h-cat.h-cat--promo .h-cat-promo-copy strong{font-size:15px!important}
}

/* Step animation for the endless hero product edit */
.h-collage-card.is-step{animation:hCardStep .55s ease both}
.h-collage-card.is-step .h-collage-media img{animation:hCardImage .65s cubic-bezier(.22,1,.36,1) both}
@keyframes hCardStep{0%{opacity:.68}100%{opacity:1}}
@keyframes hCardImage{0%{opacity:.72;transform:scale(1.035)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .h-collage-card.is-step,.h-collage-card.is-step .h-collage-media img{animation:none}
}
/* Keep the edge-to-edge rails from producing a 3px page pan on narrow phones */
body.home{overflow-x:clip!important}

/* Bestsellers — SEE ALL control beside the category tabs */
.h-bests .h-tabs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.h-bests .h-tabs-top .h-tab-row{flex:1 1 auto;min-width:0}
.h-bests .h-bests-see{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;
  padding:9px 14px;border:1px solid #D8D2C2;border-radius:999px;background:#fff;color:#122019;
  font-size:8.5px;font-weight:800;line-height:1;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 6px 14px -16px rgba(11,31,26,.5);transition:background .16s,border-color .16s,transform .16s}
.h-bests .h-bests-see:hover{background:#F4F0E4;border-color:#BFD3C4;transform:translateY(-1px)}
.h-bests .h-bests-see .ico{width:13px;height:13px}
@media(max-width:760px){
  .h-bests .h-tabs-top{gap:8px}
  .h-bests .h-bests-see{padding:8px 11px;font-size:8px;letter-spacing:.1em}
}

/* Mobile hero: three concurrent products, compact premium cards */
@media(max-width:760px){
  .home .h-stage{height:152px!important;padding:3px 6px 5px!important}
  .home .h-collage{height:100%!important;min-height:0!important}
  .home .h-collage-card{display:flex!important;padding:4px!important;border-radius:10px!important;
    box-shadow:0 12px 22px -18px rgba(11,31,26,.42)!important}
  .home .h-collage-card--1{width:30.8%!important;left:.8%!important;right:auto!important;top:4%!important;bottom:auto!important;
    transform:rotate(-1.2deg)!important;z-index:3!important}
  .home .h-collage-card--2{width:30.8%!important;left:34.6%!important;right:auto!important;top:0!important;bottom:auto!important;
    transform:rotate(.6deg)!important;z-index:4!important}
  .home .h-collage-card--3{display:flex!important;width:30.8%!important;left:auto!important;right:.8%!important;top:4%!important;bottom:auto!important;
    transform:rotate(-.8deg)!important;z-index:3!important}
  .home .h-collage-media{aspect-ratio:1/1!important;border-radius:7px!important}
  .home .h-collage-media img{border-radius:7px!important}
  .home .h-collage-copy{padding:4px 2px 0!important;gap:0!important}
  .home .h-collage-copy small{font-size:5.5px!important;letter-spacing:.07em!important;line-height:1.3!important}
  .home .h-collage-copy strong{font-size:8.5px!important;line-height:1.2!important}
  .home .h-collage-copy span{font-size:8.5px!important;line-height:1.2!important;margin-top:1px!important}
  .home .h-collage-card--1::after{display:none!important}
  .home .h-collage-live{display:none!important}
}

/* Mobile final: keep the three-card rail inside the document width */
@media(max-width:760px){
  body.home{overflow-x:hidden!important}
  .home .h-collage-copy small{font-size:6px!important}
  .home .h-collage-copy strong,.home .h-collage-copy span{font-size:8.6px!important}
}
@media(max-width:760px){html{overflow-x:clip!important}}

/* Desktop hero: four-product editorial composition */
@media(min-width:1025px){
  .home .h-collage-card{display:flex!important;padding:7px!important;border-radius:15px!important}
  .home .h-collage-card--1{width:23.2%!important;left:0!important;right:auto!important;top:10%!important;bottom:auto!important;
    transform:rotate(-2deg)!important;z-index:3!important}
  .home .h-collage-card--2{width:23.2%!important;left:25.3%!important;right:auto!important;top:1%!important;bottom:auto!important;
    transform:rotate(.9deg)!important;z-index:4!important}
  .home .h-collage-card--3{width:23.2%!important;left:50.6%!important;right:auto!important;top:6%!important;bottom:auto!important;
    transform:rotate(-1.2deg)!important;z-index:4!important}
  .home .h-collage-card--4{width:23.2%!important;left:auto!important;right:0!important;top:13%!important;bottom:auto!important;
    transform:rotate(1.7deg)!important;z-index:3!important}
  .home .h-collage-card--4::after{content:"NEW IN";position:absolute;left:12px;top:12px;z-index:2;
    padding:4px 7px;border-radius:999px;background:#DDF57F;color:#17341F;font-size:5.5px;font-weight:800;
    letter-spacing:.1em;line-height:1}
  .home .h-collage-copy{padding:6px 3px 2px!important}
  .home .h-collage-copy small{font-size:6px!important;letter-spacing:.08em!important}
  .home .h-collage-copy strong,.home .h-collage-copy span{font-size:9.5px!important}
}
@media(max-width:1024px){
  .home .h-collage-card--4{display:none!important}
}
@media(max-width:760px){
  .home .h-hero-bar{height:44px!important}
  .home .h-hero-bar .h-arrows button{width:36px!important;height:36px!important;min-width:36px!important}
  .home .h-collage-card,.home .h-collage-media{touch-action:pan-y!important}
}

/* Square media fallback: padding-ratio works in older Android Chrome/WebView
   builds that do not support CSS aspect-ratio, where images otherwise collapse
   to 1–2px and the product cards become unreadable. */
.h-collage-media{position:relative!important;display:block!important;width:100%!important;height:0!important;
  padding-top:100%!important;overflow:hidden!important;border-radius:11px!important;background:#F7F4EA!important}
.h-collage-media img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;
  height:100%!important;object-fit:contain!important;border-radius:inherit!important}
@media(max-width:760px){
  .home .h-collage-media{border-radius:7px!important}
}

/* Old Chrome/WebView does not understand the `inset` shorthand; it pushed the
   absolutely positioned product image down by the padding-square height. */
.h-collage-media img{top:0!important;left:0!important;right:0!important;bottom:0!important}

/* Mobile scrolling must remain native. Remove the root overflow clipping that
   can freeze document scrolling in older iOS/Android browsers; contain the
   only bleed source (the category rail) instead. */
html,body.home{overflow-x:visible!important}
.h-collage-glow{pointer-events:none!important}
@media(max-width:760px){
  body.home .h-cats .h-cat-rail{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;
    width:100%!important;max-width:100%!important}
}
@media(max-width:760px){.home .h-cats{overflow:hidden!important}}

/* Product imagery fills its frame */
.h-collage-media img{object-fit:cover!important;object-position:center!important;padding:0!important}


/* 4:5 portrait product frames — slightly elongated, rounded rectangle */
.h-collage-media{padding-top:125%!important}
@media(max-width:760px){
  .home .h-stage{height:192px!important}
  .home .h-collage-card--1,.home .h-collage-card--2,.home .h-collage-card--3{top:2%!important}
}

.h-collage-media{background:#FFFFFF!important}

/* New mobile product-card row: three equal smart frames, no overlap/cropping. */
.h-collage-3d{
  position:absolute!important;right:9px!important;top:9px!important;z-index:8!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:28px!important;height:28px!important;padding:0!important;border-radius:9px!important;
  background:rgba(255,255,255,.92)!important;border:1px solid rgba(11,59,48,.13)!important;
  color:#0B3B30!important;box-shadow:0 6px 14px -10px rgba(0,0,0,.45)!important;
  cursor:pointer!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  line-height:1!important;text-decoration:none!important;
}
.h-collage-3d b{display:none!important}
.h-collage-3d .ico{width:13px!important;height:13px!important;display:block!important}
.h-collage-3d:hover{background:#fff!important;transform:translateY(-1px)}
@media(max-width:760px){
  .home .h-stage{height:auto!important;min-height:0!important;padding:2px 0 6px!important}
  .home .h-collage{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;
    height:auto!important;min-height:0!important;align-items:start!important}
  .home .h-collage-card{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
    top:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;display:flex!important;
    padding:5px!important;transform:none!important;border-radius:12px!important;
    box-shadow:0 10px 20px -18px rgba(11,31,26,.45)!important}
  .home .h-collage-card--3,.home .h-collage-card--4{display:flex!important}
  .home .h-collage-card--4{display:none!important}
  .home .h-collage-media{aspect-ratio:auto!important;height:0!important;padding-top:125%!important;border-radius:8px!important}
  .home .h-collage-copy{padding:5px 2px 2px!important;gap:0!important}
  .home .h-collage-copy small{font-size:5.5px!important;line-height:1.2!important;letter-spacing:.07em!important}
  .home .h-collage-copy strong{font-size:8px!important;line-height:1.2!important;white-space:normal!important;display:-webkit-box!important;
    -webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:19px!important}
  .home .h-collage-copy span{font-size:8px!important;line-height:1.2!important}
  .home .h-collage-3d{width:24px!important;height:24px!important;top:7px!important;right:7px!important;border-radius:7px!important}
  .home .h-collage-3d .ico{width:11px!important;height:11px!important}
  .home .h-collage-card--1::after{display:none!important}
}

.h-collage-3d{display:none!important}

/* Editorial proof rail fills the open right side of the mobile hero copy. */
.h-hero-aside{display:none}
@media(max-width:760px){
  .home .h-slide-copy{position:relative!important}
  .home .h-slide-copy .h-kicker,
  .home .h-slide-copy .h-display,
  .home .h-slide-copy .h-lede{max-width:64%!important}
  .home .h-hero-aside{
    display:flex!important;position:absolute!important;right:15px!important;top:3px!important;bottom:3px!important;
    width:31%!important;max-width:124px!important;min-width:104px!important;padding-left:13px!important;
    border-left:1px solid rgba(11,59,48,.14)!important;flex-direction:column!important;justify-content:center!important;
    gap:4px!important;text-align:left!important;pointer-events:none!important;
  }
  .h-aside-label{display:block;font-size:7px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6C8478;line-height:1}
  .h-aside-score{display:block;font-family:var(--disp);font-size:28px;line-height:.95;letter-spacing:-.04em;color:#0B3B30;font-weight:600}
  .h-aside-score span{font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:0;color:#7D9388;margin-left:1px}
  .h-aside-stars{font-size:8px;letter-spacing:1.5px;color:#B8892C;line-height:1}
  .h-aside-copy{display:block;font-size:8px;line-height:1.35;color:#5F786B;font-weight:600}
  .h-aside-rule{display:block;width:26px;height:1px;background:#CBDCD1;margin:4px 0}
  .h-aside-issue{display:block;font-size:7px;line-height:1.45;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0F6B4F}
}
@media(max-width:760px){
  .home .h-slide-copy .h-lede{
    display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;
    overflow:hidden!important;line-height:1.45!important;font-size:9.5px!important;max-width:64%!important;
  }
}
