/*
 * Acme Elements frontend styles.
 */

/* Acme Add To Cart: keep text and icon vertically centered on one line. */
.elementor-widget-acme-add-to-cart .elementor-button .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Acme Add To Cart: normalize the icon element so the Icon Circle controls
   (padding, background, border, shadow) render as a clean centered circle.
   The transition matches Elementor's default button transition so the circle
   eases on hover in step with the button; the ACME Transition Duration
   control overrides both. */
.elementor-widget-acme-add-to-cart .elementor-button .elementor-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
    transition: all 0.3s;
}

/* Acme Sale Badge: sensible defaults, all overridable from the widget controls. */
.acme-sale-badge {
    display: inline-block;
    padding: 0.35em 0.9em;
    background-color: #e2442e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 4px;
}

/* Acme Product Rating: flex baseline so the responsive layout, alignment,
   and gap controls behave predictably; neutralizes WooCommerce floats. */
.elementor-widget-acme-product-rating .woocommerce-product-rating {
    display: flex;
    align-items: center;
    margin: 0;
}

.elementor-widget-acme-product-rating .woocommerce-product-rating .star-rating {
    float: none;
    margin: 0;
}

/* Acme Breadcrumbs: flex baseline; controls override alignment and gap. */
.elementor-widget-acme-breadcrumbs .acme-bc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.elementor-widget-acme-breadcrumbs .acme-bc-link {
    text-decoration: none;
}

.elementor-widget-acme-breadcrumbs .acme-bc-sep {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    align-self: center;
}

.elementor-widget-acme-breadcrumbs .acme-bc-sep svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Acme Product Images: keep the gallery visible even if a gallery script
   fails to initialize (WooCommerce ships it at opacity 0 until JS runs). */
.elementor-widget-acme-product-images .woocommerce-product-gallery {
    opacity: 1 !important;
}

.elementor-widget-acme-product-images .acme-pi .product {
    position: relative;
}

.acme-pi-placeholder {
    padding: 30px;
    border: 1px dashed #a7aaad;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    opacity: 0.75;
}

/* Acme Product Images: the gallery always fills its container width.
   WooCommerce's layout CSS (div.product div.images width 48%, float left)
   would otherwise cap it, so this is scoped to the widget and forced. */
.elementor-widget-acme-product-images .woocommerce div.product div.images,
.elementor-widget-acme-product-images .woocommerce-product-gallery,
.elementor-widget-acme-product-images .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.elementor-widget-acme-product-images .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100%;
}

/* Acme Add To Cart Form: the quantity field and button share one flex row
   (.acme-atcf-holder). The Layout and Alignment controls write CSS custom
   properties on the widget wrapper; these rules read them, so responsive
   values follow the site's own breakpoints with no media queries here.
   Selectors are deliberately specific enough to outrank WooCommerce's
   ".woocommerce div.product form.cart" rules when the widget sits inside a
   theme-builder product wrapper. */
.acme-atcf {
    text-align: var(--acme-atcf-text, start);
}

.acme-atcf .acme-atcf-holder {
    display: flex;
    flex-direction: var(--acme-atcf-direction, row);
    flex-wrap: var(--acme-atcf-wrap, nowrap);
    justify-content: var(--acme-atcf-justify, flex-start);
    align-items: var(--acme-atcf-align-items, center);
    gap: var(--acme-atcf-gap, 10px);
}

.acme-atcf .acme-atcf-holder .button,
.acme-atcf .acme-atcf-holder button {
    flex-grow: var(--acme-atcf-grow, 0);
}

.woocommerce div.acme-atcf form.cart div.quantity,
.acme-atcf form.cart div.quantity {
    float: none;
    margin: 0;
}

.woocommerce div.acme-atcf form.cart .button,
.woocommerce div.acme-atcf form.cart button,
.acme-atcf form.cart .button,
.acme-atcf form.cart button {
    float: none;
    margin: 0;
}

.acme-atcf .acme-atcf-holder div.quantity .qty {
    max-width: 100%;
}

.acme-atcf .single_variation_wrap .woocommerce-variation-add-to-cart {
    display: block;
}

.acme-atcf--no-qty form.cart div.quantity {
    display: none;
}

.acme-atcf .added_to_cart {
    margin-inline-start: var(--acme-atcf-viewcart-spacing, 10px);
}

/* Variations table baseline for contexts without WooCommerce's
   div.product styling (pages, popups); harmless where it already applies. */
.acme-atcf form.cart table.variations {
    width: 100%;
    border: 0;
    margin-bottom: 1em;
}

.acme-atcf form.cart table.variations td,
.acme-atcf form.cart table.variations th {
    border: 0;
    vertical-align: middle;
}

.acme-atcf form.cart table.variations th.label {
    padding-right: 1em;
    text-align: inherit;
}

.acme-atcf form.cart table.variations td.value select {
    display: inline-block;
    min-width: 75%;
    max-width: 100%;
}

.acme-atcf form.cart .reset_variations {
    display: inline-block;
    margin-top: 0.5em;
}

/* Sticky (ACME) */
.acme-sticky--stuck {
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.acme-sticky--hidden {
    transform: translateY(-120%) !important;
}