/* ================================================================
   Yonelle Single Product – Figma Pixel-Perfect
   Figma nodes: 401:993 (section 1), 316:2637 (reviews), 442:5086 (video)
   Full page: 401:982
   Grid: max-width 1920px centered
   ================================================================ */

/* ── CSS Custom Properties ────────────────────────────────────── */

:root {
  --y-grid-max: 1920px;
  --y-beige-900: #272725;
  --y-beige-800: #444340;
  --y-beige-700: #716e68;
  --y-beige-500: #aba799;
  --y-beige-200: #dbdad6;
  --y-beige-100: #faf9f6;
  --y-beige-000: #ffffff;
  --y-font-body: "Plus Jakarta Sans", sans-serif;
  --y-font-head: "Cormorant", serif;
}

/* ── Reset / Layout ────────────────────────────────────────────── */

.yonelle-single-product {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Section 1: Gallery + Info (50/50 grid) ────────────────────── */

.yonelle-product-columns,
.yonelle-product-columns.wp-block-columns,
.yonelle-product-columns.is-layout-flex,
.wp-block-columns.yonelle-product-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  flex-wrap: unset !important;
  gap: 0 !important;
  margin: 0 auto !important;
  max-width: var(--y-grid-max) !important;
  width: 100% !important;
  background: var(--y-beige-000);

  @media (max-width: 781px) {
    grid-template-columns: 1fr !important;
  }
}

.yonelle-product-columns > .wp-block-column,
.yonelle-product-columns.is-layout-flex > .wp-block-column {
  margin: 0 !important;
  flex-basis: unset !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ── Gallery Column (Left – 50%) ───────────────────────────────── */

/* Hero section layout principle (user scope 2026-04-20):
 *   1. Jeśli right col (info produktu) MIEŚCI SIĘ z gallery natural w viewport →
 *      section nie scrolluje, sticky no-op, bez oceanu nad/pod.
 *   2. Jeśli right col DŁUŻSZA niż gallery → gallery sticky podczas scrolla sekcji,
 *      left col stretched do right col height (żeby gallery miała sticky room).
 *   3. Żadnej 100vh na right col (bo daje ocean na wysokich viewportach).
 *
 * Impl:
 *   - parent .yonelle-product-columns: align-items: flex-start → right col natural.
 *   - left col (gallery-col): align-self: stretch → zawsze do section height = max(L,R).
 *     Gallery w środku sticky top:0 z fixed height calc(100vh - header) → widoczna cała
 *     przy sticku; sticky room = col_height - gallery_height.
 *   - żadnego min-height: 100vh na gallery-col (było źródłem oceanu). */
.yonelle-product-gallery-col,
.yonelle-product-gallery-col.is-layout-flow,
.yonelle-product-gallery-col.wp-block-column-is-layout-flow {
  position: relative;
  background: var(--y-beige-000);
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  align-self: stretch;
}

.yonelle-product-columns,
.yonelle-product-columns.is-layout-flex {
  overflow: visible !important;
  align-items: flex-start;
}

.yonelle-single-product,
.yonelle-single-product.is-layout-flow {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.yonelle-product-content-blocks {
  width: 100%;
}

.yonelle-product-content-blocks .yonelle-product-page-content {
  max-width: var(--y-grid-max);
  margin: 0 auto;
}

.yonelle-frequently-bought,
.yonelle-frequently-bought.alignfull {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Kaganiec 1840px — inner content nie rozjeżdża się na viewport > 1840.
 * Outer section alignfull = fullwidth BG, inner content max 1840 centered.
 * 1840px = $container-figma-section — spójny z „Zastosowanie"
 * (articles-series-columns-box-with-title-image) + INCI (yb2-product-inci__inner),
 * żeby h-1 headery trzech sekcji stały dokładnie w jednej pionowej linii. */
.yonelle-frequently-bought > * {
  max-width: 1840px;
  margin-left: auto;
  margin-right: auto;
}

.yonelle-upsells,
.yonelle-upsells.alignfull,
.yonelle-related-products,
.yonelle-related-products.alignfull {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.yonelle-upsells > *,
.yonelle-related-products > * {
  max-width: calc(var(--y-grid-max) - 80px);
  margin-left: auto;
  margin-right: auto;
}

.yonelle-video-block,
.yonelle-video-block.alignfull {
  width: 100% !important;
  max-width: none !important;
}

/* ── Custom Gallery (replaces WC FlexSlider) ──────────────────── */

/* Gallery sizing (user scope 2026-04-20):
 *   - Natural height = image (aspect 1:1 = col width) + thumbs (~80px).
 *   - On ultra-high viewports (8K / zoom -25%) we MUST NOT force 100vh:
 *     that stretches gallery-col → grid row → info-col into 3000px+ ocean.
 *   - On normal viewports, clamp to (100vh - header) so gallery never
 *     exceeds visible area when sticky.
 *   - overflow: hidden + aspect-ratio on main + flex-shrink on main lets
 *     the image shrink when clamped; thumbs stay visible. */
.yonelle-gallery {
  --y-gallery-gutter: 40px;

  position: sticky;
  top: 0;
  height: fit-content;
  max-height: calc(100vh - var(--y-header-h, 0px));
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--y-beige-000);
}

@media (max-width: 1023px) {
  .yonelle-gallery {
    --y-gallery-gutter: 20px;
  }
}

.yonelle-gallery__main {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: calc(100vh - var(--y-header-h, 0px) - 120px);
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}

.yonelle-gallery__slide {
  position: absolute;
  inset: 0 var(--y-gallery-gutter, 40px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.yonelle-gallery__slide--active {
  opacity: 1;
  z-index: 2;
}

.yonelle-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.yonelle-gallery__arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  pointer-events: none;
  z-index: 10;
}

/* ── Gallery Thumbnails ────────────────────────────────────────── */

.yonelle-gallery__thumbs {
  display: flex;
  gap: 8px;
  /* Wspólna oś z .y-megamenu__topbar-inner oraz badge'ami galerii. */
  padding: 12px var(--y-gallery-gutter, 40px);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}

@media (max-width: 1024px) {
  .yonelle-gallery__thumbs {
    padding: 12px 20px;
  }
}
@media (max-width: 782px) {
  .yonelle-gallery__thumbs {
    display: none;
  }
}

.yonelle-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.yonelle-gallery__thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 1.5px solid transparent;
  padding: 0;
  background: var(--y-beige-100);
  cursor: pointer;
  opacity: 0.5;
  transition:
    opacity 0.2s,
    border-color 0.2s;
}

.yonelle-gallery__thumb--active {
  border-color: var(--y-beige-900);
  opacity: 1;
}

.yonelle-gallery__thumb:hover {
  opacity: 0.85;
}

.yonelle-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.yonelle-gallery__arrow {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  border: none;
  padding: 0;
  transition:
    background 0.2s,
    opacity 0.2s;
  backdrop-filter: blur(4px);
}

.yonelle-gallery__arrow:hover {
  background: rgba(255, 255, 255, 1);
}

.yonelle-gallery__arrow svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ── Badges overlay (inside .yonelle-gallery) ─────────────────── */

.yonelle-gallery .yonelle-badges,
.yonelle-badges {
  position: absolute;
  top: 8px;
  /* Wspólna oś z .y-megamenu__topbar-inner, slajdem i miniaturami. */
  left: var(--y-gallery-gutter, 40px);
  z-index: 20;
  display: flex;
  gap: 7px;
  align-items: center;
}

.yonelle-badge {
  font-family: var(--y-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.yonelle-badge--filled {
  background: var(--y-beige-900);
  color: var(--y-beige-000);
}

.yonelle-badge--outlined {
  background: transparent;
  border: 1px solid var(--y-beige-800);
  color: var(--y-beige-900);
}

/* ── Info Column (Right – 50%) ─────────────────────────────────── */

.yonelle-product-info-col {
  background-color: var(--y-beige-100) !important;
  padding: 0 40px 80px !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Breadcrumbs ───────────────────────────────────────────────── */

.yonelle-breadcrumbs,
.yonelle-breadcrumbs a,
.yonelle-breadcrumbs .woocommerce-breadcrumb,
.yonelle-breadcrumbs .woocommerce-breadcrumb a {
  font-family: var(--y-font-body) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.2px !important;
  color: var(--y-beige-700) !important;
  text-decoration: none !important;
  padding: 8px 0 !important;
}
.yonelle-breadcrumbs .woocommerce-breadcrumb {
  /* display: flex; */
  display: block;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.yonelle-breadcrumbs--mobile .woocommerce-breadcrumb {
  display: block;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yonelle-breadcrumbs .woocommerce-breadcrumb svg {
  min-width: fit-content;
}
.yonelle-breadcrumbs .woocommerce-breadcrumb svg {
  transform: translateY(25%);
  margin: 0 8px;
}
.yonelle-breadcrumbs .woocommerce-breadcrumb a:hover {
  color: var(--y-beige-900) !important;
}

.yonelle-breadcrumbs .woocommerce-breadcrumb span.breadcrumb-separator {
  margin: 0 4px;
}

.yonelle-breadcrumbs--mobile {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (min-width: 781px) {
  .yonelle-breadcrumbs--mobile {
    display: none !important;
  }
}
@media (max-width: 781px) {
  .yonelle-breadcrumbs--desktop {
    display: none;
  }
}

/* ── Product Header Group ──────────────────────────────────────── */

.yonelle-product-header {
  gap: 8px !important;
}
@media (max-width: 781px) {
  .yonelle-product-header {
    margin-top: 16px !important;
  }
}

.yonelle-series-name,
.yonelle-series-name a {
  font-family: var(--y-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.24px !important;
  text-transform: uppercase !important;
  color: var(--y-beige-900) !important;
  text-decoration: none !important;
}

.yonelle-product-title {
  font-family: var(--y-font-head) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  color: var(--y-beige-900) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 443px;
}

.yonelle-product-volume {
  font-family: var(--y-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.24px;
  color: var(--y-beige-900);
  margin: 0;
}
@media (max-width: 782px) {
  .yonelle-product-volume {
    display: none;
  }
}

/* ── Mini-info tooltips ────────────────────────────────────────── */

.yonelle-mini-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding-bottom: 8px;
}

.yonelle-mini-info__tooltip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--y-beige-000);
  position: relative;
  /* min-width: 0; */
  /* min-inline-size: 280px; */
  /* inline-size: fit-content; */
  max-width: 100%;
  box-sizing: border-box;
}

.yonelle-mini-info__text {
  font-family: var(--y-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.24px;
  color: var(--y-beige-900);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  word-wrap: break-word;
  min-width: 0;
  flex: 1;
}

@media (max-width: 1024px) {
  .yonelle-mini-info {
    display: grid;
    grid-template-columns: 1fr !important;
  }
}

.yonelle-icon-check,
.yonelle-icon-info {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.yonelle-mini-info__info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.yonelle-mini-info__info-btn .yonelle-icon-info,
.yonelle-mini-info__info-icon .yonelle-icon-info {
  display: block;
}

.yonelle-mini-info__popup {
  position: absolute;
  left: 34px;
  top: calc(100% + 6px);
  width: 320px;
  max-width: calc(100vw - 56px);
  padding: 10px 12px;
  border: 1px solid var(--y-beige-200);
  background: var(--y-beige-000);
  box-shadow: 0 6px 22px rgba(39, 39, 37, 0.12);
  font-family: var(--y-font-body);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.24px;
  color: var(--y-beige-900);
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease;
  pointer-events: none;
}

.yonelle-mini-info__tooltip.is-open .yonelle-mini-info__popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Description + "Czytaj dalej" ──────────────────────────────── */

.yonelle-excerpt-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yonelle-excerpt-toggle {
  align-self: flex-start;
}

.yonelle-excerpt-text {
  font-family: var(--y-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--y-beige-900);
  max-width: 100%;
}

.yonelle-excerpt-text p {
  margin: 0 0 8px;
}

.yonelle-excerpt-text p:last-child {
  margin-bottom: 0;
}

/* Underline link style (shared) */
.yonelle-underline-link {
  font-family: var(--y-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--y-beige-900);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid var(--y-beige-900);
  background: none;
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.yonelle-underline-link:hover {
  opacity: 0.7;
}

/* ── Add to Cart (full-width, no quantity) ─────────────────────── */

.yonelle-add-to-cart {
  width: 100%;
}

.yonelle-add-to-cart .quantity {
  display: none !important;
}

.yonelle-add-to-cart form.cart {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.yonelle-add-to-cart .single_add_to_cart_button,
.yonelle-add-to-cart .wc-block-components-product-button__button,
.yonelle-add-to-cart button[type="submit"] {
  width: 100% !important;
  background-color: var(--y-beige-900) !important;
  color: var(--y-beige-100) !important;
  border: none !important;
  border-radius: 0 !important;
  height: 40px;
  font-family: var(--y-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.28px !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: opacity 0.2s;
  padding: 8px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yonelle-add-to-cart .single_add_to_cart_button:hover {
  opacity: 0.85;
}

.yonelle-add-to-cart .stock,
.yonelle-product-buttons .stock {
  display: none !important;
}

.yonelle-product-buttons {
  width: 100% !important;
  min-width: 0;
  list-style: none !important;
}

.yonelle-product-buttons *,
.yonelle-product-buttons *::before,
.yonelle-product-buttons *::after,
.yonelle-product-buttons *::marker {
  list-style: none !important;
  list-style-type: none !important;
}

.yonelle-product-buttons > * {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Loyalty Button ────────────────────────────────────────────── */

.yonelle-loyalty-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 7px 24px;
  background: var(--y-beige-000);
  border: 1px solid var(--y-beige-900);
  cursor: pointer;
  transition: opacity 0.2s;
  box-sizing: border-box;
}
@media (max-width: 960px) {
  .yonelle-loyalty-button {
    height: fit-content;
    flex-wrap: wrap;
    gap: 0 10px;
    padding: 7px 6px;
  }
}

.yonelle-loyalty-button:hover {
  opacity: 0.7;
}

.yonelle-loyalty-button__points {
  font-family: var(--y-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--y-beige-900);
  white-space: nowrap;
}

.yonelle-loyalty-button__text {
  font-family: var(--y-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--y-beige-900);
  white-space: nowrap;
}

/* ── Free Shipping ─────────────────────────────────────────────── */

.yonelle-free-shipping {
  display: flex;
  align-items: center;
  gap: 16px;
}

.yonelle-free-shipping p {
  font-family: var(--y-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.28px !important;
  color: var(--y-beige-800) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 16px;
}

.yonelle-icon-truck {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* ── Attribute Sections (Dla kogo / Efekty / …) ───────────────── */

.yonelle-attributes-section {
  width: 100%;
}

.yonelle-attr-row {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--y-beige-200);
  width: 100%;
}
@media (max-width: 782px) {
  .yonelle-attr-row {
    flex-direction: column;
    gap: 16px;
  }
}

.yonelle-attr-row__label {
  flex: 1 0 0;
  font-family: var(--y-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: var(--y-beige-900);
  min-width: 0;
}

.yonelle-attr-row__content {
  flex: 1 0 0;
  font-family: var(--y-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--wp--preset--color--beige-750, #595959);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yonelle-attr-row__content p {
  margin: 0 0 8px;
}

.yonelle-attr-row__content p:last-child {
  margin-bottom: 0;
}

.yonelle-attr-row__content ul {
  margin: 0;
  padding-left: 21px;
  list-style-type: disc;
}

.yonelle-attr-row__content ul li {
  margin-bottom: 0;
  line-height: 1.5;
}

.yonelle-attr-row__content .yonelle-underline-link {
  align-self: flex-start;
}

/* ── INCI Accordion (Figma 316:3058) ──────────────────────────── */
/* Outer wrapper z fullwidth BG + kaganiec 1920px jest teraz w
   plugins/yonelle-blocks-v2/src/product-inci/style.scss (klasy
   .yb2-product-inci + .yb2-product-inci__inner). Poniższe reguły stylują
   akordeon (inner div .yonelle-inci), który renderuje się zarówno w theme
   jak i w bloku (zachowane klasy dla 1:1 parity). */

.yonelle-inci {
  width: 100%;
  box-sizing: border-box;
}

.yonelle-inci__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.yonelle-inci__title {
  font-family: var(--y-font-head);
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 500;
  line-height: 1;
  color: var(--y-beige-900);
  text-align: left;
}
@media (max-width: 768px) {
  .yonelle-inci__title {
    font-size: var(--wp--preset--font-size--small-title);
    line-height: 1.4;
    letter-spacing: -0.02rem;
  }
}

.yonelle-inci__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yonelle-inci__icon svg {
  width: 24px;
  height: 24px;
}

.yonelle-inci__icon--minus {
  display: none;
}

.yonelle-inci__icon--plus {
  display: flex;
}

.yonelle-inci.is-open .yonelle-inci__icon--minus {
  display: flex;
}

.yonelle-inci.is-open .yonelle-inci__icon--plus {
  display: none;
}

.yonelle-inci__body {
  display: none;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.yonelle-inci.is-open .yonelle-inci__body {
  display: flex;
}

.yonelle-inci__ingredients {
  font-family: var(--y-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: #595959;
  margin: 0;
}

.yonelle-inci__note {
  font-family: var(--y-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: #595959;
  margin: 0;
}

/* ── Section Divider ───────────────────────────────────────────── */

.yonelle-section-divider {
  border-color: var(--y-beige-200) !important;
  margin: 0 !important;
}

/* ── Product Meta (SKU, categories, tags) ──────────────────────── */

.yonelle-product-meta {
  display: none !important;
}

/* ── Product Content Blocks (Gutenberg v2) ─────────────────────── */

.yonelle-product-content-blocks {
  width: 100%;
}

.yonelle-product-page-content {
  width: 100%;
}

.yonelle-product-page-content > section {
  width: 100%;
}

/* Full-bleed: sections with background that need 100vw bg + grid-constrained content.
   The block's own padding + __inner { max-width: 1840px; margin: 0 auto } handle centering.
   max-width: none overrides the block's compiled max-width: 100%. */
.yonelle-product-page-content
  > section.yb2-articles-series-columns-box-with-title-image {
  width: 100vw !important;
  max-width: none !important;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* Intro-text (Stack 0): white bg + extra bottom padding for separation from next section */
.yonelle-product-page-content > section.yb2-intro-text:first-of-type {
  padding-bottom: 56px !important;
}

/* Fix image placeholders in Gutenberg blocks */
.yonelle-product-page-content img {
  max-width: 100%;
  height: auto;
}

.yonelle-product-page-content figure {
  margin: 0;
}

.yonelle-product-page-content .wp-block-image img[src=""],
.yonelle-product-page-content .wp-block-image img:not([src]) {
  display: block;
  min-height: 200px;
  background: var(--y-beige-200);
}

/* ── Frequently Bought Together ────────────────────────────────── */

.yonelle-frequently-bought {
  background-color: var(--y-beige-100) !important;
  padding: 56px 40px !important;
  box-sizing: border-box;
}

@media (max-width: 960px) {
  .yonelle-frequently-bought {
    padding: 40px 24px !important;
  }
}

/* Heading "Często kupowane razem" — h2 jest zagnieżdżone w
 * .wp-block-woocommerce-product-collection (NIE direct-child .yonelle-frequently-bought),
 * + WooCommerce narzuca `h2.wp-block-heading { line-height: 1.4; font-size: small }`
 * z wyzsza specyficznoscia. Match na `h2.wp-block-heading` + !important = wygrywa. */
.yonelle-frequently-bought h2.wp-block-heading {
  font-family: var(--y-font-head) !important;
  font-size: var(--wp--preset--font-size--h-1) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--y-beige-900) !important;
  text-align: left !important;
  margin-top: 0 !important;
  margin-bottom: var(--wp--preset--spacing--70, 32px) !important;
}

.yonelle-frequently-bought .yb2-product-grid {
  padding: 0;
  background: transparent;
}
@media (min-width: 960px) {
  .yonelle-frequently-bought .wc-block-product-template__responsive,
  .yonelle-upsells .wc-block-product-template__responsive,
  .yonelle-related-products .wc-block-product-template__responsive {
    display: grid;
    grid-gap: 16px;
  }
}

.yonelle-swiper-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  gap: 40px;
  background-color: var(--y-beige-100);
}
@media (min-width: 960px) {
  .yonelle-swiper-pagination {
    display: none;
  }
}
.yonelle-swiper-pagination__arrow {
  cursor: pointer;
  color: var(--wp--preset--color--beige-900, #272725);
  transition: color 0.3s;
}
.yonelle-swiper-pagination__arrow.swiper-button-disabled {
  color: var(--wp--preset--color--beige-500, #aba799);
}

.yonelle-product-sticky-bar {
  box-sizing: border-box;
  width: 100%;
  position: sticky;
  z-index: 10;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 0 auto;
  padding: 16px 40px;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s;
}
.yonelle-product-sticky-bar.sticky {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
@media (max-width: 782px) {
  .yonelle-product-sticky-bar {
    padding: 16px 24px;
  }
}

.yonelle-product-sticky-bar__content {
  max-width: var(--y-grid-max);
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
@media (max-width: 960px) {
  .yonelle-product-sticky-bar__content {
    flex-direction: column;
    gap: 8px;
  }
}
.yonelle-product-sticky-bar__left {
  max-width: calc(50% - 32px);
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 16px;
}
@media (max-width: 960px) {
  .yonelle-product-sticky-bar__left {
    max-width: unset;
  }
}
.yonelle-product-sticky-bar__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 960px) {
  .yonelle-product-sticky-bar__text {
    display: block;
    max-width: 100%;
  }
}
@media (max-width: 1280px) {
  .yonelle-product-sticky-series-name {
    display: none;
  }
}
.yonelle-product-sticky-bar__title {
  margin-bottom: 0;
}
@media (max-width: 960px) {
  .yonelle-product-sticky-bar__title {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.yonelle-product-sticky-bar__price--desktop .yonelle-price-points {
  display: none;
}
@media (max-width: 960px) {
  .yonelle-product-sticky-bar__price--desktop {
    display: none;
  }
}
@media (min-width: 960px) {
  .yonelle-product-sticky-bar__price--mobile {
    display: none;
  }
}

@media (min-width: 960px) {
  .yonelle-product-sticky-bar__price--mobile {
    display: none;
  }
}
.yonelle-product-sticky-bar__right {
  max-width: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
@media (max-width: 960px) {
  .yonelle-product-sticky-bar__right {
    max-width: unset;
  }
}
.yonelle-product-sticky-bar__buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
}
@media (max-width: 1280px) {
  .yonelle-product-sticky-bar__buttons {
    flex-wrap: wrap;
  }
}
@media (max-width: 960px) {
  .yonelle-product-sticky-bar__buttons {
    width: fit-content;
  }
}
.yonelle-product-sticky-bar__buttons .yonelle-loyalty-button {
  display: flex;
  height: fit-content;
  flex-wrap: wrap;
  gap: 0 10px;
}
@media (max-width: 1080px) {
  .yonelle-product-sticky-bar__buttons .yonelle-loyalty-button {
    display: none;
  }
}
.yonelle-product-sticky-bar__buttons .yonelle-add-to-cart {
  width: 75%;
}
@media (max-width: 1440px) {
  .yonelle-product-sticky-bar__buttons .yonelle-add-to-cart {
    width: 50%;
  }
}
@media (max-width: 1280px) {
  .yonelle-product-sticky-bar__buttons .yonelle-add-to-cart {
    width: 100%;
  }
}
.yonelle-product-sticky-bar__buttons
  .yonelle-add-to-cart
  .single_add_to_cart_button {
  text-wrap: nowrap;
}
@media (max-width: 782px) {
  .yonelle-product-sticky-bar__buttons
    .yonelle-add-to-cart
    .single_add_to_cart_button {
    padding: 8px 40px;
  }
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 782px) {
  .yonelle-product-columns {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
  }

  .yonelle-product-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .yonelle-product-gallery-col {
    min-height: auto;
  }

  .yonelle-product-gallery-col .wc-block-product-image-gallery,
  .yonelle-product-gallery-col .woocommerce-product-gallery {
    position: relative !important;
    height: auto;
    max-height: 500px;
  }

  .yonelle-product-info-col {
    padding: 16px 20px 24px !important;
  }

  .yonelle-product-title {
    font-size: 24px !important;
    max-width: 100%;
  }

  .yonelle-excerpt-text {
    max-width: 100%;
  }

  .yonelle-mini-info__popup {
    left: 0;
    width: min(320px, calc(100vw - 40px));
  }

  .yonelle-attr-row {
    flex-direction: column;
    gap: 18px;
  }
}

/* Swiper base styles for slider */

.swiper {
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  gap: 0;
  z-index: 1;
  display: flex;
  box-sizing: content-box;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
}
/* ── Back In Stock Notifier (Codeixer) ───────────────────────────────────
 * Markup: section.cwginstock-subscribe-form → .panel(-primary)
 *   ├ .panel-heading h4              (uppercase label, dyskretny divider)
 *   └ .panel-body
 *      ├ .form-group → .cwgstock_name + .cwgstock_email   (stacked, 100%)
 *      ├ .form-group → .cwgstock_button (submit)          (100%, czarny)
 *      └ .cwgstock_output (komunikaty walidacji / sukcesu)
 *
 * Cel: ten sam wizualny rytm co .yonelle-loyalty-button (1px border, beż-000
 * tło, padding 24px poziomo, 40px wysokość kontrolek), żeby ramka BIS i ramka
 * "Dołącz do programu lojalnościowego" tworzyły jeden, spójny zestaw kart. */

.yonelle-product-info-col .cwginstock-subscribe-form {
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* Plugin ships Bootstrap which adds horizontal padding via .row/.col-md-12
   * AND a 4px inset on .cwginstock-subscribe-form itself. Zero them out here
   * so the visible bordered panel reaches the EXACT same outer edges as the
   * sibling .yonelle-loyalty-button (measured: BIS section 880px outer vs.
   * panel was 872px before this fix → 8px narrower visible border). */
  padding: 0 !important;
  box-sizing: border-box;
}

.yonelle-product-info-col .cwginstock-subscribe-form .panel {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--y-beige-900);
  background: var(--y-beige-000);
}

.yonelle-product-info-col .cwginstock-subscribe-form .panel-primary,
.yonelle-product-info-col .cwginstock-panel-primary {
  border-color: var(--y-beige-900);
}

.yonelle-product-info-col .cwginstock-panel-heading {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--y-beige-900);
  color: var(--y-beige-900) !important;
  padding: 14px 24px !important;
}

.yonelle-product-info-col .cwginstock-panel-heading h4 {
  margin: 0 !important;
  text-align: left !important;
  color: var(--y-beige-900) !important;
  font-family: var(--y-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.24px !important;
  text-transform: uppercase !important;
}

/* Microcopy injected by `cwg_instock_after_heading` (theme/inc/woocommerce/back-in-stock.php).
 * Sits inside .cwginstock-panel-heading, directly below the uppercase label. */
.yonelle-product-info-col .cwginstock-panel-heading .yonelle-bis-microcopy {
  margin: 6px 0 0;
  font-family: var(--y-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.24px;
  color: var(--y-beige-700);
  text-transform: none;
}

.yonelle-product-info-col .cwginstock-panel-body {
  padding: 16px 24px 20px !important;
  background: var(--y-beige-000);
}

.yonelle-product-info-col .cwginstock-panel-body .row,
.yonelle-product-info-col .cwginstock-panel-body .col-md-12 {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}

/* Pionowy układ: imię + e-mail (stacked, 100%) → przycisk (100%) → output. */
.yonelle-product-info-col .cwginstock-panel-body .col-md-12 > .col-md-12 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Imię + e-mail w tej samej grupie — stack 8px gap */
.yonelle-product-info-col
  .cwginstock-panel-body
  .form-group:has(> .cwgstock_email) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yonelle-product-info-col .cwgstock_email,
.yonelle-product-info-col .cwgstock_name {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  text-align: left !important;
  border: 1px solid var(--y-beige-900) !important;
  border-radius: 0 !important;
  background: var(--y-beige-000) !important;
  font-family: var(--y-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.28px !important;
  color: var(--y-beige-900) !important;
}

.yonelle-product-info-col .cwgstock_email:focus,
.yonelle-product-info-col .cwgstock_name:focus {
  outline: 2px solid var(--y-beige-900);
  outline-offset: -2px;
}

.yonelle-product-info-col .cwgstock_email::placeholder,
.yonelle-product-info-col .cwgstock_name::placeholder {
  color: var(--y-beige-500) !important;
  text-transform: uppercase;
  letter-spacing: 0.24px;
  font-size: 12px;
}

.yonelle-product-info-col .cwgstock_button {
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px 24px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--y-beige-900) !important;
  color: var(--y-beige-100) !important;
  font-family: var(--y-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.28px !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: opacity 0.2s;
}

.yonelle-product-info-col .cwgstock_button:hover {
  opacity: 0.85;
}

.yonelle-product-info-col .cwg_iagree_checkbox {
  margin: 0;
}

.yonelle-product-info-col .cwg_iagree_checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-family: var(--y-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.24px;
  color: var(--y-beige-700);
  cursor: pointer;
}

.yonelle-product-info-col .cwg_iagree_checkbox_input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 2px 0 0 !important;
  flex-shrink: 0;
  accent-color: var(--y-beige-900);
}

.yonelle-product-info-col .cwgstock_output:empty {
  display: none;
}

/* Container for AJAX feedback. Plugin emits one of two children:
 *   .cwginstocksuccess (inline style="color:green")
 *   .cwginstockerror   (inline style="color:red")
 * We override both with !important so the inline styles never reach the user
 * and the message becomes a proper full-width pill matching the form rhythm. */
.yonelle-product-info-col .cwgstock_output {
  margin: 0;
  font-family: var(--y-font-body);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.24px;
}

.yonelle-product-info-col .cwgstock_output .cwginstocksuccess,
.yonelle-product-info-col .cwgstock_output .cwginstockerror {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 0;
  font-weight: 500;
  text-align: left;
  box-sizing: border-box;
}

.yonelle-product-info-col .cwgstock_output .cwginstocksuccess {
  background: #ecf6ee;
  border-color: #1f7a3a;
  color: #1f5b2b !important;
}

.yonelle-product-info-col .cwgstock_output .cwginstockerror {
  background: #fdecee;
  border-color: #b00020;
  color: #8a0019 !important;
}

.yb-free-gift-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--y-beige-100, #faf9f6);
  border: 1px solid var(--y-beige-200, #dbdad6);
  margin-top: 12px;
}

.yb-free-gift-notice__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--y-beige-900, #272725);
  margin-top: 2px;
}

.yb-free-gift-notice__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yb-free-gift-notice__title {
  font-size: 12px;
  font-weight: 400;
  color: var(--y-beige-900, #272725);
  line-height: 1.5;
}

.yb-free-gift-notice__product {
  font-size: 12px;
  font-weight: 400;
  color: var(--y-beige-700, #716e68);
  line-height: 1.5;
}

.yb-free-gift-notice__remaining {
  font-size: 12px;
  font-weight: 400;
  color: var(--y-beige-700, #716e68);
  line-height: 1.5;
  margin-top: 4px;
}

.yb-free-gift-notice__amount {
  font-weight: 600;
  color: var(--y-beige-900, #272725);
}

.yb-free-gift-notice__image {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
}