/*! Сторінка «Відеоогляди» — стилі погодженого макета
   svitlo-sako-batteries/videoohlyady. Правила обмежені .svl-videos:
   класи .hero, .breadcrumbs, .eyebrow, .product-grid уже зайняті
   на головній і в каталозі.

   Помаранчевий береться з теми (--orange у :root, #f7a51a), а не з макета:
   там був свій відтінок #ff8a00, і нижня смуга сторінки не збігалася б
   з рештою сайту. З тієї ж причини заголовки розділів на телефоні
   мають той самий колір, що на десктопі, і трохи щільніше накреслення —
   тонке на малому кеглі виглядало вицвілим. */

.svl-videos{
	--orange-deep:#e08f0b;--ink:#111516;--muted:#626765;--line:#dbcdbb;
	color:var(--ink);color-scheme:light;background:#f7f2e9;
	font-family:Inter,system-ui,sans-serif}

.svl-videos h1,.svl-videos h2,.svl-videos h3{margin:0;font-family:Manrope,Inter,sans-serif}
.svl-videos p{margin:0}
.svl-videos button{cursor:pointer;font-family:inherit}
.svl-videos [id]{scroll-margin-top:24px}

/* ---------------------------------------------------- шапка й розділи */

/* Шапка, смуга розділів і головне відео — одна сітка. Відео стоїть
   у розмітці один раз: на десктопі сітка кладе його праворуч у шапці,
   на телефоні — під картки розділів, як у макеті. */
.svl-videos .vd-top{
	display:grid;grid-template-columns:.9fr 1.1fr;
	grid-template-rows:minmax(560px,auto) auto;
	grid-template-areas:"copy video" "chapters chapters";
	align-items:center;column-gap:clamp(48px,7vw,120px);
	background:linear-gradient(118deg,#f8f3ea 0%,#eee2d0 62%,#e8d8c0 100%);
	border-bottom:1px solid #d9cdbd;padding:72px 6.8vw 0;position:relative;overflow:hidden}
.svl-videos .vd-top:before{
	content:"";pointer-events:none;background:radial-gradient(circle,#f7a51a42,#0000 69%);
	border-radius:50%;width:46vw;height:46vw;position:absolute;top:-24vw;left:-17vw}

.svl-videos .vd-hero{grid-area:copy;z-index:2;position:relative;padding-bottom:82px}
.svl-videos .vd-crumbs{
	color:#8a8176;display:flex;align-items:center;gap:10px;margin-bottom:82px;font-size:11px}
.svl-videos .vd-crumbs a:hover{color:#151819}
.svl-videos .vd-crumbs b{color:#343735;font-weight:450}

.svl-videos .vd-eyebrow,
.svl-videos .vd-head>div>p,
.svl-videos .vd-pick__head>p,
.svl-videos .vd-cta p{
	color:var(--orange);letter-spacing:.28em;margin:0 0 19px;font-size:9px;font-weight:500}

.svl-videos .vd-hero h1{
	letter-spacing:-.065em;max-width:700px;font-size:clamp(57px,6vw,100px);
	font-weight:260;line-height:.89}
.svl-videos .vd-hero h1 em{color:var(--orange);font-style:normal;font-weight:280}
.svl-videos .vd-lead{
	color:#625e58;max-width:640px;margin-top:31px;font-size:16px;font-weight:330;line-height:1.7}

.svl-videos .vd-chips{
	display:flex;flex-wrap:wrap;gap:22px;border-top:1px solid #cdbfae;margin-top:39px;padding-top:25px}
.svl-videos .vd-chips span{
	color:#5f615d;letter-spacing:.08em;display:flex;align-items:center;gap:8px;font-size:10px}
.svl-videos .vd-chips svg{color:var(--orange);flex:0 0 18px}

.svl-videos .vd-chapters{
	grid-area:chapters;align-self:end;display:grid;grid-template-columns:repeat(3,1fr);
	background:#f4ecdf;border-top:1px solid #d9cdbd;
	margin-inline:-6.8vw;padding-inline:6.8vw}
.svl-videos .vd-chapters>a{
	display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:146px;
	padding:31px 38px;transition:background .28s,color .28s;position:relative}
.svl-videos .vd-chapters>a+a:before{
	content:"";background:#d3c7b6;width:1px;height:42%;position:absolute;top:29%;left:0;
	transition:opacity .2s}
.svl-videos .vd-chapters>a:hover{background:var(--orange);color:#171817}
.svl-videos .vd-chapters>a:hover:before,
.svl-videos .vd-chapters>a:hover+a:before{opacity:0}
.svl-videos .vd-chapters b{max-width:310px;font-size:18px;font-weight:480;line-height:1.2}
.svl-videos .vd-chapters small{color:#737875;font-size:11px;line-height:1.45;transition:color .28s}
.svl-videos .vd-chapters>a:hover small{color:#5f3d13}

/* --------------------------------------------------------- обкладинка */

/* object-fit:contain обов'язковий: частина старих роликів має обкладинку
   4:3, і при cover у неї зрізало б верх і низ кадру. */
.svl-videos .vd-poster{
	aspect-ratio:16/9;background:#e7dac8;width:100%;position:relative;overflow:hidden}
.svl-videos .vd-poster:after{
	content:"";background:linear-gradient(#0000 52%,#25180f4d);position:absolute;inset:0}
.svl-videos .vd-poster img{
	object-fit:contain;object-position:center;width:100%;height:100%;
	position:absolute;inset:0;display:block;transition:transform .55s,filter .35s}
.svl-videos .vd-card:hover .vd-poster img,
.svl-videos .vd-intro:hover .vd-poster img{filter:brightness(1.04);transform:scale(1.012)}

.svl-videos .vd-play{
	z-index:4;width:64px;height:64px;color:var(--orange);background:#0b0e0fae;
	border:1px solid #ffffffa0;border-radius:50%;display:grid;place-items:center;
	-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	transition:transform .25s,background .25s}
.svl-videos .vd-play svg{margin-left:3px}
.svl-videos .vd-card:hover .vd-play,
.svl-videos .vd-intro:hover .vd-play{
	background:var(--orange);color:#111;transform:translate(-50%,-50%)scale(1.08)}

/* Кнопка «Дивитися» відкриває відео, а її псевдоелемент накриває всю
   картку — клікає покупець будь-де, у розмітці лишається один <button>. */
.svl-videos .vd-open{
	display:flex;align-items:center;gap:11px;margin-top:auto;padding:24px 0 0;
	background:0 0;border:0;color:var(--orange);letter-spacing:.11em;font-size:10px;font-weight:650}
.svl-videos .vd-open:after{content:"";position:absolute;inset:0;z-index:5}
.svl-videos .vd-open:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* ------------------------------------------------------- головне відео */

.svl-videos .vd-intro{
	grid-area:video;z-index:2;margin-bottom:82px;background:#fffdf8;border:1px solid #d2c4b2;
	position:relative;transition:transform .3s,border-color .3s;box-shadow:0 30px 75px #7c5b2826}
.svl-videos .vd-intro:hover{border-color:var(--orange);transform:translateY(-5px)}
.svl-videos .vd-intro__copy{
	display:flex;flex-direction:column;align-items:flex-start;padding:27px 30px 30px}
.svl-videos .vd-intro__copy small{
	color:var(--orange);letter-spacing:.21em;font-size:9px;font-weight:650}
.svl-videos .vd-intro__copy h2{
	letter-spacing:-.035em;margin:11px 0 9px;font-size:clamp(24px,2vw,34px);font-weight:350;line-height:1.15}
.svl-videos .vd-intro__copy p{color:#6d6a64;font-size:13px;line-height:1.6}
.svl-videos .vd-intro .vd-open{padding-top:18px}

/* ------------------------------------------------------------ розділи */

.svl-videos .vd-sect,.svl-videos .vd-pick{padding:118px 6.8vw 126px}
.svl-videos .vd-sect--sako{background:#fffaf2}
.svl-videos .vd-sect--gen{background:linear-gradient(135deg,#eadfce 0%,#f2e9dc 58%,#e7d7c0 100%)}

.svl-videos .vd-head{
	display:grid;grid-template-columns:1.05fr .65fr;align-items:end;gap:80px;
	border-bottom:1px solid var(--line);margin-bottom:60px;padding-bottom:38px;position:relative}
.svl-videos .vd-head:after{
	content:"";background:var(--orange);width:92px;height:2px;position:absolute;bottom:-1px;left:0}
.svl-videos .vd-head h2{
	color:var(--orange);letter-spacing:-.057em;font-size:clamp(43px,4.2vw,70px);
	font-weight:240;line-height:.98}
.svl-videos .vd-head>p{
	color:var(--muted);max-width:570px;margin-bottom:5px;font-size:14px;line-height:1.75}

.svl-videos .vd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svl-videos .vd-card{
	background:#fffdfa;border:1px solid #ddd1c0;min-width:0;position:relative;
	transition:transform .3s,box-shadow .3s,border-color .3s}
.svl-videos .vd-card:hover{
	border-color:var(--orange);transform:translateY(-4px);box-shadow:0 22px 48px #8d6d3820}
.svl-videos .vd-card.is-wide{display:grid;grid-column:span 2;grid-template-columns:1.22fr .78fr}
.svl-videos .vd-card.is-wide .vd-poster{aspect-ratio:auto;height:100%;min-height:390px}
.svl-videos .vd-card__copy{
	display:flex;flex-direction:column;align-items:flex-start;min-height:236px;padding:27px 27px 25px}
.svl-videos .vd-card__copy>span{
	color:var(--orange);letter-spacing:.21em;font-size:9px;font-weight:650}
.svl-videos .vd-card__copy h3{
	letter-spacing:-.035em;margin:15px 0 12px;font-size:22px;font-weight:430;line-height:1.22}
.svl-videos .vd-card__copy p{color:#686d6a;font-size:13px;line-height:1.65}

.svl-videos .vd-sect--gen .vd-card{background:#fffaf2;border-color:#d4c3ad}
.svl-videos .vd-sect--gen .vd-card:hover{border-color:var(--orange);box-shadow:0 22px 48px #82632f24}
.svl-videos .vd-sect--gen .vd-card__copy p{color:#6f6c65}

/* ---------------------------------------------------- оберіть рішення */

.svl-videos .vd-pick{background:#fffdf8}
.svl-videos .vd-pick__head{display:grid;grid-template-columns:.5fr 1.5fr;gap:60px}
.svl-videos .vd-pick__head h2{
	letter-spacing:-.057em;font-size:clamp(43px,4.2vw,70px);font-weight:250;line-height:.98}
.svl-videos .vd-pick__grid{
	display:grid;grid-template-columns:repeat(4,1fr);
	border-top:1px solid #dddeda;border-bottom:1px solid #dddeda;margin-top:66px}
.svl-videos .vd-pick__grid>a{
	display:flex;flex-direction:column;align-items:flex-start;min-height:360px;padding:32px;
	border-right:1px solid #ddd4c7;position:relative;transition:background .25s,transform .25s}
.svl-videos .vd-pick__grid>a:last-child{border-right:0}
.svl-videos .vd-pick__grid>a:hover{background:#f6ecdd;transform:translateY(-3px)}
.svl-videos .vd-pick__grid>a.is-accent{background:var(--orange)}
.svl-videos .vd-pick__grid>a.is-accent:hover{background:var(--orange-deep)}
.svl-videos .vd-pick__grid svg{color:var(--orange);stroke-width:1.25px}
.svl-videos .vd-pick__grid>a.is-accent svg{color:#171a19}
.svl-videos .vd-pick__grid>a>span{
	color:#aaa79f;font-size:10px;position:absolute;top:33px;right:27px}
.svl-videos .vd-pick__grid>a.is-accent>span{color:#6b4b18}
.svl-videos .vd-pick__grid h3{margin:72px 0 14px;font-size:19px;font-weight:520;line-height:1.3}
.svl-videos .vd-pick__grid p{color:#686d6a;font-size:13px;line-height:1.7}
.svl-videos .vd-pick__grid>a.is-accent p{color:#5c431a}
.svl-videos .vd-pick__grid>a>b{
	color:var(--orange);letter-spacing:.08em;display:flex;align-items:center;gap:10px;
	margin-top:auto;padding-top:28px;font-size:10px;font-weight:600}
.svl-videos .vd-pick__grid>a>b svg{width:17px;height:17px}
.svl-videos .vd-pick__grid>a.is-accent b{color:#171a19}

/* ------------------------------------------------------- нижній заклик */

.svl-videos .vd-cta{
	background:var(--orange);color:var(--ink);display:flex;justify-content:space-between;
	align-items:center;gap:50px;padding:65px 6.8vw}
.svl-videos .vd-cta p{color:#69470f}
.svl-videos .vd-cta h2{
	letter-spacing:-.055em;font-size:clamp(36px,4vw,64px);font-weight:310;line-height:1.02}
.svl-videos .vd-cta>a{
	display:grid;grid-template-columns:1fr auto;gap:5px 20px;min-width:292px;
	border:1px solid #16191a;padding:19px 20px;color:var(--ink)}
.svl-videos .vd-cta>a span{letter-spacing:.16em;font-size:8px}
.svl-videos .vd-cta>a strong{font-size:18px;font-weight:650}
.svl-videos .vd-cta>a svg{grid-area:1/2/3;align-self:center}

/* ------------------------------------------------------------ програвач */

.svl-videos .vd-modal{
	z-index:300;display:grid;place-items:center;padding:40px;position:fixed;inset:0}
.svl-videos .vd-modal[hidden]{display:none}
.svl-videos .vd-modal__back{
	background:#050707e8;border:0;position:absolute;inset:0;
	-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.svl-videos .vd-modal__body{
	z-index:2;background:#111516;color:#f2f2ee;width:min(1100px,94vw);max-height:94vh;
	position:relative;overflow:auto;box-shadow:0 35px 100px #000}
.svl-videos .vd-modal__frame{aspect-ratio:16/9;background:#000}
.svl-videos .vd-modal__frame iframe{border:0;width:100%;height:100%;display:block}
.svl-videos .vd-modal__body>div{padding:22px 25px 25px}
.svl-videos .vd-modal__body small{color:var(--orange);letter-spacing:.16em;font-size:8px}
.svl-videos .vd-modal__body h2{margin-top:8px;font-size:23px;font-weight:380}
.svl-videos .vd-modal__close{
	z-index:3;color:#fff;background:#090b0bcc;border:1px solid #ffffff70;border-radius:50%;
	display:grid;place-items:center;width:45px;height:45px;padding:10px;
	position:absolute;top:13px;right:13px}

/* ------------------------------------------------------------- планшет */

@media (width<=1080px){
	.svl-videos .vd-top{
		grid-template-columns:1fr;grid-template-rows:auto auto auto;
		grid-template-areas:"copy" "chapters" "video";padding-bottom:0}
	.svl-videos .vd-hero,.svl-videos .vd-intro{max-width:850px}
	.svl-videos .vd-intro{margin:32px 0 72px}
	.svl-videos .vd-chapters{align-self:auto}
	.svl-videos .vd-grid{grid-template-columns:1fr 1fr}
	.svl-videos .vd-card.is-wide{grid-column:1/-1;display:block}
	.svl-videos .vd-card.is-wide .vd-poster{aspect-ratio:16/9;height:auto;min-height:0}
	.svl-videos .vd-head{grid-template-columns:1fr;gap:25px}
	.svl-videos .vd-pick__grid{grid-template-columns:1fr 1fr}
	.svl-videos .vd-pick__grid>a:nth-child(2){border-right:0}
	.svl-videos .vd-pick__grid>a:nth-child(-n+2){border-bottom:1px solid #dddeda}
}

/* ------------------------------------------------------------ телефон */

@media (width<=820px){
	.svl-videos .vd-top{
		display:flex;flex-direction:column;background:none;border-bottom:0;padding:0 16px}
	.svl-videos .vd-top:before{content:none}
	/* Смуга градієнта лишається тільки під заголовком: картки розділів
	   і головне відео в макеті стоять уже на світлому тлі сторінки. */
	.svl-videos .vd-hero{
		background:linear-gradient(118deg,#f8f3ea 0%,#eee2d0 62%,#e8d8c0 100%);
		border-bottom:1px solid #d9cdbd;margin-inline:-16px;padding:24px 16px 58px;max-width:none}
	.svl-videos .vd-crumbs{margin-bottom:42px;font-size:10px}
	.svl-videos .vd-eyebrow{margin-bottom:15px;font-size:8px;line-height:1.5}
	.svl-videos .vd-hero h1{letter-spacing:-.058em;font-size:clamp(42px,13vw,58px);line-height:.94}
	.svl-videos .vd-lead{margin-top:22px;font-size:15px;line-height:1.65}
	.svl-videos .vd-chips{
		display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
		background:linear-gradient(120deg,#f5e9d7 0%,#ecddc7 100%);border:1px solid #dac6aa;
		margin-top:29px;padding:16px 0;box-shadow:0 15px 36px #8a602517}
	.svl-videos .vd-chips span{
		color:#343734;letter-spacing:.035em;text-align:center;flex-direction:column;
		justify-content:center;min-height:63px;padding:0 8px;font-size:9px;font-weight:520;line-height:1.32}
	.svl-videos .vd-chips span+span{border-left:1px solid #d2bfa4}
	.svl-videos .vd-chips svg{width:22px;height:22px;flex-basis:22px;stroke-width:1.6px}

	.svl-videos .vd-chapters{
		grid-template-columns:1fr;gap:10px;background:none;border-top:0;
		margin-inline:0;padding:18px 0 10px}
	.svl-videos .vd-chapters>a{
		background:#fffaf2;border:1px solid #dfd1be;justify-content:center;gap:6px;
		min-height:108px;padding:21px 22px 19px;overflow:hidden;box-shadow:0 12px 32px #84612612}
	.svl-videos .vd-chapters>a:nth-child(2){background:#f0e3d1}
	.svl-videos .vd-chapters>a:nth-child(3){background:#fffdf8}
	.svl-videos .vd-chapters>a:hover{background:#fffaf2;color:#15191a}
	.svl-videos .vd-chapters>a:nth-child(2):hover{background:#f0e3d1}
	.svl-videos .vd-chapters>a:nth-child(3):hover{background:#fffdf8}
	.svl-videos .vd-chapters>a:hover small{color:#6a6e69}
	.svl-videos .vd-chapters>a+a:before{content:none}
	.svl-videos .vd-chapters b{letter-spacing:-.018em;max-width:none;font-size:18px;font-weight:520}
	.svl-videos .vd-chapters small{color:#6a6e69;max-width:245px;font-size:12px}

	.svl-videos .vd-intro{margin:8px 0 46px;max-width:none;box-shadow:0 18px 46px #7c5b2824}
	.svl-videos .vd-intro__copy{padding:20px 18px 22px}
	.svl-videos .vd-intro__copy h2{margin-top:9px;font-size:22px;line-height:1.2}
	.svl-videos .vd-play{
		width:52px;height:52px;color:var(--orange);background:#fff8;border-color:#fff;
		-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

	.svl-videos .vd-sect,.svl-videos .vd-pick{padding:64px 16px 72px}
	.svl-videos .vd-head{gap:20px;margin-bottom:32px;padding-bottom:26px}
	/* Колір той самий, що на десктопі; накреслення щільніше — на малому
	   кеглі тонке виглядало вицвілим (правка клієнтки). */
	.svl-videos .vd-head h2{
		color:var(--orange);letter-spacing:-.055em;font-size:clamp(39px,11.2vw,48px);font-weight:340}
	.svl-videos .vd-pick__head h2{
		letter-spacing:-.045em;font-size:clamp(34px,10vw,42px);font-weight:330;line-height:1.02}
	.svl-videos .vd-head>div>p,.svl-videos .vd-pick__head>p{
		margin-bottom:14px;font-size:9px;line-height:1.55}
	.svl-videos .vd-head>p{font-size:15px;line-height:1.65}

	.svl-videos .vd-grid{grid-template-columns:1fr;gap:14px}
	.svl-videos .vd-card{box-shadow:0 12px 34px #87652e14}
	.svl-videos .vd-card.is-wide{grid-column:auto;display:block}
	.svl-videos .vd-card.is-wide .vd-poster{aspect-ratio:16/9;min-height:0}
	.svl-videos .vd-card__copy{min-height:0;padding:21px 18px 22px}
	.svl-videos .vd-card__copy>span{font-size:9px;line-height:1.45}
	.svl-videos .vd-card__copy h3{margin:11px 0 9px;font-size:21px}
	.svl-videos .vd-card__copy p{font-size:14px;line-height:1.6}
	.svl-videos .vd-card .vd-open{margin-top:18px;padding-top:0}

	.svl-videos .vd-pick__head{grid-template-columns:1fr;gap:20px}
	.svl-videos .vd-pick__grid{grid-template-columns:1fr;border-bottom:0;margin-top:36px}
	.svl-videos .vd-pick__grid>a,
	.svl-videos .vd-pick__grid>a:nth-child(-n+2){
		border-bottom:1px solid #dddeda;border-right:0;min-height:240px;padding:25px 22px}
	.svl-videos .vd-pick__grid svg{width:40px;height:40px}
	.svl-videos .vd-pick__grid h3{margin:36px 0 11px;font-size:20px}
	.svl-videos .vd-pick__grid p{font-size:14px;line-height:1.6}

	.svl-videos .vd-cta{flex-direction:column;align-items:stretch;gap:30px;padding:56px 18px}
	.svl-videos .vd-cta h2{font-size:clamp(33px,9.5vw,39px);line-height:1.05}
	.svl-videos .vd-cta>a{width:100%;min-width:0}

	.svl-videos .vd-modal{padding:8px}
	.svl-videos .vd-modal__body{width:100%}
	.svl-videos .vd-modal__body>div{padding:16px}
	.svl-videos .vd-modal__body h2{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
	.svl-videos *{transition:none!important}
}