/* ===================================
   SHOP PAGE STYLES - APPLE MINIMAL STYLE
   Font: Prompt (Thai), SF Pro Display (Fallback)
   =================================== */

/* === PROMPT FONT IMPORT === */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

/* === BASE VARIABLES === */
:root {
    --primary-color: #325D53;
    --primary-hover: #285446;
    --text-dark: #1d1d1f;
    --text-secondary: #86868b;
    --text-light: #6e6e73;
    --border-color: #d2d2d7;
    --background-light: #fbfbfd;
    --white: #ffffff;
    --sale-color: #ff3b30;
    --success-color: #34c759;
}

/* === PAGE LAYOUT === */
.woocommerce-shop-page {
    background: var(--white);
    min-height: 100vh;
}

/* Fix header */
.woocommerce-shop-page .homepage-header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.woocommerce-shop-page .logo .logo-colored {
    opacity: 0;
}

.woocommerce-shop-page .logo .logo-green {
    opacity: 1;
}

.woocommerce-shop-page .mobile-menu-toggle span {
    background: var(--primary-color);
}

.woocommerce-shop-page .line-button,
.woocommerce-shop-page .main-nav ul li a {
    color: var(--primary-color);
}

/* === MAIN CONTENT === */
.woocommerce-main-content {
    padding: 0 20px 80px;
    min-height: auto;
    max-width: 1400px;
    margin: 0 auto;
}

/* === SHOP HEADER === */
.shop-page-header {
    text-align: center;
    margin-bottom: 48px;
    animation: fadeInUp 0.8s ease;
}

.shop-page-title {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.0714285714;
    letter-spacing: -0.005em;
}

.shop-page-subtitle {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.381;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    letter-spacing: 0.011em;
}

/* === FILTER & SEARCH SECTION === */
.shop-filters-wrapper {
    background: var(--background-light);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 48px;
    animation: fadeInUp 0.6s ease 0.2s both;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.shop-filters-container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.filters-left {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.filters-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* === FILTER BUTTONS === */
.filter-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 8px 18px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 980px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.016em;
}

.filter-btn:hover {
    background: var(--background-light);
    border-color: var(--text-secondary);
}

.filter-btn.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* === PRICE FILTER === */
.price-filter-group {
    position: relative;
}

.price-filter-dropdown {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    position: absolute;
    top: calc(100% + 8px);
    /* Anchor to button's right edge so the 320-360px panel never overflows
       past the right side of the viewport on wide layouts. */
    left: auto;
    right: 0;
    min-width: 320px;
    max-width: 360px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: none;
}

.price-filter-dropdown.active {
    display: block;
    animation: slideDown 0.3s ease;
}

.price-filter-title {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.price-inputs {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.price-input-group {
    flex: 1;
}

.price-input-group label {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 4px;
}

.price-input-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
}

.price-separator {
    color: var(--text-secondary);
    margin-top: 20px;
}

.price-filter-actions {
    display: flex;
    gap: 8px;
}

.price-filter-apply,
.price-filter-reset {
    flex: 1;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.price-filter-apply {
    background: var(--primary-color);
    color: var(--white);
    border: none;
}

.price-filter-apply:hover {
    background: var(--primary-hover);
}

.price-filter-reset {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.price-filter-reset:hover {
    background: var(--background-light);
}

/* === PRICE FILTER WRAPPER (anchor for absolute-positioned dropdown) ===
   Markup uses .price-filter-wrapper but the original .price-filter-group
   rule above never matched it, so the dropdown's position:absolute was
   resolving against <body> and falling off-screen. */
.price-filter-wrapper {
    position: relative;
}

/* === DUAL-RANGE SLIDER ===
   The two <input type="range"> elements stack on top of a styled track,
   with their default appearance stripped. Only the thumbs receive pointer
   events so users can grab either one without the input itself blocking
   clicks on the other. The fill bar between thumbs is a separate <div>
   whose left/right percentages are set imperatively by shop.js. */
.price-slider-wrapper {
    position: relative;
    height: 24px;
    margin: 20px 0 16px;
}

.price-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #e5e5ea;
    border-radius: 2px;
    transform: translateY(-50%);
}

.price-slider-fill {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-color);
    border-radius: 2px;
    transform: translateY(-50%);
}

.price-slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease;
}

.price-slider::-webkit-slider-thumb:hover,
.price-slider::-webkit-slider-thumb:active {
    transform: scale(1.12);
}

.price-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    pointer-events: auto;
}

.price-slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 100%;
}

.price-slider::-moz-range-track {
    background: transparent;
    border: none;
    height: 100%;
}

/* === CURRENT PRICE DISPLAY === */
.price-filter-current {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    margin: 4px 0 8px;
}

.price-filter-current .price-filter-dash {
    margin: 0 6px;
    color: var(--text-secondary);
}

.price-filter-current output {
    display: inline;
    font-variant-numeric: tabular-nums;
}

/* === DROPDOWN HEAD (desktop) === */
.price-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.price-filter-title {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

/* === PRESET CHIPS === */
.price-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.price-preset {
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 7px 14px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: 980px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.price-preset:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.price-preset.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* === SEARCH BOX === */
.search-box {
    position: relative;
    min-width: 280px;
}

.search-input {
    width: 100%;
    padding: 8px 40px 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 980px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: var(--white);
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(50, 93, 83, 0.1);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 16px;
}

/* === ACTIVE FILTERS === */
.active-filters {
    display: none;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    animation: fadeInUp 0.3s ease;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.active-filters.has-filters {
    display: flex;
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 980px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.active-filter-tag .remove {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.2s ease;
}

.active-filter-tag .remove:hover {
    background: rgba(255, 255, 255, 0.5);
}

.clear-all-filters {
    padding: 6px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 980px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-all-filters:hover {
    background: var(--background-light);
    color: var(--text-dark);
}

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

/* === PRODUCT CARD === */
.woocommerce ul.products li.product {
    background: var(--white);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin: 0;
    padding: 0;
    animation: fadeInUp 0.6s ease;
    animation-fill-mode: both;
    /* Reset WC default `.products.columns-4 li.product { width:22.05%; float:left }`
       which fights our CSS Grid layout and makes cards collapse to ~22% of the
       grid track on mobile (2-col breakpoint). */
    width: auto;
    float: none;
    clear: none;
}

.woocommerce ul.products li.product:nth-child(1) { animation-delay: 0.1s; }
.woocommerce ul.products li.product:nth-child(2) { animation-delay: 0.15s; }
.woocommerce ul.products li.product:nth-child(3) { animation-delay: 0.2s; }
.woocommerce ul.products li.product:nth-child(4) { animation-delay: 0.25s; }

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

/* === PRODUCT IMAGE === */
.woocommerce ul.products li.product .product-image-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--background-light);
    aspect-ratio: 1;
}

.woocommerce ul.products li.product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* === SALE BADGE - APPLE STYLE === */
.woocommerce span.onsale {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--sale-color);
    color: var(--white);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

/* === PRODUCT CONTENT === */
.woocommerce ul.products li.product .product-content {
    padding: 16px;
}

.woocommerce ul.products li.product > a {
    text-decoration: none;
    display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 8px 0;
    line-height: 1.2353641176;
    letter-spacing: -0.022em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
    transition: color 0.2s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--primary-color);
}

/* === PRODUCT PRICE - SERIOUS DESIGN === */
.woocommerce ul.products li.product .price {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 8px 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Regular Price (not on sale) */
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price > .woocommerce-Price-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

/* On Sale - Sale Price - RED */
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    background: transparent;
    order: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.woocommerce ul.products li.product .price ins .amount {
    font-size: 24px;
    font-weight: 700;
    color: #ff424e;
    letter-spacing: -0.01em;
}

/* Discount Badge - ติดข้างราคาลด (ins) */
.woocommerce ul.products li.product .price ins::after {
    content: attr(data-discount);
    background: #ff424e;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1;
}

/* On Sale - Original Price - ไม่มี badge */
.woocommerce ul.products li.product .price del {
    opacity: 1;
    order: 2;
}

.woocommerce ul.products li.product .price del .amount {
    font-size: 15px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Hide screen reader text */
.woocommerce ul.products li.product .price .screen-reader-text {
    display: none;
}

/* === ADD TO CART BUTTON - APPLE STYLE === */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .product-promotions-btn {
    width: 100%;
    background: var(--primary-color);
    color: var(--white) !important;
    border: none;
    padding: 10px 20px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 980px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    letter-spacing: -0.016em;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .product-promotions-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.02);
}

.woocommerce ul.products li.product .button.loading {
    opacity: 0.7;
    cursor: wait;
}

.woocommerce ul.products li.product .button i,
.woocommerce ul.products li.product .product-promotions-btn i {
    font-size: 14px;
}

.woocommerce ul.products li.product .product-promotions-btn span {
    color: var(--white);
    font-weight: 600;
}

/* === PAGINATION - APPLE STYLE === */
.woocommerce nav.woocommerce-pagination {
    margin-top: 64px;
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    list-style: none;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--background-light);
    border-color: var(--text-secondary);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* === NO PRODUCTS === */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
    text-align: center;
    padding: 80px 20px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    color: var(--text-secondary);
    background: var(--background-light);
    border-radius: 18px;
    border: none;
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ===================================
   SHOP PAGE - SWIPER HERO SLIDER
   Shopee/Lazada Style
   =================================== */

/* Hero Banner Section */
.hero-banner-section {
    width: 100%;
    max-width: 1400px;
    margin: 120px auto 48px;
    padding: 0 20px;
}

.hero-swiper {
    border-radius: 24px;
    overflow: hidden;
    background: #f5f5f7;
    aspect-ratio: 16/5;
}

.hero-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-swiper .swiper-slide a,
.hero-swiper .swiper-slide picture {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-swiper .hero-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Swiper Navigation Buttons */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: #1d1d1f;
}

.hero-swiper .swiper-button-prev:after,
.hero-swiper .swiper-button-next:after {
    font-size: 20px;
    font-weight: bold;
}

.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* Swiper Pagination */
.hero-swiper .swiper-pagination {
    bottom: 20px;
}

.hero-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.hero-swiper .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: #fff;
}

/* ===================================
   SHOP BANNERS SECTION
   =================================== */

/* Shop Banners Section */
.shop-banners-section {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 48px;
    padding: 0 20px;
}

/* Default 3 columns grid */
.shop-banners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 2 Banners Grid - NEW */
.shop-banners-grid.shop-banners-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.shop-banner-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 2/1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.shop-banner-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.shop-banner-item a,
.shop-banner-image-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}

.shop-banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.shop-banner-item:hover img {
    transform: scale(1.05);
}

/* ===================================
   FULL WIDTH BANNER SECTION - NEW
   สำหรับ banner เต็มความกว้าง 1 อัน
   =================================== */

.full-width-banner-section {
    width: 100%;
    max-width: 1400px;
    margin: 48px auto;
    padding: 0 20px;
}

.full-width-banner-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4/1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.full-width-banner-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.full-width-banner-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.full-width-banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.full-width-banner-item:hover img {
    transform: scale(1.03);
}

/* ===================================
   MOBILE PRICE FILTER MODAL
   =================================== */

.price-filter-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 10000;
    align-items: flex-end;
    animation: fadeIn 0.3s ease;
}

.price-filter-modal.active {
    display: flex;
}

.price-filter-modal-content {
    background: var(--white);
    border-radius: 24px 24px 0 0;
    padding: 24px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.price-filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

/* JS at js/shop.js builds the modal with <h3> instead of .price-filter-modal-title;
   include both selectors so either markup gets the same heading style. */
.price-filter-modal-title,
.price-filter-modal-header h3 {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.price-filter-modal-close {
    width: 32px;
    height: 32px;
    background: var(--background-light);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark);
    font-size: 20px;
    transition: all 0.2s ease;
}

.price-filter-modal-close:active {
    transform: scale(0.9);
}

.price-filter-modal-body {
    margin-bottom: 24px;
}

.price-filter-modal-footer {
    display: flex;
    gap: 12px;
}

.price-filter-modal-footer button {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.price-filter-modal-apply {
    background: var(--primary-color);
    color: var(--white);
    border: none;
}

.price-filter-modal-apply:active {
    transform: scale(0.98);
}

.price-filter-modal-reset {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* === RESPONSIVE DESIGN === */

/* Large Desktop */
@media (min-width: 1440px) {
    .woocommerce-main-content {
        max-width: 1600px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .woocommerce-main-content {
        padding: 0 20px 60px;
    }
    
    .shop-page-title {
        font-size: 48px;
    }
    
    .shop-page-subtitle {
        font-size: 19px;
    }
    
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .shop-filters-container {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-left,
    .filters-right {
        width: 100%;
    }

    /* Stack price-filter button + search-box vertically on tablet/mobile;
       horizontal layout overflowed because .search-box had min-width:100%
       AND .filters-right had no flex-wrap, so the search box was forced
       to the full row width *next to* the price button. */
    .filters-right {
        flex-direction: column;
        align-items: stretch;
    }

    .price-filter-wrapper {
        width: 100%;
    }

    .price-filter-wrapper .price-filter-btn {
        width: 100%;
        justify-content: center;
    }

    /* Tablet: search-box at 90% of column-stacked .filters-right so it
       breathes a little instead of touching the full edge. Mobile (@768)
       overrides this back to flex sizing for the Shopee-style row. */
    .search-box {
        min-width: 90%;
    }

    .full-width-banner-item {
        aspect-ratio: 3/1;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .woocommerce-main-content {
        padding: 0 16px 60px;
    }
    
    .hero-banner-section {
        margin: 100px auto 32px;
        padding: 0 16px;
    }
    
    .hero-swiper {
        border-radius: 16px;
        aspect-ratio: 16/9;
    }
    
    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next {
        width: 36px;
        height: 36px;
    }
    
    .hero-swiper .swiper-button-prev:after,
    .hero-swiper .swiper-button-next:after {
        font-size: 16px;
    }
    
    .shop-banners-section {
        margin: 0 auto 32px;
        padding: 0 16px;
    }
    
    .shop-banners-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .shop-banners-grid.shop-banners-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .shop-banner-item {
        border-radius: 12px;
    }
    
    .full-width-banner-section {
        margin: 32px auto;
        padding: 0 16px;
    }
    
    .full-width-banner-item {
        border-radius: 12px;
        aspect-ratio: 2/1;
    }
    
    .shop-page-header {
        margin-bottom: 32px;
        padding: 0 16px;
    }
    
    .shop-page-title {
        font-size: 40px;
    }
    
    .shop-page-subtitle {
        font-size: 17px;
    }
    
    /* === MOBILE FILTER BAR — Shopee/Lazada style ===
       Row 1: search box (flex-grow) + compact price-filter icon button.
       Row 2: category chips in horizontal scroll (no wrap, no overflow).
       Overrides the @media (max-width: 1024px) "stack vertical" rules so
       on phones the bar fits in two compact rows instead of 4-5 stacked
       full-width rows. */
    .shop-filters-wrapper {
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 32px;
        margin-left: 16px;
        margin-right: 16px;
    }

    .shop-filters-container {
        gap: 12px;
    }

    /* Search + price-icon row first (visual order, markup order is reversed) */
    .filters-right {
        order: -1;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .search-box {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .price-filter-wrapper {
        width: auto;
        flex-shrink: 0;
    }

    .price-filter-wrapper .price-filter-btn {
        width: auto;
        padding: 10px 12px;
        justify-content: center;
    }

    /* Compact icon-only price button: hide label + chevron */
    .price-filter-btn .price-filter-label,
    .price-filter-btn .price-filter-chevron {
        display: none;
    }

    /* Category chip row: single line, horizontal scroll, hidden scrollbar */
    .filters-left {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .filters-left::-webkit-scrollbar {
        display: none;
    }

    .filter-group {
        flex-wrap: nowrap;
        width: max-content;
    }

    .filter-group .filter-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 15px;
        min-height: 38px;
    }
    
    .woocommerce ul.products li.product .price ins .amount {
        font-size: 21px;
    }
    
    .woocommerce ul.products li.product .price del .amount {
        font-size: 12px;
    }
    
    .woocommerce ul.products li.product .price ins::after {
        font-size: 10px;
        padding: 2px 4px;
    }
    
    .woocommerce ul.products li.product .button {
        font-size: 13px;
        padding: 8px 16px;
    }
    
    /* Hide dropdown on mobile, use modal instead */
    .price-filter-dropdown {
        display: none !important;
    }
    
    /* Show modal trigger on mobile */
    .filter-btn[data-filter="price"] {
        display: inline-flex;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .shop-page-title {
        font-size: 32px;
    }
    
    .shop-page-subtitle {
        font-size: 15px;
    }
    
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
    
    .woocommerce ul.products li.product .product-content {
        padding: 12px;
    }
    
    .full-width-banner-item {
        aspect-ratio: 16/9;
    }
}
/* ===================================
   SHOP BTN GROUP - Cart + Buy Now
   =================================== */
.shop-btn-group {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.shop-btn-group .btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 44px;
    border: 2px solid #325D53;
    background: #ffffff;
    color: #325D53;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    flex-shrink: 0;
}

.shop-btn-group .btn-add-cart:hover {
    background: #325D53;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(50,93,83,0.3);
}

.shop-btn-group .btn-add-cart.added {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

.shop-btn-group .btn-buy-now {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border: none;
    background: linear-gradient(135deg, #325D53 0%, #24473f 100%);
    color: #ffffff;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(50,93,83,0.25);
}

.shop-btn-group .btn-buy-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(50,93,83,0.4);
    background: linear-gradient(135deg, #285446 0%, #1e3b34 100%);
}

.shop-btn-group .btn-buy-now .fa-bolt {
    font-size: 14px;
}

.shop-btn-group .btn-add-cart.loading,
.shop-btn-group .btn-buy-now.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .shop-btn-group {
        gap: 6px;
        margin-top: 10px;
    }
    
    .shop-btn-group .btn-add-cart {
        width: 42px;
        min-width: 42px;
        height: 40px;
        font-size: 16px;
        border-radius: 10px;
    }
    
    .shop-btn-group .btn-buy-now {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
    }
}

@media (max-width: 380px) {
    .shop-btn-group .btn-add-cart {
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 14px;
    }
    
    .shop-btn-group .btn-buy-now {
        height: 38px;
        font-size: 12px;
        gap: 5px;
    }
}