.evw-shop {
font-family: ‘Inter’, Arial, sans-serif;
max-width: 1320px;
margin: 0 auto;
padding: 32px 24px 72px;
box-sizing: border-box;
color: #14141A;
}
.evw-shop__disclaimer {
background: #F4F0FB;
border: 1px solid #E3DCF7;
border-radius: 10px;
padding: 12px 16px;
font-size: 13.5px;
color: #4A3F8C;
margin-bottom: 20px;
}
.evw-shop__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 24px;
flex-wrap: wrap;
}
.evw-shop__title {
font-family: ‘Oswald’, Arial, sans-serif;
font-weight: 600;
font-size: 32px;
text-transform: uppercase;
margin: 0;
}
.evw-shop__count {
font-size: 14px;
color: #84858C;
}
.evw-shop__sort {
display: flex;
align-items: center;
font-size: 14px;
color: #51525C;
}
.evw-shop__sort label { margin-right: 8px; }
.evw-shop__sort select {
border: 1px solid #DDDDE3;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
font-weight: 500;
color: #14141A;
background: #fff;
cursor: pointer;
}
.evw-shop__toolbar {
display: none;
margin-bottom: 16px;
}
.evw-filter-toggle {
display: inline-flex;
align-items: center;
background: #14141A;
color: #fff;
font-weight: 600;
font-size: 14px;
padding: 11px 18px;
border-radius: 10px;
border: none;
cursor: pointer;
transition: transform 0.12s ease;
}
.evw-filter-toggle:active { transform: scale(0.97); }
.evw-filter-toggle .count-badge {
background: rgba(255,255,255,0.25);
border-radius: 999px;
font-size: 12px;
padding: 1px 8px;
margin-left: 8px;
}
.evw-shop__layout {
display: flex;
}
/* —- Sidebar / Filters —- */
.evw-filters {
width: 264px;
flex-shrink: 0;
margin-right: 32px;
}
.evw-filters__section {
border-bottom: 1px solid #ECECEF;
padding: 18px 0;
}
.evw-filters__section:first-child { padding-top: 0; }
.evw-filters__heading {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin: 0 0 12px;
user-select: none;
}
.evw-filters__heading .chev {
transition: transform 0.2s ease;
font-size: 12px;
color: #84858C;
}
.evw-filters__section.is-collapsed .chev { transform: rotate(-90deg); }
.evw-filters__section.is-collapsed .evw-filters__body { display: none; }
.evw-filters__body { font-size: 14px; }
.evw-check {
display: block;
margin-bottom: 9px;
cursor: pointer;
color: #3A3A42;
}
.evw-check–sub {
margin-left: 22px;
color: #6B6C75;
font-size: 13.5px;
}
.evw-check input { margin-right: 9px; }
.evw-check .cnt { color: #B0B0B8; margin-left: 4px; }
.evw-swatchgrid {
display: flex;
flex-wrap: wrap;
}
.evw-swatch {
width: 30px; height: 30px; border-radius: 50%;
margin: 0 8px 8px 0;
border: 2px solid #fff;
box-shadow: 0 0 0 1px #DDDDE3;
cursor: pointer;
padding: 0;
position: relative;
}
.evw-swatch.is-active { box-shadow: 0 0 0 2.5px #14141A; }
.evw-swatch.is-active::after {
content: “✓”;
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.evw-price-row { display: flex; align-items: center; }
.evw-price-row input[type=”number”] {
width: 72px;
padding: 8px 9px;
border: 1px solid #DDDDE3;
border-radius: 6px;
font-size: 13px;
margin-right: 8px;
}
.evw-price-row span { color: #84858C; margin-right: 8px; }
.evw-clear {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: #5A46E6;
background: none;
border: 1px solid #DDDDE3;
border-radius: 8px;
cursor: pointer;
padding: 9px 16px;
margin-top: 8px;
white-space: nowrap;
}
.evw-clear:hover { border-color: #5A46E6; background: #F7F6FE; }
/* —- Grid —- */
.evw-grid-wrap { flex: 1; min-width: 0; }
.evw-grid {
display: flex;
flex-wrap: wrap;
}
.evw-card {
width: calc(25% – 18px);
margin: 0 24px 24px 0;
position: relative;
}
.evw-card:nth-child(4n) { margin-right: 0; }
.evw-card__img-wrap {
position: relative;
border-radius: 14px;
overflow: hidden;
background: #F4F4F6;
aspect-ratio: 1/1;
}
.evw-card__img-wrap img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.evw-card__quick {
position: absolute; inset: 0;
background: rgba(20,20,26,0.55);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
}
.evw-card__img-wrap:hover .evw-card__quick { opacity: 1; }
.evw-card__quick-btn {
background: #fff; color: #14141A; font-weight: 600; font-size: 13px;
padding: 10px 18px; border-radius: 999px; text-decoration: none;
}
.evw-card__title {
font-size: 14px; font-weight: 500; margin: 12px 0 4px; line-height: 1.35;
color: #14141A; text-decoration: none; display: block;
}
.evw-card__price { font-size: 15px; font-weight: 600; color: #5A46E6; margin: 0 0 10px; }
.evw-card__add {
display: block; width: 100%; text-align: center;
background: #14141A; color: #fff; font-weight: 600; font-size: 13px;
padding: 10px; border-radius: 8px; border: none; cursor: pointer;
}
.evw-card__add:hover { background: #5A46E6; }
.evw-empty, .evw-loading {
padding: 60px 0; text-align: center; color: #84858C; font-size: 15px; width: 100%;
}
.evw-error {
padding: 18px; background: #FDECEC; border: 1px solid #F3C9C9; border-radius: 10px;
color: #A32D2D; font-size: 14px; width: 100%;
}
/* —- Quick view modal —- */
.evw-qv-overlay {
display: none;
position: fixed; inset: 0; background: rgba(20,20,26,0.6);
z-index: 10001;
align-items: center; justify-content: center;
padding: 24px;
}
.evw-qv-overlay.is-open { display: flex; }
.evw-qv-modal {
background: #fff;
border-radius: 16px;
max-width: 720px;
width: 100%;
max-height: 86vh;
overflow-y: auto;
position: relative;
display: flex;
}
.evw-qv-close {
position: absolute; top: 14px; right: 14px;
background: #F4F4F6; border: none; border-radius: 50%;
width: 32px; height: 32px; font-size: 18px; cursor: pointer; z-index: 2;
}
.evw-qv-img { width: 42%; flex-shrink: 0; background: #F4F4F6; }
.evw-qv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evw-qv-body { padding: 28px; flex: 1; min-width: 0; }
.evw-qv-title { font-size: 20px; font-weight: 600; margin: 0 0 8px; padding-right: 30px; }
.evw-qv-price { font-size: 19px; font-weight: 600; color: #5A46E6; margin: 0 0 16px; }
.evw-qv-desc { font-size: 14px; line-height: 1.6; color: #51525C; margin: 0 0 20px; max-height: 160px; overflow-y: auto; }
.evw-qv-actions { display: flex; }
.evw-qv-actions button {
background: #14141A; color: #fff; font-weight: 600; font-size: 14px;
padding: 12px 22px; border-radius: 8px; border: none; cursor: pointer; margin-right: 12px;
}
.evw-qv-actions a {
color: #14141A; font-weight: 600; font-size: 14px; align-self: center;
text-decoration: underline;
}
.evw-qv-loading { padding: 60px; text-align: center; color: #84858C; width: 100%; }
@media (max-width: 640px) {
.evw-qv-modal { flex-direction: column; max-height: 92vh; }
.evw-qv-img { width: 100%; height: 220px; }
}
.evw-pagination {
display: flex; justify-content: center; margin-top: 24px;
}
.evw-pagination button {
background: #fff; border: 1px solid #DDDDE3; border-radius: 8px;
font-weight: 600; font-size: 13.5px; padding: 9px 16px; margin: 0 4px; cursor: pointer;
}
.evw-pagination button.is-active { background: #14141A; color: #fff; border-color: #14141A; }
.evw-pagination button:disabled { opacity: 0.4; cursor: default; }
.evw-filters__drawer-head { display: none; }
.evw-filters__apply { display: none; }
/* —- Mobile drawer —- */
.evw-drawer-overlay {
position: fixed; inset: 0; background: rgba(20,20,26,0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.evw-drawer-overlay.is-open { opacity: 1; visibility: visible; }
@media (max-width: 900px) {
.evw-shop__toolbar { display: block; }
.evw-filters {
position: fixed;
top: 0; left: -100%;
width: 84%;
max-width: 340px;
height: 100%;
background: #fff;
z-index: 9999;
padding: 24px 22px 110px;
overflow-y: auto;
transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1);
margin-right: 0;
box-shadow: 8px 0 32px rgba(20,20,26,0.18);
}
.evw-filters.is-open { left: 0; }
.evw-filters__drawer-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ECECEF;
}
.evw-filters__drawer-head strong { font-size: 17px; }
.evw-filters__drawer-head button {
background: #F4F4F6; border: none; border-radius: 50%;
width: 32px; height: 32px; font-size: 18px; cursor: pointer; color: #14141A;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.evw-filters__section { padding: 16px 0; }
.evw-filters__apply {
display: block;
position: fixed; bottom: 0; left: -100%; width: 84%; max-width: 340px;
background: #fff; padding: 16px 22px; border-top: 1px solid #ECECEF; z-index: 9999;
transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 -4px 16px rgba(20,20,26,0.06);
}
.evw-filters.is-open ~ .evw-filters__apply,
.evw-filters__apply.is-open { left: 0; }
.evw-filters__apply button {
width: 100%; background: #14141A; color: #fff; font-weight: 600; font-size: 15px;
padding: 14px; border-radius: 10px; border: none; cursor: pointer;
transition: background 0.15s ease;
}
.evw-filters__apply button:active { background: #2A2A32; }
.evw-card { width: calc(50% – 7px); margin-right: 14px; }
.evw-card:nth-child(2n) { margin-right: 0; }
.evw-shop__head {
flex-direction: column;
align-items: flex-start;
margin-bottom: 14px;
}
.evw-shop__title { margin-bottom: 12px; }
.evw-shop__sort { width: 100%; justify-content: space-between; }
.evw-shop__sort select { flex: 1; margin-left: 10px; }
}
@media (max-width: 520px) {
.evw-shop { padding-left: 14px; padding-right: 14px; }
.evw-card { width: calc(50% – 6px); margin-right: 12px; }
.evw-card:nth-child(2n) { margin-right: 0; }
.evw-card__title { font-size: 13px; }
.evw-card__price { font-size: 14px; }
.evw-card__add { font-size: 12.5px; padding: 9px; }
}