/* ====================================================
   IseMoody – Shop Page Mobile Responsiveness
   Loaded at wp_enqueue_scripts priority 99 (last).
   Scoped to WooCommerce body classes only.
   ==================================================== */

/* ── Background: match cart page (background-attachment:fixed breaks on mobile) ── */
body.woocommerce-shop,
body.tax-product_cat {
    background:
      radial-gradient(ellipse at 15% 10%,  rgba(184, 134, 11, 0.13) 0%, transparent 45%),
      radial-gradient(ellipse at 85% 5%,   rgba(201, 162, 39, 0.09) 0%, transparent 40%),
      radial-gradient(ellipse at 50% 55%,  rgba(212, 168, 75, 0.06) 0%, transparent 55%),
      radial-gradient(ellipse at 8%  80%,  rgba(184, 134, 11, 0.08) 0%, transparent 40%),
      radial-gradient(ellipse at 92% 88%,  rgba(201, 162, 39, 0.07) 0%, transparent 40%),
      #fafaf9 !important;
    background-attachment: scroll !important;
}

/* ── Overflow containment ─────────────────────────── */
html,
body.woocommerce-shop,
body.tax-product_cat {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ================================================================
   MOBILE — max-width: 768px
   ================================================================ */
@media (max-width: 768px) {

    /* ── Header ──────────────────────────────────────────────────
       Logo left, cart + hamburger right.                        */
    body.woocommerce-shop .site-header,
    body.tax-product_cat .site-header {
        padding: 10px 16px !important;
    }

    body.woocommerce-shop .site-header__inner,
    body.tax-product_cat .site-header__inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        max-width: 100% !important;
        gap: 8px !important;
    }

    body.woocommerce-shop .site-logo,
    body.tax-product_cat .site-logo {
        flex-shrink: 0 !important;
        margin-right: auto !important;
    }

    body.woocommerce-shop .site-header__actions,
    body.tax-product_cat .site-header__actions {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
    }

    body.woocommerce-shop .menu-toggle,
    body.tax-product_cat .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* ── Hero ──────────────────────────────────────────────────── */
    body.woocommerce-shop .shop-hero,
    body.tax-product_cat .shop-hero {
        padding: 56px 20px 40px !important;
        overflow: hidden !important;
        min-height: unset !important;
    }

    body.woocommerce-shop .shop-hero__title,
    body.tax-product_cat .shop-hero__title {
        font-size: clamp(2.2rem, 11vw, 3.5rem) !important;
        letter-spacing: -0.5px !important;
        line-height: 1 !important;
        margin-bottom: 0 !important;
    }

    body.woocommerce-shop .shop-hero__label,
    body.tax-product_cat .shop-hero__label {
        font-size: 0.6rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 8px !important;
    }

    /* ── Breadcrumb bar ─────────────────────────────────────────── */
    body.woocommerce-shop .shop-breadcrumb-bar,
    body.tax-product_cat .shop-breadcrumb-bar {
        margin-bottom: 16px !important;
        padding: 10px 16px !important;
    }

    body.woocommerce-shop .woocommerce-breadcrumb,
    body.tax-product_cat .woocommerce-breadcrumb {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ── Shop products wrapper ──────────────────────────────────── */
    body.woocommerce-shop .shop-products,
    body.tax-product_cat .shop-products {
        padding: 0 !important;
    }

    /* ── Toolbar: result count only (ordering removed) ─────────── */
    body.woocommerce-shop .shop-toolbar,
    body.tax-product_cat .shop-toolbar {
        justify-content: flex-start !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
    }

    body.woocommerce-shop .shop-toolbar .woocommerce-result-count,
    body.tax-product_cat .shop-toolbar .woocommerce-result-count {
        font-size: 0.8rem !important;
        margin: 0 !important;
        color: var(--color-text-muted, #888) !important;
    }

    /* ── CRITICAL: Kill the 268px sidebar grid ─────────────────── */
    body.woocommerce-shop .shop-products__inner,
    body.tax-product_cat .shop-products__inner {
        display: block !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Container class can add its own padding — neutralise it */
    body.woocommerce-shop .shop-products .container,
    body.tax-product_cat .shop-products .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.woocommerce-shop .shop-products__main,
    body.tax-product_cat .shop-products__main {
        width: 100% !important;
    }

    /* Filter sidebar: hidden on mobile (slide-in still works via JS toggle) */
    body.woocommerce-shop .shop-filters,
    body.tax-product_cat .shop-filters {
        display: none !important;
    }
    body.woocommerce-shop .shop-filters.is-open,
    body.tax-product_cat .shop-filters.is-open {
        display: block !important;
    }



    /* ── Filters toggle: center & full-width on mobile ─────────── */
    body.woocommerce-shop .shop-filters-toggle,
    body.tax-product_cat .shop-filters-toggle {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    /* ── Product grid — 2 columns ──────────────────────────────── */

    /* Kill WooCommerce clearfix ghost items */
    body.woocommerce-shop ul.products::before,
    body.woocommerce-shop ul.products::after,
    body.tax-product_cat ul.products::before,
    body.tax-product_cat ul.products::after {
        display: none !important;
        content: none !important;
    }

    body.woocommerce-shop ul.products,
    body.tax-product_cat ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }

    /* Kill WooCommerce float on li.product */
    body.woocommerce-shop ul.products li.product,
    body.tax-product_cat ul.products li.product {
        float: none !important;
        clear: none !important;
        width: 100% !important;
        margin: 0 !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* ── Product card: the actual card wrapper ──────────────────── */
    body.woocommerce-shop ul.products li.product .product-card,
    body.tax-product_cat ul.products li.product .product-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.55) !important;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ── Flip card inner: fix aspect ratio (was 1:1, needs portrait) */
    body.woocommerce-shop ul.products li.product .flip-card__inner,
    body.tax-product_cat ul.products li.product .flip-card__inner {
        aspect-ratio: 3 / 4 !important;
        width: 100% !important;
        position: relative !important;
    }

    body.woocommerce-shop ul.products li.product .flip-card__front,
    body.woocommerce-shop ul.products li.product .flip-card__back,
    body.tax-product_cat ul.products li.product .flip-card__front,
    body.tax-product_cat ul.products li.product .flip-card__back {
        position: absolute !important;
        inset: 0 !important;
        border-radius: 16px 16px 0 0 !important;
    }

    /* Image: fill the front face */
    body.woocommerce-shop ul.products li.product .product-card__image,
    body.tax-product_cat ul.products li.product .product-card__image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        overflow: hidden !important;
    }

    body.woocommerce-shop ul.products li.product .product-card__image img,
    body.tax-product_cat ul.products li.product .product-card__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── Flip back: hidden by default, revealed on first tap ──────
       JS adds .is-touch-revealed on first tap; buttons become
       tappable; second tap / outside tap closes it.             */
    body.woocommerce-shop ul.products li.product .flip-card__back,
    body.tax-product_cat ul.products li.product .flip-card__back {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.25s ease, visibility 0.25s !important;
        padding: 12px !important;
        gap: 8px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    body.woocommerce-shop ul.products li.product .flip-card.is-touch-revealed .flip-card__back,
    body.tax-product_cat ul.products li.product .flip-card.is-touch-revealed .flip-card__back {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ── Shared button base ───────────────────────────────────── */
    body.woocommerce-shop ul.products li.product .flip-card__back .product-card__quick-add,
    body.woocommerce-shop ul.products li.product .flip-card__back .button,
    body.woocommerce-shop ul.products li.product .flip-card__back .added_to_cart,
    body.tax-product_cat ul.products li.product .flip-card__back .product-card__quick-add,
    body.tax-product_cat ul.products li.product .flip-card__back .button,
    body.tax-product_cat ul.products li.product .flip-card__back .added_to_cart {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 10px 20px !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
    }

    /* Quick View — ghost white pill */
    body.woocommerce-shop ul.products li.product .flip-card__back .product-card__quick-add,
    body.tax-product_cat ul.products li.product .flip-card__back .product-card__quick-add {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
    }

    body.woocommerce-shop ul.products li.product .flip-card__back .product-card__quick-add:hover,
    body.tax-product_cat ul.products li.product .flip-card__back .product-card__quick-add:hover {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #b8860b !important;
        border-color: transparent !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
    }

    body.woocommerce-shop ul.products li.product .flip-card__back .product-card__quick-add:active,
    body.tax-product_cat ul.products li.product .flip-card__back .product-card__quick-add:active {
        transform: translateY(-1px) scale(0.98) !important;
    }

    /* Add to Cart — gold pill */
    body.woocommerce-shop ul.products li.product .flip-card__back .button.add_to_cart_button,
    body.tax-product_cat ul.products li.product .flip-card__back .button.add_to_cart_button {
        position: static !important;
        background: linear-gradient(160deg, #c9962a 0%, #b8860b 100%) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 4px 18px rgba(184, 134, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
        transform: none !important;
        left: auto !important;
        bottom: auto !important;
        opacity: 1 !important;
    }

    body.woocommerce-shop ul.products li.product .flip-card__back .button.add_to_cart_button:hover,
    body.tax-product_cat ul.products li.product .flip-card__back .button.add_to_cart_button:hover {
        background: linear-gradient(160deg, #d4a73a 0%, #c9962a 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 26px rgba(184, 134, 11, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    body.woocommerce-shop ul.products li.product .flip-card__back .button.add_to_cart_button:active,
    body.tax-product_cat ul.products li.product .flip-card__back .button.add_to_cart_button:active {
        transform: translateY(-1px) scale(0.98) !important;
    }

    /* Hide add-to-cart once added */
    body.woocommerce-shop ul.products li.product .flip-card__back .button.add_to_cart_button.added,
    body.tax-product_cat ul.products li.product .flip-card__back .button.add_to_cart_button.added {
        display: none !important;
    }

    /* Read More (variable products) — ghost white pill */
    body.woocommerce-shop ul.products li.product .flip-card__back .button:not(.add_to_cart_button):not(.added_to_cart),
    body.tax-product_cat ul.products li.product .flip-card__back .button:not(.add_to_cart_button):not(.added_to_cart) {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
    }

    body.woocommerce-shop ul.products li.product .flip-card__back .button:not(.add_to_cart_button):not(.added_to_cart):hover,
    body.tax-product_cat ul.products li.product .flip-card__back .button:not(.add_to_cart_button):not(.added_to_cart):hover {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #b8860b !important;
        border-color: transparent !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
    }

    /* View Cart — ghost white pill */
    body.woocommerce-shop ul.products li.product .flip-card__back .added_to_cart.wc-forward,
    body.tax-product_cat ul.products li.product .flip-card__back .added_to_cart.wc-forward {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
        text-decoration: none !important;
    }

    body.woocommerce-shop ul.products li.product .flip-card__back .added_to_cart.wc-forward:hover,
    body.tax-product_cat ul.products li.product .flip-card__back .added_to_cart.wc-forward:hover {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #b8860b !important;
        border-color: transparent !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
    }

    /* ── Card content: title + price ──────────────────────────── */
    body.woocommerce-shop ul.products li.product .product-card__content,
    body.tax-product_cat ul.products li.product .product-card__content {
        padding: 10px 12px 14px !important;
        text-align: center !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    body.woocommerce-shop ul.products li.product .product-card__title,
    body.tax-product_cat ul.products li.product .product-card__title {
        font-size: clamp(0.75rem, 2.8vw, 1rem) !important;
        margin: 0 !important;
        line-height: 1.25 !important;
        letter-spacing: 0.04em !important;
        text-align: center !important;
    }

    body.woocommerce-shop ul.products li.product .product-card__title a,
    body.tax-product_cat ul.products li.product .product-card__title a {
        text-decoration: none !important;
        color: inherit !important;
    }

    body.woocommerce-shop ul.products li.product .product-card__price,
    body.tax-product_cat ul.products li.product .product-card__price {
        font-size: 0.8rem !important;
        text-align: center !important;
        margin: 0 !important;
        color: var(--color-text-muted, #666) !important;
    }

    /* ── Pre-footer ─────────────────────────────────────────────── */
    body.woocommerce-shop .shop-pre-footer,
    body.tax-product_cat .shop-pre-footer {
        padding: 48px 16px !important;
        margin-top: 48px !important;
    }

    body.woocommerce-shop .shop-pre-footer__grid,
    body.tax-product_cat .shop-pre-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        text-align: center !important;
    }

    /* ── Newsletter ─────────────────────────────────────────────── */
    body.woocommerce-shop .newsletter-strip,
    body.tax-product_cat .newsletter-strip {
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow: hidden !important;
    }

    body.woocommerce-shop .newsletter-strip__inner,
    body.tax-product_cat .newsletter-strip__inner {
        padding: 2rem 1.25rem !important;
    }

    body.woocommerce-shop .newsletter-strip__title,
    body.tax-product_cat .newsletter-strip__title {
        font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
    }

    body.woocommerce-shop .newsletter-form,
    body.tax-product_cat .newsletter-form {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    body.woocommerce-shop .newsletter-form__field,
    body.woocommerce-shop .newsletter-form input[type="email"],
    body.woocommerce-shop .newsletter-form input[type="text"],
    body.tax-product_cat .newsletter-form__field,
    body.tax-product_cat .newsletter-form input[type="email"],
    body.tax-product_cat .newsletter-form input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.woocommerce-shop .newsletter-form button,
    body.woocommerce-shop .newsletter-form__submit,
    body.tax-product_cat .newsletter-form button,
    body.tax-product_cat .newsletter-form__submit {
        width: 100% !important;
    }
}