.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:30px 0}
.catalog-card{min-width:0;border:2px solid #080808;background:#fff;box-shadow:6px 6px 0 var(--pink);overflow:hidden}
.catalog-card[hidden]{display:none}
.garment-preview{position:relative;aspect-ratio:1;background:#f1f1f1;isolation:isolate;overflow:hidden}
.garment-base{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-image:url('../assets/garment-color-sprite.png');background-repeat:no-repeat}
/* .garment-art sits inside .garment-base, so these percentages are relative to the real,
   already-correctly-sized garment photo (not the square preview box) and stay accurate
   regardless of how much of the square any given garment photo actually fills. */
.garment-art{position:absolute;left:32%;top:24%;width:36%;height:40%;object-fit:contain;z-index:2;mix-blend-mode:normal}
.garment-art-multiply{mix-blend-mode:multiply}
.garment-art-screen{mix-blend-mode:screen}
/* Fallback when neither blend mode would read correctly (e.g. white-background art on a black
   garment would multiply-crush to near-invisible; dark-background art on white would screen-wash
   out) — a small white patch keeps the design legible and true to its real colors instead. */
.garment-art-patch{mix-blend-mode:normal;background:#fff;padding:7%;border-radius:6%;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.garment-preview[data-garment=hoodie] .garment-art{left:33%;top:30%;width:34%;height:34%}
.garment-preview[data-garment=zip] .garment-art{left:34%;top:28%;width:32%;height:32%}
.garment-preview[data-garment=pants] .garment-art{left:57%;top:38%;width:20%;height:28%}
.garment-preview[data-garment=cap] .garment-art{left:33%;top:26%;width:34%;height:30%}
.garment-preview[data-garment=jersey] .garment-art{left:32%;top:24%;width:36%;height:40%}
.garment-base.zip-base::after{content:"";position:absolute;z-index:3;left:50%;top:8%;height:84%;border-left:2px solid rgba(30,30,30,.72);box-shadow:1px 0 rgba(255,255,255,.35);pointer-events:none}
.mockup-tag{position:absolute;top:12px;left:12px;padding:3px 9px;background:#080808;color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800}
.catalog-info{padding:20px}.catalog-info h3{margin:0 0 12px;font-size:22px;line-height:1.2}.garment-label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.catalog-info select{width:100%;margin:5px 0 12px;padding:9px;border:1px solid #999;background:white;border-radius:0}
.color-options{padding:0;border:0;margin:0;min-width:0}.color-options legend{font-size:13px;padding:0;margin-bottom:6px}.swatches{display:flex;gap:4px}
.color-swatch{position:relative;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;margin:0}
.color-swatch input{position:absolute;width:44px;height:44px;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.swatch-dot{display:block;width:26px;height:26px;border:1px solid #888;border-radius:50%;background:var(--swatch);position:relative}
.color-swatch input:checked+.swatch-dot{outline:2px solid #080808;outline-offset:4px}
.color-swatch input:focus-visible+.swatch-dot{outline:3px solid var(--pink);outline-offset:5px}
.selection-status{font-size:12px;color:#555;margin:8px 0 14px}.product-request{width:100%;font-size:12px;padding:11px 8px}
.catalog-caption{font-size:13px;color:#555;max-width:800px}
.personalization-toggle{display:flex;align-items:center;gap:10px;font-size:14px;margin:12px 0}
.personalization-toggle input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:#ff0080}
.product-price,.price-preview{font-size:18px;font-weight:800;margin:12px 0}
.order-options{border-top:3px solid #ff0080;margin:20px 0;padding-top:18px}
.personalization-details[hidden]{display:none}
.cart-actions{display:flex;gap:8px;margin:0 0 10px}
.cart-actions .cart-qty{width:64px;margin:0}
.cart-actions .cart-add{flex:1;font-size:12px;padding:11px 8px}
.cart-actions .cart-add:disabled{opacity:.5;cursor:not-allowed}
.cart-link{margin-left:12px}
@media(max-width:1000px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(max-width:580px){.catalog-grid{grid-template-columns:1fr;gap:28px}.catalog-info{padding:18px}}