/* Loovl Syksyn etu (restyling.fi) – window on the home pages and banner on ceramic pages.
 * Shared parts first, then the banner (container queries: it adapts to the column it sits in,
 * not to the screen), then the window. Only divs and spans inside: the theme gives
 * p / ul / h* margins with selectors stronger than ours (restyling.fi/CLAUDE.md, gotcha 14). */

.loovl-syksy,.loovl-syksy *{box-sizing:border-box}
.loovl-syksy{--syksy-red:#c7081b;--syksy-red-dark:#a30616;font-family:Montserrat,Arial,Helvetica,sans-serif;font-size:15px;line-height:1.4;text-align:left}
.loovl-syksy div,.loovl-syksy span{margin:0;padding:0}

.loovl-syksy__otsikko{font-family:Teko,Arial,Helvetica,sans-serif;font-weight:500;line-height:.82;letter-spacing:.01em;text-transform:uppercase}
.loovl-syksy__otsikko span{display:block}
.loovl-syksy__punainen{color:var(--syksy-red)}
.loovl-syksy__hyodyt span{display:block;font-weight:600}
.loovl-syksy__paalle span{display:inline-block;padding:5px 12px 4px;background:var(--syksy-red);color:#fff;font-weight:700;letter-spacing:.02em;line-height:1.2}
.loovl-syksy__edut{display:flex;gap:10px 18px}
.loovl-syksy__etu{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;font-size:13px;line-height:1.3}
.loovl-syksy__etu b{font-weight:700}
.loovl-syksy__ikoni{display:block;flex:0 0 auto;width:40px;height:40px}
.loovl-syksy__arvo-nimi{display:block;font-size:12px;font-weight:600;letter-spacing:.24em}
.loovl-syksy__arvo-summa{display:block;font-family:Teko,Arial,Helvetica,sans-serif;font-weight:500;line-height:.85;color:var(--syksy-red)}
/* Two lines by default; one line with a divider only where the banner is wide enough –
   a wrapped divider would start the second line. */
.loovl-syksy__alaviite{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.35}

.loovl-syksy__napit{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.loovl-syksy a.loovl-syksy__nappi{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;border:1px solid #d5d5d5;border-radius:6px;background:#fff;color:#1d1d1b!important;text-decoration:none!important;font-size:12.5px;font-weight:700;line-height:1.2;letter-spacing:.03em;transition:background-color .15s ease,border-color .15s ease}
.loovl-syksy a.loovl-syksy__nappi i{flex:0 0 auto;width:20px;font-size:18px;text-align:center;color:var(--syksy-red)}
.loovl-syksy a.loovl-syksy__nappi span{flex:1 1 auto;min-width:0}
.loovl-syksy a.loovl-syksy__nappi:hover,.loovl-syksy a.loovl-syksy__nappi:focus{border-color:#1d1d1b;background:#f4f4f4;color:#1d1d1b!important}
.loovl-syksy a.loovl-syksy__nappi--whatsapp{grid-column:1/-1;min-height:52px;border-color:var(--syksy-red);background:var(--syksy-red);color:#fff!important;font-size:13.5px;box-shadow:0 6px 16px rgba(199,8,27,.25)}
.loovl-syksy a.loovl-syksy__nappi--whatsapp i{color:#fff;font-size:22px;width:24px}
.loovl-syksy a.loovl-syksy__nappi--whatsapp:hover,.loovl-syksy a.loovl-syksy__nappi--whatsapp:focus{border-color:var(--syksy-red-dark);background:var(--syksy-red-dark);color:#fff!important}
.loovl-syksy a.loovl-syksy__nappi:focus-visible,.loovl-syksy__sulje:focus-visible{outline:3px solid #1d1d1b;outline-offset:2px}
.loovl-syksy__nuoli{display:block;flex:0 0 auto}

/* ---------- Banner ---------- */

.loovl-syksy-kehys{max-width:1260px;margin:0 auto;padding:40px 30px}
.loovl-syksy-banneri{container-type:inline-size;margin:0 0 28px;color:#1d1d1b}
.loovl-syksy-banneri--kehys{margin:0}
.loovl-syksy-banneri--rivi{clear:both;width:100%;margin:0 0 20px}
/* The page content is already padded on phones: a second side padding would squeeze the card. */
@media (max-width:800px){.loovl-syksy-kehys{padding:28px 0}}
/* Narrow (phone): photo on top, then the text, buttons below the offer. Column c is
   "display:contents" here, so its photo and buttons become rows of the card grid. */
.loovl-syksy-banneri .loovl-syksy__kortti{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "a" "b" "n" "d";overflow:hidden;border:1px solid #e3e3e3;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.07)}
.loovl-syksy-banneri .loovl-syksy__a{grid-area:a;padding:18px 18px 0}
.loovl-syksy-banneri .loovl-syksy__b{grid-area:b;padding:12px 18px 0}
.loovl-syksy-banneri .loovl-syksy__c{grid-area:c;display:contents;flex-direction:column}
.loovl-syksy-banneri .loovl-syksy__kuva{grid-area:c}
.loovl-syksy-banneri .loovl-syksy__napit{grid-area:n;padding:14px 18px 12px}
.loovl-syksy-banneri .loovl-syksy__d{grid-area:d;padding:0 18px 16px}
.loovl-syksy-banneri .loovl-syksy__otsikko{font-size:44px}
.loovl-syksy-banneri .loovl-syksy__otsikko span{display:inline}
/* On a phone the banner opens the article: the three benefit lines go, the offer itself stays whole. */
.loovl-syksy-banneri .loovl-syksy__hyodyt{display:none;margin-top:10px;padding-top:10px;border-top:2px solid var(--syksy-red);font-size:14px}
.loovl-syksy-banneri .loovl-syksy__johdanto{font-size:14px}
.loovl-syksy-banneri .loovl-syksy__paalle{margin-top:8px;font-size:17px}
.loovl-syksy-banneri .loovl-syksy__edut{margin-top:12px;gap:10px 12px}
.loovl-syksy-banneri .loovl-syksy__etu{gap:8px;font-size:12.5px}
.loovl-syksy-banneri .loovl-syksy__ikoni{width:34px;height:34px}
.loovl-syksy-banneri .loovl-syksy__arvo{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;margin-top:12px}
.loovl-syksy-banneri .loovl-syksy__arvo-nimi{color:#555}
.loovl-syksy-banneri .loovl-syksy__arvo-summa{font-size:50px}
.loovl-syksy-banneri .loovl-syksy__kuva{position:relative;aspect-ratio:3/1;overflow:hidden;background:#111}
.loovl-syksy-banneri .loovl-syksy__kuva img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:45% 60%}
.loovl-syksy-banneri .loovl-syksy__alaviite{color:#666}

/* Small phones (banner under 330 px, e.g. a 320–375 px screen): two gifts side by side do not fit,
   "pinnoituksen*" ran past the card edge at 320. */
@container (max-width:329px){
	.loovl-syksy-banneri .loovl-syksy__edut{flex-direction:column}
}

@container (min-width:640px){
	.loovl-syksy-banneri .loovl-syksy__kortti{grid-template-columns:1fr 1fr;grid-template-areas:"a c" "b c" "d d"}
	.loovl-syksy-banneri .loovl-syksy__c{display:flex;border-left:1px solid #eee}
	.loovl-syksy-banneri .loovl-syksy__kuva{flex:1 1 auto;aspect-ratio:auto;min-height:190px}
	.loovl-syksy-banneri .loovl-syksy__a{padding:28px 28px 0}
	.loovl-syksy-banneri .loovl-syksy__b{padding:18px 28px 24px}
	.loovl-syksy-banneri .loovl-syksy__d{padding:12px 28px 16px;border-top:1px solid #eee}
	.loovl-syksy-banneri .loovl-syksy__otsikko{font-size:60px}
	.loovl-syksy-banneri .loovl-syksy__otsikko span{display:block}
	.loovl-syksy-banneri .loovl-syksy__hyodyt{display:block;margin-top:14px;padding-top:14px;font-size:15px}
	.loovl-syksy-banneri .loovl-syksy__johdanto{font-size:15px}
	.loovl-syksy-banneri .loovl-syksy__paalle{margin-top:10px;font-size:20px}
	.loovl-syksy-banneri .loovl-syksy__edut{margin-top:14px;gap:10px 18px}
	.loovl-syksy-banneri .loovl-syksy__etu{gap:10px;font-size:13px}
	.loovl-syksy-banneri .loovl-syksy__ikoni{width:40px;height:40px}
	.loovl-syksy-banneri .loovl-syksy__arvo{margin-top:16px;gap:4px 14px}
	.loovl-syksy-banneri .loovl-syksy__arvo-summa{font-size:60px}
	.loovl-syksy-banneri .loovl-syksy__napit{padding:16px 20px 14px}
	.loovl-syksy-banneri .loovl-syksy__alaviite{flex-direction:row;flex-wrap:wrap}
	.loovl-syksy-banneri .loovl-syksy__alaviite span+span::before{content:"|";margin:0 8px;opacity:.6}
}

@container (min-width:960px){
	.loovl-syksy-banneri .loovl-syksy__kortti{grid-template-columns:.85fr 1.15fr 1.1fr;grid-template-areas:"a b c" "d d c"}
	.loovl-syksy-banneri .loovl-syksy__a{display:flex;flex-direction:column;justify-content:center;padding:32px 28px 32px 36px}
	.loovl-syksy-banneri .loovl-syksy__b{align-self:center;padding:28px 30px 12px;border-left:2px solid var(--syksy-red);margin:28px 0 0}
	.loovl-syksy-banneri .loovl-syksy__d{align-self:end;padding:10px 30px 18px 36px;border-top:0}
	.loovl-syksy-banneri .loovl-syksy__otsikko{font-size:84px}
	.loovl-syksy-banneri .loovl-syksy__hyodyt{margin-top:18px;padding-top:18px;font-size:16px}
	.loovl-syksy-banneri .loovl-syksy__hyodyt span+span{margin-top:4px}
	.loovl-syksy-banneri .loovl-syksy__johdanto{font-size:17px}
	.loovl-syksy-banneri .loovl-syksy__paalle{font-size:24px}
	.loovl-syksy-banneri .loovl-syksy__arvo-summa{font-size:72px}
}

/* ---------- Window ---------- */

.loovl-syksy-ikkuna{position:fixed;z-index:99990;right:24px;bottom:24px;width:460px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:hidden auto;overscroll-behavior:contain;border-radius:14px;background:#121212;color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.45);opacity:0;transform:translateX(calc(100% + 40px));transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.loovl-syksy-ikkuna[hidden]{display:none}
.loovl-syksy-ikkuna.is-auki{opacity:1;transform:none}
/* 20.10.2026: while the phone menu is open (html.loovl-menyu-auki, theme tema.js) the window waits:
 * it stands above the header (99990) and would cover the menu. It comes back when the menu closes. */
html.loovl-menyu-auki .loovl-syksy-ikkuna{visibility:hidden !important}
.loovl-syksy-ikkuna .loovl-syksy__tausta{position:absolute;top:0;right:0;width:auto;height:100%;max-width:none;margin:0;object-fit:cover;pointer-events:none}
.loovl-syksy-ikkuna::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#121212 40%,rgba(18,18,18,.82) 56%,rgba(18,18,18,.1) 82%);pointer-events:none}
.loovl-syksy-ikkuna .loovl-syksy__sisus{position:relative;z-index:2;padding:30px 28px 22px}
.loovl-syksy__sulje{position:absolute;z-index:3;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:#1d1d1b;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.loovl-syksy__sulje:hover{background:#e9e9e9}
.loovl-syksy-ikkuna .loovl-syksy__otsikko{font-size:74px;color:#fff}
.loovl-syksy-ikkuna .loovl-syksy__otsikko .loovl-syksy__punainen{color:var(--syksy-red)}
.loovl-syksy-ikkuna .loovl-syksy__hyodyt,.loovl-syksy-ikkuna .loovl-syksy__johdanto,.loovl-syksy-ikkuna .loovl-syksy__paalle,.loovl-syksy-ikkuna .loovl-syksy__edut{max-width:260px}
.loovl-syksy-ikkuna .loovl-syksy__hyodyt{margin-top:18px;font-size:14px}
.loovl-syksy-ikkuna .loovl-syksy__hyodyt span+span{margin-top:3px}
.loovl-syksy-ikkuna .loovl-syksy__johdanto{margin-top:16px;font-size:14px;color:#ddd}
.loovl-syksy-ikkuna .loovl-syksy__paalle{margin-top:9px;font-size:19px}
.loovl-syksy-ikkuna .loovl-syksy__edut{flex-direction:column;margin-top:14px}
.loovl-syksy-ikkuna .loovl-syksy__ikoni{width:36px;height:36px}
.loovl-syksy-ikkuna .loovl-syksy__arvo{margin-top:16px}
.loovl-syksy-ikkuna .loovl-syksy__arvo-nimi{color:#bbb}
.loovl-syksy-ikkuna .loovl-syksy__arvo-summa{margin-top:4px;font-size:70px}
.loovl-syksy-ikkuna .loovl-syksy__napit{margin-top:16px}
.loovl-syksy-ikkuna .loovl-syksy__alaviite{margin-top:12px;color:#aaa;font-size:10.5px}

/* Low laptop screens: the three benefit lines go first, the offer stays whole. */
@media (min-width:601px) and (max-height:800px){
	.loovl-syksy-ikkuna .loovl-syksy__hyodyt{display:none}
	.loovl-syksy-ikkuna .loovl-syksy__otsikko{font-size:64px}
}

/* Phone: a sheet along the bottom edge, not a full-screen window. */
@media (max-width:600px){
	.loovl-syksy-ikkuna{right:0;bottom:0;left:0;width:auto;max-width:none;max-height:88vh;max-height:88dvh;border-radius:16px 16px 0 0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}
	.loovl-syksy-ikkuna .loovl-syksy__tausta{height:300px;opacity:.9}
	.loovl-syksy-ikkuna::before{background:linear-gradient(90deg,#121212 45%,rgba(18,18,18,.7) 70%,rgba(18,18,18,.35)),linear-gradient(180deg,rgba(18,18,18,0) 180px,#121212 300px)}
	.loovl-syksy-ikkuna .loovl-syksy__sisus{padding:20px 16px 14px}
	.loovl-syksy__sulje{top:10px;right:10px;width:36px;height:36px}
	.loovl-syksy-ikkuna .loovl-syksy__otsikko{font-size:48px;padding-right:44px}
	.loovl-syksy-ikkuna .loovl-syksy__otsikko span{display:inline}
	.loovl-syksy-ikkuna .loovl-syksy__hyodyt{display:none}
	.loovl-syksy-ikkuna .loovl-syksy__johdanto,.loovl-syksy-ikkuna .loovl-syksy__paalle,.loovl-syksy-ikkuna .loovl-syksy__edut{max-width:none}
	.loovl-syksy-ikkuna .loovl-syksy__johdanto{margin-top:8px;max-width:250px;font-size:13px}
	.loovl-syksy-ikkuna .loovl-syksy__paalle{font-size:16px}
	.loovl-syksy-ikkuna .loovl-syksy__edut{flex-direction:row;margin-top:12px}
	.loovl-syksy-ikkuna .loovl-syksy__etu{font-size:12px;gap:8px}
	.loovl-syksy-ikkuna .loovl-syksy__ikoni{width:32px;height:32px}
	.loovl-syksy-ikkuna .loovl-syksy__arvo{display:flex;align-items:baseline;gap:12px;margin-top:10px}
	.loovl-syksy-ikkuna .loovl-syksy__arvo-summa{font-size:50px}
	.loovl-syksy-ikkuna .loovl-syksy__napit{margin-top:10px}
	.loovl-syksy a.loovl-syksy__nappi{min-height:44px;padding:8px 10px;gap:8px;font-size:11.5px}
	.loovl-syksy a.loovl-syksy__nappi--whatsapp{min-height:48px;font-size:12.5px}
	.loovl-syksy-ikkuna .loovl-syksy__alaviite{margin-top:8px;font-size:10px}
}

/* While the window is open the PPF bar (loovl-cta.php) steps aside – they would overlap. */
html.loovl-syksy-auki .loovl-cta-bar{visibility:hidden!important;opacity:0!important}
html.loovl-syksy-auki #toTop{visibility:hidden!important}

@media (prefers-reduced-motion:reduce){.loovl-syksy-ikkuna{transition:none}}
@media print{.loovl-syksy{display:none!important}}