/* /css/boxy.css */
:root {
	--cream: #f5ebdd;
	--berry: #a03b52;
	--bread: #5a3e2b;
	--kraft: #c8a97e;
}

.boxes-hero {
	background: linear-gradient(180deg, #c8a97e 0%, #d6ba90 100%),
		url('../img/crissxcross.png');
	background-size: cover, 200px;
	background-blend-mode: multiply;
	padding-bottom: 2rem;
}
.boxes-hero__subtitle {
	margin-top: 0.4rem;
	font-size: 1.9rem;
	color: #3e2a1f;
	opacity: 0.9;
}

.boxes {
	background: linear-gradient(
			rgba(255, 255, 255, 0.8),
			rgba(255, 255, 255, 0.8)
		),
		url('../img/bg_section1.png');
	padding: 3rem 0 6rem;
	scroll-margin-top: 120px;
}
.boxes__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin: 0.6rem auto 2rem;
}
.chip {
	border: none;
	cursor: pointer;
	padding: 0.6em 1.1em;
	border-radius: 999px;
	background: #c8a97e;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(200, 169, 126, 0.25);
	transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
}
.chip:hover {
	background: #a03b52;
	transform: translateY(-1px);
}
.chip.is-active {
	background: #a03b52;
}

.boxes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	/* Ensure rows stretch so every grid item can fill the available height -> equal card heights */
	grid-auto-rows: 1fr;
}

.bcard {
	background: var(--cream);
	border-radius: 14px;
	overflow: hidden;
	/* use column flex so we can keep title at top and push CTA to bottom */
	display: flex;
	flex-direction: column;
	height: 100%; /* fill the grid row (grid-auto-rows: 1fr) so all cards are same height */
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.bcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.bcard__media img {
	display: block;
	width: 100%;
	height: 400px;
	object-fit: cover;
	transition: transform 0.35s ease, filter 0.35s ease;
}
.bcard:hover .bcard__media img {
	transform: scale(1.04);
	filter: brightness(1.04);
}

.bcard__body {
	padding: 1.2rem 1.4rem 1.6rem;
	text-align: left;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.bcard__title {
	font-size: 2.1rem;
	color: var(--bread);
	margin: 0.5rem 0 0.2rem 0;
}
.bcard__price {
	margin-top: 0.4rem;
	align-self: flex-start;
	display: inline-block;
	background: #a03b52;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.35em 0.8em;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(160, 59, 82, 0.2);
}
.bcard__lead {
	margin-top: 1rem;
	color: #3e2a1f;
	opacity: 0.95;
}

/* prevent long descriptions from increasing card height and pushing neighbours
   clamp to ~5 lines (works in modern browsers) */
.bcard__lead {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bcard__tags {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin: 0.8rem 0 1rem;
	padding: 0;
	list-style: none;
}
.bcard__tags li {
	background: #c8a97e;
	color: #fff;
	font-size: 1.2rem;
	padding: 0.35em 0.7em;
	border-radius: 999px;
}

.bcard__toggle {
	padding: 0.6em 1.2em;
	border: none;
	border-radius: 10px;
	background: #8c9a74;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.4rem;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(140, 154, 116, 0.25);
	transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
}
.bcard__toggle:hover {
	background: #a03b52;
	transform: translateY(-1px);
}

.bcard__more {
	margin-top: 1rem;
	padding: 1rem;
	border-radius: 10px;
	background: linear-gradient(
		180deg,
		rgba(90, 62, 43, 0.04),
		rgba(90, 62, 43, 0.1)
	);
	color: #3e2a1f;
}
.bcard__list {
	margin: 0;
	padding-left: 1.4rem;
	line-height: 1.6;
}

.bcard__cta {
	display: inline-block;
	margin-top: 1rem;
	text-decoration: none;
	font-weight: 700;
	color: #fff;
	background: #8c9a74;
	padding: 0.8em 1.6em;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(140, 154, 116, 0.25);
	transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
}
.bcard__cta:hover {
	background: #a03b52;
	transform: translateY(-1px);
}

/* --- przycisk "dodaj do pudełka" --- */
.bcard__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.6em 1.6em;
	/* push button to card bottom when possible */
	margin-top: auto;
	background-color: #8c9a74; /* zielono-oliwkowy */
	color: #fff;
	font-family: 'Comfortaa', sans-serif;
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
	border: none;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(140, 154, 116, 0.25);
	transition: background-color 0.25s ease, transform 0.15s ease,
		box-shadow 0.25s ease;
}

.bcard__add i {
	font-size: 1.6rem;
	transition: transform 0.25s ease;
}

.bcard__add:hover {
	background-color: #a03b52; /* jagodowy */
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(160, 59, 82, 0.3);
}

.bcard__add:hover i {
	transform: rotate(-15deg);
}

.bcard__add:active {
	transform: translateY(0);
}

/* gdy przycisk chwilowo disabled po dodaniu */
.bcard__add:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* hide utility for temporarily unavailable products */
.bcard.is-hidden {
	display: none !important;
}

.boxes__note {
	padding: 4em;
}

/* 2 kolumny */
@media (min-width: 700px) {
	.boxes__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bcard__media img {
		height: 400px;
	}
}
/* 3 kolumny */
@media (min-width: 992px) {
	.boxes__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.bcard__media img {
		height: 440px;
	}
}