/* Bluma site stylesheet (from the v2 prototypes, tasks/redesign/v2/bluma-v2.css, 2026-10-07). Fonts are linked in index.php.
 Loaded after Bootstrap 5.3.3. Sections are BEM-lite: .block, .block__part, .block--variant.
 Later this becomes the site stylesheet (design/css/), see README.md. */

/* 1. Tokens */
:root {
  --paper: #FAF6F1;
  --paper-2: #F3ECE4;
  --surface: #FFFFFF;
  --rose: #E9D6CC;
  --rose-soft: #F4E8E1;
  --ink: #2A2421;
  --ink-2: #5E534D;
  --ink-3: #8A7E77;
  --clay: #B4705A;
  --clay-dark: #965843;
  --sage: #7D8A6A;
  --sage-soft: #E6E9DD;
  --line: #E7DED6;
  --tbd-bg: #FFF1B8;
  --tbd-ink: #6B5300;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 12px;
  --radius-lg: 20px;
  --gutter: 16px;
  --section-y: clamp(64px, 9vw, 120px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Bootstrap overrides */
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-link-color: var(--clay-dark);
  --bs-link-color-rgb: 150, 88, 67;
  --bs-link-hover-color: var(--ink);
  --bs-border-color: var(--line);
}

/* 2. Base */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.12;
  color: var(--ink);
  font-variation-settings: "SOFT" 100, "opsz" 72;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h1 em, h2 em { font-style: italic; color: var(--clay); }
p { margin-bottom: 1rem; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }
.container { --bs-gutter-x: calc(var(--gutter) * 2); max-width: 1200px; }
/* g-5 rows: keep the 3rem vertical gap but never let the row overhang the container padding (sideways scroll on phones) */
.row.g-5 { --bs-gutter-x: calc(var(--gutter) * 2); }
@media (min-width: 992px) { .row.g-5 { --bs-gutter-x: 3rem; } .container { --bs-gutter-x: 3rem; } }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay-dark);
  margin-bottom: .9rem;
}
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--ink-2); font-weight: 400; }
.muted { color: var(--ink-3); }
.small-print { font-size: .85rem; color: var(--ink-3); }

/* Unknown content: visible on screen, greppable in the source */
mark.tbd {
  background: var(--tbd-bg);
  color: var(--tbd-ink);
  padding: 0 .25em;
  border-radius: 4px;
  font-size: .92em;
}

/* Icons (inline SVG sprite) */
.ico { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }
.ico--fill { fill: currentColor; stroke: none; }

/* 3. Buttons, pills, chips */
.btn-b {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-b:active { transform: translateY(1px); }
.btn-b--primary { background: var(--clay); color: #fff; }
.btn-b--primary:hover { background: var(--clay-dark); color: #fff; }
.btn-b--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-b--ghost:hover { background: var(--ink); color: var(--paper); }
.btn-b--light { background: var(--surface); color: var(--ink); }
.btn-b--light:hover { background: var(--rose-soft); color: var(--ink); }
.btn-b--sm { padding: .55rem 1.1rem; font-size: .92rem; }
.btn-b--block { width: 100%; }
.link-arrow { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: .4rem; border-bottom: 1.5px solid var(--clay); padding-bottom: 2px; }
.link-arrow:hover { color: var(--clay-dark); }
.link-arrow .ico { transition: transform .2s var(--ease); }
.link-arrow:hover .ico { transform: translateX(3px); }

.pill-new {
  display: inline-block;
  background: var(--clay); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  padding: .2em .6em; border-radius: 999px;
  vertical-align: middle;
}
.pill-new--sage { background: var(--sage); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-2);
}
.chip .ico { color: var(--sage); }

/* 4. Announcement bar (promo) */
.announce {
  background: var(--ink); color: var(--paper);
  font-size: .9rem; text-align: center;
  padding: .55rem var(--gutter);
}
.announce a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.5); }
.announce a:hover { border-color: #fff; }

/* 5. Header */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(250, 246, 241, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .navbar { padding: .7rem 0; }
.site-header .brand img { width: 128px; height: auto; }
.site-header .nav-link {
  color: var(--ink); font-weight: 500; font-size: .98rem;
  padding: .5rem .85rem !important;
}
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--clay-dark); }
.site-header .dropdown-menu {
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(42, 36, 33, .08);
  padding: .5rem; min-width: 15rem;
}
.site-header .dropdown-item { border-radius: 8px; padding: .55rem .8rem; color: var(--ink); }
.site-header .dropdown-item small { display: block; color: var(--ink-3); font-size: .8rem; }
.site-header .dropdown-item:hover { background: var(--rose-soft); }
.navbar-toggler { border: 0; padding: .4rem; }
.navbar-toggler:focus { box-shadow: none; }
@media (max-width: 991.98px) {
  .site-header .navbar-collapse { padding: .5rem 0 1rem; }
  .site-header .nav-link { padding: .7rem 0 !important; border-bottom: 1px solid var(--line); }
  .site-header .dropdown-menu { box-shadow: none; border: 0; padding: 0 0 .5rem .75rem; background: transparent; }
  .site-header .header-cta { margin-top: 1rem; width: 100%; }
}

/* 6. Sections */
.section { padding: var(--section-y) 0; }
.section--tint { background: var(--paper-2); }
.section--rose { background: var(--rose-soft); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink .lead { color: rgba(250, 246, 241, .78); }
.section-head { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }
.section-head p { margin-bottom: 0; }

/* 7. Hero (split) */
.hero { padding: clamp(40px, 6vw, 88px) 0 var(--section-y); }
.hero h1 { margin-bottom: 1.25rem; }
.hero .lead { max-width: 33rem; margin-bottom: 2rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.hero__collage {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  aspect-ratio: 1 / 1;
}
.hero__collage figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--rose); }
.hero__collage img { width: 100%; height: 100%; object-fit: cover; }
.hero__collage .tall { grid-row: span 2; }
.hero__collage figcaption {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(250, 246, 241, .94); color: var(--ink);
  font-size: .8rem; font-weight: 600;
  padding: .3rem .7rem; border-radius: 999px;
}
@media (max-width: 991.98px) {
  .hero__collage { margin-top: 2.5rem; aspect-ratio: 4 / 3.4; }
}

/* 8. Product cards (range) */
.range-group ~ .range-group { margin-top: 3rem; } /* ~ so a comment/script between groups never breaks it */
.range-group__title {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 1.2rem;
}
.range-group__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.pcard {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ink);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.pcard:hover { transform: translateY(-4px); border-color: var(--rose); color: var(--ink); }
.pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rose-soft); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__badge { position: absolute; top: 12px; left: 12px; }
.pcard__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.pcard__title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; margin-bottom: .3rem; }
.pcard__text { font-size: .95rem; color: var(--ink-2); margin-bottom: 1rem; }
.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.price { font-weight: 600; font-size: 1.02rem; }
.price small { font-weight: 400; color: var(--ink-3); font-size: .82rem; }
.price del { color: var(--ink-3); font-weight: 400; font-size: .88rem; margin-left: .3rem; }
.price--sale { color: var(--clay-dark); }
.pcard__go { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); transition: background .2s; }
.pcard:hover .pcard__go { background: var(--clay); color: #fff; }

.pcard--feature { flex-direction: row; }
.pcard--feature .pcard__media { flex: 1.1; aspect-ratio: auto; min-height: 320px; }
.pcard--feature .pcard__body { flex: 1; padding: 2rem; justify-content: center; }
.pcard--feature .pcard__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
@media (max-width: 767.98px) {
  .pcard--feature { flex-direction: column; }
  .pcard--feature .pcard__media { min-height: 0; aspect-ratio: 4 / 3; }
  .pcard--feature .pcard__body { padding: 1.4rem; }
}

/* 9. Media row (spotlight) */
.media-row__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--rose); }
.media-row__media img { width: 100%; height: 100%; object-fit: cover; }
.media-row__body h2 { margin-bottom: 1rem; }
.media-row__body .lead { margin-bottom: 1.5rem; }
.ticks { list-style: none; padding: 0; margin: 0 0 2rem; }
.ticks li { display: flex; gap: .75rem; padding: .45rem 0; }
.ticks .ico { color: var(--sage); margin-top: .2rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Placeholder visual (product images not shot yet) */
.ph {
  display: grid; place-items: center; text-align: center;
  width: 100%; height: 100%; min-height: 260px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(180, 112, 90, .06) 14px 15px),
    linear-gradient(160deg, var(--rose-soft), var(--rose));
  color: var(--clay-dark);
  font-size: .9rem; font-weight: 600;
  padding: 1.5rem;
}
.ph .ico { width: 42px; height: 42px; margin: 0 auto .6rem; display: block; opacity: .7; }

/* Photo book mock: CSS-only open book so the spotlight has a visual before real photos exist */
.book-mock { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; background: linear-gradient(160deg, var(--rose-soft), var(--rose)); }
.book-mock__spread {
  width: 78%; aspect-ratio: 2 / 1.05;
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 30px 50px -20px rgba(42, 36, 33, .35);
  transform: perspective(1400px) rotateX(18deg);
  overflow: hidden;
}
.book-mock__page { padding: 8%; display: grid; gap: 6%; }
.book-mock__page:first-child { border-right: 1px solid #eee; background: linear-gradient(90deg, #fff 85%, #f1ebe6); }
.book-mock__page:last-child { grid-template-columns: 1fr 1fr; background: linear-gradient(270deg, #fff 85%, #f1ebe6); }
.book-mock__page img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.book-mock__label { position: absolute; bottom: 14px; left: 14px; }

/* 10. AR / live preview spotlight */
.phone {
  position: relative;
  width: min(300px, 78%); aspect-ratio: 9 / 18.5;
  margin: 0 auto;
  border-radius: 38px; padding: 10px;
  background: var(--ink);
  box-shadow: 0 40px 60px -30px rgba(42, 36, 33, .5);
}
.phone__screen { position: relative; height: 100%; border-radius: 29px; overflow: hidden; background: #ddd; }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }
.phone__ui {
  position: absolute; left: 10px; right: 10px; bottom: 12px;
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.phone__ui span {
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: .7rem; font-weight: 600; padding: .3rem .6rem; border-radius: 999px;
}
.phone__ui span.on { background: var(--clay); color: #fff; }
.ar-stage { position: relative; padding: 2rem 0; }
.ar-stage::before {
  content: ""; position: absolute; inset: 10% 0 10% 0; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--sage-soft), var(--rose-soft));
  z-index: -1;
}

/* 11. Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.steps li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
}
.steps h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.steps p { font-size: .95rem; color: var(--ink-2); margin: 0; }
@media (max-width: 991.98px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .steps { grid-template-columns: 1fr; } }

/* 12. Features */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.features--3 { grid-template-columns: repeat(3, 1fr); }
.feature__ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--rose-soft); color: var(--clay-dark);
  margin-bottom: 1rem;
}
.feature__ico .ico { width: 26px; height: 26px; }
.feature h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.feature p { font-size: .96rem; color: var(--ink-2); margin: 0; }
.section--ink .feature__ico { background: rgba(255, 255, 255, .08); color: var(--rose); }
.section--ink .feature p { color: rgba(250, 246, 241, .72); }
@media (max-width: 991.98px) { .features, .features--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .features, .features--3 { grid-template-columns: 1fr; gap: 1.5rem; } }

/* 13. Gift */
.vouchers { display: grid; gap: .75rem; margin-bottom: 1.8rem; }
.voucher {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; color: var(--ink);
  transition: border-color .2s;
}
.voucher:hover { border-color: var(--clay); color: var(--ink); }
.voucher strong { display: block; font-weight: 600; }
.voucher span { font-size: .88rem; color: var(--ink-3); }
.voucher .price { white-space: nowrap; }

/* 14. Reviews */
.review {
  height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; margin: 0;
  display: flex; flex-direction: column;
}
.review__stars { color: var(--clay); letter-spacing: .15em; margin-bottom: 1rem; }
.review__title { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: .8rem; }
.review blockquote { margin: 0 0 1.4rem; color: var(--ink-2); }
.review figcaption { margin-top: auto; font-weight: 600; }
.review figcaption span { font-weight: 400; color: var(--ink-3); }
.review--empty { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: transparent; }

/* 15. FAQ (Bootstrap accordion restyled) */
.faq .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--ink); }
.faq .accordion-item { border-left: 0; border-right: 0; border-radius: 0 !important; }
.faq .accordion-item:first-of-type { border-top: 1px solid var(--line); }
.faq .accordion-button { font-family: var(--font-display); font-size: 1.2rem; padding: 1.3rem 0; color: var(--ink); background: transparent; }
.faq .accordion-button:not(.collapsed) { box-shadow: none; }
.faq .accordion-body { padding: 0 0 1.4rem; color: var(--ink-2); }

/* 16. Newsletter / CTA band */
.cta-band {
  border-radius: var(--radius-lg);
  background: var(--ink); color: var(--paper);
  padding: clamp(2rem, 5vw, 4rem);
  position: relative;
}
.cta-band h2 { color: var(--paper); }
.cta-band .lead { color: rgba(250, 246, 241, .78); }
.cta-band::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 112, 90, .45), transparent 70%);
}
.newsletter { display: flex; gap: .5rem; max-width: 460px; }
.newsletter input {
  flex: 1; min-width: 0;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06); color: #fff;
  padding: .8rem 1.2rem;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .55); }
.newsletter input:focus { outline: 2px solid var(--clay); border-color: transparent; }
@media (max-width: 575.98px) { .newsletter { flex-direction: column; } }
.social { display: flex; gap: .5rem; }
.social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid currentColor; color: inherit; opacity: .85;
}
.social a:hover { opacity: 1; background: var(--clay); border-color: var(--clay); color: #fff; }

/* 17. Footer */
.site-footer { padding: 4.5rem 0 2rem; font-size: .95rem; color: var(--ink-2); }
.site-footer h3 { font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .2rem 0; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--clay-dark); }
.site-footer .brand img { width: 120px; margin-bottom: 1rem; }
.site-footer__bottom { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; color: var(--ink-3); }
.site-footer__bottom a { color: var(--ink-3); }
.pay-icons { display: flex; gap: .4rem; align-items: center; }
.pay-icons span { border: 1px solid var(--line); border-radius: 6px; padding: .15rem .5rem; font-size: .75rem; font-weight: 700; color: var(--ink-2); background: var(--surface); }

/* 18. Product landing */
.crumbs { font-size: .88rem; color: var(--ink-3); padding-top: 1.2rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }
.crumbs a { color: var(--ink-2); }

.p-hero { padding: 1.5rem 0 var(--section-y); }
.gallery__main { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; background: var(--rose-soft); }
.gallery__main > * { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-top: .6rem; }
.gallery__thumbs button {
  padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--rose-soft); cursor: pointer;
}
.gallery__thumbs button[aria-current="true"] { border-color: var(--clay); }
.gallery__thumbs .ph { min-height: 0; padding: .3rem; font-size: .65rem; }
.gallery__thumbs .ph .ico { width: 18px; height: 18px; margin-bottom: .2rem; }

.p-buy { position: sticky; top: 100px; }
.p-buy h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: .6rem; }
.p-buy__tagline { color: var(--ink-2); font-size: 1.1rem; margin-bottom: 1.2rem; }
.p-buy__price { font-size: 1.6rem; font-weight: 600; margin-bottom: 1.4rem; }
.p-buy__price small { font-size: .9rem; color: var(--ink-3); font-weight: 400; }
.specs { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; }
.specs li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.specs .ico { color: var(--sage); margin-top: .15rem; }
@media (max-width: 575.98px) { .specs { grid-template-columns: 1fr; } }
.opt-label { font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; }
.opts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.opts input { position: absolute; opacity: 0; pointer-events: none; }
.opts label {
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: .55rem .95rem; font-size: .93rem; cursor: pointer;
  transition: border-color .15s;
}
.opts label small { display: block; color: var(--ink-3); font-size: .78rem; }
.opts input:checked + label { border-color: var(--ink); }
.opts input:focus-visible + label { outline: 2px solid var(--clay); outline-offset: 2px; }
.p-buy__ctas { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.trust div { font-size: .82rem; color: var(--ink-2); display: flex; flex-direction: column; gap: .3rem; }
.trust .ico { color: var(--clay); width: 22px; height: 22px; }

.opt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.opt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.opt-card__media { aspect-ratio: 4 / 3; }
.opt-card__media .ph { min-height: 0; }
.opt-card__body { padding: 1.2rem 1.3rem; }
.opt-card__body h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.opt-card__body p { font-size: .94rem; color: var(--ink-2); margin: 0; }
@media (max-width: 767.98px) { .opt-cards { grid-template-columns: 1fr; } }

.occasions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.occasion { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.occasion .ph { min-height: 0; }
.occasion span {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: rgba(250, 246, 241, .94); border-radius: 999px; text-align: center;
  font-size: .85rem; font-weight: 600; padding: .35rem .5rem;
}
@media (max-width: 991.98px) { .occasions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .occasions { grid-template-columns: repeat(2, 1fr); } }

/* Tabs (Bootstrap nav-tabs restyled as underline tabs) */
.p-tabs .nav { border-bottom: 1px solid var(--line); gap: 1.5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.p-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: .9rem 0; color: var(--ink-3); font-weight: 600; white-space: nowrap; background: none;
}
.p-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--clay); background: none; }
.p-tabs .tab-pane { padding: 2rem 0 0; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: .8rem 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.spec-table th { width: 38%; font-weight: 600; color: var(--ink-2); padding-right: 1rem; }

/* Sticky mobile buy bar */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.buybar.is-visible { transform: none; }
.buybar__name { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.buybar__name small { display: block; font-weight: 400; color: var(--ink-3); }
@media (min-width: 992px) { .buybar { display: none; } }

/* 19. Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
 20. Product landings v2 (poster, dnevniki, darilni boni)
 ===================================================================== */

/* Gallery with real photos */
.gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.gallery__thumbs img, .gallery__main img { width: 100%; height: 100%; object-fit: cover; }

/* AR / live preview button (sage = "v živo" colour used on the badges) */
.btn-b--ar { background: var(--sage); color: #fff; }
.btn-b--ar:hover { background: #66724f; color: #fff; }
.btn-b--ar .pill-new { background: #fff; color: var(--sage); }
body.ar-open { overflow: hidden; } /* set by wall-ar-site.js while the preview is open */

/* Price line with an extra hint */
.p-buy__price .price-note { display: block; font-size: .85rem; font-weight: 400; color: var(--ink-3); margin-top: .2rem; }

/* Binding / format options with a price under the name */
.opts label strong { display: block; font-weight: 600; }
.opts--check label { position: relative; padding-left: 2.6rem; }
.opts--check label::before {
  content: ""; position: absolute; left: .9rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem;
  border: 1.5px solid var(--ink-3); border-radius: 4px; background: #fff;
  display: grid; place-items: center; font-size: .75rem; line-height: 1; color: #fff;
}
.opts--check input:checked + label::before { content: "✓"; background: var(--clay); border-color: var(--clay); }

/* Round fabric swatches (cover colours) */
.swatches { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .4rem; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatches label {
  width: 42px; height: 42px; border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  outline: 2px solid transparent; outline-offset: 3px;
  cursor: pointer; transition: outline-color .15s;
}
.swatches input:checked + label { outline-color: var(--ink); }
.swatches input:focus-visible + label { outline-color: var(--clay); }
.swatch-name { font-size: .88rem; color: var(--ink-2); margin-bottom: 1.4rem; }
.swatch-name small { color: var(--ink-3); }

/* Option cards with real photos (bindings, cover designs, poster themes) */
.opt-card__media img { width: 100%; height: 100%; object-fit: cover; }
.opt-card__price { font-weight: 600; margin-top: .6rem; display: block; }
.opt-cards--4 { grid-template-columns: repeat(4, 1fr); }
.opt-cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
@media (max-width: 991.98px) { .opt-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .opt-cards--4, .opt-cards--2 { grid-template-columns: 1fr; } }
.opt-card--link { display: block; color: var(--ink); transition: border-color .2s; }
.opt-card--link:hover { border-color: var(--clay); color: var(--ink); }

/* Occasion tiles with real photos */
.occasion img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.occasion:hover img { transform: scale(1.04); }
.occasions--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 991.98px) { .occasions--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .occasions--6 { grid-template-columns: repeat(2, 1fr); } }

/* Poster size guide: frames drawn to scale (1 cm = u) above a sofa line */
.sizes { --u: 3.4px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(1rem, 4vw, 3rem); padding: 2rem 1rem 0; }
.size { text-align: center; }
.size__frame {
  margin: 0 auto .8rem;
  background: #fff; border: 6px solid #C9A887; border-radius: 2px;
  box-shadow: 0 18px 30px -18px rgba(42, 36, 33, .45);
  display: grid; place-items: center;
  font-family: var(--font-display); color: var(--ink-3);
}
.size__frame--30 { width: calc(30 * var(--u)); height: calc(40 * var(--u)); }
.size__frame--40 { width: calc(40 * var(--u)); height: calc(50 * var(--u)); }
.size__frame--50 { width: calc(50 * var(--u)); height: calc(70 * var(--u)); }
.size strong { display: block; }
.size span { font-size: .85rem; color: var(--ink-3); }
.sizes-floor { height: 14px; border-radius: 0 0 var(--radius) var(--radius); background: var(--rose); margin-top: -1px; }
@media (max-width: 575.98px) { .sizes { --u: 2.2px; } }

/* Chapters / timeline (what is inside a diary) */
.chapters { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.chapters li { padding: 1.5rem 1.25rem 0 0; position: relative; }
.chapters li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--clay); }
.chapters strong { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; margin-bottom: .3rem; }
.chapters span { font-size: .95rem; color: var(--ink-2); }
@media (max-width: 767.98px) {
  .chapters { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); padding-left: 1.25rem; }
  .chapters li { padding: 0 0 1.4rem; }
  .chapters li::before { top: .45rem; left: calc(-1.25rem - 6px); }
}

/* Theme add-ons (free extra pages) */
.addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.addon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.addon strong { display: block; font-size: .95rem; letter-spacing: .02em; margin-bottom: .25rem; }
.addon span { font-size: .9rem; color: var(--ink-2); }
@media (max-width: 991.98px) { .addons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .addons { grid-template-columns: 1fr; } }

/* Voucher cards (darilni boni) */
.vcard { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.vcard__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--rose-soft); }
.vcard__media img { width: 100%; height: 100%; object-fit: cover; }
.vcard__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.vcard__body h3 { font-size: 1.45rem; margin-bottom: .4rem; }
.vcard__body > p { font-size: .95rem; color: var(--ink-2); }
.vcard__price { font-size: 1.5rem; font-weight: 600; margin: .2rem 0 1rem; }
.vcard__price small { font-size: .85rem; font-weight: 400; color: var(--ink-3); }
.vcard .opts { margin-bottom: 1rem; }
.vcard__foot { margin-top: auto; }
.vcard--featured { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.vcard__flag { position: absolute; margin: 12px; }

/* Simple quote block inside a section */
.quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; margin: 0; }
.quote-cite { margin-top: 1rem; font-weight: 600; }
.quote-cite span { font-weight: 400; color: var(--ink-3); }

/* =====================================================================
 21. Feature flags (prototype only)
 data-feature="x" shown only when <html> has class ff-x
 data-feature-off="x" shown only when it does not (the replacement)
 Photo book (fotoknjiga) is not released yet: off by default, preview with ?fotoknjiga=1.
 At integration nothing of this is needed: an inactive page drops out of menus and related links by itself.
 ===================================================================== */
html:not(.ff-fotoknjiga) [data-feature="fotoknjiga"],
html.ff-fotoknjiga [data-feature-off="fotoknjiga"] { display: none !important; }
/* Home without the photo book spotlight: keep the tinted product range and the poster section apart */
html:not(.ff-fotoknjiga) #izdelki ~ #poster-v-zivo { background: var(--paper); }
/* Wide feature card: the text sets the height, the photo fills it (a square photo would otherwise stretch the card) */
@media (min-width: 768px) { .pcard--feature .pcard__media > img { position: absolute; inset: 0; } }

/* =====================================================================
 22. Marketing layer (marketing.js): campaign bar, deal strip, card badges,
 campaign modal, newsletter slide-in
 ===================================================================== */

/* Discount code chip: one click copies the code */
.code-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; letter-spacing: .08em;
  padding: .3rem .7rem; border-radius: 8px;
  border: 1.5px dashed currentColor; background: transparent; color: inherit; cursor: pointer;
  transition: background .2s, color .2s;
}
.code-chip .ico { width: 1em; height: 1em; }
.code-chip:hover { background: rgba(255, 255, 255, .12); }
.code-chip.is-copied { border-style: solid; background: var(--sage); border-color: var(--sage); color: #fff; }
.code-chip.is-copied::after { content: " ✓"; }

/* Campaign bar (top of every page, replaces the home "news" bar while a campaign runs) */
.mbar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .9rem;
  background: var(--ink); color: var(--paper);
  font-size: .9rem; padding: .55rem 3rem .55rem var(--gutter); text-align: center;
}
.mbar__off { background: var(--clay); color: #fff; font-weight: 700; border-radius: 6px; padding: .1rem .5rem; }
.mbar__timer { font-variant-numeric: tabular-nums; color: var(--rose); }
.mbar__more { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .5); background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; }
.mbar__close { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: rgba(255, 255, 255, .7); font-size: 1.3rem; line-height: 1; padding: .3rem .5rem; }
.mbar__close:hover { color: #fff; }
.mbar .code-chip { padding: .1rem .55rem; font-size: .85rem; }

/* Deal strip inside the product buy box */
.deal {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: center;
  border: 1.5px dashed var(--clay); border-radius: var(--radius); background: var(--rose-soft);
  padding: .9rem 1rem; margin: -.4rem 0 1.4rem;
}
.deal__off { grid-row: span 2; font-family: var(--font-display); font-size: 1.7rem; color: var(--clay-dark); line-height: 1; }
.deal__text { font-weight: 600; font-size: .95rem; }
.deal__meta { font-size: .82rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.deal .code-chip { color: var(--clay-dark); font-size: .82rem; padding: .15rem .55rem; }
.deal__timer { font-variant-numeric: tabular-nums; }

/* Discount badge on product cards (pcard with a campaign) */
.pcard__deal { position: absolute; top: 12px; right: 12px; background: var(--clay); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .3em .7em; border-radius: 999px; }

/* Campaign modal (Bootstrap modal, content from the campaign) */
.cmodal .modal-content { border: 0; border-radius: var(--radius-lg); overflow: hidden; }
.cmodal__media { aspect-ratio: 16 / 9; background: var(--rose-soft); position: relative; }
.cmodal__media img { width: 100%; height: 100%; object-fit: cover; }
.cmodal__off { position: absolute; left: 1rem; bottom: 1rem; background: var(--clay); color: #fff; font-family: var(--font-display); font-size: 1.6rem; padding: .2rem .8rem; border-radius: 10px; }
.cmodal__body { padding: 1.6rem 1.6rem 1.8rem; text-align: center; }
.cmodal__body h2 { font-size: 1.7rem; margin-bottom: .6rem; }
.cmodal__code { margin: 1rem 0 .4rem; }
.cmodal__code .code-chip { color: var(--clay-dark); font-size: 1.1rem; padding: .5rem 1rem; }
.cmodal__where, .cmodal__timer { font-size: .85rem; color: var(--ink-3); }
.cmodal__timer { font-variant-numeric: tabular-nums; color: var(--clay-dark); font-weight: 600; }
.cmodal .btn-close { position: absolute; top: .8rem; right: .8rem; z-index: 2; background-color: #fff; border-radius: 50%; padding: .6rem; opacity: .9; }

/* Newsletter slide-in: a card in the corner on desktop, a bottom sheet on phones (never a full-screen blocker) */
.nl-pop {
  position: fixed; z-index: 1060; right: 1.25rem; bottom: 1.25rem; width: min(380px, calc(100vw - 2.5rem));
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(42, 36, 33, .45);
  transform: translateY(calc(100% + 2rem)); opacity: 0; visibility: hidden;
  transition: transform .45s var(--ease), opacity .3s, visibility 0s .45s;
}
.nl-pop.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--ease), opacity .3s; }
.nl-pop__media { aspect-ratio: 21 / 9; background: var(--rose-soft); }
.nl-pop__media img { width: 100%; height: 100%; object-fit: cover; }
.nl-pop__body { padding: 1.3rem 1.4rem 1.4rem; }
.nl-pop__body h2 { font-size: 1.45rem; margin-bottom: .4rem; }
.nl-pop__body p { font-size: .93rem; color: var(--ink-2); margin-bottom: .9rem; }
.nl-pop form { display: grid; gap: .5rem; }
.nl-pop input[type=email] { border: 1px solid var(--line); border-radius: 999px; padding: .75rem 1.1rem; background: var(--paper); }
.nl-pop input[type=email]:focus { outline: 2px solid var(--clay); border-color: transparent; }
.nl-pop__consent { font-size: .76rem !important; color: var(--ink-3) !important; margin: .4rem 0 0 !important; }
.nl-pop__close { position: absolute; top: .6rem; right: .6rem; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); font-size: 1.2rem; line-height: 1; }
.nl-pop__done { display: none; text-align: center; padding: .5rem 0; }
.nl-pop.is-done form, .nl-pop.is-done .nl-pop__intro { display: none; }
.nl-pop.is-done .nl-pop__done { display: block; }
@media (max-width: 575.98px) {
  .nl-pop { right: 0; left: 0; bottom: 0; width: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .nl-pop__media { display: none; }
}
/* Header with the diaries as top-level items: never wrap a label; tighter between 1200 and 1400 px */
.site-header .nav-link { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-header .nav-link { padding: .5rem .6rem !important; font-size: .94rem; }
  .site-header .brand { margin-right: 1rem !important; }
  .site-header .brand img { width: 112px; }
}

/* =====================================================================
 23. Prices: 30-day lowest price line (always) + public campaign price
 ===================================================================== */
.p-buy__price .price-off, .vcard__price .price-off {
  display: inline-block; vertical-align: middle; margin-right: .4rem;
  background: var(--clay); color: #fff; font-size: .8rem; font-weight: 700; padding: .2em .55em; border-radius: 6px;
}
.p-buy__price del, .vcard__price del { color: var(--ink-3); font-weight: 400; font-size: .62em; margin-left: .3rem; }
.p-buy__price.is-deal [data-price-now], .vcard__price.is-deal [data-price-now] { color: var(--clay-dark); }
.price-low30 { display: block; font-size: .8rem; font-weight: 400; color: var(--ink-3); margin-top: .35rem; letter-spacing: 0; }
/* product cards */
.pcard .price-low30 { margin: .45rem 0 0; font-size: .76rem; }
.pcard .price.is-deal { color: var(--clay-dark); }
.pcard .price del { color: var(--ink-3); font-weight: 400; font-size: .85rem; margin-left: .3rem; }

/* =====================================================================
 24. THEME "minimal" (2026-10-07) - CSS only, overrides everything above.
 One thin sans (Jost), no italic, no coloured words in headings, white + cool greys,
 near-black buttons, one accent kept only for discounts and NOVO.
 To switch back: delete this section and the @import at the top of the file.
 ===================================================================== */
:root {
  --paper: #FFFFFF;
  --paper-2: #F5F5F7;      /* tinted sections */
  --surface: #FFFFFF;
  --rose: #ECECEF;         /* soft surfaces (were warm rose) */
  --rose-soft: #F5F5F7;
  --ink: #1C1C1F;
  --ink-2: #55555C;
  --ink-3: #6B6B73;        /* 5.3:1 on white, 4.9:1 on #F5F5F7 (WCAG AA) */
  --clay: #1C1C1F;         /* primary actions are now near-black */
  --clay-dark: #000000;
  --sage: #4A6A86;         /* secondary: wall preview, ticks (muted steel blue) */
  --sage-soft: #E9EEF3;
  --line: #E6E6EA;
  --accent: #D23C52;       /* only for discounts and NOVO */

  --font-display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 28, 28, 31;
  --bs-link-hover-color: var(--ink-2);
}

/* Type: one family, light headings, no italic anywhere */
body { font-weight: 400; letter-spacing: .005em; }
h1, h2, h3, h4, .display, .pcard__title, .review__title, .quote, .chapters strong, .steps li::before, .deal__off, .cmodal__off {
  font-family: var(--font-display); font-weight: 300; font-variation-settings: normal; letter-spacing: -.005em;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3, .pcard__title { font-weight: 400; }
em, i, .quote { font-style: normal; }
h1 em, h2 em, h3 em, h4 em, .pcard__title em { color: inherit !important; font-style: normal; } /* beats inline style="color:…" on dark bands */
.eyebrow { color: var(--ink-3); font-weight: 500; letter-spacing: .16em; }
.section--ink .eyebrow, .cta-band .eyebrow { color: rgba(255, 255, 255, .6) !important; }
.lead { font-weight: 300; }
.btn-b, .opt-label, .range-group__title, .site-footer h3 { font-weight: 500; }

/* Buttons */
.btn-b--primary:hover { background: #3A3A40; }
.btn-b--ar:hover { background: #3B5670; }
.link-arrow { border-bottom-color: var(--ink); }

/* Accent only where a discount or novelty must stand out */
.pill-new, .price-off, .mbar__off, .pcard__deal, .cmodal__off, .pcard__badge.pill-new { background: var(--accent); }
.pill-new--sage, .pcard__badge.pill-new--sage { background: var(--sage); }
.btn-b--ar .pill-new { background: #fff; color: var(--sage); }
.deal { border-color: var(--accent); background: #FFFFFF; } /* accent text needs white for 4.5:1 */
.deal__off, .deal .code-chip, .cmodal__code .code-chip, .cmodal__timer { color: var(--accent); }
.p-buy__price.is-deal [data-price-now], .vcard__price.is-deal [data-price-now], .pcard .price.is-deal, .price--sale { color: var(--accent); }
.mbar__timer { color: #FFB3BF; }

/* Calm surfaces: no warm glows, stripes or wood */
.cta-band::after { display: none; }
.ph { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0, 0, 0, .025) 14px 15px), var(--rose-soft); color: var(--ink-3); }
.book-mock { background: var(--rose-soft); }
.book-mock__page:first-child { background: linear-gradient(90deg, #fff 85%, #eee); }
.book-mock__page:last-child { background: linear-gradient(270deg, #fff 85%, #eee); }
.size__frame { border-color: #2A2A2E; border-width: 4px; }
.sizes-floor { background: var(--line); }
.ar-stage::before { background: var(--rose-soft); }
.feature__ico { background: var(--paper-2); color: var(--ink); }
.section--ink .feature__ico { color: #fff; }
.chapters li::before { background: var(--ink); }
.pcard:hover { border-color: var(--ink-3); }
.voucher:hover, .opt-card--link:hover { border-color: var(--ink); }
.vcard--featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.site-header { background: rgba(255, 255, 255, .94); }
.faq .accordion-button { font-weight: 400; }
.opts--check input:checked + label::before { background: var(--ink); border-color: var(--ink); }

/* =====================================================================
 25. Review fixes (2026-10-07) - theme-independent, keep in both themes
 ===================================================================== */
/* Feature lists: icon in flow next to the heading, no rounded tile above it */
.feature { display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; align-items: start; align-content: start; }
.feature__ico { grid-row: 1 / span 2; width: auto; height: auto; margin: .2rem 0 0; background: none !important; border-radius: 0; color: var(--ink); }
.feature__ico .ico { width: 24px; height: 24px; }
.section--ink .feature__ico { color: #fff; }
.feature h3, .feature p { grid-column: 2; }

/* Leading: multi-line headings and FAQ questions get more room */
h1 { line-height: 1.15; }
h2, h3, h4 { line-height: 1.25; }
.faq .accordion-button { line-height: 1.4; }

/* =====================================================================
 26. THEME "natural" (2026-10-07) - on top of section 24:
 script titles (Sacramento on H1/H2), warm light neutrals, brand brown instead of black.
 Delete this section to go back to the cool minimal look of section 24.
 Contrast (WCAG AA): white on earth 6.6:1, 85 % white on earth 5.3:1, ink-3 on #F7F3EF 5.3:1.
 ===================================================================== */
:root {
  --paper-2: #F7F3EF;      /* warm light sections */
  --rose: #EDE4DC;
  --rose-soft: #F7F3EF;
  --ink: #2B2421;
  --ink-2: #5C514B;
  --ink-3: #6E625B;
  --line: #EAE3DC;
  --earth: #74574B;        /* brand brown: bands, bars, primary buttons */
  --earth-dark: #5E453B;
  --clay: var(--earth);
  --clay-dark: var(--earth-dark);
  --sage: #5E6A48;         /* natural olive: wall preview, ticks */
  --sage-soft: #EEF0E7;
  --font-script: "Sacramento", "Brush Script MT", cursive;   /* alternative: "Parisienne" */
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 43, 36, 33;
}

/* Script titles: H1 and H2 only. Smaller headings, cards and FAQ questions stay in Jost */
h1, h2 { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; line-height: 1.15; }
h1 { font-size: clamp(3rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2.4rem, 4.2vw, 3.4rem); }
.p-buy h1 { font-size: clamp(2.8rem, 4.4vw, 3.8rem); }
.cmodal__body h2 { font-size: 2.4rem; }
.nl-pop__body h2 { font-size: 2.3rem; }
.p-tabs h2 { margin-bottom: .5rem !important; }

/* Brown instead of black */
.section--ink, .cta-band, .announce, .mbar { background: var(--earth); }
.btn-b--primary:hover { background: var(--earth-dark); }
.btn-b--ar:hover { background: #4B5639; }
.size__frame { border-color: var(--earth); }
.chapters li::before { background: var(--earth); }
.opts--check input:checked + label::before { background: var(--earth); border-color: var(--earth); }
.vcard--featured { border-color: var(--earth); box-shadow: 0 0 0 1px var(--earth); }

/* Light text on brown: keep every line at 4.5:1 or more */
.section--ink .lead, .cta-band .lead, .section--ink .feature p { color: rgba(255, 255, 255, .9); }
.section--ink .eyebrow, .cta-band .eyebrow { color: rgba(255, 255, 255, .85) !important; }
.newsletter input { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
.newsletter input::placeholder { color: #FFFFFF; opacity: 1; }
.mbar__close { color: rgba(255, 255, 255, .9); }
.mbar__timer { color: #FFE6D3; }
.crumbs li + li::before { color: var(--ink-3); }

/* =====================================================================
 27. TYPE "serif + script" (2026-10-07) - on top of section 26:
 Playfair Display for H1/H2 (regular, no italic), Pinyon Script only as decoration
 (the small label above a section title), Jost for everything else.
 Delete this section to go back to the Sacramento titles of section 26.
 ===================================================================== */
:root {
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script: "Pinyon Script", "Brush Script MT", cursive;
}
h1, h2 { font-family: var(--font-serif); font-weight: 400; font-style: normal; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.p-buy h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.cmodal__body h2 { font-size: 1.7rem; }
.nl-pop__body h2 { font-size: 1.6rem; }

/* Decoration: section labels in script instead of tracked capitals (large enough to read: 30 px) */
.eyebrow {
  font-family: var(--font-script); font-weight: 400; font-size: 1.9rem; line-height: 1.15;
  text-transform: none; letter-spacing: 0; color: var(--earth); margin-bottom: .1rem;
}
.eyebrow .pill-new { font-family: var(--font-body); font-size: .66rem; line-height: 1.4; vertical-align: middle; }

/* =====================================================================
 28. Steps as a flow + live wall preview (2026-10-07)
 ===================================================================== */
/* "Kako deluje": organic shapes offset like stepping stones, hand-drawn arrow between them, no numbers */
.steps { grid-template-columns: repeat(4, 1fr); gap: 3rem; padding: .5rem 0 2.6rem; }
.steps li {
  position: relative; border: 0; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 14.5rem; padding: 2.4rem 1.8rem 2.6rem;
  background: #EFE5DC; border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
  transition: border-radius 1.4s var(--ease);
}
.steps li:nth-child(2) { background: #E8EBE0; border-radius: 44% 56% 40% 60% / 56% 44% 56% 44%; transform: translateY(2.2rem); }
.steps li:nth-child(3) { background: #F1E6E0; border-radius: 52% 48% 60% 40% / 42% 58% 42% 58%; }
.steps li:nth-child(4) { background: #E6E9E2; border-radius: 62% 38% 46% 54% / 52% 48% 52% 48%; transform: translateY(2.2rem); }
.steps li:hover { border-radius: 46% 54% 58% 42% / 54% 46% 54% 46%; }
.steps h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.steps p { color: var(--ink-2); }
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -3.15rem; width: 3.3rem; height: 1.7rem; margin-top: -.85rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' fill='none' stroke='%2374574B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20C15 6 33 3 50 13'/%3E%3Cpath d='M42 7.5 50.5 13 41.5 17'/%3E%3C/svg%3E") center / contain no-repeat;
  --tilt: 16deg;
  transform: rotate(var(--tilt));
  animation: step-nudge 2.4s var(--ease) infinite;
}
.steps li:nth-child(even)::after { --tilt: -16deg; }
.steps li:nth-child(2)::after { animation-delay: .4s; }
.steps li:nth-child(3)::after { animation-delay: .8s; }
@keyframes step-nudge {
  0%, 100% { transform: rotate(var(--tilt)) translateX(-3px); opacity: .55; }
  50% { transform: rotate(var(--tilt)) translateX(5px); opacity: 1; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .steps { gap: 2.6rem; }
  .steps li { padding: 2rem 1.3rem 2.2rem; }
  .steps li:not(:last-child)::after { right: -2.85rem; width: 3rem; }
}
@media (max-width: 991.98px) {
  .steps { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; gap: 3.4rem; padding-bottom: 0; }
  .steps li, .steps li:nth-child(2), .steps li:nth-child(4) { transform: none; min-height: 12rem; }
  .steps li:not(:last-child)::after, .steps li:nth-child(even)::after {
    top: auto; bottom: -3rem; right: 50%; margin: 0 -1.5rem 0 0; --tilt: 90deg;
  }
}

/* Wall preview: four reasons instead of numbered steps */
.ar-perks { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.8rem; }
.ar-perks li { display: flex; gap: .8rem; align-items: flex-start; }
.ar-perks .ico { width: 26px; height: 26px; flex: none; margin-top: .1rem; color: var(--earth); }
.ar-perks strong { display: block; font-weight: 500; margin-bottom: .1rem; }
.ar-perks span { font-size: .93rem; color: var(--ink-2); }
@media (max-width: 575.98px) { .ar-perks { grid-template-columns: 1fr; } }

/* Live phone mockup: viewfinder corners and size chips cycle together (30×40 → 40×50 → 50×70) */
.phone__scan {
  position: absolute; left: 21%; right: 21%; top: 15%; bottom: 31%; pointer-events: none;
  --c: rgba(255, 255, 255, .96);
  background:
    linear-gradient(var(--c), var(--c)) left top / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 22px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 2px 22px no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .4));
  animation: ar-scan 9s var(--ease) infinite;
}
@keyframes ar-scan {
  0%, 30% { transform: scale(.86); }
  33%, 63% { transform: scale(1); }
  66%, 96% { transform: scale(1.14); }
  100% { transform: scale(.86); }
}
.phone__ui span { animation: ar-chip 9s infinite; }
.phone__ui span:nth-child(2) { animation-delay: -6s; }
.phone__ui span:nth-child(3) { animation-delay: -3s; }
@keyframes ar-chip {
  0%, 30% { background: var(--earth); color: #fff; }
  33%, 100% { background: rgba(255, 255, 255, .94); color: var(--ink); }
}
.phone__badge {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(43, 36, 33, .78); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  padding: .25rem .6rem; border-radius: 999px;
}
.phone__badge .ico { width: .95em; height: .95em; }

/* =====================================================================
 29. Spacing fixes (2026-10-07, measured: text never closer than 6 px to a visible edge)
 ===================================================================== */
/* Step shapes: keep text in the round middle, away from the curved edge */
.steps li { padding: 2.4rem 13% 2.6rem; min-height: 15rem; }
@media (min-width: 992px) and (max-width: 1199.98px) { .steps li { padding: 2rem 12% 2.2rem; } }
@media (max-width: 991.98px) { .steps li { padding: 2.2rem 14%; } }

/* Pills, badges, chips: room above and below the letters */
.pill-new { padding: .32em .7em .3em; line-height: 1.3; }
.eyebrow .pill-new, .btn-b--ar .pill-new { padding: .32em .7em .3em; line-height: 1.3; }
.pcard__badge, .pcard__deal { padding: .4em .75em .38em; line-height: 1.3; }
.mbar__off { padding: .2rem .6rem; }
.mbar .code-chip { padding: .2rem .6rem; }
.p-buy__price .price-off, .vcard__price .price-off { padding: .35em .6em .32em; line-height: 1.3; }
.pay-icons span { padding: .35rem .6rem; }
mark.tbd { padding: .1em .3em; }

/* Size guide on phones: the smallest frame gets a smaller label */
@media (max-width: 575.98px) { .size__frame { font-size: .68rem; } }

/* Image placeholders: plain light surface (the stripes were read as a dark background by contrast checkers) */
.ph { background: var(--rose-soft); }
/* (29b) Jost sits high in its box: pills need a little more vertical padding than the font size suggests */
.pill-new, .eyebrow .pill-new, .btn-b--ar .pill-new { padding: .5em .75em .45em; line-height: 1.2; }
.pcard__badge, .pcard__deal { padding: .5em .8em .45em; line-height: 1.2; }
.p-buy__price .price-off, .vcard__price .price-off { padding: .5em .65em .45em; line-height: 1.2; }
mark.tbd { padding: .15em .35em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* =====================================================================
   30. Content pages (2026-10-07): blog listing, blog post, about + contact, legal text
   ===================================================================== */
/* Page intro (text pages without a product hero) */
.page-intro { padding-top: 1.5rem; padding-bottom: 2.5rem; } /* top/bottom only: keep the container side padding */
.page-intro h1 { margin-bottom: .8rem; }
.page-intro .lead { max-width: 44rem; margin-bottom: 0; }

/* Blog: category filter */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.filter button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: .5rem 1rem; font-size: .92rem; font-weight: 500;
}
.filter button:hover { border-color: var(--ink-3); color: var(--ink); }
.filter button[aria-pressed="true"] { background: var(--earth); border-color: var(--earth); color: #fff; }

/* Blog: post cards */
.post-card { display: flex; flex-direction: column; height: 100%; color: var(--ink); }
.post-card:hover { color: var(--ink); }
.post-card__media { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: var(--rose-soft); margin-bottom: 1.1rem; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__cat { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--earth); margin-bottom: .45rem; }
.post-card__title { font-family: var(--font-body); font-size: 1.3rem; font-weight: 400; line-height: 1.3; margin-bottom: .5rem; }
.post-card:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.post-card__text { font-size: .95rem; color: var(--ink-2); margin-bottom: .8rem; }
.post-card__meta { margin-top: auto; font-size: .85rem; color: var(--ink-3); }
.post-card--featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.5rem; align-items: center; }
.post-card--featured .post-card__media { margin: 0; aspect-ratio: 4 / 3; }
.post-card--featured .post-card__title { font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }
@media (max-width: 767.98px) { .post-card--featured { grid-template-columns: 1fr; gap: 1.2rem; } }
.post-grid > [hidden] { display: none !important; }
.pager { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; }
.pager a, .pager span { min-width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); padding: 0 .8rem; }
.pager [aria-current] { background: var(--earth); border-color: var(--earth); color: #fff; }

/* Blog post */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--earth); z-index: 1040; }
.post-hero { padding-top: 1.5rem; padding-bottom: 2.5rem; text-align: center; }
.post-hero h1 { max-width: 46rem; margin: .4rem auto 1rem; }
.post-hero .lead { max-width: 40rem; margin: 0 auto 1.2rem; }
.post-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; font-size: .9rem; color: var(--ink-3); }
.post-cover { max-width: 1040px; margin: 0 auto 3rem; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 8; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 44rem; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; }
.prose > * + * { margin-top: 1.3rem; }
.prose p { margin-bottom: 0; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-top: 3rem; scroll-margin-top: 100px; }
.prose h3 { font-size: 1.3rem; font-weight: 500; margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .4rem; }
.prose a:not(.pcard):not(.btn-b) { color: var(--earth); text-decoration: underline; text-underline-offset: .2em; }
.prose blockquote { margin: 2rem 0; padding: .3rem 0 .3rem 1.5rem; border-left: 3px solid var(--earth); font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.5; color: var(--ink); }
.prose blockquote footer { margin-top: .6rem; font-family: var(--font-body); font-size: .9rem; color: var(--ink-3); }
.toc { background: var(--paper-2); border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; font-size: 1rem; }
.toc strong { display: block; margin-bottom: .5rem; font-weight: 600; }
.toc ol { margin: 0; padding-left: 1.2rem; }
.prose .toc a { color: var(--ink-2); text-decoration: none; }
.prose .toc a:hover { color: var(--ink); text-decoration: underline; }
.post-figure { margin: 2.2rem 0; }
.post-figure img { width: 100%; border-radius: var(--radius); }
.post-figure figcaption, .post-gallery figcaption, .post-video figcaption { margin-top: .6rem; font-size: .88rem; color: var(--ink-3); text-align: center; }
@media (min-width: 992px) { .post-figure--wide { margin-left: -8rem; margin-right: -8rem; } }
.tip { background: var(--sage-soft); border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; font-size: 1rem; line-height: 1.65; }
.tip strong:first-child { display: block; font-family: var(--font-script); font-weight: 400; font-size: 1.8rem; line-height: 1.1; color: var(--sage); margin-bottom: .3rem; }

/* Product call-out inside a post (a pcard laid out sideways) */
.pcard--inline { flex-direction: row; margin: 2.4rem 0; }
.pcard--inline .pcard__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 210px; }
.pcard--inline .pcard__media > img { position: absolute; inset: 0; }
.pcard--inline .pcard__body { padding: 1.4rem 1.6rem; }
.pcard--inline .pcard__title { font-size: 1.35rem; }
.pcard__kicker { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--earth); margin-bottom: .35rem; }
.pcard--inline .pcard__foot { flex-wrap: wrap; }
@media (max-width: 575.98px) { .pcard--inline { flex-direction: column; } .pcard--inline .pcard__media { min-height: 0; aspect-ratio: 4 / 3; } }

/* Gallery + lightbox */
.post-gallery { margin: 2.4rem 0; }
.post-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.post-gallery__grid a { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; }
.post-gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-gallery__grid a:hover img { transform: scale(1.05); }
@media (min-width: 992px) { .post-gallery { margin-left: -8rem; margin-right: -8rem; } .post-gallery__grid a:first-child { grid-column: span 2; grid-row: span 2; } } /* 3 columns: 1 large + 2, then 3 = six photos without an orphan */
.lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(30, 24, 21, .94); color: #fff; }
.lightbox::backdrop { background: rgba(30, 24, 21, .94); }
.lightbox__img { position: absolute; inset: 4rem 4.5rem 5rem; display: grid; place-items: center; }
.lightbox__img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lightbox__cap { position: absolute; left: 1rem; right: 1rem; bottom: 1.6rem; text-align: center; font-size: .95rem; }
.lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.lightbox button:hover { background: rgba(255, 255, 255, .28); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; margin-top: -1.5rem; }
.lightbox__next { right: 1rem; top: 50%; margin-top: -1.5rem; }

/* Video: thumbnail first, the YouTube player (no-cookie domain) loads only on click */
.post-video { margin: 2.4rem 0; }
.video-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s; }
.video-facade:hover img { opacity: 1; }
.video-facade__play { position: absolute; left: 50%; top: 50%; width: 4.6rem; height: 4.6rem; margin: -2.3rem 0 0 -2.3rem; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.video-facade__play svg { width: 1.6rem; height: 1.6rem; fill: var(--earth); margin-left: .25rem; }
.video-facade__label { position: absolute; left: 1rem; bottom: 1rem; background: rgba(43, 36, 33, .8); color: #fff; font-size: .85rem; font-weight: 500; padding: .45rem .8rem; border-radius: 999px; }
.post-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); display: block; }
.post-video__note { font-size: .8rem; color: var(--ink-3); text-align: center; margin-top: .4rem; }

/* Share row */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 3rem auto 0; max-width: 44rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.share > span { font-weight: 500; margin-right: .4rem; }
.share a, .share button { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: .5rem 1rem; font-size: .9rem; }
.share a:hover, .share button:hover { border-color: var(--ink-3); color: var(--ink); }
.share button.is-copied { background: var(--sage); border-color: var(--sage); color: #fff; }

/* About + contact */
.contact-card { background: var(--paper-2); border-radius: var(--radius-lg); padding: 2rem; height: 100%; }
.contact-card h2 { font-size: 1.8rem; margin-bottom: 1rem; }
.contact-card dl { margin: 0 0 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .95rem; }
.contact-card dt { font-weight: 500; color: var(--ink-2); }
.contact-card dd { margin: 0; }
.contact-card .social a { color: var(--ink); }

/* Forms (contact form: engine forms module fields) */
.form-b .form-label { font-weight: 500; font-size: .95rem; margin-bottom: .35rem; }
.form-b .form-label .req { color: var(--accent); }
.form-b .form-control { border: 1px solid #CFC6BE; border-radius: 10px; padding: .75rem .95rem; background: #fff; font-size: 1rem; }
.form-b .form-control:focus { border-color: var(--earth); box-shadow: 0 0 0 3px rgba(116, 87, 75, .15); }
.form-b textarea.form-control { min-height: 9rem; }
.form-b .form-check-input:checked { background-color: var(--earth); border-color: var(--earth); }
.form-b .form-check-label { font-size: .92rem; color: var(--ink-2); }
.form-b .altcha-ph { display: flex; align-items: center; gap: .7rem; border: 1px solid #CFC6BE; border-radius: 10px; padding: .8rem 1rem; font-size: .92rem; color: var(--ink-2); max-width: 20rem; }
.form-b .altcha-ph span { width: 1.2rem; height: 1.2rem; border: 1.5px solid var(--ink-3); border-radius: 4px; }
.form-b .form-text { color: var(--ink-3); }

/* Text page (legal and other plain content): breadcrumb, title, optional subtitle, content */
.page-intro__sub { margin: 0; color: var(--ink-3); font-size: .95rem; }
.text-page { max-width: 46rem; font-size: 1.02rem; line-height: 1.75; }
.text-page h2 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; margin: 2.4rem 0 .8rem; }
.text-page p { margin-bottom: 1rem; }
.text-page ul { padding-left: 1.3rem; margin-bottom: 1rem; }

/* (30b) Inside the article: cards and the table of contents keep their own spacing and link style */
.prose .pcard__title { margin-top: 0; }
.prose .pcard__text { margin-bottom: 1rem; }
.prose .toc a:not(.pcard):not(.btn-b) { color: var(--ink-2); text-decoration: none; }
.prose .toc a:not(.pcard):not(.btn-b):hover { color: var(--ink); text-decoration: underline; }

/* =====================================================================
   31. Clean-up before CMS integration (2026-10-07)
   ===================================================================== */
/* Reviews: a row that takes any number of reviews (3 visible on desktop, scroll/swipe for more) */
.reviews-track {
  display: grid; grid-auto-flow: column; gap: 1.5rem;
  grid-auto-columns: calc((100% - 3rem) / 3);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem;
  scrollbar-width: thin; scrollbar-color: var(--rose) transparent;
}
.reviews-track > * { scroll-snap-align: start; }
@media (max-width: 991.98px) { .reviews-track { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (max-width: 575.98px) { .reviews-track { grid-auto-columns: 86%; } }

/* Light button (on brown bands): a real button at rest, darker sand on hover */
.btn-b--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-b--light:hover, .btn-b--light:focus-visible { background: var(--rose); border-color: var(--rose); color: var(--ink); }

/* Trust row adapts to 2 or 3 items */
.trust { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* Vouchers: centred grid for 2, 3 or 4 cards */
.vcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 23rem)); justify-content: center; gap: 1.5rem; }

/* 32. CMS integration (2026-10-07): form-module forms, order modal, rich text inside small print */
.lscms-form__label { font-weight: 500; font-size: .95rem; }
.lscms-form input:not([type=checkbox]):not([type=radio]), .lscms-form select, .lscms-form textarea { border: 1px solid #CFC6BE; border-radius: 10px; padding: .75rem .95rem; color: var(--ink); font-size: 1rem; }
.lscms-form input:focus, .lscms-form select:focus, .lscms-form textarea:focus { border-color: var(--earth); box-shadow: 0 0 0 3px rgba(116, 87, 75, .15); }
.lscms-form__req { color: var(--accent); }
.lscms-form__check input { margin-top: .3rem; accent-color: var(--earth); }
.lscms-form__result { border-radius: var(--radius); }
#kontakt .small-print a, .small-print a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.order-modal .modal-content { border: 0; border-radius: var(--radius-lg); }
.order-modal .modal-header { border-bottom-color: var(--line); padding: 1.25rem 1.5rem; }
.order-modal .modal-body { padding: 1.5rem; }
.lscms-order__payment { background: var(--paper-2); border-radius: var(--radius); }
.small-print p:last-child, .contact-card p:last-child { margin-bottom: 0; }
.p-buy__desc { color: var(--ink-2); margin-bottom: 1rem; }
.p-files { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.25rem; }
.page-intro__text { max-width: 44rem; margin-top: 1rem; }
/* product card and video placed in rich text by a module (phrasing markup: spans) */
.pcard--inline .pcard__media, .pcard--inline .pcard__kicker, .pcard--inline .pcard__title, .pcard--inline .pcard__text, .prose .post-video, .prose .post-video__note { display: block; }
.prose .post-video { margin: 2rem 0; }
.prose aside.tip { margin: 2rem 0; }

/* main menu from datasets (mainmeni.xsl): hamburger below 992 px, dropdowns merge items between 992 and 1399 px */
.site-header .dropdown-toggle { background: none; border: 0; }
.site-header .dropdown-toggle::after { margin-left: .35em; vertical-align: .15em; border-top-width: .3em; border-right-width: .3em; border-left-width: .3em; }
.site-header .nav-link.active { color: var(--earth); }
.site-header .dropdown-item.active, .site-header .dropdown-item:active { background: var(--rose-soft); color: var(--ink); }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header .nav-link { padding: .5rem .55rem !important; font-size: .94rem; }
  .site-header .brand { margin-right: 1rem !important; }
  .site-header .brand img { width: 112px; }
}
@media (max-width: 991.98px) {
  .site-header .dropdown-toggle { width: 100%; text-align: left; }
}
.site-header .nav-link:focus { box-shadow: none; outline: 0; }
.site-header .nav-link:focus-visible { outline: 2px solid var(--earth); outline-offset: 2px; border-radius: 6px; }
/* theme tiles in rows of four (4 or 8 tiles, e.g. gift posters) */
.occasions--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 575.98px) { .occasions--4 { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   33. CALM (2026-10-13): lighter type and fewer colours, after eulenschnitt.de and osebnanota.si
   (headings, links, prices and buttons all at regular weight, slight positive letter-spacing, soft warm
   near-black text, square buttons and nearly square images, colour left to the photographs).
   Delete this section to go back to the previous look.
   ===================================================================== */
:root {
  --ink: #2F2B26;          /* warm near-black, softer than before */
  --ink-2: #5E5751;
  --ink-3: #6E6259;        /* 5.4:1 on the light sections */
  --earth: #4A3F37;        /* primary buttons and the top bar: deep warm brown, close to black */
  --earth-dark: #2F2B26;
  --clay: var(--earth);
  --clay-dark: var(--earth-dark);
  --sage: var(--earth);    /* the wall preview button no longer has its own olive colour */
  --sage-soft: #F3EFEA;
  --rose: #EFEAE4;
  --rose-soft: #F7F4F0;
  --paper-2: #F7F4F0;
  --accent: #8C4B3A;       /* discounts and NOVO: muted terracotta instead of red */
  --radius: 4px;
  --radius-lg: 6px;
  --bs-link-color-rgb: 47, 43, 38;
}
body { letter-spacing: .012em; }
h1, h2 { letter-spacing: .01em; line-height: 1.22; }
h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.65rem, 2.7vw, 2.15rem); }
.p-buy h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }

/* regular weight everywhere (the references use no bold) */
.btn-b, .site-header .nav-link, .site-header .dropdown-item, .link-arrow, .announce a, .price, .p-buy__price, .vcard__price,
.opt-card__price, .buybar__name, .voucher strong, .review figcaption, .quote-cite, .opts label strong, .spec-table th, .deal__text,
.toc strong, .pcard__kicker, .post-card__cat, .site-footer h3, .opt-label, .eyebrow, .range-group__title, .ar-perks strong,
.occasion span, .p-tabs .nav-link, .contact-card dt, .lscms-form__label, .form-b .form-label, .share > span, .prose h3, .text-page h2,
.chip, .pay-icons span, .mbar__more, .cmodal__timer, .video-facade__label, .pcard__title, .feature h3, .steps h3, .addon strong,
.chapters strong, .lscms-order__product b, .accordion-button { font-weight: 400; }
.pill-new, .pcard__badge, .pcard__deal, .mbar__off, .deal__off, .cmodal__off, .price-off { font-weight: 500; }
.price-current, .p-buy__price [data-price-now], .vcard__price [data-price-now] { font-weight: 400; }
b, strong { font-weight: 500; }

/* buttons: nearly square, a little letter-spacing; the wall preview button in the same family */
.btn-b { border-radius: 2px; letter-spacing: .05em; }
.btn-b--ar .pill-new { color: var(--earth); }
.chip, .pill-new, .pcard__badge, .pcard__deal, .occasion span, .site-header .header-cta, .pager a, .pager span,
.share a, .share button, .filter button, .nl-pop input[type=email], .code-chip { border-radius: 2px; }
.link-arrow { border-bottom: 1px solid currentColor; }
.site-header .nav-link.active { color: var(--ink); text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1px; }

/* colour bands become light: dark text on warm off-white */
.section--ink, .cta-band { background: var(--paper-2); color: var(--ink); }
.section--ink h2, .section--ink h3, .cta-band h2 { color: var(--ink); }
.section--ink .lead, .section--ink .feature p, .cta-band .lead { color: var(--ink-2); }
.section--ink .feature__ico { background: transparent; color: var(--ink); }
.section--ink .eyebrow, .cta-band .eyebrow { color: var(--ink-3) !important; }
.cta-band .btn-b--light { background: var(--earth); color: #fff; }
.cta-band .btn-b--light:hover { background: var(--earth-dark); color: #fff; }
.cta-band .social a { color: var(--ink); border-color: var(--line); }
.cta-band::before, .cta-band::after { display: none; }
.eyebrow { color: var(--ink-3); }
.post-card__cat, .pcard__kicker { color: var(--ink-3); }
/* steps: warm neutral shapes instead of rose and sage */
.steps li:nth-child(odd) { background: #F1ECE6; }
.steps li:nth-child(even) { background: #E9E4DD; }
/* cookie banner (assets/css/cookieconsent-theme.css loads later, hence html #cc-main) */
html #cc-main {
  --cc-font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  --cc-btn-border-radius: 2px;
  --cc-btn-primary-bg: #4A3F37; --cc-btn-primary-border-color: #4A3F37;
  --cc-btn-primary-hover-bg: #2F2B26; --cc-btn-primary-hover-border-color: #2F2B26;
  --cc-btn-secondary-hover-border-color: #4A3F37; --cc-toggle-on-bg: #4A3F37;
  --cc-pm-toggle-border-radius: 2px; --cc-modal-border-radius: 4px;
}
html #cc-main .cm__title, html #cc-main .pm__title { font-weight: 500; }
html #cc-main .cm__btn, html #cc-main .pm__btn { font-weight: 400; letter-spacing: .04em; }
/* small pills inside the phone mock-up and on photos */
.phone__badge, .phone__ui span, .video-facade__label { font-weight: 400; }
/* leftover soft corners: gallery thumbs, option buttons, menu items, form fields */
.gallery__thumbs button, .opts label, .site-header .dropdown-item, .form-b .form-control, .form-b .altcha-ph,
.lscms-form input:not([type=checkbox]):not([type=radio]), .lscms-form select, .lscms-form textarea, .cmodal__off { border-radius: 2px; }
.opts label, .gallery__thumbs button { border-width: 1px; }
.announce a { font-weight: 400; }