/* g4cities.css — страницы «Светодиодная лента с доставкой в <город>» (/dostavka/<код>/), список /dostavka/ и блок «Доставка по городам»
   на /help/delivery/ (17.10.2026, п.28 владельца). Цвета сайта: оранжевый #FF6600, текст #1a1a1e, серый #8a8a90, рамки #e5e5e5, радиус 12. */
.g4cty,.g4cty-blk{--g4c-acc:#FF6600;--g4c-acc2:#e65c00;--g4c-tx:#1a1a1e;--g4c-mu:#8a8a90;--g4c-bd:#e5e5e5;--g4c-soft:#fff7f0;--g4c-ok:#00A046}
.g4cty{color:#333;font-size:15px;line-height:1.6;max-width:100%}
.g4cty *,.g4cty-blk *{box-sizing:border-box}
.g4cty ul,.g4cty li{margin:0;padding:0;list-style:none}
.g4cty li:before{display:none!important;content:none!important}
.g4cty a{text-decoration:none}
.g4cty-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.g4cty-lead{font-size:17px;line-height:1.55;margin:0 0 18px;color:var(--g4c-tx);max-width:900px}
.g4cty-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 8px}
.g4cty-fact{background:#fff;border:1px solid var(--g4c-bd);border-radius:12px;padding:16px 18px;min-width:0}
.g4cty-fact b{display:block;font-size:24px;line-height:1.2;color:var(--g4c-tx);font-weight:700}
.g4cty-fact:first-child b{color:var(--g4c-acc)}
.g4cty-fact span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--g4c-mu)}
/* самовывоз со склада (Ярославль, 17.10.2026: владелец «забрать в Ярославле можно») */
.g4cty-pick{max-width:900px;margin:0 0 14px;padding:14px 18px;border:1px solid var(--g4c-acc);border-radius:12px;background:var(--g4c-soft);color:var(--g4c-tx)}
.g4cty-pick b{display:block;font-size:17px;line-height:1.35;font-weight:700}
.g4cty-pick p{margin:4px 0 0}
.g4cty-pick a{color:var(--g4c-acc)!important}
.g4cty-pick a:hover{color:var(--g4c-acc2)!important}
.g4cty-small{font-size:13px;line-height:1.5;color:var(--g4c-mu);margin:8px 0 18px}

.g4cty-cta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.g4cty-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:8px;background:var(--g4c-acc);color:#fff!important;font-weight:600;font-size:15px;transition:background .15s}
.g4cty-btn:hover{background:var(--g4c-acc2)}
.g4cty-chipl{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:8px;border:1px solid var(--g4c-bd);background:#fff;color:var(--g4c-tx)!important;font-size:15px;transition:border-color .15s,color .15s}
.g4cty-chipl:hover{border-color:var(--g4c-acc);color:var(--g4c-acc)!important}

.g4cty-h2{font-size:24px;line-height:1.3;margin:36px 0 14px;color:var(--g4c-tx);font-weight:700}

/* карта и список пунктов */
.g4cty-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.g4cty-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--g4c-bd);background:#fff;color:var(--g4c-tx);font:inherit;font-size:14px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.g4cty-chip span{color:var(--g4c-mu)}
.g4cty-chip:hover{border-color:var(--g4c-acc)}
.g4cty-chip.is-on{background:var(--g4c-acc);border-color:var(--g4c-acc);color:#fff}
.g4cty-chip.is-on span{color:rgba(255,255,255,.8)}
.g4cty-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.g4cty-dot--cdek{background:#1ab248}
.g4cty-dot--post{background:#0055a6}
.g4cty-chip.is-on .g4cty-dot{box-shadow:0 0 0 2px #fff}
.g4cty-mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;height:500px}
.g4cty-map{position:relative;border-radius:12px;overflow:hidden;background:#eef0f4;min-height:0;min-width:0}
.g4cty-map-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;color:var(--g4c-mu);font-size:14px;text-align:center}
.g4cty-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:1000;padding:6px 12px;border-radius:14px;background:rgba(26,26,30,.78);color:#fff;font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.g4cty-side{display:flex;flex-direction:column;min-height:0;border:1px solid var(--g4c-bd);border-radius:12px;background:#fff;overflow:hidden}
.g4cty-q{display:block;margin:0;padding:10px;border-bottom:1px solid var(--g4c-bd)}
.g4cty-q input{display:block;width:100%;height:40px;margin:0;padding:0 12px;border:1px solid var(--g4c-bd);border-radius:8px;background:#fafafa;color:var(--g4c-tx);font:inherit;font-size:14px;outline:none;-webkit-appearance:none;appearance:none}
.g4cty-q input,.g4cty-q input::placeholder{font-weight:400}
.g4cty-q input::placeholder{color:#9a9aa0;opacity:1}
.g4cty-q input:focus{border-color:var(--g4c-acc);background:#fff}
.g4cty-cnt{padding:8px 14px;border-bottom:1px solid #f0f0f2;font-size:12px;line-height:1.4;color:var(--g4c-mu)}
.g4cty-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.g4cty .g4cty-list li{padding:10px 14px;border-bottom:1px solid #f0f0f2;line-height:1.4;cursor:pointer;transition:background .12s}
.g4cty .g4cty-list li:hover,.g4cty .g4cty-list li.is-sel{background:var(--g4c-soft)}
.g4cty-li-s{display:block;font-size:12px;font-weight:600;color:var(--g4c-mu)}
.g4cty-li-s:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:1px;background:#1ab248}
.g4cty-li-s--post:before{background:#0055a6}
.g4cty-li-a{display:block;font-size:14px;color:var(--g4c-tx)}
.g4cty-li-h{display:block;font-size:12px;color:var(--g4c-mu)}
.g4cty-empty{padding:14px;color:var(--g4c-mu);font-size:14px}
/* подсказка-шарик Яндекс.Карт */
.g4cty-bln{max-width:260px;font:14px/1.45 "Open Sans",Arial,sans-serif;color:#1a1a1e}
.g4cty-bln-s{font-weight:700;margin:0 0 4px}
.g4cty-bln-h{margin-top:4px;color:#6f6f75;font-size:13px}
.g4cty-bln-c{margin-top:4px;color:#00A046;font-size:13px}

/* текст */
.g4cty-text{max-width:900px}
.g4cty-text p{margin:0 0 12px}

/* популярные товары */
.g4cty-prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.g4cty-prod{display:flex;flex-direction:column;min-width:0;padding:12px;border:1px solid var(--g4c-bd);border-radius:12px;background:#fff;color:var(--g4c-tx)!important;transition:transform .18s ease-out,box-shadow .18s ease-out}
.g4cty-prod:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.g4cty-prod-i{display:block;aspect-ratio:1/1;margin:0 0 10px;overflow:hidden}
.g4cty-prod-i img{display:block;width:100%;height:100%;object-fit:contain}
.g4cty-prod-g{font-size:12px;line-height:1.4;color:var(--g4c-mu)}
.g4cty-prod-n{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 10px;font-size:14px;line-height:1.35}
.g4cty-prod-p{margin-top:auto;font-size:17px;font-weight:700;color:var(--g4c-tx)}

/* вопросы */
.g4cty-faq{max-width:900px;border-top:1px solid var(--g4c-bd)}
.g4cty-faq details{border-bottom:1px solid var(--g4c-bd)}
.g4cty-faq summary{position:relative;display:block;padding:14px 40px 14px 0;font-size:16px;font-weight:600;line-height:1.4;color:var(--g4c-tx);cursor:pointer;list-style:none}
.g4cty-faq summary::-webkit-details-marker{display:none}
.g4cty-faq summary:after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid var(--g4c-acc);border-bottom:2px solid var(--g4c-acc);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.g4cty-faq details[open] summary:after{transform:translateY(-25%) rotate(-135deg)}
.g4cty-faq p{margin:0 0 16px}
.g4cty-more{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0 0;font-size:14px}
.g4cty-more a{color:var(--g4c-acc)!important}
.g4cty-more a:hover{color:var(--g4c-acc2)!important}

/* список городов /dostavka/ */
.g4cty-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.g4cty-card{display:block;min-width:0;padding:16px 18px;border:1px solid var(--g4c-bd);border-radius:12px;background:#fff;color:var(--g4c-tx)!important;transition:border-color .15s,box-shadow .18s,transform .18s}
.g4cty-card:hover{border-color:var(--g4c-acc);box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-2px)}
.g4cty-card-n{display:block;margin:0 0 4px;font-size:18px;font-weight:700}
.g4cty-card-d{display:block;font-size:14px}
.g4cty-card-s{display:block;margin-top:2px;font-size:13px;color:var(--g4c-mu)}

/* блок на /help/delivery/ */
.g4cty-blk{margin:22px 0 26px;padding:16px 18px;border:1px solid var(--g4c-bd);border-radius:12px;background:#fafafa}
.g4cty-blk-t{margin:0 0 10px;color:#000}
.g4cty-blk-l{display:flex;flex-wrap:wrap;gap:8px}
.g4cty-blk-i{display:inline-flex;flex-direction:column;justify-content:center;min-height:50px;padding:7px 14px;border:1px solid var(--g4c-bd);border-radius:8px;background:#fff;color:var(--g4c-tx)!important;line-height:1.3;text-decoration:none!important;transition:border-color .15s}
.g4cty-blk-i:hover{border-color:var(--g4c-acc)}
.g4cty-blk-i b{font-weight:600}
.g4cty-blk-i span{font-size:12px;color:var(--g4c-mu)}
.g4cty-blk-all,.g4cty-blk-all b{color:var(--g4c-acc)!important}

@media (max-width:1199px){
	.g4cty-mapwrap{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:991px){
	.g4cty-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
	.g4cty-prods{grid-template-columns:repeat(3,minmax(0,1fr))}
	.g4cty-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
	.g4cty-mapwrap{display:block;height:auto}
	.g4cty-map{height:420px;margin:0 0 12px}
	.g4cty-side{max-height:420px}
}
@media (max-width:767px){
	.g4cty{font-size:15px}
	.g4cty-lead{font-size:15px;margin-bottom:14px}
	.g4cty-facts{gap:8px}
	.g4cty-fact{padding:12px 14px}
	.g4cty-fact b{font-size:19px}
	.g4cty-fact span{font-size:12px}
	.g4cty-h2{font-size:20px;margin:28px 0 12px}
	.g4cty-cta .g4cty-btn{flex:1 1 100%}
	.g4cty-chipl{height:40px;padding:0 12px;font-size:14px}
	.g4cty-chips{gap:6px}
	.g4cty-chip{height:34px;padding:0 10px;font-size:13px;gap:5px}
	.g4cty-map{height:360px}
	.g4cty-side{max-height:380px}
	.g4cty-prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
	.g4cty-prod{padding:10px}
	.g4cty-prod-p{font-size:16px}
	.g4cty-cards{grid-template-columns:1fr}
	.g4cty-faq summary{font-size:15px}
	.g4cty-blk{padding:14px}
	.g4cty-blk-i{flex:1 1 calc(50% - 4px)}
}