/* =========================================================================
   PIUROPRINT — Galeria szablonów
   ⚙ Джерело макета: Codex/2026-07-12/.../template-gallery.html
   Див. пам'ять gallery-redesign-track.md (інкремент 2).
   Рескін сторінки галереї PrintCart. Ізольовано під .pp-tg.
   Токени --pp-* приходять з piuroprint.css (enqueue-залежність pp-theme);
   макет-специфічні (navy/градієнти) — локальні --tg-*.
   Ширини .nbdesigner-item лишаємо сумісними з masonry (float-grid).
   ========================================================================= */

.pp-tg{
	--tg-navy:#071A35; --tg-navy-2:#0C2448; --tg-navy-3:#0D2958;
	--tg-orange:var(--pp-orange); --tg-orange-2:var(--pp-orange-hover);
	--tg-radius:20px;
	font-family:var(--pp-font);color:var(--pp-text);
	background:transparent;
}
.pp-tg *,.pp-tg *::before,.pp-tg *::after{box-sizing:border-box;}
.pp-tg-container{width:calc(100% - var(--pp-shell-inset));max-width:var(--pp-container);margin-left:auto;margin-right:auto;padding-inline:0;background:transparent;}

/* Галерея самодостатня — знімаємо відступи загальної сторінки. */
main.vz-page.vz-page--gallery{width:100%;max-width:none;padding:0 0 80px;margin:0 0 60px;background:transparent;}
.vz-page--gallery .vz-page-content{width:100%;margin-bottom:48px;}
.pp-tg .nbd-list-designs{width:100%;float:none;margin:0;padding:0;}
.pp-tg .nbd-gallery-con{margin:0;padding:0;}

/* Action button appearance is owned by buttons.css. */

/* HERO ------------------------------------------------------------------ */
.pp-tg-hero{position:relative;background:linear-gradient(120deg,#041327 20%,#081E42 48%,var(--tg-navy-3) 100%);color:#fff;overflow:hidden;}
.pp-tg-hero__content,.pp-tg-hero .pp-tg-chips{position:relative;z-index:1;}
.pp-tg-hero__grid{display:flex;align-items:stretch;justify-content:space-between;gap:28px;padding-block:26px 40px;}
.pp-tg-hero__content{width:min(640px,100%);padding-top:14px;}
.pp-tg-hero__h1{font-size:clamp(34px,3.6vw,58px);line-height:1.04;letter-spacing:-.03em;font-weight: 800;margin:0 0 16px;color:#fff;}
.pp-tg-hero__desc{font-size:var(--pp-fs-2xl, 18px);line-height:1.45;color:rgba(255,255,255,.86);margin:0 0 26px;max-width:560px;}

/* Чип активного товару (?pid=) на темному героєві: показує, під який формат
   звужена видача, і дає вихід назад до всіх форматів категорії. */
.pp-tg-hero__scope{margin:-14px 0 22px;}
.pp-tg-scope-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:999px;
	background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
	font-size:var(--pp-fs-md, 14px);font-weight:700;color:#fff;}
.pp-tg-scope-chip__meta{font-size:var(--pp-fs-2xs, 11px);font-weight:700;color:#fff;
	background:var(--tg-orange);border-radius:999px;padding:2px 9px;letter-spacing:.02em;}
.pp-tg-scope-chip__clear{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
	border-radius:50%;background:rgba(255,255,255,.16);color:#fff;text-decoration:none;
	font-size:var(--pp-fs-xl, 16px);line-height:1;transition:background .15s ease;}
.pp-tg-scope-chip__clear:hover{background:var(--tg-orange);}

.pp-tg-hero__search{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;
	padding:8px 8px 8px 20px;height:64px;width:min(620px,100%);box-shadow:0 18px 40px rgba(4,14,34,.35);}
.pp-tg-hero__search-icon{color:#8A94A8;flex-shrink:0;}
.pp-tg-hero__search-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--pp-font);
	font-size:var(--pp-fs-xl, 16px);color:#26324A;min-width:0;height:100%;}
.pp-tg-hero__search-input::placeholder{color:#9AA3B5;}
.pp-tg-hero__search-btn{flex-shrink:0;}

/* Декоративна композиція (без зовнішніх картинок → не б'є LCP). */
.pp-tg-hero__visual{position:absolute;z-index:0;top:0;right:max(calc((100% - var(--pp-container))/2),calc(var(--pp-shell-inset)/2));bottom:0;width:min(48%,860px);min-width:420px;overflow:hidden;}
/* The visual is anchored directly to the hero section and fills its complete
   height. Its right-hand viewport prevents the wide transparent PNG from
   spilling across the copy/search column; only excess artwork on the left is
   clipped, while the right edge stays aligned with the storefront rail. */
.pp-tg .pp-tg-hero__image{position:absolute;inset:0 0 0 auto;width:auto;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:right center;display:block;}
.pp-tg-hero__orb,.pp-tg-hero__mock{display:none;}
.pp-tg-hero__orb{position:absolute;border-radius:50%;filter:blur(14px);opacity:.34;z-index:0;}
.pp-tg-hero__orb--1{width:170px;height:170px;top:24px;right:130px;background:#FF7D31;}
.pp-tg-hero__orb--2{width:210px;height:210px;right:-10px;bottom:16px;background:#FB923C;}
.pp-tg-hero__mock{position:absolute;border-radius:18px;z-index:1;
	background:linear-gradient(160deg,#101826,#232C3B);box-shadow:0 24px 48px rgba(0,0,0,.28);overflow:hidden;}
.pp-tg-hero__mock::before{content:'';position:absolute;inset:0;
	background:linear-gradient(155deg,transparent 0 48%,rgba(255,255,255,.08) 48% 56%,transparent 56% 100%),
		linear-gradient(180deg,rgba(255,139,43,.18),transparent 40%);}
.pp-tg-hero__mock--card{width:200px;height:124px;left:20px;bottom:36px;transform:rotate(-14deg);}
.pp-tg-hero__mock--book{width:210px;height:290px;left:200px;top:30px;transform:rotate(-2deg);}
.pp-tg-hero__mock--menu{width:190px;height:270px;right:30px;top:14px;transform:rotate(10deg);}

/* CHIPS категорій — іконки-пігулки на ТЕМНОМУ героєві (як макет). -------- */
.pp-tg-chips{display:flex;flex-wrap:wrap;gap:12px;padding:4px 0 30px;}
.pp-tg-chip{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:14px;
	background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
	font-size:var(--pp-fs-md, 14px);font-weight:700;text-decoration:none;transition:background .15s,border-color .15s,color .15s;}
.pp-tg-chip:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);}
/* Клавіатурний фокус: у чипів був лише :hover, тож табом по 18 категоріях
   не видно, де ти стоїш. */
.pp-tg-chip:focus-visible{outline:2px solid var(--tg-orange);outline-offset:2px;}
.pp-tg-chip.is-active{background:#fff;color:var(--pp-dark);border-color:#fff;}
.pp-tg-chip__icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex-shrink:0;}
.pp-tg-chip__icon svg{width:18px;height:18px;}
.pp-tg-chip__icon img{width:20px;height:20px;object-fit:contain;filter:brightness(0) invert(1);}

/* LAYOUT: sidebar + results --------------------------------------------- */
.pp-tg-layout{display:flex;align-items:flex-start;gap:24px;padding:22px 0 28px;}
.pp-tg-sidebar{width:310px;flex-shrink:0;position:sticky;top:96px;}

/* Панель фільтрів */
.pp-tg-panel{background:#fff;border:1px solid #E3E8F0;border-radius:18px;
	box-shadow:0 3px 14px rgba(18,31,59,.05);padding:0px 22px 10px;}
.pp-tg-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.pp-tg-panel__title{margin:0;font-size:var(--pp-fs-3xl, 20px);font-weight: 800;letter-spacing:.01em;text-transform:uppercase;color:#17233B;}
.pp-tg-panel__reset{color:#3685E6;font-weight:700;text-decoration:none;font-size:var(--pp-fs-sm, 13px);white-space:nowrap;}
.pp-tg-panel__reset:hover{text-decoration:underline;}
.pp-tg-fgroup{padding:19px 8px 18px;border-bottom:1px solid #E9EDF3;}
.pp-tg-fgroup:last-child{border-bottom:0;padding-bottom:18px;}
.pp-tg-fgroup__toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
	border:0;background:transparent;padding:0;font-family:var(--pp-font);font-size:var(--pp-fs-xl, 16px);font-weight:800;
	color:#202C44;cursor:pointer;line-height:1.25;}
.pp-tg-fgroup__chevron{width:16px;height:16px;color:#A6B0C0;transition:transform .2s;transform:rotate(180deg);flex-shrink:0;}
.pp-tg-fgroup.is-collapsed .pp-tg-fgroup__chevron{transform:none;}
.pp-tg-fgroup__body{padding-top:13px;display:grid;gap:10px;}
.pp-tg-fgroup.is-collapsed .pp-tg-fgroup__body{display:none;}
.pp-tg-fgroup__empty{margin:2px 0 0;font-size:var(--pp-fs-sm, 13px);line-height:1.5;color:var(--pp-text-light);}
.pp-tg-optlist{display:grid;gap:2px;}
/* За замовчуванням показуємо перші 7 опцій (Wszystkie + 6), решта — за кнопкою. */
.pp-tg-fgroup:not(.is-expanded) .pp-tg-optlist > .pp-tg-opt:nth-child(n+8){display:none;}

/* Кнопка «Показати всі / менше». !important — щоб перебити глобальні стилі кнопок теми/WC. */
.pp-tg .pp-tg-more{display:inline-flex;align-items:center;gap:6px;align-self:start;width:auto;
	margin:0;padding:0;background:none;border:0;box-shadow:none;
	cursor:pointer;color:var(--pp-orange);font-size:var(--pp-fs-md, 14px);font-weight:600;line-height:1;
	text-transform:none;letter-spacing:normal;border-radius:0;min-height:0;}
.pp-tg .pp-tg-more:hover,.pp-tg .pp-tg-more:focus{background:none;color:var(--pp-orange-hover);text-decoration:underline;}
.pp-tg-more__chevron{width:14px;height:14px;transition:transform .2s;}
.pp-tg-fgroup.is-expanded .pp-tg-more__chevron{transform:rotate(180deg);}
.pp-tg-fgroup.is-expanded .pp-tg-more__show{display:none;}
.pp-tg-fgroup:not(.is-expanded) .pp-tg-more__hide{display:none;}

/* Опції фільтра — сучасний список (без радіо-кружечків «совок»). ---------
   Рядок-пігулка: hover-підсвітка, активний = м'який помаранчевий фон
   з тонкою акцент-крапкою зліва. Розмітку не чіпаємо — __radio перероблено
   на маленький індикатор. */
.pp-tg-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:0 -8px;border-radius:11px;
	font-size:var(--pp-fs-md, 14px);font-weight:600;color:var(--pp-text-2);text-decoration:none;position:relative;
	transition:background .15s ease,color .15s ease;}
.pp-tg-opt:hover{background:var(--pp-bg);color:var(--pp-text);}
.pp-tg-opt__radio{width:7px;height:7px;border-radius:50%;background:var(--pp-border);flex-shrink:0;
	transition:background .15s ease,transform .15s ease,box-shadow .15s ease;}
.pp-tg-opt:hover .pp-tg-opt__radio{background:var(--pp-text-light);}
.pp-tg-opt.is-active{background:linear-gradient(90deg,#FFF1E7,#FFF8F3);color:var(--tg-orange);font-weight:800;}
.pp-tg-opt.is-active .pp-tg-opt__radio{background:var(--tg-orange);transform:scale(1.35);
	box-shadow:0 0 0 4px rgba(255,106,19,.14);}
.pp-tg-opt__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pp-tg-opt__count{flex-shrink:0;font-size:var(--pp-fs-2xs, 11px);font-weight:700;color:var(--pp-text-light);background:var(--pp-bg);
	border-radius:999px;padding:2px 9px;min-width:24px;text-align:center;}
.pp-tg-opt.is-active .pp-tg-opt__count{color:var(--tg-orange);background:#FFE6D5;}

/* Група «Produkt»: підказка + двоярусна опція (назва товару + його формат).
   Базовий .pp-tg-opt__name — однорядковий з ellipsis; для опції з форматом
   перемикаємо на колонку, інакше метадані злипались би з назвою в один рядок. */
.pp-tg-fgroup__hint{margin:0 0 8px;font-size:var(--pp-fs-2xs, 11px);line-height:1.45;color:var(--pp-text-light);}
.pp-tg-opt__name:has(.pp-tg-opt__meta){display:flex;flex-direction:column;gap:1px;white-space:normal;overflow:visible;}
.pp-tg-opt__meta{font-size:var(--pp-fs-2xs, 11px);font-weight:600;color:var(--pp-text-light);letter-spacing:.01em;}
.pp-tg-opt.is-active .pp-tg-opt__meta{color:var(--tg-orange);opacity:.85;}
.pp-tg-fgroup__hint + .pp-tg-optlist{margin-top:0;}

.pp-tg-swatches{display:flex;flex-wrap:wrap;gap:10px;padding:1px 2px 2px;}
.pp-tg-swatch{width:25px;height:25px;border-radius:50%;background:var(--sw,#ccc);border:2px solid #fff;
	box-shadow:0 0 0 1px rgba(16,36,78,.12);cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s;}
.pp-tg-swatch:hover{transform:scale(1.12);}
.pp-tg-swatch.is-light{box-shadow:0 0 0 1px rgba(16,36,78,.2);}
.pp-tg-swatch.is-active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--tg-orange);}
/* Колір без шаблонів у поточній категорії — приглушений і некликабельний
   (рядок лишається стабільним, але клік не веде у порожню видачу). */
.pp-tg-swatch.is-disabled{opacity:.28;cursor:not-allowed;pointer-events:none;filter:grayscale(.35);}
.pp-tg-swatch.is-disabled:hover{transform:none;}

/* Промо-блок */
.pp-tg-promo{margin-top:18px;padding:22px;border-radius:var(--tg-radius);color:#fff;overflow:hidden;position:relative;
	background:linear-gradient(140deg,rgba(9,22,51,.98),rgba(33,24,84,.95)),#111827;
	box-shadow:0 18px 40px rgba(18,31,59,.1);}
.pp-tg-promo::after{content:'';position:absolute;right:-30px;bottom:-24px;width:180px;height:180px;
	background:radial-gradient(circle,rgba(255,255,255,.14),transparent 66%);}
.pp-tg-promo__title{margin:0 0 10px;font-size:var(--pp-fs-5xl, 26px);line-height:1.1;font-weight: 800;color:#fff;position:relative;z-index:1;}
.pp-tg-promo__desc{margin:0 0 20px;color:rgba(255,255,255,.78);line-height:1.5;font-size:var(--pp-fs-lg, 15px);position:relative;z-index:1;}
.pp-tg-promo .pp-tg-btn{position:relative;z-index:1;}
.pp-tg-promo__device{display:block;margin-top:18px;width:100%;aspect-ratio:16/10;border-radius:16px;position:relative;
	background:linear-gradient(180deg,#F5F9FF,#CCD5E5);box-shadow:inset 0 0 0 10px #1B2640;}
.pp-tg-promo__device::before{content:'';position:absolute;inset:18px;border-radius:9px;
	background:linear-gradient(90deg,#F2F5FB 0 28%,#DDE5F2 28% 30%,#F6F8FC 30% 100%);}

/* RESULTS --------------------------------------------------------------- */
.pp-tg-results{flex:1;min-width:0;}
.pp-tg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 20px;}
.pp-tg-count{margin:0;color:var(--pp-text-muted);font-size:var(--pp-fs-2xl, 18px);}
.pp-tg-count strong{color:var(--pp-text);font-weight:800;}
.pp-tg-toolbar__actions{display:flex;align-items:center;gap:14px;}

.pp-tg-sort{display:inline-flex;align-items:center;gap:10px;position:relative;background:#fff;
	border:1px solid var(--pp-border);border-radius:14px;height:46px;padding:0 12px 0 14px;color:var(--pp-text-muted);}
.pp-tg-sort__label{font-size:var(--pp-fs-md, 14px);white-space:nowrap;}
.pp-tg-sort__select{-webkit-appearance:none;appearance:none;border:0;outline:0;background:transparent;
	font-family:var(--pp-font);font-weight:700;font-size:var(--pp-fs-md, 14px);color:var(--pp-text);padding-right:20px;cursor:pointer;height:100%;}
.pp-tg-sort__chevron{position:absolute;right:12px;color:var(--pp-text-light);pointer-events:none;}

.pp-tg-view{display:inline-flex;background:#fff;border:1px solid var(--pp-border);border-radius:14px;overflow:hidden;}
.pp-tg-view__btn{width:46px;height:46px;border:0;background:transparent;color:#8190AA;cursor:pointer;display:grid;place-items:center;}
.pp-tg-view__btn.is-active{background:var(--pp-bg);color:var(--tg-orange);}

/* Сітка: детермінований float-grid (не залежимо від masonry-JS). --------- */
.pp-tg-grid-wrap{padding:2px 0 6px;}
.pp-tg .nbd-gallery-wrap.pp-tg-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;margin:0 !important;height:auto !important;}
.pp-tg .nbd-gallery-wrap.pp-tg-grid::after{content:none;}
.pp-tg .nbd-gallery-wrap .nbdesigner-item{position:relative !important;inset:auto !important;width:auto !important;margin:0 !important;
	float:none !important;padding:0;opacity:1;max-width:none;display:block;vertical-align:top;}

/* КАРТКА ---------------------------------------------------------------- */
.pp-tg-card{position:relative;container:pp-tg-card / inline-size;background:#F6F8FC;border:1px solid var(--pp-border);border-radius:18px;overflow:hidden;
	box-shadow:0 10px 28px rgba(16,36,78,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;}
.pp-tg-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(16,36,78,.12);border-color:rgba(255,106,19,.24);}
.pp-tg-card__media{position:relative;aspect-ratio:3/2;margin:5px 5px 0;background:#EEF2F7;border-radius:12px;overflow:hidden;}
.pp-tg-card__preview-link{position:absolute;inset:0;display:block;width:100%;height:100%;}
/* A complete design/placeholder must fit the frame, including on hover.
   The definite link box and component scope also defeat prose image resets. */
.pp-tg .pp-tg-card__img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;transform:none;}

.pp-tg-card__badge{position:absolute;left:10px;bottom:10px;z-index:3;padding:5px 10px;border-radius:999px;
	font-size:var(--pp-fs-xs, 12px);font-weight:800;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.16);
	max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Обране (перевизначаємо плагінні .nbd-like-icon) */
.pp-tg-card__fav{position:absolute;top:9px;right:9px;z-index:3;width:34px;height:34px;}
.pp-tg .pp-tg-card__fav .nbd-like-icon{position:absolute;inset:0;margin:0;padding:0;display:none;
	align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;cursor:pointer;
	background:rgba(255,255,255,.95);box-shadow:0 4px 12px rgba(16,36,78,.14);transition:background .15s,color .15s;}
.pp-tg .pp-tg-card__fav .nbd-like-icon.active{display:flex;}
/* «Додати в обране» — виразне серце (не блідо-сіре), щоб було помітно. */
.pp-tg .pp-tg-card__fav .nbd-like-icon.unlike{color:var(--tg-orange);}
.pp-tg .pp-tg-card__fav .nbd-like-icon.unlike:hover{color:var(--pp-orange);background:var(--pp-orange-light);}
.pp-tg .pp-tg-card__fav .nbd-like-icon.like{color:#E11D48;}
.pp-tg .pp-tg-card__fav .nbd-like-icon.like:hover{color:#E11D48;background:#FCE7F3;}
.pp-tg .pp-tg-card__fav .nbd-like-icon svg{width:19px;height:19px;}
.pp-tg .pp-tg-card__fav .nbd-like-icon.loading img{width:18px;height:18px;}
/* Пульс серця, коли наведено на всю картку (а не лише точно на іконку). */
@keyframes pp-fav-beat{0%,100%{transform:scale(1);}30%{transform:scale(1.22);}60%{transform:scale(.96);}}
.pp-tg .pp-tg-card:hover .pp-tg-card__fav .nbd-like-icon.active{
	animation:pp-fav-beat 1s ease-in-out infinite;
	box-shadow:0 4px 14px rgba(255,106,19,.32);}

/* Дії картки — ЗАВЖДИ видимі у тілі картки (як у макеті). */
.pp-tg-card__content{padding:12px;}
/* Заголовок притиснутий до підзаголовка — БЕЗ min-height (не резервуємо 2 рядки
   під однорядкові назви, інакше зайва «дірка» між текстом). line-clamp лишає
   стелю у 2 рядки для довгих назв, не форсуючи висоту. */
.pp-tg-card__title{margin:0 0 2px;font-size:var(--pp-fs-2xl, 18px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--pp-dark);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pp-tg-card__subtitle{margin:0;color:var(--pp-text-muted);font-size:var(--pp-fs-md, 14px);line-height:1.35;
	display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
/* Підзаголовок картки = ТОВАР + формат (не категорія): саме розмір каже, чи
   шаблон підійде. Назва товару клікабельна → звужує галерею на цей товар. */
.pp-tg-card__product{color:inherit;text-decoration:none;font-weight:600;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.pp-tg-card__product:hover{color:var(--tg-orange);text-decoration:underline;}
.pp-tg-card__size{flex-shrink:0;font-size:var(--pp-fs-2xs, 11px);font-weight:700;color:var(--pp-text-light);
	background:var(--pp-bg);border-radius:999px;padding:1px 8px;letter-spacing:.02em;}
.pp-tg-card__actions{display:flex;align-items:center;gap:8px;margin-top:12px;}
/* Card action appearance/size is owned by buttons.css. */
/* The sidebar makes gallery cards narrow at several intermediate viewport
   widths (including 3-column ~1128px and 4-column ~1200-1500px layouts).
   React to the card itself instead of guessing another page breakpoint, so
   translated labels never spill into the neighbouring card. */
@container pp-tg-card (max-width:280px){
	.pp-tg-card__actions{flex-direction:column;align-items:stretch;}
	.pp-tg .pp-tg-card__actions .pp-tg-card__btn{flex:0 0 auto;}
}
.pp-tg-card__edit{position:absolute;top:12px;left:12px;z-index:5;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
	border-radius:8px;background:rgba(255,255,255,.92);color:var(--pp-text-2);box-shadow:var(--pp-shadow-card);}
.pp-tg-card__edit:hover{color:var(--tg-orange);}

/* Вигляд «список» ------------------------------------------------------- */
.pp-tg .nbd-gallery-wrap.pp-tg-grid.pp-tg-grid--list{display:block !important;margin:0;}
.pp-tg .pp-tg-grid--list .nbdesigner-item{width:100% !important;float:none;margin:0 0 14px !important;display:grid;
	grid-template-columns:260px 1fr;align-items:center;border:1px solid var(--pp-border);border-radius:16px;overflow:hidden;}
.pp-tg .pp-tg-grid--list .pp-tg-card__media{aspect-ratio:auto;height:100%;min-height:150px;}
.pp-tg .pp-tg-grid--list .pp-tg-card__actions .pp-tg-card__btn{flex:0 0 auto;}

/* Широкий CTA ----------------------------------------------------------- */
.pp-tg-wide{margin-top:22px;padding:28px 34px;border-radius:var(--tg-radius);color:#fff;overflow:hidden;
	display:grid;grid-template-columns:1.3fr .7fr auto;align-items:center;gap:22px;
	background:radial-gradient(circle at left,rgba(255,255,255,.08),transparent 22%),linear-gradient(135deg,var(--tg-navy),#162853);}
.pp-tg-wide__h2{margin:0 0 8px;font-size:var(--pp-fs-7xl, 32px);line-height:1.04;font-weight: 800;color:#fff;}
.pp-tg-wide__desc{margin:0;color:rgba(255,255,255,.78);font-size:var(--pp-fs-xl, 16px);line-height:1.5;}
.pp-tg-wide__btn{justify-self:start;}
.pp-tg-wide__art{justify-self:end;width:250px;aspect-ratio:16/10;border-radius:18px;position:relative;
	background:linear-gradient(180deg,#EDF3FF,#DCE5F7);box-shadow:inset 0 0 0 10px #19274B;}
.pp-tg-wide__art::before{content:'';position:absolute;inset:18px;border-radius:9px;
	background:linear-gradient(90deg,#F5F9FF 0 28%,#DBE3F1 28% 30%,#F7FAFF 30% 100%);}

/* Пагінація плагіна (тригер #nbd-pagination лишається в DOM). ------------ */
/* ⚠ СПЕЦИФІЧНІСТЬ: плагінний селектор
   `.nbdesigner-pagination-con .tablenav-pages span.pagination-links > a` = (0,3,2)
   б'є короткий `.pagination-links a`. Тож дублюємо ту саму глибину + `.pp-tg`,
   щоб гарантовано перебити білі квадрати плагіна на круглі кнопки макета.
   Активна сторінка в HTML плагіна = <span class="tablenav-pages-navspan">,
   а не `.current` — цілимося саме в неї. */
.pp-tg #nbd-pagination{visibility:visible;height:auto;overflow:visible;margin:24px 0 8px;padding:0;}
.pp-tg #nbd-load-more{display:none;}
.pp-tg .nbdesigner-pagination-con{animation:none !important;transform:none !important;margin:24px 0 8px;}
.pp-tg .nbdesigner-pagination-con .tablenav-pages{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:0;background:transparent;border:none;border-radius:0;backdrop-filter:none;box-shadow:none;}
.pp-tg .nbdesigner-pagination-con .tablenav-pages > div:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pp-tg .nbdesigner-pagination-con .spacer{display:none;}
.pp-tg .nbdesigner-pagination-con .displaying-num{display:none;}
.pp-tg .nbdesigner-pagination-con .pagination-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* Кнопки-кола (a = переходи, span = поточна). Селектор ≥ плагінного (0,4,2). */
.pp-tg .nbdesigner-pagination-con .tablenav-pages span.pagination-links > a,
.pp-tg .nbdesigner-pagination-con .tablenav-pages span.pagination-links > span{
	min-width:46px;height:46px;margin:0;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
	border-radius:50%;border:1px solid var(--pp-border);background:#fff;color:var(--pp-text);
	font-size:var(--pp-fs-lg, 15px);font-weight:800;line-height:1;text-decoration:none !important;box-shadow:none !important;
	transition:border-color .15s,color .15s,background .15s;}
.pp-tg .nbdesigner-pagination-con .tablenav-pages span.pagination-links > a:hover{
	border-color:var(--tg-orange);color:var(--tg-orange);background:#FFF7ED;box-shadow:none !important;}
/* Поточна сторінка — помаранчевий градієнт (як активні чипи/CTA макета). */
.pp-tg .nbdesigner-pagination-con .tablenav-pages span.pagination-links > span.tablenav-pages-navspan{
	background:linear-gradient(135deg,var(--tg-orange),var(--tg-orange-2));border-color:transparent;color:#fff;}
.pp-tg .nbdesigner-pagination-con .tablenav-pages span.pagination-links > span.dots{
	min-width:auto;padding:0 4px;border:none;background:transparent;color:#6B7280;}

/* Empty state ----------------------------------------------------------- */
.pp-tg-empty{text-align:center;max-width:520px;margin:24px auto 40px;padding:48px 24px;}
.pp-tg-empty__icon{color:var(--pp-text-light);margin-bottom:12px;}
.pp-tg-empty__title{font-size:var(--pp-fs-5xl, 26px);font-weight:800;color:var(--pp-dark);margin:0 0 10px;letter-spacing:-.01em;}
.pp-tg-empty__desc{font-size:var(--pp-fs-lg, 15px);line-height:1.55;color:var(--pp-text-2);margin:0 0 24px;}
.pp-tg-empty__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* screen-reader-only */
.pp-tg .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* =========================== RESPONSIVE ================================= */
@media (max-width:1199px){
	.pp-tg .nbd-gallery-wrap.pp-tg-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
	.pp-tg-wide{grid-template-columns:1fr;text-align:left;}
	.pp-tg-wide__art{justify-self:start;}
}
@media (max-width:991px){
	/* Планшет: 18 категорій чипами по 50px виростали в стіну на 4–5 рядів
	   (270–332px) між героєм і першим шаблоном. Тонші чипи ріжуть її на чверть. */
	.pp-tg-chips{gap:8px;}
	.pp-tg-chip{gap:8px;padding:5px 12px 5px 5px;border-radius:12px;font-size:var(--pp-fs-sm, 13px);}
	.pp-tg-chip__icon{width:28px;height:28px;border-radius:9px;}
	.pp-tg-chip__icon svg{width:16px;height:16px;}
	.pp-tg-chip__icon img{width:17px;height:17px;}
	.pp-tg-hero__grid{flex-direction:column;padding-block:24px 32px;}
	.pp-tg-hero__content{width:100%;}
	.pp-tg-hero__visual{display:none;}
	.pp-tg-layout{flex-direction:column;}
	.pp-tg-sidebar{width:100%;position:static;}
	/* Mobile: filtr ma być szybkim narzędziem, nie drugą stroną przed wynikami.
	   JS zwija nieaktywne grupy; promo z sidebara znika, bo ten sam CTA jest już
	   pod wynikami (a przy pustej liście — w empty state). */
	.pp-tg-promo{display:none;}
	.pp-tg-swatch{width:34px;height:34px;}
	.pp-tg-swatches{gap:12px;}
}
@media (max-width:767px){
	.pp-tg .nbd-gallery-wrap.pp-tg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
	/* Mobile hero: прибираємо desktop-повітря і не даємо Astra перебити текст на темному фоні. */
	.pp-tg-hero__grid{padding-block:18px 22px;}
	.pp-tg-hero__content{padding-top:0;}
	.pp-tg-hero__h1{font-size:clamp(30px,8.4vw,34px);line-height:1.03;margin-bottom:12px;}
	.pp-tg .pp-tg-hero__desc{font-size:var(--pp-fs-xl, 16px);line-height:1.48;color:rgba(255,255,255,.82);margin-bottom:18px;}
	.pp-tg-hero__search{height:auto;flex-direction:column;padding:12px;gap:10px;align-items:stretch;border-radius:16px;}
	.pp-tg-hero__search-icon{display:none;}
	.pp-tg-hero__search-input{min-height:48px;border:1px solid var(--pp-border);border-radius:11px;padding:11px 14px;font-size:16px;}
	.pp-tg-hero__search-btn{width:100%;min-height:48px;}
	.pp-tg-toolbar{flex-direction:column;align-items:stretch;}
	.pp-tg-toolbar__actions{justify-content:space-between;}
	/* Телефон: ті самі 18 чипів переносом дали б ≈550px стіни перед сіткою,
	   тож стрічка скролиться (2881px проти 351 видимих на 375). Але про горизонтальний
	   скрол ніхто не здогадується: градієнт на правому краї (клас вішає main.php,
	   поки праворуч ще є чипи) показує, що список триває; тонкий скролбар —
	   запасний сигнал там, де його взагалі малюють. */
	.pp-tg-chips{gap:8px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 28px 12px 0;
		scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;}
	.pp-tg-chips.has-more{-webkit-mask-image:linear-gradient(90deg,#000 0 calc(100% - 38px),transparent 100%);
		mask-image:linear-gradient(90deg,#000 0 calc(100% - 38px),transparent 100%);}
	.pp-tg-chips::-webkit-scrollbar{display:none;width:0;height:0;}
	.pp-tg-chip{flex-shrink:0;scroll-snap-align:start;}
	.pp-tg-wide{padding:24px 22px;}
	.pp-tg-wide__h2{font-size:var(--pp-fs-5xl, 26px);}
	.pp-tg .pp-tg-grid--list .nbdesigner-item{grid-template-columns:1fr;}
	/* Дві колонки картки ≈165px — «Podgląd»+«Personalizuj» поруч не влазять (white-space:nowrap).
	   ⚠ У column-контейнері базовий `flex:1` (=1 1 0%) б'є по ВИСОТІ й з'їдає height:40px —
	   тому кнопкам тут потрібен flex:0 0 auto, а ширину дає align-items:stretch. */
	.pp-tg-card__actions{flex-direction:column;align-items:stretch;}
	.pp-tg .pp-tg-card__actions .pp-tg-card__btn,
	.pp-tg .pp-tg-grid--list .pp-tg-card__actions .pp-tg-card__btn{flex:0 0 auto;}
}
@media (max-width:420px){
	.pp-tg .nbd-gallery-wrap.pp-tg-grid{grid-template-columns:1fr;}
	.pp-tg-hero__h1{font-size:30px;}
	.pp-tg .pp-tg-hero__desc{font-size:15px;}
	.pp-tg-hero__search{padding:11px;}
	.pp-tg-chip{font-size:12px;}
}

/* Перебиваємо Astra .entry-content (кольори заголовків/лінків успадковуються). */
.pp-tg .pp-tg-hero__h1{color:#fff;}
/* Чипи стоять на темному героєві, тож перебивання Astra мусить повторювати
   базовий #fff. Було #3D4A64 (колір зі світлого макета) на #081E42 — контраст
   1.85:1, назви категорій фактично не читались; :hover тягнув туди ж.
   Темний текст лишається тільки активному чипу — під ним білий фон.
   Порядок важливий: :hover і .is-active мають однакову специфічність. */
.pp-tg .pp-tg-chip{color:#fff;}
.pp-tg .pp-tg-chip:hover{color:#fff;}
.pp-tg .pp-tg-chip.is-active{color:var(--pp-text);}
.pp-tg .pp-tg-card__title{color:var(--pp-dark);}
.pp-tg .pp-tg-wide__h2,.pp-tg .pp-tg-promo__title{color:#fff;}
.pp-tg .pp-tg-wide__desc,.pp-tg .pp-tg-promo__desc{color:rgba(255,255,255,.78);}
.pp-tg .pp-tg-empty__title{color:var(--pp-dark);}
.pp-tg .pp-tg-card__badge{color:#fff;}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
	.pp-tg *,.pp-tg *::before,.pp-tg *::after{animation-duration:.01ms;transition-duration:.01ms;scroll-behavior:auto;}
	.pp-tg-card:hover{transform:none;}
	.pp-tg-card:hover .pp-tg-card__img{transform:none;}
}