/* === HB — TERMÉKOLDAL elrendezése (hb-380, 2026-09-30) ===
   Helye: catalog/view/theme/hb/stylesheet/hb-product.css — a header.twig-ben a hb-header.css UTÁN töltődik.
   Ügyfél-kérés 09-30: a termékkép minden esetben négyzet, oldalsó fehér sáv nélkül (mint a régi oldalon), és akár bal, akár jobb
   oldalsávval is működjön; a kapcsolódó termékek körhintában. A gyári product.twig-hez NEM nyúlunk (a wildcard OCMOD-ok foltozzák):
   csak ez a fájl + a hb.js 5. szakasza (a körhinta indítása). Színek a hb.stylesheet.css-ben (bőr). */


/* 1. Kép + adatok egymás mellett, alattuk a fülek teljes szélességben (a régi elrendezés).
      A gyári sor: [.col-sm-8: kép-lista, fülek, fül-tartalom] [.col-sm-4: adatok, kosár] — oldalsávval 6 / 6.
      ≥768 px a képes oszlop „szétnyílik" (display: contents), így a gyerekei rácscellák: a kép az 1. oszlopban
      (a tartalom fele, legfeljebb 600 px — a régi arány), az adatok a 2.-ban, minden más (fülek stb.) alattuk teljes szélességben.
      Kép nélküli terméknél (nincs ul.thumbnails) a gyári elrendezés marad; 768 px alatt a gyári egymás alatti sorrend. */
@media (min-width: 768px) {
  #product-product #content > .row:has(> div > ul.thumbnails) {
    display: grid;
    grid-template-columns: min(50%, 600px) minmax(0, 1fr);
    column-gap: 30px;
    margin-left: 0;
    margin-right: 0;
  }
  /* a .row clearfixe rácselem lenne */
  #product-product #content > .row:has(> div > ul.thumbnails)::before,
  #product-product #content > .row:has(> div > ul.thumbnails)::after { content: none; }
  #product-product #content > .row > div:has(> ul.thumbnails) { display: contents; }
  #product-product #content > .row > div:has(> ul.thumbnails) > * { grid-column: 1 / -1; min-width: 0; }
  #product-product #content > .row > div:has(> ul.thumbnails) > ul.thumbnails { grid-column: 1; grid-row: 1; }
  #product-product #content > .row:has(> div > ul.thumbnails) > div:not(:has(> ul.thumbnails)) {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 2. A fő kép kitölti a négyzetes keretét (a gyári 228 px-es kép a keret közepén állt, két oldalt fehér sávval) */
#product-product .thumbnails > li:not(.image-additional) > .thumbnail > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}


/* 3. Kapcsolódó termékek körhintában (a hb.js 5. szakasza teszi rá a .hb-related osztályt és indítja az ocex_carousel-t):
      egyforma magas kártyák, a gombsor mindig alul. JS nélkül a gyári rács marad. */
#product-product .hb-related .ocex-cr-slide { display: flex; }
#product-product .hb-related .ocex-cr-slide > .product-thumb { display: flex; flex-direction: column; width: 100%; }
#product-product .hb-related .product-thumb > .caption { flex: 1 0 auto; }