/* 08b — хабы главной в теле статьи (maiolica) */
.oic-px{margin:26px auto 30px;padding:20px;border:1px solid var(--mj-rule);border-radius:14px;background:var(--mj-cal)}
.oic-px__t{margin:0 0 14px;font:800 20px/1.25 var(--mj-serif),Georgia,serif;color:var(--mj-not)}
.oic-px a{text-decoration:none;color:inherit}
.oic-px img{display:block;max-width:100%;height:auto}
.oic-px b{display:block;font:700 15px/1.3 var(--mj-sans),Arial,sans-serif;color:var(--mj-ink)}
.oic-px small{display:block;margin-top:3px;font:400 13px/1.4 var(--mj-sans),Arial,sans-serif;color:var(--mj-mut)}
.oic-px a:hover b,.oic-px a:focus-visible b{color:var(--mj-link);text-decoration:underline}
.oic-px-cr{margin:12px 0 0;font-size:12px;color:var(--mj-mut)}
.oic-px-cr a{color:var(--mj-mut);text-decoration:underline}
.oic-px-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.oic-art .oic-px ul{list-style:none;margin:0;padding:0}
.oic-art .oic-px li{margin:0;padding:0}
.oic-art .oic-px li::before{content:none}

/* 1 — фичер + список */
.oic-px-tipi{background:var(--mj-paper)}
.oic-px-tipi__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
.oic-px-tipi__feat{display:block;border-radius:12px;overflow:hidden;background:var(--mj-not);color:#fff}
.oic-px-tipi__ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.oic-px-tipi__b{display:block;padding:14px 16px 16px}
.oic-px-tipi__feat b{color:#fff;font-family:var(--mj-serif),Georgia,serif;font-size:19px}
.oic-px-tipi__feat small{color:var(--mj-onnot)}
.oic-px-tipi__feat:hover b{color:var(--mj-lem)}
.oic-px-tipi__l{display:grid;gap:2px}
.oic-px-tipi__l a{display:flex;gap:12px;align-items:center;padding:8px;border-radius:10px}
.oic-px-tipi__l a:hover{background:var(--mj-tint)}
.oic-px-tipi__th{flex:none;width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--mj-tint)}

/* 2 — фото-карточки */
.oic-px-gal__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.oic-px-gal__g a{display:block;height:100%;background:var(--mj-paper);border:1px solid var(--mj-rule);border-radius:12px;overflow:hidden;padding-bottom:12px}
.oic-px-gal__g a:hover{border-color:var(--mj-cob);box-shadow:0 6px 18px rgba(13,31,77,.12)}
.oic-px-gal__ph{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--mj-tint);margin-bottom:10px}
.oic-px-gal__ph>img{width:100%;height:100%;object-fit:cover}
.oic-px-gal__ic{display:flex;height:100%;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mj-tint),var(--mj-cal))}
.oic-px-gal__ic img{width:96px;height:96px;object-fit:contain}
.oic-px-gal__g b,.oic-px-gal__g small{padding:0 12px}

/* 3 — вкладки демо */
.oic-px-dm{background:var(--mj-paper)}
.oic-px-dm__r{position:absolute;opacity:0;pointer-events:none}
.oic-px-dm__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.oic-px-dm__tabs label{position:relative;display:block;cursor:pointer;border-radius:12px;overflow:hidden;border:2px solid var(--mj-rule);background:var(--mj-not);color:#fff}
.oic-px-dm__tabs label img{width:100%;aspect-ratio:3/2;object-fit:cover;opacity:.55}
.oic-px-dm__tabs label span,.oic-px-dm__tabs label small{position:absolute;left:10px;right:10px}
.oic-px-dm__tabs label span{bottom:26px;font:800 15px/1.2 var(--mj-serif),Georgia,serif}
.oic-px-dm__tabs label small{bottom:8px;margin:0;color:var(--mj-onnot);font-size:12px}
.oic-px-dm__p{display:none;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
#oic-px-dm1:checked~.oic-px-dm__p--1,#oic-px-dm2:checked~.oic-px-dm__p--2,#oic-px-dm3:checked~.oic-px-dm__p--3,#oic-px-dm4:checked~.oic-px-dm__p--4{display:grid}
#oic-px-dm1:checked~.oic-px-dm__tabs [for=oic-px-dm1],#oic-px-dm2:checked~.oic-px-dm__tabs [for=oic-px-dm2],#oic-px-dm3:checked~.oic-px-dm__tabs [for=oic-px-dm3],#oic-px-dm4:checked~.oic-px-dm__tabs [for=oic-px-dm4]{border-color:var(--mj-lem);box-shadow:0 0 0 2px var(--mj-lem)}
#oic-px-dm1:checked~.oic-px-dm__tabs [for=oic-px-dm1] img,#oic-px-dm2:checked~.oic-px-dm__tabs [for=oic-px-dm2] img,#oic-px-dm3:checked~.oic-px-dm__tabs [for=oic-px-dm3] img,#oic-px-dm4:checked~.oic-px-dm__tabs [for=oic-px-dm4] img{opacity:.8}
.oic-px-dm__r:focus-visible~.oic-px-dm__tabs label{outline:0}
#oic-px-dm1:focus-visible~.oic-px-dm__tabs [for=oic-px-dm1],#oic-px-dm2:focus-visible~.oic-px-dm__tabs [for=oic-px-dm2],#oic-px-dm3:focus-visible~.oic-px-dm__tabs [for=oic-px-dm3],#oic-px-dm4:focus-visible~.oic-px-dm__tabs [for=oic-px-dm4]{outline:3px solid var(--mj-link);outline-offset:2px}
.oic-px-dm__p a{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--mj-rule);border-radius:10px;height:100%}
.oic-px-dm__p a:hover{border-color:var(--mj-cob);background:var(--mj-tint)}
.oic-px-dm__p .oic-px-dm__th{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover}
.oic-px-dm__p b{font-size:14px}
.oic-px-dm__p small{font-size:12px}

/* 4 — таблица бонусов */
.oic-px-bt__w{overflow-x:auto;-webkit-overflow-scrolling:touch}
.oic-px-bt__tb{width:100%;border-collapse:separate;border-spacing:0;background:var(--mj-paper);border:1px solid var(--mj-rule);border-radius:12px;overflow:hidden;font:400 14px/1.4 var(--mj-sans),Arial,sans-serif}
.oic-px-bt__tb thead th{background:var(--mj-not);color:#fff;text-align:left;font-weight:700;font-size:13px;padding:10px 12px}
.oic-px-bt__tb td,.oic-px-bt__tb tbody th{padding:8px 12px;border-top:1px solid var(--mj-rule);text-align:left;vertical-align:middle;color:var(--mj-mut)}
.oic-px-bt__tb tbody tr:nth-child(even){background:var(--mj-tint)}
.oic-px-bt__tb tbody th a{font-weight:700;color:var(--mj-link);text-decoration:underline;text-underline-offset:2px}
.oic-px-bt__ic{width:60px}
.oic-px-bt__ic img{width:44px;height:44px;object-fit:contain}

/* 5 — стена логотипов */
.oic-px-pay__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.oic-px-pay__g a{display:block;height:100%;padding:14px;background:var(--mj-paper);border:1px solid var(--mj-rule);border-radius:12px;text-align:center}
.oic-px-pay__g a:hover{border-color:var(--mj-cob)}
.oic-px-pay__lg{display:flex;align-items:center;justify-content:center;height:64px;margin-bottom:10px}
.oic-px-pay__lg img{max-height:56px;max-width:150px;width:auto;object-fit:contain}

/* 6 — лента провайдеров */
.oic-px-reel{background:var(--mj-not)}
.oic-px-reel .oic-px__t{color:#fff}
.oic-px-reel__g{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-color:var(--mj-lem) transparent}
.oic-px-reel__g:focus-visible{outline:2px solid var(--mj-lem)}
.oic-px-reel__g li{flex:0 0 200px;scroll-snap-align:start}
.oic-px-reel__g a{display:block;height:100%;padding:12px;background:var(--mj-paper);border-radius:12px;border-top:4px solid var(--mj-lem)}
.oic-px-reel__lg{display:flex;align-items:center;justify-content:center;height:80px;margin-bottom:10px;background:var(--mj-cal);border-radius:8px}
.oic-px-reel__lg img{max-height:70px;max-width:170px;width:auto;object-fit:contain}

/* 7 — колода карт */
.oic-px-deck{background:var(--mj-fog);border-color:var(--mj-fog)}
.oic-px-deck__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.oic-px-deck__g a{display:block;height:100%;padding:10px 10px 12px;background:var(--mj-paper);border-radius:10px;border:1px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.18);text-align:center;transition:transform .15s}
.oic-px-deck__g li:nth-child(odd) a{transform:rotate(-1.2deg)}
.oic-px-deck__g li:nth-child(even) a{transform:rotate(1.2deg)}
.oic-px-deck__g a:hover,.oic-px-deck__g a:focus-visible{transform:translateY(-3px) rotate(0)}
.oic-px-deck__im{display:flex;justify-content:center;padding:6px;border:1px dashed var(--mj-rule);border-radius:6px;margin-bottom:8px}
.oic-px-deck__im img{width:88px;height:88px;object-fit:contain}
.oic-px-deck__g b{font-family:var(--mj-serif),Georgia,serif}

@media (max-width:760px){
.oic-px{padding:14px;margin:20px auto 24px}
.oic-px-tipi__g{grid-template-columns:1fr}
.oic-px-dm__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.oic-px-dm__p{grid-template-columns:1fr}
.oic-px-pay__g{grid-template-columns:repeat(2,minmax(0,1fr))}
.oic-px-gal__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.oic-px-deck__g{grid-template-columns:repeat(2,minmax(0,1fr))}
.oic-px-reel__g li{flex-basis:170px}
.oic-px-bt__tb{font-size:13px}
.oic-px-bt__tb td,.oic-px-bt__tb tbody th{padding:8px}
.oic-px-bt__ic{width:48px}
.oic-px-bt__ic img{width:36px;height:36px}
}