/*
 * ExclusiveFurnishing.com — Mobel-Inspired Design v2
 * Inspired by ThemeForest Mobel (#20382155) by ElaThemes
 *
 * ============== DESIGN TOKENS ==============
 *   --canvas:   #FFFFFF (clean white)
 *   --ink:      #1A1A1A (near-black)
 *   --accent:   #F5C518 (Mobel's signature mustard yellow)
 *   --secondary:#2B2B2B (dark gray)
 *   --muted:    #8A8A8A (mid-gray)
 *   --surface:  #FAFAFA (light gray bg)
 *   --sale:     #E53935 (red sale badge)
 *
 *   Display: Montserrat (bold uppercase sans-serif)
 *   Body:    Roboto (clean readable)
 *   Price:   Montserrat bold
 *
 * ============== BREAKPOINTS ==============
 *   Desktop:  > 1024px (4 cols)
 *   Tablet:   768-1024px (3 cols)
 *   Mobile:   481-767px  (2 cols)
 *   Small:    <= 480px  (1-2 cols)
 */

:root {
    --ef-canvas: #FFFFFF;
    --ef-ink: #1A1A1A;
    --ef-accent: #F5C518;
    --ef-accent-dark: #D9A800;
    --ef-secondary: #2B2B2B;
    --ef-muted: #8A8A8A;
    --ef-surface: #FAFAFA;
    --ef-sale: #E53935;
    --ef-sage: #B5C9A8;
    --ef-sage-light: #D8E4D0;
    --ef-sage-dark: #6B8068;
    --ef-mint: #A8D5BA;
    --ef-green-accent: #8FA681;
    --ef-display: 'Montserrat', system-ui, sans-serif;
    --ef-sans: 'Roboto', -apple-system, system-ui, sans-serif;
    --ef-hairline: #EAEAEA;
}

/* ============== GLOBAL ============== */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(245, 197, 24, 0.2);
}

body,
.site-content,
.wp-site-blocks,
.kadence-site-content {
    background-color: var(--ef-canvas) !important;
    color: var(--ef-ink) !important;
    font-family: var(--ef-sans) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.6;
}

/* Container constraint */
.site-container,
.kadence-site-content .content-container {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 768px) {
    .site-container,
    .kadence-site-content .content-container {
        padding: 0 16px;
    }
}

/* ============== TYPOGRAPHY ============== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title,
.woocommerce-loop-product__title,
.wp-block-heading {
    font-family: var(--ef-display) !important;
    color: var(--ef-ink) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 16px;
}

h1 { font-size: clamp(36px, 5vw, 64px) !important; }
h2 { font-size: clamp(24px, 3.5vw, 42px) !important; }
h3 { font-size: clamp(18px, 2.5vw, 28px) !important; }

p, body, li {
    font-family: var(--ef-sans) !important;
    color: var(--ef-ink) !important;
    line-height: 1.6;
}

/* ============== PRICES ============== */
.woocommerce-Price-amount,
.price {
    font-family: var(--ef-display) !important;
    font-weight: 700 !important;
    color: var(--ef-ink) !important;
}

/* ============== LINKS ============== */
a,
.product_cat a {
    color: var(--ef-ink) !important;
    text-decoration: none !important;
    transition: color 200ms ease;
}

a:hover {
    color: var(--ef-accent-dark) !important;
}

/* ============== PRIMARY BUTTONS — YELLOW ============== */
.woocommerce a.button.alt,
button.single_add_to_cart_button,
a.checkout-button,
.wp-block-button__link {
    background-color: var(--ef-accent) !important;
    color: var(--ef-ink) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--ef-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    padding: 16px 32px !important;
    transition: all 200ms ease !important;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

button.single_add_to_cart_button:hover,
a.checkout-button:hover,
.wp-block-button__link:hover {
    background-color: var(--ef-accent-dark) !important;
    color: var(--ef-ink) !important;
    transform: translateY(-1px);
}

/* ============== SECONDARY BUTTONS — DARK ============== */
.woocommerce button.button,
.woocommerce #respond input#submit:not(.alt),
.button {
    background-color: var(--ef-ink) !important;
    color: var(--ef-canvas) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--ef-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    padding: 14px 24px !important;
}

/* ============== PRODUCT CARDS ============== */
.product,
.woocommerce ul.products li.product {
    background-color: var(--ef-surface) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
    transition: transform 300ms ease !important;
    margin-bottom: 0 !important;
}

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

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--ef-display) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    padding: 16px 12px 4px !important;
    color: var(--ef-ink) !important;
    margin-bottom: 4px !important;
}

.woocommerce ul.products li.product .price {
    padding: 0 12px 16px !important;
    color: var(--ef-accent-dark) !important;
    font-size: 16px !important;
    display: block;
}

/* ============== HEADER ============== */
.site-header,
#masthead {
    background-color: var(--ef-canvas) !important;
    border-bottom: 1px solid var(--ef-hairline) !important;
    box-shadow: none !important;
}

.site-branding .site-title,
.site-branding .site-title a {
    font-family: var(--ef-display) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--ef-ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
    font-family: var(--ef-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    color: var(--ef-ink) !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: var(--ef-accent-dark) !important;
}

/* ============== SALE BADGES ============== */
.woocommerce span.onsale,
.product .onsale {
    background-color: var(--ef-sale) !important;
    color: var(--ef-canvas) !important;
    font-family: var(--ef-display) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    border-radius: 50% !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    line-height: 50px !important;
    text-align: center !important;
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
    z-index: 5;
}

/* ============== FORMS ============== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
    background-color: var(--ef-surface) !important;
    border: 1px solid var(--ef-hairline) !important;
    border-radius: 0 !important;
    color: var(--ef-ink) !important;
    font-family: var(--ef-sans) !important;
    padding: 14px 16px !important;
    width: 100%;
    font-size: 16px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ef-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.2) !important;
}

/* ============== FOOTER ============== */
.site-footer {
    background-color: var(--ef-secondary) !important;
    color: rgba(255,255,255,0.7) !important;
    padding: 48px 0 24px !important;
}

.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
    font-family: var(--ef-display) !important;
    font-size: 14px !important;
    color: var(--ef-accent) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    margin-bottom: 16px !important;
}

.site-footer a { color: rgba(255,255,255,0.7) !important; }
.site-footer a:hover { color: var(--ef-accent) !important; }

/* ============== EYEBROW TAGS ============== */
.ef-eyebrow,
.ef-tag {
    display: inline-block;
    font-family: var(--ef-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ef-ink);
    background-color: var(--ef-accent);
    padding: 6px 14px;
    border-radius: 0;
}

/* ============== HERO ============== */
.ef-hero {
    background-color: var(--ef-surface);
    padding: 100px 0;
    text-align: left;
}

.ef-hero h1 {
    font-family: var(--ef-display);
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.05;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 24px;
    color: var(--ef-ink);
}

/* ============== PRODUCT GRID ============== */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

/* ============== CATEGORY TILES ============== */
.product-category {
    background-color: var(--ef-surface) !important;
    border-radius: 0 !important;
    text-align: center;
    padding: 24px 16px !important;
}

.product-category h2,
.product-category .woocommerce-loop-category__title {
    font-family: var(--ef-display) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    color: var(--ef-ink) !important;
    padding: 16px 0 4px !important;
}

/* ============== PAGINATION ============== */
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 0;
    margin: 32px 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border: none !important;
    background-color: var(--ef-surface) !important;
    color: var(--ef-ink) !important;
    font-family: var(--ef-display) !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--ef-accent) !important;
    color: var(--ef-ink) !important;
}

/* ============== STRIPE BANNER ============== */
.ef-stripe {
    background-color: var(--ef-accent);
    color: var(--ef-ink);
    font-family: var(--ef-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 32px 0;
    text-align: center;
    font-size: 14px;
}

/* ============== COLUMNS LAYOUT ============== */
.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.wp-block-column {
    grid-column: span 1;
}

/* ============== SELECTION ============== */
::selection {
    background-color: var(--ef-accent);
    color: var(--ef-ink);
}

/* ===============================================
 * ============ TABLET (≤1024px) =================
 * =============================================== */
@media (max-width: 1024px) {
    .site-container,
    .kadence-site-content .content-container {
        padding: 0 20px;
    }

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

    .ef-hero {
        padding: 80px 0;
    }

    .ef-stripe {
        padding: 24px 0;
        font-size: 12px;
    }

    .wp-block-columns {
        gap: 32px;
    }

    h1 { font-size: clamp(32px, 5vw, 56px) !important; }
    h2 { font-size: clamp(22px, 3.5vw, 36px) !important; }
}

/* ===============================================
 * ============ MOBILE (≤768px) ==================
 * =============================================== */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    /* Header: collapse to mobile menu */
    .site-header,
    #masthead {
        padding: 12px 0 !important;
    }

    .site-branding .site-title,
    .site-branding .site-title a {
        font-size: 18px !important;
    }

    /* Hide desktop nav */
    .main-navigation .primary-menu-container {
        display: none;
    }

    /* Show mobile toggle */
    .mobile-toggle-open-container .menu-toggle-open {
        display: block !important;
        background: var(--ef-ink) !important;
        color: var(--ef-canvas) !important;
        padding: 10px 14px !important;
        font-family: var(--ef-display) !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        text-transform: uppercase;
        border-radius: 0 !important;
    }

    /* Stack columns */
    .wp-block-columns {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .wp-block-column {
        grid-column: span 1 !important;
    }

    /* Product grid: 2 cols on mobile */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 12px !important;
        padding: 12px 8px 2px !important;
    }

    .woocommerce ul.products li.product .price {
        font-size: 14px !important;
        padding: 0 8px 12px !important;
    }

    /* Hero */
    .ef-hero {
        padding: 48px 0;
    }

    .ef-hero h1 {
        font-size: 36px !important;
        line-height: 1.1 !important;
        margin-bottom: 16px;
    }

    .ef-hero p {
        font-size: 15px !important;
    }

    /* Buttons: stack vertically, full width */
    .wp-block-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .wp-block-buttons .wp-block-button {
        width: 100%;
    }

    .wp-block-button__link {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 24px !important;
        font-size: 13px !important;
    }

    /* Typography */
    h1 { font-size: 32px !important; }
    h2 { font-size: 22px !important; line-height: 1.25 !important; }
    h3 { font-size: 18px !important; line-height: 1.3 !important; }

    /* Spacing */
    .wp-block-spacer[style*="height:80px"],
    .wp-block-spacer[style*="height:96px"] {
        height: 40px !important;
    }

    .wp-block-spacer[style*="height:64px"] {
        height: 32px !important;
    }

    .wp-block-spacer[style*="height:48px"] {
        height: 24px !important;
    }

    /* Sale badges */
    .woocommerce span.onsale,
    .product .onsale {
        min-width: 40px !important;
        min-height: 40px !important;
        line-height: 40px !important;
        font-size: 10px !important;
        top: 10px !important;
        left: 10px !important;
    }

    /* Stripe banner: smaller text */
    .ef-stripe {
        padding: 16px 12px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        padding: 12px 14px !important;
        font-size: 16px !important;
    }

    /* Pagination */
    .woocommerce nav.woocommerce-pagination ul li a,
    .woocommerce nav.woocommerce-pagination ul li span {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* Footer */
    .site-footer {
        padding: 32px 0 16px !important;
        text-align: center;
    }

    /* Tables (cart, checkout) */
    .woocommerce table.shop_table {
        font-size: 13px;
    }

    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        padding: 8px !important;
    }

    /* Hide some cols on mobile cart */
    .woocommerce table.shop_table thead th.product-thumbnail,
    .woocommerce table.shop_table tbody td.product-thumbnail {
        display: none;
    }
}

/* ===============================================
 * ============ SMALL MOBILE (≤480px) ============
 * =============================================== */
@media (max-width: 480px) {
    .site-container,
    .kadence-site-content .content-container {
        padding: 0 12px;
    }

    /* Single column for products on tiny screens */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 11px !important;
        padding: 8px 6px 2px !important;
    }

    .woocommerce ul.products li.product .price {
        font-size: 12px !important;
        padding: 0 6px 8px !important;
    }

    h1 { font-size: 28px !important; }
    h2 { font-size: 20px !important; }

    .ef-hero h1 {
        font-size: 30px !important;
    }

    /* Stripe: stack items vertically if separated by dots */
    .ef-stripe {
        font-size: 10px !important;
        padding: 12px 8px !important;
    }

    /* Page title */
    .woocommerce-products-header__title,
    .page-title,
    .entry-title {
        font-size: 24px !important;
    }
}

/* ===============================================
 * ============ MOBILE MENU DRAWER ==============
 * =============================================== */
@media (max-width: 768px) {
    /* Mobile nav drawer */
    #mobile-drawer {
        background-color: var(--ef-canvas) !important;
    }

    #mobile-drawer .drawer-header {
        background-color: var(--ef-canvas) !important;
        border-bottom: 1px solid var(--ef-hairline) !important;
    }

    #mobile-drawer .drawer-toggle {
        color: var(--ef-ink) !important;
    }

    .mobile-navigation ul li a {
        font-family: var(--ef-display) !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        font-size: 13px !important;
        letter-spacing: 0.05em !important;
        color: var(--ef-ink) !important;
    }

    .mobile-navigation ul li a:hover {
        color: var(--ef-accent-dark) !important;
        background-color: var(--ef-surface) !important;
    }

    .mobile-navigation ul li.current-menu-item > a {
        color: var(--ef-accent-dark) !important;
    }
}

/* ===============================================
 * ============ CART / CHECKOUT MOBILE ==========
 * =============================================== */
@media (max-width: 768px) {
    .woocommerce-cart .woocommerce,
    .woocommerce-checkout .woocommerce {
        font-size: 14px;
    }

    .woocommerce-cart-form,
    .woocommerce-checkout #payment {
        padding: 16px !important;
    }

    /* Cart totals */
    .cart_totals {
        padding: 16px !important;
    }

    /* Checkout form */
    .woocommerce form .form-row {
        padding: 0 !important;
        margin-bottom: 12px !important;
    }

    .woocommerce-checkout #payment ul.payment_methods li {
        padding: 12px !important;
    }
}

/* ===============================================
 * ============ PRODUCT PAGE MOBILE ==============
 * =============================================== */
@media (max-width: 768px) {
    .product_title {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce div.product div.summary {
        margin-top: 24px;
    }

    .single_add_to_cart_button {
        width: 100% !important;
        font-size: 14px !important;
        padding: 18px !important;
    }

    .woocommerce-Tabs-panel {
        padding: 16px !important;
    }

    .woocommerce-tabs .tabs li a {
        padding: 12px 14px !important;
        font-family: var(--ef-display) !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        font-size: 12px !important;
        letter-spacing: 0.05em !important;
    }
}

/* ===============================================
 * ============ HERO BLOCK MOBILE TWEAKS =========
 * =============================================== */
@media (max-width: 768px) {
    .ef-tag {
        font-size: 10px !important;
        padding: 5px 12px !important;
        margin-bottom: 16px !important;
    }

    .ef-hero p.has-medium-font-size {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }
}

/* ===============================================
 * ============ TOUCH IMPROVEMENTS ================
 * =============================================== */
@media (hover: none) {
    .product:hover,
    .woocommerce ul.products li.product:hover {
        transform: none;
    }

    button:active,
    .button:active,
    a.button:active {
        opacity: 0.85;
        transform: scale(0.98);
    }
}

/* ===============================================
 * ============ PRINT =============================
 * =============================================== */
@media print {
    body { background: white !important; color: black !important; }
    .site-header, .site-footer { display: none; }
}

/* ============== LIGHTER GREEN ACCENTS ============== */

/* In-stock badge - light sage */
.product .stock.in-stock {
    background-color: var(--ef-sage-light) !important;
    color: var(--ef-sage-dark) !important;
    padding: 4px 12px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
}

/* Add to cart button hover - sage */
.single_add_to_cart_button:hover,
.button.alt:hover {
    background-color: var(--ef-green-accent) !important;
    border-color: var(--ef-green-accent) !important;
}

/* Wishlist/heart icon - light sage */
.wishlist-button .icon,
.kadence-wishlist .icon {
    color: var(--ef-sage-dark) !important;
}

/* Free shipping badge */
.free-shipping-badge,
.shipping-label {
    background-color: var(--ef-mint) !important;
    color: #2E5E3F !important;
    padding: 3px 10px !important;
    border-radius: 3px !important;
}

/* Sale/15% off badge - complementary green */
.woocommerce-badge,
.on-sale-badge {
    background-color: var(--ef-green-accent) !important;
    color: #FFFFFF !important;
}

/* Product hover border - sage tint */
.product:hover .product-entry,
.woocommerce-LoopProduct-link:hover {
    border-color: var(--ef-sage) !important;
}

/* Quick view button - sage */
.button.quick-view,
.kadence-quick-view {
    background-color: var(--ef-sage-light) !important;
    color: var(--ef-sage-dark) !important;
    border-color: var(--ef-sage) !important;
}

/* Newsletter success messages */
.wpcf7-mail-sent-ok,
.newsletter-success {
    background-color: var(--ef-sage-light) !important;
    color: var(--ef-sage-dark) !important;
    border-color: var(--ef-sage) !important;
}

/* Footer trust badges - sage tint */
.trust-badge,
.footer-badge {
    background-color: var(--ef-sage-light) !important;
    color: var(--ef-sage-dark) !important;
}

/* Sage highlight for category titles */
.product-category-title,
.archive-title {
    border-bottom: 2px solid var(--ef-sage) !important;
}

/* Stock quantity indicator */
.stock-progress-bar {
    background-color: var(--ef-sage-light) !important;
}
.stock-progress-bar .progress-fill {
    background-color: var(--ef-green-accent) !important;
}