/* CRAFTLEX universal product image + mobile product page hotfix — 2026-08-18 */

/* Catalog cards: one predictable frame for portrait, landscape and square photos. */
.product-visual {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 4 !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f6f6f4 !important;
}
.product-visual > img {
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  padding: 8px;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff;
  position: relative;
}

/* Initial catalog HTML is rendered before Google Sheets data arrives. While the
   category bar still has only its bootstrap "All" button and the grid is empty,
   show a loader instead of the misleading "nothing found" placeholder. */
.catalog-section:has(.product-grid:empty):has(.category-tabs button:only-child) .catalog-empty {
  display: grid !important;
  place-items: center;
  min-height: 180px;
  padding: 36px !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
}
.catalog-section:has(.product-grid:empty):has(.category-tabs button:only-child) .catalog-empty::before {
  content: "";
  width: 38px;
  height: 38px;
  border: 4px solid #dfe5e8;
  border-top-color: var(--blue, #0098cf);
  border-radius: 50%;
  animation: craftlex-catalog-spin .75s linear infinite;
}
.shop-warm .catalog-section:has(.product-grid:empty):has(.category-tabs button:only-child) .catalog-empty::before {
  border-top-color: var(--orange, #ff6433);
}
@keyframes craftlex-catalog-spin {
  to { transform: rotate(360deg); }
}

/* Product page: do not allow grid/flex children or long text to widen the viewport. */
.product-detail-section,
.product-detail-section .shell,
.product-detail-layout,
.product-detail-layout > *,
.product-gallery,
.product-gallery-main,
.product-gallery-thumbs,
.product-detail-summary,
.product-detail-content,
.product-detail-content > * {
  min-width: 0;
  max-width: 100%;
}
.product-gallery-main img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center center !important;
}
.product-gallery-thumbs {
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.product-gallery-thumbs button,
.product-gallery-thumbs img {
  min-width: 0;
  max-width: 100%;
}
.product-detail-kicker,
.product-detail-summary h1,
.product-detail-lead,
.product-detail-summary p,
.product-detail-summary a,
.product-detail-summary span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 820px) {
  html, body {
    width: 100%;
    max-width: 100%;
  }
  .product-detail-layout,
  .product-detail-content {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .product-detail-summary {
    width: 100%;
  }
  .product-gallery-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .product-detail-summary h1 {
    font-size: clamp(30px, 8.5vw, 36px) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
  }
  .product-detail-kicker {
    font-size: 10px;
    line-height: 1.45;
  }
  .product-gallery-main,
  .product-detail-empty {
    width: 100%;
    height: min(370px, 92vw) !important;
  }
}