/* ============================================================ Интернет-магазин: каталог, карточки товара, корзина, модалки. ОТДЕЛЬНЫЙ файл — подключается собственным тегом, не зависит от сгенерированного LLM style.css. Визуал задаётся CSS-токенами --shop-* и data-shop-preset на . ============================================================ */ :root { --shop-accent: #6366f1; --shop-accent-2: #8b5cf6; --shop-btn-bg: #111827; --shop-btn-text: #ffffff; --shop-cart-badge-bg: #ef4444; --shop-cart-badge-text: #ffffff; --shop-card-bg: #ffffff; --shop-card-text: #111827; --shop-card-border: rgba(15, 23, 42, 0.12); --shop-modal-bg: #ffffff; --shop-modal-text: #111827; --shop-overlay: rgba(15, 23, 42, 0.56); --shop-radius-card: 16px; --shop-radius-btn: 10px; --shop-radius-modal: 20px; --shop-border-width: 1px; --shop-shadow-card: 0 10px 28px rgba(15, 23, 42, 0.10); --shop-shadow-card-hover: 0 20px 44px rgba(15, 23, 42, 0.18); --shop-btn-weight: 700; --shop-btn-transform: none; --shop-btn-shadow: 0 6px 16px rgba(17, 24, 39, 0.22); --shop-btn-pad-y: 0.68rem; --shop-btn-pad-x: 1.05rem; --shop-price-size: 1.08rem; --shop-price-weight: 800; --shop-title-weight: 700; --shop-label-transform: none; } [data-shop-preset="light-min"] { --shop-accent: #0f172a; --shop-accent-2: #334155; --shop-btn-bg: #0f172a; --shop-btn-text: #ffffff; --shop-cart-badge-bg: #0f172a; --shop-cart-badge-text: #ffffff; --shop-card-bg: #ffffff; --shop-card-text: #0f172a; --shop-card-border: rgba(15, 23, 42, 0.16); --shop-modal-bg: #ffffff; --shop-modal-text: #0f172a; --shop-overlay: rgba(15, 23, 42, 0.34); --shop-radius-card: 6px; --shop-radius-btn: 4px; --shop-radius-modal: 10px; --shop-border-width: 1px; --shop-shadow-card: none; --shop-shadow-card-hover: 0 10px 24px rgba(15, 23, 42, 0.08); --shop-btn-weight: 650; --shop-btn-transform: none; --shop-btn-shadow: none; --shop-btn-pad-y: 0.62rem; --shop-btn-pad-x: 1rem; --shop-price-size: 1.02rem; --shop-price-weight: 750; --shop-title-weight: 650; --shop-label-transform: none; } [data-shop-preset="dark-lux"] { --shop-accent: #8b5cf6; --shop-accent-2: #06b6d4; --shop-btn-bg: linear-gradient(135deg, #8b5cf6, #06b6d4); --shop-btn-text: #ffffff; --shop-cart-badge-bg: linear-gradient(135deg, #8b5cf6, #06b6d4); --shop-cart-badge-text: #ffffff; --shop-card-bg: #111827; --shop-card-text: #f8fafc; --shop-card-border: rgba(255, 255, 255, 0.12); --shop-modal-bg: #0f172a; --shop-modal-text: #f8fafc; --shop-overlay: rgba(2, 6, 23, 0.74); --shop-radius-card: 22px; --shop-radius-btn: 14px; --shop-radius-modal: 26px; --shop-border-width: 1px; --shop-shadow-card: 0 16px 46px rgba(2, 6, 23, 0.28); --shop-shadow-card-hover: 0 26px 70px rgba(2, 6, 23, 0.40); --shop-btn-weight: 800; --shop-btn-transform: none; --shop-btn-shadow: 0 10px 28px rgba(139, 92, 246, 0.38); --shop-btn-pad-y: 0.76rem; --shop-btn-pad-x: 1.16rem; --shop-price-size: 1.14rem; --shop-price-weight: 850; --shop-title-weight: 780; --shop-label-transform: none; } [data-shop-preset="bold"] { --shop-accent: #f59e0b; --shop-accent-2: #ef4444; --shop-btn-bg: #f59e0b; --shop-btn-text: #1a1205; --shop-cart-badge-bg: #f59e0b; --shop-cart-badge-text: #1a1205; --shop-card-bg: #fff7ed; --shop-card-text: #1c1917; --shop-card-border: #111827; --shop-modal-bg: #fff7ed; --shop-modal-text: #1c1917; --shop-overlay: rgba(17, 24, 39, 0.58); --shop-radius-card: 18px; --shop-radius-btn: 999px; --shop-radius-modal: 18px; --shop-border-width: 2px; --shop-shadow-card: 0 8px 0 rgba(17, 24, 39, 0.85); --shop-shadow-card-hover: 0 12px 0 rgba(17, 24, 39, 0.85); --shop-btn-weight: 900; --shop-btn-transform: uppercase; --shop-btn-shadow: none; --shop-btn-pad-y: 0.72rem; --shop-btn-pad-x: 1.28rem; --shop-price-size: 1.16rem; --shop-price-weight: 900; --shop-title-weight: 850; --shop-label-transform: uppercase; } .shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .product-card { border: var(--shop-border-width) solid var(--shop-card-border); border-radius: var(--shop-radius-card); background: var(--shop-card-bg); color: var(--shop-card-text); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; box-shadow: var(--shop-shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: var(--shop-shadow-card-hover); } .product-card__image-wrapper { aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--shop-card-text) 7%, transparent); } .product-card__image { width: 100%; height: 100%; object-fit: cover; display: block; } .product-card__content { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .product-card__title { font-size: 1.05rem; font-weight: var(--shop-title-weight); text-transform: var(--shop-label-transform); margin: 0; } .product-card__price { display: flex; align-items: baseline; gap: 0.5rem; } .product-card__old-price { text-decoration: line-through; opacity: 0.5; font-size: 0.9em; } .product-card__current-price { font-size: var(--shop-price-size); font-weight: var(--shop-price-weight); color: var(--shop-accent); } .product-card__actions { margin-top: auto; display: flex; gap: 0.5rem; } .add-to-cart, .shop-checkout__submit { flex: 1; padding: var(--shop-btn-pad-y) var(--shop-btn-pad-x); border: none; border-radius: var(--shop-radius-btn); background: var(--shop-btn-bg); color: var(--shop-btn-text); cursor: pointer; font: inherit; font-weight: var(--shop-btn-weight); text-transform: var(--shop-btn-transform); box-shadow: var(--shop-btn-shadow); } .add-to-cart:hover, .shop-checkout__submit:hover { opacity: 0.9; } .product-details { padding: var(--shop-btn-pad-y) var(--shop-btn-pad-x); border: var(--shop-border-width) solid var(--shop-card-border); border-radius: var(--shop-radius-btn); background: transparent; color: inherit; cursor: pointer; font: inherit; } .product-details:hover { background: color-mix(in srgb, var(--shop-accent) 9%, transparent); } .shop-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .shop-filter { padding: 0.4rem 0.9rem; border: var(--shop-border-width) solid var(--shop-card-border); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font: inherit; } .shop-filter.is-active { background: var(--shop-btn-bg); color: var(--shop-btn-text); border-color: transparent; } .cart-icon { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: inherit; } .cart-count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--shop-cart-badge-bg); color: var(--shop-cart-badge-text); font-size: 11px; line-height: 18px; text-align: center; font-weight: 800; box-shadow: var(--shop-btn-shadow); } .shop-modal { position: fixed; inset: 0; z-index: 1000; display: none; } .shop-modal.is-open { display: block; } .shop-modal__overlay { position: absolute; inset: 0; background: var(--shop-overlay); backdrop-filter: blur(4px); } .shop-modal__dialog { position: relative; max-width: 640px; margin: 5vh auto; max-height: 90vh; overflow-y: auto; background: var(--shop-modal-bg); color: var(--shop-modal-text); border-radius: var(--shop-radius-modal); padding: 1.5rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34); animation: shopModalIn .24s cubic-bezier(.2, .8, .25, 1); } .shop-modal__close { position: absolute; top: 0.75rem; right: 1rem; border: none; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--shop-modal-text); } .shop-product { display: flex; flex-wrap: wrap; gap: 1.5rem; } .shop-product__image { flex: 1 1 240px; position: relative; } .shop-product__image img { width: 100%; border-radius: var(--shop-radius-card); display: block; } .shop-product__info { flex: 1 1 240px; display: flex; flex-direction: column; gap: 0.75rem; } .shop-product__price { font-size: var(--shop-price-size); font-weight: var(--shop-price-weight); color: var(--shop-accent); } .shop-product__gallery { flex: 1 1 260px; display: flex; flex-direction: column; gap: 0.6rem; } .shop-product__gallery--stack { gap: 0.75rem; } .shop-product__thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; } .shop-product__thumb { width: 62px; height: 62px; padding: 0; border: 2px solid transparent; border-radius: var(--shop-radius-card); overflow: hidden; cursor: pointer; background: none; transition: border-color .15s, transform .15s; } .shop-product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-product__thumb:hover { transform: translateY(-2px); } .shop-product__thumb.is-active { border-color: var(--shop-accent); } .shop-gallery__zoom { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border: none; cursor: pointer; border-radius: 50%; background: color-mix(in srgb, var(--shop-accent) 68%, #111); backdrop-filter: blur(4px); } .shop-gallery__zoom::before, .shop-gallery__zoom::after { content: ''; position: absolute; background: #fff; } .shop-gallery__zoom::before { width: 14px; height: 2px; top: 18px; left: 12px; } .shop-gallery__zoom::after { width: 2px; height: 14px; top: 12px; left: 18px; } .product-card__image-wrapper.shop-slider { position: relative; overflow: hidden; } .shop-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; border-radius: 50%; background: color-mix(in srgb, var(--shop-card-bg) 90%, transparent); box-shadow: var(--shop-shadow-card); cursor: pointer; opacity: 0; transition: opacity .2s; z-index: 2; } .product-card__image-wrapper.shop-slider:hover .shop-slider__arrow { opacity: 1; } .shop-slider__arrow::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-left: 2px solid var(--shop-card-text); border-bottom: 2px solid var(--shop-card-text); } .shop-slider__arrow--prev { left: 8px; } .shop-slider__arrow--prev::before { transform: translate(-30%,-50%) rotate(45deg); } .shop-slider__arrow--next { right: 8px; } .shop-slider__arrow--next::before { transform: translate(-70%,-50%) rotate(-135deg); } .shop-slider__dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; } .shop-slider__dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: background .2s, width .2s; } .shop-slider__dot.is-active { background: var(--shop-accent); width: 18px; border-radius: 4px; } .shop-lightbox { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(10,10,12,.92); padding: 4vh 4vw; } .shop-lightbox.is-open { display: flex; } .shop-lightbox__img { max-width: 100%; max-height: 90vh; border-radius: var(--shop-radius-card); object-fit: contain; } .shop-lightbox__close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border: none; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; border-radius: 50%; } .shop-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: none; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; font-size: 34px; line-height: 1; border-radius: 50%; } .shop-lightbox__nav--prev { left: 3vw; } .shop-lightbox__nav--next { right: 3vw; } .shop-lightbox__counter { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #fff; font-size: .95rem; } .shop-cart__item { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--shop-modal-text) 18%, transparent); } .shop-cart__item-qty { display: inline-flex; align-items: center; gap: 0.5rem; } .shop-cart__item-qty button { width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--shop-modal-text) 28%, transparent); background: transparent; color: inherit; border-radius: calc(var(--shop-radius-btn) / 1.5); cursor: pointer; } .shop-cart__item-remove { border: none; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; } .shop-cart__total { margin: 1rem 0; font-weight: 700; font-size: 1.15rem; text-align: right; } .shop-checkout { display: flex; flex-direction: column; gap: 0.75rem; } .shop-checkout input, .shop-checkout textarea { padding: 0.7rem; border: 1px solid color-mix(in srgb, var(--shop-modal-text) 25%, transparent); border-radius: var(--shop-radius-btn); background: color-mix(in srgb, var(--shop-modal-bg) 88%, var(--shop-modal-text)); color: var(--shop-modal-text); font: inherit; } .shop-checkout__status { font-size: 0.9rem; opacity: 0.8; } .shop-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .shop-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--shop-btn-bg); color: var(--shop-btn-text); padding: 0.85rem 1.4rem; border-radius: var(--shop-radius-btn); font-size: 0.95rem; box-shadow: var(--shop-btn-shadow); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 1100; } .shop-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } @keyframes shopModalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }