/* =============================================================================
   base.css (foundation): reset, typography, layout utilities, buttons, form
   controls, chips, toggles, stepper, badges, reveal-on-scroll.
   Spec: docs/reference/00-design-system.md. Every value comes from tokens.css.
   ============================================================================= */

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -moz-text-size-adjust: none; text-size-adjust: none; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; cursor: pointer; text-align: inherit; line-height: inherit; text-transform: inherit; }
button:disabled { cursor: default; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 0; }
[hidden] { display: none !important; }
:target { scroll-margin-top: 24px; }
b, strong { font-weight: var(--fw-bold); }
::selection { background: var(--c-ink); color: var(--c-white); }

/* Focus: a visible ring for keyboard users only. */
:focus:not(:focus-visible) { outline: 0; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--c-white); }

/* ---------------------------------------------------------------- Links */
a { color: inherit; text-decoration: none; transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.link--underline { font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: var(--lh-ui); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.link--underline-2 { font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: var(--lh-ui); text-decoration: underline; text-decoration-color: var(--c-ink-10); text-underline-position: under; }
.link--underline-2-l { text-decoration-color: var(--c-ink-70); }
.link--icon { display: inline-flex; align-items: center; gap: var(--space-2); }
.link--icon .icon { width: var(--icon-md); height: auto; }
.link--back { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-disc-sm); height: var(--icon-disc-sm); border-radius: var(--r-round); background: var(--c-surface-100); }
.link--back .icon { transform: rotate(90deg); }
.link--green { color: var(--c-link-green); text-decoration: underline; text-decoration-color: var(--c-link-green-10); text-underline-offset: 3px; }
.link--green:hover { opacity: .6; }
.link-dim:hover { opacity: var(--hover-dim); }

/* ---------------------------------------------------------------- Typography */
h1, h2, h3, h4, h5, h6, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: inherit;
}
h1, .t-h1 { font-size: var(--fs-h1); }
h2, .t-h2 { font-size: var(--fs-h2); }
h3, .t-h3 { font-size: var(--fs-h3); }
h4, .t-h4 { font-size: var(--fs-h4); }
h5, .t-h5, h6 { font-size: var(--fs-h5); }
.t-catalog-title { font-size: var(--fs-catalog-title); font-weight: var(--fw-medium); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-hero { font-size: var(--fs-hero); }

.t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-copy-sm); }
.t-lead { font-size: var(--fs-lead); line-height: 1; font-weight: var(--fw-medium); }
.t-card-title { font-size: var(--fs-card-title); line-height: 1; font-weight: var(--fw-bold); }
.t-stat { font-size: var(--fs-stat); line-height: 1; font-weight: var(--fw-medium); letter-spacing: var(--ls-stat); }
.t-14 { font-size: var(--fs-14); line-height: var(--lh-ui); }
.t-12 { font-size: var(--fs-12); line-height: 1; }
.t-ttu { font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.t-ttu--long { line-height: 2; }
.t-caps-sm { font-size: var(--fs-10); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-caps-tight); text-transform: uppercase; }
.t-medium { font-weight: var(--fw-medium); }
.t-bold { font-weight: var(--fw-bold); }
.t-muted { color: var(--c-text-muted); }
.t-subtle { color: var(--c-text-subtle); }
.t-center { text-align: center; }

/* ---------------------------------------------------------------- Layout: container and 12-col grid */
.container { width: 100%; margin: 0 auto; padding-left: var(--unit); padding-right: var(--unit); }
.container--flush-right { padding-right: 0; }
.grid-12 { display: grid; grid-template-columns: repeat(12, var(--column-unit)); column-gap: var(--gutter-unit); }
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; } .span-11 { grid-column: span 11; } .span-12 { grid-column: span 12; }
/* Width of N columns (N cols + N-1 gutters) for flex layouts: style="--cols:3" */
.w-cols { width: calc(var(--cols, 12) * var(--column-and-gutter-unit) - var(--gutter-unit)); }
.ml-cols { margin-left: calc(var(--cols, 1) * var(--column-and-gutter-unit)); }
@media (max-width: 990px) {
  .grid-12 { grid-template-columns: 1fr; }
  .grid-12 > [class*="span-"] { grid-column: 1 / -1; }
  .w-cols { width: 100%; }
  .ml-cols { margin-left: 0; }
}
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--sm { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
.section--lg { padding-top: var(--section-y-lg); padding-bottom: var(--section-y-lg); }
@media (max-width: 990px) { .hide-mobile { display: none !important; } }
@media (min-width: 991px) { .hide-desktop { display: none !important; } }

/* ---------------------------------------------------------------- Accessibility helpers */
.visually-hidden, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-skiplink);
  padding: 12px 16px; background: var(--c-ink); color: var(--c-white);
  font-size: var(--fs-14); font-weight: var(--fw-medium); border-radius: var(--r-sm);
  transform: translateY(-200%); transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------- Icons */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; overflow: visible; }

/* ---------------------------------------------------------------- Buttons (.btn) — 00 §6.1
   Markup: <a|button class="btn …"><span class="btn__bg"></span><span class="btn__text">Label</span>[svg]</a|button>
   Hover is a two-layer wipe: .btn__bg exits left, ::before (same fill) enters from the right .3s later. */
.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-white);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  width: var(--btn-w); max-width: 100%; height: var(--btn-h);
  padding: 0 var(--btn-px); overflow: hidden;
  font-family: var(--font-sans); font-size: var(--fs-btn); font-weight: var(--fw-medium);
  line-height: var(--btn-h); letter-spacing: var(--ls-caps); text-transform: uppercase; text-align: center;
  color: var(--btn-fg); border: 0; border-radius: var(--btn-radius); background: none;
  cursor: pointer; white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn__bg, .btn:not(.btn--lines):not(.btn--outlined)::before {
  position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); border-radius: inherit;
}
.btn:not(.btn--lines):not(.btn--outlined)::before {
  content: ""; transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease-expo);
}
.btn__bg { transition: transform var(--dur-3) var(--ease-expo) var(--btn-wipe-delay); }
.btn__text, .btn > .icon, .btn__status { position: relative; z-index: 1; }
.btn__text { overflow: hidden; text-overflow: ellipsis; transition: opacity .2s var(--ease); }
@media (hover: hover) {
  .btn:hover:not(.btn--lines):not(.btn--outlined) .btn__bg { transform: translateX(-101%); transition: transform var(--dur-3) var(--ease-expo); }
  .btn:hover:not(.btn--lines):not(.btn--outlined)::before { transform: translateX(0); transition: transform var(--dur-3) var(--ease-expo) var(--btn-wipe-delay); }
}
.btn--bordered { border-radius: var(--btn-radius-bordered); }
.btn--icon { justify-content: space-between; text-align: left; }
.btn--icon > .icon { width: var(--icon-2xl); height: auto; }
.btn--hint { overflow: visible; }
.btn--full { width: 100%; }
.btn--md { --btn-h: var(--btn-h-md); }
.btn--sm { --btn-h: var(--btn-h-sm); }
.btn--card { --btn-h: var(--btn-h-sm); width: var(--btn-w-card); }

/* Colour variants (00 §3.7) */
.btn--beige  { --btn-bg: var(--btn-bg-beige);  --btn-fg: var(--c-ink); }
.btn--olive, .btn--sage { --btn-bg: var(--btn-bg-olive); --btn-fg: var(--c-ink); }
.btn--green  { --btn-bg: var(--btn-bg-green);  --btn-fg: var(--c-ink); }
.btn--grey   { --btn-bg: var(--btn-bg-grey);   --btn-fg: var(--c-ink); }
.btn--brown  { --btn-bg: var(--btn-bg-brown);  --btn-fg: var(--c-white); }
.btn--purple { --btn-bg: var(--btn-bg-purple); --btn-fg: var(--c-white); }
.btn--red    { --btn-bg: var(--btn-bg-red);    --btn-fg: var(--c-white); }
.btn--deep   { --btn-bg: var(--btn-bg-deep);   --btn-fg: var(--c-white); }
.btn--pale   { --btn-bg: var(--c-sage-pale);   --btn-fg: var(--c-ink); }
.btn--glass  { --btn-bg: var(--btn-bg-glass);  --btn-fg: var(--c-white); }
.btn--white  { --btn-bg: var(--c-white);       --btn-fg: var(--c-ink); }
.btn--accent { --btn-bg: var(--cat-active);    --btn-fg: var(--c-ink); }

/* Outlined: transparent with a 1px ink border; hover fills ink (.25s, no wipe). */
.btn--outlined {
  --btn-fg: var(--c-ink);
  font-size: var(--fs-btn-outlined); border-radius: var(--btn-radius-bordered);
  transition: color var(--dur-1) var(--ease);
}
.btn--outlined .btn__bg { background: transparent; border: 1px solid var(--c-ink); transition: background-color var(--dur-1) var(--ease); }
.btn--outlined:hover { color: var(--c-white); }
.btn--outlined:hover .btn__bg { background: var(--c-ink); }
.btn--outlined.btn--light { --btn-fg: var(--c-white); }
.btn--outlined.btn--light .btn__bg { border-color: var(--c-white); }
.btn--outlined.btn--light:hover { color: var(--c-ink); }
.btn--outlined.btn--light:hover .btn__bg { background: var(--c-white); }

/* Lines: ink text between two 1px hairlines; hover draws ink lines from the centre. */
.btn--lines { --btn-fg: var(--c-ink); font-size: var(--fs-btn-outlined); }
.btn--lines .btn__bg { background: none; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.btn--lines .btn__bg::before, .btn--lines .btn__bg::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--c-ink);
  transform: scaleX(0); transform-origin: center; transition: transform var(--dur-3) var(--ease-expo);
}
.btn--lines .btn__bg::before { top: -1px; }
.btn--lines .btn__bg::after { bottom: -1px; }
.btn--lines:hover .btn__bg::before, .btn--lines:hover .btn__bg::after { transform: scaleX(1); }

/* States */
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn.is-pressed { animation: adt-press var(--dur-press) var(--ease-press); }
@keyframes adt-press { 0% { scale: 1; } 55% { scale: .94; } 100% { scale: 1; } }
.btn.is-loading, .btn.is-status { pointer-events: none; }
.btn.is-loading:disabled, .btn.is-status:disabled { opacity: 1; }
.btn.is-loading .btn__text { opacity: .5; }

/* Submit feedback (chrome.js buttonSuccess / buttonError): label fades, a circle +
   tick (or ×) draws in, then the message replaces the label. */
.btn__status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.btn__status svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.btn__status circle, .btn__status path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.btn.is-status .btn__text, .btn.is-status > .icon { opacity: 0; }
.btn.is-status .btn__status { opacity: 1; }
.btn.is-status .btn__status circle { animation: adt-draw .4s cubic-bezier(.33, 1, .68, 1) forwards; }
.btn.is-status .btn__status path { animation: adt-draw .3s cubic-bezier(.33, 1, .68, 1) .25s forwards; }
.btn.is-status-done .btn__status { opacity: 0; }
.btn.is-status-done .btn__text { opacity: 1; white-space: normal; line-height: 1.3; }
@keyframes adt-draw { to { stroke-dashoffset: 0; } }

/* WooCommerce buttons without the extra spans: both layers on pseudo-elements (00 §6.1). */
:where(.woocommerce, .woocommerce-page) :is(.button, .wc-forward, .checkout-button, .single_add_to_cart_button, button[type="submit"].button) {
  --btn-bg: var(--c-ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  font-family: var(--font-sans); font-size: var(--fs-btn); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase; line-height: 1.2;
  color: var(--c-white); background: transparent; border: 0; border-radius: var(--btn-radius-bordered); cursor: pointer;
}
:where(.woocommerce, .woocommerce-page) :is(.button, .wc-forward, .checkout-button, .single_add_to_cart_button)::before,
:where(.woocommerce, .woocommerce-page) :is(.button, .wc-forward, .checkout-button, .single_add_to_cart_button)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); border-radius: inherit;
}
:where(.woocommerce, .woocommerce-page) :is(.button, .wc-forward, .checkout-button, .single_add_to_cart_button)::before { transition: transform var(--dur-3) var(--ease-expo) var(--btn-wipe-delay); }
:where(.woocommerce, .woocommerce-page) :is(.button, .wc-forward, .checkout-button, .single_add_to_cart_button)::after { transform: translateX(100%); transition: transform var(--dur-3) var(--ease-expo); }
@media (hover: hover) {
  :where(.woocommerce, .woocommerce-page) :is(.button, .wc-forward, .checkout-button, .single_add_to_cart_button):hover::before { transform: translateX(-101%); transition-delay: 0s; }
  :where(.woocommerce, .woocommerce-page) :is(.button, .wc-forward, .checkout-button, .single_add_to_cart_button):hover::after { transform: translateX(0); transition-delay: var(--btn-wipe-delay); }
}

/* Pill link (.main-service__btn) */
.pill { display: inline-flex; align-items: center; height: var(--pill-h); padding: 0 var(--space-4); border-radius: var(--r-pill); background: var(--c-sage-pale); font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: var(--pill-h); color: var(--c-ink); transition: opacity var(--dur-1) var(--ease); }
.pill:hover { opacity: .8; }

/* Icon-only circle button (3D, download) */
.circle-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-circle-lg); height: var(--icon-circle-lg); border-radius: var(--r-round); border: 1px solid var(--c-line); transition: border-color var(--dur-1) var(--ease); }
.circle-btn:hover { border-color: var(--c-ink); }

/* ---------------------------------------------------------------- Inputs (underline, floating label) — 00 §6.5 */
.input { position: relative; display: block; font-size: var(--fs-input); line-height: 1; }
.input__field {
  display: block; width: 100%; margin: 0; padding: 0 0 16px;
  font-size: var(--fs-input); font-weight: var(--fw-regular); line-height: 1.2; color: var(--c-ink);
  background: none; border: 0; border-bottom: 1px solid var(--c-line-input); border-radius: 0;
  outline: 0; box-shadow: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-1) var(--ease);
}
.input__field::placeholder { color: var(--c-ink); opacity: 1; }
.input--optional .input__field::placeholder, .input__field.is-optional::placeholder { color: var(--c-placeholder); }
.input__field:focus-visible { outline: 0; border-bottom-color: var(--c-ink-30); }
.input__field:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--c-white) inset; -webkit-text-fill-color: var(--c-ink); }
/* Floating label: sits on the line, floats above when focused/filled (or always with .input--floated). */
.input__label {
  position: absolute; left: 0; top: 2px; max-width: 128%;
  font-size: var(--fs-input); line-height: 1; color: var(--c-ink);
  pointer-events: none; transform-origin: 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .3s var(--ease-io), color .3s var(--ease-io);
}
.input--optional .input__label { color: var(--c-placeholder); }
.input:has(.input__label) { padding-top: 0; }
.input--focused .input__label, .input--filled .input__label, .input--floated .input__label,
.input__field:focus ~ .input__label, .input__field:not(:placeholder-shown) ~ .input__label {
  transform: scale(.778) translateY(-130%);
}
.input:has(.input__label) .input__field::placeholder { color: transparent; }
.input--invalid .input__field, .input__field[aria-invalid="true"] { border-bottom-color: var(--c-error); }
.input--valid .input__field { border-bottom-color: var(--c-success); }
.input__tip { display: block; margin-top: 4px; font-size: var(--fs-14); line-height: var(--lh-ui); color: var(--c-error); }
.input__tip:empty { display: none; }
.input--valid .input__tip { color: var(--c-success); }
.input__tip-link { display: inline-block; margin-top: 4px; font-size: var(--fs-input); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Textarea: ruled paper (bottom border + an extra line at 60px), no resize. */
.textarea { position: relative; border-bottom: 1px solid var(--c-line-input); }
.textarea::before { content: ""; position: absolute; left: 0; right: 0; top: 60px; height: 1px; background: var(--c-line-input); pointer-events: none; }
.textarea .input__field, textarea.input__field { height: 109px; padding: 0; line-height: 60px; border-bottom: 0; resize: none; overflow: auto; }

/* Native select skinned as text + caret (Slim Select can replace it). */
.select { position: relative; display: block; }
.select select, select.select__field {
  display: block; width: 100%; padding: 0 24px 16px 0; font-size: var(--fs-input); line-height: 1.2; color: var(--c-ink);
  background: none; border: 0; border-bottom: 1px solid var(--c-line-select); border-radius: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.select::after { content: ""; position: absolute; right: 2px; top: 7px; border-top: 6px solid var(--c-ink); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; pointer-events: none; }
.select--fluid select { border-bottom: 0; padding-bottom: 0; font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.select--fluid::after { top: 3px; }
.select--bordered select { width: 280px; height: 40px; padding: 6px 32px 6px 12px; border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: var(--fs-14); }
.select--bordered::after { top: 17px; right: 14px; }

/* Checkbox / radio (.checkbox) — hidden native input + visual box */
.checkbox { position: relative; display: inline-flex; align-items: center; min-height: var(--checkbox-size); cursor: pointer; }
.checkbox__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.checkbox__box {
  position: relative; flex-shrink: 0; width: var(--checkbox-size); height: var(--checkbox-size);
  border-radius: var(--r-xs); background: var(--cat-main, var(--c-beige));
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.checkbox__box::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: var(--c-ink);
  transform: translate(-50%, -50%) scale(0); transition: transform var(--dur-1) var(--ease);
}
.checkbox__text { padding-left: var(--space-4); font-size: var(--fs-16); line-height: 1.2; letter-spacing: var(--ls-chip); }
.checkbox__num { margin-left: 6px; opacity: 0; color: var(--c-ink-40); transition: opacity var(--dur-1) var(--ease); }
.checkbox:hover .checkbox__num { opacity: 1; }
.checkbox__input:checked + .checkbox__box { background: var(--c-sage-dark); }
.checkbox__input:checked + .checkbox__box::after { transform: translate(-50%, -50%) scale(1); }
.checkbox__input:focus-visible + .checkbox__box { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.checkbox__input:disabled ~ .checkbox__text { opacity: .2; }
.checkbox--radio .checkbox__box, .checkbox--radio .checkbox__box::after { border-radius: var(--r-round); }
.checkbox--outlined .checkbox__box { background: transparent; border: 1px solid var(--c-line-checkbox); }
.checkbox--outlined:hover .checkbox__box { background: var(--cat-main); }
.checkbox--outlined .checkbox__input:checked + .checkbox__box { background: var(--cat-active); border-color: var(--cat-active); }
.checkbox--rose .checkbox__box { background: var(--c-sale-light); }
.checkbox--rose .checkbox__input:checked + .checkbox__box { background: var(--c-sale); }

/* Toggle switch (.checkbox--switch): 40×24 track, 10px ink knob. */
.checkbox--switch { min-height: var(--toggle-h); }
.checkbox--switch .checkbox__box { width: var(--toggle-w); height: var(--toggle-h); border-radius: var(--r-pill); background: var(--cat-main, var(--c-beige)); }
.checkbox--switch .checkbox__box::after {
  left: 0; width: var(--toggle-knob); height: var(--toggle-knob); border-radius: var(--r-round);
  transform: translate(8px, -50%); transition: transform var(--dur-1) var(--ease);
}
.checkbox--switch .checkbox__input:checked + .checkbox__box { background: var(--cat-active); }
.checkbox--switch .checkbox__input:checked + .checkbox__box::after { transform: translate(calc(var(--toggle-w) - 8px - 100%), -50%); }

/* Segmented switcher (.switcher) */
.switcher { display: inline-flex; padding: 4px; border-radius: var(--r-md); background: var(--cat-main); }
.switcher__item {
  height: var(--switcher-seg-h); padding: 0 20px; border-radius: var(--r-sm);
  font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: var(--switcher-seg-h);
  letter-spacing: var(--ls-caps); text-transform: uppercase; transition: opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.switcher__item:not(.is-active):hover { opacity: var(--hover-dim); }
.switcher__item.is-active, .switcher__item[aria-selected="true"], .switcher__item[aria-current] { background: var(--cat-active); }
@media (max-width: 990px) {
  .switcher { display: flex; width: 100%; }
  .switcher__item { flex: 1; height: 32px; line-height: 32px; text-align: center; }
}

/* ---------------------------------------------------------------- Chips — 00 §6.2, 01 §6.3 */
.chip {
  --chip-bg: var(--c-beige);
  display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 var(--chip-px);
  border-radius: var(--r-pill); background: var(--chip-bg); color: var(--c-ink);
  font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: 1; letter-spacing: var(--ls-caps-chip); text-transform: uppercase;
  white-space: nowrap; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover { --chip-bg: var(--c-sage-dark); }
.chip--olive { --chip-bg: var(--c-sage); }
.chip--blue  { --chip-bg: var(--accent-blue-main); }
.chip--beige { --chip-bg: var(--c-taupe); }
.chip--green-d { --chip-bg: var(--c-sage-deep); color: var(--c-white); }
.chip--brown { --chip-bg: var(--btn-bg-brown); }
.chip--text { font-size: var(--fs-14); font-weight: var(--fw-regular); letter-spacing: var(--ls-chip); text-transform: none; }

/* Checkbox-backed chip (.chipbox) */
.chipbox { position: relative; display: inline-flex; cursor: pointer; }
.chipbox__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chipbox__field {
  position: relative; z-index: 0; display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 var(--chip-px);
  font-size: var(--fs-14); line-height: var(--chip-h); letter-spacing: var(--ls-chip);
}
.chipbox__bg { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-pill); background: var(--color, var(--c-beige)); transition: background-color var(--dur-1) var(--ease); }
.chipbox:hover .chipbox__bg, .chipbox__input:checked ~ .chipbox__field .chipbox__bg, .chipbox__input:checked + .chipbox__bg { background: var(--c-sage-dark); }
.chipbox__input:focus-visible ~ .chipbox__field { outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: var(--r-pill); }
.chipbox--outlined .chipbox__field { height: var(--chip-h-sm); padding: 0 12px; letter-spacing: 0; line-height: var(--chip-h-sm); }
.chipbox--outlined .chipbox__bg { background: transparent; border: 1px solid var(--c-line); }
.chipbox--outlined:hover .chipbox__bg { background: var(--c-black); }
.chipbox--outlined:hover .chipbox__field { color: var(--c-white); }

/* Active-filter chip (.chipbtn) */
.chipbtn { position: relative; display: inline-flex; align-items: center; height: var(--chip-h-sm); padding: 0 50px 0 var(--chip-px); border-radius: var(--r-md); border: 1px solid var(--c-beige); font-size: var(--fs-14); letter-spacing: var(--ls-chip); line-height: 1; }
.chipbtn .icon { position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.chipbtn--accent { border: 0; background: var(--cat-main); }

/* ---------------------------------------------------------------- Tags and badges — 00 §6.3 */
.tag { display: inline-block; height: var(--tag-h); padding: 0 12px; border-radius: var(--r-tag); background: var(--c-black); color: var(--c-white); font-size: var(--fs-12); font-weight: var(--fw-medium); line-height: var(--tag-h); letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap; }
.tag--green { background: var(--c-stock); }
.tag--yellow { background: var(--c-tag-yellow); color: var(--c-ink); }
.tag--purple { background: var(--c-tag-purple); }
.tag--red { background: var(--c-red); }
.badge-sale {
  display: inline-flex; align-items: center; justify-content: center; width: var(--sale-badge); height: var(--sale-badge);
  border-radius: var(--r-round); background: var(--c-sale); color: var(--c-white);
  font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps-tight); text-transform: uppercase; transform: rotate(-24deg);
}
@media (max-width: 767px) { .badge-sale { font-size: var(--fs-10); } }
.badge-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--icon-disc-sm); height: var(--icon-disc-sm); padding: 0 4px;
  border-radius: var(--r-pill); background: var(--c-surface-100); color: var(--c-ink);
  font-size: var(--fs-9); font-weight: var(--fw-medium); line-height: 1;
}
.stock-dots { display: inline-flex; gap: 2px; }
.stock-dots i { width: var(--stock-dot); height: var(--stock-dot); border-radius: var(--r-round); background: var(--c-stock); }
.stock-text { font-size: var(--fs-12); line-height: var(--lh-body); color: var(--c-stock); }

/* ---------------------------------------------------------------- Quantity stepper (.counter) — 00 §6.5 */
.counter { display: inline-flex; align-items: center; height: var(--stepper-btn-h); }
.counter__btn {
  position: relative; width: 40px; height: var(--stepper-btn-h); border-radius: var(--r-sm); background: var(--cat-main);
  color: var(--c-ink-60); transition: background-color var(--dur-1) var(--ease);
}
.counter__btn::before, .counter__btn--plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); }
.counter__btn::before { width: 10px; height: 2px; }
.counter__btn--plus::after { width: 2px; height: 10px; }
.counter__btn:hover { background: var(--cat-active); }
.counter__btn:disabled { opacity: .4; }
.counter__input {
  width: 40px; height: var(--stepper-btn-h); padding: 0; border: 0; background: none; text-align: center;
  font-size: var(--fs-16); line-height: var(--stepper-btn-h); color: var(--c-ink); -moz-appearance: textfield; appearance: textfield;
}
.counter__input::-webkit-outer-spin-button, .counter__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.counter--lg .counter__btn { width: var(--stepper-btn-w); }
.counter--dark .counter__btn { background: var(--c-ink); color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------------- Pagination (.pagen) — 00 §6.5 */
.pagen { display: flex; justify-content: flex-end; gap: var(--space-2); }
.pagen__item, .pagen .page-numbers {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--pagen-w); height: var(--pagen-h);
  font-size: var(--fs-16); line-height: var(--pagen-h); border-top: 1px solid var(--c-line-strong); border-bottom: 1px solid var(--c-line-strong);
  transition: border-color var(--dur-1) var(--ease);
}
.pagen__item:hover, .pagen .page-numbers:hover { border-bottom-color: var(--c-ink); }
.pagen__item.is-active, .pagen .page-numbers.current { border-color: var(--c-ink); }

/* ---------------------------------------------------------------- Feedback: notify, tooltip */
.notify { position: relative; max-width: 288px; padding: 16px 24px; border-radius: var(--r-md); background: var(--c-sage-pale); font-size: var(--fs-14); line-height: var(--lh-ui); }
.notify--error { background: var(--c-surface-350); }
.notify__title { display: block; margin-bottom: 4px; font-weight: var(--fw-bold); }
.tip { padding: 6px 8px; border-radius: var(--r-sm); background: var(--c-ink-90); color: var(--c-white); font-size: var(--fs-12); line-height: 1; }

/* ---------------------------------------------------------------- Images */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform var(--dur-4) var(--ease); }
.img-zoom:hover img { transform: scale(var(--img-hover-scale)); }
.ratio-1 { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.ratio-1 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- Reveal on scroll [data-observe] — 00 §8.2
   chrome.js adds .visible (and .is-visible) once, when ≥20% is in view (title-line: fully in view).
   Initial states apply only with JS on and motion allowed, so content is never stuck hidden. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-observe="fade"] { opacity: 0; transition: opacity var(--dur-3) var(--ease-io); }
  html.js [data-observe="fadeup"] { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
  html.js [data-observe="scaleX"] { transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-4) var(--ease-line) .2s; }
  html.js [data-observe="scaleIn"] { opacity: 0; transform: translate3d(-50%, 0, 0); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  html.js [data-observe="scaleIn"] [data-observe-child] { transform: translate3d(.5em, 0, 0) scale(.85); transition: transform var(--dur-4) var(--ease); }
  html.js [data-observe="scaleIn"] + [data-observe="scaleIn"] { transition-delay: .2s; }
  html.js [data-observe="scaleIn"] + [data-observe="scaleIn"] + [data-observe="scaleIn"] { transition-delay: .3s; }
  html.js [data-observe="stagger"] > * { opacity: 0; transition: opacity var(--dur-3) var(--ease); transition-delay: var(--delay, 0s); }

  html.js [data-observe].visible { opacity: 1; transform: none; }
  html.js [data-observe="scaleIn"].visible [data-observe-child] { transform: none; }
  html.js [data-observe="stagger"].visible > * { opacity: 1; }
}
/* Title underline: 6px (4px ≤500) accent bar that draws left → right. */
[data-observe="title-line"] { position: relative; }
[data-observe="title-line"]::after {
  content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: var(--title-line-h);
  background: var(--cat-active); transform-origin: left center; transform: scaleX(0);
  transition: transform var(--dur-3) var(--ease-expo);
}
[data-observe="title-line"].visible::after, html:not(.js) [data-observe="title-line"]::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- Swiper cursor (00 §8.4) */
.swiper-grab, .js-swiper-grab .swiper-wrapper { cursor: grab; }
.swiper-grab:active, .js-swiper-grab .swiper-wrapper:active { cursor: grabbing; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- Fallback template (index.php) */
.page-fallback { padding-bottom: var(--section-y); }
.page-fallback__title { margin-bottom: var(--space-12); }
.page-fallback__entry + .page-fallback__entry { margin-top: var(--space-12); }
.page-fallback__content > * + * { margin-top: 1em; }

/* ---------------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn::before, .btn__bg { transition: none !important; }
}