/**
 * Urban Shisha — Homepage WordPress Integration CSS
 *
 * Safe integration rules only; preserves approved design, spacing, and transparent imagery.
 */

/* Maintain normal cursor across the page body; studio cursor only active for drag zones */
body.has-studio-cursor {
	cursor: auto;
}

.studio-cursor:not(.is-rail) {
	opacity: 0 !important;
	pointer-events: none;
}

/* Preserve original artwork proportions; decorative backdrops stay behind alpha. */
.product-art.has-cutout { background: none; }
.catalog-photo { display: block; width: 100%; height: 100%; mix-blend-mode: normal; }
.product-picture .product-art { width: 100%; height: 100%; }
.builder-stage .catalog-photo { width: 100%; height: 100%; }
.product-grid .product-card[hidden] { display: none; }
.home-empty { width: 100%; padding: 24px; color: var(--muted); }
.builder-controls button:disabled { opacity: .65; cursor: not-allowed; }
.builder-availability { font-size: 13px; line-height: 1.6; margin-top: 12px; }

/* Added feedback state for buttons */
.button.is-added,
.add-product.is-added,
.quick-add.is-added {
	background: var(--accent) !important;
	color: var(--ink) !important;
	transition: background 0.2s ease, color 0.2s ease;
}

/* Accessible content dialog */
.content-dialog {
	border: 2px solid var(--ink);
	border-radius: 28px;
	background: var(--bg);
	color: var(--ink);
	padding: 0;
	max-width: 680px;
	width: 90%;
	box-shadow: 6px 6px 0 var(--ink);
}

.content-dialog::backdrop {
	background: rgb(20 18 31 / 0.55);
	backdrop-filter: blur(2px);
}

.content-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 28px;
	border-bottom: 1px solid var(--line);
}

.content-dialog-header .wordmark {
	font: 700 24px / 1 var(--display);
	color: var(--ink);
}

#content-body {
	padding: 28px 32px 36px;
	max-height: 75vh;
	overflow-y: auto;
}

#content-body .article-content h2 {
	font-size: clamp(28px, 3.5vw, 42px);
	line-height: 1.1;
	margin: 12px 0 16px;
}

#content-body .article-content h3 {
	font-size: 20px;
	margin: 24px 0 8px;
}

#content-body .article-content p {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 16px;
}

#content-body .article-content .button {
	margin-top: 24px;
}

@media (max-width: 600px) {
	#content-body {
		padding: 20px 20px 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-loader {
		display: none !important;
	}
}

/* Native WooCommerce prices keep the approved current/previous-price hierarchy. */
.home .price ins, .home .spotlight-price ins { text-decoration: none; background: transparent; }
.home .price del, .home .spotlight-price del { opacity: .55; font-size: .75em; margin-right: .45em; }

/* Normal rhythmic spacing between Shop by Brand and Shop by Mood */
.brands-section {
	padding-bottom: 28px !important;
}
.moods {
	padding-top: 44px !important;
}
@media (max-width: 600px) {
	.brands-section {
		padding-bottom: 20px !important;
	}
	.moods {
		padding-top: 28px !important;
	}
}

/* Accessory tab bottom category action button */
.accessory-footer {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}
.accessory-view-all {
	min-width: 220px;
	justify-content: center;
}
@media (max-width: 600px) {
	.accessory-footer {
		margin-top: 28px;
	}
	.accessory-view-all {
		width: 100%;
	}
}

/* Semantic anchor cards preserve approved card box styling */
.budget-card,
.editorial-card,
.mood-card {
	text-decoration: none;
	color: inherit;
}


/* Featured choices: the current price and arrow share one aligned footer row. */
.home .spotlight-choice-copy{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:10px 12px;padding-right:0;width:100%}
.home .spotlight-choice-copy>strong{grid-column:1/-1}
.home .spotlight-choice-copy>span:not(.spotlight-choice-arrow){display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:0;font-size:18px;line-height:1.4;min-width:0;font-weight:700}
.home .spotlight-choice-copy ins{background:transparent;text-decoration:none;font-weight:700}
.home .spotlight-choice-copy del{font-size:13px;font-weight:400;opacity:.55}
.home .spotlight-choice-copy .woocommerce-Price-amount{white-space:nowrap}
.home .spotlight-choice-copy>.spotlight-choice-arrow{position:static;display:grid;place-items:center;margin:0;width:24px;height:36px}
@media(max-width:600px){.home .spotlight-choice-copy{gap:8px;grid-template-columns:minmax(0,1fr) 20px}.home .spotlight-choice-copy>span:not(.spotlight-choice-arrow){font-size:16px}.home .spotlight-choice-copy del{font-size:11px}.home .spotlight-choice-copy>.spotlight-choice-arrow{width:20px}.home .spotlight-choice-arrow svg{width:18px;height:18px}}