/* NowSterile additions to leif.css, and the bridge that brings WooCommerce's own
   markup (cart, checkout, account, notices, review form) onto the tokens.
   Rules: colours only through the derived tokens, fonts only through the three font variables. */

/* ---------- Header extras ------------------------------------------------ */
.ns-skip:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip-path: none; z-index: 100; background: var(--surface-raised); padding: 10px 16px; border-radius: var(--radius-ctrl); font-family: var(--font-label); }
.ns-cart { position: relative; }
.ns-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--deep); color: var(--on-deep); font-family: var(--font-label); font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center; }
.ns-cart-count[hidden] { display: none; }

/* ---------- Images in tiles ---------------------------------------------- */
/* leif.css sizes gallery, split and hero images; these tiles need the same. */
.l-product__media img, .l-variant__img img, .l-spot__media img, .l-tile__media img, .l-collage img,
.l-compare__thumb img, .l-sticky__thumb img, .l-story__photo img { width: 100%; height: 100%; object-fit: cover; }
.l-spot__media { display: block; }

/* Feature-row figures. leif.css calls these .l-spec, the same class as the spec sheet
   (a two-column grid), which breaks them and confuses audit.js; they get their own class. */
.ns-fig b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; color: var(--accent-text); white-space: nowrap; }
.ns-fig span { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Product page ------------------------------------------------- */
.ns-buyform { display: grid; gap: 14px; }
.ns-buyform .l-atc[disabled] { opacity: .55; cursor: not-allowed; }
.ns-note { display: flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); }
.ns-note .l-icon { color: var(--accent-text); width: 1.1em; height: 1.1em; }
.l-buy .l-acc__body a.l-link { font-size: inherit; }

/* Cut-out images on a palette tile: contained, with a CSS shadow so it follows the palette. */
.ns-thumb--cutout img, .ns-media--cutout img { object-fit: contain; padding: 9%; filter: drop-shadow(0 16px 16px color-mix(in oklab, var(--brand-ink) 20%, transparent)); }
.ns-media--cutout { background: var(--surface-raised); }
.l-compare__thumb.ns-thumb--cutout { background: var(--surface-raised); }
.l-compare__thumb.ns-thumb--cutout img { padding: 6%; }
.ns-thumb--icon { display: grid; place-items: center; background: var(--surface-soft); color: var(--ink-muted); }
.ns-thumb--icon .l-icon { width: 34px; height: 34px; }
.ns-footnote { margin-top: 18px; text-align: center; font-family: var(--font-label); font-size: var(--fs-label); font-weight: 500; color: var(--ink-muted); }
.ns-faqmore { margin-top: 24px; font-family: var(--font-label); font-size: var(--fs-small); color: var(--ink-muted); }
.l-section--deep .ns-faqmore { color: var(--deep-muted); }

/* Model chooser: three cards that link to each autoclave. */
.ns-models { gap: 20px; }
.ns-model { text-align: left; justify-items: start; gap: 6px; padding: 14px 14px 20px; border-radius: var(--radius-card); background: var(--surface-raised); border: 1.5px solid transparent; transition: border-color .2s ease; }
.ns-model:hover { border-color: var(--ink-muted); }
.ns-model.is-current { border-color: var(--ink); }
.ns-model .l-variant__img { width: 100%; margin-bottom: 8px; background: var(--surface-soft); }
.ns-model__name { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.01em; }
.ns-model__line { font-family: var(--font-body); font-weight: var(--weight-body); font-size: 0.9375rem; color: var(--ink-muted); }
.ns-model__facts { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: .04em; color: var(--accent-text); }
.ns-model__price { font-family: var(--font-label); font-weight: 700; font-size: 1.0625rem; margin-top: 4px; }
.ns-model .l-link { margin-top: 6px; }
@media (max-width: 720px) { .ns-models { grid-template-columns: 1fr; } }

/* Model comparison on the autoclave pages (#models): two "step up" cards over one
   three-model table. The table looks like .l-compare (same rows, marks and navy slab,
   here on the model on screen) but has its own class: it is a model chooser, not the
   page's one "us vs the alternative" comparison, which audit.js holds to 6-8 rows.
   Spacing is tighter than other sections (Leif: it should come close to one screen),
   and the model row sticks under the site header while the table scrolls, so you
   always see which column is which. On phones each row label sits above its values. */
.ns-lineup-section { padding-block: clamp(40px, 5vw, 64px); }
.ns-lineup-section .l-head { gap: 8px; margin-bottom: clamp(20px, 2.4vw, 28px); }
.ns-stepups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ns-stepup { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--radius-card); background: var(--surface-raised); }
.ns-stepup h3 { font-size: var(--fs-h3); }
.ns-stepup__path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.ns-stepup__path .l-icon { width: 14px; height: 14px; }
.ns-stepup__more { margin-left: auto; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); letter-spacing: 0.06em; }
.ns-stepup__intro { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-muted); }
.ns-stepup__list { display: grid; gap: 10px; }
.ns-stepup__list li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.ns-stepup__list .l-badge__ring { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--ink); }
.ns-stepup__list .l-badge__ring .l-icon { width: 16px; height: 16px; }
.ns-stepup__list p { font-size: 0.875rem; line-height: 1.45; color: var(--ink-muted); }
.ns-stepup__list b { display: block; font-family: var(--font-label); font-weight: 600; color: var(--ink); }
.ns-stepup__trade { padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--font-label); font-size: 0.8125rem; line-height: 1.45; color: var(--ink-muted); }

/* Pouches a load, drawn: one pouch per mark, eight to a row, so the Pro's tray is twice as tall. */
.ns-pouches { display: grid; gap: 8px; }
.ns-pouches__row { display: grid; grid-template-columns: 84px minmax(0, 212px) auto; align-items: center; gap: 14px; }
.ns-pouches__name { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.ns-pouches__tray { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 8px; border-radius: var(--radius-ctrl); background: var(--surface-soft); }
.ns-pouches__tray i { position: relative; aspect-ratio: 5 / 7; border: 1px solid var(--ink); border-radius: 3px; background: var(--accent); }
.ns-pouches__tray i::before { content: ""; position: absolute; inset: 22% 0 auto; border-top: 1px solid var(--ink); }
.ns-pouches__count { font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; line-height: 1; }

/* The table. */
.ns-lineup { padding: clamp(14px, 2vw, 24px) clamp(16px, 2.4vw, 32px) clamp(16px, 2vw, 24px); }
.ns-lineup table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ns-lineup col.ns-lineup__label { width: 28%; }
.ns-lineup th, .ns-lineup td { padding: 10px 14px; text-align: center; vertical-align: middle; border-top: 1px solid var(--line); font-weight: inherit; }
.ns-lineup .is-ours { background: var(--deep); color: var(--on-deep); border-top-color: var(--deep-line); }

/* Model row: thumbnail, name and price on one line; sticks under the site header. */
.ns-lineup thead th, .ns-lineup thead td { position: sticky; top: calc(var(--header-h) + 1px); z-index: 3; border-top: 0; padding-block: 10px; background: var(--surface-raised); box-shadow: inset 0 -1px 0 var(--line); }
.ns-lineup thead .is-ours { background: var(--deep); box-shadow: none; border-radius: var(--radius-tile) var(--radius-tile) 0 0; }
.ns-lineup__model { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.ns-lineup .l-compare__thumb { width: 48px; margin: 0; border-radius: var(--radius-ctrl); }
.ns-lineup__id { display: grid; }
.ns-lineup__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; line-height: 1.25; }
.ns-lineup__price { font-family: var(--font-label); font-size: 0.9375rem; font-weight: 700; }
.ns-lineup__model:hover .ns-lineup__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Rows. */
.ns-lineup tbody th { text-align: left; font-family: var(--font-display); font-size: 1rem; font-weight: var(--weight-display); line-height: 1.3; }
.ns-lineup tbody th small { display: block; margin-top: 1px; font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; color: var(--ink-muted); }
.ns-lineup tbody td { font-family: var(--font-label); font-size: 0.875rem; font-weight: 500; line-height: 1.35; }
.ns-lineup tbody td b { display: block; font-weight: 600; }
.ns-lineup tbody td small { display: block; font-size: 0.75rem; color: var(--ink-muted); }
.ns-lineup tbody td.is-ours small { color: var(--deep-muted); }
.ns-lineup tbody tr:last-child td { font-size: 0.8125rem; }
.ns-lineup tbody .ns-lineup__group th { padding: 16px 14px 4px; font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.ns-lineup__group th, .ns-lineup__group td { border-top: 0; }
.ns-lineup tbody tr.ns-lineup__group + tr > * { border-top-color: transparent; }
.ns-lineup tbody tr.ns-lineup__group:first-child th { padding-top: 12px; }
.ns-lineup tfoot td { padding-block: 10px 14px; }
.ns-lineup tfoot .is-ours { border-radius: 0 0 var(--radius-tile) var(--radius-tile); }
.ns-lineup tfoot .l-link { font-size: 0.8125rem; }
.ns-lineup .ns-footnote { margin-top: 12px; }
/* Ticks: navy on the light columns, cream on the navy one; "not on this model" is a quiet dash. */
.ns-lineup .l-mark { width: 24px; height: 24px; }
.ns-mark--yes { background: var(--ink); color: var(--surface-raised); }
.is-ours .ns-mark--yes { background: var(--on-deep); color: var(--deep); }
.ns-dash { font-size: 1.25rem; line-height: 1; color: color-mix(in oklab, var(--ink) 35%, var(--surface-raised)); }
.is-ours .ns-dash { color: color-mix(in oklab, var(--on-deep) 45%, var(--deep)); }

@media (max-width: 860px) {
  .ns-stepups { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ns-pouches__row { grid-template-columns: minmax(0, 220px) auto; gap: 4px 14px; }
  .ns-pouches__name { grid-column: 1 / -1; }
  .ns-lineup { padding: 8px 10px 14px; }
  .ns-lineup table, .ns-lineup thead, .ns-lineup tbody, .ns-lineup tfoot { display: block; }
  .ns-lineup colgroup, .ns-lineup thead td, .ns-lineup tfoot td:first-child { display: none; }
  .ns-lineup tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The whole model row sticks here (the cells are grid items, not table cells). */
  .ns-lineup thead { position: sticky; top: calc(var(--header-h) + 1px); z-index: 3; background: var(--surface-raised); box-shadow: inset 0 -1px 0 var(--line); }
  .ns-lineup thead th { position: static; padding: 8px 4px; box-shadow: none; font-size: 0.875rem; }
  .ns-lineup thead .is-ours { border-radius: var(--radius-tile); }
  .ns-lineup__model { display: grid; justify-items: center; gap: 4px; text-align: center; }
  .ns-lineup .l-compare__thumb { width: 36px; }
  .ns-lineup__name { font-size: 0.875rem; line-height: 1.2; }
  .ns-lineup__price { font-size: 0.8125rem; }
  .ns-lineup tbody th { grid-column: 1 / -1; padding: 12px 6px 4px; text-align: center; font-size: 0.9375rem; border-top: 1px solid var(--line); }
  .ns-lineup tbody th small { display: inline; margin: 0; }
  .ns-lineup tbody th small::before { content: " · "; }
  .ns-lineup tbody td { padding: 6px 4px 10px; border-top: 0; font-size: 0.8125rem; }
  .ns-lineup tbody td.is-ours { border-radius: var(--radius-ctrl); }
  .ns-lineup tbody tr:last-child td { font-size: 0.75rem; }
  .ns-lineup tr.ns-lineup__group { display: block; }
  .ns-lineup__group td { display: none; }
  .ns-lineup tbody .ns-lineup__group th { display: block; padding: 18px 6px 0; border-top: 0; text-align: center; }
  .ns-lineup tbody tr.ns-lineup__group + tr > th { border-top-color: transparent; }
  .ns-lineup tfoot td { padding: 10px 4px; border-top: 1px solid var(--line); }
  .ns-lineup tfoot .is-ours { border-radius: var(--radius-ctrl); border-top-color: transparent; }
  .ns-lineup tfoot .l-link { font-size: 0.75rem; }
}

/* Reviews: native WooCommerce form, opened from the empty state. */
.ns-reviewform { margin-top: 24px; }
.ns-reviewform > summary { list-style: none; display: inline-flex; }
.ns-reviewform > summary::-webkit-details-marker { display: none; }
.ns-reviewform[open] > summary { margin-bottom: 24px; }
.ns-reviewform .woocommerce-Reviews-title, .ns-reviewform .woocommerce-noreviews { display: none; }
.ns-reviewform #review_form_wrapper, .ns-reviewform .comment-respond { max-width: 640px; }
.ns-reviewform .comment-reply-title { display: block; font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: 12px; }
.ns-reviewform .comment-form { display: grid; gap: 14px; font-family: var(--font-label); font-size: var(--fs-small); }
.ns-reviewform .comment-form p { display: grid; gap: 6px; }
.ns-reviewform input[type="text"], .ns-reviewform input[type="email"], .ns-reviewform textarea, .ns-reviewform select { width: 100%; padding: 12px 14px; border-radius: var(--radius-ctrl); border: 1.5px solid var(--line); background: var(--surface-raised); font-family: var(--font-label); }
.ns-reviewform .stars a { color: var(--accent-text); margin-right: 6px; }
.ns-reviewform .form-submit input, .ns-reviewform .submit { justify-self: start; background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius-pill); min-height: 48px; padding: 0 26px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; cursor: pointer; }

/* ---------- Shared bits -------------------------------------------------- */
.ns-head-row { grid-template-columns: 1fr auto; align-items: end; }
.ns-head-row .l-lede { margin-top: 8px; }
.ns-group + .ns-group { padding-top: 0; }
.ns-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ns-formnote { padding: 12px 16px; border-radius: var(--radius-ctrl); background: var(--accent-soft); color: var(--ink); font-family: var(--font-label); font-size: var(--fs-small); font-weight: 600; }
.l-section--deep .ns-formnote { background: var(--deep-line); color: var(--on-deep); }
.ns-formtitle { font-size: var(--fs-h3); margin-bottom: 6px; }
.ns-faqgroup { font-size: var(--fs-h3); margin: 40px 0 12px; }
.ns-updated { margin-top: 32px; font-family: var(--font-label); font-size: var(--fs-label); font-weight: 500; color: var(--ink-muted); }
.ns-contactlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.ns-contactlist li { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: var(--radius-card); background: var(--surface-raised); font-family: var(--font-label); font-size: var(--fs-small); }
.ns-contactlist .l-icon { color: var(--accent-text); margin-top: 2px; }
.ns-contactlist b { display: block; font-weight: 700; margin-bottom: 2px; }
.ns-contactlist a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 720px) { .ns-contactlist { grid-template-columns: 1fr; } }
.ns-tm { margin-top: 18px; font-family: var(--font-label); font-size: var(--fs-label); color: var(--deep-muted); }
.ns-search { display: flex; gap: 10px; max-width: 640px; }
.ns-search .l-input { flex: 1; }
.ns-hero { background: var(--deep); }
.ns-hero .l-hero__media img { object-position: 50% 50%; }
@media (min-width: 861px) {
  /* The unit's side light would sit behind the headline: move the photo right and fade its left edge into the band. */
  .ns-hero .l-hero__media { left: 26%; }
  .ns-hero .l-hero__media img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, currentColor 32%); mask-image: linear-gradient(90deg, transparent 0%, currentColor 32%); }
  .ns-hero .l-hero__media::after { background: linear-gradient(90deg, color-mix(in oklab, var(--deep) 55%, transparent) 0%, transparent 45%); }
}
.l-hero h1 { max-width: 12ch; }
.l-trust li small { margin-top: 2px; }
.ns-reasons .l-tile__media { aspect-ratio: 1; }
@media (max-width: 720px) {
  .ns-hero .l-hero__media img { object-position: 80% 50%; }
  .ns-hero .l-hero__media::after { background: linear-gradient(0deg, color-mix(in oklab, var(--deep) 90%, transparent) 0%, color-mix(in oklab, var(--deep) 55%, transparent) 55%, color-mix(in oklab, var(--deep) 20%, transparent) 100%); }
  .ns-hero .l-hero__body { align-self: end; padding-top: 220px; }
}

/* ---------- WooCommerce bridge ------------------------------------------- */
/* Fonts and colours inside WooCommerce's own markup. */
.leif .woocommerce, .leif .wc-block-cart, .leif .wc-block-checkout, .leif .wc-block-components-sidebar,
.leif .woocommerce-MyAccount-content, .leif .ns-wc__body { font-family: var(--font-label); color: var(--ink); }
.leif .ns-wc__body h2, .leif .ns-wc__body h3, .leif .wc-block-components-title, .leif .wc-block-components-checkout-step__title,
.leif .wc-block-cart__totals-title, .leif .wc-block-components-product-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.leif .wc-block-components-product-name { font-size: 1.0625rem; text-decoration: none; }
.leif .price, .leif .amount, .leif .woocommerce-Price-amount, .leif .wc-block-formatted-money-amount,
.leif .wc-block-components-product-price, .leif .wc-block-components-totals-item__value { font-family: var(--font-label); font-weight: 700; color: var(--ink); }

/* Buttons WooCommerce prints. */
.leif .button, .leif button.button, .leif a.button, .leif input.button, .leif .checkout-button, .leif #place_order,
.leif .wc-block-components-button:not(.is-link), .leif .wc-block-cart__submit-button, .leif .woocommerce-form-track-order button,
.leif .wp-element-button {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius-pill);
  min-height: 52px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.leif .button:hover, .leif .checkout-button:hover, .leif #place_order:hover, .leif .wc-block-components-button:not(.is-link):hover,
.leif .woocommerce-form-track-order button:hover, .leif .wp-element-button:hover { background: var(--deep); color: var(--on-deep); }
.leif .wc-block-components-button .wc-block-components-button__text { color: inherit; }
.leif .wc-block-components-button.is-link { color: var(--accent-text); font-family: var(--font-label); }

/* Fields. */
.leif .woocommerce input.input-text, .leif .woocommerce select, .leif .woocommerce textarea, .leif .woocommerce-form-track-order input,
.leif .wc-block-components-text-input input, .leif .wc-block-components-combobox .components-combobox-control__input,
.leif .wc-blocks-components-select__select, .leif .wc-block-components-textarea {
  font-family: var(--font-label); border: 1.5px solid var(--line); border-radius: var(--radius-ctrl);
  background: var(--surface-raised); color: var(--ink);
}
.leif .woocommerce input.input-text, .leif .woocommerce-form-track-order input { width: 100%; padding: 14px 16px; font-size: 0.9375rem; }
.leif .wc-block-components-text-input label, .leif .wc-block-components-combobox label { font-family: var(--font-label); color: var(--ink-muted); }
.leif .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.leif .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--on-deep); }
.leif .wc-block-components-radio-control__input:checked::before { background: var(--ink); }

/* Notices: on the tint, in the label font. */
.leif .woocommerce-message, .leif .woocommerce-info, .leif .woocommerce-error, .leif .woocommerce-notices-wrapper > *,
.leif .wc-block-components-notice-banner {
  background: var(--surface-soft); color: var(--ink); border: 0; border-radius: var(--radius-ctrl);
  font-family: var(--font-label); font-size: var(--fs-small); padding: 14px 18px; list-style: none; margin: 0 0 16px;
}
.leif .woocommerce-message a, .leif .woocommerce-info a, .leif .wc-block-components-notice-banner a { color: var(--accent-text); font-weight: 600; }
.leif .woocommerce-message .button, .leif .woocommerce-info .button { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; margin-left: 12px; }
.leif .wc-block-components-notice-banner > svg { fill: var(--accent-text); background: none; }
.leif .woocommerce-notices-wrapper:empty { display: none; }
.l-pdp + .woocommerce-notices-wrapper, .woocommerce-notices-wrapper { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }

/* Cart and checkout pages. */
.ns-pagehead--slim { padding-block: clamp(28px, 4vw, 48px); }
.ns-pagehead--slim h1 { font-size: var(--fs-h2); }
.ns-wc { padding-top: clamp(28px, 4vw, 48px); }
.leif .wc-block-cart-items, .leif .wc-block-components-sidebar-layout .wc-block-components-main { font-family: var(--font-label); }
.leif .wc-block-cart-items th, .leif .wc-block-cart-items__header { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.leif .wc-block-components-sidebar .wc-block-components-panel, .leif .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.leif .wp-block-woocommerce-cart-order-summary-block, .leif .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--surface-raised); border-color: var(--line);
}
.leif .wc-block-cart__sidebar, .leif .wc-block-checkout__sidebar { background: var(--surface-raised); border-radius: var(--radius-card); padding: 20px; }
.leif .wc-block-components-product-metadata, .leif .wc-block-components-product-details { color: var(--ink-muted); font-size: var(--fs-small); }
.leif .wc-block-cart-item__image img { border-radius: var(--radius-tile); background: var(--surface-soft); }
.leif .wc-block-components-quantity-selector { border-radius: var(--radius-pill); border-color: var(--line); }
.leif .wc-block-components-quantity-selector input, .leif .wc-block-components-quantity-selector button { font-family: var(--font-label); color: var(--ink); }
.leif .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.leif .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-family: var(--font-display); font-size: 1.25rem; }
.leif .wc-block-components-checkout-step__description, .leif .wc-block-checkout__terms { color: var(--ink-muted); }
.leif .wc-block-components-checkout-step__heading-content { color: var(--ink-muted); }
.leif .wc-block-cart__empty-cart__title, .leif .wp-block-woocommerce-empty-cart-block h2 { font-family: var(--font-display); }
.leif .wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none; }
.leif .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; list-style: none; padding: 0; }
.leif .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { width: 100%; max-width: none; min-width: 0; }
.ns-empty-cart { padding-block: 8px 24px; }
.ns-empty-cart__intro { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: 40px; }
.ns-empty-cart__intro p { color: var(--ink-muted); }
.ns-empty-cart__products { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.ns-cart-product { min-width: 0; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.ns-cart-product .l-product { min-width: 0; flex: 1; align-content: start; }
.ns-cart-product .l-product__media { width: 100%; }
.ns-cart-product .l-btn { white-space: nowrap; min-height: 48px; }
@media (max-width: 1000px) { .ns-empty-cart__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } }
@media (max-width: 560px) { .ns-empty-cart__products { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) { body.woocommerce-cart { --logo-width: 140px; } }
.leif .wc-block-grid__product-image img { border-radius: var(--radius-card); background: var(--surface-soft); }
.leif .wc-block-grid__product-title { font-family: var(--font-display); font-weight: 600; }
.leif .wc-block-components-address-card, .leif .wc-block-components-shipping-rates-control__package { border-color: var(--line); border-radius: var(--radius-ctrl); }
.leif .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.leif .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Classic cart/checkout/account (when used). */
.leif table.shop_table { border-collapse: collapse; width: 100%; font-family: var(--font-label); }
.leif table.shop_table th, .leif table.shop_table td { border-top: 1px solid var(--line); padding: 14px 10px; text-align: left; }
.leif .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.leif .woocommerce-MyAccount-navigation a { display: inline-block; padding: 8px 18px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: 0.8125rem; font-weight: 600; }
.leif .woocommerce-MyAccount-navigation .is-active a { background: var(--deep); color: var(--on-deep); border-color: var(--deep); }
.leif .woocommerce form .form-row { display: grid; gap: 6px; margin-bottom: 14px; }
.leif .woocommerce form .form-row label { font-size: var(--fs-small); font-weight: 600; }
.leif .woocommerce-form-login, .leif .woocommerce-form-register { max-width: 460px; }
.leif .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 720px) { .leif .u-columns { grid-template-columns: 1fr; } }

/* Order tracking form (WooCommerce shortcode). */
.ns-track .woocommerce-form-track-order { display: grid; gap: 14px; max-width: 460px; margin-inline: auto; font-family: var(--font-label); }
.ns-track .woocommerce-form-track-order > p:first-child { color: var(--ink-muted); font-size: var(--fs-small); }
.ns-track .form-row { display: grid; gap: 6px; margin: 0; }
.ns-track .form-row label { font-size: var(--fs-small); font-weight: 600; }
.ns-track .clear { display: none; }
.ns-track .woocommerce-form-track-order button { width: 100%; }

/* Star ratings WooCommerce prints (review form, lists). */
.leif .star-rating span::before, .leif .woocommerce p.stars a, .leif p.stars a { color: var(--accent-text); }
.leif .wc-block-components-checkout-order-summary__title-text, .leif .wc-block-components-order-summary__button-text { font-family: var(--font-display); font-weight: 600; }
.leif .wc-block-components-form .wc-block-components-text-input input, .leif .wc-block-components-text-input input { border-radius: var(--radius-ctrl); border-color: var(--line); }


/* ---------- Miko look (2026-10-07) ---------------------------------------- */
/* Leif asked for the design closer to shopmiko.com: Manrope throughout, cream and navy,
   powder-blue pill buttons with a navy outline, small quiet navigation, light headings.
   The palette lives in leif.css brand inputs; this block adjusts type and components. */
:root {
  --fs-display: clamp(2.25rem, 4.2vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 2.5vw, 2.125rem);
  --fs-h3:      clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-title:   clamp(1.5rem, 2vw, 1.875rem);
  --fs-lead:    clamp(1rem, 1.15vw, 1.125rem);
}
.leif :where(h1, h2, h3, h4) { letter-spacing: -0.01em; line-height: 1.2; }
.l-eyebrow { font-size: 0.6875rem; letter-spacing: 0.16em; }

/* Announcement bar and header. */
.l-announce { background: var(--deep); color: var(--on-deep); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; }
.l-nav { font-size: 0.875rem; font-weight: 500; gap: 30px; }
.l-logo--mask { width: var(--logo-width); color: var(--ink); }
.l-logo:hover { color: var(--accent-text); }
@media (max-width: 860px) {
  :root { --logo-width: 168px; }
  .l-nav { font-size: 1.0625rem; }
}

/* Footer: the logo itself, spanning the page. */
.ns-wordmark { display: block; width: 100%; aspect-ratio: var(--logo-ratio); margin-block: clamp(28px, 4vw, 52px) clamp(24px, 3vw, 40px); background: var(--on-deep); -webkit-mask: var(--logo-src) center / contain no-repeat; mask: var(--logo-src) center / contain no-repeat; transition: background-color .35s ease; }
.ns-wordmark:hover { background: var(--accent); }

/* Buttons: uppercase labels; the primary is powder blue with a navy outline (the outline
   is what makes the pale button stand out on cream, as on Miko). */
.l-btn { font-family: var(--font-label); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; border-width: 1px; }
.l-btn--primary { border-color: var(--ink); }
.l-section--deep .l-btn--primary, .l-hero .l-btn--primary { border-color: var(--accent); }
.l-atc { font-size: 0.875rem; }
.l-atc__price { font-size: 0.9375rem; letter-spacing: 0.04em; border-left-width: 1px; border-left-color: color-mix(in oklab, var(--on-accent) 35%, transparent); }
.leif .button, .leif button.button, .leif a.button, .leif input.button, .leif .checkout-button, .leif #place_order,
.leif .wc-block-components-button:not(.is-link), .leif .wc-block-cart__submit-button, .leif .woocommerce-form-track-order button,
.leif .wp-element-button, .ns-reviewform .form-submit input {
  font-family: var(--font-label); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--ink);
}

/* The accent is pale, so small marks on light backgrounds use the ink instead. */
.l-proof__num { color: var(--ink); font-weight: 300; }
.l-option input::after { background: var(--ink); }
.l-option:has(input:checked) { border-color: var(--ink); background: color-mix(in oklab, var(--accent) 55%, var(--surface-raised)); }
.l-stock::before { background: var(--accent-text); }
.l-step::before { background: var(--ink); }
.l-stars { background: linear-gradient(90deg, var(--ink) calc(var(--rating) / 5 * 100%), var(--line) 0); }
.l-price__save { background: var(--accent); }
.l-section:not(.l-section--deep) .l-trio__item .l-icon { color: var(--accent-text); }
/* Manrope has no italic (design-system.md, pairing B). */
.l-statement em, .l-story__quote { font-style: normal; }
.l-statement { font-weight: 300; }

/* Quieter type in components, closer to Miko's. */
.l-buy__title { font-weight: 400; }
.l-price__now { font-weight: 600; }
.l-acc summary { font-weight: 500; font-size: 1rem; }
.l-product__name { font-weight: 500; font-size: 1rem; }
.l-option__name { font-weight: 600; }
.l-tab { font-weight: 500; }
.ns-model__name { font-weight: 500; }
.l-step__when, .l-quote__title { font-weight: 500; }

/* Trust bar with icons, as on Miko. */
.l-trust li { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.l-trust li .l-icon { width: 24px; height: 24px; color: var(--accent); }
.l-trust li span { display: block; }
@media (max-width: 720px) { .l-trust li { flex-direction: column; text-align: center; gap: 6px; } }

/* Hero: the render's pure black is lifted to the navy, so photo and band are one colour. */
.ns-hero .l-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--deep); mix-blend-mode: lighten; pointer-events: none; }
.ns-hero .l-hero__media::after { z-index: 2; }
.ns-hero .l-hero__media { z-index: 0; }   /* keeps the tint and scrim under the headline */

/* Spec-sheet badges: each on its own small card, the icon in a powder-blue circle.
   (leif.css fills the circle with --surface-soft, the same colour as the band the
   spec sheet sits on, so the circles disappeared.) */
.l-badges--list { gap: 10px; }
.l-badges--list .l-badge { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-ctrl); padding: 10px 14px 10px 10px; gap: 12px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; }
.l-section--soft .l-badges--list .l-badge { border-color: transparent; }
.l-badges--list .l-badge__ring { width: 38px; height: 38px; background: var(--accent); color: var(--ink); }
.l-badges--list .l-badge__ring .l-icon { width: 18px; height: 18px; }
.ns-soft { color: var(--accent-text); }