/* ============================================================ technomarket_premium.css — TechnoVlada design for SaaS Colors: header #111827, accent var(--accent) [default var(--accent)] ============================================================ */ /* ============================================================ THEME VARIABLES (set via ) ============================================================ */ :root { --accent: #16a34a; --accent-dark: #15803d; --accent-light: #f0fdf4; } [data-theme="default"] { --accent: #16a34a; --accent-dark: #15803d; --accent-light: #f0fdf4; } [data-theme="navy_teal"] { --accent: #0d9488; --accent-dark: #0f766e; --accent-light: #f0fdfa; } [data-theme="purple_lime"] { --accent: #7c3aed; --accent-dark: #6d28d9; --accent-light: #f5f3ff; } [data-theme="dark_parallax"] { --accent: #16a34a; --accent-dark: #15803d; --accent-light: rgba(22,163,74,.15); } /* ============================================================ DARK PARALLAX THEME Glassmorphism dark, CSS-only parallax hero, square category cards, rectangular product group cards, green accent. All overrides scoped to [data-theme="dark_parallax"]. ============================================================ */ /* ── Base: body[data-theme] — fixes broken ancestor selector ── */ /* data-theme IS on , so [data-theme] body selector never matched! */ body[data-theme="dark_parallax"] { background: #080d08; color: #e5e7eb; min-height: 100vh; } /* Also cover and all page-level wrappers */ html:has(body[data-theme="dark_parallax"]) { background: #080d08; } [data-theme="dark_parallax"] .catalog-layout, [data-theme="dark_parallax"] .catalog-content, [data-theme="dark_parallax"] .products, [data-theme="dark_parallax"] #catalog { background: transparent; } /* ── Header ── */ [data-theme="dark_parallax"] .site-header { background: rgba(4, 8, 4, 0.92) !important; border-bottom: 1px solid rgba(22,163,74,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } [data-theme="dark_parallax"] .site-header .header-title a, [data-theme="dark_parallax"] .site-header .header-title p, [data-theme="dark_parallax"] .site-header a { color: #e5e7eb; } [data-theme="dark_parallax"] .site-header .header-phone { color: #9ca3af; } [data-theme="dark_parallax"] .header-phone a { color: #9ca3af; } /* ── Hero — CSS parallax + layered glows ── */ /* Base: scenic aurora dark gradient (no customer image) */ [data-theme="dark_parallax"] .hero-banner { background-color: #050e06; background-image: radial-gradient(ellipse 130% 55% at 50% -8%, rgba(22,163,74,.22) 0%, transparent 55%), radial-gradient(ellipse 45% 65% at 2% 65%, rgba(5,150,50,.11) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 98% 38%, rgba(16,185,129,.09) 0%, transparent 55%), radial-gradient(ellipse 30% 30% at 70% 90%, rgba(22,163,74,.07) 0%, transparent 50%), linear-gradient(175deg, #041208 0%, #071d0c 28%, #050f07 58%, #030806 100%); background-attachment: fixed, fixed, fixed, fixed, fixed; background-size: cover; background-position: center; position: relative; overflow: hidden; } /* When customer uploads a background image via CMS */ [data-theme="dark_parallax"] .hero-banner[style*="--bg-image"] { background-color: #050e06; background-image: radial-gradient(ellipse 130% 55% at 50% -8%, rgba(22,163,74,.18) 0%, transparent 55%), radial-gradient(ellipse 45% 65% at 2% 65%, rgba(5,150,50,.09) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 98% 38%, rgba(16,185,129,.07) 0%, transparent 55%), var(--bg-image); background-attachment: fixed, fixed, fixed, fixed; background-size: cover, cover, cover, cover; background-position: center; } /* Ambient edge glows (always on, z-index 0 — behind content) */ [data-theme="dark_parallax"] .hero-banner::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 85%, rgba(22,163,74,.10) 0%, transparent 45%), radial-gradient(circle at 85% 15%, rgba(22,163,74,.09) 0%, transparent 45%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(22,163,74,.07) 0%, transparent 70%); pointer-events: none; z-index: 0; } [data-theme="dark_parallax"] .hero-banner > * { position: relative; z-index: 2; } [data-theme="dark_parallax"] .hero-glow-1 { background: rgba(22,163,74,.22); } [data-theme="dark_parallax"] .hero-glow-2 { background: rgba(16,185,129,.13); } [data-theme="dark_parallax"] .hero-title { color: #f9fafb; text-shadow: 0 2px 24px rgba(22,163,74,.25); } [data-theme="dark_parallax"] .hero-subtitle { color: #9ca3af; } /* ── dp-nav-wrap: hidden infrastructure for default theme ── */ .dp-nav-wrap { position: relative; } .dp-nav-header { display: none; } .dp-cats-wrap { display: none; } /* ── dark_parallax: fade-up entry animations ── */ @keyframes dpFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } [data-theme="dark_parallax"] .dp-groups-wrap, [data-theme="dark_parallax"] .dp-cats-wrap { animation: dpFadeUp .45s cubic-bezier(.22,.68,0,1.2) both; } [data-theme="dark_parallax"] .dp-cats-wrap { animation-delay: .08s; } [data-theme="dark_parallax"] .site-category-card { animation: dpFadeUp .38s cubic-bezier(.22,.68,0,1.2) both; } [data-theme="dark_parallax"] .site-category-card:nth-child(1) { animation-delay: .04s; } [data-theme="dark_parallax"] .site-category-card:nth-child(2) { animation-delay: .08s; } [data-theme="dark_parallax"] .site-category-card:nth-child(3) { animation-delay: .12s; } [data-theme="dark_parallax"] .site-category-card:nth-child(4) { animation-delay: .16s; } [data-theme="dark_parallax"] .site-category-card:nth-child(5) { animation-delay: .20s; } [data-theme="dark_parallax"] .site-category-card:nth-child(6) { animation-delay: .24s; } [data-theme="dark_parallax"] .site-category-card:nth-child(n+7) { animation-delay: .28s; } [data-theme="dark_parallax"] .dp-cat-card { animation: dpFadeUp .38s cubic-bezier(.22,.68,0,1.2) both; } [data-theme="dark_parallax"] .dp-cat-card:nth-child(1) { animation-delay: .06s; } [data-theme="dark_parallax"] .dp-cat-card:nth-child(2) { animation-delay: .10s; } [data-theme="dark_parallax"] .dp-cat-card:nth-child(3) { animation-delay: .14s; } [data-theme="dark_parallax"] .dp-cat-card:nth-child(4) { animation-delay: .18s; } [data-theme="dark_parallax"] .dp-cat-card:nth-child(5) { animation-delay: .22s; } [data-theme="dark_parallax"] .dp-cat-card:nth-child(6) { animation-delay: .26s; } [data-theme="dark_parallax"] .dp-cat-card:nth-child(n+7) { animation-delay: .30s; } /* ================================================================ DARK PARALLAX — GROUPS row (single horizontal scroll line) ================================================================ */ [data-theme="dark_parallax"] .site-categories { /* Force flex — overrides base display:grid */ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: clip; /* avoids overflow-y coercion to auto */ overflow-clip-margin: content-box 34px; /* allow shadows/glows above / below */ gap: 10px; max-height: none; margin: 0 auto; max-width: 1140px; padding: 8px 20px 14px; background: transparent; scrollbar-width: thin; scrollbar-color: rgba(22,163,74,.3) transparent; -webkit-overflow-scrolling: touch; grid-template-columns: unset; } [data-theme="dark_parallax"] .site-categories::-webkit-scrollbar { height: 3px; } [data-theme="dark_parallax"] .site-categories::-webkit-scrollbar-thumb { background: rgba(22,163,74,.35); border-radius: 2px; } /* Groups section wrapper */ [data-theme="dark_parallax"] .dp-groups-wrap { margin-bottom: 0; } /* Section header (label + show-all) */ [data-theme="dark_parallax"] .dp-nav-header { display: flex; align-items: center; justify-content: space-between; max-width: 1140px; margin: 0 auto; padding: 10px 20px 6px; } [data-theme="dark_parallax"] .dp-nav-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #4b5563; } [data-theme="dark_parallax"] .dp-show-all-btn { background: none; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; color: #4b5563; font-size: 11px; font-weight: 600; padding: 3px 10px; cursor: pointer; transition: border-color .2s, color .2s; } [data-theme="dark_parallax"] .dp-show-all-btn:hover { border-color: var(--accent); color: var(--accent); } /* Hide show-all for groups (horizontal scroll handles overflow) */ [data-theme="dark_parallax"] .dp-groups-wrap .dp-show-all-btn { display: none; } /* ── Group cards — rectangular, fixed width, glassmorphism ── */ [data-theme="dark_parallax"] .site-category-card { flex-shrink: 0; width: 210px; height: 88px; aspect-ratio: unset; display: flex !important; flex-direction: row; align-items: center; gap: 12px; padding: 0 18px; border-radius: 14px; text-align: left; /* override base text-align:center */ text-decoration: none; color: #c9d1d9; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.07); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 4px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease, color .22s ease; cursor: pointer; position: relative; overflow: hidden; } [data-theme="dark_parallax"] .site-category-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 60%); pointer-events: none; } [data-theme="dark_parallax"] .site-category-card .site-category-emoji { font-size: 26px; margin: 0; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(22,163,74,.2)); transition: filter .22s; } [data-theme="dark_parallax"] .site-category-card .site-category-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } [data-theme="dark_parallax"] .site-category-card:hover { transform: translateY(-3px); border-color: rgba(22,163,74,.55); box-shadow: 0 0 28px rgba(22,163,74,.28), 0 8px 32px rgba(0,0,0,.55); background: rgba(22,163,74,.08); color: #f0fdf4; } [data-theme="dark_parallax"] .site-category-card:hover .site-category-emoji { filter: drop-shadow(0 0 10px rgba(22,163,74,.5)); } [data-theme="dark_parallax"] .site-category-card.active { border-color: var(--accent); background: linear-gradient(135deg, rgba(22,163,74,.18) 0%, rgba(22,163,74,.08) 100%); box-shadow: 0 0 36px rgba(22,163,74,.35), 0 6px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(22,163,74,.2); color: #fff; } [data-theme="dark_parallax"] .site-category-card.active .site-category-title { color: #4ade80; font-weight: 700; } [data-theme="dark_parallax"] .site-category-card.active .site-category-emoji { filter: drop-shadow(0 0 12px rgba(22,163,74,.7)); } [data-theme="dark_parallax"] .site-category-card.active::after { background: var(--accent); color: #fff; box-shadow: 0 0 8px rgba(22,163,74,.5); } /* ================================================================ DARK PARALLAX — CATEGORIES grid (square cards, flex-wrap) FIX: flex instead of grid to avoid empty-column space with few cards ================================================================ */ [data-theme="dark_parallax"] .dp-cats-wrap { display: block !important; /* override base display:none */ width: 100%; margin: 0 auto; } [data-theme="dark_parallax"] .dp-cats-grid { max-width: 1140px; margin: 0 auto; padding: 8px 20px 8px; /* Flex-wrap: cards don't stretch/leave gaps when few exist */ display: flex !important; flex-wrap: wrap; gap: 10px; align-items: flex-start; /* Desktop: show all — no max-height restriction */ max-height: none; overflow: visible; transition: none; } /* Expanded state not needed on desktop, kept for mobile compat */ [data-theme="dark_parallax"] .dp-cats-grid.dp-nav-expanded { max-height: none; } [data-theme="dark_parallax"] .dp-cat-card { /* Fixed size: ~6-7 per row on desktop, no stretching */ flex: 0 0 150px; width: 150px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.07); border-radius: 16px; color: #c9d1d9; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; padding: 12px 8px; gap: 7px; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 4px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .22s, box-shadow .22s, background .22s, color .22s, transform .22s; cursor: pointer; position: relative; overflow: hidden; } [data-theme="dark_parallax"] .dp-cat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 60%); pointer-events: none; } [data-theme="dark_parallax"] .dp-cat-card:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(22,163,74,.5); box-shadow: 0 0 22px rgba(22,163,74,.25), 0 10px 28px rgba(0,0,0,.55); background: rgba(22,163,74,.08); color: #f0fdf4; } [data-theme="dark_parallax"] .dp-cat-card.dp-cat-active { border-color: var(--accent); background: linear-gradient(135deg, rgba(22,163,74,.2) 0%, rgba(22,163,74,.09) 100%); box-shadow: 0 0 30px rgba(22,163,74,.32), 0 6px 20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(22,163,74,.18); color: #fff; } [data-theme="dark_parallax"] .dp-cat-emoji { font-size: 28px; line-height: 1; filter: drop-shadow(0 0 6px rgba(22,163,74,.2)); transition: filter .22s, transform .22s; } [data-theme="dark_parallax"] .dp-cat-card:hover .dp-cat-emoji, [data-theme="dark_parallax"] .dp-cat-card.dp-cat-active .dp-cat-emoji { filter: drop-shadow(0 0 10px rgba(22,163,74,.55)); transform: scale(1.1); } [data-theme="dark_parallax"] .dp-cat-title { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.3; max-width: 100%; word-break: break-word; hyphens: auto; } /* ── Search & filter section — compact, subdued ── */ /* Slightly smaller search box to not compete with category nav */ [data-theme="dark_parallax"] .search-box { margin-top: 10px; margin-bottom: 0; } [data-theme="dark_parallax"] .search-form { gap: 8px; } [data-theme="dark_parallax"] .search-main-row input[type="text"] { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #e5e7eb !important; font-size: 14px !important; } [data-theme="dark_parallax"] .search-main-row input[type="text"]::placeholder { color: #4b5563 !important; } [data-theme="dark_parallax"] .search-main-row input[type="text"]:focus { border-color: rgba(22,163,74,.6) !important; box-shadow: 0 0 0 3px rgba(22,163,74,.1) !important; } [data-theme="dark_parallax"] .brand-select { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #111827 !important; font-size: 13px !important; font-weight: 700 !important; } [data-theme="dark_parallax"] .price-input { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.10) !important; color: #111827 !important; font-size: 13px !important; font-weight: 700 !important; } [data-theme="dark_parallax"] .in-stock-label { color: #111827; font-size: 13px; font-weight: 700; } [data-theme="dark_parallax"] .in-stock-label input[type="checkbox"] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); } [data-theme="dark_parallax"] .in-stock-label input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } /* ── Filters panel — compact, subordinate to nav ── */ [data-theme="dark_parallax"] .filters-toggle-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); color: #6b7280; font-size: 13px; padding: 6px 14px; } [data-theme="dark_parallax"] .filters-toggle-btn:hover { border-color: rgba(22,163,74,.4); color: #9ca3af; } [data-theme="dark_parallax"] .filters-toggle-btn[aria-expanded="true"] { background: rgba(22,163,74,.15); color: #4ade80; border-color: rgba(22,163,74,.4); } [data-theme="dark_parallax"] .filters-panel { background: rgba(6,10,6,.97); border: 1px solid rgba(255,255,255,.06); border-left: 2px solid rgba(22,163,74,.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0,0,0,.5); } [data-theme="dark_parallax"] .filters-panel-title { color: #111827; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; } .spec-filter-option { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #111827; cursor: pointer; margin-bottom: 6px; font-weight: 600; line-height: 1.35; } .spec-filter-option input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; } .spec-filters-hint { padding: 12px 14px; border: 1px dashed #d1d5db; border-radius: 12px; background: #f9fafb; color: #6b7280; font-size: 13px; line-height: 1.45; } .filter-accordion-group { margin-bottom: 10px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; } .filter-accordion-toggle { width: 100%; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; cursor: pointer; text-align: left; } .filter-accordion-title { font-size: 12px; font-weight: 800; color: #111827; text-transform: uppercase; letter-spacing: .04em; } .filter-accordion-chevron { font-size: 20px; line-height: 1; color: #6b7280; flex-shrink: 0; } .filter-accordion-toggle.open .filter-accordion-chevron { color: var(--accent); } .filter-accordion-body { padding: 0 12px 8px; border-top: 1px solid #f3f4f6; } .filter-accordion-body[hidden] { display: none !important; } [data-theme="dark_parallax"] .filters-drag-handle { background: rgba(255,255,255,.08); } /* ── Catalog toolbar ── */ [data-theme="dark_parallax"] .catalog-toolbar { color: #6b7280; } [data-theme="dark_parallax"] .sort-select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #e5e7eb; } [data-theme="dark_parallax"] .sort-wrap::after { border-top-color: #6b7280; } /* ── Chips (active filters) ── */ [data-theme="dark_parallax"] .chip { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.3); color: #4ade80; } [data-theme="dark_parallax"] .chip-close { color: #4ade80; } /* ── Product cards — premium glass ── */ [data-theme="dark_parallax"] .card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); color: #e5e7eb; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 4px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; position: relative; overflow: visible; /* was hidden — border-radius kept by ::before border-radius:inherit */ } [data-theme="dark_parallax"] .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; /* clip gradient to card's rounded corners */ background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 55%); pointer-events: none; z-index: 0; } [data-theme="dark_parallax"] .card > * { position: relative; z-index: 1; } [data-theme="dark_parallax"] .card:hover { border-color: rgba(22,163,74,.38); box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 24px rgba(22,163,74,.14), inset 0 1px 0 rgba(255,255,255,.08); transform: translateY(-5px); } [data-theme="dark_parallax"] .card h2 { color: #f3f4f6; } [data-theme="dark_parallax"] .card-brand { color: #6b7280; font-size: .8em; } [data-theme="dark_parallax"] .category { color: #4b5563; } /* Photo area: keep bg subtle — do NOT darken the actual image */ [data-theme="dark_parallax"] .no-photo { background: rgba(255,255,255,.04); color: #4b5563; } [data-theme="dark_parallax"] .product-img { background: rgba(10,16,10,.25); /* very subtle bg, not dark */ } [data-theme="dark_parallax"] .product-img img { filter: none; } /* Price — use accent green, high contrast */ [data-theme="dark_parallax"] .price { color: #4ade80; text-shadow: 0 0 16px rgba(22,163,74,.35); } [data-theme="dark_parallax"] .old-price { color: #6b7280; } /* Stock badges */ [data-theme="dark_parallax"] .stock-in { background: rgba(4,120,87,.22); color: #6ee7b7; border: 1px solid rgba(4,120,87,.3); } [data-theme="dark_parallax"] .stock-preorder { background: rgba(180,83,9,.22); color: #fcd34d; border: 1px solid rgba(180,83,9,.3); } [data-theme="dark_parallax"] .stock-out { background: rgba(185,28,28,.22); color: #fca5a5; border: 1px solid rgba(185,28,28,.3); } /* ── Pagination ── */ [data-theme="dark_parallax"] .pagination-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); color: #6b7280; } [data-theme="dark_parallax"] .pagination-btn.active { background: var(--accent); color: #fff; border-color: transparent; } [data-theme="dark_parallax"] .pagination-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); } /* ── Product page ── */ [data-theme="dark_parallax"] .product-gallery { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 24px rgba(0,0,0,.4); } [data-theme="dark_parallax"] .product-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 24px rgba(0,0,0,.4); } [data-theme="dark_parallax"] .product-title { color: #f9fafb; } [data-theme="dark_parallax"] .desc { color: #9ca3af; } [data-theme="dark_parallax"] .specs-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; } [data-theme="dark_parallax"] .specs-box h3 { color: #d1d5db; } [data-theme="dark_parallax"] .spec-row { border-bottom-color: rgba(255,255,255,.05); } [data-theme="dark_parallax"] .spec-row span { color: #6b7280; } [data-theme="dark_parallax"] .spec-row b { color: #e5e7eb; } [data-theme="dark_parallax"] .prod-info-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); } [data-theme="dark_parallax"] .prod-info-card-title { color: #6b7280; } [data-theme="dark_parallax"] .prod-info-card-divider { background: rgba(255,255,255,.06); } [data-theme="dark_parallax"] .desc-list li { color: #d1d5db; } [data-theme="dark_parallax"] .desc-text { color: #d1d5db; } [data-theme="dark_parallax"] .specs-toggle-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #6b7280; } [data-theme="dark_parallax"] .specs-toggle-btn:hover { border-color: var(--accent); background: rgba(22,163,74,.1); color: #4ade80; } /* Buy buttons — clear, readable */ [data-theme="dark_parallax"] .order-btn-product { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); color: #fff; border: none; box-shadow: 0 4px 18px rgba(22,163,74,.35); transition: box-shadow .22s, transform .18s; } [data-theme="dark_parallax"] .order-btn-product:hover { background: linear-gradient(135deg, #15803d 0%, #166534 100%); box-shadow: 0 6px 24px rgba(22,163,74,.5); transform: translateY(-2px); } [data-theme="dark_parallax"] .order-btn-cart { background: rgba(22,163,74,.08); border: 1.5px solid rgba(22,163,74,.5); color: #4ade80; transition: background .22s, border-color .22s, box-shadow .22s; } [data-theme="dark_parallax"] .order-btn-cart:hover { background: rgba(22,163,74,.18); border-color: var(--accent); box-shadow: 0 0 14px rgba(22,163,74,.25); } [data-theme="dark_parallax"] .thumb-img { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); } [data-theme="dark_parallax"] .thumb-img.active { border-color: var(--accent); } /* ── Breadcrumb ── */ [data-theme="dark_parallax"] .breadcrumb, [data-theme="dark_parallax"] .breadcrumb a { color: #4b5563; } [data-theme="dark_parallax"] .breadcrumb a:hover { color: #9ca3af; } [data-theme="dark_parallax"] .breadcrumb-sep { color: rgba(255,255,255,.15); } [data-theme="dark_parallax"] .breadcrumb-current { color: #d1d5db; } /* ── Footer ── */ [data-theme="dark_parallax"] .site-footer { background: #050a05; border-top: 1px solid rgba(22,163,74,.12); color: #6b7280; } [data-theme="dark_parallax"] .site-footer a { color: #6b7280; } [data-theme="dark_parallax"] .site-footer a:hover { color: var(--accent); } [data-theme="dark_parallax"] .footer-section-title { color: #9ca3af; } /* ═══════════════════════════════════════════════════════════════ DARK PARALLAX — MISSING OVERRIDES (background conflicts fix) All white/light backgrounds overridden with dark glass values. ═══════════════════════════════════════════════════════════════ */ /* ── Catalog sidebar (desktop @media min-width:769px has bg:#fff) ── */ [data-theme="dark_parallax"] .catalog-layout .search-box { background: rgba(5,9,5,.96) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 4px 28px rgba(0,0,0,.4) !important; scrollbar-color: rgba(22,163,74,.3) transparent; } /* ── Search filters row (base has background:#fff !important) ── */ [data-theme="dark_parallax"] .search-filters-row { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.07) !important; box-shadow: none !important; } /* ── Filters panel extras: header, footer, close btn ── */ [data-theme="dark_parallax"] .filters-panel-header { border-bottom-color: rgba(255,255,255,.07) !important; } [data-theme="dark_parallax"] .filters-panel-footer { background: rgba(5,9,5,.97) !important; border-top-color: rgba(255,255,255,.07) !important; } [data-theme="dark_parallax"] .filters-close-btn { background: rgba(255,255,255,.08) !important; color: #9ca3af !important; } [data-theme="dark_parallax"] .filters-close-btn:hover { background: rgba(255,255,255,.14) !important; color: #e5e7eb !important; } /* ── Details btn (base: background:#111827 — replace with glass) ── */ [data-theme="dark_parallax"] .details-btn { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #e5e7eb; } [data-theme="dark_parallax"] .details-btn:hover { background: rgba(255,255,255,.13); color: #fff; } /* ── Pagination links (base: background:#e5e7eb) ── */ [data-theme="dark_parallax"] .pagination a { background: rgba(255,255,255,.06); color: #6b7280; } [data-theme="dark_parallax"] .pagination a.active { background: var(--accent); color: #fff; } [data-theme="dark_parallax"] .pagination a:hover:not(.active) { background: rgba(255,255,255,.1); color: #e5e7eb; } /* ── Cart drawer ── */ [data-theme="dark_parallax"] .cart-drawer { background: #050a05; border-left: 1px solid rgba(255,255,255,.08); box-shadow: -8px 0 40px rgba(0,0,0,.55); color: #e5e7eb; } [data-theme="dark_parallax"] .cart-drawer-header { border-bottom-color: rgba(255,255,255,.07); } [data-theme="dark_parallax"] .cart-drawer-title { color: #f3f4f6; } [data-theme="dark_parallax"] .cart-drawer-close { background: rgba(255,255,255,.07) !important; color: #9ca3af !important; } [data-theme="dark_parallax"] .cart-drawer-close:hover { background: rgba(255,255,255,.13) !important; color: #e5e7eb !important; } [data-theme="dark_parallax"] .cart-drawer-footer { border-top-color: rgba(255,255,255,.07); } [data-theme="dark_parallax"] .cart-drawer-empty { color: #4b5563; } [data-theme="dark_parallax"] .cart-total-row { color: #f3f4f6; } [data-theme="dark_parallax"] .cart-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); } [data-theme="dark_parallax"] .cart-item-img { background: rgba(255,255,255,.06) !important; } [data-theme="dark_parallax"] .cart-item-name { color: #e5e7eb; } [data-theme="dark_parallax"] .qty-btn { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color: #e5e7eb !important; } [data-theme="dark_parallax"] .qty-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; } [data-theme="dark_parallax"] .qty-display { color: #e5e7eb; } /* ── Order modal ── */ [data-theme="dark_parallax"] .order-modal-box { background: #0b120b; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.65); } [data-theme="dark_parallax"] .order-modal-title { color: #f3f4f6; } [data-theme="dark_parallax"] .order-modal-product { background: rgba(255,255,255,.06); color: #9ca3af; } [data-theme="dark_parallax"] .order-field label { color: #9ca3af; } [data-theme="dark_parallax"] .order-field input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #e5e7eb; } [data-theme="dark_parallax"] .order-field input:focus { border-color: var(--accent); } [data-theme="dark_parallax"] .order-modal-close { color: #6b7280 !important; } [data-theme="dark_parallax"] .order-modal-close:hover { color: #9ca3af !important; } /* ── Lightbox ── */ [data-theme="dark_parallax"] .img-lightbox-img { background: rgba(8,13,8,.9); } /* ── Mobile: disable fixed parallax (performance) ── */ @media (max-width: 768px) { [data-theme="dark_parallax"] .hero-banner { background-attachment: scroll, scroll, scroll, scroll; } /* Disable card stagger animations on mobile (performance) */ [data-theme="dark_parallax"] .site-category-card, [data-theme="dark_parallax"] .dp-cat-card { animation: dpFadeUp .3s ease both; animation-delay: 0s !important; } } /* ── Mobile layout for dark_parallax ── */ @media (max-width: 768px) { /* Prevent horizontal overflow from groups row */ [data-theme="dark_parallax"] .dp-groups-wrap, [data-theme="dark_parallax"] .dp-cats-wrap { overflow: visible; } [data-theme="dark_parallax"] .site-categories { padding: 8px 14px 10px; gap: 8px; overscroll-behavior-x: contain; } [data-theme="dark_parallax"] .site-category-card { width: auto !important; min-width: 110px; max-width: 168px; min-height: 52px; height: auto; border-radius: 10px; padding: 10px 12px; gap: 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-theme="dark_parallax"] .site-category-card .site-category-emoji { font-size: 19px; } [data-theme="dark_parallax"] .site-category-card .site-category-title { font-size: 12px; } [data-theme="dark_parallax"] .group-nav-card { justify-content: center; } [data-theme="dark_parallax"] .group-nav-card .site-category-title { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; max-width: 100%; } /* Categories mobile: compact 3-column grid */ [data-theme="dark_parallax"] .dp-cats-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px; padding: 8px 14px 8px; max-height: 240px; overflow: hidden; transition: max-height .4s ease; } [data-theme="dark_parallax"] .dp-cats-grid.dp-nav-expanded { max-height: 2400px; } /* Reset flex: 0 0 150px from desktop on mobile */ [data-theme="dark_parallax"] .dp-cat-card { flex: unset; width: 100%; min-height: 88px; padding: 10px 6px; } [data-theme="dark_parallax"] .dp-cat-emoji { font-size: 20px; } [data-theme="dark_parallax"] .dp-cat-title { font-size: 10px; line-height: 1.25; } [data-theme="dark_parallax"] .dp-nav-header { padding: 8px 14px 4px; } /* Product cards mobile */ [data-theme="dark_parallax"] .card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="dark_parallax"] .price { font-size: 18px; } } /* ════════════════════════════════════════════════════════════════════ DEFAULT THEME — PREMIUM NAVIGATION TILES Groups: horizontal scroll rectangular cards. Categories: square flex-wrap grid. Light colours, green accent. Does NOT affect dark_parallax. ════════════════════════════════════════════════════════════════════ */ /* ── Show nav headers + category section ── */ [data-theme="default"] .dp-nav-header { display: flex; align-items: center; justify-content: space-between; max-width: 1140px; margin: 0 auto; padding: 16px 20px 8px; } [data-theme="default"] .dp-nav-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; } [data-theme="default"] .dp-show-all-btn { background: none; border: 1px solid #e5e7eb; border-radius: 20px; color: #6b7280; font-size: 11px; font-weight: 600; padding: 3px 10px; cursor: pointer; transition: border-color .2s, color .2s; } [data-theme="default"] .dp-show-all-btn:hover { border-color: var(--accent); color: var(--accent); } /* Groups row has scroll — no show-all button needed */ [data-theme="default"] .dp-groups-wrap .dp-show-all-btn { display: none; } [data-theme="default"] .dp-groups-wrap { position: relative; z-index: 1; padding-top: 8px; } /* ── Groups: horizontal scroll row ── */ [data-theme="default"] .site-categories { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible; gap: 10px; max-height: none; max-width: 1140px; margin: 0 auto; padding: 2px 20px 12px; background: transparent; scrollbar-width: thin; scrollbar-color: rgba(22,163,74,.3) transparent; -webkit-overflow-scrolling: touch; grid-template-columns: unset; } [data-theme="default"] .site-categories::-webkit-scrollbar { height: 3px; } [data-theme="default"] .site-categories::-webkit-scrollbar-thumb { background: rgba(22,163,74,.3); border-radius: 2px; } /* ── Group cards: rectangular, light glass ── */ [data-theme="default"] .site-category-card { flex-shrink: 0; width: 200px; height: 72px; aspect-ratio: unset; display: flex !important; flex-direction: row; align-items: center; gap: 10px; padding: 0 16px; border-radius: 14px; text-align: left; text-decoration: none; color: #374151; background: #fff; border: 2px solid transparent; box-shadow: 0 2px 12px rgba(0,0,0,.07); transition: border-color .2s, box-shadow .2s, background .2s, transform .2s, color .2s; cursor: pointer; position: relative; } [data-theme="default"] .site-category-card:hover { transform: translateY(0); box-shadow: 0 6px 20px rgba(22,163,74,.18); border-color: var(--accent); color: #111827; } [data-theme="default"] .site-category-card.active { border-color: var(--accent); background: linear-gradient(135deg, rgba(22,163,74,.08) 0%, #f0fdf4 100%); box-shadow: 0 4px 20px rgba(22,163,74,.2); color: #111827; } [data-theme="default"] .site-category-card.active .site-category-title { color: var(--accent-dark); font-weight: 700; } [data-theme="default"] .site-category-card.active::after { background: var(--accent); color: #fff; box-shadow: none; } [data-theme="default"] .site-category-card .site-category-emoji { font-size: 22px; margin: 0; flex-shrink: 0; } [data-theme="default"] .site-category-card .site-category-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } /* ── Categories section ── */ [data-theme="default"] .dp-cats-wrap { display: block !important; width: 100%; } [data-theme="default"] .dp-cats-grid { max-width: 1140px; margin: 0 auto; padding: 0 20px 4px; display: flex !important; flex-wrap: wrap; gap: 10px; align-items: flex-start; max-height: none; overflow: visible; } [data-theme="default"] .dp-cat-card { flex: 0 0 130px; width: 130px; background: #fff; border: 2px solid transparent; border-radius: 14px; color: #374151; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; padding: 10px 6px; gap: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; cursor: pointer; position: relative; } [data-theme="default"] .dp-cat-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 6px 22px rgba(22,163,74,.18); } [data-theme="default"] .dp-cat-card.dp-cat-active { border-color: var(--accent); background: linear-gradient(135deg, rgba(22,163,74,.10) 0%, #f0fdf4 100%); box-shadow: 0 4px 16px rgba(22,163,74,.2); } [data-theme="default"] .dp-cat-emoji { font-size: 26px; line-height: 1; } [data-theme="default"] .dp-cat-title { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.3; color: #374151; max-width: 100%; word-break: break-word; hyphens: auto; } [data-theme="default"] .dp-cat-card.dp-cat-active .dp-cat-title { color: var(--accent-dark); font-weight: 700; } /* ── Default theme mobile ── */ @media (max-width: 768px) { [data-theme="default"] .dp-groups-wrap, [data-theme="default"] .dp-cats-wrap { overflow-x: hidden; } [data-theme="default"] .site-categories { padding: 0 14px 8px; gap: 8px; overscroll-behavior-x: contain; } [data-theme="default"] .site-category-card { width: auto !important; min-width: 110px; max-width: 168px; min-height: 56px; height: auto; padding: 10px 12px; gap: 8px; } [data-theme="default"] .site-category-card .site-category-emoji { font-size: 19px; } [data-theme="default"] .site-category-card .site-category-title { font-size: 12px; } [data-theme="default"] .group-nav-card { justify-content: center; } [data-theme="default"] .group-nav-card .site-category-title { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; max-width: 100%; } [data-theme="default"] .dp-cats-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px; padding: 0 14px 6px; } [data-theme="default"] .dp-cat-card { flex: unset; width: 100%; min-height: 88px; padding: 10px 6px; } [data-theme="default"] .dp-cat-emoji { font-size: 20px; } [data-theme="default"] .dp-cat-title { font-size: 10px; line-height: 1.25; } [data-theme="default"] .dp-nav-header { padding: 10px 14px 6px; } } @media (min-width: 560px) and (max-width: 768px) { [data-theme="dark_parallax"] .dp-cats-grid, [data-theme="default"] .dp-cats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } html { scroll-behavior: smooth; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', Arial, sans-serif; background: #f3f4f6; color: #111827; } /* ============================================================ PROMO BAR ============================================================ */ .promo-bar { position: relative; z-index: 90; display: flex; align-items: center; padding: 10px 44px 10px 0; background: linear-gradient(90deg,#052e16 0%,#14532d 40%,#166534 60%,#052e16 100%); background-size: 200% 100%; animation: promoSlide 6s linear infinite; box-shadow: 0 2px 16px rgba(22,163,74,.22); border-bottom: 1px solid rgba(22,163,74,.25); overflow: hidden; } @keyframes promoSlide { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .promo-marquee-wrap { flex:1; min-width:0; overflow:hidden; } .promo-bar-text { display: inline-block; white-space: nowrap; padding-left: 100%; font-size: 13.5px; font-weight: 600; color: #d1fae5; letter-spacing: .2px; line-height: 1.4; animation: marqueeScroll 24s linear infinite; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .promo-bar-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none !important; border: none; color: rgba(209,250,229,.7); font-size: 15px; cursor: pointer; width: 26px !important; height: 26px !important; min-width: unset !important; padding: 0 !important; margin-top: 0 !important; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; } .promo-bar-close:hover { color:#bbf7d0 !important; background: rgba(255,255,255,.1) !important; } @media (prefers-reduced-motion: reduce) { .promo-bar { animation: none; } .promo-bar-text { padding-left:16px; animation:none; } } @media (max-width:600px) { .promo-bar { padding: 9px 36px 9px 0; } .promo-bar-text { font-size:12px; animation-duration:18s; } } /* ============================================================ SITE HEADER ============================================================ */ .site-header { position: relative; background: linear-gradient(180deg, #0b1320 0%, #0d1523 52%, #0a121d 100%); color: #fff; padding: 22px 18px 18px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.04); box-shadow: inset 0 -1px 0 rgba(255,255,255,.02); } .site-header .header-inner { max-width: 1140px; margin: 0 auto; display:flex; flex-direction:column; gap:14px; } .site-header .header-topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; } .site-header .header-brand { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .site-header .header-menu-btn { width: 56px; height: 56px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); color: #f8fafc; font-size: 30px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .site-header .header-menu-btn:hover { background: rgba(255,255,255,.05); color: #fff; } .site-header .header-actions { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; flex-shrink: 0; } .site-header .cart-pill { width: 72px !important; height: 72px !important; padding: 0; border-radius: 20px !important; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); font-size: 34px; color: white; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0; text-decoration: none; font-weight: 700; cursor: pointer; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .site-header .cart-pill span { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #65d64f; color: #fff; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-left: 0; } .site-header .favorites-pill { width: 72px !important; height: 72px !important; padding: 0; border-radius: 20px !important; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); font-size: 34px; color: white; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0; text-decoration: none; font-weight: 700; cursor: pointer; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .site-header .favorites-pill span { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #65d64f; color: #fff; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-left: 0; } .site-header .header-contact-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .site-header .header-contact-card { min-height: 112px; border-radius: 18px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.022); color: #f3f4f6; text-decoration: none; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } .site-header .header-contact-card:hover { background: rgba(255,255,255,.045); border-color: rgba(101,214,79,.2); } .site-header .header-contact-icon { font-size: 28px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; } .site-header .header-contact-text { font-size: 14px; font-weight: 500; line-height: 1.35; color: #e5e7eb; word-break: break-word; } .site-menu-backdrop { position: fixed; inset: 0; background: rgba(3, 8, 18, .58); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 1198; } .site-menu-backdrop.open { opacity: 1; pointer-events: auto; } .site-menu-drawer { position: fixed; top: 0; left: 0; width: min(420px, 100%); height: 100vh; background: linear-gradient(180deg, #0b1320 0%, #101828 100%); border-right: 1px solid rgba(255,255,255,.08); box-shadow: 18px 0 48px rgba(0,0,0,.34); transform: translateX(-100%); transition: transform .24s ease; z-index: 1199; display: flex; flex-direction: column; } .site-menu-drawer.open { transform: translateX(0); } .site-menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.07); } .site-menu-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #9ca3af; margin-bottom: 8px; } .site-menu-title { font-size: 24px; font-weight: 800; line-height: 1.05; color: #f8fafc; } .site-menu-close { width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #f8fafc; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .site-menu-close:hover { background: rgba(255,255,255,.08); } .site-menu-body { display: grid; grid-template-columns: minmax(150px, 180px) minmax(0, 1fr); gap: 18px; padding: 18px 20px 22px; min-height: 0; flex: 1; } .site-menu-nav { display: flex; flex-direction: column; gap: 10px; } .site-menu-link { width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: #e5e7eb; border-radius: 16px; padding: 13px 14px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: all .18s ease; } .site-menu-link:hover, .site-menu-link.active { border-color: rgba(101,214,79,.28); background: rgba(101,214,79,.12); color: #ffffff; } .site-menu-panels { min-height: 0; overflow-y: auto; padding-right: 4px; } .site-menu-panel { display: none; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); border-radius: 20px; padding: 18px 18px 20px; } .site-menu-panel.active { display: block; } .site-menu-panel h3 { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: #f8fafc; } .site-menu-copy { color: #d1d5db; font-size: 14px; line-height: 1.65; } .site-menu-contacts { display: grid; gap: 10px; } .site-menu-contact { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); color: #f8fafc; font-size: 13px; font-weight: 700; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; } .site-menu-contact:hover { border-color: rgba(101,214,79,.3); background: rgba(101,214,79,.1); } .site-menu-contact > span:first-child { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .site-menu-contact small { display: block; margin-bottom: 2px; color: #94a3b8; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .site-menu-contact-address { grid-column: 1 / -1; } .product-page, #catalog { scroll-margin-top: 16px; } body.menu-open { overflow: hidden; } @media (max-width: 768px) { .site-header { padding: 14px 12px 12px; } .site-header .header-topbar { align-items: stretch; gap: 8px; } .site-header .header-brand { border-radius: 18px; overflow: hidden; } .site-header .header-menu-btn { width: 50px; height: 50px; border-radius: 16px; font-size: 25px; } .site-header .header-actions { gap: 6px !important; width: 104px; justify-content: flex-end; } .site-header .favorites-pill, .site-header .cart-pill { width: 49px !important; height: 49px !important; border-radius: 16px !important; font-size: 24px; } .site-header .favorites-pill span, .site-header .cart-pill span { top: 5px; right: 5px; min-width: 20px; height: 20px; font-size: 12px; } .site-header .header-contact-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 104px; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; padding-bottom: 2px; } .site-header .header-contact-grid::-webkit-scrollbar { display: none; } .site-header .header-contact-card { min-height: 72px; border-radius: 14px; padding: 8px 6px 10px; scroll-snap-align: start; } .site-header .header-contact-icon { font-size: 18px; min-height: 18px; } .site-header .header-contact-text { font-size: 10px; line-height: 1.18; } .site-menu-body { grid-template-columns: 1fr; gap: 12px; padding: 16px; overflow-y: auto; } .site-menu-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .site-menu-link { min-height: 52px; padding: 10px 12px; border-radius: 14px; font-size: 13px; } .site-menu-panels { overflow: visible; padding-right: 0; } .site-menu-panel { padding: 16px; border-radius: 18px; } .site-menu-panel h3 { margin-bottom: 10px; font-size: 18px; } .site-menu-copy { font-size: 13px; line-height: 1.55; } .site-menu-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .site-menu-contact { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 10px; font-size: 12px; } .site-menu-title { font-size: 20px; } } @media (max-width: 420px) { .site-header .header-topbar { gap: 6px; } .site-header .header-menu-btn { width: 46px; height: 46px; font-size: 23px; } .site-header .header-actions { width: 96px; gap: 4px !important; } .site-header .favorites-pill, .site-header .cart-pill { width: 46px !important; height: 46px !important; font-size: 22px; } .site-header .header-contact-grid { grid-auto-columns: 96px; } .site-menu-head { padding: 16px 16px 14px; } } /* ── Text logo ── */ .site-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; color: inherit; min-width: 0; width: 100%; } .site-logo .logo-main-row { display: inline-flex; align-items: center; gap: 12px; width: 100%; min-width: 0; } .site-logo .logo-badge { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 18px; font-weight: 900; flex-shrink: 0; } .site-logo .logo-img { width: 72px; height: 72px; border-radius: 18px; object-fit: contain; background: rgba(255,255,255,.02); flex-shrink: 0; border: 1px solid rgba(255,255,255,.07); } .site-logo .logo-subtext { margin-top: 0; font-size: 14px; line-height: 1.35; color: #b8c1ce; display: block; padding-left: 86px; } .site-logo .logo-text { font-size:18px; font-weight:800; } .site-header .site-logo { font-size:28px; gap:8px; margin-bottom:0; min-height: 72px; padding: 10px 14px; } .site-header .site-logo .logo-badge { width:72px; height:72px; font-size:28px; border-radius:18px; background: linear-gradient(135deg, #65d64f 0%, #2fa85a 100%); } .site-header .site-logo .logo-text { font-size: clamp(24px, 4vw, 38px); line-height: 1.05; letter-spacing: -.8px; } @media (max-width: 768px) { .site-logo { gap: 5px; } .site-logo .logo-img, .site-header .site-logo .logo-badge { width: 52px; height: 52px; border-radius: 14px; } .site-logo .logo-main-row { gap: 10px; } .site-header .site-logo .logo-text { font-size: 16px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-logo .logo-subtext { font-size: 10px; margin-top: 0; padding-left: 62px; white-space: normal; overflow: visible; text-overflow: clip; } .site-header .site-logo { gap: 5px; min-height: 50px; padding: 6px 8px; } } /* ── Language buttons ── */ .lang-switch, .site-header .lang-switch { width: auto !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; border: none !important; display: flex !important; align-items: center !important; gap: 8px !important; } .site-lang-btn { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.25) !important; color: white !important; border-radius: 999px !important; padding: 9px 14px !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; width: auto !important; margin: 0 !important; line-height: 1 !important; } .site-lang-btn:hover, .site-lang-btn.active { background: white !important; color: #111827 !important; border-color: white !important; } .lang-separator { color: rgba(255,255,255,.5); font-weight:700; font-size:13px; } /* ============================================================ HERO BANNER ============================================================ */ .hero-banner { position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#0a0f1e 0%,#0d1f2d 40%,#071811 100%); border-radius: 0; } .hero-banner-clickable { cursor: pointer; } .hero-slides { position:absolute; inset:0; z-index:0; } .hero-slide { position:absolute; inset:0; opacity:0; background-image: var(--slide-image); background-size:cover; background-position:center; background-repeat:no-repeat; transform:scale(1.06); transition:opacity .9s ease, transform 6s ease; } .hero-banner-slider::after { display: none; } .hero-banner-slider .hero-glow { display: none; } .hero-slide.active { opacity:1; transform:scale(1); } .hero-glow { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; } .hero-glow-1 { width:420px; height:420px; background: radial-gradient(circle,rgba(22,163,74,.35) 0%,transparent 70%); top:-120px; left:-80px; animation: glowDrift1 8s ease-in-out infinite alternate; } .hero-glow-2 { width:360px; height:360px; background: radial-gradient(circle,rgba(16,185,129,.22) 0%,transparent 70%); bottom:-100px; right:-60px; animation: glowDrift2 10s ease-in-out infinite alternate; } @keyframes glowDrift1 { from{transform:translate(0,0) scale(1);} to{transform:translate(40px,30px) scale(1.1);} } @keyframes glowDrift2 { from{transform:translate(0,0) scale(1);} to{transform:translate(-30px,-20px) scale(1.08);} } .hero-dots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display:flex; align-items:center; justify-content:center; gap:10px; z-index: 3; } .hero-dot { width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.38); box-shadow:0 0 0 1px rgba(255,255,255,.18); cursor:pointer; transition:transform .2s ease, background .2s ease, width .2s ease; } .hero-dot.active { width:28px; background:var(--accent-light); transform:scale(1.02); } @media (max-width:768px) { .hero-banner{ min-height: 220px; border-radius: 0; } .hero-slide{ background-size: contain; background-position: center center; transform: none; } .hero-slide.active { transform:none; } .hero-dots { gap:8px; } .hero-dot { width:9px; height:9px; } .hero-dot.active { width:24px; } } /* ============================================================ SITE CATEGORY CARDS ============================================================ */ .site-categories { max-width: 1100px; margin: 24px auto; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px; } .site-category-card { background: white; border-radius: 16px; padding: 18px; text-align: center; text-decoration: none; color: #111827; box-shadow: 0 6px 20px rgba(0,0,0,.07); transition: .2s; border: 2px solid transparent; position: relative; cursor: pointer; } .site-category-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.11); } .site-category-card.active { border-color: var(--accent); background: linear-gradient(140deg,var(--accent-light) 0%,#dcfce7 100%); box-shadow: 0 6px 24px rgba(22,163,74,.2); } .site-category-card.active .site-category-title { font-weight:700; color:var(--accent-dark); } .site-category-card.active::after { content:'✓'; position:absolute; top:6px; right:7px; background:var(--accent); color:#fff; font-size:10px; font-weight:900; width:17px; height:17px; display:flex; align-items:center; justify-content:center; border-radius:50%; } .site-category-emoji { font-size:30px; margin-bottom:8px; } .site-category-title { font-weight:600; font-size:13px; } /* ============================================================ CATALOG LAYOUT — sidebar + grid ============================================================ */ .catalog-layout { display:block; } .catalog-content { min-width:0; } /* ── Search box (sidebar) ── */ .search-box { max-width: 900px; margin: 20px auto 0; padding: 0 20px; } .search-form { display:flex; flex-direction:column; gap:12px; } .search-toolbar-row { max-width: 100%; margin: 0; } .search-main-row { display: grid; grid-template-columns: minmax(280px,1fr) 120px; gap: 10px; align-items: center; } .search-main-row input[type="text"] { width:100% !important; height:46px !important; padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 14px; outline: none; transition: border-color .15s; } .search-main-row input[type="text"]:focus { border-color:var(--accent); } .search-main-row button[type="button"] { width: 120px !important; height: 46px !important; padding: 0 !important; border: none; border-radius: 12px !important; background: var(--accent); color: white; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; transition: background .2s; margin-top: 0 !important; } .search-main-row button[type="button"]:hover { background:var(--accent-dark); } /* brand select & price inputs */ .brand-select { padding: 9px 12px; border-radius: 10px; border: 1.5px solid #e5e7eb; background: white; font-size: 13px; font-weight: 600; color: #111827; cursor: pointer; outline: none; transition: border-color .15s; } .brand-select:focus { border-color:var(--accent); } .price-input { width: 110px; margin-top: 0 !important; padding: 9px 10px !important; border-radius: 10px !important; border: 1.5px solid #e5e7eb !important; font-size: 13px; outline: none; transition: border-color .15s; } .price-input:focus { border-color:var(--accent) !important; } .in-stock-label { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #374151; cursor: pointer; white-space: nowrap; } .in-stock-label input[type="checkbox"] { -webkit-appearance:none; appearance:none; width:18px !important; height:18px !important; border: 2px solid #d1d5db; border-radius: 5px; background: #fff; cursor: pointer; flex-shrink: 0; margin: 0 !important; padding: 0 !important; position: relative; transition: background .15s, border-color .15s; } .in-stock-label input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .in-stock-label input[type="checkbox"]:checked::after { content:''; display:block; width:4px; height:8px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg); position:absolute; top:1px; left:5px; } /* ── Filters toggle button ── */ .filters-toggle-row { max-width:900px; margin:8px auto 0; padding:0 20px; } .filters-toggle-btn { display: inline-flex; align-items:center; gap:7px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #e5e7eb; background: #ffffff; color: #374151; font-size: 13px; font-weight:600; cursor: pointer; transition: all .2s ease; white-space: nowrap; box-shadow: 0 1px 6px rgba(0,0,0,.07); } .filters-toggle-btn:hover { border-color:var(--accent); color:var(--accent); } .filters-toggle-btn[aria-expanded="true"] { background:var(--accent); color:#fff; border-color:transparent; } .filters-btn-chevron { flex-shrink:0; transition:transform .25s ease; } .filters-toggle-btn[aria-expanded="true"] .filters-btn-chevron { transform:rotate(180deg); } /* ── Filters panel ── */ .filters-panel { max-width: 900px; margin:0 auto; padding:0 20px; overflow: hidden; max-height:0; opacity:0; transform:translateY(-8px); transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .26s ease, transform .26s ease; } .filters-panel[data-open="true"] { max-height:2000px; opacity:1; transform:translateY(0); } .filters-panel-header, .filters-panel-footer { display:none; } .filters-panel-body { display: flex; flex-direction:column; gap:10px; padding: 12px 0 8px; } .search-filters-row { display: flex !important; flex-wrap:wrap !important; gap: 8px !important; align-items:center !important; padding: 12px 16px !important; background: #fff !important; border:1px solid #e9ecef !important; border-radius: 14px !important; margin:0 !important; box-shadow: 0 1px 4px rgba(0,0,0,.05) !important; } .filters-backdrop { position:fixed; inset:0; background:rgba(10,16,30,.48); backdrop-filter:blur(2px); z-index:1000; opacity:0; transition:opacity .25s ease; } .filters-backdrop:not([hidden]) { opacity:1; } .filters-drag-handle { width:36px; height:4px; background:#d1d5db; border-radius:2px; margin:10px auto 2px; flex-shrink:0; } /* ── Mobile bottom sheet ── */ @media (max-width:768px) { .filters-toggle-row { padding:0 14px; } .filters-panel { position:fixed; inset:auto 0 0 0; z-index:1001; background:#fff; border-radius:24px 24px 0 0; box-shadow: 0 -12px 48px rgba(0,0,0,.18); max-height:88vh; max-width:100%; margin:0; padding:0; opacity:1; transform:translateY(100%); transition:transform .32s cubic-bezier(.32,.72,0,1); display:flex; flex-direction:column; overflow:hidden; } .filters-panel[data-open="true"] { transform:translateY(0); max-height:88vh; } .filters-panel[data-open="false"] { pointer-events:none; } .filters-panel-header { display:flex !important; align-items:center; justify-content:space-between; padding:4px 18px 14px; border-bottom:1px solid #f3f4f6; flex-shrink:0; } .filters-panel-title { font-size:16px; font-weight:700; color:#111827; } .filters-close-btn { background:#f3f4f6; border:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#6b7280; cursor:pointer; border-radius:50%; } .filters-panel-body { flex:1 1 auto; overflow-y:auto; padding:14px 16px 10px; gap:10px; min-width:0; } .filters-panel-footer { display:block !important; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #f3f4f6; background:#fff; flex-shrink:0; } .filters-apply-btn { width:100%; height:50px; border:0; border-radius:14px; background:var(--accent); color:#fff; font-size:16px; font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(22,163,74,.32); } .filters-panel .search-filters-row { background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; gap:10px !important; flex-direction:column !important; align-items:stretch !important; } .search-main-row { grid-template-columns: minmax(0, 1fr) 88px !important; width:100% !important; max-width:100% !important; } .search-main-row input[type="text"] { min-width:0 !important; } .search-main-row button[type="button"] { width:100% !important; min-width:0 !important; font-size:13px !important; } .search-filters-row > * { width:100% !important; min-width:0 !important; } .price-input, .brand-select { width:100% !important; max-width:100% !important; } .in-stock-label { flex-wrap:wrap; align-items:flex-start; } } /* ── Desktop sidebar layout ── */ @media (min-width:769px) { .catalog-layout { display:flex; align-items:flex-start; max-width:1420px; margin:0 auto; padding:0 20px; gap:24px; } .catalog-layout .search-box { width:272px; flex-shrink:0; position:sticky; top:16px; max-height:calc(100vh - 40px); overflow-y:auto; scrollbar-width:thin; background:#fff; border:1px solid #e9ecef; border-radius:20px; box-shadow:0 4px 24px rgba(0,0,0,.06); padding:0 !important; margin:16px 0 0 !important; max-width:272px !important; } .catalog-layout .search-form { padding:16px 16px 20px; } .catalog-layout .filters-panel { max-height:none !important; opacity:1 !important; transform:none !important; padding:0 !important; margin:0 !important; overflow:visible !important; } .catalog-layout .filters-panel-header { display:flex !important; padding:0 0 10px !important; border-bottom:1px solid #f3f4f6; margin-bottom:6px; } .catalog-layout .filters-panel-title { font-size:11px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.8px; } .catalog-layout .filters-close-btn, .catalog-layout .filters-drag-handle { display:none !important; } .catalog-layout .filters-panel-body { padding:4px 0 0 !important; gap:8px !important; } .catalog-layout .filters-panel-footer { display:none !important; } .catalog-layout .filters-toggle-row { display:none !important; } .catalog-layout .search-filters-row { flex-direction:column !important; align-items:stretch !important; background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; gap:8px !important; } .catalog-layout .brand-select { width:100% !important; border-radius:10px !important; font-size:13px !important; } .catalog-layout .price-input { width:100% !important; } .catalog-layout .search-main-row { display:flex !important; max-width:100% !important; margin:0 0 12px 0 !important; padding:0 !important; gap:8px !important; } .catalog-layout .search-main-row input[type="text"] { flex:1 !important; min-width:0 !important; border-radius:10px !important; font-size:13px !important; } .catalog-layout .search-main-row button[type="button"] { flex-shrink:0 !important; width:auto !important; min-width:56px !important; padding:0 10px !important; border-radius:10px !important; font-size:13px !important; } .catalog-layout .search-toolbar-row { padding: 0 !important; margin: 0 0 8px 0 !important; } .catalog-content { flex:1; min-width:0; } .catalog-layout .products, .catalog-layout .products-grid { max-width:none !important; margin:0 !important; padding:8px 0 30px !important; } } /* ============================================================ CATALOG TOOLBAR ============================================================ */ .catalog-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:0 2px; min-height:36px; } .chips-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:1; min-width:0; } .active-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .sort-row { flex-shrink:0; } .sort-wrap { position:relative; display:flex; align-items:center; } .sort-wrap::after { content:''; position:absolute; right:10px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #9ca3af; pointer-events:none; } .sort-select { -webkit-appearance:none; appearance:none; padding:7px 28px 7px 12px; border:1.5px solid #e5e7eb; border-radius:10px; font-size:13px; color:#374151; background:#fff; cursor:pointer; outline:none; font-weight:500; box-shadow:0 1px 3px rgba(0,0,0,.05); min-width:150px; transition:border-color .15s; } .sort-select:focus { border-color:var(--accent); } @media (max-width:768px) { .catalog-toolbar { display:block; padding:0 14px; margin-bottom:8px; } .chips-row { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin-bottom:10px; padding-bottom:2px; } .chips-row::-webkit-scrollbar { display:none; } .sort-row { display:block; margin-bottom:6px; } .sort-wrap { width:100%; } .sort-select { width:100%; min-width:0; padding:9px 28px 9px 12px; } } /* ============================================================ PRODUCT GRID ============================================================ */ .products { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); align-items: stretch; gap: 20px; padding: 20px 20px 30px; } .card { background: white; border-radius: 18px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.07); transition: .2s; display: flex; flex-direction: column; height: 100%; position: relative; } .card[data-href] { cursor:pointer; } .card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.11); } .card-image-wrap { position:relative; display:block; width:100%; height:200px; margin-bottom:12px; } .product-img { display:block; width:100%; height:100%; object-fit:contain; border-radius:12px; background:#f9fafb; padding:6px; } .no-photo { width:100%; height:100%; border-radius:12px; background:#e5e7eb; color:#6b7280; display:flex; align-items:center; justify-content:center; font-size:13px; } .card-sale-badge { position:absolute; top:8px; left:8px; background:rgba(239,68,68,.9); color:#fff; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; z-index:2; white-space:nowrap; } .card-custom-badge { position:absolute; top:8px; right:8px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; z-index:2; white-space:nowrap; } .card-custom-badge.badge-акція,.card-custom-badge.badge-акция { background:rgba(239,68,68,.9); color:#fff; } .card-custom-badge.badge-топ { background:rgba(59,130,246,.9); color:#fff; } .card-custom-badge.badge-новинка { background:rgba(34,197,94,.9); color:#fff; } .card-custom-badge.badge-хіт,.card-custom-badge.badge-хит { background:rgba(249,115,22,.9); color:#fff; } .card-custom-badge { background:rgba(139,92,246,.9); color:#fff; } .card-brand { font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; color:#111827; margin-bottom:4px; line-height:1.15; } .category { color:#6b7280; font-size:13px; margin-bottom:6px; } .card h2 { margin:0 0 10px; font-size:13px; line-height:1.3; font-weight:700; color:#6b7280; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:52px; } .status { display:inline-block; padding:4px 9px; border-radius:999px; font-size:12px; margin-bottom:8px; } .stock-badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:.82em; font-weight:600; } .stock-in { background:#ecfdf5; color:#047857; } .stock-preorder { background:#fffbeb; color:#b45309; } .stock-out { background:#fef2f2; color:#b91c1c; } .price-block { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:6px 0; } .price { font-size:22px; font-weight:900; color:var(--accent); margin:0; } .old-price { color:#9ca3af; text-decoration:line-through; font-size:.9em; margin:0; } .catalog-pagination { display:none; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:22px 0 8px; } .catalog-page-btn { min-width:42px; height:42px; border:none; border-radius:12px; background:#fff; color:#111827; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(15,23,42,.08); transition:transform .18s ease, background .18s ease, color .18s ease; } .catalog-page-btn:hover { transform:translateY(-1px); background:var(--accent-light); color:var(--accent); } .catalog-page-btn.active { background:var(--accent); color:#fff; } .catalog-page-arrow { font-size:18px; } .catalog-page-dots { color:#9ca3af; font-size:18px; font-weight:700; padding:0 2px; } .card-actions { margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:12px; } .details-btn { display:block; text-align:center; text-decoration:none; padding:11px; border-radius:12px; background:#111827; color:white; font-weight:700; font-size:14px; transition:background .2s; } .details-btn:hover { background:#374151; } .cart-btn { width:100%; padding:11px; border:none; border-radius:12px; background:var(--accent); color:white; font-weight:700; font-size:14px; cursor:pointer; transition:background .2s; margin-top:0 !important; } .cart-btn:hover { background:var(--accent-dark); } /* Mobile 2-column grid */ @media (max-width:768px) { .products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:10px 10px 20px; } .card { padding:12px; } .card-image-wrap { height:170px; } .card h2 { font-size:14px; min-height:52px; } .price { font-size:18px; } .details-btn,.cart-btn { padding:9px; font-size:13px; } } /* Mobile 2-col cards (≤ 640 px) */ @media (max-width:640px) { .products, .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 10px 12px 24px; } .card { padding: 14px; border-radius: 22px; } .card-image-wrap { height: 170px; margin-bottom: 10px; } .product-img { border-radius: 12px; padding: 6px; } .no-photo { border-radius: 12px; } .card-brand { font-size: 15px; text-align: center; margin-bottom: 2px; } .category { font-size: 13px; text-align: center; margin-bottom: 4px; } .card h2 { font-size: 13px; line-height: 1.2; min-height: 32px; -webkit-line-clamp: 2; text-align: center; margin: 0 0 6px; } .status { display:block; text-align:center; margin-bottom:6px; } .price-block { justify-content: center; gap: 6px; margin: 4px 0 8px; } .price { font-size: 22px; } .old-price { font-size: 13px; } .card-actions { gap: 6px; padding-top: 8px; align-items: stretch; } .details-btn, .cart-btn { height: 46px; font-size: 15px; border-radius: 12px; padding: 0 6px; display: flex; align-items: center; justify-content: center; } .fav-btn { position: static; display: block; font-size: 22px; padding: 4px; align-self: center; margin: 4px auto 0; } /* Override dark_parallax theme specificity for price/title sizing */ [data-theme="dark_parallax"] .price { font-size: 22px; } [data-theme="dark_parallax"] .card h2 { font-size: 13px; min-height: 32px; color:#6b7280; } } /* Extra-narrow (≤ 380 px) — tighten without going 1-col */ @media (max-width:380px) { .products, .products-grid { gap: 8px; padding: 6px 8px 20px; } .card { padding: 10px; border-radius: 16px; } .card-image-wrap { height: 120px; margin-bottom: 7px; } .card-brand { font-size: 13px; } .card h2 { font-size: 12px; min-height: 28px; } .price { font-size: 18px; } .details-btn, .cart-btn { height: 38px; font-size: 13px; } } /* ============================================================ LIGHTBOX ============================================================ */ .img-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:9999; padding:24px; box-sizing:border-box; } .img-lightbox.open { display:flex; } .img-lightbox-img { max-width:92vw; max-height:90vh; object-fit:contain; border-radius:12px; background:#fff; box-shadow:0 16px 60px rgba(0,0,0,.5); display:block; } .img-lightbox-close { position:absolute; top:16px; right:18px; width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,.92); color:#111827; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; } .img-lightbox-close:hover { background:#fff; } /* ============================================================ SITE FOOTER ============================================================ */ .site-footer { margin-top:60px; background:#111827; color:#d1d5db; } .site-footer .footer-top { max-width:1100px; margin:0 auto; padding:48px 24px 36px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:40px; align-items:start; } .site-footer .footer-brand .site-logo { color:#fff; font-size:20px; margin-bottom:12px; display:flex; } .site-footer .footer-brand p { font-size:13px; color:#9ca3af; line-height:1.6; margin:0; } .site-footer .footer-col h4 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#fff; margin:0 0 16px; } .site-footer .footer-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .site-footer .footer-col ul li a { color:#9ca3af; text-decoration:none; font-size:14px; transition:color .18s; } .site-footer .footer-col ul li a:hover { color:#fff; } .site-footer .footer-contacts p { font-size:13px; color:#9ca3af; margin:0 0 8px; line-height:1.5; } .site-footer .footer-contacts a { color:#9ca3af; text-decoration:none; transition:color .18s; } .site-footer .footer-contacts a:hover { color:#fff; } .site-footer .footer-divider { border:none; border-top:1px solid #1f2937; margin:0; } .site-footer .footer-bottom { max-width:1100px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .site-footer .footer-bottom .copyright { font-size:13px; color:#4b5563; } .site-footer .footer-bottom-links { display:flex; gap:16px; } .site-footer .footer-bottom-links a { font-size:12px; color:#4b5563; text-decoration:none; transition:color .18s; } .site-footer .footer-bottom-links a:hover { color:#9ca3af; } @media (max-width:768px) { .site-footer .footer-top { grid-template-columns:1fr 1fr; gap:28px 20px; padding:32px 18px 24px; } .site-footer .footer-brand { grid-column:1/-1; } .site-footer .footer-bottom { flex-direction:column; text-align:center; gap:8px; padding:14px 18px; } .site-footer .footer-bottom-links { justify-content:center; } } @media (max-width:480px) { .site-footer .footer-top { grid-template-columns:1fr; } } /* ============================================================ PAGINATION ============================================================ */ .pagination { max-width:1100px; margin:24px auto; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; padding:0 20px; } .pagination a { padding:9px 14px; border-radius:999px; background:#e5e7eb; color:#111827; text-decoration:none; font-weight:700; } .pagination a.active { background:#111827; color:white; } .pagination a:hover:not(.active) { background:#d1d5db; } /* ============================================================ CART DRAWER ============================================================ */ .cart-drawer, .favorites-drawer { position:fixed; right:0; top:0; bottom:0; width:380px; max-width:100vw; background:#fff; box-shadow:-8px 0 40px rgba(0,0,0,.18); z-index:10000; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s cubic-bezier(.32,.72,0,1); } .cart-drawer.open, .favorites-drawer.open { transform:translateX(0); } .cart-drawer-header, .favorites-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; border-bottom:1px solid #f3f4f6; } .cart-drawer-title, .favorites-drawer-title { font-size:18px; font-weight:800; color:#111827; } .cart-drawer-close, .favorites-drawer-close { background:#f3f4f6; border:none; width:34px; height:34px; border-radius:50%; font-size:18px; cursor:pointer; color:#6b7280; display:flex; align-items:center; justify-content:center; margin-top:0 !important; width:34px !important; } .cart-drawer-close:hover, .favorites-drawer-close:hover { background:#e5e7eb; color:#111827; } .cart-drawer-body, .favorites-drawer-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; } .cart-drawer-empty, .favorites-drawer-empty { text-align:center; padding:48px 24px; color:#9ca3af; font-size:14px; } .cart-item { display:flex; gap:12px; align-items:flex-start; padding:12px; background:#f9fafb; border-radius:12px; } .cart-item-img { width:60px; height:60px; border-radius:8px; object-fit:contain; background:#fff; flex-shrink:0; } .cart-item-info { flex:1; min-width:0; } .cart-item-name { font-size:13px; font-weight:600; line-height:1.3; margin-bottom:4px; } .cart-item-price { font-size:14px; font-weight:700; color:var(--accent); } .cart-item-controls { display:flex; align-items:center; gap:8px; margin-top:8px; } .qty-btn { width:28px !important; height:28px !important; border-radius:7px !important; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-size:16px; font-weight:700; color:#374151; display:flex; align-items:center; justify-content:center; padding:0 !important; margin-top:0 !important; } .qty-btn:hover { border-color:var(--accent); color:var(--accent); } .qty-display { min-width:24px; text-align:center; font-weight:700; font-size:14px; } .cart-item-remove { background:none !important; border:none; color:#ef4444; cursor:pointer; font-size:12px; padding:0 !important; margin-top:0 !important; width:auto !important; text-decoration:underline; } .cart-drawer-footer, .favorites-drawer-footer { padding:16px; border-top:1px solid #f3f4f6; display:flex; flex-direction:column; gap:10px; } .cart-total-row { display:flex; justify-content:space-between; font-weight:700; font-size:16px; padding:0 4px; } .favorites-total-row { display:flex; justify-content:space-between; font-weight:700; font-size:16px; padding:0 4px; } .cart-checkout-btn { width:100% !important; height:50px !important; border:none; border-radius:14px; background:var(--accent); color:#fff; font-size:16px !important; font-weight:700 !important; cursor:pointer; transition:background .2s; margin-top:0 !important; } .cart-checkout-btn:hover { background:var(--accent-dark); } .favorites-clear-btn { width:100% !important; height:46px !important; border:1.5px solid #e5e7eb; border-radius:14px; background:#fff; color:#374151; font-size:15px !important; font-weight:700 !important; cursor:pointer; transition:border-color .2s,color .2s,background .2s; margin-top:0 !important; } .favorites-clear-btn:hover { border-color:#ef4444; color:#ef4444; background:#fff5f5; } .cart-backdrop, .favorites-backdrop { position:fixed; inset:0; background:rgba(10,16,30,.48); backdrop-filter:blur(2px); z-index:9999; opacity:0; transition:opacity .25s ease; } .cart-backdrop:not([hidden]), .favorites-backdrop:not([hidden]) { opacity:1; } .favorite-item { display:flex; gap:12px; align-items:flex-start; padding:12px; background:#f9fafb; border-radius:12px; } .favorite-item-img { width:60px; height:60px; border-radius:8px; object-fit:contain; background:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .favorite-item-info { flex:1; min-width:0; } .favorite-item-name { display:block; font-size:13px; font-weight:700; line-height:1.3; margin-bottom:4px; color:#111827; text-decoration:none; } .favorite-item-name:hover { color:var(--accent); } .favorite-item-price { font-size:14px; font-weight:800; color:var(--accent); } .favorite-item-actions { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; } .favorite-action-btn { height:32px !important; padding:0 12px !important; border:none; border-radius:10px; background:var(--accent); color:#fff; font-size:12px !important; font-weight:700 !important; cursor:pointer; margin-top:0 !important; } .favorite-action-btn:hover { background:var(--accent-dark); } .favorite-remove-btn { background:none !important; border:none; color:#ef4444; cursor:pointer; font-size:12px !important; padding:0 !important; margin-top:0 !important; text-decoration:underline; } /* ============================================================ ORDER MODAL ============================================================ */ .order-modal { position:fixed; inset:0; z-index:10001; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); padding:20px; } .order-modal.open { display:flex; } .order-modal-box { background:#fff; border-radius:20px; padding:28px; width:100%; max-width:440px; box-shadow:0 20px 60px rgba(0,0,0,.3); max-height:90vh; overflow-y:auto; } .order-modal-title { font-size:18px; font-weight:800; margin:0 0 20px; } .order-modal-product { font-size:13px; color:#6b7280; margin-bottom:16px; padding:10px 12px; background:#f9fafb; border-radius:10px; } .order-field { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; } .order-field label { font-size:13px; font-weight:600; color:#374151; } .order-field input { width:100%; padding:10px 12px; margin-top:0 !important; border:1.5px solid #e5e7eb; border-radius:10px; font-size:14px; outline:none; } .order-field input:focus { border-color:var(--accent); } .order-submit-btn { width:100% !important; height:50px !important; border:none; border-radius:14px; background:var(--accent); color:#fff; font-size:16px !important; font-weight:700 !important; cursor:pointer; margin-top:8px !important; transition:background .2s; } .order-submit-btn:hover { background:var(--accent-dark); } .order-modal-close { float:right; background:none !important; border:none; color:#9ca3af; font-size:22px; cursor:pointer; padding:0 !important; margin-top:0 !important; width:auto !important; line-height:1; } .order-modal-close:hover { color:#374151; } /* ============================================================ TOAST ============================================================ */ .toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#111827; color:white; padding:12px 18px; border-radius:999px; font-weight:700; opacity:0; pointer-events:none; transition:.2s; z-index:99999; } .toast.show { opacity:1; } /* ============================================================ PRODUCT DETAIL PAGE ============================================================ */ .product-page { max-width:1100px; margin:0 auto; padding:20px; } .back-link { display:inline-block; margin-bottom:16px; color:#374151; text-decoration:none; font-weight:bold; font-size:14px; } .back-link:hover { color:#111827; } .product-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; } .product-gallery { background:white; border-radius:18px; padding:16px; box-shadow:0 6px 20px rgba(0,0,0,.07); display:flex; flex-direction:column; gap:12px; overflow:hidden; } .gallery-stage { position: relative; overflow:hidden; } .main-image { width:100%; height:480px; object-fit:contain; background:#f9fafb; border-radius:12px; display:block; cursor:zoom-in; } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(17,24,39,.78); color: #fff; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; touch-action: manipulation; } .gallery-nav-prev { left: 12px; } .gallery-nav-next { right: 12px; } .gallery-thumbs-wrap { display: flex; align-items: center; gap: 8px; min-width:0; } .gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding-bottom: 2px; flex: 1; min-width: 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .gallery-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; flex: 0 0 auto; background: #f9fafb; } .gallery-thumb.active { border-color: var(--accent); } .gallery-strip-nav { width: 34px; height: 34px; border-radius: 999px; border: 1px solid #d1d5db; background: #fff; color: #111827; font-size: 22px; line-height: 1; cursor: pointer; flex-shrink: 0; touch-action: manipulation; } .thumbs-row { width:100%; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:8px 4px 4px; } .thumb-img { width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:10px; cursor:pointer; background:#f9fafb; padding:4px; opacity:.75; border:2px solid transparent; box-sizing:border-box; display:block; transition:opacity .15s,border-color .15s; } .thumb-img:hover,.thumb-img.active { opacity:1; border-color:#111827; } .product-info { display:block; align-self:start; } .product-card { background:white; border-radius:16px; padding:22px; box-shadow:0 6px 20px rgba(0,0,0,.06); } .product-meta { display:flex; gap:12px; align-items:center; margin-bottom:10px; } .product-title { margin:8px 0 14px; display:flex; flex-direction:column; gap:4px; line-height:1.12; } .product-brand-name { color:#111827; font-size:28px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; } .product-model-name { color:#6b7280; font-size:21px; font-weight:700; } .desc { font-size:13px; color:#6b7280; margin-top:8px; line-height:1.6; } .specs-box { margin-top:16px; padding:16px; background:#f9fafb; border-radius:12px; } .specs-box h3 { margin:0 0 12px; font-size:15px; font-weight:700; } .spec-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #e5e7eb; } .spec-row:last-child { border-bottom:none; } .spec-row span { color:#6b7280; font-size:13px; min-width:0; overflow-wrap:anywhere; } .spec-row b { text-align:right; font-size:13px; min-width:0; overflow-wrap:anywhere; } /* ── Product info cards (description + specs below the grid) ── */ .prod-info-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px 22px; margin-top:20px; } .prod-info-card-header { display:flex; align-items:center; } .prod-info-card-title { font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#111827; } .prod-info-card-divider { height:1px; background:#e5e7eb; margin:12px 0 16px; } .desc-list { margin:0; padding:0; list-style:none; } .desc-list li { position:relative; padding-left:16px; font-size:14px; color:#374151; line-height:1.65; margin-bottom:5px; } .desc-list li::before { content:'•'; position:absolute; left:0; color:var(--accent); font-weight:700; } .desc-text { font-size:14px; color:#374151; line-height:1.65; margin:0; } .spec-hidden { display:none !important; } .prod-specs-rows .spec-extra { display:none !important; } .prod-specs-rows.specs-expanded .spec-extra { display:flex !important; } .specs-toggle-btn { width:100%; margin-top:14px; padding:9px 16px; background:#fff; border:1.5px solid #d1d5db; border-radius:10px; font-size:13px; font-weight:600; color:#374151; cursor:pointer; text-align:center; box-sizing:border-box; transition:border-color .2s,background .2s,color .2s; display:block; } .specs-toggle-btn:hover { border-color:var(--accent); background:var(--accent-light); color:var(--accent); } .order-btn-product { display:block; width:100% !important; height:50px !important; border:none; border-radius:14px; background:var(--accent); color:#fff; font-size:15px !important; font-weight:700 !important; cursor:pointer; margin-top:16px !important; text-align:center; text-decoration:none; transition:background .2s; } .order-btn-product:hover { background:var(--accent-dark); } .order-btn-cart { display:block; width:100% !important; height:46px !important; border:1.5px solid var(--accent); border-radius:14px; background:#fff; color:var(--accent); font-size:15px !important; font-weight:700 !important; cursor:pointer; margin-top:10px !important; text-align:center; transition:background .2s,color .2s; } .order-btn-cart:hover { background:var(--accent-light); } .product-availability { margin-top:10px; } .variant-box { margin-top:18px; padding:16px; border:1px solid #e5e7eb; border-radius:16px; background:#fbfdff; } .variant-box-title { font-size:16px; font-weight:800; color:#111827; margin-bottom:12px; } .variant-list { display:flex; flex-direction:column; gap:10px; } .variant-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1.5px solid #dbe4ff; border-radius:14px; background:#fff; text-decoration:none; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .variant-card:hover { border-color:#8aa4ff; box-shadow:0 8px 24px rgba(59,130,246,.12); transform:translateY(-1px); } .variant-card-current { border-color:#86efac; background:#f0fdf4; } .variant-main { min-width:0; flex:1; } .variant-name { font-size:16px; font-weight:800; color:#111827; line-height:1.25; } .variant-price-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:4px; } .variant-price { font-size:15px; font-weight:900; color:var(--accent); } .variant-old-price { font-size:13px; color:#9ca3af; text-decoration:line-through; } .variant-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; } .variant-stock { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; } .variant-stock.in-stock { background:#dcfce7; color:#15803d; } .variant-stock.preorder { background:#fef3c7; color:#b45309; } .variant-current-badge { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; background:var(--accent); color:#fff; font-size:12px; font-weight:800; } @media (max-width:768px) { .product-grid { grid-template-columns:1fr; } .product-page { padding:14px; } .main-image { height:320px; } .gallery-nav { width:36px; height:36px; font-size:24px; } .gallery-thumb { width:64px; height:64px; } .product-brand-name { font-size:24px; } .product-model-name { font-size:18px; } .thumbs-row { grid-template-columns:repeat(4,1fr); } .prod-info-card { padding:16px; } .variant-card { padding:12px 14px; align-items:flex-start; } .variant-name { font-size:15px; } } @media (max-width:480px) { .main-image { height:260px; } .gallery-thumbs-wrap { gap:6px; } .gallery-strip-nav { width:30px; height:30px; font-size:20px; } .gallery-thumb { width:56px; height:56px; } .product-brand-name { font-size:20px; } .product-model-name { font-size:16px; } .thumbs-row { grid-template-columns:repeat(3,1fr); } .catalog-page-btn { min-width:38px; height:38px; border-radius:10px; font-size:13px; } .variant-box { margin-top:14px; padding:12px; border-radius:14px; } .variant-box-title { font-size:15px; margin-bottom:10px; } .variant-list { gap:8px; } .variant-card { flex-direction:row; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; } .variant-main { min-width:0; } .variant-name { font-size:14px; line-height:1.2; } .variant-price-row { gap:6px; margin-top:3px; } .variant-price { font-size:14px; } .variant-old-price { font-size:12px; } .variant-side { width:auto; min-width:max-content; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:6px; } .variant-stock, .variant-current-badge { padding:5px 9px; font-size:11px; } } /* ============================================================ BREADCRUMB ============================================================ */ .breadcrumb { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:#9ca3af; margin-bottom:16px; } .breadcrumb a { color:#9ca3af; text-decoration:none; } .breadcrumb a:hover { color:#374151; } .breadcrumb-sep { color:#d1d5db; } .breadcrumb-current { color:#374151; font-weight:600; } /* ============================================================ FAVORITES & RECENTLY VIEWED ============================================================ */ /* Heart button on catalog cards */ .fav-btn { background:none; border:none; font-size:20px; cursor:pointer; padding:4px 6px; border-radius:8px; line-height:1; transition:transform .15s; flex-shrink:0; } .fav-btn:hover { transform:scale(1.25); } .fav-btn.active { color:#ef4444; } /* Fav button on product page */ .fav-btn-product { display:block; width:100%; height:44px; border:1.5px solid #d1d5db; border-radius:14px; background:#fff; color:#374151; font-size:14px; font-weight:600; cursor:pointer; margin-top:10px; transition:border-color .2s,color .2s; } .fav-btn-product:hover { border-color:var(--accent); color:var(--accent); } .fav-btn-product--active { border-color:#ef4444 !important; color:#ef4444 !important; } /* Recently viewed grid */ .rv-carousel-wrap { position: relative; } .rv-grid { display:flex; gap:14px; flex-wrap:wrap; } .rv-card { display:flex; flex-direction:column; align-items:center; width:120px; text-decoration:none; color:#374151; gap:5px; } .rv-card:hover .rv-name { color:var(--accent); } .rv-img { width:110px; height:80px; object-fit:cover; border-radius:10px; } .rv-no-img { width:110px; height:80px; border-radius:10px; background:#f3f4f6; display:flex; align-items:center; justify-content:center; font-size:28px; } .rv-name { font-size:12px; font-weight:500; text-align:center; line-height:1.3; max-width:116px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .rv-price { font-size:12px; font-weight:700; color:var(--accent); } .rv-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; border: 1px solid #d1d5db; background: rgba(255,255,255,.96); color: #111827; font-size: 22px; line-height: 1; box-shadow: 0 8px 24px rgba(0,0,0,.12); cursor: pointer; z-index: 3; } .rv-nav-prev { left: -8px; } .rv-nav-next { right: -8px; } @media (max-width:768px) { .rv-carousel-wrap { padding: 0 4px; } .rv-grid { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 6px; } .rv-grid::-webkit-scrollbar { display: none; } .rv-card { flex: 0 0 156px; width: 156px; align-items: flex-start; scroll-snap-align: start; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px; gap: 8px; } .rv-img, .rv-no-img { width: 100%; height: 104px; } .rv-name { max-width: 100%; text-align: left; font-size: 13px; } .rv-price { font-size: 13px; } .rv-nav { display: inline-flex; align-items: center; justify-content: center; } }