/* ==========================================================================
   Zara & Kara – supplementary CSS
   Everything visual that Elementor can do natively (colors, fonts, spacing,
   radii, layout, responsive values) is set in Elementor, NOT here.
   This file only covers: the font file, accessibility behaviour, and a few
   WooCommerce/Elementor details that have no native control.
   Sections: 1 Font · 2 Accessibility · 3 Brand wordmark · 4 Product cards
             5 Single product · 6 Utilities
   ========================================================================== */

/* 1. FONT – one variable WOFF2 file covers weights 100–900 (SIL OFL licence in ../fonts). */
@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* 2. ACCESSIBILITY ---------------------------------------------------------- */

/* Visible keyboard focus everywhere (mouse clicks do not show it). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #6b21c8;
	outline-offset: 3px;
	border-radius: 4px;
}
/* On the deep plum music section, use a yellow ring for contrast. */
.zk-on-dark :where(a, button, summary):focus-visible {
	outline-color: #ffd23f;
}

/* Respect "reduce motion" OS settings. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Comfortable touch targets: 44px for menu items and shop buttons,
   32px for link lists (above the 24px WCAG 2.2 AA minimum without making lists sprawl). */
.elementor-nav-menu a,
.woocommerce a.button,
.woocommerce button.button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.elementor-icon-list-item > a {
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}

/* Screen-reader-only text (used by the Zara & Kara Core shortcodes). */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* 3. BRAND WORDMARK – the yellow ampersand in "Zara & Kara".
   Usage in an Elementor Heading: Zara <span class="zk-amp">&amp;</span> Kara  */
.zk-amp {
	color: #f2b705;
}

/* 4. PRODUCT CARDS (Elementor Pro "Products" widget + archives) -------------- */
.elementor-widget-woocommerce-products ul.products li.product img,
.elementor-widget-wc-archive-products ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	background: #f6f1ea;
}
/* Keep cards aligned when titles wrap to two lines. */
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-wc-archive-products ul.products li.product {
	display: flex;
	flex-direction: column;
}
.elementor-widget-woocommerce-products ul.products li.product .button,
.elementor-widget-wc-archive-products ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}

/* 5. SINGLE PRODUCT – variation swatch/selects stay large enough to tap. */
.woocommerce div.product form.cart .variations select {
	min-height: 44px;
	min-width: 12rem;
	font-size: 1rem;
	border: 1px solid #d9cdea;
}

/* 6. UTILITIES -------------------------------------------------------------- */
.zk-song-details {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.85;
}
/* Prevent any accidental horizontal scroll from decorative overflow. */
html, body {
	overflow-x: clip;
}

/* Links inside body text are underlined so they are not identified by colour alone (WCAG 1.4.1).
   Elementor removes underlines inside its widgets by default. */
.elementor-widget-text-editor a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* 7. SONG CARDS ON THE PLUM PANEL ------------------------------------------- */
.zk-on-dark .zk-song-details {
	color: #e3d4f7;
	opacity: 1;
}

/* 8. PORTRAIT CARDS – transparent busts sit on the card's bottom edge, never cropped. */
.elementor-widget-image img[src*="friend-"],
.elementor-widget-image img[src*="hero-zara-kara"] {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* 9. STANDARD PAGES (policies, size guide, cart, checkout, account) ---------- */
.zk-page-content .elementor-widget-theme-post-content {
	max-width: 860px;
}
.zk-page-content :is(h2, h3) {
	margin: 1.6em 0 0.5em;
}
.zk-page-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.zk-page-content :is(th, td) {
	padding: 10px 12px;
	border-bottom: 1px solid #e8e1ef;
	text-align: left;
}
.zk-page-content th {
	background: #f3ecfc;
	color: #1e1033;
}
/* Wider layout for WooCommerce cart / checkout / account blocks. */
.woocommerce-cart .zk-page-content .elementor-widget-theme-post-content,
.woocommerce-checkout .zk-page-content .elementor-widget-theme-post-content,
.woocommerce-account .zk-page-content .elementor-widget-theme-post-content {
	max-width: none;
}
/* Clearly visible placeholders – must all be replaced before launch. */
mark.zk-placeholder {
	background: #fff1b8;
	color: #5a3d00;
	padding: 0 4px;
	border-radius: 4px;
}
.zk-owner-note,
.zk-sample-note {
	margin: 1em 0;
	padding: 12px 16px;
	border-left: 4px solid #f5b800;
	background: #fff9ee;
	font-size: 0.95rem;
}

/* 10. WOOCOMMERCE BLOCKS (Cart & Checkout) – match brand buttons and inputs. */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: #6b21c8;
	color: #fff;
	border-radius: 10px;
	font-weight: 600;
	min-height: 48px;
}
.wc-block-components-button:not(.is-link):hover {
	background: #3a0d5c;
	color: #fff;
}
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-blocks-components-select__select {
	border-radius: 8px !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-product-name {
	color: #1e1033;
}

/* 11. PRODUCT PAGE – gallery thumbnails and variation swatch-like selects. */
.woocommerce div.product div.images .flex-control-thumbs li img {
	border-radius: 10px;
}
.woocommerce div.product div.images img {
	border-radius: 14px;
}
.woocommerce .reset_variations {
	font-size: 0.875rem;
}
.woocommerce div.product .stock.out-of-stock {
	color: #a12c2c;
	font-weight: 600;
}
.woocommerce div.product .stock.in-stock {
	color: #1f7a3d;
	font-weight: 600;
}

/* 12. HEADINGS SET TO <p> (eyebrows, name pills, footer labels).
   Hello Elementor gives every <p> a bottom margin; Elementor spacing comes from container gaps instead. */
p.elementor-heading-title {
	margin: 0;
}

/* 13. BREADCRUMBS (Rank Math shortcode) – readable on light and plum backgrounds. */
.rank-math-breadcrumb p {
	margin: 0;
	font-size: 0.875rem;
}
.rank-math-breadcrumb a {
	color: #6b21c8;
}
.zk-on-dark .rank-math-breadcrumb,
.zk-on-dark .rank-math-breadcrumb .last {
	color: #e3d4f7;
}
.zk-on-dark .rank-math-breadcrumb a {
	color: #ffd23f;
}

/* 14. SHOP DETAILS – the variation table and sort menu without the striped theme-table look. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations :is(tbody, tr, th, td) {
	background: transparent !important;
	border: 0;
}
.woocommerce div.product form.cart table.variations :is(th, td) {
	padding: 6px 0;
	vertical-align: middle;
}
.woocommerce div.product form.cart table.variations th.label {
	padding-right: 16px;
	white-space: nowrap;
}
.woocommerce .woocommerce-ordering select {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid #e8e1ef;
	border-radius: 10px;
	background-color: #fff;
	color: #1e1033;
}

/* 15. WIDE BLOCKS INSIDE ELEMENTOR PAGES – the Cart and Checkout blocks are "alignwide";
   Hello Elementor pulls those outside the content box with negative margins. Keep them inside. */
.zk-page-content :is(.alignwide, .alignfull) {
	margin-left: 0;
	margin-right: 0;
	width: auto;
	max-width: 100%;
}

/* 16. LONG-FORM PAGE TYPOGRAPHY (policies, size guide) – calmer heading scale for reading. */
.zk-page-content .elementor-widget-theme-post-content {
	font-size: 1rem;
	line-height: 1.65;
}
.zk-page-content .elementor-widget-theme-post-content h2 {
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	line-height: 1.25;
}
.zk-page-content .elementor-widget-theme-post-content h3 {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.3;
}

/* 17. RADIO BUTTONS AND CHECKBOXES – the global form-field style (Site Settings → Form Fields) adds
   text-field padding and corners to every input; give tick boxes and radios their normal shape back. */
body[class*="elementor-kit-"] input:is([type="radio"], [type="checkbox"]):not([type="button"]) {
	padding: 0;
	border-radius: 4px;
}
body[class*="elementor-kit-"] input[type="radio"]:not([type="button"]) {
	border-radius: 50%;
}