/*
Theme Name: Megaone
Theme URI: https://example.com/megaone
Author: Ibraheem Gbadegesin
Author URI: https://example.com
Description: A minimalist, luxury, immersive, high-performance WooCommerce theme. Design Philosophy: "Zenith".
Version: 1.2.2
Text Domain: megaone
Tags: e-commerce, minimal, luxury, woocommerce, gsap
*/

/* ==========================================================================
   1. NORMALIZE & RESET
   ========================================================================== */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; max-width: 100%; height: auto; display: block; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/* ==========================================================================
   2. VARIABLES & DESIGN TOKENS
   ========================================================================== */
:root {
	/* Colors */
	--bg-color: #ffffff;
	--text-primary: #1a1a1a;
	--text-secondary: #666666;
	--color-accent: #D4AF37;
    --color-whatsapp: #25D366; /* WhatsApp Brand Color */
	--color-whatsapp-dark: #128C7E;
	--border-light: rgba(0, 0, 0, 0.1);
	--zenith-error: #D32F2F;
	--zenith-success: #388E3C;
    --zenith-white: #ffffff;
    --zenith-black: #000000;

	/* Typography */
	--font-body: 'Inter', sans-serif;
	--font-display: 'Playfair Display', serif;

	/* Spacing & Layout */
	--site-gutter: clamp(1rem, 5vw, 4rem);
    --grid-gap: 2rem;
    --card-radius: 0px;
	
	/* Font Sizes (Fluid) */
	--fs-display-xl: clamp(3rem, 8vw, 6rem);
	--fs-h1: clamp(2rem, 5vw, 4rem);
	--fs-h2: clamp(1.75rem, 4vw, 3rem);
	--fs-h3: clamp(1.5rem, 3vw, 2.5rem);
	--fs-body: 16px;
	--fs-tiny: 0.75rem;
}

/* ==========================================================================
   3. GLOBAL TYPOGRAPHY & LAYOUT
   ========================================================================== */
html {
	scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
	background-color: var(--bg-color);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	overflow-x: hidden;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    /* Add padding to top equal to approx header height to prevent content jump due to fixed header */
    padding-top: 80px; 
}

body.sidebar-open { overflow: hidden; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.2;
	color: var(--text-primary);
	margin-bottom: 1rem;
    margin-top: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Standard Elements */
p { margin-bottom: 1.5rem; }
a { color: inherit; text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--color-accent); }
ul, ol { margin-bottom: 1.5rem; padding-left: 2rem; }
blockquote { border-left: 2px solid var(--text-primary); margin: 2rem 0; padding-left: 1.5rem; font-style: italic; }

/* Layout Containers */
.container {
	width: 100%;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--site-gutter);
	padding-right: var(--site-gutter);
}

.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}

/* ==========================================================================
   4. WORDPRESS CORE COMPATIBILITY
   ========================================================================== */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }

a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

/* Comments & Widgets */
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }
.gallery-caption { display: block; }
.widget select { max-width: 100%; }
.widget_search .search-field { width: 100%; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	width: 1px; word-wrap: normal !important;
}

/* ==========================================================================
   5. HEADER & NAVIGATION (FIXED Z-INDEX)
   ========================================================================== */
.site-header {
	padding: 1.5rem 0;
	position: fixed; /* Changed from sticky to fixed */
	top: 0;
    left: 0;
    width: 100%;
	z-index: 9999;
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0,0,0,0.05);
	transition: padding 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.header-grid { display: flex; align-items: center; justify-content: space-between; }

.site-branding .site-title {
	margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em;
	line-height: 1; white-space: nowrap;
}
.site-branding a { color: var(--text-primary); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 2rem; }

.header-search-toggle, .header-account-link, .header-cart-toggle {
	display: flex; align-items: center; justify-content: center;
	color: var(--text-primary); background: none; border: none; padding: 0; cursor: pointer;
}

.cart-count.badge {
	position: absolute; top: -5px; right: -8px;
	background-color: var(--color-accent); color: #fff;
	font-size: 10px; font-weight: 600; width: 16px; height: 16px;
	border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.header-cart-wrapper { position: relative; }

/* Desktop Menu */
.main-navigation ul { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
.main-navigation ul li { position: relative; }
.main-navigation ul li a {
	font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
	font-weight: 500; position: relative; display: block;
}
.main-navigation ul li a::after {
	content: ''; position: absolute; width: 0; height: 1px; bottom: -4px; left: 0;
	background-color: var(--color-accent); transition: width 0.3s ease;
}
.main-navigation ul li a:hover::after { width: 100%; }

.menu-toggle, .mobile-nav-header, .search-header-mobile { display: none; }

/* Mobile Header */
@media (max-width: 991px) {
    body { padding-top: 70px; } /* Adjust padding for mobile header */
	.header-grid { display: grid; grid-template-columns: 40px 1fr auto; gap: 0.5rem; }
	
    /* FIXED: Ensure Toggle is visible and has content */
	.menu-toggle {
		display: flex !important; align-items: center; justify-content: center;
        grid-column: 1; 
        background: transparent; border: none; padding: 0;
		font-size: 1.8rem; color: var(--text-primary);
        cursor: pointer; z-index: 101;
        width: 44px; height: 44px; /* Explicit touch target size */
	}
    /* Fallback Icon if HTML is empty */
    .menu-toggle::before {
        content: '\2630'; /* Hamburger Unicode */
        display: block;
        font-family: sans-serif; /* Safe font fallback */
        line-height: 1;
    }

	.site-branding { grid-column: 2; justify-self: center; text-align: center; }
	.header-actions { grid-column: 3; justify-self: end; gap: 1.25rem; }
	.main-navigation { display: none; }
	
	.main-navigation.toggled {
		display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
		background: var(--bg-color); z-index: 999; flex-direction: column;
		padding: 2rem; overflow-y: auto;
	}
	.main-navigation.toggled ul { flex-direction: column; align-items: center; gap: 2rem; margin-top: 4rem; }
	.main-navigation.toggled ul li a { font-size: 1.5rem; font-family: var(--font-display); }
	.mobile-nav-header { display: flex; justify-content: space-between; width: 100%; position: absolute; top: 1.5rem; left: 0; padding: 0 1.5rem; }
	.mobile-menu-close { background: none; border: none; font-size: 2rem; cursor: pointer; }
}

/* Search Overlay */
.header-search-overlay {
	position: fixed; top: 80px; left: 0; width: 100%;
	background-color: var(--bg-color); border-bottom: 1px solid var(--border-light);
	padding: 2rem 0; opacity: 0; visibility: hidden;
	transform: translateY(10px); transition: all 0.3s ease; z-index: 90;
}
.header-search-overlay.active { opacity: 1; visibility: visible; transform: translateY(0); }
.header-search-overlay input { font-size: 2rem; border: none; background: transparent; padding: 0; border-bottom: 2px solid var(--text-primary); }

/* ==========================================================================
   6. WOOCOMMERCE SHOP LAYOUT (REFINED)
   ========================================================================== */
.shop-toolbar {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1.5rem 0; margin-bottom: 2rem; 
    border-bottom: 1px solid var(--border-light);
	flex-wrap: wrap; gap: 1.5rem;
}

/* Search Bar in Toolbar */
.zenith-shop-search {
    flex-grow: 1;
    max-width: 400px;
    position: relative;
}
.zenith-shop-search input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.9rem;
    transition: 0.3s;
}
.zenith-shop-search input:focus {
    border-color: var(--text-primary);
    outline: none;
}
.zenith-shop-search .search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); pointer-events: none;
}

.shop-toolbar__left .woocommerce-result-count { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }

.shop-toolbar__right {
    display: flex; gap: 1rem; align-items: center;
}

/* Hide Old Sidebar Elements */
.shop-filter-sidebar, .shop-filter-overlay, .filter-toggle-btn {
    display: none !important;
}

.widget { margin-bottom: 2rem; }
.widget-title {
	font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em;
	margin-bottom: 1rem; border-bottom: 1px solid var(--border-light);
	padding-bottom: 0.5rem; display: inline-block; width: 100%;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-secondary); display: flex; justify-content: space-between; }
.widget ul li a:hover { color: var(--color-accent); }

/* ==========================================================================
   7. PRODUCT GRID SYSTEM (COMPACT LUXURY)
   ========================================================================== */
.woocommerce ul.products, ul.products {
	display: grid !important;
	/* Desktop: keep it breathable but structured */
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 2rem 1.5rem !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
	width: 100% !important;
}

.woocommerce ul.products li.product, ul.products li.product {
	width: 100% !important; float: none !important; margin: 0 !important; box-sizing: border-box;
}

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

/* MOBILE SPECIFIC: COMPACT 2-COLUMN GRID */
@media (max-width: 767px) {
    .woocommerce ul.products, ul.products {
        /* Force 2 columns regardless of screen width */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        /* Tighter gap for compact feel */
        gap: 1.5rem 0.75rem !important; 
    }
    
    .container, .shop-container {
        padding-left: 15px; /* Reduce side padding slightly for more grid space */
        padding-right: 15px;
    }
}

/* ==========================================================================
   8. PRODUCT CARD DESIGN (COMPACT LUXURY)
   ========================================================================== */
.p-card {
	position: relative; display: flex; flex-direction: column; width: 100%;
	background: transparent;
}

.p-card__media {
	position: relative; width: 100%;
    /* 3:4 Aspect Ratio is standard */
	aspect-ratio: 3/4;
	background: #f4f4f4; overflow: hidden; 
    /* Reduced margin below image for compactness */
    margin-bottom: 0.75rem;
}

.p-img {
	width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.6s ease;
}
.p-card:hover .main-img { transform: scale(1.05); }

.hover-img {
    position: absolute; top: 0; left: 0;
    opacity: 0; z-index: 2;
    transition: opacity 0.4s ease;
}
.p-card:hover .hover-img { opacity: 1; }

/* Compact Badge */
.p-badge-new {
    position: absolute; top: 8px; left: 8px;
    background: #fff; color: #000;
    padding: 3px 6px; font-size: 0.65rem; 
    text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em;
    z-index: 5;
}

/* Info Section */
.p-card__info { display: flex; flex-direction: column; width: 100%; }

.p-card__header {
    display: flex; flex-direction: column; /* Stack Title & Price for cleaner vertical rhythm */
    gap: 0.25rem;
}

.p-card__title {
	font-family: var(--font-body); 
    font-weight: 500; 
    font-size: 0.95rem; 
    margin: 0; line-height: 1.3;
}
.p-card__title a { color: var(--text-primary); text-decoration: none; }

.p-card__price {
	font-size: 0.9rem; color: var(--text-secondary); 
    font-weight: 400;
}

/* Buttons & Actions */
.zenith-action-btn, .zenith-btn-add {
    display: block; width: 100%; padding: 0.8rem;
    text-align: center; font-size: 0.8rem; text-transform: uppercase;
    background: #fff; color: #000; border: 1px solid #000; cursor: pointer;
    transition: 0.3s;
}
.zenith-action-btn:hover { background: #000; color: #fff; }

/* WhatsApp Button Styles */
.zenith-btn-whatsapp {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 0.8rem;
    background-color: var(--color-whatsapp); color: #fff;
    font-size: 0.8rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em;
    border: none; cursor: pointer; text-decoration: none;
    transition: background-color 0.3s ease;
}
.zenith-btn-whatsapp:hover { background-color: var(--color-whatsapp-dark); color: #fff; }
.zenith-btn-whatsapp svg { fill: currentColor; width: 16px; height: 16px; }

/* Desktop Hover Actions */
.p-card__actions-desktop {
    position: absolute; bottom: 0; left: 0; width: 100%;
    transform: translateY(100%); transition: transform 0.3s ease;
    z-index: 10; display: flex; flex-direction: column;
}
.p-card:hover .p-card__actions-desktop { transform: translateY(0); }

/* MOBILE TYPOGRAPHY & ACTIONS */
.p-card__mobile-interface { display: none; margin-top: 0.5rem; gap: 0.5rem; flex-direction: column; }

@media (max-width: 767px) {
    .p-card__media { margin-bottom: 0.5rem; } 
    .p-card__title { font-size: 0.85rem; } 
    .p-card__price { font-size: 0.8rem; }
    
    .p-card__actions-desktop { display: none; }
    .p-card__mobile-interface { display: flex; }
    
    .p-card__mobile-trigger {
        width: 100%; border: 1px solid var(--border-light); background: transparent;
        padding: 0.5rem; font-size: 0.75rem; text-transform: uppercase; cursor: pointer;
    }
    .p-card__mobile-trigger.active { background: var(--text-primary); color: #fff; }
    
    .p-card__mobile-actions { display: none; }
    .p-card__mobile-actions.open { display: block; animation: fadeIn 0.3s; }
    
    .zenith-btn-mobile {
        display: block; width: 100%;
        background: var(--text-primary); color: #fff;
        padding: 0.75rem; text-align: center;
        font-size: 0.75rem; text-transform: uppercase;
    }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* ==========================================================================
   9. PAGINATION & FOOTER
   ========================================================================== */
.zenith-pagination { margin-top: 4rem; display: flex; justify-content: center; }
.zenith-pagination ul { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.zenith-pagination ul li a, .zenith-pagination ul li span {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border: 1px solid var(--border-light);
	color: var(--text-primary); text-decoration: none; transition: 0.3s;
}
.zenith-pagination ul li span.current, .zenith-pagination ul li a:hover {
	background: var(--text-primary); color: #fff; border-color: var(--text-primary);
}

.site-footer { border-top: 1px solid var(--border-light); padding: 4rem 0; margin-top: 4rem; background: var(--bg-color); }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.site-info { font-size: 0.9rem; color: var(--text-secondary); }
.copyright { margin-bottom: 0.5rem; }
.footer-navigation ul { display: flex; gap: 1.5rem; list-style: none; padding: 0; }
@media (max-width: 768px) { .footer-grid { flex-direction: column; text-align: center; } .footer-navigation ul { flex-direction: column; gap: 1rem; } }

/* ==========================================================================
   10. UTILITIES, PRELOADER & HOMEPAGE
   ========================================================================== */
.preloader-master {
	position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
	background: var(--bg-color); z-index: 9999;
	display: flex; align-items: center; justify-content: center; pointer-events: none;
}
/* FIXED: Hide the "line stuff" visually but keep element for JS logic */
.separator-line { 
    width: 0; height: 0; 
    opacity: 0; 
    background-color: transparent; 
}

/* FIXED: Replaced line with a luxury spinner */
.preloader-master::after {
    content: '';
    width: 50px; height: 50px;
    border: 1px solid rgba(0,0,0,0.1);
    border-left: 1px solid var(--text-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.shop-loader {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(255, 255, 255, 0.8); display: none; justify-content: center; padding-top: 20vh; z-index: 50;
}
.shop-loader .spinner {
	width: 40px; height: 40px; border: 3px solid var(--border-light); border-top-color: var(--text-primary);
	border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Zenith Hero & Stacks */
.zenith-hero {
	height: 100vh; width: 100%; position: relative; overflow: hidden;
	display: flex; justify-content: center; align-items: center;
}
.z-text {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	font-family: var(--font-display); font-size: clamp(4rem, 15vw, 18rem);
	color: rgba(0, 0, 0, 0.03); white-space: nowrap; pointer-events: none;
}
.z-product { position: relative; z-index: 10; width: 100%; max-width: 450px; }

.zenith-split { display: flex; flex-wrap: wrap; min-height: 80vh; width: 100%; }
.zenith-split.alt { flex-direction: row-reverse; }
.zenith-split__image { flex: 1 1 50%; position: relative; min-height: 50vh; overflow: hidden; }
.zenith-split__image img { width: 100%; height: 100%; object-fit: cover; transition: 1.2s; }
.zenith-split:hover .zenith-split__image img { transform: scale(1.03); }
.zenith-split__content { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; padding: 4rem; }
@media (max-width: 991px) { .zenith-split, .zenith-split.alt { flex-direction: column; } .zenith-split__image, .zenith-split__content { flex: 1 1 100%; } }

.stack-wrapper { position: relative; }
.stack-section {
	position: sticky; top: 0; min-height: 100vh; background: var(--bg-color);
	box-shadow: 0 -5px 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: center;
}
.hero-stack__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; min-height: 80vh; }
.features-stack { padding: 4rem 0; background: #f9f9f9; z-index: 2; }
.features-grid { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; }
.cat-tile { position: relative; height: 350px; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.cat-tile__bg { position: absolute; top:0; left:0; width:100%; height:100%; background-size:cover; transition: 0.6s; }
.cat-tile:hover .cat-tile__bg { transform: scale(1.05); }
.cat-tile__title { position: relative; z-index: 2; font-size: 1.5rem; text-transform: uppercase; font-weight: 600; }
@media (max-width: 991px) { .hero-stack__inner { grid-template-columns: 1fr; text-align: center; } }

/* ==========================================================================
   14. ZENITH BLOG SYSTEM (High-End Layout)
   ========================================================================== */

/* A. IMMERSIVE HERO POST */
.z-immersive-post {
    position: relative;
    width: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.z-immersive-media {
    position: relative;
    width: 100%;
    height: 70vh; /* Immersive height */
    min-height: 500px;
    overflow: hidden;
}

.z-img-hero {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.z-immersive-post:hover .z-img-hero {
    transform: scale(1.03); /* Subtle zoom on hover */
}

.z-immersive-content {
    position: relative;
    margin-top: -80px; /* Overlap effect */
    z-index: 10;
    pointer-events: none; /* Let clicks pass through padding areas */
}

.z-immersive-inner {
    background: var(--bg-color);
    padding: 3rem;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    pointer-events: auto;
}

.z-title-hero {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin: 0.5rem 0 1.5rem;
}

.z-meta {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    display: block;
}
.z-sep { margin: 0 0.5rem; color: var(--color-accent); }

.z-excerpt {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.z-btn-hero {
    display: inline-block;
    width: auto;
    padding: 1rem 3rem;
    min-width: 200px;
}

/* B. BLOG GRID */
.zenith-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: calc(var(--grid-gap) * 1.5) var(--grid-gap);
    width: 100%;
}

/* C. BLOG CARD */
.z-card {
    display: flex;
    flex-direction: column;
    group-hover: none; /* Reset */
}

.z-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background-color: #f4f4f4;
}

.z-img-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.z-card:hover .z-img-card {
    transform: scale(1.05);
}

.z-card-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    color: var(--text-primary);
    padding: 4px 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    z-index: 2;
}

.z-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.z-meta-mini {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.z-card-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}
.z-card-title a { color: var(--text-primary); transition: color 0.3s; }
.z-card-title a:hover { color: var(--text-secondary); }

.z-read-more {
    margin-top: auto;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 500;
    position: relative;
    display: inline-block;
    width: fit-content;
}
.z-read-more::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--text-primary);
    transition: width 0.3s ease;
}
.z-card:hover .z-read-more::after {
    width: 100%;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 991px) {
    .z-immersive-media { height: 50vh; }
    .z-immersive-inner { width: 90%; padding: 2rem; margin-top: -60px; }
}

@media (max-width: 767px) {
    .zenith-blog-grid {
        grid-template-columns: 1fr; /* Single column on mobile for better readability */
        gap: 3rem;
    }
    .z-immersive-media { height: 40vh; }
    .z-immersive-inner { 
        width: 100%; 
        margin-top: 0; 
        box-shadow: none; 
        padding: 2rem 0; 
        text-align: left;
    }
    .z-btn-hero { width: 100%; }
}

/* ==========================================================================
   15. ZENITH SINGLE POST SYSTEM
   ========================================================================== */

/* A. Header & Hero */
.z-single-header {
    padding: 4rem 0 3rem;
    text-align: center;
}

.z-single-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.z-single-cats { margin-bottom: 1.5rem; }
.z-single-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 2rem;
}

.z-single-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.z-author-block {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}
.z-author-img {
    border-radius: 50%;
    width: 44px;
    height: 44px;
}
.z-author-info { display: flex; flex-direction: column; line-height: 1.2; }
.z-by { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
.z-name { font-weight: 600; color: var(--text-primary); }

.z-meta-divider {
    width: 1px; height: 30px; background: var(--border-light);
}

.z-single-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 4rem;
    height: auto;
    max-height: 80vh;
    overflow: hidden;
}
.z-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* B. Content Typography */
.z-entry-content {
    max-width: 740px; /* Optimal reading width */
    margin: 0 auto 4rem;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
}
.z-entry-content p { margin-bottom: 2rem; }
.z-entry-content h2 { margin-top: 3rem; margin-bottom: 1rem; font-size: 2rem; }
.z-entry-content h3 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; }
.z-entry-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 2rem;
    margin: 3rem 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--text-primary);
}

/* C. Footer & Share */
.z-entry-footer {
    max-width: 740px;
    margin: 0 auto 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.z-tags a {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: #f4f4f4;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    border-radius: 4px; /* Soft radius */
    color: var(--text-secondary);
}
.z-tags a:hover { background: var(--text-primary); color: #fff; }

.z-share-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.z-share-btn {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid transparent;
}
.z-share-btn:hover { border-color: currentColor; }

/* D. Author Bio Box */
.z-author-bio-box {
    max-width: 800px;
    margin: 0 auto 4rem;
    background: #f9f9f9;
    padding: 3rem;
    display: flex;
    gap: 2rem;
    align-items: center;
}
.z-bio-avatar img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
.z-bio-content { flex: 1; }
.z-bio-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 0.5rem; }
.z-bio-desc { font-size: 1rem; margin-bottom: 1rem; line-height: 1.6; }
.z-bio-link { font-size: 0.9rem; font-weight: 600; color: var(--color-accent); }

/* E. Post Navigation */
.z-post-navigation {
    max-width: 1440px; /* Wide */
    margin: 0 auto 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.nav-links { display: contents; }
.nav-previous, .nav-next {
    padding: 3rem 0;
    display: flex;
    flex-direction: column;
}
.nav-next { text-align: right; align-items: flex-end; border-left: 1px solid var(--border-light); }
.nav-subtitle { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 0.5rem; }
.nav-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-primary); max-width: 400px; }

/* Responsive */
@media (max-width: 767px) {
    .z-single-meta { flex-direction: column; gap: 1rem; }
    .z-meta-divider { display: none; }
    .z-single-hero { height: 50vh; margin-bottom: 2rem; }
    .z-entry-footer { flex-direction: column; align-items: flex-start; }
    .z-author-bio-box { flex-direction: column; text-align: center; padding: 2rem; }
    .z-post-navigation { grid-template-columns: 1fr; }
    .nav-next { border-left: none; border-top: 1px solid var(--border-light); text-align: left; align-items: flex-start; }
}

/* ==========================================================================
   13. ZENITH SINGLE PRODUCT SYSTEM
   ========================================================================== */
.sp-container { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.sp-gallery { padding: var(--site-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.sp-image-wrapper { width: 100%; }
.sp-image-wrapper:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 4/5; }
.sp-image-wrapper:not(:nth-child(1)) { aspect-ratio: 3/4; }
.sp-image { width: 100%; height: 100%; object-fit: cover; }

.sp-info-wrapper { padding: calc(var(--site-gutter) * 1.5) var(--site-gutter); border-left: 1px solid var(--border-light); }
.sp-info-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2rem; max-width: 480px; margin: 0 auto; }

/* Typography */
.sp-breadcrumbs {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.sp-breadcrumbs a { color: inherit; }
.sp-breadcrumbs a:hover { color: var(--text-primary); }

.sp-title { font-size: 2.5rem; line-height: 1.1; margin: 0; }
.sp-price-wrap { font-size: 1.25rem; color: var(--text-secondary); }

.sp-short-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Action Area (Forms & Selectors) */
.sp-actions {
    margin-top: 1rem;
}
.sp-actions table.variations {
    width: 100%;
    border: none;
    margin: 0 0 1.5rem;
    display: block;
}
.sp-actions table.variations tbody { display: block; }
.sp-actions table.variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.sp-actions table.variations td {
    display: block;
    padding: 0;
}
.sp-actions label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
}
.sp-actions select {
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    background-color: transparent;
    border: 1px solid var(--border-light);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    transition: border-color 0.3s ease;
}
.sp-actions select:focus {
    border-color: var(--text-primary);
    outline: none;
}
.sp-actions .quantity {
    display: none !important; 
}
.sp-actions .single_add_to_cart_button {
    display: block; width: 100%; padding: 1.2rem;
    background-color: var(--text-primary); color: #fff;
    text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.9rem;
    border: 1px solid var(--text-primary); cursor: pointer; margin-top: 1rem;
}
.sp-actions .single_add_to_cart_button:hover { background: transparent; color: var(--text-primary); }
.single_add_to_cart_button.disabled { opacity: 0.5; cursor: not-allowed; }
.reset_variations {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: underline;
}

/* Single Product WhatsApp Button (Large) */
.sp-whatsapp-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 1.2rem; margin-top: 1rem;
    background-color: var(--color-whatsapp); color: #fff;
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 0.9rem;
    border: none; text-decoration: none; transition: 0.3s;
}
.sp-whatsapp-btn:hover { background-color: var(--color-whatsapp-dark); color: #fff; }
.sp-whatsapp-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Accordions */
.sp-accordion {
    margin-top: 3rem;
    border-top: 1px solid var(--border-light);
}
.sp-acc-item {
    border-bottom: 1px solid var(--border-light);
}
.sp-acc-header {
    width: 100%;
    padding: 1.2rem 0;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    color: var(--text-primary);
    transition: color 0.3s ease;
}
.sp-acc-header:hover { color: var(--color-accent); }
.sp-acc-content {
    height: 0;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.sp-acc-inner {
    padding-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Related Products */
.related-products-section {
    padding: 4rem var(--site-gutter);
    border-top: 1px solid var(--border-light);
}
.related-title {
    text-align: center;
    font-size: 1.5rem;
    font-family: var(--font-display);
    margin-bottom: 2.5rem;
}

@media (max-width: 991px) {
    .sp-container { grid-template-columns: 1fr; }
    .sp-gallery { display: flex; flex-direction: column; padding: 0; gap: 1px; }
    .sp-image-wrapper, .sp-image-wrapper:nth-child(1) { aspect-ratio: auto; height: auto; }
    .sp-info-wrapper { border-left: none; padding: 2rem 1.5rem 6rem; }
    .sp-info-sticky { position: static; max-width: 100%; }
    
    /* Mobile Sticky Footer */
    .mobile-sticky-bar {
        position: fixed; bottom: 0; left: 0; width: 100%;
        background: #fff; padding: 1rem 1.5rem;
        border-top: 1px solid var(--border-light);
        display: flex; justify-content: space-between; align-items: center;
        z-index: 1000; box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    }
    .msb-info { display: flex; flex-direction: column; line-height: 1.2; }
    .msb-title { font-size: 0.85rem; font-weight: 500; }
    .msb-price { font-size: 0.8rem; color: var(--text-secondary); }
    
    .sp-add-btn.msb-trigger {
        width: auto; padding: 0.75rem 1.5rem; margin: 0; font-size: 0.8rem;
        background: var(--text-primary); color: #fff; border: none; text-transform: uppercase;
    }
    
    .sp-actions .single_add_to_cart_button { display: none; } /* Hide duplicate button on mobile */
    .sp-whatsapp-btn { margin-bottom: 2rem; } /* Add space before footer */
}