/* ==========================================================================
DESIGN SYSTEM & VARIABLES
========================================================================== */
:root {
/* Color Palette */
--color-bg-primary: #121212;
/* Deep dark black */
--color-bg-secondary: #1E1E1E;
/* Dark graphite for cards/drawers/inputs */
--color-text-primary: #F5F5F5;
/* Contrast off-white */
--color-text-muted: #A0A0A0;
/* Light gray */
--color-accent: #D4AF37;
/* Gold accent */
--color-sale-price: #ff3b30;
/* Red accent for sale prices */
--color-border: #2E2E2E;
/* Subtle light border */
/* Layout & Spacing */
--max-width: 1400px;
--transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/* Fonts */
--font-heading: 'Outfit', 'Inter', -apple-system, sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;
}
/* ==========================================================================
BASE & RESET
========================================================================== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
height: 100%;
background-color: #000000 !important;
}
body {
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
background: none;
border: none;
cursor: pointer;
font-family: inherit;
color: inherit;
outline: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--color-text-muted);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-primary);
}
/* ==========================================================================
REUSABLE UTILITIES
========================================================================== */
.section-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 80px 40px;
}
@media (max-width: 768px) {
.section-container {
padding: 50px 20px;
}
}
.btn {
display: inline-block;
padding: 14px 28px;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: var(--transition-smooth);
border-radius: 4px;
text-align: center;
}
.btn-primary {
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border: 1px solid var(--color-text-primary);
}
.btn-primary:hover {
background-color: transparent;
color: var(--color-text-primary);
}
.btn-secondary {
background-color: transparent;
color: var(--color-text-primary);
border: 1px solid var(--color-text-primary);
}
.btn-secondary:hover {
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
}
/* ==========================================================================
PROMO BAR
========================================================================== */
.promo-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 35px;
background-color: #000000;
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
overflow: hidden;
z-index: 1090;
display: flex;
align-items: center;
box-sizing: border-box;
animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.promo-bar-track {
display: flex;
white-space: nowrap;
animation: marqueeScroll 28s linear infinite;
}
.promo-bar-text {
padding-right: 80px;
display: inline-block;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes marqueeScroll {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
/* Uses half-width loop shift */
}
/* ==========================================================================
HEADER (Navigation - FIXED & SMART HIDING)
========================================================================== */
.main-header {
background-color: rgba(18, 18, 18, 0.85);
/* Semitransparent dark */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: fixed;
top: 0;
/* Pinned to the top */
left: 0;
width: 100%;
z-index: 2400;
/* Higher than product details modal (2300) */
border-bottom: none;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, top 0.3s ease;
}
.main-header.header-top {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.main-header.header-top .logo,
.main-header.header-top .nav-category-link,
.main-header.header-top .action-circle-btn {
color: #fff !important;
}
.main-header.header-top .action-circle-btn svg {
color: #fff !important;
}
.main-header.header-hidden {
transform: translateY(-100%);
}
/* Force solid header styling when detailed product modal is active */
body.modal-open .main-header {
background-color: var(--color-bg-secondary) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid var(--color-border) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
padding: 10px 0 !important;
}
body.modal-open .main-header .logo,
body.modal-open .main-header .nav-category-link,
body.modal-open .main-header .action-circle-btn {
color: var(--color-text-primary) !important;
}
body.modal-open .main-header .action-circle-btn svg {
color: var(--color-text-primary) !important;
}
/* Override solid styling for details modal header at the top scroll position */
body.modal-open .main-header.header-top {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
body.modal-open .main-header.header-top .logo,
body.modal-open .main-header.header-top .nav-category-link,
body.modal-open .main-header.header-top .action-circle-btn {
color: #fff !important;
}
body.modal-open .main-header.header-top .action-circle-btn svg {
color: #fff !important;
}
.header-container {
max-width: 100%;
padding: 20px 60px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
@media (max-width: 768px) {
.header-container {
padding: 15px 20px;
}
}
.logo {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--color-text-primary);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease, color 0.3s ease;
}
.logo:hover {
transform: translate(-50%, -50%) scale(1.05);
}
.nav-menu {
display: flex;
gap: 40px;
}
@media (max-width: 768px) {
.nav-menu {
display: none;
}
}
.nav-link {
display: inline-block;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-primary);
padding: 6px 0;
transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.25s ease;
}
.nav-link:hover,
.nav-link.active {
transform: scale(1.15);
color: var(--color-accent);
}
.header-left-col {
display: flex;
align-items: center;
gap: 15px;
}
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
/* Premium Action Circle Buttons */
.action-circle-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--color-text-primary);
position: relative;
cursor: pointer;
transition: var(--transition-smooth);
}
.action-circle-btn:hover {
color: var(--color-accent);
transform: translateY(-2px);
background-color: transparent;
}
.cart-badge,
.wishlist-badge {
position: absolute !important;
top: -5px !important;
right: -8px !important;
background-color: #000000 !important;
color: #ffffff !important;
font-size: 0.65rem !important;
font-weight: 600 !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #ffffff !important;
transition: var(--transition-smooth) !important;
}
.action-circle-btn:hover .cart-badge,
.action-circle-btn:hover .wishlist-badge {
background-color: var(--color-accent) !important;
color: var(--color-bg-secondary) !important;
border-color: var(--color-accent) !important;
}
/* ==========================================================================
HERO SECTION
========================================================================== */
.hero-section {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
background-image: url('new-hero.webp') !important;
/* Наш чистый сохраненный WebP фон */
background-size: cover;
background-position: center;
animation: heroBreathe 20s ease-in-out infinite alternate;
overflow: hidden;
}
/* Едва заметный, плавный интерактив для текстуры самого фото */
@keyframes heroBreathe {
0% {
transform: scale(1);
}
100% {
transform: scale(1.02);
}
}
.hero-interactive-container {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: auto;
}
.interactive-logo {
font-family: 'Montserrat', 'Arial Black', sans-serif;
font-weight: 900;
text-transform: uppercase;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
/* Жесткое сжатие строк между собой, как на фото */
line-height: 0.82 !important;
user-select: none;
}
.interactive-logo .logo-row {
display: flex;
justify-content: center;
color: #ffffff;
/* Подгоняем размер под пропорции (DR и ILL огромные, STORE чуть меньше) */
font-size: 120px;
/* Буквы почти слипаются друг с другом */
letter-spacing: -5px !important;
margin: 0;
padding: 0;
}
/* Строка STORE на фото визуально шире, но буквы чуть меньше по высоте */
.interactive-logo .logo-row.store-row {
font-size: 58px;
letter-spacing: -1px !important;
margin-top: 4px;
/* Легкая корректировка отступа верхней строки */
}
.interactive-logo span {
display: inline-block;
color: #ffffff;
/* Ускоренная синхронная анимация сдвига и неона */
transition: transform 0.2s ease, text-shadow 0.2s ease, color 0.2s ease !important;
}
.interactive-logo span:hover {
color: #ffffff !important;
/* Умеренное премиальное свечение (золотая середина) */
text-shadow:
0 0 4px rgba(255, 255, 255, 0.6),
0 0 8px rgba(255, 255, 255, 0.8),
0 0 15px rgba(255, 255, 255, 0.9) !important;
}
.logo-subtext {
margin-top: 25px;
margin-bottom: 35px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.logo-subtext p {
margin: 0;
font-family: 'Outfit', 'Inter', sans-serif;
font-weight: 500;
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.18em;
text-indent: 0.18em;
text-transform: uppercase;
}
.catalog-btn-main {
font-family: 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #000000;
background-color: #ffffff;
border: 1.5px solid #ffffff;
padding: 16px 45px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.catalog-btn-main:hover {
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
transform: translateY(-3px) scale(1.03);
box-shadow: 0 15px 40px rgba(255, 255, 255, 0.15);
}
/* ==========================================================================
BRANDS SECTION
========================================================================== */
.brands-section {
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border);
}
.brands-section .section-title {
margin-bottom: 30px;
}
.brands-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 992px) {
.brands-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.brands-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}
.brand-card {
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
padding: 40px 20px;
text-align: center;
cursor: pointer;
border-radius: 4px;
transition: var(--transition-smooth);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}
.brand-logo-text {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-primary);
transition: var(--transition-smooth);
}
.brand-card:hover {
background-color: var(--color-text-primary);
border-color: var(--color-text-primary);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.brand-card:hover .brand-logo-text {
color: var(--color-bg-secondary);
}
/* ==========================================================================
CATALOG & FILTERS
========================================================================== */
.catalog-section {
background-color: var(--color-bg-secondary);
}
.section-title {
font-family: var(--font-heading);
font-size: 2.25rem;
font-weight: 600;
letter-spacing: 0.05em;
text-align: center;
margin-bottom: 40px;
}
.filter-tabs {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 24px;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid var(--color-border);
border-radius: 30px;
color: var(--color-text-muted);
transition: var(--transition-smooth);
}
.filter-btn:hover {
color: var(--color-text-primary);
border-color: var(--color-text-primary);
}
.filter-btn.active {
color: var(--color-bg-secondary);
background-color: var(--color-text-primary);
border-color: var(--color-text-primary);
}
/* Products Grid */
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3 items on screen */
gap: 40px 30px;
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 1024px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
/* 2 items on tablets */
}
}
@media (max-width: 768px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
/* 2 items on mobile */
gap: 20px 12px;
padding: 0 5px;
}
}
/* Load More Button */
.load-more-container {
display: flex;
justify-content: center;
align-items: center;
margin: 40px auto;
width: 100%;
}
.load-more-btn {
background-color: var(--color-text-primary, #000000);
color: var(--color-bg-primary, #ffffff);
border: 1px solid var(--color-text-primary, #000000);
padding: 14px 32px;
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: 4px;
cursor: pointer;
transition: var(--transition-smooth, all 0.3s ease);
}
.load-more-btn:hover {
background-color: transparent;
color: var(--color-text-primary, #000000);
}
/* Product Card */
.product-card {
background-color: var(--color-bg-secondary);
display: flex;
flex-direction: column;
position: relative;
cursor: pointer;
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.product-image-container {
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden !important;
position: relative;
background-color: var(--color-bg-primary);
margin-bottom: 15px;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
/* Force high-quality GPU interpolation */
}
.product-card:hover .product-image {
transform: scale(1.05);
}
.product-info {
padding: 5px 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.product-category {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
.product-title {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 500;
color: var(--color-text-primary);
transition: color 0.3s ease;
}
.product-card:hover .product-title {
color: var(--color-accent);
}
.product-price {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
}
/* ==========================================================================
NEWSLETTER SECTION
========================================================================== */
.newsletter-section {
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
text-align: center;
}
.newsletter-container {
max-width: 600px;
margin: 0 auto;
padding: 80px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.newsletter-container h3 {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 400;
letter-spacing: 0.05em;
}
.newsletter-container p {
font-size: 0.95rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
}
.newsletter-form {
display: flex;
width: 100%;
gap: 10px;
}
@media (max-width: 576px) {
.newsletter-form {
flex-direction: column;
}
}
.newsletter-form input[type="email"] {
flex-grow: 1;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 14px 20px;
color: var(--color-bg-secondary);
font-size: 0.9rem;
border-radius: 4px;
outline: none;
transition: var(--transition-smooth);
}
.newsletter-form input[type="email"]:focus {
border-color: var(--color-bg-secondary);
}
.newsletter-form button {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
border-color: var(--color-bg-secondary);
white-space: nowrap;
}
.newsletter-form button:hover {
background-color: transparent;
color: var(--color-bg-secondary);
}
.newsletter-message {
display: none;
font-size: 0.9rem;
color: #4BB543;
margin-top: 10px;
}
/* ==========================================================================
CART DRAWER (Sidebar Cart)
========================================================================== */
.cart-drawer {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 2100;
visibility: hidden;
transition: visibility 0.4s;
}
.cart-drawer.open {
visibility: visible;
}
.cart-drawer-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
}
.cart-drawer.open .cart-drawer-overlay {
opacity: 1;
}
.cart-drawer-content {
position: absolute;
top: 0;
right: 0;
width: 450px;
max-width: 100%;
height: 100%;
background-color: var(--color-bg-secondary);
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex;
flex-direction: column;
z-index: 1002;
}
.cart-drawer.open .cart-drawer-content {
transform: translateX(0);
}
.cart-drawer-header {
padding: 24px 30px;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-drawer-header h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 600;
}
.close-cart-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
background: transparent;
cursor: pointer;
outline: none;
transition: var(--transition-smooth);
}
.close-cart-btn:hover {
transform: rotate(90deg);
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
}
.cart-drawer-items {
flex-grow: 1;
overflow-y: auto;
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
}
.empty-cart-message {
text-align: center;
color: var(--color-text-muted);
font-size: 0.95rem;
margin-top: 50px;
}
.no-products-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 100px 0;
margin: 40px 0;
box-sizing: border-box;
}
.no-products-text {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
text-align: center;
margin: 0;
}
/* Cart Item Card */
.cart-item {
display: flex;
gap: 15px;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding-bottom: 20px;
}
.cart-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.cart-item-image {
width: 90px;
height: 115px;
object-fit: cover;
background-color: var(--color-bg-secondary);
border-radius: 6px;
transform: translateZ(0);
backface-visibility: hidden;
}
.cart-item-details {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.cart-item-title {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 500;
}
.cart-item-size {
font-size: 0.75rem;
color: var(--color-text-muted);
text-transform: uppercase;
}
.cart-item-price {
font-size: 0.9rem;
font-weight: 600;
}
.cart-item-quantity {
display: flex;
align-items: center;
gap: 10px;
margin-top: 5px;
}
.qty-btn {
width: 26px;
height: 26px;
border: 1px solid var(--color-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
transition: var(--transition-smooth);
}
.qty-btn:hover {
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-color: var(--color-text-primary);
}
.qty-val {
font-size: 0.875rem;
font-weight: 500;
min-width: 20px;
text-align: center;
}
.cart-item-remove {
color: var(--color-text-muted);
transition: var(--transition-smooth);
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.cart-item-remove:hover {
color: red;
}
/* Cart Footer */
.cart-drawer-footer {
padding: 30px;
border-top: 1px solid var(--color-border);
background-color: var(--color-bg-primary);
}
.cart-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 20px;
}
.checkout-btn {
width: 100%;
}
/* ==========================================================================
TOAST NOTIFICATIONS
========================================================================== */
.toast-container {
display: none !important;
}
.toast {
background-color: #000000 !important;
color: #ffffff !important;
border: none !important;
padding: 14px 26px !important;
font-size: 0.85rem;
font-weight: 600;
border-radius: 4px !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
display: flex;
align-items: center;
gap: 10px;
transform: translateY(20px);
opacity: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: toastIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards, toastOut 0.3s 2.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
pointer-events: auto;
}
@keyframes toastIn {
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes toastOut {
to {
transform: translateY(-10px);
opacity: 0;
}
}
/* ==========================================================================
INTERACTIVE MODALS (Search & Product Details)
========================================================================== */
/* Search Modal */
.search-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2200;
visibility: hidden;
transition: visibility 0.4s;
}
.search-modal.open {
visibility: visible;
}
.search-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.4s ease;
}
.search-modal.open .search-modal-overlay {
opacity: 1;
}
.search-modal-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: var(--color-bg-secondary);
padding: 40px 80px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transform: translateY(-100%);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: 1052;
display: flex;
flex-direction: column;
gap: 30px;
}
@media (max-width: 768px) {
.search-modal-content {
padding: 30px 20px;
}
}
.search-modal.open .search-modal-content {
transform: translateY(0);
}
.search-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
gap: 30px;
}
.search-input-wrapper {
display: flex;
align-items: center;
flex-grow: 1;
border-bottom: 2px solid var(--color-text-primary);
padding: 10px 0;
gap: 15px;
}
.search-icon-inside {
color: var(--color-text-muted);
}
#search-input {
width: 100%;
border: none;
background: transparent;
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 400;
color: var(--color-text-primary);
outline: none;
}
.close-search-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-smooth);
}
.close-search-btn:hover {
transform: rotate(90deg);
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
}
.search-results {
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
max-height: 50vh;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding-bottom: 20px;
}
@media (max-width: 1024px) {
.search-results {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.search-results {
grid-template-columns: 1fr;
}
}
/* Product Modal (Details Modal - Fullscreen Overlay) */
.product-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2300;
visibility: hidden;
display: flex;
align-items: stretch;
justify-content: stretch;
transition: visibility 0.5s;
}
.product-modal.open {
visibility: visible;
}
.product-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.5s ease;
}
.product-modal.open .product-modal-overlay {
opacity: 1;
}
.product-modal-content {
position: relative;
background-color: var(--color-bg-secondary);
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100vh;
border-radius: 0;
box-shadow: none;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1062;
overflow-y: auto;
}
.product-modal.open .product-modal-content {
transform: translateY(0);
}
.close-modal-btn {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: 2500;
/* Sit on top of the main-header (2400) */
transition: var(--transition-smooth);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.close-modal-btn:hover {
transform: rotate(90deg) scale(1.05);
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-color: var(--color-text-primary);
}
.product-modal-body {
display: grid !important;
grid-template-columns: 1.3fr 0.7fr !important;
/* Wider gallery column, narrower details column like kkaitew.store */
padding: 110px 80px 80px !important;
/* sitting nicely below header with a 30px gap */
gap: 60px !important;
max-width: var(--max-width) !important;
margin: 0 auto !important;
min-height: 100vh !important;
align-items: start !important;
/* Align gallery and details to top like kkaitew.store */
}
@media (max-width: 992px) {
.product-modal-body {
grid-template-columns: 1fr !important;
padding: 100px 30px 40px !important;
gap: 40px !important;
align-items: start !important;
min-height: auto !important;
}
}
/* Modal Gallery */
.product-modal-gallery {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
/* Left align the entire gallery like kkaitew.store */
gap: 35px !important;
/* Increased distance between main image and thumbnails */
}
.main-image-container {
width: 100% !important;
max-width: calc(72vh * 3 / 4) !important;
/* Expanded width to 72vh ratio for larger image size */
max-height: 72vh !important;
/* Expanded height constraint */
aspect-ratio: 3 / 4 !important;
background-color: var(--color-bg-primary) !important;
border-radius: 4px !important;
overflow: hidden !important;
box-shadow: none !important;
/* Remove shadow to look flat like kkaitew.store */
position: relative !important;
margin: 0 !important;
/* Align to the left (remove auto-centering) */
}
.main-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: var(--transition-smooth);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
/* Force high-quality GPU interpolation */
}
.gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #000000;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
opacity: 0;
}
.gallery-arrow svg {
width: 20px;
height: 20px;
}
.main-image-container:hover .gallery-arrow {
opacity: 1;
}
.gallery-arrow-left {
left: 15px;
}
.gallery-arrow-left:hover {
background-color: rgba(255, 255, 255, 0.95);
color: #000000;
transform: translateY(-50%) translateX(-4px) scale(1.08);
}
.gallery-arrow-right {
right: 15px;
}
.gallery-arrow-right:hover {
background-color: rgba(255, 255, 255, 0.95);
color: #000000;
transform: translateY(-50%) translateX(4px) scale(1.08);
}
.thumbnail-list {
display: flex !important;
gap: 12px !important;
overflow-x: auto !important;
/* Enable horizontal scrolling */
width: 100% !important;
max-width: calc(72vh * 3 / 4) !important;
/* Match the exact width of the main image container */
scrollbar-width: none !important;
/* Hide scrollbar for Firefox */
}
.thumbnail-list::-webkit-scrollbar {
display: none !important;
/* Hide scrollbar for Chrome/Safari/Edge */
}
.thumbnail-item {
flex-shrink: 0 !important;
/* Prevent thumbnails from shrinking */
width: 80px !important;
/* Increased square size for better detail visibility */
height: 80px !important;
aspect-ratio: 1 / 1 !important;
background-color: var(--color-bg-secondary) !important;
/* Match dark theme image background */
border-radius: 4px !important;
cursor: pointer !important;
border: 2px solid transparent !important;
transition: var(--transition-smooth) !important;
}
.product-modal-gallery .thumbnail-item img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
/* Fill container nicely */
border-radius: 4px !important;
/* Apply border radius directly to img to fix Edge/Chrome overflow pixelation bug */
image-rendering: auto !important;
}
.thumbnail-item.active {
border-color: var(--color-text-primary);
}
/* Modal Details */
.product-modal-details {
display: flex;
flex-direction: column;
gap: 15px !important;
justify-content: flex-start !important;
}
.modal-brand {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.modal-title {
font-family: var(--font-heading);
font-size: 2rem !important;
/* Large, bold title like kkaitew.store */
font-weight: 700 !important;
line-height: 1.2;
letter-spacing: -0.01em !important;
margin-bottom: 5px !important;
}
.modal-price {
font-size: 1.5rem !important;
/* Slightly larger, elegant price */
font-weight: 600 !important;
margin-bottom: 10px !important;
color: var(--color-text-primary) !important;
}
.modal-description {
font-size: 0.95rem;
color: var(--color-text-muted);
line-height: 1.6;
}
.size-selector-container {
display: flex;
flex-direction: column;
gap: 8px !important;
}
.selector-label {
font-size: 0.8rem !important;
font-weight: 600 !important;
text-transform: none !important;
/* Sentence-case */
letter-spacing: 0.02em !important;
color: var(--color-text-primary) !important;
}
.size-options {
display: flex;
gap: 10px;
}
.size-btn {
width: 40px !important;
height: 40px !important;
border: 1.5px solid var(--color-border) !important;
/* Soft border like kkaitew.store */
font-size: 0.85rem !important;
font-weight: 700 !important;
border-radius: 0 !important;
/* Pure sharp square corners like kkaitew.store */
background: transparent !important;
color: var(--color-text-primary) !important;
transition: var(--transition-smooth) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.size-btn:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
}
.size-btn.active {
background-color: var(--color-text-primary) !important;
color: var(--color-bg-secondary) !important;
border-color: var(--color-text-primary) !important;
}
.modal-actions-container {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
width: 100% !important;
}
.modal-add-to-cart-btn {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-primary) !important;
border: 2px solid var(--color-text-primary) !important;
border-radius: 100px !important;
/* Pill capsule shape like kkaitew.store */
padding: 16px 30px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
width: 100% !important;
cursor: pointer !important;
transition: var(--transition-smooth) !important;
margin: 0 !important;
}
.modal-add-to-cart-btn:hover {
background-color: var(--color-text-primary) !important;
color: var(--color-bg-secondary) !important;
}
.modal-buy-now-btn {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-primary) !important;
border: 2px solid var(--color-text-primary) !important;
border-radius: 100px !important;
padding: 16px 30px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
width: 100% !important;
cursor: pointer !important;
transition: var(--transition-smooth) !important;
margin: 0 !important;
}
.modal-buy-now-btn:hover {
background-color: var(--color-text-primary) !important;
color: var(--color-bg-secondary) !important;
}
/* Flying Heart Animation Styles */
.flying-heart {
position: fixed !important;
z-index: 10000 !important;
pointer-events: none !important;
transition: transform 1.1s cubic-bezier(0.25, 1, 0.50, 1), opacity 1.1s ease-out, scale 1.1s ease-in-out !important;
transform-origin: center center !important;
}
@keyframes wishlist-bump {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.wishlist-bump {
animation: wishlist-bump 0.3s ease-in-out !important;
}
/* ==========================================================================
DELIVERY ACCORDION
========================================================================== */
.modal-delivery-info {
margin-top: 10px !important;
border-top: 1px solid var(--color-border) !important;
border-bottom: 1px solid var(--color-border) !important;
}
.accordion-trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0 !important;
font-size: 0.95rem !important;
/* Clean normal typography like kkaitew.store */
font-weight: 500 !important;
text-transform: none !important;
/* Sentence-case instead of uppercase */
letter-spacing: normal !important;
color: var(--color-text-primary) !important;
text-align: left;
transition: color 0.3s ease;
}
.accordion-trigger:hover {
color: var(--color-accent);
}
.accordion-arrow {
transition: transform 0.3s ease;
color: var(--color-text-muted);
}
.accordion-trigger.open .accordion-arrow {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-inner-content {
padding: 0 0 20px 0;
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.6;
}
.accordion-inner-content p {
margin-bottom: 8px;
}
.accordion-inner-content p:not(:first-child) {
margin-top: 15px;
}
.accordion-inner-content ul {
list-style-type: none;
padding-left: 0;
}
.accordion-inner-content li {
position: relative;
padding-left: 15px;
margin-bottom: 5px;
}
.accordion-inner-content li::before {
content: "•";
position: absolute;
left: 0;
color: var(--color-accent);
}
/* Adjacent border merge for dynamic panels */
.modal-delivery-info + .modal-delivery-info {
border-top: none !important;
margin-top: 0 !important;
}
/* Measurements Modal Custom Styles */
#measurements-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3100 !important;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
transition: visibility 0.4s ease;
}
#measurements-modal.open {
visibility: visible;
}
#measurements-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.4s ease;
will-change: opacity;
}
#measurements-modal.open #measurements-modal-overlay {
opacity: 1;
}
#measurements-modal .info-modal-content {
position: relative;
background-color: var(--color-bg-secondary);
width: 90%;
padding: 35px 45px !important;
border-radius: 12px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: translateY(30px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
z-index: 2;
box-sizing: border-box;
max-height: 92vh !important;
display: flex;
flex-direction: column;
}
#measurements-modal.open .info-modal-content {
opacity: 1;
transform: translateY(0);
}
.measurements-modal-width {
max-width: 1350px !important;
width: 95vw !important;
}
/* Measurements Two-Column Content Layout */
.measurements-layout {
display: flex;
flex-direction: row;
gap: 40px;
align-items: stretch;
margin-top: 10px;
width: 100%;
}
.measurements-schema-container {
flex: 1 1 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 20px;
height: 100%;
box-sizing: border-box;
}
.measurements-schema-img {
max-width: 100%;
max-height: 620px !important;
object-fit: contain;
}
.measurements-info-container {
flex: 2 1 400px;
width: 100%;
}
.measurements-info-container .info-modal-title {
text-align: center;
margin-bottom: 20px;
margin-top: 0;
}
.measurements-sizes-grid {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
}
.measurements-size-column {
flex: 1 1 180px;
min-width: 150px;
background-color: rgba(255, 255, 255, 0.015);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 22px !important;
box-sizing: border-box;
}
.measurements-size-title {
margin: 0 0 12px 0;
font-size: 0.9rem;
font-weight: 700;
color: var(--color-text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--color-border);
padding-bottom: 8px;
}
.measurements-list {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.measurements-list li {
font-size: 0.95rem !important;
color: var(--color-text-primary);
margin-bottom: 10px !important;
line-height: 1.4;
}
.measurement-key {
color: var(--color-accent) !important;
font-weight: 700;
margin-right: 4px;
}
@media (max-width: 768px) {
.measurements-layout {
flex-direction: column;
gap: 30px;
}
.measurements-schema-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.measurements-schema-img {
max-height: 250px;
}
.measurements-sizes-grid {
flex-direction: column;
align-items: stretch;
}
.measurements-size-column {
width: 100%;
}
#measurements-modal .info-modal-content {
padding: 30px 20px;
max-height: 90vh;
}
}
/* ==========================================================================
RELATED PRODUCTS SECTION (In Details Modal)
========================================================================== */
.related-products-section {
padding: 80px 80px;
border-top: 1px solid var(--color-border);
background-color: var(--color-bg-primary);
}
@media (max-width: 768px) {
.related-products-section {
padding: 50px 20px;
}
}
.related-title {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 500;
text-align: center;
margin-bottom: 40px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: var(--max-width);
margin: 0 auto;
}
/* Remove grey background boxes from recommended product cards inside details modal */
.related-grid .product-card {
background-color: transparent !important;
}
@media (max-width: 992px) {
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.related-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
FOOTER
========================================================================== */
.main-footer {
background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65)), url('фото/info_footer.webp') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
color: #fff;
margin-top: auto;
border-top: 1px solid var(--color-border);
}
.footer-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 80px 40px 40px;
display: grid;
grid-template-columns: 1.5fr 1fr 1.5fr;
gap: 60px;
}
@media (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr;
padding: 50px 20px 30px;
gap: 30px;
}
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 15px;
}
.footer-logo {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.15em;
}
.footer-brand p {
color: #aaa;
font-size: 0.9rem;
max-width: 320px;
}
.footer-contacts {
display: flex;
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
.footer-contacts h4 {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 5px;
color: #fff;
}
.footer-socials-row {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 5px;
}
.footer-contacts .footer-socials-row {
display: flex;
flex-direction: row;
gap: 15px;
align-items: center;
margin-top: 5px;
}
.footer-social-icon-link {
color: #aaa;
transition: var(--transition-smooth);
display: flex;
align-items: center;
justify-content: center;
}
.footer-social-icon-link:hover {
color: var(--color-accent);
transform: translateY(-2px);
}
.footer-phone-text {
color: #aaa;
font-size: 0.9rem;
margin-top: 5px;
}
.footer-hours-text {
color: #666;
font-size: 0.8rem;
font-weight: 400;
}
.footer-newsletter {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-newsletter h4 {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 5px;
color: #fff;
}
.footer-newsletter p {
color: #aaa;
font-size: 0.9rem;
line-height: 1.4;
}
.footer-newsletter-form {
display: flex;
width: 100%;
max-width: 320px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 6px;
margin-top: 5px;
transition: border-color 0.3s ease;
}
.footer-newsletter-form:focus-within {
border-color: #fff;
}
.footer-newsletter-input {
flex-grow: 1;
border: none;
background: transparent;
color: #fff;
font-family: var(--font-body);
font-size: 0.85rem;
outline: none;
padding: 5px 0;
}
.footer-newsletter-input::placeholder {
color: #666;
}
.footer-newsletter-submit-btn {
background: none;
border: none;
color: #aaa;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-smooth);
padding: 0 5px;
}
.footer-newsletter-submit-btn:hover {
color: #fff;
transform: translateX(3px);
}
.footer-bottom {
max-width: var(--max-width);
margin: 0 auto;
padding: 30px 40px;
border-top: 1px solid var(--color-border);
text-align: center;
color: #666;
font-size: 0.8rem;
}
@media (max-width: 768px) {
.footer-bottom {
padding: 20px;
}
}
/* ==========================================================================
SALE PRICES & BADGES
========================================================================== */
.price-old {
text-decoration: line-through;
color: var(--color-text-muted);
font-weight: 400;
margin-right: 10px;
}
.price-current-sale {
color: var(--color-sale-price) !important;
font-weight: 700;
}
.badge-sale {
position: absolute;
top: 15px;
left: 15px;
background-color: #D32F2F;
color: var(--color-bg-secondary);
font-size: 0.7rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 20px;
letter-spacing: 0.05em;
z-index: 4;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
/* ==========================================================================
WISHLIST SYSTEM
========================================================================== */
/* Wishlist Badge in Header */
.wishlist-badge {
position: absolute;
top: -3px;
right: -3px;
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
font-size: 0.65rem;
font-weight: 700;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--color-bg-secondary);
transition: var(--transition-smooth);
}
.action-circle-btn:hover .wishlist-badge {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
border-color: var(--color-text-primary);
}
/* Wishlist Drawer */
.wishlist-drawer {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1090;
/* higher than header to prevent layout bugs */
visibility: hidden;
transition: visibility 0.4s;
}
.wishlist-drawer.open {
visibility: visible;
}
.wishlist-drawer-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
}
.wishlist-drawer.open .wishlist-drawer-overlay {
opacity: 1;
}
.wishlist-drawer-content {
position: absolute;
top: 0;
right: 0;
width: 450px;
max-width: 100%;
height: 100%;
background-color: var(--color-bg-secondary);
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex;
flex-direction: column;
z-index: 1092;
}
.wishlist-drawer.open .wishlist-drawer-content {
transform: translateX(0);
}
.wishlist-drawer-header {
padding: 24px 30px;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.wishlist-drawer-header h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 600;
}
.close-wishlist-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
transition: var(--transition-smooth);
}
.close-wishlist-btn:hover {
transform: rotate(90deg);
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-color: var(--color-text-primary);
}
.wishlist-drawer-items {
flex-grow: 1;
overflow-y: auto;
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Wishlist Toggle Button on Card */
.wishlist-toggle-btn {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--color-bg-secondary);
color: var(--color-text-muted);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
z-index: 6;
opacity: 0;
transform: translateY(-5px);
transition: var(--transition-smooth);
}
.product-image-container:hover .wishlist-toggle-btn {
opacity: 1;
transform: translateY(0);
}
.wishlist-toggle-btn:not(.active):hover {
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
transform: scale(1.05);
}
.wishlist-toggle-btn.active {
opacity: 1;
transform: translateY(0);
background-color: var(--color-bg-secondary);
color: #D32F2F;
}
.wishlist-toggle-btn.active:hover {
background-color: var(--color-bg-secondary);
color: #D32F2F;
transform: scale(1.05);
}
@media (max-width: 1024px) {
.wishlist-toggle-btn {
opacity: 1;
transform: translateY(0);
top: 10px;
right: 10px;
width: 36px;
height: 36px;
}
}
/* Wishlist Item Card */
.wishlist-item {
display: flex;
gap: 15px;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding-bottom: 20px;
}
.wishlist-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.wishlist-item-image {
width: 90px;
height: 115px;
object-fit: cover;
background-color: var(--color-bg-secondary);
border-radius: 6px;
cursor: pointer;
transition: opacity 0.3s ease;
transform: translateZ(0);
backface-visibility: hidden;
}
.wishlist-item-image:hover {
opacity: 0.85;
}
.wishlist-item-details {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.wishlist-item-title {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 500;
}
.wishlist-item-price {
font-size: 0.9rem;
font-weight: 600;
}
.wishlist-item-actions {
display: flex;
gap: 10px;
margin-top: 5px;
}
.wishlist-add-to-cart-btn {
padding: 8px 12px;
font-size: 0.725rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-radius: 4px;
transition: var(--transition-smooth);
}
.wishlist-add-to-cart-btn:hover {
background-color: transparent;
color: var(--color-text-primary);
box-shadow: inset 0 0 0 1px var(--color-text-primary);
}
.wishlist-item-remove {
color: var(--color-text-muted);
transition: var(--transition-smooth);
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.wishlist-item-remove:hover {
color: #D32F2F;
}
/* ==========================================================================
CATALOG CONTROLS (Sorting & Filtering)
========================================================================== */
.catalog-controls {
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: 40px;
margin-bottom: 50px;
padding: 25px 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
align-items: center;
}
@media (max-width: 992px) {
.catalog-controls {
grid-template-columns: 1fr;
gap: 20px;
padding: 20px 10px;
}
}
.control-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.control-group label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
}
.control-select {
padding: 12px 16px;
font-size: 0.875rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
outline: none;
cursor: pointer;
transition: var(--transition-smooth);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 10px;
}
.control-select:focus {
border-color: var(--color-text-primary);
}
/* Custom Styled Range Slider */
.control-slider {
-webkit-appearance: none;
width: 100%;
height: 4px;
border-radius: 2px;
background: var(--color-border);
outline: none;
margin: 10px 0;
}
.control-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-text-primary);
cursor: pointer;
transition: transform 0.2s ease;
}
.control-slider::-webkit-slider-thumb:hover {
transform: scale(1.25);
}
.control-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: var(--color-text-primary);
cursor: pointer;
transition: transform 0.2s ease;
}
.control-slider::-moz-range-thumb:hover {
transform: scale(1.25);
}
/* ==========================================================================
HEADER NAVIGATION (LEFT SIDE LINKS)
========================================================================== */
.header-nav-left {
display: flex;
gap: 30px;
align-items: center;
z-index: 1082;
}
@media (max-width: 1024px) {
.header-nav-left {
display: none;
}
}
.nav-category-link {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-primary);
background: none;
border: none;
cursor: pointer;
position: relative;
padding: 6px 0;
transition: var(--transition-smooth);
}
.nav-category-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.nav-category-link:hover {
color: var(--color-accent);
}
.nav-category-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Brands Dropdown Menu */
.nav-brands-wrapper {
position: relative;
display: inline-block;
}
.brands-dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border-radius: 8px;
padding: 15px 0;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 5px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
z-index: 1083;
}
.nav-brands-wrapper:hover .brands-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.brands-dropdown-item {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--color-text-primary);
background: none;
border: none;
padding: 10px 20px;
text-align: left;
cursor: pointer;
transition: var(--transition-smooth);
width: 100%;
}
.brands-dropdown-item:hover {
background-color: var(--color-border);
color: var(--color-accent);
padding-left: 25px;
}
/* Brands Page View */
.brands-page-view {
padding: 120px 0 80px 0;
min-height: calc(100vh - 350px);
background-color: var(--color-bg-secondary);
}
.brands-large-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 40px;
}
@media (max-width: 768px) {
.brands-large-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
.brand-large-card {
background-color: var(--color-bg-primary);
border: 1px solid var(--color-border);
padding: 65px 40px;
text-align: center;
border-radius: 12px;
cursor: pointer;
transition: var(--transition-smooth);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}
.brand-large-card h3 {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-primary);
transition: var(--transition-smooth);
}
.brand-large-card span {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
border-bottom: 1px solid transparent;
transition: var(--transition-smooth);
padding-bottom: 2px;
}
.brand-large-card:hover {
transform: translateY(-5px);
border-color: var(--color-text-primary);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}
.brand-large-card:hover h3 {
color: var(--color-accent);
}
.brand-large-card:hover span {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* Catalog & Home Preview Pages */
.catalog-page-view {
padding: 140px 0 80px 0;
min-height: calc(100vh - 350px);
background-color: var(--color-bg-secondary);
}
.home-preview-section {
padding: 80px 0;
background-color: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
}
/* Multi-select Size Filter Styles with Custom Dropdown Popover */
.custom-dropdown {
position: relative;
width: 220px;
}
.dropdown-trigger-btn {
width: 100%;
padding: 10px 16px;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-primary);
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: var(--transition-smooth);
}
.dropdown-trigger-btn:hover {
border-color: var(--color-text-primary);
}
.dropdown-arrow-icon {
transition: transform 0.3s ease;
}
.custom-dropdown.open .dropdown-arrow-icon {
transform: rotate(180deg);
}
.dropdown-popover {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 250px;
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-dropdown.open .dropdown-popover {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.size-filter-options {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.size-filter-btn {
padding: 6px 12px;
font-size: 0.78rem;
font-weight: 500;
border: 1px solid var(--color-border);
background-color: transparent;
color: var(--color-text-primary);
cursor: pointer;
border-radius: 4px;
transition: var(--transition-smooth);
min-width: 34px;
text-align: center;
}
.size-filter-btn:hover {
border-color: var(--color-text-primary);
}
.size-filter-btn.active {
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-color: var(--color-text-primary);
}
.brand-filter-options {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.brand-filter-btn {
padding: 6px 14px;
font-size: 0.78rem;
font-weight: 500;
border: 1px solid var(--color-border);
background-color: transparent;
color: var(--color-text-primary);
cursor: pointer;
border-radius: 4px;
transition: var(--transition-smooth);
text-align: center;
}
.brand-filter-btn:hover {
border-color: var(--color-text-primary);
}
.brand-filter-btn.active {
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-color: var(--color-text-primary);
}
.size-subheading {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
margin: 10px 0 6px 0;
width: 100%;
}
/* Фильтр по состоянию товара */
.condition-filter-options {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.condition-filter-btn {
padding: 6px 14px;
font-size: 0.78rem;
font-weight: 500;
border: 1px solid var(--color-border);
background-color: transparent;
color: var(--color-text-primary);
cursor: pointer;
border-radius: 4px;
transition: var(--transition-smooth);
text-align: center;
}
.condition-filter-btn:hover {
border-color: var(--color-text-primary);
}
.condition-filter-btn.active {
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-color: var(--color-text-primary);
}
/* Бейджи состояния товара на карточке */
.badge-condition {
position: absolute;
bottom: 15px;
left: 15px;
font-size: 0.7rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 20px;
letter-spacing: 0.05em;
z-index: 4;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.badge-condition.new {
background-color: #ffffff;
color: #000000;
}
.badge-condition.used {
background-color: #333333;
color: #ffffff;
}
/* Minimialist Shop Catalog Header (Drop Dead style) */
.catalog-page-view {
padding: 140px 0 80px 0;
min-height: 100vh;
background-color: var(--color-bg-secondary);
}
.catalog-page-view .section-container {
padding: 0 40px;
max-width: 100%;
}
.catalog-header {
margin-bottom: 40px;
}
.catalog-page-title {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-primary);
margin-bottom: 20px;
text-align: left;
}
.catalog-header-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.filter-modal-trigger-btn {
background: none;
border: none;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: var(--color-text-primary);
transition: var(--transition-smooth);
padding: 0;
}
.filter-modal-trigger-btn:hover {
color: var(--color-accent);
}
.catalog-items-count {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
}
/* Premium Filter Sliding Drawer Modal */
.filter-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2500;
visibility: hidden;
opacity: 0;
transition: visibility 0.4s, opacity 0.4s ease;
display: flex;
align-items: center;
justify-content: flex-end;
}
.filter-modal.open {
visibility: visible;
opacity: 1;
}
.filter-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.filter-modal-content {
position: relative;
background-color: var(--color-bg-secondary);
width: 100%;
max-width: 440px;
height: 100%;
padding: 60px 40px;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.05);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
z-index: 2002;
}
.filter-modal.open .filter-modal-content {
transform: translateX(0);
}
.filter-modal-close-btn {
position: absolute;
top: 30px;
right: 40px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
background: transparent;
cursor: pointer;
outline: none;
transition: var(--transition-smooth);
}
.filter-modal-close-btn:hover {
transform: rotate(90deg);
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
}
.filter-modal-title {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 300;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 40px;
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border);
padding-bottom: 15px;
}
.filter-modal-body {
flex-grow: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 35px;
padding-right: 5px;
}
.filter-group h3 {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 15px;
color: var(--color-text-primary);
}
.filter-modal-select {
width: 100%;
padding: 12px 35px 12px 16px;
font-family: var(--font-body);
font-size: 0.85rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
outline: none;
cursor: pointer;
transition: var(--transition-smooth);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 10px !important;
}
.filter-modal-select:hover {
border-color: var(--color-text-primary);
}
.filter-modal-select:focus {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Price range inputs styling */
.price-range-inputs {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.price-input-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.price-input-col label {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-primary);
}
.price-input-wrapper {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
font-weight: 600;
}
.filter-modal-number-input {
width: 90px;
padding: 6px 10px;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
outline: none;
text-align: right;
transition: var(--transition-smooth);
}
.filter-modal-number-input:focus {
border-color: var(--color-text-primary);
}
/* Hide standard HTML5 number arrows */
.filter-modal-number-input::-webkit-outer-spin-button,
.filter-modal-number-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.filter-modal-number-input {
-moz-appearance: textfield;
}
.filter-modal-slider {
width: 100%;
-webkit-appearance: none;
height: 4px;
background: var(--color-border);
outline: none;
border-radius: 2px;
margin-top: 10px;
}
.filter-modal-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--color-text-primary);
cursor: pointer;
transition: transform 0.2s ease;
}
.filter-modal-slider::-webkit-slider-thumb:hover {
transform: scale(1.25);
}
.filter-modal-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.filter-modal-actions .btn {
padding: 14px 20px;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (max-width: 768px) {
.catalog-page-view .section-container {
padding: 0 20px;
}
}
/* ==========================================================================
CHECKOUT MODAL
========================================================================== */
.checkout-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2050;
visibility: hidden;
opacity: 0;
transition: visibility 0.4s, opacity 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.checkout-modal.open {
visibility: visible;
opacity: 1;
}
.checkout-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.checkout-modal-content {
position: relative;
background-color: var(--color-bg-secondary);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
padding: 40px;
border-radius: 8px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
transform: translateY(20px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 2052;
}
.checkout-modal.open .checkout-modal-content {
transform: translateY(0);
}
.checkout-modal-close-btn {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
cursor: pointer;
color: var(--color-text-primary);
transition: var(--transition-smooth);
}
.checkout-modal-close-btn:hover {
transform: rotate(90deg);
color: var(--color-accent);
}
.checkout-modal-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 25px;
text-align: center;
}
.checkout-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.form-group label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
.form-group input,
.checkout-select {
padding: 12px;
font-family: var(--font-body);
font-size: 0.875rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
outline: none;
transition: var(--transition-smooth);
}
.form-group input:focus,
.checkout-select:focus {
border-color: var(--color-text-primary);
}
.checkout-order-summary {
background-color: var(--color-bg-primary);
padding: 15px;
border-radius: 4px;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.summary-line {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.summary-line.total {
font-size: 1rem;
font-weight: 700;
color: var(--color-text-primary);
border-top: 1px solid var(--color-border);
padding-top: 8px;
margin-top: 5px;
}
.submit-checkout-btn {
margin-top: 15px;
}
.checkout-success-view {
text-align: center;
padding: 30px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.success-icon {
color: #ffffff;
}
.checkout-success-view h3 {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 600;
}
.checkout-success-view p {
font-size: 0.9rem;
color: var(--color-text-muted);
margin-bottom: 10px;
}
/* ==========================================================================
SCROLL REVEAL ANIMATIONS
========================================================================== */
.reveal-element {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform, opacity;
}
.reveal-element.revealed {
opacity: 1;
transform: translateY(0);
}
/* Stagger transition delay for children */
.reveal-delay-1 {
transition-delay: 0.15s;
}
.reveal-delay-2 {
transition-delay: 0.3s;
}
.reveal-delay-3 {
transition-delay: 0.45s;
}
.reveal-delay-4 {
transition-delay: 0.6s;
}
/* Mobile menu hamburger toggle */
.mobile-menu-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: none;
color: var(--color-text-primary);
cursor: pointer;
z-index: 1083;
}
.main-header.header-top .mobile-menu-toggle-btn {
color: #fff !important;
}
/* Mobile Menu Drawer */
.mobile-menu-drawer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
visibility: hidden;
transition: visibility 0.4s;
}
.mobile-menu-drawer.open {
visibility: visible;
}
.mobile-menu-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.4s ease;
}
.mobile-menu-drawer.open .mobile-menu-overlay {
opacity: 1;
}
.mobile-menu-content {
position: absolute;
top: 0;
left: -320px;
width: 300px;
height: 100%;
background-color: var(--color-bg-secondary);
box-shadow: var(--shadow-deep);
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
padding: 30px 24px;
}
.mobile-menu-drawer.open .mobile-menu-content {
transform: translateX(320px);
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.mobile-menu-title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-primary);
}
.mobile-menu-close-btn {
background: none;
border: none;
color: var(--color-text-primary);
cursor: pointer;
}
.mobile-menu-body {
display: flex;
flex-direction: column;
gap: 20px;
}
.mobile-nav-link {
background: none;
border: none;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
padding: 5px 0;
transition: var(--transition-smooth);
}
.mobile-nav-link:hover {
color: var(--color-accent);
}
.mobile-menu-divider {
border: none;
border-top: 1px solid var(--color-border);
margin: 10px 0;
}
.mobile-menu-subtitle {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
}
.mobile-nav-brand-link {
background: none;
border: none;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
padding: 5px 0;
transition: var(--transition-smooth);
}
.mobile-nav-brand-link:hover {
color: var(--color-accent);
}
/* ==========================================================================
ADMIN PANEL STYLES
========================================================================== */
.admin-page-view {
padding: 140px 0 80px 0;
min-height: 100vh;
background-color: var(--color-bg-secondary);
}
.admin-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 20px;
}
.admin-title {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.admin-header-actions {
display: flex;
gap: 15px;
}
.admin-products-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.admin-prod-row {
display: flex;
align-items: center;
background-color: var(--color-bg-primary);
border: 1px solid var(--color-border);
padding: 15px 25px;
border-radius: 6px;
gap: 20px;
}
.admin-prod-img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
}
.admin-prod-details {
flex-grow: 1;
}
.admin-prod-meta {
font-weight: 700;
font-size: 0.95rem;
color: var(--color-text-primary);
}
.admin-prod-submeta {
font-size: 0.78rem;
color: var(--color-text-muted);
margin-top: 4px;
}
.admin-prod-price {
font-weight: 700;
font-size: 1rem;
color: var(--color-text-primary);
min-width: 100px;
text-align: right;
}
.admin-prod-actions {
display: flex;
gap: 10px;
}
.btn-admin-edit {
background-color: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-primary);
padding: 8px 16px;
font-size: 0.78rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-admin-edit:hover {
border-color: var(--color-text-primary);
}
.btn-admin-delete {
background-color: #ffeef0;
border: 1px solid #ffccd3;
color: #ff334b;
padding: 8px 16px;
font-size: 0.78rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-admin-delete:hover {
background-color: #ff334b;
color: #fff;
border-color: #ff334b;
}
/* Admin Edit Modal styles */
.admin-edit-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2100;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
transition: visibility 0.3s;
}
.admin-edit-modal.open {
visibility: visible;
}
.admin-edit-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.3s ease;
}
.admin-edit-modal.open .admin-edit-modal-overlay {
opacity: 1;
}
.admin-edit-modal-content {
position: relative;
width: 500px;
max-width: 90%;
max-height: 90vh;
background-color: var(--color-bg-primary);
box-shadow: var(--shadow-deep);
border-radius: 8px;
padding: 40px 30px;
display: flex;
flex-direction: column;
transform: scale(0.9);
opacity: 0;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
z-index: 2;
overflow-y: auto;
}
.admin-edit-modal.open .admin-edit-modal-content {
transform: scale(1);
opacity: 1;
}
.admin-edit-modal-close-btn {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: var(--color-text-primary);
cursor: pointer;
transition: var(--transition-smooth);
}
.admin-edit-modal-close-btn:hover {
transform: rotate(90deg);
}
.admin-edit-modal-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 25px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 15px;
}
.admin-product-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.size-checkbox-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
cursor: pointer;
font-weight: 600;
}
/* ==========================================================================
ADMIN PANEL LAYOUTS (Extracted from inline styles)
========================================================================== */
.form-group-row {
display: flex;
gap: 15px;
}
.form-group-half {
flex: 1;
min-width: 0;
width: 50%;
}
.form-group-third {
flex: 1;
}
/* Базовые стили для полей ввода админки */
.checkout-input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: 0.875rem;
outline: none;
transition: var(--transition-smooth);
box-sizing: border-box;
text-overflow: ellipsis;
}
.checkout-input:focus {
border-color: var(--color-text-primary);
}
.admin-product-form select.checkout-input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 20px;
padding-right: 35px;
}
.admin-sizes-checkboxes {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 5px;
padding: 10px 0;
}
.admin-product-form textarea {
width: 100%;
height: 100px;
padding: 15px;
font-family: var(--font-body);
font-size: 0.875rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
outline: none;
resize: vertical;
transition: var(--transition-smooth);
box-sizing: border-box;
}
.admin-product-form textarea:focus {
border-color: var(--color-text-primary);
}
.admin-showcase-section {
margin-top: 15px;
padding: 12px;
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 4px;
}
.admin-showcase-title {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
margin-bottom: 10px;
display: block;
}
.admin-checkbox-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.admin-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--color-text-primary);
cursor: pointer;
}
.admin-checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.showcase-counter {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-left: 4px;
}
.showcase-counter.limit-reached {
color: var(--color-accent, #ff9500);
font-weight: 600;
}
/* Отключение иконок автозаполнения менеджеров паролей в инпутах админки */
#admin-product-form input::-webkit-contacts-auto-fill-button,
#admin-product-form input::-webkit-credentials-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
}
/* Подавление оверлеев сторонних расширений */
#admin-product-form input[data-hidden-password-icon="true"] {
background-image: none !important;
}
/* Отключение стрелок инкремента/декремента (spin buttons) для инпутов с типом number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield; /* Firefox */
appearance: textfield; /* Стандарт */
}
/* Кастомный выпадающий список брендов */
.custom-dropdown-wrapper {
position: relative;
}
.input-with-arrow {
position: relative;
width: 100%;
}
.custom-dropdown-arrow {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--color-text-muted);
font-size: 0.65rem;
transition: transform var(--transition-smooth);
}
.custom-dropdown-input:focus + .custom-dropdown-arrow {
transform: translateY(-50%) rotate(180deg);
}
.custom-dropdown-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 4px;
margin: 4px 0 0 0;
padding: 0;
list-style: none;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
display: none;
}
.custom-dropdown-input:focus {
border-color: var(--color-text-primary);
}
.custom-dropdown-item {
padding: 10px 15px;
cursor: pointer;
color: var(--color-text-primary);
font-size: 0.875rem;
text-align: left;
transition: background-color 0.2s ease, color 0.2s ease;
}
.custom-dropdown-item:hover,
.custom-dropdown-item.active {
background-color: var(--color-accent);
color: #fff;
}
.btn-submit-admin {
width: 100%;
margin-top: 15px;
}
.admin-image-dropzone {
width: 100%;
min-height: 100px;
border: 2px dashed var(--color-border);
border-radius: 6px;
background-color: var(--color-bg-secondary);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
cursor: pointer;
text-align: center;
transition: var(--transition-smooth);
}
.admin-image-dropzone.dragover,
.admin-image-dropzone:hover {
border-color: var(--color-text-primary);
background-color: rgba(255, 255, 255, 0.05);
}
.admin-image-dropzone .dropzone-text {
font-size: 0.875rem;
color: var(--color-text-muted);
font-weight: 500;
}
.admin-image-previews-grid,
.admin-images-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 15px;
}
.admin-image-preview-item {
position: relative;
aspect-ratio: 1 / 1;
border: 1px solid var(--color-border);
border-radius: 4px;
overflow: hidden;
background-color: var(--color-bg-secondary);
cursor: grab;
user-select: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.admin-image-preview-item.dragging {
opacity: 0.4;
transform: scale(0.95);
cursor: grabbing;
}
.admin-image-preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
/* Browser scaling optimizations for crisp quality */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
/* GPU hardware acceleration to avoid rounding errors and blurry edges */
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.admin-image-preview-item .main-badge {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--color-text-primary);
color: var(--color-bg-primary);
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
padding: 3px 0;
letter-spacing: 0.05em;
pointer-events: none;
}
.admin-image-preview-item .delete-btn {
position: absolute;
top: 5px;
right: 5px;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #ff334b;
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: bold;
padding: 0;
line-height: 1;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
z-index: 5;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.admin-image-preview-item:hover .delete-btn {
opacity: 1;
pointer-events: auto;
}
.admin-image-preview-item .delete-btn:hover {
background-color: #e02438;
transform: scale(1.1);
}
@media (max-width: 768px) {
.admin-image-previews-grid,
.admin-images-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ==========================================================================
RESPONSIVE DESIGN MEDIA QUERIES & OVERRIDES
========================================================================== */
/* Tablet & Mobile Adjustments (max-width: 992px) */
@media (max-width: 992px) {
.brands-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
}
/* Mobile Header & General Responsiveness (max-width: 768px) */
@media (max-width: 768px) {
.logo {
position: static;
transform: none;
font-size: 1.35rem;
letter-spacing: 0.1em;
}
.logo:hover {
transform: scale(1.05);
}
.header-container {
padding: 15px 20px;
}
.hero-section {
height: 60vh;
min-height: 400px;
}
.hero-title {
font-size: 2rem;
}
/* Center footer content for better balance on mobile */
.footer-container {
grid-template-columns: 1fr;
padding: 50px 20px 30px;
gap: 30px;
}
.footer-brand,
.footer-contacts,
.footer-newsletter {
align-items: center;
text-align: center;
}
.footer-brand p {
max-width: 100%;
}
.footer-newsletter-form {
margin: 5px auto 0;
}
.footer-socials-row {
justify-content: center;
}
}
/* Specific Mobile Grid Adjustments (max-width: 576px) */
@media (max-width: 576px) {
.header-actions {
gap: 8px;
}
.action-circle-btn {
width: 34px;
height: 34px;
}
.action-circle-btn svg {
width: 18px;
height: 18px;
}
.cart-badge,
.wishlist-badge {
width: 14px;
height: 14px;
font-size: 0.55rem;
top: 0px;
right: 0px;
}
/* Stacking form fields on mobile */
.form-group-row {
flex-direction: column;
gap: 15px;
}
/* Related items grid layout */
.related-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px;
}
/* Product details modal adjustments */
.product-modal-body {
padding: 80px 15px 30px !important;
gap: 30px !important;
}
.modal-title {
font-size: 1.5rem;
}
.modal-price {
font-size: 1.2rem;
}
}
/* Extra Small Devices (max-width: 480px) */
@media (max-width: 480px) {
.hero-section {
height: 50vh;
min-height: 300px;
}
.hero-title {
font-size: 1.65rem;
letter-spacing: 0.1em;
}
.hero-subtitle {
font-size: 0.85rem;
margin-bottom: 25px;
}
.hero-content .btn {
padding: 12px 24px;
font-size: 0.8rem;
}
/* Ensure side drawer elements fit small screens */
.cart-drawer-header,
.wishlist-drawer-header {
padding: 16px 20px;
}
.cart-drawer-items,
.wishlist-drawer-items {
padding: 20px 15px;
gap: 15px;
}
.cart-drawer-footer {
padding: 20px 15px;
}
/* Apple HIG Touch-Targets: min 44x44px for easy tapping */
.close-cart-btn,
.close-wishlist-btn,
.close-modal-btn,
.close-contacts-btn,
.close-catalog-btn,
.close-search-btn,
.filter-modal-close-btn {
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
touch-action: manipulation;
}
.size-btn {
min-width: 44px !important;
min-height: 44px !important;
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
touch-action: manipulation;
}
/* Checkout panel optimization */
.checkout-modal-content {
padding: 24px 20px;
width: 95%;
}
.checkout-modal-title {
font-size: 1.25rem;
margin-bottom: 20px;
}
/* Admin modal optimization */
.admin-edit-modal-content {
padding: 24px 20px;
width: 95%;
}
.admin-edit-modal-title {
font-size: 1.25rem;
margin-bottom: 20px;
}
/* Filter modal sizing */
.filter-modal-content {
max-width: 100%;
padding: 40px 20px;
}
.filter-modal-close-btn {
right: 20px !important;
top: 20px !important;
}
.filter-modal-title {
font-size: 1.35rem;
margin-bottom: 25px;
}
/* Make size selector scrollable or wrap cleanly */
.size-options {
flex-wrap: wrap;
gap: 8px;
}
/* Make thumbnail list scrollable horizontally if too wide */
.thumbnail-list {
overflow-x: auto;
padding-bottom: 5px;
white-space: nowrap;
}
}
/* ==========================================================================
INTEGRATION SETTINGS PANEL (ADMIN PORTAL)
========================================================================== */
.admin-tabs {
display: flex;
gap: 20px;
margin-bottom: 30px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 10px;
flex-wrap: wrap;
}
.admin-tab-btn {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
padding: 10px 15px;
position: relative;
transition: var(--transition-smooth);
}
.admin-tab-btn:hover {
color: var(--color-text-primary);
}
.admin-tab-btn.active {
color: var(--color-text-primary);
}
.admin-tab-btn::after {
content: '';
position: absolute;
bottom: -11px;
left: 0;
width: 100%;
height: 2px;
background-color: var(--color-text-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.admin-tab-btn.active::after {
transform: scaleX(1);
}
.integrations-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 40px;
}
@media (max-width: 992px) {
.integrations-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
.integration-card {
background-color: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
display: flex;
flex-direction: column;
gap: 25px;
}
@media (max-width: 576px) {
.integration-card {
padding: 20px 15px;
}
}
.integration-card-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding-bottom: 15px;
gap: 15px;
}
.integration-title-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.integration-title-wrapper h3 {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.integration-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.telegram-color {
color: #0088cc;
}
.email-color {
color: #ea4335;
}
.integration-card-body {
display: flex;
flex-direction: column;
gap: 15px;
}
.btn-test {
align-self: flex-start;
padding: 10px 20px;
font-size: 0.725rem;
margin-top: 5px;
}
.btn-save-settings {
padding: 15px 30px;
font-size: 0.78rem;
align-self: flex-start;
}
@media (max-width: 576px) {
.btn-save-settings,
.btn-test {
width: 100%;
text-align: center;
align-self: stretch;
}
}
/* Custom switch toggle styling */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e0e0e0;
transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 24px;
}
.switch-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
input:checked+.switch-slider {
background-color: var(--color-text-primary);
}
input:checked+.switch-slider:before {
transform: translateX(20px);
}
/* ==========================================================================
CUSTOMER AUTHENTICATION MODAL (Centered Popup)
========================================================================== */
.auth-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2100;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
transition: visibility 0.4s ease;
}
.auth-modal.open {
visibility: visible;
}
.auth-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.4s ease;
}
.auth-modal.open .auth-modal-overlay {
opacity: 1;
}
.auth-modal-content {
position: relative;
background-color: var(--color-bg-secondary);
width: 90%;
max-width: 440px;
padding: 40px;
border-radius: 12px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
transform: translateY(30px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
z-index: 2;
box-sizing: border-box;
text-align: center;
}
.auth-modal.open .auth-modal-content {
transform: translateY(0);
opacity: 1;
}
.auth-minimal-input {
width: 100%;
padding: 14px;
border: 1px solid var(--color-border);
border-radius: 6px;
font-family: var(--font-body);
font-size: 0.9rem;
box-sizing: border-box;
background: var(--color-bg-primary);
outline: none;
transition: border-color 0.3s ease;
}
.auth-minimal-input:focus {
border-color: var(--color-text-primary);
}
.auth-minimal-btn {
width: 100%;
background-color: var(--color-text-primary) !important;
color: var(--color-bg-secondary) !important;
border: 1px solid var(--color-text-primary) !important;
padding: 14px !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
border-radius: 4px !important;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: var(--transition-smooth) !important;
}
.auth-minimal-btn:hover {
background-color: transparent !important;
color: var(--color-text-primary) !important;
}
.auth-switch-link {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--color-text-primary);
text-decoration: underline;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: opacity 0.2s ease;
}
.auth-switch-link:hover {
opacity: 0.7;
}
/* Left Column - Branding */
.auth-split-left {
flex: 1;
background-color: var(--color-bg-secondary);
/* Dark graphite */
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
border-right: 1px solid var(--color-border);
position: relative;
box-sizing: border-box;
}
.auth-welcome-text {
font-size: 1.1rem;
color: var(--color-text-muted);
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.auth-brand-center {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: 40px 0;
}
.auth-brand-k {
font-family: var(--font-display, inherit);
font-size: 5rem;
font-weight: 800;
color: var(--color-text-primary);
/* Contrast off-white */
line-height: 1;
}
.auth-brand-smiley {
color: #10b981;
/* Green active smile */
display: flex;
align-items: center;
justify-content: center;
}
.auth-toggle-link-container {
width: 100%;
}
/* Right Column - Forms */
.auth-split-right {
flex: 1.1;
padding: 50px 45px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
box-sizing: border-box;
background: var(--color-bg-secondary);
/* Dark graphite */
}
.auth-title {
font-family: var(--font-display, inherit);
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.05em;
margin-top: 0;
margin-bottom: 30px;
text-transform: uppercase;
color: var(--color-text-primary);
/* Contrast off-white */
}
.auth-field-label {
display: block;
font-size: 0.7rem;
color: var(--color-text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 700;
}
.auth-minimal-input {
width: 100%;
background: transparent !important;
border: 1px solid var(--color-border) !important;
color: var(--color-text-primary) !important;
/* Contrast input text */
padding: 14px 18px !important;
font-size: 0.9rem !important;
border-radius: 4px !important;
outline: none !important;
transition: all 0.3s ease !important;
box-sizing: border-box !important;
}
.auth-minimal-input::placeholder {
color: var(--color-text-muted) !important;
opacity: 0.6;
}
.auth-minimal-input:focus {
border-color: var(--color-accent) !important;
background: rgba(255, 255, 255, 0.02) !important;
}
.auth-forgot-password-container {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 4px;
margin-bottom: 25px;
}
.auth-switch-link-normal {
background: transparent;
border: none;
color: var(--color-text-muted);
font-size: 0.75rem;
letter-spacing: 0.05em;
cursor: pointer;
text-decoration: underline;
transition: color 0.3s ease;
}
.auth-switch-link-normal:hover {
color: var(--color-accent);
}
.auth-switch-link {
background: transparent;
border: none;
color: var(--color-text-muted);
font-size: 0.75rem;
letter-spacing: 0.05em;
cursor: pointer;
text-decoration: underline;
transition: color 0.3s ease;
text-transform: uppercase;
text-align: left;
padding: 0;
}
.auth-switch-link:hover {
color: var(--color-accent);
}
.auth-minimal-btn {
width: 100%;
background-color: var(--color-text-primary) !important;
/* White button */
color: var(--color-bg-primary) !important;
/* Dark text */
border: 1px solid var(--color-text-primary) !important;
padding: 16px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
cursor: pointer !important;
transition: var(--transition-smooth) !important;
border-radius: 4px !important;
text-transform: uppercase;
}
.auth-minimal-btn:hover {
background-color: transparent !important;
color: var(--color-text-primary) !important;
}
.auth-minimal-btn-secondary {
width: 100%;
background-color: transparent !important;
color: var(--color-error) !important;
border: 1px solid var(--color-error) !important;
padding: 16px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
border-radius: 4px !important;
text-transform: uppercase;
text-align: center;
}
.auth-minimal-btn-secondary:hover {
background-color: var(--color-error) !important;
color: #ffffff !important;
}
.auth-profile-email {
color: #767676;
font-size: 0.95rem;
margin-top: -20px;
margin-bottom: 40px;
text-align: center;
letter-spacing: 0.05em;
}
.auth-brand-w {
font-family: Georgia, serif;
font-size: 5.5rem;
font-weight: 800;
color: #0b0b0f;
line-height: 1;
}
.auth-options-row {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 25px;
gap: 8px;
}
.auth-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: #767676;
cursor: pointer;
}
.auth-social-divider {
text-align: center;
margin: 30px 0 20px 0;
position: relative;
}
.auth-social-divider span {
background: var(--color-bg-secondary);
padding: 0 15px;
font-size: 0.85rem;
color: var(--color-text-muted);
position: relative;
z-index: 1;
}
.auth-social-divider::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 1px solid var(--color-border);
z-index: 0;
}
.cabinet-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
margin-top: 20px;
}
@media (max-width: 992px) {
.cabinet-grid {
grid-template-columns: 1fr;
gap: 30px;
}
}
.profile-header-card {
transition: var(--transition-smooth);
}
/* Cabinet Order Card styling */
.cabinet-order-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 24px;
margin-bottom: 20px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cabinet-order-card:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.order-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 12px;
}
.order-number {
font-weight: 700;
font-family: var(--font-heading);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-primary);
}
.order-date {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.order-items-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.order-item-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.88rem;
}
.order-item-name {
color: var(--color-text-primary);
font-weight: 500;
}
.order-item-qty-price {
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.order-footer-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
border-top: 1px dashed var(--color-border);
padding-top: 12px;
}
.order-total-label {
color: var(--color-text-muted);
font-weight: 500;
}
.order-total-price {
font-weight: 700;
color: var(--color-text-primary);
font-size: 1.05rem;
}
/* Animations for close buttons & hover states */
#customer-auth-modal .close-modal-btn {
transition: var(--transition-smooth);
border-radius: 50%;
border: 1px solid var(--color-border);
background-color: transparent;
color: var(--color-text-primary);
}
#customer-auth-modal .close-modal-btn:hover {
transform: rotate(90deg);
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
}
#customer-logout-btn:hover {
background-color: var(--color-text-primary) !important;
color: var(--color-bg-secondary) !important;
}
#profile-avatar-initials {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
@keyframes errorShake {
0%,
100% {
transform: translateX(0);
}
20%,
60% {
transform: translateX(-6px);
}
40%,
80% {
transform: translateX(6px);
}
}
.error-shake {
animation: errorShake 0.4s ease;
}
#product-modal .close-modal-btn {
display: none !important;
/* Hide close button as requested, user can navigate back by clicking logo */
}
/* Fix z-index overlays to prevent header from blocking interactive drawers and search modal */
.cart-drawer,
.wishlist-drawer,
.catalog-drawer,
.search-modal,
.mobile-menu-drawer,
.checkout-modal,
.auth-modal,
#admin-login-modal,
#admin-edit-modal {
z-index: 3000 !important;
}
/* ==========================================================================
SHOPIFY-LIKE TWO-COLUMN CHECKOUT PAGE
========================================================================== */
.checkout-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-bg-primary);
visibility: hidden;
opacity: 0;
transition: visibility 0.4s ease, opacity 0.4s ease;
overflow-y: auto;
}
.checkout-modal.open {
visibility: visible;
opacity: 1;
}
.checkout-modal-content {
width: 100%;
min-height: 100%;
background: var(--color-bg-primary);
margin: 0;
padding: 0;
box-shadow: none;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.checkout-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 80px;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg-secondary);
box-sizing: border-box;
}
.checkout-logo {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-text-primary);
text-transform: uppercase;
text-align: center;
}
.checkout-back-link {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.2s ease;
padding: 10px 0;
}
.checkout-back-link:hover {
color: var(--color-text-primary);
}
.checkout-two-columns {
display: grid;
grid-template-columns: 1.2fr 1fr;
flex-grow: 1;
min-height: calc(100vh - 81px);
}
.checkout-left-col {
padding: 60px 80px 80px 160px;
background-color: var(--color-bg-primary);
box-sizing: border-box;
}
.checkout-right-col {
padding: 60px 160px 80px 80px;
background-color: var(--color-bg-secondary);
border-left: 1px solid var(--color-border);
box-sizing: border-box;
}
@media (max-width: 1280px) {
.checkout-left-col {
padding: 50px 40px 60px 80px;
}
.checkout-right-col {
padding: 50px 80px 60px 40px;
}
}
@media (max-width: 991px) {
.checkout-header {
padding: 15px 30px;
}
.checkout-header-spacer {
display: none;
}
.checkout-two-columns {
grid-template-columns: 1fr;
min-height: auto;
}
.checkout-left-col {
padding: 40px 30px 60px 30px;
}
.checkout-right-col {
padding: 40px 30px 50px 30px;
border-left: none;
border-top: 1px solid var(--color-border);
grid-row: 1;
/* Cart summary on top on mobile */
}
.checkout-two-columns.order-completed .checkout-left-col {
grid-row: 1 !important;
}
.checkout-two-columns.order-completed .checkout-right-col {
grid-row: 2 !important;
border-top: 1px solid var(--color-border);
}
}
@media (max-width: 768px) {
.checkout-header {
padding: 15px 20px;
}
.checkout-logo {
font-size: 1.4rem;
}
.checkout-left-col {
padding: 30px 20px 50px 20px;
}
.checkout-right-col {
padding: 30px 20px 40px 20px;
}
}
/* Fullscreen Checkout for Desktop (PC) */
@media (min-width: 992px) {
.checkout-modal {
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
z-index: 5000 !important;
overflow-y: auto !important;
border-radius: 0 !important;
}
.checkout-modal-content {
width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
margin: 0 !important;
}
}
/* Sections & Form Fields */
.checkout-section-box {
margin-bottom: 35px;
text-align: left;
}
.checkout-section-title {
font-family: var(--font-body);
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: 18px;
letter-spacing: -0.01em;
}
.checkout-section-subtitle {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: -12px;
margin-bottom: 20px;
}
.form-group-single {
margin-bottom: 16px;
display: flex;
flex-direction: column;
text-align: left;
}
.form-group-row {
display: flex;
gap: 15px;
margin-bottom: 16px;
}
.form-group-half {
flex: 1;
display: flex;
flex-direction: column;
text-align: left;
}
@media (max-width: 576px) {
.form-group-row {
flex-direction: column;
gap: 16px;
margin-bottom: 0;
}
.form-group-half {
margin-bottom: 16px;
}
}
.checkout-field-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--color-text-muted);
text-transform: uppercase;
margin-bottom: 6px;
}
.checkout-input-field {
width: 100%;
padding: 13px 16px;
border: 1.5px solid var(--color-border);
border-radius: 4px;
box-sizing: border-box;
font-size: 0.92rem;
font-family: var(--font-body);
color: var(--color-text-primary);
background-color: var(--color-bg-secondary);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.checkout-input-field:focus {
outline: none;
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}
/* Payment choice card (Cash on Delivery) */
.payment-choice-card {
border: 1.5px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-secondary);
overflow: hidden;
margin-top: 15px;
}
.payment-choice-header {
padding: 16px 20px;
background-color: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.payment-choice-bullet {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-accent);
display: inline-block;
}
.payment-choice-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-primary);
}
.payment-choice-body {
padding: 20px;
background-color: var(--color-bg-primary);
font-size: 0.86rem;
color: var(--color-text-muted);
line-height: 1.5;
text-align: left;
}
/* 2-Step Checkout Elements */
.checkout-step-container {
animation: fadeInStep 0.4s ease forwards;
display: flex;
flex-direction: column;
}
@keyframes fadeInStep {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Contact Method Tabs */
.contact-method-tabs {
display: flex;
gap: 8px;
width: 100%;
}
.contact-method-tab {
flex: 1;
padding: 10px 14px !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-muted) !important;
border: 1.5px solid var(--color-border) !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: var(--transition-smooth) !important;
text-align: center !important;
}
.contact-method-tab:hover {
border-color: var(--color-text-primary) !important;
color: var(--color-text-primary) !important;
}
.contact-method-tab.active {
background-color: var(--color-text-primary) !important;
color: var(--color-bg-primary) !important;
border-color: var(--color-text-primary) !important;
}
/* Payment Method Options List */
.payment-method-option {
transition: var(--transition-smooth) !important;
}
.payment-method-option.active {
border-color: var(--color-accent) !important;
opacity: 1 !important;
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.05) !important;
}
.shopify-submit-btn {
width: 100%;
padding: 18px 30px;
background-color: var(--color-text-primary);
color: var(--color-bg-primary);
border: none;
border-radius: 4px;
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
cursor: pointer;
transition: background-color 0.25s ease, transform 0.15s ease;
margin-top: 15px;
}
.shopify-submit-btn:hover {
opacity: 0.9;
}
.shopify-submit-btn:active {
transform: translateY(1px);
}
/* Checkout Success Page */
.checkout-success-view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.checkout-success-view h3 {
font-family: var(--font-heading);
font-size: 1.65rem;
font-weight: 700;
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.checkout-success-view p {
font-size: 0.95rem;
color: var(--color-text-muted);
margin-bottom: 30px;
max-width: 450px;
line-height: 1.5;
}
/* Right column items display */
.checkout-items-container {
max-height: 350px;
overflow-y: auto;
padding-right: 10px;
display: flex;
flex-direction: column;
}
.checkout-item-row-display {
display: flex;
align-items: center;
gap: 15px;
padding: 16px 0;
border-bottom: 1px solid var(--color-border);
}
.checkout-item-row-display:last-child {
border-bottom: none;
}
.checkout-item-image-wrapper {
position: relative;
width: 90px;
height: 115px;
border: 1px solid var(--color-border);
border-radius: 6px;
background-color: var(--color-bg-secondary);
flex-shrink: 0;
}
.checkout-item-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
transform: translateZ(0);
backface-visibility: hidden;
}
.checkout-item-quantity-badge {
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 600;
}
.checkout-item-details-display {
flex-grow: 1;
display: flex;
flex-direction: column;
text-align: left;
gap: 2px;
min-width: 0;
}
.checkout-item-brand-title {
font-size: 0.72rem;
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.checkout-item-name-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.3;
}
.checkout-item-size-display {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: 2px;
}
.checkout-item-price-display {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-primary);
flex-shrink: 0;
}
/* Promo Row */
.checkout-promo-row {
display: flex;
gap: 10px;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid var(--color-border);
}
.checkout-promo-input {
flex-grow: 1;
padding: 13px 16px;
border: 1.5px solid var(--color-border);
border-radius: 4px;
font-size: 0.92rem;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.checkout-promo-input:focus {
outline: none;
border-color: var(--color-text-primary);
}
.checkout-promo-btn {
padding: 13px 22px;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
border: 1.5px solid var(--color-border);
border-radius: 4px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.checkout-promo-btn:hover {
background-color: var(--color-border);
color: var(--color-text-primary);
}
/* Pricing summary totals */
.checkout-totals-box {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 12px;
}
.checkout-total-line {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.92rem;
color: var(--color-text-muted);
}
.checkout-divider {
border: none;
border-top: 1px solid var(--color-border);
margin: 5px 0;
}
.total-price-row {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-primary);
}
.total-label {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary);
}
.total-price-val {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-text-primary);
}
/* Language Switcher Styling */
.lang-switcher {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Language Switcher Dropdown Container */
.lang-switcher-dropdown-container {
position: relative !important;
display: inline-block !important;
}
.lang-switcher-active-btn {
background: transparent !important;
border: 1px solid #ffffff !important;
border-radius: 100px !important;
/* Capsule/pill shape */
color: var(--color-text-primary) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
padding: 6px 14px !important;
cursor: pointer !important;
letter-spacing: 0.05em !important;
transition: var(--transition-smooth) !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
text-transform: uppercase !important;
}
.lang-switcher-active-btn::after {
content: "" !important;
display: inline-block !important;
width: 0 !important;
height: 0 !important;
border-left: 3.5px solid transparent !important;
border-right: 3.5px solid transparent !important;
border-top: 4.5px solid var(--color-text-primary) !important;
transition: transform 0.3s ease !important;
margin-top: 1px;
}
.lang-switcher-dropdown-container:hover .lang-switcher-active-btn::after,
.lang-switcher-dropdown-container.open .lang-switcher-active-btn::after {
transform: rotate(180deg) !important;
}
.lang-dropdown-menu {
position: absolute !important;
top: calc(100% + 5px) !important;
right: 0 !important;
background-color: var(--color-bg-secondary) !important;
border: 1px solid var(--color-border) !important;
border-radius: 6px !important;
padding: 5px 0 !important;
min-width: 70px !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(8px) !important;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
z-index: 2500 !important;
}
.lang-switcher-dropdown-container:hover .lang-dropdown-menu,
.lang-switcher-dropdown-container.open .lang-dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.lang-btn {
background: none !important;
border: none !important;
cursor: pointer !important;
font-size: 0.72rem !important;
font-weight: 500 !important;
color: var(--color-text-muted) !important;
padding: 8px 12px !important;
text-align: center !important;
transition: var(--transition-smooth) !important;
width: 100% !important;
letter-spacing: 0.05em !important;
}
.lang-btn:hover {
color: var(--color-text-primary) !important;
background-color: rgba(255, 255, 255, 0.05) !important;
}
.lang-btn.active {
color: var(--color-text-primary) !important;
font-weight: 700 !important;
background-color: var(--color-border) !important;
}
.lang-switcher-mobile {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
padding: 5px 0;
margin-bottom: 25px !important;
}
.lang-switcher-mobile .lang-btn {
font-size: 0.9rem;
padding: 6px 10px;
}
.popular-city-badge {
cursor: pointer;
padding: 6px 12px;
border: 1px solid var(--color-border);
border-radius: 20px;
/* capsule style button */
font-size: 0.8rem;
color: var(--color-text-muted);
background: var(--color-bg-primary);
transition: all 0.2s ease;
user-select: none;
}
.popular-city-badge:hover {
background: var(--color-border) !important;
color: var(--color-text-primary) !important;
border-color: var(--color-text-muted) !important;
}
.autocomplete-dropdown {
position: absolute !important;
top: calc(100% + 4px) !important;
left: 0 !important;
width: 100% !important;
background-color: var(--color-bg-secondary) !important;
border: 1px solid var(--color-border) !important;
border-radius: 6px !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
z-index: 9999 !important;
max-height: 280px !important;
overflow-y: auto !important;
padding: 12px !important;
box-sizing: border-box !important;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Smart transition for JS-toggled dropdown container using style attribute matching */
.autocomplete-dropdown[style*="display: block"] {
animation: dropdownFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes dropdownFadeIn {
0% {
opacity: 0;
transform: translateY(8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Custom scrollbar for dark design */
.autocomplete-dropdown::-webkit-scrollbar {
width: 6px !important;
}
.autocomplete-dropdown::-webkit-scrollbar-track {
background: var(--color-bg-secondary) !important;
}
.autocomplete-dropdown::-webkit-scrollbar-thumb {
background: var(--color-border) !important;
border-radius: 3px !important;
}
.autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted) !important;
}
.autocomplete-suggestions-list {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.suggestion-item {
padding: 8px 12px !important;
font-size: 0.85rem !important;
color: var(--color-text-muted) !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: var(--transition-smooth) !important;
text-align: left !important;
user-select: none;
}
.suggestion-item:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--color-text-primary) !important;
}
/* Error shake animation */
.error-shake {
animation: error-shake 0.4s ease-in-out !important;
}
@keyframes error-shake {
0%,
100% {
transform: translateX(0);
}
20%,
60% {
transform: translateX(-6px);
}
40%,
80% {
transform: translateX(6px);
}
}
/* Button style overrides matching btn-primary style exactly */
.shopify-submit-btn {
width: 100% !important;
padding: 14px 28px !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border-radius: 4px !important;
text-align: center !important;
background-color: var(--color-text-primary) !important;
color: var(--color-bg-secondary) !important;
border: 1px solid var(--color-text-primary) !important;
transition: var(--transition-smooth) !important;
cursor: pointer !important;
margin-top: 15px !important;
}
.shopify-submit-btn:hover {
background-color: transparent !important;
color: var(--color-text-primary) !important;
}
.shopify-submit-btn:active {
transform: translateY(1px) !important;
}
/* ==========================================================================
FLYING HEART & WISHLIST BUMP EFFECT
========================================================================== */
.flying-heart {
position: fixed;
pointer-events: none;
z-index: 9999;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.wishlist-bump {
animation: wishlistShake 0.3s ease-in-out;
}
@keyframes wishlistShake {
0% {
transform: scale(1);
}
30% {
transform: scale(1.2) rotate(-10deg);
}
50% {
transform: scale(1.2) rotate(10deg);
}
70% {
transform: scale(1.2) rotate(-10deg);
}
100% {
transform: scale(1);
}
}
/* ==========================================================================
TOAST NOTIFICATIONS AND TRANSITIONS
========================================================================== */
.toast-container {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
padding: 14px 24px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
gap: 12px;
pointer-events: auto;
transform: translateX(-120%);
opacity: 0;
animation: slideInLeft 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.toast-cart {
border-left: 3px solid var(--color-text-primary);
}
.toast-wishlist {
border-left: 3px solid #D32F2F;
}
.toast-info {
border-left: 3px solid var(--color-text-muted);
}
.toast-success {
border-left: 3px solid #4BB543;
}
@keyframes slideInLeft {
to {
transform: translateX(0);
opacity: 1;
}
}
.toast.fade-out {
transform: translateX(-120%);
opacity: 0;
}
@media (max-width: 768px) {
/* 1. Возвращаем оригинальное поведение анимации шапки */
.main-header,
header {
height: 55px !important;
background-color: transparent !important;
/* В обычном состоянии прозрачная */
border-bottom: none !important;
/* Без нижнего бордюра */
transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
/* При скролле вниз шапка становится плотно черной и включает блюр */
.main-header.header-scrolled {
background-color: #000000 !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-bottom: none !important;
}
/* Принудительный сброс header-top, если скролл вернулся наверх */
.main-header.header-top {
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
/* Железобетонная Grid-структура */
.header-container {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
/* Две гибкие боковые зоны и точный центр для логотипа */
align-items: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
position: relative !important;
}
/* Левая колонка - Flexbox */
.header-left-col {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 5px !important;
/* Равномерный шаг */
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
}
/* Правая колонка - Flexbox с выравниванием по правому краю */
.header-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
/* Выравнивание по правому краю */
gap: 5px !important;
/* Равномерный шаг */
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}
#lang-switcher-dropdown-container,
.cart-badge,
.wishlist-badge {
display: none !important;
}
/* Жестко скрываем ПК-меню категорий */
.header-nav-left,
header nav,
.main-menu-desktop {
display: none !important;
}
/* Центральный текстовый логотип (вторая колонка грида) */
.header-logo,
.nav-logo,
header .logo,
.logo-text-central {
grid-column: 2 !important;
position: static !important;
transform: none !important;
font-size: 21px !important;
font-weight: 900 !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
text-align: center !important;
margin: 0 15px !important;
/* Безопасные боковые отступы */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
}
/* Одинаковый чистый размер для всех мобильных кнопок-иконок */
.mobile-menu-toggle-btn,
.action-circle-btn,
.header-icon-btn,
#search-btn,
.lang-switcher,
#profile-btn,
#wishlist-btn,
#cart-btn {
position: static !important;
transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
box-sizing: border-box !important;
}
/* Активная кнопка языка внутри switcher */
.lang-switcher-active-btn {
border: none !important;
background: transparent !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Меню языков сдвигаем ниже */
.lang-dropdown-menu {
top: 45px !important;
right: auto !important;
left: 0 !important;
border-radius: 4px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* Корректируем отступ главного экрана под фиксированную шапку */
.hero-section,
.main-hero {
min-height: 100dvh !important;
height: 100dvh !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding-top: 55px !important;
padding-bottom: 55px !important;
box-sizing: border-box !important;
margin-bottom: 0 !important;
}
/* 2. Коррекция главного логотипа на мобильных (Точное соответствие референсу) */
.interactive-logo {
line-height: 0.85 !important;
/* Уменьшаем межстрочный интервал для плотной посадки */
margin-top: 0 !important;
margin-bottom: 5px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.interactive-logo .logo-row {
font-size: 102px !important;
/* Увеличили базовый размер DR и ILL */
letter-spacing: -2.5px !important;
/* Плотность букв как на скрине */
margin-bottom: 0 !important;
}
.interactive-logo .logo-row.store-row {
font-size: 47px !important;
/* Пропорционально увеличили размер STORE */
letter-spacing: -0.8px !important;
margin-top: -2px !important;
/* Легкая компенсация интервала для STORE */
margin-bottom: 3px !important;
/* Слегка подтянули подпись выше, но не впритык */
}
.interactive-logo + .logo-subtext {
margin-top: 10px !important;
margin-bottom: 20px !important;
gap: 10px !important;
}
/* Подтягиваем и выравниваем мелкую подпись под логотипом */
.interactive-logo + .logo-subtext p {
font-size: 10.5px !important;
letter-spacing: 1px !important;
}
/* Если буквы разбиты по тегам span */
.interactive-logo span {
font-size: inherit !important;
}
/* 3. Подгонка кнопки КАТАЛОГ */
.catalog-btn-main {
width: 85% !important;
max-width: 260px !important;
height: 44px !important;
font-size: 15px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
letter-spacing: 0.1em !important;
}
.home-preview-section,
.new-arrivals,
.products-section {
padding-top: 15px !important;
margin-top: 0 !important;
}
/* 5. Адаптивная страница/карточка товара (Product Details Modal) */
.product-page-container,
.product-single,
.product-main,
.product-modal-body {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
padding-top: 25px !important;
/* Настраиваем аккуратный отступ сверху внутри модалки */
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
gap: 25px !important;
/* Расстояние между блоком фото и блоком текста */
}
/* Внутри модального контейнера сдвигаем тело вниз, чтобы не перекрывалось кнопкой закрытия */
.product-modal-content {
padding-top: 45px !important;
}
.product-images,
.product-gallery,
.product-modal-gallery {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
/* Убираем пустую зону под главным фото */
.product-main-image,
.main-image-container,
.product-gallery-slider,
.slider-wrapper {
height: auto !important;
/* Убираем фиксированную высоту контейнера слайдера */
min-height: auto !important;
max-height: 400px !important;
/* Ограничиваем контейнер так же, как и само фото */
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
/* Убираем темный фон подложки, если он есть */
}
.product-main-image img,
.main-image-container img {
width: 100% !important;
height: auto !important;
max-height: 400px !important;
object-fit: contain !important;
margin: 0 auto !important;
display: block !important;
}
/* Контейнер маленьких превью-картинок под главной с подтяжкой к фото */
.product-thumbnails,
.gallery-thumbs,
.thumbnails-container,
.thumbnail-list {
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
/* Включаем горизонтальный свайп, если картинок много */
white-space: nowrap !important;
padding-bottom: 5px !important;
width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
margin-top: 5px !important;
/* Подтягиваем блок миниатюр ближе к фото */
}
/* Убираем скроллбар для эстетики, если браузер поддерживает */
.product-thumbnails::-webkit-scrollbar,
.thumbnail-list::-webkit-scrollbar {
height: 4px !important;
}
.thumbnail-list .thumbnail-item {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
aspect-ratio: 1 / 1 !important;
box-sizing: border-box !important;
display: inline-block !important;
overflow: hidden !important;
}
.thumbnail-list .thumbnail-item img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.product-info,
.product-details,
.product-shop,
.product-modal-details {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Убедись, что кнопки добавления в корзину и покупки занимают всю доступную ширину */
.product-actions,
.purchase-buttons,
.modal-actions-container {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-top: 15px !important;
}
.btn-add-to-cart,
.btn-buy-now,
.product-info button,
.modal-add-to-cart-btn,
.modal-buy-now-btn {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
height: 48px !important;
/* Удобный размер для пальца */
}
/* Сброс абсолютного позиционирования кнопки закрытия на мобильных */
.close-modal-btn {
top: 15px !important;
right: 15px !important;
z-index: 9999 !important;
}
/* 2. Точечно настраиваем только корзину и избранное, если они используют стандартные классы */
.cart-drawer,
.wishlist-drawer {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
width: 85% !important;
max-width: 340px !important;
height: 100% !important;
z-index: 100005 !important;
/* Выше шапки сайта */
padding-top: 55px !important;
/* Отступ под шапку */
box-sizing: border-box !important;
background: #000000 !important;
}
/* 3. Оверлеи (затемнение) конкретно для этих двух блоков */
.cart-drawer-overlay,
.wishlist-drawer-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.6) !important;
z-index: 100004 !important;
}
/* 4. Если в твоем коде шторки открываются добавлением класса .open или .active,
убедись, что дисплей не перекрывается */
.cart-drawer.open,
.wishlist-drawer.open,
.cart-drawer.active,
.wishlist-drawer.active {
display: flex !important;
}
/* 1. Главный контейнер выпадающего поиска строго под шапкой */
.search-modal,
.search-bar-container,
.main-search-bar,
.search-overlay,
[class*="search-bar"],
[class*="search-form-wrap"] {
position: fixed !important;
top: 55px !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
z-index: 100005 !important;
background-color: #000000 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 12px 15px !important;
box-sizing: border-box !important;
display: block !important;
}
/* 2. Создаем жесткий относительный контекст для позиционирования иконок внутри */
.search-modal-content,
.search-form,
.search-bar-container form {
position: relative !important;
width: 100% !important;
height: auto !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
transition: none !important;
display: flex !important;
align-items: center !important;
}
/* 3. Идеальный инпут с большими боковыми отступами под иконки */
.search-modal input,
[class*="search"] input {
width: 100% !important;
height: 44px !important;
background: #111111 !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
padding: 0 40px 0 40px !important;
/* Отступы: 40px слева под лупу, 40px справа под крестик */
border-radius: 4px !important;
box-sizing: border-box !important;
font-size: 14px !important;
margin: 0 !important;
}
/* 4. Аккуратная иконка лупы слева внутри инпута */
.search-icon-inside,
.search-form .search-icon,
.search-modal-content i:first-of-type {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
color: rgba(255, 255, 255, 0.4) !important;
font-size: 14px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
width: auto !important;
height: auto !important;
}
/* 5. Маленький аккуратный крестик закрытия справа внутри инпута */
.close-search-btn,
.search-close-btn,
.search-modal-content .close-btn {
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
color: #ffffff !important;
font-size: 16px !important;
/* Уменьшаем размер, чтобы не был гигантским */
cursor: pointer !important;
background: transparent !important;
border: none !important;
width: 24px !important;
height: 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* Контейнер выпадающих результатов поиска */
.search-results {
position: absolute !important;
top: 54px !important;
left: -15px !important;
width: calc(100% + 30px) !important;
max-height: 350px !important;
overflow-y: auto !important;
background: #000000 !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
z-index: 99999 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Полный сброс десктопной карточки товара внутри поиска */
.search-results .product-card,
.search-results .search-item,
.search-results [class*="item"] {
display: flex !important;
flex-direction: row !important;
/* Строго в линию */
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
height: auto !important;
/* Убираем фиксированную высоту */
min-height: auto !important;
max-height: none !important;
padding: 10px 15px !important;
margin: 0 !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
box-sizing: border-box !important;
background: transparent !important;
/* Убираем огромную темную подложку */
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
}
/* Сброс оберток изображений (убираем огромные блоки вокруг фото) */
.search-results .product-card .img-wrap,
.search-results .product-card .image-container,
.search-results [class*="thumb"],
.search-results [class*="image"] {
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
max-width: 50px !important;
margin: 0 15px 0 0 !important;
padding: 0 !important;
background: transparent !important;
position: relative !important;
height: auto !important;
display: block !important;
}
/* Сама маленькая картинка товара */
.search-results .product-card img,
.search-results .search-item img,
.search-results img {
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
max-width: 50px !important;
object-fit: cover !important;
border-radius: 4px !important;
margin: 0 !important;
position: static !important;
/* Отменяем абсолютное позиционирование десктопа */
}
/* Блок с текстом — сбрасываем все абсолютные сдвиги десктопа */
.search-results .product-info,
.search-results .item-details,
.search-results [class*="info"],
.search-results [class*="details"] {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
width: calc(100% - 65px) !important;
padding: 0 !important;
margin: 0 !important;
position: static !important;
background: transparent !important;
}
/* Название категории или тег (например, КОФТИ) */
.search-results .category,
.search-results [class*="cat"] {
font-size: 10px !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.4) !important;
margin: 0 0 2px 0 !important;
letter-spacing: 0.05em !important;
}
/* Название товара */
.search-results h4,
.search-results .product-title,
.search-results [class*="title"] {
font-size: 13px !important;
color: #ffffff !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
font-weight: 500 !important;
text-align: left !important;
white-space: normal !important;
/* Разрешаем перенос, если имя длинное */
}
/* Блок цен */
.search-results .price-box,
.search-results .product-price,
.search-results [class*="price"] {
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
font-size: 12px !important;
}
/* Текущая цена товара в результатах поиска — делаем её чистой и белой */
.search-results .current-price,
.search-results span,
.search-results .price {
color: #ffffff !important;
/* Белый цвет для актуальной цены */
font-weight: 600 !important;
}
/* Старая (зачеркнутая) цена для контраста оставляем приглушенной */
.search-results .old-price,
.search-results del,
.search-results [class*="old"] {
color: rgba(255, 255, 255, 0.4) !important;
text-decoration: line-through !important;
font-size: 11px !important;
}
}
/* ==========================================================================
INFO MODAL & FOOTER LINKS
========================================================================== */
.footer-links-column {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
margin-top: 10px;
}
.footer-info-link {
font-size: 0.88rem;
color: #aaa;
text-align: left;
transition: var(--transition-smooth);
padding: 2px 0;
font-weight: 500;
}
.footer-info-link:hover {
color: var(--color-accent);
transform: translateX(4px);
}
.info-modal-body a {
color: var(--color-accent);
text-decoration: underline;
transition: var(--transition-smooth);
}
.info-modal-body a:hover {
color: var(--color-text-primary);
}
.info-page-view {
display: none;
padding-top: 100px;
/* Offset to clear the sticky main header */
padding-bottom: 120px;
/* Generous bottom spacing */
min-height: 100vh;
/* Pushes the footer out of the first screen fold */
background-color: var(--color-bg-primary);
box-sizing: border-box;
}
/* Smooth fade-in & slide-up of the page container when toggled active */
.info-page-view[style*="display: block"] {
animation: infoPageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes infoPageFadeIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.info-modal-inner {
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 40px 24px 80px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.info-modal-title {
margin-top: 0;
margin-bottom: 35px;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 2.2rem;
color: var(--color-text-primary);
text-align: left;
}
.info-modal-body {
color: var(--color-text-muted);
font-size: 0.95rem;
line-height: 1.7;
text-align: left;
}
.info-modal-body h5 {
color: var(--color-text-primary);
font-size: 1.05rem;
margin-top: 25px;
margin-bottom: 12px;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.info-modal-body p {
margin-bottom: 15px;
}
.info-modal-body ul {
margin-bottom: 20px;
padding-left: 20px;
}
.info-modal-body li {
margin-bottom: 8px;
}
.info-modal-body strong {
color: var(--color-accent);
}
@media (max-width: 768px) {
.info-modal-inner {
padding: 30px 16px 60px 16px;
}
.info-modal-title {
font-size: 1.6rem;
margin-bottom: 25px;
}
}
/* Preorder Success Modal Specific Styles */
#preorder-success-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3100 !important;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
transition: visibility 0.4s ease;
}
#preorder-success-modal.open {
visibility: visible;
}
#preorder-success-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.4s ease;
will-change: opacity;
}
#preorder-success-modal.open #preorder-success-overlay {
opacity: 1;
}
#preorder-success-modal .info-modal-content {
position: relative;
background-color: var(--color-bg-secondary);
width: 90%;
max-width: 480px;
padding: 40px;
border-radius: 12px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: translateY(30px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
z-index: 2;
box-sizing: border-box;
max-height: 85vh;
display: flex;
flex-direction: column;
}
#preorder-success-modal.open .info-modal-content {
opacity: 1;
transform: translateY(0);
}
#preorder-success-modal .info-modal-title {
text-align: center !important;
font-size: 1.5rem !important;
margin-bottom: 15px !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
#preorder-success-modal .info-modal-body {
text-align: center !important;
font-size: 1.05rem !important;
color: var(--color-text-muted) !important;
}
@media (max-width: 768px) {
.footer-links-column {
align-items: center !important;
}
.footer-info-link {
text-align: center !important;
}
.footer-info-link:hover {
transform: none !important;
}
}
/* ==========================================================================
CATALOG DRAWER (Sidebar Catalog)
========================================================================== */
.catalog-drawer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2100;
visibility: hidden;
transition: visibility 0.4s;
}
.catalog-drawer.open {
visibility: visible;
}
.catalog-drawer-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.4s ease;
}
.catalog-drawer.open .catalog-drawer-overlay {
opacity: 1;
}
.catalog-drawer-content {
position: absolute;
top: 0;
left: 0;
width: 450px;
max-width: 100%;
height: 100%;
background-color: var(--color-bg-secondary);
box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex;
flex-direction: column;
z-index: 1002;
}
.catalog-drawer.open .catalog-drawer-content {
transform: translateX(0);
}
.catalog-drawer-header {
padding: 24px 30px;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.catalog-drawer-header h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.close-catalog-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
background: transparent;
cursor: pointer;
outline: none;
transition: var(--transition-smooth);
}
.close-catalog-btn:hover {
transform: rotate(90deg);
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-color: var(--color-text-primary);
}
.catalog-drawer-body {
padding: 40px 30px;
display: flex;
flex-direction: column;
gap: 25px;
overflow-y: auto;
}
.catalog-drawer-body .nav-category-link {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-primary);
background: none;
border: none;
cursor: pointer;
padding: 12px 0;
text-align: left;
border-bottom: 1px solid var(--color-border);
width: 100%;
transition: padding-left 0.3s ease, color 0.3s ease;
}
.catalog-drawer-body .nav-category-link:hover {
padding-left: 10px;
color: var(--color-accent);
}
/* Sliding Submenu Menu Layout */
.catalog-drawer-slider {
display: flex;
width: 200%;
height: 100%;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.catalog-drawer-slider.slide-active {
transform: translateX(-50%);
}
.catalog-panel {
width: 50%;
flex-shrink: 0;
padding: 40px 30px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 25px;
height: 100%;
overflow-y: auto;
}
.drawer-menu-parent-trigger {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-primary);
background: none;
border: none;
cursor: pointer;
padding: 12px 0;
text-align: left;
border-bottom: 1px solid var(--color-border);
transition: color 0.3s ease, padding-left 0.3s ease;
}
.drawer-menu-parent-trigger:hover {
padding-left: 10px;
color: var(--color-accent);
}
.drawer-menu-parent-trigger .trigger-arrow-right {
transition: transform 0.3s ease;
color: var(--color-text-muted);
}
.catalog-back-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
background: none;
border: none;
cursor: pointer;
padding: 12px 0;
text-align: left;
border-bottom: 1px solid var(--color-border);
transition: color 0.3s ease, padding-left 0.3s ease;
}
.catalog-back-btn:hover {
padding-left: 5px;
color: var(--color-accent);
}
.catalog-back-btn svg {
transition: transform 0.3s ease;
}
.catalog-back-btn:hover svg {
transform: translateX(-3px);
}
.catalog-sub-panel-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.catalog-sub-panel-content .drawer-child-link {
font-size: 1.15rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: none !important;
padding: 10px 0 !important;
border-bottom: 1px dashed var(--color-border) !important;
width: 100%;
text-align: left;
background: none;
border-top: none;
border-left: none;
border-right: none;
cursor: pointer;
color: var(--color-text-primary);
transition: color 0.3s ease, padding-left 0.3s ease;
}
.catalog-sub-panel-content .drawer-child-link:hover {
padding-left: 8px;
color: var(--color-accent);
}
/* Catalog Drawer Content layout fix for footer alignment */
.catalog-drawer-content {
display: flex;
flex-direction: column;
}
.catalog-drawer-body {
flex: 1;
overflow-y: auto;
}
/* Catalog Drawer Footer */
.catalog-drawer-footer {
padding: 24px 30px;
border-top: 1px solid var(--color-border);
background-color: var(--color-bg-secondary);
display: flex;
flex-direction: column;
gap: 15px;
}
.lang-switcher-catalog {
display: flex;
align-items: center;
gap: 10px;
}
.lang-switcher-catalog .lang-btn {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted);
background: none;
border: none;
cursor: pointer;
transition: var(--transition-smooth);
padding: 4px 8px;
}
.lang-switcher-catalog .lang-btn.active,
.lang-switcher-catalog .lang-btn:hover {
color: var(--color-text-primary);
}
.lang-switcher-catalog .lang-separator {
color: var(--color-border);
font-size: 0.8rem;
pointer-events: none;
}
/* Preorder Page Styles */
.preorder-page-view {
padding-top: 100px !important;
min-height: 80vh !important;
background-color: var(--color-bg-primary) !important;
box-sizing: border-box !important;
}
.preorder-form .checkout-input-field:focus {
border-color: var(--color-accent) !important;
outline: none !important;
box-shadow: 0 0 5px rgba(255, 102, 0, 0.2) !important;
}
.preorder-form select.checkout-input-field {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 35px;
}
/* Hide spin buttons for number inputs in preorder form */
.preorder-form input[type=number]::-webkit-outer-spin-button,
.preorder-form input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.preorder-form input[type=number] {
-moz-appearance: textfield;
}
/* Invalid fields highlight style for preorder form */
.preorder-form .checkout-input-field.is-invalid {
border-color: #ff3333 !important;
box-shadow: 0 0 5px rgba(255, 51, 51, 0.4) !important;
}
/* Preorder price fields wrapper & suffix styling */
.price-input-wrapper {
position: relative;
width: 100%;
}
.price-input-wrapper .checkout-input-field {
padding-right: 35px !important;
}
.price-input-wrapper .currency-suffix {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
font-size: 0.95rem;
pointer-events: none;
font-family: var(--font-body);
}
/* Preorder custom error messages styling */
.preorder-error-message {
color: #ff3333 !important;
font-size: 0.75rem !important;
margin-top: 6px !important;
font-weight: 500 !important;
display: none;
}
/* Preorder form card custom background image and contrast */
#preorder-form {
background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('new-window.webp') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.preorder-form .checkout-field-label {
color: rgba(255, 255, 255, 0.8) !important;
}
.preorder-form .currency-suffix {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Custom background image and color style for preorder success modal card */
#preorder-success-modal .info-modal-content {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('ok-window.webp') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#preorder-success-modal .info-modal-title,
#preorder-success-modal .info-modal-body {
color: #ffffff !important;
}
/* Contacts Modal Overlay Custom Styles */
#contacts-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3100 !important;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
transition: visibility 0.4s ease;
}
#contacts-modal.open {
visibility: visible;
}
#contacts-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.4s ease;
will-change: opacity;
}
#contacts-modal.open #contacts-modal-overlay {
opacity: 1;
}
#contacts-modal .info-modal-content {
position: relative;
background-color: var(--color-bg-secondary);
width: 90%;
max-width: 480px;
padding: 40px;
border-radius: 12px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: translateY(30px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
z-index: 2;
box-sizing: border-box;
max-height: 85vh;
display: flex;
flex-direction: column;
}
#contacts-modal.open .info-modal-content {
opacity: 1;
transform: translateY(0);
}
/* Unified close button styling and hover animation for Contacts Modal */
.close-contacts-btn {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
background: transparent;
cursor: pointer;
outline: none;
transition: var(--transition-smooth);
}
.close-contacts-btn:hover {
transform: rotate(90deg);
background-color: var(--color-text-primary);
color: var(--color-bg-secondary);
border-color: var(--color-text-primary);
}
/* ==========================================================================
CUSTOM DROPDOWNS (SELECT) STYLE
========================================================================== */
.custom-select-native-hidden {
display: none !important;
}
.custom-select-wrapper {
position: relative;
width: 100%;
user-select: none;
font-family: var(--font-body);
}
.custom-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 13px 16px;
border: 1.5px solid var(--color-border);
border-radius: 4px;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
font-size: 0.92rem;
cursor: pointer;
box-sizing: border-box;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.custom-select-wrapper.is-open .custom-select-trigger {
border-color: var(--color-text-primary);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}
/* Specific trigger styling for preorder page to match its focus style */
.preorder-form .custom-select-wrapper.is-open .custom-select-trigger {
border-color: var(--color-accent) !important;
box-shadow: 0 0 5px rgba(255, 102, 0, 0.2) !important;
}
/* Arrow styling */
.custom-select-trigger::after {
content: "";
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0.8;
}
.custom-select-wrapper.is-open .custom-select-trigger::after {
transform: rotate(180deg);
background-image: url("data:image/svg+xml;utf8,");
opacity: 1;
}
/* Dropdown list */
.custom-select-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 100%;
z-index: 1000;
background-color: var(--color-bg-secondary);
border: 1.5px solid var(--color-border);
border-radius: 4px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.25s ease;
max-height: 280px;
overflow-y: auto;
box-sizing: border-box;
}
/* For Custom Selects custom scrollbars */
.custom-select-dropdown::-webkit-scrollbar {
width: 6px;
}
.custom-select-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.custom-select-dropdown::-webkit-scrollbar-thumb {
background: #444;
border-radius: 3px;
}
.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
background: #666;
}
.custom-select-wrapper.is-open .custom-select-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Dropdown options */
.custom-select-option {
padding: 12px 16px;
font-size: 0.90rem;
color: var(--color-text-primary);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
text-align: left;
}
/* Selected option */
.custom-select-option.is-selected {
background-color: rgba(255, 255, 255, 0.08);
color: var(--color-text-primary);
font-weight: 500;
}
/* Hover/Focus states - graphite/dark theme, no system blue */
.custom-select-option:hover {
background-color: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.custom-select-option.disabled {
color: var(--color-text-muted);
opacity: 0.5;
pointer-events: none;
}
/* Specific styling for filter modal select wrapper */
.filter-group .custom-select-trigger {
padding: 12px 16px;
font-size: 0.85rem;
border: 1px solid var(--color-border);
}
@media (min-width: 1025px) {
#home-preview .section-container {
max-width: 1760px;
padding: 40px 12px 80px 12px;
}
#home-preview-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 100%;
}
.related-products-section {
width: 100%;
max-width: none;
padding: 60px 0;
}
.related-title {
max-width: 1760px;
margin: 0 auto 40px;
padding-left: 12px;
padding-right: 12px;
}
.related-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1760px;
margin: 0 auto;
padding-left: 12px;
padding-right: 12px;
}
}
/* Mobile Admin Panel and Modal Adjustments */
@media (max-width: 768px) {
body.modal-open {
overflow: hidden !important;
height: 100vh !important;
touch-action: none !important;
}
/* 1. Адаптация модального окна и полей формы */
.admin-edit-modal {
z-index: 999999 !important;
padding: 0 !important;
margin: 0 !important;
}
.admin-edit-modal-content {
width: 100% !important;
max-width: 100% !important;
height: 100dvh !important;
max-height: 100dvh !important;
border-radius: 0 !important;
top: 0 !important;
left: 0 !important;
transform: none !important;
margin: 0 !important;
padding: 20px 16px 30px 16px !important;
box-sizing: border-box !important;
overflow-y: auto !important;
}
.form-group-row {
flex-direction: column !important;
gap: 15px !important;
}
.form-group-half,
.admin-edit-modal-content input,
.admin-edit-modal-content select,
.admin-edit-modal-content textarea,
.admin-edit-modal-content .custom-dropdown-wrapper,
.admin-edit-modal-content .btn-submit-admin {
width: 100% !important;
box-sizing: border-box !important;
}
/* 2. Адаптация шапки админки и вкладок */
.admin-header-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 15px !important;
}
.admin-header-actions {
width: 100% !important;
gap: 10px !important;
}
.admin-header-actions .btn {
flex: 1 !important;
text-align: center !important;
padding: 12px 10px !important;
font-size: 0.8rem !important;
}
.admin-tabs {
flex-wrap: nowrap !important;
overflow-x: auto !important;
width: 100% !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
gap: 12px !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
margin-bottom: 20px !important;
padding-bottom: 5px !important;
}
.admin-tabs::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.admin-tab-btn {
font-size: 0.8rem !important;
padding: 8px 10px !important;
flex-shrink: 0 !important;
letter-spacing: 0.05em !important;
}
/* 3. Адаптация карточек товаров */
.admin-products-list {
gap: 15px !important;
}
.admin-prod-row {
display: grid !important;
grid-template-columns: 60px 1fr !important;
gap: 12px !important;
padding: 15px !important;
}
.admin-prod-img {
grid-column: 1 !important;
grid-row: 1 !important;
}
.admin-prod-details {
grid-column: 2 !important;
grid-row: 1 !important;
}
.admin-prod-price {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
text-align: left !important;
font-size: 1.1rem !important;
min-width: auto !important;
}
.admin-prod-actions {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
width: 100% !important;
display: flex !important;
gap: 8px !important;
}
.btn-admin-edit,
.btn-admin-delete {
flex: 1 !important;
text-align: center !important;
padding: 10px !important;
}
/* 1. Повышение z-index для каталога и фильтров поверх шапки сайта */
.catalog-drawer,
.filter-modal {
z-index: 100000 !important;
}
/* 2. Компактная поисковая плашка и оверлей на весь экран */
.search-modal {
top: 0 !important;
height: auto !important;
max-height: 100dvh !important;
background: transparent !important;
border-bottom: none !important;
padding: 0 !important;
z-index: 100000 !important;
}
.search-modal-content,
.search-container {
background: #000000 !important;
height: auto !important;
padding: 12px 16px !important;
z-index: 100005 !important;
position: relative !important;
transform: translateY(-100%) !important;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.search-modal.open .search-modal-content,
.search-modal.active .search-modal-content {
transform: translateY(0) !important;
}
.search-modal-overlay,
.search-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
height: 100dvh !important;
background: rgba(0, 0, 0, 0.6) !important;
z-index: 100001 !important;
}
.search-modal-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
}
.search-input-wrapper {
position: relative !important;
flex: 1 !important;
width: auto !important;
border-bottom: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 1. Скрытие рамок и отступов у пустого контейнера результатов поиска */
.search-results:empty {
display: none !important;
border-top: none !important;
border-bottom: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. Посадка кнопки закрытия ✕ во Flex-поток заголовка */
.close-search-btn,
.search-modal-content .close-btn {
position: static !important;
transform: none !important;
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
.close-search-btn svg,
.search-modal-content .close-btn svg {
width: 20px !important;
height: 20px !important;
}
/* 3. Устранение зазора сверху и фиксация шторок от верхнего края */
.cart-drawer,
.wishlist-drawer {
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
padding-top: 0 !important;
z-index: 100000 !important;
}
.cart-drawer-content,
.wishlist-drawer-content {
top: 0 !important;
height: 100% !important;
height: 100dvh !important;
width: 85% !important;
max-width: 340px !important;
z-index: 100005 !important;
position: relative !important;
margin-left: auto !important;
}
.cart-drawer-overlay,
.wishlist-drawer-overlay {
z-index: 100001 !important;
}
/* 4. Сброс сжатия для текстовых языковых переключателей */
.catalog-drawer-footer .lang-switcher,
.mobile-menu-body .lang-switcher {
width: auto !important;
height: auto !important;
padding: 0 !important;
display: flex !important;
gap: 10px !important;
}
/* 5. Выравнивание соцсетей в футере каталога по левому краю */
.catalog-drawer-footer .footer-socials-row {
justify-content: flex-start !important;
}
/* 6. Повышение приоритета чекаута для перекрытия главной шапки */
.checkout-modal {
z-index: 100000 !important;
}
/* 7. Бесшовное слияние собственной шапки чекаута с контентом */
.checkout-header {
border-bottom: none !important;
}
}
/* Кнопка выхода Outline */
.btn-logout-outline {
background: transparent !important;
border: 1px solid var(--color-text-primary) !important;
color: var(--color-text-primary) !important;
padding: 8px 18px !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.btn-logout-outline:hover {
background: var(--color-text-primary) !important;
color: var(--color-bg-primary) !important;
}
/* Кнопка перехода в каталог Solid Black */
.btn-catalog-solid {
background: #000000 !important;
color: #ffffff !important;
border: none !important;
padding: 12px 24px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: opacity 0.2s ease !important;
}
.btn-catalog-solid:hover {
opacity: 0.85 !important;
}
/* Личный кабинет пользователя - Одноколоночный макет */
.cabinet-grid {
display: block;
max-width: 900px;
margin: 0 auto;
text-align: left;
}
.cabinet-col-right {
display: flex;
flex-direction: column;
}
.cabinet-section-title {
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
margin: 0 0 20px 0;
letter-spacing: 0.05em;
color: var(--color-text-primary);
}
/* ==========================================================================
ORDERS HISTORY PAGE (My Orders Full-Screen)
========================================================================== */
.orders-page-view {
font-family: var(--font-body);
}
.admin-easteregg-trigger {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.orders-full-list {
margin-top: 30px;
}
/* Full Width Card Styling */
.history-full-card {
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
transition: var(--transition-smooth);
}
.history-full-card:hover {
border-color: var(--color-text-muted);
}
.history-full-card-header {
background-color: var(--color-bg-secondary);
transition: background-color 0.2s ease;
}
.history-full-card-header:hover {
background-color: rgba(255, 255, 255, 0.02);
}
.history-card-number {
font-family: var(--font-heading);
}
.history-card-thumb {
transition: transform 0.2s ease;
}
.history-card-thumb:hover {
transform: scale(1.15);
z-index: 2;
}
/* Accordion transition styles */
.history-order-details {
/* Height and border-top-color are transition-animated in JS/CSS */
border-top: 1px solid transparent;
}
.history-details-grid {
border-bottom: 1px solid var(--color-border);
padding-bottom: 20px;
}
/* Media query for mobile responsive grid */
@media (max-width: 768px) {
.history-full-card-header {
flex-direction: column;
align-items: flex-start !important;
gap: 15px;
padding: 15px 20px !important;
}
.history-card-middle {
width: 100%;
justify-content: space-between !important;
padding-right: 0 !important;
}
.history-card-arrow {
position: absolute;
right: 20px;
top: 20px;
}
.history-full-card {
position: relative;
}
.history-details-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
}
/* Checkout Success Order Number Styling */
.success-order-box {
margin: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: var(--color-bg-primary);
padding: 15px 25px;
border-radius: 8px;
border: 1px solid var(--color-border);
width: 100%;
box-sizing: border-box;
}
.success-order-label {
font-size: 0.8rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.success-order-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
#success-order-number {
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.05em;
}
.copy-order-btn {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 4px;
transition: var(--transition-smooth);
border: 1px solid transparent;
}
.copy-order-btn:hover {
color: var(--color-text-primary);
background-color: var(--color-bg-secondary);
border-color: var(--color-border);
}
.copy-order-btn:active {
transform: scale(0.92);
}
.input-error-msg {
color: #ff3333;
font-size: 0.75rem;
margin-top: 6px;
display: none;
font-weight: 500;
text-align: center;
}
/* Mobile Safe Area Insets (iOS Safari notch / home bar support) */
@supports (padding: max(0px)) {
.cart-drawer,
.modal-content,
.checkout-modal-content,
.filters-drawer {
padding-bottom: max(20px, env(safe-area-inset-bottom));
}
}