/*
Theme Name: Techfy Theme
Theme URI: https://techfy.gr
Author: Techfy Web Studio
Author URI: https://techfy.gr
Description: Custom, high-conversion, fully customizable WooCommerce Theme for Techfy (Phone Cases & Tech Accessories) with Customizer support, Finder widget, badges, enhanced footer, and dark modern purple gaming/anime aesthetic.
Version: 2.1.2.16
License: GNU General Public License v2 or later
Text Domain: techfy
*/

.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 !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    height: auto;
    width: auto;
    padding: 10px 14px;
    z-index: 100000;
}

:root {
    --primary-color: #6C2BD9;
    --primary-hover: #5B21B6;
    --primary-light: #8B5CF6;
    --primary-gradient: linear-gradient(135deg, #6C2BD9 0%, #9333EA 100%);
    --header-bg: #1B0A2A;
    --header-dark: #12051E;
    --dark-surface: #1E122E;
    --accent-purple: #7C3AED;
    --accent-glow: rgba(124, 58, 237, 0.4);
    --bg-light: #F8FAFC;
    --text-dark: #0F172A;
    --text-muted: #64748B;
    --text-white: #FFFFFF;
    --border-color: #E2E8F0;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --hover-shadow: 0 20px 25px -5px rgba(108, 43, 217, 0.15), 0 8px 10px -6px rgba(108, 43, 217, 0.1);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Poppins', 'Inter', sans-serif;
    --container-max: 1280px;
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Top Announcement Bar
   ========================================================================== */
.top-bar {
    background-color: var(--header-dark);
    color: #E2E8F0;
    font-size: 13px;
    padding: 8px 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.top-bar-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.top-bar svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ==========================================================================
   Main Header
   ========================================================================== */
.site-header {
    background-color: var(--header-bg);
    color: var(--text-white);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.main-header {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Logo */
.site-branding .custom-logo-link {
    display: flex;
    align-items: center;
}

.site-branding img {
    max-height: 48px;
    width: auto;
}

.site-title-text {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-title-text span {
    color: var(--primary-light);
}

/* Header Search Form */
.header-search {
    flex: 1;
    max-width: 520px;
    position: relative;
}

.header-search form {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.header-search input[type="search"] {
    width: 100%;
    padding: 12px 50px 12px 20px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.header-search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.header-search input[type="search"]:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3);
}

.header-search button {
    position: absolute;
    right: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.header-search button:hover {
    background-color: var(--primary-hover);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}

.header-action-item:hover {
    color: #fff;
}

.header-action-item svg {
    width: 22px;
    height: 22px;
}

.header-cart-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-cart-box:hover {
    background: rgba(255, 255, 255, 0.12);
}

.cart-badge {
    position: absolute;
    top: -6px;
    left: 14px;
    background-color: var(--primary-light);
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.cart-details {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cart-details .cart-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.cart-details .cart-total {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

/* ==========================================================================
   Navigation Bar
   ========================================================================== */
.site-navigation-bar {
    background-color: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-container {
    display: flex;
    align-items: stretch;
    height: 52px;
}

/* Categories Trigger */
.categories-btn-wrapper {
    position: relative;
}

.categories-toggle-btn {
    height: 100%;
    background-color: var(--primary-color);
    color: white;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.categories-toggle-btn:hover {
    background-color: var(--primary-hover);
}

/* Main Navigation Menu */
.main-nav {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 28px;
    align-items: center;
}

.main-nav ul li a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    padding: 14px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.main-nav ul li a:hover,
.main-nav ul li.current-menu-item > a {
    color: #fff;
}

/* ==========================================================================
   Hero Banner Section
   ========================================================================== */
.hero-section {
    position: relative;
    background: radial-gradient(circle at 80% 50%, #4C1D95 0%, #1E0A34 60%, #0D0417 100%);
    color: white;
    padding: 70px 0 90px 0;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.6;
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    color: #C084FC;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.hero-desc {
    font-size: 16px;
    color: #CBD5E1;
    max-width: 480px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    padding: 14px 34px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 25px var(--accent-glow);
    transition: all 0.3s ease;
}

.hero-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(108, 43, 217, 0.5);
}

.hero-mockup-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-mockup-img {
    max-height: 440px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-dots {
    display: flex;
    gap: 8px;
    margin-top: 30px;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
}

.hero-dot.active {
    background-color: var(--primary-light);
    width: 24px;
    border-radius: 4px;
}

/* ==========================================================================
   Features Badges (Value Proposition)
   ========================================================================== */
.features-section {
    background-color: #12051E;
    color: white;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(108, 43, 217, 0.15);
    border: 1px solid rgba(108, 43, 217, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A855F7;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 22px;
    height: 22px;
}

.feature-text h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #F1F5F9;
}

.feature-text p {
    font-size: 12px;
    color: #94A3B8;
}

/* ==========================================================================
   Phone Case Finder Widget (Interactive Box)
   ========================================================================== */
.finder-section {
    margin-top: 28px;
    position: relative;
    z-index: 10;
    margin-bottom: 40px;
}

.finder-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid #EEF2F6;
}

.finder-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.finder-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background-color: #F3E8FF;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.finder-icon svg {
    width: 28px;
    height: 28px;
}

.finder-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
}

.finder-header p {
    font-size: 13px;
    color: var(--text-muted);
}

.finder-form {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    max-width: 650px;
}

.finder-select-wrapper {
    position: relative;
    flex: 1;
}

.finder-select-wrapper select {
    width: 100%;
    padding: 12px 38px 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background-color: #FAFAFA;
    font-size: 14px;
    color: var(--text-dark);
    appearance: none;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.finder-select-wrapper select:focus {
    border-color: var(--primary-color);
    background-color: #fff;
}

.finder-select-wrapper::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #64748B;
    pointer-events: none;
}

.finder-submit-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 13px 26px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.finder-submit-btn:hover {
    background: var(--primary-hover);
}

/* ==========================================================================
   Category Cards Grid
   ========================================================================== */
.categories-showcase {
    padding: 30px 0 60px 0;
}

.section-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
}

.section-all-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.section-all-link:hover {
    color: var(--primary-color);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.category-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 26px 14px;
    text-align: center;
    border: 1px solid #EEF2F6;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
    border-color: #E9D5FF;
}

.category-icon-box {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    background-color: #F8FAFC;
    border: 1px solid #EDE9FE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.category-card:hover .category-icon-box {
    background-color: #F3E8FF;
    color: var(--primary-hover);
    transform: scale(1.05);
}

.category-icon-box svg {
    width: 30px;
    height: 30px;
}

.category-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-dark);
}

/* ==========================================================================
   Product Grid & WooCommerce Styling
   ========================================================================== */
.products-section {
    padding: 20px 0 60px 0;
}

ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.products li.product {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid #EEF2F6;
    padding: 16px;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 !important;
    width: 100% !important;
}

ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--hover-shadow);
    border-color: #DDD6FE;
}

ul.products li.product img {
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    object-fit: cover;
    width: 100%;
}

ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    padding: 0;
    line-height: 1.4;
}

ul.products li.product .price {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color) !important;
    margin-bottom: 12px;
}

ul.products li.product .button {
    margin-top: auto;
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-align: center;
    border: none;
}

ul.products li.product .button:hover {
    background: var(--primary-hover) !important;
}

/* ==========================================================================
   Enhanced Premium Footer
   ========================================================================== */
.site-footer {
    background-color: #0E0318;
    color: #94A3B8;
    position: relative;
    border-top: 1px solid rgba(124, 58, 237, 0.2);
    font-size: 14px;
}

/* Pre-Footer: Newsletter Box */
.footer-newsletter-wrap {
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.newsletter-card {
    background: linear-gradient(135deg, #1B0A2A 0%, #2A0845 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 18px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.newsletter-text h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
}

.newsletter-text h3 span {
    color: #A855F7;
}

.newsletter-text p {
    color: #CBD5E1;
    font-size: 14px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    flex: 1;
    max-width: 480px;
}

.newsletter-form input {
    flex: 1;
    padding: 13px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    outline: none;
    font-size: 14px;
}

.newsletter-form input:focus {
    border-color: #A855F7;
}

.newsletter-form button {
    background: #7C3AED;
    color: #fff;
    border: none;
    padding: 13px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s;
}

.newsletter-form button:hover {
    background: #6D28D9;
}

/* Footer Main Content */
.footer-main-content {
    padding-top: 50px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #7C3AED;
    border-radius: 2px;
}

.brand-desc {
    font-size: 13.5px;
    line-height: 1.6;
    margin: 14px 0 16px 0;
    color: #94A3B8;
}

.footer-contact-info p {
    margin-bottom: 6px;
    font-size: 13px;
    color: #CBD5E1;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #94A3B8;
    font-size: 13.5px;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-block;
}

.footer-col ul li a:hover {
    color: #C084FC;
    padding-left: 4px;
}

/* Social & Payments */
.footer-social-links {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-social-links a {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.footer-social-links a:hover {
    background: #7C3AED;
}

.payments-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #CBD5E1;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.payment-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pay-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

/* Sub-Footer Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.footer-security-badge {
    color: #10B981;
    font-weight: 600;
    font-size: 12px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-desc {
        margin: 0 auto 30px auto;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .finder-card {
        flex-direction: column;
        align-items: stretch;
    }
    .finder-form {
        max-width: 100%;
        flex-direction: column;
    }
    .newsletter-card {
        flex-direction: column;
        text-align: center;
    }
    .newsletter-form {
        width: 100%;
        max-width: 100%;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        gap: 16px;
    }
    .header-search {
        width: 100%;
        max-width: 100%;
    }
    .main-nav {
        display: none;
    }
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ==========================================================================
   Mobile-App Like Enhancements
   ========================================================================== */

/* Απόκρυψη της κάτω μπάρας σε Desktop / Tablet */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* Δημιουργία κενού στο κάτω μέρος για να μην κρύβεται περιεχόμενο */
    body {
        padding-bottom: 70px;
    }

    /* Sticky Bottom Bar */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        background: #12051E;
        border-top: 1px solid rgba(124, 58, 237, 0.3);
        justify-content: space-around;
        align-items: center;
        z-index: 9999;
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.4);
    }

    .mob-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #94A3B8;
        font-size: 11px;
        font-weight: 600;
        gap: 3px;
        flex: 1;
        height: 100%;
    }

    .mob-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .mob-nav-item:active, .mob-nav-item:hover {
        color: #C084FC;
    }

    .mob-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        background: #7C3AED;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        border-radius: 10px;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
    }

    /* Swipeable Touch Scroll για τις Κατηγορίες στα κινητά */
    .categories-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 12px !important;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .categories-grid::-webkit-scrollbar {
        display: none; /* Κρύβει την μπάρα κύλισης για καθαρό UI */
    }

    .category-card {
        min-width: 120px !important;
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 16px 10px !important;
    }

    /* 2 Στήλες για τα προϊόντα με άνετα κουμπιά */
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    ul.products li.product .button {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Hero Text Adjustments */
    .hero-title {
        font-size: 32px !important;
    }
}

/* ==========================================================================
   Hero 3D 3-Case Showcase
   ========================================================================== */
.hero-cases-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    perspective: 1000px;
    gap: 12px;
}

.hero-case-card {
    position: relative;
    border-radius: 28px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    cursor: pointer;
}

.hero-case-card img {
    border-radius: 28px;
    display: block;
    object-fit: cover;
}

/* Πλαϊνές Θήκες (Left & Right) */
.case-left, .case-right {
    width: 155px;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.7));
    opacity: 0.92;
    z-index: 1;
}

.case-left {
    transform: rotateY(8deg) scale(0.95);
}

.case-right {
    transform: rotateY(-8deg) scale(0.95);
}

/* Κεντρική Θήκη (Featured Main) */
.case-center {
    width: 190px;
    z-index: 5;
    transform: translateY(-12px) scale(1.05);
    filter: drop-shadow(0 20px 40px rgba(124, 58, 237, 0.55));
    animation: floatCase 4s ease-in-out infinite;
}

.case-center::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    border: 2px solid rgba(192, 132, 252, 0.6);
    pointer-events: none;
}

.case-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #A855F7, #6C2BD9);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Hover Interactive */
.hero-cases-stage:hover .case-left { transform: rotateY(0deg) translateX(-8px) scale(0.98); }
.hero-cases-stage:hover .case-right { transform: rotateY(0deg) translateX(8px) scale(0.98); }
.hero-cases-stage:hover .case-center { transform: translateY(-18px) scale(1.08); filter: drop-shadow(0 25px 45px rgba(168, 85, 247, 0.7)); }

@keyframes floatCase {
    0%, 100% { transform: translateY(-12px) scale(1.05); }
    50% { transform: translateY(-20px) scale(1.05); }
}

/* Responsive για Κινητά */
@media (max-width: 768px) {
    .case-left, .case-right {
        display: none;
    }
    .case-center {
        width: 170px;
    }

    /* FIX: σωστή απόσταση Finder από τα features */
    .finder-section {
        margin-top: 20px !important;
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   Techfy v1.3 Header Edge-to-Edge Redesign
   ========================================================================== */

/* Full-width purple tech pattern */
.site-header {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #12051E !important;
    background-image:
        radial-gradient(rgba(192, 132, 252, 0.12) 1px, transparent 1px),
        radial-gradient(circle at 85% 30%, #4C1D95 0%, #1B0A2A 65%, #0E0318 100%) !important;
    background-size: 20px 24px, 100% 100% !important;
    background-position: 0 0, center center !important;
    background-repeat: repeat, no-repeat !important;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

.site-header .main-header {
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Compact Techfy brand */
.site-branding {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.techfy-logo-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    line-height: 1;
    min-width: max-content;
}

.tf-icon-mark {
    width: 34px;
    height: 24px;
    margin-bottom: 3px;
    filter: drop-shadow(0 2px 8px rgba(168, 85, 247, 0.4));
}

.tf-icon-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tf-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.tf-brand-name {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.tf-brand-name .tf-accent {
    color: #A855F7;
}

.tf-tagline {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #D8B4FE;
    margin-top: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Keep uploaded WordPress logo tidy too */
.site-header .site-branding .custom-logo-link {
    display: flex;
    align-items: center;
}

.site-header .site-branding .custom-logo {
    max-height: 58px;
    width: auto;
}

/* Tablet: prevent header items from colliding */
@media (max-width: 1024px) and (min-width: 769px) {
    .site-header .main-header {
        gap: 14px;
    }

    .header-actions {
        gap: 12px;
    }

    .header-action-item {
        gap: 6px;
        font-size: 12px;
    }

    .header-search {
        min-width: 260px;
    }
}

/* Mobile header: first row = logo + action icons, second row = search */
@media (max-width: 768px) {
    .site-header > .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .site-header .main-header {
        padding: 10px 0;
        gap: 10px 12px;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .site-branding {
        order: 1;
        min-width: 0;
        max-width: calc(100% - 120px);
    }

    .techfy-logo-block {
        min-width: 0;
    }

    .tf-icon-mark {
        width: 26px;
        height: 18px;
        margin-bottom: 2px;
    }

    .tf-brand-name {
        font-size: 18px;
        letter-spacing: 1.1px;
    }

    .tf-tagline {
        display: none;
    }

    .site-header .site-branding .custom-logo {
        max-height: 42px;
        max-width: 150px;
        object-fit: contain;
    }

    .header-actions {
        order: 2;
        margin-left: auto;
        gap: 10px;
        flex: 0 0 auto;
    }

    .header-action-item {
        gap: 0;
        font-size: 0;
    }

    .header-action-item > span,
    .header-cart-box .cart-details {
        display: none;
    }

    .header-action-item svg {
        width: 21px;
        height: 21px;
    }

    .header-cart-box {
        padding: 7px 9px;
        min-width: 40px;
        justify-content: center;
    }

    .header-search {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .header-search input[type="search"] {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 13px;
    }

    .header-search button {
        width: 34px;
        height: 34px;
    }

    .nav-container {
        height: 46px;
    }

    .categories-toggle-btn {
        padding: 0 16px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .site-header > .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .header-actions {
        gap: 7px;
    }

    .header-action-item svg {
        width: 20px;
        height: 20px;
    }

    .header-cart-box {
        padding: 6px 8px;
    }
}

/* ========================================================================== 
   Techfy v1.4 - Mobile Off-Canvas Navigation Drawer
   ========================================================================== */

/* Drawer is mobile-only. Keeping it out of desktop avoids menu conflicts. */
.techfy-drawer-backdrop,
.techfy-mobile-drawer {
    display: none;
}

@media (max-width: 768px) {
    /* Hide the crowded horizontal navigation bar on phones. */
    .site-navigation-bar {
        display: none !important;
    }

    /* Backdrop */
    .techfy-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(10, 2, 18, 0.75);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .techfy-drawer-backdrop.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Slide-out panel */
    .techfy-mobile-drawer {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 82%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        background: #12051E;
        border-right: 1px solid rgba(168, 85, 247, 0.25);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.6);
        z-index: 10001;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        flex-direction: column;
        overflow: hidden;
    }

    .techfy-mobile-drawer.is-open {
        transform: translateX(0);
    }

    .drawer-header {
        padding: 18px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: #1B0A2A;
        flex: 0 0 auto;
    }

    .drawer-logo .tf-brand-name {
        font-size: 22px;
    }

    .drawer-close-btn {
        background: none;
        border: none;
        color: #A855F7;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        padding: 2px 4px;
    }

    .drawer-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 0;
    }

    .drawer-menu-list,
    .drawer-menu-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .drawer-menu-list li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .drawer-menu-list li a {
        display: flex;
        align-items: center;
        padding: 14px 20px;
        color: #E2E8F0;
        font-size: 15px;
        font-weight: 600;
        transition: background 0.2s, color 0.2s;
    }

    .drawer-menu-list li a:active,
    .drawer-menu-list li a:hover,
    .drawer-menu-list li.current-menu-item > a {
        background: rgba(124, 58, 237, 0.15);
        color: #C084FC;
    }

    /* Nested WordPress menu items */
    .drawer-menu-list .sub-menu a {
        padding-left: 36px;
        font-size: 14px;
        color: #CBD5E1;
        background: rgba(255,255,255,0.015);
    }

    .drawer-footer {
        flex: 0 0 auto;
        padding: 16px 20px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: #0E0318;
    }

    .drawer-footer-btn {
        display: block;
        text-align: center;
        background: var(--primary-color, #6C2BD9);
        color: #fff;
        padding: 12px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 14px;
    }
}

/* ========================================================================== 
   Header Logo Sizing Patch (kept from the CSS already added manually)
   ========================================================================== */
.site-branding img,
.custom-logo {
    height: 64px !important;
    max-height: 64px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
}

.site-branding .custom-logo-link {
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
    .site-branding img,
    .custom-logo {
        height: 56px !important;
        max-height: 56px !important;
    }
}

@media (max-width: 768px) {
    .site-branding img,
    .custom-logo {
        height: 44px !important;
        max-height: 44px !important;
    }
}



/* ==========================================================================
   Techfy v1.5 - Techfy Core Finder integration
   Keep the theme Finder design while Techfy Core provides the data/query.
   ========================================================================== */
.finder-form.tf-device-finder {
    margin-top: 0;
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    max-width: 650px;
}
.finder-form.tf-device-finder select,
.finder-form.tf-device-finder button {
    min-height: initial;
}
.finder-form.tf-device-finder .finder-select-wrapper select {
    min-height: 46px;
}
.finder-form.tf-device-finder .finder-submit-btn {
    min-height: 46px;
    background: var(--primary-color);
    color: #fff;
    border: 0;
}
@media (max-width: 768px) {
    .finder-form.tf-device-finder {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
    }
    .finder-form.tf-device-finder .finder-select-wrapper,
    .finder-form.tf-device-finder .finder-submit-btn {
        width: 100%;
    }
}


/* Techfy v1.9 - Admin-driven category cards */
.category-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    display: block;
}

.techfy-categories-empty {
    padding: 24px;
    border: 1px dashed #D8B4FE;
    border-radius: var(--radius-lg);
    background: #FAF5FF;
    color: #64748B;
    text-align: center;
    font-size: 14px;
}


/* ==========================================================================\n   Techfy v1.9.1 — Dynamic category icons + editable primary menu\n   ========================================================================== */
.categories-showcase .category-icon-box {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(124,58,237,.08), rgba(168,85,247,.04));
    border: 1px solid rgba(124,58,237,.16);
}
.categories-showcase .category-icon-box svg {
    width: 34px;
    height: 34px;
    color: #7C3AED;
    stroke: currentColor;
}
.categories-showcase .category-icon-box img { display:none !important; }

/* Desktop dropdowns for either an assigned WP menu or the dynamic fallback. */
@media (min-width: 769px) {
    .main-nav ul li { position: relative; }
    .main-nav ul li > .sub-menu {
        display: none;
        position: absolute;
        top: calc(100% - 2px);
        left: -16px;
        min-width: 220px;
        padding: 10px;
        margin: 0;
        gap: 0;
        flex-direction: column;
        align-items: stretch;
        background: #160720;
        border: 1px solid rgba(168,85,247,.22);
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0,0,0,.35);
        z-index: 1005;
    }
    .main-nav ul li:hover > .sub-menu,
    .main-nav ul li:focus-within > .sub-menu { display:flex; }
    .main-nav .sub-menu li { width:100%; }
    .main-nav .sub-menu li a {
        display:block;
        width:100%;
        padding:10px 12px;
        border-radius:8px;
        white-space:nowrap;
    }
    .main-nav .sub-menu li a:hover { background:rgba(124,58,237,.16); }
    .techfy-menu-chevron { font-size: 12px; opacity:.7; margin-left:2px; }
}

/* ========================================================================== 
/* ==========================================================================\n   Techfy v2.0.2 - Mobile 3-Case Hero Showcase\n   Show all three Customizer hero case images on phones with desktop-style motion.\n   ========================================================================== */
@media (max-width: 768px) {
    .hero-mockup-wrapper {
        width: 100%;
        overflow: visible;
        padding: 8px 0 18px;
    }

    .hero-cases-stage {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        perspective: 900px;
        overflow: visible;
    }

    .hero-case-card img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .case-left,
    .case-right {
        display: block !important;
        width: 92px;
        flex: 0 0 92px;
        opacity: .94;
        z-index: 2;
        filter: drop-shadow(0 12px 20px rgba(0,0,0,.62));
    }

    .case-left {
        margin-right: -8px;
        transform: rotateY(10deg) translateY(8px) scale(.92);
        animation: techfyMobileFloatLeft 4.6s ease-in-out infinite;
    }

    .case-center {
        width: 132px;
        flex: 0 0 132px;
        z-index: 5;
        margin: 0 -2px;
        transform: translateY(-6px) scale(1.03);
        animation: techfyMobileFloatCenter 4s ease-in-out infinite;
        filter: drop-shadow(0 18px 32px rgba(124,58,237,.58));
    }

    .case-right {
        margin-left: -8px;
        transform: rotateY(-10deg) translateY(8px) scale(.92);
        animation: techfyMobileFloatRight 5s ease-in-out infinite;
    }

    .case-tag {
        top: -8px;
        font-size: 9px;
        padding: 3px 9px;
    }

    /* Touch devices do not have reliable hover; keep the animated state stable. */
    .hero-cases-stage:hover .case-left,
    .hero-cases-stage:hover .case-right,
    .hero-cases-stage:hover .case-center {
        filter: inherit;
    }
}

@media (max-width: 390px) {
    .hero-cases-stage { max-width: 350px; }
    .case-left,
    .case-right {
        width: 80px;
        flex-basis: 80px;
    }
    .case-center {
        width: 120px;
        flex-basis: 120px;
    }
}

@keyframes techfyMobileFloatLeft {
    0%, 100% { transform: rotateY(10deg) translateY(8px) scale(.92); }
    50%      { transform: rotateY(5deg) translateY(-2px) scale(.95); }
}

@keyframes techfyMobileFloatCenter {
    0%, 100% { transform: translateY(-6px) scale(1.03); }
    50%      { transform: translateY(-15px) scale(1.06); }
}

@keyframes techfyMobileFloatRight {
    0%, 100% { transform: rotateY(-10deg) translateY(8px) scale(.92); }
    50%      { transform: rotateY(-5deg) translateY(-3px) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
    .case-left,
    .case-center,
    .case-right {
        animation: none !important;
    }
}
\n\n/* ==========================================================================\n   Techfy v2.0.3 — Mobile hero hard override + cache-busting release\n   ========================================================================== */\n@media screen and (max-width: 768px) {\n    body.home .hero-mockup-wrapper .hero-cases-stage > .hero-case-card.case-left,\n    body.home .hero-mockup-wrapper .hero-cases-stage > .hero-case-card.case-right {\n        display: block !important;\n        visibility: visible !important;\n        opacity: .95 !important;\n        position: relative !important;\n    }\n    body.home .hero-mockup-wrapper .hero-cases-stage {\n        display: flex !important;\n        flex-direction: row !important;\n        flex-wrap: nowrap !important;\n        justify-content: center !important;\n        align-items: center !important;\n        width: 100% !important;\n        max-width: 390px !important;\n        margin-inline: auto !important;\n        overflow: visible !important;\n    }\n    body.home .hero-mockup-wrapper .hero-cases-stage > .case-left,\n    body.home .hero-mockup-wrapper .hero-cases-stage > .case-right {\n        width: 88px !important;\n        min-width: 88px !important;\n        max-width: 88px !important;\n        flex: 0 0 88px !important;\n    }\n    body.home .hero-mockup-wrapper .hero-cases-stage > .case-center {\n        width: 128px !important;\n        min-width: 128px !important;\n        max-width: 128px !important;\n        flex: 0 0 128px !important;\n    }\n    body.home .hero-mockup-wrapper .hero-cases-stage > .hero-case-card img {\n        display: block !important;\n        width: 100% !important;\n        max-width: none !important;\n        height: auto !important;\n    }\n}\n
/* ==========================================================================

/* ==========================================================================
   Techfy v2.1.2.3 — Locked Visual Polish WooCommerce
   Staging target: staging.techfy.gr

   This is the ONLY WooCommerce visual contract in the stylesheet.
   Goal:
   - keep the approved Visual Polish single-product layout,
   - use the same light premium aesthetic in Shop / category archives,
   - keep parent-category cards compact,
   - keep product cards consistent with the homepage,
   - avoid old dark/background/grid overrides fighting each other.
   ========================================================================== */

/* ---------- Shared WooCommerce canvas ---------- */
body.woocommerce-shop,
body.single-product,
body.tax-product_cat,
body.tax-product_tag,
body[class*="tax-pa_"] {
    background: #f7f8fc !important;
    color: #171225 !important;
}

body.woocommerce-shop #page,
body.single-product #page,
body.tax-product_cat #page,
body.tax-product_tag #page,
body[class*="tax-pa_"] #page,
body.woocommerce-shop #content,
body.single-product #content,
body.tax-product_cat #content,
body.tax-product_tag #content,
body[class*="tax-pa_"] #content,
body.woocommerce-shop .site-content,
body.single-product .site-content,
body.tax-product_cat .site-content,
body.tax-product_tag .site-content,
body[class*="tax-pa_"] .site-content,
body.woocommerce-shop .site-main,
body.single-product .site-main,
body.tax-product_cat .site-main,
body.tax-product_tag .site-main,
body[class*="tax-pa_"] .site-main,
body.woocommerce-shop #primary,
body.single-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary,
body[class*="tax-pa_"] #primary,
body.woocommerce-shop .techfy-archive-shell,
body.tax-product_cat .techfy-archive-shell,
body.tax-product_tag .techfy-archive-shell,
body[class*="tax-pa_"] .techfy-archive-shell,
body.single-product .techfy-single-shell {
    background: #f7f8fc !important;
}

/* Remove legacy sidebars from Woo pages. Techfy Core owns catalogue filters. */
body.woocommerce-shop .widget-area,
body.tax-product_cat .widget-area,
body.tax-product_tag .widget-area,
body[class*="tax-pa_"] .widget-area,
body.single-product .widget-area,
body.woocommerce-shop .sidebar,
body.tax-product_cat .sidebar,
body.tax-product_tag .sidebar,
body[class*="tax-pa_"] .sidebar,
body.single-product .sidebar {
    display: none !important;
}

/* ---------- Breadcrumbs + archive title ---------- */
body.woocommerce-shop .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_tag .woocommerce-breadcrumb,
body[class*="tax-pa_"] .woocommerce-breadcrumb {
    width: min(100% - 48px, 1280px);
    margin: 0 auto 18px !important;
    padding-top: 28px !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.woocommerce-shop .woocommerce-breadcrumb a,
body.single-product .woocommerce-breadcrumb a,
body.tax-product_cat .woocommerce-breadcrumb a,
body.tax-product_tag .woocommerce-breadcrumb a,
body[class*="tax-pa_"] .woocommerce-breadcrumb a {
    color: #6d28d9 !important;
}

body.woocommerce-shop .techfy-archive-shell,
body.tax-product_cat .techfy-archive-shell,
body.tax-product_tag .techfy-archive-shell,
body[class*="tax-pa_"] .techfy-archive-shell {
    padding: 10px 0 64px !important;
}

.woocommerce .techfy-archive-header,
.woocommerce-page .techfy-archive-header {
    width: min(100% - 48px, 1280px) !important;
    max-width: 1280px !important;
    margin: 0 auto 24px !important;
}

.woocommerce .techfy-archive-header .page-title,
.woocommerce-page .techfy-archive-header .page-title,
body.woocommerce-shop .page-title,
body.tax-product_cat .page-title,
body.tax-product_tag .page-title,
body[class*="tax-pa_"] .page-title {
    color: #171225 !important;
    font-size: clamp(32px, 3.4vw, 48px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

/* ---------- Shop / parent categories ---------- */
body.woocommerce-shop ul.products:has(li.product-category),
body.techfy-category-has-children ul.products:has(li.product-category),
body.tax-product_cat ul.products:has(li.product-category) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: min(100% - 48px, 1280px) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch !important;
}

body.woocommerce-shop ul.products li.product-category,
body.techfy-category-has-children ul.products li.product-category,
body.tax-product_cat ul.products li.product-category {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e8e3ef !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(31, 15, 55, .07) !important;
    color: #171225 !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

body.woocommerce-shop ul.products li.product-category:hover,
body.techfy-category-has-children ul.products li.product-category:hover,
body.tax-product_cat ul.products li.product-category:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, .26) !important;
    box-shadow: 0 16px 38px rgba(109, 40, 217, .12) !important;
}

body.woocommerce-shop ul.products li.product-category a,
body.techfy-category-has-children ul.products li.product-category a,
body.tax-product_cat ul.products li.product-category a {
    display: block !important;
    color: #171225 !important;
    text-decoration: none !important;
}

body.woocommerce-shop ul.products li.product-category img,
body.techfy-category-has-children ul.products li.product-category img,
body.tax-product_cat ul.products li.product-category img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
}

body.woocommerce-shop ul.products li.product-category .woocommerce-loop-category__title,
body.techfy-category-has-children ul.products li.product-category .woocommerce-loop-category__title,
body.tax-product_cat ul.products li.product-category .woocommerce-loop-category__title {
    color: #171225 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 15px 16px 17px !important;
}

body.woocommerce-shop ul.products li.product-category mark.count,
body.techfy-category-has-children ul.products li.product-category mark.count,
body.tax-product_cat ul.products li.product-category mark.count {
    background: transparent !important;
    color: #7c3aed !important;
    font-weight: 800 !important;
}

/* No catalogue filters on Shop landing or parent-category pages. */
body.woocommerce-shop .tf-catalog-filters,
body.techfy-category-has-children .tf-catalog-filters {
    display: none !important;
}

body.woocommerce-shop .tf-catalog-layout,
body.techfy-category-has-children .tf-catalog-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-shop .tf-catalog-products,
body.techfy-category-has-children .tf-catalog-products {
    width: 100% !important;
    max-width: none !important;
}

/* ---------- Leaf categories / product results ---------- */
body.techfy-category-is-leaf .tf-catalog-layout,
body.tax-product_tag .tf-catalog-layout,
body[class*="tax-pa_"] .tf-catalog-layout {
    width: min(100% - 48px, 1440px) !important;
    max-width: 1440px !important;
    margin: 0 auto 54px !important;
    padding: 0 !important;
    align-items: start !important;
}

@media (min-width: 1101px) {
    body.techfy-category-is-leaf .tf-catalog-layout,
    body.tax-product_tag .tf-catalog-layout,
    body[class*="tax-pa_"] .tf-catalog-layout {
        display: grid !important;
        grid-template-columns: 210px minmax(0, 1fr) !important;
        gap: 24px !important;
    }
}

/* Light compact Techfy Core filter card. */
.tf-catalog-filters {
    background: #ffffff !important;
    border: 1px solid #e8e3ef !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(31, 15, 55, .06) !important;
    color: #171225 !important;
    padding: 16px !important;
}

.tf-catalog-filters h2,
.tf-catalog-filters h3,
.tf-catalog-filters label,
.tf-catalog-filters .tf-filter-title {
    color: #171225 !important;
}

.tf-catalog-filters select,
.tf-catalog-filters input {
    background: #ffffff !important;
    color: #171225 !important;
    border: 1px solid #ddd6e8 !important;
    border-radius: 10px !important;
}

.tf-catalog-filters button,
.tf-catalog-filters .button {
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}

.tf-catalog-products {
    min-width: 0 !important;
}

.tf-catalog-products .woocommerce-result-count {
    color: #64748b !important;
}

.tf-catalog-products .woocommerce-ordering select {
    background: #ffffff !important;
    color: #171225 !important;
    border: 1px solid #ddd6e8 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
}

.tf-catalog-products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}

/* ---------- Product cards: same visual language as homepage ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e8e3ef !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(31, 15, 55, .06) !important;
    color: #171225 !important;
    overflow: hidden !important;
}

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    margin: 0 0 12px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    color: #171225 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 7px !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
    color: #7c3aed !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    text-align: left !important;
    margin: 0 0 12px !important;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
    width: 100% !important;
    min-height: 42px !important;
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.woocommerce img.woocommerce-placeholder,
.woocommerce-page img.woocommerce-placeholder {
    background: linear-gradient(145deg, #faf9fc, #f1eef6) !important;
    border: 1px solid #e8e3ef !important;
    border-radius: 12px !important;
    object-fit: contain !important;
}


/* ==========================================================================\n   Techfy v2.1.2.4 — Dark product cards / archive-only polish\n   IMPORTANT: intentionally does NOT touch the locked Single Product layout.\n   ========================================================================== */

/* Shop landing: keep WooCommerce categories, but remove the redundant page title. */
body.woocommerce-shop .techfy-archive-header .page-title {
    display: none !important;
}

body.woocommerce-shop .techfy-archive-header {
    margin-bottom: 6px !important;
}

/* Archive headings: smaller and visually closer to the left edge on wide screens. */
body.tax-product_cat .techfy-archive-header,
body.tax-product_tag .techfy-archive-header,
body[class*="tax-pa_"] .techfy-archive-header {
    width: min(100% - 32px, 1440px) !important;
    max-width: 1440px !important;
}

body.tax-product_cat .techfy-archive-header .page-title,
body.tax-product_tag .techfy-archive-header .page-title,
body[class*="tax-pa_"] .techfy-archive-header .page-title {
    font-size: clamp(27px, 2.3vw, 36px) !important;
    line-height: 1.12 !important;
    margin-bottom: 8px !important;
}

body.woocommerce-shop .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_tag .woocommerce-breadcrumb,
body[class*="tax-pa_"] .woocommerce-breadcrumb {
    width: min(100% - 32px, 1440px) !important;
    max-width: 1440px !important;
    font-size: 13px !important;
}

/* Homepage New Arrivals / Best Sellers: restore the approved dark cards. */
body.home .techfy-home-products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Product cards only — categories remain light cards. */
body.home .techfy-home-products .woocommerce ul.products li.product,
body.woocommerce-shop ul.products li.product:not(.product-category),
body.techfy-category-is-leaf ul.products li.product:not(.product-category),
body.tax-product_tag ul.products li.product:not(.product-category),
body[class*="tax-pa_"] ul.products li.product:not(.product-category) {
    background: #1b0d2b !important;
    border: 1px solid rgba(124, 58, 237, .28) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 10px 26px rgba(18, 5, 30, .10) !important;
    color: #ffffff !important;
    text-align: left !important;
}

body.home .techfy-home-products .woocommerce ul.products li.product:hover,
body.woocommerce-shop ul.products li.product:not(.product-category):hover,
body.techfy-category-is-leaf ul.products li.product:not(.product-category):hover,
body.tax-product_tag ul.products li.product:not(.product-category):hover,
body[class*="tax-pa_"] ul.products li.product:not(.product-category):hover {
    transform: translateY(-3px) !important;
    border-color: rgba(124, 58, 237, .48) !important;
    box-shadow: 0 14px 34px rgba(57, 26, 89, .16) !important;
}

body.home .techfy-home-products .woocommerce ul.products li.product img,
body.woocommerce-shop ul.products li.product:not(.product-category) img,
body.techfy-category-is-leaf ul.products li.product:not(.product-category) img,
body.tax-product_tag ul.products li.product:not(.product-category) img,
body[class*="tax-pa_"] ul.products li.product:not(.product-category) img {
    background: #f8f8fb !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
}

body.home .techfy-home-products .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-shop ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
body.techfy-category-is-leaf ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
body.tax-product_tag ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
body[class*="tax-pa_"] ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.32 !important;
    font-weight: 800 !important;
    text-align: left !important;
    margin: 0 5px 7px !important;
}

body.home .techfy-home-products .woocommerce ul.products li.product .price,
body.woocommerce-shop ul.products li.product:not(.product-category) .price,
body.techfy-category-is-leaf ul.products li.product:not(.product-category) .price,
body.tax-product_tag ul.products li.product:not(.product-category) .price,
body[class*="tax-pa_"] ul.products li.product:not(.product-category) .price {
    color: #a78bfa !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: left !important;
    margin: 0 5px 11px !important;
}

body.home .techfy-home-products .woocommerce ul.products li.product .price del,
body.woocommerce-shop ul.products li.product:not(.product-category) .price del,
body.techfy-category-is-leaf ul.products li.product:not(.product-category) .price del,
body.tax-product_tag ul.products li.product:not(.product-category) .price del,
body[class*="tax-pa_"] ul.products li.product:not(.product-category) .price del {
    color: #c4b5fd !important;
    opacity: .65 !important;
}

body.home .techfy-home-products .woocommerce ul.products li.product .button,
body.woocommerce-shop ul.products li.product:not(.product-category) .button,
body.techfy-category-is-leaf ul.products li.product:not(.product-category) .button,
body.tax-product_tag ul.products li.product:not(.product-category) .button,
body[class*="tax-pa_"] ul.products li.product:not(.product-category) .button {
    min-height: 38px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-top: auto !important;
}

/* Keep product-result grids compact and in the same order as the homepage. */
body.techfy-category-is-leaf .tf-catalog-products ul.products,
body.tax-product_tag .tf-catalog-products ul.products,
body[class*="tax-pa_"] .tf-catalog-products ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

@media (max-width: 900px) {
    body.home .techfy-home-products ul.products,
    body.techfy-category-is-leaf .tf-catalog-products ul.products,
    body.tax-product_tag .tf-catalog-products ul.products,
    body[class*="tax-pa_"] .tf-catalog-products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    body.tax-product_cat .techfy-archive-header .page-title,
    body.tax-product_tag .techfy-archive-header .page-title,
    body[class*="tax-pa_"] .techfy-archive-header .page-title {
        font-size: 28px !important;
    }
}

/* ---------- Single product: LOCKED Visual Polish ---------- */
body.single-product .techfy-single-shell {
    width: min(100% - 48px, 1100px) !important;
    max-width: 1100px !important;
    margin: 22px auto 68px !important;
    padding: 0 !important;
}

@media (min-width: 901px) {
    body.single-product .techfy-single-shell div.product {
        display: grid !important;
        grid-template-columns: minmax(0, 430px) minmax(0, 1fr) !important;
        column-gap: 34px !important;
        row-gap: 34px !important;
        width: 100% !important;
        margin: 0 !important;
        align-items: start !important;
    }

    body.single-product .techfy-single-shell div.product > .woocommerce-product-gallery {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 !important;
    }

    body.single-product .techfy-single-shell div.product > .summary {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

body.single-product .techfy-single-shell div.product > .woocommerce-product-gallery {
    float: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e8e3ef !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 34px rgba(31, 15, 55, .08) !important;
    overflow: hidden !important;
}

body.single-product .techfy-single-shell .woocommerce-product-gallery__wrapper,
body.single-product .techfy-single-shell .woocommerce-product-gallery__image {
    margin: 0 !important;
}

body.single-product .techfy-single-shell .woocommerce-product-gallery__image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 470px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    background: #fafafa !important;
}

body.single-product .techfy-single-shell div.product > .summary,
body.single-product .techfy-single-shell div.product > .summary.entry-summary {
    float: none !important;
    position: relative !important;
    inset: auto !important;
    padding: 30px !important;
    background: #ffffff !important;
    border: 1px solid #e8e3ef !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 34px rgba(31, 15, 55, .08) !important;
    color: #475569 !important;
    text-align: left !important;
}

body.single-product .techfy-single-shell .summary .product_title {
    color: #171225 !important;
    font-size: clamp(30px, 2.8vw, 36px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    margin: 0 0 14px !important;
}

body.single-product .techfy-single-shell .summary .price {
    color: #7c3aed !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-align: left !important;
    margin: 0 0 22px !important;
}

body.single-product .techfy-single-shell .summary .woocommerce-product-details__short-description,
body.single-product .techfy-single-shell .summary .woocommerce-product-details__short-description p {
    color: #526075 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: left !important;
}

body.single-product .techfy-single-shell .summary .product_meta {
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

body.single-product .techfy-single-shell .summary .product_meta a {
    color: #6d28d9 !important;
}

body.single-product .techfy-single-shell .summary form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 22px 0 0 !important;
}

body.single-product .techfy-single-shell .summary form.cart .quantity .qty {
    width: 72px !important;
    min-height: 50px !important;
    border: 1px solid #ddd6e8 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #171225 !important;
}

body.single-product .techfy-single-shell .summary form.cart .single_add_to_cart_button {
    flex: 1 1 230px !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 11px !important;
    padding: 0 24px !important;
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

body.single-product .techfy-single-shell .summary table.variations,
body.single-product .techfy-single-shell .summary table.variations select {
    width: 100% !important;
}

body.single-product .techfy-single-shell .summary table.variations th,
body.single-product .techfy-single-shell .summary table.variations td {
    text-align: left !important;
}

body.single-product .techfy-single-shell .summary table.variations select {
    min-height: 46px !important;
    background: #ffffff !important;
    color: #171225 !important;
    border: 1px solid #ddd6e8 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
}

/* Trust row remains compact and secondary to the purchase CTA. */
body.single-product .techfy-product-trust {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

body.single-product .techfy-product-trust span {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 9px !important;
    background: #faf8fd !important;
    border: 1px solid #ebe5f2 !important;
    border-radius: 11px !important;
    color: #4b3f5d !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/* Tabs / upsells / related always start on a new full-width row. */
body.single-product .techfy-single-shell div.product > .woocommerce-tabs,
body.single-product .techfy-single-shell div.product > .upsells,
body.single-product .techfy-single-shell div.product > .related {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    margin: 0 !important;
    color: #171225 !important;
}

body.single-product .techfy-single-shell .woocommerce-tabs h2,
body.single-product .techfy-single-shell .related > h2,
body.single-product .techfy-single-shell .upsells > h2 {
    color: #171225 !important;
}

body.single-product .techfy-single-shell .related ul.products,
body.single-product .techfy-single-shell .upsells ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 18px 0 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) and (min-width: 901px) {
    .tf-catalog-products ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    body.woocommerce-shop .woocommerce-breadcrumb,
    body.single-product .woocommerce-breadcrumb,
    body.tax-product_cat .woocommerce-breadcrumb,
    body.tax-product_tag .woocommerce-breadcrumb,
    body[class*="tax-pa_"] .woocommerce-breadcrumb {
        width: min(100% - 24px, 760px);
        padding-top: 18px !important;
    }

    .woocommerce .techfy-archive-header,
    .woocommerce-page .techfy-archive-header {
        width: min(100% - 24px, 760px) !important;
    }

    body.woocommerce-shop ul.products:has(li.product-category),
    body.techfy-category-has-children ul.products:has(li.product-category),
    body.tax-product_cat ul.products:has(li.product-category) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: min(100% - 24px, 760px) !important;
    }

    body.techfy-category-is-leaf .tf-catalog-layout,
    body.tax-product_tag .tf-catalog-layout,
    body[class*="tax-pa_"] .tf-catalog-layout {
        display: block !important;
        width: min(100% - 24px, 760px) !important;
    }

    .tf-catalog-filters {
        width: 100% !important;
        margin-bottom: 18px !important;
    }

    .tf-catalog-products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    body.single-product .techfy-single-shell {
        width: min(100% - 24px, 760px) !important;
        margin: 18px auto 105px !important;
    }

    body.single-product .techfy-single-shell div.product {
        display: block !important;
    }

    body.single-product .techfy-single-shell div.product > .woocommerce-product-gallery,
    body.single-product .techfy-single-shell div.product > .summary,
    body.single-product .techfy-single-shell div.product > .woocommerce-tabs,
    body.single-product .techfy-single-shell div.product > .upsells,
    body.single-product .techfy-single-shell div.product > .related {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 22px !important;
    }

    body.single-product .techfy-single-shell .woocommerce-product-gallery__image img {
        max-height: 460px !important;
    }

    body.single-product .techfy-single-shell div.product > .summary {
        padding: 20px !important;
    }

    body.single-product .techfy-single-shell .summary .product_title {
        font-size: 28px !important;
    }

    body.single-product .techfy-product-trust {
        grid-template-columns: 1fr !important;
    }

    body.single-product .techfy-single-shell .related ul.products,
    body.single-product .techfy-single-shell .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 520px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        padding: 9px !important;
        border-radius: 13px !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
    }

    .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.product .price {
        font-size: 14px !important;
    }

    .woocommerce ul.products li.product .button,
    .woocommerce-page ul.products li.product .button {
        min-height: 38px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   Techfy v2.1.2.13 — Restore proven left alignment only
   Based on the older v2.1.1 layout hotfix that previously aligned the grids.
   IMPORTANT: card appearance/sizing is intentionally untouched.
   ========================================================================== */

/* Homepage products: the shortcode grid starts flush-left inside its own container. */
.techfy-home-products .woocommerce,
.techfy-home-products .techfy-home-product-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.techfy-home-products ul.products {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: start !important;
}

.techfy-home-products ul.products::before,
.techfy-home-products ul.products::after {
    display: none !important;
    content: none !important;
}

.techfy-home-products ul.products li.product {
    float: none !important;
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Catalogue: narrow filter rail, products immediately beside it. */
@media (min-width: 901px) {
    .tf-catalog-layout {
        grid-template-columns: 170px minmax(0, 1fr) !important;
        gap: 10px !important;
        margin-left: 0 !important;
        margin-right: 8px !important;
        width: calc(100% - 8px) !important;
        max-width: none !important;
    }

    .tf-catalog-filters {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
        margin-left: 0 !important;
    }

    .tf-catalog-products,
    .tf-catalog-products .woocommerce,
    .tf-catalog-products ul.products {
        margin-left: 0 !important;
        padding-left: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .tf-catalog-products ul.products {
        justify-content: start !important;
    }
}

/* Parent/sub-category grid also starts from the left; card design stays as-is. */
body.tax-product_cat ul.products:has(li.product-category),
body.woocommerce-shop ul.products:has(li.product-category),
body.techfy-category-has-children ul.products:has(li.product-category) {
    justify-content: start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Keep only the variable-product visibility fix from the later patches. */
body.single-product .techfy-single-shell .summary form.variations_form.cart {
    display: block !important;
    width: 100% !important;
}
body.single-product .techfy-single-shell .summary form.variations_form.cart table.variations {
    display: table !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 14px !important;
}
body.single-product .techfy-single-shell .summary form.variations_form.cart .single_variation_wrap,
body.single-product .techfy-single-shell .summary form.variations_form.cart .woocommerce-variation-add-to-cart {
    display: block !important;
    width: 100% !important;
}

/* ==========================================================================
   Techfy v2.1.2.14 — Mobile alignment only
   Fix WooCommerce clearfix pseudo-elements occupying CSS-grid cells on mobile.
   Card design/sizing is intentionally untouched.
   ========================================================================== */
@media (max-width: 900px) {
    /* WooCommerce clearfix pseudo-elements must not become grid items. */
    body.home .techfy-home-products ul.products::before,
    body.home .techfy-home-products ul.products::after,
    body.woocommerce-shop ul.products::before,
    body.woocommerce-shop ul.products::after,
    body.tax-product_cat ul.products::before,
    body.tax-product_cat ul.products::after,
    body.tax-product_tag ul.products::before,
    body.tax-product_tag ul.products::after,
    body[class*="tax-pa_"] ul.products::before,
    body[class*="tax-pa_"] ul.products::after,
    .tf-catalog-products ul.products::before,
    .tf-catalog-products ul.products::after {
        display: none !important;
        content: none !important;
    }

    /* Remove legacy Woo float/margins only; preserve current card appearance. */
    body.home .techfy-home-products ul.products li.product,
    body.woocommerce-shop ul.products li.product,
    body.tax-product_cat ul.products li.product,
    body.tax-product_tag ul.products li.product,
    body[class*="tax-pa_"] ul.products li.product,
    .tf-catalog-products ul.products li.product {
        float: none !important;
        clear: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Keep every two-column mobile grid flush-left in its own container. */
    body.home .techfy-home-products ul.products,
    body.woocommerce-shop ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products,
    body[class*="tax-pa_"] ul.products,
    .tf-catalog-products ul.products {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: start !important;
    }
}

/* ==========================================================================\n   Techfy v2.1.2.15 — Compact mobile filter drawer only\n   Keep existing filter design; remove forced full-screen height/width on phones.\n   ========================================================================== */
@media (max-width: 900px) {
    .tf-catalog-filters {
        inset: 12px auto auto 12px !important;
        width: min(calc(100vw - 24px), 380px) !important;
        height: auto !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 18px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .tf-catalog-filter-form {
        min-height: 0 !important;
        height: auto !important;
        padding: 18px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    body.admin-bar .tf-catalog-filters {
        top: 58px !important;
        max-height: calc(100dvh - 70px) !important;
    }

    .tf-filter-heading {
        margin-bottom: 18px !important;
    }

    .tf-filter-close {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }
}


/* ==========================================================================
   Techfy v2.1.2.16 — Final mobile UX fixes
   - hard mobile left alignment for product/category grids
   - compact mobile filter drawer / clear hamburger trigger
   - proper mobile sticky add-to-cart styling
   - +/- quantity control styling
   ========================================================================== */

/* Mobile sticky add-to-cart markup must never appear as plain desktop content. */
.techfy-mobile-atc {
    display: none !important;
}

/* Quantity +/- controls on the real WooCommerce add-to-cart form. */
body.single-product .techfy-single-shell .summary form.cart .quantity {
    display: inline-grid !important;
    grid-template-columns: 42px 58px 42px !important;
    align-items: stretch !important;
    width: auto !important;
    margin: 0 !important;
}

body.single-product .techfy-single-shell .summary form.cart .quantity .qty {
    width: 58px !important;
    min-width: 58px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    text-align: center !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

body.single-product .techfy-single-shell .summary form.cart .quantity .qty::-webkit-inner-spin-button,
body.single-product .techfy-single-shell .summary form.cart .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body.single-product .techfy-qty-button {
    min-width: 42px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border: 1px solid #ddd6e8 !important;
    background: #ffffff !important;
    color: #4c1d95 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

body.single-product .techfy-qty-minus {
    border-radius: 11px 0 0 11px !important;
}

body.single-product .techfy-qty-plus {
    border-radius: 0 11px 11px 0 !important;
}

body.single-product .techfy-qty-button:active {
    background: #f3e8ff !important;
}

body.single-product .techfy-single-shell .summary .woocommerce-variation-add-to-cart.variations_button {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

@media (max-width: 900px) {
    /* Mobile filter trigger: compact hamburger button, aligned with page content. */
    .tf-mobile-filter-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        margin: 12px 12px 8px !important;
        padding: 0 16px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        box-shadow: 0 8px 20px rgba(109,40,217,.18) !important;
    }

    /* Compact drawer: grows with content, then scrolls. */
    .tf-catalog-filters {
        position: fixed !important;
        inset: 12px auto auto 12px !important;
        width: min(calc(100vw - 24px), 390px) !important;
        height: auto !important;
        max-height: calc(100dvh - 86px) !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-radius: 18px !important;
        transform: translateX(-110%) !important;
        transition: transform .28s cubic-bezier(.16,1,.3,1) !important;
        box-sizing: border-box !important;
    }

    .tf-catalog-filters.is-open {
        transform: translateX(0) !important;
    }

    .tf-catalog-filter-form {
        min-height: 0 !important;
        height: auto !important;
        padding: 18px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    body.admin-bar .tf-catalog-filters {
        top: 56px !important;
        max-height: calc(100dvh - 130px) !important;
    }

    /* Hard-reset WooCommerce mobile grid placement. */
    body.home .techfy-home-products ul.products,
    body.woocommerce-shop ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products,
    body[class*="tax-pa_"] ul.products,
    .tf-catalog-products ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row dense !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    body.home .techfy-home-products ul.products::before,
    body.home .techfy-home-products ul.products::after,
    body.woocommerce-shop ul.products::before,
    body.woocommerce-shop ul.products::after,
    body.tax-product_cat ul.products::before,
    body.tax-product_cat ul.products::after,
    body.tax-product_tag ul.products::before,
    body.tax-product_tag ul.products::after,
    body[class*="tax-pa_"] ul.products::before,
    body[class*="tax-pa_"] ul.products::after,
    .tf-catalog-products ul.products::before,
    .tf-catalog-products ul.products::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        overflow: hidden !important;
    }

    body.home .techfy-home-products ul.products > li.product,
    body.woocommerce-shop ul.products > li.product,
    body.tax-product_cat ul.products > li.product,
    body.tax-product_tag ul.products > li.product,
    body[class*="tax-pa_"] ul.products > li.product,
    .tf-catalog-products ul.products > li.product {
        float: none !important;
        clear: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        grid-row: auto !important;
    }

    /* Force the visual sequence to start in the left column on phones. */
    body.home .techfy-home-products ul.products > li.product:nth-of-type(odd),
    body.woocommerce-shop ul.products > li.product:nth-of-type(odd),
    body.tax-product_cat ul.products > li.product:nth-of-type(odd),
    body.tax-product_tag ul.products > li.product:nth-of-type(odd),
    body[class*="tax-pa_"] ul.products > li.product:nth-of-type(odd),
    .tf-catalog-products ul.products > li.product:nth-of-type(odd) {
        grid-column: 1 !important;
    }

    body.home .techfy-home-products ul.products > li.product:nth-of-type(even),
    body.woocommerce-shop ul.products > li.product:nth-of-type(even),
    body.tax-product_cat ul.products > li.product:nth-of-type(even),
    body.tax-product_tag ul.products > li.product:nth-of-type(even),
    body[class*="tax-pa_"] ul.products > li.product:nth-of-type(even),
    .tf-catalog-products ul.products > li.product:nth-of-type(even) {
        grid-column: 2 !important;
    }

    /* Single product: sticky CTA only on mobile, above the existing bottom nav. */
    body.single-product .techfy-mobile-atc {
        display: flex !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 72px !important;
        z-index: 9998 !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 10px !important;
        background: rgba(18,5,30,.96) !important;
        border: 1px solid rgba(124,58,237,.34) !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 34px rgba(15,4,25,.28) !important;
        backdrop-filter: blur(12px) !important;
        transition: opacity .2s ease, transform .2s ease !important;
    }

    body.single-product .techfy-mobile-atc.is-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(18px) !important;
    }

    body.single-product .techfy-mobile-atc__meta {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        color: #ffffff !important;
    }

    body.single-product .techfy-mobile-atc__name {
        max-width: 160px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    body.single-product .techfy-mobile-atc__price {
        color: #c4b5fd !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.single-product .techfy-mobile-atc__button {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 11px !important;
        background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }
}

/* ==========================================================================
   Techfy v2.1.2.17 — robust catalogue order + responsive filters
   Keep source order left-to-right on product/category grids at every mobile width.
   ========================================================================== */
@media (max-width: 900px) {
    body.woocommerce-shop .tf-mobile-filter-trigger,
    body.techfy-category-has-children .tf-mobile-filter-trigger {
        display: none !important;
    }

    body.home .techfy-home-products ul.products,
    body.woocommerce-shop ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products,
    body[class*="tax-pa_"] ul.products,
    .tf-catalog-products ul.products {
        grid-auto-flow: row !important;
    }

    body.home .techfy-home-products ul.products > li.product,
    body.woocommerce-shop ul.products > li.product,
    body.tax-product_cat ul.products > li.product,
    body.tax-product_cat ul.products > li.product-category,
    body.tax-product_tag ul.products > li.product,
    body[class*="tax-pa_"] ul.products > li.product,
    .tf-catalog-products ul.products > li.product {
        grid-column: auto !important;
        grid-row: auto !important;
        order: 0 !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    .tf-mobile-filter-trigger {
        white-space: nowrap !important;
        max-width: calc(100% - 24px) !important;
    }

    .tf-catalog-filters,
    .tf-catalog-filter-form,
    .tf-filter-field,
    .tf-filter-field select,
    .tf-filter-field input {
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    .tf-catalog-filter-form select,
    .tf-catalog-filter-form input,
    .tf-filter-apply,
    .tf-filter-reset {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 359px) {
    body.home .techfy-home-products ul.products,
    body.woocommerce-shop ul.products,
    body.tax-product_cat ul.products,
    body.tax-product_tag ul.products,
    body[class*="tax-pa_"] ul.products,
    .tf-catalog-products ul.products {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tf-catalog-filters {
        inset: 8px !important;
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
}

/* ==========================================================================
   Techfy v2.1.2.19 — Cart & Checkout polish
   WooCommerce Blocks: clean Techfy styling, responsive on desktop/tablet/mobile.
   ========================================================================== */

body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content {
    background: #f7f6fb !important;
}

body.woocommerce-cart .site-content > .container,
body.woocommerce-checkout .site-content > .container {
    width: min(100% - 32px, 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 34px 0 70px !important;
}

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: 1180px !important;
    margin: 0 auto !important;
    color: #171225 !important;
}

body.woocommerce-cart .wc-block-cart__sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar {
    background: #ffffff !important;
    border: 1px solid #e7e0ef !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(31, 15, 55, .07) !important;
    padding: 20px !important;
}

body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-checkout .wc-block-components-product-name {
    color: #171225 !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

body.woocommerce-cart .wc-block-cart-item__image img,
body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
    border-radius: 12px !important;
    background: #ffffff !important;
    object-fit: contain !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector {
    border: 1px solid #ddd6e8 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

body.woocommerce-cart .wc-block-cart-item__remove-link {
    color: #6d28d9 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(109, 40, 217, .20) !important;
}

body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .wc-block-components-checkout-step__title {
    color: #171225 !important;
    font-weight: 800 !important;
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input textarea,
body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input,
body.woocommerce-checkout .wc-block-components-address-form select,
body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select,
body.woocommerce-cart .wc-block-components-text-input input {
    min-height: 48px !important;
    border: 1px solid #dcd4e8 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: #171225 !important;
    box-shadow: none !important;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input:focus,
body.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, .12) !important;
}

body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-checkout-step {
    border-color: #e7e0ef !important;
    border-radius: 14px !important;
}

body.woocommerce-checkout .wc-block-components-radio-control__option-checked {
    border-color: #7c3aed !important;
    background: #faf7ff !important;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
    background: #ffffff !important;
    border: 1px solid #e7e0ef !important;
    border-radius: 20px !important;
    padding: 42px 28px !important;
    box-shadow: 0 12px 30px rgba(31, 15, 55, .06) !important;
}

body.woocommerce-cart .wc-block-cart__empty-cart__title {
    color: #171225 !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 800 !important;
}

body.woocommerce-cart .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

body.woocommerce-cart .wc-block-grid__product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(124, 58, 237, .20) !important;
    border-radius: 16px !important;
    background: #1b0d2b !important;
    text-align: left !important;
}

body.woocommerce-cart .wc-block-grid__product-image img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #f8f8fb !important;
}

body.woocommerce-cart .wc-block-grid__product-title {
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.woocommerce-cart .wc-block-grid__product-price {
    color: #a78bfa !important;
    font-weight: 800 !important;
}

body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {
    body.woocommerce-cart .site-content > .container,
    body.woocommerce-checkout .site-content > .container {
        width: min(100% - 24px, 760px) !important;
        padding-top: 20px !important;
        padding-bottom: 110px !important;
    }

    body.woocommerce-cart .wc-block-cart,
    body.woocommerce-checkout .wc-block-checkout {
        display: block !important;
    }

    body.woocommerce-cart .wc-block-cart__sidebar,
    body.woocommerce-checkout .wc-block-checkout__sidebar {
        position: static !important;
        width: 100% !important;
        margin-top: 18px !important;
        padding: 16px !important;
    }

    body.woocommerce-cart .wc-block-grid__products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
    body.woocommerce-cart .wc-block-cart__submit-button {
        width: 100% !important;
    }
}

@media (max-width: 420px) {
    body.woocommerce-cart .site-content > .container,
    body.woocommerce-checkout .site-content > .container {
        width: calc(100% - 16px) !important;
    }

    body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
        padding: 28px 14px !important;
    }

    body.woocommerce-cart .wc-block-grid__products {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Techfy v2.1.2.18 — desktop catalogue alignment
   Prevent WooCommerce clearfix pseudo-elements from occupying the first grid cell.
   Give desktop filters enough width without pushing products away.
   ========================================================================== */
@media (min-width: 901px) {
    body.techfy-category-is-leaf .tf-catalog-layout,
    body.tax-product_tag .tf-catalog-layout,
    body[class*="tax-pa_"] .tf-catalog-layout {
        display: grid !important;
        grid-template-columns: 230px minmax(0, 1fr) !important;
        gap: 18px !important;
        width: min(100% - 32px, 1500px) !important;
        max-width: 1500px !important;
        margin: 0 auto 54px !important;
    }

    body.techfy-category-is-leaf .tf-catalog-filters,
    body.tax-product_tag .tf-catalog-filters,
    body[class*="tax-pa_"] .tf-catalog-filters {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
        padding: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .tf-catalog-filter-form {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .tf-catalog-filter-form select,
    .tf-catalog-filter-form input,
    .tf-filter-apply,
    .tf-filter-reset {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tf-catalog-products,
    .tf-catalog-products .woocommerce,
    .tf-catalog-products ul.products {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .tf-catalog-products ul.products::before,
    .tf-catalog-products ul.products::after,
    body.woocommerce-shop ul.products::before,
    body.woocommerce-shop ul.products::after,
    body.tax-product_cat ul.products::before,
    body.tax-product_cat ul.products::after,
    body.tax-product_tag ul.products::before,
    body.tax-product_tag ul.products::after,
    body[class*="tax-pa_"] ul.products::before,
    body[class*="tax-pa_"] ul.products::after {
        content: none !important;
        display: none !important;
    }

    .tf-catalog-products ul.products > li.product,
    body.tax-product_cat ul.products > li.product,
    body.tax-product_cat ul.products > li.product-category {
        grid-column: auto !important;
        grid-row: auto !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 520px) {
    body.single-product .techfy-single-shell .summary form.cart {
        gap: 10px !important;
    }

    body.single-product .techfy-single-shell .summary form.cart .single_add_to_cart_button {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    body.single-product .techfy-single-shell .summary form.cart .quantity {
        grid-template-columns: 40px 54px 40px !important;
    }

    body.single-product .techfy-single-shell .summary form.cart .quantity .qty {
        width: 54px !important;
        min-width: 54px !important;
    }
}