.subhan-eac-widget {
    --seac-border-color: #d9dde3;
    --seac-muted-bg: #f7f8fa;
    --seac-success-bg: #ecfdf3;
    --seac-success-text: #146c43;
    --seac-error-bg: #fff1f2;
    --seac-error-text: #9f1239;
    --seac-chip-bg: #f4f6f8;
    --seac-chip-border: #d6dbe2;
    --seac-chip-text: #1f2937;
    --seac-chip-radius: 10px;
    --seac-chip-height: 42px;
    --seac-chip-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --seac-variation-normal-bg: transparent;
    --seac-variation-normal-text: #111111;
    --seac-variation-normal-border: #d9dde3;
    --seac-variation-hover-bg: transparent;
    --seac-variation-hover-text: #111111;
    --seac-variation-hover-border: #48A83E;
    --seac-variation-selected-bg: var(--seac-add-to-cart-bg, #48A83E);
    --seac-variation-selected-text: #ffffff;
    --seac-variation-selected-border: var(--seac-add-to-cart-bg, #48A83E);
    --seac-variation-radius: 5px;
}

.subhan-eac-widget,
.subhan-eac-widget * {
    box-sizing: border-box;
}

.subhan-eac-widget-inner {
    width: 100%;
}

.subhan-eac-widget-price {
    margin: 0 0 12px;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.subhan-eac-widget-price del {
    margin-right: 6px;
    opacity: .58;
}

.subhan-eac-variations-hidden {
    display: none !important;
}

.subhan-eac-variation-form {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.woocommerce div.product .subhan-eac-widget form.subhan-eac-variation-form.cart,
.woocommerce-page div.product .subhan-eac-widget form.subhan-eac-variation-form.cart {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.subhan-eac-variation-rows {
    display: grid;
    gap: 10px;
}

.subhan-eac-variation-row {
    margin: 0;
}

.subhan-eac-variation-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    line-height: 1.2;
}

.subhan-eac-variation-value {
    display: block;
}

.subhan-eac-variation-value select {
    width: 100%;
    max-width: 100%;
}

.subhan-eac-layout-swatches .subhan-eac-variation-value > select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

.subhan-eac-swatches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.subhan-eac-swatch {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--seac-variation-normal-border, #d9dde3);
    background: var(--seac-variation-normal-bg, transparent);
    color: var(--seac-variation-normal-text, #111111);
    border-radius: var(--seac-variation-radius, 5px);
    box-shadow: none;
    padding: 0 12px;
    min-height: var(--seac-chip-height);
    height: var(--seac-chip-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.subhan-eac-swatch:hover:not(.is-active):not(.is-disabled):not(:disabled),
.subhan-eac-swatch:focus-visible:not(.is-active):not(.is-disabled):not(:disabled) {
    border-color: var(--seac-variation-hover-border, #48A83E);
    background: var(--seac-variation-hover-bg, transparent);
    color: var(--seac-variation-hover-text, #111111);
}

.subhan-eac-swatch.is-active,
.subhan-eac-swatch.is-active:hover,
.subhan-eac-swatch.is-active:focus-visible {
    border-color: var(--seac-variation-selected-border, var(--seac-add-to-cart-bg, #48A83E));
    color: var(--seac-variation-selected-text, #fff);
    background: var(--seac-variation-selected-bg, var(--seac-add-to-cart-bg, #48A83E));
    box-shadow: none;
}

.subhan-eac-swatch.is-disabled,
.subhan-eac-swatch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #d1d5db;
    color: #9ca3af;
    background: #f9fafb;
}

.subhan-eac-variation-form .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
}

.subhan-eac-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.subhan-eac-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.subhan-eac-buttons .subhan-eac-btn {
    flex: 1 1 0;
    min-width: 0;
}

/* WooCommerce may inject this link after its added_to_cart event. The widget
   already provides its own success feedback, so keep the action row clean. */
.subhan-eac-widget a.added_to_cart,
.subhan-eac-widget a.added_to_cart.wc-forward {
    display: none !important;
}

.subhan-eac-widget--product-actions.subhan-eac-buy-now-left .subhan-eac-buy-now {
    order: -1;
}

.subhan-eac-widget--product-actions .subhan-eac-buy-now-bottom-wrap {
    margin-top: 10px;
    width: 100%;
}

.subhan-eac-widget--product-actions .subhan-eac-buy-now-bottom-wrap .subhan-eac-btn {
    width: 100%;
}

.subhan-eac-qty-control {
    display: inline-flex;
    align-items: stretch;
    border: 0;
    border-radius: var(--seac-chip-radius);
    box-shadow: none;
    overflow: hidden;
    min-width: 0;
    min-height: var(--seac-chip-height);
    background: transparent;
}

.subhan-eac-qty-btn {
    width: 34px;
    min-width: 34px;
    border: 0;
    border-right: 0;
    background: var(--seac-chip-bg);
    color: var(--seac-chip-text);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    min-height: var(--seac-chip-height);
}

.subhan-eac-qty-plus {
    border-right: 0;
    border-left: 0;
}

.subhan-eac-qty-input {
    width: 42px;
    border: 0;
    border-left: 0;
    border-right: 0;
    text-align: center;
    outline: none;
    appearance: textfield;
    padding: 6px;
    min-height: var(--seac-chip-height);
    background: #fff;
    color: var(--seac-chip-text);
}

.subhan-eac-widget input.subhan-eac-qty-input[type="number"] {
    border: 0;
    box-shadow: none;
    background: #fff;
}

.subhan-eac-widget input.subhan-eac-qty-input[type="number"]:focus {
    border: 0;
    box-shadow: none;
    outline: none;
    background: #fff;
}

.subhan-eac-widget button.subhan-eac-qty-btn,
.subhan-eac-widget button.subhan-eac-qty-btn:focus {
    border: 0;
    box-shadow: none;
}

.subhan-eac-qty-input::-webkit-outer-spin-button,
.subhan-eac-qty-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.subhan-eac-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.subhan-eac-btn.is-full-width,
.subhan-eac-has-full-width .subhan-eac-btn {
    width: 100%;
}

.subhan-eac-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: subhan-eac-spin 0.6s linear infinite;
}

.subhan-eac-btn.is-loading {
    cursor: wait;
}

.subhan-eac-btn.is-loading.show-spinner .subhan-eac-spinner {
    display: inline-block;
}

.subhan-eac-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.subhan-eac-icon svg {
    width: 1em;
    height: 1em;
}

.subhan-eac-message {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    line-height: 1.45;
}

.subhan-eac-message.is-visible {
    display: block;
}

.subhan-eac-message.is-success {
    background: var(--seac-success-bg);
    border-color: #bbf7d0;
    color: var(--seac-success-text);
}

.subhan-eac-message.is-error {
    background: var(--seac-error-bg);
    border-color: #fecdd3;
    color: var(--seac-error-text);
}

@keyframes subhan-eac-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    .subhan-eac-actions {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .subhan-eac-buttons {
        flex-wrap: nowrap;
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .subhan-eac-qty-control {
        width: auto;
        flex: 0 0 auto;
    }

    .subhan-eac-buttons .subhan-eac-btn {
        width: auto;
        min-width: 0;
    }

    .subhan-eac-widget--product-actions .subhan-eac-buy-now-bottom-wrap .subhan-eac-btn {
        width: 100%;
    }
}


/* Unified product-actions: preserve the Elementor Buy Now position control. */
.subhan-eac-widget--product-actions.subhan-eac-buy-now-right .subhan-eac-buttons,
.subhan-eac-widget--product-actions.subhan-eac-buy-now-left .subhan-eac-buttons {
    flex-direction: row;
}

.subhan-eac-widget--product-actions.subhan-eac-buy-now-bottom .subhan-eac-buttons {
    flex-direction: column;
    width: 100%;
}

.subhan-eac-widget--product-actions.subhan-eac-buy-now-bottom .subhan-eac-buttons .subhan-eac-btn {
    width: 100%;
    flex: 0 0 auto;
}

/* Keep variation UI free from the plugin's original grey panel treatment. */
.subhan-eac-widget--product-actions .subhan-eac-variation-form {
    background: transparent;
    border: 0;
    box-shadow: none;
}


/* v3.4.5 cart/action cleanup: keep the widget compact inside product cards. */
.subhan-eac-widget--product-actions,
.subhan-eac-widget--product-actions .subhan-eac-widget-inner,
.subhan-eac-widget--product-actions .subhan-eac-actions,
.subhan-eac-widget--product-actions .subhan-eac-buttons,
.subhan-eac-widget--product-actions .subhan-eac-buy-now-bottom-wrap {
    padding-bottom: 0 !important;
}

.subhan-eac-widget--product-actions .subhan-eac-actions {
    margin-bottom: 0 !important;
}

.subhan-eac-widget--product-actions .subhan-eac-buttons {
    margin-bottom: 0 !important;
}

.subhan-eac-widget--product-actions .subhan-eac-btn {
    margin-bottom: 0 !important;
}

.subhan-eac-widget--product-actions .subhan-eac-buy-now-bottom-wrap {
    margin-bottom: 0 !important;
}

.subhan-eac-widget--product-actions .subhan-eac-message {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------
   Fixed Single Product Page layout (opt-in via the widget's
   "Enable Fixed Layout" toggle). Fully scoped under
   .subhan-eac-fixed-layout so every other usage of this widget
   (product loops/cards, etc.) is completely unaffected.
   --------------------------------------------------------------------- */

.subhan-eac-fixed-layout .subhan-eac-fixed-top-row {
    margin-bottom: 14px !important;
    width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Keep the fixed-layout variation controls vertically aligned to the quantity
   box without letting WooCommerce's reset link add invisible height. */
.subhan-eac-fixed-layout .subhan-eac-fixed-top-row .subhan-eac-variation-form .reset_variations {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* In the split fixed layout, keep the variation section centered over the
   Add to Cart column while leaving the quantity control in its existing place. */
.subhan-eac-fixed-layout .subhan-eac-fixed-top-row--split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: end !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-top-row--split .subhan-eac-fixed-qty-wrap {
    grid-column: 1;
    justify-self: start;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-top-row--split .subhan-eac-fixed-variation-wrap {
    grid-column: 2;
    justify-self: start;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-variation-wrap {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-qty-wrap {
    flex: 0 0 auto !important;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-top-row .subhan-eac-variation-form {
    margin: 0 !important;
    width: auto !important;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-top-row .subhan-eac-variation-rows,
.subhan-eac-fixed-layout .subhan-eac-fixed-top-row .subhan-eac-variation-row,
.subhan-eac-fixed-layout .subhan-eac-fixed-top-row .subhan-eac-variation-value {
    width: auto !important;
    display: block !important;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-top-row .subhan-eac-variation-label {
    text-align: left !important;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-top-row .subhan-eac-swatches {
    justify-content: flex-start !important;
    width: auto !important;
}

/* Fallback defaults; the widget's "Fixed Layout - Quantity Box" style
   controls override these per-instance once Elementor's CSS regenerates. */
.subhan-eac-fixed-layout .subhan-eac-qty-control {
    border: 1px solid #8fd17f;
    border-color: color-mix(in srgb, var(--seac-add-to-cart-bg, #48A83E) 45%, #ffffff 55%);
    border-radius: 5px;
}

.subhan-eac-fixed-layout .subhan-eac-qty-input {
    color: #000000;
    background: transparent;
    width: 40px;
}

.subhan-eac-fixed-layout .subhan-eac-qty-btn {
    color: #1f2937;
    background: transparent;
    border-radius: 5px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.subhan-eac-fixed-layout .subhan-eac-qty-btn:hover,
.subhan-eac-fixed-layout .subhan-eac-qty-btn:focus-visible {
    background-color: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-mid-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-mid-row > .subhan-eac-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.subhan-eac-fixed-layout .subhan-eac-whatsapp-btn {
    background-color: #128C3E;
    border-color: #128C3E;
    color: #ffffff;
    border-radius: 5px;
}

.subhan-eac-fixed-layout .subhan-eac-whatsapp-btn:hover,
.subhan-eac-fixed-layout .subhan-eac-whatsapp-btn:focus-visible {
    background-color: #0E7233;
    border-color: #0E7233;
    color: #ffffff;
}

.subhan-eac-fixed-layout .subhan-eac-whatsapp-btn .subhan-eac-icon svg {
    width: 16px;
    height: 16px;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-bottom-row {
    width: 100%;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-bottom-row .subhan-eac-btn {
    width: 100%;
}

/* Buy Now only: a very light, periodic attention shake. Mostly still, a
   quick subtle wiggle every few seconds, then still again. Doesn't touch
   color, size, or layout. */
@keyframes subhan-eac-buy-now-shake {
    0%,
    83%,
    100% {
        transform: translateX(0);
    }
    84% {
        transform: translateX(-2px);
    }
    86% {
        transform: translateX(2px);
    }
    88% {
        transform: translateX(-2px);
    }
    90% {
        transform: translateX(2px);
    }
    92% {
        transform: translateX(-1px);
    }
    94% {
        transform: translateX(1px);
    }
    96% {
        transform: translateX(0);
    }
}

.subhan-eac-fixed-layout .subhan-eac-fixed-bottom-row .subhan-eac-btn {
    animation: subhan-eac-buy-now-shake 2.2s ease-in-out infinite;
}

.subhan-eac-fixed-layout .subhan-eac-fixed-bottom-row .subhan-eac-btn:hover,
.subhan-eac-fixed-layout .subhan-eac-fixed-bottom-row .subhan-eac-btn:focus-visible {
    animation-play-state: paused;
}

@media (max-width: 480px) {
    .subhan-eac-fixed-layout .subhan-eac-fixed-top-row {
        gap: 8px;
    }
}

/* ---------------------------------------------------------------------
   Compact variation spacing (product cards / loop items only).
   Scoped to the NON fixed-layout widget, so the Single Product fixed
   layout is untouched. CSS only: no markup, JS or behaviour changes.

   1) The WooCommerce "Clear" link used to sit in normal flow (8px top
      margin + ~18px line) and kept reserving height even while invisible.
      It stays in the DOM and still works, but no longer takes up space.
   2) The gap between the variation buttons and the Add to Cart button is
      set to 10px, same as the gap between Add to Cart and Buy Now. The
      longer selectors are needed to out-rank the existing rule above that
      forces margin-bottom: 0 !important on WooCommerce product wrappers.
   --------------------------------------------------------------------- */
.subhan-eac-widget--product-actions:not(.subhan-eac-fixed-layout) .subhan-eac-variation-form,
.woocommerce div.product .subhan-eac-widget--product-actions:not(.subhan-eac-fixed-layout) form.subhan-eac-variation-form.cart,
.woocommerce-page div.product .subhan-eac-widget--product-actions:not(.subhan-eac-fixed-layout) form.subhan-eac-variation-form.cart {
    position: relative;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.subhan-eac-widget--product-actions:not(.subhan-eac-fixed-layout) .subhan-eac-variation-form .reset_variations {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* ---------------------------------------------------------------------
   Selected variation swatch: green background + white text.
   Normal (unselected) swatches are not touched.

   The repeated .subhan-eac-swatch class only raises specificity so this
   wins over the Elementor hover/active swatch controls, which are also
   !important and previously made the selected swatch fall back to a
   white background with dark text while it was hovered/focused/tapped.
   Disabled swatches are excluded.
   --------------------------------------------------------------------- */
.subhan-eac-widget--product-actions .subhan-eac-swatches .subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.is-active:not(.is-disabled):not(:disabled),
.subhan-eac-widget--product-actions .subhan-eac-swatches .subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.is-active:not(.is-disabled):not(:disabled):hover,
.subhan-eac-widget--product-actions .subhan-eac-swatches .subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.is-active:not(.is-disabled):not(:disabled):focus,
.subhan-eac-widget--product-actions .subhan-eac-swatches .subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.is-active:not(.is-disabled):not(:disabled):focus-visible,
.subhan-eac-widget--product-actions .subhan-eac-swatches .subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.subhan-eac-swatch.is-active:not(.is-disabled):not(:disabled):active {
    background-color: #7FBA32 !important;
    border-color: #7FBA32 !important;
    color: #ffffff !important;
}