/* Tiny's shared visual foundation. Page-specific layout remains in template styles. */
:root {
  --color-brand: #183b35;
  --color-brand-dark: #112d2a;
  --color-accent: #d93d6a;
  --color-accent-soft: #fbe1e8;
  --color-lime: #d4e967;
  --color-background: #f7f3e9;
  --color-surface: #ffffff;
  --color-surface-muted: #edf0df;
  --color-text: #183b35;
  --color-text-muted: #66746f;
  --color-border: #d8e2d5;
  --color-success: #217a57;
  --color-warning: #a96c18;
  --color-danger: #b52b4c;

  /* Modern rounded/geometric sans replacing the previous Georgia-serif
     display face. A system-font stack (rather than a Google Fonts
     @import/<link>) is deliberate: the CSP (see content_security_policy()
     in app.py) only allows 'self'/inline for style-src with no font-src
     override, and this is a low-bandwidth-market storefront — a system
     stack renders identically on first paint with zero extra network
     requests, so there is nothing to fail offline or degrade production
     performance. --font-display/--font-body/--font-ui intentionally share
     one stack so the whole storefront reads as a single consistent
     typographic voice instead of a serif/sans split. */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-display: clamp(2.5rem, 6vw, 4.5rem);
  --text-h1: clamp(2rem, 5vw, 3rem);
  --text-h2: clamp(1.6rem, 3vw, 2.1rem);
  --text-h3: 1.3rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.4375rem;
  --radius-lg: 0.5rem;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(24, 59, 53, 0.06);
  --shadow-md: 0 12px 28px rgba(24, 59, 53, 0.1);
  /* P1 variant-control depth: low-key, shared by the picker, card swatches and the publishing builder. */
  --depth-control: 0 1px 2px rgba(24, 59, 53, 0.08);
  --depth-selected: 0 2px 6px rgba(17, 45, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --depth-panel: 0 1px 3px rgba(24, 59, 53, 0.07);
  --shadow-lg: 0 20px 48px rgba(17, 45, 42, 0.18);

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --focus-ring: 0 0 0 3px rgba(212, 233, 103, 0.8);

  /* Compatibility aliases used by the existing public templates. */
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --paper: var(--color-background);
  --lime: var(--color-lime);
  --coral: var(--color-accent);
  --line: var(--color-border);
  --deep: var(--color-brand-dark);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
select,
label[for],
input[type="checkbox"],
input[type="radio"] {
  -webkit-tap-highlight-color: transparent;
}

button,
[type="button"],
[type="submit"],
[type="reset"],
select,
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

a {
  color: inherit;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-brand-dark);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.tinys-display,
.tinys-h1,
.tinys-h2,
.tinys-h3 {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
}

.tinys-display {
  font-size: var(--text-display);
}

.tinys-h1 {
  font-size: var(--text-h1);
}

.tinys-h2 {
  font-size: var(--text-h2);
}

.tinys-h3 {
  font-size: var(--text-h3);
}

.tinys-small {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: 1.45;
}

.tinys-caption {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.tinys-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  display: inline-flex;
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 700;
  gap: var(--space-2);
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tinys-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.tinys-button:active:not(:disabled) {
  transform: translateY(0);
}

.tinys-button--primary {
  background: var(--color-brand-dark);
  color: var(--color-surface);
}

.tinys-button--primary:hover:not(:disabled) {
  background: var(--color-brand);
  box-shadow: var(--shadow-sm);
  color: var(--color-surface);
}

.tinys-button--secondary {
  background: var(--color-surface);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.tinys-button--secondary:hover:not(:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-brand-dark);
}

.tinys-button--ghost {
  background: transparent;
  color: var(--color-brand);
}

.tinys-button--ghost:hover:not(:disabled) {
  background: var(--color-accent-soft);
  color: var(--color-danger);
}

/* Destructive-but-safe action modifier (cancel, remove, decline, disable) —
   layers onto tinys-button--secondary rather than replacing it, so a
   danger-flagged button keeps the same size/weight and only its border and
   text read as a warning. Global (not scoped to one page) since destructive
   actions occur on every internal/merchant surface. */
.danger-action {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.danger-action:hover:not(:disabled) {
  background: var(--color-accent-soft);
  color: var(--color-danger);
}

.tinys-label {
  color: var(--color-brand);
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.tinys-input,
.tinys-select,
.tinys-textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.tinys-input:hover,
.tinys-select:hover,
.tinys-textarea:hover {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
}

.tinys-textarea {
  min-height: 6rem;
  resize: vertical;
}

.tinys-input[aria-invalid="true"],
.tinys-select[aria-invalid="true"],
.tinys-textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.tinys-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.tinys-card--hover {
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.tinys-card--hover:hover {
  border-color: color-mix(in srgb, var(--color-brand) 32%, var(--color-border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tinys-surface-subtle {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tinys-badge {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: 700;
  gap: var(--space-1);
  line-height: 1;
  padding: 0.375rem 0.5625rem;
}

.tinys-badge--neutral {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.tinys-badge--success {
  background: #dff2e8;
  color: var(--color-success);
}

.tinys-badge--warning {
  background: #fff0ce;
  color: var(--color-warning);
}

.tinys-badge--danger {
  background: var(--color-accent-soft);
  color: var(--color-danger);
}

.tinys-loading {
  animation: tinys-pulse 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--color-surface-muted), #f7f8ee, var(--color-surface-muted));
  background-size: 200% 100%;
}

@keyframes tinys-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (max-width: 30rem) {
  .tinys-button {
    min-height: 3rem;
    padding-inline: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Customer shell shared by the public storefront and product detail pages. */
.customer-shell-header {
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
}

.customer-shell-header::before {
  background: url('/static/tinys-logo.png') no-repeat center / contain;
  content: "";
  height: 9.75rem;
  mix-blend-mode: multiply;
  opacity: 0.07;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 13.75rem;
  z-index: -1;
}

.brand-lockup {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  min-width: 0;
  text-decoration: none;
}

.brand {
  display: block;
  height: 6rem;
  width: auto;
}

.brand-subtitle {
  color: var(--color-text-muted);
  font: 700 var(--text-caption) / 1.3 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-shell-nav {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.customer-shell-nav::-webkit-scrollbar {
  display: none;
}

.customer-shell-nav a {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  display: inline-flex;
  flex: 0 0 auto;
  font: 700 var(--text-small) / 1 var(--font-ui);
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.customer-shell-nav a[aria-current="page"] {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: var(--color-surface);
}

.header-actions {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
  order: 3;
}

/* The primary navigation and Merchant Login live in one menu that is inline here and a drop-down on phones, so
   Merchant Login can never collide with anything else in the header. */
.shell-menu {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-3);
  justify-content: space-between;
  min-width: 0;
  order: 2;
}

.shell-menu .customer-shell-nav {
  flex: 1 1 auto;
}

.shell-menu-toggle {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  font: 700 var(--text-small) / 1 var(--font-ui);
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
}

.shell-menu-toggle[hidden] {
  display: none;
}

.customer-shell-header .brand-lockup {
  order: 1;
}

.header-merchant-login {
  align-items: center;
  display: inline-flex;
  min-height: 2.75rem;
  color: var(--color-text-muted);
  font: 700 var(--text-small) / 1 var(--font-ui);
  white-space: nowrap;
}

.shell-menu-toggle:focus-visible,
.header-merchant-login:focus-visible {
  outline: 3px solid var(--color-brand-dark);
  outline-offset: 2px;
}

.customer-shell-footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-8);
  padding: var(--space-5) 0;
}

.customer-shell-footer p {
  margin: 0;
}

.customer-shell-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.customer-shell-footer nav a {
  align-items: center;
  display: inline-flex;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
}

/* E2-2: homepage hierarchy and keyboard access. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  transform: translateY(-150%);
  z-index: 50;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
}
.skip-link:focus { transform: none; }
.home-page :focus-visible,
.customer-shell-nav a:focus-visible,
.customer-shell-footer a:focus-visible {
  outline: 3px solid var(--color-brand-dark);
  outline-offset: 3px;
}
body .home-page .search-bar input:focus-visible,
body .home-page .search-bar select:focus-visible {
  outline: 3px solid var(--color-brand-dark);
  outline-offset: 2px;
}
body .home-page .layout { margin-top: 1rem; }
body .home-page .products { gap: 12px; }
@media (max-width: 520px) {
  body .home-page .products { gap: 10px; }
}
body .home-page .customer-shell-header { gap: 0.75rem; }
.home-page .catalogue-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
}
.catalogue-shortcuts a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
}
.home-page .empty-search {
  grid-column: 1 / -1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.empty-search h2 { font-size: 1.25rem; }

/* Search is task-focused: hide browse-only discovery/promotional surfaces so
   matching catalogue results sit directly below the search controls. */
.home-page.search-active #hottestHero,
.home-page.search-active #discoveryCarousels,
.home-page.search-active #promotionBanners,
.home-page.search-active #promotionRails {
  display: none !important;
}

.home-page .search-results-summary {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: 600;
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
}
.home-page .search-results-summary[hidden] { display: none; }

body .home-page .discovery-carousels { margin: 2rem 0; }
body .home-page .product-carousel-control {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* One product-card presentation is shared by catalogue search results and
   discovery rails. The scripts supply authoritative price and availability. */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
}

.product-card-media {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-muted);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.product-card-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
  width: 100%;
}

.product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.1875rem;
  padding: var(--space-2);
}

.product-card-name {
  display: -webkit-box;
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  min-height: 2.6em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-card-name a {
  color: inherit;
  text-decoration: none;
}

.product-card-name a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

.product-card-price {
  color: var(--color-brand-dark);
  font-size: 1rem;
  font-weight: 700;
}

.product-card-status {
  color: var(--color-text-muted);
  font: 0.75rem / 1.2 var(--font-ui);
  min-height: 1.2em;
}

.product-card-status.is-sold-out {
  color: var(--color-accent);
  font-weight: 700;
}

.product-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.product-card-actions .outline {
  flex: 0 0 auto;
  font-size: 0.8rem;
  min-height: 2.75rem;
  padding: 0.375rem 0.625rem;
}

.product-card-actions .outline:first-child {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: var(--color-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card-actions .outline:first-child:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.product-card-actions .outline:first-child:disabled {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-media img {
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card-media img {
    transition: none;
  }
}

/* Customer storefront refinements use only existing template classes. */
body .wrap {
  width: min(100% - 2.5rem, 72rem);
}

body .mast {
  padding-bottom: var(--space-6);
}

body .mast p {
  font-family: var(--font-ui);
  font-size: 0.975rem;
  max-width: 38rem;
}

body .layout {
  margin-top: var(--space-6);
}

body .search-bar {
  align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body .search-bar:focus-within {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}

body .search-bar input,
body .search-bar select {
  border-color: transparent;
  min-height: 2.75rem;
}

body .search-bar input:focus-visible,
body .search-bar select:focus-visible {
  border-color: var(--color-brand);
}

body .products {
  gap: var(--space-5);
}

body .product,
body .request,
body .modal-card,
body .card {
  border-radius: var(--radius-lg);
}

body .product {
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

body .product:hover {
  border-color: color-mix(in srgb, var(--color-brand) 32%, var(--color-border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

body .product-body {
  padding: var(--space-5);
}

body .product h3 {
  line-height: 1.15;
}

body .meta {
  line-height: 1.45;
}

body .price {
  color: var(--color-brand-dark);
  font-size: 1.35rem;
}

body .primary,
body .outline,
body .button {
  align-items: center;
  font-family: var(--font-ui);
  justify-content: center;
  min-height: 2.75rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

body .primary:hover:not(:disabled),
body .button:hover:not(:disabled) {
  background: var(--color-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

body .outline:hover:not(:disabled),
body .button.secondary:hover:not(:disabled) {
  background: var(--color-surface-muted);
  border-color: var(--color-brand);
  transform: translateY(-1px);
}

body .primary:active:not(:disabled),
body .outline:active:not(:disabled),
body .button:active:not(:disabled) {
  transform: translateY(0);
}

body .request {
  border-top: 3px solid var(--color-lime);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

body .request h2 {
  margin-top: var(--space-1);
}

body label {
  color: var(--color-brand);
}

body input,
body textarea,
body select {
  min-height: 2.75rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

body input:hover,
body textarea:hover,
body select:hover {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
}

body input[type="file"] {
  background: var(--color-surface-muted);
  padding: var(--space-2);
}

body .notice {
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body #products > .meta {
  align-items: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: center;
  min-height: 11rem;
  padding: var(--space-6);
  text-align: center;
}

body .modal {
  backdrop-filter: blur(3px);
}

body .modal-card {
  box-shadow: var(--shadow-lg);
}

/* Compact header (phones and small tablets): logo, cart and Menu on one row; the navigation and Merchant Login
   drop below only when the menu is opened. Wider screens keep them inline. */
@media (max-width: 68.75rem) {
  .brand-subtitle {
    display: none;
  }
}

@media (max-width: 48rem) {
  .header-actions {
    order: 2;
  }

  .shell-menu {
    align-items: stretch;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--space-1);
    order: 3;
  }

  .shell-menu.is-collapsed {
    display: none;
  }

  .customer-shell-nav {
    flex-wrap: wrap;
    overflow: visible;
  }

  .header-merchant-login {
    padding-inline: var(--space-2);
  }
}

@media (max-width: 40rem) {
  .customer-shell-header {
    gap: var(--space-2);
  }

  .customer-shell-header::before {
    height: 4.125rem;
    left: 6.125rem;
    right: auto;
    top: 3rem;
    width: 5.75rem;
  }

  .brand {
    height: 4rem;
  }

  .brand-subtitle {
    display: none;
  }

  .header-actions {
    gap: var(--space-2);
  }

  .customer-shell-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-card-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .product-card-actions .outline,
  .product-card-actions .outline:first-child {
    flex: 1 1 100%;
    white-space: normal;
  }
}

/* Product detail refinements. */
body .brand {
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

body a.brand:hover {
  color: var(--color-accent);
  opacity: 0.82;
}

body .card {
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

body .media {
  background: var(--color-surface-muted);
}

body .gallery {
  background: var(--color-surface);
  padding: var(--space-3);
}

body .gallery img {
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

body .gallery img:hover {
  border-color: var(--color-accent);
  opacity: 0.86;
  transform: translateY(-1px);
}

body .body {
  padding: var(--space-6);
}

body .stock {
  color: var(--color-success);
  font-weight: 700;
}

body .actions {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

@media (max-width: 40rem) {
  body .wrap {
    width: min(100% - 1.75rem, 72rem);
  }

  body .search-bar {
    flex-direction: column;
  }

  body .search-bar select {
    width: 100% !important;
  }

  body .request,
  body .body {
    padding: var(--space-5);
  }

  body .product:hover,
  body .tinys-card--hover:hover {
    transform: none;
  }
}

/* Merchant dashboard refinements use only existing dashboard markup. */
body .merchant-dashboard {
  width: min(100% - 2.5rem, 75rem);
}

body .merchant-dashboard .merchant-header {
  align-items: center;
  border-bottom: 0;
  padding-bottom: var(--space-6);
}

body .merchant-dashboard .merchant-kicker {
  color: var(--color-accent);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

body .merchant-dashboard h1 {
  font-size: var(--text-h1);
  line-height: 1.08;
  margin-bottom: var(--space-1);
}

body .merchant-dashboard .merchant-identity {
  margin-bottom: var(--space-3);
}

body .merchant-dashboard .merchant-nav {
  gap: var(--space-2);
  margin-top: var(--space-3);
}

body .merchant-dashboard .merchant-nav a {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  padding: 0.45rem 0.75rem;
  text-decoration: none;
}

body .merchant-dashboard .merchant-nav a:hover {
  background: var(--color-surface-muted);
  color: var(--color-brand-dark);
}

body .merchant-dashboard .dashboard-overview {
  display: grid !important;
  gap: var(--space-3) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--space-8) !important;
}

body .merchant-dashboard .summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-1);
  min-height: 7.75rem;
  padding: var(--space-5);
}

body .merchant-dashboard .summary-card strong {
  color: var(--color-brand-dark);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 400;
  line-height: 1.12;
}

body .merchant-dashboard .low-stock-note {
  background: #fff0ce;
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--color-warning);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

body .merchant-dashboard .dashboard-section {
  margin-top: var(--space-8);
}

body .merchant-dashboard .section-heading {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

body .merchant-dashboard .section-heading h2 {
  font-size: var(--text-h2);
  margin: 0;
}

body .merchant-dashboard .publish-panel,
body .merchant-dashboard .payment-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

body .merchant-dashboard .publish-panel .merchant-kicker {
  margin: 0 0 var(--space-1);
}

body .merchant-dashboard .publish {
  grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 1.4fr) repeat(2, minmax(7rem, 0.65fr));
  margin: 0;
}

body .merchant-dashboard input,
body .merchant-dashboard textarea,
body .merchant-dashboard select {
  border-radius: var(--radius-md);
  min-height: 2.75rem;
}

body .merchant-dashboard input[type="file"] {
  background: var(--color-surface-muted);
  padding: var(--space-2);
}

body .merchant-dashboard .publish input[type="file"] {
  grid-column: span 2;
}

body .merchant-dashboard .button {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-ui);
  justify-content: center;
  min-height: 2.75rem;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

body .merchant-dashboard .button:hover:not(:disabled) {
  background: var(--color-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

body .merchant-dashboard .button.secondary:hover:not(:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-brand-dark);
}

body .merchant-dashboard .danger-action:hover:not(:disabled) {
  background: var(--color-accent-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

body .merchant-dashboard .product-grid {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}

body .merchant-dashboard .product-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

body .merchant-dashboard .product-card:hover {
  border-color: color-mix(in srgb, var(--color-brand) 32%, var(--color-border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

body .merchant-dashboard .product-card > img,
body .merchant-dashboard .product-card > video {
  aspect-ratio: 16 / 10;
  max-height: 7rem;
  object-fit: cover;
  width: 100%;
}

body .merchant-dashboard .product-card-body {
  padding: var(--space-3);
}

body .merchant-dashboard .product-card h3 {
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

body .merchant-dashboard .product-price {
  color: var(--color-brand-dark);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

body .merchant-dashboard .product-stock {
  margin: 0 0 var(--space-2);
}

body .merchant-dashboard .status-row,
body .merchant-dashboard .actions {
  align-items: center;
  gap: var(--space-2);
}

body .merchant-dashboard .status-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

body .merchant-dashboard .status {
  background: #dff2e8;
  border-radius: var(--radius-pill);
  color: var(--color-success);
  display: inline-flex;
  font-family: var(--font-ui);
  padding: 0.375rem 0.5625rem;
}

body .merchant-dashboard .status.sold-out,
body .merchant-dashboard .payment-status-error {
  background: var(--color-accent-soft);
  color: var(--color-danger);
}

body .merchant-dashboard .status-neutral,
body .merchant-dashboard .payment-status-not_configured,
body .merchant-dashboard .payment-status-disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

body .merchant-dashboard .payment-status-pending {
  background: #fff0ce;
  color: var(--color-warning);
}

body .merchant-dashboard .tabs {
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

body .merchant-dashboard .tab {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  white-space: nowrap;
}

body .merchant-dashboard .tab:hover {
  background: var(--color-surface-muted);
  color: var(--color-brand);
}

body .merchant-dashboard .tab[aria-selected="true"] {
  background: var(--color-brand-dark);
  border-bottom: 1px solid var(--color-brand-dark);
  color: var(--color-surface);
}

body .merchant-dashboard .order-list {
  gap: var(--space-3);
}

body .merchant-dashboard .order,
body .merchant-dashboard .notification-card,
body .merchant-dashboard .request-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

body .merchant-dashboard .order-header {
  align-items: flex-start;
}

body .merchant-dashboard .order-header h3 {
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0;
}

body .merchant-dashboard .order .details {
  border-top: 1px solid var(--color-border);
  margin: var(--space-3) 0;
  padding-top: var(--space-3);
}

body .merchant-dashboard .order-actions {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}

body .merchant-dashboard .notification-card,
body .merchant-dashboard .request-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}

body .merchant-dashboard .empty-state {
  align-items: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 7rem;
  padding: var(--space-5);
  text-align: center;
}

body .merchant-dashboard .payment-section {
  max-width: 48rem;
}

body .merchant-dashboard .payment-section > form {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr auto;
  margin-top: var(--space-4);
}

body .merchant-dashboard .payment-section > form + form {
  display: block;
}

@media (max-width: 52rem) {
  body .merchant-dashboard .dashboard-overview {
    grid-template-columns: 1fr 1fr;
  }

  body .merchant-dashboard .summary-card:last-of-type {
    grid-column: span 2;
  }

  body .merchant-dashboard .publish {
    grid-template-columns: 1fr 1fr;
  }

  body .merchant-dashboard .publish textarea,
  body .merchant-dashboard .publish input[type="file"],
  body .merchant-dashboard .publish button {
    grid-column: 1 / -1;
  }

  body .merchant-dashboard .payment-section > form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 40rem) {
  body .merchant-dashboard {
    width: min(100% - 1.75rem, 75rem);
  }

  body .merchant-dashboard .merchant-header,
  body .merchant-dashboard .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  body .merchant-dashboard .dashboard-overview {
    grid-template-columns: 1fr;
  }

  body .merchant-dashboard .summary-card:last-of-type {
    grid-column: auto;
  }

  body .merchant-dashboard .publish-panel,
  body .merchant-dashboard .payment-section,
  body .merchant-dashboard .order,
  body .merchant-dashboard .notification-card,
  body .merchant-dashboard .request-card {
    padding: var(--space-4);
  }

  body .merchant-dashboard .publish,
  body .merchant-dashboard .payment-section > form {
    grid-template-columns: 1fr;
  }

  body .merchant-dashboard .publish input,
  body .merchant-dashboard .publish textarea,
  body .merchant-dashboard .publish input[type="file"],
  body .merchant-dashboard .publish button {
    grid-column: auto;
  }

  body .merchant-dashboard .actions,
  body .merchant-dashboard .actions form,
  body .merchant-dashboard .actions .button,
  body .merchant-dashboard .payment-section > form .button {
    width: 100%;
  }

  body .merchant-dashboard .product-card:hover {
    transform: none;
  }
}

.discovery { display: grid; gap: var(--space-5); margin: var(--space-6) 0; }
.discovery-items { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: var(--space-2); }
.discovery-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); display: grid; font-family: var(--font-ui); font-size: var(--text-small); gap: var(--space-2); overflow: hidden; padding-bottom: var(--space-3); text-decoration: none; }
.discovery-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.discovery-item span, .discovery-item strong { padding: 0 var(--space-3); }
.discovery-item strong { color: var(--color-brand-dark); }
.community-events { margin-top: var(--space-8); max-width: 48rem; }
.community-event { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: grid; gap: var(--space-3); grid-template-columns: 7rem 1fr; margin-top: var(--space-3); overflow: hidden; padding: var(--space-3); }
.community-event img { aspect-ratio: 1; height: 7rem; object-fit: cover; width: 7rem; }
.announcement-link { font-family: var(--font-ui); font-size: var(--text-small); margin: var(--space-5) 0 0; }
.tinys-form-page { margin: 0 auto; max-width: 44rem; padding: var(--space-6) var(--space-4) var(--space-10); }
.tinys-form-page header img { max-width: 18rem; }
.tinys-form-page header h1 { font-size: var(--text-h1); margin: var(--space-5) 0 var(--space-2); }
.tinys-form-page header p { color: var(--color-text-muted); font-family: var(--font-ui); }
.tinys-back-link { font-family: var(--font-ui); font-size: var(--text-small); }
.tinys-submission-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: grid; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-6); }
.tinys-submission-form label { color: var(--color-brand); display: grid; font-family: var(--font-ui); font-size: var(--text-small); font-weight: 700; gap: var(--space-2); }
.tinys-submission-form input, .tinys-submission-form select, .tinys-submission-form textarea { border: 1px solid var(--color-border); border-radius: var(--radius-md); min-height: 2.75rem; padding: var(--space-3); }
.tinys-submission-form textarea { min-height: 8rem; }
.tinys-alert { border-radius: var(--radius-md); font-family: var(--font-ui); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); }
.tinys-alert--danger { background: var(--color-accent-soft); color: var(--color-danger); }
.tinys-alert--success { background: #dff2e8; color: var(--color-success); }

/* Operations dashboard shell — shared visual system for the merchant and
   admin internal dashboards. Built on the existing tokens/components above
   (cards, badges, buttons) rather than a parallel palette, so both surfaces
   read as the same product instead of two different-looking apps. */
.ops-shell { max-width: 76rem; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-10); }
.ops-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.ops-eyebrow { font-family: var(--font-ui); font-size: var(--text-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-1); }
.ops-title { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 400; color: var(--color-brand); margin: 0 0 var(--space-2); }
.ops-identity { font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); margin: 0; }
.ops-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.ops-nav a { font-family: var(--font-ui); font-size: var(--text-small); font-weight: 700; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--color-text-muted); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); }
.ops-nav a:hover { background: var(--color-surface-muted); color: var(--color-brand); }
.ops-nav a.is-active { background: var(--color-brand); color: #fff; }

.dash-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.dash-hub-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1); min-height: 2.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.dash-hub-tile:hover, .dash-hub-tile:focus-visible { border-color: var(--color-brand); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dash-hub-tile-label { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-small); }
.dash-hub-tile-sub { font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-muted); }
.ops-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.ops-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5); }
.ops-stat-value { display: block; font-family: var(--font-display); font-size: var(--text-h2); color: var(--color-brand); line-height: 1; margin-bottom: var(--space-1); }
.ops-stat-label { font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); }
.ops-stat-note { font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-warning); margin-top: var(--space-1); }

.ops-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); }
.ops-section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.ops-section-head h2 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 400; color: var(--color-brand); margin: 0; }
.ops-section-head p { font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); margin: var(--space-1) 0 0; }

.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4); }
.ops-disclosure { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); overflow: hidden; }
.ops-disclosure-toggle { align-items: center; background: transparent; border: 0; color: var(--color-text); cursor: pointer; display: flex; font: 700 var(--text-h3)/1.2 var(--font-ui); justify-content: space-between; padding: var(--space-4) var(--space-5); text-align: left; width: 100%; }
.ops-disclosure-toggle:hover { background: var(--color-surface-muted); }
.ops-disclosure-toggle:focus-visible { outline: 3px solid var(--color-brand-dark); outline-offset: -3px; }
.ops-disclosure-chevron { flex: 0 0 auto; transition: transform var(--transition-fast); }
.ops-disclosure-toggle[aria-expanded="true"] .ops-disclosure-chevron { transform: rotate(180deg); }
.ops-disclosure-panel { padding: 0 var(--space-5) var(--space-5); }
.ops-disclosure-panel[hidden] { display: none; }
.ops-disclosure-panel > .ops-section { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; }
.partnership-banner { background: var(--color-brand-dark); border-radius: var(--radius-lg); color: var(--color-surface); margin-top: var(--space-8); padding: var(--space-5) var(--space-6); }
.partnership-banner .eyebrow { color: var(--color-lime); margin: 0 0 var(--space-1); }
.partnership-banner h2 { color: inherit; font-size: var(--text-h3); margin: 0 0 var(--space-2); }
.partnership-banner p:last-child { margin: 0; max-width: 48rem; }
.ops-panel { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.ops-panel h3 { font-family: var(--font-ui); font-size: var(--text-body); font-weight: 700; color: var(--color-brand); margin: 0 0 var(--space-2); }
.ops-panel .meta { font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); margin: 0 0 var(--space-3); line-height: 1.5; }

.ops-form-inline { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.ops-form-inline label { display: grid; gap: var(--space-1); font-family: var(--font-ui); font-size: var(--text-small); font-weight: 700; color: var(--color-brand); flex: 1 1 10rem; }
.ops-form-inline input, .ops-form-inline select, .ops-form-inline textarea { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: 2.5rem; font-family: var(--font-ui); width: 100%; }

.ops-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.ops-table-wrap { overflow-x: auto; }
.ops-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-small); }
.ops-table th { text-align: left; color: var(--color-text-muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.ops-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.ops-table tr:last-child td { border-bottom: none; }

.ops-empty { font-family: var(--font-ui); color: var(--color-text-muted); padding: var(--space-5); text-align: center; background: var(--color-surface-muted); border-radius: var(--radius-md); }

.ops-details summary { cursor: pointer; font-family: var(--font-ui); font-size: var(--text-small); font-weight: 700; color: var(--color-brand); padding: var(--space-2) 0; }
.ops-details ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); }
.ops-details li { margin-bottom: var(--space-1); }

.ops-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.ops-tab { border: 0; background: transparent; font-family: var(--font-ui); font-size: var(--text-small); font-weight: 700; color: var(--color-text-muted); padding: var(--space-3) var(--space-3); cursor: pointer; border-bottom: 3px solid transparent; }
.ops-tab[aria-selected="true"] { color: var(--color-brand); border-bottom-color: var(--color-accent); }

@media (max-width: 760px) {
  .ops-shell { padding: var(--space-4) var(--space-3) var(--space-8); }
  .ops-header { display: block; }
  .ops-section { padding: var(--space-4); }
  .ops-disclosure-toggle { padding: var(--space-3) var(--space-4); }
  .ops-disclosure-panel { padding: 0 var(--space-4) var(--space-4); }
  .ops-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-1); }
  .ops-tabs { overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 30rem) { .discovery-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .community-event { grid-template-columns: 1fr; } .community-event img { height: auto; width: 100%; } .tinys-submission-form { padding: var(--space-4); } }

/* Product variant selectors (product.html) — merchant-defined option
   groups (Size, Colour, ...) rendered as chip buttons; selecting one from
   every group resolves a single product_variants row client-side. */
.variant-groups { margin: var(--space-5) 0; }
.variant-group { margin-bottom: var(--space-4); }
.variant-group-label { font-family: var(--font-ui); font-size: var(--text-caption); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.variant-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant-chip { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font-family: var(--font-ui); font-size: var(--text-small); cursor: pointer; box-shadow: var(--depth-control); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }
.variant-chip:hover { border-color: var(--color-brand); }
.variant-chip:focus-visible { box-shadow: var(--focus-ring); outline: 2px solid var(--color-brand-dark); outline-offset: 2px; }
/* Selected is never colour/shadow alone: it also gains a check mark and aria-pressed="true" (set by the picker). */
.variant-chip.is-selected { background: var(--color-brand-dark); border-color: var(--color-brand-dark); box-shadow: var(--depth-selected); color: #fff; font-weight: 700; }
.variant-chip.is-selected::before { content: "\2713\00a0"; }
/* Sold out stays selectable (the page then says so) but reads as unavailable without relying on opacity alone. */
.variant-chip.is-unavailable { opacity: .6; text-decoration: line-through; border-style: dashed; }
.variant-chip.is-unavailable.is-selected { opacity: 1; }
.variant-status { font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); margin: var(--space-2) 0; }
.variant-status.is-danger { color: var(--color-danger); }
.product-quantity { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; font-family: var(--font-ui); }
.product-quantity input { width: 5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }

/* Cart badge + drawer (cart.js) — shared markup/behaviour across every
   customer-facing page that includes cart.js, styled with the same tokens
   as the rest of the storefront so it never looks like a bolted-on widget. */
.cart-toggle { min-height: 2.75rem; position: relative; display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font-family: var(--font-ui); font-size: var(--text-small); font-weight: 700; box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.cart-toggle:hover { border-color: var(--color-brand); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cart-toggle-count { background: var(--color-accent); color: #fff; border-radius: var(--radius-pill); padding: 0 var(--space-2); min-width: 1.25rem; text-align: center; font-size: var(--text-caption); box-shadow: 0 2px 6px rgba(217, 61, 106, .35); }
.cart-backdrop { position: fixed; inset: 0; background: rgba(17, 45, 42, .45); z-index: 40; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 100vw); background: var(--color-surface); box-shadow: var(--shadow-lg); z-index: 41; display: flex; flex-direction: column; }
.cart-drawer[hidden], .cart-backdrop[hidden] { display: none; }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.cart-drawer-head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); color: var(--color-brand); margin: 0; }
.cart-close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--color-text-muted); }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.cart-empty { font-family: var(--font-ui); color: var(--color-text-muted); }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.cart-line { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; }
.cart-line-image { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--radius-md); background: var(--color-surface-muted); }
.cart-line-body { font-family: var(--font-ui); }
.cart-line-name { margin: 0; font-weight: 700; font-size: var(--text-small); }
.cart-line-meta { margin: var(--space-1) 0 0; font-size: var(--text-caption); color: var(--color-text-muted); }
.cart-line-qty { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.cart-qty-button { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); width: 1.75rem; height: 1.75rem; line-height: 1; }
.cart-qty-value { min-width: 1.25rem; text-align: center; font-family: var(--font-ui); font-size: var(--text-small); }
.cart-line-remove { border: 0; background: transparent; color: var(--color-danger); font-family: var(--font-ui); font-size: var(--text-caption); text-decoration: underline; padding: 0; }
.cart-line-total { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-small); white-space: nowrap; }
.cart-summary { margin-top: var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.cart-summary-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); margin-bottom: var(--space-2); }
.cart-checkout-form { display: grid; gap: var(--space-2); }
.cart-fulfillment { border: 0; padding: 0; margin: var(--space-2) 0; }
.cart-radio { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-small); margin-right: var(--space-4); font-weight: 400; text-transform: none; letter-spacing: normal; }
.cart-checkout-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.cart-checkout-actions .tinys-button { flex: 1; }
.cart-confirmation-order { font-family: var(--font-ui); }
.cart-merchant-conflict { display: grid; gap: var(--space-2); }
@media (max-width: 30rem) {
  .cart-drawer { width: 100vw; }
}

/* Batch 4: compact merchant product cards. Same markup and classes as
   before; only spacing, control height and the grid minimum change so more
   cards fit per row (two across on a phone) without removing any control. */
body .merchant-dashboard .product-card .details,
body .merchant-dashboard .product-card .product-price {
  font-size: var(--text-caption);
  line-height: 1.35;
  margin-bottom: var(--space-1);
}

body .merchant-dashboard .product-card .tinys-badge {
  font-size: 0.7rem;
  padding: 0.125rem 0.4rem;
}

body .merchant-dashboard .product-card .tinys-button {
  font-size: var(--text-caption);
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  width: 100%;
}

body .merchant-dashboard .product-card form {
  margin-bottom: var(--space-1);
}

body .merchant-dashboard .product-card input,
body .merchant-dashboard .product-card select,
body .merchant-dashboard .product-card textarea {
  box-sizing: border-box;
  max-width: 100%;
}

body .merchant-dashboard .product-card .ops-details summary {
  font-size: var(--text-caption);
  padding: var(--space-1) 0;
}

@media (max-width: 40rem) {
  body .merchant-dashboard .product-grid {
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .merchant-dashboard .product-card-body {
    padding: var(--space-2);
  }
}

/* Batch 4: non-blocking "online payment in progress" notice (cart.js). */
.payment-progress-notice { align-items: center; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; font-family: var(--font-ui); font-size: var(--text-small); gap: var(--space-2) var(--space-3); justify-content: center; padding: var(--space-2) var(--space-3); }
.payment-progress-notice a { color: var(--color-brand-dark); font-weight: 700; }
.payment-progress-dismiss { background: none; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0 var(--space-1); }

/* Phase 2P-A: shared navigation. Reuses the .ops-nav pill styling; the internal
   block is a neutral band that marks Tiny's staff-only entries. */
.internal-nav { align-items: center; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); }
.internal-nav-badge { background: var(--color-brand-dark); border-radius: var(--radius-pill); color: #fff; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; padding: var(--space-1) var(--space-3); text-transform: uppercase; white-space: nowrap; }
.internal-nav-group { align-items: center; margin-top: 0; }
/* Batch E2-4: shell-wide unread-notification badge on the shared merchant nav's
   Dashboard link (templates/_shared_nav.html) — visible on every merchant page. */
.nav-unread-badge { background: var(--coral); border-radius: var(--radius-pill); color: #fff; display: inline-block; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 700; line-height: 1; min-width: 1.1em; padding: 0.2em 0.5em; text-align: center; }
.internal-nav-label { color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 40rem) {
  .internal-nav { align-items: stretch; flex-direction: column; }
}

/* Phase 2P-D: merchant Options & Variants page. Rows are a grid on wide screens and stack (with
   their data-label captions) on narrow ones, so the editor never needs horizontal scrolling. */
.variants-page .variant-option-head { align-items: flex-end; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.variants-page .variant-values { display: grid; gap: var(--space-2); list-style: none; margin: var(--space-3) 0; padding: 0; }
.variants-page .variant-values li { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.variants-page .variant-tools { margin-bottom: var(--space-4); }
.variant-table { display: grid; gap: var(--space-2); }
.variant-row { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: grid; gap: var(--space-2) var(--space-3); grid-template-columns: minmax(10rem, 1.4fr) minmax(14rem, 2fr) minmax(12rem, 1.4fr) auto; padding: var(--space-3); }
.variant-row.is-disabled { opacity: .75; }
.variant-cell { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.variant-edit input, .variant-stock input { max-width: 8rem; }
.variant-actions form { margin: 0; }
@media (max-width: 52rem) {
  .variant-row { grid-template-columns: 1fr; }
  .variant-cell::before { color: var(--color-text-muted); content: attr(data-label); flex-basis: 100%; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
}

/* Phase 2P-B: shared pagination controls and internal verification lists. */
.pagination { align-items: center; display: flex; flex-wrap: wrap; font-family: var(--font-ui); font-size: var(--text-small); gap: var(--space-2) var(--space-5); margin: var(--space-4) 0; }
.pagination a, .pagination .is-current { border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); text-decoration: none; }
.pagination a { color: var(--color-brand); font-weight: 700; }
.pagination a:hover { background: var(--color-surface-muted); }
.pagination .is-current { background: var(--color-brand); color: #fff; font-weight: 700; }
.pagination-summary { color: var(--color-text-muted); }
.verification-documents { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; }
.verification-documents li { font-family: var(--font-ui); font-size: var(--text-small); margin-bottom: var(--space-1); }

/* ==========================================================================
   Phase 2Q: whole-app phone hardening.
   One responsive layer for every surface (storefront, merchant, Tiny's
   internal) built on the existing tokens and class names. Nothing here
   changes markup semantics or business behaviour, and nothing depends on
   hover. Written last so it wins the cascade over the earlier per-page
   rules; the storefront's inline <style> blocks are outranked with the same
   `body`-prefix specificity the rest of this file already uses.
   ========================================================================== */

/* Safe areas (notches, rounded corners, the home indicator) for browsers and
   the installed PWA. The pages opt in with viewport-fit=cover. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Shared base look for the plain .button / .button.secondary used by the customer booking, join and status pages,
   which have no page stylesheet of their own (the product page still overrides it with its own inline rule). */
body .button { align-items: center; background: var(--color-brand-dark); border: 1px solid var(--color-brand-dark); border-radius: var(--radius-md); color: var(--color-surface); cursor: pointer; display: inline-flex; font-family: var(--font-ui); font-size: var(--text-small); font-weight: 700; justify-content: center; min-height: 2.75rem; padding: 0.625rem 1rem; text-decoration: none; }
body .button.secondary { background: var(--color-surface); border-color: var(--color-brand); color: var(--color-brand); }
body .wrap .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
body .wrap .actions form { margin: 0; }

/* A link styled as a button needs a box that honours min-height (an inline <a> ignores it). */
body a.outline, body a.primary, body a.button { align-items: center; display: inline-flex; justify-content: center; }

/* Grid children may shrink below their content width, so long controls cannot push a card or form off-screen. */
body .merchant-dashboard .publish > *, body .merchant-dashboard .product-card-body, fieldset.payment-policy { min-width: 0; }
fieldset.payment-policy { max-width: 100%; }
fieldset.product-availability { max-width: 100%; margin: var(--space-3) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); }
fieldset.payment-policy label { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Form controls: never smaller than 16px on a phone (iOS Safari zooms the whole page when a smaller field
   gets focus, which is what made the checkout drawer look broken), and never taller than needed to tap. */
input, select, textarea, button, summary, a { touch-action: manipulation; }

/* A field placed inside a label (cart checkout, several forms) fills the label instead of sitting beside its text. */
.tinys-label > .tinys-input,
.tinys-label > .tinys-select,
.tinys-label > .tinys-textarea {
  display: block;
  margin-top: var(--space-2);
  max-width: 100%;
  width: 100%;
}
.tinys-submission-form label,
.tinys-submission-form input,
.tinys-submission-form select,
.tinys-submission-form textarea { max-width: 100%; min-width: 0; }
.tinys-submission-form input, .tinys-submission-form select, .tinys-submission-form textarea { width: 100%; }

/* Plain stacked forms (booking, group-request join, cancellation): one field per line on any width. */
.tinys-stack-form { display: grid; gap: var(--space-3); margin-top: var(--space-3); max-width: 32rem; }
.tinys-stack-form input, .tinys-stack-form select, .tinys-stack-form textarea, .tinys-stack-form button { max-width: 100%; width: 100%; }
.tinys-stack-form label { display: grid; font-family: var(--font-ui); font-size: var(--text-small); font-weight: 700; gap: var(--space-1); }
.tinys-stack-form input, .tinys-stack-form select, .tinys-stack-form textarea {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3);
}
.tinys-stack-form textarea { min-height: 6rem; }

/* Navigation pills wrap instead of running off the right edge (internal groups used to force a 90-215px sideways scroll). */
.ops-nav, .internal-nav, .internal-nav-group { max-width: 100%; min-width: 0; }
.internal-nav-badge { align-self: flex-start; }
.internal-nav-label { white-space: normal; }
/* A real button placed inside a nav row (e.g. "New quotation") keeps its own colours; the pill rule below it made its label dim. */
.ops-nav a.tinys-button--primary, .ops-nav a.tinys-button--primary:hover { background: var(--color-brand-dark); color: var(--color-surface); }
.ops-nav a.tinys-button--secondary { color: var(--color-brand); }
/* The active pill on the merchant dashboard was white on white; give it the same active look as every other page. */
body .merchant-dashboard .merchant-nav a.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

@media (max-width: 760px) {
  .ops-nav { flex-wrap: wrap; overflow-x: visible; }
  .ops-tabs { max-width: 100%; }
}

/* Tables stay tables on wide screens. On a phone each row becomes a labelled card (data-label on every cell). */
.ops-table--stack td[data-label]::before { display: none; }

@media (max-width: 40rem) {
  .ops-table--stack, .ops-table--stack tbody, .ops-table--stack tr, .ops-table--stack td { display: block; width: 100%; }
  .ops-table--stack thead { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .ops-table--stack tr { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); }
  .ops-table--stack td { align-items: baseline; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); justify-content: space-between; padding: var(--space-2) 0; text-align: right; }
  .ops-table--stack tr td:last-child { border-bottom: 0; }
  .ops-table--stack td[data-label]::before {
    color: var(--color-text-muted); content: attr(data-label); display: block; flex: 0 0 auto; font-size: var(--text-caption);
    font-weight: 700; letter-spacing: .06em; max-width: 45%; text-align: left; text-transform: uppercase;
  }
  .ops-table-wrap { overflow-x: visible; }
  .analytics-table-wrap { overflow-x: visible; }
}

/* Forms inside the ops pages: action buttons take the full row on a phone. */
@media (max-width: 40rem) {
  .ops-form-inline { align-items: stretch; }
  .ops-form-inline > .tinys-button, .ops-form-inline > button { flex: 1 1 100%; }
  .ops-actions > form, .ops-actions > .tinys-button, .ops-actions > a { flex: 1 1 100%; }
  .ops-actions > form .tinys-button { width: 100%; }
  .ops-section-head { align-items: flex-start; }
  .ops-header .tinys-button, .ops-header form { margin-top: var(--space-2); }
}

/* Merchant product cards keep two columns on a phone; a card being edited takes the whole row so its form is usable. */
@media (max-width: 40rem) {
  body .merchant-dashboard .product-card:has(details[open]) { grid-column: 1 / -1; }
}

/* Cart / checkout drawer: real viewport height (dynamic toolbars), safe-area padding, contained scrolling,
   background scroll lock, and a Checkout / Place order row that stays reachable while the form scrolls. */
.cart-drawer { max-height: 100vh; max-height: 100dvh; overscroll-behavior: contain; }
.cart-drawer-head { padding-top: max(var(--space-4), env(safe-area-inset-top)); }
.cart-drawer-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: max(var(--space-5), env(safe-area-inset-bottom)); }
html.cart-open, html.cart-open body { overflow: hidden; }
.cart-checkout-actions { background: var(--color-surface); bottom: 0; padding-bottom: var(--space-2); position: sticky; }
.cart-summary .tinys-button { width: 100%; }
.cart-checkout-form .tinys-label { font-size: var(--text-small); letter-spacing: .04em; }
.cart-payment-method { min-width: 0; }
.cart-payment-method .cart-radio, .cart-fulfillment .cart-radio { align-items: flex-start; display: flex; margin-right: 0; padding: var(--space-2) 0; }
.cart-fulfillment { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.cart-fulfillment legend { flex-basis: 100%; }

/* Phone and touch: comfortable targets, readable text, stacked card actions. */
@media (max-width: 40rem), (pointer: coarse) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  body select, body textarea { font-size: 1rem; min-height: 2.75rem; }
  body input[type="checkbox"], body input[type="radio"] { height: 1.25rem; width: 1.25rem; }

  .ops-nav a, .ops-tab, .pagination a, .pagination .is-current, .code-copy, .cart-close, .cart-line-remove,
  .header-merchant-login, .tinys-back-link, .shell-menu-toggle, .category-tab, .variant-chip, .cart-toggle,
  .product-carousel-control, .events-controls button, .media-nav, .cart-qty-button, .internal-nav a {
    align-items: center; display: inline-flex; min-height: 2.75rem;
  }
  .ops-disclosure-toggle, .dash-group-toggle { min-height: 2.75rem; }
  .cart-close, .cart-qty-button, .media-nav, .product-carousel-control { justify-content: center; min-width: 2.75rem; }
  .cart-line-remove { padding-inline: var(--space-2); }
  /* <summary> keeps its disclosure marker (display:flex would remove it), so it gets padding instead of a min-height. */
  .ops-details summary { padding-block: 0.7rem; }
  .media-dot { position: relative; }
  .media-dot::before { content: ""; inset: -0.85rem; position: absolute; }
  body .merchant-dashboard .product-card .tinys-button { min-height: 2.75rem; }
  body .merchant-dashboard .product-card .ops-details summary { padding-block: 0.7rem; }
  .community-event a, .announcement-link a, .ops-table a.meta { align-items: center; display: inline-flex; min-height: 2.75rem; }
  body .merchant-dashboard .product-card code, body .merchant-dashboard code { font-size: 0.75rem; }
  body .media-dot { height: 0.75rem; width: 0.75rem; }
  body .media-dots { gap: 0.9rem; }
  body .product-badge { font-size: 0.6875rem; }
  body .product-card-actions .outline { min-height: 2.75rem; }
}

/* Storefront cards on a narrow phone: buttons stack full width and their text wraps instead of being clipped. */
@media (max-width: 520px) {
  body .product-card-actions { flex-direction: column; gap: var(--space-2); }
  body .product-card-actions .outline,
  body .product-card-actions .outline:first-child {
    flex: 1 1 auto; overflow: visible; padding: var(--space-2) var(--space-2); text-overflow: clip; white-space: normal; width: 100%;
  }
  body .product-card-status { min-height: 0; }
}

/* Product page and other storefront pages: a smaller brand mark so the content starts sooner, and full-width actions. */
@media (max-width: 40rem) {
  body .page-head .brand img { max-width: 9rem; }
  body .actions > .button, body .actions > .tinys-button { flex: 1 1 100%; text-align: center; }
  body .body h1 { font-size: 1.75rem; }
  body .product-quantity input { width: 6rem; }
  .tinys-form-page { padding-left: var(--space-3); padding-right: var(--space-3); }
  .tinys-form-page header img { max-width: 12rem; }
}

/* Phase 2S: sale price presentation and the merchant edit-form fields. */
.product-card-was { color: var(--color-text-muted); font-size: 0.8em; font-weight: 400; }
body .merchant-dashboard .edit-field { color: var(--color-text-muted); display: grid; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 700; gap: var(--space-1); margin-bottom: var(--space-2); }
body .merchant-dashboard .edit-field input, body .merchant-dashboard .edit-field textarea { color: var(--color-text); font-weight: 400; max-width: 100%; width: 100%; }

/* Commercial-document family: quotation browser/print output mirrors the invoice and receipt PDF hierarchy. */
.commercial-document-page { background: #eef2f5; min-height: 100vh; padding: clamp(1rem, 4vw, 2.5rem); }
.commercial-document-back { margin: 0 auto 1rem; max-width: 52rem; }
.commercial-document-back a { color: #5b6b7a; font-size: .875rem; }
.commercial-document { background: #fff; box-shadow: 0 10px 30px rgba(20,30,40,.06); color: #1c2530; margin: 0 auto; max-width: 52rem; padding: clamp(1.5rem, 6vw, 2.75rem); }
.commercial-document-header { align-items: flex-start; border-bottom: 2px solid #1c2530; display: flex; gap: 1.5rem; justify-content: space-between; padding-bottom: 1.25rem; }
.commercial-document-brand { align-items: center; display: flex; gap: .875rem; min-width: 0; }
.commercial-document-brand img { height: 3.25rem; object-fit: contain; width: 3.25rem; }
.commercial-document-brand p { margin: 0; }
.commercial-document-brand strong { display: block; font-size: 1.125rem; }
.commercial-document-brand span, .commercial-document-identity span, .commercial-document-lines td span, .commercial-document-notice, .commercial-document-footer { color: #5b6b7a; font-size: .75rem; line-height: 1.5; }
.commercial-document-identity { min-width: 0; text-align: right; }
.commercial-document-identity p, .commercial-document-identity h1 { margin: 0; }
.commercial-document-identity p { color: #14603f; font-size: .75rem; font-weight: 800; letter-spacing: .09em; }
.commercial-document-identity h1 { font-size: 1rem; margin: .2rem 0; overflow-wrap: anywhere; }
.commercial-document-parties { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.5rem 0; }
.commercial-document-parties h2, .commercial-document-meta h2 { color: #5b6b7a; font-size: .65rem; letter-spacing: .09em; margin: 0 0 .35rem; }
.commercial-document-parties p, .commercial-document-meta p { font-size: .875rem; line-height: 1.55; margin: 0; }
.commercial-document-lines { border-collapse: collapse; font-size: .875rem; table-layout: fixed; width: 100%; }
.commercial-document-lines th { border-bottom: 1.5px solid #1c2530; color: #5b6b7a; font-size: .65rem; letter-spacing: .07em; padding: 0 .4rem .5rem; text-align: left; }
.commercial-document-lines th:not(:first-child), .commercial-document-lines td:not(:first-child) { text-align: right; }
.commercial-document-lines th:first-child { width: 48%; }
.commercial-document-lines td { border-bottom: 1px solid #d9e0e6; padding: .7rem .4rem; vertical-align: top; }
.commercial-document-totals { margin: 1rem 0 1.5rem auto; max-width: 21rem; }
.commercial-document-totals p { display: flex; gap: 1rem; justify-content: space-between; margin: .3rem 0; }
.commercial-document-totals span { color: #5b6b7a; text-align: right; }
.commercial-document-totals strong { font-variant-numeric: tabular-nums; text-align: right; }
.commercial-document-totals .commercial-document-total { border-top: 1.5px solid #1c2530; color: #14603f; font-size: 1rem; font-weight: 800; margin-top: .65rem; padding-top: .65rem; }
.commercial-document-total span { color: #14603f; }
.commercial-document-meta { border-bottom: 1px solid #d9e0e6; border-top: 1px solid #d9e0e6; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .875rem 0; }
.commercial-document-notice { margin: 1rem 0; }
.commercial-document-note { font-size: .875rem; line-height: 1.55; }
.commercial-document-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.commercial-document-actions form { margin: 0; }
.commercial-document-footer { margin-top: 1.75rem; text-align: center; }
@media (max-width: 40rem) {
  .commercial-document-page { padding: 0; }
  .commercial-document-back { padding: 1rem 1rem 0; }
  .commercial-document { box-shadow: none; padding: 1.25rem 1rem; }
  .commercial-document-header { align-items: flex-start; flex-direction: column; }
  .commercial-document-parties, .commercial-document-meta { grid-template-columns: 1fr; }
  .commercial-document-identity { text-align: left; }
  .commercial-document-lines thead { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .commercial-document-lines, .commercial-document-lines tbody, .commercial-document-lines tr, .commercial-document-lines td { display: block; width: 100%; }
  .commercial-document-lines tr { border: 1px solid #d9e0e6; margin-bottom: .75rem; padding: .5rem .75rem; }
  .commercial-document-lines td { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; text-align: right; }
  .commercial-document-lines.ops-table--stack td[data-label]::before { display: block; }
  .commercial-document-lines td::before { color: #5b6b7a; content: attr(data-label); font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-align: left; }
  .commercial-document-lines td:first-child { display: block; text-align: left; }
  .commercial-document-lines td:first-child::before { display: block; margin-bottom: .35rem; }
  .commercial-document-totals { max-width: none; }
}
@media print {
  .commercial-document-page { background: #fff; padding: 0; }
  .commercial-document-back, .commercial-document-actions { display: none; }
  .commercial-document { box-shadow: none; max-width: none; padding: 0; }
  .commercial-document-lines tr, .commercial-document-totals, .commercial-document-meta { break-inside: avoid; }
}


/* Storefront UX: card option preview, compact request prompt, narrow search. */
.product-card-options {
  color: var(--color-text-muted);
  font: 0.75rem / 1.3 var(--font-ui);
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}
.product-card-options li { overflow-wrap: anywhere; }
.product-card-options-name { color: var(--color-text); font-weight: 600; }
.product-card-options-more { white-space: nowrap; }

.home-page .search-bar { display: flex; gap: 10px; margin-bottom: 0.5rem; }
.home-page .search-bar input { flex: 1; min-width: 0; }
.home-page .search-bar select { width: auto; max-width: 100%; }
.home-page .request-prompt { margin: 0 0 0.75rem; }
.home-page .request-prompt a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; font-weight: 600; }
.home-page .request[hidden] { display: none; }
.home-page .request { margin: 0 0 1.25rem; }
.home-page .request form { max-width: 100%; }
.home-page .request-close-row { margin: 1rem 0 0; }
@media (max-width: 520px) {
  .home-page .search-bar { flex-direction: column; }
  .home-page .search-bar select { width: 100%; }
}


/* Merchant notification centre (bell, panel, toasts). */
.notification-centre { margin-left: auto; position: relative; }
.notification-bell { align-items: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); cursor: pointer; display: inline-flex; height: 2.5rem; justify-content: center; position: relative; width: 2.5rem; }
.notification-bell:hover { background: var(--color-surface-muted); }
.notification-bubble { background: var(--coral, #d93d6a); border-radius: var(--radius-pill); color: #fff; font: 700 0.6875rem / 1 var(--font-ui); min-width: 1.125rem; padding: 0.1875rem 0.3125rem; position: absolute; right: -0.25rem; text-align: center; top: -0.25rem; }
.notification-bubble[hidden] { display: none; }
.notification-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 70vh; overflow-y: auto; padding: var(--space-3); position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(24rem, 92vw); z-index: 50; }
.notification-panel[hidden] { display: none; }
.notification-panel-head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; margin-bottom: var(--space-2); }
.notification-panel-controls { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.notification-centre-list { list-style: none; margin: 0; padding: 0; }
.notification-centre-item { border-top: 1px solid var(--color-border); padding: var(--space-3) 0; }
.notification-centre-item.is-unread strong::before { background: var(--coral, #d93d6a); border-radius: 50%; content: ""; display: inline-block; height: 0.5rem; margin-right: 0.375rem; width: 0.5rem; }
.notification-centre-body, .notification-centre-time { font-size: var(--text-small); margin: 0.25rem 0 0; overflow-wrap: anywhere; }
.notification-centre-time { color: var(--color-text-muted); font-size: 0.75rem; }
.notification-centre-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.notification-centre-empty { color: var(--color-text-muted); padding: var(--space-3) 0; }
.notification-toasts { display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; position: fixed; right: var(--space-4); top: var(--space-4); width: min(22rem, calc(100vw - 2rem)); z-index: 60; }
.notification-toast { align-items: center; background: var(--color-surface); border: 1px solid var(--color-brand); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); pointer-events: auto; }
.notification-toast strong, .notification-toast span { flex: 1 1 100%; overflow-wrap: anywhere; }
.notification-toast-action, .notification-toast-close { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-pill); cursor: pointer; font: 700 0.8125rem var(--font-ui); min-height: 2rem; padding: 0 0.75rem; }
.notification-toast-close { margin-left: auto; }
@media (max-width: 520px) { .notification-panel { position: fixed; left: 4vw; right: 4vw; top: 4rem; width: auto; } }

/* Shared cart page. */
.shared-cart-lines { list-style: none; margin: var(--space-4) 0; padding: 0; }
.shared-cart-line { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.shared-cart-image { border-radius: var(--radius-sm); flex: none; height: 64px; object-fit: cover; width: 64px; }
.shared-cart-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.shared-cart-line.is-unavailable, .shared-cart-line.is-out_of_stock { opacity: 0.7; }
.shared-cart-note { color: var(--color-accent, #b3263e); font-size: 0.875rem; font-weight: 600; }
.shared-cart-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.shared-cart-actions[hidden], .shared-cart-conflict[hidden] { display: none; }
.shared-cart-conflict { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: var(--space-3); padding: var(--space-3); }


/* Seasonal promotions: a slim banner above the catalogue and a short rail below it. */
.home-page .promotion-banners { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.home-page .promotion-banners[hidden], .home-page .promotion-rails[hidden] { display: none; }
.promotion-banner { align-items: center; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-left: 4px solid var(--color-lime, #b7d34a); border-radius: var(--radius-md); display: flex; gap: var(--space-3); overflow: hidden; padding: var(--space-2) var(--space-4); }
.promotion-banner-image { border-radius: var(--radius-sm); flex: none; height: 3.5rem; object-fit: cover; width: 6rem; }
.promotion-banner-text { align-items: center; column-gap: var(--space-4); display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.promotion-banner-text > * { grid-column: 1; }
.promotion-banner .eyebrow { font-size: 0.6875rem; margin: 0; }
.promotion-banner h2 { font-size: 1.125rem; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.promotion-banner-body { font-size: var(--text-small); margin: 0; overflow-wrap: anywhere; }
.promotion-banner-link { align-items: center; display: inline-flex; font-weight: 700; grid-column: 2; grid-row: 1 / span 3; min-height: 2.5rem; white-space: nowrap; }
.promotion-rails { margin: var(--space-6) 0; }
.promotion-rail { margin-bottom: var(--space-5); }
.promotion-rail-title { font-size: 1.25rem; }
@media (max-width: 520px) {
  .promotion-banner { align-items: flex-start; flex-direction: column; }
  .promotion-banner-image { height: 5rem; width: 100%; }
  .promotion-banner-text { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .promotion-banner-link { grid-column: 1; grid-row: auto; }
}

/* Stacked admin form: one labelled field per row. */
.ops-form-stack { display: grid; gap: var(--space-3); max-width: 42rem; }
.ops-form-stack label { display: grid; gap: var(--space-1); font-family: var(--font-ui); font-size: var(--text-small); font-weight: 600; }
.ops-form-stack label input:not([type="checkbox"]):not([type="file"]), .ops-form-stack label textarea { font-weight: 400; width: 100%; }
.ops-form-stack label:has(input[type="checkbox"]) { align-items: center; display: flex; gap: var(--space-2); }
.ops-form-stack .meta { margin: calc(var(--space-2) * -1) 0 0; }
.promotion-admin-card { margin-bottom: var(--space-4); }
.promotion-admin-card header { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.promotion-admin-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }


/* P1: options & variants builder (merchant publishing and adding options to an existing product), and the visual option
   preview on the shared product card. Mobile first: combinations are stacked cards, never a wide table. */
.variant-builder-slot { flex: 1 1 100%; min-width: 0; }
.variant-builder { min-width: 0; }
.variant-builder .vb-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 0 0 var(--space-3); min-width: 0; padding: var(--space-3); }
.variant-builder legend { font: 700 var(--text-small) / 1.2 var(--font-ui); padding: 0 var(--space-1); }
.variant-builder label { display: block; font: 700 var(--text-small) / 1.3 var(--font-ui); margin: var(--space-2) 0 var(--space-1); }
.variant-builder input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { box-sizing: border-box; max-width: 100%; min-height: 2.75rem; width: 100%; }
.variant-builder .vb-radio, .variant-builder .vb-inline { align-items: center; display: inline-flex; gap: var(--space-2); min-height: 2.75rem; margin: 0 var(--space-3) 0 0; font-weight: 600; }
.variant-builder input[type="checkbox"], .variant-builder input[type="radio"] { height: 1.25rem; width: 1.25rem; }
.vb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-2) 0; padding: 0; }
.vb-chips li { align-items: center; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-pill); display: inline-flex; font: 600 var(--text-small) / 1 var(--font-ui); gap: var(--space-1); padding: 0 0 0 var(--space-3); }
.vb-chip-remove { background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 1.25rem; height: 2.75rem; line-height: 1; min-width: 2.75rem; }
.vb-add-value { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.vb-add-value label { grid-column: 1 / -1; margin-bottom: 0; }
.vb-remove-option, .vb-add-option { margin-top: var(--space-2); }
.vb-heading { font-size: 1.1rem; margin: var(--space-4) 0 var(--space-2); }
.vb-bulk { align-items: end; display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr) auto; margin-bottom: var(--space-3); }
.vb-rows { display: grid; gap: var(--space-3); }
.vb-row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.vb-row.is-skipped { opacity: .55; }
.vb-row-head { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); justify-content: space-between; }
.vb-row-label { overflow-wrap: anywhere; }
.vb-row-fields { display: grid; gap: var(--space-2) var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vb-cell-sku, .vb-cell-avail { grid-column: 1 / -1; }
.vb-photo { align-items: flex-start; display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
.vb-photo-preview { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--depth-control); flex: none; height: 3.5rem; overflow: hidden; width: 3.5rem; }
.vb-photo-preview[hidden] { display: none; }
.vb-photo-preview img { display: block; height: 100%; object-fit: cover; width: 100%; }
.vb-photo-body { display: grid; gap: var(--space-1); min-width: 0; }
.vb-photo-remove { justify-self: start; }
.vb-photo-remove[hidden] { display: none; }
.vb-photo input[type="file"] { max-width: 100%; }
.vb-summary { background: var(--color-surface-muted); border-radius: var(--radius-md); font-weight: 600; margin: var(--space-2) 0; padding: var(--space-3); }
.vb-summary.is-mismatch { background: #fdecec; color: #8a1c1c; }
.vb-errors { margin: var(--space-3) 0; }
.vb-errors[hidden], .vb-panel[hidden], .variant-builder [hidden] { display: none; }
@media (min-width: 48rem) {
  .vb-row-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vb-cell-sku { grid-column: auto; }
  .vb-cell-avail { grid-column: 1 / -1; }
}

.product-card-options-visual { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.product-card-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.product-card-swatch { align-items: center; display: inline-flex; flex-direction: column; gap: 2px; max-width: 3.25rem; }
.product-card-swatch img { aspect-ratio: 1; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); height: 2.25rem; object-fit: cover; width: 2.25rem; }
.product-card-swatch-label { font: 600 0.6875rem / 1.15 var(--font-ui); overflow-wrap: anywhere; text-align: center; }
.product-card-chip { border: 1px solid var(--color-border); border-radius: var(--radius-pill); font: 600 0.75rem / 1 var(--font-ui); padding: 0.25rem 0.5rem; }
.product-card-from { color: var(--color-text-muted); font: 600 0.75rem / 1 var(--font-ui); text-transform: uppercase; }

/* P1 depth on the existing variant surfaces: modest, static, no animation beyond the shared transition. */
.product-card-swatch img { box-shadow: var(--depth-control); }
.product-card-chip { background: var(--color-surface); box-shadow: var(--depth-control); }
.vb-row, .vb-summary { box-shadow: var(--depth-panel); }
.vb-row:focus-within { border-color: var(--color-brand); }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-swatch img { box-shadow: var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .variant-chip { transition: none; }
}

/* Public promotional bubble (social sharing & promotions V1): a small,
   dismissible, non-blocking surface for a live promotion or published
   announcement on pages that have no promotion content of their own. Sits
   clear of the cart drawer/backdrop (z-index 41) and bottom-sheet-style
   checkout controls. */
.promo-bubble {
  background: var(--color-surface);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  bottom: var(--space-4);
  box-shadow: var(--shadow-md);
  left: var(--space-4);
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-4);
  position: fixed;
  z-index: 35;
}
.promo-bubble-close {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  float: right;
  font-size: 1.25rem;
  line-height: 1;
  margin: -0.5rem -0.5rem 0 var(--space-2);
  min-height: 2rem;
  min-width: 2rem;
  padding: 0 var(--space-1);
}
.promo-bubble-eyebrow {
  color: var(--color-brand);
  font: 700 0.6875rem var(--font-ui);
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}
.promo-bubble-title { font: 700 0.9375rem var(--font-ui); margin: 0.25rem 0 0; overflow-wrap: anywhere; }
.promo-bubble-body { color: var(--color-text-muted); font-size: var(--text-small); margin: 0.25rem 0 0; overflow-wrap: anywhere; }
.promo-bubble-link { display: inline-block; font: 700 0.8125rem var(--font-ui); margin-top: var(--space-2); }
@media (max-width: 520px) {
  .promo-bubble { bottom: var(--space-3); left: var(--space-3); right: var(--space-3); max-width: none; }
}