/*
 * Point of Code Studio: design system layer.
 * Unlayered on purpose: it sits above Tailwind's @layer utilities, so it can
 * normalise sizes, spacing and colour without touching the compiled bundle.
 */

/* ---------- Tokens ---------- */
:root {
  --background: #f5f6f8;
  --primary: #101828;
  --muted: #f2f4f7;
  --muted-foreground: #5b6474;
  --secondary: #f2f4f7;
  --border: #e4e7ec;
  --input: #d0d5dd;
  --radius: .5rem;
  --poc-green-hover: #2f9e3d;
  --poc-green-ink: #237a30;
  --poc-green-soft: #ecf7ee;
  --poc-green-border: #b9e2c0;
  --cta-hover: #2f9e3d;
  --cta-glow: transparent;
  --cta-glow-strong: transparent;
  --shadow-panel: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-raised: 0 12px 24px -8px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --poc-control-h: 2.375rem;
  --poc-ring: 0 0 0 3px rgba(59, 182, 74, .18);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Phone previews mirror the real app: give them back the original design tokens. */
[data-poc-phone], .poc-phone, .rounded-\[1\.75rem\], .rounded-\[1\.35rem\] {
  --background: #f3f5f7; --primary: #191c1e; --muted: #f2f4f6; --muted-foreground: #545f73;
  --secondary: #eef1f4; --border: #e3e7ea; --input: #dfe4e8; --radius: .625rem;
  --poc-green-hover: #3bb64a; --poc-green-ink: #3bb64a; --poc-green-soft: #f0fdf4; --poc-green-border: #bbf7d0;
  --cta-hover: #3bb64a; --cta-glow: #3bb64aa6; --cta-glow-strong: #3bb64ab3;
  --shadow-panel: 0 1px 2px #1118140a, 0 10px 30px -18px #11181438;
  --shadow-raised: 0 2px 6px #1118140f, 0 18px 40px -22px #1118144d;
}

/* No decorative dot grid behind the app. */
.poc-shell::before, .poc-hero-pattern { display: none !important; }

/* Tiny text was hard to read on a working panel. */
.text-\[9px\]:not([data-poc-phone] *, .poc-phone *, .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\] *) { font-size: 11px !important; }
.text-\[10px\]:not([data-poc-phone] *, .poc-phone *, .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\] *) { font-size: 11px !important; }
.text-\[11px\]:not([data-poc-phone] *, .poc-phone *, .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\] *) { font-size: 12.5px !important; line-height: 1.45; }

/* ---------- Buttons ---------- */
[data-slot=button] {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: 0;
  gap: .5rem;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
[data-slot=button].h-8 { height: var(--poc-control-h); padding-inline: .9rem; }
[data-slot=button].h-7 { height: 2rem; padding-inline: .75rem; font-size: .8125rem; }
[data-slot=button].h-6 { height: 1.75rem; padding-inline: .625rem; font-size: .75rem; }
[data-slot=button].h-9 { height: 2.625rem; padding-inline: 1.125rem; }
[data-slot=button].size-8 { width: var(--poc-control-h); height: var(--poc-control-h); padding: 0; }
[data-slot=button].size-7 { width: 2rem; height: 2rem; padding: 0; }
[data-slot=button].size-6 { width: 1.75rem; height: 1.75rem; padding: 0; }
[data-slot=button].size-9 { width: 2.625rem; height: 2.625rem; padding: 0; }
[data-slot=button] svg:not([class*=size-]) { width: 1rem; height: 1rem; }
[data-slot=button].bg-accent { box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important; }
[data-slot=button].bg-accent:hover { background-color: var(--poc-green-hover) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important; }
[data-slot=button].bg-primary:hover { background-color: #1d2939; }
[data-slot=button].border-border, [data-slot=button][class*=bg-background] { border-color: var(--input); background-color: #fff; }
[data-slot=button].border-border:hover { background-color: #f9fafb; border-color: #98a2b3; }
[data-slot=button]:disabled { opacity: .45; }
[data-slot=button]:focus-visible { box-shadow: var(--poc-ring) !important; border-color: var(--ring); }

/* ---------- Form controls ---------- */
[data-slot=input], [data-slot=select-trigger] {
  height: var(--poc-control-h) !important;
  font-size: .875rem !important;
  border-color: var(--input);
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* Horizontal padding only where the component didn't set its own (icon inputs use pl-8 / pr-8). */
[data-slot=input]:not([class*="pl-"]):not([class*="px-"]), [data-slot=select-trigger]:not([class*="pl-"]) { padding-left: .75rem; }
[data-slot=input]:not([class*="pr-"]):not([class*="px-"]), [data-slot=select-trigger]:not([class*="pr-"]) { padding-right: .75rem; }
[data-slot=input][class*="pl-8"], [data-slot=input][class*="pl-9"] { padding-left: 2.25rem !important; }
[data-slot=textarea] {
  font-size: .875rem !important;
  border-color: var(--input);
  background-color: #fff;
  padding: .5rem .75rem;
  line-height: 1.5;
}
[data-slot=input]::placeholder, [data-slot=textarea]::placeholder { color: #98a2b3; }
[data-slot=input]:hover, [data-slot=select-trigger]:hover, [data-slot=textarea]:hover { border-color: #98a2b3; }
[data-slot=input]:focus-visible, [data-slot=textarea]:focus-visible, [data-slot=select-trigger]:focus-visible,
[data-slot=select-trigger][aria-expanded=true] {
  border-color: var(--poc-green) !important;
  box-shadow: var(--poc-ring) !important;
  outline: none;
}
[data-slot=input][type=color] { padding: .25rem; }
/* select values are humanised in poc-fmt.js */
[data-slot=select-content], [data-slot=dropdown-menu-content] {
  box-shadow: var(--shadow-raised);
  border: 1px solid var(--border);
  padding: .25rem;
}
[data-slot=select-item], [data-slot=dropdown-menu-item] {
  min-height: 2.25rem;
  font-size: .875rem;
  padding-inline: .625rem;
}
[data-slot=label] {
  font-size: .8125rem !important;
  font-weight: 500;
  color: #344054 !important;
  margin-bottom: .375rem;
  line-height: 1.3;
}
[data-slot=switch] { height: 1.25rem; width: 2.25rem; }
[data-slot=checkbox] { width: 1rem; height: 1rem; }

/* ---------- Surfaces ---------- */
[data-slot=card] {
  box-shadow: var(--shadow-panel);
  --card-spacing: 1.25rem;
}
[data-slot=card-title] { font-size: .9375rem !important; font-weight: 600 !important; letter-spacing: -.005em; }
[data-slot=card-description] { font-size: .8125rem; color: var(--muted-foreground); }
.poc-panel { box-shadow: var(--shadow-panel); }
main .poc-panel.p-4 { padding: 1.25rem 1.5rem; }
main .poc-panel.p-4 > .flex.items-start.justify-between:first-child {
  padding-bottom: .875rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--border);
}
main .poc-panel h3.text-sm { font-size: .9375rem; font-weight: 600; }
main .poc-panel .grid.gap-2 { gap: 1rem 1.25rem; }
.poc-hero { box-shadow: var(--shadow-panel); }
.poc-row {}
.poc-row.p-2 { padding: .75rem 1rem; gap: 1rem; min-height: 4rem; }
.poc-row:hover { border-color: #c4cad4 !important; box-shadow: var(--shadow-panel); }
.poc-row .text-sm { font-weight: 500; }
.poc-lift:hover { transform: none; border-color: #c4cad4; }

/* Section kickers: plain labels, no numbering or wide tracking. */
.poc-kicker {
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--poc-green-ink);
}
p.poc-kicker.mb-1 { display: none; }
[class*="tracking-[0.14em]"]:not([data-poc-phone] *, .poc-phone *, .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\] *), [class*="tracking-[0.16em]"]:not([data-poc-phone] *, .poc-phone *, .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\] *), [class*="tracking-[0.12em]"]:not([data-poc-phone] *, .poc-phone *, .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\] *) {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Status pill: calm, no pulsing. */
.poc-live-pill {
  text-transform: none;
  letter-spacing: 0;
  font-size: .75rem;
  font-weight: 500;
  padding: 0 .625rem;
  height: 1.5rem !important;
}
.poc-live-dot { animation: none !important; }
[data-slot=badge] { height: 1.375rem; font-size: .75rem; font-weight: 500; padding-inline: .5rem; }

/* ---------- App shell ---------- */
aside.shrink-0.lg\:block { padding: 0 !important; width: 16rem; }
aside.shrink-0.lg\:block > .poc-panel {
  border-width: 0 1px 0 0;
  box-shadow: none;
}
aside .p-3 > .rounded-xl.border {
  border: 0;
  padding: .5rem .25rem .25rem;
  background: transparent;
}
aside .p-3 > .rounded-xl.border img { height: 2rem; width: auto; }
aside .p-3 > .rounded-xl.border .poc-kicker { font-size: .75rem; margin-top: .375rem; letter-spacing: .02em; }
aside .font-mono { font-family: inherit !important; font-size: .75rem !important; }
aside nav { padding-inline: .75rem !important; }
aside nav > * + * { margin-top: 2px !important; }
aside nav a {
  height: 2.375rem;
  padding: 0 .75rem !important;
  font-size: .875rem !important;
  font-weight: 500;
  color: #475467;
  gap: .75rem;
}
aside nav a:hover { background-color: #f2f4f7; color: #101828; }
aside nav a > span.h-7.w-7 {
  width: 1.25rem;
  height: 1.25rem;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}
aside nav a > span.h-7.w-7 svg { width: 1.125rem; height: 1.125rem; }
aside nav a.bg-brand-soft { color: var(--poc-green-ink); font-weight: 600; }
aside nav a.bg-brand-soft > span.h-7.w-7 { color: var(--poc-green) !important; }
aside nav a > span.absolute { inset-block: .5rem; }
aside .border-t.p-3 > .rounded-lg { background: #f9fafb; border: 1px solid var(--border); }

header.z-30 { padding: 0 !important; }
header.z-30 > .poc-panel:first-child {
  border-width: 0 0 1px;
  box-shadow: none;
  padding: 1rem 2rem;
  min-height: 4.5rem;
  gap: .75rem 1.5rem;
}
header.z-30 h1 {
  font-size: 1.25rem !important;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}
header.z-30 h1 + p {
  font-size: .8125rem !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin-top: .125rem;
  max-width: 44rem;
}
header.z-30 > .poc-panel:first-child > div:last-child { gap: .5rem; }
header.z-30 [data-slot=select-trigger] { min-width: 5.5rem; }
header.z-30 > .poc-panel.lg\:hidden { margin: .5rem 1rem 0; }
main.overflow-y-auto { padding: 1.75rem 2rem 3rem !important; }
@media (max-width: 1023px) {
  header.z-30 > .poc-panel:first-child { padding: .875rem 1rem; }
  main.overflow-y-auto { padding: 1.25rem 1rem 2.5rem !important; }
}

/* Section headings inside pages. */
main section > .flex.items-end h2.text-lg { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; }
main section > .flex.items-end p.text-sm { font-size: .8125rem; }

/* Preview dock toggle: a floating button instead of a vertical tab over the content. */
.fixed.top-1\/2.right-0.z-40 {
  top: auto !important;
  bottom: 1.5rem;
  right: 1.5rem !important;
  transform: none !important;
  translate: none !important;
}
.fixed.top-1\/2.right-0.z-40 > button {
  height: 2.5rem !important;
  width: auto !important;
  padding: 0 1rem;
  border: 1px solid var(--input) !important;
  background: #fff;
  color: #344054 !important;
  font-size: .8125rem !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: var(--shadow-raised);
  writing-mode: horizontal-tb !important;
  gap: .5rem;
}
.fixed.top-1\/2.right-0.z-40 > button * { writing-mode: horizontal-tb !important; transform: none !important; rotate: none !important; }
.fixed.top-1\/2.right-0.z-40 > button:hover { border-color: #98a2b3 !important; color: #101828 !important; }

/* ---------- Tabs: underline style with a clear active state ---------- */
[data-slot=tabs-list] {
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
  gap: .25rem;
  border-bottom: 1px solid var(--border);
  width: 100%;
  justify-content: flex-start !important;
  overflow-x: auto;
}
[data-slot=tabs-trigger] {
  flex: 0 0 auto !important;
  height: 2.625rem !important;
  padding: 0 .875rem !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  color: #667085 !important;
  font-size: .875rem !important;
  font-weight: 500;
  box-shadow: none !important;
  background: transparent !important;
}
[data-slot=tabs-trigger]:hover { color: #101828 !important; }
[data-slot=tabs-trigger][data-active] {
  color: #101828 !important;
  font-weight: 600;
  border-bottom-color: var(--poc-green) !important;
}

/* ---------- Tables ---------- */
main table { font-size: .8125rem; }
main table thead { background: #f9fafb !important; }
main table th {
  padding: .75rem 1rem !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  color: #475467 !important;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
main table td { padding: .8125rem 1rem !important; font-size: .8125rem !important; color: #344054; vertical-align: middle !important; }
main table tbody tr { border-top: 1px solid #eaecf0; }
main table tbody tr:first-child { border-top: 0; }
main table tbody tr:hover { background: #fafbfc; }

/* ---------- Dashboard ---------- */
.poc-hero h2 {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  max-width: none !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
}
.poc-highlight {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  padding: .375rem .625rem;
  color: var(--poc-green-ink) !important;
  background: var(--poc-green-soft);
  border: 1px solid var(--poc-green-border);
}
.poc-highlight::after { display: none !important; }
.poc-highlight.poc-hl-warn { color: #b54708 !important; background: #fffaeb; border-color: #fedf89; }
.poc-highlight.poc-hl-off { color: #475467 !important; background: #f2f4f7; border-color: #d0d5dd; }
.poc-ink-slab { background-color: #101828; border-color: #101828; }
.poc-ink-slab .text-6xl { font-size: 3rem !important; font-weight: 700 !important; }
.poc-ink-slab .poc-kicker { color: #86d993; }
.poc-ink-slab [data-slot=button]:hover { background-color: var(--poc-green-hover) !important; }

/* ---------- Dialogs & sheets ---------- */
[data-slot=dialog-content] { box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .25); }
[data-slot=dialog-title], [data-slot=sheet-title] { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; }
[data-slot=dialog-description], [data-slot=sheet-description] { font-size: .875rem; color: var(--muted-foreground); }
[data-slot=dialog-overlay], [data-slot=sheet-overlay] { background-color: rgba(16, 24, 40, .45) !important; backdrop-filter: blur(2px); }

/* ---------- Focus & scrollbars ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--poc-green); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }

/* ---------- Refinements ---------- */
/* Keep the page title readable; let actions drop to a second row instead of squeezing it. */
header.z-30 .min-w-\[10rem\] { min-width: 20rem; }
/* Disconnect is a rare action: icon-only (the label stays for screen readers). */
header.z-30 [data-slot=button].poc-disconnect {
  width: var(--poc-control-h);
  padding: 0;
  font-size: 0;
  gap: 0;
  color: #667085;
}
header.z-30 [data-slot=button].poc-disconnect:hover { color: #b42318; background: #fef3f2; }
header.z-30 [data-slot=button].poc-disconnect svg { width: 1.125rem; height: 1.125rem; margin: 0; }
[data-slot=tabs-content] { padding-top: 1.5rem !important; }
[data-slot=tabs-content] > .space-y-4 > .flex.items-center.gap-2:empty { display: none; }
.poc-hero .lg\:col-span-7 > div > p.poc-kicker { display: none; }
main.overflow-y-auto { padding-bottom: 5.5rem !important; }
/* Licence status already lives in the sidebar footer; keep the header to actions. */
header.z-30 .poc-live-pill { display: none; }
/* List rows with trailing actions: text takes the free space so actions line up on the right. */
main [class*="justify-between"][class*="gap-3"][class*="p-3"] > div:first-child { flex: 1 1 auto; min-width: 0; }
/* Phone-width preview toggle (sheet mode) gets the same floating button treatment. */
button.fixed.right-0.top-1\/2.z-40 {
  top: auto !important; bottom: 1rem; right: 1rem !important; transform: none !important; translate: none !important;
  height: 2.5rem; padding: 0 1rem !important; border: 1px solid var(--input) !important;
  background: #fff; color: #344054 !important; font-size: .8125rem !important; font-weight: 600;
  letter-spacing: 0 !important; text-transform: none !important; box-shadow: var(--shadow-raised);
}
/* Rows: title and chips wrap instead of truncating the title to a single letter. */
.poc-row .min-w-0.flex-1 > .flex.items-center { flex-wrap: wrap; row-gap: .25rem; }
@media (max-width: 639px) {
  .poc-row.p-2 { padding: .625rem .75rem; gap: .625rem; }
  .poc-row .h-10.w-20 { width: 3.5rem; height: 2.5rem; }
}
/* Hover peek opens above the floating button instead of covering it. */
#preview-dock-peek {
  right: 0 !important;
  bottom: calc(100% + .625rem) !important;
  height: min(70vh, 640px) !important;
  border-right-width: 1px !important;
  box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .25) !important;
}

/* ---------- Square corners everywhere in Studio ----------
 * Phone previews (frames and everything inside) are left exactly as designed:
 * they mirror the real app and its theme radii. */
*:not([data-poc-phone], [data-poc-phone] *, .poc-phone, .poc-phone *, .rounded-\[1\.75rem\], .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\], .rounded-\[1\.35rem\] *),
*:not([data-poc-phone], [data-poc-phone] *, .poc-phone, .poc-phone *, .rounded-\[1\.75rem\], .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\], .rounded-\[1\.35rem\] *)::before,
*:not([data-poc-phone], [data-poc-phone] *, .poc-phone, .poc-phone *, .rounded-\[1\.75rem\], .rounded-\[1\.75rem\] *, .rounded-\[1\.35rem\], .rounded-\[1\.35rem\] *)::after { border-radius: 0 !important; }
/* Setup requirement on the connect screen: visible, not alarming. */
.poc-setup-note {
  margin-top: .5rem;
  padding: .625rem .75rem;
  background: #fffaeb;
  border: 1px solid #fedf89;
  color: #7a2e0e;
  line-height: 1.5;
}
.poc-setup-note strong { font-weight: 600; color: #7a2e0e; }

/* ---------- Demo showroom gallery (Brand / Banners / Shop tabs) ---------- */
.poc-gallery { margin-top: 1.25rem; display: grid; gap: 1.75rem; }
.poc-gal-title { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; }
.poc-gal-title span { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.poc-gal-grid { display: grid; gap: .75rem; }
.poc-gal-wide { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.poc-gal-square { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.poc-gal-tall { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.poc-gal-logo { grid-template-columns: minmax(0, 15rem); }
.poc-gal-item { display: block; min-width: 0; padding: 0; text-align: left; cursor: pointer; background: var(--card, #fff); border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s; }
.poc-gal-item:hover, .poc-gal-item:focus-visible { border-color: var(--poc-green); box-shadow: var(--shadow-panel); outline: none; }
.poc-gal-media { display: block; overflow: hidden; background: #f3f4f6; }
.poc-gal-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poc-gal-wide .poc-gal-media { aspect-ratio: 16 / 9; }
.poc-gal-square .poc-gal-media { aspect-ratio: 1; }
.poc-gal-tall .poc-gal-media { aspect-ratio: 2 / 3; }
.poc-gal-logo .poc-gal-media { aspect-ratio: 16 / 10; background: #fff; border-bottom: 1px solid var(--border); }
.poc-gal-logo .poc-gal-media img { object-fit: contain; padding: 1rem; }
.poc-gal-cap { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .625rem; font-size: .75rem; font-weight: 500; }
.poc-gal-cap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poc-gal-cap em { flex: none; font-style: normal; font-weight: 600; color: var(--poc-green-ink, var(--poc-green)); opacity: 0; transition: opacity .15s; }
.poc-gal-item:hover .poc-gal-cap em, .poc-gal-item:focus-visible .poc-gal-cap em { opacity: 1; }
@media (hover: none) { .poc-gal-cap em { opacity: 1; } }

/* ---------- Showroom phone screens (__pocScreen). 1em = 10 design px on a 390px-wide phone. ---------- */
.poc-screen-host { container-type: inline-size; position: relative; overflow: hidden; }
.pocs { position: absolute; inset: 0; overflow: hidden; font-size: calc(100cqw / 39); font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.35; }
.pocs * { box-sizing: border-box; }
.pocs-status { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 4.4em; padding: 0 2.4em; font-size: 1.4em; }
.pocs-status b { font-size: 1em; font-weight: 600; }
.pocs-status i { width: 2.6em; height: .8em; background: radial-gradient(circle, currentColor 45%, transparent 50%) 0 0 / 33% 100% repeat-x; }
.pocs-full .pocs-status, .pocs-pdp .pocs-status { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pocs-dark .pocs-status { color: #fff; }
.pocs-bg { position: absolute; inset: 0; background: center / cover no-repeat; }
.pocs-logo { display: flex; flex-direction: column; background: var(--bg); }
.pocs-logo-mark { flex: 1; margin: 0 6em 8em; background: center / contain no-repeat; }
.pocs-walk::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.78)); }
.pocs-skip { position: absolute; z-index: 2; top: 5.6em; right: 2em; font-size: 1.4em; font-weight: 600; color: #fff; }
.pocs-walk-b { position: absolute; z-index: 2; left: 2.4em; right: 2.4em; bottom: 4em; color: #fff; }
.pocs-walk-b h3 { margin: 1.2em 0 .5em; font-size: 3em; font-weight: var(--hw); line-height: 1.1; color: #fff; }
.pocs-walk-b p { margin: 0 0 2.6em; font-size: 1.55em; line-height: 1.45; opacity: .9; }
.pocs-btn { display: block; padding: 1.1em 0; text-align: center; font-size: 1.55em; font-weight: 600; color: var(--btn-ink); background: var(--btn); border-radius: var(--br); }
.pocs-dots { display: flex; gap: .6em; }
.pocs-dots i { width: .8em; height: .8em; border-radius: 1em; background: currentColor; opacity: .35; }
.pocs-dots i.on { width: 2.4em; opacity: 1; }
.pocs-walk .pocs-dots i { background: #fff; }
.pocs-dots-c { justify-content: center; margin: 1em 0 1.4em; color: var(--pri); }
.pocs-appbar { display: flex; align-items: center; gap: 1em; height: 5.6em; padding: 0 2em; background: var(--bar); color: var(--bar-ink); }
.pocs-appbar b { font-size: 2em; font-weight: var(--hw); }
.pocs-back { font-size: 3em; line-height: 1; }
.pocs-search { margin: 1.2em 1.6em; padding: 1.1em 1.6em; font-size: 1.4em; color: var(--sub); background: var(--card); border: 1px solid rgba(127,127,127,.2); border-radius: 3em; }
.pocs-banner { position: relative; margin: 0 1.6em; aspect-ratio: 16 / 9; background: center / cover no-repeat; border-radius: var(--r); box-shadow: 0 0 0 .35em var(--pri); }
.pocs-banner span, .pocs-hero span { position: absolute; left: 1.2em; bottom: 1em; font-size: 2em; font-weight: var(--hw); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.pocs-cats { display: flex; gap: 1.2em; padding: 0 1.6em; overflow: hidden; }
.pocs-cat { flex: none; width: 6.2em; text-align: center; font-size: 1em; }
.pocs-cat i { display: block; width: 6.2em; height: 6.2em; border-radius: 50%; background: center / cover no-repeat; }
.pocs-cat span { display: block; margin-top: .5em; font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pocs h4 { margin: 2em 1.6em 1em; font-size: 1.8em; font-weight: var(--hw); }
.pocs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; padding: 0 1.6em; }
.pocs-card { overflow: hidden; background: var(--card); border-radius: var(--r); box-shadow: 0 .2em 1.2em rgba(0,0,0,.08); }
.pocs-img { aspect-ratio: 1; background: center / cover no-repeat; }
.pocs-card-b { padding: .9em 1em 1.1em; }
.pocs-card-b span { display: block; font-size: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pocs-card-b b { display: block; margin-top: .3em; font-size: 1.4em; color: var(--pri); }
.pocs-hero { position: relative; margin: 1.2em 1.6em 0; aspect-ratio: 16 / 9; background: center / cover no-repeat; border-radius: var(--r); box-shadow: 0 0 0 .35em var(--pri); }
.pocs-filter { display: flex; align-items: center; gap: .8em; padding: 1.6em 1.6em 1.2em; font-size: 1.3em; color: var(--sub); }
.pocs-filter span { flex: 1; }
.pocs-filter em { font-style: normal; padding: .4em 1em; border: 1px solid rgba(127,127,127,.3); border-radius: 2em; color: var(--ink); }
.pocs-pdp-img { position: relative; aspect-ratio: 1 / 1.05; background: center / cover no-repeat; box-shadow: inset 0 0 0 .35em var(--pri); }
.pocs-round { position: absolute; z-index: 2; top: 5em; display: grid; place-items: center; width: 1.4em; height: 1.4em; font-size: 2.6em; line-height: 1; color: var(--ink); background: rgba(255,255,255,.9); border-radius: 50%; }
.pocs-back.pocs-round { left: .6em; } .pocs-fav { right: .6em; font-size: 2em; width: 1.8em; height: 1.8em; }
.pocs-pdp-b { padding: 2em 2em 0; }
.pocs-pdp-b h3 { margin: 0; font-size: 2.3em; font-weight: var(--hw); line-height: 1.2; }
.pocs-rate { margin: .6em 0; font-size: 1.3em; color: #f5a524; } .pocs-rate span { color: var(--sub); }
.pocs-price { display: flex; align-items: baseline; gap: .6em; } .pocs-price b { font-size: 2.6em; color: var(--pri); } .pocs-price s { font-size: 1.5em; color: var(--sub); }
.pocs-pdp-b p { margin: 1em 0 1.6em; font-size: 1.3em; color: var(--sub); }
.pocs-qty { display: inline-flex; align-items: center; gap: 1.6em; margin-bottom: 1.6em; padding: .5em 1.4em; font-size: 1.6em; border: 1px solid rgba(127,127,127,.3); border-radius: 2em; }

/* Gallery tiles: the picture selects (previews on the phone), Replace swaps the file. */
.poc-gal-item { cursor: default; }
.poc-gal-pick { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.poc-gal-item[aria-selected="true"] { border-color: var(--poc-green); box-shadow: 0 0 0 1px var(--poc-green); }
.poc-gal-replace { flex: none; padding: .125rem .5rem; font-size: .75rem; font-weight: 600; color: var(--poc-green-ink, #1f7a34); background: none; border: 1px solid var(--border); cursor: pointer; }
.poc-gal-replace:hover { border-color: var(--poc-green); }
.poc-gal-cap em { display: none; }
.poc-gal-intro { margin: 0; max-width: 46rem; font-size: .875rem; line-height: 1.55; color: var(--muted-foreground); }
.poc-gal-cap { flex-wrap: wrap; row-gap: .375rem; }
.poc-gal-cap span { flex: 1 1 100%; }
/* Showroom: keep the phone in view while picking images further down the gallery. */
@media (min-width: 80rem) {
  .xl\:grid-cols-\[minmax\(16rem\,20rem\)_minmax\(0\,1fr\)\] > div:first-child { position: sticky; top: 1rem; }
}
.pocs-price { margin: .8em 0 2em; }
/* Cards that open with an image block (theme library): image runs edge to edge, no padding above it. */
[data-slot="card"]:has(> div:first-child > img:only-child) { padding-top: 0 !important; }