*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:#fff;color:#1a1a1a}
html{touch-action:manipulation}
button{touch-action:manipulation}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;min-height:100vh}
:root{--g:#2DBE60;--gd:#22994B;--gb:#E8F8EE;--gr:#F7F7F5;--bd:#EFEFED;--t2:#666;--rd:#E24B4A;--maxw:1200px}

/* ===== HEADER ===== */
#hdr{position:sticky;top:0;background:#fff;z-index:100;border-bottom:1px solid var(--bd)}
.hdr-inner{max-width:var(--maxw);margin:0 auto}
.hdr-top{display:flex;align-items:center;gap:10px;padding:12px 16px}
.logo{font-size:20px;font-weight:800;color:var(--g);letter-spacing:-0.03em;white-space:nowrap;user-select:none;cursor:pointer}
.srch-w{flex:1;position:relative;max-width:560px}
.srch-w input{width:100%;padding:9px 12px 9px 34px;border-radius:10px;border:1.5px solid var(--bd);font-size:14px;background:var(--gr);outline:none;font-family:inherit;-webkit-appearance:none}
.srch-w input:focus{border-color:var(--g)}
.srch-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.4;pointer-events:none}
.cart-btn{position:relative;background:none;border:none;font-size:24px;cursor:pointer;padding:4px;flex-shrink:0;line-height:1}
#cart-badge{position:absolute;top:-2px;right:-4px;background:var(--g);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 3px}
.desk-cart-btn{display:none}
.cat-scroll{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-chip{white-space:nowrap;padding:7px 14px;border-radius:20px;border:1.5px solid var(--bd);background:#fff;color:#555;font-size:13px;font-weight:500;cursor:pointer;flex-shrink:0;font-family:inherit;transition:all .15s}
.cat-chip.active{border-color:var(--g);background:var(--gb);color:var(--gd);font-weight:600}

/* ===== LAYOUT ===== */
.layout{max-width:var(--maxw);margin:0 auto;display:flex;gap:0}
.sidebar{display:none}
.main-col{flex:1;min-width:0}
.banner{margin:12px 16px;background:linear-gradient(110deg,#2DBE60,#1a9e4e);border-radius:16px;padding:16px;color:#fff}
.banner h2{font-size:18px;font-weight:700;margin-bottom:4px}
.banner p{font-size:13.5px;opacity:.92;line-height:1.5}
#catalog{padding:12px 16px 110px}
.search-meta{font-size:13px;color:#aaa;margin-bottom:12px}
.section{margin-bottom:28px;scroll-margin-top:120px}
.sec-title{font-size:17px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-count{font-size:12px;font-weight:400;color:#bbb;margin-left:2px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

/* ===== CARD ===== */
.card{border:1.5px solid var(--bd);border-radius:14px;padding:10px;display:flex;flex-direction:column;background:#fff;cursor:pointer;transition:box-shadow .15s,transform .15s}
.card-ico{height:110px;display:flex;align-items:center;justify-content:center;background:var(--gr);border-radius:10px;font-size:40px;margin-bottom:10px;flex-shrink:0;overflow:hidden}
.card-ico img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.card-name{font-size:12.5px;line-height:1.35;color:#1a1a1a;margin-bottom:8px;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;min-height:50px}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:6px}
.card-price{font-size:15px;font-weight:700;white-space:nowrap}
.add-btn{background:var(--gb);color:var(--gd);border:none;border-radius:9px;width:34px;height:34px;font-size:22px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;transition:transform .1s}
.add-btn:active{transform:scale(.88)}
.qty-ctrl{display:none;align-items:center;background:var(--g);border-radius:9px;height:34px;flex-shrink:0}
.qty-ctrl button{background:none;border:none;color:#fff;width:30px;height:34px;font-size:18px;cursor:pointer;font-family:inherit}
.qty-ctrl .qval{color:#fff;font-size:13px;font-weight:700;min-width:18px;text-align:center}

/* ===== MOBILE CART BAR ===== */
#cart-bar{position:fixed;bottom:0;left:0;right:0;padding:10px 16px 16px;background:linear-gradient(to top,#fff 70%,transparent);z-index:50;display:none}
.cbar-btn{width:100%;max-width:var(--maxw);margin:0 auto;background:var(--g);color:#fff;border:none;border-radius:14px;padding:15px 20px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 20px rgba(45,190,96,.35);font-family:inherit}
.cbar-btn span{opacity:.85;font-weight:500}

/* ===== DRAWERS ===== */
.drawer{position:fixed;inset:0;background:#fff;z-index:200;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;overflow:hidden}
.drawer.open{transform:translateY(0)}
.drw-hdr{padding:16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px;flex-shrink:0;background:#fff}
.drw-hdr h2{font-size:18px;font-weight:700;flex:1;margin:0}
.drw-hdr .inner,.drw-body .inner{max-width:var(--maxw);margin:0 auto;width:100%}
.back-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#1a1a1a;padding:0;line-height:1;font-family:inherit}
.drw-body{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
.drw-foot{border-top:1px solid var(--bd);padding:16px;background:#fff;flex-shrink:0}
.ci{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd);align-items:center;cursor:pointer;max-width:640px;margin:0 auto}
.ci-ico{width:54px;height:54px;background:var(--gr);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;overflow:hidden}
.ci-ico img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.ci-info{flex:1;min-width:0}
.ci-name{font-size:13px;line-height:1.35;margin-bottom:4px}
.ci-price{font-size:14px;font-weight:700;color:#1a1a1a}
.ci-price span{font-size:12px;font-weight:400;color:#aaa}
.ci-qty{display:flex;align-items:center;background:var(--gr);border-radius:9px;flex-shrink:0}
.ci-qty button{background:none;border:none;width:32px;height:36px;font-size:18px;cursor:pointer;color:#333;font-family:inherit}
.ci-qty em{font-style:normal;font-size:14px;font-weight:700;min-width:20px;text-align:center}
.tot-row{display:flex;justify-content:space-between;padding:4px 0;font-size:14px;color:var(--t2)}
.tot-row.big{font-size:17px;font-weight:700;color:#1a1a1a;padding-top:10px;margin-top:8px;border-top:1px solid var(--bd)}
.tot-row.big span:last-child{color:var(--g)}
.tot-box{background:var(--gr);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.cart-foot-inner,.checkout-inner{max-width:640px;margin:0 auto}
.tip{background:#FFF8E8;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#8a6d1a;margin-bottom:12px;text-align:center}
.tip.green{background:var(--gb);color:var(--gd)}
.btn-main{width:100%;background:var(--g);color:#fff;border:none;border-radius:12px;padding:15px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center}
.btn-main:disabled{background:#ccc;cursor:not-allowed}
.btn-sec{background:var(--gb);color:var(--gd);border:none;border-radius:10px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:16px;width:100%;max-width:300px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:#444;margin-bottom:6px}
.field label em{color:var(--g);font-style:normal}
.field input,.field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--bd);font-size:14px;outline:none;font-family:inherit;background:#fff;-webkit-appearance:none}
.field input:focus,.field textarea:focus{border-color:var(--g)}
.field textarea{resize:vertical;min-height:70px}
.time-chips{display:flex;flex-wrap:wrap;gap:8px}
.time-chip{padding:8px 14px;border-radius:10px;border:1.5px solid var(--bd);background:#fff;font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s}
.time-chip.active{border-color:var(--g);background:var(--gb);color:var(--gd);font-weight:600}
.err-hint{font-size:12px;color:var(--rd);text-align:center;margin-top:8px}
.clear-btn{background:none;border:none;color:var(--rd);font-size:13px;cursor:pointer;font-family:inherit}
.empty{text-align:center;padding:60px 20px;color:#999}
.big-icon{font-size:52px;margin-bottom:16px}
.empty p{font-size:15px;color:#888;margin-bottom:8px}
.success-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;height:100%}
.success-check{width:80px;height:80px;border-radius:50%;background:var(--gb);display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:20px;color:var(--gd)}
.success-wrap h2{font-size:22px;font-weight:700;margin-bottom:10px}
.success-wrap p{font-size:15px;color:var(--t2);line-height:1.6;margin-bottom:24px}
.admin-body-inner{max-width:640px;margin:0 auto}

/* ===== PRODUCT DETAIL ===== */
.pd-img{height:280px;background:var(--gr);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:90px;overflow:hidden;margin-bottom:16px}
.pd-img img{width:100%;height:100%;object-fit:cover}
.pd-cat{font-size:13px;color:var(--gd);font-weight:600;margin-bottom:6px}
.pd-name{font-size:21px;font-weight:700;line-height:1.3;margin-bottom:12px}
.pd-price{font-size:28px;font-weight:800;color:#1a1a1a;margin-bottom:20px}
.pd-info{background:var(--gr);border-radius:12px;padding:4px 14px;margin-bottom:16px}
.pd-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e8e8e6;font-size:13px}
.pd-row:last-child{border-bottom:none}
.pd-row span:first-child{color:#888;flex-shrink:0}
.pd-row span:last-child{text-align:right;font-weight:500}
.pd-section{margin-bottom:16px}
.pd-label{font-size:13px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.pd-desc{font-size:14px;line-height:1.6;color:#333;white-space:pre-line}
.pd-wrap{max-width:640px;margin:0 auto}
.pd-foot-inline{margin-top:20px}
.pd-foot-row{display:flex;gap:10px;align-items:center}
.qty-ctrl.big{height:50px;border-radius:12px}
.qty-ctrl.big button{width:44px;height:50px;font-size:22px}
.qty-ctrl.big .qval{font-size:16px;min-width:28px}
.go-cart{flex:1}

/* ============================================ */
/* ===== DESKTOP (≥ 900px) ===== */
/* ============================================ */
@media(min-width:900px){
  .cat-scroll{display:none !important}
  .desk-cart-btn{display:none;align-items:center;gap:10px;background:var(--g);color:#fff;border:none;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;margin-left:8px}
  .desk-cart-btn .dc-count{background:rgba(255,255,255,.25);border-radius:20px;padding:1px 8px;font-size:12px}
  .layout{padding:0 16px;gap:24px}
  .sidebar{display:block;width:230px;flex-shrink:0;position:sticky;top:78px;height:calc(100vh - 90px);overflow-y:auto;padding:16px 0;scrollbar-width:thin}
  .side-cat{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:9px 12px;border-radius:10px;font-size:13.5px;color:#444;cursor:pointer;font-family:inherit;margin-bottom:2px;transition:all .12s}
  .side-cat:hover{background:var(--gr)}
  .side-cat.active{background:var(--gb);color:var(--gd);font-weight:600}
  .side-emoji{font-size:16px;flex-shrink:0}
  .side-cat span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-count{font-size:11px;color:#bbb;flex-shrink:0}
  .side-cat.active .side-count{color:var(--gd)}
  #catalog{padding:16px 0 60px}
  .banner{margin:16px 0 0}
  .grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .card-ico{height:150px}
  .card-name{font-size:13.5px;min-height:56px}
  .card-price{font-size:16px}
  .card:hover{box-shadow:0 6px 24px rgba(0,0,0,.09);transform:translateY(-2px)}
  .sec-title{font-size:20px}
  #cart-bar{display:none !important}
  /* На десктопе drawer открывается как модалка по центру/справа */
  .drawer{max-width:560px;left:auto;right:0;box-shadow:-8px 0 40px rgba(0,0,0,.15);transform:translateX(100%)}
  .drawer.open{transform:translateX(0)}
  #product-drawer{max-width:640px}
  .pd-img{height:360px}
}
@media(min-width:1100px){
  .grid{grid-template-columns:repeat(5,1fr)}
}

/* Banner carousel */
.banner-carousel{margin:12px 16px;position:relative;border-radius:16px;overflow:hidden}
.banner-track{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.banner-slide{min-width:100%;box-sizing:border-box;padding:16px 18px;color:#fff;background:linear-gradient(110deg,#2DBE60,#1a9e4e)}
.banner-slide.bs2{background:linear-gradient(110deg,#3B82C4,#2563A0)}
.banner-slide.bs3{background:linear-gradient(110deg,#E0972B,#C77A18)}
.banner-slide.bs4{background:linear-gradient(110deg,#9B5DE5,#7B3FD0)}
.banner-slide h2{font-size:18px;font-weight:700;margin-bottom:4px}
.banner-slide p{font-size:13.5px;opacity:.93;line-height:1.5}
.banner-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.banner-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .25s;cursor:pointer}
.banner-dots span.active{background:#fff;width:20px;border-radius:4px}
@media(min-width:900px){.banner-carousel{margin:16px 0 0}.banner-slide{padding:22px 26px}.banner-slide h2{font-size:21px}.banner-slide p{font-size:15px}}
/* Промокод */
.promo-box{display:flex;gap:8px;margin-bottom:16px}
.promo-box input{flex:1;padding:12px 14px;border-radius:10px;border:1.5px solid var(--bd);font-size:14px;outline:none;font-family:inherit;text-transform:uppercase}
.promo-box input:focus{border-color:var(--g)}
.promo-box button{padding:12px 18px;border-radius:10px;border:none;background:var(--gb);color:var(--gd);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.promo-msg{font-size:12.5px;margin:-8px 0 16px;padding:0 2px}
.promo-msg.ok{color:var(--gd)}
.promo-msg.err{color:var(--rd)}
.tot-row.discount span:last-child{color:var(--g);font-weight:600}


.banner-slide.bs5{background:linear-gradient(110deg,#1a1a1a,#3a3a3a)}
/* Опт */
.wh-hero{background:linear-gradient(135deg,#1a1a1a,#2f2f2f);color:#fff;border-radius:16px;padding:24px 20px;margin-bottom:20px}
.wh-hero h1{font-size:23px;font-weight:800;margin-bottom:8px;line-height:1.2}
.wh-hero p{font-size:14px;opacity:.8;line-height:1.55}
.wh-feat{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--bd)}
.wh-feat-ico{font-size:24px;flex-shrink:0;width:42px;height:42px;background:var(--gb);border-radius:10px;display:flex;align-items:center;justify-content:center}
.wh-feat-txt h3{font-size:14.5px;font-weight:700;margin-bottom:3px}
.wh-feat-txt p{font-size:13px;color:var(--t2);line-height:1.5}
.wh-form{background:var(--gr);border-radius:16px;padding:20px;margin-top:8px}
.wh-form h3{font-size:17px;font-weight:700;margin-bottom:4px}
.wh-form .sub{font-size:13px;color:var(--t2);margin-bottom:16px;line-height:1.5}
.wh-section-label{max-width:640px;margin:0 auto 12px;font-size:15px;font-weight:700;color:#1a1a1a}
.wh-link{font-size:12px;color:var(--t2);text-decoration:underline;cursor:pointer;white-space:nowrap;background:none;border:none;font-family:inherit;padding:4px}


.wh-cta{margin:8px 16px 40px;background:linear-gradient(135deg,#1a1a1a,#333);border-radius:16px;padding:22px 20px;color:#fff;display:flex;gap:16px;align-items:flex-start;cursor:pointer;transition:transform .15s}
.wh-cta:active{transform:scale(.99)}
.wh-cta-ico{font-size:32px;flex-shrink:0;width:56px;height:56px;background:rgba(255,255,255,.12);border-radius:14px;display:flex;align-items:center;justify-content:center}
.wh-cta-txt h3{font-size:18px;font-weight:700;margin-bottom:6px}
.wh-cta-txt p{font-size:13.5px;opacity:.8;line-height:1.55;margin-bottom:12px}
.wh-cta-btn{display:inline-block;background:var(--g);color:#fff;padding:9px 18px;border-radius:10px;font-size:13.5px;font-weight:600}
@media(min-width:900px){.wh-cta{margin:8px 0 40px}}

/* ===== АДМИНКА: заказы ===== */
.ord-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.ord-fchip{padding:6px 11px;border-radius:16px;border:1.5px solid var(--bd);background:#fff;font-size:12.5px;cursor:pointer;font-family:inherit;color:#555;white-space:nowrap}
.ord-fchip.active{border-color:var(--g);background:var(--gb);color:var(--gd);font-weight:600}
.ord-card{border:1.5px solid var(--bd);border-radius:12px;padding:12px;margin-bottom:10px;cursor:pointer;transition:box-shadow .15s}
.ord-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}
.ord-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.ord-id{font-size:13px;font-weight:700}
.ord-when{font-size:11.5px;color:#aaa}
.ord-cust{font-size:13px;color:#333;margin-bottom:2px}
.ord-cust b{font-weight:600}
.ord-sub{font-size:12px;color:#888;display:flex;justify-content:space-between;gap:8px;margin-top:6px;align-items:center}
.ord-profit{font-weight:700}
.ord-profit.pos{color:var(--gd)}
.ord-profit.neg{color:var(--rd)}
.ord-profit.unk{color:#c99a1a;font-weight:600}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.badge.new{background:#E8F1FF;color:#2563A0}
.badge.collecting{background:#FFF3E0;color:#C77A18}
.badge.delivered{background:var(--gb);color:var(--gd)}
.badge.canceled{background:#FBE9E9;color:#C0392B}
.badge.wholesale{background:#F0E8FB;color:#7B3FD0}
/* деталь заказа */
.od-back{background:none;border:none;font-size:14px;color:var(--gd);cursor:pointer;font-family:inherit;padding:4px 0;margin-bottom:8px;font-weight:600}
.od-head{margin-bottom:14px}
.od-head h3{font-size:17px;font-weight:700;margin-bottom:4px}
.od-meta{font-size:13px;color:#555;line-height:1.7}
.od-meta a{color:var(--gd);text-decoration:none}
.od-status-row{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.od-sbtn{padding:7px 12px;border-radius:9px;border:1.5px solid var(--bd);background:#fff;font-size:12.5px;cursor:pointer;font-family:inherit;color:#555}
.od-sbtn.active{border-color:var(--g);background:var(--gb);color:var(--gd);font-weight:700}
.od-item{border:1px solid var(--bd);border-radius:10px;padding:10px;margin-bottom:8px}
.od-item-name{font-size:13px;font-weight:600;margin-bottom:8px;line-height:1.3}
.od-item-name .wtag{font-size:10.5px;color:#C77A18;font-weight:700;margin-left:4px}
.od-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.od-f label{display:block;font-size:11px;color:#888;margin-bottom:3px}
.od-f input{width:100%;padding:8px 10px;border-radius:8px;border:1.5px solid #ddd;font-size:14px;font-family:inherit;-webkit-appearance:none}
.od-f input:focus{border-color:var(--g);outline:none}
.od-f .suffix{font-size:11px;color:#aaa}
.od-item-calc{font-size:12px;color:#666;margin-top:8px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.od-item-calc b{color:#1a1a1a}
.od-totals{background:var(--gr);border-radius:12px;padding:14px;margin:14px 0}
.od-trow{display:flex;justify-content:space-between;font-size:13.5px;padding:4px 0;color:#555}
.od-trow.big{font-size:16px;font-weight:700;color:#1a1a1a;border-top:1px solid var(--bd);margin-top:6px;padding-top:10px}
.od-trow.profit b.pos{color:var(--gd)}
.od-trow.profit b.neg{color:var(--rd)}
.od-warn{font-size:12px;color:#c99a1a;background:#FFF8E8;border-radius:8px;padding:8px 10px;margin-top:8px}
.od-save{position:sticky;bottom:0;background:#fff;padding-top:8px}