/*
 * Sticky action bar (layouts/tts/js/sticky-action-bar.js): below 1024px, a
 * page's main action and its figure (the cart's total, the product's price)
 * compact at the foot of the screen, shown only while the page's own action is
 * out of view. From 1024px the page's own action is always in reach, and the
 * bar is never shown. Decisions 22 and 23.
 */

.sticky-action-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--shop-z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--shop-space-4);
    padding: var(--shop-space-3) var(--shop-gutter);
    padding-block-end: calc(var(--shop-space-3) + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--shop-border);
    background: var(--shop-surface);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
}

.sticky-action-bar[hidden] {
    display: none;
}

/* While the bar shows, the page ends above it - its footer and anything that
   takes focus stay clear of it (WCAG 2.4.11) - and the floating widgets sit
   above it rather than on its
   action (the height is the bar's own, set by sticky-action-bar.js). The
   Trusted Shops badge is positioned by its own script, hence !important. */
html.sticky-action-bar-open {
    scroll-padding-block-end: calc(var(--sticky-action-bar-height, 4.5rem) + var(--shop-space-3));
}

/* A spacer after the footer rather than body padding: combined.css gives
   body a fixed height the page overflows, so its padding would not lengthen
   the page. */
html.sticky-action-bar-open body::after {
    content: "";
    display: block;
    height: var(--sticky-action-bar-height, 4.5rem);
}

html.sticky-action-bar-open .contact-widget {
    inset-block-end: calc(var(--sticky-action-bar-height, 4.5rem) + var(--shop-space-3));
}

/* Stacked over the contact button, as it is without the bar. */
html.sticky-action-bar-open [id^="trustbadge-container"] {
    bottom: calc(var(--sticky-action-bar-height, 4.5rem) + var(--shop-space-3) * 2 + var(--shop-tap)) !important;
}

/* Consent Studio's cookie-settings pill sits bottom left, on the bar's price.
   It is hidden rather than lifted (owner's choice): it comes back as soon as the
   bar goes (the page's own action is in view again), so the cookie settings stay
   reachable. */
html.sticky-action-bar-open .consent-studio .cookie-toggle {
    display: none;
}

.sticky-action-bar__summary {
    display: grid;
    color: var(--shop-text-soft);
    font-size: var(--shop-text-xs);
    line-height: var(--shop-leading-snug);
}

.sticky-action-bar__amount {
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-bold);
    font-variant-numeric: tabular-nums;
}

.shop-btn.sticky-action-bar__action {
    flex: none;
    min-height: var(--shop-tap);
}

/* With a consent line the bar is two rows rather than one: the figure and the
   button as before, the sentence under both. The base rule stays a flex row for
   every other page that uses the bar, and `[hidden]` outranks this either way.
   The bar's height is measured by sticky-action-bar.js, so the page's own
   bottom spacing follows the taller bar on its own. */
.sticky-action-bar--consent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--shop-space-4);
    row-gap: var(--shop-space-2);
}

.sticky-action-bar--consent .sticky-action-bar__action {
    justify-self: end;
}

.sticky-action-bar--consent .terms-consent {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .sticky-action-bar {
        display: none;
    }
}