/* Baylan product layer (R1.6)

   product/product only. Loaded after baylan-shell.css and baylan-listing.css,
   so the tokens, .bl-card, .bl-blueprint, .bl-btn, .bl-qty and .bl-breadcrumb
   are all already styled here.

   Legacy Yoga rules still ship in bundle.min.css and out-specify bare element
   selectors for table, ul, label and p, which is why several blocks below
   re-state properties that read like resets. */

/* --------------------------------------------------------------------------
   1. Page frame
   -------------------------------------------------------------------------- */

.bl-pdp {
  padding: var(--bl-space-3) 0 calc(var(--bl-space-4) * 3);
}

.bl-pdp .bl-breadcrumb ol { margin-bottom: var(--bl-space-3); }

/* --------------------------------------------------------------------------
   2. Top block

   Source order is identity, gallery, buy box, help — which is the phone
   layout as written. The desktop layout is produced by placing the same four
   children on a two-column grid, so the h1 precedes the photo in the DOM at
   every width and no `order` is needed to undo it.
   -------------------------------------------------------------------------- */

.bl-pdp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--bl-space-4);
  align-items: start;
}

.bl-pdp-identity { min-width: 0; }

.bl-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bl-space-1) var(--bl-space-3);
  margin: 0 0 var(--bl-space-2);
  font-size: 13px;
}

/* model is varchar(64) and the catalogue stores HTML-escaped text in it, so a
   handful of rows are truncated mid-entity. Breaking anywhere keeps those from
   pushing the column wider than the grid track. */
.bl-pdp-meta span { overflow-wrap: anywhere; }

.bl-pdp-brand { text-decoration: none; }

/* `.bl-root h1` in the foundation layer is (0,1,1) and outranks a bare class,
   so without the element in the selector the title keeps --bl-h1 everywhere. */
.bl-root h1.bl-pdp-title {
  margin: 0 0 var(--bl-space-3);
  font-size: 26px;
  line-height: 1.18;
  /* Product names are long compound Ukrainian words (e.g. "багатоструменевий"),
     wider than the 293 px identity column at 320 px viewport. Allow break-any so
     the grid track never overflows the shell padding. */
  overflow-wrap: anywhere;
}

/* Key specs read as a scan-and-compare matrix, not as a table of records: two
   columns of dotted label/value rows, the same shape the prototype uses. The
   rows are the same <tr>s the full table below is built from, so the two views
   can never disagree. */
.bl-pdp-keyspecs .bl-specs-key { margin: 0; }

.bl-pdp-keyspecs .bl-specs-key tbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 calc(var(--bl-space-4) * 2);
}

.bl-pdp-keyspecs .bl-specs-key tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bl-space-3);
  padding: var(--bl-space-1) 0;
  border-bottom: 1px dotted var(--bl-color-divider);
}

.bl-pdp-keyspecs .bl-specs-key th,
.bl-pdp-keyspecs .bl-specs-key td {
  padding: 0;
  border: 0;
  font-size: 13.5px;
}

.bl-pdp-keyspecs .bl-specs-key th { font-weight: 400; color: var(--bl-alpha-text-60); }

.bl-pdp-keyspecs .bl-specs-key td { text-align: right; }

@media (min-width: 768px) {
  .bl-pdp-keyspecs .bl-specs-key tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  /* Even halves, as approved: the photo is the argument on the left and
     everything that is read is the argument on the right. */
  .bl-pdp-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(var(--bl-space-4) * 3);
  }

  .bl-pdp-gallery  { grid-column: 1; grid-row: 1 / span 3; }
  .bl-pdp-identity { grid-column: 2; grid-row: 1; }
  .bl-pdp-buy      { grid-column: 2; grid-row: 2; }
  .bl-pdp-help     { grid-column: 2; grid-row: 3; }

  /* The right column is the taller of the two on most products, so the photo
     follows the read down the page instead of leaving a hole. */
  .bl-pdp-gallery {
    position: sticky;
    top: var(--bl-space-4);
  }

  .bl-root h1.bl-pdp-title { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   3. Gallery
   -------------------------------------------------------------------------- */

.bl-gallery-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--bl-space-3);
  background: var(--bl-color-photo-bg);
  border: var(--bl-hairline);
}

.bl-gallery-main img {
  width: auto;
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .bl-gallery-main img { max-height: 420px; }
}

@media (min-width: 992px) {
  .bl-gallery-main img { max-height: 520px; }
}

.bl-gallery-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  cursor: zoom-in;
}

.bl-photo-empty figcaption {
  margin-top: var(--bl-space-2);
  font-size: 13px;
  text-align: center;
}

.bl-gallery-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bl-space-2);
  margin: var(--bl-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.bl-gallery-thumb {
  display: block;
  width: 60px;
  height: 60px;
  padding: 2px;
  background: var(--bl-color-photo-bg);
  border: var(--bl-hairline);
  border-radius: var(--bl-radius);
  cursor: pointer;
}

.bl-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bl-gallery-thumb.is-current { border-color: var(--bl-color-accent); box-shadow: inset 0 0 0 1px var(--bl-color-accent); }

/* --------------------------------------------------------------------------
   4. Buy box
   -------------------------------------------------------------------------- */

.bl-buybox {
  padding: var(--bl-space-4) calc(var(--bl-space-4) + var(--bl-space-1));
  background: var(--bl-color-surface);
}

.bl-buybox > * + * { margin-top: var(--bl-space-3); }

.bl-buybox-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bl-space-2);
}

.bl-buybox .bl-price-now {
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: 32px;
  line-height: 1.1;
}

.bl-buybox-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bl-space-2);
  font-size: 13px;
}

/* The price, the "ex VAT" note and the stock tag are one statement, so they sit
   closer to each other than to the controls below. */
.bl-buybox .bl-buybox-meta { margin-top: var(--bl-space-1); }

/* The state comes from the integer quantity, not from sniffing the status
   string for a substring — the old template matched on the word "Немає",
   which only worked in one of the two languages. */
.bl-stock-in { background: var(--bl-color-success-bg); color: var(--bl-color-success-fg); border-color: var(--bl-color-success-border); }
.bl-stock-out { background: var(--bl-color-neutral-100); color: var(--bl-alpha-text-60); border-color: var(--bl-color-divider); }

.bl-buybox-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bl-space-2);
}

.bl-buybox-actions .bl-qty { flex: 0 0 auto; }

/* A 180px basis pushed the compare button onto its own line inside the 363px
   panel a 390px phone leaves. */
.bl-buybox-cart { flex: 1 1 120px; min-height: 44px; }

.bl-buybox-cart[disabled] { opacity: 0.55; cursor: not-allowed; }

.bl-buybox-compare {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
}

.bl-buybox-oneclick { flex: 1 1 100%; }

.bl-buybox-oneclick svg { margin-right: var(--bl-space-2); }

.bl-buybox-minimum { margin: 0; font-size: 13px; }

/* The panel's footer line. Ghost buttons rather than a second block of CTAs:
   the decision on this card is the cart button, and this is the way out of it. */
.bl-buybox-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bl-space-1) var(--bl-space-2);
  font-size: 13px;
}

/* `.bl-root a` in the foundation layer is (0,1,1); the class alone would lose
   the underline fight. */
.bl-root .bl-buybox-help a.bl-btn {
  min-height: 32px;
  padding: 0 var(--bl-space-2);
  font-size: 13px;
  text-decoration: none;
}

/* Options never render on this catalogue (oc_product_option is empty) but the
   markup is live, so it is styled rather than left to the legacy theme. */
.bl-option + .bl-option { margin-top: var(--bl-space-3); }

.bl-option-list { display: flex; flex-wrap: wrap; gap: var(--bl-space-2); }

.bl-field-label {
  display: block;
  margin-bottom: var(--bl-space-1);
  font-size: 13px;
  color: var(--bl-alpha-text-70);
}

/* --------------------------------------------------------------------------
   5. Purchase terms
   -------------------------------------------------------------------------- */

.bl-trust {
  display: grid;
  gap: var(--bl-space-2);
  margin: 0;
  font-size: 13.5px;
}

.bl-trust li {
  display: flex;
  align-items: flex-start;
  gap: var(--bl-space-2);
}

.bl-trust svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--bl-color-accent-700);
}

/* --------------------------------------------------------------------------
   6. Sections

   Rendered open and collapsed by script below 992px, so a page with no
   JavaScript shows the whole description instead of hiding it behind a
   control that cannot be operated.
   -------------------------------------------------------------------------- */

.bl-sections {
  margin-top: calc(var(--bl-space-4) * 2);
  border-top: var(--bl-hairline);
}

.bl-section { border-bottom: var(--bl-hairline); }

.bl-section-head { margin: 0; font-size: inherit; }

.bl-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--bl-space-3) 0;
  background: none;
  border: 0;
  color: var(--bl-color-text);
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: var(--bl-h4);
  text-align: left;
  cursor: pointer;
}

.bl-section-chevron { flex: 0 0 auto; transition: transform 0.15s ease; }

.bl-section.is-open .bl-section-chevron { transform: rotate(180deg); }

.bl-section-panel { display: none; padding-bottom: var(--bl-space-4); }

.bl-section.is-open .bl-section-panel { display: block; }

@media (min-width: 992px) {
  /* Every section is open at once on a desktop, so the control is inert and
     announces itself as such rather than pretending to be a button. */
  .bl-section-toggle { cursor: default; }
  .bl-section-chevron { display: none; }

  /* Specifications on the left, prose on the right - the accordion's stacked
     order is a phone constraint, not the reading order the prototype asks for.
     The class is only emitted when there are attributes to fill column one. */
  .bl-sections-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(var(--bl-space-4) * 3);
    align-items: start;
  }

  .bl-sections-split .bl-section-specs       { grid-column: 1; grid-row: 1 / span 2; }
  .bl-sections-split .bl-section-description { grid-column: 2; grid-row: 1; }
  .bl-sections-split .bl-section-delivery    { grid-column: 2; grid-row: 2; }

  /* Side by side the two columns already read as two blocks, so the rules
     between them only add noise. */
  .bl-sections-split .bl-section { border-bottom: 0; }

  /* One column, so the delivery terms inside it stay stacked. */
  .bl-sections-split .bl-terms { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .bl-section-chevron { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Specifications
   -------------------------------------------------------------------------- */

.bl-specs {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
}

.bl-specs + .bl-specs { margin-top: var(--bl-space-4); }

.bl-specs-caption {
  padding: 0 0 var(--bl-space-2);
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: var(--bl-h5);
  text-align: left;
  caption-side: top;
  color: var(--bl-color-text);
}

.bl-specs th,
.bl-specs td {
  padding: var(--bl-space-2) 0;
  border-bottom: 1px dotted var(--bl-color-divider);
  vertical-align: top;
  text-align: left;
}

.bl-specs th {
  width: 52%;
  font-weight: 400;
  color: var(--bl-alpha-text-60);
}

.bl-specs td { overflow-wrap: anywhere; }

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

/* --------------------------------------------------------------------------
   8. Delivery and payment
   -------------------------------------------------------------------------- */

.bl-terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bl-space-4); }

@media (min-width: 768px) {
  .bl-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bl-terms-title { margin: 0 0 var(--bl-space-2); font-size: var(--bl-h5); }

.bl-terms-list {
  margin: 0 0 var(--bl-space-2);
  padding-left: var(--bl-space-4);
  font-size: 14px;
}

.bl-terms-list li + li { margin-top: var(--bl-space-1); }

/* --------------------------------------------------------------------------
   9. Description prose

   The column holds manager-authored and 1C-imported HTML with inline widths
   and pasted tables, so it is constrained rather than trusted to fit.
   -------------------------------------------------------------------------- */

.bl-prose { font-size: 14px; overflow-wrap: anywhere; }

.bl-prose img { height: auto; }

.bl-prose table { width: 100%; max-width: 100%; border-collapse: collapse; }

.bl-prose td,
.bl-prose th { padding: var(--bl-space-2); border: var(--bl-hairline); }

.bl-prose h1, .bl-prose h2, .bl-prose h3 { font-size: var(--bl-h4); }

/* --------------------------------------------------------------------------
   10. Reviews
   -------------------------------------------------------------------------- */

.bl-reviews { margin-top: calc(var(--bl-space-4) * 2); }

.bl-reviews-title { margin: 0 0 var(--bl-space-3); font-size: var(--bl-h3); }

.bl-reviews-form { margin-top: var(--bl-space-4); padding: var(--bl-space-4); }

.bl-reviews-subtitle { margin: 0 0 var(--bl-space-3); font-size: var(--bl-h5); }

.bl-reviews-form .bl-field + .bl-field { margin-top: var(--bl-space-3); }

.bl-reviews-form .bl-btn { margin-top: var(--bl-space-3); }

/* --------------------------------------------------------------------------
   11. Related

   A scroll-snap rail: the catalogue returns at most a handful of related
   products and a native scroller keeps the keyboard and trackpad working
   without a carousel library.
   -------------------------------------------------------------------------- */

.bl-related { margin-top: calc(var(--bl-space-4) * 2); }

.bl-related-title { margin: 0 0 var(--bl-space-3); font-size: var(--bl-h3); }

.bl-related-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 68vw);
  gap: var(--bl-space-3);
  margin: 0;
  padding: 0 0 var(--bl-space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.bl-related-rail > li { scroll-snap-align: start; min-width: 0; }

@media (min-width: 576px) { .bl-related-rail { grid-auto-columns: minmax(200px, 40vw); } }
@media (min-width: 768px) { .bl-related-rail { grid-auto-columns: minmax(200px, 30vw); } }

@media (min-width: 992px) {
  /* Enough room for the whole set, so it stops being a scroller. */
  .bl-related-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* --------------------------------------------------------------------------
   12. Fixed buy bar

   Phones and tablets only. It is rendered outside `#product` so its controls
   are not serialised into the add-to-cart request, and it derives its offset
   from the same tokens as every other fixed layer instead of the prototype's
   hardcoded 64px.
   -------------------------------------------------------------------------- */

.bl-buybar {
  position: fixed;
  right: 0;
  bottom: var(--bl-fixed-bottom-offset);
  left: 0;
  z-index: var(--bl-z-sticky-bar);
  padding: var(--bl-space-2) 0 calc(var(--bl-space-2) + var(--bl-safe-bottom));
  background: var(--bl-color-bg);
  border-top: var(--bl-hairline);
  box-shadow: var(--bl-shadow-md);
}

.bl-buybar-inner {
  display: flex;
  align-items: center;
  gap: var(--bl-space-2);
  width: 100%;
  max-width: var(--bl-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bl-space-4);
  padding-right: var(--bl-space-4);
}

.bl-buybar-qty { flex: 0 0 auto; }

.bl-qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0 var(--bl-space-1);
  font-variant-numeric: tabular-nums;
}

.bl-buybar-cart { flex: 1 1 auto; min-height: 44px; }

/* Set by script only when the bar is actually present, so an out-of-stock
   product does not reserve space for a bar it never renders. */
.bl-has-buybar .bl-pdp { padding-bottom: calc(var(--bl-space-4) * 6); }

@media (min-width: 992px) {
  .bl-buybar { display: none; }
  .bl-has-buybar .bl-pdp { padding-bottom: calc(var(--bl-space-4) * 3); }
}