/* What all sample shops share, which is little: resets, the top strip, the plain parts. */
* { box-sizing: border-box; }
html { --gutter: clamp(16px, 3vw, 40px); }
body { background: var(--bg); color: var(--fg); margin: 0; overflow-x: clip; font-family: var(--body); line-height: 1.5; }
img { display: block; height: auto; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid currentcolor; outline-offset: 3px; }
.skip { left: -999px; position: absolute; }
.skip:focus { background: #fff; color: #000; left: 8px; padding: 0.5rem; top: 8px; z-index: 50; }
.strip { align-items: center; background: var(--strip-bg, #fff); color: var(--strip-fg, #1b1712); display: flex; flex-wrap: wrap; font-family: Schibsted, system-ui, sans-serif; font-size: 0.85rem; gap: 0.25rem 1.1rem; padding: 0.35rem var(--gutter); position: relative; z-index: 30; }
.strip .mark { align-items: center; display: inline-flex; font-weight: 800; gap: 0.4rem; text-decoration: none; }
.strip .mark img { height: 1.1rem; width: 1.1rem; }
.strip nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-inline-start: auto; }
.strip nav a { text-decoration: none; }
@media (hover: hover) { .strip nav a:hover { text-decoration: underline; } }
.strip .menu { display: none; margin-inline-start: auto; position: relative; }
.strip .menu summary { cursor: pointer; font-weight: 700; list-style: none; }
.strip .menu nav { background: #fff; color: #1b1712; display: grid; gap: 0.4rem; inset-inline-end: 0; min-width: 12rem; padding: 0.8rem; position: absolute; top: 1.7rem; }
@media (max-width: 900px) { .strip > nav { display: none; } .strip .menu { display: block; } }
@font-face { font-family: "Schibsted"; src: url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
.sample-note { font-size: 0.8rem; margin: 0.5rem 0 0; opacity: 0.85; }
.fill, .fill > .gs-track, .fill .gs-slide { height: 100%; }
.per { --gs-per-view: var(--per-s); --gs-gap: var(--gap, 10px); }
@media (min-width: 720px) { .per { --gs-per-view: var(--per-l); } }
.buy, .ctl { cursor: pointer; font: inherit; }
.row-demo { cursor: grab; }
.row-demo img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.cartline [data-cart].bump { animation: k-bump 0.4s; display: inline-block; }
@keyframes k-bump { 40% { transform: scale(1.7); } }

/* Below the shop: the same voice in the shop's own colours. */
.why { background: var(--why-bg, var(--bg)); color: var(--why-fg, var(--fg)); display: grid; gap: 2rem var(--gutter); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter); }
.why h2, .plain h2, .nfaq h2 { font-family: var(--display); font-weight: var(--display-w, 400); font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; margin: 0 0 1rem; }
.why p { margin: 0 0 1rem; max-width: 40rem; }
.how dl { margin: 0; }
.how dt { font-weight: 700; margin-block-start: 0.9rem; }
.how dd { margin: 0.1rem 0 0; }
.how h3 { font-family: var(--display); font-weight: var(--display-w, 400); font-size: 1.5rem; margin: 0 0 0.25rem; }
.nlinks { background: var(--bg); color: var(--fg); padding: 0 var(--gutter) clamp(2.5rem, 5vw, 4rem); }
.nlinks h3 { font-family: var(--display); font-weight: var(--display-w, 400); font-size: 1.3rem; margin: 1.25rem 0 0.35rem; }
.nlinks ul { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; list-style: none; margin: 0; padding: 0; }
.nfaq { background: var(--bg); color: var(--fg); padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); }
.nfaq details { border-block-end: 1px solid currentcolor; max-width: 46rem; padding-block: 0.7rem; }
.nfaq summary { cursor: pointer; font-weight: 700; }
.nfaq details p { margin: 0.5rem 0 0.3rem; }
.nplain-head { background: var(--st-bg); color: var(--st-ink); padding: clamp(2rem, 5vw, 4rem) var(--gutter) 0; }
.nplain-head h2 { font-family: var(--display); font-weight: var(--display-w, 400); font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; margin: 0; }
.nplain-head p { margin: 0.5rem 0 0; max-width: 40rem; }
.foot2 { background: #fff; color: #1b1712; display: grid; font-family: Schibsted, system-ui, sans-serif; font-size: 0.85rem; gap: 0.6rem; padding: 1.5rem var(--gutter); }
.foot2 p { margin: 0; max-width: 46rem; }
.foot2 ul { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; list-style: none; margin: 0; padding: 0; }

/* A slide with its details under the picture: the picture stays square, the text stays. */
.gs .gs-slide:has(> .pd) > .gs-media, .gs .gs-slide:has(> .pd) > picture > .gs-media, .gs .st-card .gs-media, .gs .st-card > picture > img { aspect-ratio: 1; height: auto; width: 100%; }
.gs .gs-slide:has(> .pd) > picture, .gs .st-card > picture { display: block; height: auto; }

/* The header stays, so the cart is always in sight. */
html { scroll-padding-top: 4rem; }
.strip { backdrop-filter: blur(10px); background: color-mix(in srgb, #fff 92%, transparent); box-shadow: 0 1px 0 #0002; color: #1b1712; flex-wrap: nowrap; position: sticky; top: 0; z-index: 60; }
.strip nav a, .strip .mark, .strip summary { color: #1b1712; }
.strip .cart { font-variant-numeric: tabular-nums; font-weight: 700; margin-inline-start: 0.5rem; white-space: nowrap; }
.strip .cart [data-cart] { background: #1b1712; border-radius: 1em; color: #fff; display: inline-block; min-width: 1.5em; padding: 0 0.4em; text-align: center; }
.strip > nav { flex: 1 1 auto; justify-content: flex-end; }
.cartline { display: none; }
@media (max-width: 760px) { .strip .cart-word { display: none; } .strip .cart::before { content: "Cart "; } .strip .cart { margin-inline-start: auto; } }