/* Доставка в картці товару. Кольори беруться зі змінних теми oct_deals (світла/темна), інакше — значення за замовчуванням. */
.pd-block {
	--pd-text: var(--ds-dark-text-color, #1f2933);
	--pd-muted: var(--ds-secondary-text-color, #6b7280);
	--pd-border: var(--ds-border-color, #ececec);
	--pd-bg: var(--ds-white-color, #fff);
	--pd-soft: var(--ds-light-bg-color, #f6f7f9);
	--pd-badge-bg: #fdf1a8;
	--pd-badge-text: #1f2933;

	container-type: inline-size;
	box-sizing: border-box;
	margin: 16px 0;
	padding: 16px 20px 8px;
	border-radius: 10px;
	background: var(--pd-bg);
	color: var(--pd-text);
	font-size: 14px;
	line-height: 1.35;
}

.pd-block [hidden] {
	display: none !important;
}

.pd-block.pd-is-loading {
	opacity: 0.55;
	transition: opacity 0.15s;
}

.pd-head {
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 500;
}

.pd-city {
	color: var(--pd-muted);
	border-bottom: 1px dashed currentColor;
	text-decoration: none;
}

.pd-city:hover,
.pd-city:focus {
	color: var(--pd-text);
	text-decoration: none;
}

.pd-list,
.pd-points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pd-row + .pd-row {
	border-top: 1px solid var(--pd-border);
}

.pd-main {
	display: grid;
	grid-template-columns: 36px minmax(0, 1.5fr) minmax(0, 1fr) auto 24px;
	grid-template-areas: "icon name time price info";
	align-items: center;
	gap: 4px 14px;
	padding: 10px 0;
}

.pd-icon {
	grid-area: icon;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 50%;
	color: #fff;
}

.pd-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pd-name {
	grid-area: name;
}

.pd-time {
	grid-area: time;
}

.pd-price {
	grid-area: price;
	justify-self: end;
	white-space: nowrap;
}

.pd-price-badge {
	white-space: nowrap !important;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--pd-badge-bg);
	color: var(--pd-badge-text);
}

.pd-info,
.pd-info-space {
	grid-area: info;
	width: 24px;
	height: 24px;
}

.pd-info {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pd-muted);
	cursor: pointer;
}

.pd-info:hover,
.pd-info[aria-expanded="true"] {
	color: var(--pd-text);
}

.pd-link {
	padding: 0;
	border: 0;
	border-bottom: 1px dashed currentColor;
	background: none;
	color: var(--pd-muted);
	font: inherit;
	cursor: pointer;
}

.pd-link:hover,
.pd-link[aria-expanded="true"] {
	color: var(--pd-text);
}

.pd-more {
	margin: 0 0 10px 50px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--pd-soft);
	color: var(--pd-muted);
	font-size: 13px;
}

.pd-more a {
	color: var(--ds-links-color, #00a8e8);
}

.pd-points li + li {
	margin-top: 8px;
}

.pd-points b {
	color: var(--pd-text);
	font-weight: 500;
}

.pd-muted {
	color: var(--pd-muted);
}

.pd-empty {
	padding: 8px 0 12px;
	color: var(--pd-muted);
}

/* Вузька колонка (права частина картки товару) або телефон: назва на всю ширину, під нею термін і ціна */
@container (max-width: 520px) {
	.pd-main {
		grid-template-columns: 36px minmax(0, 1fr) auto 24px;
		grid-template-areas:
			"icon name name info"
			"icon time price info";
		gap: 2px 12px;
	}

	.pd-time {
		color: var(--pd-muted);
		font-size: 13px;
	}

	.pd-time:empty {
		display: none;
	}

	/* Довгу ціну («За тарифами перевізника») переносимо, щоб не стискати назву */
	.pd-price {
		max-width: 10em;
		font-size: 13px;
		white-space: normal;
		text-align: right;
	}

	.pd-more {
		margin-left: 0;
	}
}

@media (max-width: 575px) {
	.pd-block {
		padding: 14px 14px 6px;
	}

	.pd-main {
		grid-template-columns: 36px minmax(0, 1fr) auto 24px;
		grid-template-areas:
			"icon name name info"
			"icon time price info";
		gap: 2px 12px;
	}

	.pd-time {
		color: var(--pd-muted);
		font-size: 13px;
	}

	.pd-time:empty {
		display: none;
	}

	/* Довгу ціну («За тарифами перевізника») переносимо, щоб не стискати назву */
	.pd-price {
		max-width: 10em;
		font-size: 13px;
		white-space: normal;
		text-align: right;
	}

	.pd-more {
		margin-left: 0;
	}
}

/* Ціна Нової Пошти рахується (довантаження блоку) */
.pd-calc { display: inline-block; width: 46px; height: 12px; border-radius: 6px; vertical-align: middle; background: linear-gradient(90deg, rgba(127, 127, 127, .12) 25%, rgba(127, 127, 127, .28) 50%, rgba(127, 127, 127, .12) 75%); background-size: 200% 100%; animation: pd-calc 1.2s linear infinite; }
@keyframes pd-calc { from { background-position: 200% 0; } to { background-position: -200% 0; } }