/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ==========================================================================
   Microgramma Custom Font Loading
   ========================================================================== */
@font-face {
	font-family: 'Microgramma D Bold Extended';
	src: url('fonts/microgramma-d-bold-extended.otf') format('opentype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Microgramma';
	src: url('fonts/Microgramma normal for manual.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Blocksy Palette & Design System Variable Overrides (Forces Entire Theme Dark)
   ========================================================================== */
:root {
	/* Core background palette overrides */
	--theme-palette-color-1: #00d2ff !important; /* Accent Blue */
	--theme-palette-color-2: #ff3333 !important; /* Accent Red */
	--theme-palette-color-3: #000000 !important;
	--theme-palette-color-4: #090909 !important;
	--theme-palette-color-5: #1a1a1f !important; /* Border color */
	--theme-palette-color-6: #ffffff !important; /* Headings */
	--theme-palette-color-7: #b5b5bc !important; /* Text secondary */
	--theme-palette-color-8: #090909 !important; /* Background / Header color */
	
	/* Blocksy specific variables */
	--theme-text-color: #b5b5bc !important;
	--theme-headings-color: #ffffff !important;
	--theme-link-initial-color: #ffffff !important;
	--theme-link-hover-color: #00d2ff !important;
	--theme-border-color: #1a1a1f !important;

	/* Custom Palette Names */
	--matte-black: #090909;
	--glossy-black: #000000;
	--hover-charcoal: #0f0f12;
	--glossy-border: 1px solid rgba(255, 255, 255, 0.08);
	--flat-border: 1px solid #1a1a1f;

	/* Product & Category Custom Accents */
	--djenttonic-accent: #00d2ff;   /* LED Glowing Blue */
	--shredinhere-accent: #ff3333;  /* Claws/Label Red */
	--merch-accent: #7030ff;        /* Neon Indigo/Purple from T-Shirts */
	--wyrd-accent: #7090a0;         /* Sage Teal from WYRD Bass Preamp */

	/* Brand Status & Badges */
	--sold-out-red: #d11a2a;        /* Crimson Red */

	/* Typography & Grays */
	--text-primary: #ffffff;
	--text-secondary: #b5b5bc;
	--text-muted: #5a5a62;
}

/* ==========================================================================
   Typography Overrides (Forced fonts on WooCommerce and Blocksy elements)
   ========================================================================== */
/* Force normal text font (Microgramma) on all text containers */
body, 
html, 
p, 
span, 
div, 
li, 
a, 
input, 
select, 
textarea, 
td, 
th,
.price,
.price *,
.amount,
.woocommerce-Price-amount,
.woocommerce-product-details__short-description,
.stock,
.woocommerce-tabs,
.woocommerce-tabs *,
.woocommerce-review-link,
.woocommerce-pagination,
.comment-text,
.quantity input,
.cart-discount,
.order-total,
.shop_table *,
.woocommerce-input-wrapper * {
	font-family: 'Microgramma', sans-serif !important;
}

/* Force headings and bold action elements to use Microgramma D Bold Extended */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.entry-title,
.page-title,
.menu-item a,
.ct-menu-link,
.site-title,
.site-title a,
.widget-title,
.woocommerce-loop-product__title,
.woocommerce-loop-product__title a,
.product_title,
.btn-glossy,
.button,
button,
input[type="submit"],
.added_to_cart,
.onsale,
.sold-out-text,
.woocommerce-tabs .nav-tabs a,
.woocommerce-Reviews-title,
.comment-reply-title,
.woocommerce-form-row label,
.woocommerce-column__title,
.checkout-button,
.place-order * {
	font-family: 'Microgramma D Bold Extended', sans-serif !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
}

.woocommerce div.product .summary h1.product_title,
.woocommerce div.product h1.product_title,
.woocommerce-page div.product .summary h1.product_title,
h1.product_title,
h1.product_title.entry-title,
.woocommerce-products-header__title {
	font-size: 1.4rem !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: block !important;
	width: 100% !important;
}

/* ==========================================================================
   Global Theme Background & Scroll overrides
   ========================================================================== */
html, body {
	background-color: var(--matte-black) !important;
	color: var(--text-secondary) !important;
	overflow-x: hidden !important;
	width: 100% !important;
}

/* Blocksy Theme Specific Container Adjustments */
#main-container {
	background-color: var(--matte-black) !important;
	overflow: hidden !important;
}

/* ==========================================================================
   Header and Menu Overrides (Force Black Background & White Menu Links)
   ========================================================================== */
header,
.ct-header,
[data-header],
.ct-header-row,
.ct-header-row-container,
.ct-header-meta {
	background-color: var(--matte-black) !important;
	background: var(--matte-black) !important;
	color: var(--text-primary) !important;
	border-bottom: var(--glossy-border) !important;
	--header-background: var(--matte-black) !important;
	--header-row-background: var(--matte-black) !important;
	--header-row-background-active: var(--matte-black) !important;
}

/* Force menu links, cart icons, search icons to be white and visible */
.ct-menu-link,
.menu-item a,
.ct-header-navigation a,
.ct-header-meta a,
.site-title a,
.ct-search-toggle,
.ct-cart-toggle,
.ct-header-cart {
	color: var(--text-primary) !important;
}

/* Hide site title text in header logo branding */
.site-branding .site-title,
.site-branding .site-title-container {
	display: none !important;
}

.ct-menu-link:hover,
.menu-item a:hover,
.ct-header-navigation a:hover,
.site-title a:hover {
	color: var(--djenttonic-accent) !important;
}

/* Fix header logo alignment and remove background bounds */
.site-logo-container img {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
}

/* ==========================================================================
   Full Width Page Layout Overrides (Fixing Crooked & Shifted Layouts)
   ========================================================================== */
/* Hide default page title/headers on custom pages */
.home .entry-header,
.page-id-57 .entry-header,
.page-id-58 .entry-header,
.page-id-59 .entry-header,
.page-id-60 .entry-header,
.page-id-61 .entry-header {
	display: none !important;
}

/* Force full width on Gutenberg block containers on custom pages */
.home .entry-content,
.page-id-57 .entry-content,
.page-id-58 .entry-content,
.page-id-59 .entry-content,
.page-id-60 .entry-content,
.page-id-61 .entry-content {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Ensure all Gutenberg group blocks on custom pages stretch full-width */
.home .entry-content > *,
.page-id-57 .entry-content > *,
.page-id-58 .entry-content > *,
.page-id-59 .entry-content > *,
.page-id-60 .entry-content > *,
.page-id-61 .entry-content > * {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Reset blocksy default container constraints on custom pages */
.home #main-container > .ct-container,
.page-id-57 #main-container > .ct-container,
.page-id-58 #main-container > .ct-container,
.page-id-59 #main-container > .ct-container,
.page-id-60 #main-container > .ct-container,
.page-id-61 #main-container > .ct-container {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Make blocksy columns stretch properly on mobile */
@media (max-width: 768px) {
	.wp-block-columns {
		flex-direction: column !important;
	}
	.wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		padding: 10px 0 !important;
	}
}

/* ==========================================================================
   WooCommerce Loop Grid & Product Cards Overrides
   ========================================================================== */
.products .product {
	background-color: var(--matte-black) !important;
	border: var(--flat-border) !important;
	padding: 25px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	height: 100% !important;
	position: relative !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	text-align: center !important;
}

.products .product .woocommerce-loop-product__title {
	font-size: clamp(0.75rem, 1.8vw, 0.95rem) !important;
	letter-spacing: -0.01em !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	margin-top: 15px !important;
	margin-bottom: 10px !important;
	display: block !important;
	width: 100% !important;
}

.products .product .price {
	color: var(--text-secondary) !important;
	margin-bottom: 20px !important;
	font-size: 1rem !important;
}

.products .product .button {
	background: var(--glossy-black) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	padding: 12px 18px !important;
	font-size: 0.8rem !important;
	border-radius: 0 !important;
	transition: all 0.2s ease !important;
	margin-top: auto !important;
}

.products .product .button:hover {
	background: var(--hover-charcoal) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Accent glow borders based on category */
.products .product_cat-standard-line:hover {
	border-color: var(--djenttonic-accent) !important;
	box-shadow: 0 0 20px rgba(0, 210, 255, 0.15) !important;
}

/* Target SHREDINHERE specifically for red hover glow */
.products .post-70:hover {
	border-color: var(--shredinhere-accent) !important;
	box-shadow: 0 0 20px rgba(255, 51, 51, 0.15) !important;
}

.products .product_cat-custom-shop:hover {
	border-color: var(--wyrd-accent) !important;
	box-shadow: 0 0 20px rgba(112, 144, 160, 0.15) !important;
}

.products .product_cat-merch:hover {
	border-color: var(--merch-accent) !important;
	box-shadow: 0 0 20px rgba(112, 48, 255, 0.15) !important;
}

/* ==========================================================================
   WooCommerce FOMO Sold Out Overlays
   ========================================================================== */
.product-sold-out {
	position: relative;
}

.product-sold-out img {
	opacity: 0.45 !important;
	filter: grayscale(90%) !important;
	transition: opacity 0.3s ease, filter 0.3s ease;
}

.product-sold-out:hover img {
	opacity: 0.6 !important;
	filter: grayscale(60%) !important;
}

.product-sold-out .sold-out-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: none;
}

.product-sold-out .sold-out-text {
	font-size: 0.9rem;
	color: var(--text-primary);
	background: var(--sold-out-red);
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transform: rotate(-8deg);
	letter-spacing: 0.08em;
	box-shadow: 0 5px 15px rgba(209, 26, 42, 0.4);
}

/* ==========================================================================
   Metallic Cat Scratches Decoration (Mobile Friendly)
   ========================================================================== */
.cat-scratches-bg {
	position: relative !important;
	background-image: url("images/scratches.svg") !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* ==========================================================================
   Tactile Glossy Buttons and Highlights
   ========================================================================== */
.btn-glossy {
	background: var(--glossy-black);
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: var(--text-primary) !important;
	padding: 12px 24px;
	letter-spacing: 0.05em;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.btn-glossy::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 200%;
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-25deg);
	transition: 0.75s;
}

.btn-glossy:hover::before {
	left: 120%;
}

.btn-glossy:hover {
	background: var(--hover-charcoal) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   Payment Systems Footer Styling
   ========================================================================== */
.payment-systems {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 15px 0;
	width: 100%;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.payment-systems .payment-item {
	height: 30px;
	width: 70px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: background-image 0.2s ease, opacity 0.2s ease;
	opacity: 0.85;
}

.payment-systems .payment-item:hover {
	opacity: 1;
}

.payment-systems .payment-item.paypal {
	background-image: url("images/paypal.svg");
}
.payment-systems .payment-item.paypal:hover {
	background-image: url("images/paypal-h.svg");
}

.payment-systems .payment-item.mastercard {
	background-image: url("images/mc.svg");
}
.payment-systems .payment-item.mastercard:hover {
	background-image: url("images/mc-h.svg");
}

.payment-systems .payment-item.visa {
	background-image: url("images/visa.svg");
}
.payment-systems .payment-item.visa:hover {
	background-image: url("images/visa-h.svg");
}

.payment-systems .payment-item.liqpay {
	background-image: url("images/liqpay.svg");
}
.payment-systems .payment-item.liqpay:hover {
	background-image: url("images/liqpay-h.svg");
}

.payment-systems .payment-item.gpay {
	background-image: url("images/gpay.svg");
}
.payment-systems .payment-item.gpay:hover {
	background-image: url("images/gpay-h.svg");
}