body {
background-color: white; /* Ensure the iframe has a white background */
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--black: #0a0a0a;
--dark: #111111;
--red: #e63946;
--red-dark: #c1121f;
--white: #ffffff;
--gray: #888888;
--light-gray: #e0e0e0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--black);
color: var(--white);
overflow-x: hidden;
cursor: default;
}
::selection {
background: var(--red);
color: var(--white);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--black);
}
::-webkit-scrollbar-thumb {
background: var(--red);
border-radius: 4px;
}
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--black);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.hidden {
opacity: 0;
visibility: hidden;
}
.preloader-logo {
width: 200px;
animation: preloaderPulse 1.5s ease-in-out infinite;
}
@keyframes preloaderPulse {
0%, 100% { opacity: 0.3; transform: scale(0.98); }
50% { opacity: 1; transform: scale(1); }
}
.cursor {
width: 20px;
height: 20px;
border: 2px solid var(--red);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.15s ease, opacity 0.15s ease;
mix-blend-mode: difference;
}
.cursor.active {
transform: scale(2.5);
opacity: 0.5;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 20px 60px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.4s ease;
background: transparent;
}
header.scrolled {
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(20px);
padding: 12px 60px;
border-bottom: 1px solid rgba(230, 57, 70, 0.2);
}
.logo-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
.logo-img {
height: 90px;
width: auto;
transition: height 0.3s ease;
}
header.scrolled .logo-img {
height: 75px;
}
.logo-text {
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 1px;
color: var(--white);
line-height: 1.3;
}
.logo-text .accent {
color: var(--red);
font-weight: 700;
}
nav {
display: flex;
align-items: center;
gap: 40px;
}
nav a {
color: var(--white);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
position: relative;
padding: 5px 0;
transition: color 0.3s ease;
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--red);
transition: width 0.3s ease;
}
nav a:hover {
color: var(--red);
}
nav a:hover::after {
width: 100%;
}
.header-actions {
display: flex;
align-items: center;
gap: 25px;
}
.cart-btn {
position: relative;
background: none;
border: none;
cursor: pointer;
padding: 5px;
transition: transform 0.3s ease;
}
.cart-btn:hover {
transform: scale(1.1);
}
.cart-btn svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--white);
stroke-width: 2;
transition: stroke 0.3s ease;
}
.cart-btn:hover svg {
stroke: var(--red);
}
.cart-count {
position: absolute;
top: -5px;
right: -8px;
background: var(--red);
color: var(--white);
font-size: 0.65rem;
font-weight: 700;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
}
.cart-count.visible {
opacity: 1;
transform: scale(1);
}
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 5px;
}
.menu-toggle span {
width: 25px;
height: 2px;
background: var(--white);
transition: all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.hero {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://1s4oyld5dc.ucarecd.net/a5c2aae8-2b90-4f15-ac3f-bb8c48fe47dc/') center/cover no-repeat;
transform: scale(1.1);
animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
from { transform: scale(1.1); }
to { transform: scale(1); }
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.6) 50%, var(--black) 100%);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
padding: 0 20px;
}
.hero-badge {
display: inline-block;
padding: 8px 24px;
border: 1px solid var(--red);
color: var(--red);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 30px;
opacity: 0;
animation: fadeUp 1s ease 0.5s forwards;
}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 900;
line-height: 1;
margin-bottom: 25px;
opacity: 0;
animation: fadeUp 1s ease 0.7s forwards;
}
.hero-title .accent {
color: var(--red);
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--gray);
font-weight: 300;
letter-spacing: 3px;
margin-bottom: 50px;
opacity: 0;
animation: fadeUp 1s ease 0.9s forwards;
}
.hero-btns {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 1s ease 1.1s forwards;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
.btn-primary {
padding: 16px 48px;
background: var(--red);
color: var(--white);
border: 2px solid var(--red);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.4s ease;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
background: var(--red-dark);
border-color: var(--red-dark);
transform: translateY(-2px);
box-shadow: 0 10px 40px rgba(230, 57, 70, 0.3);
}
.btn-secondary {
padding: 16px 48px;
background: transparent;
color: var(--white);
border: 2px solid var(--white);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.4s ease;
text-decoration: none;
display: inline-block;
}
.btn-secondary:hover {
background: var(--white);
color: var(--black);
transform: translateY(-2px);
}
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
opacity: 0;
animation: fadeUp 1s ease 1.5s forwards;
}
.scroll-indicator span {
font-size: 0.7rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gray);
}
.scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--red), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 1; height: 40px; }
50% { opacity: 0.3; height: 20px; }
}
.marquee-section {
padding: 25px 0;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
overflow: hidden;
background: var(--dark);
}
.marquee-track {
display: flex;
animation: marquee 30s linear infinite;
width: max-content;
}
.marquee-item {
display: flex;
align-items: center;
gap: 40px;
padding: 0 40px;
white-space: nowrap;
}
.marquee-item span {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gray);
}
.marquee-item .dot {
width: 6px;
height: 6px;
background: var(--red);
border-radius: 50%;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.section {
padding: 120px 60px;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 80px;
}
.section-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--red);
margin-bottom: 15px;
display: block;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 900;
margin-bottom: 20px;
}
.section-desc {
color: var(--gray);
font-size: 1rem;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
.products-section {
background: var(--black);
position: relative;
}
.products-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://1s4oyld5dc.ucarecd.net/a5c2aae8-2b90-4f15-ac3f-bb8c48fe47dc/') center/cover no-repeat;
opacity: 0.05;
pointer-events: none;
}
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.product-card {
position: relative;
background: var(--dark);
overflow: hidden;
cursor: pointer;
transition: transform 0.5s ease;
border: 1px solid rgba(255,255,255,0.03);
}
.product-card:hover {
transform: translateY(-10px);
}
.product-image-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
background: #1a1a1a;
}
.product-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.product-card:hover .product-image-wrap img {
transform: scale(1.08);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.9) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.product-card:hover .product-overlay {
opacity: 1;
}
.product-tag {
position: absolute;
top: 20px;
left: 20px;
padding: 6px 14px;
color: var(--white);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 2;
}
.product-tag.new { background: #4a6cf7; }
.product-tag.bestseller { background: #6c5ce7; }
.product-tag.limited { background: #e63946; }
.product-bottom-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 25px 20px;
background: linear-gradient(180deg, transparent, rgba(10,10,10,0.95));
opacity: 0;
transform: translateY(10px);
transition: all 0.4s ease;
z-index: 2;
}
.product-card:hover .product-bottom-overlay {
opacity: 1;
transform: translateY(0);
}
.try-online-btn {
width: 100%;
padding: 12px;
background: var(--red);
color: var(--white);
border: none;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 6px;
margin-bottom: 12px;
font-family: 'Inter', sans-serif;
}
.try-online-btn:hover {
background: var(--red-dark);
box-shadow: 0 5px 20px rgba(230, 57, 70, 0.4);
}
.product-info {
padding: 25px;
}
.product-category {
font-size: 0.7rem;
color: var(--gray);
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 8px;
}
.product-name {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 0.5px;
}
.product-price {
display: flex;
align-items: center;
gap: 12px;
}
.price-current {
font-size: 1.3rem;
font-weight: 800;
color: var(--white);
}
.price-old {
font-size: 0.95rem;
color: var(--gray);
text-decoration: line-through;
}
.product-sizes {
display: flex;
gap: 8px;
margin-top: 15px;
flex-wrap: wrap;
}
.size-option {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.15);
font-size: 0.7rem;
font-weight: 600;
color: var(--gray);
cursor: pointer;
transition: all 0.3s ease;
background: transparent;
}
.size-option:hover, .size-option.active {
border-color: var(--red);
color: var(--red);
background: rgba(230, 57, 70, 0.1);
}
.features-section {
background: var(--dark);
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
max-width: 1400px;
margin: 0 auto;
}
.feature-card {
text-align: center;
padding: 50px 30px;
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--red);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card:hover {
border-color: rgba(230, 57, 70, 0.2);
background: rgba(230, 57, 70, 0.03);
}
.feature-icon {
width: 60px;
height: 60px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
}
.feature-icon svg {
width: 40px;
height: 40px;
fill: none;
stroke: var(--red);
stroke-width: 1.5;
}
.feature-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 12px;
letter-spacing: 1px;
}
.feature-desc {
font-size: 0.85rem;
color: var(--gray);
line-height: 1.7;
}
.newsletter-section {
background: var(--dark);
text-align: center;
}
.newsletter-form {
display: flex;
max-width: 600px;
margin: 0 auto;
gap: 0;
}
.newsletter-form input {
flex: 1;
padding: 18px 25px;
background: var(--black);
border: 1px solid rgba(255,255,255,0.1);
color: var(--white);
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color 0.3s ease;
}
.newsletter-form input::placeholder {
color: var(--gray);
}
.newsletter-form input:focus {
border-color: var(--red);
}
.newsletter-form button {
padding: 18px 40px;
background: var(--red);
color: var(--white);
border: none;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s ease;
font-family: 'Inter', sans-serif;
}
.newsletter-form button:hover {
background: var(--red-dark);
}
footer {
background: var(--black);
padding: 80px 60px 40px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
max-width: 1400px;
margin: 0 auto 60px;
}
.footer-brand .logo-img-footer {
height: 80px;
width: auto;
display: block;
margin-bottom: 20px;
}
.footer-brand p {
color: var(--gray);
font-size: 0.9rem;
line-height: 1.8;
margin-bottom: 25px;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.1);
color: var(--gray);
transition: all 0.3s ease;
text-decoration: none;
}
.social-links a:hover {
border-color: var(--red);
color: var(--red);
background: rgba(230, 57, 70, 0.1);
}
.social-links a svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.footer-col h4 {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 25px;
color: var(--white);
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 12px;
}
.footer-col ul li a {
color: var(--gray);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.3s ease;
}
.footer-col ul li a:hover {
color: var(--red);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,0.05);
max-width: 1400px;
margin: 0 auto;
}
.footer-bottom p {
color: var(--gray);
font-size: 0.8rem;
}
.payment-methods {
display: flex;
gap: 15px;
align-items: center;
}
.payment-methods span {
color: var(--gray);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 1px;
}
.cart-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.cart-overlay.active {
opacity: 1;
visibility: visible;
}
.cart-sidebar {
position: fixed;
top: 0;
right: -450px;
width: 450px;
max-width: 90vw;
height: 100%;
background: var(--dark);
z-index: 2001;
transition: right 0.4s ease;
display: flex;
flex-direction: column;
}
.cart-sidebar.active {
right: 0;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cart-header h3 {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
.cart-close {
background: none;
border: none;
color: var(--white);
cursor: pointer;
padding: 5px;
transition: color 0.3s ease;
}
.cart-close:hover {
color: var(--red);
}
.cart-close svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: 20px 30px;
}
.cart-item {
display: flex;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
animation: cartItemIn 0.3s ease;
}
@keyframes cartItemIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.cart-item-img {
width: 80px;
height: 100px;
object-fit: cover;
flex-shrink: 0;
border-radius: 4px;
}
.cart-item-details {
flex: 1;
}
.cart-item-name {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 5px;
}
.cart-item-size {
font-size: 0.75rem;
color: var(--gray);
margin-bottom: 10px;
}
.cart-item-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.qty-control {
display: flex;
align-items: center;
border: 1px solid rgba(255,255,255,0.1);
}
.qty-btn {
width: 32px;
height: 32px;
background: transparent;
border: none;
color: var(--white);
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.qty-btn:hover {
background: rgba(255,255,255,0.1);
}
.qty-value {
width: 32px;
text-align: center;
font-size: 0.85rem;
font-weight: 600;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(255,255,255,0.1);
height: 32px;
line-height: 32px;
}
.cart-item-price {
font-weight: 700;
font-size: 0.95rem;
}
.cart-item-remove {
background: none;
border: none;
color: var(--gray);
cursor: pointer;
font-size: 0.75rem;
transition: color 0.3s ease;
margin-top: 8px;
font-family: 'Inter', sans-serif;
}
.cart-item-remove:hover {
color: var(--red);
}
.cart-empty {
text-align: center;
padding: 60px 20px;
color: var(--gray);
}
.cart-empty svg {
width: 60px;
height: 60px;
fill: none;
stroke: var(--gray);
stroke-width: 1;
margin-bottom: 20px;
}
.cart-empty p {
font-size: 1rem;
margin-bottom: 10px;
}
.cart-footer {
padding: 30px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.cart-total {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cart-total span:first-child {
font-size: 0.85rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gray);
}
.cart-total span:last-child {
font-size: 1.4rem;
font-weight: 800;
}
.checkout-btn {
width: 100%;
padding: 18px;
background: var(--red);
color: var(--white);
border: none;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.checkout-btn:hover {
background: var(--red-dark);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(230, 57, 70, 0.3);
}
.checkout-btn:active {
transform: translateY(0);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.85);
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
padding: 20px;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background: var(--dark);
max-width: 950px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
transform: scale(0.9);
transition: transform 0.4s ease;
}
.modal-overlay.active .modal {
transform: scale(1);
}
.modal-close {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0,0,0,0.5);
border: none;
color: var(--white);
cursor: pointer;
z-index: 10;
padding: 8px;
border-radius: 50%;
transition: all 0.3s ease;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
background: var(--red);
}
.modal-close svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.modal-image {
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
}
.modal-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modal-tag {
position: absolute;
top: 20px;
left: 20px;
padding: 6px 14px;
background: var(--red);
color: var(--white);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 2;
border-radius: 4px;
}
.modal-content {
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.modal-category {
font-size: 0.7rem;
color: var(--gray);
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 10px;
}
.modal-name {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
margin-bottom: 15px;
}
.modal-price-row {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.modal-price {
font-size: 1.8rem;
font-weight: 800;
}
.modal-price-old {
font-size: 1.1rem;
color: var(--gray);
text-decoration: line-through;
}
.modal-desc {
color: var(--gray);
font-size: 0.9rem;
line-height: 1.8;
margin-bottom: 25px;
}
.modal-features {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 25px;
padding: 20px;
background: rgba(255,255,255,0.03);
border-radius: 8px;
}
.modal-feature {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
color: var(--gray);
}
.modal-feature svg {
width: 16px;
height: 16px;
fill: none;
stroke: var(--red);
stroke-width: 2;
flex-shrink: 0;
}
.modal-sizes {
margin-bottom: 25px;
}
.modal-sizes label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 12px;
display: block;
}
.modal-size-options {
display: flex;
gap: 10px;
}
.modal-size-btn {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.15);
font-size: 0.8rem;
font-weight: 600;
color: var(--gray);
cursor: pointer;
transition: all 0.3s ease;
background: transparent;
}
.modal-size-btn:hover, .modal-size-btn.selected {
border-color: var(--red);
color: var(--red);
background: rgba(230, 57, 70, 0.1);
}
.modal-actions {
display: flex;
gap: 12px;
}
.modal-add-btn {
flex: 1;
padding: 16px;
background: var(--red);
color: var(--white);
border: none;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.modal-add-btn:hover {
background: var(--red-dark);
box-shadow: 0 5px 20px rgba(230, 57, 70, 0.4);
}
.modal-add-btn:active {
transform: scale(0.98);
}
.modal-try-btn {
padding: 16px 24px;
background: transparent;
color: var(--white);
border: 2px solid var(--red);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
display: flex;
align-items: center;
gap: 8px;
}
.modal-try-btn:hover {
background: rgba(230, 57, 70, 0.1);
}
.modal-try-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--dark);
border: 1px solid var(--red);
padding: 16px 30px;
z-index: 5000;
display: flex;
align-items: center;
gap: 12px;
transition: transform 0.4s ease;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.toast.show {
transform: translateX(-50%) translateY(0);
}
.toast svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--red);
stroke-width: 2;
flex-shrink: 0;
}
.toast span {
font-size: 0.85rem;
font-weight: 500;
}
.reveal {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10,10,10,0.98);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
}
.mobile-menu nav {
flex-direction: column;
gap: 30px;
}
.mobile-menu nav a {
font-size: 1.5rem;
letter-spacing: 5px;
}
@media (max-width: 1024px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
header {
padding: 15px 25px;
}
header.scrolled {
padding: 10px 25px;
}
.section {
padding: 80px 25px;
}
nav {
display: none;
}
.menu-toggle {
display: flex;
}
.products-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
}
.features-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}
.modal {
grid-template-columns: 1fr;
}
.modal-image {
aspect-ratio: 4/3;
}
.modal-content {
padding: 30px 25px;
}
.modal-actions {
flex-direction: column;
}
.newsletter-form {
flex-direction: column;
}
.newsletter-form button {
width: 100%;
}
.cursor {
display: none;
}
.logo-img {
height: 70px;
}
header.scrolled .logo-img {
height: 55px;
}
.logo-text {
font-size: 0.7rem;
line-height: 1.2;
}
.logo-wrapper {
gap: 12px;
}
.footer-brand .logo-img-footer {
height: 60px;
}
}

/* ==================== CLOZLY IFRAME INTEGRATION ==================== */
#clozly-preview-wrapper {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 4500; /* Поверх всего */
    height: 80vh;  /* Ровно 40% от высоты экрана на ПК */
    aspect-ratio: 420 / 740; /* Железные пропорции из твоего примера */
    display: none; /* Контролируется через JS (flex / none) */
    flex-direction: column;
    align-items: flex-end; /* Выравнивает кнопку по правому краю фрейма */
}

#preview-container {
    border: 8px solid #1a1a1a; 
    border-radius: 40px; 
    width: 105%;
    height: 100%;
    overflow: hidden; 
    position: relative; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
    background: #000;
}

#tryon-preview-iframe {
    width: 100%; 
    height: 100%; 
    border: none;
    display: block;
}

#clozly-mobile-close {
    display: flex;
    position: static; /* Кнопка идет в потоке над виджетом */
    margin-bottom: 12px; /* Отступ от крестика до фрейма */
    
    width: 44px;
    height: 44px;
    background: #5a5a5a; /* Белый круг для максимальной заметности */
    border: none;
    color: #d3d3d3; /* Сочный красный цвет бренда */
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(121, 121, 121, 0.4); /* Красное неоновое свечение */
    z-index: 2600;
    transition: transform 0.2s ease, opacity 0.2s ease;
    line-height: 0;            /* Сбрасываем базовую высоту строки браузера */
    padding-bottom: 4px;
}

#clozly-mobile-close:hover {
    transform: scale(1.08);
}

#clozly-mobile-close:active {
    transform: scale(0.95);
}
/* ==================== НАСТРОЙКИ ДЛЯ МОБИЛКИ ==================== */
@media (max-width: 500px) {
    #clozly-preview-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        aspect-ratio: auto;
        
        background: rgba(0, 0, 0, 0.85); 
        backdrop-filter: blur(5px);
        
        display: none; /* Управляется через JS (flex / none) */
        flex-direction: column;
        justify-content: center;
        
        /* МЕНЯЕМ ТУТ: Выравниваем всё содержимое (кнопку и виджет) по правому краю */
        align-items: flex-end; 
        
        /* Отступы по бокам, чтобы виджет и кнопка не прижимались вплотную к краям экрана */
        padding: 20px;
    }

    /* Стиль яркого вынесенного крестика (теперь он справа сверху виджета) */
    #clozly-mobile-close {
        display: flex;
        position: static; /* Кнопка по-прежнему над виджетом в потоке */
        margin-bottom: 15px; /* Отступ от крестика до фрейма */
        
        /* Смещаем кнопку чуть правее, чтобы она идеально встала по одной линии с правым краем телефона */
        margin-right: 5%; 
        
        width: 46px;
        height: 46px;
        background: #5a5a5a; 
        border: none;
        color: #d3d3d3; 
        font-size: 2rem; 
        font-weight: 700;
        border-radius: 50%;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(121, 121, 121, 0.4); 
        z-index: 2600;
        transition: transform 0.2s ease;
        line-height: 0;            /* Сбрасываем базовую высоту строки браузера */
        padding-bottom: 4px;
    }
    
    #clozly-mobile-close:active {
        transform: scale(0.9);
    }

    #preview-container {
        /* Центрируем сам телефон на экране, делая автоматические отступы слева и справа */
        margin-left: auto;
        margin-right: auto;
        
        width: 90%;
        max-width: 380px;
        height: auto;
        aspect-ratio: 420 / 720;
        border-width: 6px;
        border-radius: 32px;
    }
}

@media (max-width: 500px) and (max-aspect-ratio: 9/18) {
    #preview-container {
        /* Центрируем сам телефон на экране, делая автоматические отступы слева и справа */
        margin-left: auto;
        margin-right: auto;
        
        width: 90%;
        max-width: 380px;
        height: auto;
        aspect-ratio: 420 / 720;
        border-width: 6px;
        border-radius: 32px;
    }
}