/* WooCommerce integration layer. Loaded only when WooCommerce is active. */
.woocommerce ul.products,
.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-large) var(--space-small-plus);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .woocommerce ul.products,
  .wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-large-plus) var(--space-medium); }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.grid-products__item { float: none; width: auto; margin: 0; }
.card-product__title a { color: inherit; text-decoration: none; }

.woocommerce-cart-form { margin: 0; }
.woocommerce-cart-form .cart-items { box-sizing: border-box; }
.sklad-cart-update {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: var(--space-medium);
  color: var(--ui-500);
}

.sklad-price-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-small);
  margin-top: var(--space-medium);
}
.sklad-price-filter label {
  display: grid;
  gap: var(--space-xxsmall);
  font-family: var(--font-sans-serif);
  font-size: var(--text-small-size);
}
.sklad-price-filter input {
  width: 100%;
  min-height: 44px;
  padding-inline: var(--space-small);
  border: 1px solid var(--ui-200);
  background: var(--ui-00);
}
.facets__footer { padding-block: var(--space-large); }
.facets__footer .sklad-button { width: 100%; justify-content: center; }

.line-item__media a { display: block; width: 100%; height: 100%; }
.line-item__infos__title a { color: inherit; text-decoration: none; }
.cart-total__button,
.cart-total__sticky-checkout__button { text-decoration: none; }

/* Reset only Woo's float widths. The complete mini-cart and checkout visuals
   live in components.css and match the static FE contract. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none;
  width: 100%;
}
.sklad-empty-state { padding-block: var(--space-xxlarge); text-align: center; }
.sklad-empty-state > * + * { margin-top: var(--space-medium); }

.sklad-family-swatch { text-decoration: none; }
.sklad-family-swatch.is-selected { border-color: var(--ui-950); }
.sklad-family-swatch.is-selected .swatch__color-placeholder { clip-path: inset(2px round var(--space-xxsmall)); }
.hero__description { max-width: 54rem; margin: var(--space-medium) auto 0; color: var(--ui-600); }
.card-product__actions { position: relative; z-index: 2; }
.button-wishlist.is-active,
.sklad-compare-button.is-active { color: var(--ui-950); }
.sklad-compare-button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--ui-400); }
.card-product__actions .sklad-compare-button { position: relative; z-index: 2; margin-left: var(--space-xsmall); }
.sklad-product-list-actions { display: flex; align-items: center; gap: var(--space-small); }
.sklad-list-page { padding-block: calc(var(--header-height) + var(--space-xxlarge)) var(--space-xxxlarge); }
.sklad-list-page > .title { margin-bottom: var(--space-xlarge); }
.sklad-compare-table { overflow-x: auto; }
.sklad-compare-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.sklad-compare-table th,
.sklad-compare-table td { width: 20%; padding: var(--space-medium); border-bottom: 1px solid var(--ui-200); text-align: left; vertical-align: top; }
/* height:auto for the same reason as the checkout thumbnail in wordpress.css:
   Woo's width/height attributes otherwise set a height and defeat aspect-ratio. */
.sklad-compare-table img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Single product: Woo state inside the existing FE composition. */
.sklad-product-shell { padding-top: calc(var(--header-height) + var(--space-large)); }
.sklad-product-shell > .breadcrumb { margin-bottom: var(--space-large); }
/* The breadcrumb itself is a component and lives in components.css. It used to
   be re-declared here, and because this file loads later that copy won: it put
   back the flex-wrap the component had dropped, so a long trail wrapped to a
   second line and then, being nowrap, ran off the right edge. What it declared
   beyond that was already true — `a { color: inherit; text-decoration: none }`
   is in base.css, and the separator is a ::before on every item but the first. */
.product-summary__collection a { color: inherit; text-decoration: none; }
.product-summary__description > :first-child { margin-top: 0; }
.product-summary__description > :last-child { margin-bottom: 0; }
.product-summary__buy .single_add_to_cart_button { flex: 1 1 auto; justify-content: center; }
.product-summary__buy .single_add_to_cart_button:disabled { opacity: .45; }
.sklad-related-products { padding-top: var(--space-xxlarge); }
.sklad-related-products .product-row__header { margin-bottom: var(--space-large); }
.sklad-related-products .grid-products__list { margin: 0; padding: 0; list-style: none; }

/* No .lightbox rules here on purpose. This file predates the shared
   .lightbox component now in components.css (Woo's own image-viewer markup
   — .lightbox__backdrop, .lightbox__inner — that current markup never
   prints), and because this stylesheet is enqueued after sklad-components,
   its same-specificity selectors silently won: .lightbox showed display:
   block instead of flex, .lightbox__figure display: grid instead of flex
   (collapsing multi-slide layout entirely), and .lightbox__close's padding
   was 8px instead of the component's 6px. Measured on the product page,
   05.09.2026 — see PR "The viewer becomes the gallery, only larger". If the
   component ever needs a WordPress-only difference, it belongs here again,
   but as a rule that adds to components.css rather than one that silently
   overrides it.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.sklad-product-shell { padding-top: calc(var(--header-height) + var(--space-medium)); }
	.sklad-product-shell.container { padding-inline: 0; }
	.sklad-product-shell > .breadcrumb { margin-inline: var(--gutters-side); }
  .sklad-related-products .grid-products__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}