:root { --page: #F5F5F7; --ink: #1d1d1f; --muted: #6e6e73; --card: #fff; --accent: #0071e3; }
* { box-sizing: border-box; }
html { background: var(--page); }
body { min-width: 320px; margin: 0; background: var(--page); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: inherit; }
.site-header { min-height: 64px; display: flex; align-items: center; padding: 0 20px; background: rgba(245,245,247,.86); border-bottom: 1px solid rgba(0,0,0,.05); backdrop-filter: blur(18px); }
.brand { color: var(--ink); font-size: 17px; font-weight: 750; letter-spacing: -.03em; text-decoration: none; }
.brand span { color: var(--muted); font-weight: 500; }
.store-main { width: min(100%, 1360px); margin: 0 auto; padding: 28px 16px 64px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin: -8px 0 20px; color: #515154; font-size: 14px; font-weight: 600; text-decoration: none; }
.back-link svg { width: 17px; height: 17px; }.back-link:focus-visible, .product-card:focus-visible, .buy-button:focus-visible, .gallery-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; letter-spacing: -.055em; }.page-state { padding: 52px 20px; border-radius: 20px; background: var(--card); color: var(--muted); text-align: center; font-size: 15px; }.page-state[hidden], [hidden] { display: none !important; }
.image-frame { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(145deg, #f7f7f8, #ebebed); }.image-frame img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .32s ease, transform .45s ease; }.image-frame.is-loaded img { opacity: 1; }.image-skeleton { position: absolute; inset: 0; background: linear-gradient(105deg, #ececef 25%, #f7f7f8 37%, #ececef 63%); background-size: 300% 100%; animation: shimmer 1.35s linear infinite; transition: opacity .25s ease; }.image-frame.is-loaded .image-skeleton { opacity: 0; pointer-events: none; }.image-placeholder { position: relative; z-index: 1; color: #a1a1a6; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.catalog-title { max-width: 650px; font-size: clamp(32px, 8vw, 56px); line-height: 1.04; }.intro { max-width: 500px; margin: 13px 0 30px; color: var(--muted); font-size: 16px; line-height: 1.45; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }.product-card { display: block; overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,.035); color: inherit; text-decoration: none; transform: translateZ(0); -webkit-tap-highlight-color: transparent; animation: card-enter .46s both; animation-delay: calc(var(--card-index, 0) * 50ms); transition: transform .26s ease, box-shadow .26s ease; }.product-card:active { transform: scale(.985); box-shadow: 0 1px 7px rgba(0,0,0,.045); }.product-image { height: min(82vw, 440px); }.product-card:hover .image-frame img { transform: scale(1.025); }.card-content { min-height: 112px; display: flex; flex-direction: column; justify-content: center; padding: 18px 18px 20px; }.product-model { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }.product-spec { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.25; }.product-price { margin: 13px 0 0; font-size: 19px; font-weight: 750; letter-spacing: -.025em; }
.detail-main { width: min(100%, 1220px); }.detail-page { display: grid; gap: 25px; opacity: 0; transform: translateY(9px); }.detail-page.is-visible { animation: page-enter .48s ease forwards; }.gallery { min-width: 0; }.gallery-track { display: flex; overflow-x: auto; border-radius: 22px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }.gallery-track::-webkit-scrollbar { display: none; }.gallery-slide { min-width: 100%; height: min(112vw, 570px); scroll-snap-align: center; scroll-snap-stop: always; }.gallery-slide .image-frame { height: 100%; border-radius: 22px; }.gallery-indicators { min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }.gallery-dot { width: 18px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }.gallery-dot::after { display: block; width: 7px; height: 7px; margin: auto; border-radius: 50%; background: #b8b8bd; content: ""; transition: transform .22s ease, background .22s ease; }.gallery-dot[aria-current="true"]::after { background: #3a3a3c; transform: scale(1.2); }.gallery-dot:active::after { transform: scale(.8); }.details { padding: 4px 2px; }.detail-title { font-size: clamp(32px, 8vw, 48px); line-height: 1.06; }.specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }.spec { padding: 9px 12px; border-radius: 999px; background: #e9e9ed; color: #4b4b50; font-size: 14px; font-weight: 600; }.price { margin: 24px 0; font-size: 30px; font-weight: 750; letter-spacing: -.045em; }.description { margin: 0; color: #4d4d52; font-size: 16px; line-height: 1.55; white-space: pre-line; }.battery { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 24px 0; padding: 17px 0; border-top: 1px solid #dcdce0; border-bottom: 1px solid #dcdce0; }.battery span { color: var(--muted); font-size: 14px; }.battery strong { font-size: 17px; }.buy-button { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; background: #1d1d1f; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; }.buy-button svg { width: 19px; height: 19px; }.buy-button:active { transform: scale(.98); }
@keyframes shimmer { to { background-position: -300% 0; } } @keyframes card-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes page-enter { to { opacity: 1; transform: translateY(0); } }
@media (min-width: 640px) { .store-main { padding: 38px 28px 76px; }.site-header { padding: 0 28px; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.product-image { height: min(54vw, 420px); } }
@media (min-width: 768px) { .detail-page { grid-template-columns: minmax(0, 1.08fr) minmax(310px, .72fr); gap: 52px; align-items: start; }.gallery-slide { height: min(57vw, 570px); }.details { padding-top: 25px; } }
@media (min-width: 1024px) { .site-header { padding-inline: max(32px, calc((100vw - 1304px) / 2)); }.store-main { padding-top: 52px; }.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }.product-image { height: 350px; }.product-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,.07); }.buy-button:hover { background: #000; transform: translateY(-2px); box-shadow: 0 9px 20px rgba(0,0,0,.15); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }