@font-face { font-family: "Lora"; src: url("/assets/fonts/lora-bold.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/assets/fonts/lora-italic.woff") format("woff"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/playfair-display-italic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-semibold.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-italic.woff") format("woff"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("/assets/fonts/noto-naskh-arabic-semibold.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url("/assets/fonts/noto-sans-arabic.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --cocoa: #2A1B15;
  --cocoa-2: #36241C;
  --cocoa-3: #4A3428;
  --grid-dark: rgba(232, 180, 85, 0.13);
  --paper: #FBF6EA;
  --wafer: #F2E3C4;
  --stage: #F5EAD3;
  --line: #E6D6B6;
  --line-2: #D6BF95;
  --maroon: #7A1220;
  --maroon-2: #5F0E19;
  --gold: #B8791F;
  --gold-2: #D9A94F;
  --gold-3: #F0D9A8;
  --ink: #2A1B15;
  --ink-2: #57443A;
  --ink-3: #75604F;
  --on-dark: #F7EEDD;
  --on-dark-2: #D9C8AB;
  --fliters: #1B1714;
  --fliters-2: #E4561A;
  --bolyarka: #805416;
  --lara: #0F4A52;
  --ropotamo: #2E3F7C;
  --alina: #5A1616;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;
  --display: 'Lora', Georgia, 'Times New Roman', serif;
  --display-hi: 'Playfair Display', 'Lora', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --pack-shadow: drop-shadow(0 12px 16px rgba(42, 27, 21, 0.28));
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--maroon); text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: var(--maroon-2); } }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; margin: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.skip { position: absolute; inset-inline-start: 16px; top: 8px; transform: translateY(-300%); background: var(--maroon); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { transform: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 8px;
  font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; background: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--maroon); color: #fff; }
@media (hover: hover) { .btn-primary:hover { background: var(--maroon-2); color: #fff; } }
.btn-gold { background: var(--gold-2); color: var(--cocoa); }
@media (hover: hover) { .btn-gold:hover { background: var(--gold-3); color: var(--cocoa); } }
.btn-outline { border-color: currentColor; color: var(--maroon); }
@media (hover: hover) { .btn-outline:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; } }
.btn-outline-light { border-color: rgba(247, 238, 221, 0.55); color: var(--on-dark); }
@media (hover: hover) { .btn-outline-light:hover { border-color: var(--on-dark); background: rgba(247, 238, 221, 0.08); color: #fff; } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- announcement + header ---------- */
.announce { background: var(--maroon); color: var(--on-dark); font-size: 14px; }
.announce .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding-block: 9px; text-align: center; }
.announce a { color: var(--gold-3); font-weight: 600; }
.ann-mid, .ann-short { display: none; }
@media (max-width: 900px) { .ann-long { display: none; } .ann-mid { display: inline; } }
@media (max-width: 560px) { .ann-mid { display: none; } .ann-short { display: inline; } .announce { font-size: 13px; } }
@media (hover: hover) { .announce a:hover { color: #fff; } }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(251, 246, 234, 0.96); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  backdrop-filter: saturate(1.2) blur(6px);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.brandmark { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; color: var(--maroon); flex: none; }
.brandmark img { height: 52px; width: auto; }
.brandmark span { font-family: var(--display); font-weight: 600; font-size: 1.42rem; line-height: 1; letter-spacing: -0.01em; }
.main-nav { margin-inline-start: auto; }
.main-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li > a { display: block; white-space: nowrap; padding: 10px 10px; font-weight: 500; font-size: 15px; color: var(--ink); text-decoration: none; border-radius: 6px; position: relative; }
@media (hover: hover) { .main-nav > ul > li > a:hover { color: var(--maroon); background: rgba(122, 18, 32, 0.06); } }
.main-nav > ul > li > a[aria-current="page"] { color: var(--maroon); }
.main-nav > ul > li > a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; background: var(--gold); }
.header-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.inq-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.inq-pill b { background: var(--maroon); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 12px; padding: 0 6px; }
.inq-pill svg { width: 18px; height: 18px; }
.inq-pill .inq-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu-btn { display: none; border: 1px solid var(--line-2); background: #fff; border-radius: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.mobile-menu { border-top: 1px solid var(--line); background: var(--paper); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu li a[aria-current="page"] { color: var(--maroon); }
.mobile-menu .btn { margin-top: 16px; width: 100%; }
@media (max-width: 1120px) {
  .main-nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .header-tools { margin-inline-start: auto; }
}
.nav-collapsed .main-nav, .nav-collapsed .header-cta, .cta-hide .header-cta { display: none; }
.nav-collapsed .menu-btn { display: inline-flex; }
.nav-collapsed .header-tools { margin-inline-start: auto; }
@media (max-width: 520px) {
  .brandmark span { font-size: 1.15rem; }
  .brandmark img { height: 46px; }
  .inq-pill .inq-label { display: none; }
}
@media (max-width: 400px) {
  .header-inner { gap: 10px; }
  .brandmark { gap: 8px; }
  .brandmark span { font-size: 1.02rem; }
  .brandmark img { height: 42px; }
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-btn { padding: 0; justify-content: center; }
  .inq-pill { padding: 0 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .header-inner { min-height: 60px; }
}

/* ---------- shared section styles ---------- */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section-head { display: grid; gap: 12px; max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--ink); }
.section-head p { color: var(--ink-2); font-size: 1.075rem; }
.page-head { background: var(--wafer); border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-block: clamp(40px, 6vw, 64px); display: grid; gap: 14px; }
.page-head h1 { font-size: clamp(2.4rem, 4.8vw, 3.6rem); max-width: 18ch; letter-spacing: -0.018em; }
.page-head p { max-width: 44rem; color: var(--ink-2); font-size: 1.1rem; }
.crumbs { font-size: 14px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); }
.wafer-grid { position: relative; isolation: isolate; }
.wafer-grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, var(--gridc, var(--grid-dark)) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, var(--gridc, var(--grid-dark)) 0 1px, transparent 1px 30px);
}

/* ---------- hero ---------- */
.hero { background: var(--cocoa); color: var(--on-dark); overflow: hidden; }
.hero::before { -webkit-mask-image: radial-gradient(90% 90% at 78% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(90% 90% at 78% 45%, #000 15%, transparent 72%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(40px, 6vw, 72px) clamp(40px, 6vw, 64px); }
.hero-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hero-lockup img { height: 68px; width: auto; }
.hero-lockup p { color: var(--gold-2); font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.3; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); color: var(--on-dark); max-width: 12ch; letter-spacing: -0.02em; line-height: 1.08; }
.hero .lead { margin-top: 20px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--on-dark-2); max-width: 34rem; }
.hero .btn-row { margin-top: 30px; }
.display { position: relative; width: 100%; max-width: 600px; aspect-ratio: 6 / 5; margin-inline: auto; }
.display img { position: absolute; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5)); transform: rotate(var(--r)); animation: settle .9s cubic-bezier(.2, .75, .2, 1) both; animation-delay: var(--d, 0s); }
.display .p1 { width: 84%; left: 6%; top: 1%; --r: -8deg; }
.display .p2 { width: 78%; left: 20%; top: 25%; --r: 5deg; --d: .08s; }
.display .p3 { width: 68%; left: 0%; top: 50%; --r: -4deg; --d: .16s; }
.display .p4 { width: 74%; left: 25%; top: 76%; --r: 2deg; --d: .24s; }
.display .p5 { width: 27%; left: 72%; top: 49%; --r: 8deg; --d: .32s; }
@keyframes settle { from { transform: translate(48px, 10px) rotate(var(--r)); } to { transform: translate(0, 0) rotate(var(--r)); } }
.facts { background: var(--cocoa-2); color: var(--on-dark); border-top: 1px solid rgba(232, 180, 85, 0.18); }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.facts li { padding-block: 22px 24px; padding-inline: 20px; border-inline-start: 1px solid rgba(232, 180, 85, 0.2); display: grid; gap: 4px; align-content: start; }
.facts li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.facts strong { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--gold-2); line-height: 1.1; }
.facts span { color: var(--on-dark-2); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 1180px) { .facts li { padding-inline: 16px; } .facts span { font-size: 14px; } }
/* the EU organic logo (as on our flyer) next to BIO; decorative: the words say it */
.facts li.fact-organic { grid-template-columns: minmax(0, max-content) 38px; column-gap: 12px; } /* the word gets smaller (fitWords) before the logo is pushed out */
.facts li.fact-organic strong { grid-column: 1; grid-row: 1; align-self: center; }
.facts li.fact-organic span { grid-column: 1 / -1; grid-row: 2; }
.facts li.fact-organic::after { content: ""; grid-column: 2; grid-row: 1; align-self: center; width: 38px; height: 38px;
  background: url("img/eu-organic-logo.webp") center / contain no-repeat; }
@media (max-width: 860px) { .facts li.fact-organic { grid-template-columns: minmax(0, max-content) 32px; } .facts li.fact-organic::after { width: 32px; height: 32px; } }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .display { max-width: 460px; }
  .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid rgba(232, 180, 85, 0.2); }
  .facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* five facts: HALAL and BIO side by side, the last one across */
  .facts li:nth-child(even) { padding-inline-end: 0; } /* the page's own margin is enough at the edge */
}

/* ---------- brand tiles ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.brand-tile {
  --gridc: rgba(255, 255, 255, 0.07);
  grid-column: span 2; position: relative; overflow: hidden; border-radius: var(--radius-l);
  background: var(--c); color: #fff; text-decoration: none; display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  padding: 26px 26px 22px; min-height: 340px;
}
.brand-tile:nth-child(-n+2) { grid-column: span 3; min-height: 360px; }
.brand-tile h3 { font-size: clamp(2rem, 3.2vw, 2.7rem); color: #fff; }
.brand-tile p { color: rgba(255, 255, 255, 0.88); max-width: 30ch; font-size: 15.5px; line-height: 1.5; }
.brand-tile .tile-img { align-self: center; justify-self: end; width: 86%; transform: rotate(-5deg); filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.35)); transition: transform .25s ease; margin-inline-end: -4%; }
@media (hover: hover) { .brand-tile:hover .tile-img { transform: rotate(-3deg) translateY(-6px); } }
.brand-tile .tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; }
.brand-tile .tile-foot span:last-child { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.55); padding-bottom: 1px; }
.brand-tile.t-fliters { --c: var(--fliters); }
.brand-tile.t-fliters::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--fliters-2); }
.brand-tile.t-lara { --c: var(--lara); }
.brand-tile.t-bolyarka { --c: var(--bolyarka); }
.brand-tile.t-ropotamo { --c: var(--ropotamo); }
.brand-tile.t-alina { --c: var(--alina); }
.brand-tile.t-alina h3 { color: var(--gold-3); }
@media (max-width: 960px) {
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-tile, .brand-tile:nth-child(-n+2) { grid-column: span 1; min-height: 320px; }
  .brand-tile:first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .brand-tile, .brand-tile:nth-child(-n+2), .brand-tile:first-child { grid-column: span 1; min-height: 0; }
  .brand-tile .tile-img { width: 78%; }
}

/* ---------- Fliters spotlight ---------- */
.spotlight { background: var(--wafer); }
.spot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.spot-stage { --gridc: rgba(228, 86, 26, 0.16); background: var(--fliters); border-radius: var(--radius-l); padding: clamp(24px, 4vw, 40px); display: grid; gap: 4px; overflow: hidden; }
.spot-stage img { filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.5)); }
.spot-stage img:first-child { width: 92%; transform: rotate(-4deg); }
.spot-stage img:last-child { width: 92%; justify-self: end; transform: rotate(3deg); margin-top: -8%; }
.spot-text h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.spot-text > p { margin-top: 14px; color: var(--ink-2); font-size: 1.075rem; }
.claims { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.claims li { display: inline-flex; align-items: center; gap: 6px; padding-block: 7px; padding-inline: 10px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; }
.claims svg { width: 16px; height: 16px; color: var(--fliters-2); }
.mini-specs { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.mini-specs th, .mini-specs td { text-align: start; padding-block: 9px; padding-inline: 0 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.mini-specs thead th { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.spot-text .btn-row { margin-top: 26px; }
.note { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 860px) { .spot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- categories ---------- */
.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 20px; }
.cats li { display: grid; grid-template-rows: 150px auto auto auto; gap: 8px; align-content: start; }
.cats .cat-img { display: grid; place-items: center; background: radial-gradient(closest-side, var(--stage) 60%, transparent 100%); }
.cats img { max-height: 150px; width: auto; } /* the pictures carry their own soft shadow */
.cats h3 { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.cats p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.cats a { font-size: 14.5px; }
@media (max-width: 1000px) { .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cats li { grid-column: span 2; } .cats li:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 600px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cats li, .cats li:nth-child(n+4) { grid-column: span 1; } .cats li:last-child { grid-column: span 2; } .cats li { grid-template-rows: 120px auto auto auto; } .cats img { max-height: 120px; } }

/* ---------- dark band (distributors) ---------- */
.band-dark { background: var(--cocoa); color: var(--on-dark); }
.band-dark .section-head h2 { color: var(--on-dark); }
.band-dark .section-head p { color: var(--on-dark-2); }
.dist-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.ticks svg { width: 22px; height: 22px; margin-top: 2px; }
.band-dark .ticks svg { color: var(--gold-2); }
.band-dark .ticks li { color: var(--on-dark-2); }
.band-dark .ticks strong { color: var(--on-dark); font-weight: 600; }
.band-dark .btn-row { margin-top: 30px; }
.cat-preview { display: grid; justify-items: center; gap: 16px; }
.cat-pages { position: relative; width: min(100%, 340px); aspect-ratio: 1.12; }
.cat-pages button { position: absolute; width: 58%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45); }
.cat-pages button img { border-radius: 4px; }
.cat-pages button:nth-child(1) { left: 0; top: 6%; transform: rotate(-6deg); }
.cat-pages button:nth-child(2) { right: 0; top: 0; transform: rotate(5deg); }
.cat-preview p { font-size: 14px; color: var(--on-dark-2); text-align: center; }
.dl-status { min-height: 1.4em; font-size: 14px; }
@media (max-width: 860px) { .dist-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- factory ---------- */
/* the factory photo (the original photo is 800 px wide): shown at most 620 px wide, with the torn-paper edge of the
   2026 flyers (the picture carries the edge and its white fibres; the page adds the soft shadow under it) */
.factory-photo { position: relative; width: 100%; max-width: 620px; }
.factory-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(42, 27, 21, 0.2)); }
.factory-photo .photo-tag { inset-inline-start: 7%; bottom: 12%; }
[data-view="factory"] .factory-photo { margin-inline: auto; }
@media (max-width: 520px) { .factory-photo .photo-tag { font-size: 11.5px; gap: 5px; padding-block: 5px; padding-inline: 8px 10px; } .factory-photo .photo-tag svg { width: 13px; height: 13px; } }
.places.factory-places { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; border-top: 0; margin-top: clamp(28px, 4vw, 44px); }
.places.factory-places div { border-bottom: 0; border-top: 1px solid var(--line); padding-block: 14px 0; align-content: start; }
.factory-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.factory-grid h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.prose { display: grid; gap: 14px; align-content: start; color: var(--ink-2); font-size: 1.05rem; max-width: 40rem; }
.prose h2 { color: var(--ink); }
.places { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.places div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.places dt { font-weight: 600; }
.places dd { margin: 0; color: var(--ink-2); }
/* commercial centers (6 October 2026, at the owner's request): the countries in bold, and the second line of a
   country (Plovdiv, Sofia, Varna) a little indented */
.places .cc { display: block; padding-inline-start: 1em; text-indent: -1em; text-wrap: pretty; }
.places .cc strong { font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .factory-grid { grid-template-columns: minmax(0, 1fr); }
  .places.factory-places { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
  .places.factory-places div { border-top: 0; border-bottom: 1px solid var(--line); padding-block: 14px; }
}

/* ---------- trade show band ---------- */
.show-band { background: var(--maroon); color: var(--on-dark); }
.show-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center; }
.show-grid h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); color: #fff; }
.show-grid > div > p { margin-top: 10px; color: var(--gold-3); font-weight: 600; }
.show-facts { margin: 18px 0 0; display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 6px 12px; }
.show-facts div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } /* one label column, as wide as the longest label */
.show-facts dt { color: rgba(247, 238, 221, 0.75); }
.show-facts dd { margin: 0; font-weight: 600; }
.show-grid .btn-row { margin-top: 24px; }
.stand-no { text-align: center; border: 2px solid rgba(243, 217, 164, 0.6); border-radius: var(--radius-l); padding: 22px 30px; }
.stand-no span { display: block; font-size: 14px; color: var(--gold-3); font-weight: 600; }
.stand-no strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 7vw, 5.2rem); line-height: 1; color: #fff; margin: 6px 0; }
@media (max-width: 760px) { .show-grid { grid-template-columns: minmax(0, 1fr); } .stand-no { justify-self: start; } }

/* ---------- product cards ---------- */
.controls { display: grid; gap: 14px; margin-bottom: 26px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chipset .label { font-size: 14px; color: var(--ink-3); margin-inline-end: 4px; min-width: 52px; }
.chip { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; min-height: 38px; padding: 0 14px; font-size: 14.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ink-3)); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* "All brands" and "All types" (27 September 2026, at the owner's request): a reset button, not a filter, so it looks
   different: a rounded square in the maroon of the site, with a small grid, and a little more space after it */
.chip.chip-all { border: 1.5px solid var(--maroon); border-radius: 10px; color: var(--maroon); font-weight: 600; margin-inline-end: 8px; }
.chip.chip-all svg { width: 14px; height: 14px; flex: none; }
.chip.chip-all[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: #fff; }
@media (hover: hover) { .chip.chip-all:not([aria-pressed="true"]):hover { background: #FBEFEC; } }
.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.results-bar p { font-size: 14.5px; color: var(--ink-2); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; min-height: 38px; padding: 0 14px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--wafer); color: var(--ink); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 18px; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.pcard-stage { position: relative; min-width: 0; background: var(--stage); aspect-ratio: 16 / 10; border-bottom: 3px solid var(--c); }
@media (max-width: 600px) { .pcard-stage { aspect-ratio: 2 / 1; } }
.pcard-stage img { position: absolute; top: 16px; left: 18px; width: calc(100% - 36px); height: calc(100% - 32px); max-width: none; object-fit: contain; filter: var(--pack-shadow); }
.pcard-body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; grid-template-rows: auto auto auto 1fr auto auto; }
.pcard-brand { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.pcard-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.pcard h3 { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; line-height: 1.3; }
.pcard-desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.variants { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.variants li { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--wafer); color: var(--ink-2); }
.specs { margin: 6px 0 0; display: grid; grid-template-columns: auto auto auto; border: 1px solid var(--line); border-radius: 8px; font-variant-numeric: tabular-nums; }
.specs dd { white-space: nowrap; }
.specs div { display: flex; flex-direction: column; gap: 2px; padding: 9px 8px 8px; border-inline-start: 1px solid var(--line); }
.specs div:first-child { border-inline-start: 0; }
.specs dt { order: 2; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.specs dt svg { width: 15px; height: 15px; flex: none; color: var(--gold); }
.specs dd { order: 1; margin: 0; font-weight: 700; font-size: 15px; }
.spec-na { margin-top: 6px; font-size: 14px; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 8px; padding: 10px 12px; }
.pcard .add { margin-top: 6px; justify-self: start; min-height: 40px; border-radius: 8px; border: 1px solid var(--maroon); background: #fff; color: var(--maroon); font-weight: 600; font-size: 14px; padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pcard .add svg { width: 16px; height: 16px; }
.pcard .add[aria-pressed="true"] { background: var(--maroon); color: #fff; }
.pcard .extra { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 2px; }
.pcard .extra div { display: flex; gap: 6px; }
.pcard .extra dt { color: var(--ink-3); }
.pcard .extra dd { margin: 0; font-weight: 600; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; }
.spec-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.spec-table th, .spec-table td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.spec-table thead th { background: var(--wafer); font-size: 13px; font-weight: 600; color: var(--ink-2); position: sticky; top: 0; }
.spec-table td.num, .spec-table th.num { text-align: end; }
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table .pname { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.spec-table .pname img { width: 64px; height: 30px; object-fit: contain; }
.spec-table .add-sm { border: 1px solid var(--line-2); background: #fff; border-radius: 6px; min-height: 34px; padding: 0 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--maroon); }
.spec-table .add-sm[aria-pressed="true"] { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.table-hint { display: none; margin: 0 0 10px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 720px) { .table-hint { display: block; } }
.empty { padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--radius-m); text-align: center; color: var(--ink-2); }

/* ---------- brand page ---------- */
.brand-hero { --gridc: rgba(255, 255, 255, 0.07); background: var(--c); color: #fff; overflow: hidden; }
.brand-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(36px, 6vw, 72px); }
.brand-hero .crumbs, .brand-hero .crumbs a { color: rgba(255, 255, 255, 0.78); }
.brand-hero h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); margin-top: 10px; }
.brand-hero p.intro { margin-top: 16px; font-size: 1.08rem; color: rgba(255, 255, 255, 0.9); max-width: 34rem; }
.brand-hero .bfacts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.brand-hero .bfacts div { display: grid; }
.brand-hero .bfacts strong { font-size: 1.4rem; font-family: var(--display); font-weight: 600; }
.brand-hero .bfacts span { font-size: 13.5px; color: rgba(255, 255, 255, 0.78); }
.brand-hero .btn-row { margin-top: 26px; }
.brand-hero .hero-pack { width: 100%; transform: rotate(-5deg); filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.45)); }
.brand-hero.b-fliters::after { content: ""; display: block; height: 8px; background: var(--fliters-2); }
.brand-hero.b-alina h1 { color: var(--gold-3); }
.btn-on-brand { background: #fff; color: var(--ink); }
@media (hover: hover) { .btn-on-brand:hover { background: var(--paper); color: var(--ink); } }
.brand-extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.brand-extra figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px; display: grid; gap: 10px; }
.brand-extra figcaption { font-size: 14px; color: var(--ink-2); }
.other-brands { display: flex; flex-wrap: wrap; gap: 10px; }
.other-brands a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 600; }
.other-brands .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
@media (max-width: 860px) { .brand-hero .wrap { grid-template-columns: minmax(0, 1fr); } .brand-hero .hero-pack { max-width: 460px; } }
@media (max-width: 560px) { .brand-extra { grid-template-columns: minmax(0, 1fr); } }

/* ---------- generic content blocks ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: clamp(20px, 3vw, 30px); }
.panel h2, .panel h3 { font-size: 1.7rem; }
.panel h3.sans { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; }
.terms { margin: 16px 0 0; display: grid; grid-template-columns: minmax(min-content, 0.8fr) minmax(0, 1.6fr); column-gap: 16px; }
.terms div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: 12px 0; border-bottom: 1px solid var(--line); }
.terms dt { min-width: 120px; } /* the label column: at least 120 px, and never narrower than its longest word */
.terms div:last-child { border-bottom: 0; }
.terms dt { font-weight: 600; }
.terms dd { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) { .terms { grid-template-columns: minmax(0, 1fr); } .terms div { row-gap: 2px; } .terms dt { min-width: 0; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; display: grid; gap: 6px; align-content: start; }
.steps li::before { content: counter(step); font-family: var(--display); font-size: 2rem; color: var(--gold); line-height: 1; }
.steps h3 { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; }
.steps p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.page-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.page-strip button { padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 6px; overflow: hidden; cursor: zoom-in; box-shadow: 0 8px 18px rgba(42, 27, 21, 0.1); }
@media (hover: hover) { .page-strip button:hover { border-color: var(--gold); } }
@media (max-width: 600px) { .page-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cert { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; }
.cert .seal { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--gold); color: var(--maroon); }
.cert .seal svg { width: 34px; height: 34px; }
.cert .seal.seal-organic { border: 0; background: url("img/eu-organic-logo.webp") center / contain no-repeat; }
@media (max-width: 480px) { .cert { grid-template-columns: minmax(0, 1fr); gap: 14px; } .cert .seal { width: 60px; height: 60px; } } /* phones: the seal above the text, so that long words (German Gesundheitsbescheinigung) have the whole width */
.plain-list { margin: 10px 0 0; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--ink-2); }
.event { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.event .when { font-weight: 600; color: var(--maroon); }
.event .tag { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--wafer); color: var(--ink-2); white-space: nowrap; }
.event .tag.up { background: var(--maroon); color: #fff; }
@media (max-width: 600px) { .event { grid-template-columns: minmax(0, 1fr); } .event .tag { justify-self: start; } }
.stack { display: grid; gap: 18px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: 14.5px; }
.field .opt { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; padding: 10px 12px; }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--gold-2); outline-offset: 0; border-color: var(--gold); }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--maroon); }
.inq-box { border: 1px dashed var(--line-2); border-radius: 10px; padding: 14px; background: var(--paper); }
.inq-box h3, .inq-box .inq-title { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0; }
.inq-box ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.inq-box li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding-block: 6px; padding-inline: 12px 6px; }
.inq-box li button { border: 0; background: none; color: var(--maroon); font-weight: 600; font-size: 13.5px; cursor: pointer; min-height: 34px; padding: 0 8px; }
.inq-box .empty-note { margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.sent { border: 1px solid var(--line-2); background: #fff; border-radius: var(--radius-m); padding: 22px; display: grid; gap: 12px; }
.sent h2 { font-size: 1.7rem; }
.sent pre { margin: 0; white-space: pre-wrap; font: 14px/1.55 var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 14px; max-height: 280px; overflow: auto; }
.contact-card { display: grid; gap: 0; }
.contact-card > div { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.contact-card > div:first-child { padding-top: 0; }
.contact-card > div:last-child { border-bottom: 0; }
.contact-card .k { font-size: 13.5px; color: var(--ink-3); }
.contact-card .v { font-weight: 600; font-size: 1.05rem; user-select: all; font-variant-numeric: tabular-nums; }
.contact-card .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mini-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: none; }
@media (hover: hover) { .mini-btn:hover { border-color: var(--gold); color: var(--ink); } }
.mini-btn svg { width: 16px; height: 16px; }

/* ---------- EU projects ---------- */
.eu-flag { width: 96px; height: 64px; flex: none; }
.eu-head { display: flex; align-items: center; gap: 16px; }
  .eu-more { gap: 18px; align-items: start; }
  .terms dd.num { font-variant-numeric: tabular-nums; }
.eu-head p { font-weight: 600; }
.ph { color: var(--ink-3); font-style: italic; }

/* ---------- footer ---------- */
.site-footer { background: var(--cocoa); color: var(--on-dark-2); font-size: 15px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { color: var(--gold-2); text-decoration: underline; } }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 56px 36px; }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-brand .row { display: flex; gap: 12px; align-items: center; }
.foot-brand img { height: 68px; width: auto; }
.foot-brand strong { font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--on-dark); line-height: 1.2; }
.foot-brand address { font-style: normal; line-height: 1.6; }
.site-footer h2 { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--gold-2); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-bottom { border-top: 1px solid rgba(232, 180, 85, 0.18); }
.foot-bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px; font-size: 13.5px; }
.foot-bottom .eu-link { display: inline-flex; align-items: center; gap: 8px; }
.foot-bottom .eu-link svg { width: 30px; height: 20px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- lightbox (catalog pages, with a zoom to read the small print) + toast ---------- */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 720px); width: 100%; }
dialog.lightbox.photos { max-width: min(92vw, 1100px); }
dialog.lightbox::backdrop { background: rgba(20, 12, 9, 0.82); }
.lb-inner { display: grid; gap: 10px; }
.lb-stage { display: flex; justify-content: center; direction: ltr; }
.lb-stage img { display: block; width: auto; height: auto; max-width: 100%;
  max-height: min(80vh, calc(100vh - 150px)); max-height: min(80dvh, calc(100dvh - 150px));
  border-radius: 6px; background: #fff; cursor: zoom-in; -webkit-user-select: none; user-select: none; }
.lb-stage.zoomed { display: block; overflow: auto; overscroll-behavior: contain; border-radius: 6px; background: #fff; cursor: grab; }
.lb-stage.zoomed.dragging { cursor: grabbing; }
.lb-stage.zoomed img { max-width: none; max-height: none; border-radius: 0; cursor: inherit; }
.lb-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; color: #fff; font-size: 14px; }
.lb-bar .btn { min-height: 40px; padding: 0 14px; }
.lb-bar .lb-zoom svg { width: 17px; height: 17px; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 10px; font-size: 14.5px; z-index: 80; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); max-width: calc(100% - 32px); }

a, button, select, input, textarea { -webkit-tap-highlight-color: rgba(122, 18, 32, 0.12); }
@media (any-pointer: coarse) {
  .chip, .seg button, .pcard .add, .mini-btn, .spec-table .add-sm, .inq-box li button, .inq-pill, .lb-bar .btn, .other-brands a { min-height: 44px; }
  .lang-btn { min-height: 44px; }
  .spec-table .add-sm { min-width: 56px; }
  .announce a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; }
  .textlink { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-bottom .eu-link { min-height: 44px; }
  .site-footer ul { gap: 0; }
  .site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .site-footer ul li:not(:has(a)) { padding-block: 10px; }
  .announce .wrap { padding-block: 2px; }
  .check input { width: 24px; height: 24px; }
  .check { grid-template-columns: 26px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .display img { animation: none; }
  .brand-tile .tile-img, .btn { transition: none; }
}

/* =========================================================
   Version 2 additions
   ========================================================= */

/* ---------- header: menu buttons + drop-down panels ---------- */
.main-nav > ul > li { position: static; }
.main-nav .nav-btn {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  min-height: 44px; padding: 10px 10px; border: 0; border-radius: 6px; background: none;
  font-weight: 500; font-size: 15px; color: var(--ink); cursor: pointer; position: relative;
}
.nav-btn svg { width: 14px; height: 14px; transition: transform .15s ease; }
.nav-btn[aria-expanded="true"] { color: var(--maroon); background: rgba(122, 18, 32, 0.06); }
.nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-btn.is-current { color: var(--maroon); }
.nav-btn.is-current::after { content: ""; position: absolute; inset-inline: 10px 29px; bottom: 3px; height: 2px; background: var(--gold); }
@media (hover: hover) { .main-nav .nav-btn:hover { color: var(--maroon); background: rgba(122, 18, 32, 0.06); } }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2);
  box-shadow: 0 26px 40px rgba(42, 27, 21, 0.16);
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto;
}
.mega > .wrap { padding-block: 24px 28px; display: grid; gap: 24px; }
.mega-brands > .wrap { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(170px, 0.9fr); }
.mb-card { display: grid; grid-template-rows: 112px auto auto; gap: 6px; padding: 10px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.mb-card .mb-img { --gridc: rgba(255, 255, 255, 0.08); background: var(--c); border-radius: 10px; display: grid; place-items: center; padding: 12px; overflow: hidden; }
.mb-card .mb-img img { max-height: 74px; width: auto; max-width: 100%; transform: rotate(-4deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); }
.mb-card strong { font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.mb-card span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.mega-side { border-inline-start: 1px solid var(--line); padding-inline-start: 24px; display: grid; gap: 4px; align-content: start; }
.mega-side a { display: flex; align-items: center; min-height: 40px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mega-company > .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1fr); }
.mc-links { grid-column: span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; }
.mc-link { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.mc-link strong { font-weight: 600; }
.mc-link span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.mc-cat { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--wafer); border-radius: 14px; padding: 14px; }
.mc-cat img { border-radius: 4px; box-shadow: 0 8px 16px rgba(42, 27, 21, 0.18); }
.mc-cat p { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.mc-cat strong { display: block; font-weight: 600; margin-bottom: 2px; }
.mc-cat .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
@media (hover: hover) {
  .mb-card:hover, .mc-link:hover { background: var(--wafer); }
  .mega-side a:hover { color: var(--maroon); }
}

/* ---------- mobile menu (grouped) ---------- */
.mobile-menu .mm-cols { display: grid; gap: 0 32px; padding: 6px 0 16px; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-menu li a { display: flex; align-items: center; min-height: 46px; padding: 6px 2px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-menu .mm-group h2 { font: 600 13px/1.4 var(--sans); color: var(--ink-3); margin: 16px 0 2px; }
.mobile-menu .mm-group li a { padding-inline-start: 12px; font-size: 16px; }
.mobile-menu .mm-group li a .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-inline-end: 10px; }
@media (min-width: 640px) { .mobile-menu .mm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- placeholders to confirm ---------- */
.tbc { color: var(--ink-3); font-style: italic; }
.tbc-val { color: var(--ink-3); font-style: italic; border-bottom: 2px dashed var(--line-2); }

/* ---------- home: two paths ---------- */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.path { position: relative; overflow: hidden; border-radius: var(--radius-l); display: grid; }
.path-body { padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 14px; align-content: start; }
.path .who { font-weight: 600; font-size: 15px; }
.path h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.path p { max-width: 36ch; }
.path .links { display: grid; gap: 4px; margin-top: 6px; justify-items: start; }
.path-shop { background: var(--wafer); grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.path-shop .who { color: var(--maroon); }
.path-shop p { color: var(--ink-2); }
.path-shop .path-img { display: block; position: relative; min-height: 100%; }
.path-shop .path-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px 12px; }
.path-trade { --gridc: rgba(232, 180, 85, 0.1); background: var(--cocoa); color: var(--on-dark); }
.path-trade .who { color: var(--gold-2); }
.path-trade h2 { color: var(--on-dark); }
.path-trade p { color: var(--on-dark-2); }
.path-trade .textlink { color: var(--gold-3); }
.peek { margin-top: 6px; width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; background: rgba(247, 238, 221, 0.05); border-radius: 10px; overflow: hidden; }
.peek th, .peek td { padding: 9px 12px; text-align: start; border-bottom: 1px solid rgba(232, 180, 85, 0.18); }
.peek thead th { font-size: 0.893em; font-weight: 600; color: var(--gold-3); }
.peek td { color: var(--on-dark); }
.peek td.num, .peek th.num { text-align: end; white-space: nowrap; }
@media (max-width: 420px) { .peek th, .peek td { padding: 8px 7px; } .peek th.num { white-space: normal; } } /* small phones: a column heading may take two lines */
.peek tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 960px) {
  .paths { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .path-shop { grid-template-columns: minmax(0, 1fr); }
  .path-shop .path-img { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}

/* ---------- home: news and events strip ---------- */
.news-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 16px; }
.ncard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; display: grid; gap: 10px; align-content: start; }
.ncard .meta { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.ncard h3 { font-size: 1.55rem; }
.ncard p { color: var(--ink-2); font-size: 15px; }
.ncard .tag { justify-self: start; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--wafer); color: var(--ink-2); }
.ncard.featured { background: var(--maroon); border-color: var(--maroon); color: var(--on-dark); grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
.ncard.featured > * { grid-column: 1; }
.ncard.featured .meta { color: var(--gold-3); }
.ncard.featured h3 { color: #fff; }
.ncard.featured p { color: var(--on-dark-2); }
.ncard.featured .tag { background: var(--gold-2); color: var(--cocoa); }
.ncard.featured .stand { grid-column: 2; grid-row: 1 / span 5; align-self: center; text-align: center; border: 2px solid rgba(243, 217, 164, 0.55); border-radius: 16px; padding: 14px 18px; }
.ncard.featured .stand span { display: block; font-size: 13px; font-weight: 600; color: var(--gold-3); }
.ncard.featured .stand strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: #fff; margin: 4px 0; }
.section-head.row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; }
.section-head.row > div { display: grid; gap: 12px; max-width: 46rem; }
@media (max-width: 1000px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ncard.featured { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .ncard.featured { grid-template-columns: minmax(0, 1fr); }
  .ncard.featured .stand { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- brand page additions ---------- */
.brand-hero .tagline { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.35; margin-top: 10px; color: rgba(255, 255, 255, 0.95); max-width: 32ch; }
.sizes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sizes li { display: grid; justify-items: center; gap: 2px; min-width: 76px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); }
.sizes strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sizes span { font-size: 12.5px; color: var(--ink-3); }
.more-brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mbr { --gridc: rgba(255, 255, 255, 0.07); position: relative; overflow: hidden; background: var(--c); color: #fff; border-radius: 16px; padding: 18px; display: grid; gap: 10px; text-decoration: none; min-height: 170px; }
.mbr strong { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; }
.mbr img { width: 88%; justify-self: end; transform: rotate(-5deg); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35)); }
.mbr.b-alina strong { color: var(--gold-3); }
@media (hover: hover) { .mbr:hover { color: #fff; } .mbr:hover img { transform: rotate(-3deg) translateY(-4px); } }
@media (max-width: 860px) { .more-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- product cards: links ---------- */
.pcard-stage { display: block; }
.pcard h3 a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .pcard h3 a:hover { color: var(--maroon); text-decoration: underline; } .pcard-stage:hover img { transform: scale(1.03); } }
.pcard-stage img { transition: transform .2s ease; }
.pcard .card-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.pcard .card-links .add { margin-top: 0; }
.pcard .more { font-size: 14px; font-weight: 600; }
.spec-table .pname a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .spec-table .pname a:hover { color: var(--maroon); text-decoration: underline; } }

/* ---------- product detail page ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pd-stage { --gridc: rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; background: var(--c); border-radius: var(--radius-l); aspect-ratio: 5 / 4; }
.pd-stage img { position: absolute; left: 9%; top: 12%; width: 82%; height: 76%; max-width: none; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.45)); }
.pd-stage.b-fliters::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--fliters-2); }
.pd-info { display: grid; gap: 16px; align-content: start; }
.pd-info .crumbs { margin-bottom: -4px; }
.pd-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); text-decoration: none; justify-self: start; min-height: 32px; }
.pd-brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.pd-info h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.pd-info .lead { color: var(--ink-2); font-size: 1.08rem; }
.pd-specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; font-variant-numeric: tabular-nums; }
.pd-specs div { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pd-specs div:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.pd-specs svg { width: 20px; height: 20px; color: var(--gold); grid-row: span 2; margin-top: 2px; }
.pd-specs dt { font-size: 13px; color: var(--ink-3); }
.pd-specs dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.pd-specs dd.soft { font-weight: 500; color: var(--ink-2); font-size: 15px; }
.pd-note { font-size: 13.5px; color: var(--ink-3); }
.pd-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.pd-pager a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.pd-pager a:last-child { text-align: end; margin-inline-start: auto; }
.pd-more { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.pd-more > a { scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); text-decoration: none; display: grid; grid-template-rows: auto 1fr; }
.pd-more .mini-stage { position: relative; background: var(--stage); aspect-ratio: 2 / 1; border-bottom: 3px solid var(--c); }
.pd-more .mini-stage img { position: absolute; left: 12px; top: 10px; width: calc(100% - 24px); height: calc(100% - 20px); max-width: none; object-fit: contain; filter: var(--pack-shadow); }
.pd-more .mini-body { padding: 12px 14px; display: grid; gap: 2px; }
.pd-more .mini-body strong { font-weight: 600; line-height: 1.3; }
.pd-more .mini-body span { font-size: 13.5px; color: var(--ink-3); }
.pd-more > a[aria-current="page"] { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (hover: hover) { .pd-more > a:hover { border-color: var(--gold); } }
.btn[data-add][aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sticky-bar { display: none; }
@media (max-width: 1000px) { .pd { gap: 24px; } .pd-stage { aspect-ratio: 1 / 1; } }
@media (max-width: 680px) { .pd { grid-template-columns: minmax(0, 1fr); } .pd-stage { aspect-ratio: 16 / 11; } }
@media (max-width: 760px) {
  .sticky-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(251, 246, 234, 0.97); border-top: 1px solid var(--line-2); box-shadow: 0 -8px 20px rgba(42, 27, 21, 0.08);
  }
  .sticky-bar .btn { flex: 1; padding: 0 12px; }
  body.has-bar { padding-bottom: 72px; }
  body.has-bar .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body.has-bar .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- about: section links (the Milestones section was removed in version 5, at the owner's request) ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; }
.subnav button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; min-height: 40px; padding: 0 16px; font-weight: 600; font-size: 14.5px; cursor: pointer; color: var(--ink); }
@media (hover: hover) { .subnav button:hover { border-color: var(--gold); } }

/* ---------- factory ---------- */
.sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.site-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: clamp(20px, 3vw, 30px); display: grid; gap: 10px; align-content: start; }
.site-card .where { font-weight: 600; color: var(--maroon); }
.site-card h2 { font-size: 1.8rem; }
.site-card > p { color: var(--ink-2); }
@media (max-width: 860px) { .sites { grid-template-columns: minmax(0, 1fr); } }
.make-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; counter-reset: mk; }
.make-steps li { counter-increment: mk; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 14px 18px; display: grid; gap: 8px; align-content: start; }
.make-steps .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--wafer); display: grid; place-items: center; color: var(--maroon); }
.make-steps .ic svg { width: 26px; height: 26px; }
.make-steps h3 { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.make-steps h3::before { content: counter(mk) ". "; color: var(--gold); }
.make-steps p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 1100px) {
  .make-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .make-steps li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; padding: 16px; }
  .make-steps .ic { grid-row: span 2; }
}
.split-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.split-media .media { border-radius: var(--radius-l); overflow: hidden; background: var(--stage); aspect-ratio: 4 / 3; }
.split-media .media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .split-media { grid-template-columns: minmax(0, 1fr); } .split-media .media { aspect-ratio: 16 / 10; } }

/* ---------- tabs (news and events) ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); margin-bottom: 24px; overflow-x: auto; }
.tab { border: 0; background: none; min-height: 46px; padding: 0 16px; font-weight: 600; font-size: 15.5px; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.tab .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--wafer); font-size: 12px; margin-inline-start: 6px; }
.ev-list { display: grid; gap: 16px; }
.ev { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; }
.ev .when { font-weight: 600; color: var(--maroon); }
.ev .where { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.ev h2 { font-size: 1.6rem; }
.ev p { color: var(--ink-2); margin-top: 8px; }
.ev .btn-row { margin-top: 14px; }
.ev .ev-sub, .ncard .ev-sub { margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.ncard.featured .ev-sub { color: var(--gold-3); }
.ev-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; max-width: 560px; }
.ev-photos button { position: relative; display: block; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; background: var(--stage); }
.ev-photos button:nth-child(n+5) { display: none; }
.ev-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out); }
.ev-photos button:hover img { transform: scale(1.04); }
.ev-photos [data-more]::after { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(30, 14, 12, 0.55); color: #fff; font-weight: 600; font-size: 1.15rem; }
@media (max-width: 640px) { .ev { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ---------- SIAL page ---------- */
.sial-hero { --gridc: rgba(243, 217, 164, 0.1); background: var(--maroon); color: var(--on-dark); }
.sial-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center; padding-block: clamp(36px, 6vw, 64px); }
.sial-hero .crumbs, .sial-hero .crumbs a { color: rgba(247, 238, 221, 0.78); }
.sial-hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); color: #fff; margin-top: 10px; }
.sial-hero .lead { margin-top: 12px; color: var(--gold-3); font-weight: 600; }
.sial-hero .show-facts dt { color: rgba(247, 238, 221, 0.75); }
.stand-card { text-align: center; border: 2px solid rgba(243, 217, 164, 0.6); border-radius: var(--radius-l); padding: 22px 30px; }
.stand-card span { display: block; font-size: 14px; color: var(--gold-3); font-weight: 600; }
.stand-card strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: #fff; margin: 6px 0; }
@media (max-width: 760px) { .sial-hero .wrap { grid-template-columns: minmax(0, 1fr); } .stand-card { justify-self: start; } }
.at-stand { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.at-stand li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; display: grid; gap: 8px; align-content: start; }
.at-stand .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--wafer); display: grid; place-items: center; color: var(--maroon); }
.at-stand .ic svg { width: 26px; height: 26px; }
.at-stand h3 { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; }
.at-stand p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) { .at-stand { grid-template-columns: minmax(0, 1fr); } }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 14.5px; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; min-width: 70px; padding: 6px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-weight: 600; font-size: 14.5px; line-height: 1.25; cursor: pointer; text-align: center; }
.choice span small { font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice input:checked + span small { color: var(--gold-3); }
.choice input:focus-visible + span { outline: 3px solid var(--gold-2); outline-offset: 2px; }

/* ---------- FAQ ---------- */
.faq-group { display: grid; gap: 14px; }
.faq-group + .faq-group { margin-top: clamp(32px, 5vw, 48px); }
.faq-group > h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.faq summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; min-height: 56px; padding-block: 14px; padding-inline: 18px 52px; font-weight: 600; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--maroon); border-bottom: 2px solid var(--maroon); transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq details[open] summary { color: var(--maroon); }
.faq .ans { padding: 0 18px 18px; color: var(--ink-2); display: grid; gap: 10px; max-width: 48rem; }

/* ---------- contact: offices ---------- */
.offices { display: grid; gap: 12px; }
.offices .k { font-size: 13.5px; color: var(--ink-3); }
.off-country strong { display: block; font-weight: 600; margin-bottom: 2px; }
.off-country ul { list-style: none; margin: 0; margin-block-start: 4px; margin-inline-start: 3px; padding: 0; padding-inline-start: 14px; border-inline-start: 1px solid var(--line); display: grid; gap: 3px; color: var(--ink-2); font-size: 15px; }

/* ---------- contact: our locations (5 October 2026): Bulgaria, Romania and Poland, each outline filled with its flag ---------- */
.loc-section { padding-block: clamp(44px, 6.4vw, 80px); border-bottom: 1px solid var(--line); }
.loc-head { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: clamp(30px, 4.4vw, 52px); }
.loc-head .eyebrow::after { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; opacity: 0.8; }
.loc-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; }
.loc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.loc-col { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.loc-shape { position: relative; width: 100%; max-width: 300px; margin-bottom: 10px; }
.cs-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 14px rgba(42, 27, 21, 0.22)); }
.cs-edge { fill: none; stroke: rgba(42, 27, 21, 0.5); stroke-width: 1.1; stroke-linejoin: round; }
.cs-pin path { fill: var(--maroon); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.cs-pin circle { fill: #fff; }
.cs-dot { fill: #fff; stroke: var(--maroon); stroke-width: 2; }
.loc-lab { position: absolute; left: var(--x); top: var(--y); z-index: 1; white-space: nowrap; pointer-events: none; padding: 3px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.95); border: 1px solid var(--line-2); box-shadow: 0 4px 10px -6px rgba(42, 27, 21, 0.55); font: 600 11.5px/1.2 var(--sans); color: var(--ink); }
.loc-lab-pin { font-weight: 700; color: var(--maroon); }
.loc-lab[data-side="r"] { transform: translate(8px, -50%); }
.loc-lab[data-side="l"] { transform: translate(calc(-100% - 8px), -50%); }
.loc-lab[data-side="t"] { transform: translate(-50%, calc(-100% - 7px)); }
.loc-lab[data-side="b"] { transform: translate(-50%, 7px); }
.loc-lab-pin[data-side="r"] { transform: translate(15px, -50%); }
.loc-col h3 { font-size: clamp(1.2rem, 1.75vw, 1.45rem); }
.loc-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 6px; }
.loc-role { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--wafer); color: var(--ink-2); font: 600 11.5px/1.25 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.loc-role svg { width: 15px; height: 15px; flex: none; }
.loc-role.loc-hq { background: var(--maroon); color: #fff; }
.loc-role.loc-more { background: #fff; border: 1px solid var(--line-2); color: var(--maroon); }
.loc-role.loc-more span { color: var(--ink-2); }
.loc-card { flex: 1; width: 100%; display: grid; gap: 12px; align-content: start; justify-items: start; text-align: start; padding: 18px 20px; border-radius: var(--radius-m); background: #fff; border: 1px solid var(--line); }
.loc-co { margin: 0; font-weight: 600; }
.loc-co + .loc-addr { margin-top: -12px; }
.loc-addr { margin: 0; line-height: 1.55; }
.loc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.loc-lines li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.loc-lines li > svg { width: 17px; height: 17px; flex: none; color: var(--gold); }
.loc-v { font-weight: 600; font-variant-numeric: tabular-nums; user-select: all; }
.loc-act { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 7px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-3); cursor: pointer; text-decoration: none; }
@media (hover: hover) { .loc-act:hover { border-color: var(--gold); color: var(--ink); } }
.loc-act svg { width: 15px; height: 15px; }
.loc-map { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.loc-map svg { width: 16px; height: 16px; }
@media (hover: hover) { .loc-map:hover { text-decoration: underline; } }
.office-brand { white-space: nowrap; }
@media (max-width: 859px) { .loc-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 520px; margin-inline: auto; } .loc-shape { max-width: 320px; } }
@media (min-width: 860px) {  /* the headings, labels and cards of the three columns line up */
  .loc-grid { grid-template-rows: auto auto auto 1fr; row-gap: 10px; }
  .loc-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 10px; justify-items: center; align-items: start; }
  .loc-col .loc-card { align-self: stretch; }
}

/* ---------- footer additions ---------- */
.foot-grid { grid-template-columns: minmax(0, 1.35fr) repeat(5, minmax(0, 1fr)); }
.foot-brand .btn { justify-self: start; margin-top: 4px; }
/* commercial centers: each country with its cities one under the other, as on the contact page (6 October 2026; a
   line of city names split the names at the end of a line) */
.fo-country + .fo-country { margin-top: 12px; }
.fo-country strong { display: block; color: var(--on-dark); font-weight: 600; line-height: 1.4; }
.site-footer .fo-country ul { gap: 3px; margin-top: 5px; margin-inline-start: 2px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(232, 180, 85, 0.32); }
.site-footer .fo-country li { padding-block: 0; line-height: 1.4; }
.foot-brand strong, .site-footer h2 { text-wrap: balance; } /* two even lines, broken between words */
.site-footer li { text-wrap: balance; } /* a two-line link in two even lines, not one word alone on the second */
.foot-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-badges span { font-size: 12.5px; font-weight: 600; color: var(--gold-3); border: 1px solid rgba(232, 180, 85, 0.35); border-radius: 14px; padding: 4px 10px; text-wrap: balance; } /* a long label (Arabic) takes two even lines in a rounded box */
.foot-badges span.organic { display: inline-flex; align-items: center; gap: 6px; padding-inline-start: 4px; }
.foot-badges span.organic::before { content: ""; width: 18px; height: 18px; flex: none; background: url("img/eu-organic-logo.webp") center / contain no-repeat; }
/* Below 1280 px six columns are too narrow for the longer languages (6 October 2026): the company block goes on top,
   with the five lists in one row down to 1024 px, then in three and two columns. Where there is room, the commercial
   centers take two columns: Bulgaria in the first, Romania and Poland in the second. */
@media (max-width: 1279px) { .foot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-offices { grid-column: span 2; } }
@media (max-width: 640px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-offices { grid-column: 1 / -1; } }
@media (max-width: 380px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) {
  .fo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; }
  .fo-list .fo-country:first-child { grid-row: span 2; }
  .fo-list .fo-country + .fo-country { margin-top: 0; }
  .fo-list .fo-country:last-child { margin-top: 12px; }
}
/* the lists of one row start on the same line, below the tallest heading of that row */
@supports (grid-template-rows: subgrid) {
  .foot-grid { row-gap: 0; padding-bottom: 4px; }
  .foot-grid > div:not(.foot-brand) { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; margin-bottom: 32px; }
  .foot-grid > div:not(.foot-brand) > * { align-self: start; } /* each list only as tall as its items */
  .foot-brand { margin-bottom: 32px; }
}
@media (min-width: 1280px) { .foot-grid { grid-template-rows: auto 1fr; } .foot-brand { grid-row: span 2; } }

/* ---------- back to top ---------- */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 55; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px rgba(42, 27, 21, 0.18); }
.to-top svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .nav-btn svg, .pcard-stage img, .faq summary::after, .mbr img { transition: none; }
}
@media (any-pointer: coarse) {
  .subnav button, .mega-side a { min-height: 44px; }
  .pd-brand { min-height: 44px; }
  .pcard .more { display: inline-flex; align-items: center; min-height: 44px; }
}

.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps-4 { grid-template-columns: minmax(0, 1fr); } }
.pd-specs div:nth-last-child(-n+2) { border-bottom: 0; }
.pd-info { container: pdinfo / inline-size; }
@container pdinfo (max-width: 349px) { /* a narrow column: the figures one under the other, so that long labels (Confezionamento) fit */
  .pd-specs { grid-template-columns: minmax(0, 1fr); }
  .pd-specs div:nth-child(odd) { border-inline-end: 0; }
  .pd-specs div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* ---------- version 3 refinements ---------- */
.site-header { transition: box-shadow .2s ease, border-color .2s ease; }
.site-header.scrolled { box-shadow: 0 10px 28px rgba(42, 27, 21, 0.09); border-bottom-color: transparent; }
.display::before { content: ""; position: absolute; left: 4%; right: 0; top: 4%; bottom: 0; background: radial-gradient(closest-side, rgba(217, 169, 79, 0.2), rgba(217, 169, 79, 0) 72%); pointer-events: none; }
.display img { z-index: 1; }
.hero-dl { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 44px; color: var(--gold-3); font-weight: 600; font-size: 15px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero-dl svg { width: 18px; height: 18px; }
@media (hover: hover) { .hero-dl:hover { color: #fff; } }
.hero .dl-status { color: var(--on-dark-2); font-size: 14px; min-height: 1.2em; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view-in { animation: viewIn .3s ease both; }
.cta-band { background: var(--wafer); border-top: 1px solid var(--line); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding-block: clamp(48px, 7vw, 76px); }
.cta-band h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.cta-band p { color: var(--ink-2); margin-top: 10px; max-width: 40rem; font-size: 1.05rem; }
.cta-band .btn-row { justify-content: flex-end; }
@media (max-width: 900px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr); } .cta-band .btn-row { justify-content: flex-start; } }
.ph { color: var(--ink-3); font-style: italic; }
.legal { max-width: 46rem; display: grid; gap: 28px; }
.legal section { display: grid; gap: 10px; }
.legal h2 { font-size: 1.6rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .view-in { animation: none; } .site-header { transition: none; } }
.news-grid.even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .news-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .news-grid.even { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .announce, .site-header, .cta-band, .site-footer, .sticky-bar, .to-top, .toast, .mega, .mobile-menu, .btn, .btn-row, .card-links, .skip, .lang-switch, .lang-note, .subnav, .tabs, .pd-pager, .pd-more, .hero-dl, .display { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hero, .band-dark, .brand-hero, .sial-hero, .path-trade, .facts, .spot-stage, .pd-stage, .mb-img, .brand-tile { background: #fff !important; }
  .hero *, .band-dark *, .brand-hero *, .sial-hero *, .path-trade *, .facts * { color: #000 !important; }
  .wafer-grid::before { display: none !important; }
  a { color: #000; text-decoration: none; }
  .section { padding-block: 14pt; }
  .pcard, .panel, .pd-specs, .ev, .ncard { break-inside: avoid; }
}

/* =========================================================
   Version 4: finish (type, light, depth and motion)
   ========================================================= */
:root {
  --bronze: #8A5B17;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);
  --shadow-card: 0 1px 2px rgba(42, 27, 21, 0.05), 0 16px 36px -24px rgba(42, 27, 21, 0.34);
  --shadow-lift: 0 2px 6px rgba(42, 27, 21, 0.06), 0 30px 56px -28px rgba(42, 27, 21, 0.48);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::selection { background: var(--gold-3); color: var(--cocoa); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.spot-text .eyebrow { margin-bottom: 14px; }

/* ---------- type ---------- */
h1, h2 { font-weight: 500; }
.section-head h2, .page-head h1, .spot-text h2, .factory-grid h2, .cta-band h2, .path h2 { letter-spacing: -0.02em; }
.section-head h2 { font-size: clamp(2.1rem, 3.9vw, 3.15rem); line-height: 1.08; }
.page-head h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.04; }
.brand-tile h3, .mbr strong, .stand-card strong, .stand-no strong, .ncard.featured .stand strong, .facts strong { font-weight: 500; }
.accent { font-style: italic; }
.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font: 600 12.5px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze);
}
.eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; opacity: 0.8; }
.band-dark .eyebrow, .path-trade .eyebrow, .hero .eyebrow { color: var(--gold-2); }
.path .who.eyebrow { font-size: 12.5px; }
.section-head { gap: 14px; }
.section-head .eyebrow + h2 { margin-top: 2px; }

/* ---------- links and buttons ---------- */
.textlink {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: color .25s ease, text-decoration-color .25s ease;
}
.textlink:not([data-download])::after, .brand-tile .tile-foot span:last-child::after {
  content: ""; flex: none; width: 16px; height: 10px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease-out);
}
@media (hover: hover) {
  .textlink:hover { text-decoration-color: currentColor; }
  .textlink:hover::after, .brand-tile:hover .tile-foot span:last-child::after { transform: translateX(4px); }
}
.btn {
  min-height: 48px; padding: 0 24px; border-width: 1px; border-radius: 10px; letter-spacing: 0.005em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(122, 18, 32, 0.6); }
  .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(217, 169, 79, 0.7); }
  .btn-on-brand:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.45); }
}
.btn-outline-light { border-color: rgba(247, 238, 221, 0.45); }

/* ---------- header ---------- */
.site-header { background: rgba(251, 246, 234, 0.88); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
.main-nav > ul > li > a, .main-nav .nav-btn, .nav-btn[aria-expanded="true"] { background: none; }
@media (hover: hover) { .main-nav > ul > li > a:hover, .main-nav .nav-btn:hover { background: none; } }
.main-nav > ul > li > a::after, .main-nav .nav-btn::after {
  content: ""; position: absolute; inset-inline: 10px; bottom: 4px; height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease-out);
}
.main-nav .nav-btn::after { inset-inline-end: 29px; }
/* eight items in the top menu: on large screens the header uses a wider column than the page, and the items sit a
   little closer; when they still do not fit, the menu folds into the Menu button (fitHeader) */
.site-header .header-inner { max-width: 1480px; }
.main-nav > ul > li > a, .main-nav .nav-btn { padding-inline: 8px; font-size: 14.5px; }
.main-nav > ul > li > a::after, .main-nav .nav-btn::after, .main-nav > ul > li > a[aria-current="page"]::after { inset-inline: 8px; }
.main-nav .nav-btn::after { inset-inline-end: 27px; }
.nav-tight .main-nav > ul > li > a, .nav-tight .main-nav .nav-btn { padding-inline: 6px; font-size: 14px; }
.nav-tight .main-nav > ul > li > a::after, .nav-tight .main-nav .nav-btn::after, .nav-tight .main-nav > ul > li > a[aria-current="page"]::after { inset-inline: 6px; }
.nav-tight .main-nav .nav-btn::after { inset-inline-end: 25px; }
.main-nav > ul > li > a[aria-current="page"]::after, .main-nav .nav-btn.is-current::after, .nav-btn[aria-expanded="true"]::after { transform: scaleX(1); }
@media (hover: hover) { .main-nav > ul > li > a:hover::after, .main-nav .nav-btn:hover::after { transform: scaleX(1); } }
/* The product e-catalog and Contact (6 October 2026, at the owner's request): always shown as tabs that stand out, with
   a gold border, a light gold ground and bold maroon words; the e-catalog is the first item of the menu. When the menu
   folds into the Menu button (tablets, phones), the e-catalog tab stays in the header (.cat-btn), so the catalog is
   one tap away on every page; on narrow phones it shows a shorter name, then only its icon (fitHeader). */
.main-nav ul { align-items: center; }
.main-nav > ul > li > a.nav-hl, .cat-btn { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1.5px solid var(--gold); border-radius: 9px;
  background: var(--wafer); color: var(--maroon); font-weight: 700; white-space: nowrap; text-decoration: none; }
.main-nav > ul > li > a.nav-hl::after { display: none; }
.main-nav > ul > li:first-child > a.nav-hl { margin-inline-end: 6px; }
.main-nav > ul > li:last-child > a.nav-hl { margin-inline-start: 6px; }
.nav-tight .main-nav > ul > li > a.nav-hl { padding-inline: 9px; font-size: 14px; }
.cat-ic { width: 14px; height: 14px; flex: none; }
@media (hover: hover) { .main-nav > ul > li > a.nav-hl:hover, .cat-btn:hover { background: #EBD3A2; border-color: var(--maroon); color: var(--maroon); } }
.main-nav > ul > li > a.nav-hl[aria-current="page"], .cat-btn[aria-current="page"] { border-color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon); }
.cat-btn { display: none; min-height: 40px; font-size: 14.5px; }
.cat-btn .cat-short { display: none; }
@media (max-width: 1120px) { .cat-btn { display: flex; } }
.nav-collapsed .cat-btn { display: flex; }
@media (any-pointer: coarse) { .cat-btn { min-height: 44px; } }
.cat-compact .cat-btn .cat-long { display: none; }
.cat-compact .cat-btn .cat-short { display: inline; }
.cat-mono .cat-btn { width: 44px; padding: 0; justify-content: center; }
.cat-mono .cat-btn .cat-short { display: none; }
.cat-mono .cat-btn .cat-long { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cat-mono .cat-btn .cat-ic { width: 17px; height: 17px; }
.mobile-menu li a.mm-hl { gap: 10px; margin-block: 8px; padding: 8px 14px; border: 1.5px solid var(--gold); border-radius: 10px; background: var(--wafer); color: var(--maroon); font-weight: 700; }
.mobile-menu li a.mm-hl .cat-ic { width: 16px; height: 16px; }
.mega:not([hidden]) { animation: megaIn .35s var(--ease-out); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mb-card .mb-img img { transition: transform .5s var(--ease-out); }
@media (hover: hover) { .mb-card:hover .mb-img img { transform: rotate(-2deg) translateY(-3px) scale(1.04); } }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(62% 78% at 76% 40%, rgba(92, 58, 36, 0.55), rgba(92, 58, 36, 0) 70%),
    radial-gradient(80% 60% at 0% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 62%),
    var(--cocoa);
}
.hero h1 { font-size: clamp(2.7rem, 6vw, 5.05rem); line-height: 1.03; letter-spacing: -0.028em; max-width: 11.5ch; }
.hero h1 .accent { color: var(--gold-2); font-weight: 500; }
.hero .lead { margin-top: 24px; line-height: 1.65; }
.hero .btn-row { margin-top: 34px; }
.display::before {
  left: -8%; right: -8%; top: -10%; bottom: -8%;
  background: radial-gradient(closest-side, rgba(217, 169, 79, 0.28), rgba(217, 169, 79, 0.09) 52%, rgba(217, 169, 79, 0) 76%);
  animation: breathe 9s ease-in-out infinite alternate;
}
.display::after { content: ""; position: absolute; left: 10%; right: 4%; bottom: -5%; height: 15%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); filter: blur(8px); pointer-events: none; }
@keyframes breathe { from { opacity: 0.72; transform: scale(0.97); } to { opacity: 1; transform: scale(1.03); } }
.display img {
  transform: translate3d(calc(var(--mx, 0) * var(--z, 10px)), calc(var(--my, 0) * var(--z, 10px)), 0) rotate(var(--r));
  animation: settle 1.1s var(--ease-out) var(--d, 0s) backwards, float var(--fd, 8s) ease-in-out calc(var(--d, 0s) + 1.1s) infinite;
  transition: transform 1.4s var(--ease-out);
}
.display .p1 { --z: 6px; --fd: 9.5s; }
.display .p2 { --z: 9px; --fd: 8s; }
.display .p3 { --z: 13px; --fd: 8.8s; }
.display .p4 { --z: 17px; --fd: 7.4s; }
.display .p5 { --z: 24px; --fd: 6.8s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.facts { background: linear-gradient(180deg, #33221A, var(--cocoa-2)); }
.facts strong { letter-spacing: -0.01em; }
.facts span { letter-spacing: 0.005em; }

/* ---------- home: two paths ---------- */
.path { box-shadow: var(--shadow-card); }
.path-trade { box-shadow: var(--shadow-lift); }
.path-shop .path-img img { transition: transform 1.6s var(--ease-out); }
@media (hover: hover) { .path-shop:hover .path-img img { transform: scale(1.045); } }
.path .links { gap: 8px; }
.path .links .btn { margin-bottom: 6px; }

/* ---------- brand tiles ---------- */
.brand-tile {
  background: radial-gradient(110% 95% at 100% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 56%), var(--c);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 22px 44px -30px rgba(42, 27, 21, 0.55);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.brand-tile > :not(.glow) { position: relative; z-index: 1; }
.brand-tile .glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(460px circle at var(--sx, 70%) var(--sy, 30%), rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 62%);
  transition: opacity .5s ease;
}
.brand-tile .tile-img { transition: transform .8s var(--ease-out), filter .8s var(--ease-out); }
@media (hover: hover) {
  .brand-tile:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 34px 64px -30px rgba(42, 27, 21, 0.62); }
  .brand-tile:hover .glow { opacity: 1; }
  .brand-tile:hover .tile-img { transform: rotate(-2.5deg) translateY(-10px) scale(1.03); filter: drop-shadow(0 26px 22px rgba(0, 0, 0, 0.36)); }
}
.brand-tile .tile-foot span:last-child { border-bottom-color: rgba(255, 255, 255, 0.4); gap: 9px; }

/* ---------- Fliters spotlight ---------- */
.spot-stage { background: radial-gradient(75% 70% at 50% 42%, #342B26, var(--fliters) 72%); box-shadow: var(--shadow-lift); }
.spot-stage img { animation: float 9s ease-in-out infinite; }
.spot-stage img:last-child { animation-duration: 7.6s; animation-delay: -3s; }
.claims li { border-color: var(--line); box-shadow: 0 1px 2px rgba(42, 27, 21, 0.05); }

/* ---------- categories ---------- */
.cats .cat-img { background: radial-gradient(closest-side, #F4E5C8 0%, rgba(244, 229, 200, 0.6) 55%, rgba(244, 229, 200, 0) 100%); }
.cats img { transition: transform .7s var(--ease-out); }
.cats h3 { font-family: var(--display); font-weight: 500; font-size: 1.32rem; line-height: 1.2; letter-spacing: -0.01em; }
@media (hover: hover) { .cats li:hover img { transform: scale(1.05); } }

/* ---------- factory photo ---------- */
.photo-tag {
  position: absolute; z-index: 1; inset-inline-start: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px;
  padding-block: 7px; padding-inline: 11px 14px; border-radius: 999px; background: rgba(42, 27, 21, 0.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.photo-tag svg { width: 16px; height: 16px; color: var(--gold-2); }
.places { border-top-color: var(--line); }
.places div { border-bottom-color: var(--line); }

/* ---------- distributors band ---------- */
.band-dark { background: radial-gradient(60% 80% at 85% 50%, rgba(92, 58, 36, 0.45), rgba(92, 58, 36, 0) 70%), var(--cocoa); }
.cat-pages button { transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
@media (hover: hover) {
  .cat-pages:hover button:nth-child(1) { transform: rotate(-9deg) translate(-12px, 6px); }
  .cat-pages:hover button:nth-child(2) { transform: rotate(7deg) translate(10px, -8px); box-shadow: 0 26px 40px rgba(0, 0, 0, 0.5); }
}

/* ---------- cards: news, panels, product cards ---------- */
.ncard { border-color: transparent; border-radius: 16px; box-shadow: var(--shadow-card); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.ncard .tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px 4px; }
.ncard.featured { box-shadow: 0 22px 44px -30px rgba(122, 18, 32, 0.55); background: radial-gradient(90% 90% at 100% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%), var(--maroon); }
@media (hover: hover) { .ncard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .ncard.featured:hover { box-shadow: 0 30px 56px -30px rgba(122, 18, 32, 0.7); } }
.pcard { border-color: transparent; border-radius: 16px; box-shadow: var(--shadow-card); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.pcard-stage { background: radial-gradient(78% 82% at 50% 40%, #FFF9EE 0%, var(--stage) 74%); }
.pcard-stage img { transition: transform .7s var(--ease-out); }
@media (hover: hover) {
  .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .pcard:hover .pcard-stage img, .pcard-stage:hover img { transform: scale(1.045) rotate(-1.5deg); }
}
.pcard h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.005em; }
.pcard-brand { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.specs { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; }
.specs div { padding: 10px 8px 9px; }
.specs div:first-child { padding-inline-start: 0; }
.pcard .add { border-radius: 999px; transition: background-color .25s ease, color .25s ease; }
@media (hover: hover) { .pcard .add:hover { background: rgba(122, 18, 32, 0.06); } .pcard .add[aria-pressed="true"]:hover { background: var(--maroon-2); } }
.panel, .site-card, .steps li, .at-stand li, .make-steps li, .ev { border-color: transparent; box-shadow: var(--shadow-card); }
.faq details { border-color: transparent; box-shadow: var(--shadow-card); }
.sizes li { border-color: transparent; box-shadow: var(--shadow-card); }
.mbr { background: radial-gradient(110% 95% at 100% 0%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 56%), var(--c); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.mbr img { transition: transform .7s var(--ease-out); }
@media (hover: hover) { .mbr:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } }
.pd-more > a { border-color: transparent; box-shadow: var(--shadow-card); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
@media (hover: hover) { .pd-more > a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } }
.page-strip button { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
@media (hover: hover) { .page-strip button:hover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: 0 22px 36px -18px rgba(42, 27, 21, 0.45); } }

/* ---------- inner page heads ---------- */
.page-head { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(55% 130% at 100% 0%, #F8ECD2 0%, rgba(248, 236, 210, 0) 62%), var(--wafer); }
.page-head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-inline-end: max(-30px, calc((100% - var(--wrap)) / 2 + 12px)); top: 50%; width: clamp(160px, 18vw, 250px); aspect-ratio: 520 / 589;
  transform: translateY(-50%) rotate(-7deg); background: var(--gold); opacity: 0.09;
  -webkit-mask: url("img/monogram-mask.webp") center / contain no-repeat; mask: url("img/monogram-mask.webp") center / contain no-repeat;
}
@media (max-width: 700px) { .page-head::after { width: 170px; inset-inline-end: -48px; opacity: 0.07; } }
.crumbs { letter-spacing: 0.01em; }

/* ---------- brand and product pages ---------- */
.brand-hero { background: radial-gradient(62% 85% at 76% 46%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 66%), var(--c); }
.brand-hero h1 { font-weight: 500; letter-spacing: -0.03em; }
.brand-hero .hero-pack {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-5deg);
  transition: transform 1s var(--ease-out); animation: float 8.5s ease-in-out infinite;
}
.bh-stage { position: relative; display: grid; align-items: center; justify-items: center; padding-block: 4% 0; }
.bh-stage .hero-pack { position: relative; z-index: 1; margin-top: 16%; }
.bh-stage .bh-back {
  position: absolute; z-index: 0; top: 0; inset-inline-end: 3%; width: 70%; max-width: none;
  transform: perspective(1100px) rotateX(calc(var(--rx, 0deg) * 0.6)) rotateY(calc(var(--ry, 0deg) * 0.6)) rotate(8deg);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.35)) brightness(0.94);
  transition: transform 1s var(--ease-out); animation: float 10s ease-in-out -3s infinite;
}
@media (max-width: 860px) { .bh-stage { max-width: 460px; width: 100%; justify-self: center; } }
.pd-stage { background: radial-gradient(70% 72% at 50% 46%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 68%), var(--c); box-shadow: var(--shadow-lift); }
.pd-stage img {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-4deg);
  transition: transform 1s var(--ease-out); animation: float 8.5s ease-in-out infinite;
}
.pd-specs { border-color: transparent; box-shadow: var(--shadow-card); }

/* ---------- SIAL, CTA band, footer ---------- */
.sial-hero { background: radial-gradient(60% 90% at 85% 40%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 65%), var(--maroon); }
.cta-band { background: radial-gradient(55% 140% at 100% 100%, #EBD6AE 0%, rgba(235, 214, 174, 0) 62%), var(--wafer); }
.cta-band h2 .accent { color: var(--maroon); }
.site-footer h2 { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; line-height: 1.3; }

.to-top { width: 46px; height: 46px; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: var(--line); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
@media (hover: hover) { .to-top:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42, 27, 21, 0.22); } }

/* ---------- motion: page change and reveal on scroll ---------- */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view-in { animation: viewIn .55s var(--ease-out) both; }
.rv { opacity: 0.35; transform: translateY(26px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--rd, 0s); }
.rv.rv-in { opacity: 1; transform: none; }
.split-media .media.rv img, .path.rv .path-img img { transform: scale(1.07); transition: transform 1.8s var(--ease-out); }
.split-media .media.rv.rv-in img, .path.rv.rv-in .path-img img { transform: none; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .4s var(--ease-out), content-visibility .4s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .display img, .display::before, .spot-stage img, .brand-hero .hero-pack, .bh-stage .bh-back, .pd-stage img, .mega:not([hidden]), .view-in { animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .brand-tile, .brand-tile .tile-img, .pcard, .ncard, .mbr, .cats img, .cat-pages button, .textlink::after, .main-nav > ul > li > a::after, .main-nav .nav-btn::after { transition: none !important; }
  .faq details::details-content { transition: none !important; }
}
@media print {
  .rv { opacity: 1 !important; transform: none !important; }
  .page-head::after, .photo-tag, .glow { display: none !important; }
}

/* =========================================================
   Languages: menu, draft notice, scripts and right-to-left layout
   ========================================================= */
.lang-switch { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding-block: 0; padding-inline: 10px 9px;
  border: 1px solid var(--line-2); border-radius: 8px; background: rgba(255, 255, 255, 0.55); cursor: pointer;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink);
  transition: border-color .25s ease, background-color .25s ease;
}
.lang-btn svg { width: 17px; height: 17px; flex: none; color: var(--ink-2); }
.lang-btn .chev { width: 12px; height: 12px; color: var(--ink-3); transition: transform .3s var(--ease-out); }
.lang-btn[aria-expanded="true"] { border-color: var(--gold); background: #fff; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (hover: hover) { .lang-btn:hover { border-color: var(--gold); background: #fff; } }
.lang-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 70; width: 248px; max-width: calc(100vw - 32px);
  padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift);
  /* ten languages since 27 September 2026: on short screens the list scrolls inside the menu */
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
}
.lang-menu:not([hidden]) { animation: megaIn .3s var(--ease-out); }
.lang-menu .lm-title { margin: 0; padding: 8px 10px 6px; font: 600 11.5px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.lang-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lang-list :is(button, a) {
  width: 100%; display: grid; grid-template-columns: 16px 20px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 1px;
  min-height: 42px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); text-align: start; text-decoration: none;
}
.lang-list :is(button, a) svg { width: 16px; height: 16px; color: var(--maroon); visibility: hidden; }
.lang-list :is(button, a)[aria-current="true"] { background: var(--wafer); font-weight: 600; }
.lang-list :is(button, a)[aria-current="true"] svg { visibility: visible; }
.lang-list .ln { text-align: left; } /* names line up in one column, whatever their own direction */
html[dir="rtl"] .lang-list .ln { text-align: right; }
.lang-list .lc { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-3); }
.lang-list .ls { grid-column: 3 / -1; font-size: 12px; font-weight: 500; color: var(--ink-3); }
@media (hover: hover) { .lang-list :is(button, a):hover { background: var(--wafer); } }
.mm-lang h2 { margin-top: 20px; }
.mm-langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 6px; }
.mm-langs :is(button, a), .fl-list :is(button, a) { gap: 8px; }
.mm-langs .flag, .fl-list .flag { width: 18px; height: 13.5px; }
/* language flags (25 September 2026, at the owner's request): English with the flag of the United Kingdom, Arabic with
   the flag of the United Arab Emirates, Spanish with the flag of Spain (one flag for a language spoken in many
   countries). Turkish, Spanish and Italian added on 27 September 2026. */
.flag { display: inline-block; flex: none; width: 20px; height: 15px; border-radius: 2px; background: #DDD center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(40, 20, 10, 0.16); vertical-align: -2px; }
.flag[data-flag="en"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='xMidYMid slice'%3E%3CclipPath id='s'%3E%3Cpath d='M0,0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0,0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); }
.flag[data-flag="bg"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0h5v1H0z'/%3E%3Cpath fill='%2300966E' d='M0 1h5v1H0z'/%3E%3Cpath fill='%23D62612' d='M0 2h5v1H0z'/%3E%3C/svg%3E"); }
.flag[data-flag="ro"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Cpath fill='%23002B7F' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23FCD116' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23CE1126' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
.flag[data-flag="el"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='%230D5EAF' d='M0 0h27v18H0z'/%3E%3Cpath stroke='%23fff' stroke-width='2' d='M10 3h17M10 7h17M0 11h27M0 15h27'/%3E%3Cpath fill='%230D5EAF' d='M0 0h10v10H0z'/%3E%3Cpath stroke='%23fff' stroke-width='2' d='M5 0v10M0 5h10'/%3E%3C/svg%3E"); }
.flag[data-flag="de"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' preserveAspectRatio='none'%3E%3Cpath d='M0 0h5v1H0z'/%3E%3Cpath fill='%23DD0000' d='M0 1h5v1H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E"); }
.flag[data-flag="pl"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0h8v2.5H0z'/%3E%3Cpath fill='%23DC143C' d='M0 2.5h8V5H0z'/%3E%3C/svg%3E"); }
.flag[data-flag="tr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30000 90000 60000' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='%23E30A17' d='M0-30000h90000v60000H0z'/%3E%3Cpath fill='%23fff' d='M41750 0l13568-4408-8386 11541V-7133l8386 11541zm925 8021a15000 15000 0 1 1 0-16042 12000 12000 0 1 0 0 16042z'/%3E%3C/svg%3E"); }
.flag[data-flag="es"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Cpath fill='%23AA151B' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23F1BF00' d='M0 .5h3v1H0z'/%3E%3C/svg%3E"); }
.flag[data-flag="it"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2' preserveAspectRatio='none'%3E%3Cpath fill='%23009246' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23CE2B37' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
.flag[data-flag="ar"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6' preserveAspectRatio='none'%3E%3Cpath fill='%2300732F' d='M0 0h12v2H0z'/%3E%3Cpath fill='%23fff' d='M0 2h12v2H0z'/%3E%3Cpath d='M0 4h12v2H0z'/%3E%3Cpath fill='%23FF0000' d='M0 0h3v6H0z'/%3E%3C/svg%3E"); }

.mm-langs :is(button, a) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer; }
.mm-langs :is(button, a)[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* the language button: globe in the brand colour and the language's own name; only the code when space is short */
.lang-btn { gap: 7px; min-height: 42px; padding-inline: 11px 10px; font-size: 14.5px; letter-spacing: 0; }
.lang-btn .lang-code { display: none; font-size: 13.5px; letter-spacing: 0.06em; }
.lang-compact .lang-btn .lang-name { display: none; }
.lang-compact .lang-btn .lang-code { display: inline; }
@media (max-width: 520px) {
  .lang-btn { gap: 5px; padding-inline: 9px 8px; }
  .lang-btn .lang-name { display: none; }
  .lang-btn .lang-code { display: inline; }
}
@media (max-width: 350px) { .lang-btn .chev { display: none; } .brandmark span { font-size: 0.96rem; } }
/* Phones once the inquiry list has products (28 September 2026): the count in the header made it wider than the screen.
   fitHeader() adds these one at a time until the header fits: smaller header buttons, then the company name on two
   lines, then only the monogram (the name stays for screen readers). */
.hdr-tight .header-tools { gap: 6px; }
.hdr-tight .menu-btn { padding: 0; justify-content: center; }
.hdr-tight .menu-btn span, .brand-mono .brandmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hdr-tight .lang-btn { gap: 5px; padding-inline: 8px 7px; }
.hdr-tight .lang-btn .chev { display: none; }
.hdr-tight .inq-pill { gap: 4px; padding: 0 8px; }
.brand-stack .brandmark span { width: min-content; line-height: 1.04; overflow-wrap: normal; } /* one word per line, never split */
/* every language, listed in the footer of every page */
.foot-langs { border-top: 1px solid rgba(232, 180, 85, 0.18); }
.foot-langs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 18px; }
.foot-langs h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 14px/1.3 var(--sans); color: var(--gold-2); }
.foot-langs h2 svg { width: 19px; height: 19px; }
.fl-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-list :is(button, a) { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(247, 238, 221, 0.26); border-radius: 999px; background: none; color: var(--on-dark); font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; }
.fl-list :is(button, a)[aria-current="true"] { background: var(--on-dark); border-color: var(--on-dark); color: var(--cocoa); font-weight: 600; }
@media (hover: hover) { .fl-list :is(button, a):not([aria-current="true"]):hover { border-color: var(--gold-2); color: #fff; } }
@media (any-pointer: coarse) { .fl-list :is(button, a) { min-height: 44px; } }
/* offer of the visitor's own language (from the browser settings), until they choose or close it */
.lang-offer { background: var(--cocoa); color: var(--on-dark); font-size: 14px; }
.lang-offer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding-block: 8px; text-align: center; }
.lang-offer p { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.lang-offer p svg { width: 18px; height: 18px; flex: none; color: var(--gold-2); }
.lang-offer .lo-go { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--gold-2); color: var(--cocoa); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.lang-offer .lo-close { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(247, 238, 221, 0.3); border-radius: 999px; background: none; color: var(--on-dark); cursor: pointer; }
.lang-offer .lo-close svg { width: 14px; height: 14px; }
@media (any-pointer: coarse) { .lang-offer .lo-go { min-height: 44px; } .lang-offer .lo-close { width: 44px; height: 44px; } }
.lang-note { background: var(--gold-3); color: var(--cocoa); font-size: 13.5px; }
.lang-note .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; padding-block: 6px; text-align: center; }
.lang-note :is(button, a) { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--maroon); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (any-pointer: coarse) { .lang-note :is(button, a) { min-height: 44px; } }
@media (max-width: 560px) { .lang-note { font-size: 12.5px; line-height: 1.45; } .lang-note .wrap { padding-block: 4px; column-gap: 10px; } }

/* Words are never split across two lines, in any language (6 October 2026, at the owner's request): no automatic
   hyphenation, and text wraps only between words. The layout leaves room for the longest word on every screen;
   fitWords() makes a heading smaller where a long word would not fit, and tests/splitcheck.py fails when a word is
   split anywhere. break-word stays only as the last resort against text running off the screen. */
html { hyphens: manual; -webkit-hyphens: manual; }
body { overflow-wrap: break-word; }
bd-nw { white-space: nowrap; } /* a word with a hyphen, dash or slash inside it (keepWhole) */
:where(*) { grid-auto-columns: minmax(0, 1fr); } /* grids without set columns: a long word does not push the page sideways */
span[dir="ltr"] { white-space: nowrap; } /* phone numbers stay on one line */
:is(h1, h2, h3, h4, .tagline, .facts strong, .mbr strong) { overflow-wrap: normal; } /* headings: smaller type instead (fitWords) */
.page-head .wrap, .section-head:not(.row) { grid-template-columns: minmax(0, 1fr); }
.pcard-body { grid-template-columns: minmax(0, 1fr); }
.specs { overflow-wrap: normal; }
.specs.rows { grid-template-columns: minmax(0, 1fr); }
.specs.rows div { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-inline-start: 0; border-top: 1px solid var(--line); }
.specs.rows div:first-child { border-top: 0; }
.specs.rows dt { order: 1; font-size: 12.5px; }
.specs.rows dd { order: 2; font-size: 14.5px; }

/* Greek: Lora has no Greek letters, so headings use Literata */
:root:lang(el) { --display: 'Literata', Georgia, 'Times New Roman', serif; --display-hi: 'Literata', Georgia, 'Times New Roman', serif; }
:root:lang(el) :is(.tagline, .hero-lockup p) { word-spacing: 0.1em; } /* Literata italic has a narrow word space */

/* Arabic: Naskh for headings, a matching sans for text, no letter spacing, no slanted type */
:root:lang(ar) {
  --display: 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, serif;
  --display-hi: var(--display);
  --sans: 'Noto Sans Arabic', 'Segoe UI', 'Geeza Pro', Tahoma, system-ui, sans-serif;
}
:root:lang(ar) .hero-v4 h1 { line-height: 1.3; font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
:root:lang(ar) body { line-height: 1.8; }
:root:lang(ar) * { letter-spacing: 0 !important; }
:root:lang(ar) :is(h1, h2, h3) { line-height: 1.45; }
:root:lang(ar) :is(.accent, .tagline, .hero-lockup p) { font-style: normal; }
:root:lang(ar) :is(.eyebrow, .ncard .tag, .pcard-brand, .site-footer h2, .lang-menu .lm-title) { font-size: 13.5px; text-transform: none; }

/* right-to-left: mirror the lights, arrows and the few fixed positions */
[dir="rtl"] .wrap { padding-inline: max(var(--gutter), env(safe-area-inset-right, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); }
[dir="rtl"] .main-nav > ul > li > a::after, [dir="rtl"] .main-nav .nav-btn::after { transform-origin: right center; }
[dir="rtl"] .textlink:not([data-download])::after, [dir="rtl"] .brand-tile .tile-foot span:last-child::after { transform: scaleX(-1); }
@media (hover: hover) {
  [dir="rtl"] .textlink:hover::after, [dir="rtl"] .brand-tile:hover .tile-foot span:last-child::after { transform: scaleX(-1) translateX(4px); }
}
[dir="rtl"] .pd-pager svg { transform: scaleX(-1); }
[dir="rtl"] .to-top { right: auto; left: max(16px, env(safe-area-inset-left, 0px)); }
[dir="rtl"] .page-head::after { transform: translateY(-50%) rotate(7deg); }
[dir="rtl"] .hero::before { -webkit-mask-image: radial-gradient(90% 90% at 22% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(90% 90% at 22% 45%, #000 15%, transparent 72%); }
[dir="rtl"] .brand-tile { background: radial-gradient(110% 95% at 0% 0%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 56%), var(--c); }
[dir="rtl"] .mbr { background: radial-gradient(110% 95% at 0% 0%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 56%), var(--c); }
[dir="rtl"] .ncard.featured { background: radial-gradient(90% 90% at 0% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%), var(--maroon); }
[dir="rtl"] .band-dark { background: radial-gradient(60% 80% at 15% 50%, rgba(92, 58, 36, 0.45), rgba(92, 58, 36, 0) 70%), var(--cocoa); }
[dir="rtl"] .page-head { background: radial-gradient(55% 130% at 0% 0%, #F8ECD2 0%, rgba(248, 236, 210, 0) 62%), var(--wafer); }
[dir="rtl"] .brand-hero { background: radial-gradient(62% 85% at 24% 46%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 66%), var(--c); }
[dir="rtl"] .sial-hero { background: radial-gradient(60% 90% at 15% 40%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 65%), var(--maroon); }
[dir="rtl"] .cta-band { background: radial-gradient(55% 140% at 0% 100%, #EBD6AE 0%, rgba(235, 214, 174, 0) 62%), var(--wafer); }
@media (prefers-reduced-motion: reduce) { .lang-menu:not([hidden]) { animation: none; } .lang-btn .chev { transition: none; } }

/* =========================================================
   Version 3: first screen, header over it, news and articles
   ========================================================= */
:root { --hdr-h: 73px; }
@media (max-height: 500px) and (orientation: landscape) { :root { --hdr-h: 61px; } }

/* header over the dark first screen of the home page: see-through at the top, solid once the page scrolls or a menu opens */
.brandmark .bm-light { display: none; }
.site-header { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) {
  background: transparent; border-bottom-color: rgba(247, 238, 221, 0.12); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) :is(.brandmark, .main-nav > ul > li > a, .main-nav .nav-btn, .lang-btn, .menu-btn, .inq-pill) { color: var(--on-dark); }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) .bm-dark { display: none; }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) .bm-light { display: block; }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) :is(.lang-btn, .menu-btn, .inq-pill) { background: rgba(255, 255, 255, 0.07); border-color: rgba(247, 238, 221, 0.32); }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) :is(.lang-btn svg, .lang-btn .chev) { color: var(--on-dark-2); }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) .header-cta { background: var(--gold-2); border-color: var(--gold-2); color: var(--cocoa); }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) :is(.main-nav > ul > li > a.nav-hl, .cat-btn) { background: rgba(217, 169, 79, 0.16); border-color: var(--gold-2); color: #fff; }
@media (hover: hover) { .page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) :is(.main-nav > ul > li > a.nav-hl, .cat-btn):hover { background: rgba(217, 169, 79, 0.3); color: #fff; } }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) :is(.main-nav > ul > li > a, .main-nav .nav-btn):hover { color: #fff; }
.page-home .site-header:not(.scrolled):not(:has([aria-expanded="true"])) :focus-visible { outline-color: var(--gold-3); }

/* first screen: the photo of our coated wafers on dark maroon, the headline in a high-contrast display serif.
   Wider screens: the whole photo on the right (at most 81 % of the screen width, 72 % on landscape tablets), anchored
   to the bottom; its left and top edges fade into the background colour, which is the photo's own darkest tone.
   Phones and portrait tablets: a crop around the wafers above the headline. The picture does not move. */
.hero-v4 { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: #140000; }
.page-home .hero-v4 { margin-top: calc(-1 * var(--hdr-h)); padding-top: var(--hdr-h); }
.hero-v4 .hero-inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center;
  min-height: clamp(540px, 78vh, 800px); padding-block: clamp(48px, 8vh, 96px); }
.hero-v4 .hero-copy { grid-column: 1; max-width: 36rem; position: relative; z-index: 1; }
.hero-media { position: absolute; inset-block: auto 0; inset-inline: auto 0; width: min(81vw, 1350px); height: 100%; z-index: 0;
  display: block; pointer-events: none; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
/* right to left (27 September 2026, at the owner's request): the photo is never mirrored. On wider screens it stands on
   the left, a little smaller, with the text on the right; its right edge, where the wafers leave the frame, fades into
   the background before the text begins. Phones and portrait tablets show the same crop as in English. */
@media (min-width: 1101px), (min-width: 761px) and (orientation: landscape) {
  /* the photo ends where the text column begins: at least 36 % of the screen from the right; more on wide screens,
     where the text column (half of the 1240 px page width) sits nearer the middle */
  [dir="rtl"] .hero-media { left: auto; right: max(36vw, calc(50vw - 188px)); width: min(70vw, 1180px); }
  [dir="rtl"] .hero-media img { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 17%); mask-image: linear-gradient(to left, transparent 0, #000 17%); }
}
/* landscape tablets: the text column takes more of the screen, so the photo is smaller and further left */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: landscape) { [dir="rtl"] .hero-media { right: 40vw; width: 60vw; } }
@media (min-width: 761px) and (max-width: 1100px) and (orientation: landscape) { .hero-media { width: 72vw; } }
.hero-v4 h1 { font-family: var(--display-hi); font-weight: 500; font-size: clamp(2.6rem, 4.7vw, 4.75rem); line-height: 1.02; letter-spacing: -0.02em;
  color: #FBF4E8; max-width: min(100%, 34rem); text-wrap: balance;
  /* whole words only: a long word makes the headline smaller (fitWords) instead of breaking in the middle */
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
.hero-v4 h1 .accent { display: block; color: var(--gold-2); font-weight: 500; font-style: italic; }
.hero-v4 .lead { margin-top: 28px; max-width: 25.5em; color: #EADDC6; font-size: clamp(1.04rem, 1.35vw, 1.18rem); line-height: 1.65; text-wrap: pretty; }
.hero-v4 .btn-row { margin-top: 32px; }
.hero-v4 .hero-dl { color: var(--gold-3); }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .hero-v4 { display: flex; flex-direction: column; }
  .hero-v4 .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 4px 44px; }
  .hero-media { position: relative; inset: auto; width: 100%; height: auto; }
  .hero-media img { height: auto; object-fit: fill; }
  .hero-v4 h1 { font-size: clamp(2.7rem, 12.5vw, 3.6rem); }
}
.facts { background: linear-gradient(180deg, #22150F, var(--cocoa-2)); border-top-color: rgba(232, 180, 85, 0.12); }

/* news: the newest article large, the others as cards; home page cards share the same design */
.list-h { font-size: clamp(1.6rem, 2.4vw, 2.05rem); margin-bottom: 20px; }
.agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.acard { position: relative; display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.acard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.acard-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cocoa); }
.acard-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.acard:hover .acard-img img { transform: scale(1.04); }
.acard-mark { display: grid; place-items: center; color: var(--gold-2);
  background: radial-gradient(120% 90% at 85% 5%, rgba(217, 169, 79, 0.24), rgba(217, 169, 79, 0) 58%), linear-gradient(160deg, #3A2519, #1E120D); }
.acard-mark svg { width: 58px; height: 58px; opacity: 0.85; }
.acard-body { padding: 20px 22px 24px; display: grid; gap: 10px; align-content: start; }
.acard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--ink-3); }
.acard .tag, .article-meta .tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 5px 10px 4px;
  border-radius: 999px; background: var(--wafer); color: var(--ink-2); }
.acard h3 { font-size: 1.42rem; line-height: 1.22; }
.acard h3 a { color: var(--ink); text-decoration: none; }
.acard h3 a::after { content: ""; position: absolute; inset: 0; }
.acard h3 a:hover { color: var(--maroon); }
.acard h3 a:focus-visible { outline: none; }
.acard:has(h3 a:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.acard p { color: var(--ink-2); font-size: 15px; }
.acard .acard-lang { font-size: 13px; color: var(--ink-3); }
.acard-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: none; }
.acard-lead .acard-img { aspect-ratio: auto; min-height: 340px; }
.acard-lead .acard-body { padding: clamp(24px, 4vw, 52px); align-content: center; gap: 14px; }
.acard-lead h3 { font-size: clamp(1.75rem, 2.7vw, 2.4rem); }
.acard-lead p { font-size: 16.5px; }
.news-grid .acard { align-self: stretch; }
/* home page without an upcoming show: two or one news cards share the row instead of leaving an empty column */
@media (min-width: 1001px) { .news-grid.even:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 601px) { .news-grid.even:has(> :only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .acard-lead { grid-template-columns: minmax(0, 1fr); } .acard-lead .acard-img { aspect-ratio: 16 / 10; min-height: 0; } }
@media (max-width: 620px) { .agrid { grid-template-columns: minmax(0, 1fr); } }

/* trade shows under the news */
.events-section { background: var(--stage); }
.ev-h { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); margin: 30px 0 12px; }
.ev-h:first-of-type { margin-top: 8px; }
.ev h4 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; color: var(--ink); margin: 0; }
:root:lang(ar) .ev-h { letter-spacing: 0; text-transform: none; font-size: 14px; }

/* one article */
.article-head .wrap, .article-wrap { max-width: calc(780px + 2 * var(--gutter)); }
.article-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 22ch; }
.article-head .lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 44rem; margin-top: 14px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 16px; color: var(--ink-3); font-size: 14.5px; font-weight: 500; }
.article-meta .tag { background: #fff; }
.article-section { padding-top: clamp(28px, 4vw, 44px); }
.article-note { background: var(--wafer); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 22px; }
.article-figure { margin: 0 0 30px; }
.article-figure img, .article-body figure img { display: block; width: 100%; height: auto; border-radius: 16px; }
.article-figure figcaption, .article-body figcaption { font-size: 14px; color: var(--ink-3); margin-top: 10px; }
.article-body { font-size: 1.08rem; line-height: 1.75; color: var(--ink); }
.article-body > * + * { margin-top: 1.05em; }
.article-body h2 { font-size: 1.7rem; margin-top: 1.6em; }
.article-body h3 { font-family: var(--display); font-size: 1.3rem; margin-top: 1.4em; }
.article-body ul, .article-body ol { padding-inline-start: 1.3em; }
.article-body li + li { margin-top: 0.35em; }
.article-body figure { margin-block: 1.8em; margin-inline: 0; }
.article-body blockquote { margin-block: 1.6em; margin-inline: 0; padding-block: 4px; padding-inline-start: 22px; border-inline-start: 3px solid var(--gold-2);
  font-family: var(--display); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--ink); }
.article-body blockquote footer { font-family: var(--sans); font-style: normal; font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.article-body a { color: var(--maroon); text-underline-offset: 3px; }
.article-about { margin-top: 44px; padding: 24px 26px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); }
.article-about h2 { font-size: 1.25rem; }
.article-about p { color: var(--ink-2); margin-top: 8px; font-size: 15px; }
.article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; font-weight: 600; color: var(--ink-2); }
.btn-sm { min-height: 40px; padding-block: 0; padding-inline: 16px; font-size: 14px; }
.more-news { background: var(--stage); }
:root:lang(ar) .article-body blockquote { font-style: normal; }
:root:lang(ar) :is(.acard .tag, .article-meta .tag) { letter-spacing: 0; text-transform: none; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .acard, .acard-img img { transition: none; }
}
@media print {
  .hero-media, .article-share { display: none !important; }
  .hero-v4 { margin-top: 0 !important; }
  .hero-v4 .hero-inner { min-height: 0; }
}

/* ---------- live-site additions ---------- */
[hidden] { display: none !important; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.subnav .subnav-link { display: inline-flex; align-items: center; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; min-height: 40px; padding: 0 16px; font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .subnav .subnav-link:hover { border-color: var(--gold); color: var(--ink); } }
@media (any-pointer: coarse) { .subnav .subnav-link { min-height: 44px; } }
.hp { position: absolute !important; inset-inline-start: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sent h2 { font-size: 1.7rem; }
.sent p { color: var(--ink-2); }
button[disabled] { opacity: 0.7; cursor: progress; }