/* ------------------------------------------------------------------
   Storefront — premium automotive look (section 71)
   Dark navy chrome, amber accent, generous product imagery.
------------------------------------------------------------------- */
:root {
    --shop-ink:      #0f1b2d;
    --shop-ink-soft: #1c2c45;
    --shop-accent:   #f5a524;
    --shop-accent-d: #d98c0c;
    --shop-line:     #e4e8ef;
    --shop-muted:    #6b7789;
    --shop-bg:       #f6f8fb;
    --shop-radius:   14px;
}

body.shop-body {
    background: var(--shop-bg);
    color: #1a2537;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { text-decoration: none; }
.shop-main { min-height: 60vh; padding-bottom: 3rem; }

/* ---------------------------------------------------------- header */
.shop-topstrip {
    background: var(--shop-ink);
    color: #cdd7e6;
    font-size: .78rem;
    padding: .4rem 0;
}
.shop-navbar {
    background: #fff;
    box-shadow: 0 1px 0 var(--shop-line);
    padding-top: .65rem;
    padding-bottom: .65rem;
}
.shop-navbar .brand-mark {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--shop-ink);
    color: var(--shop-accent);
    font-size: 1.15rem;
}
.shop-navbar .navbar-brand { color: var(--shop-ink); }
.shop-navbar .nav-link { color: #35455e; font-weight: 500; }
.shop-navbar .nav-link:hover { color: var(--shop-ink); }
.cart-badge { position: absolute; top: 0; right: -2px; font-size: .62rem; }

.shop-catbar {
    background: var(--shop-ink-soft);
    padding: .55rem 0;
}
.shop-catbar a {
    color: #d4dcea;
    font-size: .84rem;
    white-space: nowrap;
}
.shop-catbar a:hover { color: var(--shop-accent); }

/* ------------------------------------------------------------ hero */
.shop-hero {
    background: linear-gradient(120deg, var(--shop-ink) 0%, #24344f 60%, #33465f 100%);
    color: #fff;
    border-radius: 0 0 var(--shop-radius) var(--shop-radius);
    overflow: hidden;
}
.shop-hero .hero-slide {
    min-height: 320px;
    background-size: cover;
    background-position: center;
}
.shop-hero .hero-overlay {
    background: linear-gradient(90deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.55) 55%, rgba(15,27,45,.15) 100%);
    min-height: 320px;
    display: flex; align-items: center;
}
.shop-hero h1 { font-weight: 800; letter-spacing: -.02em; }

/* -------------------------------------------------------- sections */
.section-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.section-title h2 {
    font-size: 1.15rem; font-weight: 700; margin: 0;
    color: var(--shop-ink);
}
.section-title a { font-size: .84rem; font-weight: 600; color: var(--shop-accent-d); }

/* ---------------------------------------------------- product card */
.product-card {
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease;
}
.product-card:hover {
    box-shadow: 0 10px 26px rgba(15, 27, 45, .12);
    transform: translateY(-2px);
}
.product-card .thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: .75rem;
}
.product-card .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-card .badges { position: absolute; top: .5rem; left: .5rem; display: flex; gap: .25rem; flex-wrap: wrap; }
.product-card .wish {
    position: absolute; top: .5rem; right: .5rem;
    background: #fff; border: 1px solid var(--shop-line);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--shop-muted);
}
.product-card .wish:hover, .product-card .wish.on { color: #e0245e; }
.product-card .body { padding: .75rem .85rem 0; flex-grow: 1; }
.product-card .name {
    font-size: .88rem; font-weight: 600; color: #1a2537;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.4em;
}
.product-card .meta { font-size: .72rem; color: var(--shop-muted); }
.product-card .price { font-size: 1.02rem; font-weight: 700; color: var(--shop-ink); }
.product-card .mrp { font-size: .78rem; color: var(--shop-muted); text-decoration: line-through; }
.product-card .off { font-size: .74rem; font-weight: 700; color: #12855a; }
.product-card .foot { padding: .6rem .85rem .85rem; }

.rating-stars { color: var(--shop-accent); font-size: .78rem; letter-spacing: .05em; }

/* --------------------------------------------------- category tile */
.category-tile {
    display: block; background: #fff; border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius); padding: 1rem .75rem; text-align: center;
    color: #1a2537; transition: border-color .18s ease, box-shadow .18s ease;
}
.category-tile:hover { border-color: var(--shop-accent); box-shadow: 0 6px 18px rgba(15,27,45,.08); }
.category-tile i { font-size: 1.6rem; color: var(--shop-ink); }
.category-tile span { display: block; margin-top: .4rem; font-size: .82rem; font-weight: 600; }

/* ------------------------------------------------------ filter rail */
.filter-card {
    background: #fff; border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius); padding: 1rem;
}
.filter-card h6 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--shop-muted); }

/* --------------------------------------------------- product detail */
.pd-gallery {
    background: #fff; border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius); padding: 1rem;
}
.pd-gallery .main {
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.pd-gallery .main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-gallery .thumbs { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.pd-gallery .thumbs img {
    width: 58px; height: 58px; object-fit: contain; padding: 4px;
    border: 1px solid var(--shop-line); border-radius: 8px; cursor: pointer; background: #fff;
}
.pd-gallery .thumbs img.active { border-color: var(--shop-accent); }

.pd-price { font-size: 1.7rem; font-weight: 800; color: var(--shop-ink); }
.fit-box { border-radius: var(--shop-radius); padding: .85rem 1rem; }
.fit-box.fits { background: #e8f7ef; border: 1px solid #b7e5cb; }
.fit-box.unknown { background: #fff6e5; border: 1px solid #f3ddb0; }
.fit-box.nofit { background: #fdeaea; border: 1px solid #f3c2c2; }

/* ------------------------------------------------------------ cart */
.cart-line {
    background: #fff; border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius); padding: .85rem;
}
.cart-line img { width: 72px; height: 72px; object-fit: contain; }
.summary-card {
    background: #fff; border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius); padding: 1.1rem; position: sticky; top: 1rem;
}
.summary-card .row-line {
    display: flex; justify-content: space-between; align-items: center;
    padding: .3rem 0; font-size: .9rem;
}

/* --------------------------------------------------------- account */
.account-nav .list-group-item.active {
    background: var(--shop-ink); border-color: var(--shop-ink);
}
.step-pill {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--shop-line); color: var(--shop-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
}
.step-pill.on { background: var(--shop-accent); color: #26313f; }

/* --------------------------------------------------------- footer */
.shop-footer {
    background: var(--shop-ink);
    color: #cdd7e6;
    padding: 2.5rem 0 1.5rem;
    margin-top: 3rem;
}
.shop-footer h6 { color: #fff; }
.shop-footer a { color: #b9c5d6; }
.shop-footer a:hover { color: var(--shop-accent); }
.shop-footer hr { border-color: rgba(255,255,255,.12); }
.shop-footer .text-muted { color: #8fa0b8 !important; }

/* -------------------------------------------------------- utility */
.btn-accent {
    background: var(--shop-accent); border-color: var(--shop-accent); color: #26313f; font-weight: 600;
}
.btn-accent:hover { background: var(--shop-accent-d); border-color: var(--shop-accent-d); color: #1a2537; }
.empty-shop { text-align: center; padding: 3rem 1rem; color: var(--shop-muted); }
.empty-shop i { font-size: 2.4rem; display: block; margin-bottom: .6rem; opacity: .5; }

@media (max-width: 575.98px) {
    .shop-hero .hero-slide, .shop-hero .hero-overlay { min-height: 240px; }
    .pd-price { font-size: 1.4rem; }
}