/* ═══════════════════════════════════════════════════════════════
   ROYSEN — адаптив (глобальне: токени, стрічка, хедер+меню,
   картка товару, каруселі, CTA, футер).
   Джерело мобільного макета: Figma «ROYSEN (Copy)» → Main page mob (390px).
   Проміжні ширини (планшет 768–1199) — за логікою десктопного макета.

   Брейкпоінти:
     ≤1199  великий планшет / малий ноут — вужчі поля, менші заголовки
     ≤1023  планшет — головне меню ховається в шухляду (бургер)
     ≤767   мобільний макет з Figma
     ≤480   дрібні телефони — поля 12px як у макеті
   ═══════════════════════════════════════════════════════════════ */

/* ─── Базове (діє скрізь) ─────────────────────────────────────── */

/* Обгортка мобільного меню: на десктопі «прозора» — діти лежать
   у рядку хедера рівно так, як лежали до появи шухляди. */
.site-nav-shell,
.site-header__nav{ display:contents; }
.site-header__nav-bar,
.site-header__nav-extra,
.site-header__nav-foot,
.site-nav-search,
.site-nav-cats{ display:none; }

/* Бургер */
.site-header__burger{
	display:none;
	position:relative;
	width:21px; height:14px; flex:none;
	padding:0; border:0; background:none;
	flex-direction:column; justify-content:space-between;
}
.site-header__burger span{
	display:block; height:1px; width:100%;
	background:var(--ink);
	transition:transform .25s ease, opacity .2s ease;
}
/* збільшена зона натискання без впливу на розкладку */
.site-header__burger::after{
	content:""; position:absolute; left:50%; top:50%;
	width:44px; height:44px; transform:translate(-50%,-50%);
}
body.nav-open .site-header__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.nav-open .site-header__burger span:nth-child(2){ opacity:0; }
body.nav-open .site-header__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.site-nav-scrim{
	position:fixed; inset:0; z-index:120;
	background:rgba(17,17,17,.45);
	animation:roysen-fade .25s ease;
}
@keyframes roysen-fade{ from{ opacity:0 } to{ opacity:1 } }

/* «+» на картці — мобільний аналог ховера з розмірами */
.product-card__frame{ position:relative; display:block; }
.product-card__more{
	display:none;
	position:absolute; right:4px; bottom:4px; z-index:3;
	width:40px; height:40px; padding:0; border:0;
	background:var(--bg);
	align-items:center; justify-content:center;
	transition:background .2s;
}
.product-card__more svg{
	width:16px; height:16px;
	fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round;
	transition:transform .25s ease;
}
.product-card.is-sizes .product-card__more{ background:var(--yellow); }
.product-card.is-sizes .product-card__more svg{ transform:rotate(45deg); }
/* відкрита смуга не заповзає під кнопку «+» */
.product-card.is-sizes .product-card__sizes{
	opacity:1; transform:none; pointer-events:auto;
	right:48px;
}

/* «+N» прихованих свотчів (видно тільки там, де свотчі обрізаються) */
.product-card__swatch-more{ display:none; font-size:12px; line-height:1; align-self:center; }

/* Індикатор прокрутки горизонтального ряду (значення ставить main.js) */
.r-scrollbar{ display:none; position:relative; height:1px; background:var(--line); }
.r-scrollbar.is-on{ display:block; }
.r-scrollbar span{
	position:absolute; top:-1px; height:3px;
	left:var(--x, 0%); width:var(--w, 40%);
	background:var(--ink);
}

/* Секції товарів/інстаграму: кнопка живе в розмітці після сітки,
   а на десктопі грід повертає її у правий бік шапки секції. */
.fp-products__inner,
.fp-insta__inner{ display:grid; grid-template-columns:minmax(0,1fr) auto; }
.fp-products__inner > .section-head,
.fp-insta__inner > .section-head{ grid-column:1; grid-row:1; }
.fp-products__more,
.fp-insta__btn{ grid-column:2; grid-row:1; align-self:end; margin-bottom:24px; white-space:nowrap; }
.fp-products__inner > .products-grid,
.fp-insta__inner > .fp-insta__grid{ grid-column:1 / -1; grid-row:2; }
.fp-products__inner > .r-scrollbar{ grid-column:1 / -1; grid-row:3; }
.fp-insta__inner > .fp-insta__more{ grid-column:1 / -1; grid-row:3; }

/* ─── ≤1199 · великий планшет / малий ноут ────────────────────── */
@media (max-width: 1199px){
	:root{ --pad:32px; }

	.h-section,
	.section-head__title,
	.cta-band__title,
	.entry-title{ font-size:25px; }

	.header-icons{ gap:24px; }
	.site-header__right{ gap:28px; }
	.site-nav ul{ gap:20px; }

	.cta-band{ padding:64px 0; }
	.cta-band__content{ width:min(46%, 460px); }

	.site-footer__main{ padding:56px 0 44px; }
	.site-footer__grid{ gap:40px; }
	.site-footer__cols{ gap:40px; padding-top:40px; }
	.newsletter-row{ gap:20px; }
}

/* ─── ≤1023 · планшет: меню в шухляді ─────────────────────────── */
@media (max-width: 1023px){
	:root{ --pad:24px; }

	/* Верхня стрічка → біжучий рядок (вмикає main.js, коли не влазить) */
	.topstrip{ overflow:hidden; }
	.topstrip.has-ticker{ padding-left:var(--pad); }
	.topstrip__items{ gap:12px; flex-wrap:nowrap; }
	.topstrip__items li{ gap:12px; }
	.topstrip__inner.is-ticker{
		max-width:none; padding-inline:0; margin-inline:0;
		width:max-content; flex-wrap:nowrap;
		justify-content:flex-start; gap:0;
	}
	.topstrip__inner.is-ticker .topstrip__items{
		padding-right:12px;
		animation:roysen-ticker 34s linear infinite;
	}
	.topstrip__inner.is-ticker .topstrip__items::after{
		content:""; width:3px; height:3px; border-radius:50%;
		background:var(--beige); flex:none;
	}
	.topstrip__inner.is-ticker:hover .topstrip__items{ animation-play-state:paused; }

	/* ВАЖЛИВО: backdrop-filter робить хедер containing-block для fixed-дітей,
	   через що шухляда обрізалась висотою хедера. На мобільному фон і так
	   непрозорий (як у макеті), тож блюр прибираємо. */
	.site-header{
		padding:18px 0;
		background:var(--cream);
		backdrop-filter:none; -webkit-backdrop-filter:none;
	}
	.site-header__right{ gap:32px; }
	.site-header__burger{ display:flex; }
	.header-icons a.header-account{ display:none; } /* «Кабінет» переїхав у меню */

	/* Оболонка шухляди: фіксована на весь екран з overflow:hidden — саме вона
	   ховає закриту панель за краєм, тому сторінка не отримує горизонтального
	   скролу. Кліки не ловить (їх ловить .site-nav-scrim під нею). */
	.site-nav-shell{
		display:block;
		position:fixed; inset:0; z-index:130;
		overflow:hidden; pointer-events:none;
		visibility:hidden;
		transition:visibility 0s .34s;
	}
	body.nav-open .site-nav-shell{ visibility:visible; transition:visibility 0s 0s; }

	/* Шухляда */
	.site-header__nav{
		display:flex; flex-direction:column; gap:24px;
		position:absolute; top:0; right:0; bottom:0;
		width:100vw; max-width:none;
		padding:20px var(--pad) 40px;
		background:var(--cream);
		box-shadow:-24px 0 60px rgba(17,17,17,.16);
		overflow-y:auto; overscroll-behavior:contain;
		pointer-events:auto;
		transform:translateX(100%);
		transition:transform .34s cubic-bezier(.4,0,.2,1);
	}
	body.nav-open{ overflow:hidden; }
	body.nav-open .site-header__nav{ transform:none; }

	.site-header__nav-bar{
		display:flex; align-items:center; justify-content:space-between;
		min-height:18px;
	}
	/* слово «Меню» зайве — лишаємо тільки хрестик праворуч */
	.site-header__nav-title{ display:none; }
	.site-header__nav-bar{ justify-content:flex-end; }
	.site-header__nav-close{
		display:flex; padding:0; border:0; background:none;
		width:24px; height:24px; margin-right:-2px;
	}
	.site-header__nav-close svg{ width:24px; height:24px; fill:none; stroke:var(--ink); stroke-width:1.5; }

	/* ── Пошук у шухляді ── */
	.site-nav-search{ display:block; }

	/* ── Категорії: лейбл + сітка 2 в ряд ── */
	.site-nav-cats{ display:block; }
	.site-nav-cats__label{ display:block; margin-bottom:16px; }
	.site-nav-cats__grid{
		display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:18px 16px;
		list-style:none; margin:0; padding:0;
	}
	.site-nav-cats__grid a{
		display:block;
		font-size:15px; text-transform:uppercase; text-decoration:none;
		line-height:1.25; hyphens:auto;
	}
	.site-nav-cats__grid a:active{ opacity:.55; }
	.site-nav-cats__all{ opacity:.5; }

	/* ── Пункти меню: рядки на всю ширину зі стрілкою ── */
	.site-header__nav .site-nav{
		margin-inline:calc(var(--pad) * -1);   /* лінії від краю до краю шухляди */
	}
	.site-nav ul{ flex-direction:column; gap:0; }
	.site-nav li{ border-bottom:1px solid var(--line); }
	.site-nav li:first-child{ border-top:1px solid var(--line); }
	.site-nav a{
		display:flex; align-items:center; justify-content:space-between; gap:16px;
		padding:18px var(--pad);
		font-size:16px; font-weight:500; text-transform:uppercase;
		border-bottom:0; text-decoration:none;
	}
	/* стрілка — псевдоелемент, щоб не чіпати розмітку меню WP */
	.site-nav a::after{
		content:""; flex:none; width:20px; height:8px;
		background:var(--ink); opacity:.45;
		-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9'%3E%3Cpath d='M23.42 4.84a.6.6 0 0 0 0-.85L19.61.18a.6.6 0 1 0-.85.85l3.39 3.39-3.39 3.4a.6.6 0 0 0 .85.84l3.81-3.82ZM0 4.42v.6h23v-1.2H0v.6Z' fill='%23111'/%3E%3C/svg%3E") center/contain no-repeat;
		mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9'%3E%3Cpath d='M23.42 4.84a.6.6 0 0 0 0-.85L19.61.18a.6.6 0 1 0-.85.85l3.39 3.39-3.39 3.4a.6.6 0 0 0 .85.84l3.81-3.82ZM0 4.42v.6h23v-1.2H0v.6Z' fill='%23111'/%3E%3C/svg%3E") center/contain no-repeat;
		transition:transform .2s ease, opacity .2s ease;
	}
	.site-nav a:active::after{ transform:translateX(4px); opacity:1; }
	.site-nav li:hover > a,
	.site-nav .current-menu-item > a,
	.site-nav .current_page_item > a{
		border-bottom:0; text-decoration:none;
	}
	.site-nav .current-menu-item > a::after,
	.site-nav .current_page_item > a::after{ opacity:1; }

	.site-header__nav .header-switch{ gap:10px; font-size:14px; }
	.site-header__nav .header-switch a{ padding:4px 0; }

	.site-header__nav-extra{ display:flex; flex-direction:column; gap:2px; margin-top:-8px; }
	.site-header__nav-extra a{
		display:flex; align-items:center; gap:12px;
		padding:10px 0; font-size:14px; text-transform:uppercase; text-decoration:none;
	}
	.site-header__nav-extra svg{ width:18px; height:18px; fill:none; stroke:var(--ink); stroke-width:1.5; }

	.site-header__nav-foot{
		display:flex; flex-direction:column; gap:8px;
		margin-top:auto; padding-top:24px; border-top:1px solid var(--line);
	}
	/* телефон у шухляді не потрібен — він є у футері й на контактах */
	.site-header__nav-phone{ display:none; }
	.site-header__nav-email{ font-size:14px; text-decoration:none; opacity:.6; }
	.site-header__nav-social{ margin-top:8px; font-size:14px; text-transform:uppercase; }
	.site-header__nav-social a{ text-decoration:none; }
	.site-header__nav-social .sep{ opacity:.4; margin:0 6px; }

	/* «+» на картці поки прихована (рішення клієнта — зайва).
	   Щоб повернути: розкоментувати рядок нижче, решта стилів і логіка
	   (main.js → .js-card-sizes, клас .is-sizes) лишились на місці. */
	/* .product-card__more{ display:flex; } */

	/* Ряди товарів на головній і в «Схожих моделях» → горизонтальна карусель
	   (3 в екрані на планшеті, 2 на телефоні) — без «сиріток» від 4-ї картки. */
	.fp-products .products-grid,
	.pdp-related .products-grid{
		display:flex; gap:8px;
		overflow-x:auto; overscroll-behavior-x:contain;
		scroll-snap-type:x mandatory;
		scrollbar-width:none; -ms-overflow-style:none;
		margin-inline:calc(var(--pad) * -1);
		padding-inline:var(--pad);
		scroll-padding-inline:var(--pad);
	}
	.fp-products .products-grid::-webkit-scrollbar,
	.pdp-related .products-grid::-webkit-scrollbar{ display:none; }
	.fp-products .products-grid > .product-card,
	.pdp-related .products-grid > .product-card{
		flex:0 0 calc((100% - 16px) / 3);
		scroll-snap-align:start;
	}
	.fp-products__inner > .r-scrollbar{ margin-top:12px; }

	/* CTA: текст на всю ширину, фото — під ним */
	.cta-band{ padding:56px 0; }
	.cta-band__inner{ flex-direction:column; align-items:stretch; min-height:0; }
	.cta-band__content{ width:100%; order:1; }
	.cta-band__imgs{
		position:relative; inset:auto; order:2;
		margin-top:56px; width:100%; aspect-ratio:366/176;
	}
	.cta-band__img-main{ left:0; top:0; width:61.7%; aspect-ratio:226/176; }
	/* мале фото за макетом доходить до самого краю екрана */
	.cta-band__img-side{
		left:auto; right:calc(var(--pad) * -1); top:65.3%;
		width:39.6%; aspect-ratio:145/133; z-index:1;
	}

	/* Футер: бренд і колонки в колонку */
	.site-footer__grid{ flex-direction:column; gap:40px; }
	.site-footer__brand{ width:100%; max-width:none; gap:0; order:2; }
	.site-footer__cols{ order:1; padding-top:0; gap:56px; }
	.newsletter-row{
		order:1; flex-direction:column; align-items:stretch; gap:20px;
	}
	.newsletter-row__label{ white-space:normal; }
	.site-footer__wordmark{ order:2; margin-top:40px; }
	.site-footer__social{ order:3; }
	.site-footer__bar{ flex-wrap:wrap; gap:8px 24px; }
	.site-footer__bar-start{ flex-wrap:wrap; gap:4px 16px; }
	.site-footer__bar-end{ gap:20px; }
}

/* ─── ≤767 · мобільний макет (Figma 390) ──────────────────────── */
@media (max-width: 767px){
	:root{ --pad:16px; }

	.h-section,
	.section-head__title,
	.cta-band__title,
	.entry-title{ font-size:22px; line-height:1.2; }
	.shop-title{ font-size:clamp(28px, 8.61vw, 39px); margin-bottom:24px; }

	/* Хедер: лого · пошук/♡/кошик · бургер */
	.site-header__right{ gap:32px; }
	.header-icons{ gap:24px; }

	/* Шапка секції: label → заголовок → опис, кнопка йде вниз */
	.fp-products__inner,
	.fp-insta__inner{ display:flex; flex-direction:column; }
	/* 14px, не 24: на телефоні заголовок секції має бути притиснутий до
	   контенту, інакше між назвою і плитками читається провал.
	   Правиться САМЕ тут: responsive.css підключається останнім (пріоритет 99),
	   тож правило в page-front.css він однаково перебивав. */
	/* `.fp-products .section-head` у page-front.css має вагу 0,2,0 — самим
	   `.section-head` його не перебити, тому перелічуємо обидва. */
	.section-head,
	.fp-products .section-head{ display:block; margin-bottom:14px; }
	.section-head__label{ margin-bottom:9px; }
	.section-head__desc{ margin-top:20px; color:var(--ink); max-width:none; }
	.fp-products__more,
	.fp-insta__btn{
		margin-bottom:0; width:100%;
		justify-content:space-between; white-space:normal; text-align:left;
	}

	.fp-products__inner > .r-scrollbar.is-on + .fp-products__more{ margin-top:26px; }
	.fp-products__inner > .r-scrollbar:not(.is-on) + .fp-products__more{ margin-top:32px; }

	/* Картка товару */
	.product-card__wish{ top:4px; right:4px; }
	.product-card__info{ padding-top:12px; gap:10px; }
	.product-card__name{
		display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
		overflow:hidden; line-height:1.25;
	}
	/* Ціна: діапазон «X – Y» ламався всередині сум — дозволяємо перенос
	   цілими елементами. Порядок за макетом: спочатку актуальна, потім стара. */
	.product-card__price .price{ flex-wrap:wrap; gap:4px 8px; }
	.product-card__price .price > *{ white-space:nowrap; }
	.product-card__price ins{ order:1; }
	.product-card__price del{ order:2; }

	.product-card__swatches{ gap:8px; }
	.product-card__swatch{ width:28px; height:16px; }
	.product-card__swatch.is-active{ width:34px; height:22px; padding:2px; }
	.product-card__swatch:nth-child(n+4){ display:none; }
	.product-card__swatch-more{ display:block; margin-left:2px; }
	/* Бейдж «Передзамовлення» — смуга під фото (так у макеті) */
	.product-card__badge{
		position:static; z-index:auto;
		display:flex; width:100%; gap:12px;
		padding:8px 14px; font-size:12px;
	}
	.product-card__badge::before{ width:3px; height:3px; }
	.product-card__sizes{ padding:12px; font-size:12px; }
	.product-card__sizes:not(:has(> :nth-child(5))){ gap:24px; padding:12px 20px; }

	/* CTA */
	.cta-band__label{ display:block; text-align:center; }
	.cta-band__title{ text-align:center; }
	.cta-band__btns{ margin-top:32px; gap:12px; }
	.cta-band__btns .r-btn:first-child{ flex:1 1 auto; }
	.cta-band__btns .r-btn{ padding:18px 16px; }

	/* Футер */
	.site-footer__main{ padding:56px 0 20px; }
	.site-footer__grid{ gap:46px; }
	.site-footer__cols{ gap:64px; }
	.newsletter-row{
		flex-direction:column; align-items:stretch; gap:24px;
		border-top:1px solid var(--cream-line); padding-top:40px;
	}
	.newsletter-row__label{ white-space:normal; }
	.newsletter{ gap:12px; }
	.newsletter input{ padding:6px 0; }
	.newsletter .r-btn{ padding:18px 20px; }
	.site-footer__wordmark{ margin-top:46px; }
	.site-footer__social{
		display:flex; justify-content:space-between;
		margin-top:19px; font-size:14px; text-transform:uppercase;
	}
	.site-footer__social a{ text-decoration:none; }
	.site-footer__social a:hover{ color:var(--yellow); }

	.site-footer__bar{
		flex-direction:column; align-items:center; gap:12px;
		padding-top:28px; padding-bottom:24px; text-align:center;
	}
	.site-footer__bar-start{ flex-direction:column; gap:12px; width:100%; }
	.site-footer__copy{ width:100%; padding-top:12px; border-top:1px solid var(--line); }
	.site-footer__bar-end{ flex-direction:column; gap:8px; }
	.site-footer__bar-right{ display:none; } /* соцмережі показані вище, у чорному блоці */

	/* Дрібне */
	.woocommerce-message,
	.woocommerce-info,
	ul.woocommerce-error{ padding:14px 16px 14px 38px; }
	.woocommerce-message::before,
	.woocommerce-info::before,
	ul.woocommerce-error::before{ left:16px; top:21px; }
	.woocommerce-message a.button,
	.woocommerce-info a.button,
	.woocommerce-error a.button{ float:none; display:block; margin:8px 0 0; }
	.v-note{ display:none; }
	.site-main--page{ padding:24px 0 64px; }
}

@keyframes roysen-ticker{ from{ transform:translateX(0) } to{ transform:translateX(-100%) } }

/* ─── ≤600 · телефони: 2 картки в екрані (як у макеті) ────────── */
@media (max-width: 600px){
	.fp-products .products-grid > .product-card,
	.pdp-related .products-grid > .product-card{ flex:0 0 calc((100% - 8px) / 2); }
}

/* ─── ≤480 · дрібні телефони: поля 12px як у макеті ───────────── */
@media (max-width: 480px){
	:root{ --pad:12px; }

	.cta-band__btns{ gap:8px; }
	.cta-band__btns .r-btn{ padding:18px 12px; font-size:13px; }
	.site-footer__cols{ gap:32px; }
	.newsletter .r-btn{ padding:18px 16px; }
}

/* Дуже вузькі екрани — щоб кнопки CTA не ламались */
@media (max-width: 360px){
	.cta-band__btns{ flex-direction:column; }
	.cta-band__btns .r-btn{ width:100%; }
}

/* Прибрана анімація — стрічка просто гортається пальцем */
@media (prefers-reduced-motion: reduce){
	.topstrip__inner.is-ticker{ overflow-x:auto; width:auto; max-width:100%; }
	.topstrip__inner.is-ticker .topstrip__items[aria-hidden]{ display:none; }
}