/* 21.10.2026 (ananasposter): ролики о картинах и статьи блога на карточке товара и в статьях (system/library/apreels.php).
   Вид согласован с владельцем по макету v3 (ananasposter/site-reels/mockups). Шрифты темы thebear: жирность — через
   font-family Medium, обычный — Regular. */
.apr,.apr *{box-sizing:border-box}
.apr{font-family:Regular,Arial,sans-serif;color:#222;text-align:left}
.apr b{font-family:Medium,Arial,sans-serif;font-weight:normal}
.apr-kick{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#01aa73;font-family:Medium,Arial,sans-serif;margin-bottom:3px}
/* «Смотреть» — нейтральная, не зелёная: главное внимание на карточке — у «Добавить в корзину» (владелец 21.10.2026) */
.apr-watch{display:inline-flex;align-items:center;background:#fff;color:#2d3436;border:1px solid #d6d9db;border-radius:10px;padding:8px 14px;font-family:Medium,Arial,sans-serif;font-size:14px;white-space:nowrap;transition:border-color .15s,color .15s}
/* строка ролика под фото и миниатюрами */
.apr-bar{display:flex;align-items:center;gap:12px;clear:both;margin:12px 0 4px;padding:8px 10px 8px 8px;background:#f5f5f7;border-radius:12px;cursor:pointer;outline:none}
.apr-bar:hover .apr-watch,.apr-acard:hover .apr-watch{border-color:#01aa73;color:#01aa73}
.apr-bar:focus-visible,.apr-acard:focus-visible{box-shadow:0 0 0 2px #01aa73}
.apr-ava{position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#111 center/cover no-repeat;border:2px solid #01aa73}
.apr-ava:after{content:'';position:absolute;left:16px;top:12px;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
.apr-bar .apr-tx{flex:1;min-width:0;line-height:1.25;font-size:15px}
.apr-bar .apr-tx b{display:block}
.apr-bar .apr-tx small{display:block;color:#777;font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* «Почитать о картине» */
.apr-sec{clear:both;margin:14px 0 6px;background:#f5f5f7;border-radius:12px;padding:16px}
.apr-h{font-family:Medium,Arial,sans-serif;font-size:18px;margin:0 0 12px}
.apr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.apr-row.apr-one{grid-template-columns:1fr}
.apr-top,.apr-art{display:flex;align-items:center;gap:12px;border-radius:12px;padding:12px;text-decoration:none!important;color:#222!important;line-height:1.3;font-size:14px}
.apr-top{background:linear-gradient(135deg,#fff7df,#ffe9a8);border:1px solid #f2d27a}
.apr-art{background:#fff;border:1px solid #ececec;padding:10px}
.apr-top:hover,.apr-art:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.apr-medal{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe27a,#e3a90b);color:#5a3d00;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Medium,Arial,sans-serif;line-height:1;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.apr-medal span{font-size:10px;opacity:.8}
.apr-medal i{font-style:normal;font-size:20px}
.apr-tx b{display:block}
.apr-tx small{display:block;font-size:12px;margin-top:3px;color:#8a8a8a}
.apr-top .apr-tx small{color:#8a6a10}
.apr-im{flex:0 0 92px;width:92px;height:68px;border-radius:8px;background:#ddd center/cover no-repeat}
.apr-mob{display:none}
.apr-mobwrap{display:none}
/* карточка ролика в статье блога */
.apr-acard{display:flex;gap:18px;align-items:stretch;max-width:680px;margin:22px 0;padding:16px;background:#f5f5f7;border-radius:14px;cursor:pointer;outline:none}
.apr-reel{position:relative;flex:0 0 132px;width:132px;height:235px;border-radius:12px;background:#111 center/cover no-repeat;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.apr-reel:before{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
.apr-play{position:absolute;left:50%;top:44%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.apr-play:after{content:'';position:absolute;left:21px;top:16px;border-left:18px solid #01aa73;border-top:11px solid transparent;border-bottom:11px solid transparent}
.apr-dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 7px;border-radius:20px}
.apr-acard .apr-tx{display:flex;flex-direction:column;font-size:16px;line-height:1.35}
.apr-acard .apr-tx b{font-size:19px;line-height:1.3;margin:2px 0 8px}
.apr-sub{color:#666;font-size:15px}
.apr-acard .apr-watch{margin-top:auto;align-self:flex-start}
/* страницы услуг: «Ролики по теме» после основного текста, перед «Частыми вопросами» */
.apr-svc{margin:10px auto 34px}
.apr-svc .apr-h{font-size:24px;margin:0 0 16px}
.apr-svc-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
.apr-svc .apr-acard{margin:0;max-width:none}
/* плеер */
html.apr-lock,html.apr-lock body{overflow:hidden!important}
.apr-ov{position:fixed;left:0;right:0;top:0;bottom:0;z-index:2147483000;background:rgba(12,12,14,.95);display:flex;align-items:center;justify-content:center}
.apr-stage{display:flex;align-items:center;gap:28px}
.apr-vid{position:relative;height:86vh;max-height:780px;width:calc(min(86vh,780px) * 9 / 16);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.apr-vid video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.apr-x{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:28px;line-height:40px;text-align:center;border:0;cursor:pointer;z-index:3}
.apr-side{width:330px;color:#fff;font-family:Regular,Arial,sans-serif}
.apr-side .apr-kick{color:#5ee0b0}
.apr-side h3{font-family:Medium,Arial,sans-serif;font-size:22px;line-height:1.25;margin:4px 0 18px;color:#fff}
.apr-cta{display:block;width:100%;background:#01aa73;color:#fff!important;border:0;border-radius:10px;padding:14px;font-family:Medium,Arial,sans-serif;font-size:16px;text-align:center;text-decoration:none!important;cursor:pointer}
.apr-cta:hover{background:#019463}
@media(max-width:767px){
  .apr-bar{margin:4px 0 10px}
  .apr-bar .apr-tx{font-size:14px}
  .apr-bar .apr-tx small{font-size:12px}
  .apr-bar .apr-watch{padding:8px 11px;font-size:13px}
  .apr-pc{display:none}
  /* внутри блока «Примерки» (#primerka-p — inline-block) тема урезает вложенные div до 120 px — закрепляем ширину */
  .apr-mobwrap{display:block!important;width:100%!important;max-width:none!important;float:none!important;padding:0!important;height:auto!important}
  .apr-mobwrap .apr-mob,.apr-mobwrap .apr-h,.apr-mobwrap .apr-row{width:100%!important;max-width:none!important;float:none!important;height:auto!important}
  .apr-mob{display:block;margin:14px 0 4px;padding:14px}
  .apr-row{grid-template-columns:1fr}
  .apr-top{padding:10px;gap:10px}
  .apr-medal{flex-basis:44px;width:44px;height:44px}
  .apr-im{flex-basis:72px;width:72px;height:56px}
  .apr-acard{gap:12px;padding:12px;margin:18px 0}
  .apr-reel{flex-basis:104px;width:104px;height:185px}
  .apr-acard .apr-tx{font-size:14px}
  .apr-acard .apr-tx b{font-size:16px;margin-bottom:6px}
  .apr-sub{font-size:13px}
  .apr-acard .apr-watch{padding:8px 12px;font-size:13px}
  .apr-svc .apr-h{font-size:20px}
  .apr-svc-row{grid-template-columns:1fr}
  .apr-ov{background:#000;align-items:stretch}
  .apr-stage{display:flex;flex-direction:column;width:100%;height:100%;gap:0}
  /* видео — над нижней полосой, чтобы родные кнопки плеера не прятались под «Выбрать размер» */
  .apr-vid{flex:1 1 auto;width:100%;height:auto;max-height:none;border-radius:0;box-shadow:none}
  .apr-side{flex:0 0 auto;width:auto;padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
  .apr-side h3{font-size:17px;margin:2px 0 10px}
  .apr-x{top:calc(12px + env(safe-area-inset-top))}
}