/* ==========================================================================
   Floating buy bar (phones and touch tablets) - see custom-files/buy-bar.php
   ========================================================================== */

/* Built on every product page, shown only where it belongs: the breakpoint is the one the search box
   and the product gallery use, so "phone" means the same thing everywhere in the theme. */
.co-buy-bar {
    display: none;
}

.co-buy-bar[hidden] {
    display: none !important;
}

@media (max-width: 767px), (pointer: coarse) and (max-width: 1100px) {
    .co-buy-bar:not([hidden]) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100001; /* over the mini cart widget (100000) */
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--color-bg, #fff);
        border-top: 1px solid var(--color-border, #e0e0e0);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
    }
}

.co-buy-bar__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 38%;
    line-height: 1.2;
}

.co-buy-bar__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm, 12px);
    color: var(--color-text-light, #666);
}

.co-buy-bar__price {
    font-size: var(--font-size-lg, 16px);
    font-weight: 700;
    color: var(--color-text, #333);
}

.co-buy-bar__info:empty,
.co-buy-bar__name:empty + .co-buy-bar__price:empty {
    display: none;
}

.co-buy-bar__cart {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 12px 16px;
    background-color: var(--color-accent, #c13124);
    color: var(--color-nav-text, #fff);
    font-family: inherit;
    font-size: var(--font-size-lg, 16px);
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.co-buy-bar__cart:active {
    background-color: var(--color-secondary, #8B1A1A);
}

/* The heart is a copy of the one in the buy box: square, same height as the button, outline only. */
.co-buy-bar .co-buy-bar__wish {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    color: var(--color-accent, #c13124);
}

.co-buy-bar .co-buy-bar__wish .fox-wl-btn-icon,
.co-buy-bar .co-buy-bar__wish .woosw-btn-icon {
    padding: 0;
    margin: 0;
}

.co-buy-bar .co-buy-bar__wish .fox-wl-heart {
    width: 24px;
    height: 24px;
}

/* The floating mini cart bubble gets out of the way entirely while the bar is showing: lifting it only
   moved it onto the legal line at the end of the page, and two floating controls on one screen is one
   too many. The cart is a tap away in the header either way. */
html.co-buy-bar-on .uwpmc-widget-container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Room to scroll past the bar. It covers the bottom strip of the screen, so without this the last thing
   on the page - the last size row of the picker, or the legal line in the footer - can never be scrolled
   out from under it (Alex, 2026-10-20). The room is there on every product page, not only while the bar
   is showing, so nothing shifts when the bar comes and goes. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1100px) {
    body.single-product {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}


/* ==========================================================================
   The size sheet: the same list as the buy box, over the page
   ========================================================================== */

.co-buy-sheet[hidden] {
    display: none !important;
}

html.co-buy-sheet-open,
html.co-buy-sheet-open body {
    overflow: hidden;
}

.co-buy-sheet {
    position: fixed;
    inset: 0;
    z-index: 100002; /* over the bar itself */
    display: flex;
    align-items: flex-end;
}

.co-buy-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.co-buy-sheet__panel {
    position: relative;
    width: 100%;
    max-height: 85vh;
    max-height: 85dvh; /* iOS counts vh against the viewport WITHOUT its toolbars, dvh against the real one */
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 14px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg, #fff);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
}

.co-buy-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.co-buy-sheet__title {
    font-size: var(--font-size-lg, 16px);
    font-weight: 700;
    color: var(--color-text, #333);
}

.co-buy-sheet__close {
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--color-text-light, #666);
    cursor: pointer;
}

.co-buy-sheet__list {
    flex: 1 1 auto;
    min-height: 0;
    /* Plenty of room under the last row, not a hair: the list's edge must land nowhere near a row's
       border, whatever the device does with its fonts (Alex, 2026-10-20: "just move it more up
       enough, stop messing with this few pixels"). */
    padding-bottom: 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* The rows are copies of the buy box's rows, so they keep its layout and colours. They are not form
   controls here: the real row behind them is what gets clicked. */
.co-buy-sheet__list .co-var-row {
    cursor: pointer;
}

.co-buy-sheet__cart {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 12px 16px;
    background-color: var(--color-accent, #c13124);
    color: var(--color-nav-text, #fff);
    font-family: inherit;
    font-size: var(--font-size-lg, 16px);
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.co-buy-sheet__cart:disabled {
    background-color: var(--color-gray-400, #aaa);
    cursor: default;
}