/*
Theme Name: Aura Premium
Theme URI: https://antigravity.com/aura-premium
Author: Antigravity
Author URI: https://antigravity.com
Description: A world-class, premium WooCommerce theme with glassmorphism aesthetics and high-performance design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aura-premium
Tags: e-commerce, two-columns, left-sidebar, custom-colors, custom-menu, featured-images, full-width-template, theme-options

Aura Premium WordPress Theme, Copyright 2024-present Antigravity.
Aura Premium is distributed under the terms of the GNU GPL.

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

:root {
    --primary: #ff3cac;
    --secondary: #784ba0;
    --accent: #2b86c5;
    --background: #0f172a;
    --bg-rgb: 15, 23, 42;
    --card-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #f1f5f9;
    --text-muted: #a8b8cc; /* ≥4.5:1 on #0f172a — WCAG AA compliant */
    --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Explicit light mode (JS toggle or inline-script set attribute) */
[data-theme="light"] {
    --background: #f1f5f9;
    --bg-rgb: 241, 245, 249;
    --card-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(15, 23, 42, 0.1);
    --text-main: #0f172a;
    --text-muted: #475569;
}

/* No-JS fallback: honour OS light preference unless user explicitly chose dark */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --background: #f1f5f9;
        --bg-rgb: 241, 245, 249;
        --card-bg: rgba(255, 255, 255, 0.7);
        --glass-border: rgba(15, 23, 42, 0.1);
        --text-main: #0f172a;
        --text-muted: #475569;
    }
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: var(--transition);
    backdrop-filter: blur(10px);
}

.theme-toggle-btn:hover {
    transform: rotate(30deg) scale(1.1);
    border-color: var(--primary);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--background);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* WooCommerce main content wrapper spacing */
.aura-woo-wrapper {
    margin-top: 120px;
    margin-bottom: 80px;
}

/* Glassmorphism Utility */
.glass {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

/* ================================================
   MEESHO-STYLE HEADER
   ================================================ */
header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.3s ease;
}

header.site-header.scrolled {
    background: #ffffff !important;
    backdrop-filter: none;
    padding: 0;
    border-bottom: none;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.14) !important;
}

/* Remove all white-text overrides — header is now always on white */
header.site-header.scrolled .main-nav a,
header.site-header.scrolled .theme-toggle-btn,
header.site-header.scrolled .cart-contents,
header.site-header.scrolled .menu-toggle {
    color: #333333 !important;
}

.home header.site-header:not(.scrolled) .main-nav a,
.home header.site-header:not(.scrolled) .theme-toggle-btn,
.home header.site-header:not(.scrolled) .cart-contents,
.home header.site-header:not(.scrolled) .menu-toggle {
    color: #333333 !important;
}

/* Header main row */
.header-main {
    padding: 10px 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* ── Header Left (Logo + Search grouped) ── */
.header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 0;
}

/* ── Logo ── */
.logo {
    flex-shrink: 0;
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(to right, #f43397, #7b1fa2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Search Bar (no button — Enter pe submit) ── */
.header-search {
    flex: 1;
    max-width: 520px;
    min-width: 0;
}

.header-search form {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border: 1.5px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 0 12px;
    gap: 8px;
}

.header-search form:focus-within {
    border-color: #f43397;
    box-shadow: 0 0 0 2px rgba(244, 51, 151, 0.08);
}

.search-icon-inside {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    pointer-events: none;
}

.header-search input[type="search"] {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    color: #333;
    outline: none;
    font-family: var(--font-body);
    min-width: 0;
    /* remove native clear button in webkit */
    -webkit-appearance: none;
}

.header-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.header-search input[type="search"]::placeholder {
    color: #9e9e9e;
    font-size: 0.85rem;
}

/* ── Header Actions (right side — must not break) ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;   /* never shrink — prevents right-side overflow */
}

/* ── Header Icon Buttons (Profile / Cart) ── */
.header-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #333333 !important;
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-icon-btn:hover {
    color: #f43397 !important;
}

.header-icon-btn svg {
    display: block;
}

/* Cart count badge */
.cart-icon-wrap {
    position: relative;
    display: block;
    line-height: 1;
    padding: 4px 6px 0 0;
}

.cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: #f43397;
    color: #fff;
    font-size: 0.62rem;
    min-width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    line-height: 1;
    padding: 0 3px;
}

/* Theme toggle - keep existing but adapt to white header */
.theme-toggle-btn {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #333333;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition);
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    transform: rotate(30deg) scale(1.1);
    border-color: #f43397;
}

/* Hamburger menu button */
.menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #333333 !important;
    cursor: pointer;
    display: none;
    padding: 4px;
}

/* ── Mobile slide-in nav (always fixed, hidden by default) ── */
.main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    padding: 70px 30px 40px;
    z-index: 1001;
    border-left: 1px solid rgba(255,255,255,0.08);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}
.main-nav.active {
    transform: translateX(0);
}
.main-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #f1f5f9;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
}
.main-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}
.main-nav-overlay.active {
    display: block;
}
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.main-nav li a {
    display: block;
    padding: 12px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f1f5f9 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
}
.main-nav li a:hover {
    color: var(--primary) !important;
}

/* ── WooCommerce Category Navigation Bar ── */
.category-bar-wrap {
    background: #ffffff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1.5px solid #ebebeb;
    overflow: hidden;
}

.category-bar-wrap .container {
    padding: 0 20px;
}

/* woo-cat-nav — Swiper slider */
.cat-bar-swiper {
    width: 100%;
}

.cat-bar-swiper .swiper-slide {
    width: auto !important;
    flex-shrink: 0;
}

.woo-cat-nav .swiper-slide > a {
    display: block;
    padding: 11px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333333;
    white-space: nowrap;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 2.5px solid transparent;
    font-family: var(--font-body);
    text-decoration: none;
}

.woo-cat-nav .swiper-slide > a:hover,
.woo-cat-nav .swiper-slide.current-cat > a {
    color: #f43397;
    border-bottom-color: #f43397;
}

.hero .btn-secondary {
    color: #ffffff !important;
}

/* Footer Widget Styling */
.site-footer h4,
.site-footer .widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-main);
}

.site-footer ul {
    list-style: none;
    padding: 0;
}

.site-footer .widget ul {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer a {
    color: var(--text-muted);
    transition: var(--transition);
}

.site-footer a:hover {
    color: var(--primary);
}

.logo img {
    max-height: 66px;
    width: auto;
    display: block;
    -webkit-text-fill-color: initial;
    /* Reset gradient fill for image */
}

.logo .custom-logo-link {
    display: block;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}

/* main-nav ul — default (inside category bar) */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 0;
    padding: 0;
    margin: 0;
}

.main-nav a:hover {
    color: #f43397;
}

/* ── Main content offset — account for fixed header (header-main ~65px + category-bar ~44px) ── */
.site-main,
main#primary {
    padding-top: 110px;
}

/* Shop / category pages — fixed header offset + small breathing room */
.woocommerce main#primary,
.woocommerce-page main#primary {
    padding-top: 155px;
}

/* Mobile Header Improvements */
@media (max-width: 991px) {
    /* On mobile hide search + category bar */
    .header-search {
        display: none;
    }

    .header-icon-btn span {
        display: none;
    }

    .category-bar-wrap {
        display: none;
    }

    .menu-toggle {
        display: flex !important;
    }

    /* placeholder — nav styles moved outside media query below */

    .site-main,
    main#primary {
        padding-top: 65px;
    }

    /* Prevent header-left from overflowing logo */
    .header-left {
        min-width: 0;
        overflow: hidden;
    }
}

/* Glass Card Enhanced Hover */
.glass:hover {
    border-color: var(--primary);
    box-shadow: 0 15px 45px rgba(var(--primary-rgb), 0.15);
}

.cat-card:hover img {
    transform: scale(1.1);
}

.cat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent);
    z-index: 1;
}

/* ================================================
   TRUST BAR
   ================================================ */
.aura-trust-bar {
    padding: 0;
    background: var(--background);
}
.aura-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-top: 1.5px solid rgba(255, 60, 172, 0.35);
    border-bottom: 1.5px solid rgba(255, 60, 172, 0.35);
    border-radius: 0;
    padding: 14px 40px;
    background: rgba(255, 60, 172, 0.03);
    flex-wrap: wrap;
    row-gap: 12px;
}
.aura-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}
.aura-trust-item svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}
.aura-trust-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 60, 172, 0.3);
    margin: 0 32px;
}
@media (max-width: 600px) {
    .aura-trust-divider { display: none; }
    .aura-trust-inner { gap: 20px; border-radius: 20px; padding: 16px 24px; }
}

/* ================================================
   HOT CATEGORIES — ARCH STYLE
   ================================================ */
.hot-cats-swiper {
    width: 100%;
    padding-bottom: 16px !important;
}

.hot-cats-swiper .swiper-slide {
    width: 120px !important;
}

.hot-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 130px;
    transition: transform 0.3s ease;
}
.hot-cat-item:hover {
    transform: translateY(-6px);
}

.hot-cat-arch {
    width: 85px;
    height: 85px;
    border-radius: 100px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #ccc;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hot-cat-item:hover .hot-cat-arch {
    border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.25);
}

.hot-cat-arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
    padding: 12px;
}
.hot-cat-item:hover .hot-cat-arch img {
    transform: scale(1.08);
}

.hot-cat-name {
    margin-top: 14px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    line-height: 1.3;
}

@media (max-width: 600px) {
    .hot-cat-item { width: 90px; }
    .hot-cat-arch { width: 80px; height: 80px; }
}

/* ================================================
   MEESHO-STYLE HERO SLIDER
   ================================================ */
.hero-swiper {
    position: relative;
    width: 100%;
    height: 62vh;
    min-height: 380px;
    max-height: 520px;
}

.hero-slide {
    position: relative;
    width: 100%;
    height: 100% !important;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* Background image — fills the full slide (models show on left) */
.hero-bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    object-position: top center;
    background-size: cover !important;
    background-position: top center !important;
}

/* Simple full-slide dark overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.hero-overlay::before {
    display: none;
}

/* Hero content base */
.hero-content {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 40px 80px;
    box-sizing: border-box;
}

/* Boxed layout — content area constrained to container width */
body.aura-layout-boxed .hero-content {
    max-width: 1200px;
    left: 50% !important;
    transform: translateX(-50%);
    padding: 40px 40px;
}

/* Full width layout — content spans edge to edge */
body.aura-layout-fullwidth .hero-content {
    max-width: 100%;
    left: 0 !important;
    transform: none;
    padding: 40px 80px;
}

/* Left alignment */
.slide-align-left .hero-content {
    align-items: flex-start;
    text-align: left;
}
.slide-align-left .hero-btns { justify-content: flex-start; }

/* Center alignment */
.slide-align-center .hero-content {
    align-items: center;
    text-align: center;
}
.slide-align-center .hero-btns { justify-content: center; }

/* Right alignment */
.slide-align-right .hero-content {
    align-items: flex-end;
    text-align: right;
}
.slide-align-right .hero-btns { justify-content: flex-end; }

/* Hero Badge */
.hero-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(255, 167, 38, 0.18);
    border: 1px solid rgba(255, 167, 38, 0.7);
    border-radius: 50px;
    color: #ffa726;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Hero Title */
.hero-title {
    font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
    margin-bottom: 14px;
    line-height: 1.15;
    font-weight: 800;
    color: #ffffff !important;
    text-shadow: none;
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 100%;
    margin: 0 0 30px !important;
    text-shadow: none;
    font-weight: 400;
    line-height: 1.65;
}

/* Hero Buttons */
.hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-btns .btn-primary {
    background: #ffffff;
    color: #7b1fa2 !important;
    padding: 13px 38px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    letter-spacing: 0.3px;
}

.hero-btns .btn-primary:hover {
    background: #f5f5f5;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hero-btns .btn-secondary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.65);
    color: #ffffff !important;
    padding: 13px 38px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    backdrop-filter: none;
}

.hero-btns .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* Swiper pagination dots */
.hero-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #f43397;
    opacity: 1;
    width: 24px;
    border-radius: 10px;
    transition: var(--transition);
}

.hero-swiper .swiper-pagination {
    z-index: 20;
    bottom: 22px !important;
}

/* Swiper arrows */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    transition: background 0.2s ease;
    z-index: 20;
}

.hero-swiper .swiper-button-next:after,
.hero-swiper .swiper-button-prev:after {
    font-size: 1.2rem;
    font-weight: 700;
}

.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
    background: #f43397;
}

/* Slide content entrance animation */
.hero-slide .hero-content > * {
    opacity: 0;
    transform: translateY(30px);
}

.hero-slide.swiper-slide-active .hero-content > * {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Mobile hero adjustments */
@media (max-width: 768px) {
    .hero-swiper {
        height: 70vw;
        min-height: 320px;
        max-height: 420px;
    }

    .hero-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(74, 20, 140, 0.80) 48%,
            rgba(55, 0, 120, 0.96) 100%
        );
    }

    .hero-content {
        position: absolute !important;
        bottom: 0;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 24px 24px 28px !important;
        justify-content: flex-end !important;
    }

    .hero-title {
        font-size: clamp(1.3rem, 5vw, 2rem) !important;
    }

    .hero-subtitle {
        font-size: 0.88rem;
    }

    .hero-btns .btn-primary,
    .hero-btns .btn-secondary {
        padding: 10px 26px;
        font-size: 0.85rem;
    }
}

.hero-slide.swiper-slide-active .hero-badge {
    animation-delay: 0.2s;
}

.hero-slide.swiper-slide-active .hero-title {
    animation-delay: 0.4s;
}

.hero-slide.swiper-slide-active .hero-subtitle {
    animation-delay: 0.6s;
}

.hero-slide.swiper-slide-active .hero-btns {
    animation-delay: 0.8s;
}

/* WooCommerce Overrides */
.woocommerce ul.products li.product {
    padding: 15px !important;
    overflow: hidden;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.2);
}

.woocommerce ul.products li.product h2 {
    font-size: 1.1rem !important;
    margin: 15px 0 10px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 10px 0 5px !important;
    color: var(--text-main) !important;
    font-size: 1rem !important;
}

.woocommerce ul.products li.product .price {
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
}

.woocommerce ul.products li.product a.button {
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border) !important;
    border-radius: 50px !important;
    color: var(--text-main) !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    width: 100%;
    text-align: center;
    transition: var(--transition);
}

.woocommerce ul.products li.product a.button:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.4);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: linear-gradient(to right, var(--primary), var(--secondary));
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: linear-gradient(to right, var(--secondary), var(--primary));
    transform: scale(1.05);
}

/* FAQ Section Styles */
.faq-accordion details[open] {
    border-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.05);
}

.faq-accordion details[open] .faq-icon {
    transform: rotate(45deg);
    color: var(--primary);
}

.faq-accordion summary::-webkit-details-marker {
    display: none;
}

.faq-accordion summary {
    list-style: none;
}

/* Testimonial Enhancements */
.testimonial-card:hover {
    transform: translateY(-10px);
    border-top-width: 8px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .testimonial-card:hover {
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* My Account Login Styles */
.woocommerce-account #customer_login {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2 {
    width: 100% !important;
    max-width: 550px !important;
    float: none !important;
}

.woocommerce-account form.login,
.woocommerce-account form.register {
    border: 1px solid var(--glass-border) !important;
    padding: 50px !important;
    border-radius: 20px !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.woocommerce-account form.login h2,
.woocommerce-account .u-column1.col-1 h2,
.woocommerce-account .entry-header h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5rem;
    font-weight: 800;
}

.woocommerce-account .woocommerce-Input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    border-radius: 12px !important;
    padding: 15px 20px !important;
    font-family: var(--font-body) !important;
    transition: var(--transition) !important;
    width: 100% !important;
}

.woocommerce-account .woocommerce-Input:focus {
    border-color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    outline: none !important;
}

.woocommerce-account .woocommerce-form-login__submit {
    width: 100% !important;
    margin-top: 25px !important;
    background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.woocommerce-account .woocommerce-form-login__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.4);
}

.woocommerce-account .woocommerce-form-login__rememberme {
    display: block;
    margin-bottom: 15px;
    color: var(--text-muted);
}

.woocommerce-account .lost_password {
    text-align: center;
    margin-top: 20px;
    color: var(--text-muted);
}

.woocommerce-account .lost_password a:hover {
    color: var(--primary);
}

/* --- MOBILE APP FEEL RESPONSIVENESS --- */
@media (max-width: 768px) {
    .container {
        padding: 0 10px !important;
    }

    header.site-header {
        padding: 8px 0;
        background: rgba(0, 0, 0, 0.8) !important;
        backdrop-filter: blur(15px);
    }

    .logo img,
    .logo {
        max-height: 30px !important;
        font-size: 1.4rem !important;
    }

    .header-icons {
        gap: 12px !important;
    }

    .hero-swiper {
        height: 80vh !important;
    }

    .hero-title {
        font-size: clamp(2.2rem, 8vw, 2.8rem) !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
    }

    .hero-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 30px !important;
        line-height: 1.5 !important;
    }

    .hero-badge {
        font-size: 0.7rem !important;
        margin-bottom: 15px !important;
    }

    .hero-btns {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .hero-btns .btn-primary,
    .hero-btns .btn-secondary {
        width: 100%;
        padding: 14px 20px !important;
    }

    .hero-swiper .swiper-button-next,
    .hero-swiper .swiper-button-prev {
        display: none !important;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
    .container {
        padding: 0 12px !important;
    }
    .header-icons {
        gap: 8px !important;
    }
    .main-nav {
        width: 100% !important;
    }
}

/* ── Homepage sections responsive ── */
@media (max-width: 768px) {

    /* Testimonials grid: 1 column */
    .testimonial-card {
        min-width: 0;
    }

    /* Newsletter form: stack vertically */
    .newsletter-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .newsletter-form input[type="email"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    .newsletter-form button {
        width: 100% !important;
        padding: 16px !important;
    }

    /* Section headings */
    .hot-cats-section h2,
    .featured-products h2,
    .aura-faq h2,
    .newsletter h2 {
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
    }

    /* Section padding */
    .hot-cats-section,
    .aura-faq,
    .newsletter {
        padding-left: 0;
        padding-right: 0;
    }

    /* Testimonials: single column */
    .testimonials-grid,
    [style*="grid-template-columns: repeat(auto-fit, minmax(320px"] {
        grid-template-columns: 1fr !important;
    }

    /* Trust bar */
    .aura-trust-bar {
        padding: 14px 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   SHOP LAYOUT
═══════════════════════════════════════════════════════ */
.shop-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding-top: 32px;
}
.shop-main { flex: 1; min-width: 0; }

/* ═══════════════════════════════════════════════════════
   SHOP SIDEBAR — PROFESSIONAL FILTER PANEL
═══════════════════════════════════════════════════════ */
.shop-sidebar {
    width: 272px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
}

/* No outer box on the widget wrapper */
.shop-sidebar .widget.widget_block {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

/* WooCommerce sets its own inline background-color — reset it so only the widget card shows */
.shop-sidebar .wp-block-woocommerce-product-filters {
    background: transparent !important;
    padding: 0 !important;
}

/* "Filters" h2 — direct child of the product-filters block */
.shop-sidebar h2.wp-block-heading {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--text-main) !important;
    padding: 18px 20px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--glass-border);
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.shop-sidebar h2.wp-block-heading::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background: var(--primary);
    border-radius: 3px;
    flex-shrink: 0;
}

/* Section h3 headings (Price / Rating / Size …)
   Use !important because blocks add inline margin styles */
.shop-sidebar h3.wp-block-heading {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin: 0 0 12px !important;
}

/* Each filter section gets padding + divider */
.shop-sidebar .wp-block-woocommerce-product-filter-price,
.shop-sidebar .wp-block-woocommerce-product-filter-rating,
.shop-sidebar .wp-block-woocommerce-product-filter-attribute,
.shop-sidebar .wp-block-woocommerce-product-filter-taxonomy,
.shop-sidebar .wp-block-woocommerce-product-filter-status,
.shop-sidebar .wp-block-woocommerce-product-filter-active {
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
}
.shop-sidebar .wp-block-woocommerce-product-filter-status {
    border-bottom: none;
}

/* ── Checkboxes ──
   WooCommerce uses CSS vars for checkbox appearance.
   We override both the vars AND the ::before visual box. */
.shop-sidebar .wc-block-product-filter-checkbox-list__items {
    font-size: 14px;
}

/* Hide the default faint ::before bg — we draw our own border */
.shop-sidebar .wc-block-product-filter-checkbox-list__input-wrapper::before {
    display: none !important;
}

/* The actual input box */
.shop-sidebar input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
    width: 17px !important;
    height: 17px !important;
    border-radius: 5px !important;
    border: 2px solid rgba(148, 163, 184, 0.5) !important;
    background: transparent !important;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    cursor: pointer;
}
.shop-sidebar input[type="checkbox"].wc-block-product-filter-checkbox-list__input:hover {
    border-color: var(--primary) !important;
}
.shop-sidebar input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Checkmark SVG — show in white over the pink fill */
.shop-sidebar svg.wc-block-product-filter-checkbox-list__mark {
    color: #fff !important;
    border-radius: 4px;
}

/* Checkbox item row hover */
.shop-sidebar .wc-block-product-filter-checkbox-list__item {
    border-radius: 7px;
    transition: background 0.12s;
}
.shop-sidebar .wc-block-product-filter-checkbox-list__item:hover {
    background: rgba(255, 60, 172, 0.07);
}

/* Label text */
.shop-sidebar .wc-block-product-filter-checkbox-list__label {
    gap: 10px !important;
    font-size: 0.875rem;
    color: var(--text-main);
    cursor: pointer;
    padding: 5px 4px;
}
.shop-sidebar .wc-block-product-filter-checkbox-list__text-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Count badge */
.shop-sidebar .wc-block-product-filter-checkbox-list__count {
    font-size: 0.7rem !important;
    font-weight: 600;
    color: var(--text-muted) !important;
    background: var(--glass-border) !important;
    padding: 1px 7px;
    border-radius: 50px;
    white-space: nowrap;
}

/* ── Price filter ── */

/* Set WooCommerce price slider CSS vars for track + thumb colours */
.shop-sidebar .wc-block-product-filter-price-slider__range {
    --wc-product-filter-price-slider: var(--primary);
    --wc-product-filter-price-slider-handle: #fff;
    --wc-product-filter-price-slider-handle-border: var(--primary);
    margin: 2px 0 0;
}

/* Stacked layout: slider on top, inputs below — tight spacing */
.shop-sidebar .wc-block-product-filter-price-slider__content {
    row-gap: 4px !important;
}
.shop-sidebar .wc-block-product-filter-price-slider__left.text,
.shop-sidebar .wc-block-product-filter-price-slider__right.text {
    margin-top: 15px;
}

/* Price text inputs */
.shop-sidebar .wc-block-product-filter-price-slider__left input[type="text"],
.shop-sidebar .wc-block-product-filter-price-slider__right input[type="text"],
.shop-sidebar .wc-block-product-filter-price-slider .text input[type="text"] {
    background: var(--glass-border) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    padding: 5px 8px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    max-width: 80px !important;
    text-align: center;
    transition: border-color 0.2s;
}
.shop-sidebar .wc-block-product-filter-price-slider__left input[type="text"]:focus,
.shop-sidebar .wc-block-product-filter-price-slider__right input[type="text"]:focus,
.shop-sidebar .wc-block-product-filter-price-slider .text input[type="text"]:focus {
    outline: none !important;
    border-color: var(--primary) !important;
}

/* range-bar track container — fix width so thumbs sit correctly */
.shop-sidebar .wc-block-product-filter-price-slider__range .range-bar {
    position: relative;
    height: 4px;
    width: 100%;
    border-radius: 4px;
}

/* Fix WordPress global flex gap interfering with filter sections */
.shop-sidebar .wp-block-woocommerce-product-filters.is-layout-flex {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
}

/* ── Removable active filter chips ── */
.shop-sidebar .wc-block-product-filter-removable-chips__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.shop-sidebar .wc-block-product-filter-removable-chips__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 60, 172, 0.1);
    color: var(--primary);
    border: 1px solid rgba(255, 60, 172, 0.25);
    border-radius: 50px;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background 0.15s;
}
.shop-sidebar .wc-block-product-filter-removable-chips__item:hover {
    background: rgba(255, 60, 172, 0.2);
}
.shop-sidebar .wc-block-product-filter-removable-chips__remove {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.shop-sidebar .wc-block-product-filter-removable-chips__remove:hover { opacity: 1; }

/* Clear filters button */
.shop-sidebar .wc-block-product-filter-clear-button .wp-block-button__link {
    font-size: 0.78rem !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
}

/* ── Light mode ── */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .shop-sidebar input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
        border-color: rgba(15, 23, 42, 0.25) !important;
    }
}
[data-theme="light"] .shop-sidebar input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
    border-color: rgba(15, 23, 42, 0.25) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .shop-layout { flex-direction: column; gap: 24px; }
    .shop-sidebar { width: 100%; position: static; max-height: none; }
}
@media (max-width: 640px) {
    .shop-sidebar { display: none; }
}

/* Universal Cart Checkout Button Fix */
.wc-proceed-to-checkout a, .wc-proceed-to-checkout button, a.checkout-button, .button.checkout, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; color: #fff !important; padding: 18px 45px !important; border-radius: 50px !important; display: inline-block !important; min-width: 250px !important; text-align: center !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; margin-top: 25px !important; box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.4) !important; text-decoration: none !important; position: relative !important; z-index: 10 !important; }

/* ── Blog Index & Grid ─────────────────────────────────────────────────── */
.blog-header {
    background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.15), transparent 40%),
                radial-gradient(circle at bottom left, rgba(var(--accent-rgb), 0.1), transparent 40%);
    padding: 100px 0 40px;
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 40px;
}

.blog-title {
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 15px;
    background: linear-gradient(to right, var(--text-main), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
}

.blog-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.blog-container {
    margin-bottom: 120px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 40px;
}

.blog-post-card {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    transition: var(--transition);
}

.blog-post-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.post-thumbnail {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-post-card:hover .post-thumbnail img {
    transform: scale(1.1);
}

.post-category {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
}

.post-category a {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary) !important;
}

.post-entry-content {
    padding: 35px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.post-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-meta .sep {
    margin: 0 8px;
    opacity: 0.4;
}

.post-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
}

.post-title a:hover {
    color: var(--primary);
}

.post-excerpt {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.read-more-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--primary) !important;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.read-more-btn svg {
    transition: transform 0.3s ease;
}

.read-more-btn:hover svg {
    transform: translateX(5px);
}

/* Pagination */
.blog-pagination {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

.pagination .nav-links {
    display: flex;
    gap: 12px;
}

.pagination .page-numbers {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    text-decoration: none;
    color: var(--text-main);
}

/* ── Single Blog Post Page ─────────────────────────────────────────────── */
body.single {
    background-color: var(--background) !important;
}

.single-post-article {
    background: var(--background);
    color: var(--text-main);
    min-height: 100vh;
}

.single-post-hero {
    padding: 160px 0 80px;
    background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.12), transparent 50%);
    border-bottom: 1px solid var(--glass-border);
}

.post-breadcrumb { margin-bottom: 30px; }

.post-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}

.post-breadcrumb a:hover { color: var(--primary); }

.single-post-cats { margin-bottom: 25px; }

.single-post-cats a {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary) !important;
    margin-right: 8px;
}

.single-post-title {
    font-size: clamp(2rem, 6vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 40px;
    max-width: 900px;
}

.single-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.meta-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid var(--primary) !important;
    object-fit: cover;
}

.author-info { display: flex; flex-direction: column; gap: 3px; }
.author-name { font-weight: 700; font-size: 0.9rem; color: var(--text-main); }
.post-date { font-size: 0.8rem; color: var(--text-muted); }

.meta-read {
    font-size: 0.82rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 600;
}

/* Featured Image */
.single-post-featured-img { background: var(--background); }

.single-post-featured-img .featured-img {
    width: 100%;
    max-height: 550px;
    object-fit: cover;
    border-radius: 0 0 30px 30px;
    border: 1px solid var(--glass-border);
    display: block;
}

/* Content Area */
.single-post-body { padding: 80px 0 120px; }

.single-post-content {
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--text-muted);
}

.single-post-content p { margin-bottom: 1.8rem; }

.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
    color: var(--text-main);
    font-weight: 800;
    margin: 2.5rem 0 1rem;
    line-height: 1.3;
}

.single-post-content h2 { font-size: 1.9rem; }
.single-post-content h3 { font-size: 1.5rem; }
.single-post-content h4 { font-size: 1.2rem; }

.single-post-content img {
    border-radius: 20px;
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
    border: 1px solid var(--glass-border);
}

.single-post-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(var(--primary-rgb), 0.4);
    text-underline-offset: 3px;
}

.single-post-content blockquote {
    border-left: 4px solid var(--primary);
    padding: 20px 30px;
    margin: 2rem 0;
    background: rgba(var(--primary-rgb), 0.06);
    border-radius: 0 16px 16px 0;
    font-style: italic;
    font-size: 1.15rem;
}

/* Post Tags */
.single-post-tags {
    max-width: 780px;
    margin: 50px auto 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 40px;
    border-top: 1px solid var(--glass-border);
}

.tags-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.tag-pill {
    padding: 6px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: var(--transition);
}

.tag-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
}

/* Post Navigation */
.single-post-nav {
    max-width: 780px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.post-nav-card {
    padding: 25px 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: var(--transition);
}

.post-nav-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.post-nav-card.text-right { text-align: right; }

.nav-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
}

.text-right .nav-label { justify-content: flex-end; }

.nav-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Comments Section */
.single-post-comments {
    max-width: 780px;
    margin: 60px auto 0;
    padding-top: 60px;
    border-top: 1px solid var(--glass-border);
}

@media (max-width: 768px) {
    .single-post-hero { padding: 130px 0 60px; }
    .single-post-title { font-size: clamp(1.8rem, 7vw, 2.5rem); }
    .single-post-nav { grid-template-columns: 1fr; }
    .single-post-meta { flex-direction: column; align-items: flex-start; }
}

/* ── Comment Section Premium Styles ───────────────────────────────────── */
.single-post-comments .comments-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 40px;
    color: var(--text-main);
}

.single-post-comments ol.commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.single-post-comments ol.commentlist li.comment {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(10px);
}

/* Side-by-side avatar + content */
.single-post-comments .comment-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.single-post-comments .comment-text {
    flex: 1;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.single-post-comments img.avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 2px solid var(--primary) !important;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.single-post-comments .comment-author b,
.single-post-comments .comment-author .fn,
.single-post-comments .comment-author a {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main) !important;
}

.single-post-comments .comment-metadata,
.single-post-comments .comment-metadata a {
    font-size: 0.78rem;
    color: var(--text-muted) !important;
}

.single-post-comments .comment-content p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.97rem;
}

.single-post-comments .reply a {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary) !important;
    margin-top: 15px;
    display: inline-block;
}

/* Comment Form */
.single-post-comments #respond {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(15px);
    margin-top: 40px;
}

.single-post-comments #reply-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-main);
}

.single-post-comments .comment-notes,
.single-post-comments #respond p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 25px;
}

.single-post-comments .comment-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.single-post-comments .comment-form textarea,
.single-post-comments .comment-form input[type="text"],
.single-post-comments .comment-form input[type="email"],
.single-post-comments .comment-form input[type="url"] {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    color: var(--text-main) !important;
    font-size: 0.95rem !important;
    font-family: var(--font-body) !important;
    outline: none !important;
    resize: vertical;
    margin-bottom: 20px;
    transition: border-color 0.2s ease !important;
}

.single-post-comments .comment-form textarea { min-height: 150px; }

.single-post-comments .comment-form textarea:focus,
.single-post-comments .comment-form input:focus {
    border-color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.single-post-comments .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 25px;
}

.single-post-comments .form-submit #submit {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: #fff !important;
    border: none !important;
    padding: 18px 45px !important;
    border-radius: 50px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3) !important;
}

.single-post-comments .form-submit #submit:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.5) !important;
}

@media (max-width: 768px) {
    .single-post-comments #respond { padding: 25px; }
}

/* ==========================================================================
   WordPress Required CSS Classes
   ========================================================================== */

/* Alignment */
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}
.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

/* Captions */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5em;
}
.wp-caption img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.wp-caption-text {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    text-align: center;
    margin-top: 0.5em;
}

/* Gallery caption */
.gallery-caption {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    text-align: center;
    display: block;
}

/* Sticky post */
.sticky {
    border-left: 4px solid var(--primary, #ff3cac);
    padding-left: 1em;
}

/* Comment author highlight */
.bypostauthor > .comment-body {
    border-left: 3px solid var(--primary, #ff3cac);
    padding-left: 1em;
}

/* Screen reader text — visually hidden but accessible */
.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;
}
.screen-reader-text:focus {
    background-color: var(--card-bg, #1a1a2e);
    clip: auto !important;
    clip-path: none;
    color: var(--text-main, #fff);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}



/* ── Social Buttons (Footer) ── */
.aura-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s ease;
}
.aura-social-btn:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
}
.aura-social-btn.aura-social-twitter:hover   { background: #000; }
.aura-social-btn.aura-social-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.aura-social-btn.aura-social-facebook:hover  { background: #1877f2; }

/* ── Footer Layout ── */
.site-footer {
    padding: 60px 0;
    border-top: 1px solid var(--glass-border);
    margin-top: 80px;
}
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}
.footer-tagline {
    color: var(--text-muted);
    margin-top: 15px;
}
.footer-links {
    list-style: none;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-bottom {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid var(--glass-border);
    padding-top: 40px;
}
.footer-copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.social-links {
    display: flex;
    gap: 12px;
}

/* ── Scroll-to-top Button ── */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: var(--transition);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
}

/* ── Blog: Featured First Post (home.php) ── */
.blog-featured-post {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
    border-radius: var(--radius, 12px);
    overflow: hidden;
}
.blog-featured-post .post-thumbnail {
    height: 100%;
    min-height: 300px;
}
.blog-featured-post .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-featured-post .post-entry-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 40px 40px 0;
}
.blog-featured-post .post-title {
    font-size: 1.75rem;
    margin: 10px 0 15px;
}
@media (max-width: 768px) {
    .blog-featured-post {
        grid-template-columns: 1fr;
    }
    .blog-featured-post .post-entry-content {
        padding: 24px;
    }
}

/* ── Newsletter Plugin (Newsletter by Stefano Lissa) form styling ── */
.newsletter-form-wrap .tnp {
    width: 100%;
}
.newsletter-form-wrap .tnp form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.newsletter-form-wrap .tnp-field {
    margin: 0 !important;
    flex: 1;
    min-width: 200px;
}
.newsletter-form-wrap .tnp-field-button {
    flex: 0 !important;
    text-align: center !important;
}
.newsletter-form-wrap .tnp-field label {
    display: none;
}
.newsletter-form-wrap .tnp-email {
    width: 100% !important;
    padding: 16px 24px !important;
    border-radius: 50px !important;
    border: 1px solid var(--glass-border) !important;
    background: rgba(255,255,255,0.03) !important;
    color: var(--text-main) !important;
    outline: none !important;
    font-size: 1rem !important;
    font-family: var(--font-body) !important;
    box-shadow: none !important;
}
.newsletter-form-wrap .tnp-email::placeholder {
    color: var(--text-muted);
}
.newsletter-form-wrap .tnp-email:focus {
    border-color: var(--primary) !important;
}
.newsletter-form-wrap .tnp-submit {
    padding: 16px 36px !important;
    border-radius: 50px !important;
    border: none !important;
    background: linear-gradient(to right, var(--primary), var(--secondary)) !important;
    font-weight: 800 !important;
    font-family: var(--font-body) !important;
    color: #fff !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.85rem !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
.newsletter-form-wrap .tnp-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.aura-404-wrap {
    padding: 80px 0;
    text-align: center;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aura-404-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
}

.aura-404-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    margin: 20px 0 15px;
}

.aura-404-text {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto 40px;
}

.aura-404-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.aura-404-search {
    margin-top: 60px;
    max-width: 480px;
    width: 100%;
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments-area {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--glass-border);
}

.comments-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.comment-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.no-comments {
    color: var(--text-muted);
}

.comment-reply-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 24px;
}

/* ── Front-page section layout ──────────────────────────────────────────── */
.hot-cats-section { padding: 60px 0 30px; background: var(--background); }
.aura-fp-section  { padding: 30px 0 60px; background: var(--background); }

.aura-section-header   { text-align: center; margin-bottom: 50px; }
.aura-section-title    { font-size: 2rem; font-weight: 800; }
.aura-section-subtitle { color: var(--text-muted); margin-top: 10px; }
.aura-section-divider  { width: 60px; height: 4px; background: var(--primary); margin: 24px auto 0; border-radius: 50px; }

/* ── Testimonials ───────────────────────────────────────────────────────── */
.testimonials      { padding: 30px 0 60px; background: var(--background); max-width: 1200px; margin: 0 auto; }
.aura-testo-header { text-align: center; margin-bottom: 80px; }
.aura-testo-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }

.testimonial-card { padding: clamp(20px,4vw,50px) clamp(16px,3vw,40px); transition: var(--transition); position: relative; }

.aura-testo-quote {
    font-family: serif;
    font-size: 6rem;
    position: absolute;
    top: 10px;
    left: 30px;
    line-height: 1;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.2;
    pointer-events: none;
}
.aura-testo-stars  { color: #fbbf24; font-size: 1.5rem; margin-bottom: 25px; letter-spacing: 2px; }
.aura-testo-text   { color: var(--text-main); font-size: 1.1rem; line-height: 1.8; margin-bottom: 40px; font-style: italic; }
.aura-testo-author { display: flex; align-items: center; gap: 20px; }
.aura-testo-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; padding: 3px; }
.aura-testo-name   { font-size: 1.25rem; font-weight: 800; color: var(--text-main); margin: 0; }
.aura-testo-role   { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.aura-faq        { background: var(--background); max-width: 1200px; margin: 0 auto; padding: 0 0 40px; }
.aura-faq-header { text-align: center; margin-bottom: 70px; }
.aura-faq-subtitle { color: var(--text-muted); margin-top: 15px; font-size: 1.1rem; }

.faq-accordion details {
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}
.faq-accordion summary {
    padding: clamp(16px,3vw,25px) clamp(16px,3vw,40px);
    font-size: clamp(0.95rem,2vw,1.2rem);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.faq-icon { transition: transform 0.3s ease; flex-shrink: 0; margin-left: 12px; }
.faq-accordion details > div {
    padding: 0 clamp(16px,3vw,40px) clamp(16px,2vw,30px);
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1rem;
}

/* ── Newsletter ─────────────────────────────────────────────────────────── */
.newsletter       { background: var(--background); }
.newsletter-inner {
    padding: clamp(30px,5vw,50px) clamp(20px,4vw,50px);
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 60, 172, 0.05), rgba(43, 134, 197, 0.05));
}
.newsletter-glow {
    position: absolute;
    top: -50%;
    right: -25%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: 0.1;
    filter: blur(100px);
    pointer-events: none;
}
.newsletter-title    { font-size: clamp(1.8rem,5vw,3rem); font-weight: 800; margin-bottom: 20px; }
.newsletter-subtitle { color: var(--text-muted); max-width: 600px; margin: 0 auto 40px; font-size: clamp(1rem,2vw,1.2rem); }
.newsletter-form-wrap { max-width: 600px; margin: 0 auto; }

/* ── Browse pages (Categories / Brands) ─────────────────────────────────── */
.aura-browse-page { padding: 60px 0; }
.aura-page-title  { font-size: 2rem; margin-bottom: 40px; }
.aura-browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.aura-no-results  { color: var(--text-muted); }

.aura-cat-card {
    display: block;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.aura-cat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.14); transform: translateY(-3px); }
.aura-cat-card img   { width: 100%; height: 150px; object-fit: contain; padding: 16px; background: #fff; }
.aura-cat-card-placeholder {
    width: 100%;
    height: 150px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}
.aura-cat-card-body      { padding: 14px 16px; border-top: 1px solid #f0f0f0; }
.aura-cat-card-body h3   { font-size: 0.95rem; margin: 0 0 4px; color: #1a1a1a; }
.aura-cat-card-body span { font-size: 0.8rem; color: #888; }

.aura-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 24px 16px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.aura-brand-card:hover      { box-shadow: 0 8px 24px rgba(0,0,0,0.14); transform: translateY(-3px); }
.aura-brand-card img        { max-height: 70px; max-width: 100%; object-fit: contain; margin-bottom: 12px; }
.aura-brand-card .brand-icon  { font-size: 2.5rem; margin-bottom: 12px; }
.aura-brand-card .brand-name  { font-size: 0.95rem; font-weight: 600; color: #1a1a1a; }
.aura-brand-card .brand-count { font-size: 0.8rem; color: #888; margin-top: 4px; }