/* ========================================== FarmaPlus Design System — farmaplus24.ru Unified CSS (extracted from ГЛАВНАЯ.html) ========================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --c1:#0C1F33;--c2:#132E4A;--c3:#1B3D61;--c4:#2A5580;--c5:#3A6FA0; --c1l:#E8F1F8;--c1ll:#F2F7FB; --g6:#059652;--g5:#00B462;--g4:#2DD47A;--g1:#E6F9EE;--g0:#F0FBF4; --n9:#111827;--n7:#374151;--n5:#6B7280;--n4:#9CA3AF;--n3:#D1D5DB; --n2:#E5E7EB;--n1:#F3F4F6;--n0:#F9FAFB;--w:#fff; --fd:'Lora',Georgia,serif;--fb:'Commissioner',system-ui,sans-serif; --r1:6px;--r2:8px;--r3:12px;--r4:16px;--r5:20px;--rf:9999px; --s1:0 2px 6px rgba(0,0,0,.05);--s2:0 4px 14px rgba(0,0,0,.08); --s3:0 8px 24px rgba(0,0,0,.1);--s4:0 16px 40px rgba(0,0,0,.13); --sg:0 4px 16px rgba(0,180,98,.28); --e:cubic-bezier(.22,.61,.36,1);--d:.2s; } html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} body{font-family:var(--fb);color:var(--n9);background:var(--w);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-tap-highlight-color:transparent;padding-bottom:88px} a{text-decoration:none;color:inherit} button{cursor:pointer;border:none;font-family:inherit;background:none;-webkit-appearance:none} img{max-width:100%;display:block} .p{padding:0 16px} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} /* ═══ BOTTOM TAB BAR ═══ */ .btm{position:fixed;bottom:8px;left:8px;right:8px;z-index:200;background:var(--w);border-radius:20px;display:flex;align-items:stretch;padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -2px 20px rgba(0,0,0,.06),0 4px 24px rgba(0,0,0,.1),0 0 40px rgba(0,0,0,.04)} .bt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:8px 0 10px;min-height:62px;color:var(--n4);transition:color var(--d);position:relative}.bt svg{flex-shrink:0;width:24px;height:24px;display:block} .bt.on{color:var(--g6)} .bt:active{background:rgba(0,0,0,.02);border-radius:16px} .bt svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .bt.on svg{stroke-width:2.2} .bt-l{font-size:11px;font-weight:600;letter-spacing:.01em} .bt .bb{position:absolute;top:5px;right:50%;margin-right:-20px;min-width:17px;height:17px;padding:0 5px;background:var(--g5);color:var(--w);border-radius:var(--rf);font-size:10px;font-weight:700;display:grid;place-items:center;pointer-events:none} .bt.bt-msg{position:relative;justify-content:flex-end;overflow:visible} .bt-msg-ava{width:52px;height:52px;border-radius:50%;overflow:hidden;margin-top:-22px;margin-bottom:1px;box-shadow:0 4px 16px rgba(5,150,82,.25),0 0 0 3px var(--w);position:relative;transition:all .3s ease-out;flex-shrink:0} .bt-msg:hover .bt-msg-ava{box-shadow:0 0 14px rgba(0,180,98,.4),0 0 28px rgba(0,180,98,.15),0 0 0 3px var(--w)} .bt-msg-ava::after{content:'';position:absolute;bottom:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--g5);border:2px solid var(--w)} .bt-msg-ava img{width:100%;height:100%;object-fit:cover;object-position:center 10%} .bt.bt-msg .bt-l{color:var(--g6);margin-top:2px;font-size:10px;white-space:nowrap} .msg-pop{position:fixed;bottom:86px;left:50%;transform:translateX(-50%);z-index:210;background:var(--w);border-radius:var(--r3);box-shadow:var(--s4);padding:6px;min-width:220px;display:none} .msg-pop.show{display:block;animation:rise .2s var(--e)} .msg-pop::after{content:'';position:absolute;bottom:-6px;left:50%;margin-left:-6px;width:12px;height:12px;background:var(--w);transform:rotate(45deg);box-shadow:2px 2px 4px rgba(0,0,0,.06)} .msg-i{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r1);font-size:15px;font-weight:600;color:var(--n7);width:100%;text-align:left;min-height:48px} .msg-i:active{background:var(--n0)} .msg-i .mi-ico{width:24px;height:24px;flex-shrink:0} /* ═══ HEADER ═══ */ .hdr{position:-webkit-sticky;position:sticky;top:-56px;z-index:300;background:var(--w);display:flex;flex-direction:column;height:auto} .hdr-r1{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--w);min-height:56px;flex-wrap:wrap} .hdr-srch{width:100%;order:10;margin-top:2px;padding:14px 16px 10px;background:var(--w);position:relative}.hdr-srch::after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:20px;background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 100%);pointer-events:none;z-index:1} .logo{display:flex;align-items:center;gap:6px;flex-shrink:0} .city-b{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--rf);background:var(--c1ll);color:var(--c4);font-size:12px;font-weight:600;flex-shrink:0;order:0} .city-b svg{width:13px;height:13px} .hdr-phone{display:flex;align-items:center;gap:3px;font-weight:700;font-size:11px;color:var(--c2);flex-shrink:0;order:0;margin-left:auto} .hdr-phone .dot{width:7px;height:7px;border-radius:50%;background:var(--g5)} .hdr-r2-wrap{position:-webkit-sticky;position:sticky;top:0;z-index:301;background:var(--w);border-bottom:1px solid var(--n2)} .logo-ico{width:40px;height:40px;flex-shrink:0} .logo-txt{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap} .logo-name{font-weight:900;font-size:17px;color:var(--c2);letter-spacing:.5px} .logo-name b{color:var(--g5)} .logo-sub{font-size:9px;font-weight:700;color:var(--g6);letter-spacing:2.5px;text-transform:uppercase} .hdr-r2{padding:0 16px 10px} .srch{position:relative;z-index:200} .srch input{width:100%;height:50px;padding:0 96px 0 18px;border:2px solid var(--g5);border-radius:var(--r3);font-size:16px;font-family:var(--fb);color:var(--n9);background:var(--w);transition:border-color .2s,box-shadow .4s ease-out,border-radius .15s;box-shadow:0 2px 12px rgba(0,180,98,.12),0 1px 4px rgba(0,0,0,.06)} .srch input::placeholder{color:var(--n5);font-size:14px;font-weight:500} .srch input:focus{outline:none;border-color:var(--g6);background:var(--w);box-shadow:0 0 0 4px rgba(0,180,98,.18),0 0 16px rgba(0,180,98,.12)} /* ── When dropdown is open: single green card ── */ .srch.has-dd input{border-radius:var(--r3) var(--r3) 0 0;border-bottom-color:transparent;box-shadow:0 0 0 4px rgba(0,180,98,.18),0 0 16px rgba(0,180,98,.12)} .srch.has-dd .srch-dd{border-radius:0 0 var(--r3) var(--r3);border-top:1px solid var(--n2);margin-top:-2px} .srch-hint{padding:6px 18px 0;display:flex;gap:6px;flex-wrap:wrap;align-items:center} .srch-hint span{font-size:11px;color:var(--n4);font-weight:500} .srch-hint a{font-size:11px;color:var(--c5);font-weight:600;text-decoration:underline;text-decoration-color:rgba(42,85,128,.2);text-underline-offset:2px} .srch-mic{position:absolute;right:50px;top:5px;width:40px;height:40px;background:none;color:var(--n4);border-radius:var(--r2);display:grid;place-items:center;transition:all .3s ease-out;cursor:pointer;border:none} .srch-mic svg{width:18px;height:18px} .srch-mic:hover{color:var(--g5);background:rgba(0,180,98,.06);box-shadow:0 0 10px rgba(0,180,98,.12)} .srch-mic.recording{color:#EF4444;animation:mic-pulse 1s ease infinite} .srch-mic.recording svg{fill:#EF4444;fill-opacity:.15} .srch-mic::after{content:'Голосовой поиск';position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);background:var(--c2);color:var(--w);font-size:11px;font-weight:600;font-family:var(--fb);padding:4px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s} .srch-mic:hover::after{opacity:1} @keyframes mic-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} .srch-b{position:absolute;right:5px;top:5px;width:40px;height:40px;background:var(--g5);color:var(--w);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:0 2px 6px rgba(0,180,98,.25);transition:all .3s ease-out} .srch-b-text{display:none} .srch-b:hover{background:var(--g6);box-shadow:0 0 12px rgba(0,180,98,.35),0 0 24px rgba(0,180,98,.12)} .srch-b:active{background:var(--g6);transform:scale(.95)} .srch-b svg{width:19px;height:19px} /* ═══ SEARCH SUGGESTIONS DROPDOWN ═══ */ .srch-dd{position:absolute;top:100%;left:0;right:0;background:var(--w);border:2px solid var(--g5);border-top:none;border-radius:0 0 var(--r3) var(--r3);box-shadow:0 0 0 4px rgba(0,180,98,.18),0 0 16px rgba(0,180,98,.12),0 8px 24px rgba(0,0,0,.08);z-index:200;max-height:420px;overflow-y:auto;display:none;animation:srch-dd-in .15s ease} .srch-dd.active{display:block} @keyframes srch-dd-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .srch-dd-head{padding:10px 16px 6px;font-size:11px;font-weight:700;color:var(--n4);text-transform:uppercase;letter-spacing:.5px} .srch-dd-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .12s} .srch-dd-item:hover,.srch-dd-item.active{background:var(--n0)} .srch-dd-item .srch-dd-ico{width:32px;height:32px;border-radius:var(--r1);background:var(--g0);display:grid;place-items:center;flex-shrink:0;overflow:hidden} .srch-dd-item .srch-dd-ico img{width:100%;height:100%;object-fit:contain} .srch-dd-item .srch-dd-ico svg{width:18px;height:18px;color:var(--n4)} .srch-dd-info{flex:1;min-width:0} .srch-dd-name{font-size:14px;font-weight:600;color:var(--n9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .srch-dd-name mark{background:none;color:var(--g6);font-weight:700} .srch-dd-sub{font-size:12px;color:var(--n5);margin-top:1px} .srch-dd-price{font-size:14px;font-weight:700;color:var(--g6);white-space:nowrap} .srch-dd-rx{display:inline-block;font-size:10px;font-weight:700;color:var(--warn);background:rgba(245,158,11,.1);padding:1px 5px;border-radius:4px;margin-left:6px} .srch-dd-cat{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .12s;border-top:1px solid var(--n1)} .srch-dd-cat:hover{background:var(--n0)} .srch-dd-cat svg{width:16px;height:16px;color:var(--n4);flex-shrink:0} .srch-dd-cat span{font-size:13px;color:var(--c4);font-weight:600} .srch-dd-all{display:block;text-align:center;padding:12px;font-size:13px;font-weight:700;color:var(--g6);border-top:1px solid var(--n2);cursor:pointer;transition:background .12s} .srch-dd-all:hover{background:var(--n0)} .srch-dd-empty{padding:24px 16px;text-align:center} .srch-dd-empty svg{width:40px;height:40px;color:var(--n3);margin-bottom:8px} .srch-dd-empty p{font-size:14px;color:var(--n5);margin:0} .srch-dd-empty small{font-size:12px;color:var(--n4);margin-top:4px;display:block} .srch-dd-loading{padding:20px 16px;text-align:center} .srch-dd-loading .srch-spinner{width:24px;height:24px;border:3px solid var(--n2);border-top-color:var(--g5);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto 8px} .srch-dd-loading p{font-size:13px;color:var(--n5);margin:0} @keyframes spin{to{transform:rotate(360deg)}} .srch-overlay{position:fixed;inset:0;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:199;display:none;transition:opacity .2s ease} .srch-overlay.active{display:block} /* duplicate .srch-dd removed — .open alias added for compatibility */ .srch-dd.open{display:block} .srch-dd-img{width:40px;height:40px;border-radius:var(--r2);background:var(--n0);display:grid;place-items:center;overflow:hidden;flex-shrink:0;border:1px solid var(--n1)} .srch-dd-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .srch-dd-img svg{width:18px;height:18px;color:var(--n3)} .srch-dd-meta{font-size:12px;color:var(--n4)} .srch-dd-oos{font-size:11px;color:#EF4444;font-weight:600} /* ═══ HERO ═══ */ .hero{background:var(--c1);position:relative;overflow:hidden;padding:24px 16px 20px} .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 30% 90%,rgba(0,180,98,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 10%,rgba(42,85,128,.12) 0%,transparent 60%),linear-gradient(180deg,var(--c1),var(--c2))} .hero-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:20px 20px} .hero-c{position:relative;z-index:2} .hero-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;background:rgba(0,180,98,.12);border:1px solid rgba(0,180,98,.2);border-radius:var(--rf);color:var(--g4);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:14px} .hero-tag .d{width:5px;height:5px;border-radius:50%;background:var(--g4)} .hero h1{font-family:var(--fd);font-size:30px;font-weight:700;color:var(--w);line-height:1.15;margin-bottom:12px} .hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--g4),var(--g5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-d{font-size:14px;color:rgba(255,255,255,.58);line-height:1.6;margin-bottom:20px} .hero-st{display:flex;gap:20px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.08)} .hs-v{font-size:26px;font-weight:800;color:var(--w);line-height:1;margin-bottom:2px;letter-spacing:-.5px} .hs-v span{color:var(--g4)} .hs-l{font-size:10px;color:rgba(255,255,255,.4);font-weight:500;line-height:1.3} .hero-b{display:flex;flex-direction:column;gap:10px} .hb1{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;background:var(--g5);color:var(--w);border-radius:var(--r2);font-weight:700;font-size:16px;box-shadow:var(--sg);min-height:52px;transition:all .3s ease-out;position:relative;overflow:hidden;cursor:pointer} .hb1::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:none} .hb1:hover{background:#00c96e;box-shadow:0 0 20px rgba(0,200,110,.55),0 0 50px rgba(0,200,110,.2),0 6px 20px rgba(0,180,98,.4);transform:translateY(-2px) scale(1.02)} .hb1:hover::before{left:120%;transition:left .7s ease} .hb1:active{background:var(--g6);transform:translateY(0) scale(.98);box-shadow:0 0 10px rgba(0,180,98,.4)} .hb1 svg{width:18px;height:18px} .hb2{display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:var(--w);border-radius:var(--r2);font-weight:600;font-size:15px;min-height:48px} /* Reviews carousel in hero */ .hero-rev{margin-top:24px;display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:0 16px} .hero-rev::-webkit-scrollbar{display:none} .hr{flex-shrink:0;width:280px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r4);padding:16px;scroll-snap-align:start} .hr-top{display:flex;align-items:center;gap:10px;margin-bottom:10px} .hr-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;color:var(--c2);flex-shrink:0;border:2px solid rgba(255,255,255,.15)} .hr-nm{font-size:13px;font-weight:700;color:var(--w)} .hr-city{font-size:10px;color:rgba(255,255,255,.4)} .hr-stars{margin-left:auto;font-size:12px;letter-spacing:1px;color:#F5B041;flex-shrink:0} .hr-text{font-size:13px;color:rgba(255,255,255,.75);line-height:1.5;font-style:italic} /* ═══ TRUST — pharmacist swipe cards ═══ */ .trust{background:var(--w);border-bottom:1px solid var(--n2);padding:18px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .trust::-webkit-scrollbar{display:none} .trust-in{display:flex;gap:12px;padding:0 16px;min-width:max-content;align-items:stretch} .trc{flex-shrink:0;width:230px;background:var(--w);border:1.5px solid transparent;border-radius:var(--r4);overflow:hidden;box-shadow:var(--s1);transition:transform .3s ease-out,box-shadow .4s ease-out,border-color .3s ease-out;display:flex;flex-direction:column;cursor:pointer} .trc:hover{border-color:rgba(0,180,98,.35);box-shadow:0 0 0 3px rgba(0,180,98,.08),0 0 16px rgba(0,180,98,.15),0 0 32px rgba(0,180,98,.06),0 8px 20px rgba(0,0,0,.06);transform:translateY(-3px)} .trc:active{transform:scale(.97);box-shadow:var(--s2)} .trc-photo{width:100%;height:150px;position:relative;overflow:hidden;flex-shrink:0} .trc-photo img{width:100%;height:100%;object-fit:cover;object-position:top center} .trc-photo::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%)} .trc-badge{position:absolute;top:8px;left:8px;z-index:2;padding:4px 10px;border-radius:var(--rf);font-size:10px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:inline-flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(0,0,0,.08)} .trc-badge svg{width:13px;height:13px;flex-shrink:0} .trc-badge.chief{background:rgba(255,255,255,.92);color:#0a8a4f;border:1.5px solid rgba(0,180,98,.35)} .trc-badge.exp{background:rgba(255,255,255,.92);color:#1a3a5c;border:1.5px solid rgba(19,46,74,.2)} .trc-badge.prov{background:rgba(255,255,255,.92);color:#6d28d9;border:1.5px solid rgba(109,40,217,.2)} .trc-online{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--rf);background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:10px;font-weight:700;color:#0a8a4f;box-shadow:0 2px 8px rgba(0,0,0,.08);border:1.5px solid rgba(0,180,98,.25)} .trc-online::before{content:'';width:7px;height:7px;border-radius:50%;background:#00b462;animation:trc-pulse 2s infinite;box-shadow:0 0 6px rgba(0,180,98,.5)} .trc-offline{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--rf);background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:10px;font-weight:700;color:#c62828;box-shadow:0 2px 8px rgba(0,0,0,.08);border:1.5px solid rgba(229,57,53,.2)} .trc-offline::before{content:'';width:7px;height:7px;border-radius:50%;background:#E53935;animation:trc-pulse 2s infinite;box-shadow:0 0 6px rgba(229,57,53,.4)} @keyframes trc-pulse{0%,100%{opacity:1}50%{opacity:.4}} .trc-content{padding:0 14px 14px;position:relative;margin-top:-8px;z-index:2;flex:1;display:flex;flex-direction:column} .trc-nm{font-size:15px;font-weight:800;color:var(--c2);line-height:1.2;margin-bottom:1px} .trc-role{font-size:10px;color:var(--n4);font-weight:600;margin-bottom:8px} .trc-offer{padding:10px;background:linear-gradient(135deg,var(--c1ll),#e8f5ee);border-radius:var(--r2);margin-bottom:10px;border-left:3px solid var(--g5)} .trc-offer-title{font-size:12px;font-weight:800;color:var(--c2);line-height:1.25;margin-bottom:4px} .trc-offer-desc{font-size:11px;color:var(--n5);line-height:1.4} .trc-stats{display:flex;gap:6px;margin-bottom:10px} .trc-stat-mini{flex:1;text-align:center;padding:6px 4px;background:var(--n0);border-radius:var(--r1)} .trc-stat-mini-v{font-size:14px;font-weight:800;color:var(--g6);line-height:1} .trc-stat-mini-l{font-size:8px;color:var(--n4);font-weight:600;line-height:1.2;margin-top:2px} .trc-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border-radius:var(--r2);background:var(--g5);color:var(--w);font-size:12px;font-weight:700;border:none;cursor:pointer;transition:all .2s ease;margin-top:auto} .trc-btn:hover{background:var(--g6);box-shadow:0 4px 12px rgba(0,180,98,.35);transform:translateY(-1px)} .trc-btn:active{background:var(--g6);transform:translateY(0)} .trc-btn svg{width:14px;height:14px} /* ═══ SECTIONS ═══ */ .sec{padding:36px 0} .sec-h{padding:0 16px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:flex-end} .sec-t{font-family:var(--fd);font-size:22px;font-weight:700;color:var(--c1)} .sec-s{font-size:13px;color:var(--n5);margin-top:2px} .sec-a{font-size:13px;font-weight:600;color:var(--c5);display:flex;align-items:center;gap:4px;flex-shrink:0} .sec-a svg{width:14px;height:14px} .bg{background:var(--n0)} /* ═══ SITUATIONS (replaces catalog) ═══ */ .sit-grid{display:flex;gap:0;padding:12px 16px 16px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory} .sit-grid::-webkit-scrollbar{display:none} .sit-wrap{flex-shrink:0;padding:6px 5px;scroll-snap-align:start} .sit{width:155px;height:210px;border-radius:var(--r3);padding:0;position:relative;overflow:hidden;text-decoration:none;color:inherit;transition:transform .7s cubic-bezier(.22,.61,.36,1),box-shadow .7s cubic-bezier(.22,.61,.36,1);display:block} .sit-wrap.snap-active .sit{transform:translateY(-7px);box-shadow:0 16px 32px rgba(0,0,0,.15),0 0 24px rgba(39,174,96,.25),0 0 48px rgba(39,174,96,.1)} .sit:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(39,174,96,.4),0 0 20px rgba(39,174,96,.25);outline:2px solid rgba(39,174,96,.85)} .sit:hover .sit-photo{filter:brightness(1.08)} .sit:active{transform:scale(.97)} .sit-photo-wrap{position:absolute;inset:0} .sit-photo{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:filter .2s ease} .sit-photo-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,26,.88) 0%,rgba(8,14,26,.55) 30%,rgba(8,14,26,.1) 55%,transparent 100%)} .sit-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 10px 12px} .sit-title{font-size:11.5px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:3px} .sit-desc{font-size:9px;color:rgba(255,255,255,.75);line-height:1.35} .sit-tag{display:inline-block;font-size:7.5px;font-weight:700;padding:3px 7px;border-radius:var(--rf);margin-top:5px;align-self:flex-start} .sit.v1 .sit-tag{background:rgba(231,76,60,.25);color:#FF8A80;border:1px solid rgba(231,76,60,.35)} .sit.v2 .sit-tag{background:rgba(52,152,219,.25);color:#82CFFF;border:1px solid rgba(52,152,219,.35)} .sit.v3 .sit-tag{background:rgba(39,174,96,.25);color:#80E5A8;border:1px solid rgba(39,174,96,.35)} .sit.v4 .sit-tag{background:rgba(142,68,173,.25);color:#CE93D8;border:1px solid rgba(142,68,173,.35)} .sit.v5 .sit-tag{background:rgba(230,126,34,.25);color:#FFCC80;border:1px solid rgba(230,126,34,.35)} .sit.v6 .sit-tag{background:rgba(41,128,185,.25);color:#90CAF9;border:1px solid rgba(41,128,185,.35)} .sit.v7 .sit-tag{background:rgba(232,145,154,.25);color:#FFABAB;border:1px solid rgba(232,145,154,.35)} .sit.vcat{background:var(--w);border:1.5px dashed var(--n3);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 12px} .sit.vcat .sit-ico{width:48px;height:48px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--n1);margin:0 auto 10px} .sit.vcat .sit-title{color:var(--c5);font-size:12px} .sit.vcat .sit-desc{color:var(--n5);font-size:9.5px;display:block} /* ═══ OLD CATEGORIES (kept for catalog link) ═══ */ .cg{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px} .cc{background:var(--w);border:1px solid var(--n2);border-radius:var(--r3);padding:0;text-align:left;min-height:auto;display:flex;align-items:center;gap:10px;overflow:hidden;transition:all .15s ease} .cc:active{background:var(--n0);border-color:var(--g5);transform:scale(.97)} .cc-bar{width:4px;align-self:stretch;flex-shrink:0;border-radius:var(--r3) 0 0 var(--r3)} .cc:nth-child(2) .cc-bar{background:linear-gradient(180deg,#7C3AED,#A78BFA)} .cc:nth-child(3) .cc-bar{background:linear-gradient(180deg,#059669,#34D399)} .cc:nth-child(4) .cc-bar{background:linear-gradient(180deg,#DC2626,#F87171)} .cc:nth-child(5) .cc-bar{background:linear-gradient(180deg,#2563EB,#60A5FA)} .cc:nth-child(6) .cc-bar{background:linear-gradient(180deg,#D97706,#FCD34D)} .cc:nth-child(7) .cc-bar{background:linear-gradient(180deg,#EC4899,#F9A8D4)} .cc:nth-child(8) .cc-bar{background:linear-gradient(180deg,var(--n5),var(--n3))} .cc-body{padding:12px 12px 12px 0;display:flex;align-items:center;gap:10px;flex:1;min-width:0} .cc-i{font-size:22px;flex-shrink:0;width:36px;height:36px;border-radius:var(--r2);display:grid;place-items:center} .cc:nth-child(2) .cc-i{background:rgba(124,58,237,.08)} .cc:nth-child(3) .cc-i{background:rgba(5,150,105,.08)} .cc:nth-child(4) .cc-i{background:rgba(220,38,38,.08)} .cc:nth-child(5) .cc-i{background:rgba(37,99,235,.08)} .cc:nth-child(6) .cc-i{background:rgba(217,119,6,.08)} .cc:nth-child(7) .cc-i{background:rgba(236,72,153,.08)} .cc:nth-child(8) .cc-i{background:var(--n1)} .cc-info{flex:1;min-width:0} .cc-n{font-weight:700;font-size:12px;color:var(--n9);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cc-t{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--rf);background:var(--g0);color:var(--g6);margin-top:2px} /* Featured full-width card */ .cc.f{grid-column:span 2;background:linear-gradient(135deg,var(--c2),var(--c3));border-color:transparent;padding:14px 16px;display:flex;align-items:center;gap:12px;color:var(--w);border-radius:var(--r3)} .cc.f .cc-bar{display:none} .cc.f .cc-body{padding:0} .cc.f .cc-i{font-size:26px;width:42px;height:42px;background:rgba(255,255,255,.1);border-radius:var(--r2)} .cc.f .cc-n{color:var(--w);font-size:13px;white-space:normal} .cc.f .cc-t{background:rgba(0,180,98,.15);color:var(--g4)} /* ═══ PRODUCTS ═══ */ .ps{display:flex;gap:10px;padding:10px 16px 14px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth} .ps-wrap{position:relative;overflow:visible} .ps-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 8px rgba(0,0,0,.06);display:grid;place-items:center;cursor:pointer;color:var(--n4);transition:all .2s;opacity:.5} .ps-arr:hover{background:var(--g5);color:var(--w);border-color:var(--g5);box-shadow:0 2px 12px rgba(0,180,98,.3);opacity:1} .ps-arr-l{left:4px} .ps-arr-r{right:4px} @media(max-width:767px){.ps-arr{display:none}} .ps::-webkit-scrollbar{display:none} .pc{flex-shrink:0;width:135px;background:var(--w);border:1px solid var(--n2);border-radius:var(--r3);padding:10px;scroll-snap-align:start;display:flex;flex-direction:column;transition:box-shadow .2s ease,border-color .2s ease;margin:6px 0} .pc:hover{box-shadow:0 8px 24px rgba(39,174,96,.25),0 0 0 2px rgba(39,174,96,.7);border-color:rgba(39,174,96,.7)} .pc-img{width:100%;height:100px;background:var(--w);border-radius:var(--r1);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:6px;overflow:hidden;padding:6px} .pc-img img{max-width:100%;max-height:100%;object-fit:contain} .pc-img svg{flex-shrink:0} .pc-nm{font-size:12px;font-weight:500;color:var(--n7);line-height:1.35;margin-bottom:4px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pc-av{font-size:10px;color:var(--g6);font-weight:600;margin-bottom:8px} .pc-pr{font-size:14px;font-weight:800;color:var(--c2);margin-bottom:6px} .pc-pr small{font-size:10px;font-weight:500;color:var(--n4)} .pc-bt{width:100%;height:36px;background:var(--g5);color:var(--w);border-radius:var(--r1);font-weight:700;font-size:12px;display:grid;place-items:center;transition:all .2s ease;cursor:pointer} .pc-bt:hover{background:var(--g6);box-shadow:0 0 12px rgba(0,180,98,.3)} .pc-bt:active{transform:scale(.97)} .pc-cart-row{width:100%;height:36px;display:flex;align-items:center;gap:4px;border-radius:18px;overflow:hidden} .pc-cart-go{flex:0 0 36px;height:100%;display:flex;align-items:center;justify-content:center;background:var(--g5);color:var(--w);border-radius:18px;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s} .pc-cart-go:hover{background:var(--g6);box-shadow:0 0 12px rgba(0,180,98,.3)} .pc-cart-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0} .pc-qty{display:flex;align-items:center;height:100%;border:1.5px solid var(--n2);border-radius:18px;overflow:hidden;flex-shrink:0} .pc-qty button{width:28px;height:100%;display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--c4);background:none;border:none;cursor:pointer;transition:background .15s} .pc-qty button:hover{background:var(--n1)} .pc-qty button:active{background:var(--n2)} .pc-qty span{min-width:20px;text-align:center;font-size:13px;font-weight:700;color:var(--c2)} .pc.sp{border-color:var(--g5);border-width:1.5px;position:relative} .pc.sp::after{content:'Совет фармацевта';position:absolute;top:0;left:0;right:0;padding:3px 0;text-align:center;font-size:8px;font-weight:700;color:var(--w);background:var(--g5);border-radius:var(--r3) var(--r3) 0 0;text-transform:uppercase;letter-spacing:.04em} .pc.sp .pc-img{margin-top:14px} /* ═══ CTA ═══ */ .cta-w{padding:0 16px} .cta{border-radius:var(--r5);overflow:hidden;border:1px solid var(--n2);background:var(--w)} .cta-t{background:linear-gradient(160deg,#EDF4ED,#E5EFF8,#EDE9F3);padding:24px 20px;position:relative;overflow:hidden} .cta-pills{display:flex;gap:8px;justify-content:center;margin-bottom:16px;position:relative;z-index:2} .cta-pill{width:60px;height:72px;border-radius:var(--r3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 12px rgba(0,0,0,.08);position:relative;overflow:hidden} .cta-pill:nth-child(1){background:linear-gradient(135deg,#E6F9EE,#b2edcc);animation:floatY 3s ease-in-out infinite} .cta-pill:nth-child(2){background:linear-gradient(135deg,#E8F1F8,#c5dcf0);animation:floatY 3s ease-in-out .4s infinite} .cta-pill:nth-child(3){background:linear-gradient(135deg,#FFF4E6,#fde2b5);animation:floatY 3s ease-in-out .8s infinite} .cta-pill:nth-child(4){background:linear-gradient(135deg,#EDE9F3,#d4c7e8);animation:floatY 3s ease-in-out 1.2s infinite} .cta-pill:nth-child(5){background:linear-gradient(135deg,#FEE2E2,#fca5a5);animation:floatY 3s ease-in-out 1.6s infinite} .cta-pill-ico{font-size:24px;display:flex;align-items:center;justify-content:center} .cta-pill-nm{font-size:7px;font-weight:700;color:var(--n7);text-align:center;line-height:1.1;padding:0 2px} .cta-t h2{font-family:var(--fd);font-size:24px;font-weight:700;color:var(--c1);line-height:1.2;margin-bottom:10px} .cta-t h2 b{color:var(--g5)} .cta-t>p{font-size:14px;color:var(--n7);line-height:1.6;margin-bottom:16px} .cta-fs{display:flex;flex-direction:column;gap:10px} .cta-f{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--n7)} .cta-f .fi{width:34px;height:34px;background:var(--w);border-radius:var(--r2);display:grid;place-items:center;font-size:15px;flex-shrink:0;box-shadow:var(--s1)} .cta-f strong{color:var(--c2)} .cta-fm{padding:20px} .cta-fm h3{font-size:17px;font-weight:700;color:var(--c2);margin-bottom:16px;text-align:center} .fg{margin-bottom:12px} .fg label{display:block;font-size:11px;font-weight:600;color:var(--n5);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em} .fg input,.fg textarea{width:100%;padding:13px 16px;border:1.5px solid var(--n2);border-radius:var(--r2);font-size:16px;font-family:var(--fb);color:var(--n9);background:var(--n0);-webkit-appearance:none} .fg input:focus,.fg textarea:focus{outline:none;border-color:var(--g5);background:var(--w);box-shadow:0 0 0 3px var(--g1)} .fg textarea{resize:vertical;min-height:56px} .cm{display:flex;gap:6px;margin-bottom:14px} .cm button{flex:1;padding:10px 6px;border:1.5px solid var(--n2);border-radius:var(--r2);font-size:12px;font-weight:600;color:var(--n5);display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;transition:all var(--d)} .cm button.on{background:var(--c2);color:var(--w);border-color:var(--c2)} .cm button svg{width:20px;height:20px} .cm button.on svg{fill:var(--w);stroke:var(--w)} .bt-s{width:100%;padding:16px;background:var(--g5);color:var(--w);border-radius:var(--r2);font-weight:700;font-size:16px;box-shadow:var(--sg);min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px} .bt-s:active{background:var(--g6)} .fn{text-align:center;font-size:12px;color:var(--n4);margin-top:10px} /* ═══ HOW WE WORK ═══ */ .hw{padding:0 16px} .hw-tabs{display:flex;gap:4px;background:var(--n0);border-radius:var(--rf);padding:3px;margin-bottom:24px;border:1px solid var(--n2);width:fit-content} .hw-tab{padding:10px 20px;border-radius:var(--rf);font-weight:600;font-size:13px;color:var(--n5);text-align:center;min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;cursor:pointer} .hw-tab.on{background:var(--c2);color:var(--w);box-shadow:0 2px 8px rgba(19,46,74,.2)} .hw-tab:not(.on):hover{background:var(--w);color:var(--c2)} .hw-panel{display:none} .hw-panel.on{display:block;animation:rise .3s var(--e)} .tl{position:relative;display:flex;flex-direction:column;gap:0;padding-left:0} .ts{position:relative;display:flex;gap:16px;align-items:flex-start;padding:20px 0} .ts:not(:last-child){border-bottom:1px solid var(--n1)} .ts-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;position:relative} .ts-icon svg{width:28px;height:28px;stroke-width:2.2} .ts-icon.c-blue{background:#D4EAFC;color:#1565C0} .ts-icon.c-blue svg{stroke:#1565C0} .ts-icon.c-purple{background:#EAD6FA;color:#6A1B9A} .ts-icon.c-purple svg{stroke:#6A1B9A} .ts-icon.c-orange{background:#FFE4C4;color:#D84315} .ts-icon.c-orange svg{stroke:#D84315} .ts-icon.c-green{background:#C8E6C9;color:#1B5E20} .ts-icon.c-green svg{stroke:#1B5E20} .ts-icon.c-teal{background:#B2EBF2;color:#006064} .ts-icon.c-teal svg{stroke:#006064} .ts-n{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:var(--c2);border-radius:50%;display:grid;place-items:center;color:var(--w);font-weight:800;font-size:10px;border:2px solid var(--w);z-index:2} .ts-body{flex:1;min-width:0;display:flex;flex-direction:column} .ts-body h4{font-size:15px;font-weight:700;color:var(--c2);margin-bottom:3px} .ts-body p{font-size:13px;color:var(--n5);line-height:1.4;margin-bottom:8px} .tg-m{display:inline-flex;align-items:center;gap:6px;background:var(--g0);border-radius:var(--rf);padding:7px 14px;font-size:12px;color:var(--g6);font-weight:500;border:1px solid rgba(0,180,98,.15);margin-top:auto} .tg-m b{font-weight:700;color:var(--c2)} .wt-sc{display:flex;gap:10px;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory} .wt-sc::-webkit-scrollbar{display:none} .wt{flex-shrink:0;width:200px;background:var(--w);border:1px solid var(--n2);border-radius:var(--r3);padding:16px;text-align:center;scroll-snap-align:start} .wt-i{width:52px;height:52px;background:var(--c1ll);border-radius:var(--r3);display:grid;place-items:center;font-size:24px;margin:0 auto 10px} .wt h4{font-size:13px;font-weight:700;color:var(--c2);margin-bottom:4px} .wt p{font-size:12px;color:var(--n5);line-height:1.4} /* ═══ RECOMMENDATIONS ═══ */ .rs{display:flex;gap:10px;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory} .rs::-webkit-scrollbar{display:none} .rc{flex-shrink:0;width:240px;background:var(--w);border:1px solid var(--n2);border-radius:var(--r4);overflow:hidden;scroll-snap-align:start} .rc-cv{height:130px;background:linear-gradient(135deg,var(--c1ll),#d6e4f0);display:grid;place-items:center;font-size:36px;position:relative;overflow:hidden} .rc-ph{position:absolute;bottom:6px;left:8px;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.9);padding:3px 8px 3px 3px;border-radius:var(--rf)} .rc-av{width:20px;height:20px;border-radius:50%;background:var(--c2);display:grid;place-items:center;color:var(--w);font-size:9px;font-weight:700} .rc-ph span{font-size:10px;font-weight:600;color:var(--c3)} .rc-bd{padding:12px} .rc-bd h4{font-size:14px;font-weight:700;color:var(--c2);margin-bottom:4px;line-height:1.2} .rc-bd p{font-size:12px;color:var(--n5);line-height:1.4;margin-bottom:8px} .rc-lk{font-size:12px;font-weight:600;color:var(--g6)} .rc-sp{padding:4px 12px 10px;font-size:10px;color:var(--n4)} /* ═══ THEMATIC TABS ═══ */ .th-tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 16px;margin-bottom:4px} .th-tabs-wrap::-webkit-scrollbar{display:none} .th-tabs{display:flex;gap:6px;min-width:max-content} .th-tab{padding:10px 16px;border-radius:var(--rf);font-size:13px;font-weight:600;color:var(--n5);background:var(--n1);border:1.5px solid var(--n2);white-space:nowrap;min-height:42px;display:flex;align-items:center;gap:5px;transition:all var(--d)} .th-tab.on{background:var(--c2);color:var(--w);border-color:var(--c2)} .th-panel{display:none} .th-panel.on{display:block} .th-head{display:flex;align-items:center;justify-content:space-between;padding-top:12px} .th-info{display:flex;align-items:center;gap:10px} .th-ico{font-size:24px;display:flex;align-items:center} .th-info strong{font-size:14px;color:var(--c2)} .th-sub{font-size:11px;color:var(--n4)} /* ═══ AD PLACEMENTS ═══ */ .promo{padding:14px 0;background:var(--w)} .promo-sc{display:flex;gap:10px;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory} .promo-sc::-webkit-scrollbar{display:none} .promo-sl{flex-shrink:0;width:calc(100vw - 40px);max-width:340px;border-radius:var(--r4);overflow:hidden;scroll-snap-align:start;position:relative;min-height:160px;display:flex;align-items:flex-end} .promo-sl .promo-bg{position:absolute;inset:0;border-radius:var(--r4)} .promo-sl::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.75) 100%);border-radius:var(--r4)} .promo-body{position:relative;z-index:2;padding:14px 16px;width:100%} .promo-ad{display:inline-block;font-size:9px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px} .promo-body h3{font-size:17px;font-weight:700;color:var(--w);line-height:1.2;margin-bottom:3px} .promo-body p{font-size:12px;color:rgba(255,255,255,.75);line-height:1.35;margin-bottom:10px} .promo-bt{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;background:var(--w);border-radius:var(--r1);font-weight:700;font-size:12px;color:var(--c2)} .promo-bt:active{background:var(--n1)} .promo-dots{display:flex;gap:5px;justify-content:center;padding-top:10px} .promo-dot{width:6px;height:6px;border-radius:50%;background:var(--n3);transition:all .2s} .promo-dot.on{background:var(--g5);width:18px;border-radius:3px} /* DEALS */ .deals-grid{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 16px 12px 16px;scroll-snap-type:x mandatory;align-items:stretch;scroll-padding-left:16px} .deals-grid::-webkit-scrollbar{display:none} .deal-card{flex-shrink:0;width:180px;min-height:230px;border-radius:16px;background:linear-gradient(145deg,#0D2744,#1a3a5e);color:#fff;padding:16px;position:relative;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;border:1px solid rgba(255,255,255,.08);box-sizing:border-box} .deal-card--green{background:linear-gradient(145deg,#0a3320,#1a5c38)} .deal-card--purple{background:linear-gradient(145deg,#2a1a4e,#4a2d7e)} .deal-card--orange{background:linear-gradient(145deg,#3d1a00,#7a3800)} .deal-card--teal{background:linear-gradient(145deg,#003d3d,#006666)} .deal-card--promo{background:linear-gradient(145deg,#1a0033,#3d0066)} .deal-badge{position:absolute;top:12px;right:12px;background:#ff3b3b;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:.3px} .deal-badge--hot{background:linear-gradient(90deg,#ff6b00,#ff3b3b)} .deal-badge--special{background:linear-gradient(90deg,#7b2fff,#b44fff)} .deal-cat{font-size:10px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.8px;font-weight:600} .deal-emoji{font-size:32px;line-height:1;margin:2px 0} .deal-title{font-size:13px;font-weight:600;line-height:1.35;color:#fff} .deal-prices{display:flex;align-items:center;gap:8px;margin-top:2px} .deal-old{font-size:12px;color:rgba(255,255,255,.4);text-decoration:line-through} .deal-new{font-size:18px;font-weight:700;color:#4ade80} .deal-timer{font-size:11px;color:rgba(255,255,255,.5)} .deal-btn{margin-top:auto;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:9px;font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:background .2s;backdrop-filter:blur(4px)} .deal-btn:hover{background:rgba(255,255,255,.25)} .deal-cart-row{display:flex;align-items:stretch;gap:4px;margin-top:auto} .deal-cart-go{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;padding:0 8px;height:36px;font-size:11px;font-weight:700;cursor:pointer;transition:background .2s;backdrop-filter:blur(4px);text-decoration:none;white-space:nowrap} .deal-cart-go:hover{background:rgba(255,255,255,.35)} .deal-cart-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0} .deal-qty{display:flex;align-items:center;border:1px solid rgba(255,255,255,.3);border-radius:10px;overflow:hidden;backdrop-filter:blur(4px);flex-shrink:0} .deal-qty button{width:28px;height:36px;display:grid;place-items:center;font-size:15px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:none;cursor:pointer;transition:background .15s} .deal-qty button:hover{background:rgba(255,255,255,.25)} .deal-qty span{min-width:22px;text-align:center;font-size:13px;font-weight:700;color:#fff} .deal-promo-code{font-size:18px;font-weight:800;letter-spacing:2px;color:#c084fc;background:rgba(255,255,255,.1);border:1px dashed rgba(192,132,252,.4);border-radius:8px;padding:8px;text-align:center} .deal-promo-desc{font-size:12px;color:rgba(255,255,255,.6);text-align:center} /* card with photo */ .deal-card--img{padding:0;overflow:hidden;background:#0D2744;position:relative} .deal-img-wrap{position:relative;width:100%;height:150px;flex-shrink:0;display:block} .deal-img{width:100%;height:150px;object-fit:cover;object-position:center 30%;display:block;mask-image:linear-gradient(180deg,black 0%,black 40%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,black 0%,black 40%,transparent 100%)} .deal-img-overlay{display:none} .deal-img-cat{position:absolute;bottom:-2px;left:14px;z-index:2;font-size:10px;color:rgba(255,255,255,.95);text-transform:uppercase;letter-spacing:.8px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6)} .deal-img-cat{position:absolute;bottom:10px;left:14px;z-index:2;font-size:10px;color:rgba(255,255,255,.95);text-transform:uppercase;letter-spacing:.8px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6)} .deal-card--img .deal-badge{top:10px;right:10px} .deal-card--img .deal-cat{display:none} .deal-card--img .deal-title{padding:6px 14px 0} .deal-card--img .deal-prices{padding:0 14px} .deal-card--img .deal-timer{padding:0 14px} .deal-card--img .deal-btn{margin:auto 12px 12px} .deal-card--img .deal-cart-row{margin:auto 12px 12px} .ad-native{margin:0 16px;padding:14px;background:var(--w);border:1.5px solid var(--n2);border-radius:var(--r3);display:flex;gap:14px;position:relative} .ad-native .ad-label{position:absolute;top:6px;right:10px;font-size:8px;font-weight:700;color:var(--n4);text-transform:uppercase;letter-spacing:.06em} .ad-native-img{width:72px;height:72px;min-height:72px;border-radius:var(--r2);display:grid;place-items:center;font-size:32px;flex-shrink:0;background:linear-gradient(135deg,#FFF4E6,#FEE2C5)} .ad-native-txt{flex:1;min-width:0;padding-right:30px} .ad-native-txt h4{font-size:14px;font-weight:700;color:var(--c2);margin-bottom:3px;line-height:1.25} .ad-native-txt p{font-size:12px;color:var(--n5);line-height:1.4;margin-bottom:6px} .ad-native-link{font-size:12px;font-weight:700;color:var(--g6);display:inline-flex;align-items:center;gap:4px} .season-bn{margin:0 16px;border-radius:var(--r4);overflow:hidden;position:relative;min-height:100px;display:flex;align-items:center} .season-bn .sbn-bg{position:absolute;inset:0;border-radius:var(--r4)} .season-bn-body{position:relative;z-index:2;padding:18px 20px;display:flex;align-items:center;gap:14px;width:100%} .season-bn-ico{font-size:36px;flex-shrink:0} .season-bn-txt{flex:1} .season-bn-txt h4{font-size:15px;font-weight:700;margin-bottom:2px;line-height:1.2} .season-bn-txt p{font-size:12px;line-height:1.35;opacity:.75} .season-bn-bt{padding:10px 18px;border-radius:var(--r1);font-weight:700;font-size:13px;flex-shrink:0;min-height:40px;display:grid;place-items:center} .season-bn .ad-label{position:absolute;top:8px;right:10px;z-index:2;font-size:8px;font-weight:700;opacity:.5;text-transform:uppercase;letter-spacing:.06em} .brands-strip{padding:20px 0;background:var(--w)} .brands-h{padding:0 16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center} .brands-h span{font-size:12px;font-weight:700;color:var(--n4);text-transform:uppercase;letter-spacing:.04em} .brands-h small{font-size:9px;color:var(--n4);text-transform:uppercase} .brands-sc{display:flex;gap:10px;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .brands-sc::-webkit-scrollbar{display:none} .brand-card{flex-shrink:0;width:100px;background:var(--n0);border:1px solid var(--n2);border-radius:var(--r3);padding:14px 8px;text-align:center} .brand-card:active{border-color:var(--g5)} .brand-card-ico{font-size:28px;margin-bottom:6px} .brand-card-nm{font-size:10px;font-weight:600;color:var(--n7);line-height:1.2} /* ═══ NUMBERS ═══ */ .nums{background:var(--c1);padding:36px 16px;position:relative;overflow:hidden} .nums::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:20px 20px} .nums-t{text-align:center;font-family:var(--fd);font-size:20px;font-weight:700;color:var(--w);margin-bottom:20px;position:relative;z-index:2} .nums-t b{color:var(--g4)} .nums-g{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:2} .nm{text-align:center;padding:18px 10px;border-radius:var(--r3);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)} .nm-i{font-size:20px;margin-bottom:6px} .nm-v{font-size:28px;font-weight:800;color:var(--g4);line-height:1;margin-bottom:3px;letter-spacing:-1px} .nm-l{font-size:11px;color:rgba(255,255,255,.45);line-height:1.3} /* ═══ PHARMACY PHOTOS ═══ */ .pharm-photos{padding:0 16px} .pharm-grid{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory} .pharm-grid::-webkit-scrollbar{display:none} .pharm-card{flex-shrink:0;width:260px;border-radius:var(--r4);overflow:hidden;border:1px solid var(--n2);scroll-snap-align:start;background:var(--w)} .pharm-card-img{width:100%;height:150px;background:var(--n1);display:flex;align-items:center;justify-content:center;font-size:60px;position:relative} .pharm-card-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(0deg,rgba(255,255,255,1),transparent)} .pharm-card-body{padding:12px 14px} .pharm-card-nm{font-size:14px;font-weight:700;color:var(--c2);margin-bottom:4px} .pharm-card-addr{font-size:12px;color:var(--n5);line-height:1.4;margin-bottom:4px} .pharm-card-tel{display:block;font-size:13px;font-weight:600;color:var(--g6);margin-bottom:6px} .pharm-card-hours{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--g6);background:var(--g0);padding:3px 8px;border-radius:var(--rf)} .pharm-card-hours::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--g5)} /* ═══ TOAST NOTIFICATIONS ═══ */ .toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none} .toast{background:var(--w);border-radius:var(--r3);padding:14px 20px;box-shadow:0 8px 32px rgba(0,0,0,.15);display:flex;align-items:center;gap:12px;pointer-events:auto;animation:toastIn .35s var(--e);max-width:360px;border-left:4px solid var(--g5)} .toast.toast-out{animation:toastOut .3s var(--e) forwards} .toast-ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0} .toast-ico.success{background:var(--g1)}.toast-ico.success svg{stroke:var(--g5)} .toast-ico.info{background:var(--c1l)}.toast-ico.info svg{stroke:var(--c3)} .toast-ico.warn{background:#FEF3C7}.toast-ico.warn svg{stroke:#D97706} .toast-ico svg{width:16px;height:16px;fill:none;stroke-width:2.5} .toast-body{flex:1;min-width:0}.toast-title{font-size:13px;font-weight:700;color:var(--c1);margin-bottom:2px}.toast-msg{font-size:12px;color:var(--n5);line-height:1.4} .toast-close{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:none;background:none;flex-shrink:0} .toast-close:hover{background:var(--n1)}.toast-close svg{width:12px;height:12px;stroke:var(--n4);fill:none;stroke-width:2.5} @keyframes toastIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}} @keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(60px)}} /* ═══ COOKIE BANNER ═══ */ .cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--w);box-shadow:0 -4px 24px rgba(0,0,0,.1);padding:16px 20px;display:flex;align-items:center;gap:16px;animation:slideUp .4s var(--e)} .cookie-banner.hide{animation:slideDown .3s var(--e) forwards} .cookie-ico{font-size:24px;flex-shrink:0}.cookie-text{flex:1;font-size:13px;color:var(--n5);line-height:1.5}.cookie-text a{color:var(--c3);text-decoration:underline} .cookie-btn{padding:8px 20px;background:var(--g5);color:var(--w);border-radius:var(--rf);font-weight:700;font-size:13px;white-space:nowrap;flex-shrink:0;transition:all .3s ease-out} .cookie-btn:hover{background:var(--g6);box-shadow:0 0 12px rgba(0,180,98,.3),0 0 24px rgba(0,180,98,.1)} @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes slideDown{from{transform:translateY(0)}to{transform:translateY(100%)}} /* ═══ 18+ MODAL ═══ */ .age-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s} .age-box{background:var(--w);border-radius:var(--r4);max-width:420px;width:100%;padding:32px 28px;text-align:center;box-shadow:var(--s4);animation:rise .3s var(--e)} .age-ico{font-size:48px;margin-bottom:12px}.age-title{font-size:20px;font-weight:800;color:var(--c1);margin-bottom:8px} .age-text{font-size:14px;color:var(--n5);line-height:1.6;margin-bottom:20px} .age-warn{font-size:11px;color:var(--n4);background:var(--n0);padding:10px 14px;border-radius:var(--r2);margin-bottom:20px;line-height:1.5} .age-btns{display:flex;gap:12px;justify-content:center} .age-btn{padding:12px 32px;border-radius:var(--rf);font-size:14px;font-weight:700;border:none;cursor:pointer;transition:all .15s} .age-btn.yes{background:var(--g5);color:var(--w);transition:all .3s ease-out} .age-btn.yes:hover{background:var(--g6);box-shadow:0 0 12px rgba(0,180,98,.3),0 0 24px rgba(0,180,98,.1)} .age-btn.no{background:var(--n1);color:var(--n5)}.age-btn.no:hover{background:var(--n2)} /* ═══ FOOTER ═══ */ .discl-bar{background:#FEF9E7;border-top:3px solid #F5C518;padding:16px 16px;text-align:center;font-size:13px;color:#5D4E37;line-height:1.6} .discl-bar strong{color:#2a2a2a} .discl-in{max-width:1400px;margin:0 auto;padding:0 32px} .discl-18{display:inline-block;background:#E53935;color:#fff;font-weight:800;font-size:11px;padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:1px} .ftr{background:linear-gradient(180deg,#0B1D2E 0%,#081624 100%);padding:32px 16px 16px;color:rgba(255,255,255,.5);position:relative;border-radius:24px 24px 0 0} .ftr::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,122,.3),transparent);border-radius:24px 24px 0 0} .ftr-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:20px 16px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:16px} .ftr-logo-wrap{display:flex;align-items:center;gap:10px;margin-bottom:12px} .ftr-brand{font-size:20px;font-weight:800;color:#fff;letter-spacing:.02em;line-height:1.1} .ftr-brand b{color:var(--g4)} .ftr-brand-sub{font-size:9px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.12em} .ftr-desc{font-size:12px;color:rgba(255,255,255,.4);line-height:1.5;margin-bottom:10px;max-width:280px} .ftr-grid>div:first-child{grid-column:1/-1} .ftr-social{display:flex;gap:6px;margin-bottom:4px} .ftr-grid>div:last-child{grid-column:1/-1} .ftr-soc-btn{width:40px;height:40px;border-radius:12px;background:none;border:none;display:grid;place-items:center;transition:all .25s;overflow:hidden;padding:0} .ftr-soc-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)} .ftr-soc-btn img{width:40px;height:40px;border-radius:12px;object-fit:cover} .ftr-col-title{font-size:10px;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06)} .ftr-col a{display:block;font-size:12px;color:rgba(255,255,255,.4);padding:3px 0;transition:all .2s;text-decoration:none} .ftr-col a:hover{color:var(--g4);padding-left:6px} .ftr-contact-item{font-size:12px;color:rgba(255,255,255,.45);line-height:1.4;margin-bottom:6px;padding:8px 10px;background:rgba(255,255,255,.04);border-radius:8px;border:1px solid rgba(255,255,255,.06);transition:all .2s} .ftr-contact-item:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)} .ftr-contact-item a{display:inline !important;padding:0 !important;color:var(--g4) !important;font-weight:600;font-size:13px} .ftr-email{color:rgba(255,255,255,.4) !important;font-size:12px;margin-top:4px;transition:color .2s} .ftr-email:hover{color:var(--g4) !important} .ftr-disc{max-width:1400px;margin:0 auto 12px;padding:12px 16px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.05);font-size:10px;line-height:1.5;color:rgba(255,255,255,.35)} .ftr-legal{max-width:1400px;margin:0 auto 12px;text-align:center;padding:12px 16px;background:rgba(255,255,255,.02);border-radius:10px;border:1px solid rgba(255,255,255,.04)} .ftr-leg-text{font-size:10px;color:rgba(255,255,255,.3);line-height:1.6;margin-bottom:4px} .ftr-reg{font-size:10px;color:rgba(255,255,255,.22);line-height:1.4} .ftr-reg a{color:rgba(255,255,255,.35);transition:color .12s} .ftr-reg a:hover{color:var(--g4)} .ftr-bottom{max-width:1400px;margin:0 auto;border-top:1px solid rgba(255,255,255,.06);padding-top:12px;display:flex;flex-direction:column;gap:4px;align-items:center} .ftr-copy{font-size:12px;font-weight:600;color:rgba(255,255,255,.35)} .ftr-bottom-links{font-size:10px;color:rgba(255,255,255,.2)} .ftr-bottom-links a{color:rgba(255,255,255,.3);transition:color .12s} .ftr-bottom-links a:hover{color:var(--g4)} .ftr-bottom-links span{margin:0 5px;color:rgba(255,255,255,.1)} @media(max-width:767px){ .ftr-col-title{cursor:pointer;display:flex;align-items:center;justify-content:space-between} .ftr-col-title::after{content:'';width:8px;height:8px;border-right:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);transform:rotate(45deg);transition:transform .3s var(--e);flex-shrink:0} .ftr-col.open .ftr-col-title::after{transform:rotate(-135deg)} .ftr-col:not(:first-child) > a{max-height:0;overflow:hidden;opacity:0;padding:0 0;margin:0;transition:max-height .3s var(--e),opacity .3s,padding .2s} .ftr-col.open > a{max-height:50px;opacity:1;padding:8px 0} } /* ═══ CATALOG PANEL ═══ */ .cat-panel{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s ease} .cat-panel.open{pointer-events:auto;opacity:1} .cat-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .cat-drawer{position:absolute;left:0;top:0;bottom:0;width:92%;max-width:420px;background:var(--w);transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:8px 0 40px rgba(0,0,0,.15);display:flex;flex-direction:column} .cat-panel.open .cat-drawer{transform:translateX(0)} .cat-head{position:sticky;top:0;z-index:2;background:var(--w);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--n1);flex-shrink:0} .cat-back-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--n1);color:var(--n7);margin-right:8px;flex-shrink:0;transition:background .15s;cursor:pointer;border:none} .cat-back-btn:hover{background:var(--n2)} @keyframes catSlide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}} .cat-head-t{font-family:var(--fd);font-size:16px;font-weight:800;color:var(--c1)} .cat-close{width:30px;height:30px;border-radius:50%;background:var(--n1);display:grid;place-items:center;cursor:pointer;transition:background .15s} .cat-close:hover{background:var(--n2)} .cat-close svg{width:14px;height:14px;stroke:var(--n6);stroke-width:2.5} .cat-search{padding:8px 16px;position:sticky;top:50px;z-index:2;background:var(--w);flex-shrink:0} .cat-search input{width:100%;height:36px;border:1.5px solid var(--n2);border-radius:var(--r2);padding:0 12px 0 36px;font-size:12px;background:var(--n0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 12px center no-repeat;outline:none;transition:border-color .15s} .cat-search input:focus{border-color:var(--g5)} .cat-search input::placeholder{color:var(--n4)} .cat-body{display:flex;flex:1;overflow:hidden} .cat-col{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 100px} .cat-col1{width:100%} .cat-col2,.cat-col3{display:none} .cat-list{padding:4px 12px 100px} .cat-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r2);cursor:pointer;transition:background .12s;text-decoration:none;color:inherit} .cat-item:hover,.cat-item:active,.cat-item.on{background:var(--n1)} .cat-ico{width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;color:var(--n7)} .cat-ico svg{width:18px;height:18px} .cat-info{flex:1;min-width:0} .cat-nm{font-size:13px;font-weight:600;color:var(--c2);line-height:1.3} .cat-cnt{font-size:10px;color:var(--n4);margin-top:1px} .cat-arrow{width:16px;height:16px;color:var(--n3);flex-shrink:0} .cat-divider{height:1px;background:var(--n1);margin:6px 12px} @media(max-width:767px){.hdr-r2-wrap{display:none !important}} @media(min-width:768px){ .cat-drawer{max-width:860px;width:72%;max-height:75vh;top:100px;bottom:auto;border-radius:16px;overflow:hidden} .cat-head{padding:12px 16px} .cat-head-t{font-size:16px} .cat-search{padding:8px 16px;top:50px} .cat-search input{height:36px;font-size:12px;padding:0 12px 0 36px;background-position:12px center} .cat-body{display:flex;flex:1;overflow:hidden;max-height:calc(75vh - 110px)} .cat-col1{width:230px;flex-shrink:0;border-right:1px solid var(--n1);padding:2px 0;overflow-y:auto} .cat-col2{display:block;width:220px;flex-shrink:0;border-right:1px solid var(--n1);padding:2px 0;overflow-y:auto} .cat-col3{display:block;flex:1;padding:2px 0;overflow-y:auto} .cat-col2:empty,.cat-col3:empty{display:none} .cat-col-title{padding:8px 14px 4px;font-size:13px;font-weight:700;color:var(--c1)} .cat-item{padding:7px 12px;gap:8px} .cat-ico{width:24px;height:24px} .cat-ico svg{width:16px;height:16px} .cat-nm{font-size:12px} .cat-cnt{font-size:9px;margin-top:1px} .cat-arrow{width:16px;height:16px} .cat-close{width:30px;height:30px} .cat-close svg{width:14px;height:14px} } /* ═══ PHARMACIST WIDGET ═══ */ .ph-widget{position:fixed;bottom:90px;right:16px;z-index:150;animation:rise .4s var(--e)} .ph-widget.hidden{display:none} .ph-w-bubble{background:var(--w);border-radius:var(--r3);padding:12px 14px;box-shadow:var(--s3);max-width:240px;position:relative;padding-right:30px} .ph-w-header{display:flex;align-items:center;gap:8px;margin-bottom:6px} .ph-w-mini-ava{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--g5)} .ph-w-mini-ava img{width:100%;height:100%;object-fit:cover} .ph-w-name{font-size:11px;font-weight:700;color:var(--c2)} .ph-w-text{font-size:13px;color:var(--n7);line-height:1.4} .ph-w-text b{color:var(--g6)} .ph-w-close{position:absolute;top:6px;right:6px;width:24px;height:24px;display:grid;place-items:center;color:var(--n4);border-radius:50%;cursor:pointer;transition:background .15s;z-index:2;background:none;border:none;padding:0} .ph-w-close:hover{background:var(--n1)} .ph-w-close:active{background:var(--n2)} .ph-w-close svg{width:14px;height:14px;stroke:var(--n4);fill:none;stroke-width:2.5} /* ═══ TOPBAR (desktop only) ═══ */ .topbar{display:none;background:var(--c1);color:rgba(255,255,255,.5);font-size:11px} .topbar-in{max-width:1360px;margin:0 auto;padding:4px 32px;display:flex;align-items:center;gap:20px} .topbar-lnk{color:rgba(255,255,255,.5);transition:color .15s} .topbar-lnk:hover{color:rgba(255,255,255,.85)} .topbar-lic{margin-left:auto;font-size:11px;color:rgba(255,255,255,.3)} .topbar-city{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.8);font-weight:600;cursor:pointer;position:relative;padding:4px 12px 4px 8px;transition:all .15s;border:1px solid rgba(255,255,255,.2);border-radius:20px;font-size:12px} .topbar-city:hover{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)} .topbar-city-arr{transition:transform .2s;opacity:.5} .topbar-city.open .topbar-city-arr{transform:rotate(180deg);opacity:.8} .topbar-city .city-dd{top:calc(100% + 8px);left:-10px} .city-dd{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--w);border:1.5px solid var(--n2);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);z-index:400;padding:6px;display:none;animation:cityDdIn .15s ease} .topbar-city.open .city-dd,.city-b.open .city-dd{display:block} @keyframes cityDdIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .city-dd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s;font-size:14px;font-weight:500;color:var(--n7)} .city-dd-item:hover{background:var(--n0)} .city-dd-item.on{background:var(--c1l);color:var(--c2);font-weight:700} .city-dd-item.on::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--g5);margin-left:auto;flex-shrink:0} .topbar-phone{color:rgba(255,255,255,.7);font-weight:700;margin-left:auto;margin-right:16px;transition:color .15s} .topbar-phone:hover{color:#fff} /* ═══ CATALOG BUTTON ═══ */ .cat-btn{display:none;align-items:center;gap:8px;padding:9px 18px;background:var(--c2);color:var(--w);border-radius:var(--r2);font-weight:700;font-size:14px;transition:all .3s ease-out} .cat-btn:hover{background:var(--c3);box-shadow:0 0 12px rgba(19,46,74,.25),0 0 24px rgba(19,46,74,.1)} /* ═══ HEADER ACTIONS (desktop only) ═══ */ .hdr-acts{display:none;align-items:center;gap:4px;margin-left:auto} .hdr-act{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 10px;border-radius:var(--r2);color:var(--n5);font-size:9px;font-weight:600;transition:all .15s;position:relative} .hdr-act:hover{background:var(--n0);color:var(--c2)} .cart-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;background:var(--g5);color:var(--w);border-radius:var(--rf);font-size:9px;font-weight:700;display:grid;place-items:center} .orders-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;background:#E91E8C;color:var(--w);border-radius:var(--rf);font-size:9px;font-weight:700;display:grid;place-items:center} .fav-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;padding:0 4px;background:#F44336;color:var(--w);border-radius:var(--rf);font-size:9px;font-weight:700;display:grid;place-items:center} .prof-act{position:relative;cursor:pointer} .prof-hover{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--w);border-radius:14px;border:1.5px solid var(--n2);box-shadow:0 8px 28px rgba(0,0,0,.12);z-index:500;display:none;animation:cartHoverIn .15s ease;padding:0;overflow:hidden} .prof-act:hover .prof-hover{display:block} .prof-hd{padding:16px;border-bottom:1px solid var(--n1)} .prof-hd-name{font-size:15px;font-weight:700;color:var(--n8)} .prof-hd-phone{font-size:12px;color:var(--n4);margin-top:2px} .prof-hd-edit{font-size:12px;color:var(--c4);margin-top:6px;text-decoration:underline;display:inline-block} .prof-menu{padding:8px 0} .prof-menu-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;font-weight:500;color:var(--n7);transition:background .15s;cursor:pointer} .prof-menu-item:hover{background:var(--n0)} .prof-menu-item svg{width:18px;height:18px;flex-shrink:0;stroke:var(--n5);fill:none;stroke-width:1.8} .prof-logout{border-top:1px solid var(--n1);padding:12px 16px} .prof-logout a{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;color:#E53935;transition:opacity .15s} .prof-logout a:hover{opacity:.7} .prof-logout svg{width:16px;height:16px;stroke:#E53935;fill:none;stroke-width:2} .orders-hover{position:absolute;top:calc(100% + 10px);right:0;width:290px;background:var(--w);border-radius:14px;border:1.5px solid var(--n2);box-shadow:0 8px 28px rgba(0,0,0,.12);z-index:500;display:none;animation:cartHoverIn .15s ease;padding:0;overflow:hidden} .ord-act:hover .orders-hover{display:block} .orders-hover-hd{padding:12px 16px;border-bottom:1px solid var(--n1);font-size:13px;font-weight:700;color:var(--n8);display:flex;align-items:center;justify-content:space-between} .orders-hover-hd small{font-weight:500;color:var(--n4);font-size:11px} .ord-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--n1)} .ord-item:last-child{border-bottom:none} .ord-img{width:52px;height:52px;border-radius:10px;background:var(--n0);display:grid;place-items:center;flex-shrink:0;overflow:hidden} .ord-img svg{width:28px;height:28px} .ord-info{flex:1;min-width:0} .ord-status{font-size:12px;font-weight:700;color:var(--n8)} .ord-desc{font-size:11px;color:var(--n5);margin-top:1px} .ord-date{font-size:11px;font-weight:600;color:var(--c2);margin-top:2px} .orders-hover-ft{padding:12px 16px;border-top:1px solid var(--n1)} .orders-hover-ft a{display:block;text-align:center;padding:10px;background:var(--w);color:var(--c2);border:2px solid var(--c2);border-radius:12px;font-size:13px;font-weight:700;transition:all .15s} .orders-hover-ft a:hover{background:var(--c2);color:var(--w)} .cart-hover{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--w);border-radius:12px;border:1.5px solid var(--n2);box-shadow:0 8px 28px rgba(0,0,0,.12);z-index:500;display:none;animation:cartHoverIn .15s ease} @keyframes cartHoverIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .cart-act:hover .cart-hover{display:block} .cart-hover-hd{padding:10px 14px;border-bottom:1px solid var(--n1);font-size:13px;font-weight:700;color:var(--n8)} .cart-hover-list{max-height:200px;overflow-y:auto;padding:0} .cart-hover-list::-webkit-scrollbar{width:3px} .cart-hover-list::-webkit-scrollbar-thumb{background:var(--n2);border-radius:3px} .cart-hover-item{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--n1)} .cart-hover-item:last-child{border-bottom:none} .cart-hover-ico{width:32px;height:32px;border-radius:6px;background:var(--n0);display:grid;place-items:center;font-size:14px;flex-shrink:0} .cart-hover-info{flex:1;min-width:0} .cart-hover-nm{font-size:12px;font-weight:600;color:var(--n8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cart-hover-meta{font-size:11px;color:var(--n4)} .cart-hover-empty{padding:20px;text-align:center;color:var(--n4);font-size:12px} .cart-hover-ft{padding:10px 14px;border-top:1px solid var(--n1)} .cart-hover-ft a{display:block;text-align:center;padding:8px;background:var(--g5);color:var(--w);border-radius:8px;font-size:13px;font-weight:700;transition:opacity .15s} .cart-hover-ft a:hover{opacity:.85} /* ═══ HERO RIGHT PANEL (desktop) ═══ */ /* cookie-bar removed — use only .cookie-banner */ /* ═══ REVIEW ANIMATION ═══ */ .reviews-slider{position:relative;overflow:visible} .review-set{display:flex;gap:12px;transition:opacity 0.4s ease-in-out;width:100%;padding:0 16px 12px;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .review-set.active{opacity:1;transform:translateY(0)} .review-set.hidden{display:none} @media(min-width:768px){.review-set{padding:0 48px;overflow-x:visible;flex-wrap:nowrap}} /* ═══ HERO MAP (desktop) ═══ */ .hero-map-wrap{display:none} @media(min-width:768px){ .hero{overflow:hidden} .hero-c{display:flex;align-items:center;min-height:auto} .hero-left{position:relative;z-index:5;max-width:440px;flex-shrink:0} .hero-left::after{content:'';position:absolute;top:-20px;left:-32px;bottom:-20px;right:-40px;background:linear-gradient(90deg,var(--c1) 60%,transparent 100%);z-index:-1;pointer-events:none;border-radius:0} .hero-map-wrap{display:block;position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:900px;pointer-events:none;z-index:2;opacity:.35; filter:drop-shadow(0 0 30px rgba(30,100,255,.08)); -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 25%,black 45%,black 75%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,transparent 25%,black 45%,black 75%,transparent 100%)} .hero-map-wrap svg{width:100%;height:auto;display:block;overflow:visible} .hero-feed{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden} .city-dot{position:absolute;z-index:3;pointer-events:none;transform:translate(-2px,-2px)} .city-dot::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:rgba(0,229,255,.7)} .city-dot.cap::before{background:#00E5FF;width:7px;height:7px;box-shadow:0 0 6px rgba(0,229,255,.5)} .city-dot span{position:absolute;left:10px;top:-4px;font-size:9px;color:rgba(255,255,255,.45);white-space:nowrap;font-weight:500} .city-dot.sm::before{width:4px;height:4px;background:rgba(0,229,255,.4)} .city-dot.cap span{color:rgba(0,229,255,.65);font-weight:700;font-size:10px} .map-ping{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-5px,-5px) scale(0);opacity:0;z-index:5;transition:all .4s ease} .map-ping.show{transform:translate(-5px,-5px) scale(1);opacity:1} .map-ping.exit{transform:translate(-5px,-5px) scale(0);opacity:0} .map-ping::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;animation:ring 2s ease-out infinite} .hf-bubble{position:absolute;background:rgba(12,30,55,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(80,140,255,.15);border-radius:12px;padding:9px 14px;display:flex;align-items:center;gap:8px;opacity:0;transform:scale(.8);transition:all .7s cubic-bezier(.4,0,.2,1);pointer-events:auto;cursor:default;max-width:230px;white-space:nowrap;box-shadow:0 4px 24px rgba(0,0,0,.5);z-index:6} .hf-bubble.show{opacity:1;transform:scale(1)} .hf-bubble.exit{opacity:0;transform:scale(.7)} .hf-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .hf-dot.green{background:#4CAF50;box-shadow:0 0 6px rgba(76,175,80,.5)} .hf-dot.blue{background:#42A5F5;box-shadow:0 0 6px rgba(66,165,245,.5)} .hf-dot.cyan{background:#00E5FF;box-shadow:0 0 6px rgba(0,229,255,.5)} .hf-dot.orange{background:#FF9800;box-shadow:0 0 6px rgba(255,152,0,.5)} .hf-tx{font-size:12px;color:rgba(255,255,255,.9);font-weight:600;line-height:1.3} .hf-tx small{display:block;font-size:10px;color:rgba(255,255,255,.4);font-weight:500;margin-top:1px} } @media(min-width:1200px){ .hero-left{max-width:520px} .hero-map-wrap{width:1000px;right:-40px} } @media(min-width:1600px){ .hero-left{max-width:560px} } @keyframes ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}} /* ════════════════════════════════════════════════════════════ DESKTOP ADAPTATIONS (768px+) ════════════════════════════════════════════════════════════ */ @media(min-width:768px){ body{padding-bottom:0;font-size:14px} .p{padding:0 24px} .btm{display:none} .topbar{display:block} .cat-btn{display:flex} .hdr-acts{display:flex} .hdr{position:-webkit-sticky;position:sticky;top:-32px;height:auto;border-bottom:1px solid var(--n2);transition:box-shadow .3s ease} .hdr.scrolled{box-shadow:0 2px 12px rgba(0,0,0,.06)} .hdr-r1{max-width:1400px;margin:0 auto;padding:6px 24px;gap:0;min-height:auto;flex-wrap:nowrap !important;align-items:center;display:flex !important;box-sizing:border-box;width:100%} .hdr-r1 .logo{flex:0 0 auto;margin-right:10px} .cat-btn{flex:0 0 auto;margin-right:12px;padding:7px 14px;font-size:12px} .hdr-srch{flex:1 1 0% !important;width:0 !important;min-width:0 !important;order:0;margin:0;padding:0;background:none;position:static}.hdr-srch::after{display:none} .hdr-srch .srch{width:100%;position:relative} .hdr-srch .srch input{height:40px;font-size:13px;padding:0 120px 0 16px;border-radius:20px;border:1.5px solid var(--n2);box-shadow:none;width:100%;box-sizing:border-box} .hdr-srch .srch input:focus{border-color:var(--g5);box-shadow:0 0 0 3px rgba(0,180,98,.12)} .hdr-srch .srch-b{width:auto;min-width:80px;height:32px;right:4px;top:4px;border-radius:16px;font-size:12px;font-weight:700;gap:5px;padding:0 14px 0 10px;display:flex;align-items:center;justify-content:center} .hdr-srch .srch-b .srch-b-text{display:inline} .hdr-srch .srch-b svg{width:14px;height:14px;flex-shrink:0} .hdr-srch .srch-mic{width:32px;height:32px;right:86px;top:4px} .hdr-srch .srch-dd{top:calc(100% + 6px);border-radius:14px;border:1.5px solid var(--n2);border-top:1.5px solid var(--n2);box-shadow:0 6px 24px rgba(0,0,0,.1)} .city-b{display:none !important} .hdr-phone{display:none !important} .hdr-r2-wrap{display:none !important} .logo-ico{width:40px;height:40px} .logo-name{font-size:17px;letter-spacing:.5px} .logo-sub{font-size:9px;letter-spacing:2.5px} .hdr-acts{display:flex !important;gap:0;margin-left:12px;flex:0 0 auto} .hdr-act{padding:3px 8px} .hdr-act span{font-size:8px} .hdr-act svg{width:18px;height:18px} .hero{padding:32px 24px 36px} .hero h1{font-size:30px} .hero-d{font-size:13px;max-width:100%} .hero-st{gap:24px;margin-bottom:16px;padding-bottom:16px} .hs-v{font-size:26px} .hs-l{font-size:10px} .hero-b{flex-direction:row;gap:8px} .hb1{padding:10px 22px;font-size:13px;min-height:40px} .hb2{padding:10px 20px;font-size:12px;min-height:36px} .hero-rev{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0} .hr{width:auto;flex:1;min-width:220px} .trust{overflow-x:auto;padding:16px 0;scrollbar-width:none;-ms-overflow-style:none} .trust::-webkit-scrollbar{display:none} .trust-in{padding:0 24px;min-width:max-content;justify-content:flex-start} .trc{width:220px;flex-shrink:0} .sec{padding:28px 0} .sec-h{padding:0 24px;margin-bottom:14px} .sec-t{font-size:20px} .sit-grid{flex-wrap:nowrap;overflow-x:auto;padding:0 0;justify-content:flex-start} .sit{width:175px;min-width:175px;flex-shrink:0} .cg{grid-template-columns:repeat(4,1fr);gap:10px;padding:0 24px} .ps{padding:0 40px;gap:10px} .pc{width:calc(20% - 9px);min-width:145px;flex-shrink:0} .pc-img{height:110px} .pc-nm{font-size:12px} .pc-av{font-size:10px} .pc-pr{font-size:14px} .pc-bt{height:34px;font-size:12px} .th-tabs-wrap{padding:0 24px} .promo-sc{flex-wrap:wrap;overflow:visible;padding:0 24px} .deals-grid{padding:0 48px;gap:14px;flex-wrap:nowrap;overflow-x:auto;justify-content:center;scroll-padding-left:48px} .deal-card{width:180px;min-width:180px;max-width:180px;flex-shrink:0} .promo-sl{width:calc(33.333% - 7px);max-width:none;min-height:140px} .promo-body h3{font-size:15px} .promo-bt{font-size:11px;padding:6px 12px} .cta-w{padding:0 24px} .cta{display:grid;grid-template-columns:1fr 1fr} .cta-t{padding:36px 32px} .cta-t h2{font-size:24px} .cta-fm{padding:32px} .hw{padding:0 24px} .hw-tabs{width:fit-content} .hw-tab{padding:8px 20px;font-size:12px} .tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;padding:0;background:var(--w);border:1.5px solid var(--n2);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)} .ts{flex-direction:column;align-items:center;text-align:center;padding:20px 10px 18px;border-bottom:none !important;position:relative;display:flex} .ts:not(:last-child)::after{content:'';position:absolute;right:0;top:20px;bottom:20px;width:1px;background:var(--n2)} .ts-icon{margin-bottom:10px;width:44px;height:44px;border-radius:12px} .ts-icon svg{width:22px;height:22px} .ts-body{flex:1;display:flex;flex-direction:column;align-items:center;width:100%} .ts-body h4{font-size:11px;margin-bottom:3px} .ts-body p{font-size:10px;flex:1} .tg-m{font-size:10px;padding:5px 8px;white-space:normal;text-align:center;margin-top:auto} .ts-n{top:-4px;right:-4px} .wt-sc{flex-wrap:wrap;overflow:visible;padding:0 24px;gap:10px} .wt{width:calc(20% - 9px);min-width:150px} .pharm-photos{padding:0 24px} .pharm-grid{flex-wrap:wrap;overflow:visible;gap:12px} .pharm-card{width:calc(33.33% - 9px);min-width:200px} .rs{flex-wrap:wrap;overflow:visible;padding:0 24px;gap:10px} .rc{width:calc(25% - 8px);min-width:200px} .nums{padding:40px 24px} .nums-t{font-size:22px} .nums-g{grid-template-columns:repeat(4,1fr);gap:16px} .nm-v{font-size:32px} .ftr{padding:28px 32px 16px;border-radius:20px 20px 0 0} .ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:24px;padding:0 0 20px} .ftr-bottom{flex-direction:row;justify-content:space-between} .discl-in{padding:0 36px} .ftr-links a{display:inline;padding:0;margin-right:20px;border:none;font-size:12px} .ftr-ph{display:flex;gap:24px} .ftr-ph div{margin-bottom:0} .ph-widget{bottom:80px;right:20px} } @media(min-width:1200px){ .hdr-r2,.sec-h,.sit-grid,.cg,.ps,.cta-w,.hw,.wt-sc,.pharm-photos,.rs,.nums,.ftr,.trust-in,.promo-sc,.reviews-slider,.th-tabs-wrap,.th-head,.deals-grid{max-width:1280px;margin-left:auto;margin-right:auto} .topbar-in{max-width:1280px} .hero{padding:36px 0} .hero-c{max-width:1280px;margin:0 auto;padding:0 24px} .hero h1{font-size:34px} .sit{width:calc(16.66% - 7px)} .pc{width:calc(20% - 9px)} .tl{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .pharm-card{width:calc(33.33% - 9px)} .ph-widget{right:calc(max(20px, (100vw - 1280px)/2 + 20px))} .toast-container{right:calc(max(16px, (100vw - 1280px)/2 + 16px))} } @media(min-width:1600px){ .hdr-r2,.sec-h,.sit-grid,.cg,.ps,.cta-w,.hw,.wt-sc,.pharm-photos,.rs,.nums,.trust-in,.promo-sc,.reviews-slider,.th-tabs-wrap,.th-head,.deals-grid{max-width:1440px} .topbar-in,.hero-c,.hdr-r1{max-width:1440px} .ftr-grid,.ftr-legal,.ftr-bottom,.ftr-disc{max-width:1440px} .discl-in{max-width:1440px} .ph-widget{right:calc((100vw - 1440px)/2 + 24px)} .toast-container{right:calc((100vw - 1440px)/2 + 20px)} } /* ═══ CATALOG: PAGE HEAD & CATEGORY CARDS ═══ */ .page-head{max-width:1360px;margin:0 auto;padding:20px 16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .page-title{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--c1)} .page-count{font-size:14px;color:var(--n4);margin-top:4px} .page-back{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--rf);background:var(--n1);color:var(--n5);font-size:13px;font-weight:600;transition:all .3s ease-out;cursor:pointer;border:none;flex-shrink:0} .page-back:hover{background:var(--c1l);color:var(--c4);box-shadow:0 0 10px rgba(27,61,97,.1)} .page-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} .cat-grid{max-width:1360px;margin:0 auto;padding:0 16px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .cat-card{background:var(--w);border-radius:var(--r4);padding:20px;transition:border-color .3s ease-out,box-shadow .4s ease-out,transform .3s ease-out;cursor:pointer;border:1.5px solid transparent;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block} .cat-card:hover{border-color:rgba(0,180,98,.35);box-shadow:0 0 0 3px rgba(0,180,98,.08),0 0 16px rgba(0,180,98,.15),0 8px 20px rgba(0,0,0,.06);transform:translateY(-3px)} .cat-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-right:28px} .cat-card-ico{width:44px;height:44px;background:var(--c1l);border-radius:var(--r3);display:grid;place-items:center;flex-shrink:0;transition:background .25s} .cat-card:hover .cat-card-ico{background:var(--g1)} .cat-card-ico svg{width:24px;height:24px;stroke:var(--c3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s} .cat-card:hover .cat-card-ico svg{stroke:var(--g5)} .cat-card-title{font-size:15px;font-weight:700;color:var(--c1);line-height:1.3} .cat-card-cnt{font-size:12px;color:var(--n4);margin-top:2px} .cat-card-subs{display:flex;flex-wrap:wrap;gap:6px} .cat-sub-tag{font-size:11px;color:var(--n5);background:var(--n0);padding:4px 10px;border-radius:var(--rf);font-weight:500;transition:all .15s;white-space:nowrap} .cat-card:hover .cat-sub-tag{background:var(--g0);color:var(--g6)} .cat-card-arrow{position:absolute;top:20px;right:16px;width:20px;height:20px;color:var(--n3);transition:all .3s} .cat-card:hover .cat-card-arrow{color:var(--g5);transform:translateX(3px)} /* ═══ CATALOG: PRODUCT GRID (prod-*) ═══ */ .prod-grid{max-width:1360px;margin:0 auto;padding:0 16px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px} .prod-card{background:var(--w);border-radius:var(--r3);overflow:hidden;box-shadow:var(--s1);display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s} .prod-card:hover{transform:translateY(-2px);box-shadow:var(--s2)} .prod-fav{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;z-index:3;border:1px solid var(--n2);transition:all .2s} .prod-fav svg{width:14px;height:14px;stroke:var(--n4);fill:none;stroke-width:2} .prod-fav:hover svg{stroke:#EF4444} .prod-fav.on svg{stroke:#EF4444;fill:#EF4444} .prod-img{width:100%;aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .prod-img img{width:70%;height:70%;object-fit:contain} .prod-img-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--n3);font-size:12px} .prod-form-ico{position:absolute;top:6px;left:6px;width:22px;height:22px;background:var(--w);border:1px solid var(--n2);border-radius:5px;display:grid;place-items:center;z-index:1} .prod-form-ico svg{width:14px;height:14px;stroke:var(--n5);fill:none;stroke-width:1.8} .prod-tags{position:absolute;top:6px;left:32px;display:flex;gap:3px;z-index:1} .prod-tag{padding:1px 5px;border-radius:var(--rf);font-size:8px;font-weight:700;background:var(--w);border:1px solid var(--n2);color:var(--n5);white-space:nowrap} .prod-disc{position:absolute;top:8px;right:40px;background:#EF4444;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--rf);z-index:2} .prod-info-wrap{padding:10px 12px;display:flex;flex-direction:column;flex:1;gap:2px} .prod-name{font-size:12px;font-weight:700;color:var(--c2);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-transform:uppercase;min-height:30px} .prod-mfr{font-size:10px;color:var(--n5);font-weight:500} .prod-rating{display:flex;align-items:center;gap:3px;margin-top:2px} .prod-rating-stars{display:flex;gap:1px}.prod-rating-stars svg{width:11px;height:11px} .prod-rating-stars svg.f{fill:var(--warn);stroke:var(--warn)} .prod-rating-stars svg.e{fill:var(--n2);stroke:var(--n2)} .prod-rating-cnt{font-size:10px;color:var(--n4)} .prod-spacer{flex:1} .prod-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:8px 12px;border-top:1px solid var(--n1);margin-top:auto} .prod-price-row{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap} .prod-old-price{font-size:11px;color:var(--n4);text-decoration:line-through} .prod-price{font-size:14px;font-weight:800;color:var(--c1);line-height:1.1} .prod-price small{display:block;font-size:10px;font-weight:500;color:var(--n4);margin-top:1px} .prod-rx{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--info);margin-top:2px} .prod-rx svg{width:12px;height:12px;flex-shrink:0} .prod-norx{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--g6);margin-top:2px} .prod-norx svg{width:12px;height:12px;flex-shrink:0} .prod-avail{font-size:10px;font-weight:600;color:var(--g6)} .prod-bad{color:var(--n4)} .prod-oos{color:var(--n4);font-weight:500} .prod-actions{flex-shrink:0} .prod-btn{padding:7px 14px;border-radius:var(--r2);font-size:11px;font-weight:700;border:none;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:4px;font-family:var(--fb);white-space:nowrap} .prod-btn.choose{background:var(--g5);color:var(--w)}.prod-btn.choose:hover{background:var(--g6)} .prod-btn.book{background:var(--g5);color:var(--w)}.prod-btn.book:hover{background:var(--g6)} .prod-btn.notify{background:var(--n1);color:var(--n5)}.prod-btn.notify:hover{background:var(--n2)} .prod-qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--g4);border-radius:var(--rf);overflow:hidden} .prod-qty button{width:28px;height:28px;background:var(--g5);color:var(--w);display:grid;place-items:center;font-size:14px;font-weight:700;border:none;cursor:pointer}.prod-qty button:hover{background:var(--g6)} .prod-qty span{min-width:24px;text-align:center;font-size:12px;font-weight:700;color:var(--g6)} .prod-cart-go{height:28px;padding:0 10px;background:var(--g0);color:var(--g6);border:1.5px solid var(--g4);border-radius:var(--rf);font-size:10px;font-weight:700;display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap} .prod-cart-go:hover{background:var(--g1)} .prod-section{margin-bottom:24px}.prod-section-h{font-size:16px;font-weight:700;color:var(--c2);margin-bottom:12px;padding:0 16px} /* ═══ CATALOG: FILTERS & PAGINATION ═══ */ .filter-panel{position:fixed;inset:0;z-index:800;pointer-events:none} .filter-panel.open{pointer-events:auto} .filter-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .25s}.filter-panel.open .filter-backdrop{opacity:1} .filter-drawer{position:absolute;left:0;top:0;bottom:0;width:100%;max-width:340px;background:var(--w);transform:translateX(-100%);transition:transform .3s var(--e);display:flex;flex-direction:column;box-shadow:8px 0 30px rgba(0,0,0,.1)}.filter-panel.open .filter-drawer{transform:translateX(0)} .filter-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--n2);flex-shrink:0} .filter-head-t{font-size:16px;font-weight:700} .filter-close{width:32px;height:32px;border-radius:50%;background:var(--n1);display:grid;place-items:center}.filter-close svg{width:16px;height:16px;stroke:var(--n5)} .filter-body{flex:1;overflow-y:auto;padding:16px} .filter-group{margin-bottom:20px} .filter-group-title{font-size:13px;font-weight:700;color:var(--c2);margin-bottom:8px} .filter-check{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:var(--n7);cursor:pointer} .filter-check input{accent-color:var(--g5);width:16px;height:16px} .filter-check-green{color:var(--g6);font-weight:600} .filter-price{display:flex;gap:8px;align-items:center} .filter-price input{width:100%;height:36px;border:1.5px solid var(--n2);border-radius:var(--r2);padding:0 10px;font-size:13px;font-family:var(--fb)} .filter-search{width:100%;height:36px;border:1.5px solid var(--n2);border-radius:var(--r2);padding:0 10px;font-size:13px;font-family:var(--fb);margin-bottom:8px} .filter-actions{display:flex;gap:8px;padding:16px;border-top:1px solid var(--n2);flex-shrink:0} .filter-apply{flex:1;height:40px;border-radius:var(--r2);background:var(--g5);color:var(--w);font-size:14px;font-weight:700;border:none;cursor:pointer}.filter-apply:hover{background:var(--g6)} .filter-reset{height:40px;padding:0 16px;border-radius:var(--r2);background:var(--n1);color:var(--n5);font-size:13px;font-weight:600;border:none;cursor:pointer} .filter-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;max-width:1360px;margin:0 auto;flex-wrap:wrap} .filter-btn{display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:var(--rf);background:var(--w);border:1px solid var(--n2);font-size:12px;font-weight:600;color:var(--n7);cursor:pointer;transition:all .15s} .filter-btn:hover{border-color:var(--g5);color:var(--g6)} .filter-btn svg{width:14px;height:14px} .filter-sort{margin-left:auto;padding:6px 12px;border:1px solid var(--n2);border-radius:var(--r2);font-size:12px;font-weight:600;color:var(--n7);background:var(--w);cursor:pointer} .filter-show-btn{font-size:11px;color:var(--c4);font-weight:600;cursor:pointer} .pagi{display:flex;justify-content:center;gap:6px;padding:20px 16px;flex-wrap:wrap} .pagi a,.pagi span{width:36px;height:36px;border-radius:var(--r2);display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--n5);background:var(--w);border:1px solid var(--n2);transition:all .15s;text-decoration:none} .pagi a:hover{border-color:var(--g5);color:var(--g6)} .pagi-on{background:var(--g5) !important;color:var(--w) !important;border-color:var(--g5) !important} .pagi-dots{border:none !important;background:none !important} .pagi-next{font-size:12px;width:auto !important;padding:0 12px} /* ═══ CATALOG: PRODUCT MODAL (pm-*) ═══ */ .pm-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}.pm-overlay.open{opacity:1;pointer-events:auto} .pm-box{background:var(--w);width:100%;max-width:420px;max-height:85vh;border-radius:20px 20px 0 0;overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,.15);transform:translateY(100%);transition:transform .3s var(--e)}.pm-overlay.open .pm-box{transform:translateY(0)} .pm-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--n0);display:grid;place-items:center;cursor:pointer;z-index:2}.pm-close svg{width:16px;height:16px;stroke:var(--n5)} .pm-top{display:flex;gap:14px;padding:20px 16px 12px;align-items:flex-start;position:relative} .pm-img{width:80px;height:80px;border-radius:var(--r3);background:var(--n0);flex-shrink:0;display:grid;place-items:center;overflow:hidden;border:1px solid var(--n2)} .pm-img img{width:100%;height:100%;object-fit:contain;padding:6px} .pm-info{flex:1;min-width:0} .pm-name{font-size:15px;font-weight:700;color:var(--c2);line-height:1.3;margin-bottom:2px} .pm-mfr{font-size:12px;color:var(--n5);margin-bottom:4px} .pm-forms{display:flex;flex-wrap:wrap;gap:4px} .pm-forms-item{padding:3px 8px;border-radius:var(--rf);font-size:10px;font-weight:600;background:var(--n0);color:var(--n5);border:1px solid var(--n1)} .pm-divider{height:1px;background:var(--n1);margin:0 16px} .pm-variants-h{font-size:13px;font-weight:700;padding:12px 16px 8px;color:var(--c2)} .pm-variant{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--n1);transition:background .12s} .pm-variant:hover{background:var(--n0)} .pm-var-name{font-size:13px;font-weight:600;color:var(--n7);flex:1;min-width:0} .pm-var-price{font-size:14px;font-weight:800;color:var(--g6);white-space:nowrap} .pm-var-x{font-size:11px;color:var(--n5);margin-left:auto} .pm-var-buy{height:32px;padding:0 14px;border-radius:var(--rf);background:var(--g5);color:var(--w);font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap;border:none;cursor:pointer;font-family:var(--fb)}.pm-var-buy:hover{background:var(--g6)} .pm-var-order{height:32px;padding:0 14px;border-radius:var(--rf);background:var(--n1);color:var(--n5);font-size:11px;font-weight:600;border:none;cursor:pointer;font-family:var(--fb)} .pm-var-cart{display:flex;align-items:center;gap:0;border:1.5px solid var(--g4);border-radius:var(--rf);overflow:hidden} .pm-var-cart button{width:28px;height:28px;background:var(--g5);color:var(--w);display:grid;place-items:center;font-size:14px;font-weight:700;border:none;cursor:pointer} .pm-var-cart span{min-width:24px;text-align:center;font-size:12px;font-weight:700;color:var(--g6)} .pm-var-qty{font-size:10px;color:var(--n4);margin-right:6px} .pm-var-qty-num{font-weight:700;color:var(--g6)} .pm-analogs{padding:0 16px 16px} .pm-analogs-toggle{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--c4);cursor:pointer;padding:8px 0} .pm-analogs-toggle svg{width:14px;height:14px;transition:transform .2s} .pm-analog{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--n1)} .pm-analog-info{flex:1;min-width:0} .pm-analog-name{font-size:12px;font-weight:600;color:var(--n7)} .pm-analog-mfr{font-size:10px;color:var(--n4)} .pm-analog-price{font-size:13px;font-weight:700;color:var(--c2);white-space:nowrap} .pm-analog-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .pm-analog-btn{height:28px;padding:0 10px;border-radius:var(--rf);background:var(--c1l);color:var(--c4);font-size:10px;font-weight:600;border:none;cursor:pointer;font-family:var(--fb)} .pm-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--c4);cursor:pointer} .pm-toggle svg{width:14px;height:14px;transition:transform .2s} /* ═══ PRODUCT PAGE: BREADCRUMBS ═══ */ .bread{padding:8px 12px;max-width:1360px;margin:0 auto} .bread-in{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:11px;font-weight:500;color:var(--n4)} .bread-in a{color:var(--n5)}.bread-in a:hover{color:var(--g6)}.bread-sep{color:var(--n3);font-size:9px} /* ═══ PRODUCT PAGE: GALLERY ═══ */ .gal-main{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;touch-action:pan-y} .gal-main img{width:100%;height:100%;object-fit:contain;padding:20px;transition:transform .3s var(--e);background:#fff} .gal-badges{position:absolute;top:8px;left:8px;z-index:5;display:flex;flex-direction:column;gap:3px} .gal-fav{position:absolute;top:8px;right:8px;z-index:5;width:34px;height:34px;background:var(--w);border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.15);color:var(--n5);transition:all .2s;border:1.5px solid var(--n2)}.gal-fav:hover{color:var(--err);border-color:var(--err);box-shadow:0 3px 12px rgba(239,68,68,.25);transform:scale(1.08)}.gal-fav.on{color:var(--err);border-color:var(--err)}.gal-fav.on svg{fill:var(--err)}.gal-fav svg{width:16px;height:16px} .gal-bdg{padding:3px 8px;border-radius:16px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:4px;line-height:1;letter-spacing:.02em;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.08)} .gal-bdg.rx{background:rgba(239,68,68,.15);color:#DC2626;border:1px solid rgba(239,68,68,.25)} .gal-bdg.hit{background:var(--g0);color:var(--g6);border:1px solid rgba(0,180,98,.2)} .gal-bdg.rare{background:rgba(139,92,246,.15);color:#7C3AED;border:1px solid rgba(139,92,246,.25)} .gal-bdg svg{width:12px;height:12px;flex-shrink:0} .gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;background:var(--w);border-radius:50%;display:grid;place-items:center;box-shadow:var(--s2);z-index:5;color:var(--n7);opacity:0;pointer-events:none;transition:all .15s} .gal-nav svg{width:18px;height:18px}.gal-prev{left:10px}.gal-next{right:10px} .gal-dots{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0 14px;background:var(--w)} .gal-dot{width:8px;height:8px;border-radius:50%;background:var(--n2);transition:all .2s;cursor:pointer} .gal-dot.on{background:var(--g5);width:20px;border-radius:var(--rf)} .gal-thumbs{display:none;gap:8px;padding:12px} .gal-th{width:72px;height:72px;border-radius:var(--r2);border:2px solid var(--n1);overflow:hidden;cursor:pointer;flex-shrink:0;background:#fff} .gal-th:hover{border-color:var(--n3)}.gal-th.on{border-color:var(--g5);box-shadow:0 0 0 2px rgba(0,180,98,.2)} .gal-th img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff} .gal-disc{font-size:10px;color:var(--n4);text-align:center;padding:0 12px 10px;background:var(--w);font-weight:500} /* ═══ PRODUCT PAGE: INFO (pi-*) ═══ */ .pi-rx{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--rf);font-size:10px;font-weight:700;background:rgba(239,68,68,.08);color:#DC2626;border:1px solid rgba(239,68,68,.1);margin-bottom:6px} .pi-title{font-size:20px;font-weight:800;color:var(--c1);line-height:1.25;margin-bottom:2px} .pi-sub{font-size:12px;color:var(--n5);font-weight:500;margin-bottom:6px}.pi-sub a{color:var(--c4);border-bottom:1px dashed rgba(42,85,128,.3);transition:color .15s}.pi-sub a:hover{color:var(--g6)} .pi-qtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px} .pi-qt{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:600;color:var(--c4);background:var(--n0);border:1px solid var(--n1);cursor:pointer;transition:all .15s;white-space:nowrap;min-height:40px} .pi-qt:hover{background:rgba(42,85,128,.08);border-color:var(--c4)} .pi-rating{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap} .pi-stars{display:flex;gap:1px}.pi-stars svg{width:16px;height:16px}.pi-stars .f{fill:var(--warn);stroke:var(--warn)}.pi-stars .e{fill:var(--n2);stroke:var(--n2)} .pi-rnum{font-size:16px;font-weight:800;color:var(--n9)} .pi-rlink{font-size:13px;color:var(--c4);font-weight:600;cursor:pointer;border-bottom:1px dashed var(--c4)} .pi-meta{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--n1);border-bottom:1px solid var(--n1);margin-bottom:14px} .pi-mr{display:flex;align-items:baseline;gap:0;font-size:12px;padding:6px 0;border-bottom:1px solid var(--n1);transition:background .15s}.pi-mr:last-child{border-bottom:none}.pi-mr:hover{background:rgba(0,180,98,.03)} .pi-ml{color:var(--n5);font-weight:500;white-space:nowrap;flex-shrink:0} .pi-dot{flex:1;border-bottom:1px dashed var(--n2);margin:0 6px;min-width:12px;align-self:center} .pi-mv{font-weight:600;color:var(--n7);white-space:nowrap}.pi-mv a{color:var(--c4);border-bottom:1px dashed var(--c4)} .pi-mr.hl .pi-mv{font-weight:700;color:var(--n9)} .pi-vars{margin-bottom:12px;text-align:center}.pi-vars-t{font-size:12px;font-weight:700;color:var(--n7);margin-bottom:6px} .pi-vars-l{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .pi-var{padding:5px 10px;border-radius:var(--r2);font-size:10px;font-weight:600;border:1.5px solid var(--n2);color:var(--n7);cursor:pointer;background:var(--w);display:flex;flex-direction:column;gap:1px;min-width:60px;transition:all .15s} .pi-var:hover{border-color:var(--g5);color:var(--g6)} .pi-var.on{border-color:var(--g5);background:var(--g0);color:var(--g6);box-shadow:0 0 0 2px rgba(0,180,98,.12)} .pi-var-d{font-weight:700}.pi-var-p{font-size:11px;font-weight:500;color:var(--n5)}.pi-var.on .pi-var-p{color:var(--g6)} .pi-price{background:var(--g0);border-radius:var(--r3);padding:14px 16px;margin-bottom:12px;border-left:3px solid var(--g5)} .pi-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap} .pi-old{font-size:14px;color:var(--n4);text-decoration:line-through;font-weight:500} .pi-disc{font-size:11px;font-weight:700;color:#fff;background:#EF4444;padding:2px 6px;border-radius:6px;line-height:1.2} .pi-pf{font-size:14px;color:var(--n5);font-weight:500} .pi-pv{font-size:22px;font-weight:800;color:var(--g6);letter-spacing:-.5px;line-height:1.1} .pi-ph{font-size:11px;color:var(--n5);font-weight:500;display:flex;align-items:center;gap:4px}.pi-ph svg{width:14px;height:14px;color:var(--n4);flex-shrink:0} .pi-av{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-top:8px} .pi-av .avd{width:8px;height:8px;border-radius:50%} .pi-av.av-in .avd{background:var(--g5)}.pi-av.av-in{color:var(--g6)} .pi-av.av-low .avd{background:var(--warn)}.pi-av.av-low{color:#D97706} .pi-av.av-out .avd{background:var(--err)}.pi-av.av-out{color:var(--n4)} .pi-avc{font-weight:500;font-size:12px;color:var(--n5)} .pi-buy{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px} .pi-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--n5);font-weight:500}.pi-note svg{width:16px;height:16px;flex-shrink:0;color:var(--n4)} .pi-save{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--g6);margin-top:4px}.pi-save svg{width:14px;height:14px;flex-shrink:0} .pi-stock-bar{margin-top:6px;height:4px;border-radius:4px;background:var(--n1);overflow:hidden;max-width:180px} .pi-stock-fill{height:100%;border-radius:4px;transition:width .4s} .pi-stock-fill.high{background:var(--g5)}.pi-stock-fill.mid{background:var(--warn)}.pi-stock-fill.low{background:var(--err)} .pi-deliv{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .pi-deliv-tag{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:10px;font-size:11px;font-weight:600;background:var(--n0);border:1px solid var(--n1);color:var(--n6)} .pi-deliv-tag svg{width:16px;height:16px;flex-shrink:0;color:var(--g5)} .pi-social{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--n5);font-weight:500;margin-top:6px}.pi-social svg{width:14px;height:14px;color:var(--n4);flex-shrink:0} .pi-urgency{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#DC2626;margin-top:4px}.pi-urgency svg{width:14px;height:14px;flex-shrink:0} .pi-unit{font-size:12px;color:var(--n5);font-weight:500;margin-top:2px} .pi-acts{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--n1);margin-top:4px} .pi-act{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r2);font-size:12px;font-weight:600;color:var(--n5);background:var(--n0)}.pi-act:hover{color:var(--c2);background:var(--n1)}.pi-act svg{width:16px;height:16px} .pi-extra{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .pi-tag{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--rf);background:var(--n0);font-size:11px;font-weight:600;color:var(--n5);border:1px solid var(--n1)}.pi-tag svg{width:14px;height:14px;color:var(--n4)} .pi-section{padding:12px 0;border-bottom:1px solid var(--n1)}.pi-section:last-child{border-bottom:none} .pi-section-label{font-size:10px;font-weight:700;color:var(--n4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px} .pi-pay-badge{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;color:var(--c4);background:var(--c1ll);border:1px solid rgba(42,85,128,.12)} /* ═══ PRODUCT PAGE: BUY BUTTON ═══ */ .btn-b{width:100%;max-width:300px;padding:10px 16px;border-radius:var(--r2);font-size:13px;font-weight:700;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px} .btn-b.st-buy{background:linear-gradient(135deg,#00B462,#059652);color:var(--w);box-shadow:0 2px 12px rgba(0,180,98,.25)}.btn-b.st-buy:hover{background:linear-gradient(135deg,#059652,#047a42);box-shadow:0 4px 16px rgba(0,180,98,.35)}.btn-b.st-buy:active{transform:scale(.98)} .btn-b.st-out{background:var(--n1);color:var(--n4);cursor:default} .btn-b.st-sub{background:var(--c1l);color:var(--c4);border:1px solid rgba(42,85,128,.15);font-weight:600} .btn-b.st-load{background:var(--n1);color:var(--n5);cursor:wait} .btn-1click{width:100%;max-width:300px;padding:9px 16px;border-radius:10px;font-size:13px;font-weight:600;color:var(--n6);background:var(--w);border:1.5px solid var(--n2);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .15s;margin-top:6px} .btn-1click:hover{background:var(--n0);box-shadow:0 2px 8px rgba(0,0,0,.06)}.btn-1click:active{transform:scale(.98)} /* ═══ PRODUCT PAGE: TABS ═══ */ .tabs{background:var(--w);border-radius:var(--r4);box-shadow:var(--s1);overflow:hidden;margin-top:24px} .tabs-nav{display:flex;border-bottom:2px solid var(--n1);overflow-x:auto;scrollbar-width:none;position:relative}.tabs-nav::-webkit-scrollbar{display:none} .tab-b{padding:14px 20px;font-size:14px;font-weight:600;color:var(--n5);white-space:nowrap;position:relative;flex-shrink:0;cursor:pointer;border:none;background:none;font-family:var(--fb)} .tab-b::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:transparent} .tab-b:hover{color:var(--c2)}.tab-b.on{color:var(--g6)}.tab-b.on::after{background:var(--g5)} .tab-cnt{display:inline-flex;min-width:18px;height:18px;padding:0 5px;background:var(--n1);border-radius:var(--rf);font-size:10px;font-weight:700;color:var(--n5);margin-left:4px;align-items:center;justify-content:center} .tab-b.on .tab-cnt{background:var(--g1);color:var(--g6)} .tab-c{display:none;padding:20px 16px;animation:fadeIn .3s var(--e)}.tab-c.on{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* ═══ PRODUCT PAGE: INSTRUCTION ACCORDION ═══ */ .ins-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .ins-ql{padding:6px 12px;border-radius:var(--rf);font-size:12px;font-weight:600;color:var(--c4);background:var(--c1ll);border:1px solid rgba(42,85,128,.1);transition:all .15s;cursor:pointer} .ins-ql:hover{background:var(--c1l);color:var(--c2);border-color:var(--c4)} .ins-s{margin-bottom:4px} .ins-t{font-size:14px;font-weight:700;color:var(--c2);padding:12px 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--n1)} .ins-t:hover{color:var(--g6)}.ins-t svg{width:18px;height:18px;color:var(--n4);transition:transform .2s;flex-shrink:0} .ins-t.open svg{transform:rotate(180deg);color:var(--g6)} .ins-b{display:none;padding:12px 0;font-size:13px;line-height:1.65;color:var(--n7)}.ins-b.open{display:block} /* ═══ PRODUCT PAGE: REVIEWS ═══ */ .rev-sum{display:flex;align-items:center;gap:20px;padding:16px;background:var(--n0);border-radius:var(--r3);margin-bottom:20px} .rev-big{text-align:center}.rev-bn{font-size:36px;font-weight:800;color:var(--c1);line-height:1} .rev-bs{display:flex;gap:1px;justify-content:center;margin-top:4px}.rev-bs svg{width:14px;height:14px} .rev-bc{font-size:12px;color:var(--n5);font-weight:500;margin-top:2px} .rev-bars{flex:1;display:flex;flex-direction:column;gap:4px} .rbr{display:flex;align-items:center;gap:6px} .rbr-n{width:14px;text-align:center;font-size:11px;color:var(--n5)}.rbr-t{flex:1;height:6px;background:var(--n1);border-radius:var(--rf);overflow:hidden} .rbr-f{height:100%;border-radius:var(--rf);background:var(--warn)}.rbr-c{width:20px;text-align:right;font-size:11px;color:var(--n4)} .rev-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px} .rev-filter{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--n2);background:var(--w);color:var(--n6);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:4px} .rev-filter:hover{border-color:var(--n3);background:var(--n0)} .rev-filter.active{border-color:var(--g5);background:var(--g0);color:var(--g6)} .rev-card{padding:16px 0;border-bottom:1px solid var(--n1)}.rev-card:last-child{border-bottom:none} .rev-hd{display:flex;align-items:center;gap:10px;margin-bottom:8px} .rev-av{width:36px;height:36px;border-radius:50%;background:var(--c1l);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--c4);flex-shrink:0} .rev-av img{width:100%;height:100%;border-radius:50%;object-fit:cover} .rev-au{font-size:14px;font-weight:700;color:var(--n9)}.rev-dt{font-size:11px;color:var(--n4)} .rev-st{display:flex;gap:1px;margin-bottom:6px}.rev-st svg{width:12px;height:12px} .rev-tx{font-size:13px;line-height:1.65;color:var(--n7)} .rev-vf{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--g6);margin-top:6px}.rev-vf svg{width:14px;height:14px} .rev-photos{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.rev-photos img{width:64px;height:64px;border-radius:10px;object-fit:cover;cursor:pointer;border:1px solid var(--n2);transition:transform .2s}.rev-photos img:hover{transform:scale(1.05)} .rev-write-btn{width:100%;padding:12px;border-radius:10px;background:var(--w);border:2px solid var(--g5);color:var(--g6);font-weight:600;font-size:14px;font-family:inherit;cursor:pointer;margin-top:20px;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}.rev-write-btn:hover{background:var(--g0)} .rev-more-btn{width:100%;padding:12px;border-radius:10px;background:var(--n0);border:1px solid var(--n2);color:var(--n6);font-weight:600;font-size:14px;font-family:inherit;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px}.rev-more-btn:hover{background:var(--n1);border-color:var(--n3)} /* ═══ PRODUCT PAGE: PHARMACIES ═══ */ .pharm-t{font-size:18px;font-weight:800;color:var(--c2);margin-bottom:4px} .pharm-st{font-size:13px;color:var(--n5);font-weight:500;margin-bottom:16px} .pharm-cards{display:grid;grid-template-columns:1fr;gap:8px} .ph-c{padding:14px 16px;border:1px solid var(--n2);border-radius:var(--r3);transition:all .15s;display:flex;flex-direction:column;gap:6px}.ph-c:hover{border-color:var(--n3);box-shadow:var(--s1)} .ph-addr{font-size:13px;font-weight:600;color:var(--n9);line-height:1.3} .ph-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ph-hrs{font-size:12px;color:var(--n5);font-weight:500} .ph-stock{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:var(--rf)} .ph-stock.si{color:var(--g6);background:var(--g0)}.ph-stock.si .sd{width:6px;height:6px;border-radius:50%;background:var(--g5)} .ph-stock.sl{color:#D97706;background:rgba(245,158,11,.08)}.ph-stock.sl .sd{width:6px;height:6px;border-radius:50%;background:var(--warn)} .ph-pr{font-size:16px;font-weight:800;color:var(--g6);margin-left:auto;white-space:nowrap} /* ═══ PRODUCT PAGE: RELATED ═══ */ .rel-t{font-size:18px;font-weight:800;color:var(--c2);padding:0 16px;margin-bottom:12px} .rel-s{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 16px 16px;scroll-snap-type:x mandatory;scrollbar-width:none}.rel-s::-webkit-scrollbar{display:none} .rel-c{flex:0 0 160px;background:var(--w);border-radius:var(--r3);box-shadow:var(--s1);overflow:hidden;scroll-snap-align:start;transition:transform .15s,box-shadow .15s} .rel-c:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)} .rel-c:active{transform:scale(.98)} .rel-img{width:100%;aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center} .rel-img img{width:65%;height:65%;object-fit:contain} .rel-bd{padding:10px} .rel-ds{font-size:10px;color:var(--n4)}.rel-nm{font-size:12px;font-weight:700;color:var(--c2);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px;margin:2px 0 4px} .rel-pr{font-size:14px;font-weight:800;color:var(--c1)} .rel-av{font-size:10px;font-weight:600;display:flex;align-items:center;gap:3px;color:var(--g6);margin-top:2px}.rel-av .avd{width:5px;height:5px;border-radius:50%;background:var(--g5)} .rel-btn{margin-top:8px;padding:6px 0;background:var(--g5);color:var(--w);border-radius:6px;font-size:11px;font-weight:700;text-align:center;transition:background .2s,transform .15s;cursor:pointer;border:none;font-family:var(--fb)} .rel-c:hover .rel-btn{background:var(--g6)} /* ═══ PRODUCT PAGE: MOBILE BAR ═══ */ .mob-bar{position:fixed;bottom:56px;left:0;right:0;z-index:190;background:var(--w);border-top:1px solid var(--n2);padding:8px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 -2px 12px rgba(0,0,0,.08);transform:translateY(100%);transition:transform .3s var(--e)} .mob-bar.vis{transform:translateY(0)} .mob-inf{flex:1;min-width:0}.mob-pr{font-size:18px;font-weight:800;color:var(--c1);line-height:1.1} .mob-nm{font-size:10px;color:var(--n5);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mob-thumb{width:36px;height:36px;border-radius:8px;background:var(--w);border:1px solid var(--n2);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center} .mob-thumb img{width:100%;height:100%;object-fit:contain;padding:3px} .mob-btn{padding:10px 18px;border-radius:10px;background:linear-gradient(135deg,#00B462,#059652);color:var(--w);font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 2px 8px rgba(0,180,98,.2);display:flex;align-items:center;gap:5px;border:none;cursor:pointer;font-family:var(--fb)} .mob-btn:active{transform:scale(.97)}.mob-btn svg{width:16px;height:16px} /* ═══ PRODUCT PAGE: BLOG CARDS ═══ */ .blog-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .blog-hdr-t{font-size:18px;font-weight:800;color:var(--c2);display:flex;align-items:center;gap:8px} .blog-hdr-link{font-size:13px;font-weight:600;color:var(--c4);display:flex;align-items:center;gap:4px}.blog-hdr-link:hover{color:var(--g6)} .blog-grid{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}.blog-grid::-webkit-scrollbar{display:none} .blog-card{flex:0 0 260px;background:var(--w);border-radius:var(--r3);box-shadow:var(--s1);overflow:hidden;scroll-snap-align:start;transition:transform .15s}.blog-card:hover{transform:translateY(-2px);box-shadow:var(--s2)} .blog-card-img{width:100%;aspect-ratio:16/10;background:var(--n1);overflow:hidden}.blog-card-img img{width:100%;height:100%;object-fit:cover} .blog-card-body{padding:14px} .blog-card-title{font-size:14px;font-weight:700;color:var(--c2);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;margin-bottom:6px} .blog-card-desc{font-size:12px;color:var(--n5);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px} .blog-card-foot{display:flex;align-items:center;justify-content:space-between} .blog-card-author{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--n5)} .blog-card-ava{width:24px;height:24px;border-radius:50%;background:var(--c1l);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--c4)} .blog-card-more{font-size:12px;font-weight:600;color:var(--c4);display:flex;align-items:center;gap:3px}.blog-card-more:hover{color:var(--g6)} /* ═══ PRODUCT PAGE: ONE-CLICK ORDER (oc-*) ═══ */ .oc-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}.oc-overlay.open{opacity:1;pointer-events:auto} .oc-modal{background:#fff;border-radius:16px;width:90%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.15);padding:24px;position:relative;transform:translateY(20px);transition:transform .25s}.oc-overlay.open .oc-modal{transform:translateY(0)} .oc-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--n0);border:none;display:grid;place-items:center;cursor:pointer;color:var(--n5);transition:all .15s}.oc-close:hover{background:var(--n1);color:var(--n7)}.oc-close svg{width:16px;height:16px} .oc-title{font-size:18px;font-weight:800;color:var(--c1);margin-bottom:16px} .oc-product{display:flex;gap:12px;align-items:center;padding:12px;background:var(--n0);border-radius:10px;margin-bottom:16px} .oc-product img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#fff;padding:4px} .oc-product-info{flex:1;min-width:0}.oc-product-name{font-size:13px;font-weight:700;color:var(--n7);line-height:1.3} .oc-product-price{font-size:16px;font-weight:800;color:var(--g6);margin-top:2px} .oc-field{margin-bottom:14px}.oc-label{font-size:12px;font-weight:600;color:var(--n6);margin-bottom:4px}.oc-label .req{color:#EF4444} .oc-select,.oc-input{width:100%;padding:10px 12px;border:1.5px solid var(--n2);border-radius:10px;font-size:14px;font-weight:500;color:var(--n7);background:#fff;transition:border-color .15s;font-family:var(--fb)}.oc-select:focus,.oc-input:focus{outline:none;border-color:var(--g5)} .oc-ph-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding-right:4px} .oc-ph-card{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1.5px solid var(--n2);border-radius:10px;cursor:pointer;transition:all .15s;background:#fff;position:relative} .oc-ph-card:hover{border-color:var(--n3);background:var(--n0)} .oc-ph-card.selected{border-color:var(--g5);background:rgba(0,180,98,.04);box-shadow:0 0 0 1px var(--g5)} .oc-ph-card .oc-ph-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--n3);flex-shrink:0;margin-top:2px;display:grid;place-items:center;transition:all .15s} .oc-ph-card.selected .oc-ph-radio{border-color:var(--g5);background:var(--g5)}.oc-ph-card.selected .oc-ph-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff} .oc-ph-ico{width:32px;height:32px;flex-shrink:0;border-radius:8px;background:rgba(0,180,98,.1);display:grid;place-items:center;color:var(--g5)} .oc-ph-body{flex:1;min-width:0}.oc-ph-name{font-size:13px;font-weight:700;color:var(--n7);line-height:1.3} .oc-ph-addr{font-size:11px;color:var(--n4);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .oc-ph-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap} .oc-ph-price{font-size:14px;font-weight:800;color:var(--g6)} .oc-ph-stock{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px} .oc-ph-stock.si{color:#16a34a;background:rgba(22,163,74,.1)}.oc-ph-stock.sl{color:#D97706;background:rgba(217,119,6,.1)} .oc-submit{width:100%;padding:12px;border-radius:12px;background:var(--g5);color:#fff;font-size:15px;font-weight:700;border:none;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}.oc-submit:hover{background:var(--g6);box-shadow:var(--sg)}.oc-submit:active{transform:scale(.98)} .oc-note{font-size:10px;color:var(--n4);line-height:1.5;margin-top:12px}.oc-note a{color:var(--c4)} .oc-success{text-align:center;padding:20px 0} .oc-success-ico{width:56px;height:56px;border-radius:50%;background:var(--g0);display:grid;place-items:center;margin:0 auto 12px;color:var(--g5)} .oc-success h3{font-size:18px;font-weight:800;color:var(--c1);margin-bottom:4px} .oc-success .oc-order-num{font-size:13px;color:var(--n5);margin-bottom:12px} .oc-success-btn{display:block;width:100%;padding:11px;border-radius:10px;font-size:14px;font-weight:700;text-align:center;cursor:pointer;transition:all .15s;margin-bottom:8px;border:none} .oc-success-btn.primary{background:var(--g5);color:#fff}.oc-success-btn.primary:hover{background:var(--g6)} .oc-success-btn.secondary{background:var(--n0);color:var(--n6);border:1px solid var(--n2)}.oc-success-btn.secondary:hover{background:var(--n1)} /* ═══ CHECKOUT: STEPPER ═══ */ @keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(42,85,128,.25)}50%{box-shadow:0 0 0 6px rgba(42,85,128,0)}} @keyframes check-pop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}} @keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}} @keyframes spin{to{transform:rotate(360deg)}} .stepper{background:var(--w);padding:10px 16px;border-bottom:1px solid var(--n2);position:sticky;top:61px;z-index:99} .stepper-inner{max-width:460px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;position:relative} .stepper-inner::before{content:'';position:absolute;top:14px;left:32px;right:32px;height:2px;background:var(--n2);border-radius:2px} .stepper-prog{position:absolute;top:14px;left:32px;height:2px;background:linear-gradient(90deg,var(--g5),var(--g4));border-radius:2px;z-index:1;transition:width .6s var(--e);width:0} .stp{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:2;cursor:pointer;min-width:48px} .stp-c{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--w);border:2px solid var(--n2);transition:all .35s var(--e)} .stp-c svg{width:12px;height:12px;color:var(--n4);transition:all .3s}.stp-c .stp-chk{display:none} .stp-l{font-size:10px;font-weight:600;color:var(--n4);text-align:center;transition:all .3s;line-height:1.2} .stp.active .stp-c{background:var(--c4);border-color:var(--c4);animation:pulse-ring 2s ease infinite}.stp.active .stp-c svg{color:var(--w)}.stp.active .stp-l{color:var(--c4);font-weight:700} .stp.done .stp-c{background:var(--g5);border-color:var(--g5);animation:none}.stp.done .stp-c svg.stp-i{display:none}.stp.done .stp-c .stp-chk{display:block;color:var(--w);animation:check-pop .3s var(--e)}.stp.done .stp-l{color:var(--g6)} /* ═══ CHECKOUT: LAYOUT ═══ */ .co-layout{max-width:960px;margin:0 auto;padding:12px 16px;display:flex;gap:20px;align-items:flex-start} .co-wrap{flex:1;min-width:0;overflow:hidden;padding:0 10px;max-width:100%;margin:0 auto} .co-sidebar{width:280px;flex-shrink:0;position:sticky;top:80px;display:none} .co-sidebar-card{background:var(--w);border-radius:var(--r4);padding:16px;box-shadow:var(--s2)} .co-sidebar-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--n6);margin-bottom:8px}.co-sidebar-row strong{color:var(--n8)} .co-sidebar-divider{height:1px;background:var(--n2);margin:12px 0} .co-sidebar-total{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--n8)}.co-sidebar-total strong{font-size:17px;color:var(--c1)} .co-sidebar-btn{width:100%;height:40px;border-radius:var(--rf);background:var(--g5);color:var(--w);font-size:13px;font-weight:700;font-family:var(--fb);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;box-shadow:0 4px 14px rgba(0,180,98,.25);transition:all .15s;cursor:pointer;border:none}.co-sidebar-btn:hover{box-shadow:0 6px 20px rgba(0,180,98,.35);background:var(--g6)}.co-sidebar-btn svg{width:16px;height:16px} .step-panel{display:none;animation:slideIn .25s var(--e)}.step-panel.active{display:block;padding-bottom:8px} /* ═══ CHECKOUT: SECTIONS ═══ */ .co-sec{background:var(--w);border-radius:var(--r3);padding:14px;box-shadow:var(--s1);margin-bottom:10px;overflow:visible;position:relative;z-index:10} .co-sec-hd{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}.co-sec-hd svg{width:18px;height:18px;color:var(--c4);flex-shrink:0} .co-sec-sub{font-size:12px;color:var(--n5);margin:-8px 0 12px} .co-item{display:flex;gap:8px;padding:8px 10px;margin-bottom:5px;background:var(--n0);border-radius:var(--r3);transition:box-shadow .15s;align-items:center}.co-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)} .co-item-img{width:44px;height:44px;border-radius:var(--r3);background:var(--w);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--n2);overflow:hidden} .co-item-info{flex:1;min-width:0}.co-item-name{font-size:12px;font-weight:600;line-height:1.3;color:var(--n8)} .co-item-rx{display:inline-flex;font-size:8px;font-weight:700;color:var(--info);background:rgba(59,130,246,.08);padding:2px 6px;border-radius:var(--rf);margin-left:4px} .co-item-row{display:flex;align-items:center;justify-content:space-between;margin-top:5px} .co-item-price{font-size:13px;font-weight:800;color:var(--g6)}.co-item-price.zero{color:var(--n4)} .co-item-qty{display:flex;align-items:center;gap:0;border-radius:var(--rf);overflow:hidden;border:1.5px solid var(--g4);background:var(--w)} .co-item-qty button{width:24px;height:24px;background:var(--g5);color:var(--w);display:grid;place-items:center;font-size:13px;font-weight:700;border:none;cursor:pointer}.co-item-qty button:hover{background:var(--g6)} .co-item-qty span{font-size:12px;font-weight:800;min-width:24px;text-align:center;color:var(--g6)} .co-item-del{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--n4);transition:all .15s;flex-shrink:0;cursor:pointer}.co-item-del:hover{color:var(--err);background:rgba(239,68,68,.1)}.co-item-del svg{width:12px;height:12px} .co-rx{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:var(--r3);margin-top:10px;font-size:11px;color:var(--n7)}.co-rx svg{width:16px;height:16px;color:var(--warn);flex-shrink:0} .cart-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 0 0;border-top:1.5px solid var(--n1);margin-top:8px} .cart-bar-total{font-size:11px;color:var(--n5)}.cart-bar-total strong{font-size:14px;margin-left:4px;color:var(--c1)} /* ═══ CHECKOUT: FORM FIELDS ═══ */ .ff{margin-bottom:12px}.ff-label{display:block;font-size:11px;font-weight:600;color:var(--n7);margin-bottom:4px}.ff-label .req{color:var(--err)} .ff-row{display:flex;gap:8px;position:relative;z-index:20}.ff-row .ff-input{flex:1} .ff-input{width:100%;height:38px;padding:0 12px;border:1.5px solid var(--n2);border-radius:var(--r3);font-size:13px;font-family:var(--fb);color:var(--n9);background:var(--w);transition:all .15s;outline:none}.ff-input:focus{border-color:var(--c4);box-shadow:0 0 0 3px rgba(42,85,128,.1)}.ff-input.err{border-color:var(--err)}.ff-input:disabled{background:var(--n1);color:var(--n5)}.ff-input::placeholder{color:var(--n4)} .ff-err{font-size:12px;color:var(--err);margin-top:4px;display:none}.ff-err.show{display:block} /* ═══ CHECKOUT: BUTTONS ═══ */ .btn-next{height:38px;padding:0 20px;border-radius:var(--rf);background:var(--g5);color:var(--w);font-size:13px;font-weight:700;font-family:var(--fb);display:flex;align-items:center;gap:6px;box-shadow:0 3px 10px rgba(0,180,98,.2);border:none;cursor:pointer}.btn-next:hover{box-shadow:0 4px 16px rgba(0,180,98,.35)}.btn-next:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-next svg{width:14px;height:14px} .btn-back{height:34px;padding:0 14px;border-radius:var(--rf);background:var(--n1);color:var(--n7);font-size:12px;font-weight:600;font-family:var(--fb);display:flex;align-items:center;gap:5px;border:none;cursor:pointer}.btn-back:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}.btn-back svg{width:14px;height:14px} .step-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} .btn-code{height:38px;padding:0 16px;border-radius:var(--rf);background:var(--c4);color:var(--w);font-size:12px;font-weight:700;font-family:var(--fb);white-space:nowrap;flex-shrink:0;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center}.btn-code:hover{box-shadow:0 3px 12px rgba(19,46,74,.25)}.btn-code:disabled{opacity:.5;cursor:not-allowed}.btn-code.sent{background:var(--n2);color:var(--n5)} .btn-choose{width:100%;height:38px;border-radius:var(--rf);background:var(--w);color:var(--c4);font-size:12px;font-weight:700;font-family:var(--fb);border:1.5px solid var(--c4);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}.btn-choose:hover{box-shadow:0 3px 12px rgba(42,85,128,.15)}.btn-choose svg{width:14px;height:14px} .btn-req{width:100%;height:42px;border-radius:var(--r3);background:var(--c4);color:var(--w);font-size:14px;font-weight:700;font-family:var(--fb);margin-top:4px;border:none;cursor:pointer}.btn-req:hover{box-shadow:0 4px 16px rgba(19,46,74,.25)} /* ═══ CHECKOUT: OTP ═══ */ .otp-block{display:none;margin-top:12px;padding:12px;background:var(--c1ll);border:1px solid var(--c1l);border-radius:var(--r3);overflow:visible}.otp-block.show{display:block;animation:rise .3s var(--e)} .otp-methods-label{font-size:11px;font-weight:600;color:var(--n5);text-align:center;margin-bottom:6px} .otp-methods{display:flex;justify-content:center;gap:6px;margin-bottom:10px} .otp-method{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border:1.5px solid var(--n2);border-radius:var(--r2);cursor:pointer;transition:all .2s;background:var(--w);min-width:56px}.otp-method svg{width:20px;height:20px}.otp-method span{font-size:9px;font-weight:600;color:var(--n5)} .otp-method:hover{border-color:var(--c4);background:var(--n0)} .otp-method.on{border-color:var(--c4);background:var(--c1ll);box-shadow:0 0 0 1.5px rgba(42,85,128,.1)}.otp-method.on span{color:var(--c2);font-weight:700} .otp-heading{font-size:13px;font-weight:700;margin-bottom:2px} .btn-otp{width:100%;height:36px;border-radius:var(--r2);background:var(--c4);color:var(--w);font-size:13px;font-weight:700;font-family:var(--fb);border:none;cursor:pointer}.btn-otp:hover{box-shadow:0 4px 16px rgba(19,46,74,.25)}.btn-otp:disabled{opacity:.5;box-shadow:none} .otp-fallback{text-align:center;font-size:11px;color:var(--n5);margin-top:6px}.otp-fallback a{color:var(--c4);text-decoration:underline;cursor:pointer} .otp-error{display:none;padding:8px 12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);border-radius:var(--r2);font-size:12px;color:var(--err);margin-top:8px}.otp-error.show{display:block} .otp-calling{display:none;text-align:center;font-size:13px;color:var(--n7);margin-top:10px}.otp-calling.show{display:flex;align-items:center;justify-content:center;gap:8px} .otp-calling .spinner{width:16px;height:16px;border:2px solid var(--n2);border-top-color:var(--c4);border-radius:50%;animation:spin .6s linear infinite} .contact-ok{display:none;padding:14px 16px;background:var(--g1);border:1px solid rgba(5,150,82,.15);border-radius:var(--r3);font-size:14px;color:var(--g6);font-weight:600;align-items:center;gap:8px}.contact-ok.show{display:flex;animation:rise .3s var(--e)}.contact-ok svg{width:20px;height:20px;flex-shrink:0} .contact-change{font-size:13px;color:var(--c4);cursor:pointer;margin-left:auto;text-decoration:underline} /* ═══ CHECKOUT: PHARMACY PICKER ═══ */ .pickup-info{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.pickup-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--n7)}.pickup-row svg{width:14px;height:14px;color:var(--c4);flex-shrink:0} .no-city-label{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14px;color:var(--n7);cursor:pointer;padding:12px 14px;border-radius:var(--r3);border:1px solid var(--n2);user-select:none}.no-city-label:hover{border-color:var(--c4)}.no-city-label input{accent-color:var(--c4);width:20px;height:20px} .no-city-form{display:none;margin-top:12px;padding:16px;background:var(--c1ll);border:1px solid var(--c1l);border-radius:var(--r3);animation:rise .3s var(--e)}.no-city-form.show{display:block} .no-city-hint{font-size:13px;color:var(--n5);margin-bottom:14px} /* ═══ CHECKOUT: PHARMACY MODAL (phmod-*) ═══ */ .phmod-ov{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.4);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:all .25s}.phmod-ov.on{opacity:1;visibility:visible} .phmod{position:fixed;z-index:1010;background:var(--w);display:flex;flex-direction:column;transition:all .3s var(--e);top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);opacity:0;visibility:hidden;width:calc(100% - 32px);max-width:420px;max-height:65vh;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.15)}.phmod.on{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible} .phmod-head{padding:12px 14px 0;flex-shrink:0;position:relative} .phmod-close{position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--n1);z-index:2;border:none;cursor:pointer}.phmod-close svg{width:14px;height:14px;stroke:var(--n5)} .phmod-title{font-size:14px;font-weight:700;margin-bottom:8px;padding-right:36px} .phmod-srch-w{position:relative;margin-bottom:8px}.phmod-srch-w svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--n4)} .phmod-srch{width:100%;height:32px;border:1.5px solid var(--n2);border-radius:var(--r2);padding:0 10px 0 30px;font-size:12px;font-family:var(--fb);outline:none}.phmod-srch:focus{border-color:var(--c4)}.phmod-srch::placeholder{color:var(--n4)} .phmod-warn{display:none;align-items:center;gap:6px;padding:6px 10px;background:rgba(245,158,11,.08);border-radius:var(--r2);font-size:10px;color:#92400E;margin-bottom:8px}.phmod-warn.show{display:flex}.phmod-warn svg{width:13px;height:13px;color:var(--warn);flex-shrink:0} .phmod-list{overflow-y:auto;flex:1;padding:0 14px 14px} .phmod-item{display:flex;align-items:center;gap:10px;padding:10px;border:1.5px solid var(--n2);border-radius:var(--r2);cursor:pointer;transition:all .15s;margin-bottom:6px}.phmod-item:hover{border-color:var(--c4);background:var(--n0)}.phmod-item.on{border-color:var(--g5);background:rgba(0,180,98,.04)} .phmod-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--n3);flex-shrink:0;display:grid;place-items:center;transition:all .15s} .phmod-item.on .phmod-radio{border-color:var(--g5);background:var(--g5)}.phmod-item.on .phmod-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--w)} .phmod-info{flex:1;min-width:0}.phmod-a{font-size:12px;font-weight:600;line-height:1.3} .phmod-row{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap} .phmod-h{font-size:10px;color:var(--n5)} .phmod-av-badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:var(--rf);display:inline-flex;align-items:center;gap:3px} .phmod-av-badge.full{background:rgba(0,180,98,.1);color:var(--g6)}.phmod-av-badge.partial{background:rgba(245,158,11,.1);color:#92400E} .phmod-right{text-align:right;flex-shrink:0}.phmod-p{font-size:13px;font-weight:800;color:var(--c2)} .phmod-route{font-size:9px;color:var(--c4);font-weight:600;display:flex;align-items:center;gap:2px;margin-top:2px;cursor:pointer}.phmod-route svg{width:10px;height:10px} /* ═══ CHECKOUT: PAYMENT & ORDER ═══ */ .pay-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--n2);border-radius:var(--r3);background:var(--n0);margin-bottom:12px} .pay-ico{width:40px;height:40px;border-radius:var(--r3);background:var(--w);display:grid;place-items:center;box-shadow:var(--s1)}.pay-ico svg{width:24px;height:24px;color:var(--c4)} .pay-label{font-size:13px;font-weight:700}.pay-desc{font-size:11px;color:var(--n5);margin-top:2px} .order-sum{margin-bottom:16px}.order-sum-title{font-size:14px;font-weight:700;margin-bottom:10px} .order-line{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--n7)}.ol-name{flex:1;padding-right:12px}.ol-qty{color:var(--n5);margin-right:8px;font-size:12px}.ol-price{font-weight:600} .order-line.unavail{color:var(--n4)}.order-line.unavail .ol-name{text-decoration:line-through} .order-max-note{font-size:12px;color:var(--n5);font-style:italic;margin-top:8px;padding-top:8px;border-top:1px solid var(--n1)} .co-total-big{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1.5px solid var(--n2);margin-top:6px}.co-total-big span:first-child{font-size:13px;font-weight:700}.co-total-big span:last-child{font-size:16px;font-weight:800;color:var(--g6)} .co-submit{width:100%;height:40px;background:var(--g5);color:var(--w);border-radius:var(--rf);font-size:14px;font-weight:700;font-family:var(--fb);margin-top:12px;box-shadow:0 3px 12px rgba(0,180,98,.25);display:flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer}.co-submit:hover{box-shadow:0 4px 20px rgba(0,180,98,.4)}.co-submit:disabled{opacity:.5;box-shadow:none} .co-agree{font-size:10px;color:var(--n4);text-align:center;margin-top:8px}.co-agree a{color:var(--c4);text-decoration:underline} .co-empty{text-align:center;padding:40px 16px;animation:rise .4s var(--e)}.co-empty-ico{width:60px;height:60px;margin:0 auto 12px;background:var(--n1);border-radius:50%;display:grid;place-items:center}.co-empty-ico svg{width:28px;height:28px;color:var(--n3)} .co-empty h2{font-size:17px;font-weight:700;margin-bottom:6px}.co-empty p{font-size:12px;color:var(--n5);margin-bottom:16px} .co-empty-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 20px;background:var(--g5);color:var(--w);border-radius:var(--rf);font-size:13px;font-weight:700;text-decoration:none} .co-success{text-align:center;padding:60px 20px;display:none;animation:rise .4s var(--e)} .btm-total{flex:1}.btm-total-label{font-size:10px;color:var(--n5)}.btm-total-price{font-size:14px;font-weight:800} .btm-btn{height:38px;padding:0 20px;border-radius:var(--rf);background:var(--g5);color:var(--w);font-size:13px;font-weight:700;font-family:var(--fb);box-shadow:0 3px 10px rgba(0,180,98,.2);display:flex;align-items:center;gap:5px;white-space:nowrap;border:none;cursor:pointer}.btm-btn:hover{box-shadow:0 4px 16px rgba(0,180,98,.35)}.btm-btn:disabled{opacity:.5;box-shadow:none}.btm-btn svg{width:14px;height:14px} /* ═══ CHECKOUT: CROSS-SELL (mn-*) ═══ */ .mn-sec{margin:20px 0 12px;padding:0}.mn-title{font-size:16px;font-weight:800;margin-bottom:10px} .mn-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}.mn-track::-webkit-scrollbar{display:none} .mn-wrap{position:relative;overflow:hidden;padding:0 20px;margin:0 -20px;max-width:100vw} .mn-arr{position:absolute;top:50%;transform:translateY(-70%);width:36px;height:36px;border-radius:50%;background:var(--w);border:1px solid var(--n2);display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:var(--s2);color:var(--n5)}.mn-arr svg{width:18px;height:18px}.mn-arr.left{left:-4px}.mn-arr.right{right:-4px} .mn-card{width:140px;min-width:140px;flex-shrink:0;scroll-snap-align:start;background:var(--w);border-radius:var(--r4);padding:8px;border:1px solid var(--n2);display:flex;flex-direction:column;transition:all .2s}.mn-card:hover{border-color:var(--g5);box-shadow:var(--s1)} .mn-img{width:100%;aspect-ratio:1;border-radius:var(--r3);background:var(--n0);display:grid;place-items:center;margin-bottom:8px;position:relative} .mn-ph{font-size:28px;color:var(--n3)}.mn-badge{position:absolute;top:4px;right:4px;background:var(--g0);color:var(--g6);font-size:9px;font-weight:700;padding:2px 5px;border-radius:var(--rf)} .mn-rx{position:absolute;bottom:6px;left:6px;background:rgba(59,130,246,.1);color:var(--info);font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px} .mn-name{font-size:11px;font-weight:600;line-height:1.3;margin-bottom:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:28px} .mn-price{font-size:13px;font-weight:800;color:var(--g6);margin:6px 0} .mn-btn{width:100%;height:30px;border-radius:var(--rf);background:var(--g5);color:var(--w);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--fb);border:none;cursor:pointer}.mn-btn:hover{box-shadow:0 3px 10px rgba(0,180,98,.3)} /* ═══ CHECKOUT: SUCCESS (ok-*) ═══ */ @keyframes okCircle{to{stroke-dashoffset:0}} @keyframes okCheck{to{stroke-dashoffset:0}} @keyframes pulse-step{0%,100%{box-shadow:0 0 0 0 rgba(42,85,128,.2)}50%{box-shadow:0 0 0 5px rgba(42,85,128,0)}} .ok-layout{max-width:520px;margin:-30px auto 0;padding:0 12px;overflow-x:hidden} .ok-card{background:var(--w);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.06),0 12px 40px rgba(0,0,0,.1);overflow:hidden;position:relative;max-width:100%} .ok-card-accent{height:3px;background:linear-gradient(90deg,var(--g5),var(--g4) 50%,var(--c4))} .ok-stamp{position:absolute;top:45px;right:14px;width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(-12deg);z-index:3}.ok-stamp svg{width:100px;height:100px} .ok-card-hdr{padding:10px 16px 8px;display:flex;justify-content:space-between;align-items:flex-start} .ok-card-org{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--c2)}.ok-card-org-sub{font-size:8px;color:var(--n4);margin-top:1px} .ok-card-lic{text-align:right;font-size:7px;color:var(--n4);line-height:1.6}.ok-card-lic strong{color:var(--n5)} .ok-card-div{height:1px;margin:0 16px;background:var(--n2)} .ok-check-anim{text-align:center;margin:8px auto 4px;width:32px;height:32px} .ok-check-svg{width:32px;height:32px}.ok-check-circle{stroke-dasharray:166;stroke-dashoffset:166;animation:okCircle .6s ease-out .2s forwards}.ok-check-path{stroke-dasharray:48;stroke-dashoffset:48;animation:okCheck .3s ease-out .7s forwards} .ok-card-title{text-align:center;padding:0 16px 8px}.ok-card-title h2{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--c1);margin-bottom:1px} .ok-card-title-meta{font-size:9px;color:var(--n4)}.ok-card-title-meta strong{color:var(--c2)} .ok-status-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px} .ok-status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--rf);background:rgba(43,94,167,.1);border:1px solid rgba(43,94,167,.18)} .ok-status-pulse{width:6px;height:6px;border-radius:50%;background:#2b5ea7;position:relative}.ok-status-pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:inherit;opacity:.3;animation:ring 2s ease infinite} .ok-status-badge span{font-size:10px;font-weight:700;color:#2b5ea7} .ok-tracker{padding:0 16px 8px} .ok-steps{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding:0}.ok-steps::before{content:'';position:absolute;top:9px;left:24px;right:24px;height:2px;background:var(--n2);border-radius:2px} .ok-steps-prog{position:absolute;top:9px;left:24px;height:2px;background:linear-gradient(90deg,var(--g5),var(--g4));border-radius:2px;transition:width .6s var(--e)} .ok-st{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;z-index:2;min-width:0;flex:1} .ok-st-dot{width:18px;height:18px;border-radius:50%;background:var(--n1);border:2px solid var(--n2);display:grid;place-items:center;transition:all .3s}.ok-st-dot svg{width:9px;height:9px;stroke:var(--n3);fill:none;stroke-width:2.5} .ok-st-t{font-size:8px;color:var(--n4);font-weight:500;text-align:center;line-height:1.2}.ok-st-time{font-size:7px;color:var(--n3)} .ok-st.done .ok-st-dot{background:var(--g5);border-color:var(--g5)}.ok-st.done .ok-st-dot svg{stroke:var(--w)}.ok-st.done .ok-st-t{color:var(--g6);font-weight:600} .ok-st.current .ok-st-dot{background:var(--c4);border-color:var(--c4);animation:pulse-step 2s ease-in-out infinite}.ok-st.current .ok-st-dot svg{stroke:var(--w)}.ok-st.current .ok-st-t{color:var(--c4);font-weight:700} .ok-doc-items{padding:6px 16px}.ok-doc-item{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--n1);font-size:10px}.ok-doc-item:last-child{border-bottom:none} .ok-doc-item-name{color:var(--n7);flex:1}.ok-doc-item-qty{color:var(--n4);width:36px;text-align:center}.ok-doc-item-price{color:var(--c2);font-weight:700;text-align:right;min-width:60px} .ok-doc-totals{padding:6px 16px 8px;background:var(--n0)}.ok-doc-trow{display:flex;justify-content:space-between;padding:2px 0;font-size:10px;color:var(--n4)}.ok-doc-trow span:last-child{color:var(--n5);font-weight:600} .ok-doc-trow.main{margin-top:4px;padding-top:4px;border-top:1.5px solid var(--n3)}.ok-doc-trow.main span:first-child{font-size:12px;font-weight:700;color:var(--c1)}.ok-doc-trow.main span:last-child{font-size:13px;font-weight:800;color:var(--c1)} .ok-green{color:var(--g6) !important;font-weight:700 !important} .ok-doc-delivery{padding:6px 16px;font-size:9px;color:var(--n5);line-height:1.5}.ok-doc-delivery strong{display:block;font-size:7px;color:var(--n4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px} .ok-doc-footer{padding:6px 16px 8px;border-top:1px solid var(--n1);font-size:7px;color:var(--n4);text-align:center} .ok-actions{display:flex;gap:6px;padding:10px 16px 12px;flex-wrap:wrap} .ok-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:7px 12px;border-radius:var(--rf);font-weight:700;font-size:10px;cursor:pointer;transition:all .2s;border:none;font-family:var(--fb);text-decoration:none;flex:1;min-width:0}.ok-btn svg{width:13px;height:13px;flex-shrink:0} .ok-btn.primary{background:var(--g5);color:var(--w);box-shadow:0 3px 12px rgba(0,180,98,.2)}.ok-btn.primary:hover{background:var(--g6)} .ok-btn.outline{background:var(--w);color:var(--c4);border:1.5px solid var(--n2)}.ok-btn.outline:hover{border-color:var(--c4);background:var(--c1ll)} .ok-btn.ghost{background:var(--n0);color:var(--n5)}.ok-btn.ghost:hover{background:var(--n1);color:var(--n7)} .ok-print-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:5px;font-size:9px;font-weight:600;color:var(--n4);cursor:pointer;margin:0 16px 6px;border:1px dashed var(--n2);border-radius:var(--r2);background:none}.ok-print-btn:hover{color:var(--c4);border-color:var(--c4);background:var(--c1ll)}.ok-print-btn svg{width:14px;height:14px} /* ═══ SEARCH: RESULTS (sr-*) ═══ */ .sr-wrap{max-width:1200px;margin:0 auto;padding:20px 16px} .sr-head{margin-bottom:20px}.sr-title{font-size:22px;font-weight:800;color:var(--n9);line-height:1.3}.sr-title mark{background:none;color:var(--g6);font-weight:800} .sr-count{font-size:14px;color:var(--n5);margin-top:4px} .sr-filters{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;position:sticky;top:62px;z-index:50;background:var(--n0);padding:8px 0;margin:-8px 0 8px} .sr-filter{padding:6px 14px;border-radius:var(--rf);font-size:13px;font-weight:600;color:var(--n5);background:var(--w);border:1px solid var(--n2);cursor:pointer;transition:all .15s;white-space:nowrap}.sr-filter:hover{border-color:var(--g5);color:var(--g6)}.sr-filter.on{background:var(--g1);border-color:var(--g5);color:var(--g6)} .sr-toggle{display:flex;align-items:center;gap:6px;margin-left:8px;cursor:pointer;font-size:11px;font-weight:600;color:var(--n5)} .sr-toggle-sw{width:32px;height:18px;border-radius:9px;background:var(--n3);position:relative;transition:background .2s}.sr-toggle-sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--w);transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)} .sr-toggle.on .sr-toggle-sw{background:var(--g5)}.sr-toggle.on .sr-toggle-sw::after{transform:translateX(14px)} .sr-sort{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--n5)} .sr-sort select{padding:6px 28px 6px 10px;border:1px solid var(--n2);border-radius:var(--r2);font-size:13px;font-weight:600;color:var(--n7);background:var(--w);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:10px} .sr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .sr-empty{text-align:center;padding:60px 20px} .sr-empty-ico{width:100px;height:100px;margin:0 auto 20px;background:var(--n1);border-radius:50%;display:grid;place-items:center}.sr-empty-ico svg{width:48px;height:48px;color:var(--n3)} .sr-empty h2{font-size:20px;font-weight:700;color:var(--n9);margin-bottom:8px}.sr-empty p{font-size:15px;color:var(--n5);max-width:400px;margin:0 auto 20px;line-height:1.5} .sr-empty-tips{text-align:left;max-width:340px;margin:0 auto;padding:16px 20px;background:var(--w);border-radius:var(--r3);box-shadow:var(--s1)}.sr-empty-tips h3{font-size:13px;font-weight:700;color:var(--n7);margin-bottom:8px} .sr-empty-tips li{font-size:13px;color:var(--n5);padding:3px 0;list-style:none;position:relative;padding-left:16px}.sr-empty-tips li::before{content:'•';position:absolute;left:0;color:var(--g5);font-weight:700} .sr-pop{margin-top:24px}.sr-pop-title{font-size:14px;font-weight:700;color:var(--n7);margin-bottom:12px} .sr-pop-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.sr-pop-tags a{padding:8px 16px;background:var(--w);border:1px solid var(--n2);border-radius:var(--rf);font-size:13px;font-weight:600;color:var(--c4);transition:all .15s;text-decoration:none}.sr-pop-tags a:hover{border-color:var(--g5);color:var(--g6);background:var(--g0)} .sr-loading{text-align:center;padding:60px 20px}.sr-loading-spinner{width:40px;height:40px;border:4px solid var(--n2);border-top-color:var(--g5);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 16px}.sr-loading p{font-size:15px;color:var(--n5)} .sr-pag{display:flex;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap} .sr-pag-btn{width:36px;height:36px;border-radius:var(--r2);display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--n5);background:var(--w);border:1px solid var(--n2);cursor:pointer;transition:all .15s}.sr-pag-btn:hover{border-color:var(--g5);color:var(--g6)}.sr-pag-btn.on{background:var(--g5);color:var(--w);border-color:var(--g5)} .sr-pag-dots{width:36px;height:36px;display:grid;place-items:center;font-size:14px;color:var(--n4)} .sr-disc{text-align:center;padding:16px;font-size:11px;color:var(--n4);line-height:1.4} .sr-cta{background:linear-gradient(135deg,var(--c2),var(--c3));border-radius:16px;padding:20px 24px;margin-top:16px;display:flex;align-items:center;gap:16px;color:var(--w)} .sr-cta-ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0}.sr-cta-ico svg{width:22px;height:22px;stroke:var(--g4)} .sr-cta-text h3{font-size:14px;font-weight:700;margin-bottom:2px}.sr-cta-text p{font-size:11px;opacity:.7;margin-bottom:8px} .sr-cta-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:var(--g5);color:var(--w);border-radius:var(--rf);font-size:11px;font-weight:700;text-decoration:none} .srch-history{display:none;padding:8px 16px;background:var(--w);border-radius:var(--r3);box-shadow:var(--s2);margin-top:4px}.srch-history.show{display:block} .srch-history-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.srch-history-hd span{font-size:11px;font-weight:600;color:var(--n4)}.srch-history-hd a{font-size:10px;color:var(--n4);cursor:pointer} .srch-history-tags{display:flex;flex-wrap:wrap;gap:4px}.srch-history-tag{font-size:11px;padding:4px 10px;background:var(--n1);border-radius:var(--rf);color:var(--n6);cursor:pointer;transition:all .15s}.srch-history-tag:hover{background:var(--g0);color:var(--g6)} /* ═══ SEARCH: CATEGORY BROWSE (cb-*) ═══ */ .cb-bread{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:4px;flex-wrap:wrap}.cb-bread a{color:var(--g6);font-weight:600}.cb-bread span{color:var(--n4)} .cb-title{font-family:var(--fd);font-size:1.4rem;font-weight:700;color:var(--c1);margin-bottom:16px} .cb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .cb-card{display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;border-radius:var(--r3);overflow:hidden;transition:transform .2s,box-shadow .2s;background:var(--w);box-shadow:var(--s1)}.cb-card:hover{transform:translateY(-2px);box-shadow:var(--s2)}.cb-card:active{transform:scale(.97)} .cb-card-img{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.cb-card-img svg{width:44%;height:44%;opacity:.85} .cb-card-nm{padding:8px 6px 10px;font-size:12px;font-weight:600;color:var(--n8);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cb-list{display:flex;flex-direction:column;gap:0;background:var(--w);border-radius:var(--r3);box-shadow:var(--s1);overflow:hidden} .cb-list-item{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--n1);text-decoration:none;color:inherit}.cb-list-item:last-child{border-bottom:none}.cb-list-item:hover{background:var(--n0)} .cb-list-ico{width:56px;height:56px;border-radius:var(--r2);background:var(--n0);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:1px solid var(--n1)}.cb-list-ico svg{width:28px;height:28px;opacity:.7} .cb-list-info{flex:1;min-width:0}.cb-list-nm{font-size:14px;font-weight:600;color:var(--n8);line-height:1.3}.cb-list-cnt{font-size:11px;color:var(--n4);margin-top:2px} .cb-list-arr{width:20px;height:20px;color:var(--n3);flex-shrink:0} .cb-list-all{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:14px;font-weight:700;color:var(--g6);cursor:pointer;transition:background .12s;text-decoration:none}.cb-list-all:hover{background:var(--g0)} .cb-list-all-ico{width:56px;height:56px;border-radius:var(--r2);background:var(--g0);display:flex;align-items:center;justify-content:center;flex-shrink:0}.cb-list-all-ico svg{width:24px;height:24px;color:var(--g6)} .cb-back{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--rf);background:var(--n1);color:var(--n6);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:12px;transition:all .15s;border:none;font-family:var(--fb)}.cb-back:hover{background:var(--n2);color:var(--n8)}.cb-back svg{width:16px;height:16px} .cb-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-bottom:8px} .cb-flt{padding:8px 16px;background:var(--w);border:1.5px solid var(--n2);border-radius:var(--rf);font-size:12px;font-weight:600;color:var(--n7);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px}.cb-flt:hover{border-color:var(--g5);color:var(--g6)}.cb-flt svg{width:14px;height:14px} /* ═══ SEARCH: PRODUCT CARD BADGES ═══ */ .pc-badges{position:absolute;top:8px;left:8px;z-index:5;display:flex;flex-direction:column;gap:4px} .pc-badge{padding:3px 8px;border-radius:var(--rf);font-size:9px;font-weight:700;letter-spacing:.02em;line-height:1.3} .pc-badge.rx{background:rgba(239,68,68,.1);color:#DC2626;border:1px solid rgba(239,68,68,.15)} .pc-badge.rare{background:rgba(139,92,246,.1);color:#7C3AED;border:1px solid rgba(139,92,246,.15)} .pc-badge.hit{background:rgba(245,158,11,.1);color:#D97706;border:1px solid rgba(245,158,11,.15)} .pc-badge.new{background:rgba(0,180,98,.1);color:var(--g6);border:1px solid rgba(0,180,98,.15)} .pc-body{padding:10px 12px;display:flex;flex-direction:column;flex:1;gap:4px} .pc-dose{font-size:11px;font-weight:500;color:var(--n4);line-height:1.2} .pc-name{font-size:13px;font-weight:700;color:var(--c2);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}.pc-name mark{background:none;color:var(--g6);font-weight:700} .pc-maker{font-size:11px;color:var(--n5);font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pc-stars{display:flex;gap:1px}.pc-stars svg{width:12px;height:12px} .pc-rv{font-size:11px;color:var(--n4);font-weight:500} .pc-foot{padding:8px 12px;border-top:1px solid var(--n1);display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto} .pc-price{font-size:15px;font-weight:800;color:var(--n9);white-space:nowrap}.pc-price small{font-size:10px;font-weight:500;color:var(--n4);margin-right:2px} .pc-cart{height:32px;padding:0 12px;background:var(--g5);color:var(--w);border-radius:var(--r2);font-size:12px;font-weight:700;display:flex;align-items:center;gap:4px;transition:background .15s;white-space:nowrap;flex-shrink:0;border:none;cursor:pointer;font-family:var(--fb)}.pc-cart:hover{background:var(--g6)}.pc-cart svg{width:14px;height:14px} /* ═══ HOMEPAGE: EXTENDED PC-* ═══ */ .pc-bottom{margin-top:auto} .pc-fav{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.85);border:1.5px solid rgba(0,0,0,.06);display:grid;place-items:center;cursor:pointer;transition:all .35s;z-index:3}.pc-fav svg{width:13px;height:13px;stroke:var(--n4);fill:none;stroke-width:2;transition:all .35s}.pc-fav:hover svg{stroke:#EF4444}.pc-fav.on svg{stroke:#EF4444;fill:#EF4444} .pc-form-ico{position:absolute;top:6px;left:6px;width:22px;height:22px;background:var(--w);border:1px solid var(--n2);border-radius:5px;display:grid;place-items:center;z-index:1}.pc-form-ico svg{width:14px;height:14px;stroke:var(--n5);fill:none;stroke-width:1.8} .pc-tags{position:absolute;top:6px;left:32px;display:flex;gap:3px;z-index:1} .pc-tag{padding:1px 5px;border-radius:var(--rf);font-size:8px;font-weight:700;background:var(--w);border:1px solid var(--n2);color:var(--n5);white-space:nowrap} .pc-mfr{font-size:9px;color:var(--n4);font-style:italic;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px} .pc-rating{display:flex;align-items:center;gap:2px;margin-bottom:3px;min-height:14px} .pc-rating-stars{display:flex;gap:1px}.pc-rating-stars svg{width:10px;height:10px} .pc-rating-cnt{font-size:9px;color:var(--n4)} .pc-form-txt{font-size:9px;color:var(--n5);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px} /* ═══ HOMEPAGE: DEALS GRID ═══ */ .deals-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0 12px} .deals-wrap::-webkit-scrollbar{display:none} .deals-grid{display:flex;gap:12px;align-items:stretch} .deal-card{flex-shrink:0;width:180px;min-height:220px;border-radius:16px;background:var(--w);color:var(--c2);padding:16px;position:relative;display:flex;flex-direction:column;gap:8px;border:1px solid var(--n2);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:box-shadow .2s,border-color .2s} .deal-card:hover{border-color:var(--g4);box-shadow:0 4px 16px rgba(0,176,98,.10)} .deal-card--green{border-left:3px solid #00B462} .deal-card--purple{border-left:3px solid #7B2FFF} .deal-card--orange{border-left:3px solid #FF6B00} .deal-card--teal{border-left:3px solid #00A5A5} .deal-badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#FF6B00,#FF3B3B);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;box-shadow:0 2px 6px rgba(255,59,59,.3)} .deal-cat{font-size:10px;color:var(--n5);text-transform:uppercase;letter-spacing:.8px;font-weight:600} .deal-emoji{font-size:32px;line-height:1;margin:2px 0} .deal-title{font-size:13px;font-weight:600;line-height:1.35;color:var(--c2)} .deal-prices{display:flex;align-items:center;gap:8px;margin-top:2px} .deal-old{font-size:12px;color:var(--n4);text-decoration:line-through} .deal-new{font-size:18px;font-weight:700;color:#00B462} .deal-timer{font-size:11px;color:#FF6B00;font-weight:600;margin-top:auto} .deal-btn{background:#00B462;border:none;color:#fff;border-radius:10px;padding:9px;font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:background .2s;box-shadow:0 2px 6px rgba(0,180,98,.25);margin-top:auto;text-decoration:none;display:block} .deal-btn:hover{background:#00994F} @media(min-width:768px){.deals-grid{flex-wrap:wrap;justify-content:center;gap:14px}.deal-card{width:calc(20% - 12px);min-width:160px;max-width:200px}} /* ═══ HOMEPAGE: THEMATIC TABS ═══ */ .th-tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:4px} .th-tabs-wrap::-webkit-scrollbar{display:none} .th-tabs{display:flex;gap:6px;min-width:max-content} .th-tab{padding:10px 16px;border-radius:var(--rf);font-size:13px;font-weight:600;color:var(--n5);background:var(--n1);border:1.5px solid var(--n2);white-space:nowrap;min-height:42px;display:flex;align-items:center;gap:5px;transition:all var(--d);cursor:pointer;font-family:var(--fb)} .th-tab.on{background:var(--c2);color:var(--w);border-color:var(--c2)} .th-panel{display:none} .th-panel.on{display:block} .th-head{display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px} .th-info{display:flex;align-items:center;gap:10px} .th-ico{font-size:24px;display:flex;align-items:center} .th-info strong{font-size:14px;color:var(--c2)} .th-sub{font-size:11px;color:var(--n4)} /* ═══ HOMEPAGE: FAQ ═══ */ .faq-list{max-width:800px;margin:0 auto;padding:0 16px} .faq-item{border-bottom:1px solid var(--n2)} .faq-q{width:100%;padding:16px 0;background:none;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;color:var(--c2);text-align:left;font-family:var(--fb);cursor:pointer;transition:color .2s}.faq-q:hover{color:var(--g6)} .faq-q svg{width:20px;height:20px;flex-shrink:0;transition:transform .3s var(--e);stroke:var(--n4)} .faq-item.open .faq-q svg{transform:rotate(180deg);stroke:var(--g5)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--e)} .faq-a-inner{padding:0 0 16px;font-size:14px;color:var(--n6);line-height:1.6} .faq-item.open .faq-a{max-height:1000px} /* ═══ HOMEPAGE: GEO CITIES ═══ */ .geo-grid{display:grid;grid-template-columns:1fr;gap:12px} .geo-city{padding:20px;background:var(--w);border:1px solid var(--n2);border-radius:var(--r3);display:flex;gap:16px;align-items:flex-start;transition:all .2s var(--e)}.geo-city:hover{border-color:var(--c4);box-shadow:var(--s2);transform:translateY(-2px)} .geo-city-ico{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.geo-city-ico svg{width:44px;height:44px} .geo-city-name{font-weight:700;font-size:15px;color:var(--c2)} .geo-city-addr{font-size:12px;color:var(--n5);margin-top:2px;line-height:1.4} .geo-city-phone{font-size:13px;font-weight:600;color:var(--g6);text-decoration:none;margin-top:4px;display:inline-block}.geo-city-phone:hover{color:var(--g5)} .geo-city-lic{font-size:10px;color:var(--n4);margin-top:4px} /* ═══ HOMEPAGE: SCROLL TOP ═══ */ .scroll-top{position:fixed;bottom:80px;right:16px;z-index:400;width:44px;height:44px;border-radius:50%;background:var(--g5);color:var(--w);border:none;box-shadow:0 4px 16px rgba(0,180,98,.35);display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.7) translateY(20px);pointer-events:none;transition:all .3s var(--e)}.scroll-top.show{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}.scroll-top:hover{background:var(--g6);transform:scale(1.1) translateY(-2px)}.scroll-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5} /* ═══ NOTIFICATION BADGES (shared) ═══ */ .ntf-box{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s}.ntf-box.open{opacity:1;pointer-events:auto} .ntf-overlay{position:absolute;inset:0} .ntf-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--n0);display:grid;place-items:center;cursor:pointer;border:none}.ntf-close svg{width:14px;height:14px;stroke:var(--n5)} .ntf-title{font-size:16px;font-weight:700;color:var(--c2);margin-bottom:6px} .ntf-hint{font-size:12px;color:var(--n5);margin-bottom:12px} .ntf-drug{font-size:13px;font-weight:600;color:var(--n7);margin-bottom:16px;padding:10px;background:var(--n0);border-radius:var(--r2)} .ntf-label{font-size:12px;font-weight:600;color:var(--n7);margin-bottom:4px} .ntf-input{width:100%;height:40px;border:1.5px solid var(--n2);border-radius:var(--r2);padding:0 12px;font-size:14px;font-family:var(--fb);margin-bottom:12px}.ntf-input:focus{outline:none;border-color:var(--g5)} .ntf-submit{width:100%;height:40px;border-radius:var(--r2);background:var(--g5);color:var(--w);font-size:14px;font-weight:700;border:none;cursor:pointer;font-family:var(--fb)}.ntf-submit:hover{background:var(--g6)} /* ═══ RESPONSIVE: DESKTOP ADDITIONS ═══ */ @media(min-width:768px){ .cat-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:0 24px 40px} .prod-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:0 24px 40px} .sr-grid{grid-template-columns:repeat(3,1fr);gap:12px} .cb-grid{grid-template-columns:repeat(4,1fr);gap:12px} .geo-grid{grid-template-columns:repeat(2,1fr)} .pharm-cards{grid-template-columns:1fr 1fr;gap:10px} .co-sidebar{display:block} .gal-nav{opacity:.7;pointer-events:auto}.gal-nav:hover{opacity:1} .gal-thumbs{display:flex} .bread{padding:10px 32px}.pp{padding:0 32px 40px} .rel-c{flex:0 0 220px} .blog-grid{gap:16px} } @media(min-width:1200px){ .cat-grid,.prod-grid,.page-head,.filter-bar{max-width:1360px;margin-left:auto;margin-right:auto} .sr-wrap{max-width:1280px} .sr-grid{grid-template-columns:repeat(4,1fr)} .cb-grid{grid-template-columns:repeat(5,1fr)} .geo-grid{grid-template-columns:repeat(3,1fr)} } /* ═══ MODALS ═══ */ /* OVERLAY */ .mod-ov{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:all .25s var(--e)} .mod-ov.on{opacity:1;visibility:visible} /* CENTER MODAL */ .mod{position:fixed;z-index:910;top:50%;left:50%;transform:translate(-50%,-50%) scale(.94);background:var(--w);border-radius:20px;width:calc(100% - 32px);max-width:400px;padding:28px 24px;box-shadow:0 24px 64px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:all .25s var(--e)} .mod.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)} .mod-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--n1);transition:background .15s} .mod-close:hover{background:var(--n2)} .mod-close svg{width:18px;height:18px;stroke:var(--n5)} .mod-title{font-size:22px;font-weight:700;color:var(--n9);margin-bottom:6px} .mod-sub{font-size:14px;color:var(--n5);margin-bottom:20px;line-height:1.5} /* INPUT */ .mod-field{margin-bottom:16px} .mod-label{display:block;font-size:13px;font-weight:600;color:var(--n7);margin-bottom:6px} .mod-input{width:100%;height:48px;border:2px solid var(--n2);border-radius:12px;padding:0 16px;font-size:16px;font-family:var(--fb);color:var(--n9);transition:border-color .15s;outline:none;background:var(--w)} .mod-input:focus{border-color:var(--g5)} .mod-input.err{border-color:var(--err)} .mod-err{font-size:12px;color:var(--err);margin-top:4px;display:none} /* BUTTON */ .mod-btn{width:100%;height:50px;border-radius:12px;background:var(--g5);color:var(--w);font-size:16px;font-weight:700;font-family:var(--fb);border:none;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px} .mod-btn:hover{background:var(--g6)} .mod-btn:disabled{opacity:.5;cursor:not-allowed} .mod-btn.sec{background:var(--w);color:var(--g6);border:2px solid var(--g5)} /* OTP */ .otp-wrap{display:flex;gap:10px;justify-content:center;margin-bottom:20px} .otp-input{width:52px;height:56px;border:2px solid var(--n2);border-radius:12px;text-align:center;font-size:24px;font-weight:700;font-family:var(--fb);color:var(--n9);outline:none;transition:border-color .15s} .otp-input:focus{border-color:var(--g5)} .otp-via{text-align:center;margin-bottom:16px;font-size:13px;color:var(--n5)} .otp-via svg{vertical-align:middle;margin-right:4px} .otp-timer{text-align:center;font-size:13px;color:var(--n4);margin-top:12px} .otp-timer a{color:var(--g6);font-weight:600;cursor:pointer} .otp-back{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--c4);font-weight:600;cursor:pointer;margin-top:16px;justify-content:center} /* CART SIDEBAR */ .cart-sb{position:fixed;top:0;right:-100%;width:100%;max-width:420px;height:100%;z-index:920;background:var(--w);box-shadow:-8px 0 40px rgba(0,0,0,.15);display:flex;flex-direction:column;transition:right .3s var(--e)} .cart-sb.on{right:0} .cart-sb-hd{padding:16px 20px;border-bottom:1px solid var(--n2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .cart-sb-t{font-size:18px;font-weight:700;color:var(--n9)} .cart-sb-cnt{font-size:14px;color:var(--n5);font-weight:500} .cart-sb-body{flex:1;overflow-y:auto;padding:16px 20px} .cart-sb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--n4)} .cart-sb-empty svg{width:64px;height:64px;margin-bottom:16px;stroke:var(--n3)} .cart-sb-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--n1)} .cart-sb-img{width:60px;height:60px;border-radius:10px;background:var(--n1);flex-shrink:0;display:grid;place-items:center;font-weight:800;color:var(--n3);font-size:14px} .cart-sb-info{flex:1;min-width:0} .cart-sb-nm{font-size:14px;font-weight:600;color:var(--n9);line-height:1.3;margin-bottom:2px} .cart-sb-dose{font-size:12px;color:var(--n5)} .cart-sb-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px} .cart-sb-pr{font-weight:700;font-size:15px;color:var(--n9)} .cart-sb-qty{display:flex;align-items:center;gap:0;border:1px solid var(--n2);border-radius:8px;overflow:hidden} .cart-sb-qty button{width:32px;height:30px;display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--n7);background:var(--n0)} .cart-sb-qty button:hover{background:var(--n2)} .cart-sb-qty span{width:28px;text-align:center;font-size:14px;font-weight:600} .cart-sb-del{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:var(--n4);cursor:pointer;transition:all .15s;flex-shrink:0;margin-left:4px} .cart-sb-del:hover{background:#FEE2E2;color:var(--err)} .cart-sb-del svg{width:16px;height:16px} .cart-sb-ft{padding:16px 20px;border-top:1px solid var(--n2);flex-shrink:0;background:var(--w)} .cart-sb-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .cart-sb-tl{font-size:14px;color:var(--n5)} .cart-sb-tv{font-size:20px;font-weight:800;color:var(--n9)} /* CITY MODAL */ .city-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;cursor:pointer;transition:background .15s;border:2px solid transparent;margin-bottom:6px} .city-opt:hover{background:var(--n0)} .city-opt.on{border-color:var(--g5);background:var(--g0)} .city-opt-name{font-weight:600;font-size:15px;color:var(--n9)} .city-opt-info{font-size:12px;color:var(--n5)} .city-opt-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--n3);display:grid;place-items:center;flex-shrink:0;margin-left:auto;transition:all .15s} .city-opt.on .city-opt-check{border-color:var(--g5);background:var(--g5)} /* CONFIRM */ .confirm-msg{font-size:15px;color:var(--n7);line-height:1.6;margin-bottom:20px} .confirm-btns{display:flex;gap:10px} .confirm-btns .mod-btn{flex:1}