/* STUDIO BERG – shared styles for all headless pages */
@font-face { font-family: "SB Logo"; src: url("https://static.wixstatic.com/ufonts/971dfb_f25d13dc97624d51ba9e4171785885dd/woff2/file.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SB Text"; src: url("https://static.wixstatic.com/ufonts/4e8d97_656456d5b4c041b0932a1143574ef00b/woff2/file.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SB Sub"; src: url("https://static.wixstatic.com/ufonts/e6c165_0e178bc5c8df459a98633dbb3de393bd/woff2/file.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #F3F5E7; --ink: #33445F; --dark: #121421; --orange: #E35305;
  --gutter: clamp(16px, 4vw, 64px);
  --small: "Wix Madefor Text", system-ui, sans-serif;
  /* layout engine: 1 design px at 1440 (desktop) / 375 (mobile) */
  --u: clamp(.78px, calc(100vw / 1440), 1.2px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "SB Text", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
main { overflow-x: clip; }

/* ---------- burger + menu panel (as on studioberg.de) ---------- */
.burger { position: fixed; top: 69px; right: calc(var(--gutter) + 8px); z-index: 60; width: 46px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 5px; background: var(--orange); transition: background-color .2s; }
.burger:hover span, .burger:focus-visible span { background: var(--ink); }
.menu-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: 216px; padding: 42px 22px 40px 30px; overflow-y: auto; background: rgba(105, 112, 150, .8); backdrop-filter: blur(6px); transform: translateX(100%); transition: transform .4s cubic-bezier(.645, .045, .355, 1); }
.menu-open .menu-overlay { opacity: 1; visibility: visible; }
.menu-open .menu { transform: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu ul + ul { border-top: 1px solid rgba(255, 255, 255, .55); margin-top: 6px; padding-top: 8px; }
.menu li a { display: block; padding: 7px 0; text-decoration: none; color: #fff; font-size: 13.44px; letter-spacing: .05em; line-height: 20px; }
.menu li a.logo { font-family: "SB Logo", "SB Text", sans-serif; }
.menu li a.it { font-style: italic; }
.menu li a:hover, .menu li a[aria-current] { color: var(--orange); }
.menu-close { position: absolute; top: 40px; right: 40px; width: 20px; height: 20px; border: 0; padding: 0; background: none; cursor: pointer; }
.menu-close::before, .menu-close::after { content: ""; position: absolute; left: -2px; right: -2px; top: 9px; height: 2px; background: var(--dark); transform: rotate(45deg); }
.menu-close::after { transform: rotate(-45deg); }
body.menu-open { overflow: hidden; }

/* ---------- header ---------- */
.site-header { position: relative; padding: 22px 0 28px; margin-bottom: 24px; text-align: center; }
.wordmark { display: inline-block; text-decoration: none; color: var(--orange); font-family: "SB Logo", "SB Text", sans-serif; font-weight: 400; font-size: 5.47vw; line-height: 1.4; letter-spacing: .4em; padding-left: .4em; white-space: nowrap; }
.crumbs { margin: 0; font-family: var(--small); font-size: 16px; text-transform: uppercase; }
.site-header .crumbs { position: absolute; left: 77px; bottom: 4px; font-size: 14px; }
.crumbs a { text-decoration: none; } .crumbs .cur { text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { padding: 0 8px; }

/* ---------- page layout engine (sections + positioned components, measured at 1440 / 375) ---------- */
.s { position: relative; width: 100%; height: calc(var(--h) * 100vw / 1440); background: var(--sbg, transparent); }
.s > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c { position: absolute; left: calc(var(--x) * 100% / 1440); top: calc(var(--y) * 100vw / 1440); width: calc(var(--w) * 100% / 1440); height: calc(var(--hh) * 100vw / 1440); }
.c > img, .c > video, .c > iframe, .c > svg, .c > a > img, .c > a > svg { width: 100%; height: 100%; display: block; border: 0; }
.c.t { height: auto; min-height: calc(var(--hh) * 100vw / 1440); }
.c.t p, .c.t h1, .c.t h2, .c.t h3, .c.t h4, .c.t h5, .c.t h6 { margin: 0; overflow-wrap: break-word; }
.c.t a { color: inherit; }
.c.box { pointer-events: none; }
.c .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; transition: filter .2s, background-color .2s, color .2s; }
.c .btn:hover { filter: brightness(.92); }
.m-only { display: none; }
@media (max-width: 750px) {
  :root { --u: clamp(.85px, calc(100vw / 375), 1.35px); }
  .s { height: calc(var(--hm) * 100vw / 375); }
  .c { left: calc(var(--mx) * 100% / 375); top: calc(var(--my) * 100vw / 375); width: calc(var(--mw) * 100% / 375); height: calc(var(--mh) * 100vw / 375); }
  .c.t { min-height: calc(var(--mh) * 100vw / 375); }
  .c.nm, .d-only { display: none; }
  .m-only { display: block; }
}

/* slideshow made of stacked images */
.slides > img { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.slides > img.on { opacity: 1; }
.slides .sl-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: #fff; filter: drop-shadow(0 0 5px rgba(0,0,0,.35)); }
.slides .sl-arrow svg { width: 30px; height: 30px; }
.slides .sl-prev { left: 4px; } .slides .sl-next { right: 4px; }

/* ---------- entrance / scroll animations ---------- */
[data-anim] { will-change: transform, opacity; }
.reveal { opacity: 0; transition: transform 1.9s cubic-bezier(.22, .61, .36, 1), opacity 1.6s ease; }
.reveal.from-left { transform: translateX(-45px); } .reveal.from-right { transform: translateX(45px); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-anim], .reveal { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ---------- product grid (as the Wix store gallery) ---------- */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1152px; margin: 0 auto; }
.pcard { display: block; text-decoration: none; color: var(--ink); }
.pcard .ph { position: relative; aspect-ratio: 1; overflow: hidden; background: #e9ecd9; }
.pcard .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.pcard .ph img.alt { opacity: 0; }
.pcard:hover .ph img.alt { opacity: 1; }
.pcard .qv { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.75); font-size: 14px; transform: translateY(100%); transition: transform .4s; }
.pcard:hover .qv { transform: none; }
.pcard .ribbon { position: absolute; top: 0; left: 0; z-index: 1; padding: 0 10px; height: 24px; line-height: 24px; background: var(--orange); color: #fff; font-size: 14px; }
.pcard h3 { font-weight: 400; font-size: 16px; line-height: 26px; margin: 16px 0 4px; }
.pcard .price { font-size: 16px; line-height: 24px; }
.pcard .price s { opacity: .6; margin-right: 8px; }
@media (max-width: 1000px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 750px) { .pgrid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; } .pcard .qv { display: none; } }

/* ---------- footer (as on studioberg.de) ---------- */
.site-footer { margin-top: 140px; background: var(--orange); color: var(--dark); font-size: 14px; line-height: 1.8; }
.site-footer a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer a:hover { text-decoration: none; }
.foot-top { display: grid; grid-template-columns: 573fr 197fr 256fr 264fr 150fr; padding: 40px 0 0; }
.foot-form { grid-column: 1; padding: 0 45px 40px 65px; display: flex; flex-direction: column; }
.foot-col:nth-of-type(2) { grid-column: 3; } .foot-col:nth-of-type(3) { grid-column: 4; padding-right: 24px; } .foot-col:nth-of-type(4) { grid-column: 5; }
.foot-col h3 { font-family: "SB Text", sans-serif; font-weight: 400; font-size: 24px; line-height: 36px; margin: 0 0 12px; }
.foot-col p { margin: 0 0 1.8em; } .foot-col ul { list-style: none; margin: 0; padding: 0; }
#contact { scroll-margin-top: 40px; }
#contact h2 { font-family: "Monoton", cursive; font-weight: 400; font-size: 24px; line-height: 36px; margin: 0 0 12px; word-spacing: .45em; }
.wform label { display: block; margin: 0 0 12px; }
.wform input, .wform textarea, .wform select { display: block; width: 100%; margin-top: 6px; padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font: 16px "SB Text", sans-serif; border-radius: 0; resize: vertical; }
.wform input[type=checkbox] { display: inline-block; width: auto; margin: 0 8px 0 0; }
.wform input:focus, .wform textarea:focus { outline: none; border-bottom-width: 2px; }
.wform button { display: block; margin: 8px 0 0 auto; width: 228px; max-width: 100%; height: 41px; border: 1px solid currentColor; border-radius: 100px; background: transparent; color: inherit; font: 14px "SB Text", sans-serif; cursor: pointer; }
.wform button:hover { background: var(--dark); color: var(--orange); }
.wform button:disabled { opacity: .5; cursor: default; }
.form-msg { min-height: 1.8em; margin: 10px 0 0; }
.foot-form .crumbs { margin: auto 0 0; padding-top: 60px; font-size: 14px; }
.site-footer .crumbs a { text-decoration: none; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; border-top: .5px solid var(--dark); padding: 12px 0 14px 19px; }
.pay { display: flex; align-items: center; gap: 25px; } .pay .logos { display: flex; gap: 17px; } .pay img { height: 26px; width: auto; max-width: 44px; }
.copy-line { margin: 0; width: calc(414 / 1440 * 100%); padding-left: 31px; font-size: 15.75px; }

/* ---------- simple content pages (shop, cart, product, blog) ---------- */
.wrap { max-width: 1152px; margin: 0 auto; padding: 0 var(--gutter); }
.page-title { font-family: "Monoton", cursive; font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.2; margin: 40px 0 48px; word-spacing: .3em; }
.cats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -20px 0 40px; font-family: var(--small); font-size: 14px; text-transform: uppercase; }
.cats a { text-decoration: none; } .cats a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.status { font-family: var(--small); font-size: 14px; }
.btn-main { display: inline-flex; align-items: center; justify-content: center; min-width: 228px; height: 46px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 100px; background: var(--ink); color: #fff; font: 15px "SB Text", sans-serif; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn-main:hover { background: transparent; color: var(--ink); }
.btn-main:disabled { opacity: .5; cursor: default; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }

/* ---------- mobile ---------- */
@media (max-width: 750px) {
  .burger { top: 28px; right: 18px; width: 36px; height: 28px; }
  .burger span { height: 4px; }
  .menu { width: min(300px, 80vw); }
  .site-header { padding: 14px 0 34px; margin-bottom: 16px; }
  .site-header .crumbs { left: 18px; font-size: 12px; }
  .foot-top { display: block; padding-top: 39px; }
  .foot-form { padding: 0 32px 40px 49px; }
  .foot-form .crumbs { display: none; }
  .wform button { width: 100%; margin-left: 0; }
  .foot-col { padding: 0 15px 60px; }
  .foot-col p { margin-bottom: 1.4em; }
  .foot-bottom { display: block; padding: 0 19px 12px; border-top: 0; }
  .pay { display: block; } .pay .logos { margin-top: 6px; gap: 7px; flex-wrap: wrap; } .pay img { height: 24px; }
  .copy-line { width: auto; padding: 18px 0 0; font-size: 14px; }
}

/* ---------- custom cursors (images follow the mouse) ---------- */
.cursor-img { position: fixed; left: 0; top: 0; z-index: 2147483647; pointer-events: none; display: none; will-change: transform; }
.has-cursor, .has-cursor * { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select, .has-cursor label { cursor: auto; }
.has-cursor a, .has-cursor button, .has-cursor .candy { cursor: pointer; }

/* ---------- blog cards + posts ---------- */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
.post-card { display: block; text-decoration: none; color: var(--ink); }
.post-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 14px; transition: opacity .3s; }
.post-card:hover img { opacity: .85; }
.post-card h3 { font-family: "SB Sub", "SB Text", sans-serif; font-weight: 400; font-size: 24px; line-height: 1.25; margin: 6px 0 10px; }
.post-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.pc-date { font-family: var(--small); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.post { max-width: 820px; }
.post h1 { font-family: "SB Sub", "SB Text", sans-serif; font-weight: 400; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; margin: 8px 0 32px; }
.post-hero { width: 100%; margin: 0 0 36px; }
.post-body { font-size: 17px; line-height: 1.7; }
.post-body h2, .post-body h3 { font-family: "SB Sub", "SB Text", sans-serif; font-weight: 400; line-height: 1.25; margin: 1.6em 0 .6em; }
.post-body figure { margin: 2em 0; } .post-body figure img { width: 100%; }
.post-body figcaption { font-family: var(--small); font-size: 12px; margin-top: 6px; text-align: right; }
.rc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 2em 0; }
.rc-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; display:block; }
.rc-gallery { grid-template-columns: repeat(3, 1fr); }
.rc-gallery.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width:600px){ .rc-gallery { grid-template-columns: repeat(2, 1fr); } }
.post-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rc-video { position: relative; aspect-ratio: 16 / 9; margin: 2em 0; } .rc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-back { margin-top: 48px; font-family: var(--small); }

/* ---------- product page ---------- */
.product { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; margin-top: 24px; }
.p-gallery { position: relative; }
.p-gallery > img { display: none; width: 100%; aspect-ratio: 1; object-fit: cover; background: #e9ecd9; }
.p-gallery > img.on { display: block; }
.p-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.p-thumbs button { width: 72px; height: 72px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .75; }
.p-thumbs button:hover { opacity: 1; } .p-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.p-info h1 { font-family: "SB Sub", "SB Text", sans-serif; font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; margin: 0 0 12px; }
.p-price { font-size: 20px; margin-bottom: 20px; } .p-price s { opacity: .6; margin-right: 8px; }
.p-ribbon { display: inline-block; margin: 0 0 16px; padding: 0 10px; background: var(--orange); color: #fff; font-size: 14px; line-height: 24px; }
.p-desc { font-size: 15px; line-height: 1.7; margin-bottom: 24px; } .p-desc p { margin: 0 0 1em; }
.p-buy .opt { display: block; margin-bottom: 16px; font-size: 14px; }
.p-buy select, .p-buy input { display: block; width: 100%; max-width: 320px; margin-top: 6px; padding: 10px 12px; border: 1px solid rgba(51,68,95,.4); background: transparent; color: var(--ink); font: 15px "SB Text", sans-serif; border-radius: 0; }
.p-buy input[name=qty] { max-width: 110px; }
.p-buy .btn-main { width: 100%; max-width: 320px; margin-top: 6px; }
.pinfo { border-top: 1px solid rgba(51,68,95,.25); padding: 14px 0; } .pinfo:last-of-type { border-bottom: 1px solid rgba(51,68,95,.25); }
.pinfo summary { cursor: pointer; font-size: 15px; letter-spacing: .04em; list-style: none; display: flex; justify-content: space-between; }
.pinfo summary::after { content: "+"; } .pinfo[open] summary::after { content: "–"; }
.pinfo > div { padding-top: 10px; font-size: 14px; line-height: 1.7; } .pinfo p { margin: 0 0 .8em; }

/* ---------- cart ---------- */
.cart-lines { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid rgba(51,68,95,.25); }
.cart-lines li { display: grid; grid-template-columns: 110px 1fr auto 32px; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(51,68,95,.25); transition: opacity .2s; }
.cart-lines img { width: 110px; height: 110px; object-fit: cover; background: #e9ecd9; }
.cl-name { font-size: 17px; text-decoration: none; } .cl-desc { font-size: 13px; opacity: .8; margin: 4px 0; } .cl-price { font-size: 15px; }
.cl-qty { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(51,68,95,.4); padding: 4px 10px; }
.cl-qty button, .cl-remove { border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--ink); padding: 0 4px; }
.cart-sum { max-width: 360px; margin-left: auto; }
.cart-sum p { display: flex; justify-content: space-between; font-size: 18px; margin: 0 0 8px; }
.cart-sum .cart-note { font-size: 13px; opacity: .8; display: block; margin-bottom: 20px; }
.cart-sum .btn-main { width: 100%; }
.wform .chk { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
@media (max-width: 750px) {
  .post-grid { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; gap: 28px; }
  .cart-lines li { grid-template-columns: 80px 1fr 28px; } .cart-lines img { width: 80px; height: 80px; }
  .cl-qty { grid-column: 2; justify-self: start; }
}
/* ---------- text marquee ---------- */
.c.mq { overflow: hidden; display: flex; align-items: center; }
.mq-track { display: flex; white-space: nowrap; animation: mq 60s linear infinite; }
.mq-u { display: inline-flex; align-items: center; gap: .45em; padding-right: .45em; }
.mq-sep { display: inline-block; aspect-ratio: 1; } .mq-sep svg { width: 100%; height: 100%; display: block; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }
/* sections that grow with a live widget (blog feed, product grid) */
.s.grow { height: auto; }
.s.grow > .part { position: relative; height: calc(var(--ph) * 100vw / 1440); }
.c.flow { position: relative; left: auto; top: auto; margin-left: calc(var(--x) * 100% / 1440); height: auto; }
@media (max-width: 750px) { .s.grow > .part { height: calc(var(--mph) * 100vw / 375); } .c.flow { left: auto; top: auto; margin-left: calc(var(--mx) * 100% / 375); } }
/* rotated components */
.c > .rot { width: 100%; height: 100%; transform: rotate(var(--rot, 0deg)); }
.c > .rot > img, .c > .rot > svg, .c > .rot > a > img, .c > .rot > a > svg { width: 100%; height: 100%; display: block; }
@media (max-width: 750px) { .c > .rot { transform: rotate(var(--mrot, var(--rot, 0deg))); } }
/* single-word text: never wrap */
.c.nw,.c.nw *{white-space:nowrap}

/* contact form field order: Email, Name, Message */
.wform { display: flex; flex-direction: column; }
.wform > label:has([name=email]) { order: 1; }
.wform > label:has([name=name]) { order: 2; }
.wform > label:has([name=long_answer]) { order: 3; }
.wform > label.chk { order: 4; }
.wform > button, .wform > .form-msg { order: 5; }

/* logo font: only the R takes the open-bowl alternate (ss18), N and the rest stay normal */
.r18 { font-feature-settings: "ss18"; }

/* Monoton titles drawn as SVG text: hang the text from the top edge (as on studioberg.de) */
.c svg text { dominant-baseline: text-before-edge; }
.c svg:has(text) { overflow: visible; }

/* burger: top edge level with the HOME / … breadcrumb on pages that have the header */
body:has(.site-header) .burger { top: calc(5.47vw * 1.4 + 28px); }

/* ---------- shop category pages (as on studioberg.de) ---------- */
.cat-hero { margin: 30px 0 0; position: relative; }
.cat-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cat-hero figcaption { font-family: var(--small); font-size: 11px; text-align: right; padding: 6px var(--gutter) 0; }
.cat-head { text-align: center; padding: 36px var(--gutter) 10px; max-width: 900px; margin: 0 auto; }
.cat-title { font-family: "Monoton", cursive; font-weight: 400; font-size: clamp(40px, 8.4vw, 120px); line-height: 1.15; margin: 0 0 26px; word-spacing: .3em; }
.cat-desc { font-family: "SB Logo", "SB Text", sans-serif; font-size: 16px; line-height: 1.6; max-width: 580px; margin: 0 auto 12px; }
.cat-more a { text-decoration: underline; text-underline-offset: 3px; }
.cat-body { display: grid; grid-template-columns: 200px 1fr; gap: 40px; max-width: 1240px; margin: 50px auto 0; padding: 0 var(--gutter); }
.cat-side h2 { font-family: "SB Text", sans-serif; font-weight: 400; font-size: 24px; line-height: 1.4; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(51,68,95,.3); }
.cat-side ul { list-style: none; margin: 0; padding: 0; }
.cat-side li a { display: block; padding: 6px 0; text-decoration: none; font-size: 15px; }
.cat-side li a:hover, .cat-side li a[aria-current] { color: var(--orange); }
.cat-bar { display: flex; justify-content: flex-end; margin: 0 0 20px; font-size: 14px; }
.cat-bar select { margin-left: 6px; padding: 8px 10px; border: 1px solid rgba(51,68,95,.4); background: transparent; color: var(--ink); font: 14px "SB Text", sans-serif; }
.cat-grid { max-width: none; margin: 0; }
.pc-oos { font-size: 14px; opacity: .7; margin-top: 2px; }
@media (max-width: 900px) { .cat-body { grid-template-columns: 1fr; gap: 0; } .cat-side h2 { display: none; } .cat-side ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 16px; } .cat-side li a { font-size: 14px; text-transform: uppercase; } }
@media (max-width: 750px) { .cat-hero img { aspect-ratio: 4 / 3; } .cat-head { padding-top: 26px; } .cat-desc { font-size: 15px; } }

.cat-wrap { margin-top: 44px; } .cat-wrap .cats { margin: 0 0 32px; justify-content: center; } .cat-hero figcaption a { text-decoration: underline; text-underline-offset: 2px; }

.cat-more, .cat-more a { color: var(--orange); }

.cat-title { white-space: nowrap; }

/* VAT note under prices */
.p-vat, .vat-note { font-family: var(--small); font-size: 13px; line-height: 1.5; margin: 6px 0 14px; opacity: .85; }
.vat-note { text-align: center; margin: 28px var(--gutter) 8px; }
.p-vat a, .vat-note a { color: inherit; }
.vat-switch { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cart-note .vat-switch { margin-left: 4px; }

/* language switch + hint */
.menu .lang { display: flex; gap: 16px; }
.menu .lang a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.lang-hint { position: fixed; left: 16px; bottom: 16px; z-index: 60; margin: 0; padding: 10px 40px 10px 16px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); border-radius: 100px; font: 14px/1.4 var(--small); max-width: calc(100vw - 32px); }
.lang-hint a { color: inherit; margin-left: 6px; }
.lang-hint button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; }

/* menu words a touch larger on desktop */
@media (min-width: 751px) {
  .menu { width: 236px; }
  .menu li a { font-size: 15.5px; line-height: 22px; }
}