body.pco-cm-on .electron-category-menu > .menu-title {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
box-sizing: border-box;
width: 100%;
height: 44px;
margin: 6px 0 0;
padding: 0 16px;
border: 0;
border-radius: 8px 8px 0 0;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-family: "Varela Round", Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
letter-spacing: normal;
text-align: right;
text-transform: none;
box-shadow: none;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
body.pco-cm-on .electron-category-menu > .menu-title:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
body.pco-cm-on .electron-category-menu > .menu-title[aria-expanded="true"] {
background: #fff;
color: #011962;
}
body.pco-cm-on .electron-category-menu > .menu-title:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
}
body.pco-cm-on .electron-category-menu > .menu-title[aria-expanded="true"]:focus-visible {
outline-color: #1d4f91;
}
body.pco-cm-on .electron-category-menu > .menu-title:focus:not(:focus-visible),
body.pco-cm-on .electron-header-mobile .pco-cm-mtrigger:focus:not(:focus-visible),
.pco-cm-panel :focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
body.pco-cm-on .electron-header .electron-category-menu > .pco-cm-trigger svg {
color: inherit;
fill: none;
stroke: currentColor;
}
.pco-cm-trigger .pco-cm-trigger-label {
flex-grow: 1;
text-align: right;
}
.pco-cm-trigger .pco-cm-trigger-icon,
.pco-cm-trigger .pco-cm-trigger-chev {
flex-shrink: 0;
}
body.pco-cm-on .electron-header-mobile .pco-cm-mtrigger {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 9px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: inherit;
font: inherit;
cursor: pointer;
}
body.pco-cm-on .electron-header-mobile .pco-cm-mtrigger:focus-visible {
outline: 2px solid #1d4f91;
outline-offset: 0;
}
body.pco-cm-on .electron-header .electron-header-mobile .pco-cm-mtrigger .pco-cm-mtrigger-icon,
body.pco-cm-on .electron-header-mobile .pco-cm-mtrigger .pco-cm-mtrigger-icon {
display: block;
width: 24px;
height: 24px;
max-width: none;
max-height: none;
fill: none;
stroke: var(--electron-dark, #161616);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 1;
}
.pco-cm-root .pco-cm-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99997;
background: rgba(20, 37, 65, 0.22);
}
.pco-cm-root .pco-cm-overlay[hidden] {
display: none;
}
.pco-cm-panel {
position: absolute;
top: 0;
left: 0;
z-index: 99998;
display: flex;
box-sizing: border-box;
width: 1000px;
min-height: 420px;
max-height: min(760px, calc(100vh - 120px));
overflow: hidden;
background: #fff;
border-radius: 0 0 12px 12px;
box-shadow: 0 24px 48px rgba(21, 42, 67, 0.22);
color: #182744;
font-family: "Varela Round", Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
text-align: right;
direction: rtl;
}
.pco-cm-panel[hidden] {
display: none;
}
.pco-cm-panel *,
.pco-cm-panel *::before,
.pco-cm-panel *::after {
box-sizing: border-box;
}
.pco-cm-panel svg {
fill: none;
stroke: currentColor;
}
.pco-cm-panel .pco-cm-a {
color: #1d4f91;
text-decoration: none;
transition: none;
}
.pco-cm-panel .pco-cm-a:hover {
color: #123a70;
text-decoration: underline;
}
.pco-cm-panel a:focus-visible,
.pco-cm-panel button:focus-visible,
.pco-cm-panel [tabindex="-1"]:focus-visible {
outline: 2px solid #1d4f91;
outline-offset: 2px;
}
#pco-cm-root .pco-cm-btn,
#pco-cm-root .pco-cm-btn:hover,
#pco-cm-root .pco-cm-btn:focus,
#pco-cm-root .pco-cm-btn:focus-visible,
#pco-cm-root .pco-cm-btn:active,
#pco-cm-root .pco-cm-btn[disabled] {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
background-color: transparent;
background-image: none;
box-shadow: none;
color: inherit;
font: inherit;
letter-spacing: normal;
text-align: right;
text-decoration: none;
text-shadow: none;
text-transform: none;
transform: none;
filter: none;
opacity: 1;
cursor: pointer;
}
#pco-cm-root .pco-cm-panel .pco-cm-dept {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 0 12px;
border-radius: 8px;
font-size: 15px;
line-height: 1.25;
}
#pco-cm-root .pco-cm-panel .pco-cm-dept:hover {
background: #edf3fc;
}
#pco-cm-root .pco-cm-panel .pco-cm-dept[aria-current="true"] {
background: #e3ecfb;
color: #011962;
font-weight: 700;
}
#pco-cm-root .pco-cm-panel button.pco-cm-crumb {
color: #5a6a82;
font-size: 13px;
}
#pco-cm-root .pco-cm-panel button.pco-cm-crumb:hover {
color: #123a70;
text-decoration: underline;
}
#pco-cm-root .pco-cm-panel button.pco-cm-col-more {
padding: 8px 0;
color: #1d4f91;
font-size: 14px;
}
#pco-cm-root .pco-cm-panel button.pco-cm-col-more:hover {
color: #123a70;
text-decoration: underline;
}
.pco-cm-panel .pco-cm-rail {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
width: var(--pco-cm-rail, 230px);
padding: 12px 10px;
overflow-y: auto;
background: #f5f7fb;
border-left: 1px solid #e2e8f1;
overscroll-behavior: contain;
}
.pco-cm-panel .pco-cm-dept {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 0 12px;
border-radius: 8px;
background: transparent;
color: #182744;
font-size: 15px;
font-weight: 400;
line-height: 1.25;
}
.pco-cm-panel .pco-cm-dept:hover {
background: #edf3fc;
}
.pco-cm-panel .pco-cm-dept[aria-current="true"] {
background: #e3ecfb;
color: #011962;
font-weight: 700;
}
.pco-cm-panel .pco-cm-dept-label {
flex-grow: 1;
}
.pco-cm-panel .pco-cm-dept-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
}
.pco-cm-panel .pco-cm-dept-chev {
flex-shrink: 0;
}
.pco-cm-panel .pco-cm-main {
flex-grow: 1;
min-width: 0;
padding: 26px 32px;
overflow-y: auto;
overscroll-behavior: contain;
}
.pco-cm-panel .pco-cm-stack {
display: flex;
flex-direction: column;
gap: 24px;
}
.pco-cm-panel .pco-cm-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.pco-cm-panel .pco-cm-head-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pco-cm-panel .pco-cm-crumbs {
display: flex;
flex-wrap: wrap;
gap: 6px;
color: #5a6a82;
font-size: 13px;
}
.pco-cm-panel .pco-cm-crumb,
.pco-cm-panel a.pco-cm-crumb {
color: #5a6a82;
font-size: 13px;
}
.pco-cm-panel button.pco-cm-crumb:hover {
color: #123a70;
text-decoration: underline;
}
.pco-cm-panel .pco-cm-title {
margin: 0;
padding: 0;
color: #182744;
font-family: "Varela Round", Arial, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.25;
letter-spacing: normal;
text-transform: none;
}
.pco-cm-panel .pco-cm-title-link,
.pco-cm-panel a.pco-cm-title-link {
display: inline;
color: inherit;
font: inherit;
text-decoration: none;
text-underline-offset: 4px;
}
.pco-cm-panel a.pco-cm-title-link:hover,
.pco-cm-panel a.pco-cm-col-head:hover {
color: #123a70;
text-decoration: underline;
}
.pco-cm-panel .pco-cm-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.pco-cm-panel .pco-cm-h3 {
margin: 0;
padding: 0;
color: #5a6a82;
font-family: "Varela Round", Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
letter-spacing: normal;
text-transform: none;
}
.pco-cm-panel .pco-cm-types {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.pco-cm-panel .pco-cm-type,
.pco-cm-panel a.pco-cm-type {
display: flex;
align-items: center;
gap: 12px;
height: 64px;
padding: 0 16px;
background: #f5f7fb;
border-radius: 10px;
color: #182744;
font-size: 16px;
font-weight: 700;
}
.pco-cm-panel a.pco-cm-type:hover {
background: #eaf1fd;
color: #011962;
text-decoration: none;
}
.pco-cm-panel .pco-cm-type svg {
flex-shrink: 0;
color: #1d4f91;
}
.pco-cm-panel .pco-cm-brands {
display: grid;
grid-template-columns: repeat(auto-fill, 116px);
justify-content: start;
gap: 10px;
}
.pco-cm-panel .pco-cm-brand-rest {
display: contents;
}
.pco-cm-panel .pco-cm-brand-rest[hidden] {
display: none;
}
.pco-cm-panel .pco-cm-brand,
.pco-cm-panel a.pco-cm-brand {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
padding: 8px;
border: 1px solid #dce4ef;
border-radius: 8px;
color: #182744;
font-size: 15px;
font-weight: 700;
text-align: center;
}
.pco-cm-panel a.pco-cm-brand:hover {
border-color: #1d4f91;
color: #011962;
text-decoration: none;
}
.pco-cm-panel .pco-cm-brand img {
display: block;
width: auto;
max-width: 80%;
height: auto;
max-height: 60%;
object-fit: contain;
}
#pco-cm-root .pco-cm-panel .pco-cm-brand-hidden {
display: none;
}
.pco-cm-panel .pco-cm-brand-text {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 1.2;
}
#pco-cm-root .pco-cm-panel button.pco-cm-brand-more {
align-self: flex-start;
padding: 4px 0;
color: #1d4f91;
font-size: 14px;
}
#pco-cm-root .pco-cm-panel button.pco-cm-brand-more:hover {
color: #123a70;
text-decoration: underline;
}
.pco-cm-panel .pco-cm-feats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.pco-cm-panel .pco-cm-feat,
.pco-cm-panel a.pco-cm-feat {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
height: 68px;
padding: 0 16px;
background: #f5f7fb;
border-radius: 10px;
color: #182744;
}
.pco-cm-panel a.pco-cm-feat:hover {
background: #eaf1fd;
text-decoration: none;
}
.pco-cm-panel .pco-cm-feat-name {
font-size: 17px;
font-weight: 700;
text-align: right;
unicode-bidi: plaintext;
}
.pco-cm-panel .pco-cm-feat-sub {
color: #5a6a82;
font-size: 13px;
}
.pco-cm-panel .pco-cm-cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
align-items: start;
}
.pco-cm-panel.pco-cm-no-promo .pco-cm-cols {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pco-cm-panel .pco-cm-col {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pco-cm-panel .pco-cm-col-head,
.pco-cm-panel a.pco-cm-col-head {
padding: 6px 0 8px;
color: #1d4f91;
font-size: 16px;
font-weight: 700;
}
.pco-cm-panel .pco-cm-col-link,
.pco-cm-panel a.pco-cm-col-link {
padding: 8px 0;
color: #182744;
font-size: 15px;
}
.pco-cm-panel a.pco-cm-col-link:hover {
color: #123a70;
}
.pco-cm-panel .pco-cm-col-more,
.pco-cm-panel button.pco-cm-col-more {
padding: 8px 0;
color: #1d4f91;
font-size: 14px;
}
.pco-cm-panel button.pco-cm-col-more:hover {
color: #123a70;
text-decoration: underline;
}
.pco-cm-panel .pco-cm-col-rest {
display: contents;
}
.pco-cm-panel .pco-cm-col-rest[hidden] {
display: none;
}
.pco-cm-panel .pco-cm-col-links {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pco-cm-panel .pco-cm-col-head-plain {
color: #5a6a82;
font-weight: 500;
}
.pco-cm-panel .pco-cm-promo {
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
width: 290px;
padding: 26px 24px;
border-right: 1px solid #e2e8f1;
}
.pco-cm-panel .pco-cm-promo[hidden] {
display: none;
}
.pco-cm-panel .pco-cm-promo-label {
color: #5a6a82;
font-size: 14px;
font-weight: 500;
}
.pco-cm-panel .pco-cm-promo-img {
display: block;
width: 100%;
height: 220px;
border-radius: 10px;
background: #f7f9fc;
object-fit: cover;
}
.pco-cm-panel .pco-cm-promo-title {
color: #182744;
font-size: 17px;
font-weight: 700;
}
.pco-cm-panel .pco-cm-promo-sub {
color: #5a6a82;
font-size: 15px;
}
.pco-cm-panel .pco-cm-promo-all {
margin-top: auto;
font-size: 15px;
font-weight: 500;
}
.pco-cm-panel .pco-cm-state {
margin: 0;
color: #5a6a82;
font-size: 15px;
}
#pco-cm-root .pco-cm-panel .pco-cm-retry {
margin-right: 8px;
color: #1d4f91;
text-decoration: underline;
}
.pco-cm-root .pco-cm-sr,
.pco-cm-panel .pco-cm-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
.pco-cm-panel.pco-cm-enter {
animation: pco-cm-fade 0.12s ease-out;
}
}
@keyframes pco-cm-fade {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: none;
}
}
@media (max-width: 991px) {
.pco-cm-panel {
display: none;
}
}