/* Zdieľané produktové komponenty. Dáta pripravuje productPresentation(). */
.material-image{position:relative;overflow:hidden;aspect-ratio:1;background:#e6e6df}
.material-image img{display:block;width:100%;height:100%;object-fit:cover}
.photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:16px;text-align:center;color:#77776d;font:11px/1.5 monospace}
.placeholder-mark{font:28px/1 Arial;color:#a5a59a}
.image-reference{position:absolute;bottom:8px;left:8px;background:var(--paper);padding:3px 6px;white-space:nowrap;font:10px/1.3 monospace}
.availability{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:11px/1.4 monospace;color:var(--ink)}
.availability.available{--status-color:#39ff14}.availability.potential{--status-color:#ff7a00}.availability.unavailable{--status-color:#f52828}
.availability.available::before,.availability.potential::before,.availability.unavailable::before{content:'';width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--status-color)}
.availability.available::before{animation:availability-pulse 1.6s ease-in-out infinite}
.availability.unspecified{color:#77776d}
@keyframes availability-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.price-amount{font-weight:600;font-variant-numeric:tabular-nums}.price-unit{font-weight:400;color:#656560;white-space:nowrap}

/* Galéria: obrázok, názov, cena, zásoba a zaradenie v pevnom poradí. */
.material-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}
.gallery-item{display:flex;flex-direction:column;min-width:0}
.gallery-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:inherit}
.gallery-open:hover img{filter:brightness(.98)}
.product-summary{display:flex;flex:1;flex-direction:column;min-width:0;padding-top:12px}
.product-title{font:inherit;margin:0;min-height:2.5em}
.gallery-name{display:block;width:100%;padding:0;border:0;background:none;color:var(--ink);text-align:left;font-size:19px;font-weight:600;letter-spacing:-.025em;line-height:1.25;overflow-wrap:anywhere}
.gallery-name:hover{color:var(--accent)}
.product-price{margin:10px 0 5px;font-size:17px;line-height:1.4}
.product-stock{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:21px;flex-wrap:wrap}
.product-quantity{font:13px/1.5 monospace;font-variant-numeric:tabular-nums}
.product-classification{display:grid;grid-template-columns:65px minmax(0,1fr);gap:4px 10px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.4}
.product-classification dt,.product-classification dd{padding:0;border:0;margin:0;text-align:left;overflow-wrap:anywhere}
.product-classification dt{color:#6b6b62}.product-classification dd{color:var(--ink)}

/* List: hustá porovnávacia tabuľka, zhodné hodnoty ako na karte. */
.material-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;line-height:1.3}
.col-image{width:48px}.col-name{width:25%}.col-category{width:24%}.col-dimensions{width:15%}.col-price{width:10%}.col-quantity{width:10%}.col-availability{width:10%}.col-detail{width:28px}
.material-table thead th{padding:10px 7px;text-align:left;border-bottom:1px solid var(--ink);color:#656560;font:11px/1.3 Arial,sans-serif;font-weight:400}
.material-table th button[data-sort]{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;text-align:inherit;font:inherit;color:inherit}
.material-table th[aria-sort=ascending],.material-table th[aria-sort=descending]{color:var(--ink);font-weight:700}
.material-table tbody td,.material-table tbody th{padding:6px 7px;border-bottom:1px solid var(--line);vertical-align:middle;font-weight:400;overflow-wrap:anywhere}
.material-table tbody tr:hover{background:#edede7}.material-table tbody tr:focus-within{background:#e9e9e2}
.material-table .numeric{text-align:right;font-family:monospace;font-variant-numeric:tabular-nums}
.item-name{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:var(--ink);font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.015em}
.item-name:hover{text-decoration:underline;text-underline-offset:3px}
.item-secondary{display:block;margin-top:3px;text-align:left;color:#6b6b62;font:9px/1.3 monospace}
.classification-cell span,.classification-cell small{display:block}.classification-cell small{margin-top:2px;color:#656560;font-size:10px;line-height:1.3}
.thumbnail-cell .material-image{width:36px;height:36px;aspect-ratio:1}.thumbnail-cell .photo-placeholder{padding:2px;gap:0}.thumbnail-cell .photo-placeholder>span:last-child{display:none}.thumbnail-cell .placeholder-mark{font-size:17px}
.thumbnail-cell .image-reference{left:0;bottom:0;padding:1px 0;width:100%;font-size:6px;text-align:center}
.price-cell,.quantity-cell{white-space:nowrap}.price-cell .price-amount{font-size:11px;font-weight:500}.price-cell .price-unit{display:block;font-size:9px;margin-top:1px}
.material-table .availability{font-size:10px;gap:5px}.detail-link{padding:5px 0;border:0;background:none;color:var(--accent);font-size:19px;line-height:1}.mobile-detail-label{display:none}
@media(min-width:1600px){.material-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px) and (min-width:851px){.material-table tbody td,.material-table tbody th{padding:6px 4px}.material-table thead th{padding:9px 4px;font-size:10px}.item-name{font-size:13px}.classification-cell small{font-size:9px}.material-table .availability{font-size:9px}.col-image{width:42px}.col-detail{width:22px}.thumbnail-cell .material-image{width:32px;height:32px}}
@media(max-width:850px){
 .material-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .material-table,.material-table tbody{display:block}.material-table colgroup{display:none}
 .material-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .material-table tbody tr{display:grid;grid-template-columns:38px minmax(0,1fr) 95px;gap:4px 12px;border-bottom:1px solid var(--line);padding:10px 0}
 .material-table tbody td,.material-table tbody th{padding:0;border:0;min-width:0}
 .thumbnail-cell{grid-column:1;grid-row:1/4}.name-cell{grid-column:2;grid-row:1}.classification-cell{grid-column:2;grid-row:2}.material-table .dimensions-cell{grid-column:2;grid-row:3;text-align:left;font-size:10px}.dimensions-cell:before{content:attr(data-mobile-label);color:#656560;font-family:Arial}
 .price-cell{grid-column:3;grid-row:1;align-self:start}.quantity-cell{grid-column:3;grid-row:2;align-self:center}.material-table .quantity-cell:before{content:attr(data-mobile-label);display:block;color:#6b6b62;font:9px/1.3 Arial}
 .availability-cell{grid-column:2;grid-row:4}.detail-cell{grid-column:3;grid-row:3/5;justify-self:end;align-self:end}.mobile-detail-label{display:inline;font-size:10px}
 .thumbnail-cell .material-image{width:36px;height:36px}.item-name{font-size:14px}.item-secondary{font-size:9px}.classification-cell span{font-size:11px}.classification-cell small{font-size:10px}.material-table .availability{font-size:10px}.price-cell .price-unit{font-size:10px}
}
@media(max-width:550px){
 .material-gallery{gap:25px 13px}.product-summary{padding-top:9px}.product-title{min-height:2.5em}.gallery-name{font-size:15px;line-height:1.25}.product-price{font-size:14px;margin:8px 0 4px}.product-quantity{font-size:11px}.product-stock .availability{font-size:9px}.product-classification{grid-template-columns:1fr;gap:2px;margin-top:9px;padding-top:8px;font-size:10px}.product-classification dt{font-size:9px}.product-classification dd+dt{margin-top:4px}.gallery-open .photo-placeholder{font-size:9px;padding:8px;gap:8px}.placeholder-mark{font-size:23px}
 .material-table tbody tr{grid-template-columns:32px minmax(0,1fr) 75px;gap:4px 9px;padding:9px 0}.thumbnail-cell .material-image{width:30px;height:34px}.item-name{font-size:13px}.item-secondary{font-size:8px}.classification-cell small{font-size:9px}.price-cell .price-amount,.quantity-cell{font-size:10px}.material-table .availability{font-size:9px}.thumbnail-cell .image-reference{font-size:5px}.detail-link{font-size:17px}.mobile-detail-label{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.availability.available::before{animation:none}}
