/*
Theme Name: iPleyMusic Entertainment
Theme URI: https://ipleymusic.com
Author: iPleyMusic / KALITE GROUP LLC
Description: Dark blue-black & teal WordPress theme for iPleyMusic Entertainment - homepage, artists, releases, upcoming events, contact and a WooCommerce-powered store.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: ipleymusic
*/

/* ==========================================================================
   1. CENTRALIZED COLOR SYSTEM (single source of truth for the whole site)
   ========================================================================== */
:root {
  /* Backgrounds — very dark blue-black (#080D10 / #0B1114) */
  --background: 203 33% 5%;
  --surface: 203 30% 6%;
  --surface-elevated: 203 26% 8%;
  --secondary: 203 24% 10%;

  /* Text */
  --foreground: 60 6% 95%;        /* #F2F2F0 */
  --muted-foreground: 203 8% 68%; /* #A8B0B5 */

  /* Primary brand — teal/blue #12A8D8 */
  --primary: 195 72% 46%;
  --primary-light: 195 76% 60%;
  --primary-dark: 195 78% 30%;
  --primary-foreground: 203 33% 5%;

  /* Secondary accent — gold #FFC21A */
  --gold: 44 100% 55%;
  --gold-light: 44 100% 66%;
  --gold-dark: 40 96% 45%;
  --gold-foreground: 203 33% 5%;

  --border: 203 20% 16%;
  --ring: 195 72% 46%;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html,
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

body {
  font-family: var(--font-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: hsl(var(--foreground));
}

a { color: hsl(var(--primary-light)); }
a:hover { color: hsl(var(--primary)); }

::selection { background: hsl(var(--primary) / 0.35); color: hsl(var(--foreground)); }

input, textarea, select, button {
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  background-color: hsl(var(--surface-elevated));
  border-color: hsl(var(--border));
}
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: hsl(var(--primary) / 0.6);
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

/* ==========================================================================
   3. BRAND UTILITIES
   ========================================================================== */
.text-gradient-gold { /* brand teal gradient (logo / headings) */
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-amber { /* selective gold highlight (e.g. "MERCH") */
  background: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-light)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-gold { /* primary CTA buttons — gold */
  background: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-dark)));
  color: hsl(var(--gold-foreground));
}
.bg-gradient-gold:hover { color: hsl(var(--gold-foreground)); }

.bg-gradient-teal {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-dark)));
  color: hsl(var(--primary-foreground));
}

.bg-gradient-dark {
  background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--surface)) 100%);
}

.glow-gold { box-shadow: 0 0 30px -12px hsl(var(--primary) / 0.45); }
.border-gold { border: 1px solid hsl(var(--primary) / 0.3); }
.text-primary-light { color: hsl(var(--primary-light)); }
.text-gold { color: hsl(var(--gold)); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ==========================================================================
   4. RESPONSIVE CONSISTENCY — colors never change with viewport
   ========================================================================== */
@media screen and (max-width: 1024px) {
  html, body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
}
@media screen and (max-width: 640px) {
  html, body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
}
@media (prefers-color-scheme: light) {
  html, body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
}
/* Stop mobile browsers from re-tinting text */
body, p, li, span, td, th { -webkit-text-fill-color: inherit; }
.text-gradient-gold, .text-gradient-amber { -webkit-text-fill-color: transparent; }

/* ==========================================================================
   5. WOOCOMMERCE OVERRIDES — force the store into the site palette
   ========================================================================== */
.woocommerce,
.woocommerce-page,
.woocommerce-page #content,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce div.product,
.woocommerce ul.products li.product,
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart table.cart,
.woocommerce-checkout #order_review,
.woocommerce .cart_totals,
.select2-container .select2-selection,
.select2-dropdown {
  background-color: transparent;
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  background-color: hsl(var(--surface-elevated));
  border-top: 3px solid hsl(var(--primary));
  color: hsl(var(--foreground));
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: hsl(var(--primary)); }

.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-cart table.cart a,
.woocommerce-breadcrumb { color: hsl(var(--foreground)); }

.woocommerce-breadcrumb a,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce .star-rating span { color: hsl(var(--primary-light)); }

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del { color: hsl(var(--muted-foreground)); }

.woocommerce span.onsale {
  background: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-dark)));
  color: hsl(var(--gold-foreground));
  border-radius: 0.25rem;
}

/* Buttons: primary CTA = gold, secondary = teal outline */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .widget_shopping_cart a.button,
.wc-block-components-button {
  background: linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-dark)));
  color: hsl(var(--gold-foreground));
  border: none;
  border-radius: 0.25rem;
  font-family: var(--font-body);
  font-weight: 600;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
  background: linear-gradient(135deg, hsl(var(--gold-light)), hsl(var(--gold)));
  color: hsl(var(--gold-foreground));
  opacity: 0.95;
}
.woocommerce a.button.wc-backward,
.woocommerce a.added_to_cart {
  background: transparent;
  border: 1px solid hsl(var(--primary) / 0.4);
  color: hsl(var(--primary-light));
}

/* Tabs, reviews, forms */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid hsl(var(--border)); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: hsl(var(--border)); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: hsl(var(--surface-elevated));
  border-color: hsl(var(--border));
  border-radius: 0.25rem 0.25rem 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: hsl(var(--muted-foreground)); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: hsl(var(--background)); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: hsl(var(--primary-light)); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  background-color: hsl(var(--surface-elevated));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce-checkout #order_review .shop_table {
  border-color: hsl(var(--border));
}
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th { color: hsl(var(--foreground)); }
.woocommerce table.shop_table td { border-top-color: hsl(var(--border)); }

.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.form-row {
  background: hsl(var(--surface));
  border-color: hsl(var(--border));
}
.woocommerce-checkout #payment div.payment_box {
  background: hsl(var(--surface-elevated));
  color: hsl(var(--muted-foreground));
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: hsl(var(--surface-elevated)); }

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li { border-color: hsl(var(--border)); }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { color: hsl(var(--muted-foreground)); background: transparent; }
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary-light));
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background-color: hsl(var(--primary)); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background-color: hsl(var(--secondary)); }

.woocommerce-store-notice,
p.demo_store {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* ---------------------------------------------------------------
   Product grid — one complete card per loop item, no page list
   --------------------------------------------------------------- */

.ipm-woo ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	clear: both;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product,
.ipm-woo ul.products li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	clear: none;
	background: transparent;
	text-align: left;
}

@media (min-width: 640px) {
	.ipm-woo ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ipm-woo ul.products, .woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 1200px;
		margin-inline: auto;
	}
}

/* Never let WooCommerce core column classes override the grid */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none; }

/* Card shell */
.woocommerce ul.products li.product.ipm-product-card,
.ipm-woo ul.products li.product.ipm-product-card {
	background: hsl(var(--surface, var(--secondary)));
	border: 1px solid hsl(var(--border));
	border-radius: 4px;
	padding: .75rem .75rem 1rem;
	overflow: hidden;
	transition: border-color .3s ease, transform .3s ease;
}
.ipm-product-card:hover { border-color: hsl(var(--primary) / .6); transform: translateY(-3px); }

.ipm-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 2px;
	background: hsl(var(--secondary));
	margin-bottom: 1rem;
	max-width: 100%;
}

.ipm-card-media a, .ipm-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	margin: 0;
}

.ipm-product-card:hover .ipm-card-media img { transform: scale(1.05); }
.ipm-card-media img { transition: transform .5s ease; }

@media (max-width: 639px) {
	.ipm-woo ul.products, .woocommerce ul.products { gap: 1.5rem; }
	.ipm-card-media { aspect-ratio: 4 / 3; }
	.ipm-card-media img { object-fit: contain; background: hsl(var(--secondary)); }
}

.ipm-badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	font-family: var(--font-body, inherit);
	font-size: .7rem;
	font-weight: 600;
	padding: .25rem .75rem;
	border-radius: 2px;
}
.ipm-badge-sale { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.ipm-badge-stock { left: auto; right: .75rem; background: hsl(var(--background) / .8); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }

.ipm-card-body { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; min-width: 0; }
.ipm-card-cat { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: 0; }
.ipm-card-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.ipm-card-title a { color: hsl(var(--foreground)); text-decoration: none; }
.ipm-card-title a:hover { color: hsl(var(--primary-light)); }
.ipm-card-excerpt {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ipm-card-price { color: hsl(var(--primary-light)); font-size: .9375rem; font-weight: 600; }
.ipm-card-price del { color: hsl(var(--muted-foreground)); opacity: .7; }
.ipm-card-price ins { text-decoration: none; color: hsl(var(--accent)); }
.ipm-card-action { margin-top: auto; padding-top: .9rem; }
.ipm-card-action a.button,
.ipm-card-action button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: .7rem 1rem;
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 2px;
	background: hsl(var(--accent));
	color: hsl(var(--accent-foreground));
	border: 0;
}
.ipm-card-action a.button:hover,
.ipm-card-action button.button:hover { background: hsl(var(--accent) / .85); color: hsl(var(--accent-foreground)); }
.ipm-card-action a.added_to_cart {
	display: block;
	margin-top: .5rem;
	font-size: .75rem;
	text-align: center;
	color: hsl(var(--primary-light));
}

/* Prevent duplicated core loop markup inside our card */
.ipm-product-card > a.woocommerce-LoopProduct-link,
.ipm-product-card > h2.woocommerce-loop-product__title,
.ipm-product-card > span.price,
.ipm-product-card > .ipm-card-body ~ a.add_to_cart_button { display: none !important; }


/* Filters + pagination */
.ipm-shop-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
.ipm-filter {
	font-size: .875rem;
	padding: .5rem 1rem;
	border-radius: 2px;
	border: 1px solid hsl(var(--border));
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	transition: all .2s ease;
}
.ipm-filter:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--foreground)); }
.ipm-filter.is-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); color: hsl(var(--primary-light)); }

.ipm-shop-pagination, .woocommerce nav.woocommerce-pagination { margin-top: 3rem; text-align: center; }
.ipm-shop-pagination .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-block;
	padding: .5rem .9rem;
	margin: 0 .2rem;
	border: 1px solid hsl(var(--border));
	color: hsl(var(--muted-foreground));
	text-decoration: none;
	border-radius: 2px;
}
.ipm-shop-pagination .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
	border-color: hsl(var(--primary));
	background: hsl(var(--primary) / .1);
	color: hsl(var(--primary-light));
}

/* No sidebar / page list on shop pages */
.ipm-woo .widget_pages,
.ipm-woo .widget_nav_menu,
.ipm-woo .widget_archive,
.ipm-woo .widget_categories,
.ipm-woo .widget_search,
.woocommerce-page #secondary,
.woocommerce-page .sidebar,
.woocommerce-page aside.widget-area:not(.elementor-element) { display: none; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: hsl(var(--muted-foreground)); }

body { overflow-x: hidden; }

/* Shop breadcrumb + result count */
.ipm-shop-breadcrumb a { color: hsl(var(--primary)); text-decoration: none; }
.ipm-shop-breadcrumb a:hover { color: hsl(var(--accent)); }
.ipm-woo .woocommerce-result-count { color: hsl(var(--muted-foreground)); }

/* Header cart link */
.ipm-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: hsl(var(--foreground));
	transition: color .2s ease;
}
.ipm-cart-link:hover { color: hsl(var(--primary)); }
.ipm-cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9999px;
	background-color: hsl(var(--secondary));
	color: hsl(var(--muted-foreground));
	font-family: var(--font-body, inherit);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}
.ipm-cart-count.is-filled {
	background-color: hsl(var(--accent));
	color: hsl(var(--background));
	font-weight: 600;
}

/* Native Woo cart / checkout / account keep the brand palette */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title { color: hsl(var(--foreground)); }
.wc-block-components-panel,
.wc-block-cart,
.wc-block-checkout,
.wc-block-components-totals-item,
.wc-block-components-sidebar { background-color: transparent; color: hsl(var(--foreground)); }
.wc-block-components-text-input input,
.wc-block-components-form input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background-color: hsl(var(--secondary));
	color: hsl(var(--foreground));
	border: 1px solid hsl(var(--border));
}
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: hsl(var(--accent));
	color: hsl(var(--background));
	border-radius: 2px;
}


/* ==========================================================================
   Elementor compatibility
   The theme provides brand defaults only. Anything Elementor styles wins,
   so no !important rules and no fixed widths that block responsive controls.
   ========================================================================== */

.ipm-elementor-content { display: block; }

/* Elementor content areas keep the brand canvas but never force their own
   backgrounds over section settings chosen in the editor. */
body.ipm-elementor-page { background-color: hsl(var(--background)); }

.elementor img { max-width: 100%; height: auto; }
.elementor a { text-decoration: none; }

/* Prevent horizontal overflow without locking Elementor widths. */
.elementor-section,
.elementor-widget-wrap,
.elementor-container { max-width: 100%; }

/* Elementor WooCommerce widgets keep their own grid; the theme only supplies
   the dark card styling so products still look like iPleyMusic merch. */
.elementor-widget-woocommerce-products ul.products,
.elementor-widget-wc-archive-products ul.products {
	display: grid;
	gap: 1.5rem;
}

/* Editor / preview: never hide Elementor UI with the ad cleaner. */
.elementor-editor-active .ipm-ad-slot { outline: 1px dashed hsl(var(--border)); }

/* ---------- Verified artist badge ---------- */
.ipm-verified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-left: 0.28em;
	line-height: 0;
	flex: 0 0 auto;
	position: relative;
	top: -0.04em;
}
.ipm-verified svg,
.ipm-verified img.ipm-verified__img {
	width: 0.9em;
	height: 0.9em;
	min-width: 14px;
	min-height: 14px;
	max-width: none;
	display: block;
	object-fit: contain;
	background: none;
	border: 0;
	box-shadow: none;
}
.ipm-verified--sm svg,
.ipm-verified--sm img.ipm-verified__img { width: 0.8em; height: 0.8em; }
.ipm-verified--lg svg,
.ipm-verified--lg img.ipm-verified__img { width: 0.5em; height: 0.5em; min-width: 22px; min-height: 22px; }
.ipm-name { overflow-wrap: anywhere; }