@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Montserrat:wght@500;600;700;800&display=swap"); .protella-portal {
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 999px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 56px;
--space-10: 72px;
--font-body: 'Heebo', 'Inter', system-ui, sans-serif;
--font-display: 'Montserrat', 'Heebo', system-ui, sans-serif;
--t-fast: 140ms cubic-bezier(.2,.6,.2,1);
--t-base: 240ms cubic-bezier(.2,.6,.2,1);
--t-slow: 380ms cubic-bezier(.2,.6,.2,1);
font-family: var(--font-body);
font-weight: 400;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
direction: rtl;
text-align: right;
} .protella-portal.theme-light {
--bg:        #F6F4EE; --bg-soft:   #EFECE4;
--surface:   #FFFFFF;
--surface-2: #FBFAF6;
--ink:       #0E0F12;
--ink-2:     #44495A;
--ink-3:     #7A8092;
--ink-4:     #B6BAC6;
--border:    #E7E3D8;
--border-2:  #DEDAD0;
--line:      #F0EDE3;
--accent:        #0E0F12; --accent-ink:    #FFFFFF;
--accent-soft:   rgba(14,15,18,.06);
--accent-hover:  #1F2127;
--tint-blue:   #EEF1FF;
--tint-blue-2: #4A4AFF;
--tint-green:  #E6F4EC;
--tint-amber:  #FAF0DA;
--tint-rose:   #FBE9EC;
--success:  #1F8A5B;
--warning:  #B26A00;
--danger:   #C0392B;
--info:     #2A6FDB;
--shadow-xs: 0 1px 0 rgba(14,15,18,.04);
--shadow-sm: 0 1px 2px rgba(14,15,18,.05), 0 1px 0 rgba(14,15,18,.03);
--shadow-md: 0 6px 18px rgba(14,15,18,.06), 0 1px 0 rgba(14,15,18,.04);
--shadow-lg: 0 20px 60px rgba(14,15,18,.10), 0 4px 12px rgba(14,15,18,.06);
--skel-1: #ECE9DF;
--skel-2: #F4F1E8;
color-scheme: light;
} .protella-portal.theme-slip {
--bg:        #0A0A0A;
--bg-soft:   #0F0F10;
--surface:   #141415;
--surface-2: #1A1A1C;
--ink:       #FFFFFF;
--ink-2:     #BCBCC0;
--ink-3:     #8B8B91;
--ink-4:     #5C5C63;
--border:    #232325;
--border-2:  #2C2C2F;
--line:      #1D1D1F;
--accent:        #FFFFFF;
--accent-ink:    #0A0A0A;
--accent-soft:   rgba(255,255,255,.08);
--accent-hover:  #E9E9EC;
--tint-blue:   rgba(74,74,255,.14);
--tint-blue-2: #6B6BFF;
--tint-green:  rgba(31,138,91,.18);
--tint-amber:  rgba(178,106,0,.20);
--tint-rose:   rgba(192,57,43,.18);
--success:  #4ADE80;
--warning:  #F5B660;
--danger:   #FF6B6B;
--info:     #6BA6FF;
--shadow-xs: 0 1px 0 rgba(0,0,0,.4);
--shadow-sm: 0 1px 2px rgba(0,0,0,.5);
--shadow-md: 0 8px 24px rgba(0,0,0,.45);
--shadow-lg: 0 24px 64px rgba(0,0,0,.55);
--skel-1: #1A1A1C;
--skel-2: #232325;
color-scheme: dark;
} .protella-portal.theme-sport {
--bg:        #06080F;
--bg-soft:   #0A0D18;
--surface:   #0F1322;
--surface-2: #141A2D;
--ink:       #FFFFFF;
--ink-2:     #B7BCD0;
--ink-3:     #828AA3;
--ink-4:     #555D77;
--border:    rgba(255,255,255,.08);
--border-2:  rgba(255,255,255,.14);
--line:      rgba(255,255,255,.06);
--accent:        #4A4AFF;
--accent-ink:    #FFFFFF;
--accent-soft:   rgba(74,74,255,.18);
--accent-hover:  #6363FF;
--tint-blue:   rgba(74,74,255,.18);
--tint-blue-2: #7878FF;
--tint-green:  rgba(31,138,91,.20);
--tint-amber:  rgba(245,182,96,.18);
--tint-rose:   rgba(255,107,107,.18);
--success:  #4ADE80;
--warning:  #F5B660;
--danger:   #FF6B6B;
--info:     #7BA8FF;
--shadow-xs: 0 1px 0 rgba(0,0,0,.4);
--shadow-sm: 0 1px 3px rgba(0,0,0,.5);
--shadow-md: 0 8px 28px rgba(0,0,0,.5);
--shadow-lg: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(74,74,255,.10);
--skel-1: #0F1322;
--skel-2: #1A2138;
color-scheme: dark;
} .protella-portal { min-height: 100vh; }
.pp-app {
display: grid;
grid-template-columns: 1fr 280px; min-height: 100vh;
background: var(--bg);
} .pp-sidebar {
position: sticky;
top: 0;
height: 100vh;
background: var(--surface);
border-inline-start: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: var(--space-6) var(--space-5);
gap: var(--space-6);
}
.pp-brand {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--line);
}
.pp-brand__wordmark {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
letter-spacing: 2.2px;
color: var(--ink);
}
.pp-brand__tag {
font-size: 12px;
color: var(--ink-3);
letter-spacing: .4px;
}
.pp-nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.pp-nav__label {
font-size: 10.5px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: 1.4px;
text-transform: uppercase;
padding: 0 var(--space-3) var(--space-2);
}
.pp-navitem {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px var(--space-3);
border-radius: var(--radius-sm);
color: var(--ink-2);
font-size: 14.5px;
font-weight: 500;
cursor: pointer;
border: none;
background: transparent;
text-align: right;
width: 100%;
transition: background var(--t-fast), color var(--t-fast);
position: relative;
}
.pp-navitem:hover { background: var(--accent-soft); color: var(--ink); }
.pp-navitem.is-active {
background: var(--accent-soft);
color: var(--ink);
font-weight: 600;
}
.pp-navitem.is-active::before {
content: '';
position: absolute;
inset-inline-end: -20px; top: 50%;
transform: translateY(-50%);
width: 3px;
height: 18px;
background: var(--accent);
border-radius: 3px;
}
.pp-navitem__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: .9;
}
.pp-navitem__label { flex: 1; }
.pp-navitem__badge {
background: var(--accent);
color: var(--accent-ink);
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: var(--radius-pill);
min-width: 18px;
text-align: center;
}
.pp-sidebar__spacer { flex: 1; }
.pp-account {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
.pp-account .pp-navitem { font-size: 13.5px; padding: 8px var(--space-3); }
.pp-account .pp-navitem__icon { width: 16px; height: 16px; }
.pp-usercard {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.pp-avatar {
width: 38px;
height: 38px;
border-radius: var(--radius-pill);
background: var(--accent);
color: var(--accent-ink);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: .5px;
flex-shrink: 0;
}
.pp-usercard__name {
font-weight: 600;
font-size: 13.5px;
color: var(--ink);
line-height: 1.25;
}
.pp-usercard__meta {
font-size: 11.5px;
color: var(--ink-3);
margin-top: 2px;
font-variant-numeric: tabular-nums;
} .pp-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.pp-topbar {
position: sticky;
top: 0;
z-index: 20;
background: color-mix(in oklab, var(--bg) 88%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
padding: var(--space-5) var(--space-8);
display: flex;
align-items: center;
gap: var(--space-5);
}
.pp-topbar__titles { flex: 1; min-width: 0; }
.pp-topbar__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.15;
}
.pp-topbar__sub {
font-size: 13px;
color: var(--ink-3);
margin-top: 2px;
}
.pp-cartbtn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 10px 16px 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--ink);
font-weight: 600;
font-size: 13.5px;
cursor: pointer;
transition: all var(--t-fast);
position: relative;
}
.pp-cartbtn:hover { border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pp-cartbtn__icon { width: 18px; height: 18px; }
.pp-cartbtn__count {
background: var(--accent);
color: var(--accent-ink);
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: var(--radius-pill);
min-width: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.pp-cartbtn.is-bumped { animation: bump .4s var(--t-base); }
@keyframes bump {
0%, 100% { transform: scale(1); }
35%      { transform: scale(1.08); }
} .pp-view {
padding: var(--space-8);
max-width: 1200px;
width: 100%;
margin-inline: auto;
animation: viewIn .32s var(--t-base);
}
@keyframes viewIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
} .pp-welcome {
position: relative;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-6);
align-items: end;
margin-bottom: var(--space-7);
box-shadow: var(--shadow-sm);
}
.pp-welcome::before {
content: '';
position: absolute;
inset-inline-start: -20%;
top: -50%;
width: 60%;
height: 200%;
background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 60%);
pointer-events: none;
}
.theme-sport .pp-welcome::before {
background: radial-gradient(ellipse at center, rgba(74,74,255,.18) 0%, transparent 65%);
}
.pp-welcome__copy { position: relative; }
.pp-welcome__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.pp-welcome__eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--success);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 22%, transparent);
}
.pp-welcome__hi {
font-family: var(--font-display);
font-weight: 800;
font-size: 38px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
.pp-welcome__hi em {
font-style: normal;
color: var(--ink-3);
font-weight: 600;
}
.pp-welcome__sub {
font-size: 15px;
color: var(--ink-2);
margin-top: var(--space-3);
max-width: 56ch;
line-height: 1.55;
}
.pp-welcome__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-5);
}
.pp-welcome__action {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
} .pp-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 600;
background: var(--accent-soft);
color: var(--ink);
border: 1px solid transparent;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pp-pill--success { background: var(--tint-green); color: var(--success); }
.pp-pill--warning { background: var(--tint-amber); color: var(--warning); }
.pp-pill--danger  { background: var(--tint-rose); color: var(--danger); }
.pp-pill--info    { background: var(--tint-blue); color: var(--tint-blue-2); }
.pp-pill--neutral { background: var(--accent-soft); color: var(--ink-2); }
.pp-pill__dot {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: currentColor;
} .pp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all var(--t-fast);
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1;
}
.pp-btn:active { transform: scale(.98); }
.pp-btn--primary {
background: var(--accent);
color: var(--accent-ink);
}
.pp-btn--primary:hover {
background: var(--accent-hover);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.theme-sport .pp-btn--primary:hover {
box-shadow: 0 0 0 4px rgba(74,74,255,.20), var(--shadow-md);
}
.pp-btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--border-2);
}
.pp-btn--ghost:hover { background: var(--accent-soft); border-color: var(--ink-3); }
.pp-btn--lg { padding: 14px 24px; font-size: 15px; }
.pp-btn--sm { padding: 8px 14px; font-size: 13px; }
.pp-btn--full { width: 100%; }
.pp-btn__arrow { width: 14px; height: 14px; transition: transform var(--t-fast); }
.pp-btn:hover .pp-btn__arrow { transform: translateX(-3px); }  .pp-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-7);
}
.pp-stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: all var(--t-fast);
position: relative;
overflow: hidden;
}
.pp-stat:hover { border-color: var(--ink-4); box-shadow: var(--shadow-sm); }
.pp-stat__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.pp-stat__label {
font-size: 12.5px;
color: var(--ink-3);
font-weight: 500;
}
.pp-stat__icon {
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
}
.pp-stat__icon svg { width: 16px; height: 16px; }
.pp-stat__value {
font-family: var(--font-display);
font-weight: 800;
font-size: 30px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pp-stat__value em {
font-size: 16px;
font-weight: 500;
color: var(--ink-3);
font-style: normal;
margin-inline-start: 4px;
}
.pp-stat__delta {
font-size: 11.5px;
font-weight: 600;
color: var(--success);
display: inline-flex;
align-items: center;
gap: 4px;
}
.pp-stat__delta--muted { color: var(--ink-3); font-weight: 500; } .pp-onboard {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-7);
margin-bottom: var(--space-7);
box-shadow: var(--shadow-sm);
}
.pp-onboard__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-5);
margin-bottom: var(--space-6);
}
.pp-onboard__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--ink);
}
.pp-onboard__sub {
font-size: 14px;
color: var(--ink-2);
margin-top: 4px;
max-width: 50ch;
}
.pp-onboard__progress {
font-size: 12.5px;
color: var(--ink-3);
font-weight: 600;
background: var(--accent-soft);
padding: 6px 12px;
border-radius: var(--radius-pill);
white-space: nowrap;
}
.pp-onboard__steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.pp-step {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
position: relative;
transition: all var(--t-fast);
cursor: pointer;
}
.pp-step:hover { border-color: var(--ink-4); transform: translateY(-2px); }
.pp-step__num {
width: 28px;
height: 28px;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1px solid var(--border-2);
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
font-family: var(--font-display);
}
.pp-step__title {
font-weight: 700;
font-size: 15px;
color: var(--ink);
line-height: 1.3;
}
.pp-step__desc {
font-size: 13px;
color: var(--ink-3);
line-height: 1.5;
}
.pp-step.is-done {
background: color-mix(in oklab, var(--success) 8%, var(--surface-2));
border-color: color-mix(in oklab, var(--success) 30%, var(--border));
}
.pp-step.is-done .pp-step__num {
background: var(--success);
color: white;
border-color: var(--success);
} .pp-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
overflow: hidden;
}
.pp-section__head {
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.pp-section__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--ink);
}
.pp-section__sub {
font-size: 12.5px;
color: var(--ink-3);
margin-top: 2px;
}
.pp-section__action {
font-size: 13px;
font-weight: 600;
color: var(--ink);
background: transparent;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: var(--radius-xs);
transition: background var(--t-fast);
}
.pp-section__action:hover { background: var(--accent-soft); } .pp-table-wrap { overflow-x: auto; }
.pp-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
font-variant-numeric: tabular-nums;
}
.pp-table thead th {
text-align: right;
padding: var(--space-3) var(--space-6);
font-size: 11.5px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: .6px;
text-transform: uppercase;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.pp-table tbody td {
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--line);
color: var(--ink);
vertical-align: middle;
}
.pp-table tbody tr:last-child td { border-bottom: 0; }
.pp-table tbody tr { transition: background var(--t-fast); cursor: pointer; }
.pp-table tbody tr:hover { background: var(--surface-2); }
.pp-table__order-num {
font-family: var(--font-display);
font-weight: 700;
color: var(--ink);
}
.pp-table__date { color: var(--ink-2); }
.pp-table__amount {
font-weight: 700;
color: var(--ink);
} .pp-empty {
padding: var(--space-9) var(--space-6);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.pp-empty__art {
width: 72px;
height: 72px;
border-radius: var(--radius-pill);
background: var(--accent-soft);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
margin-bottom: var(--space-2);
}
.pp-empty__art svg { width: 30px; height: 30px; }
.pp-empty__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
color: var(--ink);
}
.pp-empty__desc {
font-size: 13.5px;
color: var(--ink-3);
max-width: 44ch;
line-height: 1.55;
} .pp-catalog {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--space-7);
align-items: start;
}
.pp-filters {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-3);
position: sticky;
top: 96px;
}
.pp-filters__label {
font-size: 10.5px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: 1.4px;
text-transform: uppercase;
padding: var(--space-2) var(--space-3) var(--space-3);
}
.pp-filterbtn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 9px var(--space-3);
border-radius: var(--radius-sm);
background: transparent;
border: none;
cursor: pointer;
font-size: 13.5px;
color: var(--ink-2);
font-weight: 500;
text-align: right;
transition: all var(--t-fast);
}
.pp-filterbtn:hover { background: var(--accent-soft); color: var(--ink); }
.pp-filterbtn.is-active {
background: var(--accent-soft);
color: var(--ink);
font-weight: 600;
}
.pp-filterbtn__count {
font-size: 11.5px;
color: var(--ink-3);
font-weight: 500;
background: var(--surface-2);
padding: 1px 8px;
border-radius: var(--radius-pill);
}
.pp-filterbtn.is-active .pp-filterbtn__count {
background: var(--accent);
color: var(--accent-ink);
}
.pp-catalog__main { min-width: 0; }
.pp-toolbar {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.pp-search {
flex: 1;
position: relative;
}
.pp-search__icon {
position: absolute;
inset-inline-end: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--ink-3);
pointer-events: none;
}
.pp-search__input {
width: 100%;
height: 44px;
padding-inline-end: 40px;
padding-inline-start: 16px;
background: var(--surface);
border: 1px solid var(--border-2);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
transition: all var(--t-fast);
}
.pp-search__input::placeholder { color: var(--ink-3); }
.pp-search__input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.theme-sport .pp-search__input:focus {
box-shadow: 0 0 0 4px var(--accent-soft), 0 0 24px rgba(74,74,255,.22);
}
.pp-toolbar__meta {
font-size: 12.5px;
color: var(--ink-3);
} .pp-products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-4);
}
.pp-product {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all var(--t-base);
position: relative;
}
.pp-product:hover {
border-color: var(--ink-4);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.theme-sport .pp-product:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md), 0 0 0 1px rgba(74,74,255,.20);
}
.pp-product__img {
aspect-ratio: 1;
background: var(--surface-2);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.theme-light .pp-product__img { background: #FFFFFF; }
.pp-product__img img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0,0,0,.10));
transition: transform var(--t-base);
}
.pp-product:hover .pp-product__img img { transform: scale(1.04); }
.pp-product__badges {
position: absolute;
top: var(--space-3);
inset-inline-end: var(--space-3);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
z-index: 2;
}
.pp-product__fallback {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
gap: var(--space-2);
}
.pp-product__fallback-initials {
font-family: var(--font-display);
font-weight: 800;
font-size: 36px;
color: var(--ink);
letter-spacing: -.02em;
}
.pp-product__fallback-sku {
font-size: 11px;
color: var(--ink-3);
letter-spacing: .8px;
font-weight: 600;
}
.pp-product__body {
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1;
}
.pp-product__sku {
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
color: var(--ink-3);
text-transform: uppercase;
}
.pp-product__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
color: var(--ink);
line-height: 1.3;
margin-bottom: 2px; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pp-product__price {
display: flex;
align-items: baseline;
gap: 4px;
margin-top: auto;
}
.pp-product__price-value {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
color: var(--ink);
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
.pp-product__price-unit {
font-size: 12px;
color: var(--ink-3);
font-weight: 500;
}
.pp-product__actions {
padding: 0 var(--space-4) var(--space-4);
display: flex;
gap: var(--space-2);
align-items: stretch;
} .pp-stepper {
display: flex;
align-items: center;
border: 1px solid var(--border-2);
border-radius: var(--radius-sm);
background: var(--surface);
overflow: hidden;
height: 40px;
}
.pp-stepper button {
width: 36px;
height: 100%;
border: none;
background: transparent;
color: var(--ink);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background var(--t-fast);
display: flex;
align-items: center;
justify-content: center;
}
.pp-stepper button:hover { background: var(--accent-soft); }
.pp-stepper button:disabled { color: var(--ink-4); cursor: not-allowed; }
.pp-stepper input {
width: 44px;
height: 100%;
border: none;
background: transparent;
text-align: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
color: var(--ink);
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.pp-stepper input::-webkit-outer-spin-button,
.pp-stepper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pp-stepper input:focus { outline: none; }
.pp-product__addbtn {
flex: 1;
height: 40px;
} .pp-backdrop {
position: fixed;
inset: 0;
background: rgba(8,8,10,.45);
backdrop-filter: blur(4px);
z-index: 90;
animation: fadeIn .24s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pp-drawer {
position: fixed;
top: 0;
inset-inline-end: 0; height: 100vh;
width: 100%;
max-width: 440px;
background: var(--surface);
z-index: 100;
display: flex;
flex-direction: column;
box-shadow: -24px 0 60px rgba(0,0,0,.18);
animation: drawerIn .32s cubic-bezier(.2,.7,.2,1);
border-inline-start: 1px solid var(--border);
}
@keyframes drawerIn {
from { transform: translateX(100%); opacity: 0; } to   { transform: translateX(0); opacity: 1; }
} .pp-drawer__head {
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: var(--space-3);
}
.pp-drawer__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
color: var(--ink);
flex: 1;
}
.pp-drawer__count {
font-size: 12px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.pp-iconbtn {
width: 36px;
height: 36px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
background: transparent;
color: var(--ink-2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--t-fast);
}
.pp-iconbtn:hover { background: var(--accent-soft); color: var(--ink); }
.pp-iconbtn svg { width: 18px; height: 18px; }
.pp-drawer__body {
flex: 1;
overflow-y: auto;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.pp-lineitem {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--surface-2);
border: 1px solid var(--border);
align-items: center;
}
.pp-lineitem__img {
width: 60px;
height: 60px;
background: var(--surface);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.theme-light .pp-lineitem__img { background: #fff; border: 1px solid var(--line); }
.pp-lineitem__img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.pp-lineitem__info { min-width: 0; }
.pp-lineitem__name {
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pp-lineitem__sku {
font-size: 11px;
color: var(--ink-3);
letter-spacing: .6px;
font-weight: 500;
}
.pp-lineitem__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-2);
}
.pp-lineitem__price {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.pp-lineitem__rm {
background: transparent;
border: none;
color: var(--ink-3);
cursor: pointer;
font-size: 12px;
font-weight: 500;
padding: 4px 8px;
border-radius: var(--radius-xs);
transition: all var(--t-fast);
}
.pp-lineitem__rm:hover { background: var(--tint-rose); color: var(--danger); }
.pp-drawer__foot {
border-top: 1px solid var(--line);
padding: var(--space-5) var(--space-6);
background: var(--surface);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.pp-summary {
display: flex;
flex-direction: column;
gap: 6px;
}
.pp-summary__row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13.5px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.pp-summary__row--total {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
color: var(--ink);
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--line);
}
.pp-summary__row--total .val { font-size: 22px; } .pp-payments {
margin: var(--space-3) 0;
padding: 12px;
background: var(--surface-2, #f7f7fa);
border: 1px solid var(--line, #e5e5e8);
border-radius: 10px;
}
.pp-payments__label {
display: block;
font-size: 11.5px;
font-weight: 600;
color: var(--ink-2, #555);
margin-bottom: 8px;
letter-spacing: .02em;
}
.pp-payments__opts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.pp-payments__opt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 10px 6px;
background: #fff;
border: 1.5px solid var(--line, #e5e5e8);
border-radius: 8px;
cursor: pointer;
transition: all .15s ease;
font-family: inherit;
}
.pp-payments__opt:hover {
border-color: var(--brand, #1f6feb);
background: #fafbff;
}
.pp-payments__opt.is-active {
border-color: var(--brand, #1f6feb);
background: var(--brand, #1f6feb);
color: #fff;
box-shadow: 0 2px 8px rgba(31, 111, 235, .25);
}
.pp-payments__opt.is-active .pp-payments__per { color: rgba(255,255,255,.85); }
.pp-payments__num {
font-size: 12.5px;
font-weight: 600;
}
.pp-payments__per {
font-size: 10.5px;
color: var(--ink-3, #777);
font-variant-numeric: tabular-nums;
}
.pp-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 11.5px;
color: var(--ink-3);
margin-top: var(--space-2);
}
.pp-trust svg { width: 14px; height: 14px; } .pp-login {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg);
}
.pp-login__form-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-9);
}
.pp-login__card {
width: 100%;
max-width: 380px;
}
.pp-login__brand {
margin-bottom: var(--space-8);
}
.pp-login__wordmark {
font-family: var(--font-display);
font-weight: 800;
font-size: 20px;
letter-spacing: 2.4px;
color: var(--ink);
}
.pp-login__tag {
font-size: 13px;
color: var(--ink-3);
margin-top: 4px;
}
.pp-login__title {
font-family: var(--font-display);
font-weight: 800;
font-size: 30px;
color: var(--ink);
line-height: 1.1;
letter-spacing: -.02em;
margin-bottom: var(--space-3);
}
.pp-login__sub {
font-size: 14.5px;
color: var(--ink-2);
margin-bottom: var(--space-7);
line-height: 1.55;
}
.pp-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--space-4);
}
.pp-field__label {
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
letter-spacing: .2px;
}
.pp-field__input {
height: 46px;
padding: 0 16px;
background: var(--surface);
border: 1px solid var(--border-2);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 14.5px;
color: var(--ink);
transition: all var(--t-fast);
}
.pp-field__input::placeholder { color: var(--ink-3); }
.pp-field__input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.pp-login__foot {
margin-top: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: center;
}
.pp-login__forgot {
font-size: 13px;
color: var(--ink-3);
text-decoration: none;
}
.pp-login__forgot:hover { color: var(--ink); text-decoration: underline; }
.pp-login__trustrow {
display: flex;
gap: var(--space-4);
font-size: 11.5px;
color: var(--ink-3);
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--line);
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.pp-login__trustrow div {
display: inline-flex;
align-items: center;
gap: 5px;
}
.pp-login__trustrow svg { width: 13px; height: 13px; }
.pp-login__art {
background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 70%, #4A4AFF 30%) 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: var(--space-9);
}
.theme-light .pp-login__art {
background: #0E0F12;
}
.theme-sport .pp-login__art {
background:
radial-gradient(ellipse at 30% 20%, rgba(74,74,255,.55) 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(120,120,255,.4) 0%, transparent 60%),
#06080F;
}
.pp-login__art-content {
color: white;
position: relative;
z-index: 2;
max-width: 420px;
}
.pp-login__art-eyebrow {
display: inline-block;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: var(--space-5);
color: white;
}
.pp-login__art-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 40px;
line-height: 1.1;
letter-spacing: -.02em;
margin-bottom: var(--space-4);
}
.pp-login__art-sub {
font-size: 15px;
color: rgba(255,255,255,.78);
line-height: 1.6;
max-width: 38ch;
}
.pp-login__art-stats {
display: flex;
gap: var(--space-7);
margin-top: var(--space-7);
padding-top: var(--space-6);
border-top: 1px solid rgba(255,255,255,.15);
}
.pp-login__art-stat {
display: flex;
flex-direction: column;
}
.pp-login__art-stat-val {
font-family: var(--font-display);
font-weight: 800;
font-size: 24px;
color: white;
letter-spacing: -.01em;
}
.pp-login__art-stat-label {
font-size: 11.5px;
color: rgba(255,255,255,.6);
margin-top: 2px;
letter-spacing: .4px;
} .pp-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-pill);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .4px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
}
.pp-badge--out { background: var(--ink); color: var(--surface); border-color: transparent; }
.pp-badge--low { background: var(--tint-amber); color: var(--warning); border-color: transparent; }
.pp-badge--min { background: var(--tint-blue); color: var(--tint-blue-2); border-color: transparent; }
.pp-badge--new { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .pp-skel {
background: linear-gradient(90deg, var(--skel-1) 0%, var(--skel-2) 50%, var(--skel-1) 100%);
background-size: 200% 100%;
animation: shimmer 1.4s linear infinite;
border-radius: var(--radius-xs);
}
@keyframes shimmer {
from { background-position: 200% 0; }
to   { background-position: -200% 0; }
} .pp-devbar {
position: fixed;
bottom: 16px;
inset-inline-start: 16px; z-index: 999;
background: rgba(20,20,22,.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.10);
border-radius: var(--radius-pill);
padding: 6px;
display: flex;
align-items: center;
gap: 4px;
box-shadow: 0 12px 40px rgba(0,0,0,.4);
color: #fff;
font-family: var(--font-body);
font-size: 12px;
direction: ltr;
}
.pp-devbar__group {
display: flex;
align-items: center;
gap: 2px;
padding: 0 4px;
border-inline-end: 1px solid rgba(255,255,255,.10);
}
.pp-devbar__group:last-child { border-inline-end: none; }
.pp-devbar__label {
font-size: 10px;
color: rgba(255,255,255,.55);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
padding: 0 6px;
}
.pp-devbar__btn {
padding: 7px 12px;
border-radius: var(--radius-pill);
border: none;
background: transparent;
color: rgba(255,255,255,.7);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all var(--t-fast);
letter-spacing: .3px;
}
.pp-devbar__btn:hover { color: white; background: rgba(255,255,255,.08); }
.pp-devbar__btn.is-on {
background: white;
color: #0a0a0a;
} @media (max-width: 1100px) {
.pp-stats { grid-template-columns: repeat(2, 1fr); }
.pp-onboard__steps { grid-template-columns: 1fr; }
.pp-catalog { grid-template-columns: 1fr; }
.pp-filters { position: static; }
}
@media (max-width: 880px) {
.pp-app { grid-template-columns: 1fr; }
.pp-sidebar {
position: fixed;
bottom: 0;
inset-inline-end: 0;
inset-inline-start: 0;
height: auto;
top: auto;
flex-direction: row;
padding: var(--space-2);
gap: var(--space-1);
border-top: 1px solid var(--border);
border-inline-start: none;
overflow-x: auto;
z-index: 50;
}
.pp-brand, .pp-account, .pp-usercard, .pp-sidebar__spacer, .pp-nav__label { display: none; }
.pp-sidebar .pp-nav { flex-direction: row; flex: 1; }
.pp-navitem { flex-direction: column; gap: 2px; font-size: 11px; padding: 8px; }
.pp-navitem.is-active::before { display: none; }
.pp-main { padding-bottom: 72px; }
.pp-topbar { padding: var(--space-4) var(--space-5); }
.pp-view { padding: var(--space-5); }
.pp-welcome { grid-template-columns: 1fr; padding: var(--space-6); }
.pp-welcome__hi { font-size: 28px; }
.pp-login { grid-template-columns: 1fr; }
.pp-login__art { display: none; }
}
@media (max-width: 560px) {
.pp-stats { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pp-stat__value { font-size: 24px; }
}  .pp-bm {
display: inline-flex;
align-items: baseline;
font-family: var(--font-display);
font-weight: 800;
font-size: 13px;
letter-spacing: -0.02em;
line-height: 1;
gap: 1px;
}
.pp-bm__gud  { opacity: .55; font-weight: 600; }
.pp-bm__lock { font-weight: 800; }
.pp-bm--slip  { color: var(--ink); }
.pp-bm--sport { color: #4A4AFF; }
.theme-slip .pp-bm--slip   { color: #fff; }
.theme-sport .pp-bm--slip  { color: #fff; }
.theme-sport .pp-bm--sport { color: var(--accent); }
.pp-bm__zz {
font-family: var(--font-display);
font-size: .55em;
font-weight: 800;
letter-spacing: -1.5px;
align-self: flex-start;
margin-inline-start: -2px;
transform: translateY(-4px);
display: inline-block;
} .pp-brand__crest {
display: flex;
align-items: center;
gap: 8px;
}
.pp-brand__mark {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 8px;
background: var(--accent);
color: var(--accent-ink);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 900;
font-size: 16px;
letter-spacing: -.04em;
position: relative;
}
.pp-brand__mark::after {
content: '';
position: absolute;
top: 4px;
inset-inline-end: 4px;
width: 5px;
height: 5px;
border-radius: var(--radius-pill);
background: #4A4AFF;
box-shadow: 0 0 0 2px var(--surface);
}
.theme-sport .pp-brand__mark::after { background: #FFD86B; }
.pp-brand__textwrap {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.pp-brand__row1 {
display: flex;
align-items: baseline;
gap: 6px;
}
.pp-brand__name {
font-family: var(--font-display);
font-weight: 900;
font-size: 15px;
letter-spacing: 1.4px;
color: var(--ink);
line-height: 1;
}
.pp-brand__il {
font-size: 8.5px;
font-weight: 800;
letter-spacing: 1.2px;
padding: 2px 5px;
background: var(--accent-soft);
color: var(--ink);
border-radius: 4px;
line-height: 1;
}
.pp-brand__role {
font-size: 10.5px;
color: var(--ink-3);
letter-spacing: .3px;
margin-top: 2px;
}
.pp-brand__partners {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin-top: var(--space-3);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.pp-brand__partners-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-3);
flex: 1;
}
.pp-brand__partners-marks {
display: flex;
align-items: center;
gap: 6px;
} .pp-anno {
background: var(--surface);
border-bottom: 1px solid var(--line);
padding: 9px var(--space-8);
font-size: 12px;
color: var(--ink-3);
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
font-weight: 500;
letter-spacing: .1px;
flex-wrap: wrap;
}
.pp-anno__item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pp-anno__dot {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--success);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 22%, transparent);
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50%      { opacity: .55; }
}
.pp-anno strong { color: var(--ink); font-weight: 700; }
.pp-anno__sep { color: var(--ink-4); } .pp-welcome__distribute {
display: flex;
align-items: center;
gap: 14px;
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px dashed var(--line);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
}
.pp-welcome__distribute-marks {
display: flex;
align-items: center;
gap: 10px;
}
.pp-welcome__distribute-marks .pp-bm { font-size: 15px; } .pp-product__brandbar {
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
height: 3px;
z-index: 3;
pointer-events: none;
}
.pp-product--slip   .pp-product__brandbar { background: linear-gradient(90deg, #0E0F12, #2A2A30); }
.pp-product--sport  .pp-product__brandbar { background: linear-gradient(90deg, #4A4AFF, #7878FF); }
.pp-product--sport.is-pink   .pp-product__brandbar { background: linear-gradient(90deg, #E91E63, #FF6FA0); }
.pp-product--sport.is-cyan   .pp-product__brandbar { background: linear-gradient(90deg, #00BCD4, #6BE6F2); }
.pp-product--sport.is-green  .pp-product__brandbar { background: linear-gradient(90deg, #1F8A5B, #4ADE80); }
.pp-product--sport.is-yellow .pp-product__brandbar { background: linear-gradient(90deg, #E0A536, #FFD86B); }
.pp-product--bundle .pp-product__brandbar {
background: linear-gradient(90deg, #0E0F12 0%, #0E0F12 50%, #4A4AFF 50%, #4A4AFF 100%);
}
.pp-product__brandchip {
position: absolute;
top: 10px;
inset-inline-start: 10px;
z-index: 2;
font-family: var(--font-display);
font-weight: 800;
font-size: 9.5px;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 4px 8px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,.92);
color: #0E0F12;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.theme-slip .pp-product__brandchip,
.theme-sport .pp-product__brandchip {
background: rgba(0,0,0,.7);
color: #fff;
}
.pp-product__brandchip--sport { color: #4A4AFF; }
.theme-slip .pp-product__brandchip--sport,
.theme-sport .pp-product__brandchip--sport { color: #7878FF; } .pp-filterbtn__left {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pp-filterbtn__dot {
width: 8px;
height: 8px;
border-radius: var(--radius-pill);
flex-shrink: 0;
}
.pp-filterbtn__dot--all    { background: var(--ink); }
.theme-slip .pp-filterbtn__dot--all { background: #fff; }
.theme-sport .pp-filterbtn__dot--all { background: var(--accent); }
.pp-filterbtn__dot--slip   { background: #0E0F12; }
.theme-slip .pp-filterbtn__dot--slip { background: #fff; outline: 1px solid var(--ink-3); }
.pp-filterbtn__dot--sport  { background: #4A4AFF; }
.pp-filterbtn__dot--bundle { background: linear-gradient(90deg, #0E0F12 50%, #4A4AFF 50%); } .pp-login__art {
padding: 0;
display: grid;
grid-template-rows: 1fr 1fr;
background: #0A0A0A;
overflow: hidden;
}
.pp-login__brandhalf {
position: relative;
padding: var(--space-9) var(--space-8);
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
overflow: hidden;
}
.pp-login__brandhalf--slip {
background: radial-gradient(ellipse at 20% 80%, #1a1a1c 0%, #0A0A0A 65%);
}
.pp-login__brandhalf--sport {
background:
radial-gradient(ellipse at 80% 20%, rgba(74,74,255,.6) 0%, transparent 55%),
radial-gradient(ellipse at 30% 70%, rgba(120,120,255,.35) 0%, transparent 60%),
#06080F;
}
.pp-login__brandhalf::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
.pp-login__brandhalf-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(255,255,255,.55);
position: relative;
z-index: 2;
}
.pp-login__brandhalf-logo {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 16px;
}
.pp-login__brandhalf-logo img {
height: 36px;
width: auto;
filter: drop-shadow(0 4px 16px rgba(255,255,255,.08));
}
.pp-login__brandhalf-tag {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
line-height: 1.3;
letter-spacing: -.01em;
color: rgba(255,255,255,.86);
max-width: 32ch;
position: relative;
z-index: 2;
}
.pp-login__brandhalf-tag em {
font-style: normal;
color: #fff;
font-weight: 800;
}
.pp-login__brandhalf-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
position: relative;
z-index: 2;
}
.pp-login__brandhalf-stat-val {
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
color: #fff;
letter-spacing: -.02em;
line-height: 1;
}
.pp-login__brandhalf-stat-label {
font-size: 10.5px;
color: rgba(255,255,255,.55);
margin-top: 4px;
letter-spacing: .4px;
}
.pp-login__brandhalf-product {
width: 110px;
height: 110px;
object-fit: contain;
filter: drop-shadow(0 12px 32px rgba(0,0,0,.5));
}
.pp-login__brandhalf--sport .pp-login__brandhalf-product {
filter: drop-shadow(0 12px 32px rgba(74,74,255,.4));
} .pp-login__partners {
display: flex;
align-items: center;
gap: 14px;
margin-top: var(--space-5);
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.pp-login__partners-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-3);
flex: 1;
} .pp-brand__catalog-peek {
display: flex;
gap: 6px;
margin-top: 12px;
}
.pp-brand__catalog-peek-pill {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 8px;
border-radius: var(--radius-sm);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .3px;
}
.pp-brand__catalog-peek-pill--slip {
background: #0E0F12;
color: #fff;
}
.theme-slip .pp-brand__catalog-peek-pill--slip {
background: #fff;
color: #0a0a0a;
}
.pp-brand__catalog-peek-pill--sport {
background: #4A4AFF;
color: #fff;
}
.pp-brand__catalog-peek-pill__dot {
width: 5px;
height: 5px;
border-radius: var(--radius-pill);
background: currentColor;
}  .pp-stepper--lg {
height: 48px;
}
.pp-stepper--lg button { width: 44px; font-size: 20px; }
.pp-stepper--lg input  { width: 56px; font-size: 16px; }
.pp-stepper--xl {
height: 56px;
background: var(--surface);
border-color: var(--border-2);
}
.pp-stepper--xl button { width: 52px; font-size: 22px; }
.pp-stepper--xl input  { width: 64px; font-size: 18px; } .pp-stepper.is-active {
background: color-mix(in oklab, var(--accent) 8%, var(--surface));
border-color: var(--accent);
}
.theme-light .pp-stepper.is-active { background: color-mix(in oklab, var(--accent) 4%, var(--surface)); }
.pp-stepper.is-active input { color: var(--accent); font-weight: 800; }
.theme-light .pp-stepper.is-active input { color: var(--ink); }
.theme-slip .pp-stepper.is-active input,
.theme-sport .pp-stepper.is-active input { color: #fff; } .pp-qo {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-5);
margin-bottom: var(--space-6);
}
.pp-qo__reorder {
background: var(--ink);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--space-7);
display: flex;
flex-direction: column;
gap: var(--space-4);
position: relative;
overflow: hidden;
}
.theme-sport .pp-qo__reorder { background: linear-gradient(135deg, #4A4AFF 0%, #2A2A8A 100%); }
.theme-light .pp-qo__reorder { background: #0E0F12; }
.pp-qo__reorder::after {
content: '';
position: absolute;
inset-inline-end: -10%;
top: -30%;
width: 60%;
height: 160%;
background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 60%);
pointer-events: none;
}
.pp-qo__reorder-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
letter-spacing: 1.4px;
text-transform: uppercase;
font-weight: 600;
color: rgba(255,255,255,.6);
}
.pp-qo__reorder-eyebrow svg { width: 14px; height: 14px; }
.pp-qo__reorder-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
line-height: 1.1;
letter-spacing: -.02em;
color: #fff;
margin: 0;
}
.pp-qo__reorder-meta {
display: flex;
gap: var(--space-5);
margin-top: var(--space-3);
margin-bottom: var(--space-3);
}
.pp-qo__reorder-meta-row {
display: flex;
flex-direction: column;
gap: 2px;
}
.pp-qo__reorder-meta-val {
font-family: var(--font-display);
font-weight: 800;
font-size: 20px;
letter-spacing: -.01em;
color: #fff;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.pp-qo__reorder-meta-label {
font-size: 11px;
color: rgba(255,255,255,.55);
letter-spacing: .4px;
}
.pp-qo__reorder-skus {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--space-4);
}
.pp-qo__reorder-sku {
font-size: 10.5px;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.85);
letter-spacing: .4px;
font-family: var(--font-display);
}
.pp-qo__reorder-cta {
background: #fff;
color: #0E0F12;
padding: 14px 24px;
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
transition: all var(--t-fast);
font-variant-numeric: tabular-nums;
}
.pp-qo__reorder-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.pp-qo__reorder-cta:active { transform: scale(.98); }
.pp-qo__reorder-cta svg { width: 16px; height: 16px; } .pp-qo__sku {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-7);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.pp-qo__sku-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--ink);
}
.pp-qo__sku-sub {
font-size: 12.5px;
color: var(--ink-3);
line-height: 1.5;
}
.pp-qo__sku-row {
display: grid;
grid-template-columns: 1fr 120px auto;
gap: var(--space-2);
align-items: stretch;
}
.pp-qo__sku-input {
height: 48px;
padding: 0 16px;
background: var(--surface-2);
border: 1px solid var(--border-2);
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
color: var(--ink);
letter-spacing: 1px;
text-transform: uppercase;
}
.pp-qo__sku-input::placeholder { color: var(--ink-3); letter-spacing: 1px; font-weight: 500; }
.pp-qo__sku-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
background: var(--surface);
}
.pp-qo__sku-result {
margin-top: 8px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--surface-2);
border: 1px dashed var(--border-2);
border-radius: var(--radius-sm);
font-size: 12.5px;
color: var(--ink-2);
animation: viewIn .24s var(--t-base);
}
.pp-qo__sku-result strong { color: var(--ink); font-weight: 700; } .pp-topsell {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-6);
}
.pp-topsell__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--space-4);
gap: var(--space-4);
}
.pp-topsell__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--ink);
}
.pp-topsell__sub {
font-size: 12.5px;
color: var(--ink-3);
margin-top: 2px;
}
.pp-topsell__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3);
}
.pp-tstile {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: all var(--t-fast);
position: relative;
}
.pp-tstile:hover { border-color: var(--ink-4); }
.pp-tstile.is-active { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 4%, var(--surface-2)); }
.theme-slip .pp-tstile.is-active,
.theme-sport .pp-tstile.is-active { background: color-mix(in oklab, var(--accent) 10%, var(--surface-2)); }
.pp-tstile__head {
display: flex;
gap: 10px;
align-items: center;
}
.pp-tstile__img {
width: 48px;
height: 48px;
background: var(--surface);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.theme-light .pp-tstile__img { background: #fff; border: 1px solid var(--line); }
.pp-tstile__img img { max-width: 75%; max-height: 75%; object-fit: contain; }
.pp-tstile__info { min-width: 0; flex: 1; }
.pp-tstile__sku {
font-size: 10px;
color: var(--ink-3);
font-weight: 600;
letter-spacing: .8px;
text-transform: uppercase;
}
.pp-tstile__name {
font-size: 12.5px;
font-weight: 700;
color: var(--ink);
line-height: 1.3;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.pp-tstile__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.pp-tstile__price {
font-family: var(--font-display);
font-weight: 800;
font-size: 16px;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.pp-tstile__rank {
position: absolute;
top: -6px;
inset-inline-start: -6px;
width: 22px;
height: 22px;
background: var(--accent);
color: var(--accent-ink);
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 11px;
border: 2px solid var(--surface);
z-index: 2;
} .pp-list {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.pp-listrow {
display: grid;
grid-template-columns: 56px 1fr auto auto;
gap: var(--space-4);
align-items: center;
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--line);
transition: background var(--t-fast);
position: relative;
}
.pp-listrow:last-child { border-bottom: 0; }
.pp-listrow:hover { background: var(--surface-2); }
.pp-listrow.is-active { background: color-mix(in oklab, var(--accent) 3%, var(--surface)); }
.theme-slip .pp-listrow.is-active,
.theme-sport .pp-listrow.is-active { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.pp-listrow.is-disabled { opacity: .5; }
.pp-listrow::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 8px;
bottom: 8px;
width: 3px;
background: transparent;
border-radius: 0 3px 3px 0;
}
.pp-listrow--slip::before  { background: #0E0F12; }
.theme-slip .pp-listrow--slip::before { background: #fff; }
.pp-listrow--sport::before { background: #4A4AFF; }
.pp-listrow--bundle::before { background: linear-gradient(180deg, #0E0F12 50%, #4A4AFF 50%); }
.pp-listrow__img {
width: 56px;
height: 56px;
background: var(--surface-2);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.theme-light .pp-listrow__img { background: #fff; border: 1px solid var(--line); }
.pp-listrow__img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.pp-listrow__img-fallback {
font-family: var(--font-display);
font-weight: 800;
font-size: 14px;
color: var(--ink-3);
letter-spacing: -.02em;
}
.pp-listrow__info { min-width: 0; }
.pp-listrow__top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.pp-listrow__sku {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1px;
color: var(--ink-3);
font-family: var(--font-display);
}
.pp-listrow__name {
font-size: 14px;
font-weight: 600;
color: var(--ink);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pp-listrow__badges {
display: inline-flex;
gap: 4px;
margin-inline-start: 6px;
}
.pp-listrow__price {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
font-variant-numeric: tabular-nums;
}
.pp-listrow__price-val {
font-family: var(--font-display);
font-weight: 800;
font-size: 17px;
color: var(--ink);
letter-spacing: -.01em;
line-height: 1;
}
.pp-listrow__price-unit {
font-size: 10.5px;
color: var(--ink-3);
}
.pp-listrow__sub-total {
font-size: 11px;
color: var(--accent);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.theme-light .pp-listrow__sub-total { color: var(--ink); } .pp-vtoggle {
display: inline-flex;
background: var(--surface);
border: 1px solid var(--border-2);
border-radius: var(--radius-sm);
padding: 3px;
height: 44px;
}
.pp-vtoggle button {
border: none;
background: transparent;
border-radius: 6px;
color: var(--ink-3);
width: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--t-fast);
}
.pp-vtoggle button:hover { color: var(--ink); }
.pp-vtoggle button.is-on {
background: var(--accent);
color: var(--accent-ink);
}
.pp-vtoggle button svg { width: 18px; height: 18px; } .pp-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.pp-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1px solid var(--border-2);
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all var(--t-fast);
white-space: nowrap;
}
.pp-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.pp-chip.is-active {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.pp-chip__dot {
width: 7px;
height: 7px;
border-radius: var(--radius-pill);
flex-shrink: 0;
}
.pp-chip__count {
font-size: 11px;
font-weight: 700;
color: var(--ink-3);
background: var(--surface-2);
padding: 1px 7px;
border-radius: var(--radius-pill);
font-variant-numeric: tabular-nums;
}
.pp-chip.is-active .pp-chip__count {
background: rgba(255,255,255,.18);
color: var(--accent-ink);
}
.theme-light .pp-chip.is-active .pp-chip__count { background: rgba(255,255,255,.18); color: #fff; } .pp-stickybar {
position: fixed;
bottom: 16px;
inset-inline-start: 50%;
transform: translateX(50%); width: calc(100% - 320px);
max-width: 720px;
background: var(--ink);
color: #fff;
border-radius: var(--radius-pill);
padding: 8px 8px 8px 24px;
display: flex;
align-items: center;
gap: var(--space-4);
box-shadow: 0 16px 48px rgba(14,15,18,.22), 0 0 0 1px rgba(255,255,255,.06);
z-index: 80;
animation: stickyIn .32s var(--t-base);
}
.theme-sport .pp-stickybar { background: var(--accent); }
.theme-light .pp-stickybar { background: #0E0F12; }
@keyframes stickyIn {
from { transform: translateX(50%) translateY(20px); opacity: 0; }
to   { transform: translateX(50%) translateY(0);    opacity: 1; }
}
.pp-stickybar__count {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.7);
flex-shrink: 0;
letter-spacing: .2px;
}
.pp-stickybar__total {
flex: 1;
display: flex;
align-items: baseline;
gap: 8px;
font-variant-numeric: tabular-nums;
}
.pp-stickybar__total-label {
font-size: 11.5px;
color: rgba(255,255,255,.55);
letter-spacing: .4px;
}
.pp-stickybar__total-val {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
color: #fff;
letter-spacing: -.02em;
line-height: 1;
}
.pp-stickybar__total-vat {
font-size: 11px;
color: rgba(255,255,255,.55);
}
.pp-stickybar__cta {
background: #fff;
color: #0E0F12;
padding: 12px 22px;
border-radius: var(--radius-pill);
border: none;
font-family: var(--font-body);
font-weight: 700;
font-size: 14.5px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all var(--t-fast);
}
.pp-stickybar__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.pp-stickybar__cta svg { width: 14px; height: 14px; }
.pp-stickybar__review {
background: rgba(255,255,255,.10);
color: #fff;
padding: 10px 14px;
border-radius: var(--radius-pill);
border: none;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all var(--t-fast);
}
.pp-stickybar__review:hover { background: rgba(255,255,255,.18); }
@media (max-width: 880px) {
.pp-stickybar {
inset-inline-start: 16px;
inset-inline-end: 16px;
transform: none;
width: auto;
bottom: 84px; }
@keyframes stickyIn {
from { transform: translateY(20px); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}
} .pp-ministats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.pp-ministat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
}
.pp-ministat__label {
font-size: 11.5px;
color: var(--ink-3);
font-weight: 500;
letter-spacing: .2px;
}
.pp-ministat__value {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
letter-spacing: -.01em;
color: var(--ink);
font-variant-numeric: tabular-nums;
} .pp-hello {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.pp-hello__title {
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
color: var(--ink);
letter-spacing: -.02em;
line-height: 1.1;
}
.pp-hello__title em {
font-style: normal;
color: var(--ink-3);
font-weight: 600;
}
.pp-hello__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--ink-3);
} @media (max-width: 980px) {
.pp-qo { grid-template-columns: 1fr; }
.pp-ministats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.pp-listrow {
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
row-gap: var(--space-3);
}
.pp-listrow__price { grid-column: 2; align-items: flex-start; }
.pp-listrow .pp-stepper { grid-column: 1 / -1; justify-self: stretch; }
.pp-listrow .pp-stepper input { flex: 1; width: auto; }
.pp-stickybar { padding: 6px 6px 6px 16px; }
.pp-stickybar__total-val { font-size: 18px; }
} .pp-listrow__desc {
font-size: 12px;
color: var(--ink-3);
margin-top: 3px;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.pp-product__desc {
font-size: 12px;
color: var(--ink-3);
margin-top: 4px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .pp-badge--coming {
background: var(--tint-blue);
color: var(--tint-blue-2);
} .pp-brandtabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.pp-brandtab {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 14px 18px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--t-fast);
font: inherit;
text-align: right;
color: var(--ink);
position: relative;
}
.pp-brandtab:hover {
border-color: var(--ink-3);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.pp-brandtab.is-active {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: var(--shadow-md);
}
.pp-brandtab__dot {
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
background: var(--ink-3);
}
.pp-brandtab--slip .pp-brandtab__dot { background: #0E0F12; }
.pp-brandtab--sport .pp-brandtab__dot { background: #4A4AFF; box-shadow: 0 0 8px rgba(74,74,255,.5); }
.pp-brandtab--bundle .pp-brandtab__dot { background: #7A5AE0; }
.pp-brandtab__name {
flex: 1;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: .3px;
}
.pp-brandtab__name em {
font-style: normal;
color: var(--ink-3);
font-weight: 500;
font-family: var(--font-body);
letter-spacing: 0;
}
.pp-brandtab__count {
background: var(--accent-soft);
color: var(--ink-2);
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius-pill);
min-width: 28px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.pp-brandtab.is-active .pp-brandtab__count {
background: var(--accent);
color: var(--accent-ink);
}
@media (max-width: 640px) {
.pp-brandtabs { grid-template-columns: 1fr 1fr; }
.pp-brandtab { padding: 12px 14px; }
} .pp-login__partner-logo {
height: 22px;
width: auto;
max-width: 90px;
object-fit: contain;
flex-shrink: 0;
opacity: .85;
transition: opacity var(--t-fast);
}
.pp-login__partner-logo:hover { opacity: 1; }
.pp-login__partner-sep {
color: var(--ink-4);
font-weight: 300;
margin: 0 4px;
}
.pp-login__partners {
align-items: center;
} .pp-login__sitelogo {
height: 52px;
width: auto;
display: block;
margin-bottom: 6px;
}
.pp-login__brandlink {
display: inline-block;
text-decoration: none;
transition: opacity var(--t-fast);
}
.pp-login__brandlink:hover { opacity: .85; }
.pp-login__brand .pp-brand__role {
font-size: 11.5px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: .5px;
text-transform: uppercase;
margin-top: 4px;
} .pp-sidebar__sitelogo {
height: 40px;
width: auto;
display: block;
margin-bottom: 6px;
}
.pp-sidebar__brandlink {
display: inline-block;
text-decoration: none;
transition: opacity var(--t-fast);
}
.pp-sidebar__brandlink:hover { opacity: .85; }
.pp-sidebar .pp-brand__role {
font-size: 10.5px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: .4px;
text-transform: uppercase;
}