.product-detail .woocommerce-product-gallery__image,
.product-detail .woocommerce-product-gallery__image a {
	width: 100%;
}

.product-detail .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: auto;
	object-fit: initial;
}

.product-detail .summary {
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-3);
	padding-block: 0;
}

.product-detail__heading-card,
.product-detail__description-card {
	min-width: 0;
	padding: var(--fc-space-4);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	background: var(--fc-surface);
}

.product-detail__heading-card .product_title {
	margin: 0;
}

.product-detail__heading-card .woocommerce-product-rating,
.woocommerce .product-detail div.product .product-detail__heading-card .price,
.woocommerce-page .product-detail div.product .product-detail__heading-card .price {
	margin-top: var(--fc-space-2);
}

.product-detail__description-card .woocommerce-product-details__short-description {
	margin: 0;
	color: var(--fc-text);
}

.product-detail__description-card .woocommerce-product-details__short-description p {
	margin-block: 0 var(--fc-space-2);
}

.product-detail__description-card .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

.product-detail .summary form.cart,
.product-detail__trust,
.product-detail .product_meta {
	margin-top: 0;
}

/*
 * Global state-surface rule from tokens.css, and the same shape the shared
 * WooCommerce notices use: a neutral card — surface, one hairline border, the
 * standard radius — with the semantic tone carried by a compact cue only. The
 * card previously also grew its inline-start border to 4px, which read as a
 * second rule outside the card rather than as part of it.
 */
.product-detail__notice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--fc-space-2);
	align-items: start;
	padding: var(--fc-space-3);
	border: 1px solid var(--fc-state-border);
	border-radius: var(--fc-radius-md);
	background: var(--fc-state-surface);
}

/*
 * The cue. This badge is the one element allowed to carry the notice tone, so
 * the icon becomes a filled pill exactly like the order status card and the
 * WooCommerce notice glyphs. The product notice keeps its own vocabulary
 * (info / shipping / warning / storage); only the presentation role it maps to
 * lives here.
 */
.product-detail__notice-icon {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0.5rem;
	border-radius: var(--fc-radius-pill);
	fill: none;
	stroke: var(--fc-state-icon-fg);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	background: var(--fc-state-cue-info);
}

.product-detail__notice--info .product-detail__notice-icon {
	background: var(--fc-state-cue-info);
}

.product-detail__notice--shipping .product-detail__notice-icon {
	background: var(--fc-state-cue-success);
}

.product-detail__notice--warning .product-detail__notice-icon {
	background: var(--fc-state-cue-warning);
}

.product-detail__notice--storage .product-detail__notice-icon {
	background: var(--fc-state-cue-notice);
}

.product-detail__notice-copy {
	min-width: 0;
}

.product-detail__notice-copy strong {
	display: block;
	color: var(--fc-brand-secondary);
	font-size: 1rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.product-detail__notice-copy p {
	margin: var(--fc-space-1) 0 0;
	color: var(--fc-text-muted);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.product-detail__trust {
	padding: var(--fc-space-2);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	background: var(--fc-surface);
}

.product-detail .product_meta {
	padding: var(--fc-space-2) var(--fc-space-3);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	background: var(--fc-surface);
}

.product-detail div.product > .woocommerce-tabs:has(> ul.tabs:empty),
.product-detail div.product > .woocommerce-tabs:empty {
	display: none;
}

.product-detail div.product > .related,
.product-detail div.product > .up-sells {
	margin-top: 0;
}

@media (max-width: 900px) {
	.product-detail__heading-card,
	.product-detail__description-card {
		padding: var(--fc-space-3);
	}
}

@media (max-width: 767px) {
	.product-detail .summary {
		gap: var(--fc-space-2);
	}

	.product-detail__heading-card,
	.product-detail__description-card,
	.product-detail__notice {
		padding: var(--fc-space-2);
	}

	.product-detail__trust-list {
		gap: 0;
	}
}

@media (max-width: 420px) {
	.product-detail__heading-card .product_title {
		font-size: 1.8rem;
	}
}