/*!
 * The storefront's own stylesheet, loaded after everything the theme ships.
 *
 * The design is the theme's: `css/main.css` and its imports are the parent theme's
 * compiled stylesheet, and the child theme's `mrpsn-tokens.css`, its component
 * stylesheets and its `mrpsn-cohesion.css` are copied across unchanged. Nothing
 * here restyles any of that.
 *
 * What is here is the short list of rules the port genuinely needs and the legacy
 * theme never had to write, because WordPress or a plugin was doing the work:
 *
 *   1. the mini cart's remove control, which is a POST form here rather than
 *      WooCommerce's `?remove_item=` link;
 *   2. the search overlay's backdrop, which the legacy hid with an inline style
 *      from jQuery and this one hides with the `hidden` attribute;
 *   3. the page shell, which WordPress' page templates wrote with Bootstrap's
 *      `mt-4 mb-5` around `.custom-container` and a set of vertical spans between
 *      the home page's blocks, where Elementor was supplying both before.
 */


/* 1. Removing a cart line is a state change, so it is a POST form rather than a
      link a crawler or a prefetcher could follow. The form must not become a flex
      item of its own: `.woocommerce-mini-cart-item` is a flex row with a `gap`,
      and an empty box between the image and the details would add that gap to
      every line. `display: contents` takes the form out of the layout and leaves
      the button positioned against the list item, which is the containing block
      `.remove_from_cart_button` is written for. */
.mrpsn-mini-cart-remove {
    display: contents;
}

/* The button inherits the anchor treatment `mrpsn-mini-cart.css` gives
   `.remove_from_cart_button`; only the browser's own button chrome is cleared. */
.mrpsn-mini-cart-remove .remove_from_cart_button {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

/* 2. The `hidden` attribute is what our own script toggles on the backdrop. The
      theme's rule positions it, so the display reset is stated explicitly rather
      than relied on. */
.search-backdrop[hidden] {
    display: none !important;
}

/* Long-form content migrated out of WordPress: an image or a table wider than the
   column would otherwise push the whole page sideways. */
.mrpsn-content img {
    max-width: 100%;
    height: auto;
}

.mrpsn-content table {
    width: 100%;
}

/* 3. The page shell.

      Every page template in the theme opened with `<div class="mt-4 mb-5">`
      around a `.custom-container`, which is 24px above and 48px below. The port
      keeps the same shell, so a page's heading sits where the theme put it
      instead of against the header. */
.mrpsn-page {
    padding-top: 24px;
    padding-bottom: 48px;
}

/* The home page's blocks, which used to be Elementor sections.

      Elementor's section and column wrappers are not part of the migration, so
      the vertical span between one block and the next has to come from
      somewhere: it comes from the design tokens rather than from a per-block
      margin, so the home page and the archive pages breathe by the same amount.

      `.mrpsn-block + .mrpsn-block` and not `.mrpsn-block` so the first block
      does not add a gap under the header, which the header's own margin already
      holds. */
.mrpsn-block + .mrpsn-block {
    margin-top: var(--mrpsn-section-space);
}

/* The hero's band.

      The source page gave this container a grey background and a curve along its
      bottom edge, so the grey ran behind the hero and dissolved into the white
      the rest of the page is painted on. The curve is Elementor's own "curve"
      shape, kept as its original path because that is what the owner chose. */
.mrpsn-hero-band {
    position: relative;
    padding-block: 10px 0;
    /* background: var(--mrpsn-hero-band-bg, #f5f6fa); */
}

.mrpsn-shape-divider {
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    direction: ltr;
    pointer-events: none;
}

.mrpsn-shape-divider svg {
    display: block;
    position: relative;
    left: 50%;
    width: calc(100% + 1.3px);
    height: var(--mrpsn-shape-height, 93px);
    transform: translateX(-50%);
}

.mrpsn-shape-divider__fill {
    fill: var(--mrpsn-shape-fill, #fff);
}

/* Two banners side by side, as the source page had them: a pair of linked
      images under the first rail. */
.mrpsn-promos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mrpsn-space-5);
}

.mrpsn-promos__item,
.mrpsn-promos__item img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .mrpsn-page {
        padding-top: 16px;
        padding-bottom: 32px;
    }

    .mrpsn-block + .mrpsn-block {
        margin-top: var(--mrpsn-section-space-mobile);
    }

    .mrpsn-promos {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mrpsn-space-4);
    }
}