:root { --hero: url('https://picsum.photos/id/1005/1800/1200'); }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: .1px; }
.section-title { font-size: clamp(1.2rem, 4vw, 2rem); text-transform: uppercase; font-weight: 800; margin-bottom: 1rem; }
.hero-section { min-height: 88vh; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), var(--hero) center/cover no-repeat; }
.feature-tile { display: flex; min-height: 220px; border: 1px solid var(--bs-border-color); padding: 1rem; align-items: end; justify-content: start; color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 1.1rem; transition: all .25s; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), var(--tile) center/cover no-repeat; }
.feature-tile:hover { transform: translateY(-4px); filter: contrast(1.05); }
.product-card { border: 1px solid var(--bs-border-color); }
.product-media { position: relative; overflow: hidden; aspect-ratio: 4/5; background: #ececec; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: .35s ease; }
.product-media .img-hover { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .img-hover { opacity: 1; transform: scale(1.04); }
.product-card:hover .img-main { opacity: 0; transform: scale(1.04); }
.quick-icons { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .35rem; z-index: 2; }
.icon-btn { border: 0; background: rgba(255,255,255,.95); border-radius: 999px; width: 34px; height: 34px; }
[data-bs-theme="dark"] .icon-btn { background: rgba(0,0,0,.75); color: #fff; }
.product-thumb { width: 88px; height: 110px; object-fit: cover; cursor: pointer; border: 1px solid var(--bs-border-color); }
.broken-img { display:flex; align-items:center; justify-content:center; background:#e9e9e9; color:#555; font-size:.9rem; }