/* Tienda Línea — shared foundations and components. */
:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --color-primary: #16324F;
  --color-primary-hover: #12283F;
  --color-on-primary: #FFFFFF;
  --color-accent: #0F8B8D;
  --color-accent-soft: #D9F1F0;
  --color-accent-text: #086667;
  --color-bg: #F6F8FA;
  --color-surface: #FFFFFF;
  --color-text: #15202B;
  --color-text-muted: #5B6875;
  --color-border: #D9E1E7;
  --color-success: #1F9D55;
  --color-success-text: #17683B;
  --color-success-soft: #EAF7EF;
  --color-warning: #D97706;
  --color-warning-text: #925000;
  --color-warning-soft: #FFF4DE;
  --color-danger: #DC2626;
  --color-danger-text: #B42323;
  --color-danger-soft: #FFF0F0;
  --color-overlay: rgb(18 40 63 / 48%);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgb(22 50 79 / 4%);
  --shadow-md: 0 12px 40px rgb(22 50 79 / 12%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --motion: 160ms ease;
  --app-viewport-height: 100dvh;
}

.business-device-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
  font-weight: 700;
}

.business-device-form label[hidden] { display: none; }

.business-device-form input,
.business-device-form select,
.pos-scale-panel input,
.pos-scale-panel select {
  min-height: 46px;
  border: 1px solid var(--border, #d7e0e7);
  border-radius: 10px;
  background: #fff;
  color: var(--navy, #16324f);
  padding: 0 12px;
  font: inherit;
}

.business-device-form select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.business-device-form input:focus,
.business-device-form select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.pos-peripherals {
  display: grid;
  gap: 10px;
}

.sale-tools-column { min-width: 0; display: grid; align-content: start; gap: 18px; }

.pos-peripherals[hidden],
.pos-peripherals-panel[hidden],
.business-device-form[hidden] { display: none; }

.pos-peripherals-toggle { width: 100%; min-height: 46px; }

.pos-peripherals-panel {
  display: grid;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.pos-peripherals-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pos-peripherals-copy { margin: 0; color: var(--color-text-muted); font-size: .875rem; }

.business-device-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.business-device-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.business-device-support-copy {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  font-size: .75rem;
}

.business-device-list {
  display: grid;
  gap: 8px;
}

.business-device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border, #d7e0e7);
  border-radius: 10px;
}

.business-device-item > span { display: grid; gap: 2px; }
.business-device-item small { color: var(--muted, #65717d); }

.pos-scale-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #b8e5e3;
  border-radius: 12px;
  background: #effafa;
}

.pos-scale-panel[hidden] { display: none; }
.pos-scale-panel > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.pos-scale-panel output { font-size: 1.65rem; font-weight: 800; color: var(--navy, #16324f); }
.pos-scale-panel > div:last-child { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pos-scale-panel label { display: grid; gap: 4px; font-size: .82rem; font-weight: 700; }

.device-heading-action > button { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.device-connected-count { min-width: 20px; padding: 0 5px; border-radius: var(--radius-pill); color: var(--color-success-text); background: var(--color-success-soft); font-size: .75rem; }
.device-connected-count[hidden] { display: none; }
.device-manager-modal { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--color-overlay); backdrop-filter: blur(4px); }
.device-manager-modal[hidden] { display: none; }
.device-manager-card { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(700px, 100%); max-height: calc(100dvh - 48px); overflow: hidden; box-shadow: var(--shadow-md); }
.device-manager-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); }
.device-manager-header h2 { margin: 2px 0 0; color: var(--color-primary); font-size: 1.35rem; }
.device-manager-header p { margin: 4px 0 0; color: var(--color-text-muted); font-size: .8125rem; }
.device-manager-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px; }
.device-local-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.device-local-tools button { min-height: 40px; padding: 8px 12px; font-size: .8125rem; }
.device-manager-help { margin: 12px 0 20px; color: var(--color-text-muted); font-size: .8125rem; }
.device-saved-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.device-saved-heading h3 { margin: 0 0 4px; color: var(--color-primary); font-size: 1rem; }
.device-saved-heading > div:last-child { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.device-saved-heading .pos-peripherals-copy { max-width: 40ch; font-size: .75rem; }
.device-manager-card .business-device-item { align-items: flex-start; padding: 14px; }
.device-item-copy { min-width: 0; flex: 1; }
.device-item-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.device-item-copy strong { color: var(--color-primary); font-size: .875rem; overflow-wrap: anywhere; }
.device-item-copy small { display: block; margin-top: 4px; font-size: .75rem; }
.device-item-copy p { margin: 6px 0 0; color: var(--color-text-muted); font-size: .75rem; }
.device-state { display: inline-flex; width: fit-content; padding: 3px 8px; border-radius: var(--radius-pill); color: var(--color-text-muted); background: var(--color-bg); font-size: .6875rem; font-weight: 600; }
.device-state[data-state="ready"] { color: var(--color-success-text); background: var(--color-success-soft); }
.device-state[data-state="connecting"], .device-state[data-state="no_response"] { color: var(--color-warning-text); background: var(--color-warning-soft); }
.device-state[data-state="incompatible"] { color: var(--color-danger-text); background: var(--color-danger-soft); }
.device-item-actions { display: grid; justify-items: end; align-content: start; gap: 8px; flex: 0 0 auto; }
.device-item-actions button { min-height: 34px; padding: 6px 10px; font-size: .75rem; }
.device-item-actions .device-remove { color: var(--color-text-muted); }
.device-manager-body .form-message { margin-top: 14px; }
.device-reader-test { display: grid; gap: 10px; margin: 0 0 20px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.device-reader-test[hidden] { display: none; }
.device-reader-test label { display: grid; gap: 6px; font-size: .8125rem; }
.device-reader-test p { margin: 0; color: var(--color-text-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.device-reader-test > button { justify-self: start; }
.business-device-form > h3, .device-setup-type, .business-device-form > .device-local-tools, .business-device-form > .device-reader-test, .device-advanced { grid-column: 1 / -1; }
.business-device-form > h3 { margin: 0; font-size: 1rem; }
.business-device-form { margin-bottom: 16px; }
.device-advanced { color: var(--color-text-muted); font-size: .8125rem; }
.device-advanced[hidden] { display: none; }
.device-advanced summary { cursor: pointer; }
.device-advanced p { margin: 8px 0; }
.device-advanced select { width: 100%; }
.device-test-only .device-setup-type, .device-test-only .device-setup-name, .device-test-only .device-setup-location, .device-test-only .device-advanced { display: none; }
.device-print-test { display: none; }
#pos-scale-device-label { max-width: 100%; }
#pos-scale-panel > div:first-child { flex-wrap: wrap; }
#pos-scale-panel > div:first-child strong { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .business-device-form,
  .pos-scale-panel > div:last-child { grid-template-columns: 1fr; }
  .pos-peripherals-heading { align-items: stretch; flex-direction: column; }
  .business-device-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .product-sale-unit-field { grid-column: auto; }
  .device-manager-modal { padding: 10px; }
  .device-manager-card { max-height: calc(100dvh - 20px); }
  .device-manager-header { padding: 16px; }
  .device-manager-body { padding: 16px; }
  .device-saved-heading { align-items: flex-start; flex-wrap: wrap; }
  .device-saved-heading > div:last-child { margin-left: auto; }
  .device-manager-card .business-device-item { flex-direction: column; gap: 10px; }
  .device-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; }
  .device-heading-action { grid-column: 2 / -1; }
  .device-heading-action > button { min-height: 40px; }
}
* { box-sizing: border-box; }
html { background: var(--color-bg); }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-size: 1rem; line-height: 1.5; }
.offline-banner { position: fixed; z-index: 3000; inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px; width: fit-content; max-width: calc(100% - 24px); margin-inline: auto; padding: 10px 14px; border-radius: var(--radius-pill); color: var(--color-warning-text); background: var(--color-warning-soft); box-shadow: var(--shadow-md); font-size: .8125rem; font-weight: 600; text-align: center; }
.pwa-launch-splash { display: none; }
.pwa-launching body { background: #F6F8FA; }
.pwa-launching body > :not(.pwa-launch-splash) { visibility: hidden !important; }
.pwa-launching .pwa-launch-splash { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); background: #F6F8FA; }
.pwa-launch-mark { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.pwa-launch-mark::before { position: absolute; content: ""; inset: 0; border: 4px solid #D9F1F0; border-top-color: var(--color-accent); border-right-color: var(--color-primary); border-radius: 50%; animation: pwa-launch-ring 900ms linear infinite; }
.pwa-launch-mark img { width: 72px; height: 72px; padding: 10px; border-radius: 18px; background: var(--color-surface); object-fit: contain; box-shadow: 0 10px 30px rgb(22 50 79 / 12%); animation: pwa-launch-pulse 850ms ease-in-out infinite alternate; }
@keyframes pwa-launch-ring { to { transform: rotate(360deg); } }
@keyframes pwa-launch-pulse { from { transform: scale(.97); } to { transform: scale(1.035); } }
.offline-page-body { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.offline-page { width: min(480px, 100%); padding: 32px; text-align: center; }
.offline-page img { margin-bottom: 14px; }
.offline-page p { margin-bottom: 22px; }
.pwa-install-button { white-space: nowrap; }
.auth-install-button { width: 100%; min-height: 46px; margin-top: 14px; gap: 9px; color: var(--color-primary); background: var(--color-surface); }
.auth-install-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-install-open { overflow: hidden; }
.pwa-install-overlay { position: fixed; z-index: 3200; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: var(--color-overlay); }
.pwa-install-dialog { width: min(460px, 100%); max-height: min(82dvh, 620px); overflow-y: auto; display: grid; gap: 14px; padding: 20px 20px max(20px, env(safe-area-inset-bottom)); border: 1px solid var(--color-border); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--color-surface); box-shadow: 0 -12px 40px rgb(22 50 79 / 18%); }
.pwa-install-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) 36px; align-items: center; gap: 12px; }
.pwa-install-dialog-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-accent-text); }
.pwa-install-dialog-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pwa-install-dialog .eyebrow { margin-bottom: 2px; font-size: .68rem; }
.pwa-install-dialog h2 { margin: 0; font-size: 1.2rem; }
.pwa-install-dismiss { width: 36px; height: 36px; min-height: 36px; padding: 0; border-color: transparent; background: transparent; color: var(--color-text-muted); font-size: 1.45rem; line-height: 1; }
.pwa-install-dialog > p { margin: 0; font-size: .875rem; }
.pwa-install-dialog > ol { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; counter-reset: pwa-install-step; color: var(--color-text); font-size: .875rem; }
.pwa-install-dialog > ol > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; counter-increment: pwa-install-step; }
.pwa-install-dialog > ol > li::before { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-bg); color: var(--color-primary); font-size: .75rem; font-weight: 750; content: counter(pwa-install-step); }
.pwa-install-security { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-bg); font-size: .75rem !important; }
.pwa-install-dialog > button { width: 100%; }
@media (min-width: 620px) {
  .pwa-install-overlay { align-items: center; padding: 24px; }
  .pwa-install-dialog { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-lg); padding-bottom: 20px; box-shadow: var(--shadow-md); }
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--color-primary); line-height: 1.25; overflow-wrap: anywhere; }
h1 { font-size: 2rem; letter-spacing: -.04em; }
h2 { font-size: 1.25rem; letter-spacing: -.025em; }
h3 { font-size: 1rem; letter-spacing: -.01em; }
p { color: var(--color-text-muted); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, .btn-primary-link, .view-product-link, .product-cart-link, .product-whatsapp,
.tracking-whatsapp, .scanner-result-actions a, .confirmation-actions a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 9px 14px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary);
  font-size: .875rem; font-weight: 600; line-height: 1.3; text-align: center;
  transition: background-color var(--motion), border-color var(--motion), box-shadow var(--motion);
}

button:hover, .view-product-link:hover, .product-cart-link:hover { background: var(--color-bg); border-color: #AABBC8; }
button:active { background: var(--color-accent-soft); }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
button:disabled:hover { box-shadow: none; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
input, select, textarea {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font-size: 1rem;
  transition: border-color var(--motion), box-shadow var(--motion);
}
input:hover, select:hover, textarea:hover { border-color: #AABBC8; }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgb(15 139 141 / 12%); }
input::placeholder, textarea::placeholder { color: #77838E; }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; accent-color: var(--color-primary); flex: 0 0 auto; }
textarea { resize: vertical; }
label { display: grid; gap: 6px; color: var(--color-text); font-size: .875rem; font-weight: 600; min-width: 0; }
img { max-width: 100%; }
svg { flex: 0 0 auto; }

/* iOS amplía automáticamente los controles de texto menores a 16 px. */
@supports (-webkit-touch-callout: none) {
  @media (any-pointer: coarse) {
    html, body { -webkit-text-size-adjust: 100%; }
    input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]),
    select,
    textarea,
    [contenteditable="true"] { font-size: 16px !important; }
  }
}

button > svg, .tab-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary, .btn-primary-link, .add-cart-button, .checkout-toggle, .checkout-submit,
.auth-submit, .product-add-cart, .tracking-form > button {
  color: var(--color-on-primary); border-color: var(--color-primary); background: var(--color-primary);
}
.btn-primary:hover, .btn-primary-link:hover, .add-cart-button:hover, .checkout-toggle:hover,
.checkout-submit:hover, .auth-submit:hover, .product-add-cart:hover, .tracking-form > button:hover {
  color: var(--color-on-primary); border-color: var(--color-primary-hover); background: var(--color-primary-hover);
}
.btn-secondary, .secondary-button, .product-buy-now { color: var(--color-primary); background: var(--color-surface); }
.delete-button, .remove-cart-item { color: var(--color-danger-text); border-color: transparent; background: var(--color-danger-soft); }
.delete-button:hover, .remove-cart-item:hover { color: var(--color-danger-text); border-color: #F4BBBB; background: var(--color-danger-soft); }
.icon-button { width: 40px; height: 40px; padding: 0; flex: 0 0 auto; font-size: 1rem; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); min-width: 0; }
.panel { padding: var(--space-5); }
.eyebrow { display: block; margin-bottom: 7px; color: var(--color-accent-text); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-primary); color: white; font-size: .875rem; font-weight: 800; letter-spacing: -.04em; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-title h2 { margin: 0; font-size: 1rem; }
.section-title > span:not([role="status"]), #product-count, #product-cart-count, #cart-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 25px;
  padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-accent-soft);
  color: var(--color-accent-text); font-size: .75rem; font-weight: 700; letter-spacing: 0;
}
.badge, .stock, .category-pill, .delivery-badge, .tracking-status {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%;
  padding: 4px 8px; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 600;
  line-height: 1.4; overflow-wrap: anywhere;
}
.badge-muted, .category-pill, .delivery-badge { color: var(--color-text-muted); background: var(--color-bg); }
.badge-success, .stock.available, .order-status-delivered { color: var(--color-success-text); background: var(--color-success-soft); }
.badge-accent, .order-status-paid, .order-status-sent, .tracking-status { color: var(--color-accent-text); background: var(--color-accent-soft); }
.badge-warning, .stock.low-stock, .order-status-pending { color: var(--color-warning-text); background: var(--color-warning-soft); }
.stock.soldout, .order-status-cancelled { color: var(--color-danger-text); background: var(--color-danger-soft); }
.form-message, .products-message, .product-action-message { margin: var(--space-3) 0 0; color: var(--color-success-text); font-size: .875rem; overflow-wrap: anywhere; }
.form-message:empty, .products-message:empty, .product-action-message:empty, .catalog-status:empty { display: none; }
.error { color: var(--color-danger-text); }
.empty-state, .admin-empty-state, .product-page-state { padding: var(--space-7) var(--space-5); text-align: center; color: var(--color-text-muted); }
.admin-empty-state, .catalog-empty-state, .product-not-found { display: grid; justify-items: center; gap: var(--space-2); }
.empty-state strong, .admin-empty-state strong { color: var(--color-primary); font-size: 1rem; }
.empty-state p, .admin-empty-state p { margin: 0; font-size: .875rem; }
.empty-icon { display: block; width: 36px; height: 36px; margin-bottom: var(--space-2); border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.wide { grid-column: 1 / -1; }
.modal-open, .receipt-open { overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 12px 18px; background: var(--color-primary); color: white; border-radius: var(--radius-sm); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* Administration: compact navigation and operational lists. */
.admin-layout { min-height: 100dvh; padding: var(--space-6) var(--space-6) var(--space-7) 248px; }
.admin-header { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 216px; display: flex; flex-direction: column; padding: var(--space-5) var(--space-4); border-right: 1px solid var(--color-primary-hover); background: var(--color-primary); color: var(--color-surface); }
.admin-menu .pwa-install-button { margin-top: var(--space-5); color: var(--color-surface); border-color: rgb(255 255 255 / 24%); }
.admin-heading { display: flex; align-items: center; gap: var(--space-3); }
.admin-heading .brand-mark { background: var(--color-accent); color: var(--color-surface); }
.admin-brand-icon { width: 38px; height: 38px; flex: 0 0 auto; padding: 5px; border-radius: var(--radius-md); background: var(--color-surface); object-fit: contain; }
.admin-heading h1 { margin: 0 0 2px; color: var(--color-surface); font-size: 1rem; letter-spacing: -.03em; }
.admin-heading > div > span { color: rgb(255 255 255 / 68%); font-size: .75rem; }
.admin-navigation { margin-top: var(--space-7); }
.admin-menu { display: grid; gap: 6px; }
.navigation-label { margin: 0 12px 8px; color: rgb(255 255 255 / 58%); font-size: .75rem; font-weight: 600; }
.admin-menu .tab-button { position: relative; width: 100%; min-height: 46px; justify-content: flex-start; gap: 12px; padding-inline: 12px; border-color: transparent; color: rgb(255 255 255 / 76%); background: transparent; }
.admin-menu .tab-button:hover { color: var(--color-surface); background: rgb(255 255 255 / 9%); }
.admin-menu .tab-button.active { color: var(--color-surface); background: var(--color-accent); }
.admin-menu .tab-button.active::before { position: absolute; top: 11px; bottom: 11px; left: -1px; width: 3px; border-radius: var(--radius-pill); background: var(--color-surface); content: ""; }
.admin-menu .logout-tab-button { margin-top: var(--space-5); color: #FFD6D6; }
.admin-menu .logout-tab-button:hover { color: var(--color-surface); background: rgb(220 38 38 / 20%); }
.admin-header-copy { margin: auto 12px 0; padding-top: var(--space-5); color: rgb(255 255 255 / 58%); font-size: .75rem; }
.admin-subscription-summary { width: auto; margin: auto 12px 0; padding: 16px 2px 0; display: grid; justify-items: start; gap: 2px; border: 0; border-top: 1px solid rgb(255 255 255 / 16%); border-radius: 0; color: var(--color-surface); background: transparent; text-align: left; }
.admin-subscription-summary:hover { border-color: rgb(255 255 255 / 28%); color: var(--color-surface); background: transparent; }
.admin-subscription-summary > span { color: rgb(255 255 255 / 58%); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.admin-subscription-summary > strong { font-size: .9rem; line-height: 1.25; }
.admin-subscription-summary > small { color: #73E0DB; font-size: .68rem; font-weight: 650; }
.admin-subscription-summary[data-subscription-status="past_due"] > small,
.admin-subscription-summary[data-subscription-status="cancelled"] > small,
.admin-subscription-summary[data-subscription-status="unconfirmed"] > small,
.admin-subscription-summary[data-subscription-status="ending"] > small,
.admin-subscription-summary[data-subscription-status="trial_expired"] > small,
.admin-subscription-summary[data-subscription-status="plan_inactive"] > small { color: #FFD28A; }
.admin-subscription-summary-mobile { display: none; }
.admin-menu-button { display: none; width: 44px; height: 44px; padding: 10px; gap: 5px; place-content: center; }
.admin-header .admin-menu-button { border-color: rgb(255 255 255 / 28%); background: transparent; color: var(--color-surface); }
.admin-header .admin-menu-button:hover { border-color: rgb(255 255 255 / 48%); background: rgb(255 255 255 / 9%); }
.admin-menu-button span { display: block; width: 20px; height: 2px; border-radius: var(--radius-pill); background: currentColor; transition: transform var(--motion), opacity var(--motion); }
.admin-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.admin-menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.admin-view { width: 100%; max-width: 1600px; margin-inline: auto; min-width: 0; display: grid; gap: 14px; }
.admin-view:focus { outline: none; }
.view-heading { padding-inline: 4px; }
.products-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.products-toolbar h2, .view-heading h2 { margin: 0; font-size: clamp(1.65rem, 2.5vw, 2rem); }
.products-toolbar p, .view-heading p { margin: 8px 0 0; font-size: .875rem; }
.products-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.products-toolbar .products-message { flex-basis: 100%; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.kpi-card { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; padding: 14px 18px; box-shadow: none; }
.kpi-card span { color: var(--color-text-muted); font-size: .8125rem; }
.kpi-card strong { color: var(--color-primary); font-size: 1.4rem; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.products-list-panel, .orders-panel { padding: 0; overflow: visible; }
.products-list-panel > .section-title, .orders-panel > .section-title { margin: 0; padding: 14px 20px; }
.admin-catalog-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 20px; }
.admin-products-search-label { display: block; }
.admin-products-search-input { position: relative; }
.admin-products-search-input svg { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; color: var(--color-text-muted); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; }
.admin-products-search-input input { min-height: 46px; padding-left: 40px; font-size: .875rem; }
.admin-catalog-controls .catalog-filter-toggle { min-width: 180px; }
.admin-filter-empty { padding: 28px 20px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .875rem; text-align: center; }
.admin-table-head, .admin-item { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(84px, .38fr) 112px 82px 180px; gap: var(--space-4); align-items: center; padding: 14px 20px; }
.admin-table-head, .orders-table-head { color: var(--color-text-muted); background: var(--color-bg); border-block: 1px solid var(--color-border); font-size: .75rem; font-weight: 600; }
.admin-item + .admin-item, .order-item + .order-item { border-top: 1px solid var(--color-border); }
.admin-item:hover, .order-item:hover { background: #FAFCFD; }
.admin-product-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.admin-product-identity > img, .admin-thumb, .sale-item > img { width: 52px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-bg); }
.admin-thumb { display: grid; place-items: center; color: var(--color-text-muted); font-size: .7rem; }
.admin-product-info { min-width: 0; }
.admin-product-info h3, .order-heading h3, .sale-item h3 { margin: 0 0 5px; font-size: .875rem; font-weight: 650; }
.admin-product-info p, .order-heading p, .sale-item p { margin: 0; color: var(--color-text-muted); font-size: .75rem; overflow-wrap: anywhere; }
.admin-product-price, .order-total { color: var(--color-primary); font-size: .875rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.admin-actions button { min-height: 32px; gap: 5px; padding: 6px; font-size: .75rem; }
.admin-actions svg, .admin-action-label-compact { display: none; }
.edit-button { background: var(--color-surface); }
.admin-actions .edit-button { border-color: transparent; }
.admin-actions [data-action="qr"] { grid-column: 1 / -1; border-color: #B9DDDC; background: var(--color-accent-soft); color: var(--color-accent-text); }
.admin-actions [data-action="qr"]:hover { border-color: var(--color-accent); background: #CEECEB; }
.orders-table-head, .order-item { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.15fr) minmax(140px, 1.4fr) minmax(84px, .65fr) 92px; align-items: center; gap: var(--space-4); padding: 14px 20px; }
.order-customer { display: grid; gap: 4px; min-width: 0; font-size: .8125rem; overflow-wrap: anywhere; }
.order-customer > span:first-child { font-weight: 600; }
.order-customer > span:nth-child(2) { color: var(--color-text-muted); }
.order-status { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.order-actions button { width: 100%; padding-inline: 9px; font-size: .8125rem; }
.order-item > *, .admin-item > * { min-width: 0; }
.sale-view { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr); align-items: start; }
.sale-view > .view-heading { grid-column: 1 / -1; }
.sale-scan-panel, .sale-cart-panel { padding: 20px; }
.sale-scan-panel > .section-title, .sale-cart-panel > .section-title { margin-bottom: var(--space-4); }
.sale-scan-panel { border-top: 3px solid var(--color-accent); }
.sale-product-picker { position: relative; display: grid; gap: 6px; margin-top: 0; }
.sale-product-picker > label { font-size: .8125rem; }
.sale-product-picker > input { font-size: .875rem; }
.sale-product-results { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: 100%; max-height: 310px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); }
.sale-product-results > button { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; min-height: 62px; padding: 8px 10px; border: 0; border-radius: 0; text-align: left; }
.sale-product-results > button + button { border-top: 1px solid var(--color-border); }
.sale-product-results img, .sale-product-results .admin-thumb { width: 42px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-bg); }
.sale-product-results button > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.sale-product-results small { color: var(--color-text-muted); font-size: .7rem; font-weight: 400; overflow-wrap: anywhere; }
.sale-product-results button > span:last-child { color: var(--color-accent-text); font-size: .75rem; }
.sale-product-results > p { margin: 0; padding: 14px; font-size: .8125rem; text-align: center; }
.sale-scan-button { width: 100%; margin-top: var(--space-3); min-height: 48px; }
.sale-cart-panel { border-top: 3px solid var(--color-primary); }
.sale-cart-panel .admin-empty-state { padding: 28px 20px; }
.sale-items { display: grid; gap: 16px; }
.sale-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--color-border); }
.sale-item > strong { max-width: 135px; font-size: .875rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.qty-controls, .quantity-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; }
.qty-controls button, .quantity-selector button { min-width: 36px; min-height: 36px; padding: 5px 10px; }
.qty-controls span, .quantity-selector output { min-width: 32px; text-align: center; font-size: .875rem; font-variant-numeric: tabular-nums; }
.qty-controls button[data-sale-action="remove"] { margin-left: 4px; border-color: transparent; color: var(--color-danger-text); background: transparent; font-size: .75rem; }
.sale-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; margin-top: 8px; border-top: 1px solid var(--color-border); }
.sale-summary strong { color: var(--color-primary); font-size: clamp(1.75rem, 3vw, 2.25rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.sale-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sale-actions button { width: 100%; min-width: 0; min-height: 48px; }
.commercial-dashboard { padding: 20px; }
.commercial-dashboard-heading { align-items: flex-start; }
.commercial-dashboard > .section-title { margin-bottom: var(--space-4); }
.commercial-dashboard-heading p { margin: 7px 0 0; font-size: .8125rem; }
.commercial-dashboard-meta { display: grid; justify-items: end; gap: 6px; }
.commercial-periods { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.commercial-periods button { min-height: 34px; padding: 6px 10px; font-size: .75rem; }
.commercial-periods button.active { color: var(--color-surface); border-color: var(--color-primary); background: var(--color-primary); }
#commercial-metrics-status { padding: 5px 8px; color: var(--color-text-muted); font-size: .75rem; text-align: right; }
#commercial-metrics-status:empty { display: none; }
.commercial-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.commercial-kpi-grid article { display: grid; align-content: start; gap: 6px; min-width: 0; }
.commercial-kpi-grid article > span { color: var(--color-text-muted); font-size: .8125rem; }
.commercial-kpi-grid article > strong { color: var(--color-primary); font-size: 1.65rem; letter-spacing: -.03em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.commercial-kpi-grid small { color: var(--color-text-muted); font-size: .75rem; }
.commercial-report-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .75fr); gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.commercial-report-card { min-width: 0; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.commercial-report-card h3 { margin: 0 0 12px; font-size: .875rem; }
.commercial-chart-card { grid-row: span 2; }
.commercial-sales-chart { display: grid; gap: 7px; max-height: 350px; overflow-y: auto; }
.commercial-chart-row { display: grid; grid-template-columns: 72px minmax(80px, 1fr) 92px; align-items: center; gap: 8px; font-size: .75rem; }
.commercial-chart-row > span { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.commercial-chart-row > strong { text-align: right; font-variant-numeric: tabular-nums; }
.commercial-chart-row progress { width: 100%; height: 12px; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface); }
.commercial-chart-row progress::-webkit-progress-bar { background: var(--color-surface); }
.commercial-chart-row progress::-webkit-progress-value { background: var(--color-accent); }
.commercial-chart-row progress::-moz-progress-bar { background: var(--color-accent); }
.commercial-ranking { display: grid; gap: 8px; color: var(--color-text-muted); font-size: .8125rem; }
.commercial-ranking-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.commercial-ranking-row > span { display: flex; min-width: 0; gap: 7px; color: var(--color-text); overflow-wrap: anywhere; }
.commercial-ranking-row b { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; color: var(--color-accent-text); background: var(--color-accent-soft); font-size: .65rem; }
.commercial-ranking-row > strong { flex: 0 0 auto; color: var(--color-primary); font-size: .75rem; font-variant-numeric: tabular-nums; }
.commercial-report-empty { margin: 0; font-size: .8125rem; }
.analytics-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 20px; }
.analytics-panel h2 { margin-bottom: 7px; font-size: 1rem; }
.analytics-panel p { margin: 0; font-size: .875rem; }
.staff-view-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.staff-view-heading > div { min-width: 0; }
.staff-panel { padding: 0; overflow: visible; }
.staff-panel > .section-title { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--color-border); }
.staff-list { display: grid; }
.staff-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 112px; align-items: center; gap: 14px; padding: 14px 20px; }
.staff-item + .staff-item { border-top: 1px solid var(--color-border); }
.staff-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--color-accent-text); background: var(--color-accent-soft); font-weight: 700; }
.staff-identity { min-width: 0; }
.staff-identity h3 { margin: 0 0 3px; font-size: .9375rem; }
.staff-identity p { margin: 0; font-size: .75rem; overflow-wrap: anywhere; }
.staff-item > button { min-width: 0; padding-inline: 10px; }
.staff-disable-button { color: var(--color-danger-text); }
.store-preferences { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: var(--space-5); padding: var(--space-5); }
.store-logo-editor { display: grid; align-content: start; justify-items: center; gap: 14px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); text-align: center; }
.store-logo-editor h2, .store-appearance-fields h2 { margin: 0; font-size: 1rem; }
.store-logo-editor p, .store-appearance-fields p { margin: 5px 0 0; font-size: .8125rem; }
.store-logo-editor img { width: 96px; height: 96px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); object-fit: contain; }
.store-logo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.store-logo-actions label { display: inline-flex; cursor: pointer; }
.store-appearance-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px; }
.store-appearance-fields > .section-title { grid-column: 1 / -1; margin: 0 0 2px; }
.store-appearance-fields input[type="color"] { min-height: 48px; padding: 5px; }
.store-preferences-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.store-preferences-actions .form-message { flex-basis: 100%; margin: 0; text-align: right; }

/* Product editor and shared overlays. Modal IDs and state contracts stay intact. */
.product-drawer, .scanner-modal, .qr-modal, .order-detail-modal, .catalog-import-modal, .pos-sync-modal, .inventory-movements-modal, .subscription-modal,
.tracking-modal, .order-confirmation {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  overflow-y: auto; padding: 24px; background: var(--color-overlay); backdrop-filter: blur(3px);
}
.product-drawer { z-index: 180; place-items: center; padding: 20px; }
.scanner-modal { z-index: 240; }
.qr-modal { z-index: 230; }
.catalog-import-modal { z-index: 220; }
.pos-sync-modal { z-index: 225; }
.subscription-modal { z-index: 226; }
.product-drawer-card { width: min(1120px, 100%); height: auto; max-height: calc(var(--app-viewport-height, 100dvh) - 40px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: product-modal-in 180ms ease-out; }
.staff-drawer-card { width: min(560px, 100%); max-height: calc(var(--app-viewport-height, 100dvh) - 40px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: product-modal-in 180ms ease-out; }
.staff-form { min-height: 0; display: grid; gap: 14px; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.staff-form label small { color: var(--color-text-muted); font-size: .7rem; font-weight: 400; }
.staff-permissions-note { margin: 0; padding: 12px; border-radius: var(--radius-sm); color: var(--color-accent-text); background: var(--color-accent-soft); font-size: .8125rem; }
.staff-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product-drawer-header, .scanner-header, .order-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--color-border); }
.product-drawer-header { padding: 18px 20px; }
.scanner-header, .order-detail-header { padding: var(--space-5); }
.product-drawer-header h2, .scanner-header h2, .order-detail-header h2 { margin: 0; font-size: 1.3rem; }
.product-drawer-header p, .scanner-header p { margin: 4px 0 0; font-size: .8125rem; }
.product-drawer-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.product-drawer-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; color: var(--color-primary); background: var(--color-accent-soft); }
.product-drawer-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.product-drawer-body { min-height: 0; overflow-y: auto; padding: 18px 20px; overscroll-behavior: contain; }
.product-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "name name name name" "price price stock minimum" "status status status status" "note note note note" "category category type unit" "barcode barcode barcode barcode" "images images images images" "description description description description"; gap: 12px 16px; }
.product-form.is-digital-product { grid-template-areas: "name name name name" "price price price price" "category category type type" "digital digital digital digital" "images images images images" "description description description description"; }
/* Hidden inventory controls must not leave empty desktop rows and extra gaps. */
@media (min-width: 621px) {
  .product-form:not(.is-digital-product):has(> #product-stock-status[hidden]) {
    grid-template-areas: "name name name name" "price price stock minimum" "note note note note" "category category type unit" "barcode barcode barcode barcode" "images images images images" "description description description description";
  }
  .product-form:not(.is-digital-product):has(> #product-inventory-note-field[hidden]) {
    grid-template-areas: "name name name name" "price price stock minimum" "status status status status" "category category type unit" "barcode barcode barcode barcode" "images images images images" "description description description description";
  }
  .product-form:not(.is-digital-product):has(> #product-stock-status[hidden]):has(> #product-inventory-note-field[hidden]) {
    grid-template-areas: "name name name name" "price price stock minimum" "category category type unit" "barcode barcode barcode barcode" "images images images images" "description description description description";
  }
}
.product-form .product-name-field { grid-area: name; }
.product-form .product-price-field { grid-area: price; }
.product-form .product-stock-field { grid-area: stock; }
.product-form .product-minimum-stock-field { grid-area: minimum; }
.product-form .product-inventory-note-field { grid-area: note; }
.product-stock-status { grid-area: status; width: fit-content; margin: -4px 0 0; padding: 5px 9px; border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text-muted); font-size: .75rem; font-weight: 700; }
.product-stock-status.low-stock { color: var(--color-warning-text); background: var(--color-warning-soft); }
.product-stock-status.out-of-stock { color: var(--color-danger-text); background: var(--color-danger-soft); }
.product-form .product-category-field { grid-area: category; }
.product-form .product-type-field { grid-area: type; }
.product-form .product-sale-unit-field { grid-area: unit; }
.product-form .product-barcode-field { grid-area: barcode; }
.product-form #digital-file-field { grid-area: digital; }
.product-form #image-manager { grid-area: images; }
.product-form .product-description-field { grid-area: description; }
.product-form > label { gap: 4px; }
.product-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.product-form-actions .form-message { flex-basis: 100%; margin: 0; }
.field-input-shell { position: relative; display: block; min-width: 0; }
.field-input-shell > svg { position: absolute; z-index: 1; left: 12px; top: 50%; width: 20px; height: 20px; fill: none; stroke: #718091; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; }
.field-input-shell > input, .field-input-shell > select, .field-input-shell > textarea { padding-left: 42px; }
.field-textarea-shell > svg { top: 13px; transform: none; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-label-row output { color: var(--color-text-muted); font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.barcode-input-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.barcode-input-shell button { min-height: 44px; padding-inline: 12px; font-size: .75rem; white-space: nowrap; }
.image-manager { min-width: 0; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.image-manager-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.image-manager-heading > div { display: grid; gap: 2px; min-width: 0; }
.image-manager-heading strong { color: var(--color-primary); font-size: .875rem; }
.image-manager-heading small, .image-dropzone small { color: var(--color-text-muted); font-size: .75rem; font-weight: 400; }
.image-manager-heading > span { color: var(--color-text-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.image-manager-content { display: grid; grid-template-columns: 1fr; gap: 12px; }
.image-manager.has-images .image-manager-content { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); }
.image-dropzone { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 108px; padding: 14px; border: 1px dashed #B8C8D5; border-radius: var(--radius-md); background: var(--color-bg); cursor: pointer; }
.image-dropzone > svg { width: 34px; height: 34px; padding: 6px; border-radius: var(--radius-sm); color: var(--color-primary); background: var(--color-surface); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.image-dropzone > span:not(.file-picker-button) { display: grid; gap: 2px; min-width: 0; }
.image-dropzone strong { color: var(--color-primary); font-size: .8125rem; }
.image-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
.image-dropzone:focus-within, .image-dropzone.is-dragging { border-color: var(--color-accent); background: var(--color-accent-soft); outline: 3px solid rgb(15 139 141 / 12%); }
.file-picker-button { display: inline-flex; justify-content: center; min-height: 40px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
.digital-upload-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-accent-soft); }
.digital-upload-progress[hidden] { display: none; }
.digital-upload-progress > div { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; color: var(--color-accent-text); font-size: .75rem; }
.digital-upload-progress progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: var(--color-surface); }
.digital-upload-progress progress::-webkit-progress-bar { background: var(--color-surface); }
.digital-upload-progress progress::-webkit-progress-value { background: var(--color-accent); }
.digital-upload-progress progress::-moz-progress-bar { background: var(--color-accent); }
.digital-upload-progress button { min-height: 36px; padding: 6px 10px; font-size: .75rem; }
.image-preview { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; min-width: 0; color: var(--color-text-muted); font-size: .75rem; }
.image-preview-list { display: contents; }
.image-preview-item { position: relative; width: 92px; height: 92px; margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.image-preview-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-preview-remove { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; min-height: 28px; padding: 0; border-color: rgb(255 255 255 / 70%); border-radius: 50%; color: var(--color-surface); background: rgb(18 40 63 / 78%); }
.image-add-more { width: 92px; min-height: 92px; flex-direction: column; gap: 3px; padding: 8px; border-style: dashed; font-size: .6875rem; }
.image-add-more > span { font-size: 1.5rem; font-weight: 400; line-height: 1; }
.barcode-result { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px; border-radius: var(--radius-sm); color: var(--color-accent-text); background: var(--color-accent-soft); font-size: .8125rem; overflow-wrap: anywhere; }
@keyframes product-modal-in { from { transform: translateY(10px) scale(.99); opacity: .7; } to { transform: none; opacity: 1; } }
.scanner-card, .qr-card, .order-detail-card { width: min(680px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-md); }
.scanner-frame { position: relative; margin: 20px 24px 12px; height: min(34dvh, 260px); min-height: 130px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-primary-hover); }
.scanner-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scanner-line { position: absolute; top: 50%; left: 10%; right: 10%; height: 2px; background: var(--color-accent); box-shadow: 0 0 0 1px rgb(255 255 255 / 30%); pointer-events: none; }
.scanner-status { margin: 12px 24px; color: var(--color-text-muted); font-size: .875rem; overflow-wrap: anywhere; }
.manual-scan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 16px 24px 24px; }
.scanner-product-result { margin: 16px 24px; padding: 16px; border-radius: var(--radius-md); background: var(--color-accent-soft); overflow-wrap: anywhere; }
.scanner-product-result > div:first-child { display: grid; gap: 5px; }
.scanner-product-result span, .scanner-product-result small { font-size: .8125rem; color: var(--color-accent-text); }
.scanner-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.qr-content { display: grid; justify-items: center; gap: 16px; padding: 24px; }
.qr-content img { width: min(260px, 60vw); height: auto; }
.qr-content code { max-width: 100%; padding: 10px; background: var(--color-bg); border-radius: var(--radius-sm); font-size: .75rem; overflow-wrap: anywhere; }
.qr-card > .form-message { margin-inline: 24px; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 24px 24px; }
.qr-print-label { display: none; }
#order-detail-content { padding: var(--space-5); overflow-wrap: anywhere; }
.order-detail-summary, .confirmation-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px; border-radius: var(--radius-md); background: var(--color-bg); }
.order-detail-summary > div, .confirmation-meta > div { display: grid; gap: 5px; min-width: 0; }
.order-detail-summary span, .confirmation-meta span { color: var(--color-text-muted); font-size: .75rem; }
.order-detail-summary strong, .confirmation-meta strong { font-size: .875rem; }
.order-detail-section { margin-top: var(--space-5); }
.order-detail-section h3 { margin-bottom: 10px; }
.order-detail-section p { font-size: .875rem; }
.order-receipt-button { width: calc(100% - 48px); margin: 0 24px 20px; }
.order-detail-items, .order-detail-totals { display: grid; gap: 12px; font-size: .875rem; }
.order-detail-items > div, .order-detail-totals > div { display: flex; justify-content: space-between; gap: 16px; }
.order-detail-items strong, .order-detail-totals strong { flex: 0 0 auto; text-align: right; }
.order-detail-totals { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.order-detail-totals > div:last-child { font-size: 1.1rem; color: var(--color-primary); font-weight: 700; }
.order-status-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 20px 24px; border-top: 1px solid var(--color-border); background: var(--color-bg); }
.order-status-form .form-message { grid-column: 1 / -1; }

.catalog-import-card { width: min(980px, 100%); max-height: calc(100dvh - 48px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.catalog-import-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px; border-bottom: 1px solid var(--color-border); }
.catalog-import-header h2 { margin: 0; color: var(--color-primary); font-size: 1.5rem; }
.catalog-import-header p { margin: 8px 0 0; color: var(--color-text-muted); font-size: .875rem; }
.catalog-import-header .icon-button { flex: 0 0 auto; }
.catalog-import-body { min-height: 0; overflow-y: auto; padding: 24px 28px; overscroll-behavior: contain; }
.catalog-import-upload { display: grid; gap: 20px; }
.catalog-file-picker { position: relative; width: 100%; display: grid; justify-items: center; align-content: center; gap: 16px; min-height: 226px; padding: 24px; border: 2px dashed #B8C8D5; border-radius: var(--radius-md); background: var(--color-bg); text-align: center; cursor: pointer; }
.catalog-file-picker > svg { width: 52px; height: 52px; padding: 12px; border-radius: var(--radius-lg); color: var(--color-accent); background: var(--color-accent-soft); }
.catalog-file-picker > span:not(.file-picker-button) { display: grid; gap: 8px; min-width: 0; }
.catalog-file-picker strong { color: var(--color-primary); font-size: 1.0625rem; }
.catalog-file-picker small { color: var(--color-text-muted); font-size: .875rem; font-weight: 400; }
.catalog-file-picker .file-picker-button { min-width: 160px; min-height: 44px; padding: 10px 20px; font-size: .875rem; font-weight: 600; }
.catalog-file-picker:hover, .catalog-file-picker:focus-within { border-color: var(--color-accent); }
.catalog-file-picker:focus-within { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.catalog-file-picker input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
.catalog-selected-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.catalog-selected-file[hidden], .catalog-import-requirements[hidden] { display: none; }
.catalog-selected-file-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); color: var(--color-success-text); background: var(--color-success-soft); }
.catalog-selected-file-copy { display: grid; gap: 5px; min-width: 0; }
.catalog-file-name { margin: 0; color: var(--color-primary); font-size: .875rem; overflow-wrap: anywhere; }
.catalog-selected-file-copy > span { color: var(--color-text-muted); font-size: .8125rem; }
.catalog-file-status { display: flex; color: var(--color-success); }
.catalog-file-invalid, .catalog-selected-file[data-state="invalid"] .catalog-file-check { display: none; }
.catalog-selected-file[data-state="invalid"] .catalog-file-invalid { display: block; }
.catalog-selected-file[data-state="invalid"] .catalog-file-status { color: var(--color-danger); }
.catalog-selected-file[data-state="invalid"] .catalog-selected-file-icon { color: var(--color-danger-text); background: var(--color-danger-soft); }
.catalog-import-resources { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.catalog-import-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .8125rem; }
.catalog-import-templates span { color: var(--color-text-muted); }
.catalog-import-templates a, .catalog-requirements-toggle { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.catalog-requirements-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 0; border: 0; background: transparent; box-shadow: none; font-size: .8125rem; }
.catalog-requirements-toggle svg { color: var(--color-text-muted); }
.catalog-requirements-toggle[aria-expanded="true"] { color: var(--color-primary); }
.catalog-import-requirements { padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text-muted); font-size: .8125rem; }
.catalog-import-requirements ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.catalog-import-upload-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 4px; margin-top: 20px; }
.catalog-import-upload-actions > p { margin: 0; color: var(--color-text-muted); font-size: .8125rem; }
.catalog-import-generate { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 22px; }
.catalog-import-generate::after { content: ""; width: 18px; height: 18px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E"); }
.catalog-upload-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; margin: 16px 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-accent-soft); }
.catalog-upload-progress[hidden] { display: none; }
.catalog-upload-progress > div { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; color: var(--color-accent-text); font-size: .8125rem; }
.catalog-upload-progress progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: var(--color-surface); accent-color: var(--color-accent); }
.catalog-upload-progress progress::-webkit-progress-bar { background: var(--color-surface); }
.catalog-upload-progress progress::-webkit-progress-value { background: var(--color-accent); }
.catalog-upload-progress button { min-height: 36px; padding: 6px 12px; font-size: .8125rem; }
.catalog-import-mapping { display: grid; gap: 12px; margin-bottom: 20px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.catalog-import-mapping h3, .catalog-import-mapping p { margin: 0; }
.catalog-import-mapping p { color: var(--color-text-muted); font-size: .8125rem; }
.catalog-import-mapping > label { max-width: 380px; }
.catalog-import-mapping > button { justify-self: start; }
.catalog-import-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.catalog-import-columns label { min-width: 0; font-size: .8125rem; }
.catalog-import-columns select { width: 100%; min-width: 0; }
.catalog-import-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-accent-soft); }
.catalog-import-summary > div { display: grid; flex: 0 0 auto; }
.catalog-import-summary strong { color: var(--color-primary); font-size: 1.5rem; line-height: 1; }
.catalog-import-summary span, .catalog-import-summary p { color: var(--color-accent-text); font-size: .8125rem; }
.catalog-import-summary p { max-width: 60ch; margin: 0; }
.catalog-import-rows { display: grid; gap: 12px; }
.catalog-stock-options { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 16px 0; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.catalog-stock-options label { display: block; margin: 0; color: var(--color-primary); font-size: .8125rem; font-weight: 600; }
.catalog-stock-options p { margin: 4px 0 0; color: var(--color-text-muted); font-size: .75rem; }
.catalog-stock-options p.error { color: var(--color-danger-text); }
.catalog-stock-options > input { width: 100px; min-height: 44px; padding: 8px 10px; }
.catalog-image-options { margin: 18px 0; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.catalog-image-options > label { display: flex; align-items: center; gap: 12px; width: fit-content; margin: 0; font-size: .875rem; color: var(--color-primary); cursor: pointer; }
.catalog-image-options input, .catalog-photo-replace input { width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--color-accent); }
.catalog-image-options small { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: .75rem; font-weight: 400; }
.catalog-image-review { margin: 0 0 16px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.catalog-image-review-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.catalog-image-review-header p { margin: 0; color: var(--color-primary); font-size: .8125rem; font-weight: 600; }
.catalog-image-review-header button, .catalog-image-tools button, .catalog-image-pagination button { min-height: 36px; padding: 7px 12px; font-size: .75rem; }
.catalog-image-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.catalog-image-tools label { flex: 1 1 170px; min-width: 0; gap: 4px; font-size: .75rem; }
.catalog-image-tools label:first-child { flex-basis: 320px; }
.catalog-image-tools select { width: 100%; min-width: 0; min-height: 40px; padding: 8px; font-size: .8125rem; }
.catalog-image-help { margin: 12px 0; color: var(--color-text-muted); font-size: .75rem; }
.catalog-image-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.catalog-image-choice { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
.catalog-image-choice img { width: 100%; height: 96px; object-fit: contain; border-radius: 4px; background: white; }
.catalog-image-choice span { max-width: 100%; font-size: .7rem; overflow-wrap: anywhere; }
.catalog-image-choice small { font-size: .65rem; color: var(--color-text-muted); }
.catalog-image-choice[aria-pressed="true"] { border-color: var(--color-accent-text); box-shadow: 0 0 0 1px var(--color-accent-text); }
.catalog-image-choice[aria-pressed="true"] small { color: var(--color-accent-text); font-weight: 700; }
.catalog-image-pagination { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; color: var(--color-text-muted); font-size: .75rem; }
.catalog-import-row { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(140px, 1.3fr) minmax(80px, .65fr) minmax(85px, .8fr) minmax(70px, .55fr); gap: 10px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.catalog-import-row > label { min-width: 0; gap: 4px; color: var(--color-text-muted); font-size: .7rem; }
.catalog-import-row input, .catalog-import-row select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: .8125rem; }
.catalog-import-row .catalog-import-description { grid-column: 1 / -1; }
.catalog-row-photos { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding-top: 4px; }
.catalog-row-photo-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.catalog-row-photo { position: relative; display: inline-flex; }
.catalog-row-photo img { width: 58px; height: 58px; object-fit: contain; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: white; }
.catalog-row-photo button { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 23px; height: 23px; min-height: 23px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-primary); background: var(--color-surface); font-size: 18px; line-height: 1; cursor: pointer; }
.catalog-row-photo button::after { content: ""; position: absolute; inset: -6px; }
.catalog-photo-empty, .catalog-row-photos > small { color: var(--color-text-muted); font-size: .75rem; }
.catalog-row-photos > button { min-height: 36px; padding: 6px 12px; font-size: .75rem; }
.catalog-row-photos .catalog-photo-replace { display: flex; align-items: center; gap: 8px; font-size: .75rem; }
.catalog-row-photos .catalog-photo-replace input { width: 18px; min-height: 18px; padding: 0; }
@media (max-width: 760px) {
  .catalog-image-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-image-tools label:first-child { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .catalog-image-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.catalog-import-row-issues { grid-column: 1 / -1; margin: 0; color: var(--color-text-muted); font-size: .75rem; }
.catalog-import-row-issues.error { color: var(--color-danger); }
.catalog-import-row[data-action="ignore"] { opacity: .64; background: var(--color-bg); }
.catalog-import-message { margin: 16px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-success-soft); font-size: .8125rem; }
.catalog-import-message.error { background: var(--color-danger-soft); }
#catalog-import-clear-pending { margin-top: 10px; min-height: 40px; font-size: .8125rem; }
.catalog-import-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.sale-device-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pos-sync-status { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-accent-text); background: var(--color-accent-soft); font-size: .8125rem; }
.pos-sync-card { width: min(620px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; box-shadow: var(--shadow-md); }
.pos-sync-pairing { display: grid; justify-items: center; gap: 14px; padding: 22px 24px 12px; }
.pos-sync-pairing img { width: min(300px, 72vw); height: auto; border-radius: var(--radius-sm); }
.pos-sync-pairing code { max-width: 100%; padding: 10px; border-radius: var(--radius-sm); background: var(--color-bg); font-size: .7rem; overflow-wrap: anywhere; user-select: all; }
.pos-sync-card > .form-message { margin: 8px 24px; text-align: center; }
.pos-sync-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 22px; }
.inventory-movements-card { width: min(720px, 100%); max-height: min(760px, calc(100dvh - 36px)); overflow: hidden; box-shadow: var(--shadow-md); }
.inventory-movements-list { display: grid; max-height: min(58dvh, 520px); overflow-y: auto; }
.inventory-movement-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 20px; border-bottom: 1px solid var(--color-border); }
.inventory-movement-row strong { color: var(--color-primary); }
.inventory-movement-row small { color: var(--color-text-muted); }
.inventory-movement-quantity { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 1.05rem; font-weight: 800; }
.inventory-movement-quantity.positive { color: var(--color-success-text); }
.inventory-movement-quantity.negative { color: var(--color-danger-text); }
.inventory-movements-actions { display: flex; justify-content: center; padding: 12px 20px; }

.pos-cash-dialog { width: min(620px, 100%); }
.pos-cash-dialog .form-message:empty { display: none; }
.pos-cash-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.pos-cash-form label { display: grid; gap: 4px; color: var(--color-primary); font-size: .8125rem; font-weight: 700; }
.pos-cash-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.pos-cash-summary div { padding: 10px; border-radius: var(--radius-sm); background: var(--color-bg); }
.pos-cash-summary dt { color: var(--color-text-muted); font-size: .75rem; }
.pos-cash-summary dd { margin: 2px 0 0; color: var(--color-primary); font-weight: 800; }
.pos-cash-summary small { display: block; margin-top: 4px; color: var(--color-text-muted); font-size: .75rem; font-weight: 400; }
.pos-cash-movement-form { grid-template-columns: minmax(100px, .7fr) minmax(140px, 1.3fr); }
.pos-cash-movement-form > div { grid-column: 1 / -1; display: flex; gap: 8px; }
.pos-cash-movement-form button { flex: 1; }
.pos-cash-close-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }

.app-confirm-overlay { position: fixed; z-index: 4000; inset: 0; display: grid; place-items: center; padding: 18px; background: var(--color-overlay); }
.app-confirm-overlay[hidden] { display: none; }
.app-confirm-card { width: min(440px, 100%); padding: 20px; box-shadow: var(--shadow-md); }
.app-confirm-card h2 { margin: 0 0 10px; font-size: 1.2rem; }
.app-confirm-message { margin: 0; color: var(--color-primary); font-size: 1.125rem; font-weight: 750; }
.app-confirm-detail { margin: 6px 0 0; font-size: .875rem; }
.app-confirm-choice { display: grid; gap: 6px; margin-top: 14px; color: var(--color-primary); font-weight: 700; }
.app-confirm-choice[hidden] { display: none; }
.app-confirm-choice select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 1rem; }
.app-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.app-confirm-actions button { min-height: 44px; }
.app-confirm-card.danger [data-confirm-action="accept"] { border-color: var(--color-danger); background: var(--color-danger); }
.app-confirm-open { overflow: hidden; }

.pos-companion-page { min-height: 100dvh; background: var(--color-bg); }
.pos-companion-shell { width: min(760px, calc(100% - 28px)); margin-inline: auto; padding: max(18px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); }
.pos-companion-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pos-companion-header h1 { margin: 0; color: var(--color-primary); font-size: 1.45rem; }
.pos-companion-header-copy { max-width: 44ch; margin: 3px 0 0; font-size: .875rem; }
.pos-mobile-connect, .pos-mobile-scanner, .pos-mobile-cart { padding: 18px; }
.pos-mobile-connect h2 { margin-top: 0; }
#pos-mobile-workspace { display: grid; gap: 10px; }
#pos-mobile-workspace[hidden] { display: none; }
.pos-camera-frame { position: relative; height: min(42dvh, 320px); margin-top: 12px; overflow: hidden; border-radius: var(--radius-md); background: var(--color-primary-hover); }
.pos-camera-frame video { width: 100%; height: 100%; object-fit: cover; }
.pos-camera-frame > span { position: absolute; top: 50%; left: 10%; right: 10%; height: 2px; background: var(--color-accent); box-shadow: 0 0 0 1px rgb(255 255 255 / 35%); }
.pos-mobile-scanner > .btn-primary { width: 100%; }
.pos-mobile-cart { margin-top: 0; }
.pos-mobile-cart > .section-title { margin-bottom: 8px; }
.pos-mobile-cart > .admin-empty-state { gap: 4px; padding: 18px 4px; }
.pos-mobile-cart > .sale-summary { margin-top: 0; padding-block: 12px; }
.pos-companion-page .sale-product-picker > input { font-size: 1rem; }
.pos-payment-fieldset { min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
.pos-payment-fieldset legend { padding: 0; color: var(--color-primary); font-size: .875rem; font-weight: 750; }
.pos-payment-fieldset .pos-payment-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.pos-payment-methods .payment-method-card { min-width: 0; min-height: 48px; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
.pos-payment-methods .payment-method-card input { margin: 0; }
.pos-payment-methods .payment-method-card span { display: block; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
@media (max-width: 520px) {
  .pos-payment-fieldset .pos-payment-methods { grid-template-columns: minmax(0, 1fr); }
}
.pos-mobile-actions { margin-top: 0; }
.pos-mobile-new-sale-button { margin-top: 0; }
.pos-item-unavailable { opacity: .7; }
.pos-item-unavailable small { color: var(--color-danger-text); }

/* Public catalog: editorial hero, shared filters and product discovery. */
.store-main { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.store-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 14px 0; }
.store-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-primary); font-weight: 750; letter-spacing: -.03em; font-size: 1.125rem; }
.store-brand-icon { display: block; width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; }
.store-hero { position: relative; min-height: 190px; display: grid; align-content: center; padding: 28px 0; border-radius: var(--radius-lg); background-color: var(--color-primary); }
.store-hero::before { position: absolute; z-index: 1; content: ""; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(12 31 50 / 88%), rgb(12 31 50 / 54%) 50%, rgb(12 31 50 / 10%)); pointer-events: none; }
.store-hero-background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center 48%; }
.hero-copy { position: relative; z-index: 2; max-width: 720px; padding: 0 28px; }
.hero-copy .eyebrow { color: var(--color-accent-soft); margin-bottom: 4px; }
.hero-copy h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 20ch; margin: 0; color: var(--color-surface); font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.08; letter-spacing: -.04em; }
.hero-copy p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 58ch; margin: 6px 0 0; color: var(--color-surface); font-size: .875rem; line-height: 1.4; }
.hero-copy p[hidden] { display: none; }
.store-hero-link { display: none; }
.store-benefits { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 18px 28px 0; color: var(--color-surface); }
.store-benefits[hidden] { display: none; }
.store-benefit { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: inherit; font-size: .8125rem; font-weight: 600; }
.store-benefit svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: #67E0DC; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.store-body-actions { display: flex; align-items: center; gap: 10px; }
.tracking-label-short { display: none; }
.cart-toggle { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.cart-toggle:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.cart-toggle #cart-count {
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  color: var(--color-surface);
  background: #0BB7B3;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}
.cart-toggle-icon, .add-cart-icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cart-icon { display: inline-block; position: relative; width: 17px; height: 15px; margin-right: 2px; border: 1.5px solid currentColor; border-radius: 2px 2px 4px 4px; }
.cart-icon::before { position: absolute; content: ""; width: 7px; height: 5px; left: 3.5px; top: -6px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; }
.catalog-section { padding: 24px 0 44px; }
.catalog-section > .section-title { margin-bottom: 14px; }
.catalog-section .section-title h2 { font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 650; }
#product-count { margin-left: 6px; vertical-align: middle; }
.catalog-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 18px; }
.catalog-controls label { display: grid; gap: 5px; font-size: .8125rem; color: var(--color-text-muted); }
.catalog-controls input { background: var(--color-surface); }
.catalog-search-input { position: relative; display: block; }
.catalog-search-input svg { position: absolute; z-index: 1; left: 13px; top: 50%; width: 20px; height: 20px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; }
.catalog-search-input input { padding-left: 42px; font-size: 1rem; }
.catalog-filter-toggle { display: inline-flex; min-width: 120px; min-height: 46px; padding-inline: 14px; border-color: var(--color-primary); color: var(--color-surface); background: var(--color-primary); }
.catalog-filter-toggle:hover { border-color: var(--color-primary-hover); color: var(--color-surface); background: var(--color-primary-hover); }
.catalog-filter-toggle svg { width: 18px; height: 18px; }
.catalog-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; min-height: 23px; padding: 0 6px; border-radius: var(--radius-pill); color: var(--color-primary); background: #67E0DC; font-size: .7rem; font-weight: 800; }
.catalog-filter-backdrop { position: fixed; inset: 0; z-index: 300; background: rgb(18 40 63 / 52%); backdrop-filter: blur(3px); }
.catalog-filter-sheet { position: fixed; z-index: 310; top: 50%; right: 0; left: 0; width: min(390px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin-inline: auto; padding: 18px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); box-shadow: 0 22px 64px rgb(22 50 79 / 24%); transform: translateY(-50%); animation: filter-dialog-in 180ms ease-out; }
.catalog-filter-handle { display: none; }
.catalog-filter-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.catalog-filter-sheet-header h2 { margin: 0; font-size: 1.15rem; }
.catalog-filter-sheet-fields { display: grid; gap: 12px; margin-top: 14px; }
.catalog-filter-sheet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.catalog-filter-sheet-actions button { min-height: 46px; }
@keyframes filter-dialog-in { from { transform: translateY(calc(-50% + 14px)); opacity: .65; } to { transform: translateY(-50%); opacity: 1; } }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: border-color var(--motion), box-shadow var(--motion); }
.product-card:hover { border-color: #AABBC8; box-shadow: 0 4px 18px rgb(22 50 79 / 7%); }
.catalog-results:not([data-small-catalog]) .product-card:only-child { width: min(390px, 100%); grid-column: 1 / -1; justify-self: center; }
.catalog-results[data-small-catalog] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--space-5); max-width: 880px; margin-inline: auto; }
.catalog-results[data-small-catalog="1"] .product-grid { grid-template-columns: 1fr; }
.catalog-results[data-small-catalog="2"] { max-width: none; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.catalog-results[data-small-catalog="2"] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coming-soon-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; padding: var(--space-5); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--color-surface), var(--color-accent-soft)); text-align: center; }
.coming-soon-card[hidden] { display: none; }
.coming-soon-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-accent-text); }
.coming-soon-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.coming-soon-card .eyebrow { margin: 0; font-size: .6875rem; }
.coming-soon-card h3 { max-width: 19ch; margin: 0; font-size: 1.2rem; font-weight: 650; }
.coming-soon-card p { max-width: 30ch; margin: 0; font-size: .8125rem; }
.product-media { position: relative; overflow: hidden; background: #EDF1F4; }
.product-card > .product-media, .product-card > .product-image-placeholder { width: 100%; max-height: 284px; aspect-ratio: 4 / 3; }
.product-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-image-placeholder { display: grid; place-items: center; background: #EDF1F4; color: var(--color-text-muted); font-size: .875rem; }
.image-arrow { position: absolute; z-index: 2; top: 50%; width: 34px; min-height: 34px; padding: 0; border-color: rgb(22 50 79 / 10%); border-radius: 50%; background: rgb(255 255 255 / 94%); font-size: 1.5rem; transform: translateY(-50%); }
.image-arrow-left { left: 10px; }
.image-arrow-right { right: 10px; }
.image-counter { position: absolute; right: 10px; bottom: 10px; padding: 3px 7px; border-radius: var(--radius-pill); color: var(--color-primary); background: rgb(255 255 255 / 94%); font-size: .75rem; }
.product-body { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.product-meta { margin-bottom: 6px; }
.product-meta .category-pill { padding: 4px 0; background: transparent; color: var(--color-accent-text); font-size: .75rem; font-weight: 650; }
.product-body h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 650; }
.product-title-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.8em; margin: 0 0 12px; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; margin-bottom: 12px; }
.price-row .stock { border-radius: var(--radius-pill); padding: 5px 9px; }
.price { color: var(--color-primary); font-size: 1.55rem; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.product-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product-card-actions > * { min-width: 0; min-height: 44px; padding-inline: 8px; }
.add-cart-button { gap: 7px; }
.catalog-pagination { display: grid; justify-items: center; gap: 10px; margin-top: 24px; }
.catalog-status { margin: 0; color: var(--color-text-muted); font-size: .8125rem; }
.commercial-footer { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 16px 0 20px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .8125rem; }
.commercial-footer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; max-width: none; }
.commercial-footer-line > span:first-child { color: var(--color-primary); font-weight: 700; }
.commercial-footer-item::before { content: "·"; margin-right: 8px; color: var(--color-text-muted); }

/* Cart and checkout retain their two-step state contract. */
.cart-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--color-overlay); backdrop-filter: blur(3px); }
.cart-panel { position: fixed; z-index: 110; inset: 0 0 0 auto; width: min(520px, 100%); height: 100dvh; padding: 0 24px 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--color-surface); box-shadow: var(--shadow-md); animation: drawer-in 180ms ease-out; }
.cart-panel.checkout-active { width: min(680px, 100%); }
.cart-header { position: sticky; z-index: 3; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0 -24px 24px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.cart-header h2 { margin: 3px 0 0; font-size: 1.4rem; }
.cart-step-label { color: var(--color-text-muted); font-size: .75rem; }
.cart-items { display: grid; gap: 16px; }
.cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.cart-item > .product-media, .cart-item > .product-image-placeholder { width: 64px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; font-size: .65rem; }
.cart-item .product-media img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-copy { min-width: 0; }
.cart-item h3 { margin: 0 0 6px; font-size: .875rem; }
.cart-item p { margin: 0 0 6px; font-size: .8125rem; }
.cart-item-unavailable { border-color: #F4BBBB; }
.cart-line-total { max-width: 100px; font-size: .875rem; overflow-wrap: anywhere; text-align: right; }
.remove-cart-item { margin-top: 10px; padding: 4px 0; min-height: 30px; background: transparent; font-size: .75rem; }
.cart-notice, .confirmation-payment-notice, .confirmation-pricing-notice { padding: 12px; margin-top: 16px; border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-warning-text); font-size: .875rem; }
.cart-summary, .checkout-summary-totals, .confirmation-totals { display: grid; gap: 12px; padding: 20px 0; font-size: .875rem; }
.cart-summary > div, .checkout-summary-totals > div, .confirmation-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.cart-summary strong, .checkout-summary-totals strong, .confirmation-totals strong { max-width: 65%; overflow-wrap: anywhere; text-align: right; font-variant-numeric: tabular-nums; }
.cart-total, .checkout-summary-total, .confirmation-total { border-top: 1px solid var(--color-border); padding-top: 16px; color: var(--color-primary); font-weight: 700; }
.cart-total strong, .checkout-summary-total strong, .confirmation-total strong { font-size: 1.4rem; }
.checkout-toggle, .checkout-submit { width: 100%; min-height: 48px; }
.cart-trust-line, .checkout-trust-line, .delivery-note { margin: 12px 0; color: var(--color-text-muted); font-size: .75rem; line-height: 1.6; }
.cart-trust-line, .checkout-trust-line { text-align: center; }
.checkout-form { display: none; gap: 20px; }
.checkout-active .checkout-form { display: grid; }
.checkout-active .cart-products-step { display: none; }
.checkout-heading h3 { margin: 16px 0 0; }
.checkout-back { padding: 0; border: 0; background: transparent; min-height: 32px; }
.checkout-section { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.checkout-section legend { padding: 0 6px; font-size: .875rem; font-weight: 700; color: var(--color-primary); }
.checkout-section legend span, .checkout-section h4 span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-text); font-size: .75rem; }
.checkout-section h4 { margin: 0 0 16px; font-size: .875rem; }
.checkout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.checkout-notes-fields { margin-top: 16px; }
.delivery-methods, .payment-methods { display: grid; gap: 10px; margin-bottom: 16px; }
.delivery-method-card, .payment-method-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.delivery-method-card:has(input:checked), .payment-method-card:has(input:checked) { border-color: var(--color-accent); background: #F1FAFA; }
.delivery-method-card span, .payment-method-card span { display: grid; gap: 4px; min-width: 0; }
.delivery-method-card input, .payment-method-card input { margin: 2px 0 0; }
.delivery-method-card small, .payment-method-card small { color: var(--color-text-muted); font-size: .75rem; font-weight: 400; }
.payment-method-card em { margin-left: auto; padding: 3px 6px; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent-text); font-style: normal; font-size: .6875rem; }
.checkout-summary-items, .confirmation-items { display: grid; gap: 12px; font-size: .875rem; }
.checkout-summary-items > div, .confirmation-items > div { display: flex; justify-content: space-between; gap: 16px; overflow-wrap: anywhere; }
.checkout-summary-items strong, .confirmation-items strong { text-align: right; flex: 0 0 auto; }
.pricing-validation-status { margin: 0; color: var(--color-text-muted); font-size: .75rem; }
.pricing-validation-status.validated { color: var(--color-success-text); }
.free-shipping-progress { margin-top: 16px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-accent-soft); }
.free-shipping-progress p { margin-bottom: 8px; color: var(--color-accent-text); font-size: .8125rem; }
.free-shipping-progress progress { width: 100%; height: 6px; display: block; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: white; }
.free-shipping-progress progress::-webkit-progress-bar { background: white; }
.free-shipping-progress progress::-webkit-progress-value { background: var(--color-accent); }
.free-shipping-progress progress::-moz-progress-bar { background: var(--color-accent); }
.cart-recommendations { margin-top: 24px; }
.cart-recommendations-heading h3 { margin: 0; font-size: .875rem; }
.cart-recommendations-heading > span { color: var(--color-text-muted); font-size: .75rem; }
.cart-recommendation-items { display: grid; gap: 10px; margin-top: 12px; }
.cart-recommendation-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.cart-recommendation-card > a { flex: 0 0 48px; }
.cart-recommendation-card img, .cart-recommendation-card .recommendation-placeholder { width: 48px; height: 54px; object-fit: contain; }
.cart-recommendation-card > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cart-recommendation-card h4 { margin: 0; font-size: .8125rem; }
.cart-recommendation-card strong { font-size: .875rem; }
.cart-recommendation-card button { min-width: 0; padding-inline: 10px; font-size: .8125rem; }

/* Tracking and order confirmation. */
.tracking-modal-card, .order-confirmation-card { position: relative; width: min(680px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 28px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); overflow-wrap: anywhere; }
.tracking-modal-close { position: absolute; top: 20px; right: 20px; }
.tracking-modal-copy { padding-right: 42px; }
.tracking-modal-copy h2 { margin-bottom: 12px; font-size: 1.5rem; }
.tracking-modal-copy p { font-size: .875rem; }
.tracking-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tracking-form button { grid-column: 1 / -1; }
.tracking-result { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-border); font-size: .875rem; }
.tracking-result-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.tracking-facts { display: grid; gap: 10px; padding: 16px; background: var(--color-bg); border-radius: var(--radius-sm); }
.tracking-facts > div, .tracking-items > div, .tracking-totals > div { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.tracking-facts dt { color: var(--color-text-muted); }
.tracking-facts dd { margin: 0; text-align: right; }
.tracking-items, .tracking-totals { display: grid; gap: 12px; margin: 20px 0; }
.tracking-items strong, .tracking-totals strong { flex: 0 0 auto; text-align: right; }
.order-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 24px 0; }
.order-timeline li { position: relative; display: grid; justify-items: center; gap: 8px; color: var(--color-text-muted); text-align: center; font-size: .75rem; }
.order-timeline li::before { content: ""; position: absolute; top: 7px; right: 50%; width: 100%; height: 2px; background: var(--color-border); }
.order-timeline li:first-child::before { display: none; }
.order-timeline li > span { position: relative; z-index: 1; width: 16px; height: 16px; border: 3px solid var(--color-border); border-radius: 50%; background: var(--color-surface); }
.order-timeline li.active, .order-timeline li.complete { color: var(--color-accent-text); }
.order-timeline li.active > span, .order-timeline li.complete > span { background: var(--color-accent); border-color: var(--color-accent); }
.order-timeline li.complete::before, .order-timeline li.active::before { background: var(--color-accent); }
.order-timeline.cancelled { grid-template-columns: 1fr; }
.order-timeline.cancelled li { color: var(--color-danger-text); }
.order-timeline.cancelled li > span { background: var(--color-danger); border-color: var(--color-danger); }
.confirmation-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.confirmation-heading h2 { margin: 0; }
.confirmation-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success-text); font-size: 1.4rem; }
.confirmation-items { margin-top: 24px; }
.confirmation-disclaimer { font-size: .75rem; }
.confirmation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.confirmation-actions > * { flex: 1 1 180px; }
.product-whatsapp, .tracking-whatsapp, .confirmation-whatsapp { color: var(--color-success-text); border-color: #A7D4B9; background: var(--color-success-soft); }
.confirmation-stripe-retry { width: 100%; background: var(--color-primary); color: white; }
.tracking-whatsapp { width: 100%; }

/* Product detail and related products. */
.product-site-header { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--color-border); }
.product-store-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-primary); font-weight: 700; }
.product-store-brand img { width: 34px; height: 34px; border-radius: var(--radius-sm); object-fit: contain; background: var(--color-surface); }
.store-brand-icon { object-fit: contain; }
.back-to-catalog { font-size: .875rem; font-weight: 600; color: var(--color-primary); }
.back-to-catalog:hover { text-decoration: underline; }
.product-page-main { width: min(1240px, calc(100% - 64px)); margin: 36px auto 48px; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 48px; }
.product-detail-gallery { min-width: 0; }
.product-detail-media { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #EDF1F4; }
.product-detail-media > img { width: 100%; height: 100%; max-height: 620px; object-fit: contain; }
.product-detail-media > .product-image-placeholder { width: 100%; height: 100%; }
.product-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.product-thumbnail { width: 68px; height: 72px; padding: 4px; overflow: hidden; border-radius: var(--radius-sm); }
.product-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.product-thumbnail.active { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.product-detail-info { min-width: 0; padding-top: 8px; }
.product-detail-info h1 { margin: 16px 0; font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
.product-detail-price { margin: 0 0 16px; color: var(--color-primary); font-size: 2.25rem; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.product-detail-description { margin: 24px 0; white-space: pre-line; overflow-wrap: anywhere; }
.product-purchase-box { padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.quantity-label { font-size: .875rem; font-weight: 600; }
.quantity-selector { margin-bottom: 20px; }
.quantity-selector button { min-height: 44px; min-width: 44px; }
.product-purchase-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-purchase-actions button { min-height: 48px; padding-inline: 10px; }
.product-whatsapp { width: 100%; margin-top: 12px; }
.trust-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.trust-signals > div { min-width: 0; display: grid; align-content: start; gap: 6px; }
.trust-signals strong { font-size: .75rem; color: var(--color-primary); }
.trust-signals small { font-size: .75rem; color: var(--color-text-muted); }
.related-products-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.related-products-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.related-products-heading h2, .related-products-heading p { margin-bottom: 0; }
.related-products-heading p { font-size: .875rem; }
.related-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.related-product-card { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.related-product-media { display: block; aspect-ratio: 4 / 3; background: #EDF1F4; }
.related-product-media img, .related-product-media .recommendation-placeholder { width: 100%; height: 100%; object-fit: contain; }
.recommendation-placeholder { display: grid; place-items: center; color: var(--color-text-muted); background: var(--color-bg); font-size: .75rem; }
.related-product-copy { display: grid; gap: 8px; padding: 16px; }
.related-product-copy h3 { margin: 0; font-size: .875rem; }
.related-product-copy p { margin: 0; font-size: .8125rem; }
.related-product-copy strong { color: var(--color-primary); }
.related-product-copy button { width: 100%; }

/* Acceso y registro comparten la misma presentación de plataforma. */
.auth-root { width: 100%; height: 100%; overflow: hidden; background: var(--color-bg); }
.auth-body { width: 100%; height: var(--app-viewport-height, 100dvh); min-height: 0; display: grid; align-items: start; justify-items: center; padding: 28px; overflow-y: auto; overscroll-behavior-y: none; background: radial-gradient(circle at 50% 12%, #FFFFFF 0, #F3F7FA 44%, #EAF1F5 100%); }
.auth-page { width: min(1180px, 100%); min-height: min(680px, calc(var(--app-viewport-height, 100dvh) - 56px)); margin-block: auto; display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); border: 1px solid #D7E1E9; border-radius: 24px; overflow: hidden; background: var(--color-surface); box-shadow: 0 24px 64px rgb(22 50 79 / 16%); }
.auth-hero { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 32px 42px; isolation: isolate; background: radial-gradient(circle at 82% 12%, #07539B 0, #032D59 27%, #031D38 68%); color: white; }
.auth-hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(180deg, rgb(1 24 49 / 8%) 0%, rgb(1 24 49 / 6%) 52%, rgb(1 24 49 / 20%) 100%); pointer-events: none; }
.auth-showcase-image { position: absolute; z-index: -2; inset: auto 0 0; width: 100%; height: 48%; max-width: none; object-fit: cover; object-position: center bottom; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 19%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 19%, #000 100%); }
.auth-hero-content { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 13px; width: fit-content; min-width: 0; text-decoration: none; }
.auth-brand-icon { width: 52px; height: 52px; flex: 0 0 auto; padding: 7px; border-radius: 13px; background: var(--color-surface); object-fit: contain; box-shadow: 0 8px 22px rgb(0 0 0 / 18%); transform-origin: center bottom; }
.auth-brand-copy { min-width: 0; display: grid; gap: 3px; }
.auth-brand-copy strong { overflow-wrap: anywhere; color: var(--color-surface); font-size: 1.08rem; font-weight: 850; line-height: 1.15; }
.auth-brand-copy span { color: #C5F7FF; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.auth-hero h1 { max-width: 440px; margin: 24px 0 7px; color: white; font-size: clamp(2.2rem, 3.4vw, 2.8rem); line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; }
.auth-hero h1 strong { display: block; color: #18DFF2; font: inherit; }
.auth-hero > .auth-hero-content > p { max-width: 440px; margin: 0; color: #E5F2F8; font-size: .96rem; line-height: 1.4; text-wrap: balance; }
.auth-feature-grid { max-width: 470px; margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.auth-feature-grid > div { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 9px; color: white; font-size: .73rem; line-height: 1.25; text-shadow: 0 2px 8px rgb(0 19 40 / 72%); }
.auth-feature-grid > div > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgb(24 223 242 / 36%); border-radius: 11px; color: #18DFF2; background: linear-gradient(145deg, rgb(0 185 220 / 25%), rgb(4 46 85 / 86%)); box-shadow: inset 0 1px rgb(255 255 255 / 12%); }
.auth-feature-grid svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-panel { min-width: 0; padding: 36px 42px; display: flex; flex-direction: column; justify-content: center; background: rgb(255 255 255 / 98%); }
.auth-copy h2, .register-copy h1 { margin: 0; color: #0C2340; font-size: clamp(1.7rem, 2.5vw, 2.05rem); line-height: 1.12; letter-spacing: -.04em; }
.auth-copy p { margin: 6px 0 22px; color: #65758B; font-size: .9rem; }
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 7px; }
.auth-field > label { color: #12243B; font-size: .83rem; font-weight: 800; }
.auth-input { display: flex; align-items: center; gap: 8px; min-width: 0; }
.auth-input-icon { gap: 0; min-height: 50px; overflow: hidden; border: 1px solid #CFDCE6; border-radius: 10px; background: white; transition: border-color var(--motion), box-shadow var(--motion); }
.auth-input-icon:hover { border-color: #9FB4C5; }
.auth-input-icon:focus-within { border-color: #1689E5; box-shadow: 0 0 0 3px rgb(22 137 229 / 12%); }
.auth-input-icon > svg { width: 20px; height: 20px; margin-left: 14px; color: #5275A0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-input-icon input { min-width: 0; min-height: 48px; flex: 1; padding-inline: 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #14283F; }
.auth-input-icon input:hover, .auth-input-icon input:focus { border: 0; box-shadow: none; outline: 0; }
.auth-input-icon input::placeholder { color: #6C82A2; }
.auth-eye { align-self: stretch; min-width: 58px; min-height: 48px; padding: 8px 12px; border: 0; border-left: 1px solid #E0E7ED; border-radius: 0; color: #526985; background: transparent; }
.auth-eye:hover { border-color: #E0E7ED; background: #F6F9FC; }
.auth-submit { width: 100%; min-height: 52px; justify-content: center; gap: 12px; border: 0; border-radius: 10px; background: linear-gradient(115deg, #0877B9, #004A80); box-shadow: 0 9px 20px rgb(0 86 143 / 16%); font-size: .98rem; font-weight: 800; }
.auth-submit:hover { border: 0; background: linear-gradient(115deg, #076BA7, #003E6C); box-shadow: 0 11px 24px rgb(0 69 116 / 22%); }
.auth-submit svg, .auth-submit span { margin-left: 0; }
.auth-message { margin: 0; }
.auth-message:empty { display: none; }
.auth-message.error { padding: 11px 13px; border: 1px solid #F1D58E; border-radius: 9px; color: #A44B07; background: #FFF9E9; }
.auth-switch-link { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #65758B; font-size: .82rem; text-align: center; }
.auth-switch-link::before, .auth-switch-link::after { height: 1px; min-width: 18px; flex: 1; background: #DCE5EC; content: ""; }
.auth-switch-link a { color: #006CC3; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.auth-secure { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: .75rem; color: var(--color-text-muted); }
.auth-secure p { margin: 6px 0 0; }
.auth-login-panel .auth-secure { margin-top: 28px; }
@media (min-width: 761px) {
  .auth-login-panel .auth-switch-link { margin-top: 16px; }
  .auth-login-panel .auth-install-button { margin-top: 10px; }
}
.register-body { align-items: start; }
.register-page { width: min(1180px, 100%); margin-block: auto; }
.register-panel { justify-content: flex-start; }
.register-brand { color: white; font-weight: 850; text-decoration: none; }
.register-copy p { margin-bottom: 16px; }
.register-form { gap: 14px; }
.register-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.business-type-picker { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.business-type-picker legend { grid-column: 1 / -1; margin-bottom: 0; color: #0C2340; font-size: 1.03rem; font-weight: 850; }
.business-type-picker > p { grid-column: 1 / -1; margin: -5px 0 2px; color: #65758B; font-size: .82rem; }
.business-type-picker > label { position: relative; min-width: 0; }
.business-type-picker input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.business-type-picker span { position: relative; height: 100%; min-height: 142px; padding: 13px 9px; display: grid; grid-template-rows: 39px auto 1fr; place-items: center; align-content: start; gap: 4px; border: 1px solid #CFDCE6; border-radius: 10px; cursor: pointer; color: #0C2340; background: white; text-align: center; transition: border-color var(--motion), background-color var(--motion), box-shadow var(--motion), transform var(--motion); }
.business-type-picker span:hover { border-color: #8EB3D2; transform: translateY(-1px); }
.business-type-picker span > svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.business-type-picker span > strong { font-size: .86rem; }
.business-type-picker small { color: #5D7391; font-size: .71rem; line-height: 1.35; }
.business-type-picker input:checked + span { border-color: #1689E5; outline: 0; color: #006CC3; background: #F0F9FF; box-shadow: 0 0 0 2px rgb(22 137 229 / 12%); }
.business-type-picker input:checked + span::after { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: white; background: #1689E5; content: "✓"; font-size: .72rem; font-weight: 900; }
.business-type-picker input:focus-visible + span { outline: 3px solid rgb(22 137 229 / 28%); outline-offset: 2px; }
.register-footer { margin-top: 16px; padding-top: 14px; color: #65758B; }
@keyframes auth-cart-login { 0% { transform: translateX(0) rotate(0); } 28% { transform: translateX(-3px) rotate(-3deg); } 68% { transform: translateX(12px) rotate(2deg); } 100% { transform: translateX(0) rotate(0); } }
.auth-page.auth-login-success .auth-brand-icon { animation: auth-cart-login 520ms cubic-bezier(.22, .85, .32, 1); }
.auth-page.auth-login-success .auth-submit { background: var(--color-accent-text); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: .5; } to { transform: translateX(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pwa-launch-mark::before,
  .pwa-launch-mark img { animation: none; }
  .auth-page.auth-login-success .auth-brand-icon { animation: none; }
}

/* Comprobante térmico reutilizable: tienda y punto de venta. */
.receipt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  background: var(--color-overlay);
  backdrop-filter: blur(5px);
}

.receipt-overlay[hidden] {
  display: none;
}

.receipt-dialog {
  width: min(440px, 100%);
  min-width: 0;
  margin: auto;
}

.receipt-accessible-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.receipt-thermal-stage,
.receipt-animation-actions,
.receipt-actions,
.receipt-share-status {
  display: none;
}

.receipt-thermal-stage {
  width: min(94mm, 100%);
  margin: 0 auto;
}

.receipt-overlay[data-stage="animation"] .receipt-thermal-stage,
.receipt-overlay[data-stage="final"] .receipt-thermal-stage {
  display: block;
}

.receipt-overlay[data-stage="animation"] .receipt-animation-actions {
  display: flex;
}

.receipt-overlay[data-stage="final"] .receipt-printer {
  display: none;
}

.receipt-overlay[data-stage="final"] .receipt-output {
  overflow: visible;
}

.receipt-overlay[data-stage="final"] .receipt-actions {
  display: grid;
}

.receipt-overlay[data-stage="final"] .receipt-share-status {
  display: block;
}

.receipt-printer {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 54px;
  display: grid;
  place-items: end center;
  padding-bottom: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px 18px 7px 7px;
  background: linear-gradient(160deg, var(--color-primary), var(--color-primary-hover));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.receipt-printer::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #78d59b;
  box-shadow: 0 0 10px rgba(120, 213, 155, 0.9);
}

.receipt-printer span {
  width: calc(100% - 28px);
  height: 7px;
  border-radius: 999px;
  background: #070b09;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.08);
}

.receipt-output {
  width: 100%;
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: 0 4px 13px;
}

.receipt-paper {
  position: relative;
  width: min(80mm, calc(100vw - 48px));
  min-width: 0;
  padding: 9mm 7mm 11mm;
  color: #111;
  background: #fffef9;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.24);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 1.35;
}

.receipt-paper[data-size="58"] {
  width: min(58mm, calc(100vw - 48px));
  padding-inline: 5mm;
  font-size: 10px;
}

.receipt-paper::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 10px;
  background: linear-gradient(135deg, #fffef9 50%, transparent 51%) 0 0 / 10px 10px repeat-x;
}

.receipt-paper.is-emerging {
  animation: receipt-emerge 2400ms cubic-bezier(0.22, 0.8, 0.25, 1) both;
  will-change: clip-path, transform, opacity;
}

@keyframes receipt-emerge {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-8px);
    opacity: 0.45;
  }
  to {
    clip-path: inset(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.receipt-heading {
  padding-bottom: 13px;
  border-bottom: 1px dashed #555;
  text-align: center;
}

.receipt-heading > * {
  margin: 0;
}

.receipt-heading h2 {
  margin: 5px 0;
  font-family: inherit;
  font-size: 17px;
  text-transform: uppercase;
}

.receipt-brand {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.receipt-heading time {
  display: block;
  margin-top: 3px;
  color: #333;
}

.receipt-items,
.receipt-totals {
  display: grid;
  gap: 8px;
  padding: 13px 0;
  border-bottom: 1px dashed #555;
}

.receipt-item,
.receipt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
}

.receipt-item > div,
.receipt-item strong,
.receipt-row span,
.receipt-row strong,
.receipt-meta dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.receipt-item small {
  display: block;
  margin-top: 2px;
  color: #444;
}

.receipt-row strong,
.receipt-item > strong {
  text-align: right;
}

.receipt-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 2px solid #111;
  font-size: 15px;
}

.receipt-meta {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px dashed #555;
}

.receipt-meta div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
}

.receipt-meta dt,
.receipt-meta dd {
  margin: 0;
}

.receipt-meta dt {
  font-weight: 900;
}

.receipt-thanks,
.receipt-legal {
  margin: 12px 0 0;
  text-align: center;
}

.receipt-thanks {
  font-weight: 900;
}

.receipt-legal {
  color: #444;
  font-size: 9px;
}

.receipt-share-status {
  min-height: 20px;
  margin: 5px 0 8px;
  color: #fff;
  font-size: 0.82rem;
  text-align: center;
}

.receipt-animation-actions {
  justify-content: center;
  margin-top: 4px;
}

.receipt-animation-actions button {
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary);
}

.receipt-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.receipt-actions button {
  min-width: 0;
  min-height: 44px;
}

.receipt-actions .receipt-print-button {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.96);
}

body.receipt-open {
  overflow: hidden;
}



/* Responsive layouts. */
@media (min-width: 1200px) {
  .store-hero { min-height: 174px; padding-block: 22px; }
  .store-hero-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 38px; margin-top: 14px; padding: 8px 16px; border-radius: var(--radius-pill); color: var(--color-primary); background: var(--color-surface); font-size: .8125rem; font-weight: 700; }
  .store-hero-link:hover { background: var(--color-accent-soft); text-decoration: none; }
  .catalog-controls { margin-top: 14px; }
  .catalog-filter-toggle { width: 240px; }
  .catalog-section { padding-top: 16px; }
  .catalog-section > .section-title { margin-bottom: 12px; }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
  .product-card > .product-media,
  .product-card > .product-image-placeholder {
    height: 168px;
    max-height: 168px;
    aspect-ratio: auto;
  }
  .product-body { padding: 12px 14px 14px; }
  .product-meta { margin-bottom: 3px; }
  .product-body h3 { margin-bottom: 4px; }
  .product-body > p { -webkit-line-clamp: 1; min-height: 1.4em; margin-bottom: 10px; }
  .price-row { margin-bottom: 10px; }
  .product-card-actions > * { min-height: 40px; }
}
@media (max-width: 1199px) and (min-width: 621px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 1200px) and (min-width: 761px) {
  .admin-layout { padding-left: 216px; padding-right: 24px; }
  .admin-header { width: 192px; padding-inline: 12px; }
  .admin-heading { gap: 8px; }
  .admin-table-head, .orders-table-head { display: none; }
  .admin-item { grid-template-columns: minmax(0, 1fr) minmax(100px, .55fr) 160px; gap: 10px 16px; }
  .admin-product-identity { grid-column: 1 / 3; }
  .admin-actions { grid-column: 3; grid-row: 1 / 3; }
  .admin-product-price { grid-column: 1; }
  .admin-product-stock { grid-column: 2; }
  .admin-product-state { grid-column: 1 / 3; }
  .order-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px; }
  .order-heading { grid-column: 1; }
  .order-customer { grid-column: 2; grid-row: 1 / 3; }
  .order-status { grid-column: 1 / 3; }
  .order-total { grid-column: 1; grid-row: 2; }
  .order-actions { grid-column: 3; grid-row: 1 / 3; }
  .sale-view { grid-template-columns: minmax(210px, .7fr) minmax(0, 1fr); gap: 14px; }
  .sale-cart-panel, .sale-scan-panel { padding: 18px; }
  .sale-item { grid-template-columns: 44px minmax(0, 1fr); }
  .sale-item > img, .sale-item > .admin-thumb { width: 44px; height: 48px; }
  .sale-item > strong { grid-column: 2; text-align: right; max-width: none; }
}
@media (max-width: 980px) {
  .product-grid, .related-products, .commercial-kpi-grid, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commercial-report-grid { grid-template-columns: 1fr; }
  .commercial-chart-card { grid-row: auto; }
  .catalog-results[data-small-catalog="2"] { display: block; }
  .catalog-results[data-small-catalog="2"] .coming-soon-card { margin-top: var(--space-5); padding: var(--space-5); }
  .product-detail { gap: 28px; }
  .product-purchase-actions, .trust-signals { grid-template-columns: 1fr; }
  .trust-signals > div { grid-template-columns: 22px minmax(0, 1fr); gap: 3px 8px; }
  .trust-signals small { grid-column: 2; }
  .auth-hero, .auth-panel { padding: 30px; }
  .auth-hero h1 { font-size: 2.15rem; }
  .auth-feature-grid { gap: 8px 12px; }
  .auth-feature-grid > div { grid-template-columns: 40px minmax(0, 1fr); font-size: .72rem; }
  .auth-feature-grid > div > span { width: 40px; height: 40px; }
}
@media (max-width: 760px) {
  button, .btn-primary-link, .view-product-link, .product-cart-link { min-height: 44px; }
  .auth-body .auth-install-button { display: none !important; }
  .auth-copy h2 { margin: 0; }
  .auth-copy p { margin: 4px 0 16px; }
  .auth-form { gap: 12px; }
  .auth-secure { margin-top: 16px; padding-top: 14px; }
  .admin-layout { padding: 92px 20px 32px; }
  .admin-header { inset: 0 0 auto; width: 100%; height: 72px; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--color-primary-hover); }
  .admin-heading h1 { font-size: .9375rem; }
  .admin-header-copy, .navigation-label, .admin-table-head, .orders-table-head { display: none; }
  .admin-navigation { position: relative; margin-top: 0; }
  .admin-menu-button { display: grid; }
  .admin-menu { position: absolute; right: 0; top: calc(100% + 12px); width: min(260px, calc(100vw - 40px)); padding: 8px; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--radius-md); background: var(--color-primary); box-shadow: var(--shadow-md); }
  .admin-menu .logout-tab-button { margin-top: 8px; border-top-color: rgb(255 255 255 / 18%); }
  .admin-view { gap: 14px; scroll-margin-top: 92px; }
  .products-toolbar { align-items: flex-start; }
  .products-toolbar-actions { width: 100%; }
  .products-toolbar-actions > button { flex: 1 1 180px; }
  .admin-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 16px; }
  .admin-product-identity, .admin-product-state { grid-column: 1 / -1; }
  .admin-product-price { grid-column: 1; }
  .admin-product-stock { grid-column: 2; }
  .admin-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .admin-actions [data-action="qr"] { grid-column: auto; }
  .admin-actions button { min-height: 44px; padding: 6px 4px; font-size: .75rem; }
  .admin-actions svg { display: block; width: 16px; height: 16px; }
  .admin-actions .edit-button { border-color: var(--color-border); }
  .admin-actions [data-action="qr"] { border-color: #B9DDDC; }
  .admin-action-label-full { display: none; }
  .admin-action-label-compact { display: inline; }
  .order-item { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .order-heading { grid-column: 1; }
  .order-total { grid-column: 2; grid-row: 1; max-width: 128px; text-align: right; }
  .order-customer, .order-status, .order-actions { grid-column: 1 / -1; }
  .sale-view { grid-template-columns: 1fr; }
  .staff-view-heading { align-items: stretch; flex-direction: column; }
  .staff-view-heading > button { width: 100%; }
  .sale-item { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .qty-controls button { min-width: 40px; min-height: 40px; }
  .commercial-dashboard-heading { flex-wrap: wrap; }
  .store-preferences { grid-template-columns: 1fr; }
  #commercial-metrics-status { text-align: left; padding-left: 0; }
  .store-main, .commercial-footer, .product-site-header, .product-page-main { width: calc(100% - 40px); }
  .store-header { flex-wrap: wrap; gap: 16px; }
  .store-hero { padding-top: 28px; }
  .store-hero-background { object-position: 65% center; }
  .hero-copy { padding-inline: 24px; }
  .store-body-actions { width: 100%; }
  .store-body-actions > button { flex: 1; }
  .hero-copy .eyebrow { margin-bottom: 12px; }
  .hero-copy p { margin-top: 14px; }
  .catalog-section { padding: 28px 0 48px; }
  .store-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; margin: 16px 24px 0; }
  .store-benefit { align-items: flex-start; gap: 7px; font-size: .75rem; line-height: 1.25; }
  .store-benefit svg { width: 20px; height: 20px; }
  .product-card > .product-media, .product-card > .product-image-placeholder { max-height: none; }
  .product-detail { grid-template-columns: 1fr; gap: 24px; }
  .product-detail-media { max-height: 500px; }
  .product-detail-info h1 { font-size: 1.8rem; }
  .product-purchase-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-products-heading { align-items: flex-start; flex-direction: column; }
  .commercial-footer { padding: 16px 0 max(20px, env(safe-area-inset-bottom)); }
  .commercial-footer-line { margin: 0; }
  .auth-page { min-height: 0; grid-template-columns: 1fr; max-width: 560px; border-radius: 18px; }
  .auth-hero { min-height: 0; padding: 16px 18px; }
  .auth-showcase-image { display: none; }
  .auth-hero h1, .auth-hero > .auth-hero-content > p, .auth-feature-grid { display: none; }
  .auth-brand { gap: 10px; }
  .auth-brand-icon { width: 42px; height: 42px; padding: 6px; border-radius: 10px; }
  .auth-brand-copy strong { font-size: .95rem; }
  .auth-brand-copy span { font-size: .6rem; }
  .auth-panel { justify-content: flex-start; padding: 24px; }
  .auth-copy h2, .register-copy h1 { font-size: 1.5rem; }
  .auth-switch-link { margin-top: 16px; font-size: .78rem; }
  .auth-switch-link::before, .auth-switch-link::after { width: 12px; min-width: 0; flex: 0 0 12px; }
}
@media (max-width: 620px) {
  .admin-layout { padding: 90px 12px 24px; }
  .admin-header { padding-inline: 16px; }
  .admin-view { gap: 10px; }
  .view-heading .eyebrow { margin-bottom: 4px; }
  .view-heading p { margin-top: 4px; font-size: .8125rem; }
  .products-toolbar { padding-inline: 4px; }
  .products-toolbar-actions > button { flex: 1 1 140px; padding-inline: 10px; font-size: .8125rem; }
  .products-toolbar-actions svg { width: 18px; height: 18px; }
  .kpi-grid { gap: 6px; }
  .kpi-card { gap: 1px; min-height: 54px; padding: 7px 10px; }
  .kpi-card span { font-size: .6875rem; line-height: 1.2; }
  .kpi-card strong { font-size: 1.08rem; }
  .panel, .commercial-dashboard, .analytics-panel { padding: 14px; }
  .products-list-panel, .orders-panel { padding: 0; }
  .products-list-panel > .section-title, .orders-panel > .section-title, .admin-item, .order-item { padding: 14px; }
  .admin-catalog-controls { gap: 8px; padding: 12px; }
  .admin-products-search-input input { min-height: 44px; padding-inline: 38px 10px; }
  .admin-catalog-controls .catalog-filter-toggle { min-width: 106px; min-height: 44px; padding-inline: 12px; }
  .admin-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-actions button { font-size: .75rem; border-color: var(--color-border); }
  .sale-item { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .sale-item > img, .sale-item > .admin-thumb { width: 48px; height: 52px; }
  .sale-item > strong { grid-column: 2; max-width: none; text-align: right; }
  .sale-scan-panel > .section-title, .sale-cart-panel > .section-title { margin-bottom: 12px; }
  .sale-cart-panel .admin-empty-state { gap: 6px; padding: 22px 8px; }
  .sale-cart-panel .empty-icon { width: 32px; height: 32px; margin-bottom: 2px; }
  .sale-scan-button { min-height: 44px; margin-top: 10px; }
  .sale-product-results > button { grid-template-columns: 40px minmax(0, 1fr); }
  .sale-product-results button > span:last-child { display: none; }
  .staff-panel > .section-title { padding: 12px 14px; }
  .staff-item { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
  .staff-avatar { width: 38px; height: 38px; }
  .staff-item > button { grid-column: 2 / -1; width: 100%; }
  .sale-summary { padding-block: 14px; margin-top: 6px; }
  .commercial-dashboard-heading { display: grid; gap: 4px; margin-bottom: 14px; }
  .commercial-dashboard-heading p { margin-top: 4px; }
  #commercial-metrics-status { padding: 0; font-size: .6875rem; }
  .commercial-kpi-grid { gap: 12px; }
  .commercial-kpi-grid article { gap: 3px; }
  .commercial-kpi-grid article > strong { font-size: 1.25rem; }
  .commercial-kpi-grid .commercial-top-products { padding-top: 12px; }
  .commercial-kpi-grid .commercial-top-products > strong { font-size: .9375rem; }
  .analytics-panel { align-items: flex-start; gap: 12px; }
  .product-drawer { place-items: center; overflow: hidden; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .product-drawer-card { width: 100%; min-height: 0; height: auto; max-height: calc(100dvh - 16px); max-height: calc(var(--app-viewport-height, 100dvh) - max(16px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom)))); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .staff-drawer { place-items: center; overflow: hidden; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .staff-drawer-card {
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: calc(100dvh - 16px);
    max-height: calc(var(--app-viewport-height, 100dvh) - max(16px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom))));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  .staff-form { padding: 14px; }
  .staff-form-actions { position: sticky; z-index: 2; bottom: -14px; margin: 0 -14px -14px; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 -8px 20px rgb(22 50 79 / 6%); }
  .product-drawer-header { padding: 12px 14px; }
  .scanner-header, .order-detail-header { padding: 18px 16px; }
  .product-drawer-heading { align-items: flex-start; }
  .product-drawer-icon { display: none; }
  .product-drawer-header p { margin-top: 2px; font-size: .75rem; }
  .product-drawer-body { padding: 12px 14px; }
  .product-drawer-header h2 { font-size: 1.125rem; }
  .product-form { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "name name" "price price" "stock minimum" "status status" "note note" "category type" "unit unit" "barcode barcode" "images images" "description description"; gap: 10px 8px; }
  .product-form.is-digital-product { grid-template-areas: "name name" "price price" "category type" "digital digital" "images images" "description description"; }
  .product-form > label { font-size: .8125rem; }
  .product-form .product-sku-field { display: none; }
  .barcode-input-shell { grid-template-columns: 1fr; gap: 8px; }
  .barcode-input-shell button { width: 100%; color: var(--color-on-primary); border-color: var(--color-primary); background: var(--color-primary); }
  .image-manager { padding: 0; border: 0; }
  .image-manager-heading { margin-bottom: 8px; }
  .image-manager-heading small { display: none; }
  .image-manager-content, .image-manager.has-images .image-manager-content { grid-template-columns: 1fr; gap: 10px; }
  .image-dropzone { grid-template-columns: auto minmax(0, 1fr); min-height: 106px; padding: 12px; }
  .image-dropzone .file-picker-button { display: none; }
  .image-preview { flex-wrap: nowrap; padding-bottom: 4px; overflow-x: auto; overscroll-behavior-inline: contain; }
  .image-preview-item, .image-add-more { width: 76px; min-width: 76px; height: 76px; min-height: 76px; }
  .product-form textarea { min-height: 72px; resize: none; }
  .product-form-actions { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
  .product-form-actions button { flex: 1; min-width: 0; }
  .pos-cash-form, .pos-cash-movement-form { grid-template-columns: 1fr; }
  .pos-cash-movement-form > div { grid-column: 1; }
  .scanner-modal, .qr-modal, .order-detail-modal, .catalog-import-modal, .pos-sync-modal, .tracking-modal, .order-confirmation { padding: 8px; }
  .catalog-import-card { max-height: calc(100dvh - 16px); }
  .catalog-import-header, .catalog-import-body { padding: 16px; }
  .catalog-import-header h2 { font-size: 1.25rem; }
  .catalog-import-header p { font-size: .8125rem; }
  .catalog-import-upload { gap: 16px; }
  .catalog-file-picker { min-height: 204px; padding: 20px 12px; gap: 14px; }
  .catalog-file-picker strong { font-size: 1rem; }
  .catalog-file-picker small { font-size: .8125rem; }
  .catalog-selected-file { gap: 10px; }
  .catalog-selected-file-icon { width: 40px; height: 44px; }
  .catalog-import-resources { gap: 8px 16px; }
  .catalog-import-upload-actions { flex-direction: column-reverse; align-items: stretch; padding-top: 0; }
  .catalog-import-upload-actions > p { text-align: center; font-size: .75rem; }
  #catalog-import-clear-pending { width: 100%; }
  .catalog-import-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-import-summary { align-items: flex-start; flex-direction: column; }
  .catalog-import-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-import-row > label:nth-child(2), .catalog-import-row .catalog-import-description, .catalog-import-row-issues { grid-column: 1 / -1; }
  .catalog-import-actions { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
  .catalog-import-actions button { flex: 1; }
  .scanner-card, .qr-card, .order-detail-card, .tracking-modal-card, .order-confirmation-card { max-height: calc(100dvh - 16px); }
  .scanner-frame { margin: 16px 16px 12px; }
  .scanner-status, .scanner-product-result { margin-inline: 16px; }
  .manual-scan { grid-template-columns: 1fr; padding: 16px; }
  .scanner-result-actions > * { flex: 1 1 100px; }
  .qr-content { padding-inline: 16px; }
  .qr-actions { padding: 16px; }
  .qr-actions > button { flex: 1 1 150px; }
  #order-detail-content { padding: 16px; }
  .order-status-form { grid-template-columns: 1fr; padding: 16px; }
  .order-detail-items > div { flex-wrap: wrap; gap: 6px 16px; }
  .store-main, .commercial-footer, .product-site-header, .product-page-main { width: calc(100% - 32px); }
  .store-header { flex-wrap: nowrap; gap: 10px; padding-block: 10px; }
  .store-brand { min-width: 0; gap: 7px; font-size: .9375rem; }
  .store-brand-icon { width: 32px; height: 32px; }
  .store-brand [data-store-name] { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .store-body-actions { width: auto; gap: 8px; }
  .store-body-actions > button { flex: 0 0 auto; min-height: 42px; padding: 7px 10px; font-size: .8rem; }
  .tracking-label-full { display: none; }
  .tracking-label-short { display: inline; }
  .cart-toggle #cart-count { min-width: 25px; min-height: 25px; padding-inline: 6px; }
  .store-hero { min-height: 128px; padding: 14px 0; }
  .store-hero::before { background: linear-gradient(90deg, rgb(12 31 50 / 90%), rgb(12 31 50 / 52%)); }
  .hero-copy { padding-inline: 16px; }
  .hero-copy .eyebrow { margin-bottom: 4px; font-size: .6875rem; }
  .hero-copy h1 { -webkit-line-clamp: 1; max-width: 24ch; font-size: 1.35rem; }
  .hero-copy p { -webkit-line-clamp: 1; max-width: 32ch; margin-top: 4px; font-size: .75rem; }
  .catalog-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
  .catalog-search-input input { min-height: 44px; padding-inline: 38px 10px; font-size: 1rem; }
  .catalog-search-input svg { left: 12px; width: 18px; height: 18px; }
  .catalog-filter-toggle { min-width: 106px; min-height: 44px; padding-inline: 12px; }
  .catalog-section { padding: 14px 0 36px; }
  .catalog-section > .section-title { margin-bottom: 10px; }
  .product-grid { grid-template-columns: 1fr; gap: 12px; }
  .product-card { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); width: 100%; height: 192px; min-height: 192px; max-width: none; justify-self: stretch; border-radius: 12px; }
  .product-card > .product-media,
  .product-card > .product-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 170px;
    max-height: none;
    aspect-ratio: auto;
    padding: 6px;
    background: #EDF1F4;
  }
  .catalog-results:not([data-small-catalog]) .product-card:only-child { width: 100%; max-width: none; }
  .catalog-results[data-small-catalog] { display: block; }
  .catalog-results[data-small-catalog="1"] .product-grid { grid-template-columns: 1fr; }
  .catalog-results[data-small-catalog="2"] .product-grid { grid-template-columns: 1fr; }
  .catalog-results .coming-soon-card { max-width: 440px; margin: var(--space-5) auto 0; padding: var(--space-5); gap: var(--space-3); }
  .coming-soon-card h3 { max-width: none; font-size: 1.125rem; }
  .coming-soon-icon { width: 40px; height: 40px; margin-bottom: 0; }
  .catalog-section .section-title h2 { font-size: 1.2rem; }
  #product-count { margin-left: 4px; }
  .product-body { min-width: 0; padding: 9px 10px; }
  .product-meta { margin-bottom: 2px; }
  .product-meta .category-pill { font-size: .6875rem; }
  .product-body h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 0; overflow: hidden; margin-bottom: 3px; font-size: .875rem; line-height: 1.25; }
  .product-body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; min-height: 0; margin-bottom: 5px; font-size: .7rem; line-height: 1.3; }
  .price-row { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 6px; }
  .price { font-size: 1.15rem; }
  .price-row .stock { padding: 4px 7px; font-size: .6875rem; }
  .product-card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .product-card-actions > * { min-height: 38px; padding-inline: 5px; font-size: .7rem; }
  .add-cart-icon { width: 16px; height: 16px; }
  .cart-panel, .cart-panel.checkout-active { width: 100%; padding: 0 16px max(20px, env(safe-area-inset-bottom)); }
  .cart-header { margin: 0 -16px 20px; padding: 18px 16px; }
  .cart-item { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
  .cart-line-total { grid-column: 2; max-width: none; }
  .checkout-fields { grid-template-columns: 1fr; gap: 14px; }
  .payment-method-card { flex-wrap: wrap; }
  .payment-method-card > span { flex: 1; }
  .payment-method-card em { margin-left: 28px; }
  .checkout-section { padding: 14px; }
  .cart-recommendation-card { gap: 8px; padding: 10px; }
  .cart-recommendation-card > a { flex-basis: 42px; }
  .cart-recommendation-card img { width: 42px; height: 48px; }
  .cart-recommendation-card > button { font-size: .75rem; padding-inline: 8px; }
  .tracking-modal-card, .order-confirmation-card { padding: 24px 16px; }
  .tracking-modal-close { top: 16px; right: 16px; }
  .tracking-form { grid-template-columns: 1fr; }
  .tracking-facts > div { flex-direction: column; gap: 3px; }
  .tracking-facts dd { text-align: left; }
  .order-timeline li { font-size: .6875rem; }
  .confirmation-actions > * { flex-basis: 100%; }
  .product-site-header { padding-block: 12px; }
  .product-cart-link { padding-inline: 10px; }
  .product-page-main { margin: 16px auto 12px; }
  .product-detail { gap: 16px; }
  .product-detail-media { max-height: 280px; aspect-ratio: 4 / 3; }
  .product-detail-info { padding-top: 0; }
  .product-detail-info h1 { margin: 8px 0 10px; font-size: 1.65rem; }
  .product-detail-price { margin-bottom: 10px; font-size: 1.9rem; }
  .product-detail-stock { margin: 0 0 10px; }
  .product-detail-description { margin: 12px 0 14px; }
  .product-purchase-box { padding: 12px; }
  .quantity-selector { margin-top: 8px; margin-bottom: 14px; }
  .product-purchase-actions { grid-template-columns: 1fr; gap: 8px; }
  .product-purchase-actions button { min-height: 44px; }
  .product-whatsapp { margin-top: 8px; }
  .product-trust-signals { gap: 10px; margin-top: 16px; }
  .related-products-section { margin-top: 32px; padding-top: 20px; }
  .related-products { gap: 12px; }
  .related-product-copy { padding: 12px; }
  .related-product-copy button { font-size: .8125rem; }
  .commercial-footer { padding: 12px 0 max(10px, env(safe-area-inset-bottom)); font-size: .75rem; }
  .commercial-footer-line { gap: 3px 6px; }
  .commercial-footer-item::before { margin-right: 6px; }
  .auth-body { padding: 10px; }
  .auth-panel { padding: 20px 18px; }
  .auth-field { gap: 5px; }
  .auth-input-icon { min-height: 46px; }
  .auth-input-icon input, .auth-eye { min-height: 44px; }
  .auth-submit { min-height: 48px; }
  .receipt-overlay { padding: max(8px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)); }
  .receipt-paper { width: min(80mm, calc(100vw - 32px)); padding: 7mm 5mm 10mm; }
}
@media (max-width: 760px) {
  .auth-root { background: #031D38; }
  .auth-body { padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: #031D38; }
  .register-body { overflow-y: auto; }
  .register-page { margin-block: auto; }
  .register-copy p { margin-bottom: 12px; }
  .register-form { gap: 12px; }
  .register-fields { grid-template-columns: 1fr; gap: 12px; }
  .business-type-picker { grid-template-columns: 1fr; gap: 8px; }
  .business-type-picker legend { font-size: 1rem; }
  .business-type-picker > p { margin-bottom: 0; font-size: .78rem; }
  .business-type-picker span { min-height: 0; padding: 11px 36px 11px 12px; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; place-items: initial; align-items: center; gap: 2px 9px; text-align: left; }
  .business-type-picker span > svg { grid-column: 1; grid-row: 1 / 3; width: 30px; height: 30px; align-self: center; }
  .business-type-picker span > strong { grid-column: 2; grid-row: 1; font-size: .84rem; }
  .business-type-picker small { grid-column: 2; grid-row: 2; font-size: .7rem; }
  .register-footer { margin-top: 12px; padding-top: 12px; }
}
@media (max-width: 339px) {
  .cart-toggle-label { display: none; }
  .product-grid,
  .catalog-results[data-small-catalog="2"] .product-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none; animation: none; scroll-behavior: auto; }
  .receipt-paper.is-emerging { animation: none; }
}
/* Hidden and print isolation are functional invariants, not theme overrides. */
[hidden] { display: none !important; }
@media print {
  @page {
    size: auto;
    margin: 0;
  }

  body.printing-receipt,
  body.printing-product-label,
  body:has(#order-confirmation:not([hidden])) {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body:has(#order-confirmation:not([hidden])) > :not(#order-confirmation) {
    display: none !important;
  }

  #order-confirmation:not([hidden]) {
    position: static !important;
    display: block !important;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: visible;
    background: #fff;
  }

  .order-confirmation-card {
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .confirmation-actions {
    display: none !important;
  }

  body.printing-product-label > :not(#qr-modal),
  body.printing-product-label #qr-modal .qr-card > :not(.qr-print-label) {
    display: none !important;
  }

  body.printing-product-label #qr-modal,
  body.printing-product-label #qr-modal .qr-card {
    position: static !important;
    inset: auto !important;
    width: 62mm;
    max-width: 62mm;
    min-height: 0;
    height: auto;
    max-height: none;
    display: block !important;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
  }

  body.printing-product-label .qr-print-label {
    position: static;
    width: 62mm;
    height: auto;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5mm;
    margin: 0;
    padding: 4mm;
    color: #111;
    background: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .qr-print-label strong {
    max-width: 100%;
    font-size: 12pt;
    overflow-wrap: anywhere;
  }

  .qr-print-label img {
    width: 38mm;
    height: 38mm;
  }

  .qr-print-label svg {
    width: 52mm;
    height: 14mm;
  }

  .qr-print-label span {
    max-width: 54mm;
    font-size: 7.5pt;
    overflow-wrap: anywhere;
  }

  .qr-print-label:not([data-variant="combined"]) svg {
    display: none;
  }

  body.printing-receipt > :not(.receipt-overlay) {
    display: none !important;
  }

  body.printing-receipt .receipt-overlay {
    position: static !important;
    width: 80mm;
    max-width: 80mm;
    min-height: 0;
    height: auto;
    display: block !important;
    margin: 0;
    overflow: visible;
    padding: 0;
    background: #fff;
    backdrop-filter: none;
  }

  body.printing-receipt .receipt-dialog,
  body.printing-receipt .receipt-thermal-stage,
  body.printing-receipt .receipt-output {
    width: 80mm;
    max-width: 80mm;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    box-shadow: none;
    animation: none;
  }

  body.printing-receipt .receipt-paper {
    width: 80mm;
    max-width: 80mm;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 7mm 5mm 9mm;
    overflow: visible;
    box-shadow: none;
    animation: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.printing-receipt .receipt-thermal-stage,
  body.printing-receipt .receipt-output,
  body.printing-receipt .receipt-paper {
    display: block !important;
  }

  body.printing-receipt .receipt-paper[data-size="58"] {
    width: 58mm;
    max-width: 58mm;
    padding-inline: 4mm;
  }

  body.printing-receipt .receipt-printer,
  body.printing-receipt .receipt-animation-actions,
  body.printing-receipt .receipt-actions,
  body.printing-receipt .receipt-share-status,
  body.printing-receipt .receipt-paper::after {
    display: none !important;
  }
}

/* Storefront cart and order lookup — compact, responsive purchase surfaces. */
.cart-panel:not([hidden]) {
  width: min(520px, 100%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.cart-panel.checkout-active {
  width: min(700px, 100%);
}

.cart-header {
  position: relative;
  top: auto;
  margin: 0;
  padding: 24px 28px 20px;
  align-items: center;
  border-color: #e4eaf0;
}

.cart-heading,
.cart-title-row {
  min-width: 0;
}

.cart-title-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.cart-header h2 {
  margin: 0;
  color: var(--color-primary);
  font-size: clamp(1.45rem, 3vw, 1.75rem);
  letter-spacing: -.04em;
}

.cart-panel:not(.checkout-active) .cart-step-label {
  display: none;
}

.cart-panel.checkout-active .cart-step-label {
  display: block;
  margin-bottom: 4px;
}

.cart-panel-badge:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-accent);
}

.cart-panel-badge svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-panel-badge strong {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--color-accent);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.cart-close-button,
.tracking-modal-close {
  border-color: transparent;
  border-radius: 9px;
  color: var(--color-primary);
  background: transparent;
}

.cart-close-button:hover,
.tracking-modal-close:hover {
  border-color: var(--color-border);
  background: var(--color-bg);
}

.cart-close-button svg,
.tracking-modal-close svg {
  width: 22px;
  height: 22px;
}

.cart-products-step,
.checkout-form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.cart-products-step {
  display: flex;
  flex-direction: column;
  padding: 0 28px max(26px, env(safe-area-inset-bottom));
}

.checkout-form {
  padding: 2px 28px max(28px, env(safe-area-inset-bottom));
}

.checkout-heading h3 {
  display: none;
}

.cart-panel.is-empty .cart-products-step {
  justify-content: center;
}

.cart-empty-state:not([hidden]) {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto auto auto 1fr;
  justify-items: center;
  align-items: center;
  align-content: center;
  gap: 10px;
  padding: 26px 2px 10px;
  text-align: center;
}

.cart-empty-illustration {
  align-self: end;
  width: 122px;
  height: 122px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  color: var(--color-primary);
  background: linear-gradient(145deg, #f2f7f9, #e8eef2);
}

.cart-empty-illustration svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-empty-state h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -.025em;
}

.cart-empty-state > p {
  max-width: 30ch;
  margin: 0 0 14px;
  font-size: .9rem;
}

.cart-continue-shopping,
.checkout-toggle {
  width: 100%;
  min-height: 54px;
  justify-content: space-between;
  padding-inline: 20px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(120deg, var(--color-primary), #0d3f63);
  box-shadow: 0 10px 24px rgb(22 50 79 / 15%);
  font-size: .9375rem;
}

.cart-continue-shopping:hover,
.checkout-toggle:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--color-primary-hover), #092f4d);
}

.cart-continue-shopping svg,
.checkout-toggle svg {
  width: 20px;
  height: 20px;
}

.cart-empty-benefits {
  align-self: start;
  width: 100%;
  display: grid;
  gap: 20px;
  margin-top: 24px;
  padding: 24px 20px 0;
  border-top: 1px solid #e4eaf0;
  text-align: left;
}

.cart-empty-benefits > div {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.cart-empty-benefits svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-empty-benefits span {
  display: grid;
  gap: 2px;
}

.cart-empty-benefits strong {
  color: var(--color-primary);
  font-size: .875rem;
}

.cart-empty-benefits small {
  color: var(--color-text-muted);
  font-size: .75rem;
  line-height: 1.45;
}

.cart-items {
  gap: 0;
}

.cart-item {
  position: relative;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 8px 14px;
  align-items: start;
  padding: 18px 0;
  border-color: #e4eaf0;
}

.cart-item > .product-media,
.cart-item > .product-image-placeholder {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 82px;
  height: 98px;
  border: 1px solid #edf0f3;
  border-radius: 9px;
  background: #f2f1f0;
}

.cart-item-copy {
  grid-column: 2;
  grid-row: 1 / 3;
  padding-right: 2px;
}

.cart-item h3 {
  margin: 0 0 3px;
  padding-right: 4px;
  color: var(--color-primary);
  font-size: .9rem;
  line-height: 1.3;
}

.cart-item h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-item p.cart-item-category,
.cart-item p.cart-unit-price {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .75rem;
}

.cart-item p.cart-unit-price {
  margin-top: 2px;
  color: var(--color-primary);
  font-weight: 700;
}

.cart-item .stock {
  margin-top: 6px;
  padding: 2px 6px;
  font-size: .6875rem;
}

.cart-item .qty-controls {
  width: fit-content;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}

.cart-item .qty-controls button,
.cart-item .qty-controls span {
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cart-item .qty-controls button:hover:not(:disabled) {
  background: var(--color-accent-soft);
}

.cart-item .qty-controls span {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  font-weight: 700;
}

.cart-item .remove-cart-item {
  grid-column: 3;
  grid-row: 1;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: -5px -7px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-primary);
  background: transparent;
  font-size: 1.35rem;
  font-weight: 300;
}

.cart-item .remove-cart-item:hover {
  color: var(--color-danger-text);
  background: var(--color-danger-soft);
}

.cart-line-total {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  max-width: 112px;
  color: var(--color-primary);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.cart-notice {
  margin-top: 14px;
}

.cart-recommendations {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e4eaf0;
}

.cart-recommendations-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}

.cart-recommendation-items {
  gap: 8px;
}

.cart-recommendation-card {
  padding: 9px;
  border-radius: 9px;
  background: #fbfcfd;
}

.cart-purchase-summary:not([hidden]) {
  display: block;
  margin-top: 12px;
  padding-top: 4px;
  border-top: 1px solid #e4eaf0;
}

.cart-summary {
  gap: 8px;
  padding: 14px 0;
}

.cart-total {
  margin-top: 2px;
  padding-top: 13px;
  color: var(--color-primary);
}

.cart-total strong {
  font-size: 1.55rem;
  letter-spacing: -.035em;
}

.cart-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
}

.cart-trust-line svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-modal {
  padding: clamp(12px, 4vw, 36px);
}

.tracking-modal-card {
  width: min(700px, 100%);
  max-height: calc(100dvh - clamp(24px, 8vw, 72px));
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid rgb(217 225 231 / 70%);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgb(12 31 50 / 24%);
}

.tracking-modal-close {
  top: 22px;
  right: 22px;
  border-color: var(--color-border);
  background: #fff;
}

.tracking-modal-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 50%;
  color: var(--color-accent);
  background: #eaf6f6;
}

.tracking-modal-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-modal-copy {
  padding-right: 50px;
}

.tracking-modal-copy h2 {
  margin: 0 0 7px;
  color: var(--color-primary);
  font-size: clamp(1.55rem, 4vw, 2rem);
  letter-spacing: -.04em;
}

.tracking-modal-copy p {
  margin: 0;
  font-size: .95rem;
}

.tracking-form {
  gap: 14px;
  margin-top: 26px;
}

.tracking-form label {
  gap: 7px;
  font-size: .85rem;
}

.tracking-form input {
  min-height: 52px;
  border-radius: 9px;
  background: #fff;
  font-size: 16px;
}

.tracking-form > button {
  min-height: 54px;
  margin-top: 2px;
  border-radius: 9px;
  font-size: .9375rem;
}

.tracking-form > button svg {
  width: 22px;
  height: 22px;
}

.tracking-result {
  margin-top: 24px;
  padding-top: 22px;
}

.tracking-support:not([hidden]) {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #e4eaf0;
}

.tracking-support > svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-support > div {
  display: grid;
  gap: 3px;
}

.tracking-support strong {
  color: var(--color-primary);
  font-size: .9rem;
}

.tracking-support p {
  margin: 0;
  font-size: .8rem;
}

.tracking-support a {
  width: fit-content;
  margin-top: 5px;
  color: var(--color-accent-text);
  font-size: .85rem;
  font-weight: 700;
}

.tracking-support a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  .cart-panel:not([hidden]),
  .cart-panel.checkout-active {
    width: 100%;
  }

  .cart-header {
    padding: max(17px, env(safe-area-inset-top)) 18px 16px;
  }

  .cart-products-step,
  .checkout-form {
    padding-inline: 18px;
  }

  .cart-empty-state:not([hidden]) {
    padding-top: 18px;
  }

  .cart-empty-illustration {
    width: 108px;
    height: 108px;
    margin-bottom: 8px;
  }

  .cart-empty-benefits {
    gap: 16px;
    margin-top: 18px;
    padding: 20px 10px 0;
  }

  .cart-item {
    grid-template-columns: 70px minmax(0, 1fr) 34px;
    gap: 7px 11px;
    padding: 16px 0;
  }

  .cart-item > .product-media,
  .cart-item > .product-image-placeholder {
    width: 70px;
    height: 86px;
  }

  .cart-line-total {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: end;
    margin-top: -29px;
  }

  .cart-item .remove-cart-item {
    margin-right: -5px;
  }

  .cart-item .qty-controls button,
  .cart-item .qty-controls span {
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .tracking-modal {
    align-items: center;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .tracking-modal-card {
    width: 100%;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: 24px 18px;
    border-radius: 15px;
  }

  .tracking-modal-close {
    top: 14px;
    right: 14px;
  }

  .tracking-modal-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 13px;
  }

  .tracking-modal-icon svg {
    width: 28px;
    height: 28px;
  }

  .tracking-modal-copy {
    padding-right: 42px;
  }

  .tracking-modal-copy h2 {
    font-size: 1.55rem;
  }

  .tracking-form {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 22px;
  }

  .tracking-form > button {
    grid-column: 1;
  }

  .tracking-facts > div {
    flex-direction: column;
    gap: 3px;
  }

  .tracking-facts dd {
    text-align: left;
  }
}

@media (max-width: 390px) {
  .cart-header {
    padding-inline: 15px;
  }

  .cart-header h2 {
    font-size: 1.4rem;
  }

  .cart-products-step,
  .checkout-form {
    padding-inline: 15px;
  }

  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr) 32px;
    gap-inline: 9px;
  }

  .cart-item > .product-media,
  .cart-item > .product-image-placeholder {
    width: 64px;
    height: 80px;
  }

  .cart-item .qty-controls button,
  .cart-item .qty-controls span {
    min-width: 36px;
  }

  .cart-continue-shopping,
  .checkout-toggle {
    padding-inline: 17px;
  }
}

@supports (padding: max(0px)) {
  .admin-header { padding-top: max(var(--space-5), env(safe-area-inset-top)); padding-bottom: max(var(--space-5), env(safe-area-inset-bottom)); }
  .store-header, .product-site-header { padding-top: max(14px, env(safe-area-inset-top)); }
}

/* Administration visual system — desktop hierarchy with the existing compact mobile flow. */
.admin-body { background: radial-gradient(circle at 72% 0, #FFFFFF 0, #F6F9FB 38%, var(--color-bg) 72%); }
.admin-layout { padding: 30px 32px 48px 274px; }
.admin-header { width: 242px; padding: 24px 14px; border-right-color: rgb(255 255 255 / 10%); background: linear-gradient(180deg, #163D62 0%, var(--color-primary) 54%, #102C47 100%); }
.admin-brand-icon { width: 48px; height: 48px; padding: 7px; border-radius: 12px; box-shadow: 0 6px 18px rgb(0 0 0 / 12%); }
.admin-heading { gap: 12px; padding-inline: 2px; }
.admin-heading h1 { font-size: 1.08rem; }
.admin-heading > div > span { font-size: .78rem; }
.admin-navigation { margin-top: 38px; }
.admin-menu { gap: 5px; }
.navigation-label { margin: 0 12px 7px; text-transform: none; }
.admin-menu .tab-button { min-height: 48px; border-radius: 8px; color: rgb(255 255 255 / 82%); font-size: .9rem; }
.admin-menu .tab-button.active { background: linear-gradient(135deg, #0F9C9E, #0EB5B2); box-shadow: 0 8px 20px rgb(3 24 43 / 20%); }
.admin-menu .tab-button.active::before { top: 10px; bottom: 10px; left: 0; width: 3px; }
.admin-menu .logout-tab-button { margin-top: 18px; }
.admin-header-copy { border-top: 1px solid rgb(255 255 255 / 16%); margin-inline: 12px; }
.admin-menu-backdrop { display: none; }
.admin-menu-backdrop[hidden] { display: none; }
.admin-view { max-width: 1500px; gap: 16px; }
.admin-page-heading { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 70px; padding: 0 2px 4px; }
.admin-view-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; color: var(--color-accent-text); background: linear-gradient(145deg, #E6F8F7, var(--color-accent-soft)); }
.admin-view-icon svg, .kpi-card-icon svg, .commercial-kpi-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-page-heading-copy { min-width: 0; }
.admin-page-heading .eyebrow { margin-bottom: 2px; }
.admin-page-heading h2 { margin: 0; color: var(--color-primary); font-size: clamp(1.7rem, 2.3vw, 2.05rem); letter-spacing: -.035em; }
.admin-page-heading p { margin: 3px 0 0; color: var(--color-text-muted); font-size: .9rem; }
.products-toolbar { grid-template-columns: 64px minmax(0, 1fr) auto; }
.products-toolbar-actions { justify-self: end; }
.products-toolbar .products-message { grid-column: 1 / -1; margin: 0; }
.admin-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); justify-self: end; }
.admin-page-heading .admin-heading-action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 0; min-height: 46px; padding: 9px 24px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap;
}
.admin-page-heading .admin-heading-action.btn-primary { border-color: var(--color-primary); }
.admin-page-heading .admin-heading-action[hidden] { display: none; }
@media (min-width: 761px) {
  .products-toolbar-actions .admin-heading-action,
  .admin-heading-actions .admin-heading-action { width: 180px; }
}
.commercial-report-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.platform-heading-actions { min-width: 0; display: grid; justify-items: end; gap: 5px; }
.platform-heading-actions .form-message { max-width: 320px; margin: 0; font-size: .68rem; line-height: 1.25; text-align: right; }
.platform-heading-actions .form-message:empty { display: none; }
#pos-cash-open-panel { grid-template-columns: minmax(0, 1fr); }

.admin-summary-disclosure > summary { display: none; }
.admin-summary-alerts { color: var(--color-text-muted); font-size: .75rem; font-weight: 500; }
.admin-summary-alerts strong { color: var(--color-primary); }
.kpi-grid { gap: 12px; }
.kpi-card { min-height: 108px; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; border-color: #DFE8EE; box-shadow: 0 4px 18px rgb(22 50 79 / 4%); }
.kpi-card-icon, .commercial-kpi-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--color-accent-text); background: var(--color-accent-soft); }
.kpi-card > div { display: grid; gap: 2px; min-width: 0; }
.kpi-card > div > span { color: var(--color-text-muted); font-size: .82rem; }
.kpi-card > div > strong { color: var(--color-primary); font-size: 1.72rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-card small { color: var(--color-text-muted); font-size: .72rem; }
.kpi-card-warning { background: linear-gradient(135deg, #FFFFFF, #FFF9EF); }
.kpi-card-warning .kpi-card-icon { color: #B45309; background: #FFF1D6; }
.kpi-card-danger { background: linear-gradient(135deg, #FFFFFF, #FFF5F5); }
.kpi-card-danger .kpi-card-icon { color: var(--color-danger-text); background: var(--color-danger-soft); }
.badge-danger { color: var(--color-danger-text); background: var(--color-danger-soft); }
.products-list-panel, .orders-panel, .staff-panel { border-color: #DDE7ED; box-shadow: 0 8px 28px rgb(22 50 79 / 5%); }
.admin-catalog-controls { padding: 16px; }
.admin-products-search-input input { min-height: 48px; padding-left: 44px; font-size: 1rem; }
.admin-table-head, .orders-table-head, .staff-table-head { background: #F7FAFC; }
.admin-item, .order-item { min-height: 76px; }
.admin-actions .edit-button { border-color: var(--color-border); }

.sale-view { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: 18px; }
.sale-view.cash-only { grid-template-columns: minmax(0, 1fr); }
.sale-view.cash-only > .sale-tools-column { width: min(100%, 920px); }
.sale-view > .admin-page-heading { grid-column: 1 / -1; }
.sale-scan-panel, .pos-peripherals, .sale-cart-panel { padding: 24px; border-top: 1px solid var(--color-border); box-shadow: 0 8px 28px rgb(22 50 79 / 5%); }
.sale-scan-panel .section-title h2, .sale-cart-panel .section-title h2 { font-size: 1.25rem; }
.sale-device-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.sale-device-actions > button { width: 100%; min-height: 48px; }
.sale-scan-button { margin-top: 0; }
.pos-sync-status { border: 1px solid #BFE5E3; }
.sale-summary { padding-block: 20px; }
.sale-summary strong { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.sale-payment-fieldset { margin-top: 14px; }

.orders-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; }
.orders-search { position: relative; display: block; }
.orders-search svg { position: absolute; z-index: 1; top: 50%; left: 14px; width: 20px; height: 20px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; }
.orders-search input { min-height: 48px; padding-left: 44px; font-size: 1rem; }
.order-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.order-filter-chips button { min-height: 40px; padding: 7px 14px; border-color: transparent; background: #F1F5F9; }
.order-filter-chips button.active { color: var(--color-accent-text); border-color: #C5E8E6; background: var(--color-accent-soft); }
.order-mobile-status { display: none; }
.orders-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .78rem; }
.orders-pagination[hidden] { display: none; }
.orders-pagination > div { display: flex; gap: 5px; }
.orders-pagination button { min-width: 36px; min-height: 36px; padding: 5px 9px; }
.orders-pagination button.active { color: var(--color-accent-text); border-color: #C5E8E6; background: var(--color-accent-soft); }

.commercial-dashboard-meta { justify-items: end; }
.commercial-dashboard { padding: 0; border: 0; background: transparent; box-shadow: none; }
.commercial-kpi-grid { gap: 12px; }
.commercial-kpi-grid article { min-height: 116px; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; border: 1px solid #DFE8EE; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 4px 18px rgb(22 50 79 / 4%); }
.commercial-kpi-grid article > div { display: grid; gap: 2px; min-width: 0; }
.commercial-kpi-grid article > div > span { color: var(--color-text-muted); font-size: .82rem; }
.commercial-kpi-grid article > div > strong { color: var(--color-primary); font-size: 1.72rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.commercial-kpi-grid article > div > small { color: var(--color-text-muted); font-size: .72rem; }
.commercial-kpi-icon { font-size: 1.5rem; font-weight: 750; }
.commercial-report-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 12px; margin-top: 14px; padding-top: 0; border-top: 0; }
.commercial-report-card { padding: 18px; border-color: #DDE7ED; background: var(--color-surface); box-shadow: 0 5px 20px rgb(22 50 79 / 4%); }
.commercial-report-card h3 { margin-bottom: 14px; font-size: 1rem; }
.commercial-chart-card { min-height: 330px; }
.commercial-sales-chart { max-height: none; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 0; }
.commercial-bars { min-width: 100%; height: 252px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(38px, 1fr); align-items: end; gap: 7px; }
.commercial-bar { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 7px; text-align: center; }
.commercial-bar > span { display: flex; align-items: flex-end; justify-content: center; min-height: 0; border-bottom: 1px solid var(--color-border); background: repeating-linear-gradient(to top, transparent 0 51px, #EEF3F6 52px 53px); }
.commercial-bar svg { width: min(28px, 72%); height: 100%; display: block; overflow: visible; }
.commercial-bar rect { fill: var(--color-accent); }
.commercial-bar small { color: var(--color-text-muted); font-size: .66rem; white-space: nowrap; }
.commercial-channel-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.commercial-channel-row + .commercial-channel-row { margin-top: 14px; }
.commercial-channel-row > div { display: flex; justify-content: space-between; gap: 10px; grid-column: 1 / -1; }
.commercial-channel-row > div span { color: var(--color-text); font-weight: 650; }
.commercial-channel-row > div strong { color: var(--color-primary); font-size: .75rem; }
.commercial-channel-row progress { width: 100%; height: 8px; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: #E8EEF3; }
.commercial-channel-row progress::-webkit-progress-bar { background: #E8EEF3; }
.commercial-channel-row progress::-webkit-progress-value { background: var(--color-accent); }
.commercial-channel-row progress::-moz-progress-bar { background: var(--color-accent); }
.commercial-channel-row small { color: var(--color-text-muted); font-size: .72rem; }
.commercial-top-sellers-card { grid-column: 1 / -1; }
.commercial-top-sellers-card .commercial-ranking { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; }
.commercial-top-sellers-card .commercial-ranking-row { padding: 4px 14px; border-left: 1px solid var(--color-border); }
.commercial-top-sellers-card .commercial-ranking-row:first-child { padding-left: 0; border-left: 0; }

.staff-view-heading { grid-template-columns: 64px minmax(0, 1fr) auto; }
.staff-panel > .section-title { border-bottom: 0; }
.staff-table-head, .staff-item { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 92px 120px; align-items: center; gap: 16px; padding: 12px 20px; }
.staff-table-head { border-block: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .75rem; font-weight: 600; }
.staff-item { min-height: 76px; }
.staff-person { display: flex; align-items: center; gap: 14px; min-width: 0; }
.staff-contact { display: grid; gap: 3px; min-width: 0; font-size: .82rem; overflow-wrap: anywhere; }
.staff-contact small { color: var(--color-text-muted); }

.store-preferences { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 14px; padding: 0; overflow: visible; }
.store-logo-editor, .store-appearance-fields, .store-live-preview, .store-commerce-fields { min-width: 0; display: block; padding: 0; }
.store-logo-editor { border: 0; border-right: 1px solid var(--color-border); border-radius: 0; background: var(--color-surface); }
.store-preference-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px 10px; list-style: none; color: var(--color-primary); cursor: pointer;
}
.store-preference-summary::-webkit-details-marker { display: none; }
.store-preference-summary > span { display: grid; gap: 2px; }
.store-preference-summary strong { font-size: 1rem; }
.store-preference-summary small { color: var(--color-text-muted); font-size: .7rem; font-weight: 500; }
.store-preference-content { padding: 0 22px 22px; }
.store-logo-content { display: grid; align-content: start; justify-items: center; gap: 14px; text-align: center; }
.store-logo-editor img { width: 124px; height: 124px; }
.store-appearance-fields { border-right: 1px solid var(--color-border); }
.store-appearance-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 14px; }
.store-section-copy { grid-column: 1 / -1; margin: 0; color: var(--color-text-muted); font-size: .8125rem; }
.store-theme-field { grid-column: 1 / -1; }
.store-field-label { display: block; margin-bottom: 6px; color: var(--color-text); font-size: .875rem; font-weight: 600; }
.store-theme-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.store-theme-presets button { display: grid; gap: 6px; min-width: 0; min-height: 72px; padding: 7px; border-color: var(--color-border); background: var(--color-surface); font-size: .68rem; }
.store-theme-presets button.active { color: var(--color-accent-text); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.store-live-preview { background: #FBFDFE; }
.store-commerce-fields { grid-column: 1 / -1; border-top: 1px solid var(--color-border); }
.store-commerce-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.store-commerce-wide { grid-column: 1 / -1; }
.store-field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.store-field-heading small { color: var(--color-text-muted); font-size: .7rem; font-weight: 600; }
.store-option-check { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.store-option-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); }
.store-option-check span { display: grid; gap: 2px; }
.store-option-check small { color: var(--color-text-muted); font-weight: 500; }
.store-preview-content { display: grid; align-content: start; gap: 14px; }
.store-preview-browser { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: 0 10px 26px rgb(22 50 79 / 8%); }
.store-preview-browser-bar { display: flex; gap: 5px; padding: 8px; border-bottom: 1px solid var(--color-border); background: #F4F7F9; }
.store-preview-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #FF6B62; }
.store-preview-browser-bar i:nth-child(2) { background: #F6BD41; }
.store-preview-browser-bar i:nth-child(3) { background: #38C85A; }
.store-preferences-actions { padding: 16px 22px; background: var(--color-surface); }

/* Canonical administration controls. Viewport-dependent grids live only in their media queries below. */
.admin-catalog-controls .catalog-filter-toggle {
  min-width: 148px;
  color: var(--color-primary);
  border-color: var(--color-border);
  background: var(--color-surface);
}
.admin-catalog-controls .catalog-filter-toggle:hover { border-color: #AABBC8; background: var(--color-bg); }
.admin-product-identity > img, .admin-thumb { width: 46px; height: 48px; }
.admin-actions { position: relative; display: flex; justify-content: flex-end; gap: 6px; }
.admin-actions svg, .admin-actions-menu svg { display: block; width: 17px; height: 17px; }
.admin-actions-menu { position: relative; }
.admin-actions-menu > summary {
  width: 40px; height: 40px; display: grid; place-items: center; list-style: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-primary); cursor: pointer;
}
.admin-actions-menu > summary::-webkit-details-marker { display: none; }
.admin-actions-menu > summary:hover { border-color: #AABBC8; background: var(--color-bg); }
.admin-actions-menu[open] > summary { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgb(15 139 141 / 10%); }
.admin-actions-menu > div {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 170px;
  display: grid; gap: 4px; padding: 6px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-md);
}
.admin-actions-menu button { width: 100%; min-height: 38px; justify-content: flex-start; padding: 7px 9px; border-color: transparent; background: transparent; }
.admin-actions-menu .edit-button { border-color: var(--color-border); background: var(--color-surface); }
.admin-actions-menu .edit-button:hover,
.admin-actions-menu .edit-button:focus-visible,
.admin-actions-menu [data-action="qr"],
.staff-actions-menu .staff-enable-button {
  color: var(--color-accent-text); border-color: #B9DDDC; background: var(--color-accent-soft);
}
.admin-actions-menu .delete-button,
.staff-actions-menu .staff-disable-button {
  color: var(--color-danger-text); border-color: #F4CECE; background: var(--color-danger-soft);
}
.admin-actions-menu .delete-button:hover,
.admin-actions-menu .delete-button:focus-visible,
.staff-actions-menu .staff-disable-button:hover,
.staff-actions-menu .staff-disable-button:focus-visible { border-color: #F4BBBB; background: var(--color-danger-soft); }
.admin-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-top: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: .78rem;
}
.admin-pagination[hidden] { display: none; }
.admin-pagination > div { display: flex; gap: 5px; }
.admin-pagination button { min-width: 36px; min-height: 36px; padding: 5px 9px; }
.admin-pagination button.active { color: var(--color-accent-text); border-color: #C5E8E6; background: var(--color-accent-soft); }
.sale-cart-panel .admin-empty-state { gap: 6px; padding: 18px 12px 20px; }
.sale-cart-panel .empty-icon { width: 30px; height: 30px; margin-bottom: 2px; }
.order-heading h3 { font-size: .8rem; }
.commercial-bars { grid-auto-columns: minmax(24px, 1fr); gap: 4px; }
.commercial-bar > span { height: 220px; }
.staff-actions { display: flex; justify-content: flex-end; }
.staff-actions-menu button { min-width: 0; }
.store-logo-actions label.secondary-button,
.store-preferences-actions a.secondary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 14px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary);
  font-size: .875rem; font-weight: 600; line-height: 1.3; text-align: center;
}
.store-logo-actions label.secondary-button:hover,
.store-preferences-actions a.secondary-button:hover { border-color: #AABBC8; background: var(--color-bg); }
.store-color-field { gap: 6px; }
.store-color-control { min-height: 48px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.store-color-control input[type="color"] { width: 48px; min-height: 36px; height: 36px; padding: 2px; border: 0; }
.store-color-control output { color: var(--color-primary); font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums; }
@media (min-width: 1201px) {
  .admin-layout { padding-left: 252px; }
  .admin-header { width: 224px; }
  .admin-table-head, .admin-item { grid-template-columns: minmax(240px, 1.35fr) minmax(82px, .4fr) 112px 82px 64px; }
  .admin-item { min-height: 70px; padding-block: 10px; }
  .orders-table-head, .order-item { grid-template-columns: minmax(215px, 1.15fr) minmax(155px, 1fr) minmax(250px, 1.5fr) minmax(82px, .55fr) 100px; }
  .order-heading h3 { overflow-wrap: normal; word-break: normal; }
  .staff-table-head, .staff-item { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 92px 64px; }
  .staff-item { min-height: 70px; padding-block: 10px; }
}

@media (max-width: 1200px) and (min-width: 761px) {
  .admin-layout { padding-left: 220px; padding-right: 22px; }
  .admin-header { width: 196px; padding-inline: 12px; }
  .admin-heading h1 { font-size: .95rem; }
  .admin-menu .tab-button { padding-inline: 10px; font-size: .82rem; }
  .admin-page-heading { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .admin-view-icon { width: 54px; height: 54px; }
  .kpi-card, .commercial-kpi-grid article { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 13px; }
  .kpi-card-icon, .commercial-kpi-icon { width: 42px; height: 42px; }
  .store-preferences { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); }
  .store-live-preview { grid-column: 1 / -1; border-top: 1px solid var(--color-border); }
  .store-logo-editor { border-right: 1px solid var(--color-border); }
  .store-appearance-fields { border-right: 0; }
  .admin-table-head, .orders-table-head, .staff-table-head { display: none; }
  .admin-item { grid-template-columns: minmax(0, 1fr) minmax(100px, .55fr) 64px; gap: 10px 16px; }
  .admin-product-identity { grid-column: 1 / 3; }
  .admin-product-price { grid-column: 1; }
  .admin-product-stock { grid-column: 2; }
  .admin-product-state { grid-column: 1 / 3; }
  .admin-actions { grid-column: 3; grid-row: 1 / 3; }
  .order-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px; }
  .order-heading { grid-column: 1; }
  .order-customer { grid-column: 2; grid-row: 1 / 3; }
  .order-status { grid-column: 1 / 3; }
  .order-total { grid-column: 1; grid-row: 2; }
  .order-actions { grid-column: 3; grid-row: 1 / 3; }
  .order-heading h3 { overflow-wrap: anywhere; }
  .staff-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px; }
  .staff-person, .staff-contact { grid-column: 1 / -1; }
  .staff-item > .badge { grid-column: 1; justify-self: start; }
  .staff-actions { grid-column: 2; grid-row: 3; justify-self: end; }
}

@media (max-width: 1000px) and (min-width: 761px) {
  .commercial-report-grid { grid-template-columns: 1fr; }
  .commercial-chart-card { grid-row: auto; }
  .commercial-top-sellers-card { grid-column: 1; }
}

@media (max-width: 760px) {
  .admin-layout { padding: 86px 16px 24px; }
  .admin-header { inset: 0 0 auto; width: 100%; height: 72px; flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--color-primary-hover); }
  .admin-brand-icon { width: 42px; height: 42px; }
  .admin-heading h1 { font-size: .95rem; }
  .admin-navigation { position: relative; margin-top: 0; }
  .admin-menu-button { display: grid; }
  .admin-menu {
    position: fixed; z-index: 52; top: 72px; right: 0; bottom: 0; width: min(320px, 86vw);
    align-content: start; overflow-y: auto; padding: 14px 12px max(18px, env(safe-area-inset-bottom));
    border: 0; border-left: 1px solid rgb(255 255 255 / 18%); border-radius: 0;
    background: linear-gradient(180deg, #173D61, #102F4D); box-shadow: -18px 0 40px rgb(3 24 43 / 28%);
  }
  .admin-menu-backdrop { position: fixed; z-index: 49; inset: 72px 0 0; display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: rgb(7 24 39 / 42%); backdrop-filter: blur(2px); }
  .admin-menu-backdrop[hidden] { display: none; }
  .admin-navigation-open { overflow: hidden; }
  .admin-menu .tab-button { min-height: 48px; }
  .navigation-label, .admin-header-copy { display: none; }
  .admin-subscription-summary-desktop { display: none !important; }
  .admin-menu .admin-subscription-summary-mobile:not([hidden]) { width: 100%; margin: 10px 0 2px; padding: 12px; display: grid; border: 1px solid rgb(255 255 255 / 16%); border-radius: 9px; background: rgb(255 255 255 / 5%); }
  .admin-menu .admin-subscription-summary-mobile:hover { background: rgb(255 255 255 / 9%); }
  .admin-menu .logout-tab-button { margin-top: 8px; }
  .admin-view { gap: 8px; scroll-margin-top: 86px; }
  .admin-page-heading, .products-toolbar, .staff-view-heading { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 7px; padding-inline: 2px; }
  .admin-view-icon { display: none; }
  .admin-page-heading h2 { font-size: 1.55rem; }
  .admin-page-heading p { margin-top: 2px; font-size: .82rem; }
  .products-toolbar-actions, .staff-view-heading > button { width: 100%; justify-self: stretch; }
  .products-toolbar-actions > button, .staff-view-heading > button { flex: 1 1 150px; }
  .admin-heading-actions, .platform-heading-actions { width: 100%; justify-self: stretch; }
  .admin-heading-actions > .device-heading-action { display: flex; flex: 1 1 140px; }
  .admin-heading-actions > .device-heading-action[hidden] { display: none; }
  .admin-heading-actions > .admin-heading-action,
  .admin-heading-actions > .device-heading-action > .admin-heading-action { flex: 1 1 140px; }
  .platform-heading-actions > .admin-heading-action { width: 100%; }
  .platform-heading-actions .form-message { max-width: none; text-align: left; }
  .admin-summary-disclosure { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 4px 18px rgb(22 50 79 / 4%); }
  .admin-summary-disclosure > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; list-style: none; color: var(--color-primary); font-size: .8rem; font-weight: 700; cursor: pointer; }
  .admin-summary-disclosure > summary::-webkit-details-marker { display: none; }
  .admin-summary-disclosure > summary::after { width: 8px; height: 8px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg) translateY(-2px); transition: transform var(--motion); }
  .admin-summary-disclosure[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
  .admin-summary-alerts { min-width: 0; margin-left: auto; overflow: hidden; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
  .admin-summary-strip { padding: 0 6px 6px; }
  .kpi-grid, .commercial-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-card, .commercial-kpi-grid article { min-height: 68px; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 9px; }
  .kpi-card-icon, .commercial-kpi-icon { width: 30px; height: 30px; border-radius: 9px; }
  .kpi-card-icon svg, .commercial-kpi-icon svg { width: 18px; height: 18px; }
  .kpi-card > div > strong, .commercial-kpi-grid article > div > strong { font-size: 1.15rem; }
  .kpi-card > div > span, .commercial-kpi-grid article > div > span { font-size: .7rem; line-height: 1.2; }
  .kpi-card small, .commercial-kpi-grid article > div > small { display: none; }
  .admin-table-head, .orders-table-head, .staff-table-head { display: none; }
  .admin-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px 8px; padding: 10px 12px; }
  .admin-product-identity { grid-column: 1 / 3; grid-row: 1; }
  .admin-product-identity > img, .admin-product-identity > .admin-thumb { width: 42px; height: 44px; }
  .admin-product-info h3 { margin-bottom: 2px; font-size: .86rem; line-height: 1.25; }
  .admin-product-info p { font-size: .7rem; }
  .admin-product-info p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-product-price { grid-column: 1; grid-row: 2; }
  .admin-product-state { grid-column: 2; grid-row: 2; justify-self: start; }
  .admin-product-stock { grid-column: 3; grid-row: 2; max-width: 100%; justify-self: end; white-space: nowrap; }
  .admin-product-state, .admin-product-stock { padding: 4px 7px; font-size: .66rem; }
  .admin-actions { grid-column: 3; grid-row: 1; width: 44px; align-self: start; justify-self: end; }
  .admin-actions-menu { width: 44px; }
  .admin-actions-menu > summary { width: 44px; height: 44px; }
  .admin-actions-menu > div { right: 0; top: calc(100% + 6px); bottom: auto; }
  .sale-view { grid-template-columns: 1fr; gap: 8px; }
  .sale-view > .admin-page-heading { grid-column: 1; }
  .sale-tools-column { gap: 8px; }
  .sale-scan-panel, .pos-peripherals, .sale-cart-panel { padding: 14px; }
  .sale-device-actions { gap: 8px; margin-top: 10px; }
  .sale-device-actions > button { min-height: 44px; }
  .orders-controls { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .orders-search input { min-height: 44px; }
  .order-filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .order-filter-chips button { min-height: 38px; flex: 0 0 auto; padding: 6px 12px; }
  .order-item { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; min-height: 0; padding: 12px 14px; }
  .order-heading { grid-column: 1; grid-row: 1; }
  .order-heading h3 { max-width: 100%; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .order-total { grid-column: 2; grid-row: 1; align-self: start; max-width: 112px; text-align: right; }
  .order-customer, .order-status { display: none; }
  .order-mobile-status { grid-column: 1; grid-row: 2; display: inline-flex; justify-self: start; }
  .order-actions { grid-column: 2; grid-row: 2; }
  .order-actions button { width: auto; min-height: 38px; padding: 6px 10px; }
  .orders-pagination { align-items: flex-start; flex-direction: column; }
  .orders-pagination > div { width: 100%; justify-content: flex-end; }
  .products-list-panel .admin-empty-state, .orders-panel .empty-state, .staff-panel .admin-empty-state { padding: 22px 14px; }
  .commercial-dashboard-meta { width: 100%; justify-items: start; }
  .commercial-periods { justify-content: flex-start; flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .commercial-periods button { flex: 0 0 auto; }
  #commercial-metrics-status { padding-left: 0; text-align: left; }
  .commercial-kpi-grid article { min-height: 64px; }
  .commercial-kpi-icon { font-size: 1rem; }
  .commercial-report-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; padding-top: 8px; }
  .commercial-chart-card { min-height: 250px; }
  .commercial-bars { height: 184px; }
  .commercial-bar > span { height: 160px; }
  .commercial-top-sellers-card { grid-column: 1; }
  .commercial-top-sellers-card .commercial-ranking { grid-template-columns: 1fr; }
  .commercial-top-sellers-card .commercial-ranking-row { padding: 5px 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .commercial-top-sellers-card .commercial-ranking-row:first-child { border-top: 0; }
  .staff-item { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; min-height: 0; padding: 12px 14px; }
  .staff-person { grid-column: 1; grid-row: 1; gap: 10px; }
  .staff-avatar { width: 38px; height: 38px; }
  .staff-contact { grid-column: 1 / -1; grid-row: 2; }
  .staff-item > .badge { grid-column: 1; grid-row: 3; justify-self: start; }
  .staff-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .staff-actions-menu { width: 44px; }
  .store-preferences { grid-template-columns: 1fr; }
  .store-logo-editor, .store-appearance-fields, .store-live-preview, .store-commerce-fields { padding: 0; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .store-preference-section:last-of-type { border-bottom: 0; }
  .store-preference-summary { min-height: 52px; padding: 9px 12px; }
  .store-preference-summary::after { width: 8px; height: 8px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg) translateY(-2px); transition: transform var(--motion); }
  .store-preference-section[open] > .store-preference-summary::after { transform: rotate(225deg) translate(-2px, -2px); }
  .store-preference-content { padding: 0 12px 12px; }
  .store-logo-content { grid-template-columns: 82px minmax(0, 1fr); justify-items: stretch; align-items: center; text-align: left; }
  .store-logo-content > p { grid-column: 1 / -1; margin: 0; }
  .store-logo-editor img { width: 82px; height: 82px; }
  .store-logo-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .store-logo-actions > * { min-width: 0; }
  .store-appearance-content { grid-template-columns: 1fr 1fr; gap: 11px; }
  .store-commerce-content { grid-template-columns: 1fr; gap: 10px; }
  .store-commerce-wide { grid-column: auto; }
  .store-theme-presets { grid-auto-flow: column; grid-auto-columns: 112px; grid-template-columns: none; overflow-x: auto; padding: 1px 1px 5px; scroll-snap-type: x proximity; }
  .store-theme-presets button { min-height: 64px; }
  .store-theme-presets button { scroll-snap-align: start; }
.store-preferences-actions { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(160px, 1.3fr); gap: 8px; padding: 12px 14px; }
  .store-preferences-actions > a, .store-preferences-actions > button { min-width: 0; }
  .store-preferences-actions .form-message { grid-column: 1 / -1; text-align: left; }
  .admin-pagination { align-items: flex-start; flex-direction: column; }
  .admin-pagination > div { width: 100%; justify-content: flex-end; }
}

@media (max-width: 520px) {
  .admin-layout { padding-inline: 12px; }
  .admin-header { padding-inline: 14px; }
  .admin-item, .order-item { padding: 14px; }
  .store-appearance-content { grid-template-columns: 1fr 1fr; }
}

/* Servicios V1: agenda compacta y responsive, sin una segunda interfaz de caja. */
.appointments-view { gap: 14px; }
.appointments-toolbar { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; }
.appointments-range-buttons { display: flex; gap: 5px; padding: 4px; border-radius: 10px; background: var(--color-bg); }
.appointments-range-buttons button { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 8px; color: var(--color-text-muted); background: transparent; font-weight: 700; cursor: pointer; }
.appointments-range-buttons button.active { color: white; background: var(--color-primary); }
.appointments-date-navigation { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.appointments-date-navigation strong { min-width: 230px; text-transform: capitalize; }
.appointments-date-navigation button { min-width: 38px; padding-inline: 8px; font-size: 1.25rem; }
.appointments-panel { padding: 18px; }
.appointments-list, .appointments-day, .appointments-day > div { display: grid; gap: 9px; }
.appointments-day + .appointments-day { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.appointments-day h3 { margin: 0; color: var(--color-text-muted); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.appointment-card { display: grid; grid-template-columns: 58px minmax(180px, 1.5fr) minmax(140px, .65fr) minmax(220px, auto); align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: 11px; background: var(--color-surface); }
.appointment-card[data-status="completed"] { border-left-color: #16a36a; }
.appointment-card[data-status="cancelled"], .appointment-card[data-status="no_show"] { opacity: .7; border-left-color: var(--color-text-muted); }
.appointment-card > time { font-size: 1rem; font-weight: 800; }
.appointment-card-main, .appointment-card-meta { display: grid; gap: 3px; min-width: 0; }
.appointment-card-main span, .appointment-card-main small, .appointment-card-meta small { overflow: hidden; color: var(--color-text-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.appointment-card-main a { width: fit-content; color: var(--color-primary); font-size: .75rem; font-weight: 700; text-decoration: none; }
.appointment-card-meta { justify-items: start; }
.appointment-status { padding: 4px 8px; border-radius: 999px; color: var(--color-primary); background: var(--color-accent-soft); font-size: .7rem; font-weight: 800; }
.appointment-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.appointment-card-actions button { min-height: 32px; padding: 5px 9px; font-size: .7rem; }
.appointment-availability-settings { padding: 0; overflow: hidden; }
.appointment-availability-settings > summary { cursor: pointer; list-style: none; padding: 15px 18px; }
.appointment-availability-settings > summary span { display: grid; gap: 3px; }
.appointment-availability-settings > summary small { color: var(--color-text-muted); font-weight: 400; }
.appointment-availability-body { display: grid; gap: 12px; padding: 0 18px 18px; }
.appointment-availability-body > label { display: grid; gap: 5px; max-width: 360px; font-size: .78rem; font-weight: 700; }
.appointment-time-zone-row { display: flex; align-items: end; gap: 8px; }
.appointment-time-zone-row label { display: grid; flex: 1; gap: 5px; max-width: 360px; font-size: .78rem; font-weight: 700; }
.appointment-availability-days { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 7px; }
.appointment-availability-day { display: grid; align-content: start; gap: 8px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 9px; }
.appointment-availability-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; }
.appointment-availability-day-heading button { min-height: 30px; padding: 4px 8px; font-size: .68rem; }
.appointment-availability-day [data-availability-intervals] { display: grid; gap: 6px; }
.appointment-availability-day [data-availability-intervals] > small { color: var(--color-text-muted); }
.appointment-availability-interval { display: grid; grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr) 30px; align-items: center; gap: 6px; }
.appointment-availability-interval .icon-button { min-width: 30px; min-height: 30px; padding: 3px; }
.appointment-availability-save { justify-self: end; }
.appointment-customer-history { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border-top: 1px solid var(--color-border); background: var(--color-bg); }
.appointment-customer-history > header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.appointment-customer-history h4 { margin: 0 0 7px; font-size: .76rem; text-transform: uppercase; }
.appointment-customer-history-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-top: 1px solid var(--color-border); font-size: .72rem; }
.appointment-customer-history-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-customer-history > button { grid-column: 1 / -1; justify-self: start; }
.appointment-drawer-card { width: min(720px, 100%); max-height: calc(var(--app-viewport-height, 100dvh) - 40px); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--color-surface); }
.appointment-form { display: grid; gap: 14px; padding: 18px; }
.appointment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.appointment-form-grid label { display: grid; gap: 5px; font-size: .78rem; font-weight: 700; }
.appointment-form-grid .wide { grid-column: 1 / -1; }
.appointment-form textarea { resize: vertical; }
.product-service-staff-field { margin: 0; padding: 13px; border: 1px solid var(--color-border); border-radius: 10px; }
.product-service-staff-field legend { padding: 0 5px; font-weight: 700; }
.product-service-staff-field > small { display: block; margin-top: 7px; color: var(--color-text-muted); }
.product-service-staff { display: flex; flex-wrap: wrap; gap: 8px; }
.product-service-staff label { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; }

@media (max-width: 1050px) {
  .appointment-card { grid-template-columns: 52px minmax(160px, 1fr) minmax(120px, .6fr); }
  .appointment-card-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .appointments-toolbar { grid-template-columns: 1fr; }
  .appointments-range-buttons { justify-content: center; }
  .appointments-date-navigation strong { min-width: 0; flex: 1; }
  .appointment-availability-days { grid-template-columns: 1fr; }
  .appointment-time-zone-row { align-items: stretch; flex-direction: column; }
  .appointment-card { grid-template-columns: 48px minmax(0, 1fr); }
  .appointment-card-meta { grid-column: 2; }
  .appointment-card-actions { grid-column: 1 / -1; }
  .appointment-customer-history { grid-template-columns: 1fr; }
  .appointment-customer-history > header, .appointment-customer-history > button { grid-column: 1; }
  .appointment-form-grid { grid-template-columns: 1fr; }
  .appointment-form-grid .wide { grid-column: auto; }
}

@media (max-width: 520px) {
  .appointment-availability-interval { grid-template-columns: 1fr auto 1fr 30px; }
  .appointment-customer-history-row { grid-template-columns: 1fr auto; }
  .appointment-customer-history-row span { grid-column: 1 / -1; grid-row: 2; }
}
.digital-downloads { display: grid; gap: 12px; margin: 16px 0; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-success-soft); }
.digital-downloads a { display: inline-flex; justify-content: center; text-decoration: none; }
.digital-downloads small { color: var(--color-text-muted); }

/* Numbered storefront pagination. */
.catalog-page-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.catalog-page-nav button { min-width: 40px; min-height: 40px; padding: 6px 10px; }
.catalog-page-nav button.active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.catalog-page-ellipsis { min-width: 24px; color: var(--color-text-muted); text-align: center; }

/* Compact product details when media or quantity controls add no value. */
.product-quantity-controls[hidden] { display: none; }
.product-detail.is-digital-product .product-purchase-box { padding: 16px; }
.product-detail.is-digital-product .product-purchase-actions button { min-height: 50px; }

@media (min-width: 901px) {
  .product-page-main { margin-top: 28px; margin-bottom: 32px; }
  .product-detail { gap: 40px; }
  .product-detail.product-without-image { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 32px; }
  .product-detail.product-without-image .product-detail-media { min-height: 300px; max-height: 340px; aspect-ratio: auto; }
}

@media (max-width: 900px) {
  .product-detail.product-without-image .product-detail-media { min-height: 220px; max-height: 280px; aspect-ratio: 4 / 3; }
}

/* Denser order tracking with the primary download action above the details. */
.tracking-modal-heading { display: flex; align-items: center; gap: 14px; padding-right: 54px; }
.tracking-modal-heading .tracking-modal-icon { width: 54px; height: 54px; flex: 0 0 54px; margin: 0; }
.tracking-modal-heading .tracking-modal-icon svg { width: 28px; height: 28px; }
.tracking-modal-heading .tracking-modal-copy { min-width: 0; padding-right: 0; }
.tracking-modal-heading .tracking-modal-copy h2 { margin: 0; }
.tracking-modal-heading + .tracking-form { margin-top: 20px; }
.tracking-form-help { grid-column: 1 / -1; margin: -4px 0 0; color: var(--color-text-muted); font-size: .78rem; }
.tracking-new-search { width: fit-content; min-height: 38px; margin-top: 14px; padding: 6px 12px; color: var(--color-primary); background: var(--color-bg); }
.tracking-modal-card.has-result .tracking-modal-icon { display: none; }
.tracking-modal-card.has-result .tracking-modal-copy p { display: none; }
.tracking-modal-card.has-result .tracking-result { margin-top: 14px; padding-top: 14px; }
.tracking-result > p { margin: 8px 0 0; }
.tracking-result .order-timeline { margin: 16px 0; }
.tracking-result .tracking-facts { gap: 7px; padding: 12px 14px; }
.tracking-result .tracking-items, .tracking-result .tracking-totals { gap: 8px; margin: 14px 0; }
.tracking-result .digital-downloads { gap: 10px; margin: 12px 0 16px; padding: 14px; }
.tracking-result .digital-downloads a { min-height: 50px; align-items: center; padding: 10px 14px; }
.tracking-orders-heading { display: grid; gap: 4px; margin-bottom: 12px; }
.tracking-orders-heading p { margin: 0; color: var(--color-text-muted); }
.tracking-order-list { display: grid; gap: 8px; }
.tracking-order-list > button { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 12px 14px; text-align: left; background: #fff; }
.tracking-order-list > button > span { min-width: 0; display: grid; gap: 3px; }
.tracking-order-list > button > span:last-child { flex: 0 0 auto; text-align: right; }
.tracking-order-list small { color: var(--color-text-muted); font-weight: 500; }

@media (max-width: 620px) {
  .catalog-page-nav { gap: 4px; }
  .catalog-page-nav button { min-width: 38px; min-height: 38px; padding-inline: 8px; }
  .tracking-form-help { grid-column: 1; }
  .tracking-modal-heading { gap: 11px; padding-right: 46px; }
  .tracking-modal-heading .tracking-modal-icon { width: 48px; height: 48px; flex-basis: 48px; }
  .tracking-modal-heading .tracking-modal-copy h2 { font-size: 1.45rem; }
  .tracking-order-list > button { align-items: flex-start; }
}

/* Personalización y operación comercial separadas por responsabilidad. */
#settings-view,
#commerce-view {
  max-width: none;
  margin-inline: 0;
}
.store-preferences {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start; gap: 14px; padding: 0; overflow: visible;
  border: 0; background: transparent; box-shadow: none;
}
.store-personalization-editor,
.store-personalization-preview-column { min-width: 0; display: grid; align-content: start; gap: 12px; }
.store-personalization-editor > .store-preference-section,
.store-personalization-preview-column > .store-preference-section {
  min-width: 0; overflow: hidden; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.store-logo-editor, .store-appearance-fields, .store-live-preview, .store-hero-editor {
  padding: 0; border-right: 0; border-bottom: 0;
}
.store-personalization-preview-column { position: sticky; top: 16px; align-self: start; }
.store-live-preview { position: static; }
.store-preference-summary { min-height: 60px; padding: 14px 16px 9px; cursor: default; }
.store-preference-summary strong { font-size: 1rem; }
.store-preference-summary small { font-size: .75rem; }
.store-preference-content { padding: 0 16px 16px; }
.store-logo-content { grid-template-columns: minmax(210px, 1fr) minmax(190px, .82fr); align-items: stretch; gap: 12px; text-align: left; }
.store-logo-picker { display: grid; justify-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); background: #FBFDFE; }
.store-logo-editor img { width: 112px; height: 112px; object-fit: contain; }
.store-logo-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: 7px; }
.store-image-recommendations { padding: 14px; border-radius: var(--radius-sm); background: var(--color-bg); }
.store-image-recommendations strong { color: var(--color-primary); font-size: .82rem; }
.store-image-recommendations ul { display: grid; gap: 7px; margin: 9px 0 0; padding-left: 18px; color: var(--color-text-muted); font-size: .76rem; line-height: 1.35; }
.store-appearance-content { grid-template-columns: minmax(0, 1.35fr) minmax(170px, .65fr); gap: 12px; }
.store-theme-field { grid-row: 1 / 4; }
.store-theme-presets { gap: 7px; }
.store-theme-presets button { min-height: 66px; }
.store-hero-content { display: grid; grid-template-columns: minmax(210px, .85fr) minmax(240px, 1.15fr); gap: 12px; }
.store-hero-copy-fields { display: grid; align-content: start; gap: 9px; }
.store-hero-image-picker { min-width: 0; display: grid; align-content: start; gap: 8px; }
.store-hero-image-picker img { width: 100%; height: 116px; display: block; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.store-hero-image-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.store-hero-image-actions > * { flex: 1 1 150px; }
.store-hero-image-picker > small { color: var(--color-text-muted); font-size: .7rem; }
.store-preview-summary { align-items: flex-start; }
.store-preview-modes { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }
.store-preview-modes button { min-height: 32px; padding: 5px 10px; border-color: transparent; background: transparent; font-size: .72rem; }
.store-preview-modes button.active { color: var(--color-accent-text); border-color: var(--color-accent); background: var(--color-surface); }
.store-preview-content { padding-top: 7px; }
.store-preview-browser { transition: max-width var(--motion); }
.store-preferences-heading-actions {
  min-width: 0; display: grid; grid-template-columns: auto auto; align-items: center;
  justify-content: end; gap: 6px 8px;
}
.store-preferences-heading-actions > a,
.store-preferences-heading-actions > button {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 12px; white-space: nowrap;
}
.store-preferences-heading-actions > a {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-primary); background: var(--color-surface);
  font-size: .8rem; font-weight: 600; line-height: 1.3; text-align: center;
}
.store-preferences-heading-actions > a:hover { border-color: #AABBC8; background: var(--color-bg); }
.store-preferences-heading-actions .form-message {
  grid-column: 1 / -1; max-width: 420px; margin: 0;
  font-size: .68rem; line-height: 1.25; text-align: right;
}
.store-preferences-heading-actions .form-message:empty { display: none; }

.commerce-settings-view { gap: 14px; }
.commerce-settings-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.commerce-settings-summary.payments-only { grid-template-columns: minmax(0, 1fr); }
.commerce-settings-kpi { min-width: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; }
.commerce-settings-kpi > span,
.commerce-settings-card > header > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; color: var(--color-primary); background: #EEF7FB; }
.commerce-settings-kpi:first-child > span { color: var(--color-accent-text); background: var(--color-accent-soft); }
.commerce-settings-kpi svg,
.commerce-settings-card > header svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.commerce-settings-kpi > div { min-width: 0; display: grid; gap: 1px; }
.commerce-settings-kpi small { color: var(--color-text); font-size: .78rem; }
.commerce-settings-kpi strong { color: var(--color-primary); font-size: 1.35rem; line-height: 1.1; }
.commerce-settings-kpi p { margin: 0; overflow: hidden; color: var(--color-text-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.store-commerce-form { display: grid; gap: 12px; }
.commerce-settings-card { padding: 16px; }
.commerce-settings-card > header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.commerce-settings-card > header > span { width: 46px; height: 46px; flex: 0 0 46px; }
.commerce-settings-card > header svg { width: 24px; height: 24px; }
.commerce-settings-card h3 { margin: 0; color: var(--color-primary); font-size: 1.05rem; }
.commerce-settings-card header p { margin: 2px 0 0; color: var(--color-text-muted); font-size: .78rem; }
.commerce-delivery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.commerce-payment-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.commerce-payment-method { min-width: 0; }
.commerce-bank-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.commerce-bank-fields p { grid-column: 1 / -1; margin: 0; color: var(--color-text-muted); font-size: .8rem; }
.manual-payment-details { margin-top: 16px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.manual-payment-details h4 { margin: 0 0 12px; }
.manual-payment-details dl { display: grid; gap: 10px; margin: 0; }
.manual-payment-details dl > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.manual-payment-details dt { color: var(--color-text-muted); }
.manual-payment-details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.manual-payment-details button { padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); cursor: pointer; }
.manual-payment-details p { margin: 12px 0 0; font-size: .85rem; }
.manual-payment-details a { display: inline-block; margin-top: 12px; }
.manual-payment-copy-status { display: block; min-height: 1em; margin-top: 8px; font-size: .8rem; }
.receipt-paper .manual-payment-details { padding: 10px 0; border: 0; border-top: 1px dashed #555; border-radius: 0; background: transparent; }
.receipt-paper .manual-payment-details h4 { font-size: 13px; }
.receipt-paper .manual-payment-details dt { color: #444; }
.receipt-paper .manual-payment-details p, .receipt-paper .manual-payment-details a { font-size: 12px; }
@media print { .manual-payment-details button, .manual-payment-details a, .manual-payment-copy-status { display: none !important; } }
@media (max-width: 620px) { .commerce-bank-fields { grid-template-columns: 1fr; } }
.commerce-settings-card .store-option-check { min-height: 58px; background: #FBFDFE; }
.commerce-settings-heading-actions { min-width: 0; display: grid; justify-items: end; gap: 5px; }
.commerce-settings-heading-actions > button { min-width: 180px; min-height: 38px; padding: 7px 12px; white-space: nowrap; }
.commerce-settings-heading-actions .form-message { max-width: 320px; margin: 0; font-size: .68rem; line-height: 1.25; text-align: right; }
.commerce-settings-heading-actions .form-message:empty { display: none; }

/* Compact desktop density keeps personalization visible on common laptop viewports. */
@media (min-width: 1101px) {
  #settings-view { gap: 10px; }
  #settings-view > .admin-page-heading {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 50px;
    padding-bottom: 0;
  }
  #settings-view > .admin-page-heading .admin-view-icon { width: 48px; height: 48px; border-radius: 12px; }
  #settings-view > .admin-page-heading .admin-view-icon svg { width: 24px; height: 24px; }
  #settings-view > .admin-page-heading h2 { font-size: 1.75rem; }
  #settings-view > .admin-page-heading p { margin-top: 2px; font-size: .8rem; }

  #settings-view .store-preferences { gap: 10px; }
  #settings-view .store-personalization-editor,
  #settings-view .store-personalization-preview-column { gap: 8px; }
  #settings-view .store-preference-summary { min-height: 38px; padding: 6px 12px 4px; }
  #settings-view .store-preference-summary strong { font-size: .88rem; }
  #settings-view .store-preference-summary small { font-size: .65rem; }
  #settings-view .store-preference-content { padding: 0 12px 10px; }

  #settings-view .store-logo-content {
    grid-template-columns: minmax(170px, .9fr) minmax(170px, 1.1fr);
    gap: 8px;
  }
  #settings-view .store-logo-picker { gap: 5px; padding: 7px; }
  #settings-view .store-logo-editor img { width: 64px; height: 64px; }
  #settings-view .store-logo-actions { gap: 5px; }
  #settings-view .store-logo-actions .secondary-button { min-height: 30px; padding: 5px 9px; font-size: .72rem; }
  #settings-view .store-image-recommendations { padding: 9px 10px; }
  #settings-view .store-image-recommendations strong { font-size: .72rem; }
  #settings-view .store-image-recommendations ul {
    gap: 3px;
    margin-top: 5px;
    padding-left: 16px;
    font-size: .66rem;
    line-height: 1.25;
  }

  #settings-view .store-appearance-content { gap: 7px 10px; }
  #settings-view .store-theme-presets { gap: 5px; }
  #settings-view .store-theme-presets button { min-height: 46px; gap: 3px; padding: 4px; font-size: .6rem; }
#settings-view .store-field-label,
  #settings-view .store-appearance-content label,
  #settings-view .store-hero-content label { gap: 2px; font-size: .72rem; }
  #settings-view .store-color-control {
    min-height: 34px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    padding: 3px 8px 3px 3px;
  }
  #settings-view .store-color-control input[type="color"] { width: 34px; min-height: 26px; height: 26px; }
  #settings-view .store-appearance-content select,
  #settings-view .store-hero-content input { min-height: 34px; padding: 6px 9px; font-size: .76rem; }

  #settings-view .store-hero-content { gap: 8px; }
  #settings-view .store-hero-copy-fields { gap: 4px; }
  #settings-view .store-hero-image-picker { gap: 5px; }
  #settings-view .store-hero-image-picker img { height: 86px; }
  #settings-view .store-hero-image-actions { gap: 5px; }
  #settings-view .store-hero-image-actions .secondary-button { min-height: 30px; padding: 5px 8px; font-size: .68rem; }
  #settings-view .store-hero-image-picker > small { font-size: .62rem; }

}

@media (max-width: 1100px) {
  #settings-view > .admin-page-heading { grid-template-columns: 54px minmax(0, 1fr); }
  #settings-view > .admin-page-heading .store-preferences-heading-actions { grid-column: 2; justify-content: start; }
  #commerce-view > .admin-page-heading { grid-template-columns: 54px minmax(0, 1fr); }
  #commerce-view > .admin-page-heading .commerce-settings-heading-actions { grid-column: 2; justify-items: start; }
  .store-preferences { grid-template-columns: 1fr; }
  .store-personalization-preview-column { position: static; grid-column: 1; }
  .commerce-settings-summary { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  #settings-view > .admin-page-heading { grid-template-columns: minmax(0, 1fr); }
  #settings-view > .admin-page-heading .store-preferences-heading-actions { grid-column: 1; }
  #commerce-view > .admin-page-heading { display: contents; }
  #commerce-view > .admin-page-heading .admin-page-heading-copy { order: 0; padding-inline: 2px; }
  #commerce-view > .commerce-settings-summary { order: 1; }
  #commerce-view > .store-commerce-form { order: 2; }
  #commerce-view > .admin-page-heading .commerce-settings-heading-actions {
    order: 3;
    width: 100%; min-width: 0; grid-column: 1; justify-items: stretch;
  }
  .commerce-settings-heading-actions > button { width: 100%; min-width: 0; min-height: 44px; }
  .commerce-settings-heading-actions .form-message { max-width: none; text-align: left; }
  .store-preferences { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .store-personalization-editor, .store-personalization-preview-column { gap: 8px; }
  .store-personalization-editor > .store-preference-section,
  .store-personalization-preview-column > .store-preference-section { border-bottom: 1px solid var(--color-border); }
  .store-preference-summary { min-height: 50px; padding: 9px 12px; cursor: pointer; }
  .store-preference-content { padding: 0 12px 12px; }
  .store-logo-content, .store-appearance-content, .store-hero-content { grid-template-columns: 1fr; }
  .store-theme-field { grid-row: auto; }
  .store-logo-content { text-align: left; }
  .store-image-recommendations { display: none; }
  .store-preview-summary { align-items: center; }
  .store-preview-modes { display: none; }
  .store-preferences-heading-actions { width: 100%; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); justify-content: stretch; }
  .store-preferences-heading-actions > a,
  .store-preferences-heading-actions > button { min-width: 0; padding-inline: 8px; font-size: .75rem; }
  .store-preferences-heading-actions .form-message { text-align: left; }
  .commerce-settings-view { gap: 8px; }
  .commerce-settings-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .commerce-settings-summary > :last-child { grid-column: 1 / -1; }
  .commerce-settings-kpi { grid-template-columns: 32px minmax(0, 1fr); gap: 7px; min-height: 64px; padding: 8px; }
  .commerce-settings-kpi > span { width: 32px; height: 32px; border-radius: 9px; }
  .commerce-settings-kpi svg { width: 18px; height: 18px; }
  .commerce-settings-kpi small { font-size: .62rem; line-height: 1.15; }
  .commerce-settings-kpi strong { font-size: 1rem; }
  .commerce-settings-kpi p { display: none; }
  .commerce-delivery-grid, .commerce-payment-grid { grid-template-columns: 1fr; gap: 8px; }
  .store-commerce-wide { grid-column: 1; }
  .commerce-settings-card { padding: 10px; }
  .commerce-settings-card > header { gap: 9px; margin-bottom: 8px; }
  .commerce-settings-card > header > span { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
  .commerce-settings-card > header svg { width: 20px; height: 20px; }
  .commerce-settings-card h3 { font-size: 1rem; }
  .commerce-settings-card header p { margin-top: 1px; font-size: .72rem; }
  .commerce-settings-card label { gap: 4px; font-size: .78rem; }
  .commerce-settings-card input:not([type="checkbox"]) { min-height: 42px; padding-block: 8px; }
  .commerce-settings-card .store-option-check { align-items: center; min-height: 0; padding: 9px 10px; }
  .commerce-settings-card .store-option-check input { margin-top: 0; }
  .commerce-settings-card .store-option-check strong { font-size: .82rem; }
  .commerce-settings-card .store-option-check small { font-size: .69rem; line-height: 1.3; }
  .store-field-heading { justify-content: flex-start; }
  .store-field-heading small { padding: 2px 6px; border-radius: var(--radius-pill); background: var(--color-bg); font-size: .62rem; }
}

@media (max-width: 380px) {
  .commerce-settings-summary { grid-template-columns: 1fr; }
  .commerce-settings-summary > :last-child { grid-column: 1; }
  .commerce-settings-kpi { grid-template-columns: 38px minmax(0, 1fr); }
  .commerce-settings-kpi p { display: block; }
}

/* Restaurante V1: comparte POS, pedidos, caja e inventario; sólo añade la capa operativa. */
.restaurant-view { max-width: 1600px; }
.restaurant-view > .admin-page-heading { align-items: center; }
.restaurant-table-settings {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.5fr) auto;
  align-items: end;
  gap: 14px;
  padding: 18px;
}
.restaurant-table-settings h3, .restaurant-table-settings p { margin: 0; }
.restaurant-table-settings p { margin-top: 4px; color: var(--color-text-muted); font-size: .84rem; }
.restaurant-table-settings textarea { min-height: 76px; resize: vertical; }
.restaurant-operation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 1.15fr) minmax(320px, .9fr);
  align-items: start;
  gap: 16px;
}
.restaurant-operation-panel { min-width: 0; padding: 18px; }
.restaurant-table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.restaurant-table-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 126px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}
.restaurant-table-card > div { display: grid; gap: 3px; }
.restaurant-table-card span, .restaurant-table-card small { color: var(--color-text-muted); font-size: .76rem; }
.restaurant-table-card > b { color: var(--color-primary); font-size: .9rem; }
.restaurant-table-card > button { grid-column: 1 / -1; width: 100%; min-height: 36px; }
.restaurant-table-card.is-free { border-color: color-mix(in srgb, var(--color-success, #16815d) 35%, var(--color-border)); }
.restaurant-table-card.is-occupied { background: color-mix(in srgb, var(--color-accent-soft) 45%, var(--color-surface)); }
.restaurant-command-list, .restaurant-kitchen-list { display: grid; gap: 10px; }
.restaurant-command-card, .restaurant-kitchen-card, .restaurant-history-card {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}
.restaurant-command-card > header, .restaurant-kitchen-card > header, .restaurant-history-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.restaurant-command-card > header > div, .restaurant-history-card > span { display: grid; gap: 2px; }
.restaurant-command-card small, .restaurant-history-card small { color: var(--color-text-muted); font-size: .72rem; }
.restaurant-command-card ul, .restaurant-kitchen-card ul { display: grid; gap: 5px; margin: 12px 0; padding: 0; list-style: none; }
.restaurant-command-card li, .restaurant-kitchen-card li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: .84rem; }
.restaurant-command-card li > span, .restaurant-kitchen-card li > span { display: grid; gap: 2px; }
.restaurant-command-card li small, .restaurant-kitchen-card li small { color: var(--color-text-muted); font-size: .72rem; }
.restaurant-command-card li strong { font-size: .78rem; }
.restaurant-item-side { justify-items: end; flex: 0 0 auto; }
.restaurant-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.restaurant-item-actions button { min-height: 28px; padding: 4px 7px; border: 1px solid var(--color-border); border-radius: 7px; color: var(--color-text); background: var(--color-surface); font-size: .68rem; font-weight: 700; cursor: pointer; }
.restaurant-item-actions button:not(.is-destructive) { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.restaurant-item-actions button.is-destructive { color: var(--color-danger, #b42318); }
.restaurant-command-card li.is-voided, .restaurant-kitchen-card li.is-voided { opacity: .62; }
.restaurant-command-card li.is-voided b, .restaurant-kitchen-card li.is-voided b { text-decoration: line-through; }
.restaurant-command-note, .restaurant-kitchen-card > p {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  font-size: .8rem;
}
.restaurant-command-card > footer { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.restaurant-command-card > footer button { flex: 1 1 120px; min-height: 36px; padding: 7px 10px; font-size: .75rem; }
.restaurant-kitchen-note { margin: -2px 0 12px; color: var(--color-text-muted); font-size: .75rem; line-height: 1.4; }
.restaurant-kitchen-card > header span {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
  font-size: .72rem;
  font-weight: 700;
}
.restaurant-kitchen-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.restaurant-kitchen-actions button { min-height: 42px; padding: 7px; border: 1px solid var(--color-border); border-radius: 8px; font-size: .75rem; font-weight: 700; }
.restaurant-kitchen-actions button:not(:disabled) { color: white; border-color: var(--color-primary); background: var(--color-primary); cursor: pointer; }
.restaurant-history { margin-top: 16px; border-top: 1px solid var(--color-border); padding-top: 12px; }
.restaurant-history summary { cursor: pointer; font-weight: 700; }
.restaurant-history-list { margin: 10px 0; }
.restaurant-history-card { margin-bottom: 7px; padding: 10px 12px; }
.restaurant-pos-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr);
  gap: 10px 14px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
}
.restaurant-pos-context > div { display: grid; gap: 2px; grid-column: 1 / -1; }
.restaurant-pos-context small { color: var(--color-text-muted); }
.restaurant-pos-context fieldset { display: flex; gap: 16px; margin: 0; padding: 0; border: 0; }
.restaurant-pos-context fieldset legend { margin-bottom: 7px; font-size: .78rem; font-weight: 700; }
.restaurant-pos-context fieldset label { display: flex; align-items: center; gap: 6px; font-size: .84rem; }
.restaurant-pos-context > label { display: grid; gap: 5px; font-size: .78rem; font-weight: 700; }
.restaurant-pos-context textarea { resize: vertical; }
.restaurant-pos-context .text-button { justify-self: start; }
.restaurant-takeout-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-column: 1 / -1; }
.restaurant-takeout-fields label { display: grid; gap: 5px; font-size: .78rem; font-weight: 700; }

.product-toggle-field { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; }
.product-toggle-field span { display: grid; gap: 3px; }
.product-toggle-field small { color: var(--color-text-muted); font-weight: 400; }
.product-modifiers-editor { padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; }
.product-modifiers-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.product-modifiers-editor > header > div { display: grid; gap: 3px; }
.product-modifiers-editor small { color: var(--color-text-muted); }
#product-modifier-rows { display: grid; gap: 8px; }
.product-modifier-row { display: grid; grid-template-columns: minmax(160px, 1fr) 130px auto 40px; align-items: end; gap: 8px; }
.product-modifier-row > label { display: grid; gap: 3px; font-size: .72rem; }
.product-modifier-row .product-modifier-active { display: flex; align-items: center; min-height: 42px; }
.restaurant-item-card { max-width: 560px; }
.restaurant-item-modifiers { display: grid; gap: 8px; margin: 14px 0; }
.restaurant-modifier-option { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--color-border); border-radius: 10px; }
.restaurant-modifier-option span { display: flex; justify-content: space-between; gap: 12px; width: 100%; }
.restaurant-item-card > label { display: grid; gap: 6px; }
.restaurant-item-card > .restaurant-item-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 1280px) {
  .restaurant-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .restaurant-kitchen-panel { grid-column: 1 / -1; }
  .restaurant-kitchen-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .restaurant-operation-grid, .restaurant-table-settings { grid-template-columns: 1fr; }
  .restaurant-kitchen-panel { grid-column: auto; }
  .restaurant-kitchen-list { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .restaurant-takeout-fields, .product-modifier-row { grid-template-columns: 1fr; }
  .restaurant-table-grid, .restaurant-pos-context { grid-template-columns: 1fr; }
  .restaurant-operation-panel { padding: 12px; }
  .restaurant-command-card > footer { display: grid; }
  .restaurant-pos-context > div { grid-column: 1; }
}

.public-booking { max-width: 1180px; margin: 24px auto; padding: 28px; border: 1px solid var(--color-border, #dce3ea); border-radius: 22px; background: #fff; }
.public-booking > header { margin-bottom: 20px; }
.public-booking > header h2 { margin: 4px 0 6px; }
.public-booking > header p { margin: 0; color: var(--color-text-muted, #627184); }
.public-booking-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.public-booking-form label, .public-booking-form fieldset { display: grid; gap: 7px; font-weight: 700; }
.public-booking-form select, .public-booking-form input, .public-booking-form textarea { width: 100%; border: 1px solid #ced8e2; border-radius: 10px; padding: 11px 12px; background: #fff; color: #142b43; font: inherit; }
.public-booking-form fieldset { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }
.public-booking-slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.public-booking-slots p { margin: 8px 0; color: var(--color-text-muted, #627184); font-weight: 400; }
.public-booking-slots button { border: 1px solid #b8c7d5; border-radius: 999px; background: #fff; padding: 9px 14px; color: #16324f; font: inherit; font-weight: 700; cursor: pointer; }
.public-booking-slots button.active { border-color: #0aa6a6; background: #e6fafa; color: #087b7b; }
.public-booking-customer { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.public-booking-form > .btn-primary { justify-self: start; }
.public-booking-form > .form-message { align-self: center; margin: 0; }
.public-booking-confirmation { padding: 20px; border-radius: 14px; background: #eaf8f3; color: #174c3d; }
.public-booking-confirmation strong { font-size: 1.15rem; }
.public-booking-confirmation p { margin: 6px 0 0; }

@media (max-width: 720px) {
  .public-booking { margin: 16px; padding: 20px; }
  .public-booking-form, .public-booking-customer { grid-template-columns: 1fr; }
}

/* Public storefronts: one shared frontend with a distinct experience per business type. */
.store-primary-nav { display: flex; align-items: center; justify-content: center; gap: 26px; margin-left: auto; }
.store-primary-nav a { color: var(--color-text-muted); font-size: .875rem; font-weight: 700; }
.store-primary-nav a:hover { color: var(--color-primary); text-decoration: none; }
.store-booking-link { min-height: 44px; padding-inline: 20px; }
.catalog-category-tabs { display: flex; gap: 10px; margin: 14px 0 0; overflow-x: auto; scrollbar-width: none; }
.catalog-category-tabs::-webkit-scrollbar { display: none; }
.catalog-category-tabs button { min-width: max-content; min-height: 42px; padding: 8px 20px; border-color: var(--color-border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-surface) 90%, var(--color-accent-soft)); color: var(--color-primary); font-weight: 700; }
.catalog-category-tabs button.active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-surface); }

/* Public empty states stay compact and communicate the storefront type. */
.store-body .empty-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border: 0; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-text); }
.store-body .empty-icon::before {
  width: 22px;
  height: 22px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 7 8-4 8 4-8 4-8-4Zm0 0v10l8 4 8-4V7M12 11v10' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 7 8-4 8 4-8 4-8-4Zm0 0v10l8 4 8-4V7M12 11v10' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-business-type="restaurant"] .empty-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16h16M6 16a6 6 0 0 1 12 0M12 8V5M3 20h18' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16h16M6 16a6 6 0 0 1 12 0M12 8V5M3 20h18' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body[data-business-type="services"] .empty-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h14v15H5zM8 3v4M16 3v4M5 9h14M9 14h6M12 11v6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h14v15H5zM8 3v4M16 3v4M5 9h14M9 14h6M12 11v6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.store-body .catalog-empty-state { gap: 7px; padding: 28px 20px 34px; }
.catalog-is-empty .catalog-section { padding-top: 14px; padding-bottom: 22px; }
.catalog-is-empty .catalog-section > .section-title { margin-bottom: 2px; }
.catalog-is-empty .catalog-results { min-height: 0; }
.catalog-is-empty .catalog-pagination { display: none; }

body[data-business-type="restaurant"] .store-hero { min-height: 300px; padding-block: 34px; }
body[data-business-type="restaurant"] .store-hero::before { background: linear-gradient(90deg, rgb(25 11 5 / 82%), rgb(25 11 5 / 56%) 47%, rgb(25 11 5 / 5%) 74%); }
body[data-business-type="restaurant"] .store-hero-background { object-position: center; }
body[data-business-type="restaurant"] .hero-copy { max-width: 620px; padding-inline: 44px; }
body[data-business-type="restaurant"] .hero-copy h1 { font-size: clamp(2rem, 4vw, 3.45rem); }
body[data-business-type="restaurant"] .hero-copy p { max-width: 46ch; font-size: .95rem; }
body[data-business-type="restaurant"] .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body[data-business-type="restaurant"] .product-card { border-radius: 14px; }
body[data-business-type="restaurant"] .product-media img { object-fit: cover; }
body[data-business-type="restaurant"] .price-row .stock { display: none; }
body[data-business-type="restaurant"] .product-card-actions { grid-template-columns: 1fr; }
body[data-business-type="restaurant"] .product-card-actions .view-product-link { display: none; }
body[data-business-type="restaurant"] .add-cart-button { width: 100%; }
body[data-business-type="restaurant"] .store-hero-link { border: 1px solid var(--color-accent); color: var(--color-on-primary); background: var(--color-accent); }
body[data-business-type="restaurant"] .store-hero-link:hover { border-color: var(--color-primary); color: var(--color-on-primary); background: var(--color-primary); }
body[data-business-type="restaurant"] .cart-toggle #cart-count,
body[data-business-type="restaurant"] .catalog-filter-count { color: var(--color-on-primary); background: var(--color-accent); }

body[data-business-type="services"] .store-header { border-bottom: 1px solid var(--color-border); }
body[data-business-type="services"] .store-hero { min-height: 272px; padding-block: 28px; background: var(--color-surface); }
body[data-business-type="services"] .store-hero::before { background: linear-gradient(90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 92%) 32%, rgb(255 255 255 / 38%) 58%, transparent 76%); }
body[data-business-type="services"] .store-hero-background { object-position: center; }
body[data-business-type="services"] .hero-copy { max-width: 620px; padding-inline: 44px; }
body[data-business-type="services"] .hero-copy .eyebrow { color: var(--color-accent-text); }
body[data-business-type="services"] .hero-copy h1 { display: block; max-width: 17ch; overflow: visible; color: var(--color-primary); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.95rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.03; text-wrap: balance; -webkit-line-clamp: unset; }
body[data-business-type="services"] .hero-copy p { max-width: 48ch; color: var(--color-text-muted); font-size: .9rem; }
body[data-business-type="services"] .store-hero-link { border: 1px solid var(--color-primary); color: var(--color-surface); background: var(--color-primary); }
body[data-business-type="services"] .store-hero-link:hover { color: var(--color-surface); background: var(--color-primary-hover); }

.services-showcase { padding: 38px 0 12px; }
.services-showcase-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 390px); align-items: end; gap: 28px; margin-bottom: 20px; }
.services-showcase-header h2 { margin: 4px 0 5px; color: var(--color-primary); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; }
.services-showcase-header p { margin: 0; color: var(--color-text-muted); }
.services-search-filter { min-width: 0; }
.services-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-showcase-card { display: grid; grid-template-columns: minmax(112px, 42%) minmax(0, 1fr); min-height: 210px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.service-showcase-media { min-height: 100%; background: linear-gradient(145deg, var(--color-accent-soft), var(--color-bg)); }
.service-showcase-media:empty::before { display: grid; place-items: center; width: 100%; height: 100%; content: "✦"; color: var(--color-accent-text); font-size: 2rem; }
.service-showcase-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-showcase-body { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 16px; }
.service-showcase-body h3 { margin: 0 0 6px; color: var(--color-primary); font-size: 1.05rem; }
.service-showcase-body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 14px; color: var(--color-text-muted); font-size: .78rem; line-height: 1.45; }
.service-showcase-facts { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--color-text-muted); font-size: .8rem; }
.service-showcase-facts strong { color: var(--color-primary); font-size: 1.08rem; }
.service-showcase-body .btn-primary { width: 100%; min-height: 38px; margin-top: 12px; padding: 7px 12px; }
.services-showcase-empty { min-height: 160px; padding-block: 32px; }
.services-are-empty .services-showcase { padding-top: 24px; padding-bottom: 4px; }
.services-are-empty .services-showcase-header { grid-template-columns: 1fr; margin-bottom: 2px; }
.services-are-empty .services-showcase-empty { min-height: 0; padding: 28px 20px 34px; }
body[data-business-type="services"] .public-booking { max-width: none; margin: 34px auto 42px; border-color: color-mix(in srgb, var(--color-accent) 24%, var(--color-border)); background: linear-gradient(145deg, var(--color-surface), color-mix(in srgb, var(--color-accent-soft) 38%, var(--color-surface))); }
body[data-business-type="services"] .public-booking > header h2 { color: var(--color-primary); font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 600; }
body[data-business-type="services"] .public-booking-form select,
body[data-business-type="services"] .public-booking-form input,
body[data-business-type="services"] .public-booking-form textarea,
body[data-business-type="services"] .public-booking-slots button { border-color: var(--color-border); background: var(--color-surface); color: var(--color-primary); }
body[data-business-type="services"] .public-booking-slots button.active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-text); }

@media (max-width: 1199px) {
  body[data-business-type="restaurant"] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-primary-nav { margin-left: 0; }
  body[data-business-type="services"] .store-body-actions { width: auto; }
  body[data-business-type="services"] .store-booking-link { flex: 0 0 auto; }
}

@media (max-width: 760px) {
  .store-primary-nav { display: none; }
  .store-booking-link { min-height: 40px; padding-inline: 12px; font-size: .78rem; }
  body[data-business-type="restaurant"] .store-hero { min-height: 238px; padding-block: 24px; }
  body[data-business-type="services"] .store-hero { min-height: 218px; padding-block: 20px; }
  body[data-business-type="restaurant"] .hero-copy,
  body[data-business-type="services"] .hero-copy { padding-inline: 20px; }
  body[data-business-type="restaurant"] .hero-copy h1,
  body[data-business-type="services"] .hero-copy h1 { display: block; max-width: 15ch; font-size: clamp(1.7rem, 8vw, 2.35rem); }
  body[data-business-type="restaurant"] .hero-copy p,
  body[data-business-type="services"] .hero-copy p { display: -webkit-box; max-width: 34ch; margin-top: 8px; font-size: .78rem; }
  body[data-business-type="services"] .store-hero::before { background: linear-gradient(90deg, rgb(255 255 255 / 98%), rgb(255 255 255 / 80%) 62%, rgb(255 255 255 / 24%)); }
  body[data-business-type="restaurant"] .product-grid { grid-template-columns: 1fr; }
  body[data-business-type="restaurant"] .product-card { display: grid; }
  .services-showcase { padding-top: 26px; }
  .services-showcase-header { grid-template-columns: 1fr; gap: 14px; }
  .services-showcase-grid { grid-template-columns: 1fr; }
  .service-showcase-card { min-height: 180px; }
  .services-are-empty .services-showcase { padding-top: 20px; }
  .services-are-empty .services-showcase-empty { padding-block: 22px 28px; }
  body[data-business-type="services"] .public-booking { margin: 24px 0 30px; padding: 20px; }
}

@media (max-width: 460px) {
  .service-showcase-card { grid-template-columns: 112px minmax(0, 1fr); }
  .service-showcase-body { padding: 13px; }
  .service-showcase-body > p { -webkit-line-clamp: 2; }
}

.subscription-modal-card { width: min(560px, 100%); max-height: calc(var(--app-viewport-height, 100dvh) - 48px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-md); }
.subscription-modal-card[data-view="management"] { width: min(780px, 100%); grid-template-rows: auto minmax(0, 1fr); }
.subscription-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 18px; }
.subscription-modal-heading { min-width: 0; }
.subscription-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.subscription-modal-header h2 { margin: 0; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.025em; }
.subscription-modal-heading > p { margin: 10px 0 0; color: var(--color-text-muted); font-size: .9rem; line-height: 1.5; }
.subscription-modal-heading > .subscription-plan-price { margin-top: 12px; color: var(--color-primary); font-size: 1.8rem; font-weight: 800; letter-spacing: -.035em; }
.subscription-plan-badge { padding: 5px 10px; border-radius: var(--radius-pill); background: var(--color-success-soft); color: var(--color-success-text); font-size: .72rem; font-weight: 750; }
.subscription-plan-badge[data-plan="pro"] { background: #E6F1FF; color: #1458A0; }
.subscription-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; background: transparent; color: var(--color-text-muted); font-size: .78rem; font-weight: 650; }
.subscription-back:hover { background: transparent; color: var(--color-primary); }
.subscription-back > svg { width: 16px; height: 16px; }
.subscription-modal-body { min-height: 0; padding: 0 28px 26px; overflow-y: auto; overscroll-behavior: contain; }
.subscription-modal-card[data-view="overview"] .subscription-modal-body { display: grid; padding-bottom: 0; overflow: hidden; }
.subscription-modal-body p { margin: 0; line-height: 1.5; }
.subscription-overview, .subscription-management { display: grid; gap: 20px; }
.subscription-overview { min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.subscription-state-card { display: flex; align-items: flex-start; gap: 13px; padding: 16px; border-radius: 12px; color: var(--color-success-text); background: var(--color-success-soft); }
.subscription-state-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; color: white; background: #168254; }
.subscription-state-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.subscription-state-card strong { display: block; font-size: .9rem; }
.subscription-state-card p { margin-top: 4px; color: var(--color-text-muted); font-size: .84rem; }
.subscription-state-card[data-tone="warning"] { color: var(--color-warning-text); background: var(--color-warning-soft); }
.subscription-state-card[data-tone="warning"] .subscription-state-icon { background: #A76209; }
.subscription-state-card[data-tone="info"] { color: var(--color-accent-text); background: var(--color-accent-soft); }
.subscription-state-card[data-tone="info"] .subscription-state-icon { background: var(--color-accent); }
.subscription-benefits h3, .subscription-options h3, .subscription-additional-options h3 { margin: 0 0 12px; font-size: .95rem; }
.subscription-benefits { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.subscription-benefit-list { min-height: 0; display: grid; align-content: start; gap: 11px; margin: 0; padding: 0 6px 0 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.subscription-benefit-list:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 4px; }
.subscription-benefit-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.45; }
.subscription-benefit-check { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; color: white; background: #168254; font-size: .88rem; font-weight: 750; }
.subscription-overview-actions { padding: 18px 28px 26px; }
.subscription-overview-actions::before { display: block; margin-bottom: 16px; border-top: 1px solid var(--color-border); content: ""; }
.subscription-manage-button { width: 100%; min-height: 44px; }
.subscription-account-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; padding: 22px; border-radius: 14px; background: #EFF9FA; }
.subscription-account-plan { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.subscription-account-label { color: var(--color-accent-text); font-size: .8rem; }
.subscription-account-plan h3 { margin: 0; font-size: 1.55rem; letter-spacing: -.02em; }
.subscription-account-plan > p { font-size: .9rem; }
.subscription-account-plan > #subscription-renewal-copy { color: var(--color-text-muted); font-size: .8rem; }
.subscription-account-details { display: grid; align-content: center; gap: 17px; margin: 0; padding-left: 20px; border-left: 1px solid #DBECEE; }
.subscription-account-details > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; }
.subscription-detail-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgb(255 255 255 / 65%); color: var(--color-primary); }
.subscription-detail-icon svg, .subscription-option-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.subscription-account-details dt { color: var(--color-text-muted); font-size: .78rem; }
.subscription-account-details dd { margin: 0; color: var(--color-primary); font-size: .85rem; font-weight: 700; overflow-wrap: anywhere; }
.subscription-options, .subscription-additional-options { display: grid; gap: 10px; }
.subscription-options h3, .subscription-additional-options h3 { margin-bottom: 2px; }
.subscription-option { display: grid; grid-template-columns: 44px minmax(0, 1fr) 12px; align-items: center; gap: 14px; width: 100%; min-height: 70px; padding: 12px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); color: var(--color-primary); text-align: left; }
.subscription-option:hover { background: #F5FAFD; border-color: #A7C6D5; }
.subscription-option-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #165D97; background: #E7F3FC; }
.subscription-option > span:nth-child(2) { display: grid; gap: 4px; }
.subscription-option strong { font-size: .87rem; }
.subscription-option small { color: var(--color-text-muted); font-size: .78rem; line-height: 1.4; }
.subscription-option-arrow { font-size: 1.6rem; font-weight: 400; }
.subscription-option-primary { border-color: #A6D6D4; background: #F1FAF9; }
.subscription-additional-options { padding-top: 18px; border-top: 1px solid var(--color-border); }
.subscription-option-danger { border-color: transparent; background: #FFF1F3; }
.subscription-option-danger:hover { border-color: #E6BFC5; background: #FFE9ED; }
.subscription-option-danger .subscription-option-icon { color: #C72D42; background: #FFE0E6; }
.subscription-feedback { margin-top: 16px !important; padding: 10px 12px; border-radius: 9px; color: var(--color-accent-text); background: var(--color-accent-soft); font-size: .84rem; overflow-wrap: anywhere; }
.subscription-feedback.error { color: var(--color-warning-text); background: var(--color-warning-soft); }
.subscription-modal-status { width: fit-content; padding: 5px 9px; border-radius: var(--radius-pill); color: var(--color-success-text); background: var(--color-success-soft); font-size: .75rem; font-weight: 750; }
.subscription-modal-status[data-subscription-status="trial"] { color: var(--color-accent-text); background: var(--color-accent-soft); }
.subscription-modal-status[data-subscription-status="past_due"],
.subscription-modal-status[data-subscription-status="cancelled"],
.subscription-modal-status[data-subscription-status="ending"],
.subscription-modal-status[data-subscription-status="unconfirmed"],
.subscription-modal-status[data-subscription-status="trial_expired"],
.subscription-modal-status[data-subscription-status="plan_inactive"] { color: var(--color-warning-text); background: var(--color-warning-soft); }
.stripe-connect-card { grid-column: 1 / -1; margin-top: 14px; padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stripe-connect-card p { margin: 4px 0 0; color: var(--color-text-muted); }
.stripe-connect-copy { min-width: 0; }
.stripe-connect-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.stripe-connect-copy > small { display: block; margin-top: 8px; color: var(--color-text-muted); }
.stripe-connect-badge { border-radius: 20px; padding: 3px 9px; font-size: .75rem; font-weight: 700; color: var(--color-text-muted); background: var(--color-background); }
.stripe-connect-card[data-state="active"] .stripe-connect-badge { background: #e8f7ef; color: #19734e; }
.stripe-connect-card[data-state="pending"] .stripe-connect-badge,
.stripe-connect-card[data-state="test"] .stripe-connect-badge { background: #fff4dc; color: #835410; }
.stripe-connect-card .stripe-connect-feedback { color: #ad3229; }
.stripe-connect-card > button { flex-shrink: 0; }
.platform-grid { display: grid; grid-template-columns: minmax(340px, 520px) minmax(0, 1fr); gap: 16px; }
.platform-config-form { display: grid; align-content: start; gap: 14px; padding: 20px; }
.platform-config-form h3 { margin: 0; }
.platform-config-basics { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 12px; }
.platform-config-basics > label:not(.store-option-check) { display: grid; gap: 6px; font-weight: 700; }
.platform-enabled-toggle { align-items: center; }
.platform-enabled-toggle input { margin-top: 0; }
.platform-config-form input[type="number"] { width: 100%; border: 1px solid var(--color-border); border-radius: 9px; padding: 11px; font: inherit; }
.saas-plan-config { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.saas-plan-config > summary { min-height: 54px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; color: var(--color-primary); cursor: pointer; }
.saas-plan-config > summary::-webkit-details-marker { display: none; }
.saas-plan-config > summary::after { width: 9px; height: 9px; flex: 0 0 auto; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg); transition: transform var(--motion); }
.saas-plan-config[open] > summary::after { transform: rotate(225deg); }
.saas-plan-config > summary > span { min-width: 0; display: grid; gap: 2px; }
.saas-plan-config > summary strong { font-size: 1rem; }
.saas-plan-config > summary small { color: var(--color-text-muted); font-size: .72rem; font-weight: 600; overflow-wrap: anywhere; }
.saas-plan-config-body { padding: 0 14px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.saas-plan-config-body > label:not(.saas-feature-check):not(.saas-plan-active) { display: grid; gap: 6px; font-weight: 700; }
.saas-plan-active, .saas-feature-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font-weight: 700; }
.saas-plan-features { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; display: grid; gap: 10px; }
.saas-plan-features legend { padding: 0 5px; font-weight: 700; }
.saas-plan-features .saas-feature-check { align-items: flex-start; }
.saas-plan-features .saas-feature-check input { flex-shrink: 0; margin-top: 3px; }
.saas-plan-features .saas-feature-check span { min-width: 0; display: grid; gap: 2px; }
.saas-plan-features .saas-feature-check small, .saas-features-help { color: var(--color-text-muted); font-size: .8rem; font-weight: 400; }
.platform-businesses { padding: 20px; }
.platform-businesses > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.platform-businesses h3, .platform-businesses p { margin: 0; }
.platform-businesses p { color: var(--color-text-muted); }
.platform-businesses-list { margin-top: 14px; display: grid; gap: 8px; }
.platform-business-row { border-top: 1px solid var(--color-border); }
.platform-business-row > summary { min-height: 52px; padding: 8px 2px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.platform-business-row > summary::-webkit-details-marker { display: none; }
.platform-business-row > summary > div { display: grid; gap: 2px; min-width: 0; }
.platform-business-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.platform-business-summary > span { padding: 4px 7px; border-radius: var(--radius-pill); color: var(--color-accent-text); background: var(--color-accent-soft); font-size: .68rem; font-weight: 750; white-space: nowrap; }
.platform-business-summary > [data-platform-business-status="past_due"], .platform-business-summary > [data-platform-business-status="cancelled"] { color: var(--color-warning-text); background: var(--color-warning-soft); }
.platform-businesses-list small { color: var(--color-text-muted); overflow-wrap: anywhere; }
.platform-businesses-list select { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px; background: #fff; }
.platform-businesses-list .platform-business-controls { padding: 2px 2px 10px; display: grid; grid-template-columns: repeat(2, minmax(125px, 1fr)); gap: 8px; }
.platform-business-controls > small { grid-column: 1 / -1; color: var(--color-text-muted); font-size: .76rem; line-height: 1.4; }
.register-page { grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); }
.register-page .auth-hero { padding: 30px 34px; }
.register-panel { padding: 26px 34px; }
.register-copy > p:not(.register-subscription-summary) { margin: 5px 0 12px; }
.register-subscription-summary { margin: 6px 0 0 !important; padding: 7px 10px; border-radius: 8px; background: #eef8f7; color: #126e6a !important; font-size: .82rem; font-weight: 700; }
.register-form { gap: 10px; }
.register-fields { gap: 10px 14px; }
.register-panel .auth-field { gap: 5px; }
.register-panel .auth-input-icon { min-height: 46px; }
.register-panel .auth-input-icon input, .register-panel .auth-eye { min-height: 44px; }
.register-panel .business-type-picker { gap: 8px; }
.register-panel .business-type-picker legend { font-size: .98rem; }
.register-panel .business-type-picker > p { margin: -4px 0 1px; font-size: .76rem; }
.register-panel .business-type-picker:not(.plan-picker) span { min-height: 100px; padding: 9px 7px; grid-template-rows: 30px auto 1fr; gap: 3px; }
.register-panel .business-type-picker:not(.plan-picker) span > svg { width: 28px; height: 28px; }
.register-panel .business-type-picker span > strong { font-size: .82rem; }
.register-panel .business-type-picker small { font-size: .67rem; line-height: 1.25; }
.register-panel .plan-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.register-panel .plan-picker span { min-height: 98px; padding: 12px 34px 12px 14px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; place-items: initial; align-items: start; gap: 5px 10px; text-align: left; }
.register-panel .plan-picker span > strong { grid-column: 1; grid-row: 1; align-self: center; font-size: .9rem; }
.register-panel .plan-picker .register-plan-price { grid-column: 2; grid-row: 1; color: #16324F; font-size: 1.15rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.register-panel .plan-picker .register-plan-highlights { grid-column: 1 / -1; grid-row: 2; font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; }
.register-panel .plan-picker .register-plan-capacity { grid-column: 1 / -1; grid-row: 3; font-size: .74rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.register-plan-details { min-width: 0; border: 1px solid #DCE5EC; border-radius: 10px; background: #fff; }
.register-plan-details[hidden] { display: none; }
.register-plan-details > summary { min-height: 44px; padding: 11px 14px; color: #006CC3; font-size: .8rem; font-weight: 650; cursor: pointer; }
.register-plan-details[open] > summary { border-bottom: 1px solid #E6EDF2; }
.register-plan-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 12px 14px; }
.register-plan-details-grid > section { min-width: 0; }
.register-plan-details-grid h3 { margin: 0 0 5px; color: #16324F; font-size: .85rem; }
.register-plan-details-grid p { margin: 0; color: #5D7391; font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.register-panel .auth-submit { min-height: 48px; }
.register-footer { margin-top: 10px; padding-top: 10px; }
.register-mobile-control { display: none; }
.register-actions { display: flex; gap: 8px; }
.register-actions .auth-submit { min-width: 0; flex: 1; }
.register-back { min-height: 48px; padding: 10px 14px; border: 1px solid #CFDCE6; border-radius: 10px; color: #16324F; background: #fff; font-size: .86rem; font-weight: 750; }
.register-back:hover { border-color: #1689E5; background: #F0F9FF; }

@media (min-width: 901px) and (max-height: 850px) {
  .auth-body.register-body { padding: 12px 20px; }
  .register-page { margin-block: auto; }
  .register-page .auth-hero { padding: 22px 30px; }
  .register-page .auth-hero h1 { margin-top: 18px; font-size: 2rem; }
  .register-page .auth-feature-grid { margin-top: 12px; gap: 6px 12px; }
  .register-page .auth-feature-grid > div { grid-template-columns: 36px minmax(0, 1fr); font-size: .68rem; }
  .register-page .auth-feature-grid > div > span { width: 36px; height: 36px; }
  .register-panel { padding: 18px 28px; }
  .register-copy h1 { font-size: 1.7rem; }
  .register-copy > p:not(.register-subscription-summary) { margin-bottom: 8px; }
  .register-subscription-summary { margin-top: 4px !important; padding-block: 6px; font-size: .78rem; }
  .register-form { gap: 7px; }
  .register-fields { gap: 7px 12px; }
  .register-panel .auth-field { gap: 3px; }
  .register-panel .auth-field > label { font-size: .77rem; }
  .register-panel .auth-input-icon { min-height: 42px; }
  .register-panel .auth-input-icon input, .register-panel .auth-eye { min-height: 40px; }
  .register-panel .business-type-picker:not(.plan-picker) span { min-height: 86px; padding-block: 7px; grid-template-rows: 25px auto 1fr; }
  .register-panel .business-type-picker:not(.plan-picker) span > svg { width: 24px; height: 24px; }
  .register-panel .business-type-picker small { font-size: .63rem; }
  .register-panel .plan-picker span { min-height: 88px; padding-block: 9px; }
  .register-panel .auth-submit { min-height: 44px; }
  .register-footer { margin-top: 6px; padding-top: 7px; }
}

@media (max-width: 900px) {
  .register-page { max-width: 680px; grid-template-columns: 1fr; }
  .register-page .auth-hero { min-height: 0; padding: 14px 22px; }
  .register-page .auth-showcase-image,
  .register-page .auth-hero h1,
  .register-page .auth-hero > .auth-hero-content > p,
  .register-page .auth-feature-grid { display: none; }
  .register-panel { padding: 22px 28px; }
}

@media (max-width: 760px) {
  .register-panel { padding: 20px 18px; }
  .register-panel .plan-picker { grid-template-columns: 1fr; }
  .register-panel .business-type-picker span,
  .register-panel .business-type-picker:not(.plan-picker) span {
    min-height: 0;
    padding: 10px 36px 10px 12px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    place-items: initial;
    align-items: center;
    gap: 2px 9px;
    text-align: left;
  }
  .register-panel .business-type-picker span > svg,
  .register-panel .business-type-picker:not(.plan-picker) span > svg {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    align-self: center;
  }
  .register-panel .business-type-picker span > strong { grid-column: 2; grid-row: 1; }
  .register-panel .business-type-picker small { grid-column: 2; grid-row: 2; }

  .register-mobile-flow .register-page .auth-hero { padding: 12px 18px; }
  .register-mobile-flow .register-brand .auth-brand-icon { width: 40px; height: 40px; padding: 5px; border-radius: 10px; }
  .register-mobile-flow .register-brand .auth-brand-copy strong { font-size: 1rem; }
  .register-mobile-flow .register-brand .auth-brand-copy > span { font-size: .58rem; }
  .register-mobile-flow .register-panel { padding: 18px 16px; }
  .register-mobile-flow .register-copy h1 { font-size: 1.65rem; }
  .register-mobile-flow .register-copy > p:not(.register-subscription-summary) { display: none; }
  .register-mobile-flow .register-subscription-summary { padding: 6px 9px; font-size: .76rem; }
  .register-mobile-flow .register-form, .register-mobile-flow .register-fields { gap: 10px; }
  .register-mobile-flow .auth-input input { font-size: 16px; }
  .register-mobile-flow .register-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 2px; padding: 0; list-style: none; }
  .register-progress li { min-width: 0; display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 2px solid #DCE5EC; color: #65758B; font-size: .76rem; }
  .register-progress li > span { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #EDF2F6; font-weight: 800; }
  .register-progress li[aria-current="step"] { border-color: #1689E5; color: #006CC3; }
  .register-progress li[aria-current="step"] > span { color: #fff; background: #1689E5; }
  .register-progress li:focus-visible { outline: 2px solid #1689E5; outline-offset: 3px; border-radius: 4px; }
  .register-mobile-flow[data-register-step="account"] [data-register-group="business"],
  .register-mobile-flow[data-register-step="account"] .register-actions,
  .register-mobile-flow[data-register-step="business"] [data-register-group="account"] { display: none; }
  .register-mobile-flow[data-register-step="account"] #register-next,
  .register-mobile-flow #register-back { display: inline-flex; }
  .register-mobile-flow .business-type-picker > p { display: none; }
  .register-mobile-flow .business-type-picker legend { margin-bottom: 4px; font-size: .9rem; }
  .register-mobile-flow .business-type-picker:not(.plan-picker) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .register-mobile-flow .business-type-picker:not(.plan-picker) span { min-height: 74px; padding: 10px 4px; grid-template-columns: 1fr; grid-template-rows: 24px auto; place-items: center; align-content: center; gap: 5px; text-align: center; }
  .register-mobile-flow .business-type-picker:not(.plan-picker) span > svg { grid-column: 1; grid-row: 1; width: 24px; height: 24px; }
  .register-mobile-flow .business-type-picker:not(.plan-picker) span > strong { grid-column: 1; grid-row: 2; font-size: .72rem; }
  .register-mobile-flow .business-type-picker:not(.plan-picker) small { display: none; }
  .register-mobile-flow .business-type-picker input:checked + span::after { top: 5px; right: 5px; width: 15px; height: 15px; font-size: .58rem; }
  .register-mobile-flow .plan-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .register-mobile-flow .plan-picker span { min-height: 140px; padding: 12px 10px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; align-content: start; align-items: start; gap: 6px; }
  .register-mobile-flow .plan-picker span > strong { grid-column: 1; grid-row: 1; padding-right: 20px; font-size: .88rem; }
  .register-mobile-flow .plan-picker .register-plan-price { grid-column: 1; grid-row: 2; font-size: 1.15rem; }
  .register-mobile-flow .plan-picker .register-plan-highlights { grid-column: 1; grid-row: 3; font-size: .75rem; }
  .register-mobile-flow .plan-picker .register-plan-capacity { grid-column: 1; grid-row: 4; font-size: .7rem; }
  .register-plan-details-grid { grid-template-columns: 1fr; }
  .register-mobile-flow .register-footer { flex-wrap: wrap; gap: 4px 8px; font-size: .76rem; }
  .register-mobile-flow .register-footer::before, .register-mobile-flow .register-footer::after { display: none; }
}

@media (max-width: 980px) {
  .platform-grid { grid-template-columns: 1fr; }
}

@media (max-height: 640px) {
  .subscription-modal-card[data-view="overview"] .subscription-modal-header { padding: 14px 18px 12px; }
  .subscription-modal-card[data-view="overview"] .subscription-modal-heading > p { margin-top: 6px; }
  .subscription-modal-card[data-view="overview"] .subscription-plan-price { font-size: 1.6rem; }
  .subscription-modal-card[data-view="overview"] .subscription-overview { gap: 12px; }
  .subscription-modal-card[data-view="overview"] .subscription-state-card { padding: 12px; }
  .subscription-modal-card[data-view="overview"] .subscription-benefits h3 { margin-bottom: 8px; }
  .subscription-modal-card[data-view="overview"] .subscription-overview-actions { padding: 12px 18px 16px; }
  .subscription-modal-card[data-view="overview"] .subscription-overview-actions::before { margin-bottom: 12px; }
}

@media (max-width: 560px) {
  .stripe-connect-card { align-items: stretch; flex-direction: column; }
  .subscription-modal { padding: 12px; }
  .subscription-modal-card { max-height: calc(var(--app-viewport-height, 100dvh) - 24px); }
  .subscription-modal-header { padding: 20px 18px 16px; gap: 10px; }
  .subscription-modal-header h2 { font-size: 1.3rem; }
  .subscription-modal-body { padding: 0 18px 20px; }
  .subscription-overview-actions { padding: 16px 18px 20px; }
  .subscription-account-card { grid-template-columns: 1fr; gap: 18px; padding: 17px; }
  .subscription-account-details { padding: 16px 0 0; border-left: 0; border-top: 1px solid #DBECEE; }
  .subscription-option { grid-template-columns: 36px minmax(0, 1fr) 10px; gap: 10px; }
  .subscription-option-icon { width: 36px; height: 36px; }
  .platform-grid { gap: 8px; }
  .platform-config-form, .platform-businesses { padding: 12px; }
  .platform-config-form { gap: 8px; }
  .platform-config-form h3 { font-size: 1rem; }
  .platform-config-basics { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: end; gap: 8px; }
  .platform-config-basics > label:not(.store-option-check) { gap: 4px; font-size: .76rem; }
  .platform-config-form input[type="number"] { min-height: 44px; padding: 8px 10px; }
  .platform-config-basics .store-option-check { align-items: center; min-height: 44px; padding: 8px 10px; }
  .platform-config-basics .store-option-check input { margin-top: 0; }
  .platform-config-basics .store-option-check strong { font-size: .78rem; line-height: 1.2; }
  .platform-config-basics .store-option-check small { display: none; }
  .saas-plan-config > summary { min-height: 46px; padding: 7px 10px; }
  .saas-plan-config > summary strong { font-size: .9rem; }
  .saas-plan-config > summary small { font-size: .66rem; }
  .saas-plan-config-body { grid-template-columns: 1fr; gap: 9px; padding: 0 11px 11px; }
  .saas-plan-config-body > * { grid-column: 1; }
  .saas-plan-active { order: 3; }
  .saas-feature-check { order: 4; }
  .platform-businesses > header { align-items: center; }
  .platform-businesses > header p { display: none; }
  .platform-businesses > header .secondary-button { min-height: 38px; padding: 7px 10px; font-size: .75rem; }
  .platform-businesses-list { margin-top: 8px; gap: 0; }
  .platform-business-row > summary { min-height: 48px; grid-template-columns: minmax(0, 1fr) auto; padding: 7px 0; gap: 8px; }
  .platform-business-row > summary strong { font-size: .9rem; }
  .platform-business-row > summary small { font-size: .7rem; }
  .platform-business-row > summary::after { width: 8px; height: 8px; margin: 0 3px 4px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg); }
  .platform-business-row[open] > summary::after { margin-bottom: -4px; transform: rotate(225deg); }
  .platform-business-summary { grid-column: 1; justify-content: flex-start; gap: 4px; margin-top: 3px; }
  .platform-business-summary > span { padding: 3px 7px; font-size: .64rem; }
  .platform-business-row > summary::after { grid-column: 2; grid-row: 1; }
  .platform-businesses-list .platform-business-controls { grid-template-columns: 1fr; padding-bottom: 10px; }
}

@media print {
  body.printing-device-test > :not(#device-print-test) { display: none !important; }
  body.printing-device-test #device-print-test { display: block !important; position: static; width: 70mm; max-width: 100%; margin: 0; padding: 4mm; color: #000; background: #fff; font: 10pt/1.5 monospace; text-align: center; }
  body.printing-device-test #device-print-test h1 { margin: 0; font: bold 16pt monospace; }
  body.printing-device-test #device-print-test h2 { margin: 3mm 0; font: bold 11pt monospace; }
}