/* ============================================================
   Mod Shop profile — single template scoped rules.
   Layout, spacing and colour come from utility.css + sc-main.css;
   this file holds the component-specific pieces only.
============================================================ */

/* Cover — two-layer diagonal wash + faint hatch. */
.sc-shop-cover {
    height: 230px;
    background:
        linear-gradient(180deg, rgba(14, 14, 14, 0) 35%, rgba(14, 14, 14, 0.75) 78%, #0e0e0e 100%),
        linear-gradient(118deg, #2a1416 0%, #191919 42%, #101418 100%);
}
.sc-shop-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(58deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 9px);
}
@media (max-width: 760px) {
    .sc-shop-cover { height: 150px; }
}

/* Head lifts over the cover. Tied to cover height — scoped. */
.sc-shop-head { margin-top: -64px; }
@media (max-width: 760px) {
    .sc-shop-head { margin-top: -46px; }
}

/* Logo tile — diagonal facet gradient. */
.sc-shop-logo {
    background: linear-gradient(150deg, #232323, #131313);
}

/* Verified badge — red-tinted chip. */
.sc-shop-badge--verified {
    background: rgba(255, 59, 59, 0.12);
    border: 1px solid rgba(255, 59, 59, 0.35);
    color: var(--primary);
}

/* Proof-bar vertical wash + hairline seams between cells. */
.sc-shop-proof {
    background: linear-gradient(180deg, #121212, #0e0e0e);
}
/* Mobile: 2-col — every 2nd cell gets a left seam. */
.sc-shop-proof-grid .sc-shop-stat + .sc-shop-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.sc-shop-proof-grid .sc-shop-stat:nth-child(2n+1) {
    border-left: 0;
}
/* Desktop: 4-col — every cell after the first has a left seam. */
@media (min-width: 768px) {
    .sc-shop-proof-grid .sc-shop-stat:nth-child(2n+1) {
        border-left: 1px solid rgba(255, 255, 255, 0.06);
    }
    .sc-shop-proof-grid .sc-shop-stat:first-child {
        border-left: 0;
    }
}

/* Services rows — trim the last row's bottom border. */
.sc-shop-svc-row:last-child { border-bottom: 0; }

/* Sidebar info rows — first-of-type has no top border/padding. */
.sc-shop-side-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* Striped image placeholder used by builds grid + gallery + directory. */
.sc-shop-ph {
    background: linear-gradient(135deg, #1d1d1d 0%, #141414 55%, #191919 100%);
    position: relative;
    display: grid;
    place-items: center;
    color: #333;
    overflow: hidden;
}
.sc-shop-ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 7px);
}
.sc-shop-ph > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "Open now" pip. */
.sc-shop-open {
    color: #43c46a;
}
.sc-shop-open::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #43c46a;
    margin-right: 6px;
    vertical-align: 1px;
}

/* Map placeholder — soft grid + red pin, used when no map URL is set. */
.sc-shop-map {
    height: 132px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    background:
        linear-gradient(0deg, rgba(255, 59, 59, 0.05), rgba(255, 59, 59, 0.05)),
        repeating-linear-gradient(0deg, #161616 0 17px, #1c1c1c 17px 18px),
        repeating-linear-gradient(90deg, #161616 0 23px, #1c1c1c 23px 24px);
}
.sc-shop-map::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -60%);
    background: var(--primary);
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Directory-preview cards — tag pills. */
.sc-shop-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 4px;
    font: 600 10.5px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sc-shop-tag--verified {
    background: rgba(255, 59, 59, 0.12);
    border: 1px solid rgba(255, 59, 59, 0.32);
    color: var(--primary);
}
.sc-shop-tag--claimed {
    background: #1d1d1d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8b8b8b;
}
.sc-shop-dcard--pro {
    border-color: rgba(255, 59, 59, 0.30);
}

/* Mobile sticky action bar — visible below 960px only. */
.sc-shop-mobile-bar {
    display: none;
    background: rgba(14, 14, 14, 0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
@media (max-width: 960px) {
    .sc-shop-mobile-bar { display: flex; }
    /* Keep bottom content clear of the fixed bar. */
    .sc-shop-body { padding-bottom: 110px; }
}