.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;
}
}
.custom-builder {
min-height: 100vh;
padding-top: calc(var(--header-height) + var(--space-3xl));
padding-bottom: var(--space-4xl);
}
.custom-builder__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: start;
}
.custom-preview {
position: sticky;
top: calc(var(--header-height) + var(--space-xl));
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
}
.custom-preview__label {
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(--red-primary);
margin-bottom: var(--space-md);
}
.custom-preview__canvas-wrap {
position: relative;
width: 100%;
max-width: 420px;
margin: 0 auto;
aspect-ratio: 3/4;
background: var(--bg-elevated);
border-radius: var(--radius-md);
overflow: hidden;
border: 2px solid var(--border-light);
cursor: pointer;
transition: border-color 0.3s, box-shadow 0.3s;
}
.custom-preview__canvas-wrap:hover {
border-color: var(--red-primary);
box-shadow: 0 0 20px rgba(194, 29, 39, 0.15);
}
.custom-preview__canvas-wrap.has-design {
cursor: default;
}
.custom-preview__canvas-wrap.has-design:hover {
border-color: var(--border-light);
box-shadow: none;
}
.custom-preview__canvas-wrap.dragover {
border-color: var(--red-primary);
box-shadow: 0 0 30px rgba(194, 29, 39, 0.3);
}
.custom-preview__mockup {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
z-index: 1;
}
.custom-preview__design {
position: absolute;
cursor: grab;
z-index: 2;
border: 2px dashed transparent;
transition: border-color 0.2s;
user-select: none;
}
.custom-preview__design:hover,
.custom-preview__design:active {
border-color: var(--red-primary);
}
.custom-preview__design img {
width: 100%;
height: auto;
display: block;
pointer-events: none;
transition: transform 0.25s ease;
}
.custom-preview__toolbar {
position: absolute;
bottom: var(--space-md, 12px);
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: none;
gap: var(--space-sm, 8px);
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
padding: 6px 12px;
border-radius: var(--radius-full, 50px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.custom-preview__canvas-wrap.has-design .custom-preview__toolbar {
display: flex;
}
.custom-preview__toolbar-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-sm, 6px);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: var(--fs-xs, 0.75rem);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: var(--font-heading, sans-serif);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.custom-preview__toolbar-btn:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.3);
}
.custom-preview__toolbar-btn i {
font-size: 0.85em;
}
.custom-preview__toolbar-btn--delete {
border-color: rgba(194, 29, 39, 0.4);
color: var(--red-primary, #c21d27);
}
.custom-preview__toolbar-btn--delete:hover {
background: rgba(194, 29, 39, 0.25);
border-color: var(--red-primary, #c21d27);
}
.custom-preview__zoom-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 20;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
opacity: 0.7;
}
.custom-preview__zoom-btn:hover {
opacity: 1;
background: rgba(194, 29, 39, 0.8);
border-color: var(--red-primary);
transform: scale(1.1);
}
.resize-handle {
position: absolute;
width: 14px;
height: 14px;
background: var(--red-primary);
border: 2px solid #fff;
border-radius: 3px;
z-index: 11;
opacity: 0;
transition: opacity 0.2s;
}
.custom-preview__design:hover .resize-handle { opacity: 1; }
.resize-handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.resize-handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.resize-handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.resize-handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.rotate-handle {
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 28px;
background: var(--red-primary, #c21d27);
border: 2px solid #fff;
border-radius: 50%;
z-index: 12;
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
color: #fff;
font-size: 11px;
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.rotate-handle:active { cursor: grabbing; }
.custom-preview__design:hover .rotate-handle { opacity: 1; }
.rotate-handle::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 8px;
background: var(--red-primary, #c21d27);
}
.custom-preview__placeholder {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--text-dim);
pointer-events: none;
z-index: 3;
transition: opacity 0.3s;
}
.custom-preview__canvas-wrap:hover .custom-preview__placeholder {
opacity: 0.8;
}
.custom-preview__placeholder i {
font-size: 3rem;
margin-bottom: var(--space-sm);
opacity: 0.35;
display: block;
color: var(--red-primary);
}
.custom-preview__placeholder span {
font-size: var(--fs-sm);
display: block;
}
.custom-preview__info {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
font-size: var(--fs-xs);
color: var(--text-muted);
flex-wrap: wrap;
}
.custom-preview__info-item {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.custom-preview__info-item i {
color: var(--red-primary);
}
.custom-preview__hint {
margin-top: var(--space-sm);
font-size: var(--fs-xs);
color: var(--text-dim);
}
.custom-controls {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.custom-step {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: var(--space-xl);
transition: border-color var(--transition-base);
}
.custom-step:hover {
border-color: rgba(194, 29, 39, 0.2);
}
.custom-step__header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.custom-step__number {
width: 36px;
height: 36px;
background: var(--gradient-red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: var(--fw-bold);
font-size: var(--fs-sm);
color: #fff;
flex-shrink: 0;
}
.custom-step__title {
font-family: var(--font-heading);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.custom-colors {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.custom-color {
width: 48px;
height: 48px;
border-radius: var(--radius-sm);
border: 3px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
}
.custom-color:hover { transform: scale(1.1); }
.custom-color.active {
border-color: var(--red-primary);
box-shadow: var(--glow-pink);
}
.custom-color.active::after {
content: '\2713';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
font-weight: bold;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.custom-color--black { background: #1a1a1a; }
.custom-color--white { background: #ffffff; border-color: rgba(255,255,255,0.2); }
.custom-color--white.active { border-color: var(--red-primary); }
.custom-color--white.active::after { color: #333; text-shadow: none; }
.custom-quote {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.custom-quote__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.custom-quote__field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.custom-quote__field.full-width {
grid-column: 1 / -1;
}
.custom-quote__label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.custom-quote__input,
.custom-quote__textarea,
.custom-quote__select {
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
color: var(--text-body);
font-size: var(--fs-sm);
font-family: var(--font-body);
transition: all var(--transition-base);
}
.custom-quote__input:focus,
.custom-quote__textarea:focus,
.custom-quote__select:focus {
border-color: var(--red-primary);
box-shadow: 0 0 15px rgba(194, 29, 39, 0.15);
background: rgba(255, 255, 255, 0.06);
outline: none;
}
.custom-quote__input::placeholder,
.custom-quote__textarea::placeholder { color: var(--text-dim); }
.custom-quote__textarea {
resize: vertical;
min-height: 80px;
}
.custom-quote__select {
cursor: pointer;
}
.custom-quote__select option {
background: var(--bg-card);
color: var(--text-body);
}
.custom-quote__submit {
width: 100%;
padding: 1rem;
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: #fff;
background: var(--gradient-red);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-base);
box-shadow: 0 4px 20px rgba(194, 29, 39, 0.4);
position: relative;
overflow: hidden;
}
.custom-quote__submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s;
}
.custom-quote__submit:hover::before { left: 100%; }
.custom-quote__submit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 30px rgba(194, 29, 39, 0.5);
}
.custom-quote__submit:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.custom-quote__submit i { margin-right: var(--space-xs); }
.custom-success {
display: none;
padding: var(--space-2xl) 0;
display: none;
justify-content: center;
}
.custom-success__card {
max-width: 440px;
margin: 0 auto;
text-align: center;
background: var(--bg-card);
border: 1px solid rgba(194, 29, 39, 0.2);
border-radius: var(--radius-lg);
padding: var(--space-2xl) var(--space-xl);
}
.custom-success__icon-wrap {
width: 48px;
height: 48px;
margin: 0 auto var(--space-md);
background: rgba(34, 197, 94, 0.12);
border: 2px solid rgba(34, 197, 94, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #22c55e;
font-size: 1.2rem;
}
.custom-success__title {
font-family: var(--font-heading);
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
color: var(--text-primary);
margin-bottom: var(--space-xs);
}
.custom-success__text {
color: var(--text-muted);
font-size: var(--fs-sm);
line-height: 1.6;
margin-bottom: var(--space-md);
}
.custom-success__contact {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
font-size: var(--fs-xs);
color: var(--text-dim);
margin-bottom: var(--space-lg);
}
.custom-success__contact i {
color: var(--red-primary);
margin-right: 4px;
}
.custom-success__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.custom-success__actions .btn {
font-size: var(--fs-xs);
padding: 0.5rem 1.2rem;
}
.zoom-modal {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
align-items: center;
justify-content: center;
}
.zoom-modal.active {
display: flex;
}
.zoom-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(10px);
}
.zoom-modal__content {
position: relative;
z-index: 1;
max-width: 90vw;
max-height: 90vh;
}
.zoom-modal__close {
position: absolute;
top: -40px;
right: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.zoom-modal__close:hover {
background: var(--red-primary);
border-color: var(--red-primary);
}
.zoom-modal__image-wrap {
border-radius: var(--radius-lg, 12px);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.zoom-modal__image-wrap img {
display: block;
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
}
@media (max-width: 992px) {
.custom-builder__layout {
grid-template-columns: 1fr;
}
.custom-preview {
position: relative;
top: 0;
}
}
@media (max-width: 576px) {
.custom-quote__row {
grid-template-columns: 1fr;
}
.custom-preview__info {
gap: var(--space-sm);
}
.custom-success__contact {
flex-direction: column;
gap: var(--space-xs);
}
}
.forme-mamac { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.forme-greska { margin: .35rem 0 0; font-size: .85rem; font-weight: 600; color: #ff737c; }
[data-forme] [aria-invalid="true"] { border-color: #ff737c !important; box-shadow: 0 0 0 1px rgba(255, 115, 124, .45); }
.forme-rezime { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 3px solid #ff737c; border-radius: 8px; background: rgba(194, 29, 39, .1); color: #fefefe; font-size: .92rem; }
.forme-rezime:empty { display: none; }
.forme-rezime p { margin: 0 0 .3rem; font-weight: 700; }
.forme-rezime ul { margin: 0; padding-left: 1.1rem; }
.forme-rezime a { color: inherit; }
.form-status:empty, .cfgm__msg:empty { display: none; }
.form-status { margin: .8rem 0 0; color: #c2c2c2; font-size: .92rem; }
.forme-status--greska, .cfgm__msg.forme-status--greska { color: #ff737c; }
.forme-salje [type="submit"] { opacity: .7; cursor: progress; }
.forme-hvala { padding: 1.4rem; border: 1px solid rgba(84, 217, 140, .28); border-radius: 12px; background: rgba(46, 204, 113, .08); }
.forme-hvala h2, .forme-hvala h3 { margin: 0 0 .4rem; color: #fefefe; }
.forme-hvala h2:focus, .forme-hvala h3:focus { outline: none; }
.forme-hvala p { margin: 0; color: #c2c2c2; }
.form-opciono { font-weight: 400; color: #8a8686; font-size: .85em; }
.cfgm__izvori { margin-top: .6rem !important; font-size: .85rem; }
.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;
}
}
.seo-page {
padding-top: 80px;
}
.seo-breadcrumbs {
background: var(--bg-secondary, #0a0a14);
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.seo-breadcrumbs__list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0;
padding: 0;
font-size: 0.85rem;
color: rgba(255,255,255,0.5);
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.seo-breadcrumbs__list li:not(:last-child)::after {
content: '›';
margin-left: 8px;
color: rgba(255,255,255,0.3);
}
.seo-breadcrumbs__list a {
color: var(--red-text, #ff4f5e);
text-decoration: none;
transition: color 0.2s;
}
.seo-breadcrumbs__list a:hover {
color: #fff;
}
.seo-hero {
background: linear-gradient(135deg, rgba(194,29,39,0.15) 0%, rgba(10,10,20,0.95) 50%, rgba(194,29,39,0.1) 100%);
padding: 60px 0 50px;
text-align: center;
border-bottom: 1px solid rgba(194,29,39,0.2);
}
.seo-hero__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
color: #fff;
margin: 0 0 16px;
line-height: 1.2;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.seo-hero__intro {
font-size: 1.1rem;
color: rgba(255,255,255,0.75);
max-width: 700px;
margin: 0 auto 28px;
line-height: 1.7;
}
.seo-hero__actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.seo-hero__trust {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
font-size: 0.85rem;
color: rgba(255,255,255,0.6);
}
.seo-hero__trust i {
color: #22c55e;
margin-right: 4px;
}
.seo-builder {
padding: 48px 0 56px;
border-bottom: 1px solid rgba(255,255,255,0.08);
scroll-margin-top: 88px;
}
.seo-builder h2 {
margin: 0 0 8px;
font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.seo-builder > .container > p {
color: rgba(255,255,255,0.75);
max-width: 72ch;
}
.seo-builder__fallback {
margin-top: 20px;
}
.seo-builder__fallback a {
color: #f07880;
text-decoration: underline;
}
.seo-content {
padding: 50px 0;
}
.seo-content__grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.seo-content__main h2 {
font-size: 1.5rem;
color: #fff;
margin: 0 0 12px;
font-weight: 600;
}
.seo-content__main p {
color: rgba(255,255,255,0.75);
line-height: 1.8;
margin: 0 0 20px;
font-size: 1rem;
}
.seo-section {
margin-bottom: 32px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.seo-section:last-child {
border-bottom: none;
}
.seo-list {
list-style: none;
padding: 0;
margin: 16px 0 0;
display: grid;
gap: 10px;
}
.seo-list li {
color: rgba(255,255,255,0.8);
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.seo-list li i {
color: #22c55e;
margin-top: 4px;
flex-shrink: 0;
}
.seo-content__sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.seo-sidebar-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 24px;
}
.seo-sidebar-card h3 {
font-size: 1.1rem;
color: #fff;
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 8px;
}
.seo-sidebar-card h3 i {
color: var(--red-text, #ff4f5e);
}
.seo-sidebar-card ul {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: grid;
gap: 8px;
}
.seo-sidebar-card li {
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 8px;
}
.seo-sidebar-card li i {
color: var(--red-text, #ff4f5e);
width: 16px;
text-align: center;
}
.seo-sidebar-links li {
padding: 0;
}
.seo-sidebar-links a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.2s;
display: block;
padding: 4px 0;
}
.seo-sidebar-links a:hover {
color: var(--red-text, #ff4f5e);
}
.btn--block {
display: block;
width: 100%;
text-align: center;
}
.seo-products {
padding: 50px 0;
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.seo-products__title {
text-align: center;
font-size: 1.75rem;
color: #fff;
margin: 0 0 8px;
}
.seo-products__subtitle {
text-align: center;
color: rgba(255,255,255,0.6);
margin: 0 0 32px;
font-size: 0.95rem;
}
.seo-products__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.seo-product-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: transform 0.2s, border-color 0.2s;
}
.seo-product-card:hover {
transform: translateY(-4px);
border-color: var(--accent, #c21d27);
}
.seo-product-card img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.seo-product-card h3 {
color: #fff;
font-size: 0.9rem;
padding: 12px 12px 4px;
margin: 0;
}
.seo-product-card__price {
padding: 4px 12px 12px;
display: flex;
align-items: center;
gap: 8px;
}
.seo-product-card__price .old {
color: rgba(255,255,255,0.4);
text-decoration: line-through;
font-size: 0.8rem;
}
.seo-product-card__price .current {
color: var(--red-text, #ff4f5e);
font-weight: 700;
font-size: 1rem;
}
.seo-products__cta {
text-align: center;
margin-top: 32px;
}
.seo-faq {
padding: 50px 0;
}
.seo-faq__title {
text-align: center;
font-size: 1.75rem;
color: #fff;
margin: 0 0 32px;
}
.seo-faq__list {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
display: grid;
gap: 12px;
}
.seo-faq__item {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.2s;
}
.seo-faq__item[open] {
border-color: var(--accent, #c21d27);
}
.seo-faq__question {
padding: 16px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
color: #fff;
font-weight: 500;
font-size: 1rem;
list-style: none;
}
.seo-faq__question::-webkit-details-marker {
display: none;
}
.seo-faq__question i {
color: var(--red-text, #ff4f5e);
transition: transform 0.2s;
flex-shrink: 0;
}
.seo-faq__item[open] .seo-faq__question i {
transform: rotate(180deg);
}
.seo-faq__answer {
padding: 0 20px 16px;
}
.seo-faq__answer p {
color: rgba(255,255,255,0.7);
line-height: 1.7;
margin: 0;
}
.seo-cta {
padding: 50px 0;
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.06);
}
.seo-cta__card {
max-width: 800px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, rgba(194,29,39,0.15), rgba(194,29,39,0.05));
border: 1px solid rgba(194,29,39,0.3);
border-radius: 16px;
padding: 48px 32px;
}
.seo-cta__card h2 {
color: #fff;
font-size: 1.75rem;
margin: 0 0 12px;
}
.seo-cta__card p {
color: rgba(255,255,255,0.7);
margin: 0 0 28px;
font-size: 1.05rem;
line-height: 1.6;
}
.seo-cta__buttons {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.seo-related {
padding: 50px 0;
border-top: 1px solid rgba(255,255,255,0.06);
}
.seo-related__title {
text-align: center;
font-size: 1.5rem;
color: #fff;
margin: 0 0 24px;
}
.seo-related__grid {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
}
.seo-related__link {
color: rgba(255,255,255,0.7);
text-decoration: none;
padding: 12px 16px;
border-radius: 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.seo-related__link:hover {
background: rgba(194,29,39,0.1);
border-color: rgba(194,29,39,0.3);
color: #fff;
}
.seo-related__link i {
color: var(--red-text, #ff4f5e);
font-size: 0.75rem;
flex-shrink: 0;
}
.seo-page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (max-width: 900px) {
.seo-content__grid {
grid-template-columns: 1fr;
}
.seo-content__sidebar {
order: -1;
}
.seo-hero {
padding: 40px 0 36px;
}
.seo-hero__title {
font-size: 1.5rem;
}
.seo-hero__trust {
flex-direction: column;
gap: 8px;
}
.seo-products__grid {
grid-template-columns: repeat(2, 1fr);
}
.seo-related__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.seo-products__grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.seo-hero__actions {
flex-direction: column;
align-items: center;
}
.seo-cta__buttons {
flex-direction: column;
align-items: center;
}
}
.cfg, .cfgm, .cfgz {
--gap: 1.5rem;
--radius-l: 16px;
--radius: 12px;
--radius-s: 8px;
--surface: #0e0808;
--bg-1: #0a0606;
--bg: #121010;
--line: rgba(255, 255, 255, 0.10);
--text: #fefefe;
--muted: #b0aaaa;
--muted-2: #8a8686;
--gold: #ff4f5e;
--gold-soft: #c21d27;
--font-display: 'Space Grotesk', sans-serif;
--step--1: 0.85rem;
--ease: cubic-bezier(.4, 0, .2, 1);
--shadow: 0 24px 64px rgba(0, 0, 0, .55);
--ok: #2ecc71;
--danger: #ff6b6b;
}
.cfg{
display:grid; gap:var(--gap); align-items:start;
grid-template-columns:1fr;
}
@media (min-width:980px){ .cfg{ grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); } }
.cfg__stage{
position:relative; background:
radial-gradient(120% 90% at 50% 0%, rgba(194,29,39,.14), transparent 55%),
linear-gradient(180deg, var(--surface), var(--bg-1));
border:1px solid var(--line); border-radius:var(--radius-l); padding:1rem;
overflow:hidden;
}
.cfg__canvas-wrap{ position:relative; width:100%; max-width:520px; margin-inline:auto;
border-radius:var(--radius); background:
radial-gradient(70% 60% at 50% 42%, rgba(245,241,232,.16), rgba(245,241,232,.05) 55%, transparent 72%); }
.cfg__canvas-wrap .canvas-container{ width:100% !important; height:auto !important; aspect-ratio:600/720; }
.cfg__canvas-wrap canvas{ width:100% !important; height:100% !important; }
.cfg__hint{ text-align:center; color:var(--muted-2); font-size:var(--step--1); margin-top:.6rem; }
.cfg__sides{ display:inline-flex; gap:.3rem; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.25rem; margin:0 auto 1rem; }
.cfg__sides button{ position:relative; padding:.45rem 1.1rem; border-radius:999px; background:transparent; border:0; color:var(--muted); font-family:var(--font-display); font-weight:600; font-size:.9rem; cursor:pointer; }
.cfg__sides button.on{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#fff; }
.cfg__sides button.has-design::after{ content:""; position:absolute; top:4px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--gold); border:1px solid var(--bg); }
.cfg__sides button.on.has-design::after{ background:#fff; border-color:transparent; }
.cfg__sidebar-head{ display:flex; justify-content:center; align-items:flex-start; gap:.6rem; position:relative; }
.cfg__zoom{ position:absolute; right:0; top:0; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--muted); transition:.15s var(--ease); cursor:pointer; }
.cfg__zoom:hover{ color:var(--gold); border-color:var(--gold); }
.cfg__zoom svg{ width:18px; height:18px; }
.cfg__empty{ position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
pointer-events:none; border:0; color:var(--muted); padding:1rem;
font-size:.85rem; line-height:1.45; text-align:center; transition:opacity .18s var(--ease); }
.cfg__empty.hide{ display:none; }
.cfg__empty.pinned{ opacity:.14; }
.cfg__empty small{ font-size:.72rem; opacity:.8; }
.cfg__empty-plus{ width:42px; height:42px; display:grid; place-items:center; border:1.5px dashed var(--gold); border-radius:50%; font-size:1.5rem; line-height:1; color:var(--gold); }
.cfg__pin{ position:absolute; transform:translate(-50%,-50%); width:40px; height:40px; display:grid; place-items:center;
border:2px dashed var(--gold); border-radius:50%; color:var(--gold); background:rgba(194,29,39,.16);
font-size:1.4rem; line-height:1; pointer-events:none; opacity:0; transition:opacity .18s var(--ease); z-index:3; }
.cfg__pin.on{ opacity:1; }
.cfg__canvas-wrap.dragover{ outline:2px dashed var(--gold); outline-offset:-6px; }
.cfg__toolbar{ display:flex; justify-content:center; align-items:center; gap:.35rem; margin-top:.8rem; }
.cfg__toolbar button{ width:44px; height:44px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--muted); transition:.15s var(--ease); cursor:pointer; }
.cfg__toolbar button:hover:not(:disabled){ color:var(--gold); border-color:var(--gold); }
.cfg__toolbar button:disabled{ opacity:.35; cursor:default; }
.cfg__toolbar button svg{ width:17px; height:17px; }
.cfg__toolbar #cfgDelete:hover, .cfg__toolbar #cfgClear:hover{ color:var(--danger); border-color:var(--danger); }
.cfg__toolbar-sep{ width:1px; height:22px; background:var(--line); margin:0 .25rem; }
.cfg__panel{ display:flex; flex-direction:column; gap:1.25rem; }
.cfg__group{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; }
.cfg__group > h3{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .85rem; font-family:var(--font-display); }
.cfg__accent{ color:var(--gold); font-weight:700; }
.cfg__seg{ display:flex; gap:.5rem; flex-wrap:wrap; }
.cfg__seg button{ flex:1 1 auto; min-width:90px; padding:.6rem .8rem; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--bg); color:var(--text); font-weight:600; font-size:.92rem; transition:.18s var(--ease); cursor:pointer; }
.cfg__seg button.on{ border-color:var(--gold); color:var(--gold); background:rgba(194,29,39,.10); }
.cfg__swatches{ display:flex; flex-wrap:wrap; gap:.55rem; }
.cfg__sw{ width:40px; height:40px; border-radius:50%; border:2px solid var(--line); position:relative; cursor:pointer; transition:transform .15s var(--ease); }
.cfg__sw:hover{ transform:scale(1.08); }
.cfg__sw.on{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(194,29,39,.30); }
.cfg__sw.on::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:.8rem; color:var(--mix,#000); }
.cfg__tools{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.cfg__tool{ display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.8rem .5rem; border:1px dashed var(--line); border-radius:var(--radius-s); background:var(--bg); color:var(--text); font-size:.82rem; font-weight:600; cursor:pointer; }
.cfg__tool:hover{ border-color:var(--gold); color:var(--gold); border-style:solid; }
.cfg__tool svg{ width:22px; height:22px; }
.cfg__row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.cfg__row label{ font-size:.82rem; color:var(--muted); min-width:64px; }
.cfg input[type=text], .cfg input[type=email], .cfg input[type=tel], .cfg input[type=number], .cfg select, .cfg textarea,
.cfgm input[type=text], .cfgm input[type=email], .cfgm input[type=tel], .cfgm input[type=number], .cfgm select, .cfgm textarea{
width:100%; padding:.6rem .7rem; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-s); color:var(--text); font:inherit;
}
.cfg input:focus, .cfg select:focus, .cfg textarea:focus,
.cfgm input:focus, .cfgm select:focus, .cfgm textarea:focus{ outline:none; border-color:var(--gold); }
.cfg__inline{ display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center; }
.cfg__color-in{ width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:8px; background:none; }
.cfg__sizes{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
@media(min-width:420px){ .cfg__sizes{ grid-template-columns:repeat(6,1fr); } }
.cfg__size{ text-align:center; }
.cfg__size span{ display:block; font-size:.72rem; color:var(--muted); margin-bottom:.25rem; }
.cfg__size input{ text-align:center; padding:.4rem .2rem; }
.cfg__actions{ display:block; }
.cfg__submit{ width:100%; justify-content:center; text-align:center; font-size:1.02rem; padding:.9rem 1.2rem; }
.cfg__tpls{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.9rem; }
.cfg__tpls-label{ font-size:.74rem; color:var(--muted-2); letter-spacing:.06em; text-transform:uppercase; margin-right:.2rem; }
.cfg__tpls button{ padding:.35rem .7rem; border-radius:999px; border:1px dashed var(--line); background:var(--bg); color:var(--muted); font-size:.8rem; font-weight:600; transition:.15s var(--ease); cursor:pointer; }
.cfg__tpls button:hover{ color:var(--gold); border-color:var(--gold); border-style:solid; }
.cfg__tool--mini{ flex:0 0 auto; flex-direction:row; padding:.45rem .8rem; }
.cfg__tool--mini.on{ border-color:var(--gold); color:var(--gold); border-style:solid; background:rgba(194,29,39,.10); }
.cfg__textopts{ display:none; margin-top:.9rem; padding-top:.9rem; border-top:1px dashed var(--line); }
.cfg__textopts.show{ display:block; }
.cfg__alt{ text-align:center; font-size:var(--step--1); color:var(--muted); margin-top:.4rem; }
.cfg__alt a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.cfgm{ position:fixed; inset:0; z-index:1200; display:none; place-items:center; padding:1rem; background:rgba(2,2,2,.78); backdrop-filter:blur(6px); }
.cfgm.open{ display:grid; }
.cfgm__box{ width:min(560px,100%); max-height:92vh; overflow:auto; background:linear-gradient(180deg,var(--surface),var(--bg-1)); border:1px solid var(--line); border-radius:var(--radius-l); padding:clamp(1.2rem,3vw,2rem); box-shadow:var(--shadow); }
.cfgm__box h3{ margin-top:0; }
.cfgm__previews{ display:flex; gap:.7rem; justify-content:center; margin:.4rem 0 1.1rem; }
.cfgm__previews figure{ margin:0; text-align:center; }
.cfgm__previews img{ width:120px; height:auto; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.cfgm__previews figcaption{ font-size:.72rem; color:var(--muted); margin-top:.3rem; }
.cfgm__form{ display:flex; flex-direction:column; gap:.8rem; }
.cfgm__close{ float:right; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:1.1rem; cursor:pointer; }
.cfgm__msg{ padding:.7rem .9rem; border-radius:var(--radius-s); font-size:.9rem; display:none; }
.cfgm__msg.ok{ display:block; background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.4); color:var(--ok); }
.cfgm__msg.err{ display:block; background:rgba(255,93,93,.1); border:1px solid rgba(255,93,93,.4); color:var(--danger); }
.cfg__loading{ position:absolute; inset:0; display:none; place-items:center; background:rgba(2,2,2,.6); border-radius:var(--radius-l); z-index:5; }
.cfg__loading.on{ display:grid; }
.cfg__spin{ width:42px; height:42px; border:3px solid rgba(194,29,39,.30); border-top-color:var(--gold); border-radius:50%; animation:cfgspin .8s linear infinite; }
@keyframes cfgspin{ to{ transform:rotate(360deg); } }
.cfgz{ position:fixed; inset:0; z-index:1300; display:none; place-items:center; padding:1.5rem; background:rgba(2,2,2,.88); backdrop-filter:blur(8px); cursor:zoom-out; }
.cfgz.open{ display:grid; }
.cfgz img{ max-width:min(92vw,640px); max-height:88vh; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow); }
.cfgz__close{ position:absolute; top:1rem; right:1rem; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:1.15rem; cursor:pointer; }
.cfgz__close:hover{ color:var(--gold); border-color:var(--gold); }
.custom-fallback{ max-width:820px; margin:3rem auto 0; padding-top:2rem; border-top:1px solid var(--border-subtle, rgba(255,255,255,.06)); }
.custom-fallback__head{ text-align:center; margin-bottom:1.4rem; }
.custom-fallback__head h2{ font-size:clamp(1.4rem,3.4vw,1.9rem); margin:0 0 .5rem; }
.custom-fallback__head p{ color:#b0aaaa; max-width:560px; margin:0 auto; font-size:.95rem; }
.page-custom .fab-container { display: none; }
.forme-mamac { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.forme-greska { margin: .35rem 0 0; font-size: .85rem; font-weight: 600; color: #ff737c; }
[data-forme] [aria-invalid="true"] { border-color: #ff737c !important; box-shadow: 0 0 0 1px rgba(255, 115, 124, .45); }
.forme-rezime { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 3px solid #ff737c; border-radius: 8px; background: rgba(194, 29, 39, .1); color: #fefefe; font-size: .92rem; }
.forme-rezime:empty { display: none; }
.forme-rezime p { margin: 0 0 .3rem; font-weight: 700; }
.forme-rezime ul { margin: 0; padding-left: 1.1rem; }
.forme-rezime a { color: inherit; }
.form-status:empty, .cfgm__msg:empty { display: none; }
.form-status { margin: .8rem 0 0; color: #c2c2c2; font-size: .92rem; }
.forme-status--greska, .cfgm__msg.forme-status--greska { color: #ff737c; }
.forme-salje [type="submit"] { opacity: .7; cursor: progress; }
.forme-hvala { padding: 1.4rem; border: 1px solid rgba(84, 217, 140, .28); border-radius: 12px; background: rgba(46, 204, 113, .08); }
.forme-hvala h2, .forme-hvala h3 { margin: 0 0 .4rem; color: #fefefe; }
.forme-hvala h2:focus, .forme-hvala h3:focus { outline: none; }
.forme-hvala p { margin: 0; color: #c2c2c2; }
.form-opciono { font-weight: 400; color: #8a8686; font-size: .85em; }
.cfgm__izvori { margin-top: .6rem !important; font-size: .85rem; }
.cfgm__msg[data-forme-status]:not(:empty) { display: block; padding: 0; background: none; border: 0; color: #c2c2c2; }
.cfgm__msg[data-forme-status].forme-status--greska { color: #ff737c; }
.cfgm__hvala { margin-top: .4rem; }
.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;
}