/* ============================================================
   DOUBLE DRUM PRESS — the shared block from template.html, for
   demo.uichemy.com. Same rules, two mechanical changes only:
     1. scoped so they reach all six section widgets at once —
        every widget root carries a class starting "uichemy-dd-";
     2. the token set is re-declared ON the widget roots, not only
        on :root. Elementor's containers declare their own
        --display:flex, and this page's --display is its DISPLAY
        FONT ('Anton'), so inherited wins and every heading would
        fall back to Impact.
   No value, colour or size has been changed.
   ============================================================ */

/* ── token guard: beats anything inherited from an Elementor wrapper ── */
[class*="uichemy-dd-"]{
  --bg:#FFFFFF;          /* page: plain white stock */
  --sun:#FFC62B;         /* primary: sunflower drum (ink text only, never white text) */
  --sun-deep:#F2AE00;    /* primary hover */
  --tomato:#E5402A;      /* accent: tomato drum (white text OK) */
  --tomato-deep:#C22E1A; /* accent hover */
  --tomato-soft:#FCE1DC; /* accent tint */
  --ink:#1F1C2B;         /* text + hairlines — never a page/section/card background */
  --mute:#5D5A6B;        /* secondary text */
  --grey:#F1F1F4;        /* quiet cool panel */
  --line:var(--ink);     /* hairline colour: grid borders are 1px ink */

  --display:'Anton', Impact, sans-serif;
  --body:'DM Sans', system-ui, sans-serif;
  --pixel:'Space Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --hair:1px solid var(--line);
}

/* ── theme neutraliser ────────────────────────────────────────────────────
   The theme styles bare elements and this page inherits them. The element
   list sits inside :where(), which contributes NO specificity — so the whole
   selector is (0,1,0): it beats the theme's bare `h2 {…}` (0,0,1), but ties
   with the page's own `.big` / `.pad` classes and therefore loses to them on
   source order, since this block comes first. Without :where() this rule is
   (0,1,1) and silently outranks .big — every Anton heading falls back. */
[class*="uichemy-dd-"] :where(h1, h2, h3, h4, h5, h6, p, figure, figcaption, ul, ol, li,
        dl, dt, dd, blockquote, label, small, address, fieldset){
  margin:0; padding:0; border:0; background:none;
  font:inherit; line-height:inherit; letter-spacing:inherit; color:inherit;
}
[class*="uichemy-dd-"] :where(ul, ol){ list-style:none; }
[class*="uichemy-dd-"] :where(button, input, select, textarea){
  margin:0; padding:0; background:none; border-radius:0; box-shadow:none;
  min-height:0; text-transform:none; letter-spacing:normal;
}
/* only img — the source styles nothing else, and height:auto on an <svg>
   resizes every inline icon (measured: the hero badge and 18 stickers) */
[class*="uichemy-dd-"] :where(img){ max-width:100%; border:0; }
/* ---------- DOUBLE DRUM locked palette ---------- */
:root{
  --bg:#FFFFFF;          /* page: plain white stock */
  --sun:#FFC62B;         /* primary: sunflower drum (ink text only, never white text) */
  --sun-deep:#F2AE00;    /* primary hover */
  --tomato:#E5402A;      /* accent: tomato drum (white text OK) */
  --tomato-deep:#C22E1A; /* accent hover */
  --tomato-soft:#FCE1DC; /* accent tint */
  --ink:#1F1C2B;         /* text + hairlines — never a page/section/card background */
  --mute:#5D5A6B;        /* secondary text */
  --grey:#F1F1F4;        /* quiet cool panel */
  --line:var(--ink);     /* hairline colour: grid borders are 1px ink */

  --display:'Anton', Impact, sans-serif;
  --body:'DM Sans', system-ui, sans-serif;
  --pixel:'Space Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --hair:1px solid var(--line);
}
:where([class*="uichemy-dd-"]) *, [class*="uichemy-dd-"], :where([class*="uichemy-dd-"]) *::before, :where([class*="uichemy-dd-"]) *::after{box-sizing:border-box}
html:has([class*="uichemy-dd-"]).lenis, html:has([class*="uichemy-dd-"]).lenis body{height:auto}
:where([class*="uichemy-dd-"]) .lenis.lenis-smooth{scroll-behavior:auto !important}
:where([class*="uichemy-dd-"]) .lenis.lenis-stopped{overflow:hidden}
html:has([class*="uichemy-dd-"]) body{margin:0;font-synthesis-weight:none;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
:where([class*="uichemy-dd-"]) img{display:block;max-width:100%}
:where([class*="uichemy-dd-"]) a{color:inherit}
:where([class*="uichemy-dd-"]) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where([class*="uichemy-dd-"]) :focus-visible{outline:2px solid var(--tomato);outline-offset:2px}
/* ---------- shared atoms: the hairline grid ---------- */
[class*="uichemy-dd-"]{border-inline:var(--hair);max-width:1600px;margin-inline:auto}
:where([class*="uichemy-dd-"]) .cell{border-bottom:var(--hair);border-right:var(--hair)}
:where([class*="uichemy-dd-"]) .pad{padding:clamp(14px,1.6vw,22px)}
:where([class*="uichemy-dd-"]) .px{font-family:var(--pixel);font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
:where([class*="uichemy-dd-"]) .big{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:0;margin:0}
:where([class*="uichemy-dd-"]) .statement{font-family:var(--body);font-weight:500;font-size:clamp(24px,2.6vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0}
:where([class*="uichemy-dd-"]) .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tomato);vertical-align:middle}
:where([class*="uichemy-dd-"]) .dot--sun{background:var(--sun);box-shadow:inset 0 0 0 1px var(--ink)}
:where([class*="uichemy-dd-"]) .btn{display:inline-flex;align-items:center;gap:.5em;padding:10px 16px;border:var(--hair);border-radius:999px;background:var(--sun);color:var(--ink);
  font-family:var(--pixel);font-size:12px;text-transform:uppercase;text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease)}
:where([class*="uichemy-dd-"]) .btn:hover{background:var(--tomato);color:#fff}
:where([class*="uichemy-dd-"]) .btn--line{background:transparent}
:where([class*="uichemy-dd-"]) .link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:where([class*="uichemy-dd-"]) .link:hover{color:var(--tomato)}
:where([class*="uichemy-dd-"]) .tick{overflow:hidden;white-space:nowrap;border-bottom:var(--hair)}
:where([class*="uichemy-dd-"]) .kf-m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
:where([class*="uichemy-dd-"]) .kf-i{display:inline-block;will-change:transform}
:where([class*="uichemy-dd-"]) .kf-w{display:inline-block;white-space:nowrap}

/* ── WordPress / Elementor compatibility ──────────────────────────────
   The six widgets stack into one continuous hairline grid, so no wrapper
   between them may add padding, width or a gap. Nothing here is allowed a
   transform/filter/contain either: this page pins with ScrollTrigger, and
   any of those on an ancestor silently becomes the containing block. */
html:has([class*="uichemy-dd-"]){ scroll-behavior:auto !important; }
html:has([class*="uichemy-dd-"]) .wrapper-main,
html:has([class*="uichemy-dd-"]) #content.site-content,
html:has([class*="uichemy-dd-"]) #primary.content-area,
html:has([class*="uichemy-dd-"]) main#main.site-main,
html:has([class*="uichemy-dd-"]) article.page,
html:has([class*="uichemy-dd-"]) .entry-content,
html:has([class*="uichemy-dd-"]) .elementor,
html:has([class*="uichemy-dd-"]) .e-con,
html:has([class*="uichemy-dd-"]) .e-con-inner,
html:has([class*="uichemy-dd-"]) .elementor-widget-uichemy-composer,
html:has([class*="uichemy-dd-"]) .elementor-widget-container{
  margin:0; padding:0; max-width:none; overflow:visible; contain:none;
  transform:none; filter:none; perspective:none; will-change:auto;
}
html:has([class*="uichemy-dd-"]) .e-con,
html:has([class*="uichemy-dd-"]) .e-con-inner{ --padding-inline:0px; --padding-block:0px; --gap:0px; width:auto; }
html:has([class*="uichemy-dd-"]) .elementor-widget-uichemy-composer{ margin-block:0 !important; }
[class*="uichemy-dd-"] figure{ margin:0; }
/* the widget root IS the page column: it carries .page's rules from above */
[class*="uichemy-dd-"]{ font-size:15px; }

/* ── the shop section appends its flying "+1" sticker to document.body, i.e.
      OUTSIDE its own widget, so this one rule cannot be scoped or it renders
      unstyled. Copied verbatim from 04-shop's <style>. ── */
.dp-fly{position:fixed;left:0;top:0;z-index:70;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:var(--sun);border:var(--hair);
  display:grid;place-items:center;font-family:var(--pixel);font-size:12px;color:var(--ink);pointer-events:none}