/* SS Card Quantity — base layout. Rules saved on Settings, Card Quantity print after this file, so they
   win. Only the "View Cart" colours carry !important, because WowStore's editor saves its own button
   colours with the block; nothing on the minus, plus or number field does. */

/* A card with the box is centred end to end: the price, the box, Add to cart with View Cart beside it,
   and the count lines. WowStore's editor saves its own alignment with the block, hence !important on the price. */
.wopb-block-item:has(.ss-loop-qty) .wopb-product-price,
.wopb-block-item.ss-has-qty .wopb-product-price { text-align: center !important; justify-content: center !important; }
.wopb-block-item:has(.ss-loop-qty) .wopb-product-btn,
.wopb-block-item.ss-has-qty .wopb-product-btn { display: flex; justify-content: center; text-align: center; }

/* The whole control on a card with the box: one column, full width, so "View Cart" is never squeezed
   into the space left beside the row. */
.wopb-product-btn .wopb-cart-action:has(.ss-loop-qty),
.wopb-product-btn .wopb-cart-action.ss-has-qty { display: flex; flex-direction: column; align-items: stretch; gap: .6em; width: 100%; text-wrap: wrap; }

/* The box, then Add to cart, then the count lines: stacked, each centred on its own line. */
.ss-loop-qty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; margin: 0; width: 100%; }
.ss-loop-qty .quantity { display: inline-flex; align-items: center; }
.ss-loop-qty .ss-qty-btn { width: 2.25em; height: 2.25em; padding: 0; line-height: 1; font-size: 1.1em; border: 1px solid #ccc; background: #f7f7f7; cursor: pointer; }
.ss-loop-qty .ss-qty-minus { border-radius: 4px 0 0 4px; }
.ss-loop-qty .ss-qty-plus { border-radius: 0 4px 4px 0; }
.ss-loop-qty input.qty { width: 3.5em; height: 2.25em; margin: 0; text-align: center; border: 1px solid #ccc; border-left: 0; border-right: 0; -moz-appearance: textfield; }
.ss-loop-qty input.qty::-webkit-outer-spin-button,
.ss-loop-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Add to cart and "View Cart" side by side at the same size. The script moves WowStore's "View Cart"
   link into this row; WowStore shows the link once something has been added. Both buttons share the
   row equally and stretch to the same height. */
.ss-loop-qty .ss-qty-actions { display: inline-flex; align-items: stretch; justify-content: center; gap: .5em; max-width: 100%; }
.wopb-product-btn .wopb-cart-action .ss-loop-qty .ss-qty-actions > a { flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; text-align: center; white-space: nowrap; box-sizing: border-box; margin: 0; }
.wopb-product-btn .wopb-cart-action .ss-loop-qty .ss-qty-actions > .add_to_cart_button { display: flex; }
.wopb-product-btn .wopb-cart-action.wopb-active .ss-loop-qty .ss-qty-actions > .wopb-cart-active { display: flex; }
/* WooCommerce's own "View cart" link, appended after an add, is not wanted beside WowStore's. */
.wopb-product-btn .wopb-cart-action .ss-loop-qty .ss-qty-actions > .added_to_cart { display: none; }
/* The shape (corners, padding, font) is copied from Add to cart by the script, so the two match. */
.wopb-product-btn .wopb-cart-action .ss-loop-qty .wopb-cart-active { text-decoration: none; }
.wopb-product-btn .wopb-cart-action .ss-loop-qty .wopb-cart-active { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }
.wopb-product-btn .wopb-cart-action .ss-loop-qty .wopb-cart-active:hover { background: #15803d !important; border-color: #15803d !important; color: #fff !important; }
/* Keep the Add to cart button when WowStore would hide it, so more can be added. */
.wopb-product-btn .wopb-cart-action.wopb-active .ss-loop-qty .wopb-cart-normal { display: flex; }

/* "N in your cart", and "N added to cart" directly under it, both centred. */
.ss-loop-qty .ss-qty-status { display: flex; flex-direction: column; align-items: center; gap: .15em; width: 100%; font-size: .85em; line-height: 1.3; text-align: center; }
.ss-loop-qty .ss-in-cart { color: #4b5563; display: inline-flex; align-items: center; gap: .4em; }
.ss-loop-qty .ss-in-cart[hidden] { display: none; }
/* The small x beside the count that removes the product from the cart. */
.ss-loop-qty .ss-in-cart .ss-qty-clear { width: 1.4em; height: 1.4em; padding: 0; margin: 0; border: 1px solid #cbd5e1; border-radius: 50%; background: #fff; color: #6b7280; font-size: 1em; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ss-loop-qty .ss-in-cart .ss-qty-clear:hover,
.ss-loop-qty .ss-in-cart .ss-qty-clear:focus { border-color: #dc2626; color: #dc2626; background: #fff; }
.ss-loop-qty .ss-in-cart .ss-qty-clear:disabled { opacity: .5; cursor: default; }
/* The info box above the x, on hover or keyboard focus. */
.ss-loop-qty .ss-in-cart .ss-qty-clear { position: relative; }
.ss-loop-qty .ss-in-cart .ss-qty-clear::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 14em; padding: .45em .65em; border-radius: 4px; background: #111827; color: #fff; font-size: .8em; line-height: 1.3; text-align: center; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; z-index: 20; }
.ss-loop-qty .ss-in-cart .ss-qty-clear::before { content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #111827; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20; }
.ss-loop-qty .ss-in-cart .ss-qty-clear:hover::after, .ss-loop-qty .ss-in-cart .ss-qty-clear:focus-visible::after,
.ss-loop-qty .ss-in-cart .ss-qty-clear:hover::before, .ss-loop-qty .ss-in-cart .ss-qty-clear:focus-visible::before { opacity: 1; visibility: visible; }
.ss-loop-qty .ss-qty-notice { color: #15803d; }

/* The same buttons on the classic cart page. Theme cart rules outrank plain rules here (they stacked
   the buttons and painted them), so these carry !important. The number field keeps the theme's own look.
   Style the cart buttons with these selectors, not the card ones. */
.woocommerce-cart-form .quantity { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: .35em !important; width: auto !important; min-width: 0 !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; }
/* Nothing inside the box may grow, float or carry a margin, so the three parts stay together. */
.woocommerce-cart-form .quantity > * { flex: 0 0 auto !important; float: none !important; margin: 0 !important; }
.woocommerce-cart-form .quantity::before,
.woocommerce-cart-form .quantity::after { display: none !important; content: none !important; }
.woocommerce-cart-form .quantity .ss-qty-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 2.25em !important; min-width: 0 !important; height: 2.25em !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; color: #111827 !important; font-size: 1.1em !important; font-weight: 600; line-height: 1 !important; cursor: pointer; }
.woocommerce-cart-form .quantity .ss-qty-btn:hover,
.woocommerce-cart-form .quantity .ss-qty-btn:focus { background: transparent !important; color: #000 !important; }
.woocommerce-cart-form .quantity input.qty { width: 3.5em !important; height: 2.25em !important; margin: 0 !important; text-align: center; -moz-appearance: textfield; }
.woocommerce-cart-form .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }