/* SOKK — scope companion (sokk-storefront, W5).
 *
 * Loads after sokk-base.css / sokk-wp.css (modules/frontend-assets.php enqueues it as
 * 'sokk-scope' when the file exists). Those two sheets were written for a block theme
 * where the whole page was SOKK; on kilambo.com the page belongs to a classic theme +
 * Elementor and SOKK markup arrives in three ways:
 *
 *   1. canvas surfaces (modules/canvas.php): <body class="sokk-canvas">, the whole page;
 *   2. the header / footer / overlay blocks printed by modules/chrome.php on every page;
 *   3. blocks dropped into Elementor pages by the [sokk_*] shortcodes.
 *
 * The scoped resets in sokk-base.css cover the markup itself. What the block theme used
 * to give the page for free — the body typography (theme.json: Archivo 14px / 1.6, ink),
 * the heading and button elements, and the --wp--preset-* aliases the templates and
 * patterns reference — no longer exists on a classic theme, so this sheet restates it
 * for SOKK containers only. Section 4 adds the off-canvas tie-breaks: the SOKK sheets
 * print before the theme's, so the few sokk-wp.css rules a Storefront / Shoptimizer
 * attribute- or class-level rule ties with are restated one element level up. Nothing
 * here reaches the host theme or Elementor's own widgets. Decisions and the selector
 * inventory: SCOPING.md.
 *
 *   S = :where(:is(.sokk-canvas *, [class*="sokk-"], [class*="sokk-"] *,
 *                  .catrow *, .split-banners *, .pgrid, .pgrid *, .wrap:has(> .pgrid),
 *                  .bt, .bt *)
 *              :not(:is(.sokk-canvas-header, .sokk-canvas-footer) .elementor *),
 *              :is(.sokk-canvas-header, .sokk-canvas-footer) .elementor [class*="sokk-"],
 *              :is(.sokk-canvas-header, .sokk-canvas-footer) .elementor [class*="sokk-"] *)
 *
 * (the same S as sokk-base.css: SOKK markup, minus an Elementor header/footer component
 * rendered inside the canvas chrome, plus any SOKK shortcode output placed in it).
 *
 * Opt-in: any container whose class contains `sokk-` is a SOKK root. `sokk-scope` is the
 * documented one to put on an Elementor section or a shortcode wrapper.
 */

/* ------------------------------------------------------------------ 1. block roots
   The block theme's body styles, restated on the top-level block roots so a block that
   lands inside an Elementor page (or the chrome on a Storefront page) reads in Archivo
   at 14px / 1.6 in ink instead of inheriting Source Sans Pro from the host. Only roots
   that were never nested inside a differently coloured SOKK parent are listed (the
   footer's own children, for instance, must keep inheriting its white). :where() keeps
   this at zero specificity: every SOKK rule and every inline style still wins. */
:where(.sokk-scope, .sokk-header, .sokk-footer, .sokk-cookie,
       .sokk-hero, .catrow, .sokk-banner, .split-banners, .sokk-rail-section, .sokk-manifesto,
       .sokk-plp, .sokk-plp-part, .sokk-page, .sokk-404, .sokk-account-hero, .sokk-withdraw-gate,
       .sokk-receipt, .sokk-empty-bag, .sokk-account-page){
  font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* The drawers / sheets, the add-to-bag toast and the product page run at the prototype's
   leading, which is `normal` (spec 12 §Body defaults: no base line-height). Restating the
   block theme's 1.6 on these roots made every mono line box 3–4px taller than measured —
   cart rows, the toast, the PDP price / hint / trust line, review bylines, card captions —
   and the drift compounded down the PDP info column. The blocks that need leading set it
   themselves (.pdp-blurb, .pdp-acc-body, .sokk-review-body 1.6; .sokk-size-note 1.5;
   .sokk-panel-intro p 1.45). Stated, not omitted: the host body (Hello Elementor, an
   Elementor kit) may carry its own leading, and these roots must not inherit it either.
   .sokk-pdp-part is one region of the product page rendered without the article frame
   ([sokk_pdp part], modules/elementor.php): the frame's leading, per part. */
:where([data-sokk-panel], .sokk-toast, .sokk-crosssell, .sokk-pdp-page, .sokk-pdp-part, .sokk-pairs, .sokk-recent, .sokk-reviews){
  font-family:var(--sans); font-size:14px; line-height:normal; color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* fragments the shortcodes render standalone in an Elementor (usually dark) footer:
   family / size / leading only — their colours are their own (.sokk-news p is #F5F5F7)
   and the Subscribe button inherits the host's colour, so no `color` here. The third
   standalone fragment, button.sokk-region-btn, already carries its own font rule. */
:where(.sokk-news, .sokk-theme){
  font-family:var(--sans); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* theme.json body font-size (preset "medium") for the canvas; family / colour / leading
   already come from sokk-base.css (body.sokk-canvas) and sokk-wp.css. */
body.sokk-canvas{font-size:14px}
/* Page base for the non-canvas pages (Elementor Full Width + Theme Builder chrome): the
   prototype's body defaults. modules/theme-compat.php deregisters Hello Elementor's
   reset.css, so without this the page would fall back to the browser's Times New Roman
   and 8px body margin wherever nothing else sets a font (WooCommerce notices, forms).
   Zero specificity: every palette, component and Elementor rule still wins. */
:where(html){-webkit-text-size-adjust:100%}
:where(body){margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}

/* ------------------------------------------------------- 2. theme.json elements
   What styles.elements produced for the block theme, at the same specificity WordPress
   printed it (0,0,1 for the heading rules) plus the `html` level the sokk-base.css resets
   use, so a host theme's h1/h2/p rules cannot bleed into SOKK markup. */
html :is(h1,h2,h3,h4,h5,h6):where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-weight:700; letter-spacing:-.025em; line-height:.92; text-transform:uppercase}
html h1:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:clamp(44px, 2.75rem + ((1vw - 3.2px) * 6.207), 116px)}
html h2:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:clamp(30px, 1.875rem + ((1vw - 3.2px) * 2.241), 56px)}
html h3:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:17px; letter-spacing:-.01em}
/* the UA paragraph margin the block theme ran with; Storefront / Shoptimizer replace it
   with a bottom-only 1.41575em that would otherwise reach paragraphs inside blocks */
html p:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){margin-block:1em; margin-inline:0}
/* styles.elements.button → core button blocks in the templates (and the wp-element-button
   class WooCommerce blocks carry). WordPress prints its own
   `:root :where(.wp-element-button, .wp-block-button__link){…}` (0,1,0) in
   #global-styles-inline-css AFTER this sheet (enqueue_block_assets runs before
   wp_enqueue_global_styles), and classic-theme-styles adds `.wp-block-button__link`
   (0,1,0) too, so at an equal (0,1,0) core would win every property. `html:root` makes
   these (0,1,1): above core, still below `.is-style-ghost .wp-block-button__link`
   (0,2,0) in sokk-wp.css. */
html:root :where(.wp-element-button, .wp-block-button__link):where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  background-color:var(--ink); border-radius:0; border:1px solid var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:15px 26px;
}
html:root :where(.wp-element-button:hover, .wp-block-button__link:hover):where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:transparent; color:var(--ink)}

/* --------------------------------------------------------- 3. preset aliases
   theme.json settings → the --wp--preset-* names the templates / patterns reference and
   the .has-* classes the block editor writes. Scoped, because a classic theme has its own
   --wp--preset--font-size--medium etc. (core defaults) that must stay intact outside. */
:where(.sokk-canvas, [class*="sokk-"]){
  --wp--preset--color--base:var(--bg); --wp--preset--color--surface:var(--surface);
  --wp--preset--color--raise:var(--raise); --wp--preset--color--contrast:var(--ink);
  --wp--preset--color--muted:var(--muted); --wp--preset--color--faint:var(--faint);
  --wp--preset--color--line:var(--line); --wp--preset--color--accent:var(--accent);
  --wp--preset--color--footer:var(--footer-bg); --wp--preset--color--footer-ink:#FFFFFF;
  --wp--preset--font-size--eyebrow:11px; --wp--preset--font-size--small:12px;
  --wp--preset--font-size--medium:14px; --wp--preset--font-size--large:17px;
  --wp--preset--font-size--x-large:clamp(30px, 1.875rem + ((1vw - 3.2px) * 2.241), 56px);
  --wp--preset--font-size--xx-large:clamp(44px, 2.75rem + ((1vw - 3.2px) * 6.207), 116px);
  --wp--preset--font-family--sans:var(--sans); --wp--preset--font-family--mono:var(--mono);
  --wp--preset--spacing--20:12px; --wp--preset--spacing--30:20px;
  --wp--preset--spacing--40:clamp(16px, 4vw, 40px); --wp--preset--spacing--50:clamp(32px, 5vw, 64px);
  --wp--preset--spacing--60:clamp(56px, 9vw, 140px);
  --wp--style--global--content-size:720px; --wp--style--global--wide-size:1480px;
}
/* .has-* classes for the theme's own slugs (core only generates them for its defaults);
   !important as WordPress writes them, (0,1,0) as WordPress writes them */
.has-base-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--bg) !important}
.has-surface-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--surface) !important}
.has-raise-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--raise) !important}
.has-contrast-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--ink) !important}
.has-muted-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--muted) !important}
.has-faint-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--faint) !important}
.has-line-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--line) !important}
.has-accent-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--accent) !important}
.has-footer-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:var(--footer-bg) !important}
.has-footer-ink-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:#FFFFFF !important}
.has-base-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--bg) !important}
.has-surface-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--surface) !important}
.has-raise-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--raise) !important}
.has-contrast-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--ink) !important}
.has-muted-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--muted) !important}
.has-faint-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--faint) !important}
.has-line-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--line) !important}
.has-accent-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--accent) !important}
.has-footer-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:var(--footer-bg) !important}
.has-footer-ink-background-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background-color:#FFFFFF !important}
.has-base-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--bg) !important}
.has-surface-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--surface) !important}
.has-raise-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--raise) !important}
.has-contrast-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--ink) !important}
.has-muted-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--muted) !important}
.has-faint-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--faint) !important}
.has-line-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--line) !important}
.has-accent-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--accent) !important}
.has-footer-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--footer-bg) !important}
.has-footer-ink-border-color:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:#FFFFFF !important}
.has-sans-font-family:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-family:var(--sans) !important}
.has-mono-font-family:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-family:var(--mono) !important}
.has-eyebrow-font-size:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:11px !important}
.has-small-font-size:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:12px !important}
.has-medium-font-size:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:14px !important}
.has-large-font-size:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:17px !important}
.has-x-large-font-size:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:clamp(30px, 1.875rem + ((1vw - 3.2px) * 2.241), 56px) !important}
.has-xx-large-font-size:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-size:clamp(44px, 2.75rem + ((1vw - 3.2px) * 6.207), 116px) !important}


/* ------------------------------------------------ 4. host tie-breaks (off-canvas)
   modules/frontend-assets.php enqueues the SOKK sheets on enqueue_block_assets, which
   core fires BEFORE the theme's stylesheet on wp_enqueue_scripts. Inside the canvas the
   theme sheet is dequeued, so nothing here matters there; on Storefront / Shoptimizer +
   Elementor pages a host rule at the SAME specificity as a sokk-wp.css rule wins the tie
   by printing later. The bare element resets are already one level up (`html a`); this
   section restates the class rules that the two hosts' attribute/class-level rules tie
   with, one element level up again, with the SAME declarations, so the SOKK-only cascade
   is unchanged (verified: computed winners per element are identical on the canvas
   captures and the shortcode pages with and without this section) and only the host
   loses. Values are copied from sokk-wp.css — change them there and here together.
   The whole section becomes redundant, and can be deleted, once the sheets print after
   the theme stylesheet (wp_enqueue_scripts priority 20 or the theme handle as a
   dependency). */

/* (a) text inputs. Shoptimizer: input[type="search"|"email"|…] {outline:0; border:1px
   solid #d2d6dc; border-radius:.3rem; box-shadow; height:40px; padding:0 .7em} and
   input[type="search"] {padding-left:43px}; Storefront: input[type=search|email]
   {padding:.618em; background-color:#f2f2f2; color:#43454b; border:0; font-weight:400}
   — all (0,1,1) — plus their :focus variants at (0,2,1). height / margin are what the
   block theme's UA values were. outline is `none`, as the reference's inline styles have
   it on every one of these fields (spec 01 §footer, 08 §90, 09 §search / §newsletter):
   an earlier `revert` here handed the UA focus ring back, and it drew a 2px black ring
   round the frosted search pill and the footer email line on weltley. */
html .sokk-news input{ flex:1; background:none; border:0; color:#F5F5F7; padding:10px 0; font-family:var(--mono); font-size:13px; height:auto; margin:0; outline:none; }
html .sokk-search-form input{ flex:1; width:auto; border:0; background:none; color:var(--ink); font-family:var(--sans); font-size:clamp(20px, 3vw, 34px); font-weight:400; letter-spacing:0; padding:1px 2px; height:auto; margin:0; outline:none; }
html .sokk-panel-intro input{ width:100%; padding:11px 14px; border:1px solid var(--line); background:var(--raise); font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--ink); height:auto; margin:0; outline:none; }
html .sokk-news-modal input{ border:1px solid var(--line); background:var(--raise); color:var(--ink); padding:13px 14px; font-family:var(--mono); font-size:13px; height:auto; margin:0; outline:none; }
html .pdp-restock input{ flex:1; background:var(--raise); border:1px solid var(--line); padding:12px 14px; font-family:var(--mono); font-size:12px; color:var(--ink); outline:none; height:auto; margin:0; }
/* :focus — the hosts recolour the border / background on focus; SOKK never did, except
   the region filter, whose onFocus turns the hairline ink (spec 08 §90; under glass the
   pill's !important white border keeps winning, as on the reference) */
html .sokk-news input:focus{ background:none; border-color:currentColor; }
html .sokk-search-form input:focus{ background:none; border-color:transparent; }
html .sokk-panel-intro input:focus{ background:var(--raise); border-color:var(--ink); }
html .sokk-news-modal input:focus{ background:var(--raise); border-color:var(--line); }
html .pdp-restock input:focus{ background:var(--raise); border-color:var(--line); }
/* radius / shadow are UA-flat in every palette except glass, where sokk-base.css's
   html[data-glass="1"] input pill (0,1,2) must keep winning — hence the guard */
html:not([data-glass="1"]) :is(.sokk-news, .sokk-search-form, .sokk-panel-intro, .sokk-news-modal, .pdp-restock) input{ border-radius:0; box-shadow:none; }
/* the search sheet and region filter are type="search" (inc/overlay-blocks.php) for the
   phone keyboard's Search key; the reference's are plain text fields, so Chrome's ✕
   cancel glyph inside the pill is not theirs — the sheet's own mono 'Clear' is */
html :is(.sokk-search-form, .sokk-panel-intro) input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none; }

/* (b) selects. Shoptimizer's bare `select` (0,0,1) adds height:40px, width:100%,
   border-radius:.3rem, box-shadow, appearance:none, outline:0, margin:0. One element
   level up beats it and still sits below every SOKK class rule (.sokk-sort select,
   .sokk-lang select, the glass pill). */
html select:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){ height:auto; width:auto; margin:0; border-radius:0; box-shadow:none; appearance:auto; -webkit-appearance:auto; outline:revert; }
html select:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *):focus{ outline:revert; } /* Shoptimizer select:focus {outline:0} is (0,1,1); this is (0,1,2) */

/* (c) links. Shoptimizer underlines every link in the content column
   (`.entry-content article a:not(.elementor-button)` (0,2,2) and a (0,6,3) `body:not(…)
   .entry-content p:not(…) a:not(.button)`), Storefront `.hentry .entry-content a`
   (0,2,1). No SOKK rule underlines an <a> (the .link-u underline is a ::after), so a
   flat "none" can sit above them all: `:is(#sokk-tiebreak, a)` takes the id's (1,0,0)
   without needing the id to exist. Off canvas only — inside the canvas the block theme
   let WooCommerce's own underlines through and that stays as it was. */
html body:not(.sokk-canvas) :is(#sokk-tiebreak, a):where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){ text-decoration:none; }
/* the two links the reference DOES underline — the account sheet's 'Forgot password?' and
   the 'Create an account' inside its note (both <button>s there, inline text-decoration) —
   at the same (1,1,2) so the flat "none" above stays out of their way */
html body:not(.sokk-canvas) :is(#sokk-tiebreak, a):where(.sokk-account-forgot, .sokk-account-note a){ text-decoration:underline; }

/* (d) headings on phones. Shoptimizer @media (max-width:768px) `.site h1 {font-size:30px;
   letter-spacing:-.01em}` / `.site h2 {…clamp(1.375rem…1.75rem)…}` (0,1,1) hit every
   SOKK block sitting inside #page.site (Elementor pages on the default / Full Width
   template). These are the block headings whose sokk-wp.css rule is at (0,1,1) or
   below; the others already win. */
@media (max-width:768px){
  html .sokk-hero-body h1, html .sokk-hero-body h2{ font-size:clamp(40px, 7vw, 116px); letter-spacing:-.025em; }
  html .sokk-banner-body h2{ font-size:clamp(28px, 3vw, 46px); letter-spacing:-.025em; }
  html .sokk-manifesto h2{ font-size:clamp(26px, 2.6vw, 40px); letter-spacing:-.02em; }
  html body .sokk-footer-display{ font-size:clamp(40px, calc(12px + 6.4vw), 104px); letter-spacing:-.025em; }
}

/* (e) Storefront `button:hover {color:#fff}` (0,1,1) beats every (0,1,0)/(0,1,1) SOKK
   button colour on hover (icons, region rows, close buttons turn white). Same values as
   sokk-wp.css, one level up. Shoptimizer has no such rule. */
/* buttons whose colour is the inherited one (sokk-base.css `html button {color:inherit}`) */
html body :is(.size-pill, .chip){ color:inherit; }
html body :is(.sokk-hero-dots, .sokk-news, .pdp-field-head) button{ color:inherit; }
/* buttons with their own colour in sokk-wp.css */
html body :is(.sokk-region-row, .sokk-hd-ico, .sokk-burger, .sokk-wish, .pdp-wish, .sokk-quick-open, .sokk-filter-btn){ color:var(--ink); }
html body :is(.sokk-announce, .sokk-news-no){ color:var(--muted); }
html body .sokk-news-x{ color:var(--ink); }
/* every sheet / drawer "Close ✕" is ink on the prototype (bag, filter, search, menu, region,
   account, size guide); only the toast's ✕ is muted */
html body :is(.sokk-panel-head, .sokk-account-head) button{ color:var(--ink); }
html body .sokk-toast-head button, html body .sokk-toast [data-toast-close]{ color:var(--muted); }
html body .sokk-rail-nav button{ color:var(--ink); }
html body .sokk-hero-arrows button{ color:#fff; }
html body .sokk-region-btn{ color:rgba(255,255,255,.9); } /* standalone [sokk_region_button] */
html .sokk-footer button{ color:inherit; } /* inside the footer block every button, the region one included, inherits — as in sokk-wp.css */

/* (f) odds and ends: Shoptimizer `p:empty {margin:0}` (0,1,1) vs the cart fine-print
   paragraph sokk.js fills later; and the host's `[hidden] {display:none}` was the only
   thing hiding the cookie bar before sokk.js reveals it (sokk-wp.css `.sokk-cookie
   {display:flex}` outranks the UA [hidden] rule, so on the canvas it showed at once). */
html body .sokk-cart-fineprint{ margin:0 0 14px; }
.sokk-cookie[hidden]{ display:none; }