/* =========================== LuNaRa — Жіночий одяг Пудра · Графіт · Золото — елегантність і жіночність =========================== */ /* Шрифти Playfair Display + Nunito Sans тепер підключені в index.html (async, з preload) — тут @import прибрано, щоб не вантажити їх удруге. */ :root { /* ── Фони — теплий пудровий ── */ --bg: #faf5f3; --bg-2: #f3e6e1; --bg-3: #e8d3ca; --bg-card: #fffbf9; --bg-dark: #241a1d; /* ── Акценти — приглушена рожево-бордова ── */ --accent: #b3546e; --accent-dark: #8a3a52; --accent-light:#d98aa0; --gold: #c9a05a; /* ── Текст — графіт з теплим відтінком ── */ --text: #2b2124; --text-soft: #4a393f; --muted: #8a767c; /* ── Межі ── */ --border: #e2c9ce; --border-soft: #eedde0; --frost: #c9a05a; /* ── Білий ── */ --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,30,.08); --shadow-hover:0 14px 44px rgba(60,20,30,.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; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } 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(74,158,47,.28); } .btn-primary:hover:not(:disabled):not(.btn--oos) { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(74,158,47,.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); } /* PROMO TOPBAR — знижка 10% на 2-й і наступні товари */ .promo-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 101; display: flex; align-items: center; justify-content: center; background: var(--accent-dark); color: var(--white); 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(--white); opacity: .7; 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(243,250,240,.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(20,80,10,.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; } .header-nav-left, .header-nav-right { display: flex; gap: 2rem; } .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.4rem; font-weight: 500; letter-spacing: .12em; color: var(--text); } /* HERO */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; background: var(--bg-2); overflow: hidden; padding: calc(120px + var(--topbar-h)) 0 60px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 3.5rem; width: 100%; } .hero-text { position: relative; z-index: 2; animation: fadeUp .9s ease both; } @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } .hero-tagline { margin-bottom: 1.4rem; } .hero-eyebrow { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--white); background: var(--accent); padding: .45rem 1rem; border-radius: var(--radius); } .hero-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 500; line-height: 1.12; color: var(--text); margin-bottom: 1.3rem; max-width: 520px; border-left: 4px solid var(--accent); padding-left: 1.2rem; } .hero-subtitle { font-size: .97rem; color: var(--text-soft); max-width: 460px; margin-bottom: 2.2rem; line-height: 1.78; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.2rem; } .hero-badges { display: flex; gap: .7rem; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--text-soft); background: var(--white); border: 1px solid var(--border); padding: .5rem .85rem; border-radius: 999px; } .badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: .62rem; font-weight: 700; color: var(--white); background: var(--accent); border-radius: 50%; } .hero-visual { position: relative; z-index: 1; } .hero-photo-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-hover); border: 1px solid var(--border-soft); } .hero-photo { display: block; width: 100%; height: 100%; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } @media (max-width: 900px) { .hero { padding: calc(100px + var(--topbar-h)) 0 50px; } .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero-visual { order: -1; } .hero-photo-frame { aspect-ratio: 16 / 10; } .hero-title { border-left: none; padding-left: 0; border-top: 4px solid var(--accent); padding-top: 1rem; } } /* 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: 7rem 0; 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: var(--swatch-color, var(--bg-3)); 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)); } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .review-card { padding: 2rem; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); transition: all var(--tr); background: var(--bg-card); } .review-card--featured { background: var(--bg-2); border-color: var(--border); } .review-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--gold); } .review-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .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; margin-bottom: .75rem; } .review-tag { font-size: .7rem; color: var(--accent); font-weight: 600; } /* 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(228,245,222,.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(125,201,84,.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(228,245,222,.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(13,31,10,.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; 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(74,158,47,.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(74,158,47,.38); } .modal-inner { display: grid; grid-template-columns: 1fr 1fr; } .modal-gallery { position: relative; } .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(20,10,12,.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(15,8,9,.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(74,158,47,.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; } .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); } .spec-value { font-size: .76rem; color: var(--text); font-weight: 600; padding: .42rem 0; border-bottom: 1px solid var(--border-soft); } .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: var(--swatch-color, var(--bg-3)); 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; } /* 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; } .sizechart-header { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft) !important; } .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; } .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; } /* 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: .9rem; 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(243,250,240,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--border-soft); box-shadow: 0 -4px 20px rgba(20,80,10,.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(13,31,10,.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(74,158,47,.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; } /* 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; } .reviews-grid { grid-template-columns: 1fr; } .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; } /* Якщо блоку "Доповніть образ" немає (він прихований) — кнопці "Додати в кошик" бракує відступу знизу, бо це останній елемент картки. Додаємо додатковий простір. */ .modal-info:has(> .pairs-with-block[hidden]) { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + 1.5rem); } .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: 1rem; text-align: center; } .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(74,158,47,.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-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-card-price-old { font-size: .78rem; color: var(--muted); text-decoration: line-through; } /* 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); } /* =========================== PAIRS WITH (Доповніть образ — product modal, pre-purchase) =========================== */ .pairs-with-block { margin: .25rem 0 1.1rem; } .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(74,158,47,.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: center; } .pairs-with-card-name { font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.3; } .pairs-with-sizes.upsell-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; } .pairs-with-card-price-row { display: flex; align-items: baseline; gap: .4rem; } .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: 38px; height: 38px; 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: none; align-items: center; justify-content: center; width: 38px; height: 38px; 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(13,10,11,.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(74,158,47,.28); transition: all var(--tr); } .catalog-back-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(74,158,47,.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(20,10,12,.72) 100%); z-index: -1; } .category-card-name { color: var(--white); font-family: var(--font-display); font-size: 1.25rem; padding: 1.1rem 1rem; 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(74,158,47,.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(74,158,47,.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(13,10,11,.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-price-wrap { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; } .cart-item-price-old { font-size: .76rem; color: var(--muted); text-decoration: line-through; } .cart-item-discount-badge { font-size: .68rem; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: .1rem .4rem; } .cart-item-discount-note { font-size: .72rem; color: var(--muted); margin-top: .2rem; width: 100%; } .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-savings-row { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); margin-bottom: .2rem; } .cart-savings-row strong { color: var(--accent); font-weight: 700; } /* =========================== CHECKOUT PAGE =========================== */ .checkout-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(13,10,11,.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-summary-price-old { font-size: .78rem; color: var(--muted); text-decoration: line-through; margin-right: .3rem; } .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-savings-row { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); margin-bottom: .4rem; } .checkout-savings-row strong { color: var(--accent); font-weight: 700; } .checkout-summary-item-wrap { margin-bottom: .1rem; } .checkout-summary-item-note { font-size: .72rem; color: var(--muted); margin: -.15rem 0 .3rem; } @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: var(--swatch-color, #ccc); 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; }