/* Guest shop home.
 *
 * The desktop Shop page (/<T>/shop, templates/shop.html) on a phone: a lead
 * picture with the product's name over it, a black FEATURED card, two more
 * picks, kind chips with counts, "The rack" as hook cards in two columns,
 * black ticket cards, and past events folded into one line. The owner's
 * colour carries the "+" buttons and the FEATURED tag.
 *
 * Its own `shop-home` namespace: the old catalog's selectors and their
 * layers of fixes never match it. Colours are written with the container id
 * and !important because the light theme forces black on everything under
 * an inline `position: fixed` ancestor
 * (`[data-theme="light"] [style*="position: fixed"] *`); only id-level
 * specificity gets past that. Neutrals are tokens named for their role, so
 * mobile-page-colors.js moves them to the owner's page colour; the black
 * cards are "hero" tokens and stay black.
 */
html body #moments-scroll-container .shop-home {
    --home-paper: #ffffff;
    --home-ink: #0e0e0e;
    --home-dim: #555555;
    --home-faint: #8a8a8a;
    --home-line: #ececec;
    --home-edge: #e0e0e0;
    --home-hero-card: #0e0e0e;
    --home-hero-ink: #ffffff;
    --home-hero-dim: #c9c9cf;
    --home-hero-edge: rgba(255, 255, 255, 0.28);
    --home-btn: var(--pc-btn, var(--primary-color, #0e0e0e));
    --home-on-btn: var(--pc-on-btn, #ffffff);
    --home-wide: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --home-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --home-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    min-height: 100%;
    padding: 0 0 24px;
    background: var(--home-paper) !important;
    color: var(--home-ink) !important;
    font-family: var(--home-sans) !important;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] body #moments-scroll-container .shop-home {
    --home-paper: #0b0b0d;
    --home-ink: #f4f4f5;
    --home-dim: #b4b4b8;
    --home-faint: #8a8a90;
    --home-line: #232327;
    --home-edge: #34343a;
    --home-hero-card: #1c1c20;
}

html body #moments-scroll-container .shop-home,
html body #moments-scroll-container .shop-home * {
    box-sizing: border-box;
}
html body #moments-scroll-container .shop-home button {
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ------------------------------------------------------------- the lead */
html body #moments-scroll-container .shop-home-lead {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 0;
}
html body #moments-scroll-container .shop-home-lead-art {
    grid-column: 1 / -1;
    position: relative;
    display: block;
    width: calc(100% + 12px);
    margin: 0 -6px;
    height: min(520px, 66vh);
    padding: 0;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home-lead-art img,
html body #moments-scroll-container .shop-home-lead-art video,
html body #moments-scroll-container .shop-home-side-tile img,
html body #moments-scroll-container .shop-home-side-tile video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html body #moments-scroll-container .shop-home-lead .shop-home-lead-name {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 1;
    font-family: var(--home-wide) !important;
    font-stretch: 125% !important;
    font-weight: 900 !important;
    font-size: 58px;
    line-height: 0.86;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    text-align: left;
    mix-blend-mode: difference;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #moments-scroll-container .shop-home-feature {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 24px;
    background: var(--home-hero-card) !important;
}
html body #moments-scroll-container .shop-home .shop-home-feature-tag {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 0.18em;
    /* The owner's colour lifted toward white: these sit on the black hero
       cards, where a black or navy button colour (NIL's) vanished even at
       brightness(1.35). */
    color: color-mix(in srgb, var(--home-btn) 55%, #ffffff) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--home-btn) 55%, #ffffff) !important;
}
html body #moments-scroll-container .shop-home .shop-home-feature-name {
    font-family: var(--home-wide) !important;
    font-stretch: 112% !important;
    font-weight: 900 !important;
    font-size: 24px;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-feature-about {
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home-feature-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}
html body #moments-scroll-container .shop-home .shop-home-feature-price {
    font-family: var(--home-wide) !important;
    font-weight: 900 !important;
    font-size: 28px;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-feature-go {
    flex: 1;
    height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: 25px;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 800 !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
html body #moments-scroll-container .shop-home-side-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-side-pill {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    background: #ffffff !important;
}
html body #moments-scroll-container .shop-home .shop-home-side-pill b,
html body #moments-scroll-container .shop-home .shop-home-side-pill em {
    font-size: 11.5px;
    font-weight: 800 !important;
    font-style: normal;
    white-space: nowrap;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
}
html body #moments-scroll-container .shop-home .shop-home-side-pill b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ the chips */
html body #moments-scroll-container .shop-home-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 16px 4px;
}
html body #moments-scroll-container .shop-home-chips {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
/* BAG, as in the desktop header: an outlined pill with the count. */
html body #moments-scroll-container .shop-home .shop-home-bag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 2px solid var(--home-ink) !important;
    border-radius: 20px;
    background: var(--home-paper) !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-bag span {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--home-ink) !important;
    font-family: var(--home-mono) !important;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
}
html body #moments-scroll-container .shop-home .shop-home-bag span[hidden] { display: none; }
html body #moments-scroll-container .shop-home-chips::-webkit-scrollbar { display: none; }
html body #moments-scroll-container .shop-home .shop-home-chips button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--home-edge) !important;
    border-radius: 20px;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 800 !important;
    white-space: nowrap;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-chips button small {
    font-family: var(--home-mono) !important;
    font-size: 10.5px;
    font-weight: 500 !important;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}
html body #moments-scroll-container .shop-home .shop-home-chips button.is-active {
    border-color: var(--home-ink) !important;
    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 .shop-home-chips button.is-active small {
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
    opacity: 0.65;
}
html body #moments-scroll-container .shop-home .shop-home-chips .shop-home-filter-open span { display: none; }
html body #moments-scroll-container .shop-home .shop-home-chips .shop-home-filter-open {
    width: 40px;
    padding: 0 !important;
    justify-content: center;
    margin-left: auto;
    border-style: dashed !important;
    font-weight: 600 !important;
    font-size: 13px;
}
html body #moments-scroll-container .shop-home .shop-home-chips .shop-home-filter-open i {
    font-size: 12px;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

/* ------------------------------------------------------------- the rack */
html body #moments-scroll-container .shop-home-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 26px 16px 4px;
}
html body #moments-scroll-container .shop-home .shop-home-block-head h2 {
    margin: 0;
    font-family: var(--home-wide) !important;
    font-stretch: 125% !important;
    font-weight: 900 !important;
    font-size: 40px;
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-block-head span {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}
html body #moments-scroll-container .shop-home-rack {
    display: flex;
    gap: 14px;
    padding: 12px 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
html body #moments-scroll-container .shop-home-rack::-webkit-scrollbar { display: none; }
html body #moments-scroll-container .shop-home-rack .shop-home-card {
    flex: 0 0 64%;
    scroll-snap-align: start;
}
html body #moments-scroll-container .shop-home-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
html body #moments-scroll-container .shop-home-hook {
    align-self: center;
    width: 44px;
    height: 14px;
    margin-bottom: -8px;
    border: 3px solid var(--home-ink);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
}
html body #moments-scroll-container .shop-home-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform 160ms ease;
}
html body #moments-scroll-container .shop-home-art:active { transform: scale(0.985); }
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,
html body #moments-scroll-container .shop-home-lead-art .mobile-shop-hero-mark,
html body #moments-scroll-container .shop-home-side-tile .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) !important;
    font-size: 10px;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}
html body #moments-scroll-container .shop-home-art .mobile-shop-hero-mark img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
html body #moments-scroll-container .shop-home .shop-home-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 8px;
    background: #0e0e0e !important;
    font-family: var(--home-mono) !important;
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #moments-scroll-container .shop-home .shop-home-tag.is-out {
    background: #ffffff !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
}
html body #moments-scroll-container .shop-home-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
html body #moments-scroll-container .shop-home-words { min-width: 0; flex: 1; }
html body #moments-scroll-container .shop-home .shop-home-name {
    margin: 0;
    font-family: var(--home-wide) !important;
    font-stretch: 112% !important;
    font-weight: 900 !important;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-sub {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600 !important;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
}
html body #moments-scroll-container .shop-home-buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
html body #moments-scroll-container .shop-home .shop-home-price {
    font-family: var(--home-mono) !important;
    font-size: 14px;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-plus {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    font-size: 22px;
    font-weight: 500 !important;
    line-height: 38px;
    text-align: center;
    color: var(--home-on-btn) !important;
    -webkit-text-fill-color: var(--home-on-btn) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-plus:disabled { opacity: 0.35; cursor: default; }
html body #moments-scroll-container .shop-home .shop-home-plus.is-added { animation: shop-home-pop 0.45s ease; }
@keyframes shop-home-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
html body #moments-scroll-container .shop-home-card.is-sold-out .shop-home-art { filter: grayscale(1); opacity: 0.5; }

/* -------------------------------------------------------------- tickets */
html body #moments-scroll-container .shop-home-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 16px 0;
}
html body #moments-scroll-container .shop-home-ev {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 24px;
    background: var(--home-hero-card) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home-ev-top { display: flex; align-items: flex-start; justify-content: space-between; }
html body #moments-scroll-container .shop-home .shop-home-ev-when {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    /* The owner's colour lifted toward white: these sit on the black hero
       cards, where a black or navy button colour (NIL's) vanished even at
       brightness(1.35). */
    color: color-mix(in srgb, var(--home-btn) 55%, #ffffff) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--home-btn) 55%, #ffffff) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-day {
    font-family: var(--home-wide) !important;
    font-stretch: 125% !important;
    font-weight: 900 !important;
    font-size: 56px;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home-ev-from { text-align: right; }
html body #moments-scroll-container .shop-home .shop-home-ev-from small {
    display: block;
    font-family: var(--home-mono) !important;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-from b {
    font-family: var(--home-wide) !important;
    font-weight: 900 !important;
    font-size: 24px;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-name {
    font-family: var(--home-wide) !important;
    font-stretch: 112% !important;
    font-weight: 900 !important;
    font-size: 22px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-where {
    margin-top: -6px;
    font-size: 13px;
    font-weight: 600 !important;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html body #moments-scroll-container .shop-home .shop-home-ev-chips span {
    padding: 6px 10px;
    border-radius: 14px;
    border: 1px solid var(--home-hero-edge);
    font-size: 12px;
    font-weight: 700 !important;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-go {
    height: 48px;
    border: 0;
    border-radius: 24px;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 800 !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-ev-go:disabled { opacity: 0.5; }

/* ---------------------------------------------------------- past events */
html body #moments-scroll-container .shop-home-past { padding: 26px 16px 0; }
html body #moments-scroll-container .shop-home .shop-home-past-toggle {
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--home-mono) !important;
    font-size: 12px;
    text-decoration: underline;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home-past-list { display: none; margin-top: 10px; border-top: 1px solid var(--home-line); }
html body #moments-scroll-container .shop-home-past.is-open .shop-home-past-list { display: block; }
html body #moments-scroll-container .shop-home-past-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--home-line);
}
html body #moments-scroll-container .shop-home .shop-home-past-row span,
html body #moments-scroll-container .shop-home .shop-home-past-row em {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    font-style: normal;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}
html body #moments-scroll-container .shop-home .shop-home-past-row em { grid-column: 2; }
html body #moments-scroll-container .shop-home .shop-home-past-row b {
    font-size: 14px;
    font-weight: 800 !important;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
}

html body #moments-scroll-container .shop-home .shop-home-empty {
    padding: 48px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
}

/* ------------------------------------------------------------- the bag */
/* Sticky above the nav, the way the desktop BAG sits in its header. WebKit
   measures sticky offsets inside the scroller's padding, so bottom: -2px. */
html body #moments-scroll-container .shop-home-cartbar {
    position: sticky;
    bottom: -2px;
    z-index: 4;
    margin: 28px 12px 0;
    padding: 14px 16px 16px;
    border-radius: 24px 24px 0 0;
    background: var(--home-hero-card) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.16);
}
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 .shop-home-cartbar-line span {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home .shop-home-cartbar-line strong {
    font-family: var(--home-wide) !important;
    font-size: 22px;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-cartbar-note {
    margin-top: 4px;
    font-family: var(--home-mono) !important;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home .shop-home-cartbar button {
    margin-top: 12px;
    width: 100%;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 25px;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
    cursor: pointer;
}

/* The scroller behind the home: the home's own page colour, no snapping. */
html body #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    background: #ffffff !important;
    scroll-snap-type: none !important;
}
html[data-theme="dark"] body #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    background: #0b0b0d !important;
}

/* 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;
}


/* Sort: the dashed chip opens a bottom sheet with the sort list. */
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%);
    visibility: hidden;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 200ms;
}

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);
    visibility: visible;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), visibility 0s;
}

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 !important;
    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-edge);
    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) !important;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}

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

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-line);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px;
    text-align: left;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !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;
}

/* 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: translateY(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;
}

/* The bottom nav on the shop tab. mobile.html's scroll-hide fix pins it with
   translateX(-50%) (a left: 50% layout), while the nav is laid out at
   left/right 14px, so the pill sat half off the left edge. Id-doubled so it
   outranks that block; the filter sheet's rule above still hides it. */
html body.shop-active #bottom-nav#bottom-nav,
html body.shop-active.mobile-shop-filter-hidden #bottom-nav#bottom-nav,
html body.shop-active.mobile-shop-nav-hidden #bottom-nav#bottom-nav {
    transform: none !important;
}
html body.shop-active:has(.shop-home.is-filter-open) #bottom-nav#bottom-nav {
    transform: translateY(calc(120% + env(safe-area-inset-bottom, 0px))) scale(0.96) !important;
}

/* The owner's "Shop page | Dashboard" switch, as in the desktop header:
   a two-pill segmented control, and + Add product beside it on the page. */
html body #moments-scroll-container .shop-home .shop-owner-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 2px;
}
html body #moments-scroll-container .shop-home .shop-owner-seg {
    display: flex;
    padding: 3px;
    border-radius: 22px;
    border: 1.5px solid var(--home-edge);
    background: var(--home-paper) !important;
}
html body #moments-scroll-container .shop-home .shop-owner-seg button {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 18px;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 800 !important;
    white-space: nowrap;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-owner-seg button[aria-selected="true"] {
    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 .shop-owner-add {
    margin-left: auto;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 20px;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 800 !important;
    white-space: nowrap;
    color: var(--home-on-btn) !important;
    -webkit-text-fill-color: var(--home-on-btn) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home.is-owner-dash { padding-bottom: 0; }
html body #moments-scroll-container .shop-home.is-owner-dash .odx { padding-top: 4px !important; }

/* #shop-main-area only frames the fixed storefront scroller, but the theme's
   blanket [id*="-main-area"] { overflow-y: auto !important } made it a second
   scroller (267px of slack at 390x844). A swipe past the end of the feed
   chained into it and slid the header off with a blank band under the rack. */
html body #shop-main-area#shop-main-area,
html body.shop-active #shop-main-area#shop-main-area {
    overflow: hidden !important;
}
html body #shop-main-area #moments-scroll-container.mobile-shop-storefront,
html body #shop-main-area #moments-scroll-container.mobile-shop-catalog-feed {
    overscroll-behavior-y: contain;
}

/* Glass: the active "Shop page" segment came out as a white pill with white
   text (the glass sweep whitens the label, --home-ink goes white). Dark ink
   on the white pill, and a shadow under the lead name so it reads over a
   light product photo. */
html[data-appearance="glass"] body #moments-scroll-container#moments-scroll-container .shop-home .shop-owner-seg button[aria-selected="true"] {
    background: #ffffff !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
}
html[data-appearance="glass"] body #moments-scroll-container#moments-scroll-container .shop-home .shop-home-lead-name {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
}