/* ============================================================
   PERFECTO SHOP CSS - CLEAN & DEDUPLICATED
   Structure:
   1.  Variables & Reset
   2.  Shop Layout (Topbar, Sidebar, Grid)
   3.  Filters (Accordion, Price, Color, Size)
   4.  Product Cards (Base, Badges, Actions, Content, Rating)
   5.  Add to Cart (Overlay, Footer, Bar)
   6.  Wishlist Button
   7.  Sidebars (Wishlist & Cart)
   8.  Modals (Sort, Quick View)
   9.  Notification Popup
   10. Mobile Header & Bottom Bar
   11. Pagination & Load More
   12. Responsive (1280px, 1024px, 768px, 480px, 375px, 360px)
   ============================================================ */


/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */

/* ── NUCLEAR: Remove ALL blue tap highlights site-wide ── */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
}

/* Remove blue focus outline on mobile-tapped elements (keep keyboard focus visible) */
@media (max-width: 768px) {
    *:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
    }
}

:root {
    --pf-anim-ease:    cubic-bezier(0.22, 1, 0.36, 1);
    --pf-anim-smooth:  cubic-bezier(0.25, 0.8, 0.25, 1);
    --pf-glass-bg:     rgba(255, 255, 255, 0.94);
    --pf-border-color: rgba(0, 0, 0, 0.06);
    --pf-active-color: #000000;
}

body.sidebar-open {
    overflow: hidden !important;
}


/* ============================================================
   2. SHOP LAYOUT
   ============================================================ */

/* --- Topbar (Desktop) --- */
.pf-shop-topbar {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 10px;
    padding: 8px 0 15px;
    position: relative;
    z-index: 10;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.shop-controls {
    display: flex;
    align-items: center;
    gap: 24px;
}

.shop-results { flex: 1; }

.results-count { font-size: 15px; color: #6b7280; }
.results-count strong { color: #111; font-weight: 600; }

/* View Switcher */
.shop-view-switcher {
    display: flex;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 8px;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn:hover { background: #e5e7eb; color: #111; }
.view-btn.active { background: #fff; color: #111; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }

/* Sort Select */
.shop-sorting {
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111;
    background: #fff;
    cursor: pointer;
    outline: none;
}

/* Column Switcher */
.pf-col-switcher {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 24px;
    border-right: 1px solid #e5e7eb;
}

.pf-col-switcher .col-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-right: 4px;
}

.pf-col-switcher .col-btn {
    background: transparent;
    border: none;
    padding: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-col-switcher .col-btn:hover { color: #111; }
.pf-col-switcher .col-btn.active { color: #111; transform: scale(1.15); }
.pf-col-switcher .col-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* --- Shop Content & Layout --- */
.pf-shop-content { padding: 30px 0; }

.shop-layout {
    display: flex;
    gap: 40px;
    /* Replaced 'all' with specific layout property */
    transition: gap 0.35s var(--pf-anim-smooth);
    position: relative;
    align-items: start;
}

.shop-layout.sidebar-left  { grid-template-columns: 300px 1fr; }
.shop-layout.sidebar-right { grid-template-columns: 1fr 300px; }
.shop-layout.no-sidebar    { grid-template-columns: 1fr; }
.shop-layout.sidebar-right .shop-sidebar { order: 2; }

.shop-layout.sidebar-closed { gap: 0 !important; }
.shop-layout.sidebar-closed .shop-sidebar {
    width: 0 !important; margin: 0 !important; padding: 0 !important;
    opacity: 0 !important; visibility: hidden; overflow: hidden;
}
.shop-layout.sidebar-closed .shop-main {
    width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
}

/* Hide on desktop */
.sidebar-close.mobile-only {
  display: none;
}

.shop-main { 
    flex-grow: 1; 
    width: 75%; 
    /* Explicitly define properties and trigger GPU acceleration */
    transition: width 0.35s var(--pf-anim-smooth), flex 0.35s var(--pf-anim-smooth), max-width 0.35s var(--pf-anim-smooth); 
    will-change: width, max-width, flex;
}
/* --- Products Grid --- */
.products-container { width: 100%; overflow: visible; }

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

.products-container.cols-3 ul.products { grid-template-columns: repeat(3, 1fr) !important; }
.products-container.cols-4 ul.products { grid-template-columns: repeat(4, 1fr) !important; }
.products-container.cols-5 ul.products { grid-template-columns: repeat(5, 1fr) !important; }

/* Products container force grid — design controlled by body class */
.products-container[data-view="grid"] .products {
    display: grid !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


@media (min-width: 1025px) {
    /* Floating Cards (Shop Archive Only) */
    body.pf-desktop-grid--floating .pf-shop .products-container[data-view="grid"] .products {
        gap: 20px !important;
    }
    /* Breathless */
    body.pf-desktop-grid--breathless .pf-shop .products-container[data-view="grid"] .products {
        gap: 0 !important;
    }
    body.pf-desktop-grid--breathless .pf-shop .products-container[data-view="grid"] .products li.product {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: 1px solid #ebebeb !important;
        margin: 0 -0.5px -0.5px 0 !important;
    }
}

/* List View */
.products-container[data-view="list"] ul.products {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    grid-template-columns: 100% !important;
}

.products-container[data-view="list"] li.pf-product-card {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    align-items: stretch !important;
}

.products-container[data-view="list"] .card-image {
    width: 260px !important;
    min-width: 260px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    flex-shrink: 0 !important;
}

.products-container[data-view="list"] .card-image img {
    height: 100% !important;
    object-fit: cover !important;
}

.products-container[data-view="list"] .card-content {
    flex: 1 !important;
    padding: 25px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.products-container[data-view="list"] .card-title { font-size: 18px !important; margin-bottom: 10px !important; }
.products-container[data-view="list"] .card-price { font-size: 16px !important; margin-bottom: 15px !important; justify-content: flex-start !important; }
.products-container[data-view="list"] .card-rating {
    position: relative !important; bottom: auto !important; left: auto !important; margin-bottom: 10px !important;
}

/* WooCommerce overrides */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    margin: 0; padding: 0; background: transparent; border: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0; font-size: 15px; font-weight: 600; padding: 0;
}

.woocommerce ul.products li.product .price { color: #111; font-weight: 700; }
.woocommerce ul.products li.product .button { display: none; }
.card-add-to-cart .button,
.card-atc-footer .button { display: block !important; width: 100% !important; box-sizing: border-box; }

/* Filter Chips */
.pf-filter-chips,
.chips-wrapper { display: none !important; }

/* --- Sticky Opener Button --- */
.pf-sticky-opener {
    position: fixed;
    top: 30%;
    z-index: 9999;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pf-sticky-opener.opener-visible {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0) !important;
}

.pf-sticky-opener .opener-inner {
    background: #fff; color: #111; padding: 15px 12px;
    writing-mode: vertical-rl; text-orientation: mixed;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    cursor: pointer; font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; gap: 8px;
}

.pf-sticky-opener:hover .opener-inner { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }

.pf-sticky-opener:not(.sidebar-right) {
    left: 0; transform: translateX(-100%);
}
.pf-sticky-opener:not(.sidebar-right) .opener-inner {
    border-left: none; border-radius: 0 6px 6px 0;
}
.pf-sticky-opener.sidebar-right {
    right: 0; left: auto; transform: translateX(100%);
}
.pf-sticky-opener.sidebar-right .opener-inner {
    border-right: none; border-left: 1px solid #e5e7eb; border-radius: 6px 0 0 6px;
}


/* ============================================================
   3. FILTERS SIDEBAR
   ============================================================ */

.shop-sidebar {
    width: 25%;
    flex-shrink: 0;
    /* Isolate width, margin, padding, and opacity. Drop 'all' */
    transition: width 0.35s var(--pf-anim-smooth), opacity 0.25s ease, padding 0.35s var(--pf-anim-smooth), margin 0.35s var(--pf-anim-smooth);
    will-change: width, opacity;
    
    /* Keep your existing visual styles */
    opacity: 1;
    transform: translateX(0);
    position: sticky;
    top: calc(var(--header-height, 80px) + 20px);
    max-height: calc(100vh - var(--header-height, 80px) - 40px);
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - var(--header-height, 80px) - 40px);
    background: #ffffff;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 20px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
    background: #ffffff;
}

.sidebar-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.sidebar-filters {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 24px;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

.sidebar-filters::-webkit-scrollbar { width: 6px; }
.sidebar-filters::-webkit-scrollbar-track { background: transparent; }
.sidebar-filters::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.sidebar-filters::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

.sidebar-footer {
    padding: 20px 24px;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
    background: #ffffff;
}

/* Hide Sidebar Button */
.pf-hide-sidebar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-hide-sidebar:hover { border-color: #0a0a0a; color: #111; background: #f9fafb; }
.pf-hide-sidebar svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2px; }

/* Hide on tablets & mobile */
@media (max-width: 1024px) {
  .pf-hide-sidebar.desktop-only {
    display: none;
  }
}

/* Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active { opacity: 1; pointer-events: auto; }

/* --- Accordion Filters --- */
.filter-group {
    border-bottom: 1px solid #f3f4f6;
    padding: 0;
}

.filter-group:last-child { border-bottom: none; }

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.filter-header:hover { color: #111; }

.filter-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    color: #9ca3af;
    flex-shrink: 0;
}

.filter-group.collapsed .filter-icon { transform: rotate(-180deg); }

.filter-content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-bottom: 18px;
}

.filter-group.collapsed .filter-content { max-height: 0; padding-bottom: 0; }

.filter-items { display: flex; flex-direction: column; gap: 12px; }

/* Checkbox Filter */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.filter-checkbox:hover { padding-left: 4px; }
.filter-checkbox input { display: none; }

.checkbox-custom {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.filter-checkbox input:checked + .checkbox-custom { background: var(--pf-pri-bg, #0a0a0a); border-color: var(--pf-pri-bg, #0a0a0a); }
.filter-checkbox input:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 2px; left: 5px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label { flex: 1; font-size: 14px; color: #374151; }
.checkbox-count { font-size: 13px; color: #9ca3af; }

/* Category Filter */
.pf-cat-list { list-style: none; padding: 0; margin: 0; }
.cat-item { margin-bottom: 5px; border-bottom: 1px solid #fcfcfc; }

.cat-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }

.cat-label { display: flex; align-items: center; cursor: pointer; flex-grow: 1; }
.cat-label input { margin-right: 10px; }
.cat-label .count { color: #999; font-size: 11px; margin-left: 5px; }

.cat-arrow {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #bbb; transition: transform 0.2s; border-radius: 50%;
}

.cat-arrow:hover { background: #f5f5f5; color: #000; }
.cat-arrow.open { transform: rotate(180deg); }

.sub-cat-list { list-style: none; padding-left: 20px; background: #fdfdfd; margin-bottom: 10px; border-radius: 4px; }
.sub-item { padding: 4px 0; }

/* Clear Filters */
.clear-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
}

.clear-filters:hover { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }

/* --- Price Range Filter --- */
.slider-wrapper { padding: 10px 8px; margin-bottom: 15px; }

#pf-slider-range {
    height: 4px !important;
    background: #e0e0e0 !important;
    border-radius: 2px;
    position: relative;
    display: block !important;
    border: none !important;
}

#pf-slider-range .ui-slider-range { background: #0a0a0a !important; height: 100%; position: absolute; top: 0; }
#pf-slider-range .ui-slider-handle {
    width: 14px !important; height: 14px !important;
    background: #fff !important;
    border: 3px solid #000 !important;
    border-radius: 50%;
    position: absolute; top: -5px;
    cursor: pointer; outline: none; margin-left: -7px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.price-actions { display: flex; align-items: center; gap: 8px; width: 100%; }

.price-box {
    display: flex; align-items: center;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 6px;
    padding: 0 8px; height: 40px; flex: 1; transition: all 0.2s ease;
}

.price-box:focus-within { border-color: #000; }
.price-box .curr { color: #999; font-size: 13px; font-weight: 500; margin-right: 4px; pointer-events: none; }
.price-box input { border: none; background: transparent; width: 100%; font-size: 14px; font-weight: 500; color: #333; padding: 0; height: 100%; outline: none; }
.price-actions .sep { color: #bbb; font-weight: 400; font-size: 14px; }

#pf-price-btn {
    background: #0a0a0a; color: #fff; border: none; height: 40px;
    padding: 0 18px; border-radius: 6px; cursor: pointer;
    font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
    transition: background 0.2s, transform 0.1s;
}

#pf-price-btn:hover { background: #333; }
#pf-price-btn:active { transform: scale(0.98); }

/* Legacy price inputs */
.price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; width: 100%; }
.price-inputs input {
    flex: 1; width: 100%; padding: 10px 12px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 14px; text-align: center; outline: none; transition: all 0.2s ease;
}
.price-inputs input:focus { border-color: #0a0a0a; box-shadow: 0 0 0 3px rgba(17,17,17,0.05); }
.price-inputs span { color: #9ca3af; font-weight: 500; flex-shrink: 0; }

.apply-price-btn {
    width: 100%; padding: 10px; background: #0a0a0a; color: #fff;
    border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;
}
.apply-price-btn:hover { background: #0a0a0a; transform: translateY(-1px); }

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

.color-swatch {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; padding: 8px; border-radius: 8px; transition: all 0.2s ease;
}

.color-swatch:hover { background: #f9fafb; }
.color-swatch input { display: none; }

.color-dot {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid #e5e7eb; transition: all 0.2s ease; flex-shrink: 0;
    position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.color-dot[style*="rgb(255, 255, 255)"],
.color-dot[style*="#ffffff"],
.color-dot[style*="#fff"],
.color-dot[style*="white"] {
    border: 2px solid #d1d5db !important;
    background: #fff !important;
}

.color-swatch input:checked + .color-dot {
    border-color: #0a0a0a;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
    transform: scale(1.1);
}

.color-swatch input:checked + .color-dot::after {
    content: '✓';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; font-size: 16px; font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.color-swatch input:checked + .color-dot[style*="rgb(255, 255, 255)"]::after,
.color-swatch input:checked + .color-dot[style*="#ffffff"]::after,
.color-swatch input:checked + .color-dot[style*="#fff"]::after,
.color-swatch input:checked + .color-dot[style*="white"]::after { color: #111; text-shadow: none; }

.color-name { font-size: 14px; color: #374151; font-weight: 500; flex: 1; }
.color-swatch input:checked ~ .color-name { color: #111; font-weight: 600; }

/* Color Grid (compact swatches) */
.pf-filter-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px; }

.swatch-circle { position: relative; cursor: pointer; width: 28px; height: 28px; }
.swatch-circle input { display: none; }
.swatch-circle .swatch-inner {
    display: block; width: 100%; height: 100%;
    border-radius: 50%; border: 1px solid #ddd; transition: all 0.2s ease;
}
.swatch-circle:hover .swatch-inner { transform: scale(1.1); }
.swatch-circle input:checked + .swatch-inner { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }

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

.size-btn { cursor: pointer; }
.size-btn input { display: none; }
.size-btn span {
    display: block; padding: 10px 16px; border: 2px solid #e5e7eb;
    border-radius: 8px; font-size: 13px; font-weight: 600; color: #374151; transition: all 0.2s ease;
}
.size-btn:hover span { border-color: #d1d5db; }
.size-btn input:checked + span { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }

/* Swatch Buttons (Filter) */
.swatch-btn { cursor: pointer; }
.swatch-btn input { display: none; }
.swatch-btn .btn-text {
    display: block; padding: 6px 10px; border: 1px solid #ddd;
    border-radius: 4px; font-size: 13px; min-width: 35px; text-align: center;
    transition: all 0.2s; background: #fff;
}
.swatch-btn:hover .btn-text { border-color: #999; background: #f9f9f9; }
.swatch-btn input:checked + .btn-text { background: #0a0a0a; color: #fff; border-color: #000; }


/* ============================================================
   4. PRODUCT CARDS - BASE
   ============================================================ */

/* Container query support */
.pf-product-card {
    container-type: inline-size;
    container-name: product-card;
    position: relative;
    background-color: var(--pf-c-bg, #ffffff);
    border: 1px solid var(--pf-c-border, #f3f4f6);    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
    will-change: transform, box-shadow;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pf-product-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    border-color: #e0e0e0;
}

/* Hover config classes */
.pf-product-card.hover-lift:hover    { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,0.13); }
.pf-product-card.hover-shadow:hover  { box-shadow: 0 14px 36px rgba(0,0,0,0.16); }
.pf-product-card.hover-none:hover    { transform: none; box-shadow: none; }
.pf-product-card.hover-zoom:hover .main-image img,
.pf-product-card.hover-slide:hover .main-image img { transform: scale(1.09); transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1); }

/* Border radius config */
.pf-product-card.corners-0  { border-radius: 0 !important; }
.pf-product-card.corners-8  { border-radius: 8px !important; }
.pf-product-card.corners-12 { border-radius: 12px !important; }
.pf-product-card.corners-16 { border-radius: 16px !important; }
.pf-product-card.corners-0  .card-image { border-radius: 0 !important; }
.pf-product-card.corners-8  .card-image { border-radius: 8px 8px 0 0 !important; }
.pf-product-card.corners-12 .card-image { border-radius: 12px 12px 0 0 !important; }
.pf-product-card.corners-16 .card-image { border-radius: 16px 16px 0 0 !important; }

/* ── Breathless overrides corners classes (Shop Archive ONLY) ── */
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-0,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-8,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-12,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-16 {
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-0  .card-image,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-8  .card-image,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-12 .card-image,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-16 .card-image,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-0  .card-image img,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-8  .card-image img,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-12 .card-image img,
body.pf-desktop-grid--breathless .pf-shop .pf-product-card.corners-16 .card-image img {
    border-radius: 0 !important;
}

/* --- Card Inner & Image --- */
.pf-product-card .card-inner {
    display: flex; flex-direction: column; height: 100%;
}

.pf-product-card .card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f9fafb;
}

.pf-product-card .card-image .image-link {
    display: block; position: relative; width: 100%; height: 100%;
}

.pf-product-card .card-image img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

.pf-product-card:hover .card-image img { transform: scale(1.06); }

/* Image ratio config */
.pf-product-card.has-ratio .card-image {
    position: relative !important; height: 0 !important; overflow: hidden !important;
}
.pf-product-card.ratio-100.has-ratio .card-image { padding-bottom: 100% !important; }
.pf-product-card.ratio-125.has-ratio .card-image { padding-bottom: 125% !important; }
.pf-product-card.ratio-150.has-ratio .card-image { padding-bottom: 150% !important; }
.pf-product-card.ratio-75.has-ratio  .card-image { padding-bottom: 75% !important; }

.pf-product-card.has-ratio .image-wrapper,
.pf-product-card.has-ratio .main-image {
    position: absolute !important; top: 0; left: 0; width: 100%; height: 100%;
}
.pf-product-card.has-ratio .main-image img {
    position: absolute !important; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover !important;
}

.pf-product-card:not(.has-ratio) .card-image {
    height: auto !important; padding-bottom: 0 !important;
}
.pf-product-card:not(.has-ratio) .card-image img {
    position: relative !important; width: 100% !important; height: auto !important;
}

/* Fixed ratio */
.pf-product-card.pf-ratio-fixed .card-image { position: relative; }
.pf-product-card.pf-ratio-fixed .card-image .image-link {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* Hover image */
.pf-product-card .hover-image {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity 0.4s ease;
    z-index: 2; pointer-events: none;
}
.pf-product-card .hover-image img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; position: absolute; top: 0; left: 0;
}
.pf-product-card:hover .hover-image { opacity: 1 !important; }

/* Kill hover image when swatch active */
.pf-product-card.swatch-active .hover-image {
    display: none !important; opacity: 0 !important; visibility: hidden !important;
}
.pf-product-card.swatch-active .main-image img {
    opacity: 1 !important; visibility: visible !important; transition: opacity 0.2s ease-in-out;
}
.pf-product-card .main-image img.is-loading { opacity: 0.6 !important; filter: blur(2px); }


/* Ensure the image containers hold their shape and contain the absolute video */
.pf-product-card .main-image,
.pf-product-card .hover-image {
    position: relative;
    display: block;
    width: 100%;
}

/* Make sure the base image takes up standard space */
.pf-product-card .main-image img,
.pf-product-card .hover-image img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover; /* Respects your aspect ratio settings */
}

/* Force the video to perfectly cover the image underneath it */
.pf-product-card .pf-card-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important; /* Forces the video to crop and match the image ratio perfectly */
    border-radius: inherit;
    z-index: 2;
    pointer-events: none; /* Ensures the user can still click the product link */
}

/* Hover logic */
.pf-product-card .hover-video .pf-video-hover {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.pf-product-card:hover .hover-video .pf-video-hover {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   PERFECTO: BULLETPROOF GALLERY MEDIA
========================================================= */

/* --- 1. Desktop Thumbs --- */
.pf-thumb--video { position: relative; }
.pf-thumb-play-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 32px; height: 32px; background: rgba(0,0,0,0.6); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; z-index: 2;
    backdrop-filter: blur(2px);
}
.pf-thumb-play-icon svg { margin-left: 2px; }

/* --- 2. Desktop Main Viewer --- */
.pf-gallery__zoom-wrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden; /* Keeps your rounded corners clean */
    background: #f8f9fa;
}

/* NEVER hide this image. It acts as the scaffolding! */
#pf-main-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Video floats perfectly on top, hidden by default */
.pf-main-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #0a0a0a; /* Hides the static image underneath it */
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Triggered by JS */
.pf-main-video.is-active-video {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- 3. Mobile Slide Video --- */
.pf-m-slide-video {
    display: block;
    width: 100%;
    height: 100%; /* Changed from auto to 100% */
    object-fit: cover;
    /* aspect-ratio: 1 / 1; <-- Remove this line entirely */
    background: transparent; /* Better to use transparent than black */
}
/* Don't autoplay hidden video slides — JS controls play/pause */
.pf-m-gallery__slide[aria-hidden="true"] video {
    visibility: hidden;
}
.pf-m-gallery__slide[aria-hidden="false"] video {
    visibility: visible;
}

/* --- Video Lightbox --- */
.pf-lb-video-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    max-width: min(92vw, 900px) !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
}
.pf-lb-video-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.pf-lb-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0a0a0a;
}
/* If video is square (product video) use 1:1 */
.pf-lb-video-wrap.is-square {
    aspect-ratio: 1 / 1;
    max-width: min(80vw, 600px);
    margin: 0 auto;
}

/* ============================================================
   4a. BADGES
   ============================================================ */

.pf-product-card .card-badges,
.woocommerce-product-gallery .pf-universal-badges {
    position: absolute;
    width: auto;
    left: 7px;
    right: auto;
    top: 7px;
    padding: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
    pointer-events: none;
}

.pf-product-card .badge,
.woocommerce-product-gallery .badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-sizing: border-box;
    pointer-events: auto;
    align-self: flex-start !important;
    margin-bottom: 5px !important;
    width: fit-content !important;
}

/* Badge style variants */
.badge-style-flat .badge    { padding: 0 6px !important;  border-radius: 5px !important; }
.badge-style-pill .badge    { padding: 0 10px !important; border-radius: 99px !important; }
.badge-style-outline .badge {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid currentColor !important;
    padding: 0 8px !important; border-radius: 4px !important; height: 20px !important;
}
.badge-style-ribbon .badge {
    padding: 0 14px 0 8px !important;
    border-radius: 2px 0 0 2px !important;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
}
.badge-pos-top_right .badge-style-ribbon .badge,
.badge-pos-bottom_right .badge-style-ribbon .badge {
    padding: 0 8px 0 14px !important;
    border-radius: 0 2px 2px 0 !important;
    clip-path: polygon(100% 0, 6px 0, 0 50%, 6px 100%, 100% 100%);
}
.badge-style-circle .badge {
    width: 40px !important; height: 40px !important; padding: 0 !important;
    border-radius: 50% !important;
    white-space: normal !important; text-align: center;
    line-height: 10px !important; font-size: 8px !important; flex-direction: column;
}

/* Badge positions */
.badge-pos-top_left      { top: 10px; left: 10px; align-items: flex-start; }
.badge-pos-top_right     { top: 10px; right: 10px; align-items: flex-end; }
.badge-pos-bottom_left   { bottom: 10px; left: 10px; align-items: flex-start; }
.badge-pos-bottom_right  { bottom: 10px; right: 10px; align-items: flex-end; }

/* Badge colors */
.badge-sale  { background-color: var(--pf-badge-sale-bg, #ef4444) !important; color: var(--pf-badge-sale-txt, #fff) !important; }
.badge-new   { background-color: var(--pf-badge-new-bg, #10b981) !important; color: var(--pf-badge-new-txt, #fff) !important; }
.badge-hot   { background-color: var(--pf-badge-hot-bg, #f59e0b) !important; color: var(--pf-badge-hot-txt, #fff) !important; }
.badge-stock { background-color: var(--pf-badge-stock-bg, #374151) !important; color: var(--pf-badge-stock-txt, #fff) !important; }

.badge-style-outline .badge-sale  { color: var(--pf-badge-sale-bg, #ef4444) !important; border-color: var(--pf-badge-sale-bg, #ef4444) !important; background: transparent !important; }
.badge-style-outline .badge-new   { color: var(--pf-badge-new-bg, #10b981) !important; border-color: var(--pf-badge-new-bg, #10b981) !important; background: transparent !important; }
.badge-style-outline .badge-hot   { color: var(--pf-badge-hot-bg, #f59e0b) !important; border-color: var(--pf-badge-hot-bg, #f59e0b) !important; background: transparent !important; }
.badge-style-outline .badge-stock { color: var(--pf-badge-stock-bg, #374151) !important; border-color: var(--pf-badge-stock-bg, #374151) !important; background: transparent !important; }

/* --- Countdown / Timer Badge --- */
.pf-product-card .card-countdown-premium {
    position: absolute !important;
    top: 10px !important; left: 10px !important; right: 10px !important;
    width: auto !important; max-width: none !important; height: 26px !important;
    z-index: 18 !important;
    background: rgba(255, 241, 242, 0.96) !important;
    backdrop-filter: blur(4px);
    border: 1px solid #fecdd3 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(190, 18, 60, 0.08) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
    opacity: 0;
    animation: slideDownFade 0.4s ease-out forwards;
}

.pf-product-card .badge-timer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 100% !important;
    pointer-events: auto;
    gap: 6px !important;
    background: linear-gradient(to right, #fff1f2, #ffe4e6) !important;
    border: 1px solid #fda4af !important;
    color: #e11d48 !important;
    padding: 6px 0 !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.12) !important;
    transition: all 0.3s ease !important;
}

.pf-product-card .badge-timer .timer-label { display: none !important; }
.pf-product-card .badge-timer .t-txt { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; }

.badge-timer svg {
    width: 12px !important; height: 12px !important;
    fill: currentColor !important; stroke: none !important;
    flex-shrink: 0 !important;
    animation: timerPulse 2s infinite ease-in-out;
}

.pf-product-card .lightning-wrapper { display: flex !important; align-items: center !important; }
.pf-product-card .lightning-icon {
    width: 12px !important; height: 12px !important;
    color: #e11d48 !important; fill: #e11d48 !important;
    animation: redPulse 2s infinite alternate;
}

.pf-product-card .countdown-timer {
    display: flex !important; align-items: center !important; gap: 4px !important;
    color: #be123c !important; font-size: 10px !important; font-weight: 700 !important;
    line-height: 1 !important; letter-spacing: 0.5px !important; text-transform: uppercase;
}

.pf-product-card .countdown-unit span { font-size: 11px !important; font-weight: 800 !important; color: #be123c !important; }
.pf-product-card .countdown-sep,
.pf-product-card .countdown-unit-label { display: none !important; }

/* Push badges/actions down when countdown present */
.pf-product-card.has-countdown .card-badges,
.pf-product-card.has-countdown .card-actions.actions-pos-top_right,
.pf-product-card.has-countdown .card-actions.actions-pos-top_left {
    top: 48px !important; transition: top 0.3s ease;
}

.pf-product-card:hover .badge-timer {
    background: #fee2e2 !important; border-color: var(--pf-accent-border) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.18) !important;
}

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

@keyframes timerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(0.95); }
}


/* ============================================================
   4b. CARD CONTENT, TITLE, CATEGORY, PRICE
   ============================================================ */

.pf-product-card .card-content {
    padding: 16px 14px 18px;
    box-sizing: border-box;
    background-color: var(--pf-c-bg, #ffffff);
}

/* Spacing config */
.pf-product-card.spacing-compact .card-content  { padding: 10px 12px 14px !important; }
.pf-product-card.spacing-normal .card-content   { padding: 14px 16px 18px !important; }
.pf-product-card.spacing-relaxed .card-content  { padding: 20px 22px 24px !important; }

/* Category */
.pf-product-card .card-category {
    font-size: 10px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.pf-product-card .card-category.cat-style-badge { display: inline-block; padding: 3px 9px; background: #f3f4f6; border-radius: 4px; }
.pf-product-card .card-category.cat-style-pill  { display: inline-block; padding: 3px 11px; background: #f3f4f6; border-radius: 20px; }
.pf-product-card .card-category a { color: inherit; text-decoration: none; }
.pf-product-card .card-category a:hover { color: #14958f; }

/* Title */
.pf-product-card .card-title {
    font-size: 15px; font-weight: 600;
    line-height: 1.4; color: #111;
    margin-bottom: 5px;
    display: block;
}
.pf-product-card .card-title a { color: var(--pf-c-title); text-decoration: none; transition: color 0.2s; }
.pf-product-card .card-title a:hover { color: #14958f; }

/* Title size config */
.pf-product-card.title-small  .card-title { font-size: 13px !important; }
.pf-product-card.title-medium .card-title { font-size: 15px !important; }
.pf-product-card.title-large  .card-title { font-size: 17px !important; }

/* Title truncation */
.pf-product-card .card-title.limit-1,
.pf-product-card .card-title.pf-limit-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-product-card .card-title.limit-2,
.pf-product-card .card-title.pf-limit-2 {
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    max-height: 2.6em;
}

/* Price */
.pf-product-card .card-price { font-size: 15px; font-weight: 700; color: #111; }

/* del — single clean strikethrough, muted grey, no double line */
.pf-product-card .card-price del {
    font-size: 12px !important;
    color: #9ca3af !important;
    text-decoration: line-through !important;
    text-decoration-color: #9ca3af !important;
    font-weight: 400 !important;
    display: inline !important;
    opacity: 0.85;
}
/* Remove any inner-span strikethrough to prevent double line */
.pf-product-card .card-price del .woocommerce-Price-amount,
.pf-product-card .card-price del .amount {
    font-size: 12px !important;
    color: inherit !important;
    text-decoration: none !important;
    font-weight: 400 !important;
}

.pf-product-card .card-price ins,
.pf-product-card .card-price ins .woocommerce-Price-amount,
.pf-product-card .card-price ins .amount,
.pf-product-card .card-price .current-price {
    font-size: 16px !important; font-weight: 800 !important;
    color: #282c3f !important; text-decoration: none !important;
    line-height: 1.2 !important; display: inline !important;
}
.pf-product-card .card-price ins { background: none !important; }
.pf-product-card .card-price .woocommerce-Price-amount { font-weight: 700; }

/* Price suffix (e.g. "Inc. VAT") — visually separate from the price */
.pf-product-card .card-price .woocommerce-price-suffix {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-left: 4px;
    vertical-align: middle;
}

.pf-product-card .card-price .price-with-from,
.pf-product-card .card-price .price-unit {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.pf-product-card .card-price .from-label,
.pf-product-card .card-price .price-label {
    font-size: 10px; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none !important;
}
.pf-product-card .card-price .price-amount { font-size: 16px; font-weight: 800; color: #111; }

/* --- LEFT ALIGNMENT GRID --- */
.pf-product-card.align-left .card-content {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    align-items: stretch !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
}
.pf-product-card.align-left .card-category       { grid-column: 1/2; grid-row: 1; text-align: left; margin: 0; align-self: center; min-width: 0; }
.pf-product-card.align-left .card-title          { grid-column: 1/2; grid-row: 2; text-align: left; margin: 0; align-self: center; min-width: 0; }
.pf-product-card.align-left .card-price          { grid-column: 2/3; grid-row: 1/3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; align-self: stretch; }
.pf-product-card.align-left .card-rating.rating-content { grid-column: 1/2; grid-row: 3; text-align: left; }
.pf-product-card.align-left .card-swatches       { grid-column: 1/3; grid-row: 4; }
.pf-product-card.align-left .card-actions.actions-footer { grid-column: 1/3; grid-row: 5; }
.pf-product-card.align-left .card-atc-footer     { grid-column: 1/3; grid-row: 6; }

/* --- CENTER ALIGNMENT --- */
.pf-product-card.align-center .card-content {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; text-align: center !important; gap: 6px !important;
    padding: 12px 10px 16px !important;
}
.pf-product-card.align-center .card-category { width: 100% !important; justify-content: center !important; text-align: center !important; display: flex !important; margin-bottom: 4px !important; }
.pf-product-card.align-center .card-title    { width: 100% !important; text-align: center !important; margin-bottom: 2px !important; }
.pf-product-card.align-center .card-title a  { text-align: center !important; margin: 0 auto !important; }

.pf-product-card.align-center .card-price {
    width: 100% !important; justify-content: center !important; align-items: center !important;
}
.pf-product-card.align-center .card-price .price-unit,
.pf-product-card.align-center .card-price .price-with-from {
    display: flex !important; flex-direction: row !important;
    align-items: baseline !important; justify-content: center !important; gap: 8px !important;
}
.pf-product-card.align-center .card-price del,
.pf-product-card.align-center .card-price .original-price {
    order: -1 !important; margin: 0 !important; font-size: 12px !important;
    color: #9ca3af !important; text-decoration: line-through !important;
    text-decoration-color: #9ca3af !important;
    font-weight: 400 !important; display: inline !important; opacity: 0.85;
}
.pf-product-card.align-center .card-price del .woocommerce-Price-amount,
.pf-product-card.align-center .card-price del .amount {
    color: inherit !important; text-decoration: none !important; font-weight: 400 !important;
}
.pf-product-card.align-center .card-price .price-label { text-decoration: none !important; font-size: 11px !important; text-transform: uppercase !important; }
.pf-product-card.align-center .card-price ins,
.pf-product-card.align-center .card-price .current-price,
.pf-product-card.align-center .card-price .amount {
    order: 1 !important; font-size: 16px !important; color: #111 !important;
    font-weight: 800 !important; display: inline !important;
}
.pf-product-card.align-center .card-rating-outside { justify-content: center !important; margin-top: 6px !important; }
.pf-product-card.align-center .card-swatches { margin-top: 8px !important; width: 100% !important; display: flex !important; justify-content: center !important; }
.pf-product-card.align-center .pf-archive-swatches-list { justify-content: center !important; }

/* Footer ATC always stretches full width regardless of card alignment */
.pf-product-card.align-center .card-atc-footer,
.pf-product-card.align-center .card-add-to-cart-footer,
.pf-product-card.align-right  .card-atc-footer,
.pf-product-card.align-right  .card-add-to-cart-footer {
    width: 100% !important;
    align-self: stretch !important;
}
.pf-product-card.align-center .card-atc-footer .button,
.pf-product-card.align-center .card-atc-footer .ajax_add_to_cart,
.pf-product-card.align-center .card-atc-footer .add_to_cart_button,
.pf-product-card.align-right  .card-atc-footer .button,
.pf-product-card.align-right  .card-atc-footer .ajax_add_to_cart,
.pf-product-card.align-right  .card-atc-footer .add_to_cart_button {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* --- RIGHT ALIGNMENT --- */
.pf-product-card.align-right .card-content {
    display: flex !important; flex-direction: column !important;
    align-items: flex-end !important; text-align: right !important; gap: 8px !important;
}


/* ============================================================
   4c. RATING
   ============================================================ */

/* Overlay style (absolute positioned) */
.pf-product-card .card-rating.rating-overlay {
    position: absolute !important;
    z-index: 15 !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(6px);
    padding: 5px 10px !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Content style (in-flow) */
/* Rating - Footer Position (below price) */
.pf-product-card .card-rating.rating-footer {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.pf-product-card .card-rating.rating-footer .rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pf-product-card .card-rating.rating-footer .star {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pf-product-card .card-rating.rating-footer .rating-count {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    margin-left: 2px;
}

.pf-product-card .card-rating.rating-footer.no-rating .rating-count {
    color: #9ca3af;
}

/* Rating - Content Position */
.pf-product-card .card-rating.rating-content {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

.pf-product-card .card-rating.rating-content .rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pf-product-card .card-content .card-rating.rating-outside {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 4px; margin-bottom: 6px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important; height: auto !important;
    transform: none !important;
    opacity: 1 !important; visibility: visible !important;
    z-index: 1;
}

/* Badge positioning (overlay) */
.pf-product-card .card-rating {
    position: absolute;
    bottom: 7px;
    left: 7px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid #d4d5d9;
    transition: all 0.3s ease;
}

.pf-product-card .card-rating.rating-pos-top_left     { top: 7px;    left: 7px;  bottom: auto; }
.pf-product-card .card-rating.rating-pos-top_right    { top: 7px;    right: 7px; bottom: auto; left: auto; }
.pf-product-card .card-rating.rating-pos-bottom_left  { bottom: 7px; left: 7px;  top: auto; }
.pf-product-card .card-rating.rating-pos-bottom_right { bottom: 7px; right: 7px; top: auto; left: auto; }

/* Rating text */
.pf-product-card .card-rating .rating-number,
.pf-product-card .rating-outside .rating-number {
    font-size: 12px; font-weight: 700; color: #282c3f; line-height: 1;
}
.pf-product-card .card-rating .rating-separator,
.pf-product-card .rating-outside .rating-separator { color: #d4d5d9; font-weight: 300; font-size: 12px; line-height: 1; }
.pf-product-card .card-rating .rating-count,
.pf-product-card .rating-outside .rating-count { font-size: 11px; color: #535766; font-weight: 500; line-height: 1; }
.pf-product-card .card-rating .rating-star { width: 11px; height: 11px; flex-shrink: 0; margin-top: -1px; }
.pf-product-card .card-rating.no-rating .rating-number { color: #94969f; }
.pf-product-card .card-rating.no-rating .rating-count  { color: #94969f; }

/* CSS variable support */
.pf-product-card .rating-number { color: var(--rating-number-color, #282c3f); }
.pf-product-card .rating-count  { color: var(--rating-count-color, #282c3f); }

/* Alignment */
.pf-product-card.align-left   .card-rating.rating-outside { grid-column: 1/2; grid-row: 3/4; justify-self: start; text-align: left; }
.pf-product-card.align-center .card-rating.rating-outside { justify-content: center !important; margin: 0 auto !important; }
.pf-product-card.align-right  .card-rating.rating-outside { justify-content: flex-end !important; margin-left: auto !important; }

/* Empty state */
.pf-product-card .rating-outside.no-rating .rating-number { color: #9ca3af !important; }
.pf-product-card .rating-outside.no-rating .rating-star   { fill: #e5e7eb !important; }
.pf-product-card .rating-outside.no-rating .rating-count  { color: #9ca3af !important; font-style: italic; }


/* ============================================================
   4d. QUICK ACTION BUTTONS
   ============================================================ */

.pf-product-card .card-actions {
    position: absolute;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Overlay positions */
.pf-product-card .card-actions.actions-overlay { 
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.pf-product-card .card-actions.actions-pos-top_left     { top: 7px;    left: 7px; }
.pf-product-card .card-actions.actions-pos-top_right    { top: 7px;    right: 7px; }
.pf-product-card .card-actions.actions-pos-bottom_left  { bottom: 7px; left: 7px; }
.pf-product-card .card-actions.actions-pos-bottom_right { bottom: 7px; right: 7px; }
.pf-product-card .card-actions.actions-pos-center {
    top: 50%; left: 50%; transform: translate(-50%, -50%); flex-direction: row;
}

/* Show on hover (all screen sizes) */
.pf-product-card:hover .card-actions.actions-overlay { opacity: 1; }
/* Show on tap (mobile — JS adds is-touched) */
.pf-product-card.is-touched .card-actions.actions-overlay { opacity: 1 !important; transform: translateX(0) !important; }

/* Footer actions */
.pf-product-card .card-actions.actions-footer,
.pf-product-card .card-actions.icons-footer {
    position: relative;
    display: flex; flex-direction: row;
    gap: 7px; margin-top: 12px;
    opacity: 1; transform: none;
}
.pf-product-card .card-actions.actions-footer .action-btn {
    flex: 1; height: 40px; border-radius: 8px; gap: 6px; width: auto;
}
.pf-product-card .card-actions.actions-footer .action-label { display: inline; font-size: 12px; font-weight: 600; }

/* Action button base */
.pf-product-card .action-btn {
    width: var(--pf-icon-sz, 38px); height: var(--pf-icon-sz, 38px); border-radius: 50%;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
    padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pf-product-card .action-btn svg { width: var(--pf-icon-isz, 18px); height: var(--pf-icon-isz, 18px); stroke: #282c3f; fill: none; stroke-width: 2; }
.pf-product-card .action-btn:hover { background: var(--pf-icon-h-bg, #0a0a0a) !important; border-color: var(--pf-icon-h-bg, #0a0a0a) !important; transform: scale(1.1); }
/* Keep icon visible on hover — use hover icon color from theme settings, never inherit bg color */
.pf-product-card .action-btn:hover svg { stroke: var(--pf-icon-h-col, #ffffff) !important; fill: none !important; }
/* Quick-view and compare use same hover as wishlist on product cards */
.pf-product-card .quick-view-btn:hover,
.pf-product-card .compare-btn:hover { background: var(--pf-icon-h-bg, #0a0a0a) !important; border-color: var(--pf-icon-h-bg, #0a0a0a) !important; }
.pf-product-card .quick-view-btn:hover svg,
.pf-product-card .compare-btn:hover svg { stroke: var(--pf-icon-h-col, #ffffff) !important; fill: none !important; }
.pf-product-card .action-btn.in-wishlist,
.pf-product-card .action-btn.active { background: #fef2f2 !important; border-color: #ef4444 !important; }
.pf-product-card .action-btn.in-wishlist svg,
.pf-product-card .action-btn.active svg { fill: #ef4444 !important; stroke: #ef4444 !important; }

/* Swatches */
.pf-archive-swatches-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-archive-swatch {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1); background-size: cover;
    cursor: pointer; transition: all 0.2s ease;
}
.pf-archive-swatch:hover { border-color: #000; transform: scale(1.2); }


/* ============================================================
   5. ADD TO CART
   ============================================================ */

/* Hidden WC trigger */
.pf-atc-hidden-trigger {
    display: none !important; visibility: hidden !important;
    position: absolute !important; pointer-events: none !important;
}

/* pf-card-atc-overlay container */
.pf-product-card .pf-card-atc-overlay {
    position: absolute; z-index: 20;
    opacity: 0; visibility: hidden;
    transform: scale(0.88) translateY(5px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
/* Show on hover — all screen sizes */
.pf-product-card:hover .pf-card-atc-overlay { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
.pf-product-card:hover .pf-card-atc-overlay.atc-pos-bottom_center { transform: translateX(-50%) scale(1) translateY(0); }
.pf-product-card:hover .pf-card-atc-overlay.atc-pos-center { transform: translate(-50%,-50%) scale(1); }
/* Show on tap — mobile */
.pf-product-card.is-touched .pf-card-atc-overlay { opacity: 1 !important; visibility: visible !important; transform: scale(1) translateY(0) !important; }
.pf-product-card.is-touched .pf-card-atc-overlay.atc-pos-bottom_center { transform: translateX(-50%) scale(1) translateY(0) !important; }
.pf-product-card.is-touched .pf-card-atc-overlay.atc-pos-center { transform: translate(-50%,-50%) scale(1) !important; }

/* Overlay positions */
.pf-product-card .pf-card-atc-overlay.atc-pos-bottom_right  { bottom: 10px; right: 10px; }
.pf-product-card .pf-card-atc-overlay.atc-pos-bottom_left   { bottom: 10px; left: 10px; }
.pf-product-card .pf-card-atc-overlay.atc-pos-bottom_center { bottom: 10px; left: 50%; transform: translateX(-50%); }
.pf-product-card .pf-card-atc-overlay.atc-pos-center        { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ICON STYLE */
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn,
.pf-product-card .card-add-to-cart-overlay.atc-style-icon .round-add-to-cart,
.pf-product-card .round-add-to-cart {
    width: 44px; height: 44px; border-radius: 50%;
    background-color: var(--pf-atc-bg); color: var(--pf-atc-txt); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    text-decoration: none; padding: 0;
    position: relative;
}
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn svg,
.pf-product-card .round-add-to-cart svg {
    width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; display: block;
}
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn:hover,
.pf-product-card .round-add-to-cart:hover {
    background-color: var(--pf-atc-h-bg); color: var(--pf-atc-h-tx); transform: scale(1.1); box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Premium Spinner */
.pf-atc-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    animation: pfSpinFade 0.8s linear infinite;
}

.pf-atc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

/* Loading State */
.pf-atc-btn.loading .pf-atc-icon,
.round-add-to-cart.loading .pf-atc-icon,
.pf-atc-btn.loading > svg:not(.pf-atc-spinner),
.round-add-to-cart.loading > svg:not(.pf-atc-spinner) {
    opacity: 0;
}

.pf-atc-btn.loading .pf-atc-spinner,
.round-add-to-cart.loading .pf-atc-spinner {
    opacity: 1;
    stroke: #fff !important;
    color: #fff !important;
}
/* Ensure SVG child elements inherit the stroke */
.round-add-to-cart.loading .pf-atc-spinner path,
.round-add-to-cart.loading .pf-atc-spinner circle,
.pf-atc-btn.loading .pf-atc-spinner path,
.pf-atc-btn.loading .pf-atc-spinner circle {
    stroke: #fff !important;
}

@keyframes pfSpinFade {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* BUTTON STYLE */
.pf-card-atc-overlay.atc-style-button .pf-atc-btn,
.pf-product-card .card-add-to-cart-overlay.atc-style-button .btn-add-to-cart {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: var(--pf-atc-bg, #0a0a0a) !important;
    color: var(--pf-atc-txt, #fff) !important;
    border: none;
    border-radius: var(--pf-atc-r, 8px) !important; /* Follow theme ATC radius setting */
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease; text-decoration: none;
    white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    position: relative;
}
.pf-card-atc-overlay.atc-style-button .pf-atc-btn svg { width: 18px; height: 18px; stroke: var(--pf-atc-txt, #fff); fill: none; stroke-width: 2; }
.pf-card-atc-overlay.atc-style-button .pf-atc-btn:hover,
.pf-product-card .card-add-to-cart-overlay.atc-style-button .btn-add-to-cart:hover {
    background: var(--pf-atc-h-bg, #333) !important; transform: translateY(-2px);
}

.pf-card-atc-overlay.atc-style-button .pf-atc-btn.loading .pf-atc-content {
    opacity: 0;
}

/* BAR STYLE */
.pf-card-atc-overlay.atc-style-bar,
.pf-product-card .card-add-to-cart-overlay.atc-style-full_bar {
    bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    transform: translateY(100%) !important; transition: transform 0.3s ease !important; border-radius: 0 !important;
}
.pf-product-card:hover .pf-card-atc-overlay.atc-style-bar,
.pf-product-card:hover .card-add-to-cart-overlay.atc-style-full_bar {
    transform: translateY(0) !important;
}
.pf-card-atc-overlay.atc-style-bar .pf-atc-btn,
.pf-product-card .card-add-to-cart-overlay.atc-style-full_bar .bar-add-to-cart {
    display: flex; align-items: center; justify-content: center; width: 100%;
    padding: 14px; background: rgba(17,17,17,0.92); backdrop-filter: blur(8px);
    color: #fff; border: none; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer; text-decoration: none;
    transition: background 0.2s;
    position: relative;
    border-radius: 0 !important; /* Force flat — override any global --pf-atc-r injection */
}
.pf-card-atc-overlay.atc-style-bar .pf-atc-btn:hover,
.pf-product-card .card-add-to-cart-overlay.atc-style-full_bar .bar-add-to-cart:hover {
    background: rgba(0,0,0,0.96);
}

.pf-card-atc-overlay.atc-style-bar .pf-atc-btn.loading .pf-atc-text {
    opacity: 0;
}

/* States */
.pf-card-atc-overlay .pf-atc-btn.pf-added,
.pf-product-card .round-add-to-cart.added,
.pf-product-card .footer-add-to-cart.added,
.pf-product-card .ajax_add_to_cart.added { background: #10b981 !important; }

.pf-product-card .ajax_add_to_cart.loading,
.pf-product-card .round-add-to-cart.loading,
.pf-product-card .footer-add-to-cart.loading { pointer-events: none; }

.pf-product-card .round-add-to-cart.out-of-stock { background: #6b7280; cursor: not-allowed; opacity: 0.6; }

/* Footer ATC */
.pf-product-card .card-atc-footer,
.pf-product-card .card-add-to-cart-footer { margin-top: 8px; }

.pf-product-card .card-atc-footer.atc-width-full .button,
.pf-product-card .card-add-to-cart-footer.atc-width-full .footer-add-to-cart {
    width: 100% !important; display: block; text-align: center;
}

.pf-product-card .card-atc-footer .button,
.pf-product-card .card-add-to-cart-footer .footer-add-to-cart {
    display: block !important; padding: 10px 20px;
    width: 100% !important; /* Full width by default */
    box-sizing: border-box;
    background: var(--pf-catc-bg) !important; color: var(--pf-catc-txt) !important;
    border: none !important; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none; text-align: center; transition: background 0.2s;
}
.pf-product-card .card-atc-footer .button:hover,
.pf-product-card .footer-add-to-cart:hover {
    background: var(--pf-catc-h-bg) !important;
    color: var(--pf-catc-h-txt) !important;
}

/* Cart animations - LEGACY (keeping for compatibility) */
.round-add-to-cart.added svg:not(.pf-atc-spinner) { animation: cartBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes cartSpin {
    from { transform: rotate(0deg); }

    to   { transform: rotate(360deg); }
}
@keyframes cartBounce {
    0%   { transform: scale(0.8); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ATC position helpers */
.pf-product-card .card-add-to-cart-overlay { position: absolute; z-index: 55; }
.pf-product-card .card-add-to-cart-overlay.atc-pos-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pf-product-card .card-add-to-cart-overlay.atc-pos-bottom_left  { bottom: 10px; left: 10px; }
.pf-product-card .card-add-to-cart-overlay.atc-pos-bottom_center { bottom: 10px; left: 50%; transform: translateX(-50%); }
.pf-product-card .card-add-to-cart-overlay.atc-pos-bottom_right  { bottom: 10px; right: 10px; }


/* ============================================================
   6. WISHLIST BUTTON — shop.css additions
   (base styles are in main.css)
   ============================================================ */

.pf-wishlist-btn {
    position: relative;
}

/* Pulse animation on add */
.pf-wishlist-btn.added {
    animation: wishlistPulse 0.4s ease;
}

@keyframes wishlistPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* .action-btn variant: small round button on product card overlay */
.action-btn.pf-wishlist-btn {
    width: var(--pf-icon-sz, 38px) !important;
    height: var(--pf-icon-sz, 38px) !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.action-btn.pf-wishlist-btn:hover,
.pf-product-card.is-touched .action-btn.pf-wishlist-btn {
    background: #fef2f2 !important;
    border-color: rgba(239,68,68,0.3) !important;
    transform: scale(1.1) !important;
}
.action-btn.pf-wishlist-btn svg {
    width: var(--pf-icon-isz, 18px) !important;
    height: var(--pf-icon-isz, 18px) !important;
    fill: transparent !important;
    stroke: #ef4444 !important;
    stroke-width: 2 !important;
    transition: all 0.25s ease !important;
}
.action-btn.pf-wishlist-btn.in-wishlist,
.action-btn.pf-wishlist-btn.active,
.action-btn.pf-wishlist-btn.added {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
}
.action-btn.pf-wishlist-btn.in-wishlist svg,
.action-btn.pf-wishlist-btn.active svg,
.action-btn.pf-wishlist-btn.added svg {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

/* RTL mobile — make ALL action-btns (wishlist, QV, compare) equal size */
@media (max-width: 768px) {
    body.rtl .pf-product-card .card-actions .action-btn {
        width:  32px !important;
        height: 32px !important;
        min-width:  32px !important;
        min-height: 32px !important;
        max-width:  32px !important;
        max-height: 32px !important;
        flex-shrink: 0 !important;
        flex-grow:   0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    body.rtl .pf-product-card .card-actions .action-btn svg {
        width:  14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }
    /* Ensure the card-actions gap is consistent in RTL */
    body.rtl .pf-product-card .card-actions {
        gap: 6px !important;
        align-items: center !important;
    }
}


.pf-list-actions .pf-wishlist-btn {
    width: var(--pf-icon-sz, 44px) !important;
    height: var(--pf-icon-sz, 44px) !important;
    background: #ffffff !important;
    border: 1.5px solid #ef4444 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
}

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



/* ============================================================
   7. WISHLIST & CART SIDEBARS
   ============================================================ */

.pf-wishlist-sidebar,
.pf-cart-sidebar {
    position: fixed;
    top: 0; right: -100%;
    width: 85%; max-width: 400px;
    height: 100vh;
    background: #ffffff;
    z-index: 10001;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.pf-wishlist-sidebar.active,
.pf-cart-sidebar.active { right: 0; }

/* Sidebar content area */
.sidebar-content {
    flex: 1; overflow-y: auto; padding: 16px 24px; background: #fafafa;
}

.sidebar-content::-webkit-scrollbar { width: 6px; }
.sidebar-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-content::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.sidebar-content::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Premium close button */
.sidebar-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid #e5e7eb; border-radius: 8px;
    cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden;
}
.sidebar-close::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    opacity: 0; transition: opacity 0.2s ease;
}
.sidebar-close:hover { border-color: #282c3f; transform: rotate(90deg); }
.sidebar-close:hover::before { opacity: 1; }
.sidebar-close:active { transform: rotate(90deg) scale(0.95); }
.sidebar-close svg { width: 18px; height: 18px; stroke: #6b7280; position: relative; z-index: 1; transition: stroke 0.2s ease; }
.sidebar-close:hover svg { stroke: #111827; }

/* Empty states */
.empty-wishlist,
.empty-cart { text-align: center; padding: 80px 24px; color: #9ca3af; }
.empty-wishlist svg,
.empty-cart svg { width: 72px; height: 72px; margin: 0 auto 20px; stroke: #d1d5db; stroke-width: 1.5; }
.empty-wishlist p,
.empty-cart p { font-size: 15px; font-weight: 500; color: #6b7280; margin: 0; }

/* Wishlist/Cart Items */
.wishlist-item,
.cart-item {
    display: flex; gap: 14px; padding: 16px; margin-bottom: 12px;
    background: #ffffff; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: all 0.2s ease;
}
.wishlist-item:hover,
.cart-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.wishlist-item:last-child,
.cart-item:last-child { margin-bottom: 0; }

.wishlist-item .item-image,
.cart-item .item-image { width: 80px; height: 80px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #f9fafb; }
.wishlist-item .item-image img,
.cart-item .item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.wishlist-item:hover .item-image img,
.cart-item:hover .item-image img { transform: scale(1.05); }

.wishlist-item .item-details,
.cart-item .item-details { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.wishlist-item .item-details h4,
.cart-item .item-details h4 {
    font-size: 14px; font-weight: 600; margin: 0; line-height: 1.4; color: #111827;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wishlist-item .item-details h4 a,
.cart-item .item-details h4 a { color: #111827; text-decoration: none; transition: color 0.2s ease; }
.wishlist-item .item-details h4 a:hover,
.cart-item .item-details h4 a:hover { color: #3b82f6; }

.wishlist-item .item-price,
.cart-item .item-price { font-size: 15px; font-weight: 700; color: #282c3f; display: flex; align-items: center; gap: 8px; }
.cart-item .item-qty { font-size: 13px; color: #6b7280; font-weight: 500; }

.wishlist-item .item-remove,
.cart-item .item-remove {
    width: 32px; height: 32px; flex-shrink: 0;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease; align-self: center;
}
.wishlist-item .item-remove:hover,
.cart-item .item-remove:hover { background: #fee2e2; border-color: var(--pf-accent-border); transform: scale(1.05); }
.wishlist-item .item-remove:active,
.cart-item .item-remove:active { transform: scale(0.95); }
.wishlist-item .item-remove svg,
.cart-item .item-remove svg { width: 16px; height: 16px; stroke: #9ca3af; transition: stroke 0.2s ease; }
.wishlist-item .item-remove:hover svg,
.cart-item .item-remove:hover svg { stroke: #ef4444; }
.wishlist-items .loading { text-align: center; padding: 60px 24px; color: #9ca3af; font-size: 15px; font-weight: 500; }

/* Cart total */
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 16px; background: #f9fafb; border-radius: 10px; }
.cart-total span { font-size: 15px; color: #6b7280; font-weight: 500; }
.cart-total strong { font-size: 20px; font-weight: 700; color: #111827; }

/* Buttons */
.btn-checkout,
.btn-view-cart,
.btn-view-all {
    width: 100%; padding: 16px; border: none; border-radius: 10px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    margin-bottom: 10px; transition: all 0.3s ease; letter-spacing: -0.01em;
}
.btn-checkout {
    background: linear-gradient(135deg, #282c3f 0%, #1a1d2e 100%);
    color: #ffffff; box-shadow: 0 4px 12px rgba(40,44,63,0.3);
}
.btn-checkout:hover { background: linear-gradient(135deg, #1a1d2e 0%, #0f1118 100%); box-shadow: 0 6px 16px rgba(40,44,63,0.4); transform: translateY(-2px); }
.btn-checkout:active { transform: translateY(0); }
.btn-view-cart,
.btn-view-all { background: #f9fafb; color: #374151; border: 1px solid #e5e7eb; }
.btn-view-cart:hover,
.btn-view-all:hover { background: #f3f4f6; border-color: #d1d5db; transform: translateY(-1px); }
.btn-view-cart:active,
.btn-view-all:active { transform: translateY(0); }
.btn-view-cart:last-child,
.btn-view-all:last-child { margin-bottom: 0; }

/* Overlay */
.pf-sidebar-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
    z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.pf-sidebar-overlay.active { opacity: 1; visibility: visible; }


/* ============================================================
   8. MODALS
   ============================================================ */

/* --- Sort Modal (Slide from bottom) --- */
.mobile-sort-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000; visibility: hidden; transition: visibility 0.4s;
}
.mobile-sort-modal.active { visibility: visible; }

.sort-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity 0.3s ease;
}
.mobile-sort-modal.active .sort-modal-overlay { opacity: 1; }

.sort-modal-content {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: #ffffff; border-radius: 20px 20px 0 0;
    box-shadow: 0 -15px 30px -5px rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2; padding-bottom: 20px; overflow: hidden; max-height: 70vh;
}
.mobile-sort-modal.active .sort-modal-content { transform: translateY(0); }

.sort-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.03);
    background: #fafafa; flex-shrink: 0;
}
.sort-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #222; text-transform: uppercase; letter-spacing: 0.5px; }

.sort-modal-close {
    background: #fff; border: 1px solid #eee; width: 32px; height: 32px;
    border-radius: 50%; font-size: 20px; color: #666;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1; transition: all 0.2s ease;
}
.sort-modal-close:hover { background: #f5f5f5; }

.sort-modal-body { padding: 4px 0; overflow-y: auto; max-height: calc(70vh - 70px); }

.sort-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent; transition: background 0.2s;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
.sort-option:last-child { border-bottom: none; }
.sort-option:active { background-color: #f5f5f5; }
.sort-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sort-option span { font-size: 15px; color: #555; font-weight: 500; flex: 1; }
.sort-option.active,
.sort-option input[type="radio"]:checked { background: rgba(0,0,0,0.02); }
.sort-option.active span,
.sort-option input[type="radio"]:checked + span { color: #000; font-weight: 700; }
.sort-option.active::after,
.sort-option input[type="radio"]:checked + span::after {
    content: '';
    position: absolute; right: 20px; top: 50%;
    width: 5px; height: 10px;
    border: solid #000; border-width: 0 2px 2px 0;
    transform: translateY(-60%) rotate(45deg);
}

/* --- Sort Dropdown (Desktop) --- */
.pf-sort-dropdown {
    position: fixed !important;
    top: 58px !important; left: 0 !important; right: 0 !important; z-index: 1001 !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(30px) saturate(120%) !important;
    max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; overflow: hidden !important;
    transition: max-height 0.45s var(--pf-anim-ease), opacity 0.3s ease, visibility 0.45s step-end !important;
    border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1) !important;
}
.pf-sort-dropdown.open {
    max-height: 500px !important; opacity: 1 !important; visibility: visible !important;
    transition: max-height 0.45s var(--pf-anim-ease), opacity 0.3s ease, visibility 0s !important;
}
.pf-sort-dropdown .sort-option {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 18px 24px !important; border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    font-size: 14px !important; color: #555 !important; font-weight: 500 !important; cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.pf-sort-dropdown .sort-option.active { color: #000 !important; font-weight: 600 !important; background: rgba(0,0,0,0.02) !important; }
.pf-sort-dropdown .sort-option.active::after {
    content: ''; display: block;
    width: 6px; height: 10px;
    border: solid #000; border-width: 0 2px 2px 0;
    transform: rotate(45deg); margin-right: 4px;
}

/* Sort Overlay */
.pf-sort-overlay {
    position: fixed !important; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000 !important;
    background: rgba(0,0,0,0) !important;
    pointer-events: none !important; opacity: 0 !important;
    backdrop-filter: blur(0px) !important;
    will-change: opacity, backdrop-filter !important;
    transition: all 0.4s var(--pf-anim-ease) !important;
}
.pf-sort-overlay.active {
    background: rgba(0,0,0,0.35) !important; pointer-events: auto !important; opacity: 1 !important;
    backdrop-filter: blur(8px) grayscale(40%) !important;
}


/* --- Attribute buttons (used in QV and product form) --- */
.pf-attribute-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-attribute-btn {
    padding: 10px 20px; border: 2px solid #e5e7eb; background: #fff;
    border-radius: 6px; cursor: pointer; transition: all 0.2s; font-size: 14px; font-weight: 500;
}
.pf-attribute-btn:hover { border-color: #0a0a0a; background: #f9fafb; }
.pf-attribute-btn.selected { border-color: #0a0a0a; background: #0a0a0a; color: #fff; }


/* ============================================================
   9. NOTIFICATION POPUP
   ============================================================ */

.pf-notification {
    position: fixed; top: 20px; right: 20px;
    min-width: 320px; max-width: 400px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 20px; z-index: 99999;
    transform: translateX(450px); opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.pf-notification.show { transform: translateX(0); opacity: 1; }

.pf-notification-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pf-notification.success .pf-notification-icon { background: #10b981; color: #fff; }
.pf-notification.error .pf-notification-icon   { background: #ef4444; color: #fff; }
.pf-notification.info .pf-notification-icon    { background: #3b82f6; color: #fff; }
.pf-notification-icon svg { width: 20px; height: 20px; }

.pf-notification-content { flex: 1; padding-top: 2px; }
.pf-notification-title   { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 4px; }
.pf-notification-message { font-size: 13px; color: #6b7280; line-height: 1.5; }

.pf-notification-close {
    width: 24px; height: 24px; background: transparent; border: none;
    color: #9ca3af; font-size: 20px; line-height: 1; cursor: pointer;
    transition: color 0.2s ease; flex-shrink: 0; padding: 0;
}
.pf-notification-close:hover { color: #111; }

.pf-notification.success .pf-notification-icon svg {
    animation: checkmark 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes checkmark {
    0%   { transform: scale(0.8); opacity: 0; }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}


/* ============================================================
   10. MOBILE HEADER & BOTTOM BAR
   ============================================================ */

/* Default: hide mobile-only elements */
.pf-mobile-header,
.pf-bottom-bar,
.pf-sort-dropdown,
.pf-sort-overlay { display: none !important; }

/* --- Bottom Filter Bar --- */
.pf-bottom-bar {
    position: fixed;
    bottom: 0; top: auto; left: 0; right: 0;
    z-index: 1002;
    height: 58px;
    margin: 0;
    background: var(--pf-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.03);
    border-top: 1px solid var(--pf-border-color);
    border-bottom: none;
}

/* Bottom bar buttons */
.pf-bottom-bar button {
    flex: 1;
    background: transparent; border: none; outline: none;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px; font-weight: 600; color: #444;
    text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
}

.pf-sort-btn { position: relative; }
.pf-sort-btn::after {
    content: ''; position: absolute; right: 0; top: 25%; height: 50%;
    width: 1px; background: var(--pf-border-color);
}

@media (hover: hover) {
    .pf-bottom-bar button:hover { background: rgba(0,0,0,0.02) !important; color: #000 !important; }
}

.pf-bottom-bar button.active { color: var(--pf-active-color) !important; background: rgba(0,0,0,0.03) !important; }

.pf-bottom-bar svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none; stroke-width: 1.5px;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.4s var(--pf-anim-ease);
}
.pf-bottom-bar button.active svg { transform: rotate(180deg); }

/* Mobile filter/sort buttons (toolbar style) */
.mobile-filter-btn,
.mobile-sort-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px;
    background: #fff; border: 2px solid #e5e7eb; border-radius: 8px;
    font-size: 14px; font-weight: 600; color: #111; cursor: pointer; transition: all 0.2s ease;
}
.mobile-filter-btn:active,
.mobile-sort-btn:active { transform: scale(0.98); background: #f9fafb; }
.mobile-filter-btn svg,
.mobile-sort-btn svg { width: 18px; height: 18px; }

/* --- Mobile Search Popup --- */
.pf-mobile-search-popup {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #fff; z-index: 10003;
    transform: translateY(100%); transition: transform 0.3s ease;
}
.pf-mobile-search-popup.active { transform: translateY(0); }

.search-popup-inner { height: 100%; display: flex; flex-direction: column; }
.search-header {
    display: flex; align-items: center; gap: 12px; padding: 16px;
    border-bottom: 1px solid #e5e7eb; background: #fff;
}
.search-back {
    width: 36px; height: 36px; background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.search-back svg { width: 20px; height: 20px; stroke: #282c3f; }
.search-input { flex: 1; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 15px; outline: none; }
.search-input:focus { border-color: #282c3f; box-shadow: 0 0 0 3px rgba(40,44,63,0.08); }

/* Smart Header System (desktop) */
@media (min-width: 1025px) {
    body[class*="header-mode-"]:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) {
        padding-top: 0 !important;
    }
    body.header-mode-smart:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #site-header {
        position: sticky !important; top: 0; width: 100%; z-index: 999; background: var(--header-bg, #fff);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; will-change: transform;
    }
    body.header-mode-smart:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #site-header.header-hidden {
        transform: translateY(-100%) !important;
    }
    body.header-mode-smart:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .shop-sidebar {
        position: sticky !important; top: 100px !important;
        height: calc(100vh - 120px) !important; max-height: calc(100vh - 120px) !important;
        display: flex !important; flex-direction: column !important;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        z-index: 90 !important; padding-top: 0 !important; border-radius: 12px !important;
    }
    body.header-mode-smart:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag):has(#site-header.header-hidden) .shop-sidebar {
        top: 0 !important; height: 100vh !important; max-height: 100vh !important;
        padding-top: 20px !important; border-radius: 0 !important;
    }
    body.header-mode-smart:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag):has(#site-header.header-hidden) .sidebar-inner {
        height: 100% !important; max-height: 100vh !important; display: flex !important; flex-direction: column !important;
    }
    body.header-mode-smart:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag):has(#site-header.header-hidden) .sidebar-filters {
        flex: 1 !important; height: auto !important; max-height: none !important; overflow-y: auto !important;
    }
}


/* ============================================================
   11. PAGINATION & LOAD MORE
   ============================================================ */

/* Load More Button */
.shop-load-more {
    display: flex; justify-content: center; align-items: center;
    width: 100%; margin-top: 50px; margin-bottom: 60px; clear: both;
}

.load-more-btn {
    background-color: #0a0a0a; color: #fff; border: 1px solid #0a0a0a;
    border-radius: 50px; padding: 12px 24px;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.load-more-btn:hover { background-color: #0a0a0a; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
.load-more-btn:active { transform: translateY(-1px); }
.load-more-btn.loading { opacity: 0.8; pointer-events: none; }
.load-more-btn .spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
.load-more-btn.loading .spinner { display: block; }

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

/* Pagination */
.woocommerce-pagination { margin-top: 50px; margin-bottom: 60px; text-align: center; width: 100%; }
.woocommerce-pagination ul.page-numbers {
    display: inline-flex; justify-content: center; align-items: center;
    gap: 8px; padding: 0; margin: 0; list-style: none; border: none;
}
.woocommerce-pagination ul.page-numbers li { margin: 0; float: none; border: none; overflow: visible; }
.woocommerce-pagination .page-numbers {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 50%;
    color: #111; font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1;
    transition: all 0.2s ease;
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination a.page-numbers:hover {
    background: #0a0a0a; color: #fff; border-color: #0a0a0a;
    transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next { width: auto; padding: 0 20px; border-radius: 50px; }

/* No more products */
.no-more-products {
    width: 100%; text-align: center; padding: 40px 0 60px; margin-top: 20px;
    color: #9ca3af; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px;
    display: flex; align-items: center; justify-content: center; gap: 15px;
}
.no-more-products::before,
.no-more-products::after { content: ""; display: block; width: 50px; height: 1px; background-color: #e5e7eb; }


/* ============================================================
   PREMIUM INFINITE SCROLL & END MESSAGE
   ============================================================ */
.pf-infinite-scroll-wrap {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 60px;
    clear: both;
}

.infinite-scroll-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: opacity 0.3s ease;
}

.infinite-scroll-loader .pf-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f4f6;
    border-top-color: #111;
    border-radius: 50%;
    animation: pf-spin 0.8s linear infinite;
}

.infinite-scroll-loader .loading-text {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

/* Premium "No More Products" Text */
.no-more-products {
    width: 100%;
    text-align: center;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.no-more-products span {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: #f9fafb;
    padding: 10px 24px;
    border-radius: 30px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.no-more-products::before,
.no-more-products::after {
    content: "";
    flex: 1;
    max-width: 100px;
    height: 1px;
    background-color: #e5e7eb;
}


/* ============================================================
   MOBILE: PREMIUM INFINITE SCROLL & END MESSAGE
   ============================================================ */
@media (max-width: 767px) {
    .pf-infinite-scroll-wrap {
        margin-top: 20px; /* Reduced from 50px */
        margin-bottom: 30px; /* Reduced from 60px */
    }

    .infinite-scroll-loader .pf-spinner {
        width: 26px; /* Slightly smaller spinner */
        height: 26px;
    }

    .infinite-scroll-loader .loading-text {
        font-size: 11px; /* Smaller loading text */
        letter-spacing: 0.5px;
    }

    .no-more-products {
        padding: 15px 0; /* Less padding around the wrapper */
    }

    .no-more-products span {
        font-size: 11px; /* Smaller text */
        padding: 8px 16px; /* Tighter button look */
        letter-spacing: 1px;
    }
}


/* ============================================================
   12. RESPONSIVE
   ============================================================ */

/* 1280px - Laptop */
@media (max-width: 1280px) {
    .products-container[data-view="grid"] .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 1024px - Tablet / Mobile breakpoint */
@media (max-width: 1024px) {

    /* Show mobile elements */
    .pf-mobile-header { display: block !important; }
    .pf-bottom-bar    { display: flex !important; }

    /* Hide desktop elements */
    .pf-shop-topbar,
    .mobile-shop-toolbar,
    .pf-sticky-opener,
    .shop-view-switcher,
    .pf-col-switcher,
    .shop-controls { display: none !important; }

    /* Hide desktop header on shop pages */
    body.woocommerce-shop .site-header,
    body.woocommerce-shop #site-header,
    body.woocommerce-shop .perfecto-topbar,
    body.tax-product_cat .site-header,
    body.tax-product_cat #site-header,
    body.tax-product_cat .perfecto-topbar,
    body.tax-product_tag .site-header,
    body.tax-product_tag #site-header,
    body.tax-product_tag .perfecto-topbar { display: none !important; }

    /* Body & main resets */
    body.woocommerce-shop,
    body.tax-product_cat,
    body.tax-product_tag { padding: 0 !important; margin: 0 !important; }
    .site-main { padding: 0 !important; margin: 0 !important; }

    /* Layout */
    .shop-layout,
    .shop-layout.sidebar-left,
    .shop-layout.sidebar-right { display: block !important; }

    /* Container resets */
    .pf-shop-content { padding: 0 !important; margin: 0 !important; }
    .pf-shop-content > * { margin-top: 0 !important; padding-top: 0 !important; }
    .pf-container-wide,
    .shop-layout,
    .shop-main,
    .products-container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
    .shop-main { width: 100% !important; }
    .pf-shop { padding-top: 0 !important; padding-bottom: 58px !important; margin: 0 !important; }

    /* Products container */
    .products-container {
        padding: 0 !important; margin: 0 !important;
        padding-bottom: 70px !important; width: 100% !important; max-width: 100% !important;
    }

   /* ── Mobile Grid Design (RESTRICTED TO SHOP ARCHIVE ONLY) ── */

    /* BREATHLESS (Shop/Archives only) */
    body.pf-mobile-grid--breathless .pf-shop .products-container ul.products,
    body.pf-mobile-grid--breathless .pf-shop .products-container[data-view="grid"] .products {
        display: grid !important;
        grid-template-columns: repeat(var(--pf-m-cols, 2), 1fr) !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 0 20px !important;
        width: 100% !important;
        list-style: none !important;
    }
    
    body.pf-mobile-grid--breathless .pf-shop .products-container ul.products > li,
    body.pf-mobile-grid--breathless .pf-shop .products-container .products li.pf-product-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        border-right: 0.5px solid #eaeaec !important;
        border-bottom: 0.5px solid #eaeaec !important;
        border-left: none !important;
        border-top: none !important;
    }
    
    /* Override corners class – breathless wins on shop */
    body.pf-mobile-grid--breathless .pf-shop .products-container .pf-product-card.corners-0,
    body.pf-mobile-grid--breathless .pf-shop .products-container .pf-product-card.corners-8,
    body.pf-mobile-grid--breathless .pf-shop .products-container .pf-product-card.corners-12,
    body.pf-mobile-grid--breathless .pf-shop .products-container .pf-product-card.corners-16 {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    body.pf-mobile-grid--breathless .pf-shop .products-container ul.products > li:nth-child(2n),
    body.pf-mobile-grid--breathless .pf-shop .products-container .pf-product-card:nth-child(2n) {
        border-right: none !important;
    }

    /* FLOATING CARDS (Shop/Archives only) */
    body.pf-mobile-grid--floating .pf-shop .products-container ul.products,
    body.pf-mobile-grid--floating .pf-shop .products-container[data-view="grid"] .products {
        display: grid !important;
        grid-template-columns: repeat(var(--pf-m-cols, 2), 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
        margin: 0 !important;
        width: 100% !important;
        list-style: none !important;
    }
    
    body.pf-mobile-grid--floating .pf-shop .products-container ul.products > li,
    body.pf-mobile-grid--floating .pf-shop .products-container .products li.pf-product-card {
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
        border: none !important;
    }

/* ── Related products + widget cards keep rounded card style on mobile ──────
   The flat-grid rule above is for the shop page only.
   Cards inside .pf-m-related (single product page) and WC widget areas
   should look like small individual cards, not flat grid tiles.           */
.pf-m-related .pf-product-card,
.pf-m-related-wrap .pf-product-card,
.widget_products .pf-product-card,
.widget_recently_viewed_products .pf-product-card,
.widget_top_rated_products .pf-product-card,
.widget_best_sellers .pf-product-card,
.woocommerce-widget-layered-nav .pf-product-card {
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.10) !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    background: #fff !important;
}
    /* Reset card-image radius for ALL corners variants on mobile */
    .pf-product-card.corners-0  .card-image,
    .pf-product-card.corners-8  .card-image,
    .pf-product-card.corners-12 .card-image,
    .pf-product-card.corners-16 .card-image { border-radius: 0px !important; }

    /* Remove right border on 2nd column */
    ul.products > li:nth-child(2n) .pf-product-card,
    .products li.pf-product-card:nth-child(2n),
    .pf-product-card:nth-child(2n) { border-right: none !important; }

    /* Card inner */
    .pf-product-card .card-inner { display: flex !important; flex-direction: column !important; height: 100% !important; padding: 0 !important; margin: 0 !important; }

    /* Image */
    .pf-product-card .card-image {
        width: 100% !important; height: auto !important;
        aspect-ratio: 3/4 !important;
        border-radius: 0 !important; overflow: hidden !important;
        background: #f5f5f6 !important; margin: 0 !important; padding: 0 !important;
    }
    .pf-product-card .card-image .image-link,
    .pf-product-card .card-image .main-image { width: 100% !important; height: 100% !important; }
    .pf-product-card .card-image img {
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; display: block !important;
        margin: 0 !important; padding: 0 !important;
    }
    .pf-product-card .card-image .hover-image,
    .pf-product-card .hover-image { display: none !important; }
    .pf-product-card .woocommerce-LoopProduct-link { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

    /* Content */
    .pf-product-card .card-content { padding: 9px 8px 10px !important; }

    /* Left align grid mobile */
    .pf-product-card.align-left .card-content {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: stretch !important;
        column-gap: 8px !important; row-gap: 2px !important;
    }
    .pf-product-card.align-left .card-category { grid-column: 1/2 !important; grid-row: 1/2 !important; text-align: left !important; margin: 0 !important; font-size: 9px !important; align-self: center !important; min-width: 0 !important; }
    .pf-product-card.align-left .card-title    { grid-column: 1/2 !important; grid-row: 2/3 !important; text-align: left !important; margin: 0 !important; font-size: 13px !important; line-height: 1.3 !important; align-self: center !important; }
    .pf-product-card.align-left .card-price    { grid-column: 2/3 !important; grid-row: 1/3 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; align-self: stretch !important; }

    /* Price typography */
    .pf-product-card .card-price del { font-size: 10px !important; text-decoration: line-through !important; text-decoration-color: #9ca3af !important; color: #9ca3af !important; }
    .pf-product-card .card-price del .woocommerce-Price-amount { font-size: 10px !important; text-decoration: none !important; color: inherit !important; }
    .pf-product-card .card-price ins,
    .pf-product-card .card-price ins .woocommerce-Price-amount { font-size: 14px !important; }

    /* Rating badge — same 7px offset as desktop */
    .pf-product-card .card-rating {
        bottom: 7px !important; left: 7px !important;
        padding: 2px 5px !important; border-radius: 4px !important;
        gap: 3px !important;
    }
    .pf-product-card .card-rating .rating-number { font-size: 9px !important; }
    .pf-product-card .card-rating .rating-star   { width: 8px !important; height: 8px !important; }
    .pf-product-card .card-rating .rating-separator { font-size: 9px !important; }
    .pf-product-card .card-rating .rating-count  { font-size: 8px !important; }

    /* ── ACTION BUTTONS (Wishlist/Compare/QuickView) ── */
    /* Respect the configured position — same as desktop */
    .pf-product-card .card-actions {
        display: flex !important;
        gap: 6px !important;
    }
    /* Override any hardcoded top/right from previous rules */
    .pf-product-card .card-actions.actions-pos-top_left    { top: 7px !important;    left: 7px !important;   right: auto !important; bottom: auto !important; }
    .pf-product-card .card-actions.actions-pos-top_right   { top: 7px !important;    right: 7px !important;  left: auto !important;  bottom: auto !important; }
    .pf-product-card .card-actions.actions-pos-bottom_left { bottom: 7px !important; left: 7px !important;   right: auto !important; top: auto !important;    }
    .pf-product-card .card-actions.actions-pos-bottom_right{ bottom: 7px !important; right: 7px !important;  left: auto !important;  top: auto !important;    }
    .pf-product-card .card-actions.actions-pos-center      { top: 50% !important; left: 50% !important; }

    /* Button sizing on mobile */
    .pf-product-card .card-actions .action-btn {
        width: 32px !important; height: 32px !important;
        background: rgba(255,255,255,0.97) !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    }
    .pf-product-card .card-actions .action-btn svg { width: 14px !important; height: 14px !important; fill: transparent !important; stroke: #282c3f !important; stroke-width: 2 !important; }
    .pf-product-card .compare-btn { display: flex !important; }

    /* Wishlist active state */
    .pf-product-card .pf-wishlist-btn.in-wishlist,
    .pf-product-card .pf-wishlist-btn.active,
    .pf-product-card .pf-wishlist-btn.added { background: #fef2f2 !important; border-color: #ef4444 !important; }
    .pf-product-card .pf-wishlist-btn.in-wishlist svg,
    .pf-product-card .pf-wishlist-btn.active svg,
    .pf-product-card .pf-wishlist-btn.added svg { fill: #ff3f6c !important; stroke: #ff3f6c !important; }

    /* ── ATC OVERLAY ── */
    /* Respect configured position — same as desktop */
    .pf-product-card .pf-card-atc-overlay.atc-pos-bottom_right  { bottom: 7px !important; right: 7px !important; left: auto !important; top: auto !important; }
    .pf-product-card .pf-card-atc-overlay.atc-pos-bottom_left   { bottom: 7px !important; left: 7px !important;  right: auto !important; top: auto !important; }
    .pf-product-card .pf-card-atc-overlay.atc-pos-bottom_center { bottom: 7px !important; left: 50% !important;  top: auto !important; }
    .pf-product-card .pf-card-atc-overlay.atc-pos-top_right     { top: 7px !important;    right: 7px !important; bottom: auto !important; left: auto !important; }
    .pf-product-card .pf-card-atc-overlay.atc-pos-top_left      { top: 7px !important;    left: 7px !important;  bottom: auto !important; right: auto !important; }

    /* ATC icon button on mobile — match desktop theme colors and size */
    .pf-card-atc-overlay.atc-style-icon .pf-atc-btn {
        width: 40px !important; height: 40px !important;
        background: var(--pf-atc-bg, #111827) !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
    }
    .pf-card-atc-overlay.atc-style-icon .pf-atc-btn svg { stroke: var(--pf-atc-txt, #fff) !important; width: 17px !important; height: 17px !important; }
    .pf-card-atc-overlay.atc-style-icon .pf-atc-btn.pf-added { background: #10b981 !important; }
    .pf-card-atc-overlay.atc-style-icon .pf-atc-btn.pf-added svg { stroke: #fff !important; }

    .pf-product-card .card-add-to-cart { display: none !important; }

    /* Timer badge mobile */
    .badge-timer { width: calc(100% + 16px) !important; margin-left: -8px !important; margin-right: -8px !important; border-radius: 0 !important; padding: 4px 5px !important; }
    .badge-timer .t-txt { font-size: 9px !important; }

    /* Countdown mobile */
    .pf-product-card .card-countdown-premium {
        top: 10px !important; height: 28px !important;
        left: 10px !important; right: 10px !important; padding: 0 10px !important;
    }
    .pf-product-card .countdown-timer { font-size: 9px !important; }
    .pf-product-card .countdown-unit span { font-size: 10px !important; }
    .pf-product-card .countdown-label { display: none !important; }
    .pf-product-card.has-countdown .card-badges,
    .pf-product-card.has-countdown .card-actions.actions-pos-top_right,
    .pf-product-card.has-countdown .card-actions.actions-pos-top_left { top: 42px !important; }

    /* Badge mobile — same 7px offset as desktop */
    .badge-pos-top_left,  .pf-product-card .card-badges.badge-pos-top_left  { top: 7px !important; left: 7px !important; }
    .badge-pos-top_right, .pf-product-card .card-badges.badge-pos-top_right  { top: 7px !important; right: 7px !important; }
    .badge-pos-bottom_left  { bottom: 7px !important; left: 7px !important; }
    .badge-pos-bottom_right { bottom: 7px !important; right: 7px !important; }
    .pf-product-card .card-badges,
    .woocommerce-product-gallery .pf-universal-badges { gap: 3px !important; }
    .pf-product-card .badge { font-size: 8px !important; padding: 3px 7px !important; height: 19px !important; min-width: 19px !important; }
    .badge-style-circle .badge { width: 34px !important; height: 34px !important; font-size: 7px !important; line-height: 8px !important; }

    /* Mobile Sidebar */
    .shop-sidebar {
        position: fixed !important; top: 0 !important; left: -100% !important;
        width: 85% !important; max-width: 350px !important;
        height: 100vh !important; background: #fff !important;
        z-index: 10000 !important; overflow-y: auto !important;
        transition: left 0.3s ease !important;
        box-shadow: 2px 0 20px rgba(0,0,0,0.1) !important;
        display: block !important; border-radius: 0 !important;
        max-height: 100vh !important;
    }
    .shop-sidebar.active { left: 0 !important; }

    .shop-sidebar .sidebar-inner { display: flex !important; flex-direction: column !important; height: 100% !important; max-height: 100vh !important; }
    .shop-sidebar .sidebar-header { position: sticky !important; top: 0 !important; background: #fff !important; padding: 16px 20px !important; border-bottom: 1px solid #e5e7eb !important; display: flex !important; align-items: center !important; justify-content: space-between !important; z-index: 10 !important; }
    .shop-sidebar .sidebar-title { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; }
    .shop-sidebar .sidebar-close { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f3f4f6 !important; border: none !important; border-radius: 50% !important; font-size: 20px !important; color: #6b7280 !important; cursor: pointer !important; }
    .shop-sidebar .sidebar-filters { flex: 1 !important; overflow-y: auto !important; padding: 20px !important; }
    .shop-sidebar .sidebar-footer { position: sticky !important; bottom: 0 !important; background: #fff !important; padding: 16px 20px !important; border-top: 1px solid #e5e7eb !important; }
    .shop-sidebar .sidebar-footer .clear-filters { width: 100% !important; padding: 12px !important; background: #f3f4f6 !important; border: none !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; color: #282c3f !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; }

    /* Wishlist/Cart sidebars mobile */
    .pf-wishlist-sidebar,
    .pf-cart-sidebar { display: flex !important; }

  /* Mobile Header — matches main header height */
    .pf-mobile-header {
        position: sticky; top: 0; z-index: 1000;
        background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .pf-header-top {
        display: flex; align-items: center; padding: 0 14px; gap: 10px;
        height: 52px; min-height: 52px;
    }

    /* ── PREMIUM FLAT CIRCLE BUTTONS (Shop Mobile Header) ── */
    .pf-back-btn,
    .pf-header-actions .mobile-search-toggle,
    .pf-wishlist-header-btn,
    .pf-cart-header-btn {
        position: relative;
        width: 36px; height: 36px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0; margin: 0;
        color: #111827; text-decoration: none;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    /* Premium Tap/Active State */
    .pf-back-btn:active,
    .pf-header-actions .mobile-search-toggle:active,
    .pf-wishlist-header-btn:active,
    .pf-cart-header-btn:active {
        transform: scale(0.92);
        background: #f9fafb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        border-color: #d1d5db;
    }

    /* Crisp SVG Icons */
    .pf-back-btn svg,
    .pf-header-actions .mobile-search-toggle svg,
    .pf-wishlist-header-btn svg,
    .pf-cart-header-btn svg { 
        width: 18px; height: 18px; 
        stroke: #111827; stroke-width: 2; fill: none; 
    }

    /* Keep the wishlist red fill state working */
    .pf-wishlist-header-btn.is-wishlisted svg {
        fill: #ef4444 !important;
        stroke: #ef4444 !important;
    }

    /* Title & Subtitle */
    .pf-header-title { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }
    .pf-header-title h1 { font-size: 15px; font-weight: 700; color: #111827; margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
    body .pf-mobile-header h1 { font-size: 15px !important; }

    .pf-item-count { font-size: 11px; color: #6b7280; font-weight: 500; line-height: 1.2; margin-top: 1px; }
    body .pf-mobile-header .pf-item-count { font-size: 11px !important; }

    .pf-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

    /* Premium Count Badges */
    .pf-header-count {
        position: absolute; top: -4px; right: -4px;
        min-width: 18px; height: 18px;
        background: #ef4444; 
        color: #ffffff; font-size: 10px; font-weight: 800;
        border-radius: 10px; display: flex; align-items: center; justify-content: center;
        padding: 0 5px; line-height: 1; 
        border: 2px solid #ffffff; 
        box-shadow: 0 3px 8px rgba(239, 68, 68, 0.25); 
        z-index: 10;
        opacity: 0; visibility: hidden; transform: scale(0.5);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pf-header-count.has-items { opacity: 1; visibility: visible; transform: scale(1); }
    .pf-header-count.updated { animation: badgePulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

    /* ============================================================
       BOTTOM BAR ICON RESET (Fixes the cart/wishlist UI)
       ============================================================ */
    .pf-mobile-bar .pf-cart-header-btn,
    .pf-mobile-bar .pf-wishlist-header-btn,
    .pf-mobile-bar .pf-open-auth {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important; 
        height: auto !important;
        border-radius: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important; 
    }

    .pf-mobile-bar .pf-cart-header-btn:active,
    .pf-mobile-bar .pf-wishlist-header-btn:active,
    .pf-mobile-bar .pf-open-auth:active {
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .pf-mobile-bar .pf-cart-header-btn svg,
    .pf-mobile-bar .pf-wishlist-header-btn svg,
    .pf-mobile-bar .pf-open-auth svg {
        width: 24px !important;
        height: 24px !important;
        stroke: currentColor !important;
    }

    /* List view mobile */
    .products-container[data-view="list"] li.pf-product-card { flex-direction: column !important; }
    .products-container[data-view="list"] .card-image { width: 100% !important; min-width: 0 !important; }
}

/* Desktop: hide sidebars and mobile elements */
@media (min-width: 1025px) {
    .pf-wishlist-sidebar,
    .pf-cart-sidebar,
    .pf-sidebar-overlay { display: none !important; }

    /* ATC bar style still needs special slide-up on hover */
    .pf-product-card .pf-card-atc-overlay.atc-style-bar {
        opacity: 0; transform: translateY(100%);
    }
    .pf-product-card:hover .pf-card-atc-overlay.atc-style-bar { opacity: 1 !important; transform: translateY(0) !important; }

    /* Action button slide-in from edge */
    .pf-product-card .card-actions.actions-pos-top_right,
    .pf-product-card .card-actions.actions-pos-bottom_right { transform: translateX(8px); }
    .pf-product-card .card-actions.actions-pos-top_left,
    .pf-product-card .card-actions.actions-pos-bottom_left { transform: translateX(-8px); }
    .pf-product-card .card-actions.actions-pos-center { transform: translate(-50%, -50%) translateY(8px); }
    .pf-product-card:hover .card-actions.actions-overlay { transform: translateX(0) !important; }
    .pf-product-card:hover .card-actions.actions-pos-center { transform: translate(-50%, -50%) translateY(0) !important; }

    /* Round ATC desktop */
    .card-add-to-cart-round {
        opacity: 0 !important; visibility: hidden !important;
        transform: scale(0.85) translateY(10px) !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    .pf-product-card:hover .card-add-to-cart-round {
        opacity: 1 !important; visibility: visible !important; transform: scale(1) translateY(0) !important;
    }
    .round-add-to-cart:hover { transform: scale(1.1) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important; }
}

/* 768px */
@media (max-width: 768px) {
    .pf-shop-topbar { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
    .shop-sorting, select.shop-sorting { display: none !important; visibility: hidden !important; }

    .products-container[data-view="grid"] .products {
        grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;
    }

    body.shop-mobile-columns-1 .products-container[data-view="grid"] .products { grid-template-columns: 1fr !important; }
    body.shop-mobile-columns-2 .products-container[data-view="grid"] .products { grid-template-columns: repeat(2, 1fr) !important; }

    .pf-product-card .card-content { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 10px !important; }
    .pf-product-card .card-image { min-height: 150px; }
}

/* 480px */
@media (max-width: 480px) {
    .topbar-inner { flex-wrap: wrap; }
    .shop-results { flex: 0 0 100%; }
    .shop-sidebar { width: 100%; max-width: 100%; }
    .mobile-shop-toolbar { padding: 10px 16px; }

    .pf-notification { top: 10px; right: 10px; left: 10px; min-width: auto; max-width: none; }

    .badge-style-ribbon .badge { padding: 0 10px 0 6px !important; clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 0 100%) !important; }
    .badge-pos-top_right .badge-style-ribbon .badge { padding: 0 6px 0 10px !important; clip-path: polygon(100% 0, 4px 0, 0 50%, 4px 100%, 100% 100%) !important; }
}

/* 414px */
@media (max-width: 414px) {
    .pf-product-card .card-content { padding: 7px 9px 9px !important; }
    .pf-product-card .card-category a { font-size: 8px !important; letter-spacing: 0.7px !important; }
    .pf-product-card .card-title a { font-size: 13px !important; line-height: 1.2 !important; }
    .pf-product-card .card-price .price ins,
    .pf-product-card .card-price ins .woocommerce-Price-amount { font-size: 15px !important; }
    .pf-product-card .card-price del { font-size: 12px !important; text-decoration: line-through !important; text-decoration-color: #9ca3af !important; color: #9ca3af !important; }
    .pf-product-card .card-price del .woocommerce-Price-amount { font-size: 12px !important; text-decoration: none !important; color: inherit !important; }
    .pf-product-card .card-actions .action-btn { width: 26px !important; height: 26px !important; }
    .pf-product-card .round-add-to-cart { width: 34px !important; height: 34px !important; }
    .pf-product-card .card-rating { padding: 1px 4px !important; }
    .pf-product-card .card-rating .rating-number { font-size: 8px !important; }
    .pf-product-card .card-rating .rating-star { width: 7px !important; height: 7px !important; }
    .pf-product-card .card-rating .rating-count { font-size: 7px !important; }
}

/* 375px */
@media (max-width: 375px) {
    .pf-search-btn,
    .pf-wishlist-header-btn,
    .pf-cart-header-btn { width: 42px; height: 42px; }
    .pf-search-btn svg,
    .pf-wishlist-header-btn svg,
    .pf-cart-header-btn svg { width: 20px; height: 20px; }
    .pf-header-count { min-width: 18px; height: 18px; font-size: 10px; padding: 0 5px; }
}

/* 360px - Super small phone safety */
@media (max-width: 360px) {
    .pf-product-card.align-left .card-content { display: flex !important; flex-direction: column !important; }
    .pf-product-card.align-left .card-price { align-items: flex-start !important; text-align: left !important; margin-top: 4px !important; flex-direction: row !important; gap: 8px !important; }
    .pf-product-card .card-content { padding: 7px 8px 9px !important; }
    .pf-product-card .card-title { font-size: 12px !important; }
    .pf-product-card .card-price ins .woocommerce-Price-amount { font-size: 13px !important; }
    .pf-product-card .pf-card-atc-overlay.atc-style-icon .pf-atc-btn { width: 32px !important; height: 32px !important; }
    .pf-product-card .card-actions.actions-overlay .pf-wishlist-btn { width: 28px !important; height: 28px !important; }
}

/* Container query - Tight mode (5 columns / sidebar) */
@container product-card (max-width: 200px) {
    .pf-product-card .badge { font-size: 9px !important; padding: 2px 5px !important; height: 18px !important; line-height: 18px !important; min-width: auto !important; }
    .pf-product-card .badge-timer { font-size: 9px !important; padding: 2px 4px !important; height: 20px !important; gap: 2px !important; }
    .pf-product-card .badge-timer .timer-label { display: none !important; }
    .pf-product-card .badge-timer svg { width: 9px !important; height: 9px !important; }
    .pf-product-card .action-btn { width: 28px !important; height: 28px !important; margin-bottom: 3px !important; }
    .pf-product-card .action-btn svg { width: 13px !important; height: 13px !important; }
    .pf-product-card .round-add-to-cart { width: 32px !important; height: 32px !important; }
    .pf-product-card .round-add-to-cart svg { width: 14px !important; height: 14px !important; }
    .pf-product-card .card-rating { padding: 3px 6px !important; bottom: 10px !important; left: 10px !important; gap: 2px !important; }
    .pf-product-card .card-rating .rating-number { font-size: 10px !important; font-weight: 700 !important; }
    .pf-product-card .card-rating svg { width: 9px !important; height: 9px !important; }
    .pf-product-card .card-rating .rating-separator,
    .pf-product-card .card-rating .rating-count { display: none !important; }
    .pf-product-card .card-category { font-size: 8px !important; margin-bottom: 2px !important; line-height: 1.2 !important; }
    .pf-product-card .card-category a { font-size: 8px !important; }
    .pf-product-card .card-title { font-size: 12px !important; margin-bottom: 2px !important; line-height: 1.3 !important; }
}

@container product-card (max-width: 220px) {
    .pf-product-card .card-title.pf-limit-2 { -webkit-line-clamp: 1 !important; max-height: 1.3em !important; }
}


/* =============================================================
   PREMIUM LIST VIEW — pf-list-inner
   Shows rich horizontal card layout when data-view="list"
   ============================================================= */

/* ── LIST / GRID VIEW TOGGLE ─────────────────────────────────
   pf-list-inner is GLOBALLY hidden by default so it never
   bleeds through on Elementor widgets (.pf-products-grid)
   or any other context that isn't the archive shop page.
   Only shown explicitly when the products-container has
   data-view="list".
────────────────────────────────────────────────────────── */

/* GLOBAL: always hide list inner unless in list mode.
   Multiple selectors for maximum specificity override. */
.pf-list-inner,
.pf-product-card .pf-list-inner,
.pf-product-card > .pf-list-inner,
li.pf-product-card .pf-list-inner,
.pf-products-grid .pf-list-inner,
.pf-product-grid-item .pf-list-inner {
    display: none !important;
}

/* Grid mode: show card-inner */
.pf-product-card .card-inner { display: flex; }

/* List mode: switch over */
.products-container[data-view="list"] .card-inner { display: none !important; }
.products-container[data-view="list"] .pf-list-inner { display: flex !important; visibility: visible !important; }

/* LIST CARD BASE */
.products-container[data-view="list"] ul.products {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: unset !important;
}

.products-container[data-view="list"] li.pf-product-card {
    width: 100% !important;
    max-width: 100% !important;
}

.pf-list-inner {
    flex-direction: row;
    width: 100%;
    align-items: stretch;
    background: var(--pf-c-bg, #fff);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--pf-c-border, #f0f0f0);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    min-height: 190px;
}

.pf-list-inner:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* IMAGE */
.pf-list-image {
    position: relative;
    width: 230px;
    min-width: 230px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f5f5f5;
    /* stretch to full card height */
    align-self: stretch;
}

.pf-list-image a {
    display: block;
    height: 100%;
    position: relative;
}

.pf-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.pf-list-inner:hover .pf-list-image img {
    transform: scale(1.05);
}


/* pf-list-badge replaced by card-badges system */
/* card-badges inside list view image — ensure proper stacking */
.pf-list-image .card-badges {
    z-index: 20 !important;
}


/* DETAILS */
.pf-list-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 26px;
    gap: 14px;
    min-width: 0;
}

.pf-list-top {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pf-list-cat {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--pf-c-cat, #9ca3af);
    font-weight: 600;
}

.pf-list-cat a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.pf-list-cat a:hover { color: var(--pf-c-title, #111); }

.pf-list-title {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pf-c-title, #111827);
}

.pf-list-title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.pf-list-title a:hover { opacity: 0.72; }

.pf-list-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #6b7280;
}

.pf-list-rating .star-rating {
    font-size: 13px;
    width: auto;
    overflow: visible;
}

.pf-list-rating-count { color: #9ca3af; }

/* DESCRIPTION */
.pf-list-desc-wrap { display: flex; flex-direction: column; gap: 4px; }

.pf-list-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: #6b7280;
    margin: 0;
}

.pf-list-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--pf-c-title, #111827);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.6;
    transition: opacity 0.18s;
}

.pf-list-read-more:hover { opacity: 1; }

.pf-rm-icon {
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

/* FOOTER */
.pf-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--pf-c-border, #f0f0f0);
}

.pf-list-price {
    font-size: 19px;
    font-weight: 800;
    color: var(--pf-c-price, #111827);
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pf-list-price .from-label {
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
}

.pf-list-price del {
    font-size: 14px;
    font-weight: 400;
    color: #c4c4c4;
}

.pf-list-price ins {
    text-decoration: none;
    color: var(--pf-c-sale, #ef4444);
}

.pf-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Action icon buttons (wishlist/compare) */
.pf-list-action-btn {
    background: #f4f4f5;
    border: 1px solid transparent;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
    transition: background 0.18s, color 0.18s, transform 0.18s;
    padding: 0;
    flex-shrink: 0;
}

.pf-list-action-btn:hover,
.pf-list-action-btn.in-wishlist {
    background: var(--pf-atc-bg, #111827);
    color: #fff;
    transform: scale(1.08);
}

/* ATC button — icon + text, matches card overlay colors */
.pf-list-atc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pf-atc-bg, #111827);
    color: var(--pf-atc-txt, #fff);
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.15s ease;
}

.pf-list-atc-btn:hover {
    background: var(--pf-atc-hover, #374151);
    transform: scale(1.08);
}

.pf-list-atc-btn.loading { opacity: 0.6; cursor: not-allowed; transform: none; }
.pf-list-atc-btn.added { background: #16a34a !important; }

.pf-list-out-of-stock {
    font-size: 12.5px;
    color: #9ca3af;
    font-weight: 500;
    padding: 9px 16px;
    background: #f9fafb;
    border-radius: 8px;
}

/* ============================================================
   LIST VIEW MOBILE — Image on LEFT side, compact
   ============================================================ */
@media (max-width: 767px) {
    .products-container[data-view="list"] .pf-list-inner {
        flex-direction: row !important;
        min-height: 130px;
        border-radius: 10px;
    }

    .products-container[data-view="list"] .pf-list-image {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        height: auto;
        align-self: stretch;
    }

    .products-container[data-view="list"] .pf-list-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .pf-list-details {
        padding: 12px 14px;
        gap: 8px;
    }

    .pf-list-title { font-size: 14px; }

    .pf-list-desc-wrap,
    .pf-list-rating { display: none; }

    .pf-list-footer {
        padding-top: 8px;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .pf-list-price { font-size: 15px; font-weight: 800; }

    .pf-list-action-btn { width: 32px; height: 32px; }

    .pf-list-atc-btn {
        width: 38px;
        height: 38px;
    }

    .pf-list-atc-btn svg { flex-shrink: 0; }
}
/* ============================================================
   PERFECTO — ATC BUTTON SPINNER (all text-style add-to-cart buttons)
   ============================================================ */

/* Shared spinner keyframe (reuse if already defined) */
@keyframes pf-atc-spin {
    to { transform: rotate(360deg); }
}

/* Generic spinner element injected by JS — spinner only, no text */
.pf-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pf-atc-spin 0.65s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0;
}

/* When injected as only child — center absolutely in button */
.pf-atc-btn.pf-loading,
.pf-list-atc-btn.loading,
.single_add_to_cart_button.loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}
.pf-atc-btn.pf-loading .pf-btn-spinner,
.pf-list-atc-btn.loading .pf-btn-spinner,
.single_add_to_cart_button.loading .pf-btn-spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0;
    width: 18px !important;
    height: 18px !important;
}

/* Keep buttons from jumping in size during loading */
.pf-card-atc-overlay.atc-style-button .pf-atc-btn.pf-loading,
.pf-card-atc-overlay.atc-style-bar .pf-atc-btn.pf-loading,
.pf-card-atc-overlay.atc-style-pill .pf-atc-btn.pf-loading,
.pf-list-atc-btn.loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.85;
}

/* Single product page add to cart button */
.single_add_to_cart_button.pf-loading,
.woocommerce-variation-add-to-cart .single_add_to_cart_button.pf-loading {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    opacity: 0.85;
}

/* Icon-style ATC button — spinner via ::after overlay (button only has SVG, no text) */
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn {
    position: relative;
    overflow: hidden;
}
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn.pf-loading {
    pointer-events: none;
}
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn.pf-loading svg {
    opacity: 0;
}
.pf-card-atc-overlay.atc-style-icon .pf-atc-btn.pf-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pf-atc-spin 0.65s linear infinite;
}


/* ── Compare sticky bar (shown on shop/product pages) ──────────────────── */
.pf-compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--pf-dark, #111);
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.pf-compare-bar.is-visible {
    transform: translateY(0);
}

.pf-compare-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 20px;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.pf-compare-bar__label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex: 1;
    min-width: 120px;
}

.pf-compare-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.pf-compare-bar__btn--view {
    background: #fff;
    color: #111;
}

.pf-compare-bar__btn--view:hover {
    background: #f0f0f0;
    color: #111;
}

.pf-compare-bar__btn--clear {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.pf-compare-bar__btn--clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@media (max-width: 600px) {
    .pf-compare-bar__inner {
        gap: 10px;
        padding: 12px 16px;
    }
    .pf-compare-bar__label {
        font-size: 13px;
        width: 100%;
        text-align: center;
        flex: none;
    }
    .pf-compare-bar__btn {
        flex: 1;
        font-size: 12px;
        padding: 8px 14px;
    }
}