/* ==========================================================================
   Olmoza Storefront v2 — professional onlayn do'kon.
   Bitta kuchli brend rangi (binafsha). Kompyuterda ekranni to'ldiradi (4 ustun),
   planshetda 3, telefonda 2 ustun. Ham /s/<slug>, ham konstruktor shuni ishlatadi.
   ========================================================================== */
.shop *,.shop *::before,.shop *::after{box-sizing:border-box;margin:0;padding:0}
.shop [hidden]{display:none!important}
.shop{
  --a1:#8B5CF6;--a2:#7C3AED;--a3:#5B21B6;--tint:#F5F2FE;
  --ink:#14122A;--muted:#5B6478;--soft:#9A9FB4;--line:#ECE9F6;--card:#FFFFFF;--bg:#FBFAFF;
  --r:16px;
  container-type:inline-size;
  font-family:'Plus Jakarta Sans',-apple-system,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:var(--bg);min-height:100%;
}

/* -------- HERO (to'liq kenglik, binafsha) -------- */
.s-top{position:relative;overflow:hidden;background:linear-gradient(130deg,var(--a1) 0%,var(--a2) 48%,var(--a3) 100%);color:#fff}
.s-top::after{content:"";position:absolute;top:-45%;right:-6%;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none}
.s-top-in{position:relative;z-index:1;max-width:1560px;margin:0 auto;padding:30px 32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.s-ava{width:70px;height:70px;border-radius:20px;flex:none;overflow:hidden;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.s-ava img{width:100%;height:100%;object-fit:cover;display:block}
.s-idw{min-width:0;flex:1}
.s-name{font-size:clamp(24px,3.4cqw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.12}
.s-tag{opacity:.93;font-size:clamp(14px,1.6cqw,16px);font-weight:500;margin-top:4px;max-width:60ch}
.s-contacts{display:flex;gap:10px;flex-wrap:wrap}
.s-cta{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.42);color:#fff;text-decoration:none;font-weight:700;font-size:14px;border-radius:12px;padding:11px 17px;transition:background .15s}
.s-cta:hover{background:rgba(255,255,255,.3)}
.s-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Telefonda kontakt tugmalari 2 tadan yonma-yon; kompyuterda bitta qatorda sig'gancha */
@container (max-width:559px){
  .s-contacts{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .s-cta{justify-content:center}
  .s-cta:only-child{grid-column:1 / -1}
}

/* -------- MAIN -------- */
.s-main{max-width:1560px;margin:0 auto;padding:8px 32px 44px}
.s-sec{display:flex;align-items:baseline;gap:12px;margin:26px 2px 18px}
.s-sec b{font-size:20px;font-weight:800;letter-spacing:-.01em}
.s-sec span{color:var(--soft);font-size:14px;font-weight:700}

/* -------- MAHSULOTLAR GRID -------- */
.s-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.s-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 22px -16px rgba(30,20,70,.28);transition:transform .17s ease,box-shadow .17s ease}
.s-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(30,20,70,.34)}
.s-img{position:relative;flex:none;aspect-ratio:1/1;background:linear-gradient(150deg,color-mix(in srgb,var(--a1) 60%,#fff),var(--a2));display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;font-weight:800;overflow:hidden;text-shadow:0 2px 12px rgba(0,10,40,.25)}
.s-img img{width:100%;height:100%;object-fit:cover;display:block}
.s-body{flex:1;display:flex;flex-direction:column;gap:5px;padding:12px 13px 13px}
.s-pn{font-size:15px;font-weight:700;line-height:1.28;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em}
.s-pd{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-price{font-size:16px;font-weight:800;color:var(--a3);margin-top:auto;padding-top:6px}
.s-buy{margin-top:9px;width:100%;background:linear-gradient(135deg,var(--a1),var(--a2) 60%,var(--a3));color:#fff;border:none;border-radius:11px;padding:11px 12px;font-weight:800;font-size:13.5px;cursor:pointer;font-family:inherit;transition:filter .15s,transform .12s;box-shadow:0 8px 16px -9px color-mix(in srgb,var(--a3) 70%,transparent)}
.s-buy:hover{filter:brightness(1.07)}
.s-buy:active{transform:scale(.97)}
.s-empty{grid-column:1/-1;background:var(--card);border:1.5px dashed color-mix(in srgb,var(--a2) 38%,var(--line));border-radius:var(--r);padding:44px 22px;text-align:center;color:var(--muted);font-weight:700}

/* -------- FOOTER -------- */
.s-foot{border-top:1px solid var(--line);margin-top:12px}
.s-foot-in{max-width:1240px;margin:0 auto;padding:22px 24px 30px;text-align:center;color:var(--muted);font-size:13px;font-weight:500}
.s-tel{margin-bottom:10px}
.s-wm{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--ink);font-weight:800;font-size:12px;text-decoration:none;box-shadow:0 8px 20px -14px rgba(30,20,70,.3)}
.s-wm svg{width:14px;height:14px}

/* ==========================================================================
   Responsiv (container query — konteynerga qarab, oynaga emas)
   ========================================================================== */
@container (min-width:560px){
  .s-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .s-body{padding:13px 14px 14px}
}
@container (min-width:840px){
  .s-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
}
@container (min-width:1160px){
  .s-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container (min-width:1440px){
  .s-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
.s-foot-in{max-width:1560px}

/* ==========================================================================
   TAHRIRLASH REJIMI (.shop.editing) — ustiga bosib tahrirlash
   ========================================================================== */
.shop.editing [data-edit]{cursor:text;border-radius:7px;transition:box-shadow .12s,background .12s;outline:none}
.shop.editing [data-edit]:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--a2) 42%,transparent)}
.shop.editing [data-edit]:focus{box-shadow:0 0 0 2.5px var(--a2);background:var(--tint)}
.shop.editing .s-top [data-edit]:focus{background:rgba(255,255,255,.16)}
.shop.editing [data-edit]:empty::before{content:attr(data-ph);color:var(--soft);font-weight:500}
.shop.editing .s-top [data-edit]:empty::before{color:rgba(255,255,255,.72)}

.shop.editing .s-img,.shop.editing .s-ava{cursor:pointer}
.shop.editing .s-img::after{content:"";position:absolute;inset:0;background:rgba(16,10,40,.32) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5L5 21'/%3E%3C/svg%3E") center/26px no-repeat;opacity:0;transition:opacity .15s}
.shop.editing .s-img:hover::after{opacity:1}
.shop.editing .s-img.busy::after,.shop.editing .s-ava.busy::after{opacity:1;background:rgba(16,10,40,.44) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='white' stroke-width='2.5' fill='none' stroke-dasharray='42 20'/%3E%3C/svg%3E") center/24px no-repeat;animation:s-spin 1s linear infinite}
.shop.editing .s-ava{position:relative}
.shop.editing .s-ava::after{content:"";position:absolute;inset:0;background:rgba(16,10,40,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5L5 21'/%3E%3C/svg%3E") center/20px no-repeat;opacity:0;transition:opacity .15s;border-radius:inherit}
.shop.editing .s-ava:hover::after{opacity:1}
@keyframes s-spin{to{transform:rotate(360deg)}}

.s-del{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border-radius:9px;border:none;background:rgba(16,10,40,.55);color:#fff;font-size:14px;font-weight:700;cursor:pointer;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.shop.editing .s-del{display:flex}
.shop.editing .s-buy{pointer-events:none;opacity:.9}

.s-add{display:none;align-items:center;justify-content:center;flex-direction:column;gap:9px;aspect-ratio:1/1.35;background:var(--card);border:2px dashed color-mix(in srgb,var(--a2) 42%,var(--line));border-radius:var(--r);color:var(--a2);font-weight:800;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s;text-align:center;padding:12px}
.s-add:hover{background:var(--tint)}
.s-add svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.shop.editing .s-add{display:flex}

/* ==========================================================================
   KO'P RASM (3 tagacha) — nuqtalar (xaridor + konstruktor)
   ========================================================================== */
.s-gal{cursor:pointer}
.s-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none}
.s-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.62);box-shadow:0 1px 3px rgba(0,0,0,.42);pointer-events:auto;cursor:pointer;transition:background .15s,transform .15s}
.s-dot.on{background:#fff;transform:scale(1.3)}

/* Konstruktor: rasm qo'shish (+) / joriy rasmni o'chirish (x) */
.shop.editing .s-img.has-img:not(.busy)::after{content:none}
.shop.editing .s-iadd{position:absolute;left:8px;bottom:8px;z-index:4;display:inline-flex;align-items:center;gap:5px;background:rgba(16,10,40,.62);color:#fff;border:none;border-radius:9px;padding:6px 10px;font-size:11.5px;font-weight:800;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:inherit}
.shop.editing .s-iadd:hover{background:rgba(16,10,40,.8)}
.shop.editing .s-iadd svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.shop.editing .s-idel{position:absolute;left:8px;top:8px;z-index:4;width:25px;height:25px;border-radius:8px;border:none;background:rgba(16,10,40,.5);color:#fff;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.shop.editing .s-idel:hover{background:rgba(200,44,44,.82)}

@media (prefers-reduced-motion:reduce){.shop *{transition:none!important;animation:none!important}}