/* =========================== LUNARA fashion — Жіночий одяг Пудра · Графіт · Золото — елегантність і жіночність =========================== */ /* Шрифти Playfair Display + Nunito Sans тепер підключені в index.html (async, з preload) — тут @import прибрано, щоб не вантажити їх удруге. */ :root { /* ── Фони — кремово-тауповая гама (за скріном) ── */ --bg: #f7f3ee; --bg-2: #c9b8ac; --bg-3: #ecdfd3; --bg-card: #ffffff; --bg-dark: #221c26; /* ── Акценти — приглушений мов'яно-лавандовий ── */ --accent: #8a7480; --accent-dark: #6c5a64; --accent-light:#cbb9c4; --gold: #b6926a; /* ── Текст — майже чорний з теплим відтінком ── */ --text: #1e1720; --text-soft: #4a4048; --muted: #8b7f85; /* ── Межі ── */ --border: #ddd0c8; --border-soft: #efe6df; --frost: #b6926a; /* ── Топ-бар (лавандова смуга над хедером, як на скріні) ── */ --topbar-bg: #cdc3de; --topbar-text: #2c2433; /* ── Білий ── */ --white: #ffffff; /* ── Шрифти ── */ --font-display:'Playfair Display', Georgia, serif; --font-body: 'Nunito Sans', sans-serif; /* ── Форми ── */ --radius: 6px; --radius-lg: 14px; --radius-xl: 40px; /* ── Тіні ── */ --shadow: 0 2px 20px rgba(60,20,80,.08); --shadow-hover:0 14px 44px rgba(60,20,80,.18); /* ── Анімація ── */ --tr: .24s cubic-bezier(.4,0,.2,1); /* ── Промо-смуга над хедером (висота за замовчуванням, коригується JS) ── */ --topbar-h: 38px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; touch-action: manipulation; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; touch-action: manipulation; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } /* TYPOGRAPHY */ .section-label { font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.12; color: var(--text); margin-bottom: 2.5rem; } .section-title em { font-style: italic; color: var(--accent); } /* BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 2.4rem; border-radius: var(--radius-xl); font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border: none; transition: all var(--tr); white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--white); box-shadow: 0 4px 18px rgba(155,95,192,.28); } .btn-primary:hover:not(:disabled):not(.btn--oos) { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(155,95,192,.38); } .btn-ghost { background: transparent; color: var(--accent-dark); border: 1.5px solid var(--accent); } .btn-ghost:hover:not(:disabled):not(.btn--oos) { background: var(--accent); color: var(--white); } .btn-full { width: 100%; border-radius: var(--radius-xl); } /* "Швидке оформлення" та "Додати в кошик" — завжди в підсвіченому (заповненому) вигляді, як .btn-ghost виглядає під час наведення/натискання, а не лише при hover. Інші кнопки з .btn-ghost (напр. "Залишити відгук", "Продовжити покупки") це не зачіпає. */ .quick-order-toggle, .add-to-cart-btn { background: var(--accent); color: var(--white); border-color: var(--accent); } .quick-order-toggle:hover:not(:disabled):not(.btn--oos), .add-to-cart-btn:hover:not(:disabled):not(.btn--oos) { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); } /* PROMO TOPBAR — безкоштовна доставка від 1500 грн */ .promo-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 101; display: flex; align-items: center; justify-content: center; background: var(--topbar-bg); color: var(--topbar-text); text-align: center; padding: .55rem 2.4rem; font-size: .76rem; font-weight: 600; letter-spacing: .02em; line-height: 1.35; } .promo-topbar-text strong { font-weight: 800; } .promo-topbar-close { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--topbar-text); opacity: .6; cursor: pointer; font-size: .85rem; line-height: 1; padding: .4rem; transition: opacity var(--tr); } .promo-topbar-close:hover { opacity: 1; } .promo-topbar[hidden] { display: none; } @media (max-width: 480px) { .promo-topbar { font-size: .68rem; padding: .5rem 1.9rem; } } /* HEADER */ .site-header { position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 100; background: rgba(247,243,238,.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, top .2s ease; } .site-header.scrolled { border-bottom-color: var(--border-soft); box-shadow: 0 1px 24px rgba(30,20,20,.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; } /* Текстові пункти меню сховані візуально (як на скріні — лишились лише лого, кошик і бургер), але лишаються в DOM для роботи існуючого JS/навігації */ .header-nav-left, .header-nav-right { display: none; } .header-right-group { display: flex; align-items: center; gap: 1.5rem; } .header-nav-left a, .header-nav-right a { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color var(--tr); padding: .5rem 0; } .header-nav-left a:hover, .header-nav-right a:hover { color: var(--accent); } .logo-text { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; letter-spacing: .06em; white-space: nowrap; color: var(--text); } /* Дволінійний логотип "LUNARA / FASHION" з тонкою розділювальною лінією — як на скріні */ .logo-block { display: flex; flex-direction: column; align-items: center; gap: .02rem; } .logo-main { font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; letter-spacing: .14em; color: var(--text); white-space: nowrap; line-height: 1; } .logo-rule { width: 100%; height: 1px; background: var(--gold); opacity: .7; margin: .02rem 0; } .logo-sub { font-family: var(--font-body); font-size: .84rem; font-weight: 500; letter-spacing: .34em; color: var(--muted); white-space: nowrap; line-height: 1; margin-top: .15rem; } @media (max-width: 480px) { .logo-text { font-size: 1.1rem; letter-spacing: .04em; } .logo-main { font-size: 1.7rem; letter-spacing: .1em; } .logo-sub { font-size: .76rem; letter-spacing: .3em; } } /* HERO */ .hero { position: relative; background: var(--bg-2); overflow: hidden; padding-top: var(--topbar-h); } /* Фото дівчини — суцільний фон під усім hero (заголовок, іконки, кнопка) */ .hero-photo { position: relative; width: 100%; min-height: 640px; overflow: hidden; margin-top: 84px; /* висота фіксованого хедера */ background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%); display: flex; align-items: flex-end; animation: fadeUp .9s ease both; } .hero-photo > img, .hero-photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* Плавний перехід від фото (зверху) до кольору сторінки (знизу), щоб заголовок і фіч-іконки читались на будь-якому фото */ .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(247,243,238,0) 0%, rgba(247,243,238,.1) 34%, rgba(247,243,238,.72) 56%, rgba(247,243,238,.95) 72%, var(--bg-2) 100% ); } .hero-content { position: relative; z-index: 2; width: 100%; padding: 2.4rem 24px 2.6rem; } @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } .hero-tagline { margin-bottom: 1.1rem; } .hero-eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); } .hero-title { font-family: var(--font-display); font-size: clamp(2.1rem, 5.2vw, 3.8rem); font-weight: 500; line-height: 1.14; color: var(--text); max-width: 640px; margin-bottom: 1.8rem; border-left: none; padding-left: 0; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; } /* Кнопка в hero — прямокутна темна (майже чорна), як на скріні, замість стандартної фіолетової "пігулки" .btn-primary */ .hero-cta .btn-primary { background: var(--bg-dark); color: var(--white); border-radius: 4px; padding: 1.05rem 2.2rem; box-shadow: none; } .hero-cta .btn-primary:hover:not(:disabled) { background: #000; box-shadow: 0 10px 28px rgba(0,0,0,.28); } /* Рядок з 4 фіч-іконками (власне виробництво / розміри / нові колекції / доставка) */ .hero-features { display: grid; grid-template-columns: repeat(4, auto); gap: 1.8rem; margin-bottom: 0; } .hero-feature { display: flex; flex-direction: column; gap: .6rem; } .hero-feature-icon { color: var(--accent); width: 26px; height: 26px; } .hero-feature-icon svg { width: 100%; height: 100%; } .hero-feature-label { font-size: .78rem; color: var(--text-soft); line-height: 1.4; } @media (max-width: 640px) { .hero-features { grid-template-columns: repeat(2, auto); gap: 1.4rem 1.2rem; } } @media (min-width: 900px) { .hero-photo { min-height: 780px; } .hero-content { padding: 5rem 24px 3.5rem; } } /* WHY US */ .why-us { padding: 7rem 0; background: var(--white); } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .why-card { padding: 2rem 1.5rem; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); transition: all var(--tr); position: relative; overflow: hidden; } .why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform var(--tr); } .why-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: var(--gold); } .why-card:hover::before { transform: scaleX(1); } .why-icon { font-size: 1.5rem; color: var(--accent); margin-bottom: 1rem; } .why-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; margin-bottom: .5rem; } .why-card p { font-size: .86rem; color: var(--muted); line-height: 1.7; } /* CATALOG */ .catalog { padding: 2.5rem 0 7rem; background: var(--bg); scroll-margin-top: calc(66px + var(--topbar-h)); } .catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } /* PRODUCT CARD */ .product-card { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all var(--tr); position: relative; border: 1px solid var(--border-soft); animation: cardReveal .5s ease both; } @keyframes cardReveal { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } .product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-5px); border-color: var(--gold); } .product-img-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--bg-3); } .product-img-wrap img { width:100%; height:100%; object-fit:cover; transition: transform .55s ease; } .product-card:hover .product-img-wrap img { transform: scale(1.04); } .card-badges { position: absolute; top: .75rem; left: .75rem; display: flex; flex-direction: column; gap: .3rem; z-index: 2; } .card-badge { display: inline-block; padding: .22rem .65rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius); } .card-badge--hit { background: var(--accent); color: var(--white); } .card-badge--new { background: var(--accent-dark); color: var(--white); } .card-badge--sale { background: var(--gold); color: var(--white); } .product-card-info { padding: 1rem 1.15rem 1.15rem; } .product-card-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; margin-bottom: .25rem; color: var(--text); } .product-card-benefit { font-size: .8rem; color: var(--text-soft); font-family: var(--font-body); margin-bottom: .5rem; line-height: 1.3; } .product-card-urgency { display: inline-block; font-size: .72rem; font-weight: 600; color: #b9402a; background: #fdeeea; padding: .2rem .55rem; border-radius: 4px; margin-bottom: .7rem; letter-spacing: .02em; } /* Кольори та розміри на картці каталогу */ .product-card-colors { display: flex; gap: .35rem; margin-bottom: .5rem; } .product-card-color-dot { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--border); background: linear-gradient(to bottom, var(--swatch-color-top, var(--swatch-color, var(--bg-3))) 50%, var(--swatch-color-bottom, var(--swatch-color, var(--bg-3))) 50%); padding: 0; cursor: pointer; transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr); } .product-card-color-dot:hover { transform: scale(1.12); } .product-card-color-dot.active { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--bg-card), 0 0 0 3px var(--accent); } .product-card-sizes { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .5rem; } .product-card-size { font-size: .64rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 4px; padding: .12rem .4rem; } .product-card-size--oos { opacity: .5; text-decoration: line-through; } .product-card-price-row { display: flex; align-items: center; gap: .5rem; justify-content: space-between; margin-top: .2rem; } .product-card-price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--accent); } .product-card-price-old { font-size: .8rem; color: var(--muted); text-decoration: line-through; } .card-buy-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .95rem; transition: all var(--tr); flex-shrink: 0; } .card-buy-btn:hover { background: var(--accent-dark); transform: scale(1.1); } /* REVIEWS */ .reviews { padding: 7rem 0; background: var(--white); scroll-margin-top: calc(66px + var(--topbar-h)); } .site-reviews-hint { font-size: .78rem; color: var(--muted); text-align: center; margin: -.75rem 0 1.75rem; } .site-reviews-grid { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: .25rem .1rem 1rem; scrollbar-width: thin; } .site-review-card { flex: 0 0 340px; scroll-snap-align: start; padding: 2rem; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); transition: all var(--tr); background: var(--bg-card); display: flex; flex-direction: column; gap: 1rem; } .site-review-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--gold); } .site-review-product-link { display: flex; align-items: center; gap: .65rem; text-decoration: none; padding-bottom: .85rem; border-bottom: 1px dashed var(--border-soft); } .site-review-product-link img { width: 46px; height: 46px; object-fit: cover; border-radius: calc(var(--radius) - 1px); background: var(--bg-2); flex-shrink: 0; border: 1px solid var(--border-soft); } .site-review-product-name { font-size: .8rem; font-weight: 600; color: var(--accent); line-height: 1.35; transition: color var(--tr); } .site-review-product-link:hover .site-review-product-name { color: var(--accent-dark); } .review-header { display: flex; align-items: center; gap: .75rem; } .review-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1rem; color: var(--accent); flex-shrink: 0; border: 1px solid var(--border-soft); } .review-name { font-weight: 600; font-size: .9rem; } .review-date { font-size: .75rem; color: var(--muted); } .review-stars { margin-left: auto; color: var(--gold); font-size: .9rem; } .review-text { font-size: .87rem; color: var(--text-soft); line-height: 1.72; } .site-reviews-empty, .site-reviews-loading { font-size: .87rem; color: var(--muted); text-align: center; padding: 1.5rem 0; } @media (max-width: 640px) { .site-review-card { flex-basis: 84%; padding: 1.5rem; } } /* РЕКОМЕНДУЄМІ ТОВАРИ — товари, задані вручну по id (див. FEATURED_PRODUCT_IDS в index.html) */ .featured-products { padding: .75rem 0 2rem; background: var(--bg); } #featured-products-title { margin-bottom: .25rem; } @media (min-width: 641px) { #featured-products-title { font-size: 2rem; } } .featured-products-hint { font-size: .78rem; color: var(--muted); text-align: center; margin: -.5rem 0 1.1rem; } .featured-products-grid { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: .25rem .1rem 1rem; scrollbar-width: auto; scrollbar-color: var(--accent-light) var(--border-soft); justify-content: safe center; } .featured-products-grid::-webkit-scrollbar { height: 10px; } .featured-products-grid::-webkit-scrollbar-track { background: var(--border-soft); border-radius: 10px; } .featured-products-grid::-webkit-scrollbar-thumb { background: var(--accent-light); border-radius: 10px; } .featured-products-grid::-webkit-scrollbar-thumb:hover { background: var(--accent); } .featured-product-card { flex: 0 0 240px; scroll-snap-align: start; cursor: pointer; border: none; background: none; padding: 0; text-align: left; } .featured-product-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-3); box-shadow: var(--shadow); transition: box-shadow var(--tr), transform var(--tr); } .featured-product-card:hover .featured-product-photo { box-shadow: var(--shadow-hover); transform: translateY(-4px); } .featured-product-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .featured-product-card:hover .featured-product-photo img { transform: scale(1.06); } .featured-product-price { display: inline-block; margin-top: .7rem; font-family: var(--font-body); font-size: .92rem; font-weight: 700; color: var(--text); } .featured-product-name { display: block; margin-top: .3rem; font-family: var(--font-body); font-size: .82rem; font-weight: 400; color: var(--text-soft); line-height: 1.35; } .featured-products-empty { font-size: .87rem; color: var(--muted); text-align: center; padding: 1.5rem 0; } @media (max-width: 640px) { .featured-product-card { flex-basis: 46%; } } @media (min-width: 641px) { .featured-product-card { flex: 1 0 180px; max-width: 240px; } .featured-product-photo { aspect-ratio: 3 / 1.85; } .featured-product-price { margin-top: .35rem; } .featured-product-name { margin-top: .15rem; } .featured-products-hint { display: none; } } /* ПОШУК ТОВАРІВ — під заголовком каталогу (та сама позиція на головній і в категорії) */ .catalog-search-block { margin: 1.5rem 0 2rem; max-width: 480px; } .catalog-search-label { font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: .5rem; display: block; } .catalog-search-input-wrap { position: relative; } .catalog-search-input { width: 100%; padding: .85rem 2.75rem .85rem 1.1rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--white); outline: none; transition: border-color var(--tr); } .catalog-search-input:focus { border-color: var(--accent); } .catalog-search-input::placeholder { color: var(--muted); } /* Ховаємо нативну кнопку очищення — у деяких мобільних браузерах вона рендериться криво (тонкою смужкою) поверх нашого поля разом з кастомними стилями; замість неї показуємо свою кнопку .catalog-search-clear нижче */ .catalog-search-input::-webkit-search-cancel-button, .catalog-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .catalog-search-clear { position: absolute; top: 0; right: 0; bottom: 0; width: 2.75rem; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--muted); font-size: 1.1rem; line-height: 1; -webkit-tap-highlight-color: transparent; } .catalog-search-clear:hover, .catalog-search-clear:active { color: var(--accent); } .catalog-search-clear[hidden] { display: none; } .filter-results { margin: 0 0 2rem; } .filter-results[hidden] { display: none; } .filter-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .filter-results-count { font-size: .82rem; color: var(--muted); } .filter-back-btn { padding: .55rem .95rem; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--white); color: var(--text-soft); font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color var(--tr), color var(--tr); -webkit-tap-highlight-color: transparent; } .filter-back-btn:hover { border-color: var(--accent); color: var(--accent); } .filter-empty { margin: 0 0 2rem; font-size: .9rem; color: var(--muted); padding: 1.5rem 0; text-align: center; } .filter-empty[hidden] { display: none; } .filter-empty p { margin: 0 0 1rem; } .filter-empty .filter-back-btn { margin: 0 auto; } /* INSTAGRAM */ .insta-strip { padding: 5rem 0 0; background: var(--bg); } .insta-header { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; max-width: 1240px; margin: 0 auto 1.5rem; font-size: .85rem; font-weight: 500; color: var(--text-soft); } .insta-link { color: var(--accent); transition: color var(--tr); } .insta-link:hover { color: var(--accent-dark); } .insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); } .insta-img { aspect-ratio: 1; transition: opacity .3s; } .insta-img:hover { opacity: .82; cursor: pointer; } /* FOOTER */ .site-footer { background: var(--bg-dark); color: rgba(232,218,242,.65); padding: 5rem 0 2rem; } .footer-top { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(180,140,220,.2); margin-bottom: 2rem; } .footer-brand .logo-text { color: var(--white); margin-bottom: .75rem; } .footer-brand p { font-size: .85rem; line-height: 1.7; max-width: 260px; margin-bottom: 1.5rem; } .footer-socials { display: flex; gap: 1rem; } .footer-socials a { color: rgba(232,218,242,.35); transition: color var(--tr); } .footer-socials a:hover { color: var(--gold); } .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .footer-col { display: flex; flex-direction: column; gap: .6rem; } .footer-col-title { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; } .footer-col a { font-size: .85rem; transition: color var(--tr); } .footer-col a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; font-size: .78rem; opacity: .35; } /* MODAL */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(30,15,40,.52); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: overlayIn .2s ease; overflow-y: auto; } .modal-overlay[hidden] { display: none; } @keyframes overlayIn { from{opacity:0} to{opacity:1} } .modal { background: var(--bg-card); border-radius: var(--radius-lg); max-width: 900px; width: 100%; position: relative; animation: modalIn .3s cubic-bezier(.4,0,.2,1) both; max-height: 95vh; overflow-y: auto; overflow-x: hidden; margin: auto; } @keyframes modalIn { from{opacity:0;transform:translateY(18px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} } .modal--narrow { max-width: 480px; padding: 2.5rem; } .modal-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--text-soft); z-index: 10; transition: all var(--tr); } .modal-close:hover { background: var(--accent); color: var(--white); border-color: var(--accent); } .modal-home-btn { position: absolute; top: 1rem; left: 1rem; height: 36px; padding: 0 1rem; border: none; background: var(--accent); box-shadow: 0 4px 18px rgba(155,95,192,.28); border-radius: var(--radius-xl); cursor: pointer; display: flex; align-items: center; font-size: .8rem; color: var(--white); z-index: 10; transition: all var(--tr); font-family: var(--font-body); gap: .3rem; white-space: nowrap; } .modal-home-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(155,95,192,.38); } .modal-inner { display: grid; grid-template-columns: 1fr 1fr; } /* На ПК (>768px) модалка товару двоколонкова (фото | інфо), і блок "Переглянуті товари" тепер лежить окремим елементом .modal-inner (не всередині .modal-info), щоб розтягуватись на всю ширину картки — під фото й інфо-колонкою, де є вільне місце. На мобільних .modal-inner однококлонковий, тож тут нічого не міняємо — блок і так на всю ширину. */ @media (min-width: 769px) { .modal-inner > #pairs-with-block { grid-column: 1 / -1; } } .modal-gallery { position: relative; min-width: 0; } .gallery-main { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--bg-3); position: relative; } .gallery-main img { width:100%; height:100%; object-fit:cover; cursor: zoom-in; } .gallery-zoom-hint { position: absolute; bottom: .6rem; right: .6rem; width: 34px; height: 34px; border-radius: 50%; background: rgba(25,15,32,.55); color: var(--white); display: flex; align-items: center; justify-content: center; pointer-events: none; backdrop-filter: blur(2px); } .gallery-zoom-hint svg { width: 16px; height: 16px; } /* =========================== PHOTO ZOOM LIGHTBOX =========================== */ .zoom-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(20,10,25,.94); display: flex; align-items: center; justify-content: center; overflow: auto; cursor: zoom-out; touch-action: manipulation; } .zoom-overlay[hidden] { display: none; } .zoom-overlay-img { max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: zoom-in; transition: transform .25s ease; touch-action: manipulation; user-select: none; -webkit-user-drag: none; transform: scale(1); will-change: transform; } .zoom-overlay-img.is-zoomed { cursor: zoom-out; transform: scale(2.2); } .zoom-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 4px 18px rgba(155,95,192,.28); transition: all var(--tr); } .zoom-close:hover { background: var(--accent-dark); } @media (max-width: 640px) { .zoom-overlay-img.is-zoomed { transform: scale(2.6); } } .gallery-thumbs { display: flex; gap: .4rem; padding: .75rem; flex-wrap: wrap; justify-content: center; background: var(--bg-3); } .gallery-thumb { width: 56px; height: 56px; border-radius: var(--radius); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color var(--tr); flex-shrink: 0; background: var(--bg-2); } .gallery-thumb img { width:100%; height:100%; object-fit:cover; } .gallery-thumb.active { border-color: var(--accent); } .modal-info { padding: 2rem; display: flex; flex-direction: column; gap: 0; overflow-y: auto; min-width: 0; } .modal-badge { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .22rem .7rem; border-radius: var(--radius); margin-bottom: .5rem; background: var(--accent); color: var(--white); width: fit-content; } .modal-badge:empty { display: none; } .modal-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; color: var(--text); margin-bottom: .25rem; } .modal-category { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; } .modal-price-block { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; } .modal-price { font-family: var(--font-display); font-size: 2rem; font-weight: 500; color: var(--accent); transition: all var(--tr); } .modal-price-old { font-size: 1rem; color: var(--muted); text-decoration: line-through; } .modal-desc { font-size: .87rem; color: var(--text-soft); line-height: 1.72; margin-bottom: 1.25rem; } .modal-field { margin-bottom: 1rem; } .field-label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .5rem; display: flex; align-items: center; justify-content: space-between; } /* Specs table */ .specs-table { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: .25rem .75rem; margin-bottom: .5rem; } .spec-row { display: contents; } .spec-label { font-size: .76rem; color: var(--muted); font-weight: 400; padding: .42rem 0; border-bottom: 1px solid var(--border-soft); min-width: 0; overflow-wrap: break-word; word-break: break-word; } .spec-value { font-size: .76rem; color: var(--text); font-weight: 600; padding: .42rem 0; border-bottom: 1px solid var(--border-soft); min-width: 0; overflow-wrap: break-word; word-break: break-word; } .spec-row:last-child .spec-label, .spec-row:last-child .spec-value { border-bottom: none; } .size-buttons { display: flex; gap: .4rem; flex-wrap: wrap; } .size-btn { min-width: 52px; padding: .5rem .75rem; border: 1.5px solid var(--border); background: transparent; border-radius: var(--radius); font-family: var(--font-body); font-size: .82rem; font-weight: 500; cursor: pointer; transition: all var(--tr); color: var(--text); } .size-btn:hover { border-color: var(--accent); } .size-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); } .size-btn:disabled, .size-btn.size-btn--oos { opacity: .55; cursor: default; text-decoration: line-through; } .size-btn:disabled:hover { border-color: var(--border); } .btn:disabled, .btn.btn--oos { opacity: .5; cursor: not-allowed; } /* Color swatches (варіанти кольору товару) */ .color-buttons { display: flex; gap: .5rem; flex-wrap: wrap; } .color-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; padding: 2px; cursor: pointer; transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr); } .color-btn .color-swatch { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(to bottom, var(--swatch-color-top, var(--swatch-color, var(--bg-3))) 50%, var(--swatch-color-bottom, var(--swatch-color, var(--bg-3))) 50%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .color-btn:hover { transform: scale(1.08); border-color: var(--accent-light); } .color-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--accent); } #modal-color-selected { color: var(--text); font-weight: 600; text-transform: none; letter-spacing: 0; } /* Міні-картка (фото товару в обраному кольорі) поруч зі свотчами — над розміром */ .modal-color-row { display: flex; align-items: center; gap: .75rem; } .modal-color-preview { width: 46px; height: 46px; border-radius: calc(var(--radius) - 2px); object-fit: cover; border: 1.5px solid var(--border); background: var(--border); flex-shrink: 0; } /* Дублікат кружечків кольору над назвою товару — тільки мобільна версія, щоб не гортати картку вниз для перегляду кольорів. Синхронізований з основним вибором кольору (над розміром) через спільну функцію selectColor(). */ .modal-colors-mobile { display: none; } @media (max-width: 768px) { .modal-colors-mobile:not(:empty) { display: flex; margin-bottom: .6rem; } } /* Характеристики (згорнутий блок, як розмірна сітка) */ .specs-details summary { cursor: pointer; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .5rem; list-style: revert; } .specs-details summary:hover { color: var(--accent); } .specs-details .specs-table { margin-top: .4rem; margin-bottom: 0; } /* Size chart (розмірна сітка + параметри фотомоделі) */ .sizechart-details summary { cursor: pointer; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .5rem; list-style: revert; } .sizechart-details summary:hover { color: var(--accent); } .sizechart-table { margin-top: .4rem; } /* Кількість колонок задається модифікатором (1 колонка "Розмір" + по одній на кожен замір — грудей/талія/стегна): звужуємо колонку розміру, решту ділимо порівну. */ .sizechart-table.sizechart-table--cols-4 { grid-template-columns: .7fr 1fr 1fr 1fr; } .sizechart-table.sizechart-table--cols-2 { grid-template-columns: 1fr 1fr; } .sizechart-header { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft) !important; text-align: center; } .sizechart-header small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; } .sizechart-table--cols-4 .spec-label, .sizechart-table--cols-4 .spec-value { text-align: center; } .sizechart-header-row .spec-label, .sizechart-header-row .spec-value { padding-top: .5rem; } .sizechart-model { font-size: .74rem; color: var(--muted); line-height: 1.5; margin-top: .65rem; } @media (max-width: 480px) { .sizechart-table.sizechart-table--cols-4 { grid-template-columns: .6fr 1fr 1fr 1fr; gap: 0 .4rem; } .sizechart-table--cols-4 .spec-label, .sizechart-table--cols-4 .spec-value { font-size: .66rem; padding: .38rem 0; } .sizechart-header { font-size: .58rem; } } .order-form { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; } .form-group { display: flex; flex-direction: column; gap: .3rem; } .form-group label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); } /* font-size було .9rem (14.4px) — на iOS Safari будь-яке поле вводу з розміром шрифту менше 16px при фокусі автоматично збільшує масштаб сторінки (щоб текст був "читабельним"), і сам не скидає його назад. Через це після заповнення імені/телефону (тут або в checkout-формі) і закриття сторінки подяки картка товару, яка лишалась відкритою під низом, здавалась "трохи збільшеною" — насправді збільшена була вся сторінка на рівні браузера. 16px (1rem) — поріг, нижче якого iOS Safari зум не запускає взагалі, тож проблема усунена в джерелі. */ .form-group input { padding: .7rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--white); transition: border-color var(--tr); outline: none; } .form-group input:focus { border-color: var(--accent); } .form-group input.error { border-color: #c04878; } .form-group input.valid { border-color: #5a9a6a; } .phone-error { font-size: .75rem; color: #c04878; margin-top: .2rem; } .form-note { font-size: .74rem; color: var(--muted); text-align: center; margin-top: .6rem; line-height: 1.5; } /* Швидке оформлення — згорнута кнопка (details/summary), як розмірна сітка */ .quick-order-details { margin: .1rem 0 1.15rem; } .quick-order-toggle { list-style: none; cursor: pointer; } .quick-order-toggle::-webkit-details-marker { display: none; } .quick-order-toggle::marker { content: ''; } .quick-order-body { margin-top: .9rem; } .quick-order-note { font-size: .82rem; color: var(--text-soft); text-align: center; margin-bottom: .9rem; line-height: 1.45; } .quick-order-body .order-form { margin-top: 0; padding-top: 0; border-top: none; } /* Залишити відгук — та сама згорнута кнопка (details/summary) під "Додати в кошик" */ .review-form-details { margin: .6rem 0 1.15rem; } .review-form-toggle { list-style: none; cursor: pointer; } .review-form-toggle::-webkit-details-marker { display: none; } .review-form-toggle::marker { content: ''; } .review-form-body { margin-top: .9rem; } .review-form .form-group { margin-bottom: .85rem; } .review-form textarea { padding: .7rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--white); outline: none; resize: vertical; transition: border-color var(--tr); } .review-form textarea:focus { border-color: var(--accent); } .review-form-msg { font-size: .82rem; text-align: center; margin-top: .8rem; line-height: 1.5; } .review-form-msg.success { color: #5a9a6a; } .review-form-msg.error { color: #c04878; } /* Зірочки рейтингу — клікабельні, hover підсвічує до наведеної зірки */ .star-rating { display: flex; gap: .35rem; } .star-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--border); transition: color .15s, transform .1s; } .star-btn:hover { transform: scale(1.12); } .star-btn.active { color: var(--gold); } /* Відгуки про товар — гортаються так само, як "Переглянуті товари" */ .product-reviews-block { margin: .25rem 0 1.1rem; } .product-reviews-block[hidden] { display: none; } .product-reviews-grid { margin-top: .6rem; display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .35rem; scrollbar-width: thin; } .product-review-card { flex: 0 0 88%; scroll-snap-align: start; display: flex; flex-direction: column; gap: .5rem; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; } @media (min-width: 640px) { .product-review-card { flex-basis: 68%; } } .product-review-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .product-review-card-name { font-weight: 600; font-size: .92rem; color: var(--text); } .product-review-card-date { font-size: .74rem; color: var(--muted); flex-shrink: 0; } .product-review-card-stars { color: var(--gold); font-size: .9rem; letter-spacing: .12em; } .product-review-card-text { font-size: .88rem; color: var(--text-soft); line-height: 1.55; } .product-reviews-loading, .product-reviews-empty { font-size: .82rem; color: var(--muted); text-align: center; padding: .4rem 0; } /* ФОТО У ВІДГУКАХ — прикріплене фото користувача під текстом відгуку */ .review-photo-thumb { display: block; margin-top: .6rem; width: 100%; max-width: 220px; max-height: 220px; object-fit: cover; border-radius: var(--radius); border: 1.5px solid var(--border); cursor: zoom-in; } /* Поле вибору фото у формах відгуку (картка товару / сторінка подяки) */ .review-photo-input-wrap { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; } .review-photo-input-wrap input[type="file"] { font-size: .8rem; max-width: 100%; } .review-photo-preview { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); border: 1.5px solid var(--border); } .review-photo-remove { border: none; background: transparent; color: var(--muted); font-size: .78rem; cursor: pointer; padding: 0; text-decoration: underline; } .review-photo-remove:hover { color: #c04878; } /* ЛАЙТБОКС — збільшення фото відгуку по кліку */ .photo-lightbox-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(20,10,28,.88); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; cursor: zoom-out; animation: modalIn .2s ease both; } .photo-lightbox-overlay[hidden] { display: none; } .photo-lightbox-img { max-width: 100%; max-height: 100%; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: default; } .photo-lightbox-close { position: absolute; top: 1.1rem; right: 1.1rem; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .photo-lightbox-close:hover { background: rgba(255,255,255,.28); } /* QUANTITY STEPPER (картка товару) */ .qty-stepper { display: flex; align-items: stretch; width: fit-content; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; } .qty-btn { width: 40px; border: none; background: transparent; color: var(--text); font-size: 1.15rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; display: flex; align-items: center; justify-content: center; } .qty-btn:hover:not(:disabled) { background: var(--accent); color: var(--white); } .qty-btn:disabled { color: var(--muted); cursor: default; opacity: .5; } #field-qty { width: 46px; text-align: center; border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--text); background: var(--white); padding: .5rem 0; } .modal-total-row { font-size: .82rem; color: var(--muted); margin-top: .55rem; } .modal-total-row strong { color: var(--accent); font-size: .95rem; } /* STICKY BUY */ .sticky-buy { position: fixed; bottom: 0; left: 0; right: 0; z-index: 150; padding: .75rem 1rem; background: rgba(248,242,252,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--border-soft); box-shadow: 0 -4px 20px rgba(60,20,80,.1); } .sticky-buy[hidden] { display: none; } /* THANK YOU */ /* Раніше .thankyou-overlay не мав overflow-y:auto (на відміну від .modal-overlay вище, де це вже є) — коли контент .thankyou-box (особливо з блоком upsell) не влазив у видиму область на мобільному, WebKit-браузери "губили" верхню частину картки при flex-центруванні (align-items:center) без можливості доскролити: сама картка мала свій overflow-y:auto, але через відсутність скролу на батьківському fixed-оверлеї частина контенту фізично виявлялась за межами екрана й недосяжною (звідси й враження "розтягнуто, не гортається, допомагає лише зменшення зуму" — при зменшеному масштабі контент просто переставав виходити за межі екрана). Виправлено за тим самим робочим патерном, що вже використовується в .modal-overlay/.modal нижче. */ .thankyou-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(30,15,40,.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .thankyou-overlay[hidden] { display: none; } .thankyou-box { background: var(--bg-card); border-radius: var(--radius-lg); padding: 3.5rem 3rem; max-width: 480px; width: 100%; text-align: center; animation: modalIn .4s ease both; margin: auto; } .thankyou-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(155,95,192,.1); border: 2px solid var(--accent); color: var(--accent); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .thankyou-box h2 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; margin-bottom: .75rem; } .thankyou-box p { font-size: .9rem; color: var(--muted); line-height: 1.7; margin-bottom: 2rem; } .thankyou-actions { display: flex; flex-direction: column; gap: .75rem; } /* Залишити відгук на сторінці подяки — під блоком допродажу, над кнопкою "Повернутись" */ .thankyou-review-block { margin: 0 0 1.75rem; text-align: left; } .thankyou-review-block[hidden] { display: none; } .thankyou-review-title { font-weight: 700; font-size: .95rem; text-align: center; margin-bottom: 1rem; color: var(--text); } .thankyou-review-item { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: .85rem; text-align: left; } .thankyou-review-item-name { font-size: .9rem; font-weight: 600; margin-bottom: .65rem; color: var(--text); } .thankyou-review-item .star-rating { margin-bottom: .65rem; justify-content: center; } .thankyou-review-item textarea { width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--white); resize: vertical; outline: none; margin-bottom: .65rem; transition: border-color var(--tr); } .thankyou-review-item textarea:focus { border-color: var(--accent); } .thankyou-review-submit { width: 100%; padding: .65rem; border-radius: var(--radius); border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .18s, color .18s; } .thankyou-review-submit:hover { background: var(--accent); color: var(--white); } .thankyou-review-submit:disabled { opacity: .6; cursor: default; } .thankyou-review-item-msg { font-size: .78rem; margin-top: .55rem; text-align: center; } .thankyou-review-item-msg.success { color: #5a9a6a; } .thankyou-review-item-msg.error { color: #c04878; } .thankyou-review-item.submitted textarea, .thankyou-review-item.submitted .thankyou-review-submit { display: none; } /* REVEAL */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* RESPONSIVE */ @media (max-width: 1024px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 768px) { .header-nav-left, .header-nav-right { display: none; } .header-inner { justify-content: space-between; } .header-right-group { gap: .25rem; } /* Хедер (лого, кошик, меню) лишається видимим поверх картки товару (модалки), щоб з картки товару можна було відкрити кошик або меню, не закриваючи її. */ .site-header { z-index: 250; } .modal-overlay { padding-top: calc(66px + var(--topbar-h) + .75rem); } .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } .why-grid { grid-template-columns: 1fr; gap: 1rem; } .insta-grid { grid-template-columns: repeat(3, 1fr); } .modal-inner { grid-template-columns: 1fr; } .gallery-main { border-radius: var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio: 1/1; } .modal-info { padding: 1.5rem; } .pairs-with-block { padding: 0 .85rem; } /* На мобільних під час відкритої картки товару знизу екрана з'являється фіксована панель .sticky-buy ("Замовити — ціна"), яка перекриває собою останній видимий контент картки (кнопку "Додати в кошик" в останній картці "Переглянутих товарів" тощо). Резервуємо під неї місце знизу скрольованої області картки, щоб усе гортало вище і нічого не ховалось. */ .modal { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .form-row { grid-template-columns: 1fr; } .footer-links { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; } .sticky-buy { display: flex; } .size-btn { min-width: 56px; padding: .65rem .85rem; font-size: .88rem; } } @media (max-width: 480px) { .catalog-grid { gap: .5rem; } .product-card-info { padding: .75rem .85rem .85rem; } .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: auto; max-height: calc(92vh - 66px - var(--topbar-h)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-overlay { align-items: flex-end; padding: calc(66px + var(--topbar-h) + .5rem) 0 0; overflow: hidden; } } /* =========================== SUBITEMS SWITCHER =========================== */ .subitem-tabs { display: flex; gap: .4rem; flex-wrap: wrap; } .subitem-tabs[hidden] { display: none; } #modal-subitems-wrap { margin-bottom: .75rem; } .subitem-btn { padding: .45rem 1rem; border: 1.5px solid var(--border); background: transparent; border-radius: var(--radius-xl); font-family: var(--font-body); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all var(--tr); color: var(--text-soft); letter-spacing: .04em; white-space: nowrap; } .subitem-btn:hover { border-color: var(--accent); color: var(--accent); } .subitem-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); } /* =========================== LEGAL MODALS =========================== */ .modal--legal { max-width: 680px; padding: 0; overflow: hidden; } .legal-modal-inner { display: flex; flex-direction: column; max-height: 90vh; } .legal-modal-header { display: flex; align-items: center; gap: 1rem; padding: 2.5rem 2.5rem 1.5rem; border-bottom: 1px solid var(--border-soft); background: var(--bg-2); flex-shrink: 0; } .legal-modal-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .legal-label { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .2rem; } .legal-modal-header .modal-title { font-size: 1.35rem; margin-bottom: 0; } .legal-modal-body { padding: 2rem 2.5rem 2.5rem; overflow-y: auto; flex: 1; font-size: .9rem; line-height: 1.8; color: var(--text-soft); } .legal-modal-body h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--text); margin: 1.75rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border-soft); } .legal-modal-body h3:first-child { margin-top: 0; } .legal-modal-body p { margin-bottom: .75rem; } .legal-modal-body ul { margin: .5rem 0 .75rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; } .legal-modal-body li { color: var(--text-soft); } .legal-modal-body strong { color: var(--text); font-weight: 600; } .legal-date { margin-top: 2rem; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--border-soft); padding-top: 1rem; } .legal-contacts { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; } .legal-contacts a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border: 1.5px solid var(--accent); border-radius: var(--radius-xl); font-size: .8rem; font-weight: 600; color: var(--accent); transition: all var(--tr); text-decoration: none; } .legal-contacts a:hover { background: var(--accent); color: var(--white); } @media (max-width: 600px) { .legal-modal-header { padding: 1.5rem 1.25rem 1.25rem; gap: .75rem; } .legal-modal-body { padding: 1.5rem 1.25rem; } .subitem-btn { font-size: .74rem; padding: .4rem .85rem; } } /* =========================== UPSELL BLOCK (thank you modal) =========================== */ /* max-height у "vh" на мобільних браузерах рахується не завжди від РЕАЛЬНО видимої області (деякі браузери беруть висоту з прихованою панеллю адреси), тому картка могла виявитись "вищою", ніж фактично видно на екрані. "dvh" (динамічний viewport height) враховує це коректно; рядок з dvh іде другим, тож старіші браузери, які його не підтримують, просто ігнорують і лишаються на vh-значенні вище. */ .thankyou-box { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; max-height: 90vh; max-height: 90dvh; } @media (max-width: 640px) { .thankyou-box { padding: 2.25rem 1.25rem; } } .upsell-block { margin: 1.5rem 0 1.5rem; text-align: left; } .upsell-title { font-size: .85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; text-align: center; } .upsell-shipping-note { font-size: .8rem; color: var(--text-soft); text-align: center; margin-bottom: 1rem; line-height: 1.4; } .upsell-shipping-note strong { color: var(--accent); font-weight: 700; } .upsell-shipping-note:empty { display: none; } .upsell-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } /* На вузьких екранах картки йдуть одна під одною на всю ширину — так розмірам вистачає місця і нічого не "стискається" вбік, картки лише додаються вниз при скролі */ @media (max-width: 640px) { .upsell-grid { grid-template-columns: 1fr; gap: .6rem; } } .upsell-card { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: .75rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; transition: border-color .2s, box-shadow .2s; position: relative; } .upsell-card.added { border-color: var(--accent); background: rgba(155,95,192,.06); } .upsell-card > *:not(.upsell-card-badge) { width: 100%; } .upsell-card-badge { position: absolute; top: .5rem; right: .5rem; font-size: .65rem; font-weight: 700; background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 6px; line-height: 1.6; } .upsell-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: var(--border); } .upsell-card-name { font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.3; } .upsell-card-desc { font-size: .72rem; color: var(--muted); line-height: 1.4; } .upsell-card-price { font-size: .95rem; font-weight: 700; color: var(--accent); } .upsell-colors.color-buttons { justify-content: center; gap: .4rem; } .upsell-colors .color-btn { width: 26px; height: 26px; } .upsell-add-btn { margin-top: auto; padding: .45rem .6rem; border-radius: var(--radius-sm, 6px); border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .18s, color .18s; width: 100%; } .upsell-add-btn:hover:not(:disabled) { background: var(--accent); color: #fff; } .upsell-add-btn:disabled { background: var(--accent); color: #fff; border-color: var(--accent); cursor: default; opacity: .85; } .upsell-added-msg { display: none; font-size: .75rem; color: var(--accent); font-weight: 600; text-align: center; margin-top: .25rem; } .upsell-card.added .upsell-added-msg { display: block; } .upsell-card-price-row { display: flex; align-items: baseline; justify-content: center; gap: .4rem; flex-wrap: wrap; } /* UPSELL QTY STEPPER */ .upsell-qty-row { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .1rem; } .upsell-qty-btn { width: 26px; height: 26px; border: 1.5px solid var(--border); background: var(--white); border-radius: 5px; font-size: .85rem; font-weight: 700; cursor: pointer; color: var(--text); display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; } .upsell-qty-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .upsell-qty-btn:disabled { opacity: .4; cursor: default; } .upsell-qty-val { min-width: 20px; text-align: center; font-size: .82rem; font-weight: 700; color: var(--text); } /* =========================== ПЕРЕГЛЯНУТІ ТОВАРИ (recently viewed — product modal, pre-purchase) =========================== */ .pairs-with-block { margin: .25rem 0 1.1rem; padding: 0 2rem; } .pairs-with-block[hidden] { display: none; } .pairs-with-hint { font-size: .72rem; color: var(--muted); text-align: center; margin-top: .3rem; margin-bottom: -.15rem; } .pairs-with-grid { margin-top: .6rem; display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .35rem; scrollbar-width: thin; } .pairs-with-card { flex: 0 0 90%; scroll-snap-align: start; display: flex; flex-direction: column; gap: .75rem; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1rem; transition: border-color .2s, background .2s; } .pairs-with-card.just-added { border-color: var(--accent); background: rgba(155,95,192,.06); } @media (min-width: 640px) { .pairs-with-card { flex-basis: 72%; } } .pairs-with-card-top { display: flex; gap: 1rem; } .pairs-with-card-top img { width: 136px; height: 136px; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: var(--border); flex-shrink: 0; } .pairs-with-card-body { display: flex; flex-direction: column; gap: .45rem; flex: 1; min-width: 0; justify-content: flex-start; } .pairs-with-colors.color-buttons { justify-content: flex-start; gap: .4rem; } .pairs-with-colors .color-btn { width: 24px; height: 24px; } .pairs-with-card-name { font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.3; width: 100%; text-align: left; } .pairs-with-sizes.upsell-sizes { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 .2rem; } .pairs-with-sizes.upsell-sizes .upsell-size-btn { flex: 1 1 0; min-width: 56px; text-align: center; } .pairs-with-card-price-row { display: flex; align-items: baseline; justify-content: center; gap: .4rem; text-align: center; } .pairs-with-card-price { font-size: 1.15rem; font-weight: 700; color: var(--accent); } .pairs-with-card-price-label { font-size: .74rem; color: var(--muted); } .pairs-with-add-btn { padding: .7rem .7rem; border-radius: var(--radius-sm, 6px); border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .18s, color .18s; width: 100%; } .pairs-with-add-btn:hover { background: var(--accent); color: #fff; } /* =========================== CART BUTTON (header) =========================== */ .cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; background: transparent; color: var(--text); cursor: pointer; transition: color var(--tr); padding: 0; } .cart-btn:hover { color: var(--accent); } .cart-btn-count { position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .cart-btn-count[hidden] { display: none; } /* =========================== MOBILE MENU BUTTON + DRAWER =========================== */ .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; background: transparent; color: var(--text); cursor: pointer; transition: color var(--tr); padding: 0; } .mobile-menu-btn:hover { color: var(--accent); } .mobile-menu-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(20,12,25,.5); backdrop-filter: blur(4px); display: flex; justify-content: flex-end; } .mobile-menu-overlay[hidden] { display: none; } .mobile-menu-panel { width: 100%; max-width: 340px; height: 100%; background: var(--bg-card); display: flex; flex-direction: column; animation: cartSlideIn .3s ease both; box-shadow: -8px 0 30px rgba(0,0,0,.15); } .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-soft); } .mobile-menu-header h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; } .mobile-menu-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; } .mobile-menu-section-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; } .mobile-menu-categories { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1.5rem; } .mobile-menu-cat-btn { display: block; width: 100%; text-align: left; padding: .8rem .25rem; border: none; border-bottom: 1px solid var(--border-soft); background: transparent; font-family: var(--font-body); font-size: .98rem; color: var(--text); cursor: pointer; transition: color var(--tr); } .mobile-menu-cat-btn:hover { color: var(--accent); } .mobile-menu-link { display: block; padding: .8rem .25rem; border-top: 1px solid var(--border-soft); font-family: var(--font-body); font-size: .98rem; color: var(--text); text-decoration: none; } .mobile-menu-link:hover { color: var(--accent); } @media (max-width: 768px) { .mobile-menu-btn { display: inline-flex; } } /* =========================== CATEGORIES (homepage) =========================== */ .catalog-back-btn { display: inline-flex; align-items: center; gap: .3rem; border: none; background: var(--accent); color: var(--white); padding: .5rem 1.1rem; border-radius: var(--radius-xl); font-size: .82rem; font-family: var(--font-body); cursor: pointer; margin-bottom: 1.5rem; box-shadow: 0 4px 18px rgba(155,95,192,.28); transition: all var(--tr); } .catalog-back-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(155,95,192,.38); } .catalog-back-btn[hidden] { display: none; } .category-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4; background: var(--bg-2); display: flex; align-items: flex-end; isolation: isolate; transition: transform var(--tr); } .category-card:hover { transform: translateY(-4px); } .category-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; } .category-card:hover img { transform: scale(1.06); } .category-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(25,15,32,.72) 100%); z-index: -1; } .category-card-name { color: var(--white); font-family: var(--font-display); font-size: 1.0rem; padding: .8rem .75rem; width: 100%; } .category-card-count { display: block; font-family: var(--font-body); font-size: .75rem; color: rgba(255,255,255,.8); margin-top: .15rem; } .category-card--empty { background: linear-gradient(135deg, var(--bg-2), var(--bg-3)); } @media (max-width: 640px) { .catalog-grid.categories-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } } /* =========================== MODAL — category button (replaces old X close) =========================== */ .modal-category-btn { position: absolute; top: 1rem; right: 1rem; height: 36px; padding: 0 1rem; border: none; background: var(--accent); box-shadow: 0 4px 18px rgba(155,95,192,.28); border-radius: var(--radius-xl); cursor: pointer; display: flex; align-items: center; font-size: .8rem; color: var(--white); z-index: 10; transition: all var(--tr); font-family: var(--font-body); gap: .3rem; white-space: nowrap; } .modal-category-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(155,95,192,.38); } /* =========================== ADD TO CART BUTTON + DIVIDER =========================== */ .add-to-cart-btn { margin-bottom: 1rem; } .or-divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: .78rem; margin: .25rem 0 1rem; } .or-divider::before, .or-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-soft); } .or-divider span { padding: 0 .75rem; } /* =========================== CART DRAWER =========================== */ .cart-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(20,12,25,.5); backdrop-filter: blur(4px); display: flex; justify-content: flex-end; } .cart-overlay[hidden] { display: none; } .cart-drawer { width: 100%; max-width: 420px; height: 100%; background: var(--bg-card); display: flex; flex-direction: column; animation: cartSlideIn .3s ease both; box-shadow: -8px 0 30px rgba(0,0,0,.15); } @keyframes cartSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-soft); } .cart-drawer-header h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; } #cart-close { color: var(--accent); border-color: var(--accent); } #cart-close:hover { background: var(--accent); color: var(--white); } .cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; } .cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--border-soft); align-items: start; } .cart-item img { width: 64px; height: 84px; object-fit: cover; border-radius: 8px; } .cart-item-name { font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.3; } .cart-item-meta { font-size: .76rem; color: var(--muted); margin-top: .2rem; } .cart-item-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; } .cart-item-qty { display: flex; align-items: center; gap: .35rem; } .cart-item-qty-btn { width: 24px; height: 24px; border: 1.5px solid var(--border); background: var(--white); border-radius: 5px; font-size: .8rem; font-weight: 700; cursor: pointer; color: var(--text); } .cart-item-qty-val { min-width: 18px; text-align: center; font-size: .8rem; font-weight: 700; } .cart-item-price { font-size: .88rem; font-weight: 700; color: var(--accent); } .cart-item-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .95rem; padding: .2rem; align-self: start; } .cart-item-remove:hover { color: var(--accent); } .cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; flex: 1; padding: 2rem 1.5rem; text-align: center; color: var(--muted); } .cart-empty[hidden] { display: none; } .cart-drawer-footer { padding: 1.1rem 1.5rem 1.4rem; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: .6rem; } .cart-total-row { display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: .3rem; } .cart-total-row strong { color: var(--accent); font-size: 1.15rem; } .cart-shipping-row { font-size: .8rem; color: var(--muted); margin-bottom: .2rem; line-height: 1.4; } .cart-shipping-row strong { color: var(--accent); font-weight: 700; } .cart-shipping-row:empty { display: none; } /* =========================== CHECKOUT PAGE =========================== */ .checkout-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(20,12,25,.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; } .checkout-overlay[hidden] { display: none; } .checkout-box { position: relative; background: var(--bg-card); border-radius: var(--radius-lg); padding: 2.5rem 2.25rem; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; animation: modalIn .35s ease both; } .checkout-box h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; margin-bottom: 1.2rem; } .checkout-summary { margin-bottom: 1rem; border-bottom: 1px solid var(--border-soft); padding-bottom: 1rem; } .checkout-summary-item { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; padding: .4rem 0; color: var(--text-soft); } .checkout-summary-item span:first-child { flex: 1; } .checkout-total-row { display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: 1.25rem; } .checkout-total-row strong { color: var(--accent); font-size: 1.2rem; } .checkout-shipping-row { font-size: .8rem; color: var(--muted); margin-bottom: .5rem; line-height: 1.4; } .checkout-shipping-row strong { color: var(--accent); font-weight: 700; } .checkout-shipping-row:empty { display: none; } .checkout-summary-item-wrap { margin-bottom: .1rem; } @media (max-width: 480px) { .cart-drawer { max-width: 100%; } .checkout-box { padding: 1.75rem 1.25rem; } } /* =========================== UPSELL — clickable colors & sizes =========================== */ .upsell-colors { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; margin: .3rem 0; } .upsell-color-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: linear-gradient(to bottom, var(--swatch-color-top, var(--swatch-color, #ccc)) 50%, var(--swatch-color-bottom, var(--swatch-color, #ccc)) 50%); cursor: pointer; padding: 0; transition: border-color .15s, transform .15s; } .upsell-color-dot:hover { transform: scale(1.1); } .upsell-color-dot.active { border-color: var(--accent); } .upsell-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin: .3rem 0; } .upsell-size-btn { padding: .25rem .55rem; border: 1.5px solid var(--border); background: var(--white); border-radius: 6px; font-size: .72rem; font-weight: 600; color: var(--text); cursor: pointer; transition: all .15s; } .upsell-size-btn:hover:not(:disabled) { border-color: var(--accent); } .upsell-size-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); } .upsell-size-btn:disabled { opacity: .55; cursor: default; text-decoration: line-through; }