/* ============================================================
   SHOWROOM V10 — visual contract
   Loaded last on every public page to neutralize older theme collisions.
   ============================================================ */

:root{
  --kb-card-radius:20px;
  --kb-media-radius:15px;
  --kb-card-gap:14px;
  --kb-media-bg:#f7f7f6;
  --kb-placeholder-bg:#f5f5f4;
}

/* --- Header: keep logo/search/actions on a predictable rail --- */
.header-main .header-row{
  display:grid;
  grid-template-columns:minmax(180px,220px) minmax(260px,1fr) auto;
  align-items:center;
  gap:18px;
  min-width:0;
}
.header-main .logo,.header-main .search-wrap,.header-main .header-actions{min-width:0}
.header-main .logo img{display:block;width:min(220px,100%);height:auto;object-fit:contain}
.header-main .search-wrap{width:100%}
.header-main .search{width:100%;min-width:0}
.header-main .search-input{min-width:0}
.header-main .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}

/* --- Catalog shell --- */
.catalog-layout{min-width:0}
.catalog-products,.catalog-products-head,.catalog-toolbar,.catalog-toolbar__right{min-width:0}
.catalog-toolbar{flex-wrap:wrap}
.catalog-toolbar__right{max-width:100%}
.catalog-products-head{gap:14px;flex-wrap:wrap}
.catalog-products-head>div{min-width:0}
.catalog-inline-sort{max-width:100%}
.catalog-inline-sort select{max-width:100%}
.catalog-filters-v4{overscroll-behavior:contain}

/* --- Product card: one stable geometry across catalog/home/recommendations --- */
.prod-grid{align-items:stretch}
.prod{
  display:flex!important;
  flex-direction:column;
  min-width:0;
  height:100%;
  overflow:hidden;
  padding:12px;
  border-radius:var(--kb-card-radius);
  background:#fff;
}
.prod-media-shell{position:relative;min-width:0;margin:0 0 12px}
.prod-image{
  position:relative;
  display:grid!important;
  place-items:center;
  width:100%;
  aspect-ratio:1/1!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden;
  border-radius:var(--kb-media-radius);
  padding:16px;
  background:linear-gradient(145deg,#fafaf9,var(--kb-media-bg));
}
.prod-image img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transition:transform .22s ease;
}
.prod:hover .prod-image img{transform:scale(1.025)}
.prod-image.has-image-error img,.prod-image img.is-image-error{display:none!important}
.ref-product-placeholder,.image-fallback-v10{
  width:100%;height:100%;min-height:120px;
  display:grid;place-items:center;align-content:center;gap:8px;
  text-align:center;border:1px dashed rgba(17,24,39,.10);
  border-radius:12px;background:var(--kb-placeholder-bg);color:#8b8b94;
  padding:16px;
}
.ref-product-placeholder i,.image-fallback-v10 i{font-size:24px;color:#c1c2c7}
.ref-product-placeholder span,.image-fallback-v10 span{font-size:10px;font-weight:700;line-height:1.35}
.prod-image>.ref-product-placeholder,.prod-image>.image-fallback-v10{position:absolute;inset:10px;width:auto;height:auto;min-height:0}

.prod-quick-actions{z-index:4;display:flex;gap:6px}
.prod-quick-actions button{backdrop-filter:blur(8px)}
.prod-cat,.prod-sku{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-cat{min-height:14px;margin-bottom:5px}
.prod-sku{min-height:11px;margin-bottom:7px}
.prod-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height:2.8em!important;
  max-height:2.8em;
  margin:0 0 8px;
  line-height:1.4;
}
.prod-title a{display:block;overflow-wrap:anywhere}
.prod-rating{min-height:25px;margin-bottom:8px}
.prod-price-row{margin-top:auto!important;margin-bottom:9px}
.prod-price{overflow-wrap:anywhere}
.prod-stock{margin-bottom:10px}
.prod-stock-text{display:flex;justify-content:space-between;gap:8px;min-width:0}
.prod-stock-text span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod>form{margin:0}
.prod-add{width:100%;min-height:43px;justify-content:center;text-align:center;white-space:normal;line-height:1.2}

/* Catalog density: never squeeze cards into unreadable slivers. */
.catalog-product-grid.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:var(--kb-card-gap)!important}
@media (min-width:1500px){.catalog-product-grid.prod-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:1023px){.catalog-product-grid.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:760px){.catalog-product-grid.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}}
@media (max-width:560px){.catalog-product-grid.prod-grid{grid-template-columns:1fr!important;gap:12px!important}}

/* List mode keeps image, content, price and action aligned. */
.catalog-product-grid.is-list{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
.catalog-product-grid.is-list .prod{
  display:grid!important;
  grid-template-columns:148px minmax(0,1fr) minmax(150px,.38fr) minmax(175px,.42fr);
  grid-template-rows:auto auto auto;
  gap:5px 18px;
  min-height:172px;
  padding:11px 14px;
}
.catalog-product-grid.is-list .prod-media-shell{grid-column:1;grid-row:1/4;width:148px;margin:0;align-self:stretch}
.catalog-product-grid.is-list .prod-image{height:148px!important;aspect-ratio:1!important;padding:12px}
.catalog-product-grid.is-list .prod-cat,.catalog-product-grid.is-list .prod-sku,.catalog-product-grid.is-list .prod-title,.catalog-product-grid.is-list .prod-rating{grid-column:2;margin-top:0;margin-bottom:0}
.catalog-product-grid.is-list .prod-title{min-height:0!important;max-height:none;-webkit-line-clamp:2}
.catalog-product-grid.is-list .prod-price-row{grid-column:3;grid-row:1/2;margin:0!important;align-self:end}
.catalog-product-grid.is-list .prod-stock{grid-column:3;grid-row:2/4;margin:0;align-self:start}
.catalog-product-grid.is-list> .prod>form{grid-column:4;grid-row:1/4;align-self:center;margin:0}

/* --- Product detail gallery: fixed ratio, no absolute quick-action collision --- */
.product-detail--v7{align-items:start}
.product-detail--v7 .product-detail__visual{display:block!important;min-width:0!important;min-height:0!important;padding:16px!important;overflow:hidden}
.product-gallery-v7{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:start;min-width:0}
.product-gallery-v7__thumbs{display:grid;gap:8px;align-content:start;max-height:560px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.product-gallery-v7__thumb{width:72px;height:72px;min-width:72px;min-height:72px;padding:5px;border-radius:12px;overflow:hidden;background:#fff}
.product-gallery-v7__thumb img{display:block;width:100%;height:100%;object-fit:contain}
.product-gallery-v7__thumb.has-image-error{display:none}
.product-gallery-v7__stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  min-width:0;
  min-height:0!important;
  max-height:590px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(145deg,#fafaf9,#f4f4f2);
}
.product-gallery-v7__stage .product-main-image{
  display:block;
  width:100%;height:100%!important;
  max-width:100%;max-height:100%!important;
  padding:22px;
  object-fit:contain;
  object-position:center;
  cursor:zoom-in;
}
.product-gallery-v7__stage.has-image-error .product-main-image{display:none!important}
.product-gallery-v7__stage>.image-fallback-v10{position:absolute;inset:18px;width:auto;height:auto}
.product-gallery-v7__zoom{z-index:3}
.product-detail--v7 .product-detail__quick{
  position:static!important;
  inset:auto!important;
  display:flex!important;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 0!important;
  width:100%;
}
.product-detail--v7 .product-detail__quick button{position:static!important;min-width:0}
.product-detail--v7 .product-detail__info{min-width:0}
.product-detail--v7 .product-detail__info h1{overflow-wrap:anywhere}
.product-detail--v7 .product-buy{min-width:0}
.product-detail--v7 .product-buy label,.product-detail--v7 .product-buy input,.product-detail--v7 .product-buy select{min-width:0}

/* --- Quick view --- */
.quick-view__dialog{width:min(980px,calc(100vw - 30px));max-height:calc(100dvh - 30px);overscroll-behavior:contain}
.quick-view__grid{min-width:0}
.quick-view__visual,.quick-view__copy{min-width:0}
.quick-view__main{aspect-ratio:1/1;min-height:0!important;height:auto!important;max-height:500px;overflow:hidden}
.quick-view__main img{display:block;width:100%;height:100%!important;min-height:0!important;padding:16px;object-fit:contain}
.quick-view__main.has-image-error img{display:none!important}
.quick-view__main>.image-fallback-v10{position:absolute;inset:14px;width:auto;height:auto}
.quick-view__main{position:relative}
.quick-view__thumb.has-image-error{display:none}
.quick-view__copy h2{overflow-wrap:anywhere}
.quick-view__form{min-width:0}
.quick-view__form>*{min-width:0}

/* --- Lightbox --- */
.image-lightbox-v7 img.is-image-error{display:none!important}

/* --- Request bars: reserve safe area and never overlap each other --- */
.request-ribbon-v7{max-width:calc(100vw - 24px);z-index:8900}
.product-mobile-bar{z-index:9000}

/* --- Image cache admin diagnostics --- */
.image-source-url{display:block;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 9px/1.3 'Geist Mono',monospace;color:#73737b}

@media (max-width:1180px){
  .header-main .header-row{grid-template-columns:minmax(160px,190px) minmax(220px,1fr) auto;gap:12px}
  .header-main .header-actions{gap:5px}
  .catalog-product-grid.is-list .prod{grid-template-columns:120px minmax(0,1fr) 145px}
  .catalog-product-grid.is-list .prod-media-shell{width:120px}
  .catalog-product-grid.is-list .prod-image{height:120px!important}
  .catalog-product-grid.is-list> .prod>form{grid-column:3;grid-row:2/4}
  .catalog-product-grid.is-list .prod-price-row{grid-column:3}
  .catalog-product-grid.is-list .prod-stock{grid-column:2;grid-row:3}
}

@media (max-width:900px){
  .header-main .header-row{display:flex;flex-wrap:wrap;gap:10px}
  .header-main .logo{flex:1 1 180px}
  .header-main .search-wrap{order:3;flex:1 0 100%;width:100%}
  .header-main .header-actions{margin-left:auto}
  .product-detail--v7{grid-template-columns:1fr!important}
  .product-gallery-v7__stage{max-height:none}
}

@media (max-width:767px){
  .header-main .header-row{display:grid;grid-template-columns:minmax(145px,1fr) auto;gap:8px 10px}
  .header-main .logo{min-width:0}
  .header-main .header-actions{grid-column:2;gap:4px}
  .header-main .search-wrap{grid-column:1/-1;order:initial}
  .catalog-products-v4{padding:14px!important}
  .catalog-toolbar{align-items:stretch}
  .catalog-toolbar__right{width:100%;justify-content:flex-start}
  .catalog-products-head{align-items:stretch}
  .catalog-inline-sort{width:100%}
  .catalog-inline-sort select{width:100%}
  .catalog-product-grid.is-list .prod{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto;gap:4px 12px;min-height:0;padding:10px}
  .catalog-product-grid.is-list .prod-media-shell{grid-column:1;grid-row:1/7;width:96px;align-self:start}
  .catalog-product-grid.is-list .prod-image{height:96px!important;padding:8px}
  .catalog-product-grid.is-list .prod-cat,.catalog-product-grid.is-list .prod-sku,.catalog-product-grid.is-list .prod-title,.catalog-product-grid.is-list .prod-rating,.catalog-product-grid.is-list .prod-price-row,.catalog-product-grid.is-list .prod-stock,.catalog-product-grid.is-list> .prod>form{grid-column:2;grid-row:auto}
  .catalog-product-grid.is-list .prod-rating{display:none}
  .product-detail--v7 .product-detail__visual{padding:10px!important}
  .product-gallery-v7{grid-template-columns:1fr;gap:9px}
  .product-gallery-v7__thumbs{grid-row:2;display:flex;gap:7px;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
  .product-gallery-v7__thumb{flex:0 0 60px;width:60px;height:60px;min-width:60px;min-height:60px}
  .product-gallery-v7__stage{grid-row:1;aspect-ratio:1/1;min-height:0!important}
  .product-gallery-v7__stage .product-main-image{height:100%!important;padding:14px}
  .product-detail--v7 .product-detail__quick{display:grid!important;grid-template-columns:1fr 1fr}
  .quick-view{padding:8px}
  .quick-view__dialog{width:100%;max-height:calc(100dvh - 16px)}
  .quick-view__visual{grid-template-columns:1fr}
  .quick-view__thumbs{grid-row:2;display:flex;overflow-x:auto;overflow-y:hidden;max-height:none}
  .quick-view__thumb{flex:0 0 52px}
  .quick-view__main{grid-row:1;aspect-ratio:1/1;max-height:none}
  .request-ribbon-v7{bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;max-width:none}
}

@media (max-width:560px){
  .prod{padding:11px;border-radius:18px}
  .prod-image{padding:18px}
  .prod-title{font-size:13px!important}
  .prod-price{font-size:17px!important}
  .prod-cat{font-size:9px!important}
  .prod-add{font-size:10.5px!important}
  .related-products-grid{grid-template-columns:1fr!important}
  .catalog-product-grid.is-list .prod{grid-template-columns:88px minmax(0,1fr)}
  .catalog-product-grid.is-list .prod-media-shell{width:88px}
  .catalog-product-grid.is-list .prod-image{height:88px!important}
  .catalog-view-switch{display:none}
  .product-detail--v7 .product-detail__info h1{font-size:clamp(26px,8vw,34px)!important}
  .product-detail--v7 .product-buy{grid-template-columns:1fr!important}
  .product-detail--v7 .product-detail__quick{grid-template-columns:1fr}
  .quick-view__form{grid-template-columns:1fr!important}
  .request-ribbon-v7{padding:8px 8px 8px 12px;gap:8px}
  .request-ribbon-v7 span{max-width:none!important;min-width:0}
}

@media (max-width:420px){
  .header-main .header-actions .header-utility{display:none}
  .header-main .action-cta span{display:none}
  .header-main .action-cta{width:42px;padding:0;justify-content:center}
  .catalog-product-grid.is-list{display:grid!important}
  .catalog-product-grid.is-list .prod{display:flex!important}
  .catalog-product-grid.is-list .prod-media-shell{width:100%;margin-bottom:10px}
  .catalog-product-grid.is-list .prod-image{width:100%;height:auto!important;aspect-ratio:1/1!important}
}

@media (prefers-reduced-motion:reduce){
  .prod,.prod-image img{transition:none!important}
}

/* V3 mobile CSS used to collapse these actions into icon-only 40px circles.
   Product detail v10 keeps the labels visible so the controls are understandable. */
.product-detail--v7 .product-detail__quick button{
  width:auto!important;
  height:auto!important;
  min-height:40px;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:999px;
  font-size:10px!important;
  line-height:1.2;
  white-space:nowrap;
}
.product-detail--v7 .product-detail__quick button i{font-size:12px!important}
@media(max-width:560px){
  .product-detail--v7 .product-detail__quick button{width:100%!important;border-radius:12px}
}
