/* ===============================
   RESET & BASE
================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font, system-ui);
	line-height: 1.6;
	color: var(--text, #0f172a);
	background: var(--bg, #ffffff);
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

/* ===============================
   VARIABLES
================================ */
:root {
	--primary: #111827;
	--accent: #2563eb;
	--bg: #ffffff;
	--text: #0f172a;
	--header-height: 80px;
}

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

/* ===============================
   HEADER - MOBILE FIXED
================================ */

#site-header {
    position: relative;
    width: 100%;
    background: var(--header-bg, #fff);
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    height: auto;
    gap: 24px;
    max-width: var(--header-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===============================
   CENTERED LOGO LAYOUT
================================ */

.header-layout-centered .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.header-layout-centered .header-left {
    justify-content: flex-start;
}

.header-layout-centered .header-center {
    display: flex;
    justify-content: center;
}

.header-layout-centered .header-right {
    justify-content: flex-end;
}

/* ===============================
   DEFAULT LAYOUT
================================ */

/* LEFT */
.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* HAMBURGER MENU (HIDDEN ON DESKTOP) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #111;
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* LOGO */
.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo {
    display: block;
    height: var(--logo-height-desktop);
    width: auto;
    object-fit: contain;
}

/* MENU (DESKTOP) */
.main-nav {
    display: block;
}

.main-nav ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    font-weight: 500;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--menu-color, #111827);
    transition: background .2s ease, color .2s ease;
}

.main-nav a:hover {
    background: rgba(0,0,0,0.05);
    color: var(--menu-hover, var(--accent));
}

/* RIGHT */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ===============================
   AJAX SEARCH
================================ */
.header-search {
    position: relative;
}
.header-search form {
    display: flex;
    align-items: center;
    width: 280px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    position: relative;
    z-index: 2;
}
.header-search input {
    flex: 1;
    border: 0;
    outline: none;
    font-size: 14px;
    background: transparent;
    color: #111;
}
.header-search input::placeholder {
    color: #9ca3af;
}
.header-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--icon-color, #000);
}

/* Ajax Search Results Dropdown */
.pf-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: none;
    overflow: visible;
}
.pf-search-results.active {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search Results Container */
.pf-search-results-inner {
    padding: 6px;
}

.pf-search-results .pf-search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    background: #ffffff;
    margin-bottom: 2px;
}
.pf-search-results .pf-search-item:last-child {
    margin-bottom: 0;
}
.pf-search-results .pf-search-item:hover {
    background: #000000;
    transform: translateX(4px);
}

/* Sleek accent line */
.pf-search-results .pf-search-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #000000;
    border-radius: 8px 0 0 8px;
    transition: width 0.25s ease;
}
.pf-search-results .pf-search-item:hover::before {
    width: 3px;
}

/* Thumbnail */
.pf-search-results .pf-search-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    background: #f9fafb;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid #f3f4f6;
}
.pf-search-results .pf-search-item:hover .pf-search-thumb {
    transform: scale(1.05);
    border-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Product Info */
.pf-search-results .pf-search-info {
    flex: 1;
    min-width: 0;
}
.pf-search-results .pf-search-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s ease;
    line-height: 1.4;
}
.pf-search-results .pf-search-item:hover .pf-search-title {
    color: #ffffff;
}

/* Price styling */
.pf-search-results .pf-search-price {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    transition: color 0.25s ease;
    display: inline-block;
}
.pf-search-results .pf-search-item:hover .pf-search-price {
    color: #ffffff;
}
.pf-search-results .pf-search-price del {
    color: #9ca3af;
    font-weight: 400;
    margin-right: 6px;
    font-size: 13px;
}
.pf-search-results .pf-search-item:hover .pf-search-price del {
    color: #d1d5db;
}

/* No Results */
.pf-search-results .pf-no-results {
    padding: 32px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

/* Loading State */
.pf-search-results .pf-search-loading {
    padding: 32px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}
.pf-search-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid #000000;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* View All Button */
.pf-search-results .pf-view-all {
    display: block;
    margin: 8px;
    padding: 14px 20px;
    text-align: center;
    color: #000000;
    background: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #000000;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.pf-view-all::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: -1;
}
.pf-search-results .pf-view-all:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.pf-search-results .pf-view-all:hover::before {
    transform: scaleX(1);
}
/* ICONS */
.header-icons {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--icon-color, #000);
}

.header-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: inherit;
    transition: background .2s ease, color .2s ease;
    position: relative;
}

.header-icons svg,
.header-search svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}

.header-icons a:hover,
.header-search button:hover {
    background: rgba(0,0,0,0.05);
    color: var(--icon-hover, var(--accent));
}

/* SEPARATOR */
.header-separator {
    width: 1px;
    height: 28px;
    background: #e5e7eb;
}

/* ===============================
   MOBILE HEADER (FIXED)
================================ */

@media (max-width: 900px) {
    
    /* Centered layout adjustments */
    .header-layout-centered .header-inner {
        grid-template-columns: auto 1fr auto;
    }
    
    .header-layout-centered .header-center {
        order: -1;
    }
    
    .header-layout-centered .header-left {
        order: 0;
    }
    
    .header-layout-centered .header-right {
        order: 1;
    }
    
    /* Show hamburger */
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide desktop menu by default */
    .main-nav {
        display: none;
        position: fixed;
        top: var(--header-height, 80px);
        left: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 998;
    }
    
    /* Show when toggled */
    .main-nav.is-open {
        display: block;
    }
    
    .main-nav ul {
        flex-direction: column;
        padding: 20px;
        gap: 0;
    }
    
    .main-nav li {
        border-bottom: 1px solid #f3f4f6;
    }
    
    .main-nav li:last-child {
        border-bottom: none;
    }
    
    .main-nav a {
        display: block;
        padding: 14px 12px;
        border-radius: 0;
    }
    
    /* Hide search and separators */
    .header-search,
    .header-separator {
        display: none;
    }
    
    /* Adjust header spacing */
    .header-inner {
        gap: 12px;
        padding: 0 16px;
    }
    
    .header-left {
        gap: 16px;
    }
    
    /* Smaller logo on mobile */
    .site-logo {
        height: var(--logo-height-mobile, 36px);
    }
    
    /* Tighter icon spacing */
    .header-icons {
        gap: 12px;
    }
    
    .header-icons a {
        width: 44px;
        height: 44px;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .header-inner {
        padding: 0 12px;
    }
    
    .header-left {
        gap: 12px;
    }
    
    .header-icons {
        gap: 8px;
    }
    
    .header-icons a {
        width: 40px;
        height: 40px;
    }
}

/* ===============================
   STICKY HEADER
================================ */

#site-header {
    transition: none !important;
}

/* When sticky is active - fixed positioning */
body.has-sticky-header #site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth slide-down animation - REMOVED OPACITY to prevent jitter */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Disable sticky if not enabled */
body:not(.has-sticky-header) #site-header {
    position: relative !important;
    top: auto !important;
}

/* WordPress admin bar compensation */
body.admin-bar #site-header.is-sticky {
    top: 32px;
}

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

/* Performance optimizations */
#site-header {
    /* Force GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    
    /* CSS containment for better performance */
    contain: layout style;
    
    /* Don't use will-change permanently - it hurts performance */
    will-change: auto;
}

/* Enhanced shadow on scroll (subtle difference) */
#site-header.is-scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ===============================
   HEADER ICON TOOLTIP
================================ */

.header-icons a::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-icons a:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(4px);
}

@media (max-width: 991px) {
    .header-icons a::after {
        display: none;
    }
}

/* FULL WIDTH MODE */
body.header-full-width .header-inner {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}

/* ===============================
   HEADER ICON COUNTER
================================ */

.header-icon-count,
.header-icons .count,
.header-icons .badge {
    position: absolute;
    top: -6px;
    right: -6px;

    min-width: 18px;
    height: 18px;

    background: var(--header-counter-bg);
    color: #fff;

    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;

    border-radius: 50%;
}

.header-wishlist-count,
.header-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ===============================
   WOOCOMMERCE
================================ */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
}

.woocommerce ul.products li.product {
	border: 1px solid #e5e7eb;
	padding: 15px;
	text-align: center;
	position: relative;
}

.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
}

.woocommerce ul.products li.product .price {
	color: var(--accent);
	font-weight: 600;
}

.woocommerce a.button {
	background: var(--accent);
	color: #fff;
	border-radius: 6px;
	padding: 10px 16px;
}

.woocommerce a.button:hover {
	opacity: .9;
}

.onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #ef4444;
	color: #fff;
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 4px;
}

/* ===============================
   SINGLE PRODUCT
================================ */
.single-product .product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

@media (max-width: 768px) {
	.single-product .product {
		grid-template-columns: 1fr;
	}
}

/* ===============================
   PAGE HEADER
================================ */

.page-header {
	min-height: var(--page-header-height);
	display: flex;
	align-items: center;
}

.page-header-inner {
	max-width: var(--page-boxed-width, 1200px);
	margin: 0 auto;
	text-align: center;
}

.page-title {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
}

.page-breadcrumbs {
	margin-top: 10px;
	font-size: 14px;
	opacity: .8;
}

/* Full width pages */
body.page-width-full .page-header-inner {
	max-width: 100%;
	padding: 0 40px;
}




/* ===============================
   PAGE WIDTH SYSTEM
================================ */

.site-content {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* FULL WIDTH */
.page-width-full .site-content {
	max-width: 100%;
}

/* BOXED WIDTH */
.page-width-boxed .site-content {
	max-width: var(--page-boxed-width);
}



/* =============================================
   PERFECTO FOOTER - TABLE BORDERS V2.3
============================================= */

/* BASE */
.site-footer { width:100%; font:14px/1.5 'Inter',sans-serif; margin-top:60px; color:#999; }
.site-footer * { box-sizing:border-box; }
.site-footer a { text-decoration:none; color:inherit; transition:.3s; }
.site-footer a:hover { color:#fff; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin-bottom:8px; }

/* WRAPPER */
.pf-wrap { max-width:1340px; padding:0 30px; margin:0 auto; }

/* =============================================
   TABLE LAYOUT - THICK VISIBLE BORDERS
============================================= */
.pf-footer-table { 
    background:linear-gradient(180deg,#0a0a0a,#111); 
    border-top:2px solid rgba(255,255,255,.12);
}

/* Newsletter Bar - THICK BOTTOM BORDER */
.pf-newsletter { 
    border-bottom:2px solid rgba(255,255,255,.12); 
    padding:30px 0; 
}

.pf-news-split { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.pf-news-split > div { display:flex; flex-direction:column; gap:4px; }
.pf-news-split strong { font-size:18px; font-weight:700; color:#fff; }
.pf-news-split span { font-size:13px; color:#777; }
.pf-news-split form { display:flex; border-bottom:2px solid rgba(255,255,255,.15); padding-bottom:6px; width:380px; }
.pf-news-split input { background:none; border:0; color:#fff; padding:8px 0; flex:1; outline:0; font-size:14px; }
.pf-news-split input::placeholder { color:#555; }
.pf-news-split button { background:none; border:0; color:#fff; cursor:pointer; padding:8px 12px; }
.pf-news-split button:hover { opacity:.7; }

.pf-news-center { text-align:center; max-width:580px; margin:0 auto; }
.pf-news-center strong { font-size:20px; font-weight:700; color:#fff; display:block; margin-bottom:18px; }
.pf-news-center form { display:flex; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:40px; padding:4px; margin-top:18px; }
.pf-news-center input { background:none; border:0; color:#fff; padding:10px 20px; flex:1; outline:0; }
.pf-news-center button { background:#fff; color:#000; padding:10px 28px; border-radius:40px; font-weight:700; font-size:12px; text-transform:uppercase; border:0; cursor:pointer; }

.pf-news-inline { display:flex; align-items:center; gap:18px; }
.pf-news-inline i { font-size:20px; color:#fff; }
.pf-news-inline span { font-size:14px; color:#fff; font-weight:600; }
.pf-news-inline form { display:flex; flex:1; max-width:400px; background:rgba(255,255,255,.05); border-radius:10px; padding:3px; }
.pf-news-inline input { background:none; border:0; color:#fff; padding:10px 18px; flex:1; outline:0; font-size:13px; }
.pf-news-inline button { background:#fff; color:#000; padding:10px 22px; border-radius:8px; font-weight:700; font-size:12px; border:0; cursor:pointer; }

/* Main Grid - THICK COLUMN BORDERS */
.pf-main { 
    padding:45px 0; 
}

.pf-grid { 
    display:grid; 
    gap:0; 
}

.pf-cols-4 { grid-template-columns:1.8fr 1fr 1fr 1fr; }
.pf-cols-3 { grid-template-columns:1.8fr 1.2fr 1.2fr; }
.pf-cols-2 { grid-template-columns:1.6fr 1fr; }

.pf-col { 
    display:flex; 
    flex-direction:column; 
    padding:0 40px;
    border-right:2px solid rgba(255,255,255,.12);
    min-height:200px;
}

.pf-col:first-child {
    padding-left:0;
}

.pf-col:last-child { 
    border-right:none; 
    padding-right:0;
}

.pf-col h4 { 
    font-size:11px; 
    font-weight:700; 
    text-transform:uppercase; 
    letter-spacing:1.5px; 
    color:#fff; 
    margin:0 0 20px; 
    opacity:.9; 
}

/* Logo & About */
.pf-logo { max-width:140px; height:auto; margin-bottom:20px; display:block; }
.pf-logo-text { font-size:22px; font-weight:800; color:#fff; margin-bottom:20px; text-transform:uppercase; }
.pf-about { margin:0 0 22px; color:#888; font-size:13px; line-height:1.6; max-width:300px; }

/* Contact Info */
.pf-contact { 
    display:flex; 
    flex-direction:column; 
    gap:12px; 
    margin-bottom:22px;
}

.pf-contact-item { 
    display:flex; 
    align-items:flex-start; 
    gap:12px; 
    font-size:13px; 
    color:#aaa;
}

.pf-contact-item i { 
    width:16px; 
    font-size:13px; 
    color:#fff; 
    margin-top:2px;
}

.pf-contact-item a { 
    color:#aaa; 
    border-bottom:1px solid rgba(255,255,255,.15); 
    padding-bottom:1px;
}

.pf-contact-item a:hover { 
    color:#fff; 
    border-color:#fff;
}

/* Menu */
.pf-menu { display:flex; flex-direction:column; gap:2px; }
.pf-menu a { padding:6px 0; display:inline-block; font-size:13px; transition:.3s; }
.pf-menu a:hover { transform:translateX(4px); }

/* Social */
.pf-social { display:flex; gap:10px; flex-wrap:wrap; }
.pf-social a { 
    width:36px; 
    height:36px; 
    border:1px solid rgba(255,255,255,.15); 
    border-radius:50%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:#fff; 
    font-size:14px; 
    background:rgba(255,255,255,.03); 
}
.pf-social a:hover { 
    background:#fff; 
    color:#000; 
    border-color:#fff; 
    transform:translateY(-3px); 
}

/* Bottom Bar - THICK TOP BORDER */
.pf-bottom { 
    border-top:2px solid rgba(255,255,255,.12); 
    padding:25px 0; 
}

.pf-flex { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    flex-wrap:wrap; 
    gap:25px; 
}

.pf-bottom-right {
    display:flex;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}

.pf-copy { font-size:12px; color:#666; }

.pf-apps { 
    display:flex; 
    gap:12px; 
}

.pf-apps a { 
    display:flex; 
    align-items:center; 
    gap:8px; 
    padding:8px 18px; 
    background:rgba(255,255,255,.05); 
    border:1px solid rgba(255,255,255,.15); 
    border-radius:8px; 
    font-size:13px; 
    font-weight:600;
    color:#fff;
}

.pf-apps a:hover { 
    background:rgba(255,255,255,.08); 
    border-color:rgba(255,255,255,.25);
}

.pf-apps i {
    font-size:16px;
}

.pf-payments { display:flex; gap:8px; flex-wrap:wrap; }
.pf-payments img { 
    height:24px; 
    background:#fff; 
    padding:3px 7px; 
    border-radius:4px; 
    opacity:.9; 
}
.pf-payments img:hover { 
    opacity:1; 
    transform:translateY(-2px); 
}

/* =============================================
   CARD LAYOUT
============================================= */
.pf-footer-card { 
    padding:0 20px 40px; 
    position:relative; 
}

.pf-card { 
    background:linear-gradient(135deg,#0f0f0f,#1a1a1a); 
    border-radius:20px; 
    padding:60px 45px 35px; 
    max-width:1340px; 
    margin:0 auto; 
    box-shadow:0 25px 70px rgba(0,0,0,.3); 
    border:1px solid rgba(255,255,255,.05); 
}

.pf-card .pf-grid { 
    margin-bottom:35px; 
    gap:40px;
}

.pf-card .pf-col {
    padding:0;
    border-right:none;
    min-height:auto;
}

.pf-divider { 
    height:1px; 
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); 
    margin:30px 0; 
}

.pf-social-bar { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    flex-wrap:wrap; 
    gap:30px; 
}

/* Newsletter Pill - Card */
.pf-pill { 
    position:absolute; 
    top:-26px; 
    left:0; 
    right:0; 
    max-width:600px; 
    margin:0 auto; 
    padding:0 20px; 
    z-index:20; 
}

.pf-pill form { 
    background:#fff; 
    border-radius:50px; 
    padding:6px; 
    display:flex; 
    box-shadow:0 12px 40px rgba(0,0,0,.2); 
}

.pf-pill input { 
    flex:1; 
    border:0; 
    outline:0; 
    padding:10px 22px; 
    font-size:14px; 
    color:#000; 
    background:none; 
}

.pf-pill button { 
    background:#000; 
    color:#fff; 
    border:0; 
    padding:10px 26px; 
    border-radius:50px; 
    font-weight:700; 
    font-size:12px; 
    text-transform:uppercase; 
    cursor:pointer; 
}

.pf-fancy { 
    background:#fff; 
    border-radius:50px; 
    padding:10px 15px; 
    display:flex; 
    align-items:center; 
    gap:18px; 
    box-shadow:0 12px 40px rgba(0,0,0,.2); 
}

.pf-fancy i { 
    width:40px; 
    height:40px; 
    background:#000; 
    border-radius:50%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:#fff; 
    font-size:18px; 
}

.pf-fancy > div { 
    display:flex; 
    flex-direction:column; 
    gap:2px; 
}

.pf-fancy strong { 
    font-size:14px; 
    font-weight:800; 
    color:#000; 
}

.pf-fancy span { 
    font-size:11px; 
    color:#666; 
}

.pf-fancy form { 
    display:flex; 
    gap:8px; 
    flex:1; 
}

.pf-fancy input { 
    flex:1; 
    border:1px solid #ddd; 
    outline:0; 
    padding:8px 15px; 
    font-size:13px; 
    border-radius:8px; 
}

.pf-fancy button { 
    background:#000; 
    color:#fff; 
    border:0; 
    padding:8px 20px; 
    border-radius:8px; 
    font-weight:700; 
    font-size:12px; 
    cursor:pointer; 
}

.pf-bold { 
    background:#fff; 
    border-radius:12px; 
    padding:8px 12px; 
    display:flex; 
    align-items:center; 
    gap:12px; 
    box-shadow:0 12px 40px rgba(0,0,0,.2); 
}

.pf-bold span { 
    font-size:11px; 
    font-weight:800; 
    text-transform:uppercase; 
    letter-spacing:1px; 
    color:#000; 
    padding:6px 14px; 
    background:#f3f4f6; 
    border-radius:20px; 
}

.pf-bold input { 
    flex:1; 
    border:0; 
    outline:0; 
    padding:10px 15px; 
    font-size:14px; 
}

.pf-bold button { 
    background:#000; 
    color:#fff; 
    border:0; 
    width:42px; 
    height:42px; 
    border-radius:8px; 
    cursor:pointer; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:16px; 
}




/* =============================================
   CF7 & PLUGIN INTEGRATION
============================================= */
.pf-newsletter .wpcf7-form,
.pf-newsletter .newsletter-form,
.pf-pill .wpcf7-form,
.pf-pill .newsletter-form {
    display: flex !important;
    width: 100%;
    gap: 8px;
    margin: 0;
}

.pf-newsletter .wpcf7-form input[type="email"],
.pf-newsletter .wpcf7-form input[type="text"],
.pf-newsletter .newsletter-form input[type="email"],
.pf-pill .wpcf7-form input[type="email"],
.pf-pill .newsletter-form input[type="email"] {
    flex: 1 !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    background: transparent !important;
    color: inherit !important;
    margin: 0 !important;
}

.pf-newsletter .wpcf7-form input[type="submit"],
.pf-newsletter .newsletter-form input[type="submit"],
.pf-pill .wpcf7-form input[type="submit"],
.pf-pill .newsletter-form input[type="submit"] {
    border: 0 !important;
    padding: 10px 28px !important;
    border-radius: 40px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    background: inherit !important;
    color: inherit !important;
    margin: 0 !important;
}

.pf-newsletter .wpcf7-response-output,
.pf-newsletter .wpcf7-spinner,
.pf-pill .wpcf7-response-output,
.pf-pill .wpcf7-spinner {
    display: none !important;
}




/* =============================================
   MOBILE RESPONSIVE - FIXED V3.1
============================================= */

@media (max-width:768px) {
    .site-footer { margin-top:40px; }
    .pf-wrap { padding:0 20px; }
    
    /* ===== NEWSLETTER MOBILE FIX ===== */
    .pf-newsletter { padding:25px 0; }
    
    /* Style 1 - Split becomes vertical centered */
    .pf-news-split { 
        flex-direction:column; 
        align-items:center; 
        text-align:center;
        gap:25px; 
    }
    .pf-news-split > div {
        align-items:center;
    }
    .pf-news-split form { 
        width:100%; 
        max-width:400px;
    }
    
    /* Style 2 - Already centered, just adjust width */
    .pf-news-center form {
        width:100%;
    }
    
    /* Style 3 - Inline becomes vertical */
    .pf-news-inline { 
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:15px;
    }
    .pf-news-inline form { 
        max-width:100%;
        width:100%;
    }
    
    /* Pill Newsletter Mobile - Card Layout */
    .pf-pill { 
        position:relative !important; 
        top:auto !important; 
        margin-bottom:25px; 
        max-width:90%;
        padding:0 15px;
    }
    
    .pf-pill form { 
        flex-direction:column; 
        gap:12px; 
        padding:20px; 
        border-radius:20px;
    }
    
    .pf-pill input {
        text-align:center;
        padding:14px 20px !important;
    }
    
    .pf-pill button { 
        width:100%;
        padding:14px !important;
    }
    
    .pf-fancy { 
        flex-direction:column; 
        padding:25px 20px; 
        border-radius:20px;
        text-align:center;
    }
    
    .pf-fancy > div {
        align-items:center;
    }
    
    .pf-fancy form { 
        flex-direction:column; 
        width:100%; 
        gap:12px; 
    }
    
    .pf-fancy input,
    .pf-fancy button { 
        width:100%;
        padding:14px 20px !important;
    }
    
    .pf-bold { 
        flex-direction:column; 
        padding:20px; 
        gap:15px;
        border-radius:16px;
    }
    
    .pf-bold span { 
        width:100%; 
        text-align:center; 
    }
    
    .pf-bold input {
        padding:14px 20px !important;
    }
    
    .pf-bold button { 
        width:100%; 
        height:52px;
        border-radius:12px;
    }
    
    /* ===== MAIN GRID ===== */
    .pf-main { padding:35px 0; }
    
    .pf-grid { 
        grid-template-columns:1fr !important; 
        gap:0 !important;
    }
    
    .pf-col { 
        padding:25px 0 !important;
        border-right:none !important;
        border-bottom:1px solid rgba(255,255,255,.08);
        min-height:auto !important;
    }
    
    .pf-col:last-child {
        border-bottom:none;
        padding-bottom:0 !important;
    }
    
    /* ===== SMOOTH ACCORDION MENUS ===== */
    .pf-mobile-accordion-enabled .pf-col.pf-menu-col {
        padding:0 !important;
        border-bottom:1px solid rgba(255,255,255,.08);
    }
    
    .pf-mobile-accordion-enabled .pf-col.pf-menu-col h4 {
        cursor:pointer;
        padding:20px 0;
        margin:0 !important;
        position:relative;
        user-select:none;
        transition:all .3s ease;
    }
    
    .pf-mobile-accordion-enabled .pf-col.pf-menu-col h4::after {
        content:'+';
        position:absolute;
        right:0;
        font-size:24px;
        font-weight:300;
        line-height:1;
        transition:transform .3s ease, opacity .3s ease;
    }
    
    .pf-mobile-accordion-enabled .pf-col.pf-menu-col h4.active::after {
        content:'−';
        transform:rotate(180deg);
    }
    
    .pf-mobile-accordion-enabled .pf-menu {
        display:block !important;
        max-height:0;
        overflow:hidden;
        opacity:0;
        transition:max-height .4s cubic-bezier(0.4, 0, 0.2, 1), 
                   opacity .3s ease,
                   padding .3s ease;
        padding-bottom:0;
        will-change:max-height;
    }
    
    .pf-mobile-accordion-enabled .pf-menu.active {
        max-height:800px;
        opacity:1;
        padding-bottom:20px;
    }
    
    /* Brand Column Never Accordion */
    .pf-col.pf-brand {
        padding:25px 0 !important;
        border-bottom:1px solid rgba(255,255,255,.08) !important;
    }
    
    /* ===== MOBILE ALIGNMENTS - FIXED ===== */
    
    /* Logo */
    .pf-mobile-logo-left .pf-logo,
    .pf-mobile-logo-left .pf-logo-text {
        margin-left:0 !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-logo-center .pf-logo,
    .pf-mobile-logo-center .pf-logo-text {
        margin-left:auto !important;
        margin-right:auto !important;
        display:block !important;
    }
    
    .pf-mobile-logo-right .pf-logo,
    .pf-mobile-logo-right .pf-logo-text {
        margin-left:auto !important;
        margin-right:0 !important;
        display:block !important;
    }
    
    /* About Text */
    .pf-mobile-about-left .pf-about { 
        text-align:left !important; 
        margin-left:0 !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-about-center .pf-about { 
        text-align:center !important; 
        max-width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-about-right .pf-about { 
        text-align:right !important;
        margin-left:auto !important;
        margin-right:0 !important;
    }
    
    /* Contact Info - FIXED */
    .pf-mobile-contact-left .pf-contact { 
        align-items:flex-start !important; 
    }
    
    .pf-mobile-contact-center .pf-contact { 
        align-items:center !important;
    }
    
    .pf-mobile-contact-center .pf-contact-item {
        justify-content:center !important;
        text-align:center !important;
    }
    
    .pf-mobile-contact-right .pf-contact { 
        align-items:flex-end !important; 
    }
    
    .pf-mobile-contact-right .pf-contact-item {
        justify-content:flex-end !important;
        text-align:right !important;
    }
    
    /* Social Icons - FIXED */
    .pf-mobile-social-left .pf-social { 
        justify-content:flex-start !important; 
        margin-left:0 !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-social-center .pf-social { 
        justify-content:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-social-right .pf-social { 
        justify-content:flex-end !important;
        margin-left:auto !important;
        margin-right:0 !important;
    }
    
    .pf-mobile-social-grid .pf-social {
        display:grid !important;
        grid-template-columns:repeat(4, 1fr) !important;
        gap:12px !important;
        max-width:200px !important;
    }
    
    /* Menu Items */
    .pf-mobile-menu-left .pf-menu { 
        align-items:flex-start !important; 
    }
    
    .pf-mobile-menu-center .pf-menu { 
        align-items:center !important; 
    }
    
    .pf-mobile-menu-center .pf-menu a {
        text-align:center !important;
    }
    
    .pf-mobile-menu-right .pf-menu { 
        align-items:flex-end !important; 
    }
    
    .pf-mobile-menu-right .pf-menu a {
        text-align:right !important;
    }
    
    /* ===== BOTTOM BAR ===== */
    .pf-bottom { padding:22px 0; }
    
    .pf-flex { 
        flex-direction:column !important; 
        gap:20px !important;
        align-items:stretch !important;
    }
    
    .pf-bottom-right { 
        flex-direction:column !important;
        align-items:stretch !important;
        gap:20px !important;
        width:100% !important;
    }
    
    /* Copyright - FIXED */
    .pf-mobile-copyright-left .pf-copy { 
        text-align:left !important; 
        width:100% !important;
    }
    
    .pf-mobile-copyright-center .pf-copy { 
        text-align:center !important;
        width:100% !important;
    }
    
    .pf-mobile-copyright-right .pf-copy { 
        text-align:right !important;
        width:100% !important;
    }
    
    /* Apps - FIXED */
    .pf-mobile-apps-left .pf-apps { 
        justify-content:flex-start !important;
        margin-left:0 !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-apps-center .pf-apps { 
        justify-content:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-apps-right .pf-apps { 
        justify-content:flex-end !important;
        margin-left:auto !important;
        margin-right:0 !important;
    }
    
    .pf-apps { 
        width:100% !important;
        flex-wrap:wrap !important;
        display:flex !important;
    }
    
    .pf-apps a { 
        flex:1 !important;
        min-width:140px !important;
        justify-content:center !important;
    }
    
    /* Payment Icons - FIXED */
    .pf-mobile-payment-left .pf-payments { 
        justify-content:flex-start !important;
        margin-left:0 !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-payment-center .pf-payments { 
        justify-content:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    
    .pf-mobile-payment-right .pf-payments { 
        justify-content:flex-end !important;
        margin-left:auto !important;
        margin-right:0 !important;
    }
    
    .pf-payments {
        width:100% !important;
        display:flex !important;
    }
    
    /* ===== HIDE ELEMENTS ===== */
    .pf-mobile-hide-about .pf-about { display:none !important; }
    .pf-mobile-hide-contact .pf-contact { display:none !important; }
    .pf-mobile-hide-address .pf-contact-item:has(.fa-map-marker-alt) { display:none !important; }
    .pf-mobile-hide-phone .pf-contact-item:has(.fa-phone-alt) { display:none !important; }
    .pf-mobile-hide-email .pf-contact-item:has(.fa-envelope) { display:none !important; }
    
    /* ===== CARD LAYOUT MOBILE ===== */
    .pf-card { 
        padding:50px 25px 28px; 
        border-radius:16px; 
    }
    
    .pf-social-bar { 
        flex-direction:column !important;
        align-items:stretch !important;
    }
    
    .pf-divider { margin:25px 0; }
}

@media (max-width:480px) {
    .pf-logo { max-width:120px; }
    .pf-logo-text { font-size:20px; }
    .pf-about { font-size:12px; }
    .pf-payments img { height:22px; }
    
    .pf-news-split strong,
    .pf-news-center strong,
    .pf-fancy strong { font-size:20px; }
    
    .pf-pill { max-width:95%; }
}


@media (max-width:768px) {
    /* Card Layout */
    .pf-footer-card {
        padding: 0 20px 40px !important;
    }
    
    .pf-card {
        padding: 50px 25px 28px !important;
        margin: 0 !important;
    }
    
    /* Newsletter Pill - Match card width exactly */
    .pf-pill {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* For table layout newsletter */
    .pf-footer-table .pf-newsletter {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .pf-footer-table .pf-newsletter .pf-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}





/* =========================================
   PREMIUM LANGUAGE POLY
========================================= */

/* 1. Main Container: align items horizontally */
.pf-topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px; /* Space between Language and Currency */
    height: 100%;
}

/* 2. Individual Items */
.pf-topbar-item {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

/* 3. Divider Line (Optional but looks premium) */
.pf-topbar-item:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background-color: rgba(255,255,255,0.2); /* Adjust opacity for dark/light mode */
    margin-left: 20px;
}

/* 4. Fix the "Install" text to look like a badge */
.pf-topbar-item span[style*="opacity"] {
    font-size: 10px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

/* 5. Language List Styling */
.pf-lang-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 10px;
}

.pf-lang-list li {
    display: flex;
    align-items: center;
}

.pf-lang-list a {
    text-decoration: none;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px; /* Space between Flag and Text */
}

/* 6. Currency Fix (Remove default margins) */
.pf-currency-switcher p {
    margin: 0; 
    padding: 0;
}


/* =========================================
   PREMIUM CURRENCY
========================================= */

/* 1. The Container - Anchors the dropdown */
.pf-currency-switcher,
.pf-custom-dropdown {
    position: relative; /* CRITICAL: Holds the absolute list */
    display: inline-flex;
    align-items: center;
    height: 100%;
}

/* 2. The Trigger Button (Visible Text) */
.pf-custom-dropdown .current-selected {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff; /* White text for dark topbar */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between text and arrow */
    padding: 10px 0; /* Increase clickable area */
    white-space: nowrap;
}

/* The Arrow Icon */
.pf-custom-dropdown .current-selected i {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

/* Rotate arrow on hover */
.pf-custom-dropdown:hover .current-selected i {
    transform: rotate(180deg);
}

/* 3. The Dropdown List (The Box) */
.pf-custom-dropdown .pf-dropdown-list {
    position: absolute;
    top: 100%;      /* Push it directly below */
    right: 0;       /* ALIGN TO RIGHT EDGE (Fixes your issue) */
    left: auto;     /* Prevent it from going left */
    
    background-color: #ffffff;
    min-width: 160px; /* Wider for premium look */
    padding: 8px 0;
    margin-top: 0px; 
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); /* Soft premium shadow */
    list-style: none;
    z-index: 9999;
    
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

/* Show on Hover */
.pf-custom-dropdown:hover .pf-dropdown-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 4. List Items */
.pf-custom-dropdown .pf-dropdown-list li {
    display: block;
    margin: 0;
}

.pf-custom-dropdown .pf-dropdown-list a {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out Name and Symbol */
    padding: 10px 20px;
    color: #333333;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s;
}

.pf-custom-dropdown .pf-dropdown-list a:hover {
    background-color: #f7f7f7;
    color: #000000;
}

.pf-custom-dropdown .pf-dropdown-list .curr-symbol {
    color: #999;
    font-size: 11px;
    font-weight: 600;
}


/* ===============================
   SOCIAL ICONS
================================ */

.footer-socials {
	display: flex;
	gap: 12px;
	justify-content: center;  
	align-items: center;
	flex-wrap: wrap;           
	width: 100%;
	margin-top: 10px;
}

/* icon box */
.footer-socials a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	flex-shrink: 0;           
}

/* icon */
.footer-socials i {
	font-size: 14px;
	color: var(--footer-text);
}

/* hover */
.footer-socials a:hover {
	background: var(--footer-heading);
	border-color: var(--footer-heading);
}

.footer-socials a:hover i {
	color: var(--footer-bg);
}


/* ===============================
   TOP BAR
================================ */

.perfecto-topbar {
	background: var(--topbar-bg);
	color: var(--topbar-text);
	font-size: 13px;
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
}

/* LEFT */
.topbar-left a {
	margin-right: 12px;
	color: inherit;
	font-size: 13px;
}

/* CENTER */
.topbar-center {
	text-align: center;
	flex: 1;
	font-weight: 500;
}

.topbar-center a {
	color: inherit;
	text-decoration: none;
}

/* RIGHT */
.topbar-right {
	font-weight: 500;
}




/* MOBILE */
@media (max-width: 767px) {

	.topbar-left,
	.topbar-right {
		display: none;
	}

	.topbar-center {
		width: 100%;
		text-align: center;
		font-size: 12px;
	}
}





/* ===============================
   SINGLE PRODUCT PAGE
================================ */

/* ===============================
   SINGLE PRODUCT PAGE - MODERN UI
================================ */

.pf-single {
  background: #fff;
  padding: 20px 0 60px;
}

/* Hide any product type text */
.product-type,
.product_type,
.woocommerce-product-type,
span.product-type-text {
  display: none !important;
}

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

/* ===============================
   BREADCRUMB
================================ */
.pf-breadcrumb {
  margin-bottom: 30px;
  font-size: 14px;
  color: #666;
}

.pf-breadcrumb a {
  color: #111;
  text-decoration: none;
  transition: color 0.3s;
}

.pf-breadcrumb a:hover {
  color: #000;
}

.pf-breadcrumb .separator {
  margin: 0 8px;
  color: #999;
}

/* ===============================
   TOP LAYOUT (Gallery + Summary)
================================ */
.pf-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 60px;
  align-items: flex-start;
}

@media (max-width: 968px) {
  .pf-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ===============================
   SUMMARY
================================ */
.pf-summary {
  position: relative;
}

/* Title - No icon, just title */
.pf-title {
  font-size: 32px;
  font-weight: 600;
  color: #111;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

/* Price and Rating Row (50% + 50%) */
.pf-price-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.pf-price {
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0;
}

.pf-price .price {
  font-size: 28px;
  font-weight: 700;
  color: #111;
}

.pf-price .price del {
  font-size: 20px;
  color: #999;
  margin-right: 8px;
}

.pf-rating-stars {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pf-rating-stars .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
}

.pf-rating-stars .star-rating {
  font-size: 14px;
  color: #fbbf24;
}

.pf-rating-stars .woocommerce-review-link {
  font-size: 14px;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
}

.pf-rating-stars .woocommerce-review-link:hover {
  color: #111;
  text-decoration: underline;
}

/* Viewers */
.pf-viewers {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin-bottom: 24px;
  font-size: 14px;
  color: #666;
  border: none;
}

.pf-viewers svg {
  flex-shrink: 0;
  color: #666;
}

.pf-viewers strong {
  color: #111;
  font-weight: 600;
}

/* Variation Options */
.pf-variation-option {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

/* ===============================
   WOOCOMMERCE VARIATIONS STYLING
================================ */

/* Hide WooCommerce's default quantity in variation form (we'll add custom one) */
.variations_form .woocommerce-variation-add-to-cart .quantity {
  display: none;
}

/* Hide default variation table */
.variations_form .variations {
  margin-bottom: 24px;
  border: none;
}

.variations_form table.variations {
  border: none;
  margin-bottom: 0;
}

.variations_form table.variations tr {
  border: none;
  display: block;
  margin-bottom: 20px;
}

.variations_form table.variations td,
.variations_form table.variations th {
  border: none;
  padding: 0;
  display: block;
}

/* Variation Label */
.variations_form table.variations label {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin-bottom: 12px;
  display: block;
}

/* Style select as modern buttons/swatches */
.variations_form .variations select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #111;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.variations_form .variations select:hover,
.variations_form .variations select:focus {
  border-color: #111;
  outline: none;
}

/* Reset/Clear link */
.variations_form .reset_variations {
  font-size: 14px;
  color: #666;
  margin-top: 12px;
  display: inline-block;
  text-decoration: none;
}

.variations_form .reset_variations:hover {
  color: #111;
  text-decoration: underline;
}

/* Single variation wrapper */
.variations_form .single_variation_wrap {
  margin-top: 20px;
}

.variations_form .single_variation {
  margin-bottom: 16px;
}

/* Variation price */
.variations_form .single_variation .price {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin-bottom: 12px;
}

/* Out of stock message */
.variations_form .out-of-stock {
  color: #dc2626;
  font-weight: 600;
}

/* WooCommerce adds quantity and button in woocommerce-variation-add-to-cart div */
.variations_form .woocommerce-variation-add-to-cart {
  margin-top: 20px;
}

/* Style the add to cart button that WooCommerce generates */
.variations_form .single_add_to_cart_button {
  width: 100%;
  background: #fff;
  color: #111;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  padding: 14px 24px;
  height: auto;
}

.variations_form .single_add_to_cart_button:hover {
  background: #f9fafb;
  border-color: #111;
}

.variations_form .single_add_to_cart_button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pf-variation-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pf-variation-label label {
  font-size: 15px;
  font-weight: 600;
  color: #111;
}

.pf-variation-label .selected-value {
  font-weight: 400;
  color: #666;
}

/* Size Chart Link */
.pf-size-chart-link {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-weight: 500;
}

.pf-size-chart-link:hover {
  color: #666;
}

.pf-size-chart-link svg {
  stroke-width: 2.5;
}

/* Color Swatches */
.pf-color-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.color-swatch {
  background: none;
  border: 2px solid #e5e7eb;
  padding: 3px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.color-swatch:hover,
.color-swatch.active {
  border-color: #111;
}

.color-circle {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}

/* Size Buttons */
.pf-size-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.size-btn {
  min-width: 56px;
  padding: 12px 18px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  color: #111;
}

.size-btn:hover {
  border-color: #111;
}

.size-btn.active {
  border-color: #111;
  background: #111;
  color: #fff;
}

/* Clear Selection */
.pf-clear-selection {
  background: none;
  border: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  margin-top: 12px;
  padding: 0;
}

.pf-clear-selection:hover {
  color: #111;
  text-decoration: underline;
}

/* Stock Status */
.pf-stock-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  margin-bottom: 20px;
  font-size: 14px;
  background: transparent;
  color: #16a34a;
}

.pf-stock-status.in-stock {
  background: transparent;
  color: #16a34a;
}

.pf-stock-status.out-of-stock {
  background: transparent;
  color: #dc2626;
}

.pf-stock-status svg {
  flex-shrink: 0;
  stroke: currentColor;
}

.pf-stock-status strong {
  font-weight: 600;
  color: currentColor;
}

/* Quantity Label */
.pf-qty-label {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin-bottom: 12px;
}

/* ===============================
   CART FORM
================================ */
.pf-cart-form {
  margin-bottom: 20px;
}

.pf-cart-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}

/* Quantity */
.pf-qty {
  display: flex;
  align-items: center;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  width: 140px;
  flex-shrink: 0;
}

.pf-qty .qty-btn {
  background: #fff;
  border: none;
  width: 44px;
  height: 52px;
  cursor: pointer;
  font-size: 18px;
  color: #111;
  transition: all 0.3s;
  flex-shrink: 0;
}

.pf-qty .qty-btn:hover {
  background: #f9fafb;
}

.pf-qty input[type="number"] {
  border: none;
  text-align: center;
  width: 52px;
  font-size: 16px;
  font-weight: 600;
  -moz-appearance: textfield;
  height: 52px;
  color: #111;
}

.pf-qty input[type="number"]::-webkit-outer-spin-button,
.pf-qty input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pf-qty input[type="number"]:focus {
  outline: none;
}

/* Add to Cart Button */
.pf-add-to-cart {
  flex: 1;
  background: #fff;
  color: #111;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0 24px;
  height: 52px;
}

.pf-add-to-cart:hover {
  background: #f9fafb;
  border-color: #111;
}



/* HIDE VIEW CART BUTTON */
.added_to_cart {
  display: none !important;
}

a.added_to_cart.wc-forward {
  display: none !important;
}

/* Buy Now Button */
.pf-buy-now {
  width: 100%;
  background: #111;
  color: #fff;
  border: 2px solid #111;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 24px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.pf-buy-now:hover {
  background: #000;
}

/* Action Buttons Row */
.pf-action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
}

.pf-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 15px;
  color: #111;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0;
  font-weight: 500;
}

.pf-action-btn:hover {
  color: #666;
}

.pf-action-btn svg {
  flex-shrink: 0;
}


/* ===============================
   DELIVERY INFO - 2 COLUMNS
================================ */
.pf-delivery-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.pf-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  font-size: 14px;
  color: #666;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.pf-info-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.pf-info-item strong {
  font-weight: 600;
  color: #111;
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .pf-delivery-info {
    grid-template-columns: 1fr;
  }
}

/* Payment */
.pf-payment {
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.pf-payment strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #111;
}

.payment-icons {
  margin-bottom: 12px;
}

.payment-icons img {
  max-width: 100%;
  height: auto;
}

.payment-text {
  font-size: 13px;
  color: #666;
}

/* ===============================
   META - CENTERED AFTER PAYMENT
================================ */
.pf-meta {
  font-size: 14px;
  color: #666;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.pf-meta .sku_wrapper,
.pf-meta .posted_in,
.pf-meta .tagged_as {
  margin: 8px 0;
  display: inline-block;
}

.pf-meta .sku_wrapper::after,
.pf-meta .posted_in::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #e5e7eb;
  margin: 0 12px;
  vertical-align: middle;
}

.pf-meta a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}

.pf-meta a:hover {
  color: #111;
}

/* ===============================
   TABS
================================ */
.pf-tabs {
  margin-bottom: 60px;
  clear: both;
}

.pf-tabs .woocommerce-tabs {
  border: none;
}

.pf-tabs .wc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e5e7eb;
  margin: 0 0 30px 0;
  padding: 0;
  list-style: none;
}

.pf-tabs .wc-tabs li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.pf-tabs .wc-tabs li::before,
.pf-tabs .wc-tabs li::after {
  display: none;
}

.pf-tabs .wc-tabs li a {
  display: block;
  padding: 16px 32px;
  color: #9ca3af;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
  position: relative;
}

.pf-tabs .wc-tabs li.active a,
.pf-tabs .wc-tabs li a:hover {
  color: #111;
  border-bottom-color: #111;
}

.pf-tabs .woocommerce-Tabs-panel {
  padding: 30px 0;
}

.pf-tabs .woocommerce-Tabs-panel h2 {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 600;
}

.pf-tabs .woocommerce-Tabs-panel p {
  font-size: 15px;
  line-height: 1.7;
  color: #666;
  margin-bottom: 16px;
}

/* ===============================
   MODALS
================================ */
.pf-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.pf-modal.active {
  display: flex;
}

.pf-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.pf-modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px;
  z-index: 1;
}

.pf-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 32px;
  color: #666;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
}

.pf-modal-close:hover {
  color: #000;
}

.pf-modal-body h3 {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 600;
}

/* Question Form */
.pf-question-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pf-question-form input,
.pf-question-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.pf-question-form input:focus,
.pf-question-form textarea:focus {
  outline: none;
  border-color: #111;
}

.pf-question-form button {
  background: #111;
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.pf-question-form button:hover {
  background: #000;
}


/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 968px) {
  .pf-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .pf-gallery {
    position: static;
  }
  
  /* Mobile Gallery - Proper Slider */
  .pf-gallery-inner {
    flex-direction: column;
    gap: 12px;
  }
  
  .pf-main-image {
    order: 1;
    height: 500px;
    width: 100%;
  }
  
  .pf-thumbnails {
    order: 2;
    flex-direction: row;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 0;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    /* HIDE SCROLLBAR on mobile too */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .pf-thumbnails::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  
  .pf-thumb {
    min-width: 80px;
    max-width: 80px;
    height: 80px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  
  .pf-thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 640px) {
  .pf-title {
    font-size: 24px;
  }
  
  .pf-price .price {
    font-size: 24px;
  }
  
  .pf-cart-row {
    flex-wrap: nowrap;
  }
  
  .pf-qty {
    width: 110px;
  }
  
  .pf-qty .qty-btn {
    width: 36px;
  }
  
  .pf-qty input[type="number"] {
    width: 38px;
  }
  
  .pf-action-buttons {
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .pf-tabs .wc-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .pf-tabs .wc-tabs li a {
    padding: 12px 20px;
    font-size: 14px;
    white-space: nowrap;
  }
  
  .pf-main-image {
    height: 400px;
  }
  
  .pf-thumb {
    min-width: 70px;
    max-width: 70px;
    height: 70px;
  }
  
  .pf-delivery-info {
    grid-template-columns: 1fr;
  }
}



/**
 * PERFECTO Enhanced WooCommerce Styles
 */

/* ===== COLOR SWATCHES ===== */
.pf-variations {
    margin-bottom: 24px;
}

.pf-variation-item {
    margin-bottom: 20px;
}

.pf-variation-label label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
    display: block;
}

.pf-hidden-select {
    display: none !important;
}

.pf-color-swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pf-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.pf-color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pf-color-swatch.selected {
    border-color: #1a1a1a;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1);
}

.pf-color-swatch .checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.pf-color-swatch.selected .checkmark {
    opacity: 1;
}

/* White swatch */
.pf-color-swatch[style*="background-color: #FFFFFF"] {
    border-color: #d0d0d0;
}

.pf-color-swatch[style*="background-color: #FFFFFF"] .checkmark {
    color: #1a1a1a;
    text-shadow: none;
}

/* ===== SIZE BUTTONS ===== */
.pf-size-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pf-size-btn {
    min-width: 48px;
    height: 40px;
    padding: 0 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-size-btn:hover {
    border-color: #1a1a1a;
    background: #f8f8f8;
}

.pf-size-btn.selected {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.pf-size-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


.reset_variations {
    font-size: 13px;
    color: #999;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 8px;
}

.reset_variations:hover {
    color: #1a1a1a;
}

/* ===== QUANTITY SELECTOR ===== */
.quantity {
    display: inline-flex;
    align-items: center;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.qty-wrapper {
    display: flex;
    align-items: center;
}

.qty-btn {
    width: 40px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    transition: background 0.2s ease;
}

.qty-btn:hover {
    background: #f8f8f8;
}

.quantity input[type="number"] {
    width: 60px;
    height: 48px;
    border: none;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    -moz-appearance: textfield;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity input[type="number"]:focus {
    outline: none;
}

/* ===== ADD TO CART BUTTON ===== */
.pf-cart-actions {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 20px;
}

.pf-add-to-cart-btn {
    flex: 1;
    height: 52px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.pf-add-to-cart-btn:hover {
    background: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pf-add-to-cart-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.pf-add-to-cart-btn.loading .btn-text {
    display: none;
}

.pf-add-to-cart-btn.loading .btn-loader {
    display: block !important;
}

.spinner {
    animation: rotate 1s linear infinite;
}

.spinner .path {
    stroke: #fff;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}


/* ===== STOCK STATUS ===== */
.pf-stock-status.in-stock {
    color: #10b981;
}

.pf-stock-status.in-stock svg {
    stroke: #10b981;
}

/* ===== SHOP PAGE ===== */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products li.product {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.woocommerce ul.products li.product img {
    width: 100%;
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.05);
}

.woocommerce span.onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .pf-cart-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}




/**
 * PERFECTO - Refined Brand Colors
 */

/* ===== BRAND COLORS - SUBTLE & PROFESSIONAL ===== */
:root {
    --perfecto-primary: #7B3FF2;
    --perfecto-primary-light: #9D6FF5;
    --perfecto-primary-dark: #5E2AC0;
    --perfecto-accent: #00D9D9;
    --perfecto-dark: #1a1a1a;
    --perfecto-border: #e0e0e0;
    --perfecto-hover: #f8f9fa;
}

/* ===== ADD TO CART BUTTON - CLEAN WHITE WITH BLACK BORDER ===== */
.pf-add-to-cart-btn {
    flex: 1;
    height: 52px !important;
    background: #fff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.pf-add-to-cart-btn:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2);
}

/* ===== BUY NOW BUTTON - SOLID BLACK ===== */
.pf-buy-now {
    width: 100%;
    height: 56px;
    background: #1a1a1a;
    color: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 12px;
}

.pf-buy-now:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ===== COLOR SWATCHES - MINIMAL ===== */
.pf-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.pf-color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pf-color-swatch.selected {
    border-color: #1a1a1a;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1);
}

/* ===== SIZE BUTTONS - MINIMAL ===== */
.pf-size-btn {
    min-width: 56px;
    height: 44px;
    padding: 0 20px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-size-btn:hover {
    border-color: #1a1a1a;
    background: #f8f9fa;
}

.pf-size-btn.selected {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

/* ========================================
   WISHLIST BUTTON - RED HEART FORCED
======================================== */

/* Default state - BLACK border, BLACK outline heart (NOT added) */
.pf-wishlist-btn,
.pf-grouped-wishlist .pf-wishlist-btn {
    width: 52px;
    height: 52px;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pf-wishlist-btn svg,
.pf-grouped-wishlist .pf-wishlist-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 2;
    transition: all 0.3s ease;
}


.pf-wishlist-btn:hover,
.pf-grouped-wishlist .pf-wishlist-btn:hover {
    border-color: #ef4444;
    background: #fee2e2; /* Light red background on hover */
    transform: scale(1.05);
}

/* Red heart on hover */
.pf-wishlist-btn:hover svg,
.pf-grouped-wishlist .pf-wishlist-btn:hover svg {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

.pf-wishlist-btn:hover svg path,
.pf-grouped-wishlist .pf-wishlist-btn:hover svg path {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

/* ADDED STATE - Red border, Red heart, Light red background */
.pf-wishlist-btn.added,
.pf-wishlist-btn.in-wishlist,
.pf-wishlist-btn.active,
.pf-grouped-wishlist .pf-wishlist-btn.added,
.pf-grouped-wishlist .pf-wishlist-btn.in-wishlist,
.pf-grouped-wishlist .pf-wishlist-btn.active {
    background: #fee2e2 !important; /* Light red background */
    border: 2px solid #ef4444 !important; /* Red border */
}

.pf-wishlist-btn.added svg,
.pf-wishlist-btn.in-wishlist svg,
.pf-wishlist-btn.active svg,
.pf-grouped-wishlist .pf-wishlist-btn.added svg,
.pf-grouped-wishlist .pf-wishlist-btn.in-wishlist svg,
.pf-grouped-wishlist .pf-wishlist-btn.active svg {
    fill: #ef4444 !important; /* Red filled heart - FORCED */
    stroke: #ef4444 !important; /* Red stroke - FORCED */
}

/* Also target the SVG path directly */
.pf-wishlist-btn.added svg path,
.pf-wishlist-btn.in-wishlist svg path,
.pf-wishlist-btn.active svg path,
.pf-grouped-wishlist .pf-wishlist-btn.added svg path,
.pf-grouped-wishlist .pf-wishlist-btn.in-wishlist svg path,
.pf-grouped-wishlist .pf-wishlist-btn.active svg path {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

/* Grouped products - smaller */
.pf-grouped-wishlist .pf-wishlist-btn {
    width: 40px;
    height: 40px;
}

.pf-grouped-wishlist .pf-wishlist-btn svg {
    width: 20px;
    height: 20px;
}





/* ===============================
   PERFECT EQUAL HEIGHT FIX
================================ */

.pf-simple-cart-form .pf-cart-actions {
  display: grid !important;
  grid-template-columns: auto 1fr 48px;
  gap: 10px;
  align-items: stretch;
}

/* Quantity wrapper */
.pf-simple-cart-form .quantity {
  display: flex;
  align-items: stretch;
  height: 48px;
  margin: 0 !important;
}

/* Remove label */
.pf-simple-cart-form .quantity label {
  display: none !important;
}

/* Quantity buttons & input */
.pf-simple-cart-form .quantity button,
.pf-simple-cart-form .quantity input.qty {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding: 0;
}

/* Input width */
.pf-simple-cart-form .quantity input.qty {
  width: 48px;
  text-align: center;
}

/* Add to cart */
.pf-simple-cart-form .pf-add-to-cart-btn {
  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Wishlist button – THIS was the issue */
.pf-simple-cart-form .pf-wishlist-btn {
  height: 48px !important;
  width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Normalize heart icon */
.pf-simple-cart-form .pf-wishlist-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}






/* ========================================
   ACCESSIBILITY - SCREEN READER TEXT
======================================== */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    clip: auto !important;
    clip-path: none;
    color: #000;
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}



/* ========================================
   GROUPED PRODUCTS - PROPER CLEAN DESIGN
======================================== */

.pf-grouped-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

/* ========================================
   DESKTOP LAYOUT
======================================== */
.pf-grouped-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.pf-grouped-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pf-grouped-item.out-of-stock {
    opacity: 0.6;
}

/* Product Image */
.pf-grouped-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.pf-grouped-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Info */
.pf-grouped-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-grouped-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.pf-grouped-title a {
    color: #1a1a1a;
    text-decoration: none;
}

/* Stock Badge */
.pf-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    width: fit-content;
}

.pf-stock-badge.in-stock {
    color: #10b981;
    background: #ecfdf5;
}

.pf-stock-badge.out-of-stock {
    color: #ef4444;
    background: #fef2f2;
}

/* Price */
.pf-grouped-price {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}

.pf-grouped-price del {
    color: #9ca3af;
    font-size: 14px;
    font-weight: 400;
    margin-right: 6px;
}

.pf-grouped-price ins {
    text-decoration: none;
    color: #ef4444;
}

/* Quantity Input */
.pf-grouped-quantity {
    min-width: 120px;
}

.pf-quantity-input {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.pf-qty-btn {
    width: 36px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    color: #6b7280;
}

.pf-qty-input {
    width: 48px;
    height: 40px;
    border: none;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    -moz-appearance: textfield;
}

.pf-qty-input::-webkit-outer-spin-button,
.pf-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pf-qty-input:focus {
    outline: none;
}

/* Wishlist Button */
.pf-grouped-wishlist .pf-wishlist-btn {
    width: 40px;
    height: 40px;
}

.pf-grouped-wishlist .pf-wishlist-btn svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   MOBILE LAYOUT - PROPER GRID
======================================== */

@media (max-width: 768px) {
    .pf-grouped-item {
        display: grid;
        grid-template-columns: 65px 1fr 80px; /* Changed: more space for middle */
        grid-template-rows: auto auto auto;
        gap: 10px;
        padding: 14px;
        align-items: start;
        overflow: visible; /* ADD THIS */
    }
    
    /* Row 1: Image | Title | Price */
    .pf-grouped-image {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 65px;
        height: 65px;
        align-self: center;
    }
    
    .pf-grouped-info {
        grid-column: 2;
        grid-row: 1;
        gap: 4px;
        overflow: visible; /* ADD THIS */
    }
    
    .pf-grouped-title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        margin: 0;
    }
    
    .pf-stock-badge {
        font-size: 11px;
        padding: 3px 6px;
        margin-top: 4px;
    }
    
    .pf-grouped-price {
        grid-column: 3;
        grid-row: 1;
        font-size: 15px;
        font-weight: 700;
        text-align: right;
        align-self: start;
    }
    
    /* Row 2: Quantity spans 2 columns | Wishlist */
    .pf-grouped-quantity {
        grid-column: 2 / 3; /* Span across more space */
        grid-row: 2;
        min-width: auto;
        justify-self: start;
        overflow: visible; /* ADD THIS */
    }
    
    .pf-grouped-wishlist {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: center;
    }
    
    /* Quantity Input - Full Width */
    .pf-quantity-input {
        display: flex;
        align-items: center;
        gap: 0;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        overflow: visible; /* Changed from hidden */
        background: #fff;
        width: 120px; /* Fixed width */
        height: 40px;
    }
    
    .pf-qty-btn {
        width: 34px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f9fafb;
        border: none;
        cursor: pointer;
        color: #6b7280;
        flex-shrink: 0;
    }
    
    .pf-qty-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .pf-qty-input {
        width: 52px;
        height: 40px;
        border: none;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        flex-shrink: 0;
    }
    
    /* Wishlist Button */
    .pf-grouped-wishlist .pf-wishlist-btn {
        width: 40px;
        height: 40px;
    }
    
    .pf-grouped-wishlist .pf-wishlist-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    .pf-grouped-item {
        grid-template-columns: 60px 1fr 75px;
        padding: 12px;
    }
    
    .pf-grouped-image {
        width: 60px;
        height: 60px;
    }
    
    .pf-grouped-title {
        font-size: 13px;
    }
    
    .pf-grouped-price {
        font-size: 14px;
    }
    
    .pf-quantity-input {
        width: 95px;
        height: 36px;
    }
    
    .pf-qty-btn {
        width: 28px;
        height: 36px;
    }
    
    .pf-qty-input {
        width: 39px;
        height: 36px;
        font-size: 13px;
    }
    
    .pf-grouped-wishlist .pf-wishlist-btn {
        width: 36px;
        height: 36px;
    }
}

/* ========================================
   BUTTONS - 50-50 ON ALL SCREENS
======================================== */

.pf-grouped-form .pf-product-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 24px;
}

.pf-grouped-form .pf-add-to-cart,
.pf-grouped-form .pf-buy-now {
    flex: 1;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.pf-grouped-form .pf-add-to-cart {
    background: #fff;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
}

.pf-grouped-form .pf-add-to-cart:hover {
    background: #1a1a1a;
    color: #fff;
}

.pf-grouped-form .pf-buy-now {
    background: #1a1a1a;
    color: #fff;
    border: 2px solid #1a1a1a;
}

.pf-grouped-form .pf-buy-now:hover {
    background: #000;
}

@media (max-width: 768px) {
    .pf-grouped-form .pf-add-to-cart,
    .pf-grouped-form .pf-buy-now {
        height: 48px;
        font-size: 14px;
    }
}




/* ========================================
   PRODUCT ACTIONS
======================================== */

.pf-product-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 24px; /* ← ADD THIS LINE */
    width: 100%;
}

.pf-product-actions .pf-add-to-cart,
.pf-product-actions .pf-buy-now {
    flex: 1; /* Equal width */
    height: 56px; /* Same height */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    margin: 0; /* Remove any default margins */
    padding: 0 24px;
}

.pf-product-actions .pf-add-to-cart {
    background: #fff;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
}

.pf-product-actions .pf-add-to-cart:hover {
    background: #1a1a1a;
    color: #fff;
}

.pf-product-actions .pf-buy-now {
    background: #1a1a1a;
    color: #fff;
    border: 2px solid #1a1a1a;
}

.pf-product-actions .pf-buy-now:hover {
    background: #000;
    border-color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* For grouped products - full width side by side */
.pf-grouped-form .pf-product-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pf-grouped-form .pf-add-to-cart,
.pf-grouped-form .pf-buy-now {
    flex: 1;
    height: 56px;
}

/* Mobile - stack buttons */
@media (max-width: 768px) {
    .pf-product-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .pf-product-actions .pf-add-to-cart,
    .pf-product-actions .pf-buy-now {
        width: 100%;
        height: 52px;
    }
}



/* ========================================
   PROFESSIONAL IMAGE GALLERY
======================================== */

/* Main image container */
.pf-main-image {
    position: relative;
    overflow: hidden;
}

.pf-main-image img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Image transitions */
.pf-main-image img.pf-transitioning {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pf-main-image img.pf-slide-left {
    animation: slideInLeft 0.3s ease;
}

.pf-main-image img.pf-slide-right {
    animation: slideInRight 0.3s ease;
}

@keyframes slideInLeft {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Navigation arrows */
.pf-gallery-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.pf-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
}

.pf-main-image:hover .pf-gallery-arrow {
    opacity: 1;
}

.pf-gallery-arrow svg {
    width: 24px;
    height: 24px;
    color: #1a1a1a;
}

.pf-gallery-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.pf-gallery-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.pf-gallery-arrow.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.pf-gallery-prev {
    left: 16px;
}

.pf-gallery-next {
    right: 16px;
}

/* Image counter */
.pf-gallery-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    z-index: 11;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pf-main-image:hover .pf-gallery-counter {
    opacity: 1;
}

.pf-gallery-counter .current {
    color: #fff;
}

/* ===== THUMBNAIL STYLING - CHECKMARK ===== */
.pf-thumb {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    opacity: 1;
}

.pf-thumb:hover {
    border-color: #d1d5db;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pf-thumb.active {
    border-color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Checkmark overlay */
.pf-thumb::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.pf-thumb.active::after {
    opacity: 1;
    transform: scale(1);
}

.pf-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1;
}
/* Mobile adjustments */
@media (max-width: 768px) {
    .pf-gallery-arrow {
        width: 40px;
        height: 40px;
        opacity: 0.9; /* Always visible on mobile */
    }
    
    .pf-gallery-arrow svg {
        width: 20px;
        height: 20px;
    }
    
    .pf-gallery-prev {
        left: 12px;
    }
    
    .pf-gallery-next {
        right: 12px;
    }
    
    .pf-gallery-counter {
        opacity: 1; /* Always visible on mobile */
        bottom: 12px;
    }
}

/* Loading state */
.pf-main-image img[src=""] {
    opacity: 0;
}

/* Smooth thumbnail scroll */
.pf-thumbnails {
    scroll-behavior: smooth;
}


/* ========================================
   GALLERY - FINAL WORKING VERSION
======================================== */

/* Desktop - Sticky gallery */
.pf-gallery {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.pf-gallery-inner {
    display: flex;
    gap: 20px;
}

/* ===== DESKTOP THUMBNAILS ===== */
.pf-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 95px;
    min-width: 95px;
    order: 1;
}

.pf-thumbnails-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 4px 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.pf-thumbnails-wrapper::-webkit-scrollbar {
    display: none;
}

.pf-thumb {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    flex-shrink: 0;
    position: relative;
    opacity: 0.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pf-thumb::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: #1a1a1a;
    border-radius: 2px;
    transition: all 0.3s ease;
    z-index: 10;
}

.pf-thumb:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.pf-thumb.active {
    opacity: 1;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.pf-thumb.active::before {
    height: 100%;
}

.pf-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 1;
    transition: transform 0.3s ease;
}

.pf-thumb:hover img {
    transform: scale(1.05);
}

/* ===== DESKTOP MAIN IMAGE ===== */
.pf-main-image {
    flex: 1;
    order: 2;
    max-width: 600px;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
    height: auto;
    max-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pf-main-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 650px;
}

/* ========================================
   MOBILE - HORIZONTAL SLIDER (FINAL)
======================================== */

@media (max-width: 1024px) {
    
    /* Remove sticky */
    .pf-gallery {
        position: relative;
        top: 0;
    }
    
    /* Stack vertically: image top, thumbnails bottom */
    .pf-gallery-inner {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    /* Main image first - better sizing */
    .pf-main-image {
        order: 1;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 350px;
        max-height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .pf-main-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        max-height: 500px;
    }
    
    /* Thumbnails container - HORIZONTAL */
    .pf-thumbnails {
        order: 2;
        display: block;
        flex-direction: row;
        width: 100%;
        min-width: 100%;
        height: 85px;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    
    /* Wrapper - HORIZONTAL SCROLL */
    .pf-thumbnails-wrapper {
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        height: 80px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .pf-thumbnails-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    /* Thumbnails - FIXED SIZE */
    .pf-thumb {
        min-width: 75px;
        max-width: 75px;
        width: 75px;
        height: 75px;
        flex-shrink: 0;
        transform: none;
        opacity: 0.6;
    }
    
    .pf-thumb:hover {
        opacity: 0.85;
        transform: scale(1.03);
    }
    
    .pf-thumb.active {
        opacity: 1;
        transform: scale(1.08);
    }
    
    .pf-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Bottom indicator bar */
   .pf-thumb::before {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        top: auto !important;
        bottom: -2px !important;
        transform: translateX(-50%) !important;
        width: 0 !important;
        height: 3px !important;
        background: #1a1a1a !important;
        border-radius: 0 !important;
        z-index: 1 !important;
        transition: width 0.3s ease !important;
    }
    
    .pf-thumb.active::before {
        width: 60% !important;
    }
    
    /* Remove any other pseudo elements on mobile */
    .pf-thumb::after {
        display: none !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .pf-main-image {
        min-height: 300px;
        max-height: 400px;
    }
    
    .pf-main-image img {
        max-height: 400px;
    }
    
    .pf-thumbnails {
        height: 75px;
    }
    
    .pf-thumbnails-wrapper {
        height: 70px;
    }
    
    .pf-thumb {
        min-width: 65px;
        max-width: 65px;
        width: 65px;
        height: 65px;
    }
}





/* ========================================
   SMOOTH SLIDE ANIMATIONS
======================================== */

.pf-main-image {
    position: relative;
    overflow: hidden;
}

.pf-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slide animation using CSS */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}


/* ===============================
   REMOVE BLUE FOCUS BORDERS
================================ */

.action-btn:focus,
.action-btn:focus-visible,
.pf-wishlist-btn:focus,
.pf-wishlist-btn:focus-visible,
.quick-view-btn:focus,
.quick-view-btn:focus-visible,
.compare-btn:focus,
.compare-btn:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
a:focus,
a:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border-color: inherit !important;
}

/* Remove blue border on all elements */
*:focus,
*:focus-visible {
	outline: none !important;
}

/* Specifically for action buttons */
.card-actions button:focus,
.card-actions button:active {
	outline: none !important;
	box-shadow: none !important;
}

/* ===============================
   MOBILE MODERN PRODUCT PAGE - WITH !important
================================ */

@media (max-width: 1024px) {
    

    
    /* ===== HIDE TOPBAR + HEADER - MOBILE MODERN ONLY ===== */
    
    /* Hide topbar */
    body:has(.pf-single-mobile-modern) .perfecto-topbar,
    body:has(.pf-single-mobile-modern) .pf-topbar,
    body:has(.pf-single-mobile-modern) .topbar,
    body:has(.pf-single-mobile-modern) .top-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
    }
    
    /* Hide header */
    body:has(.pf-single-mobile-modern) header,
    body:has(.pf-single-mobile-modern) .site-header,
    body:has(.pf-single-mobile-modern) .pf-header,
    body:has(.pf-single-mobile-modern) #masthead {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
    }
    
    /* Remove body top spacing when modern layout active */
    body:has(.pf-single-mobile-modern) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    
    /* ===== HERO GALLERY ===== */
    
    .pf-hero-image {
        position: relative !important;
        width: 100% !important;
        height: 70vh !important;
        overflow: hidden !important;
        background: #000 !important;
        touch-action: pan-y !important;
    }
    
    .pf-hero-slide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        transition: opacity 0.4s ease !important;
        pointer-events: none !important;
    }
    
    .pf-hero-slide.active {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .pf-hero-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* ===== RATING BADGE - EXACT SAME AS SHOP PAGE ===== */
    
    .pf-hero-rating {
        position: absolute !important;
        bottom: 8px !important;
        left: 8px !important;
        padding: 3px 8px !important;
        border-radius: 2px !important;
        background: #ffffff !important;
        border: 1px solid #d4d5d9 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        z-index: 5 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .pf-hero-rating .rating-number {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #282c3f !important;
        line-height: 1 !important;
    }
    
    .pf-hero-rating .rating-star {
        width: 10px !important;
        height: 10px !important;
    }
    
    .pf-hero-rating .rating-separator {
        font-size: 11px !important;
        color: #d4d5d9 !important;
    }
    
    .pf-hero-rating .rating-count {
        font-size: 10px !important;
        color: #535766 !important;
        font-weight: 500 !important;
    }
    
    /* ===== HERO BUTTONS ===== */
    
    .pf-hero-back,
    .pf-hero-wishlist,
    .pf-hero-share {
        position: absolute !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(0,0,0,0.4) !important;
        border: none !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 10 !important;
        backdrop-filter: blur(10px) !important;
        transition: all 0.2s ease !important;
    }
    
    .pf-hero-back {
        top: 20px !important;
        left: 16px !important;
    }
    
    .pf-hero-wishlist {
        top: 20px !important;
        right: 16px !important;
    }
    
    .pf-hero-share {
        top: 70px !important;
        right: 16px !important;
    }
    
    .pf-hero-back svg,
    .pf-hero-share svg {
        color: #fff !important;
    }
    
    .pf-hero-wishlist svg {
        stroke: #fff !important;
        fill: transparent !important;
    }
    
    .pf-hero-wishlist.in-wishlist,
    .pf-hero-wishlist.active,
    .pf-hero-wishlist.added {
        background: rgba(239, 68, 68, 0.9) !important;
    }
    
    .pf-hero-wishlist.in-wishlist svg,
    .pf-hero-wishlist.active svg,
    .pf-hero-wishlist.added svg {
        fill: #fff !important;
        stroke: #fff !important;
    }
    
    /* ===== GALLERY DOTS ===== */
    
    .pf-hero-dots {
        position: absolute !important;
        bottom: 12px !important;
        right: 12px !important;
        display: flex !important;
        gap: 6px !important;
        z-index: 10 !important;
    }
    
    .pf-hero-dots .dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.5) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .pf-hero-dots .dot.active {
        background: #fff !important;
        width: 20px !important;
        border-radius: 3px !important;
    }
    
    /* ===== CONTENT AREA ===== */
    
    .pf-mobile-content {
        padding: 20px 16px 100px !important;
        background: #fff !important;
    }
    
    /* Category Badge - 25% SMALLER */
    .pf-mobile-category {
        margin-bottom: 10px !important;
    }
    
    .category-badge {
        display: inline-block !important;
        background: #3b82f6 !important;
        color: #fff !important;
        font-size: 7px !important;
        font-weight: 700 !important;
        padding: 3px 10px !important;
        border-radius: 3px !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
    }
    
    /* Title - 15% SMALLER */
    .pf-mobile-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #000 !important;
        margin: 0 0 12px 0 !important;
    }
    
    /* Price - KEEP ORIGINAL SIZE */
    .pf-mobile-price {
        font-size: 36px !important;
        font-weight: 800 !important;
        color: #000 !important;
        margin-bottom: 12px !important;
    }
    
    .pf-mobile-price del {
        font-size: 20px !important;
        color: #9ca3af !important;
        margin-right: 8px !important;
    }
    
    .pf-mobile-price ins {
        text-decoration: none !important;
        color: #ef4444 !important;
    }
    
    /* Rating Summary */
    .pf-mobile-reviews {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    
    .pf-mobile-reviews .stars {
        display: flex !important;
        gap: 2px !important;
    }
    
    .pf-mobile-reviews .star {
        font-size: 16px !important;
        color: #d1d5db !important;
    }
    
    .pf-mobile-reviews .star.filled {
        color: #fbbf24 !important;
    }
    
    .pf-mobile-reviews .rating-text {
        font-size: 14px !important;
        color: #6b7280 !important;
    }
    
    /* Stock */
    .pf-mobile-stock {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 12px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 20px !important;
    }
    
    .pf-mobile-stock.in-stock {
        background: #d1fae5 !important;
        color: #065f46 !important;
    }
    
    .pf-mobile-stock.out-stock {
        background: #fee2e2 !important;
        color: #991b1b !important;
    }
    
    /* Variations */
    /* Variations - NO BACKGROUND */
.pf-mobile-variations {
    margin: 20px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Hide Add to Cart buttons inside variations (we have sticky!) */
.pf-mobile-variations .single_add_to_cart_button,
.pf-mobile-variations .pf-buy-now,
.pf-mobile-variations button[type="submit"],
.pf-mobile-variations .woocommerce-variation-add-to-cart {
    display: none !important;
}

/* Hide quantity input inside variations (we have sticky!) */
.pf-mobile-variations .quantity,
.pf-mobile-variations label[for*="quantity"],
.pf-mobile-variations .woocommerce-variation-add-to-cart .quantity {
    display: none !important;
}

/* Keep variation selectors visible */
.pf-mobile-variations .variations,
.pf-mobile-variations table.variations,
.pf-mobile-variations .pf-variation-swatches,
.pf-mobile-variations select,
.pf-mobile-variations .reset_variations {
    display: block !important;
}

/* Make variation labels/selects look clean */
.pf-mobile-variations table.variations td,
.pf-mobile-variations table.variations th {
    padding: 12px 0 !important;
    background: transparent !important;
    border: none !important;
}

.pf-mobile-variations table.variations {
    border: none !important;
    background: transparent !important;
}

/* Grouped products - same treatment */
.pf-mobile-variations .woocommerce-grouped-product-list {
    border: none !important;
    background: transparent !important;
}

.pf-mobile-variations .woocommerce-grouped-product-list-item {
    background: transparent !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* External products - hide button */
.pf-mobile-variations .product_type_external {
    display: none !important;
}


/* Hide default WooCommerce select dropdowns (we have swatches!) */
.pf-mobile-variations table.variations select,
.pf-mobile-variations .variations select {
    display: none !important;
}

/* Hide the variation labels if you want */
.pf-mobile-variations table.variations label,
.pf-mobile-variations .variations label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
    margin-bottom: 8px !important;
}

/* Show only swatches */
.pf-mobile-variations .pf-variation-swatches,
.pf-mobile-variations .pf-color-swatches,
.pf-mobile-variations .pf-size-buttons {
    display: flex !important;
}


/* Hide wishlist button in content (we have hero wishlist!) */
.pf-mobile-variations .pf-wishlist-btn,
.pf-mobile-content .pf-product-wishlist,
.pf-mobile-content .pf-wishlist-button,
.pf-mobile-content > .pf-wishlist-btn {
    display: none !important;
}

/* Keep ONLY hero wishlist visible */
.pf-hero-wishlist {
    display: flex !important;
}

    /* Hide quantity label & input from variations */
    .pf-mobile-variations .quantity,
    .pf-mobile-variations label[for*="quantity"] {
        display: none !important;
    }
    
    /* Delivery Info */
    .pf-mobile-delivery {
        margin: 20px 0 !important;
        padding: 16px !important;
        background: #f9fafb !important;
        border-radius: 12px !important;
    }
    
    .delivery-item {
        display: flex !important;
        gap: 12px !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .delivery-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    
    .delivery-item svg {
        color: #3b82f6 !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
    }
    
    .delivery-item strong {
        display: block !important;
        font-size: 14px !important;
        color: #111 !important;
        margin-bottom: 2px !important;
    }
    
    .delivery-item span {
        font-size: 12px !important;
        color: #6b7280 !important;
    }
    
    /* Trust Badges - INLINE GRID */
    .pf-trust-badges {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin: 20px 0 !important;
    }
    
    .trust-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 12px 8px !important;
        background: #f0fdf4 !important;
        border-radius: 8px !important;
        text-align: center !important;
    }
    
    .trust-item svg {
        color: #10b981 !important;
        flex-shrink: 0 !important;
    }
    
    .trust-item span {
        font-size: 11px !important;
        color: #065f46 !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    
    /* Payment Methods - INLINE GRID */
    .pf-payment-methods {
        margin: 20px 0 !important;
        padding: 16px !important;
        background: #fef3c7 !important;
        border-radius: 12px !important;
    }
    
    .payment-label {
        display: block !important;
        font-size: 12px !important;
        color: #92400e !important;
        margin-bottom: 10px !important;
        font-weight: 600 !important;
    }
    
    .payment-icons {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }
    
    .payment-icon {
        font-size: 10px !important;
        padding: 6px 4px !important;
        background: #fff !important;
        border-radius: 4px !important;
        color: #78350f !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    /* Description */
    .pf-mobile-description {
        margin: 20px 0 !important;
        padding-top: 20px !important;
        border-top: 1px solid #e5e7eb !important;
    }
    
    .pf-mobile-description h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin: 0 0 12px 0 !important;
    }
    
    .pf-mobile-description p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        color: #374151 !important;
    }
    
    /* ===== REVIEWS SECTION ===== */
    
    .pf-mobile-reviews-section {
        margin: 30px 0 !important;
        padding-top: 30px !important;
        border-top: 2px solid #e5e7eb !important;
    }
    
    .section-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin: 0 0 20px 0 !important;
        color: #111 !important;
    }
    
    .reviews-summary {
        display: grid !important;
        grid-template-columns: 120px 1fr !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
        padding: 20px !important;
        background: #f9fafb !important;
        border-radius: 12px !important;
    }
    
    .summary-left {
        text-align: center !important;
    }
    
    .big-rating {
        font-size: 48px !important;
        font-weight: 800 !important;
        color: #111 !important;
        line-height: 1 !important;
    }
    
    .stars-display {
        margin: 8px 0 !important;
    }
    
    .stars-display .star {
        font-size: 18px !important;
        color: #d1d5db !important;
    }
    
    .stars-display .star.filled {
        color: #fbbf24 !important;
    }
    
    .total-reviews {
        font-size: 13px !important;
        color: #6b7280 !important;
    }
    
    .rating-bar {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .bar-label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        width: 30px !important;
    }
    
    .bar-track {
        flex: 1 !important;
        height: 6px !important;
        background: #e5e7eb !important;
        border-radius: 3px !important;
        overflow: hidden !important;
    }
    
    .bar-fill {
        height: 100% !important;
        background: #fbbf24 !important;
        transition: width 0.3s ease !important;
    }
    
    .bar-count {
        font-size: 12px !important;
        color: #9ca3af !important;
        width: 30px !important;
        text-align: right !important;
    }
    
    /* ===== RELATED PRODUCTS ===== */
    
    .pf-mobile-related {
        margin: 30px 0 !important;
    }
    
    .pf-related-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* ===== STICKY BAR - BULLETPROOF FIX ===== */
    
   /* ===== STICKY BAR - SUPER SIMPLE FIX ===== */

.pf-mobile-sticky-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    background: #fff !important;
    padding: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    gap: 8px !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Quantity - 20% of screen */
.pf-sticky-qty {
    width: 20% !important;
    max-width: 80px !important;
    min-width: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f5f5f5 !important;
    border-radius: 6px !important;
    height: 44px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.pf-sticky-qty .qty-btn {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pf-sticky-qty .qty-input {
    width: calc(100% - 44px) !important;
    max-width: 36px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111 !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    flex-shrink: 1 !important;
}

.pf-sticky-qty .qty-input::-webkit-inner-spin-button,
.pf-sticky-qty .qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* Buttons - 40% each */
.pf-sticky-btn {
    width: 40% !important;
    flex: 1 1 40% !important;
    height: 44px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: transform 0.2s ease !important;
    white-space: nowrap !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pf-sticky-cart {
    background: #000 !important;
    color: #fff !important;
}

.pf-sticky-cart svg {
    stroke: #fff !important;
    fill: none !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
}

.pf-sticky-buy {
    background: #ef4444 !important;
    color: #fff !important;
}

.pf-sticky-btn:active {
    transform: scale(0.96) !important;
}

}

/* Tiny screens */
@media (max-width: 375px) {
    .pf-sticky-qty {
        width: 22% !important;
        min-width: 60px !important;
    }
    
    .pf-sticky-btn {
        font-size: 12px !important;
        gap: 3px !important;
        padding: 0 4px !important;
    }
    
    .pf-sticky-cart svg {
        width: 14px !important;
        height: 14px !important;
    }
}


/* ===============================
   GLOBAL REVIEWS SECTION - PREMIUM CARD STYLE
================================ */

/* Container */
.woocommerce-reviews,
.pf-accordion-content .woocommerce-reviews {
    margin-top: 20px;
}

/* Hide default heading */
.woocommerce-Reviews #comments h2,
.woocommerce-Reviews-title {
    display: none;
}

/* ===== REVIEW SUMMARY ===== */

.reviews-summary {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 30px;
    margin-bottom: 40px;
    padding: 30px;
    background: #f9fafb;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
    .reviews-summary {
        grid-template-columns: 120px 1fr;
        gap: 20px;
        padding: 20px;
    }
}

.summary-left {
    text-align: center;
}

.big-rating {
    font-size: 56px;
    font-weight: 800;
    color: #111;
    line-height: 1;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .big-rating {
        font-size: 48px;
    }
}

.stars-display {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    gap: 3px;
}

.stars-display .star {
    font-size: 20px;
    color: #d1d5db;
}

.stars-display .star.filled {
    color: #fbbf24;
}

.total-reviews {
    font-size: 14px;
    color: #6b7280;
    margin-top: 8px;
}

/* Rating Bars */
.summary-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.rating-bar:last-child {
    margin-bottom: 0;
}

.bar-stars {
    display: flex;
    gap: 1px;
    min-width: 70px;
}

.bar-stars .mini-star {
    font-size: 11px;
    color: #d1d5db;
}

.bar-stars .mini-star.filled {
    color: #fbbf24;
}

.bar-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    transition: width 0.5s ease;
}

.bar-count {
    font-size: 13px;
    color: #9ca3af;
    min-width: 35px;
    text-align: right;
    font-weight: 600;
}

@media (max-width: 768px) {
    .bar-stars {
        min-width: 60px;
    }
    
    .bar-stars .mini-star {
        font-size: 10px;
    }
    
    .bar-track {
        height: 6px;
    }
    
    .bar-count {
        min-width: 30px;
        font-size: 12px;
    }
}

/* ===== INDIVIDUAL REVIEW CARDS ===== */

.commentlist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.commentlist .comment {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.commentlist .comment:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    border-color: #d1d5db !important;
}

@media (max-width: 768px) {
    .commentlist .comment {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
}

.comment_container {
    position: relative !important;
}

.comment-text {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Avatar */
.avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    float: left !important;
    margin-right: 16px !important;
    border: 2px solid #e5e7eb !important;
    background: #f9fafb !important;
}

@media (max-width: 768px) {
    .avatar {
        width: 40px !important;
        height: 40px !important;
        margin-right: 12px !important;
    }
}

/* Reviewer Info */
.woocommerce-review__author {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 4px 0 !important;
    display: block !important;
}

@media (max-width: 768px) {
    .woocommerce-review__author {
        font-size: 15px !important;
    }
}

.woocommerce-review__published-date {
    font-size: 13px !important;
    color: #9ca3af !important;
    margin: 0 0 12px 0 !important;
    display: block !important;
}

@media (max-width: 768px) {
    .woocommerce-review__published-date {
        font-size: 12px !important;
    }
}

/* Star Rating in Reviews - HIDE TEXT, SHOW STARS */
.commentlist .star-rating {
    position: relative !important;
    display: inline-block !important;
    width: 90px !important;
    height: 18px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    margin: 0 0 12px 0 !important;
}

.commentlist .star-rating::before {
    content: "★★★★★" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    color: #e5e7eb !important;
    font-size: 17px !important;
    letter-spacing: 3px !important;
    font-family: Arial, sans-serif !important;
}

.commentlist .star-rating span {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
}

.commentlist .star-rating span strong {
    font-size: 0 !important;
    display: none !important;
}

.commentlist .star-rating span::before {
    content: "★★★★★" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    color: #fbbf24 !important;
    font-size: 17px !important;
    letter-spacing: 3px !important;
    font-family: Arial, sans-serif !important;
}

@media (max-width: 768px) {
    .commentlist .star-rating {
        width: 85px !important;
        height: 16px !important;
    }
    
    .commentlist .star-rating::before,
    .commentlist .star-rating span::before {
        font-size: 16px !important;
    }
}

/* Verified Badge */
.woocommerce-review__verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: #10b981 !important;
    font-weight: 600 !important;
    background: #d1fae5 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin: 0 0 12px 0 !important;
}

.woocommerce-review__verified::before {
    content: "✓" !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

@media (max-width: 768px) {
    .woocommerce-review__verified {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }
}

/* Review Text */
.description {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #374151 !important;
    margin: 0 !important;
    clear: both !important;
}

.description p {
    margin: 0 0 12px 0 !important;
}

.description p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .description {
        font-size: 14px !important;
    }
}

/* ===== REVIEW FORM ===== */

#review_form_wrapper {
    margin-top: 40px !important;
    padding: 30px !important;
    background: #f9fafb !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
}

@media (max-width: 768px) {
    #review_form_wrapper {
        margin-top: 30px !important;
        padding: 20px !important;
    }
}

#reply-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 24px 0 !important;
    color: #111 !important;
}

@media (max-width: 768px) {
    #reply-title {
        font-size: 18px !important;
        margin: 0 0 20px 0 !important;
    }
}

.comment-form-rating label {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
    color: #374151 !important;
}

.comment-form-rating .stars {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
}

.comment-form-rating .stars a {
    font-size: 28px !important;
    color: #d1d5db !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.comment-form-rating .stars a:hover,
.comment-form-rating .stars a.active {
    color: #fbbf24 !important;
    transform: scale(1.1) !important;
}

@media (max-width: 768px) {
    .comment-form-rating label {
        font-size: 14px !important;
    }
    
    .comment-form-rating .stars a {
        font-size: 24px !important;
    }
}

/* Form Fields */
#respond input[type="text"],
#respond input[type="email"],
#respond textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    margin-bottom: 16px !important;
    background: #fff !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
}

#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond textarea:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#respond textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

@media (max-width: 768px) {
    #respond input[type="text"],
    #respond input[type="email"],
    #respond textarea {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    #respond textarea {
        min-height: 120px !important;
    }
}

/* Submit Button */
#respond .form-submit {
    margin-bottom: 0 !important;
}

#respond .form-submit input[type="submit"] {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 40px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
}

#respond .form-submit input[type="submit"]:hover {
    background: #1f2937 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

#respond .form-submit input[type="submit"]:active {
    transform: translateY(0) !important;
}

@media (max-width: 768px) {
    #respond .form-submit input[type="submit"] {
        padding: 12px 32px !important;
        font-size: 15px !important;
    }
}

/* No Reviews Message */
.woocommerce-noreviews {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #9ca3af !important;
    font-size: 15px !important;
    background: #f9fafb !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
}

@media (max-width: 768px) {
    .woocommerce-noreviews {
        padding: 40px 20px !important;
        font-size: 14px !important;
    }
}

/* ===============================
   REVIEW FORM STARS - WITH HOVER
================================ */

.comment-form-rating .stars {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
}

/* Hide the text completely */
.comment-form-rating .stars a {
    font-size: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-block !important;
    position: relative !important;
    text-indent: -9999px !important;
    transition: transform 0.2s ease !important;
}

/* Show star icon instead */
.comment-form-rating .stars a::before {
    content: "★" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 28px !important;
    color: #d1d5db !important;
    text-indent: 0 !important;
    font-family: Arial, sans-serif !important;
    transition: color 0.2s ease !important;
}

/* Hover effect */
.comment-form-rating .stars a.hover-active::before,
.comment-form-rating .stars a:hover::before {
    color: #fbbf24 !important;
}

/* Active (clicked) state */
.comment-form-rating .stars a.active::before {
    color: #fbbf24 !important;
}

/* Scale on hover */
.comment-form-rating .stars a:hover {
    transform: scale(1.15) !important;
}

/* Mobile size */
@media (max-width: 768px) {
    .comment-form-rating .stars {
        gap: 4px !important;
    }
    
    .comment-form-rating .stars a {
        width: 24px !important;
        height: 24px !important;
    }
    
    .comment-form-rating .stars a::before {
        font-size: 24px !important;
    }
}


/* Review Stars */
.pf-review-rating {
    display: block !important;
    margin: 8px 0 12px 0 !important;
}

.pf-review-rating .pf-star-rating {
    display: inline-flex !important;
    gap: 2px !important;
}

.pf-review-rating .pf-star {
    font-size: 16px !important;
    color: #d1d5db !important;
}

.pf-review-rating .pf-star.filled {
    color: #fbbf24 !important;
}

.review-meta {
    margin-bottom: 12px !important;
}

.review-meta strong {
    display: block !important;
    margin-bottom: 4px !important;
}



/* ===============================
   MODERN SIDE-BY-SIDE REVIEWS LAYOUT
================================ */

.pf-reviews-modern {
    margin: 40px 0;
}

/* Main Container - Side by Side */
.pf-reviews-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 1024px) {
    .pf-reviews-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ===== LEFT SIDEBAR - SUMMARY ===== */

.pf-reviews-sidebar {
    position: sticky;
    top: 100px;
}

@media (max-width: 1024px) {
    .pf-reviews-sidebar {
        position: static;
    }
}

.pf-reviews-summary-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 30px;
}

.summary-rating {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.summary-rating .big-rating {
    font-size: 64px;
    font-weight: 800;
    color: #111;
    line-height: 1;
    margin-bottom: 12px;
}

.summary-rating .pf-star-rating {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.summary-rating .pf-star {
    font-size: 22px;
}

.summary-rating .total-reviews {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Rating Bars */
.summary-bars .rating-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.summary-bars .rating-bar:last-child {
    margin-bottom: 0;
}

.summary-bars .bar-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    min-width: 28px;
}

.summary-bars .bar-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.summary-bars .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    transition: width 0.5s ease;
}

.summary-bars .bar-count {
    font-size: 12px;
    color: #9ca3af;
    min-width: 24px;
    text-align: right;
    font-weight: 600;
}

/* ===== RIGHT MAIN - REVIEWS LIST ===== */

.pf-reviews-main {
    min-width: 0;
}

.pf-reviews-list {
    margin-bottom: 30px;
}

/* Show More Button */
.pf-reviews-pagination {
    text-align: center;
    margin: 30px 0;
}

.pf-show-more-reviews {
    background: #fff;
    border: 2px solid #e5e7eb;
    color: #111;
    padding: 14px 32px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.pf-show-more-reviews:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.pf-show-more-reviews svg {
    transition: transform 0.2s ease;
}

.pf-show-more-reviews:hover svg {
    transform: translateY(2px);
}

/* End of Reviews */
.pf-reviews-end {
    text-align: center;
    padding: 20px;
    color: #9ca3af;
    font-size: 13px;
}

/* No Reviews State */
.pf-no-reviews,
.pf-no-reviews-initial {
    text-align: center;
    padding: 60px 20px;
    background: #f9fafb;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

.pf-no-reviews svg,
.pf-no-reviews-initial svg {
    color: #d1d5db;
    margin-bottom: 16px;
}

.pf-no-reviews-initial h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px 0;
}

.pf-no-reviews p,
.pf-no-reviews-initial p {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .pf-reviews-summary-card {
        padding: 20px;
    }
    
    .summary-rating .big-rating {
        font-size: 48px;
    }
    
    .summary-rating .pf-star {
        font-size: 18px;
    }
}


/* ===== CLICKABLE RATING BARS ===== */

.rating-bar.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px;
    margin: 0 -8px 10px -8px;
    border-radius: 8px;
}

.rating-bar.clickable:hover {
    background: rgba(59, 130, 246, 0.05);
}

.rating-bar.clickable:hover .bar-label,
.rating-bar.clickable:hover .bar-count {
    color: #3b82f6;
}

.rating-bar.active {
    background: rgba(59, 130, 246, 0.1) !important;
    border-left: 3px solid #3b82f6;
    padding-left: 5px;
}

.rating-bar.active .bar-label,
.rating-bar.active .bar-count {
    color: #3b82f6 !important;
    font-weight: 700;
}

.rating-bar.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Clear Filter Button */
.pf-clear-filter {
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.pf-clear-filter:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111;
}

.pf-clear-filter svg {
    color: #ef4444;
}

/* Filter Count Display */
.pf-filter-count {
    background: #eff6ff;
    color: #1e40af;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #bfdbfe;
}

/* No Results Message */
.pf-no-filter-results {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 15px;
}

.pf-no-filter-results p {
    margin: 0;
}


/* ===============================
   GLOBAL STAR RATING - PHP GENERATED
================================ */

.pf-star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pf-star {
    font-size: 18px;
    color: #d1d5db;
    line-height: 1;
}

.pf-star.filled {
    color: #fbbf24;
}

.pf-star.half {
    background: linear-gradient(90deg, #fbbf24 50%, #d1d5db 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pf-rating-count {
    font-size: 13px;
    color: #6b7280;
    margin-left: 4px;
}

/* Review Summary */
.reviews-summary .pf-star-rating {
    justify-content: center;
    margin: 10px 0;
}

.reviews-summary .pf-star {
    font-size: 20px;
}

/* Individual Reviews */
.pf-review-rating {
    margin: 8px 0;
}

.pf-review-rating .pf-star {
    font-size: 16px;
}

/* Rating Bars - Simplified */
.rating-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.bar-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    min-width: 50px;
}

.bar-track {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    transition: width 0.5s ease;
}

.bar-count {
    font-size: 13px;
    color: #9ca3af;
    min-width: 35px;
    text-align: right;
    font-weight: 600;
}

/* Hide WooCommerce default star rating */
.woocommerce .star-rating {
    display: none !important;
}

/* Mobile */
@media (max-width: 768px) {
    .pf-star {
        font-size: 16px;
    }
    
    .reviews-summary .pf-star {
        font-size: 18px;
    }
    
    .pf-review-rating .pf-star {
        font-size: 14px;
    }
    
    .bar-label {
        min-width: 45px;
        font-size: 12px;
    }
    
    .bar-track {
        height: 6px;
    }
}



/* ===============================
   ACCORDION SECTIONS
================================ */

@media (max-width: 1024px) {
    
    .pf-mobile-accordions {
        margin: 30px 0 !important;
    }
    
    .pf-accordion-item {
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    .pf-accordion-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 20px 0 !important;
        cursor: pointer !important;
        user-select: none !important;
    }
    
    .pf-accordion-header h3 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #111 !important;
        margin: 0 !important;
    }
    
    .pf-accordion-header .accordion-icon {
        color: #6b7280 !important;
        transition: transform 0.3s ease !important;
        flex-shrink: 0 !important;
    }
    
    .pf-accordion-item.active .accordion-icon {
        transform: rotate(180deg) !important;
    }
    
    .pf-accordion-content {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    
    .pf-accordion-item.active .pf-accordion-content {
        max-height: 5000px !important;
        padding-bottom: 20px !important;
    }
    
    /* Description content */
    .pf-accordion-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        color: #374151 !important;
        margin: 0 0 12px 0 !important;
    }
    
    .pf-accordion-content p:last-child {
        margin-bottom: 0 !important;
    }
    
    /* ===== REVIEWS IN ACCORDION ===== */
    
    .reviews-summary {
        display: grid !important;
        grid-template-columns: 120px 1fr !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
        padding: 20px !important;
        background: #f9fafb !important;
        border-radius: 12px !important;
    }
    
    .summary-left {
        text-align: center !important;
    }
    
    .big-rating {
        font-size: 48px !important;
        font-weight: 800 !important;
        color: #111 !important;
        line-height: 1 !important;
    }
    
    .stars-display {
        margin: 8px 0 !important;
    }
    
    .stars-display .star {
        font-size: 18px !important;
        color: #d1d5db !important;
    }
    
    .stars-display .star.filled {
        color: #fbbf24 !important;
    }
    
    .total-reviews {
        font-size: 13px !important;
        color: #6b7280 !important;
    }
    
    /* Rating bars with STARS */
    .rating-bar {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .bar-stars {
        display: flex !important;
        gap: 1px !important;
        min-width: 60px !important;
    }
    
    .bar-stars .mini-star {
        font-size: 10px !important;
        color: #d1d5db !important;
    }
    
    .bar-stars .mini-star.filled {
        color: #fbbf24 !important;
    }
    
    .bar-track {
        flex: 1 !important;
        height: 6px !important;
        background: #e5e7eb !important;
        border-radius: 3px !important;
        overflow: hidden !important;
    }
    
    .bar-fill {
        height: 100% !important;
        background: #fbbf24 !important;
        transition: width 0.3s ease !important;
    }
    
    .bar-count {
        font-size: 12px !important;
        color: #9ca3af !important;
        min-width: 30px !important;
        text-align: right !important;
    }
}


/* ===============================
   RELATED PRODUCTS - FIX CARD SIZE
================================ */

@media (min-width: 1025px) {
    
    /* Related products section */
    .related.products,
    .upsells.products {
        margin: 60px 0 !important;
        clear: both !important;
    }
    
    .related.products > h2,
    .upsells.products > h2 {
        font-size: 28px !important;
        font-weight: 700 !important;
        margin: 0 0 30px 0 !important;
        color: #111 !important;
    }
    
    /* FORCE 4-column grid */
    .related.products ul.products,
    .upsells.products ul.products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }
    
    /* Force li to respect grid */
    .related.products ul.products > li,
    .upsells.products ul.products > li {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        display: block !important;
    }
    
    /* Force card to full width */
    .related.products .pf-product-card,
    .upsells.products .pf-product-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
    
    /* Card inner - constrain size */
    .related.products .card-inner,
    .upsells.products .card-inner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Image container - proper aspect ratio */
    .related.products .card-image,
    .upsells.products .card-image {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 3/4 !important;
        overflow: hidden !important;
    }
    
    /* Image itself */
    .related.products .card-image img,
    .upsells.products .card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Content area */
    .related.products .card-content,
    .upsells.products .card-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Large screens - 5 columns */
@media (min-width: 1600px) {
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 24px !important;
    }
}

/* Medium screens - 3 columns */
@media (min-width: 1025px) and (max-width: 1399px) {
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
}



/* ===============================
   CENTER PRODUCT TABS
================================ */

.woocommerce-tabs .wc-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce-tabs .wc-tabs li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: inline-block !important;
}

.woocommerce-tabs .wc-tabs li a {
    display: block !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.3s ease !important;
}

.woocommerce-tabs .wc-tabs li a:hover {
    color: #111 !important;
    border-bottom-color: #e5e7eb !important;
}

.woocommerce-tabs .wc-tabs li.active a {
    color: #111 !important;
    border-bottom-color: #000 !important;
}

/* Mobile - Stack tabs */
@media (max-width: 768px) {
    .woocommerce-tabs .wc-tabs {
        flex-direction: column !important;
    }
    
    .woocommerce-tabs .wc-tabs li {
        width: 100% !important;
    }
    
    .woocommerce-tabs .wc-tabs li a {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
    }
}


/* ===============================
   ADDITIONAL INFORMATION - CENTERED & PREMIUM
================================ */

/* Tab content container */
.woocommerce-Tabs-panel--additional_information {
    padding: 40px 20px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Main heading - centered */
.woocommerce-Tabs-panel--additional_information h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 32px 0 !important;
    text-align: center !important;
}

/* Table styling */
.woocommerce-product-attributes {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    border: none !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}

.woocommerce-product-attributes tbody {
    display: block !important;
}

.woocommerce-product-attributes tr {
    border: none !important;
    background: #fff !important;
    display: grid !important;
    grid-template-columns: 180px 1fr !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    margin-bottom: 12px !important;
}

.woocommerce-product-attributes tr:hover {
    border-color: #d1d5db !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
}

/* Label (left side) */
.woocommerce-product-attributes th {
    background: #f9fafb !important;
    color: #111 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 18px 24px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    border-right: 1px solid #e5e7eb !important;
}

/* Value (right side) */
.woocommerce-product-attributes td {
    background: #fff !important;
    color: #374151 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 18px 24px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
}

.woocommerce-product-attributes td p {
    margin: 0 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .woocommerce-Tabs-panel--additional_information {
        padding: 30px 16px !important;
    }
    
    .woocommerce-product-attributes {
        max-width: 100% !important;
    }
    
    .woocommerce-product-attributes tr {
        grid-template-columns: 1fr !important;
    }
    
    .woocommerce-product-attributes th {
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: #f3f4f6 !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
    }
    
    .woocommerce-product-attributes td {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }
}


/* Hide quantity label - EXACT CLASS */
.pf-qty-label {
    display: none !important;
}



/* ===== SIZE CHART - SIMPLE TEXT LINK ===== */

/* Size row with chart link */
.pf-variation-item.has-size-chart .pf-variation-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

.pf-variation-item.has-size-chart .pf-variation-label label {
    margin: 0 !important;
}

/* Size chart link - Simple text style */
.pf-size-chart-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
}

.pf-size-chart-trigger:hover {
    color: #111 !important;
    text-decoration: underline !important;
}

/* Mobile - KEEP on right side */
@media (max-width: 768px) {
    .pf-variation-item.has-size-chart .pf-variation-label {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .pf-size-chart-trigger {
        font-size: 13px !important;
    }
}

/* ===============================
   DESKTOP PRODUCT PAGE - ULTRA PREMIUM
================================ */

/* Title */
.pf-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.2 !important;
}



/* Viewers - Ultra Premium */
.pf-viewers {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: #fff !important;
    border: 2px solid #3b82f6 !important;
    border-radius: 12px !important;
    margin: 0 12px 24px 0 !important;
    font-size: 14px !important;
    color: #1e40af !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
    transition: all 0.3s ease !important;
}

.pf-viewers:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-2px) !important;
}

.pf-viewers svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: #3b82f6 !important;
}

.pf-viewers strong {
    color: #1e40af !important;
    font-weight: 800 !important;
    font-size: 16px !important;
}

/* Stock Status - Ultra Premium */
.pf-stock-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    margin: 0 0 24px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.pf-stock-status:hover {
    transform: translateY(-2px) !important;
}

.pf-stock-status.in-stock {
    background: #fff !important;
    border: 2px solid #10b981 !important;
    color: #065f46 !important;
}

.pf-stock-status.in-stock svg {
    width: 20px !important;
    height: 20px !important;
    color: #10b981 !important;
}

.pf-stock-status.in-stock:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

.pf-stock-status.out-of-stock {
    background: #fff !important;
    border: 2px solid #ef4444 !important;
    color: #991b1b !important;
}

.pf-stock-status.out-of-stock svg {
    width: 20px !important;
    height: 20px !important;
    color: #ef4444 !important;
}


/* Premium Gradient Effect */
.pf-viewers {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15) !important;
}

.pf-stock-status.in-stock {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15) !important;
}



/* Quantity Label */
.pf-qty-label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 12px 0 !important;
    display: block !important;
}

/* Premium Quantity Input */
.quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
    height: 52px !important;
    margin-right: 12px !important;
}

.quantity .qty-btn {
    width: 48px !important;
    height: 48px !important;
    background: #f9fafb !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.quantity .qty-btn:hover {
    background: #e5e7eb !important;
}

.quantity .qty-btn:active {
    background: #d1d5db !important;
}

.quantity input[type="number"] {
    width: 70px !important;
    height: 48px !important;
    border: none !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    background: #fff !important;
    -moz-appearance: textfield !important;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Premium Add to Cart Button */
.pf-cart-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.single_add_to_cart_button,
.pf-add-to-cart-btn {
    flex: 1 !important;
    height: 54px !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
}

.single_add_to_cart_button:hover,
.pf-add-to-cart-btn:hover {
    background: #1f2937 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

.single_add_to_cart_button:active,
.pf-add-to-cart-btn:active {
    transform: translateY(0) !important;
}

/* ===============================
   WISHLIST HEART – DESKTOP ONLY
================================ */
@media (min-width: 1024px) {

    /* Wishlist Heart Button */
    .pf-wishlist-btn {
        width: 52px !important;
        height: 52px !important;
        background: #fff !important;
        border: 2px solid #e5e7eb !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .pf-wishlist-btn:hover {
        border-color: #ef4444 !important;
        background: #fef2f2 !important;
        transform: scale(1.05) !important;
    }

    .pf-wishlist-btn.in-wishlist,
    .pf-wishlist-btn.active {
        background: #ef4444 !important;
        border-color: #ef4444 !important;
    }

    .pf-wishlist-btn svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #9ca3af !important;
        transition: all 0.3s ease !important;
    }

    .pf-wishlist-btn:hover svg {
        stroke: #ef4444 !important;
    }

    .pf-wishlist-btn.in-wishlist svg,
    .pf-wishlist-btn.active svg {
        fill: #fff !important;
        stroke: #fff !important;
    }
}


/* Buy Now Button */
.pf-buy-now {
    width: 100% !important;
    height: 52px !important;
    background: #111 !important;
    color: #fff !important;
    border: 2px solid #111 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.pf-buy-now:hover {
    background: #fff !important;
    color: #111 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.pf-buy-now:active {
    transform: translateY(0) !important;
}


/* ===============================
   DESKTOP PRODUCT PAGE - FIXES
================================ */

/* Title - Reduced Gap */
.pf-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 8px 0 !important;  /* Reduced from 20px */
    line-height: 1.2 !important;
}

/* Price and Rating Row */
.pf-price-rating-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 24px 0 !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Rating - Show Review Count Properly */
.pf-rating-stars .woocommerce-product-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f9fafb !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
}

.pf-rating-stars .star-rating {
    position: relative !important;
    display: inline-flex !important;
    width: 100px !important;
    height: 20px !important;
    font-size: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.pf-rating-stars .star-rating::before {
    content: "★★★★★" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    color: #d1d5db !important;
    font-size: 19px !important;
    letter-spacing: 4px !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
}

.pf-rating-stars .star-rating span {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    font-size: 0 !important;
}

.pf-rating-stars .star-rating span strong {
    display: none !important;
}

.pf-rating-stars .star-rating span::before {
    content: "★★★★★" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    color: #fbbf24 !important;
    font-size: 19px !important;
    letter-spacing: 4px !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
}

/* Review Count - Show Number Only in Parentheses */
.pf-rating-stars .woocommerce-review-link {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.pf-rating-stars .woocommerce-review-link:hover {
    color: #111 !important;
}

/* Hide "customer reviews" text, keep only number */
.pf-rating-stars .woocommerce-review-link::after {
    content: '' !important;
}

/* Make Swatches/Buttons UPPERCASE */
.pf-color-swatch,
.pf-size-btn,
.pf-attribute-btn {
    text-transform: uppercase !important;
}

/* Color Buttons - If text based */
.pf-color-swatches + select option,
.pf-variation-item label {
    text-transform: capitalize !important;
}

/* Size Buttons - Uppercase */
.pf-size-btn {
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/* Buy Now Button - RED like Mobile */
.pf-buy-now {
    width: 100% !important;
    height: 52px !important;
    background: #ef4444 !important;
    color: #fff !important;
    border: 2px solid #ef4444 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.pf-buy-now:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4) !important;
}

.pf-buy-now:active {
    transform: translateY(0) !important;
}




/* ===============================
   PREMIUM DELIVERY INFO CARDS
================================ */

.pf-delivery-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin: 30px 0 !important;
}

.pf-info-item {
    background: linear-gradient(135deg, #f9fafb 0%, #fff 100%) !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.pf-info-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.pf-info-item:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12) !important;
    transform: translateY(-4px) !important;
}

.pf-info-item:hover::before {
    opacity: 1 !important;
}

.pf-info-item svg {
    width: 32px !important;
    height: 32px !important;
    color: #3b82f6 !important;
    margin-bottom: 12px !important;
    transition: transform 0.3s ease !important;
}

.pf-info-item:hover svg {
    transform: scale(1.1) rotate(5deg) !important;
}

.pf-info-item div {
    padding-left: 0 !important;
}

.pf-info-item strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 6px !important;
}

.pf-info-item div:not(strong) {
    font-size: 14px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pf-delivery-info {
        grid-template-columns: 1fr !important;
    }
}

/* ===============================
   PREMIUM PAYMENT SECTION
================================ */

.pf-payment {
    background: linear-gradient(135deg, #f9fafb 0%, #fff 100%) !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin: 30px 0 !important;
    text-align: center !important;
}

.pf-payment strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 16px !important;
}

.pf-payment .payment-icons {
    margin: 16px 0 !important;
    padding: 12px !important;
    background: #fff !important;
    border-radius: 10px !important;
}

.pf-payment .payment-icons img {
    max-width: 100% !important;
    height: auto !important;
}

.pf-payment .payment-text {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 12px !important;
}


.pf-qty-label {
    display: none !important;
}

/* ===============================
   PREMIUM ACTION BUTTONS
================================ */

.pf-action-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 24px 0 !important;
    padding: 20px 0 !important;
    border-top: 1px solid #e5e7eb !important;
}

.pf-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: #fff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.pf-action-btn:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
    background: #eff6ff !important;
    transform: translateY(-2px) !important;
}

.pf-action-btn svg {
    width: 18px !important;
    height: 18px !important;
}



/* ===============================
   MOBILE HEADER CLEANUP
================================ */

@media (max-width: 768px) {

	/* Header container height */
	.site-header {
		padding: 6px 0;
	}

	.header-inner {
		min-height: 52px;
		padding: 0 12px;
	}

	/* LEFT SIDE */
	.header-left {
		gap: 8px;
	}

	/* REMOVE HAMBURGER (TEMPORARY) */
	.menu-toggle {
		display: none !important;
	}

	/* LOGO */
	.header-logo img,
	.header-logo .site-logo {
		max-height: 28px;
		width: auto;
	}

	.header-logo {
		margin-right: 6px;
	}

	/* REMOVE SEPARATORS ON MOBILE */
	.header-separator {
		display: none;
	}

	/* SEARCH (OPTIONAL – KEEP COMPACT) */
	.header-search {
		display: none; /* uncomment if you want to hide search on mobile */
	}

	/* RIGHT ICONS */
	.header-icons {
		gap: 10px;
	}

	.header-icon {
		width: 34px;
		height: 34px;
	}

	.header-icon svg {
		width: 18px;
		height: 18px;
	}

	/* CART / WISHLIST COUNTS */
	.header-cart-count,
	.header-wishlist-count {
		top: -4px;
		right: -4px;
		min-width: 16px;
		height: 16px;
		font-size: 10px;
		line-height: 16px;
	}

}


/* ===============================
   MOBILE HEADER – FINAL TUNING
================================ */

@media (max-width: 768px) {

	/* Reduce overall gaps */
	.header-left,
	.header-icons {
		gap: 6px;
	}

	/* Slightly bigger tap area but tighter look */
	.header-icon {
		width: 32px;
		height: 32px;
	}

	/* MAKE SVG BIGGER */
	.header-icon svg {
		width: 20px;
		height: 20px;
	}

	/* Logo slightly tighter */
	.header-logo img,
	.header-logo .site-logo {
		max-height: 26px;
	}

	/* Counter position refinement */
	.header-cart-count,
	.header-wishlist-count {
		top: -3px;
		right: -3px;
		min-width: 15px;
		height: 15px;
		font-size: 9.5px;
		line-height: 15px;
	}
}