/* Guest shop home.
 *
 * The catalog a guest lands on, in the same editorial system as the ticket
 * sheet and the cart: a mono season eyebrow over a big "Shop" title and a
 * one-line description, hairline kind tabs, an item count with a sort
 * toggle, a two-up grid of 4:5 art with mono kind and stock lines and a
 * square ADD TO CART per item, sold-out items desaturated, and a sticky bar
 * above the nav carrying the cart total and VIEW CART.
 *
 * Its own `shop-home` namespace on purpose: the old catalog's selectors and
 * their layers of fixes never match it. Colors are still written with the
 * container id and !important: the light theme forces black on everything
 * under an inline `position: fixed` ancestor
 * (`[data-theme="light"] [style*="position: fixed"] *`), and only id-level
 * specificity gets past that.
 */
html body #moments-scroll-container .shop-home {
    --home-ink: #0d0f0e;
    --home-body: #6f6f69;
    --home-mute: #9a9a93;
    --home-label: #8b8b85;
    --home-hair: #e6e6e2;
    --home-rule: #dcdcd6;
    --home-paper: #ffffff;
    --home-art: #f3f3f0;
    --home-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    position: relative;
    min-height: 100%;
    padding: 0 0 calc(var(--mobile-bottom-nav-height, 58px) + 24px);
    background: var(--home-paper) !important;
    color: var(--home-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

html body #moments-scroll-container .shop-home,
html body #moments-scroll-container .shop-home * {
    box-sizing: border-box;
}

/* No page title: the app header carries the name. */

/* Count + sort */
html body #moments-scroll-container .shop-home-toolbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 20px 0;
    font-family: var(--home-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
}

html body #moments-scroll-container .shop-home-toolbar button {
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    letter-spacing: inherit;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
}

/* Grid */
html body #moments-scroll-container .shop-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 34px;
    padding: 18px 20px 0;
}

html body #moments-scroll-container .shop-home-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

html body #moments-scroll-container .shop-home-card.is-sold-out .shop-home-art,
html body #moments-scroll-container .shop-home-card.is-sold-out .shop-home-name,
html body #moments-scroll-container .shop-home-card.is-sold-out .shop-home-price {
    filter: grayscale(1);
    opacity: 0.45;
}

html body #moments-scroll-container .shop-home-art {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--home-art) !important;
    box-shadow: none !important;
    overflow: hidden;
    cursor: pointer;
}

html body #moments-scroll-container .shop-home-art img,
html body #moments-scroll-container .shop-home-art video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body #moments-scroll-container .shop-home-art .mobile-shop-hero-mark {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--home-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
}

html body #moments-scroll-container .shop-home-art .mobile-shop-hero-mark img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

html body #moments-scroll-container .shop-home-kind {
    margin-top: 14px;
    font-family: var(--home-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
}

html body #moments-scroll-container .shop-home-name {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    overflow-wrap: anywhere;
}

html body #moments-scroll-container .shop-home-priceline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 14px;
}

html body #moments-scroll-container .shop-home-price {
    font-size: 15px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

html body #moments-scroll-container .shop-home-stock {
    font-family: var(--home-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
}

html body #moments-scroll-container .shop-home-add {
    margin-top: auto;
    width: 100%;
    height: 44px;
    padding: 0;
    border: 1px solid var(--home-rule);
    border-radius: 0;
    background: var(--home-paper) !important;
    box-shadow: none !important;
    font-family: var(--home-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

html body #moments-scroll-container .shop-home-add:active,
html body #moments-scroll-container .shop-home-add.is-added {
    background: var(--home-ink) !important;
    border-color: var(--home-ink);
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
}

html body #moments-scroll-container .shop-home-add:disabled {
    border-color: var(--home-hair);
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
    cursor: default;
}

html body #moments-scroll-container .shop-home-empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    font-family: var(--home-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
}

/* Sticky cart bar, pinned just above the bottom nav. The scroll container
   already pads its bottom by the nav height, and WebKit measures sticky
   offsets inside that padding, so bottom: 0 lands the bar right above the
   nav; adding the nav height again floated it mid-screen. */
html body #moments-scroll-container .shop-home-cartbar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: 40px;
    padding: 16px 20px 16px;
    background: #ffffff !important;
    border-top: 1px solid var(--home-rule);
}

/* No cart, no bar. It appears the moment something is added. */
html body #moments-scroll-container .shop-home-cartbar.is-empty {
    display: none !important;
}

html body #moments-scroll-container .shop-home-cartbar-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

html body #moments-scroll-container .shop-home-cartbar-line span {
    font-family: var(--home-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--home-label) !important;
    -webkit-text-fill-color: var(--home-label) !important;
}

html body #moments-scroll-container .shop-home-cartbar-line strong {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

html body #moments-scroll-container .shop-home-cartbar-note {
    margin-top: 6px;
    font-family: var(--home-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
}

html body #moments-scroll-container .shop-home-cartbar button {
    margin-top: 14px;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--home-ink) !important;
    box-shadow: none !important;
    font-family: var(--home-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
    cursor: pointer;
}

html body #moments-scroll-container .shop-home-cartbar button:disabled {
    background: var(--home-rule) !important;
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
    cursor: default;
}

/* The scroll container behind the home paints the app's beige; keep it white
   so nothing shows around the edges. */
html body #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    background: #ffffff !important;
    scroll-snap-type: none !important;
}

/* Softer finish: rounded art with a little lift, pill-ish buttons, and a
   cart bar that rises off the page with rounded shoulders. */
html body #moments-scroll-container .shop-home-art {
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(17, 17, 17, 0.10) !important;
    transform: translateZ(0);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

html body #moments-scroll-container .shop-home-art:active {
    transform: scale(0.985);
    box-shadow: 0 6px 16px rgba(17, 17, 17, 0.12) !important;
}

html body #moments-scroll-container .shop-home-add {
    height: 46px;
    border-radius: 14px;
}

html body #moments-scroll-container .shop-home-cartbar {
    /* Sit 2px below the scroller floor (clipped) so a rounding gap on iOS
       can't show a sliver of the row behind under the bar. */
    bottom: -2px;
    padding: 18px 20px 20px;
    border-top: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -14px 34px rgba(17, 17, 17, 0.10);
}

html body #moments-scroll-container .shop-home-cartbar button {
    border-radius: 16px;
}

html body #moments-scroll-container .shop-home-toolbar {
    padding-top: 22px;
}

/* Stop the scroller above the nav, like every other shop surface does.
   The home used to run to the viewport floor and lean on a fixed white strip
   (body::after) plus a sticky cart bar that trusted the scroller's bottom
   padding. iOS Safari in browser mode pins html/body to 100vh, which is
   taller than what's on screen there, so the strip never showed and the
   cart bar's button slid under the nav pill. With the scroller ending at
   the strip line, nothing can scroll under the pill and the cart bar's
   sticky floor is above it on every engine. */
/* Both selectors: body.shop-active variants of the older feed rules tie the
   plain one on specificity and win on order, reserving 104px instead. */
html body #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home,
html body.shop-active #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    /* Top at 0 with the header as padding, like the owner's catalog: the
       header only translates when it tucks, so content scrolls up under it
       instead of leaving a blank band where the header was. */
    top: 0 !important;
    padding-top: var(--mobile-app-header-height, 74px) !important;
    scroll-padding-top: var(--mobile-app-header-height, 74px) !important;
    bottom: auto !important;
    height: calc(100dvh - var(--mobile-shop-bottom-nav-offset, calc(58px + env(safe-area-inset-bottom, 0px))) - 14px) !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: 0 !important;
}

html body.mobile-shop-nav-hidden #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home,
html body.shop-active.mobile-shop-nav-hidden #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    height: 100dvh !important;
}

html body #moments-scroll-container.is-shop-home .shop-home {
    padding-bottom: 24px;
}


/* Filter & sort: one button in the toolbar opens a sheet, the way the
   owner's catalog does, with a sort list and a kind grid. */
html body #moments-scroll-container .shop-home-toolbar .shop-home-filter-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

html body #moments-scroll-container .shop-home-toolbar .shop-home-filter-open i {
    font-size: 11px;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

html body #moments-scroll-container .shop-home-filter-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483503;
    background: rgba(13, 15, 14, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

html body #moments-scroll-container .shop-home-filter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483504;
    margin: 0;
    padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    max-height: 80dvh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    background: var(--home-paper, #ffffff) !important;
    box-shadow: 0 -18px 48px rgba(13, 15, 14, 0.18);
    transform: translateY(110%);
    transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}

html body #moments-scroll-container .shop-home.is-filter-open .shop-home-filter-layer {
    opacity: 1;
    pointer-events: auto;
}

html body #moments-scroll-container .shop-home.is-filter-open .shop-home-filter {
    transform: translateY(0);
}

html body #moments-scroll-container .shop-home-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

html body #moments-scroll-container .shop-home-filter-head strong {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

html body #moments-scroll-container .shop-home-filter-head button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--home-rule);
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
}

html body #moments-scroll-container .shop-home-filter-section + .shop-home-filter-section {
    margin-top: 22px;
}

html body #moments-scroll-container .shop-home-filter-section > span {
    display: block;
    margin-bottom: 10px;
    font-family: var(--home-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--home-label) !important;
    -webkit-text-fill-color: var(--home-label) !important;
}

html body #moments-scroll-container .shop-home-filter-sort {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--home-hair);
}

html body #moments-scroll-container .shop-home-filter-sort button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid var(--home-hair);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px;
    text-align: left;
    color: var(--home-body) !important;
    -webkit-text-fill-color: var(--home-body) !important;
    cursor: pointer;
}

html body #moments-scroll-container .shop-home-filter-sort button.is-active {
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

html body #moments-scroll-container .shop-home-filter-sort button i {
    font-size: 12px;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

html body #moments-scroll-container .shop-home-filter-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html body #moments-scroll-container .shop-home-filter-kinds button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px 0 16px;
    border: 1px solid var(--home-rule);
    border-radius: 14px;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--home-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
}

html body #moments-scroll-container .shop-home-filter-kinds button strong {
    font-weight: 500;
    color: var(--home-mute) !important;
    -webkit-text-fill-color: var(--home-mute) !important;
}

html body #moments-scroll-container .shop-home-filter-kinds button.is-active {
    border-color: var(--home-ink);
    background: var(--home-ink) !important;
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
}

html body #moments-scroll-container .shop-home-filter-kinds button.is-active strong {
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
    opacity: 0.7;
}

/* The sheet lives inside #shop-main-area, a stacking context far below the
   nav pill, so no z-index gets it above the pill; hide the pill while the
   sheet is open, as the owner's catalog does. */
html body:has(.shop-home.is-filter-open) #bottom-nav {
    opacity: 0 !important;
    transform: translate(-50%, calc(120% + env(safe-area-inset-bottom, 0px))) scale(0.96) !important;
    pointer-events: none !important;
}

/* The white strip that hides content under the pill (body::after, z 240019)
   also paints over the bottom of the sheet; drop it while the sheet is up. */
html body:has(.shop-home.is-filter-open)::after {
    display: none !important;
}