/* Platonik Kimya V52 | Product-group layout only.
   Keeps original typography, backgrounds, colors, navigation and homepage sliders.
   All product packaging is shown without cropping or deformation.
   Loaded at render time, so existing MySQL/CMS blocks need no migration. */

/* Larger image area: category pages and product-family sections */
.inner-page .lineup {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  align-content: center !important;
  gap: clamp(15px, 2vw, 30px) !important;
  padding: clamp(16px, 2vw, 26px) 0 !important;
  min-height: 0 !important;
  max-width: 1380px;
  margin-inline: auto;
}
.inner-page .lineup > a {
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc((100% - 2 * clamp(15px, 2vw, 30px)) / 3) !important;
  width: calc((100% - 2 * clamp(15px, 2vw, 30px)) / 3) !important;
  height: clamp(315px, 32vw, 435px) !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: clamp(4px, .7vw, 10px) !important;
  margin: 0 !important;
  transform: none !important;
  position: relative;
  transition: transform .25s ease !important;
}
.inner-page .lineup > a:nth-child(even),
.inner-page .lineup > a:nth-child(odd) { transform: none !important; }
.inner-page .lineup > a:hover,
.inner-page .lineup > a:focus-visible { transform: translateY(-6px) !important; }
.inner-page .lineup > a > img {
  box-sizing: border-box;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  filter: drop-shadow(0 16px 18px rgba(10, 29, 95, .16));
}
/* At least three products: place the images below the copy, across the full
   content width. This prevents 5+ packages shrinking in the half-width column. */
@supports selector(section:has(> div)) {
  .inner-page :is(.family-row, .series-hero):has(.lineup > a:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(12px, 2vw, 28px) !important;
    align-items: start !important;
    min-height: 0 !important;
  }
  .inner-page .family-row:has(.lineup > a:nth-child(3)) {
    padding-block: clamp(56px, 5.5vw, 90px) !important;
  }
  .inner-page .series-hero:has(.lineup > a:nth-child(3)) {
    padding-block: clamp(36px, 4vw, 68px) !important;
  }
  .inner-page :is(.family-row, .series-hero):has(.lineup > a:nth-child(3)) :is(.family-copy, .series-copy) {
    max-width: 940px !important;
  }
  .inner-page .family-row.reverse:has(.lineup > a:nth-child(3)) .family-copy { order: 0 !important; }
  .inner-page .family-row.reverse:has(.lineup > a:nth-child(3)) .lineup { order: 1 !important; }
  /* Don't make a single hero image occupy a 3-up cell. */
  .inner-page .lineup:has(> a:only-child) > a { flex-basis: min(100%, 460px) !important; width: min(100%, 460px) !important; }
}
/* Catalogue results and related-products sections: larger equal-height cards. */
.inner-page .product-grid,
.inner-page .related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.1vw, 34px) !important;
}
.inner-page .product-grid .product-tile {
  min-width: 0;
  height: 100%;
}
.inner-page .product-grid .product-tile img {
  box-sizing: border-box;
  display: block !important;
  width: 100% !important;
  height: clamp(330px, 27vw, 445px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin-bottom: 18px !important;
  padding: 5px !important;
}
.inner-page .related-grid img {
  width: 100% !important;
  height: clamp(270px, 23vw, 350px) !important;
  object-fit: contain !important;
  object-position: center center !important;
}
@media (min-width: 1500px) {
  .inner-page .lineup > a { height: 460px !important; }
}
@media (max-width: 1024px) {
  .inner-page .lineup > a {
    flex-basis: calc((100% - clamp(15px, 2vw, 30px)) / 2) !important;
    width: calc((100% - clamp(15px, 2vw, 30px)) / 2) !important;
    height: clamp(290px, 40vw, 390px) !important;
  }
  .inner-page .product-grid,
  .inner-page .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .inner-page .product-grid .product-tile img { height: clamp(280px, 35vw, 370px) !important; }
}
@media (max-width: 650px) {
  .inner-page .lineup { gap: 16px !important; max-width: 490px; }
  .inner-page .lineup > a {
    flex-basis: min(100%, 460px) !important;
    width: min(100%, 460px) !important;
    height: clamp(285px, 84vw, 400px) !important;
    padding: 6px !important;
  }
  .inner-page .product-grid,
  .inner-page .related-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }
  .inner-page .product-grid .product-tile img { height: clamp(300px, 90vw, 425px) !important; }
  .inner-page .related-grid img { height: clamp(270px, 78vw, 350px) !important; }
  .inner-page .family-row.reverse .family-copy,
  .inner-page .family-row.reverse .lineup { order: initial !important; }
}
@media (prefers-reduced-motion: reduce) {
  .inner-page .lineup > a { transition: none !important; }
}

/* V53: packaging quantity shown clearly without shrinking or cropping products. */
.inner-page .lineup > a { height: clamp(355px, 35vw, 480px) !important; }
.inner-page .lineup > a > img { height: calc(100% - 42px) !important; }
.inner-page .lineup > a > .product-volume-badge {
 position:absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
 z-index: 2; min-width: 66px; max-width: calc(100% - 16px);
 display:inline-flex; align-items:center; justify-content:center;
 padding: 7px 15px; border-radius: 999px;
 background: rgba(255,255,255,.94); border: 1px solid rgba(22,51,119,.15);
 color:#172c62; font-size: 15px; font-weight: 750; line-height:1.25;
 white-space: normal; text-align: center; box-shadow: 0 4px 18px rgba(25,48,125,.10);
}
.inner-page .variant-copy > .product-quantity-pill {
 display: table; width: max-content; max-width: 100%; margin: 15px 0 19px;
 background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.36);
 border-radius: 999px; padding: 8px 18px; color: inherit;
 font-size: 16px; font-weight: 800; letter-spacing: .025em;
}
@media(min-width:1500px){.inner-page .lineup > a{height:490px!important}}
@media(max-width:1024px){.inner-page .lineup > a{height:clamp(322px, 45vw, 420px)!important}}
@media(max-width:650px){.inner-page .lineup > a{height:clamp(320px, 90vw, 445px)!important}}

/* V53.1: a real two-row layout prevents the quantity badge overlaying
   package text at the bottom and preserves every lid and base in full. */
.inner-page .lineup > a {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: minmax(0,1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  align-content: stretch !important;
  gap: 7px !important;
  padding: 14px 10px 10px !important;
  overflow: visible !important;
}
.inner-page .lineup > a > img {
  grid-row: 1 !important;
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  overflow: visible !important;
}
.inner-page .lineup > a > .product-volume-badge {
  position: static !important;
  grid-row: 2 !important;
  transform: none !important;
  margin: 0 !important;
  min-height: 34px;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
/* Stable, legible specification rows even when 'Ambalaj' is replaced by the badge. */
.inner-page .variant-copy .specs dd {
  text-overflow: clip;
  overflow-wrap: anywhere;
}