/* 443 (the owner 10-16: „Tooteleht lõhub/näitab segamini järjestust … tee palun nii, et tükid ei liiguks plokis sees"):
   the summary block's pieces pinned — left the options (when any) above the price, right the info box (rows in
   template order, a missing row leaves no hole). Journal's own compiled rules (style.min.css, which loads AFTER this
   file — hence every selector here carries .route-product-product and wins on specificity, not order) let the pieces
   move with content length: `.product-info .product-stats` was a wrapping flex row and `.product-stats ul` a wrapping
   column, so rows could split into a second column (the GEN2X4 charger's 5 rows). Quickview untouched throughout. */

.route-product-product .product-info .product-stats {
  flex-wrap: nowrap;
}

.route-product-product .product-info .product-stats ul {
  flex-wrap: nowrap; /* one column of rows, always in template order */
  flex: 1 1 auto;
  min-width: 0;      /* a long row wraps inside its own li */
}

/* 445 (the owner 10-16: „Kuna tekstid vajavad selles osas ruumi, äkki paneks Logod sellesse plokki? Nuppude suurus
   toodete juures ei muutu." · split accepted: buttons 3/4 · logo 1/4): the brand-logo card leaves the info box
   (product.twig renders it in .button-group-page now — the box belongs entirely to the text rows). No rule here
   touches a button's own size: the buttons keep their 75% lane. The element's geometry is 447's block below. */

/* 447 (the owner 10-16, after 446's floating dot — „Halb töö … selles plokis järgib lisatav element kõiki ploki
   reegleid - algsed vahed kõikide sise ja välisservadega säilitatakse"): the logo is the block's own element.
   The block's grammar, measured: element height = the theme's --stepper-height (38px, the main row's height);
   the block has NO inner padding (the stepper sits flush on its left edge), so the mirrored right inset is 0;
   elements breathe through --product-page-buttons-gap (4px). The logo element obeys exactly that: it sits ON the
   main button row, top-aligned with the stepper, flush to the block's right inner edge, 38px tall, borderless
   (446 stands); the image fills the element's height proportionally (444's natural-size cap is LIFTED here — the
   2x brand file scales up; the column bound only letterboxes an extreme landscape logo, the element stays 38px).
   The buttons keep their 75% lane (445), so the space between „Ostke kohe" and the logo stays free and nothing
   else moves. */

.route-product-product:not(.popup) .product-info .button-group-page {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start; /* the logo element tops the row like the stepper does */
}

.route-product-product:not(.popup) .product-info .button-group-page .buttons-wrapper {
  flex: 0 0 75%;
  max-width: 75%;
}

.route-product-product:not(.popup) .product-info .button-group-page .brand-image {
  flex: 1 1 25%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end; /* pinned to the block's right inner edge: inset 0 = the stepper's left inset */
}

/* 448: the img is the ORIGINAL brand file (event/product.php serves it with its real dimensions), so the slot only
   caps it — height = the main button row, width <= 150px (the theme's own old logo rule); the image takes the
   largest clean render inside both caps at its OWN ratio, no letterbox canvas, vertically centered on the row. */
.route-product-product .product-info .button-group-page .brand-image a {
  height: var(--stepper-height, 38px); /* = the block's element height, the main button row */
  width: auto;
  max-width: 150px;
  border: none;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.route-product-product .product-info .button-group-page .brand-image img {
  width: auto;
  height: auto;    /* the image's own ratio decides; whichever cap binds scales it down cleanly */
  max-height: var(--stepper-height, 38px);
  max-width: 150px;
  object-fit: contain;
}

/* phone: the one stacked sequence — options · price · info box; in the buttons block the logo card
   becomes its own centered row at the block's end (full-width buttons stay full width) */
@media (max-width: 760px) {
  .route-product-product .product-info .product-price-group {
    flex-direction: column;
  }

  .route-product-product:not(.popup) .product-info .button-group-page {
    flex-direction: column;
    align-items: stretch;
  }

  .route-product-product:not(.popup) .product-info .button-group-page .buttons-wrapper,
  .route-product-product:not(.popup) .product-info .button-group-page .brand-image {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .route-product-product:not(.popup) .product-info .button-group-page .brand-image {
    justify-content: flex-start; /* 447: its own row at the block's end, left-aligned like the other rows */
    margin-top: calc(var(--product-page-buttons-gap, 4px) * 2);
  }

  .route-product-product .product-info .button-group-page .brand-image a {
    justify-content: flex-start;
  }
}