html{ scroll-behavior: smooth;} .slider{ max-width: 1400px; margin: 32px auto; padding: 0 28px;} .slider-container{ position: relative; height: 600px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--ink);} .slide{ position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0.9s ease; z-index: 1;} .slide.active{ opacity: 1; visibility: visible; z-index: 2;} .slide-bg{ position: absolute; inset: 0; overflow: hidden;} .slide-bg img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 8s ease-out;} .slide.active .slide-bg img{ transform: scale(1);} .slide-overlay{ position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,0.88) 0%, rgba(15,23,42,0.6) 45%, rgba(15,23,42,0.15) 100%); z-index: 1;} .slide-content{ position: relative; z-index: 2; height: 100%; display: flex; align-items: center; padding: 0 90px;} .slide-inner{ max-width: 620px; color: var(--white);} .slide-tag{ display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); backdrop-filter: blur(14px); padding: 8px 18px; border-radius: 50px; font-size: 12.5px; font-weight: 600; border: 1px solid rgba(255,255,255,0.15); margin-bottom: 22px; color: #93C5FD;} .slide-title{ font-size: 56px; font-weight: 800; line-height: 1.15; letter-spacing:-1.2px; margin-bottom: 20px; color: var(--white);} .slide-title span{ color: #93C5FD;} .slide-desc{ font-size: 15.5px; line-height: 1.85; color: rgba(255,255,255,0.82); margin-bottom: 34px; max-width: 520px;} .slide-buttons{ display: flex; gap: 12px; flex-wrap: wrap;} .btn-slide-primary{ padding: 15px 32px; border-radius: 50px; border: none; background: var(--white); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 10px; text-decoration: none;} .btn-slide-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,0.28);} .slider-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.1); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.2); color: var(--white); font-size: 16px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; z-index: 10;} .slider-arrow:hover{ background: var(--white); color: var(--ink); transform: translateY(-50%) scale(1.08);} .slider-prev{ right: 32px;} .slider-next{ left: 32px;} .slider-indicators{ position: absolute; bottom: 30px; right: 90px; display: flex; gap: 8px; z-index: 10;} .indicator{ width: 32px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.28); cursor: pointer; transition: var(--transition); border: none; padding: 0;} .indicator.active{ width: 56px; background: var(--white);} .features{ max-width: 1400px; margin: 0 auto 40px; padding: 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;} .categories-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;} .categories-grid-full{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;} .promo-banner{ max-width: 1400px; margin: 44px auto; padding: 0 28px;} .promo-content{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; box-shadow: var(--shadow-md); transition: var(--transition);} .promo-content:hover{ box-shadow: var(--shadow-lg); border-color: var(--primary-soft-2);} .promo-text{ position: relative; z-index: 2; padding: 56px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);} .promo-tag{ display: inline-flex; align-items: center; gap: 8px; background: var(--primary-soft); color: var(--primary); padding: 7px 16px; border-radius: 50px; font-size: 12px; font-weight: 700; border: 1px solid var(--primary-soft-2); margin-bottom: 20px; width: fit-content;} .promo-text h2{ font-size: 38px; font-weight: 800; line-height: 1.2; margin-bottom: 14px; color: var(--ink);} .promo-text h2 span{ color: var(--primary);} .promo-text p{ font-size: 14.5px; color: var(--gray); margin-bottom: 26px; max-width: 440px; line-height: 1.85;} .btn-accent{ background: var(--primary); color: var(--white); padding: 15px 34px; border-radius: 50px; border: none; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 8px 20px rgba(37,99,235,0.28); width: fit-content; text-decoration: none;} .btn-accent:hover{ background: var(--primary-dark); transform: translateY(-3px);} .promo-image{ position: relative; overflow: hidden; background: var(--line-soft); min-height: 420px;} .promo-image img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);} .promo-content:hover .promo-image img{ transform: scale(1.05);} .promo-discount-badge{ position: absolute; top: 24px; left: 24px; z-index: 3; background: var(--danger); color: var(--white); padding: 14px 18px; border-radius: 16px; text-align: center; box-shadow: 0 12px 32px rgba(220,38,38,0.35);} .promo-discount-badge .discount-value{ font-size: 26px; font-weight: 900; line-height: 1;} .promo-discount-badge .discount-label{ font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px;} .products-layout{ max-width: 1400px; margin: 0 auto; padding: 32px 28px 60px; display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: flex-start;} .sidebar{ background: var(--white); border-radius: var(--radius-md); padding: 24px; border: 1px solid var(--line); position: sticky; top: 140px; max-height: calc(100vh-160px); overflow-y: auto; scrollbar-width: thin;} .filter-header{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px;} .filter-header h3{ font-size: 15px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px;} .filter-header h3 i{ color: var(--primary); font-size: 14px;} .clear-filters{ color: var(--primary); font-size: 12px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; transition: var(--transition);} .clear-filters:hover{ background: var(--primary-soft);} .filter-section{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line);} .filter-section:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0;} .filter-title{ font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;} .filter-title i{ color: var(--primary); font-size: 12px;} .filter-list{ list-style: none; display: flex; flex-direction: column; gap: 8px;} .filter-list li label{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 6px 8px; border-radius: 8px; transition: var(--transition); user-select: none;} .filter-list li label:hover{ background: var(--primary-soft); color: var(--primary);} .filter-list input[type="radio"], .filter-list input[type="checkbox"]{ position: absolute; opacity: 0; width: 1px; height: 1px; margin:-1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; pointer-events: none;} .filter-list li label{ cursor: pointer; position: relative;} .filter-list li label:hover{ background: var(--primary-soft); color: var(--primary);} .radio-mark{ width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); position: relative; flex-shrink: 0; transition: var(--transition);} input[type="radio"]:checked+.radio-mark{ border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px var(--white);} .checkmark{ width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line); position: relative; flex-shrink: 0; transition: var(--transition);} .checkmark::after{ content: ""; position: absolute; inset: 0; background: var(--primary); border-radius: 3px; opacity: 0; transform: scale(0.5); transition: var(--transition);} input[type="checkbox"]:checked+.checkmark::after{ opacity: 1; transform: scale(1);} .filter-count{ margin-right: auto; font-size: 11px; color: var(--gray);} .price-range input[type="range"]{ width: 100%; height: 4px; border-radius: 2px; background: var(--line); outline: none;-webkit-appearance: none; cursor: pointer; margin-bottom: 12px;} .price-range input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 3px solid var(--white); box-shadow: 0 2px 8px rgba(37,99,235,0.35);} .price-labels{ display: flex; justify-content: space-between; font-size: 11.5px; color: var(--gray); font-weight: 600;} .products-main{ display: flex; flex-direction: column; gap: 20px;} .toolbar{ background: var(--white); padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;} .toolbar-left{ display: flex; align-items: center; gap: 16px;} .filter-toggle{ display: none; background: var(--white); border: 1px solid var(--line); padding: 9px 16px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; align-items: center; gap: 8px;} .results-count{ font-size: 13.5px; color: var(--gray);} .results-count strong{ color: var(--ink); font-weight: 800; font-size: 15px;} .toolbar-right{ display: flex; align-items: center; gap: 14px;} .sort-label{ font-size: 13px; color: var(--gray); font-weight: 600;} .sort-select{ position: relative;} .sort-select select{ appearance: none;-webkit-appearance: none; padding: 9px 36px 9px 16px; border: 1.5px solid var(--line); background: var(--white); border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; outline: none; min-width: 190px;} .sort-select i{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray); font-size: 11px; pointer-events: none;} .product-detail-wrapper{ max-width: 1400px; margin: 0 auto; padding: 32px 28px 60px;} .product-detail-container{ display: flex; flex-direction: column; gap: 48px;} .detail-breadcrumb{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray); flex-wrap: wrap;} .detail-breadcrumb a{ color: var(--gray); text-decoration: none; font-weight: 600;} .detail-breadcrumb a:hover{ color: var(--primary);} .detail-breadcrumb i{ font-size: 10px; color: var(--gray-light);} .detail-breadcrumb span{ color: var(--ink); font-weight: 700;} .detail-main-grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: flex-start;} .detail-gallery{ display: grid; grid-template-columns: 88px 1fr; gap: 16px; position: sticky; top: 140px;} .gallery-thumbs{ display: flex; flex-direction: column; gap: 12px; max-height: 560px; overflow-y: auto;} .gallery-thumbs::-webkit-scrollbar{ display: none;} .gallery-thumb{ width: 88px; height: 88px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); cursor: pointer; transition: var(--transition); background: var(--white); padding: 0;} .gallery-thumb img{ width: 100%; height: 100%; object-fit: cover;} .gallery-thumb.active{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12);} .gallery-main{ position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); border: 1px solid var(--line);} .gallery-main img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s;} .gallery-main:hover img{ transform: scale(1.05);} .detail-badge{ position: absolute; top: 20px; right: 20px; padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--white); background: var(--primary);} .detail-badge.badge-sale{ background: var(--danger);} .detail-badge.badge-hot{ background: var(--ink);} .detail-badge.badge-new{ background: var(--success);} .detail-info{ display: flex; flex-direction: column; gap: 20px;} .detail-category{ font-size: 12px; color: var(--primary); font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;} .detail-title{ font-size: 32px; font-weight: 800; color: var(--ink); line-height: 1.3; letter-spacing:-0.5px;} .detail-rating-row{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line);} .detail-rating-value{ font-size: 15px; font-weight: 800; color: var(--ink);} .detail-reviews-count{ font-size: 13px; color: var(--gray);} .detail-stock-status{ margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--success); background: #ECFDF5; padding: 6px 14px; border-radius: 50px;} .detail-stock-status.out-of-stock{ color: var(--danger); background: #FEF2F2;} .detail-price-box{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px; background: var(--primary-soft); border-radius: var(--radius-md); border: 1px solid var(--primary-soft-2);} .detail-price-main{ font-size: 34px; font-weight: 800; color: var(--primary); line-height: 1;} .detail-price-old{ font-size: 17px; color: var(--gray-light); text-decoration: line-through; font-weight: 600;} .detail-discount-badge{ margin-right: auto; background: var(--danger); color: var(--white); padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 800;} .detail-description{ font-size: 14.5px; line-height: 1.9; color: var(--gray);} .detail-option{ display: flex; flex-direction: column; gap: 12px;} .option-label{ font-size: 13.5px; font-weight: 700; color: var(--ink);} .option-label span{ color: var(--primary); font-weight: 800;} .color-options{ display: flex; gap: 10px; flex-wrap: wrap;} .color-option{ width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; transition: var(--transition); padding: 0;} .color-option.active{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15);} .size-options{ display: flex; gap: 8px; flex-wrap: wrap;} .size-option{ padding: 10px 22px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--white); font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: var(--transition);} .size-option.active{ background: var(--primary); border-color: var(--primary); color: var(--white);} .detail-actions{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 8px;} .qty-selector{ display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white);} .qty-selector button{ width: 44px; height: 48px; background: transparent; border: none; cursor: pointer; color: var(--ink-2); display: flex; align-items: center; justify-content: center; transition: var(--transition);} .qty-selector button:hover{ background: var(--primary-soft); color: var(--primary);} .qty-selector input{ width: 56px; height: 48px; border: none; text-align: center; font-family: inherit; font-size: 15px; font-weight: 800; color: var(--ink); background: var(--white); outline: none;} .btn-detail-cart{ flex: 1; min-width: 200px; height: 48px; border-radius: 12px; border: none; background: var(--primary); color: var(--white); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 20px rgba(37,99,235,0.28); transition: var(--transition);} .btn-detail-cart:hover{ background: var(--primary-dark); transform: translateY(-2px);} .btn-detail-wish{ width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink-2); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition);} .btn-detail-wish:hover{ border-color: var(--danger); color: var(--danger);} .btn-detail-buy{ width: 100%; height: 50px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--white); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: var(--transition);} .btn-detail-buy:hover{ background: var(--ink-2); transform: translateY(-2px);} .detail-perks{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 20px; border-top: 1px solid var(--line);} .perk{ display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border-radius: 12px;} .perk i{ font-size: 18px; color: var(--primary); background: var(--white); width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .perk strong{ display: block; font-size: 13px; color: var(--ink); font-weight: 700;} .perk span{ font-size: 11px; color: var(--gray);} .detail-tabs{ margin-bottom: 20px; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden;} .tabs-header{ display: flex; border-bottom: 1px solid var(--line); overflow-x: auto;} .tabs-header::-webkit-scrollbar{ display: none;} .tab-btn{ padding: 20px 26px; background: transparent; border: none; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--gray); cursor: pointer; position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition);} .tab-btn.active{ color: var(--primary);} .tab-btn.active::after{ content: ""; position: absolute; bottom: 0; right: 26px; left: 26px; height: 3px; background: var(--primary); border-radius: 3px 3px 0 0;} .tab-content{ padding: 36px; display: none; animation: tabFadeIn 0.4s ease;} .tab-content.active{ display: block;} @keyframes tabFadeIn{ from{ opacity: 0; transform: translateY(8px);} to{ opacity: 1; transform: translateY(0);}} .tab-content h3{ font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 16px;} .tab-content p{ font-size: 14.5px; line-height: 1.95; color: var(--gray);} .specs-table{ width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);} .specs-table tr{ border-bottom: 1px solid var(--line);} .specs-table tr:last-child{ border-bottom: none;} .specs-table tr:nth-child(even){ background: var(--bg);} .specs-table td{ padding: 16px 20px; font-size: 14px; color: var(--ink-2);} .specs-table td:first-child{ width: 200px; font-weight: 700; color: var(--ink); background: var(--line-soft);} @media (max-width: 900px){ .slider{ padding: 0 14px; margin: 12px auto;} .slider-container{ height: 62vh; min-height: 420px; max-height: 520px; border-radius: 22px;} .slide-content{ padding: 0 22px;} .slide-title{ font-size: 28px; letter-spacing:-0.6px;} .slide-desc{ font-size: 13px; margin-bottom: 22px;} .slide-tag{ font-size: 11px; padding: 6px 14px;} .slider-arrow{ width: 40px; height: 40px; font-size: 13px;} .slider-prev{ right: 10px;} .slider-next{ left: 10px;} .slider-indicators{ right: 22px; bottom: 18px;} .features{ grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px; margin-bottom: 20px;} .categories-grid{ display: flex; overflow-x: auto; gap: 10px; padding: 0 2px 8px; scroll-snap-type: x mandatory;} .categories-grid::-webkit-scrollbar{ display: none;} .categories-grid>*{ min-width: 104px; scroll-snap-align: start;} .categories-grid-full{ grid-template-columns: repeat(2, 1fr); gap: 12px;} .promo-banner{ padding: 0 14px; margin: 24px auto;} .promo-content{ grid-template-columns: 1fr; border-radius: 22px;} .promo-text{ padding: 28px 22px;} .promo-text h2{ font-size: 24px;} .promo-text p{ font-size: 12.5px;} .btn-accent{ padding: 13px 24px; font-size: 12.5px; width: 100%; justify-content: center;} .promo-image{ min-height: 240px;} .products-layout{ padding: 16px 14px 100px; grid-template-columns: 1fr; gap: 14px;} .sidebar{ position: fixed; bottom: 0; left: 0; right: 0; top: auto !important; width: 100%; max-height: 82vh; border-radius: 24px 24px 0 0; box-shadow: 0-20px 60px rgba(15,23,42,0.18); transform: translateY(105%); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 2200; padding: 0 20px 20px; overflow-y: auto;} .sidebar.open{ transform: translateY(0);} .filter-toggle{ display: inline-flex;} .toolbar{ padding: 12px 14px; flex-direction: column; align-items: stretch; gap: 10px;} .toolbar-right{ width: 100%;} .sort-select{ flex: 1;} .sort-select select{ width: 100%; min-width: 0;} .product-detail-wrapper{ padding: 24px 20px 48px;} .product-detail-container{ gap: 32px;} .detail-main-grid{ grid-template-columns: 1fr; gap: 28px;} .detail-gallery{ position: static; grid-template-columns: 1fr;} .gallery-thumbs{ flex-direction: row; max-height: none; order: 2; overflow-x: auto;} .gallery-thumb{ width: 70px; height: 70px; flex-shrink: 0;} .detail-title{ font-size: 22px;} .detail-price-main{ font-size: 26px;} .detail-perks{ grid-template-columns: 1fr;} .detail-actions{ flex-direction: column;} .qty-selector{ width: 100%; justify-content: space-between;} .btn-detail-cart, .btn-detail-wish{ width: 100%; min-width: auto;} .tab-content{ padding: 24px;}} .no-results .btn{ padding: 11px 24px; font-size: 13.5px; border-radius: 10px; gap: 8px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); max-width: 280px; margin: 0 auto;} .no-results .btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);} .no-results .btn i{ font-size: 12px;} @media (max-width: 600px){ .no-results .btn{ width: 100%; max-width: none; padding: 12px 20px; font-size: 13px;}} .size-option.out-of-stock{ position: relative; opacity: 0.5; cursor: not-allowed; background: var(--bg); color: var(--gray); border-color: var(--line);} .size-option.out-of-stock::after{ content: ''; position: absolute; top: 50%; right: 8px; left: 8px; height: 1.5px; background: var(--danger); transform: rotate(-12deg); transform-origin: center; border-radius: 2px; pointer-events: none;} .size-option.out-of-stock.active{ background: var(--bg); border-color: var(--line); color: var(--gray);}