/* Front page: full-size hero with a 45 px peek at the category cards below. */
body.lh-page {overflow-x:clip;}
.home-main.home-full {padding-top:0;}
/* The hero fills the window except for a 45 px peek at the category cards below (--fh-top is measured by home-light.js). */
.fh {--fh-top:119px;--fh-gap:24px;--fh-peek:45px;position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);height:calc(100svh - var(--fh-top) - var(--fh-gap) - var(--fh-peek));min-height:440px;max-height:1000px;overflow:hidden;background:#d9d4cb;}
.fh picture {display:contents;}
.fh-image {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;z-index:-1;}
.fh-bl::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(9,28,32,.5),rgba(9,28,32,0) 50%);}
.fh-content {position:absolute;left:0;right:0;bottom:clamp(36px,6vh,72px);display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
.fh-title {margin:0;color:#fff;font-size:clamp(40px,4.4vw,68px);font-weight:750;line-height:1.05;letter-spacing:-.03em;max-width:12em;}
body .home-main a.fh-button {display:inline-flex;align-items:center;min-height:56px;padding:0 32px;border-radius:99px;background:#fff;color:var(--ink);font-size:17px;font-weight:700;text-decoration:none;transition:background-color .15s;}
body .home-main a.fh-button:hover {background:var(--green);}

.home-categories-bare.home-section {margin-top:24px;}
@media (max-width:700px) {
 .fh {--fh-gap:16px;min-height:420px;}
 .fh-image {object-position:62% 40%;}
 .fh-bl::after {background:linear-gradient(0deg,rgba(9,28,32,.6),rgba(9,28,32,0) 55%);}
 .fh-content {bottom:28px;gap:18px;}
 .fh-title {font-size:clamp(32px,9vw,40px);}
 body .home-main a.fh-button {min-height:52px;padding:0 28px;font-size:16px;}
}
@media (max-width:1000px) {.fh {--fh-top:103px;}}
@media (max-width:700px) {.fh {--fh-top:96px;} .home-categories-bare.home-section {margin-top:16px;}}
@media (prefers-reduced-motion:reduce) {body .home-main a.fh-button {transition:none;}}

/* Price circle (live price of the complete pack), top left, aligned with the heading. */
.fh-offer {position:absolute;top:clamp(24px,4.5vh,44px);left:0;right:0;pointer-events:none;}
.fh-price {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:clamp(180px,16vw,230px);aspect-ratio:1;margin:0;border-radius:50%;background:var(--green);color:var(--ink);}
.fh-price > span {font-size:clamp(20px,1.75vw,25px);font-weight:750;line-height:1.2;letter-spacing:-.025em;}
.fh-price strong {display:flex;align-items:baseline;font-size:clamp(72px,6.4vw,92px);font-weight:800;line-height:1;letter-spacing:-.065em;}
.fh-price small {font-size:.48em;letter-spacing:-.06em;margin-left:3px;}
@media (max-width:700px) {
 .fh-offer {top:18px;}
 .fh-price {width:136px;gap:4px;}
 .fh-price > span {font-size:16px;}
 .fh-price strong {font-size:54px;}
}

/* Subtext under the hero heading: what the pack contains. */
.fh-sub {margin:-10px 0 4px;max-width:34em;color:#fff;font-size:clamp(17px,1.35vw,21px);font-weight:500;line-height:1.45;text-shadow:0 1px 12px rgba(9,28,32,.35);text-wrap:balance;}
@media (max-width:700px) {.fh-sub {margin:-8px 0 2px;font-size:16px;max-width:22em;}}

/* Feature section (nitrile gloves): one image, heading, one line, price and button. Text on the right, in dark ink on the light part of the photo. */
.fs.home-section {position:relative;isolation:isolate;height:clamp(460px,64vh,640px);border-radius:18px;overflow:hidden;background:#efe9df;}
.fs picture {display:contents;}
.fs-image {position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:30% 15%;}
.fs-content {position:absolute;top:50%;right:clamp(32px,6vw,96px);width:min(440px,40%);transform:translateY(-50%);color:var(--ink);}
.fs h2 {margin:0 0 12px;color:var(--ink);font-size:clamp(34px,3.4vw,52px);font-weight:750;line-height:1.05;letter-spacing:-.03em;}
.fs-sub {margin:0 0 26px;color:var(--ink);font-size:clamp(17px,1.3vw,20px);line-height:1.45;text-wrap:balance;}
.fs-buy {display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;}
.fs-price {display:flex;align-items:baseline;color:var(--ink);font-size:clamp(40px,3.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.05em;}
.fs-price small {font-size:.5em;margin-left:2px;letter-spacing:-.04em;}
body .home-main a.fs-button {display:inline-flex;align-items:center;min-height:56px;padding:0 30px;border-radius:99px;background:var(--ink);color:#fff;font-size:17px;font-weight:700;text-decoration:none;transition:background-color .15s;}
body .home-main a.fs-button:hover {background:#285d6b;}
@media (max-width:700px) {
 .fs.home-section {height:auto;aspect-ratio:2/3;max-height:calc(100svh - 120px);min-height:520px;border-radius:14px;}
 .fs-image {object-position:50% 20%;}
 .fs-content {top:auto;bottom:24px;left:20px;right:20px;width:auto;transform:none;}
 .fs h2 {font-size:34px;margin-bottom:8px;}
 .fs-sub {font-size:16px;margin-bottom:18px;}
 .fs-price {font-size:40px;}
 body .home-main a.fs-button {min-height:52px;padding:0 26px;font-size:16px;}
}
@media (prefers-reduced-motion:reduce) {body .home-main a.fs-button {transition:none;}}

/* ---------- Hero themes (hero-themes.php): stacked slides that crossfade; switched by swipe, dots or the arrow, never automatically ---------- */
.fh-slide {position:absolute;inset:0;isolation:isolate;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility 0s linear .7s;}
.fh-slide.is-active {opacity:1;visibility:visible;transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility 0s;z-index:1;}
/* Text and price arrive just after the picture, rising slightly; the leaving slide's text fades quickly. */
.fh-ready .fh-slide :is(.fh-content,.fh-offer) {opacity:0;transform:translateY(14px);transition:opacity .25s ease,transform .25s ease;}
.fh-ready .fh-slide.is-active :is(.fh-content,.fh-offer) {opacity:1;transform:none;transition:opacity .6s cubic-bezier(.32,.72,0,1) .22s,transform .7s cubic-bezier(.32,.72,0,1) .22s;}
.fh-ready .fh-slide.is-active .fh-offer {transition-delay:.12s;}
/* Gentle settle of the picture as it arrives (direction follows the swipe). */
.fh-ready .fh-slide .fh-image {transform:scale(1.03) translateX(calc(var(--fh-dir,1) * 1%));transition:transform 1.1s cubic-bezier(.32,.72,0,1);}
.fh-ready .fh-slide.is-active .fh-image {transform:none;}

/* Layout 'r': dark text on the light right side of the photo (same design as the glove section further down). */
.fh-r .fh-image {object-position:30% 15%;}
.fh-r .fh-content {left:auto;right:clamp(32px,6vw,96px);top:50%;bottom:auto;width:min(440px,40%);transform:translateY(-50%);gap:0;}
.fh-ready .fh-r.fh-slide .fh-content {transform:translateY(calc(-50% + 14px));}
.fh-ready .fh-r.fh-slide.is-active .fh-content {transform:translateY(-50%);}
.fh-r .fh-title {color:var(--ink);font-size:clamp(34px,3.4vw,52px);margin-bottom:12px;}
.fh-r .fh-sub {color:var(--ink);text-shadow:none;margin:0 0 26px;}
.fh-buy {display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;}
.fh-inline-price {display:flex;align-items:baseline;color:var(--ink);font-size:clamp(40px,3.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.05em;}
.fh-inline-price small {font-size:.5em;margin-left:2px;letter-spacing:-.04em;}
body .home-main .fh-r a.fh-button {background:var(--ink);color:#fff;}
body .home-main .fh-r a.fh-button:hover {background:#285d6b;}

/* Controls: discreet, bottom right on desktop; dots only (and swipe) on phones. */
.fh-controls {position:absolute;z-index:3;right:clamp(20px,3vw,48px);bottom:clamp(28px,5vh,64px);display:flex;align-items:center;gap:14px;padding:6px 6px 6px 14px;border-radius:99px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 24px -12px rgba(16,46,60,.45);}
.fh-controls[hidden] {display:none;}
.fh-dots {display:flex;gap:2px;}
body .fh-dot {position:relative;width:22px;height:30px;padding:0;border:0;background:transparent;cursor:pointer;}
.fh-dot::before {content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:99px;background:rgba(28,67,83,.3);transform:translate(-50%,-50%);transition:width .35s cubic-bezier(.32,.72,0,1),background-color .25s;}
.fh-dot[aria-current="true"]::before {width:20px;background:var(--ink);}
@media (hover:hover) {.fh-dot:not([aria-current="true"]):hover::before {background:rgba(28,67,83,.6);}}
body .fh-next {display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;transition:background-color .15s,transform .15s;}
.fh-next svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media (hover:hover) {body .fh-next:hover {background:#285d6b;transform:translateX(2px);}}
.fh :focus-visible {outline:2px solid var(--ink);outline-offset:2px;}
.fh-bl .fh-button:focus-visible {outline-color:#fff;}
@media (max-width:700px) {
 .fh {touch-action:pan-y;}
 .fh-controls {left:50%;right:auto;bottom:10px;transform:translateX(-50%);padding:2px 8px;background:rgba(255,255,255,.6);}
 .fh-next {display:none!important;}
 .fh-content {bottom:48px;}
 .fh-r .fh-image {object-position:50% 20%;}
 .fh-r .fh-content {top:auto;bottom:48px;left:20px;right:20px;width:auto;transform:none;}
 .fh-ready .fh-r.fh-slide .fh-content {transform:translateY(14px);}
 .fh-ready .fh-r.fh-slide.is-active .fh-content {transform:none;}
 .fh-r .fh-title {font-size:34px;margin-bottom:8px;}
 .fh-r .fh-sub {margin-bottom:18px;}
 .fh-inline-price {font-size:40px;}
}
@media (prefers-reduced-motion:reduce) {
 .fh-slide, .fh-slide.is-active, .fh-ready .fh-slide :is(.fh-content,.fh-offer,.fh-image), .fh-dot::before, .fh-next {transition:none!important;}
 .fh-ready .fh-slide .fh-image {transform:none;}
}
/* Per-theme crop on wide screens: keep the cane's handle in view. */
@media (min-width:701px) {.fh-theme-stokk .fh-image {object-position:60% 8%;}}

/* Quieter indicator (6 Nov): no background, small dots, colour follows the photo (data-tone set by home-light.js),
   so it never competes with the main button. */
.fh {--fh-ctl:255,255,255;}
.fh[data-tone="light"] {--fh-ctl:28,67,83;}
.fh-controls {padding:0;gap:10px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;bottom:clamp(36px,6vh,72px);}
.fh-dot::before {width:6px;height:6px;background:rgba(var(--fh-ctl),.45);}
.fh-dot[aria-current="true"]::before {width:16px;background:rgba(var(--fh-ctl),.95);}
@media (hover:hover) {.fh-dot:not([aria-current="true"]):hover::before {background:rgba(var(--fh-ctl),.75);}}
body .fh-next {width:34px;height:34px;background:rgba(var(--fh-ctl),.16);color:rgb(var(--fh-ctl));box-shadow:inset 0 0 0 1px rgba(var(--fh-ctl),.35);}
.fh-next svg {width:16px;height:16px;}
@media (hover:hover) {body .fh-next:hover {background:rgba(var(--fh-ctl),.28);}}
@media (max-width:700px) {
 .fh-controls {bottom:6px;padding:0;background:none;}
 body .fh-dot {width:16px;height:24px;}
 .fh-dot::before {width:5px;height:5px;}
 .fh-dot[aria-current="true"]::before {width:14px;}
 .fh-content, .fh-r .fh-content {bottom:54px;}
}