/* =============================================================================
   DivePro — sekcje strony głównej i karty produktów (Etap 2)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Nagłówek sekcji
   -------------------------------------------------------------------------- */
.dp-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}
.dp-section-head__title {
	margin: 0;
	font-size: clamp(1.0625rem, .95rem + .4vw, 1.1875rem);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.dp-section-head__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dp-primary);
	white-space: nowrap;
}

/* Bloki wyrównane do pełnej szerokości nie mogą wystawać poza viewport. */
.dp-main--front > .alignfull { margin-inline: 0; max-width: 100%; }

.dp-bg-white   { background: #fff; }
.dp-bg-section { background: var(--dp-section); }
.dp-bg-alt     { background: var(--dp-section-alt); }

.dp-products-section,
.dp-levels { padding-block: clamp(34px, 4vw, 52px); }

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.dp-hero {
	position: relative;
	background-color: var(--dp-navy);
	background-image:
		linear-gradient(90deg, rgba(8, 26, 47, .93) 0%, rgba(8, 26, 47, .62) 48%, rgba(11, 49, 86, .45) 100%),
		var(--dp-hero-image, none);
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
}

/* Bez zdjęcia hero opiera się na gradiencie oceanicznym — nadal wygląda celowo. */
.dp-hero--no-image {
	background-image:
		radial-gradient(120% 90% at 78% 18%, rgba(42, 167, 255, .30) 0%, transparent 60%),
		linear-gradient(135deg, #081A2F 0%, #0B3156 58%, #10456F 100%);
}

.dp-hero__inner { position: relative; z-index: 2; }
.dp-hero--small  .dp-hero__inner { padding-block: 46px 40px; }
.dp-hero--medium .dp-hero__inner { padding-block: 74px 66px; }
.dp-hero--large  .dp-hero__inner { padding-block: 104px 92px; }

.dp-hero__content { max-width: 620px; }

.dp-hero__eyebrow {
	margin: 0 0 14px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dp-light-blue);
}

.dp-hero__title {
	margin: 0 0 18px;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
	line-height: 1.06;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.015em;
	color: #fff;
}

.dp-hero__text {
	margin: 0 0 30px;
	max-width: 44ch;
	font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
	color: rgba(255, 255, 255, .86);
}

.dp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Pasek korzyści wchodzi na dolną krawędź hero. */
.dp-hero__usp {
	position: relative;
	z-index: 2;
	background: rgba(4, 16, 30, .55);
	backdrop-filter: blur(2px);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

/* -----------------------------------------------------------------------------
   Pasek korzyści
   -------------------------------------------------------------------------- */
.dp-usp-section { padding-block: 26px; }
.dp-usp-section--light { background: var(--dp-section-alt); }
.dp-usp-section--dark  { background: var(--dp-navy); }

.dp-usp {
	display: grid;
	grid-template-columns: repeat(var(--dp-usp-cols, 4), minmax(0, 1fr));
	gap: 18px 26px;
	padding-block: 18px;
}
.dp-usp__item { display: flex; align-items: center; gap: 13px; }

.dp-usp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
}
.dp-usp--light .dp-usp__icon { background: rgba(7, 87, 216, .1); color: var(--dp-primary); }
.dp-usp--dark  .dp-usp__icon { border: 1px solid rgba(255, 255, 255, .32); color: #fff; }

.dp-usp__text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.dp-usp__text strong {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.dp-usp__text em { font-style: normal; font-size: .75rem; }
.dp-usp--light .dp-usp__text strong { color: var(--dp-primary); }
.dp-usp--light .dp-usp__text em { color: var(--dp-muted); }
.dp-usp--dark .dp-usp__text strong { color: #fff; }
.dp-usp--dark .dp-usp__text em { color: rgba(255, 255, 255, .68); }

/* -----------------------------------------------------------------------------
   Kafelki kategorii / poziomów
   -------------------------------------------------------------------------- */
.dp-levels__head { margin-bottom: 24px; }
.dp-levels__title {
	margin: 0 0 6px;
	font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.dp-levels__subtitle { margin: 0; color: var(--dp-muted); font-size: .9375rem; }

.dp-levels__grid {
	display: grid;
	grid-template-columns: repeat(var(--dp-cols, 6), minmax(0, 1fr));
	gap: 16px;
}

.dp-level {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 22px 16px 20px;
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	text-align: center;
	color: var(--dp-text);
	transition: border-color var(--dp-base), box-shadow var(--dp-base), transform var(--dp-base);
}
.dp-level:hover {
	border-color: var(--dp-primary);
	box-shadow: var(--dp-shadow);
	transform: translateY(-2px);
	color: var(--dp-text);
}

.dp-level__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: var(--dp-primary);
}
.dp-level__media img { width: 72px; height: 72px; object-fit: contain; mix-blend-mode: multiply; }

.dp-level__name {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.dp-level__desc { font-size: .75rem; color: var(--dp-muted); line-height: 1.4; }
.dp-level__arrow { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; color: var(--dp-border); }
.dp-level:hover .dp-level__arrow { color: var(--dp-primary); }

/* -----------------------------------------------------------------------------
   Siatka i karta produktu
   -------------------------------------------------------------------------- */
.dp-grid {
	display: grid;
	grid-template-columns: repeat(var(--dp-cols, 5), minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
}

.dp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	overflow: hidden;
	transition: border-color var(--dp-base), box-shadow var(--dp-base);
}
.dp-card:hover { border-color: #CBD9E8; box-shadow: var(--dp-shadow); }

.dp-card__media { position: relative; padding: 16px; background: #fff; }

.dp-card__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 168px;
}
.dp-card__link img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.dp-card__badges {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}
.dp-badge-tag {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 4px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #fff;
}
.dp-badge-tag--new      { background: var(--dp-primary); }
.dp-badge-tag--sale     { background: var(--dp-error); }
.dp-badge-tag--featured { background: var(--dp-success); }

.dp-card__wishlist {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--dp-muted);
	cursor: pointer;
	transition: color var(--dp-fast), background var(--dp-fast);
}
.dp-card__wishlist:hover { color: var(--dp-error); background: #fff; }
.dp-card__wishlist[aria-pressed="true"] { color: var(--dp-error); }
.dp-card__wishlist[aria-pressed="true"] .dp-icon { fill: currentColor; }

.dp-card__oos {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(16, 32, 51, .82);
	color: #fff;
	font-size: .6875rem;
	font-weight: 600;
}
.dp-card--oos .dp-card__link img { opacity: .55; }

.dp-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 16px 16px;
	flex: 1 1 auto;
}

.dp-card__brand {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #94A3B8;
}

.dp-card__title {
	margin: 0;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dp-card__title a { color: var(--dp-text); }
.dp-card__title a:hover { color: var(--dp-primary); }

.dp-card__rating { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.dp-card__excerpt { margin: 4px 0 0; font-size: .875rem; color: var(--dp-muted); }

.dp-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 10px;
}

.dp-card__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dp-text);
}
.dp-card__price .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.dp-card__price ins { text-decoration: none; color: var(--dp-error); }
.dp-card__price del { font-size: .8125rem; font-weight: 500; color: #94A3B8; opacity: 1; }
.dp-card__price-ask { font-size: .9375rem; font-weight: 600; color: var(--dp-muted); }
.dp-card__omnibus { font-size: .6875rem; font-weight: 400; color: var(--dp-muted); }

.dp-card__cart {
	flex: none;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius-sm);
	background: #fff;
	color: var(--dp-navy);
	transition: background var(--dp-fast), color var(--dp-fast), border-color var(--dp-fast);
}
.dp-card__cart:hover,
.dp-card__cart:focus-visible {
	background: var(--dp-primary);
	border-color: var(--dp-primary);
	color: #fff;
}
.dp-card__cart.loading { opacity: .5; pointer-events: none; }
/* WooCommerce dokleja odnośnik „Zobacz koszyk" — licznik w nagłówku wystarczy. */
.dp-card .added_to_cart { display: none; }

/* Widok listy w katalogu */
.dp-card--list { flex-direction: row; }
.dp-card--list .dp-card__media { width: 220px; flex: none; }
.dp-card--list .dp-card__link { height: 160px; }
.dp-card--list .dp-card__body { padding: 20px; justify-content: center; }
.dp-card--list .dp-card__title { font-size: 1rem; min-height: 0; -webkit-line-clamp: 3; }
.dp-card--list .dp-card__footer { justify-content: flex-start; gap: 24px; }

/* -----------------------------------------------------------------------------
   Baner oceaniczny
   -------------------------------------------------------------------------- */
.dp-ocean {
	background:
		radial-gradient(100% 120% at 85% 0%, rgba(42, 167, 255, .22) 0%, transparent 62%),
		linear-gradient(120deg, var(--dp-navy) 0%, var(--dp-ocean) 100%);
	color: #fff;
	padding-block: clamp(26px, 3vw, 34px);
	margin-block: clamp(28px, 3.5vw, 44px);
}
.dp-ocean__grid {
	display: grid;
	grid-template-columns: repeat(var(--dp-cols, 4), minmax(0, 1fr));
	gap: 22px 30px;
}
.dp-ocean__item { display: flex; align-items: flex-start; gap: 14px; }
.dp-ocean__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: var(--dp-radius-sm);
	background: rgba(255, 255, 255, .1);
	color: var(--dp-light-blue);
}
.dp-ocean__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dp-ocean__title {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
}
.dp-ocean__text { font-size: .8125rem; color: rgba(255, 255, 255, .68); line-height: 1.45; }
.dp-ocean__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dp-light-blue);
}
.dp-ocean__link:hover { color: #fff; }

/* -----------------------------------------------------------------------------
   Wezwanie do działania
   -------------------------------------------------------------------------- */
.dp-cta {
	background: linear-gradient(120deg, var(--dp-navy) 0%, var(--dp-ocean) 100%);
	color: #fff;
	padding-block: clamp(28px, 3.5vw, 42px);
	margin-block: clamp(28px, 3.5vw, 44px);
}
.dp-cta--card {
	border-radius: var(--dp-radius-lg);
	max-width: var(--dp-container);
	margin-inline: auto;
}
.dp-cta__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.dp-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--dp-light-blue);
}
.dp-cta__body { flex: 1 1 320px; }
.dp-cta__title { margin: 0 0 6px; color: #fff; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
.dp-cta__text { margin: 0; color: rgba(255, 255, 255, .78); font-size: .9375rem; max-width: 62ch; }
.dp-cta__button { flex: none; }

/* -----------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */
.dp-newsletter { background: var(--dp-section-alt); padding-block: clamp(32px, 4vw, 48px); }
.dp-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: center;
}
.dp-newsletter__title { margin: 0 0 6px; }
.dp-newsletter__text { margin: 0; color: var(--dp-muted); font-size: .9375rem; }
.dp-newsletter__row { display: flex; gap: 10px; }
.dp-newsletter__input { flex: 1 1 auto; height: 48px; }
.dp-newsletter__consent {
	display: flex;
	gap: 9px;
	margin-top: 12px;
	font-size: .8125rem;
	color: var(--dp-muted);
	line-height: 1.45;
}
.dp-newsletter__consent input { width: auto; margin-top: 3px; flex: none; }
.dp-newsletter__status { margin: 8px 0 0; font-size: .875rem; }
.dp-newsletter__status.is-error { color: var(--dp-error); }
.dp-newsletter__status.is-ok { color: var(--dp-success); }

/* -----------------------------------------------------------------------------
   Komunikat pustego bloku (widoczny tylko w edytorze)
   -------------------------------------------------------------------------- */
.dp-block-empty {
	padding: 18px 20px;
	border: 1px dashed var(--dp-border);
	border-radius: var(--dp-radius-sm);
	background: var(--dp-section);
	color: var(--dp-muted);
	font-size: .875rem;
}

/* -----------------------------------------------------------------------------
   RWD
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.dp-grid { --dp-cols: 4 !important; }
	.dp-levels__grid { --dp-cols: 3; }
}

@media (max-width: 900px) {
	.dp-usp { --dp-usp-cols: 2 !important; }
	.dp-ocean__grid { --dp-cols: 2 !important; }
	.dp-newsletter__inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.dp-grid { --dp-cols: 2 !important; }
	.dp-levels__grid { --dp-cols: 2; }
	.dp-hero__title { text-transform: none; }
	.dp-hero--large .dp-hero__inner,
	.dp-hero--medium .dp-hero__inner { padding-block: 44px 38px; }
	.dp-card__link { height: 140px; }
	.dp-card--list { flex-direction: column; }
	.dp-card--list .dp-card__media { width: auto; }
	.dp-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
	.dp-usp { --dp-usp-cols: 1 !important; }
	.dp-ocean__grid { --dp-cols: 1 !important; }
	.dp-levels__grid { --dp-cols: 2; }
	.dp-hero__actions { flex-direction: column; align-items: stretch; }
	.dp-newsletter__row { flex-direction: column; }
	.dp-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}