/* ===========================
   Shop/Archive — Add to Cart icon-only button
   ใช้คู่กับ Elementor Loop Item ที่ย้าย Add to Cart widget
   มาอยู่ในแถวเดียวกับ Share button
=========================== */

/* ── Icon-only button ────────────────────────────────────────────
   ซ่อน text ด้วย font-size: 0 และ inject FA cart icon ผ่าน ::before
   FontAwesome 6 โหลดอยู่แล้วจาก unlock plugin
──────────────────────────────────────────────────────────────── */
.elementor-widget-woocommerce-product-add-to-cart .add_to_cart_button {
    font-size: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
    border: none !important;
    background: transparent !important;
    flex-shrink: 0;
    transition: background .2s;
}

/* ── Default: cart outline — Heroicons, stroke-width 2 ──────── */
.elementor-widget-woocommerce-product-add-to-cart .add_to_cart_button::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ── Hover: cart solid — Heroicons (same icon, filled) ───────── */
.elementor-widget-woocommerce-product-add-to-cart .add_to_cart_button:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z'/%3E%3C/svg%3E");
}

/* ── Loading (ajax in progress) ─────────────────────────────── */
.elementor-widget-woocommerce-product-add-to-cart .add_to_cart_button.loading::before {
    background-image: none;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f110';
    font-size: 14px;
    width: auto;
    height: auto;
    animation: fa-spin 1s linear infinite;
}

/* ── Added: ซ่อน form ด้วย CSS :has() — ไม่มี timing issue ──── */
/* browser ซ่อน form พร้อมกับ JS เพิ่ม .added class ใน 1 repaint */
.e-loop-add-to-cart-form-container form.cart:has( .add_to_cart_button.added ) {
    display: none !important;
}

/* ── "View cart" link → ไอคอนตา (JS ย้ายมาเป็น direct child ของ container)
   href ชี้ไป /cart/ ถูกต้อง, แสดงในพื้นที่ 36px เดิมของ cart button
──────────────────────────────────────────────────────────────── */
.e-loop-add-to-cart-form-container > .added_to_cart {
    font-size: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0;
    transition: background .2s;
}

.e-loop-add-to-cart-form-container > .added_to_cart:hover {
    background: rgba(0,0,0,.07) !important;
}

.e-loop-add-to-cart-form-container > .added_to_cart::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ── ซ่อน align-justify (full-width mode) ───────────────────────
   Elementor ตั้ง --align-justify → button ยืด 100% ต้องยกเลิก
──────────────────────────────────────────────────────────────── */
.elementor-add-to-cart--align-justify .elementor-add-to-cart,
.elementor-add-to-cart--align-justify .e-loop-add-to-cart-form-container,
.elementor-add-to-cart--align-justify form.cart {
    display: flex !important;
    width: auto !important;
}

.elementor-add-to-cart--align-justify .add_to_cart_button {
    width: 36px !important;
    flex: none !important;
}