:root{
  --page:#f5f7fa;--surface:#fff;--text:#111820;--muted:#6b7480;--tile:#252525;--tile-hover:#1c1c1c;
  --navy:#162b64;--navy2:#0d3d7d;--red:#d43c44;--green:#20b642;--orange:#f39a0a;
  --shadow:0 4px 10px rgba(0,0,0,.18);--card-shadow:0 4px 18px rgba(35,43,59,.16);
}
html[data-theme="dark"]{--page:#101318;--surface:#171b21;--text:#f1f4f7;--muted:#a7b0bc;--tile:#222;--tile-hover:#2a2a2a;--navy:#10214f;--navy2:#082f65;--card-shadow:0 4px 18px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--page);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:16px}button,a{font:inherit}button{cursor:pointer}.svg-icon{width:38px;height:38px;display:inline-flex;flex:0 0 38px}.svg-icon svg{width:100%;height:100%}.svg-icon svg:not([fill]){fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.topbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid rgba(110,120,136,.16);box-shadow:0 1px 4px rgba(20,31,51,.05)}.topbar-inner{height:72px;max-width:1584px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:16px}.icon-button{width:42px;height:42px;border:0;background:transparent;color:#33404f;border-radius:7px;display:grid;place-items:center}.icon-button:hover{background:rgba(70,83,102,.08)}.icon-button .svg-icon{width:23px;height:23px;flex-basis:23px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);font-weight:900;letter-spacing:.3px}.brand-mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#3148ae,#ed3b72);color:#fff;display:grid;place-items:center}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.login-button{height:38px;padding:0 21px;border:1.5px solid var(--red);background:transparent;color:var(--red);border-radius:5px;font-weight:700}.notification-button{position:relative}.notification-dot{position:absolute;right:8px;top:8px;width:7px;height:7px;background:#e44949;border-radius:50%;border:2px solid var(--surface)}.language-button,.profile-button{height:42px;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:8px;border-radius:7px;padding:0 9px}.language-button:hover,.profile-button:hover{background:rgba(70,83,102,.08)}.uk-flag{width:25px;height:16px;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.15);background:linear-gradient(27deg,transparent 44%,#fff 44% 50%,#c8102e 50% 56%,#fff 56% 62%,transparent 62%),linear-gradient(-27deg,transparent 44%,#fff 44% 50%,#c8102e 50% 56%,#fff 56% 62%,transparent 62%),linear-gradient(#012169 0 40%,#fff 40% 47%,#c8102e 47% 53%,#fff 53% 60%,#012169 60%)}.profile-button .svg-icon{width:22px;height:22px;flex-basis:22px}.profile-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}.profile-copy small{color:var(--muted);font-size:10px}.profile-copy b{font-size:13px}.notification-popover,.language-menu{position:absolute;right:165px;top:64px;width:230px;padding:14px;background:var(--surface);border:1px solid rgba(120,130,146,.25);border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.16);color:var(--text)}.notification-popover p{margin:8px 0 0;color:var(--muted);font-size:13px}.language-menu{right:87px;width:240px}.language-menu button{width:100%;text-align:left;padding:8px;border:0;border-radius:5px;background:rgba(64,80,110,.07);color:var(--text)}.language-menu span{display:block;color:var(--muted);font-size:11px;margin-top:8px}
.page-shell{max-width:1584px;margin:0 auto;padding:23px 16px 70px}.category-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-bottom:32px}.category-card{height:75px;border:0;background:var(--tile);color:#fff;border-radius:6px;display:flex;align-items:center;gap:12px;padding:0 30px;font-weight:800;font-size:18px;text-align:left;box-shadow:var(--shadow);white-space:nowrap;overflow:hidden;transition:transform .16s ease,background .16s}.category-card:hover{background:var(--tile-hover);transform:translateY(-1px)}.category-card .svg-icon{width:38px;height:38px;flex-basis:38px}.c1,.c2,.c3,.c4,.c5{grid-column:span 12}.c6,.c10{grid-column:span 12}.c7{grid-column:span 12}.c8,.c9{grid-column:span 12}.c11{grid-column:span 12}.c12{grid-column:span 12}.c13{grid-column:span 12}.c14,.c15,.c16,.c17,.c18{grid-column:span 12}.c19{grid-column:1/-1}
.catalog-section{background:var(--surface);padding-bottom:34px;box-shadow:0 0 0 1px rgba(94,107,124,.02)}.section-title{height:80px;background:linear-gradient(90deg,#172862 0%,#133271 55%,#0e3c7b 100%);color:#fff;display:flex;align-items:center;gap:13px;padding:0 27px}.section-title h1{margin:0;font-size:26px;letter-spacing:-.2px}.section-icon{width:22px;height:22px;flex-basis:22px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;padding:49px 24px 0}.product-card{position:relative;min-height:390px;background:var(--surface);border:1px solid rgba(136,148,164,.16);border-radius:18px;box-shadow:var(--card-shadow);padding:24px 24px 18px;display:flex;flex-direction:column}.product-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start}.product-head h2{margin:2px 0 0;font-size:18px;line-height:1.3;font-weight:700}.product-icon{width:53px;height:53px;flex-basis:53px}.details-icon{border:0;background:transparent;color:#617485;padding:0}.details-icon .svg-icon{width:27px;height:27px;flex-basis:27px}.feature-list{list-style:none;padding:10px 0 2px;margin:8px 0;flex:1}.feature-list li{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:15px}.check{width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900;font-size:11px;flex:0 0 16px}.product-bottom{border-top:1px solid rgba(130,140,154,.22);padding-top:14px;display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px}.product-bottom small{display:block;color:var(--muted);font-size:13px;margin-bottom:7px}.product-bottom strong{font-size:14px}.product-stock strong{display:inline-block;background:#3570f5;color:#fff;border-radius:5px;padding:6px 10px}.product-price{font-size:20px;font-weight:700;color:var(--orange);white-space:nowrap}.buy-button{height:42px;margin-top:14px;border:0;border-radius:4px;background:#263c8c;color:#fff;font-weight:800}.buy-button:hover{background:#1d3077}
.floating-support{position:fixed;right:16px;bottom:43px;display:flex;flex-direction:column;align-items:center;z-index:40}.floating-support button{border:0;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}.promo-wheel{width:79px;height:79px;border-radius:50%;border:5px solid #f8be13!important;background:conic-gradient(#3145d9 0 12.5%,#fff 0 25%,#2b94ee 0 37.5%,#fff 0 50%,#8a4cdf 0 62.5%,#fff 0 75%,#ff7b2d 0 87.5%,#fff 0)!important;color:#1e3377!important;font-size:27px}.telegram-button{width:63px;height:63px;border-radius:50%;background:#079bd4;font-size:29px;margin-top:-17px}.telegram-button.lower{margin-top:8px}.drawer{position:fixed;left:-305px;top:0;bottom:0;width:286px;z-index:80;background:linear-gradient(180deg,#342d35 0,#2d2b4f 40%,#203772 100%);color:#fff;padding:31px 22px 22px;transition:left .23s ease;box-shadow:7px 0 20px rgba(0,0,0,.3)}.drawer.open{left:0}.drawer-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s}.drawer-backdrop.show{opacity:1;pointer-events:auto}.drawer-close{position:absolute;right:13px;top:10px;border:0;background:transparent;color:#fff;font-size:30px}.drawer-logo{height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.drawer-logo-mark{font-size:55px;line-height:54px;color:#ff2d82;border-bottom:5px solid #ff2d82}.drawer-logo strong{font-size:12px;letter-spacing:2px}.drawer-balance{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.11);padding:14px 0 17px}.drawer nav{display:flex;flex-direction:column;padding-top:9px}.drawer nav a,.drawer nav button{border:0;background:transparent;color:#fff;text-decoration:none;text-align:left;display:flex;gap:13px;align-items:center;padding:12px 3px;border-radius:5px;font-size:14px}.drawer nav a:hover,.drawer nav button:hover{background:rgba(255,255,255,.08)}.drawer-foot{position:absolute;left:22px;bottom:20px;font-size:10px;color:#91a6d0;letter-spacing:2px}.details-dialog{width:min(500px,calc(100vw - 30px));border:0;border-radius:14px;padding:26px;color:var(--text);background:var(--surface);box-shadow:0 20px 50px rgba(0,0,0,.3)}.details-dialog::backdrop{background:rgba(8,13,22,.45)}.dialog-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:26px;color:var(--text)}.dialog-primary{border:0;background:#263c8c;color:#fff;border-radius:5px;padding:10px 18px;font-weight:700}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#20252d;color:#fff;border-radius:7px;padding:11px 17px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1100px){.c1,.c2,.c3,.c4,.c5{grid-column:span 12}.category-grid{grid-template-columns:repeat(60,minmax(0,1fr))}.c1{grid-column:span 13}.c2{grid-column:span 12}.c3{grid-column:span 13}.c4{grid-column:span 11}.c5{grid-column:span 11}.c6{grid-column:span 16}.c7{grid-column:span 10}.c8{grid-column:span 7}.c9{grid-column:span 8}.c10{grid-column:span 19}.c11{grid-column:span 26}.c12{grid-column:span 18}.c13{grid-column:span 16}.c14{grid-column:span 13}.c15{grid-column:span 11}.c16{grid-column:span 17}.c17{grid-column:span 10}.c18{grid-column:span 9}.c19{grid-column:1/-1}}
@media(max-width:1099px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-card{grid-column:auto;height:66px;padding:0 18px;font-size:14px;white-space:normal}.c19{grid-column:1/-1}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.topbar-inner{height:66px}.brand{display:none}.profile-copy{display:none}}
@media(max-width:720px){.topbar-inner{padding:0 10px;gap:4px}.top-actions{gap:2px}.login-button{padding:0 12px}.language-button{padding:0 5px}.language-button span:nth-child(2),.caret{display:none}.profile-button{padding:0 4px}.page-shell{padding:12px 10px 55px}.category-grid{grid-template-columns:1fr;gap:8px;margin-bottom:20px}.category-card,.c19{grid-column:auto;height:58px;padding:0 13px;font-size:12px}.category-card .svg-icon{width:31px;height:31px;flex-basis:31px}.section-title{height:64px;padding:0 18px}.section-title h1{font-size:21px}.product-grid{grid-template-columns:1fr;padding:22px 11px 0;gap:18px}.product-card{min-height:auto;padding:20px}.product-head h2{font-size:16px}.product-bottom{grid-template-columns:1fr 1fr}.product-price{grid-column:1/-1;text-align:right}.floating-support{right:7px;bottom:18px}.promo-wheel{width:62px;height:62px}.telegram-button{width:51px;height:51px}.notification-popover{right:54px}.language-menu{right:15px}}


/* =========================================================
   Stage 2 — reference screenshot visual refinement
   ========================================================= */
:root{
  --page-bg:#f5f6f8;
  --surface:#ffffff;
  --text:#111827;
  --muted:#657487;
  --tile:#252525;
  --tile-hover:#2c2c2c;
  --navy-a:#17275f;
  --navy-b:#0d3c78;
  --green:#22b43a;
  --orange:#ff9800;
  --red:#e33a3a;
  --shadow:0 3px 7px rgba(0,0,0,.18);
  --card-shadow:0 3px 18px rgba(30,45,70,.12);
}
html{scroll-behavior:smooth}
body{background:var(--page-bg);font-family:Arial,Helvetica,sans-serif}
.topbar{background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:none}
.topbar-inner{height:62px;max-width:1584px;padding:0 16px;gap:12px}
.brand{font-size:15px}.brand-mark{width:30px;height:30px;border-radius:6px}
.login-button{height:36px;padding:0 18px;border-radius:5px;font-size:13px}
.icon-button,.language-button,.profile-button{height:38px}.icon-button{width:38px}
.page-shell{max-width:1584px;padding:22px 10px 64px}
.category-grid{gap:12px;margin-bottom:32px}
.category-card{height:75px;padding:0 31px;border-radius:6px;font-size:18px;letter-spacing:.05px;box-shadow:0 3px 7px rgba(0,0,0,.22)}
.category-card .svg-icon{width:38px;height:38px;flex-basis:38px}
.catalog-section{padding-bottom:30px;background:#fff}
.section-title{height:80px;padding:0 26px;background:linear-gradient(90deg,var(--navy-a),var(--navy-b));gap:13px}
.section-title h1{font-size:26px;font-weight:800}
.@media (min-width:721px){
    .product-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:35px;
        padding:49px 24px 0;
    }
.product-card{min-height:360px;border-radius:18px;padding:24px 24px 17px;border:1px solid #edf0f3;box-shadow:0 3px 18px rgba(26,38,62,.13)}
.product-head{gap:18px}.product-head h2{font-size:18px;line-height:1.31;font-weight:700;color:#121826}
.product-icon{width:53px;height:53px;flex-basis:53px}.details-icon{margin-top:1px}
.feature-list{padding:9px 0 0;margin:7px 0}.feature-list li{margin:9px 0;font-size:15px;color:#314255}
.check{width:16px;height:16px;flex-basis:16px;font-size:10px;background:#20b43a}
.product-bottom{padding-top:13px;gap:12px}.product-bottom small{font-size:13px;margin-bottom:6px}.product-bottom strong{font-size:14px}.product-stock strong{padding:5px 10px;border-radius:5px;background:#3776f6}.product-price{font-size:20px;color:#ff9700;font-weight:700}
.buy-button{height:40px;margin-top:13px;background:#263b8d;border-radius:4px}
.floating-support{right:18px;bottom:21px}.promo-wheel{width:80px;height:80px}.telegram-button{width:64px;height:64px}
@media(min-width:1100px){
  .category-grid{grid-template-columns:repeat(60,minmax(0,1fr))}
  .c1{grid-column:span 13}.c2{grid-column:span 12}.c3{grid-column:span 13}.c4{grid-column:span 11}.c5{grid-column:span 11}
  .c6{grid-column:span 16}.c7{grid-column:span 10}.c8{grid-column:span 7}.c9{grid-column:span 8}.c10{grid-column:span 19}
  .c11{grid-column:span 26}.c12{grid-column:span 18}.c13{grid-column:span 16}
  .c14{grid-column:span 13}.c15{grid-column:span 11}.c16{grid-column:span 17}.c17{grid-column:span 10}.c18{grid-column:span 9}
  .c19{grid-column:1/-1}
}
@media(max-width:1099px){
  .page-shell{padding-left:14px;padding-right:14px}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-card{height:65px;padding:0 17px;font-size:14px;white-space:normal}
  .product-grid{gap:22px;padding-left:18px;padding-right:18px}
}
@media(max-width:720px){
  .page-shell{padding:11px 9px 50px}.category-grid{gap:8px;margin-bottom:18px}.category-card{height:58px;font-size:12px}
  .section-title{height:64px;padding:0 17px}.section-title h1{font-size:21px}.product-grid{padding:22px 10px 0;gap:17px}
}

.category-card{text-decoration:none;color:#fff}.buy-button{text-decoration:none}
@media (max-width: 720px) {
    .product-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 22px 10px 0 !important;
    }

    .product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: auto !important;
    }
/* FINAL MOBILE PRODUCT FIX - MUST STAY LAST */
@media screen and (max-width:720px){

    body .product-grid{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        width:100% !important;
        max-width:100% !important;
        gap:18px !important;
        padding:20px 10px !important;
    }

    body .product-grid .product-card{
        grid-column:1 / -1 !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
    }
}