use case */
background-size: cover;
background-position: center;
transition: transform 220ms ease;
}
/* Stabilize tile layout to avoid content shift while images load */
.categories-grid .category-box,
.subcategories-grid .subcategory-box {
/* Reserve a minimum height approximating image + title area */
min-height: 340px;
}
/* Reserve the image aspect ratio so browsers can allocate space before the image arrives */
.category-image, .subcategory-image {
width: 100%;
aspect-ratio: 16/10; /* reserves height even without intrinsic image dims */
object-fit: cover; /* crop sensibly to fill the reserved box */
display: block; /* remove inline gaps */
background-color: #f3f4f6; /* neutral placeholder while loading */
}
/* If an
![]()
element is used, ensure it fills the reserved box */
.category-image[src], .subcategory-image[src], .product-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Subcategory/product grid images loaded as
![]()
elements */
.subcategory-image {
width: 100%;
height: 200px;
display: block;
object-fit: contain; /* keep proportions, no crop */
background-color: #fff;
}
/* Breadcrumbs */
.category-box.is-hover .category-image { transform: none; }
.breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
/* tighter vertical spacing above/below breadcrumbs site-wide */
padding: 4px 0 6px 0;
color: var(--muted);
font-size: 14px;
/* keep breadcrumbs clear of the fixed header area */
margin-top: var(--breadcrumbs-offset, 0px);
}
/* Catalog pages: no top margin for breadcrumbs */
.subcategory-page .breadcrumbs{ margin-top: 0 !important; }
.group-page .breadcrumbs{ margin-top: 0 !important; }
.breadcrumb-link {
color: var(--brand-600);
text-decoration: none;
font-weight: 500;
}
.breadcrumb-link:hover {
color: var(--brand);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.breadcrumb-sep {
color: #c0c6d4;
}
.breadcrumb-current {
color: var(--text);
font-weight: 600;
}
/* Модальное окно - оверлей */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 999999;
justify-content: center;
align-items: center;
}
.modal-overlay.show {
display: flex;
}
/* Модальное окно */
.modal {
display: none;
background: white;
border-radius: 15px;
box-shadow: 0 24px 64px rgba(16,24,40,0.18), 0 10px 22px rgba(16,24,40,0.12);
width: 400px;
max-width: 90%;
padding: 0;
overflow: hidden;
position: relative;
transform: scale(0.7);
transition: transform 0.3s ease;
border-radius: 15px;
box-shadow: 0 18px 48px rgba(16,24,40,0.14), 0 8px 18px rgba(16,24,40,0.10);
}
.modal-overlay.show .modal {
display: block;
transform: scale(1);
}
.modal h2 {
margin: 0 0 30px 0;
text-align: center;
font-size: 1.5rem;
color: #333;
font-weight: 600;
padding: 30px 30px 0 30px;
}
.modal form {
padding: 0 30px 30px 30px;
display: flex;
flex-direction: column;
gap: 20px;
}
.modal input {
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
line-height: 1.2; /* keep height steady */
background: #f8f9fa;
transition: border-color 0.3s ease, background-color 0.3s ease;
box-sizing: border-box; /* keep width stable */
}
.modal input:focus {
outline: none;
border-color: #007bff;
background: white;
}
/* Ensure password field inside modal doesn't shrink on focus */
.modal input[type="password"]:focus {
padding: 15px; /* same as .modal input */
font-size: 16px; /* same as .modal input */
line-height: 1.2;
border-width: 1px; /* don't let UA bump border */
}
.modal input::placeholder {
color: #6c757d;
}
.modal button[type="submit"] {
background: #047857; /* emerald-700 */
color: white;
padding: 15px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.modal button[type="submit"]:hover {
background: #065F46; /* emerald-800 */
}
.modal-links {
padding: 0 30px 30px 30px;
text-align: center;
display: flex;
flex-direction: column;
gap: 15px;
}
.modal-links a {
color: #007bff;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.modal-links a:hover {
color: #0056b3;
text-decoration: underline;
}
/* Кнопка закрытия модального окна */
.modal-close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
font-weight: bold;
color: #6c757d;
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.3s ease, color 0.3s ease;
}
.modal-close:hover {
background: #f8f9fa;
color: #333;
}
/* Адаптивность для модального окна */
@media (max-width: 768px) {
.modal {
width: 95%;
margin: 20px;
}
.modal-nav-arrow {
font-size: 2rem;
padding: 15px;
}
.modal-nav-arrow.left {
left: 20px;
}
.modal-nav-arrow.right {
right: 20px;
}
.modal h2 {
font-size: 1.3rem;
}
.modal input {
padding: 12px;
font-size: 14px;
}
.modal button[type="submit"] {
padding: 12px;
font-size: 14px;
}
}
/* Стили для выпадающих меню */
.dropdown-menu {
background: #fff;
color: #222;
box-shadow: var(--elev-4);
border-radius: 12px;
padding: 12px; /* equal inset from all edges */
font-size: 14px;
display: flex;
flex-direction: column;
gap: 8px; /* space between items */
z-index: 9999;
border: 1px solid #e0e0e0;
position: absolute;
/* scaled down by 30% (0.7 * previous sizes) to make the popup visually smaller */
min-width: 154px; /* 220px * 0.7 */
width: 21%; /* 30% * 0.7 = 21% */
max-width: 294px; /* 420px * 0.7 */
box-sizing: border-box;
pointer-events: auto;
right: 0;
left: auto;
top: 100%;
margin-top: 8px;
opacity: 0;
transform: translateY(-10px);
transition: all 0.2s ease;
overflow: visible; /* allow separators or shadows to render outside safely */
}
/* Visible state for dropdowns (used by Cart). Without this, opacity stays 0. */
.dropdown-menu.show { opacity: 1; transform: translateY(0); }
/* Profile dropdown styles moved to css/dropdowns.css */
/* New markup: inner wrapper gives consistent inset for actionable buttons */
/* Redundant profile-specific dropdown-menu item rules removed to avoid duplication. */
.dropdown-menu h2 {
font-size: 16px;
font-weight: 600;
margin: 0 0 8px 0;
padding: 0 20px;
color: #333;
}
.dropdown-menu ul {
list-style: none;
margin: 0;
padding: 0 20px;
}
.dropdown-menu li {
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
.dropdown-menu .remove-from-cart {
color: #dc3545;
background: none;
border: none;
cursor: pointer;
font-size: 12px;
margin-left: 10px;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.15s ease;
}
.dropdown-menu .remove-from-cart:hover {
background: #f8f9fa;
}
.dropdown-menu .cart-empty {
color: #6c757d;
padding: 20px;
text-align: center;
font-style: italic;
}
.dropdown-menu .cart-action-btn {
width: calc(100% - 32px);
margin: 12px 16px 8px 16px;
padding: 10px 0;
background: #047857; /* emerald-700 */
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
justify-content: center;
}
.dropdown-menu .cart-action-btn:hover {
background: #065F46; /* emerald-800 */
}
.dropdown-menu .cart-action-btn[disabled] {
background: #6c757d;
color: #fff;
cursor: not-allowed;
}
.dropdown-menu .cart-action-btn[disabled]:hover {
background: #6c757d;
}
/* Профиль: текст с подчеркиванием как у ссылки, но по центру по вертикали */
#profileBtn {
/* Render as text inside a pill wrapper, keep button semantics */
-webkit-appearance: none; appearance: none;
background: transparent !important;
color: #000 !important;
border: none !important;
border-radius: 999px !important;
padding: 0 2px !important;
margin: 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1; /* tighter line height for centering */
box-shadow: none !important;
outline: none !important;
display: inline-flex; align-items: center; justify-content: center; /* align within wrapper */
min-height: 0 !important;
text-decoration: none !important;
cursor: pointer;
}
.profile-btn-label { display: inline-flex; align-items: center; }
.profile-notification-badge {
min-width: 20px;
height: 20px;
padding: 0 6px;
margin-left: 8px;
border-radius: 999px;
background: #b42318;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 20px;
text-align: center;
box-sizing: border-box;
}
#profileBtn::after { content: none !important; }
#profileBtn:hover, #profileBtn:active, #profileBtn:focus {
background: transparent !important;
color: #c99f72 !important;
border: none !important;
box-shadow: none !important;
text-decoration: none !important;
outline: none !important;
}
#profileBtn:hover *, #profileBtn:active *, #profileBtn:focus * {
color: #c99f72 !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Remove global focus ring on this specific control to keep it text-like */
#profileBtn:focus-visible { outline: none !important; box-shadow: none !important; }
/* Profile dropdown layout */
.auth-buttons .profile-wrapper { position: relative; }
.profile-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 220px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
box-shadow: 0 18px 36px rgba(15, 21, 35, 0.18);
padding: 12px;
z-index: 1200;
display: none;
}
.profile-dropdown.show { display: block; }
.profile-dropdown .dropdown-panel {
display: flex;
flex-direction: column;
gap: 6px;
}
.profile-dropdown .dropdown-btn {
border: none;
background: transparent;
padding: 10px 12px;
text-align: left;
font-size: 15px;
font-weight: 600;
border-radius: 12px;
color: #111827;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.profile-dropdown .dropdown-btn:hover {
background: #f7f9fc;
color: #0b1220;
}
.profile-dropdown .dropdown-btn.danger {
color: #b91c1c;
}
.profile-dropdown .dropdown-btn.danger:hover {
background: #fef2f2;
}
/* Flat cart button with black icon and inline count */
#cartBtn.cart-flat {
background: transparent !important;
border: none !important;
border-radius: 999px !important;
box-shadow: none !important;
color: #000 !important; /* icon + text black */
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 8px !important; /* larger click area */
font-weight: 600;
font-size: 16px !important; /* larger label */
min-height: 40px;
}
#cartBtn.cart-flat:hover {
background: transparent !important;
color: inherit !important; /* don't tint all text/icons via currentColor */
border-color: transparent !important;
box-shadow: none !important;
}
#cartBtn.cart-flat:active { color: #000 !important; }
#cartBtn.cart-flat:focus { outline: none !important; box-shadow: none !important; }
#cartBtn.cart-flat .cart-icon { width: 28px; height: 28px; display: inline-block; transition: color .15s ease, filter .12s ease; }
#cartBtn.cart-flat.active .cart-icon { color: var(--brand) !important; }
#cartBtn.cart-flat .cart-count-text { font-size: 16px; line-height: 1; }
/* keep default button style for others */
/* Улучшенные стили для кнопок в шапке */
.auth-buttons {
display: flex;
gap: 12px;
align-items: center;
}
.auth-buttons button {
padding: 9px 12px;
background: #103655;
color: #fff;
border: 1px solid rgba(255,255,255,.15);
border-radius: 999px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: background .15s, color .15s, border-color .15s;
}
.auth-buttons button:hover {
background: transparent;
transform: none;
box-shadow: none;
border-color: rgba(255,255,255,.35);
}
/* Make profile wrapper a pill in solid header */
.auth-buttons .profile-wrapper {
display: grid; /* simpler perfect centering */
place-items: center;
line-height: 1;
height: 44px;
padding: 0 12px; /* horizontal only to avoid optical sinking */
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 999px;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.auth-buttons .profile-wrapper:hover {
background: #f7f9fc;
border-color: #dbe1ea;
}
/* Стили для поисковой шторки */
.search-container {
flex-grow: 1;
display: flex;
gap: 10px;
position: relative;
}
/* В шапке поиск — это единый контрол (input + кнопка) — используем 2-колоночную grid,
чтобы кнопка упиралась в правый край БЕЗ лишнего хвоста. */
.header .search-container {
display: grid !important;
grid-template-columns: 1fr auto !important; /* поле тянется, кнопка ровно у правого края */
align-items: stretch !important;
gap: 0 !important;
cursor: text; /* клик в белой зоне ожидаемо переводит фокус в поле */
}
.header .search-container > .search-btn { cursor: pointer; }
.search-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 100%;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: var(--elev-4);
z-index: 10000;
max-height: 400px;
overflow-y: auto;
margin-top: 0;
display: none;
transition: box-shadow .15s ease, transform .12s ease;
}
.search-dropdown.show {
display: block;
}
.search-section {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.search-section:last-child {
border-bottom: none;
}
.search-section-title {
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
background: #f8f9fa;
margin: 0;
}
.search-item {
padding: 12px 16px;
cursor: pointer;
transition: background 0.15s ease;
border: none;
background: none;
width: 100%;
text-align: left;
display: flex;
align-items: center;
gap: 12px;
}
.search-item:hover {
background: #f8f9fa;
}
.search-item-icon {
font-size: 16px;
width: 20px;
text-align: center;
}
.search-item-content {
flex: 1;
}
.search-item-title {
font-size: 14px;
font-weight: 500;
color: #333;
margin: 0 0 2px 0;
}
.search-item-path {
font-size: 12px;
color: #6c757d;
margin: 0;
}
.search-no-results {
padding: 20px 16px;
text-align: center;
color: #6c757d;
font-style: italic;
}
.search-loading {
padding: 20px 16px;
text-align: center;
color: #6c757d;
}
/* Подсветка совпадений в поиске */
.search-highlight {
background: #fff3cd;
font-weight: 600;
padding: 1px 2px;
border-radius: 2px;
}
/* Дополнительные стили для корзины */
.cart-dropdown {
/* Make the cart panel 2x wider; anchored to the right so it grows to the left */
width: 800px !important;
min-width: 800px !important;
max-width: 800px !important;
padding: 20px 0 0 0; /* only top padding */
}
.cart-dropdown h2 {
color: #333 !important;
border-bottom: 1px solid #eee;
padding-bottom: 8px !important;
margin-bottom: 12px !important;
}
.cart-dropdown ul {
max-height: 200px;
overflow-y: auto;
}
/* Screenshot-like cart layout */
.cart-dropdown .cart-list-v2 { list-style: none; margin: 0; padding: 0 16px; }
.cart-dropdown .cart-item-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.cart-dropdown .cart-item-row:last-child { border-bottom: none; }
.cart-dropdown .ci-left { display: flex; align-items: flex-start; gap: 12px; }
.cart-dropdown .ci-thumb { width: 48px; height: 48px; background: #e9edf5; border-radius: 6px; flex-shrink: 0; }
.cart-dropdown img.ci-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; display: block; }
.cart-dropdown .ci-meta { display: flex; flex-direction: column; gap: 6px; }
.cart-dropdown .ci-title-text { font-weight: 600; color: #111827; font-size: 14px; }
.cart-dropdown .ci-title { height: 14px; width: 220px; background: #f1f4fa; border-radius: 4px; }
.cart-dropdown .ci-sku, .cart-dropdown .ci-stock, .cart-dropdown .ci-attr { height: 12px; background: #f6f7fb; border-radius: 4px; }
.cart-dropdown .ci-sku.short, .cart-dropdown .ci-stock.short { width: 120px; }
.cart-dropdown .ci-attr.medium { width: 180px; }
.cart-dropdown .ci-qty { text-align: right; }
.cart-dropdown .ci-qty-input { width: 64px; }
.cart-dropdown .ci-right { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; column-gap: 8px; row-gap: 2px; }
.cart-dropdown .ci-right .ci-price-text { grid-column: 1; }
.cart-dropdown .ci-right .ci-sub-text { grid-column: 1; text-align: right; margin-top: 0; }
.cart-dropdown .ci-right .remove-from-cart { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.cart-dropdown .ci-price-text { font-weight: 600; color: #111827; font-size: 13px; }
.cart-dropdown .ci-sub-text { color: #6b7280; font-size: 12px; }
.cart-dropdown .ci-price { height: 14px; width: 64px; background: #f1f4fa; border-radius: 4px; }
.cart-dropdown .ci-sub { height: 12px; width: 120px; background: #f6f7fb; border-radius: 4px; }
.cart-dropdown .skel { position: relative; overflow: hidden; }
.cart-dropdown .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,0.06), rgba(255,255,255,0)); animation: skel 1.2s infinite; }
@keyframes skel { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.cart-dropdown .skel.wide { height: 16px; width: 96px; background: #f1f4fa; border-radius: 4px; }
.cart-dropdown .skel.medium { height: 12px; width: 80px; background: #f6f7fb; border-radius: 4px; }
.cart-dropdown .cart-footer { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: transparent; border-top: 1px solid #e5e7eb; border-radius: 0 0 12px 12px; gap: 12px; }
.cart-dropdown .cart-footer-left { display: inline-flex; align-items: center; gap: 12px; padding: 0; margin: 0; line-height: 0; background: transparent; }
.cart-dropdown .cart-checkout-btn { margin: 0; }
.cart-dropdown .cart-checkout-btn {
background: #ccc; color: #fff; border: none; border-radius: 8px;
padding: 10px 14px; cursor: pointer; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1; appearance: none;
position: relative; overflow: hidden;
outline: none; box-shadow: none; transform: none;
}
.cart-dropdown .cart-checkout-btn:hover,
.cart-dropdown .cart-checkout-btn:focus {
background: #ccc !important; color: #fff !important;
box-shadow: none !important; outline: none !important; transform: none !important;
}
.cart-dropdown .cart-empty-link {
background: transparent; border: none; color: #6b7280; text-decoration: underline; cursor: pointer;
padding: 0; box-shadow: none; outline: none;
font-size: 12px; line-height: 1.2; white-space: nowrap; display: inline-block; flex: 0 0 auto; align-self: flex-end;
}
.cart-dropdown .cart-empty-link:hover, .cart-dropdown .cart-empty-link:focus { color: #6b7280; text-decoration: underline; background: transparent; }
.cart-dropdown .cart-footer-right { text-align: right; color: #111827; }
.cart-dropdown .cart-total-main { font-weight: 800; }
.cart-dropdown .cart-total-sub { font-size: 12px; color: #6b7280; }
.cart-dropdown li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-dropdown li:last-child {
border-bottom: none;
}
.cart-dropdown .remove-from-cart {
font-size: 16px !important;
padding: 0 6px !important; /* horizontal only */
border-radius: 4px !important;
height: 100%; /* fill pill height for perfect centering */
color: #000 !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
transition: opacity .12s ease !important;
}
.cart-dropdown .remove-from-cart:hover,
.cart-dropdown .remove-from-cart:focus {
background: transparent !important;
color: #000 !important;
opacity: 0.75;
outline: none !important;
box-shadow: none !important;
}
/* Qty input and actions */
.cart-dropdown .cart-item-actions { display: inline-flex; gap: 8px; align-items: center; }
.cart-dropdown .cart-qty-input {
width: 60px;
padding: 6px 8px;
border: 1px solid #d0d7e2;
border-radius: 6px;
font-size: 14px;
}
/* +/- buttons */
/* removed qty +/- buttons, mini-summary, and clear-cart button styles */
/* Removed old centering rule for #goToCheckout to keep the hit area equal to the visual button size */
/* .cart-dropdown #goToCheckout { display:block; margin:16px auto; width: calc(100% - 32px); } */
/* Product list card styles */
.fav-toggle { background: none; border: 1px solid rgba(0,0,0,0.2); width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, border-color .12s; position: relative; overflow: hidden; }
.fav-toggle:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.35); }
.fav-icon { font-size: 18px; line-height: 1; transition: transform .18s ease, color .18s ease; }
.fav-icon.hearted { color: #D4AF37; } /* золотая звезда */
.fav-icon.outline { color: #000; } /* черный контур */
/* Поп-анимация для звезды при переключении */
@keyframes fav-pop {
0% { transform: scale(1); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}
.fav-icon.anim-pop { animation: fav-pop 200ms ease-in-out; }
/* Пульс для звезды при активном состоянии */
@keyframes fav-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }
.fav-icon.hearted.anim-pulse { animation: fav-pulse 600ms ease-in-out; }
/* Лёгкая волна (ripple) на кнопке */
.btn-wave { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 999px; pointer-events: none; transform: translate(-50%,-50%) scale(0); opacity: .25; background: rgba(212,175,55,0.25); animation: ripple-wave 450ms ease-out; }
@keyframes ripple-wave { to { transform: translate(-50%,-50%) scale(6.2); opacity: 0; } }
/* Primary button: blue with white text (used for "В корзину") */
.btn-primary {
background: #0d6efd;
color: #fff;
border: 1px solid #0d6efd;
border-radius: 8px;
padding: 8px 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(13,110,253,0.25);
transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.btn-primary:hover { background: var(--brand); border-color: var(--brand); box-shadow: 0 4px 10px rgba(0,153,255,0.28); }
.btn-primary:active { background: #0a58ca; border-color: #0a58ca; transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.product-img {
width: 140px;
height: 120px;
object-fit: contain;
}
.product-name { font-weight: 600; margin-top: 8px; text-align:center }
.product-price { color: #0b1220; font-weight:800; margin-top:6px; font-size: 2.8rem; line-height: 1.1; }
.product-actions { margin-top: 10px; display:flex; gap:8px }
.btn-primary { border-radius:8px; padding:8px 12px; border:none }
.btn-ghost { background:transparent; border:1px solid var(--border); padding:8px 12px; border-radius:4px }
.btn-refined {
background: var(--brand-600);
color: #fff;
}
/* Hover elevation for product cards */
.product-card:hover {
/* keep card flat */
transform: none;
box-shadow: var(--elev-3);
border-color: var(--border);
}
/* Animate product image instead of tile */
.product-card img { transition: none; will-change: auto; }
.product-card:hover img { transform: none; }
/* Make tiles and text inside them crisper and higher-contrast without forcing GPU compositing
which can cause photo blurring on some devices/browsers. Keep sharpening for text only. */
.category-box, .product-card {
backface-visibility: hidden;
will-change: box-shadow;
/* subtle but slightly stronger border so tiles read as distinct objects */
border: 1px solid rgba(16,24,40,0.06);
}
.category-title, .subcategory-title, .product-title, .product-name {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
color: #0b1220; /* darker text for contrast */
font-weight: 700;
letter-spacing: 0.01em;
}
.product-desc { color: #374151; }
/* Slightly stronger hover elevation for clarity */
.category-box.is-hover, .product-card:hover {
box-shadow: 0 12px 34px rgba(16,24,40,0.14);
}
/* Images: avoid forcing special rendering modes; prefer natural photo scaling and contain to preserve integrity */
.category-image, .subcategory-image, .product-img, .product-card img {
image-rendering: auto;
object-fit: contain; /* preserve whole image to avoid ugly crops that can look soft */
width: 100%;
height: auto;
}
.product-card .product-media img {
width: 100%;
height: 100%;
object-fit: cover; /* fill the fixed viewport inside cards */
}
/* Keep text crisp on B2B / dark themes as well */
body.theme-b2b .category-title, body.theme-b2b .product-name, body.theme-b2b .product-title { color: #07102a; }
body.theme-dark .category-title, body.theme-dark .product-name, body.theme-dark .product-title { color: var(--text); -webkit-font-smoothing: antialiased; }
/* =============================
Refined B2B Theme Enhancements
Applied when has .theme-b2b
============================= */
body.theme-b2b {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}
body.theme-b2b .header {
/* Flat light header in B2B as well */
background: #ffffff38;
border-bottom: 1px #ffffff00;
box-shadow: none;
}
body.theme-b2b .home-icon {
color: var(--brand);
font-weight: 700;
}
body.theme-b2b .search-input {
background: #fff;
border: 1px solid var(--border);
border-radius: 999px 0 0 999px;
}
body.theme-b2b .search-btn { border-radius: 0 999px 999px 0; box-shadow: none; }
body.theme-b2b .auth-buttons button,
body.theme-b2b #cartBtn { border-radius: 8px; padding: 10px 16px; }
/* Hide any empty profile pill to avoid an empty button */
.auth-buttons .profile-wrapper:empty { display: none !important; }
/* Header transparent: make search unobtrusive or hidden depending on layout */
/* Transparent mode: keep search and assistant button default styling */
/* Transparent header: keep simple white for text/icons */
/* Do not recolor individual controls in transparent mode */
/* Solid header: use normal dark text */
/* In solid mode, rely on default control colors from base styles */
/* iOS-style glass effect for transparent header (with graceful fallback) */
/* Remove special glass/backdrop tweaks in transparent mode */
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) { }
/* Profile pill in transparent header (like search/cart/brand) */
/* Remove profile pill special-casing in transparent mode */
/* Cards */
body.theme-b2b .product-card,
body.theme-b2b .cart-page-container {
border-radius: 12px;
/* Stronger default elevation for better visibility */
box-shadow: 0 12px 28px rgba(16,24,40,0.10), 0 6px 14px rgba(16,24,40,0.08);
border: 1px solid var(--border);
}
/* Theme B2B hover elevations so they are not overridden by later rules */
body.theme-b2b .product-card:hover {
transform: none; /* keep tile still in B2B too */
box-shadow: 0 18px 48px rgba(16,24,40,0.14), 0 8px 18px rgba(16,24,40,0.10);
}
/* Forms */
body.theme-b2b input[type="text"],
body.theme-b2b input[type="email"],
body.theme-b2b input[type="password"],
body.theme-b2b select, body.theme-b2b textarea {
border-radius: 10px;
}
body.theme-b2b button[type="submit"],
body.theme-b2b .btn-primary {
border-radius: 10px;
}
/* Dropdown menus */
body.theme-b2b .dropdown-menu {
border-radius: 12px;
box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
border: 1px solid #e8ebf2;
}
body.theme-b2b .dropdown-menu .cart-action-btn {
border-radius: 8px;
}
/* Modals */
body.theme-b2b .modal {
border-radius: 16px;
box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);
}
body.theme-b2b .modal button[type="submit"] {
border-radius: 10px;
}
/* Breadcrumbs */
body.theme-b2b .breadcrumbs {
background: transparent;
}
body.theme-b2b .breadcrumb-link { color: #C99F72; }
body.theme-b2b .breadcrumb-link:hover { color: var(--brand); }
/* Product actions */
body.theme-b2b .btn-ghost { border-radius: 8px; }
body.theme-b2b .btn-primary { border-radius: 8px; }
/* Dark theme removed (site is single-style). */
/* =============================
Modern UI Overrides
(appended to unify and refine visuals site-wide)
============================= */
/* Footer */
.footer { position: relative; background:
/* soft top-center highlight */
radial-gradient(160% 220% at 50% 38%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 56%),
/* deeper base velvet */
radial-gradient(140% 200% at 50% 40%, #222222 0%, #222222 58%, #222222 100%),
/* subtle horizontal depth */
linear-gradient(90deg, #000000 0%, #0a0a0a 50%, #000000 100%);
color: #e6ecff; margin-top: 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.1); }
/* Velvet overlay for footer: soft highlight + corner vignettes for depth */
.footer::before { display: none !important; content: none !important; }
/* removed footer ::before texture for velvet finish */
.footer .container { padding: 30px 20px 64px; position: relative; z-index: 1; }
.footer > .container { padding-bottom: 0; }
.footer-inner { display: grid; grid-template-columns: 1.2fr 2.8fr; gap: 24px; align-items: start; }
.footer-brand {
font-weight: 900;
font-family: 'Lato', "Segoe UI", Roboto, Arial, sans-serif;
font-size: 26px;
color: #ffffff;
text-decoration: none;
letter-spacing: .01em;
/* make it plain text, not button-like */
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: inline; /* behave like plain text */
cursor: pointer;
}
.footer-brand:hover,
.footer-brand:active,
.footer-brand:focus {
background: transparent !important;
color: #ffffff !important;
text-decoration: none !important;
box-shadow: none !important;
outline: none !important;
}
.footer-brand:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 3px; }
.footer-tagline { margin-top: 6px; color: #ffffff; font-weight: 600; font-size: 13px; opacity: .5; line-height: 0.5; }
.footer-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.footer-title { font-size: 12px; color: #C99F72; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px 0; font-weight: 800; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.footer-links :is(a, .footer-link-static) { color: #ffffff; text-decoration: none; font-weight: 600; font-size: 13px; line-height: 0.5; }
.footer-links a:hover { color: #ffffff; text-decoration: underline; }
.footer-link-static { opacity: .65; }
.footer-address { color: #ffffff; font-size: 13px; line-height: 1.3; }
.footer-bottom {
position: relative;
width: 100%;
border-top: none;
margin-top: 15px;
background: #222222;
color: #C99F72;
font-size: 13.5px;
z-index: 0;
}
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; padding: 5px 20px; gap: 20px; max-width: 1320px; margin: 0 auto; }
.footer-bottom::before { content: none; display: none; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
body.theme-dark .footer-bottom {
position: relative;
background: #0f1523; color: var(--text);
}
body.theme-dark .footer-bottom::before { content: none; display: none; }
.footer-extra { opacity: .85; }
/* The catalog can contain arbitrary imported image URLs; keep their fallback quiet. */
img.image-fallback { background: #f3f4f6; }
/* Make the privacy link render as two tightly spaced lines */
.footer-links a[href="privacy.html"] {
/* Match other footer links exactly so it doesn't stand out */
display: inline; /* keep it text-like */
margin: 0;
padding: 0; /* remove any button padding */
word-spacing: 0; letter-spacing: 0; vertical-align: middle;
font-size: 13px; /* same as .footer-links a */
font-weight: 600; /* same as .footer-links a */
line-height: 1; /* tighter vertical gap between the two lines */
background: transparent; border: none; border-radius: 0; /* ensure not button-like */
color: #ffffff; text-decoration: none; /* same color as other footer links */
}
@media (max-width: 900px) {
.footer-inner { grid-template-columns: 1fr; }
.footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.footer-columns { grid-template-columns: 1fr; }
}
/* Typography helpers */
h1, .h1 { font-size: 2rem; font-weight: 800; color: var(--text); margin: 0 0 18px 0; }
h2, .h2 { font-size: 1.35rem; font-weight: 700; color: var(--text); margin: 0 0 14px 0; }
h3, .h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 0 0 10px 0; }
.lead { font-size: 1.05rem; color: var(--muted); }
.text-muted { color: var(--muted) !important; }
/* Section gradient shadow utility for smooth block separation */
.section-shadow { position: relative; overflow: visible; }
.section-shadow::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -42px; /* render below the dark band, not on it */
height: 100px;
background: linear-gradient(
to bottom,
rgba(16,24,40,0.00) 0px,
rgba(16,24,40,0.00) 48px, /* keep invisible over the dark band overlap */
rgba(16,24,40,0.14) 48px,
rgba(16,24,40,0.08) 78px,
rgba(16,24,40,0.00) 100%
);
border-radius: 0; /* avoid visible rounded edge on the band */
pointer-events: none;
z-index: 1;
}
/* Top-edge gradient shadow (for the next white section) */
.section-shadow-top { position: relative; overflow: visible; }
.section-shadow-top::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 18px; /* 3x shorter (56 -> 18) */
/* 2x darker start, quick fade */
background: linear-gradient(
to bottom,
rgba(16,24,40,0.44) 0%,
rgba(16,24,40,0.15) 60%,
rgba(16,24,40,0.00) 100%
);
pointer-events: none;
}
/* With no gaps, keep top-edge separator off for categories next to slider */
.slider-container + .categories.section-shadow-top::before { display: none !important; content: none !important; }
body.theme-dark .section-shadow-top::before {
background: linear-gradient(
to bottom,
rgba(0,0,0,0.90) 0%,
rgba(0,0,0,0.30) 60%,
rgba(0,0,0,0.00) 100%
);
}
body.theme-dark .section-shadow::after {
background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0));
}
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 14px; border-radius: 10px; border: 1px solid transparent;
font-weight: 600; cursor: pointer; transition: transform .08s, box-shadow .12s, background .12s, color .12s;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand); color: #fff; }
.btn-outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.btn-ghost { background: transparent; border:1px solid var(--border); color: var(--brand); padding: 10px 12px; border-radius: 10px; }
.btn-success { background: #16a34a; color: #fff; }
.btn-danger { background: #dc2626; color: #fff; }
/* Accessible focus rings: consistent across interactive elements */
:where(a, button, [role="button"], input, select, textarea, .btn, .filter-select, .filter-chip, .breadcrumb-link, .lang-btn, .fav-btn, .search-btn):focus {
outline: none; /* avoid double outlines */
}
:where(a, button, [role="button"], input, select, textarea, .btn, .filter-select, .filter-chip, .breadcrumb-link, .lang-btn, .fav-btn, .search-btn):focus-visible {
outline: 3px solid rgba(0,153,255,0.6);
outline-offset: 2px;
}
body.theme-dark :where(a, button, [role="button"], input, select, textarea, .btn, .filter-select, .filter-chip, .breadcrumb-link, .lang-btn, .fav-btn, .search-btn):focus-visible {
outline-color: rgba(138,180,255,0.75);
}
/* Header buttons and theme toggle */
.auth-buttons { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.auth-buttons button {
background: #fff; color: var(--brand); border: 1px solid var(--brand);
border-radius: 10px; padding: 9px 14px; font-weight: 600;
transition: background .12s, color .12s, transform .08s, box-shadow .12s;
}
.auth-buttons button:hover { background: var(--brand); color: #fff; box-shadow: 0 8px 22px rgba(26,35,126,.18); }
/* In header, keep auth buttons backgroundless on hover (except AI) */
.header .auth-buttons button:hover {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #c99f72 !important;
}
.theme-toggle {
background: #fff; border: 1px solid var(--border); color: #333; border-radius: 10px;
width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: #f5f7fb; }
/* ===============================
Unified radii for controls/cards
=============================== */
.btn, .btn-primary, .btn-ghost, .filter-select, input, select, textarea { border-radius: var(--radius-ctrl) !important; }
.product-card, .subcategory-box, .cart-page-container, .modal { border-radius: var(--radius-card) !important; }
/* Final guard: keep header action button sizing intact */
.header .auth-buttons button {
padding: 9px 14px;
font-size: 14px;
}
/* Remove legacy left margins in header buttons — spacing is handled by flex gap */
.header .auth-buttons button { margin-left: 0 !important; }
/* Stretch right group; keep a small gap from search, and push cart to the far right */
.header .auth-buttons { margin-left: auto; flex: 0 0 auto; align-self: center; margin-bottom: 0; justify-content: flex-end; }
/* Let the profile consume space so it stays left while cart hugs the right edge */
.auth-buttons #profileBtn { margin-right: auto; }
/* Generic page card */
.page-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--elev-2); }
.page-card { box-shadow: var(--elev-3); transition: box-shadow .15s ease, transform .12s ease; }
.page-card:hover { box-shadow: var(--elev-4); transform: none; }
/* Header elevation on scroll */
.header.header--elevated { box-shadow: 0 6px 18px rgba(16,24,40,0.14), 0 2px 8px rgba(16,24,40,0.08); }
/* Ensure B2B theme keeps a strong visible shadow when scrolled */
body.theme-b2b .header.header--elevated { box-shadow: 0 8px 22px rgba(23,43,77,0.28), 0 3px 10px rgba(23,43,77,0.16); }
body.theme-dark .header.header--elevated { box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.page { padding: 28px; }
/* Horizontal menu */
.main-menu { background:#fff; border-bottom:1px solid var(--border); }
.main-menu-list { list-style:none; display:flex; margin:0; padding:0; }
.main-menu-list a { display:block; padding:14px 20px; color:#333; text-decoration:none; font-weight:500; border-right:1px solid #eaeef5; }
.main-menu-list a:last-child { border-right:none; }
.main-menu-list a:hover, .main-menu-list a.active { background:#eef2ff; color: var(--brand); }
/* Filters bar */
.filters-bar { display:flex; gap:12px; margin: 18px 0 24px 0; flex-wrap: wrap; align-items:center; }
.filters-bar { padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--elev-2); }
.filter-btn { background:#f6f7fb; border:1px solid #eaedf5; border-radius: 10px; padding:8px 14px; cursor:pointer; }
.filter-btn.active { background:#e0e7ff; color: var(--brand); border-color:#c7d2fe; }
.sort-bar { margin-left:auto; }
/* Filter selects used on group/subcategory pages — make them visually prominent and compact */
.filter-select {
width: 100% !important;
max-width: none !important;
min-height: 38px;
padding: 6px 36px 6px 12px !important;
border: 1px solid #d6c5b4 !important;
border-radius: 4px !important;
background: #fff !important;
color: #2c1f16 !important;
font-size: 0.95rem !important;
box-shadow: none !important;
transition: border-color 0.12s ease, background 0.12s ease;
will-change: border-color;
margin-right: 0 !important;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23513624' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
}
.filter-select:focus {
outline: none !important;
border-color: #c49b73 !important;
background: #fffdf7 !important;
}
.filter-select:hover {
border-color: #c49b73 !important;
background: #fffdf7 !important;
}
.filter-range-wrap {
display: flex;
flex-direction: column;
gap: 6px;
border: none;
background: transparent;
border-radius: 0;
padding: 0;
}
.filter-range {
width: 100%;
accent-color: #c49b73;
cursor: pointer;
}
.filter-range-value-row {
display: flex;
align-items: center;
min-height: 22px;
}
.filter-range-static {
display: inline-block;
color: #6b4d35;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.2;
padding: 0;
margin: 0;
}
.filter-range-input {
width: 35px;
height: 30px;
border: 1px solid #d9c3ac;
border-radius: 6px;
background: #fff;
color: #5b3e28;
font-size: 0.92rem;
font-weight: 600;
line-height: 30px;
padding: 0 8px;
margin: 0;
outline: none;
text-align: left;
box-sizing: content-box;
}
.filter-range-input::placeholder {
color: #9f7f62;
opacity: 1;
font-weight: 500;
}
.filter-range-input:focus {
border-color: #c49b73;
box-shadow: 0 0 0 2px rgba(196,155,115,0.14);
}
.filter-range-input::-webkit-outer-spin-button,
.filter-range-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.filter-range-input[type=number] {
appearance: textfield;
-moz-appearance: textfield;
}
.filters-panel.filters-panel--cylinders {
grid-template-columns: minmax(260px, 1.15fr) minmax(220px, 1fr);
align-items: start;
gap: 16px;
}
.filters-panel.filters-panel--cylinders .filter-block {
gap: 6px;
}
.filters-panel.filters-panel--cylinders .filter-block--stroke .filter-range,
.filters-panel.filters-panel--cylinders .filter-block--diameter .filter-range {
height: 18px;
appearance: none;
background: transparent;
}
.filters-panel.filters-panel--cylinders .filter-block--stroke .filter-range::-webkit-slider-runnable-track,
.filters-panel.filters-panel--cylinders .filter-block--diameter .filter-range::-webkit-slider-runnable-track {
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, #d7b594 0%, #b7875a 100%);
}
.filters-panel.filters-panel--cylinders .filter-block--stroke .filter-range::-webkit-slider-thumb,
.filters-panel.filters-panel--cylinders .filter-block--diameter .filter-range::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #9b6d44;
background: #fff;
margin-top: -5px;
box-shadow: 0 1px 6px rgba(30, 22, 14, 0.28);
}
.filters-panel.filters-panel--cylinders .filter-block--stroke .filter-range::-moz-range-track,
.filters-panel.filters-panel--cylinders .filter-block--diameter .filter-range::-moz-range-track {
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, #d7b594 0%, #b7875a 100%);
}
.filters-panel.filters-panel--cylinders .filter-block--stroke .filter-range::-moz-range-thumb,
.filters-panel.filters-panel--cylinders .filter-block--diameter .filter-range::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #9b6d44;
background: #fff;
box-shadow: 0 1px 6px rgba(30, 22, 14, 0.28);
}
@media (max-width: 900px) {
.filters-panel.filters-panel--cylinders {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
/* On small screens, let filters become full width for usability */
.filter-select { width: 100% !important; max-width: none !important; }
.filters-panel { grid-template-columns: repeat(1, 1fr) !important; }
}
/* Legacy custom dropdown removed: using native