/* ===========================================================
   Default 2027 Pages
   =========================================================== */

#hero_outer{
    height:460px;
    margin-bottom:0;
    position:relative;
	background-size:cover;
	background-position:center;
}

#hero_inner{
    width:1150px;
    height:420px;
    padding:10px;
    margin:0 auto;
    overflow:hidden;
}

/* #hero_product and #hero_price_outer are full-width blocks only
   SHIFTED right (left:500/370px) — their invisible boxes reach far
   beyond the visible text and swallow mouse events over anything
   beneath (found via the summer2026 beach deco; #hero_windows below
   already carries the same pointer-events fix). The boxes go
   transparent to events, links opt back in, and #hero_product
   shrink-wraps to its content. */
#hero_product{
    position:relative;
    top:45px;
    left:500px;
    width:fit-content;
    pointer-events:none;
}

#hero_product a,
#hero_price_outer a{
    pointer-events:auto;
}

#hero_product h1{
    color:#fff;
    font-size:45px;
    font-weight:bold;
    position:relative;
    top:-10px;
    text-shadow:0 2px 8px rgba(0,0,0,0.35);
}

#hero_product img.keyvisual{
    height:45px;
    position:relative;
    top:-5px;
    padding-right:5px;
}

#hero_features{
    color:#fff;
    font-size:24px;
    position:relative;
    top:-20px;
    left:13px;
    text-shadow:0 2px 8px rgba(0,0,0,0.35);
}

#hero_features span{
    color:#e4001f;
    font-weight:bold;
    padding-right:25px;
}

#hero_price_outer{
    position:relative;
    top:50px;
    left:370px;
    text-align:center;
    pointer-events:none;
}

#hero_price_outer > div{
    font-size:40px;
    position:relative;
    left:-30px;
}

#hero_price{
    font-weight:bold;
}

#hero_price_outer > div#hero_price > s{
    color:#fff;
    font-size:24px;
    font-weight:normal;
    opacity: 0.7;
}

#hero_price_outer > #hero_buybutton{
    display:block;
    position:relative;
    top:30px;
    left:15px;
}

#hero_price_outer > #hero_buybutton > span{
    position:relative;
    top:-50px;
    left:-40px;
    padding:10px 20px;
    color:#2f3b47;
    background:linear-gradient(160deg, #ffffff 0%, #e9eef4 34%, #c9d2dc 68%, #aab5c2 100%);
    text-shadow:0 1px 0 rgba(255,255,255,0.55);
    box-shadow:0 2px 10px rgba(31,58,82,0.28), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(90,104,120,0.40);
    font-size:20px;
    font-weight:bold;
    border-radius:20px;
}

a.headerbutton{
    box-shadow:0 8px 22px rgba(0,0,0,0.30);
    padding:15px 45px;
    color:#ffffff;
    background:#14a733;
    transition:background-color 0.5s ease;
    border-radius:20px;
    text-decoration:none;
    text-align:center;
    font-size:32px;
    position:relative;
    bottom:20px;
}

a.button_hover:hover{
    background:#14883d;
}

div#hero_30days{
    position:relative;
    top:35px;
    left:-25px;
    font-size:20px;
    color:#e8e8e8;
}

#hero_30days > span:nth-child(1){
    background:#fff;
    padding:1px 5px 2px 5px;
    font-weight:normal;
    margin:0 5px 0 0;
    border-radius:5px;
    color:#000;
}

    #hero_packshots{
        position:relative;
        top:45px;
        left:-580px;
        float:right;
        width:520px;
        height:300px;
    }

#hero_packshots img.shot{
    position:absolute;
    height:260px;
    border-radius:8px;
    box-shadow:0 0 25px rgba(255,255,255,0.75);
    image-rendering:auto;
    transform:translateZ(0);
    transition:transform 0.3s ease;
}

#hero_packshots img.shot1{
    left:-25px;
    top:80px;
    transform:rotate(-2deg);
    transform-origin: bottom left;
    z-index:1;
}

#hero_packshots img.shot1:hover{
    transform:rotate(0deg) scale(1.2);
    z-index:5;
}

#hero_packshots img.shot2{
    left:70px;
    top:0;
    transform:rotate(1.5deg);
    transform-origin:top right;
    z-index:2;
}

#hero_packshots img.shot2:hover{
    transform:rotate(0deg) scale(1.2);
    z-index:5;
}

/* shot3 (iPhone) geometry is defined once in the fan-geometry section below */

#hero_windows{
    position:relative !important;
    top:-92px;
    left:79px !important;
  	pointer-events:none;
}

#hero_windows img{
    height:85px;
    margin-left:8px;
	border-radius: 8px;
}
/* ==== 2027 flex rebuild of the price column (BS5-safe, replaces BS2 flow offsets)
   Target = live spring layout (web.archive 2026-06-28): price over button,
   -10 pill at button right, 30-days below, windows badges in a ROW right of the button. */
#hero_price_outer{
    position:relative; top:50px; left:370px;
    width:fit-content;
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    pointer-events:none;
}
#hero_price_outer > div{ position:static; left:auto; }
#hero_price_outer > #hero_buybutton{ position:relative; top:0; left:0; margin-top:26px; }
div#hero_30days{ position:static; top:auto; left:auto; margin-top:16px; }
#hero_windows{
    position:absolute !important; top:80px; left:100% !important;
    margin-left:110px;
    display:flex; gap:10px; align-items:center;
    white-space:nowrap;
    pointer-events:none;
}
#hero_windows img{ height:85px; margin-left:0; }

/* Cassiopeia sets img{max-width:100%} - kills fit-content sizing in the hero */
#hero_outer img, #hero_windows img, #hero_product img.keyvisual { max-width: none; }

/* Cassiopeia banner img reset: .container-banner img{display:block;margin:auto} broke inline icons */
.container-banner #hero_outer img { display: inline-block; margin: 0; }
/* button as inline-block so its padding grows the line box (no overlap with the price) */
#hero_buybutton a.headerbutton { display: inline-block; position: static; line-height: 1.44; }

/* h1 nowrap: title+icon are a borderline fit; live kept it on one line */
#hero_product h1 { white-space: nowrap; }

/* product block shifted left so the nowrap title clears the overflow edge */
#hero_product { left: 450px; }

/* hero band widened to the 1320 site width (live was a 1150px site); composition re-centered +85px */
#hero_inner { width: 1320px; }
#hero_packshots { left: -665px; }
#hero_product { left: 535px; }
#hero_price_outer { left: 455px; }

/* packshots further left; align button with icon left edge; feature line spacing */
#hero_packshots { left: -720px; }
#hero_price_outer { left: 535px; align-items: flex-start; }
#hero_features { line-height: 34px; }

/* price + 30days centered to the button; pill absolute at button corner */
#hero_price_outer { align-items: center; }
#hero_price_outer > #hero_buybutton { position: relative; width: fit-content; }
#hero_price_outer > #hero_buybutton > span { position: absolute; top: -19px; right: -43px; left: auto; }
/* windows badges: top edge = pill top, bottom edge = button bottom */
#hero_windows { top: 56px; }
#hero_windows img { height: 92px; }

/* windows badges: top edge = -10€-pill top, bottom edge = green button bottom (measured) */
#hero_windows { top: 32px; }
#hero_windows img { height: 93px; }

/* button aligned to the checkmarks (features has left:13px + glyph offset) */
#hero_price_outer { left: 551px; }

/* block right, shots bigger (grow bottom-right; anchored top-left) */
#hero_product { left: 580px; }
#hero_price_outer { left: 596px; }

/* block further right; taller band so the shots are not clipped */
#hero_product { left: 590px; }
#hero_price_outer { left: 606px; }

/* more air title/checkmarks/price */
#hero_features { top: -4px; }
#hero_price_outer { top: 76px; }


/* let the shot glow escape the band (was clipped by overflow:hidden at 420px) */
#hero_inner { overflow: visible; }

/* inner uses full outer height (460); width stays the 1320 stage */
#hero_inner { height: 100%; box-sizing: border-box; }

/* shotcaps from summer hero (hover captions on the 3-shot fan); color adapted to the dark band */
#hero_packshots .shotcap{
    position:absolute;
    width:360px;
    text-align:center;
    white-space:nowrap;
    font-size:17px;
    line-height:1.25;
    color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.55);
    opacity:0;
    transition:opacity 1s ease-in-out;
    pointer-events:none;
    z-index:6;
}
#hero_packshots .cap1{left:-70px;bottom:311px;}
#hero_packshots .cap2{left:17px;bottom:314px;}
#hero_packshots .cap3{left:1px;bottom:288px;}
#hero_packshots img.shot1:hover ~ .cap1,
#hero_packshots img.shot2:hover ~ .cap2,
#hero_packshots img.shot3:hover ~ .cap3{
    opacity:1;
}


/* === default2027 fan geometry (self-contained; the summer2026 variant gets its own later) === */
#hero_packshots img.shot1{
    box-shadow:none;
    top:68px;
    height:272px;
    filter:drop-shadow(0 0 18px rgba(255,255,255,0.55));
    z-index:3;
    transform:rotate(-4deg);
}
#hero_packshots img.shot1:hover{ transform:rotate(0deg) scale(1.28); }
#hero_packshots img.shot3{
    height:260px;
    left:162px;
    top:80px;
    z-index:2;
    box-shadow:none;
    filter:drop-shadow(0 0 18px rgba(255,255,255,0.55));
    transform:rotate(4deg);
    transform-origin:bottom right;
}
#hero_packshots img.shot3:hover{ transform:rotate(0deg) scale(1.25); z-index:5; }
#hero_packshots img.shot2{ top:46px; transform-origin:bottom right; }
#hero_packshots .cap1{ left:-49px; top:auto; bottom:325px; }
#hero_packshots .cap2{ left:42px; top:auto; bottom:322px; }
#hero_packshots .cap3{ left:34px; top:auto; bottom:295px; }

/* fan upscale (+15%) - order matters: generic first, specifics after */
#hero_packshots img.shot { height: 300px; }
#hero_packshots img.shot1 { height: 315px; }
#hero_packshots img.shot3 { height: 300px; }

/* --- -10 € chip glued to the buy button: hover EITHER lights BOTH as ONE unit (glow, not darken).
   The chip is a <span> inside the pointer-events:none hero block, so it must opt back in to be
   hoverable/clickable. Button<->chip coordination is pure CSS via sibling selectors; JS only covers
   chip->button (CSS has no previous-sibling selector). The chip carries the same buy link. --- */
#hero_price_outer > #hero_buybutton > span {
    pointer-events: auto; cursor: pointer; z-index: 0;
    transition: color .45s ease, box-shadow .45s ease, text-shadow .45s ease;
}
/* gold overlay fades in on hover (silver -> gold, like live) */
#hero_price_outer > #hero_buybutton > span::before {
    content: ""; position: absolute; inset: 0; border-radius: 20px; z-index: 1;
    background: linear-gradient(160deg, #f8e39a 0%, #f1cd66 38%, #dda63c 72%, #c9902e 100%);
    opacity: 0; transition: opacity .45s ease;
}
#hero_price_outer > #hero_buybutton > span b { position: relative; z-index: 2; }
#hero_buybutton a.headerbutton { transition: background-color .3s ease; }
/* hover EITHER darkens BOTH as one unit — colours like the sticky green button (#14a733 -> #14883d),
   darker on hover, NOT lighter. Button on its own :hover or via JS .is-hovered (chip hover). */
#hero_buybutton a.headerbutton:hover,
#hero_buybutton a.headerbutton.is-hovered {
    background: #14883d;
}
/* hovering the badge darkens the button too (CSS-native, complements the JS) */
#hero_buybutton:has(> span:hover) > a.headerbutton { background: #14883d; }
/* hover (button OR chip): chip -> deep gold text + gold overlay fades in */
#hero_price_outer > #hero_buybutton > a:hover + span,
#hero_price_outer > #hero_buybutton > span:hover,
#hero_price_outer > #hero_buybutton > span.is-hovered {
    color: #4b2f05;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    box-shadow: 0 2px 12px rgba(180,130,30,0.45), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(122,79,12,0.35);
}
#hero_price_outer > #hero_buybutton > a:hover + span::before,
#hero_price_outer > #hero_buybutton > span:hover::before,
#hero_price_outer > #hero_buybutton > span.is-hovered::before { opacity: 1; }