.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-inverse{color:var(--fa-inverse,#fff)}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fontawesome/webfonts/fa-brands-400.subset.woff2) format("woff2")}.fa-brands,.fab{font-weight:400}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fontawesome/webfonts/fa-regular-400.subset.woff2) format("woff2")}.fa-regular,.far{font-weight:400}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fontawesome/webfonts/fa-solid-900.subset.woff2) format("woff2")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:swap;font-weight:400;src:url(/assets/fontawesome/webfonts/fa-brands-400.subset.woff2) format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-display:swap;font-weight:900;src:url(/assets/fontawesome/webfonts/fa-solid-900.subset.woff2) format("woff2")}@font-face{font-family:"Font Awesome 5 Free";font-display:swap;font-weight:400;src:url(/assets/fontawesome/webfonts/fa-regular-400.subset.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:swap;src:url(/assets/fontawesome/webfonts/fa-solid-900.subset.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:swap;src:url(/assets/fontawesome/webfonts/fa-brands-400.subset.woff2) format("woff2")}@font-face{font-family:"FontAwesome";font-display:swap;src:url(/assets/fontawesome/webfonts/fa-regular-400.subset.woff2) format("woff2");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:swap;src:url(/assets/fontawesome/webfonts/fa-v4compatibility.woff2) format("woff2");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-comments:before{content:"\f086"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-users:before{content:"\f0c0"}.fa-chevron-up:before{content:"\f077"}.fa-stopwatch:before{content:"\f2f2"}.fa-bookmark:before{content:"\f02e"}.fa-bullseye:before{content:"\f140"}.fa-user:before{content:"\f007"}.fa-money-bill-wave:before{content:"\f53a"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-star:before{content:"\f005"}.fa-fire:before{content:"\f06d"}.fa-headset:before{content:"\f590"}.fa-gift:before{content:"\f06b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-id-badge:before{content:"\f2c1"}.fa-palette:before{content:"\f53f"}.fa-vest:before{content:"\e085"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-file-contract:before{content:"\f56c"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-arrow-right:before{content:"\f061"}.fa-money-bill-transfer:before{content:"\e528"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-tags:before{content:"\f02c"}.fa-eye:before{content:"\f06e"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-arrow-left:before{content:"\f060"}.fa-ruler:before{content:"\f545"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-tag:before{content:"\f02b"}.fa-envelope:before{content:"\f0e0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-truck:before{content:"\f0d1"}.fa-vest-patches:before{content:"\e086"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-upload:before{content:"\f093"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-receipt:before{content:"\f543"}.fa-chevron-down:before{content:"\f078"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-user-shield:before{content:"\f505"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-store:before{content:"\f54e"}.fa-chevron-right:before{content:"\f054"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-award:before{content:"\f559"}.fa-cookie-bite:before{content:"\f564"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-check:before{content:"\f00c"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-paper-plane:before{content:"\f1d8"}.fa-instagram:before{content:"\f16d"}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}
body {
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: var(--fw-regular);
line-height: var(--lh-normal);
color: var(--text-body);
background: var(--gradient-body);
background-attachment: fixed;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.02) 2px,
rgba(0, 0, 0, 0.02) 4px
);
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9998;
background-image:
linear-gradient(rgba(194, 29, 39, 0.012) 1px, transparent 1px),
linear-gradient(90deg, rgba(194, 29, 39, 0.012) 1px, transparent 1px);
background-size: 60px 60px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--red-primary), var(--red-dark));
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--red-bright), var(--red-primary));
}
* {
scrollbar-width: thin;
scrollbar-color: var(--red-primary) var(--bg-primary);
}
a {
color: var(--silver);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--red-primary);
}
img {
max-width: 100%;
height: auto;
display: block;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
outline: none;
}
button {
cursor: pointer;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--text-primary);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
.container {
width: 100%;
max-width: var(--container-lg);
margin: 0 auto;
padding: 0 var(--space-lg);
}
.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.section {
padding: var(--space-5xl) 0;
position: relative;
}
.section:nth-child(odd) { background: var(--gradient-section-1); }
.section:nth-child(even) { background: var(--gradient-section-2); }
.section__header {
text-align: center;
margin-bottom: var(--space-3xl);
}
.section__tag {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--red-text, #ff4f5e);
padding: var(--space-sm) var(--space-lg);
background: var(--red-primary-dim);
border: 1px solid rgba(194, 29, 39, 0.25);
border-radius: var(--radius-full);
text-shadow: var(--glow-text-pink);
margin-bottom: var(--space-md);
}
.section__title {
font-size: var(--fs-3xl);
margin-bottom: var(--space-md);
background: var(--gradient-neon);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section__subtitle {
font-size: var(--fs-md);
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
line-height: var(--lh-relaxed);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
padding: 0.85rem 2rem;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
position: relative;
overflow: hidden;
}
.btn--primary {
color: #fff;
background: var(--red-primary);
box-shadow: var(--glow-pink-sm);
}
.btn--primary:hover {
background: var(--red-bright);
box-shadow: var(--glow-pink);
transform: translateY(-2px);
color: #fff;
}
.btn--outline {
color: var(--silver);
background: transparent;
border: 1px solid var(--silver);
box-shadow: var(--glow-cyan-sm);
}
.btn--outline:hover {
background: var(--silver-dim);
box-shadow: var(--glow-cyan);
transform: translateY(-2px);
color: var(--silver);
}
.btn--ghost {
color: var(--text-muted);
background: transparent;
border: 1px solid var(--border-light);
}
.btn--ghost:hover {
color: var(--text-primary);
border-color: var(--red-primary);
background: var(--red-primary-dim);
}
.btn--sm { padding: 0.5rem 1.2rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1rem 2.5rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn.loading { pointer-events: none; opacity: 0.7; }
.neon-link {
position: relative;
color: var(--silver);
text-decoration: none;
}
.neon-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--red-primary);
box-shadow: var(--glow-text-pink);
transition: width var(--transition-base);
}
.neon-link:hover::after { width: 100%; }
.glass {
background: rgba(14, 8, 8, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: var(--border-card);
border-radius: var(--radius-md);
}
.neon-divider {
width: 80px;
height: 3px;
background: var(--gradient-red);
border-radius: var(--radius-full);
margin: var(--space-lg) auto;
box-shadow: 0 0 10px rgba(194, 29, 39, 0.3);
}
.reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
opacity: 0;
transform: translateX(40px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.revealed {
opacity: 1;
transform: translate(0);
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-neon-pink { color: var(--red-primary); text-shadow: var(--glow-text-pink); }
.text-neon-cyan { color: var(--silver); text-shadow: var(--glow-text-cyan); }
.text-gradient {
background: var(--gradient-neon);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-xl); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }
.d-flex { display: flex; }
.d-grid { display: grid; }
.gap-1 { gap: var(--space-sm); }
.gap-2 { gap: var(--space-md); }
.gap-3 { gap: var(--space-lg); }
.breadcrumbs {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-sm);
color: var(--text-dim);
padding: var(--space-md) 0;
}
.breadcrumbs a {
color: var(--text-muted);
transition: color var(--transition-fast);
}
.breadcrumbs a:hover { color: var(--silver); }
.breadcrumbs span { color: var(--red-text, #ff4f5e); }
.page-hero {
padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
background: var(--gradient-section-3);
text-align: center;
position: relative;
}
.page-hero::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: var(--gradient-red);
opacity: 0.3;
}
.page-hero__title {
font-size: var(--fs-4xl);
margin-bottom: var(--space-sm);
background: var(--gradient-neon);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-hero__subtitle {
color: var(--text-muted);
font-size: var(--fs-md);
}
.alert {
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.alert--success {
background: rgba(46, 204, 113, 0.1);
border: 1px solid rgba(46, 204, 113, 0.3);
color: var(--accent-green);
}
.alert--error {
background: rgba(194, 29, 39, 0.1);
border: 1px solid rgba(194, 29, 39, 0.3);
color: var(--red-text, #ff4f5e);
}
.alert--info {
background: rgba(197, 197, 197, 0.08);
border: 1px solid rgba(197, 197, 197, 0.2);
color: var(--silver);
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
margin-top: var(--space-3xl);
}
.pagination__link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--bg-card);
border: var(--border-card);
color: var(--text-muted);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
transition: all var(--transition-fast);
}
.pagination__link:hover,
.pagination__link.active {
background: var(--red-primary);
color: #fff;
border-color: var(--red-primary);
box-shadow: var(--glow-pink-sm);
}
.empty-state {
text-align: center;
padding: var(--space-4xl) var(--space-lg);
}
.empty-state__icon {
font-size: var(--fs-5xl);
color: var(--text-dim);
margin-bottom: var(--space-lg);
}
.empty-state__title {
font-size: var(--fs-xl);
margin-bottom: var(--space-sm);
}
.empty-state__text {
color: var(--text-muted);
margin-bottom: var(--space-xl);
}
::selection {
background: rgba(194, 29, 39, 0.3);
color: var(--text-primary);
}
@media (max-width: 768px) {
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
.section { padding: var(--space-3xl) 0; }
.section__title { font-size: var(--fs-2xl); }
.page-hero__title { font-size: var(--fs-3xl); }
}
@media (max-width: 480px) {
h1 { font-size: var(--fs-2xl); }
.container { padding: 0 var(--space-md); }
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.form-group { margin-bottom: var(--space-lg); }
.form-group label {
display: block;
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-sm);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.85rem 1rem;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-body);
font-size: var(--fs-sm);
transition: all var(--transition-base);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.5); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--red-primary);
box-shadow: 0 0 15px rgba(194, 29, 39, 0.15), inset 0 0 15px rgba(194, 29, 39, 0.03);
background: rgba(255, 255, 255, 0.06);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8694' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.form-group select option { background: var(--bg-elevated); color: var(--text-body); }
@media (max-width: 768px) {
.form-row { grid-template-columns: 1fr; }
}
#toastContainer {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 10px;
}
.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-radius: 12px;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
color: #fff;
min-width: 280px;
max-width: 420px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transform: none;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: auto;
border: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
position: relative;
}
.toast.show {
transform: none;
opacity: 1;
}
.toast i:first-child {
font-size: 1.2rem;
flex-shrink: 0;
}
.toast span {
flex: 1;
line-height: 1.4;
}
.toast button {
background: none;
border: none;
color: rgba(255,255,255,0.6);
cursor: pointer;
padding: 4px;
font-size: 0.85rem;
transition: color 0.2s;
flex-shrink: 0;
}
.toast button:hover {
color: #fff;
}
.toast--success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
border-color: rgba(16, 185, 129, 0.3);
}
.toast--error {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(185, 28, 28, 0.95));
border-color: rgba(239, 68, 68, 0.3);
}
.toast--info {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(29, 78, 216, 0.95));
border-color: rgba(59, 130, 246, 0.3);
}
.toast--warning {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));
border-color: rgba(245, 158, 11, 0.3);
}
.toast::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: rgba(255,255,255,0.4);
animation: toastProgress 4s linear forwards;
}
@keyframes toastProgress {
from { width: 100%; }
to { width: 0%; }
}
@media (max-width: 480px) {
#toastContainer {
right: 10px;
left: 10px;
}
.toast {
min-width: unset;
max-width: unset;
}
}
.product-card__cart-btn {
width: 100%;
padding: 12px 16px;
background: transparent;
border: 1px solid var(--red-primary, #c21d27);
color: var(--red-primary, #c21d27);
border-radius: var(--radius-sm, 6px);
font-family: var(--font-heading, sans-serif);
font-size: var(--fs-sm, 0.875rem);
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.25s;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.product-card__cart-btn:hover {
background: var(--red-primary, #c21d27);
color: #fff;
box-shadow: 0 4px 20px rgba(194,29,39,0.3);
}
.product-card__cart-btn:active {
transform: scale(0.97);
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height, 70px) + 20px);
}
:focus-visible {
outline: 2px solid var(--red-primary, #c21d27);
outline-offset: 2px;
}
a { transition: color 0.2s ease; }
.skip-link {
position: absolute;
top: -100%;
left: 16px;
padding: 12px 24px;
background: var(--red-primary, #c21d27);
color: #fff;
border-radius: 0 0 6px 6px;
z-index: 10000;
font-weight: 600;
text-decoration: none;
transition: top 0.2s;
}
.skip-link:focus {
top: 0;
}
::selection {
background: rgba(194, 29, 39, 0.3);
color: var(--text-primary, #fff);
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@media (max-width: 768px) {
.btn, button, .navbar__link, .filter-link {
min-height: 44px;
}
}
#cc-banner {
background: rgba(2, 2, 2, 0.97) !important;
border-top: 2px solid var(--red-primary) !important;
box-shadow: 0 -4px 30px rgba(194, 29, 39, 0.15) !important;
font-family: var(--font-body) !important;
}
#cc-text {
color: var(--text-body) !important;
}
#cc-text a {
color: #ff5560 !important;
font-weight: 600;
}
#cc-accept {
background: var(--red-primary) !important;
border-radius: var(--radius-sm) !important;
font-family: var(--font-heading) !important;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.8rem !important;
}
#cc-accept:hover {
box-shadow: 0 0 20px rgba(194, 29, 39, 0.4) !important;
}
#cc-decline {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--border-light) !important;
border-radius: var(--radius-sm) !important;
color: var(--text-muted) !important;
font-family: var(--font-heading) !important;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 0.8rem !important;
}
#cc-decline:hover {
border-color: var(--red-primary) !important;
color: var(--text-primary) !important;
background: rgba(194, 29, 39, 0.08) !important;
}
.legal-page {
max-width: 800px;
margin: 0 auto;
padding: var(--space-3xl) 0 var(--space-5xl);
}
.legal-page__updated {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-md);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
color: var(--text-dim);
margin-bottom: var(--space-2xl);
}
.legal-page__updated i { color: var(--red-primary); }
.legal-page__section {
margin-bottom: var(--space-2xl);
}
.legal-page__section h2 {
font-family: var(--font-heading);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.legal-page__section h2 i {
color: var(--red-primary);
font-size: var(--fs-base);
}
.legal-page__section p {
color: var(--text-body);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-md);
}
.legal-page__section ul {
list-style: none;
padding: 0;
margin-bottom: var(--space-md);
}
.legal-page__section ul li {
position: relative;
padding-left: 1.5rem;
margin-bottom: var(--space-sm);
color: var(--text-body);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
}
.legal-page__section ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--red-primary);
}
.legal-page__section a {
color: var(--red-text, #ff4f5e);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-page__section a:hover {
color: var(--text-primary);
}
.legal-page__contact-box {
background: var(--gradient-card);
border: var(--border-card);
border-radius: var(--radius-md);
padding: var(--space-xl);
margin-top: var(--space-xl);
}
.legal-page__contact-box h3 {
font-size: var(--fs-md);
color: var(--text-primary);
margin-bottom: var(--space-md);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.legal-page__contact-box h3 i { color: var(--red-primary); }
.legal-page__contact-box p {
color: var(--text-muted);
font-size: var(--fs-sm);
margin-bottom: var(--space-xs);
}
.legal-page__contact-box a {
color: var(--red-text, #ff4f5e);
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.shake { animation: shake 0.5s ease; }
.shake { animation: shake 0.5s ease; }
@media (max-width: 400px) {
.container { padding: 0 var(--space-sm); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
.section { padding: var(--space-xl) 0; }
.section__title { font-size: var(--fs-lg); }
.section__subtitle { font-size: var(--fs-xs); }
.btn {
padding: 10px 16px;
font-size: var(--fs-xs);
}
.page-hero {
padding: calc(var(--header-height) + var(--space-lg)) 0 var(--space-md);
}
.page-hero__title { font-size: var(--fs-2xl); }
.page-hero__subtitle { font-size: var(--fs-xs); }
.form-group input,
.form-group textarea,
.form-group select {
padding: 0.7rem 0.8rem;
font-size: var(--fs-xs);
}
.legal-page { padding: var(--space-lg); }
.legal-page__section h2 { font-size: var(--fs-base); }
.legal-page__section p,
.legal-page__section ul li { font-size: var(--fs-xs); }
#toastContainer { top: 8px; right: 6px; left: 6px; }
.toast { padding: 10px 14px; font-size: 0.8rem; gap: 8px; }
.toast i:first-child { font-size: 1rem; }
}
@media (max-width: 480px) {
.product-gallery__thumbs { gap: var(--space-xs); }
.product-gallery__thumb { width: 50px; height: 50px; }
.product-info__title { font-size: var(--fs-xl); }
.product-info__price { font-size: var(--fs-2xl); }
.product-options { gap: var(--space-sm); }
.product-option__values { gap: var(--space-xs); }
}
@media (max-width: 480px) {
.cart-card { padding: var(--space-md); }
.cart-card__image { width: 60px; height: 60px; }
.cart-summary { padding: var(--space-lg); }
.cart-summary__row { font-size: var(--fs-sm); }
.order-success__icon { font-size: 3.5rem; }
.order-success__title { font-size: var(--fs-2xl); }
.order-success__number { font-size: var(--fs-base); }
}
@media (max-width: 480px) {
.checkout-form-card { padding: var(--space-md); }
.checkout-order-summary { padding: var(--space-md); }
.payment-option { padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 480px) {
.custom-builder { padding-top: calc(var(--header-height) + var(--space-xl)); }
.custom-preview { padding: var(--space-md); }
.custom-preview__canvas-wrap { max-width: 100%; }
.custom-form { padding: var(--space-md); }
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.legal-page__contact-box--top { margin: 0 0 var(--space-xl); }
.legal-obrazac {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-left: 4px solid var(--red-primary);
border-radius: var(--radius-md);
padding: var(--space-lg);
color: var(--text-body);
font-size: var(--fs-sm);
line-height: 1.7;
overflow-wrap: anywhere;
}
.legal-obrazac p { margin: 0 0 var(--space-sm); color: var(--text-body); }
.legal-obrazac__naslov { font-weight: var(--fw-bold); color: var(--text-primary) !important; letter-spacing: .02em; }
.legal-obrazac__napomena { color: var(--text-muted) !important; font-size: var(--fs-xs); }
.legal-obrazac__dodatak { margin-top: var(--space-md) !important; padding-top: var(--space-sm); border-top: 1px dashed var(--border-subtle); color: var(--text-muted) !important; }
.contact-form__privacy, .custom-quote__privacy { margin-top: var(--space-sm); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; }
.contact-form__privacy a, .custom-quote__privacy a { color: var(--silver); text-decoration: underline; text-underline-offset: 2px; }
html, body { overflow-x: clip; max-width: 100vw; }
img, video, iframe, picture, svg, embed, object { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }
* { box-sizing: border-box; }
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
z-index: 500;
isolation: isolate;
background: linear-gradient(180deg, rgba(2, 2, 2, 0.96), rgba(2, 2, 2, 0.82));
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
transition: background-color var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.navbar.scrolled {
background: rgba(2, 2, 2, 0.98);
border-bottom-color: rgba(194, 29, 39, 0.32);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container-lg);
margin: 0 auto;
padding: 0 var(--space-lg);
height: 100%;
}
.navbar__brand {
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
z-index: 500;
min-height: 44px;
}
.navbar__logo-icon {
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.navbar__logo-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.navbar__logo-text {
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: var(--fs-lg);
color: var(--text-primary);
letter-spacing: var(--ls-wider);
line-height: 1;
}
.navbar__logo-text span {
display: block;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-widest);
color: var(--red-primary);
text-shadow: var(--glow-text-pink);
margin-top: 2px;
}
.navbar__menu {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.navbar__link {
position: relative;
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-muted);
padding: var(--space-sm) var(--space-md);
transition: color var(--transition-fast);
text-decoration: none;
display: inline-flex;
align-items: center;
}
.navbar__link i {
font-size: 0.5rem;
margin-right: 2px;
opacity: 0;
transition: opacity var(--transition-fast);
}
.navbar__link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--red-primary);
box-shadow: var(--glow-text-pink);
transition: width var(--transition-base);
}
.navbar__link:hover,
.navbar__link.active {
color: var(--text-primary);
}
.navbar__link:hover i,
.navbar__link.active i {
opacity: 1;
color: var(--red-primary);
}
.navbar__link:hover::after,
.navbar__link.active::after {
width: 60%;
}
.navbar__actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
.navbar__cart {
position: relative;
color: var(--text-muted);
font-size: var(--fs-lg);
transition: color var(--transition-fast), text-shadow var(--transition-fast), transform var(--transition-fast);
padding: var(--space-sm);
}
.navbar__cart:hover {
color: var(--red-primary);
text-shadow: var(--glow-text-pink);
}
.navbar__cart-badge {
position: absolute;
top: -6px;
right: -14px;
background: var(--red-primary);
color: #fff;
font-size: 0.55rem;
font-weight: var(--fw-bold);
min-width: 18px;
padding: 0 5px;
height: 18px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: var(--glow-pink-sm);
line-height: 1;
}
.navbar__cta {
padding: 0.6rem 1.4rem;
font-size: var(--fs-xs);
}
.navbar__hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
padding: 10px;
z-index: 500;
}
.navbar__hamburger span {
display: block;
width: 100%;
height: 2px;
background: var(--text-primary);
border-radius: var(--radius-full);
transition: transform var(--transition-base), opacity var(--transition-fast), background-color var(--transition-base);
}
.navbar__hamburger.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
background: var(--red-primary);
}
.navbar__hamburger.active span:nth-child(2) {
opacity: 0;
transform: translateX(-10px);
}
.navbar__hamburger.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
background: var(--silver);
}
.mobile-overlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(2, 2, 2, 0.8);
backdrop-filter: blur(4px);
z-index: var(--z-overlay);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--transition-base), visibility 0s linear var(--transition-base);
}
.mobile-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
@media (max-width: 992px) {
.navbar__hamburger { display: flex; }
.navbar__menu {
position: fixed;
top: 0;
right: 0;
width: min(86vw, 320px);
height: 100vh;
height: 100dvh;
flex-direction: column;
align-items: flex-start;
padding: calc(var(--header-height) + var(--space-xl)) max(var(--space-xl), env(safe-area-inset-right)) max(var(--space-xl), env(safe-area-inset-bottom));
background: #0a0606;
border-left: 1px solid rgba(194, 29, 39, 0.34);
z-index: var(--z-overlay);
transform: translateX(100%);
visibility: hidden;
pointer-events: none;
transition: transform var(--transition-base), visibility 0s linear var(--transition-base);
gap: var(--space-xs);
overflow-y: auto;
overscroll-behavior: contain;
contain: layout paint;
}
.navbar__menu.open {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.navbar__link {
width: 100%;
padding: var(--space-md) var(--space-sm);
font-size: var(--fs-base);
border-bottom: 1px solid var(--border-subtle);
}
.navbar__link i { opacity: 1; color: var(--red-primary); }
.navbar__link::after { display: none; }
.navbar__cta { display: none; }
}
@media (max-width: 480px) {
.navbar__logo-text { font-size: var(--fs-base); }
}
body.menu-open {
overflow: hidden !important;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.mobile-overlay {
z-index: 398 !important;
}
.mobile-overlay.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 398;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.navbar__menu.open {
z-index: 400 !important;
}
.navbar__hamburger {
z-index: 401 !important;
}
@media (prefers-reduced-motion: reduce) {
.navbar,
.navbar__menu,
.mobile-overlay,
.navbar__hamburger span {
transition: none;
}
}
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(ellipse at 30% 20%, rgba(194, 29, 39, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(88, 16, 20, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(197, 197, 197, 0.03) 0%, transparent 70%),
var(--bg-primary);
animation: hero-bg-shift 15s ease-in-out infinite alternate;
}
@keyframes hero-bg-shift {
0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
100% { background-position: 100% 100%, 0% 0%, 50% 50%; }
}
.hero__grid {
position: absolute;
bottom: 0;
left: -50%;
width: 200%;
height: 60%;
background:
linear-gradient(90deg, rgba(194, 29, 39, 0.04) 1px, transparent 1px),
linear-gradient(0deg, rgba(194, 29, 39, 0.04) 1px, transparent 1px);
background-size: 80px 80px;
transform: perspective(500px) rotateX(60deg);
transform-origin: bottom center;
mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 70%);
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 70%);
}
.hero__content {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 2;
text-align: center;
padding: var(--space-xl);
max-width: 900px;
}
.hero__logo {
width: 120px;
height: 120px;
margin: 0 auto var(--space-xl);
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 40px rgba(194, 29, 39, 0.3), 0 0 80px rgba(194, 29, 39, 0.1);
border: 2px solid rgba(194, 29, 39, 0.3);
}
.hero__logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.hero__tag {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--red-text, #ff4f5e);
padding: var(--space-sm) var(--space-lg);
background: rgba(194, 29, 39, 0.08);
border: 1px solid rgba(194, 29, 39, 0.25);
border-radius: var(--radius-full);
margin-bottom: var(--space-xl);
text-shadow: var(--glow-text-pink);
}
.hero__title {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
margin-bottom: var(--space-lg);
line-height: var(--lh-tight);
}
.hero__keyword {
display: block;
max-width: 24ch;
margin: .75rem auto 0;
font-size: clamp(1.15rem, 2.2vw, 1.85rem);
font-weight: 600;
letter-spacing: 0;
line-height: 1.25;
}
.glitch {
position: relative;
display: inline-block;
color: #fff;
-webkit-text-fill-color: #fff;
text-shadow: 0 0 18px rgba(194, 29, 39, 0.45);
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.85;
pointer-events: none;
}
.glitch::before {
color: var(--red-primary);
-webkit-text-fill-color: var(--red-primary);
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
color: var(--silver);
-webkit-text-fill-color: var(--silver);
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.glitch:hover::before { animation: glitch-1 450ms linear; }
.glitch:hover::after { animation: glitch-2 450ms linear; }
}
@keyframes glitch-1 {
0%, 90%, 100% { transform: none; }
92% { transform: translateX(-3px) skewX(-1deg); }
94% { transform: translateX(3px) skewX(1deg); }
96% { transform: translateX(-2px); }
}
@keyframes glitch-2 {
0%, 88%, 100% { transform: none; }
90% { transform: translateX(3px) skewX(1deg); }
93% { transform: translateX(-3px); }
95% { transform: translateX(2px) skewX(-1deg); }
}
.hero__subtitle {
font-size: var(--fs-lg);
color: var(--text-muted);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-2xl);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero__subtitle a {
color: var(--text-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.hero__subtitle a:hover { color: var(--red-text, #ff4f5e); }
.hero__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
margin-bottom: var(--space-3xl);
flex-wrap: wrap;
}
.hero__stats {
display: flex;
justify-content: center;
gap: var(--space-3xl);
flex-wrap: wrap;
}
.hero__stat { text-align: center; }
.hero__stat-number {
display: block;
font-family: var(--font-heading);
font-size: var(--fs-3xl);
font-weight: var(--fw-bold);
color: var(--red-primary);
text-shadow: var(--glow-text-pink);
letter-spacing: var(--ls-tight);
}
.hero__stat-label {
font-size: var(--fs-xs);
color: var(--text-dim);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: var(--fw-medium);
}
.hero__scroll {
position: absolute;
bottom: var(--space-xl);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
color: var(--text-dim);
font-size: var(--fs-xs);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
text-decoration: none;
animation: bounce 2s infinite;
z-index: 2;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-8px); }
60% { transform: translateX(-50%) translateY(-4px); }
}
.products__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.product-card {
position: relative;
background: var(--gradient-card);
border: var(--border-card);
border-radius: var(--radius-md);
overflow: hidden;
transition: all var(--transition-base);
}
.product-card::before {
content: '';
position: absolute;
inset: -2px;
border-radius: calc(var(--radius-md) + 2px);
background: var(--gradient-neon);
background-size: 300% 300%;
z-index: -1;
opacity: 0;
transition: opacity var(--transition-base);
animation: gradient-border 16s linear infinite;
}
@keyframes gradient-border {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.product-card:hover {
transform: translateY(-8px);
border-color: transparent;
}
.product-card:hover::before { opacity: 1; }
.product-card__badge-top {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: #fff;
background: var(--gradient-red);
border-radius: var(--radius-full);
margin-bottom: var(--space-sm);
}
.product-card__image {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.product-card__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--text-dim);
}
.product-card:nth-child(1) .product-card__image-placeholder { background: linear-gradient(135deg, #1a0808, #0a0a12); }
.product-card:nth-child(2) .product-card__image-placeholder { background: linear-gradient(135deg, #0a0a10, #120808); }
.product-card:nth-child(3) .product-card__image-placeholder { background: linear-gradient(135deg, #0e0a08, #080a10); }
.product-card:nth-child(4) .product-card__image-placeholder { background: linear-gradient(135deg, #100a0a, #0a1010); }
.product-card:nth-child(5) .product-card__image-placeholder { background: linear-gradient(135deg, #120808, #0a0e10); }
.product-card:nth-child(6) .product-card__image-placeholder { background: linear-gradient(135deg, #080a10, #10100a); }
.product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.product-card:hover .product-card__image img {
transform: scale(1.05);
}
.product-card__badge {
position: absolute;
top: var(--space-md);
left: var(--space-md);
padding: 4px 12px;
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: #fff;
background: var(--red-primary);
border-radius: var(--radius-full);
box-shadow: var(--glow-pink-sm);
z-index: 2;
}
.product-card__actions {
position: absolute;
top: var(--space-md);
right: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
transform: translateX(60px);
opacity: 0;
transition: all var(--transition-base);
z-index: 2;
}
.product-card:hover .product-card__actions {
transform: translateX(0);
opacity: 1;
}
.product-card__action-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(2, 2, 2, 0.8);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-body);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-sm);
cursor: pointer;
transition: all var(--transition-fast);
}
.product-card__action-btn:hover {
background: var(--red-primary);
color: #fff;
border-color: var(--red-primary);
box-shadow: var(--glow-pink-sm);
}
.product-card__info { padding: var(--space-lg); }
.product-card__category {
display: block;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--silver);
margin-bottom: var(--space-xs);
}
.product-card__name {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
margin-bottom: var(--space-sm);
transition: color var(--transition-fast);
}
.product-card:hover .product-card__name { color: var(--red-primary); }
.product-card__price {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.product-card__price-current {
font-family: var(--font-heading);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: #ff5560;
text-shadow: var(--glow-text-pink);
}
.product-card__price-old {
font-size: var(--fs-sm);
color: var(--text-dim);
text-decoration: line-through;
}
.product-card__cart-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
padding: 0.7rem;
margin-top: var(--space-md);
background: rgba(194, 29, 39, 0.08);
border: 2px solid var(--red-primary);
color: var(--red-text, #ff4f5e);
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-base);
}
.product-card:hover .product-card__cart-btn {
background: rgba(194, 29, 39, 0.15);
border-color: #e8323d;
color: #e8323d;
box-shadow: 0 0 12px rgba(194, 29, 39, 0.2);
}
.product-card__cart-btn:hover {
background: var(--red-primary);
color: #fff;
border-color: var(--red-primary);
box-shadow: var(--glow-pink-sm);
}
.categories__strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.category-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding: var(--space-2xl) var(--space-lg);
background: var(--gradient-card);
border: var(--border-card);
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
text-align: center;
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-red);
transform: scaleX(0);
transition: transform var(--transition-base);
}
.category-card:hover::before { transform: scaleX(1); }
.category-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow-md);
}
.category-card__icon {
font-size: var(--fs-3xl);
color: var(--red-primary);
transition: all var(--transition-base);
}
.category-card:hover .category-card__icon {
color: var(--silver);
text-shadow: var(--glow-text-cyan);
transform: scale(1.1);
}
.category-card__name {
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.category-card__count {
font-size: var(--fs-xs);
color: var(--text-dim);
letter-spacing: var(--ls-wide);
}
.why-us__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
}
.feature-card {
position: relative;
text-align: center;
padding: var(--space-2xl) var(--space-lg);
background: var(--gradient-card);
border: var(--border-card);
border-radius: var(--radius-md);
transition: all var(--transition-base);
overflow: hidden;
}
.feature-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-md);
padding: 1px;
background: var(--gradient-neon);
background-size: 300% 300%;
animation: gradient-border 16s linear infinite;
-webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--transition-base);
pointer-events: none;
}
.feature-card:hover::after { opacity: 1; }
.feature-card:hover { transform: translateY(-5px); }
.feature-card__icon {
width: 60px;
height: 60px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xl);
margin: 0 auto var(--space-lg);
transition: all var(--transition-base);
}
.feature-card:nth-child(1) .feature-card__icon { background: var(--red-primary-dim); color: var(--red-primary); }
.feature-card:nth-child(2) .feature-card__icon { background: var(--silver-dim); color: var(--silver); }
.feature-card:nth-child(3) .feature-card__icon { background: var(--red-dark-dim); color: var(--red-bright); }
.feature-card:nth-child(4) .feature-card__icon { background: rgba(212, 168, 83, 0.15); color: var(--accent-gold); }
.feature-card__title { font-size: var(--fs-md); margin-bottom: var(--space-sm); }
.feature-card__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-relaxed); }
.testimonials__slider {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.testimonial-card {
position: relative;
padding: var(--space-2xl);
background: var(--gradient-card);
border: var(--border-card);
border-radius: var(--radius-md);
transition: all var(--transition-base);
}
.testimonial-card:hover {
border-color: rgba(194, 29, 39, 0.2);
box-shadow: 0 0 30px rgba(194, 29, 39, 0.05);
transform: translateY(-3px);
}
.testimonial-card__stars {
display: flex;
gap: 3px;
margin-bottom: var(--space-md);
color: var(--accent-gold);
font-size: var(--fs-sm);
}
.testimonial-card__quote-icon {
font-size: var(--fs-2xl);
color: var(--red-primary);
opacity: 0.2;
margin-bottom: var(--space-md);
}
.testimonial-card__text {
font-size: var(--fs-sm);
color: var(--text-body);
line-height: var(--lh-relaxed);
margin-bottom: var(--space-xl);
font-style: italic;
}
.testimonial-card__author {
display: flex;
align-items: center;
gap: var(--space-md);
}
.testimonial-card__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gradient-red);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: #fff;
flex-shrink: 0;
}
.testimonial-card__author-name {
display: block;
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text-primary);
}
.testimonial-card__author-role {
font-size: var(--fs-xs);
color: var(--text-dim);
}
.contact-section {
padding: var(--space-5xl) 0;
background: var(--gradient-section-3);
}
.cta__box {
position: relative;
padding: var(--space-3xl);
background: var(--gradient-card);
border: var(--border-card);
border-radius: var(--radius-lg);
overflow: hidden;
}
.cta__box::before {
content: '';
position: absolute;
inset: -2px;
border-radius: calc(var(--radius-lg) + 2px);
background: var(--gradient-neon);
background-size: 300% 300%;
animation: gradient-border 16s linear infinite;
z-index: -1;
}
.cta__glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 50% 50%, rgba(194, 29, 39, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.cta__content {
position: relative;
z-index: 1;
text-align: center;
}
.cta__title { font-size: var(--fs-3xl); margin-bottom: var(--space-md); }
.cta__text { color: var(--text-muted); font-size: var(--fs-md); margin-bottom: var(--space-2xl); }
.contact-form {
max-width: 700px;
margin: 0 auto;
text-align: left;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.form-group { margin-bottom: var(--space-lg); }
.form-group label {
display: block;
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-sm);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.85rem 1rem;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-body);
font-size: var(--fs-sm);
transition: all var(--transition-base);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.5); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--red-primary);
box-shadow: 0 0 15px rgba(194, 29, 39, 0.15), inset 0 0 15px rgba(194, 29, 39, 0.03);
background: rgba(255, 255, 255, 0.06);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8694' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.form-group select option { background: var(--bg-elevated); color: var(--text-body); }
.contact-submit-btn { width: 100%; padding: 1rem; }
.form-status {
display: none;
text-align: center;
padding: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
margin-top: var(--space-md);
}
.form-status.success {
display: block;
background: rgba(46, 204, 113, 0.1);
border: 1px solid rgba(46, 204, 113, 0.3);
color: var(--accent-green);
}
.form-status.error {
display: block;
background: rgba(194, 29, 39, 0.1);
border: 1px solid var(--red-primary);
color: var(--red-text, #ff4f5e);
}
@media (max-width: 992px) {
.products__grid { grid-template-columns: repeat(2, 1fr); }
.categories__strip { grid-template-columns: repeat(3, 1fr); }
.why-us__grid { grid-template-columns: repeat(2, 1fr); }
.testimonials__slider { grid-template-columns: repeat(2, 1fr); }
.hero__stats { gap: var(--space-xl); }
}
@media (max-width: 768px) {
.categories__strip { grid-template-columns: repeat(2, 1fr); }
.testimonials__slider { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.hero__actions { flex-direction: column; }
.hero {
flex-direction: column;
justify-content: center;
padding-top: calc(var(--header-height) + var(--space-xl));
padding-bottom: var(--space-2xl);
min-height: 100vh;
}
.hero__content {
padding-bottom: var(--space-lg);
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero__scroll {
position: relative;
bottom: auto;
left: auto;
transform: none;
margin-top: auto;
padding-bottom: var(--space-lg);
}
.hero__logo { width: 90px; height: 90px; }
.hero__title { font-size: clamp(2rem, 8vw, 3.5rem); }
.hero__subtitle { font-size: var(--fs-base); }
.hero__stats { gap: var(--space-lg); }
.hero__stat-number { font-size: var(--fs-2xl); }
}
@media (max-width: 576px) {
.products__grid { grid-template-columns: 1fr; }
.categories__strip { grid-template-columns: 1fr; }
.why-us__grid { grid-template-columns: 1fr; }
.cta__box { padding: var(--space-xl); }
.hero__logo { width: 70px; height: 70px; margin-bottom: var(--space-md); }
.hero__tag { font-size: 10px; padding: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); }
.hero__title { font-size: clamp(1.8rem, 9vw, 2.8rem); margin-bottom: var(--space-md); }
.hero__subtitle { font-size: var(--fs-sm); margin-bottom: var(--space-lg); }
.hero__actions .btn { width: 100%; justify-content: center; }
.hero__stats { gap: var(--space-md); }
.hero__stat-number { font-size: var(--fs-xl); }
.hero__stat-label { font-size: 10px; }
.hero__scroll { font-size: 10px; }
.section__title { font-size: var(--fs-xl); }
.section__subtitle { font-size: var(--fs-sm); }
.section { padding: var(--space-2xl) 0; }
.feature-card { padding: var(--space-lg); }
.testimonial-card { padding: var(--space-lg); }
}
.cat-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.cat-tile {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
overflow: hidden;
border: var(--border-card);
text-decoration: none;
isolation: isolate;
}
.cat-tile__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: -2;
}
.cat-tile__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(2,2,2,0.12) 0%, rgba(2,2,2,0.55) 55%, rgba(2,2,2,0.9) 100%);
z-index: -1;
transition: background 0.3s ease;
}
.cat-tile:hover .cat-tile__img { transform: scale(1.06); }
.cat-tile:hover .cat-tile__overlay { background: linear-gradient(180deg, rgba(194,29,39,0.22) 0%, rgba(2,2,2,0.6) 55%, rgba(2,2,2,0.92) 100%); }
.cat-tile__content {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--space-lg);
}
.cat-tile__icon { display: block; font-size: var(--fs-lg); color: var(--red-primary); margin-bottom: var(--space-xs); }
.cat-tile__name { font-family: var(--font-heading); font-size: var(--fs-lg); color: #fff; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin: 0; }
.cat-tile__count { font-size: var(--fs-xs); color: rgba(255,255,255,0.72); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.cat-tile__arrow {
position: absolute;
top: var(--space-md); right: var(--space-md);
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(2,2,2,0.5);
color: #fff;
backdrop-filter: blur(4px);
transform: translateY(-6px);
opacity: 0;
transition: all 0.3s ease;
}
.cat-tile:hover .cat-tile__arrow { transform: translateY(0); opacity: 1; background: var(--red-primary); }
@media (max-width: 900px) { .cat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cat-tiles { grid-template-columns: 1fr; } }
.shop-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--space-2xl);
padding: var(--space-3xl) 0;
}
.shop-sidebar {
position: sticky;
top: calc(var(--header-height) + var(--space-lg));
align-self: start;
}
.filter-group { margin-bottom: var(--space-xl); }
.filter-group__title {
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--text-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-subtle);
}
.filter-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) 0;
color: var(--text-muted);
font-size: var(--fs-sm);
text-decoration: none;
transition: all var(--transition-fast);
}
.filter-link:hover, .filter-link.active { color: var(--red-primary); }
.filter-link.active { font-weight: var(--fw-semibold); }
.filter-link__count {
font-size: var(--fs-xs);
color: var(--text-dim);
background: rgba(255, 255, 255, 0.05);
padding: 2px 8px;
border-radius: var(--radius-full);
}
.shop-content__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-xl);
flex-wrap: wrap;
gap: var(--space-md);
}
.shop-content__count { font-size: var(--fs-sm); color: var(--text-muted); }
.shop-content__count strong { color: var(--red-primary); }
.shop-content__sort { display: flex; align-items: center; gap: var(--space-sm); }
.shop-content__sort label { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.shop-content__sort select {
padding: 0.5rem 2rem 0.5rem 0.8rem;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-body);
font-size: var(--fs-sm);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8694' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
}
.shop-content__sort select:focus { border-color: var(--red-primary); }
.shop-content__sort select option { background: var(--bg-elevated); }
.shop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.filter-toggle { display: none; margin-bottom: var(--space-lg); }
.product-detail { padding: var(--space-3xl) 0; }
.product-detail__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: start;
}
.product-gallery {
position: sticky;
top: calc(var(--header-height) + var(--space-lg));
}
.product-gallery__main {
position: relative;
aspect-ratio: 1;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--gradient-card);
border: var(--border-card);
margin-bottom: var(--space-md);
}
.product-gallery__main img,
.product-gallery__main .product-card__image-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-gallery__main .product-card__image-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
color: var(--text-dim);
background: linear-gradient(135deg, #1a0808, #0a0a12);
}
.product-gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
}
.product-gallery__thumb {
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
background: var(--bg-card);
}
.product-gallery__thumb.active,
.product-gallery__thumb:hover {
border-color: var(--red-primary);
box-shadow: var(--glow-pink-sm);
}
.product-info { display: flex; flex-direction: column; gap: var(--space-lg); }
.product-info__badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 14px;
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: #fff;
background: var(--gradient-red);
border-radius: var(--radius-full);
align-self: flex-start;
}
.product-info__category {
font-size: var(--fs-sm);
color: var(--silver);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: var(--fw-medium);
}
.product-info__name { font-size: var(--fs-3xl); line-height: var(--lh-snug); }
.product-info__price-box {
display: flex;
align-items: baseline;
gap: var(--space-md);
}
.product-info__price {
font-family: var(--font-heading);
font-size: var(--fs-3xl);
font-weight: var(--fw-bold);
color: var(--red-primary);
text-shadow: var(--glow-text-pink);
}
.product-info__old-price {
font-size: var(--fs-lg);
color: var(--text-dim);
text-decoration: line-through;
}
.product-info__discount {
display: inline-flex;
padding: 2px 10px;
background: rgba(46, 204, 113, 0.1);
border: 1px solid rgba(46, 204, 113, 0.3);
color: var(--accent-green);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
border-radius: var(--radius-full);
}
.product-info__desc { color: var(--text-muted); line-height: var(--lh-relaxed); font-size: var(--fs-base); }
.product-info__divider { height: 1px; background: var(--border-subtle); }
.product-option { display: flex; flex-direction: column; gap: var(--space-sm); }
.product-option__label {
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--text-muted);
}
.product-option__values { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.size-btn, .color-btn {
padding: 0.5rem 1.2rem;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-body);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition: all var(--transition-fast);
}
.size-btn:hover, .size-btn.active, .size-btn.selected,
.color-btn:hover, .color-btn.active, .color-btn.selected {
border-color: var(--red-primary);
color: var(--red-primary);
background: var(--red-primary-dim);
box-shadow: var(--glow-pink-sm);
}
.size-btn.out-of-stock { opacity: 0.3; pointer-events: none; text-decoration: line-through; }
.quantity-control {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
overflow: hidden;
width: fit-content;
}
.quantity-btn {
width: 40px;
height: 40px;
background: var(--bg-card);
border: none;
color: var(--text-body);
font-size: var(--fs-lg);
cursor: pointer;
transition: all var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.quantity-btn:hover { background: var(--red-primary-dim); color: var(--red-primary); }
.quantity-input {
width: 60px;
height: 40px;
background: transparent;
border: none;
border-left: 1px solid var(--border-subtle);
border-right: 1px solid var(--border-subtle);
color: var(--text-primary);
text-align: center;
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
}
.product-info__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.product-info__actions .btn { flex: 1; min-width: 200px; }
.product-info__stock { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-sm); }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; }
.stock-dot.in-stock { background: var(--accent-green); box-shadow: 0 0 8px rgba(46, 204, 113, 0.4); }
.stock-dot.low-stock { background: var(--accent-gold); box-shadow: 0 0 8px rgba(212, 168, 83, 0.4); }
.stock-dot.out-of-stock { background: var(--red-primary); box-shadow: 0 0 8px rgba(194, 29, 39, 0.4); }
.product-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--bg-card);
border: var(--border-card);
border-radius: var(--radius-md);
}
.product-feature {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--fs-sm);
color: var(--text-muted);
}
.product-feature i { color: var(--silver); width: 20px; text-align: center; }
.related-products { padding: var(--space-4xl) 0; background: var(--gradient-section-2); }
@media (max-width: 992px) {
.shop-layout { grid-template-columns: 1fr; }
.shop-sidebar { position: static; }
.filter-toggle { display: block; }
.shop-sidebar.hidden-mobile { display: none; }
.shop-grid { grid-template-columns: repeat(2, 1fr); }
.product-detail__grid { grid-template-columns: 1fr; }
.product-gallery { position: static; }
}
@media (max-width: 576px) {
.shop-grid { grid-template-columns: 1fr; }
.product-features { grid-template-columns: 1fr; }
}
.shop-grid .product-card__action-btn {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: rgba(194, 29, 39, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(194, 29, 39, 0.4);
color: #fff;
font-size: var(--fs-base);
box-shadow: 0 4px 12px rgba(194, 29, 39, 0.3);
}
.shop-grid .product-card__action-btn:hover {
background: var(--red-bright);
transform: scale(1.1);
box-shadow: var(--glow-pink);
}
.shop-grid .product-card__cart-btn {
padding: 0.85rem;
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
border-width: 2px;
position: relative;
overflow: hidden;
}
.shop-grid .product-card__cart-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(194, 29, 39, 0.1), transparent);
transition: left 0.5s ease;
}
.shop-grid .product-card__cart-btn:hover::before {
left: 100%;
}
.shop-grid .product-card__image {
position: relative;
}
.shop-grid .product-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(2, 2, 2, 0.4) 0%, transparent 50%);
opacity: 0;
transition: opacity var(--transition-base);
pointer-events: none;
}
.shop-grid .product-card:hover .product-card__image::after {
opacity: 1;
}
.shop-content__sort select {
background-color: var(--bg-elevated);
border-color: rgba(194, 29, 39, 0.2);
transition: all var(--transition-base);
}
.shop-content__sort select:hover {
border-color: var(--red-primary);
box-shadow: 0 0 10px rgba(194, 29, 39, 0.1);
}
.filter-toggle {
border: 1px solid rgba(194, 29, 39, 0.3);
color: var(--red-primary);
background: rgba(194, 29, 39, 0.05);
}
.filter-toggle:hover {
background: var(--red-primary);
color: #fff;
box-shadow: var(--glow-pink-sm);
}
.shop-sidebar input[type="text"] {
transition: all var(--transition-base);
}
.shop-sidebar input[type="text"]:focus {
border-color: var(--red-primary);
box-shadow: 0 0 15px rgba(194, 29, 39, 0.15);
background: rgba(255, 255, 255, 0.06);
}
.shop-content__count strong {
font-weight: var(--fw-bold);
text-shadow: var(--glow-text-pink);
}
@media (max-width: 768px) {
.shop-layout {
grid-template-columns: 1fr;
gap: var(--space-lg);
padding: var(--space-xl) 0;
}
.shop-sidebar {
position: relative;
top: 0;
}
.shop-sidebar.hidden-mobile {
display: none;
}
.filter-toggle {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin-bottom: var(--space-md);
background: var(--bg-card);
border: 1px solid var(--border-subtle);
color: var(--text-body);
padding: 10px 18px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--fs-sm);
transition: all 0.2s;
}
.filter-toggle:hover {
border-color: var(--red-primary);
color: var(--red-primary);
}
.shop-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
}
@media (max-width: 480px) {
.shop-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.shop-content__header {
flex-direction: column;
align-items: flex-start;
}
}
.product-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(194, 29, 39, 0.15);
}
.page-hero {
padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-xl);
text-align: center;
}
.page-hero__title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: var(--fw-bold);
margin-bottom: var(--space-sm);
}
.page-hero__subtitle {
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
.breadcrumbs {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: var(--space-md);
font-size: var(--fs-sm);
}
.breadcrumbs a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--red-primary); }
.breadcrumbs span { color: var(--text-primary); }
.breadcrumbs i { color: var(--text-dim); }
.empty-state {
text-align: center;
padding: var(--space-3xl) var(--space-lg);
}
.empty-state__icon {
font-size: 3rem;
color: var(--text-dim);
margin-bottom: var(--space-lg);
}
.empty-state__title {
font-family: var(--font-heading);
font-size: var(--fs-xl);
margin-bottom: var(--space-sm);
}
.empty-state__text {
color: var(--text-muted);
margin-bottom: var(--space-xl);
}
@media (max-width: 768px) {
.product-detail__grid {
grid-template-columns: 1fr;
}
.product-gallery__main img {
max-height: 400px;
object-fit: contain;
}
.product-info__actions {
position: sticky;
bottom: 0;
background: var(--bg-body);
padding: var(--space-md) 0;
z-index: 10;
}
}
.quantity-control {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
overflow: hidden;
width: fit-content;
}
.quantity-btn {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-card);
border: none;
color: var(--text-body);
font-size: 1.2rem;
cursor: pointer;
transition: all 0.2s;
}
.quantity-btn:hover {
background: var(--red-primary);
color: #fff;
}
.quantity-input {
width: 50px;
height: 42px;
text-align: center;
border: none;
border-left: 1px solid var(--border-subtle);
border-right: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-primary);
font-size: var(--fs-base);
font-weight: 600;
-moz-appearance: textfield;
}
.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
@media (max-width: 400px) {
.shop-grid { gap: var(--space-xs); }
.product-card__cart-btn { padding: 8px 10px; font-size: 0.75rem; }
.shop-content__header { gap: var(--space-sm); }
.filter-toggle { padding: 8px 14px; font-size: 0.75rem; }
.breadcrumbs { font-size: 0.7rem; }
.product-gallery__main img { max-height: 300px; }
.product-info__actions { padding: var(--space-sm) 0; }
.quantity-btn { width: 36px; height: 36px; }
.quantity-input { width: 40px; height: 36px; font-size: var(--fs-xs); }
}
.product-card {
background-color: var(--bg-card);
}
.product-card::before {
z-index: -2;
}
.product-card:hover {
border-color: var(--red-primary) !important;
}
.product-card:hover::before {
opacity: 0.35;
}
.product-card__badge,
.product-card__badge-top {
background: var(--red-primary);
color: #fff;
border: 1px solid rgba(255,255,255,0.18);
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
z-index: 2;
}
.product-card__price-current {
color: #ff5560 !important;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.shop-seo-text {
padding: var(--space-2xl) 0 var(--space-3xl);
border-top: 1px solid var(--border-subtle);
margin-top: var(--space-xl);
}
.shop-seo-text__title {
font-family: var(--font-heading);
font-size: var(--fs-lg);
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.shop-seo-text__body {
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--text-muted);
max-width: 920px;
}
.shop-seo-text__body strong { color: var(--text-body); font-weight: var(--fw-semibold); }
.sticky-cta-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(20, 6, 8, 0.96);
border-top: 2px solid var(--red-primary, #c21d27);
padding: 0.75rem 1rem;
z-index: 90;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
display: none;
transition: transform 0.3s ease;
}
.sticky-cta-bar__inner {
display: flex;
align-items: center;
gap: 0.75rem;
max-width: 600px;
margin: 0 auto;
}
.sticky-cta-bar__price {
color: #fff;
font-weight: 700;
font-size: 1.05rem;
flex-shrink: 0;
line-height: 1.2;
}
.sticky-cta-bar__price-old {
color: rgba(255,255,255,0.55);
font-size: 0.8rem;
font-weight: 400;
text-decoration: line-through;
display: block;
margin-top: 1px;
}
.sticky-cta-bar__btn {
flex-grow: 1;
background: linear-gradient(135deg, #ff4f5e, #c21d27);
color: #fff;
border: none;
padding: 0.85rem 1rem;
font-weight: 700;
font-size: 0.95rem;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
box-shadow: 0 4px 12px rgba(194, 29, 39, 0.4);
transition: transform 0.15s ease;
}
.sticky-cta-bar__btn:hover, .sticky-cta-bar__btn:focus {
transform: translateY(-1px);
outline: 2px solid #fff;
outline-offset: 2px;
}
.sticky-cta-bar__btn:active {
transform: translateY(0);
}
@media (max-width: 767px) {
.sticky-cta-bar { display: block; }
body.has-sticky-cta { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
.sticky-cta-bar, .sticky-cta-bar__btn { transition: none; }
}
.footer {
position: relative;
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--gradient-red);
box-shadow: 0 0 20px rgba(194, 29, 39, 0.3), 0 0 40px rgba(194, 29, 39, 0.1);
}
.footer::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 150px;
background: radial-gradient(ellipse, rgba(194, 29, 39, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.footer__main {
position: relative;
z-index: 1;
padding: var(--space-4xl) 0 var(--space-3xl);
}
.footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr 1.3fr;
gap: var(--space-2xl);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-lg); }
.footer__brand-logo {
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
}
.footer__brand-icon {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.footer__brand-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.footer__brand-name {
font-family: var(--font-heading);
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--text-primary);
letter-spacing: var(--ls-wider);
line-height: 1;
}
.footer__brand-name small {
display: block;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-widest);
color: var(--red-primary);
text-shadow: var(--glow-text-pink);
margin-top: 2px;
}
.footer__brand-desc {
font-size: var(--fs-sm);
color: var(--text-muted);
line-height: var(--lh-relaxed);
}
.footer__social { display: flex; gap: var(--space-sm); }
.footer__social-link {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: var(--fs-sm);
transition: all var(--transition-base);
text-decoration: none;
}
.footer__social-link:hover {
color: var(--red-primary);
border-color: var(--red-primary);
box-shadow: var(--glow-pink);
background: rgba(194, 29, 39, 0.1);
text-shadow: none;
}
.footer__column { display: flex; flex-direction: column; gap: var(--space-md); }
.footer__heading {
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--text-primary);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--red-primary);
box-shadow: 0 2px 8px rgba(194, 29, 39, 0.2);
display: inline-block;
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__link {
color: var(--text-muted);
font-size: var(--fs-sm);
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: var(--space-sm);
text-decoration: none;
}
.footer__link i {
font-size: 0.6rem;
color: var(--red-primary);
opacity: 0;
transform: translateX(-5px);
transition: all var(--transition-fast);
}
.footer__link:hover {
color: var(--red-primary);
text-shadow: var(--glow-text-pink);
transform: translateX(4px);
}
.footer__link:hover i { opacity: 1; transform: translateX(0); }
.footer__newsletter-text { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.footer__newsletter-form {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.footer__newsletter-input {
width: 100%;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
color: var(--text-body);
font-size: var(--fs-sm);
transition: all var(--transition-base);
}
.footer__newsletter-input::placeholder { color: var(--text-dim); }
.footer__newsletter-input:focus {
border-color: var(--red-primary);
box-shadow: 0 0 15px rgba(194, 29, 39, 0.15), inset 0 0 15px rgba(194, 29, 39, 0.03);
background: rgba(255, 255, 255, 0.06);
}
.footer__newsletter-btn {
width: 100%;
padding: 0.75rem;
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: #fff;
background: var(--red-primary);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-base);
box-shadow: 0 0 15px rgba(194, 29, 39, 0.3);
}
.footer__newsletter-btn:hover {
background: var(--red-bright);
box-shadow: var(--glow-pink);
transform: translateY(-2px);
}
.footer__contact-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.footer__contact-item {
display: flex;
align-items: center;
gap: var(--space-md);
color: var(--text-muted);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
text-decoration: none;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: all var(--transition-base);
}
a.footer__contact-item:hover {
color: var(--red-primary);
border-color: rgba(194, 29, 39, 0.2);
background: rgba(194, 29, 39, 0.05);
}
.footer__contact-icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: rgba(194, 29, 39, 0.1);
border: 1px solid rgba(194, 29, 39, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.footer__contact-icon i {
color: var(--red-primary);
font-size: var(--fs-sm);
text-shadow: var(--glow-text-pink);
}
.footer__contact-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer__contact-label {
font-size: var(--fs-xs);
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: var(--ls-wider);
font-weight: var(--fw-bold);
}
.footer__contact-value {
color: var(--text-body);
font-size: var(--fs-sm);
}
a.footer__contact-item:hover .footer__contact-value {
color: var(--red-primary);
text-shadow: var(--glow-text-pink);
}
.footer__bottom {
position: relative;
z-index: 1;
padding: var(--space-lg) 0;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-md);
}
.footer__copyright { color: var(--text-dim); font-size: var(--fs-xs); }
.footer__copyright a {
color: var(--red-primary);
text-decoration: none;
transition: text-shadow var(--transition-fast);
}
.footer__copyright a:hover { text-shadow: var(--glow-text-pink); }
.footer__bottom-links { display: flex; gap: var(--space-lg); }
.footer__bottom-link {
color: var(--text-dim);
font-size: var(--fs-xs);
text-decoration: none;
transition: color var(--transition-fast);
}
.footer__bottom-link:hover { color: var(--silver); text-shadow: var(--glow-text-cyan); }
@media (max-width: 992px) {
.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
}
@media (max-width: 576px) {
.footer__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
.footer__links--teme { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md); }
.footer__bottom-inner { flex-direction: column; text-align: center; }
.footer__bottom-links { justify-content: center; }
}
.footer__creator {
padding: var(--space-md) 0;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.footer__creator-inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.footer__creator-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--gradient-red);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: var(--fs-sm);
flex-shrink: 0;
}
.footer__creator-text {
font-size: var(--fs-xs);
color: var(--text-dim);
}
.footer__creator-text a {
color: var(--silver);
font-weight: var(--fw-semibold);
transition: all var(--transition-fast);
}
.footer__creator-text a:hover {
color: var(--red-primary);
text-shadow: var(--glow-text-pink);
}
@media (max-width: 400px) {
.footer__brand-name { font-size: var(--fs-lg); }
.footer__brand-desc { font-size: var(--fs-xs); }
.footer__heading { font-size: var(--fs-sm); }
.footer__link { font-size: var(--fs-xs); }
.footer__newsletter-input { font-size: var(--fs-xs); padding: 10px 12px; }
.footer__newsletter-btn { font-size: var(--fs-xs); padding: 10px 14px; }
.footer__copyright { font-size: 0.65rem; }
.footer__bottom-link { font-size: 0.65rem; }
.footer__creator-text { font-size: 0.65rem; }
}
.footer__bottom-links { flex-wrap: wrap; row-gap: var(--space-xs); }
@media (min-width: 577px) { .footer__bottom-links { justify-content: flex-end; } }
.footer__cookie-btn { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.footer__legal { margin-top: var(--space-md); color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.6; }
.footer__legal a { color: var(--silver); text-decoration: underline; text-underline-offset: 2px; }
.footer__newsletter-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.5; cursor: pointer; }
.footer__newsletter-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .1em; accent-color: var(--red-primary); }
.footer__newsletter-consent a { color: var(--silver); text-decoration: underline; }
@media (max-width: 576px) { .footer__legal { text-align: center; } }
:root {
color-scheme: dark;
--focus-ring: #ff5a64;
--surface-ink: #070404;
--surface-raised: #100909;
--line-red: rgba(194, 29, 39, 0.42);
--line-soft: rgba(255, 255, 255, 0.09);
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 20px);
scrollbar-gutter: stable;
}
body {
background-color: var(--bg-primary);
-webkit-tap-highlight-color: rgba(194, 29, 39, 0.2);
}
main {
isolation: isolate;
}
:where(section[id], h1, h2, h3, [id]):not(html, body, main) {
scroll-margin-top: calc(var(--header-height) + 20px);
}
::selection {
color: #fff;
background: #8f151d;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: #76141a;
border: 2px solid var(--bg-primary);
border-radius: 999px;
}
* {
scrollbar-color: #76141a var(--bg-primary);
scrollbar-width: thin;
}
.reveal,
.reveal-left,
.reveal-right,
.revealed {
opacity: 1 !important;
transform: none !important;
transition-delay: 0s !important;
}
body main > .section:not(.hero) {
position: relative;
border-top: 0;
background:
radial-gradient(circle at 12% 0%, rgba(194, 29, 39, 0.075), transparent 34rem),
linear-gradient(180deg, #060303 0%, #020202 100%);
}
body main > .section:not(.hero):nth-of-type(even) {
background:
radial-gradient(circle at 88% 18%, rgba(194, 29, 39, 0.06), transparent 32rem),
linear-gradient(180deg, #020202 0%, #090505 100%);
}
body main > .section:not(.hero)::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent 4%, var(--line-red) 26%, var(--line-soft) 50%, transparent 96%);
pointer-events: none;
}
.section__header {
width: min(100%, 760px);
margin-inline: auto;
}
.section__tag {
gap: 0.55rem;
padding: 0.35rem 0.65rem;
overflow: visible;
color: #f04a54;
background: transparent;
border: 0;
border-left: 3px solid var(--red-primary);
border-radius: 0;
text-shadow: none;
}
.section__tag::before {
display: none;
}
.section__title,
.page-hero__title,
.hero__title,
.cta__title {
color: var(--text-primary);
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: currentColor;
letter-spacing: -0.035em;
text-shadow: none;
text-wrap: balance;
}
.section__subtitle,
.hero__subtitle,
.page-hero__subtitle,
.cta__text {
text-wrap: pretty;
}
.text-neon-pink {
color: #ef4651;
text-shadow: none;
}
.page-hero {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line-red);
background:
linear-gradient(115deg, rgba(194, 29, 39, 0.15), transparent 36%),
repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, 0.018) 80px),
#050303;
}
.page-hero::after {
content: '';
position: absolute;
right: clamp(1rem, 7vw, 7rem);
bottom: -2px;
width: clamp(72px, 10vw, 150px);
height: 5px;
background: var(--red-primary);
transform: skewX(-34deg);
pointer-events: none;
}
.hero {
animation: none;
background:
radial-gradient(circle at 50% 30%, rgba(194, 29, 39, 0.17), transparent 30rem),
linear-gradient(145deg, rgba(88, 16, 20, 0.1), transparent 52%),
#020202;
}
.hero::before {
animation: none;
opacity: 0.55;
background-image:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
radial-gradient(circle at 50% 32%, rgba(194, 29, 39, 0.24), transparent 32rem);
background-size: 64px 64px, 64px 64px, auto;
}
.hero__logo {
animation: none;
border-color: rgba(240, 74, 84, 0.46);
box-shadow: 0 0 0 7px rgba(194, 29, 39, 0.06), 0 24px 70px rgba(0, 0, 0, 0.55);
}
.hero__tag {
color: #ff5560;
border-radius: 3px;
box-shadow: none;
}
.hero__stats {
padding-top: clamp(1rem, 2vw, 1.5rem);
border-top: 1px solid var(--line-soft);
}
.hero__stat-number,
.number-card__value,
.product-card__price-current,
.product-info__price,
.filter-link__count,
.navbar__cart-badge {
font-variant-numeric: tabular-nums;
}
.btn,
.navbar__link,
.navbar__cart,
.navbar__hamburger,
.footer__social-link,
.footer__newsletter-btn,
.product-card__cart-btn,
.quantity-btn,
.size-btn,
.color-btn {
min-width: 44px;
min-height: 44px;
touch-action: manipulation;
}
.btn {
border-radius: 4px;
transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.btn--primary {
overflow: hidden;
box-shadow: 0 10px 30px rgba(194, 29, 39, 0.2);
}
.btn--primary::after {
display: none;
}
.btn--outline {
background: rgba(255, 255, 255, 0.015);
}
.product-card,
.feature-card,
.category-card,
.testimonial-card,
.contact-card,
.number-card,
.faq-item {
border-radius: 6px;
border-color: var(--line-soft);
background: linear-gradient(145deg, rgba(16, 9, 9, 0.98), rgba(7, 4, 4, 0.98));
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.product-card,
.feature-card {
position: relative;
}
.product-card::after,
.feature-card::before {
content: '';
position: absolute;
inset: 0 auto auto 0;
width: 72px;
height: 2px;
background: var(--red-primary);
pointer-events: none;
z-index: 3;
}
.product-card::before,
.feature-card::after {
animation: none;
}
.product-card__image img,
.cat-tile__img {
transition: transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
.product-card:focus-within,
.category-card:focus-visible,
.cat-tile:focus-visible,
.recently-viewed__item:focus-visible {
border-color: var(--focus-ring);
box-shadow: 0 0 0 3px rgba(255, 90, 100, 0.24), 0 18px 48px rgba(0, 0, 0, 0.28);
}
.product-card > a:focus-visible {
outline: 0;
}
.feature-card {
text-align: left;
}
.feature-card__icon {
margin-inline: 0;
border-radius: 4px;
transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.cta__box {
position: relative;
overflow: hidden;
border: 1px solid rgba(194, 29, 39, 0.32) !important;
border-radius: 7px;
background:
linear-gradient(110deg, rgba(194, 29, 39, 0.14), transparent 42%),
var(--surface-ink) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.cta__box::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--red-primary);
}
.cta__glow {
opacity: 0.42;
}
.footer::before {
left: 0;
right: 0;
background: linear-gradient(90deg, var(--red-primary), rgba(194, 29, 39, 0.1) 28%, transparent 72%);
}
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
border-color: var(--focus-ring);
box-shadow: 0 0 0 3px rgba(255, 90, 100, 0.18);
}
.shop-grid .product-card:nth-child(n + 9) {
content-visibility: auto;
contain-intrinsic-size: 0 430px;
}
@media (min-width: 993px) {
.page-index .products__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.page-index .products__grid > .product-card {
grid-column: span 4;
}
.page-index .products__grid > .product-card:nth-last-child(2):nth-child(3n + 1) {
grid-column: 3 / span 4;
}
.page-index .categories__strip {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.page-index .cat-tiles > .cat-tile:last-child:nth-child(3n + 1) {
grid-column: 2;
}
.page-index .hero__scroll {
bottom: 8px;
animation: none;
}
}
@media (hover: hover) and (pointer: fine) {
.btn:hover {
transform: translateY(-2px);
}
.btn--primary:hover {
box-shadow: 0 13px 34px rgba(194, 29, 39, 0.34);
}
.product-card:hover,
.feature-card:hover,
.category-card:hover,
.contact-card:hover,
.number-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(240, 74, 84, 0.5);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
}
.product-card:hover .product-card__image img,
.cat-tile:hover .cat-tile__img {
transform: scale(1.035);
}
.feature-card:hover .feature-card__icon {
transform: translateY(-2px);
}
}
@media (max-width: 992px) {
.page-index .products__grid > .product-card {
grid-column: auto;
}
}
@media (hover: none), (max-width: 768px) {
.product-card__actions {
display: none;
}
}
@media (min-width: 380px) and (max-width: 576px) {
.page-index .products__grid,
.page-index .cat-tiles,
.page-index .categories__strip,
.page-index .why-us__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.page-index .product-card__info {
padding: 14px;
}
.page-index .product-card__name {
min-height: 2.7em;
font-size: 0.875rem;
line-height: 1.35;
}
.page-index .product-card__price-current {
font-size: 1rem;
}
.page-index .cat-tile {
aspect-ratio: 1 / 1;
}
.page-index .cat-tile__content {
padding: 14px;
}
.page-index .cat-tile__name {
font-size: 0.95rem;
}
.page-index .category-card,
.page-index .feature-card {
padding: 18px 14px;
}
.page-index .feature-card__icon {
width: 48px;
height: 48px;
margin-bottom: 14px;
}
.page-index .feature-card__title {
font-size: 0.95rem;
}
.page-index .feature-card__text {
font-size: 0.78rem;
line-height: 1.55;
}
}
@media (max-width: 576px) {
.section__header {
margin-bottom: 2rem;
}
.section__tag {
font-size: 0.68rem;
}
.hero__content {
padding-inline: 18px;
}
.hero__stats {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.hero__stat {
min-width: 0;
}
.cta__box {
padding: 28px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
.product-card,
.feature-card,
.category-card,
.cat-tile,
.hero__grid,
.hero__logo,
.fab,
.sticky-mobile-cta {
transform: none !important;
}
.ripple,
.cart-success-anim {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
.hero__scroll {
transform: translateX(-50%) !important;
}
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
.hero__scroll {
transform: none !important;
}
}
@media (forced-colors: active) {
.section__tag,
.product-card,
.feature-card,
.category-card,
.cta__box {
border: 1px solid CanvasText !important;
}
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline-color: Highlight;
}
}
.sss-tailor-guide {
--sss-progress: 0;
position: fixed;
top: 18vh;
left: max(12px, calc((100vw - 1320px) / 2));
z-index: 120;
display: none;
width: 44px;
height: 64vh;
pointer-events: none;
}
.sss-tailor-guide svg {
width: 100%;
height: 100%;
overflow: visible;
}
.sss-tailor-guide__track,
.sss-tailor-guide__thread {
fill: none;
}
.sss-tailor-guide__track {
stroke: rgba(255, 255, 255, 0.11);
stroke-width: 1;
stroke-dasharray: 2 5;
}
.sss-tailor-guide__thread {
stroke: #ef4651;
stroke-width: 2;
stroke-dasharray: 1;
stroke-dashoffset: 1;
filter: drop-shadow(0 0 7px rgba(239, 70, 81, 0.5));
}
.sss-tailor-guide__needle {
position: absolute;
top: calc(var(--sss-progress) * 100%);
left: 20px;
width: 4px;
height: 25px;
border: 1px solid rgba(255, 255, 255, 0.88);
border-radius: 50% 50% 45% 45%;
background: #181414;
box-shadow: 0 0 0 3px rgba(239, 70, 81, 0.16);
transform: translate(-50%, -50%) rotate(24deg);
}
.sss-tailor-guide__needle::before {
content: '';
position: absolute;
top: 3px;
left: 50%;
width: 1px;
height: 5px;
background: #ef4651;
transform: translateX(-50%);
}
.sss-intro {
position: fixed;
inset: 0;
z-index: 11990;
display: grid;
place-content: center;
gap: 13px;
color: #fff;
background: #030101;
pointer-events: none;
animation: sss-intro-out 220ms cubic-bezier(.65, 0, .35, 1) 300ms both;
}
.sss-intro__word {
font-family: var(--font-heading);
font-size: clamp(1.15rem, 3vw, 1.8rem);
font-weight: 800;
letter-spacing: .24em;
text-indent: .24em;
animation: sss-intro-word 360ms cubic-bezier(.16, 1, .3, 1) both;
}
.sss-intro__stitch {
width: 100%;
height: 2px;
background: repeating-linear-gradient(90deg, #ef4651 0 13px, transparent 13px 19px);
transform-origin: left;
animation: sss-intro-stitch 410ms cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes sss-intro-word {
from { opacity: 0; letter-spacing: .42em; }
}
@keyframes sss-intro-stitch {
from { transform: scaleX(0); }
}
@keyframes sss-intro-out {
to { opacity: 0; visibility: hidden; transform: translateY(-12px); }
}
.sss-motion-ready [data-sss-motion] {
opacity: 0;
transition: opacity 520ms ease var(--sss-delay, 0ms), transform 620ms cubic-bezier(.16, 1, .3, 1) var(--sss-delay, 0ms), clip-path 620ms cubic-bezier(.16, 1, .3, 1) var(--sss-delay, 0ms);
}
.sss-motion-ready [data-sss-motion="left"] { transform: translate3d(-22px, 8px, 0); }
.sss-motion-ready [data-sss-motion="right"] { transform: translate3d(22px, 8px, 0); }
.sss-motion-ready [data-sss-motion="cut"] { clip-path: inset(0 100% 0 0); transform: none; }
.sss-motion-ready [data-sss-motion="stitch"] { transform: translate3d(0, 15px, 0); }
.sss-motion-ready [data-sss-motion].sss-motion-in {
opacity: 1;
clip-path: inset(0);
transform: none;
}
form :where(input, textarea, select)[data-sss-filled] {
border-color: rgba(239, 70, 81, 0.58);
box-shadow: inset 3px 0 0 rgba(239, 70, 81, 0.62);
}
@media (min-width: 1280px) {
.sss-tailor-guide { display: block; }
}
@media (max-width: 768px) {
.sss-intro { background-image: linear-gradient(135deg, rgba(194, 29, 39, 0.12), transparent 58%); }
.sss-motion-ready [data-sss-motion="left"],
.sss-motion-ready [data-sss-motion="right"] { transform: translate3d(0, 12px, 0); }
}
@media (prefers-reduced-motion: reduce) {
.sss-intro,
.sss-tailor-guide { display: none !important; }
.sss-motion-ready [data-sss-motion] {
opacity: 1 !important;
clip-path: none !important;
transform: none !important;
}
}
.page-index .hero {
min-height: min(880px, 100svh);
isolation: isolate;
overflow: clip;
}
.page-index .hero__content {
position: relative;
max-width: 720px;
padding-block: clamp(2rem, 5vw, 5rem);
}
.page-index .hero__content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: min(280px, 54vw);
height: 2px;
background: repeating-linear-gradient(90deg, #ef4651 0 18px, transparent 18px 27px);
opacity: .82;
}
.page-index .hero__title {
max-width: 10ch;
font-size: clamp(3rem, 7.4vw, 5.8rem);
line-height: .93;
letter-spacing: -.04em;
text-wrap: balance;
}
.page-index .hero__subtitle {
max-width: 58ch;
font-size: clamp(1rem, 1.5vw, 1.18rem);
}
.page-index .product-card,
.page-index .category-card,
.page-index .feature-card {
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.page-index .product-card__image,
.page-index .category-card__image {
overflow: hidden;
background: #090505;
}
.page-index .cta__box::after {
content: '';
position: absolute;
inset: auto -8% -55% 42%;
height: 190%;
background: repeating-linear-gradient(112deg, transparent 0 20px, rgba(239, 70, 81, .08) 20px 22px);
transform: rotate(-7deg);
pointer-events: none;
}
@supports (content-visibility: auto) {
.page-index main > .section:nth-of-type(n + 4) {
content-visibility: auto;
contain-intrinsic-size: auto 760px;
}
}
@media (min-width: 900px) {
.page-index .products__grid .product-card:nth-child(even) {
transform: translateY(18px);
}
}
@media (max-width: 768px) {
.page-index .hero {
min-height: auto;
}
.page-index .hero__title {
max-width: 11ch;
font-size: clamp(2.75rem, 15vw, 4.25rem);
}
}
@media (prefers-reduced-motion: reduce) {
.page-index .products__grid .product-card:nth-child(even) {
transform: none;
}
}
.scroll-progress {
position: fixed;
inset: 0 0 auto;
z-index: 9999;
width: 100%;
height: 3px;
background: var(--gradient-red);
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}
.trust-bar {
overflow: hidden;
padding: 16px 0;
background: #080505;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.trust-bar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 24px 36px;
max-width: var(--container-lg);
margin: 0 auto;
padding: 0 20px;
}
.trust-bar__item {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 10px;
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--fs-sm);
white-space: nowrap;
}
.trust-bar__icon {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: #f04a54;
background: rgba(194, 29, 39, 0.13);
border: 1px solid rgba(194, 29, 39, 0.22);
border-radius: 4px;
font-size: 16px;
}
.trust-bar__label strong {
display: block;
color: var(--text-primary);
font-size: var(--fs-sm);
font-weight: 600;
line-height: 1.3;
}
.trust-bar__label span {
color: var(--text-muted);
font-size: 0.75rem;
}
.fab-container {
position: fixed;
right: max(24px, env(safe-area-inset-right));
bottom: max(24px, env(safe-area-inset-bottom));
z-index: 500;
display: flex;
flex-direction: column;
gap: 12px;
}
.fab {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
min-width: 44px;
min-height: 44px;
padding: 0;
color: #fff;
font-size: 22px;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 50%;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
cursor: pointer;
touch-action: manipulation;
transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.fab--instagram {
background: #b51f46;
}
.fab--top {
color: var(--text-primary);
background: var(--bg-elevated);
border-color: var(--border-light);
font-size: 19px;
}
.fab--top[hidden] {
display: none;
}
.fab[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
top: 50%;
right: 64px;
padding: 7px 11px;
color: var(--text-primary);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 3px;
font-family: var(--font-body);
font-size: var(--fs-xs);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateY(-50%);
transition: opacity 150ms ease;
}
.sticky-mobile-cta {
position: fixed;
inset: auto 0 0;
z-index: 499;
display: none;
padding: 10px 16px max(10px, env(safe-area-inset-bottom));
background: rgba(2, 2, 2, 0.98);
border-top: 1px solid rgba(194, 29, 39, 0.34);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.42);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(100%);
transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.sticky-mobile-cta.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition-delay: 0s;
}
.sticky-mobile-cta__inner {
display: flex;
gap: 10px;
max-width: 600px;
margin: 0 auto;
}
.sticky-mobile-cta .btn {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 14px;
font-size: var(--fs-sm);
font-weight: 600;
text-align: center;
text-decoration: none;
}
.sticky-mobile-cta .btn--primary {
color: #fff;
background: var(--red-primary);
border: 1px solid var(--red-primary);
}
.sticky-mobile-cta .btn--outline {
color: var(--text-primary);
background: transparent;
border: 1px solid var(--border-light);
}
.btn,
.product-card__cart-btn {
position: relative;
overflow: hidden;
}
.btn .ripple,
.product-card__cart-btn .ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.28);
pointer-events: none;
transform: scale(0);
animation: rippleAnim 520ms ease-out;
}
@keyframes rippleAnim {
to {
opacity: 0;
transform: scale(4);
}
}
.cart-success-anim {
position: fixed;
z-index: 10000;
pointer-events: none;
animation: cartFly 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cartFly {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: translateY(-160px) scale(0.35);
}
}
.product-card__cart-btn {
transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 150ms ease;
}
.recently-viewed {
padding: 30px 0;
background: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
}
.recently-viewed__title {
margin-bottom: 16px;
color: var(--text-primary);
font-family: var(--font-heading);
font-size: var(--fs-lg);
text-align: center;
text-wrap: balance;
}
.recently-viewed__grid {
display: flex;
gap: 16px;
max-width: var(--container-lg);
margin: 0 auto;
padding: 3px 20px 12px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scrollbar-color: var(--border-light) transparent;
scrollbar-width: thin;
}
.recently-viewed__item {
flex: 0 0 140px;
color: var(--text-primary);
text-align: center;
text-decoration: none;
scroll-snap-align: start;
transition: color 180ms ease, transform 180ms ease;
}
.recently-viewed__img {
width: 140px;
height: 140px;
margin-bottom: 8px;
object-fit: cover;
border: 1px solid var(--border-subtle);
border-radius: 4px;
}
.recently-viewed__name {
color: var(--text-body);
font-size: var(--fs-xs);
line-height: 1.35;
overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
.fab:hover {
box-shadow: 0 11px 28px rgba(0, 0, 0, 0.5);
transform: translateY(-2px);
}
.fab[data-tooltip]:hover::before,
.fab[data-tooltip]:focus-visible::before {
opacity: 1;
}
.product-card__cart-btn:hover {
box-shadow: 0 5px 16px rgba(194, 29, 39, 0.28);
transform: translateY(-2px);
}
.recently-viewed__item:hover {
color: #fff;
transform: translateY(-3px);
}
}
@media (max-width: 768px) {
.trust-bar__inner {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 20px;
padding: 2px 16px 7px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-padding-inline: 16px;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent);
}
.trust-bar__inner::-webkit-scrollbar {
display: none;
}
.trust-bar__item {
scroll-snap-align: start;
}
.fab-container {
right: max(16px, env(safe-area-inset-right));
bottom: max(16px, env(safe-area-inset-bottom));
}
.fab {
width: 48px;
height: 48px;
font-size: 20px;
}
.fab[data-tooltip]::before {
display: none;
}
.sticky-mobile-cta {
display: block;
}
body:has(.sticky-mobile-cta.visible) .fab-container {
bottom: calc(76px + env(safe-area-inset-bottom));
}
}
@media (max-width: 400px) {
.fab-container {
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
gap: 8px;
}
.fab {
width: 44px;
height: 44px;
font-size: 18px;
}
.sticky-mobile-cta .btn {
min-height: 44px;
padding: 9px 10px;
font-size: 0.78rem;
}
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress {
will-change: auto;
}
.fab,
.sticky-mobile-cta,
.product-card__cart-btn,
.recently-viewed__item {
transition: none;
}
}
.volume-promo {
background: linear-gradient(135deg, #c21d27 0%, #8b1219 100%);
color: #fff;
padding: 0.75rem 0;
margin: 0 0 1rem 0;
box-shadow: 0 2px 12px rgba(194, 29, 39, 0.25);
}
.volume-promo__inner {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.volume-promo__icon {
font-size: 1.6rem;
color: #fff;
flex-shrink: 0;
animation: vp-pulse 2s ease-in-out infinite;
}
@keyframes vp-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.volume-promo__text {
display: flex;
flex-direction: column;
gap: 0.15rem;
line-height: 1.3;
flex: 1 1 auto;
min-width: 0;
}
.volume-promo__text strong {
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.volume-promo__text span {
font-size: 0.92rem;
opacity: 0.95;
}
.volume-promo__text b {
font-weight: 800;
color: #ffe4a3;
}
.volume-promo__save {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.15);
padding: 0.4rem 0.8rem;
border-radius: 8px;
border: 2px solid rgba(255, 255, 255, 0.3);
flex-shrink: 0;
}
.volume-promo__save-num {
font-size: 1.3rem;
font-weight: 900;
line-height: 1;
color: #ffe4a3;
}
.volume-promo__save-lbl {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
opacity: 0.85;
margin-top: 0.15rem;
}
@media (max-width: 600px) {
.volume-promo {
padding: 0.6rem 0;
}
.volume-promo__inner {
gap: 0.6rem;
}
.volume-promo__icon {
font-size: 1.3rem;
}
.volume-promo__text strong {
font-size: 0.85rem;
}
.volume-promo__text span {
font-size: 0.8rem;
}
.volume-promo__save {
padding: 0.3rem 0.6rem;
}
.volume-promo__save-num {
font-size: 1rem;
}
.volume-promo__save-lbl {
font-size: 0.6rem;
}
}
.product-info__volume-hint {
margin-top: 0.5rem;
padding: 0.6rem 0.8rem;
background: #fff7ed;
color: #9a3412;
border-left: 3px solid #f59e0b;
border-radius: 6px;
font-size: 0.88rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.product-info__volume-hint i {
color: #f59e0b;
}