/*
 * Commerce controls, one grammar for the whole site (owner, 22 Oct 15:49): the leftovers of unstyled WooCommerce.
 * Loads last on every front page.
 * Selectors start with html:not(#em26-ctl): one ID of specificity, so section rules with long :not() chains and
 * !important (section-foundation, pages.css) cannot win over this single source. Presentation only: no button text, link, cart or checkout logic changes.
 *
 * 1. Card buttons («Оберіть опції», «Додати в кошик»): quiet outline, ink on hover. Not-in-stock: dashed, muted.
 * 2. The buy button on a product page and the final cart / checkout actions: magenta (money), one shape.
 * 3. Other WooCommerce buttons (cart, coupon, account): outline, same shape.
 * 4. Sorting select: same height and radius as the buttons, own chevron.
 * 5. Quantity: − [n] + stepper (assets/js/qty-stepper.js), 44 px targets.
 */

:root {
  --em26-ctl-radius: 0.625rem;
  --em26-ctl-h: 2.75rem;
  --em26-ctl-line: rgba(22, 53, 61, 0.3);
  --em26-ctl-magenta-dark: #94105a;
}

/* ---------- 1. card buttons ---------- */
html:not(#em26-ctl) body ul.products li.product a.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  min-height: var(--em26-ctl-h) !important;
  padding: 0.55rem 1rem !important;
  border: 1.5px solid var(--em26-ctl-line) !important;
  border-radius: var(--em26-ctl-radius) !important;
  background: var(--em26-surface, #fffefa) !important;
  box-shadow: none !important;
  color: var(--em26-ink, #16353d) !important;
  font: 700 0.9rem/1.2 var(--em26-font-sans) !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
html:not(#em26-ctl) body ul.products li.product a.button:hover,
html:not(#em26-ctl) body ul.products li.product a.button:focus-visible {
  border-color: var(--em26-ink, #16353d) !important;
  background: var(--em26-ink, #16353d) !important;
  color: var(--em26-paper, #f7f4ec) !important;
}
html:not(#em26-ctl) body ul.products li.product a.button:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 2px; }
/* simple product, adds to cart from the card: a small cart mark tells it apart from «Оберіть опції» */
html:not(#em26-ctl) body ul.products li.product a.button.ajax_add_to_cart::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='10' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='10' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:not(#em26-ctl) body ul.products li.product a.button.loading { opacity: 0.6; }
html:not(#em26-ctl) body ul.products li.product a.button.added::after { content: none !important; }
/* not in stock: «Повідомити коли з’явиться» */
html:not(#em26-ctl) body ul.products li.product a.button:not(.add_to_cart_button) {
  border-style: dashed !important;
  border-color: rgba(22, 53, 61, 0.28) !important;
  background: transparent !important;
  color: var(--em26-muted, #5d7075) !important;
  font-weight: 650 !important;
}
html:not(#em26-ctl) body ul.products li.product a.button:not(.add_to_cart_button):hover {
  border-style: solid !important;
  border-color: var(--em26-ink, #16353d) !important;
  background: transparent !important;
  color: var(--em26-ink, #16353d) !important;
}
/* «Переглянути кошик» after an AJAX add */
html:not(#em26-ctl) body ul.products li.product a.added_to_cart {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  color: var(--em26-cobalt, #1d5dbb) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 2. buy button and final actions ---------- */
html:not(#em26-ctl) body form.cart .single_add_to_cart_button,
html:not(#em26-ctl) body .wc-proceed-to-checkout a.checkout-button,
html:not(#em26-ctl) body #place_order,
html:not(#em26-ctl) body .woocommerce-mini-cart__buttons a.checkout {
  min-height: 3.25rem !important;
  padding: 0.75rem 1.5rem !important;
  border: 0 !important;
  border-radius: var(--em26-ctl-radius) !important;
  background: var(--em26-magenta, #b31368) !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 800 1rem/1.2 var(--em26-font-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  transition: background-color 160ms ease;
}
html:not(#em26-ctl) body form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled),
html:not(#em26-ctl) body .wc-proceed-to-checkout a.checkout-button:hover,
html:not(#em26-ctl) body #place_order:hover,
html:not(#em26-ctl) body .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--em26-ctl-magenta-dark) !important; }
html:not(#em26-ctl) body form.cart .single_add_to_cart_button:focus-visible,
html:not(#em26-ctl) body #place_order:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb) !important; outline-offset: 3px; }
/* waiting for a variation: calm grey, still readable (was magenta at 45 % opacity) */
html:not(#em26-ctl) body form.cart .single_add_to_cart_button:disabled,
html:not(#em26-ctl) body form.cart .single_add_to_cart_button.disabled {
  background: #e6e2d8 !important;
  color: #6b7c80 !important;
  cursor: not-allowed;
}

/* ---------- 3. other WooCommerce buttons (cart, coupon, account, notices) ---------- */
html:not(#em26-ctl) body.woocommerce-cart .woocommerce :is(a.button, button.button, input.button):not(.checkout-button),
html:not(#em26-ctl) body.woocommerce-checkout .woocommerce :is(a.button, button.button, input.button):not(#place_order),
html:not(#em26-ctl) body.woocommerce-account .woocommerce :is(a.button, button.button, input.button),
html:not(#em26-ctl) body .woocommerce-message a.button,
html:not(#em26-ctl) body .woocommerce-info a.button,
html:not(#em26-ctl) body .woocommerce-mini-cart__buttons a.button:not(.checkout) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--em26-ctl-h);
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--em26-ctl-line);
  border-radius: var(--em26-ctl-radius);
  background: var(--em26-surface, #fffefa);
  color: var(--em26-ink, #16353d);
  font: 700 0.9rem/1.2 var(--em26-font-sans);
  text-decoration: none;
}
html:not(#em26-ctl) body.woocommerce-cart .woocommerce :is(a.button, button.button, input.button):not(.checkout-button):hover:not(:disabled),
html:not(#em26-ctl) body.woocommerce-checkout .woocommerce :is(a.button, button.button, input.button):not(#place_order):hover,
html:not(#em26-ctl) body.woocommerce-account .woocommerce :is(a.button, button.button, input.button):hover,
html:not(#em26-ctl) body .woocommerce-message a.button:hover,
html:not(#em26-ctl) body .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
  border-color: var(--em26-ink, #16353d);
  background: var(--em26-ink, #16353d);
  color: var(--em26-paper, #f7f4ec);
}
html:not(#em26-ctl) body.woocommerce-cart .woocommerce button.button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- 4. sorting select ---------- */
html:not(#em26-ctl) body .woocommerce-ordering select.orderby,
html:not(#em26-ctl) body .woocommerce-ordering select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: var(--em26-ctl-h);
  max-width: 100%;
  padding: 0.5rem 2.75rem 0.5rem 1rem !important;
  border: 1.5px solid var(--em26-ctl-line) !important;
  border-radius: var(--em26-ctl-radius) !important;
  background: var(--em26-surface, #fffefa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2316353D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1rem !important;
  box-shadow: none !important;
  color: var(--em26-ink, #16353d) !important;
  font: 650 0.9rem/1.2 var(--em26-font-sans) !important;
  cursor: pointer;
}
html:not(#em26-ctl) body .woocommerce-ordering select:hover { border-color: var(--em26-ink, #16353d) !important; }
html:not(#em26-ctl) body .woocommerce-ordering select:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 2px; }
html:not(#em26-ctl) body .woocommerce-ordering { margin-bottom: 1.25rem; }

/* ---------- 5. quantity stepper ---------- */
html:not(#em26-ctl) body .quantity[data-em26-stepper] {
  display: inline-flex !important;
  align-items: stretch;
  flex: none;
  box-sizing: border-box;
  height: 3.25rem;
  overflow: hidden;
  border: 1.5px solid var(--em26-ctl-line);
  border-radius: var(--em26-ctl-radius);
  background: var(--em26-surface, #fffefa);
}
html:not(#em26-ctl) body .quantity[data-em26-stepper] input.qty {
  width: 3rem !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--em26-ink, #16353d) !important;
  font: 750 1rem/1 var(--em26-font-sans) !important;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
html:not(#em26-ctl) body .quantity[data-em26-stepper] input.qty::-webkit-outer-spin-button,
html:not(#em26-ctl) body .quantity[data-em26-stepper] input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html:not(#em26-ctl) body .quantity[data-em26-stepper] .em26-qty__btn {
  width: 2.75rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--em26-ink, #16353d);
  font: 600 1.25rem/1 var(--em26-font-sans);
  cursor: pointer;
  transition: background-color 140ms ease;
}
html:not(#em26-ctl) body .quantity[data-em26-stepper] .em26-qty__btn:hover { background: rgba(22, 53, 61, 0.07); }
html:not(#em26-ctl) body .quantity[data-em26-stepper] .em26-qty__btn:disabled { color: rgba(22, 53, 61, 0.3); cursor: default; background: transparent; }
html:not(#em26-ctl) body .quantity[data-em26-stepper] .em26-qty__btn:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: -3px; }
html:not(#em26-ctl) body .quantity[data-em26-stepper]:focus-within { border-color: var(--em26-ink, #16353d); }
/* cart table: a little smaller */
html:not(#em26-ctl) body.woocommerce-cart .quantity[data-em26-stepper] { height: 2.75rem; }
html:not(#em26-ctl) body.woocommerce-cart .quantity[data-em26-stepper] .em26-qty__btn { width: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  html:not(#em26-ctl) body ul.products li.product a.button,
  html:not(#em26-ctl) body form.cart .single_add_to_cart_button,
  html:not(#em26-ctl) body .quantity[data-em26-stepper] .em26-qty__btn { transition: none; }
}

/* cart: the coupon field was 5 rem wide («Промоко…»); same height and shape as the buttons next to it */
html:not(#em26-ctl) body.woocommerce-cart .coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
html:not(#em26-ctl) body.woocommerce-cart .coupon input#coupon_code {
  box-sizing: border-box;
  width: 12rem !important;
  min-height: var(--em26-ctl-h);
  margin: 0 !important;
  padding: 0.5rem 0.9rem !important;
  border: 1.5px solid var(--em26-ctl-line) !important;
  border-radius: var(--em26-ctl-radius) !important;
  background: var(--em26-surface, #fffefa) !important;
  color: var(--em26-ink, #16353d);
  font: 600 0.9rem/1.2 var(--em26-font-sans);
}

/* ---------- 6. listing toolbar: no result counter; sorting on the left above the grid (owner, 22 Oct 17:31) ----------
   The counter («Відображаються усі з N результатів») added nothing. Sorting sits on the content line, not hanging at the
   right edge, and only where it helps: five or more products on the page, or more than one page. */
html:not(#em26-ctl) body .woocommerce-result-count { display: none !important; }
html:not(#em26-ctl) body .woocommerce-ordering {
  float: none !important;
  grid-column: 1 / -1 !important;
  justify-self: start;
  display: flex;
  justify-content: flex-start;
  width: auto;
  margin: 0 0 1.25rem !important;
}
html:not(#em26-ctl) body .woocommerce-ordering select { width: auto !important; min-width: 16rem; }
html:not(#em26-ctl) body:not(:has(ul.products > li:nth-child(5))):not(:has(.woocommerce-pagination)) .woocommerce-ordering { display: none !important; }
@media (max-width: 47.99rem) {
  html:not(#em26-ctl) body .woocommerce-ordering { display: block; width: 100%; justify-self: stretch; }
  html:not(#em26-ctl) body .woocommerce-ordering select { width: 100% !important; min-width: 0; }
}

/* ---------- 7. colour is never altered (owner rule, 22 Oct 18:48: «колір — святий грааль») ----------
   An unavailable colour swatch keeps its real colour at full strength; the swatch plugin already marks it with its own
   small cross inside the circle, plus the not-allowed cursor. No opacity, no filter. */
html:not(#em26-ctl) body :is(.iconic-was-swatch--disabled, .iconic-was-swatches__item--out-of-stock),
html:not(#em26-ctl) body :is(.iconic-was-swatch--disabled, .iconic-was-swatches__item--out-of-stock) * { opacity: 1 !important; filter: none !important; }
html:not(#em26-ctl) body :is(.iconic-was-swatch--disabled, .iconic-was-swatches__item--out-of-stock) .iconic-was-swatch--colour-swatch,
html:not(#em26-ctl) body .iconic-was-swatch--colour-swatch.iconic-was-swatch--disabled { position: relative; cursor: not-allowed; }


/* ---------- 8. product tag / attribute archives: same container as every catalogue page ----------
   Same bug as /shop/ (shop-root.css): WooCommerce's unlayered `.em26-woo-surface { width: 100% }` beat the layered
   `.em26-container`, so /product-tag/…/ ran edge to edge with a 67 px title (found in the filament QA run, 22 Oct:
   /product-tag/universal-refill/ is linked from 28 filament product pages). Unlayered on purpose. */
html:not(#em26-ctl) body:is(.tax-product_tag, [class*="tax-pa_"]) .em26-woo-catalogue {
  width: min(calc(100% - 2rem), var(--em26-container, 80rem));
  margin-inline: auto;
}
@media (min-width: 48rem) {
  html:not(#em26-ctl) body:is(.tax-product_tag, [class*="tax-pa_"]) .em26-woo-catalogue { width: min(calc(100% - 3rem), var(--em26-container, 80rem)); }
}
@media (min-width: 80rem) {
  html:not(#em26-ctl) body:is(.tax-product_tag, [class*="tax-pa_"]) .em26-woo-catalogue { width: min(calc(100% - 4rem), var(--em26-container, 80rem)); }
}
html:not(#em26-ctl) body:is(.tax-product_tag, [class*="tax-pa_"]) .em26-woo-catalogue .page-title {
  margin: 0.5rem 0 1.25rem;
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* ---------- 9. catalogue cards: empty duplicate product link (filament QA run, 22 Oct) ----------
   CommerceKit prints its wishlist block inside the product link; the HTML parser closes the outer link and opens an
   empty one inside the wishlist block (30×30, focusable, no name, lying over the heart). Hidden: no content is lost, the
   heart and the real product link stay. Site-wide (every catalogue card). */
html:not(#em26-ctl) body .commercekit-wishlist > a.woocommerce-LoopProduct-link:empty { display: none !important; }

/* ---------- 10. small text links get a 44 px hit area without moving the layout ---------- */
html:not(#em26-ctl) body.single-product div.product .product_meta a,
html:not(#em26-ctl) body.single-product div.product .commercekit-wishlist:not(.mini) a {
  display: inline-block;
  padding-block: 0.8rem;
  margin-block: -0.8rem;
}

/* ---------- 10a. category pills on resin and colour products (EM-14, owner OK 22 Oct) ----------
   The 44 px rule above gave pills a negative margin, so they lay over each other and over «Категорії:». Pills now sit
   in a wrapping row with real gaps; the comma between them is hidden visually but stays in the DOM
   (woocommerce/single-product/meta.php wraps it in .em26-meta-sep). Plain-link archetypes keep their commas. */
html:not(#em26-ctl) body.em26-product--resin-technical div.product .product_meta .posted_in,
html:not(#em26-ctl) body.em26-product--colour-effects div.product .product_meta .posted_in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
html:not(#em26-ctl) body.em26-product--resin-technical div.product .product_meta .posted_in a,
html:not(#em26-ctl) body.em26-product--colour-effects div.product .product_meta .posted_in a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin: 0;
  padding: 0.35rem 0.8rem;
  line-height: 1.3;
}
html:not(#em26-ctl) body.em26-product--resin-technical .product_meta .em26-meta-sep,
html:not(#em26-ctl) body.em26-product--colour-effects .product_meta .em26-meta-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (pointer: coarse) {
  html:not(#em26-ctl) body.em26-product--resin-technical div.product .product_meta .posted_in a,
  html:not(#em26-ctl) body.em26-product--colour-effects div.product .product_meta .posted_in a { min-height: 2.75rem; }
}

/* ---------- 11. scroll: one sticky rule for the whole site (owner, 22 Oct 21:09) ----------
   Audit: product galleries in 9 archetypes stuck at two different offsets (24 px / 112 px) and were taller than a laptop
   window (736–927 px in a 784 px window), so their thumbnails stayed hidden until the end of the page; the resin section
   nav stuck at 0 under the admin bar; the docs sidebar and delivery photo used their own offsets. Now: one offset under
   the admin bar, sticky only from 64 rem, and assets/js/sticky-guard.js releases any block that does not fit the window. */
:root { --em26-stick-top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem); }
@media (min-width: 64rem) {
  html:not(#em26-ctl) body div.product :is(.images, .woocommerce-product-gallery, #commercegurus-pdp-gallery-wrapper.images):not(.em26-no-stick),
  html:not(#em26-ctl) body .em26-pdp-top > :is(.images, .woocommerce-product-gallery):not(.em26-no-stick),
  html:not(#em26-ctl) body.em26-docs .betterdocs-sidebar:not(.em26-no-stick),
  html:not(#em26-ctl) body .em26-entry--workshop-delivery > .em26-entry__aside-photo:not(.em26-no-stick) { top: var(--em26-stick-top) !important; }
}
@media (max-width: 63.99rem) {
  html:not(#em26-ctl) body div.product :is(.images, .woocommerce-product-gallery, #commercegurus-pdp-gallery-wrapper.images),
  html:not(#em26-ctl) body .em26-pdp-top > :is(.images, .woocommerce-product-gallery) { position: relative !important; top: auto !important; }
}
html:not(#em26-ctl) body .em26-resin-sections__nav { top: var(--wp-admin--admin-bar--height, 0px); }
/* :is() with the gallery ID lifts this above the ID-level sticky rules of the product archetypes. */
html:not(#em26-ctl) body :is(#commercegurus-pdp-gallery-wrapper, .em26-no-stick).em26-no-stick.em26-no-stick { position: relative !important; top: auto !important; }

/* ---------- 12. variation info block (shown after choosing a format / weight) on the type scale ----------
   Owner (22 Oct 21:11): the block that appears after choosing the filament format looked like another font. The font is
   Manrope, but the stored variation HTML carries inline 18 px text, a non-brand #00a8a8 frame and its own paddings.
   Restyled site-wide (every variable product); the stored text and images are not touched. */
html:not(#em26-ctl) body .woocommerce-variation-description { margin: 1rem 0 0; }
html:not(#em26-ctl) body .woocommerce-variation-description :is(div, p, span, li, strong, b)[style] {
  font-family: var(--em26-font-sans, Manrope, sans-serif) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
html:not(#em26-ctl) body .woocommerce-variation-description > :first-child {
  padding: 1rem 1.1rem !important;
  border: 1px solid var(--fl-accent-line, rgba(22, 53, 61, 0.14)) !important;
  border-radius: 0.75rem !important;
  background: var(--em26-surface, #fffefa) !important;
  color: #2c4850;
  font: 400 0.9375rem/1.55 var(--em26-font-sans, Manrope, sans-serif) !important;
}
html:not(#em26-ctl) body .woocommerce-variation-description p { margin: 0 0 0.5rem !important; }
html:not(#em26-ctl) body .woocommerce-variation-description p:last-child { margin-bottom: 0 !important; }
html:not(#em26-ctl) body .woocommerce-variation-description :is(strong, b) { color: var(--em26-ink, #16353d); font-weight: 700; }
html:not(#em26-ctl) body .woocommerce-variation-description img { display: block; max-width: 100%; height: auto; margin: 0 0 0.75rem; border-radius: 0.5rem; }

/* ---------- 13. catalogue drawer on touch screens: 44 px per link (owner, 22 Oct 22:00) ----------
   Measured on a phone: root links 19–23 px, sub-links 34 px, service links 19 px — the links sit edge to edge, so a
   miss opens the neighbouring category. Touch only: with a mouse the denser list stays as it is. Type, colours and
   lines are unchanged; only the height of each row grows. */
@media (pointer: coarse) {
  html:not(#em26-ctl) .em26-nav-drawer .em26-nav-list--roots > .em26-nav-list__item > .em26-nav-list__link,
  html:not(#em26-ctl) .em26-nav-drawer .em26-nav-list--children .em26-nav-list__link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0.25rem;
  }
  html:not(#em26-ctl) .em26-nav-drawer__service .em26-nav-list { row-gap: 0; }
  html:not(#em26-ctl) .em26-nav-drawer__service a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* ---------- 14–15. moved: the option chips and the summary order now live in §21 and §22 at the end of this file ---------- */

/* ---------- 16. root route cards of molds on phones: compact, like the reference roots ----------
   The clocks / artboards roots show each route as a short row (picture left, text right). Phone layout only.
   (Kits and tools no longer have route cards: see §17.) */
@media (max-width: 47.99rem) {
  html:not(#em26-ctl) body .em26-molds-routes { gap: 0.75rem; }
  html:not(#em26-ctl) body .em26-molds-route {
    display: grid !important;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    grid-template-areas: "glyph num" "glyph small" "glyph title" "glyph desc" "action action";
    grid-template-rows: none !important;
    grid-auto-rows: auto;
    align-content: start;
    column-gap: 0.9rem;
    row-gap: 0.2rem;
    min-height: 0 !important;
    padding: 1rem 1.1rem !important;
  }
  html:not(#em26-ctl) body .em26-molds-route > .em26-molds-route__number { grid-area: num; margin: 0; }
  html:not(#em26-ctl) body .em26-molds-route > .em26-molds-route__glyph { grid-area: glyph; align-self: start; margin: 0; width: 3.75rem; height: 3.75rem; }
  html:not(#em26-ctl) body .em26-molds-route > .em26-molds-route__glyph svg { width: 100%; height: 100%; }
  html:not(#em26-ctl) body .em26-molds-route > small { grid-area: small; margin: 0; }
  html:not(#em26-ctl) body .em26-molds-route > strong { grid-area: title; margin: 0; font-size: 1.25rem; line-height: 1.2; }
  html:not(#em26-ctl) body .em26-molds-route > p { grid-area: desc; margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.45; }
  html:not(#em26-ctl) body .em26-molds-route > .em26-molds-route__action { grid-area: action; margin: 0.5rem 0 0; padding-top: 0.5rem; }
}

/* ---------- 17. kits and tools roots: one row of section links instead of route cards (owner, 22 Oct 22:59) ----------
   The seven / five route cards repeated the group titles right below them, with the same products. Now one wrapping
   row of links (same labels and URLs), then the product groups. */
.em26-section-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0.5rem;
  padding: 0;
}
.em26-section-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--em26-border, rgba(22, 53, 61, 0.14));
  border-radius: 999px;
  background: var(--em26-surface, #fffefa);
  color: var(--em26-ink, #16353d);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.em26-section-chips a:hover { border-color: var(--em26-cobalt, #1d5dbb); background: color-mix(in srgb, var(--em26-cobalt, #1d5dbb) 7%, var(--em26-surface, #fffefa)); }
.em26-section-chips a:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 3px; }
:is(.em26-tools-group, .em26-learning-group) { scroll-margin-top: 6rem; }
@media (max-width: 47.99rem) {
  .em26-section-chips { gap: 0.4rem; margin-top: 1.25rem; }
  .em26-section-chips a { padding: 0.5rem 0.85rem; font-size: 0.875rem; }
}

/* ---------- 18. product grids on phones: two cards per row on the whole site (owner, 22 Oct 22:49) ----------
   One product used to take a screen and a half; now four fit on one screen. Price and button keep 44 px targets.
   Category tiles (li.product-category) keep their own layout. */
@media (max-width: 47.99rem) {
  html:not(#em26-ctl):not(#em26-two) body ul.products:not(:has(> li.product-category)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  html:not(#em26-ctl):not(#em26-two) body ul.products:not(:has(> li.product-category)) > li.product {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0.5rem !important;
  }
  html:not(#em26-ctl):not(#em26-two) body ul.products > li.product > a.woocommerce-LoopProduct-link:has(> img) { flex: none !important; display: block; aspect-ratio: 1; height: auto !important; min-height: 0 !important; overflow: hidden; }
  html:not(#em26-ctl):not(#em26-two) body ul.products > li.product > a.woocommerce-LoopProduct-link > img:first-child { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1 !important; padding: 0.3rem !important; object-fit: contain; }
  html:not(#em26-ctl):not(#em26-two) body ul.products > li.product .woocommerce-loop-product__title {
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word;
    hyphens: manual;
  }
  html:not(#em26-ctl):not(#em26-two) body ul.products > li.product .price { font-size: 1rem !important; }
  html:not(#em26-ctl):not(#em26-two) body ul.products > li.product > .woocommerce-loop-product__title { flex: 1 0 auto; }
  html:not(#em26-ctl):not(#em26-two) body ul.products > li.product a.button {
    min-height: 2.75rem;
    padding: 0.5rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center;
  }
}
@media (max-width: 22.5rem) {
  html:not(#em26-ctl):not(#em26-two) body ul.products:not(:has(> li.product-category)) { gap: 0.5rem !important; }
  html:not(#em26-ctl):not(#em26-two) body ul.products > li.product .woocommerce-loop-product__title { font-size: 0.875rem !important; }
  html:not(#em26-ctl):not(#em26-two) body ul.products > li.product a.button { font-size: 0.8125rem !important; }
}

/* ---------- 18. «додано до кошика» notice on phones (QA 23 Oct 00:50) ----------
   The «Переглянути кошик» button floated right and squeezed the message into a narrow column. On phones the message
   reads first and the button sits under it at full width. */
@media (max-width: 47.99rem) {
  html:not(#em26-ctl) body :is(.woocommerce-message, .woocommerce-info):has(> a.button) { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
  html:not(#em26-ctl) body :is(.woocommerce-message, .woocommerce-info) > a.button { order: 2; float: none !important; display: flex; justify-content: center; width: 100%; margin: 0 !important; }
}

/* ---------- 19. product search results (QA 23 Oct 01:40) ----------
   Search results mix every section, so no section sheet styles their cards: the title and price touched the card
   edges, the price was WooCommerce green and right-aligned, a cobalt bar sat on top and «Акція» was a green disc.
   Same card geometry as the section cards (0.75 rem inset, ink price, magenta sale label). Presentation only. */
html:not(#em26-ctl) body.search-results .em26-woo-catalogue ul.products > li.product:not(.product-category) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0.75rem !important;
  border: 1px solid rgba(22, 53, 61, 0.14) !important;
  border-radius: 0.875rem;
  background: var(--em26-surface, #fffefa);
  text-align: left;
}
html:not(#em26-ctl) body.search-results .em26-woo-catalogue ul.products > li.product:not(.product-category) > a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; position: relative; color: var(--em26-ink, #16353d); text-decoration: none; }
html:not(#em26-ctl) body.search-results .em26-woo-catalogue ul.products > li.product:not(.product-category) > a.woocommerce-LoopProduct-link img { margin: 0 !important; border-radius: 0.5rem; }
html:not(#em26-ctl) body.search-results .em26-woo-catalogue ul.products > li.product:not(.product-category) .woocommerce-loop-product__title {
  margin: 0.9rem 0.25rem 0.5rem !important;
  padding: 0 !important;
  color: var(--em26-ink, #16353d);
  font-size: 1rem !important;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
html:not(#em26-ctl) body.search-results .em26-woo-catalogue ul.products > li.product:not(.product-category) .price {
  display: block;
  margin: auto 0.25rem 0.75rem !important;
  padding: 0 !important;
  color: var(--em26-ink, #16353d) !important;
  font-size: 1.125rem !important;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: left !important;
  align-self: flex-start !important;
}
html:not(#em26-ctl) body.search-results .em26-woo-catalogue ul.products > li.product:not(.product-category) .price :is(.woocommerce-Price-amount, bdi, ins) { color: inherit !important; background: transparent; text-decoration: none; }
html:not(#em26-ctl) body.search-results .em26-woo-catalogue ul.products > li.product:not(.product-category) .price del { color: var(--em26-muted, #5a6f75) !important; font-size: 0.875rem; font-weight: 500; }
html:not(#em26-ctl) body.search-results .em26-woo-catalogue ul.products > li.product:not(.product-category) .button { width: 100%; margin: 0 !important; justify-content: center; }

/* ---------- 20. WooCommerce notices on every page (owner, 23 Oct 09:43) ----------
   The «додано до кошика» notice on product pages came in WooCommerce grey with a green top line glued to the
   breadcrumb and a green check. One notice style for the whole site, in the brand colours: a surface card with a
   thin frame and a 4 px accent bar on the left (success and info turquoise, error magenta), a round check
   icon in the same colour, and air above and below. The checkout keeps its own notice rules (cart-checkout.css),
   which use the same look. Presentation only; wording and behaviour are WooCommerce's. */
html:not(#em26-ctl) body .woocommerce-notices-wrapper:not(:empty) { margin: 1rem 0 1.25rem; }
html:not(#em26-ctl) body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 1rem;
  padding: 0.9rem 1.25rem 0.9rem 3.5rem;
  border: 1px solid rgba(22, 53, 61, 0.14);
  border-left: 4px solid var(--em26-turquoise, #129a9a);
  border-top-width: 1px;
  border-radius: var(--em26-ctl-radius);
  background: var(--em26-surface, #fffefa);
  color: var(--em26-ink, #16353d);
  font: 500 0.9375rem/1.45 var(--em26-font-sans);
  list-style: none;
}
html:not(#em26-ctl) body .woocommerce-error { border-left-color: var(--em26-magenta, #b31368); padding-left: 3.5rem; }
html:not(#em26-ctl) body .woocommerce-error li { margin: 0; padding: 0; list-style: none; }
html:not(#em26-ctl) body .woocommerce-error li + li { margin-top: 0.35rem; }
html:not(#em26-ctl) body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border-radius: 50%;
  background: var(--em26-turquoise, #129a9a)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffefa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-7.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  font: 0/0 serif;
  color: transparent;
}
html:not(#em26-ctl) body .woocommerce-error::before {
  background: var(--em26-magenta, #b31368)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffefa' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.2v.3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* the «Переглянути кошик» button sits at the right of the text on wide screens, vertically centred */
@media (min-width: 48rem) {
  html:not(#em26-ctl) body .woocommerce-message:has(> a.button) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  html:not(#em26-ctl) body .woocommerce-message > a.button { order: 2; float: none !important; flex: none; margin: 0 !important; }
}
@media (max-width: 47.99rem) {
  html:not(#em26-ctl) body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { padding: 0.9rem 1rem 0.9rem 3.25rem; }
}
/* error lines that carry a button («Переглянути кошик» after a stock refusal): text first, button under it */
html:not(#em26-ctl) body .woocommerce-error li:has(> a.button) { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
html:not(#em26-ctl) body .woocommerce-error li > a.button { order: 2; float: none !important; margin: 0 !important; }
@media (max-width: 47.99rem) {
  html:not(#em26-ctl) body .woocommerce-error li > a.button { align-self: stretch; display: flex; justify-content: center; }
}

/* ---------- One badge system (owner, 25 Oct: crooked «Нове», green «Акція», the magenta tag stuck to the title) ----------
   The sale flag is one magenta tag with a saffron dot on every card and product page, whatever section styled it before;
   «Нове» and the refill star stack under each other in the photo's top-left corner, clear of the wishlist heart. */
html:not(#em26-ctl) body .onsale {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0.4rem 0.65rem !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--em26-magenta, #b31368) !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 700 0.8125rem/1 var(--em26-font-sans, inherit) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  transform: none !important;
}
html:not(#em26-ctl) body .onsale::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--em26-saffron, #f2b632);
}
html:not(#em26-ctl) body .woocommerce-product-gallery > .onsale,
html:not(#em26-ctl) body #commercegurus-pdp-gallery-wrapper > .onsale {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  z-index: 5;
  margin: 0 !important;
}
/* no JS: the flag sits in the flow above the photo instead of over the title */
@media (max-width: 47.99rem) {
  html:not(#em26-ctl) body.single-product div.product > .onsale {
    position: static !important;
    justify-self: start;
    margin: 0 0 0.75rem !important;
  }
}
/* «Нове» and the refill star: a column of small pills, never under the heart */
html:not(#em26-ctl) body li.product .sky-product-badges {
  position: absolute;
  z-index: 2;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  max-width: calc(100% - 3.5rem);
  margin: 0;
  padding: 0;
  pointer-events: none;
}
html:not(#em26-ctl) body li.product .sky-badge-new {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--em26-ink, #16353d);
  color: #fff;
  font-size: 0;
  line-height: 1;
}
html:not(#em26-ctl) body li.product .sky-badge-new::after {
  content: "Нове";
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* Every card, every listing (shop, categories, search, related): the sale tag is the first pill of the photo's top-left
   column, the heart keeps the right corner (owner, 26 Oct 15:06: the tag stood in different places and covered the heart). */
html:not(#em26-ctl) body ul.products li.product:not(.product-category) .onsale {
  top: 0.6rem !important;
  left: 0.6rem !important;
  right: auto !important;
}
/* the sale tag drops below the stack: one pill = 2.4rem, two pills = 4.1rem */
html:not(#em26-ctl) body ul.products li.product:not(.product-category):not(.em26-fmt-known:not(.em26-fmt-ref-in)):has(.sky-badge-new):not(:has(.sky-badge-star)) .onsale,
html:not(#em26-ctl) body ul.products li.product:not(.product-category):not(.em26-fmt-known:not(.em26-fmt-ref-in)):has(.sky-badge-star):not(:has(.sky-badge-new)) .onsale { top: 2.4rem !important; }
html:not(#em26-ctl) body ul.products li.product:not(.product-category):not(.em26-fmt-known:not(.em26-fmt-ref-in)):has(.sky-badge-new):has(.sky-badge-star) .onsale { top: 4.1rem !important; }

/* ---------- Moisture-tolerant resins: Art Pro and Ocean Art (owner, 25 Oct 23:09–23:13) ----------
   One quiet sign: an ink drop after the name (half / fully filled with turquoise), a mono legend above the grid and a
   line by the price; both open the advice. No plates, no alarm colours. */
html:not(#em26-ctl) body .em26-dew { display: inline-flex; vertical-align: -0.1em; margin-left: 0.3em; }
html:not(#em26-ctl) body .em26-dew__drop { flex: none; width: 1em; height: 1em; }
html:not(#em26-ctl) body .em26-dew-legend,
html:not(#em26-ctl) body .em26-dew-note { margin: 0 0 1rem; color: var(--em26-ink, #16353d); }
html:not(#em26-ctl) body .em26-dew-legend { flex-basis: 100%; width: 100%; }
html:not(#em26-ctl) body :is(.em26-dew-legend, .em26-dew-note) > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; min-height: 2.75rem; padding: 0.25rem 0;
  cursor: pointer; list-style: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8125rem; line-height: 1.4; color: #35545b;
}
html:not(#em26-ctl) body :is(.em26-dew-legend, .em26-dew-note) > summary::-webkit-details-marker { display: none; }
html:not(#em26-ctl) body .em26-dew-legend__item,
html:not(#em26-ctl) body .em26-dew-note > summary { gap: 0.4rem; }
html:not(#em26-ctl) body .em26-dew-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }
html:not(#em26-ctl) body :is(.em26-dew-legend, .em26-dew-note) .em26-dew__drop { width: 1rem; height: 1rem; }
html:not(#em26-ctl) body .em26-dew-legend__more,
html:not(#em26-ctl) body .em26-dew-note > summary span { text-decoration: underline dotted; text-underline-offset: 0.25em; text-decoration-color: rgba(22, 53, 61, 0.45); }
html:not(#em26-ctl) body .em26-dew-legend__more::after { content: " ↓"; text-decoration: none; display: inline-block; transition: transform 0.2s; }
html:not(#em26-ctl) body .em26-dew-legend[open] .em26-dew-legend__more::after { transform: rotate(180deg); }
html:not(#em26-ctl) body :is(.em26-dew-legend, .em26-dew-note) > summary:hover { color: var(--em26-ink, #16353d); }
html:not(#em26-ctl) body :is(.em26-dew-legend, .em26-dew-note) > summary:focus-visible { outline: 3px solid var(--em26-cobalt, #1d5dbb); outline-offset: 2px; border-radius: 4px; }
html:not(#em26-ctl) body :is(.em26-dew-legend, .em26-dew-note) > p {
  max-width: 60ch; margin: 0.25rem 0 0.5rem; padding-left: 0.75rem; border-left: 2px solid #129a9a;
  font-size: 0.9375rem; line-height: 1.55; color: var(--em26-ink, #16353d);
}
/* the product summary is a flex column with explicit orders (title 1, price and specs 2, form 3): the drop line joins the price group */
html:not(#em26-ctl) body div.product .summary > .em26-dew-note { order: 2; }

/* ---------- 11. wishlist row on the product page, and tap-target floor site-wide ----------
   The wishlist icon is a zero-width <em> whose ::before the plugin pins at left: -22px, so the
   heart was drawn outside the summary column on phones. The icon goes into normal flow instead.
   Presentation only: no markup, copy, links, product data or SEO fields change. */

html:not(#em26-ctl) body div.product .summary .commercekit-wishlist > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
}
html:not(#em26-ctl) body div.product .summary .commercekit-wishlist > a > em.cg-wishlist {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: inline-block !important;
  flex: 0 0 auto;
  width: 1rem !important;
  height: 1rem !important;
}
html:not(#em26-ctl) body div.product .summary .commercekit-wishlist > a > em.cg-wishlist::before {
  top: 0 !important;
  left: 0 !important;
}

/* 44 x 44 minimum for real controls (WCAG 2.5.5). Links inside a sentence of body copy are
   left alone on purpose — WCAG 2.5.8 exempts them and padding them would break the text. */

/* the swatch plugin sizes its buttons with !important, so the floor has to match that weight */
html:not(#em26-ctl) body .cgkit-attribute-swatches .cgkit-attribute-swatch > .swatch,
html:not(#em26-ctl) body li.cgkit-attribute-swatch > .swatch {
  min-height: 44px !important;
  min-width: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* text swatches ("15 мл", "Deluxe") keep their own width and only gain height */
html:not(#em26-ctl) body .cgkit-attribute-swatches .cgkit-button > .swatch,
html:not(#em26-ctl) body li.cgkit-attribute-swatch.cgkit-button > .swatch {
  min-width: 0 !important;
  padding-block: 0.35rem;
  line-height: 1.2;
  text-align: center;
}

html:not(#em26-ctl) body .em26-home-real-mainbar a.em26-home-real-brand,
html:not(#em26-ctl) body nav.em26-woocommerce-breadcrumb a,
html:not(#em26-ctl) body nav.woocommerce-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The own-production signature on FLAMENCO pages stands on its own (no shade list around it),
   so it needs its own place in the summary's flex order: the same group as the short
   description, which puts it directly above the buy box, as on Liquid Leaf. */
html:not(#em26-ctl) body div.product .summary > .em26-leaf-shades__made {
  order: 3;
  margin: 0.9rem 0 0.35rem;
}

/* ---------- Card flags in the photo (assets/js/card-flags.js) ----------
   With the script: one column inside the photo, 0.6 rem from its corner, sale tag first; the heart keeps the right corner.
   Without it the rules above position the same pieces on the card. */
html:not(#em26-ctl) body .em26-flags-host { position: relative; }
html:not(#em26-ctl) body .em26-flags {
  position: absolute; z-index: 3; top: 0.6rem; left: 0.6rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  max-width: calc(100% - 3.5rem); pointer-events: none;
}
html:not(#em26-ctl) body .em26-flags > .onsale,
html:not(#em26-ctl) body li.product .em26-flags > .sky-product-badges {
  position: static !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 !important; max-width: none;
}

/* ---------- 21. ONE buy box for every product except resin and filament (owner, 30 Oct: «ревізія на кожному товарі») ----------
   Found on production: clocks, decor, colour sets, kits, artboards and tools mixed two chip plugins (Iconic text swatches
   with a thin grey frame, CommerceKit buttons with no frame at all: «4 головні цифри / 12 цифер» hung as bare text);
   «Очистити» reserved its own empty row under the last option and jumped there when shown; table cells, empty plugin
   wrappers and label margins added uneven air. Reference = the resin window: 44 px chips with a 1.5 px line, bold label,
   cobalt when chosen, «Очистити» as a small link in the top right corner of the window.
   Presentation only: the plugins' markup, the hidden selects and the variation logic are untouched.
   Resin keeps its own pack picker; filament keeps its own design (assets/css/claude/filament-redesign.css). */
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form {
  position: relative;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form table.variations {
  display: block;
  width: 100%;
  margin: 0 0 1.1rem;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form table.variations tbody {
  display: grid;
  gap: 1.1rem;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form table.variations tr {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form table.variations :is(th.label, td.value) {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  vertical-align: top;
}
/* the table parts must not be a positioning box, or «Очистити» sticks to the last row instead of the window corner */
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form table.variations :is(tbody, tr, th, td) {
  position: static !important;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form table.variations th.label label {
  margin: 0;
}
/* the first label leaves room for «Очистити» in the corner, only while the link is shown (WooCommerce hides it inline) */
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form:has(.reset_variations:not([style*="hidden"])) table.variations tr:first-child th.label {
  padding-right: 5.75rem;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form table.variations th.label :is(.iconic-was-chosen-attribute, .cgkit-chosen-attribute) {
  color: var(--em26-muted);
  font-weight: 600;
}

/* chip rows */
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(ul.iconic-was-swatches--text-swatch, ul.cgkit-attribute-swatches:has(> li.cgkit-button)) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(li.iconic-was-swatches__item:has(> a.iconic-was-swatch--text-swatch), li.cgkit-attribute-swatch.cgkit-button) {
  position: relative;
  width: auto !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(a.iconic-was-swatch--text-swatch, li.cgkit-button > button.cgkit-swatch) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 3.5rem;
  min-height: 2.75rem;
  height: auto !important;
  margin: 0 !important;
  padding: 0.45rem 0.95rem !important;
  border: 1.5px solid var(--em26-border-strong, rgba(22, 53, 61, 0.34)) !important;
  border-radius: var(--em26-radius-control, 0.5rem) !important;
  background: var(--em26-surface, #fffefa) !important;
  box-shadow: none !important;
  color: var(--em26-ink, #16353d) !important;
  font: 700 0.9375rem/1.25 var(--em26-font-sans, "Manrope", sans-serif) !important;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none !important;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(a.iconic-was-swatch--text-swatch, li.cgkit-button > button.cgkit-swatch):hover {
  border-color: var(--em26-cobalt, #1d5dbb) !important;
  background: color-mix(in srgb, var(--em26-cobalt, #1d5dbb) 8%, var(--em26-surface, #fffefa)) !important;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(a.iconic-was-swatch--text-swatch.iconic-was-swatch--selected, li.cgkit-button > button.cgkit-swatch.cgkit-swatch-selected) {
  border-color: var(--em26-cobalt, #1d5dbb) !important;
  background: var(--em26-cobalt, #1d5dbb) !important;
  color: #fff !important;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(a.iconic-was-swatch--text-swatch, li.cgkit-button > button.cgkit-swatch):focus-visible {
  outline: 3px solid var(--em26-cobalt, #1d5dbb) !important;
  outline-offset: 2px;
}
@media (max-width: 24rem) {
  html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(a.iconic-was-swatch--text-swatch, li.cgkit-button > button.cgkit-swatch) {
    min-width: 3rem;
    padding-inline: 0.7rem !important;
  }
}
/* sold out / not available with the other choice: legible, dashed, struck through */
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(a.iconic-was-swatch--text-swatch.iconic-was-swatch--disabled, a.iconic-was-swatch--text-swatch.iconic-was-swatch--inactive, li.cgkit-button > button.cgkit-swatch.cgkit-as-outofstock:not(.cgkit-swatch-selected), li.cgkit-button > button.cgkit-swatch:disabled) {
  border-style: dashed !important;
  background: transparent !important;
  color: var(--em26-muted) !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1px !important;
}

/* «Очистити»: a small link in the window's top right corner. It never reserves a row: hidden, it takes no space. */
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form .reset_variations {
  position: absolute !important;
  top: 0.35rem !important;
  right: 0.6rem !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-height: 2.75rem;
  margin: 0 !important;
  padding: 0 0.4rem !important;
  border: 0 !important;
  background: none !important;
  color: var(--em26-muted) !important;
  font: 600 0.8125rem/1.2 var(--em26-font-sans, "Manrope", sans-serif) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
  opacity: 1 !important;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form .reset_variations:hover { color: var(--em26-cobalt) !important; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form .reset_variations:focus-visible {
  outline: 3px solid var(--em26-cobalt) !important;
  outline-offset: 0;
  border-radius: 4px;
}

/* dead air: plugin headings and empty wrappers between the options and the buy row */
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value .cgkit-swatch-title { display: none !important; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form td.value :is(.cgkit-as-wrap, ul.iconic-was-swatches) { margin: 0 !important; padding: 0 !important; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form .single_variation_wrap { margin: 0 !important; padding: 0 !important; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form .woocommerce-variation.single_variation { margin: 0 !important; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form .woocommerce-variation.single_variation:not(:empty) { margin-bottom: 0.85rem !important; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form .woocommerce-variation.single_variation > :is(.woocommerce-variation-description, .woocommerce-variation-price, .woocommerce-variation-availability):empty { display: none; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--resin-technical):not(.em26-product--filament) .summary form.variations_form .woocommerce-variation.single_variation > * > :last-child { margin-bottom: 0; }

/* ---------- 22. summary order and the category block (owner, 30 Oct: «хаотично, врізаються в синю лінію») ----------
   On colour sets, kits and tools with the long text after the form, the category block took order 2 and landed right on
   top of the buy window, and the price fell under the text. One order for these pages: title, price, buy window,
   wishlist, context, the long text, categories last. Every page except filament now shows «Категорії:» on its own
   line with the categories as one tidy row of pills under it. Links and text are unchanged; the comma stays in the DOM. */
body.em26-excerpt-after-form div.product .summary.entry-summary { display: flex; flex-direction: column; }
body.em26-excerpt-after-form div.product .summary.entry-summary > .woocommerce-product-details__short-description { order: 8; margin-top: 1.5rem; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary > .product_meta { order: 99; }

html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta {
  display: grid;
  gap: 0.85rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--em26-border);
  color: var(--em26-muted);
  font: 600 0.8125rem/1.45 var(--em26-font-sans, "Manrope", sans-serif);
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta > :is(.posted_in, .tagged_as) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
/* a zero-height full-width break after the label text, so the pills start on their own line */
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta > :is(.posted_in, .tagged_as)::before {
  content: "";
  order: 1;
  flex-basis: 100%;
  height: 0;
  margin-top: -0.2rem;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta > :is(.posted_in, .tagged_as) > :is(a, .em26-meta-sep) { order: 2; }
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta > :is(.posted_in, .tagged_as) > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--em26-ink, #16353d) 7%, var(--em26-surface, #fffefa));
  color: var(--em26-ink);
  font: 650 0.875rem/1.3 var(--em26-font-sans, "Manrope", sans-serif);
  text-decoration: none;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta > :is(.posted_in, .tagged_as) > a:hover {
  background: var(--em26-ink);
  color: #fff;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta > :is(.posted_in, .tagged_as) > a:focus-visible {
  outline: 3px solid var(--em26-cobalt);
  outline-offset: 2px;
}
html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta .em26-meta-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (pointer: coarse) {
  html:not(#em26-ctl) body[class*="em26-product--"]:not(.em26-product--filament) div.product .summary .product_meta > :is(.posted_in, .tagged_as) > a { min-height: 2.75rem; }
}

/* ---------- 23. FAQ accordions (Helpie FAQ) on every page (owner, 30 Oct: «у частих питаннях розсипалась верстка») ----------
   The plugin sets a fixed `left` and a 37 px right margin on the «+» lines, so on phones the sign landed inside the question
   text. The sign now sits in a reserved right column, centred on the question however many lines it takes. */
html:not(#em26-ctl) body .helpie-faq .accordion__header { position: relative; padding-right: 3.5rem !important; }
html:not(#em26-ctl) body .helpie-faq .accordion__header .accordion__title { padding-right: 0 !important; }
html:not(#em26-ctl) body .helpie-faq .accordion__header::before,
html:not(#em26-ctl) body .helpie-faq .accordion__header::after {
  top: calc(50% - 1px) !important;
  right: 1rem !important;
  left: auto !important;
  margin: 0 !important;
}