/*
 * DA Beauty — WordPress compatibility layer.
 *
 * Loads last. Nothing here restyles the design; it only bridges
 * WordPress/WooCommerce markup onto the component library carried over
 * from the source storefront, plus the accessibility and core-block
 * requirements a native theme must satisfy.
 */

/* ------------------------------------------------------------------ *
 * 1. Admin bar — the sticky header must sit below it.
 * ------------------------------------------------------------------ */

.admin-bar .header-site.is-sticky,
.admin-bar .site-header-group .header-site[data-sticky-type][style*="position: fixed"] {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .header-site.is-sticky,
	.admin-bar .site-header-group .header-site[data-sticky-type][style*="position: fixed"] {
		top: 46px;
	}
}

/* ------------------------------------------------------------------ *
 * 2. Accessibility — skip link and focus visibility.
 * ------------------------------------------------------------------ */

.skip-to-content-link {
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	padding: 1rem 2rem;
	background: #fff;
	color: var(--color-heading, #1d1d1f);
	text-decoration: none;
}

.skip-to-content-link:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-heading, #1d1d1f);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ *
 * 3. Core block + editor alignment inside .prose / .rte content.
 * ------------------------------------------------------------------ */

.prose .alignleft,
.rte .alignleft {
	float: left;
	margin: 0 1.5rem 1.5rem 0;
}

.prose .alignright,
.rte .alignright {
	float: right;
	margin: 0 0 1.5rem 1.5rem;
}

.prose .aligncenter,
.rte .aligncenter {
	display: block;
	margin-inline: auto;
}

.prose .alignwide,
.rte .alignwide {
	max-width: min(120rem, 100%);
	margin-inline: auto;
}

.prose .alignfull,
.rte .alignfull {
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.prose img,
.rte img,
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

.wp-caption-text,
.wp-block-image figcaption {
	font-size: 1.3rem;
	color: var(--color-grey, #6b6b6b);
	text-align: center;
}

.sticky .card__heading::before {
	content: "★";
	margin-inline-end: 0.5rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.page-links {
	margin-block-start: 2.5rem;
	display: flex;
	gap: 1rem;
	align-items: center;
}

/* ------------------------------------------------------------------ *
 * 4. WooCommerce → component library mapping.
 *
 * Woo emits its own markup for the catalogue ordering select, the
 * add-to-cart form, the product gallery and notices. These rules give
 * that markup the storefront's appearance without touching Woo core.
 * ------------------------------------------------------------------ */

/* 4a. Catalogue ordering ("Sort by:" control). */

.woocommerce-ordering {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.woocommerce-ordering::before {
	content: "Sort by:";
	font-weight: 600;
	color: var(--color-heading, #1d1d1f);
	white-space: nowrap;
}

.woocommerce-ordering select.orderby {
	appearance: none;
	padding: 0.8rem 3rem 0.8rem 1.6rem;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: 30px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none'%3E%3Cpath d='M.2 1.1 4.5 5.4 8.8 1.1' stroke='%231d1d1f' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.4rem center;
	color: var(--color-heading, #1d1d1f);
	font: inherit;
	font-size: 1.4rem;
	cursor: pointer;
}

/* Woo's own result count is replaced by the theme's progress bar. */

.collection-grid-section .woocommerce-result-count {
	display: none;
}

/* 4b. Product card quick-add: Woo's AJAX states. */

.product-item .add_to_cart_button.loading {
	opacity: 0.7;
	pointer-events: none;
}

.product-item .added_to_cart {
	display: none;
}

/* 4c. Single product — quantity + add to cart row. */

.product-detail__information form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch;
	margin: 0;
}

.product-detail__information form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: 40px;
	padding-inline: 1.2rem;
}

.product-detail__information form.cart .quantity input.qty {
	width: 5rem;
	padding: 1.2rem 0;
	border: 0;
	background: transparent;
	text-align: center;
	font: inherit;
	color: var(--color-heading, #1d1d1f);
	-moz-appearance: textfield;
}

.product-detail__information form.cart .quantity input.qty::-webkit-outer-spin-button,
.product-detail__information form.cart .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.product-detail__information form.cart button.single_add_to_cart_button {
	flex: 1 1 20rem;
	min-height: 5.2rem;
	padding-inline: 3rem;
	border: 0;
	border-radius: 40px;
	background: var(--btn-primary-bg-color, #111);
	color: var(--btn-primary-color, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.product-detail__information form.cart button.single_add_to_cart_button:hover {
	opacity: 0.85;
}

.product-detail__information .variations {
	width: 100%;
	margin-block-end: 1.5rem;
	border-collapse: collapse;
}

.product-detail__information .variations td,
.product-detail__information .variations th {
	padding: 0.5rem 0;
	text-align: start;
}

/* 4d. Product gallery inside the theme's media wrapper. */

.product__media-gallery .woocommerce-product-gallery {
	width: 100%;
	margin: 0;
}

.product__media-gallery .woocommerce-product-gallery__image img {
	border-radius: var(--img-rounded, 20px);
}

.product__media-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.product__media-gallery .flex-control-thumbs li {
	width: calc(25% - 0.75rem);
}

.product__media-gallery .flex-control-thumbs img {
	border-radius: 12px;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.25s ease;
}

.product__media-gallery .flex-control-thumbs img.flex-active,
.product__media-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}

/* 4e. Notices, cart, checkout and account pages. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin-block-end: 2.5rem;
	padding: 1.4rem 2rem;
	border-radius: 12px;
	border: 1px solid var(--color-border, #e5e5e5);
	background: rgba(0, 0, 0, 0.02);
	list-style: none;
}

.woocommerce-error {
	border-color: #c03e35;
	color: #c03e35;
}

.woocommerce-section .button,
.woocommerce-section button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 4.8rem;
	padding-inline: 2.6rem;
	border: 0;
	border-radius: 40px;
	background: var(--btn-primary-bg-color, #111);
	color: var(--btn-primary-color, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-section table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-section table th,
.woocommerce-section table td {
	padding: 1.4rem 1rem;
	border-block-end: 1px solid var(--color-border, #e5e5e5);
	text-align: start;
	vertical-align: middle;
}

.woocommerce-section .quantity input.qty {
	width: 7rem;
	padding: 0.9rem;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: 30px;
	text-align: center;
	font: inherit;
}

/* ------------------------------------------------------------------ *
 * 5. Comments.
 * ------------------------------------------------------------------ */

.comments-area .comment-list {
	margin: 0 0 3rem;
	padding: 0;
}

.comments-area .comment-list ol.children {
	margin-inline-start: 2.5rem;
	padding: 0;
	list-style: none;
}

.comments-area .comment-body {
	padding-block: 2rem;
	border-block-end: 1px solid var(--color-border, #e5e5e5);
}

.comments-area .comment-form p {
	margin-block-end: 1.5rem;
}

.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form textarea {
	width: 100%;
	padding: 1.2rem 1.6rem;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: 12px;
	background: transparent;
	font: inherit;
	color: var(--input-color, #1d1d1f);
}

/* ------------------------------------------------------------------ *
 * 6. Missing-media fallback.
 *
 * A handful of images and all slideshow/testimonial videos were absent
 * from the site extraction (see ASSETS-NOTES.md). Placeholder files ship
 * at the correct dimensions so layout is exact; this keeps them visually
 * quiet until the originals are dropped in.
 * ------------------------------------------------------------------ */

img[src*="placeholder-"] {
	background: #f2f0ed;
	object-fit: cover;
}