/* Printbuddy US storefront (whop.site). Hand-written for this site: layouts follow myprintbuddy.se page by page,
   values come from the SE store's design settings (colours, fonts, radii, page width). No theme code is used. */

/* ---------- tokens ---------- */
:root {
  --c-bg: #f8f8f5;
  --c-text: #6e6e6a;
  --c-ink: #1a1a1a;
  --c-ink-2: #272727;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-blue: #1a47e5;
  --c-blue-dark: #0d2d9e;
  --c-blue-text: #ececec;
  --c-purple: #803cee;
  --c-success: #08afed;
  --c-line: rgb(110 110 106 / .18);
  --c-line-strong: rgb(110 110 106 / .35);
  --c-error: #c0262d;
  --f-head: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --f-system: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ls-head: -0.02em;
  --r-btn: 26px;
  --r-block: 24px;
  --r-small: 12px;
  --r-input: 8px;
  --shadow-block: 0 18px 50px rgb(0 0 0 / .10);
  --page-max: 1600px;
  --gutter: 20px;
  --sec-y: 48px;
  --sec-y-tight: 32px;
  --h1: 34px; --h2: 30px; --h3: 26px; --h4: 22px; --h5: 18px;
  --top-h: 44px;
}
@media (min-width: 700px) {
  :root { --gutter: 32px; --sec-y: 64px; --sec-y-tight: 40px; --h1: 44px; --h2: 38px; --h3: 32px; --h4: 24px; --h5: 20px; }
}
@media (min-width: 1150px) {
  :root { --gutter: 48px; --sec-y: 80px; --h1: 56px; --h2: 46px; --h3: 38px; --h4: 28px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 15px/1.65 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
@media (min-width: 700px) { body { font-size: 16px; } }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3, h4, .t-h1, .t-h2, .t-h3, .t-h4 { font-family: var(--f-head); font-weight: 400; letter-spacing: var(--ls-head); line-height: 1.1; color: var(--c-ink); }
.t-h1 { font-size: var(--h1); } .t-h2 { font-size: var(--h2); } .t-h3 { font-size: var(--h3); } .t-h4 { font-size: var(--h4); }
.t-h5 { font: 700 var(--h5)/1.3 var(--f-body); color: var(--c-ink); }
.t-small { font-size: 14px; } .t-xs { font-size: 12px; }
.t-muted { color: var(--c-text); opacity: .85; }
.t-bold { font-weight: 700; }
.t-center { text-align: center; }
.copy > * + * { margin-top: 1em; }
.copy ul, .copy ol { padding-left: 1.2em; }
.copy li + li { margin-top: .35em; }
.copy a { text-underline-offset: 3px; }
.copy strong { color: var(--c-ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.wrap--text { max-width: 760px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 8px 16px; background: var(--c-white); }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* buttons */
.btn, .btn-wide { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 30px; border: 0; border-radius: var(--r-btn); background: var(--c-blue); color: var(--c-white); font: 700 15px/1.2 var(--f-body); text-decoration: none; text-align: center; transition: background-color .25s ease, opacity .25s ease; }
.btn:hover, .btn-wide:hover { background: var(--c-blue-dark); }
.btn:disabled, .btn-wide:disabled, .btn.is-busy { opacity: .6; cursor: default; }
.btn--lg { min-height: 56px; font-size: 16px; }
.btn--sm { min-height: 36px; padding: 8px 18px; font-size: 14px; }
.btn--block, .btn-wide { width: 100%; }
.btn--ghost { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.btn--ghost:hover { background: var(--c-white); }
.btn-link { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; font: inherit; }
.muted { color: var(--c-text); opacity: .8; font-size: 14px; }

/* inputs */
.field { display: grid; gap: 6px; font-size: 14px; }
.field input, .field textarea, .field select, .fld input, .fld select, .nl input {
  width: 100%; font: inherit; font-size: 15px; color: var(--c-ink); background: var(--c-white); border: 1px solid var(--c-line-strong); border-radius: var(--r-input); padding: 12px 14px; }
.field textarea { resize: vertical; min-height: 140px; }

/* ---------- announcement bar (sticky, arrows) ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--c-blue); color: var(--c-blue-text); }
.topbar__in { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; min-height: var(--top-h); max-width: 640px; margin-inline: auto; padding-inline: 12px; }
.topbar__in--single { grid-template-columns: 1fr; }
.topbar__list { display: grid; text-align: center; }
.topbar__msg { grid-area: 1 / 1; font: 700 13px/1.4 var(--f-body); letter-spacing: .02em; padding: 10px 4px; transition: opacity .35s ease, transform .35s ease; }
.topbar__msg a { text-decoration: none; }
.topbar__msg[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: translateY(4px); }
.topbar__arrow { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: inherit; }
@media (min-width: 700px) { .topbar__msg { font-size: 14px; } }

/* ---------- header: logo left, navigation centred, cart right ---------- */
.masthead { background: var(--c-bg); color: var(--c-text); position: relative; z-index: 20; }
.masthead__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 64px; padding-block: 12px; }
.masthead__logo { grid-column: 2; justify-self: center; display: block; }
.masthead__logo img { width: 130px; height: auto; }
.masthead__in > * { grid-row: 1; }
.masthead__burger { grid-column: 1; justify-self: start; }
.masthead__nav { display: none; }
.masthead__tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--c-ink); text-decoration: none; border-radius: 50%; }
.icon-btn:hover { background: rgb(0 0 0 / .04); }
.bubble { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-blue); color: var(--c-white); font: 700 11px/18px var(--f-body); text-align: center; }
.bubble[hidden] { display: none; }
@media (min-width: 700px) {
  .masthead__in { min-height: 96px; padding-block: 20px; }
  .masthead__logo img { width: 195px; }
}
@media (min-width: 1150px) {
  .masthead__in { grid-template-columns: 1fr auto 1fr; }
  .masthead__burger { display: none; }
  .masthead__logo { grid-column: 1; justify-self: start; }
  .masthead__nav { display: block; grid-column: 2; grid-row: 1; }
  .masthead__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 36px; list-style: none; padding: 0; }
  .masthead__nav a { font-weight: 700; text-decoration: none; color: var(--c-text); transition: color .2s ease; }
  .masthead__nav a:hover, .masthead__nav a[aria-current="page"] { color: var(--c-ink); }
}

/* mobile / tablet menu drawer */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer__shade { position: absolute; inset: 0; background: rgb(0 0 0 / .4); }
.drawer__panel { position: absolute; left: 8px; right: 8px; bottom: 8px; min-height: 50vh; max-height: 80vh; overflow-y: auto; padding: 72px 28px 32px; background: var(--c-bg); border-radius: var(--r-small); animation: pb-up .25s ease-out; }
.drawer__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: none; display: grid; place-items: center; }
.drawer__links { list-style: none; padding: 0; display: grid; gap: 14px; }
.drawer__links a { font: 400 28px/1.15 var(--f-head); letter-spacing: var(--ls-head); color: var(--c-ink); text-decoration: none; }
@media (min-width: 700px) { .drawer__panel { right: auto; top: 8px; width: 412px; max-height: none; padding-top: 96px; animation-name: pb-left; } }
@keyframes pb-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes pb-left { from { transform: translateX(-24px); opacity: 0; } }
body.no-scroll { overflow: hidden; }

/* ---------- sections ---------- */
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: var(--sec-y-tight); }
.sec--flush { padding-block: 0; }
.sec + .sec--joined { padding-top: 0; }
.sec__head { display: grid; gap: 12px; text-align: center; max-width: 760px; margin: 0 auto 32px; }

/* slideshow / banner */
.slides { position: relative; background: var(--slides-bg, #f2f2f2); overflow: hidden; }
.slides--boxed { border-radius: var(--r-block); }
.slides__track { display: grid; }
.slides__slide { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s ease; }
.slides__slide.is-on { opacity: 1; visibility: visible; }
.slides__slide img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ar-m, 1 / 1); }
@media (min-width: 700px) { .slides__slide img { aspect-ratio: var(--ar-d, 16 / 7); } }
.slides__nums { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 10px; }
.slides__num { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .55); background: transparent; color: var(--c-white); font: 700 12px/1 var(--f-body); }
.slides__num[aria-current="true"] { border-color: var(--c-white); background: rgb(255 255 255 / .15); }
@media (min-width: 700px) { .slides__nums { justify-content: flex-start; left: var(--gutter); bottom: 32px; } }

/* home: price + button block under the hero */
.pricecta { padding: 40px 24px 48px 46px; }
.pricecta__price { font: 400 1.4rem/1.2 var(--f-system); color: var(--c-black); margin-bottom: 16px; letter-spacing: 0; }
.pricecta__text { margin-bottom: 24px; color: var(--c-text); }
.pricecta .btn { padding: 12px 24px; font-weight: 400; font-size: 16px; min-height: 0; }
@media (min-width: 750px) { .pricecta { padding-left: 170px; } .pricecta__price { font-size: 38px; } }

/* big brand word above the footer */
.bigword { padding: var(--sec-y) var(--gutter) 0; text-align: center; overflow: hidden; }
.bigword__text { font: 400 min(20vw, 65px)/1 var(--f-head); letter-spacing: -0.04em; color: var(--c-ink); }
@media (min-width: 700px) { .bigword__text { font-size: min(15vw, 240px); } }

/* perks row (icon + text) */
.perks { padding-block: var(--sec-y); }
.perks__list { display: grid; gap: 36px; justify-content: center; text-align: center; }
.perks__item { display: grid; justify-items: center; gap: 16px; max-width: 360px; margin-inline: auto; }
.perks__item img { width: 60px; height: 60px; object-fit: contain; }
.perks__item strong { color: var(--c-ink); }
@media (min-width: 700px) { .perks__list { grid-template-columns: repeat(var(--n, 3), minmax(0, 360px)); gap: 48px; } }

/* footer */
.foot { background: var(--c-white); color: var(--c-black); padding-block: 56px 32px; }
.foot__cols { display: grid; gap: 40px; }
.foot__col h2 { font: 700 15px/1.4 var(--f-body); color: var(--c-black); margin-bottom: 16px; letter-spacing: 0; }
.foot__col .copy { color: rgb(0 0 0 / .65); font-size: 15px; }
.foot__col .copy strong { color: var(--c-black); }
.foot__links { list-style: none; padding: 0; display: grid; gap: 10px; }
.foot__links a { text-decoration: none; color: rgb(0 0 0 / .65); transition: color .2s ease; }
.foot__links a:hover { color: var(--c-black); }
.foot__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgb(0 0 0 / .08); font-size: 13px; color: rgb(0 0 0 / .6); }
.nl { display: grid; gap: 10px; }
.nl__row { display: flex; gap: 8px; }
.nl__row input { flex: 1; }
@media (min-width: 700px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .foot { padding-block: 72px 40px; } .foot__cols { grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1.4fr; gap: 48px; } }

/* ---------- product cards / grids ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1150px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: grid; gap: 14px; align-content: start; color: var(--c-ink); }
.card__media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-small); overflow: hidden; background: var(--c-white); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease, transform .6s ease; }
.card__media img + img { opacity: 0; }
@media (hover: hover) { .card:hover .card__media img + img { opacity: 1; } .card:hover .card__media img:only-child { transform: scale(1.03); } }
.card__quick { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--c-white); color: var(--c-ink); display: grid; place-items: center; box-shadow: 0 4px 14px rgb(0 0 0 / .12); text-decoration: none; transition: transform .2s ease; }
.card__quick:hover { transform: scale(1.06); }
.card__quick.is-done { background: var(--c-blue); color: var(--c-white); }
.card__info { display: grid; gap: 4px; }
.card__title { font-weight: 700; text-decoration: none; line-height: 1.35; }
.card__price { color: var(--c-ink); font-size: 15px; }
.card__price .from { color: var(--c-text); }
.swatches { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.swatch-more { font-size: 11px; color: var(--c-text); }

/* collection page */
.coll-head { padding-block: 48px 24px; }
.coll-head h1 { text-align: left; }
@media (min-width: 700px) { .coll-head { padding-block: 72px 40px; } }
.coll-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 0 24px; border-bottom: 1px solid var(--c-line); margin-bottom: 32px; font-size: 14px; }
.coll-bar select { font: inherit; color: var(--c-ink); background: transparent; border: 0; padding: 6px 4px; }
.coll-bar label { display: flex; gap: 6px; align-items: center; }

/* ---------- product page ---------- */
.pdp { display: grid; gap: 28px; padding-top: 16px; }
@media (min-width: 1000px) { .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-top: 32px; align-items: start; } .pdp__media { position: sticky; top: calc(var(--top-h) + 20px); } }
.gal { display: grid; gap: 12px; min-width: 0; }
.gal__stage { position: relative; }
.gal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-block); background: var(--c-white); }
.gal__track::-webkit-scrollbar { display: none; }
.gal__item { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; }
.gal__arrow { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--c-white); color: var(--c-ink); display: none; place-items: center; box-shadow: 0 4px 14px rgb(0 0 0 / .1); }
.gal__arrow--prev { left: 16px; } .gal__arrow--next { right: 16px; }
@media (min-width: 1000px) { .gal__arrow { display: grid; } }
.gal__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.gal__thumb { flex: 0 0 64px; height: 64px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--c-white); opacity: .55; box-shadow: 0 0 0 1px var(--c-line); transition: opacity .2s ease, box-shadow .2s ease; }
.gal__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--c-ink); }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .gal__thumb { flex-basis: 80px; height: 80px; } }

.info { display: grid; gap: 22px; align-content: start; min-width: 0; }
.info__title { font-size: var(--h3); }
.info__price { font: 700 22px/1.2 var(--f-body); color: var(--c-ink); }
.info__intro { max-width: 60ch; }
.info__note { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.info__msg { font-size: 14px; min-height: 1.2em; }
.info__msg a { font-weight: 700; }

/* purchase options (printer page) */
.offer { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.offer__opt { position: relative; border-radius: 16px; background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-line-strong); transition: box-shadow .2s ease, background-color .2s ease; }
.offer__opt.is-on { box-shadow: inset 0 0 0 2px var(--c-blue); background: #fdfdff; }
.offer__opt[hidden] { display: none; }
.offer__head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 18px; cursor: pointer; }
.offer__radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-line-strong); display: grid; place-items: center; }
.offer__opt.is-on .offer__radio { box-shadow: inset 0 0 0 2px var(--c-blue); }
.offer__opt.is-on .offer__radio::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c-blue); }
.offer__title { font: 700 17px/1.3 var(--f-body); color: var(--c-ink); }
.offer__sub { display: block; font: 400 14px/1.45 var(--f-body); color: var(--c-text); margin-top: 2px; }
.offer__price { font: 700 18px/1.2 var(--f-body); color: var(--c-ink); text-align: right; white-space: nowrap; }
.offer__price small { display: block; font-weight: 400; font-size: 12px; color: var(--c-text); }
.offer__body { padding: 0 18px 18px 54px; display: grid; gap: 12px; }
.offer__opt:not(.is-on) .offer__body { display: none; }
.offer__points { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--c-ink); }
.offer__points li { display: flex; gap: 8px; align-items: flex-start; }
.offer__points svg { flex: none; margin-top: 4px; color: var(--c-blue); }
.offer__terms { font-size: 13px; color: var(--c-text); }
.tiers { display: grid; gap: 8px; }
.tier { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--c-bg); box-shadow: inset 0 0 0 1.5px transparent; cursor: pointer; transition: box-shadow .2s ease; }
.tier:hover { box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
input:checked + .tier { box-shadow: inset 0 0 0 2px var(--c-ink); background: var(--c-white); }
input:focus-visible + .tier { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.tier__name { font-weight: 700; color: var(--c-ink); }
.tier__desc { grid-column: 1; font-size: 13px; color: var(--c-text); }
.tier__price { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; color: var(--c-ink); }
@media (max-width: 420px) { .offer__body { padding-left: 18px; } }

/* plain option pickers (accessories) */
.opt { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.opt legend { padding: 0; margin-bottom: 10px; font-size: 14px; }
.opt legend b { color: var(--c-ink); }
.opt__vals { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 10px; background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-ink); font-size: 14px; cursor: pointer; }
input:checked + .chip { box-shadow: inset 0 0 0 2px var(--c-ink); font-weight: 700; }
.dot { width: 36px; height: 36px; border-radius: 50%; background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; }
input:checked + .dot { outline-color: var(--c-ink); }
input:focus-visible + .chip, input:focus-visible + .dot { outline: 2px solid var(--c-blue); outline-offset: 3px; }

/* Roll Club (roll pages) */
.club { display: grid; gap: 12px; }
.club__heading { font: 700 16px/1.3 var(--f-body); color: var(--c-ink); }
.club__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.club__mode { display: grid; place-items: center; min-height: 46px; padding: 8px 12px; border-radius: 10px; background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-line-strong); font-weight: 700; color: var(--c-ink); cursor: pointer; text-align: center; font-size: 14px; }
input:checked + .club__mode { box-shadow: inset 0 0 0 2px var(--c-purple); color: var(--c-purple); }
.club__tiers { display: grid; gap: 8px; }
.club__tier { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border-radius: 12px; background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-line); cursor: pointer; }
input:checked + .club__tier { box-shadow: inset 0 0 0 2px var(--c-purple); }
.club__title { font-weight: 700; color: var(--c-ink); }
.club__price { font-weight: 700; color: var(--c-ink); text-align: right; }
.club__unit { grid-column: 2; font-size: 12px; color: var(--c-text); text-align: right; }
.club__perks { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--c-purple); }
.club__terms { font-size: 13px; min-height: 1.2em; }
.club__foot { font-size: 13px; }
.refill { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-line); text-decoration: none; color: var(--c-ink); }
.refill small { display: block; color: var(--c-text); font-size: 13px; }

/* "Frequently bought together" (stacked) */
.fbt { display: grid; gap: 12px; }
.fbt__title { font: 700 15px/1.3 var(--f-body); color: var(--c-ink); }
.fbt__list { display: grid; gap: 8px; }
.fbt__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 8px; padding-right: 12px; border-radius: 12px; background: var(--c-white); }
.fbt__item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.fbt__name { font-weight: 700; color: var(--c-ink); text-decoration: none; font-size: 14px; line-height: 1.35; }
.fbt__price { font-size: 13px; }

/* accordions */
.acc { border-bottom: 1px solid var(--c-line); }
.acc:first-of-type { border-top: 1px solid var(--c-line); }
.acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 700; color: var(--c-ink); cursor: pointer; }
.acc > summary::-webkit-details-marker { display: none; }
.acc__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--c-line-strong); transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.acc[open] .acc__icon { transform: rotate(180deg); background: var(--c-ink); color: var(--c-white); box-shadow: none; }
.acc__label { display: flex; align-items: center; gap: 10px; }
.acc__body { padding: 0 0 20px; }

/* sticky add to cart */
.stickybuy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px var(--gutter); background: var(--c-white); box-shadow: 0 -8px 24px rgb(0 0 0 / .08); transform: translateY(110%); visibility: hidden; opacity: 0; transition: transform .3s ease, opacity .3s ease, visibility .3s; }
.stickybuy.is-on { transform: none; visibility: visible; opacity: 1; }
.stickybuy__in { max-width: var(--page-max); margin-inline: auto; display: flex; align-items: center; gap: 16px; }
.stickybuy__prod { display: none; }
.stickybuy .btn { flex: 1; }
@media (min-width: 700px) {
  .stickybuy { left: auto; right: 24px; bottom: 24px; border-radius: 16px; padding: 12px; width: 460px; }
  .stickybuy__prod { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
  .stickybuy__prod img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
  .stickybuy__prod span { display: block; font-size: 14px; color: var(--c-ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stickybuy .btn { flex: none; }
}

/* media with text (boxed blocks, small spacing) */
.split-list { display: grid; gap: 16px; }
.split { display: grid; border-radius: var(--r-block); overflow: hidden; background: var(--split-bg, var(--c-white)); color: var(--split-text, var(--c-ink)); }
.split__media { aspect-ratio: 1 / 1; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__text { display: grid; gap: 16px; align-content: center; padding: 36px 24px; }
.split__text h2 { color: inherit; font-size: var(--h3); }
.split__text .copy strong { color: inherit; }
@media (min-width: 1000px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 560px; }
  .split--end .split__media { order: 2; }
  .split__media { aspect-ratio: auto; min-height: 100%; }
  .split__text { padding: 64px clamp(48px, 7vw, 120px); }
}

/* image mosaic */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; }
.mosaic__cell { border-radius: var(--r-small); overflow: hidden; background: var(--c-black); }
.mosaic__cell img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .mosaic { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 290px; gap: 12px; } }

/* steps: text scrolls, images follow (desktop); swipeable cards (mobile) */
.steps { display: grid; gap: 16px; }
.steps__row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.steps__row::-webkit-scrollbar { display: none; }
.step { flex: 0 0 82%; scroll-snap-align: start; display: grid; gap: 16px; align-content: start; }
.step__img { aspect-ratio: 1 / 1; border-radius: var(--r-block); overflow: hidden; background: var(--c-white); }
.step__img img { width: 100%; height: 100%; object-fit: cover; }
.step__n { font: 700 13px/1 var(--f-body); color: var(--c-text); letter-spacing: .06em; }
.step h3 { font-size: var(--h3); }
.steps__pics { display: none; }
@media (min-width: 1000px) {
  .steps { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .steps__row { display: grid; gap: 0; overflow: visible; margin: 0; padding: 0; }
  .step { min-height: 70vh; align-content: center; gap: 18px; padding-block: 40px; opacity: .3; transition: opacity .4s ease; }
  .step.is-on { opacity: 1; }
  .step__img { display: none; }
  .step h3 { font-size: var(--h2); }
  .steps__pics { display: grid; position: sticky; top: calc(var(--top-h) + 40px); aspect-ratio: 1 / 1; border-radius: var(--r-block); overflow: hidden; background: var(--c-white); }
  .steps__pics img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform .8s ease; }
  .steps__pics img.is-on { opacity: 1; transform: none; }
}

/* FAQ */
.faq { display: grid; gap: 32px; }
.faq__list { max-width: 860px; width: 100%; margin-inline: auto; background: var(--c-white); border-radius: var(--r-block); padding: 8px 24px; }
.faq__list .acc:first-of-type { border-top: 0; }
.faq__list .acc:last-of-type { border-bottom: 0; }
@media (min-width: 700px) { .faq__list { padding: 12px 40px; } }

/* contact */
.contact-box { max-width: 860px; margin-inline: auto; display: grid; gap: 20px; }
.contact-form { display: grid; gap: 16px; }
.contact-form__row { display: grid; gap: 16px; }
@media (min-width: 700px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
.contact-form .btn { justify-self: start; }

/* plain pages (about, policies) */
.page { padding-block: 48px var(--sec-y); }
.page__title { text-align: center; margin-bottom: 32px; }
@media (min-width: 700px) { .page { padding-block: 72px var(--sec-y); } .page__title { margin-bottom: 48px; } }

/* cart */
.cart { padding-block: 40px var(--sec-y); }
.cart__head { display: grid; gap: 20px; justify-items: center; text-align: center; margin-bottom: 40px; }
.shipbar { width: min(100%, 420px); display: grid; gap: 10px; font-size: 14px; }
.shipbar__track { height: 6px; border-radius: 3px; background: var(--c-line); overflow: hidden; }
.shipbar__fill { height: 100%; width: calc(var(--p, 0) * 100%); background: var(--c-blue); border-radius: 3px; transition: width .4s ease; }
.cart__grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .cart__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; } }
.lines { list-style: none; padding: 0; display: grid; }
.lines__head { display: none; }
@media (min-width: 700px) { .lines__head { display: grid; grid-template-columns: 1fr 140px 110px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .lines__head span:last-child { text-align: right; } }
.line { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--c-line); }
.line__img { width: 88px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--c-white); }
.line__img img { width: 100%; height: 100%; object-fit: cover; }
.line__info { display: grid; gap: 4px; align-content: start; }
.line__name { font-weight: 700; color: var(--c-ink); text-decoration: none; }
.line__ctl { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.line__total { color: var(--c-ink); }
@media (min-width: 700px) {
  .line { grid-template-columns: 88px 1fr 140px 110px; align-items: center; }
  .line__ctl { margin: 0; justify-content: center; flex-direction: column; gap: 6px; }
  .line__total { text-align: right; }
}
.qty { display: inline-flex; align-items: center; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.qty button { width: 36px; height: 36px; border: 0; background: none; font-size: 18px; color: var(--c-ink); }
.qty button:disabled { opacity: .35; cursor: default; }
.qty span { min-width: 24px; text-align: center; color: var(--c-ink); }
.remove { background: none; border: 0; padding: 0; font-size: 13px; text-decoration: underline; color: var(--c-text); }
.recap { background: var(--c-white); border-radius: var(--r-block); padding: 28px; display: grid; gap: 16px; }
.recap__row { display: flex; justify-content: space-between; gap: 16px; }
.recap__total { font: 700 20px/1.3 var(--f-body); color: var(--c-ink); }
.upsell { margin-top: 32px; display: grid; gap: 12px; }
.upsell__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 8px 12px 8px 8px; background: var(--c-white); border-radius: 12px; }
.upsell__item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.empty { display: grid; justify-items: center; gap: 20px; text-align: center; padding-block: 72px var(--sec-y); }
.empty__icon { position: relative; color: var(--c-ink); }
.empty__icon .bubble { top: -6px; right: -10px; }
.cart-error { color: var(--c-error); }

/* checkout + thank you (markup from assets/checkout.js and thank-you.js) */
.co { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: 32px 0 64px; max-width: 1100px; margin-inline: auto; }
.co h1 { margin-bottom: 16px; font-size: var(--h2); }
.co h2 { font: 700 20px/1.3 var(--f-body); margin: 24px 0 12px; color: var(--c-ink); letter-spacing: 0; }
.fld { display: grid; gap: 4px; margin-bottom: 12px; font-size: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
@media (max-width: 576px) { .row2, .row3 { grid-template-columns: 1fr; gap: 0; } }
.co-secure { font-size: 14px; margin: 0 0 12px; }
.co-pay { min-height: 120px; margin-bottom: 12px; }
.co-branding { margin: 12px 0; }
.co-terms { font-size: 13px; background: var(--c-white); border-radius: 12px; padding: 10px 12px; }
.co-err { color: var(--c-error); min-height: 1.4em; font-size: 14px; }
.co-sum { background: var(--c-white); border-radius: var(--r-block); padding: 24px; align-self: start; position: sticky; top: calc(var(--top-h) + 16px); }
.co-items { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.co-items li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; color: var(--c-ink); }
.co-items img { border-radius: 10px; }
.co-tot { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; border-top: 1px solid var(--c-line); padding-top: 16px; }
.co-tot dd { margin: 0; text-align: right; }
.co-tot .big { font-weight: 700; color: var(--c-ink); font-size: 18px; }
@media (max-width: 900px) { .co { grid-template-columns: 1fr; gap: 24px; } .co-sum { order: -1; position: static; } }
.ty { max-width: 720px; margin-inline: auto; padding: 48px 0 64px; display: grid; gap: 16px; }

/* 404 */
.notfound { display: grid; justify-items: center; gap: 16px; text-align: center; padding-block: 96px; }
.notfound__code { font: 400 120px/1 var(--f-head); color: var(--c-ink); letter-spacing: -0.04em; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Printer buy box v2 (.se Kaching layout, claims-safe): Early Black Friday ribbon, pick cards with perks, reviews */
.ebf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border-radius: 12px; background: #111827; color: #fff; font: 600 14px/1.35 var(--f-body); margin-bottom: 12px; }
.ebf__tag { background: #f5c400; color: #111827; border-radius: 999px; padding: 3px 10px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.pick { display: block; border-radius: 16px; background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--c-line-strong); cursor: pointer; overflow: hidden; transition: box-shadow .2s ease; }
.pick:hover { box-shadow: inset 0 0 0 1.5px var(--c-ink); }
input:checked + .pick { box-shadow: inset 0 0 0 2px var(--c-blue); }
input:focus-visible + .pick { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.pick__row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; }
.pick__radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-line-strong); display: grid; place-items: center; }
input:checked + .pick .pick__radio { box-shadow: inset 0 0 0 2px var(--c-blue); }
input:checked + .pick .pick__radio::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c-blue); }
.pick__img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--c-bg); }
.pick__name { display: block; font: 700 16px/1.3 var(--f-body); color: var(--c-ink); }
.pick__desc { display: block; font: 400 13px/1.4 var(--f-body); color: var(--c-text); margin-top: 2px; }
.pick__price { font: 700 17px/1.2 var(--f-body); color: var(--c-ink); text-align: right; white-space: nowrap; }
.pick__price small { display: block; font-weight: 400; font-size: 12px; color: var(--c-text); }
.pick__perks { display: none; list-style: none; margin: 0; padding: 0; }
input:checked + .pick .pick__perks { display: grid; }
.perk { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--c-blue); color: #fff; font: 600 14px/1.35 var(--f-body); border-top: 1px solid rgba(255,255,255,.18); }
.perk svg { flex: none; color: #fff; }
.perk img { flex: none; width: 28px; height: 28px; border-radius: 6px; background: #fff; object-fit: cover; }
.perk--gift b { color: #f5c400; letter-spacing: .02em; }
.pick__terms { display: none; margin: 0; padding: 8px 16px 12px; font-size: 12px; color: var(--c-text); }
input:checked + .pick .pick__terms { display: block; }
.info__note--live { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.info__note--live .dot { width: 10px; height: 10px; border-radius: 50%; background: #1fb85a; box-shadow: 0 0 0 4px rgba(31,184,90,.2); flex: none; }
.snip { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--c-bg); font-size: 14px; }
.snip blockquote { margin: 0 0 6px; font-weight: 600; color: var(--c-ink); }
.snip figcaption { color: var(--c-text); font-size: 12px; }
.revs { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.revs::-webkit-scrollbar { display: none; }
.rev { scroll-snap-align: start; }
.rev { margin: 0; padding: 18px; border-radius: 16px; background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-line-strong); display: grid; gap: 12px; align-content: space-between; }
.rev blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-ink); }
.rev figcaption { display: grid; gap: 2px; font-size: 12px; color: var(--c-text); }
.rev figcaption b { font-size: 14px; color: var(--c-ink); }
@media (max-width: 420px) { .pick__row { grid-template-columns: auto auto 1fr; } .pick__price { grid-column: 3; text-align: left; } }

/* .se look v3: UGC videos, rich text, video media blocks, review slider arrows, slide cart */
.split__media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #f2f2f2; }
.ugc { display: grid; grid-auto-flow: column; grid-auto-columns: min(62%, 260px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.ugc::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .ugc { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; } }
.ugc__item { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: var(--r-block); overflow: hidden; background: #e9e9e4; scroll-snap-align: start; }
.ugc__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ugc__sound { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ugc__sound[aria-pressed="true"] { background: var(--c-blue); }
.rich { display: grid; gap: 10px; justify-items: center; }
.rich__text { font-size: 18px; color: var(--c-text); max-width: 560px; }
.sec__head--row { display: flex; justify-content: space-between; align-items: end; gap: 16px; text-align: left; }
.rail__nav { display: flex; gap: 8px; flex: none; }
.rail__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: var(--c-white); display: grid; place-items: center; cursor: pointer; color: var(--c-ink); }
.cdrawer { position: fixed; inset: 0; z-index: 70; }
.cdrawer[hidden] { display: none; }
.cdrawer__shade { position: absolute; inset: 0; background: rgb(0 0 0 / .4); opacity: 0; transition: opacity .25s ease; }
.cdrawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 440px); background: var(--c-bg); display: grid; grid-template-rows: auto 1fr; transform: translateX(100%); transition: transform .25s ease; box-shadow: -8px 0 32px rgb(0 0 0 / .12); }
.cdrawer.is-open .cdrawer__shade { opacity: 1; }
.cdrawer.is-open .cdrawer__panel { transform: none; }
.cdrawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--c-line); }
.cdrawer__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: none; display: grid; place-items: center; cursor: pointer; }
.cdrawer__body { overflow-y: auto; padding: 16px 20px 24px; }
.dcart { display: grid; gap: 16px; }
.dcart .shipbar { width: 100%; }
.lines--drawer { list-style: none; margin: 0; padding: 0; }
.lines--drawer .line { grid-template-columns: 72px 1fr auto; align-items: start; gap: 12px; padding-block: 14px; }
.lines--drawer .line__img { width: 72px; height: 72px; }
.lines--drawer .line__ctl { grid-column: 2; margin-top: 4px; flex-direction: row; justify-content: flex-start; }
.lines--drawer .line__total { grid-column: 3; grid-row: 1; text-align: right; }
.line--gift .line__name { color: var(--c-ink); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #111827; color: #f5c400; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.recap--drawer { padding: 20px; gap: 12px; }
.recap--drawer a.t-small { display: block; color: var(--c-text); }
.empty--drawer { padding-block: 48px; }
html.is-locked { overflow: hidden; }

/* guide delivery */
.ty-guide { display: flex; gap: 20px; align-items: center; margin: 24px 0; padding: 16px; border: 1px solid #e5e7eb; border-radius: 12px; }
.ty-guide[hidden] { display: none; }
.ty-guide img { width: 120px; height: auto; border-radius: 8px; flex: none; }
.ty-guide h2 { margin: 0 0 4px; }
.ty-guide p { margin: 0 0 12px; }
@media (max-width: 600px) { .ty-guide { flex-direction: column; text-align: center; } }

/* buy box v4: Early Black Friday deal card (David 2026-11-11 «Gör offer boxen snyggare») */
.deal { border-radius: 20px; background: var(--c-white); box-shadow: 0 0 0 1px var(--c-line), 0 10px 30px rgba(17,24,39,.08); overflow: hidden; margin-bottom: 16px; }
.deal__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; background: #111827; color: #fff; font: 700 14px/1.3 var(--f-body); }
.deal__tag { background: #f5c400; color: #111827; border-radius: 999px; padding: 4px 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.deal__body { display: grid; gap: 10px; padding: 14px; }
.deal .offer { gap: 10px; }
.deal .pick { border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
.deal input:checked + .pick { box-shadow: inset 0 0 0 2px var(--c-blue); background: #f5f8ff; }
.deal .pick__row { grid-template-columns: auto auto 1fr auto; gap: 12px; padding: 12px 14px; }
.deal .pick__img { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: #f4f5f7; }
.deal .pick__txt { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.deal .pick__name { font: 700 15px/1.3 var(--f-body); color: var(--c-ink); }
.deal .pick__desc { font: 400 13px/1.4 var(--f-body); color: var(--c-text); }
.deal .pick__price { font: 800 18px/1.2 var(--f-body); color: var(--c-ink); white-space: nowrap; }
.pick__badge { display: inline-block; background: #e8eeff; color: var(--c-blue); border-radius: 999px; padding: 3px 8px; font: 700 11px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.deal .pick__perks:empty { display: none; }
.gifts { background: #fffbea; border: 1.5px dashed #f5c400; border-radius: 14px; padding: 12px 14px; }
.gifts__head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 14px/1.3 var(--f-body); color: var(--c-ink); }
.gifts__head svg { width: 18px; height: 18px; flex: none; }
.gifts__list { list-style: none; margin: 0; padding: 0; }
.gift { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(17,24,39,.08); }
.gift:first-child { border-top: 0; }
.gift img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #fff; }
.gift__icon { width: 40px; height: 40px; border-radius: 8px; background: #fff; display: grid; place-items: center; color: var(--c-ink); }
.gift__icon svg { width: 22px; height: 22px; }
.gift__name { font: 600 14px/1.35 var(--f-body); color: var(--c-ink); }
.gift__free { background: #16a34a; color: #fff; border-radius: 999px; padding: 4px 10px; font: 800 12px/1 var(--f-body); letter-spacing: .04em; }
@media (max-width: 420px) { .deal .pick__row { grid-template-columns: auto auto 1fr auto; gap: 10px; padding: 12px; } .deal .pick__img { width: 48px; height: 48px; } }
.deal .pick__price { grid-column: auto; text-align: right; }
.gift img.gift__doc { object-fit: contain; object-position: top; box-shadow: 0 0 0 1px var(--c-line); padding: 2px; }

/* Roll Club row in the deal card */
.pick__badge--club { background: #f1eaff; color: var(--c-purple, #6d28d9); }
.deal .pick__price small { display: block; font: 500 11px/1.2 var(--f-body); color: var(--c-text); text-align: right; margin-top: 2px; }
.pick__club { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px 48px; }
.club-chip { display: inline-flex; align-items: center; gap: 6px; background: #f5f0ff; color: #4c1d95; border-radius: 999px; padding: 5px 10px; font: 600 12px/1.2 var(--f-body); }
.club-chip svg { width: 14px; height: 14px; flex: none; }
.deal .pick__terms { padding: 0 14px 12px 48px; font-size: 12px; }
.deal input:checked + .pick--sub { box-shadow: inset 0 0 0 2px var(--c-purple, #6d28d9); background: #faf7ff; }
.deal input:checked + .pick--sub .pick__radio { box-shadow: inset 0 0 0 2px var(--c-purple, #6d28d9); }
.deal input:checked + .pick--sub .pick__radio::after { background: var(--c-purple, #6d28d9); }
@media (max-width: 420px) { .pick__club, .deal .pick__terms { padding-left: 12px; } }
/* checkout: free gift lines */
.co-gift .co-free { display: inline-block; background: #16a34a; color: #fff; border-radius: 999px; padding: 4px 10px; font: 800 12px/1 var(--f-body); letter-spacing: .04em; }
.co-gift img { object-fit: contain; background: #fff; border-radius: 8px; }
/* Roll Club on the roll pages: same card look as the printer deal card */
.club { gap: 0; border-radius: 20px; background: var(--c-white); box-shadow: 0 0 0 1px var(--c-line), 0 10px 30px rgba(17,24,39,.08); overflow: hidden; }
.club__heading { margin: 0; padding: 12px 16px; background: #2e1065; color: #fff; font: 700 14px/1.3 var(--f-body); display: flex; align-items: center; gap: 8px; }
.club__heading::before { content: 'Subscribe & refill'; background: #f5c400; color: #111827; border-radius: 999px; padding: 4px 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.club__modes { padding: 14px 14px 0; }
.club__mode { border-radius: 999px; min-height: 42px; }
input:checked + .club__mode { background: var(--c-purple); color: #fff; box-shadow: none; }
.club__tiers { padding: 10px 14px 0; gap: 10px; }
.club__tier { grid-template-columns: 22px 1fr auto; gap: 2px 12px; align-items: center; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); padding: 14px; }
.club__tier::before { content: ''; grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-line-strong); }
input:checked + .club__tier { box-shadow: inset 0 0 0 2px var(--c-purple); background: #faf7ff; }
input:checked + .club__tier::before { box-shadow: inset 0 0 0 2px var(--c-purple); background: radial-gradient(circle, var(--c-purple) 0 6px, transparent 7px); }
.club__title { grid-column: 2; font-size: 15px; }
.club__price { grid-column: 3; font-size: 18px; font-weight: 800; }
.club__unit { grid-column: 3; grid-row: 2; }
.club__perks { grid-column: 2; grid-row: 2; justify-self: start; background: #f5f0ff; color: #4c1d95; border-radius: 999px; padding: 3px 9px; font: 600 12px/1.3 var(--f-body); }
.club__terms { margin: 0; padding: 12px 14px 0; font-size: 12px; color: var(--c-text); }
.club__foot { padding: 6px 14px 14px; font-size: 12px; color: var(--c-text); }
.club__foot p { margin: 0; }
.club__mode { white-space: nowrap; font-size: 13px; padding-inline: 8px; }

/* Roll choice: buy box row + dialog */
.rollpick { display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #f4f7ff; box-shadow: inset 0 0 0 1px #dbe4ff; }
.rollpick__icon { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--c-blue); }
.rollpick__icon svg { width: 20px; height: 20px; }
.rollpick__txt { display: grid; gap: 2px; font: 400 13px/1.4 var(--f-body); color: var(--c-text); }
.rollpick__txt b { font: 700 14px/1.3 var(--f-body); color: var(--c-ink); }
.rollpick__txt [data-rollpick-current] { font-weight: 700; color: var(--c-ink); }
.rollpick__btn { grid-column: 2; justify-self: start; border: 0; background: var(--c-blue); color: #fff; border-radius: 999px; padding: 8px 14px; font: 700 13px/1 var(--f-body); cursor: pointer; }
.rolls-dlg { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 20px; padding: 0; box-shadow: 0 24px 60px rgba(17,24,39,.3); }
.rolls-dlg::backdrop { background: rgba(17,24,39,.55); }
.rolls-dlg__in { display: grid; gap: 12px; padding: 18px; }
.rolls-dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rolls-dlg__head h2 { margin: 0; }
.rolls-dlg__x { border: 0; background: #f2f3f5; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.rolls-dlg__lead { margin: 0; font-size: 14px; color: var(--c-text); }
.rolls-dlg__list { display: grid; gap: 8px; }
.rollopt { display: grid; grid-template-columns: 56px 1fr 22px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); cursor: pointer; background: #fff; }
.rollopt img { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: #f4f5f7; }
.rollopt__txt { display: grid; gap: 2px; }
.rollopt__name { font: 700 15px/1.3 var(--f-body); color: var(--c-ink); }
.rollopt__note { font: 400 13px/1.4 var(--f-body); color: var(--c-text); }
.rollopt__dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-line-strong); }
input:checked + .rollopt { box-shadow: inset 0 0 0 2px var(--c-blue); background: #f5f8ff; }
input:checked + .rollopt .rollopt__dot { box-shadow: inset 0 0 0 2px var(--c-blue); background: radial-gradient(circle, var(--c-blue) 0 6px, transparent 7px); }
input:focus-visible + .rollopt { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.rolls-dlg__gift { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #fffbea; border: 1.5px dashed #f5c400; font: 600 13px/1.35 var(--f-body); color: var(--c-ink); }
.rolls-dlg__gift svg { width: 18px; height: 18px; flex: none; }

/* Roll Club hero card (David 2026-11-11 «mest intressant att välja»): first in the list, purple, perks always visible */
.deal .pick--sub { box-shadow: inset 0 0 0 2px #c4b5fd; background: linear-gradient(180deg, #faf7ff 0%, #fff 70%); }
.deal .pick--sub:hover { box-shadow: inset 0 0 0 2px #8b5cf6; }
.deal input:checked + .pick--sub { box-shadow: inset 0 0 0 2.5px #6d28d9; background: linear-gradient(180deg, #f3edff 0%, #faf7ff 100%); }
.pick__ribbon { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: linear-gradient(90deg, #6d28d9, #8b5cf6); color: #fff; font: 700 12px/1.2 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.pick__ribbon svg { width: 15px; height: 15px; flex: none; }
.deal .pick--sub .pick__name { font-size: 16px; }
.deal .pick--sub .pick__price { color: #4c1d95; }
.club-perks { display: grid; gap: 6px; padding: 0 14px 12px 48px; }
.club-perk { display: flex; align-items: flex-start; gap: 8px; font: 400 13px/1.4 var(--f-body); color: var(--c-ink); }
.club-perk b { font-weight: 700; }
.club-perk svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: #6d28d9; }
@media (max-width: 420px) { .club-perks { padding-left: 12px; } }

/* Offer images (exact box contents) — bigger thumbnails so the rolls can be counted */
.deal .pick__img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: #e9dcc8; }
@media (max-width: 420px) { .deal .pick__img { width: 64px; height: 64px; } }
/* Footer: 3 boxes as on .se + bottom bar with operator and payment methods */
.perks__item .copy p { margin: 0; line-height: 1.55; }
.perks__item strong { display: block; font-size: 17px; margin-bottom: 6px; }
.foot__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.foot__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.foot__pay span { border: 1px solid rgb(0 0 0 / .14); border-radius: 6px; padding: 4px 10px; font: 600 12px/1.2 var(--f-body); color: rgb(0 0 0 / .7); background: #fff; }
@media (max-width: 699px) {
  .perks { padding-block: 36px; }
  .perks__list { gap: 12px; text-align: left; justify-content: stretch; }
  .perks__item { grid-template-columns: 44px 1fr; justify-items: start; align-items: start; gap: 14px; max-width: none; margin: 0; padding: 16px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06); }
  .perks__item img { width: 44px; height: 44px; }
  .perks__item strong { font-size: 16px; margin-bottom: 2px; }
  .perks__item .copy { font-size: 14px; }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
}

/* Thank-you: one row per free PDF (Label Ideas + Finished Designs) */
.ty-guides { margin: 24px 0; }
.ty-guides[hidden] { display: none; }
.ty-guides > h2 { margin: 0 0 12px; }
.ty-guides .ty-guide { margin: 0 0 12px; }
.ty-guide h3 { margin: 0 0 4px; }

/* Early Black Friday branding (David 2026-11-11 «Fixa mer early black friday branding»): the statics' coral badge,
   dark gift scene and Manrope caps. Shown only while bridge/config/ebf.json is on. */
:root { --c-ebf: #ff5a3c; --c-ebf-dark: #e8462a; --c-ebf-bg: #110809; }
.topbar--ebf { background: var(--c-ebf-bg); color: #fff; }
.topbar--ebf .topbar__in { max-width: 960px; }
.topbar__ebf { color: var(--c-ebf); font-weight: 800; letter-spacing: .08em; }
@media (max-width: 699px) { .topbar__more { display: none; } .topbar--ebf .topbar__msg { font-size: 12px; } }
.ebf-badge { display: inline-block; margin: 0; background: var(--c-ebf); color: #fff; border-radius: 6px; padding: 6px 12px; font: 800 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.btn--ebf { background: var(--c-ebf); }
.btn--ebf:hover { background: var(--c-ebf-dark); }
.ebfhero { background: var(--c-ebf-bg); color: #f3eeea; }
.ebfhero__in { display: grid; gap: 20px; padding-block: 0 28px; }
.ebfhero__media { display: block; margin-inline: calc(var(--gutter) * -1); }
.ebfhero__media img { display: block; width: 100%; height: auto; }
.ebfhero__txt { display: grid; gap: 14px; justify-items: start; }
.ebfhero__title { margin: 0; color: #fff; font: 800 26px/1.15 var(--f-body); letter-spacing: -.01em; }
.ebfhero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: 600 15px/1.35 var(--f-body); }
.ebfhero__list li { display: flex; gap: 10px; align-items: flex-start; }
.ebfhero__list svg { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--c-ebf); color: #fff; stroke-width: 3; }
@media (min-width: 700px) {
  .ebfhero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding-block: 40px; }
  .ebfhero__media { margin-inline: 0; }
  .ebfhero__media img { border-radius: 16px; }
  .ebfhero__title { font-size: 40px; }
  .ebfhero__list { font-size: 17px; }
}
.ebftiles { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.ebftiles::-webkit-scrollbar { display: none; }
.ebftiles__item { scroll-snap-align: center; display: block; border-radius: 14px; overflow: hidden; }
.ebftiles__item img { display: block; width: 100%; height: auto; }
@media (min-width: 700px) { .ebftiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; padding-inline: 0; overflow: visible; } }
.deal--ebf .deal__top { background: var(--c-ebf-bg); }
.deal--ebf .deal__tag { background: var(--c-ebf); color: #fff; }

/* Reviews v2 (option B, 2026-11-12): grid with «Load more» instead of the slider; optional customer photo */
.revs--grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; align-items: start; }
@media (min-width: 700px) { .revs--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .revs--grid { grid-template-columns: repeat(3, 1fr); } }
.revs--grid .rev[hidden] { display: none; }
.rev__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--c-line-strong); }
.revs__more { display: flex; justify-content: center; margin-top: 20px; }