/* Metal models catalog — listing cards, rails, detail page.
   Brand palette matches metal-buildings/landing/_brand-styles.php. Card +
   blur-load pattern comes from portable-buildings/inventory.php (wood). */

:root {
    --mm-maroon: #800000;
    --mm-maroon-dark: #5c0000;
    --mm-black: #111111;
    --mm-gray: #4a4a4a;
    --mm-gray-light: #f4f4f4;
}

/* ---------- Image loading (same behaviour as the wood inventory) ---------- */
.img-container { overflow: hidden; background-color: #f0f0f0; }
.blur-load { filter: blur(20px); transform: scale(1.1); transition: filter .5s ease-out, transform .5s ease-out; object-fit: cover; }
.blur-load.loaded { filter: blur(0); transform: scale(1); }

/* ---------- Card ---------- */
.mm-card { border: 0; border-radius: .75rem; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.mm-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, .12) !important; }
.mm-card .card-title a { color: var(--mm-black); text-decoration: none; }
.mm-card .card-title a:hover { color: var(--mm-maroon); }
.mm-eyebrow { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mm-gray); }
.mm-price { font-family: var(--ab-font-heading, inherit); font-weight: 900; font-size: 1.5rem; color: var(--mm-black); line-height: 1.1; }
.mm-price-was { color: #777; font-size: .9rem; }
.mm-monthly { font-size: .85rem; color: var(--mm-gray); }
.mm-monthly strong { color: var(--mm-maroon); }

.mm-badge {
    position: absolute; top: .75rem; left: .75rem; z-index: 2;
    background: var(--mm-maroon); color: #fff; font-weight: 700; font-size: .75rem;
    padding: .3rem .65rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.mm-badge-off { position: absolute; top: .75rem; right: .75rem; z-index: 2; background: var(--mm-black); color: #fff;
    font-weight: 700; font-size: .75rem; padding: .3rem .6rem; border-radius: .4rem; }

/* The card image box is a Bootstrap .ratio, whose `.ratio > *` rule makes every
   child absolute at 0,0 and 100% x 100% — which turned the badges into black
   panels over the whole photo. Size them back to their own content. */
.ratio > .mm-badge, .ratio > .mm-badge-off { width: auto; height: auto; line-height: 1.2; white-space: nowrap; }
.ratio > .mm-badge     { top: .75rem; left: .75rem; right: auto; }
.ratio > .mm-badge-off { top: .75rem; right: .75rem; left: auto; }

.color-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: middle;
    border: 1px solid #ccc; box-shadow: 0 0 2px rgba(0, 0, 0, .1); }
.mm-swatches { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .78rem; color: var(--mm-gray); }

/* ---------- Buttons on metal pages ---------- */
.mm-scope .btn-primary { background-color: var(--mm-maroon); border-color: var(--mm-maroon); }
.mm-scope .btn-primary:hover, .mm-scope .btn-primary:focus { background-color: var(--mm-maroon-dark); border-color: var(--mm-maroon-dark); }
.mm-scope .btn-outline-primary { color: var(--mm-maroon); border-color: var(--mm-maroon); }
.mm-scope .btn-outline-primary:hover { background-color: var(--mm-maroon); color: #fff; }
.mm-scope .text-primary { color: var(--mm-maroon) !important; }
.mm-scope .form-check-input:checked { background-color: var(--mm-maroon); border-color: var(--mm-maroon); }

/* ---------- Hero / bands ---------- */
.mm-hero { position: relative; color: #fff; background: #111 center/cover no-repeat; padding: 5rem 0 4rem; }
.mm-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)); }
.mm-hero > .container { position: relative; z-index: 1; }
.mm-band-dark { background: var(--mm-black); color: #fff; }
.mm-band-light { background: var(--mm-gray-light); }

/* ---------- Rails (horizontal scroll on phones, grid on desktop) ---------- */
.mm-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 1rem; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.mm-rail > * { scroll-snap-align: start; }
@media (min-width: 768px)  { .mm-rail { grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (min-width: 1200px) { .mm-rail { grid-auto-columns: calc((100% - 3rem) / 4); } }

/* ---------- Special Buy callout + detail page ---------- */
.mm-special { border-left: 4px solid var(--mm-maroon); background: #fbf3f3; border-radius: .5rem; padding: .9rem 1rem; }
.mm-thumb { cursor: pointer; border: 2px solid transparent; border-radius: .4rem; overflow: hidden; }
.mm-thumb.active, .mm-thumb:hover { border-color: var(--mm-maroon); }
.mm-spec dt { font-weight: 600; color: var(--mm-gray); }
.mm-spec dd { margin-bottom: .5rem; }
.mm-builder-notice { background: var(--mm-maroon); color: #fff; font-size: .9rem; }
.mm-builder-notice a { color: #fff; text-decoration: underline; }

/* ---------- Category tiles ---------- */
.mm-tile { position: relative; display: block; border-radius: .75rem; overflow: hidden; color: #fff; text-decoration: none; }
.mm-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.mm-tile:hover img { transform: scale(1.05); }
.mm-tile span { position: absolute; inset: auto 0 0 0; padding: 1rem; font-weight: 800; font-size: 1.15rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }