/* quiltblock — лоскутное одеяло. namespace .qb */

:root{
  --qbLining:#f7f3ec;
  --qbPanel:#fffdf8;
  --qbIndigo:#2f4f7a;
  --qbTerra:#c25b3a;
  --qbSage:#7d9b76;
  --qbInk:#262220;
  --qbMute:#554c43;
  --qbLine:#cfc4b2;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--qbLining);color:var(--qbInk);
  font-family:'Noto Sans',system-ui,'Segoe UI',Arial,sans-serif;
  font-size:16px;line-height:1.62;overflow-x:hidden}

.qb{max-width:1140px;margin:0 auto;padding:0 18px 60px}
.qb p{margin:0 0 14px}
.qb a{color:var(--qbIndigo);text-decoration:underline;text-underline-offset:3px}
.qb h1,.qb h2{font-family:'Neucha',cursive;font-weight:400;letter-spacing:.2px}
.qb h3,.qb h4{font-family:'Noto Sans',system-ui,Arial,sans-serif;font-weight:700}

/* ---------- шапка ---------- */
.qbTop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 0 14px;border-bottom:2px dashed var(--qbLine)}
.qbMark{display:flex;align-items:center;gap:11px;text-decoration:none}
.qb a.qbMark{text-decoration:none;color:var(--qbInk)}
.qbMarkName{font-family:'Neucha',cursive;font-size:25px;line-height:1;color:var(--qbInk)}
.qbMarkSub{font-size:11.5px;color:var(--qbMute);letter-spacing:1.6px;text-transform:uppercase}
.qbTopGap{flex:1 1 auto}
.qbTopFact{font-size:12.5px;color:var(--qbMute)}

/* ---------- кнопки ---------- */
.qb a.qbGo,.qb a.qbGo2{display:inline-block;text-decoration:none;font-weight:700;
  padding:14px 26px;font-size:17px;line-height:1.2;border:2px solid var(--qbIndigo)}
.qb a.qbGo{background:var(--qbIndigo);color:#fffdf8}
.qb a.qbGo2{background:var(--qbPanel);color:#233d5f;border-color:#233d5f}
.qb a.qbGo:hover{background:#233d5f;border-color:#233d5f;color:#fffdf8}
.qb a.qbGo2:hover{background:#eee6d8}
.qbGoRow{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 6px}

/* ---------- герой ---------- */
.qbHero{position:relative;background:var(--qbPanel);margin:18px 0 0;padding:30px 26px 26px;
  border:1px solid var(--qbLine)}
.qbHero::after{content:"";position:absolute;inset:6px;border:2px dashed var(--qbTerra);pointer-events:none}
.qbHero>*{position:relative;z-index:1}
.qbHero h1{margin:0 0 14px;font-size:clamp(27px,4.6vw,49px);line-height:1.12;max-width:20ch}
.qbLede{font-size:17px;max-width:66ch;color:var(--qbInk)}
.qbFine{font-size:13px;color:var(--qbMute);margin-top:10px}

.qbTiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.qbTile{background:var(--qbLining);padding:13px 12px;border-left:6px solid var(--qbIndigo)}
.qbTile:nth-child(2){border-left-color:var(--qbTerra)}
.qbTile:nth-child(3){border-left-color:var(--qbSage)}
.qbTile:nth-child(4){border-left-color:var(--qbInk)}
.qbTileNum{display:block;font-size:22px;font-weight:700;line-height:1.1}
.qbTileCap{display:block;font-size:12.5px;color:var(--qbMute)}

/* ---------- шов между секциями ---------- */
.qbSeam{height:20px;margin:30px 0;
  background:repeating-linear-gradient(45deg,var(--qbIndigo) 0 3px,transparent 3px 11px),
             repeating-linear-gradient(45deg,var(--qbTerra) 5px 8px,transparent 8px 16px);
  border-top:1px solid var(--qbLine);border-bottom:1px solid var(--qbLine)}

/* ---------- блок пэчворка ---------- */
.qbBlock{position:relative;background:var(--qbPanel);border:1px solid var(--qbLine);
  padding:0 0 26px}
.qbBlock>*{position:relative;z-index:1}
.qbBlock>.qbStitch{position:absolute;inset:6px;border:2px dashed var(--qbSage);
  pointer-events:none;z-index:0}

.qbPatch{position:relative;padding:30px 26px 22px;margin:0 0 6px;overflow:hidden}
.qbTri{position:absolute;width:58px;height:58px}
.qbTriTl{top:0;left:0;background:var(--qbIndigo);clip-path:polygon(0 0,100% 0,0 100%)}
.qbTriTr{top:0;right:0;background:var(--qbTerra);clip-path:polygon(100% 0,100% 100%,0 0)}
.qbTriBl{bottom:0;left:0;background:var(--qbSage);clip-path:polygon(0 0,0 100%,100% 100%)}
.qbTriBr{bottom:0;right:0;background:var(--qbIndigo);clip-path:polygon(100% 0,100% 100%,0 100%)}
.qbPatchCore{position:relative;z-index:2;padding:0 62px;text-align:center}
.qbPatchCore h2{margin:0;font-size:clamp(23px,3.2vw,35px);line-height:1.16}
.qbKicker{display:block;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--qbMute);margin-bottom:8px}

.qbBody{padding:4px 30px 0}
.qbBody h3{font-size:17px;margin:22px 0 8px}

/* ---------- ступени пакета ---------- */
.qbSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 8px}
.qbStep{border:2px dashed var(--qbLine);padding:14px 13px;background:var(--qbLining)}
.qbStepNo{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--qbMute)}
.qbStepPct{font-size:27px;font-weight:700;color:var(--qbIndigo);line-height:1.1}
.qbStepFs{font-size:14px;color:var(--qbInk)}
.qbStep:nth-child(2) .qbStepPct{color:var(--qbTerra)}
.qbStep:nth-child(3) .qbStepPct{color:#4c6b45}
.qbStep:nth-child(4) .qbStepPct{color:var(--qbInk)}

/* ---------- клуб: 6 квадратов по спирали ---------- */
.qbSpiral{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);
  gap:10px;margin:20px 0 6px;align-items:center;justify-items:center}
.qbSq{width:100%;background:var(--qbLining);border:2px dashed var(--qbLine);
  padding:12px 10px;text-align:center}
.qbSq1{grid-area:2/2;transform:scale(.72)}
.qbSq2{grid-area:1/2;transform:scale(.80)}
.qbSq3{grid-area:1/3;transform:scale(.87)}
.qbSq4{grid-area:2/3;transform:scale(.93)}
.qbSq5{grid-area:3/3}
.qbSq6{grid-area:3/2;background:var(--qbIndigo);border-color:var(--qbPanel)}
.qbSq6 .qbSqName,.qbSq6 .qbSqCb,.qbSq6 .qbSqReq{color:#fffdf8}
.qbSqName{font-family:'Noto Sans',Arial,sans-serif;font-weight:700;font-size:15px}
.qbSqCb{font-size:24px;font-weight:700;color:var(--qbTerra);line-height:1.15}
.qbSqReq{font-size:12.5px;color:var(--qbMute)}
.qbSpiralNote{grid-area:1/1/3/2;align-self:center;font-size:13.5px;color:var(--qbMute);
  text-align:left;padding:0 6px}

/* ---------- одеяло-каталог 4x3 ---------- */
.qbQuilt{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 8px}
.qbPiece{position:relative;border:2px dashed var(--qbLine);padding:0;background:var(--qbLining);
  display:flex;flex-direction:column;min-height:186px}
.qbPieceTop{height:46px}
.qbPieceMid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  align-items:center;padding:10px 8px;text-align:center;background:var(--qbPanel)}
.qbRtp{font-size:33px;font-weight:700;line-height:1;color:var(--qbTerra)}
.qbRtpCap{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--qbMute)}
.qbPieceName{font-size:14px;font-weight:700;margin-top:8px}
.qbMeta{font-size:12.5px;color:var(--qbMute);padding:9px 10px;background:var(--qbLining);
  border-top:2px dashed var(--qbLine)}

.qbPtnDiag{background:repeating-linear-gradient(45deg,var(--qbIndigo) 0 12px,var(--qbSage) 12px 24px)}
.qbPtnCheck{background:
  repeating-conic-gradient(var(--qbTerra) 0 25%,var(--qbLining) 0 50%) 0 0/24px 24px}
.qbPtnStripe{background:repeating-linear-gradient(90deg,var(--qbSage) 0 10px,var(--qbPanel) 10px 20px)}
.qbPtnCorner{background:
  linear-gradient(135deg,var(--qbIndigo) 25%,transparent 25%) 0 0/23px 23px,
  linear-gradient(225deg,var(--qbTerra) 25%,transparent 25%) 0 0/23px 23px,var(--qbLining)}

/* ---------- live ---------- */
.qbDesk{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 6px}
.qbDeskCell{border:2px dashed var(--qbLine);padding:14px 14px;background:var(--qbLining)}
.qbDeskCell h4{margin:0 0 6px;font-size:15px}
.qbDeskCell p{margin:0;font-size:14px;color:var(--qbMute)}

/* ---------- касса ---------- */
.qbTillWrap{overflow-x:auto;margin:18px 0 6px}
.qbTill{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.qbTill th,.qbTill td{border:1px dashed var(--qbLine);padding:10px 11px;text-align:left;vertical-align:middle}
.qbTill th{background:var(--qbIndigo);color:#fffdf8;font-weight:700;font-size:13px;border-color:#233d5f}
.qbTill tbody tr:nth-child(even){background:var(--qbLining)}
.qbStitches{display:inline-flex;gap:3px;vertical-align:middle}
.qbStitches i{display:block;width:7px;height:16px;background:var(--qbLine);transform:skewX(-20deg)}
.qbStitches i.on{background:var(--qbTerra)}
.qbSpeed{font-size:12.5px;color:var(--qbMute);display:block;margin-top:3px}

/* ---------- турнир ---------- */
.qbPrize{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0 6px}
.qbPrize th,.qbPrize td{border:1px dashed var(--qbLine);padding:9px 11px;text-align:left}
.qbPrize th{background:var(--qbSage);color:#1d2a1a;font-weight:700;font-size:13px}
.qbPrize tbody tr:nth-child(even){background:var(--qbLining)}

/* ---------- врезка отзыва ---------- */
.qbVoice{position:relative;margin:20px 0;padding:16px 18px 14px;background:var(--qbLining);
  border-left:8px solid var(--qbTerra);border-top:2px dashed var(--qbLine);
  border-bottom:2px dashed var(--qbLine)}
.qbVoice p{margin:0 0 8px;font-size:14.5px}
.qbVoiceWho{font-size:12.5px;color:var(--qbMute);letter-spacing:.4px}

/* ---------- списки ---------- */
.qbList{margin:10px 0 14px;padding:0 0 0 18px}
.qbList li{margin:0 0 7px}
.qbFlags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;padding:0;list-style:none}
.qbFlags li{font-size:13px;padding:7px 12px;background:var(--qbLining);
  border:2px dashed var(--qbLine)}

/* ---------- FAQ ---------- */
.qbAsk{border:2px dashed var(--qbLine);background:var(--qbLining);margin:0 0 9px;padding:0}
.qbAsk summary{cursor:pointer;padding:12px 14px;font-weight:700;font-size:15px;list-style:none}
.qbAsk summary::-webkit-details-marker{display:none}
.qbAsk summary::before{content:"◧ ";color:var(--qbIndigo)}
.qbAsk[open] summary::before{content:"◨ ";color:var(--qbTerra)}
.qbAsk div{padding:0 14px 13px;font-size:14.5px;color:var(--qbInk)}

/* ---------- подвал ---------- */
.qbNote{margin:30px 0 0;padding:18px 20px;background:var(--qbPanel);
  border:2px dashed var(--qbIndigo);font-size:14px}
.qbFoot{margin-top:26px;padding:20px 0 0;border-top:2px dashed var(--qbLine);
  font-size:13px;color:var(--qbMute)}
.qbFoot p{margin:0 0 9px}

@media (max-width:900px){
  .qbTiles{grid-template-columns:repeat(2,1fr)}
  .qbSteps{grid-template-columns:repeat(2,1fr)}
  .qbQuilt{grid-template-columns:repeat(3,1fr)}
  .qbDesk{grid-template-columns:1fr}
  .qbPatchCore{padding:0 46px}
}
@media (max-width:620px){
  .qb{padding:0 12px 44px}
  .qbHero{padding:24px 16px 20px}
  .qbBody{padding:4px 16px 0}
  .qbPatch{padding:24px 14px 18px}
  .qbPatchCore{padding:0 40px}
  .qbTri{width:42px;height:42px}
  .qbQuilt{grid-template-columns:repeat(2,1fr)}
  .qbSpiral{grid-template-columns:1fr;justify-items:stretch}
  .qbSq,.qbSq1,.qbSq2,.qbSq3,.qbSq4,.qbSq5,.qbSq6{grid-area:auto;transform:none}
  .qbSpiralNote{grid-area:auto;text-align:left;padding:0}
  .qbPrize{font-size:13px}
  .qbPrize th,.qbPrize td{padding:8px 7px}
  .qb a.qbGo,.qb a.qbGo2{width:100%;text-align:center;padding:13px 16px;font-size:16px}
}