/*
 * Homepage banners (front/layout/partials/home-banner.tpl). Shared by every storefront template: the
 * banner inherits the template's fonts and takes its colours from the banner's own settings
 * (--hb-bg, --hb-ink, --hb-accent), so no shop or brand is baked in.
 */
.hb{position:relative;width:100%;margin:0;overflow:hidden;overflow:clip}
.hb *,.hb *::before,.hb *::after{box-sizing:border-box}

/* ---------- picture banner ---------- */
.hb--image{line-height:0;text-align:center}
.hb--image picture,.hb--image img{display:block;width:100%;height:auto}
.hb--image a{display:block}
.hb--image a:focus-visible{outline:3px solid currentColor;outline-offset:-6px}

/* ---------- reveal banner ---------- */
.hb--reveal{--hb-bg:#F3C3CA;--hb-ink:#2A0E18;--hb-accent:#7A1F42;--hb-on-accent:#FFFFFF;background:var(--hb-bg);color:var(--hb-ink);line-height:1.5}
.hb--reveal::before{content:"";position:absolute;inset:0;background:radial-gradient(46% 62% at 68% 44%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 75%);pointer-events:none}
.hb-inner{position:relative;max-width:1360px;margin:0 auto;padding:0 64px;min-height:640px;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:24px;align-items:center}
.hb-copy{position:relative;z-index:3;padding:48px 0}
.hb-eyebrow{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.85);font-weight:800;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--hb-accent)}
.hb-title{margin:22px 0 0;font-weight:800;font-size:clamp(44px,6.2vw,90px);line-height:.95;letter-spacing:-.03em;color:var(--hb-ink)}
.hb-title span{display:block}
.hb-title em{font-style:normal;color:var(--hb-accent)}
.hb-lead{margin:26px 0 0;max-width:470px;font-size:19px;line-height:1.55;opacity:.88}
.hb-ctas{display:flex;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
.hb-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px;border-radius:999px;background:var(--hb-accent);color:var(--hb-on-accent)!important;font-weight:800;font-size:17px;text-decoration:none!important;white-space:nowrap;box-shadow:0 14px 26px -14px var(--hb-accent);transition:transform .2s ease}
.hb-btn:hover{transform:translateY(-2px)}
.hb-btn-note{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.2);font-weight:700;font-size:14px}
.hb-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:16px;color:var(--hb-accent)!important;text-decoration:none!important;border-bottom:2px solid currentColor}
.hb-trust{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:26px 0 0;padding:0;font-size:14px;font-weight:600}
.hb-trust li{display:inline-flex;align-items:center;gap:8px}
.hb-trust svg{flex:none;color:var(--hb-accent)}
.hb-visual{position:relative;align-self:end;display:flex;justify-content:center;min-height:100%}
.hb-backdrop{position:absolute;right:-40px;top:40px;margin:0;font-weight:900;font-size:clamp(70px,10.5vw,150px);line-height:.84;letter-spacing:-.03em;text-align:right;white-space:nowrap;color:rgba(0,0,0,.06);pointer-events:none;user-select:none;z-index:0}
.hb-backdrop span{display:block}
.hb-stage{position:relative;z-index:1;width:min(100%,640px);margin-top:auto;align-self:flex-end}
.hb-stage img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hb-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hb-zones{position:absolute;inset:0}
.hb-zone{position:absolute;border:0;padding:0;margin:0;background:transparent;border-radius:46%;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.hb-zone:active{cursor:grabbing}
.hb-zone:focus-visible{outline:3px dashed var(--hb-accent);outline-offset:2px}
.hb-hint{position:absolute;z-index:4;display:none;pointer-events:none}
.is-ready .hb-hint{display:block}
.is-touched .hb-hint,.is-done .hb-hint{opacity:0;transition:opacity .4s ease}
.hb-ring{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:2px solid rgba(255,255,255,.95);animation:hbPulse 1.8s ease-out infinite}
@keyframes hbPulse{0%{transform:scale(.7);opacity:.95}100%{transform:scale(1.35);opacity:0}}
.hb-hand{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--hb-ink);box-shadow:0 6px 16px rgba(0,0,0,.2);animation:hbRub 1.6s ease-in-out infinite}
@keyframes hbRub{0%,100%{transform:translate(-14px,-6px) rotate(-8deg)}50%{transform:translate(14px,6px) rotate(6deg)}}
.hb-hint-label{position:absolute;right:46px;top:-20px;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--hb-ink);color:#fff;font-weight:800;font-size:14px;white-space:nowrap;box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
.hb-hint-touch{display:none}
@media (hover:none){.hb-hint-mouse{display:none}.hb-hint-touch{display:inline}}
.hb-meter{position:absolute;z-index:5;left:6%;bottom:36px;display:none;align-items:center;gap:12px;min-height:48px;padding:0 8px 0 18px;border-radius:999px;background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.4);font-weight:800;font-size:14px;color:var(--hb-ink);white-space:nowrap}
.is-ready .hb-meter{display:flex}
.hb-track{position:relative;width:110px;height:8px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden}
.hb-track span{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:var(--hb-accent);transition:width .2s linear}
.hb-again{display:none;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:rgba(0,0,0,.06);color:var(--hb-accent);font-weight:800;font-size:13px;cursor:pointer}
.is-done .hb-again{display:inline-flex}
.is-done .hb-track{display:none}
.hb-card{position:absolute;z-index:4;right:0;bottom:56px;display:flex;align-items:center;gap:14px;width:290px;padding:14px 16px 14px 12px;border-radius:20px;background:#fff;color:var(--hb-ink)!important;text-decoration:none!important;box-shadow:0 22px 40px -22px rgba(0,0,0,.55);transform:rotate(2deg);transition:transform .3s ease}
.hb-card:hover{transform:rotate(0) translateY(-3px)}
.hb-card img{width:48px;height:auto;flex:none}
.hb-card-t{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:600;line-height:1.3}
.hb-card-t strong{font-size:16px;font-weight:800}
.hb-card-t b{color:var(--hb-accent);font-size:15px}

@media (max-width:1199px){
    .hb-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 40px}
    .hb-backdrop{font-size:clamp(60px,9vw,110px)}
    .hb-card{display:none}
}
@media (max-width:991px){
    .hb-inner{grid-template-columns:minmax(0,1fr);padding:18px 16px 26px;min-height:0;gap:0}
    .hb-copy{padding:0}
    .hb-eyebrow{min-height:28px;font-size:10.5px;letter-spacing:.1em;padding:0 11px}
    .hb-title{font-size:clamp(36px,10.5vw,52px);margin-top:10px}
    .hb-lead{display:none}
    .hb-ctas{order:3;margin-top:14px;gap:6px}
    .hb-btn{width:100%}
    .hb-trust{margin-top:12px;font-size:13px;gap:6px 16px}
    .hb-visual{margin:6px -16px 0;min-height:0}
    .hb-stage{width:min(100%,420px)}
    .hb-backdrop{left:0;right:0;top:4px;text-align:center;font-size:clamp(44px,16vw,70px)}
    .hb-meter{left:50%;bottom:10px;transform:translateX(-50%);min-height:44px;font-size:13px;padding:0 6px 0 14px;gap:8px}
    .hb-track{width:70px}
    .hb-card{display:none}
    .hb-hint-label{min-height:34px;font-size:12.5px;padding:0 12px;right:auto;left:0;top:-74px;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){.hb-ring,.hb-hand{animation:none}.hb-btn,.hb-card{transition:none}}