* {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
}

:root {
    --app-sidebar-width: 15%;
    /* Header right cluster: % width on narrow viewports; ≥1066px uses auto width in media query */
    --header-end-width: 10%;
    --header-middle-width: 68%;
    --header-bar-height: 64px;
    /* Search panel + subcategory strip under the bar (single row height) */
    --header-overlay-row-height: 40px;
    --site-affiliate-strip-height: 40px;
    --site-affiliate-strip-bg: #ffffff;
    --site-affiliate-strip-border: #e0e0e0;
    /* Same inset from viewport left (legacy; right strip still uses %) and right (profile column + dropdown). */
    --header-brand-gutter: 2%;
    --header-profile-menu-width: 192px;
    /* Account dropdown menu rows (Profile, Settings, Logout) */
    --header-profile-menu-item-height: 40px;
    /* Header + shop sidebar accordions share this timing */
    --header-dropdown-duration: 0.22s;
    --header-dropdown-ease: cubic-bezier(0.33, 1, 0.68, 1);
    /* ≥1066px: see @media (min-width: 1066px) (256px rail + full-width underlays). Default here is for ≤1065. */
    --header-overlay-left: 15%;
    --header-overlay-width: 70%;
    /* Landing + profile public page: main column width (matches middle header band) */
    --header-main-band-width: 60vw;
    /* Underlays (search + category/simple strips): pin with left + right so width matches viewport math exactly */
    --header-overlay-right-inset: 0px;
    /* Profile menu under header (overridden on ≥1066px to fixed pixel width) */
    --header-profile-overlay-left: 85%;
    --header-profile-overlay-width: 15%;
    /* Frosted “liquidy” surfaces shared by header, nav strips, dropdowns, profile hero card */
    --tabbed-liquid-bg: rgba(255, 255, 255, 0.58);
    --tabbed-liquid-layers: radial-gradient(ellipse 120% 180% at 12% -40%, rgba(126, 184, 224, 0.28), transparent 52%),
        radial-gradient(ellipse 100% 160% at 88% 140%, rgba(200, 160, 232, 0.2), transparent 48%),
        radial-gradient(ellipse 80% 120% at 50% 50%, rgba(255, 255, 255, 0.45), transparent 62%),
        linear-gradient(
            105deg,
            rgba(252, 253, 255, 0.92) 0%,
            rgba(246, 250, 255, 0.72) 38%,
            rgba(250, 248, 255, 0.76) 68%,
            rgba(252, 253, 255, 0.9) 100%
        );
    --tabbed-liquid-blur: blur(14px) saturate(1.18);
    --tabbed-liquid-edge: rgba(148, 163, 184, 0.38);
    --tabbed-liquid-inset-top: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
    --tabbed-liquid-shadow-bar: 0 8px 28px rgba(90, 159, 212, 0.07);
    --tabbed-liquid-shadow-panel: 0 12px 36px rgba(90, 159, 212, 0.12);
    /* Bottom toasts (copy link, settings, logout, contribute success) */
    --toast-bg: #1a7f3c;
    --toast-text: #ffffff;
    --toast-error-bg: #b91c1c;
    /*
     * Compact / “mobile” header: viewport max-width 1179px (desktop from 1180px up for header chrome).
     * — Hamburger, mobile search, full-bleed header dropdowns; keep TABBED_MOBILE_MQ in templates/base.html aligned.
     */
}

/* Affiliate strip height on html drives body padding and fixed header offset; --tabbed-fixed-below-header is the Y position below strip+header */
html {
    --tabbed-affiliate-top: 0px;
    --tabbed-fixed-below-header: calc(var(--tabbed-affiliate-top) + var(--header-bar-height));
    /* Reserve space under fixed strips (search / category subs / simple nav) so page content sits below them. */
    --tabbed-header-nav-strip-gap: 0px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

html:not(.affiliate-strip-suppressed):has(#site-affiliate-disclosure-strip:not([hidden])) {
    --tabbed-affiliate-top: var(--site-affiliate-strip-height);
    --tabbed-fixed-below-header: calc(var(--tabbed-affiliate-top) + var(--header-bar-height));
}

html:has(#header-search-panel.is-open),
html:has(#header-categories-dropdown.is-open),
html:has(.header-nav-simple-dropdown.is-open) {
    --tabbed-header-nav-strip-gap: var(--header-overlay-row-height);
}

@media (max-width: 1179px) {
    :root {
        --header-overlay-left: 0;
        --header-overlay-width: 100%;
        --header-profile-overlay-left: 0;
        --header-profile-overlay-width: 100%;
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

::-webkit-scrollbar-thumb {
    border: none;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.45);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.55);
}

::-webkit-scrollbar-corner {
    background: transparent;
    border: none;
}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: #ffffff;
    color: #4a5568;
    display: flex;
    flex-direction: column;
    padding-top: calc(
        var(--header-bar-height) + var(--tabbed-affiliate-top) + var(--tabbed-header-nav-strip-gap)
    );
    transition: padding-top var(--header-dropdown-duration) var(--header-dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }
}

/* Fallback when :has() is unavailable or strip markup differs: class is set with the strip on key pages */
html:not(.affiliate-strip-suppressed) body.has-site-affiliate-strip {
    --tabbed-affiliate-top: var(--site-affiliate-strip-height);
    --tabbed-fixed-below-header: calc(var(--tabbed-affiliate-top) + var(--header-bar-height));
}

/* Hide strip when dismissed (class set on <html> or [hidden] on the node) */
html.affiliate-strip-suppressed #site-affiliate-disclosure-strip,
#site-affiliate-disclosure-strip[hidden] {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

/* Fixed full viewport width above header; z-index below .header (400) */
.site-affiliate-disclosure-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: var(--site-affiliate-strip-height);
    box-sizing: border-box;
    z-index: 260;
    background: var(--site-affiliate-strip-bg);
    border-bottom: 1px solid var(--site-affiliate-strip-border);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
}

.site-affiliate-disclosure-strip__inner {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 44px 0 12px;
    box-sizing: border-box;
    text-align: center;
}

.site-affiliate-disclosure-strip__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: var(--site-affiliate-strip-height);
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0;
    font-family: inherit;
}

.site-affiliate-disclosure-strip__close:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.04);
}

.site-affiliate-disclosure-strip__close:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

.site-affiliate-disclosure-strip .affiliate-disclosure-text {
    font-size: 10.5px;
    line-height: 1.25;
    color: #4a5568;
    margin: 0;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.site-affiliate-disclosure-strip .buy-button--disclosure-sample {
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    padding: 0 8px;
    font-size: 8px;
    margin: 0 3px;
    vertical-align: baseline;
}

.header {
    width: 100%;
    height: var(--header-bar-height);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-bottom: 1px solid #d0d0d0;
    position: fixed;
    top: var(--tabbed-affiliate-top);
    left: 0;
    right: 0;
    /* Below under-bar overlays (≈310) so nav bottom borders aren’t painted over during slide/fade; below modals (520+) */
    z-index: 400;
    flex-shrink: 0;
    background-color: #ffffff;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    gap: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    /* Match shop filter rail: same flex basis / width / min-width as .shop-sidebar */
    flex: 0 0 var(--app-sidebar-width);
    flex-shrink: 0;
    width: var(--app-sidebar-width);
    min-width: min(256px, 100%);
    height: var(--header-bar-height);
    align-self: stretch;
    box-sizing: border-box;
    /* Inset logo inside rail (rail edge aligns with sidebar edge) */
    padding: 0 16px;
    margin: 0;
}

/* Safe area only — rail lines up with .shop-sidebar (flush to viewport except notch) */
.header-left.header-hbar-seg {
    margin-left: env(safe-area-inset-left, 0px);
}

/* Logo band: no bottom accent (avoid “underline” on hover/focus) */
.header-left-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    height: 100%;
    align-self: stretch;
    padding: 0;
    box-sizing: border-box;
    border-bottom: none;
}

.header-left-brand > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-decoration: none;
    color: inherit;
    padding: 0;
    min-height: var(--header-bar-height);
    box-sizing: border-box;
}

.header-left-brand > a:focus {
    outline: none;
}

/* Fixed mark size; horizontal inset comes from .header-left padding */
.header-logo {
    width: 32px;
    height: 32px;
    margin: 0 16px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.header-title {
    font-size: 14px;
    background: linear-gradient(to right, #5A9FD4, #9B8FD8, #B57EDC, #D97AB5, #E8A0BF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-middle {
    display: flex;
    flex: 0 0 var(--header-middle-width);
    max-width: var(--header-middle-width);
    align-items: stretch;
    justify-content: center;
    padding: 0;
    margin: 0;
    min-height: 0;
    min-width: 0;
    cursor: default;
    gap: 0;
    overflow: visible;
    background: transparent;
}

.header-nav-options {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    gap: 4px;
    padding: 0;
    margin: 0;
}

.header-nav-mains-end-cluster {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    margin-left: 0;
    min-width: 0;
}

.header-nav-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
}

/* Search link in category mains row (after All); same bar chrome as .header-nav-btn--text */
.header-categories-inline-search {
    flex-shrink: 0;
}

.header-nav-item.header-nav-categories {
    /* Don’t grow: lets .header-nav-options justify-content:center treat category row (+ Search after All) as one centered group */
    flex: 0 1 auto;
    max-width: 100%;
}

/* Category main links live in the header bar; subs-only panel drops below. */
.header-nav-categories--inline {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-self: stretch;
    position: relative;
}

.header-categories-mains-scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
}

.header-categories-mains-scroll .header-categories-row--mains {
    flex: 0 0 auto;
    justify-content: center;
    gap: 2px;
    width: max-content;
    min-width: 100%;
}

.header-categories-panel--subs-only {
    min-height: 0;
}

.header-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-bar-height);
    width: var(--header-bar-height);
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    box-sizing: border-box;
}

a.header-nav-btn {
    text-decoration: none;
    color: #6b7280;
}

a.header-nav-btn--text {
    text-decoration: none;
    color: #6b7280;
}

button.header-nav-btn--text {
    color: #6b7280;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

.header-nav-btn--text {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 14px;
    height: auto;
    min-height: var(--header-bar-height);
    align-self: stretch;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    border-bottom: 4px solid transparent;
    background: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

.header-nav-btn--with-leading-icon {
    gap: 6px;
}

.header-nav-leading-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: block;
    opacity: 0.72;
    object-fit: contain;
}

.header-nav-btn--with-leading-icon:hover .header-nav-leading-icon,
.header-nav-btn--with-leading-icon[aria-expanded="true"] .header-nav-leading-icon {
    opacity: 1;
}

.header-nav-btn--icon-only {
    width: var(--header-bar-height);
    flex-shrink: 0;
}

.header-nav-btn:focus {
    outline: none;
}

.header-nav-btn:focus-visible {
    outline: 2px solid #c4c4c4;
    outline-offset: 2px;
}

.header-nav-icon {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    display: block;
}

.header-nav-btn:hover .header-nav-icon,
.header-nav-btn[aria-expanded="true"] .header-nav-icon {
    opacity: 1;
}

.header-nav-btn--text:hover,
.header-nav-btn--text:focus-visible,
.header-nav-btn--text[aria-expanded="true"] {
    border-bottom-color: #1976d2;
    color: #4a5568;
    outline: none;
}

/* Search: same 4px bottom bar as category links (explicit for <a> visited / focus states) */
#header-search-nav-btn.header-nav-btn--text:link,
#header-search-nav-btn.header-nav-btn--text:visited {
    border-bottom: 4px solid transparent;
    color: #6b7280;
}

#header-search-nav-btn.header-nav-btn--text:hover,
#header-search-nav-btn.header-nav-btn--text:focus-visible,
#header-search-nav-btn.header-nav-btn--text[aria-expanded="true"] {
    border-bottom-color: #1976d2;
    color: #4a5568;
    outline: none;
}

.header-nav-btn-label {
    display: inline-block;
}

.header-nav-simple-dropdown {
    position: fixed;
    top: var(--tabbed-fixed-below-header);
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    min-height: var(--header-bar-height);
    text-align: center;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #d0d0d0;
    border-top: none;
    border-radius: 0 0 2px 2px;
    box-shadow: none;
    z-index: 310;
    box-sizing: border-box;
}

.header-nav-simple-dropdown[hidden] {
    display: none;
}

.header-nav-simple-dropdown__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    min-height: var(--header-bar-height);
    margin: 0;
    padding: 0;
    gap: 4px;
    overflow-x: auto;
    background: transparent;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

.header-nav-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: var(--header-bar-height);
    height: auto;
    margin: 0;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 4px solid transparent;
    background: none;
    cursor: pointer;
    transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

.header-nav-dropdown-link:hover,
.header-nav-dropdown-link:focus-visible {
    border-bottom-color: #1976d2;
    color: #4a5568;
    outline: none;
}

.header-categories-dropdown {
    position: fixed;
    top: var(--tabbed-fixed-below-header);
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    min-height: 0;
    text-align: center;
    height: auto;
    max-height: min(85vh, calc(100dvh - var(--tabbed-fixed-below-header) - 1px));
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    z-index: 310;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: none;
}

.header-categories-dropdown[hidden] {
    display: none;
}

.header-categories-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    overflow: visible;
}

.header-categories-dropdown > .header-categories-panel {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    border-top: none;
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    border-left: 1px solid #d0d0d0;
    border-radius: 0 0 2px 2px;
    background: #ffffff;
    overflow: hidden;
}

.header-categories-row--mains,
.header-categories-row--subs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: flex-start;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 2px;
    box-sizing: border-box;
    background: #ffffff;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
}

/* Fill overlay width when links fit; grow for horizontal scroll (mega subs + simple nav strip). */
.header-categories-row--subs {
    width: max-content;
    min-width: 100%;
}

.header-categories-row--mains {
    min-height: var(--header-bar-height);
}

/* Subcategory row: same timing as main header dropdowns */
.header-categories-row--subs {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        max-height var(--header-dropdown-duration) var(--header-dropdown-ease),
        opacity var(--header-dropdown-duration) var(--header-dropdown-ease),
        transform var(--header-dropdown-duration) var(--header-dropdown-ease),
        min-height var(--header-dropdown-duration) var(--header-dropdown-ease);
    border-top: none;
}

.header-categories-row--subs.header-categories-subs--open {
    /* −1px: outer .header-categories-dropdown has border-bottom; keep total strip height = search row (border inside 40px box) */
    max-height: calc(var(--header-overlay-row-height) - 1px);
    min-height: calc(var(--header-overlay-row-height) - 1px);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
    .header-categories-row--subs {
        transition-duration: 0.01ms;
    }
}

.header-category-main {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: var(--header-bar-height);
    height: auto;
    margin: 0;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 4px solid transparent;
    background: none;
    cursor: pointer;
    transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

.header-category-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: calc(var(--header-overlay-row-height) - 1px);
    height: auto;
    margin: 0;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 4px solid transparent;
    background: none;
    cursor: pointer;
    transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

.header-category-main:hover,
.header-category-main:focus-visible,
.header-category-main.is-active,
.header-category-sub:hover,
.header-category-sub:focus-visible,
.header-category-sub.is-active {
    border-bottom-color: #1976d2;
    color: #4a5568;
    outline: none;
}

.header-categories-loading,
.header-categories-empty {
    margin: 0;
    padding: 0 14px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--header-bar-height);
    box-sizing: border-box;
}

/* ≥1180px desktop: 256px logo band; 128px header end (vars still used by profile / layout math). */
@media (min-width: 1180px) {
    :root {
        --app-sidebar-width: 256px;
        --header-brand-gutter: 0px;
        --header-overlay-left: 256px;
        --header-overlay-width: calc(100% - 384px);
        --header-overlay-right-inset: 128px;
    }

    .header-middle {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }

    .header-nav-dropdown-link {
        font-weight: 300;
        letter-spacing: 0.012em;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-category-sub {
        font-weight: 300;
        letter-spacing: 0.012em;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-middle .header-nav-btn--text {
        font-weight: 300;
        letter-spacing: 0.012em;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-category-main {
        font-weight: 300;
        letter-spacing: 0.012em;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-categories-loading,
    .header-categories-empty {
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-end {
        flex: 0 0 128px;
        width: 128px;
        min-width: 128px;
        max-width: 128px;
        padding: 0;
        box-sizing: border-box;
    }

    .header-end:has(#header-login-slot:not([hidden])) {
        flex: 0 0 auto;
        width: auto;
        min-width: 128px;
        max-width: none;
    }
}

@media (min-width: 1180px) {
    a.header-category-main,
    .header-category-main,
    .header-category-sub,
    .header-middle .header-nav-btn--text,
    .header-nav-dropdown-link,
    .header-categories-loading,
    .header-categories-empty {
        font-size: 13px;
    }
}

.search-input {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    font-size: 14px;
    background-color: #f0f0f0;
    text-align: center;
}

.search-input::placeholder {
    color: #999;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-bar-height);
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    gap: 12px;
    padding: 0;
    margin: 0;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
    overflow: visible;
}

/* Signed-in: only the 40px avatar control (no extra wrapper width) */
#header-signed-in-cluster.header-right {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    gap: 0;
}

/* Desktop: 32px glyphs in 64px hit areas (16+32+16), 128px end rail; profile control has no bar underline */
@media (min-width: 1180px) {
    #header-signed-in-cluster.header-right {
        flex: 0 0 64px;
        width: 64px;
        min-width: 64px;
        max-width: 64px;
    }

    .header-end .header-profile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        min-width: 64px;
        max-width: 64px;
        height: auto;
        min-height: var(--header-bar-height);
        align-self: stretch;
        box-sizing: border-box;
        padding: 0 16px;
        margin: 0;
        border: none;
        border-radius: 0;
        background: none;
        transition: color 0.2s ease;
    }

    .header-end .header-profile-menu-btn:hover,
    .header-end .header-profile-menu-btn:focus-visible,
    .header-end .header-profile-menu-btn[aria-expanded="true"] {
        color: #4a5568;
        outline: none;
    }

    .header-end .header-profile-menu-btn:focus-visible {
        border-radius: 0;
    }

    .header-end .header-profile-menu-btn .header-profile-avatar-frame {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .header-end .header-profile-menu-btn .header-profile-avatar-img {
        border-radius: 50%;
    }
}

/* Header search */
.header-search-wrap {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 40px;
}

.header-toolbar-cluster {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    gap: 0;
}

.header-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    align-self: stretch;
    background: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
}

a.header-search-btn {
    text-decoration: none;
    color: inherit;
    font: inherit;
}

.header-search-btn:hover,
.header-search-btn.is-active {
    opacity: 1;
}

.header-search-btn:focus {
    outline: none;
}

.header-search-btn:focus-visible {
    outline: 2px solid #c4c4c4;
    outline-offset: 2px;
    border-radius: 2px;
}

.header-search-icon {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    display: block;
}

.header-search-btn:hover .header-search-icon,
.header-search-btn.is-active .header-search-icon {
    opacity: 1;
}

/* Toolbar icons + auth — right band: % width by default; ≥1066px overrides to auto + padding in media query */
.header-end {
    display: flex;
    align-items: stretch;
    flex: 0 0 var(--header-end-width);
    min-width: 0;
    flex-shrink: 0;
    margin-left: auto;
    gap: 0;
    overflow: visible;
    padding: 0 var(--header-brand-gutter);
    box-sizing: border-box;
    width: var(--header-end-width);
    max-width: 100%;
}

.header-auth-column {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    position: relative;
    overflow: visible;
    align-self: stretch;
}

/* No profile hbar in layout when the signed-in block is not shown */
.header-hbar-seg--profile:has(#header-signed-in-cluster[hidden]) {
    display: none;
}

/* Desktop: 128px end rail; 64px profile when signed in; sign-in can widen the rail */
@media (min-width: 1180px) {
    .header-auth-column {
        justify-content: flex-end;
        margin-right: 18px;
    }

    .header-end:has(#header-login-slot:not([hidden])) .header-auth-column {
        flex: 1 1 auto;
        width: auto;
        min-width: 128px;
        max-width: none;
    }

    .header-hbar-seg:has(#header-login-slot) {
        order: 1;
    }

    .header-hbar-seg--profile {
        order: 2;
    }
}

/* Mobile hamburger — hidden until @media (max-width: 1179px) shows it as display:block */
.header-mobile-menu-btn {
    display: none;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0 -8px 0 0;
    padding: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: #6b7280;
    align-self: center;
    background: transparent;
}

/* Bars are pinned absolutely so positions are exact and translateY math is reliable */
.header-mobile-menu-btn__line {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 1.5px;
    border-radius: 9999px;
    background: currentColor;
    transform-origin: center center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bar 1 near top: center at y = 12 + 0.75 = 12.75px */
.header-mobile-menu-btn__line:nth-child(1) {
    top: 12px;
}

/* Bar 2: hidden — only 2 bars */
.header-mobile-menu-btn__line:nth-child(2) {
    display: none;
}

/* Bar 3 near bottom: center at y = 40 - 12 - 0.75 = 27.25px */
.header-mobile-menu-btn__line:nth-child(3) {
    bottom: 12px;
}

/*
 * X math: button center = y=20px
 * Bar 1 center = 12.75px → travel +7.25px down
 * Bar 3 center = 27.25px → travel -7.25px up
 * Same distance → perfectly symmetric X
 */
.header-mobile-menu-btn[aria-expanded="true"] .header-mobile-menu-btn__line:nth-child(1) {
    transform: translateY(7.25px) rotate(45deg);
}

.header-mobile-menu-btn[aria-expanded="true"] .header-mobile-menu-btn__line:nth-child(3) {
    transform: translateY(-7.25px) rotate(-45deg);
}

.header-mobile-menu-btn:focus {
    outline: none;
}

.header-mobile-menu-btn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.2);
    outline-offset: 2px;
}

/* Backdrop for mobile dropdowns — sits below header so header stays visible */
.header-mobile-nav-backdrop {
    position: fixed;
    top: var(--tabbed-fixed-below-header);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 480;
    background: rgba(0, 0, 0, 0.4);
    touch-action: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--header-dropdown-duration) var(--header-dropdown-ease);
}

.header-mobile-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .header-mobile-nav-backdrop {
        transition-duration: 0.01ms;
    }
}

.header-mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(100vw - 48px, 320px);
    max-width: 100%;
    z-index: 500;
    background: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-sizing: border-box;
}

.header-mobile-nav-drawer.is-open {
    transform: translateX(0);
}

.header-mobile-nav-drawer[hidden] {
    display: none;
}

body.header-mobile-nav-open {
    overflow: hidden;
    touch-action: none;
}

.header-mobile-nav-drawer__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px 16px;
    border-bottom: 1px solid #e8e8e8;
    min-height: 48px;
    box-sizing: border-box;
}

.header-mobile-nav-drawer__title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.02em;
}

.header-mobile-nav-drawer__close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #6B7280;
    cursor: pointer;
    border-radius: 6px;
}

.header-mobile-nav-drawer__close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}

.header-mobile-nav-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 24px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.header-mobile-nav-drawer__search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 12px 14px;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    color: #1976d2;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 8px;
    cursor: pointer;
}

.header-mobile-nav-drawer__search:hover {
    background: #bbdefb;
}

.header-mobile-nav-drawer__section-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
}

.header-mobile-nav-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 20px;
}

.header-mobile-nav-accordion__empty,
.header-mobile-nav-accordion__loading {
    font-size: 14px;
    color: #6B7280;
    margin: 8px 0 0;
}

.header-mobile-nav-cat {
    border-bottom: 1px solid #eee;
}

.header-mobile-nav-cat__row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 48px;
}

.header-mobile-nav-cat__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 12px 8px 12px 0;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    box-sizing: border-box;
}

.header-mobile-nav-cat__main:hover,
.header-mobile-nav-cat__main:focus-visible {
    color: #1976d2;
    outline: none;
}

.header-mobile-nav-cat__toggle {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    border: none;
    background: #fafafa;
    color: #555;
    font-size: 12px;
    cursor: pointer;
    border-left: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.header-mobile-nav-cat__chev {
    display: block;
    font-size: 14px;
    line-height: 1;
}

.header-mobile-nav-cat__subs {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fafafa;
    border-top: 1px solid #eee;
}

.header-mobile-nav-cat__subs[hidden] {
    display: none;
}

.header-mobile-nav-cat__subs li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-mobile-nav-cat__sub {
    display: block;
    padding: 10px 8px;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
}

.header-mobile-nav-cat__sub:hover,
.header-mobile-nav-cat__sub:focus-visible {
    background: #e3f2fd;
    color: #1565c0;
    outline: none;
}

.header-mobile-nav-site {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.header-mobile-nav-site__a {
    display: block;
    padding: 12px 4px;
    font-size: 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
}

.header-mobile-nav-site__a:hover,
.header-mobile-nav-site__a:focus-visible {
    color: #1976d2;
    outline: none;
}

/* Mobile search icon in header (hidden on desktop, shown on mobile) */
.header-mobile-search-btn {
    display: none;
    box-sizing: border-box;
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    align-self: center;
    background: transparent;
}

/* Mobile category pulldown menu — entire drawer scrolls; category lists grow naturally (no trapped inner scrollbars) */
.mobile-cat-menu {
    position: fixed;
    top: var(--tabbed-fixed-below-header);
    left: 0;
    right: 0;
    z-index: 490;
    background: #fff;
    border-bottom: none;
    max-height: calc(100dvh - var(--tabbed-fixed-below-header));
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

.mobile-cat-menu[hidden] {
    display: none;
}

/* Category panels — content-sized; scrolling happens on .mobile-cat-menu */
.mobile-cat-menu__panels {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.mobile-cat-menu__l1,
.mobile-cat-menu__l2 {
    min-height: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* First visible list row (“All”) + drill/leaf/sub rows — 14px (hamburger drawer) */
.mobile-cat-menu__all-cats-link--in-list {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding-left: 8px;
    border-left: 4px solid transparent;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    text-decoration: none;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
    border-image: none;
    min-height: 40px;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #ffffff;
    transition:
        border-left-color 0.2s ease,
        color 0.2s ease;
}

.mobile-cat-menu__all-cats-link--in-list:hover,
.mobile-cat-menu__all-cats-link--in-list:focus {
    border-left-color: #1976d2;
    color: #4a5568;
    background: none;
    outline: none;
}

.mobile-cat-menu__all-cats-link--in-list:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

#mobile-cat-signin-btn {
    width: auto;
    align-self: center;
    margin: 12px auto 0;
}

.mobile-cat-menu__l1-list,
.mobile-cat-menu__l2-list {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

/* Same hairline between stacked filters as .shop-sidebar .shop-filter-stack .shop-filter-panel.contribute-attr-panel:not(:last-child) */
.mobile-cat-menu__l1-list > .mobile-cat-menu__main-row:not(:last-child),
.mobile-cat-menu__l2-list > .mobile-cat-menu__sub-row:not(:last-child) {
    border-bottom: 1px solid #e8e8e8;
}

/* Level 1: main category rows */
.mobile-cat-menu__l1[hidden] {
    display: none;
}

/* L1 & L2 top row — match .shop-sidebar-mobile-header (title left, primary action right) */
.mobile-cat-menu__l1-hd,
.mobile-cat-menu__l2-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 0 0;
    height: 40px;
    min-height: 40px;
    flex-shrink: 0;
    border-bottom: 1px solid #d0d0d0;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
}

.mobile-cat-menu__l1-hd-back {
    flex: 0 0 auto;
}

/* Back button text matches filter header primary actions */
.mobile-cat-menu .header-login-btn.mobile-cat-menu__l1-hd-back {
    height: 28px;
    padding: 0 10px;
    font-size: 14px;
}

/* Same title strip as .shop-sidebar-mobile-header__title — 14px */
.mobile-cat-menu__l1-hd-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.04em;
    padding: 0 4px 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Category rows — full-width tap targets; drill = button opens L2; hover accent like profile dropdown */
.mobile-cat-menu__main-row {
    display: flex;
    align-items: stretch;
    border: none;
    border-left: 4px solid transparent;
    min-height: 40px;
    height: auto;
    box-sizing: border-box;
    background: #ffffff;
    transition:
        border-left-color 0.2s ease,
        color 0.2s ease;
}

.mobile-cat-menu__main-row--drill {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    margin: 0;
    padding: 0;
    padding-left: 8px;
    text-align: left;
}

.mobile-cat-menu__main-row--drill:hover {
    border-left-color: #1976d2;
    color: #4a5568;
    background: none;
}

.mobile-cat-menu__main-row--drill:hover .mobile-cat-menu__main-name {
    color: #4a5568;
}

.mobile-cat-menu__main-row--drill:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

.mobile-cat-menu__main-row.mobile-cat-menu__main-link {
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px 0 8px;
    font-size: 14px;
    font-weight: 300;
    color: #6b7280;
    text-decoration: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-cat-menu__main-row.mobile-cat-menu__main-link:hover {
    border-left-color: #1976d2;
    color: #4a5568;
    background: none;
}

.mobile-cat-menu__main-row.mobile-cat-menu__main-link:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

.mobile-cat-menu__main-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0 12px 0 0;
    font-size: 14px;
    font-weight: 300;
    color: #6b7280;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: color 0.2s ease;
}

.mobile-cat-menu__status {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 300;
    color: #9ca3af;
    margin: 0;
    text-align: left;
}

/* Level 2: subcategory view */
.mobile-cat-menu__l2[hidden] {
    display: none;
}

/* Subcategory rows */
.mobile-cat-menu__sub-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0 12px 0 8px;
    font-size: 14px;
    font-weight: 300;
    color: #6b7280;
    text-decoration: none;
    border: none;
    border-left: 4px solid transparent;
    min-height: 40px;
    height: 40px;
    box-sizing: border-box;
    background: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        border-left-color 0.2s ease,
        color 0.2s ease;
}

.mobile-cat-menu__sub-row:hover {
    border-left-color: #1976d2;
    color: #4a5568;
    background: none;
}

.mobile-cat-menu__sub-row:focus {
    outline: none;
}

.mobile-cat-menu__sub-row:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}


.mobile-cat-menu__account:has(#mobile-cat-acct-loggedin:not([hidden])) {
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-start;
}

/* Account section: horizontal layout, avatar left, actions right */
.mobile-cat-menu__account {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-bottom: 8px;
    background: #ffffff;
    box-sizing: border-box;
}

.mobile-cat-menu__acct-loggedout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.mobile-cat-menu__footer--in-account {
    width: 100%;
}

.mobile-cat-menu__acct-loggedout[hidden],
.mobile-cat-menu__acct-loggedin[hidden] {
    display: none;
}

.mobile-cat-menu__acct-loggedin {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
}

.mobile-cat-menu__acct-in {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Hamburger drawer: reuse profile-v2 hero; shared chrome lives with .page-wrap--profile-v2 rules below */
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero.profile-v2-hero {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.mobile-cat-menu .mobile-cat-menu__acct-in > .mobile-cat-menu__footer.mobile-cat-menu__footer--in-account {
    border-top: none;
}

/* Footer: flush with list — no hairline */
.mobile-cat-menu__footer {
    flex: 0 0 auto;
    margin-top: 0;
    border-top: none;
    background: #ffffff;
    box-sizing: border-box;
}

.mobile-cat-menu .mobile-cat-menu__sitenav.landing-site-links {
    margin-top: 0;
    padding: 9px 10px 12px;
    border: none;
    text-align: center;
    justify-content: center;
}

.mobile-cat-menu .mobile-cat-menu__sitenav .landing-site-links__a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 4px 10px 2px;
    border: none;
    box-sizing: border-box;
    font-size: 14px;
    transition: color 0.2s ease;
}

.mobile-cat-menu .mobile-cat-menu__sitenav.landing-site-links .landing-site-links__dot {
    font-size: 14px;
}

.mobile-cat-menu .mobile-cat-menu__sitenav .landing-site-links__a:hover {
    color: #1976d2;
    background: none;
}

#mobile-cat-acct-logout:hover {
    color: #991b1b;
}

/* Shop sidebar overlay on mobile */
.shop-sidebar-backdrop {
    position: fixed;
    top: var(--tabbed-fixed-below-header);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 460;
    background: rgba(0, 0, 0, 0.4);
    touch-action: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--header-dropdown-duration) var(--header-dropdown-ease);
}

.shop-sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .shop-sidebar-backdrop {
        transition-duration: 0.01ms;
    }
}

.shop-sidebar-backdrop[hidden] {
    display: none;
}

@media (max-width: 1179px) {
    .header-mobile-menu-btn {
        display: block;
    }

    .header-mobile-search-btn {
        display: flex;
    }

    /* Logo slot keeps 16px left margin via .header-left.header-hbar-seg; gap before search/menu */
    .header-left.header-hbar-seg {
        margin-right: 16px;
    }

    .header-hbar-seg:has(.header-mobile-search-btn) {
        flex: 0 0 auto;
        width: auto;
        margin-right: 16px;
        order: 0;
    }

    .header-hbar-seg:has(.header-mobile-menu-btn) {
        flex: 0 0 auto;
        width: auto;
        order: 1;
    }

    .header-end {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 32px;
        margin-right: 16px;
    }

    .header-auth-column {
        justify-content: flex-end;
        align-items: center;
        padding-right: 0;
        gap: 0;
    }

    .header-left-brand,
    .header-left-brand:hover,
    .header-left-brand:has(a:focus-visible) {
        border-bottom: none;
    }

    .header-hbar-seg.header-hbar-seg--profile {
        display: none !important;
    }

    .header-hbar-seg:has(#header-login-slot) {
        order: 3;
    }

    /* Logged out (mobile header ≤1179px): no Sign in in the header strip — use the menu drawer. Synced via html.tabbed-auth-logged-out in base.html. */
    html.tabbed-auth-logged-out .header-hbar-seg:has(#header-login-slot) {
        display: none !important;
    }

    /* Logged in: primary row hides profile on mobile; login slot is [hidden] — drop the empty segment. */
    .header-hbar-seg:has(#header-login-slot[hidden]) {
        display: none !important;
    }

    .header-middle {
        display: none;
    }

    /* Mobile header icon segments */
    .header-hbar-seg {
        display: flex;
        align-items: stretch;
        align-self: stretch;
        position: relative;
        flex: 0 0 auto;
    }

    .header-hbar-seg:has(.header-mobile-search-btn)::after,
    .header-hbar-seg:has(.header-mobile-menu-btn)::after,
    .header-hbar-seg--profile:has(.header-profile-menu-btn)::after,
    .header-hbar-seg:has(.header-login-btn)::after {
        display: none;
    }

    .header-hbar-seg:has(.header-mobile-search-btn),
    .header-hbar-seg:has(.header-mobile-menu-btn),
    .header-hbar-seg--profile,
    .header-hbar-seg:has(#header-login-slot) {
        align-items: center;
    }

    /* Search icon: 24×24 flex-centered */
    .header-mobile-search-btn {
        flex: 0 0 24px;
        width: 24px;
        min-width: 24px;
        height: 24px;
        min-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-bottom: none;
        border-radius: 4px;
        background: none;
        box-sizing: border-box;
    }

    /* Hamburger: 40×40 with position:relative so absolutely-positioned bars work */
    .header-mobile-menu-btn {
        display: block;
        position: relative;
        flex: 0 0 40px;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        border: none;
        border-bottom: none;
        border-radius: 0;
        background: transparent;
        box-sizing: border-box;
        color: #6b7280;
    }

    .header a {
        text-decoration: none;
    }

    .header-mobile-search-btn:hover,
    .header-mobile-search-btn:active {
        border-bottom: none;
        color: inherit;
        opacity: 0.85;
    }

    .header-mobile-search-btn:focus-visible {
        outline: 2px solid #c4c4c4;
        outline-offset: 2px;
        opacity: 1;
    }

    .header-hbar-seg--profile .header-profile-menu-btn:hover,
    .header-hbar-seg--profile .header-profile-menu-btn:focus-visible,
    .header-hbar-seg--profile .header-profile-menu-btn[aria-expanded="true"] {
        border-bottom-color: transparent;
        color: #4a5568;
        outline: none;
    }

    .header-mobile-search-btn__icon {
        width: 24px;
        height: 24px;
        display: block;
        object-fit: contain;
    }

    .header-hbar-seg--profile .header-profile-menu-btn {
        align-self: center;
        min-height: 0;
        border: none;
        border-bottom: none;
        background: none;
    }

    #header-signed-in-cluster.header-right {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
    }

    .header-hbar-seg--profile .header-profile-menu-btn {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        box-sizing: border-box;
        padding: 0;
        border-radius: 0;
    }

    .header-hbar-seg--profile .header-profile-menu-btn .header-profile-avatar-frame {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        box-sizing: border-box;
    }
}

/* 616px–1179px: persistent sidebar rail (20 + 20 + min card 320 + sidebar 256). Below: full-width overlay. */
@media (min-width: 616px) and (max-width: 1179px) {
    :root {
        --app-sidebar-width: 256px;
        --header-overlay-left: 256px;
    }

    .shop-layout .shop-sidebar {
        flex: 0 0 var(--app-sidebar-width);
        width: var(--app-sidebar-width);
        min-width: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .shop-sidebar-inner {
        max-height: none;
    }

    .shop-main {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ≤615px: full-width overlay — same fade/slide timing as header dropdowns */
@media (max-width: 615px) {
    .shop-layout .shop-sidebar {
        position: fixed;
        top: var(--tabbed-fixed-below-header);
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100dvh - var(--tabbed-fixed-below-header));
        max-height: none;
        z-index: 600;
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid #d0d0d0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition:
            opacity var(--header-dropdown-duration) var(--header-dropdown-ease),
            transform var(--header-dropdown-duration) var(--header-dropdown-ease),
            visibility 0s linear var(--header-dropdown-duration);
    }

    body.shop-sidebar-open .shop-layout .shop-sidebar {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition:
            opacity var(--header-dropdown-duration) var(--header-dropdown-ease),
            transform var(--header-dropdown-duration) var(--header-dropdown-ease),
            visibility 0s;
    }

    .shop-main {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 615px) {
    .shop-layout .shop-sidebar {
        transition-duration: 0.01ms;
    }

    body.shop-sidebar-open .shop-layout .shop-sidebar {
        transition-duration: 0.01ms;
    }
}

/* Mobile sidebar close button header: shown only when sidebar is a full-width overlay (≤615px) */
.shop-sidebar-mobile-header {
    display: none;
}

@media (max-width: 615px) {
    .shop-sidebar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 8px 0 0;
        height: 40px;
        min-height: 40px;
        flex-shrink: 0;
        border-bottom: 1px solid #d0d0d0;
        background-color: #ffffff;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .shop-sidebar-mobile-header__title {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        color: #6b7280;
        letter-spacing: 0.04em;
        padding: 0 4px 0 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shop-sidebar-mobile-header__reset {
        flex: 0 0 auto;
    }

    /* Reset: compact height + 14px like hamburger drawer back control */
    .shop-sidebar-mobile-header .header-login-btn {
        height: 28px;
        padding: 0 10px;
        font-size: 14px;
    }
}

/* Shop sidebar (category page tabbed filters): titles, toggles, panel headers, chips, rows, search — 14px */
.shop-sidebar .sidebar-section-header {
    font-size: 13px;
}

.shop-sidebar .shop-filter-mode-label {
    font-size: 13px;
}

.shop-sidebar .shop-filter-mode-btn {
    font-size: 13px;
}

.shop-sidebar .contribute-attr-header-row,
.shop-sidebar .shop-filter-panel-header-row.contribute-attr-header-row {
    font-size: 13px;
}

.shop-sidebar .sidebar-filter-item,
.shop-sidebar .sidebar-selected-chip {
    font-size: 13px;
}

.shop-sidebar .sidebar-chip-remove {
    font-size: 13px;
}

.shop-sidebar .shop-filter-search-input {
    font-size: 13px;
}

.header-login-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
}

.header-login-slot[hidden] {
    display: none;
}

.header-right[hidden] {
    display: none;
}

.header-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    margin: 0;
    border: none;
    box-sizing: border-box;
    background: #1976d2;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    text-decoration: none;
    letter-spacing: 0.3px;
    line-height: 1;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.header-login-btn:hover {
    background: #1565c0;
}

.header-login-btn:focus {
    outline: none;
}

.header-login-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

button.header-login-btn {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

/* Admin sign-in: expandable panel (mirrors header Sign in revealing the form) */
.admin-signin-gate__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
    margin-top: 0;
}

.admin-signin-gate__panel.is-open {
    grid-template-rows: 1fr;
    margin-top: 12px;
}

.admin-signin-gate__panel-inner {
    overflow: hidden;
    min-height: 0;
}

.admin-signin-gate__lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
    font-weight: 400;
}

/* Sign-in modal (global, base.html) */
/* Sign-in modal: same shell as contribute modals (Add Product, etc.) */
.login-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.45);
}

.login-modal-backdrop[hidden] {
    display: none;
}

.contribute-modal.login-modal-shell {
    max-width: 420px;
    max-height: min(90vh, 640px);
}

.login-modal-lead {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
    font-weight: 400;
}

.login-modal-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.login-modal-form label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.login-modal-hint {
    margin: -0.25rem 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--muted, #6b7280);
}

.login-modal-form input[type="email"],
.login-modal-form input[type="text"],
.login-modal-form input[type="password"] {
    padding: 8px 10px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    font-family: inherit;
    color: #4a5568;
    background: #fff;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

.login-modal-form input.login-modal-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.login-modal-form input:focus {
    outline: none;
    border-color: #1976d2;
}

.login-modal-after-send {
    margin-top: 4px;
}

.login-modal-status {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
}

.login-modal-status--ok {
    color: #2e7d32;
}

.login-modal-status--error {
    color: #c62828;
}

.login-modal-actions {
    margin-top: 6px;
}

.login-modal-actions--row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.login-modal-submit {
    padding: 10px 20px;
    border: none;
    background: #1976d2;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

.login-modal-submit:hover {
    background: #1565c0;
}

.login-modal-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.login-modal-back {
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #1976d2;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
}

.login-modal-back:hover {
    color: #1565c0;
}

.header-search-panel {
    position: fixed;
    top: var(--tabbed-fixed-below-header);
    left: 0;
    right: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    z-index: 310;
    box-sizing: border-box;
    text-align: left;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: var(--header-overlay-row-height);
    min-height: var(--header-overlay-row-height);
    max-height: var(--header-overlay-row-height);
    max-width: none;
}

.header-search-panel[hidden] {
    display: none;
}

.header-search-panel__inner {
    padding: 0;
    flex: 1;
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.header-search-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid #d0d0d0;
    border-top: none;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    height: var(--header-overlay-row-height);
    min-height: var(--header-overlay-row-height);
    max-height: var(--header-overlay-row-height);
    box-sizing: border-box;
    width: 100%;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.header-search-panel__input {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 0 12px;
    border: none;
    border-radius: 0;
    font-size: 15px;
    font-family: inherit;
    color: #4a5568;
    background: transparent;
    box-sizing: border-box;
    line-height: 1.35;
    text-align: left;
}

.header-search-panel__input:focus {
    outline: none;
}

.header-search-panel__input:focus-visible {
    outline: none;
}

.header-search-input-wrapper:focus-within {
    background: #ffffff;
    border-color: #d0d0d0;
}

/* Mobile / compact header — match desktop: solid white strip */
@media (max-width: 1179px) {
    .header-search-input-wrapper {
        border: 1px solid #d0d0d0;
        border-top: none;
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

    .header-search-input-wrapper:focus-within {
        background: #ffffff;
        border-color: #d0d0d0;
    }
}

.header-search-panel__input::placeholder {
    color: #9ca3af;
}

.header-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 52px;
    min-width: 52px;
    min-height: var(--header-overlay-row-height);
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #4a5568;
    transition: color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 0;
    margin: 0;
    box-sizing: border-box;
}

.header-search-submit:hover {
    color: #1976d2;
    background: #f3f4f6;
}

.header-search-submit.header-search-submit--magnifier,
.header-search-submit.header-search-submit--magnifier:hover {
    color: #4a5568;
    background: transparent;
}

.header-search-submit.header-search-submit--magnifier:focus {
    outline: none;
}

.header-search-submit.header-search-submit--magnifier:focus-visible {
    outline: none;
}

.header-search-magnifier-icon {
    display: block;
    width: 22px;
    height: 22px;
    opacity: 0.9;
}

.header-search-submit:focus {
    outline: none;
}

.header-search-submit:focus-visible {
    outline: none;
}

.header-search-submit-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header-profile-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.header-profile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    line-height: 0;
}

.header-profile-link--avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.header-profile-link--avatar:hover,
.header-profile-link--avatar:focus-visible {
    border-color: #d1d5db;
}

.header-profile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    box-sizing: border-box;
    background: transparent;
    cursor: pointer;
    font: inherit;
    line-height: 0;
    flex-shrink: 0;
}

.header-profile-menu-btn:focus {
    outline: none;
}

.header-profile-menu-btn:focus-visible {
    outline: 2px solid #c4c4c4;
    outline-offset: 2px;
    border-radius: 50%;
}

.header-profile-avatar-frame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    overflow: hidden;
}

.header-profile-menu-btn .header-profile-avatar-frame {
    box-sizing: border-box;
}

.header-profile-menu-btn .header-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.header-profile-menu-btn .header-profile-avatar-img--placeholder {
    object-fit: contain;
    object-position: center;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Default / null avatar (fallback if img appears outside menu btn) */
.header-profile-avatar-img--placeholder {
    object-fit: contain;
    object-position: center;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.header-profile-link:focus {
    outline: none;
}

.header-profile-link:focus-visible {
    outline: 2px solid #c4c4c4;
    outline-offset: 2px;
    border-radius: 50%;
}

/* Header overlays: fade in — no translateY here so backdrop-filter isn’t on a transformed compositor layer (clearer glass). */
.header-nav-simple-dropdown,
.header-categories-dropdown,
.header-search-panel,
.header-profile-menu-dropdown-new {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--header-dropdown-duration) var(--header-dropdown-ease);
}

.header-nav-simple-dropdown.is-open,
.header-categories-dropdown.is-open,
.header-search-panel.is-open,
.header-profile-menu-dropdown-new.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-cat-menu {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
        opacity var(--header-dropdown-duration) var(--header-dropdown-ease),
        transform var(--header-dropdown-duration) var(--header-dropdown-ease);
}

.mobile-cat-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .header-nav-simple-dropdown,
    .header-categories-dropdown,
    .header-search-panel,
    .header-profile-menu-dropdown-new,
    .mobile-cat-menu {
        transition-duration: 0.01ms;
    }
}

.header-right > .header-icon {
    flex-shrink: 0;
    align-self: center;
}

.header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
}

.header-icon:hover {
    background-color: #e0e0e0;
    transform: scale(1.1);
}


.user-handle {
    font-size: 14px;
    color: #4a5568;
    font-weight: 500;
    display: none;
}

a.avatar-circle,
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background-color: #f5f5f5;
}

/* Header profile link (e.g. admin): circular hit target, ring on hover */
.header-right a.avatar-circle {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    align-self: center;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;
}

.header-right a.avatar-circle:hover,
.header-right a.avatar-circle.is-active {
    border-color: #1976d2;
}

.header-right a.avatar-circle .avatar-image {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    margin: 0;
}

.logo {
    display: flex;
    flex-direction: row;
    height: 48px;
    width: 48px;
    box-shadow: none;
    margin-right: 8px;
}

.main-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    font-size: 14px;
    width: 200px;
}

.search-input::placeholder {
    color: #999;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 16px;
    padding: 16px;
    background-color: #ffffff;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .content {
        scroll-behavior: auto;
    }
}

/* Sidebar (shop filter rail: .sidebar.shop-sidebar) */
.sidebar {
    flex: 0 0 var(--app-sidebar-width);
    min-width: min(256px, 100%);
    background-color: #ffffff;
    border-right: 1px solid #d0d0d0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #d0d0d0;
}

.sidebar-section:last-child {
    border-bottom: none;
}

.sidebar-section-header {
    flex: 0 0 auto;
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-left-color 0.2s ease;
    user-select: none;
    border-left: 4px solid transparent;
    box-sizing: border-box;
}

.sidebar-section-header:hover,
.sidebar-section-header.expanded,
.sidebar-section:has(.sidebar-selected-chip) .sidebar-section-header {
    background-color: #ffffff;
    border-left-color: #1976d2;
    color: #4a5568;
}

.sidebar-chevron {
    font-size: 11px;
    color: inherit;
    opacity: 0.55;
    transition: transform 0.2s ease;
}

.sidebar-section-header.expanded .sidebar-chevron {
    transform: rotate(90deg);
}

/* Selected filter chips — always visible between header and expand panel */
.sidebar-section > .sidebar-selected-items {
    flex-shrink: 0;
}

.sidebar-selected-items {
    display: flex;
    flex-direction: column;
}

.sidebar-selected-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    height: auto;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: #6b7280;
    background-color: #ffffff;
    border-top: 1px solid #e8e8e8;
    border-left: 4px solid #1976d2;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
}

.sidebar-chip-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.sidebar-chip-left span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

/* Category chips: span is direct child of .sidebar-selected-chip */
.sidebar-selected-chip > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

/* Match compact chip / filter row scale */
.sidebar-chip-color {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar-chip-cert-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.sidebar-chip-remove {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    padding: 0 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    align-self: stretch;
    max-height: 40px;
}

.sidebar-chip-remove:hover {
    color: #4a5568;
}

/* Expandable filter content inside sidebar sections */
.sidebar-expand-content {
    display: none;
    flex-direction: column;
    background-color: #ffffff;
    overflow: hidden;
}

.sidebar-expand-content.expanded {
    display: flex;
    flex-shrink: 0;
}

.sidebar-filter-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-filter-list {
        scroll-behavior: auto;
    }
}

.sidebar-sub-label {
    padding: 8px 12px 4px;
    font-size: 10px;
    font-weight: 600;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sidebar-filter-search {
    margin: 2px 10px 6px;
    padding: 0 12px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    box-sizing: border-box;
    border: 1px solid #c0c0c0;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    background-color: #fff;
    flex-shrink: 0;
}

.sidebar-filter-search:focus {
    outline: none;
    border-color: #1976d2;
}

.sidebar-filter-item {
    display: flex;
    align-items: center;
    min-height: 36px;
    height: auto;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: #6b7280;
    gap: 8px;
    cursor: pointer;
    transition: border-left-color 0.15s ease;
    background-color: #ffffff;
    border-left: 4px solid transparent;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
}

.sidebar-filter-item:hover {
    background-color: #ffffff;
    border-left-color: #1976d2;
    color: #4a5568;
}

.sidebar-filter-item.selected {
    background-color: #ffffff;
    border-left-color: #1976d2;
    color: #4a5568;
}

.sidebar-filter-item .tab-color {
    width: 12px;
    height: 12px;
}

/* Certification thumbnails in shop sidebar filter (fixed square) */
.sidebar-filter-item .sidebar-cert-swatch {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sidebar-filter-item .sidebar-cert-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.sidebar-filter-item .tab-checkbox {
    display: none;
}

.sidebar-filter-item .tab-checkbox:checked + .tab-color::after {
    content: '✕';
    font-size: 10px;
}

/* Brand / certification rows in admin product form picker (image + label) */
.sidebar-filter-item--brand,
.sidebar-filter-item--cert {
    min-height: 36px;
    height: auto;
}

.sidebar-brand-logo {
    height: 16px;
    max-height: 16px;
    max-width: min(100%, 140px);
    width: auto;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 1;
}

/* Match .sidebar-brand-logo in filter list */
.sidebar-brand-chip-img {
    height: 16px;
    max-height: 16px;
    max-width: min(100%, 140px);
    width: auto;
    object-fit: contain;
    object-position: left center;
}

/* Admin add/edit product: brand + cert picker thumbs share 16px height, auto width */
.page-admin .admin-product-form .sidebar-picker-ref-img,
.page-admin .admin-product-form .sidebar-cert-picker-img {
    max-height: 16px;
    max-width: min(100%, 140px);
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
    display: block;
}

.page-admin .admin-product-form .sidebar-brand-logo {
    max-height: 16px;
}

.page-admin .admin-product-form .sidebar-brand-chip-img {
    max-height: 16px;
}

.sidebar-chip-left--brand {
    flex: 1;
    min-width: 0;
}

.sidebar-filter-item .tab-checkbox:checked + .sidebar-cert-swatch::after {
    content: '✕';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.55);
    background: rgba(255, 255, 255, 0.65);
}

.sidebar-filter-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}

/* Flags: fixed height, width follows aspect ratio (sidebar + product cards) */
.sidebar-country-flag {
    height: 10px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
    border: 1px solid #d0d0d0;
    display: block;
    box-sizing: content-box;
}

.product-flag {
    height: 10px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
    border: 1px solid #d0d0d0;
    display: block;
    box-sizing: content-box;
}

/* Exactly 4px between flag and country name (sidebar chips are flag + span only) */
.sidebar-chip-left:has(> .sidebar-country-flag) {
    gap: 4px;
}

/* Filter rows: checkbox | flag | country — row gap is 8px; pull span 4px closer for 4px flag-to-name */
.sidebar-filter-item .sidebar-country-flag {
    margin-right: -4px;
}

/* Sidebar Dropdown Container */
.sidebar-dropdown-container {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    background-color: #f0f0f0;
}

.sidebar-dropdown-container.expanded {
    display: flex;
}

.sidebar-subsection {
    display: flex;
    flex-direction: column;
    padding-left: 16px;
}

.sidebar-subsection-header {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    background-color: #f0f0f0;
    border-bottom: 1px solid #d0d0d0;
    box-sizing: border-box;
}

.sidebar-filter-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.sidebar-filter-items .sidebar-filter-item {
    min-height: 36px;
    height: auto;
    padding: 4px 12px;
}

.sidebar-filter-item.selected .remove-filter-btn {
    display: flex !important;
}

.remove-filter-btn {
    background: none;
    border: none;
    padding: 0 4px;
    margin: 0 0 0 auto;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
    display: none;
}

.remove-filter-btn:hover {
    color: #6B7280;
}

/* Sidebar Dropdown */
.sidebar-dropdown {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--app-sidebar-width);
    height: 100%;
    background-color: #fafafa;
    border-right: 1px solid #d0d0d0;
    flex-direction: column;
    z-index: 101;
}

.sidebar-dropdown.active {
    display: flex;
}

.sidebar-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    border-bottom: 1px solid #d0d0d0;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.dropdown-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-close-btn:hover {
    color: inherit;
}

.sidebar-dropdown-search {
    padding: 12px 16px;
    flex: 0 0 auto;
    border-bottom: 1px solid #d0d0d0;
}

.dropdown-search-input {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
}

.dropdown-search-input:focus {
    outline: none;
    border-color: #1976d2;
}

.dropdown-search-input::placeholder {
    color: #999;
}

.sidebar-dropdown-items {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}

.dropdown-item:hover {
    background-color: transparent;
    color: #4a5568;
}

.dropdown-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.flag{
    height: 580px;
    width: 960px;
}

.logo {
    display: flex;
    flex-direction: row;
    height: 48px;
    width: 48px;
    box-shadow: none;
}

.tab-cell {
    height: calc(100% / 6);
    width: 100%;
}

.tab {
    width: 100%;
}

/* Color classes */
.first {
    background-color: #D0FECE;
}

.second {
    background-color: #9EECEB;
}

.third {
    background-color: #7FC3FF;
}

.fourth {
    background-color: #F2B8FF;
}

.fifth {
    background-color: #F7DFFF;
}

.tab.first {
    height: 20%;
}

.tab.second {
    height: 20%;
}

.tab.third {
    height: 20%;
}

.tab.fourth {
    height: 20%;
}

.tab.fifth {
    height: 20%;
}


.tabs-table {
    width: 100%;
    border-collapse: collapse;
}

.tabs-table tr {
    border: none;
}


.tab-checkbox {
    display: none;
}

.tab-color {
    width: 20px;
    height: 20px;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-checkbox:checked + .tab-color::after {
    content: '✕';
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
}

/* Selected Tabs Display */
.selected-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    width: var(--app-sidebar-width);
    order: 2;
    border-left: 1px solid #ddd;
    overflow-y: auto;
    background-color: #f0f0f0;
}

.selected-tabs.has-tabs {
    display: flex;
}

.selected-tabs-title {
    flex: 0 0 auto;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #4a5568;
    border-bottom: 1px solid #ddd;
    background-color: #f9f9f9;
}

.selected-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    color: #4a5568;
    width: 100%;
    justify-content: space-between;
}

.selected-tab-item .remove-btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
}

.selected-tab-item .remove-btn:hover {
    color: #4a5568;
}

.selected-tab-color {
    width: 16px;
    height: 16px;
    border: none;
}

/* Product Cards — each card column is at least 320px (reflows with auto-fit).
   Grid lives inside .shop-products-scroll (scroll on column, not on this element). */
#products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    --shop-card-grid-gap: 16px;
    gap: var(--shop-card-grid-gap);
    row-gap: var(--shop-card-grid-gap);
    column-gap: var(--shop-card-grid-gap);
    align-items: start;
    align-content: start;
    justify-items: stretch;
    grid-auto-rows: auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    scroll-margin-top: 12px;
}

.product-card {
    container-type: inline-size;
    container-name: product-card;
    /* Fluid scale from card inline size (1cqi = 1% of card width) */
    --pc-pad: 8px;
    --pc-stack-gap: clamp(3px, 0.85cqi, 6px);
    --pc-inline-gap: clamp(4px, 1.2cqi, 8px);
    --pc-fs-cat: clamp(8px, 2.5cqi, 13px);
    --pc-fs-name: clamp(9px, 2.6cqi, 15px);
    --pc-fs-top: clamp(10px, 2.7cqi, 13px);
    --pc-cert-h: clamp(14px, 4.75cqi, 22px);
    --pc-actions-h: clamp(18px, 5.75cqi, 26px);
    --pc-heart: clamp(16px, 5.5cqi, 24px);
    --pc-heart-icon: clamp(14px, 4.75cqi, 20px);
    --pc-brand-h: clamp(18px, 6.75cqi, 32px);
    --pc-brand-slot: min(32cqi, 110px);
    --pc-buy-h: clamp(26px, 8cqi, 34px);
    --pc-buy-fs: clamp(10px, 2.75cqi, 13px);
    --pc-buy-minw: clamp(72px, 22cqi, 100px);
    --pc-buy-pad-x: clamp(8px, 2cqi, 14px);
    aspect-ratio: 1;
    /* Height from width; min-height:auto so aspect-ratio isn’t collapsed by grid/flex min-size rules */
    min-width: 320px;
    min-height: auto;
    height: auto;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    width: 100%;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: row;
    overflow: visible;
    cursor: help;
    position: relative;
    z-index: 0;
    max-width: 560px !important;
}

.product-card:hover,
.product-card:focus-within {
    z-index: 100;
}

.product-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: #e5e7eb;
    transform: translateY(-2px);
}

/* Main content: product cards use --grid — 8% top / 82% image / 10% bottom (made-in + certs + heart | image | brand + text + buy) */
.product-card .product-main-content {
    padding: var(--pc-pad);
    gap: var(--pc-stack-gap);
}

.product-main-content {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    background-color: white;
    position: relative;
    box-sizing: border-box;
}

.product-main-content--grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 8% minmax(0, 82%) 10%;
    gap: 0;
}

.product-main-content--grid .product-top-section {
    grid-row: 1;
    grid-column: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    overflow: visible;
}

.product-main-content--grid .product-image-section {
    grid-row: 2;
    grid-column: 1;
    flex: none;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    min-width: 0;
    align-self: stretch;
    justify-self: stretch;
    box-sizing: border-box;
}

.product-main-content--grid .product-bottom-section {
    grid-row: 3;
    grid-column: 1;
    min-height: 0;
    align-self: stretch;
}

/* Top band: Made in + flag (left) | certs + heart (right, certs just left of heart) — flag height matches label text */
.product-card .product-top-inner {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: var(--pc-inline-gap);
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.product-card .product-top-leading {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--pc-inline-gap);
    min-width: 0;
    flex: 1 1 auto;
    /* visible so Made in ::after tooltip isn’t clipped (tab tooltips sit outside overflow:hidden ancestors) */
    overflow: visible;
    font-size: var(--pc-fs-top);
    line-height: 1.2;
}

.product-card .product-top-trailing {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pc-inline-gap);
    flex: 0 0 auto;
    min-width: 0;
}

.product-card .product-top-leading .product-made-in-compact {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 0.85cqi, 6px);
    box-sizing: border-box;
    line-height: 1.2;
    font-size: inherit;
}

.product-card .product-top-leading .product-made-in-compact .made-in-label {
    font-size: inherit;
    line-height: 1.2;
    display: inline;
    padding-right: 0;
}

.product-card .product-top-leading .product-made-in-compact .product-flag {
    width: auto;
    height: 1em;
    max-height: 1em;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.product-card .product-top-inline-certs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(52cqi, 220px);
    overflow: visible;
}

.product-card .product-cert-row--card-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pc-inline-gap);
    height: var(--pc-cert-h);
    min-width: min-content;
    max-width: none;
}

.product-card .product-cert-link {
    height: 100%;
    display: inline-flex;
    align-items: center;
}

.product-card .product-top-inline-certs .product-cert-icon {
    height: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    flex-shrink: 0;
}

.product-card .product-top-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--pc-actions-h);
    height: var(--pc-actions-h);
    box-sizing: border-box;
}

.product-card .product-top-actions .favorite-heart {
    width: var(--pc-heart);
    height: var(--pc-heart);
    min-width: var(--pc-heart);
    min-height: var(--pc-heart);
}

.product-card .product-top-actions .favorite-heart-icon {
    width: var(--pc-heart-icon);
    height: var(--pc-heart-icon);
}

/* Bottom band: brand (left) | category + name | buy */
.product-card .product-bottom-section {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    box-sizing: border-box;
    column-gap: var(--pc-inline-gap);
    padding: 0;
    min-width: 0;
}

.product-card .product-brand--bottom-bar {
    flex-shrink: 0;
    min-width: 0;
    justify-self: start;
}

.product-card .product-brand--bottom-bar .product-brand-logo-slot {
    max-width: var(--pc-brand-slot);
}

.product-card .product-brand--bottom-bar .product-brand-img {
    height: var(--pc-brand-h);
    max-height: var(--pc-brand-h);
}

.product-card .product-bottom-text {
    display: flex;
    flex-direction: column;
    gap: clamp(1px, 0.35cqi, 3px);
    justify-content: center;
    min-width: 0;
}

.product-card .product-bottom-section .product-card-category-line {
    font-size: var(--pc-fs-cat);
    line-height: 1.25;
}

.product-card .product-bottom-section .product-name {
    margin: 0;
    font-size: var(--pc-fs-name);
    line-height: 1.2;
    font-weight: 300;
    color: #6b7280;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
}

/* Favorite heart button (inline next to category) */
.favorite-heart {
    background: none;
    border: none;
    cursor: pointer;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.favorite-heart:hover {
    opacity: 0.8;
    transform: scale(1.15);
}

.favorite-heart.favorited {
    opacity: 1;
}

.favorite-heart-icon {
    width: 18px;
    height: 18px;
}

.product-card .favorite-heart {
    width: var(--pc-heart);
    height: var(--pc-heart);
}

.product-card .favorite-heart-icon {
    width: var(--pc-heart-icon);
    height: var(--pc-heart-icon);
}

.product-category-row {
    display: none;
}

.modal-header-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
}

.modal-header-brand-line {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

/* Logo (left) + buy (right) */
.modal-header-brand-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.modal-header-brand {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.modal-header-brand-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.modal-header-brand .modal-brand {
    margin: 0;
    line-height: 0;
}

.modal-header-sub {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.modal-header-brand-line > .modal-header-sub {
    margin: 0;
}

/* Product title */
.modal-header-title-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.modal-header-title-row .modal-product-name--header {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Legacy block: kept empty for older snapshots; title stack now uses .modal-header-title-row */
.modal-header-title-block {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.modal-header-brand-line .modal-header-title-block .modal-product-name--header {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
}

.modal-header-brand-line .modal-heart-btn {
    flex: 0 0 auto;
    margin: 0;
}

/* Article embed: decorative heart beside category line */
.modal-header-sub .modal-header-embed-heart {
    flex: 0 0 auto;
    align-self: center;
}

.modal-header-sub .modal-heart-btn {
    flex: 0 0 auto;
    margin: 0;
    align-self: center;
}

.modal-header-sub .modal-category {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    letter-spacing: 0.6px;
}

.modal-header-main {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 6px;
}

.modal-product-name--header {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #4a5568;
    line-height: 1.25;
    min-width: 0;
}

.modal-header-description {
    width: 100%;
    min-width: 0;
}

.modal-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}

.modal-header-top .favorite-heart {
    width: 22px;
    height: 22px;
}

.modal-header-top .favorite-heart-icon {
    width: 20px;
    height: 20px;
}

/* Active state for favorites header icon */
.header-icon.active {
    background-color: #e0e0e0;
}

/* Empty favorites message */
.empty-favorites {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: #999;
    font-size: 14px;
}

/* Top row in main column only: spacer | made-in (optical center) | heart */
.product-top-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 12px;
    color: #6B7280;
    padding: 0 0 2px;
    min-height: 0;
    overflow: hidden;
}

.product-top-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
    min-width: 0;
}

.product-top-head-spacer {
    min-width: 0;
}

.product-top-center-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    justify-self: center;
    text-align: center;
}

.product-top-center-stack .product-made-in-compact {
    justify-content: center;
    gap: 4px;
}

.product-top-center-stack .product-made-in-compact .made-in-label {
    padding-right: 0;
}

.product-top-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
    justify-self: end;
}

.product-top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-height: 22px;
}

.product-top-left {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.product-top-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-card-category-line {
    display: block;
    font-size: 10px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.product-card-category-line--empty {
    min-height: 1em;
}

.product-card-category-link {
    color: #1976d2;
    font-weight: 500;
    text-decoration: none;
}

.product-card-category-link:hover {
    text-decoration: underline;
}

.product-card-category-nolink {
    color: #1976d2;
    font-weight: 500;
    cursor: default;
}

.product-card-category-sep {
    color: #9ca3af;
    user-select: none;
}

.product-made-in {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: 0;
    flex-wrap: nowrap;
}

.product-top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex-shrink: 0;
    min-width: 0;
}

.product-made-in-compact {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 11px;
    color: #64748b;
    min-width: 0;
}

.product-made-in-compact[data-tooltip] {
    position: relative;
}

.product-made-in-compact .made-in-label {
    font-size: 11px;
    font-weight: 500;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
    margin: 0;
    padding-right: 4px;
}

.product-made-in-compact .product-flag {
    width: 16px;
    height: 11px;
    flex-shrink: 0;
    margin-left: 0;
}

.product-category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.made-in-label {
    font-size: 10px;
    font-weight: 600;
    flex: 0 0 3rem;
    width: 3rem;
    min-width: 3rem;
}

/* Fixed column so country names line up across product cards */
.product-flag-slot {
    flex: 0 0 1.125rem;
    width: 1.125rem;
    min-width: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.product-made-in .product-flag {
    max-width: 100%;
    width: auto;
}

.country-name {
    font-size: 11px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Image section — fills remaining space */
.product-image-section {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    background: #fff;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Bottom: category + name (left) | buy (right) */
.product-bottom-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
    padding-top: 4px;
}

.product-bottom-text {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.product-bottom-section .product-card-category-line {
    text-align: left;
}

.product-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 0;
    flex-shrink: 0;
    min-width: 0;
    line-height: 1.35;
    flex-wrap: nowrap;
}

/* Logo column: 32px-tall image, bounded width so name sits to the right */
.product-brand-logo-slot {
    flex: 0 0 auto;
    width: auto;
    min-width: 32px;
    max-width: 104px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.product-brand-logo-slot--empty {
    flex-shrink: 0;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
}

.product-brand-img {
    height: 32px;
    max-height: 32px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

.product-brand-logo-link {
    display: inline-block;
    line-height: 0;
}

.product-brand-logo-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
}

.product-cert-link {
    display: inline-flex;
    line-height: 0;
}

.product-cert-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
}

.product-cert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    align-content: center;
    justify-content: center;
    row-gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.product-cert-row--stacked {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 5px;
    row-gap: 5px;
}

.product-cert-icon {
    height: 32px;
    width: auto;
    max-height: 32px;
    object-fit: contain;
}

.product-category {
    display: none;
}

.product-name {
    margin: 0;
    font-size: 11px;
    color: #6b7280;
    font-weight: 300;
    min-width: 0;
    /* Two lines under made-in / category / heart row */
    line-height: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    text-align: left;
}

.product-bottom-text .product-name {
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
}

/* Primary buy actions: same formatting as header .header-login-btn */
.buy-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 12px;
    margin: 0;
    box-sizing: border-box;
    border: none;
    background: #1976d2;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    transition: background-color 0.2s ease;
    align-self: center;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

/* Product cards: width hint only — rest matches .buy-button / Sign in */
.product-card .product-bottom-section .buy-button {
    width: auto;
    min-width: var(--pc-buy-minw);
    max-width: none;
    flex: 0 0 auto;
    align-self: end;
    justify-self: end;
    height: var(--pc-buy-h);
    min-height: var(--pc-buy-h);
    max-height: var(--pc-buy-h);
    padding: 0 var(--pc-buy-pad-x);
    font-size: var(--pc-buy-fs);
    letter-spacing: clamp(0.15px, 0.06cqi, 0.35px);
}

.product-card .product-bottom-section > .buy-button {
    align-self: end;
    justify-self: end;
}

.product-card .buy-button:hover {
    background: #1565c0;
    box-shadow: none;
}

.product-card .buy-button:active {
    background: #0d47a1;
    box-shadow: none;
}

.product-card .buy-button:focus {
    outline: none;
}

.product-card .buy-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.product-card .product-bottom-section .buy-button--affiliate {
    background: #2e7d32;
    color: #fff;
    border: none;
    box-shadow: none;
    text-shadow: none;
    font-weight: 300;
    letter-spacing: clamp(0.15px, 0.06cqi, 0.35px);
}

.product-card .product-bottom-section .buy-button--affiliate:hover {
    background: #1b5e20;
    box-shadow: none;
}

.product-card .product-bottom-section .buy-button--affiliate:active {
    background: #154d18;
    box-shadow: none;
}

.buy-button:hover {
    background: #1565c0;
    box-shadow: none;
}

.buy-button:active {
    background: #0d47a1;
    box-shadow: none;
}

.buy-button:focus {
    outline: none;
}

.buy-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.buy-button--affiliate {
    background: #2e7d32;
    color: #fff;
    border: none;
    box-shadow: none;
    text-shadow: none;
    font-weight: 300;
    letter-spacing: 0.3px;
}

.buy-button--affiliate:hover {
    background: #1b5e20;
    box-shadow: none;
}

.buy-button--affiliate:active {
    background: #154d18;
    box-shadow: none;
}

.affiliate-disclosure {
    padding: 12px;
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-left: 3px solid #d0d0d0;
    border-radius: 0;
}

.affiliate-disclosure-text {
    margin: 4px;
    font-size: 10px;
    line-height: 1.55;
    color: #4a5568;
}

.affiliate-disclosure--page {
    margin-bottom: 16px;
    max-width: 640px;
}

.affiliate-disclosure--page .affiliate-disclosure-text {
    font-size: 14px;
    line-height: 1.6;
}

/* Home (and any top-of-page) affiliate strip: space before hero/sections */
.page-wrap--about > .affiliate-disclosure:first-child {
    margin-bottom: 20px;
}

.buy-button--disclosure-sample {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 4px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 8px;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
}

/* Tabs section — fixed share of card; always two stacked bands */
.product-tabs {
    flex: 0 0 18%;
    min-width: 44px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    min-height: 0;
    border-left: 1px solid #e2e8f0;
    box-sizing: border-box;
    overflow: visible;
    z-index: 1;
}

.product-tab-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: visible;
    position: relative;
    z-index: 0;
}

.product-tab-section:has(.product-tab-item:hover) {
    z-index: 20;
}

.product-tab-items-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    min-height: 0;
    overflow: visible;
}

.product-tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
    font-weight: 500;
    color: transparent;
    cursor: pointer;
    text-align: center;
    border: none;
    position: relative;
    transition: all 0.2s ease;
    overflow: visible;
    min-height: 0;
    box-sizing: border-box;
}

/* Dark tooltip — vertical tabs flip LEFT (so they don't escape the card),
   made-in row stays to the right of its trigger. */
.product-tab-item::after,
.product-made-in-compact[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    white-space: nowrap;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    border-radius: 0;
    box-sizing: border-box;
    max-width: min(200px, 40vw);
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-tab-item::after {
    right: 100%;
    left: auto;
    margin-right: 6px;
}

.product-made-in-compact[data-tooltip]::after {
    left: 100%;
    right: auto;
    margin-left: 6px;
}

.product-tab-item:hover,
.product-made-in-compact[data-tooltip]:hover {
    z-index: 99999;
}

.product-tab-item:hover::after,
.product-made-in-compact[data-tooltip]:hover::after {
    opacity: 1;
}

/* Product detail modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-card {
    background: #fff;
    width: min(920px, 96vw);
    max-width: 96vw;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: none;
    border: 1px solid #d0d0d0;
    position: relative;
}

.modal-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}

.modal-image-col {
    flex: 0 0 auto;
    width: min(400px, 42vw);
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.modal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

a.modal-image-link {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    line-height: 0;
    text-decoration: none;
    color: inherit;
    outline: none;
}

a.modal-image-link:focus-visible {
    box-shadow: inset 0 0 0 2px #1976d2;
    border-radius: 2px;
}

.modal-details-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Product detail overlay: full-width header, then fixed 50/50 content split */
#product-modal-overlay .modal-header-top {
    position: relative;
    padding: 16px 16px 14px;
    border-bottom: 1px solid #eee;
    margin: 0;
}

#product-modal-overlay .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0;
}

#product-modal-overlay .modal-image-col {
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 1 / 1;
}

#product-modal-overlay .modal-details-col {
    min-width: 0;
    min-height: 0;
    padding: 12px 16px 16px;
}

#product-modal-overlay .modal-header-brand-actions .modal-buy-button {
    min-width: 140px;
}

.modal-category {
    font-size: 11px;
    font-weight: 600;
    color: #1976d2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-category .product-card-category-line {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.modal-category .product-card-category-link,
.modal-category .product-card-category-nolink {
    color: inherit;
    font-weight: inherit;
}

.modal-product-name {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #4a5568;
    line-height: 1.25;
}

.modal-brand {
    margin: 0;
    font-size: 14px;
    color: #d32f2f;
    font-weight: 600;
    min-height: 1.2em;
}

.modal-brand-img {
    display: block;
    height: 32px;
    width: auto;
    max-height: 32px;
    max-width: min(320px, 72vw);
    object-fit: contain;
    object-position: left center;
    margin: 0;
}

.modal-description-section {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.modal-description-heading {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.modal-description {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.modal-description.is-empty {
    color: #999;
    font-style: italic;
}

/* Expanded product modal / article embed: stacked flat sections + line rows */
.modal-metadata-stack {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: none;
    padding-top: 0;
    flex: 1;
    min-height: 0;
}

.modal-metadata-stack--flat {
    gap: 14px;
}

.modal-metadata-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.modal-metadata-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.modal-flat-section {
    margin: 0;
}

.modal-flat-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 6px;
    padding: 0;
}

.modal-flat-section-body {
    margin: 0;
}

.modal-flat-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-flat-section-body--prose {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #4a5568;
    line-height: 1.55;
}

.modal-flat-section-body--prose .modal-description {
    margin: 0;
}

.modal-detail-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #4a5568;
    line-height: 1.45;
}

.modal-detail-line--muted {
    color: #9ca3af;
    font-style: italic;
    font-size: 12px;
}

a.modal-detail-line--link {
    text-decoration: none;
    color: #1565c0;
}

a.modal-detail-line--link:hover {
    text-decoration: underline;
}

.modal-detail-line-dot {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    flex-shrink: 0;
}

.modal-cert-line-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-cert-line-icon {
    height: 22px;
    width: auto;
    max-height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.modal-cert-line-text {
    font-size: 13px;
    color: #4a5568;
}

.modal-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.modal-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #4a5568;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.modal-tag-color {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.modal-cert-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #2e7d32;
    background-color: #e8f5e9;
    border: 1px solid #a5d6a7;
}

a.modal-cert-badge--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.modal-cert-badge--link:hover {
    text-decoration: underline;
}

span.modal-cert-badge--link {
    cursor: pointer;
}

.modal-made-in-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.modal-made-in-country {
    font-size: 13px;
    color: #4a5568;
}

.modal-made-in-flag {
    width: 20px;
    height: 13px;
    flex-shrink: 0;
    object-fit: cover;
}

.modal-cert-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 5px;
    font-size: 11px;
    font-weight: 500;
    color: #2e7d32;
    background-color: #e8f5e9;
    border: 1px solid #a5d6a7;
    max-width: 100%;
    box-sizing: border-box;
}

.modal-cert-inline__img {
    height: 22px;
    width: auto;
    max-height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

a.modal-cert-inline--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.modal-cert-inline--link:hover {
    text-decoration: underline;
}

span.modal-cert-inline--link {
    cursor: pointer;
}

.modal-brand-logo-link {
    display: inline-block;
    line-height: 0;
}

.modal-footer {
    margin-top: auto;
    padding-top: 16px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Match product-card / header primary actions (.buy-button + .header-login-btn) */
.modal-header-brand-actions .header-login-btn {
    margin: 0;
}

@media (max-width: 900px) {
    .modal-metadata-columns {
        grid-template-columns: 1fr;
    }
}

.buy-button.buy-button--neutral {
    background: #eceff1;
    color: #546e7a;
    border: 1px solid #cfd8dc;
    text-shadow: none;
    box-shadow: none;
}

.buy-button.buy-button--neutral:hover {
    background: #cfd8dc;
    color: #37474f;
    border-color: #b0bec5;
    box-shadow: none;
}

    .modal-body {
        flex-direction: column;
    }

    .modal-image-col {
        flex: none;
        width: 100%;
        max-width: none;
        aspect-ratio: 1 / 1;
    }

    #product-modal-overlay .modal-body {
        grid-template-columns: 1fr;
    }
}


/* -------------------------------------------------------------------------- */
/* Inner pages (body.page-scroll): document scroll on <html>; shop pages use .shop-layout (overflow hidden on html). */
/* .tabbed-doc-scroll is set in base.html when body.page-scroll and no .shop-layout (see inline script). */
/* -------------------------------------------------------------------------- */
html.tabbed-doc-scroll,
html:has(body.page-scroll) {
    height: auto;
    min-height: 100%;
    min-height: 100dvh;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html.tabbed-doc-scroll body,
html:has(body.page-scroll) body,
body.page-scroll {
    display: block;
    height: auto;
    min-height: 0;
    overflow-x: hidden !important;
    /* Scroll the document on <html> so tall pages (e.g. landing) aren’t clipped on desktop */
    overflow-y: visible;
    min-width: 360px;
}

/* Category + search: lock document to one viewport. Shop pages also match
   html:has(body.page-scroll), which sets body { height:auto } — same specificity as a plain
   html:has(.shop-layout) body rule, so the cascade can leave the body content-sized (~half the
   screen). Pin with body.page-scroll.page-shop and min-height as well as height. */
html:has(.shop-layout) {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

html:has(.shop-layout) body.page-scroll.page-shop {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

/* Profile v2 (favorites + settings): document scrolls on <html>; pages are not inside .shop-layout. */
html:has(.page-wrap--profile-v2) {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
}

html:has(.page-wrap--profile-v2) body.page-scroll {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
}

.header-icon img {
    width: 24px;
    height: 24px;
}

/* About, articles, contact, legal */
.page-wrap {
    max-width: 900px;
    margin-left: var(--app-sidebar-width);
    margin-right: var(--app-sidebar-width);
    padding: 30px;
}

/* About routes: no 900px cap; inner .landing is --header-main-band-width (header dropdowns / profile v2) */
.page-wrap.page-wrap--about {
    max-width: none;
    /* Match profile v2: no horizontal padding on shell so the band aligns; inset lives on .landing */
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Not index (/--landing): outer padding was cleared — inset the band like page-wrap--landing */
.page-wrap.page-wrap--about:not(.page-wrap--landing) > .landing {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
}

/* Prose/forms were capped at 640px / 440px — fill the main band like profile content */
.page-wrap--about .legal-prose {
    max-width: none;
}

.page-wrap--about .page-contact-lead {
    max-width: none;
}

.page-wrap--about .page-contact-form {
    max-width: none;
}

.page-wrap--about .affiliate-disclosure--page {
    max-width: none;
}

/* Landing (index): fixed typography/size (same at all widths); horizontal inset only via margin */
.page-wrap.page-wrap--landing {
    max-width: none;
    padding: 0;
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    padding-top: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    box-sizing: border-box;
}

.about-hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-hero__logo-slot {
    width: calc((100% - 24px) / 4);
    min-width: 160px;
    max-width: 360px;
    aspect-ratio: 1;
    margin: 0 auto 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.about-hero__logo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
}

.page-wrap--about .about-section {
    max-width: none;
    width: 100%;
}

.page-wrap--about .about-section:first-of-type {
    margin-top: 0;
}

.page-wrap--about .about-disclosures {
    max-width: none;
    width: 100%;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}

.page-contact-lead {
    margin: 0 0 20px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
    max-width: 42rem;
}

.page-search-results {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.page-search-results__item {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
}

.page-search-results__name {
    font-weight: 500;
    color: #4a5568;
}

.page-search-results__meta {
    font-size: 13px;
    color: #6b7280;
}

.page-lead {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.5;
}

.page-lead--relaxed {
    line-height: 1.6;
    max-width: 640px;
}

.page-lead--spaced {
    margin-bottom: 24px;
}

.page-lead a {
    color: #1976d2;
    font-weight: 500;
}

.page-lead--flush {
    margin: 0;
}

.page-lead--error {
    color: #c62828;
}

/* Contact page form */
.page-contact-form {
    margin-top: 8px;
    max-width: 440px;
}

.page-contact-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.page-contact-form label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.page-contact-form input[type="text"],
.page-contact-form select,
.page-contact-form textarea {
    padding: 8px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 13px;
    font-family: inherit;
    color: #4a5568;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.page-contact-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.page-contact-form input[type="text"]:focus,
.page-contact-form select:focus,
.page-contact-form textarea:focus {
    outline: none;
    border-color: #1976d2;
}

.page-contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.page-contact-form__actions {
    margin-top: 4px;
}

.page-contact-form__submit {
    padding: 10px 20px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-contact-form__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.page-contact-form__status {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.45;
}

.page-contact-form__status--ok {
    color: #2e7d32;
}

.page-contact-form__status--error {
    color: #c62828;
}

.page-contact-form__alt {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7280;
}

.page-contact-form__alt-email {
    color: #1976d2;
    font-weight: 600;
    text-decoration: none;
}

.page-contact-form__alt-email:hover {
    text-decoration: underline;
}

.page-login-title {
    font-size: 22px;
    font-weight: 600;
    color: #4a5568;
    margin: 0 0 8px;
    letter-spacing: 0.2px;
}

.page-login-lead {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    max-width: 440px;
}

.page-login-form {
    margin-top: 0;
    max-width: 440px;
}

.page-login-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.page-login-form label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.page-login-form input[type="email"],
.page-login-form input[type="text"] {
    padding: 8px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 13px;
    font-family: inherit;
    color: #4a5568;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.page-login-form input:focus {
    outline: none;
    border-color: #1976d2;
}

.page-login-form--code {
    margin-top: 8px;
}

.page-login-form__code-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.page-login-back-btn {
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #1976d2;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
}

.page-login-back-btn:hover {
    color: #1565c0;
}

.about-section {
    margin-top: 28px;
    max-width: 640px;
}

.about-section__title {
    font-size: 15px;
    font-weight: 600;
    color: #4a5568;
    margin: 0 0 10px 0;
    letter-spacing: 0.2px;
}

.about-section__body {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
}

.about-section__body p {
    margin: 0 0 12px 0;
}

.about-section__body p:last-child {
    margin-bottom: 0;
}

.about-section__body ul,
.about-section__body ol {
    margin: 0 0 12px 0;
    padding-left: 1.35em;
}

.about-section__body li {
    margin-bottom: 6px;
}

.about-section__body li:last-child {
    margin-bottom: 0;
}

.about-section__body a {
    color: #1976d2;
    font-weight: 500;
}

.about-login-text-link {
    display: inline;
    margin: 0 0.15em;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #1976d2;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    vertical-align: baseline;
}

.about-login-text-link:hover {
    color: #1565c0;
}

.about-login-text-link:focus {
    outline: none;
}

.about-login-text-link:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
    border-radius: 2px;
}

button.about-login-text-link {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.legal-prose {
    max-width: 640px;
}

.faq-section-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #4a5568;
    margin: 1.5rem 0 0.75rem;
    letter-spacing: -0.02em;
}

.faq-section-heading:first-child {
    margin-top: 0;
}

.about-disclosures {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    max-width: 640px;
}

.about-disclosures__heading {
    font-size: 15px;
    font-weight: 600;
    color: #4a5568;
    margin: 0 0 14px 0;
    letter-spacing: 0.2px;
}

.about-disclosure {
    border: 1px solid #e5e7eb;
    border-radius: 0;
    margin-bottom: 8px;
    background: #fff;
}

.about-disclosure:last-child {
    margin-bottom: 0;
}

.about-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #fafafa;
}

.about-disclosure__summary::-webkit-details-marker {
    display: none;
}

.about-disclosure__summary::marker {
    content: '';
}

.about-disclosure__summary::after {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-bottom: 3px;
}

.about-disclosure[open] .about-disclosure__summary::after {
    transform: rotate(-135deg);
    margin-bottom: -1px;
}

.about-disclosure[open] .about-disclosure__summary {
    border-bottom: 1px solid #e5e7eb;
}

.about-disclosure__body {
    padding: 12px 14px 14px;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.5;
}

.about-disclosure__body a {
    color: #1976d2;
    font-weight: 500;
    text-decoration: none;
}

.about-disclosure__body a:hover {
    text-decoration: underline;
}

/* Home: inline category links (centered; same targets as header submenu) */
.home-category-inline-nav {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 14px;
    line-height: 1.65;
    color: #6B7280;
    text-align: center;
}

.home-category-inline-label {
    font-weight: 600;
    color: #4a5568;
    margin-right: 6px;
    display: inline;
}

.home-category-inline-link {
    color: #1976d2;
    font-weight: 500;
    text-decoration: none;
}

.home-category-inline-link:hover {
    text-decoration: underline;
}

.home-category-inline-sep {
    color: #9ca3af;
    user-select: none;
}

/* -------------------------------------------------------------------------- */
/* Landing page (/) */
/* -------------------------------------------------------------------------- */
.landing {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 10px;
    box-sizing: border-box;
}

@media (max-width: 1179px) {
    /* Side chrome is overlay/fullscreen — inset content instead of 15% sidebar band */
    .page-wrap {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.landing-hero {
    position: relative;
    text-align: center;
    padding: 12px 12px 14px;
    margin: 0;
    border-radius: 0;
}

.landing-hero__glow {
    position: absolute;
    inset: 0;
    max-width: 480px;
    width: 100%;
    height: 240px;
    margin: 0 auto;
    background: none;
    pointer-events: none;
    z-index: 0;
}

.landing-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-logo__img {
    box-sizing: border-box;
    display: block;
    width: min(124px, 28vw);
    min-width: 96px;
    max-width: 152px;
    aspect-ratio: 526 / 516;
    height: auto;
    margin: 0 auto 14px;
    padding: 0;
    object-fit: contain;
    object-position: center;
    border: none;
    box-shadow: none;
}

.profile-user-avatar {
    box-sizing: border-box;
    display: block;
    width: min(124px, 28vw);
    min-width: 96px;
    max-width: 152px;
    aspect-ratio: 1;
    height: auto;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    border: none;
    box-shadow: none;
    border-radius: 50%;
}

/* Homepage hero: fixed 192×192 (matches width/height on <img>; no vw scaling) */
.page-wrap--landing .landing-hero .landing-logo__img {
    flex-shrink: 0;
    width: 192px;
    height: 192px;
    min-width: 192px;
    max-width: 192px;
    min-height: 192px;
    max-height: 192px;
    margin-bottom: 8px;
    aspect-ratio: auto;
    object-fit: contain;
    filter: none;
    transform: translateZ(0);
}

.profile-account-header-left .profile-user-avatar {
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.08));
}

.profile-hero-main .profile-user-avatar {
    margin: 0;
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.08));
}

/* Profile name: static brand gradient */
.profile-display-name--gradient {
    display: block;
    margin: 0 0 8px;
    max-width: 100%;
    word-break: break-word;
    font-size: clamp(1.5rem, 3.8vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    background: linear-gradient(to right, #5A9FD4, #9B8FD8, #B57EDC, #D97AB5, #E8A0BF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #4a5568;
}

/* Animatable colors: mirror static/logo-animated.svg @keyframes laTab0 … laTab4 (8s ease-in-out infinite) */
@property --landing-logo-tab-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: #7eb8e0;
}

@property --landing-logo-tab-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #9b8fd8;
}

@property --landing-logo-tab-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #b57edc;
}

@property --landing-logo-tab-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: #d97ab5;
}

@property --landing-logo-tab-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: #e8a0bf;
}

@keyframes landing-logo-tab-0-anim {
    0%,
    100% {
        --landing-logo-tab-0: #7eb8e0;
    }
    20% {
        --landing-logo-tab-0: #ff6b6b;
    }
    40% {
        --landing-logo-tab-0: #4ecdc4;
    }
    60% {
        --landing-logo-tab-0: #ffe66d;
    }
    80% {
        --landing-logo-tab-0: #c792ea;
    }
}

@keyframes landing-logo-tab-1-anim {
    0%,
    100% {
        --landing-logo-tab-1: #9b8fd8;
    }
    20% {
        --landing-logo-tab-1: #4ecdc4;
    }
    40% {
        --landing-logo-tab-1: #ffe66d;
    }
    60% {
        --landing-logo-tab-1: #c792ea;
    }
    80% {
        --landing-logo-tab-1: #ff6b6b;
    }
}

@keyframes landing-logo-tab-2-anim {
    0%,
    100% {
        --landing-logo-tab-2: #b57edc;
    }
    20% {
        --landing-logo-tab-2: #ffe66d;
    }
    40% {
        --landing-logo-tab-2: #c792ea;
    }
    60% {
        --landing-logo-tab-2: #ff6b6b;
    }
    80% {
        --landing-logo-tab-2: #4ecdc4;
    }
}

@keyframes landing-logo-tab-3-anim {
    0%,
    100% {
        --landing-logo-tab-3: #d97ab5;
    }
    20% {
        --landing-logo-tab-3: #c792ea;
    }
    40% {
        --landing-logo-tab-3: #ff6b6b;
    }
    60% {
        --landing-logo-tab-3: #4ecdc4;
    }
    80% {
        --landing-logo-tab-3: #ffe66d;
    }
}

@keyframes landing-logo-tab-4-anim {
    0%,
    100% {
        --landing-logo-tab-4: #e8a0bf;
    }
    20% {
        --landing-logo-tab-4: #ff6b6b;
    }
    40% {
        --landing-logo-tab-4: #4ecdc4;
    }
    60% {
        --landing-logo-tab-4: #ffe66d;
    }
    80% {
        --landing-logo-tab-4: #7eb8e0;
    }
}

/* Landing hero: horizontal gradient = logo tab column left→right; same cadence as .la-tab-* in logo-animated.svg */
.landing-headline {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 0 8px;
    max-width: none;
    white-space: normal;
    text-wrap: balance;
    --landing-logo-tab-0: #7eb8e0;
    --landing-logo-tab-1: #9b8fd8;
    --landing-logo-tab-2: #b57edc;
    --landing-logo-tab-3: #d97ab5;
    --landing-logo-tab-4: #e8a0bf;
    background-image: linear-gradient(
        to right,
        var(--landing-logo-tab-0),
        var(--landing-logo-tab-1),
        var(--landing-logo-tab-2),
        var(--landing-logo-tab-3),
        var(--landing-logo-tab-4)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation:
        landing-logo-tab-0-anim 8s ease-in-out infinite,
        landing-logo-tab-1-anim 8s ease-in-out infinite,
        landing-logo-tab-2-anim 8s ease-in-out infinite,
        landing-logo-tab-3-anim 8s ease-in-out infinite,
        landing-logo-tab-4-anim 8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .landing-headline {
        animation: none;
        background-image: linear-gradient(
            to right,
            #7eb8e0,
            #9b8fd8,
            #b57edc,
            #d97ab5,
            #e8a0bf
        );
    }
}

@supports not (background-clip: text) {
    .landing-headline {
        background: none;
        -webkit-text-fill-color: unset;
        color: #1976d2;
        animation: none;
    }

    .profile-display-name--gradient {
        background: none;
        -webkit-text-fill-color: unset;
        color: #1976d2;
    }
}

.landing-tagline {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #4a5568;
    margin: 0;
    max-width: 38rem;
    text-wrap: balance;
}

.landing-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

.landing-btn--primary {
    background-color: #1976d2;
    color: #fff;
    box-shadow: none;
}

.landing-btn--primary:hover {
    background-color: #1565c0;
    box-shadow: none;
}

.landing-btn--secondary {
    background-color: #fff;
    color: #4a5568;
    border: 1px solid #d1d5db;
}

.landing-btn--secondary:hover {
    border-color: #1976d2;
    color: #1565c0;
    background-color: #f8fafc;
}

.landing-btn--ghost {
    background: transparent;
    color: #1976d2;
    border: 1px solid transparent;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    font-size: 12px;
}

.landing-btn--ghost:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.landing-section-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin: 0 0 8px;
    text-align: center;
}

.landing-section-lead {
    font-size: 13px;
    line-height: 1.45;
    color: #4b5563;
    margin: 0 auto 10px;
    max-width: 36rem;
    text-align: center;
}

.landing-categories {
    margin-top: 12px;
    margin-bottom: 0;
    padding-top: 0;
}

/* Homepage: dot-separated about + contact row below category grid */
.landing-site-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    margin-top: 12px;
    padding: 0 6px 6px;
    box-sizing: border-box;
    text-align: center;
}

.landing-site-links__a {
    font-size: 12px;
    font-weight: 400;
    color: #1565c0;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}

.landing-site-links__a:hover {
    color: #1565c0;
}

.landing-site-links__a:focus {
    outline: none;
}

.landing-site-links__a:focus-visible {
    color: #1565c0;
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.landing-site-links__dot {
    font-size: 12px;
    font-weight: 400;
    color: #1565c0;
    line-height: 1.4;
    user-select: none;
}

.landing-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.landing-category-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 400;
    color: #1565c0;
    text-decoration: none;
    text-align: center;
    line-height: 1.25;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.landing-category-card:hover {
    border-color: #1976d2;
    color: #1565c0;
    background-color: #ffffff;
    box-shadow: 0 4px 14px rgba(25, 118, 210, 0.12);
}

.landing-category-card:focus {
    outline: none;
}

.landing-category-card:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
    border-color: #1976d2;
}

.landing-category-card:active {
    transform: scale(0.99);
}

/* 667px–900px+ : slight scale-up capped lower than before so one screen fits more comfortably */
@media (min-width: 667px) {
    .page-wrap.page-wrap--landing {
        padding-top: calc(10px + clamp(0px, (100vw - 667px) * 8 / 233, 8px));
        padding-bottom: max(
            calc(12px + clamp(0px, (100vw - 667px) * 8 / 233, 8px)),
            env(safe-area-inset-bottom, 0px)
        );
    }

    .page-wrap--landing .landing {
        padding-bottom: calc(10px + clamp(0px, (100vw - 667px) * 6 / 233, 6px));
    }

    .page-wrap--landing .landing-hero {
        padding: calc(12px + clamp(0px, (100vw - 667px) * 4 / 233, 4px))
            calc(12px + clamp(0px, (100vw - 667px) * 6 / 233, 6px))
            calc(14px + clamp(0px, (100vw - 667px) * 6 / 233, 6px));
    }

    .page-wrap--landing .landing-hero__glow {
        max-width: calc(480px + clamp(0px, (100vw - 667px) * 90 / 233, 90px));
        height: calc(240px + clamp(0px, (100vw - 667px) * 60 / 233, 60px));
    }

    .page-wrap--landing .landing-tagline {
        font-size: calc(13px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
    }

    .page-wrap--landing .landing-section-heading {
        font-size: calc(11px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
        margin-bottom: calc(8px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
    }

    .page-wrap--landing .landing-section-lead {
        font-size: calc(13px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
        margin-bottom: calc(8px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
    }

    .page-wrap--landing .landing-categories {
        margin-top: calc(12px + clamp(0px, (100vw - 667px) * 8 / 233, 8px));
    }

    .page-wrap--landing .landing-category-grid {
        gap: calc(8px + clamp(0px, (100vw - 667px) * 4 / 233, 4px));
    }

    .page-wrap--landing .landing-category-card {
        min-height: calc(48px + clamp(0px, (100vw - 667px) * 12 / 233, 12px));
        padding: calc(8px + clamp(0px, (100vw - 667px) * 3 / 233, 3px))
            calc(10px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
        font-size: calc(12px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
    }

    .page-wrap--landing .landing-site-links {
        margin-top: calc(12px + clamp(0px, (100vw - 667px) * 6 / 233, 6px));
        padding-bottom: calc(6px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
    }

    .page-wrap--landing .landing-site-links__a,
    .page-wrap--landing .landing-site-links__dot {
        font-size: calc(12px + clamp(0px, (100vw - 667px) * 2 / 233, 2px));
    }
}

/* Category + search: row shell. Used only with html:has(.shop-layout) body (flex column) so
   flex:1 1 0 fills space below fixed header/strip; min-height:0 allows nested scroll in columns. */
.shop-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* Fill row via align-self: stretch — avoid height:100%/max-height:100% here; percentage bases
   from .shop-layout are unreliable in nested flex and can resolve to 0. min-height:0 on this
   aside also let the column shrink away. Inner .shop-sidebar-inner keeps min-height:0 for scroll.
   Override global .sidebar { height:100% } so we do not depend on a broken percentage chain. */
.shop-sidebar {
    position: relative;
    align-self: stretch;
    height: auto;
    overflow: hidden;
    flex: 0 0 var(--app-sidebar-width);
    flex-shrink: 0;
    width: var(--app-sidebar-width);
    min-width: min(256px, 100%);
    background-color: #ffffff;
    border-right: 1px solid #d0d0d0;
    box-shadow: 4px 0 32px rgba(90, 159, 212, 0.07);
    box-sizing: border-box;
}

.shop-sidebar-inner {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 616px) {
    /* One hairline at the rail: sidebar already has border-right — drop strip borders on the seam. */
    html:has(.shop-layout) .header-nav-simple-dropdown {
        border-left: none;
    }
    html:has(.shop-layout) .header-categories-dropdown > .header-categories-panel,
    html:has(.shop-layout) .header-search-input-wrapper {
        border-left: none;
    }
}

.shop-main {
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    box-sizing: border-box;
}

/* Shop grid scrolls inside main; footer stays pinned to bottom of the column. */
.page-shop .shop-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-shop .shop-products-area {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

/* Scrollport fills product area width so the vertical scrollbar sits on the far right of this column. */
.page-shop .shop-products-scroll {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 16px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.page-shop .shop-products-scroll > .shop-products-grid {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.page-shop .shop-empty-state {
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
}

.shop-main-header {
    margin-bottom: 14px;
}

.shop-category-heading {
    font-size: 20px;
    font-weight: 600;
    color: #4a5568;
    margin: 0;
    letter-spacing: 0.2px;
}

.shop-products-grid {
    margin-top: 0;
}

/* Inset top/left only — no right/bottom margin; no padding. */
.shop-products-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 16px 0 0 16px;
}

.shop-grid-footer {
    --shop-gf-gap-col: clamp(10px, calc(1.8vw + 4px), 14px);
    --shop-gf-gap-section: clamp(6px, calc(1.2vw + 3px), 12px);
    --shop-gf-gap-tight: clamp(5px, calc(1vw + 2px), 8px);
    --shop-gf-fs: clamp(9px, calc(7px + 0.85vw), 12px);
    /* Fixed 40px-tall bar; controls sized to fit inside (border-box includes border). */
    --shop-gf-h: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--shop-gf-gap-col);
    row-gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 clamp(6px, calc(1vw + 4px), 12px);
    margin-top: 16px;
    /* Bleed past .shop-products-area left margin so top border spans full .shop-main width */
    margin-left: -16px;
    margin-right: 0;
    width: auto;
    border: none;
    border-top: 1px solid #d0d0d0;
    background: #ffffff;
    flex-shrink: 0;
}

.shop-grid-footer__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--shop-gf-gap-section);
    min-width: 0;
    flex-wrap: nowrap;
}

.shop-grid-footer__right {
    grid-column: 2;
    justify-self: end;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--shop-gf-gap-section);
    min-width: 0;
    flex-wrap: nowrap;
}

.shop-grid-footer__sort {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--shop-gf-gap-tight);
    min-width: 0;
    flex-wrap: nowrap;
    flex-shrink: 1;
}

.shop-grid-footer__inline-label {
    flex-shrink: 0;
    font-size: var(--shop-gf-fs);
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    white-space: nowrap;
    line-height: var(--shop-gf-h);
    display: inline-flex;
    align-items: center;
}

.shop-grid-footer__inline-label-short {
    display: none;
}

@media (max-width: 1179px) {
    .shop-grid-footer__inline-label-full {
        display: none;
    }

    .shop-grid-footer__inline-label-short {
        display: inline;
    }

    .shop-grid-footer {
        /* Space between sort cluster and pager on narrow layouts. */
        --shop-gf-gap-col: max(14px, 3vw);
        --shop-gf-gap-section: max(10px, 2.5vw);
    }

    .shop-grid-footer__select {
        max-width: min(180px, 48vw);
        min-width: 0;
    }
}

.shop-grid-footer__pager {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--shop-gf-gap-tight);
    min-width: 0;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.shop-grid-footer__select {
    height: var(--shop-gf-h);
    min-height: var(--shop-gf-h);
    max-height: var(--shop-gf-h);
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: min(280px, 42vw);
    padding: 0 clamp(20px, calc(16px + 1.8vw), 26px) 0 clamp(6px, calc(4px + 0.6vw), 10px);
    margin: 0;
    font-size: var(--shop-gf-fs);
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #6b7280;
    border: none;
    border-radius: 0;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #d0d0d0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right clamp(5px, calc(4px + 0.4vw), 8px) center;
    background-size: clamp(10px, calc(8px + 0.6vw), 12px);
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.shop-grid-footer__select:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.shop-grid-footer__select:focus {
    outline: none;
}

.shop-grid-footer__select:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 0;
    position: relative;
    z-index: 1;
}

.shop-grid-footer__page {
    font-size: var(--shop-gf-fs);
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    min-width: 3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: var(--shop-gf-h);
    min-height: var(--shop-gf-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shop-grid-footer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--shop-gf-h);
    min-height: var(--shop-gf-h);
    max-height: var(--shop-gf-h);
    padding: 0 clamp(7px, calc(4px + 0.9vw), 12px);
    margin: 0;
    font-size: var(--shop-gf-fs);
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #6b7280;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 0 1px #d0d0d0;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.shop-grid-footer__btn:hover:not(:disabled) {
    color: #6b7280;
    background: #f3f4f6;
}

.shop-grid-footer__btn:focus {
    outline: none;
}

.shop-grid-footer__btn:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 0;
    position: relative;
    z-index: 1;
}

.shop-grid-footer__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (min-width: 1180px) {
    .shop-grid-footer__inline-label,
    .shop-grid-footer__select,
    .shop-grid-footer__page,
    .shop-grid-footer__btn {
        font-size: 11.5px;
    }

    .shop-grid-footer__select {
        max-width: min(260px, 28vw);
    }
}

.shop-empty-state {
    font-size: 14px;
    color: #6b7280;
    margin: 16px 0 0;
}

/* Category shop sidebar: single accordion, expanded panel fills remaining height */
.shop-sidebar .shop-filter-panels.contribute-tab-picker-rows {
    margin-top: 0;
    gap: 0; /* undo .contribute-tab-picker-rows { gap: 12px } — no space between filter mode and Brand */
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shop-sidebar .shop-filter-stack.contribute-attr-column--stack {
    gap: 0;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Avoid double rules from global .sidebar-section */
.shop-sidebar .sidebar-section.shop-filter-panel {
    border-bottom: none;
}

.shop-sidebar .shop-filter-stack .shop-filter-panel.contribute-attr-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background: #ffffff;
}

/* Single horizontal rule between stacked filters (avoid border-bottom + next row border-top doubling) */
.shop-sidebar .shop-filter-stack .shop-filter-panel.contribute-attr-panel:not(:last-child) {
    border-bottom: 1px solid #e8e8e8;
}

.shop-sidebar .shop-filter-stack .shop-filter-panel.contribute-attr-panel:last-child {
    border-bottom: none;
}

.shop-sidebar .shop-filter-stack .shop-filter-panel.shop-filter-panel--collapsed {
    flex: 0 0 auto;
}

.shop-sidebar .shop-filter-stack .shop-filter-panel.shop-filter-panel--expanded {
    /* Size to content (chips + full option list); stack scrolls instead of shrinking the list */
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.shop-sidebar .shop-filter-mode {
    flex-shrink: 0;
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    border-bottom: 1px solid #d0d0d0;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    box-sizing: border-box;
}

/* Contribute form rule always adds border-bottom; shop only needs it when chips are present (see :not(:empty) below). */
.shop-sidebar .contribute-tab-picker-rows .contribute-attr-panel > .sidebar-selected-items {
    border-bottom: none;
}

/* Selected chips: directly under facet header, above collapsible search/list */
.shop-sidebar .shop-filter-panel > .shop-filter-panel-selected-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
}

.shop-sidebar .shop-filter-panel > .shop-filter-panel-selected-wrap:not(:empty) {
    border-bottom: 1px solid #e8e8e8;
}

/* First chip only: global .sidebar-selected-chip has border-top; stacked panels already use border-bottom — avoid doubling */
.shop-sidebar .shop-filter-panel .shop-filter-panel-selected-wrap .sidebar-selected-chip:first-child {
    border-top: none;
}

.shop-filter-panel.shop-filter-panel--has-selections .shop-filter-panel-toggle {
    box-shadow: inset 4px 0 0 #1976d2;
}

.shop-filter-mode-label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

/* Box-shadow frame does not add layout height (vs border) */
.shop-sidebar .shop-filter-mode-toggle {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    align-items: stretch;
    height: 28px;
    border-radius: 0;
    overflow: hidden;
    border: none;
    box-shadow: 0 0 0 1px #d0d0d0;
    background: #fff;
}

.shop-sidebar .shop-filter-mode-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 12px;
    height: 28px;
    min-height: 0;
    border: none;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.shop-filter-mode-btn + .shop-filter-mode-btn {
    border-left: 1px solid #d0d0d0;
}

.shop-filter-mode-btn:hover:not(.shop-filter-mode-btn--active) {
    background: #f3f4f6;
}

.shop-filter-mode-btn:focus {
    outline: none;
}

.shop-filter-mode-btn:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 0;
    position: relative;
    z-index: 1;
}

.shop-filter-mode-btn--active {
    background: #fff;
    color: #1565c0;
    box-shadow: inset 0 0 0 2px #1976d2;
    position: relative;
    z-index: 1;
}

.shop-filter-mode-btn--active:hover {
    background: #f8fafc;
    color: #1565c0;
    box-shadow: inset 0 0 0 2px #1976d2;
}

.shop-filter-panel-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    box-sizing: border-box;
    flex-shrink: 0;
}

.shop-filter-panel-toggle:focus {
    outline: none;
}

.shop-filter-panel-toggle:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

.shop-filter-panel-header-row.contribute-attr-header-row {
    min-height: 40px;
    height: 40px;
    padding: 0 14px;
    margin: 0;
    box-sizing: border-box;
}

.shop-sidebar .shop-filter-panel-header-row .contribute-attr-header-title {
    line-height: 1.2;
}

.shop-filter-panel-body {
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    overflow: hidden;
    border-top: none;
    background: #fff;
    transition: grid-template-rows var(--header-dropdown-duration) var(--header-dropdown-ease);
}

.shop-filter-panel--expanded .shop-filter-panel-body {
    grid-template-rows: 1fr;
    flex: 1 1 0;
    min-height: 0;
    border-top: 1px solid #e8e8e8;
}

/* Selected wrap already draws border-bottom when non-empty — drop body top border to avoid a double rule. */
.shop-sidebar .shop-filter-panel--expanded > .shop-filter-panel-selected-wrap:not(:empty) + .shop-filter-panel-body {
    border-top: none;
}

/* Shop: 1fr (not `auto`) so 0fr → expanded interpolates; flex keeps panel height from content, stack scrolls */
.shop-sidebar .shop-filter-panel--expanded .shop-filter-panel-body {
    grid-template-rows: 1fr;
    flex: 0 0 auto;
    min-height: 0;
}

.shop-filter-panel-body-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity var(--header-dropdown-duration) var(--header-dropdown-ease),
        transform var(--header-dropdown-duration) var(--header-dropdown-ease);
}

.shop-filter-panel--expanded .shop-filter-panel-body-inner {
    opacity: 1;
    transform: translateY(0);
}

.shop-sidebar .shop-filter-panel--expanded .shop-filter-panel-body-inner {
    overflow: visible;
    min-height: min-content;
}

@media (prefers-reduced-motion: reduce) {
    .shop-filter-panel-body {
        transition-duration: 0.01ms;
    }

    .shop-filter-panel-body-inner {
        transition-duration: 0.01ms;
    }
}

.shop-sidebar .shop-filter-search-input {
    margin: 6px 8px 4px !important;
    width: calc(100% - 16px) !important;
    max-width: none;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #6b7280;
    box-sizing: border-box;
    align-self: center;
    border: 1px solid #c0c0c0;
    background-color: #fff;
}

.shop-sidebar .shop-filter-search-input:focus {
    outline: none;
    border-color: #1976d2;
}

.shop-sidebar .shop-filter-panel--expanded .shop-filter-search-input {
    flex-shrink: 0;
}

.shop-sidebar .shop-filter-panel .sidebar-filter-list .sidebar-filter-item {
    margin: 0;
    border-top: none;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.shop-sidebar .shop-filter-panel .sidebar-filter-list .sidebar-filter-item span {
    flex: 1 1 auto;
    min-width: 0;
}

/* Shop filters: one option per row */
.shop-sidebar .shop-filter-panel .contribute-attr-picker-list.sidebar-filter-list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    align-items: stretch;
    gap: 0;
    padding: 4px 8px 8px;
}

.shop-sidebar .shop-filter-panel .contribute-attr-picker-list {
    flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    border-top: none;
    scrollbar-gutter: auto;
}

.shop-sidebar .shop-filter-panel--expanded.shop-filter-panel--accordion-settled .contribute-attr-picker-list {
    overflow-y: visible;
}

.shop-sidebar .shop-filter-panel--collapsed .contribute-attr-picker-list {
    min-height: 0;
}

.article-card {
    padding: 16px;
    border: 1px solid #e0e0e0;
    margin-bottom: 12px;
    background: #fff;
}

.article-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: #4a5568;
    margin: 0 0 8px 0;
}

.article-card p {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    line-height: 1.45;
}

.article-card .article-body-html {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.65;
}

.article-card .article-body-html p {
    margin: 0 0 0.65em 0;
}

.article-card .article-body-html p:last-child {
    margin-bottom: 0;
}

.article-card .article-body-html h1 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0.5em 0 0.4em;
    line-height: 1.25;
    color: #4a5568;
}

.article-card .article-body-html h2,
.article-card .article-body-html h3 {
    font-weight: 600;
    margin: 0.55em 0 0.35em;
    line-height: 1.3;
    color: #4a5568;
}

.article-card .article-body-html img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0.65em 0;
}

.article-card .article-body-html .article-youtube-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0.65em 0;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #0f0f0f;
}

.article-card .article-body-html .article-youtube-embed .article-youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.article-meta {
    font-size: 11px;
    color: #999;
    margin-top: 8px;
}

/* Migrated inline utilities (templates / admin JS strings) */
.u-mt-14 {
    margin-top: 14px;
}

.form-group--mt-12 {
    margin-top: 12px;
}

.form-group--align-end {
    align-self: end;
}

.empty-state--soft {
    color: #999;
    font-size: 14px;
}

.text-hint {
    font-size: 12px;
    color: #888;
    margin: -8px 0 14px 0;
    line-height: 1.4;
}

.text-muted-xs {
    color: #999;
    font-size: 12px;
}

.text-error-xs {
    color: #c62828;
    font-size: 12px;
}

.admin-title--sub {
    margin-top: 8px;
}

.admin-fieldset-unstyled {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.input-readonly-muted {
    background-color: #f5f5f5;
}

.contribute-container input.input-readonly-muted {
    background-color: #f5f5f5;
}

.flex-min-0 {
    flex: 1;
    min-width: 0;
}

.pending-brand {
    color: #888;
    font-size: 12px;
}

.label-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.empty-state--loading {
    border: none;
    margin: 16px;
}

.handle-muted {
    color: #9ca3af;
}

.admin-create-product-wrap.contribute-modal {
    max-width: 100%;
    max-height: none;
    margin-bottom: 28px;
    box-shadow: none;
    border: 1px solid #d0d0d0;
}

/* Admin create/edit product forms: flush layout */
.page-admin .admin-create-product-wrap.contribute-modal {
    margin-top: 0;
    margin-bottom: 16px;
}

.page-admin .admin-create-product-wrap .contribute-modal-body {
    padding: 0;
}

.page-admin .admin-product-link-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    max-width: 100%;
}

.page-admin .admin-product-link-input {
    flex: 1 1 12rem;
    min-width: 0;
    box-sizing: border-box;
}

.page-admin .admin-product-link-ai-btn {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    height: 36px;
    padding: 0 14px;
    align-self: center;
}

.page-admin .admin-product-form > .admin-product-form__section,
.page-admin .admin-product-form > .contribute-tab-picker-rows {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #e8e8e8;
}

.page-admin .admin-product-form > .admin-product-form__actions {
    margin: 12px 0 0;
    padding: 0;
}

.page-admin #admin-edit-select-wrap.form-section,
.page-admin #admin-add-prefill-wrap.form-section {
    margin-bottom: 12px;
    padding-bottom: 12px;
}

/* Wider product search when editing; full width of dialog */
.page-admin #adminEditProductSearch,
.page-admin #adminAddProductPrefillSearch {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
}

/* Admin create/edit: keep 4 attribute panels per row (2 rows total in product form). */
.page-admin .contribute-tab-picker-row.contribute-tab-picker-row--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .page-admin .contribute-tab-picker-row.contribute-tab-picker-row--four {
        grid-template-columns: 1fr;
    }
}

.page-admin .contribute-container .sidebar-filter-search.contribute-header-search-input {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

/* Admin product form: selected certifications — chip row matches brand */
.page-admin .admin-product-form .admin-cert-selected-block {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.page-admin .admin-product-form .admin-cert-selected-block .sidebar-selected-chip {
    flex-shrink: 0;
}

.admin-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
}

.page-admin .admin-container {
    max-width: 1200px;
}

.page-admin-sheet .admin-container {
    max-width: 100%;
    height: calc(100vh - var(--tabbed-fixed-below-header));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 20px 0;
    box-sizing: border-box;
}

.admin-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    align-items: center;
}

/* Match profile settings “Log out” ( .profile-setting-action--danger ) */
.admin-top-actions .admin-logout-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1;
    font-family: inherit;
    color: #fff;
    background: #c62828;
    border: 1px solid #c62828;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.admin-top-actions .admin-logout-btn:hover {
    background: #b71c1c;
    border-color: #b71c1c;
    color: #fff;
}

.admin-top-actions .admin-logout-btn:focus {
    outline: none;
}

.admin-top-actions .admin-logout-btn:focus-visible {
    outline: 2px solid #c62828;
    outline-offset: 2px;
}

.admin-modal-narrow.contribute-modal.login-modal-shell {
    max-width: min(96vw, 480px);
    width: 100%;
}

/* Admin: edit brand / certification table (per-row save) */
.admin-modal-ref-edit.contribute-modal--wide {
    max-width: min(96vw, 960px);
    width: 100%;
    max-height: min(90vh, 880px);
    display: flex;
    flex-direction: column;
}

.admin-modal-ref-edit .contribute-modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-admin .admin-ref-edit-hint {
    margin: 0 0 10px;
    line-height: 1.4;
    font-size: 12px;
    color: #64748b;
}

.page-admin .admin-modal-ref-table-wrap {
    overflow: auto;
    flex: 1;
    min-height: 0;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

.page-admin .admin-ref-edit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.page-admin .admin-ref-edit-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    text-align: left;
    font-weight: 600;
    color: #334155;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-admin .admin-ref-edit-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.page-admin .admin-ref-col-id {
    width: 3.5rem;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    font-size: 12px;
}

.page-admin .admin-ref-col-name {
    min-width: 6rem;
    width: 18%;
}

.page-admin .admin-ref-col-image {
    /* Room for 64px-tall logos at native width; table scrolls horizontally in narrow modals. */
    min-width: 14rem;
    width: 28%;
}

.page-admin .admin-ref-col-link {
    min-width: 10rem;
    width: auto;
}

.page-admin .admin-ref-col-action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.page-admin .admin-ref-row-name,
.page-admin .admin-ref-row-link {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: inherit;
    background: #fff;
}

.page-admin .admin-ref-row-img-cell {
    vertical-align: top;
    overflow: visible;
}

.page-admin .admin-ref-row-img-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.page-admin .admin-ref-row-thumb {
    /* Never use % max-width here: in a narrow <td> it forces uniform scale-down so height drops below 64px. */
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    width: auto;
    max-width: 400px;
    object-fit: contain;
    object-position: left center;
    display: block;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-sizing: content-box;
}

.page-admin .admin-ref-row-thumb--empty {
    object-fit: contain;
    max-width: 120px;
    min-height: 64px;
    max-height: 64px;
}

.page-admin .admin-ref-row-file {
    font-size: 11px;
    max-width: 100%;
}

.page-admin .admin-ref-table-loading,
.page-admin .admin-ref-table-empty {
    text-align: center;
    color: #64748b;
    padding: 20px 12px !important;
}

.page-admin .admin-ref-row-save {
    font-size: 12px;
    padding: 6px 14px;
    min-height: 36px;
    white-space: nowrap;
}

.page-admin .admin-ref-row-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.page-admin .admin-ref-row-actions .header-login-btn,
.page-admin .admin-ref-row-actions .admin-ref-row-delete {
    margin: 0;
    flex: 0 0 auto;
}

.page-admin .admin-ref-row-delete {
    font-size: 12px;
    padding: 6px 12px;
    min-height: 36px;
    white-space: nowrap;
    background: #fff;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}

.page-admin .admin-ref-row-delete:hover:not(:disabled) {
    background: #fef2f2;
}

.page-admin .admin-ref-row-delete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.page-admin .admin-ref-row-delete:focus-visible {
    outline: 2px solid #b91c1c;
    outline-offset: 2px;
}

.page-admin .admin-top-actions-sep {
    display: inline-block;
    width: 1px;
    height: 24px;
    margin: 0 4px;
    background: #cbd5e1;
    vertical-align: middle;
}

.page-admin .admin-sheet-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.page-admin .admin-sheet-link:hover {
    text-decoration: none;
}

.page-admin-sheet .admin-top-actions--unified {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    margin-bottom: 0;
}

.page-admin-sheet .admin-entity-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.page-admin-sheet .admin-entity-tab--active {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

.page-admin-sheet .admin-unified-panel {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 8px;
}

.page-admin-sheet .admin-entity-tab[href] {
    text-decoration: none;
    box-sizing: border-box;
}

.page-admin-sheet .admin-product-sheet-mount {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 4px;
}

.page-admin-sheet .admin-product-sheet-mount[hidden],
.page-admin-sheet .admin-sheet-table-scroll[hidden] {
    display: none;
}

.page-admin-sheet .admin-product-sheet-table-outer {
    overflow: auto;
    flex: 1 1 0;
    min-height: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
}

.page-admin-sheet .admin-product-sheet-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    font-size: 11px;
}

.page-admin-sheet .admin-product-sheet-th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1f5f9;
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid #cbd5e1;
    white-space: nowrap;
    max-width: 220px;
}

.page-admin-sheet .admin-product-sheet-th--narrow {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
}

.page-admin-sheet .admin-product-sheet-th--actions {
    min-width: 100px;
}

.page-admin-sheet .admin-product-sheet-tr {
    height: 160px;
}

.page-admin-sheet .admin-product-sheet-td {
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #f1f5f9;
    padding: 0;
    min-width: 140px;
    max-width: 260px;
    background: #fff;
    height: 160px;
    box-sizing: border-box;
}

.page-admin-sheet .admin-product-sheet-td--narrow {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
}

.page-admin-sheet .admin-product-sheet-td--actions {
    min-width: 108px;
    max-width: 130px;
}

.page-admin-sheet .admin-product-sheet-th--cat {
    min-width: 200px;
    max-width: 320px;
}

.page-admin-sheet .admin-product-sheet-td--cat {
    min-width: 200px;
    max-width: 320px;
}

.page-admin-sheet .admin-product-sheet-cell-scroll {
    height: 160px;
    max-height: 160px;
    overflow: auto;
    padding: 3px 4px;
    box-sizing: border-box;
}

.page-admin-sheet .admin-product-sheet-picker .sidebar-section {
    margin: 0;
}

.page-admin-sheet .admin-product-sheet-picker .contribute-attr-header-sidebar {
    padding: 2px 4px;
}

.page-admin-sheet .admin-product-sheet-picker .contribute-attr-header-title {
    font-size: 10px;
}

/* Reduce picker header row height inside cells */
.page-admin-sheet .admin-product-sheet-cell-scroll .contribute-attr-header-row {
    height: 28px;
    min-height: 28px;
}

/* Shrink chips, filter items, and cert rows to the same compact size */
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-selected-chip,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-filter-item,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-filter-item--brand,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-filter-item--cert,
.page-admin-sheet .admin-product-sheet-cell-scroll .admin-cert-selected-block .sidebar-selected-chip {
    min-height: 24px;
    height: auto;
    font-size: 10px;
    padding: 2px 6px;
    line-height: 1.2;
}

/* Normalize cert icon and color swatch sizes inside compact cells */
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-chip-cert-icon,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-chip-color,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-cert-icon,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-cert-swatch {
    width: 12px;
    height: 12px;
}

/* Remove button inside compact chips */
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-chip-remove {
    font-size: 10px;
    max-height: 24px;
    padding: 0 1px;
}

/* Kill inner scrollbars — cell-scroll is the only scroll container */
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-filter-list,
.page-admin-sheet .admin-product-sheet-cell-scroll .contribute-attr-picker-list {
    overflow: visible;
    max-height: none;
    flex: 0 0 auto;
    min-height: 0;
}

/* Compact search and add-new inputs inside cells */
.page-admin-sheet .admin-product-sheet-cell-scroll .contribute-header-search-input,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-filter-search {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    font-size: 10px !important;
    padding: 0 6px !important;
}

.page-admin-sheet .admin-product-sheet-cell-scroll .contribute-attr-new-input {
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    font-size: 10px;
    padding: 0 6px;
}

/* Logo/cert images inside compact filter items */
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-brand-logo,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-picker-ref-img,
.page-admin-sheet .admin-product-sheet-cell-scroll .sidebar-cert-picker-img {
    height: 12px;
    max-height: 12px;
}

.page-admin-sheet .admin-product-sheet-textarea {
    min-height: 44px;
    resize: vertical;
    max-height: 72px;
    font-size: 11px;
}

.page-admin-sheet .admin-product-sheet-name-textarea {
    resize: none;
    min-height: 148px;
    max-height: 148px;
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    line-height: 1.3;
    overflow-y: auto;
}

.page-admin-sheet .admin-product-sheet-tight-label {
    font-size: 11px;
}

.page-admin-sheet .admin-product-sheet-file-group .file-upload label {
    font-size: 11px;
    padding: 4px 8px;
}

.page-admin-sheet .admin-product-sheet-thumb {
    max-height: 48px;
    max-width: 100%;
    object-fit: contain;
}

.page-admin-sheet .admin-product-sheet-actions-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.page-admin-sheet .admin-product-sheet-actions-cell .header-login-btn,
.page-admin-sheet .admin-product-sheet-actions-cell .admin-ref-row-delete {
    font-size: 11px;
    padding: 4px 8px;
}

.page-admin-sheet .admin-product-link-row .admin-product-link-ai-btn {
    font-size: 11px;
    padding: 4px 8px;
}

/* Sticky first two columns (Sel + ID) so they stay visible during horizontal scroll */
.page-admin-sheet .admin-product-sheet-table thead th:nth-child(1),
.page-admin-sheet .admin-product-sheet-table tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    box-shadow: 1px 0 0 #e2e8f0;
}

.page-admin-sheet .admin-product-sheet-table thead th:nth-child(2),
.page-admin-sheet .admin-product-sheet-table tbody td:nth-child(2) {
    position: sticky;
    left: 76px;
    z-index: 3;
    box-shadow: 1px 0 0 #e2e8f0;
}

/* thead cells need higher z-index so they overlap sticky body cells when scrolling vertically */
.page-admin-sheet .admin-product-sheet-table thead th:nth-child(1),
.page-admin-sheet .admin-product-sheet-table thead th:nth-child(2) {
    z-index: 5;
}

.page-admin-sheet .admin-product-sheet-table tbody td:nth-child(1) {
    background: #fff;
}

.page-admin-sheet .admin-product-sheet-table tbody td:nth-child(2) {
    background: #fff;
}

.page-admin-sheet .admin-sheet-layout {
    max-width: 100%;
}

.page-admin-sheet .admin-sheet-gate {
    padding: 24px 16px;
    text-align: center;
}

.page-admin-sheet .admin-sheet-gate-link {
    display: inline-block;
    margin-top: 12px;
    text-decoration: none;
}

.page-admin-sheet .admin-sheet-top {
    margin-bottom: 16px;
}

.page-admin-sheet .admin-sheet-top-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.page-admin-sheet .admin-sheet-back {
    font-size: 14px;
    color: #334155;
    text-decoration: none;
}

.page-admin-sheet .admin-sheet-back:hover {
    text-decoration: underline;
}

.page-admin-sheet .admin-sheet-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
}

.page-admin-sheet .admin-sheet-intro {
    max-width: 900px;
    line-height: 1.45;
    margin: 0 0 8px;
    flex-shrink: 0;
}

.page-admin-sheet .admin-sheet-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.page-admin-sheet .admin-sheet-toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #cbd5e1;
    margin: 0 4px;
}

.page-admin-sheet .admin-sheet-status {
    font-size: 13px;
    color: #64748b;
    margin-left: auto;
    flex: 1 1 140px;
    text-align: right;
    min-width: 120px;
}

.page-admin-sheet .admin-sheet-ai-btn {
    background: #1e3a5f;
    color: #fff;
    border-color: #1e3a5f;
}

.page-admin-sheet .admin-sheet-ai-btn:hover {
    filter: brightness(1.08);
}

.page-admin-sheet .admin-sheet-ai-details {
    flex: 1 1 100%;
    font-size: 13px;
    margin: 4px 0 0;
}

.page-admin-sheet .admin-sheet-ai-details summary {
    cursor: pointer;
    color: #475569;
    user-select: none;
}

.page-admin-sheet .admin-sheet-ai-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 8px;
    padding: 8px 0;
}

.page-admin-sheet .admin-sheet-ai-checks label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
}

.page-admin-sheet .admin-sheet-table-scroll {
    overflow: auto;
    flex: 1 1 0;
    min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.page-admin-sheet .admin-sheet-table {
    border-collapse: collapse;
    font-size: 13px;
    min-width: max-content;
}

.page-admin-sheet .admin-sheet-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.page-admin-sheet .admin-sheet-table tbody td {
    border: 1px solid #e2e8f0;
    padding: 2px 4px;
    vertical-align: middle;
    background: #fff;
}

.page-admin-sheet .admin-sheet-cell--selected {
    box-shadow: inset 0 0 0 2px #2563eb;
    background: #eff6ff !important;
}

.page-admin-sheet .admin-sheet-input {
    width: 100%;
    min-width: 7rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    padding: 6px 8px;
    font: inherit;
    background: transparent;
    border-radius: 4px;
}

.page-admin-sheet .admin-sheet-input:focus {
    outline: none;
    border-color: #93c5fd;
    background: #fff;
}

.page-admin-sheet .admin-sheet-input--readonly {
    color: #64748b;
    background: #f8fafc;
}

.page-admin-sheet .admin-sheet-textarea {
    min-width: 12rem;
    min-height: 48px;
    resize: vertical;
}

.page-admin-sheet .admin-sheet-td--image {
    min-width: 140px;
}

.page-admin-sheet .admin-sheet-image-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px;
}

.page-admin-sheet .admin-sheet-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #f8fafc;
}

.page-admin-sheet .admin-sheet-thumb--empty {
    opacity: 0.35;
}

.page-admin-sheet .admin-sheet-file {
    font-size: 11px;
    max-width: 130px;
}

.page-admin-sheet .admin-sheet-td--actions {
    white-space: nowrap;
    padding: 6px !important;
}

.page-admin-sheet .admin-sheet-td--actions .header-login-btn,
.page-admin-sheet .admin-sheet-td--actions .admin-ref-row-delete {
    font-size: 11px;
    padding: 4px 10px;
    min-height: 32px;
    margin: 0 4px 0 0;
}

.page-admin-sheet .admin-sheet-product-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
}

.page-admin-sheet .admin-sheet-product-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.page-admin-sheet .admin-sheet-product-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.page-admin-sheet .admin-sheet-bulk-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
}

.page-admin-sheet .admin-sheet-product-id-badge {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-right: auto;
}

.page-admin-sheet .admin-sheet-product-card-body .admin-create-product-wrap.contribute-modal {
    max-width: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.page-admin-sheet .admin-sheet-product-card-body .contribute-modal-body {
    padding: 12px 14px 16px;
}

.page-admin-sheet .admin-sheet-product-card-body .contribute-tab-picker-rows {
    margin-top: 8px;
}

.admin-modal-product-dialog.contribute-modal--wide {
    max-width: min(96vw, 1100px);
    width: 100%;
    max-height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
}

.admin-modal-product-dialog__body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.page-admin .admin-delete-product-confirm {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #c62828;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease;
}

.page-admin .admin-delete-product-confirm:hover:not(:disabled) {
    background-color: #b71c1c;
}

.page-admin .admin-delete-product-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-admin .admin-delete-product-table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 10px 0 8px;
    font-size: 13px;
}

.page-admin .admin-delete-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    font-weight: 500;
}

.page-admin .admin-delete-product-table-scroll {
    max-height: min(50vh, 420px);
    overflow: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    margin-top: 4px;
}

.page-admin .admin-delete-product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.page-admin .admin-delete-product-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f0f2f5;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    white-space: nowrap;
}

.page-admin .admin-delete-product-th-check {
    width: 2.5rem;
    text-align: center;
}

.page-admin .admin-delete-product-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    background: #fff;
}

.page-admin .admin-delete-product-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}

.page-admin .admin-delete-product-table tbody tr:last-child td {
    border-bottom: none;
}

.page-admin .admin-delete-product-table__placeholder td {
    text-align: center;
    color: #6B7280;
    padding: 16px 10px;
}

.page-admin .admin-modal-product-dialog .admin-create-product-wrap.contribute-modal {
    border: none;
    box-shadow: none;
    margin: 0;
    max-width: 100%;
}

.page-admin .admin-modal-product-dialog .admin-create-product-wrap .contribute-modal-body {
    padding: 0;
}

/* Add Product button in toolbar */
.page-admin-sheet .admin-sheet-add-product-btn {
    background: #0f766e;
    color: #fff;
    border-color: #0f766e;
}

.page-admin-sheet .admin-sheet-add-product-btn:hover {
    filter: brightness(1.1);
}

/* Prefill section inside modal */
.admin-add-prefill-section {
    padding: 10px 20px 8px;
    border-bottom: 1px solid #e8ecf0;
    background: #f8fafc;
    flex-shrink: 0;
}

.admin-add-prefill-row {
    position: relative;
    margin-top: 4px;
}

.admin-add-prefill-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: inherit;
    background: #fff;
}

.admin-add-prefill-input:focus {
    outline: none;
    border-color: #93c5fd;
}

.admin-add-prefill-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.admin-prefill-result-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    color: #1e293b;
}

.admin-prefill-result-item:hover {
    background: #f0f9ff;
}

.admin-prefill-result-item:last-child {
    border-bottom: none;
}

.admin-prefill-result-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #64748b;
}

.page-admin .admin-edit-ref-preview {
    display: inline-block;
    max-width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 2px;
    box-sizing: border-box;
    margin-top: 6px;
    line-height: 0;
}

/* Product image upload preview (taller than logo strip). */
.page-admin .admin-edit-ref-preview:not(.admin-edit-ref-preview--logo) img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(50vh, 400px);
    margin: 0;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* Add brand / add certification: 64px-tall logo preview. */
.page-admin .admin-edit-ref-preview--logo img {
    display: block;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    width: auto;
    max-width: 400px;
    margin: 0;
    object-fit: contain;
    object-position: left center;
    background: #fff;
}

/* Primary / secondary actions: login button look, min width */
.page-admin .admin-product-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
}

.page-admin .admin-product-form__actions .header-login-btn {
    min-width: 220px;
    margin: 0;
    justify-content: center;
}

.page-admin .admin-product-form__actions .admin-product-form__btn-secondary {
    background: #78909c;
    color: #fff;
}

.page-admin .admin-product-form__actions .admin-product-form__btn-secondary:hover {
    background: #607d8b;
}

.page-admin .admin-product-form__actions .admin-product-form__btn-secondary:focus-visible {
    outline: 2px solid #607d8b;
    outline-offset: -4px;
}

.admin-title {
    font-size: 18px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 30px;
    letter-spacing: 0.3px;
}

.form-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d0d0d0;
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.admin-container label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-container input[type="text"],
.admin-container input[type="number"],
.admin-container input[type="url"],
.admin-container select,
.admin-container textarea {
    padding: 8px 10px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    font-family: inherit;
    color: #4a5568;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.admin-container textarea {
    resize: vertical;
    min-height: 100px;
}

.admin-container input[type="text"]:focus,
.admin-container input[type="number"]:focus,
.admin-container input[type="url"]:focus,
.admin-container select:focus,
.admin-container textarea:focus {
    outline: none;
    border-color: #1976d2;
}

.tag-input {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border: 1px solid #d0d0d0;
    min-height: 34px;
    background-color: #fff;
    align-items: center;
}

.tag {
    background-color: #374151;
    color: white;
    padding: 3px 10px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tag button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    display: flex;
    align-items: center;
    text-transform: none;
    letter-spacing: 0;
}

.tag button:hover {
    color: white;
}

.tag-input input {
    border: none;
    flex: 1;
    min-width: 100px;
    font-size: 13px;
    padding: 2px 0;
    font-family: inherit;
}

.tag-input input:focus {
    outline: none;
}

.file-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload label {
    display: block;
    padding: 8px 10px;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    color: #888;
    transition: border-color 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

.file-upload label:hover {
    border-color: #1976d2;
    color: #1976d2;
}

.file-name {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

.button-group {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.admin-container button {
    padding: 10px 20px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Undo generic admin button chrome for sign-in controls (match header + login modal). */
.admin-container button.header-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    margin: 12px 0;
    box-sizing: border-box;
    background: #1976d2;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0.3px;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.2s ease;
}

.admin-container button.header-login-btn:hover {
    background: #1565c0;
}

.admin-container button.header-login-btn:focus {
    outline: none;
}

.admin-container button.header-login-btn:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -4px;
}

.admin-container button.login-modal-submit {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease;
}

.admin-container button.login-modal-submit:hover {
    background: #1565c0;
}

.admin-container button.login-modal-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-submit {
    background-color: #1976d2;
    color: white;
}

.btn-submit:hover {
    background-color: #1565c0;
}

.btn-reset {
    background-color: #e0e0e0;
    color: #6B7280;
}

.btn-reset:hover {
    background-color: #d0d0d0;
}

.alert {
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    border: 1px solid;
}

.alert-success {
    background-color: #c8e6c9;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.alert-error {
    background-color: #ffcdd2;
    color: #c62828;
    border-color: #ef9a9a;
}

.cert-row {
    padding: 10px;
    background-color: #f5f5f5;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
}

.cert-row .form-grid {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
}

.btn-remove-cert {
    background-color: #e0e0e0;
    color: #6B7280;
    padding: 8px 12px;
    font-size: 11px;
}

.btn-remove-cert:hover {
    background-color: #ef5350;
    color: white;
}

.btn-add-cert {
    background-color: transparent;
    color: #1976d2;
    border: 1px dashed #ccc;
    padding: 8px 16px;
    width: 100%;
    margin-top: 4px;
    font-size: 11px;
}

.btn-add-cert:hover {
    border-color: #1976d2;
    background-color: rgba(25, 118, 210, 0.03);
}

.admin-pending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.pending-section {
    border: 1px solid #e0e0e0;
    padding: 16px;
    background: #fafafa;
}

.pending-list {
    font-size: 13px;
    color: #4a5568;
    min-height: 48px;
}

.pending-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
}

.pending-row:last-child {
    border-bottom: none;
}

.pending-row-actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

.btn-pending {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    cursor: pointer;
}

.btn-publish {
    background: #1976d2;
    color: #fff;
}

.btn-approve-article {
    background: #2e7d32;
    color: #fff;
}

.btn-reject {
    background: #e0e0e0;
    color: #6B7280;
}

.pending-product-edit {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
}

.pending-product-edit label {
    font-size: 11px;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pending-link-input {
    width: 100%;
    max-width: 420px;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.pending-earns-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pending-earns-row label {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}

.btn-save-pending-link {
    align-self: flex-start;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    background: #455a64;
    color: #fff;
    border: none;
    cursor: pointer;
}

.btn-save-pending-link:hover {
    background: #37474f;
}

.contribute-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 2px solid #ddd;
    margin-bottom: 30px;
}

.contribute-tabs-add {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    opacity: 0.45;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    align-self: center;
}

.contribute-tabs-add:hover {
    opacity: 1;
}

.contribute-tab {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.contribute-tab:hover {
    color: #4a5568;
}

.contribute-tab.active {
    color: #1976d2;
    border-bottom-color: #1976d2;
    font-weight: 600;
}

.contribute-section-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.btn-contribute-action {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    background-color: #1976d2;
    color: #fff;
    transition: background-color 0.15s ease;
}

.btn-contribute-action:hover {
    background-color: #1565c0;
}

.btn-contribute-action--secondary {
    background-color: #e0e0e0;
    color: #4a5568;
}

.btn-contribute-action--secondary:hover {
    background-color: #d0d0d0;
}

.btn-contribute-action--danger {
    background-color: #c62828;
    color: #fff;
}

.btn-contribute-action--danger:hover {
    background-color: #b71c1c;
}

/* Modal overlay */
.contribute-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 24px;
    box-sizing: border-box;
}

.contribute-modal-overlay[hidden] {
    display: none;
}

.contribute-modal {
    background: #fff;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    width: 100%;
    max-width: 540px;
    box-shadow: none;
    border: 1px solid #d0d0d0;
}

.contribute-modal--wide {
    max-width: 900px;
}

.contribute-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #d0d0d0;
    flex-shrink: 0;
}

.contribute-modal-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #4a5568;
}

.contribute-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #888;
    opacity: 0.85;
    transition: color 0.15s ease, opacity 0.15s ease;
    /* Avoid emoji-style balloon ✕ that ignores font-size */
    font-variant-emoji: text;
}

.contribute-modal-close:hover {
    color: #4a5568;
    opacity: 1;
}

.contribute-form-footer {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

.btn-clear {
    background: #1976d2;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 300;
    padding: 10px 24px;
    letter-spacing: 0.5px;
    transition: background-color 0.12s ease;
}

.btn-clear:hover {
    background: #1565c0;
}

.contribute-modal-body {
    overflow-y: auto;
    padding: 20px;
    flex: 1;
}

/* Edit article list inside modal */
.article-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.article-edit-row:last-child {
    border-bottom: none;
}

.article-edit-input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
}

.article-edit-input:focus {
    outline: none;
    border-color: #1976d2;
}

.contribute-tabs-table-wrap {
    overflow-x: auto;
    border: 1px solid #e8e8e8;
}

/* Two-subsection layout within each tab */
.contribute-subsection {
    margin-bottom: 28px;
}

.contribute-subsection:last-child {
    margin-bottom: 0;
}

.contribute-subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6b7280;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 0;
}

.contribute-subsection-add {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.45;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.contribute-subsection-add:hover {
    opacity: 1;
}

/* Contribute table (ct-*) */
.ct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #4a5568;
}

.ct-table thead tr {
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
}

.ct-table th {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6b7280;
    text-align: left;
    white-space: nowrap;
}

.ct-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.ct-table tbody tr:last-child td {
    border-bottom: none;
}

.ct-table tbody tr:hover td {
    background: #fafafa;
}

.ct-brand-cell {
    white-space: nowrap;
    min-width: 80px;
}

.ct-brand-logo {
    height: 28px;
    max-width: 80px;
    object-fit: contain;
    display: block;
}

.ct-name-cell {
    font-weight: 500;
    min-width: 120px;
}

.ct-tags-cell {
    min-width: 100px;
}

.ct-tag-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px 0;
    white-space: nowrap;
}

.ct-tag-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    display: inline-block;
}

.ct-tag-text {
    font-size: 11px;
    color: #4a5568;
}

.ct-flag-col {
    white-space: nowrap;
    min-width: 100px;
}

.ct-flag-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.ct-empty {
    color: #aaa;
}

.ct-action-cell {
    width: 32px;
    padding: 8px 8px;
    text-align: center;
}

.ct-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-edit-btn:hover {
    opacity: 1;
}

/* Focused article edit row in edit modal */
.article-edit-row--focus {
    background: #f0f7ff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.form-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d0d0d0;
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.contribute-container label {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.contribute-container input[type="text"],
.contribute-container input[type="number"],
.contribute-container input[type="url"],
.contribute-container select,
.contribute-container textarea {
    padding: 8px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    font-size: 13px;
    font-family: inherit;
    color: #4a5568;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

/* Native selects use OS rounding; strip it for square corners + keep dropdown arrow */
.contribute-container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.contribute-container input[type="text"]:focus,
.contribute-container input[type="number"]:focus,
.contribute-container input[type="url"]:focus,
.contribute-container select:focus,
.contribute-container textarea:focus {
    outline: none;
    border-color: #1976d2;
}

.contribute-container textarea {
    resize: vertical;
    min-height: 100px;
}

.contribute-product-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.contribute-product-name-full {
    grid-column: 1 / -1;
}

.contribute-tab-picker-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.contribute-tab-picker-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.contribute-tab-picker-row.contribute-tab-picker-row--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contribute-tab-picker-row.contribute-tab-picker-row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contribute-tab-picker-row.contribute-tab-picker-row--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contribute-tab-picker-row.contribute-tab-picker-row--full {
    grid-template-columns: minmax(0, 1fr);
}

.contribute-attr-column--stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    min-width: 0;
}

.contribute-attr-column--stack .contribute-attr-panel {
    flex: 1 1 0;
    min-height: 220px;
}

@media (max-width: 960px) {
    .contribute-tab-picker-row {
        grid-template-columns: 1fr;
    }
}

.contribute-tab-picker-rows .contribute-attr-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

#contribute-category-picker .sidebar-filter-item span {
    color: inherit;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
}

#contribute-category-picker .sidebar-filter-item:hover span {
    color: #4a5568;
}

#contribute-selected-category .sidebar-selected-chip > .sidebar-chip-left span {
    color: #4a5568;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
}

.contribute-attr-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #d0d0d0;
    background: #fff;
}

/* Undo global .sidebar-section:last-child { border-bottom: none } inside contribute columns */
.contribute-tab-picker-rows .sidebar-section.contribute-attr-panel:last-child {
    border-bottom: 1px solid #d0d0d0;
}

.contribute-tab-picker-rows .contribute-attr-panel {
    flex: 1;
    min-height: 400px;
}

.contribute-tab-picker-rows .contribute-attr-picker-list {
    flex: 1 1 0;
    min-height: 140px;
    max-height: none;
    overflow-y: auto;
}

.contribute-attr-header-sidebar {
    flex-shrink: 0;
    background-color: #ffffff;
    border-left: none;
    box-sizing: border-box;
}

.contribute-attr-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    box-sizing: border-box;
}

.contribute-attr-header-title {
    color: inherit;
}

.contribute-attr-header-tools {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 0;
    flex-shrink: 0;
}

.contribute-header-tool {
    background: none;
    border: none;
    padding: 8px 4px;
    margin: 0;
    cursor: pointer;
    opacity: 0.55;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    line-height: 0;
    box-sizing: border-box;
}

.contribute-header-tool:hover {
    opacity: 1;
}

.contribute-header-tool img {
    width: 16px;
    height: 16px;
    display: block;
}

.contribute-attr-header-panel-expand {
    display: none;
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.contribute-attr-header-sidebar--expanded .contribute-attr-header-panel-expand {
    display: block;
    max-height: none;
    padding: 0 4px 4px 10px;
    overflow: visible;
}

.contribute-expand-search[hidden],
.contribute-expand-add[hidden] {
    display: none !important;
}

.contribute-container .sidebar-filter-search.contribute-header-search-input {
    margin: 0 !important;
    width: 100%;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #6b7280;
    box-sizing: border-box;
}

.contribute-expand-add-row {
    display: block;
    box-sizing: border-box;
}

.contribute-attr-new-input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 14px;
    border: 1px solid #c0c0c0;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #6b7280;
    font-family: inherit;
    box-sizing: border-box;
}

.contribute-attr-picker-list {
    min-height: 200px;
    max-height: min(320px, 42vh);
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
}

/* Pinned selections: same vertical stack as homepage sidebar */
.contribute-tab-picker-rows .contribute-attr-panel > .sidebar-selected-items {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-bottom: 1px solid #e8e8e8;
}

.file-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload label {
    display: block;
    padding: 8px 10px;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    color: #888;
    transition: border-color 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

.file-upload label:hover {
    border-color: #1976d2;
    color: #1976d2;
}

.file-name {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

.button-group {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.contribute-container button {
    padding: 12px 4px;
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-submit {
    background-color: #1976d2;
    color: white;
}

.btn-submit:hover {
    background-color: #1565c0;
}

.btn-reset {
    background-color: #e0e0e0;
    color: #6B7280;
}

.btn-reset:hover {
    background-color: #d0d0d0;
}

.alert {
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    border: 1px solid;
}

.alert-success {
    background-color: #c8e6c9;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.alert-error {
    background-color: #ffcdd2;
    color: #c62828;
    border-color: #ef9a9a;
}

.contribute-toast,
.profile-v2-copy-toast,
.tabbed-global-toast {
    min-width: 220px;
}

.contribute-toast {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(calc(100% + 32px));
    max-width: min(90vw, 440px);
    padding: 14px 12px 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    background: var(--toast-bg);
    color: var(--toast-text);
    font-size: 16px;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    border: none;
    z-index: 10000;
    transition: transform 0.35s ease, opacity 0.35s ease;
    opacity: 0;
    pointer-events: none;
}

.tabbed-toast__message {
    flex: 1;
    min-width: 0;
    text-align: center;
    color: #ffffff;
    border-radius: 0;
}

.tabbed-toast__close {
    flex-shrink: 0;
    margin: 0;
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.75;
}

.tabbed-toast__close:hover {
    opacity: 1;
}

.contribute-toast.contribute-toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.btn-remove-cert {
    background-color: #e0e0e0;
    color: #6B7280;
    padding: 8px 12px;
    font-size: 11px;
}

.btn-remove-cert:hover {
    background-color: #ef5350;
    color: white;
}

.edit-product-select {
    margin-bottom: 24px;
}

.edit-product-select select {
    width: 100%;
    padding: 8px 10px;
}

.article-form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-end;
}

.article-form-row .form-group {
    flex: 1;
}

.article-form-row textarea {
    resize: vertical;
    min-height: 60px;
}

.article-drafts {
    margin-top: 20px;
}

.article-draft-row {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article-draft-row:last-child {
    border-bottom: none;
}

.article-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
}

.article-item-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.profile-container {
    margin: 0 var(--app-sidebar-width);
    padding: 18px 18px 40px;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .profile-container {
        padding: 22px 26px 48px;
    }
}

/* Account / public profile: inner column matches landing (/) max-width + rhythm */
.profile-account-inner.landing,
.profile-card-inner.landing {
    padding-bottom: 0;
    width: 100%;
}

/* Account hub (/user/…) */
.profile-account-page {
    padding-top: 4px;
}

.profile-account-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 8px 0 20px;
    margin: 0 0 0;
    border-bottom: 1px solid #e8e8e8;
    background: none;
    box-shadow: none;
}

.profile-account-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.profile-page-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.profile-page-avatar-wrap--editable .profile-user-avatar {
    cursor: pointer;
}

.profile-avatar-edit-trigger {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-family: inherit;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}

.profile-avatar-edit-trigger:hover {
    background: rgba(15, 23, 42, 0.88);
}

.profile-avatar-edit-trigger:focus {
    outline: none;
}

.profile-avatar-edit-trigger:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.profile-avatar-edit-trigger__icon {
    font-size: 12px;
    line-height: 1;
    opacity: 0.95;
}

.profile-avatar-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.45);
}

.profile-avatar-modal {
    position: fixed;
    z-index: 10001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.profile-avatar-modal__shell {
    padding: 18px 20px 20px;
}

.profile-avatar-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.profile-avatar-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #334155;
}

.profile-avatar-modal__close {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    color: #64748b;
    border-radius: 4px;
}

.profile-avatar-modal__close:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.profile-avatar-modal__hint {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}

.profile-avatar-modal__pick {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #1565c0;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    border-radius: 0;
}

.profile-avatar-modal__pick:hover {
    background: #f1f5f9;
}

.profile-avatar-canvas-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.profile-avatar-preview-ring {
    width: min(280px, 85vw);
    height: min(280px, 85vw);
    max-width: 280px;
    max-height: 280px;
    flex-shrink: 0;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 1px #e2e8f0,
        0 6px 24px rgba(15, 23, 42, 0.08);
}

.profile-avatar-preview-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: grab;
}

.profile-avatar-preview-canvas:active {
    cursor: grabbing;
}

.profile-avatar-zoom-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 10px;
}

.profile-avatar-zoom-label input[type='range'] {
    width: 100%;
}

.profile-avatar-status {
    min-height: 1.25em;
    margin: 0 0 12px;
    font-size: 13px;
    color: #b91c1c;
}

.profile-avatar-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.profile-avatar-modal__btn {
    min-height: 40px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
}

.profile-avatar-modal__btn--primary {
    background: #1976d2;
    border-color: #1565c0;
    color: #fff;
}

.profile-avatar-modal__btn--primary:hover {
    background: #1565c0;
}

.profile-avatar-modal__btn--danger {
    background: #fff;
    border-color: #dc2626;
    color: #dc2626;
}

.profile-avatar-modal__btn--danger:hover {
    background: #fef2f2;
    border-color: #b91c1c;
    color: #b91c1c;
}

.profile-avatar-modal__btn--secondary:hover {
    background: #f8fafc;
}

.profile-account-header .profile-meta {
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
}

/* Sign out: prominent danger style */
.profile-account-logout-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: #dc2626;
    border: 1px solid #b91c1c;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(127, 29, 29, 0.25);
}

.profile-account-logout-btn:hover {
    border-color: #991b1b;
    color: #fff;
    background: #b91c1c;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.35);
}

.profile-account-logout-btn:focus {
    outline: none;
}

.profile-account-logout-btn:focus-visible {
    outline: 2px solid #f87171;
    outline-offset: 2px;
}

/* Display favorites publicly — same control language as shop “Filter mode” */
.profile-favorites-public-row {
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid #e8e8e8;
}

.profile-favorites-public-mode {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
    box-sizing: border-box;
}

.profile-favorites-public-label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    line-height: 1.2;
}

.profile-favorites-public-toggle {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    align-items: stretch;
    height: 28px;
    border-radius: 0;
    overflow: hidden;
    border: none;
    box-shadow: 0 0 0 1px #d0d0d0;
    background: #fff;
}

.profile-favorites-public-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 12px;
    height: 28px;
    min-height: 0;
    border: none;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.profile-favorites-public-btn + .profile-favorites-public-btn {
    border-left: 1px solid #d0d0d0;
}

.profile-favorites-public-btn:hover:not(.profile-favorites-public-btn--active) {
    background: #f3f4f6;
}

.profile-favorites-public-btn:focus {
    outline: none;
}

.profile-favorites-public-btn:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 0;
    position: relative;
    z-index: 1;
}

.profile-favorites-public-btn--active {
    background: #fff;
    color: #1565c0;
    box-shadow: inset 0 0 0 2px #1976d2;
    position: relative;
    z-index: 1;
}

.profile-favorites-public-btn--active:hover {
    background: #f8fafc;
    color: #1565c0;
    box-shadow: inset 0 0 0 2px #1976d2;
}

/* New profile layout matching landing page */
.profile-account-page--new {
    padding-top: 4px;
}

.profile-account-inner--new {
    padding-top: 0;
}

.profile-hero-new {
    position: relative;
    text-align: center;
    padding: 32px 16px 24px;
    margin: 0 0 24px;
    border-bottom: 1px solid #e8e8e8;
}

@media (min-width: 640px) {
    .profile-hero-new {
        padding: 40px 24px 32px;
        margin: 0 -14px 24px;
        border-radius: 0;
    }
}

.profile-hero-new__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-page-avatar-wrap--new {
    margin-bottom: 16px;
}

.profile-page-avatar-wrap--new .landing-logo__img {
    width: min(124px, 28vw);
    min-width: 96px;
    height: auto;
    aspect-ratio: 526 / 516;
}

.profile-hero-new__content .profile-display-name--gradient {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 3.8vw, 2.25rem);
}

.profile-hero-meta-new {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.5;
}

.profile-hero-favorites {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: #ef4444;
    margin: 0 0 8px;
    line-height: 1.5;
}

.profile-hero-favorites-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.profile-hero-favorites-count {
    font-weight: 500;
}

.profile-hero-divider {
    width: 40px;
    height: 1px;
    background: #d0d0d0;
    margin: 16px auto;
}

.profile-hero-section-heading {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #6b7280;
    margin: 0;
    text-transform: uppercase;
}

.profile-account-body--new {
    padding: 0 16px;
}

@media (min-width: 640px) {
    .profile-account-body--new {
        padding: 0 24px;
    }
}

/* Category grid for new profile */
.profile-categories-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
}

@media (max-width: 768px) {
    .profile-categories-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .profile-categories-grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.profile-category-card-new {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    min-height: 100px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.profile-category-card-new:hover {
    background: #f9f9f9;
    border-color: #d0d0d0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.profile-category-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-category-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.4;
}

.profile-category-card-count {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
    font-weight: 400;
}

.profile-categories-grid-empty,
.profile-categories-grid-loading {
    font-size: 14px;
    color: #94a3b8;
    padding: 40px 20px;
    text-align: center;
    margin-top: 20px;
}

/* Tabs: same language as landing category cards */
.profile-account-tabs {
    display: none;
}

.profile-account-tabs--single {
    display: none;
}

.header-profile-menu-dropdown-new {
    position: fixed;
    top: var(--tabbed-fixed-below-header);
    left: var(--header-profile-overlay-left);
    width: var(--header-profile-overlay-width);
    right: auto;
    min-width: 0;
    margin-top: 0;
    text-align: center;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #d0d0d0;
    border-top: none;
    border-radius: 0 0 2px 2px;
    box-shadow: none;
    z-index: 310;
    max-height: min(85vh, calc(100dvh - var(--tabbed-fixed-below-header) - 1px));
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

.header-profile-menu-dropdown-new[hidden] {
    display: none;
}

/* Same typography as header nav; left accent (mirrors sidebar-style affordance); content centered */
.header-profile-menu-item-new {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--header-profile-menu-item-height);
    height: var(--header-profile-menu-item-height);
    padding: 0 16px;
    margin: 0;
    background: none;
    border: none;
    border-left: 4px solid transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: #6b7280;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-left-color 0.2s ease, color 0.2s ease;
}

.header-profile-menu-item-new:hover {
    border-left-color: #1976d2;
    color: #4a5568;
    background: none;
}

.header-profile-menu-item-new:focus {
    outline: none;
}

.header-profile-menu-item-new:focus-visible {
    outline: 2px solid #c4c4c4;
    outline-offset: -2px;
}

/* Desktop: panel at right; items tightened (after base .header-profile-menu-item-new above) */
@media (min-width: 1180px) {
    .header-profile-menu-dropdown-new {
        left: auto;
        right: 0;
        width: 128px;
        min-width: 128px;
        max-width: 128px;
    }

    .header-profile-menu-item-new {
        padding: 0 8px;
        font-size: 11.5px;
    }
}

/* Logout: separator + red left accent on hover */
#header-profile-menu-logout {
    border-top: 1px solid #e5e7eb;
    border-left: 4px solid transparent;
}

#header-profile-menu-logout:hover {
    border-left-color: #b91c1c;
    color: #4a5568;
    background: none;
}

/* Profile page header adjustments */
.page-wrap--profile .header-profile-avatar-img {
    border-radius: 50%;
}

/* Profile page matching landing page style */
.page-wrap--profile {
    padding: 0;
}

.profile-landing {
    width: 100%;
}

.profile-hero-landing {
    text-align: center;
    padding: 48px 16px;
    margin: 0 0 0;
    position: relative;
    background: linear-gradient(135deg, rgba(90, 159, 212, 0.05) 0%, rgba(155, 143, 216, 0.04) 50%, rgba(232, 160, 191, 0.05) 100%);
}

@media (min-width: 640px) {
    .profile-hero-landing {
        padding: 80px 24px;
    }
}

.profile-hero-landing .landing-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.profile-avatar-landing {
    width: min(140px, 32vw);
    min-width: 104px;
    height: auto;
    margin-bottom: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.profile-hero-landing:hover .profile-avatar-landing {
    transform: scale(1.02);
    box-shadow: 0 12px 40px rgba(90, 159, 212, 0.15);
}

.profile-avatar-circle {
    border-radius: 50%;
    aspect-ratio: 1;
    display: block;
}

.profile-username-heading {
    margin: 0 0 16px;
    font-size: clamp(1.75rem, 4.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    background: linear-gradient(135deg, #5A9FD4 0%, #9B8FD8 35%, #D97AB5 65%, #E8A0BF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #4a5568;
    word-break: break-word;
}

@supports not (background-clip: text) {
    .profile-username-heading {
        background: none;
        -webkit-text-fill-color: unset;
        color: #1976d2;
    }
}

.profile-favorites-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    color: #ef4444;
    margin: 0;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.profile-favorites-display-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
}

.profile-joined-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}

.profile-divider-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
    background: transparent;
}

@media (min-width: 640px) {
    .profile-divider-section {
        padding: 0;
    }
}

.profile-favorites-section {
    padding: 40px 16px 48px;
}

@media (min-width: 640px) {
    .profile-favorites-section {
        padding: 48px 24px 72px;
    }
}

/* Smaller product grid for profile */
.profile-products-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

@media (max-width: 560px) {
    .profile-account-tabs {
        grid-template-columns: 1fr;
    }
}

.profile-account-tab {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 14px;
    margin-bottom: 0;
    font-size: clamp(13px, 2.2vw, 14px);
    font-weight: 400;
    color: #1565c0;
    text-decoration: none;
    text-align: center;
    line-height: 1.25;
    border: 1px solid #d0d0d0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.profile-account-tab .profile-tab-icon {
    flex-shrink: 0;
    opacity: 0.85;
    display: block;
}

.profile-account-tab:hover {
    border-color: #1976d2;
    color: #1565c0;
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}

.profile-account-tab:hover .profile-tab-icon {
    opacity: 1;
}

.profile-account-tab.is-active {
    border-color: #1976d2;
    background: #f8fafc;
    color: #0d47a1;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
}

.profile-account-tab.is-active .profile-tab-icon {
    opacity: 1;
}

.profile-account-tab:focus {
    outline: none;
}

.profile-account-tab:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
    border-color: #1976d2;
}

.profile-account-tab:active {
    transform: scale(0.99);
}

.profile-account-body {
    min-height: 120px;
}

.profile-api-section {
    max-width: 36rem;
}

.profile-api-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #4a5568;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.profile-api-lead {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}

.profile-api-meta {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.profile-api-meta a {
    color: #1976d2;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.profile-api-meta a:hover {
    color: #1565c0;
}

.profile-hero {
    margin-bottom: 28px;
    padding: 12px 0 20px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
}

.profile-hero-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 24px;
    width: 100%;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 640px) {
    .profile-hero-row {
        justify-content: center;
    }

    .profile-stats {
        justify-content: center;
        width: 100%;
    }
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 120px;
    background: #e8f5e9;
    padding: 14px 12px;
    box-sizing: border-box;
}

.profile-stat-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    margin-bottom: 2px;
}

.profile-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #4a5568;
    line-height: 1;
}

.profile-stat-label {
    font-size: 11px;
    color: #555;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-hero-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.profile-identity {
    text-align: left;
}

.profile-username {
    font-size: 1.35rem;
    font-weight: 700;
    color: #4a5568;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}

.profile-display-name {
    display: block;
    font-size: clamp(1.125rem, 2.8vw, 1.35rem);
    font-weight: 600;
    color: #1565c0;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.45;
}

.profile-meta-sep {
    color: #94a3b8;
}

.profile-handle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1565c0;
    margin: 0;
    text-decoration: none;
}

.profile-handle:hover {
    color: #0d47a1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.profile-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-left: auto;
}

.profile-stat-pair {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


.profile-gear-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.profile-gear-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    opacity: 0.55;
    padding: 0;
}

.profile-gear-btn img {
    width: 22px;
    height: 22px;
}

.profile-section {
    margin-bottom: 36px;
}

.profile-section-header {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-section-header img {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.profile-section-content {
    color: #4a5568;
    font-size: 14px;
    line-height: 1.55;
}

/* Profile favorites: min 320px cards (same as shop) */
#profile-favorites-container,
.profile-favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 11px;
}

.profile-favorites-root {
    margin-top: 4px;
}

.profile-favorites-empty {
    margin-top: 0;
    padding: 48px 32px;
    text-align: center;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.6;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.4) 100%);
    border: 1px solid #e8e8e8;
    box-shadow: none;
    box-sizing: border-box;
    border-radius: 0;
}

.profile-favorites-loading {
    color: #94a3b8;
    font-size: 14px;
    margin-top: 12px;
    padding: 24px 20px;
    background: #fafbfc;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.profile-favorites-category-section {
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-favorites-category-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.profile-favorites-category-section .profile-section-header {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
    text-align: left;
}

/* Responsive chrome inside profile product cards — overrides base --pc-* */
.profile-container .product-card {
    --pc-pad: 8px;
    --pc-stack-gap: clamp(4px, 1cqi, 8px);
    --pc-inline-gap: clamp(5px, 1.35cqi, 9px);
    --pc-fs-cat: clamp(9px, 2.45cqi, 12px);
    --pc-fs-name: clamp(9px, calc(8.15px + 0.24cqi), 9.9px);
    --pc-fs-top: clamp(11px, 2.95cqi, 14px);
    --pc-brand-h: clamp(22px, 7.25cqi, 36px);
    --pc-brand-slot: min(34cqi, 120px);
    --pc-buy-minw: clamp(80px, 24cqi, 104px);
    --pc-buy-h: clamp(28px, 8.5cqi, 36px);
    --pc-buy-fs: clamp(10px, 2.85cqi, 13px);
    border-color: #d0d0d0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.profile-container .product-card:hover {
    border-color: #1976d2;
    box-shadow: none;
}

.profile-container .product-main-content--grid {
    gap: 0;
}

.profile-container .product-top-section {
    font-size: 13px;
    gap: 4px;
}

.profile-container .product-brand-img {
    height: 32px;
    max-height: 32px;
}

.profile-container .product-brand-logo-slot {
    flex: 0 0 auto;
    min-width: 32px;
    max-width: 104px;
    width: auto;
}

.profile-container .product-cert-icon {
    height: 24px;
    max-height: 24px;
}

.profile-container .product-name {
    font-size: 13px;
    line-height: 16px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.profile-container .product-category {
    font-size: 12px;
}

.profile-container .made-in-label {
    font-size: 11px;
}

.profile-container .country-name {
    font-size: 12px;
}

.profile-container .product-card .product-bottom-section .buy-button {
    width: auto;
    min-width: var(--pc-buy-minw);
    max-width: none;
    flex: 0 0 auto;
}

.profile-container .favorite-heart {
    width: 18px;
    height: 18px;
}

.profile-container .favorite-heart-icon {
    width: 16px;
    height: 16px;
}

.notification-item {
    padding: 12px 0;
    border-bottom: 1px solid #f3f3f3;
    font-size: 14px;
    color: #4a5568;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-item.is-acked { opacity: 0.5; }

.notification-item:last-child { border-bottom: none; }

.notification-type {
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 2px;
}

.notification-acked-badge {
    font-size: 11px;
    color: #9ca3af;
    border: 1px solid #e0e0e0;
    padding: 2px 7px;
    flex-shrink: 0;
}

.profile-section-header--plain {
    text-transform: none;
    letter-spacing: normal;
    font-size: clamp(1rem, 2.2vw, 1.125rem);
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0;
}

.profile-section-header--plain img {
    display: none;
}

.profile-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e8;
}

.profile-setting-item:last-child {
    border-bottom: none;
}

.profile-setting-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-setting-name {
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
}

.profile-setting-email-inline {
    font-weight: 500;
    color: #334155;
    word-break: break-all;
}

.profile-setting-desc {
    font-size: 12px;
    color: #9ca3af;
}

.profile-setting-control {
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    gap: 8px;
    border: none;
    overflow: visible;
    box-shadow: none;
    background: transparent;
}

.profile-setting-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.profile-setting-btn:hover {
    background: #bbdefb;
    border-color: #64b5f6;
}

.profile-setting-btn.is-active {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
}

.profile-setting-item--danger {
    border-bottom: 1px solid #e8e8e8;
    background: transparent;
}

.notification-time {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
}

.empty-state {
    color: #9ca3af;
    font-size: 14px;
    padding: 24px 16px;
    text-align: center;
    border: 1px dashed #e0e0e0;
    background: #fafafa;
}

.following-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.following-list li {
    padding: 12px 14px;
    border: 1px solid #eee;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #4a5568;
    background: #fff;
}

.following-list li:last-child {
    margin-bottom: 0;
}

.following-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #e8e8e8, #f4f4f4);
}

.tabs-table-wrap {
    overflow-x: auto;
    border: 1px solid #e8e8e8;
}

.tabs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tabs-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
    background: #f9fafb;
}

.tabs-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #4a5568;
    vertical-align: top;
}

.tabs-table tr:last-child td {
    border-bottom: none;
}

.tabs-table .cell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.tabs-table .cell-tag {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.tabs-table .cell-tag--spectrum {
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #4a5568;
    font-weight: 600;
}

.approved-yes {
    color: #2e7d32;
    font-weight: 600;
}

.approved-no {
    color: #999;
}

.payout-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.profile-action-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-action-btn:hover {
    background: #f6f7f9;
    border-color: #c0c0c0;
}

.profile-action-btn--primary {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.profile-action-btn--primary:hover {
    background: #333;
    border-color: #333;
}

.payout-table-wrap {
    overflow-x: auto;
    border: 1px solid #e8e8e8;
}

.payout-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.payout-table th,
.payout-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.payout-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #4a5568;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payout-table tr:last-child td {
    border-bottom: none;
}

.payout-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.profile-footer {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #e8e8e8;
}

.profile-logout-btn {
    width: 100%;
    max-width: 320px;
    display: block;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    border: 1px solid #b91c1c;
    background: #b91c1c;
    color: #fff;
    cursor: pointer;
}

.profile-logout-btn:hover {
    background: #991b1b;
    border-color: #991b1b;
}

/* ── HTML editor ──────────────────────────────────────────────────────────── */
.html-editor {
    border: 1px solid #d0d0d0;
    display: flex;
    flex-direction: column;
}

.html-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid #d0d0d0;
    background: #f9f9f9;
    flex-wrap: wrap;
}

.html-tool-btn {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 4px 5px;
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.html-tool-btn:hover {
    background: #e8e8e8;
    border-color: #d0d0d0;
}

.html-tool-btn--product {
    margin-left: auto;
    opacity: 0.65;
}

.html-tool-btn--product:hover {
    opacity: 1;
}

.html-toolbar-sep {
    width: 1px;
    height: 18px;
    background: #d0d0d0;
    margin: 0 4px;
    flex-shrink: 0;
}

.html-tool-btn--text {
    width: auto;
    min-width: 26px;
    font-size: 13px;
    font-family: inherit;
    padding: 4px 6px;
}

.html-product-picker {
    border-bottom: 1px solid #d0d0d0;
    background: #fff;
}

.html-picker-section {
    border-bottom: 1px solid #e8e8e8;
}

.html-picker-section-hdr {
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #9ca3af;
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}

.html-picker-section-body {
    overflow-y: auto;
    max-height: 160px;
}

.html-picker-product-thumb {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.html-picker-hint {
    padding: 10px 12px;
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}

.html-picker-footer {
    padding: 8px 12px;
    display: flex;
    justify-content: flex-end;
}

/* ── Article product embeds ───────────────────────────────────────────────── */
/* Legacy: compact card (older saved articles) */
.article-product-embed:not(.article-product-embed-expanded) {
    display: inline-block;
    width: 160px;
    vertical-align: top;
    margin: 8px 0;
}

.article-product-embed:not(.article-product-embed-expanded) .product-card {
    width: 160px;
    min-width: 160px;
    min-height: 160px;
}

.article-product-embed:not(.article-product-embed-expanded) .product-image {
    object-fit: contain;
}

.article-product-embed:not(.article-product-embed-expanded) .product-category {
    font-size: 10px;
}

.article-product-embed:not(.article-product-embed-expanded) .product-card .buy-button {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    flex: 0 0 76px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1;
}

.article-product-embed:not(.article-product-embed-expanded) .product-tab-item {
    font-size: 9px;
    padding: 1px 4px;
}

/* Expanded detail embed: homepage modal layout, whole block is one link */
.article-product-embed-expanded {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    vertical-align: initial;
}

.article-body-editor-wrap .article-product-embed,
.article-card .article-body-html .article-product-embed {
    display: block;
    clear: both;
    max-width: 100%;
}

.article-product-embed-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
    outline: none;
}

.article-product-embed-link:hover .article-embed-modal-card {
    box-shadow: none;
    border-color: #1976d2;
}

.article-product-embed-link:focus-visible {
    box-shadow: none;
    outline: 2px solid #1976d2;
    outline-offset: 2px;
    border-radius: 10px;
}

.article-product-embed-link--static {
    cursor: default;
}

.article-product-embed-link--static:hover .article-embed-modal-card {
    box-shadow: none;
    border-color: #e8e8e8;
}

.article-embed-modal-card {
    width: 100%;
    max-width: 100%;
    max-height: none;
    box-shadow: none;
    border: 1px solid #e8e8e8;
    transition: border-color 0.15s ease;
}

.article-product-embed-expanded .modal-header-brand-actions {
    justify-content: flex-end;
}

.article-product-embed-expanded .favorite-heart {
    pointer-events: none;
    opacity: 0.88;
}

.modal-buy-button--embed {
    flex-shrink: 0;
    user-select: none;
}

@media (max-width: 1179px) {
    .article-product-embed-expanded .modal-body {
        flex-direction: column;
    }

    .article-product-embed-expanded .modal-image-col {
        flex: none;
        width: 100%;
        max-width: none;
        aspect-ratio: 1 / 1;
    }
}

.html-picker-confirm {
    background: #2e7d32;
    color: #fff;
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.12s ease;
}

.html-picker-confirm:hover {
    background: #1b5e20;
}

.html-editor-panes {
    min-height: 280px;
}

.html-source {
    display: none;
}

.html-preview {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #4a5568;
    min-height: 280px;
    background: #fff;
    overflow-y: auto;
}

.html-preview h1 { font-size: 18px; margin: 0 0 10px; }
.html-preview h2 { font-size: 15px; margin: 12px 0 8px; }
.html-preview h3 { font-size: 13px; margin: 10px 0 6px; }
.html-preview p  { margin: 0 0 10px; }
.html-preview ul, .html-preview ol { margin: 0 0 10px; padding-left: 20px; }
.html-preview li { margin-bottom: 3px; }
.html-preview a { color: #1976d2; }

.html-preview-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e8e8e8;
}

.html-preview-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.html-preview-header-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.html-preview-title {
    font-size: 18px;
    font-weight: 700;
    color: #4a5568;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.html-preview-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.html-preview-username {
    color: #1565c0;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.html-preview-date {
    font-size: 11px;
    color: #9ca3af;
    letter-spacing: 0.2px;
}

.html-preview-body {
    min-height: 200px;
    outline: none;
    caret-color: #4a5568;
}

.html-preview-body:empty::before {
    content: attr(data-placeholder);
    color: #b0b8c4;
    pointer-events: none;
}

/* ── Article modal: draggable + resizable ─────────────────────────────────── */
.contribute-modal-overlay--article {
    /* Keep backdrop but don't flex-center — modal positions itself */
    align-items: flex-start;
    justify-content: flex-start;
}

#article-modal-box {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 95vw);
    height: 78vh;
    min-width: 520px;
    min-height: 340px;
    max-width: none;
    max-height: none;
    resize: both;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 501;
}

#article-drag-handle {
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

#article-drag-handle:active {
    cursor: grabbing;
}

/* ── Article modal body + form layout ────────────────────────────────────── */
.article-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.article-modal-body > form {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.article-editor-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ── Horizontal formatting toolbar (create article) ────────────────────────── */
.article-html-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
}

.article-html-toolbar .avt-sep {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: #d0d0d0;
    flex-shrink: 0;
    align-self: center;
}

.article-html-toolbar .avt-btn--product {
    margin-bottom: 0;
}

.article-html-toolbar-media {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.avt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: #4a5568;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    transition: background-color 0.1s ease, border-color 0.1s ease;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

.avt-btn:hover {
    background: #e8e8e8;
    border-color: #d0d0d0;
}

.avt-btn--active {
    background: #e3eeff;
    border-color: #1976d2;
    color: #1565c0;
}

.avt-btn--product {
    opacity: 0.7;
    margin-bottom: 2px;
}

.avt-btn--product:hover {
    opacity: 1;
    background: #e8e8e8;
    border-color: #d0d0d0;
}

.avt-small-label {
    font-size: 11px;
    font-weight: 700;
}

.avt-italic-label em {
    font-style: italic;
}

.avt-sep {
    width: 26px;
    height: 1px;
    background: #d0d0d0;
    margin: 3px 0;
    flex-shrink: 0;
}

.avt-btn--media {
    color: #4a5568;
}

/* URL tooltip (link / YouTube) */
.article-url-tooltip[hidden] {
    display: none !important;
}

.article-url-tooltip:not([hidden]) {
    position: fixed;
    z-index: 610;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: none;
    font-family: Helvetica, Arial, sans-serif;
}

.article-url-tooltip-label {
    font-size: 13px;
    color: #4a5568;
    white-space: nowrap;
    flex-shrink: 0;
}

.article-url-tooltip-input {
    border: 1px solid #ccc;
    padding: 5px 8px;
    font-size: 13px;
    min-width: 220px;
    outline: none;
    font-family: Helvetica, Arial, sans-serif;
    color: #4a5568;
    box-sizing: border-box;
}

.article-url-tooltip-input:focus {
    border-color: #06c;
    box-shadow: none;
}

.article-url-tooltip-save {
    background: none;
    border: none;
    color: #06c;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
    font-family: inherit;
}

.article-url-tooltip-save:hover {
    text-decoration: underline;
}

/* ── Article content pane (right side, looks like published article) ──────── */
.article-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}

.article-author-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
    min-width: 0;
}

.article-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.article-author-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 168px;
}

.article-author-username {
    font-size: 13px;
    font-weight: 600;
    color: #1565c0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-author-date {
    font-size: 11px;
    color: #9ca3af;
    letter-spacing: 0.2px;
}

.article-title-input {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    font-size: 22px;
    font-weight: 700;
    font-family: Helvetica, Arial, sans-serif;
    color: #4a5568;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
    background: transparent;
    box-sizing: border-box;
    line-height: 1.2;
    flex-shrink: 0;
}

.article-title-input--header {
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 4px 0 4px 8px;
    border: none;
    border-bottom: none;
    font-size: 20px;
    line-height: 1.25;
}

    .article-title-input::placeholder {
    color: #c0c8d4;
    font-weight: 400;
}

.article-title-input:focus {
    border-bottom-color: #1976d2;
}

.article-title-input--header:focus {    
    box-shadow: none;
}

/* Article body: bordered region under the header rule */
.article-body-editor-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    min-width: 0;
    padding: 12px 14px 14px;
    border: 1px solid #d8dee6;
    border-radius: 0;
    background: #fafbfd;
    box-sizing: border-box;
}

.article-body-editor-wrap:focus-within {
    border-color: #90caf9;
    background: #fff;
    box-shadow: none;
}

/* Contenteditable article body */
.article-body-editor-wrap .article-html-editor {
    flex: 1;
    position: relative;
    padding: 6px 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #4a5568;
    min-height: 168px;
    cursor: text;
    outline: none;
}

.article-body-editor-wrap .article-html-editor.article-html-editor--empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
    position: absolute;
}

.article-body-editor-wrap .article-html-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0.5em 0;
}

.article-body-editor-wrap .article-html-editor img.article-img--resize-hover {
    cursor: nwse-resize;
}

.article-body-editor-wrap .article-html-editor h1 {
    font-size: 1.75em;
    font-weight: 700;
    margin: 0.4em 0 0.35em;
    line-height: 1.2;
    color: #4a5568;
}

.article-body-editor-wrap .article-html-editor h2,
.article-body-editor-wrap .article-html-editor h3 {
    font-weight: 700;
    margin: 0.45em 0 0.3em;
    line-height: 1.25;
    color: #4a5568;
}

.article-body-editor-wrap .article-html-editor h2 {
    font-size: 1.35em;
}

.article-body-editor-wrap .article-html-editor h3 {
    font-size: 1.15em;
}

.article-body-editor-wrap .article-html-editor .article-youtube-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0.65em 0;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #0f0f0f;
}

.article-body-editor-wrap .article-html-editor .article-youtube-embed .article-youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Article form footer (pinned at bottom of modal) */
.article-form-footer {
    margin-top: 0;
    padding: 10px 16px;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.article-form-footer .btn-submit,
.article-form-footer .btn-clear {
    min-width: 132px;
    padding: 12px 28px;
    box-sizing: border-box;
}

/* ── Product insert popup (position: fixed, positioned by JS) ─────────────── */
.qpopup {
    position: fixed;
    z-index: 600;
    background: #fff;
    border: 1px solid #d0d0d0;
    box-shadow: none;
    min-width: 230px;
}

.qpopup-section {
    border-bottom: 1px solid #d0d0d0;
}

.qpopup-section:last-of-type {
    border-bottom: none;
}

.qpopup-header {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    background: #fff;
    color: #4a5568;
    border-left: 4px solid #1976d2;
    user-select: none;
}

.qpopup-select {
    display: block;
    width: 100%;
    padding: 8px 12px 8px 20px;
    border: none;
    border-top: 1px solid #e8e8e8;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    background: #fff;
    cursor: pointer;
    outline: none;
    color: #4a5568;
}

.qpopup-select:focus {
    background: #f9f9f9;
}

.qpopup-footer {
    padding: 10px 12px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
}

.qpopup-insert-btn {
    background: #2e7d32;
    color: #fff;
    border: none;
    padding: 7px 18px;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background-color 0.12s ease;
}

.qpopup-insert-btn:hover:not(:disabled) {
    background: #1b5e20;
}

.qpopup-insert-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── Homepage hero ──────────────────────────────────────────────────────── */
.homepage-hero {
    padding: 28px 24px 20px;
    border-bottom: 1px solid #ebebeb;
    background: #fafafa;
}

.homepage-hero-headline {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #4a5568;
    line-height: 1.25;
}

.homepage-hero-sub {
    margin: 0;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.55;
}

/* ── Category rail ──────────────────────────────────────────────────────── */
.category-rail {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    flex-shrink: 0;
    border-bottom: 1px solid #ebebeb;
    scrollbar-width: none;
}

.category-rail::-webkit-scrollbar {
    display: none;
}

.category-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #d8d8d8;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
    user-select: none;
}

.category-pill:hover {
    border-color: #999;
    background: #f5f5f5;
}

.category-pill.is-active {
    background: #111;
    border-color: #111;
    color: #fff;
}

.category-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Homepage stat bar ──────────────────────────────────────────────────── */
.homepage-stat-bar {
    display: flex;
    gap: 20px;
    padding: 10px 24px;
    font-size: 12px;
    color: #888;
    border-bottom: 1px solid #ebebeb;
    background: #fff;
    flex-shrink: 0;
}

.homepage-stat-bar strong {
    color: #4a5568;
    font-weight: 600;
}

/* Product count label that updates after filter */
#homepage-product-count {
    font-size: 12px;
    color: #888;
    padding: 0 4px;
}

/* ── Home About Section ─────────────────────────────────────────────────── */
.home-about-section {
    max-width: 600px;
    margin: 40px auto;
    padding: 0 24px;
}

.home-about-title {
    font-size: 24px;
    font-weight: 600;
    color: #4a5568;
    margin: 0 0 16px 0;
}

.home-about-body {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}

.home-about-body p {
    margin: 0 0 12px 0;
}

.home-about-body p:last-child {
    margin-bottom: 0;
}

/* ── Profile v2 (public /user/{name}) ───────────────────────────────────── */
/* Consistent 16px gutter; hero + favorites fill the shell (public user page overrides horizontal padding below). */
.page-wrap.page-wrap--profile-v2 {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
}

/* Public /user/{name} favorites: full viewport width (safe-area only); settings keeps default padding. */
.page-wrap.page-wrap--profile-v2.page-wrap--profile-favorites:not(.profile-account-page--settings-v2) {
    padding-left: 16px;
    padding-right: 16px;
}

/* Settings uses the same page-wrap inset and hero shell as favorites (.page-wrap--profile-favorites). */
.profile-account-page--settings-v2 .profile-account-body--new {
    padding: 0;
}

.profile-account-page--settings-v2 .profile-settings-v2-rows {
    background: #ffffff;
    border-color: #e8edf2;
}

.profile-settings-v2-below-hero {
    width: 100%;
    margin: 0;
    padding: 0 0 16px;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .profile-settings-v2-below-hero {
        padding-bottom: 24px;
    }
}

/* Banner + favorites / settings: fill the profile page-wrap width */
.page-wrap--profile-v2 > .profile-v2-hero,
.page-wrap--profile-v2 > .profile-v2-favorites,
.page-wrap--profile-v2 > .profile-settings-v2-below-hero {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Settings page only: hero (identity) + settings block share one column width — 320px; 640px on desktop */
.profile-account-page--settings-v2 .profile-v2-hero__card {
    width: 320px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .profile-account-page--settings-v2 .profile-v2-hero__card {
        width: 640px;
    }
}

/* Settings block under hero: same widths as identity card */
.profile-settings-v2-panel {
    padding: 0;
    background: transparent;
    width: 320px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .profile-settings-v2-panel {
        width: 640px;
    }
}

.profile-settings-v2-card {
    --setting-pad-x: max(18px, env(safe-area-inset-left, 0px));
    --setting-pad-x-end: max(18px, env(safe-area-inset-right, 0px));
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .profile-settings-v2-card {
        --setting-pad-x: max(28px, env(safe-area-inset-left, 0px));
        --setting-pad-x-end: max(28px, env(safe-area-inset-right, 0px));
    }
}

.profile-settings-v2-section {
    color: #334155;
    font-size: 15px;
    line-height: 1.55;
}

.profile-settings-v2-intro {
    padding: 24px var(--setting-pad-x) 20px var(--setting-pad-x-end);
    border-bottom: 1px solid #f1f5f9;
}

.profile-settings-v2-title {
    margin: 0 0 8px;
    font-size: clamp(1.25rem, 2.8vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.profile-settings-v2-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
    max-width: 40em;
}

.profile-settings-v2-groups {
    display: flex;
    flex-direction: column;
}

.profile-settings-v2-group-title {
    margin: 0 0 12px;
    padding: 0 var(--setting-pad-x-end) 0 var(--setting-pad-x);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.profile-settings-v2-rows {
    display: flex;
    flex-direction: column;
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.profile-settings-v2-card .profile-setting-item.profile-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    gap: 10px clamp(12px, 3vw, 24px);
    align-items: start;
    padding: 18px var(--setting-pad-x-end) 18px var(--setting-pad-x);
    border-bottom: 1px solid #e8edf2;
    box-sizing: border-box;
}

@media (min-width: 720px) {
    .profile-settings-v2-card .profile-setting-item.profile-setting-row {
        padding-top: 22px;
        padding-bottom: 22px;
    }
}

.profile-settings-v2-card .profile-setting-item.profile-setting-row .profile-setting-label {
    justify-self: start;
    min-width: 0;
}

.profile-settings-v2-card .profile-setting-item.profile-setting-row .profile-setting-item__controls {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.profile-settings-v2-card .profile-setting-item.profile-setting-row:last-child {
    border-bottom: none;
}

.profile-settings-v2-card .profile-setting-label {
    min-width: 0;
}

.profile-settings-v2-card .profile-setting-row .profile-setting-label {
    padding-right: 0;
}

.profile-settings-v2-card .profile-setting-item__controls,
.profile-settings-v2-card .profile-setting-row__actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
}

.profile-settings-v2-card .profile-setting-name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.profile-settings-v2-card .profile-setting-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
    margin-top: 4px;
    display: block;
}


/* Primary actions: same typography as .header-login-btn (300 / 0.3px / 12px) */
.profile-settings-v2-card .profile-setting-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 1;
    font-family: inherit;
    color: #fff;
    background: #1976d2;
    border: 1px solid #1976d2;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.profile-settings-v2-card .profile-setting-action:hover {
    background: #1565c0;
    border-color: #1565c0;
}

.profile-settings-v2-card .profile-setting-action:focus {
    outline: none;
}

.profile-settings-v2-card .profile-setting-action:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.profile-settings-v2-card .profile-setting-action--danger {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}

.profile-settings-v2-card .profile-setting-action--danger:hover {
    background: #b71c1c;
    border-color: #b71c1c;
}

.profile-settings-v2-card .profile-setting-action--danger:focus-visible {
    outline: 2px solid #c62828;
    outline-offset: 2px;
}

/* Off/On, Yes/No — same frame + active style as shop filter AND/OR ( .shop-filter-mode-toggle / --active ) */
.profile-settings-v2-card .profile-setting-control {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    flex-shrink: 0;
    gap: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: none;
    box-shadow: 0 0 0 1px #d0d0d0;
    background: #fff;
}

.profile-settings-v2-card .profile-setting-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    margin: 0;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1;
    font-family: inherit;
    border: none;
    background: #fff;
    color: #6b7280;
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.profile-settings-v2-card .profile-setting-btn + .profile-setting-btn {
    border-left: 1px solid #d0d0d0;
}

.profile-settings-v2-card .profile-setting-btn:hover:not(.is-active) {
    background: #f3f4f6;
}

.profile-settings-v2-card .profile-setting-btn.is-active {
    background: #fff;
    color: #1565c0;
    box-shadow: inset 0 0 0 2px #1976d2;
    position: relative;
    z-index: 1;
}

.profile-settings-v2-card .profile-setting-btn.is-active:hover {
    background: #f8fafc;
    color: #1565c0;
    box-shadow: inset 0 0 0 2px #1976d2;
}

.profile-settings-v2-card .profile-setting-btn:focus {
    outline: none;
}

.profile-settings-v2-card .profile-setting-btn:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 0;
    position: relative;
    z-index: 1;
}



/* No rounded corners on this page (product cards, meta tiles); avatar is circular below */
.page-wrap--profile-v2,
.page-wrap--profile-v2 *,
.page-wrap--profile-v2 *::before,
.page-wrap--profile-v2 *::after {
    border-radius: 0 !important;
}

.page-wrap--profile-v2 .profile-v2-avatar-shell,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-avatar-shell {
    border-radius: 50% !important;
    overflow: hidden !important;
}

/* Avatar crop modal lives inside profile-v2 page; restore circular preview (global * rule zeros radius). */
.page-wrap--profile-v2 .profile-avatar-preview-ring {
    border-radius: 50% !important;
    overflow: hidden !important;
}

.profile-v2-hero {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
}

/* Same liquid shell as header / landing category tiles */
.profile-v2-hero__card {
    position: relative;
    border: 1px solid var(--tabbed-liquid-edge);
    background-color: var(--tabbed-liquid-bg);
    background-image: var(--tabbed-liquid-layers);
    backdrop-filter: var(--tabbed-liquid-blur);
    -webkit-backdrop-filter: var(--tabbed-liquid-blur);
    padding: 20px 16px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .profile-v2-hero__card {
        padding: 24px 16px;
    }
}

/* Stack: avatar → text column (title + meta) */
.profile-v2-identity {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Title + optional meta; centered below avatar on wide layout */
.profile-v2-identity__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

/* Avatar: 128×128 circle clip */
.profile-v2-avatar-shell {
    flex-shrink: 0;
    width: 128px;
    height: 128px;
    overflow: hidden;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.profile-v2-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-v2-avatar--placeholder {
    object-fit: contain;
    object-position: center;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Display name: clear hierarchy; copy row is the interactive surface */
.page-wrap--profile-v2 .profile-v2-title,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-title {
    margin: 0;
    padding: 0;
    align-self: center;
    width: 100%;
    max-width: none;
    display: flex;
    justify-content: center;
    text-align: center;
    white-space: normal;
    text-wrap: balance;
    word-break: break-word;
    font-size: clamp(1.0625rem, 2.1vw, 1.375rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #1565c0;
}

/* Entire row copies profile URL */
.profile-v2-copy-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    flex-wrap: wrap;
    margin: 0;
    padding: 8px 18px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: center;
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.page-wrap--profile-v2 .profile-v2-copy-row:hover,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-copy-row:hover {
    background: rgba(25, 118, 210, 0.07);
    box-shadow: 0 1px 0 rgba(25, 118, 210, 0.06);
}

.page-wrap--profile-v2 .profile-v2-copy-row:active,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-copy-row:active {
    background: rgba(25, 118, 210, 0.11);
}

.profile-v2-copy-row:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 3px;
}

.profile-v2-copy-row__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.page-wrap--profile-v2 .profile-v2-copy-row__link-svg,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-copy-row__link-svg {
    display: block;
    width: 20px;
    height: 20px;
    color: #1565c0;
    flex-shrink: 0;
    stroke-width: 2;
    opacity: 1;
}

.page-wrap--profile-v2 .profile-v2-copy-row__link-svg path,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-copy-row__link-svg path {
    vector-effect: non-scaling-stroke;
}

.page-wrap--profile-v2 .profile-v2-copy-row__name,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-copy-row__name {
    text-align: center;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #1565c0;
    font-weight: 600;
}

/* Toast bottom-center: copy profile link (same chrome as .tabbed-global-toast) */
.profile-v2-copy-toast {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    max-width: min(420px, calc(100vw - 32px));
    min-height: 40px;
    padding: 10px 16px;
    margin: 0;
    border-radius: 6px;
    box-sizing: border-box;
    background: var(--toast-bg);
    color: var(--toast-text);
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.35;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    pointer-events: none;
}

.profile-v2-copy-toast[hidden] {
    display: none !important;
}

/* Global toast bottom-center: logout, settings saved, admin, etc. */
.tabbed-global-toast {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    max-width: min(420px, calc(100vw - 32px));
    min-height: 40px;
    padding: 10px 16px;
    margin: 0;
    box-sizing: border-box;
    background: var(--toast-bg);
    color: var(--toast-text);
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.35;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    pointer-events: none;
}

.tabbed-global-toast[hidden] {
    display: none !important;
}

.tabbed-global-toast.tabbed-global-toast--error {
    --toast-bg: var(--toast-error-bg);
}

.profile-v2-meta {
    width: 100%;
    max-width: 428px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.profile-v2-meta-bunch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

@media (min-width: 640px) {
    .page-wrap--profile-v2 .profile-v2-meta-bunch,
    .mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-bunch {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
        gap: 12px 20px;
    }

    /* Two tiles: equal width columns */
    .page-wrap--profile-v2 .profile-v2-meta-bunch > .profile-v2-meta-tile:not(:only-child),
    .mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-bunch > .profile-v2-meta-tile:not(:only-child) {
        flex: 1 1 0;
        width: auto;
    }
}

.page-wrap--profile-v2 .profile-v2-meta-tile.landing-category-card,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile.landing-category-card {
    box-shadow: none !important;
}

.page-wrap--profile-v2 .profile-v2-meta-tile,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: min(200px, 100%);
    align-self: stretch;
    margin: 0;
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #e8ecf1 !important;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

/* Single meta tile: don’t stretch full band */
.page-wrap--profile-v2 .profile-v2-meta-bunch > .profile-v2-meta-tile:only-child,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-bunch > .profile-v2-meta-tile:only-child {
    flex: 0 1 auto;
    width: auto;
    max-width: min(240px, 100%);
    align-self: center;
}

/* Joined: logo + label as plain text (no card border/background) */
.page-wrap--profile-v2 .profile-v2-meta-tile.profile-v2-meta-tile--joined,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile.profile-v2-meta-tile--joined {
    width: auto;
    max-width: none;
    align-self: center;
    min-height: 0;
    height: auto;
    padding: 0;
    margin: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #64748b;
    transition: none;
}

.page-wrap--profile-v2 .profile-v2-meta-tile--joined .profile-v2-meta-tile__inner,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile--joined .profile-v2-meta-tile__inner {
    gap: 8px;
    flex-wrap: nowrap;
    width: auto;
    color: inherit;
}

.page-wrap--profile-v2 .profile-v2-meta-tile__logo,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile__logo {
    flex-shrink: 0;
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Override global .landing-category-card:hover / :active — tiles stay visually static */
.page-wrap--profile-v2 .profile-v2-meta-tile.landing-category-card:hover,
.page-wrap--profile-v2 .profile-v2-meta-tile.landing-category-card:active,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile.landing-category-card:hover,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile.landing-category-card:active {
    transform: none;
    box-shadow: none !important;
}

.page-wrap--profile-v2 .profile-v2-meta-tile.landing-category-card:focus,
.page-wrap--profile-v2 .profile-v2-meta-tile.landing-category-card:focus-visible,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile.landing-category-card:focus,
.mobile-cat-menu .mobile-cat-menu__profile-v2-hero .profile-v2-meta-tile.landing-category-card:focus-visible {
    outline: none;
}

.profile-v2-meta-tile__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}

.profile-v2-favorites {
    margin: 12px 0 0;
    padding: 0 0 16px;
}

@media (min-width: 640px) {
    .profile-v2-favorites {
        padding: 0 0 24px;
    }
}

/* Public /user favorites: flush hero + cards (all viewports); hero’s border includes the bottom edge */
.page-wrap--profile-favorites .profile-v2-favorites {
    margin-top: 0;
    padding-top: 0;
}

.page-wrap--profile-favorites .profile-v2-favorites__card,
.page-wrap--profile-favorites .profile-v2-favorites__card--hidden-notice,
.page-wrap--profile-favorites .profile-settings-v2-card {
    border-top: none;
}

.page-wrap--profile-favorites .profile-settings-v2-below-hero {
    margin-top: 0;
    padding-top: 0;
}

/* Same shell as .profile-v2-hero__card: light border, no shadow; top border omitted on favorites page via .page-wrap--profile-favorites */
.profile-v2-favorites__card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-v2-favorites__card > .shop-empty-state.profile-v2-empty {
    margin: 0;
    padding: 24px 16px;
    text-align: center;
}

#profile-shop-empty-state:not([hidden]) ~ .profile-v2-favorites__desktop,
#profile-shop-empty-state:not([hidden]) ~ .profile-v2-favorites__mobile {
    display: none !important;
}

.profile-v2-favorites__desktop {
    display: block;
}

.profile-v2-favorites__mobile {
    display: none;
}

@media (max-width: 1179px) {
    .profile-v2-favorites__desktop {
        display: none !important;
    }

    .profile-v2-favorites__mobile {
        display: block;
    }

    /* Favorites page: compact hero ~⅓ prior footprint (border/shadow match desktop hero) */
    .page-wrap--profile-favorites .profile-v2-hero__card {
        padding: 6px 12px 8px;
    }

    /* Favorites mobile: compact hero; avatar + text column, all centered */
    .page-wrap--profile-favorites .profile-v2-identity {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .page-wrap--profile-favorites .profile-v2-identity__main {
        flex: none;
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .page-wrap--profile-favorites .profile-v2-avatar-shell {
        width: 80px;
        height: 80px;
    }

    .page-wrap--profile-favorites .profile-v2-title {
        font-size: 0.875rem;
        align-self: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .page-wrap--profile-favorites .profile-v2-copy-row {
        justify-content: center;
        text-align: center;
        padding: 3px 8px;
        gap: 6px;
    }

    .page-wrap--profile-favorites .profile-v2-copy-row__link-svg {
        width: 13px;
        height: 13px;
    }

    .page-wrap--profile-favorites .profile-v2-copy-row__name {
        text-align: center;
    }

    .page-wrap--profile-favorites .profile-v2-meta {
        max-width: none;
        margin: 0;
        padding: 0;
        width: 100%;
        justify-content: center;
        align-self: center;
    }

    .page-wrap--profile-favorites .profile-v2-meta-bunch {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 8px;
    }

    .page-wrap--profile-favorites .profile-v2-meta-bunch > .profile-v2-meta-tile:only-child {
        align-self: center;
    }

    .page-wrap--profile-favorites .profile-v2-meta-tile {
        width: auto;
        max-width: min(200px, 100%);
        align-self: center;
        min-height: 0;
        padding: 5px 10px;
        font-size: 12px;
    }

    .page-wrap--profile-favorites .profile-v2-meta-tile__logo {
        width: 14px;
        height: 14px;
    }

    .page-wrap--profile-favorites .profile-v2-meta-tile.profile-v2-meta-tile--joined {
        padding: 0;
        min-height: 0;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* Mobile: vertical accordion — one category per row, expandable product list */
.profile-v2-f-acc-item {
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
}

.profile-v2-f-acc-item:last-child {
    border-bottom: none;
}

.profile-v2-f-acc-summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    margin: 0;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
}

.profile-v2-f-acc-summary::-webkit-details-marker {
    display: none;
}

.profile-v2-f-acc-summary__main {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}

.profile-v2-f-acc-summary__label {
    font-weight: 600;
}

.profile-v2-f-acc-summary__meta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-weight: 500;
    color: #64748b;
}

.profile-v2-f-acc-summary__g {
    color: inherit;
}

.profile-v2-f-acc-summary__num {
    color: #dc2626;
}

.profile-v2-f-acc-summary__heart {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 0 0 1px;
    vertical-align: -2px;
    object-fit: contain;
    flex-shrink: 0;
}

.profile-v2-f-acc-summary__chev {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.profile-v2-f-acc-summary__chev-icon {
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.profile-v2-f-acc-item[open] .profile-v2-f-acc-summary__chev-icon {
    transform: rotate(180deg);
}

@media (max-width: 1179px) {
    /* Must follow base .profile-v2-f-acc-summary so it wins the cascade */
    .profile-v2-f-acc-summary {
        min-height: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 300;
        letter-spacing: 0.02em;
        color: #6b7280;
        gap: 8px;
    }

    .profile-v2-f-acc-summary__main {
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .profile-v2-f-acc-summary__label {
        font-weight: 300;
        color: #6b7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .profile-v2-f-acc-summary__meta {
        font-weight: 300;
        color: #6b7280;
        flex-shrink: 0;
    }

    .profile-v2-f-acc-summary__num {
        color: #6b7280;
    }

    .profile-v2-f-acc-summary__heart {
        opacity: 0.85;
    }

    .profile-v2-f-acc-summary__chev {
        width: 28px;
        height: 28px;
        color: #9ca3af;
    }
}

.profile-v2-f-acc-summary:focus {
    outline: none;
}

.profile-v2-f-acc-summary:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: -2px;
}

.profile-v2-f-acc-panel {
    padding: 0 16px 16px;
    background: #fff;
    box-sizing: border-box;
}

.profile-v2-f-acc-empty {
    margin: 0;
    padding: 12px 0 0;
    font-size: 14px;
    color: #64748b;
    text-align: left;
}

.profile-v2-favorites__card--hidden-notice {
    padding: 24px 16px;
    text-align: center;
}

p.profile-v2-empty--favorites-hidden {
    margin: 0;
    font-weight: 600;
    color: #64748b;
}

/* Category strip — profile-only chips (not header nav mains) */
.profile-v2-favorites__category-panel {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
}

/* Wrap so all 10 tabs (All + 9 mains) stay visible without horizontal-only scroll */
.page-wrap--profile-v2 .profile-v2-favorites__category-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    gap: 0;
    column-gap: 0;
    row-gap: 6px;
    box-sizing: border-box;
    background: #fff;
    overflow: visible;
    flex: 0 0 auto;
}

/* Profile favorites chips — same bottom bar treatment as .header-category-main; no flex gap so blue bars meet, horizontal padding spaces label text */
.page-wrap--profile-v2 button.profile-v2-fav-chip.profile-v2-fav-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 40px;
    padding: 0 14px;
    margin: 0;
    font-size: 11px !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 4px solid transparent;
    background: none;
    cursor: pointer;
    transition:
        border-bottom-color 0.2s ease,
        color 0.2s ease;
}

/* Label color stays the same gray when selected; only the bottom bar indicates selection */
.page-wrap--profile-v2 button.profile-v2-fav-chip.profile-v2-fav-filter:hover,
.page-wrap--profile-v2 button.profile-v2-fav-chip.profile-v2-fav-filter:focus-visible {
    color: #64748b;
    border-bottom-color: #1976d2;
    outline: none;
}

.page-wrap--profile-v2 button.profile-v2-fav-chip.profile-v2-fav-filter.is-active {
    color: #64748b;
    border-bottom-color: #1976d2;
    font-weight: 500;
}

.page-wrap--profile-v2 .profile-v2-fav-filter__label {
    margin-right: 2px;
}

/* Parentheses inherit tab gray; only count + heart are red */
.page-wrap--profile-v2 .profile-v2-fav-filter__g {
    color: inherit;
}

.page-wrap--profile-v2 .profile-v2-fav-filter__num {
    color: #dc2626;
}

.page-wrap--profile-v2 button.profile-v2-fav-chip.profile-v2-fav-filter:hover .profile-v2-fav-filter__num,
.page-wrap--profile-v2 button.profile-v2-fav-chip.profile-v2-fav-filter.is-active .profile-v2-fav-filter__num {
    color: #dc2626;
}

.page-wrap--profile-v2 .profile-v2-fav-filter__heart {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 0 0 1px;
    vertical-align: -2px;
    object-fit: contain;
    flex-shrink: 0;
}

.profile-v2-favorites__body--desktop {
    padding: 16px;
    box-sizing: border-box;
}

/* Favorites: same min 320px / card as shop — single column but track ≥320px wide */
.page-wrap--profile-v2 .profile-v2-f-acc-grid.profile-v2-products-host.profile-v2-products.shop-products-grid {
    grid-template-columns: minmax(320px, 1fr);
}

.page-wrap--profile-v2 .profile-v2-products-host.profile-v2-products.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    align-items: start;
}

.page-wrap--profile-v2 .profile-v2-products-host.profile-v2-products .product-card {
    width: 100%;
    min-width: 320px;
    max-width: none;
    box-sizing: border-box;
    /* Favorites: slightly denser than shop; type + chrome still track card width (cqi) */
    --pc-pad: 8px;
    --pc-stack-gap: clamp(2px, 0.72cqi, 5px);
    --pc-inline-gap: clamp(3px, 1.05cqi, 7px);
    --pc-fs-cat: clamp(7.5px, 2.1cqi, 10.5px);
    --pc-fs-name: clamp(9px, calc(8.15px + 0.24cqi), 9.9px);
    --pc-fs-top: clamp(9px, 2.45cqi, 12px);
    --pc-actions-h: clamp(16px, 5.35cqi, 24px);
    --pc-heart: clamp(14px, 5.1cqi, 22px);
    --pc-heart-icon: clamp(12px, 4.35cqi, 18px);
    --pc-brand-h: clamp(16px, 6.1cqi, 28px);
    --pc-brand-slot: min(28cqi, 96px);
    --pc-buy-h: clamp(24px, 7.35cqi, 31px);
    --pc-buy-fs: clamp(9px, 2.5cqi, 12px);
    --pc-buy-minw: clamp(68px, 20cqi, 92px);
    --pc-buy-pad-x: clamp(6px, 1.85cqi, 12px);
}

.page-wrap--profile-v2 .profile-v2-products-host.profile-v2-products .product-card,
.page-wrap--profile-v2 .profile-v2-products-host.profile-v2-products .product-card:hover {
    box-shadow: none;
}

/* Narrow cards: cert strip width cap only — rest scales via --pc-* / cqi */
@container product-card (max-width: 380px) {
    .product-card .product-top-inline-certs {
        max-width: min(46cqi, 170px);
    }
}

.profile-v2-empty.shop-empty-state {
    margin-top: 12px;
}

/* Account hero: default avatar ring & settings pencil */
.profile-avatar-ring {
    position: relative;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar-ring--compact {
    width: 124px;
    height: 124px;
    position: relative;
}

.profile-avatar-ring:not(.profile-avatar-ring--default) .profile-user-avatar {
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.profile-avatar-ring--default {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-ring--default .profile-user-avatar--default {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0;
    box-sizing: border-box;
}

.profile-avatar-pencil {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #1976d2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.profile-avatar-pencil:hover {
    background: #1565c0;
    transform: scale(1.04);
}

.profile-avatar-pencil:focus {
    outline: none;
}

.profile-avatar-pencil:focus-visible {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.profile-hero-page-desc {
    margin: 8px 0 0;
    font-size: 15px;
    color: #64748b;
    line-height: 1.5;
    max-width: 36rem;
}