/* WooCommerce Custom Divi extension frontend styles. */

.rs-products{--rs-products-columns:4;--rs-products-gap:24px}
.rs-products--grid{display:grid;grid-template-columns:repeat(var(--rs-products-columns),1fr);gap:var(--rs-products-gap)}
@media (max-width:980px){.rs-products--grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:550px){.rs-products--grid{grid-template-columns:1fr}}
.rs-products__item{display:flex;flex-direction:column;height:100%}
.rs-products__image{display:block}
.rs-products__image img{display:block;width:100%;height:auto}
.rs-products__body{display:flex;flex-direction:column;flex:1;padding-top:12px}
.rs-products__title{margin:0 0 6px;font-size:18px}
.rs-products__title a{text-decoration:none;color:inherit}
.rs-products__price{margin-bottom:8px}
.rs-products__description{margin-bottom:12px;font-size:14px;line-height:1.5}
.rs-products__attributes{list-style:none;margin:0 0 12px;padding:0;font-size:13px;line-height:1.6}
.rs-products__attribute-label{font-weight:600}
.rs-products__button{margin-top:auto;align-self:flex-start}
/* [rs_products button_type="cart"] — WooCommerce's own add-to-cart form
   (quantity input + button), rendered by rs_products_render_add_to_cart().
   WC's own CSS handles the quantity/button pairing (float layout) once the
   .product ancestor class is present (added conditionally in
   rs_products_render_item()); this just makes the form itself lay out
   left-to-right and clears WC's float afterward so following siblings
   don't wrap under it. */
.rs-products__add-to-cart form.cart{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.rs-products__add-to-cart form.cart::after{content:"";display:block;clear:both}
.rs-products--carousel .rs-products__swiper{padding:0 4px 44px}
.rs-products--carousel .swiper-slide{height:auto}
.rs-products--carousel{--swiper-navigation-size:29px}
.rs-products--carousel .swiper-button-prev,.rs-products--carousel .swiper-button-next{color:inherit;background:#fff;border-radius:50%;box-sizing:border-box;padding:7px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* DiviFlash bundles an older Swiper.js version whose CSS (loaded globally on
   any page using a DiviFlash carousel module) styles .swiper-button-next/prev
   via a broken ::after icon-font (content:'next'/'prev', font-family:
   swiper-icons at 44px) — since we reuse Swiper's standard class names, that
   rule bleeds onto our buttons and, with the icon font unresolved, falls
   back to rendering the literal word. Our own Swiper version injects a real
   <svg> child instead and needs no ::after content, so kill it here. */
.rs-products--carousel .swiper-button-prev:after,.rs-products--carousel .swiper-button-next:after{content:none!important}

/* [rs_product] on a WooCommerce Product Bundles ("bundle" type) product:
   hide the per-bundled-item list and the whole-bundle quantity input.
   These stay in the DOM (display:none only) rather than being removed from
   the template, so their default form values (quantities, selections)
   still submit normally on Add to Cart — only the visual list/stepper goes
   away. Scoped to .rs-product so bundle products elsewhere on the site
   (their own product pages, etc.) are unaffected. */
.rs-product .bundled_product{display:none}
.rs-product .quantity{display:none}

/* [rs_variations] — one product's variations as individually-purchasable
   cards. Shares .rs-products--carousel's nav/swiper rules (see above); this
   block only covers what's specific to this shortcode's own markup. */
.rs-variations{--rs-variations-columns:4;--rs-variations-gap:24px}
.rs-variations--grid{display:grid;grid-template-columns:repeat(var(--rs-variations-columns),1fr);gap:var(--rs-variations-gap)}
@media (max-width:980px){.rs-variations--grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:550px){.rs-variations--grid{grid-template-columns:1fr}}
.rs-variations__item{display:flex;flex-direction:column;height:100%}
.rs-variations__image{display:block}
.rs-variations__image img{display:block;width:100%;height:auto}
.rs-variations__body{display:flex;flex-direction:column;flex:1;padding-top:12px}
.rs-variations__title{margin:0 0 6px;font-size:18px}
.rs-variations__price{margin-bottom:8px}
.rs-variations__description{margin-bottom:12px;font-size:14px;line-height:1.5}
.rs-variations__form{margin-top:auto}
.rs-variations__button{width:auto}
.rs-variations__button--loading{opacity:.6;cursor:default}
.rs-variations__button--selected{opacity:.6;cursor:default}
/* WC core's add-to-cart.js listens globally for the same added_to_cart
   event we trigger (to update the header cart-icon count) and, as a side
   effect, inserts a "View cart" link after any button on that event — not
   wanted on these cards, so it's hidden here rather than fought in JS. */
.rs-variations .added_to_cart{display:none!important}