/* =========================================================================
   bag-builder.css — the bag builder page (bag_builder.tpl, bag-builder.js).

   The design tools are bag-designer.js in INLINE mode: the same box the
   pop-up uses (.wk-bag-mbox--design), marked .wk-bd-inline and mounted in
   #bb-designer. bag-designer.css styles everything inside it; this sheet
   only undoes the pop-up's shell (size cap, inner scroller, shadow, entry
   animation) and lays the parts out for a page:

     desktop (>= 901px)  preview left, sticky; controls and Add to Cart right
     phone / tablet      preview sticky at the top, controls under it,
                         Add to Cart sticky at the bottom

   901px is in lockstep with SIDE_MQ in bag-designer.js, which sizes the
   preview for the side column. Change one, change both.

   --bb-top is set by bag-builder.js: the height of any FIXED bar at the top
   of the window (site header, WordPress admin bar), so sticky parts stick
   below it rather than under it. 0 when there is none.
   ========================================================================= */

.bb-page {
    --bb-card: var(--panel, #fbf8f1);
    --bb-line: #e3d9c4;
    --bb-accent: var(--accent, #3695ab);
    --bb-accent-deep: var(--accent-deep, #26758a);
    max-width: 1120px;
    margin: 0 auto 48px;
    box-sizing: border-box;
}
.bb-page *,
.bb-page *::before,
.bb-page *::after { box-sizing: border-box; }

/* ---- heading ---- */
.bb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 20px;
    margin: 8px 0 18px;
}
.bb-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
}
.bb-price {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    white-space: nowrap;
}
.bb-price span {
    font-size: 15px;
    font-weight: normal;
    opacity: .75;
}
.bb-pricebox { text-align: right; }
.bb-low { margin: 2px 0 0; font-size: 14px; }
.bb-low a { color: var(--bb-accent-deep); font-weight: 600; }

.bb-loading,
.bb-none {
    margin: 0;
    padding: 40px 20px;
    font-size: 16px;
    text-align: center;
}

/* ---- the design tools, as a page card ---- */
.bb-designer[hidden],
.bb-done[hidden] { display: none !important; }

.bb-designer .wk-bag-mbox.wk-bd-inline {
    max-width: none;
    max-height: none;
    width: 100%;
    overflow: visible;           /* the pop-up's overflow:hidden would break sticky */
    padding: 20px;
    border: 1px solid var(--bb-line);
    border-radius: 12px;
    background: var(--bb-card);
    box-shadow: none;
    animation: none;
}
/* The page's h1 and price say what the pop-up's heading says. */
.bb-designer .wk-bd-inline > .wk-bag-mh,
.bb-designer .wk-bd-inline > .wk-bag-msub { display: none; }

/* No inner scroller: the page scrolls. */
.bb-designer .wk-bd-inline > .wk-bd-panels {
    flex: none;
    min-height: 0;
    overflow: visible;
}

.bb-designer .wk-bd-inline .wk-bag-mok {
    padding: 14px 20px;
    font-size: 16px;
    background: var(--bb-accent);
    letter-spacing: .04em;
}
.bb-designer .wk-bd-inline .wk-bag-mok:hover { background: var(--bb-accent-deep); }

/* Status line, placed just above Add to Cart by bag-builder.js. */
.bb-msg {
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.45;
}
.bb-msg[hidden] { display: none; }
.bb-msg--info  { background: #eef6f8; color: #1f4f5a; }
.bb-msg--error { background: #fdecea; color: #8a1f17; }
.bb-msg a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---- desktop: preview beside the controls ---- */
@media (min-width: 901px) {
    .bb-designer .wk-bag-mbox.wk-bd-inline {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
        grid-template-areas:
            "pin panels"
            "pin hint"
            "pin msg"
            "pin actions"
            "pin rest";
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: 32px;
        align-items: start;
        padding: 24px;
    }
    .bb-designer .wk-bd-inline > .wk-bd-pin {
        grid-area: pin;
        position: sticky;
        top: calc(var(--bb-top, 0px) + 16px);
    }
    .bb-designer .wk-bd-inline > .wk-bd-stage,
    .bb-designer .wk-bd-inline .wk-bd-stage { margin: 0; }
    .bb-designer .wk-bd-inline > .wk-bd-panels  { grid-area: panels; margin-top: 0; }
    .bb-designer .wk-bd-inline > .wk-bd-hint    { grid-area: hint; }
    .bb-designer .wk-bd-inline > .bb-msg        { grid-area: msg; }
    .bb-designer .wk-bd-inline > .wk-bag-mactions { grid-area: actions; }
}

/* ---- phone / tablet: preview on top, Add to Cart at the bottom ---- */
@media (max-width: 900px) {
    .bb-head { margin-bottom: 12px; }
    .bb-pricebox { text-align: left; }
    .bb-title { font-size: 24px; }
    .bb-price { font-size: 19px; }

    .bb-designer .wk-bag-mbox.wk-bd-inline {
        padding: 0 12px;
        border-radius: 10px;
    }
    /* The preview stays on screen while the controls under it scroll by:
       every control that matters (upload, wheel, text height) needs it. The
       card background hides what slides underneath. */
    .bb-designer .wk-bd-inline > .wk-bd-pin {
        position: sticky;
        top: var(--bb-top, 0px);
        z-index: 5;
        margin: 0 -12px;
        padding: 12px 12px 8px;
        background: var(--bb-card);
        border-radius: 10px 10px 0 0;
    }
    .bb-designer .wk-bd-inline .wk-bd-stage { margin: 0; padding: 8px; }

    .bb-designer .wk-bd-inline > .wk-bag-mactions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 0 -12px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--bb-card);
        border-top: 1px solid var(--bb-line);
        border-radius: 0 0 10px 10px;
    }
}

/* ---- after Add to Cart ---- */
.bb-done {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px;
    border: 1px solid var(--bb-line);
    border-radius: 12px;
    background: var(--bb-card);
    outline: none;
}
.bb-done-thumb {
    flex: 0 0 220px;
    width: 220px;
    overflow: hidden;
}
.bb-done-thumb:empty { display: none; }
.bb-done-body { flex: 1 1 auto; min-width: 0; }
.bb-done-title {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.25;
}
.bb-done-msg {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.5;
}
.bb-done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}
.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    border: 2px solid var(--bb-accent);
    border-radius: 6px;
    background: transparent;
    color: var(--bb-accent);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}
.bb-btn:hover { border-color: var(--bb-accent-deep); color: var(--bb-accent-deep); text-decoration: none; }
.bb-btn--primary { background: var(--bb-accent); color: #fff; }
.bb-btn--primary:hover { background: var(--bb-accent-deep); color: #fff; }
.bb-btn:focus-visible { outline: 2px solid var(--gold, #b8912f); outline-offset: 2px; }
.bb-done-more { margin: 0; font-size: 15px; }

@media (max-width: 600px) {
    .bb-done {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 16px;
        text-align: center;
    }
    .bb-done-thumb { flex: none; width: 200px; margin: 0 auto; }
    .bb-done-actions { flex-direction: column; }
    .bb-btn { width: 100%; }
}

/* ---- below the tools: the whole bag beside the description ----
   The tools show a close-up of the print area; this shows where that frame
   sits on the complete bag, with the shopper's design on it (bag-builder.js
   drawBag). Beside the text on desktop, above it on a phone. */
.bb-about { margin: 36px 0 0; }
.bb-about--bag {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.bb-about-text { max-width: 760px; }

.bb-bagfig { margin: 0; }
/* Drawn at this box's measured width. The compositor's geometry is solved for
   exactly that width, so nothing here may resize what it draws. */
.bb-bagview { width: 100%; }
.bb-bagview > * { max-width: none; }
.bb-bagfig figcaption {
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
    opacity: .75;
}

@media (max-width: 700px) {
    .bb-about--bag { grid-template-columns: 1fr; gap: 20px; }
    .bb-bagfig { width: 100%; max-width: 300px; margin: 0 auto; }
}
.bb-about-title {
    margin: 0 0 10px;
    font-size: 20px;
}
.bb-about-body { font-size: 16px; line-height: 1.6; }
.bb-about-body img { max-width: 100%; height: auto; }

.bb-other {
    margin: 24px 0 0;
    font-size: 16px;
}
.bb-other a { font-weight: 600; }