/* ── Stepper styling (mirrors .widget-addCart .stepper from auto_page/product.css)
 * The +/- icon rendering is scoped to .widget-addCart in that file. Without
 * mirrored rules for .widget-productActionBundle, the bundle's stepper falls
 * back to default plugin styling (text labels "Up"/"Down"). These rules give
 * the bundle's stepper the same [−] [1] [+] appearance as the legacy widget. */
:is(.widget-productActionBundle, .widget-productQuantity) .stepper {
    display: inline-flex;
    align-items: stretch;
    /* vertical-align: top removes the baseline descender space that browsers
     * normally reserve below inline-flex elements — without it, the .stepper
     * sits on a baseline with ~4-5px of empty space below, making the widget
     * appear taller than its content and creating a visible gap to the next
     * widget when stacked. */
    vertical-align: top;
    /* ecommerce.css:98 declares base `.stepper { float: left; margin-right: 20px }`.
     * In the legacy addCart widget the parent `.product-widget.widget-addCart`
     * is `display: flex`, which creates a new block-formatting context that
     * contains the float. For the standalone productQuantity widget the parent
     * is a plain block, so the float escapes — pushing the next dropped
     * widget's inline content ~149px to the right (stepper width + 20px
     * margin-right). Cancel the float + margin to keep the stepper in normal
     * inline flow. */
    float: none;
    margin-right: 0;
    width: auto;
    height: 44px;
    overflow: visible;
    border: 1px solid #000000;
    border-radius: 4px;
    background: #ffffff;
    box-sizing: border-box;
}
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-input {
    order: 2;
    /* Flex-center the "1" text vertically + horizontally. Without this, the
     * span renders text at the baseline (effectively near the top of the
     * 44px box), making the stepper content sit ~10px above the buttons'
     * vertically-centered text. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 100%;
    padding: 0;
    text-align: center;
    border: none;
    border-radius: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    background: #ffffff;
    box-sizing: border-box;
    -moz-appearance: textfield;
    outline: none;
}
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-input::-webkit-inner-spin-button,
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-arrow {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 100% !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    overflow: visible;
    text-indent: 0 !important;
    font-size: 0;
}
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-arrow.up   { order: 3; border-radius: 0 3px 3px 0; }
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-arrow.down { order: 1; border-radius: 3px 0 0 3px; }
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-arrow.up::before,
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-arrow.down::before {
    display: block;
    font-size: 20px;
    line-height: 1;
    color: #333333 !important;
    font-family: Arial, sans-serif;
    font-weight: 400;
    text-indent: 0;
}
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-arrow.up::before   { content: '+'; }
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-arrow.down::before { content: '−'; }
:is(.widget-productActionBundle, .widget-productQuantity) .stepper .stepper-arrow:hover { background: #f5f5f5 !important; }

/* Editor preview emits <span class="stepper-input"> instead of <input>
 * (see editor/productQuantity.gsp). The CSS in this file targets
 * .stepper-input regardless of tag, so the visual is identical and clicks
 * bubble naturally for FEE widget selection. */

/* FEE applies `style="min-height: 0px"` inline to a widget 600ms after
 * insertion (fee.auto-page.widgets.js:325-328). For widgets whose content
 * has inline-flex layout (the .stepper here), the parent doesn't reliably
 * inherit a non-zero height — so the OUTER .widget collapses to ~0px, the
 * .fee-overlay (height: inherit) collapses too, and the widget becomes
 * unclickable for selection. Force a minimum height matching the legacy
 * `.fee .widget` rule (45px) so the click target stays alive.
 *
 * The !important overrides the inline style attribute. Outer .widget gets
 * `.widget-productQuantity` class from the JS-created wrapper. */
/* Target ONLY the OUTER .widget element (which has BOTH .widget AND
 * .widget-productQuantity classes). The INNER .product-widget.widget-productQuantity
 * does NOT have .widget class, so it's not affected — keeps its natural
 * content height, avoiding any double-min-height stacking. */
.widget.widget-productQuantity {
    min-height: 44px !important;
}

/*
 * Product Action Bundle widget — public-site layout.
 *
 * Flex layout driven by CSS custom properties so the right-panel settings
 * (layoutDirection / itemGap / bundleAlign / showDivider) can toggle classes
 * without re-rendering. Slot show/hide is done by .product-action-bundle__slot--hidden
 * (added/removed by the live preview JS).
 */

/* ── Standalone widget spacing ─────────────────────────────────────────────
 * The base `.fee .widget` rule (editor_.css:698) zeroes margins, so the new
 * standalone product widgets sit edge-to-edge when placed adjacent. Give them
 * a 5px outer margin (10px effective gap between two siblings) to match the
 * visual rhythm of the legacy addCart widget's internal `gap: 10px`. */
.product-widget:is(.widget-productQuantity, .widget-productAddToCart, .widget-productBuyNow, .widget-productWishlist, .widget-productCompare) {
    margin: 5px;
}

/* ── Button styling parity with the legacy addCart widget ─────────────────
 * Legacy `.widget-addCart` rules in product-details.css:760-289 don't match
 * either the bundle (`.widget-productActionBundle`) or the standalone product
 * widgets (`.widget-productAddToCart`, `.widget-productBuyNow`). Apply the
 * styling to all of them via `:is()` so both the bundle's slot-wrapped
 * buttons AND the standalone single-button widgets pick up the same look
 * without duplicating the rule. */
.product-widget:is(.widget-productActionBundle, .widget-productAddToCart) .add-to-cart-button.button {
    background-color: #008DF2;
    border-color: #008DF2;
    color: #ffffff;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}
.product-widget:is(.widget-productActionBundle, .widget-productAddToCart) .add-to-cart-button.button:hover {
    background-color: #0078CE;
    border-color: #0078CE;
    color: #ffffff;
}
/* Buy Now — 44px row, black bg / white text (inherited from base .button)
 * to mirror legacy. */
.product-widget:is(.widget-productActionBundle, .widget-productBuyNow) .buy-now-button.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    margin-left: 5px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.product-action-bundle {
    --bundle-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    /* Match legacy .product-widget.widget-addCart (product-details.css:271):
     * `align-items: flex-start` — items top-align. Centering here drifts the
     * quantity stepper away from the buttons because their text baselines
     * differ. */
    align-items: flex-start;
    gap: var(--bundle-gap);
    position: relative;     /* anchor for the absolute-positioned settings button */
}


/* Directions */
.product-action-bundle--row    { flex-direction: row; }
.product-action-bundle--column { flex-direction: column; align-items: stretch; }

/* Gap presets */
.product-action-bundle--gap-small  { --bundle-gap: 8px; }
.product-action-bundle--gap-medium { --bundle-gap: 12px; }
.product-action-bundle--gap-large  { --bundle-gap: 20px; }

/* Alignment along the main axis */
.product-action-bundle--align-left   { justify-content: flex-start; }
.product-action-bundle--align-center { justify-content: center; }
.product-action-bundle--align-right  { justify-content: flex-end; }

/* Slots top-align with their parent bundle (which uses align-items: flex-start
 * to match legacy widget-addCart). Min-height ensures consistent baseline
 * while letting the slot grow if its content (stepper with 10px margin-top)
 * needs extra room. */
.product-action-bundle__slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.product-action-bundle__slot--hidden { display: none !important; }

/* Vertical divider between wishlist and compare (when both visible). */
.product-action-bundle__divider {
    display: inline-block;
    width: 1px;
    height: 24px;
    background: #E0E0E0;
    margin: 0 4px;
}

/* ── Wishlist + Compare slots ─────────────────────────────────────────────
 * Match the legacy `.widget-addCart` styling (product-details.css:779-805):
 * a 44×44 white box with blue border and a blue FontAwesome heart/arrows
 * icon (via the generic `.add-to-wish-list:after` / `.add-to-compare-button:after`
 * rules in ecommerce.css:348-363). Text label is hidden by font-size:0 on
 * the button; the :after icon overrides with font-size:20px. Hover inverts. */

/* The 44×44 white-with-blue-border icon button. Applied to wishlist + compare
 * inside the bundle AND when they appear standalone (.widget-productWishlist,
 * .widget-productCompare). One selector covers both via :is(). */
:is(.product-action-bundle, .product-widget.widget-productWishlist, .product-widget.widget-productCompare) :is(.add-to-wish-list, .add-to-compare-button, .remove-from-compare-button) {
    background-color: #ffffff;
    border: 1px solid #008DF2;
    color: #008DF2;
    border-radius: 6px;
    height: 44px;
    width: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;           /* hide the plugin TagLib's text label */
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
:is(.product-action-bundle, .product-widget.widget-productWishlist, .product-widget.widget-productCompare) :is(.add-to-wish-list, .add-to-compare-button, .remove-from-compare-button):after {
    color: #008DF2;
    font-size: 20px;        /* override the font-size:0 above so the icon shows */
}
:is(.product-action-bundle, .product-widget.widget-productWishlist, .product-widget.widget-productCompare) :is(.add-to-wish-list, .add-to-compare-button, .remove-from-compare-button):hover {
    background-color: #008DF2;
    border-color: #008DF2;
}
:is(.product-action-bundle, .product-widget.widget-productWishlist, .product-widget.widget-productCompare) :is(.add-to-wish-list, .add-to-compare-button, .remove-from-compare-button):hover:after {
    color: #ffffff;
}
:is(.product-action-bundle, .product-widget.widget-productWishlist, .product-widget.widget-productCompare) .add-to-wish-list.disabled {
    opacity: .4;
    pointer-events: none;
}

/* Responsive — primary actions stack full-width on narrow viewports. */
@media (max-width: 480px) {
    .product-action-bundle--row { flex-direction: column; align-items: stretch; }
    .product-action-bundle__slot--quantity,
    .product-action-bundle__slot--addToCart,
    .product-action-bundle__slot--buyNow { flex: 1 0 100%; }
    .product-action-bundle__slot--addToCart > .button,
    .product-action-bundle__slot--buyNow    > .button { width: 100%; justify-content: center; }
}