/* ============================================================
   MVCKO — single product (dark / liquid glass)
   /wp-content/themes/CHILD/assets/product-single.css
   ============================================================ */

/* ============================================================
   KONTENER — reset nadpisań Astra/Woo
   ============================================================ */
.mvp,
.woocommerce div.product.mvp{
	--pink:#FF6A97;
	--bg:#161616;
	--surface:#262626;
	--line:rgba(255,255,255,.14);
	--txt:#F4F4F4;
	--muted:#9A9A9E;
	--r:10px;

	font-family:'DM Sans',system-ui,sans-serif;
	color:var(--txt);
	background:var(--bg);

	/* full-bleed */
	width:100vw !important;
	max-width:100vw !important;
	margin-left:calc(50% - 50vw) !important;
	margin-right:calc(50% - 50vw) !important;
	padding:32px 32px 96px !important;
	float:none !important;
	display:block !important;
	overflow-x:clip;
}

/* Astra/Woo lubią floatować i zwężać kolumny produktu — kasujemy */
.mvp .mvp__gallery,
.mvp .mvp__summary,
.woocommerce div.product.mvp .mvp__gallery,
.woocommerce div.product.mvp .mvp__summary{
	width:auto !important;
	max-width:none !important;
	float:none !important;
	margin:0 !important;
	padding:0 !important;
	clear:none !important;
}

.mvp__grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:64px;
	align-items:start;
	width:100%;
	max-width:1560px;
	margin:0 auto !important;
}

/* ============================================================
   GALERIA
   ============================================================ */
.mvp__hero,
.mvp__tile{
	margin:0;
	width:100%;
	border-radius:var(--r);
	overflow:hidden;
	background:var(--surface);
	cursor:zoom-in;
}
.mvp__hero img,
.mvp__tile img{
	display:block;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	object-fit:cover;
	transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.mvp__hero{aspect-ratio:4/5}
.mvp__hero:hover img,
.mvp__tile:hover img{transform:scale(1.04)}

.mvp__tiles{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	margin-top:16px;
}
.mvp__tile{aspect-ratio:1/1}

/* ============================================================
   SUMMARY
   ============================================================ */
.mvp__summary{position:sticky;top:32px}

.mvp__title{
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:clamp(24px,2.6vw,32px);line-height:1.1;
	letter-spacing:-.02em;text-transform:uppercase;
	margin:0 0 6px;color:var(--txt);
}
.mvp__excerpt{font-size:14px;color:var(--muted);margin-bottom:22px}
.mvp__excerpt p{margin:0}

.mvp__price{
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:17px;letter-spacing:-.01em;margin-bottom:28px;
}
.mvp__price del{opacity:.4;font-weight:400;margin-right:10px}
.mvp__price ins{text-decoration:none;color:var(--pink)}

/* ============================================================
   OPCJE (rozmiar / kolor / typ / pliki)
   ============================================================ */
.mvp__form{display:block;margin:0}
.mvp__opt{margin-bottom:26px}
.mvp__opt-label{
	display:block;margin-bottom:10px;
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:14px;letter-spacing:-.01em;color:var(--txt);
}
.mvp__opt-label em{color:var(--pink);font-style:normal}

.mvp__pills{display:flex;gap:10px;flex-wrap:wrap}

/* --- pigułka rozmiaru / typu --- */
.mvp__pill{
	min-width:42px;height:38px;padding:0 14px !important;
	display:grid;place-items:center;
	background:transparent !important;
	color:var(--txt) !important;
	border:1.5px solid var(--txt) !important;
	border-radius:8px !important;
	font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
	cursor:pointer;transition:.2s cubic-bezier(.2,.8,.2,1);
	line-height:1;
}
.mvp__pill:hover{
	border-color:var(--pink) !important;
	color:var(--pink) !important;
}
.mvp__pill.is-active{
	background:var(--pink) !important;
	border-color:var(--pink) !important;
	color:#161616 !important;
}
.mvp__pill.is-disabled{opacity:.25;pointer-events:none;text-decoration:line-through}

/* --- przycisk "tabela wymiarów" --- */
.mvp__ghost{
	margin-top:10px;height:34px;padding:0 18px !important;
	display:inline-grid;place-items:center;
	background:transparent !important;
	color:var(--txt) !important;
	border:1.5px solid var(--txt) !important;
	border-radius:8px !important;
	font-size:12px;cursor:pointer;transition:.2s;
}
.mvp__ghost:hover{border-color:var(--pink) !important;color:var(--pink) !important}

/* --- chip koloru --- */
.mvp__pills--color{gap:8px}
.mvp__chip{
	width:36px;height:36px;padding:0 !important;
	background:var(--chip,#888) !important;
	border:1.5px solid transparent !important;
	border-radius:8px !important;
	cursor:pointer;transition:.2s;
	box-shadow:0 0 0 0 var(--pink);
}
.mvp__chip:hover{transform:translateY(-1px)}
.mvp__chip.is-active{
	border-color:#fff !important;
	box-shadow:0 0 0 2px rgba(255,255,255,.25);
}

/* ============================================================
   DROPZONE
   ============================================================ */
.mvp__drop{
	position:relative;
	display:grid;place-items:center;
	min-height:96px;padding:20px;
	background:var(--surface);
	border:1.5px dashed var(--pink);
	border-radius:var(--r);
	text-align:center;cursor:pointer;
	transition:.25s cubic-bezier(.2,.8,.2,1);
}
.mvp__drop:hover,
.mvp__drop.is-over{
	background:#2E2E2E;
	box-shadow:0 0 0 3px rgba(255,106,151,.18);
}
.mvp__drop input[type=file]{
	position:absolute;inset:0;width:100%;height:100%;
	opacity:0;cursor:pointer;
}
.mvp__drop-text{font-size:14px;color:var(--txt)}
.mvp__drop-file{
	display:flex;align-items:center;gap:8px;
	font-size:13px;font-weight:500;word-break:break-all;color:var(--pink);
}
.mvp__drop-file[hidden]{display:none !important}
.mvp__drop-text[hidden]{display:none !important}
.mvp__drop-file::before{content:'📎'}
.mvp__drop.has-file{border-style:solid}
.mvp__drop-err{color:#FF8080;font-size:12px;margin:8px 0 0}
.mvp__hint{font-size:11px;color:var(--muted);margin:8px 0 0}

.mvp__note{
	width:100%;margin-top:12px;padding:12px 14px;
	background:var(--surface) !important;
	color:var(--txt) !important;
	border:1px solid var(--line) !important;
	border-radius:var(--r) !important;
	font-family:inherit;font-size:13px;resize:vertical;
}
.mvp__note::placeholder{color:var(--muted)}

/* ============================================================
   CTA
   ============================================================ */
.mvp__cta{
	position:relative;overflow:hidden;isolation:isolate;
	width:100%;height:56px;margin-top:8px;
	display:grid;place-items:center;
	border-radius:12px !important;
	border:1.5px solid rgba(255,255,255,.22) !important;
	color:#161616 !important;
	background:
		radial-gradient(120% 160% at 12% 0%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 55%),
		radial-gradient(120% 160% at 88% 100%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%),
		var(--pink) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.45),
		inset 0 -1px 0 rgba(0,0,0,.18),
		0 14px 32px rgba(255,106,151,.28);
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	cursor:pointer;
	transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.mvp__cta::after{
	content:'';position:absolute;inset:-40% -25%;z-index:-1;pointer-events:none;
	background:linear-gradient(115deg,
		transparent 34%,
		rgba(255,255,255,.55) 46%,
		rgba(255,255,255,.18) 54%,
		transparent 66%);
	transform:translateX(-32%);
	animation:mvpSheen 5.5s ease-in-out infinite;
}
.mvp__cta:hover{
	transform:translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55),
		inset 0 -1px 0 rgba(0,0,0,.2),
		0 18px 40px rgba(255,106,151,.42);
}
.mvp__cta:active{transform:translateY(0)}

/* --- KUP TERAZ: różowy napis + różowy stroke, przezroczyste tło --- */
.mvp__cta--buy{
	background:transparent !important;
	color:var(--pink) !important;
	border:1.5px solid var(--pink) !important;
	box-shadow:none !important;
	margin-top:0;margin-bottom:10px;
}
.mvp__cta--buy::after{display:none !important}
.mvp__cta--buy:hover{
	transform:translateY(-2px);
	background:rgba(255,106,151,.08) !important;
	box-shadow:0 12px 28px rgba(255,106,151,.22) !important;
}
/* przy dwóch przyciskach "Dodaj do koszyka" nie potrzebuje górnego marginesu */
.mvp__cta--buy + .mvp__cta{margin-top:0}

@media (prefers-reduced-motion:reduce){
	.mvp__cta::after{animation:none}
}

/* ============================================================
   TIMELINE — LIQUID GLASS
   ============================================================ */
.mvp__timeline{
	position:relative;overflow:hidden;
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:8px;margin:44px 0 0;padding:24px 16px;
	border-radius:12px;
	border:1px solid var(--line);
	background:rgba(255,255,255,.035);
	text-align:center;
}

/* refleks tylko na CTA — tutaj wyłączony */
.mvp__glass-sheen{display:none}

@keyframes mvpSheen{
	0%,100%{transform:translateX(-32%)}
	50%    {transform:translateX(32%)}
}

.mvp__step{position:relative;z-index:1}
.mvp__ico{
	width:40px;height:40px;margin:0 auto 10px;
	display:grid;place-items:center;
	color:var(--muted);opacity:.85;
}
.mvp__ico svg{width:26px;height:26px}
.mvp__step-label{
	display:block;font-size:9px;letter-spacing:.12em;
	text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.mvp__step-val{display:block;font-size:12px;color:var(--txt);opacity:.8}
.mvp__step-val em{font-style:normal}

/* ============================================================
   AKORDEONY
   ============================================================ */
.mvp__acc{margin-top:56px}
.mvp__acc-item{border-bottom:1.5px solid var(--pink)}
.mvp__acc-head{
	width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:16px 0 !important;
	background:none !important;border:0 !important;border-radius:0 !important;
	color:var(--txt) !important;cursor:pointer;text-align:left;
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:14px;letter-spacing:-.01em;
	transition:color .2s;
}
.mvp__acc-head:hover{color:var(--pink) !important}
.mvp__acc-head i{position:relative;width:16px;height:16px;flex:0 0 16px}
.mvp__acc-head i::before,
.mvp__acc-head i::after{
	content:'';position:absolute;background:var(--pink);
	left:50%;top:50%;transform:translate(-50%,-50%);
	transition:.3s cubic-bezier(.2,.8,.2,1);
}
.mvp__acc-head i::before{width:16px;height:2px}
.mvp__acc-head i::after{width:2px;height:16px}
.mvp__acc-item.is-open .mvp__acc-head i::after{
	transform:translate(-50%,-50%) rotate(90deg);opacity:0;
}
.mvp__acc-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.8,.2,1)}
.mvp__acc-inner{padding:0 0 20px;font-size:14px;line-height:1.7;color:var(--muted)}
.mvp__acc-inner p:first-child{margin-top:0}
.mvp__acc-inner ul{padding-left:18px;margin:8px 0}
.mvp__acc-inner a{color:var(--pink) !important;text-decoration:none !important}

/* ---------- specyfikacja zdobienia ---------- */
.mvp__specs{
	display:grid;grid-template-columns:auto 1fr;gap:8px 20px;
	margin:18px 0 0;padding-top:16px;
	border-top:1px solid var(--line);font-size:12px;
}
.mvp__specs dt{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.mvp__specs dd{margin:0;color:var(--txt)}
.mvp__specs-colors{display:flex;gap:6px;flex-wrap:wrap}
.mvp__dot{width:18px;height:18px;border-radius:5px;border:1px solid var(--line);display:block}

/* ============================================================
   TABELA WYMIARÓW + MODAL
   ============================================================ */
.mvp__sizetable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mvp__sizetable{width:100%;border-collapse:collapse;font-size:13px}
.mvp__sizetable th,
.mvp__sizetable td{
	padding:11px 14px;text-align:center;white-space:nowrap;
	border:1px solid var(--line);color:var(--txt);
}
.mvp__sizetable thead th{
	background:rgba(255,255,255,.05);
	font-size:10px;letter-spacing:.1em;text-transform:uppercase;
	font-weight:500;color:var(--muted);
}
.mvp__sizetable tbody th{
	background:rgba(255,255,255,.05);
	font-family:'Unbounded',sans-serif;font-weight:900;font-size:12px;
}
.mvp__sizenote{font-size:11px;color:var(--muted);margin:12px 0 0}

.mvp__modal{
	position:fixed;inset:0;z-index:99998;
	display:flex;align-items:center;justify-content:center;padding:24px;
	background:rgba(10,10,11,.7);
	backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.mvp__modal[hidden]{display:none}
.mvp__modal-card{
	position:relative;width:100%;max-width:620px;
	max-height:82vh;overflow-y:auto;padding:32px;
	background:rgba(38,38,38,.92);
	border:1px solid var(--line);border-radius:14px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.5);
}
.mvp__modal-card h3{
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:16px;text-transform:uppercase;margin:0 0 20px;color:var(--txt);
}
.mvp__modal-close,
.mvp__lb-close{
	position:absolute;top:14px;right:18px;
	background:none !important;border:0 !important;
	color:var(--txt) !important;font-size:30px;line-height:1;cursor:pointer;
	transition:color .2s;
}
.mvp__modal-close:hover,
.mvp__lb-close:hover{color:var(--pink) !important}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.mvp__lb{
	position:fixed;inset:0;z-index:99999;
	display:flex;align-items:center;justify-content:center;padding:40px;
	background:rgba(10,10,11,.94);
	backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mvp__lb[hidden]{display:none}
.mvp__lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.mvp__lb-close{top:20px;right:26px;font-size:38px}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:1400px){
	.mvp__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
}
@media (max-width:960px){
	.mvp{padding:40px 14px 56px !important}
	.mvp__grid{grid-template-columns:1fr;gap:28px}
	.mvp__summary{position:static}

	/* zdjęcie główne — niższe, żeby nie zjadało całego ekranu */
	.mvp__hero{aspect-ratio:1/1}

	/* 4 miniatury w jednym rzędzie pod spodem */
	.mvp__tiles{
		grid-template-columns:repeat(4,minmax(0,1fr));
		gap:8px;margin-top:8px;
	}
	.mvp__tile{aspect-ratio:1/1}
	.mvp__timeline{padding:22px 10px;gap:4px}
	.mvp__ico{width:38px;height:38px;margin-bottom:8px}
	.mvp__ico svg{width:26px;height:26px}
	.mvp__step-val{font-size:11px}
	.mvp__modal-card{padding:24px 18px}
}

/* ============================================================
   NADPISANIA MOTYWU — tytuł, cena, siatka Woo
   ============================================================ */
.woocommerce div.product.mvp .mvp__title,
.woocommerce div.product.mvp .mvp__price{
	color:var(--txt) !important;
	font-family:'Unbounded',sans-serif !important;
}
.woocommerce div.product.mvp .mvp__price,
.woocommerce div.product.mvp .mvp__price .amount,
.woocommerce div.product.mvp .mvp__price bdi{
	color:var(--txt) !important;
	font-size:17px !important;
	font-weight:900 !important;
}
.woocommerce div.product.mvp .mvp__price ins,
.woocommerce div.product.mvp .mvp__price ins bdi{color:var(--pink) !important}

/* Woo/Astra dorzuca własne marginesy do form.cart */
.woocommerce div.product.mvp form.cart{margin-bottom:0 !important}
.woocommerce div.product.mvp .quantity{display:none !important}

/* Gdyby motyw lub inna wtyczka dorzuciła natywną galerię Woo — ukrywamy */
.mvp .woocommerce-product-gallery,
.mvp .woocommerce-product-gallery__wrapper,
.mvp > .onsale{display:none !important}

/* ============================================================
   LIQUID GLASS — przyciski drugorzędne
   ============================================================ */
.mvp__ghost,
.mvp__pill,
.mvp__modal-card .button{
	position:relative;overflow:hidden;isolation:isolate;
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 58%),
		rgba(255,255,255,.05) !important;
	border:1px solid rgba(255,255,255,.20) !important;
	color:var(--txt) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.18),
		inset 0 -1px 0 rgba(0,0,0,.22);
	transition:transform .22s cubic-bezier(.2,.8,.2,1),
	           box-shadow .22s, border-color .22s, background .22s;
}
.mvp__ghost:hover,
.mvp__pill:hover{
	transform:translateY(-1px);
	border-color:rgba(255,106,151,.55) !important;
	color:var(--pink) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.26),
		0 8px 20px rgba(0,0,0,.32);
}

/* aktywna pigułka — różowe szkło */
.mvp__pill.is-active{
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 58%),
		var(--pink) !important;
	border-color:rgba(255,255,255,.32) !important;
	color:#161616 !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.45),
		0 8px 20px rgba(255,106,151,.26);
}
.mvp__pill.is-active:hover{color:#161616 !important}

/* chip koloru — szklany rant */
.mvp__chip{
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.32),
		inset 0 -2px 4px rgba(0,0,0,.28);
}
.mvp__chip.is-active{
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.4),
		0 0 0 2px rgba(255,255,255,.28),
		0 8px 18px rgba(0,0,0,.35);
}

/* dropzone — spójna z resztą */
.mvp__drop{
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 58%),
		rgba(255,255,255,.03);
	border-color:rgba(255,106,151,.55);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

/* ============================================================
   SEKCJE POD KARTĄ (powiązane / upsell / opinie)
   — ten sam kontener i breakpointy co karta produktu
   ============================================================ */
.single-product .related,
.single-product .up-sells,
.single-product #reviews,
.single-product .woocommerce-tabs{
	width:100vw !important;
	max-width:100vw !important;
	margin-left:calc(50% - 50vw) !important;
	margin-right:calc(50% - 50vw) !important;
	padding:0 32px 72px !important;
	background:var(--mvp-bg,#161616);
	color:#F4F4F4;
	overflow-x:clip;
}
.single-product .related > *,
.single-product .up-sells > *,
.single-product #reviews > *{
	max-width:1560px;
	margin-left:auto !important;
	margin-right:auto !important;
}
.single-product .related h2,
.single-product .up-sells h2{
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:clamp(18px,2vw,24px);text-transform:uppercase;
	letter-spacing:-.02em;color:#F4F4F4;
	margin:0 auto 28px !important;
}

/* karty produktów */
.single-product .related ul.products,
.single-product .up-sells ul.products{
	display:grid !important;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:24px;margin:0 auto !important;padding:0 !important;
}
.single-product .related ul.products li.product,
.single-product .up-sells ul.products li.product{
	width:auto !important;margin:0 !important;float:none !important;
	padding:12px !important;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.035);
	transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s;
}
.single-product .related li.product:hover,
.single-product .up-sells li.product:hover{
	transform:translateY(-3px);
	border-color:rgba(255,106,151,.45);
}
.single-product .related li.product img,
.single-product .up-sells li.product img{
	border-radius:8px;margin-bottom:12px !important;
}
.single-product .related li.product .woocommerce-loop-product__title,
.single-product .up-sells li.product .woocommerce-loop-product__title{
	font-family:'Unbounded',sans-serif !important;font-weight:900 !important;
	font-size:13px !important;text-transform:uppercase;
	color:#F4F4F4 !important;padding:0 !important;
}
.single-product .related li.product .price,
.single-product .up-sells li.product .price,
.single-product .related li.product .price bdi{
	color:#9A9A9E !important;font-size:13px !important;
}

/* przycisk "dodaj do koszyka" w kartach — liquid glass */
.single-product .related li.product a.button,
.single-product .up-sells li.product a.button{
	position:relative;overflow:hidden;
	display:block;width:100%;margin-top:10px !important;
	padding:11px 14px !important;
	border-radius:10px !important;
	border:1px solid rgba(255,255,255,.20) !important;
	color:#F4F4F4 !important;
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 58%),
		rgba(255,255,255,.05) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.18),
		inset 0 -1px 0 rgba(0,0,0,.22);
	font-family:'Unbounded',sans-serif !important;font-weight:900 !important;
	font-size:10px !important;letter-spacing:.12em;text-transform:uppercase;
	text-align:center;text-decoration:none !important;
	transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .22s;
}
.single-product .related li.product a.button:hover,
.single-product .up-sells li.product a.button:hover{
	transform:translateY(-1px);
	color:#161616 !important;
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 58%),
		#FF6A97 !important;
	border-color:rgba(255,255,255,.32) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.45),
		0 10px 24px rgba(255,106,151,.30);
}

/* ============================================================
   BREAKPOINTY — identyczne dla karty i sekcji pod nią
   ============================================================ */
@media (max-width:1400px){
	.single-product .related ul.products,
	.single-product .up-sells ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
	.single-product .related,
	.single-product .up-sells,
	.single-product #reviews{padding:0 16px 56px !important}
	.single-product .related ul.products,
	.single-product .up-sells ul.products{
		grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
	}
}
@media (max-width:520px){
	.single-product .related ul.products,
	.single-product .up-sells ul.products{gap:12px}
}

/* ============================================================
   TŁO CAŁEJ STRONY PRODUKTU
   — kasuje jasne pasy nad, pod i między sekcjami (Astra/Woo)
   ============================================================ */
body.single-product,
body.single-product #page,
body.single-product #content,
body.single-product .site-content,
body.single-product .ast-container,
body.single-product #primary,
body.single-product .site-main,
body.single-product .content-area,
body.single-product .entry-content,
body.single-product .ast-article-single,
body.single-product article.product{
	background:#161616 !important;
	background-color:#161616 !important;
	border:0 !important;
	box-shadow:none !important;
}

/* Astra dokłada padding do wrappera artykułu — zbędny, mamy własny */
body.single-product .ast-article-single,
body.single-product .site-content > .ast-container{
	padding-left:0 !important;
	padding-right:0 !important;
	margin-left:auto !important;
	margin-right:auto !important;
	max-width:100% !important;
}

/* separatory i marginesy między sekcjami */
body.single-product .related,
body.single-product .up-sells{
	border-top:1px solid rgba(255,255,255,.10) !important;
	padding-top:56px !important;
	margin-top:0 !important;
}

/* ============================================================
   MOBILE — zwarty layout, krótszy scroll
   ============================================================ */
@media (max-width:960px){
	.mvp__title{font-size:clamp(20px,6vw,26px);margin-bottom:4px}
	.mvp__excerpt{font-size:13px;margin-bottom:16px}
	.mvp__price{margin-bottom:20px}

	.mvp__opt{margin-bottom:18px}
	.mvp__opt-label{font-size:13px;margin-bottom:8px}
	.mvp__pill{height:36px;padding:0 12px !important;font-size:12px}
	.mvp__chip{width:32px;height:32px}

	.mvp__drop{min-height:76px;padding:14px}
	.mvp__drop-text{font-size:13px}
	.mvp__note{margin-top:10px;padding:10px 12px}

	.mvp__cta{height:52px;font-size:11px}

	.mvp__timeline{margin-top:28px;padding:18px 8px}
	.mvp__acc{margin-top:32px}
	.mvp__acc-head{padding:14px 0 !important;font-size:13px}
	.mvp__acc-inner{font-size:13px;padding-bottom:16px}

	body.single-product .related,
	body.single-product .up-sells{padding-top:40px !important}
}

/* bardzo wąskie ekrany — miniatury nadal w jednym rzędzie */
@media (max-width:400px){
	.mvp__tiles{gap:6px}
	.mvp{padding:40px 12px 48px !important}
}

/* ============================================================
   PRODUKTY POWIĄZANE — poprawki v1.0.7
   ============================================================ */

/* siatka nie rozciąga kart, gdy produktów jest mało */
body.single-product .related ul.products,
body.single-product .up-sells ul.products{
	grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
	justify-content:start;
}

/* przycisk w karcie — różowe liquid glass, jak CTA */
body.single-product .related li.product a.button,
body.single-product .up-sells li.product a.button,
body.single-product .related li.product a.added_to_cart,
body.single-product .up-sells li.product a.added_to_cart{
	position:relative;overflow:hidden;isolation:isolate;
	display:block;width:100%;margin-top:12px !important;
	padding:14px 16px !important;
	border-radius:12px !important;
	border:1.5px solid rgba(255,255,255,.28) !important;
	color:#161616 !important;
	background:
		radial-gradient(120% 160% at 12% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 55%),
		radial-gradient(120% 160% at 88% 100%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 55%),
		#FF6A97 !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55),
		inset 0 -2px 4px rgba(0,0,0,.18),
		0 12px 28px rgba(255,106,151,.30) !important;
	font-family:'Unbounded',sans-serif !important;font-weight:900 !important;
	font-size:11px !important;letter-spacing:.14em;text-transform:uppercase;
	text-align:center;text-decoration:none !important;
	transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s !important;
}

/* przesuwający się refleks */
body.single-product .related li.product a.button::after,
body.single-product .up-sells li.product a.button::after{
	content:'';position:absolute;inset:-40% -25%;z-index:-1;pointer-events:none;
	background:linear-gradient(115deg,
		transparent 34%,
		rgba(255,255,255,.55) 46%,
		rgba(255,255,255,.18) 54%,
		transparent 66%);
	transform:translateX(-32%);
	animation:mvpSheen 5.5s ease-in-out infinite;
}

body.single-product .related li.product a.button:hover,
body.single-product .up-sells li.product a.button:hover{
	transform:translateY(-2px);
	color:#161616 !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.65),
		inset 0 -2px 4px rgba(0,0,0,.2),
		0 18px 38px rgba(255,106,151,.44) !important;
}
body.single-product .related li.product a.button:active,
body.single-product .up-sells li.product a.button:active{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
	body.single-product .related li.product a.button::after,
	body.single-product .up-sells li.product a.button::after{animation:none}
}

/* kategoria nad tytułem — czytelniejsza */
body.single-product .related li.product .woocommerce-loop-product__link + *,
body.single-product .related li.product .ast-woo-product-category,
body.single-product .up-sells li.product .ast-woo-product-category{
	color:#9A9A9E !important;font-size:11px !important;
	letter-spacing:.06em;text-transform:uppercase;
}

/* ============================================================
   PODZIAŁ 50/50 — czytelna długość wiersza w szerokiej kolumnie
   ============================================================ */
.mvp__excerpt,
.mvp__acc-inner{max-width:62ch}

/* zdjęcie główne wypełnia całą połowę */
.mvp__hero{aspect-ratio:4/5;width:100%}

/* ============================================================
   LIGHTBOX — nawigacja, licznik, krzyżyk
   ============================================================ */
.mvp__lb img{
	opacity:0;transform:scale(.985);
	transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.mvp__lb img.is-in{opacity:1;transform:scale(1)}

/* krzyżyk — szklany, zawsze nad zdjęciem */
.mvp__lb-close{
	position:fixed !important;
	top:20px;right:24px;z-index:10;
	width:48px;height:48px;
	display:grid;place-items:center;
	font-size:0 !important;
	border-radius:50% !important;
	border:1px solid rgba(255,255,255,.22) !important;
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 58%),
		rgba(255,255,255,.06) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	cursor:pointer;transition:.22s cubic-bezier(.2,.8,.2,1);
}
.mvp__lb-close::before,
.mvp__lb-close::after{
	content:'';position:absolute;
	width:18px;height:2px;border-radius:2px;background:#F4F4F4;
	transition:background .22s;
}
.mvp__lb-close::before{transform:rotate(45deg)}
.mvp__lb-close::after{transform:rotate(-45deg)}
.mvp__lb-close:hover{
	border-color:rgba(255,106,151,.6) !important;
	transform:rotate(90deg);
}
.mvp__lb-close:hover::before,
.mvp__lb-close:hover::after{background:#FF6A97}

/* strzałki */
.mvp__lb-nav{
	position:fixed;top:50%;transform:translateY(-50%);z-index:10;
	width:52px;height:52px;
	display:grid;place-items:center;
	color:#F4F4F4 !important;
	border-radius:50% !important;
	border:1px solid rgba(255,255,255,.22) !important;
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 58%),
		rgba(255,255,255,.06) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	cursor:pointer;padding:0 !important;
	transition:.22s cubic-bezier(.2,.8,.2,1);
}
.mvp__lb-nav svg{width:24px;height:24px}
.mvp__lb-nav:hover{
	color:#FF6A97 !important;
	border-color:rgba(255,106,151,.6) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 26px rgba(0,0,0,.4);
}
.mvp__lb-prev{left:24px}
.mvp__lb-next{right:24px}
.mvp__lb-prev:hover{transform:translateY(-50%) translateX(-3px)}
.mvp__lb-next:hover{transform:translateY(-50%) translateX(3px)}
.mvp__lb-nav[hidden]{display:none !important}

/* licznik */
.mvp__lb-count{
	position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:10;
	padding:8px 18px;border-radius:100px;
	border:1px solid rgba(255,255,255,.18);
	background:rgba(255,255,255,.06);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	font-family:'DM Sans',sans-serif;font-size:12px;
	letter-spacing:.08em;color:#F4F4F4;
}
.mvp__lb-count[hidden]{display:none !important}

@media (max-width:700px){
	.mvp__lb{padding:16px}
	.mvp__lb-nav{width:44px;height:44px}
	.mvp__lb-prev{left:12px}
	.mvp__lb-next{right:12px}
	.mvp__lb-close{top:12px;right:12px;width:42px;height:42px}
	.mvp__lb-count{bottom:18px}
}

/* ============================================================
   MOBILE — dopracowanie v1.2.3
   ============================================================ */
@media (max-width:960px){

	/* odstęp od sticky navbara */
	.mvp{padding-top:56px !important}

	/* zdjęcie główne nie zajmuje całego ekranu */
	.mvp__hero{
		aspect-ratio:auto !important;
		height:auto;
		max-height:58vh;
	}
	.mvp__hero img{
		height:auto !important;
		max-height:58vh;
		object-fit:contain !important;
	}

	/* miniatury — mniejsze i równe */
	.mvp__tiles{gap:8px;margin-top:10px}
	.mvp__tile{aspect-ratio:1/1}
	.mvp__tile img{object-fit:contain !important;padding:4px}

	/* badge promocji — czytelna pigułka zamiast paska */
	.mvp__sale{
		top:10px;left:10px;
		padding:5px 12px;
		font-size:9px;
		border-radius:100px;
		line-height:1;
	}

	/* tytuł i opis ciaśniej */
	.mvp__title{
		font-size:clamp(19px,5.4vw,24px) !important;
		line-height:1.15;
		margin-bottom:8px;
	}
	.mvp__excerpt{
		font-size:13px;
		line-height:1.55;
		margin-bottom:14px;
		max-width:none;
	}
	.mvp__price{
		font-size:20px !important;
		margin-bottom:18px;
	}

	/* pigułki rozmiaru — pełne wykorzystanie szerokości */
	.mvp__pills{gap:8px}
	.mvp__pill{
		flex:0 0 auto;
		min-width:46px;
		height:40px;
		font-size:13px;
	}

	/* zapas na dole, żeby pasek przeglądarki nie zasłaniał CTA */
	.mvp{padding-bottom:72px !important}
}

@media (max-width:400px){
	.mvp{padding:56px 12px 72px !important}
	.mvp__hero,
	.mvp__hero img{max-height:52vh}
	.mvp__pill{min-width:42px;height:38px;padding:0 10px !important}
}

/* ============================================================
   v1.2.4 — zero przycinania + zdjęcie niżej pod navbarem
   ============================================================ */

/* nic nie jest kadrowane: ani na desktopie, ani na mobile */
.mvp__hero img,
.mvp__tile img{
	object-fit:contain !important;
	background:#fff;
}
.mvp__hero,
.mvp__tile{background:#fff}

/* miniatury produktów powiązanych też bez przycinania */
body.single-product .related li.product img,
body.single-product .up-sells li.product img{
	object-fit:contain !important;
	background:#fff;
	aspect-ratio:1/1;
}

@media (max-width:960px){
	/* wyraźny odstęp od sticky navbara */
	.mvp{padding-top:96px !important}

	.mvp__hero{
		aspect-ratio:auto !important;
		max-height:none;
	}
	.mvp__hero img{
		max-height:none;
		height:auto !important;
	}

	.mvp__tile{aspect-ratio:1/1}
	.mvp__tile img{padding:0}
}

@media (max-width:400px){
	.mvp{padding:96px 12px 72px !important}
}

/* ============================================================
   v1.2.5 — realny odstęp pod navbarem + kasowanie badge motywu
   ============================================================ */

/* Astra/Woo wstrzykuje własny badge "Promocja" w róg zdjęcia */
.mvp .onsale,
.mvp span.onsale,
.mvp .woocommerce-product-gallery .onsale,
body.single-product .onsale{display:none !important}

@media (max-width:960px){
	/* header jest przyklejony i nachodzi na treść — odsuwamy galerię */
	.mvp{padding-top:0 !important}

	.mvp__gallery{
		margin-top:132px !important;
	}
	.mvp__grid{margin-top:0 !important}
}

@media (max-width:400px){
	.mvp{padding:0 12px 72px !important}
	.mvp__gallery{margin-top:124px !important}
}

/* ============================================================
   STICKY PASEK NA MOBILE — liquid glass
   ============================================================ */
.mvp__sticky{
	position:fixed;
	left:0;right:0;bottom:0;
	z-index:9990;
	display:none;
	align-items:center;
	gap:12px;
	padding:10px 12px calc(10px + env(safe-area-inset-bottom));
	border-top:1px solid rgba(255,255,255,.14);
	background:
		radial-gradient(120% 200% at 10% 0%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
		rgba(22,22,22,.86);
	backdrop-filter:blur(20px) saturate(160%);
	-webkit-backdrop-filter:blur(20px) saturate(160%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -12px 32px rgba(0,0,0,.45);
	transform:translateY(110%);
	transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.mvp__sticky.is-visible{transform:translateY(0)}

.mvp__sticky-info{
	display:flex;align-items:center;gap:10px;
	flex:1 1 auto;min-width:0;
}
.mvp__sticky-img{
	width:44px;height:44px;flex:0 0 44px;
	border-radius:8px;object-fit:contain;
	background:#fff;
	border:1px solid rgba(255,255,255,.12);
}
.mvp__sticky-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mvp__sticky-title{
	font-family:'DM Sans',sans-serif;
	font-size:11px;font-weight:400;color:#9A9A9E;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mvp__sticky-price,
.mvp__sticky-price .amount,
.mvp__sticky-price bdi{
	font-family:'Unbounded',sans-serif;
	font-weight:900;font-size:15px;color:#F4F4F4 !important;
	line-height:1;
}
.mvp__sticky-price del{display:none}
.mvp__sticky-price ins{text-decoration:none}

.mvp__sticky-cta{
	position:relative;overflow:hidden;isolation:isolate;
	flex:0 0 auto;
	height:46px;padding:0 22px !important;
	display:grid;place-items:center;
	border-radius:12px !important;
	border:1.5px solid rgba(255,255,255,.28) !important;
	color:#161616 !important;
	background:
		radial-gradient(120% 160% at 12% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 55%),
		#FF6A97 !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55),
		0 10px 24px rgba(255,106,151,.32);
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:11px;letter-spacing:.1em;text-transform:uppercase;
	white-space:nowrap;cursor:pointer;
	transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.mvp__sticky-cta::after{
	content:'';position:absolute;inset:-40% -25%;z-index:-1;pointer-events:none;
	background:linear-gradient(115deg,
		transparent 34%,
		rgba(255,255,255,.55) 46%,
		rgba(255,255,255,.18) 54%,
		transparent 66%);
	transform:translateX(-32%);
	animation:mvpSheen 5.5s ease-in-out infinite;
}
.mvp__sticky-cta:active{transform:scale(.97)}

@media (max-width:960px){
	.mvp__sticky{display:flex}
	/* zapas, żeby pasek nie zasłaniał akordeonów */
	.mvp{padding-bottom:96px !important}
}
@media (prefers-reduced-motion:reduce){
	.mvp__sticky{transition:none}
	.mvp__sticky-cta::after{animation:none}
}

/* ============================================================
   v1.3.1 — miniatury bez białych pasów
   Zdjęcie główne zostaje w całości (contain),
   miniatury kadrujemy (cover), bo to tylko podgląd.
   ============================================================ */
.mvp__tile{
	background:#0F0F10 !important;
	border:1px solid rgba(255,255,255,.10);
}
.mvp__tile img{
	object-fit:cover !important;
	padding:0 !important;
	width:100% !important;
	height:100% !important;
}

/* zdjęcie główne: tło pod przezroczystością zamiast bieli */
.mvp__hero{
	background:#0F0F10 !important;
	border:1px solid rgba(255,255,255,.08);
}

/* karty produktów powiązanych — też bez pasów */
body.single-product .related li.product img,
body.single-product .up-sells li.product img{
	object-fit:cover !important;
	background:#0F0F10;
}

@media (max-width:960px){
	.mvp__tile img{object-fit:cover !important}
}

/* ============================================================
   v1.4.5 — sticky header nie zasłania treści
   ============================================================ */

/* wysokość przyklejonego nagłówka — zmień, jeśli Twój jest inny */
.mvp{--nav:96px}

/* kolumna z opisem klei się PONIŻEJ nagłówka, więc tytuł zostaje widoczny */
.mvp__summary{top:calc(var(--nav) + 20px) !important}

/* kotwice i skok do sekcji nie chowają się pod nagłówkiem */
html{scroll-padding-top:calc(96px + 16px)}
.mvp__acc-item,
.mvp__grid,
.mvp__timeline{scroll-margin-top:calc(96px + 16px)}

@media (max-width:960px){
	.mvp{--nav:84px}

	/* zdjęcie startuje wyraźnie pod nagłówkiem */
	.mvp__gallery{margin-top:calc(var(--nav) + 56px) !important}

	html{scroll-padding-top:100px}
	.mvp__acc-item,
	.mvp__grid,
	.mvp__timeline{scroll-margin-top:100px}
}

@media (max-width:400px){
	.mvp__gallery{margin-top:calc(var(--nav) + 48px) !important}
}

/* ============================================================
   v1.4.6 — odstęp od nagłówka bez scalania marginesów
   Margines na .mvp__gallery scalał się z rodzicem i znikał,
   dlatego odstęp idzie teraz paddingiem na samej sekcji.
   ============================================================ */
@media (max-width:960px){
	.mvp,
	.woocommerce div.product.mvp{
		padding-top:75px !important;
	}
	.mvp__gallery{margin-top:0 !important}
	.mvp__grid{margin-top:0 !important}
}

@media (max-width:400px){
	.mvp,
	.woocommerce div.product.mvp{
		padding-top:70px !important;
	}
}