/**
 * PWine - Bảng thuộc tính sản phẩm (frontend).
 */

.pwpa {
	--pwpa-accent: #9b1b30;
	--pwpa-label: #6b7c8a;
	--pwpa-value: #9b1b30;
	--pwpa-value-muted: #222;
	--pwpa-gap-x: 10px;
	--pwpa-gap-y: 10px;
	--pwpa-icon: 28px;

	margin: 1rem 0 1.25rem;
	font-size: 14px;
	line-height: 1.35;
	color: var(--pwpa-value-muted);
}

.pwpa__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pwpa-gap-y) var(--pwpa-gap-x);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwpa--cols-1 .pwpa__list { grid-template-columns: minmax(0, 1fr); }
.pwpa--cols-2 .pwpa__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pwpa--cols-3 .pwpa__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pwpa--cols-4 .pwpa__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pwpa__item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
}

.pwpa__icon {
	flex: 0 0 var(--pwpa-icon);
	width: var(--pwpa-icon);
	height: var(--pwpa-icon);
	margin-top: 0.1rem;
	color: var(--pwpa-accent);
	line-height: 0;
}

.pwpa__icon .pwpa-icon__svg,
.pwpa__icon .pwpa-icon__svg svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pwpa__icon .pwpa-icon__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pwpa__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pwpa__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pwpa__value {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--pwpa-value);
	word-break: break-word;
}

.pwpa__value-link {
	color: inherit;
	text-decoration: none;
	font-size: 13px;
	color: #9b1b30;
	font-weight: bold;
}

.pwpa__value-link:hover,
.pwpa__value-link:focus {
	opacity: 0.82;
	border-bottom-color: transparent;
}

.pwpa__item--default .pwpa__value {
	color: var(--pwpa-value-muted);
	font-weight: 500;
}

/* Vòng lặp: gọn hơn */
.pwpa--loop {
	--pwpa-icon: 20px;
	--pwpa-gap-x: 0.65rem;
	--pwpa-gap-y: 0.55rem;
	margin: 0.45rem 0 0.55rem;
	font-size: 12px;
}

.pwpa--loop .pwpa__label {
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.pwpa--loop .pwpa__value {
	font-size: 0.78rem;
}

.pwpa--loop .pwpa__icon {
	margin-top: 0.05rem;
}

/* Grid vs List: both sets are in the HTML (JS switcher does not reload).
   Scope to `.product-small.box` — the column wrapper is also `.product-small`
   and never gets `box-vertical`, so `:not(.box-vertical)` on `.product-small`
   alone would hide List-only rows in every view. */
.product-small.box:not(.box-vertical) .pwpa--loop .pwpa__item--list:not(.pwpa__item--grid),
.product-small.box.box-vertical .pwpa--loop .pwpa__item--grid:not(.pwpa__item--list) {
	display: none;
}

.product-small.box:not(.box-vertical) .pwpa--loop:not(:has(.pwpa__item--grid)),
.product-small.box.box-vertical .pwpa--loop:not(:has(.pwpa__item--list)) {
	display: none;
}

/* List view: more room beside the image. */
.product-small.box.box-vertical .pwpa--loop {
	--pwpa-icon: 18px;
	--pwpa-gap-x: 0.85rem;
	--pwpa-gap-y: 0.45rem;
	margin: 0.4rem 0 0.55rem;
}

.product-small.box.box-vertical .pwpa--list-cols-1 .pwpa__list { grid-template-columns: minmax(0, 1fr);     background-color: #f7f7f7;
    padding: 5px;
    border-radius: 5px; }
.product-small.box.box-vertical .pwpa--list-cols-2 .pwpa__list { grid-template-columns: repeat(2, minmax(0, 1fr));     background-color: #f7f7f7;
    padding: 5px;
    border-radius: 5px;}
.product-small.box.box-vertical .pwpa--list-cols-3 .pwpa__list { grid-template-columns: repeat(3, minmax(0, 1fr));    background-color: #f7f7f7;
    padding: 5px;
    border-radius: 5px; }
.product-small.box.box-vertical .pwpa--list-cols-4 .pwpa__list { grid-template-columns: repeat(4, minmax(0, 1fr));    background-color: #f7f7f7;
    padding: 5px;
    border-radius: 5px; }

.product-small.box.box-vertical .pwpa--loop .pwpa__label {
	font-size: 0.62rem;
}

.product-small.box.box-vertical .pwpa--loop .pwpa__value {
	font-size: 0.82rem;
}

/* Single: khoảng cách dưới short description */
.single-product .pwpa--single {
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 7px;
}

@media (max-width: 849px) {
	.pwpa--cols-3 .pwpa__list,
	.pwpa--cols-4 .pwpa__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 549px) {
	.pwpa--single {
		--pwpa-icon: 22px;
		--pwpa-gap-x: 8px;
		--pwpa-gap-y: 8px;
		font-size: 13px;
	}

	.pwpa--single .pwpa__list,
	.pwpa--single.pwpa--cols-1 .pwpa__list,
	.pwpa--single.pwpa--cols-2 .pwpa__list,
	.pwpa--single.pwpa--cols-3 .pwpa__list,
	.pwpa--single.pwpa--cols-4 .pwpa__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pwpa--loop .pwpa__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.product-small.box.box-vertical .pwpa--list-cols-3 .pwpa__list,
	.product-small.box.box-vertical .pwpa--list-cols-4 .pwpa__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}