/* Progressive corrections without changing original desktop design. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
/* Original layout uses content-box: retain those dimensions. */
.conteiner, .main, .main .one, .main .two, .flexcroll { box-sizing: content-box; }
#mycustomscroll { max-height: 390px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
img { max-width: 100%; height: auto; }
.menu img { max-width: none; }
.images a { cursor: zoom-in; }
.gallery-lightbox { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: visible; color: #fff; }
.gallery-lightbox::backdrop { background: rgba(0,0,0,.88); }
.lightbox-panel { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; justify-items: center; max-width: 95vw; }
.lightbox-image { grid-column: 2; grid-row: 1; max-width: min(1100px, calc(100vw - 130px)); max-height: calc(100vh - 130px); width: auto; height: auto; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next { color:#fff; background:rgba(25,25,25,.65); border:1px solid #aaa; border-radius:5px; font: 32px Arial,sans-serif; cursor:pointer; min-width:44px; min-height:44px; }
.lightbox-close { position:absolute; right:0; top:-48px; font-size:28px; }
.lightbox-prev { grid-column: 1; grid-row: 1; }
.lightbox-next { grid-column: 3; grid-row: 1; }
.lightbox-counter { grid-column: 1 / -1; grid-row: 2; margin-top:12px; font:14px Arial,sans-serif; }
[hidden] { display:none!important; }
@media (max-width: 1002px) { body { overflow-x: auto; } } /* preserve original 1003px composition */

/* 2026-10-21: Keep the two original footer captions on one baseline. */
.conteiner .footer {
  box-sizing: border-box;
  display: flex;
  float: left;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 80px;
}
.conteiner .footer .cc,
.conteiner .footer .creator {
  float: none;
  display: block;
  margin: 0;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px;
  line-height: 18px;
}

/* Explicit centering: the site's global * { margin:0 } overrides the
   browser's default dialog margin:auto and used to move the photo off-center. */
dialog.gallery-lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: visible;
}
dialog.gallery-lightbox .lightbox-panel {
  max-width: calc(100vw - 32px);
}
dialog.gallery-lightbox .lightbox-image {
  display: block;
  max-height: calc(100dvh - 130px);
}

/* Footer anchored to original 1003 x 830 canvas on long product pages.
   Product galleries can contain floated thumbnails; their float/height must
   not displace or split the footer. */
.conteiner { position: relative; }
.conteiner > .footer {
  position: absolute;
  top: 780px;
  left: 0;
  right: 0;
  height: 30px;
  float: none;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 80px;
  z-index: 1;
}
.conteiner > .footer > .cc,
.conteiner > .footer > .creator {
  float: none;
  margin: 0;
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  line-height: 18px;
}

/* 2026-10-21 — footer repair: same fixed canvas as original design.
   In particular, never allow the footer to size to the browser viewport. */
.conteiner { position: relative; width: 1003px; }
.conteiner > .footer {
  position: absolute;
  box-sizing: border-box;
  top: 780px;
  left: 0;
  right: auto;
  width: 1003px;
  height: 30px;
  margin: 0;
  padding: 0 80px;
  float: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
.conteiner > .footer > .cc,
.conteiner > .footer > .creator {
  position: static;
  float: none;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 18px;
}

/* Product overview: keep tiles INSIDE the scrolling content. Do not let the
   3xN gallery overlap the site footer (original layout 1003 x 830). */
.products-overview .main .two .flexcroll {
  height: 490px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.products-overview .main .two #mycustomscroll {
  max-height: none;
  overflow: visible;
}
.products-overview .main .two .images {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  column-gap: 3px;
  row-gap: 8px;
  width: 459px;
  align-items: start;
}
.products-overview .main .two .images a,
.products-overview .main .two .images img {
  display: block;
  width: 150px;
  max-width: 150px;
  margin: 0;
}

/* Final correction: uniform three-column catalogue, no floats or inherited
   450px link widths, with the entire gallery INSIDE the scrolling panel. */
.products-overview .main .two .flexcroll {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: content-box;
  scrollbar-width: thin;
}
.products-overview .main .two #mycustomscroll {
  padding-top: 12px !important;
  overflow: visible;
  max-height: none;
}
.products-overview .main .two .images {
  display: grid !important;
  grid-template-columns: repeat(3, 150px) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 142px;
  gap: 3px !important;
  width: 456px !important;
  max-width: 456px;
  margin: 0 !important;
  padding: 0 !important;
  clear: both;
  float: none !important;
  align-items: start;
  justify-content: start;
}
.products-overview .main .two .images > a {
  box-sizing: border-box !important;
  display: block !important;
  float: none !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  height: 142px;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center;
  overflow: hidden;
}
.products-overview .main .two .images > a > img {
  display: block !important;
  float: none !important;
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Product thumbnails: stable cells even for differently-sized or missing images. */
body.products-overview .main .two .images {
  display: grid !important;
  grid-template-columns: repeat(3, 150px) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 142px !important;
  gap: 3px !important;
  width: 456px !important;
  max-width: 456px !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
  align-content: start !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
body.products-overview .main .two .images > a.product-tile {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  float: none !important;
  width: 150px !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 142px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-decoration: none;
}
body.products-overview .main .two .images > a.product-tile > img.product-thumb {
  display: block !important;
  box-sizing: border-box !important;
  float: none !important;
  position: static !important;
  width: 150px !important;
  max-width: 150px !important;
  height: 142px !important;
  max-height: 142px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.products-overview .product-fallback { display: none; }
body.products-overview .product-tile.thumb-missing {
  background: rgba(215,208,195,.52);
  border: 1px solid rgba(100,82,56,.25);
}
body.products-overview .product-tile.thumb-missing > img.product-thumb { display: none !important; }
body.products-overview .product-tile.thumb-missing > .product-fallback {
  display: block;
  padding: 8px;
  text-align: center;
  font-size: 13px;
  color: #514837;
  overflow-wrap: anywhere;
}