/* Premium storefront — mobile app experience */
.store-body--app {
    background: #f4f6f8;
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0));
    overflow-x: hidden;
    font-size: var(--text-md, 0.875rem);
    line-height: var(--leading-normal, 1.5);
    text-shadow: none;
}

.store-body--app *,
.store-body--app *::before,
.store-body--app *::after {
    text-shadow: none !important;
}

.store-body--app [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

@media (min-width: 960px) {
    .store-body--app {
        padding-bottom: 0;
        background: linear-gradient(180deg, #eef2f6 0%, #f8fafc 28%, #f8fafc 100%);
    }
}

.store-app {
    --store-app-max: 80rem; /* ruang nyaman untuk 6 kolom desktop */
    --store-app-radius: 1.125rem;
    --store-app-shadow: none;
    /* App bar = padding 0.5625×2 + control 2.375 ≈ 3.5rem (+ safe-area) */
    --store-app-bar-h: 3.5rem;
    --store-toolbar-sticky-gap: 0.5rem;
    max-width: var(--store-app-max);
    margin-inline: auto;
}

@media (max-width: 959px) {
    .store-app {
        max-width: none;
        --store-app-bar-h: 3.25rem;
        --store-toolbar-sticky-gap: 0.375rem;
    }

    .store-app-bar-inner {
        min-height: 3.125rem;
        padding: 0.4375rem 0;
        padding-top: calc(0.4375rem + env(safe-area-inset-top, 0));
        gap: 0.625rem;
    }

    .store-app-bar-btn,
    .store-app-bar-btn--search {
        min-width: 2.25rem;
        height: 2.25rem;
        padding-inline: 0.625rem;
    }

    .store-cover {
        display: none;
    }
}

/* Top app bar — full-bleed surface, content tetap di wrapper */
.store-app-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-bottom: 1px solid rgb(167 243 208 / 0.35);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(248 253 250 / 0.92) 100%);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.store-app-bar.is-scrolled {
    border-color: rgb(167 243 208 / 0.55);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.98) 0%, rgb(236 253 245 / 0.88) 100%);
    box-shadow: none;
}

.store-app-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(100% - 1.5rem, var(--store-app-max, 72rem));
    min-height: 3.375rem;
    margin-inline: auto;
    padding: 0.5625rem 0;
    padding-top: calc(0.5625rem + env(safe-area-inset-top, 0));
    box-sizing: border-box;
}

.store-app-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    padding: 0 0.625rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.92);
    color: rgb(51 65 85);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm, 0.75rem);
    font-weight: 800;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.store-app-bar-btn .ui-icon {
    font-size: 1rem;
    line-height: 1;
}

.store-app-bar-btn:hover {
    background: rgb(236 253 245);
    border-color: rgb(167 243 208);
    color: rgb(4 120 87);
    box-shadow: none;
}

.store-app-bar-btn--search {
    margin-left: auto;
    border-radius: 9999px;
    padding-inline: 0.875rem;
    border-color: rgb(167 243 208 / 0.75);
    background: linear-gradient(145deg, rgb(236 253 245), rgb(255 255 255));
    color: rgb(4 120 87);
}

.store-app-bar-btn--search:hover {
    border-color: rgb(52 211 153);
    background: rgb(209 250 229);
    color: rgb(6 95 70);
}

.store-app-bar-btn-label {
    display: none;
}

.store-app-bar-title-wrap {
    flex: 1;
    min-width: 0;
}

.store-app-bar-eyebrow {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(4 120 87);
    line-height: 1.2;
}

.store-app-bar-title {
    margin: 0.125rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-lg, 0.9375rem);
    font-weight: 800;
    letter-spacing: var(--tracking-tight, -0.02em);
    color: rgb(15 23 42);
    line-height: 1.25;
}

.store-app-bar-actions {
    display: flex;
    gap: 0.375rem;
}

/* Hero profil — tanpa backdrop, lebar selaras kartu lain */
.store-hero-section,
.store-cover-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0.75rem 0.875rem 0.625rem;
}

.store-cover {
    display: none;
}

.store-profile-card {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #fff;
    box-shadow: none;
}

/* Identitas kiri · aksi (Chat/Pesanan/Bagikan) + stats kanan */
.store-profile-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.store-profile-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.625rem 0.75rem;
    align-items: start;
    flex: 1 1 auto;
    min-width: 0;
}

.store-profile-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.65rem;
    flex: 0 0 auto;
    min-width: 0;
}

.store-profile-avatar {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background: linear-gradient(145deg, rgb(236 253 245), rgb(209 250 229));
    margin-top: 0.05rem;
}

.store-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-profile-avatar-fallback {
    font-size: 1rem;
    font-weight: 800;
    color: rgb(4 120 87);
}

.store-profile-info {
    min-width: 0;
}

.store-profile-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3125rem 0.4375rem;
}

.store-profile-name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: rgb(15 23 42);
}

.store-profile-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.4375rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: rgb(236 253 245);
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1.2;
    color: rgb(4 120 87);
}

.store-profile-badge.store-badge--trusted {
    background: rgb(254 243 199);
    border-color: rgb(253 230 138 / 0.7);
    color: rgb(146 64 14);
}

.store-profile-badge.store-badge--verified {
    background: rgb(239 246 255);
    border-color: rgb(191 219 254 / 0.9);
    color: rgb(29 78 216);
}

.store-profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.35rem;
    margin: 0.2rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: rgb(100 116 139);
}

.store-profile-meta-rating {
    font-weight: 800;
    color: rgb(4 120 87);
    text-decoration: none;
    white-space: nowrap;
}

.store-profile-meta-rating:hover {
    text-decoration: underline;
}

.store-profile-meta-muted {
    color: rgb(148 163 184);
}

.store-profile-meta-sep {
    color: rgb(203 213 225);
}

.store-profile-meta-desc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(22rem, 100%);
}

.store-profile-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.4rem;
    margin: 0.3rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: rgb(100 116 139);
}

.store-profile-metrics-sep {
    color: rgb(203 213 225);
}

.store-profile-metric strong {
    font-weight: 800;
    color: rgb(15 23 42);
}

.store-profile-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    margin: 0;
    width: auto;
    flex: 0 0 auto;
}

.store-profile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: auto;
    min-width: 2.125rem;
    height: 2.125rem;
    min-height: 2.125rem;
    max-height: 2.125rem;
    padding: 0 0.75rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.625rem;
    background: #fff;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: rgb(51 65 85);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.store-profile-action .ui-icon,
.store-profile-action .ui-emoji-icon,
.store-profile-action .ui-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
}

.store-profile-action .ui-brand-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.store-profile-action .ui-btn-label {
    display: inline;
    line-height: 1;
}

.store-profile-action--primary,
.store-profile-action--whatsapp {
    border-color: transparent;
    background: #25d366;
    color: #fff;
    box-shadow: none;
}

.store-profile-action--primary:hover,
.store-profile-action--whatsapp:hover {
    background: #1ebe57;
    color: #fff;
}

.store-profile-action:hover:not(.store-profile-action--primary):not(.store-profile-action--whatsapp) {
    border-color: rgb(167 243 208);
    background: rgb(236 253 245);
    color: rgb(4 120 87);
}

/* Legacy — tombol di empty state tetap nyaman diklik */
.store-empty-state .store-profile-action {
    min-width: 9rem;
    min-height: 2.5rem;
    padding-inline: 1rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
}

.store-empty-state .store-profile-action .ui-btn-label {
    display: inline;
}

@media (min-width: 960px) {
    .store-hero-section,
    .store-cover-section {
        margin: 0.75rem 1rem 0.75rem;
    }

    .store-profile-card {
        padding: 0.875rem 1rem;
    }

    .store-profile-top {
        gap: 1rem 1.25rem;
        align-items: center;
    }

    .store-profile-avatar {
        width: 3.25rem;
        height: 3.25rem;
    }

    .store-profile-name {
        font-size: 1rem;
    }

    .store-profile-meta-desc {
        max-width: min(32rem, 100%);
    }

    .store-profile-actions {
        gap: 0.5rem;
    }

    .store-profile-action {
        min-width: 2.25rem;
        height: 2.25rem;
        min-height: 2.25rem;
        max-height: 2.25rem;
        padding-inline: 0.875rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 959px) {
    .store-hero-section,
    .store-cover-section {
        margin: 0.625rem 0.875rem 0.5rem;
        gap: 0.5rem;
    }

    .store-profile-card {
        padding: 0.75rem;
        border-radius: 0.875rem;
    }

    .store-profile-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .store-profile-identity {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.55rem 0.7rem;
        width: 100%;
        align-items: start;
    }

    .store-profile-side {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    .store-profile-avatar {
        width: 3rem;
        height: 3rem;
        border-radius: 0.7rem;
        margin-top: 0;
    }

    .store-profile-avatar-fallback {
        font-size: 0.9375rem;
    }

    .store-profile-info {
        display: grid;
        gap: 0.2rem;
        min-width: 0;
    }

    .store-profile-name-row {
        gap: 0.35rem;
        align-items: center;
    }

    .store-profile-name {
        font-size: 0.9375rem;
        line-height: 1.25;
    }

    .store-profile-badge {
        font-size: 0.5625rem;
        padding: 0.15rem 0.4rem;
        flex: 0 0 auto;
    }

    .store-profile-meta--mobile {
        margin: 0;
        gap: 0.25rem;
        font-size: 0.6875rem;
        line-height: 1.3;
    }

    .store-profile-meta-rating {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
    }

    .store-profile-tagline {
        margin: 0;
        font-size: 0.6875rem;
        font-weight: 500;
        line-height: 1.35;
        color: rgb(100 116 139);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .store-profile-metrics--mobile {
        margin: 0.1rem 0 0;
        gap: 0.2rem 0.35rem;
        font-size: 0.6875rem;
        line-height: 1.3;
    }

    .store-profile-metric strong {
        font-weight: 800;
        color: rgb(15 23 42);
    }

    .store-profile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
        margin: 0.15rem 0 0;
        padding-top: 0.7rem;
        border-top: 1px solid rgb(241 245 249);
        flex: none;
        align-self: stretch;
        justify-content: stretch;
    }

    .store-profile-actions .store-profile-action--whatsapp {
        grid-column: 1 / -1;
    }

    .store-profile-action {
        flex: none;
        width: 100%;
        min-width: 0;
        height: 2.5rem;
        min-height: 2.5rem;
        max-height: 2.5rem;
        padding-inline: 0.75rem;
        border-radius: 0.65rem;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .store-profile-action--ghost {
        border-color: rgb(226 232 240);
        background: #fff;
        color: rgb(51 65 85);
    }

    .store-profile-action--ghost .ui-icon,
    .store-profile-action--ghost .ui-emoji-icon,
    .store-profile-action--ghost .ui-brand-icon,
    .store-profile-action--ghost .ui-svg-icon {
        color: rgb(71 85 105);
    }

    .store-profile-card .store-profile-action .ui-btn-label {
        display: inline;
        font-size: 0.75rem;
    }

    .store-profile-card .store-profile-action .ui-icon,
    .store-profile-card .store-profile-action .ui-emoji-icon,
    .store-profile-card .store-profile-action .ui-brand-icon,
    .store-profile-card .store-profile-action .ui-svg-icon {
        display: inline-flex;
        width: 1rem;
        height: 1rem;
        font-size: 0.875rem;
        color: inherit;
    }
}

@media (max-width: 380px) {
    .store-profile-card {
        padding: 0.65rem 0.7rem;
    }

    .store-profile-avatar {
        width: 2.75rem;
        height: 2.75rem;
    }

    .store-profile-name {
        font-size: 0.875rem;
    }

    .store-profile-action {
        height: 2.375rem;
        min-height: 2.375rem;
        max-height: 2.375rem;
        padding-inline: 0.5rem;
        font-size: 0.6875rem;
        gap: 0.25rem;
    }

    .store-profile-card .store-profile-action .ui-btn-label {
        font-size: 0.6875rem;
    }
}

/* Sticky catalog toolbar — kontrol tinggi seragam */
.store-toolbar {
    --store-ctrl-h: 2rem;
    --store-ctrl-radius: 0.5rem;
    --store-ctrl-font: 0.75rem;
    position: sticky;
    top: var(--store-app-bar-live-h, var(--store-app-bar-h));
    z-index: 40;
    display: grid;
    gap: 0.5rem;
    margin: 0.25rem 0.875rem 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: #fff;
    box-shadow: none;
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        border-radius 0.2s ease,
        margin 0.2s ease;
    overflow: visible;
    isolation: isolate;
}

.store-toolbar.is-scrolled {
    box-shadow: none;
}

/* Menempel ke topbar saat sticky */
.store-toolbar.is-stuck {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0 0 1rem 1rem;
    border-left: none;
    border-right: none;
    border-top-color: transparent;
    box-shadow: none;
}

.store-toolbar.has-active-filters {
    border-color: rgb(167 243 208 / 0.85);
}

.store-toolbar.is-stuck.has-active-filters {
    border-top-color: transparent;
}

@media (min-width: 960px) {
    .store-toolbar {
        margin: 0.375rem 1rem 1rem;
        padding: 0.75rem 0.875rem;
    }

    .store-toolbar.is-stuck {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0 0 1rem 1rem;
    }
}

.store-toolbar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: var(--store-ctrl-h);
}

.store-toolbar-head-text {
    min-width: 0;
}

.store-toolbar-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: rgb(15 23 42);
}

.store-toolbar-meta {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(100 116 139);
}

.store-toolbar-meta [data-store-visible-count] {
    font-weight: 800;
    color: rgb(4 120 87);
}

.store-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    height: var(--store-ctrl-h);
}

.store-toolbar-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    box-sizing: border-box;
    height: var(--store-ctrl-h);
    min-height: var(--store-ctrl-h);
    padding: 0 0.625rem;
    border: 1px solid rgb(254 202 202);
    border-radius: var(--store-ctrl-radius);
    background: rgb(255 251 251);
    font-family: inherit;
    font-size: var(--store-ctrl-font);
    font-weight: 800;
    line-height: 1;
    color: rgb(190 18 60);
    cursor: pointer;
}

.store-toolbar-reset.hidden { display: none; }

.store-toolbar-reset:hover {
    border-color: rgb(252 165 165);
    background: rgb(254 226 226);
}

.store-toolbar-select {
    flex: 0 1 auto;
    min-width: 5.75rem;
    max-width: 8rem;
    height: var(--store-ctrl-h);
    --store-toolbar-select-h: var(--store-ctrl-h);
}

.store-toolbar-select--category {
    min-width: 6rem;
    max-width: 8.5rem;
}

.store-toolbar-select .smart-select {
    width: 100%;
    height: 100%;
}

.store-toolbar-select .smart-select.is-open { z-index: 40; }

.store-toolbar-select .smart-select-trigger {
    box-sizing: border-box;
    min-height: var(--store-ctrl-h);
    height: var(--store-ctrl-h);
    padding-inline: 0.625rem;
    gap: 0.25rem;
    border-radius: var(--store-ctrl-radius);
    border-color: rgb(226 232 240);
    background: rgb(248 250 252);
    font-size: var(--store-ctrl-font);
    font-weight: 700;
    line-height: 1;
}

.store-toolbar-select .smart-select-trigger:hover {
    border-color: rgb(203 213 225);
    background: #fff;
}

.store-toolbar-select .smart-select.is-open .smart-select-trigger,
.store-toolbar-select .smart-select-trigger:focus-visible {
    border-color: rgb(16 185 129);
    background: #fff;
    box-shadow: 0 0 0 2px rgb(209 250 229 / 0.9);
}

.store-toolbar-select .smart-select-value-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-toolbar-select .smart-select-chevron {
    width: 0.75rem;
    height: 0.75rem;
}

.store-toolbar-select .smart-select-chevron svg {
    width: 0.6875rem;
    height: 0.6875rem;
}

.store-toolbar-select .smart-select-panel {
    left: auto;
    right: 0;
    border-radius: 0.625rem;
    min-width: 100%;
    width: max-content;
    max-width: min(14rem, calc(100vw - 1.5rem));
}

.store-toolbar-select .smart-select-compact .smart-select-option {
    min-height: var(--store-ctrl-h);
    padding: 0.375rem 0.625rem;
    font-size: var(--store-ctrl-font);
}

.store-toolbar-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    min-width: 0;
    /* Jangan kunci height — konten wrap tidak boleh meluber ke grid produk */
    min-height: var(--store-ctrl-h);
    height: auto;
}

.store-toolbar-search {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1 1 100%;
    box-sizing: border-box;
    min-width: 0;
    height: var(--store-ctrl-h);
    min-height: var(--store-ctrl-h);
    max-height: var(--store-ctrl-h);
    padding: 0 0.625rem;
    border-radius: var(--store-ctrl-radius);
    background: rgb(248 250 252);
    border: 1px solid rgb(226 232 240);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.store-toolbar-search:focus-within,
.store-toolbar-search.is-highlight {
    border-color: rgb(16 185 129);
    background: #fff;
    box-shadow: 0 0 0 2px rgb(209 250 229 / 0.9);
}

.store-toolbar-search-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: rgb(4 120 87);
    font-size: 0.8125rem;
    background: transparent;
    line-height: 1;
}

.store-toolbar-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--store-ctrl-font);
    font-weight: 600;
    line-height: 1;
    color: rgb(15 23 42);
    outline: none;
}

.store-toolbar-search-input::placeholder {
    font-weight: 500;
    color: rgb(148 163 184);
}

.store-toolbar-search-clear {
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    border: none;
    border-radius: 9999px;
    background: rgb(226 232 240);
    color: rgb(71 85 105);
    cursor: pointer;
}

.store-toolbar-search-clear:hover { background: rgb(203 213 225); }
.store-toolbar-search-clear.hidden { display: none; }

.store-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex: 1 1 100%;
    box-sizing: border-box;
    height: var(--store-ctrl-h);
    min-height: var(--store-ctrl-h);
    max-height: var(--store-ctrl-h);
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    padding: 0.125rem;
    border-radius: var(--store-ctrl-radius);
    background: rgb(248 250 252);
    border: 1px solid rgb(226 232 240);
}

.store-toolbar-filters::-webkit-scrollbar { display: none; }

.store-toolbar-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    flex-shrink: 1;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: 0 0.5rem;
    border: 0;
    border-radius: calc(var(--store-ctrl-radius) - 0.0625rem);
    background: transparent;
    font-family: inherit;
    font-size: var(--store-ctrl-font);
    font-weight: 800;
    line-height: 1;
    color: rgb(100 116 139);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.store-toolbar-chip.is-active {
    background: #fff;
    color: rgb(4 120 87);
    box-shadow: none;
}

.store-toolbar-chip:hover:not(.is-active) {
    color: rgb(51 65 85);
}

@media (max-width: 639px) {
    .store-toolbar-select,
    .store-toolbar-select--category {
        min-width: 0;
        max-width: 6.5rem;
    }

    .store-toolbar-reset .ui-btn-label { display: none; }

    .store-toolbar-reset {
        width: var(--store-ctrl-h);
        padding: 0;
    }

    .store-toolbar-reset .ui-icon,
    .store-toolbar-reset .ui-emoji-icon {
        display: inline-flex;
    }

    .store-toolbar-select .smart-select-panel {
        max-width: min(12.5rem, calc(100vw - 1.25rem));
    }
}

@media (min-width: 960px) {
    .store-toolbar-tools {
        flex-wrap: nowrap;
        align-items: center;
    }

    .store-toolbar-search {
        flex: 1 1 auto;
    }

    .store-toolbar-filters {
        flex: 0 0 auto;
        width: auto;
        max-width: 14rem;
    }

    .store-toolbar-chip {
        flex: 0 0 auto;
        padding-inline: 0.625rem;
    }
}

/* Product feed */
.store-feed {
    position: relative;
    z-index: 1;
    padding: 0.25rem 0.875rem 1.25rem;
    margin-top: 0;
}

@media (min-width: 960px) {
    .store-feed {
        padding: 0.35rem 1rem 1.5rem;
    }
}

.store-grid--premium {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

@media (min-width: 640px) {
    .store-grid--premium {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.875rem;
    }
}

@media (min-width: 960px) {
    .store-grid--premium {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.9375rem;
    }
}

/* Desktop / official store etalase — 6 kolom */
@media (min-width: 1200px) {
    .store-grid--premium {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.875rem;
    }

    .store-feed {
        padding-inline: 1.125rem;
    }

    .store-card {
        border-radius: 0.875rem;
    }

    .store-card-body {
        gap: 0.1875rem;
        padding: 0.5rem 0.5625rem 0.625rem;
    }

    .store-card-cat {
        font-size: 0.5rem;
    }

    .store-card-name {
        min-height: 2.35em;
        font-size: 0.75rem;
        line-height: 1.2;
    }

    .store-card-price {
        font-size: 0.8125rem;
    }

    .store-card-foot {
        padding-top: 0.3125rem;
    }

    .store-card-foot--with-cart {
        padding-right: 2.25rem;
    }

    .store-card-badge {
        top: 0.375rem;
        left: 0.375rem;
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
    }

    .store-card-add {
        right: 0.375rem;
        bottom: 0.375rem;
        width: 1.875rem;
        height: 1.875rem;
    }

    .store-card-add .ui-icon,
    .store-card-add .ui-emoji-icon,
    .store-card-add .ui-svg-icon {
        width: 0.9375rem;
        height: 0.9375rem;
        font-size: 0.875rem;
        color: #fff;
    }

    .store-card-add .ui-svg-icon svg {
        width: 0.9375rem;
        height: 0.9375rem;
    }
}

.store-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(226 232 240 / 0.85);
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    isolation: isolate;
}

.store-card:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.store-card-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    color: inherit;
    text-decoration: none;
}

.store-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: rgb(248 250 252);
    overflow: hidden;
    border-radius: 0;
}

.store-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.25s ease;
}

.store-card:hover .store-card-img {
    transform: scale(1.03);
}

.store-card-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: rgb(203 213 225);
    font-size: var(--icon-md, 1.25rem);
}

.store-card-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.1875rem 0.4375rem;
    border-radius: 9999px;
    font-size: var(--text-xs, 0.6875rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.store-card-badge--ok {
    background: rgb(236 253 245);
    color: rgb(4 120 87);
}

.store-card-badge--low {
    background: rgb(254 243 199);
    color: rgb(146 64 14);
}

.store-card-badge--out {
    background: rgb(15 23 42);
    color: #fff;
}

.store-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.6875rem 0.75rem;
    flex: 1;
}

.store-card-cat {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(4 120 87);
}

.store-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    font-size: var(--text-base, 0.8125rem);
    font-weight: 700;
    line-height: 1.25;
    color: rgb(15 23 42);
}

.store-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.375rem;
    min-width: 0;
}

.store-card-foot--with-cart {
    padding-right: 2.625rem; /* ruang tombol keranjang agar tidak bertumpuk */
}

.store-card-price-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.store-card-price {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-md, 0.875rem);
    font-weight: 800;
    color: rgb(4 120 87);
    font-variant-numeric: tabular-nums;
}

.store-card-placeholder-icon,
.store-card-placeholder .ui-emoji-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.store-empty-icon,
.store-empty-filter .ui-emoji-icon {
    font-size: 1.75rem;
    line-height: 1;
}

/* Empty states */
.store-feed.hidden,
.store-feed[hidden],
.store-grid.hidden,
.store-empty-filter.hidden,
.store-empty-filter[hidden] {
    display: none !important;
}

.store-empty-filter,
.store-empty-state {
    margin: 0 0.875rem 1rem;
    padding: 2rem 1.15rem;
    text-align: center;
    border: 1px dashed rgb(226 232 240);
    border-radius: 0.875rem;
    background: #fff;
    box-sizing: border-box;
}

.store-empty-filter-inner {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    max-width: 18rem;
    margin-inline: auto;
}

.store-empty-filter .store-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
    color: rgb(100 116 139);
    font-size: 1.125rem;
}

.store-empty-filter .store-empty-icon .ui-icon {
    font-size: 1.125rem;
    line-height: 1;
}

.store-empty-visual {
    font-size: var(--icon-lg, 1.5rem);
    line-height: 1;
}

.store-empty-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgb(15 23 42);
}

.store-empty-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(100 116 139);
}

.store-empty-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.65rem;
    min-height: 2.5rem;
    padding: 0 1.1rem;
    border: 1px solid rgb(5 150 105);
    border-radius: 0.65rem;
    background: rgb(5 150 105);
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.store-empty-filter-btn:hover {
    background: rgb(4 120 87);
    border-color: rgb(4 120 87);
}

.store-empty-filter-btn .ui-icon {
    font-size: 0.9375rem;
    line-height: 1;
}

@media (max-width: 1023px) {
    .store-empty-filter {
        margin: 0 0.875rem 0.75rem;
        padding: 1.75rem 1rem;
        border-radius: 0.875rem;
    }

    .store-empty-filter .store-empty-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.65rem;
        font-size: 1rem;
    }

    .store-empty-title {
        font-size: 0.9375rem;
    }

    .store-empty-desc {
        font-size: 0.75rem;
    }

    .store-empty-filter-btn {
        min-height: 2.375rem;
        font-size: 0.75rem;
    }
}

.store-app-footer {
    margin-top: 1.5rem;
    padding: 1rem;
    text-align: center;
    font-size: 0.6875rem;
    color: rgb(148 163 184);
}

.store-app-footer-link {
    font-weight: 700;
    color: rgb(4 120 87);
    text-decoration: none;
}

/* Mobile bottom dock */
.store-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.125rem;
    padding: 0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom, 0));
    border-top: 1px solid rgb(226 232 240 / 0.95);
    background: rgb(255 255 255 / 0.96);
    box-shadow: none;
}

@media (min-width: 960px) {
    .store-dock {
        display: none;
    }
}

.store-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.3125rem 0.25rem;
    border: none;
    border-radius: 0.625rem;
    background: transparent;
    font-family: inherit;
    font-size: 0.5625rem;
    font-weight: 700;
    color: rgb(148 163 184);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.store-dock-item.is-active,
.store-dock-item:hover {
    color: rgb(4 120 87);
    background: rgb(236 253 245 / 0.65);
}

.store-dock-item .ui-icon {
    font-size: 1.125rem;
}

/* Order success alert — dalam hero, lebar ikut section */
.store-order-banner {
    position: relative;
    z-index: 4;
    margin: 0;
    border: 1px solid rgb(167 243 208 / 0.95);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgb(236 253 245) 0%, rgb(220 252 231 / 0.88) 55%, rgb(255 255 255 / 0.96) 100%);
    box-shadow: none;
}

.store-order-banner-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
}

.store-order-banner-icon {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
    border-radius: 9999px;
    background: linear-gradient(145deg, rgb(16 185 129), rgb(5 150 105));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    box-shadow: none;
}

.store-order-banner-body {
    flex: 1;
    min-width: 0;
}

.store-order-banner-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.store-order-banner-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: rgb(4 120 87);
}

.store-order-banner-text {
    margin: 0.3125rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgb(71 85 105);
}

.store-order-banner-order {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    padding: 0.3125rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid rgb(167 243 208 / 0.9);
    background: rgb(255 255 255 / 0.9);
    font-size: 0.6875rem;
    line-height: 1.3;
    color: rgb(51 65 85);
}

.store-order-banner-order-label {
    font-weight: 600;
    color: rgb(100 116 139);
}

.store-order-banner-order strong {
    font-weight: 800;
    letter-spacing: 0.01em;
    color: rgb(4 120 87);
}

.store-order-banner-link {
    display: inline-block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: rgb(4 120 87);
    text-decoration: none;
}

.store-order-banner-link:hover {
    text-decoration: underline;
}

.store-order-banner-close {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    margin: -0.125rem -0.25rem 0 0;
    border: none;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.72);
    font-size: 1.125rem;
    line-height: 1;
    color: rgb(100 116 139);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.store-order-banner-close:hover {
    background: rgb(255 255 255);
    color: rgb(15 23 42);
}

.store-order-banner.is-dismissing {
    opacity: 0;
    transform: translateY(-0.35rem);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border-width: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        max-height 0.25s ease,
        margin 0.25s ease;
}

@media (max-width: 959px) {
    .store-order-banner {
        margin: 0;
        border-radius: 0.875rem;
        box-shadow: none;
    }

    .store-order-banner-inner {
        align-items: center;
        gap: 0.5625rem;
        padding: 0.625rem 0.6875rem;
    }

    .store-order-banner-icon {
        width: 1.75rem;
        height: 1.75rem;
        margin-top: 0;
        font-size: 0.75rem;
        box-shadow: none;
    }

    .store-order-banner-head {
        align-items: center;
        gap: 0.375rem;
    }

    .store-order-banner-title {
        font-size: 0.8125rem;
        line-height: 1.25;
    }

    .store-order-banner-text {
        margin-top: 0.25rem;
        font-size: 0.6875rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .store-order-banner-order {
        margin-top: 0.4375rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
        gap: 0.25rem;
    }

    .store-order-banner-close {
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        font-size: 1rem;
        background: transparent;
    }
}

@media (min-width: 960px) {
    .store-order-banner {
        margin: 0;
    }

    .store-order-banner-inner {
        padding: 0.875rem 1rem;
    }
}

@media (min-width: 960px) {
    .store-app-bar-inner {
        width: min(100% - 2rem, var(--store-app-max, 72rem));
        min-height: 3.625rem;
        padding-block: 0.625rem;
        padding-top: calc(0.625rem + env(safe-area-inset-top, 0));
    }

    .store-app-bar-title {
        font-size: var(--text-xl, 1.0625rem);
    }

    .store-app-bar-btn--search {
        min-width: 0;
        height: 2.5rem;
        padding-inline: 1rem;
    }

    .store-app-bar-btn-label {
        display: inline;
    }
}

/* Minimal app bar — title + search only */
.store-app-bar-inner--minimal {
    gap: 0.875rem;
}

.store-app-bar-inner--minimal .store-app-bar-title-wrap {
    flex: 1;
}

/* Star rating display */
.store-stars {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.store-stars-track {
    position: relative;
    display: inline-block;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
}

.store-stars-empty {
    color: rgb(226 232 240);
}

.store-stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    white-space: nowrap;
    color: rgb(245 158 11);
}

.store-stars--sm .store-stars-track { font-size: 0.6875rem; }
.store-stars--md .store-stars-track { font-size: 0.8125rem; }
.store-stars--lg .store-stars-track { font-size: 1.125rem; }

.store-profile-rating-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.375rem;
    margin-top: 0.2rem;
}

.store-profile-rating-score {
    font-size: 0.75rem;
    font-weight: 800;
    color: rgb(15 23 42);
}

.store-profile-rating-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(4 120 87);
    text-decoration: none;
}

.store-profile-rating-count:hover {
    text-decoration: underline;
}

.store-profile-rating-empty {
    font-size: 0.6875rem;
    color: rgb(148 163 184);
}

.store-satisfaction-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.store-satisfaction-badge--lg {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    padding: 0.3125rem 0.625rem;
}

@media (max-width: 959px) {
    .store-profile-rating-row {
        margin-top: 0.3125rem;
        gap: 0.25rem 0.375rem;
    }

    .store-profile-rating-score {
        font-size: 0.75rem;
    }

    .store-profile-rating-count,
    .store-profile-rating-empty {
        font-size: 0.625rem;
    }

    .store-satisfaction-badge {
        padding: 0.125rem 0.4375rem;
        font-size: 0.5rem;
    }

    .store-stars--md .store-stars-track {
        font-size: 0.75rem;
    }
}

.store-sat--excellent { background: rgb(254 243 199); color: rgb(146 64 14); }
.store-sat--great { background: rgb(236 253 245); color: rgb(4 120 87); }
.store-sat--good { background: rgb(236 253 245); color: rgb(5 150 105); }
.store-sat--ok { background: rgb(248 250 252); color: rgb(100 116 139); }
.store-sat--low { background: rgb(255 241 242); color: rgb(190 18 60); }

/* Section blocks */
.store-info-section,
.store-rating-section {
    margin: 0 0.875rem 1rem;
    padding: 1rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 1rem;
    background: #fff;
    box-shadow: none;
}

.store-info-section--compact {
    padding: 0.625rem 0.875rem;
}

.store-info-head {
    margin-bottom: 0;
}

.store-info-collapse {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.5rem;
}

.store-info-collapse[hidden] {
    display: none !important;
}

.store-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.store-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    max-width: 100%;
    padding: 0.3125rem 0.5625rem;
    border-radius: 9999px;
    border: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(51 65 85);
    white-space: nowrap;
}

.store-info-chip span[aria-hidden="true"] {
    font-size: 0.8125rem;
    line-height: 1;
}

.store-info-address--compact {
    margin-top: 0;
    padding: 0.5rem 0.625rem;
    gap: 0.5rem;
}

.store-info-address--compact p {
    font-size: 0.6875rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.store-rating-section {
    padding: 0.625rem 0.875rem;
}

.store-rating-head,
.store-info-head {
    margin-bottom: 0;
    align-items: center;
}

/* Toggle collapse bersama — Info Toko & Ulasan */
.store-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.125rem 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.store-section-toggle:hover .store-section-chevron {
    background: rgb(209 250 229);
    color: rgb(4 120 87);
}

.store-section-toggle-text {
    display: grid;
    gap: 0.0625rem;
    min-width: 0;
    flex: 1 1 auto;
}

.store-section-toggle-text .store-section-title {
    margin: 0;
    line-height: 1.25;
}

.store-section-toggle-text .store-section-sub {
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-section-chevron {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    border-radius: 0.625rem;
    border: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
    color: rgb(71 85 105);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.store-section-chevron .ui-icon {
    font-size: 0.9375rem;
    line-height: 1;
}

.store-info-section:not(.is-collapsed) .store-section-chevron,
.store-rating-section:not(.is-collapsed) .store-section-chevron {
    transform: rotate(180deg);
    border-color: rgb(167 243 208);
    background: rgb(236 253 245);
    color: rgb(4 120 87);
}

.store-rating-collapse {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.875rem;
}

.store-rating-collapse[hidden] {
    display: none !important;
}

@media (min-width: 960px) {
    .store-info-section,
    .store-rating-section {
        margin-inline: 1rem;
    }
}

.store-section-head {
    margin-bottom: 0.875rem;
}

.store-section-head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.store-section-title {
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgb(15 23 42);
}

.store-section-sub {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: rgb(148 163 184);
}

.store-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.store-info-card {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.6875rem;
    border-radius: 0.75rem;
    background: rgb(248 250 252);
    border: 1px solid rgb(241 245 249);
}

.store-info-icon {
    font-size: 1.125rem;
    line-height: 1;
}

.store-info-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(148 163 184);
}

.store-info-value {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(30 41 59);
    line-height: 1.35;
}

.store-info-address {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.6875rem 0.75rem;
    border-radius: 0.75rem;
    background: rgb(248 250 252);
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgb(71 85 105);
}

.store-info-address-icon {
    flex-shrink: 0;
    color: rgb(4 120 87);
    margin-top: 0.125rem;
}

.store-info-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.625rem;
}

.store-info-social-chip {
    padding: 0.3125rem 0.625rem;
    border-radius: 9999px;
    background: rgb(236 253 245);
    font-size: 0.625rem;
    font-weight: 700;
    color: rgb(4 120 87);
}

/* Tombol Nilai — sejajar tinggi dengan chevron collapse */
.store-rate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: auto;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    max-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid rgb(5 150 105);
    border-radius: 0.625rem;
    background: rgb(5 150 105);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.store-rate-btn .ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9375rem;
    height: 0.9375rem;
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
}

.store-rate-btn-label {
    line-height: 1;
}

.store-rate-btn:hover {
    background: rgb(4 120 87);
    border-color: rgb(4 120 87);
}

.store-rate-btn--block {
    width: 100%;
    min-height: 2.75rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
}

.store-rating-overview {
    display: grid;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
    padding: 0.875rem;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, rgb(248 250 252), rgb(236 253 245 / 0.35));
    border: 1px solid rgb(241 245 249);
}

@media (min-width: 640px) {
    .store-rating-overview {
        grid-template-columns: 9rem minmax(0, 1fr);
        align-items: center;
    }
}

.store-rating-score-card {
    text-align: center;
}

.store-rating-big {
    font-size: var(--text-display, 1.625rem);
    font-weight: 800;
    line-height: 1;
    color: rgb(15 23 42);
    font-variant-numeric: tabular-nums;
}

.store-rating-count-label {
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    color: rgb(100 116 139);
}

.store-rating-bar-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3125rem;
}

.store-rating-bar-label,
.store-rating-bar-count {
    font-size: 0.625rem;
    font-weight: 700;
    color: rgb(100 116 139);
    font-variant-numeric: tabular-nums;
}

.store-rating-bar-track {
    display: block;
    height: 0.375rem;
    border-radius: 9999px;
    background: rgb(226 232 240);
    overflow: hidden;
}

.store-rating-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(245 158 11), rgb(251 191 36));
}

.store-review-list {
    display: grid;
    gap: 0.75rem;
}

.store-review-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.875rem;
    border: 1px solid rgb(241 245 249);
    background: rgb(248 250 252 / 0.65);
}

.store-review-avatar {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgb(236 253 245), rgb(209 250 229));
    font-size: 0.6875rem;
    font-weight: 800;
    color: rgb(4 120 87);
}

.store-review-body {
    flex: 1;
    min-width: 0;
}

.store-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.store-review-name {
    font-size: 0.8125rem;
    color: rgb(15 23 42);
}

.store-review-verified {
    font-size: 0.5625rem;
    font-weight: 700;
    color: rgb(4 120 87);
    background: rgb(236 253 245);
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
}

.store-review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.store-review-time {
    font-size: 0.625rem;
    color: rgb(148 163 184);
}

.store-review-comment {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgb(71 85 105);
}

.store-review-empty {
    padding: 1.5rem 1rem;
    text-align: center;
}

.store-review-empty-icon {
    font-size: var(--icon-md, 1.25rem);
    line-height: 1;
}

.store-review-empty-title {
    margin-top: 0.5rem;
    font-size: var(--text-lg, 0.9375rem);
    font-weight: 800;
    color: rgb(15 23 42);
}

.store-review-empty-desc {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgb(100 116 139);
}

/* Mobile — Info Toko & Ulasan: padat, sejajar toolbar/profil */
@media (max-width: 1023px) {
    .store-tab-panel--reviews {
        display: grid;
        gap: 0.5rem;
        margin: 0 0 0.5rem;
        min-width: 0;
    }

    .store-info-section,
    .store-rating-section {
        margin: 0 0.875rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.875rem;
        border-color: rgb(226 232 240);
        background: #fff;
        box-sizing: border-box;
        min-width: 0;
    }

    .store-info-section--compact,
    .store-rating-section {
        padding: 0.5rem 0.75rem;
    }

    .store-section-head--row {
        gap: 0.375rem;
        margin-bottom: 0;
        min-width: 0;
    }

    .store-section-toggle {
        min-height: 2.125rem;
        gap: 0.5rem;
        padding: 0;
    }

    .store-section-toggle-text {
        gap: 0.05rem;
    }

    .store-section-title {
        font-size: 0.875rem;
        letter-spacing: -0.015em;
    }

    .store-section-sub {
        font-size: 0.6875rem;
        font-weight: 600;
        color: rgb(100 116 139);
    }

    .store-section-chevron {
        width: 2rem;
        height: 2rem;
        flex-basis: 2rem;
        border-radius: 0.5rem;
    }

    .store-section-chevron .ui-icon {
        font-size: 0.875rem;
    }

    .store-rate-btn {
        height: 2rem;
        min-height: 2rem;
        max-height: 2rem;
        min-width: 2rem;
        padding: 0 0.625rem;
        border-radius: 0.5rem;
        font-size: 0.6875rem;
        gap: 0.25rem;
    }

    .store-rate-btn .ui-icon {
        width: 0.875rem;
        height: 0.875rem;
        font-size: 0.8125rem;
    }

    .store-info-collapse,
    .store-rating-collapse {
        margin-top: 0.625rem;
        padding-top: 0.625rem;
        border-top: 1px solid rgb(241 245 249);
        gap: 0.625rem;
    }

    .store-info-chips {
        gap: 0.3125rem;
    }

    .store-info-chip {
        padding: 0.28125rem 0.5rem;
        border-radius: 0.5rem;
        font-size: 0.625rem;
        font-weight: 700;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .store-info-chip span[aria-hidden="true"] {
        font-size: 0.75rem;
    }

    .store-info-address--compact {
        padding: 0.5rem 0.625rem;
        border: 1px solid rgb(241 245 249);
        border-radius: 0.625rem;
        background: rgb(248 250 252);
        gap: 0.4375rem;
    }

    .store-info-address--compact p {
        font-size: 0.6875rem;
        line-height: 1.4;
        -webkit-line-clamp: 2;
    }

    .store-info-social {
        margin-top: 0;
        gap: 0.3125rem;
    }

    .store-info-social-chip {
        padding: 0.25rem 0.5rem;
        border-radius: 0.5rem;
        font-size: 0.625rem;
    }

    .store-rating-overview {
        margin: 0;
        padding: 0.75rem;
        gap: 0.75rem;
        border-radius: 0.75rem;
        border: 1px solid rgb(241 245 249);
        background: rgb(248 250 252);
    }

    .store-rating-big {
        font-size: 1.5rem;
    }

    .store-rating-count-label {
        margin-top: 0.25rem;
        font-size: 0.6875rem;
        font-weight: 600;
    }

    .store-satisfaction-badge--lg {
        margin-top: 0.375rem;
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
    }

    .store-rating-bar-row {
        gap: 0.375rem;
        margin-bottom: 0.25rem;
        grid-template-columns: 1.75rem minmax(0, 1fr) 1.25rem;
    }

    .store-rating-bar-label,
    .store-rating-bar-count {
        font-size: 0.625rem;
    }

    .store-rating-bar-track {
        height: 0.3125rem;
    }

    .store-review-list {
        gap: 0.5rem;
    }

    .store-review-item {
        gap: 0.625rem;
        padding: 0.625rem 0.6875rem;
        border-radius: 0.75rem;
        border-color: rgb(226 232 240);
        background: #fff;
    }

    .store-review-avatar {
        width: 2rem;
        height: 2rem;
        font-size: 0.625rem;
    }

    .store-review-name {
        font-size: 0.75rem;
        font-weight: 800;
    }

    .store-review-verified {
        font-size: 0.5625rem;
        padding: 0.1rem 0.3125rem;
    }

    .store-review-meta {
        margin-top: 0.1875rem;
        gap: 0.3125rem;
    }

    .store-review-time {
        font-size: 0.625rem;
    }

    .store-review-comment {
        margin-top: 0.3125rem;
        font-size: 0.6875rem;
        line-height: 1.45;
    }

    .store-review-empty {
        padding: 1.25rem 0.75rem;
        border: 1px dashed rgb(226 232 240);
        border-radius: 0.75rem;
        background: rgb(248 250 252 / 0.65);
    }

    .store-review-empty-icon {
        font-size: 1.125rem;
    }

    .store-review-empty-title {
        margin-top: 0.375rem;
        font-size: 0.875rem;
    }

    .store-review-empty-desc {
        margin-top: 0.1875rem;
        font-size: 0.6875rem;
        line-height: 1.4;
    }
}

@media (max-width: 380px) {
    .store-info-section,
    .store-rating-section {
        margin-inline: 0.75rem;
        padding: 0.4375rem 0.625rem;
    }

    .store-section-sub {
        font-size: 0.625rem;
    }

    .store-rate-btn {
        padding: 0;
        width: 2rem;
    }

    .store-rate-btn-label {
        display: none;
    }
}

/* Review modal */
.store-review-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: end center;
    padding: 0;
}

@media (min-width: 640px) {
    .store-review-modal {
        place-items: center;
        padding: 1rem;
    }
}

.store-review-modal.hidden {
    display: none;
}

.store-review-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.45);
}

.store-review-modal-panel {
    position: relative;
    width: 100%;
    max-width: 28rem;
    max-height: min(92vh, 42rem);
    overflow: auto;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
    border-radius: 1.125rem 1.125rem 0 0;
    background: #fff;
    box-shadow: none;
}

@media (min-width: 640px) {
    .store-review-modal-panel {
        border-radius: 1.125rem;
        padding-bottom: 1rem;
    }
}

.store-review-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.store-review-modal-title {
    font-size: 1rem;
    font-weight: 800;
    color: rgb(15 23 42);
}

.store-review-modal-close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 9999px;
    background: rgb(248 250 252);
    font-size: 1.25rem;
    line-height: 1;
    color: rgb(100 116 139);
    cursor: pointer;
}

.store-review-form-lead {
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgb(100 116 139);
    margin-bottom: 0.875rem;
}

.store-review-stars-input {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.store-review-star-btn {
    border: none;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: rgb(226 232 240);
    cursor: pointer;
    transition: transform 0.12s ease, color 0.12s ease;
}

.store-review-star-btn.is-active {
    color: rgb(245 158 11);
}

.store-review-star-btn:hover {
    transform: scale(1.08);
}

.store-review-stars-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(4 120 87);
    margin-bottom: 0.875rem;
}

.store-review-field {
    display: grid;
    gap: 0.375rem;
    margin-bottom: 0.625rem;
}

.store-review-field span {
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(51 65 85);
}

.store-review-input,
.store-review-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.75rem;
    font-family: inherit;
    font-size: 0.8125rem;
    color: rgb(15 23 42);
    background: #fff;
}

.store-review-textarea {
    resize: vertical;
    min-height: 4.5rem;
}

.store-review-msg {
    margin-bottom: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.625rem;
    background: rgb(255 241 242);
    font-size: 0.75rem;
    color: rgb(190 18 60);
}

.store-review-msg.hidden {
    display: none;
}

.store-review-msg.is-ok {
    background: rgb(236 253 245);
    border: 1px solid rgb(167 243 208);
    color: rgb(4 120 87);
}

.store-review-msg.is-error {
    background: rgb(255 241 242);
    border: 1px solid rgb(254 205 211);
    color: rgb(190 18 60);
}

.store-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ===== Device cart page ===== */
.store-card {
    position: relative;
}

.ui-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
}

.ui-svg-icon svg {
    display: block;
    width: 1.125em;
    height: 1.125em;
    flex-shrink: 0;
}

.store-card-add {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(145deg, rgb(16 185 129), rgb(5 150 105));
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.store-card-add .ui-icon,
.store-card-add .ui-emoji-icon,
.store-card-add .ui-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
}

.store-card-add .ui-svg-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

.store-card-add:hover {
    transform: translateY(-1px);
    background: linear-gradient(145deg, rgb(5 150 105), rgb(4 120 87));
}

.store-card-add:disabled {
    opacity: 0.65;
    cursor: wait;
}

@media (max-width: 639px) {
    .store-card-foot--with-cart {
        padding-right: 2.5rem;
    }

    .store-card-add {
        right: 0.4375rem;
        bottom: 0.4375rem;
        width: 2rem;
        height: 2rem;
    }

    .store-card-add .ui-icon,
    .store-card-add .ui-emoji-icon,
    .store-card-add .ui-svg-icon {
        width: 1rem;
        height: 1rem;
        font-size: 0.9375rem;
        color: #fff;
    }

    .store-card-add .ui-svg-icon svg {
        width: 1rem;
        height: 1rem;
    }
}

.store-app-bar-btn--cart {
    position: relative;
    margin-left: auto;
}

.store-dock-cart-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.store-dock-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.55rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: rgb(220 38 38);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.store-dock-badge.hidden {
    display: none;
}

.store-cart-app {
    --store-cart-pad: 1rem;
    --store-cart-radius: 0.875rem;
    --store-cart-line: rgb(226 232 240);
    --store-cart-ink: rgb(15 23 42);
    --store-cart-muted: rgb(100 116 139);
    --store-cart-brand: rgb(5 150 105);
    --store-cart-brand-dark: rgb(4 120 87);
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    overflow-x: clip;
    background: #f3f4f6;
    min-height: 100vh;
}

.store-cart-app-bar {
    z-index: 50;
}

.store-cart-app-bar-center {
    display: none;
}

.store-cart-shell {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.store-cart-layout {
    display: grid;
    gap: 0.875rem;
}

.store-cart-main {
    margin: 0;
    padding: 0.875rem var(--store-cart-pad) 1rem;
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    box-sizing: border-box;
}

.store-cart-panel-head {
    display: grid;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--store-cart-line);
    border-radius: var(--store-cart-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    box-sizing: border-box;
}

.store-cart-panel-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.store-cart-panel-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-cart-ink);
    line-height: 1.25;
}

.store-cart-panel-sub {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--store-cart-muted);
    line-height: 1.35;
}

.store-cart-panel-sub strong {
    font-weight: 800;
    color: var(--store-cart-ink);
    font-variant-numeric: tabular-nums;
}

.store-cart-privacy {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--store-cart-muted);
}

.store-cart-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--store-cart-line);
    border-radius: 0.6rem;
    background: #fff;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--store-cart-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.store-cart-clear:hover {
    background: rgb(255 241 242);
    border-color: rgb(252 165 165);
    color: rgb(190 18 60);
}

.store-cart-clear.hidden {
    display: none;
}

.store-cart-empty {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 2.25rem 1.25rem;
    text-align: center;
    border-radius: var(--store-cart-radius);
    border: 1px dashed var(--store-cart-line);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}

.store-cart-empty.hidden,
.store-cart-panel.hidden,
.store-cart-list.hidden,
.store-cart-summary.hidden {
    display: none;
}

.store-cart-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--store-cart-line);
    background: rgb(248 250 252);
    color: var(--store-cart-muted);
    font-size: 1.125rem;
}

.store-cart-empty-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-cart-ink);
}

.store-cart-empty-desc {
    margin: 0;
    max-width: 20rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--store-cart-muted);
}

.store-cart-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.65rem;
}

.store-cart-panel {
    display: grid;
    gap: 0;
    border-radius: var(--store-cart-radius);
    border: 1px solid var(--store-cart-line);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    overflow: hidden;
}

.store-cart-item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgb(241 245 249);
    background: #fff;
}

.store-cart-item:last-child {
    border-bottom: none;
}

.store-cart-item.is-unavailable {
    opacity: 0.68;
}

.store-cart-item-media {
    display: block;
    overflow: hidden;
    border-radius: 0.65rem;
    border: 1px solid var(--store-cart-line);
    background: rgb(248 250 252);
    aspect-ratio: 1;
}

.store-cart-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-cart-item-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: rgb(203 213 225);
}

.store-cart-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.store-cart-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.store-cart-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--store-cart-ink);
    text-decoration: none;
}

.store-cart-item-name:hover {
    color: var(--store-cart-brand-dark);
}

.store-cart-item-meta {
    margin: 0.1875rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--store-cart-muted);
}

.store-cart-item-warn {
    margin-left: 0.25rem;
    color: rgb(180 83 9);
    font-weight: 700;
}

.store-cart-item-remove {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: rgb(148 163 184);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.store-cart-item-remove:hover {
    color: rgb(190 18 60);
    background: rgb(255 241 242);
    border-color: rgb(254 202 202);
}

.store-cart-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

.store-cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 0.65rem;
    border: 1px solid var(--store-cart-line);
    background: rgb(248 250 252);
}

.store-cart-qty-btn {
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--store-cart-ink);
    cursor: pointer;
}

.store-cart-qty-btn:hover {
    color: var(--store-cart-brand-dark);
}

.store-cart-qty-input {
    width: 1.875rem;
    border: none;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--store-cart-ink);
    outline: none;
    -moz-appearance: textfield;
}

.store-cart-qty-input::-webkit-outer-spin-button,
.store-cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.store-cart-item-pay {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.store-cart-item-total {
    font-size: 0.9375rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--store-cart-brand-dark);
}

.store-cart-item-pay-link {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--store-cart-brand);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.store-cart-item-pay-link:hover {
    color: var(--store-cart-brand-dark);
    text-decoration: underline;
}

/* Satu item: cukup CTA bawah “Checkout” */
.store-cart-panel .store-cart-item:only-child .store-cart-item-pay-link {
    display: none;
}

.store-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: 0.65rem;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.store-cart-btn--ghost {
    border-color: var(--store-cart-line);
    background: #fff;
    color: var(--store-cart-ink);
}

.store-cart-btn--ghost:hover {
    border-color: rgb(203 213 225);
    background: rgb(248 250 252);
}

.store-cart-btn--primary {
    border-color: var(--store-cart-brand);
    background: var(--store-cart-brand);
    color: #fff;
}

.store-cart-btn--primary:hover {
    border-color: var(--store-cart-brand-dark);
    background: var(--store-cart-brand-dark);
    color: #fff;
}

.store-cart-aside {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.store-cart-summary {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0));
    z-index: 35;
    padding: 0 var(--store-cart-pad);
    pointer-events: none;
}

.store-cart-summary-inner {
    pointer-events: auto;
    display: grid;
    gap: 0.65rem;
    padding: 1.05rem 1.1rem;
    border-radius: var(--store-cart-radius);
    border: 1px solid var(--store-cart-line);
    background: #fff;
    box-shadow: 0 8px 24px rgb(15 23 42 / 0.08);
    box-sizing: border-box;
}

.store-cart-summary-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-cart-ink);
    line-height: 1.25;
}

.store-cart-summary-sub {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--store-cart-muted);
}

.store-cart-summary-totals {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--store-cart-line);
    background: rgb(248 250 252);
}

.store-cart-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--store-cart-muted);
}

.store-cart-summary-row strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--store-cart-ink);
}

.store-cart-summary-row--total {
    margin-top: 0.15rem;
    padding-top: 0.45rem;
    border-top: 1px dashed rgb(203 213 225);
    font-weight: 700;
    color: var(--store-cart-ink);
}

.store-cart-summary-row--total strong {
    font-size: 1.125rem;
    color: var(--store-cart-brand-dark);
}

.store-cart-summary-note {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--store-cart-muted);
}

.store-cart-summary-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.store-cart-summary-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.15rem;
}

.store-cart-summary-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--store-cart-muted);
    text-decoration: none;
}

.store-cart-summary-links a:hover {
    color: var(--store-cart-brand-dark);
}

.store-cart-summary-links .ui-icon {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.9rem;
}

.store-cart-related {
    display: none;
}

.store-cart-toast {
    position: fixed;
    left: 50%;
    bottom: calc(6.25rem + env(safe-area-inset-bottom, 0));
    z-index: 80;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0.625rem 0.875rem;
    border-radius: 9999px;
    background: rgb(15 23 42 / 0.92);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: none;
    transform: translate(-50%, 0.75rem);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.store-cart-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.store-cart-toast.is-error {
    background: rgb(159 18 57 / 0.95);
}

/* Cart — Official Store (selaras checkout / product / orders) */
.store-body--app:has(.store-cart-app--official) {
    background: #f3f4f6;
}

.store-cart-app--official {
    --store-cart-max: 1120px;
}

/* Shared buyer app bar — cart + checkout (selaras) */
.store-buyer-app-bar {
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid rgb(226 232 240);
    box-shadow: none;
}

.store-buyer-app-bar.is-scrolled,
.store-buyer-app-bar:not(.is-scrolled) {
    background: #fff;
    border-bottom: 1px solid rgb(226 232 240);
    box-shadow: none;
}

.store-buyer-app-bar-inner {
    --store-buyer-bar-max: 1120px;
    --store-buyer-bar-pad: 1rem;
    --store-buyer-bar-line: rgb(226 232 240);
    --store-buyer-bar-ink: rgb(15 23 42);
    --store-buyer-bar-muted: rgb(100 116 139);
    max-width: var(--store-buyer-bar-max);
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    min-height: 3.5rem;
    padding: 0.65rem var(--store-buyer-bar-pad);
    padding-top: calc(0.65rem + env(safe-area-inset-top, 0));
    box-sizing: border-box;
}

.store-buyer-app-bar-store {
    display: none;
}

.store-buyer-app-bar-back,
.store-buyer-app-bar-cart,
.store-buyer-app-bar-orders {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    margin-left: 0;
    padding: 0;
    border: 1px solid var(--store-buyer-bar-line);
    border-radius: 0.65rem;
    background: #fff;
    color: var(--store-buyer-bar-ink);
}

.store-buyer-app-bar-back:hover,
.store-buyer-app-bar-cart:hover,
.store-buyer-app-bar-orders:hover {
    border-color: rgb(203 213 225);
    background: rgb(248 250 252);
    color: var(--store-buyer-bar-ink);
}

.store-buyer-app-bar-cart.is-active,
.store-buyer-app-bar-cart[aria-current="page"] {
    border-color: rgb(167 243 208);
    background: rgb(236 253 245);
    color: rgb(4 120 87);
}

.store-buyer-app-bar-title {
    flex: initial;
    min-width: 0;
}

.store-buyer-app-bar-title .store-app-bar-eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--store-buyer-bar-muted);
}

.store-buyer-app-bar-title .store-app-bar-title {
    margin-top: 0.1rem;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-buyer-bar-ink);
}

@media (min-width: 960px) {
    .store-buyer-app-bar {
        position: sticky;
        top: 0;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .store-buyer-app-bar-inner {
        --store-buyer-bar-pad: 1.25rem;
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        gap: 0.65rem;
        padding: 0.7rem var(--store-buyer-bar-pad);
    }

    .store-buyer-app-bar-store {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 2.75rem;
        height: 2.75rem;
        padding: 0 0.85rem;
        border: 1px solid var(--store-buyer-bar-line);
        border-radius: 0.65rem;
        background: #fff;
        color: var(--store-buyer-bar-ink);
        font: inherit;
        font-size: 0.8125rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    .store-buyer-app-bar-store:hover {
        border-color: rgb(203 213 225);
        background: rgb(248 250 252);
        color: var(--store-buyer-bar-ink);
    }

    .store-buyer-app-bar-store .ui-icon {
        width: 1rem;
        height: 1rem;
        font-size: 0.9375rem;
        color: var(--store-buyer-bar-muted);
    }

    .store-buyer-app-bar-back,
    .store-buyer-app-bar-cart,
    .store-buyer-app-bar-orders {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
    }
}

.store-cart-app--official .store-cart-shell {
    width: 100%;
    max-width: var(--store-cart-max);
    margin: 0 auto;
    box-sizing: border-box;
}

.store-cart-app--official .store-cart-clear {
    border-radius: 0.65rem;
}

.store-cart-app--official .store-cart-summary-inner {
    box-shadow: 0 -4px 16px rgb(15 23 42 / 0.04);
}

@media (max-width: 959px) {
    .store-cart-app--official .store-cart-clear span {
        display: none;
    }

    .store-cart-app--official .store-cart-clear {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0;
    }

    .store-cart-app--official .store-cart-aside {
        display: contents;
    }

    .store-cart-app--official .store-cart-related {
        display: block;
        margin: 0 var(--store-cart-pad) 0.75rem;
        order: 3;
    }

    .store-cart-app--official .store-cart-main {
        order: 1;
    }

    .store-cart-app--official .store-cart-summary {
        order: 2;
    }

    .store-cart-app--official .store-cart-summary-title,
    .store-cart-app--official .store-cart-summary-sub,
    .store-cart-app--official .store-cart-summary-note,
    .store-cart-app--official .store-cart-summary-links,
    .store-cart-app--official .store-cart-summary-actions .store-cart-btn--ghost,
    .store-cart-app--official .store-cart-summary-row:not(.store-cart-summary-row--total) {
        display: none;
    }

    .store-cart-app--official .store-cart-summary-totals {
        padding: 0;
        border: 0;
        background: transparent;
        flex: 0 0 auto;
    }

    .store-cart-app--official .store-cart-summary-row--total {
        margin: 0;
        padding: 0;
        border: 0;
        display: grid;
        gap: 0.1rem;
    }

    .store-cart-app--official .store-cart-summary-row--total span {
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--store-cart-muted);
    }

    .store-cart-app--official .store-cart-summary-row--total strong {
        font-size: 1rem;
    }

    .store-cart-app--official .store-cart-summary-inner {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0.85rem;
    }

    .store-cart-app--official .store-cart-summary-actions {
        flex: 1 1 auto;
        min-width: 0;
    }

    .store-cart-app--official .store-cart-summary-actions .store-cart-btn--primary {
        width: 100%;
        min-height: 2.75rem;
    }

    .store-cart-app--official .store-cart-related .store-checkout-related-list {
        display: flex;
        gap: 0.625rem;
        padding: 0.5rem 0.75rem 0.75rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .store-cart-app--official .store-cart-related .store-checkout-related-list::-webkit-scrollbar {
        display: none;
    }

    .store-cart-app--official .store-cart-related .store-checkout-related-item {
        flex: 0 0 min(11.25rem, 68%);
        width: min(11.25rem, 68%);
        max-width: 11.25rem;
        scroll-snap-align: start;
    }
}

@media (min-width: 960px) {
    .store-body--app:has(.store-cart-app) {
        padding-bottom: 0;
    }

    .store-cart-app--official {
        --store-cart-pad: 1.25rem;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: 0 0 2.5rem;
        background: #f3f4f6;
        min-height: 100vh;
    }

    .store-cart-app--official .store-cart-shell {
        padding: 1.25rem var(--store-cart-pad) 2rem;
    }

    .store-cart-app--official .store-cart-layout--with-aside {
        grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 22rem);
        align-items: start;
        gap: 1.25rem;
    }

    .store-cart-app--official .store-cart-layout--empty:not(.store-cart-layout--with-aside) {
        max-width: 40rem;
        margin-inline: 0;
    }

    .store-cart-app--official .store-cart-main {
        padding: 0;
        gap: 0.875rem;
    }

    .store-cart-app--official .store-cart-panel-head {
        padding: 1rem 1.15rem;
    }

    .store-cart-app--official .store-cart-panel-title {
        font-size: 1.0625rem;
    }

    .store-cart-app--official .store-cart-aside {
        position: sticky;
        top: 4.75rem;
        align-self: start;
        gap: 1rem;
    }

    .store-cart-app--official .store-cart-summary {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 1;
        padding: 0;
        pointer-events: auto;
    }

    .store-cart-app--official .store-cart-summary-inner {
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
        gap: 0.7rem;
        padding: 1.15rem 1.2rem;
    }

    .store-cart-app--official .store-cart-summary-actions {
        grid-template-columns: 1fr;
    }

    .store-cart-app--official .store-cart-related {
        display: block;
        border-radius: var(--store-cart-radius);
        border: 1px solid var(--store-cart-line);
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
        overflow: hidden;
    }

    .store-cart-app--official .store-cart-item {
        grid-template-columns: 5rem minmax(0, 1fr);
        padding: 1rem 1.1rem;
    }

    .store-cart-app--official .store-dock {
        display: none;
    }
}

/* Legacy hero alias (if any residual markup) */
.store-cart-hero,
.store-cart-toolbar {
    display: none;
}

.store-cart-item-checkout {
    display: none;
}

/* —— Buyer order history —— */
/* Orders — layout selaras Official Store */
.store-body--app:has(.store-orders-app) {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
    overflow-x: clip;
}

@media (min-width: 960px) {
    .store-body--app:has(.store-orders-app) {
        padding-bottom: 0;
    }
}

.store-orders-app {
    --store-orders-pad: 1rem;
    --store-orders-radius: 0.875rem;
    --store-orders-line: rgb(226 232 240);
    --store-orders-ink: rgb(15 23 42);
    --store-orders-muted: rgb(100 116 139);
    --store-orders-brand: rgb(5 150 105);
    --store-orders-brand-dark: rgb(4 120 87);
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    overflow-x: clip;
    background: #f3f4f6;
    min-height: 100vh;
}

.store-orders-app-bar {
    z-index: 50;
}

.store-orders-app-bar-center {
    display: none;
}

.store-orders-shell {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.store-orders-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.875rem var(--store-orders-pad) 1rem;
    display: grid;
    gap: 0.875rem;
    box-sizing: border-box;
}

.store-orders-app .store-checkout-layout {
    gap: 1rem;
}

.store-orders-app .store-checkout-primary {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.store-orders-panel {
    display: grid;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--store-orders-line);
    border-radius: var(--store-orders-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    box-sizing: border-box;
}

.store-orders-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.store-orders-panel-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-orders-ink);
    line-height: 1.25;
}

.store-orders-panel-sub {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--store-orders-muted);
    line-height: 1.35;
}

.store-orders-panel-sub strong {
    font-weight: 800;
    color: var(--store-orders-ink);
    font-variant-numeric: tabular-nums;
}

.store-orders-panel-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    height: 2.375rem;
    padding: 0 0.85rem;
    border: 1px solid var(--store-orders-line);
    border-radius: 0.65rem;
    background: #fff;
    color: var(--store-orders-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.store-orders-panel-cart:hover {
    border-color: rgb(203 213 225);
    background: rgb(248 250 252);
}

.store-orders-panel-cart .ui-icon {
    width: 1rem;
    height: 1rem;
    font-size: 0.9375rem;
}

/* Keranjang sudah di topbar (+ dock mobile) — panel cukup judul */
.store-orders-panel-cart {
    display: none;
}

.store-orders-privacy {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid rgb(167 243 208 / 0.75);
    background: rgb(236 253 245 / 0.7);
    font-size: 0.6875rem;
    line-height: 1.45;
    color: rgb(6 95 70);
}

.store-orders-empty {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 2.25rem 1.25rem;
    border-radius: var(--store-orders-radius);
    border: 1px dashed var(--store-orders-line);
    background: #fff;
    text-align: center;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}

.store-orders-empty.hidden {
    display: none;
}

.store-orders-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--store-orders-line);
    background: rgb(248 250 252);
    color: var(--store-orders-muted);
    font-size: 1.125rem;
}

.store-orders-empty-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-orders-ink);
}

.store-orders-empty-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--store-orders-muted);
}

.store-orders-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.65rem;
}

.store-orders-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: 0.65rem;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.store-orders-empty-btn--primary {
    background: var(--store-orders-brand);
    border-color: var(--store-orders-brand);
    color: #fff;
}

.store-orders-empty-btn--primary:hover {
    background: var(--store-orders-brand-dark);
    border-color: var(--store-orders-brand-dark);
    color: #fff;
}

.store-orders-empty-btn--ghost {
    background: #fff;
    border-color: var(--store-orders-line);
    color: var(--store-orders-ink);
}

.store-orders-empty-btn--ghost:hover {
    background: rgb(248 250 252);
}

.store-orders-list {
    display: grid;
    gap: 0.75rem;
}

.store-orders-list.hidden {
    display: none;
}

.store-orders-card {
    border-radius: var(--store-orders-radius);
    border: 1px solid var(--store-orders-line);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    overflow: hidden;
}

.store-orders-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgb(241 245 249);
}

.store-orders-card-no {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--store-orders-ink);
    font-variant-numeric: tabular-nums;
}

.store-orders-card-date {
    margin: 0.15rem 0 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--store-orders-muted);
}

.store-orders-status {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.28rem 0.55rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.store-orders-status.order-status--pending { background: rgb(254 243 199); color: rgb(180 83 9); }
.store-orders-status.order-status--paid { background: rgb(209 250 229); color: rgb(4 120 87); }
.store-orders-status.order-status--processing { background: rgb(219 234 254); color: rgb(29 78 216); }
.store-orders-status.order-status--shipped { background: rgb(224 231 255); color: rgb(67 56 202); }
.store-orders-status.order-status--completed { background: rgb(241 245 249); color: rgb(51 65 85); }
.store-orders-status.order-status--cancelled { background: rgb(255 228 230); color: rgb(190 18 60); }
.store-orders-status.order-status--expired { background: rgb(241 245 249); color: rgb(100 116 139); }

.store-orders-card-body {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem 1rem;
}

.store-orders-card-media {
    overflow: hidden;
    border-radius: 0.65rem;
    border: 1px solid var(--store-orders-line);
    background: rgb(248 250 252);
    aspect-ratio: 1;
    text-decoration: none;
}

.store-orders-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-orders-card-info {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    align-content: start;
}

.store-orders-card-name {
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--store-orders-ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.store-orders-card-name:hover {
    color: var(--store-orders-brand-dark);
}

.store-orders-card-meta,
.store-orders-card-buyer {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--store-orders-muted);
    line-height: 1.35;
}

.store-orders-card-total {
    margin: 0;
    justify-self: end;
    align-self: start;
    text-align: right;
    font-size: 0.9375rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--store-orders-brand-dark);
    white-space: nowrap;
    line-height: 1.3;
}

@media (max-width: 419px) {
    .store-orders-card-body {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: 0.625rem;
    }

    .store-orders-card-total {
        grid-column: 2;
        justify-self: end;
        font-size: 0.875rem;
    }
}

.store-app-bar-btn--orders {
    flex-direction: column;
    gap: 0.05rem;
    min-width: 2.75rem;
}

.store-app-bar-btn--orders .store-app-bar-btn-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1;
}

.store-orders-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 1rem 1rem;
}

.store-orders-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0 0.8rem;
    border-radius: 0.6rem;
    border: 1px solid var(--store-orders-line);
    background: #fff;
    color: var(--store-orders-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.store-orders-action .ui-icon {
    width: 0.95rem;
    height: 0.95rem;
}

.store-orders-action--pay {
    border-color: var(--store-orders-brand);
    background: var(--store-orders-brand);
    color: #fff;
}

.store-orders-action--pay:hover {
    background: var(--store-orders-brand-dark);
    border-color: var(--store-orders-brand-dark);
    color: #fff;
}

.store-orders-action--warn {
    border-color: rgb(253 230 138);
    background: rgb(255 251 235);
    color: rgb(180 83 9);
}

.store-orders-action--warn:hover {
    background: rgb(254 243 199);
}

.store-orders-action--danger {
    border-color: rgb(254 205 211);
    background: rgb(255 241 242);
    color: rgb(190 18 60);
}

.store-orders-action--danger:hover {
    background: rgb(255 228 230);
}

.store-orders-action:disabled {
    opacity: 0.55;
    cursor: wait;
}

.store-orders-action-note {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--store-orders-muted);
    line-height: 1.4;
}

.store-orders-card.is-busy {
    opacity: 0.72;
    pointer-events: none;
}

.store-orders-card.is-removing {
    opacity: 0;
    transform: translateY(-0.35rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.store-product-topbar-orders {
    margin-right: 0.25rem;
}

@media (min-width: 960px) {
    .store-app-bar-btn--orders .store-app-bar-btn-label {
        font-size: 0.625rem;
    }

    .store-orders-app--official {
        --store-orders-max: 1120px;
        --store-orders-pad: 1.25rem;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: 0 0 2.5rem;
        background: #f3f4f6;
        min-height: 100vh;
    }

    .store-orders-app--official .store-orders-app-bar {
        position: sticky;
        top: 0;
        z-index: 40;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background: #fff;
        border-bottom: 1px solid var(--store-orders-line);
        box-shadow: none;
    }

    .store-orders-app--official .store-orders-app-bar.is-scrolled,
    .store-orders-app--official .store-orders-app-bar:not(.is-scrolled) {
        background: #fff;
        border-bottom: 1px solid var(--store-orders-line);
        box-shadow: none;
    }

    .store-orders-app--official .store-orders-app-bar-inner {
        max-width: var(--store-orders-max);
        width: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 0.75rem;
        align-items: center;
        min-height: 3.5rem;
        padding: 0.7rem var(--store-orders-pad);
        padding-top: 0.7rem;
        box-sizing: border-box;
    }

    .store-orders-app--official .store-orders-app-bar-back {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        padding: 0;
        border: 1px solid var(--store-orders-line);
        border-radius: 0.65rem;
        background: #fff;
        color: var(--store-orders-ink);
    }

    .store-orders-app--official .store-orders-app-bar-back:hover {
        border-color: rgb(203 213 225);
        background: rgb(248 250 252);
        color: var(--store-orders-ink);
    }

    .store-orders-app--official .store-orders-app-bar-title {
        flex: initial;
        min-width: 0;
    }

    .store-orders-app--official .store-orders-app-bar-title .store-app-bar-eyebrow {
        font-size: 0.625rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--store-orders-brand-dark);
    }

    .store-orders-app--official .store-orders-app-bar-title .store-app-bar-title {
        margin-top: 0.1rem;
        font-size: 0.9375rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--store-orders-ink);
    }

    .store-orders-app--official .store-orders-app-bar-center {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        min-width: 0;
    }

    .store-orders-app--official .store-orders-app-bar-store {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        height: 2.75rem;
        padding: 0 0.9rem;
        border: 1px solid var(--store-orders-line);
        border-radius: 0.65rem;
        background: #fff;
        color: var(--store-orders-ink);
        font: inherit;
        font-size: 0.8125rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    .store-orders-app--official .store-orders-app-bar-store:hover {
        border-color: rgb(203 213 225);
        background: rgb(248 250 252);
    }

    .store-orders-app--official .store-orders-app-bar-store .ui-icon {
        width: 1rem;
        height: 1rem;
        font-size: 0.9375rem;
        color: var(--store-orders-muted);
    }

    .store-orders-app--official .store-orders-app-bar-count {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        height: 2.75rem;
        padding: 0 0.85rem;
        border-radius: 0.65rem;
        border: 1px solid rgb(167 243 208 / 0.8);
        background: rgb(236 253 245 / 0.75);
        color: var(--store-orders-brand-dark);
        font-size: 0.8125rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .store-orders-app--official .store-orders-app-bar-count strong {
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--store-orders-ink);
    }

    .store-orders-app--official .store-app-bar-btn--cart {
        margin-left: 0;
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        padding: 0;
        border: 1px solid var(--store-orders-line);
        border-radius: 0.65rem;
        background: #fff;
    }

    .store-orders-app--official .store-app-bar-btn--cart:hover {
        border-color: rgb(203 213 225);
        background: rgb(248 250 252);
        color: var(--store-orders-ink);
    }

    .store-orders-shell {
        max-width: var(--store-orders-max);
        margin: 0 auto;
        padding: 1.15rem var(--store-orders-pad) 0;
        width: 100%;
        box-sizing: border-box;
    }

    .store-orders-main {
        padding: 0;
        gap: 1rem;
    }

    .store-orders-app .store-checkout-primary {
        max-width: 40rem;
        width: 100%;
    }

    .store-orders-app .store-checkout-layout--with-aside .store-checkout-primary {
        max-width: none;
        margin-inline: 0;
    }

    .store-orders-app:not(:has(.store-checkout-layout--with-aside)) .store-checkout-primary {
        margin-inline: auto;
    }

    .store-orders-app .store-dock {
        display: none;
    }

    .store-orders-panel {
        padding: 1.15rem 1.25rem;
    }

    .store-orders-panel-title {
        font-size: 1.125rem;
    }

    .store-orders-app--official .store-checkout-related {
        border-radius: var(--store-orders-radius);
        border: 1px solid var(--store-orders-line);
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    }
}

/* ========== Official Store — brand + desktop layout ========== */
.store-app-bar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    text-decoration: none;
    color: inherit;
    border-radius: 0.5rem;
    transition: opacity 0.15s ease;
}

.store-app-bar-brand:hover {
    opacity: 0.88;
}

.store-app-bar-brand:focus-visible {
    outline: 2px solid rgb(5 150 105);
    outline-offset: 2px;
}

.store-app-bar-brand-img {
    display: block;
    width: auto;
    height: 1.75rem;
    max-width: 1.75rem;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
}

.store-app-bar-brand--wide-logo .store-app-bar-brand-img {
    max-width: 5.5rem;
    object-position: left center;
}

.store-app-bar-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: linear-gradient(145deg, rgb(16 185 129), rgb(5 150 105));
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.store-app-bar-brand-text {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgb(15 23 42);
    line-height: 1.2;
}

.store-official .store-app-bar {
    background: #fff;
    border-bottom: 1px solid rgb(226 232 240);
}

.store-official .store-app-bar.is-scrolled,
.store-official .store-app-bar:not(.is-scrolled) {
    background: #fff;
    border-bottom: 1px solid rgb(226 232 240);
    box-shadow: none;
}

.store-official .store-app-bar-inner--minimal {
    width: 100%;
    max-width: none;
    gap: 0.5rem;
    padding-inline: 0.875rem;
    box-sizing: border-box;
}

/* Mobile Official Store: brand (logo + UMKM Hub) menggantikan Official Store / nama toko */
.store-official .store-app-bar-title-wrap--mobile {
    display: none !important;
}

.store-official .store-app-bar-btn--cart {
    margin-left: 0;
}

.store-official .store-app-bar-btn--search {
    margin-left: 0;
}

@media (max-width: 379px) {
    .store-official .store-app-bar-brand-img,
    .store-official .store-app-bar-brand-mark {
        width: 1.625rem;
        height: 1.625rem;
        max-width: 1.625rem;
    }

    .store-official .store-app-bar-brand-text {
        font-size: 0.8125rem;
    }

    .store-official .store-app-bar-inner--minimal {
        gap: 0.375rem;
        padding-inline: 0.65rem;
    }
}

.store-app-bar-desktop-search,
.store-profile-stats,
.store-official-tabs,
.store-tab-panel--home,
.store-profile-eyebrow--desktop,
.store-profile-desc--desktop {
    display: none;
}

.store-tab-panel--products,
.store-tab-panel--reviews {
    display: block;
}

.store-profile-card--official .store-profile-avatar {
    pointer-events: none;
}

.store-profile-card--official .store-profile-name {
    margin: 0;
}

@media (min-width: 1024px) {
    .store-official {
        --store-official-max: 1120px;
        --store-official-pad: 1.25rem;
        --store-official-radius: 0.875rem;
        --store-official-line: rgb(226 232 240);
        --store-official-ink: rgb(15 23 42);
        --store-official-muted: rgb(100 116 139);
        --store-official-brand: rgb(5 150 105);
        --store-official-brand-dark: rgb(4 120 87);
        background: #f3f4f6;
        min-height: 100vh;
        padding-bottom: 3rem;
    }

    .store-official .store-dock {
        display: none !important;
    }

    .store-official .store-app-bar {
        position: sticky;
        top: 0;
        z-index: 40;
        background: #fff;
        border-bottom: 1px solid var(--store-official-line);
    }

    .store-official .store-app-bar-inner--minimal {
        max-width: var(--store-official-max);
        margin: 0 auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 2.75rem;
        gap: 0.85rem;
        align-items: center;
        padding: 0.7rem var(--store-official-pad);
    }

    .store-official .store-app-bar-brand {
        flex: 0 0 auto;
        max-width: 12.5rem;
        gap: 0.55rem;
    }

    .store-official .store-app-bar-brand-img {
        width: auto;
        height: 2rem;
        max-width: 2rem;
    }

    .store-official .store-app-bar-brand--wide-logo .store-app-bar-brand-img {
        max-width: 6.5rem;
    }

    .store-official .store-app-bar-brand-mark {
        width: 2rem;
        height: 2rem;
        font-size: 0.625rem;
        border-radius: 0.55rem;
    }

    .store-official .store-app-bar-brand-text {
        display: inline;
        max-width: 9rem;
        font-size: 0.9375rem;
    }

    .store-app-bar-title-wrap--mobile,
    .store-app-bar-btn--mobile-search,
    .store-toolbar-search--mobile {
        display: none !important;
    }

    .store-app-bar-desktop-search {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        width: 100%;
        max-width: none;
        height: 2.75rem;
        padding: 0 0.85rem 0 0.45rem;
        border: 1px solid rgb(203 213 225);
        border-radius: 0.65rem;
        background: #fff;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .store-app-bar-desktop-search:focus-within {
        border-color: var(--store-official-brand);
        box-shadow: 0 0 0 3px rgb(5 150 105 / 0.12);
    }

    .store-app-bar-desktop-search .store-toolbar-search-icon {
        color: var(--store-official-muted);
        flex: 0 0 auto;
    }

    .store-app-bar-desktop-scope {
        flex: 0 0 auto;
        max-width: 11rem;
        padding: 0.28rem 0.55rem;
        border-radius: 0.45rem;
        background: rgb(236 253 245);
        color: var(--store-official-brand-dark);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .store-app-bar-desktop-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        border: 0;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--store-official-ink);
    }

    .store-app-bar-desktop-input::placeholder {
        color: rgb(148 163 184);
        font-weight: 500;
    }

    .store-official .store-app-bar-btn--cart {
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--store-official-line);
        border-radius: 0.65rem;
        background: #fff;
    }

    .store-official-shell {
        max-width: var(--store-official-max);
        margin: 0 auto;
        padding: 1rem var(--store-official-pad) 0;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .store-official-shell > .store-tab-panel,
    .store-official-shell > .store-official-tabs,
    .store-official-shell > .store-hero-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .store-official .store-hero-section {
        margin: 0;
        padding: 0;
    }

    .store-profile-card--official {
        padding: 1.35rem 1.5rem;
        border: 1px solid var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    }

    /* Desktop hero: 2 kolom — identitas | aksi + rating/terjual */
    .store-profile-card--official .store-profile-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1.75rem;
        row-gap: 0;
        align-items: center;
    }

    .store-profile-card--official .store-profile-identity {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 1.15rem;
        row-gap: 0;
        align-items: start;
        min-width: 0;
    }

    .store-profile-card--official .store-profile-info {
        min-width: 0;
        align-self: center;
    }

    .store-profile-card--official .store-profile-avatar {
        width: 5.75rem;
        height: 5.75rem;
        border-radius: 0.85rem;
        border: 1px solid var(--store-official-line);
        background: rgb(248 250 252);
        overflow: hidden;
        align-self: start;
        margin-top: 0;
    }

    .store-profile-card--official .store-profile-side {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 1.15rem;
        min-width: 0;
        max-width: 100%;
    }

    .store-profile-card--official .store-profile-actions {
        justify-content: flex-end;
        align-self: center;
        margin: 0;
        flex: 0 0 auto;
    }

    .store-profile-card--official .store-profile-stats {
        justify-content: flex-start;
        align-self: center;
        margin: 0;
        flex: 0 0 auto;
    }

    .store-profile-card--official .store-profile-avatar-img,
    .store-profile-card--official .store-profile-avatar-fallback {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .store-profile-card--official .store-profile-avatar-fallback {
        display: grid;
        place-items: center;
        font-size: 1.75rem;
        font-weight: 800;
        color: var(--store-official-brand-dark);
        background: rgb(236 253 245);
    }

    .store-profile-eyebrow--desktop {
        display: block;
        margin: 0 0 0.3rem;
        font-size: 0.6875rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--store-official-brand);
        line-height: 1.2;
    }

    .store-profile-card--official .store-profile-name-row {
        align-items: center;
        gap: 0.5rem;
    }

    .store-profile-card--official .store-profile-name {
        font-size: 1.375rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.2;
        color: var(--store-official-ink);
    }

    .store-profile-card--official .store-profile-badge {
        font-size: 0.6875rem;
        padding: 0.2rem 0.5rem;
    }

    .store-profile-desc--desktop {
        display: -webkit-box;
        margin: 0.4rem 0 0;
        max-width: 36rem;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.45;
        color: var(--store-official-muted);
    }

    .store-profile-meta--mobile,
    .store-profile-metrics--mobile,
    .store-profile-tagline {
        display: none;
    }

    .store-profile-card--official .store-profile-actions {
        --store-profile-action-h: 2.5rem;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0;
        width: auto;
        padding-top: 0;
        border-top: 0;
    }

    .store-profile-card--official .store-profile-action {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        height: var(--store-profile-action-h);
        min-height: var(--store-profile-action-h);
        max-height: var(--store-profile-action-h);
        min-width: 0;
        padding: 0 1rem;
        border-radius: 0.65rem;
        font-size: 0.8125rem;
        font-weight: 700;
        line-height: 1;
        border: 1px solid transparent;
        box-shadow: none;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .store-profile-card--official .store-profile-action .ui-btn-label {
        display: inline;
        line-height: 1;
        font-size: inherit;
    }

    .store-profile-card--official .store-profile-action .ui-icon,
    .store-profile-card--official .store-profile-action .ui-emoji-icon,
    .store-profile-card--official .store-profile-action .ui-brand-icon,
    .store-profile-card--official .store-profile-action .ui-svg-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.05rem;
        height: 1.05rem;
        flex: 0 0 1.05rem;
        font-size: 1rem;
        line-height: 1;
        margin: 0;
    }

    .store-profile-card--official .store-profile-action .ui-brand-icon svg,
    .store-profile-card--official .store-profile-action .ui-svg-icon svg {
        width: 1.05rem;
        height: 1.05rem;
        display: block;
    }

    .store-profile-card--official .store-profile-action--primary {
        background: var(--store-official-brand);
        border-color: var(--store-official-brand);
        color: #fff;
    }

    .store-profile-card--official .store-profile-action--primary:hover {
        background: var(--store-official-brand-dark);
        border-color: var(--store-official-brand-dark);
        color: #fff;
    }

    .store-profile-card--official .store-profile-action--ghost {
        background: #fff;
        border-color: var(--store-official-line);
        color: var(--store-official-ink);
    }

    .store-profile-card--official .store-profile-action--ghost:hover {
        background: rgb(248 250 252);
        border-color: rgb(203 213 225);
    }

    .store-profile-card--official .store-profile-action--icon {
        position: relative;
        width: var(--store-profile-action-h);
        min-width: var(--store-profile-action-h);
        max-width: var(--store-profile-action-h);
        padding: 0;
        justify-content: center;
    }

    .store-profile-card--official .store-profile-action--icon .ui-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .store-profile-stats {
        display: flex;
        align-items: stretch;
        gap: 1rem;
        min-width: 0;
        text-align: left;
    }

    .store-profile-stats-block {
        display: grid;
        align-content: center;
        gap: 0.15rem;
        min-width: 0;
    }

    .store-profile-stats-block--rating {
        min-width: 6.5rem;
        text-decoration: none;
        color: inherit;
        border-radius: 0.5rem;
        outline-offset: 2px;
    }

    .store-profile-stats-block--rating:hover .store-profile-stats-caption {
        color: var(--store-official-brand-dark);
    }

    .store-profile-stats-row {
        display: inline-flex;
        align-items: baseline;
        gap: 0.28rem;
    }

    .store-profile-stats-divider {
        width: 1px;
        align-self: stretch;
        background: var(--store-official-line);
        margin: 0.15rem 0;
    }

    .store-profile-stats-star {
        color: #f59e0b;
        font-size: 1.05rem;
        line-height: 1;
    }

    .store-profile-stats-score {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--store-official-ink);
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    .store-profile-stats-count {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--store-official-muted);
        font-variant-numeric: tabular-nums;
    }

    .store-profile-stats-sold {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: rgb(51 65 85);
        line-height: 1.3;
    }

    .store-profile-stats-sold strong {
        font-weight: 800;
        color: var(--store-official-ink);
        font-variant-numeric: tabular-nums;
    }

    .store-profile-stats-caption {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--store-official-brand);
        line-height: 1.3;
    }

    .store-profile-stats-products {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--store-official-muted);
        line-height: 1.3;
    }

    .store-official-tabs {
        display: flex;
        align-items: stretch;
        gap: 0;
        margin: 0.85rem 0 1rem;
        padding: 0 0.35rem;
        border: 1px solid var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
        position: sticky;
        top: 3.45rem;
        z-index: 30;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    }

    .store-official-tab {
        appearance: none;
        border: 0;
        background: transparent;
        padding: 0.9rem 1.25rem;
        font: inherit;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--store-official-muted);
        cursor: pointer;
        position: relative;
        border-radius: 0;
    }

    .store-official-tab:hover {
        color: var(--store-official-ink);
    }

    .store-official-tab.is-active {
        color: var(--store-official-brand);
    }

    .store-official-tab.is-active::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0;
        height: 2.5px;
        border-radius: 999px 999px 0 0;
        background: var(--store-official-brand);
    }

    .store-tab-panel {
        display: none;
    }

    .store-tab-panel.is-active {
        display: block;
    }

    .store-tab-panel--home.is-active {
        display: grid;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .store-home-section {
        padding: 1.1rem 1.15rem 1.2rem;
        border: 1px solid var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .store-home-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.9rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgb(241 245 249);
        min-width: 0;
    }

    .store-home-section-title {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--store-official-ink);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .store-home-section-more {
        appearance: none;
        border: 0;
        background: transparent;
        color: var(--store-official-brand);
        font: inherit;
        font-size: 0.8125rem;
        font-weight: 700;
        cursor: pointer;
        padding: 0.25rem 0;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .store-home-section-more:hover {
        color: var(--store-official-brand-dark);
    }

    .store-home-section-body {
        display: flex;
        align-items: stretch;
        gap: 0.9rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .store-home-banner {
        flex: 0 0 9.25rem;
        width: 9.25rem;
        max-width: 9.25rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0.2rem;
        padding: 1.1rem 0.95rem;
        border-radius: 0.75rem;
        background: linear-gradient(160deg, #10b981 0%, #059669 48%, #047857 100%);
        color: #fff;
        min-height: 15rem;
        box-sizing: border-box;
    }

    .store-home-banner-kicker {
        margin: 0;
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0.88;
    }

    .store-home-banner-title {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    .store-home-banner-desc {
        margin: 0.1rem 0 0;
        font-size: 0.75rem;
        font-weight: 600;
        opacity: 0.9;
        line-height: 1.35;
    }

    .store-home-rail-wrap {
        position: relative;
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        max-width: 100%;
        align-self: stretch;
    }

    .store-home-rail-wrap::before,
    .store-home-rail-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0.15rem;
        width: 2.25rem;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .store-home-rail-wrap::before {
        left: 0;
        background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 0) 100%);
    }

    .store-home-rail-wrap::after {
        right: 0;
        background: linear-gradient(270deg, #fff 0%, rgb(255 255 255 / 0) 100%);
    }

    .store-home-rail-wrap.is-overflow-start::before,
    .store-home-rail-wrap.is-overflow-end::after {
        opacity: 1;
    }

    .store-home-rail {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.05rem 0.15rem 0.15rem;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        cursor: grab;
        scrollbar-width: none;
        -ms-overflow-style: none;
        outline: none;
    }

    .store-home-rail::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .store-home-rail.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
        scroll-snap-type: none;
        user-select: none;
        -webkit-user-drag: none;
    }

    .store-home-rail-nav {
        appearance: none;
        position: absolute;
        top: 50%;
        z-index: 5;
        display: inline-grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0;
        padding: 0;
        border: 1px solid var(--store-official-line);
        border-radius: 999px;
        background: rgb(255 255 255 / 0.96);
        color: var(--store-official-ink);
        box-shadow: 0 4px 14px rgb(15 23 42 / 0.1);
        transform: translateY(-55%);
        opacity: 0;
        pointer-events: none;
        cursor: pointer;
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            background 0.15s ease,
            border-color 0.15s ease,
            color 0.15s ease;
    }

    .store-home-rail-nav--prev {
        left: 0.35rem;
    }

    .store-home-rail-nav--next {
        right: 0.35rem;
    }

    .store-home-rail-nav-icon {
        display: inline-grid;
        place-items: center;
        line-height: 1;
        font-size: 1rem;
        font-weight: 700;
        pointer-events: none;
    }

    .store-home-rail-nav-icon .ui-icon {
        font-size: 1rem;
        line-height: 1;
        pointer-events: none;
    }

    /* Panah bisa diklik saat rail bisa digeser (hover wrap ATAU panah sendiri) */
    .store-home-rail-wrap.is-scrollable:hover .store-home-rail-nav:not(:disabled),
    .store-home-rail-wrap.is-scrollable:focus-within .store-home-rail-nav:not(:disabled),
    .store-home-rail-wrap.is-scrollable .store-home-rail-nav:not(:disabled):hover,
    .store-home-rail-wrap.is-scrollable .store-home-rail-nav:not(:disabled).is-hot {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-55%) scale(1);
    }

    .store-home-rail-nav:hover,
    .store-home-rail-nav.is-hot {
        background: #fff;
        border-color: var(--store-official-brand);
        color: var(--store-official-brand);
        transform: translateY(-55%) scale(1.05);
    }

    .store-home-rail-nav:disabled {
        opacity: 0.35 !important;
        pointer-events: none !important;
        cursor: default;
    }

    .store-home-rail-wrap.is-scrollable:hover .store-home-rail-nav:disabled,
    .store-home-rail-wrap.is-scrollable:focus-within .store-home-rail-nav:disabled {
        opacity: 0.35 !important;
    }

    .store-card--rail {
        flex: 0 0 11.25rem;
        width: 11.25rem;
        max-width: 11.25rem;
        min-width: 11.25rem;
        scroll-snap-align: start;
        border: 1px solid var(--store-official-line);
        border-radius: 0.75rem;
        background: #fff;
        overflow: hidden;
        box-sizing: border-box;
    }

    .store-card--rail .store-card-link {
        display: block;
    }

    .store-card--rail .store-card-media {
        border-radius: 0;
        aspect-ratio: 1;
    }

    .store-card--rail .store-card-body {
        padding: 0.65rem 0.7rem 0.75rem;
    }

    .store-card--rail .store-card-name {
        font-size: 0.8125rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.2em;
    }

    .store-card--rail .store-card-price {
        font-size: 0.875rem;
        font-weight: 800;
    }

    .store-home-empty {
        margin: 0;
        padding: 2.5rem 1.25rem;
        text-align: center;
        color: var(--store-official-muted);
        font-weight: 600;
        border: 1px dashed var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
    }

    /* Tab Produk — lebar & gaya selaras tab Beranda / nav */
    .store-tab-panel--products.is-active {
        display: grid;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .store-official .store-toolbar {
        --store-ctrl-h: 2.25rem;
        --store-ctrl-radius: 0.5rem;
        --store-ctrl-font: 0.8125rem;
        position: relative;
        top: auto;
        z-index: 1;
        margin: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border: 1px solid var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
        padding: 1.1rem 1.15rem 1.15rem;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
        gap: 0.85rem;
        overflow: hidden;
    }

    .store-official .store-toolbar.is-stuck,
    .store-official .store-toolbar.is-scrolled {
        margin: 0;
        border-radius: var(--store-official-radius);
        border: 1px solid var(--store-official-line);
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    }

    .store-official .store-toolbar-head {
        align-items: center;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgb(241 245 249);
        min-height: auto;
        min-width: 0;
    }

    .store-official .store-toolbar-title {
        font-size: 1.0625rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--store-official-ink);
        min-width: 0;
    }

    .store-official .store-toolbar-meta {
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--store-official-muted);
    }

    .store-official .store-toolbar-meta [data-store-visible-count] {
        color: var(--store-official-brand);
    }

    .store-official .store-toolbar-actions {
        gap: 0.5rem;
        min-width: 0;
    }

    .store-official .store-toolbar-tools {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.65rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .store-official .store-toolbar-filters {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 2.375rem;
        min-height: 2.375rem;
        max-height: 2.375rem;
        padding: 0.2rem;
        background: rgb(248 250 252);
        border-color: var(--store-official-line);
    }

    .store-official .store-toolbar-chip {
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--store-official-muted);
    }

    .store-official .store-toolbar-chip.is-active {
        color: var(--store-official-brand);
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
    }

    .store-official .store-toolbar-select {
        min-width: 7rem;
        max-width: 9.5rem;
    }

    .store-official .store-toolbar-select .smart-select-trigger {
        background: #fff;
        border-color: var(--store-official-line);
        font-size: 0.8125rem;
        font-weight: 700;
    }

    .store-official .store-feed {
        margin: 0;
        padding: 1.1rem 1.15rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border: 1px solid var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
        overflow: hidden;
    }

    .store-official .store-grid--premium,
    .store-official .store-feed .store-grid--premium {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.9rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .store-official .store-feed .store-card {
        border: 1px solid var(--store-official-line);
        border-radius: 0.75rem;
        box-shadow: none;
        background: #fff;
        min-width: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .store-official .store-feed .store-card-media {
        border-radius: 0;
        aspect-ratio: 1;
    }

    .store-official .store-feed .store-card-body {
        padding: 0.65rem 0.7rem 0.75rem;
        gap: 0.25rem;
    }

    .store-official .store-feed .store-card-name {
        font-size: 0.8125rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.2em;
    }

    .store-official .store-feed .store-card-price {
        font-size: 0.875rem;
        font-weight: 800;
    }

    .store-official .store-empty-filter {
        margin: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border: 1px dashed var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
        padding: 2.5rem 1.25rem;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    }

    .store-official .store-empty-filter-btn {
        border-color: var(--store-official-brand);
        background: var(--store-official-brand);
    }

    .store-official .store-empty-filter-btn:hover {
        border-color: var(--store-official-brand-dark);
        background: var(--store-official-brand-dark);
    }

    @media (min-width: 1200px) {
        .store-official .store-grid--premium,
        .store-official .store-feed .store-grid--premium {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.9rem;
        }

        .store-official .store-feed {
            padding: 1.1rem 1.15rem;
        }
    }

    /* Tab Ulasan — lebar & gaya selaras Beranda / Produk */
    .store-tab-panel--reviews.is-active {
        display: grid;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .store-tab-panel--reviews.is-active .store-info-section,
    .store-tab-panel--reviews.is-active .store-rating-section {
        margin: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 1.1rem 1.15rem 1.2rem;
        border: 1px solid var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
        overflow: hidden;
    }

    .store-tab-panel--reviews.is-active .store-section-head--row {
        align-items: center;
        gap: 0.75rem;
        margin: 0 0 0.9rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgb(241 245 249);
        min-width: 0;
    }

    .store-tab-panel--reviews.is-active .store-section-toggle {
        min-height: auto;
        padding: 0;
        cursor: default;
        pointer-events: none;
    }

    .store-tab-panel--reviews.is-active .store-section-title {
        font-size: 1.0625rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--store-official-ink);
    }

    .store-tab-panel--reviews.is-active .store-section-sub {
        margin-top: 0.15rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--store-official-muted);
        white-space: normal;
    }

    .store-tab-panel--reviews.is-active .store-section-chevron {
        display: none;
    }

    .store-tab-panel--reviews.is-active .store-rate-btn {
        flex: 0 0 auto;
        height: 2.375rem;
        min-height: 2.375rem;
        padding: 0 1rem;
        border-radius: 0.65rem;
        border: 1px solid var(--store-official-brand);
        background: var(--store-official-brand);
        font-size: 0.8125rem;
        font-weight: 700;
        box-shadow: none;
    }

    .store-tab-panel--reviews.is-active .store-rate-btn:hover {
        background: var(--store-official-brand-dark);
        border-color: var(--store-official-brand-dark);
    }

    .store-tab-panel--reviews.is-active .store-rate-btn-label {
        display: inline;
    }

    .store-tab-panel--reviews.is-active .store-rating-section.is-collapsed .store-rating-collapse,
    .store-tab-panel--reviews.is-active .store-info-section.is-collapsed .store-info-collapse {
        display: grid;
    }

    .store-tab-panel--reviews.is-active .store-rating-collapse[hidden],
    .store-tab-panel--reviews.is-active .store-info-collapse[hidden] {
        display: grid !important;
    }

    .store-tab-panel--reviews.is-active .store-info-collapse,
    .store-tab-panel--reviews.is-active .store-rating-collapse {
        margin-top: 0;
        gap: 0.85rem;
        min-width: 0;
    }

    .store-tab-panel--reviews.is-active .store-info-chips {
        gap: 0.5rem;
    }

    .store-tab-panel--reviews.is-active .store-info-chip {
        border-radius: 0.5rem;
        border-color: var(--store-official-line);
        background: rgb(248 250 252);
        font-size: 0.75rem;
        font-weight: 700;
        color: rgb(51 65 85);
        padding: 0.4rem 0.65rem;
    }

    .store-tab-panel--reviews.is-active .store-info-address--compact {
        padding: 0.75rem 0.85rem;
        border: 1px solid var(--store-official-line);
        border-radius: 0.75rem;
        background: rgb(248 250 252);
    }

    .store-tab-panel--reviews.is-active .store-info-address--compact p {
        font-size: 0.8125rem;
        line-height: 1.45;
        -webkit-line-clamp: 3;
        color: rgb(51 65 85);
    }

    .store-tab-panel--reviews.is-active .store-info-social {
        gap: 0.5rem;
    }

    .store-tab-panel--reviews.is-active .store-info-social-chip {
        border-radius: 0.5rem;
        border: 1px solid var(--store-official-line);
        background: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--store-official-muted);
    }

    .store-tab-panel--reviews.is-active .store-rating-overview {
        margin: 0;
        padding: 1rem 1.1rem;
        border-radius: 0.75rem;
        border: 1px solid var(--store-official-line);
        background: rgb(248 250 252);
        gap: 1rem;
    }

    .store-tab-panel--reviews.is-active .store-rating-big {
        color: var(--store-official-ink);
        font-size: 2rem;
    }

    .store-tab-panel--reviews.is-active .store-rating-count-label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--store-official-muted);
    }

    .store-tab-panel--reviews.is-active .store-rating-bar-label,
    .store-tab-panel--reviews.is-active .store-rating-bar-count {
        font-size: 0.75rem;
        color: var(--store-official-muted);
    }

    .store-tab-panel--reviews.is-active .store-rating-bar-track {
        background: rgb(226 232 240);
    }

    .store-tab-panel--reviews.is-active .store-review-list {
        gap: 0.75rem;
        min-width: 0;
    }

    .store-tab-panel--reviews.is-active .store-review-item {
        padding: 0.85rem 0.95rem;
        border-radius: 0.75rem;
        border: 1px solid var(--store-official-line);
        background: #fff;
        min-width: 0;
    }

    .store-tab-panel--reviews.is-active .store-review-name {
        font-size: 0.875rem;
        font-weight: 800;
        color: var(--store-official-ink);
    }

    .store-tab-panel--reviews.is-active .store-review-comment {
        font-size: 0.8125rem;
        line-height: 1.5;
        color: rgb(51 65 85);
    }

    .store-tab-panel--reviews.is-active .store-review-time {
        font-size: 0.75rem;
        color: var(--store-official-muted);
    }

    .store-tab-panel--reviews.is-active .store-review-empty {
        margin: 0;
        padding: 2.5rem 1.25rem;
        border: 1px dashed var(--store-official-line);
        border-radius: var(--store-official-radius);
        background: #fff;
        text-align: center;
    }

    .store-tab-panel--reviews.is-active .store-review-empty-title {
        font-size: 1.0625rem;
        color: var(--store-official-ink);
    }

    .store-tab-panel--reviews.is-active .store-review-empty-desc {
        font-size: 0.8125rem;
        color: var(--store-official-muted);
    }

    .store-official .store-app-footer {
        max-width: var(--store-official-max);
        margin: 1.75rem auto 0;
        padding: 0 var(--store-official-pad);
        color: var(--store-official-muted);
    }
}

/* ===== Product detail — Official Store (selaras cart / orders) ===== */
.store-body--app:has(.store-product-page--official) {
    background: #f3f4f6;
}

.store-product-page--official {
    --store-product-max: 1120px;
    --store-product-pad: 1rem;
    --store-product-radius: 0.875rem;
    --store-product-line: rgb(226 232 240);
    --store-product-ink: rgb(15 23 42);
    --store-product-muted: rgb(100 116 139);
    --store-product-brand: rgb(5 150 105);
    --store-product-brand-dark: rgb(4 120 87);
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    overflow-x: clip;
    background: #f3f4f6;
    min-height: 100vh;
}

.store-product-page--official .store-product-app-bar {
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--store-product-line);
    box-shadow: none;
}

.store-product-page--official .store-product-app-bar.is-scrolled,
.store-product-page--official .store-product-app-bar:not(.is-scrolled) {
    background: #fff;
    border-bottom: 1px solid var(--store-product-line);
    box-shadow: none;
}

.store-product-page--official .store-product-app-bar-inner {
    max-width: var(--store-product-max);
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    min-height: 3.5rem;
    padding: 0.65rem var(--store-product-pad);
    padding-top: calc(0.65rem + env(safe-area-inset-top, 0));
    box-sizing: border-box;
}

.store-product-page--official .store-product-app-bar-center {
    display: none;
}

.store-product-page--official .store-product-app-bar-back,
.store-product-page--official .store-product-app-bar-cart {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
    border: 1px solid var(--store-product-line);
    border-radius: 0.65rem;
    background: #fff;
    color: var(--store-product-ink);
}

.store-product-page--official .store-product-app-bar-back:hover,
.store-product-page--official .store-product-app-bar-cart:hover {
    border-color: rgb(203 213 225);
    background: rgb(248 250 252);
    color: var(--store-product-ink);
}

.store-product-page--official .store-product-app-bar-title {
    flex: initial;
    min-width: 0;
}

.store-product-page--official .store-product-app-bar-title .store-app-bar-eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    color: var(--store-product-muted);
}

.store-product-page--official .store-product-app-bar-title .store-app-bar-title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--store-product-ink);
    letter-spacing: -0.02em;
}

.store-product-page--official .store-product-shell {
    width: 100%;
    max-width: var(--store-product-max);
    margin: 0 auto;
    padding: 0.875rem var(--store-product-pad) 1.25rem;
    box-sizing: border-box;
}

.store-product-page--official .store-product-layout {
    gap: 0.875rem;
}

.store-product-page--official .store-product-showcase {
    padding: 0;
    border: 1px solid var(--store-product-line);
    border-radius: var(--store-product-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    overflow: hidden;
}

.store-product-page--official .store-gallery--slider {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.store-product-page--official .store-slider-stage {
    background: rgb(248 250 252);
}

.store-product-page--official .store-product-head {
    padding: 1rem 1.1rem 1.125rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.store-product-page--official .store-product-category {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--store-product-line);
    background: rgb(248 250 252);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--store-product-muted);
}

.store-product-page--official .store-product-title {
    margin: 0.55rem 0 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: var(--store-product-ink);
}

.store-product-page--official .store-product-price-row {
    margin-top: 0.65rem;
    align-items: baseline;
    gap: 0.35rem;
}

.store-product-page--official .store-product-price {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-product-brand-dark);
}

.store-product-page--official .store-product-unit {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--store-product-muted);
}

.store-product-page--official .store-product-chips {
    margin-top: 0.75rem;
    gap: 0.4rem;
}

.store-product-page--official .store-product-chip {
    border-radius: 0.5rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.6875rem;
}

.store-product-page--official .store-product-chip--muted {
    border: 1px solid var(--store-product-line);
    background: rgb(248 250 252);
}

.store-product-page--official .store-product-details {
    gap: 0.65rem;
}

.store-product-page--official .store-product-notice {
    border-radius: 0.75rem;
    border-color: rgb(253 230 138);
    background: rgb(255 251 235);
    font-size: 0.75rem;
}

.store-product-page--official .store-product-sheet {
    border-radius: var(--store-product-radius);
    border-color: var(--store-product-line);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}

.store-product-page--official .store-product-fold-head {
    padding: 0.9rem 1.1rem;
}

.store-product-page--official .store-product-fold-title {
    font-size: 0.875rem;
    color: var(--store-product-ink);
}

.store-product-page--official .store-product-fold-sub {
    color: var(--store-product-muted);
}

.store-product-page--official .store-product-fold-chevron {
    border-radius: 0.55rem;
    border-color: var(--store-product-line);
}

.store-product-page--official .store-product-fold[open] .store-product-fold-chevron {
    border-color: rgb(167 243 208);
    background: rgb(236 253 245);
    color: var(--store-product-brand-dark);
}

.store-product-page--official .store-product-fold-body {
    padding: 0.95rem 1.1rem 1.1rem;
}

.store-product-page--official .store-product-desc {
    font-size: 0.8125rem;
    color: rgb(51 65 85);
}

.store-product-page--official .store-spec-row {
    border-bottom-color: rgb(241 245 249);
}

.store-product-page--official .store-spec-row dt {
    color: var(--store-product-muted);
}

.store-product-page--official .store-spec-row dd {
    color: var(--store-product-ink);
}

.store-product-page--official .store-product-buy-panel {
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--store-product-line);
    border-radius: var(--store-product-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    gap: 0.7rem;
}

.store-product-page--official .store-product-buy-title {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-product-ink);
}

.store-product-page--official .store-product-buy-sub {
    font-size: 0.8125rem;
    color: var(--store-product-muted);
}

.store-product-page--official .store-product-buy-primary,
.store-product-page--official .store-product-bar-buy {
    border: 1px solid var(--store-product-brand);
    background: var(--store-product-brand);
    color: #fff;
    border-radius: 0.65rem;
    font-weight: 800;
    box-shadow: none;
}

.store-product-page--official .store-product-buy-primary:hover,
.store-product-page--official .store-product-bar-buy:hover {
    border-color: var(--store-product-brand-dark);
    background: var(--store-product-brand-dark);
    color: #fff;
}

.store-product-page--official .store-product-buy-cart {
    border: 1px solid rgb(167 243 208);
    background: rgb(236 253 245);
    color: var(--store-product-brand-dark);
    border-radius: 0.65rem;
}

.store-product-page--official .store-product-buy-cart:hover {
    border-color: var(--store-product-brand);
    background: rgb(209 250 229);
}

.store-product-page--official .store-product-buy-view {
    border: 1px solid var(--store-product-line);
    background: #fff;
    color: var(--store-product-ink);
    border-radius: 0.65rem;
}

.store-product-page--official .store-product-buy-view:hover {
    background: rgb(248 250 252);
    border-color: rgb(203 213 225);
}

.store-product-page--official .store-product-buy-wa {
    margin-top: 0.15rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid var(--store-product-line);
    background: rgb(248 250 252);
    color: var(--store-product-ink);
    font-size: 0.8125rem;
    font-weight: 700;
}

.store-product-page--official .store-product-buy-wa:hover {
    border-color: rgb(203 213 225);
    background: #fff;
    color: var(--store-product-brand-dark);
}

.store-product-page--official .store-product-bar {
    border-top: 1px solid var(--store-product-line);
    background: rgb(255 255 255 / 0.98);
    box-shadow: 0 -4px 16px rgb(15 23 42 / 0.04);
}

.store-product-page--official .store-product-bar-inner {
    max-width: var(--store-product-max);
    padding-inline: 0;
}

.store-product-page--official .store-product-bar-cart {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(167 243 208);
    border-radius: 0.65rem;
    background: rgb(236 253 245);
    color: var(--store-product-brand-dark);
}

@media (max-width: 959px) {
    .store-product-page--official.store-product {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
        padding-top: 0;
    }

    .store-product-page--official .store-product-shell {
        padding-top: 0;
        padding-inline: 0;
    }

    .store-product-page--official .store-product-layout {
        padding-inline: 0;
        padding-top: 0;
        gap: 0.75rem;
    }

    .store-product-page--official .store-product-showcase {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        box-shadow: none;
    }

    .store-product-page--official .store-product-details {
        padding-inline: var(--store-product-pad);
    }

    .store-product-page--official .store-product-buy {
        padding-inline: var(--store-product-pad);
        padding-bottom: 0.25rem;
    }
}

@media (min-width: 960px) {
    .store-body--app:has(.store-product-page--official) {
        padding-bottom: 0;
    }

    .store-product-page--official {
        --store-product-pad: 1.25rem;
        padding-bottom: 2.5rem;
    }

    .store-product-page--official.store-product {
        width: 100%;
        max-width: none;
        padding-top: 0;
        padding-bottom: 2.5rem;
    }

    .store-product-page--official .store-product-app-bar {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .store-product-page--official .store-product-app-bar-inner {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 0.75rem;
        padding: 0.7rem var(--store-product-pad);
    }

    .store-product-page--official .store-product-app-bar-center {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .store-product-page--official .store-product-app-bar-store,
    .store-product-page--official .store-product-app-bar-orders-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-height: 2.5rem;
        padding: 0.4rem 0.75rem;
        border: 1px solid var(--store-product-line);
        border-radius: 0.65rem;
        background: #fff;
        color: var(--store-product-ink);
        font-size: 0.8125rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    .store-product-page--official .store-product-app-bar-store:hover,
    .store-product-page--official .store-product-app-bar-orders-link:hover {
        border-color: rgb(203 213 225);
        background: rgb(248 250 252);
        color: var(--store-product-ink);
    }

    .store-product-page--official .store-product-app-bar-store .ui-icon,
    .store-product-page--official .store-product-app-bar-orders-link .ui-icon {
        width: 1rem;
        height: 1rem;
        font-size: 1rem;
    }

    .store-product-page--official .store-product-app-bar-back,
    .store-product-page--official .store-product-app-bar-cart {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
    }

    .store-product-page--official .store-product-shell {
        padding: 1.25rem var(--store-product-pad) 2rem;
    }

    .store-product-page--official .store-product-layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 22.5rem);
        gap: 1.25rem;
        align-items: start;
    }

    .store-product-page--official .store-product-buy {
        position: sticky;
        top: 4.75rem;
    }

    .store-product-page--official .store-gallery--slider:not([data-slide-count="0"]):not([data-slide-count="1"]) {
        border-radius: 0;
        padding: 0.875rem;
    }

    .store-product-page--official .store-gallery--slider:not([data-slide-count="0"]):not([data-slide-count="1"]) .store-slider-stage {
        border-radius: 0.75rem;
        border-color: var(--store-product-line);
        background: rgb(248 250 252);
    }

    .store-product-page--official .store-product-title {
        font-size: 1.375rem;
    }

    .store-product-page--official .store-product-price {
        font-size: 1.5rem;
    }
}

/* ===== Checkout — Official Store (selaras cart / orders / product) ===== */
.store-body--app:has(.store-checkout-app--official) {
    background: #f3f4f6;
}

.store-checkout-app--official {
    --store-checkout-max: 1120px;
    --store-checkout-pad: 1rem;
    --store-checkout-radius: 0.875rem;
    --store-checkout-line: rgb(226 232 240);
    --store-checkout-ink: rgb(15 23 42);
    --store-checkout-muted: rgb(100 116 139);
    --store-checkout-brand: rgb(5 150 105);
    --store-checkout-brand-dark: rgb(4 120 87);
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    overflow-x: clip;
    background: #f3f4f6;
    min-height: 100vh;
}

.store-checkout-app--official .store-checkout-shell {
    width: 100%;
    max-width: var(--store-checkout-max);
    margin: 0 auto;
    box-sizing: border-box;
}

.store-checkout-app--official .store-checkout-main {
    padding: 0.875rem var(--store-checkout-pad) 1.25rem;
    gap: 0.875rem;
}

.store-checkout-app--official .store-checkout-primary {
    max-width: none;
    margin-inline: 0;
    gap: 0.75rem;
}

.store-checkout-app--official .store-checkout-panel-head {
    display: grid;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--store-checkout-line);
    border-radius: var(--store-checkout-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    box-sizing: border-box;
}

.store-checkout-app--official .store-checkout-panel-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.store-checkout-app--official .store-checkout-panel-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--store-checkout-ink);
    line-height: 1.25;
}

.store-checkout-app--official .store-checkout-panel-sub {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--store-checkout-muted);
    line-height: 1.35;
}

.store-checkout-app--official .store-checkout-panel-sub strong {
    font-weight: 800;
    color: var(--store-checkout-ink);
    font-variant-numeric: tabular-nums;
}

.store-checkout-app--official .store-checkout-panel-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-height: 2.375rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--store-checkout-line);
    border-radius: 0.65rem;
    background: #fff;
    color: var(--store-checkout-ink);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.store-checkout-app--official .store-checkout-panel-cart:hover {
    border-color: rgb(203 213 225);
    background: rgb(248 250 252);
}

.store-checkout-app--official .store-checkout-panel-cart .ui-icon {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

.store-checkout-app--official .store-checkout-privacy {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--store-checkout-muted);
}

.store-checkout-app--official .store-checkout-sheet {
    border-radius: var(--store-checkout-radius);
    border: 1px solid var(--store-checkout-line);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}

.store-checkout-app--official .store-checkout-cart-hint {
    background: rgb(236 253 245);
    border-bottom-color: rgb(167 243 208 / 0.55);
}

.store-checkout-app--official .store-checkout-items-title {
    font-size: 0.9375rem;
}

.store-checkout-app--official .store-checkout-form-head {
    border-top: 1px solid rgb(241 245 249);
    padding-top: 0.9rem;
}

.store-checkout-app--official .store-checkout-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--store-checkout-ink);
}

.store-checkout-app--official .store-checkout-sub {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--store-checkout-muted);
}

.store-checkout-app--official .store-checkout-block-title--section {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--store-checkout-ink);
}

.store-checkout-app--official .store-checkout-totals {
    border-color: var(--store-checkout-line);
    border-radius: 0.75rem;
    background: rgb(248 250 252);
}

.store-checkout-app--official .store-checkout-submit {
    border-radius: 0.65rem;
    border-color: var(--store-checkout-brand);
    background: var(--store-checkout-brand);
    box-shadow: none;
}

.store-checkout-app--official .store-checkout-submit:hover:not(:disabled) {
    border-color: var(--store-checkout-brand-dark);
    background: var(--store-checkout-brand-dark);
}

.store-checkout-app--official .store-checkout-secondary-links a {
    color: var(--store-checkout-muted);
}

.store-checkout-app--official .store-checkout-secondary-links a:hover {
    color: var(--store-checkout-brand-dark);
}

.store-checkout-app--official .store-checkout-related {
    border-radius: var(--store-checkout-radius);
    border: 1px solid var(--store-checkout-line);
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
}

.store-checkout-app--official .store-checkout-related-kicker {
    color: var(--store-checkout-muted);
}

.store-checkout-app--official .store-checkout-related-item {
    border-color: var(--store-checkout-line);
}

.store-checkout-app--official .store-checkout-related-item:hover {
    border-color: rgb(203 213 225);
    background: rgb(248 250 252);
}

.store-checkout-app--official .store-checkout-related-add {
    border-radius: 0.5rem;
}

.store-checkout-app--official .store-checkout-related-buy {
    border-radius: 0.5rem;
    background: var(--store-checkout-brand);
    border-color: var(--store-checkout-brand);
}

.store-checkout-app--official .store-checkout-related-buy:hover {
    background: var(--store-checkout-brand-dark);
    border-color: var(--store-checkout-brand-dark);
}

.store-checkout-app--official .store-checkout-bar {
    border-top: 1px solid var(--store-checkout-line);
    background: rgb(255 255 255 / 0.98);
    box-shadow: 0 -4px 16px rgb(15 23 42 / 0.04);
}

.store-checkout-app--official .store-checkout-bar-inner {
    max-width: var(--store-checkout-max);
}

.store-checkout-app--official .store-checkout-bar-btn {
    border-radius: 0.65rem;
    border: 1px solid var(--store-checkout-brand);
    background: var(--store-checkout-brand);
    box-shadow: none;
}

.store-checkout-app--official .store-checkout-bar-btn:hover:not(:disabled) {
    border-color: var(--store-checkout-brand-dark);
    background: var(--store-checkout-brand-dark);
}

.store-checkout-app--official .store-pay-method.is-selected {
    border-color: var(--store-checkout-brand);
    background: rgb(236 253 245);
}

@media (max-width: 959px) {
    .store-checkout-app--official {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-top: 0;
    }

    .store-checkout-app--official .store-checkout-main {
        padding-top: 0.75rem;
    }

    .store-checkout-app--official .store-checkout-panel-cart span {
        display: none;
    }

    .store-checkout-app--official .store-checkout-panel-cart {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        padding: 0;
        justify-content: center;
    }
}

@media (min-width: 960px) {
    .store-body--app:has(.store-checkout-app--official) {
        padding-bottom: 0;
    }

    .store-checkout-app--official {
        --store-checkout-pad: 1.25rem;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-top: 0;
        padding-bottom: 2.5rem;
    }

    .store-checkout-app--official .store-checkout-main {
        padding: 1.25rem var(--store-checkout-pad) 2rem;
    }

    .store-checkout-app--official .store-checkout-layout--with-aside {
        grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 22rem);
        gap: 1.25rem;
        align-items: start;
    }

    .store-checkout-app--official .store-checkout-layout--with-aside .store-checkout-primary {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .store-checkout-app--official:not(:has(.store-checkout-layout--with-aside)) .store-checkout-primary {
        max-width: 40rem;
        margin-inline: 0;
    }

    .store-checkout-app--official .store-checkout-aside {
        position: sticky;
        top: 4.75rem;
        align-self: start;
    }
}