@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@600;700&family=Inter:wght@400;500;600&display=swap");

:root {
--font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-heading: "Orbitron", sans-serif;
--font-ui: "Rajdhani", sans-serif;
--color-brand-green: #3df293;
--color-brand-green-darker: #29d882;
--color-brand-green-glow: rgba(61, 242, 147, 0.45);
--color-brand-green-hover: #4ff7a7;
--color-brand-purple: #805ad5;
--color-xbox-green: #107C10;
--color-pc-blue: #0078D4;
--color-bg-dark: #0A0D0F;
--color-bg-medium: #101418;
--color-bg-light: #181D22;
--color-bg-card-hover: #1E242A;
--color-text-primary: #E4E8EC;
--color-text-secondary: #AAB2BB;
--color-text-muted: #78828E;
--color-text-on-accent: #080A0C;
--color-text-on-solid-tag: #FFFFFF;
--color-border: #272D34;
--color-border-interactive: #4A5568;
--color-border-accent: var(--color-brand-green);
--color-accent-red: #E53E3E;
--color-accent-red-darker: #C53030;
--color-accent-red-hover: #F56565;
--color-accent-red-glow: rgba(229, 62, 62, 0.4);
--color-accent-yellow: #D69E2E;
--color-accent-yellow-darker: #B7791F;
--color-accent-yellow-hover: #ECC94B;
--color-accent-yellow-glow: rgba(214, 158, 46, 0.4);
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-color-rgb: 61, 242, 147;
--shadow-elevation-low: 0 2px 5px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0, 0.05);
--shadow-elevation-medium: 0 5px 12px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.08);
--shadow-elevation-high: 0 10px 20px rgba(0,0,0,0.15), 0 6px 15px rgba(0,0,0,0.1);
--shadow-glow-green: 0 0 18px var(--color-brand-green-glow);
--shadow-glow-red: 0 0 18px var(--color-accent-red-glow);
--shadow-glow-yellow: 0 0 18px var(--color-accent-yellow-glow);
--transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--animation-duration-normal: 0.6s;
--container-padding: 1rem;
}

@media (min-width: 768px) {
:root {
--container-padding: 1.5rem;
}
}

@-webkit-keyframes fadeInUp {
from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

.animate-on-load-fade-in-up {
-webkit-animation: fadeInUp var(--animation-duration-normal) var(--transition-medium) backwards;
animation: fadeInUp var(--animation-duration-normal) var(--transition-medium) backwards;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: opacity, transform;
}

html { scroll-behavior: smooth; font-size: 16px; overflow-x:hidden; }
body {
background-color: var(--color-bg-dark);
color: var(--color-text-primary);
font-family: var(--font-body);
line-height: 1.7;
display: flex;
flex-direction: column;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
max-width: 100%;
transition: padding-bottom 0.3s ease-in-out;
}
.container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }

.site-header { background-color: var(--color-bg-medium); padding: 1.5rem 0; -webkit-transition: background-color var(--transition-medium); transition: background-color var(--transition-medium); width: 100%; }
@media (min-width: 768px) { .site-header { padding: 1.75rem 0; } }
.site-header__inner { text-align: center; }
.site-header__logo-link { color: var(--color-text-primary); text-decoration: none; display: inline-block; -webkit-transition: -webkit-transform var(--transition-medium); transition: -webkit-transform var(--transition-medium); transition: transform var(--transition-medium); transition: transform var(--transition-medium), -webkit-transform var(--transition-medium); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.site-header__logo-link:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }
.site-header__logo-text { font-family: var(--font-heading); font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -0.5px; display: flex; justify-content: center; align-items: baseline; gap: 0.25rem; margin: 0; }
.site-header__logo-text .primary { color: var(--color-text-primary); font-weight: 700; }
.site-header__logo-text .glow { color: var(--color-brand-green); font-weight: 900; text-shadow: 0 0 10px var(--color-brand-green-glow), 0 0 20px var(--color-brand-green-glow), 0 0 30px rgba(var(--shadow-color-rgb), 0.2); -webkit-transition: text-shadow var(--transition-medium), color var(--transition-medium); transition: text-shadow var(--transition-medium), color var(--transition-medium); }
.site-header__logo-text .dotcz { font-family: var(--font-ui); font-size: clamp(0.8rem, 2.4vw, 1.15rem); align-self: flex-end; color: var(--color-text-secondary); opacity: 0.8; padding-bottom: 0.15em; }
.site-header__subtitle { color: var(--color-text-secondary); font-size: clamp(0.75rem, 2vw, 1rem); margin-top: 0.25rem; font-weight: 500; letter-spacing: 0.2px; }
.site-header__underline { width: 60px; height: 3.5px; background-image: linear-gradient(90deg, var(--color-brand-green), var(--color-brand-green-darker)); margin: 0.5rem auto 0; border-radius: var(--radius-xs); -webkit-transform-origin: center; transform-origin: center; -webkit-animation: pulseUnderline 2.5s infinite alternate ease-in-out; animation: pulseUnderline 2.5s infinite alternate ease-in-out; box-shadow: 0 0 8px var(--color-brand-green-glow); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, opacity; -webkit-transform: translateZ(0); transform: translateZ(0); }

@-webkit-keyframes pulseUnderline {
0% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; }
50% { -webkit-transform: scaleX(1.2); transform: scaleX(1.2); opacity: 0.7; }
100% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; }
}
@keyframes pulseUnderline {
0% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; }
50% { -webkit-transform: scaleX(1.2); transform: scaleX(1.2); opacity: 0.7; }
100% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; }
}

.site-main { flex-grow: 1; width: 100%; overflow-x: hidden; }
.section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 768px) { .section { padding-top: 2rem; padding-bottom: 2rem; } }
@media (min-width: 1024px) { .section { padding-top: 2.5rem; padding-bottom: 2.5rem; } }

.section__title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2vw, 2.2rem); line-height: 1.35; color: var(--color-text-primary); margin-bottom: 1rem; font-weight: 700; letter-spacing: 0.5px; }
@media (min-width: 768px) { .section__title { margin-bottom: 1.25rem; line-height: 1.4; } }
.section__title i { color: var(--color-brand-green); margin-right: 0.5rem; font-size: 0.9em; -webkit-animation: iconBeat 2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); animation: iconBeat 2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); vertical-align: baseline; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
@-webkit-keyframes iconBeat {
0%, 100% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); }
20% { -webkit-transform: scale(1.05) rotate(-3deg); transform: scale(1.05) rotate(-3deg); }
40% { -webkit-transform: scale(1) rotate(3deg); transform: scale(1) rotate(3deg); }
60% { -webkit-transform: scale(1.05) rotate(-1deg); transform: scale(1.05) rotate(-1deg); }
80% { -webkit-transform: scale(1) rotate(1deg); transform: scale(1) rotate(1deg); }
}
@keyframes iconBeat {
0%, 100% { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); }
20% { -webkit-transform: scale(1.05) rotate(-3deg); transform: scale(1.05) rotate(-3deg); }
40% { -webkit-transform: scale(1) rotate(3deg); transform: scale(1) rotate(3deg); }
60% { -webkit-transform: scale(1.05) rotate(-1deg); transform: scale(1.05) rotate(-1deg); }
80% { -webkit-transform: scale(1) rotate(1deg); transform: scale(1) rotate(1deg); }
}
.section__lead { font-size: clamp(0.9rem, 2.2vw, 1.1rem); line-height: 1.7; color: var(--color-text-secondary); max-width: 780px; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .section__lead { line-height: 1.8; margin-bottom: 1.75rem; } }

.trust-box-wrapper { padding-bottom: 1.5rem; margin-top: 0; }
#top-intro-placeholder .trust-box-wrapper { margin-top: 1.5rem; padding-bottom: 0; }

#global-trust-box-placeholder.trust-box-wrapper {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
margin-top:0;
}
@media (min-width: 768px) {
#global-trust-box-placeholder.trust-box-wrapper {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
@media (min-width: 1024px) {
#global-trust-box-placeholder.trust-box-wrapper {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}

.trust-box { display: flex; flex-direction: column; align-items: center; gap: 1rem; background-color: var(--color-bg-light); border: 1px solid var(--color-border); padding: 1.5rem; border-radius: var(--radius-md); max-width: 620px; margin-left: auto; margin-right: auto; margin-top:0; margin-bottom:0; box-shadow: var(--shadow-elevation-medium); text-align: center; -webkit-transition: -webkit-transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-fast); transition: -webkit-transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-fast); transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-fast); transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-fast), -webkit-transform var(--transition-medium); border-left: 3px solid var(--color-brand-green); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, box-shadow; }
.trust-box:hover { -webkit-transform: translateY(-4px) scale(1.01); transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-elevation-high), 0 0 15px var(--color-brand-green-glow); border-color: var(--color-brand-green); }
@media (min-width: 576px) { .trust-box { flex-direction: row; gap: 1.5rem; text-align: left; padding: 1.75rem; } }
.trust-box__icon { color: var(--color-brand-green); font-size: 2rem; background-color: rgba(var(--shadow-color-rgb), 0.1); border-radius: 50%; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-transition: -webkit-transform var(--transition-medium); transition: -webkit-transform var(--transition-medium); transition: transform var(--transition-medium); transition: transform var(--transition-medium), -webkit-transform var(--transition-medium); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.trust-box:hover .trust-box__icon { -webkit-transform: rotate(-12deg) scale(1.15); transform: rotate(-12deg) scale(1.15); }
.trust-box__content { font-size: 0.95rem; line-height: 1.6; }
.trust-box__line { color: var(--color-text-primary); font-weight: 500; }
.trust-box__line .highlight { color: var(--color-brand-green); font-weight: 700; }
.trust-box__rating { margin-top: 0.5rem; font-size: 0.88rem; color: #FFD700; display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; justify-content: center; }
.trust-box__rating i { -webkit-transition: -webkit-transform 0.1s ease-in-out; transition: -webkit-transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.trust-box:hover .trust-box__rating i { -webkit-animation: starPop 0.5s ease-out forwards; animation: starPop 0.5s ease-out forwards; }
@-webkit-keyframes starPop { 0% {-webkit-transform: scale(1);transform: scale(1);} 50% {-webkit-transform: scale(1.3) rotate(10deg);transform: scale(1.3) rotate(10deg);} 100% {-webkit-transform: scale(1);transform: scale(1);} }
@keyframes starPop { 0% {-webkit-transform: scale(1);transform: scale(1);} 50% {-webkit-transform: scale(1.3) rotate(10deg);transform: scale(1.3) rotate(10deg);} 100% {-webkit-transform: scale(1);transform: scale(1);} }
.trust-box__rating i:nth-child(2) { -webkit-animation-delay: 0.05s !important; animation-delay: 0.05s !important; }
.trust-box__rating i:nth-child(3) { -webkit-animation-delay: 0.1s !important; animation-delay: 0.1s !important; }
.trust-box__rating i:nth-child(4) { -webkit-animation-delay: 0.15s !important; animation-delay: 0.15s !important; }
.trust-box__rating i:nth-child(5) { -webkit-animation-delay: 0.2s !important; animation-delay: 0.2s !important; }
@media (min-width: 576px) { .trust-box__rating { justify-content: flex-start; } }
.trust-box__rating .rating-value, .trust-box__rating .rating-count { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 500; }
.trust-box__rating .rating-value { color: var(--color-text-primary); font-weight: 600; }

#catalog-intro-placeholder.section--intro-category { padding-top: 0; padding-bottom: 1.5rem; }
#catalog-intro-placeholder .section__title { margin-bottom: 0.75rem; }
#catalog-intro-placeholder .section__lead { margin-bottom: 0; }

.purchase-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .purchase-grid { gap: 2rem; } }
@media (min-width: 992px) { .purchase-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }
.purchase-card { background: linear-gradient(145deg, var(--color-bg-light), var(--color-bg-medium)); border-radius: var(--radius-lg); padding: 1.5rem; border: 1px solid var(--color-border); -webkit-transition: -webkit-transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium); transition: -webkit-transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium); transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium); transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium), -webkit-transform var(--transition-medium); box-shadow: var(--shadow-elevation-medium); display: flex; flex-direction: column; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, box-shadow; }
@media (min-width: 768px) { .purchase-card { padding: 1.75rem; } }
.purchase-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 40%); -webkit-transition: opacity var(--transition-slow); transition: opacity var(--transition-slow); opacity: 0; }
.purchase-card:hover::before { opacity: 1; }
.purchase-card:hover { -webkit-transform: translateY(-6px) scale(1.015); transform: translateY(-6px) scale(1.015); }
.purchase-card--europe { border-left: 5px solid var(--color-accent-red); }
.purchase-card--europe:hover { border-color: var(--color-accent-red); box-shadow: var(--shadow-elevation-high), var(--shadow-glow-red); }
.purchase-card--foreign { border-left: 5px solid var(--color-accent-yellow); }
.purchase-card--foreign:hover { border-color: var(--color-accent-yellow); box-shadow: var(--shadow-elevation-high), var(--shadow-glow-yellow); }
.purchase-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; position: relative; z-index: 1; }
.purchase-card__title { font-family: var(--font-ui); font-size: 1.2rem; font-weight: 700; margin:0; line-height: 1.4; }
@media (min-width: 768px) { .purchase-card__title { font-size: 1.3rem; line-height: 1.45; } }
.purchase-card__title i { font-size: 0.95em; margin-right: 0.5rem; -webkit-transition: -webkit-transform var(--transition-fast); transition: -webkit-transform var(--transition-fast); transition: transform var(--transition-fast); transition: transform var(--transition-fast), -webkit-transform var(--transition-fast); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.purchase-card:hover .purchase-card__title i { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
.purchase-card--europe .purchase-card__title { color: var(--color-accent-red); }
.purchase-card--foreign .purchase-card__title { color: var(--color-accent-yellow); }
.purchase-card__info-link { color: var(--color-text-muted); font-size: 1.3rem; -webkit-transition: color var(--transition-fast), -webkit-transform var(--transition-fast); transition: color var(--transition-fast), -webkit-transform var(--transition-fast); transition: color var(--transition-fast), transform var(--transition-fast); transition: color var(--transition-fast), transform var(--transition-fast), -webkit-transform var(--transition-fast); padding: 0.25rem; line-height: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.purchase-card__info-link:hover { color: var(--color-text-primary); -webkit-transform: scale(1.15) rotate(10deg); transform: scale(1.15) rotate(10deg); }
.purchase-card__description { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 1rem; line-height: 1.6; position: relative; z-index: 1;}
@media (min-width: 768px) { .purchase-card__description { font-size: 0.88rem; line-height: 1.7; } }
.purchase-card__description strong { color: var(--color-text-primary); font-weight: 600; }
.purchase-card__rating { font-size: 0.85rem; color: #FFD700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.25rem; position: relative; z-index: 1;}
@media (min-width: 768px) { .purchase-card__rating { font-size: 0.88rem; } }
.text-secondary-small { font-size: 0.78rem; color: var(--color-text-muted); margin-left: 0.25rem;}
@media (min-width: 768px) { .text-secondary-small { font-size: 0.8rem; } }
.purchase-card__features { font-size: 0.8rem; color: var(--color-text-secondary); list-style: none; padding-left: 0; margin: 0.5rem 0 1.25rem; flex-grow: 1; position: relative; z-index: 1;}
@media (min-width: 768px) { .purchase-card__features { font-size: 0.82rem; } }
.purchase-card__features li { padding-left: 0; margin-bottom: 0.4rem; display: flex; align-items: flex-start; }
@media (min-width: 768px) { .purchase-card__features li { margin-bottom: 0.5rem; } }
.purchase-card__features i { margin-right: 0.5rem; margin-top: 0.2em; flex-shrink: 0; color: var(--color-brand-green); font-size: 0.95em; -webkit-transition: -webkit-transform var(--transition-fast); transition: -webkit-transform var(--transition-fast); transition: transform var(--transition-fast); transition: transform var(--transition-fast), -webkit-transform var(--transition-fast); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.purchase-card__features li:hover i { -webkit-transform: scale(1.2); transform: scale(1.2); color: var(--color-brand-green-darker); }
.purchase-card__subheading { font-size: 0.9rem; font-weight: 600; color: var(--color-text-primary); margin: 1rem 0 0.75rem; position: relative; z-index: 1;}
@media (min-width: 768px) { .purchase-card__subheading { font-size: 0.95rem; } }
.purchase-card__variants { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; position: relative; z-index: 1;}
@media (min-width: 768px) { .purchase-card__variants { gap: 0.75rem; } }
.variant-button { padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.78rem; background-color: var(--color-bg-medium); border: 1px solid var(--color-border-interactive); color: var(--color-text-secondary); cursor: pointer; -webkit-transition: var(--transition-medium); transition: var(--transition-medium); font-family: var(--font-ui); position: relative; letter-spacing: 0.3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, background-color, border-color, color, box-shadow; }
@media (min-width: 768px) { .variant-button { padding: 0.6rem 1rem; font-size: 0.82rem; } }
.variant-button:hover { border-color: var(--color-brand-green); color: var(--color-brand-green); -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.variant-button.active { color: var(--color-text-on-accent); background-image: linear-gradient(45deg, var(--color-brand-green-hover), var(--color-brand-green)); border-color: var(--color-brand-green); box-shadow: 0 0 12px var(--color-brand-green-glow), inset 0 1px 2px rgba(255,255,255,0.2); -webkit-transform: scale(1.05) translateY(-1px); transform: scale(1.05) translateY(-1px); }
.purchase-card--europe .variant-button:hover:not(.active) { border-color: var(--color-accent-red); color: var(--color-accent-red); }
.purchase-card--europe .variant-button.active { background-image: linear-gradient(45deg, var(--color-accent-red-hover), var(--color-accent-red)); border-color: var(--color-accent-red-darker); color: var(--color-text-primary); box-shadow: 0 0 12px var(--color-accent-red-glow), inset 0 1px 2px rgba(255,255,255,0.1); }
.purchase-card--foreign .variant-button:hover:not(.active) { border-color: var(--color-accent-yellow); color: var(--color-accent-yellow); }
.purchase-card--foreign .variant-button.active { background-image: linear-gradient(45deg, var(--color-accent-yellow-hover), var(--color-accent-yellow)); border-color: var(--color-accent-yellow-darker); color: var(--color-text-on-accent); box-shadow: 0 0 12px var(--color-accent-yellow-glow), inset 0 1px 2px rgba(0,0,0,0.1); }
.purchase-card__meta { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; position: relative; z-index: 1;}
@media (min-width: 768px) { .purchase-card__meta { font-size: 0.78rem; } }
.purchase-card__meta i { margin-right: 0.25rem; font-size: 0.95em; }
.purchase-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; margin-top: auto; position: relative; z-index: 1;}
@media (min-width: 768px) { .purchase-card__actions { gap: 1rem; } }
@media (min-width: 500px) { .purchase-card__actions { flex-direction: row; align-items: center; justify-content: space-between; } }
.price-display { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
@media (min-width: 768px) { .price-display { gap: 0.5rem; } }
.price-display__label { font-size: 0.85rem; color: var(--color-text-secondary); }
@media (min-width: 768px) { .price-display__label { font-size: 0.9rem; } }
.price-display__current-value { font-size: 1.4rem; font-weight: 700; font-family: var(--font-ui); }
@media (min-width: 768px) { .price-display__current-value { font-size: 1.5rem; } }
.purchase-card--europe .price-display__current-value { color: var(--color-accent-red); text-shadow: 0 0 8px var(--color-accent-red-glow); }
.purchase-card--foreign .price-display__current-value { color: var(--color-accent-yellow); text-shadow: 0 0 8px var(--color-accent-yellow-glow); }
.price-display__original-value {
color: var(--color-text-muted);
font-size: 0.9em;
margin-left: 0.5rem;
text-decoration: line-through;
font-weight: 500;
font-family: var(--font-ui);
}

.btn { padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight: 700; font-size: 1rem; text-decoration: none; -webkit-transition: var(--transition-medium); transition: var(--transition-medium); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; font-family: var(--font-ui); letter-spacing: 0.8px; position:relative; overflow:hidden; text-transform: uppercase; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, background-image, box-shadow; }
@media (min-width: 768px) { .btn { padding: 0.85rem 1.75rem; font-size: 1.05rem; } }
.btn i { margin-right: 0.5rem; font-size: 0.95em; -webkit-transition: -webkit-transform var(--transition-medium); transition: -webkit-transform var(--transition-medium); transition: transform var(--transition-medium); transition: transform var(--transition-medium), -webkit-transform var(--transition-medium); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.btn:hover i { -webkit-transform: rotate(-8deg) scale(1.15); transform: rotate(-8deg) scale(1.15); }
.btn--primary { color: var(--color-text-on-accent); border-color: transparent; }
.btn--primary:hover { -webkit-transform: translateY(-3px) scale(1.03); transform: translateY(-3px) scale(1.03); }
.btn:active { -webkit-transform: translateY(-1px) scale(0.98); transform: translateY(-1px) scale(0.98); }
.purchase-card--europe .btn--buy { background-image: linear-gradient(45deg, var(--color-accent-red-hover) 0%, var(--color-accent-red) 50%, var(--color-accent-red-darker) 100%); border-color: var(--color-accent-red-darker); color: var(--color-text-primary); box-shadow: 0 4px 12px var(--color-accent-red-glow), inset 0 -2px 1px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.15); }
.purchase-card--europe .btn--buy:hover { background-image: linear-gradient(45deg, var(--color-accent-red) 0%, var(--color-accent-red-hover) 50%, var(--color-accent-red) 100%); box-shadow: 0 6px 18px var(--color-accent-red-glow), inset 0 -1px 1px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.1); }
.purchase-card--foreign .btn--buy { background-image: linear-gradient(45deg, var(--color-accent-yellow-hover) 0%, var(--color-accent-yellow) 50%, var(--color-accent-yellow-darker) 100%); border-color: var(--color-accent-yellow-darker); color: var(--color-text-on-accent); box-shadow: 0 4px 12px var(--color-accent-yellow-glow), inset 0 -2px 1px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.05); }
.purchase-card--foreign .btn--buy:hover { background-image: linear-gradient(45deg, var(--color-accent-yellow) 0%, var(--color-accent-yellow-hover) 50%, var(--color-accent-yellow) 100%); box-shadow: 0 6px 18px var(--color-accent-yellow-glow), inset 0 -1px 1px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.05); }

.platform-toggle { display: flex; justify-content: center; margin-bottom: 1.5rem; background-color: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; width: fit-content; margin-left: auto; margin-right: auto; box-shadow: var(--shadow-elevation-low); padding: 0.25rem; flex-wrap: wrap; }
@media (max-width: 420px) { .platform-toggle { width: 100%; max-width: 340px; justify-content: stretch; } .platform-toggle__button { flex-grow: 1; } }
.platform-toggle__button { flex: 1 1 auto; padding: 0.6rem 1rem; background: transparent; border: none; color: var(--color-text-secondary); text-transform: uppercase; font-weight: 700; font-size: 0.8rem; -webkit-transition: var(--transition-medium); transition: var(--transition-medium); cursor: pointer; position: relative; border-radius: var(--radius-sm); font-family: var(--font-ui); white-space: nowrap; letter-spacing: 0.7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, background-image, color, box-shadow; }
@media (min-width: 576px) { .platform-toggle__button { font-size: 0.9rem; padding: 0.65rem 1.25rem; } }
@media (min-width: 768px) { .platform-toggle__button { font-size: 0.95rem; padding: 0.75rem 1.5rem; } }
.platform-toggle__button.active { background-image: linear-gradient(45deg, var(--color-brand-green-hover), var(--color-brand-green)); color: var(--color-text-on-accent); box-shadow: 0 0 12px var(--color-brand-green-glow); -webkit-transform: scale(1.05); transform: scale(1.05); }
.platform-toggle__button:hover:not(.active) { color: var(--color-text-primary); background-color: var(--color-bg-card-hover); -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.platform-toggle__button::before { content: ""; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 3px; background-color: var(--color-brand-green); -webkit-transition: width var(--transition-medium); transition: width var(--transition-medium); border-radius: 2px; }
.platform-toggle__button.active::before { width: 60%; box-shadow: 0 0 5px var(--color-brand-green-glow); }
.platform-toggle__button:hover:not(.active)::before { width: 40%; }

.game-loader { text-align: center; padding: 2.5rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.spinner { width: 52px; height: 52px; border: 4.5px solid rgba(var(--shadow-color-rgb), 0.2); border-top-color: var(--color-brand-green); border-radius: 50%; -webkit-animation: spin 1s linear infinite, glowPulseSpinner 1.4s ease-in-out infinite alternate; animation: spin 1s linear infinite, glowPulseSpinner 1.4s ease-in-out infinite alternate; }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes glowPulseSpinner { 0%, 100% { box-shadow: 0 0 0 rgba(var(--shadow-color-rgb),0); } 50% { box-shadow: 0 0 22px var(--color-brand-green-glow); } }
@keyframes glowPulseSpinner { 0%, 100% { box-shadow: 0 0 0 rgba(var(--shadow-color-rgb),0); } 50% { box-shadow: 0 0 22px var(--color-brand-green-glow); } }
.game-loader__text { color: var(--color-text-secondary); margin-top: 1.25rem; font-weight: 500; font-size: 0.95rem; }

.game-grid {
outline: none;
-webkit-transition: opacity 0.35s ease-in-out;
transition: opacity 0.35s ease-in-out;
}
.game-grid:focus, .game-grid:focus-visible {
outline: none;
box-shadow: none;
}
.game-item { display: flex; }
.game-card {
background-color: var(--color-bg-light);
border-radius: var(--radius-md);
overflow: hidden;
-webkit-transition: -webkit-transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-slow);
transition: -webkit-transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-slow);
transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-slow);
transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-slow), -webkit-transform var(--transition-medium);
box-shadow: var(--shadow-elevation-low);
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
position:relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform, box-shadow;
isolation: isolate;
}
.game-card:hover {
-webkit-transform: translateY(-5px) scale(1.03);
transform: translateY(-5px) scale(1.03);
box-shadow: 0 8px 16px rgba(0,0,0,0.2), 0 0 15px var(--color-brand-green-glow);
border-color: var(--color-border-accent);
}
.game-card__image-wrapper { position: relative; background-color: var(--color-bg-medium); overflow: hidden; border-bottom: 1px solid var(--color-border); }
.game-card__image {
width: 100%;
height: auto;
aspect-ratio: 3/4;
object-fit: cover;
display: block;
-webkit-transition: -webkit-transform var(--transition-slow), filter var(--transition-medium);
transition: -webkit-transform var(--transition-slow), filter var(--transition-medium);
transition: transform var(--transition-slow), filter var(--transition-medium);
transition: transform var(--transition-slow), filter var(--transition-medium), -webkit-transform var(--transition-slow);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}
.game-card:hover .game-card__image { -webkit-transform: scale(1.08); transform: scale(1.08); filter: brightness(1.05); }
.game-card__image-overlay-top-right { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; z-index: 1; }
.game-card__tag { padding: 0.3rem 0.6rem; font-size: 0.75rem; border-radius: var(--radius-xs); font-weight: 700; font-family: var(--font-ui); line-height: 1.4; display: inline-flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.3); text-shadow: 0 1px 1px rgba(0,0,0,0.4); -webkit-transition: -webkit-transform var(--transition-fast), box-shadow var(--transition-fast); transition: -webkit-transform var(--transition-fast), box-shadow var(--transition-fast); transition: transform var(--transition-fast), box-shadow var(--transition-fast); transition: transform var(--transition-fast), box-shadow var(--transition-fast), -webkit-transform var(--transition-fast); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.game-card:hover .game-card__tag { -webkit-transform: translateX(-3px) scale(1.05); transform: translateX(-3px) scale(1.05); box-shadow: 0 3px 6px rgba(0,0,0,0.4); }
.game-card__tag--xbox-series-x-s { background-image: linear-gradient(45deg, #107C10, #0E6B0E); color: var(--color-text-on-solid-tag); }
.game-card__tag--xbox-one { background-image: linear-gradient(45deg, var(--color-brand-green), var(--color-brand-green-darker)); color: var(--color-text-on-accent); }
.game-card__tag--pc { background-image: linear-gradient(45deg, #0078D4, #005A9E); color: var(--color-text-on-solid-tag); }
.game-card__tag--cloud { background-image: linear-gradient(45deg, var(--color-brand-purple), color-mix(in srgb, var(--color-brand-purple) 80%, black)); color: var(--color-text-on-solid-tag); }
.game-card__body { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; position:relative; z-index:1; }
@media (min-width: 768px) { .game-card__body { padding: 1.25rem; } }
.game-card__title {
font-family: var(--font-ui);
font-weight: 600;
font-size: 1.05rem;
color: var(--color-brand-green);
margin-bottom: 0.5rem;
line-height: 1.4;
min-height: calc(1.05rem * 1.4 * 2);
-webkit-transition: color var(--transition-medium);
transition: color var(--transition-medium);
overflow-wrap: break-word;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 768px) {
.game-card__title {
font-size: 1.15rem;
min-height: calc(1.15rem * 1.4 * 2);
}
}
.game-card:hover .game-card__title { color: #fff; text-shadow: 0 0 5px var(--color-brand-green-glow); }
.game-card__categories { font-size: 0.82rem; color: var(--color-text-muted); margin-top: auto; line-height: 1.55; padding-top: 0.4rem; }
.game-card__footer { padding: 0.75rem 1rem; border-top: 1px solid var(--color-border); background-color: var(--color-bg-medium); text-align: right; display: flex; align-items: center; justify-content: flex-end; position:relative; z-index:1; }
.game-card__footer-release-date { font-size: 0.82rem; color: var(--color-text-secondary); font-weight: 500; font-family: var(--font-ui); display: inline-flex; align-items: center; gap: 0.5rem; }
.game-card__footer-release-date i { font-size: 0.9em; color: var(--color-text-muted); }

.pagination-wrapper {
text-align: center;
margin: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 1.5rem 0;
}
@media (min-width: 768px) {
.pagination-wrapper {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
@media (min-width: 1024px) {
.pagination-wrapper {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
.pagination {
display: inline-flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
gap: 0.5rem;
}
.pagination .page-item {
display: inline-block;
margin: 0;
}
.pagination .page-link {
font-family: var(--font-ui);
font-weight: 700;
font-size: clamp(0.8rem, 2vw, 0.95rem);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
line-height: 1;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-md);
background-color: var(--color-bg-light);
color: var(--color-text-secondary);
border: 1px solid var(--color-border-interactive);
transition: all var(--transition-fast);
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform, background-color, border-color, color, box-shadow;
}
.pagination .page-link i {
font-size: 0.85em;
line-height: 1;
}
.pagination .page-link:hover:not([aria-disabled="true"]) {
background-color: var(--color-bg-card-hover);
color: var(--color-brand-green);
border-color: var(--color-brand-green);
transform: translateY(-2px);
box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 0 8px var(--color-brand-green-glow);
}
.pagination .page-item.active .page-link {
background-image: linear-gradient(45deg, var(--color-brand-green), var(--color-brand-green-darker));
color: var(--color-text-on-accent);
border-color: var(--color-brand-green-darker);
box-shadow: 0 4px 8px var(--color-brand-green-glow), inset 0 1px 1px rgba(255,255,255,0.15);
transform: translateY(-1px) scale(1.03);
cursor: default;
}
.pagination .page-item.disabled .page-link,
.pagination .page-link[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
cursor: default;
background-color: var(--color-bg-medium);
border-color: var(--color-border);
box-shadow: none;
transform: none;
}
.pagination .page-item-ellipsis .page-link,
.pagination .page-item-ellipsis .page-link:hover {
background-color: transparent;
border-color: transparent;
color: var(--color-text-muted);
box-shadow: none;
transform: none;
cursor: default;
pointer-events: none;
min-width: 24px;
padding-left: 0.2rem;
padding-right: 0.2rem;
}

.feature-box { background: linear-gradient(145deg, var(--color-bg-light) 0%, var(--color-bg-medium) 100%); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); color: var(--color-text-secondary); text-align: center; width: 100%; -webkit-transition: -webkit-transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-slow); transition: -webkit-transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-slow); transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-slow); transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-slow), -webkit-transform var(--transition-medium); box-shadow: var(--shadow-elevation-medium); border-left: 3px solid transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, box-shadow; }
.feature-box:hover { -webkit-transform: translateY(-5px) scale(1.02); transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-elevation-high), 0 0 15px var(--color-brand-green-glow); border-color: var(--color-brand-green); }
.feature-box__icon { font-size: 2.2rem; margin-bottom: 1rem; color: var(--color-brand-green); display: inline-block; -webkit-transition: -webkit-transform var(--transition-medium); transition: -webkit-transform var(--transition-medium); transition: transform var(--transition-medium); transition: transform var(--transition-medium), -webkit-transform var(--transition-medium); text-shadow: 0 0 8px var(--color-brand-green-glow); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.feature-box:hover .feature-box__icon { -webkit-transform: scale(1.2) rotate(8deg); transform: scale(1.2) rotate(8deg); -webkit-animation: iconWobble 0.6s ease-out; animation: iconWobble 0.6s ease-out; }
@-webkit-keyframes iconWobble { 0% {-webkit-transform: scale(1.2) rotate(0deg);transform: scale(1.2) rotate(0deg);} 25% {-webkit-transform: scale(1.25) rotate(-6deg);transform: scale(1.25) rotate(-6deg);} 50% {-webkit-transform: scale(1.25) rotate(6deg);transform: scale(1.25) rotate(6deg);} 75% {-webkit-transform: scale(1.2) rotate(-3deg);transform: scale(1.2) rotate(-3deg);} 100% {-webkit-transform: scale(1.2) rotate(0deg);transform: scale(1.2) rotate(0deg);} }
@keyframes iconWobble { 0% {-webkit-transform: scale(1.2) rotate(0deg);transform: scale(1.2) rotate(0deg);} 25% {-webkit-transform: scale(1.25) rotate(-6deg);transform: scale(1.25) rotate(-6deg);} 50% {-webkit-transform: scale(1.25) rotate(6deg);transform: scale(1.25) rotate(6deg);} 75% {-webkit-transform: scale(1.2) rotate(-3deg);transform: scale(1.2) rotate(-3deg);} 100% {-webkit-transform: scale(1.2) rotate(0deg);transform: scale(1.2) rotate(0deg);} }
.feature-box__title { color: var(--color-text-primary); margin-bottom: 0.5rem; font-family: var(--font-ui); font-size: 1.1rem; font-weight: 700; line-height: 1.45; }
.feature-box__text { font-size: 0.88rem; margin-bottom: 0; line-height: 1.75; }
.feature-box__link { color: var(--color-brand-green); text-decoration: none; font-weight: 600; -webkit-transition: color var(--transition-fast), text-shadow var(--transition-fast); transition: color var(--transition-fast), text-shadow var(--transition-fast); }
.feature-box__link:hover { color: var(--color-brand-green-darker); text-decoration: underline; text-shadow: 0 0 5px var(--color-brand-green-glow); }

.site-footer {
background-color: var(--color-bg-medium);
font-size: 0.82rem;
color: var(--color-text-muted);
margin-top: auto;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
width:100%;
}
@media (min-width: 768px) {
.site-footer {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
@media (min-width: 1024px) {
.site-footer {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
.site-footer__inner { text-align: center; }
.site-footer__copyright { margin-bottom: 1rem; font-weight: 500; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
@media (min-width: 768px) { .site-footer__nav { gap: 0.5rem 1.25rem; } }
.site-footer__link { color: var(--color-text-muted); text-decoration: none; -webkit-transition: color var(--transition-fast), text-decoration var(--transition-fast); transition: color var(--transition-fast), text-decoration var(--transition-fast); font-weight: 500; }
.site-footer__link:hover { color: var(--color-text-primary); text-decoration: underline; text-shadow: 0 0 3px rgba(var(--shadow-color-rgb),0.3); }

.alert { padding: 0.85rem 1rem; margin-bottom: 1.25rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size:0.9rem; box-shadow: var(--shadow-elevation-low); }
.alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; border-left: 4px solid #ffc107; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; border-left: 4px solid var(--color-accent-red); }
.alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; border-left: 4px solid #0dcaf0; }

@media (max-width: 991.98px) {
.col-xl-2 { flex: 0 0 auto; width: calc(100% / 3); }
}
@media (max-width: 767.98px) {
.col-xl-2 { flex: 0 0 auto; width: 50%; }
}

@media (max-width: 576px) {
.game-card__body { padding: 1rem; }
.game-card__categories { font-size: 0.78rem; padding-top: 0.25rem;}
.game-card__tag { font-size: 0.7rem; padding: 0.25rem 0.5rem;}
.game-card__image-overlay-top-right { top: 0.5rem; right: 0.5rem; gap: 0.4rem; }
.game-card__footer { padding: 0.6rem 0.75rem; }
.game-card__footer-release-date { font-size: 0.78rem; gap: 0.25rem;}
.game-card__footer-release-date i { font-size: 0.88em; }
.section__title { font-size: clamp(1.4rem, 4.2vw, 1.8rem); margin-bottom: 1rem;}
.section__lead { font-size: clamp(0.88rem, 2.6vw, 1rem); margin-bottom: 1.25rem; }
.btn { font-size: 0.95rem; padding: 0.7rem 1.25rem;}
.purchase-card { padding: 1.25rem; }
.purchase-card__title { font-size: 1.15rem; }
.variant-button { padding: 0.4rem 0.75rem; font-size: 0.75rem; }
.price-display__current-value { font-size: 1.35rem; }
.pagination .page-link { min-width: 36px; height: 36px; font-size: clamp(0.8rem, 1.8vw, 0.9rem); padding: 0.25rem 0.5rem; }
.pagination { gap: 0.25rem; }
}
@media (max-width: 390px) {
.game-card__tag { font-size: 0.65rem; padding: 0.2rem 0.4rem;}
.game-card__image-overlay-top-right { top: 0.5rem; right: 0.5rem; gap: 0.25rem; }
.game-card__footer-release-date { font-size: 0.75rem; }
.platform-toggle { max-width: none; padding: 0.2rem;}
.platform-toggle__button { padding: 0.6rem 0.8rem; font-size: 0.8rem; }
.site-header__logo-text { font-size: clamp(1.8rem, 4.8vw, 2.4rem); }
.site-header__subtitle { font-size: clamp(0.78rem, 2vw, 0.95rem); }
.pagination .page-link { min-width: 32px; height: 32px; font-size: 0.8rem; padding: 0.2rem 0.4rem; }
.pagination { gap: 0.2rem; }
}

*:focus-visible {
outline: 2px solid var(--color-brand-green);
outline-offset: 3px;
box-shadow: 0 0 0 5px rgba(var(--shadow-color-rgb), 0.25);
border-radius: var(--radius-xs);
}
.platform-toggle__button:focus-visible,
.variant-button:focus-visible,
.pagination .page-link:focus-visible {
outline-color: var(--color-brand-green-darker);
border-color: var(--color-brand-green);
color: var(--color-brand-green);
box-shadow: 0 0 0 3px rgba(var(--shadow-color-rgb), 0.25), 0 3px 6px rgba(0,0,0,0.15), 0 0 8px var(--color-brand-green-glow) !important;
}
.pagination .page-item.active .page-link:focus-visible {
outline-color: var(--color-text-on-accent);
box-shadow: 0 0 0 3px rgba(var(--shadow-color-rgb),0.4), 0 4px 8px var(--color-brand-green-glow), inset 0 1px 1px rgba(255,255,255,0.15) !important;
}

.btn:focus-visible { outline-offset: 4px; }

.purchase-card--europe .variant-button.active:focus-visible,
.purchase-card--europe .btn--buy:focus-visible {
outline-color: var(--color-accent-red-darker);
box-shadow: 0 0 0 5px rgba(229, 62, 62, 0.25);
}
.purchase-card--foreign .variant-button.active:focus-visible,
.purchase-card--foreign .btn--buy:focus-visible {
outline-color: var(--color-accent-yellow-darker);
box-shadow: 0 0 0 5px rgba(214, 158, 46, 0.25);
}

.row {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
@media (min-width: 768px) {
.row {
margin-left: -1rem;
margin-right: -1rem;
}
}

.cookie-consent-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: var(--color-bg-medium);
color: var(--color-text-secondary);
padding: 1rem;
box-shadow: 0 -2px 15px rgba(0,0,0,0.3);
z-index: 1055;
font-family: var(--font-body);
font-size: 0.875rem;
line-height: 1.6;
border-top: 1px solid var(--color-border);
visibility: hidden;
opacity: 0;
transform: translateY(100%);
transition: visibility 0s linear 0.3s, opacity 0.3s ease-out, transform 0.3s ease-out;
will-change: transform, opacity, visibility;
display: flex;
}
.cookie-consent-banner.is-visible {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition-delay: 0s;
}
.cookie-consent-banner__content {
width: 100%;
max-width: 1140px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
@media (min-width: 768px) {
.cookie-consent-banner__content {
flex-direction: row;
justify-content: space-between;
}
.cookie-consent-banner {
padding: 1.25rem;
font-size: 0.9rem;
}
}
.cookie-consent-banner__text {
margin: 0;
flex-grow: 1;
text-align: center;
}
@media (min-width: 768px) {
.cookie-consent-banner__text {
text-align: left;
}
}
.cookie-consent-banner__text a {
color: var(--color-brand-green);
text-decoration: underline;
font-weight: 500;
}
.cookie-consent-banner__text a:hover {
color: var(--color-brand-green-hover);
text-decoration: none;
}
.cookie-consent-banner__actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
width: 100%;
}
@media (min-width: 480px) {
.cookie-consent-banner__actions {
flex-direction: row;
justify-content: center;
width: auto;
flex-shrink: 0;
}
}
@media (min-width: 768px) {
.cookie-consent-banner__actions {
justify-content: flex-end;
}
}
.cookie-consent-banner__btn {
padding: 0.65rem 1rem;
border-radius: var(--radius-sm);
font-weight: 700;
text-decoration: none;
-webkit-transition: var(--transition-medium);
transition: var(--transition-medium);
cursor: pointer;
border: 1px solid transparent;
font-family: var(--font-ui);
font-size: 0.85rem;
text-align: center;
white-space: nowrap;
letter-spacing: 0.5px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform, background-color, box-shadow;
}
.cookie-consent-banner__btn--accept {
background-color: var(--color-brand-green);
color: var(--color-text-on-accent);
border-color: var(--color-brand-green-darker);
box-shadow: 0 2px 6px var(--color-brand-green-glow);
}
.cookie-consent-banner__btn--accept:hover {
background-color: var(--color-brand-green-hover);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 4px 10px var(--color-brand-green-glow);
}
.cookie-consent-banner__btn--reject {
background-color: var(--color-bg-light);
color: var(--color-text-secondary);
border-color: var(--color-border-interactive);
}
.cookie-consent-banner__btn--reject:hover {
background-color: var(--color-bg-card-hover);
color: var(--color-text-primary);
border-color: var(--color-text-muted);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}

.site-footer__link--cookie-settings {
cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
-webkit-transition-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
  }

  .site-header__underline,
  .section__title i,
  .trust-box:hover .trust-box__rating i,
  .feature-box:hover .feature-box__icon,
  .spinner {
-webkit-animation: none !important;
animation: none !important;
  }

  .site-header__underline { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); }
  .section__title i { -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); }
  .trust-box__icon { -webkit-transform: none; transform: none; }
  .feature-box__icon { -webkit-transform: none; transform: none; }
}

.section--intro-category .section__title,
.section--intro-category .section__lead {
text-align: left;
margin-left: 0;
margin-right: 0;
max-width: none;
}
.section--intro-category .section__title i {
margin-left:0;
}