:root {
  --pv-canvas: #f5f4f8; --pv-ink: #1a1a1a; --pv-muted: #6e6885; --pv-line: #ded9e9; --pv-surface: #ffffff;
  --pv-chip-bg: #1a1a1a; --pv-chip-ink: #fbfafd;
  /* The page behind the widget is a storefront, so it keeps its own light
     paper in either scheme: a bright store is not a bug in a dark preview. */
  --pv-page: #f8f6f2; --pv-card: #ffffff; --pv-skel: #eae6dd; --pv-skel-2: #f3f0ea;
}
@media (prefers-color-scheme: dark) {
  :root { --pv-canvas: #0e0e12; --pv-ink: #f2f1f6; --pv-muted: #a7a2b6; --pv-line: #2b2a35; --pv-surface: #17171c;
    --pv-chip-bg: #f2f1f6; --pv-chip-ink: #0e0e12; }
}
html, body { margin: 0; height: 100%; background: var(--pv-canvas); color: var(--pv-ink); box-sizing: border-box;
  font-family: "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
/* Decision 8: at a phone's width the preview IS the phone — the page is the
   viewport the shopper gets, so the sheet's 88% is 88% of 844 (not of a stage
   that lost 100px to a toolbar). The chrome floats over the page's own top,
   where a shopper's store header would be, and never takes height from it. */
body { display: flex; flex-direction: column; block-size: 100svh; overflow: hidden; padding: 0; }
.pv, .pv * { box-sizing: border-box; }
.pv { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; inline-size: 100%; max-inline-size: 72rem;
  margin-inline: auto; min-block-size: 0; }
/* F-X-02: a calm fake page, not a wall of slabs — the header, the shelf line and
   three small tiles in the page's own paper; the pocket stays the only thing with
   contrast. The chrome is a toolbar on the top edge of the phone viewport, so it
   never takes height from the 88% sheet and never welds to it either (77px tall,
   the sheet starts at 12% of the viewport). */
.pv__bar { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 3; display: flex; flex-direction: column;
  gap: 3px; padding: 4px 8px; background: var(--pv-surface);
  box-shadow: 0 8px 18px -14px rgba(20, 20, 24, .5); }
.pv__line { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.pv__line:first-child { block-size: 22px; }
.pv__chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; block-size: 22px; padding-inline: 10px 12px;
  border-radius: 999px; background: var(--pv-chip-bg); color: var(--pv-chip-ink); font-size: 12px; font-weight: 700; }
.pv__chip::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: #a78bfa; }
.pv__name { flex: 1 1 auto; min-inline-size: 0; font-size: 14px; font-weight: 700; line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv__meta { flex: 0 0 auto; margin-inline-start: auto; color: var(--pv-muted); font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv__field { position: relative; display: inline-flex; flex: 1 1 0; min-inline-size: 0; }
.pv__field select { appearance: none; inline-size: 100%; min-inline-size: 0; block-size: 44px; padding-inline: 12px 34px;
  border: 1px solid var(--pv-line); border-radius: 12px; background-color: var(--pv-surface); background-repeat: no-repeat;
  background-position: left 12px center; color: inherit; font: inherit; font-size: 14px; font-weight: 600;
  text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6885' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html[dir="ltr"] .pv__field select { background-position: right 12px center; }
@media (prefers-color-scheme: dark) {
  .pv__field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a7a2b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}
.pv__field select:focus-visible { outline: 2px solid #5c17fd; outline-offset: 2px; }
.pv__empty { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 24px; text-align: center;
  background: color-mix(in srgb, var(--pv-page) 56%, transparent); }
.pv__empty[hidden] { display: none; }
/* The page behind a store with nothing published is still a page; the pocket's
   absence is one card on it, not a dashed strip over blank canvas. */
.pv__empty-card { inline-size: min(100%, 20rem); padding: 24px 20px; border-radius: 18px; background: var(--pv-surface);
  border: 1px solid var(--pv-line); box-shadow: 0 18px 40px -28px rgba(26, 26, 26, .45); }
.pv__empty-mark { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin: 0 auto 12px;
  border-radius: 14px; background: color-mix(in srgb, #5c17fd 10%, var(--pv-surface)); color: #5c17fd; }
.pv__empty-mark svg { inline-size: 24px; block-size: 24px; }
.pv__empty-title { margin: 0; font-size: 16px; font-weight: 700; }
.pv__empty-hint { margin: 6px 0 0; color: var(--pv-muted); font-size: 13px; font-weight: 500; }
.pv__stage[hidden] { display: none; }

/* --------------------------------------------------------------- the page ---
 * The widget is mounted on a page, so the preview shows one: a store header, a
 * filter row and a product grid in skeleton tones, with the real sheet standing
 * on it. The dimming under an open phone sheet is the widget's own scrim, so
 * the mock never paints a second one. */
.pv__frame { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-block-size: 0;
  /* Everything the widget paints lives inside its own stacking context (its root
     carries a very high z-index), so the frame is isolated and the floating
     preview chrome above it stays readable over the sheet's scrim. */
  isolation: isolate; }
.pv__mock { position: absolute; inset: 0; overflow: hidden; background: var(--pv-page); }
.pv__stage { position: relative; flex: 1 1 auto; min-block-size: 0; overflow: hidden; }
.pv__stage > .pv__meta { margin: 96px 20px 20px; }
/* Decision 7: the preview's sheet is the storefront's sheet. It hugs its
   content, caps at 88% of the phone screen and scrolls inside — the list to its
   last card, the detail to its sticky bar. A percentage max-height on an
   auto-height panel resolves against nothing, so the chain from the panel down
   has to be a flex column with min-block-size: 0 at every step: the track
   takes the leftover, the screen fills the track and scrolls. */
.pv__stage .rmp--preview[data-device="mobile"] .rmp-panel { display: flex; flex-direction: column; min-block-size: 0; }
.pv__stage .rmp--preview[data-device="mobile"] .rmp-track {
  display: flex; flex-direction: column; flex: 0 1 auto; min-block-size: 0;
}
.pv__stage .rmp--preview[data-device="mobile"] .rmp-screen {
  position: relative; inset: auto; flex: 0 1 auto; min-block-size: 0; max-height: none; overflow-y: auto;
}
.pv__mock-chrome, .pv__mock-links { display: none; }
.pv__mock-head { display: flex; align-items: center; gap: 10px; block-size: 54px; padding-inline: 16px;
  background: var(--pv-card); box-shadow: inset 0 -1px 0 var(--pv-skel); }
.pv__mock-logo { inline-size: 28px; block-size: 28px; border-radius: 9px; background: var(--pv-skel); }
.pv__mock-word { inline-size: 84px; block-size: 10px; border-radius: 999px; background: var(--pv-skel); }
.pv__mock-cart { inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--pv-skel); margin-inline-start: auto; }
.pv__mock-chips { display: flex; gap: 8px; padding: 2px 16px 18px; }
.pv__mock-chips > span { block-size: 26px; border-radius: 999px; background: var(--pv-skel-2); }
.pv__mock-chips > span:nth-child(1) { inline-size: 62px; }
.pv__mock-chips > span:nth-child(2) { inline-size: 48px; }
.pv__mock-chips > span:nth-child(3) { inline-size: 40px; }
.pv__mock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-inline: 16px; }
.pv__mock-tile { display: flex; flex-direction: column; gap: 7px; }
.pv__mock-shot { aspect-ratio: 4 / 5; border-radius: 10px; background: var(--pv-skel-2); }
.pv__mock-line { block-size: 8px; border-radius: 999px; background: var(--pv-skel); }
.pv__mock-line--short { inline-size: 48%; }

@media (min-width: 640px) {
  /* A desk gets the framed page instead: the toolbar returns to the flow above
     the frame, and the page keeps its 20px canvas. */
  body { block-size: auto; min-block-size: 100svh; overflow: visible; padding: 20px 24px 24px; }
  .pv { gap: 16px; max-inline-size: 76rem; }
  /* One row, spread across the frame it drives: the identity at the inline
     start, the picker and the design summary at the inline end — both ends on
     the frame's own edge, not a toolbar floating over its middle. */
  .pv__bar { position: static; flex-direction: row; flex-wrap: nowrap; gap: 12px; padding: 0;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pv__line { flex: 0 0 auto; }
  .pv__line:first-child { block-size: auto; }
  .pv__line + .pv__line { margin-inline-start: auto; }
  .pv__chip { block-size: 28px; padding-inline: 12px 14px; }
  .pv__name { flex: 0 1 auto; max-inline-size: 22rem; font-size: 16px; line-height: normal; }
  .pv__field { flex: 0 0 15rem; }
  .pv__meta { flex: 0 0 auto; margin-inline-start: 4px; font-size: 13px; }
  .pv__frame { flex: 0 0 auto; block-size: min(760px, calc(100svh - 148px)); border-radius: 20px; }
  .pv__mock { border: 1px solid var(--pv-line); }
  .pv__stage { min-block-size: 0; }
  .pv__mock-chrome { display: flex; align-items: center; gap: 12px; block-size: 38px; padding-inline: 16px;
    background: var(--pv-skel-2); border-block-end: 1px solid var(--pv-skel); }
  .pv__mock-dots { display: inline-flex; gap: 6px; }
  .pv__mock-dots > span { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--pv-skel); }
  .pv__mock-url { flex: 0 1 260px; block-size: 16px; border-radius: 999px; background: var(--pv-page); margin-inline: auto; }
  .pv__mock-head { block-size: 64px; padding-inline: 24px; gap: 12px; }
  .pv__mock-logo { inline-size: 32px; block-size: 32px; border-radius: 10px; }
  .pv__mock-word { inline-size: 104px; }
  .pv__mock-links { display: inline-flex; gap: 20px; margin-inline: auto; }
  .pv__mock-links > span { block-size: 8px; border-radius: 999px; background: var(--pv-skel); }
  .pv__mock-links > span:nth-child(1) { inline-size: 44px; }
  .pv__mock-links > span:nth-child(2) { inline-size: 56px; }
  .pv__mock-links > span:nth-child(3) { inline-size: 38px; }
  .pv__mock-links > span:nth-child(4) { inline-size: 50px; }
  .pv__mock-cart { margin-inline-start: 0; }
  .pv__mock-chips { padding: 0 24px 22px; }
  .pv__mock-grid { gap: 20px; max-inline-size: 660px; margin-inline: auto; padding-inline: 24px; }
  .pv__mock-tile { gap: 9px; }
}