/* =========================================================================
   DecantQ storefront-wide styles: notices anywhere on the page, the store notice
   banner, plain WordPress pages, and the related-products block.
   ====================================================================== */

/* Tokens available everywhere on the storefront (names are namespaced, so nothing else is affected). */
body.dq-storefront {
	--dq-ink: #2b211b;
	--dq-muted: #6e6258;
	--dq-line: #e6e0da;
	--dq-panel: #f3f1ee;
	--dq-amber: #93461a;
	--dq-amber-hover: #7c3a15;
	--dq-amber-tint: #f6ece4;
	--dq-gold: #c89c4c;
	--dq-radius: 14px;
	--dq-display: var(--e-global-typography-primary-font-family, Georgia), serif;
}

/* =========================================================================
   WooCommerce notices — wherever they are printed (theme, Elementor Pro, shortcodes).
   Higher specificity than WooCommerce's own rules and Elementor's notice styling.
   ====================================================================== */

body.dq-storefront.dq-storefront .woocommerce-notices-wrapper:empty {
	display: none;
}
body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	box-sizing: border-box;
	max-width: calc(1240px - 2 * clamp(16px, 3vw, 32px)); /* same width as the page content */
	margin: 16px auto;
	padding: 14px 18px 14px 50px;
	border: 0;
	border-radius: var(--dq-radius);
	background: var(--dq-panel);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dq-ink);
	list-style: none;
	outline: none;
}
/* Notices printed full-width at the top of a page (Elementor) line up with the content column. */
body.dq-storefront.dq-storefront :is(.e-woocommerce-notices-wrapper, .woocommerce-notices-wrapper) > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	width: calc(100% - 2 * clamp(16px, 3vw, 32px));
}
body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	position: absolute;
	top: 50%;
	left: 18px;
	margin: 0;
	transform: translateY(-50%);
	color: var(--dq-amber);
}
body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
	content: none;
}
body.dq-storefront.dq-storefront .woocommerce-error {
	background: #fbefec;
}
body.dq-storefront.dq-storefront .woocommerce-error::before {
	color: #a4321d;
}
body.dq-storefront.dq-storefront ul.woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
body.dq-storefront.dq-storefront .woocommerce-error li {
	margin: 0;
	padding: 0;
}
body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(a, strong, span, li) {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}
/* The "View cart" / "Continue shopping" button inside a notice: a quiet text link, not a boxed button. */
body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(.button, a.button, .wc-forward, .restore-item) {
	order: 2;
	float: none;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dq-amber);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(.button, a.button, .wc-forward):hover {
	background: none;
	color: var(--dq-amber-hover);
}
body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info) a:not(.button) {
	color: var(--dq-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 599px) {
	body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
		margin: 12px auto;
		padding: 12px 14px 12px 44px;
		font-size: 14px;
	}
	body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
		left: 15px;
	}
	body.dq-storefront.dq-storefront :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(.button, a.button, .wc-forward) {
		flex-basis: 100%;
		margin: 0;
	}
}

/* =========================================================================
   Store notice banner (WooCommerce → Customize → Store notice)
   ====================================================================== */

body.dq-storefront.dq-storefront .woocommerce-store-notice,
body.dq-storefront.dq-storefront p.demo_store {
	position: relative !important; /* WooCommerce fixes it over the page; keep it in the flow above the header */
	top: auto !important;
	bottom: auto !important;
	z-index: auto;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 48px;
	background: var(--dq-amber);
	box-shadow: none;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	text-align: center;
}
body.dq-storefront.dq-storefront .woocommerce-store-notice .woocommerce-store-notice__dismiss-link {
	font-family: inherit;
	font-size: 13px;
	float: none;
	margin-inline-start: 12px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
   Plain pages: terms, privacy, shipping, returns, membership…
   ====================================================================== */

body.dq-prose-page #content.site-main,
body.dq-prose-page .site-main {
	box-sizing: border-box;
	max-width: 820px;
	margin-inline: auto;
	padding: clamp(28px, 5vw, 64px) clamp(16px, 3vw, 32px) clamp(56px, 8vw, 96px);
	color: var(--dq-ink);
}
body.dq-prose-page .site-main :where(h1, h2, h3, h4, p, a, li, td, th, blockquote, figcaption, strong, em, span) {
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
}
body.dq-prose-page.dq-prose-page .page-header {
	margin: 0 0 clamp(24px, 3vw, 36px);
	padding: 0 0 clamp(20px, 3vw, 28px);
	border-bottom: 1px solid var(--dq-line);
}
body.dq-prose-page.dq-prose-page .page-header .entry-title {
	margin: 0;
	font-family: var(--dq-display);
	font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem);
	font-weight: 500;
	line-height: 1.06;
	color: var(--dq-ink);
	text-wrap: balance;
}
body.dq-prose-page.dq-prose-page .page-content {
	font-size: 16.5px;
	line-height: 1.75;
	color: #4a3d34;
}
body.dq-prose-page.dq-prose-page .page-content :is(h2, h3, h4) {
	margin: 1.9em 0 0.55em;
	font-family: var(--dq-display);
	font-weight: 500;
	line-height: 1.2;
	color: var(--dq-ink);
}
body.dq-prose-page.dq-prose-page .page-content h2 {
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
}
body.dq-prose-page.dq-prose-page .page-content h3 {
	font-size: 1.3rem;
}
body.dq-prose-page.dq-prose-page .page-content h4 {
	font-size: 1.1rem;
}
body.dq-prose-page.dq-prose-page .page-content > :first-child {
	margin-top: 0;
}
body.dq-prose-page.dq-prose-page .page-content p {
	margin: 0 0 1.1em;
}
body.dq-prose-page.dq-prose-page .page-content a {
	color: var(--dq-amber);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.dq-prose-page.dq-prose-page .page-content a:hover {
	color: var(--dq-amber-hover);
}
body.dq-prose-page.dq-prose-page .page-content :is(ul, ol) {
	margin: 0 0 1.2em;
	padding-inline-start: 1.3em;
}
body.dq-prose-page.dq-prose-page .page-content li {
	margin: 0 0 0.4em;
}
body.dq-prose-page.dq-prose-page .page-content li::marker {
	color: var(--dq-amber);
}
body.dq-prose-page.dq-prose-page .page-content blockquote {
	margin: 1.5em 0;
	padding: 18px 22px;
	border: 0;
	border-inline-start: 3px solid var(--dq-gold);
	border-radius: 0 12px 12px 0;
	background: var(--dq-panel);
	font-style: normal;
	color: var(--dq-ink);
}
body.dq-prose-page.dq-prose-page .page-content table {
	width: 100%;
	margin: 1.5em 0;
	border-collapse: collapse;
	font-size: 15px;
}
body.dq-prose-page.dq-prose-page .page-content :is(th, td) {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--dq-line);
	text-align: start;
}
body.dq-prose-page.dq-prose-page .page-content th {
	font-weight: 600;
	color: var(--dq-ink);
}
body.dq-prose-page.dq-prose-page .page-content hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--dq-line);
}
body.dq-prose-page.dq-prose-page .page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

/* =========================================================================
   Product page: "You may also like" and "Related products"
   ====================================================================== */

.dq-sp__more :is(.up-sells, .related) {
	margin: clamp(48px, 7vw, 88px) 0 0;
}
.dq-sp__more.dq-sp__more :is(.up-sells, .related) > h2 {
	margin: 0 0 clamp(20px, 3vw, 30px);
	font-family: var(--dq-display);
	font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.4rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dq-ink);
}
.dq-sp__more ul.products.dq-grid::before,
.dq-sp__more ul.products.dq-grid::after {
	content: none;
	display: none;
}
.dq-sp__more ul.products.dq-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 32px) clamp(14px, 2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dq-sp__more ul.products.dq-grid > li {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}
@media (max-width: 859px) {
	.dq-sp__more ul.products.dq-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Skip link: only visible on keyboard focus, but it should still look like ours. */
body.dq-storefront.dq-storefront .dq-skip {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* Simple checkout fields: the country row stays hidden on "My account → Addresses" too */
body.dq-storefront .woocommerce-address-fields .form-row.dq-is-hidden {
	display: none !important;
}

/* =========================================================================
   Hello Elementor boxes .site-main on every page not built with Elementor: 500px (576+), 600px (768+),
   800px (992+), 1140px (1200+), plus 10px side padding on phones. On a tablet the product page, cart,
   checkout and Nafha were squeezed into 600–800px. These pages set their own width and gutters,
   so the theme's box is released on them (the home, shop, About/Contact, account and 404 pages already
   do this in their own stylesheets).
   ====================================================================== */
body.dq-storefront.single-product #content.site-main,
body.dq-storefront.single-product .site-main,
body.dq-storefront.woocommerce-cart #content.site-main,
body.dq-storefront.woocommerce-cart .site-main,
body.dq-storefront.woocommerce-checkout #content.site-main,
body.dq-storefront.woocommerce-checkout .site-main,
body.dq-boxes-page #content.site-main,
body.dq-boxes-page .site-main {
	max-width: none;
	width: 100%;
	padding-inline-start: 0;
	padding-inline-end: 0;
}

/* =========================================================================
   v4.3 audit: comfort on touch screens and readable small text, storefront-wide.
   Touch targets reach 44px (Apple / WCAG guidance) without changing how things look:
   padding grows the tappable area, not the text.
   ====================================================================== */

@media (pointer: coarse), (max-width: 959px) {
	/* stand-alone text links */
	body.dq-storefront :is(
		.dq-tile__link, .dq-cart__continue, .dq-coupon__toggle, .dq-co-coupon__toggle, .dq-co__back, .showlogin,
		.shipping-calculator-button, .woocommerce-cart-form a.remove, .dq-link-arrow, .dq-sp__more-btn,
		.woocommerce-review-link, .dq-sp__brand, .woocommerce-message .button, .woocommerce-info .button,
		.woocommerce-LostPassword a, .lost_password a, .dq-contact2__links a, .dq-contact2__copy
	) {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	/* chips and small buttons */
	body.dq-storefront :is(.dq-sp__char, .dq-card__chip, .dq-scent, .dq-slider__toggle) {
		min-height: 40px;
	}
	body.dq-storefront .dq-slider__toggle {
		min-width: 40px;
	}
	/* slider dots: a bigger invisible tap area around the same small dot */
	body.dq-storefront .dq-slider__dot {
		position: relative;
	}
	body.dq-storefront .dq-slider__dot::after {
		content: "";
		position: absolute;
		inset: -17px -4px;
	}
}

/* small text never below 12px */
body.dq-storefront :is(.dq-card__badge, .dq-showcase__count, .dq-result__brand, .dq-chat__hint, .dq-stage__tick, .dq-gal__thumb.is-stage-thumb span) {
	font-size: max(12px, 1em);
}
body.dq-storefront.dq-storefront .dq-size__tag {
	font-size: 12px;
}
@media (pointer: coarse), (max-width: 959px) {
	/* the button inside "added to cart" notices, the cart's remove link, the house names on About */
	body.dq-storefront.dq-storefront .woocommerce-message a.button,
	body.dq-storefront.dq-storefront .woocommerce-info a.button,
	body.dq-storefront.dq-storefront a.dq-item__remove,
	body.dq-storefront.dq-storefront .dq-about2__houses a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* =========================================================================
   v4.9.2: the discount field is always in view (cart summary and checkout summary): a light card with a tag icon,
   the field and the Apply button on one row. The heading no longer folds it away.
   ====================================================================== */
body.dq-storefront :is(.dq-coupon, .dq-co-coupon).is-open-always {
	margin: 16px 0;
	padding: 14px;
	border: 1px solid var(--dq-line, #e6e0da);
	border-radius: 16px;
	background: #fbf8f4;
}
body.dq-storefront :is(.dq-coupon, .dq-co-coupon).is-open-always > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: var(--dq-ink, #2b211b);
	cursor: default;
	pointer-events: none;
}
body.dq-storefront :is(.dq-coupon, .dq-co-coupon).is-open-always > summary::-webkit-details-marker,
body.dq-storefront :is(.dq-coupon, .dq-co-coupon).is-open-always > summary::marker {
	display: none;
	content: "";
}
body.dq-storefront :is(.dq-coupon, .dq-co-coupon).is-open-always > summary::after,
body.dq-storefront :is(.dq-coupon, .dq-co-coupon).is-open-always > summary::before {
	content: none;
	display: none;
}
body.dq-storefront .dq-coupon-tag {
	flex: none;
	color: var(--dq-amber, #93461a);
}
body.dq-storefront.dq-storefront :is(.dq-coupon__row, .dq-co-coupon__row) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}
body.dq-storefront.dq-storefront :is(.dq-coupon__input, .dq-co-coupon__input) {
	flex: 1 1 160px;
	min-width: 0;
	min-height: 46px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--dq-line, #e6e0da);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 16px; /* no zoom on iPhone */
	letter-spacing: normal;
	text-transform: none;
	color: var(--dq-ink, #2b211b);
	box-shadow: none;
}
body.dq-storefront.dq-storefront :is(.dq-coupon__input, .dq-co-coupon__input):focus {
	border-color: var(--dq-amber, #93461a);
	outline: 2px solid rgba(147, 70, 26, 0.18);
	outline-offset: 0;
}
body.dq-storefront.dq-storefront :is(.dq-coupon__apply, .dq-co-coupon__apply) {
	flex: none;
	min-height: 46px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 12px;
	background: var(--dq-ink, #2b211b);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	cursor: pointer;
}
body.dq-storefront.dq-storefront :is(.dq-coupon__apply, .dq-co-coupon__apply):hover {
	background: var(--dq-amber, #93461a);
}
body.dq-storefront .dq-co-coupon__error {
	flex-basis: 100%;
	margin: 2px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #a1301f;
}

/* The one thing WooCommerce's stylesheet still drew on our pages: the password strength meter (account sign-up). */
.woocommerce-password-strength {
	margin-top: 8px;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
	background: #fbc5a9;
}
.woocommerce-password-strength.short { background: #f1adad; }
.woocommerce-password-strength.good { background: #ffe399; }
.woocommerce-password-strength.strong { background: #c1e1b9; }
.woocommerce-password-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--dq-muted, #6e6258); }
/* Spacing WooCommerce's stylesheet used to give (kept identical after it stopped loading). */
body.dq-storefront div.product form.cart {
	margin-bottom: 2em;
}

/* v5.0.21: the "show password" eye is a 28×28 px touch target (was 22 px; WCAG 2.5.8 asks for 24). */
body.dq-storefront .show-password-input {
	width: 28px;
	height: 28px;
	min-width: 28px;
	min-height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}