/*
 * USWAG builder (rebuild) — styles. Scoped under .uswag-builder; no Bootstrap, no globals.
 *
 * Identity: EZR Shop navy + gold, Oswald headings, Open Sans text (both loaded by the shared
 * template). Modern treatment: a stepper instead of an icon rail, the product on an open
 * soft-lit canvas, one options card, a sticky action bar with a single gold primary action,
 * 16px radii, layered shadows, a real type scale, and motion that respects reduced-motion.
 * Mobile (<= 900px): bottom sheet + tab bar (see the media block at the end).
 *
 * Every selector is scoped under .uswag-builder so global shop.min.css rules (.content button,
 * h2 …) cannot out-specify ours. The only unscoped rules are the Hiver bubble hooks at the end.
 */
.uswag-builder {
    --ub-navy: #1a2258;
    --ub-navy-2: #232d6f;
    --ub-navy-3: #2f3a86;
    --ub-navy-soft: #e7eaf7;
    --ub-gold: #f5c518;
    --ub-gold-2: #e0ae0a;
    --ub-gold-ink: #1a1a1a;
    --ub-ink: #151a2d;
    --ub-ink-2: #4b5268;
    --ub-muted: #7a8199;
    --ub-line: #e3e6ef;
    --ub-line-2: #cdd2e0;
    --ub-surface: #ffffff;
    --ub-surface-2: #f4f5fa;
    --ub-ground: #eef0f6;
    --ub-danger: #b42318;
    --ub-danger-soft: #fdecea;
    --ub-ok: #1f7a4d;
    --ub-radius: 16px;
    --ub-radius-sm: 10px;
    --ub-radius-xs: 6px;
    --ub-shadow-1: 0 1px 2px rgba(21, 26, 45, 0.05), 0 4px 14px -8px rgba(21, 26, 45, 0.18);
    --ub-shadow-2: 0 2px 4px rgba(21, 26, 45, 0.06), 0 18px 40px -20px rgba(21, 26, 45, 0.35);
    --ub-font: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --ub-font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --ub-tray-w: 400px;
    --ub-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    font-family: var(--ub-font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ub-ink);
    background: var(--ub-ground);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.uswag-builder *,
.uswag-builder *::before,
.uswag-builder *::after {
    box-sizing: inherit;
}
.uswag-builder [hidden] {
    display: none !important;
}
.uswag-builder button {
    font: inherit;
    color: inherit;
}
.uswag-builder img {
    max-width: 100%;
    display: block;
}
.uswag-builder h2,
.uswag-builder h3 {
    margin: 0;
    font-family: var(--ub-font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: inherit;
    line-height: 1.1;
}
.uswag-builder p {
    margin: 0 0 10px;
}
.uswag-builder ul,
.uswag-builder ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.uswag-builder :focus-visible {
    outline: 3px solid var(--ub-gold);
    outline-offset: 2px;
    border-radius: 4px;
}
.uswag-builder .ub-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.uswag-builder .ub-muted {
    color: var(--ub-muted);
    font-weight: 400;
}
.uswag-builder .ub-fine {
    font-size: 13px;
    color: var(--ub-ink-2);
}
.uswag-builder .ub-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--ub-navy-3);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font: inherit;
}
.uswag-builder .ub-link--danger {
    color: var(--ub-danger);
}
.uswag-builder .ub-eyebrow {
    font-family: var(--ub-font-display);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ub-gold-2);
    margin-bottom: 8px;
}

/* ------------------------------------------------------------------ layout */
.uswag-builder .ub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ub-tray-w);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'stepper stepper' 'stage tray';
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 32px;
    gap: 20px 24px;
}
.uswag-builder .ub-layout__stepper {
    grid-area: stepper;
}
.uswag-builder .ub-layout__stage {
    grid-area: stage;
    min-width: 0;
}
/*
 * The options card: sticky beside the stage, sized to the viewport, scrolling its own content.
 * Its footer is the action bar, so the primary action is always visible and never covers anything.
 */
/* Height = viewport minus the shared header (~160px) + stepper (~90px) + spacing, so product,
   options and the gold action all sit above the fold at scroll 0. */
.uswag-builder .ub-layout__tray {
    grid-area: tray;
    align-self: start;
    position: sticky;
    top: 16px;
    height: clamp(540px, calc(100vh - 290px), 860px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--ub-surface);
    border-radius: var(--ub-radius);
    box-shadow: var(--ub-shadow-1);
    overflow: hidden;
}
/* Explicit rows: the handle is display:none on desktop, so without these the tray would take the
   auto row and never be height-constrained. */
.uswag-builder .ub-sheet__handle {
    grid-row: 1;
}
.uswag-builder .ub-tray {
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 24px 40px;
    scrollbar-width: thin;
}
.uswag-builder .ub-layout__actionbar {
    grid-row: 3;
    position: static;
}
.uswag-builder .ub-layout__actionbar:empty {
    display: none;
}

/* ----------------------------------------------------------------- stepper */
.uswag-builder .ub-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px 4px;
}
.uswag-builder .ub-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.uswag-builder .ub-step {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.uswag-builder .ub-step__line {
    width: 44px;
    height: 2px;
    border-radius: 1px;
    background: var(--ub-line-2);
    flex: 0 0 auto;
}
.uswag-builder .ub-step.is-done .ub-step__line,
.uswag-builder .ub-step.is-current .ub-step__line {
    background: var(--ub-navy);
}
.uswag-builder .ub-step__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    transition: background 140ms var(--ub-ease);
}
.uswag-builder .ub-step__btn:hover:not(:disabled) {
    background: rgba(26, 34, 88, 0.06);
}
.uswag-builder .ub-step__btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.uswag-builder .ub-step__num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--ub-font-display);
    font-weight: 600;
    font-size: 16px;
    background: var(--ub-surface);
    color: var(--ub-navy);
    border: 2px solid var(--ub-line-2);
    transition: all 160ms var(--ub-ease);
}
.uswag-builder .ub-step__num svg {
    width: 16px;
    height: 16px;
}
.uswag-builder .ub-step.is-current .ub-step__num {
    background: var(--ub-gold);
    border-color: var(--ub-gold);
    color: var(--ub-gold-ink);
    box-shadow: 0 0 0 5px rgba(245, 197, 24, 0.22);
}
.uswag-builder .ub-step.is-done .ub-step__num {
    background: var(--ub-navy);
    border-color: var(--ub-navy);
    color: #fff;
}
.uswag-builder .ub-step__text {
    display: grid;
    line-height: 1.15;
}
.uswag-builder .ub-step__label {
    font-family: var(--ub-font-display);
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ub-navy);
}
.uswag-builder .ub-step.is-current .ub-step__label {
    color: var(--ub-ink);
}
.uswag-builder .ub-step__hint {
    font-size: 12px;
    color: var(--ub-muted);
}
.uswag-builder .ub-stepper__aside {
    flex: 0 0 auto;
}
.uswag-builder .ub-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--ub-line-2);
    background: var(--ub-surface);
    color: var(--ub-navy);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 140ms var(--ub-ease), box-shadow 140ms var(--ub-ease);
}
.uswag-builder .ub-pill svg {
    width: 18px;
    height: 18px;
}
.uswag-builder .ub-pill:hover,
.uswag-builder .ub-pill.is-active {
    border-color: var(--ub-navy);
    box-shadow: var(--ub-shadow-1);
}
.uswag-builder .ub-pill.is-active {
    background: var(--ub-navy);
    color: #fff;
}
.uswag-builder .ub-pill__count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ub-gold);
    color: var(--ub-gold-ink);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* ------------------------------------------------------------------- stage */
.uswag-builder .ub-stage {
    display: grid;
    gap: 14px;
    animation: ub-fade 220ms var(--ub-ease);
}
.uswag-builder .ub-canvas {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(460px, calc(100vh - 350px), 760px);
    padding: 28px;
    border-radius: var(--ub-radius);
    background: radial-gradient(
        ellipse 70% 60% at 50% 38%,
        #ffffff 0%,
        #f6f7fb 55%,
        var(--ub-ground) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(21, 26, 45, 0.04);
}
.uswag-builder .ub-preview {
    position: relative;
    --ub-pv-h: clamp(400px, calc(100vh - 410px), 640px);
    width: min(100%, calc(var(--ub-pv-h) * 0.784));
    aspect-ratio: 588 / 750;
    border-radius: 14px;
    background: var(--ub-surface);
    box-shadow: var(--ub-shadow-2);
    overflow: hidden;
    transition: transform 240ms var(--ub-ease);
}
.uswag-builder .ub-preview__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 280ms var(--ub-ease);
}
.uswag-builder .ub-preview__img.is-outgoing {
    opacity: 0;
}
.uswag-builder .ub-preview.is-loading .ub-preview__img.is-current {
    opacity: 0.35;
}
.uswag-builder .ub-preview__skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0) 70%
    );
    background-size: 200% 100%;
    animation: ub-shimmer 1.1s linear infinite;
    pointer-events: none;
}
@keyframes ub-shimmer {
    from {
        background-position: 150% 0;
    }
    to {
        background-position: -50% 0;
    }
}
.uswag-builder .ub-preview__error {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--ub-radius-xs);
    background: var(--ub-danger-soft);
    color: var(--ub-danger);
    font-size: 13px;
}
.uswag-builder .ub-preview.is-fullbleed .ub-preview__img.is-current {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}
.uswag-builder .ub-preview__hint {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--ub-line-2);
    background: rgba(255, 255, 255, 0.95);
    color: var(--ub-navy);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--ub-shadow-1);
    white-space: nowrap;
}
.uswag-builder .ub-preview__hint svg {
    width: 16px;
    height: 16px;
}
.uswag-builder .ub-stage__under {
    display: flex;
    flex-wrap: wrap; /* canvas has two toggles (orientation + placement): wrap, never overflow */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 6px;
    min-height: 40px;
}
.uswag-builder .ub-stage__caption {
    white-space: nowrap;
    font-family: var(--ub-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
    color: var(--ub-muted);
}
.uswag-builder .ub-stage__mobile {
    display: none;
}
.uswag-builder .ub-stepper__help {
    display: none;
}
.uswag-builder .ub-preview__zoom {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ub-shadow-1);
}
/* design summary on the Details step */
.uswag-builder .ub-summary {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--ub-line-2);
    border-radius: var(--ub-radius);
    background: var(--ub-surface-2);
    display: grid;
    gap: 6px;
}
.uswag-builder .ub-summary__row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    font-size: 13.5px;
}
.uswag-builder .ub-summary dt {
    color: var(--ub-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    line-height: 1.7;
}
.uswag-builder .ub-summary dd {
    margin: 0;
    color: var(--ub-ink);
    overflow-wrap: anywhere;
}
.uswag-builder .ub-summary dd .ub-link {
    margin-left: 6px;
    font-size: 12.5px;
}
.uswag-builder .ub-zoom {
    display: grid;
    place-items: center;
    background: var(--ub-surface-2);
    border-radius: var(--ub-radius);
    padding: 8px;
}
.uswag-builder .ub-zoom__img {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
}
/* Touch hygiene. `touch-action: manipulation` drops Safari's double-tap delay so a tap fires the
   click at once; the thumbnails inside tiles, swatches and artwork buttons are not touch targets
   of their own (no image callout / drag on a long press — the button underneath gets the tap). */
.uswag-builder button,
.uswag-builder .ub-tile,
.uswag-builder .ub-tab {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.uswag-builder .ub-tile img,
.uswag-builder .ub-swatchbtn img,
.uswag-builder .ub-art__pick img,
.uswag-builder .ub-card__img {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
/* "Choose a product" on the empty intro: phones only (desktop shows the products tray already).
   14px above (the lede's 10px bottom margin + this button's own 4px top margin) with nothing
   below it — the fine print right after has no top margin of its own — collapsed that gap to 0.
   Mirror it: 14px below too, so the button sits centred between the two. */
.uswag-builder .ub-intro .ub-intro__cta {
    display: none;
    margin: 4px auto 14px;
}

/* empty stage */
/* The empty stage keeps ONE height whether it shows the intro or a product's hover hero. If the
   hero were taller, the page would grow under a cursor parked at the bottom of a scrolled page,
   the content would shift, and the cursor would land on a neighbouring tile — a hover feedback
   loop. So: fixed height, hero row shrinks/clips, intro block (title, points, CTA) keeps its size. */
@media (min-width: 901px) {
    .uswag-builder .ub-stage--empty {
        /* same floor as the tray (540px) so short windows scroll the columns together and the hero
           keeps a useful size instead of shrinking to make room for the product intro */
        height: clamp(540px, calc(100vh - 290px), 760px);
        grid-template-rows: minmax(0, 1fr) auto;
        overflow: hidden;
    }
    .uswag-builder .ub-stage--empty .ub-canvas {
        min-height: 0;
        overflow: hidden;
    }
    /* the hero (composite photo, blank photo or collage) is contained in the canvas box: absolute
       positioning makes its percentage limits resolve against the canvas whatever the grid does */
    .uswag-builder .ub-stage--empty .ub-canvas--hover > .ub-canvas__hero,
    .uswag-builder .ub-stage--empty .ub-canvas--hover > .ub-collage {
        position: absolute;
        inset: 16px;
        margin: auto;
        width: auto;
        height: auto;
        max-width: calc(100% - 32px);
        max-height: calc(100% - 32px);
    }
    .uswag-builder .ub-stage--empty .ub-canvas--hover > .ub-collage {
        height: calc(100% - 32px);
        max-height: 380px;
        max-width: none;
    }
}
.uswag-builder .ub-canvas--hover {
    grid-template-rows: 1fr;
}
.uswag-builder .ub-canvas__hero {
    max-height: 380px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(21, 26, 45, 0.18));
    animation: ub-rise 260ms var(--ub-ease);
}
/* blank product photos are tall; cap them so the copy beside them stays above the fold */
.uswag-builder .ub-canvas__hero--blank {
    max-height: 340px;
}

/* "set preview" collage — the hover / info hero for products without a marketing composite (render/heroSamples.js).
   Geometry and colours measured from the legacy composites (uswag-tumbler-info.png, 1032×848): navy #000a50 hexagon
   ≈74%×88% of the frame; three ≈19.5%-wide, near-square small hexagons filled #3b3f89 with a 3% #dddee3 outline at
   (61%,1%) (80%,49%) (42%,72%); product over the left half; italic Open Sans title in the open right half. */
.uswag-builder .ub-collage {
    position: relative;
    width: min(100%, 462px);
    aspect-ratio: 1032 / 848;
    max-height: 380px; /* = the composites at their 380px hero height */
    animation: ub-rise 260ms var(--ub-ease);
    --ub-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.uswag-builder .ub-collage__hex {
    position: absolute;
    left: 14%;
    top: 4%;
    width: 74%;
    height: 88%;
    background: #000a50;
    clip-path: var(--ub-hex);
}
.uswag-builder .ub-collage__hex span {
    position: absolute;
    /* the free navy band: right of the product (~52%), left of the mid-right tile (80%) */
    left: 52%;
    width: 28%;
    top: 49%;
    transform: translateY(-50%);
    font-family: var(--ub-font);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.1;
    color: #fff;
    text-align: center;
    text-wrap: balance;
}
@supports (container-type: inline-size) {
    .uswag-builder .ub-collage {
        container-type: inline-size;
    }
    .uswag-builder .ub-collage__hex span {
        font-size: clamp(15px, 7cqw, 26px);
    }
    .uswag-builder .ub-collage__hex span.is-narrow {
        font-size: clamp(13px, 6cqw, 22px);
    }
}
/* a narrow band (wide product photo) gets a slightly smaller title so words still fit */
.uswag-builder .ub-collage__hex span.is-narrow {
    font-size: 19px;
}
/* measured across five composites: the product spans x 1%→~52% and y ~6%→~94% of the frame, centred in that area */
.uswag-builder .ub-collage__main {
    position: absolute;
    left: 1%;
    top: 6%;
    height: 88%;
    width: 52%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 18px 22px rgba(21, 26, 45, 0.3));
}
/* outline = the tile's own background; the fill is an inset pseudo-element clipped to the same hexagon */
.uswag-builder .ub-collage__tile {
    position: absolute;
    width: 19.5%;
    aspect-ratio: 0.95;
    background: #dddee3;
    --ub-hex-tile: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
    clip-path: var(--ub-hex-tile);
    display: grid;
    place-items: center;
}
.uswag-builder .ub-collage__tile::before {
    content: '';
    position: absolute;
    inset: 3%;
    background: #3b3f89;
    clip-path: var(--ub-hex-tile);
}
/* absolutely positioned so the image's natural (tall) proportions cannot stretch the aspect-ratio box */
.uswag-builder .ub-collage__tile img {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
.uswag-builder .ub-collage__tile--1 {
    left: 61%;
    top: 1%;
}
.uswag-builder .ub-collage__tile--2 {
    left: 80%;
    top: 49%;
}
.uswag-builder .ub-collage__tile--3 {
    left: 41.5%;
    top: 71.5%;
}
.uswag-builder .ub-modal__hero {
    display: grid;
    place-items: center;
    margin-bottom: 12px;
}
.uswag-builder .ub-modal__hero .ub-collage {
    width: 320px;
    max-height: none;
}
.uswag-builder .ub-modal__hero .ub-collage__hex span {
    font-size: 13px;
}
.uswag-builder .ub-modal__hero .ub-canvas__hero {
    max-height: 220px;
}
.uswag-builder .ub-intro {
    max-width: 520px;
    text-align: center;
}
.uswag-builder .ub-intro__title {
    font-size: 44px;
    line-height: 1;
    color: var(--ub-navy);
    margin-bottom: 12px;
    text-wrap: balance;
}
.uswag-builder .ub-intro__lede {
    font-size: 17px;
    color: var(--ub-ink-2);
    max-width: 46ch;
    margin: 0 auto 10px;
}
.uswag-builder .ub-intro--product {
    text-align: left;
    max-width: none;
    padding: 0 8px;
}
.uswag-builder .ub-intro--product .ub-intro__title {
    font-size: 26px;
    margin-bottom: 8px;
}
/* The hover card is a teaser: the product photo is the point, so the copy takes the SAME compact
   height for every product — eyebrow + title on the left, the CTA on the right, then two columns of
   one-line points (at most four; the ⓘ dialog carries the full text). Every hero image therefore
   gets the same room, however long the description. */
.uswag-builder .ub-intro--product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'eyebrow cta'
        'title cta'
        'list list';
    align-items: center;
    column-gap: 16px;
}
.uswag-builder .ub-intro--product .ub-eyebrow {
    grid-area: eyebrow;
    margin: 0;
}
.uswag-builder .ub-intro--product .ub-intro__title {
    grid-area: title;
    margin: 0;
}
.uswag-builder .ub-intro--product .ub-btn {
    grid-area: cta;
    justify-self: end;
}
.uswag-builder .ub-intro--product .ub-intro__list {
    grid-area: list;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 18px;
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.35;
}
.uswag-builder .ub-intro--product .ub-intro__list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uswag-builder .ub-intro--product .ub-intro__list li:nth-child(n + 5) {
    display: none;
}
.uswag-builder .ub-intro--product .ub-intro__list li::before {
    top: 7px;
}
.uswag-builder .ub-intro__list {
    display: grid;
    gap: 6px;
    margin: 0 0 18px;
    color: var(--ub-ink-2);
}
.uswag-builder .ub-intro__list li {
    padding-left: 16px;
    position: relative;
}
.uswag-builder .ub-intro__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ub-gold-2);
}

/* -------------------------------------------------------------------- tray */
.uswag-builder .ub-tray__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    /* neutralise the shared site rules for header-ish blocks (they added ~30px on phones) */
    padding: 0;
    min-height: 0;
    height: auto;
    background: none;
    border: 0;
}
.uswag-builder .ub-tray__title {
    font-size: 26px;
    color: var(--ub-navy);
}
.uswag-builder .ub-tray__sub {
    font-size: 13.5px;
    color: var(--ub-ink-2);
    margin: 4px 0 0;
}
.uswag-builder .ub-tray__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 18px;
}
.uswag-builder .ub-section {
    margin-top: 20px;
}
/* the browse block right after the upload row: one rhythm step, not two */
.uswag-builder .ub-tray__actions + .ub-section {
    margin-top: 6px;
}
/* next-step footer at the end of every design tray */
.uswag-builder .ub-tray__next {
    margin: 22px 0 4px;
    padding-top: 14px;
    border-top: 1px solid var(--ub-line-2);
    display: flex;
    justify-content: flex-end;
}
.uswag-builder .ub-tray__next svg {
    transform: rotate(-90deg);
}
.uswag-builder .ub-tray__next--details {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.uswag-builder .ub-btn--back svg {
    transform: rotate(90deg);
}
.uswag-builder .ub-artgrid__more {
    display: flex;
    justify-content: center;
    margin: 14px 0 4px;
}
.uswag-builder .ub-artgrid__more small {
    color: var(--ub-muted);
    font-weight: 500;
}
.uswag-builder .ub-section__title {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--ub-ink-2);
    margin-bottom: 10px;
}
.uswag-builder .ub-section__meta {
    font-size: 13px;
    color: var(--ub-muted);
    margin: 8px 0;
}

/* design sub-nav (pills) */
/* Pinned to the top of the card's scroll area so the Design tabs never scroll away. */
.uswag-builder .ub-subnav {
    position: sticky;
    top: -22px;
    z-index: 2;
    display: flex;
    gap: 6px;
    padding: 4px;
    margin: -8px 0 18px;
    border-radius: 999px;
    background: var(--ub-surface-2);
    box-shadow: 0 0 0 8px var(--ub-surface);
    overflow-x: auto;
}
/* Text-only pills: with four tabs ("Background" being the long one) the icons pushed the strip into a
   horizontal scroll and clipped the last label — the very tab customers were missing. */
.uswag-builder .ub-subnav__tab {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ub-ink-2);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 140ms var(--ub-ease), color 140ms var(--ub-ease),
        box-shadow 140ms var(--ub-ease);
}
.uswag-builder .ub-subnav__tab svg {
    display: none;
}
.uswag-builder .ub-subnav__tab:hover {
    color: var(--ub-navy);
}
.uswag-builder .ub-subnav__tab.is-active {
    background: var(--ub-surface);
    color: var(--ub-navy);
    box-shadow: var(--ub-shadow-1);
}

/* buttons */
.uswag-builder .ub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 80ms ease, background 140ms var(--ub-ease),
        box-shadow 140ms var(--ub-ease), border-color 140ms var(--ub-ease);
    white-space: nowrap;
}
.uswag-builder .ub-btn svg {
    width: 18px;
    height: 18px;
}
.uswag-builder .ub-btn:active:not(:disabled) {
    transform: translateY(1px);
}
.uswag-builder .ub-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.uswag-builder .ub-btn--gold {
    background: var(--ub-gold);
    color: var(--ub-gold-ink);
    box-shadow: 0 6px 16px -8px rgba(224, 174, 10, 0.8);
}
.uswag-builder .ub-btn--gold:hover:not(:disabled) {
    background: var(--ub-gold-2);
    box-shadow: 0 8px 20px -8px rgba(224, 174, 10, 0.9);
}
.uswag-builder .ub-btn--busy:disabled {
    /* visibly greyed while the request is in flight so it reads as "don't click me again", without
       giving up the gold identity — grayscale over the gold rather than swapping to an actual grey */
    opacity: 0.55;
    filter: grayscale(0.4);
    cursor: progress;
}
.uswag-builder .ub-spinner--btn {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: rgba(26, 26, 26, 0.25);
    border-top-color: var(--ub-gold-ink);
}
.uswag-builder .ub-btn--navy {
    background: var(--ub-navy);
    color: #fff;
}
.uswag-builder .ub-btn--navy:hover:not(:disabled) {
    background: var(--ub-navy-2);
}
.uswag-builder .ub-btn--outline {
    background: var(--ub-surface);
    color: var(--ub-navy);
    border-color: var(--ub-line-2);
}
.uswag-builder .ub-btn--outline:hover:not(:disabled) {
    border-color: var(--ub-navy);
}
.uswag-builder .ub-btn--ghost {
    background: transparent;
    color: var(--ub-ink-2);
}
.uswag-builder .ub-btn--ghost:hover:not(:disabled) {
    background: var(--ub-surface-2);
    color: var(--ub-ink);
}
.uswag-builder .ub-btn--danger {
    background: var(--ub-danger);
    color: #fff;
}
.uswag-builder .ub-btn--lg {
    min-height: 50px;
    padding: 0 26px;
    font-size: 15px;
}
.uswag-builder .ub-iconbtn {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ub-ink-2);
    cursor: pointer;
}
.uswag-builder .ub-iconbtn:hover {
    background: var(--ub-surface-2);
    color: var(--ub-ink);
}
.uswag-builder .ub-iconbtn.is-danger:hover {
    background: var(--ub-danger-soft);
    color: var(--ub-danger);
}
.uswag-builder .ub-iconbtn svg {
    width: 18px;
    height: 18px;
}

/* product tiles */
.uswag-builder .ub-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.uswag-builder .ub-tiles > li {
    position: relative;
}
.uswag-builder .ub-tile {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 16px 10px 12px;
    border-radius: var(--ub-radius-sm);
    border: 1px solid var(--ub-line);
    background: var(--ub-surface-2);
    cursor: pointer;
    position: relative;
    transition: transform 160ms var(--ub-ease), box-shadow 160ms var(--ub-ease),
        border-color 160ms var(--ub-ease), background 160ms var(--ub-ease);
}
.uswag-builder .ub-tile img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    transition: transform 200ms var(--ub-ease);
}
.uswag-builder .ub-tile__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ub-ink);
    text-align: center;
}
.uswag-builder .ub-tile:hover {
    background: var(--ub-surface);
    border-color: var(--ub-line-2);
    box-shadow: var(--ub-shadow-2);
    transform: translateY(-2px);
}
.uswag-builder .ub-tile:hover img {
    transform: scale(1.06);
}
.uswag-builder .ub-tile.is-active {
    background: var(--ub-surface);
    border-color: var(--ub-gold);
    box-shadow: 0 0 0 2px var(--ub-gold) inset, var(--ub-shadow-1);
}
.uswag-builder .ub-tile__count {
    position: absolute;
    top: 8px;
    left: 8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--ub-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.uswag-builder .ub-tile__info {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ub-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.uswag-builder .ub-tile__info:hover {
    color: var(--ub-navy);
    background: var(--ub-surface-2);
}
.uswag-builder .ub-tile__info svg {
    width: 16px;
    height: 16px;
}

/* cards (racks, saved items) */
.uswag-builder .ub-cards {
    display: grid;
    gap: 10px;
}
.uswag-builder .ub-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-areas: 'img body' 'img actions';
    gap: 4px 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--ub-line);
    border-radius: var(--ub-radius-sm);
    background: var(--ub-surface);
    transition: box-shadow 160ms var(--ub-ease);
}
.uswag-builder .ub-card:hover {
    box-shadow: var(--ub-shadow-1);
}
.uswag-builder .ub-card.is-active {
    border-color: var(--ub-gold);
    box-shadow: 0 0 0 2px var(--ub-gold) inset;
}
.uswag-builder .ub-card__img {
    grid-area: img;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--ub-radius-xs);
    background: var(--ub-surface-2);
}
.uswag-builder .ub-card__body {
    grid-area: body;
    display: grid;
    gap: 2px;
    min-width: 0;
}
.uswag-builder .ub-card__body strong {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uswag-builder .ub-card__body small {
    font-size: 12px;
    color: var(--ub-muted);
}
.uswag-builder .ub-card > .ub-btn,
.uswag-builder .ub-card__actions {
    grid-area: actions;
    justify-self: start;
}
.uswag-builder .ub-card__actions {
    display: flex;
    gap: 4px;
}
.uswag-builder .ub-card--cta {
    grid-template-columns: 1fr;
    grid-template-areas: 'body' 'actions';
    background: var(--ub-navy-soft);
    border-style: dashed;
}

/* artwork */
.uswag-builder .ub-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.uswag-builder .ub-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 44px;
    border: 1px solid var(--ub-line-2);
    border-radius: 999px;
    background: var(--ub-surface);
    color: var(--ub-muted);
    transition: border-color 140ms var(--ub-ease), box-shadow 140ms var(--ub-ease);
}
.uswag-builder .ub-search__field:focus-within {
    border-color: var(--ub-navy);
    color: var(--ub-navy);
    box-shadow: 0 0 0 3px rgba(26, 34, 88, 0.1);
}
.uswag-builder .ub-search__field svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.uswag-builder .ub-search__field input {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    min-width: 0;
    /* the site's global input rules add padding/margin that push the text off-centre */
    margin: 0;
    padding: 0;
    height: 100%;
    line-height: normal;
    font: inherit;
    color: var(--ub-ink);
}
.uswag-builder .ub-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 44px;
}
.uswag-builder .ub-select select {
    height: 44px;
    padding: 0 36px 0 16px;
    border: 1px solid var(--ub-line-2);
    border-radius: 999px;
    background: var(--ub-surface);
    font: inherit;
    font-weight: 600;
    color: var(--ub-navy);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    max-width: 160px;
}
.uswag-builder .ub-select svg {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--ub-navy);
}
.uswag-builder .ub-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ub-navy-soft);
    color: var(--ub-navy);
    font-size: 13px;
}
.uswag-builder .ub-note--text {
    margin-top: 4px;
}
.uswag-builder .ub-note--attention {
    background: #fff4d6;
    color: #5a4300;
    border: 1px solid var(--ub-gold);
}
.uswag-builder .ub-btn--pulse {
    box-shadow: 0 0 0 0 rgba(242, 178, 0, 0.55);
    animation: ub-pulse 1.6s ease-out 2;
}
@keyframes ub-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(242, 178, 0, 0.55);
    }
    100% {
        box-shadow: 0 0 0 12px rgba(242, 178, 0, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .uswag-builder .ub-btn--pulse {
        animation: none;
    }
}

/* category multi-select (artwork) */
.uswag-builder .ub-multiselect {
    position: relative;
}
.uswag-builder .ub-multiselect__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    max-width: 200px;
    padding: 0 12px 0 16px;
    border: 1px solid var(--ub-line-2);
    border-radius: 999px;
    background: var(--ub-surface);
    font: inherit;
    font-weight: 600;
    color: var(--ub-navy);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 140ms var(--ub-ease), box-shadow 140ms var(--ub-ease);
}
.uswag-builder .ub-multiselect__btn > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.uswag-builder .ub-multiselect__btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 140ms var(--ub-ease);
}
.uswag-builder .ub-multiselect__btn:hover,
.uswag-builder .ub-multiselect.is-open .ub-multiselect__btn {
    border-color: var(--ub-navy);
    box-shadow: 0 0 0 3px rgba(26, 34, 88, 0.1);
}
.uswag-builder .ub-multiselect.is-open .ub-multiselect__btn svg {
    transform: rotate(180deg);
}
.uswag-builder .ub-multiselect__count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--ub-gold);
    color: var(--ub-gold-ink);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.uswag-builder .ub-multiselect__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5;
    width: min(340px, calc(100vw - 32px));
    max-height: 360px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--ub-line-2);
    border-radius: var(--ub-radius-sm);
    background: var(--ub-surface);
    box-shadow: var(--ub-shadow-2);
}
.uswag-builder .ub-multiselect__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 8px;
    font-size: 13px;
}
.uswag-builder .ub-multiselect__head .ub-link[disabled] {
    color: var(--ub-muted);
    text-decoration: none;
    cursor: default;
}
.uswag-builder .ub-multiselect__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.uswag-builder .ub-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ub-ink);
}
.uswag-builder .ub-check:hover {
    background: var(--ub-surface-2);
}
/* shop.min.css hides every checkbox/radio input (opacity 0, width 0, absolute) unless it has .visible-checkbox;
   the markup adds that class and this rule restores a real, clickable box inside the builder. */
.uswag-builder .ub-check input[type='checkbox'] {
    position: static;
    opacity: 1;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--ub-navy);
    cursor: pointer;
}
.uswag-builder .ub-check span {
    flex: 1;
}
.uswag-builder .ub-check small {
    color: var(--ub-muted);
    font-variant-numeric: tabular-nums;
}

/* stage meta: product caption + background chip */
.uswag-builder .ub-stage__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.uswag-builder .ub-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    height: 34px;
    padding: 0 12px 0 6px;
    border: 1px solid var(--ub-line-2);
    border-radius: 999px;
    background: var(--ub-surface);
    color: var(--ub-ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 140ms var(--ub-ease), box-shadow 140ms var(--ub-ease);
}
.uswag-builder .ub-chip:hover {
    border-color: var(--ub-navy);
    box-shadow: var(--ub-shadow-1);
}
.uswag-builder .ub-chip__swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--ub-line);
    background: var(--ub-surface-2) center / cover no-repeat;
}
.uswag-builder .ub-chip strong {
    font-weight: 600;
    text-transform: capitalize;
}
.uswag-builder .ub-chip em {
    font-style: normal;
    color: var(--ub-navy-3);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.uswag-builder .ub-tray__actions--footer {
    margin-top: 18px;
    align-items: center;
}
.uswag-builder .ub-artgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.uswag-builder .ub-artgrid--compact {
    grid-template-columns: repeat(5, 1fr);
}
.uswag-builder .ub-art {
    position: relative;
}
.uswag-builder .ub-art__pick {
    width: 100%;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--ub-line);
    border-radius: var(--ub-radius-sm);
    background: var(--ub-surface);
    cursor: pointer;
    text-align: center;
    transition: border-color 140ms var(--ub-ease), box-shadow 140ms var(--ub-ease),
        transform 140ms var(--ub-ease);
}
.uswag-builder .ub-art__pick img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 6px;
    background: repeating-conic-gradient(#c9cfdb 0 25%, #e9ecf2 0 50%) 0 0 / 12px 12px;
}
.uswag-builder .ub-art--dark .ub-art__pick img {
    background: repeating-conic-gradient(#3d4456 0 25%, #4c546a 0 50%) 0 0 / 12px 12px;
}
.uswag-builder .ub-art--mid .ub-art__pick img {
    background: repeating-conic-gradient(#8d95a8 0 25%, #a3aabb 0 50%) 0 0 / 12px 12px;
} /* checkerboard: white artwork (e.g. "…White" graphics) stays visible on the tile */
.uswag-builder .ub-art__title {
    font-size: 11px;
    line-height: 1.3;
    color: var(--ub-ink-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.uswag-builder .ub-artgrid--compact .ub-art__title {
    display: none;
}
.uswag-builder .ub-art__pick:hover {
    border-color: var(--ub-line-2);
    box-shadow: var(--ub-shadow-1);
    transform: translateY(-1px);
}
.uswag-builder .ub-art.is-active .ub-art__pick {
    border-color: var(--ub-gold);
    box-shadow: 0 0 0 2px var(--ub-gold) inset;
}
.uswag-builder .ub-art__check {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ub-gold);
    color: var(--ub-gold-ink);
    display: grid;
    place-items: center;
}
.uswag-builder .ub-art__check svg {
    width: 14px;
    height: 14px;
}
.uswag-builder .ub-art__delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--ub-line-2);
    background: var(--ub-surface);
    color: var(--ub-ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease;
}
.uswag-builder .ub-art__delete svg {
    width: 12px;
    height: 12px;
}
.uswag-builder .ub-art:hover .ub-art__delete,
.uswag-builder .ub-art__delete:focus-visible {
    opacity: 1;
}

/* upload */
.uswag-builder .ub-drop {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 36px 16px;
    border: 2px dashed var(--ub-line-2);
    border-radius: var(--ub-radius-sm);
    background: var(--ub-surface-2);
    color: var(--ub-ink-2);
    text-align: center;
    cursor: pointer;
    transition: border-color 140ms var(--ub-ease), background 140ms var(--ub-ease);
}
.uswag-builder .ub-drop svg {
    width: 28px;
    height: 28px;
    color: var(--ub-navy);
}
.uswag-builder .ub-drop small {
    color: var(--ub-muted);
}
.uswag-builder .ub-drop:hover,
.uswag-builder .ub-drop.is-over {
    border-color: var(--ub-navy);
    background: var(--ub-navy-soft);
}

/* fields */
.uswag-builder .ub-field {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
    position: relative;
}
.uswag-builder .ub-field__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ub-ink-2);
}
.uswag-builder .ub-field__label em {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ub-muted);
}
.uswag-builder .ub-field input[type='text'],
.uswag-builder .ub-field input[type='search'] {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--ub-line-2);
    border-radius: var(--ub-radius-sm);
    font: inherit;
    color: var(--ub-ink);
    background: var(--ub-surface);
    width: 100%;
    transition: border-color 140ms var(--ub-ease), box-shadow 140ms var(--ub-ease);
}
.uswag-builder .ub-field input:focus {
    border-color: var(--ub-navy);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(26, 34, 88, 0.12);
}
.uswag-builder .ub-field__count {
    position: absolute;
    right: 12px;
    bottom: 13px;
    font-size: 11px;
    color: var(--ub-muted);
    font-variant-numeric: tabular-nums;
}
.uswag-builder .ub-field--inline {
    margin: 0;
    min-width: 220px;
    flex: 1 1 220px;
}

/* segmented control */
.uswag-builder .ub-seg {
    border: 0;
    padding: 4px;
    margin: 0;
    display: inline-flex;
    gap: 2px;
    border-radius: 999px;
    background: var(--ub-surface-2);
}
.uswag-builder .ub-seg legend {
    margin-bottom: 6px;
}
.uswag-builder .ub-seg__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.uswag-builder .ub-seg__opt span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--ub-ink-2);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 140ms var(--ub-ease), color 140ms var(--ub-ease),
        box-shadow 140ms var(--ub-ease);
}
.uswag-builder .ub-seg__opt input:checked + span {
    background: var(--ub-navy);
    color: #fff;
    box-shadow: var(--ub-shadow-1);
}
/* the unselected half reads as a choice: tint + lift on hover — mouse only. On iOS the first tap
   would otherwise paint the hover state (white pill) before the change lands, which read as
   "I have to tap twice". */
@media (hover: hover) {
    .uswag-builder .ub-seg__opt input:not(:checked) + span:hover {
        background: var(--ub-surface);
        color: var(--ub-navy);
        box-shadow: var(--ub-shadow-1);
    }
}
.uswag-builder .ub-seg__opt span {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* inside a stacked field the control hugs its options instead of stretching to the grid track */
.uswag-builder .ub-field .ub-seg {
    justify-self: start;
}
.uswag-builder .ub-seg__opt input:focus-visible + span {
    outline: 3px solid var(--ub-gold);
    outline-offset: 2px;
}
.uswag-builder .ub-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--ub-line-2);
    display: inline-block;
}
.uswag-builder .ub-swatch--black {
    background: #000;
}
.uswag-builder .ub-swatch--white {
    background: #fff;
}

/* colour swatches */
.uswag-builder .ub-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.uswag-builder .ub-swatchbtn {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 6px 8px;
    border: 1px solid var(--ub-line);
    border-radius: var(--ub-radius-sm);
    background: var(--ub-surface);
    cursor: pointer;
    transition: border-color 140ms var(--ub-ease), box-shadow 140ms var(--ub-ease),
        transform 140ms var(--ub-ease);
}
.uswag-builder .ub-swatchbtn img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(21, 26, 45, 0.08);
}
.uswag-builder .ub-swatchbtn span {
    font-size: 11.5px;
    color: var(--ub-ink-2);
    text-transform: capitalize;
}
.uswag-builder .ub-swatchbtn:hover {
    border-color: var(--ub-line-2);
    box-shadow: var(--ub-shadow-1);
    transform: translateY(-1px);
}
.uswag-builder .ub-swatchbtn.is-active {
    border-color: var(--ub-gold);
    box-shadow: 0 0 0 2px var(--ub-gold) inset;
}

/* designs strip */
.uswag-builder .ub-designs {
    margin-top: 0;
}
.uswag-builder .ub-designs__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 2px 10px;
    scroll-snap-type: x proximity;
}
.uswag-builder .ub-designs__item {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.uswag-builder .ub-designs__pick {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 104px;
    padding: 8px;
    border: 1px solid var(--ub-line);
    border-radius: var(--ub-radius-sm);
    background: var(--ub-surface);
    cursor: pointer;
    font-size: 12px;
    color: var(--ub-ink-2);
    transition: box-shadow 140ms var(--ub-ease), border-color 140ms var(--ub-ease);
}
.uswag-builder .ub-designs__pick:hover {
    box-shadow: var(--ub-shadow-1);
}
.uswag-builder .ub-designs__pick img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}
.uswag-builder .ub-designs__pick span {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uswag-builder .ub-designs__item.is-active .ub-designs__pick {
    border-color: var(--ub-gold);
    box-shadow: 0 0 0 2px var(--ub-gold) inset;
    color: var(--ub-ink);
}
.uswag-builder .ub-designs__item .ub-iconbtn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: var(--ub-surface);
    border: 1px solid var(--ub-line-2);
    opacity: 0;
    transition: opacity 120ms ease;
}
.uswag-builder .ub-designs__item:hover .ub-iconbtn,
.uswag-builder .ub-designs__item .ub-iconbtn:focus-visible {
    opacity: 1;
}
.uswag-builder .ub-designs__item--new {
    display: flex;
    gap: 6px;
}
.uswag-builder .ub-designs__item--new .ub-designs__pick {
    width: 80px;
    border-style: dashed;
    background: var(--ub-surface-2);
}
.uswag-builder .ub-designs__item--new .ub-designs__pick svg {
    width: 20px;
    height: 20px;
    color: var(--ub-navy);
}

/* --------------------------------------------------------------- action bar */
.uswag-builder .ub-actionbar {
    display: grid;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--ub-line);
    background: var(--ub-surface);
    box-shadow: 0 -10px 24px -18px rgba(21, 26, 45, 0.35);
    animation: ub-rise 220ms var(--ub-ease);
}
.uswag-builder .ub-actionbar__info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    line-height: 1.2;
}
.uswag-builder .ub-actionbar__title {
    font-family: var(--ub-font-display);
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ub-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uswag-builder .ub-actionbar__meta {
    font-size: 12px;
    color: var(--ub-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.uswag-builder .ub-actionbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* the basket button takes the rest of the row, or a full row of its own when the card is narrow */
.uswag-builder .ub-actionbar__actions .ub-btn--lg {
    flex: 1 1 200px;
}
.uswag-builder .ub-actionbar__next svg {
    transform: rotate(-90deg);
}

/* ------------------------------------------------------------------ modals */
.uswag-builder .ub-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(21, 26, 45, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    padding: 16px;
    animation: ub-fade 140ms ease;
}
.uswag-builder .ub-modal {
    width: min(100%, 480px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--ub-surface);
    border-radius: var(--ub-radius);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
    color: var(--ub-ink);
    animation: ub-rise 200ms var(--ub-ease);
}
.uswag-builder .ub-modal--wide {
    width: min(100%, 720px);
}
.uswag-builder .ub-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 22px 0;
}
.uswag-builder .ub-modal__head h2 {
    font-size: 22px;
    color: var(--ub-navy);
}
.uswag-builder .ub-modal__body {
    padding: 14px 22px 22px;
}
.uswag-builder .ub-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.uswag-builder .ub-modal__img {
    max-height: 220px;
    width: auto;
    margin: 0 auto 12px;
    object-fit: contain;
}
.uswag-builder .ub-upsell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.uswag-builder .ub-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 320px;
    overflow: auto;
    padding-right: 2px;
}
.uswag-builder .ub-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--ub-line);
    border-radius: var(--ub-radius-xs);
    background: var(--ub-surface);
    cursor: pointer;
    text-align: left;
    font-size: 12.5px;
}
.uswag-builder .ub-option img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: 0 0 auto;
}
.uswag-builder .ub-option.is-active {
    border-color: var(--ub-gold);
    box-shadow: 0 0 0 2px var(--ub-gold) inset;
}

/* ----------------------------------------------------------------- cropper */
.uswag-builder .ub-cropper {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: #0f1220;
    color: #fff;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.uswag-builder .ub-cropper__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--ub-navy);
}
.uswag-builder .ub-cropper__title {
    font-family: var(--ub-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 18px;
}
.uswag-builder .ub-cropper__actions {
    display: flex;
    gap: 8px;
}
.uswag-builder .ub-cropper__actions .ub-btn--ghost {
    color: #fff;
}
.uswag-builder .ub-cropper__stage {
    min-height: 0;
    padding: 12px;
}
.uswag-builder .ub-cropper__stage img {
    max-width: 100%;
    max-height: 100%;
}
.uswag-builder .ub-cropper__tools {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--ub-navy);
}
.uswag-builder .ub-tool {
    width: 44px;
    height: 44px;
    border-radius: var(--ub-radius-xs);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.uswag-builder .ub-tool:hover {
    background: rgba(255, 255, 255, 0.14);
}
.uswag-builder .ub-tool svg {
    width: 20px;
    height: 20px;
}

/* -------------------------------------------------------------- toast/busy */
.uswag-builder .ub-toasts {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    z-index: 1200;
    pointer-events: none;
}
.uswag-builder .ub-toast {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ub-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--ub-shadow-2);
    animation: ub-rise 180ms var(--ub-ease);
}
.uswag-builder .ub-toast--error {
    background: var(--ub-danger);
}
.uswag-builder .ub-toast--success {
    background: var(--ub-ok);
}
.uswag-builder .ub-busy {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(21, 26, 45, 0.45);
    display: grid;
    place-items: center;
}
.uswag-builder .ub-busy__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--ub-radius);
    background: var(--ub-surface);
    color: var(--ub-ink);
    font-weight: 600;
    box-shadow: var(--ub-shadow-2);
}
.uswag-builder .ub-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--ub-line-2);
    border-top-color: var(--ub-navy);
    animation: ub-spin 0.8s linear infinite;
}

@keyframes ub-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes ub-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes ub-rise {
    from {
        transform: translateY(8px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

/* Desktop: no sheet handle, no tab bar. */
.uswag-builder .ub-sheet__handle {
    display: none;
}
.uswag-builder .ub-layout__tabs {
    display: none;
}

@media (max-width: 1100px) {
    .uswag-builder {
        --ub-tray-w: 340px;
    }
    /* placement toggle + background chip wrap onto two rows instead of squeezing their labels */
    .uswag-builder .ub-stage__under {
        flex-wrap: wrap;
    }
    .uswag-builder .ub-artgrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .uswag-builder .ub-swatches {
        grid-template-columns: repeat(3, 1fr);
    }
    .uswag-builder .ub-step__hint {
        display: none;
    }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 900px) {
    .uswag-builder {
        --ub-tabs-h: 64px;
        --ub-sheet-h: 52vh;
        --ub-header-h: 60px;
        /* the expanded sheet stops short of the top: the sticky step bar stays visible and the
           handle sits well below the status bar / notification shade */
        --ub-sheet-h-expanded: calc(100vh - var(--ub-tabs-h) - 12px);
        /* peek: the handle and the design tabs stay in reach while the whole preview is in view */
        --ub-sheet-h-peek: 128px;
        /* fill the first screen so the site footer starts below the fold, not under the intro
           (the dvh version lives in its own @supports block: the minifier drops a duplicated
           property, so a plain fallback pair would leave only the dvh line) */
        min-height: calc(100vh - var(--ub-header-h));
    }
    @supports (height: 100dvh) {
        .uswag-builder {
            min-height: calc(100dvh - var(--ub-header-h));
            --ub-sheet-h-expanded: calc(100dvh - var(--ub-tabs-h) - 12px);
        }
    }
    /* phone inputs at 16px: anything smaller makes iOS and Android zoom the page on focus
       (selectors match the desktop rules' specificity so they win) */
    .uswag-builder .ub-field input[type='text'],
    .uswag-builder .ub-field input[type='search'],
    .uswag-builder .ub-search__field input,
    .uswag-builder .ub-tray input[type='text'],
    .uswag-builder .ub-modal input[type='text'],
    .uswag-builder .ub-stage__mobile input[type='text'],
    .uswag-builder textarea,
    .uswag-builder select {
        font-size: 16px;
    }
    /* the 1 · 2 · 3 bar stays put and above the sheet, so the way back is always on screen. Sticks
       just below the site header (also sticky, top: 0) rather than at top: 0 itself — both pinned
       to the same spot would have the stepper (explicit z-index) painting over the header. */
    .uswag-builder .ub-layout__stepper {
        position: sticky;
        top: var(--ub-header-h, 60px);
        z-index: 860;
        background: var(--ub-bg, #f3f4f9);
        margin: 0 -12px;
        padding: 0 12px 6px;
    }
    /* two fixed rows: steps + designs pill, then the one-line help — never taller than ~80px */
    .uswag-builder .ub-stepper {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'steps aside'
            'help help';
        align-items: center;
        column-gap: 8px;
        row-gap: 2px;
    }
    .uswag-builder .ub-steps {
        grid-area: steps;
        min-width: 0;
    }
    .uswag-builder .ub-stepper__aside {
        grid-area: aside;
    }
    .uswag-builder .ub-stepper__help {
        display: block;
        grid-area: help;
        margin: 0;
        font-size: 11px;
        line-height: 1.25;
        color: var(--ub-muted);
    }
    .uswag-builder .ub-intro .ub-intro__cta {
        display: inline-flex;
    }
    .uswag-builder .ub-layout {
        grid-template-columns: 1fr;
        grid-template-areas: 'stepper' 'stage';
        min-height: auto;
        padding: 0 12px calc(var(--ub-tabs-h) + 16px);
        gap: 8px;
    }
    .uswag-builder .ub-layout__actionbar {
        display: none;
    }
    .uswag-builder .ub-subnav {
        position: static;
        margin: 0 0 14px;
        box-shadow: none;
    }

    /* compact stepper: numbers only, no hints */
    .uswag-builder .ub-stepper {
        padding: 10px 0 0;
        gap: 8px;
    }
    .uswag-builder .ub-step__line {
        width: 16px;
    }
    .uswag-builder .ub-step__btn {
        gap: 8px;
        padding: 4px 8px 4px 4px;
    }
    .uswag-builder .ub-step__num {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .uswag-builder .ub-step__label {
        font-size: 14px;
    }
    .uswag-builder .ub-step__hint {
        display: none;
    }
    .uswag-builder .ub-pill {
        height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }
    .uswag-builder .ub-pill span {
        display: none;
    }

    /* stage: the preview must stay visible above the sheet */
    .uswag-builder .ub-stage {
        gap: 10px;
    }
    .uswag-builder .ub-canvas {
        min-height: 0;
        padding: 14px;
    }
    .uswag-builder .ub-stage--empty .ub-canvas {
        min-height: 0;
        padding: 22px 16px;
    }
    .uswag-builder .ub-preview {
        /* sheet closed or at peek: the room between the sticky step bar (74 + 8 scroll offset + 14
           canvas padding) and the peeking sheet — the product shows large */
        --ub-pv-h: clamp(
            140px,
            calc(100vh - var(--ub-tabs-h) - var(--ub-sheet-h-peek, 128px) - 110px),
            420px
        );
        /* showProduct() scrolls the preview to the top: stop short of the sticky step bar */
        scroll-margin-top: 84px;
        width: calc(var(--ub-pv-h) * 0.784);
        max-width: 100%;
        max-height: none;
    }
    /* sheet at half or expanded: exactly the room above the half-open sheet */
    .uswag-builder.is-sheet-open:not(.is-sheet-peek) .ub-preview {
        --ub-pv-h: clamp(140px, calc(100vh - var(--ub-tabs-h) - var(--ub-sheet-h) - 110px), 260px);
    }
    .uswag-builder .ub-preview__hint {
        bottom: 8px;
    }
    .uswag-builder .ub-stage__under {
        padding: 0 2px;
    }
    .uswag-builder .ub-stage__caption {
        display: none;
    }
    .uswag-builder .ub-stage__under {
        flex-wrap: wrap;
    }
    .uswag-builder .ub-stage__meta {
        margin-left: 0;
    }
    .uswag-builder .ub-multiselect__btn {
        max-width: none;
        width: 100%;
        justify-content: space-between;
    }
    .uswag-builder .ub-multiselect__menu {
        position: static;
        width: auto;
        max-height: none;
        margin-top: 8px;
        box-shadow: none;
    }
    .uswag-builder .ub-stage__mobile {
        display: grid;
        gap: 12px;
    }
    /* Grid items default to min-width:auto (= their min-content), so a wide child — the designs
       strip's row of cards, a long input — can push the column past the viewport (seen at 430px).
       Let them shrink; the strip scrolls sideways inside itself. */
    .uswag-builder .ub-layout > *,
    .uswag-builder .ub-stage > *,
    .uswag-builder .ub-stage__mobile > * {
        min-width: 0;
    }
    .uswag-builder .ub-stage__mobile .ub-designs {
        overflow-x: auto;
    }
    .uswag-builder .ub-stage__cta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .uswag-builder .ub-stage__cta .ub-btn--lg {
        flex: 1 1 100%;
    }
    .uswag-builder .ub-field--inline {
        min-width: 0;
        flex: 1 1 100%;
    }
    .uswag-builder .ub-intro__title {
        font-size: 30px;
    }
    .uswag-builder .ub-intro__lede {
        font-size: 15px;
    }
    .uswag-builder .ub-canvas__hero {
        max-height: 200px;
    }
    .uswag-builder .ub-intro--product {
        text-align: center;
    }
    .uswag-builder .ub-designs__item .ub-iconbtn {
        opacity: 1;
    }

    /* tab bar */
    .uswag-builder .ub-layout__tabs {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
    }
    .uswag-builder .ub-tabs {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        height: var(--ub-tabs-h);
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ub-navy);
        box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, 0.5);
    }
    .uswag-builder .ub-tab {
        position: relative;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.72);
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 3px;
        font-size: 11px;
        letter-spacing: 0.02em;
        cursor: pointer;
    }
    .uswag-builder .ub-tab svg {
        width: 22px;
        height: 22px;
    }
    .uswag-builder .ub-tab.is-active {
        color: var(--ub-gold);
    }
    .uswag-builder .ub-tab.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        right: 20%;
        height: 3px;
        background: var(--ub-gold);
        border-radius: 0 0 3px 3px;
    }
    .uswag-builder .ub-tab:disabled {
        color: rgba(255, 255, 255, 0.28);
    }
    .uswag-builder .ub-tab__badge {
        position: absolute;
        top: 6px;
        right: calc(50% - 22px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--ub-gold);
        color: var(--ub-gold-ink);
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        display: grid;
        place-items: center;
    }

    /* bottom sheet = the options card */
    .uswag-builder .ub-layout__tray {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: var(--ub-tabs-h);
        z-index: 800;
        height: var(--ub-sheet-h);
        max-height: none;
        padding: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 40px -16px rgba(21, 26, 45, 0.5);
        transform: translateY(calc(100% + var(--ub-tabs-h)));
        /* height changes are animated by the builder with a transform (see setSheet()) */
        transition: transform 260ms var(--ub-ease);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
    }
    .uswag-builder.is-sheet-open .ub-layout__tray {
        transform: translateY(0);
    }
    .uswag-builder.is-sheet-peek .ub-layout__tray {
        height: var(--ub-sheet-h-peek);
    }
    /* the design step's action row lives at the foot of the sheet on phones: Next: Details and the
       basket, without the desktop info line and Save & share (the stage has those) */
    .uswag-builder.is-design-view .ub-layout__actionbar {
        display: block;
        grid-row: 3;
    }
    .uswag-builder.is-design-view .ub-actionbar {
        padding: 10px 16px 12px;
        animation: none;
    }
    .uswag-builder.is-design-view .ub-actionbar__info,
    .uswag-builder.is-design-view .ub-actionbar [data-action='save-share'] {
        display: none;
    }
    .uswag-builder.is-design-view .ub-actionbar__actions {
        flex-wrap: nowrap;
    }
    .uswag-builder.is-design-view .ub-actionbar__actions .ub-btn--lg {
        flex: 1 1 auto;
    }
    /* expanded, the sheet rises over the sticky step bar (z 860) to within 12px of the top */
    .uswag-builder.is-sheet-expanded .ub-layout__tray {
        height: var(--ub-sheet-h-expanded);
        z-index: 870;
    }
    /* toggles in the sheet span the row with equal halves, so the highlight is centred */
    .uswag-builder .ub-tray .ub-seg {
        display: flex;
        width: 100%;
        justify-self: stretch;
    }
    .uswag-builder .ub-tray .ub-seg__opt {
        flex: 1 1 0;
        min-width: 0;
    }
    .uswag-builder .ub-tray .ub-seg__opt span {
        width: 100%;
        justify-content: center;
    }
    .uswag-builder .ub-tray__next--details .ub-btn--lg {
        flex: 1 1 100%;
        justify-content: center;
    }
    .uswag-builder .ub-sheet__handle {
        display: grid;
        place-items: center;
        height: 40px;
        width: 100%;
        border: 0;
        background: transparent;
        cursor: grab;
        touch-action: none;
    }
    .uswag-builder .ub-sheet__handle span {
        width: 52px;
        height: 5px;
        border-radius: 2px;
        background: var(--ub-line-2);
    }
    .uswag-builder .ub-tray {
        overflow-y: auto;
        padding: 0 16px 24px;
        -webkit-overflow-scrolling: touch;
    }
    .uswag-builder .ub-tray__title {
        font-size: 21px;
    }
    .uswag-builder .ub-subnav {
        margin: 0 0 14px;
    }
    .uswag-builder .ub-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .uswag-builder .ub-tile img {
        width: 64px;
        height: 64px;
    }
    .uswag-builder .ub-tile__label {
        font-size: 12px;
    }
    .uswag-builder .ub-artgrid {
        grid-template-columns: repeat(3, 1fr);
    }
    .uswag-builder .ub-artgrid--compact {
        grid-template-columns: repeat(5, 1fr);
    }
    .uswag-builder .ub-art__delete {
        opacity: 1;
    }
    .uswag-builder .ub-swatches {
        grid-template-columns: repeat(4, 1fr);
    }
    .uswag-builder .ub-search {
        grid-template-columns: 1fr;
    }
    .uswag-builder .ub-select select {
        max-width: none;
        width: 100%;
    }

    /* dialogs become bottom sheets */
    .uswag-builder .ub-modal-backdrop {
        place-items: end center;
        padding: 0;
    }
    .uswag-builder .ub-modal {
        width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }
    .uswag-builder .ub-modal__actions {
        flex-wrap: wrap;
    }
    .uswag-builder .ub-modal__actions .ub-btn {
        flex: 1 1 40%;
    }
    .uswag-builder .ub-upsell {
        grid-template-columns: 1fr;
    }
    .uswag-builder .ub-toasts {
        bottom: calc(var(--ub-tabs-h) + 16px);
    }
}
@media (max-width: 420px) {
    .uswag-builder .ub-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .uswag-builder .ub-artgrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .uswag-builder .ub-artgrid--compact {
        grid-template-columns: repeat(4, 1fr);
    }
    .uswag-builder .ub-step__label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uswag-builder *,
    .uswag-builder *::before,
    .uswag-builder *::after {
        transition: none !important;
        animation: none !important;
    }
}

/*
 * Deliberately unscoped: the shared template's Hiver chat launcher (.woot-widget-bubble, fixed
 * bottom-right, z-index 2147483000) lives outside this root. On the builder page at mobile
 * widths it would cover the tab bar, so it is lifted above the bar; while a sheet or dialog is
 * open it is hidden so it can never sit on top of a primary action. Both hooks are body classes
 * set by the builder (see app/builder.js paint()), so no other page is affected.
 */
@media (max-width: 900px) {
    /* The site footer is absolutely positioned at the bottom of #wrapper, which reserves 300px for
       it. At phone widths the footer is ~440px tall, so its top ~140px land on top of the page
       content — on this page, on the builder. Let it flow after the content instead, and keep its
       last rows clear of the fixed tab bar. Builder page only (body class set by the bundle). */
    body.ub-has-builder #wrapper {
        padding-bottom: 0;
    }
    /* The site header must stay reachable — it carries the basket, cart and hamburger menu, the
       only way off the builder on phones. builder.js scrolls body internally to land the preview
       under the step bar (see scrollPreviewUnderBar); sticky keeps the header pinned through that
       scroll instead of letting it clip out the top. A modest z-index, not above the sheet (870):
       peek/half/closed never reach the header's row so sticky alone is enough there, and expanded
       (which does reach it, rising to 12px from the top for keyboard room) keeps covering the
       header as before — the point is the header is never gone, not that it wins every overlap. */
    body.ub-has-builder header.header-kiosk {
        position: sticky;
        top: 0;
        z-index: 50;
    }
    /* While a sheet or dialog is open the page behind must not scroll along: lock the body (Android,
       desktop) and stop scroll chaining out of the sheet / dialog (iOS Safari ignores the body lock
       but honours overscroll-behavior). */
    .uswag-builder .ub-tray,
    .uswag-builder .ub-modal {
        overscroll-behavior: contain;
    }
    body.ub-has-builder #wrapper > footer {
        position: static;
        margin-bottom: var(--ub-tabs-h, 64px);
    }
    body.ub-has-builder .woot-widget-bubble {
        bottom: 84px !important;
    }
    body.ub-has-builder .woot-widget-holder {
        /* the chat window is full-height on phones: lifting it pushed its header (and its close
           button) above the screen. Keep it anchored; it sits above our tab bar by z-index. */
        bottom: 0 !important;
        top: 0 !important;
    }
    body.ub-mobile-overlay .woot-widget-bubble {
        display: none !important;
    }
}

/* Desktop 901–1580px: the site's "Chat with us" pill (167×60, bottom-right corner, untouched) would
   land on the options card's action row. Rather than move the pill, the builder leaves that corner
   free: the layout is capped so the card's right edge stays ≥ 190px from the viewport edge
   (centred layout: right edge = (100vw + width) / 2). */
/* The builder keeps its natural centred 1000px layout everywhere (owner: it must not be narrowed
   or shifted). The site's "Chat with us" pill (167×60, bottom-right, untouched) reaches into the
   options card only below ~1380px: its left edge is 100vw − 187px while the card's right edge is
   50vw + 500px, so the overlap is 687px − 50vw. On those screens the action bar simply keeps its
   buttons out of that strip by padding its right side by the overlap (+20px), so the pill sits over
   empty card surface and never over Save & share / Next / Add to basket. */
@media (min-width: 1101px) and (max-width: 1380px) {
    .uswag-builder .ub-actionbar {
        padding-right: max(20px, calc(707px - 50vw));
    }
}
/* 901–1100px (a narrow desktop window): capping would leave the stage ~150px wide, so here the
   pill is lifted above the action row instead — the lesser evil at a size almost nobody uses. */
@media (min-width: 901px) and (max-width: 1100px) {
    body.ub-has-builder .woot-widget-bubble {
        bottom: 120px !important;
    }
}

/* Portrait phones/tablets only: in landscape the viewport is too short to lock — the customer needs
   to scroll the site header away to see the preview above the sheet. */
@media (max-width: 900px) and (min-height: 501px) {
    body.ub-mobile-overlay {
        overflow: hidden;
    }
}
/* Short portrait phones (≤720 tall, e.g. iPhone SE/8 class): a slightly shorter sheet keeps a
   useful preview above it. */
@media (max-width: 900px) and (min-height: 501px) and (max-height: 720px) {
    .uswag-builder {
        --ub-sheet-h: 46vh;
    }
}
/* Phone held sideways (≤900 wide, ≤500 tall): shorter sheet so some stage stays visible, and the
   expanded sheet leaves the tab bar reachable. */
@media (max-width: 900px) and (max-height: 500px) {
    .uswag-builder {
        --ub-sheet-h: 46vh;
        --ub-sheet-h-expanded: 82vh;
    }
}