/* Pikkuvihreä 2027 — Phase 1: header, navigation, front page, footer restyle.
 * Design: design/pikkuvihrea-2027-facelift/claude-design-output/ (boards 1a–1e).
 * Tokens: tokens.css. Square corners everywhere except the search pill.
 * Scoped to .pv-* classes and body.pv2027 so nothing outside the header,
 * front page and footer changes in this phase.
 */

/* ---------- shared ---------- */
.pv-wrap { max-width: 1357px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 1200px) { .pv-wrap { padding: 0 24px; } }
@media (min-width: 1405px) { .pv-wrap { padding: 0; } }

.pv2027 .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.pv2027 .skip-link:focus { clip: auto; width: auto; height: auto; z-index: 100000; background: #fff; padding: 12px 16px; top: 8px; left: 8px; }

/* The parent styles every <button> as a green 238px-max block; reset ours. */
.pv-header button, .pv-front button { all: unset; box-sizing: border-box; cursor: pointer; font-family: var(--pv-font); }
.pv-header ul, .pv-front ul { list-style: none; margin: 0; padding: 0; }
.pv-header ul li::before, .pv-front ul li::before { content: none !important; }
.pv-header p, .pv-front p { margin: 0; }
.pv-header a, .pv-front a { text-decoration: none; }
.pv-header :focus-visible, .pv-front :focus-visible, .pv2027 #colophon :focus-visible { outline: 3px solid var(--pv-green-dark); outline-offset: 2px; }

.pv-eyebrow { font: var(--pv-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: #555; }
.pv-eyebrow--light { color: #DDEBD8; }

.pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 15px/1.2 var(--pv-font); padding: 15px 22px; border-radius: 0; border: 2px solid transparent; transition: background-color .15s, color .15s; }
.pv-btn--primary, .pv-btn--primary:visited { background: var(--pv-green-ink); color: #fff; font-size: 14px; padding: 14px 20px; }
.pv-btn--primary:hover, .pv-btn--primary:focus { background: var(--pv-green-dark); color: #fff; }
.pv-btn--light, .pv-btn--light:visited { background: #fff; color: #000; }
.pv-btn--light i { color: var(--pv-green-dark); }
.pv-btn--light:hover, .pv-btn--light:focus { background: var(--pv-beige); color: #000; }
.pv-btn--ghost, .pv-btn--ghost:visited { border-color: #fff; color: #fff; }
.pv-btn--ghost:hover, .pv-btn--ghost:focus { background: rgba(255,255,255,.15); color: #fff; }
.pv-btn--outline, .pv-btn--outline:visited { border-color: var(--pv-green-dark); color: var(--pv-green-dark); font-size: 14px; padding: 12px; }
.pv-btn--outline:hover, .pv-btn--outline:focus { background: var(--pv-green-dark); color: #fff; }
.pv-btn--sm { font-size: 13px; padding: 10px 14px; gap: 8px; }
.pv-arrow-link, .pv-arrow-link:visited { font: 700 14px var(--pv-font); color: var(--pv-green-dark); display: inline-flex; align-items: center; gap: 8px; }
.pv-arrow-link:hover { color: #000; }
.pv-stars { color: var(--pv-green-dark); display: inline-flex; gap: 1px; }

@media (max-width: 575px) { .pv-hide-sm { display: none !important; } }
@media (min-width: 576px) { .pv-show-sm { display: none !important; } }
@media (max-width: 991px) { .pv-hide-md { display: none !important; } }
@media (min-width: 992px) { .pv-show-md { display: none !important; } }

/* ---------- top bar ---------- */
.pv-topbar { background: var(--pv-beige); font: 500 13px var(--pv-font); color: #000; }
.pv-topbar__row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pv-topbar a, .pv-topbar a:visited { color: #000; }
.pv-topbar__call, .pv-topbar__delivery, .pv-topbar__end, .pv-topbar__rating { display: flex; align-items: center; gap: 8px; }
.pv-topbar__phone { font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.pv-topbar__phone i { font-size: 12px; }
.pv-topbar__delivery i { color: var(--pv-green-dark); }
.pv-topbar__delivery p { margin: 0; display: inline; }
.pv-topbar__delivery a:hover { text-decoration: underline; }
.pv-topbar__end { gap: 24px; }
.pv-topbar__rating .pv-stars { font-size: 11px; }
.pv-lang { position: relative; }
.pv-lang summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; padding: 6px 0; }
.pv-lang summary::-webkit-details-marker { display: none; }
.pv-lang summary i { font-size: 9px; }
.pv-lang ul { position: absolute; right: 0; top: 100%; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.15); z-index: 1001; min-width: 140px; }
.pv-lang li a { display: block; padding: 10px 16px; }
.pv-lang li a:hover { background: var(--pv-beige); }
@media (max-width: 575px) {
	.pv-topbar { font-size: 12px; }
	.pv-topbar__row { min-height: 36px; gap: 8px; }
	.pv-topbar__call { order: 2; }
	.pv-topbar__delivery { order: 1; }
	.pv-topbar__end { order: 3; }
	.pv-topbar__end .pv-lang { display: none; } /* language moves into the drawer on phones */
}

/* ---------- brand row ---------- */
.pv-header { background: #fff; position: relative; z-index: 1000; }
.home #masthead.pv-header { margin-bottom: 0; } /* parent gives #masthead 20px; the hero sits right under the nav */
.pv-brandrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 56px; align-items: center; padding-top: 26px; padding-bottom: 22px; }
.pv-logo { display: block; width: 270px; line-height: 0; }
.pv-logo-svg { width: 100%; height: auto; display: block; }
.pv-icons { display: flex; gap: 28px; align-items: center; }
.pv-account, .pv-cart, .pv-account:visited, .pv-cart:visited { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #000; font: 500 12px var(--pv-font); position: relative; }
.pv-account i, .pv-cart i { font-size: 22px; }
.pv-account:hover, .pv-cart:hover { color: var(--pv-green-dark); }
.pv-cart-count { position: absolute; top: -8px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--pv-green-ink); color: #fff; font: 700 11px/20px var(--pv-font); text-align: center; }
/* .pv-header .pv-burger: must outrank ".pv-header button { all: unset }" */
.pv-header .pv-burger { display: none !important; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 22px; color: #000; }

/* search: AWS markup inside #header-search; the parent styles it, we adjust */
.pv-search { width: 100%; }
.pv2027 #header-search { max-width: none; margin: 0; }
.pv2027 #header-search .aws-container .aws-search-form,
.pv2027 #header-search .aws-container .aws-search-form .aws-wrapper,
.pv2027 #header-search .aws-container input[type=search] { height: 52px; }
.pv2027 #header-search .aws-container input[type=search] { border: 1px solid #E6E1DA; border-radius: var(--pv-radius-pill); box-shadow: inset 0 0 24px 1px rgba(133,126,118,.2); padding-left: 30px; font-size: 14px; }
.pv2027 #header-search .aws-container .aws-search-field::placeholder { color: #5B5B5B; }
.pv2027 #header-search .aws-container .aws-search-form .aws-search-btn_icon { color: var(--pv-green-dark); }

@media (max-width: 1199px) {
	.pv-brandrow { grid-template-columns: auto auto; gap: 12px 16px; padding-top: 14px; padding-bottom: 14px; }
	.pv-logo { width: 190px; }
	.pv-search { grid-column: 1 / -1; order: 3; }
	.pv-icons { gap: 4px; justify-self: end; }
	.pv-icon-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
	.pv-account { display: none; } /* account link lives in the drawer */
	.pv-cart { width: 44px; height: 44px; justify-content: center; }
	.pv-cart i { font-size: 20px; }
	.pv-cart-count { top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 10px; line-height: 18px; }
	.pv-header .pv-burger { display: inline-flex !important; }
	.pv2027 #header-search .aws-container .aws-search-form,
	.pv2027 #header-search .aws-container .aws-search-form .aws-wrapper,
	.pv2027 #header-search .aws-container input[type=search] { height: 46px; }
}
@media (max-width: 575px) { .pv-logo { width: 170px; } }

/* ---------- nav row (desktop) ---------- */
.pv-navrow { border-top: 1px solid #ECE7E0; position: relative; }
.pv-navrow__row { display: flex; justify-content: space-between; align-items: stretch; gap: 24px; }
.pv-nav__list { display: flex; gap: 36px; }
.pv-nav__item { display: flex; align-items: center; gap: 7px; border-bottom: 3px solid transparent; }
.pv-nav__link, .pv-nav__link:visited { font: 600 16px var(--pv-font); color: #000; padding: 16px 0 13px; display: block; }
.pv-nav__toggle { font-size: 10px; padding: 8px 4px !important; color: #000; }
.pv-nav__toggle i { transition: transform .15s; }
.pv-nav__item.is-sale .pv-nav__link { color: var(--pv-sale); }
.pv-nav__item:hover, .pv-nav__item.is-open, .pv-nav__item:focus-within { border-bottom-color: var(--pv-green); }
.pv-nav__item.is-open .pv-nav__link, .pv-nav__item:hover .pv-nav__link { color: var(--pv-green-dark); }
.pv-nav__item.is-open .pv-nav__toggle i { transform: rotate(180deg); }
.pv-secondary { display: flex; gap: 28px; align-items: center; font: 500 14px var(--pv-font); }
.pv-sec-link, .pv-sec-link:visited { color: #000; }
.pv-sec-link:hover { color: var(--pv-green-dark); text-decoration: underline; }
.pv-sec-link.is-highlight, .pv-sec-link.is-highlight:visited { color: var(--pv-green-dark); font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }

/* mega panel: full width under the nav row */
.pv-mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #ECE7E0; box-shadow: 0 18px 30px rgba(0,0,0,.18); z-index: 999; }
.pv-nav__item.is-open > .pv-mega { display: block; }
@media (hover: hover) and (min-width: 1200px) { .pv-nav__item.has-mega:hover > .pv-mega { display: block; } }
.pv-mega__grid { display: grid; gap: 44px; padding-top: 36px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.pv-mega__grid--1 { --cols: 1; } .pv-mega__grid--2 { --cols: 2; } .pv-mega__grid--3 { --cols: 3; } .pv-mega__grid--4 { --cols: 4; }
.pv-mega__grid.has-card { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) 320px; }
.pv-mega__grid--3.has-card .pv-mega__col.is-tiles { min-width: 0; }
.pv-mega__grid--3.has-card { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr) 320px; }
.pv-mega__col .pv-eyebrow { margin-bottom: 16px; }
.pv-mega__links { display: flex; flex-direction: column; gap: 12px; font: 500 15px var(--pv-font); }
.pv-mega__links a, .pv-mega__links a:visited { color: #000; }
.pv-mega__links a:hover { color: var(--pv-green-dark); text-decoration: underline; }
.pv-mega__links .is-minor a { color: #555; font-size: 13px; font-weight: 400; }
.pv-mega__col.is-tiles .pv-mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-mega__col.is-tiles .pv-mega__links a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--pv-grey); font-weight: 600; font-size: 14px; line-height: 1.3; }
/* Long Finnish words ("yleisökäyttöön") must break inside the tile, never run out of it (review 2026-10-16 #11). */
.pv-tile__label { min-width: 0; padding-right: 10px; overflow-wrap: anywhere; hyphens: auto; }
.pv-mega__col.is-tiles .pv-mega__links a:hover { background: var(--pv-beige); text-decoration: none; }
.pv-tile__img { width: 64px; height: 64px; display: block; overflow: hidden; }
.pv-tile__img img { width: 64px; height: 64px; object-fit: cover; display: block; }
.pv-tile__ph { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--pv-beige); color: var(--pv-green-dark); font-size: 22px; }
.pv-mega__card { background: var(--pv-green-dark); color: #fff; padding: 28px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.pv-mega__card > i { font-size: 22px; }
.pv-mega__card-title { font: 700 21px/1.25 var(--pv-font); }
.pv-mega__card p { font: 400 14px/1.55 var(--pv-font); }
.pv-mega__card .pv-btn { align-self: flex-start; font-size: 14px; padding: 12px 18px; margin-top: 4px; }
.pv-mega__foot { margin-top: 28px; padding: 18px 0 22px; border-top: 1px solid #ECE7E0; display: flex; justify-content: space-between; gap: 24px; font: 500 14px var(--pv-font); }
.pv-mega__popular { color: #333; }
.pv-mega__popular a, .pv-mega__popular a:visited { color: #000; text-decoration: underline; }

@media (max-width: 1199px) { .pv-navrow { display: none; } }

/* ---------- mobile drawer ---------- */
.pv-drawer { border-top: 1px solid #ECE7E0; background: #fff; }
.pv-drawer[hidden] { display: none; }
@media (min-width: 1200px) { .pv-drawer { display: none !important; } }
.pv-drawer__item { border-bottom: 1px solid #ECE7E0; }
.pv-drawer__head, .pv-drawer__head:visited { width: 100%; min-height: 58px; padding: 0 20px !important; display: flex !important; justify-content: space-between; align-items: center; font: 600 17px var(--pv-font) !important; color: #000; }
.pv-drawer__item.is-sale .pv-drawer__head { color: var(--pv-sale); }
.pv-drawer__head[aria-expanded="true"] { color: var(--pv-green-dark); }
.pv-drawer__head[aria-expanded="true"] i { transform: rotate(180deg); }
.pv-drawer__panel { background: var(--pv-beige); padding: 6px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.pv-drawer__panel[hidden] { display: none; }
.pv-drawer__group { display: flex; flex-direction: column; }
.pv-drawer__group .pv-eyebrow { padding: 10px 0 4px; color: #4A4A4A; }
.pv-drawer__group a, .pv-drawer__group a:visited { font: 500 15px var(--pv-font); color: #000; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid rgba(0,0,0,.08); }
.pv-drawer__group a.is-minor { font-size: 14px; color: #444; }
.pv-drawer__actions { padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.pv-drawer__rec, .pv-drawer__rec:visited { background: var(--pv-green-dark); color: #fff; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pv-drawer__rec span { display: flex; flex-direction: column; gap: 2px; font: 700 16px var(--pv-font); }
.pv-drawer__rec small { font: 400 13px var(--pv-font); color: #DDEBD8; }
.pv-drawer__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-drawer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 4px 4px 8px; }
.pv-drawer__links .pv-sec-link { min-height: 44px; display: flex; align-items: center; font: 500 15px var(--pv-font); }

/* ---------- front page ---------- */
.pv-front { font: var(--pv-body); color: #000; }
.pv-front h2, .pv-front h3 { margin: 0; }
.pv-section { padding: 64px 0 24px; }
.pv-section--tight { padding: 48px 0; }
.pv-section--grey { background: var(--pv-grey); padding: 56px 0 60px; margin: 24px 0; }
.pv-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 28px; }
.pv-section__head h2 { font: var(--pv-h2); letter-spacing: var(--pv-h2-track); color: var(--pv-green-dark); }
.pv-section__sub { font: 400 16px var(--pv-font); color: #222; margin-top: 6px !important; }
.pv-head-link, .pv-head-link:visited { font: 600 15px var(--pv-font); color: var(--pv-green-dark); text-decoration: underline !important; white-space: nowrap; }

/* hero */
.pv-hero-outer { position: relative; }
.pv-hero-wrap.has-situations .pv-hero-outer { padding-bottom: 84px; }
.pv-hero { position: relative; height: 560px; overflow: hidden; color: #fff; }
.pv-hero__bg, .pv-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-hero__bg img { object-fit: cover; object-position: center 40%; }
.pv-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 62%, rgba(0,0,0,.35) 100%); }
.pv-hero__head { position: relative; padding: 52px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pv-hero__head h1 { font: var(--pv-h1); letter-spacing: var(--pv-h1-track); color: #fff; margin: 0; padding: 0; }
.pv-hero__lead { font: 500 18px/1.5 var(--pv-font); color: #fff; }
.pv-hero__trust { position: absolute; left: 56px; bottom: 120px; display: flex; gap: 14px; align-items: flex-end; font: 600 15px var(--pv-font); }
.pv-hero-wrap:not(.has-situations) .pv-hero__trust, .pv-hero-wrap:not(.has-situations) .pv-hero__cta { bottom: 48px; }
.pv-hero__trust img { width: 64px; height: auto; display: block; }
.pv-hero__cta { position: absolute; right: 56px; bottom: 120px; display: flex; gap: 12px; }

.pv-situations { position: absolute; left: 40px; right: 40px; bottom: 0; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.12); display: grid; grid-template-columns: 220px repeat(var(--n, 4), minmax(0, 1fr)); }
.pv-situations__head { padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--pv-green-dark); color: #fff; font: 500 13px var(--pv-font); }
.pv-situations__head h2 { font: 700 22px/1.2 var(--pv-font); color: #fff; }
.pv-situation, .pv-situation:visited { padding: 24px 26px; color: #000; border-right: 1px solid #ECE7E0; display: flex; flex-direction: column; gap: 4px; }
.pv-situation:last-child { border-right: 0; }
.pv-situation:hover { background: var(--pv-beige); color: #000; }
.pv-situation__title { font: 700 18px var(--pv-font); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pv-situation__title i { font-size: 14px; color: var(--pv-green-dark); }
.pv-situation__text { font: 400 13px/1.45 var(--pv-font); color: #333; }

@media (max-width: 1199px) {
	.pv-hero__trust { left: 32px; } .pv-hero__cta { right: 32px; }
	.pv-situations { left: 16px; right: 16px; grid-template-columns: 180px repeat(var(--n, 4), minmax(0, 1fr)); }
	.pv-situation { padding: 20px; }
	.pv-hero__head h1 { font-size: 60px; }
}
@media (max-width: 991px) {
	.pv-hero-outer { padding: 0 !important; }
	.pv-hero { height: 440px; }
	.pv-hero__bg img { object-position: center 30%; }
	.pv-hero__shade { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
	.pv-hero__head { padding: 28px 20px 0; gap: 8px; }
	.pv-hero__head h1 { font-size: 38px; line-height: 1.05; letter-spacing: -1px; }
	.pv-hero__lead { font-size: 14px; }
	.pv-hero__cta { left: 16px; right: 16px; bottom: 16px !important; flex-direction: column; gap: 8px; }
	.pv-hero__cta .pv-btn { width: 100%; padding: 14px; }
	.pv-situations { position: static; box-shadow: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 28px 16px 8px; }
	.pv-situations__head { grid-column: 1 / -1; background: none; color: var(--pv-green-dark); padding: 0 0 6px; }
	.pv-situations__head h2 { font-size: 24px; letter-spacing: -.4px; color: var(--pv-green-dark); }
	.pv-situation { background: var(--pv-beige); border: 0; padding: 16px; min-height: 88px; justify-content: space-between; }
	.pv-situation__title { font-size: 16px; flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* product families */
.pv-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pv-families--2, .pv-families--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-family { background: var(--pv-beige); padding: 36px 32px 40px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; position: relative; }
.pv-family__img img { width: 120px; height: 170px; object-fit: contain; display: block; }
.pv-family__body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
/* The title scales with the card and breaks long words instead of running out of the box (review #1). */
.pv-family__title { font: var(--pv-h2-tile) !important; font-size: clamp(20px, 1.75vw, 28px) !important; letter-spacing: -.4px; color: var(--pv-green-dark); hyphens: auto; overflow-wrap: anywhere; max-width: 100%; }
.pv-family .pv-btn { max-width: 100%; text-align: center; }
.pv-family__title a, .pv-family__title a:visited { color: inherit; }
.pv-family__links { font: 400 15px var(--pv-font); display: flex; flex-direction: column; gap: 6px; }
.pv-family__links br { display: none; }
.pv-family__links a, .pv-family__links a:visited { color: #000; display: block; }
.pv-family__links a:hover { text-decoration: underline; color: #000; }
.pv-family__links strong { font-weight: 400; }
@media (max-width: 1199px) { .pv-family { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 28px 24px; } .pv-family__img img { width: 96px; height: 140px; } }
@media (max-width: 991px) {
	.pv-section { padding: 24px 0; }
	.pv-section__head { margin-bottom: 14px; }
	.pv-section__head h2 { font-size: 24px; letter-spacing: -.4px; }
	.pv-families, .pv-families--2, .pv-families--4 { grid-template-columns: 1fr; gap: 10px; }
	.pv-family { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; padding: 12px 18px 12px 8px; }
	.pv-family__img img { width: 96px; height: 110px; }
	.pv-family__body { gap: 4px; }
	.pv-family__title { font-size: 19px !important; letter-spacing: 0; }
	.pv-family__title a::after { content: ""; position: absolute; inset: 0; } /* whole tile clickable */
	.pv-family__links { flex-direction: row; flex-wrap: wrap; font-size: 13px; line-height: 1.45; gap: 0 6px; }
	.pv-family__links a { display: inline; pointer-events: none; }
	.pv-family__links a:not(:last-of-type)::after { content: ","; }
	.pv-family__chev { color: var(--pv-green-dark); }
}

/* help band */
.pv-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.pv-help__rec { background: var(--pv-green-dark); color: #fff; padding: 48px 52px; display: flex; flex-direction: column; gap: 18px; justify-content: center; align-items: flex-start; }
.pv-help__rec h2 { font: var(--pv-h2); letter-spacing: var(--pv-h2-track); color: #fff; }
.pv-help__rec > p:not(.pv-eyebrow) { font: 400 16px/1.6 var(--pv-font); max-width: 460px; }
.pv-help__points { display: flex; gap: 24px; font: 500 14px var(--pv-font); color: #DDEBD8; }
.pv-help__points li { display: flex; gap: 8px; align-items: center; }
.pv-help__rec .pv-btn { margin-top: 6px; }
.pv-help__contact { background: var(--pv-beige); display: grid; grid-template-columns: minmax(0, 1fr); }
.pv-help__contact.has-img { grid-template-columns: 240px minmax(0, 1fr); }
.pv-help__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-help__body { padding: 44px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.pv-help__body .pv-eyebrow { color: var(--pv-green-dark); }
.pv-help__body h2 { font: var(--pv-h2-tile); letter-spacing: -.6px; color: #000; }
.pv-help__lines { display: flex; flex-direction: column; gap: 10px; font: 500 15px var(--pv-font); }
.pv-help__lines a, .pv-help__lines span { color: #000; display: flex; gap: 12px; align-items: center; }
.pv-help__lines i { width: 18px; text-align: center; color: var(--pv-green-dark); }
.pv-help__lines a:hover { color: var(--pv-green-dark); }
.pv-help__lines a span { color: #444; font-weight: 400; }
@media (max-width: 991px) {
	.pv-section--tight { padding: 0 0 24px; }
	.pv-help { grid-template-columns: 1fr; gap: 10px; }
	.pv-help__rec { padding: 28px 22px; gap: 12px; }
	.pv-help__rec h2 { font-size: 24px; letter-spacing: 0; }
	.pv-help__rec > p:not(.pv-eyebrow) { font-size: 14px; }
	.pv-help__rec .pv-btn { width: 100%; }
	.pv-help__contact.has-img { grid-template-columns: 1fr; }
	.pv-help__body { padding: 24px 22px; gap: 12px; align-items: stretch; }
	.pv-help__body h2 { font-size: 20px; letter-spacing: 0; }
	/* phone + WhatsApp become full-width buttons on phones */
	.pv-help__lines { gap: 10px; }
	.pv-help__phone, .pv-help__wa { justify-content: center; padding: 13px; font-weight: 700 !important; }
	.pv-help__phone { background: var(--pv-green-ink); color: #fff !important; }
	.pv-help__phone i { color: #fff !important; }
	.pv-help__wa { border: 2px solid var(--pv-green-dark); color: var(--pv-green-dark) !important; }
	.pv-help__lines li:last-child span { font-size: 13px; font-weight: 400; }
}

/* accessories */
.pv-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.pv-chip, .pv-chip:visited { font: 500 14px var(--pv-font); color: #000; background: #fff; border: 1px solid #CFCFCF; padding: 9px 16px; }
.pv-chip:hover { border-color: var(--pv-green-dark); color: var(--pv-green-dark); }
.pv-minicards { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.pv-minicard { background: #fff; display: flex; flex-direction: column; }
.pv-minicard__img { display: block; aspect-ratio: 1 / 1; }
.pv-minicard__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pv-minicard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pv-minicard__cat { font: 500 12px var(--pv-font); color: #555; }
.pv-minicard__title, .pv-minicard__title:visited { font: 600 15px/1.35 var(--pv-font); color: #000; flex: 1; }
.pv-minicard__title:hover { color: var(--pv-green-dark); text-decoration: underline; }
.pv-minicard__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.pv-minicard__price { font: 700 15px var(--pv-font); color: #000; }
.pv-minicard__price del { font-weight: 400; color: #666; font-size: 13px; }
.pv-minicard__price ins { text-decoration: none; color: var(--pv-sale); }
/* B2BKing's "Retail price / Wholesale price" pair (business customers, admins): retail as the price, B2B as a small line — as on the catalog card */
.pv-minicard__price .b2bking_retail_price_text { display: none; }
.pv-minicard__price .b2bking_retail_price_price br { display: none; }
.pv-minicard__price .b2bking_b2b_price_text { display: block; margin-top: 2px; font-weight: 500; font-size: 12px; color: #555; }
.pv-minicard__price .b2bking_b2b_price_price { font-size: 12px; font-weight: 500; color: #555; }
.pv-minicard__price .b2bking_b2b_price_price ins { color: #555; }
.pv-minicard .added_to_cart { display: none; } /* WooCommerce's "View cart" link — the header count updates instead */
.pv-minicard .add_to_cart_button.loading { opacity: .6; }
.pv-minicard .add_to_cart_button.added::after { content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-left: 4px; }
@media (max-width: 1199px) { .pv-minicards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
	.pv-section--grey { padding: 28px 0; }
	.pv-section--grey .pv-wrap { padding-right: 0; }
	.pv-section--grey .pv-section__head { padding-right: 16px; }
	.pv-chips { flex-wrap: nowrap; overflow-x: auto; padding-right: 16px; margin-bottom: 14px; scrollbar-width: none; }
	.pv-chip { white-space: nowrap; font-size: 13px; padding: 8px 14px; }
	.pv-minicards { display: flex !important; overflow-x: auto; gap: 10px; padding-right: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.pv-minicard { flex: 0 0 156px; scroll-snap-align: start; }
	.pv-minicard__body { padding: 12px; gap: 8px; }
	.pv-minicard__title { font-size: 13px; min-height: 52px; }
	.pv-minicard__foot { flex-direction: column; align-items: stretch; }
	.pv-minicard__foot .pv-btn { width: 100%; padding: 12px; }
}

/* USP band */
.pv-usp-wrap { padding: 24px 0; }
.pv-usp { position: relative; background-size: cover; background-position: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 40px; }
.pv-usp::before { content: ""; position: absolute; inset: 0; background: rgba(51, 95, 42, .86); }
.pv-usp__item { position: relative; display: flex; gap: 22px; align-items: flex-start; padding: 0 20px; color: #fff; }
.pv-usp__item + .pv-usp__item { border-left: 1px solid rgba(255,255,255,.3); }
.pv-usp__item > i { font-size: 34px; width: 40px; text-align: center; }
.pv-usp__item h3 { font: var(--pv-h3) !important; color: #fff; margin-bottom: 6px !important; }
.pv-usp__text, .pv-usp__text p { font: 400 14px/1.6 var(--pv-font); }
.pv-usp__text a, .pv-usp__text a:visited { color: #fff; text-decoration: underline; }
@media (max-width: 991px) {
	.pv-usp-wrap { padding: 0; }
	.pv-usp-wrap .pv-wrap { padding: 0; }
	.pv-usp { grid-template-columns: 1fr; gap: 22px; padding: 28px 20px; }
	.pv-usp__item { padding: 0; gap: 16px; }
	.pv-usp__item + .pv-usp__item { border-left: 0; }
	.pv-usp__item > i { font-size: 24px; width: 28px; }
	.pv-usp__item h3 { font-size: 17px !important; }
	.pv-usp__text, .pv-usp__text p { font-size: 13px; line-height: 1.55; }
}

/* reviews (CusRev markup, restyled) */
.pv-reviews { padding-bottom: 56px; overflow-x: clip; } /* CusRev's slider variant is wider than the page */
.pv-reviews .cr-all-reviews-shortcode { font-family: var(--pv-font); }
.pv-reviews .cr-summaryBox-wrap { background: var(--pv-beige); border: 0; border-radius: 0; padding: 32px 36px; }
.pv-reviews .cr-summaryBox-wrap .cr-overall-rating-wrap .cr-average-rating span { font: 700 64px/1 var(--pv-font); letter-spacing: -2px; }
.pv-reviews .ivole-meter .ivole-meter-bar { background: var(--pv-green-ink); }
.pv-reviews .ivole-meter { background: #fff; border-radius: 0; }
.pv-reviews .cr-button-search, .pv-reviews .cr-ajax-reviews-sort-div select { border-radius: 0; }
.pv-reviews ol.commentlist { padding: 0; }
.pv-reviews ol.commentlist li.review { border: 1px solid #E2E2E2; padding: 30px 32px; margin-bottom: 20px; border-radius: 0; }
.pv-reviews .cr-ajax-reviews-cus-images-div2 img { border-radius: 0; }
.pv-reviews .pv-reviews__body > p a, .pv-reviews .pv-reviews__body > p a:visited { font: 600 15px var(--pv-font); color: var(--pv-green-dark); text-decoration: underline; }
@media (max-width: 991px) { .pv-reviews .cr-summaryBox-wrap { padding: 20px; } .pv-reviews ol.commentlist li.review { padding: 20px; } }

/* feature cards */
.pv-features { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-bottom: 32px; }
.pv-feature { position: relative; padding-bottom: 150px; }
.pv-feature__img img { width: 86%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pv-feature__box { position: absolute; right: 0; bottom: 0; width: 72%; background: var(--pv-beige); padding: 40px 44px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pv-feature__box h3 { font: 700 30px/1.2 var(--pv-font); letter-spacing: -.6px; color: var(--pv-green-dark); }
.pv-feature__box p { font: 400 15px/1.6 var(--pv-font); }
@media (max-width: 991px) {
	.pv-features { grid-template-columns: 1fr; gap: 20px; padding-bottom: 8px; }
	.pv-feature { padding-bottom: 0; }
	.pv-feature__img img { width: 100%; aspect-ratio: 4 / 3; }
	.pv-feature__box { position: relative; width: auto; margin: -40px 0 0 24px; padding: 22px; gap: 10px; }
	.pv-feature__box h3 { font-size: 21px; letter-spacing: 0; }
	.pv-feature__box p { font-size: 14px; }
}

/* blog */
.pv-posts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px !important; }
.pv-post a, .pv-post a:visited { display: flex; flex-direction: column; gap: 16px; color: #000; }
.pv-post__img { display: block; aspect-ratio: 3 / 2; background: var(--pv-grey); overflow: hidden; }
.pv-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.pv-post a:hover img { opacity: .85; }
.pv-post__body { display: flex; flex-direction: column; gap: 12px; }
.pv-post__title { font: 700 22px/1.3 var(--pv-font); color: var(--pv-green-dark); }
.pv-post__excerpt { font: 400 14px/1.7 var(--pv-font); color: #222; }
.pv-post__more { font: 600 14px var(--pv-font); color: var(--pv-green-dark); text-decoration: underline; }
.pv-post a:hover .pv-post__title { text-decoration: underline; }
@media (max-width: 991px) {
	.pv-posts { grid-template-columns: 1fr; gap: 14px; padding-bottom: 16px !important; }
	.pv-post a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #ECE7E0; }
	.pv-post__img { aspect-ratio: 1 / 1; }
	.pv-post__title { font-size: 15px; line-height: 1.35; }
}
.pv-social { padding-bottom: 32px; }

/* ---------- footer (parent markup, restyled) ---------- */
.pv2027 #colophon { min-height: 0; background-size: cover !important; }
.pv2027 #colophon .site-info { background-color: rgba(51, 95, 42, .88); padding: 72px 0 40px; }
.pv2027 #colophon .site-info > .container { max-width: 1357px; }
.pv2027 #colophon h5 { font: 700 17px var(--pv-font); }
.pv2027 #colophon h5::after { height: 2px; margin: 12px 0 18px; }
.pv2027 #colophon, .pv2027 #colophon p { font: 400 14px/1.7 var(--pv-font); }
.pv2027 #colophon a:hover, .pv2027 #colophon a:focus { opacity: 1; text-decoration: underline; }
.pv2027 #colophon ul > li { margin-bottom: 10px; }
.pv2027 #colophon .font-italic { font-style: normal !important; }
@media (max-width: 991px) { .pv2027 #colophon .site-info { padding: 32px 0; } }

/* ---------- B2BKing ---------- */
/* B2BKing prints the wholesale line ("Tukkuhinta: …") for admins as well as for
   business customers. Only real B2B customers should see it (review #4):
   inc/helpers.php adds body.pv-not-b2b for everyone else. */
.pv-not-b2b .b2bking_b2b_price_text, .pv-not-b2b .b2bking_b2b_price_price { display: none !important; }

/* Cookie-free YouTube (inc/helpers.php, review #6): a style in the site's header
   scripts hides every .embed-responsive-item until marketing cookies are
   accepted ("body:not(.marketing-hyvaksytty) .embed-responsive-item"). The
   youtube-nocookie embeds are marked data-cookieconsent="ignore" and stay visible. */
iframe[data-cookieconsent="ignore"], .embed-responsive-item[data-cookieconsent="ignore"] { display: block !important; }

/* ---------- 0.7.3: production review 2026-10-21 (theme-2027/review-2026-10-21/findings.md) ---------- */
/* #7 drawer rows: ".pv-header button { all: unset }" outranked .pv-drawer__head, so the
   group buttons lost their width, height and right-aligned chevron. */
.pv-header .pv-drawer__head { width: 100%; min-height: 58px; justify-content: space-between; }
/* #8a a price never breaks at the thousands separator ("1" / "199,00 €") */
.woocommerce-Price-amount { white-space: nowrap; }
/* #6 Product Bundles' "Alkaen:" prefix */
.price .from, .pv-card__price .from { display: none; }
/* #13b Cookiebot's round button sits above the mobile buy bar while it is shown */
body.pv-buybar-on #CookiebotWidget { bottom: 84px !important; }
/* #3 store opening hours from Google, in the help box's photo slot (inc/hours.php) */
.pv-help__contact.has-hours { grid-template-columns: minmax(0, 1fr) auto; }
.pv-hours { padding: 44px 44px 44px 0; display: flex; flex-direction: column; gap: 10px; font: 400 14px var(--pv-font); }
.pv-hours .pv-eyebrow { color: var(--pv-green-dark); }
.pv-hours ul { display: flex; flex-direction: column; gap: 4px; }
.pv-hours li { display: flex; justify-content: space-between; gap: 18px; white-space: nowrap; }
.pv-hours li b { font-weight: 500; }
.pv-hours li.is-today { font-weight: 700; color: var(--pv-green-dark); }
.pv-hours li.is-today b { font-weight: 700; }
.pv-hours__src { font-size: 11px; color: #777; }
@media (max-width: 991px) {
	.pv-help__contact.has-hours { grid-template-columns: minmax(0, 1fr); }
	.pv-hours { padding: 0 22px 28px; }
}
/* 0.7.4 #20b the trust line must not run under the hero buttons (EN text is long) */
.pv-hero__trust { max-width: calc(50% - 72px); }
.pv-hero__trust span { line-height: 1.4; }