.reading-catalog{border-top:1px solid var(--line);padding-top:45px}.reading-intro{max-width:620px;line-height:1.8;color:var(--muted);margin:-10px 0 30px}.product-kind{font-weight:600}
@media(max-width:650px){.reading-intro{font-size:.9rem}.reading-catalog{padding-top:30px}}

.coming-label{display:block;width:fit-content;margin:0 0 10px;padding:6px 9px;border-radius:4px;background:#f7e5b7;color:#614919;font-size:.65rem;font-weight:800;letter-spacing:.07em}

.cover-button .coming-label{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;padding:4px 8px;font-size:.58rem;line-height:1.2;max-width:calc(100% - 10px)}
@media(max-width:650px){.cover-button .coming-label{font-size:.48rem;padding:3px 5px;bottom:4px}}

/* Catalogue cards link to crawlable individual book pages. */
.product a.cover-button{display:flex;position:relative;align-items:center;justify-content:center}.product h3 a{font:inherit;color:inherit}.product a.text-button{display:inline-block}

/* Keep the light separate from the moving cover to avoid rectangular filter
   artifacts on touch browsers. Covers retain their small lift on interaction. */
.product .cover-button{isolation:isolate}
.product .cover-button:before{content:'';position:absolute;inset:5%;z-index:-1;background:radial-gradient(ellipse,#ffffff85,transparent 70%);pointer-events:none}
.product .cover-button img{filter:none;box-shadow:none;position:relative}
.product .cover-button:hover img{transform:none}
@media(hover:hover) and (pointer:fine){.product .cover-button:hover img{transform:translateY(-7px) rotate(-2deg)}}
@media(hover:none){.product .cover-button:active img{transform:translateY(-4px) rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.product .cover-button img{transition:none}.product .cover-button:hover img,.product .cover-button:active img{transform:none}}

/* Clear, touch-friendly catalogue actions in the Stormvale palette. */
.product .product-bottom{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.product .product-bottom>a.text-button{display:flex;align-items:center;justify-content:center;min-height:38px;width:auto;max-width:62%;flex-shrink:0;padding:8px 11px;border:1px solid #dfbd76;border-radius:8px;background:#152238;color:#ffe0a0;font-weight:700;font-size:.75rem;line-height:1.4;text-align:center;text-decoration:none;box-shadow:0 3px 8px #15223812;transition:background .18s,color .18s}
.product .product-bottom>a.text-button:focus-visible{outline:3px solid #b78026;outline-offset:3px}
@media(hover:hover){.product .product-bottom>a.text-button:hover{background:#ffe0a0;color:#152238}}
.product .product-bottom>a.text-button:active{background:#273650}
@media(max-width:650px){.product .product-bottom{gap:7px}.product .product-bottom>span{min-width:0;font-size:.68rem;line-height:1.45}.product .product-bottom>a.text-button{font-size:.68rem;padding:8px 7px;max-width:60%}}
@media(prefers-reduced-motion:reduce){.product .product-bottom>a.text-button{transition:none}}

/* A small, bounded animated canvas: only transform and opacity are animated. */
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:190px;padding:34px 40px;border:1px solid #ffe0a026;border-radius:16px;background:linear-gradient(115deg,#152238 8%,#343054 58%,#21545b);color:#fff}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading>div,:is(#produkter,#lasbocker,#stormvale-information)>.section-heading>span{position:relative;z-index:1}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading .eyebrow{color:#ffe0a0;letter-spacing:.16em;font-size:.68rem;margin-bottom:13px}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading h2{color:#fff;font-size:clamp(2rem,4vw,3.3rem);line-height:1.12;margin:0;letter-spacing:-.045em}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading>span{flex:0 1 225px;max-width:225px;color:#f1e6cf;font-size:.8rem;line-height:1.7;text-align:right;padding:12px 0 12px 22px;border-left:1px solid #ffe0a040}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading:before{content:'';position:absolute;inset:-16px -5%;z-index:0;pointer-events:none;background:url('/assets/catalog-waves.svg') right center/100% 100% no-repeat;animation:catalog-wave-flow 12s ease-in-out infinite alternate;animation-play-state:paused}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading:after{content:'';position:absolute;inset:-12px -5%;z-index:0;pointer-events:none;background:url('/assets/catalog-waves.svg') center/100% 100% no-repeat;opacity:.45;transform:scaleY(-1);animation:catalog-wave-return 17s ease-in-out infinite alternate;animation-play-state:paused}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading[data-animate="true"]:before,:is(#produkter,#lasbocker,#stormvale-information)>.section-heading[data-animate="true"]:after{animation-play-state:running}
@keyframes catalog-wave-flow{from{transform:translateX(-2%) translateY(5px)}to{transform:translateX(3%) translateY(-8px)}}
@keyframes catalog-wave-return{from{transform:scaleY(-1) translateX(3%)}to{transform:scaleY(-1) translateX(-3%) translateY(8px)}}
@media(max-width:650px){:is(#produkter,#lasbocker,#stormvale-information)>.section-heading{min-height:174px;padding:25px 22px;gap:18px;flex-direction:column;align-items:flex-start;border-radius:12px}:is(#produkter,#lasbocker,#stormvale-information)>.section-heading .eyebrow{font-size:.57rem;letter-spacing:.12em}:is(#produkter,#lasbocker,#stormvale-information)>.section-heading>span{flex:auto;max-width:100%;padding:0;border:0;text-align:left;font-size:.73rem}}
@media(prefers-reduced-motion:reduce){:is(#produkter,#lasbocker,#stormvale-information)>.section-heading:before,:is(#produkter,#lasbocker,#stormvale-information)>.section-heading:after{animation:none}}

/* Full-width, shallow heading; the book grid keeps its existing gutters. */
:is(#produkter,#lasbocker,#stormvale-information){max-width:none;padding-left:0;padding-right:0}
:is(#produkter,#lasbocker,#stormvale-information)>.products{max-width:1340px;margin-inline:auto;padding-inline:2%}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading{min-height:116px;padding:22px max(2%,calc((100% - 1340px)/2 + 2%));border-left:0;border-right:0;border-radius:0}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading h2{font-size:clamp(1.8rem,3vw,2.4rem)}
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading .eyebrow{margin-bottom:8px}
@media(max-width:1000px){:is(#produkter,#lasbocker,#stormvale-information)>.products{padding-inline:35px}:is(#produkter,#lasbocker,#stormvale-information)>.section-heading{padding-inline:35px}}
@media(max-width:650px){:is(#produkter,#lasbocker,#stormvale-information)>.products{padding-inline:22px}:is(#produkter,#lasbocker,#stormvale-information)>.section-heading{min-height:120px;padding:19px 22px;gap:10px;border-radius:0}}

/* Matching straight-edged ribbons for both catalogues. */
:is(#produkter,#lasbocker,#stormvale-information)>.section-heading{border-radius:0;box-shadow:none}
#lasbocker{border-top:0;padding-top:0}
#lasbocker>.reading-products{max-width:1340px;margin-inline:auto;padding-inline:2%}
#lasbocker>.reading-intro{max-width:1340px;margin:0 auto 30px;padding-inline:2%;font-size:.9rem}
@media(max-width:1000px){#lasbocker>.reading-products,#lasbocker>.reading-intro{padding-inline:35px}}
@media(max-width:650px){:is(#produkter,#lasbocker,#stormvale-information)>.section-heading{min-height:110px;border-radius:0}#lasbocker>.reading-products,#lasbocker>.reading-intro{padding-inline:22px}}

/* Intro panel aligned with the reading book card below. */
#lasbocker>.reading-intro{width:96%;max-width:calc(1340px - 4%);padding:20px 28px;background:#dce5e0;border:1px solid #cdd9d1;border-radius:10px;color:#344c43;line-height:1.8;margin-bottom:24px}
@media(max-width:1000px){#lasbocker>.reading-intro{width:calc(100% - 70px);max-width:none;padding:20px 26px}}
@media(max-width:650px){#lasbocker>.reading-intro{width:calc(100% - 44px);padding:18px 20px}}

/* Unified colouring-book cards, preserving the site's original typography. */
:is(#products,#reading-products)>.product{position:relative;isolation:isolate;overflow:hidden;border:1px solid #dfc58e;border-radius:18px;background:linear-gradient(155deg,var(--card-top,#e0f0f3) 0%,var(--card-mid,#e8f2f1) 42%,#faf9f1 75%,var(--card-base,#f8f5e9) 100%);box-shadow:0 5px 14px #15223809;padding-bottom:18px}
:is(#products,#reading-products)>.product:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 90% 60%,var(--card-glow,#b5dfdf80),transparent 58%),radial-gradient(ellipse at 5% 80%,#fffdf1,transparent 65%);opacity:.7;animation:card-colour-breathe var(--card-duration,10s) ease-in-out infinite alternate;animation-play-state:paused}
:is(#products,#reading-products)>.product:after{content:'';position:absolute;right:-10px;bottom:32px;width:100%;height:260px;z-index:-1;pointer-events:none;background:url('/assets/card-gold-flow.svg') right bottom/100% 100% no-repeat;animation:card-gold-drift 12s ease-in-out infinite alternate;animation-play-state:paused}
:is(#products,#reading-products)>.product[data-animate="true"]:before,:is(#products,#reading-products)>.product[data-animate="true"]:after{animation-play-state:running}
:is(#products,#reading-products)>.product:nth-child(3n+2):before{animation-delay:-3s}
:is(#products,#reading-products)>.product:nth-child(3n+3):after{animation-delay:-5s}
:is(#products,#reading-products) .cover-button{background:transparent;border-radius:0}
:is(#products,#reading-products) .cover-button:before{background:radial-gradient(ellipse,#fff9,transparent 72%)}
:is(#products,#reading-products) .product-kind,:is(#products,#reading-products) h3,:is(#products,#reading-products) .description,:is(#products,#reading-products) .product-bottom{margin-left:18px;margin-right:18px}
:is(#products,#reading-products) .product-kind{margin-top:16px;font-size:.65rem;letter-spacing:.065em;color:#526575}
:is(#products,#reading-products) .description{color:#516373}
:is(#products,#reading-products) .product-bottom{border-color:#c5d4d5}
:is(#products,#reading-products) .cover-button .coming-label{bottom:8px;border:1px solid #e3c783;border-radius:5px;background:#fae8b9}
@keyframes card-colour-breathe{from{opacity:.75;transform:translateY(0)}to{opacity:.3;transform:translateY(-10px)}}
@keyframes card-gold-drift{from{transform:translateY(5px);opacity:.6}to{transform:translateY(-7px);opacity:1}}
@media(max-width:650px){:is(#products,#reading-products)>.product{border-radius:13px;padding-bottom:14px}:is(#products,#reading-products) .product-kind,:is(#products,#reading-products) h3,:is(#products,#reading-products) .description,:is(#products,#reading-products) .product-bottom{margin-left:12px;margin-right:12px}:is(#products,#reading-products) .product-kind{font-size:.6rem}:is(#products,#reading-products) .product-bottom>a.text-button{padding:8px 6px}}
@media(prefers-reduced-motion:reduce){:is(#products,#reading-products)>.product:before,:is(#products,#reading-products)>.product:after{animation:none}}

/* Cover-inspired palettes keyed by book identity, independent of sorting. */
:is(#products,#reading-products)>[data-book="unicorn"]{--card-top:#ecdff6;--card-mid:#f8e8ee;--card-base:#e9f3fb;--card-glow:#d7b7ec85;--card-duration:12s}
:is(#products,#reading-products)>[data-book="heroes"]{--card-top:#cddfea;--card-mid:#e2edf6;--card-base:#fff2cf;--card-glow:#80b9df65;--card-duration:10s}
:is(#products,#reading-products)>[data-book="miley"]{--card-top:#ceeeee;--card-mid:#e3f2df;--card-base:#fff1ce;--card-glow:#8dceac65;--card-duration:13s}
:is(#products,#reading-products)>[data-book="haunting"]{--card-top:#dfd1ea;--card-mid:#eee2ed;--card-base:#fbe9d4;--card-glow:#b79ac780;--card-duration:15s}
:is(#products,#reading-products)>[data-book="puppies"]{--card-top:#d3eafa;--card-mid:#e9f1d9;--card-base:#f4f1d3;--card-glow:#a3d28570;--card-duration:11s}
:is(#products,#reading-products)>[data-book="little-color-adventure"]{--card-top:#f5ddea;--card-mid:#f7e9ee;--card-base:#e7f2d9;--card-glow:#eaa9ca65;--card-duration:14s}
:is(#products,#reading-products)>[data-book="magical-friends"]{--card-top:#d3e9f4;--card-mid:#e3f1e8;--card-base:#fff0d5;--card-glow:#9ccedc75;--card-duration:12s}
:is(#products,#reading-products)>[data-book="rainbow"]{--card-top:#e8d8f3;--card-mid:#f6e2ec;--card-base:#fff0ca;--card-glow:#e4acca70;--card-duration:16s}
:is(#products,#reading-products)>[data-book="engine-roar"]{--card-top:#e9d8c7;--card-mid:#f6e8da;--card-base:#dfedf4;--card-glow:#e5ae7270;--card-duration:11s}

/* Mobile cards: predictable reading order and full touch targets. */
@media(max-width:820px){
 :is(#products,#reading-products){grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 :is(#products,#reading-products)>.product{display:flex;flex-direction:column;padding-bottom:14px}
 :is(#products,#reading-products) .cover-button{flex:none;height:clamp(215px,48vw,300px);padding:18px 12px 30px}
 :is(#products,#reading-products) .cover-button img{width:100%;height:100%;max-width:100%;object-fit:contain}
 :is(#products,#reading-products) .product-kind,:is(#products,#reading-products) h3,:is(#products,#reading-products) .description,:is(#products,#reading-products) .product-bottom{margin-left:12px;margin-right:12px}
 :is(#products,#reading-products) .product-kind{margin-top:10px;font-size:.61rem;line-height:1.65;letter-spacing:.04em}
 :is(#products,#reading-products) h3{font-size:1rem;line-height:1.4;overflow-wrap:anywhere}
 :is(#products,#reading-products) .description{font-size:.84rem;line-height:1.65;margin-bottom:16px}
 :is(#products,#reading-products) .product-bottom{margin-top:auto;padding-top:12px;gap:10px}
 :is(#products,#reading-products) .product-bottom>a.text-button{min-height:44px;font-size:.73rem;line-height:1.35;padding:9px 8px}
 :is(#products,#reading-products) .cover-button .coming-label{font-size:.46rem;max-width:calc(100% - 12px);white-space:normal;text-align:center;bottom:6px;padding:4px 5px}
}
@media(max-width:540px){
 :is(#products,#reading-products) .product-bottom{flex-direction:column;align-items:stretch;gap:9px}
 :is(#products,#reading-products) .product-bottom>span{font-size:.72rem;line-height:1.5;white-space:normal}
 :is(#products,#reading-products) .product-bottom>a.text-button{width:100%;max-width:none;flex-shrink:1}
}
@media(max-width:360px){
 :is(#products,#reading-products){grid-template-columns:1fr}
 :is(#products,#reading-products) .cover-button{height:285px}
 :is(#products,#reading-products) .product-kind,:is(#products,#reading-products) h3,:is(#products,#reading-products) .description,:is(#products,#reading-products) .product-bottom{margin-left:18px;margin-right:18px}
 :is(#products,#reading-products) .product-bottom{flex-direction:row;align-items:center}
 :is(#products,#reading-products) .product-bottom>a.text-button{width:auto;max-width:62%}
}

/* Phone-only simplified copy; full details remain on each book page. */
@media(max-width:650px){
 :is(#products,#reading-products) .cover-button{height:clamp(189px,43vw,270px);padding:14px 12px 4px}
 :is(#products,#reading-products) .cover-button img{object-position:center bottom}
 :is(#products,#reading-products) [data-book="little-color-adventure"] .cover-button,:is(#products,#reading-products) [data-book="magical-friends"] .cover-button,:is(#products,#reading-products) [data-book="rainbow"] .cover-button,:is(#products,#reading-products) [data-book="engine-roar"] .cover-button{padding-bottom:27px}
 :is(#products,#reading-products) .product-kind,:is(#products,#reading-products) .product-bottom>span{display:none}
 :is(#products,#reading-products) h3{font-size:.9rem;line-height:1.35;margin-top:4px;margin-bottom:7px;text-align:center}
 :is(#products,#reading-products) .description{display:none}
 :is(#products,#reading-products) .cover-button .coming-label{white-space:nowrap;font-size:.42rem;letter-spacing:.025em;padding:4px 3px;max-width:calc(100% - 8px)}
 :is(#products,#reading-products) .product-bottom{position:relative;border-top:0;padding-top:15px;justify-content:flex-end}
 :is(#products,#reading-products) .product-bottom:before{content:'';position:absolute;top:3px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#bb963d 35%,#bb963d 65%,transparent);pointer-events:none}
 :is(#products,#reading-products) .product-bottom>a.text-button{width:100%;max-width:none;min-height:44px;font-size:.72rem}
}

#reading-products>[data-book="path"]{--card-top:#d1e5df;--card-mid:#e3ece1;--card-base:#f8edd2;--card-glow:#94c8b380;--card-duration:14s}

/* Upcoming collection: colours drawn from each finished cover. */
#products>[data-book="best-friends-rain-or-shine"]{--card-top:#deedf2;--card-mid:#deedf288;--card-base:#f7f1e6;--card-glow:#deedf299}
#products>[data-book="cozy-days"]{--card-top:#f2dfce;--card-mid:#f2dfce88;--card-base:#f7f1e6;--card-glow:#f2dfce99}
#products>[data-book="cozy-friends"]{--card-top:#e6dfe9;--card-mid:#e6dfe988;--card-base:#f7f1e6;--card-glow:#e6dfe999}
#products>[data-book="cozy-ho-ho"]{--card-top:#efd9d0;--card-mid:#efd9d088;--card-base:#f7f1e6;--card-glow:#efd9d099}
#products>[data-book="cozy-letters"]{--card-top:#dde8ee;--card-mid:#dde8ee88;--card-base:#f7f1e6;--card-glow:#dde8ee99}
#products>[data-book="cozy-safari"]{--card-top:#efe3bd;--card-mid:#efe3bd88;--card-base:#f7f1e6;--card-glow:#efe3bd99}
@media(max-width:650px){#products [data-book="best-friends-rain-or-shine"] .cover-button,#products [data-book="cozy-days"] .cover-button,#products [data-book="cozy-friends"] .cover-button,#products [data-book="cozy-ho-ho"] .cover-button,#products [data-book="cozy-letters"] .cover-button,#products [data-book="cozy-safari"] .cover-button{padding-bottom:27px}}