/* =====================================================================
   ZUIVERLAB — Global CSS
   Astra + Elementor Pro + WooCommerce · dark theme, red/gold accents

   No site, page or outer-container background is set here.

   Contents
   01  Variables
   02  Typography and links
   03  Astra header clean-up
   04  Buttons (shared outlined, skewed style)
   05  Form fields, Select2, quantity
   06  WooCommerce notices
   07  Homepage hero and category cards
   08  Product grids (shop, archives, Elementor product widgets)
   09  Loop add-to-cart states (loading / added / "Warenkorb ansehen")
   10  Add-to-cart toast (used by add-to-cart-notice.html)
   11  Shop pages: 1200px frame, headings, shop / archive
   12  Single product (Elementor Pro template)
   13  Mini cart (Elementor Menu Cart)
   14  Cart page
   15  Checkout page
   16  Thank-you page
   17  WooCommerce Cart & Checkout blocks (fallback)
   18  Product copy: .zl-specs
   19  Product copy: .zl-longdesc
   20  Responsive
   21  Button lock (keeps the slanted outline everywhere)
   22  Contact page (zuiverlab-contact/contact-page.json)
   23  Site look on all pages (depth edges, red-gold lines, focus glow)
   24  Homepage (was homepage.css: hero glow + 3D, trust cards, sections)
   ===================================================================== */

/* Fonts: loaded in the page  by the ZuiverLab SEO snippet
   (preconnect + one Google Fonts stylesheet), so they start early.
   DSGVO note: they come from Google's servers. To host them locally
   instead, use the OMGF plugin or Elementor > Custom Fonts.

   Fallback faces: Arial resized to the exact width and line height of
   Space Grotesk / IBM Plex Sans. Text keeps its size and line breaks
   while the real fonts load, so the page does not jump (CLS). */
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); font-weight: 400 600; size-adjust: 101.2%; ascent-override: 97.24%; descent-override: 28.85%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); font-weight: 700 900; size-adjust: 101.2%; ascent-override: 97.24%; descent-override: 28.85%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); font-weight: 300 500; size-adjust: 100.6%; ascent-override: 101.89%; descent-override: 27.34%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); font-weight: 600 900; size-adjust: 100.6%; ascent-override: 101.89%; descent-override: 27.34%; line-gap-override: 0%; }


/* 01  Variables ------------------------------------------------------ */

:root {
  --zl-text: #f3f3f4;
  --zl-heading: #fafafa;
  --zl-muted: #b9bbc0;
  --zl-red: #b73232;
  --zl-red-hover: #e85859;
  --zl-gold: #f2c230;
  --zl-gold-hover: #ffe06b;
  --zl-card: #111214;
  --zl-field: #17191c;
  --zl-border: #303034;
  --zl-line: rgba(255, 255, 255, .1);
  --zl-field-border: rgba(255, 255, 255, .14);
  --zl-stripe: rgba(255, 255, 255, .025);
  --zl-font: "IBM Plex Sans", "IBM Plex Sans Fallback", Arial, Helvetica, sans-serif;
  --zl-font-heading: "Space Grotesk", "Space Grotesk Fallback", "IBM Plex Sans", "IBM Plex Sans Fallback", Arial, sans-serif;
  --zl-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --zl-radius-box: 0;      /* square corners everywhere (site look) */
  --zl-radius-ui: 0;
  --zl-skew-btn: -6deg;
  --zl-skew-card: -1.25deg;

  --zl-cols: 5;            /* product grid columns on desktop */
  --zl-gap: 18px;

  /* Astra's light-theme fills for WooCommerce table heads, the cart
     totals heading, inputs and widgets (they showed as white bars). */
  --ast-wc-container-head-bg-color: transparent;
  --ast-global-dark-lfs: transparent;
  --ast-global-dark-bg-style: var(--zl-card);
  --ast-comment-inputs-background: var(--zl-field);
  --ast-widget-bg-color: var(--zl-field);
  /* Astra's #ddd line colour (checkout headings, tables, fields) */
  --ast-border-color: var(--zl-border);
}


/* 02  Typography and links ------------------------------------------ */

body,
button,
input,
select,
textarea,
.elementor,
.woocommerce {
  font-family: var(--zl-font);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title,
.woocommerce-products-header__title {
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Heading scale (smaller than before). ".elementor hX" beats the
   Elementor kit's global sizes. */
h1, .elementor h1 { font-size: clamp(1.9rem, 2.8vw, 2.5rem);   line-height: 1.15; }
h2, .elementor h2 { font-size: clamp(1.5rem, 2.1vw, 1.9rem);   line-height: 1.2; }
h3, .elementor h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem);   line-height: 1.3; }
h4, .elementor h4 { font-size: clamp(1.05rem, 1.2vw, 1.15rem); line-height: 1.35; }
h5, .elementor h5 { font-size: 1rem;    line-height: 1.4; }
h6, .elementor h6 { font-size: .875rem; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }

/* Elementor Heading and Product Title widgets: the same scale wins over
   sizes and fonts set inside each widget, so every page matches. */
html body:not(#zl-boost) .elementor-widget-heading h1.elementor-heading-title,
html body:not(#zl-boost) .elementor-widget-woocommerce-product-title .product_title,
html body:not(#zl-boost).single-product .product_title {
  font-family: var(--zl-font-heading);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

html body:not(#zl-boost) .elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--zl-font-heading);
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  line-height: 1.2;
}

html body:not(#zl-boost) .elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--zl-font-heading);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.3;
}

html body:not(#zl-boost) .elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--zl-font-heading);
  font-size: clamp(1.05rem, 1.2vw, 1.15rem);
  line-height: 1.35;
}

p,
li,
label,
.entry-content,
.elementor-widget-text-editor {
  color: var(--zl-text);
}

a {
  color: var(--zl-gold);
  transition: color .2s ease;
}

a:hover,
a:focus {
  color: var(--zl-gold-hover);
}

::selection {
  color: #111;
  background: var(--zl-gold);
}


/* 03  Astra header clean-up -----------------------------------------
   Hides Astra's search and header buttons. Elementor header elements
   are not targeted. */

.ast-header-search,
.ast-search-menu-icon,
.ast-builder-layout-element[data-section*="search"],
#masthead .ast-builder-button-wrap,
#ast-mobile-header .ast-builder-button-wrap {
  display: none !important;
}


/* 04  Buttons ------------------------------------------------------- */

.elementor-button,
.wp-element-button,
.ast-button,
.ast-custom-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
.woocommerce .woocommerce-form-login__submit,
.woocommerce .woocommerce-Button,
.woocommerce #place_order,
.zl-google-header__submit,
.zl-google-header__shop,
.zl-home-button,
.zl-category-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--zl-red) !important;
  border-radius: 0 !important;
  color: var(--zl-red) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--zl-font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
  transform: skewX(var(--zl-skew-btn));
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
  cursor: pointer;
}

.elementor-button:hover,
.wp-element-button:hover,
.ast-button:hover,
.ast-custom-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .checkout-button:hover,
.woocommerce .woocommerce-form-login__submit:hover,
.woocommerce .woocommerce-Button:hover,
.woocommerce #place_order:hover,
.zl-google-header__submit:hover,
.zl-google-header__shop:hover,
.zl-home-button:hover,
.zl-category-link:hover {
  border-color: var(--zl-red-hover) !important;
  color: var(--zl-red-hover) !important;
  background: transparent !important;
}

.elementor-button:focus-visible,
.wp-element-button:focus-visible,
.ast-button:focus-visible,
.ast-custom-button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce .checkout-button:focus-visible,
.woocommerce #place_order:focus-visible,
.zl-google-header__submit:focus-visible,
.zl-google-header__shop:focus-visible,
.zl-home-button:focus-visible,
.zl-category-link:focus-visible {
  outline: 2px solid var(--zl-gold);
  outline-offset: 3px;
}

/* Disabled buttons ("Warenkorb aktualisieren" before a change,
   variation button before a choice). */
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled[disabled] {
  opacity: .45;
  cursor: not-allowed;
}


/* 05  Form fields, Select2, quantity -------------------------------- */

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea,
.select2-container--default .select2-selection--single {
  border: 1px solid var(--zl-field-border);
  border-radius: var(--zl-radius-ui);
  color: var(--zl-text);
  background: var(--zl-field);
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--zl-gold);
  outline: none;
  box-shadow: 0 0 0 1px var(--zl-gold);
}

input::placeholder,
textarea::placeholder {
  color: var(--zl-muted);
  opacity: 1;
}

select option {
  color: var(--zl-text);
  background: var(--zl-field);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--zl-red);
}

/* Select2 (country / state on checkout). The dropdown is white by
   default, which made the light list text unreadable. */
.select2-container--default .select2-selection--single {
  height: auto;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--zl-text);
  line-height: 1.4;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--zl-muted);
}

.select2-dropdown {
  border: 1px solid var(--zl-field-border);
  color: var(--zl-text);
  background: var(--zl-field);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 0;
}

.select2-results__option {
  color: var(--zl-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  color: #111;
  background: var(--zl-gold);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: rgba(255, 255, 255, .06);
}

/* Quantity field */
.woocommerce .quantity .qty {
  width: 4.2em;
  min-height: 44px;
  padding: 6px 4px;
  text-align: center;
}

.woocommerce .quantity .minus,
.woocommerce .quantity .plus {
  border-color: var(--zl-field-border);
  color: var(--zl-text);
  background: var(--zl-field);
}

/* Field validation (checkout, account) */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection {
  border-color: var(--zl-red-hover);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: var(--zl-field-border);
}

.woocommerce form .form-row .required {
  color: var(--zl-red-hover);
  text-decoration: none;
}


/* 06  WooCommerce notices ------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
  border: 0;
  border-radius: var(--zl-radius-ui);
  color: var(--zl-text);
  background: var(--zl-card);
}

.woocommerce-message,
.woocommerce-info {
  box-shadow: inset 3px 0 0 var(--zl-gold);
}

.woocommerce-error {
  box-shadow: inset 3px 0 0 var(--zl-red);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--zl-gold);
}

.woocommerce-error::before {
  color: var(--zl-red-hover);
}

.woocommerce-error li {
  color: var(--zl-text);
}

/* The "Warenkorb anzeigen" button inside a notice sits on the right. */
.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
}


/* 07  Homepage hero and category cards ------------------------------ */

.zl-home-hero {
  color: var(--zl-text);
}

.zl-home-hero .zl-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.zl-home-hero .zl-home-button {
  min-height: 48px;
  padding: 12px 26px;
  letter-spacing: .02em;
}

.zl-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zl-gap);
}

.zl-category-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border: 1px solid var(--zl-border);
  border-radius: 0;
  color: var(--zl-text);
  background: var(--zl-card);
  transform: skewX(-2deg);
  transition: border-color .2s ease, transform .2s ease;
}

.zl-category-card > * {
  transform: skewX(2deg);
}

.zl-category-card:hover {
  transform: skewX(-2deg) translateY(-3px);
}

.zl-category-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

.zl-category-card p {
  margin: 0;
  color: var(--zl-muted);
  font-size: 14px;
  line-height: 1.6;
}

.zl-category-card .zl-category-link {
  align-self: flex-start;
  margin-top: 20px;
  padding: 9px 16px;
  font-size: 13px;
}


/* 08  Product grids --------------------------------------------------
   One selector covers every loop: shop, categories, Elementor
   "Products" and "Archive Products" widgets (both wrap the list in a
   div.woocommerce), related/upsell products and #zl-all-products.
   :is() carries the #id specificity, so Astra's floats/widths and
   Elementor's per-widget column counts are overridden without the old
   "html body" chains. Change --zl-cols to change the desktop columns. */

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--zl-cols), minmax(0, 1fr)) !important;
  gap: var(--zl-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products::before,
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products::after {
  display: none !important;
  content: none !important;
}

/* Card: angled outer shape, upright content */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product {
  display: flex !important;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  align-items: stretch;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow: hidden;
  border: 1px solid var(--zl-border) !important;
  border-radius: 0 !important;
  color: var(--zl-text);
  background: var(--zl-card) !important;
  text-align: center;
  transform: skewX(var(--zl-skew-card));
  transition: border-color .2s ease, transform .2s ease;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product > * {
  transform: skewX(calc(var(--zl-skew-card) * -1));
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product:hover {
  transform: skewX(var(--zl-skew-card)) translateY(-3px);
}

/* Gold corner tick, top right. On hover it lights up and glows
   (no red frame around the card). */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product {
  position: relative;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zl-gold);
  border-right: 2px solid var(--zl-gold);
  opacity: .55;
  pointer-events: none;
  transform: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

/* Astra wrappers: stack image and details at full width (this also
   covers the Elementor Archive Products widget). */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .astra-shop-thumbnail-wrap,
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .astra-shop-summary-wrap {
  width: 100% !important;
  flex: 0 0 auto !important;
}

/* Let the details column grow so the button sits at the bottom. */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .astra-shop-summary-wrap {
  display: flex;
  flex: 1 1 auto !important;
  flex-direction: column;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product img {
  display: block;
  width: 100% !important;
  height: 220px !important;
  max-height: 220px;
  margin: 0 auto 14px !important;
  object-fit: contain !important;
  object-position: center;
  background: transparent;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 0;
  overflow: hidden;
  color: var(--zl-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .ast-woo-product-category {
  color: var(--zl-muted);
  font-size: 12px;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .price {
  margin: 0 0 12px;
  color: var(--zl-gold);
  font-size: 15px;
  font-weight: 700;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .price del {
  color: var(--zl-muted);
  font-weight: 400;
  opacity: .8;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .price ins {
  text-decoration: none;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .star-rating {
  margin: 0 auto 8px;
  color: var(--zl-gold);
}

/* Sale badge: flat, angular */
.woocommerce span.onsale,
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .onsale {
  min-width: 0;
  min-height: 0;
  padding: 4px 10px;
  border-radius: 0;
  color: #fff;
  background: var(--zl-red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product .ast-on-card-button {
  display: none !important;
}

/* Loop button (add to cart, "Optionen wählen", "Weiterlesen") */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin: auto auto 0 !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  text-transform: uppercase;
  transform: skewX(var(--zl-skew-btn));
}


/* 09  Loop add-to-cart states ----------------------------------------
   Only the simple-product add-to-cart button gets the short label
   "Warenkorb". The old rule hid the text of *every* loop button, so
   "Optionen wählen" / "Weiterlesen" buttons rendered empty, and its
   ::after replaced WooCommerce's loading spinner and check mark, so
   clicking gave no visible feedback. */

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button {
  font-size: 0 !important;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before {
  content: "Warenkorb";
  font-size: 14px;
  color: inherit;
}

/* Remove WooCommerce/Astra's own icon-font ::after on loop buttons. */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::after {
  content: none;
  display: none;
}

/* Loading: dimmed label + spinner, no double clicks */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading {
  opacity: .75 !important;
  pointer-events: none;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before {
  content: "Wird hinzugefügt";
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::after {
  content: "";
  display: inline-block;
  position: static;
  width: 12px;
  height: 12px;
  margin: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  font-size: 0;
  animation: zl-spin .7s linear infinite;
}

/* Added: same red button, label gets a check mark */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added {
  animation: zl-pop .35s ease;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before {
  content: "\2713\00a0 Im Warenkorb";
}

/* "Warenkorb ansehen" link WooCommerce inserts after the button */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.added_to_cart {
  display: block;
  margin: 10px auto 0;
  padding: 0;
  color: var(--zl-gold);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  animation: zl-fade-in .3s ease;
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.added_to_cart:hover {
  color: var(--zl-gold-hover);
}

@keyframes zl-spin {
  to { transform: rotate(360deg); }
}

@keyframes zl-pop {
  0%   { transform: skewX(var(--zl-skew-btn)) scale(1); }
  50%  { transform: skewX(var(--zl-skew-btn)) scale(1.06); }
  100% { transform: skewX(var(--zl-skew-btn)) scale(1); }
}

@keyframes zl-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}


/* 10  Add-to-cart toast (shown by add-to-cart-notice.html) ------------- */

.zl-cart-toast {
  position: fixed;
  z-index: 99999;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 18px;
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius-ui);
  color: var(--zl-text);
  background: var(--zl-card);
  box-shadow: inset 3px 0 0 var(--zl-gold), 0 12px 32px rgba(0, 0, 0, .45);
  font-family: var(--zl-font);
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.zl-cart-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.zl-cart-toast strong {
  color: var(--zl-heading);
}

.zl-cart-toast a {
  flex: 0 0 auto;
  color: var(--zl-gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}


/* 11  Shop pages: frame + shop / archive -----------------------------
   Checked against the live markup (2026-10-31):
   - Shop and categories: Elementor Theme Builder archive template
     (.elementor-location-archive) with the Archive Title and Archive
     Products widgets.
   - Single product: Elementor template (.elementor-location-single),
     30/70 image/details row, then Related, then Short Description and
     Data Tabs.
   - Cart (/winkelwagen/) and checkout (/afrekenen/): Elementor page
     with the "WooCommerce Pages" widget (.elementor-widget-wc-elements),
     which prints the classic [woocommerce_cart] / [woocommerce_checkout]
     markup. Not the Elementor Cart/Checkout widgets, not blocks.
   All four share one 1200px column with 20px side gutters. */

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .single-product, .woocommerce-cart, .woocommerce-checkout) {
  --zl-page: 1200px;
}

/* Boxed Elementor containers in the page content (header/footer
   untouched). Full-width containers stay full width. */
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .single-product, .woocommerce-cart, .woocommerce-checkout) #content .e-con.e-con-boxed {
  --content-width: var(--zl-page);
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag, .tax-product_brand, .single-product, .woocommerce-cart, .woocommerce-checkout) #content .e-con.e-parent {
  --padding-left: 20px !important;
  --padding-right: 20px !important;
}

/* Cart and checkout sit in a full-width container: centre the shop
   markup itself in the 1200px column. */
:is(.woocommerce-cart, .woocommerce-checkout) .elementor-widget-wc-elements {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

:is(.woocommerce-cart, .woocommerce-checkout) .elementor-widget-wc-elements > .elementor-widget-container > .woocommerce,
:is(.woocommerce-cart, .woocommerce-checkout) #content .entry-content > .woocommerce {
  width: 100%;
  max-width: var(--zl-page);
  margin: 0 auto;
  padding: 48px 0 72px;
}

/* Page and section headings: red-gold underline (header/footer look) */
.elementor-location-archive .elementor-widget-theme-archive-title .elementor-heading-title,
.woocommerce-products-header__title,
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 12px;
  color: var(--zl-heading);
}

.elementor-location-archive .elementor-widget-theme-archive-title .elementor-heading-title::after,
.woocommerce-products-header__title::after,
.related.products > h2::after,
.upsells.products > h2::after,
.cross-sells > h2::after,
.woocommerce-cart .cart_totals > h2::after,
.woocommerce-checkout #customer_details h3::after,
.woocommerce-checkout #order_review_heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--zl-red) 0 60%, var(--zl-gold) 60%);
  box-shadow: 0 0 10px rgba(232, 88, 89, .35);
}

.elementor-location-archive .elementor-widget-theme-archive-title {
  margin-top: 40px;
}

/* Toolbar: result count left, sorting right, grid below */
.elementor-widget-wc-archive-products > .woocommerce,
.elementor-widget-wc-archive-products .elementor-widget-container > .woocommerce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.elementor-widget-wc-archive-products .woocommerce > :not(.woocommerce-result-count):not(.woocommerce-ordering) {
  flex: 0 0 100%;
  max-width: 100%;
}

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  margin: 0;
  float: none;
  color: var(--zl-muted);
  font-family: var(--zl-font-mono);
  font-size: 13px;
  letter-spacing: .02em;
}

.woocommerce .woocommerce-ordering {
  margin: 0;
  float: none;
}

.woocommerce .woocommerce-ordering select {
  min-height: 42px;
  padding: 6px 36px 6px 12px;
  border-radius: 0;
  font-size: 14px;
}

/* Astra makes the sort dropdown transparent and borderless, so it read
   as plain text. Give it the field look with a gold arrow. */
html body .woocommerce .woocommerce-ordering select.orderby {
  border: 1px solid var(--zl-field-border) !important;
  color: var(--zl-text);
  background: var(--zl-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f2c230' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

html body .woocommerce .woocommerce-ordering select.orderby:hover {
  border-color: var(--zl-gold) !important;
}

.elementor-widget-wc-archive-products ul.products {
  margin-top: 10px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--zl-line);
}

.woocommerce .woocommerce-breadcrumb {
  color: var(--zl-muted);
  font-size: 13px;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--zl-muted);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--zl-gold);
}

.term-description,
.woocommerce-products-header .term-description p {
  color: var(--zl-muted);
}

/* Pagination: square, slanted cells */
.woocommerce nav.woocommerce-pagination {
  margin-top: 36px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--zl-border);
  border-radius: 0;
  color: var(--zl-text);
  background: var(--zl-card);
  font-family: var(--zl-font-heading);
  font-weight: 700;
  line-height: 1;
  transform: skewX(var(--zl-skew-btn));
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  border-color: var(--zl-red);
  color: var(--zl-red-hover);
  background: var(--zl-card);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  border-color: var(--zl-red);
  color: #fff;
  background: var(--zl-red);
}

.woocommerce-info.woocommerce-no-products-found {
  margin-top: 20px;
}


/* 12  Single product (Elementor Pro template) -----------------------
   The template has no .summary column; these rules target its widgets
   (Product Images, Title, Price, Add to Cart, HTML trust bar, Related,
   Short Description, Data Tabs). Astra's default template is covered
   as a fallback. */

/* Order: product row, description + tabs, then related products.
   (In the template, Related sits above the description.) */
.elementor-location-single {
  display: flex;
  flex-direction: column;
}

.elementor-location-single > .e-con:has(.elementor-widget-woocommerce-product-related),
.elementor-location-single > .e-con:has(.elementor-widget-woocommerce-product-upsell) {
  order: 9;
  margin-bottom: 72px;
}

/* Product row: image 40%, details 60%, 48px gap */
@media (min-width: 768px) {
  .elementor-location-single > .e-con:has(.elementor-widget-woocommerce-product-images) > .e-con-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: 48px;
  }

  .elementor-location-single > .e-con:has(.elementor-widget-woocommerce-product-images) > .e-con-inner > .e-con {
    width: auto !important;
    max-width: none;
    margin: 0 !important;
  }
}

.elementor-location-single > .e-con:has(.elementor-widget-woocommerce-product-images) > .e-con-inner > .e-con {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
}

.single-product div.product .summary.entry-summary {
  padding: 28px;
  border: 1px solid var(--zl-border);
  border-radius: 0;
  color: var(--zl-text);
  background: var(--zl-card);
}

/* Gallery: framed panel with soft red glow, full column width */
.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery,
.single-product div.product div.images.woocommerce-product-gallery {
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  padding: clamp(20px, 3.2vw, 40px) !important;
  float: none;
  border: 1px solid var(--zl-border);
  border-radius: 0;
  background:
    linear-gradient(90deg, var(--zl-red) 0 60%, var(--zl-gold) 60%) top / 100% 2px no-repeat,
    radial-gradient(60% 55% at 50% 45%, rgba(232, 88, 89, .14), transparent 72%),
    var(--zl-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    4px 4px 0 #1d1012,
    12px 20px 36px -16px rgba(0, 0, 0, .9);
}

.single-product .woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image {
  background: transparent;
}

.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto;
  flex: 1 1 0;
  max-width: 84px;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  border: 1px solid var(--zl-border);
  border-radius: 0;
  opacity: .6;
  transition: opacity .2s ease, border-color .2s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  border-color: var(--zl-red);
  opacity: 1;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  border-radius: 0;
  background: var(--zl-card);
}

/* Details column: title, price, divider */
.elementor-location-single .elementor-widget-woocommerce-product-title {
  margin-bottom: 14px;
}

.single-product .product_title,
.elementor-widget-woocommerce-product-title .elementor-heading-title {
  margin: 0;
  color: var(--zl-heading);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.elementor-widget-woocommerce-product-price .price {
  margin: 0;
  color: var(--zl-gold) !important;
  font-family: var(--zl-font-heading);
  font-weight: 700;
}

.elementor-widget-woocommerce-product-price .price,
.woocommerce div.product .summary p.price {
  display: block;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--zl-line);
  font-size: clamp(1.5rem, 2vw, 1.85rem) !important;
  line-height: 1.2;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.elementor-widget-woocommerce-product-price .price del {
  color: var(--zl-muted);
  font-size: .7em;
  font-weight: 400;
  opacity: .8;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.elementor-widget-woocommerce-product-price .price ins {
  text-decoration: none;
}

.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce p.stars a {
  color: var(--zl-gold);
}

.woocommerce .woocommerce-review-link {
  color: var(--zl-muted);
}

.product_meta,
.elementor-widget-woocommerce-product-meta .product_meta {
  color: var(--zl-muted);
  font-size: 14px;
}

.product_meta a {
  color: var(--zl-gold);
}

.woocommerce-product-details__short-description > :last-child {
  margin-bottom: 0;
}

/* Stock */
.woocommerce div.product .stock,
.elementor-widget-woocommerce-product-stock .stock {
  font-weight: 700;
}

.woocommerce div.product .stock.in-stock {
  color: #6fcf8a;
}

.woocommerce div.product .stock.out-of-stock {
  color: var(--zl-red-hover);
}

/* Add to cart row: one square quantity group + slanted button */
.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form),
.elementor-add-to-cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 6px 0 0;
}

/* Woo's clearfix pseudo-elements would become empty flex items */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
  display: none;
}

.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  align-items: stretch;
  margin: 0 !important;
  float: none;
  border: 1px solid var(--zl-field-border);
  background: var(--zl-field);
}

.woocommerce div.product form.cart .quantity .qty,
.woocommerce-cart table.cart .quantity .qty {
  width: 3.4em;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--zl-font-mono);
  font-weight: 500;
  text-align: center;
  -moz-appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.woocommerce .quantity .minus,
.woocommerce .quantity .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--zl-text) !important;
  background: transparent !important;
  font-family: var(--zl-font-heading);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.woocommerce .quantity .minus {
  border-right: 1px solid var(--zl-line) !important;
}

.woocommerce .quantity .plus {
  border-left: 1px solid var(--zl-line) !important;
}

.woocommerce .quantity .minus:hover,
.woocommerce .quantity .plus:hover {
  color: var(--zl-red-hover) !important;
  background: rgba(183, 50, 50, .08) !important;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
  float: none;
  margin: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button.loading {
  opacity: .7;
  pointer-events: none;
}

/* Trust bar under the button: square cards with the depth edge
   (the widget's own  sets 12px corners) */
.elementor-location-single .elementor-widget-html .zl-trust-wrap,
.single-product .zl-trust-wrap {
  margin-top: 10px;
}

html body .zl-trust .zl-trust__item {
  position: relative;
  border-color: var(--zl-border);
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    3px 3px 0 #1d1012;
}

html body .zl-trust .zl-trust__item:hover {
  border-color: var(--zl-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    3px 3px 0 #2a1214,
    0 14px 30px -16px rgba(0, 0, 0, .85);
}

/* Hover: gold corner tick, top right (same as the product cards) */
html body .zl-trust .zl-trust__item::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zl-gold, #f2c230);
  border-right: 2px solid var(--zl-gold, #f2c230);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

html body .zl-trust .zl-trust__item:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

/* Variations */
.woocommerce div.product form.cart .variations {
  width: 100%;
  margin-bottom: 14px;
  border: 0;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  padding: 6px 10px 6px 0;
  border: 0;
  background: transparent;
  vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
  color: var(--zl-heading);
  font-weight: 700;
}

.woocommerce div.product form.cart .variations select {
  min-width: 200px;
  min-height: 44px;
  padding: 8px 12px;
}

.woocommerce div.product form.cart .reset_variations {
  margin-left: 8px;
  color: var(--zl-muted);
  font-size: 13px;
}

.woocommerce div.product .woocommerce-variation-price .price {
  display: block;
  margin: 6px 0 12px;
}

/* Description section: short description (.zl-specs) and tabs */
.elementor-location-single > .e-con:has(.elementor-widget-woocommerce-product-short-description) {
  margin-top: 64px !important;
}

/* Product data tabs: square panel with red-gold top line */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 8px;
  padding: 28px 32px 32px;
  border: 1px solid var(--zl-border);
  border-radius: 0;
  color: var(--zl-text);
  background:
    linear-gradient(90deg, var(--zl-red) 0 60%, var(--zl-gold) 60%) top / 100% 2px no-repeat,
    var(--zl-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    4px 4px 0 #1d1012,
    12px 20px 36px -16px rgba(0, 0, 0, .9);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 26px;
  padding: 0;
  overflow: visible;
  border-bottom: 1px solid var(--zl-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
  border: 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  margin-bottom: -1px;
  padding: 10px 18px;
  border-bottom: 2px solid transparent;
  color: var(--zl-muted);
  font-family: var(--zl-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--zl-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--zl-red);
  color: var(--zl-heading);
}

.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--zl-text);
  background: transparent;
}

/* The tabs widget repeats the tab name as an H2 in the panel */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  display: none;
}

/* Additional information table */
.woocommerce table.woocommerce-product-attributes {
  border: 1px solid var(--zl-border);
  border-collapse: collapse;
}

.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--zl-border);
  color: var(--zl-text);
  background: transparent;
  font-style: normal;
}

.woocommerce table.woocommerce-product-attributes th {
  width: 35%;
  color: var(--zl-muted);
}

.woocommerce table.woocommerce-product-attributes tr:nth-child(even) th,
.woocommerce table.woocommerce-product-attributes tr:nth-child(even) td {
  background: var(--zl-stripe);
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: 1px solid var(--zl-border);
  border-radius: 0;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
  border: 0;
  background: transparent;
}

.woocommerce #reviews #comments ol.commentlist li .meta,
.woocommerce #review_form #respond .comment-notes {
  color: var(--zl-muted);
}

/* Related / upsells: room for the cards' depth edge */
.related.products,
.upsells.products {
  padding-right: 8px;
}


/* 13  Mini cart (Elementor Menu Cart) -------------------------------
   The off-canvas cart is white by default; with the light global text
   colour it was unreadable. */

.elementor-menu-cart__container .elementor-menu-cart__main {
  border-left: 1px solid var(--zl-border);
  color: var(--zl-text);
  background: var(--zl-card);
}

.elementor-menu-cart__product,
.elementor-menu-cart__subtotal,
.elementor-menu-cart__products {
  border-color: var(--zl-border) !important;
}

.elementor-menu-cart__product-name a,
.elementor-menu-cart__subtotal {
  color: var(--zl-text);
}

.elementor-menu-cart__product-price,
.elementor-menu-cart__subtotal .amount {
  color: var(--zl-gold);
}

.elementor-menu-cart__close-button,
.elementor-menu-cart__close-button-custom {
  color: var(--zl-text);
}

.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after {
  background: var(--zl-text);
}

.elementor-menu-cart__product-remove {
  border-color: var(--zl-muted);
}

.elementor-menu-cart__product-remove::before,
.elementor-menu-cart__product-remove::after {
  background: var(--zl-muted);
}

.elementor-menu-cart__footer-buttons {
  gap: 10px;
}

.elementor-menu-cart__toggle .elementor-button-icon[data-counter]::before,
.elementor-menu-cart__toggle .elementor-button-icon-qty {
  color: #111;
  background: var(--zl-gold);
}


/* 14  Cart page ------------------------------------------------------
   Classic cart markup from the "WooCommerce Pages" widget. Desktop:
   items left, totals right (sticky). The Elementor Cart widget's CSS
   variables are kept below in case the page is switched to it. */

.elementor-widget-woocommerce-cart,
.elementor-widget-woocommerce-checkout-page {
  --sections-background-color: var(--zl-card);
  --sections-border-color: var(--zl-border);
  --sections-border-type: solid;
  --sections-border-width: 1px;
  --sections-border-radius: 0;
  --sections-title-color: var(--zl-heading);
  --sections-descriptions-color: var(--zl-muted);
  --forms-fields-normal-color: var(--zl-text);
  --forms-fields-focus-color: var(--zl-text);
  --forms-fields-background-color: var(--zl-field);
  --forms-fields-border-color: var(--zl-field-border);
  --forms-fields-border-radius: 0;
  --forms-labels-color: var(--zl-text);
  --order-summary-items-color: var(--zl-text);
  --order-summary-items-divider-color: var(--zl-line);
  --tabs-normal-background-color: var(--zl-field);
  --tabs-normal-border-color: var(--zl-border);
  --tabs-hover-border-color: var(--zl-red);
  --tabs-active-border-color: var(--zl-red);
  --links-normal-color: var(--zl-gold);
  --links-hover-color: var(--zl-gold-hover);
}

/* Shared panel look: cart table, totals, checkout boxes, payment,
   coupon/login forms. Square, red-gold top line, solid depth edge. */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--zl-border) !important;
  border-radius: 0 !important;
  color: var(--zl-text);
  background:
    linear-gradient(90deg, var(--zl-red) 0 60%, var(--zl-gold) 60%) top / 100% 2px no-repeat,
    var(--zl-card) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    4px 4px 0 #1d1012,
    12px 20px 36px -16px rgba(0, 0, 0, .9);
}

/* Shared table look (cart, checkout review, order details) */
.woocommerce table.shop_table {
  margin: 0;
  border: 1px solid var(--zl-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  color: var(--zl-text);
  background: var(--zl-card);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--zl-line);
  color: var(--zl-text);
  background: transparent;
  vertical-align: middle;
}

.woocommerce table.shop_table thead,
.woocommerce table.shop_table thead tr {
  background: rgba(255, 255, 255, .02) !important;
}

.woocommerce table.shop_table thead th {
  padding-top: 16px;
  border-top: 0;
  color: var(--zl-muted);
  font-family: var(--zl-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  font-weight: 700;
}

.woocommerce table.shop_table .amount {
  color: var(--zl-text);
  font-family: var(--zl-font-heading);
  font-weight: 600;
}

.woocommerce table.shop_table .order-total .amount,
.woocommerce .cart_totals .order-total .amount {
  color: var(--zl-gold);
  font-size: 1.25em;
  font-weight: 700;
}

/* Layout: items | totals */
.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 0 32px;
}

.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals {
  display: contents;
}

.woocommerce-cart .woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
  margin: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  grid-column: 2;
  grid-row: span 2;
  position: sticky;
  top: 24px;
  width: auto !important;
  margin: 0;
  padding: 26px 24px 24px;
  float: none !important;
}

.woocommerce-cart .cart-collaterals .cross-sells {
  grid-column: 1;
  width: auto !important;
  margin-top: 48px;
  float: none !important;
}

/* Cart items */
.woocommerce-cart table.cart .product-thumbnail {
  width: 96px;
}

.woocommerce-cart table.cart img {
  width: 72px !important;
  height: 72px;
  padding: 4px;
  border: 1px solid var(--zl-line);
  background: rgba(255, 255, 255, .02);
  object-fit: contain;
}

.woocommerce-cart table.cart .product-name a {
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-cart table.cart .product-name a:hover {
  color: var(--zl-gold);
}

.woocommerce-cart table.cart .product-subtotal .amount {
  color: var(--zl-gold);
}

.woocommerce-cart table.cart .quantity {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  border: 1px solid var(--zl-field-border);
  background: var(--zl-field);
}

.woocommerce-cart table.cart .product-remove {
  width: 44px;
  padding-right: 0;
}

.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--zl-border);
  border-radius: 0 !important;
  color: var(--zl-red-hover) !important;
  background: transparent;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transform: skewX(var(--zl-skew-btn));
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.woocommerce a.remove:hover {
  border-color: var(--zl-red);
  color: #fff !important;
  background: var(--zl-red);
}

/* Coupon + update row */
.woocommerce-cart table.cart td.actions {
  padding: 18px 16px;
  background: rgba(255, 255, 255, .015);
}

.woocommerce-cart table.cart td.actions::after {
  content: "";
  display: table;
  clear: both;
}

.woocommerce-cart table.cart td.actions .coupon {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  margin: 0 24px 0 0;
  float: left;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
  width: 190px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
}

/* Smaller, calmer buttons in this row so both fit side by side, and a
   clear gap if they ever wrap */
html body:not(#zl-boost) .woocommerce-cart table.cart td.actions .button {
  min-height: 44px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  white-space: nowrap;
}

.woocommerce-cart table.cart td.actions > .button {
  float: right;
  margin: 0;
}

/* "Warenkorb aktualisieren" only shows once a quantity has changed
   (WooCommerce enables it then). Before that it was a faded button
   crowding the coupon field. */
.woocommerce-cart table.cart td.actions > button[name="update_cart"]:disabled {
  display: none !important;
}

@media (max-width: 1100px) {
  .woocommerce-cart table.cart td.actions .coupon {
    float: none;
    margin: 0 0 14px;
  }
}

@media (max-width: 767px) {
  .woocommerce-cart table.cart td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .woocommerce-cart table.cart td.actions .coupon .input-text {
    flex: 1 1 100%;
    width: 100%;
  }

  html body:not(#zl-boost) .woocommerce-cart table.cart td.actions .button {
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    white-space: normal;
  }

  .woocommerce-cart table.cart td.actions > .button {
    float: none;
  }
}

/* Totals box. Astra pulls this heading 20px out to both sides and
   gives it a light grey line (.cart-collaterals .cart_totals > h2), so
   it sat on the box edge; the longer selector keeps it inside. */
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-cart .cart-collaterals .cross-sells > h2 {
  margin: 0 0 18px;
  border-bottom: 0;
  background: none;
}

.woocommerce-cart .cart_totals > h2 {
  margin: 0 0 18px;
  padding: 0 0 12px;
  border: 0;
  background: none;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.woocommerce-cart .cart_totals table.shop_table {
  border: 0 !important;
  background: transparent;
  box-shadow: none;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 13px 0;
}

.woocommerce-cart .cart_totals table.shop_table th {
  width: 40%;
  color: var(--zl-muted);
  font-weight: 500;
}

.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
}

.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td {
  border-top: 0;
}

.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
  padding-top: 18px;
  border-top: 1px solid var(--zl-border);
  color: var(--zl-heading);
}

.woocommerce ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul#shipping_method li label,
.woocommerce-shipping-destination {
  color: var(--zl-muted);
  font-size: 14px;
}

.woocommerce-shipping-calculator .shipping-calculator-button {
  color: var(--zl-gold);
  font-size: 14px;
}

.woocommerce .wc-proceed-to-checkout {
  margin-top: 20px;
  padding: 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  width: 100%;
  min-height: 52px;
  margin: 0;
  font-size: 16px !important;
}

/* Empty cart: one centred panel */
.woocommerce-cart .wc-empty-cart-message {
  max-width: 640px;
  margin: 0 auto;
}

.woocommerce-cart .wc-empty-cart-message .cart-empty.woocommerce-info {
  margin: 0;
  padding: 120px 32px 30px;
  border: 1px solid var(--zl-border);
  border-bottom: 0;
  color: var(--zl-heading);
  background:
    linear-gradient(90deg, var(--zl-red) 0 60%, var(--zl-gold) 60%) top / 100% 2px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e85859' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.4a1.6 1.6 0 0 0 1.6-1.2l1.6-6.8H6.2'/%3E%3C/svg%3E") center 36px / 56px 56px no-repeat,
    radial-gradient(50% 60% at 50% 30%, rgba(232, 88, 89, .12), transparent 70%),
    var(--zl-card);
  box-shadow: 4px 4px 0 #1d1012;
  font-family: var(--zl-font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
}

.woocommerce-cart .wc-empty-cart-message .cart-empty.woocommerce-info::before {
  display: none;
}

/* position: relative paints this half over the shadow of the half
   above, so the two read as one panel with no seam line */
.woocommerce-cart .return-to-shop {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 6px 32px 36px;
  border: 1px solid var(--zl-border);
  border-top: 0;
  background: var(--zl-card);
  box-shadow:
    4px 4px 0 #1d1012,
    12px 20px 36px -16px rgba(0, 0, 0, .9);
  text-align: center;
}

.woocommerce-cart .return-to-shop .button {
  margin: 0;
}


/* 15  Checkout page --------------------------------------------------
   Classic checkout. Desktop: details left, "Deine Bestellung" with
   payment right (sticky). */

.woocommerce-checkout form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 0 32px;
}

.woocommerce-checkout form.checkout.woocommerce-checkout::before,
.woocommerce-checkout form.checkout.woocommerce-checkout::after {
  display: none;
}

.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.woocommerce-checkout #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: auto !important;
  margin: 0;
  padding: 28px;
  float: none !important;
}

.woocommerce-checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  margin: 0 0 18px;
  padding: 0 0 12px !important;
  float: none !important;
  border: 0 !important;
  background: none !important;
}

.woocommerce-checkout #order_review {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  position: sticky;
  top: 24px;
  width: auto !important;
  margin: 0;
  padding: 24px !important;
  float: none !important;
}

/* Billing / shipping columns stacked inside the details box */
.woocommerce-checkout #customer_details.col2-set .col-1,
.woocommerce-checkout #customer_details.col2-set .col-2 {
  width: 100% !important;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none !important;
}

.woocommerce-checkout #customer_details.col2-set .col-2 {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--zl-line);
}

.woocommerce-checkout #customer_details .col-2 > div {
  width: 100%;
  float: none;
  clear: both;
}

.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  margin-top: 20px;
}

.woocommerce-checkout #customer_details.col2-set::before,
.woocommerce-checkout #customer_details.col2-set::after {
  display: none;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  color: var(--zl-heading);
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.woocommerce-checkout #customer_details h3 {
  margin-top: 0;
}

.woocommerce-checkout #ship-to-different-address {
  padding-bottom: 0;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}

.woocommerce-checkout #ship-to-different-address::after {
  display: none;
}

/* Fields: two per row where Woo says so */
/* Astra's ".woocommerce form .form-row textarea / select" sets a light
   grey #ddd border; keep the dark field border and gold focus. */
html body .woocommerce form .form-row :is(textarea, select) {
  border-color: var(--zl-field-border);
}

html body .woocommerce form .form-row :is(textarea, select):focus {
  border-color: var(--zl-gold);
}

/* Payment method description: Astra paints it light grey (#efefef)
   with a more specific selector, which made the text unreadable. */
html body.woocommerce-checkout #payment div.payment_box {
  color: var(--zl-muted);
  background: var(--zl-card) !important;
}

html body.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

.woocommerce-checkout #payment input.input-radio {
  accent-color: var(--zl-red);
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4%;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
  width: 100%;
  float: none;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last {
  width: 48%;
}

.woocommerce form .form-row {
  margin: 0 0 16px;
  padding: 0;
}

.woocommerce form .form-row label {
  margin-bottom: 6px;
  color: var(--zl-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-selection {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 0 !important;
}

.woocommerce form .form-row .select2-selection {
  padding: 0 4px;
}

.woocommerce form .form-row textarea.input-text {
  min-height: 110px;
}

.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container {
  width: 100% !important;
}

.woocommerce form .form-row .optional {
  color: var(--zl-muted);
  font-weight: 400;
}

/* Coupon / login toggles and their forms */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  margin-bottom: 18px;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  margin: 0 0 24px;
  padding: 22px;
}

.woocommerce form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.woocommerce form.checkout_coupon[style*="none"] {
  display: none;
}

.woocommerce form.checkout_coupon > p:not(.form-row) {
  flex: 0 0 100%;
  margin: 0;
  color: var(--zl-muted);
}

.woocommerce form.checkout_coupon .form-row {
  margin: 0;
}

/* Order review table inside its box */
.woocommerce-checkout #order_review table.shop_table {
  border: 0 !important;
  background: transparent;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding: 12px 0;
}

.woocommerce-checkout #order_review table.shop_table thead th {
  padding-top: 0;
}

.woocommerce-checkout #order_review table.shop_table th:last-child,
.woocommerce-checkout #order_review table.shop_table td:last-child {
  text-align: right;
}

.woocommerce-checkout #order_review td.product-name {
  display: table-cell;
  color: var(--zl-text);
  font-weight: 500;
}

.woocommerce-checkout #order_review .product-quantity {
  color: var(--zl-muted);
  font-family: var(--zl-font-mono);
  font-weight: 500;
}

.woocommerce-checkout #order_review tfoot th {
  color: var(--zl-muted);
  font-weight: 500;
}

.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td {
  padding-top: 16px;
  border-top: 1px solid var(--zl-border);
  color: var(--zl-heading);
  font-weight: 700;
}

/* Payment */
.woocommerce-checkout #payment {
  margin-top: 22px;
  border: 1px solid var(--zl-border);
  border-radius: 0;
  color: var(--zl-text);
  background: var(--zl-field);
}

.woocommerce-checkout #payment ul.payment_methods {
  margin: 0;
  padding: 18px 18px 8px;
  border-bottom: 1px solid var(--zl-line);
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0 0 10px;
  color: var(--zl-text);
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 700;
}

.woocommerce-checkout #payment div.payment_box {
  margin: 10px 0 4px !important;
  padding: 14px 16px !important;
  border-radius: 0;
  color: var(--zl-muted);
  background: var(--zl-card) !important;
  box-shadow: inset 3px 0 0 var(--zl-gold);
  font-size: 14px;
}

.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

.woocommerce-checkout #payment div.payment_box p {
  color: var(--zl-muted);
}

.woocommerce-checkout #payment div.form-row.place-order {
  margin: 0;
  padding: 16px 18px 20px !important;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper:empty {
  display: none;
}

.woocommerce-terms-and-conditions-wrapper,
.woocommerce-privacy-policy-text p {
  color: var(--zl-muted);
  font-size: 13px;
}

.woocommerce-terms-and-conditions {
  border: 1px solid var(--zl-border) !important;
  background: var(--zl-field) !important;
  box-shadow: none !important;
}

.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  display: flex !important;
  width: calc(100% - 12px) !important;   /* the slant needs room on both sides */
  margin-right: auto !important;
  margin-left: auto !important;
  min-height: 52px;
  margin-top: 12px;
  margin-bottom: 0 !important;
  float: none;
  font-size: 15px !important;
  white-space: normal;
}

.woocommerce-checkout .blockUI.blockOverlay {
  background: rgba(17, 18, 20, .7) !important;
}

/* Cart and checkout stack below Astra's 921px breakpoint */
@media (max-width: 921px) {
  .woocommerce-cart .woocommerce:has(> .woocommerce-cart-form),
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-cart .cart-collaterals .cart_totals,
  .woocommerce-cart .cart-collaterals .cross-sells,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    margin-top: 28px;
  }

  .woocommerce-checkout #order_review_heading {
    margin-top: 40px !important;
  }

  :is(.woocommerce-cart, .woocommerce-checkout) .elementor-widget-wc-elements > .elementor-widget-container > .woocommerce,
  :is(.woocommerce-cart, .woocommerce-checkout) #content .entry-content > .woocommerce {
    padding: 28px 0 48px;
  }
}


/* 16  Thank-you page (order received) ------------------------------- */

.woocommerce-order {
  color: var(--zl-text);
}

.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-notice--success {
  margin: 0 0 24px;
  padding: 18px 22px;
  border-radius: var(--zl-radius-ui);
  color: var(--zl-heading);
  background: var(--zl-card);
  box-shadow: inset 3px 0 0 var(--zl-gold);
  font-size: 1.1rem;
  font-weight: 700;
}

.woocommerce-order .woocommerce-thankyou-order-failed {
  padding: 18px 22px;
  border-radius: var(--zl-radius-ui);
  background: var(--zl-card);
  box-shadow: inset 3px 0 0 var(--zl-red);
}

/* Overview strip: order no., date, total, payment method */
.woocommerce ul.order_details,
.woocommerce .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  margin: 0 0 28px;
  padding: 0;
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius-box);
  overflow: hidden;
  list-style: none;
  background: var(--zl-card);
}

.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after {
  display: none;
}

.woocommerce ul.order_details li {
  float: none;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--zl-line);
  color: var(--zl-muted);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
}

.woocommerce ul.order_details li:last-child {
  border-right: 0;
}

.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 4px;
  color: var(--zl-heading);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

/* Bank transfer details */
.woocommerce-bacs-bank-details {
  margin-bottom: 28px;
}

.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading,
.woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
  color: var(--zl-heading);
}

/* Order details + customer details */
.woocommerce-order-details,
.woocommerce-customer-details {
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius-box);
  color: var(--zl-text);
  background: var(--zl-card);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  margin-top: 0;
  font-size: 1.25rem;
}

.woocommerce-order-details table.shop_table {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.woocommerce-order-details table.shop_table th:first-child,
.woocommerce-order-details table.shop_table td:first-child {
  padding-left: 0;
}

.woocommerce-order-details table.shop_table th:last-child,
.woocommerce-order-details table.shop_table td:last-child {
  padding-right: 0;
}

.woocommerce-customer-details address {
  padding: 16px;
  border: 1px solid var(--zl-line);
  border-radius: var(--zl-radius-ui);
  color: var(--zl-text);
  font-style: normal;
  line-height: 1.7;
}

.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
  color: var(--zl-muted);
}


/* 17  WooCommerce Cart & Checkout blocks (fallback) ------------------
   Only applies if the cart/checkout pages use the block editor
   versions instead of the shortcode or Elementor widgets. */

.wc-block-components-button:not(.is-link) {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 15px;
  text-transform: uppercase;
  border: 1px solid var(--zl-red) !important;
  border-radius: 0 !important;
  color: var(--zl-red) !important;
  background: transparent !important;
  font-weight: 700;
  transform: skewX(var(--zl-skew-btn));
}

.wc-block-components-button:not(.is-link):hover {
  border-color: var(--zl-red-hover) !important;
  color: var(--zl-red-hover) !important;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
  border-color: var(--zl-field-border) !important;
  border-radius: var(--zl-radius-ui) !important;
  color: var(--zl-text) !important;
  background: var(--zl-field) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label {
  color: var(--zl-muted) !important;
}

.wc-block-cart .wc-block-cart__totals-title,
.wc-block-components-totals-item,
.wc-block-components-product-name,
.wc-block-components-checkout-step__title {
  color: var(--zl-text);
}

.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-cart-items td,
.wc-block-cart-items th {
  border-color: var(--zl-line) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--zl-gold);
}

.wc-block-components-radio-control--highlight-checked,
.wc-block-components-radio-control-accordion-option {
  border-color: var(--zl-border) !important;
  box-shadow: none !important;
}


/* 18  Product copy: .zl-specs (short description) ------------------- */

.zl-specs {
  margin: 18px 0 22px;
  color: var(--zl-text);
  font-family: var(--zl-font);
}

.zl-specs .zl-specs__intro {
  margin: 0 0 18px;
  color: var(--zl-text);
  font-size: 15px;
  line-height: 1.65;
}

.zl-specs .zl-specs__title {
  display: inline-block;
  margin: 0 0 12px;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--zl-red);
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zl-specs .zl-specs__table {
  width: 100%;
  margin: 0;
  border: 1px solid var(--zl-border);
  border-collapse: collapse;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
}

.zl-specs .zl-specs__table th,
.zl-specs .zl-specs__table td {
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--zl-border);
  background: transparent;
  text-align: left;
  vertical-align: top;
}

.zl-specs .zl-specs__table tr:last-child th,
.zl-specs .zl-specs__table tr:last-child td {
  border-bottom: 0;
}

.zl-specs .zl-specs__table tr:nth-child(even) {
  background: var(--zl-stripe);
}

.zl-specs .zl-specs__table th {
  width: 40%;
  color: var(--zl-muted);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--zl-red);
}

.zl-specs .zl-specs__table td {
  color: var(--zl-text);
  font-family: var(--zl-font-mono);
  font-size: 13.5px;
  font-weight: 500;
}

.zl-specs .zl-specs__note {
  margin: 10px 0 0;
  color: var(--zl-muted);
  font-size: 12px;
  line-height: 1.5;
}


/* 19  Product copy: .zl-longdesc (description tab) ------------------ */

.zl-longdesc {
  max-width: 860px;
  color: var(--zl-text);
  font-family: var(--zl-font);
  font-size: 16px;
  line-height: 1.75;
}

.zl-longdesc > :first-child {
  margin-top: 0;
}

.zl-longdesc h2 {
  position: relative;
  margin: 44px 0 16px;
  padding-left: 16px;
  color: var(--zl-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.25;
}

.zl-longdesc h2::before {
  content: "";
  position: absolute;
  top: .15em;
  bottom: .15em;
  left: 0;
  width: 4px;
  background: var(--zl-red);
  transform: skewX(var(--zl-skew-btn));
}

.zl-longdesc h3 {
  margin: 28px 0 10px;
  color: var(--zl-gold);
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.3;
}

.zl-longdesc p {
  margin: 0 0 16px;
  color: var(--zl-text);
}

.zl-longdesc strong {
  color: var(--zl-heading);
  font-weight: 700;
}

.zl-longdesc ul,
.zl-longdesc ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.zl-longdesc li {
  margin: 0 0 8px;
  padding-left: 4px;
  color: var(--zl-text);
}

.zl-longdesc ul li::marker {
  color: var(--zl-red);
}

.zl-longdesc ol li::marker {
  color: var(--zl-gold);
  font-weight: 700;
}

.zl-longdesc .zl-longdesc__table {
  width: 100%;
  margin: 8px 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.zl-longdesc table {
  width: 100%;
  margin: 0;
  border: 1px solid var(--zl-border);
  border-collapse: collapse;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
}

/* Minimum width only inside the scroll wrapper, so an unwrapped table
   can never push the page sideways on phones. */
.zl-longdesc .zl-longdesc__table table {
  min-width: 520px;
}

.zl-longdesc th,
.zl-longdesc td {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--zl-border);
  background: transparent;
  color: var(--zl-text);
  text-align: left;
  vertical-align: top;
}

.zl-longdesc thead th {
  border-bottom: 2px solid var(--zl-red);
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.zl-longdesc tbody tr:nth-child(even) {
  background: var(--zl-stripe);
}

.zl-longdesc tbody tr:last-child td {
  border-bottom: 0;
}

.zl-longdesc tbody td:first-child {
  color: var(--zl-heading);
  font-weight: 600;
}

.zl-longdesc .zl-longdesc__note {
  margin: 20px 0 24px;
  padding: 14px 18px;
  border-radius: var(--zl-radius-ui);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 3px 0 0 var(--zl-gold);
  color: var(--zl-text);
  font-size: 15px;
  line-height: 1.6;
}

.zl-longdesc .zl-longdesc__note--small {
  margin-top: 36px;
  color: var(--zl-muted);
  font-size: 13px;
}

.zl-longdesc a {
  color: var(--zl-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* 20  Responsive ----------------------------------------------------- */

/* Tablet (Elementor default breakpoint) */
@media (max-width: 1024px) {
  :root {
    --zl-cols: 3;
    --zl-gap: 16px;
  }

  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product {
    min-height: 370px;
  }

  .single-product div.product .summary.entry-summary,
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-cart .cart-collaterals .cart_totals,
  .woocommerce-order-details,
  .woocommerce-customer-details {
    padding: 20px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --zl-cols: 2;
    --zl-gap: 12px;
  }

  .zl-category-grid {
    grid-template-columns: 1fr;
  }

  .zl-category-card {
    min-height: 180px;
  }

  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product {
    min-height: 340px;
    padding: 11px !important;
  }

  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product img {
    height: 175px !important;
    max-height: 175px;
  }

  .elementor-button,
  .wp-element-button,
  .woocommerce button.button,
  .woocommerce #place_order {
    min-height: 42px;
    padding: 9px 18px;
    font-size: 14px;
  }

  .woocommerce-message .button,
  .woocommerce-info .button {
    float: none;
    margin-top: 10px;
  }

  /* Single product */
  .single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery,
  .single-product div.product div.images.woocommerce-product-gallery {
    max-width: 420px;
    margin: 0 auto 8px !important;
    padding: 16px;
  }

  .single-product .woocommerce-product-gallery img {
    max-height: 340px;
  }

  .woocommerce div.product .woocommerce-tabs {
    padding: 20px 18px 24px;
  }

  .elementor-location-single > .e-con:has(.elementor-widget-woocommerce-product-short-description) {
    margin-top: 40px !important;
  }

  /* Cart table rows stack: keep thumbnails and remove buttons tidy */
  .woocommerce-cart table.cart .product-thumbnail {
    width: auto;
  }

  .woocommerce-cart table.shop_table_responsive.cart thead {
    display: none;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr,
  .woocommerce-cart table.shop_table_responsive.cart td {
    display: block;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item {
    position: relative;
    padding: 14px 16px;
    border-top: 1px solid var(--zl-line);
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item:first-child {
    border-top: 0;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: 0;
    text-align: right !important;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td::before {
    content: attr(data-title);
    float: none;
    color: var(--zl-muted);
    font-family: var(--zl-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-remove {
    position: absolute;
    top: 14px;
    right: 16px;
    width: auto;
    padding: 0;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail {
    justify-content: flex-start;
    padding-right: 44px;
  }

  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-remove::before,
  .woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-thumbnail::before {
    display: none;
  }

  .woocommerce-cart table.shop_table_responsive.cart td.actions {
    padding: 16px;
    border-top: 1px solid var(--zl-line);
    text-align: left !important;
  }

  .woocommerce-cart table.shop_table_responsive.cart td.actions::before {
    display: none;
  }

  .woocommerce-cart table.cart td.actions .coupon {
    float: none;
  }

  .woocommerce-cart table.cart td.actions > .button {
    float: none;
    width: 100%;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review {
    padding: 20px 18px;
  }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last {
    width: 100%;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 8px 12px;
    font-size: 14px;
  }

  /* Cart: Woo turns the table into stacked rows */
  .woocommerce-cart table.cart td.actions .coupon {
    display: flex;
    width: 100%;
  }

  .woocommerce-cart table.cart td.actions .coupon .input-text {
    flex: 1 1 auto;
    width: auto;
  }

  .woocommerce-cart table.cart td.actions > .button {
    margin-top: 10px;
  }

  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before {
    color: var(--zl-muted);
  }

  .woocommerce table.shop_table_responsive tr:nth-child(2n) td {
    background: transparent;
  }

  /* Thank-you overview: two per row */
  .woocommerce ul.order_details li {
    border-bottom: 1px solid var(--zl-line);
  }

  /* Toast spans the bottom edge */
  .zl-cart-toast {
    right: 16px;
    bottom: 16px;
    left: 16px;
    max-width: none;
  }

  /* Product copy */
  .zl-specs .zl-specs__table th,
  .zl-specs .zl-specs__table td {
    padding: 8px 10px;
    font-size: 13px;
  }

  .zl-specs .zl-specs__table th {
    width: 44%;
  }

  .zl-longdesc {
    font-size: 15px;
    line-height: 1.7;
  }

  .zl-longdesc h2 {
    margin-top: 34px;
  }
}

/* Phones: the "Warenkorb" button fits inside the 2-column cards
   (it was 184px wide in a 152px card and poked out on the right) */
@media (max-width: 767px) {
  html body:not(#zl-boost) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.button {
    width: 100%;
    max-width: 100%;
    padding: 10px 8px !important;
    letter-spacing: .04em;
  }

  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before {
    font-size: 12.5px;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  :root {
    --zl-cols: 1;
  }

  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product {
    min-height: 360px;
  }

  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product img {
    height: 210px !important;
    max-height: 210px;
  }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product,
  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added,
  :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.added_to_cart,
  .zl-category-card,
  .zl-cart-toast {
    animation: none !important;
    transition: none !important;
  }
}


/* 21  Button lock -----------------------------------------------------
   Last rule in the file on purpose. Some product widgets (Elementor
   Products / Loop Grid, WooCommerce product blocks) and the Elementor
   kit's own button settings can turn the button into a rounded pill.
   Plain values, !important and an id-level selector (body:not(#zl-boost))
   make the slanted, square outline win over theme and widget rules. */

html body:not(#zl-boost) .woocommerce a.button,
html body:not(#zl-boost) .woocommerce button.button,
html body:not(#zl-boost) .woocommerce input.button,
html body:not(#zl-boost) ul.products li.product .button,
html body:not(#zl-boost) .elementor-widget-woocommerce-products .button,
html body:not(#zl-boost) .elementor-widget-wc-archive-products .button,
html body:not(#zl-boost) .elementor-wc-products .button,
html body:not(#zl-boost) .elementor-widget-loop-grid .add_to_cart_button,
html body:not(#zl-boost) .elementor-widget-wc-add-to-cart .elementor-button,
html body:not(#zl-boost) .elementor-add-to-cart .single_add_to_cart_button,
html body:not(#zl-boost) .wc-block-components-product-button__button,
html body:not(#zl-boost) .wp-block-button__link.add_to_cart_button,
html body:not(#zl-boost) .elementor-button,
html body:not(#zl-boost) .wp-element-button {
  border: 1px solid #b73232 !important;
  border-radius: 0 !important;
  color: #b73232 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-style: normal !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  transform: skewX(-6deg) !important;
}

html body:not(#zl-boost) .woocommerce a.button:hover,
html body:not(#zl-boost) .woocommerce button.button:hover,
html body:not(#zl-boost) .woocommerce input.button:hover,
html body:not(#zl-boost) ul.products li.product .button:hover,
html body:not(#zl-boost) .elementor-widget-woocommerce-products .button:hover,
html body:not(#zl-boost) .elementor-widget-wc-archive-products .button:hover,
html body:not(#zl-boost) .elementor-wc-products .button:hover,
html body:not(#zl-boost) .elementor-widget-loop-grid .add_to_cart_button:hover,
html body:not(#zl-boost) .elementor-widget-wc-add-to-cart .elementor-button:hover,
html body:not(#zl-boost) .elementor-add-to-cart .single_add_to_cart_button:hover,
html body:not(#zl-boost) .wc-block-components-product-button__button:hover,
html body:not(#zl-boost) .wp-block-button__link.add_to_cart_button:hover,
html body:not(#zl-boost) .elementor-button:hover,
html body:not(#zl-boost) .wp-element-button:hover {
  border-color: #e85859 !important;
  color: #e85859 !important;
  background: transparent !important;
}

/* Single product add-to-cart: one clean outline. Clears the extra
   lines, wide letter spacing and side-border settings that the Add to
   Cart widget or theme add to this button. */
html body:not(#zl-boost) .single_add_to_cart_button,
html body:not(#zl-boost) .elementor-add-to-cart .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 26px !important;
  border-style: solid !important;
  border-width: 1px !important;
  outline: 0;
  font-family: var(--zl-font-heading) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  letter-spacing: .02em !important;
  white-space: nowrap;
}

html body:not(#zl-boost) .single_add_to_cart_button::before,
html body:not(#zl-boost) .single_add_to_cart_button::after {
  content: none !important;
  display: none !important;
}


/* 22  Contact page ---------------------------------------------------
   Used by the imported "ZuiverLab Kontakt" template: an HTML widget
   (.zl-contact-info) and an Elementor Pro Form widget with the CSS
   class zl-contact-form. !important beats the form widget's default
   white fields. */

.zl-contact .zl-contact-intro p {
  margin: 0 0 28px;
  color: var(--zl-muted);
  font-size: 17px;
}

.zl-contact-col--info,
.zl-contact-col--form {
  padding: 32px !important;
  border: 1px solid var(--zl-border);
  border-radius: 0;
  background: var(--zl-card);
}

.zl-contact-col--form {
  box-shadow: inset 0 3px 0 var(--zl-red);
}

.zl-contact-info__kicker {
  margin: 0 0 8px !important;
  color: var(--zl-red-hover) !important;
  font-family: var(--zl-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.zl-contact-info .zl-contact-info__title {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
}

.zl-contact-info__text {
  margin: 0 0 24px !important;
  color: var(--zl-muted) !important;
  font-size: 15px;
  line-height: 1.7;
}

.zl-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--zl-border);
  color: var(--zl-text) !important;
  background: var(--zl-field);
  text-decoration: none !important;
  transition: border-color .2s ease;
}

/* Hover: gold corner tick, top right (same as the product cards) */
.zl-contact-card {
  position: relative;
}

a.zl-contact-card::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zl-gold, #f2c230);
  border-right: 2px solid var(--zl-gold, #f2c230);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

a.zl-contact-card:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

.zl-contact-card__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--zl-red);
  color: var(--zl-red-hover);
  transform: skewX(-6deg);
}

.zl-contact-card__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: skewX(6deg);
}

.zl-contact-card__label {
  display: block;
  color: var(--zl-muted);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.zl-contact-card__value {
  display: block;
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
  font-size: 16px;
  font-weight: 600;
  word-break: break-word;
}

.zl-contact-info__note {
  margin: 22px 0 0 !important;
  padding: 12px 14px;
  color: var(--zl-muted) !important;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 3px 0 0 var(--zl-gold);
  font-size: 13px;
  line-height: 1.6;
}

/* Form fields */
.zl-contact-form .elementor-field-group {
  margin-bottom: 18px;
}

.zl-contact-form .elementor-field-label {
  margin-bottom: 6px;
  color: var(--zl-text) !important;
  font-family: var(--zl-font-heading) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.zl-contact-form .elementor-mark-required .elementor-field-label::after {
  color: var(--zl-red-hover) !important;
}

.zl-contact-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper),
.zl-contact-form .elementor-field-group .elementor-field-textual {
  min-height: 46px;
  padding: 11px 14px !important;
  border: 1px solid var(--zl-field-border) !important;
  border-radius: 0 !important;
  color: var(--zl-text) !important;
  background: var(--zl-field) !important;
  font-family: var(--zl-font) !important;
  font-size: 15px !important;
  line-height: 1.5;
}

.zl-contact-form .elementor-field-group textarea.elementor-field {
  min-height: 0;
  resize: vertical;
}

.zl-contact-form .elementor-field-group .elementor-field:focus {
  border-color: var(--zl-red) !important;
  outline: none;
  box-shadow: 0 0 0 1px var(--zl-red) !important;
}

.zl-contact-form .elementor-field::placeholder {
  color: #7d8087 !important;
  opacity: 1;
}

/* Privacy checkbox */
.zl-contact-form .elementor-field-type-acceptance .elementor-field-subgroup label,
.zl-contact-form .elementor-field-option label {
  color: var(--zl-muted) !important;
  font-size: 13px;
  line-height: 1.55;
}

.zl-contact-form .elementor-field-type-acceptance input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 8px 0 0;
  accent-color: var(--zl-red);
}

.zl-contact-form .elementor-field-option {
  display: flex !important;
  align-items: flex-start;
}

/* Submit button: global outlined style, full row, a little taller */
html body:not(#zl-boost) .zl-contact-form .elementor-field-type-submit .elementor-button {
  width: 100%;
  min-height: 52px;
  font-size: 15px;
  letter-spacing: .04em;
}

/* Messages */
.zl-contact-form .elementor-message {
  margin-top: 14px;
  padding: 12px 14px;
  color: var(--zl-text);
  background: rgba(255, 255, 255, .03);
  font-size: 14px;
}

.zl-contact-form .elementor-message::before {
  display: none;
}

.zl-contact-form .elementor-message.elementor-message-success {
  box-shadow: inset 3px 0 0 var(--zl-gold);
}

.zl-contact-form .elementor-message.elementor-message-danger,
.zl-contact-form .elementor-error .elementor-field {
  box-shadow: inset 3px 0 0 var(--zl-red-hover);
}

.zl-contact-form .elementor-message-danger,
.zl-contact-form .elementor-field-group .elementor-message-danger {
  color: var(--zl-red-hover);
}

@media (max-width: 767px) {
  .zl-contact-col--info,
  .zl-contact-col--form {
    padding: 22px 18px !important;
  }
}

/* 23  Site look (all pages) -------------------------------------------
   The look of the newer header, footer and homepage sections, carried
   over to shop, product, cart and checkout: solid depth edges, red-gold
   accent lines, soft red glow, red focus glow on fields. */

::selection {
  color: #fff;
  background: rgba(183, 50, 50, .85);
}

/* Product cards: solid depth edge (hover glow is the gold tick, section 08) */
:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    3px 3px 0 #1d1012,
    6px 6px 0 #140b0c,
    10px 16px 28px -12px rgba(0, 0, 0, .9);
}

:is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    3px 3px 0 #2a1214,
    6px 6px 0 #1a0c0c,
    0 18px 40px -16px rgba(0, 0, 0, .95);
}

/* Single product: extruded title (gallery glow is in section 12) */
html body:not(#zl-boost) .elementor-widget-woocommerce-product-title .product_title,
html body:not(#zl-boost).single-product .product_title {
  text-shadow:
    1px 1px 0 #8a8d93,
    2px 2px 0 #3a3c40,
    2px 5px 10px rgba(0, 0, 0, .55);
}

/* Cart and checkout boxes: red-gold top line + depth edge are in
   the shared panel rule in section 14. */

/* Fields: red glow on focus */
.woocommerce form .form-row :is(input.input-text, textarea, select):focus,
.woocommerce :is(input.qty, .coupon input.input-text):focus,
.elementor-field-group :is(input, textarea, select):focus {
  border-color: var(--zl-red-hover) !important;
  box-shadow: 0 0 0 3px rgba(183, 50, 50, .2), 0 8px 24px -12px rgba(232, 88, 89, .5) !important;
  outline: none;
}

/* Add-to-cart toast: red-gold edge and depth */
.zl-cart-toast {
  border-radius: 0;
  box-shadow:
    inset 3px 0 0 var(--zl-gold),
    4px 4px 0 #1d1012,
    0 16px 40px rgba(0, 0, 0, .55),
    0 0 30px -8px rgba(232, 88, 89, .35);
}


/* 24  Homepage (front page only) ---------------------------------------
   Was homepage.css. Everything is scoped to body.home and the page
   content, so header, footer, shop and product pages are not touched.
   H1 width and rhythm · H2 hero (glow, floating product, corner brackets, trust cards) · H3 section
   headings · H4 trust bar · H5 category cards · H6 product grids ·
   H7 Elementor widgets · H8 scroll reveal · H9 responsive. */

body.home {
  --zlh-max: 1200px;
  --zlh-pad-x: 24px;
  --zlh-section-y: clamp(56px, 7vw, 96px);
  --zlh-grid: rgba(255, 255, 255, .035);
  --zlh-glow: rgba(183, 50, 50, .22);
  --zlh-gold-soft: rgba(242, 194, 48, .14);
  --zlh-cols: 4;           /* product columns on the homepage only */
}


/* H1  Content width and section rhythm ------------------------------ */

/* Flexbox containers (.e-con) and classic sections both stop at 1200px. */
body.home [data-elementor-type="wp-page"] > .e-con.e-parent {
  --content-width: var(--zlh-max);
  --padding-top: var(--zlh-section-y);
  --padding-bottom: var(--zlh-section-y);
  --padding-left: var(--zlh-pad-x);
  --padding-right: var(--zlh-pad-x);
  position: relative;
}

body.home [data-elementor-type="wp-page"] > .elementor-section > .elementor-container {
  max-width: var(--zlh-max);
}

body.home [data-elementor-type="wp-page"] > .elementor-section {
  position: relative;
  padding-top: var(--zlh-section-y);
  padding-bottom: var(--zlh-section-y);
}

/* Hairline between sections with a short red "measuring tick" on the
   left edge of the content column. */
body.home [data-elementor-type="wp-page"] > :is(.e-con.e-parent, .elementor-section) + :is(.e-con.e-parent, .elementor-section)::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--zlh-pad-x), calc((100% - var(--zlh-max)) / 2));
  right: max(var(--zlh-pad-x), calc((100% - var(--zlh-max)) / 2));
  height: 1px;
  background:
    linear-gradient(90deg, var(--zl-red) 0 56px, transparent 56px),
    linear-gradient(90deg, var(--zl-line), var(--zl-line));
  pointer-events: none;
}

/* Every second section gets a faint card tint, so the page reads in
   bands instead of one long dark sheet. */
body.home [data-elementor-type="wp-page"] > :is(.e-con.e-parent, .elementor-section):nth-child(even of :is(.e-con.e-parent, .elementor-section)):not(:has(.zl-hero)) {
  background-color: rgba(17, 18, 20, .55);
}


/* H2  Hero (section.zl-hero, see hero.html) --------------------------
   2026-10-31 remake: flat and calm. Copy on the left, the product
   floating in a flat frame on the right. The four corner brackets
   (red top, gold bottom) glow when the mouse is on the frame. No tilt, no extruded
   letters, no stacked depth edges. The hero buttons are not covered
   by global.css, so they get the same slanted red outline here, with
   the same specificity boost as the Button lock. */

.zl-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 4.5vw, 64px) var(--zlh-pad-x, 24px) clamp(40px, 6vw, 72px);
  color: var(--zl-text);
  /* Deep black, a soft light from above, dark vignette at the edges */
  background-color: #070809;
  background-image:
    radial-gradient(60% 55% at 50% -10%, rgba(255, 255, 255, .05), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* The Elementor container holding the hero HTML widget runs full
   width with no padding, so the hero background reaches the edges. */
body.home [data-elementor-type="wp-page"] > .e-con:has(.zl-hero) {
  --content-width: 100%;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --gap: 0px;
}

body.home [data-elementor-type="wp-page"] > .elementor-section:has(.zl-hero) {
  padding: 0;
}

body.home [data-elementor-type="wp-page"] > .elementor-section:has(.zl-hero) > .elementor-container {
  max-width: none;
}

/* Fine red-gold line along the bottom edge */
.zl-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zl-red) 20%, var(--zl-gold) 50%, var(--zl-red) 80%, transparent);
  opacity: .6;
}

.zl-hero *,
.zl-hero *::before,
.zl-hero *::after {
  box-sizing: border-box;
}

.zl-hero__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.zl-hero__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

/* Headline: first line white, the  line gold. Flat letters
   with one soft shadow instead of the old extruded edge. */
html body:not(#zl-boost) .zl-hero .zl-hero__heading {
  max-width: 17ch;
  margin: 0 0 22px;
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
  font-size: clamp(2.2rem, 4.6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.zl-hero .zl-hero__heading span {
  display: block;
  margin-top: 6px;
  color: var(--zl-gold);
  text-shadow: 0 0 28px rgba(242, 194, 48, .18);
}

/* Short red/gold bar above the headline */
.zl-hero .zl-hero__heading::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, var(--zl-red) 0 70%, var(--zl-gold) 70%);
  transform: skewX(var(--zl-skew-btn));
}

.zl-hero .zl-hero__description {
  max-width: 56ch;
  margin: 0;
  color: var(--zl-muted);
  font-family: var(--zl-font);
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.75;
}

.zl-hero .zl-hero__description strong {
  color: var(--zl-text);
  font-weight: 600;
}

.zl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

/* Buttons: slanted and square like the rest of the site, in the
   hero's three colours. Primary = solid red with white text and a
   gold arrow; secondary = gold outline with gold text. */
html body:not(#zl-boost) .zl-hero .zl-hero__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 15px 32px;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--zl-font-heading);
  font-size: 15px;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: .06em;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transform: skewX(-6deg) !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Primary: red fill, white text, thin light line on top */
html body:not(#zl-boost) .zl-hero .zl-hero__button--primary {
  border-color: #c94242 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #c43a3a, #a12a2a) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 28px -14px rgba(183, 50, 50, .9) !important;
}

html body:not(#zl-boost) .zl-hero .zl-hero__button--primary:hover {
  border-color: #e85859 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #d34646, #b73232) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 34px -14px rgba(232, 88, 89, .95) !important;
}

html body:not(#zl-boost) .zl-hero .zl-hero__button--primary span {
  color: var(--zl-gold);
}

/* Secondary: gold outline, gold text, faint gold fill on hover */
html body:not(#zl-boost) .zl-hero .zl-hero__button--secondary {
  border-color: rgba(242, 194, 48, .7) !important;
  color: var(--zl-gold) !important;
  background: transparent !important;
}

html body:not(#zl-boost) .zl-hero .zl-hero__button--secondary:hover {
  border-color: var(--zl-gold) !important;
  color: var(--zl-gold-hover) !important;
  background: rgba(242, 194, 48, .08) !important;
}

html body:not(#zl-boost) .zl-hero .zl-hero__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.zl-hero .zl-hero__button span {
  transition: transform .2s ease;
}

.zl-hero .zl-hero__button:hover span {
  transform: translateX(4px);
}

/* Product frame: flat, hairline border, faint inner light */
.zl-hero__visual {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(232, 88, 89, .1), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%),
    rgba(12, 13, 15, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 40px 80px -40px rgba(0, 0, 0, .9);
}

/* Soft red/gold light behind the frame, breathing slowly */
.zl-hero__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(232, 88, 89, .2), rgba(183, 50, 50, .1) 38%, rgba(183, 50, 50, .03) 64%, transparent 100%),
    radial-gradient(closest-side at 62% 60%, rgba(242, 194, 48, .07), transparent 75%);
  filter: blur(30px);
  pointer-events: none;
  animation: zl-hero-glow 7s ease-in-out infinite alternate;
}

@keyframes zl-hero-glow {
  from { opacity: .7; }
  to   { opacity: 1; }
}

/* Product floats up and down; the shadow under it shrinks as it rises */
.zl-hero .zl-hero__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .6));
  animation: zl-hero-float 6s ease-in-out infinite;
}

@keyframes zl-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.zl-hero__visual::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: clamp(10px, 1.6vw, 18px);
  left: 22%;
  height: 18px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  filter: blur(4px);
  pointer-events: none;
  animation: zl-hero-shadow 6s ease-in-out infinite;
}

@keyframes zl-hero-shadow {
  0%, 100% { opacity: .9; transform: scaleX(1); }
  50%      { opacity: .5; transform: scaleX(.82); }
}

/* Corner brackets: four L-shaped corners (spans in hero.html). Top
   corners red, bottom corners gold, like before. They stay calm until
   the mouse is on the product frame, then each one lights up: the
   line brightens, a blurred halo (::before) and a bright point where
   the two lines meet (::after) fade in. Only opacity and colour
   change, so it stays smooth. */
.zl-hero__corner {
  --zlh-corner: clamp(22px, 2.6vw, 30px);
  --zlh-c: var(--zl-gold, #f2c230);
  --zlh-c-lit: #ffd86b;
  --zlh-c-glow: rgba(242, 194, 48, .6);
  position: absolute;
  z-index: 2;
  width: var(--zlh-corner);
  height: var(--zlh-corner);
  border: 0 solid var(--zlh-c);
  pointer-events: none;
  transition: border-color .35s ease;
}

.zl-hero__corner--tl,
.zl-hero__corner--tr {
  --zlh-c: var(--zl-red, #b73232);
  --zlh-c-lit: #ff6b6c;
  --zlh-c-glow: rgba(232, 88, 89, .65);
}

.zl-hero__corner--tl { top: -1px;    left: -1px;  border-top-width: 2px;    border-left-width: 2px; }
.zl-hero__corner--tr { top: -1px;    right: -1px; border-top-width: 2px;    border-right-width: 2px; }
.zl-hero__corner--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.zl-hero__corner--bl { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }

/* Halo: the same L shape, bright and blurred */
.zl-hero__corner::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: inherit;
  border-color: var(--zlh-c-lit);
  filter: blur(3px) drop-shadow(0 0 8px var(--zlh-c-glow));
  opacity: 0;
  transition: opacity .35s ease;
}

/* Bright point where the two lines meet */
.zl-hero__corner::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  box-shadow:
    0 0 6px 1px var(--zlh-c-lit),
    0 0 18px 4px var(--zlh-c-glow),
    0 0 40px 10px var(--zlh-c-glow);
  opacity: 0;
  transition: opacity .35s ease;
}

.zl-hero__corner--tl::after { top: -3px;    left: -3px; }
.zl-hero__corner--tr::after { top: -3px;    right: -3px; }
.zl-hero__corner--br::after { bottom: -3px; right: -3px; }
.zl-hero__corner--bl::after { bottom: -3px; left: -3px; }

/* Hover: all four corners light up */
.zl-hero__visual:hover .zl-hero__corner {
  border-color: var(--zlh-c-lit);
}

.zl-hero__visual:hover .zl-hero__corner::before,
.zl-hero__visual:hover .zl-hero__corner::after {
  opacity: 1;
}

/* Trust strip: three flat cards with a gold hairline on top */
.zl-hero__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(40px, 6vw, 64px);
}

.zl-hero__trust-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 60%), rgba(17, 18, 20, .8);
  box-shadow: inset 0 1px 0 rgba(242, 194, 48, .22);
}

/* Slanted outline badge with a check mark */
.zl-hero__trust-item::before {
  content: "\2713";
  flex: 0 0 40px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(183, 50, 50, .8);
  background: rgba(183, 50, 50, .12);
  color: var(--zl-red-hover);
  font-family: var(--zl-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transform: skewX(var(--zl-skew-btn));
}

.zl-hero__trust-item strong {
  display: block;
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.zl-hero__trust-item small {
  display: block;
  margin-top: 4px;
  color: var(--zl-gold);
  font-family: var(--zl-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
}

/* Elements removed from the HTML stay hidden if the old markup is
   still in place somewhere. */
.zl-hero__eyebrow,
.zl-hero__flag,
.zl-hero__shipping-note,
.zl-hero__trust-icon {
  display: none !important;
}

@media (max-width: 767px) {
  .zl-hero__corner {
    --zlh-corner: 22px;
  }

  @keyframes zl-hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }
}

/* Reduced motion: no float, no breathing */
@media (prefers-reduced-motion: reduce) {
  .zl-hero__visual::before,
  .zl-hero__visual::after,
  .zl-hero .zl-hero__image {
    animation: none;
  }
}

/* H3  Section headings ------------------------------------------------
   Heading widget h2s in the page body get a short red/gold bar above
   them. The hero headline (h1) and the header/footer are excluded. */

body.home [data-elementor-type="wp-page"] .elementor-widget-heading h2.elementor-heading-title {
  position: relative;
  padding-top: 18px;
}

body.home [data-elementor-type="wp-page"] .elementor-widget-heading h2.elementor-heading-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, var(--zl-red) 0 70%, var(--zl-gold) 70%);
  transform: skewX(var(--zl-skew-btn));
}

/* Centred headings get a centred bar */
body.home [data-elementor-type="wp-page"] .elementor-widget-heading:is(.elementor-align-center, [style*="center"]) h2.elementor-heading-title::before,
body.home [data-elementor-type="wp-page"] .elementor-widget-heading h2.elementor-heading-title[style*="center"]::before {
  left: 50%;
  margin-left: -22px;
}

/* Smaller heading levels as section kickers */
body.home [data-elementor-type="wp-page"] .elementor-widget-heading h6.elementor-heading-title {
  color: var(--zl-gold);
  font-family: var(--zl-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
}


/* H4  Trust bar -------------------------------------------------------- */

body.home .zl-trust-wrap {
  position: relative;
}

body.home .zl-trust {
  border-top: 1px solid var(--zl-line);
  border-bottom: 1px solid var(--zl-line);
  background:
    linear-gradient(90deg, transparent, rgba(183, 50, 50, .06), transparent);
}

body.home .zl-trust__title {
  font-family: var(--zl-font-heading);
  letter-spacing: .01em;
}

body.home .zl-trust__sub {
  color: var(--zl-muted);
  font-family: var(--zl-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
}


/* H5  Category cards -------------------------------------------------- */

body.home .zl-category-grid {
  counter-reset: zl-cat;
  gap: 22px;
}

body.home .zl-category-card {
  counter-increment: zl-cat;
  position: relative;
  min-height: 240px;
  padding: 28px 26px 24px;
  overflow: hidden;
  background:
    linear-gradient(var(--zlh-grid) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--zlh-grid) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--zl-card);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* Sample number in the corner: 01, 02, 03 ... */
body.home .zl-category-card::before {
  content: counter(zl-cat, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 22px;
  color: var(--zl-muted);
  font-family: var(--zl-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .7;
  transform: skewX(2deg);
}

/* Red bar that fills along the top on hover */
body.home .zl-category-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--zl-red), var(--zl-gold));
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .35s ease;
}

body.home .zl-category-card:hover {
  border-color: var(--zl-border);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .85);
  transform: skewX(-2deg) translateY(-4px);
}

/* The corner number turns gold and glows on hover (it sits where the
   gold corner tick would go) */
body.home .zl-category-card::before {
  transition: color .25s ease, opacity .25s ease, text-shadow .25s ease;
}

body.home .zl-category-card:hover::before {
  color: var(--zl-gold-hover);
  opacity: 1;
  text-shadow: 0 0 8px rgba(255, 210, 47, .7);
}

body.home .zl-category-card:hover::after {
  transform: scaleX(1);
}

body.home .zl-category-card h3 {
  margin-bottom: 12px;
  font-size: 22px;
  letter-spacing: -.015em;
}

body.home .zl-category-card p {
  max-width: 34ch;
}

/* Arrow after the card link; size only, colours stay locked */
body.home .zl-category-card .zl-category-link {
  gap: 10px;
}

body.home .zl-category-card .zl-category-link::after {
  content: "\2192";
  font-weight: 700;
  transition: transform .2s ease;
}

body.home .zl-category-card:hover .zl-category-link::after {
  transform: translateX(4px);
}


/* H6  Product grids on the homepage ---------------------------------- */

body.home :is(.woocommerce, #zl-all-products) ul.products {
  grid-template-columns: repeat(var(--zlh-cols), minmax(0, 1fr)) !important;
  gap: 22px !important;
}

body.home :is(.woocommerce, #zl-all-products) ul.products li.product {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 45%),
    var(--zl-card) !important;
}

/* Gold corner tick: now on every product card (section 08). */

body.home :is(.woocommerce, #zl-all-products) ul.products li.product .price {
  font-family: var(--zl-font-mono);
}


/* H7  Elementor widgets on the homepage ------------------------------ */

/* Icon Box and Image Box as lab cards */
body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box) > .elementor-widget-container {
  height: 100%;
  padding: 26px 24px;
  border: 1px solid var(--zl-border);
  background: var(--zl-card);
  transition: border-color .2s ease, transform .2s ease;
}

body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box):hover > .elementor-widget-container {
  transform: translateY(-3px);
}

/* Hover: gold corner tick, top right (same as the product cards) */
body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box) > .elementor-widget-container {
  position: relative;
}

body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box) > .elementor-widget-container::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zl-gold, #f2c230);
  border-right: 2px solid var(--zl-gold, #f2c230);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box):hover > .elementor-widget-container::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

body.home [data-elementor-type="wp-page"] .elementor-widget-icon-box .elementor-icon {
  padding: 14px;
  border: 1px solid rgba(183, 50, 50, .45);
  color: var(--zl-red);
  fill: var(--zl-red);
  background: rgba(183, 50, 50, .08);
  font-size: 26px;
  transform: skewX(var(--zl-skew-btn));
}

body.home [data-elementor-type="wp-page"] .elementor-widget-icon-box .elementor-icon > * {
  transform: skewX(6deg);
}

body.home [data-elementor-type="wp-page"] :is(.elementor-icon-box-title, .elementor-image-box-title) {
  margin-bottom: 8px;
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
}

body.home [data-elementor-type="wp-page"] :is(.elementor-icon-box-description, .elementor-image-box-description) {
  color: var(--zl-muted);
  font-size: 15px;
  line-height: 1.65;
}

body.home [data-elementor-type="wp-page"] .elementor-image-box-img img {
  border: 1px solid var(--zl-border);
}

/* Icon List: square red markers */
body.home [data-elementor-type="wp-page"] .elementor-icon-list-icon :is(i, svg) {
  color: var(--zl-red);
  fill: var(--zl-red);
}

body.home [data-elementor-type="wp-page"] .elementor-icon-list-item {
  padding-top: 6px;
  padding-bottom: 6px;
}

body.home [data-elementor-type="wp-page"] .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
  border-bottom: 1px dashed var(--zl-line);
}

/* Counter: mono gold read-out */
body.home [data-elementor-type="wp-page"] .elementor-counter-number-wrapper {
  color: var(--zl-gold);
  font-family: var(--zl-font-mono);
  font-weight: 500;
  letter-spacing: -.02em;
}

body.home [data-elementor-type="wp-page"] .elementor-counter-title {
  color: var(--zl-muted);
  font-family: var(--zl-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Text Editor: readable line length and colour */
body.home [data-elementor-type="wp-page"] .elementor-widget-text-editor {
  color: var(--zl-muted);
  line-height: 1.75;
}

body.home [data-elementor-type="wp-page"] .elementor-widget-text-editor :is(strong, b) {
  color: var(--zl-text);
}

/* Accordion / Toggle (FAQ) */
body.home [data-elementor-type="wp-page"] :is(.elementor-accordion-item, .elementor-toggle-item) {
  margin-bottom: 10px;
  border: 1px solid var(--zl-border) !important;
  background: var(--zl-card);
}

body.home [data-elementor-type="wp-page"] :is(.elementor-tab-title, .e-n-accordion-item-title) {
  padding: 16px 20px;
  border: 0 !important;
  color: var(--zl-heading);
  font-family: var(--zl-font-heading);
  font-weight: 600;
}

body.home [data-elementor-type="wp-page"] :is(.elementor-tab-title.elementor-active, details[open] > .e-n-accordion-item-title) {
  box-shadow: inset 3px 0 0 var(--zl-red);
}

body.home [data-elementor-type="wp-page"] :is(.elementor-tab-title, .e-n-accordion-item-title) :is(i, svg) {
  color: var(--zl-red);
  fill: var(--zl-red);
}

body.home [data-elementor-type="wp-page"] .elementor-tab-content {
  padding: 0 20px 18px !important;
  border: 0 !important;
  color: var(--zl-muted);
}

body.home [data-elementor-type="wp-page"] details.e-n-accordion-item {
  margin-bottom: 10px;
  border: 1px solid var(--zl-border);
  background: var(--zl-card);
}

/* Divider: red/gold measuring line */
body.home [data-elementor-type="wp-page"] .elementor-divider-separator {
  border-top-color: var(--zl-line) !important;
  background: linear-gradient(90deg, var(--zl-red) 0 48px, transparent 48px) top / 100% 1px no-repeat;
}


/* H8  Scroll reveal ----------------------------------------------------
   Pure CSS; browsers without scroll-driven animations simply show the
   content as normal. */

@supports (animation-timeline: view()) {
  @keyframes zlh-rise {
    from { opacity: 0; translate: 0 24px; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* Product cards are left out on purpose: they must always be visible
     (full-page screenshots and some browsers showed an empty grid). */
  body.home .zl-category-card,
  body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box) {
    animation: zlh-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}


/* H9  Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
  body.home {
    --zlh-cols: 3;
    --zlh-pad-x: 20px;
  }

  body.home .zl-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zl-hero__panel {
    grid-template-columns: 1fr;
  }

  .zl-hero__visual {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  body.home {
    --zlh-cols: 2;
    --zlh-pad-x: 16px;
    --zlh-section-y: 48px;
  }

  .zl-hero__visual::before {
    width: 140%;
  }

  .zl-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  html body:not(#zl-boost) .zl-hero .zl-hero__button {
    width: 100%;
  }

  .zl-hero__visual {
    padding: 12px;
  }

  .zl-hero .zl-hero__image {
    max-height: 300px;
  }

  .zl-hero__trust {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .zl-hero__trust-item {
    padding: 16px 18px;
  }

  .zl-hero__trust-item strong {
    font-size: 16px;
  }

  body.home .zl-category-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.home .zl-category-card {
    min-height: 0;
  }

  body.home :is(.woocommerce, #zl-all-products) ul.products {
    gap: 12px !important;
  }
}

@media (max-width: 380px) {
  body.home {
    --zlh-cols: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zl-hero .zl-hero__button,
  .zl-hero .zl-hero__button span,
  body.home .zl-category-card,
  body.home .zl-category-card::before,
  body.home .zl-category-card::after,
  body.home .zl-category-link::after,
  a.zl-contact-card::after,
  html body .zl-trust .zl-trust__item::after,
  body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box) > .elementor-widget-container::after,
  body.home :is(.woocommerce, #zl-all-products) ul.products li.product,
  body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box),
  body.home [data-elementor-type="wp-page"] :is(.elementor-widget-icon-box, .elementor-widget-image-box) > .elementor-widget-container {
    animation: none !important;
    transition: none !important;
  }
}


/* 25  No dividers + no sideways scrolling ---------------------------
   cloddd: no divider lines between parts of any page. This removes
   the section hairlines (homepage, SARMs page), the footer's grey
   top line (its red top border and glowing accent stay), the hero
   bottom line, heading underlines, the
   price and toolbar lines, and Elementor Divider widgets. Table rows
   and box borders stay. Kept last so it wins. */

/* Homepage section hairlines, hero line, trust bar lines */
body.home [data-elementor-type="wp-page"] > :is(.e-con.e-parent, .elementor-section) + :is(.e-con.e-parent, .elementor-section)::before,
.zl-hero::after {
  display: none !important;
}

body.home .zl-trust {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Elementor Divider widgets on any page */
.elementor-widget-divider {
  display: none !important;
}

/* Footer: grey top line and bottom bar line. The thin red top border
   (50% transparent) and the glowing red accent (::after / ::before in
   footer.html) stay: cloddd asked for them back on 2026-10-31. */
html body .zl-footer {
  border-top: 0 !important;
}

html body .zl-footer__bar {
  border-top: 0 !important;
}

/* SARMs page widget: lines between sections and list items */
html body #zl-sarms .zls-section + .zls-section {
  border-top: 0 !important;
}

html body #zl-sarms .zls-points li {
  border-top: 0 !important;
}

/* Shop pages: heading underlines and in-page lines */
.elementor-location-archive .elementor-widget-theme-archive-title .elementor-heading-title::after,
.woocommerce-products-header__title::after,
.related.products > h2::after,
.upsells.products > h2::after,
.cross-sells > h2::after,
.woocommerce-cart .cart_totals > h2::after,
.woocommerce-checkout #customer_details h3::after,
.woocommerce-checkout #order_review_heading::after {
  display: none !important;
}

.elementor-location-archive .elementor-widget-theme-archive-title .elementor-heading-title,
.woocommerce-products-header__title,
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
  padding-bottom: 0 !important;
}

.elementor-widget-woocommerce-product-price .price,
.woocommerce div.product .summary p.price {
  padding-bottom: 6px !important;
  border-bottom: 0 !important;
}

.elementor-widget-wc-archive-products ul.products {
  padding-top: 12px !important;
  border-top: 0 !important;
}

.woocommerce-checkout #customer_details.col2-set .col-2 {
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* No sideways scrolling on phones: slanted buttons and cards, the
   depth edges and wide tables can poke a few pixels past the screen.
   clip (not hidden) keeps sticky boxes working. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

#content .e-con,
#content .elementor-widget,
#content .elementor-widget-container {
  min-width: 0;
}


/* Homepage: no empty bands between parts. Each section container had
   up to 96px padding top and bottom, every second one a tinted band,
   and each pasted section widget adds 56–72px of its own. Now the
   cards sit 24px apart (12px + 12px). The boost (html body) beats the
   widgets' own  blocks, so the widgets don't need re-pasting. */
body.home [data-elementor-type="wp-page"] > .e-con.e-parent:not(:has(.zl-hero)) {
  --padding-top: 0px !important;
  --padding-bottom: 0px !important;
  background-color: transparent !important;
}

body.home [data-elementor-type="wp-page"] > .elementor-section:not(:has(.zl-hero)) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: transparent !important;
}

html body :is(.zl-anabolika-info, .zl-bodybuilding-info, .zl-faq, .store-faq, .zl-steroid-mechanism, .zl-steroid-catalog, .zl-steroid-effects, .zl-steroid-faq, .zl-steroid-risks, .zlv3-reasons) {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

html body #zl-all-products {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Short red line on top of each section card */
html body :is(.zl-anabolika-info__inner, .zl-bodybuilding-info__inner, .zl-faq__inner, .store-faq__inner, .zl-steroid-mechanism__inner, .zl-steroid-catalog__inner, .zl-steroid-effects__inner, .zl-steroid-faq__inner, .zl-steroid-risks__inner)::before {
  display: none !important;
}


/* =====================================================================
   26  Homepage sections (moved out of the Elementor HTML widgets)
   2026-10-31: each homepage section used to carry its own style
   block, which made the homepage HTML very heavy. The styles live
   here now, in page order, unchanged; the widgets hold only HTML.
   Kept at the very end so they win exactly as the inline blocks did.
   ===================================================================== */

/* 26.1  all-products.html ------------------------------------------------ */

#zl-all-products {
  --zl-cols: 4;
  width: min(1200px, calc(100% - 48px));
  margin: 64px auto 72px;
  color: var(--zl-text, #f3f3f4);
}

#zl-all-products * {
  box-sizing: border-box;
}

/* Intro */
#zl-all-products .zl-live-intro {
  position: relative;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--zl-border, #303034);
}

#zl-all-products .zl-live-intro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--zl-red, #b73232);
}

#zl-all-products .zl-live-kicker,
#zl-all-products .zl-group-kicker {
  color: var(--zl-gold, #f2c230);
  font-family: var(--zl-font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#zl-all-products h2 {
  margin: 8px 0 10px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.18;
}

#zl-all-products .zl-live-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--zl-muted, #b9bbc0);
  font-size: 15px;
  line-height: 1.65;
}

/* Category groups */
#zl-all-products .zl-live-group {
  margin: 46px 0 0;
  scroll-margin-top: 24px;
}

#zl-all-products .zl-group-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 22px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--zl-border, #303034);
  color: var(--zl-heading, #fafafa);
  font-family: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
}

#zl-all-products .zl-group-kicker {
  font-size: 10px;
  color: var(--zl-red-hover, #e85859);
}

#zl-all-products ul.products li.product a.woocommerce-LoopProduct-link,
#zl-all-products ul.products li.product a.woocommerce-LoopProduct-link * {
  text-decoration: none !important;
}

/* Columns (global.css draws the cards) */
@media (max-width: 1024px) { #zl-all-products { --zl-cols: 3; } }
@media (max-width: 767px)  { #zl-all-products { --zl-cols: 2; width: calc(100% - 32px); margin: 48px auto 54px; } }
@media (max-width: 380px)  { #zl-all-products { --zl-cols: 1; width: calc(100% - 24px); } }

/* "Alle ... ansehen" link under each group */
#zl-all-products .zl-group-more {
  margin: 22px 0 0;
  text-align: right;
}

#zl-all-products .zl-group-more a,
#zl-all-products .zl-live-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--zl-red, #b73232);
  color: var(--zl-red-hover, #e85859) !important;
  font-family: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none !important;
  text-transform: uppercase;
  transform: skewX(-6deg);
  transition: background-color .2s ease, color .2s ease;
}

#zl-all-products .zl-group-more a:hover,
#zl-all-products .zl-live-more a:hover {
  background: var(--zl-red, #b73232);
  color: #fff !important;
}

/* Other categories: one row of slanted links */
#zl-all-products .zl-live-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 40px 0 0;
}

#zl-all-products .zl-live-more ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767px) {
  #zl-all-products .zl-group-more { text-align: left; }
}


/* 26.2  reasons.html ----------------------------------------------------- */

.zlv3-reasons {
  --zr-red: var(--zl-red, #b73232);
  --zr-red-hover: var(--zl-red-hover, #e85859);
  --zr-gold: var(--zl-gold, #f2c230);
  --zr-card: var(--zl-card, #111214);
  --zr-field: var(--zl-field, #17191c);
  --zr-border: var(--zl-border, #303034);
  --zr-text: var(--zl-text, #f3f3f4);
  --zr-muted: var(--zl-muted, #b9bbc0);
  --zr-head: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  --zr-mono: var(--zl-font-mono, "IBM Plex Mono", monospace);

  padding: 72px 0;
  color: var(--zr-text);
  counter-reset: zr-card;
}

.zlv3-reasons * {
  box-sizing: border-box;
}

.zlv3-reasons__inner {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* Intro ------------------------------------------------------------ */

.zlv3-reasons__intro {
  position: relative;
  max-width: 820px;
  margin: 0 0 40px;
  padding: 0 0 24px;
}

.zlv3-reasons__intro::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: var(--zr-red);
}

.zlv3-reasons__eyebrow,
.zlv3-reasons__cta-label {
  margin: 0 0 10px !important;
  color: var(--zr-gold);
  font-family: var(--zr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.zlv3-reasons__eyebrow span {
  color: var(--zr-red-hover);
}

.zlv3-reasons .zlv3-reasons__main-title {
  margin: 0 0 14px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zr-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.zlv3-reasons__lead {
  margin: 0;
  color: var(--zr-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Cards ------------------------------------------------------------ */

.zlv3-reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.zlv3-reasons__card {
  position: relative;
  min-width: 0;
  padding: 24px 22px 22px;
  border: 1px solid var(--zr-border);
  background: var(--zr-card);
  counter-increment: zr-card;
  transition: border-color .2s ease, transform .2s ease;
}

/* red corner accent */
.zlv3-reasons__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 42px;
  height: 2px;
  background: var(--zr-red);
}

.zlv3-reasons .zlv3-reasons__card:hover {
  border-color: var(--zr-border);
  transform: translateY(-3px);
}

.zlv3-reasons .zlv3-reasons__card--featured:hover {
  border-color: rgba(242, 194, 48, .45);
}

/* Gold corner tick, top right (same as the product cards). On hover it
   grows and glows; no red frame around the box. */
.zlv3-reasons__card::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zr-gold);
  border-right: 2px solid var(--zr-gold);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

.zlv3-reasons__card:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

/* Emoji replaced by a slanted number badge */
.zlv3-reasons__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  margin: 0 0 16px;
  border: 1px solid var(--zr-red);
  font-size: 0 !important;
  line-height: 1;
  transform: skewX(-12deg);
}

.zlv3-reasons__icon::before {
  content: counter(zr-card, decimal-leading-zero);
  color: var(--zr-gold);
  font-family: var(--zr-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  transform: skewX(12deg);
}

.zlv3-reasons .zlv3-reasons__card-title {
  margin: 0 0 10px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zr-head);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.zlv3-reasons__card p {
  margin: 0;
  color: var(--zr-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* Delivery times list */
.zlv3-reasons__delivery {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid var(--zr-border);
}

.zlv3-reasons__delivery li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 !important;
  padding: 10px 0;
  border-bottom: 1px solid var(--zr-border);
  font-size: 14px;
}

.zlv3-reasons__delivery li span {
  color: var(--zr-text);
}

.zlv3-reasons__delivery li strong {
  color: var(--zr-gold);
  font-family: var(--zr-mono);
  font-size: 13px;
  font-weight: 500;
}

/* Last card: full width, gold accent */
.zlv3-reasons__card--featured {
  grid-column: 1 / -1;
  border-color: rgba(242, 194, 48, .45);
  background: linear-gradient(100deg, rgba(242, 194, 48, .07), rgba(242, 194, 48, 0) 55%), var(--zr-card);
}

.zlv3-reasons__card--featured::before {
  background: var(--zr-gold);
}

.zlv3-reasons__card--featured .zlv3-reasons__icon {
  border-color: var(--zr-gold);
}

.zlv3-reasons__card--featured p {
  max-width: 760px;
}

/* Call to action --------------------------------------------------- */

.zlv3-reasons__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin: 40px 0 0;
  padding: 30px 32px;
  border: 1px solid var(--zr-border);
  border-left: 3px solid var(--zr-red);
  background: var(--zr-field);
}

.zlv3-reasons__cta-copy {
  max-width: 720px;
}

.zlv3-reasons .zlv3-reasons__cta-title {
  margin: 0 0 8px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zr-head);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
}

.zlv3-reasons__cta-copy p:last-child {
  margin: 0;
  color: var(--zr-muted);
  font-size: 15px;
  line-height: 1.65;
}

/* Same button as the rest of the site: red outline, square, slanted */
html body:not(#zl-boost) .zlv3-reasons a.zlv3-reasons__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px !important;
  border: 1px solid var(--zr-red) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--zr-red-hover) !important;
  font-family: var(--zr-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: none !important;
  transform: skewX(-6deg) !important;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

html body:not(#zl-boost) .zlv3-reasons a.zlv3-reasons__button:hover,
html body:not(#zl-boost) .zlv3-reasons a.zlv3-reasons__button:focus-visible {
  border-color: var(--zr-red-hover) !important;
  background: rgba(183, 50, 50, .12) !important;
  color: #fff !important;
}

.zlv3-reasons__button span {
  transition: transform .2s ease;
}

.zlv3-reasons__button:hover span {
  transform: translateX(4px);
}

/* Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
  .zlv3-reasons__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .zlv3-reasons {
    padding: 52px 0;
  }

  .zlv3-reasons__inner {
    width: calc(100% - 32px);
  }

  .zlv3-reasons__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .zlv3-reasons__card {
    padding: 20px 18px 18px;
  }

  .zlv3-reasons__cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px;
  }

  html body:not(#zl-boost) .zlv3-reasons a.zlv3-reasons__button {
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zlv3-reasons__card,
  .zlv3-reasons__card::after,
  .zlv3-reasons__button span,
  html body:not(#zl-boost) .zlv3-reasons a.zlv3-reasons__button {
    transition: none !important;
  }

  .zlv3-reasons__card:hover,
  .zlv3-reasons__button:hover span {
    transform: none;
  }
}


/* 26.3  anabolika-info.html ---------------------------------------------- */

.zl-anabolika-info,
.zl-anabolika-info * {
  box-sizing: border-box;
}

.zl-anabolika-info {
  --za-red: var(--zl-red, #b73232);
  --za-red-hover: var(--zl-red-hover, #e85859);
  --za-gold: var(--zl-gold, #f2c230);
  --za-panel: var(--zl-card, #111214);
  --za-box: var(--zl-field, #17191c);
  --za-border: var(--zl-border, #303034);
  --za-text: var(--zl-text, #f3f3f4);
  --za-muted: var(--zl-muted, #b9bbc0);
  --za-head: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  --za-mono: var(--zl-font-mono, "IBM Plex Mono", monospace);

  width: 100%;
  padding: 56px 0;
  color: var(--za-text);
}

.zl-anabolika-info__inner {
  position: relative;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--za-border);
  background: var(--za-panel);
}

/* red accent on the top edge */
.zl-anabolika-info__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 96px;
  height: 2px;
  background: var(--za-red);
}

.zl-anabolika-info h2,
.zl-anabolika-info h3,
.zl-anabolika-info p {
  margin-top: 0;
}

/* Eyebrow + mini logo mark */
.zl-anabolika-info__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px !important;
  color: var(--za-gold);
  font-family: var(--za-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zl-anabolika-info__flag {
  display: inline-flex;
  gap: 4px;
}

.zl-anabolika-info__flag span {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  transform: skewX(-12deg);
}

.zl-anabolika-info__flag span:nth-child(1) {
  border-color: #d5d8dc;
  background: linear-gradient(160deg, #4a4d53, #0a0a0c 55%, #2a2c31);
}

.zl-anabolika-info__flag span:nth-child(2) {
  border-color: #e85859;
  background: linear-gradient(160deg, #ff8a8a, #b73232 55%, #e85859);
}

.zl-anabolika-info__flag span:nth-child(3) {
  border-color: #ffe06b;
  background: linear-gradient(160deg, #fff4b8, #d9a51c 55%, #ffe06b);
}

/* Title */
.zl-anabolika-info .zl-anabolika-info__title {
  max-width: 820px;
  margin-bottom: 16px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--za-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.zl-anabolika-info__title span {
  color: var(--za-gold);
}

.zl-anabolika-info__intro {
  max-width: 900px;
  margin-bottom: 30px;
  color: var(--za-muted);
  font-size: 16px;
  line-height: 1.75;
}

/* Three term cards */
.zl-anabolika-info__terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.zl-anabolika-info__term,
.zl-anabolika-info__copy,
.zl-anabolika-info__note {
  position: relative;
  border: 1px solid var(--za-border);
  background: var(--za-box);
}

.zl-anabolika-info__term {
  padding: 20px 22px;
  border-left: 2px solid var(--za-red);
}

.zl-anabolika-info__term-label {
  display: block;
  margin-bottom: 8px;
  color: var(--za-red-hover);
  font-family: var(--za-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.zl-anabolika-info__term p {
  margin-bottom: 0;
  color: var(--za-text);
  font-size: 15px;
  line-height: 1.65;
}

/* Text + side note */
.zl-anabolika-info__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: 14px;
  align-items: stretch;
}

.zl-anabolika-info__copy,
.zl-anabolika-info__note {
  padding: 24px 26px;
}

.zl-anabolika-info__copy p {
  margin-bottom: 16px;
  color: var(--za-muted);
  font-size: 15px;
  line-height: 1.8;
}

.zl-anabolika-info__copy p:last-child {
  margin-bottom: 0;
}

.zl-anabolika-info__note {
  border-color: rgba(242, 194, 48, .4);
  border-top: 2px solid var(--za-gold);
  background: linear-gradient(160deg, rgba(242, 194, 48, .07), rgba(242, 194, 48, 0) 60%), var(--za-box);
}

.zl-anabolika-info .zl-anabolika-info__note h3 {
  margin-bottom: 10px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--za-head);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.zl-anabolika-info__note p {
  margin-bottom: 0;
  color: var(--za-muted);
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .zl-anabolika-info__terms,
  .zl-anabolika-info__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .zl-anabolika-info {
    padding: 40px 0;
  }

  .zl-anabolika-info__inner {
    width: calc(100% - 32px);
    padding: 24px 18px;
  }

  .zl-anabolika-info__intro {
    font-size: 15px;
  }

  .zl-anabolika-info__copy,
  .zl-anabolika-info__note {
    padding: 20px 18px;
  }
}


/* 26.4  mechanism.html --------------------------------------------------- */

.zl-steroid-mechanism,
.zl-steroid-mechanism * {
  box-sizing: border-box;
}

.zl-steroid-mechanism {
  --zm-red: var(--zl-red, #b73232);
  --zm-red-hover: var(--zl-red-hover, #e85859);
  --zm-gold: var(--zl-gold, #f2c230);
  --zm-panel: var(--zl-card, #111214);
  --zm-box: var(--zl-field, #17191c);
  --zm-border: var(--zl-border, #303034);
  --zm-text: var(--zl-text, #f3f3f4);
  --zm-muted: var(--zl-muted, #b9bbc0);
  --zm-head: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  --zm-mono: var(--zl-font-mono, "IBM Plex Mono", monospace);

  width: 100%;
  padding: 56px 0;
  color: var(--zm-text);
}

.zl-steroid-mechanism__inner {
  position: relative;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--zm-border);
  background: var(--zm-panel);
}

.zl-steroid-mechanism__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 96px;
  height: 2px;
  background: var(--zm-red);
}

.zl-steroid-mechanism h2,
.zl-steroid-mechanism h3,
.zl-steroid-mechanism p {
  margin-top: 0;
}

/* Eyebrow + mini logo mark */
.zl-steroid-mechanism__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px !important;
  color: var(--zm-gold);
  font-family: var(--zm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zl-steroid-mechanism__flag {
  display: inline-flex;
  gap: 4px;
}

.zl-steroid-mechanism__flag span {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  transform: skewX(-12deg);
}

.zl-steroid-mechanism__flag span:nth-child(1) {
  border-color: #d5d8dc;
  background: linear-gradient(160deg, #4a4d53, #0a0a0c 55%, #2a2c31);
}

.zl-steroid-mechanism__flag span:nth-child(2) {
  border-color: #e85859;
  background: linear-gradient(160deg, #ff8a8a, #b73232 55%, #e85859);
}

.zl-steroid-mechanism__flag span:nth-child(3) {
  border-color: #ffe06b;
  background: linear-gradient(160deg, #fff4b8, #d9a51c 55%, #ffe06b);
}

/* Title */
.zl-steroid-mechanism .zl-steroid-mechanism__title {
  max-width: 850px;
  margin-bottom: 16px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zm-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.zl-steroid-mechanism__title span {
  color: var(--zm-gold);
}

.zl-steroid-mechanism__intro {
  max-width: 900px;
  margin-bottom: 28px;
  color: var(--zm-muted);
  font-size: 16px;
  line-height: 1.75;
}

/* Four steps */
.zl-steroid-mechanism__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.zl-steroid-mechanism__step,
.zl-steroid-mechanism__whole-body {
  position: relative;
  border: 1px solid var(--zm-border);
  background: var(--zm-box);
}

.zl-steroid-mechanism__step {
  min-width: 0;
  padding: 24px 26px;
  border-left: 2px solid var(--zm-red);
  transition: border-color .2s ease;
}

/* Hover: gold corner tick, top right (same as the product cards).
   No red frame. */
.zl-steroid-mechanism .zl-steroid-mechanism__step:hover {
  border-color: var(--zm-border);
  border-left-color: var(--zm-red);
}

.zl-steroid-mechanism__step::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zm-gold);
  border-right: 2px solid var(--zm-gold);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

.zl-steroid-mechanism__step:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

@media (prefers-reduced-motion: reduce) {
  .zl-steroid-mechanism__step,
  .zl-steroid-mechanism__step::after {
    transition: none;
  }
}

.zl-steroid-mechanism__step-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Icon in a slanted square, like the logo */
.zl-steroid-mechanism__icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--zm-red);
  background: rgba(183, 50, 50, .1);
  color: var(--zm-red-hover);
  transform: skewX(-8deg);
}

.zl-steroid-mechanism__icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transform: skewX(8deg);
}

.zl-steroid-mechanism__number {
  display: block;
  margin-bottom: 4px;
  color: var(--zm-gold);
  font-family: var(--zm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.zl-steroid-mechanism .zl-steroid-mechanism__step h3 {
  margin-bottom: 0;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zm-head);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}

.zl-steroid-mechanism__step p {
  margin-bottom: 0;
  color: var(--zm-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

.zl-steroid-mechanism__step p + p {
  margin-top: 12px !important;
}

/* Whole-body note */
.zl-steroid-mechanism__whole-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 26px;
  border-color: rgba(242, 194, 48, .4);
  border-top: 2px solid var(--zm-gold);
  background: linear-gradient(100deg, rgba(242, 194, 48, .07), rgba(242, 194, 48, 0) 55%), var(--zm-box);
}

.zl-steroid-mechanism__whole-body .zl-steroid-mechanism__icon {
  border-color: var(--zm-gold);
  background: rgba(242, 194, 48, .08);
  color: var(--zm-gold);
}

.zl-steroid-mechanism .zl-steroid-mechanism__whole-body h3 {
  margin-bottom: 8px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zm-head);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
}

.zl-steroid-mechanism__whole-body p {
  margin-bottom: 0;
  color: var(--zm-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .zl-steroid-mechanism__steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .zl-steroid-mechanism {
    padding: 40px 0;
  }

  .zl-steroid-mechanism__inner {
    width: calc(100% - 32px);
    padding: 24px 18px;
  }

  .zl-steroid-mechanism__intro {
    font-size: 15px;
  }

  .zl-steroid-mechanism__step,
  .zl-steroid-mechanism__whole-body {
    padding: 20px 18px;
  }

  .zl-steroid-mechanism__whole-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* 26.5  bodybuilding-info.html ------------------------------------------- */

.zl-bodybuilding-info,
.zl-bodybuilding-info * {
  box-sizing: border-box;
}

.zl-bodybuilding-info {
  --zb-red: var(--zl-red, #b73232);
  --zb-red-hover: var(--zl-red-hover, #e85859);
  --zb-gold: var(--zl-gold, #f2c230);
  --zb-panel: var(--zl-card, #111214);
  --zb-box: var(--zl-field, #17191c);
  --zb-border: var(--zl-border, #303034);
  --zb-text: var(--zl-text, #f3f3f4);
  --zb-muted: var(--zl-muted, #b9bbc0);
  --zb-head: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  --zb-mono: var(--zl-font-mono, "IBM Plex Mono", monospace);

  width: 100%;
  padding: 56px 0;
  color: var(--zb-text);
}

.zl-bodybuilding-info__inner {
  position: relative;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--zb-border);
  background: var(--zb-panel);
}

.zl-bodybuilding-info__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 96px;
  height: 2px;
  background: var(--zb-red);
}

.zl-bodybuilding-info h2,
.zl-bodybuilding-info h3,
.zl-bodybuilding-info p {
  margin-top: 0;
}

/* Eyebrow + mini logo mark */
.zl-bodybuilding-info__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px !important;
  color: var(--zb-gold);
  font-family: var(--zb-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zl-bodybuilding-info__flag {
  display: inline-flex;
  gap: 4px;
}

.zl-bodybuilding-info__flag span {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  transform: skewX(-12deg);
}

.zl-bodybuilding-info__flag span:nth-child(1) {
  border-color: #d5d8dc;
  background: linear-gradient(160deg, #4a4d53, #0a0a0c 55%, #2a2c31);
}

.zl-bodybuilding-info__flag span:nth-child(2) {
  border-color: #e85859;
  background: linear-gradient(160deg, #ff8a8a, #b73232 55%, #e85859);
}

.zl-bodybuilding-info__flag span:nth-child(3) {
  border-color: #ffe06b;
  background: linear-gradient(160deg, #fff4b8, #d9a51c 55%, #ffe06b);
}

/* Title, intro, notice */
.zl-bodybuilding-info .zl-bodybuilding-info__title {
  max-width: 850px;
  margin-bottom: 16px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zb-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.zl-bodybuilding-info__title span {
  color: var(--zb-gold);
}

.zl-bodybuilding-info__intro {
  max-width: 900px;
  margin-bottom: 20px;
  color: var(--zb-muted);
  font-size: 16px;
  line-height: 1.75;
}

.zl-bodybuilding-info__notice {
  max-width: 900px;
  margin: 0 0 36px !important;
  padding: 14px 20px;
  border: 1px solid var(--zb-border);
  border-left: 3px solid var(--zb-red);
  background: var(--zb-box);
  color: var(--zb-muted);
  font-size: 14px;
  line-height: 1.7;
}

.zl-bodybuilding-info__notice strong {
  color: var(--zb-red-hover);
  font-family: var(--zb-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Sub-headings with a slanted red bar */
.zl-bodybuilding-info .zl-bodybuilding-info__section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zb-head);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

.zl-bodybuilding-info__section-heading::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 22px;
  background: var(--zb-red);
  transform: skewX(-12deg);
}

/* Effect and pattern cards */
.zl-bodybuilding-info__effects,
.zl-bodybuilding-info__patterns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.zl-bodybuilding-info__effects {
  margin-bottom: 40px;
}

.zl-bodybuilding-info__effect,
.zl-bodybuilding-info__pattern {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--zb-border);
  background: var(--zb-box);
  transition: border-color .2s ease;
}

.zl-bodybuilding-info__effect {
  border-left: 2px solid var(--zb-red);
}

/* Hover: gold corner tick, top right (same as the product cards).
   No coloured frame. */
.zl-bodybuilding-info__effect,
.zl-bodybuilding-info__pattern {
  position: relative;
}

.zl-bodybuilding-info .zl-bodybuilding-info__effect:hover,
.zl-bodybuilding-info .zl-bodybuilding-info__pattern:hover {
  border-color: var(--zb-border);
}

.zl-bodybuilding-info .zl-bodybuilding-info__effect:hover {
  border-left-color: var(--zb-red);
}

.zl-bodybuilding-info .zl-bodybuilding-info__pattern:hover {
  border-top-color: var(--zb-gold);
}

.zl-bodybuilding-info__effect::after,
.zl-bodybuilding-info__pattern::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zb-gold);
  border-right: 2px solid var(--zb-gold);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

.zl-bodybuilding-info__effect:hover::after,
.zl-bodybuilding-info__pattern:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

@media (prefers-reduced-motion: reduce) {
  .zl-bodybuilding-info__effect,
  .zl-bodybuilding-info__pattern,
  .zl-bodybuilding-info__effect::after,
  .zl-bodybuilding-info__pattern::after {
    transition: none;
  }
}

.zl-bodybuilding-info__pattern {
  border-top: 2px solid var(--zb-gold);
}



.zl-bodybuilding-info__pattern:last-child {
  grid-column: 1 / -1;
}

.zl-bodybuilding-info__effect-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

/* Icon in a slanted square, like the logo */
.zl-bodybuilding-info__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--zb-red);
  background: rgba(183, 50, 50, .1);
  color: var(--zb-red-hover);
  transform: skewX(-8deg);
}

.zl-bodybuilding-info__icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transform: skewX(8deg);
}

.zl-bodybuilding-info .zl-bodybuilding-info__effect h3,
.zl-bodybuilding-info .zl-bodybuilding-info__pattern h3 {
  margin-bottom: 0;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zb-head);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.zl-bodybuilding-info .zl-bodybuilding-info__pattern h3 {
  margin-bottom: 8px;
  color: var(--zb-gold);
}

.zl-bodybuilding-info__effect p,
.zl-bodybuilding-info__pattern p {
  margin-bottom: 0;
  color: var(--zb-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .zl-bodybuilding-info__effects,
  .zl-bodybuilding-info__patterns {
    grid-template-columns: 1fr;
  }

  .zl-bodybuilding-info__pattern:last-child {
    grid-column: auto;
  }
}

@media (max-width: 767px) {
  .zl-bodybuilding-info {
    padding: 40px 0;
  }

  .zl-bodybuilding-info__inner {
    width: calc(100% - 32px);
    padding: 24px 18px;
  }

  .zl-bodybuilding-info__intro {
    font-size: 15px;
  }

  .zl-bodybuilding-info__effect,
  .zl-bodybuilding-info__pattern {
    padding: 20px 18px;
  }
}


/* 26.6  steroid-catalog.html --------------------------------------------- */

.zl-steroid-catalog,
.zl-steroid-catalog * {
  box-sizing: border-box;
}

.zl-steroid-catalog {
  --zc-red: var(--zl-red, #b73232);
  --zc-red-hover: var(--zl-red-hover, #e85859);
  --zc-gold: var(--zl-gold, #f2c230);
  --zc-panel: var(--zl-card, #111214);
  --zc-box: var(--zl-field, #17191c);
  --zc-image-bg: #0c0d0f;
  --zc-border: var(--zl-border, #303034);
  --zc-text: var(--zl-text, #f3f3f4);
  --zc-muted: var(--zl-muted, #b9bbc0);
  --zc-head: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  --zc-mono: var(--zl-font-mono, "IBM Plex Mono", monospace);

  width: 100%;
  padding: 56px 0;
  color: var(--zc-text);
}

.zl-steroid-catalog__inner {
  position: relative;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--zc-border);
  background: var(--zc-panel);
}

.zl-steroid-catalog__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 96px;
  height: 2px;
  background: var(--zc-red);
}

.zl-steroid-catalog h2,
.zl-steroid-catalog h3,
.zl-steroid-catalog p {
  margin-top: 0;
}

/* Eyebrow + mini logo mark */
.zl-steroid-catalog__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px !important;
  color: var(--zc-gold);
  font-family: var(--zc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zl-steroid-catalog__flag {
  display: inline-flex;
  gap: 4px;
}

.zl-steroid-catalog__flag span {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  transform: skewX(-12deg);
}

.zl-steroid-catalog__flag span:nth-child(1) {
  border-color: #d5d8dc;
  background: linear-gradient(160deg, #4a4d53, #0a0a0c 55%, #2a2c31);
}

.zl-steroid-catalog__flag span:nth-child(2) {
  border-color: #e85859;
  background: linear-gradient(160deg, #ff8a8a, #b73232 55%, #e85859);
}

.zl-steroid-catalog__flag span:nth-child(3) {
  border-color: #ffe06b;
  background: linear-gradient(160deg, #fff4b8, #d9a51c 55%, #ffe06b);
}

/* Title, intro, notice */
.zl-steroid-catalog .zl-steroid-catalog__title {
  max-width: 900px;
  margin-bottom: 16px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zc-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.zl-steroid-catalog__title span {
  color: var(--zc-gold);
}

.zl-steroid-catalog__intro {
  max-width: 900px;
  margin-bottom: 20px;
  color: var(--zc-muted);
  font-size: 16px;
  line-height: 1.75;
}

.zl-steroid-catalog__notice {
  max-width: 900px;
  margin: 0 0 40px !important;
  padding: 14px 20px;
  border: 1px solid var(--zc-border);
  border-left: 3px solid var(--zc-red);
  background: var(--zc-box);
  color: var(--zc-muted);
  font-size: 14px;
  line-height: 1.7;
}

.zl-steroid-catalog__notice strong {
  color: var(--zc-red-hover);
  font-family: var(--zc-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Groups */
.zl-steroid-catalog__group + .zl-steroid-catalog__group {
  margin-top: 44px;
}

.zl-steroid-catalog .zl-steroid-catalog__group-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zc-head);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

.zl-steroid-catalog__group-heading::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 22px;
  background: var(--zc-red);
  transform: skewX(-12deg);
}

.zl-steroid-catalog__group-intro {
  max-width: 950px;
  margin-bottom: 20px;
  color: var(--zc-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

/* Cards */
.zl-steroid-catalog__grid {
  display: grid;
  gap: 14px;
}

.zl-steroid-catalog__grid--oral {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zl-steroid-catalog__grid--injectable {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zl-steroid-catalog__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--zc-border);
  background: var(--zc-box);
  transition: border-color .2s ease, transform .2s ease;
}

/* Hover: lift + gold corner tick, top right (same as the product
   cards). No red frame. */
.zl-steroid-catalog__card {
  position: relative;
}

.zl-steroid-catalog .zl-steroid-catalog__card:hover {
  border-color: var(--zc-border);
  transform: translateY(-3px);
}

.zl-steroid-catalog__card::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zc-gold);
  border-right: 2px solid var(--zc-gold);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

.zl-steroid-catalog__card:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

@media (prefers-reduced-motion: reduce) {
  .zl-steroid-catalog__card,
  .zl-steroid-catalog__card::after {
    transition: none;
  }

  .zl-steroid-catalog .zl-steroid-catalog__card:hover {
    transform: none;
  }
}

.zl-steroid-catalog__image {
  position: relative;
  display: grid;
  min-height: 210px;
  padding: 16px;
  place-items: center;
  border-bottom: 1px solid var(--zc-border);
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 65%), var(--zc-image-bg);
}

.zl-steroid-catalog__image img {
  display: block;
  width: 100% !important;
  height: 180px !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: center;
}

.zl-steroid-catalog__image--trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 16px 20px;
}

.zl-steroid-catalog__image--trio figure {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.zl-steroid-catalog__image--trio img {
  height: 145px !important;
}

.zl-steroid-catalog__image--trio figcaption {
  color: var(--zc-muted);
  font-family: var(--zc-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.zl-steroid-catalog__content {
  flex: 1;
  padding: 18px 22px 22px;
}

/* "Oral" / "Injizierbar" tag: small slanted outline */
.zl-steroid-catalog__type {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 9px;
  border: 1px solid var(--zc-red);
  color: var(--zc-red-hover);
  font-family: var(--zc-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  transform: skewX(-8deg);
}

.zl-steroid-catalog .zl-steroid-catalog__card h3 {
  margin-bottom: 10px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zc-head);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.zl-steroid-catalog__card p {
  margin-bottom: 0;
  color: var(--zc-muted);
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 1024px) {
  .zl-steroid-catalog__grid--injectable {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .zl-steroid-catalog {
    padding: 40px 0;
  }

  .zl-steroid-catalog__inner {
    width: calc(100% - 32px);
    padding: 24px 18px;
  }

  .zl-steroid-catalog__intro {
    font-size: 15px;
  }

  .zl-steroid-catalog__grid--oral,
  .zl-steroid-catalog__grid--injectable {
    grid-template-columns: 1fr;
  }

  .zl-steroid-catalog__image {
    min-height: 190px;
  }

  .zl-steroid-catalog__image img {
    height: 165px !important;
  }

  .zl-steroid-catalog__image--trio img {
    height: 130px !important;
  }

  .zl-steroid-catalog__content {
    padding: 16px 18px 20px;
  }
}

/* Card titles link to the product */
.zl-steroid-catalog__content h3 a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .2s ease;
}

.zl-steroid-catalog__content h3 a:hover,
.zl-steroid-catalog__content h3 a:focus-visible {
  color: var(--zl-red-hover, #e85859) !important;
}


/* 26.7  steroid-effects.html --------------------------------------------- */

.zl-steroid-effects,
.zl-steroid-effects * {
  box-sizing: border-box;
}

.zl-steroid-effects {
  --ze-red: var(--zl-red, #b73232);
  --ze-red-hover: var(--zl-red-hover, #e85859);
  --ze-gold: var(--zl-gold, #f2c230);
  --ze-panel: var(--zl-card, #111214);
  --ze-box: var(--zl-field, #17191c);
  --ze-border: var(--zl-border, #303034);
  --ze-text: var(--zl-text, #f3f3f4);
  --ze-muted: var(--zl-muted, #b9bbc0);
  --ze-head: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  --ze-mono: var(--zl-font-mono, "IBM Plex Mono", monospace);

  width: 100%;
  padding: 56px 0;
  color: var(--ze-text);
}

.zl-steroid-effects__inner {
  position: relative;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--ze-border);
  background: var(--ze-panel);
}

.zl-steroid-effects__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 96px;
  height: 2px;
  background: var(--ze-red);
}

.zl-steroid-effects h2,
.zl-steroid-effects h3,
.zl-steroid-effects p {
  margin-top: 0;
}

/* Eyebrow + mini logo mark */
.zl-steroid-effects__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px !important;
  color: var(--ze-gold);
  font-family: var(--ze-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zl-steroid-effects__flag {
  display: inline-flex;
  gap: 4px;
}

.zl-steroid-effects__flag span {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  transform: skewX(-12deg);
}

.zl-steroid-effects__flag span:nth-child(1) {
  border-color: #d5d8dc;
  background: linear-gradient(160deg, #4a4d53, #0a0a0c 55%, #2a2c31);
}

.zl-steroid-effects__flag span:nth-child(2) {
  border-color: #e85859;
  background: linear-gradient(160deg, #ff8a8a, #b73232 55%, #e85859);
}

.zl-steroid-effects__flag span:nth-child(3) {
  border-color: #ffe06b;
  background: linear-gradient(160deg, #fff4b8, #d9a51c 55%, #ffe06b);
}

/* Title, intro, notice */
.zl-steroid-effects .zl-steroid-effects__title {
  max-width: 850px;
  margin-bottom: 16px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--ze-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.zl-steroid-effects__title span {
  color: var(--ze-gold);
}

.zl-steroid-effects__intro {
  max-width: 900px;
  margin-bottom: 20px;
  color: var(--ze-muted);
  font-size: 16px;
  line-height: 1.75;
}

.zl-steroid-effects__notice {
  max-width: 900px;
  margin: 0 0 32px !important;
  padding: 14px 20px;
  border: 1px solid var(--ze-border);
  border-left: 3px solid var(--ze-red);
  background: var(--ze-box);
  color: var(--ze-muted);
  font-size: 14px;
  line-height: 1.7;
}

.zl-steroid-effects__notice strong {
  color: var(--ze-red-hover);
  font-family: var(--ze-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Cards */
.zl-steroid-effects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.zl-steroid-effects__card {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--ze-border);
  border-left: 2px solid var(--ze-red);
  background: var(--ze-box);
  transition: border-color .2s ease;
}

/* Hover: gold corner tick, top right (same as the product cards).
   No red frame. */
.zl-steroid-effects__card {
  position: relative;
}

.zl-steroid-effects .zl-steroid-effects__card:hover {
  border-color: var(--ze-border);
  border-left-color: var(--ze-red);
}

.zl-steroid-effects__card::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--ze-gold);
  border-right: 2px solid var(--ze-gold);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

.zl-steroid-effects__card:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

@media (prefers-reduced-motion: reduce) {
  .zl-steroid-effects__card,
  .zl-steroid-effects__card::after {
    transition: none;
  }
}

/* "Medizinischer Nutzen": full width, gold */
.zl-steroid-effects__card--medical {
  grid-column: 1 / -1;
  border-color: rgba(242, 194, 48, .4);
  border-left: 1px solid rgba(242, 194, 48, .4);
  border-top: 2px solid var(--ze-gold);
  background: linear-gradient(100deg, rgba(242, 194, 48, .07), rgba(242, 194, 48, 0) 55%), var(--ze-box);
}

.zl-steroid-effects .zl-steroid-effects__card--medical:hover {
  border-color: rgba(242, 194, 48, .4);
  border-top-color: var(--ze-gold);
}

.zl-steroid-effects__card--medical p {
  max-width: 820px;
}

.zl-steroid-effects__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

/* Icon in a slanted square, like the logo */
.zl-steroid-effects__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--ze-red);
  background: rgba(183, 50, 50, .1);
  color: var(--ze-red-hover);
  transform: skewX(-8deg);
}

.zl-steroid-effects__card--medical .zl-steroid-effects__icon {
  border-color: var(--ze-gold);
  background: rgba(242, 194, 48, .08);
  color: var(--ze-gold);
}

.zl-steroid-effects__icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transform: skewX(8deg);
}

.zl-steroid-effects .zl-steroid-effects__card h3 {
  margin-bottom: 0;
  color: var(--zl-heading, #fafafa);
  font-family: var(--ze-head);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.zl-steroid-effects .zl-steroid-effects__card--medical h3 {
  color: var(--ze-gold);
}

.zl-steroid-effects__card p {
  margin-bottom: 0;
  color: var(--ze-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

@media (max-width: 1024px) {
  .zl-steroid-effects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .zl-steroid-effects {
    padding: 40px 0;
  }

  .zl-steroid-effects__inner {
    width: calc(100% - 32px);
    padding: 24px 18px;
  }

  .zl-steroid-effects__intro {
    font-size: 15px;
  }

  .zl-steroid-effects__grid {
    grid-template-columns: 1fr;
  }

  .zl-steroid-effects__card {
    padding: 20px 18px;
  }
}


/* 26.8  steroid-risks.html ----------------------------------------------- */

.zl-steroid-risks,
.zl-steroid-risks * {
  box-sizing: border-box;
}

.zl-steroid-risks {
  --zr-red: var(--zl-red, #b73232);
  --zr-red-hover: var(--zl-red-hover, #e85859);
  --zr-gold: var(--zl-gold, #f2c230);
  --zr-panel: var(--zl-card, #111214);
  --zr-box: var(--zl-field, #17191c);
  --zr-border: var(--zl-border, #303034);
  --zr-text: var(--zl-text, #f3f3f4);
  --zr-muted: var(--zl-muted, #b9bbc0);
  --zr-head: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  --zr-mono: var(--zl-font-mono, "IBM Plex Mono", monospace);

  width: 100%;
  padding: 56px 0;
  color: var(--zr-text);
}

.zl-steroid-risks__inner {
  position: relative;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--zr-border);
  background: var(--zr-panel);
}

.zl-steroid-risks__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 96px;
  height: 2px;
  background: var(--zr-red);
}

.zl-steroid-risks h2,
.zl-steroid-risks h3,
.zl-steroid-risks p {
  margin-top: 0;
}

/* Eyebrow + mini logo mark */
.zl-steroid-risks__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px !important;
  color: var(--zr-gold);
  font-family: var(--zr-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zl-steroid-risks__flag {
  display: inline-flex;
  gap: 4px;
}

.zl-steroid-risks__flag span {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  transform: skewX(-12deg);
}

.zl-steroid-risks__flag span:nth-child(1) {
  border-color: #d5d8dc;
  background: linear-gradient(160deg, #4a4d53, #0a0a0c 55%, #2a2c31);
}

.zl-steroid-risks__flag span:nth-child(2) {
  border-color: #e85859;
  background: linear-gradient(160deg, #ff8a8a, #b73232 55%, #e85859);
}

.zl-steroid-risks__flag span:nth-child(3) {
  border-color: #ffe06b;
  background: linear-gradient(160deg, #fff4b8, #d9a51c 55%, #ffe06b);
}

/* Title, intro, notice */
.zl-steroid-risks .zl-steroid-risks__title {
  max-width: 850px;
  margin-bottom: 16px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zr-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.zl-steroid-risks__title span {
  color: var(--zr-gold);
}

.zl-steroid-risks__intro {
  max-width: 900px;
  margin-bottom: 20px;
  color: var(--zr-muted);
  font-size: 16px;
  line-height: 1.75;
}

.zl-steroid-risks__notice {
  max-width: 900px;
  margin: 0 0 32px !important;
  padding: 14px 20px;
  border: 1px solid var(--zr-border);
  border-left: 3px solid var(--zr-red);
  background: var(--zr-box);
  color: var(--zr-muted);
  font-size: 14px;
  line-height: 1.7;
}

.zl-steroid-risks__notice strong {
  color: var(--zr-red-hover);
  font-family: var(--zr-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Cards */
.zl-steroid-risks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.zl-steroid-risks__card {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--zr-border);
  border-left: 2px solid var(--zr-red);
  background: var(--zr-box);
  transition: border-color .2s ease;
}

/* Hover: gold corner tick, top right (same as the product cards).
   No red frame. */
.zl-steroid-risks__card {
  position: relative;
}

.zl-steroid-risks .zl-steroid-risks__card:hover {
  border-color: var(--zr-border);
  border-left-color: var(--zr-red);
}

.zl-steroid-risks .zl-steroid-risks__card--urgent:hover {
  border-top-color: var(--zr-gold);
}

.zl-steroid-risks__card::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--zr-gold);
  border-right: 2px solid var(--zr-gold);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

.zl-steroid-risks__card:hover::after {
  width: 26px;
  height: 26px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

@media (prefers-reduced-motion: reduce) {
  .zl-steroid-risks__card,
  .zl-steroid-risks__card::after {
    transition: none;
  }
}

/* Most serious risks: gold top line */
.zl-steroid-risks__card--urgent {
  border-top: 2px solid var(--zr-gold);
}

/* 13th card fills the last row instead of sitting alone */
.zl-steroid-risks__card:last-child {
  grid-column: 1 / -1;
}

.zl-steroid-risks__card:last-child p {
  max-width: 820px;
}

.zl-steroid-risks__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

/* Icon in a slanted square, like the logo */
.zl-steroid-risks__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--zr-red);
  background: rgba(183, 50, 50, .1);
  color: var(--zr-red-hover);
  transform: skewX(-8deg);
}

.zl-steroid-risks__card--urgent .zl-steroid-risks__icon {
  border-color: var(--zr-gold);
  background: rgba(242, 194, 48, .08);
  color: var(--zr-gold);
}

.zl-steroid-risks__icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transform: skewX(8deg);
}

.zl-steroid-risks .zl-steroid-risks__card h3 {
  margin-bottom: 0;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zr-head);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.zl-steroid-risks__card p {
  margin-bottom: 0;
  color: var(--zr-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

@media (max-width: 1024px) {
  .zl-steroid-risks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .zl-steroid-risks {
    padding: 40px 0;
  }

  .zl-steroid-risks__inner {
    width: calc(100% - 32px);
    padding: 24px 18px;
  }

  .zl-steroid-risks__intro {
    font-size: 15px;
  }

  .zl-steroid-risks__grid {
    grid-template-columns: 1fr;
  }

  .zl-steroid-risks__card {
    padding: 20px 18px;
  }
}


/* 26.9  faq-combined.html ------------------------------------------------ */

.zl-faq,
.zl-faq * {
  box-sizing: border-box;
}

.zl-faq {
  --zq-red: var(--zl-red, #b73232);
  --zq-red-hover: var(--zl-red-hover, #e85859);
  --zq-gold: var(--zl-gold, #f2c230);
  --zq-panel: var(--zl-card, #111214);
  --zq-box: var(--zl-field, #17191c);
  --zq-border: var(--zl-border, #303034);
  --zq-text: var(--zl-text, #f3f3f4);
  --zq-muted: var(--zl-muted, #b9bbc0);
  --zq-head: var(--zl-font-heading, "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif);
  --zq-mono: var(--zl-font-mono, "IBM Plex Mono", monospace);

  width: 100%;
  padding: 56px 0;
  color: var(--zq-text);
  counter-reset: zsf;
}

.zl-faq__inner {
  position: relative;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--zq-border);
  background: var(--zq-panel);
}

.zl-faq__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 96px;
  height: 2px;
  background: var(--zq-red);
}

/* Eyebrow with the logo's three squares (drawn by CSS) */
.zl-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px !important;
  color: var(--zq-gold);
  font-family: var(--zq-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zl-faq__eyebrow::before {
  content: "";
  flex: 0 0 47px;
  width: 47px;
  height: 13px;
  background:
    linear-gradient(160deg, #4a4d53, #0a0a0c 55%, #2a2c31) 1px 1px / 11px 11px no-repeat,
    linear-gradient(#d5d8dc, #d5d8dc) 0 0 / 13px 13px no-repeat,
    linear-gradient(160deg, #ff8a8a, #b73232 55%, #e85859) 17px 0 / 13px 13px no-repeat,
    linear-gradient(160deg, #fff4b8, #d9a51c 55%, #ffe06b) 34px 0 / 13px 13px no-repeat;
  transform: skewX(-12deg);
}

.zl-faq .zl-faq__title {
  max-width: 850px;
  margin: 0 0 14px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zq-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.zl-faq__intro {
  max-width: 900px;
  margin: 0 0 28px !important;
  color: var(--zq-muted);
  font-size: 16px;
  line-height: 1.75;
}

/* Group headings */
.zl-faq .zl-faq__group-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--zl-heading, #fafafa);
  font-family: var(--zq-head);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
}

.zl-faq__group-title::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 20px;
  background: var(--zq-red);
  transform: skewX(-12deg);
}

.zl-faq__group + .zl-faq__group {
  margin-top: 36px;
}

/* Accordion */
.zl-faq__list {
  display: grid;
  gap: 10px;
}

.zl-faq__item {
  counter-increment: zsf;
  border: 1px solid var(--zq-border);
  border-left: 2px solid var(--zq-red);
  background: var(--zq-box);
  transition: border-color .2s ease;
}

/* Hover / open: gold corner tick, top right (same as the product
   cards). No red frame. */
.zl-faq__item {
  position: relative;
}

.zl-faq .zl-faq__item:hover,
.zl-faq .zl-faq__item[open] {
  border-color: var(--zq-border);
  border-left-color: var(--zq-red);
}

.zl-faq__item::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--zq-gold);
  border-right: 2px solid var(--zq-gold);
  opacity: .55;
  pointer-events: none;
  transition: opacity .25s ease, width .25s ease, height .25s ease, filter .25s ease;
}

.zl-faq__item:hover::after,
.zl-faq__item[open]::after {
  width: 18px;
  height: 18px;
  border-color: var(--zl-gold-hover, #ffe06b);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px #ffe06b)
    drop-shadow(0 0 6px rgba(255, 210, 47, .9))
    drop-shadow(0 0 14px rgba(242, 194, 48, .6));
}

@media (prefers-reduced-motion: reduce) {
  .zl-faq__item,
  .zl-faq__item::after,
  .zl-faq__item summary::after {
    transition: none;
  }
}

.zl-faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 74px 18px 22px;
  color: var(--zq-text);
  font-family: var(--zq-head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.zl-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Number 01, 02 … */
.zl-faq__item summary::before {
  content: counter(zsf, decimal-leading-zero);
  flex: 0 0 auto;
  color: var(--zq-gold);
  font-family: var(--zq-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
}

/* Plus / minus in a slanted square */
.zl-faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 30px;
  display: grid;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  place-items: center;
  border: 1px solid var(--zq-red);
  color: var(--zq-red-hover);
  font-family: var(--zq-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transform: skewX(-8deg);
  transition: background-color .2s ease, color .2s ease;
}

.zl-faq__item[open] summary::after {
  content: "\2212";
  background: var(--zq-red);
  color: #fff;
}

.zl-faq__item summary:hover {
  color: #fff;
}

.zl-faq__item summary:focus-visible {
  outline: 2px solid var(--zq-gold);
  outline-offset: 2px;
}

.zl-faq__answer {
  margin: 0 22px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--zq-border);
  color: var(--zq-muted);
  font-size: 15px;
  line-height: 1.75;
}

.zl-faq__answer p {
  margin: 0 0 10px;
}

.zl-faq__answer p:last-child {
  margin-bottom: 0;
}

.zl-faq__answer ul {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.zl-faq__answer li {
  position: relative;
  margin: 0 !important;
  padding: 6px 0 6px 20px;
}

.zl-faq__answer li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--zq-red);
  transform: skewX(-12deg);
}

.zl-faq__answer strong {
  color: var(--zq-text);
}

@media (max-width: 767px) {
  .zl-faq {
    padding: 40px 0;
  }

  .zl-faq__inner {
    width: calc(100% - 32px);
    padding: 24px 16px;
  }

  .zl-faq__item summary {
    gap: 12px;
    padding: 16px 62px 16px 16px;
    font-size: 1rem;
  }

  .zl-faq__item summary::after {
    right: 22px;
  }

  .zl-faq__answer {
    margin: 0 16px;
    font-size: 14.5px;
  }
}


/* =====================================================================
   27  Mobile speed
   2026-10-31: phones were busy for about 2 s laying out and painting
   the whole long homepage before anyone scrolled.
   - content-visibility: sections below the first screen are only laid
     out and painted when they come near the screen. The reserved
     height (contain-intrinsic-size) keeps the scrollbar steady, and
     "auto" remembers the real height once a section has been seen.
   - Phones: the large blurred hero glow and its breathing animation
     are switched off (the frame keeps its soft light).
   ===================================================================== */

#zl-all-products,
.zlv3-reasons,
.zl-anabolika-info,
.zl-steroid-mechanism,
.zl-bodybuilding-info,
.zl-steroid-catalog,
.zl-steroid-effects,
.zl-steroid-risks,
.zl-faq,
.zl-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

@media (max-width: 767px) {
  .zl-hero__visual::before {
    animation: none;
    filter: none;
    opacity: .8;
  }

  .zl-footer::before {
    animation: none;
  }
}

/* Loop "Warenkorb" button: label centred. The real link text ("In den
   Warenkorb") is hidden with font-size 0, but letter-spacing set in px
   by the theme or widget still gave each hidden letter width, which
   pushed the visible ::before label to the left. Spacing now lives on
   the label only, and the hidden text takes no room. */
html body:not(#zl-boost) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.button.add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  white-space: nowrap;
}

html body:not(#zl-boost) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.button.add_to_cart_button::before {
  display: block;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
}

html body:not(#zl-boost) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.button.add_to_cart_button.loading {
  gap: 8px !important;
}
/* 2026-10-31  Translated "Warenkorb" label on loop buttons.
   The short label is drawn with ::before (section 09), so the
   translation plugin cannot see it. The page language ()
   picks the right word here instead. German stays the default. */
html:lang(nl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Winkelwagen"; }
html:lang(nl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Toevoegen"; }
html:lang(nl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 In winkelwagen"; }
html:lang(en) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Add to cart"; }
html:lang(en) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Adding"; }
html:lang(en) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 In cart"; }
html:lang(fr) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Au panier"; }
html:lang(fr) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Ajout"; }
html:lang(fr) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Dans le panier"; }
html:lang(es) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Al carrito"; }
html:lang(es) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Añadiendo"; }
html:lang(es) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 En el carrito"; }
html:lang(it) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Al carrello"; }
html:lang(it) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Aggiunta"; }
html:lang(it) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Nel carrello"; }
html:lang(pt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Ao carrinho"; }
html:lang(pt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "A adicionar"; }
html:lang(pt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 No carrinho"; }
html:lang(pl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Do koszyka"; }
html:lang(pl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Dodawanie"; }
html:lang(pl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 W koszyku"; }
html:lang(da) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Læg i kurv"; }
html:lang(da) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Tilføjer"; }
html:lang(da) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 I kurven"; }
html:lang(sv) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Till varukorg"; }
html:lang(sv) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Lägger till"; }
html:lang(sv) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 I varukorgen"; }
html:lang(fi) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Ostoskoriin"; }
html:lang(fi) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Lisätään"; }
html:lang(fi) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Ostoskorissa"; }
html:lang(et) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Ostukorvi"; }
html:lang(et) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Lisamine"; }
html:lang(et) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Ostukorvis"; }
html:lang(lv) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Ielikt grozā"; }
html:lang(lv) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Pievieno"; }
html:lang(lv) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Ir grozā"; }
html:lang(lt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Į krepšelį"; }
html:lang(lt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Dedama"; }
html:lang(lt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Krepšelyje"; }
html:lang(cs) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Do košíku"; }
html:lang(cs) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Přidávám"; }
html:lang(cs) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 V košíku"; }
html:lang(sk) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Do košíka"; }
html:lang(sk) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Pridávam"; }
html:lang(sk) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 V košíku"; }
html:lang(sl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "V košarico"; }
html:lang(sl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Dodajanje"; }
html:lang(sl) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 V košarici"; }
html:lang(hu) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Kosárba"; }
html:lang(hu) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Hozzáadás"; }
html:lang(hu) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Kosárban"; }
html:lang(ro) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Adaugă în coș"; }
html:lang(ro) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Se adaugă"; }
html:lang(ro) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 În coș"; }
html:lang(bg) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "В количката"; }
html:lang(bg) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Добавяне"; }
html:lang(bg) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Добавено"; }
html:lang(hr) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "U košaricu"; }
html:lang(hr) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Dodavanje"; }
html:lang(hr) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 U košarici"; }
html:lang(el) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Στο καλάθι"; }
html:lang(el) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Προσθήκη"; }
html:lang(el) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Προστέθηκε"; }
html:lang(mt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Fil-karrettun"; }
html:lang(mt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Qed jiżdied"; }
html:lang(mt) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Miżjud"; }
html:lang(ga) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button::before { content: "Sa chiseán"; }
html:lang(ga) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.loading::before { content: "Á chur leis"; }
html:lang(ga) :is(.woocommerce, .woocommerce-page, #zl-all-products) ul.products li.product a.add_to_cart_button.added::before { content: "\2713\00a0 Sa chiseán"; }