/* ==========================================================================
   Qemmah — Designer store (shopmodule::show + the seller-banner hero)
   Pushed by layoutmodule::components.sellerbanner, so the hero looks the same
   wherever the banner is used (store page, designer blog). The product grid,
   toolbar and pager under it come from listing-premium.css (.qm-list).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Store hero (dark atelier band)
   -------------------------------------------------------------------------- */

.qm-store-hero {
    --qs-on-dark: rgba(255, 255, 255, .8);
    --qs-dim: rgba(255, 255, 255, .56);
    --qs-gold-line: rgba(226, 193, 156, .24);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: center;
    gap: 32px;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 36px;
    padding: clamp(26px, 3.5vw, 44px) clamp(22px, 3.5vw, 46px);
    color: #fff;
    background:
        radial-gradient(700px 380px at 100% -20%, rgba(226, 193, 156, .32), transparent 60%),
        radial-gradient(520px 340px at -10% 120%, rgba(161, 120, 92, .42), transparent 60%),
        linear-gradient(150deg, #1a1210 0%, #2b1a14 48%, #4a2c20 100%);
    border-radius: 30px;
    box-shadow: 0 50px 90px -52px rgba(26, 18, 16, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* diamond lattice + gold hairline, as in the home hero */
.qm-store-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .06;
    background-image:
        linear-gradient(45deg, #fff 1px, transparent 1px),
        linear-gradient(-45deg, #fff 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse at 20% 30%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 20% 30%, #000 0%, transparent 70%);
}

.qm-store-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--qm-gold-2), var(--qm-gold-4), var(--qm-gold-2), transparent);
    opacity: .8;
}

.qm-store-hero__glow {
    position: absolute;
    top: -140px;
    inset-inline-start: 10%;
    z-index: -1;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: #c79a72;
    filter: blur(80px);
    opacity: .3;
}



/* ----- Identity ----- */

.qm-store-hero__identity { display: flex; align-items: center; gap: 26px; min-width: 0; }

.qm-store-hero__medallion {
    position: relative;
    flex: none;
    width: 128px;
    height: 128px;
    padding: 4px;
    border-radius: 50%;
    background: var(--qm-gloss-gold);
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .8), 0 0 0 8px rgba(226, 193, 156, .08);
}

/* brand arch rising behind the logo: drawn from the medallion itself so it is
   always concentric with it (the hero clips it at the bottom edge) */
.qm-store-hero__medallion::before {
    content: "";
    position: absolute;
    top: -26px;
    left: 50%;
    z-index: -1;
    width: calc(100% + 52px);
    height: 520px;
    border: 1px solid rgba(226, 193, 156, .26);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.qm-store-hero__medallion img { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; border: 3px solid #1f1512; border-radius: 50%; }

.qm-store-hero__copy { min-width: 0; }

.qm-store-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--qs-dim);
}

.qm-store-hero__eyebrow img { width: 22px; height: auto; border-radius: 3px; }
.qm-store-hero__eyebrow i { color: var(--qm-gold-2); }
.qm-store-hero__dot { width: 4px; height: 4px; margin: 0 4px; border-radius: 50%; background: var(--qm-gold-3); }

.qm-store-hero__name {
    margin: 0 0 8px;
    padding-bottom: .1em;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.25;
    text-align: start;
    background: linear-gradient(100deg, #fff 0%, #f6e3c8 40%, #e2c19c 70%, #fff5e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qm-store-hero__bio { max-width: 560px; margin: 0 0 14px; font-size: 14.5px; line-height: 1.9; color: var(--qs-on-dark); text-align: start; }

.qm-store-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }

.qm-store-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--qm-gold-1);
    background: rgba(226, 193, 156, .1);
    border: 1px solid var(--qs-gold-line);
    border-radius: 999px;
}

.qm-store-hero__badge--green { color: #a8e6be; background: rgba(46, 139, 87, .15); border-color: rgba(120, 220, 160, .25); }

/* ----- Stats + actions ----- */

.qm-store-hero__side { display: grid; gap: 16px; }

.qm-store-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.qm-store-hero__stats > div {
    padding: 14px 10px;
    text-align: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--qs-gold-line);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.qm-store-hero__stats dt { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--qs-dim); }

.qm-store-hero__stats dd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.qm-store-hero__stats dd i { font-size: 13px; color: #f4b400; }
.qm-store-hero__stats dd .qm-store-hero__heart { color: #ff7b7b; }

.qm-store-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.qm-store-hero__btn {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--qs-gold-line);
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s, border-color .25s, transform .25s var(--qm-ease);
}

.qm-store-hero__btn:hover { background: rgba(255, 255, 255, .15); border-color: rgba(226, 193, 156, .5); transform: translateY(-1px); }
.qm-store-hero__btn i { color: var(--qm-gold-2); }

.qm-store-hero__btn--gold { color: #1a1210 !important; background: linear-gradient(180deg, #f6e3c8 0%, #e2c19c 45%, #c79a72 100%); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 26px -16px rgba(226, 193, 156, .6); }
.qm-store-hero__btn--gold i { color: #6b3e2e; }
.qm-store-hero__btn--gold:hover { background: linear-gradient(180deg, #fbebd6 0%, #e8c9a6 45%, #cfa27a 100%); }

.qm-store-hero__state {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 14px;
}

.qm-store-hero__state.is-off { color: #ffd59a; background: rgba(255, 170, 60, .12); border: 1px solid rgba(255, 190, 110, .25); }
.qm-store-hero__state.is-on { color: #a8e6be; background: rgba(46, 139, 87, .15); border: 1px solid rgba(120, 220, 160, .25); }

.qm-store-hero__love {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--qs-gold-line);
    border-radius: 14px;
    transition: transform .25s var(--qm-ease), background-color .25s;
}

.qm-store-hero__love:hover { transform: scale(1.05); background: rgba(255, 255, 255, .15); }
.qm-store-hero__love svg { width: 19px; height: 19px; }
.qm-store-hero__love:not(.lovedd) svg path { stroke: var(--qm-gold-1); }

.qm-store-hero__share { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--qs-dim); }
.qm-store-hero__share span { margin-inline-end: auto; }

.qm-store-hero__share a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 14px;
    color: var(--qm-gold-1) !important;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--qs-gold-line);
    border-radius: 50%;
    transition: background-color .2s, color .2s;
}

.qm-store-hero__share a:hover { color: #fff !important; background: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------------------------
   3. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .qm-store-hero { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .qm-store-hero { gap: 22px; padding: 24px 18px; border-radius: 22px; }
    .qm-store-hero__identity { flex-direction: column; align-items: flex-start; gap: 16px; }
    .qm-store-hero__medallion { width: 92px; height: 92px; }
    .qm-store-hero__stats dd { font-size: 18px; }
    .qm-store-hero__btn { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .qm-store-hero * { animation: none !important; transition: none !important; }
}