/**
 * /brand/ landing page styles for the WP page-brand.php template.
 * Selector prefix .brand-shell so
 * nothing here leaks onto other pages.
 *
 * Old single-brand-page styles below the spec block, retained for
 * /brand/<slug>/ pages.
 */

.brand-shell {
    --acc: #FFB347;
    --berry: #FF2D8E;
    --lime: #B8FF3C;
    --indigo: #7C3AED;
    --cyan: #30d8c8;
    --paper: #E8EAEE;
    --paper-2: #F2F4F7;
    --ink: #042220;
    --slate: #5C6270;
    --mist: #8A8F9C;
    --ash: #C8CDD6;
    --hair: rgba(14,15,18,.10);
    --hair-2: rgba(14,15,18,.06);
    --fb: 'Inter', system-ui, -apple-system, sans-serif;
    --fd: 'Instrument Serif', Georgia, serif;
    --fm: 'JetBrains Mono', ui-monospace, monospace;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-2xl: 32px;
    --r-3xl: 40px;
    --r-pill: 999px;
    --sh-card: 0 .5px 1px rgba(14,15,18,.04), 0 2px 4px rgba(14,15,18,.04), 0 8px 24px rgba(14,15,18,.05);
    --sh-raise: 0 4px 8px rgba(14,15,18,.07), 0 16px 36px rgba(14,15,18,.12);

    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px 72px;
    color: var(--ink);
    font-family: var(--fb);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    letter-spacing: -.004em;
}
.brand-shell *, .brand-shell *::before, .brand-shell *::after { box-sizing: border-box; }

/* HERO */
.brand-hero {
    background: #042220;
    color: #eff7f6;
    border-radius: var(--r-3xl);
    padding: 44px 48px 36px;
    margin: 14px 0 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: end;
    position: relative;
    overflow: hidden;
}
.brand-hero .bgdots {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(239,247,246,.06) 1px, transparent 1px);
    background-size: 28px 28px;
}
.brand-hero .kicker {
    font-family: var(--fm);
    font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--acc); font-weight: 600;
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.brand-hero .kicker .pip {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 10px var(--acc);
}
.brand-hero h1 {
    font-family: var(--fb);
    font-size: 72px; font-weight: 800;
    letter-spacing: -.030em; line-height: .95;
    margin: 0; color: #eff7f6 !important;
    text-wrap: balance;
    position: relative; z-index: 1;
}
.brand-hero h1 em {
    font-family: var(--fd);
    font-style: italic; font-weight: 400;
    color: var(--acc) !important;
}
.brand-hero .lede {
    font-size: 16px; line-height: 1.55;
    color: rgba(239,247,246,.78);
    margin: 18px 0 0;
    position: relative; z-index: 1;
    text-wrap: pretty;
    max-width: 50ch;
}
.brand-hero-r {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 14px;
}
.brand-hero-r .searchbox {
    background: rgba(239,247,246,.07);
    border: 1.5px solid rgba(239,247,246,.12);
    border-radius: var(--r-xl);
    padding: 8px 8px 8px 16px;
    display: flex; align-items: center; gap: 10px;
}
.brand-hero-r .searchbox svg {
    width: 16px; height: 16px;
    color: rgba(239,247,246,.55);
    flex-shrink: 0;
}
.brand-hero-r .searchbox input {
    flex: 1;
    background: transparent;
    border: none; outline: none;
    color: #eff7f6;
    font-size: 14.5px; font-weight: 500;
    padding: 8px 0;
    font-family: inherit;
}
.brand-hero-r .searchbox input::placeholder { color: rgba(239,247,246,.4); }
.brand-hero-r .searchbox button {
    background: var(--acc);
    color: #042220;
    border: none;
    border-radius: var(--r-pill);
    padding: 0 18px;
    height: 38px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.brand-hero-r .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(239,247,246,.06);
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid rgba(239,247,246,.08);
}
.brand-hero-r .stat {
    padding: 16px;
    display: flex; flex-direction: column; gap: 4px;
    border-right: 1px solid rgba(239,247,246,.08);
}
.brand-hero-r .stat:last-child { border: none; }
.brand-hero-r .stat .v {
    font-family: var(--fb);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -.020em;
    color: #eff7f6 !important;
    line-height: 1;
}
.brand-hero-r .stat .l {
    font-family: var(--fm);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: rgba(239,247,246,.55);
    font-weight: 600;
    margin-top: 4px;
}

/* FILTER ROW */
.brand-filter-row {
    display: flex; gap: 8px; flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 28px;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.brand-filter-row::-webkit-scrollbar { display: none; }
.brand-filter-row .ftab {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid var(--hair);
    color: var(--slate);
    box-shadow: var(--sh-card);
    transition: all .14s cubic-bezier(.32,.72,0,1);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit;
}
.brand-filter-row .ftab:hover { border-color: var(--ink); color: var(--ink); }
.brand-filter-row .ftab.on {
    background: #042220;
    color: var(--acc);
    border-color: #042220;
}
.brand-filter-row .ftab .ct {
    font-family: var(--fm);
    font-size: 10.5px;
    opacity: .7;
}
.brand-filter-row .ftab.on .ct { color: rgba(0,224,255,.7); }
.brand-filter-row .ftab .swatch {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* UNIQUE ANGLES STRIP */
.brand-angle-strip {
    background: linear-gradient(135deg,#1A1410,#2E1F10);
    color: #eff7f6;
    border-radius: var(--r-2xl);
    padding: 22px 28px;
    margin: 32px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.brand-angle-strip .item {
    padding: 0 24px;
    border-right: 1px solid rgba(239,247,246,.10);
}
.brand-angle-strip .item:first-child { padding-left: 0; }
.brand-angle-strip .item:last-child { border-right: none; padding-right: 0; }
.brand-angle-strip .item .ic { font-size: 24px; margin-bottom: 10px; }
.brand-angle-strip .item h4 {
    font-family: var(--fb);
    font-size: 16px; font-weight: 700;
    letter-spacing: -.010em;
    margin: 0 0 6px;
    color: #eff7f6 !important;
}
.brand-angle-strip .item p {
    font-size: 13px; line-height: 1.45;
    color: rgba(239,247,246,.7);
    margin: 0;
    text-wrap: pretty;
}

/* SECTION HEAD */
.brand-shell .section-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 18px;
    margin: 32px 0 16px;
}
.brand-shell .section-head h2 {
    font-family: var(--fb);
    font-size: 28px; font-weight: 800;
    letter-spacing: -.020em;
    margin: 0; line-height: 1;
    color: var(--ink) !important;
}
.brand-shell .section-head h2 em {
    font-family: var(--fd);
    font-style: italic; font-weight: 400;
}
.brand-shell .section-head .ct {
    font-family: var(--fm);
    font-size: 12px;
    color: var(--mist);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* BRAND GRID */
.brand-shell .brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* BRAND CARD */
.brand-shell .bcard-wrap { position: relative; }
.brand-shell .bcard {
    background: #fff;
    border-radius: var(--r-2xl);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--sh-card);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s cubic-bezier(.32,.72,0,1);
    display: flex; flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.brand-shell .bcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-raise);
}
.brand-shell .bcard .top {
    padding: 20px 20px 16px;
    display: flex; align-items: flex-start; gap: 14px;
    flex: 1;
}
.brand-shell .bcard .avatar {
    width: 56px; height: 56px;
    border-radius: var(--r-lg);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--fd);
    font-style: italic;
    font-size: 32px; font-weight: 400;
    color: #fff !important;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(14,15,18,.12);
}
.brand-shell .bcard .info { flex: 1; min-width: 0; }
.brand-shell .bcard .brand-name {
    font-family: var(--fb);
    font-size: 16px; font-weight: 800;
    letter-spacing: -.012em;
    margin: 0 0 3px;
    line-height: 1.2;
    color: var(--ink) !important;
}
.brand-shell .bcard .brand-origin {
    font-family: var(--fm);
    font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--slate);
    font-weight: 600;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 5px;
}
.brand-shell .bcard .brand-desc {
    font-size: 12.5px;
    color: var(--slate);
    line-height: 1.45;
    text-wrap: pretty;
    margin: 0;
}
.brand-shell .bcard .footer {
    padding: 12px 20px;
    border-top: 1px solid var(--hair-2);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    background: var(--paper-2);
}
.brand-shell .bcard .footer .tags {
    display: flex; gap: 4px; flex-wrap: wrap; flex: 1;
}
.brand-shell .bcard .footer .tag {
    font-family: var(--fm);
    font-size: 10px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 7px;
    border-radius: var(--r-pill);
    background: rgba(14,15,18,.07);
    color: var(--slate);
}
.brand-shell .bcard .footer .pct {
    font-family: var(--fm);
    font-size: 11px; font-weight: 700;
    color: var(--slate);
    white-space: nowrap;
}
.brand-shell .bcard .footer .pct b {
    font-family: var(--fb);
    font-size: 13px;
    letter-spacing: -.008em;
    color: var(--ink);
}
.brand-shell .bcard .prod-ct {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #042220;
    color: var(--acc);
    font-family: var(--fm);
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}

/* Featured (larger) brand card — wrapper spans 2 cols */
.brand-shell .bcard-wrap:has(.bcard.featured) { grid-column: span 2; }
.brand-shell .bcard.featured .top { padding: 24px 24px 20px; }
.brand-shell .bcard.featured .avatar { width: 68px; height: 68px; font-size: 38px; }
.brand-shell .bcard.featured .brand-name { font-size: 20px; }
.brand-shell .bcard.featured .brand-desc { font-size: 13.5px; }

/* Rare flag */
.brand-shell .rare-flag {
    position: absolute;
    top: 12px; right: 12px;
    background: var(--acc);
    color: #042220 !important;
    font-family: var(--fm);
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    z-index: 2;
}

/* Responsive */
@media (max-width: 1100px) {
    .brand-shell .brand-grid { grid-template-columns: repeat(3, 1fr); }
    .brand-shell .bcard-wrap:has(.bcard.featured) { grid-column: span 1; }
    .brand-hero { grid-template-columns: 1fr; padding: 36px 28px 28px; }
    .brand-hero h1 { font-size: 52px; }
    .brand-angle-strip { grid-template-columns: 1fr; }
    .brand-angle-strip .item {
        padding: 14px 0;
        border-right: none;
        border-bottom: 1px solid rgba(239,247,246,.10);
    }
    .brand-angle-strip .item:last-child { border-bottom: none; }
}
@media (max-width: 760px) {
    .brand-shell { padding: 0 14px 48px; }
    .brand-shell .brand-grid { grid-template-columns: 1fr 1fr; }
    .brand-hero h1 { font-size: 38px; }
}
@media (max-width: 480px) {
    .brand-shell .brand-grid { grid-template-columns: 1fr; }
    .brand-shell .bcard-wrap:has(.bcard.featured) { grid-column: span 1; }
}