/* Brand assets, page loader, desktop logo placement, contact dock.
   Plain CSS so it applies without a Tailwind rebuild. */

.sb-logo-img {
    display: block;
    height: auto;
    width: auto;
    max-height: 2.35rem;
    max-width: min(46vw, 13.5rem);
}

@media (min-width: 1024px) {
    .sb-header-bar {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }

    .sb-header-logo {
        order: -1;
        justify-content: flex-start;
        margin-left: 1.15rem;
    }

    .sb-header-nav {
        order: 0;
        justify-content: flex-start;
    }

    .sb-header-tools {
        order: 1;
    }

    .sb-logo-img {
        max-height: 2.35rem;
        max-width: 12.5rem;
    }
}

@media (min-width: 1280px) {
    .sb-logo-img {
        max-height: 2.85rem;
        max-width: 17.5rem;
    }
}

#sb-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

#sb-loader img {
    width: min(640px, 86vw);
    height: auto;
}

#sb-loader.is-done {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.sb-dock {
    --d: 0px;
    position: fixed;
    z-index: 90;
    left: 1rem;
    bottom: 1rem;
    print-color-adjust: exact;
}

.sb-dock.is-open {
    --d: 5.15rem;
}

.sb-dock-fan {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 1;
}

.sb-dock-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 3rem;
    height: 3rem;
    margin: -1.5rem 0 0 -1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #171717;
    text-decoration: none;
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.28);
    cursor: pointer;
    transform: translate(calc(cos(var(--a)) * var(--d)), calc(sin(var(--a)) * -1 * var(--d))) scale(0.55);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.sb-dock-item:nth-child(2) { transition-delay: 35ms; }
.sb-dock-item:nth-child(3) { transition-delay: 70ms; }

.sb-dock.is-open .sb-dock-item {
    opacity: 1;
    pointer-events: auto;
    transform: translate(calc(cos(var(--a)) * var(--d)), calc(sin(var(--a)) * -1 * var(--d))) scale(1);
}

.sb-dock-item:hover,
.sb-dock-item:focus-visible {
    filter: brightness(1.08);
}

.sb-dock-wa { background: #25d366; }
.sb-dock-contact { background: #ff5a1f; }

.sb-media-shade,
.sb-media-shade-hero {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sb-media-shade {
    background: rgba(16, 16, 16, 0.38);
}

.sb-media-shade-hero {
    background: linear-gradient(to top, rgba(12, 12, 12, 0.72), rgba(12, 12, 12, 0.34) 46%, rgba(12, 12, 12, 0.22));
}

.sb-media-shade-hero.is-off {
    opacity: 0;
}

.sb-pager {
    margin-top: 2.75rem;
}

/* Backdrop sits behind the panel it belongs to (search, cart, menu, dialogs). */
.overlay {
    z-index: 1 !important;
}

.sb-lightbox-img {
    width: auto;
    height: auto;
    max-width: min(92vw, 100%);
    max-height: min(78dvh, 100%);
    object-fit: contain;
}

@media (max-width: 767px) {
    .sb-gallery {
        width: min(72vw, 16.5rem);
        margin-inline: auto;
    }

    .sb-gallery .media-frame {
        width: 100%;
        max-height: 42dvh;
    }

    .sb-gallery .scroller button {
        width: 3.25rem;
        height: 3.25rem;
    }

    article.container-page {
        padding-bottom: 5.5rem;
    }

    .prose-sb img,
    .prose-sb video,
    .prose-sb iframe,
    .prose-sb table {
        max-width: 100%;
    }

    .prose-sb table {
        display: block;
        overflow-x: auto;
    }

    .aspect-\[4\/5\].max-h-\[80vh\] {
        aspect-ratio: 16 / 11;
        max-height: 72vw;
    }
}

.sb-dock-main {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #171717;
    color: #fff;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
    cursor: pointer;
}

.sb-dock-mix,
.sb-dock-picked {
    width: 1.85rem;
    height: 1.85rem;
    display: block;
}

.sb-dock-picked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sb-dock-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.35rem;
    height: 1.35rem;
    margin: -0.675rem 0 0 -0.675rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
    transform: rotate(var(--aim)) translateX(2.15rem);
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.35));
}

.sb-dock.is-open .sb-dock-arrow {
    animation: sb-aim 0.85s ease-in-out infinite;
}

@keyframes sb-aim {
    0%, 100% { transform: rotate(var(--aim)) translateX(1.9rem); }
    50% { transform: rotate(var(--aim)) translateX(2.55rem); }
}

.sb-dock-main:hover,
.sb-dock-main:focus-visible {
    background: #2b2b2b;
}

.sb-dock-num {
    font-variant-numeric: tabular-nums;
}

.sb-contact-back {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgb(0 0 0 / 0.55);
    overflow: hidden;
    overscroll-behavior: none;
}

/* The frame is the small viewport, not the layout viewport, so mobile
   browser chrome cannot cover the card. svh wins where the browser knows it. */
.sb-contact-frame {
    --sb-contact-pad: 1rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    height: 100svh;
    max-height: 100svh;
    padding: var(--sb-contact-pad);
    padding-bottom: max(var(--sb-contact-pad), env(safe-area-inset-bottom, 0px));
    overflow: hidden;
}

.sb-contact {
    width: min(100%, 32rem);
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: #171717;
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
}

.sb-contact-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - var(--sb-contact-pad) - max(var(--sb-contact-pad), env(safe-area-inset-bottom, 0px)) - 5rem);
    max-height: calc(100dvh - var(--sb-contact-pad) - max(var(--sb-contact-pad), env(safe-area-inset-bottom, 0px)) - 5rem);
    max-height: calc(100svh - var(--sb-contact-pad) - max(var(--sb-contact-pad), env(safe-area-inset-bottom, 0px)) - 5rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 0.15rem 1.25rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: #171717 #eee;
}

.sb-contact .textarea {
    min-height: 4.5rem;
    max-height: 5.5rem;
}

.sb-noscroll,
.sb-search-sheet,
[role="dialog"].sb-noscroll {
    overflow: hidden !important;
    scrollbar-width: none;
    overscroll-behavior: none;
}

.sb-noscroll::-webkit-scrollbar,
.sb-search-sheet::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.sb-contact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 1rem 1.25rem 0.75rem;
}

.sb-contact-head h2 {
    margin: 0;
    font-size: 1.25rem;
}

.sb-contact-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.sb-contact-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    text-decoration: none;
}

.sb-contact-list a:hover {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .sb-contact-frame {
        --sb-contact-pad: 1.5rem;
        align-items: center;
        padding: 1.5rem;
    }
    .sb-dock { left: 1.25rem; bottom: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-dock-item,
    .sb-dock-arrow,
    #sb-loader.is-done { transition: none; animation: none; }
}

@media print {
    #sb-loader,
    .sb-dock { display: none !important; }
}

/* Card payment stays on our checkout. Width stays under 768px so uPay's
   own layout stacks into one column instead of the overflowing tablet grid. */
.sb-pay-shell {
    max-width: 42rem;
    margin-inline: auto;
    background: #f3f4f6;
    border: 1px solid #e6eaee;
    border-radius: 1.25rem;
    overflow: hidden;
}

.sb-pay-frame {
    display: block;
    width: 100%;
    height: 1320px;
    border: 0;
    background: #f3f4f6;
}

.sb-pay-note {
    max-width: 42rem;
    margin: 1rem auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .sb-pay-shell { border-radius: 0.75rem; }
    .sb-pay-frame { height: 1480px; }
}

.sb-pay .sb-dock,
.sb-pay .sb-a11y {
    display: none;
}

/* Lowest footer row vs the fixed contact dock (3.6rem, 1.25rem from the
   corner at this breakpoint) and the accessibility button (3.5rem, 1.5rem
   from the start edge). Inset past the further button plus a 1.25rem gap.
   Wrap so a narrow desktop keeps the row inside that inset. */
@media (min-width: 768px) {
    footer[role="contentinfo"] > .border-t > .container-page {
        padding-inline: max(var(--spacing-page-x), calc(1.5rem + 3.5rem + 1.25rem));
        flex-wrap: wrap;
    }
}

/* Mobile keeps the row's own side padding. The legal row already has
   1.25rem of bottom padding, the same offset as the accessibility button,
   so the footer only needs the button height plus a 1rem gap. */
@media (max-width: 767px) {
    footer[role="contentinfo"] {
        padding-bottom: calc(3.5rem + 1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* FAQ topics are round chips. The old row was a centered nowrap flex
   (pill-nav) with a hidden scrollbar, so the circles overflowed both
   edges and the start chip could not be scrolled into view. Wrap them
   at a fixed circle size instead of clipping the row. */
.faq-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    gap: 0.8rem 0.7rem;
}

.faq-cats > .chip {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 6.75rem;
    height: 6.75rem;
    max-width: none;
    padding: 0.72rem 0.58rem;
    border-radius: 999px;
    justify-content: center;
    text-align: center;
    line-height: 1.22;
    white-space: normal;
    font-size: 0.78rem;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .faq-cats > .chip {
        width: 7.2rem;
        height: 7.2rem;
        padding: 0.85rem 0.7rem;
        font-size: 0.82rem;
    }
}

/* Homepage brand logos: one continuous row. The track holds two identical
   groups; shifting it by half its width (one group, including the trailing
   gap) lands on the same pixels, so the loop has no jump. The track axis
   stays physical LTR so that half-width is exact. Each group still follows
   the page direction, so the first brand sits at the inline start. */
.brand-marquee {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    contain: inline-size;
    touch-action: pan-y;
    padding-block: 1.5rem;
    margin-block: -1.5rem;
}

.brand-marquee__track {
    display: flex;
    width: max-content;
    direction: ltr;
    animation: brand-marquee-scroll var(--brand-marquee-duration, 40s) linear infinite;
}

.brand-marquee__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 1rem;
    margin: 0;
    padding: 0 1rem 0 0;
    list-style: none;
}

.brand-marquee__group > li {
    flex: 0 0 auto;
}

.brand-marquee__link {
    flex: 0 0 auto;
    width: 9.5rem;
    text-decoration: none;
}

.brand-marquee__link:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .brand-marquee__link {
        width: 11rem;
    }
}

/* LTR pages left-align the wide track, so it travels left by one group.
   RTL pages pin that track to the right; traveling right by one group
   keeps the row full and repeats without a jump. */
@keyframes brand-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes brand-marquee-scroll-rtl {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(50%, 0, 0); }
}

[dir="rtl"] .brand-marquee__track {
    animation-name: brand-marquee-scroll-rtl;
}

@media (hover: hover) and (pointer: fine) {
    .brand-marquee:hover .brand-marquee__track {
        animation-play-state: paused;
    }
}

.brand-marquee:focus-within .brand-marquee__track,
.brand-marquee:active .brand-marquee__track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .brand-marquee {
        overflow: visible;
        padding-block: 0;
        margin-block: 0;
    }

    .brand-marquee__track {
        animation: none !important;
        width: auto;
        max-width: 100%;
        transform: none !important;
    }

    .brand-marquee__group[inert],
    .brand-marquee__group[aria-hidden="true"] {
        display: none !important;
    }

    .brand-marquee__group {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
}