/* Klesskapet – egne komponenter. Grunnfarger, fonter og knapper ligger i theme.json. */
:root {
	--kk-krem: #FBF8F5; --kk-sand: #F4F1EE; --kk-skaplys: #F4EDE6; --kk-segment: #EDE8E2;
	--kk-linje: #E6E1DC; --kk-kant: #D9D2CB; --kk-dempet: #6E6661; --kk-mork: #3F3835;
	--kk-brun: #7B5D4E; --kk-brun-mork: #5E463B; --kk-beige: #C9A992; --kk-hylle: #B08D78; --kk-stang: #8B6B5C; --kk-innside: #FBF6F0;
	--kk-lyserosa: #F6D9DC; --kk-rosa: #E8B4BA; --kk-gul: #F3E2B8; --kk-lyseblaa: #CFDFEC; --kk-blaa: #A9C4DA; --kk-lysegronn: #D9E8D4; --kk-lavendel: #E3DDEB;
	--kk-overskrift: Fredoka, system-ui, sans-serif;
	--kk-tekst: Nunito, system-ui, sans-serif;
	--kk-ease: cubic-bezier(.2, .8, .2, 1);
}
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--kk-mork); outline-offset: 3px; }

/* Stripe øverst */
.kk-stripe { margin: 0; padding: 9px 24px; background: var(--kk-brun); color: var(--kk-krem); font: 600 12.5px/1.4 var(--kk-tekst); text-align: center; }

/* Logo: skap-ikon + bokstavklosser */
.kk-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.kk-logo img { width: 32px; height: 35px; flex: none; }
.kk-klosser { display: flex; gap: 2px; }
.kk-kloss { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font: 600 14px/1 var(--kk-overskrift); color: var(--kk-brun); box-shadow: inset 0 -3px 0 rgba(0,0,0,.07); }
.kk-kloss:nth-child(5n+1) { background: var(--kk-lyserosa); rotate: -4deg; }
.kk-kloss:nth-child(5n+2) { background: var(--kk-gul); rotate: 3deg; }
.kk-kloss:nth-child(5n+3) { background: var(--kk-lavendel); rotate: -2deg; }
.kk-kloss:nth-child(5n+4) { background: var(--kk-lyseblaa); rotate: 4deg; }
.kk-kloss:nth-child(5n) { background: var(--kk-lysegronn); rotate: -3deg; }

/* Knapper – stilvarianter registrert i functions.php */
.wp-block-button.is-style-mork .wp-block-button__link { background: var(--kk-mork); color: var(--kk-krem); }
.wp-block-button.is-style-mork .wp-block-button__link:hover { background: #2A2522; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--kk-mork); border: 1.5px solid var(--kk-mork); padding: 13.5px 24.5px; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--kk-mork); color: var(--kk-krem); }
.wp-block-button.is-style-lenke .wp-block-button__link { background: none; color: var(--kk-brun); padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* Tekst */
.kk-eyebrow { font: 700 12px/1.3 var(--kk-tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--kk-brun); }
.kk-ingress { font-size: 18px; line-height: 1.55; color: var(--kk-dempet); max-width: 440px; }

/* Tilstand og pris */
.kk-tilstand { display: inline-block; padding: 4px 9px; border-radius: 999px; font: 700 11px/1.3 var(--kk-tekst); white-space: nowrap; }
.kk-tilstand--som-ny { background: #D9E8D4; color: #2F5A3A; }
.kk-tilstand--pent-brukt { background: #CFDFEC; color: #2E4E6B; }
.kk-tilstand--godt-brukt { background: #F1DCD0; color: #7A4A3A; }
.kk-tilstand--nytt { background: var(--kk-mork); color: var(--kk-krem); }
.kk-nypris { color: var(--kk-dempet); font-size: .85em; }
.kk-tilstandsboks { background: var(--kk-sand); border-radius: 18px; padding: 18px 20px; display: grid; gap: 12px; }
.kk-maler { display: flex; gap: 6px; }
.kk-maler > span { flex: 1; display: grid; gap: 6px; font: 400 12px var(--kk-tekst); opacity: .45; }
.kk-maler > span::before { content: ""; height: 8px; border-radius: 4px; background: var(--bg); }
.kk-maler > .er-valgt { opacity: 1; font-weight: 700; }
.kk-maler > .er-valgt::before { background: var(--ink); }
.kk-maler .som-ny { --bg: #D9E8D4; --ink: #2F5A3A; }
.kk-maler .pent-brukt { --bg: #CFDFEC; --ink: #2E4E6B; }
.kk-maler .godt-brukt { --bg: #F1DCD0; --ink: #7A4A3A; }

/* Størrelsesklosser 50–152 */
.kk-storrelser { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.kk-str { aspect-ratio: 1; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; box-shadow: inset 0 -5px 0 rgba(0,0,0,.06), 0 2px 0 rgba(0,0,0,.04); transition: rotate .2s var(--kk-ease), translate .2s var(--kk-ease); }
.kk-str b { font: 600 26px/1 var(--kk-overskrift); color: var(--kk-brun); }
.kk-str small { font: 600 10.5px/1.2 var(--kk-tekst); color: var(--kk-dempet); text-align: center; }
.kk-str:nth-child(5n+1) { background: var(--kk-lyserosa); rotate: -2deg; }
.kk-str:nth-child(5n+2) { background: var(--kk-lyseblaa); rotate: 4deg; }
.kk-str:nth-child(5n+3) { background: var(--kk-lysegronn); rotate: -3deg; }
.kk-str:nth-child(5n+4) { background: var(--kk-gul); rotate: -4deg; }
.kk-str:nth-child(5n) { background: var(--kk-lavendel); rotate: 3deg; }
.kk-str:hover { rotate: 0deg; translate: 0 -2px; }

/* Faner og filterbrikker */
.kk-faner { display: inline-flex; background: var(--kk-segment); border-radius: 999px; padding: 4px; }
.kk-faner > * { padding: 7px 16px; border-radius: 999px; font: 700 13px var(--kk-tekst); color: var(--kk-dempet); text-decoration: none; }
.kk-faner > .er-valgt { background: var(--kk-krem); color: var(--kk-mork); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.kk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--kk-kant); background: none; color: var(--kk-mork); font: 700 12.5px var(--kk-tekst); }
.kk-chip.er-valgt { background: var(--kk-mork); border-color: var(--kk-mork); color: var(--kk-krem); }

/* Forside: skapet – lages av kortkoden [klesskapet_skap] i functions.php. Vises fra 900 px. */
.kk-hero { background: var(--kk-skaplys); padding-block: 36px 72px; }
.kk-skap { position: relative; width: 100%; max-width: 560px; height: 540px; margin-inline: auto; }
.kk-skap__krone { position: absolute; left: 24px; right: 24px; top: 0; height: 30px; border-radius: 16px 16px 0 0; background: var(--kk-hylle); }
.kk-skap__kropp { position: absolute; inset: 26px 34px; border-radius: 8px; background: var(--kk-beige); box-shadow: inset 0 0 0 8px var(--kk-hylle); }
.kk-skap__innside { position: absolute; inset: 48px 56px; box-sizing: border-box; display: flex; flex-direction: column; padding: 22px 20px 18px; border-radius: 4px; background: var(--kk-innside); }
.kk-skap__stang { height: 7px; margin: 0 10px; border-radius: 4px; background: var(--kk-stang); }
.kk-skap__bane { overflow: hidden; margin: -4px -20px 0; }
.kk-skap__bane + .kk-skap__stang { margin-top: 14px; }
.kk-skap__band { display: flex; gap: 12px; width: max-content; animation: kk-band var(--kk-varighet, 20s) linear infinite; }
.kk-skap__bane--motsatt .kk-skap__band { animation-direction: reverse; }
.kk-skap__bane:hover .kk-skap__band { animation-play-state: paused; }
@keyframes kk-band { from { transform: translateX(0); } to { transform: translateX(calc((-100% - 12px) / 3)); } }
.kk-henger { flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; color: var(--kk-mork); text-decoration: none; }
.kk-henger::before { content: ""; box-sizing: content-box; width: 10px; height: 14px; border: 2.5px solid var(--kk-stang); border-bottom: 0; border-radius: 7px 7px 0 0; }
.kk-henger span { box-sizing: border-box; width: 100%; height: 66px; padding: 4px; display: grid; place-items: center; text-align: center; border-radius: 9px 9px 14px 14px; background: var(--farge); font: 700 11px/1.2 var(--kk-tekst); box-shadow: inset 0 -4px 0 rgba(0,0,0,.05); transition: translate .2s var(--kk-ease); }
.kk-henger:hover span { translate: 0 -3px; }
.kk-skap__hylle { height: 9px; margin: 20px 6px 0; border-radius: 5px; background: var(--kk-hylle); }
.kk-skap__hylle--nedre { margin: 0 6px; }
.kk-skap__ting { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 60px; margin-top: 12px; }
.kk-skap__leker { display: flex; align-items: flex-end; gap: 10px; }
.kk-pyramide { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kk-pyramide__bunn { display: flex; gap: 2px; }
.kk-pyramide .kk-kloss { width: 28px; height: 28px; border-radius: 7px; font-size: 16px; rotate: 0deg; }
.kk-pyramide > .kk-kloss { rotate: -3deg; }
.kk-bil { position: relative; width: 58px; height: 36px; flex: none; }
.kk-bil i { position: absolute; display: block; }
.kk-bil__hytte { left: 12px; top: 0; width: 30px; height: 18px; border-radius: 9px 11px 2px 2px; background: var(--kk-lyserosa); }
.kk-bil__vindu { left: 17px; top: 4px; width: 9px; height: 9px; border-radius: 3px 2px 1px 2px; background: var(--kk-innside); }
.kk-bil__vindu--2 { left: 29px; border-radius: 2px 4px 2px 1px; }
.kk-bil__kropp { left: 0; top: 14px; width: 58px; height: 14px; border-radius: 7px; background: var(--kk-rosa); }
.kk-bil__lys { left: 52px; top: 17px; width: 5px; height: 4px; border-radius: 2px; background: var(--kk-gul); }
.kk-bil__hjul { left: 8px; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--kk-beige); box-shadow: inset 0 0 0 4px var(--kk-mork); }
.kk-bil__hjul--2 { left: 37px; }
.kk-skap__bamse { display: block; width: 78px; height: 78px; margin-bottom: -3px; }
.kk-skap__boker { display: flex; align-items: flex-end; gap: 2px; }
.kk-skap__boker i { display: block; border-radius: 3px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.06), inset 0 8px 0 rgba(255,255,255,.35); }
.kk-skap__boker i:nth-child(1) { width: 12px; height: 52px; background: #A9C4DA; }
.kk-skap__boker i:nth-child(2) { width: 14px; height: 60px; background: #E8B4BA; }
.kk-skap__boker i:nth-child(3) { width: 11px; height: 46px; background: #F3E2B8; }
.kk-skap__boker i:nth-child(4) { width: 13px; height: 55px; background: #C8BEDD; transform-origin: bottom left; rotate: -12deg; }
.kk-skap__skuffer { margin-top: auto; display: flex; gap: 10px; padding: 0 60px; }
.kk-skuff { flex: 1; height: 58px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 600 18px var(--kk-overskrift); color: var(--kk-mork); text-decoration: none; }
.kk-skuff--nytt { background: var(--kk-lysegronn); }
.kk-skuff--brukt { background: var(--kk-lyseblaa); }
.kk-skap__dorer { position: absolute; inset: 26px 34px; overflow: hidden; border-radius: 8px; pointer-events: none; }
.kk-dor { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; border: 0; cursor: pointer; pointer-events: auto; transform: perspective(2600px) rotateY(0deg); transition: transform 1.4s var(--kk-ease); }
.kk-dor::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--kk-brun); }
.kk-dor--v { left: 0; transform-origin: left center; border-radius: 8px 4px 4px 8px; background: var(--kk-lyserosa); box-shadow: inset 0 0 0 8px #F0CBD0, 8px 0 24px rgba(0,0,0,.14); }
.kk-dor--v::after { right: 18px; }
.kk-dor--h { right: 0; transform-origin: right center; border-radius: 4px 8px 8px 4px; background: var(--kk-gul); box-shadow: inset 0 0 0 8px #EBD6A4, -8px 0 24px rgba(0,0,0,.14); }
.kk-dor--h::after { left: 18px; }
.kk-skap.er-apen .kk-dor--v { transform: perspective(2600px) rotateY(-72deg); }
.kk-skap.er-apen .kk-dor--h { transform: perspective(2600px) rotateY(72deg); }
/* Knapp lener seg ut mellom dørene når skapet er lukket */
.kk-skap__titt { position: absolute; left: 34px; top: 26px; bottom: 26px; width: calc(50% - 34px); overflow: hidden; pointer-events: none; }
.kk-skap__titt img { position: absolute; right: -60px; top: 240px; width: 120px; height: 120px; transform-origin: 50% 100%; transform: rotate(-14deg) scaleX(-1); transition: transform .7s var(--kk-ease) 1.1s; }
.kk-skap.er-apen .kk-skap__titt img { transform: translateX(90px) scaleX(-1); transition-delay: 0s; }
.kk-skap__bein { position: absolute; bottom: 0; width: 26px; height: 28px; border-radius: 0 0 8px 8px; background: var(--kk-hylle); }
.kk-skap__bein--v { left: 56px; }
.kk-skap__bein--h { right: 56px; }
.kk-skap__hint { position: absolute; left: 0; right: 0; bottom: -30px; margin: 0; text-align: center; font: 400 12.5px var(--kk-tekst); color: var(--kk-dempet); }
@media (prefers-reduced-motion: reduce) { .kk-skap__band { animation: none; } .kk-skap__titt img { transition: none; } }

/* WooCommerce – første tilpasninger (sjekkes mot faktisk markup når butikken er oppe) */
.wc-block-components-product-sale-badge, .onsale { display: none !important; }
.wc-block-components-product-image img { border-radius: 18px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--kk-sand); }
.wc-block-components-radio-control__option { border: 1px solid var(--kk-kant); border-radius: 14px; background: #fff; margin-bottom: 8px; }
.wc-block-components-radio-control__option-checked { border: 2px solid var(--kk-mork); }

/* Skjermstørrelser */
@media (max-width: 1099px) { .kk-storrelser { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 899px) { .kk-skap { display: none; } }
@media (max-width: 699px) {
	.kk-stripe { font-size: 11.5px; padding: 7px 16px; }
	.kk-logo { gap: 8px; }
	.kk-logo img { width: 24px; height: 26px; }
	.kk-kloss { width: 18px; height: 18px; border-radius: 4px; font-size: 11px; }
	.kk-storrelser { display: flex; overflow-x: auto; gap: 8px; padding: 2px 0 8px; scroll-snap-type: x mandatory; }
	.kk-str { flex: none; width: 60px; border-radius: 13px; scroll-snap-align: start; }
	.kk-str b { font-size: 20px; }
	.kk-str small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .kk-dor, .kk-str, .kk-henger span { transition: none; } }