/* Export theme: every front page (home, catalogue, content pages, 404) + shared header/footer.
   Only the retired category pages still load style.css, so everything here is either scoped to body.ex or uses its own x-/ex- class names. */

/* Manrope ships as one variable file per subset; fonts.css only declares 300–600, the theme needs 800. */
@font-face { font-family: 'ExManrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-cyrillic-ffb0f3.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'ExManrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-latin-ext-b4290e.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'ExManrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-latin-cf48e3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ex-bg: #FFFFFF;
  --ex-bg2: #F2F3F5;
  --ex-navy: #0F2341;
  --ex-copper: #C27A4A;
  /* copper is 3.1:1 on white: small text in copper uses the ink tone (5.4:1 on white, 4.9:1 on --ex-bg2);
     the deep tone carries white text (4.7:1). Large headings (24 px and up) keep --ex-copper. */
  --ex-copper-ink: #9A5A2C;
  --ex-copper-deep: #A9622F;
  --ex-line: #E3E5E9;
  --ex-muted: #4A5568;
  --ex-font: 'ExManrope', 'Manrope', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ex-h1: clamp(2.6rem, 4.6vw, 4.6rem);
  /* one H2 size for content sections and closing bands */
  --ex-h2: clamp(1.9rem, 3.2vw, 3rem);
  --ex-pad: clamp(16px, 4vw, 56px);
  --ex-max: 1440px;
}
:root[lang="ar"] { --ex-font: 'Tajawal', 'ExManrope', system-ui, sans-serif; }
/* Arabic letters join: tracking and case changes break the joins, so Arabic pages set every text without them */
:root[lang="ar"] *, :root[dir="rtl"] * { letter-spacing: 0 !important; text-transform: none !important; }

/* ---------- base (home only) ---------- */
body.ex { margin: 0; background: var(--ex-bg); color: var(--ex-navy); font: 400 1rem/1.6 var(--ex-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.ex *, body.ex *::before, body.ex *::after { box-sizing: border-box; }
:where(body.ex) :where(h1, h2, h3, p, ul, dl, dd, figure) { margin: 0; padding: 0; }
:where(body.ex) :where(ul) { list-style: none; }
:where(body.ex) :where(img, svg) { display: block; max-width: 100%; }
:where(body.ex) :where(a) { color: inherit; text-decoration: none; }
body.ex .skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; padding: 10px 16px; background: var(--ex-navy); color: #fff; font-weight: 700; }
body.ex .skip:focus { top: 12px; }
.ex-wrap { max-width: var(--ex-max); margin-inline: auto; padding-inline: var(--ex-pad); }
.ex-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.xh, .xf, body.ex) :focus-visible { outline: 2px solid var(--ex-copper); outline-offset: 3px; }

/* ---------- buttons ---------- */
.xb { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 6px; font: 700 .95rem/1 var(--ex-font); letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
/* navy on copper: 4.6:1, on the hover tone 5.6:1 (white on copper would be 3.4:1).
   .xb.xb-copper outranks body.ex :where(a, button) { color: inherit }, which turned the text white inside navy bands */
.xb.xb-copper { background: var(--ex-copper); border-color: var(--ex-copper); color: var(--ex-navy); }
.xb.xb-copper:hover { background: #D08B5C; border-color: #D08B5C; color: var(--ex-navy); }
.xb-line-copper { border-color: var(--ex-copper); color: #fff; }
.xb-line-copper:hover { background: var(--ex-copper); color: var(--ex-navy); }
.xb-line-white { border-color: #fff; color: #fff; }
.xb-line-white:hover { background: #fff; color: var(--ex-navy); }
.ex-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ex-arrow { display: inline-block; width: 28px; height: 12px; position: relative; flex: none; }
.ex-arrow::before { content: ""; position: absolute; inset-inline: 0 2px; top: 5.25px; height: 1.5px; background: currentColor; }
.ex-arrow::after { content: ""; position: absolute; inset-inline-end: 1px; top: 2px; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); }
[dir="rtl"] .ex-arrow::after { transform: rotate(-45deg); }

/* ---------- header ---------- */
.xh { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--ex-line); color: var(--ex-navy); font-family: var(--ex-font); }
.xh-in { max-width: var(--ex-max); margin-inline: auto; padding-inline: var(--ex-pad); height: 76px; display: flex; align-items: center; gap: 22px; }
.xh-word, .xf-word { font: 300 1.2rem/1 var(--ex-font); letter-spacing: .14em; white-space: nowrap; color: inherit; text-decoration: none; }
.xh-word b, .xf-word b { font-weight: 800; }
.xh-nav { display: flex; align-items: center; gap: 22px; margin-inline-start: auto; }
.xh-nav > a { position: relative; padding: 8px 0; font: 500 .95rem/1.2 var(--ex-font); color: var(--ex-navy); text-decoration: none; white-space: nowrap; }
.xh-nav > a::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 2px; background: var(--ex-copper); transform: scaleX(0); transition: transform .2s; }
.xh-nav > a:hover::after, .xh-nav > a[aria-current="page"]::after { transform: scaleX(1); }
.xh-lang, .xf-lang { display: flex; gap: 2px; font: 600 .8125rem/1 var(--ex-font); letter-spacing: .06em; }
.xh-lang { margin-inline-start: 6px; padding-inline-start: 22px; border-inline-start: 1px solid var(--ex-line); }
.xh-lang a, .xh-lang b, .xf-lang a, .xf-lang b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 30px; padding: 0 4px; text-decoration: none; color: inherit; }
.xh-lang a { color: #4A5568; }
.xh-lang a:hover { color: var(--ex-navy); }
.xh-lang b, .xf-lang b { font-weight: 800; box-shadow: inset 0 -2px 0 var(--ex-copper); }
.xh-burger { display: none; width: 44px; height: 44px; margin-inline-start: auto; padding: 12px 10px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: space-between; }
.xh-burger i { display: block; height: 2px; background: var(--ex-navy); transition: transform .2s, opacity .2s; }
body.menu-open .xh-burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .xh-burger i:nth-child(2) { opacity: 0; }
body.menu-open .xh-burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
body.menu-open { overflow: hidden; }
@media (max-width: 1340px) {
  .xh-in { gap: 12px; }
  .xh-burger { display: flex; }
  .xh-nav { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--ex-pad) 20px; background: #fff; border-bottom: 1px solid var(--ex-line); box-shadow: 0 16px 30px -18px rgba(15, 35, 65, .35); }
  body.menu-open .xh-nav { display: flex; }
  .xh-nav > a { padding: 14px 0; border-bottom: 1px solid var(--ex-line); font-size: 1.05rem; }
  .xh-nav > a::after { display: none; }
  .xh-nav > a[aria-current="page"] { font-weight: 800; }
  .xh-lang { margin: 14px 0 0; padding: 0; border: 0; gap: 4px; }
  /* touch targets: 44 × 44 */
  .xh-lang a, .xh-lang b, .xf-lang a, .xf-lang b { min-width: 44px; min-height: 44px; }
}
@media (max-width: 520px) {
  .xh-in { height: 64px; }
  .xh-word { font-size: 1rem; letter-spacing: .12em; }
}
@media (max-width: 420px) {
  .xh-in { gap: 8px; }
  .xh-word { font-size: .88rem; letter-spacing: .08em; }
}

/* ---------- hero ---------- */
.ex-hero { display: grid; grid-template-columns: 42fr 58fr; min-height: clamp(520px, 43vw, 680px); }
.ex-hero__panel { position: relative; isolation: isolate; container-type: inline-size; background: var(--ex-navy); color: #fff; padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.ex-hero h1 { font-weight: 800; font-size: min(var(--ex-h1), 10.6cqi); line-height: 1.04; letter-spacing: -.025em; }
.ex-hero h1 span { display: block; }
.ex-hero h1 em, .ex-cta h2 em, .ex-markets h2 em { font-style: normal; color: var(--ex-copper); }
.ex-hero__panel p { max-width: 34ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.55; color: rgba(255, 255, 255, .86); }
.ex-hero__stage { position: relative; overflow: hidden; container-type: size; background: #C9CDD3; }
.ex-hero__stage.is-empty { background: var(--ex-bg2); }
.ex-hero__stage img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
/* banner slider: the stage keeps the banners' own shape (1600 x 679) so no product is cut; the panel beside it is narrow */
@media (min-width: 1280px) {
  .ex-hero { grid-template-columns: clamp(400px, 31vw, 580px) minmax(0, 1fr); min-height: 0; }
  .ex-hero__panel { gap: 20px; padding-block: clamp(32px, 3vw, 56px); }
  .ex-hero__panel .ex-row { margin-top: 4px; }
  .ex-hero__stage { aspect-ratio: 1600 / 679; container-type: normal; }
}
.ex-slider, .ex-slider__track { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ex-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.ex-slide.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; z-index: 1; }
.ex-hero .ex-slide__a { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; background: none; }
.ex-hero__stage .ex-slide__a img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ex-slide__a .xbr-ban__tag { border-radius: 0; }
.ex-slide__a .xbr-ban__go { border-radius: 0; }
.ex-slider__nav { position: absolute; z-index: 2; inset-inline-end: 0; bottom: 0; display: flex; align-items: center; gap: 4px; padding: 6px; background: var(--ex-navy); }
.ex-slider .ex-slider__step { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: #fff; cursor: pointer; transition: color .2s; }
.ex-slider__step[data-step="-1"] .ex-arrow { transform: scaleX(-1); }
.ex-slider__step .ex-arrow { width: 22px; }
.ex-slider .ex-slider__step:hover { color: var(--ex-copper); }
.ex-slider__dots { display: flex; gap: 2px; }
.ex-slider__dot { position: relative; width: 22px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; }
.ex-slider__dot::before { content: ""; position: absolute; inset-inline: 4px; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, .38); transition: background-color .2s; }
.ex-slider__dot:hover::before { background: rgba(255, 255, 255, .8); }
.ex-slider__dot[aria-current="true"]::before { background: var(--ex-copper); height: 4px; margin-top: -2px; }
.ex-slider__step:focus-visible, .ex-slider__dot:focus-visible { outline: 2px solid var(--ex-copper); outline-offset: -2px; }
.ex-slide__a:focus-visible { outline-offset: -4px; }
@media (max-width: 1279px) {
  .ex-hero { grid-template-columns: 1fr; min-height: 0; }
  .ex-hero__panel { padding-inline: var(--ex-pad); }
  .ex-hero__stage { aspect-ratio: 1600 / 679; container-type: normal; }
}
@media (max-width: 640px) {
  /* phones: the label and the controls sit under the photo instead of over the products */
  .ex-hero__stage { aspect-ratio: auto; overflow: visible; }
  .ex-slider { position: relative; inset: auto; }
  .ex-slider__track { position: relative; inset: auto; display: grid; }
  .ex-slide { position: relative; inset: auto; grid-area: 1 / 1; }
  .ex-hero .ex-slide__a { position: relative; inset: auto; display: block; }
  .ex-hero__stage .ex-slide__a img { height: auto; aspect-ratio: 1600 / 679; }
  .ex-slide__a .xbr-ban__tag { position: static; max-width: none; }
  .ex-slide__a .xbr-ban__txt { flex: 1; padding: 10px var(--ex-pad); }
  .ex-slide__a .xbr-ban__go { width: 52px; }
  .ex-slider__nav { position: relative; inset: auto; justify-content: center; }
  .ex-slider__dot { width: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ex-slide, .ex-slide.is-on { transition: none; } }

/* ---------- gates + numbers ---------- */
/* two large doors (brands, private label), the numbers as a full-width strip under them */
.ex-gates { max-width: var(--ex-max); margin-inline: auto; padding: clamp(20px, 2.4vw, 32px) var(--ex-pad) 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.ex-gate { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3vw, 44px); background: var(--ex-bg2); color: var(--ex-navy); border: 1px solid transparent; border-radius: 8px; transition: border-color .2s; }
.ex-gate h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.ex-gate p { max-width: 40ch; color: var(--ex-muted); font-size: 1.02rem; }
.ex-gate h2 .ex-arrow { display: inline-block; width: 34px; margin-inline-start: 16px; vertical-align: middle; color: var(--ex-copper-ink); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.ex-gate:hover h2 .ex-arrow { transform: translateX(4px); }
[dir="rtl"] .ex-gate:hover h2 .ex-arrow { transform: translateX(-4px); }
/* the heading link covers the whole box; links inside the box (brand chips, container words, shelf) sit above it */
.ex-gate:hover, .ex-gate:focus-within { border-color: var(--ex-navy); }
.ex-gate__link { color: inherit; text-decoration: none; }
.ex-gate__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.ex-gate__link:focus-visible { outline: none; }
.ex-gate__link:focus-visible::after { outline: 2px solid var(--ex-copper); outline-offset: -2px; border-radius: 8px; }
.ex-gate p a, .ex-bchips, .ex-shelf { position: relative; z-index: 1; }
.ex-gate p a { color: var(--ex-navy); text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .2em; }
.ex-gate p a:hover { text-decoration-thickness: 2px; }
/* six brands: pack cutout on a brand-tinted card, the brand's own logo under it */
.ex-bchips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.ex-bchip { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; height: 100%; padding: 18px 14px 16px; background: color-mix(in srgb, var(--bc) 10%, #fff); border-top: 3px solid var(--bc); border-radius: 8px; color: var(--ex-navy); text-decoration: none; transition: background-color .2s; }
.ex-bchip:hover { background: color-mix(in srgb, var(--bc) 18%, #fff); }
.ex-bchip__img { display: flex; align-items: flex-end; justify-content: center; height: clamp(110px, 10.5vw, 160px); }
.ex-bchip__img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ex-bchip:hover .ex-bchip__img img { transform: translateY(-4px); }
.ex-bchip__name { display: flex; justify-content: center; height: 22px; }
.ex-bchip__name .xbl { width: auto; height: 100%; max-width: 100%; -webkit-mask-position: center; mask-position: center; }
/* private label: white door, four containers standing on one copper shelf, each names its type */
.ex-gate--pl { background: #fff; border-color: var(--ex-line); }
.ex-gate .ex-shelf { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: end; gap: clamp(8px, 1.4vw, 20px); margin: 0; padding: clamp(18px, 2vw, 28px) 0 0; list-style: none; }
.ex-shelf__a { display: flex; flex-direction: column; color: var(--ex-navy); text-decoration: none; }
.ex-shelf__img { display: flex; align-items: flex-end; justify-content: center; height: clamp(180px, 20vw, 300px); border-bottom: 3px solid var(--ex-copper); }
.ex-shelf__img img { width: auto; max-width: 100%; object-fit: contain; object-position: bottom; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ex-shelf li:nth-child(1) .ex-shelf__img img { height: 100%; }
.ex-shelf li:nth-child(2) .ex-shelf__img img { height: 60%; }
.ex-shelf li:nth-child(3) .ex-shelf__img img { height: 52%; }
.ex-shelf li:nth-child(4) .ex-shelf__img img { height: 70%; }
.ex-shelf__a:hover .ex-shelf__img img { transform: translateY(-6px); }
.ex-shelf__cap { margin-top: 10px; font-size: .9rem; font-weight: 700; line-height: 1.25; text-align: center; }
.ex-shelf__a:hover .ex-shelf__cap { color: var(--ex-copper-ink); }
.ex-bchip:focus-visible, .ex-shelf__a:focus-visible { outline: 2px solid var(--ex-copper); outline-offset: 2px; }
/* numbers: one navy strip over the factory photo, four columns */
.ex-stats { grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; background: var(--ex-navy); color: #fff; padding: clamp(18px, 2vw, 28px) clamp(24px, 3vw, 44px); border-radius: 8px; }
.ex-stats dl { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex-stats__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ex-stats::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15, 35, 65, .88); }
.ex-stats dl > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 6px clamp(14px, 2vw, 28px); border-inline-start: 1px solid rgba(255, 255, 255, .16); }
.ex-stats dl > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.ex-stats dd { color: var(--ex-copper); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em; }
.ex-stats dt { font-size: .9rem; line-height: 1.3; color: #fff; }
@media (prefers-reduced-motion: reduce) { .ex-gate h2 .ex-arrow, .ex-bchip__img img, .ex-shelf__img img { transition: none; } }

/* ---------- inside our facility ---------- */
.ex-fac { padding-top: clamp(56px, 7vw, 104px); }
.ex-fac__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.ex-fac__grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.ex-fac__grid figcaption { margin-top: 10px; font-weight: 700; }
@media (max-width: 760px) { .ex-fac__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- markets ---------- */
.ex-markets { background: #fff; }
.ex-markets__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); padding-block: clamp(56px, 7vw, 112px); }
.ex-globe { max-width: 640px; width: 100%; justify-self: center; }
.ex-globe .gd-land { fill: none; stroke: #8FA2BF; stroke-width: 3.6; stroke-linecap: round; }
.ex-globe .gd-tr { fill: none; stroke: var(--ex-copper); stroke-width: 3.6; stroke-linecap: round; }
.ex-globe .gd-arc { fill: none; stroke: var(--ex-copper); stroke-width: 1.8; stroke-linecap: round; }
.ex-globe .gd-hub { fill: var(--ex-copper); }
.ex-globe .gd-pin { fill: var(--ex-navy); stroke: #fff; stroke-width: 2; }
.ex-markets h2, .ex-head h2 { font-size: var(--ex-h2); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.ex-lead { margin-top: 18px; max-width: 44ch; font-size: 1.08rem; color: var(--ex-muted); }
/* the regions are the content of the section: set large, one per line, a copper tick before each */
.ex-regions__lead { margin-top: clamp(24px, 3vw, 36px); font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-copper-ink); }
.ex-regions__lead + .ex-regions { margin-top: 12px; }
.ex-markets .xexp-more { margin-top: 16px; font-weight: 600; color: var(--ex-muted); }
.ex-regions { margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ex-line); }
.ex-regions li { display: flex; align-items: center; gap: 16px; padding-block: clamp(10px, 1.2vw, 16px); border-bottom: 1px solid var(--ex-line); font-size: clamp(1.4rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ex-navy); }
.ex-regions li::before { content: ""; flex: none; width: 22px; height: 4px; background: var(--ex-copper); }

/* ---------- brands ---------- */
.ex-brands { padding-block: clamp(56px, 7vw, 104px); }
.ex-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.ex-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; border-bottom: 1.5px solid var(--ex-copper); }
.ex-link .ex-arrow { color: var(--ex-copper-ink); }
.ex-brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
/* brand tile: the banner photo in its own shape, then a white foot with the logo, the lines and the arrow */
.ex-brands { background: var(--ex-bg2); }
.ex-brand { position: relative; display: flex; flex-direction: column; background: #fff; color: var(--ex-navy); text-decoration: none; overflow: hidden; border-radius: 8px; border-top: 4px solid var(--bc); }
.ex-brand__img { display: block; aspect-ratio: 1600 / 679; overflow: hidden; background: color-mix(in srgb, var(--bc) 8%, #fff); }
.ex-brand__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ex-brand--pack .ex-brand__img { display: flex; justify-content: center; padding-top: 14px; }
.ex-brand--pack .ex-brand__img img { width: auto; object-fit: contain; }
.ex-brand:hover .ex-brand__img img { transform: scale(1.03); }
.ex-brand__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 16px 20px 18px; }
.ex-brand__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.ex-brand__name .xbl { width: auto; height: 26px; max-width: 100%; }
.ex-brand__lines { grid-column: 1; font-size: .86rem; line-height: 1.35; color: var(--ex-muted); }
.ex-brand__foot .ex-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--bc); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.ex-brand:hover .ex-brand__foot .ex-arrow, .ex-brand:focus-visible .ex-brand__foot .ex-arrow { transform: translateX(4px); }
[dir="rtl"] .ex-brand:hover .ex-brand__foot .ex-arrow, [dir="rtl"] .ex-brand:focus-visible .ex-brand__foot .ex-arrow { transform: translateX(-4px); }
.ex-brand:focus-visible { outline: 3px solid var(--ex-copper); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ex-brand__img img, .ex-brand__foot .ex-arrow { transition: none; } }

/* ---------- closing CTA ---------- */
.ex-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--ex-navy); color: #fff; padding-block: clamp(56px, 7vw, 96px); }
.ex-cta > .ex-wrap { position: relative; z-index: 1; }

/* ---------- ambient video on navy (markup from vbg() in view.php, loading in main.js) ---------- */
/* grey clip × copper-to-light-navy tint, screened onto navy: bright parts read copper / light navy, black stays navy.
   brightness(.8) caps the brightest frame so white text and copper headings keep AA on the lightened navy. */
body.ex .vbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; isolation: isolate; mix-blend-mode: screen; opacity: var(--vo, .3);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
body.ex .vbg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.8); }
body.ex .vbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, #C27A4A, #D69A6E 45%, #7F9CC8); mix-blend-mode: multiply; }
.ex-hero__panel > :not(.vbg) { position: relative; z-index: 1; }
.ex-cta h2 { max-width: 20ch; font-size: var(--ex-h2); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.ex-cta p { margin: 18px 0 32px; max-width: 52ch; font-size: 1.08rem; color: rgba(255, 255, 255, .86); }

/* ---------- footer ---------- */
.xf { background: var(--ex-navy); color: rgba(255, 255, 255, .86); font: 400 .95rem/1.65 var(--ex-font); border-top: 1px solid rgba(255, 255, 255, .12); }
.xf-in { max-width: var(--ex-max); margin-inline: auto; padding: clamp(48px, 5vw, 72px) var(--ex-pad) 28px; }
.xf-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr .8fr; gap: 32px; }
.xf a { color: #fff; text-decoration: none; }
.xf a:hover { text-decoration: underline; text-underline-offset: .2em; }
.xf h2 { margin: 0 0 14px; font: 700 .8125rem/1.2 var(--ex-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ex-copper); }
.xf p, .xf ul { margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
/* touch targets: every footer link is at least 44 px tall */
.xf li a, .xf p a, .xf-legal a, .xf-consent { display: inline-flex; align-items: center; min-height: 44px; }
.xf p a { vertical-align: top; }
.xf-legal { row-gap: 0; }
.xf-word { display: inline-block; margin-bottom: 18px; color: #fff; }
.xf-social { display: flex; gap: 8px; margin-top: 14px; }
.xf-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.xf-social svg { width: 18px; height: 18px; fill: currentColor; }
.xf-lang { flex-wrap: wrap; }
.xf-lang b { color: #fff; }
.xf-bot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; letter-spacing: .04em; color: rgba(255, 255, 255, .72); }
.xf-legal { display: flex; flex-wrap: wrap; gap: 16px; margin-inline-start: auto; }
.xf-consent { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
/* phones only (wider screens use the footer link); inset-inline-end puts it bottom-left in Arabic */
body.ex .wa { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 50; display: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1F8F4E; color: #fff; box-shadow: 0 6px 18px -6px rgba(15, 35, 65, .5); }
body.ex .wa svg { width: 26px; height: 26px; fill: currentColor; }
@media (max-width: 860px) { body.ex .wa { display: grid; } }
.xf-dl { margin-top: 14px; }
.xf-dl a { text-decoration: underline; text-underline-offset: .2em; }
body.ex .consent-bar { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 760px; padding: 18px 20px; background: #fff; color: var(--ex-navy); border: 1px solid var(--ex-line); box-shadow: 0 18px 40px -20px rgba(15, 35, 65, .45); }
body.ex .consent-bar[hidden] { display: none; }
body.ex .consent-bar .cb-text { flex: 1 1 320px; font-size: .9rem; }
body.ex .consent-bar .cb-text a { text-decoration: underline; }
body.ex .consent-bar .cb-actions { display: flex; gap: 8px; }
body.ex .consent-bar .btn { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ex-navy); background: #fff; color: var(--ex-navy); font: 700 .9rem var(--ex-font); cursor: pointer; }
body.ex .consent-bar .btn-solid { background: var(--ex-navy); color: #fff; }

/* text cards: one radius for every card; a short copper bar marks the top instead of a full-width rule */
.xcards li:not(:has(.xcards__img))::before { content: ""; position: absolute; inset-inline-start: 22px; top: 0; width: 36px; height: 3px; border-radius: 0 0 2px 2px; background: var(--ex-copper); }
.xcards li::before { inset-inline-start: 26px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ex-gates { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ex-hero { grid-template-columns: 1fr; min-height: 0; }
  /* one column: the hero text lines up with the page gutter */
  .ex-hero__panel { padding-inline: var(--ex-pad); }
  .ex-gates { grid-template-columns: 1fr; }
  .ex-markets__in { grid-template-columns: 1fr; }
  .ex-globe { max-width: 440px; }
  .ex-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xf-top { grid-template-columns: 1fr 1fr; }
  .xf-id { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .ex-gate { padding: 24px 20px; }
  .ex-bchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-gate .ex-shelf { gap: 8px; }
  .ex-shelf__img { height: 120px; border-bottom-width: 2px; }
  .ex-shelf__cap { font-size: .78rem; }
  .ex-stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .ex-stats dl > div:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .ex-brand-grid { grid-template-columns: 1fr; }
  .ex-brand__foot { padding: 12px 16px 14px; }
  .xb { padding: 0 18px; }
}

/* ================= catalogue (F3): brands, product list, product detail ================= */
.xb-navy { background: var(--ex-navy); border-color: var(--ex-navy); color: #fff; }
.xb-navy:hover { background: #1C3A63; border-color: #1C3A63; }
.xb-line-navy { background: #fff; border-color: var(--ex-navy); color: var(--ex-navy); }
.xb-line-navy:hover { background: var(--ex-navy); color: #fff; }
:where(.xp, .xd, .xd-more, .xbr, .xg, .xg-cat, .xg-results, .xg-others) :is(a, button, input, select, textarea) { transition: border-color .15s, background-color .15s, color .15s; }
:where(body.ex) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.xpage-head { padding-block: clamp(40px, 5vw, 72px) clamp(20px, 2.4vw, 32px); }
.xpage-head h1 { font-size: clamp(2.3rem, 4.4vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.025em; }
.xpage-head p { margin-top: clamp(14px, 1.6vw, 22px); max-width: 52ch; font-size: clamp(1.08rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--ex-muted); }
.xpage-head .xpage-head__dl { margin-top: 18px; color: var(--ex-navy); }
/* Private Label: H1 + lead beside a scene of our own products (under them on phones) */
.xpage-head--pl .ex-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; gap: clamp(24px, 4vw, 64px); }
.xpage-head__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 60%; border-radius: 8px; }
@media (max-width: 860px) { .xpage-head--pl .ex-wrap { grid-template-columns: minmax(0, 1fr); } }
/* Brands: one line to Private Label after the brand sections */
.xbr-pl { padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--ex-line); font-size: 1.08rem; }
.xbr-pl a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .25em; }
.xbr-pl a:hover { text-decoration-color: var(--ex-navy); }

/* ---------- brands page: one section per brand, top rule in the brand colour ---------- */
.xbr { border-top: 6px solid var(--bc); padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 88px); scroll-margin-top: 76px; }
.xbr-range { width: 100%; max-width: 1100px; margin: 0 auto clamp(24px, 3vw, 40px); }
.xbr-range img { display: block; width: 100%; height: auto; }
.xbr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.xbr h2 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 800; line-height: .95; letter-spacing: -.035em; }
/* .xbr parent: outranks the body.ex margin reset on p */
.xbr .xbr-count { margin-top: 14px; font-weight: 700; font-size: 1.05rem; }
.xbr-strip { display: flex; align-items: flex-end; gap: clamp(16px, 2.6vw, 44px); margin-top: clamp(24px, 3vw, 40px); padding: 0 clamp(8px, 2vw, 32px); border-bottom: 2px solid var(--ex-navy); overflow-x: auto; scrollbar-width: thin; }
.xbr-strip li { flex: none; height: clamp(150px, 17vw, 250px); }
.xbr-strip a { display: block; height: 100%; }
.xbr-strip img { height: 100%; width: auto; max-width: none; }
/* boxless bottle cutouts: one overlapping collection row on a shared baseline, swipeable on phones */
.xbr-strip--photos { gap: 0; justify-content: safe center; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.xbr-strip--photos li { position: relative; width: clamp(150px, 15vw, 190px); height: auto; scroll-snap-align: center; }
.xbr-strip--photos li + li { margin-left: -12px; }
.xbr-strip--photos li::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 5%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.xbr-strip--photos img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* ---------- product list ---------- */
.xp-none a { text-decoration: underline; text-underline-offset: .2em; }
html:not(.no-js) .xp-apply { display: none; }
.xp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.xp-count { font-weight: 700; }
.xp-sort { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; }
.xp-sort select { min-height: 44px; padding: 0 10px; border: 1px solid #7A8599; border-radius: 6px; background: #fff; color: var(--ex-navy); font-size: .95rem; }
.xt-tabs [role="tab"] { scroll-margin-top: 96px; }
.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.xp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; transition: border-color .15s; }
.xp-card:hover, .xp-card:focus-within { border-color: var(--ex-navy); }
.xp-card[hidden], .xp-none[hidden] { display: none; }
.xp-card__link { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: 8px; }
.xp-card__img { display: flex; align-items: flex-end; justify-content: center; height: 210px; margin-bottom: 14px; }
.xp-card__img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
.xp-card__img.is-photo img, .xg-card__img.is-photo img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; border-radius: 4px; }
.xp-card__brand { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ex-muted); }
.xp-card__name { font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.xp-card__meta { font-size: .88rem; color: var(--ex-muted); }
.xp-none { padding: 32px; border-radius: 8px; background: var(--ex-bg2); font-weight: 600; }
.xp-none a[hidden], .xp-more[hidden] { display: none; }
.xp-more { display: flex; margin: 28px auto 0; cursor: pointer; }

/* ---------- products page: categories with their product groups ---------- */
.xg-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.xg-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #8A93A3; border-radius: 999px; font-size: .95rem; font-weight: 700; }
.xg-jump a:hover { border-color: var(--ex-navy); }
.xg-jump span { color: var(--ex-muted); font-weight: 600; }
.xg-cat { padding-block: clamp(20px, 2.6vw, 36px); scroll-margin-top: 90px; }
.xg-cat:last-of-type { padding-bottom: clamp(56px, 7vw, 104px); }
.xg-cat__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; }
.xg-cat__head h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -.015em; }
.xg-cat__head h2 a:hover { text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .2em; }
.xg-cat__head p { color: var(--ex-muted); font-weight: 600; }
.xg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.xg-card__link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 16px 16px; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; transition: border-color .15s; }
.xg-card__link:hover, .xg-card__link:focus-visible { border-color: var(--ex-navy); }
/* three pack cutouts side by side on one baseline */
.xg-card__img { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 200px; margin-bottom: 12px; }
.xg-card__img img { min-width: 0; max-width: calc((100% - 16px) / 3); height: 100%; width: auto; object-fit: contain; object-position: 50% 100%; }
.xg-card__img.is-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; border-radius: 6px; background: color-mix(in srgb, var(--bc) 10%, #fff); color: var(--ex-navy); }
.xg-card__img.is-brand .xbl { width: auto; height: 30px; max-width: 80%; -webkit-mask-position: center; mask-position: center; }
.xg-card__img.is-empty { align-items: center; justify-content: center; padding: 24px; border-radius: 4px; background: var(--ex-bg2); color: var(--ex-muted); font-size: .95rem; font-weight: 600; text-align: center; }
.xg-card__name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.xg-card__meta { font-size: .9rem; color: var(--ex-muted); }
.xg-dots { display: flex; gap: 6px; margin-top: 6px; }
.xg-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bc); }

/* ---------- product group page: brand selector, line chips, products of every brand ---------- */
.xg-head { padding-bottom: 14px; }
.xg-head .xd-crumb { margin-bottom: 6px; }
.xg { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.xg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xg-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid #8A93A3; border-radius: 999px; background: #fff; color: var(--ex-navy); font-size: .92rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.xg-chip[style]::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bc); }
.xg-chip:hover { border-color: var(--ex-navy); }
.xg-chip[aria-pressed="true"] { background: var(--ex-navy); border-color: var(--ex-navy); color: #fff; }
.xg-chip[aria-pressed="true"][style]::before { box-shadow: 0 0 0 2px #fff; }
.xg-chip[hidden] { display: none; }
.xg-chip__n { margin-inline-start: 2px; font-weight: 500; opacity: .8; }
.xg-lines .xg-chip { font-size: .88rem; }
.xg .xp-bar { margin: 4px 0 0; }
.xg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.xg-search input { width: 220px; min-height: 44px; padding: 0 12px; border: 1px solid #7A8599; border-radius: 6px; background: #fff; color: var(--ex-navy); font-size: .95rem; }
.xg-search input:hover { border-color: var(--ex-navy); }
.xg-results { padding-bottom: clamp(56px, 7vw, 104px); }
.xg-others { padding-bottom: clamp(56px, 7vw, 104px); }
.xg-others h2 { margin-bottom: 18px; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 800; letter-spacing: -.015em; }
.xg-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.xg-mini { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; }
.xg-mini:hover { border-color: var(--ex-navy); }
.xg-mini__name { font-size: 1.05rem; font-weight: 800; }
@media (max-width: 900px) {
  .xg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xg-card__img { height: 200px; }
}
@media (max-width: 560px) {
  .xg-grid { grid-template-columns: minmax(0, 1fr); }
  /* products come first: brands and types are one swipeable row each (fade at the far edge), search and sort share one row */
  .xg { gap: 10px; }
  .xg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-inline-end: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  [dir="rtl"] .xg-chips { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .xg-chips::-webkit-scrollbar { display: none; }
  .xg-chip { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .xg .xp-bar { gap: 6px; }
  .xg-tools { flex-wrap: nowrap; width: 100%; gap: 8px; }
  .xg-search { flex: 1 1 auto; min-width: 0; }
  /* 16 px: iOS does not zoom into the field on focus */
  .xg-search input { width: 100%; font-size: 16px; }
  .xp-sort { flex: none; }
  .xp-sort select { font-size: 16px; }
  .xp-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .xp-sort select { max-width: 150px; }
}

/* ---------- product detail ---------- */
.xd { padding-block: 20px clamp(48px, 6vw, 88px); }
.xd-crumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; font-size: .9rem; color: var(--ex-muted); }
.xd-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.xd-crumb a:hover { color: var(--ex-navy); text-decoration: underline; }
.xd-crumb span { align-self: center; }
.xd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.xd-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1; max-height: 680px; padding: 8% 10% 10%; border-radius: 8px; background: var(--ex-bg2); }
.xd-stage img { position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
.xd-stage img[hidden] { display: none; }
.xd-stage:not(.is-empty)::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: calc(10% - 10px); height: 20px; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 35, 65, .3), rgba(15, 35, 65, 0)); }
.xd-stage.is-empty, .xd-stage.is-photo { padding: 0; }
.xd-stage.is-photo::after { content: none; }
/* the scene photo is 4:5 like the thumbnails (the pack cutout keeps the square stage); 544 px wide keeps it under the 680 px cap */
.xd-stage.is-photo { aspect-ratio: 4 / 5; width: min(100%, 544px); margin-inline: auto; }
.xd-stage img.is-photo { width: 100%; max-width: 100%; object-fit: cover; object-position: 50% 45%; border-radius: 8px; }
.xd-media { display: grid; gap: 12px; min-width: 0; }
.xd-thumbs { display: flex; gap: 10px; }
.xd-thumb { width: 72px; height: 90px; padding: 0; overflow: hidden; border: 1px solid var(--ex-line); border-radius: 4px; background: var(--ex-bg2); cursor: pointer; }
.xd-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.xd-thumb.is-image img { padding: 8px; object-fit: contain; object-position: 50% 100%; }
.xd-thumb[aria-pressed="true"] { border: 2px solid var(--ex-navy); }
.xd-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.xd-brand::before { content: ""; width: 14px; height: 14px; background: var(--bc); }
.xd-brand:hover { text-decoration: underline; text-underline-offset: .3em; }
.xd-info h1 { margin-top: 6px; font-size: clamp(2.1rem, 3.8vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -.025em; }
.xd-info h1 span { display: block; margin-top: 8px; font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--ex-muted); }
.xd-spec { margin-top: 28px; border-top: 1px solid var(--ex-line); }
.xd-spec div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ex-line); }
.xd-spec dt { color: var(--ex-muted); }
.xd-spec dd { font-weight: 700; text-align: end; }
.xd-more { padding-bottom: clamp(56px, 7vw, 104px); }
.xd-more h2 { margin-bottom: 24px; font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 800; letter-spacing: -.015em; }

@media (max-width: 860px) {
  .xd-grid { grid-template-columns: minmax(0, 1fr); }
  .xd-stage, .xd-media { max-width: 560px; width: 100%; margin-inline: auto; }
  .xd-media .xd-stage { max-width: none; }
}
@media (max-width: 520px) {
  .xp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xp-card__link { padding: 14px 12px 12px; }
  .xp-card__img { height: 150px; }
  .xp-card__name { font-size: .95rem; }
}

/* ================= content pages (F6): private label, about, contact, export, custom pages, 404 ================= */
:where(body.ex) :where(ol) { margin: 0; padding: 0; list-style: none; }
:where(.xpage-head h1, .xs-head h2, .ex-head h2, .xprose h2, .xfaq h2, .xa-manifesto p) em { font-style: normal; color: var(--ex-copper); }
.xpage-head--navy { position: relative; isolation: isolate; overflow: hidden; background: var(--ex-navy); color: #fff; padding-block: clamp(56px, 7vw, 104px); }
.xpage-head--navy > .ex-wrap { position: relative; z-index: 1; }
.xpage-head--navy p { color: rgba(255, 255, 255, .86); }
/* the navy band's own parts: breadcrumb, category chips, catalogue link */
.xpage-head--navy h1 { color: #fff; }
.xpage-head--navy .xd-crumb, .xpage-head--navy .xd-crumb a { color: rgba(255, 255, 255, .74); }
.xpage-head--navy .xd-crumb a:hover { color: #fff; }
.xpage-head--navy .xd-crumb [aria-current] { color: #fff; }
.xpage-head--navy .xg-jump a { border-color: rgba(255, 255, 255, .4); color: #fff; }
.xpage-head--navy .xg-jump a:hover { border-color: var(--ex-copper); color: var(--ex-copper); }
.xpage-head--navy .xg-jump span { color: rgba(255, 255, 255, .64); }
.xpage-head--navy .xpage-head__dl, .xpage-head--navy .xpage-head__dl a { color: #fff; }
.xpage-head--navy .xpage-head__dl .ex-arrow { color: var(--ex-copper); }
.xpage-head--navy.xg-head { padding-block: clamp(36px, 4.4vw, 64px); }
.xg-head + .ex-spine + .xg { margin-top: clamp(20px, 2.4vw, 32px); }
:where(.xt-grid, .xct, .xfaq, .xprose, .x404) :is(a, button, summary, input, select, textarea) { transition: border-color .15s, background-color .15s, color .15s, text-decoration-color .15s; }

/* ---------- sections ---------- */
.xs { padding-block: clamp(48px, 6vw, 88px); }
.xs--alt { background: var(--ex-bg2); }
.xs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; margin-bottom: clamp(24px, 3vw, 40px); }
.xs-head h2 { max-width: 20ch; font-size: var(--ex-h2); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.xs-head p { max-width: 52ch; font-size: 1.05rem; color: var(--ex-muted); }

/* ---------- numbered steps (private label, process page, custom "steps" blocks) ---------- */
.xsteps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-top: 2px solid var(--ex-navy); }
.xsteps li { padding: 22px 24px 8px 0; }
.xsteps li + li { padding-inline-start: 24px; border-inline-start: 1px solid #D5D9E0; }
.xsteps__n { display: block; margin-bottom: 14px; color: var(--ex-copper); font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.xsteps h3 { font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.xsteps p { margin-top: 8px; font-size: .96rem; color: var(--ex-muted); }
.xsteps__img { display: block; margin-top: 16px; }
.xsteps__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

/* ---------- three-up cards ---------- */
.xcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.xcards li { position: relative; padding: 34px 26px 28px; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; }
.xcards h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.xcards p { margin-top: 10px; color: var(--ex-muted); }
/* a card with a photo: the photo flush at the top, no copper mark */
.xcards li:has(.xcards__img) { padding: 0 0 24px; overflow: hidden; }
.xcards li:has(.xcards__img) h3, .xcards li:has(.xcards__img) p { padding-inline: 24px; }
.xcards__img { display: block; margin: 0 0 20px; }
.xcards__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- private label containers ---------- */
.xt-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.xt-filters button { min-height: 44px; padding: 0 16px; border: 1px solid #8A93A3; border-radius: 999px; background: #fff; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.xt-filters button:hover { border-color: var(--ex-navy); }
.xt-filters button[aria-pressed="true"] { background: var(--ex-navy); border-color: var(--ex-navy); color: #fff; }
/* tabs: tubes / glass / plastic / jars (without JS the tab row is hidden and every panel shows under its heading) */
.xt-tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 28px; border-bottom: 1px solid var(--ex-line); }
html.no-js .xt-tabs { display: none; }
.xt-tabs [role="tab"] { min-height: 48px; padding: 0 2px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; font-size: 1rem; font-weight: 700; color: var(--ex-muted); cursor: pointer; }
.xt-tabs [role="tab"] span { font-weight: 600; }
.xt-tabs [role="tab"]:hover { color: var(--ex-navy); }
.xt-tabs [role="tab"][aria-selected="true"] { color: var(--ex-navy); border-bottom-color: var(--ex-copper); }
.xt-panel[hidden] { display: none; }
.xt-panel:focus-visible { outline: 2px solid var(--ex-copper); outline-offset: 6px; }
.xt-panel + .xt-panel { margin-top: 40px; }
.xt-panel__h { margin-bottom: 18px; font-size: 1.3rem; font-weight: 800; }
html:not(.no-js) .xt-panel__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.no-js) .xt-panel + .xt-panel { margin-top: 0; }
.xt-group[hidden] { display: none; }
.xt-group + .xt-group { margin-top: 36px; }
.xt-group h4 { margin: 0 0 14px; font-size: 1.05rem; font-weight: 800; }
.xt-group h4 span { font-weight: 600; color: var(--ex-muted); }
.xt-note { margin-bottom: 16px; font-size: .9rem; color: var(--ex-muted); }
.xt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.xt-card { display: flex; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; transition: border-color .15s; }
.xt-card:hover, .xt-card:focus-within { border-color: var(--ex-navy); }
.xt-card__link { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 16px; border-radius: 8px; cursor: zoom-in; }
.xt-card__img { display: flex; align-items: flex-end; justify-content: center; height: 180px; margin-bottom: 12px; }
.xt-card__img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
.xt-card__label { font-weight: 800; }
.xt-card__dims { font-size: .88rem; color: var(--ex-muted); }
/* first 24 cards of a panel, then "Show all (n)" (main.js) */
.xt-card[hidden], .xt-group.is-cut, .xt-more[hidden] { display: none; }
.xt-more { display: flex; margin: 28px auto 0; cursor: pointer; }
/* what the private-label service produces: plain names, no images */
.xcan { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.xcan li { display: flex; align-items: center; min-height: 64px; padding: 14px 20px; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 800; letter-spacing: -.01em; }
.xcan-grp + .xcan-grp { margin-top: 32px; }
.xcan-grp h3 { margin-bottom: 14px; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-copper-ink); }
/* what a tab's containers are for, and the use label on a card */
.xt-desc { margin-bottom: 16px; max-width: 60ch; }
.xt-card__use { margin-top: 6px; font-size: .8125rem; font-weight: 700; color: var(--ex-copper); }

/* ---------- lightbox (markup from main.js) ---------- */
body.ex .lb { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: rgba(15, 35, 65, .94); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, visibility .15s; }
body.ex .lb.open { opacity: 1; visibility: visible; pointer-events: auto; }
body.ex .lb img { max-width: min(92vw, 900px); max-height: 68vh; object-fit: contain; }
body.ex .lb-cap { position: absolute; inset-inline: 16px; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: #fff; font-weight: 600; }
body.ex .lb-x { position: absolute; top: 18px; inset-inline-end: 18px; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .5); background: none; color: #fff; cursor: pointer; }
body.ex .lb-x::before, body.ex .lb-x::after { content: ""; position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; background: currentColor; transform: rotate(45deg); }
body.ex .lb-x::after { transform: rotate(-45deg); }

/* ---------- about ---------- */
/* ---------- about ---------- */
/* manifesto: the statement, then the six brands it names as their own logos */
.xa-manifesto p { max-width: 30ch; font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
.xa-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--ex-line); }
.xa-logos a { display: block; color: var(--ex-navy); transition: color .2s; }
.xa-logos a:hover, .xa-logos a:focus-visible { color: var(--bc); }
.xa-logos .xbl { width: auto; height: clamp(24px, 2.6vw, 34px); }
/* journey: the upright building photo, beside it a timeline that ends in today's figures */
.xa-journey.has-photo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(28px, 5vw, 80px); }
.xa-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.xa-tl { position: relative; margin: 0; padding: 0; list-style: none; }
.xa-tl::before { content: ""; position: absolute; inset-inline-start: 7px; top: 14px; bottom: 14px; width: 2px; background: #CBD1DA; }
.xa-tl li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-block: 0 clamp(28px, 3.4vw, 44px); padding-inline-start: 44px; }
.xa-tl li:last-child { padding-bottom: 0; }
.xa-tl li::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--ex-bg2); border: 3px solid var(--ex-copper); }
.xa-tl li.is-today::before { background: var(--ex-copper); }
.xa-tl b { color: var(--ex-copper); font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.xa-tl li.is-today b { color: var(--ex-navy); }
.xa-tl p { max-width: 46ch; font-size: 1.05rem; color: var(--ex-navy); }
.xa-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.xa-today div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px 18px; background: #fff; border-radius: 8px; }
.xa-today dd { margin: 0; color: var(--ex-navy); font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.xa-today dt { font-size: .85rem; line-height: 1.3; color: var(--ex-muted); }
/* large-type rows beside their heading (about values, quality documents) */
.xrows { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.xrows .xs-head { margin: 0; }
.xrows ul { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ex-navy); }
.xrows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding-block: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--ex-line); }
.xrows h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.xrows p { font-size: 1.02rem; color: var(--ex-muted); }
/* ---------- quality ---------- */
/* opening: the home hero's navy panel beside the lab photo, shorter */
.ex-hero.xq-hero { grid-template-columns: 42fr 58fr; min-height: clamp(380px, 34vw, 540px); }
.xq-hero .ex-hero__stage { aspect-ratio: auto; }
.xq-hero .ex-hero__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
/* checks: numbered steps from the first sample to shipment; the number sits on the photo's corner */
.xq-checks { background: var(--ex-bg2); }
.xq-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.xq-steps li { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; }
.xq-step__img { position: relative; display: block; }
.xq-step__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.xq-step__img b { position: absolute; inset-inline-start: 0; bottom: 0; display: grid; place-items: center; min-width: 64px; height: 56px; padding-inline: 14px; background: var(--ex-navy); color: var(--ex-copper); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; border-start-end-radius: 8px; }
.xq-steps h3 { padding: 22px 24px 0; font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.xq-steps p { padding: 8px 24px 26px; color: var(--ex-muted); }
/* documents: the rows, each code the text names set as a stamp */
.xq-docs li > div { display: flex; flex-direction: column; gap: 12px; }
.xq-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.xq-tags span { padding: 5px 10px; border: 1.5px solid var(--ex-copper); border-radius: 6px; color: var(--ex-copper-ink); font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
@media (max-width: 860px) {
  .ex-hero.xq-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .xq-hero .ex-hero__stage { aspect-ratio: 4 / 3; }
  .xq-steps { grid-template-columns: minmax(0, 1fr); }
}
/* R&D, design and graphics: the text beside two photos, the second set lower */
.xa-team { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.xa-team .xs-head { display: block; margin: 0; }
.xa-team .xs-head p { margin-top: 18px; }
.xa-team__img { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 20px); align-items: start; }
.xa-team__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.xa-team__img img:nth-child(2) { margin-top: clamp(32px, 5vw, 72px); }
@media (max-width: 860px) {
  .xa-journey.has-photo, .xrows, .xa-team, .xrows li { grid-template-columns: minmax(0, 1fr); }
  .xa-photo img { aspect-ratio: 4 / 3; }
  .xa-logos { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .xa-today { grid-template-columns: minmax(0, 1fr); }
  .xa-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; justify-items: center; }
  .xa-logos .xbl { height: 22px; max-width: 100%; }
  .xa-today div { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; }
  .xa-team__img img { aspect-ratio: 3 / 4; }
}

/* ---------- custom page blocks ---------- */
.xprose { max-width: 68ch; }
.xprose h2, .xfaq h2 { margin-bottom: 18px; font-size: var(--ex-h2); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.xprose p { font-size: 1.08rem; line-height: 1.7; }
.xprose p + p { margin-top: 1em; }
.xprose a, .xfaq__a a { text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .2em; }
.xchecks li { position: relative; padding-block: 12px; padding-inline-start: 30px; border-bottom: 1px solid var(--ex-line); }
.xchecks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 18px; width: 12px; height: 7px; border-left: 2px solid var(--ex-copper); border-bottom: 2px solid var(--ex-copper); transform: rotate(-45deg); }
.xfaq { max-width: 920px; }
.xs:has(> .ex-wrap > .xfaq) { background: var(--ex-bg2); }
.xfaq details { margin-bottom: 10px; padding-inline: 24px; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; }
.xfaq details[open] { border-color: var(--ex-copper); }

.xfaq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 16px; font-size: clamp(1.08rem, 1.4vw, 1.25rem); font-weight: 800; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.xfaq summary::-webkit-details-marker { display: none; }
.xfaq summary::after { content: "+"; flex: none; color: var(--ex-copper); font-size: 1.8rem; font-weight: 400; line-height: 1; transition: transform .15s; }
.xfaq details[open] summary::after { transform: rotate(45deg); }
.xfaq summary:hover { text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .25em; }
.xfaq__a { max-width: 68ch; padding-bottom: 22px; font-size: 1.05rem; line-height: 1.65; color: var(--ex-muted); }
.xfaq__a p + p { margin-top: .8em; }
.xsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.xsplit--flip .xsplit__media { order: -1; }
.xsplit__media img { width: 100%; height: auto; }
.xfaq-more { padding-block: 0 clamp(48px, 6vw, 88px); }
.xs:has(> .ex-wrap > .xfaq) + .xfaq-more { padding-top: 0; }
.xfaq-more p { font-size: 1.08rem; font-weight: 600; }
.xfaq-more a { text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .2em; }

/* ---------- contact ---------- */
/* contact: navy opening with the direct lines large, two doors that show their subject, the details as one band */
.xq-hero.xct-hero .ex-hero__stage img { object-position: 50% 72%; }
.xct-direct { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.xct-big { align-self: flex-start; color: #fff; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; text-decoration: underline; text-decoration-color: var(--ex-copper); text-decoration-thickness: 2px; text-underline-offset: .22em; overflow-wrap: anywhere; }
.xct-big:hover { color: var(--ex-copper); }
.xct-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.xct-door { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; overflow: hidden; scroll-margin-top: 96px; }
.xct-door__shelf { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1.2vw, 16px); height: clamp(150px, 14vw, 200px); padding: 22px 22px 0; background: color-mix(in srgb, var(--ex-copper) 7%, #fff); border-bottom: 3px solid var(--ex-copper); }
.xct-door__shelf img { width: auto; height: 100%; max-width: 15%; object-fit: contain; object-position: bottom; }
.xct-door__shelf--pl img { max-width: 22%; }
.xct-door__shelf--pl img:nth-child(2) { height: 60%; }
.xct-door__shelf--pl img:nth-child(3) { height: 52%; }
.xct-door__shelf--pl img:nth-child(4) { height: 70%; }
.xct-door__body { flex: 1; display: flex; flex-direction: column; padding: 26px 28px 28px; }
.xct-door h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; }
.xct-door__who { margin-top: 8px; color: var(--ex-muted); }
.xct-door__send { margin-top: 18px; font-weight: 700; }
.xct-door ul { flex: 1; margin: 8px 0 22px; padding-inline-start: 1.2em; list-style: disc; }
.xct-door li { line-height: 1.6; }
.xct-door li::marker { color: var(--ex-copper); }
.xct-door li a { text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .2em; }
.xct-door .xb { align-self: flex-start; white-space: normal; text-align: center; }
@media (max-width: 760px) { .xct-doors { grid-template-columns: minmax(0, 1fr); } }
.xct-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.xct-info > div { padding-block: 4px; }
.xct-info h2 { margin-bottom: 10px; font: 700 .8125rem/1.2 var(--ex-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ex-copper-ink); }
.xct-info p { font-size: 1.05rem; line-height: 1.7; overflow-wrap: anywhere; }
.xct-info p a { text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .25em; }
.xct-info p a:hover { text-decoration-color: var(--ex-navy); }
.xct-fax { font-size: .92rem; color: var(--ex-muted); }
@media (max-width: 1100px) { .xct-info { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 520px) { .xct-info { grid-template-columns: minmax(0, 1fr); } }
.xct-social { display: flex; flex-wrap: wrap; gap: 8px; }
.xct-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #8A93A3; border-radius: 50%; }
.xct-social a:hover { background: var(--ex-navy); border-color: var(--ex-navy); color: #fff; }
.xct-social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- export markets ---------- */
/* export: globe beside the regions (the home page's large rows), a copper duty band, categories with their packs */
.xexp__in { padding-block: 0; }
.xexp .xs-head { margin-bottom: 0; }
.xexp-more { margin-top: 16px; font-weight: 600; color: var(--ex-muted); }
.xexp-fta { background: color-mix(in srgb, var(--ex-copper) 14%, #fff); padding-block: clamp(36px, 4.4vw, 64px); }
.xexp-fta__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(24px, 5vw, 80px); align-items: start; }
.xexp-fta h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.xexp-fta__in > div { display: flex; flex-direction: column; gap: 14px; }
.xexp-fta p { font-size: 1.05rem; line-height: 1.6; }
.xexp-fta .xq-tags span { background: #fff; }
body.ex .vbg.vbg-plain.xexp-video { margin-top: clamp(40px, 5vw, 72px); }
.xexp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.xexp-cat { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 8px; overflow: hidden; color: var(--ex-navy); text-decoration: none; }
.xexp-cat__packs { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1.4vw, 18px); height: clamp(170px, 16vw, 230px); padding: 22px 22px 0; background: color-mix(in srgb, var(--ex-copper) 7%, #fff); border-bottom: 3px solid var(--ex-copper); }
.xexp-cat__packs img { width: auto; height: 100%; max-width: 24%; object-fit: contain; object-position: bottom; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.xexp-cat:hover .xexp-cat__packs img { transform: translateY(-5px); }
.xexp-cat__txt { display: block; padding: 22px 26px 4px; }
.xexp-cat h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.xexp-cat__n { margin-top: 6px; font-weight: 700; }
.xexp-cat__list { margin-top: 8px; color: var(--ex-muted); }
.xexp-cat > .ex-arrow { margin: 14px 26px 24px; color: var(--ex-copper-ink); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.xexp-cat:hover > .ex-arrow { transform: translateX(4px); }
[dir="rtl"] .xexp-cat:hover > .ex-arrow { transform: translateX(-4px); }
.xexp-cat:focus-visible { outline: 3px solid var(--ex-copper); outline-offset: 3px; }
@media (max-width: 860px) { .xexp-fta__in { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .xexp-cat__packs img, .xexp-cat > .ex-arrow { transition: none; } }

/* ---------- product detail: next step under the facts ---------- */
.xd-ask { margin-top: 28px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--ex-line); border-radius: 8px; }
.xd-ask__h { margin-bottom: 14px; font-size: 1.1rem; font-weight: 800; }
.xd-ask .xd-ask__mail { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
.xd-ask .xd-ask__sample { width: 100%; margin-top: 8px; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; border-color: var(--ex-navy); color: var(--ex-navy); }
.xd-ask .xd-ask__sample:hover { background: var(--ex-navy); color: #fff; }
.xd-data { margin-top: 28px; }
.xd-data h2 { margin: 0; font: 700 .8125rem/1.2 var(--ex-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ex-muted); }
.xd-data .xd-spec { margin-top: 10px; }
.xd-data dd { overflow-wrap: anywhere; }
.xd-ask__alt { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; }
.xd-ask__alt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .2em; }
.xd-ask__alt a:hover { text-decoration-color: var(--ex-navy); }
.xd-ask__note { margin-top: 6px; font-size: .9rem; color: var(--ex-muted); }
.xd-pl { margin-top: 14px; font-size: .95rem; }
.xd-pl a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .2em; }
.xd-pl a:hover { text-decoration-color: var(--ex-navy); }
/* phones: email + phone stay at the bottom of the screen; sticky at the end of the content, so it stops above the footer */
.xd-bar { display: none; }
@media (max-width: 560px) {
  .xd-bar { position: sticky; bottom: 0; z-index: 45; display: flex; gap: 8px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--ex-line); box-shadow: 0 -8px 20px -14px rgba(15, 35, 65, .45); transition: opacity .15s, transform .15s, visibility .15s; }
  /* hidden while the contact block with the same button is on screen (main.js) */
  .xd-bar.is-off { opacity: 0; transform: translateY(100%); visibility: hidden; pointer-events: none; }
  .xd-bar .xb { flex: 1; min-width: 0; min-height: 44px; padding-inline: 12px; white-space: normal; text-align: center; line-height: 1.15; }
  .xd-bar__tel { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--ex-navy); border-radius: 6px; color: var(--ex-navy); }
  .xd-bar__tel svg { width: 20px; height: 20px; fill: currentColor; }
  body.ex:has(.xd-bar) .wa { bottom: 76px; }
}

/* ---------- product without an image: brand card (brand colour on top, brand, name, size) ---------- */
.xp-ph { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 18px 16px; border-radius: 0; border-top: 6px solid var(--bc, var(--ex-copper)); background: #F5F6F8; color: var(--ex-navy); text-align: start; }
.xp-ph__brand { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-muted); }
.xp-ph__name { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: anywhere; }
.xp-ph__size { font-size: .85rem; font-weight: 600; color: var(--ex-muted); }
.xd-stage .xp-ph { padding: 10% 9%; border-radius: 8px; border-top-width: 10px; }
.xd-stage .xp-ph__brand { font-size: .9rem; }
.xd-stage .xp-ph__name { font-size: clamp(1.8rem, 4vw, 3rem); }
.xd-stage .xp-ph__size { font-size: 1rem; }

/* ---------- inner pages: one product scene photo under the heading ---------- */
.xpage-photo { width: min(100%, 420px); margin: 0 0 clamp(28px, 3.4vw, 48px); }
.xpage-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; border-radius: 8px; }
.xpage-photo--wide img { aspect-ratio: 16 / 7; }
.xpage-photo--wide { width: min(100%, 760px); }
.xpage-photo--hall { width: 100%; }
.xpage-photo--hall img { aspect-ratio: 21 / 9; object-position: 50% 55%; }
.xpage-photo--tall img { aspect-ratio: 3 / 4; object-position: 50% 40%; }
/* contact: the building photo beside the address block */
/* facility gallery: small captioned photos that open in the lightbox */
.xfac-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.xfac-gal a { display: block; border-radius: 8px; }
.xfac-gal img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.xfac-gal figcaption { margin-top: 10px; font-size: 1rem; font-weight: 700; color: var(--ex-navy); }

/* ---------- brands page: the product types of a brand as links ---------- */
.xbr-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; max-width: 80ch; }
.xbr-types a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #8A93A3; border-radius: 999px; background: #fff; font-size: .88rem; font-weight: 600; line-height: 1.2; }
.xbr-types a:hover { border-color: var(--ex-navy); }

/* ---------- home hero: where it is made ---------- */
.ex-hero__panel p.ex-hero__loc { margin-top: -16px; font-size: .9rem; font-weight: 700; letter-spacing: .01em; color: var(--ex-copper); }

/* ---------- 404 ---------- */
.x404 { padding-block: clamp(56px, 8vw, 120px); }
.x404__code { color: var(--ex-copper); font-size: clamp(5rem, 14vw, 11rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.x404 h1 { margin-top: 16px; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.x404 h1 + p { margin: 12px 0 28px; max-width: 52ch; font-size: 1.08rem; color: var(--ex-muted); }

/* the menu has seven entries: tighter spacing before the burger takes over */
@media (min-width: 1341px) and (max-width: 1560px) {
  .xh-in, .xh-nav { gap: 16px; }
  .xh-lang { margin-inline-start: 0; padding-inline-start: 14px; }
}
@media (max-width: 1100px) {
  .xsteps--long { grid-template-columns: minmax(0, 1fr); }
  .xsteps--long li, .xsteps--long li + li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-inline-start: 0; border-bottom: 1px solid #D5D9E0; }
  .xsteps--long .xsteps__n { grid-row: span 2; margin: 0; font-size: 2rem; }
}
@media (max-width: 860px) {
  .xsteps { grid-template-columns: minmax(0, 1fr); }
  .xsteps li, .xsteps li + li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-inline-start: 0; border-bottom: 1px solid #D5D9E0; }
  .xsteps__n { grid-row: span 2; margin: 0; font-size: 2rem; }
  /* the step image goes above the title; the number spans image, title and text */
  .xsteps__img { grid-column: 2; grid-row: 1; margin: 0 0 12px; }
  .xsteps li:has(.xsteps__img) .xsteps__n { grid-row: span 3; }
  .xa-journey.has-photo { grid-template-columns: minmax(0, 1fr); }
  .xpage-photo--hall img { aspect-ratio: 4 / 3; }
  .xsplit { grid-template-columns: minmax(0, 1fr); }
  .xsplit--flip .xsplit__media { order: 0; }
}
@media (max-width: 520px) {
  .xt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xt-card { padding: 12px 10px 4px; }
  .xt-card__img { height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ex *, body.ex *::before, body.ex *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- plain (untinted) clip, e.g. the warehouse on the export page ---------- */
body.ex .vbg.vbg-plain { position: relative; inset: auto; width: min(var(--ex-max), 100% - 2 * var(--ex-pad)); margin: 0 auto clamp(40px, 5vw, 72px); aspect-ratio: 16 / 7; border-radius: 8px; mix-blend-mode: normal; opacity: 1; -webkit-mask-image: none; mask-image: none; background: #E3E5E9 center / cover no-repeat; }
body.ex .vbg.vbg-plain video { filter: none; }
body.ex .vbg.vbg-plain::after { display: none; }

/* ---------- production in motion: portrait loops on navy ---------- */
.ex-motion { margin-top: clamp(56px, 7vw, 104px); background: var(--ex-navy); color: #fff; padding-block: clamp(48px, 6vw, 88px); }
.ex-motion h2 { font-size: var(--ex-h2); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.ex-motion .ex-lead { color: rgba(255, 255, 255, .86); }
.ex-motion__grid { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ex-motion__grid li:nth-child(even) { margin-top: clamp(0px, 3vw, 40px); }
.ex-motion__grid p { margin: 12px 0 0; font-weight: 700; padding-inline-start: 12px; border-inline-start: 2px solid var(--ex-copper); }
body.ex .vbg.vbg-tile { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; border-radius: 8px; mix-blend-mode: normal; opacity: 1; -webkit-mask-image: none; mask-image: none; background: #1B3358 center / cover no-repeat; }
body.ex .vbg.vbg-tile video { filter: none; }
body.ex .vbg.vbg-tile::after { display: none; }
@media (max-width: 860px) { .ex-motion__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-motion__grid li:nth-child(even) { margin-top: 0; } }

.xpage-photo--full { width: 100%; }
.xpage-photo--full img { aspect-ratio: 16 / 8; object-position: 50% 30%; }

/* logo links: 44px touch height without moving the wordmark */
.xh-word, .xf-word { display: inline-flex; align-items: center; min-height: 44px; }
.xf-word { margin-bottom: 4px; }

.ex-note { margin: 18px 0 0; font-size: .85rem; color: rgba(255, 255, 255, .78); }
.ex-note--light { color: var(--ex-muted); margin: 0 0 18px; }

/* six brand colours as a structural rule between the hero and the gates */
.ex-spine { display: grid; grid-template-columns: repeat(6, 1fr); height: 6px; }
.ex-spine i { background: var(--bc); }

/* seal + wordmark */
.xh-word, .xf-word { gap: 12px; }
.xw-seal { display: block; width: 52px; aspect-ratio: 1; flex: none; margin-block: -4px; background: currentColor; -webkit-mask: url(../img/logo-seal-mono.svg) center / contain no-repeat; mask: url(../img/logo-seal-mono.svg) center / contain no-repeat; }
.xf-word .xw-seal { width: 56px; }
@media (max-width: 600px) { .xw-seal { width: 40px; margin-block: -2px; } .xh-word { gap: 8px; } }

/* brand wordmarks: one-colour SVGs traced from the pack artwork, painted in the text colour */
.xbl { display: block; width: var(--lw, 168px); aspect-ratio: var(--ar); background: currentColor; -webkit-mask: var(--lg) left center / contain no-repeat; mask: var(--lg) left center / contain no-repeat; }
.xbl--lg { --lw: clamp(150px, 20vw, 230px); }
.xbl--ranex { --ar: 1418 / 480; --lg: url(../img/brands/ranex.svg); }
.xbl--bonamour { --ar: 429 / 124; --lg: url(../img/brands/bonamour.svg); }
.xbl--airmagic { --ar: 424 / 114; --lg: url(../img/brands/airmagic.svg); }
.xbl--purixima { --ar: 412 / 90; --lg: url(../img/brands/purixima.svg); }
.xbl--xblock { --ar: 1766 / 361; --lg: url(../img/brands/xblock.svg); }
.xbl--chastity { --ar: 1257 / 401; --lg: url(../img/brands/chastity.svg); }

/* studio range photos on the brands page: wide shots, scrollable on phones */
.xbr-ranges { display: grid; gap: clamp(8px, 1.4vw, 16px); margin-top: clamp(20px, 2.4vw, 32px); }
.xbr-fig { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; background: #fff; }
.xbr-fig img { display: block; width: 100%; min-width: 640px; height: auto; }

/* F1: short practical note under a section (label language, duty advantage) */
.xnote { margin-top: 28px; padding-inline-start: 18px; border-inline-start: 3px solid var(--ex-copper); max-width: 62ch; }
.xnote h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.xnote p { line-height: 1.6; }
.xct-other { margin-top: 22px; max-width: 70ch; color: var(--ex-muted); line-height: 1.6; }
.xct-other a { text-decoration: underline; text-decoration-color: var(--ex-copper); text-underline-offset: .2em; }

/* brands page: campaign banners, each a link to the brand's products of that type */
.xbr-banners { display: grid; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(20px, 2.4vw, 32px); }
.xbr-ban { position: relative; display: block; overflow: hidden; border-radius: 8px; background: var(--ex-line); }
.xbr-ban img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.xbr-ban:hover img { transform: scale(1.02); }
.xbr-ban__tag { position: absolute; inset-inline-start: 0; bottom: 0; display: flex; align-items: stretch; max-width: calc(100% - 24px); background: #fff; color: var(--ex-navy); border-start-end-radius: 8px; }
.xbr-ban__txt { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 18px 12px 20px; min-width: 0; }
.xbr-ban__brand { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-copper-ink); }
.xbr-ban__line { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.xbr-ban__go { display: grid; place-items: center; width: 60px; flex: none; background: var(--ex-navy); color: #fff; border-start-end-radius: 8px; transition: background-color .2s; }
.xbr-ban__go .ex-arrow { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.xbr-ban:hover .xbr-ban__go, .xbr-ban:focus-visible .xbr-ban__go { background: var(--ex-copper); }
.xbr-ban:hover .xbr-ban__go .ex-arrow, .xbr-ban:focus-visible .xbr-ban__go .ex-arrow { transform: translateX(4px); }
[dir="rtl"] .xbr-ban:hover .xbr-ban__go .ex-arrow, [dir="rtl"] .xbr-ban:focus-visible .xbr-ban__go .ex-arrow { transform: translateX(-4px); }
.xbr-ban:focus-visible { outline: 3px solid var(--ex-copper); outline-offset: 3px; }
@media (max-width: 560px) {
  .xbr-ban { border: 1px solid var(--ex-line); }
  .xbr-ban__tag { position: static; max-width: none; border-radius: 0; }
  .xbr-ban__txt { flex: 1; padding: 10px 14px; }
  .xbr-ban__go { width: 52px; border-radius: 0; }
}
@media (min-width: 900px) {
  .xbr-ban { height: clamp(320px, 31vw, 450px); }
  .xbr-ban img { height: 100%; object-fit: cover; }
}
@media (prefers-reduced-motion: reduce) { .xbr-ban img { transition: none; } }
/* privacy: one continuous text, sections close together */
body[data-page="privacy"] main .xs { padding-block: clamp(18px, 2.2vw, 32px); }
body[data-page="privacy"] main .xs:first-of-type { padding-top: clamp(48px, 6vw, 88px); }
body[data-page="privacy"] main .xs:last-of-type { padding-bottom: clamp(48px, 6vw, 88px); }
body[data-page="privacy"] .xprose h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 10px; }
/* FAQ: the whole page body on grey, the questions as white cards */
body[data-page="faq"] main { background: var(--ex-bg2); }

/* ---------- world globe ---------- */
.wm { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(24px, 5vw, 80px); }
.wm [hidden] { display: none !important; }
.ex-markets__in:has(> .wm) { display: block; }
.wm-map { display: flex; flex-direction: column; align-items: center; }
.wm-stage { position: relative; width: min(100%, 680px); aspect-ratio: 1; }
/* a soft halo behind the globe */
.wm-globe { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; cursor: grab; touch-action: pan-y; opacity: 0; transform: scale(.94); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.wm.is-live .wm-globe { opacity: 1; transform: none; }
.wm-globe:active { cursor: grabbing; }
.wm.is-off .wm-stage { display: none; }
.wm-tip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 12px)); padding: 5px 10px; background: #fff; color: var(--ex-navy); border-radius: 6px; box-shadow: 0 4px 14px rgba(11, 26, 49, .18); font-size: .85rem; font-weight: 800; white-space: nowrap; pointer-events: none; }
.wm-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin-top: 18px; }
.wm-pick select { min-height: 44px; min-width: min(280px, 100%); padding: 0 12px; border: 1px solid #7A8599; border-radius: 6px; background: #fff; color: var(--ex-navy); font-size: .95rem; }
.wm-reset { min-height: 44px; padding: 0 16px; border: 1px solid var(--ex-navy); border-radius: 6px; background: #fff; color: var(--ex-navy); font-weight: 700; cursor: pointer; }
.wm-reset:hover { background: var(--ex-navy); color: #fff; }
.wm .ex-regions button { all: unset; display: flex; align-items: center; gap: 16px; width: 100%; cursor: pointer; }
.wm .ex-regions li:has(button)::before { display: none; }
.wm .ex-regions button::before { content: ""; flex: none; width: 22px; height: 4px; background: var(--ex-copper); transition: width .2s; }
.wm .ex-regions button:hover, .wm .ex-regions button[aria-pressed="true"] { color: var(--ex-copper-ink); }
.wm .ex-regions button:hover::before, .wm .ex-regions button[aria-pressed="true"]::before { width: 34px; }
.wm .ex-regions button:focus-visible { outline: 2px solid var(--ex-copper); outline-offset: 4px; }
.wm-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wm-card__tag { font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ex-copper-ink); }
.wm-card__tag:empty { display: none; }
.wm-card h3 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; }
.wm-card p { max-width: 40ch; font-size: 1.05rem; color: var(--ex-muted); }
.wm-card .xb { margin-top: 6px; white-space: normal; }
.wm-back { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--ex-navy); }
@media (max-width: 860px) { .wm { grid-template-columns: minmax(0, 1fr); } .wm-stage { width: min(100%, 420px); } }
@media (prefers-reduced-motion: reduce) { .wm-globe, .wm .ex-regions button::before { transition: none; } }

/* product group grid: each brand + line starts a new row under a small label */
.xg-break { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ex-copper-ink); list-style: none; }
.xg-break:first-child { margin-top: 0; }
.xg-break::after { content: ""; flex: 1; height: 1px; background: var(--ex-line); }