/* TailwindCSS Color Definitions */
:root {
    --dark-gray: #141414;
    --pure-white: #fff;
    --green-bright: #2edf84;
    --gray-1: #707070;
    --custom-text-color: #596067;
}

/* Product Section Background and Layout */
.product-section {
    background: url(/assets/techvillage/images/product-corner-bg.svg);
    background-color: #f9f6f1;
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.product-section .product-section__title {
    background: -webkit-radial-gradient(#4b4b4b, #222);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: color-burn;
}

/* Swiper Slide Styling */
.swiper-slide {
    position: relative;
    filter: blur(4px);
    transform: scale(0.84) !important;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.swiper-slide.swiper-slide-active {
    transform: scale(1) !important;
    filter: blur(0);
}

/* Swiper Pagination */
.swiper-pagination-bullet {
    background: hsla(0, 0%, 8%, 0.3) !important;
    opacity: 1 !important;
    border-radius: 9px !important;
    width: 40px !important;
    height: 4px !important;
    transition: width 0.3s ease-in-out !important;
}

.swiper-pagination-bullet-active {
    width: 128px !important;
    background-color: #32cf7a !important;
}

.swiper-pagination {
    width: fit-content !important;
    position: relative !important;
    margin: 24px auto 48px auto !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Product Details Animation */
.swiper-slide .swiper-product__details {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.swiper-slide.swiper-slide-active .swiper-product__details {
    opacity: 1;
    visibility: visible;
}

/* Dark Theme Support */
body.dark .product-section {
    background: linear-gradient(135deg, #1a1d29 0%, #2d1b69 50%, #1a1d29 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

body.dark .text-dark-gray-1 {
    color: #f7fafc;
}

body.dark .text-gray-1 {
    color: #cbd5e0;
}

body.dark .bg-dark-gray-1 {
    background-color: #4a5568;
}

/* TailwindCSS Utility Classes */
.text-green-bright {
    color: var(--green-bright);
}

.text-dark-gray-1 {
    color: var(--dark-gray);
}

.text-gray-1 {
    color: var(--gray-1);
}

.bg-green-bright {
    background-color: var(--green-bright);
}

.bg-dark-gray-1 {
    background-color: var(--dark-gray);
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

/* Base Utility Classes */
.rounded-\[20px\] { border-radius: 20px; }
.gap-8 { gap: 2rem; }
/* .gap-6 { gap: 1.5rem; } */
.gap-3 { gap: 0.75rem; }
.gap-2 { gap: 0.5rem; }
.max-w-\[1280px\] { max-width: 1280px; }
.max-w-\[498px\] { max-width: 498px; }
.max-w-\[1920px\] { max-width: 1920px; }
.flex-shrink-0 { flex-shrink: 0; }
.h-\[50px\] { height: 50px; }
.w-\[167px\] { width: 167px; }
.w-\[150px\] { width: 150px; }
.w-full { width: 100%; }

/* Typography Classes */
.text-\[15px\] { font-size: 15px; }
.text-\[22px\] { font-size: 22px; }
.text-\[28px\] { font-size: 28px; }
.text-\[34px\] { font-size: 34px; }
.text-\[40px\] { font-size: 40px; }
.text-\[52px\] { font-size: 52px; }
.text-\[55px\] { font-size: 55px; }
.text-\[62px\] { font-size: 62px; }
.text-\[130px\] { font-size: 130px; }
.text-base { font-size: 1rem; line-height: 1.15rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-white { color: #ffffff; }

/* Line Heights */
.leading-\[16\.5px\] { line-height: 16.5px; }
.leading-\[17\.6px\] { line-height: 17.6px; }
.leading-\[25\.6px\] { line-height: 25.6px; }
.leading-\[26\.4px\] { line-height: 26.4px; }
.leading-\[36\.6px\] { line-height: 36.6px; }
.leading-\[43\.2px\] { line-height: 43.2px; }
.leading-\[61\.2px\] { line-height: 61.2px; }
.leading-\[62\.4px\] { line-height: 62.4px; }
.leading-\[117px\] { line-height: 117px; }

/* Letter Spacing */
.tracking-\[-2px\] { letter-spacing: -2px; }

/* Padding Classes */
.pb-\[70px\] { padding-bottom: 70px; }
.pb-\[112px\] { padding-bottom: 112px; }
.pt-\[180px\] { padding-top: 180px; }
.pt-\[265px\] { padding-top: 265px; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* Position Classes */
.top-\[-107px\] { top: -107px; }
.top-\[-200px\] { top: -200px; }
.left-\[320px\] { left: 320px; }
.absolute { position: absolute; }
.relative { position: relative; }

/* Layout Classes */
.gap-\[40px\] { gap: 40px; }
.gap-\[50px\] { gap: 50px; }
.gap-\[90px\] { gap: 90px; }
.gap-\[112px\] { gap: 112px; }
.gap-\[115px\] { gap: 115px; }
.grid-cols-\[672px\,_1fr\] { grid-template-columns: 672px 1fr; }

/* Font Weight Classes */
.font-\[900\] { font-weight: 900; }
.font-semibold { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }

/* Display and Alignment Classes */
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; text-align: center; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.mx-auto { margin-left: auto; margin-right: auto; }
.z-\[2\] { z-index: 2; }
.object-cover { object-fit: cover; }
.whitespace-nowrap { white-space: nowrap; }

/* Margin Classes */
.mt-5 { margin-top: 1.25rem; }
.mt-10 { margin-top: 2.5rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }

/* Button Styling */
.rounded-md { border-radius: 0.375rem; }
.cursor-pointer { cursor: pointer; }

/* Break words utility class */
.break-words {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

/* Swiper Container - Fixed Height to Prevent Layout Shift */
#products .swiper {
    min-height: 675px; /* Увеличенная минимальная высота */
}

#products .swiper-wrapper {
    min-height: 600px; /* Увеличенная высота для wrapper */
}

/* Swiper Slide Enhancements */
.swiper-slide {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.swiper-slide .swiper-product__img {
    max-width: 100%;
    width: 95%; /* Используем процентную ширину */
    max-width: 1000px; /* Максимальная ширина */
    height: auto; /* Автоматическая высота */
    min-height: 400px; /* Минимальная высота для layout stability */
    object-fit: contain; /* Показать всё изображение без обрезки */
    background-color: transparent; /* Прозрачный фон */
}

.swiper-slide h1 {
    max-width: 90%;
    margin: 1rem auto 0;
    min-height: 40px; /* Минимальная высота для заголовка */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

/* Custom Font and Color Styles - Gilroy-semibold for Products Section */

/* Product titles in slides */
.product-section .swiper-slide h1 {
    font-family: 'Gilroy-semibold', sans-serif !important;
    color: var(--custom-text-color) !important;
}

/* Statistics numbers and labels within products section */
.product-section .container h1:not(.product-section__title) {
    font-family: 'Gilroy-semibold', sans-serif !important;
    color: var(--custom-text-color) !important;
}

.product-section .container p:not(.product-section__title) {
    font-family: 'Gilroy-semibold', sans-serif !important;
    color: var(--custom-text-color) !important;
}

/* Description text within products section */
.product-section .container > div:last-child p {
    font-family: 'Gilroy-semibold', sans-serif !important;
    color: var(--custom-text-color) !important;
}

/* Override existing text color classes for light theme only within products section */
body:not(.dark) .product-section .text-dark-gray-1:not(.product-section__title) {
    color: var(--custom-text-color) !important;
    font-family: 'Gilroy-semibold', sans-serif !important;
    text-align: center;
}

body:not(.dark) .product-section .text-gray-1 {
    color: var(--custom-text-color) !important;
    font-family: 'Gilroy-light', sans-serif !important;
}

/* Ensure WALLET FUNCTIONS keeps original styling for light theme */
body:not(.dark) .product-section .product-section__title {
    font-family: inherit !important;
    color: var(--green-bright) !important;
}

/* Dark theme styles for products section */
body.dark .product-section .swiper-slide h1 {
    color: #f0f0f0 !important;
    font-family: 'Gilroy-semibold', sans-serif !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark .product-section .container h1:not(.product-section__title) {
    color: #f0f0f0 !important;
    font-family: 'Gilroy-semibold', sans-serif !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark .product-section .container p:not(.product-section__title) {
    color: #e0e0e0 !important;
    font-family: 'Gilroy-semibold', sans-serif !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body.dark .product-section .container > div:last-child p {
    color: #e0e0e0 !important;
    font-family: 'Gilroy-semibold', sans-serif !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body.dark .product-section .text-dark-gray-1:not(.product-section__title) {
    color: #f0f0f0 !important;
    font-family: 'Gilroy-semibold', sans-serif !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark .product-section .text-gray-1 {
    color: #e0e0e0 !important;
    font-family: 'Gilroy-semibold', sans-serif !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* WALLET FUNCTIONS styling for dark theme - максимально яркий и видимый */
body.dark .product-section .product-section__title {
    font-family: inherit !important;
    /* Основной fallback цвет - максимально яркий зеленый */
    color: #ebfff6 !important;
    /* Убираем оригинальное радиальное градиентное смешение */
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ebfff6 !important;
    background-clip: initial !important;
    /* Яркая тень для лучшей видимости */
    /* text-shadow: 0 0 20px rgba(0, 255, 136, 0.8), 0 0 40px rgba(46, 223, 132, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3) !important; */
    filter: brightness(1.4) contrast(1.2) saturate(1.3) !important;
    /* Убираем смешивание цветов для темной темы */
    mix-blend-mode: normal !important;
    /* Дополнительные стили для максимальной видимости */
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Дополнительные селекторы для обеспечения приоритета */
body.dark .product-section h1.product-section__title,
body.dark .product-section .product-section__title.text-green-bright,
body.dark .product-section .product-section__title.uppercase {
    color: #ebfff6 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ebfff6 !important;
    /* text-shadow: 0 0 20px rgba(0, 255, 136, 0.8), 0 0 40px rgba(46, 223, 132, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3) !important; */
    filter: brightness(1.4) contrast(1.2) saturate(1.3) !important;
    mix-blend-mode: normal !important;
}

/* Дополнительная поддержка для браузеров без поддержки background-clip */
@supports not (-webkit-background-clip: text) {
    body.dark .product-section .product-section__title,
    body.dark .product-section h1.product-section__title {
        color: #ebfff6 !important;
        background: none !important;
        -webkit-text-fill-color: #ebfff6 !important;
    }
}

/* =================================================
   RESPONSIVE MEDIA QUERIES - REFACTORED STRUCTURE
   ================================================= */

/* 320px - 359px screens */
@media (min-width: 320px) and (max-width: 359px) {
    /* Container adjustments */
    .container {
        max-width: 320px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Swiper container adjustments */
    #products .swiper {
        min-height: 250px !important;
    }
    
    #products .swiper-wrapper {
        min-height: 200px !important;
    }

    .items-center {
        place-content: center;
    }
    
    .swiper-slide .swiper-product__img {
        width: 98% !important;
        height: auto !important;
        min-height: 110px !important;
        max-height: 320px !important;
        object-fit: contain !important;
        /* padding: 3px !important; */
    }
    
    /* Product section */
    .product-section {
        overflow-x: hidden !important;
        padding-top: 110px;
        padding-bottom: 40px;
    }
    
    /* Main title "WALLET FUNCTIONS" */
    .product-section .product-section__title {
        font-size: 34px !important;
        line-height: 30px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 320px !important;
        text-align: left !important;
        top: -77px !important;
        left: 1rem !important;
        right: 1rem !important;
        position: absolute !important;
    }
    
    /* Container adjustments */
    .product-section .max-w-\[1920px\] {
        max-width: 100vw !important;
        padding: 0 1rem !important;
    }
    
    .product-section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    
    /* Statistics */
    .product-section .container h1 {
        font-size: 20px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    .product-section .container p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Grid adjustments */
    .product-section .grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        text-align-last: center;
    }
    
    /* Swiper slides */
    .swiper-slide h1 {
        font-size: 22px !important;
        line-height: 1.5 !important;
        padding: 0 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .swiper-product__img {
        max-width: 98% !important;
        margin: 0 auto !important;
    }
    
    /* Swiper pagination */
    .swiper-pagination {
        margin: 10px auto !important;
    }
    
    /* Description text */
    .product-section .container > div:last-child p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        padding: 0 !important;
        text-align: justify !important;
    }
}

/* 360px - 392px screens */
@media (min-width: 360px) and (max-width: 392px) {
    /* Container adjustments */
    .container {
        max-width: 360px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Swiper container adjustments */
    #products .swiper {
        min-height: 250px !important;
    }
    
    #products .swiper-wrapper {
        min-height: 200px !important;
    }

    .items-center {
        place-content: center;
    }
    
    .swiper-slide .swiper-product__img {
        width: 98% !important;
        height: auto !important;
        min-height: 150px !important;
        max-height: 320px !important;
        object-fit: contain !important;
        /* padding: 3px !important; */
    }
    
    /* Product section */
    .product-section {
        overflow-x: hidden !important;
        padding-top: 130px;
    }
    
    /* Main title "WALLET FUNCTIONS" */
    .product-section .product-section__title {
        font-size: 42px !important;
        line-height: 36px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 320px !important;
        text-align: left !important;
        top: -77px !important;
        left: 1rem !important;
        right: 1rem !important;
        position: absolute !important;
    }
    
    /* Container adjustments */
    .product-section .max-w-\[1920px\] {
        max-width: 100vw !important;
        padding: 0 1rem !important;
    }
    
    .product-section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    
    /* Statistics */
    .product-section .container h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    .product-section .container p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Grid adjustments */
    .product-section .grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        text-align-last: center;
    }
    
    /* Swiper slides */
    .swiper-slide h1 {
        font-size: 22px !important;
        line-height: 1.5 !important;
        padding: 0 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .swiper-product__img {
        max-width: 88% !important;
        margin: 0 auto !important;
    }
    
    /* Swiper pagination */
    .swiper-pagination {
        margin: 18px auto !important;
    }
    
    /* Description text */
    .product-section .container > div:last-child p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        padding: 0 !important;
        text-align: justify !important;
    }
}

/* 393px - 429px screens */
@media (min-width: 393px) and (max-width: 429px) {
    /* Container adjustments */
    .container {
        max-width: 360px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Swiper container adjustments */
    #products .swiper {
        min-height: 250px !important;
    }
    
    #products .swiper-wrapper {
        min-height: 200px !important;
    }
    
    .swiper-slide .swiper-product__img {
        width: 98% !important;
        height: auto !important;
        min-height: 150px !important;
        max-height: 320px !important;
        object-fit: contain !important;
        /* padding: 3px !important; */
    }
    
    /* Product section */
    .product-section {
        overflow-x: hidden !important;
        padding-top: 130px;
    }

    .items-center {
        place-content: center;
    }
    
    /* Main title "WALLET FUNCTIONS" */
    .product-section .product-section__title {
        font-size: 42px !important;
        line-height: 36px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 320px !important;
        text-align: left !important;
        top: -77px !important;
        left: 1rem !important;
        right: 1rem !important;
        position: absolute !important;
    }
    
    /* Container adjustments */
    .product-section .max-w-\[1920px\] {
        max-width: 100vw !important;
        padding: 0 1rem !important;
    }
    
    .product-section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    
    /* Statistics */
    .product-section .container h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    .product-section .container p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Grid adjustments */
    .product-section .grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        text-align-last: center;
    }
    
    /* Swiper slides */
    .swiper-slide h1 {
        font-size: 22px !important;
        line-height: 1.5 !important;
        padding: 0 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .swiper-product__img {
        max-width: 88% !important;
        margin: 0 auto !important;
    }
    
    /* Swiper pagination */
    .swiper-pagination {
        margin: 18px auto !important;
    }
    
    /* Description text */
    .product-section .container > div:last-child p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        padding: 0 !important;
        text-align: justify !important;
    }
}

/* 430px - 639px screens */
@media (min-width: 430px) and (max-width: 639px) {
    /* Container adjustments */
    .container {
        max-width: 360px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Swiper container adjustments */
    #products .swiper {
        min-height: 250px !important;
    }
    
    #products .swiper-wrapper {
        min-height: 200px !important;
    }
    
    .swiper-slide .swiper-product__img {
        width: 98% !important;
        height: auto !important;
        min-height: 150px !important;
        max-height: 320px !important;
        object-fit: contain !important;
        /* padding: 3px !important; */
    }
    
    /* Product section */
    .product-section {
        overflow-x: hidden !important;
        padding-top: 130px;
    }

    .items-center {
        place-content: center;
    }
    
    /* Main title "WALLET FUNCTIONS" */
    .product-section .product-section__title {
        font-size: 42px !important;
        line-height: 36px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 320px !important;
        text-align: left !important;
        top: -77px !important;
        left: 1rem !important;
        right: 1rem !important;
        position: absolute !important;
    }
    
    /* Container adjustments */
    .product-section .max-w-\[1920px\] {
        max-width: 100vw !important;
        padding: 0 1rem !important;
    }
    
    .product-section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    
    /* Statistics */
    .product-section .container h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    .product-section .container p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }
    
    /* Grid adjustments */
    .product-section .grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        text-align-last: center;
        
    }
    
    /* Swiper slides */
    .swiper-slide h1 {
        font-size: 22px !important;
        line-height: 1.5 !important;
        padding: 0 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .swiper-product__img {
        max-width: 88% !important;
        margin: 0 auto !important;
    }
    
    /* Swiper pagination */
    .swiper-pagination {
        margin: 18px auto !important;
    }
    
    /* Description text */
    .product-section .container > div:last-child p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        padding: 0 !important;
        text-align: justify !important;
    }
}

/* 640px - 1023px screens */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Container adjustments */
    .container {
        max-width: 800px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Swiper image adjustments */
    .swiper-slide .swiper-product__img {
        width: 95% !important;
        height: auto !important;
        min-height: 350px !important;
        max-height: 450px !important;
        object-fit: contain !important;
        /* padding: 25px !important; */
    }
    
    /* Product section */
    .product-section {
        padding-top: 170px;
    }

    #products .swiper-wrapper {
        min-height: 390px !important;
    }
    #products .swiper {
        min-height: 450px;
    }
    
    /* Main title "WALLET FUNCTIONS" */
    .product-section .product-section__title {
        font-size: 73px !important;
        line-height: 60px !important;
        top: -120px;
        left: 1rem !important;
        position: absolute !important;
        justify-self: anchor-center;
    }
    
    /* Statistics */
    .product-section .container h1 {
        font-size: 34px !important;
        line-height: 43.2px !important;
    }
    
    .product-section .container p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    /* Grid adjustments */
    .product-section .grid {
        gap: 30px !important;
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        text-align-last: center;
        align-items: anchor-center;
    }
    
    /* Swiper slides */
    .swiper-slide h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem;
    }
    
    .swiper-product__details {
        max-width: 100% !important;
        padding: 0 1rem;
    }
    .items-center {
    /* align-items: center; */
        place-content: center;
    }
    .swiper-slide h1 {
        max-width: 90%;
        margin: 10px auto 0;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* .swiper-slide .flex.gap-6 {
        gap: 1rem;
    } */
    
    /* Swiper pagination */
    .swiper-pagination {
        margin: 15px auto !important;
        /* top: -50px !important; */
    }
    
    /* Padding adjustments */
    .pt-\[180px\] {
        padding-top: 180px !important;
    }
    
    .pb-\[112px\] {
        padding-bottom: 112px !important;
    }
}

/* 1024px - 1399px screens */
@media (min-width: 1024px) and (max-width: 1399px) {
    /* Container adjustments */
    .container {
        max-width: 1250px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Swiper image adjustments */
    .swiper-slide .swiper-product__img {
        width: 90% !important;
        height: auto !important;
        min-height: 400px !important;
        max-height: 500px !important;
        object-fit: contain !important;
        /* padding: 30px !important; */
    }

    #products .swiper-wrapper {
        min-height: 400px !important;
    }
    #products .swiper {
        min-height: 510px;
    }

    /* Product section */
    .product-section {
        padding-top: 180px;
    }

    .product-section .container p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    
    /* Main title "WALLET FUNCTIONS" */
    .product-section .product-section__title {
        font-size: 83px !important;
        line-height: 67px !important;
        top: -135px;
        left: 265px !important;
        position: absolute !important;
    }
    .product-section .grid {
        gap: 50px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: anchor-center;
    }
    .swiper-slide h1 {
        font-size: 38px !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem;
    }
    
    /* Layout adjustments */
    .gap-\[90px\] {
        gap: 90px !important;
    }
    
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    /* Padding adjustments */
    .pt-\[265px\] {
        padding-top: 180px !important;
    }
    
    .pb-\[112px\] {
        padding-bottom: 112px !important;
    }
}

/* 1400px+ screens (XL and above) */
@media (min-width: 1400px) {
    /* Container adjustments */
    .container {
        max-width: 1280px;
        padding-right: 0;
        padding-left: 0;
    }
    
    /* Swiper image adjustments */
    .swiper-slide .swiper-product__img {
        width: 98% !important;
        height: auto !important;
        min-height: 450px !important;
        max-height: 550px !important;
        object-fit: contain !important;
    }
    #products .swiper-wrapper {
        min-height: 400px !important;
    }
    #products .swiper {
    min-height: 570px;
}
    
    /* Product section */
    .product-section {
        padding-top: 200px;
    }
    .product-section .grid {
        gap: 50px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: anchor-center;
    }
    
    /* Flex direction */
    .flex-row {
        flex-direction: row !important;
    }
    
    /* Main title "WALLET FUNCTIONS" */
    .product-section .product-section__title {
        font-size: 102px !important;
        line-height: 75px !important;
        top: -161px;
        left: 320px !important;
        padding: 15px;
        position: absolute !important;
    }
    
    /* Layout adjustments */
    .gap-\[115px\] {
        gap: 115px !important;
    }
    
    .grid-cols-\[672px\,_1fr\] {
        grid-template-columns: 672px 1fr !important;
    }
    
    .gap-\[112px\] {
        gap: 112px !important;
    }
    
    /* Padding adjustments */
    .pt-\[265px\] {
        padding-top: 265px !important;
    }
    
    .pb-\[112px\] {
        padding-bottom: 112px !important;
    }
}

/* Additional responsive fixes for very small screens */
@media (max-width: 319px) {
    body {
        overflow-x: hidden !important;
    }
    
    .product-section {
        min-width: 0 !important;
        width: 100% !important;
        padding-top: 90px;
        overflow-x: hidden !important;
    }
    
    .product-section * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .product-section .product-section__title {
        font-size: 28px !important;
        line-height: 32px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 280px !important;
        text-align: left !important;
        top: -70px;
        left: 0.5rem !important;
        right: 0.5rem !important;
        position: absolute !important;
    }
}

/* Legacy swiper adjustments for larger screens */
@media (min-width: 1024px) {
    .swiper-slide {
        transform: scale(0.9) !important;
    }
    
    .swiper-pagination {
        margin: 24px auto !important;
    }
}