/**
 * Elementor "Stock & Pickup Info" widget — mechanics only.
 *
 * Intentionally carries NO decorative styling: no background colors on the
 * badge, no typography, no spacing, no borders. Everything visual is left to
 * the site's own CSS. What's here is only what the component cannot work
 * without — off-canvas positioning/stacking/show-hide — plus a reset that strips
 * the browser's default <button> chrome off the close control. The "view more
 * info" trigger is a plain <a>, left entirely to the theme's link styles.
 *
 * Classes available to target:
 *   .mcs-stock-info                  badge wrapper
 *   .mcs-stock-info__headline        headline <p>
 *   .mcs-stock-info__subtext         subtext <p> (contains the trigger)
 *   .mcs-stock-info__link            "view more info" trigger <a>
 *   .mcs-pdp-offcanvas-backdrop      full-screen backdrop behind the panel
 *   .mcs-pdp-offcanvas               the sliding panel <aside>
 *   .mcs-pdp-offcanvas__header       panel header (holds the close button)
 *   .mcs-pdp-offcanvas__close        close <button>
 *   .mcs-pdp-offcanvas__body         panel body — the Off-Canvas HTML output
 *
 * Namespaced `.mcs-pdp-*` (product-detail-page) to stay independent from the
 * cart/checkout off-canvas (`.mcs-offcanvas*`) used for the shipping method
 * list, so both can exist on a page without colliding.
 */

/* No rule for `.mcs-stock-info__link` on purpose. It's a real <a> element, so
   the theme's own link styling applies untouched — a reset here (color:inherit
   and friends) would strip exactly that. */

/* Strip default <button> chrome off the close control so it doesn't render as
   a grey form button before any custom CSS is written. */
.mcs-pdp-offcanvas__close {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ---------- Off-canvas mechanics ---------- */

.mcs-pdp-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.mcs-pdp-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 90vw);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    /* Opaque so panel content stays legible over the page beneath it. This is
       the one color here; override it freely. */
    background: #fff;
}
.mcs-pdp-offcanvas:not([hidden]) {
    transform: translateX(0);
}

/* `display` above ties with the browser's built-in `[hidden] { display: none }`
   on specificity; because this sheet loads later it would win the tie and the
   panel would sit open on every page load. These re-assert the hidden state. */
.mcs-pdp-offcanvas[hidden],
.mcs-pdp-offcanvas-backdrop[hidden] {
    display: none !important;
}

.mcs-pdp-offcanvas__header {
    flex: 0 0 auto;
}

.mcs-pdp-offcanvas__body {
    flex: 1 1 auto;
    overflow-y: auto;
}