/* EkoZmeko Energy — child theme stylesheet (Hello Elementor child).
   Drop into wp-content/themes/hello-elementor-child/style.css after the theme header,
   or enqueue as a separate file. Every value here mirrors a token in /tokens.

   Elementor's UI cannot express three things this brand needs:
   the Archivo width axis, the dark-surface accent shift, and WooCommerce's
   dual-price layout. Those live here. Everything else belongs in Global Colors/Fonts. */

:root{
  /* One hue, three roles. No single green clears 4.5:1 on white AND on ink-800. */
  --ekz-accent:#0F8F45;          /* identity: borders, icons, dots, text >=24px */
  --ekz-accent-text-light:#0C7538; /* small text + solid fills on light — 5.81:1 */
  --ekz-accent-text-dark:#16A855;  /* small text on dark — 5.75:1 */
  --ekz-green-700:#0F8F45;
  --ekz-green-850:#0A6430;       /* fill hover, both surfaces */
  --ekz-green-800:#0C7538;
  --ekz-green-500:#16A855;
  --ekz-green-50:#EEF8F2;
  --ekz-ink-900:#0B0E10;
  --ekz-ink-800:#14181B;
  --ekz-ink-600:#39434A;
  --ekz-ink-500:#5B6670;
  --ekz-ink-400:#8A949B;
  --ekz-ink-100:#E3E7E4;
  --ekz-ink-50:#F4F6F5;
  /* MAR-1590: `--ekz-radius`, `--ekz-shadow-1` and `--ekz-shadow-3` used to be
     REDEFINED here. This file loads after ekz-tokens.css, so these shadowed the
     canonical scale: cards kept an 8px radius from a token outside the radius
     scale, and the new card shadow from D1 was silently reverted to the old one.
     The design specimen caught it — the token file said 12px and the rendered
     card measured 8px. Only the easing alias survives, and it now points at the
     canonical value instead of repeating it. */
  --ekz-ease:var(--ekz-ease-standard);
}

/* ---- Archivo width axis. Elementor sets family/size/weight; this sets wdth. ---- */
h1,.elementor-heading-title.ekz-display{font-stretch:112%;font-weight:900}
h2{font-stretch:108%;font-weight:900}
h3{font-stretch:104%;font-weight:900}
h4,h5{font-stretch:100%;font-weight:900}
body,p,li{font-stretch:100%;font-weight:400}

/* ---- Light vs dark header. The eshop uses the light bar (product photography is
       shot on white); marketing pages use the dark one. Two wordmark files exist:
       logo-wordmark-green.png on dark, logo-wordmark-dark.png on light. ---- */
/* One hairline under the light header, and the bar owns it (ekz-overrides.css §7).
   This outer border and two 1px shadows stacked up to three lines in one place. */
.ekz-header--light{background:#fff}
.ekz-header--light a{color:var(--ekz-text-strong)}
.ekz-header--light a:hover,.ekz-header--light .current-menu-item>a{color:var(--ekz-accent-text-light)}
.ekz-header--dark{background:var(--ekz-ink-800)}
.ekz-header--dark a{color:#fff}
.ekz-header--dark a:hover,.ekz-header--dark .current-menu-item>a{color:var(--ekz-accent-text-dark)}

/* ---- Dark sections. Add the CSS class ekz-on-dark to any Elementor container. ---- */
.ekz-on-dark{background:var(--ekz-ink-800);color:#A8B2B9}
.ekz-on-dark h1,.ekz-on-dark h2,.ekz-on-dark h3,.ekz-on-dark h4{color:#fff}
.ekz-on-dark a{color:var(--ekz-accent-text-dark)}
.ekz-on-dark a:hover{color:#fff}
/* One control border on dark too (MAR-1635 Q07); hover changes the fill only. */
.ekz-on-dark .elementor-button:not(.elementor-button-primary){border:2px solid var(--ekz-border-default);background:transparent;color:#fff}
.ekz-on-dark .elementor-button:not(.elementor-button-primary):hover{border-color:var(--ekz-border-default);color:#fff;background:rgba(255,255,255,.08)}
.ekz-on-dark :focus-visible{outline-color:var(--ekz-accent-text-dark)}

/* ---- Accent stat figures (Counter widget inside .ekz-on-dark) ---- */
.ekz-on-dark .elementor-counter-number-wrapper{color:var(--ekz-accent);font-stretch:108%;font-weight:700}

/* ---- Section eyebrow: add class ekz-eyebrow to a Heading or Text Editor widget ---- */
/* MAR-1634: `font-weight:600text-transform:uppercase` was one invalid declaration,
   so neither the weight nor the uppercase ever applied from here. */
.ekz-eyebrow{display:inline-block;font-size:12px;font-weight:var(--ekz-weight-bold);text-transform:uppercase;
  color:var(--ekz-green-800);background:var(--ekz-green-50);border:2px solid #D6EFDF;padding:5px 11px;border-radius:var(--ekz-radius-sm)}
.ekz-on-dark .ekz-eyebrow{color:var(--ekz-accent-text-dark);background:rgba(15,143,69,.16);border-color:transparent}

/* ---- Cards. Elementor Loop Grid / Image Box get the system surface. ---- */
.ekz-card,.elementor-widget-image-box .elementor-image-box-wrapper{
  background:#fff;border:2px solid var(--ekz-ink-100);border-radius:var(--ekz-radius-card);
  box-shadow:var(--ekz-shadow-1);overflow:hidden;transition:var(--ekz-transition-card)}
/* Only a card that is, or sits in, a link answers the pointer (MAR-1635 Q06): its
   border turns green — no lift, no deeper shadow (MAR-1634, 2026-09-27). */
a:hover .ekz-card,a.ekz-card:hover{border-color:var(--ekz-accent)}

/* ---- Focus visibility. Elementor ships none. ---- */
:focus-visible{outline:2px solid var(--ekz-accent);outline-offset:2px}

/* ---- WooCommerce ------------------------------------------------------- */

/* Dual pricing: VAT-inclusive large, net beneath. Requires a price suffix filter in
   functions.php that appends <span class="ekz-net">…&nbsp;bez DPH</span>. */
.woocommerce div.product p.price,.woocommerce ul.products li.product .price{
  display:flex;flex-direction:column;gap:var(--ekz-gap-tight);color:var(--ekz-price-main);
  font-weight:700;font-stretch:104%}
.woocommerce .price .ekz-net{font-size:13px;font-weight:400;color:var(--ekz-price-secondary);font-stretch:100%}
.woocommerce div.product p.price{font-size:32px}
.woocommerce ul.products li.product .price{font-size:20px}
.woocommerce del{color:var(--ekz-ink-400);font-weight:400;font-size:.7em}

/* Product tiles: feed photography on white, contained, never cropped. */
.woocommerce ul.products li.product{border:2px solid var(--ekz-ink-100);border-radius:var(--ekz-radius-card);
  background:#fff;box-shadow:var(--ekz-shadow-1);overflow:hidden;transition:var(--ekz-transition-card)}
.woocommerce ul.products li.product:hover{border-color:var(--ekz-accent)}
.woocommerce ul.products li.product img{aspect-ratio:1;object-fit:contain;background:#fff;mix-blend-mode:multiply;padding:16px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px;font-weight:600;line-height:1.4;min-height:2.8em}

/* Stock states — the only three the feed provides. */
/* Label text uses the darker step (13px needs 4.5:1); the dot keeps the saturated hue. */
.woocommerce .stock.in-stock{color:var(--ekz-accent-text-light);font-weight:600;font-size:13px}
.woocommerce .stock.available-on-backorder{color:#8A5300;font-weight:600;font-size:13px}
.woocommerce .stock.out-of-stock{color:var(--ekz-ink-500);font-weight:600;font-size:13px}

/* Variation swatches: replace the default <select> with buttons via a swatch plugin,
   then style them here. 44px minimum — mobile hit target. */
.ekz-swatch{min-width:48px;height:44px;padding:0 11px;background:#fff;border:2px solid #D7DDDA;
  border-radius:var(--ekz-radius-sm);font-size:14px;font-weight:600;color:var(--ekz-ink-800);cursor:pointer}
.ekz-swatch[aria-checked="true"]{background:var(--ekz-accent-text-light);border-color:var(--ekz-accent-text-light);color:#fff}
.ekz-swatch[disabled]{opacity:.5;text-decoration:line-through;cursor:not-allowed}
.ekz-swatch--color{width:30px;min-width:30px;height:30px;padding:0;border-radius:999px}
.ekz-swatch--color[aria-checked="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ekz-accent)}

/* Buttons — Woo ignores Elementor's global button styles in several templates. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{
  background:var(--ekz-accent-text-light);color:#fff;border-radius:var(--ekz-radius-sm);
  padding:13px 24px;font-weight:600;font-size:15px;transition:background .16s var(--ekz-ease)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--ekz-green-850);color:#fff}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--ekz-accent-text-light)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--ekz-green-850)}

/* Forms — inputs across Woo, comments and any form plugin. */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],textarea,select{
  /* The padding that applies is the kit's (Theme Style → Form Fields, 11 inside
     the 2px border since MAR-1634 2026-09-27; its selector outranks this one).
     The same 11 here for anything outside the kit; with 15px/1.4 text the box
     is 47px, comfortably over the 44px target (MAR-1567). */
  padding:11px;font-size:15px;line-height:1.4;color:var(--ekz-ink-800);background:#fff;
  border:2px solid #D7DDDA;border-radius:var(--ekz-radius-sm);transition:border-color .16s var(--ekz-ease),box-shadow .16s var(--ekz-ease)}
input:focus,textarea:focus,select:focus{border-color:var(--ekz-accent);box-shadow:0 0 0 3px rgba(15,143,69,.32);outline:none}

/* Notices */
.woocommerce-message{border-top-color:var(--ekz-accent);background:var(--ekz-green-50);border-radius:var(--ekz-radius-sm)}
.woocommerce-info{border-top-color:#1E6FA8;background:#EAF3F9;border-radius:var(--ekz-radius-sm)}
.woocommerce-error{border-top-color:#C0392B;background:#FBEDEB;border-radius:var(--ekz-radius-sm)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}