/*
 * Stickerly — boks „Napisz w sprawie modyfikacji".
 *
 * ⚠️ BEZ GRADIENTU I BEZ FIOLETU. Wersja na produkcji ma tło
 * `linear-gradient(90deg,#f6e9ff,#faeaff,#ffeefd)` i przyciski
 * `linear-gradient(90deg,#7b3cff,#ff3bc9)` — to nie jest paleta Stickerly
 * i na karcie produktu wygląda jak wtyczka z innego sklepu.
 * Tutaj: błękit marki, granatowy przycisk, jeden akcent przy krawędzi.
 *
 * ⚠️ Ładowany wyłącznie na stronie produktu.
 */

.st-mod {
	--m-granat: #344a90;
	--m-granat-hover: #2b3d78;
	--m-blekit: #6f83c7;
	--m-blekit-jasny: #e8ecf8;
	--m-grafit: #181b22;
	--m-szary: #606775;
	--m-obwodka: #dce1ea;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	margin: 0 0 1.8rem;
	padding: clamp(1.1rem, 2.4vw, 1.6rem);
	border: 1px solid var(--m-obwodka);
	border-left: 3px solid var(--m-granat);
	border-radius: 4px 16px 16px 4px;
	background: var(--m-blekit-jasny);
}

.st-mod-tresc { flex: 1 1 22rem; min-width: 0; }

/* Specyficzność (0,2,0) — treść produktu ma własne reguły na `p` i `li`. */
.st-mod .st-mod-tytul {
	margin: 0 0 0.5rem;
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--m-grafit);
}

.st-mod .st-mod-tekst {
	margin: 0 0 0.8rem;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--m-szary);
}

.st-mod .st-mod-lista {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.st-mod .st-mod-lista li {
	position: relative;
	margin: 0 0 0.35rem;
	padding-left: 1.5rem;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--m-szary);
}

/* Ptaszek rysowany CSS-em — bez ikony do pobrania. */
.st-mod .st-mod-lista li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.42em;
	width: 0.42rem;
	height: 0.72rem;
	border: solid var(--m-granat);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.st-mod-akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.st-mod .st-mod-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Minimum dotykowe — te przyciski są klikane głównie na telefonie. */
	min-height: 44px;
	padding: 0.6rem 1.3rem;
	border-radius: 999px;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.st-mod .st-mod-btn--glowny {
	background: var(--m-granat);
	color: #fff;
	border: 1px solid var(--m-granat);
}

.st-mod .st-mod-btn--glowny:hover {
	background: var(--m-granat-hover);
	border-color: var(--m-granat-hover);
	color: #fff;
	text-decoration: none;
}

.st-mod .st-mod-btn--drugi {
	background: #fff;
	color: var(--m-granat);
	border: 1px solid var(--m-granat);
}

.st-mod .st-mod-btn--drugi:hover {
	background: #fff;
	border-color: var(--m-granat-hover);
	color: var(--m-granat-hover);
	text-decoration: none;
}

/* ---------- wizual: wykrojnik + ołówek ---------- */

.st-mod-wizual {
	position: relative;
	flex: 0 0 clamp(96px, 14vw, 136px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	color: var(--m-granat);
}

.st-mod-wizual span {
	position: absolute;
	border: 2px solid rgba(52, 74, 144, 0.18);
	border-radius: 12px;
	transform: rotate(var(--r, 0deg));
}

.st-mod-wizual span:nth-child(1) { width: 78%; height: 62%; }
.st-mod-wizual span:nth-child(2) { width: 58%; height: 78%; border-color: rgba(52, 74, 144, 0.3); }

.st-mod-wizual svg {
	position: relative;
	width: 34%;
	height: auto;
}

/* ---------- telefon ---------- */

@media (max-width: 620px) {
	.st-mod {
		/* ⚠️ Wizual znika, nie kurczy się. Przy dwóch kolumnach na 375 px
		   zostawało na treść ~200 px i tekst łamał się co drugie słowo. */
		gap: 0;
	}

	.st-mod-wizual { display: none; }

	.st-mod .st-mod-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-mod .st-mod-btn { transition: none; }
}