/*
Theme Name: WickedErgonomy (Dawn)
Theme URI: https://wickedergonomy.com
Author: Nadasi Technologies Kft.
Description: Faithful port of the Shopify Dawn theme (MIT-licensed) to WooCommerce — reuses Dawn's real CSS and JS by emitting Dawn's HTML markup. Classic theme; sticky header, scroll animations, and responsive breakpoints come from Dawn's own front-end. Ported: header, home, footer, product page, shop archive, cart drawer, predictive search.
Version: 0.2.3
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wickedergonomy-dawn
*/

/* ============================================================
   Bridge overrides — small WooCommerce/theme tweaks on top of Dawn.
   Dawn's own CSS (assets/base.css etc.) does the heavy lifting.
   ============================================================ */

/* Hero now uses Dawn's own banner classes verbatim (front-page.php) — no overrides needed. */

/* WooCommerce price markup rendered inside Dawn's .price wrapper */
.card-information .price ins { text-decoration: none; }
.card-information .price del { opacity: .5; }
.card-information .price .amount { font-weight: 400; }

/* Keep product-card images square/cover within Dawn's ratio box */
.product-card-wrapper .card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Product page: pointer-dependent column scrolling (desktop).
   Each sticky column becomes its own scroll container, so the wheel
   scrolls whichever column the pointer is over (gallery → reveals
   thumbnails; description → reads on). At a column's end, scrolling
   chains to the page as normal.
   ============================================================ */
@media screen and (min-width: 990px) {
	.product--thumbnail .product__media-wrapper .product__column-sticky,
	.product--thumbnail .product__info-wrapper .product__column-sticky {
		position: sticky;
		top: calc(var(--header-height, 70px) + 2rem);
		max-height: calc(100vh - var(--header-height, 70px) - 3rem);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(18, 18, 18, 0.25) transparent;
		padding-right: 0.6rem;
	}
}

/* ============================================================
   18+ entry gate — full-screen overlay, first visit only.
   Server-rendered visible (fail-closed); JS clears it when the
   we_age_ok cookie is present. Scroll locks while it is shown.
   ============================================================ */
.age-gate {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(18, 18, 18, 0.94);
}
.age-gate--cleared { display: none; }
body:has(.age-gate:not(.age-gate--cleared)) { overflow: hidden; }
.age-gate__card {
	background: rgb(255, 255, 255);
	color: rgb(18, 18, 18);
	max-width: 44rem;
	width: 100%;
	padding: 4rem 3.5rem;
	text-align: center;
}
.age-gate__brand {
	font-size: 1.2rem;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
	margin: 0 0 1.6rem;
	color: rgba(18, 18, 18, 0.75);
}
.age-gate__heading { margin: 0 0 1.5rem; }
.age-gate__text {
	font-size: 1.5rem;
	line-height: 1.6;
	color: rgba(18, 18, 18, 0.75);
	margin: 0 0 2.5rem;
}
.age-gate__buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 2rem;
}
@media screen and (min-width: 750px) {
	.age-gate__buttons { flex-direction: row; justify-content: center; }
}
.age-gate__links a {
	color: rgba(18, 18, 18, 0.6);
	text-underline-offset: 0.3rem;
}

/* ============================================================
   Price transparency block: inventory dot, VAT content, shipping
   estimate — Dawn caption styling, tight vertical rhythm.
   ============================================================ */
.product__inventory { margin: 0 0 0.6rem; }
.product__inventory .svg-wrapper svg { width: 15px; height: 15px; display: block; }
.product__tax.caption { margin-bottom: 0.4rem; }
.product__shipping-estimate {
	color: rgba(18, 18, 18, 0.7);
	margin-bottom: 1rem;
}
.product__shipping-estimate a {
	color: rgba(18, 18, 18, 0.75);
	text-underline-offset: 0.3rem;
}

/* ============================================================
   Purchase acknowledgements (guideline checkboxes) — pronounced,
   Dawn-coherent block. The consent gate (Milestone 4) extends this.
   ============================================================ */
.product-form__acknowledgements {
	border: 0.1rem solid rgba(18, 18, 18, 0.2);
	padding: 1.8rem 2rem;
	margin: 2.5rem 0 0.5rem;
}
.product-form__acknowledgements-heading {
	font-size: 1.3rem;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
	color: rgb(18, 18, 18);
	margin: 0 0 0.8rem;
}
.product-form__acknowledgements-note {
	font-size: 1.4rem;
	line-height: 1.5;
	color: rgba(18, 18, 18, 0.75);
	margin: 0 0 1.4rem;
}
/* Reassurance above the measurement fields — friendly, not legal. */
.product-form__measure-note {
	font-size: 1.3rem;
	line-height: 1.5;
	color: rgba(18, 18, 18, 0.65);
	margin: 1.6rem 0 0.6rem;
}
.product-form__measure-note a {
	color: rgba(18, 18, 18, 0.85);
	text-underline-offset: 0.3rem;
}
.product-form__acknowledgements .field.custom-checkbox {
	display: flex;
	align-items: center;
	margin: 0 0 1rem;
}
.product-form__acknowledgements .field.custom-checkbox:last-child { margin-bottom: 0; }
.product-form__acknowledgements input[type='checkbox'] {
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
	accent-color: rgb(18, 18, 18);
	cursor: pointer;
}
.product-form__acknowledgements .form__label {
	font-size: 1.5rem;
	margin-left: 1rem !important;
	cursor: pointer;
}
.product-form__acknowledgements .form__label a {
	color: rgb(18, 18, 18);
	text-underline-offset: 0.3rem;
}

/* ============================================================
   Product gallery — overlay arrows, zoom cursor, lightbox
   ============================================================ */

/* Anchor for the injected overlay arrows. */
#GalleryViewer-main { position: relative; }

/* Dawn's own main-slider buttons only scroll horizontally — useless on the
   desktop thumbnail layout (non-active images are display:none). We navigate via
   the thumbnails instead (see wedawn-product-gallery.js), so hide Dawn's set. */
#GalleryViewer-main > slider-component > .slider-buttons,
#GalleryViewer-main .slider-buttons { display: none; }

/* Injected overlay arrows */
.wedawn-gallery-arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 0.1rem solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 0.2rem 0.9rem rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: rgb(18, 18, 18);
	opacity: 0.72;
	transition: opacity 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.wedawn-gallery-arrow:hover,
.wedawn-gallery-arrow:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 0.3rem 1.3rem rgba(0, 0, 0, 0.24);
	outline: none;
}
.wedawn-gallery-arrow--prev { left: 1.2rem; }
.wedawn-gallery-arrow--next { right: 1.2rem; }
.wedawn-gallery-arrow svg { width: 2rem; height: 2rem; display: block; }

/* Signal the image is clickable to enlarge. */
#GalleryViewer-main .product__media img { cursor: zoom-in; }

/* On narrow screens the image already scroll-snaps + swipes; arrows crowd it. */
@media screen and (max-width: 749px) {
	.wedawn-gallery-arrow { display: none; }
}

/* ---- Lightbox ---- */
.wedawn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vmin;
	background: rgba(10, 10, 10, 0.92);
	cursor: zoom-out;
}
.wedawn-lightbox[hidden] { display: none; }
.wedawn-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: default;
	box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.5);
}
.wedawn-lightbox__close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.18s ease;
}
.wedawn-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.wedawn-lightbox__close svg { width: 2.2rem; height: 2.2rem; }

/* ============================================================
   Cart drawer bridge (Phase 5)
   ============================================================ */

/* Drawer starts hidden until cart-drawer.js adds .animate/.active */
cart-drawer.drawer:not(.active) { visibility: hidden; }

/* WooCommerce's formatted cart item data (measurements, fit, acknowledgements)
   comes as dl.variation — restyle to Dawn's quiet option list. */
.cart-drawer dl.variation {
	margin: 0.6rem 0 0;
	font-size: 1.2rem;
	line-height: 1.4;
	opacity: 0.7;
}
.cart-drawer dl.variation dt,
.cart-drawer dl.variation dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}
.cart-drawer dl.variation dd p { display: inline; margin: 0; }
.cart-drawer dl.variation dd::after { content: ''; display: block; }

/* Line price under the item name */
.cart-drawer .cart-item__details .product-option { margin-top: 0.4rem; }

/* Remove button sits beside the quantity input */
.cart-drawer .cart-item__quantity-wrapper { display: flex; align-items: center; gap: 0.6rem; }
.cart-drawer cart-remove-button .button--tertiary {
	min-width: 3.6rem;
	min-height: 3.6rem;
	padding: 0;
	background: transparent;
	border: none;
	color: rgb(var(--color-foreground));
	cursor: pointer;
	box-shadow: none;
}
.cart-drawer cart-remove-button .svg-wrapper { width: 1.4rem; height: 1.4rem; display: block; margin: 0 auto; }

/* Hide the per-line error row until cart.js fills it */
.cart-drawer .cart-item__error { display: flex; align-items: center; gap: 0.4rem; }
.cart-drawer .cart-item__error:has(.cart-item__error-text:empty) { display: none; }

/* WooCommerce's `.woocommerce a.button` (light grey, grey text, bold, 3px radius,
   its own padding) outranks Dawn's `.button`, and the body carries `.woocommerce`
   on every shop and product page — so the drawer's Check out and Continue
   shopping links came out grey there and correct everywhere else. One element
   selector more than WooCommerce's rule, restoring Dawn's values. */
cart-drawer .cart-drawer a.button {
	display: inline-flex;
	padding: 0 3rem;
	font-size: 1.5rem;
	font-weight: inherit;
	letter-spacing: 0.1rem;
	line-height: calc(1 + 0.2 / var(--font-body-scale));
	border-radius: var(--buttons-radius-outset);
	color: rgb(var(--color-button-text));
	background-color: rgba(var(--color-button), var(--alpha-button-background));
}
/* Full width, as in Dawn — there it is a <button> caught by `.cart__ctas button`;
   ours is a link, which that rule misses. */
cart-drawer .cart-drawer a.cart__checkout-button { width: 100%; }

.cart-drawer__view-cart { margin: 1rem 0 0; }
.cart-drawer__view-cart .link { font-size: 1.3rem; }

/* AJAX add-to-cart error notices on the product page */
.product__notices .woocommerce-error {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1rem 1.5rem;
	border: 0.1rem solid rgb(178, 48, 48);
	color: rgb(178, 48, 48);
	font-size: 1.4rem;
}
.product__notices .woocommerce-error li { margin: 0.2rem 0; }

/* Buy-box footer: the route to the About page. Separated by a hairline so it
   reads as a footnote to the whole buy box rather than as more form copy. */
.product__workshop-note {
	margin: 2rem 0 0;
	padding-top: 1.6rem;
	border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
	line-height: 1.6;
}

/* Export notice at cart/checkout. Bordered and full-width rather than another
   quiet caption: it is the one line standing between a customer and an unexpected
   bill at their own front door, and a surprise there is a refund request. */
tr.we-export-note td {
	padding: 1.4rem 1.6rem;
	border: 0.1rem solid rgba(var(--color-foreground), 0.35);
	background: rgba(var(--color-foreground), 0.04);
	font-size: 1.3rem;
	line-height: 1.6;
}
/* Product page: separated from the shipping estimate above it. */
.product__export-note {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 0.1rem solid rgba(var(--color-foreground), 0.12);
	line-height: 1.6;
}

/* Checkout payment methods. WooCommerce's default styling (lavender panel,
   rounded corners, speech-bubble arrow on the open method) is the only part of
   checkout that never got the theme's look, and with the Stripe card form inside
   it the result was three nested frames. Flat, square and neutral here, like the
   acknowledgements box below it. The card fields themselves live in Stripe's
   iframe and are styled from inc/stripe-checkout.php. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 0 1.6rem;
	border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.12);
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0.6rem 0;
}
.woocommerce-checkout #payment div.payment_box {
	margin: 1rem 0 0.4rem;
	padding: 1.6rem;
	border-radius: 0;
	background: rgba(var(--color-foreground), 0.03);
	border: 0.1rem solid rgba(var(--color-foreground), 0.12);
	color: rgb(var(--color-foreground));
	font-size: 1.4rem;
}
.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}
.woocommerce-checkout #payment div.payment_box fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* WooCommerce buttons in the theme's colours, site-wide. Left alone they show
   three different house styles: WooCommerce purple on Place order, WooCommerce
   light grey on Apply coupon, and on the block cart WordPress's dark grey
   `.wp-element-button` background under the theme's near-black link colour —
   dark text on a dark button, barely legible. The empty cart's "New in store"
   grid uses WordPress's own `.wp-block-button__link`, covered here too. Colours, weight and corners only;
   WooCommerce keeps its own sizing.
   `:root` lifts each selector one class above WooCommerce's own
   (`.woocommerce a.button` / `.woocommerce button.button.alt`), and still matches
   when `.woocommerce` is on <body> itself, as it is on shop and product pages. */
:root .woocommerce a.button,
:root .woocommerce button.button,
:root .woocommerce input.button,
:root .woocommerce a.button.alt,
:root .woocommerce button.button.alt,
:root .woocommerce input.button.alt,
:root a.wc-block-components-button:not(.is-link),
:root button.wc-block-components-button:not(.is-link),
:root .wp-block-button__link,
:root .wp-element-button:not(.wc-block-components-button) {
	background-color: rgb(var(--color-button));
	color: rgb(var(--color-button-text));
	border-radius: var(--buttons-radius);
	font-weight: 500;
	text-decoration: none;
}
:root .woocommerce a.button:hover,
:root .woocommerce button.button:hover,
:root .woocommerce input.button:hover,
:root .woocommerce a.button.alt:hover,
:root .woocommerce button.button.alt:hover,
:root .woocommerce input.button.alt:hover,
:root a.wc-block-components-button:not(.is-link):hover,
:root button.wc-block-components-button:not(.is-link):hover,
:root .wp-block-button__link:hover,
:root .wp-element-button:not(.wc-block-components-button):hover {
	background-color: rgba(var(--color-button), 0.82);
	color: rgb(var(--color-button-text));
}
:root .woocommerce button.button.alt:disabled,
:root .woocommerce button.button.alt.disabled,
:root .woocommerce button.button:disabled {
	background-color: rgb(var(--color-button));
	color: rgb(var(--color-button-text));
	opacity: 0.5;
}

/* Footer payment icons. Dawn centres .list-payment (and right-aligns it from
   750px) because in Dawn it sits alone at the foot of the page; here it heads a
   footer column, so it lines up with the column's text instead. */
.wedawn-footer-payment,
.footer .wedawn-footer-payment {
	justify-content: flex-start;
	margin: 0 -0.4rem 0.4rem;
	padding-top: 0.4rem;
}
.wedawn-footer-payment .list-payment__item { padding: 0.4rem; }
.wedawn-footer-payment .icon { width: 3.8rem; height: 2.4rem; }