:root { --ink:#0c1525; --muted:#647084; --line:#e6eaf0; --paper:#fff; --blue:#1367ff; --blue-dark:#0753d6; --soft:#f5f7fa; --lime:#c9ff47; --shadow:0 22px 65px rgba(12,28,55,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
.no-scroll { overflow:hidden; }
.site-header { position:sticky; top:0; z-index:30; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:76px; padding:0 max(4.5vw,24px); border-bottom:1px solid rgba(230,234,240,.8); background:rgba(255,255,255,.9); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:10px; width:max-content; font-size:15px; font-weight:800; letter-spacing:.08em; }
.brand strong { color:var(--blue); }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:white; background:var(--blue); font-size:18px; letter-spacing:0; box-shadow:0 7px 18px rgba(19,103,255,.25); }
.main-nav { display:flex; gap:36px; font-size:14px; font-weight:650; }
.main-nav a { color:#566176; transition:.2s; }
.main-nav a:hover { color:var(--blue); }
.cart-button { justify-self:end; display:flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border:0; border-radius:12px; background:#101a2d; color:white; cursor:pointer; font-size:13px; font-weight:700; }
.cart-button svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cart-count { display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:99px; background:white; color:#101a2d; font-size:11px; transition:.2s; }
.cart-count.has-items { background:var(--lime); transform:scale(1.08); }
.hero { position:relative; display:grid; grid-template-columns:1.02fr .98fr; min-height:690px; padding:70px max(6vw,32px) 76px; overflow:hidden; background:linear-gradient(125deg,#f9fbff 0%,#f4f7fb 55%,#eef4ff 100%); }
.hero::before { content:""; position:absolute; inset:0; opacity:.38; background-image:radial-gradient(#a8b3c8 1px,transparent 1px); background-size:27px 27px; mask-image:linear-gradient(90deg,black,transparent 62%); }
.hero-copy { position:relative; z-index:2; align-self:center; max-width:690px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:#34415a; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; }
.eyebrow > span { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(19,103,255,.1); }
.hero h1 { margin:22px 0 22px; font-size:clamp(54px,6.4vw,94px); line-height:.93; letter-spacing:-.066em; font-weight:850; }
.hero h1 em { color:var(--blue); font-style:normal; }
.hero-copy > p { max-width:560px; margin:0; color:var(--muted); font-size:18px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:52px; padding:0 23px; border:1px solid transparent; border-radius:13px; font-weight:750; cursor:pointer; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:var(--blue); color:#fff; box-shadow:0 12px 28px rgba(19,103,255,.24); }
.button.primary:hover { background:var(--blue-dark); box-shadow:0 16px 34px rgba(19,103,255,.3); }
.button.ghost { background:white; border-color:#dfe4ec; color:#243049; }
.hero-proof { display:flex; gap:32px; margin-top:45px; padding-top:25px; border-top:1px solid #dfe5ed; color:#748095; font-size:12px; }
.hero-proof span { display:flex; flex-direction:column; gap:3px; }
.hero-proof b { color:#263349; font-size:14px; }
.hero-art { position:relative; min-height:540px; margin-left:30px; }
.orbit { position:absolute; border:1px solid rgba(68,102,155,.16); border-radius:50%; }
.orbit-one { inset:4% 1% 3% 7%; }
.orbit-two { inset:15% 13% 16% 20%; border-style:dashed; }
.hero-phone { position:absolute; left:50%; top:49%; width:260px; height:500px; border:8px solid #d7dce7; border-radius:52px; transform:translate(-50%,-50%) rotate(10deg); background:linear-gradient(145deg,#f7faff 0%,#cbd7ea 42%,#f9fbff 75%); box-shadow:35px 42px 70px rgba(30,55,93,.25),inset 0 0 0 2px white; }
.hero-phone::before { content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.8); border-radius:39px; }
.hero-cameras { position:absolute; display:grid; grid-template-columns:repeat(2,55px); gap:5px; top:26px; left:24px; width:128px; height:133px; padding:7px; border-radius:32px; background:rgba(225,232,243,.8); box-shadow:inset 0 0 0 1px white; }
.hero-cameras i { width:51px; height:51px; border:5px solid #657288; border-radius:50%; background:radial-gradient(circle at 42% 38%,#92b9f8 0 8%,#18243a 14% 36%,#0b1120 38% 57%,#7e8da5 60%); box-shadow:0 4px 8px rgba(0,0,0,.22); }
.hero-cameras i:last-child { grid-column:2; }
.hero-ring { position:absolute; left:50%; top:54%; width:118px; height:118px; border:7px solid rgba(255,255,255,.85); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 2px rgba(104,128,165,.15); }
.hero-pill { position:absolute; bottom:72px; left:50%; width:7px; height:82px; border-radius:8px; background:rgba(255,255,255,.82); transform:translateX(-50%); }
.floating-card { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:13px 17px; border:1px solid rgba(255,255,255,.9); border-radius:16px; background:rgba(255,255,255,.78); backdrop-filter:blur(12px); box-shadow:0 18px 45px rgba(24,49,86,.14); }
.floating-card .mini-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#e9f1ff; color:var(--blue); font-size:20px; }
.floating-card div { display:flex; flex-direction:column; }
.floating-card strong { font-size:13px; }
.floating-card small { margin-top:2px; color:var(--muted); font-size:10px; }
.glass-card { top:12%; left:0; }
.case-card { right:-2%; bottom:17%; }
.rating-pill { position:absolute; z-index:3; left:2%; bottom:8%; padding:11px 15px; border-radius:99px; background:#101a2d; color:white; font-weight:800; box-shadow:0 15px 30px rgba(15,25,45,.2); }
.rating-pill > span { color:#f9c744; }
.rating-pill small { margin-left:6px; color:#aeb8c9; font-weight:500; }
.catalog-section { padding:100px max(5vw,32px) 90px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; max-width:1320px; margin:0 auto 38px; }
.section-heading h2 { margin:12px 0 0; font-size:clamp(34px,4vw,56px); letter-spacing:-.045em; }
.section-heading > p { max-width:355px; margin:0 0 5px; color:var(--muted); line-height:1.6; }
.category-tabs { display:flex; gap:10px; max-width:1320px; margin:0 auto 32px; overflow:auto; padding-bottom:4px; scrollbar-width:none; }
.category-tab { display:flex; align-items:center; gap:9px; flex:0 0 auto; min-height:46px; padding:0 17px; border:1px solid var(--line); border-radius:12px; background:white; color:#59657a; font-size:13px; font-weight:700; cursor:pointer; transition:.2s; }
.category-tab span { font-size:17px; }
.category-tab:hover,.category-tab.active { border-color:#172238; background:#172238; color:white; }
.catalog-layout { display:grid; grid-template-columns:245px 1fr; gap:44px; max-width:1320px; margin:auto; }
.filters { align-self:start; position:sticky; top:100px; padding:23px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.filter-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.filter-title strong { font-size:18px; }
.filter-title button { border:0; background:none; color:var(--blue); font-size:12px; font-weight:750; cursor:pointer; }
.filters label { display:block; margin-bottom:19px; }
.filters label > span:first-child,.price-filter span { display:block; margin-bottom:8px; color:#4d596c; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.filters select,.filters input[type="search"] { width:100%; height:44px; padding:0 12px; border:1px solid #dfe4eb; border-radius:10px; outline:none; background:white; color:#26334a; font-size:13px; transition:.2s; }
.filters select:focus,.filters input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(19,103,255,.08); }
.input-wrap { position:relative; display:block; }
.input-wrap svg { position:absolute; z-index:1; top:13px; left:12px; width:17px; fill:none; stroke:#8490a3; stroke-width:1.8; }
.filters .input-wrap input { padding-left:38px; }
.price-filter { padding-top:3px; }
.price-filter > div { display:flex; align-items:start; justify-content:space-between; }
.price-filter strong { color:var(--blue); font-size:12px; }
.price-filter input { width:100%; accent-color:var(--blue); }
.mobile-filter-close { display:none; }
.catalog-toolbar { min-height:38px; display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.catalog-toolbar p { margin:0; color:var(--muted); font-size:13px; }
.catalog-toolbar p strong { color:var(--ink); }
.catalog-toolbar > div { display:flex; align-items:center; gap:10px; }
.sort-control { color:#718096; font-size:12px; }
.sort-control select { padding:6px 2px; border:0; background:transparent; color:#273449; font-weight:700; outline:none; }
.filter-toggle { display:none; }
.active-filters { display:flex; gap:6px; min-height:30px; margin-bottom:8px; flex-wrap:wrap; }
.active-filters button { height:27px; padding:0 9px; border:0; border-radius:8px; background:#edf3ff; color:#315eae; font-size:11px; cursor:pointer; }
.active-filters span { margin-left:4px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.product-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; cursor:pointer; outline:none; transition:transform .24s,box-shadow .24s,border-color .24s; }
.product-card:hover,.product-card:focus-visible { transform:translateY(-5px); border-color:#d6dce6; box-shadow:0 18px 38px rgba(25,42,70,.1); }
.product-media { position:relative; height:215px; background:#f4f6f9; overflow:hidden; }
.product-badge { position:absolute; z-index:4; top:14px; left:14px; padding:6px 9px; border-radius:7px; background:#101a2d; color:#fff; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.quick-view { position:absolute; z-index:4; top:13px; right:13px; display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.7); border-radius:50%; background:rgba(255,255,255,.82); backdrop-filter:blur(6px); cursor:pointer; font-size:19px; }
.product-visual { position:relative; width:100%; height:100%; overflow:hidden; }
.product-visual .visual-glow { position:absolute; width:165px; height:165px; left:50%; top:52%; border-radius:50%; transform:translate(-50%,-50%); filter:blur(14px); opacity:.28; background:#4d8cff; }
.tone-ice { background:linear-gradient(145deg,#f4f8fb,#dde8ef); }.tone-blue { background:linear-gradient(145deg,#e5efff,#bfd4fb); }.tone-black,.tone-smoke { background:linear-gradient(145deg,#e9edf2,#cbd2dd); }.tone-cyan { background:linear-gradient(145deg,#e5fbfc,#bcebf3); }.tone-violet { background:linear-gradient(145deg,#f0eafd,#d7c7f6); }.tone-lime,.tone-green { background:linear-gradient(145deg,#f0f9e6,#cee9b6); }.tone-orange,.tone-yellow { background:linear-gradient(145deg,#fff5de,#f2d6a2); }.tone-red { background:linear-gradient(145deg,#ffeded,#f0c4c5); }
.case-shape { position:absolute; left:50%; top:51%; width:100px; height:175px; border:5px solid rgba(240,245,250,.95); border-radius:27px; transform:translate(-50%,-50%) rotate(8deg); background:rgba(255,255,255,.3); box-shadow:12px 18px 25px rgba(38,53,79,.2),inset 0 0 0 2px rgba(92,109,137,.18); }
.tone-black .case-shape,.tone-smoke .case-shape { border-color:#273044; background:#3e485a; }
.camera-cut { position:absolute; top:8px; left:8px; width:37px; height:42px; border-radius:12px; background:rgba(106,124,151,.28); box-shadow:inset 0 0 0 4px rgba(255,255,255,.48); }
.magsafe-ring { position:absolute; left:50%; top:54%; width:60px; height:60px; border:5px solid rgba(255,255,255,.82); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 1px rgba(83,105,137,.2); }
.magsafe-line { position:absolute; left:50%; top:73%; width:5px; height:27px; border-radius:4px; background:rgba(255,255,255,.84); transform:translateX(-50%); }
.glass-shape { position:absolute; z-index:2; left:48%; top:48%; width:91px; height:165px; border:3px solid rgba(25,41,64,.8); border-radius:22px; transform:translate(-50%,-50%) rotate(-7deg); background:linear-gradient(140deg,rgba(255,255,255,.15),rgba(255,255,255,.62)); box-shadow:12px 18px 26px rgba(31,58,84,.18); }
.glass-shape i { position:absolute; left:50%; top:8px; width:24px; height:4px; border-radius:4px; background:#303b4e; transform:translateX(-50%); }
.glass-shape b { position:absolute; left:50%; top:54%; color:rgba(28,61,89,.7); font-size:20px; letter-spacing:-.05em; transform:translate(-50%,-50%); }
.glass-shape.second { z-index:1; left:57%; top:52%; opacity:.38; }
.part-shape { position:absolute; display:grid; place-items:center; left:50%; top:50%; width:120px; height:150px; border:5px solid #343e51; border-radius:16px; transform:translate(-50%,-50%) rotate(5deg); background:#161e2d; box-shadow:14px 20px 28px rgba(31,44,64,.25); }
.part-shape::before { content:""; position:absolute; inset:9px; border-radius:9px; background:linear-gradient(145deg,#263752,#0e1726); }
.part-shape i { position:absolute; z-index:2; width:54px; height:54px; border:5px solid #647189; border-radius:50%; background:radial-gradient(circle,#6f91c7 0 8%,#17243a 11% 48%,#8490a2 50%); }
.part-shape b { z-index:3; margin-top:84px; color:#aab7c9; font-size:10px; letter-spacing:.12em; }
.part-shape.batería { height:142px; border-radius:9px; background:#20293a; }.part-shape.batería i { width:50px; height:84px; border:2px solid #526078; border-radius:5px; background:linear-gradient(#66758c 0 15%,#1d2736 15%); }.part-shape.conector { width:155px; height:90px; border:0; border-radius:22px; background:#275d55; }.part-shape.conector::before { background:linear-gradient(90deg,#bd8f35 5%,#21463f 6% 94%,#bd8f35 95%); }.part-shape.conector i { width:45px; height:25px; border-radius:4px; background:#151d24; }.part-shape.cámara { width:134px; height:100px; border-radius:20px; background:#253044; }.part-shape.cámara::before { background:#323f54; }.part-shape.cámara i { width:61px; height:61px; }
.charge-shape { position:absolute; display:grid; place-items:center; left:50%; top:50%; width:108px; height:125px; border-radius:25px; transform:translate(-50%,-50%) rotate(7deg); background:linear-gradient(145deg,#fff,#d8e2ec); box-shadow:13px 20px 30px rgba(36,58,88,.2),inset -3px -3px 5px rgba(108,126,153,.15); }
.charge-shape i { position:absolute; top:-18px; width:22px; height:28px; border-radius:5px 5px 0 0; background:#c5ceda; }
.charge-shape b { color:var(--blue); font-size:40px; font-weight:400; }
.charge-shape.cable { width:126px; height:126px; border:7px solid #27364e; border-radius:50%; background:transparent; box-shadow:9px 16px 24px rgba(24,42,69,.2); }.charge-shape.cable i { top:70px; right:-20px; width:28px; height:52px; border-radius:7px; background:#27364e; transform:rotate(-15deg); }.charge-shape.cable b { color:#fff; font-size:22px; }
.razor-shape { position:absolute; left:50%; top:52%; width:42px; height:152px; border-radius:10px 10px 18px 18px; transform:translate(-50%,-50%) rotate(13deg); background:linear-gradient(90deg,#174ea5,#3f86ef 50%,#0d418f); box-shadow:13px 18px 28px rgba(24,55,101,.25); }.razor-shape::before { content:""; position:absolute; left:50%; top:-31px; width:92px; height:47px; border:5px solid #204c8e; border-radius:10px 10px 16px 16px; transform:translateX(-50%); background:repeating-linear-gradient(0deg,#dce4ec 0 5px,#8d9cac 5px 8px); box-shadow:0 5px 8px rgba(31,55,87,.2); }.razor-shape::after { content:""; position:absolute; left:50%; top:28px; width:23px; height:5px; border-radius:6px; background:#a9d740; transform:translateX(-50%); }.razor-shape i { position:absolute; left:50%; bottom:15px; width:14px; height:52px; border:2px solid rgba(255,255,255,.35); border-radius:8px; transform:translateX(-50%); }
.product-visual.large { min-height:480px; border-radius:20px; }
.product-visual.large .case-shape { width:160px; height:280px; border-width:7px; border-radius:42px; }.product-visual.large .camera-cut { width:58px; height:65px; border-radius:18px; }.product-visual.large .magsafe-ring { width:94px; height:94px; border-width:7px; }.product-visual.large .glass-shape { width:145px; height:265px; border-radius:35px; }.product-visual.large .part-shape { transform:translate(-50%,-50%) rotate(5deg) scale(1.45); }.product-visual.large .charge-shape { transform:translate(-50%,-50%) rotate(7deg) scale(1.45); }.product-visual.large .razor-shape { transform:translate(-50%,-50%) rotate(13deg) scale(1.5); }
.product-info { padding:17px; }
.product-meta { color:#718096; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.product-info h3 { min-height:42px; margin:6px 0 6px; font-size:15px; line-height:1.35; }
.rating { display:flex; align-items:center; gap:4px; color:#334056; font-size:11px; font-weight:700; }
.rating > span { color:#f5b926; }.rating small { color:#8b95a5; font-weight:500; }
.product-bottom { display:flex; align-items:end; justify-content:space-between; margin-top:16px; }
.price { display:flex; align-items:baseline; gap:7px; }.price strong { font-size:19px; }.price del { color:#96a0af; font-size:11px; }
.add-button { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:10px; background:#101a2d; color:white; cursor:pointer; transition:.2s; }.add-button:hover,.add-button.added { background:var(--blue); transform:scale(1.08); }.add-button span { font-size:19px; }
.empty-state { padding:90px 20px; text-align:center; border:1px dashed #d8dee7; border-radius:18px; }.empty-state > span { display:block; color:#9aa5b5; font-size:48px; }.empty-state h3 { margin:12px 0 5px; }.empty-state p { margin:0 0 22px; color:var(--muted); }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); max-width:1320px; margin:0 auto 90px; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.benefits article { display:flex; align-items:center; gap:15px; padding:28px; background:#f8fafc; }.benefits article+article { border-left:1px solid var(--line); }.benefits article > span { display:grid; place-items:center; flex:0 0 auto; width:43px; height:43px; border-radius:12px; background:#e8f0ff; color:var(--blue); font-size:20px; font-weight:800; }.benefits strong { font-size:14px; }.benefits p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
footer { display:flex; align-items:center; justify-content:space-between; padding:34px max(5vw,32px); border-top:1px solid var(--line); color:#7b8798; font-size:11px; }.footer-brand { color:var(--ink); }
dialog { padding:0; border:0; outline:none; color:var(--ink); }.product-dialog { width:min(950px,calc(100% - 32px)); border-radius:24px; box-shadow:var(--shadow); }.product-dialog::backdrop,.checkout-dialog::backdrop,.success-dialog::backdrop { background:rgba(9,16,29,.62); backdrop-filter:blur(7px); }.dialog-close { position:absolute; z-index:6; top:16px; right:16px; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 5px 16px rgba(21,32,50,.1); font-size:25px; cursor:pointer; }
.product-detail { display:grid; grid-template-columns:1.03fr .97fr; gap:0; padding:20px; }.detail-copy { align-self:center; padding:30px 38px; }.detail-copy h2 { margin:10px 0 10px; font-size:38px; line-height:1.05; letter-spacing:-.045em; }.detail-copy > p { margin:20px 0; color:var(--muted); line-height:1.7; font-size:14px; }.compatibility { display:flex; flex-direction:column; gap:4px; padding:13px 15px; border:1px solid #dce7fb; border-radius:12px; background:#f4f8ff; }.compatibility span { color:#71809a; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }.compatibility strong { color:#1e4d9f; font-size:13px; }.detail-copy ul { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:20px 0; padding:0; list-style:none; color:#425069; font-size:12px; }.detail-copy li { display:flex; gap:7px; }.detail-copy li span { color:var(--blue); font-weight:900; }.detail-buy { display:flex; align-items:end; justify-content:space-between; margin-top:24px; }.detail-buy .price strong { font-size:28px; }.detail-buy > small { color:#5f6c80; }.detail-add { width:100%; margin-top:18px; }
.drawer-backdrop { position:fixed; z-index:50; inset:0; background:rgba(8,14,25,.5); backdrop-filter:blur(4px); }.cart-drawer { position:fixed; z-index:51; top:0; right:0; display:flex; flex-direction:column; width:min(440px,100%); height:100dvh; padding:27px; background:#fff; box-shadow:-30px 0 70px rgba(14,28,51,.17); transform:translateX(105%); transition:transform .28s ease; }.cart-drawer.open { transform:none; }.drawer-header { display:flex; align-items:start; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid var(--line); }.drawer-header h2 { margin:8px 0 0; font-size:32px; letter-spacing:-.04em; }.drawer-header button { border:0; background:none; font-size:29px; cursor:pointer; }.cart-items { overflow:auto; }.cart-row { display:grid; grid-template-columns:82px 1fr; gap:13px; padding:17px 0; border-bottom:1px solid var(--line); }.cart-row .product-visual { width:82px; height:92px; border-radius:11px; }.cart-row .case-shape { transform:translate(-50%,-50%) rotate(8deg) scale(.42); }.cart-row .glass-shape { transform:translate(-50%,-50%) rotate(-7deg) scale(.48); }.cart-row .part-shape { transform:translate(-50%,-50%) rotate(5deg) scale(.45); }.cart-row .charge-shape { transform:translate(-50%,-50%) rotate(7deg) scale(.45); }.cart-row .razor-shape { transform:translate(-50%,-50%) rotate(13deg) scale(.48); }.cart-row > div { min-width:0; display:flex; flex-direction:column; }.cart-row > div > span { color:#7b8696; font-size:9px; text-transform:uppercase; }.cart-row > div > strong { margin-top:4px; font-size:13px; }.cart-line { display:flex; align-items:end; justify-content:space-between; margin-top:auto; }.quantity { display:flex; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:8px; }.quantity button { width:27px; height:25px; border:0; background:#f7f8fa; cursor:pointer; }.quantity b { min-width:25px; text-align:center; font-size:11px; }.cart-line > strong { font-size:13px; }.cart-empty { margin:auto; text-align:center; }.cart-empty > span { display:block; font-size:40px; }.cart-empty h3 { margin:13px 0 6px; }.cart-empty p { color:var(--muted); font-size:13px; }.cart-empty .button { margin-top:10px; }.cart-summary { margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }.cart-summary > div { display:flex; justify-content:space-between; margin-bottom:9px; color:#647086; font-size:13px; }.cart-summary .cart-total { margin:15px 0 7px; padding-top:15px; border-top:1px solid var(--line); color:var(--ink); font-size:17px; }.cart-summary > small { color:#8b95a4; font-size:10px; }.checkout-button { width:100%; margin-top:18px; }
.checkout-dialog { width:min(1020px,calc(100% - 32px)); max-height:calc(100dvh - 32px); border-radius:24px; box-shadow:var(--shadow); }.checkout-layout { display:grid; grid-template-columns:1fr 330px; }.checkout-main { padding:42px 48px; overflow:auto; }.checkout-main > h2 { margin:9px 0 18px; font-size:37px; letter-spacing:-.045em; }.demo-notice { display:flex; flex-direction:column; gap:2px; margin-bottom:25px; padding:12px 14px; border-radius:10px; background:#fff6dc; color:#725514; font-size:11px; }.demo-notice strong { font-size:12px; }.checkout-main fieldset { margin:0 0 23px; padding:0; border:0; }.checkout-main legend { margin-bottom:14px; font-weight:800; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-grid .full { grid-column:1/-1; }.form-grid label > span { display:block; margin-bottom:6px; color:#596579; font-size:10px; font-weight:750; }.form-grid input { width:100%; height:44px; padding:0 12px; border:1px solid #dfe4eb; border-radius:9px; outline:none; font-size:13px; }.form-grid input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(19,103,255,.08); }.payment-choice { display:flex; justify-content:space-between; margin-bottom:12px; padding:12px; border:1px solid var(--blue); border-radius:10px; background:#f5f8ff; color:#2054a9; font-size:12px; font-weight:800; }.payment-choice small { color:#6d7890; font-weight:600; }.form-error { min-height:18px; margin:0; color:#cf3848; font-size:11px; }.checkout-submit { width:100%; justify-content:space-between; }.checkout-order { padding:42px 30px; background:#f6f8fb; }.checkout-order h3 { margin:0 0 23px; }.checkout-row { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid #e1e5eb; font-size:11px; }.checkout-row span { display:flex; flex-direction:column; gap:3px; }.checkout-row small { color:#8993a2; }.checkout-row strong { flex:0 0 auto; }.checkout-total { display:flex; justify-content:space-between; margin-top:20px; font-size:16px; }
.success-dialog { width:min(430px,calc(100% - 32px)); padding:46px; border-radius:24px; text-align:center; box-shadow:var(--shadow); }.success-icon { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 25px; border-radius:50%; background:#e8f7e9; color:#2d9b48; font-size:28px; }.success-dialog h2 { margin:10px 0 7px; font-size:38px; }.success-dialog p { margin:0 0 15px; color:var(--muted); }.success-dialog > strong { display:block; margin-bottom:25px; color:var(--blue); }.success-dialog .button { width:100%; }
.toast { position:fixed; z-index:80; left:50%; bottom:25px; padding:12px 18px; border-radius:10px; background:#101a2d; color:white; box-shadow:0 12px 30px rgba(15,25,45,.25); font-size:12px; font-weight:700; opacity:0; transform:translate(-50%,20px); pointer-events:none; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1080px) { .hero { grid-template-columns:1fr 420px; }.hero-art { margin-left:0; }.hero-phone { width:220px; height:430px; }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:800px) { .site-header { grid-template-columns:1fr auto; padding:0 18px; }.main-nav { display:none; }.cart-button span:not(.cart-count) { display:none; }.hero { grid-template-columns:1fr; padding:60px 22px 35px; }.hero h1 { font-size:clamp(50px,15vw,70px); }.hero-copy > p { font-size:16px; }.hero-art { min-height:470px; margin-top:28px; }.hero-phone { width:205px; height:395px; }.glass-card { left:1%; }.case-card { right:0; }.catalog-section { padding:72px 18px 60px; }.section-heading { align-items:start; flex-direction:column; gap:15px; }.section-heading h2 { font-size:38px; }.catalog-layout { grid-template-columns:1fr; }.filters { position:fixed; z-index:70; inset:auto 0 0; top:10%; padding:26px 22px; border-radius:23px 23px 0 0; box-shadow:0 -20px 60px rgba(14,25,44,.2); transform:translateY(110%); transition:.25s; }.filters::before { content:""; position:fixed; z-index:-1; inset:-100vh 0 0; background:rgba(10,17,29,.45); opacity:0; pointer-events:none; transition:.2s; }.filters.mobile-open { transform:none; }.filters.mobile-open::before { opacity:1; }.mobile-filter-close { display:block; width:100%; height:48px; border:0; border-radius:11px; background:var(--blue); color:white; font-weight:800; }.filter-toggle { display:inline-flex; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:white; font-size:11px; font-weight:700; }.benefits { grid-template-columns:1fr; margin:0 18px 60px; }.benefits article+article { border-top:1px solid var(--line); border-left:0; } footer { flex-direction:column; gap:17px; text-align:center; }.product-detail { grid-template-columns:1fr; padding:12px; }.product-visual.large { min-height:330px; }.detail-copy { padding:25px 18px 22px; }.detail-copy h2 { font-size:30px; }.checkout-layout { grid-template-columns:1fr; }.checkout-main { padding:35px 23px; }.checkout-order { padding:28px 23px; }.checkout-dialog { overflow:auto; }.dialog-close { position:fixed; } }
@media (max-width:520px) { .hero-actions { align-items:stretch; flex-direction:column; }.hero-actions .button { width:100%; }.hero-proof { gap:16px; }.floating-card { padding:10px; }.case-card { bottom:12%; }.rating-pill { bottom:2%; }.product-grid { grid-template-columns:1fr; }.product-media { height:250px; }.catalog-toolbar { align-items:start; }.sort-control { font-size:0; }.sort-control select { font-size:11px; }.product-dialog { max-height:calc(100dvh - 20px); overflow:auto; }.detail-copy ul { grid-template-columns:1fr; }.form-grid { grid-template-columns:1fr; }.form-grid .full { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }