@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:300;font-display:block;src:url('./assets/fonts/material-symbols-subset.woff2') format('woff2')}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* tokens.css */
/* ====================================================================
 *  Xin Xiao Mu Eco-Wood — Design Tokens
 *  Source:  "Artisanal Industrialist" design system (DESIGN.md)
 *  Generated for prototype. Will be ported to WordPress theme later.
 * ==================================================================== */

:root {
  /* ——— Color: Brand ——— */
  --color-primary:          #072417;  /* Deep Forest Green — brand primary (logo/headings/footer) */
  --color-primary-dark:     #042013;  /* darker green */
  --color-primary-container:#0f3a27;
  --color-on-primary:       #ffffff;
  --color-on-primary-container: #aeceb9;

  /* ——— Color: Action (CTA accent) ——— */
  --color-secondary:        #F26522;  /* Brand Orange — CTA & accent */
  --color-secondary-dark:   #C9500F;  /* deeper orange for hover/text */
  --color-secondary-container: #FFE3D3; /* light orange tint */
  --color-on-secondary:     #ffffff;
  --color-on-secondary-container: #7a2e00;

  /* ——— Color: Tertiary / success ——— */
  --color-tertiary:         #0d4a32;  /* Deep Green — success/cert accents, same family as primary */
  --color-tertiary-container: #06251a;
  --color-on-tertiary:      #ffffff;

  /* ——— Color: Surface ——— */
  --color-background:       #f8f9fa;  /* Soft Off-White */
  --color-surface:          #ffffff;  /* Cards/panels pure white */
  --color-surface-dim:      #d9dadb;
  --color-surface-bright:   #f8f9fa;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #f3f4f5;
  --color-surface-container:        #edeeef;
  --color-surface-container-high:   #e7e8e9;
  --color-surface-container-highest:#e1e3e4;
  --color-surface-variant:  #e1e3e4;
  --color-on-surface:       #191c1d;
  --color-on-surface-variant: #414844;
  --color-on-background:    #191c1d;

  /* ——— Color: Outline ——— */
  --color-outline:          #717973;
  --color-outline-variant:  #c1c8c2;
  --color-border-subtle:    #E9ECEF;  /* card border in design system */
  --color-border-input:     #c1c8c2;

  /* ——— Color: Status ——— */
  --color-error:            #ba1a1a;
  --color-on-error:         #ffffff;
  --color-success:          #2D6A4F;
  --color-warning:          #D4A373;

  /* ——— Typography ——— */
  --font-serif:   "Montserrat", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;  /* headings */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, Arial, sans-serif;  /* body */
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace;

  --text-display-lg: 48px;
  --text-headline-lg: 32px;
  --text-headline-md: 24px;
  --text-headline-sm: 20px;
  --text-body-lg:     18px;
  --text-body-md:     16px;
  --text-body-sm:     14px;
  --text-label-md:    14px;
  --text-label-sm:    12px;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-base:  1.5;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;

  /* ——— Spacing: base 8 ——— */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --margin-mobile:  16px;
  --margin-desktop: 64px;

  --container-max: 1280px;
  --gutter:        24px;

  /* ——— Radius: Soft-Industrial ——— */
  --radius-sm:   2px;
  --radius:      4px;   /* default 0.25rem */
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ——— Shadow: soft ambient & floating (Material 3) ——— */
  --shadow-none: none;
  --shadow-input-focus: 0 0 0 2px rgba(242, 101, 34, 0.25);
  --shadow-ambient:  0 4px 12px rgba(25, 28, 29, 0.04);
  --shadow-floating: 0 8px 24px rgba(25, 28, 29, 0.08);
  --shadow-card:     var(--shadow-ambient);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration:      250ms;
  --duration-slow: 400ms;

  /* ——— z-index ——— */
  --z-sticky:   40;
  --z-overlay:  50;
  --z-modal:    60;
  --z-toast:    70;
}

/* ——— Breakpoints reference (use as media queries) ——— */
/*
  Mobile:  < 768px
  Tablet:  768-1023px
  Desktop: >= 1024px
*/

/* ——— Element resets / base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  line-height: var(--leading-base);
  color: var(--color-on-background);
  background-color: var(--color-background);
  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 600; line-height: var(--leading-tight); margin: 0; letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-display-lg); }
h2 { font-size: var(--text-headline-lg); }
h3 { font-size: var(--text-headline-md); }
h4 { font-size: var(--text-headline-sm); }
p  { margin: 0; }
a  { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }

/* ——— Utility: container ——— */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
@media (min-width: 1024px) { .container { padding-left: 32px; padding-right: 32px; } }

/* ——— Utility: label (uppercase tracking stamped) ——— */
.label { font-family: var(--font-sans); font-size: var(--text-label-sm); font-weight: 500; line-height: 16px; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.label-md { font-size: var(--text-label-md); line-height: 20px; font-weight: 600; }

/* ——— Button system ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius); font-weight: 600; font-size: var(--text-body-md); line-height: 1; transition: all var(--duration) var(--ease-out); min-height: 44px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-cta { background: var(--color-secondary); color: #ffffff; border-color: var(--color-secondary); }
.btn-cta:hover { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); }
.btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: rgba(242, 101, 34, 0.08); }
.btn-sm { padding: 8px 16px; min-height: 36px; font-size: var(--text-body-sm); }
.btn-lg { padding: 16px 32px; min-height: 52px; font-size: var(--text-body-lg); }
.btn-block { width: 100%; }

/* ——— Card ——— */
.card { background: #fff; border: 1px solid var(--color-border-subtle); border-radius: var(--radius); overflow: hidden; }
.card-product { transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); }
.card-product:hover { border-color: var(--color-secondary); transform: translateY(-2px); }

/* ——— Input ——— */
.input, .select, .textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--color-border-input); border-radius: var(--radius); background: #fff; color: var(--color-on-surface); font-size: 16px; min-height: 44px; transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); }
.textarea { min-height: 120px; resize: vertical; font-family: var(--font-sans); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-secondary); box-shadow: var(--shadow-input-focus); }
.field-label { display: block; font-family: var(--font-sans); font-size: var(--text-label-md); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: 8px; color: var(--color-on-surface-variant); }

/* ——— Section spacing ——— */
.section { padding: var(--space-12) 0; }
@media (min-width: 1024px) { .section { padding: var(--space-20) 0; } }
.section-title { margin-bottom: var(--space-8); text-align: center; }
.section-title h2 { margin-bottom: 12px; }
.section-title p  { color: var(--color-on-surface-variant); max-width: 720px; margin: 0 auto; font-size: var(--text-body-lg); }

/* ——— Badge / Cert seal ——— */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--text-label-sm); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.badge-success { background: rgba(7, 36, 23, 0.08); color: var(--color-tertiary); }
.badge-warning { background: rgba(212, 163, 115, 0.18); color: #7d562d; }
.badge-info    { background: rgba(27, 67, 50, 0.10); color: var(--color-primary); }

/* ——— Cert seal (circular stamped) ——— */
.cert-seal { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--color-primary); background: rgba(7, 36, 23, 0.06); color: var(--color-primary); font-family: var(--font-serif); font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center; letter-spacing: 0.05em; padding: 8px; }
.cert-seal strong { font-size: 16px; display: block; margin-bottom: 2px; }

/* ——— Visually hidden ——— */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ——— Sticky mobile bottom bar ——— */
@media (max-width: 767px) {
  body { padding-bottom: 72px; }
}

/* components.css */
/* ====================================================================
 *  XXM Components CSS — 4 个核心组件的样式
 *  - Modal (询盘弹窗)
 *  - Tier Calculator (阶梯定价 + MOQ)
 *  - Container Calculator (集装箱装载)
 *  - Product Gallery (产品画廊)
 *  - Spec Table (规格表)
 *  - Cert Grid (证书网格 + Lightbox)
 *  - Header / Footer / Section helpers
 *  - Sticky mobile CTA bar
 * ==================================================================== */

/* ——— Layout helpers (light) ——— */
.xxm-grid { display: grid; gap: 16px; }
.xxm-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .xxm-grid--2 { grid-template-columns: 1fr 1fr; } }
.xxm-grid--1 { grid-template-columns: 1fr; }

/* ——— Sticky mobile bottom CTA bar ——— */
.xxm-sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: #fff; border-top: 1px solid var(--color-border-subtle);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  gap: 10px; align-items: center;
}
@media (max-width: 767px) { .xxm-sticky-bar { display: flex; } }
.xxm-sticky-bar .btn { flex: 1; min-height: 48px; font-size: 15px; }

/* ——— Modal (InquiryModal) ——— */
.xxm-modal-open { overflow: hidden; }
.xxm-modal__backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(25, 28, 29, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: xxm-fade-in 0.18s var(--ease-out);
}
@keyframes xxm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.xxm-modal {
  position: relative; width: 100%; max-width: 760px; max-height: 92vh;
  background: var(--color-background); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18); overflow: hidden;
  display: flex; flex-direction: column;
  animation: xxm-pop-in 0.22s var(--ease-out);
}
@keyframes xxm-pop-in { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 767px) {
  .xxm-modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .xxm-modal__backdrop { padding: 0; }
}
.xxm-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: var(--radius);
  font-size: 28px; line-height: 1; color: var(--color-on-surface-variant);
  background: transparent; transition: background var(--duration);
  z-index: 2;
}
.xxm-modal__close:hover { background: rgba(0,0,0,0.05); }
.xxm-modal__head { padding: 28px 28px 0; }
.xxm-modal__eyebrow { color: var(--color-secondary-dark); margin-bottom: 4px; }
.xxm-modal__title { font-size: 24px; line-height: 1.25; margin: 0 0 6px; }
.xxm-modal__sub { color: var(--color-on-surface-variant); font-size: 14px; margin: 0; }
.xxm-modal__form { padding: 20px 28px 28px; overflow-y: auto; }
.xxm-field { margin-bottom: 14px; }
.xxm-req { color: #ba1a1a; margin-left: 4px; }
.xxm-field__hint { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 4px; }
.xxm-field__err { font-size: 12px; color: #ba1a1a; margin-top: 4px; display: none; }
.xxm-field__err.is-show { display: block; }
.xxm-consent { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; font-size: 13px; color: var(--color-on-surface-variant); }
.xxm-consent input { margin-top: 2px; }
.xxm-form__err-summary { color: #ba1a1a; font-size: 14px; margin: 8px 0; }

/* File drop */
.xxm-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.xxm-file-drop {
  border: 2px dashed var(--color-outline-variant);
  border-radius: var(--radius); padding: 20px;
  text-align: center; cursor: pointer;
  color: var(--color-on-surface-variant);
  background: var(--color-surface-container-low);
  transition: all var(--duration) var(--ease-out);
}
.xxm-file-drop:hover, .xxm-file-drop.is-drag { border-color: var(--color-secondary); background: rgba(242, 101, 34, 0.08); }
.xxm-file-drop__icon { color: var(--color-on-surface-variant); margin-bottom: 6px; }
.xxm-file-drop__hint { font-weight: 600; color: var(--color-on-surface); }
.xxm-file-drop__sub { font-size: 12px; margin-top: 4px; }
.xxm-file-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.xxm-file-list__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius); font-size: 13px;
  background: #fff;
}
.xxm-file-list__item.is-error { border-color: #ba1a1a; background: rgba(186, 26, 26, 0.04); }
.xxm-file-list__name { flex: 1; word-break: break-all; }
.xxm-file-list__size { color: var(--color-on-surface-variant); font-variant-numeric: tabular-nums; }
.xxm-file-list__err { color: #ba1a1a; font-size: 12px; flex-basis: 100%; }

/* Submit button loading state */
.xxm-btn-spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: xxm-spin 0.8s linear infinite; }
.xxm-btn-label { display: inline-flex; align-items: center; gap: 6px; }
.is-loading .xxm-btn-spinner { display: inline-block; }
.is-loading .xxm-btn-label { opacity: 0.7; }
@keyframes xxm-spin { to { transform: rotate(360deg); } }

/* ——— Tier Calculator ——— */
.xxm-tier { display: flex; flex-direction: column; gap: 20px; }
.xxm-tier__input-wrap {
  display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px;
  align-items: stretch;
}
.xxm-tier__input-wrap .input { text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.xxm-tier__input-wrap button {
  background: var(--color-surface-container);
  border-radius: var(--radius); font-size: 20px; font-weight: 700;
  color: var(--color-primary);
  transition: background var(--duration);
}
.xxm-tier__input-wrap button:hover { background: var(--color-surface-container-high); }
.xxm-tier__moq-hint {
  font-size: 13px; color: var(--color-on-surface-variant);
  padding: 8px 12px; background: var(--color-surface-container-low);
  border-left: 3px solid var(--color-tertiary); border-radius: 2px;
}
.xxm-tier__moq-hint.is-warn {
  background: rgba(242, 101, 34, 0.12);
  border-left-color: var(--color-secondary-dark);
  color: var(--color-secondary-dark);
}
.xxm-tier__moq-hint a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

.xxm-tier__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border-subtle); border-radius: var(--radius); }
.xxm-tier__table { width: 100%; border-collapse: collapse; min-width: 360px; }
.xxm-tier__table th, .xxm-tier__table td {
  padding: 12px 14px; text-align: left;
  font-size: 14px;
}
.xxm-tier__table thead th {
  background: var(--color-primary); color: var(--color-on-primary);
  font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; font-size: 12px;
}
.xxm-tier__table tbody tr { border-top: 1px solid var(--color-border-subtle); }
.xxm-tier__table tbody tr:nth-child(even) { background: var(--color-surface-container-lowest); }
.xxm-tier__table tbody tr.is-active { background: rgba(212, 163, 115, 0.12); }
.xxm-tier__table tbody tr.is-active td { color: var(--color-on-surface); font-weight: 600; }
.xxm-tier__table tbody td strong { font-family: var(--font-serif); font-size: 18px; color: var(--color-primary); }
.xxm-num { text-align: right; font-variant-numeric: tabular-nums; }

.xxm-tier__summary {
  padding: 16px; background: var(--color-primary); color: var(--color-on-primary);
  border-radius: var(--radius);
}
.xxm-tier__summary.is-empty { background: var(--color-surface-container-low); color: var(--color-on-surface-variant); text-align: center; }
.xxm-tier__sum-line { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.xxm-tier__sum-line + .xxm-tier__sum-line { margin-top: 6px; }
.xxm-tier__sum-line strong { font-family: var(--font-serif); font-size: 22px; }
.xxm-tier__sum-line.xxm-tier__sum-lead { padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.18); margin-top: 10px; font-size: 13px; }
.xxm-tier__sum-vip {
  margin-top: 10px; padding: 8px 12px;
  background: rgba(242, 101, 34, 0.18);
  border-radius: var(--radius-sm); font-size: 13px;
  color: var(--color-secondary-container);
}
.xxm-tier__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.xxm-tier__cta .btn { flex: 1; min-width: 200px; }

/* ——— Container Calculator ——— */
.xxm-container__grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .xxm-container__grid { grid-template-columns: repeat(3, 1fr); } }
.xxm-container__card {
  padding: 18px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius);
  transition: border-color var(--duration);
}
.xxm-container__card:hover { border-color: var(--color-secondary); }
.xxm-container__label { color: var(--color-primary); margin-bottom: 4px; }
.xxm-container__desc { font-size: 13px; color: var(--color-on-surface-variant); margin-bottom: 10px; }
.xxm-container__units { font-family: var(--font-serif); font-size: 28px; font-weight: 600; color: var(--color-primary); line-height: 1; }
.xxm-container__units span { font-family: var(--font-sans); font-size: 13px; color: var(--color-on-surface-variant); font-weight: 400; margin-left: 4px; }
.xxm-container__ctns { font-size: 13px; color: var(--color-on-surface-variant); margin-top: 4px; }
.xxm-container__ctns span { font-weight: 600; color: var(--color-on-surface); }
.xxm-container__note { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 14px; padding: 10px; background: var(--color-surface-container-low); border-radius: var(--radius-sm); }

/* ——— Product Gallery ——— */
.xxm-gallery { display: flex; flex-direction: column; gap: 12px; }
.xxm-gallery__main {
  position: relative; aspect-ratio: 4/3;
  background: var(--color-surface-container);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius); overflow: hidden;
}
.xxm-gallery__stage { width: 100%; height: 100%; }
.xxm-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xxm-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--color-primary);
  font-size: 24px; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration);
  z-index: 2;
}
.xxm-gallery__nav:hover { background: #fff; }
.xxm-gallery__nav--prev { left: 12px; }
.xxm-gallery__nav--next { right: 12px; }
.xxm-gallery__lens {
  display: none; position: absolute; pointer-events: none;
  width: 100px; height: 100px; border-radius: 50%;
  border: 2px solid var(--color-secondary);
  background-repeat: no-repeat; background-size: 400% 400%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.6);
  z-index: 3;
}
.xxm-gallery__zoom {
  display: none; position: absolute; top: 0; right: -110%;
  width: 100%; height: 100%;
  background-repeat: no-repeat; background-size: 250%;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius);
  pointer-events: none; z-index: 4;
  background-color: #fff;
}
@media (min-width: 1024px) {
  .xxm-gallery__main:hover .xxm-gallery__lens { display: block; }
  .xxm-gallery__main:hover .xxm-gallery__zoom { display: block; }
}
.xxm-gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.xxm-gallery__thumb {
  position: relative; aspect-ratio: 1/1;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius); overflow: hidden;
  background: var(--color-surface-container);
  transition: border-color var(--duration);
}
.xxm-gallery__thumb:hover, .xxm-gallery__thumb.is-active { border-color: var(--color-secondary); border-width: 2px; }
.xxm-gallery__thumb-img {
  display: block; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  background-color: var(--color-surface-container);
}
.xxm-gallery__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 28px; height: 28px; background: rgba(0,0,0,0.55); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}

/* ——— Spec Table ——— */
.xxm-spec-wrap { margin: 12px 0; }
.xxm-spec__caption { color: var(--color-primary); margin-bottom: 8px; }
.xxm-spec__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border-subtle); border-radius: var(--radius); }
.xxm-spec__swipe { display: none; font-size: 11px; color: var(--color-on-surface-variant); margin-bottom: 4px; }
@media (max-width: 767px) { .xxm-spec__swipe { display: block; } }
.xxm-spec { width: 100%; min-width: 360px; border-collapse: collapse; }
.xxm-spec th, .xxm-spec td { padding: 12px 16px; text-align: left; font-size: 14px; vertical-align: top; }
.xxm-spec__k {
  background: var(--color-surface-container-low);
  font-weight: 600; color: var(--color-on-surface-variant);
  width: 38%;
  position: sticky; left: 0; z-index: 1;
}
.xxm-spec.is-mobile .xxm-spec__k { position: sticky; left: 0; box-shadow: 1px 0 0 var(--color-border-subtle); }
.xxm-spec__v { color: var(--color-on-surface); }
.xxm-spec tr.is-zebra .xxm-spec__v { background: var(--color-surface-container-lowest); }

/* ——— Cert Grid + Lightbox ——— */
.xxm-cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.xxm-cert {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px; text-align: center;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--duration), transform var(--duration);
}
.xxm-cert:hover, .xxm-cert:focus { border-color: var(--color-secondary); transform: translateY(-2px); outline: none; }
.xxm-cert__title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--color-primary); }
.xxm-cert__desc { font-size: 12px; color: var(--color-on-surface-variant); }
.xxm-cert__file { font-size: 12px; color: var(--color-tertiary); display: inline-flex; align-items: center; gap: 4px; }

.xxm-cert-lightbox {
  position: relative; background: #fff; padding: 32px;
  border-radius: var(--radius-lg); max-width: 480px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.xxm-cert-lightbox__title { font-size: 22px; }
.xxm-cert-lightbox__desc { color: var(--color-on-surface-variant); }

/* ——— Header ——— */
.xxm-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-ambient);
}
.xxm-header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
/* keep anchored sections below the sticky header */
section[id] { scroll-margin-top: 88px; }
.xxm-header__logo { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--color-primary); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.xxm-header__nav { display: none; gap: 20px; align-items: center; margin-left: auto; flex-shrink: 0; }
@media (min-width: 1024px) { .xxm-header__nav { display: flex; } }
.xxm-header__nav a { font-size: 13px; font-weight: 600; color: var(--color-on-surface-variant); letter-spacing: 0.01em; padding: 8px 0; border-bottom: 2px solid transparent; transition: color var(--duration), border-color var(--duration); }
.xxm-header__nav a:hover, .xxm-header__nav a.is-active { color: var(--color-primary); border-bottom: 2px solid var(--color-secondary); }
.xxm-header__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.xxm-header__quote { white-space: nowrap; }
@media (max-width: 520px) { .xxm-header__quote { display: none; } }
.xxm-header__lang { font-size: 12px; color: var(--color-on-surface-variant); font-weight: 600; white-space: nowrap; }
.xxm-header__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  background: transparent; color: var(--color-primary);
  transition: background var(--duration), color var(--duration);
}
.xxm-header__icon:hover { background: var(--color-surface-container-low); color: var(--color-secondary); }
@media (max-width: 520px) { .xxm-header__lang { display: none; } }
.xxm-header__mobile-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  background: transparent; color: var(--color-primary);
}
@media (min-width: 1024px) { .xxm-header__mobile-toggle { display: none; } }

/* Mobile drawer */
.xxm-mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(25, 28, 29, 0.55);
  display: none;
}
.xxm-mobile-nav.is-open { display: block; }
body.xxm-menu-open { overflow: hidden; }
.xxm-mobile-nav__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 84%; max-width: 360px;
  background: var(--color-background); padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: -8px 0 24px rgba(0,0,0,0.1);
  animation: xxm-slide-in 0.22s var(--ease-out);
}
@keyframes xxm-slide-in { from { transform: translateX(100%); } to { transform: none; } }
.xxm-mobile-nav__panel a {
  padding: 14px 12px; font-size: 15px; font-weight: 600;
  color: var(--color-on-surface); border-bottom: 1px solid var(--color-border-subtle);
}
.xxm-mobile-nav__panel a:hover { color: var(--color-primary); text-decoration: none; }
.xxm-mobile-nav__panel .btn { margin-top: auto; }

/* ——— Footer ——— */
.xxm-footer {
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 32px 0 28px;
  /* No top margin — sections provide their own bottom padding for unified rhythm. */
}
.xxm-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .xxm-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.xxm-footer h4 { color: var(--color-on-primary); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-sans); font-weight: 600; margin-bottom: 14px; }
.xxm-footer ul { list-style: none; padding: 0; margin: 0; }
.xxm-footer li { margin-bottom: 8px; }
.xxm-footer a { color: rgba(255,255,255,0.7); font-size: 14px; }
.xxm-footer a:hover { color: var(--color-secondary); text-decoration: none; }
.xxm-footer__brand h3 { font-size: 24px; color: #fff; margin-bottom: 8px; }
.xxm-footer__brand p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.xxm-footer__bottom {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 12px; color: rgba(255,255,255,0.5);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
}

/* ——— Hero / Section helpers ——— */
.xxm-hero { padding: 64px 0 32px; }
.xxm-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .xxm-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.xxm-contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .xxm-contact-grid { grid-template-columns: 1.2fr 1fr; } }
.xxm-hero__eyebrow { color: var(--color-secondary-dark); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 12px; margin-bottom: 12px; }
.xxm-hero__title { font-size: clamp(28px, 5vw, 48px); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-primary); margin-bottom: 16px; }
.xxm-hero__sub { font-size: clamp(15px, 2.2vw, 18px); color: var(--color-on-surface-variant); line-height: 1.55; max-width: 640px; margin-bottom: 24px; }
.xxm-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Value badges row (Section 3 of landing) */
.xxm-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
@media (min-width: 768px) { .xxm-badges { grid-template-columns: repeat(4, 1fr); } }
.xxm-badge { display: flex; flex-direction: column; gap: 4px; }
.xxm-badge__icon { width: 36px; height: 36px; color: var(--color-primary); margin-bottom: 4px; }
.xxm-badge__title { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--color-primary); }
.xxm-badge__desc { font-size: 13px; color: var(--color-on-surface-variant); line-height: 1.5; }

/* Process steps */
.xxm-process { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .xxm-process { grid-template-columns: repeat(4, 1fr); } }
.xxm-process__step { padding: 20px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius); background: #fff; }
.xxm-process__num { font-family: var(--font-serif); font-size: 36px; font-weight: 700; color: var(--color-secondary); line-height: 1; }
.xxm-process__title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--color-primary); margin: 8px 0 4px; }
.xxm-process__desc { font-size: 13px; color: var(--color-on-surface-variant); line-height: 1.5; }
.xxm-process__days { font-size: 11px; color: var(--color-secondary-dark); font-weight: 600; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.05em; }

/* FAQ */
.xxm-faq { display: flex; flex-direction: column; gap: 8px; }
.xxm-faq__item { border: 1px solid var(--color-border-subtle); border-radius: var(--radius); background: #fff; }
.xxm-faq__q { width: 100%; text-align: left; padding: 16px 20px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--color-on-surface); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.xxm-faq__q { cursor: pointer; list-style: none; }
.xxm-faq__q::-webkit-details-marker { display: none; }
.xxm-faq__q::after { content: "+"; font-size: 22px; color: var(--color-secondary-dark); transition: transform var(--duration); }
.xxm-faq__item[open] .xxm-faq__q::after { transform: rotate(45deg); }
.xxm-faq__a { padding: 0 20px 16px; color: var(--color-on-surface-variant); font-size: 14px; line-height: 1.6; }

/* Category grid */
.xxm-cats { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .xxm-cats { grid-template-columns: repeat(3, 1fr); } }
.xxm-cat { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); background: var(--color-surface-container); display: flex; align-items: flex-end; padding: 16px; color: #fff; }
.xxm-cat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%); }
.xxm-cat__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.xxm-cat__name { position: relative; font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.xxm-cat__count { position: relative; font-size: 12px; opacity: 0.9; }

/* Production stats */
.xxm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 32px 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
@media (min-width: 768px) { .xxm-stats { grid-template-columns: repeat(4, 1fr); } }
.xxm-stat { text-align: center; }
.xxm-stat__num { font-family: var(--font-serif); font-size: clamp(36px, 5vw, 48px); font-weight: 700; color: var(--color-primary); line-height: 1; letter-spacing: -0.02em; }
.xxm-stat__label { font-size: 12px; color: var(--color-on-surface-variant); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* Blog post cards & single */
.xxm-post { }
.xxm-post--card {
  display: grid;
  gap: 16px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.xxm-post--card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-floating);
  border-color: var(--color-secondary);
}
@media (min-width: 640px) {
  .xxm-post--card { grid-template-columns: 180px 1fr; align-items: start; }
}
.xxm-post__thumb {
  display: block;
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-variant);
}
.xxm-post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration); }
.xxm-post__thumb:hover img { transform: scale(1.03); }
.xxm-post__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-on-surface-variant);
}
.xxm-post__body { display: flex; flex-direction: column; gap: 8px; }
.xxm-post__title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.xxm-post__title a { color: var(--color-primary); text-decoration: none; }
.xxm-post__title a:hover { color: var(--color-secondary-dark); text-decoration: underline; }
.xxm-post__meta {
  font-size: 12px;
  color: var(--color-on-surface-variant);
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.xxm-post__meta a { color: var(--color-on-surface-variant); text-decoration: none; }
.xxm-post__meta a:hover { text-decoration: underline; }
.xxm-post__sep { opacity: 0.6; }
.xxm-post__summary p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xxm-post__more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 4px;
}
.xxm-post__more:hover { color: var(--color-secondary-dark); text-decoration: underline; }
.xxm-post__more .material-symbols-outlined { font-size: 16px; }

.xxm-post--single { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
.xxm-post--single .xxm-post__header { margin-bottom: 16px; }
.xxm-post--single .xxm-post__title { font-size: clamp(26px, 4vw, 36px); }
.xxm-post--single .xxm-post__featured {
  margin: 16px 0 24px;
  border-radius: var(--radius);
  overflow: hidden;
}
.xxm-post--single .xxm-post__featured img { width: 100%; height: auto; }
.xxm-post--single .xxm-post__summary {
  font-size: 16px; line-height: 1.7; color: var(--color-on-surface);
}
.xxm-post--single .xxm-post__summary > * + * { margin-top: 1em; }
.xxm-post--single .xxm-post__summary h2,
.xxm-post--single .xxm-post__summary h3 { font-family: var(--font-serif); color: var(--color-primary); margin-top: 1.6em; }
.xxm-post--single .xxm-post__summary ul { padding-left: 1.3em; }

/* PDP FAQ (details) */
.xxm-faq-list { display: flex; flex-direction: column; gap: 8px; }
.xxm-faq-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.xxm-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.xxm-faq-item > summary::-webkit-details-marker { display: none; }
.xxm-faq-item > summary::after {
  content: "+";
  font-size: 22px;
  color: var(--color-secondary-dark);
  transition: transform var(--duration);
  flex-shrink: 0;
}
.xxm-faq-item[open] > summary::after { transform: rotate(45deg); }
.xxm-faq-answer {
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}

/* Related product cards */
.card-product {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-floating);
  border-color: var(--color-secondary);
}
.card-product .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }

/* B2B product grid — archive-product.php */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.card-product__media {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-container-low);
  border-bottom: 1px solid var(--color-border-subtle);
}
.card-product__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}
.card-product__sku {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-on-surface-variant);
}
.card-product__title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.card-product__title a { color: var(--color-primary); text-decoration: none; }
.card-product__title a:hover { color: var(--color-secondary); }
.card-product__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.card-product__price-from {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
.card-product__moq {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-variant);
}
.card-product__actions { margin-top: 4px; }
.card-product__actions .btn { width: 100%; }

/* ============================================================
   Unified Section Rhythm — fixes homepage "patchwork" feel
   ============================================================ */
.section {
  padding: 96px 0;
  position: relative;
}
@media (max-width: 768px) {
  .section { padding: 64px 0; }
}
.section--alt { background: var(--color-surface-container-low); }
.section--dark { background: var(--color-primary); color: var(--color-on-primary); padding: 72px 0 48px; }
.section--dark h2 { color: #fff; }
@media (max-width: 768px) {
  .section--dark { padding: 48px 0 40px; }
}

.section-title {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-title .label {
  color: var(--color-secondary-dark);
  margin-bottom: 10px;
}
.section-title h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.section-title p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-on-surface-variant);
  margin: 0;
}

/* title left, action button right */
.section-title--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: none;
  margin-bottom: 48px;
}
.section-title--row .section-title__intro { max-width: 620px; }
.section-title--row .section-title__intro h2 { margin-bottom: 10px; }

/* centered (social proof) */
.section-title--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 720px;
}

/* Generic blog/post card */
.card-post {
  display: block;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-floating);
  border-color: var(--color-secondary);
}
.card-post__media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-surface-container-low);
}
.card-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-post__body { padding: 24px; }
.card-post__date {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant);
  margin-bottom: 8px;
}
.card-post__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0 0 8px;
}
.card-post__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
  margin: 0 0 16px;
}
.card-post__more {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* ============================================================
   Comments (single post) — align with .xxm-post--single (760px)
   Default WP comment form had NO styles -> fell back to browser
   defaults (unstyled textarea/inputs/button). Fix below.
   ============================================================ */
.comments-area {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 8px;
}

.comment-reply-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 8px;
  letter-spacing: var(--tracking-tight);
}
.comment-reply-title small { font-size: 0.7em; font-weight: 400; margin-left: 8px; }
.comment-reply-title small a { color: var(--color-secondary); }

.comment-notes {
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
  margin: 0 0 24px;
}

/* Each field is emitted as a <p> by comment_form() */
.comment-form > p { margin: 0 0 18px; }
.comment-form label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-label-md);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 8px;
}
.comment-form .required { color: var(--color-error); margin-left: 2px; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-on-surface);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.comment-form textarea { min-height: 160px; resize: vertical; }
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-input-focus);
}

/* Cookies consent checkbox — keep inline with its label */
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}
.comment-form-cookies-consent input { margin-top: 3px; width: auto; }
.comment-form-cookies-consent label {
  display: inline;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}

/* Submit */
.form-submit { margin-top: 4px; }
.comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius);
  padding: 12px 28px;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.comment-form .submit:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

/* Existing comment list (robustness, in case comments exist) */
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; }
.comment-list .comment { padding: 16px 0; border-top: 1px solid var(--color-border-subtle); }
.comment-list .comment-author { font-weight: 600; color: var(--color-primary); }
.comment-list .comment-metadata { font-size: var(--text-label-sm); color: var(--color-on-surface-variant); margin-bottom: 8px; }
.comment-list .comment-content { font-size: var(--text-body-md); line-height: 1.6; color: var(--color-on-surface); }
.comment-list .reply { margin-top: 8px; }
.comment-list .reply a { color: var(--color-secondary); font-weight: 600; font-size: var(--text-body-sm); }

/* ============================================================
   Post navigation (Previous / Next) under the article
   ============================================================ */
.post-navigation {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 24px 16px 0;
  border-top: 1px solid var(--color-border-subtle);
}
.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.post-navigation .nav-previous,
.post-navigation .nav-next { max-width: 48%; }
.post-navigation .nav-next { margin-left: auto; text-align: right; }
.post-navigation .nav-subtitle {
  display: block;
  font-size: var(--text-label-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-on-surface-variant);
  margin-bottom: 4px;
}
.post-navigation .nav-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.post-navigation a:hover .nav-title { color: var(--color-secondary); }

@media (max-width: 600px) {
  .post-navigation .nav-links { flex-direction: column; gap: 20px; }
  .post-navigation .nav-previous,
  .post-navigation .nav-next { max-width: 100%; text-align: left; margin-left: 0; }
}

/* design-v2.css */
:root {
  --xxm-forest-950:#06261a; --xxm-forest-900:#0a3324; --xxm-forest-800:#124936;
  --xxm-copper-600:#d95f22; --xxm-copper-500:#ee6b2d; --xxm-copper-100:#fff0e7;
  --xxm-ink-900:#17201c; --xxm-ink-700:#45534c; --xxm-ink-500:#6b7871;
  --xxm-sand-50:#fbfaf7; --xxm-sand-100:#f4f1ea; --xxm-white:#fff;
  --xxm-border:#dedfd9; --xxm-success:#237a50; --xxm-error:#b42318;
  --xxm-font-display:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --xxm-font-body:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --xxm-step--1:clamp(.78rem,.75rem + .12vw,.86rem); --xxm-step-0:clamp(.95rem,.91rem + .18vw,1.05rem);
  --xxm-step-1:clamp(1.12rem,1.02rem + .4vw,1.35rem); --xxm-step-2:clamp(1.45rem,1.24rem + .85vw,1.95rem);
  --xxm-step-3:clamp(2rem,1.55rem + 1.75vw,3.15rem); --xxm-step-4:clamp(2.55rem,1.8rem + 3vw,4.8rem);
  --xxm-space-1:.25rem; --xxm-space-2:.5rem; --xxm-space-3:.75rem; --xxm-space-4:1rem;
  --xxm-space-6:1.5rem; --xxm-space-8:2rem; --xxm-space-12:3rem; --xxm-space-16:4rem; --xxm-space-24:6rem;
  --xxm-radius-sm:.5rem; --xxm-radius-md:.875rem; --xxm-radius-lg:1.35rem; --xxm-radius-pill:999px;
  --xxm-shadow-sm:0 1px 2px rgba(6,38,26,.05),0 8px 24px rgba(6,38,26,.05);
  --xxm-shadow-lg:0 24px 70px rgba(6,38,26,.14); --xxm-container:1240px;
  --color-primary:var(--xxm-forest-950); --color-primary-dark:#041b12; --color-secondary:var(--xxm-copper-500);
  --color-secondary-dark:var(--xxm-copper-600); --color-background:var(--xxm-sand-50);
  --color-surface-container-low:var(--xxm-sand-100); --color-on-surface:var(--xxm-ink-900);
  --color-on-surface-variant:var(--xxm-ink-700); --color-border-subtle:var(--xxm-border);
  --radius:var(--xxm-radius-sm); --radius-lg:var(--xxm-radius-lg); --shadow-card:var(--xxm-shadow-sm);
}
body{font-family:var(--xxm-font-body);font-size:var(--xxm-step-0);line-height:1.65;color:var(--xxm-ink-900);background:var(--xxm-sand-50)}
h1,h2,h3,h4{font-family:var(--xxm-font-display);letter-spacing:-.035em;color:var(--xxm-forest-950)}
.container{max-width:var(--xxm-container);padding-inline:clamp(1rem,4vw,2.5rem)}
.site-main{overflow:clip}.xxm-section{padding-block:clamp(4.5rem,8vw,7.5rem)}.xxm-section--sand{background:var(--xxm-sand-100)}
.xxm-section--dark{background:var(--xxm-forest-950);color:#fff}.xxm-section--dark h2,.xxm-section--dark h3{color:#fff}
.xxm-kicker{display:inline-flex;align-items:center;gap:.5rem;color:var(--xxm-copper-600);font-size:var(--xxm-step--1);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.xxm-kicker:before{content:"";width:1.8rem;height:2px;background:currentColor}.xxm-section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.xxm-section-head h2{font-size:var(--xxm-step-3);max-width:760px;margin-top:.8rem}.xxm-section-head p{color:var(--xxm-ink-700);max-width:560px}
.btn{min-height:48px;padding:.85rem 1.35rem;border-radius:var(--xxm-radius-pill);font-size:.93rem;font-weight:800;box-shadow:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(6,38,26,.14)}.btn-cta{background:var(--xxm-copper-500);border-color:var(--xxm-copper-500)}.btn-primary{background:var(--xxm-forest-950)}.btn-secondary{border-color:var(--xxm-forest-950);background:#fff}
.xxm-header{top:0;background:rgba(251,250,247,.94);box-shadow:none;border-bottom:1px solid rgba(6,38,26,.1)}
.xxm-header__inner{height:78px}.xxm-brand{display:flex;align-items:center;gap:.75rem;min-width:220px}.xxm-brand__mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--xxm-forest-950);color:#fff;font:800 14px var(--xxm-font-display)}
.xxm-brand__name{font:800 1rem/1.05 var(--xxm-font-display);color:var(--xxm-forest-950)}.xxm-brand__tag{display:block;margin-top:.25rem;font-size:.68rem;color:var(--xxm-ink-500);font-weight:600}
.xxm-header__nav{gap:1.65rem}.xxm-header__nav a{font-size:.82rem}.xxm-header__nav a:hover,.xxm-header__nav a.is-active{border-color:var(--xxm-copper-500)}
.xxm-mobile-nav__panel{background:var(--xxm-sand-50);padding:1.5rem;border-radius:var(--xxm-radius-lg) 0 0 var(--xxm-radius-lg)}
.xxm-hero-v2{position:relative;min-height:720px;display:grid;align-items:end;background:var(--xxm-forest-950);isolation:isolate}.xxm-hero-v2__media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.7}
.xxm-hero-v2:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,38,26,.96) 0%,rgba(6,38,26,.76) 48%,rgba(6,38,26,.15) 100%),linear-gradient(0deg,rgba(6,38,26,.75),transparent 45%)}
.xxm-hero-v2__inner{padding-block:clamp(7rem,12vw,10rem) 3rem;color:#fff}.xxm-hero-v2__copy{max-width:800px}.xxm-hero-v2 h1{font-size:var(--xxm-step-4);line-height:1.02;color:#fff;margin:1rem 0 1.5rem;max-width:900px}.xxm-hero-v2__lead{font-size:var(--xxm-step-1);max-width:680px;color:rgba(255,255,255,.82)}
.xxm-hero-v2__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.xxm-hero-v2__actions .btn-secondary{border-color:rgba(255,255,255,.7);background:transparent;color:#fff}.xxm-hero-v2__actions .btn-secondary:hover{background:#fff;color:var(--xxm-forest-950)}
.xxm-proof-bar{display:grid;grid-template-columns:repeat(4,1fr);margin-top:4rem;border-top:1px solid rgba(255,255,255,.22)}.xxm-proof{padding:1.5rem 1.25rem 0 0}.xxm-proof strong{display:block;font:800 var(--xxm-step-2) var(--xxm-font-display);color:#fff}.xxm-proof span{font-size:.78rem;color:rgba(255,255,255,.67);text-transform:uppercase;letter-spacing:.08em}
.xxm-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.xxm-value-card{padding:1.6rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-md);background:#fff}.xxm-value-card__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--xxm-copper-100);color:var(--xxm-copper-600);margin-bottom:1.2rem}.xxm-value-card h3{font-size:1.05rem;margin-bottom:.55rem}.xxm-value-card p{font-size:.9rem;color:var(--xxm-ink-700)}
.xxm-category-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.xxm-category{position:relative;min-height:320px;grid-column:span 4;border-radius:var(--xxm-radius-lg);overflow:hidden;color:#fff}.xxm-category:nth-child(1),.xxm-category:nth-child(4){grid-column:span 7}.xxm-category:nth-child(2),.xxm-category:nth-child(3){grid-column:span 5}.xxm-category img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.xxm-category:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,38,26,.85),transparent 70%)}.xxm-category__copy{position:absolute;z-index:1;inset:auto 1.5rem 1.5rem}.xxm-category h3{color:#fff;font-size:var(--xxm-step-1);margin-bottom:.35rem}.xxm-category p{color:rgba(255,255,255,.75);font-size:.85rem}.xxm-category:hover img{transform:scale(1.05)}
.xxm-process-v2{display:grid;grid-template-columns:repeat(4,1fr);counter-reset:step}.xxm-process-v2__item{position:relative;padding:2rem;border-top:1px solid rgba(255,255,255,.2);border-left:1px solid rgba(255,255,255,.2)}.xxm-process-v2__item:before{counter-increment:step;content:"0" counter(step);display:block;color:var(--xxm-copper-500);font:800 2.6rem var(--xxm-font-display);margin-bottom:2rem}.xxm-process-v2__item p{color:rgba(255,255,255,.68);font-size:.9rem;margin-top:.7rem}
.xxm-process-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.xxm-process-links .btn-secondary{border-color:rgba(255,255,255,.65);background:transparent;color:#fff}.xxm-process-links .btn-secondary:hover{background:#fff;color:var(--xxm-forest-950)}
.xxm-factory-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}.xxm-factory-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--xxm-radius-lg);box-shadow:var(--xxm-shadow-lg)}.xxm-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}.xxm-stat-v2{padding:1.2rem 0;border-top:1px solid var(--xxm-border)}.xxm-stat-v2 strong{display:block;font:800 var(--xxm-step-2) var(--xxm-font-display);color:var(--xxm-forest-950)}.xxm-stat-v2 span{font-size:.75rem;color:var(--xxm-ink-500);text-transform:uppercase;letter-spacing:.08em}
.xxm-conversion{display:grid;grid-template-columns:1fr .9fr;gap:3rem;padding:clamp(2rem,5vw,4rem);border-radius:var(--xxm-radius-lg);background:var(--xxm-forest-950);color:#fff}.xxm-conversion h2{color:#fff;font-size:var(--xxm-step-3);margin:.8rem 0 1rem}.xxm-conversion p{color:rgba(255,255,255,.72)}.xxm-conversion__panel{align-self:center;padding:2rem;border-radius:var(--xxm-radius-md);background:#fff;color:var(--xxm-ink-900)}.xxm-checks{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.7rem}.xxm-checks li:before{content:"✓";color:var(--xxm-copper-500);font-weight:900;margin-right:.7rem}
.xxm-catalog-hero{padding:clamp(4rem,7vw,7rem) 0 3rem;background:var(--xxm-forest-950);color:#fff}.xxm-catalog-hero h1{color:#fff;font-size:var(--xxm-step-3);margin:.8rem 0}.xxm-catalog-hero p{max-width:650px;color:rgba(255,255,255,.72)}.xxm-catalog-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:2rem 0}.xxm-catalog-meta p{color:var(--xxm-ink-700);font-size:.9rem}
.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.card-product{display:flex;flex-direction:column;border:0;border-radius:var(--xxm-radius-md);background:#fff;overflow:hidden;box-shadow:var(--xxm-shadow-sm)}.card-product__media{aspect-ratio:4/3;overflow:hidden;background-size:cover;transition:transform .3s ease}.card-product__body{padding:1.3rem;flex:1}.card-product__title{font-size:1.06rem}.card-product__price{margin-top:auto;padding-top:.5rem}.card-product__actions .btn{border-radius:var(--xxm-radius-pill)}
.xxm-pdp-hero{padding:2rem 0 clamp(4rem,7vw,7rem)}.xxm-breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:1.2rem 0;font-size:.78rem;color:var(--xxm-ink-500)}.xxm-breadcrumb a{color:var(--xxm-ink-700)}.xxm-pdp-grid-v2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:clamp(2rem,5vw,5rem);align-items:start}.xxm-pdp-media{position:relative;border-radius:var(--xxm-radius-lg);overflow:hidden;background:var(--xxm-sand-100)}.xxm-pdp-media img{width:100%;aspect-ratio:1/1;object-fit:cover}.xxm-pdp-media__note{position:absolute;left:1rem;bottom:1rem;padding:.55rem .85rem;border-radius:var(--xxm-radius-pill);background:rgba(255,255,255,.9);font-size:.72rem;font-weight:700}.xxm-pdp-summary{position:sticky;top:120px}.xxm-pdp-summary h1{font-size:var(--xxm-step-3);margin:.75rem 0 1rem}.xxm-pdp-summary__excerpt{color:var(--xxm-ink-700)}.xxm-price-card{margin:1.8rem 0;padding:1.5rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-md);background:#fff}.xxm-tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}.xxm-tier-pill{padding:1rem .6rem;text-align:center;border-radius:var(--xxm-radius-sm);background:var(--xxm-sand-100)}.xxm-tier-pill strong{display:block;color:var(--xxm-forest-950);font:800 1.25rem var(--xxm-font-display)}.xxm-tier-pill span{font-size:.68rem;color:var(--xxm-ink-500)}.xxm-pdp-facts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.5rem 0}.xxm-pdp-fact{padding:1rem;border-top:1px solid var(--xxm-border)}.xxm-pdp-fact span{display:block;font-size:.68rem;text-transform:uppercase;color:var(--xxm-ink-500);letter-spacing:.08em}.xxm-pdp-fact strong{font-size:.9rem;color:var(--xxm-forest-950)}
.xxm-contact-v2{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,6rem);align-items:start}.xxm-contact-card{padding:clamp(1.5rem,4vw,3rem);border-radius:var(--xxm-radius-lg);background:#fff;box-shadow:var(--xxm-shadow-sm)}
.xxm-footer{padding:4rem 0 1.5rem;background:#041b12}.xxm-footer__grid{gap:3rem}.xxm-footer h4{font-size:.75rem;color:var(--xxm-copper-500)}.xxm-footer__brand h3{font-size:1.4rem}.xxm-footer a{line-height:1.8}.xxm-footer__bottom{margin-top:3rem;padding-top:1.5rem}
.xxm-modal{border-radius:var(--xxm-radius-lg);background:var(--xxm-sand-50)}.xxm-modal__head{padding:2rem 2rem 0}.xxm-modal__form{padding:1.5rem 2rem 2rem}.input,.select,.textarea{border-radius:var(--xxm-radius-sm);min-height:50px;background:#fff}.xxm-gallery__main,.xxm-spec__scroll,.xxm-tier__table-wrap{border-radius:var(--xxm-radius-md)}
@media(max-width:1023px){.xxm-header__nav{display:none}.xxm-section-head,.xxm-factory-grid,.xxm-conversion,.xxm-pdp-grid-v2,.xxm-contact-v2{grid-template-columns:1fr}.xxm-value-grid,.xxm-process-v2{grid-template-columns:1fr 1fr}.xxm-category{grid-column:span 6!important}.xxm-pdp-summary{position:static}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.xxm-header__inner{height:68px}.xxm-brand__tag{display:none}.xxm-brand{min-width:0}.xxm-hero-v2{min-height:680px}.xxm-hero-v2:after{background:linear-gradient(0deg,rgba(6,38,26,.97),rgba(6,38,26,.35))}.xxm-hero-v2__inner{padding-block:8rem 2rem}.xxm-proof-bar{grid-template-columns:1fr 1fr;margin-top:3rem}.xxm-value-grid,.xxm-process-v2,.product-grid{grid-template-columns:1fr}.xxm-category-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}.xxm-category{min-width:82vw;scroll-snap-align:start}.xxm-section-head{gap:1rem}.xxm-tier-row{grid-template-columns:1fr}.xxm-pdp-facts{grid-template-columns:1fr 1fr}.xxm-catalog-meta{align-items:flex-start;flex-direction:column}.xxm-modal{border-radius:0}.xxm-footer__grid{grid-template-columns:1fr 1fr}.xxm-footer__brand{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Global consistency pass */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid rgba(238,107,45,.42);outline-offset:3px}
.btn:disabled,.btn[aria-disabled="true"],button:disabled{cursor:not-allowed;opacity:.48;transform:none!important;box-shadow:none!important}
.btn .material-symbols-outlined,.xxm-value-card__icon,.xxm-sticky-bar .material-symbols-outlined{font-size:1.2em;line-height:1;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.input:hover,.select:hover,.textarea:hover{border-color:var(--xxm-ink-500)}.input:disabled,.select:disabled,.textarea:disabled{background:var(--xxm-sand-100);color:var(--xxm-ink-500);cursor:not-allowed}
.xxm-form__err-summary{padding:.75rem 1rem;border-radius:var(--xxm-radius-sm);background:#fff0ef;color:var(--xxm-error)}.xxm-form__err-summary:empty{display:none}.xxm-form__err-summary.is-success{background:#eaf7f0;color:var(--xxm-success)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.card-post{height:100%;border:0;border-radius:var(--xxm-radius-md);background:#fff;box-shadow:var(--xxm-shadow-sm);overflow:hidden}.card-post>a{display:flex;flex-direction:column;height:100%;color:inherit}.card-post__media{aspect-ratio:16/10;overflow:hidden}.card-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.card-post:hover .card-post__media img{transform:scale(1.04)}.card-post__body{display:flex;flex-direction:column;flex:1;padding:1.5rem}.card-post__title{font-size:1.1rem;line-height:1.35}.card-post__excerpt{color:var(--xxm-ink-700);font-size:.9rem}.card-post__more{margin-top:auto;padding-top:1rem;color:var(--xxm-copper-600);font-weight:800;font-size:.82rem}
.navigation.pagination{margin-top:3rem}.nav-links{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap}.page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 .75rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-pill);background:#fff;color:var(--xxm-forest-950);font-size:.85rem;font-weight:700}.page-numbers.current,.page-numbers:hover{background:var(--xxm-forest-950);border-color:var(--xxm-forest-950);color:#fff;text-decoration:none}
.xxm-faq{gap:.75rem;max-width:920px}.xxm-faq__item{border-color:var(--xxm-border);border-radius:var(--xxm-radius-md);box-shadow:none}.xxm-faq__q{min-height:56px;padding:1rem 1.25rem;font-size:.95rem}.xxm-faq__a{padding:0 1.25rem 1.25rem;color:var(--xxm-ink-700)}
.xxm-cert-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}.xxm-cert{min-height:190px;justify-content:center;padding:1.5rem;border-radius:var(--xxm-radius-md);background:#fff}.xxm-cert:hover,.xxm-cert:focus-visible{border-color:var(--xxm-copper-500);box-shadow:var(--xxm-shadow-sm);transform:translateY(-3px)}
.xxm-tier__table-wrap,.xxm-spec__scroll{border-color:var(--xxm-border);background:#fff}.xxm-tier__table thead th{background:var(--xxm-forest-950)}.xxm-tier__summary{border-radius:var(--xxm-radius-md);background:var(--xxm-forest-950)}.xxm-tier__input-wrap button{min-width:48px;min-height:48px;border-radius:var(--xxm-radius-sm)}
.entry-content{font-size:var(--xxm-step-0);line-height:1.8;color:var(--xxm-ink-900)}.entry-content>*+*{margin-top:1.35em}.entry-content h2{font-size:var(--xxm-step-2);margin-top:2.2em}.entry-content h3{font-size:var(--xxm-step-1);margin-top:1.8em}.entry-content a{color:var(--xxm-copper-600);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.entry-content blockquote{margin:2rem 0;padding:1.5rem 1.75rem;border-left:4px solid var(--xxm-copper-500);border-radius:0 var(--xxm-radius-md) var(--xxm-radius-md) 0;background:var(--xxm-sand-100)}.entry-content table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}.entry-content th,.entry-content td{padding:.8rem 1rem;border:1px solid var(--xxm-border);text-align:left}.entry-content th{background:var(--xxm-forest-950);color:#fff}
.xxm-sticky-bar{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 -8px 30px rgba(6,38,26,.08)}
@media(max-width:1023px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.xxm-cert-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.post-grid{grid-template-columns:1fr}.xxm-cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.xxm-cert{min-height:160px}.entry-content{font-size:1rem}.xxm-footer__bottom{flex-direction:column}.xxm-mobile-nav__panel a{min-height:48px;display:flex;align-items:center}.xxm-tier__cta .btn{min-width:100%}}
.xxm-footer__legal{display:flex;flex-wrap:wrap;gap:1rem}.xxm-footer__legal a,.xxm-footer__legal button{color:rgba(255,255,255,.68);font-size:.75rem}.xxm-footer__legal button{text-decoration:underline;text-underline-offset:3px}
.xxm-consent-open{overflow:hidden}.xxm-consent-banner{position:fixed;z-index:var(--z-toast);left:1rem;right:1rem;bottom:1rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;max-width:1180px;margin:auto;padding:1.5rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-lg);background:#fff;box-shadow:var(--xxm-shadow-lg)}.xxm-consent-banner h2,.xxm-consent-card h2{font-size:var(--xxm-step-1);margin:.4rem 0}.xxm-consent-banner p,.xxm-consent-card p{max-width:720px;color:var(--xxm-ink-700);font-size:.85rem}.xxm-consent-actions{display:flex;flex-wrap:wrap;gap:.65rem}.xxm-consent-actions .btn{min-width:130px}.xxm-consent-modal{position:fixed;z-index:var(--z-toast);inset:0;display:grid;place-items:center;padding:1rem;background:rgba(6,38,26,.68)}.xxm-consent-card{width:min(620px,100%);max-height:90vh;overflow:auto;padding:2rem;border-radius:var(--xxm-radius-lg);background:#fff;box-shadow:var(--xxm-shadow-lg)}.xxm-consent-option{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0;border-top:1px solid var(--xxm-border)}.xxm-consent-option:first-of-type{margin-top:1.5rem}.xxm-consent-option span{display:grid}.xxm-consent-option small{color:var(--xxm-ink-500)}.xxm-consent-option input{width:22px;height:22px;accent-color:var(--xxm-copper-500)}.xxm-consent-card .xxm-consent-actions{margin-top:1.5rem}
@media(max-width:767px){.xxm-consent-banner{grid-template-columns:1fr;bottom:0;left:0;right:0;border-radius:var(--xxm-radius-lg) var(--xxm-radius-lg) 0 0;padding:1.25rem}.xxm-consent-actions{display:grid;grid-template-columns:1fr}.xxm-consent-actions .btn{width:100%}.xxm-consent-card{padding:1.25rem}}

/* Catalog experience v3 */
.xxm-nav-group{position:relative}.xxm-nav-group>a{display:flex;align-items:center;gap:.45rem}.xxm-nav-chevron{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--xxm-sand-100);font-size:.8rem;transition:transform .2s ease,background .2s ease}.xxm-nav-group:hover .xxm-nav-chevron,.xxm-nav-group:focus-within .xxm-nav-chevron{transform:rotate(180deg);background:var(--xxm-copper-500);color:#fff}.xxm-nav-menu{position:absolute;top:calc(100% + .65rem);left:50%;z-index:20;display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:.45rem;width:460px;padding:.6rem;visibility:hidden;opacity:0;transform:translate(-50%,-6px);border:1px solid rgba(6,38,26,.12);border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 16px 40px rgba(6,38,26,.16);transition:.18s ease}.xxm-nav-menu:before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;background:#fff;border-left:1px solid rgba(6,38,26,.12);border-top:1px solid rgba(6,38,26,.12);transform:translateX(-50%) rotate(45deg)}.xxm-nav-menu--compact{grid-template-columns:1fr;width:330px;padding:.5rem}.xxm-nav-menu a{display:grid!important;grid-template-columns:34px 1fr;gap:.65rem;align-items:center;min-height:62px;padding:.65rem;border:1px solid transparent!important;border-radius:10px;background:var(--xxm-sand-50);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}.xxm-nav-menu a>.material-symbols-outlined{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#fff;color:var(--xxm-copper-600);font-size:1rem;box-shadow:0 3px 10px rgba(6,38,26,.07)}.xxm-nav-menu a>span:last-child{display:grid;gap:.12rem;min-width:0}.xxm-nav-menu a:hover,.xxm-nav-menu a:focus-visible{transform:translateX(3px);border-color:rgba(200,155,92,.4)!important;background:#fff;box-shadow:0 7px 18px rgba(6,38,26,.08)}.xxm-nav-menu a:hover>.material-symbols-outlined{background:var(--xxm-forest-950);color:#fff}.xxm-nav-menu__featured{grid-column:1/-1;background:linear-gradient(135deg,var(--xxm-forest-950),var(--xxm-forest-700))!important;color:#fff!important}.xxm-nav-menu__featured small{color:rgba(255,255,255,.72)!important}.xxm-nav-menu__featured:hover>.material-symbols-outlined{background:var(--xxm-copper-500)!important}.xxm-nav-menu strong{font-size:.76rem;line-height:1.15;white-space:nowrap}.xxm-nav-menu small{color:var(--xxm-ink-500);font-size:.64rem;line-height:1.3;white-space:nowrap}.xxm-nav-menu--compact a{grid-template-columns:38px 1fr;min-height:64px;background:#fff}.xxm-nav-menu--compact a+a{border-top-color:var(--xxm-border)!important}.xxm-nav-menu--compact a:hover{background:var(--xxm-sand-50)}.xxm-nav-group:hover .xxm-nav-menu,.xxm-nav-group:focus-within .xxm-nav-menu{visibility:visible;opacity:1;transform:translate(-50%,0)}
.xxm-mobile-nav details{border-bottom:1px solid var(--xxm-border)}.xxm-mobile-nav summary{display:flex;align-items:center;justify-content:space-between;min-height:60px;font-weight:800;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}.xxm-mobile-nav summary>span{display:flex;align-items:center;gap:.65rem}.xxm-mobile-nav summary>span>.material-symbols-outlined{color:var(--xxm-copper-600);font-size:1.2rem}.xxm-mobile-nav summary::-webkit-details-marker{display:none}.xxm-mobile-nav summary:after{content:"+";display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--xxm-sand-100);color:var(--xxm-forest-950);font-size:1.2rem;transition:transform .2s ease,background .2s ease}.xxm-mobile-nav details[open] summary:after{content:"−";transform:rotate(180deg);background:var(--xxm-forest-950);color:#fff}.xxm-mobile-subnav__grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;padding:0 0 1rem!important}.xxm-mobile-subnav__grid a{display:flex!important;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;min-height:58px;padding:.7rem .8rem!important;border:1px solid var(--xxm-border)!important;border-radius:12px;background:var(--xxm-sand-50);font-size:.78rem!important;font-weight:700;line-height:1.25;-webkit-tap-highlight-color:transparent}.xxm-mobile-subnav__grid a>span{display:grid;min-width:0}.xxm-mobile-subnav__grid a strong{overflow:hidden;text-overflow:ellipsis}.xxm-mobile-subnav__grid a small{margin-top:.2rem;color:var(--xxm-ink-500);font-size:.62rem;font-weight:600}.xxm-mobile-subnav__grid a>.material-symbols-outlined{display:block;color:var(--xxm-copper-600);font-size:1rem;flex:none}.xxm-mobile-subnav__grid a:active{transform:scale(.98);border-color:var(--xxm-forest-950)!important;background:var(--xxm-forest-950);color:#fff}.xxm-mobile-subnav__grid a:active small,.xxm-mobile-subnav__grid a:active>.material-symbols-outlined{color:rgba(255,255,255,.78)}.xxm-mobile-subnav__all{grid-column:1/-1;background:linear-gradient(135deg,var(--xxm-forest-950),var(--xxm-forest-700))!important;color:#fff}.xxm-mobile-subnav__all small{color:rgba(255,255,255,.7)!important}.xxm-mobile-subnav__all>.material-symbols-outlined{display:grid!important;place-items:center;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.12);color:#fff!important}.xxm-mobile-subnav--services .xxm-mobile-subnav__grid{grid-template-columns:1fr}.xxm-mobile-subnav--services .xxm-mobile-subnav__grid a{display:grid!important;grid-template-columns:38px 1fr 20px;min-height:72px}.xxm-mobile-subnav--services .xxm-mobile-subnav__grid a>.material-symbols-outlined:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#fff;box-shadow:0 4px 12px rgba(6,38,26,.08);font-size:1.15rem}
.xxm-section--bamboo{background:linear-gradient(135deg,#f1e2c7,#f8f4eb)}.xxm-bamboo-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,6rem);align-items:center}.xxm-bamboo-story h2{margin:.8rem 0 1rem;font-size:var(--xxm-step-3)}.xxm-bamboo-story>div>p{margin-bottom:1.5rem;color:var(--xxm-ink-700)}.xxm-bamboo-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.xxm-bamboo-benefits article{padding:1.5rem;border:1px solid rgba(6,38,26,.12);border-radius:var(--xxm-radius-md);background:rgba(255,255,255,.7)}.xxm-bamboo-benefits .material-symbols-outlined{color:var(--xxm-copper-600)}.xxm-bamboo-benefits h3{margin:1rem 0 .5rem}.xxm-bamboo-benefits p{color:var(--xxm-ink-700);font-size:.84rem}
.xxm-featured-grid{grid-template-columns:repeat(4,1fr)}.card-product__media{position:relative;display:block;overflow:hidden;background:var(--xxm-sand-100)}.card-product__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.card-product:hover .card-product__media img{transform:scale(1.035)}.card-product__category{position:absolute;top:.8rem;left:.8rem;padding:.4rem .65rem;border-radius:var(--xxm-radius-pill);background:rgba(255,255,255,.9);color:var(--xxm-forest-950);font-size:.65rem;font-weight:800}.card-product__specs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}.card-product__specs span{display:grid;gap:.15rem}.card-product__specs small{color:var(--xxm-ink-500);font-size:.65rem;text-transform:uppercase;letter-spacing:.06em}.card-product__specs strong{color:var(--xxm-ink-700);font-size:.78rem;line-height:1.35}.card-product__actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1rem}.card-product__actions .btn{padding:.65rem .75rem;font-size:.76rem}.card-product__actions .is-added{background:var(--xxm-success);border-color:var(--xxm-success)}
.xxm-catalog-shell{padding:2rem 0 6rem}.xxm-catalog-tools{position:relative;display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-md);background:#fff}.xxm-catalog-search{display:flex;align-items:center;gap:.6rem;padding:0 1rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-pill)}.xxm-catalog-search input{width:100%;min-height:48px;border:0;outline:0;background:transparent}.xxm-filter-toggle{display:none}.xxm-catalog-filters{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr) auto auto;gap:.8rem;align-items:end}.xxm-catalog-filters label{display:grid;gap:.35rem;color:var(--xxm-ink-700);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.xxm-catalog-filters select{min-height:46px;padding:0 .75rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-sm);background:#fff;color:var(--xxm-ink-900)}.xxm-filter-clear{align-self:center;color:var(--xxm-copper-600);font-size:.78rem;font-weight:800}.xxm-catalog-actions{display:flex;align-items:center;gap:.7rem}.xxm-unit-toggle{display:inline-flex;padding:.2rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-pill);background:#fff}.xxm-unit-toggle button{min-width:38px;min-height:32px;border:0;border-radius:var(--xxm-radius-pill);background:transparent;color:var(--xxm-ink-500);font-size:.72rem;font-weight:800}.xxm-unit-toggle button.is-active{background:var(--xxm-forest-950);color:#fff}.xxm-pdp-topline{display:flex;justify-content:space-between;gap:1rem;align-items:center}.xxm-empty-state{display:grid;justify-items:center;gap:1rem;padding:5rem 1rem;text-align:center}.xxm-empty-state>.material-symbols-outlined{font-size:3rem;color:var(--xxm-copper-600)}
.xxm-rfq-drawer{position:fixed;z-index:9999;inset:0;visibility:hidden;pointer-events:none}.xxm-rfq-drawer.is-open{visibility:visible;pointer-events:auto}.xxm-rfq-drawer__backdrop{position:absolute;inset:0;background:rgba(6,38,26,.62);opacity:0;transition:.25s}.xxm-rfq-drawer.is-open .xxm-rfq-drawer__backdrop{opacity:1}.xxm-rfq-drawer__panel{position:absolute;top:0;right:0;width:min(480px,100%);height:100%;display:flex;flex-direction:column;padding:clamp(1.25rem,4vw,2rem);background:var(--xxm-sand-50);transform:translateX(100%);transition:.25s}.xxm-rfq-drawer.is-open .xxm-rfq-drawer__panel{transform:none}.xxm-rfq-drawer__head{display:flex;justify-content:space-between;gap:1rem;padding-bottom:1.5rem;border-bottom:1px solid var(--xxm-border)}.xxm-rfq-drawer__head h2{margin-top:.5rem}.xxm-rfq-drawer__close{border:0;background:transparent;font-size:2rem}.xxm-rfq-drawer__items{flex:1;overflow:auto;padding:1rem 0}.xxm-rfq-item{display:grid;grid-template-columns:72px 1fr auto;gap:.8rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--xxm-border)}.xxm-rfq-item img{width:72px;height:72px;border-radius:var(--xxm-radius-sm);object-fit:cover}.xxm-rfq-item div{display:grid}.xxm-rfq-item span{color:var(--xxm-ink-500);font-size:.72rem}.xxm-rfq-item button,.xxm-rfq-clear{border:0;background:transparent;color:var(--xxm-copper-600)}.xxm-rfq-drawer__footer{display:grid;gap:.7rem;padding-top:1rem}.xxm-rfq-empty{display:grid;place-items:center;gap:1rem;padding:4rem 1rem;text-align:center;color:var(--xxm-ink-500)}.xxm-rfq-empty .material-symbols-outlined{font-size:3rem}.xxm-drawer-open{overflow:hidden}
.xxm-related-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){.xxm-featured-grid,.xxm-related-grid{grid-template-columns:repeat(2,1fr)}.xxm-bamboo-story{grid-template-columns:1fr}.xxm-catalog-filters{grid-template-columns:1fr 1fr}.xxm-catalog-filters .btn,.xxm-filter-clear{align-self:end}.xxm-nav-group{display:none}}
@media(max-width:767px){.xxm-bamboo-benefits{grid-template-columns:1fr}.xxm-featured-grid,.xxm-related-grid{grid-template-columns:1fr}.xxm-catalog-tools{grid-template-columns:1fr auto}.xxm-filter-toggle{display:flex}.xxm-catalog-filters{display:none;grid-template-columns:1fr}.xxm-catalog-filters.is-open{display:grid}.xxm-catalog-meta{flex-direction:column;align-items:stretch}.xxm-catalog-actions{justify-content:space-between}.card-product__actions{grid-template-columns:1fr 1fr}.xxm-rfq-drawer__panel{top:auto;bottom:0;height:min(88vh,760px);border-radius:var(--xxm-radius-lg) var(--xxm-radius-lg) 0 0;transform:translateY(100%)}.xxm-rfq-drawer.is-open .xxm-rfq-drawer__panel{transform:none}}

/* Navigation refinement v4 */
@media(min-width:1024px){
  .xxm-nav-menu{top:calc(100% + 10px)!important;padding:8px!important;border-radius:12px!important;box-shadow:0 14px 36px rgba(6,38,26,.14)!important}
  .xxm-nav-menu--compact{left:50%!important;grid-template-columns:1fr!important;gap:0!important;width:304px!important;padding:6px!important;border-color:rgba(255,255,255,.12)!important;background:var(--xxm-forest-950)!important;box-shadow:0 16px 34px rgba(6,38,26,.24)!important}
  .xxm-nav-menu--compact:before{background:var(--xxm-forest-950)!important;border-color:rgba(255,255,255,.12)!important}
  .xxm-nav-menu--compact .xxm-nav-menu__service{grid-template-columns:32px minmax(0,1fr)!important;gap:10px!important;min-height:56px!important;margin:0!important;padding:9px 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#fff!important;box-shadow:none!important;transform:none!important}
  .xxm-nav-menu--compact .xxm-nav-menu__service+.xxm-nav-menu__service{border-top:1px solid rgba(255,255,255,.12)!important}
  .xxm-nav-menu--compact .xxm-nav-menu__service>.material-symbols-outlined{width:32px!important;height:32px!important;border-radius:7px!important;background:rgba(255,255,255,.1)!important;color:var(--xxm-copper-500)!important;font-size:17px!important;box-shadow:none!important}
  .xxm-nav-menu--compact .xxm-nav-menu__service strong{font-size:13px!important;line-height:1.2!important;white-space:nowrap!important;color:#fff!important}
  .xxm-nav-menu--compact .xxm-nav-menu__service small{font-size:11px!important;line-height:1.3!important;white-space:nowrap!important;color:rgba(255,255,255,.62)!important}
  .xxm-nav-menu--compact .xxm-nav-menu__service:hover,.xxm-nav-menu--compact .xxm-nav-menu__service:focus-visible{padding-left:14px!important;background:rgba(255,255,255,.08)!important}
  .xxm-nav-menu--compact .xxm-nav-menu__service:hover>.material-symbols-outlined{background:var(--xxm-copper-500)!important;color:#fff!important}
}
@media(max-width:1023px){
  .xxm-mobile-subnav__grid a{touch-action:manipulation}
  .xxm-mobile-subnav__grid a:focus-visible{outline:2px solid var(--xxm-copper-500);outline-offset:2px}
}

.xxm-pdp-gallery{display:grid;gap:.75rem}.xxm-pdp-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.55rem}.xxm-pdp-thumbs button{overflow:hidden;padding:0;border:2px solid transparent;border-radius:10px;background:var(--xxm-sand-100);aspect-ratio:1;cursor:pointer}.xxm-pdp-thumbs button.is-active{border-color:var(--xxm-copper-500)}.xxm-pdp-thumbs img{width:100%;height:100%;object-fit:cover}.xxm-pdp-gallery>.xxm-pdp-media__note{color:var(--xxm-ink-500);font-size:.72rem}
@media(max-width:767px){.xxm-pdp-thumbs{grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:auto}.xxm-pdp-thumbs button{min-width:58px}}

.xxm-application-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}.xxm-application-grid a,.xxm-application-grid button{display:grid;gap:.55rem;align-content:start;min-height:180px;padding:1.35rem;border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-md);background:#fff;color:var(--xxm-forest-950);text-align:left;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.xxm-application-grid a:hover,.xxm-application-grid button:hover{transform:translateY(-4px);border-color:rgba(200,155,92,.55);box-shadow:var(--xxm-shadow-md)}.xxm-application-grid .material-symbols-outlined{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--xxm-copper-100);color:var(--xxm-copper-600)}.xxm-application-grid strong{margin-top:auto;font:700 .92rem var(--xxm-font-display)}.xxm-application-grid small{color:var(--xxm-ink-500);font-size:.7rem;line-height:1.4}.xxm-capability-list{display:grid;margin-top:1.5rem;border-top:1px solid var(--xxm-border)}.xxm-capability-list>div{display:grid;grid-template-columns:34px 1fr;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--xxm-border)}.xxm-capability-list>div>span{color:var(--xxm-copper-600);font-weight:800}.xxm-capability-list p{display:grid;color:var(--xxm-ink-700);font-size:.78rem}.xxm-capability-list strong{color:var(--xxm-forest-950);font-size:.86rem}.xxm-inline-actions{display:flex;flex-wrap:wrap;gap:.7rem}.xxm-product-guidance{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.xxm-product-guidance article{padding:clamp(1.5rem,3vw,2.3rem);border:1px solid var(--xxm-border);border-radius:var(--xxm-radius-lg);background:#fff}.xxm-product-guidance .material-symbols-outlined,.xxm-custom-options .material-symbols-outlined{color:var(--xxm-copper-600)}.xxm-product-guidance h3{margin:1rem 0 .7rem}.xxm-product-guidance p,.xxm-product-guidance li{color:var(--xxm-ink-700);font-size:.88rem}.xxm-product-guidance ul{display:grid;gap:.55rem;padding-left:1.1rem}.xxm-custom-options{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}.xxm-custom-options article{padding:1.35rem;border-top:3px solid var(--xxm-copper-500);background:var(--xxm-sand-50)}.xxm-custom-options h3{margin:1rem 0 .5rem;font-size:.92rem}.xxm-custom-options p{color:var(--xxm-ink-700);font-size:.78rem}.xxm-pdp-faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2rem,6vw,6rem);align-items:start}.xxm-pdp-faq-layout h2{margin:.8rem 0 1rem;color:#fff;font-size:var(--xxm-step-3)}.xxm-pdp-faq-layout>div:first-child p{margin-bottom:1.5rem;color:rgba(255,255,255,.7)}.xxm-faq--dark .xxm-faq__item{border-color:rgba(255,255,255,.16)}.xxm-faq--dark .xxm-faq__q{color:#fff}.xxm-faq--dark .xxm-faq__a{color:rgba(255,255,255,.7)}
@media(max-width:1023px){.xxm-application-grid{grid-template-columns:repeat(3,1fr)}.xxm-custom-options{grid-template-columns:repeat(3,1fr)}.xxm-pdp-faq-layout{grid-template-columns:1fr}}
@media(max-width:767px){.xxm-application-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}.xxm-application-grid a,.xxm-application-grid button{min-width:72vw;scroll-snap-align:start}.xxm-product-guidance,.xxm-custom-options{grid-template-columns:1fr}.xxm-inline-actions{display:grid}.xxm-inline-actions .btn{width:100%}}

/* XXM PRODUCT MENU CONSISTENCY START */
/* Product dropdown aligned with the Custom Manufacturing navigation style. */
@media (min-width: 1024px) {
  .xxm-nav-menu:not(.xxm-nav-menu--compact) {
    gap: 0 !important;
    padding: 6px !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: var(--xxm-forest-950) !important;
    box-shadow: 0 16px 34px rgba(6, 38, 26, 0.24) !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact)::before {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: var(--xxm-forest-950) !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a:not(.xxm-nav-menu__featured) {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact) > .xxm-nav-menu__featured {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a > .material-symbols-outlined {
    width: 32px !important;
    height: 32px !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--xxm-copper-500) !important;
    font-size: 17px !important;
    box-shadow: none !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a strong {
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a small {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a:hover,
  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a:focus-visible {
    padding-left: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a:hover > .material-symbols-outlined,
  .xxm-nav-menu:not(.xxm-nav-menu--compact) > a:focus-visible > .material-symbols-outlined {
    background: var(--xxm-copper-500) !important;
    color: #fff !important;
  }
}
/* XXM PRODUCT MENU CONSISTENCY END */

/* Browser-translation resilience: icon ligature names must never be translated. */
.material-symbols-outlined.notranslate {
  direction: ltr;
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
  word-break: normal;
}

@media (min-width: 1024px) {
  .xxm-nav-menu > a {
    height: auto !important;
    min-width: 0;
  }

  .xxm-nav-menu > a > span:last-child,
  .xxm-nav-menu > a > span:last-child > strong,
  .xxm-nav-menu > a > span:last-child > small {
    min-width: 0;
    max-width: 100%;
  }

  .xxm-nav-menu > a > span:last-child > strong,
  .xxm-nav-menu > a > span:last-child > small {
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
}

/* neutral-theme.css */
/*
 * XXM neutral B2B visual theme
 * Warm white, charcoal and wood-tone accents. Loaded after all page styles.
 */
:root{
  --xxm-forest-950:#1b1b1a;
  --xxm-forest-900:#242423;
  --xxm-forest-800:#323230;
  --xxm-forest-700:#454542;
  --xxm-copper-600:#8c5b34;
  --xxm-copper-500:#b57542;
  --xxm-copper-400:#cc966b;
  --xxm-copper-100:#f3ebe3;
  --xxm-ink-900:#20201f;
  --xxm-ink-700:#555552;
  --xxm-ink-500:#777772;
  --xxm-sand-50:#faf9f7;
  --xxm-sand-100:#f1f0ed;
  --xxm-border:#deddd8;
  --xxm-success:#4f6f5a;
  --xxm-shadow-sm:0 1px 2px rgba(20,20,18,.04),0 8px 22px rgba(20,20,18,.05);
  --xxm-shadow-md:0 12px 32px rgba(20,20,18,.08);
  --xxm-shadow-lg:0 22px 60px rgba(20,20,18,.12);
  --xxm-radius-sm:6px;
  --xxm-radius-md:9px;
  --xxm-radius-lg:12px;
  --color-primary:#1b1b1a;
  --color-primary-dark:#111110;
  --color-primary-container:#323230;
  --color-on-primary:#fff;
  --color-on-primary-container:#e7e4df;
  --color-secondary:#b57542;
  --color-secondary-dark:#8c5b34;
  --color-secondary-container:#f3ebe3;
  --color-on-secondary-container:#5f3b20;
  --color-tertiary:#5f5f5b;
  --color-tertiary-container:#30302e;
  --color-background:#faf9f7;
  --color-surface-container-low:#f5f4f1;
  --color-surface-container:#efeeeb;
  --color-surface-container-high:#e9e8e4;
  --color-surface-variant:#e7e6e2;
  --color-on-surface:#20201f;
  --color-on-surface-variant:#555552;
  --color-on-background:#20201f;
  --color-outline:#777772;
  --color-outline-variant:#cfcec9;
  --color-success:#4f6f5a;
}

body{background:#faf9f7;color:var(--xxm-ink-900)}
h1,h2,h3,h4,.xxm-brand__name{color:var(--xxm-ink-900)}
.xxm-header{background:rgba(250,249,247,.96);border-bottom-color:rgba(32,32,31,.1)}
.xxm-brand__mark{background:transparent;overflow:visible}
.xxm-brand__mark img{display:block;width:48px;height:48px}
.btn{box-shadow:none}
.btn:hover{box-shadow:0 8px 20px rgba(20,20,18,.12)}
.btn-primary{background:#20201f;border-color:#20201f}
.btn-primary:hover{background:#090909;border-color:#090909}
.btn-cta{background:#b57542;border-color:#b57542}
.btn-cta:hover{background:#965f34;border-color:#965f34}
.btn-secondary{border-color:#30302e;color:#20201f}
.btn-secondary:hover{background:#20201f;border-color:#20201f;color:#fff}

.xxm-section--dark,.section--dark,.xxm-conversion,.xxm-catalog-hero,
.xxm-tier__summary,.xxm-tier__table thead th{background:#20201f}
.xxm-footer{background:#151514}
.xxm-footer h4{color:#c99266}
.xxm-footer__bottom{border-top-color:rgba(255,255,255,.12)}

.xxm-hero-v2{background:#1b1b1a}
.xxm-hero-v2:after{
  background:linear-gradient(90deg,rgba(20,20,19,.94) 0%,rgba(20,20,19,.72) 48%,rgba(20,20,19,.12) 100%),
             linear-gradient(0deg,rgba(20,20,19,.66),transparent 45%)
}
.xxm-category:after{background:linear-gradient(0deg,rgba(20,20,19,.82),transparent 70%)}
.xxm-service-hero,.xxm-service-hero--odm,.xxm-quality-hero{background:#1b1b1a}
.xxm-service-hero:after,.xxm-service-hero--odm:after,.xxm-quality-hero:after{
  background:linear-gradient(90deg,rgba(20,20,19,.94),rgba(20,20,19,.52) 68%,rgba(20,20,19,.12))
}
.xxm-seo-hero{background:linear-gradient(135deg,#20201f,#3a3936)}
.xxm-seo-brief{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07)}

.xxm-nav-menu--compact,
.xxm-nav-menu:not(.xxm-nav-menu--compact){background:#20201f!important;border-color:rgba(255,255,255,.14)!important}
.xxm-nav-menu--compact:before,
.xxm-nav-menu:not(.xxm-nav-menu--compact):before{background:#20201f!important;border-color:rgba(255,255,255,.14)!important}
.xxm-nav-menu a:hover>.material-symbols-outlined{background:#b57542!important}
.xxm-nav-chevron{background:#efeeeb}

.card-product,.xxm-price-card,.xxm-oem-builder,.xxm-quality-docs article,
.xxm-product-guidance article,.xxm-seo-process li,.xxm-seo-hubs a{
  border-color:#deddd8;background:#fff;box-shadow:none
}
.card-product:hover{box-shadow:0 12px 30px rgba(20,20,18,.08)}
.xxm-section--sand{background:#f1f0ed}
.xxm-bamboo-story,.xxm-section--bamboo{background:#f0ece6}
.xxm-custom-options article,.xxm-quality-steps article{background:#f5f4f1}
.xxm-stat-v2 strong,.xxm-pdp-fact strong,.xxm-tier-pill strong,
.xxm-application-grid a,.xxm-application-grid button,.xxm-capability-list strong{color:#20201f}
.xxm-tier-pill,.xxm-odm-result{background:#f1f0ed}
.entry-content th{background:#20201f}
.page-numbers.current,.page-numbers:hover{background:#20201f;border-color:#20201f}
.xxm-consent-modal,.xxm-rfq-drawer__backdrop{background:rgba(20,20,19,.66)}
.xxm-sticky-bar{box-shadow:0 -8px 28px rgba(20,20,18,.07)}

.xxm-decision-grid,.xxm-insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.xxm-decision-grid article,.xxm-insight-grid article{background:#fff;border:1px solid #deddd8;border-radius:10px;padding:1.45rem;box-shadow:none}
.xxm-decision-grid .material-symbols-outlined{width:42px;height:42px;display:grid;place-items:center;background:#f3ebe3;color:#8c5b34;border-radius:8px;margin-bottom:1rem}
.xxm-decision-grid h3,.xxm-insight-grid h3{font-size:1.05rem;margin:.2rem 0 .55rem}
.xxm-decision-grid p,.xxm-insight-grid p{color:#66635f;font-size:.91rem;line-height:1.65}
.xxm-insight-grid>article>span{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#8c5b34}
.xxm-insight-grid a{color:#20201f;font-weight:650}
.xxm-insight-grid>article>a:last-child{display:inline-block;margin-top:1rem;color:#8c5b34;font-size:.86rem}
.xxm-inline-rfq{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:1.25rem;padding:1.15rem 1.3rem;border:1px solid #deddd8;border-radius:10px;background:#fff}
.xxm-inline-rfq div{display:grid;gap:.22rem}.xxm-inline-rfq span{color:#66635f;font-size:.88rem}
.xxm-rfq-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.xxm-rfq-checklist article{display:flex;gap:1rem;padding:1.2rem;border-top:1px solid #deddd8;background:#fff}
.xxm-rfq-checklist b{color:#b57542;font-size:.78rem;letter-spacing:.08em}
.xxm-rfq-checklist h3{font-size:1rem;margin:0 0 .35rem}.xxm-rfq-checklist p{color:#66635f;font-size:.9rem;line-height:1.6;margin:0}
.xxm-proof-hero{padding:clamp(5rem,9vw,8rem) 0;background:#20201f}.xxm-proof-hero h1{color:#fff;max-width:850px;margin:.75rem 0 1rem}.xxm-proof-hero p{color:rgba(255,255,255,.72);max-width:760px;font-size:1.08rem;line-height:1.7}
.xxm-proof-content{margin-top:3rem;padding-top:2rem;border-top:1px solid #deddd8}
.xxm-case-framework{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #deddd8;border-radius:10px;overflow:hidden;background:#fff}
.xxm-case-framework article{padding:1.4rem;border-right:1px solid #deddd8;border-bottom:1px solid #deddd8}.xxm-case-framework article:nth-child(3n){border-right:0}.xxm-case-framework article:nth-last-child(-n+3){border-bottom:0}
.xxm-case-framework h3{font-size:1rem;margin:0 0 .5rem}.xxm-case-framework p{font-size:.9rem;color:#66635f;line-height:1.6;margin:0}
.xxm-buyer-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #deddd8;border-radius:10px;overflow:hidden;background:#fff}
.xxm-buyer-data>div{padding:1.15rem 1.3rem;border-right:1px solid #deddd8;border-bottom:1px solid #deddd8}.xxm-buyer-data>div:nth-child(2n){border-right:0}
.xxm-buyer-data dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#8c5b34;font-weight:700;margin-bottom:.4rem}.xxm-buyer-data dd{margin:0;color:#343330;line-height:1.6}
.xxm-case-detail{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid #deddd8}.xxm-case-detail section{display:grid;grid-template-columns:minmax(180px,.35fr) 1fr;gap:2rem;padding:1.6rem 0;border-bottom:1px solid #deddd8}.xxm-case-detail p{margin:0;color:#555552;line-height:1.75}
.xxm-verified-evidence,.xxm-case-list{margin-top:4rem}.xxm-insight-grid article>img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:7px;margin-bottom:1rem}
.xxm-video-consent{max-width:980px;margin:auto}.xxm-video-consent>button,.xxm-video-consent>iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;overflow:hidden}.xxm-video-consent>button{position:relative;padding:0;background:#20201f;cursor:pointer}.xxm-video-consent>button img{width:100%;height:100%;object-fit:cover;opacity:.88}.xxm-video-consent__play{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:.5rem;transform:translate(-50%,-50%);padding:.85rem 1.15rem;border-radius:999px;background:#b57542;color:#fff;font-weight:700;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.24)}.xxm-video-consent__play .material-symbols-outlined{font-size:1.45rem}.xxm-video-consent>p{margin-top:.8rem;color:#777772;font-size:.78rem;text-align:center}.xxm-video-consent>p a{color:#8c5b34;text-decoration:underline}

@media(max-width:767px){
  .xxm-hero-v2:after{background:linear-gradient(0deg,rgba(20,20,19,.95),rgba(20,20,19,.28))}
  .xxm-decision-grid,.xxm-insight-grid,.xxm-rfq-checklist{grid-template-columns:1fr}
  .xxm-case-framework{grid-template-columns:1fr}.xxm-case-framework article{border-right:0;border-bottom:1px solid #deddd8!important}.xxm-case-framework article:last-child{border-bottom:0!important}
  .xxm-buyer-data{grid-template-columns:1fr}.xxm-buyer-data>div{border-right:0}.xxm-case-detail section{grid-template-columns:1fr;gap:.65rem}
  .xxm-inline-rfq{align-items:stretch;flex-direction:column}
  .xxm-inline-rfq .btn{width:100%}
}