/* ═══════════════════════════════════════════════════════
   Scout Seller Profile — Premium Header
   Warm Ivory #F6F1EA | Terracotta #C85A2A | Deep Walnut #3E352D

   Moved out of top-block-layout2.phtml's inline <style> tag (which sat
   AFTER this component's own HTML) into a proper stylesheet loaded in
   <head>. The inline <style> at the bottom of the template caused a
   flash of unstyled content: the browser painted the banner/logo/name/
   meta markup before it reached the trailing <style> block later in the
   same response, then repainted once that block parsed. Loading these
   rules from <head> (declared in marketplace_seller_top_header.xml,
   shared by the profile/collection/feedback pages that all render this
   header) means the rules are already known before the body markup
   using them is parsed, so there is nothing to repaint.
═══════════════════════════════════════════════════════ */

.scout-sp-wrap {
    background: #F6F1EA;
    margin-bottom: 0;
}

/* ── Banner ── */
.scout-sp-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #2D4A35;
    /* Height is driven entirely by the image — no cropping */
    line-height: 0;
}
.scout-sp-banner-img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 380px;
    object-fit: cover;
    object-position: center;
}
/* On mobile show full image without any cropping */
@media (max-width: 767px) {
    .scout-sp-banner-img {
        max-height: none;
        object-fit: contain;
        background: #2D4A35;
    }
}
.scout-sp-banner-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2D4A35 0%, #3a5e43 40%, #C85A2A22 100%);
}
.scout-sp-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0) 40%,
        rgba(20,15,10,0.35) 100%);
    pointer-events: none;
}

/* ── Profile bar ── */
.scout-sp-profile-bar {
    background: #fff;
    border-bottom: 1px solid #EDE8DE;
    padding-bottom: 28px;
}
.scout-sp-profile-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    position: relative;
}

/* ── Logo — overlaps banner ── */
.scout-sp-logo-wrap {
    flex-shrink: 0;
    margin-top: -56px;
    position: relative;
    z-index: 2;
}
.scout-sp-logo-img,
.scout-sp-logo-initials {
    width: 110px;
    height: 110px;
    border-radius: 14px;
    border: 3px solid #fff;
    box-shadow: 0 4px 20px rgba(62,53,45,0.15);
    object-fit: cover;
    display: block;
}
.scout-sp-logo-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EDE8DE;
    font-family: Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    color: #3E352D;
}

/* ── Info ── */
.scout-sp-info {
    flex: 1;
    padding-top: 16px;
    min-width: 0;
}
.scout-sp-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 600;
    color: #3E352D;
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.scout-sp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}
.scout-sp-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #7A6E63;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
    transition: color 0.2s;
}
.scout-sp-rating-link:hover { color: #C85A2A; }
.scout-sp-desc {
    font-size: 13.5px;
    color: #7A6E63;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
    margin: 0 0 12px;
    max-width: 560px;
}
.scout-sp-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}
.scout-sp-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #E8DCCF;
    color: #7A6E63;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.scout-sp-social-link:hover {
    border-color: #C85A2A;
    color: #C85A2A;
    background: rgba(200,90,42,0.04);
}

/* ── Right badges ── */
.scout-sp-badges {
    flex-shrink: 0;
    padding-top: 16px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    /* Banner scales via aspect-ratio — no fixed height needed */
    .scout-sp-profile-inner { padding: 0 24px; gap: 18px; }
    .scout-sp-logo-wrap { margin-top: -40px; }
    .scout-sp-logo-img,
    .scout-sp-logo-initials { width: 84px; height: 84px; border-radius: 10px; font-size: 32px; }
}
@media (max-width: 640px) {
    .scout-sp-profile-inner {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 0 16px;
    }
    .scout-sp-logo-wrap { margin-top: -36px; }
    .scout-sp-logo-img,
    .scout-sp-logo-initials { width: 72px; height: 72px; border-radius: 8px; font-size: 28px; }
    .scout-sp-name { font-size: 1.3rem; }
    .scout-sp-badges { display: none; }
}

/* ── RTL ── */
[dir="rtl"] .scout-sp-profile-inner { direction: rtl; }
[dir="rtl"] .scout-sp-meta { direction: rtl; }
[dir="rtl"] .scout-sp-socials { direction: rtl; }

/* ── Tab Navigation ── */
.scout-sp-tabs {
    background: #fff;
    border-bottom: 1px solid #EDE8DE;
    position: sticky;
    top: 0;
    z-index: 30;
}
.scout-sp-tabs-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    gap: 0;
}
.scout-sp-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #7A6E63;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
}
.scout-sp-tab:hover { color: #3E352D; }
.scout-sp-tab--active {
    color: #3E352D;
    border-bottom-color: #C85A2A;
    font-weight: 600;
}
.scout-sp-tab-badge {
    background: #C85A2A;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2em 0.45em;
    border-radius: 9999px;
}
@media (max-width: 900px) {
    .scout-sp-tabs-inner { padding: 0 24px; }
}
@media (max-width: 640px) {
    .scout-sp-tabs-inner { padding: 0 8px; }
    .scout-sp-tab { padding: 0.75rem 0.875rem; font-size: 0.8125rem; }
}
[dir="rtl"] .scout-sp-tabs-inner { direction: rtl; }
