/* Shopiza – custom styles */

/* Remove browser default focus outline globally — we use custom box-shadow instead */
*:focus { outline: none !important; }
*:focus-visible { outline: none !important; }

/* ─── Shop Storefront Styles ─── */

/* Hero / Header area */
.shop-hero {
  padding: 0.75rem 0 1rem;
}

.shop-hero-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.shop-hero-sub {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Cart button with count badge */
.shop-cart-btn {
  position: relative;
  padding-right: 2.5rem !important;
}

.shop-cart-count {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary-text, var(--primary));
  color: var(--bg, #f8f9fb);
  font-size: 0.6875rem;
  font-weight: 700;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Sidebar */
.shop-sidebar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.625rem);
  padding: 1rem;
}

.shop-sidebar-title {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.shop-filter-options { }

/* --- Dual range slider --- */
.filter-range-slider { padding: 0 2px; }
.filter-range-track {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}
.filter-range-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: var(--bs-border-color);
  border-radius: 2px;
}
.filter-range-fill {
  position: absolute;
  height: 4px;
  background: var(--primary-text, var(--primary, #6366f1));
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.filter-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  width: 100%;
  height: 28px;
  background: none;
  pointer-events: none;
  margin: 0;
  padding: 0;
}
.filter-range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-text, var(--primary, #6366f1));
  border: 2px solid var(--bg, #fff);
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.filter-range-thumb::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-text, var(--primary, #6366f1));
  border: 2px solid var(--bg, #fff);
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  pointer-events: auto;
}
.filter-range-thumb-max { z-index: 2; }
[data-theme="dark"] .filter-range-thumb::-webkit-slider-thumb { border-color: #222; }
[data-theme="dark"] .filter-range-thumb::-moz-range-thumb { border-color: #222; }

.shop-filter-group + .shop-filter-group {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

/* ─── Product Cards ─── */
.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.625rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.2s, transform 0.2s;
}

.product-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

[data-theme="dark"] .product-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.product-card-img {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--card, #ffffff);
  /* `padding` driven by the shop's catalog_options.image_padding setting —
     the storefront layout sets `--card-img-padding: Npx` on a parent and
     this rule reads it. Defaults to 0 so unconfigured shops are unchanged. */
  padding: var(--card-img-padding, 0);
  box-sizing: border-box;
}
.product-card-img.is-portrait { aspect-ratio: 3 / 4; }
.product-card-img.is-landscape { aspect-ratio: 4 / 3; }
/* Dark mode: keep the image's letterbox area white. Most product photos
   are shot on a white seamless, so a dark backdrop creates a hard contrast
   line at the photo's edges when `object-fit: contain` letterboxes the
   image to fit the configured aspect ratio. */
[data-theme="dark"] .product-card-img {
  background: #ffffff;
}

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.product-card:hover .product-card-img img.product-card-img-main {
  transform: scale(1.05);
}

/* Hover image swap */
.product-card-img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}
.product-card:hover .product-card-img-hover {
  opacity: 1;
}

.product-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 2rem;
  opacity: 0.3;
}

.product-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  z-index: 2;
}

.product-badge-oos {
  background: rgba(239,68,68,.9);
  color: #fff;
}

.product-card-body {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.25rem;
  container-type: inline-size;
}

.product-card-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--fg);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.product-card-title:hover { color: var(--primary-text, var(--primary)); }

.product-card-price {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--primary-text, var(--primary));
}

/* Featured badge */
.product-badge-featured {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #b8860b;
  margin-bottom: 2px;
}
.product-badge-featured i { font-size: 10px; margin-right: 2px; }
[data-theme="dark"] .product-badge-featured { color: #daa520; }

/* Card SKU */
.product-card-sku {
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Card short description — matches the product title's size and color
   so it reads as a continuation of the title rather than secondary
   metadata. Slightly relaxed line-height for multi-line readability,
   plus a generous bottom gap so it doesn't crowd the SKU below. */
.product-card-short-desc {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--fg);
  margin-top: 2px;
  margin-bottom: 10px;
}
/* Pull bulleted/numbered lists flush-left so the marker + text line up
   with the other card text. The browser default `padding-left: 40px` on
   <ul>/<ol> would push the entire list far to the right; we cut it down
   to just enough for the marker glyph (1.1rem). Margins are zeroed so
   the wrapper's own `margin-bottom: 10px` is the only gap between the
   list and the SKU below — matches the plain-text spacing. */
.product-card-short-desc ul,
.product-card-short-desc ol {
  padding-left: 1.1rem;
  margin: 0;
}

/* Card attributes */
.product-card-attrs {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted, #6c757d);
  margin-bottom: 0.125rem;
}
.product-card-attr-name {
  font-weight: 600;
  color: var(--fg);
}

/* Card action row (qty + add-to-cart side by side) */
.product-card-action-row {
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.product-card-action-row .qty-control-sm {
  flex-shrink: 0;
}
.product-add-btn-icon {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  padding: 0 0.5rem;
  white-space: nowrap;
  overflow: hidden;
}
.product-card-action-row .qty-control-sm .qty-input {
  width: 2.5rem;
}

/* Add-to-cart label: auto-hide when card is too narrow for text */
.card-atc-label { margin-left: 0.25rem; }
@media (max-width: 767.98px), (min-width: 992px) and (max-width: 1399.98px) {
  .card-atc-label { display: none; }
}
@container (max-width: 260px) {
  .card-atc-label { display: none; }
}

/* Card variant selectors (always visible) */
.card-variant-selectors {
  margin-bottom: 0.25rem;
}
.card-variant-selectors .form-select-sm {
  font-size: 0.75rem;
  padding: 0.2rem 1.75rem 0.2rem 0.5rem;
  height: auto;
}
.card-variant-selectors .mb-1:last-child { margin-bottom: 0 !important; }

/* Disabled add-to-cart until variant selected */
.card-atc-has-variant:disabled {
  opacity: 0.45;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Flash animation for variant selects */
@keyframes variantFlash {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px var(--primary-text, var(--primary, #6f42c1)); }
}
.card-variant-select.is-flashing {
  animation: variantFlash 0.35s ease 3;
}

.product-add-btn {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

/* ─── Product Detail ─── */
.product-detail-img {
  border-radius: var(--radius, 0.625rem);
  overflow: hidden;
  background: var(--hover, #f3f4f6);
  border: 1px solid var(--border);
}

.product-detail-img img {
  width: 100%;
  height: auto;
  display: block;
}

.product-detail-placeholder {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.3;
}

.product-detail-info {
  display: flex;
  flex-direction: column;
}

.product-detail-cat {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primary-text, var(--primary));
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.product-detail-cat:hover { text-decoration: underline; }

.product-detail-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.product-detail-price-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.product-detail-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-text, var(--primary));
}

.product-detail-desc {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Tighter list indent inside product description blocks (right-column
   short description AND the full-width long description below the
   gallery). Default browser padding-left of 40px makes the list look
   detached from the surrounding text; 1.1rem fits the marker tightly. */
.product-detail-desc ul,
.product-detail-desc ol,
.product-detail-full-desc ul,
.product-detail-full-desc ol {
  padding-left: 1.1rem;
  margin-left: 0;
}

.product-detail-form { margin-top: auto; }

/* ─── Quantity Controls ─── */
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--card);
}

.qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-size: 0.75rem;
  transition: background 0.15s;
}

.qty-btn:hover { background: var(--hover, #f3f4f6); }

.qty-input {
  width: 2.5rem;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  -moz-appearance: textfield;
}

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

.qty-control-sm .qty-btn { width: 1.75rem; height: 1.75rem; font-size: 0.625rem; }
.qty-control-sm .qty-input { width: 2.2rem; font-size: 0.8125rem; }

/* ─── Cart Items ─── */
.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

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

.cart-item-img {
  width: 72px;
  height: 72px;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--hover, #f3f4f6);
}

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

.cart-item-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.3;
}

.cart-item-info { flex: 1; min-width: 0; }

.cart-item-name {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.125rem;
}

.cart-item-unit-price {
  color: var(--muted);
  font-size: 0.8125rem;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cart-item-total {
  font-weight: 700;
  font-size: 0.9375rem;
  min-width: 5rem;
  text-align: right;
}

.cart-summary-card {
  position: sticky;
  /* Add the announcement-bar offset so a sticky bar doesn't cover the top of
     the summary; in scroll-away mode the variable resets to 0 once the bar
     slides off, so the summary tracks the header naturally. */
  top: calc(80px + var(--announcement-bar-h, 0px));
  transition: top 0.22s ease;
}

@media (max-width: 767px) {
  .cart-item { flex-wrap: wrap; gap: 0.75rem; }
  .cart-item-actions { width: 100%; justify-content: space-between; }
  .cart-item-total { min-width: auto; }
}

/* ─── Checkout Steps ─── */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 500;
}

.checkout-step.active { color: var(--primary-text, var(--primary)); font-weight: 600; }
.checkout-step.done { color: var(--fg); }

.checkout-step-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--card);
}

.checkout-step.active .checkout-step-num {
  background: var(--primary-text, var(--primary));
  border-color: var(--primary-text, var(--primary));
  color: var(--bg, #f8f9fb);
}

.checkout-step.done .checkout-step-num {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--card);
}

.checkout-step-line {
  width: 3rem;
  height: 2px;
  background: var(--border);
  margin: 0 0.5rem;
}

.checkout-step.done + .checkout-step-line,
.checkout-step.active + .checkout-step-line {
  background: var(--primary);
}

/* ─── Trust signals ─── */
.trust-row {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.trust-item i { color: var(--primary-text, var(--primary)); }

/* ─── Category tree (inherits from old styles) ─── */
:root {
  --category-border-color: rgba(0, 0, 0, 0.05);
  --category-hover-bg: rgba(0, 0, 0, 0.03);
  --category-active-color: var(--primary-text, var(--primary, #9f50df));
}

[data-theme="dark"] {
  --category-border-color: rgba(255, 255, 255, 0.08);
  --category-hover-bg: rgba(255, 255, 255, 0.05);
  --category-active-color: var(--primary-text, var(--primary, #b07ce8));
}

.category-tree { font-size: 0.875rem; }

.category-tree-item { padding: 0.125rem 0; }

.category-tree-item + .category-tree-item {
  border-top: 1px solid var(--category-border-color);
}

.category-tree-item .category-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  padding: 0.25rem 0.5rem;
}

.category-tree-item .category-toggle:hover,
.category-tree-item .category-toggle:focus {
  text-decoration: none;
  color: var(--category-active-color);
}

.category-tree-item .category-toggle .chevron-icon {
  transition: transform 0.2s ease;
}

.category-tree-item .category-toggle[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}

.category-tree-item .category-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--category-border-color);
}

.category-tree-item a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.35rem;
  transition: background 0.15s, color 0.15s;
}

.category-tree-item a:hover,
.category-tree-item a:focus {
  background: var(--category-hover-bg);
  text-decoration: none;
  color: var(--category-active-color);
}

.category-tree-item a.active {
  color: var(--category-active-color);
  font-weight: 600;
}

.category-tree .collapse { transition: height 0.2s ease; }

/* ─── Shop loader ─── */
.shop-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

[data-theme="dark"] .shop-loader {
  background: rgba(11, 15, 25, 0.8);
}

/* ─── Toast notification ─── */
.shop-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideUp 0.3s ease, fadeOut 0.3s ease 2s forwards;
}

.shop-toast i { color: var(--primary-text, var(--primary)); }
.shop-toast.shop-toast-error i { color: #dc3545; }
.shop-toast.shop-toast-error { border-color: #dc3545; }

@keyframes slideUp {
  from { transform: translateY(1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateY(-0.5rem); pointer-events: none; }
}

/* ─── Layout Toggle ─── */
.shop-layout-toggle {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

.layout-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius, 0.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8125rem;
}

.layout-btn:hover { color: var(--fg); border-color: var(--primary); }
.layout-btn.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

/* List layout */
.product-grid.layout-list {
  flex-direction: column !important;
}

.product-grid.layout-list .product-grid-item {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.product-grid.layout-list .product-card {
  flex-direction: row;
  align-items: stretch;
}

.product-grid.layout-list .product-card-img {
  width: 160px;
  min-width: 160px;
  border-radius: var(--radius, 0.625rem) 0 0 var(--radius, 0.625rem);
}

.product-grid.layout-list .product-card-img img {
  border-radius: var(--radius, 0.625rem) 0 0 var(--radius, 0.625rem);
}

.product-grid.layout-list .product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-grid.layout-list .product-card-placeholder {
  border-radius: var(--radius, 0.625rem) 0 0 var(--radius, 0.625rem);
}

@media (max-width: 575px) {
  .product-grid.layout-list .product-card-img {
    width: 100px;
    min-width: 100px;
  }
}

/* ─── Product Pagination ─── */
.product-pagination { margin-top: 1.5rem; }
.product-pagination .pagination { gap: 0.25rem; }
.product-pagination .page-link {
  border-radius: 0.375rem !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.875rem !important;
  min-width: 2.25rem;
  text-align: center;
  color: var(--primary) !important;
  background: transparent !important;
  border-color: var(--primary) !important;
}
.product-pagination .page-link:hover,
.product-pagination .page-link:focus {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.product-pagination .page-item.active .page-link {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.product-pagination .page-item.disabled .page-link {
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--border) !important;
}
#loadMoreBtn { min-width: 200px; }

/* ─── Sticky category sidebar ─── */
@media (min-width: 992px) {
  .shop-sidebar-wrap {
    position: sticky;
    /* Anchor below the fixed header — uses the same `--navbar-height` as
       `main`'s margin-top, plus a 10px buffer so the sidebar sits slightly
       lower than the product grid for visual breathing room. */
    top: calc(var(--navbar-height, 64px) + 20px + var(--announcement-bar-h, 0px));
    transition: top 0.22s ease;
    /* JS overrides top dynamically for tall sidebars */
  }
}

:root {
  --bg: #f8f9fb;
  --fg: #111827;
  --muted: #6b7280;
  --primary: #9f50df;
  --primary-fg: #ffffff;
  --primary-text: #9f50df;
  --switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  --primary-2: #8155de;
  --primary-subtle: rgba(159,80,223,.08);
  --card: #ffffff;
  --border: #e5e7eb;
  --navbar-bg: rgba(255, 255, 255, 0.85);
  --navbar-border: #e5e7eb;
  --sidebar-bg: #ffffff;
  --hover: #f3f4f6;
  --radius: 0.625rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

[data-theme="dark"] {
  --bg: #0b0f19;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --primary: #b07ce8;
  --primary-2: #9562d4;
  --primary-subtle: rgba(176,124,232,.1);
  --card: #141a2a;
  --border: #1f2937;
  --navbar-bg: rgba(11, 15, 25, 0.85);
  --navbar-border: #1f2937;
  --search-border: #1f2937;
  --sidebar-bg: #111827;
  --hover: #1f2937;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
}

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: var(--fg);
  background: var(--bg) !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ─── Global card styling ─── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0.875rem 1.25rem;
}

.card-body { padding: 1.25rem; }

/* ─── Header ─── */
/* Storefront top header. Scoped to body > header so it can't hijack any
   stray <header> element used inside a page (e.g. an admin section title). */
body > header {
  position: fixed;
  /* Pushed below the announcement bar via a CSS variable set from JS once the
     bar height is measured. We subtract 1px so the header overlaps the bar's
     bottom edge — without it, sub-pixel rendering can produce a 1px gap that
     lets product images bleed through during scroll. max() clamps to 0 so the
     header doesn't drift above the viewport when the bar isn't present. */
  top: max(0px, calc(var(--announcement-bar-h, 0px) - 1px));
  left: 0; right: 0;
  z-index: 1030;
  background: var(--navbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--navbar-border);
  transition: top 0.22s ease;
}
/* On touch devices, backdrop-filter breaks position:fixed during momentum
   scroll, URL-bar transitions, and keyboard events. Use solid background. */
@media (hover: none) and (pointer: coarse) {
  body > header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.navbar {
  background: transparent !important;
  padding: 0.625rem 0;
}

main {
  /* `--navbar-height` is set in layout.ejs based on the configured shop
     logo height. Fallback 64px matches the default 28px logo. */
  margin-top: calc(var(--navbar-height, 64px) + var(--announcement-bar-h, 0px)) !important;
  transition: margin-top 0.22s ease;
}

body main.container {
  margin-top: calc(var(--navbar-height, 64px) + var(--announcement-bar-h, 0px)) !important;
}

body main.container.my-4 {
  margin-top: calc(var(--navbar-height, 64px) + var(--announcement-bar-h, 0px)) !important;
  margin-bottom: 1.5rem !important;
}

/* Block-driven Home page: bottom of the fixed header sits flush
   against the first block's top edge. On mobile that's fine — the
   navbar is taller proportionally so there's already visual breathing
   room. On desktop the slim navbar makes the hero feel cramped, so
   add a small top padding at md+ to give the hero room to breathe.
   Scoped to .shop-home-blocks so it doesn't bleed into catalog /
   product / contact / collection / page views (each of those uses
   data-ajax-fragment too, but only home_blocks gets this class). */
@media (min-width: 768px) {
  .shop-home-blocks { padding-top: 0.65rem; }
}

/* ───────── Storefront announcement bar ─────────
   Pinned above the fixed header via a higher z-index. Two behaviours:
   --sticky stays put, --scrolls slides up after the visitor scrolls past it. */
.shop-announcement-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.28s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* .container constrains the banner content to the page's main
   content width, matching the navbar / breadcrumbs / page content
   below. The close button is positioned relative to this container
   so it sits on the right edge of the content column, not the
   viewport. position:relative on the container is what makes that
   anchoring possible. */
.shop-announcement-bar__container {
  position: relative;
  padding-right: 44px;  /* reserve room for the close button */
  min-width: 0;
}
.shop-announcement-bar:not(.shop-announcement-bar--dismissible) .shop-announcement-bar__container {
  padding-right: 0;
}
.shop-announcement-bar__inner {
  min-width: 0;
}
/* Rich text inherits the bar's colour. Tighten paragraph margins
   so a single <p> doesn't add extra vertical space. */
.shop-announcement-bar__inner p { margin: 0; }
.shop-announcement-bar__inner h1,
.shop-announcement-bar__inner h2,
.shop-announcement-bar__inner h3,
.shop-announcement-bar__inner h4 { font-size: inherit; line-height: inherit; margin: 0; font-weight: 700; }
.shop-announcement-bar__inner a { color: inherit; }
.shop-announcement-bar__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  transition: text-decoration-color 0.15s ease;
}
.shop-announcement-bar__link:hover {
  color: inherit;
  text-decoration-color: currentColor;
}
.shop-announcement-bar__close {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; padding: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  opacity: 0.65;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.shop-announcement-bar__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}
.shop-announcement-bar--scrolls.is-scrolled-away {
  transform: translateY(-100%);
}
.shop-announcement-bar.is-dismissed {
  transform: translateY(-100%);
  pointer-events: none;
}
/* Admin shell never has a real announcement bar — force the offset to 0 so a
   stale --announcement-bar-h (e.g. from a prior storefront visit, or a misfire
   anywhere upstream) can't push the admin layout around. */
body:has(.admin-shell[data-admin-shell]) {
  --announcement-bar-h: 0px;
}

/* ─── Admin shell layout (legacy — overridden by .az-* block at bottom) ─── */

/* ─── Admin nav ─── */
.admin-nav { display: flex; flex-direction: column; gap: 0.25rem; }

.nav-section { padding: 0 0.75rem; margin-bottom: 0.5rem; }

.nav-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 0.5rem 0.75rem 0.25rem;
}

.nav-link-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 450;
  transition: background 0.15s, color 0.15s;
}

.nav-link-item i {
  width: 1.125rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
  transition: color 0.15s;
}

.nav-link-item:hover {
  background: var(--hover);
  color: var(--fg);
  text-decoration: none;
}

.nav-link-item.active {
  background: var(--primary-subtle);
  color: var(--primary-text, var(--primary));
  font-weight: 550;
}

.nav-link-item.active i { color: var(--primary-text, var(--primary)); }

/* ─── Stat cards ─── */
.stat-card .card-body { padding: 1rem 1.25rem; }

.stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.bg-primary-subtle { background: var(--primary-subtle, rgba(159,80,223,.1)); color: var(--primary); }
.bg-success-subtle { background: rgba(16,185,129,.1); color: #10b981; }
.bg-warning-subtle { background: rgba(245,158,11,.1); color: #f59e0b; }
.bg-info-subtle    { background: rgba(59,130,246,.1); color: #3b82f6; }

[data-theme="dark"] .bg-primary-subtle { background: rgba(176,124,232,.12); }
[data-theme="dark"] .bg-success-subtle { background: rgba(16,185,129,.12); }
[data-theme="dark"] .bg-warning-subtle { background: rgba(245,158,11,.12); }
[data-theme="dark"] .bg-info-subtle    { background: rgba(59,130,246,.12); }

.stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: 0.75rem; color: var(--muted); margin-top: 0.125rem; }

/* ─── Badge subtle variants ─── */
.bg-success-subtle.text-success, .badge.bg-success-subtle { background: rgba(16,185,129,.12) !important; color: #10b981 !important; }
.bg-danger-subtle.text-danger, .badge.bg-danger-subtle  { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; }
.bg-warning-subtle.text-warning, .badge.bg-warning-subtle { background: rgba(245,158,11,.12) !important; color: #f59e0b !important; }

/* ─── Tables ─── */
.table { color: var(--fg); }
.table th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom-width: 1px;
  border-color: var(--border);
  padding: 0.75rem;
}
.table td { padding: 0.75rem; border-color: var(--border); vertical-align: middle; }
.table-hover > tbody > tr { transition: background 0.15s; }
.table-hover > tbody > tr:hover > td { background: var(--hover) !important; }

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  background: var(--card) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .table thead th {
  background: var(--card) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background: var(--hover) !important;
}

[data-theme="dark"] .table-light th {
  background: var(--card) !important;
  color: var(--muted) !important;
}

/* ─── Buttons ─── */
.btn { border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: 1px solid var(--primary);
  color: var(--primary-fg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-2), var(--primary-2)) !important; border-color: var(--primary-2) !important; color: var(--primary-fg, #fff) !important; }
.btn-primary:disabled, .btn-primary.disabled {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: var(--primary);
  color: var(--primary-fg);
  opacity: .65;
}
.btn-primary:focus, .btn-primary:active, .btn-primary:focus-visible {
  border-color: var(--primary-2) !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  /* Focus halo uses the shop's brand color (from --primary-shadow set in
     layout.ejs theme tokens) — no more universal purple glow on every
     button click. Falls back to the legacy purple if the page didn't
     emit the theme tokens for some reason. */
  box-shadow: 0 0 0 0.2rem var(--primary-shadow, rgba(159,80,223,.25)) !important;
  outline: none !important;
}

.btn-outline-primary {
  color: var(--primary-text, var(--primary)) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
  color: var(--primary-fg, #fff) !important;
  border-color: var(--primary) !important;
  background: var(--primary) !important;
}

.btn-outline-secondary { border-color: currentColor !important; }
[data-theme="dark"] .btn-outline-secondary {
  color: var(--fg) !important;
  border-color: rgba(229,231,235,0.28) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--hover) !important;
  border-color: rgba(229,231,235,0.45) !important;
}

/* ─── Forms ─── */
.form-control, .form-select {
  border-radius: 0.5rem;
  border-color: var(--border);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

.form-check-input[type="checkbox"]:checked {
  background-color: var(--primary-text, var(--primary)) !important;
  border-color: var(--primary-text, var(--primary)) !important;
}
.form-check-input[type="radio"]:checked {
  background-color: var(--primary-text, var(--primary)) !important;
  border-color: var(--primary-text, var(--primary)) !important;
}
/* Remove Bootstrap's hardcoded blue focus knob on unchecked switches */
.form-switch .form-check-input:focus:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280%2c0%2c0%2c0.25%29'/%3e%3c/svg%3e") !important;
}
/* Knob colour and track outline adapt to accent brightness */
.form-switch .form-check-input:checked {
  background-color: var(--primary-text, var(--primary)) !important;
  background-image: var(--switch-knob) !important;
  border-color: var(--primary-text, var(--primary)) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1) !important;
}

.form-control:focus, .form-select:focus,
.form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus, .form-check-input:focus-visible {
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.form-label { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.375rem; }

[data-theme="dark"] .form-control {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
[data-theme="dark"] .form-select {
  background-color: var(--card) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
[data-theme="dark"] textarea.form-control {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}

[data-theme="dark"] .input-group-text {
  background-color: var(--hover) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="dark"] .shop-search-panel .input-group-text {
  background-color: var(--card) !important;
  border-color: var(--search-border, #6c757d) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .form-label { color: var(--fg) !important; }
[data-theme="dark"] .form-text { color: var(--muted) !important; }

/* ─── Alerts ─── */
[data-theme="dark"] .alert { background: var(--card) !important; border-color: var(--border) !important; color: var(--fg) !important; }
[data-theme="dark"] .alert-success { background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.25) !important; color: #10b981 !important; }
[data-theme="dark"] .alert-danger  { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.25) !important; color: #f87171 !important; }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.1) !important; border-color: rgba(245,158,11,.25) !important; color: #fbbf24 !important; }
[data-theme="dark"] .alert-info    { background: rgba(59,130,246,.1) !important; border-color: rgba(59,130,246,.25) !important; color: #60a5fa !important; }

/* ─── text-primary utility: always use the page-readable version ─── */
.text-primary { color: var(--primary-text, var(--primary)) !important; }

/* ─── Badges ─── */
/* Sale % bubbles and any badge-primary use primary bg — ensure text always contrasts */
.badge.badge-primary { color: var(--primary-fg, #fff) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
[data-theme="dark"] .badge { background: var(--border) !important; color: var(--fg) !important; }
[data-theme="dark"] .badge.bg-primary { background: var(--primary) !important; color: var(--primary-fg) !important; }
[data-theme="dark"] .badge.badge-primary { background: var(--primary) !important; color: var(--primary-fg, #fff) !important; }
[data-theme="dark"] .badge.bg-success { background: #10b981 !important; color: #fff !important; }
[data-theme="dark"] .badge.bg-danger  { background: #f87171 !important; color: #fff !important; }
[data-theme="dark"] .badge.bg-warning { background: #fbbf24 !important; color: #000 !important; }

/* ─── Dark-mode card/misc ─── */
[data-theme="dark"] .card { background: var(--card) !important; border-color: var(--border) !important; color: var(--fg) !important; }
[data-theme="dark"] .card-header { background: var(--card) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .card-body { background: var(--card) !important; color: var(--fg) !important; }
[data-theme="dark"] .text-muted { color: var(--muted) !important; }
[data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white { background: var(--card) !important; }
[data-theme="dark"] .border { border-color: var(--border) !important; }
[data-theme="dark"] .border-top { border-top-color: var(--border) !important; }
[data-theme="dark"] .border-bottom { border-bottom-color: var(--border) !important; }

/* ─── Modals ─── */
[data-theme="dark"] .modal-content { background: var(--card) !important; border-color: var(--border) !important; color: var(--fg) !important; }
[data-theme="dark"] .modal-header { background: var(--card) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .modal-footer { background: var(--card) !important; border-top-color: var(--border) !important; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* The unit-delete confirmation modal lives inside #modal-custom-units
   which is appended to <body>, outside .admin-shell — so the global
   --card/--border tokens resolve to the storefront palette. Pull the
   admin --az-* tokens directly so the colors match the product-delete
   confirmation modal in both light and dark mode. */
#deleteUnitModal .modal-content,
#teamDeleteConfirmModal .modal-content { background: var(--az-card) !important; border-color: var(--az-card-border) !important; color: var(--az-text) !important; }
#deleteUnitModal .modal-header,
#teamDeleteConfirmModal .modal-header { background: var(--az-card) !important; border-bottom-color: var(--az-card-border) !important; }
#deleteUnitModal .modal-footer,
#teamDeleteConfirmModal .modal-footer { background: var(--az-card) !important; border-top-color: var(--az-card-border) !important; }

/* ─── Dropdowns ─── */
.dropdown-menu { background: var(--card) !important; border-color: var(--border) !important; border-radius: var(--radius); box-shadow: var(--shadow); }
.dropdown-item { color: var(--fg) !important; font-size: 0.875rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--primary-text, var(--primary)) !important; color: var(--bg, #f8f9fb) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06) !important; }
.dropdown-item.active, .dropdown-item:active { background: var(--primary, #6366f1) !important; color: var(--primary-fg, #fff) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08) !important; }
.dropdown-divider { border-color: var(--border) !important; }

/* ─── Clickable table rows ─── */
.table tbody tr[onclick], .table tbody tr[style*="cursor"] { cursor: pointer; transition: background 0.15s; }

/* ─── AJAX content ─── */
#main-content { background: transparent !important; min-height: 100vh; }
main.container { background: transparent !important; }

/* ─── Rich Text Editor ─── */
.rte-quill-root .rte-quill-toolbar { border: 0 !important; padding: 0 !important; background: transparent !important; }
.rte-quill-root .ql-container.ql-snow { border-color: var(--border) !important; border-radius: 0.5rem !important; background: var(--card) !important; color: var(--fg) !important; }
.rte-quill-root .ql-editor { min-height: 140px; color: var(--fg) !important; }
.rte-quill-root .ql-editor a { color: var(--primary) !important; }
.rte-quill-root textarea.rte-code-view { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; min-height: 140px; }
.rte-quill-root .ql-toolbar select.ql-header,
.rte-quill-root .ql-toolbar select.ql-color { background: var(--card) !important; color: var(--fg) !important; border-color: var(--border) !important; }
.rte-quill-root .ql-toolbar.ql-snow .ql-picker-label,
.rte-quill-root .ql-toolbar.ql-snow .ql-picker-item { color: var(--fg) !important; }
.rte-quill-root .ql-toolbar.ql-snow .ql-picker-label { border-color: var(--border) !important; background: var(--card) !important; }
.rte-quill-root .ql-toolbar.ql-snow .ql-picker-options { border-color: var(--border) !important; background: var(--card) !important; }

/* ─── Custom rich text editor (replaces Quill) ─── */
.rte-root { display: flex; flex-direction: column; gap: 6px; }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rte-toolbar .rte-heading { width: auto; min-width: 95px; }
.rte-editor.form-control {
  min-height: 92px;
  height: auto;
  /* No `white-space: pre-wrap` here: the editor stores HTML, and load /
     paste paths already convert literal "\n" to <br> (richtext.js).
     pre-wrap would additionally render the indentation newlines that
     legalService templates use for readability (e.g. between <br> and
     the next field line in the imprint) as visible blank lines, so
     editor preview didn't match the storefront render. Default
     `normal` collapses that whitespace, matching the final render. */
  word-wrap: break-word;
  cursor: text;
  /* User-resizable: drag the bottom-right corner to grow the field.
     resize:vertical requires overflow to not be `visible` — `auto`
     keeps scrollbars only when content actually overflows. */
  resize: vertical;
  overflow: auto;
}
/* Detailed description rich-text editor (product form): 6 lines tall by
   default and user-resizable via the bottom-right drag handle. The
   resize handle requires `overflow` to be other than `visible`, so we
   use `auto` — content scrolls internally when it exceeds the height
   (or the user can drag the handle taller). */
.product-section[data-section-key="detailed_description"] .rte-editor.form-control {
  height: 156px;
  min-height: 156px;
  resize: vertical;
  overflow: auto;
}
.rte-editor a { color: var(--primary); }
.rte-editor h1, .rte-editor h2, .rte-editor h3 { margin: 0.4em 0; line-height: 1.25; }
.rte-editor h1 { font-size: 1.5rem; font-weight: 600; }
.rte-editor h2 { font-size: 1.25rem; font-weight: 600; }
.rte-editor h3 { font-size: 1.1rem; font-weight: 600; }
.rte-editor ul, .rte-editor ol { padding-left: 1.5rem; margin: 0.4em 0; }
.rte-editor p { margin: 0.4em 0; }
.rte-editor p:first-child, .rte-editor h1:first-child, .rte-editor h2:first-child, .rte-editor h3:first-child { margin-top: 0; }
.rte-editor p:last-child, .rte-editor ul:last-child, .rte-editor ol:last-child { margin-bottom: 0; }
.rte-source.form-control {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  min-height: 92px;
}

/* Tables inserted by the rich-text editor. Same classes apply in the
   editor preview (admin) and on the storefront (shop block render),
   since both load this stylesheet.
   `table-layout: fixed` is required so the percentage widths on
   <col> elements actually shape the columns — without it the browser
   computes widths from content and ignores <col style="width:33%">. */
.rte-table { border-collapse: collapse; width: 100%; margin: 0.5em 0; table-layout: fixed; }
.rte-table td, .rte-table th { padding: 6px 10px; vertical-align: top; word-wrap: break-word; }
.rte-table--bordered, .rte-table--bordered td, .rte-table--bordered th { border: 1px solid var(--border, #dee2e6); }
.rte-table--zebra tbody tr:nth-child(even) { background: var(--bg-soft, rgba(0,0,0,0.04)); }
.rte-table--bg tbody tr,
.rte-table--bg thead tr { background: var(--rte-table-bg, transparent); }
[data-theme="dark"] .rte-table--zebra tbody tr:nth-child(even) { background: rgba(255,255,255,0.05); }

/* Editor-only scaffolding for tables — a faint dashed outline around
   every cell so the owner can SEE the column boundaries (and find the
   right edge to drag for resizing) even when the visible border
   option is off. `outline` doesn't participate in box-sizing, so it
   neither shifts layout nor competes with the real border when
   .rte-table--bordered is set. None of this leaks to the storefront
   because .rte-editor only exists in the admin contenteditable mount. */
.rte-editor .rte-table td,
.rte-editor .rte-table th {
  outline: 1px dashed rgba(108, 117, 125, 0.35);
  outline-offset: -1px;
}
[data-theme="dark"] .rte-editor .rte-table td,
[data-theme="dark"] .rte-editor .rte-table th {
  outline-color: rgba(255, 255, 255, 0.22);
}

/* ─── Landing page ─── */
.shadow-glow { box-shadow: 0 10px 30px var(--primary-glow, rgba(159,80,223,.35)); }

/* Landing page: prevent horizontal scroll from full-bleed effects.
   Clip only at html level (viewport edge) so box-shadows on centered
   elements (.landing-btn-primary glow, .landing-cta) can flow past the
   container without being cut off at its edges. */
html { overflow-x: clip; }
body.is-landing-page { overflow-x: visible; max-width: none; }
body.is-landing-page main { position: relative; z-index: 1; overflow-x: visible; }
/* On mobile, re-clip at body level so absolutely-positioned hero cards
   (and any stray wide content) never create a horizontal scrollbar. */
@media (max-width: 768px) {
  body.is-landing-page,
  body.is-landing-page main { overflow-x: clip; }
}

/* Full-bleed: breaks out of .container to span viewport edge-to-edge */
.landing-full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}

.landing-section { position: relative; }

/* ── Ambient page background: single tilted multi-color gradient + dot pattern ── */
.landing-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  color: var(--primary);
}
.landing-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(124,58,237,0.14) 0%,
      rgba(159,80,223,0.12) 22%,
      rgba(210,90,190,0.11) 48%,
      rgba(240,130,130,0.10) 72%,
      rgba(250,190,120,0.11) 100%
    );
  background-attachment: fixed;
}
[data-theme="dark"] .landing-gradient {
  background:
    linear-gradient(135deg,
      rgba(124,58,237,0.20) 0%,
      rgba(159,80,223,0.16) 28%,
      rgba(210,90,190,0.13) 55%,
      rgba(240,130,130,0.11) 80%,
      rgba(250,190,120,0.10) 100%
    );
}
.landing-grid-pattern {
  position: absolute;
  inset: 0;
  color: #4a2a7a;
  opacity: 0.14;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .landing-grid-pattern {
  color: #d9c6f5;
  opacity: 0.12;
  mix-blend-mode: screen;
}

/* ── Eyebrow ── */
.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: var(--primary-subtle);
  color: var(--primary);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(159,80,223,.2);
  backdrop-filter: blur(6px);
  /* Don't let the copy's flex layout stretch the pill to full width */
  align-self: flex-start;
}
.landing-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(159,80,223,.2);
  animation: landingDotPulse 2.4s ease-in-out infinite;
}
@keyframes landingDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(159,80,223,.4); }
  50% { box-shadow: 0 0 0 6px rgba(159,80,223,0); }
}

/* ── Hero ── */
.landing-hero {
  padding: 4rem 0 5rem;
}

.landing-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  align-items: center;
}
.landing-hero-copy {
  max-width: 720px;
  /* Bottom-anchor the content so when the rotator grows to 2 lines the
     eyebrow + static title shift upward, and the subtitle + buttons stay
     put. min-height reserves enough room for the tallest (2-line) case
     in any supported language — extra cushion since the subtitle can
     wrap on wider h1 lines. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 412px;
}

.landing-hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-top: 1rem;
}
.landing-hero-title-static {
  background: linear-gradient(135deg, var(--fg) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Rotating text (JS-driven) — same size as static line, inherits line-height */
.landing-hero-title-static,
.landing-hero-title-rotator-line { display: block; }
.landing-hero-title-rotator-line {
  font-size: 1em;
  line-height: inherit;
  min-height: 1.1em;
}
.landing-rotator {
  display: inline-block;
  background: linear-gradient(120deg, var(--primary) 0%, #e066b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity .26s ease, transform .26s ease;
  will-change: opacity, transform;
  /* Tight line-height + inline-block + background-clip:text can clip
     descenders (g, y, j). Give the box a few px of bottom room without
     changing the surrounding layout. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.landing-rotator.landing-rotator--out {
  opacity: 0;
  transform: translateY(-14px);
}

.landing-hero-subtitle {
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 540px;
}

/* Hero primary CTA: animated gradient + pulsing glow */
.landing-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, #7c3aed 0%, #9f50df 25%, #e066b5 50%, #9f50df 75%, #7c3aed 100%);
  background-size: 250% 100%;
  animation: landingBtnGradient 6s linear infinite, landingBtnGlow 2.8s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(159,80,223,.45), 0 0 0 0 rgba(159,80,223,.55);
  transition: transform .2s ease, box-shadow .3s ease;
}
.landing-btn-primary-inner {
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.75rem;
  position: relative;
  z-index: 1;
}
.landing-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: landingBtnSheen 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.landing-btn-primary:hover,
.landing-btn-primary:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(159,80,223,.55), 0 0 0 6px rgba(159,80,223,.18);
}
.landing-btn-primary:active { transform: translateY(0); }
@keyframes landingBtnGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}
@keyframes landingBtnGlow {
  0%,100% { box-shadow: 0 10px 30px rgba(159,80,223,.35), 0 0 0 0 rgba(159,80,223,.45); }
  50%     { box-shadow: 0 14px 38px rgba(159,80,223,.55), 0 0 0 10px rgba(159,80,223,0); }
}
@keyframes landingBtnSheen {
  0%, 55%  { transform: translateX(-120%); }
  70%      { transform: translateX(120%); }
  100%     { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-btn-primary { animation: none; }
  .landing-btn-primary::after { animation: none; }
}

/* Hero secondary CTA: minimal see-through gray/white */
.landing-btn-ghost {
  padding: .75rem 1.75rem;
  border-radius: 12px;
  font-weight: 600;
  color: var(--fg);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(16,24,40,.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.landing-btn-ghost:hover,
.landing-btn-ghost:focus {
  background: rgba(255,255,255,.8);
  border-color: rgba(159,80,223,.35);
  color: var(--fg);
  transform: translateY(-2px);
}
[data-theme="dark"] .landing-btn-ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--fg);
}
[data-theme="dark"] .landing-btn-ghost:hover,
[data-theme="dark"] .landing-btn-ghost:focus {
  background: rgba(255,255,255,.12);
  border-color: rgba(159,80,223,.45);
}

/* Hero visual — big logo behind 3 stacked cards */
.landing-hero-media {
  position: relative;
  min-height: 460px;
}
.landing-hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 460px;
}
.landing-hero-logo {
  position: absolute;
  top: 50%;
  left: 62%;
  width: 500px;
  max-width: 120%;
  transform: translate(-50%, -50%);
  opacity: .13;
  z-index: 0;
  filter: drop-shadow(0 20px 40px rgba(159,80,223,.3));
  animation: landingLogoFloat 9s ease-in-out infinite;
}
[data-theme="dark"] .landing-hero-logo { opacity: .18; }
@keyframes landingLogoFloat {
  0%,100% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(-50%, calc(-50% - 12px)) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero-logo { animation: none !important; }
}

.landing-hero-card {
  position: absolute;
  width: 210px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(16,24,40,.14), 0 6px 16px rgba(16,24,40,.08);
  transition: transform .3s ease;
  z-index: 2;
}
.landing-hero-card--1 {
  top: 10px; right: 90px; z-index: 4;
  transform: rotate(-5deg);
  animation: landingCardFloat1 7s ease-in-out infinite;
}
.landing-hero-card--2 {
  top: 140px; right: -10px; z-index: 3;
  transform: rotate(5deg);
  animation: landingCardFloat2 8s ease-in-out infinite;
}
.landing-hero-card--3 {
  top: 270px; right: 150px; z-index: 2;
  transform: rotate(-2deg);
  animation: landingCardFloat3 9s ease-in-out infinite;
}
@keyframes landingCardFloat1 {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-10px); }
}
@keyframes landingCardFloat2 {
  0%,100% { transform: rotate(5deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(10px); }
}
@keyframes landingCardFloat3 {
  0%,100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-hero-card { animation: none !important; }
}
.landing-hero-card-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #b8860b;
  font-size: .7rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
[data-theme="dark"] .landing-hero-card-chip { background: rgba(20,26,42,.95); color: #daa520; }
.landing-hero-card-img {
  height: 140px;
  background-color: var(--hover);
  background-size: cover;
  background-position: center;
}
.landing-hero-card-body { padding: .75rem .9rem; }
.landing-hero-card-title { font-size: .85rem; font-weight: 600; color: var(--fg); margin-bottom: .2rem; }
.landing-hero-card-price { font-size: .9rem; color: var(--primary); }
.landing-hero-card-pill { font-size: .75rem; color: var(--muted); }
.landing-hero-card-pill strong { color: var(--primary); margin-left: .25rem; }

/* ── Features ── */
.landing-feature {
  padding: 1.75rem;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[data-theme="dark"] .landing-feature { background: rgba(20,26,42,.78); }
.landing-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(159,80,223,.08);
  border-color: rgba(159,80,223,.3);
}
.landing-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-subtle), rgba(230,110,180,.1));
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.landing-feature-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; color: var(--fg); }
.landing-feature-text { color: var(--muted); font-size: .92rem; line-height: 1.55; margin-bottom: 0; }
/* Horizontal variant: bigger icon to the top-left of the copy (used by the
   speed + security highlight). */
.landing-feature--row { display: flex; align-items: flex-start; gap: 1.15rem; }
.landing-feature-icon--lg { width: 66px; height: 66px; border-radius: 18px; font-size: 1.9rem; flex-shrink: 0; margin-bottom: 0; }

/* ── Screenshot sections ── */
.landing-screenshot-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(16,24,40,.18), 0 10px 30px rgba(159,80,223,.1);
  border: 1px solid var(--border);
  background: var(--card);
}
.landing-screenshot-img {
  display: block;
  width: 100%;
  height: auto;
}
.landing-screenshot-glow {
  position: absolute;
  top: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(159,80,223,.4), rgba(159,80,223,0) 70%);
  pointer-events: none;
  z-index: -1;
  filter: blur(30px);
}
.landing-screenshot-glow--right { top: auto; left: auto; bottom: -40px; right: -40px; }
/* The purple glow reads a little strong on the light background — soften it
   ~20% in light mode (dark mode keeps the full glow). */
[data-theme="light"] .landing-screenshot-glow { opacity: 0.8; }

.landing-bullets { list-style: none; padding: 0; margin: 0; }
.landing-bullets li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .5rem 0;
  color: var(--fg);
}
.landing-bullets li i {
  color: var(--primary);
  margin-top: .2rem;
  font-size: 1rem;
}

/* ── Foundation / partner logo strip (real grayscale logos) ── */
.landing-partners { padding: 2.6rem 0 3rem; }
.landing-partners-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 2rem 2.4rem;
}
.landing-partner-logo {
  /* Logos are pre-trimmed to their ink bounds, so equal height = equal
     optical size. Wordmarks (Hetzner/Resend) get a smaller height below. */
  height: 36px; width: auto; max-width: 150px; flex: 0 0 auto;
  filter: grayscale(1); opacity: .55;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
/* Wordmarks (Hetzner/Resend): smaller, and nudged down to sit on the same
   visual baseline as the icon-lockup logos. */
.landing-partner-logo--wordmark { height: 23px; position: relative; top: 8px; }
/* Let's Encrypt reads a touch small — bump it ~10%. */
.landing-partner-logo--lg { height: 40px; }
.landing-partner-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
/* Dark mode: render every logo as a clean white silhouette (colored or dark
   wordmarks stay visible), brightening on hover instead of revealing color. */
[data-theme="dark"] .landing-partner-logo { filter: grayscale(1) brightness(0) invert(1); opacity: .62; }
[data-theme="dark"] .landing-partner-logo:hover { filter: grayscale(1) brightness(0) invert(1); opacity: 1; transform: translateY(-2px); }
/* On small screens fall back to centered wrapping so logos don't stretch apart */
@media (max-width: 575.98px) {
  .landing-partners-row { justify-content: center; gap: 1.5rem 2rem; }
  .landing-partner-logo { height: 30px; }
  .landing-partner-logo--lg { height: 33px; }
  .landing-partner-logo--wordmark { height: 20px; top: 6px; }
}

/* ── Centered section heading (storefront / dashboard intros) ── */
.landing-section-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.landing-section-head h2 { font-weight: 800; letter-spacing: -.02em; margin: .9rem 0 .6rem; }
.landing-section-head p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* ── Spotlight rows (image + copy, alternating) ── */
.landing-spotlight + .landing-spotlight { margin-top: 3.5rem; }

/* ── Screenshot placeholder figure — owner swaps the <img src> ── */
.landing-shot { margin: 0; }
.landing-shot-frame {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border); background: var(--card);
  box-shadow: 0 24px 60px -30px rgba(40,16,80,.5), 0 8px 24px rgba(159,80,223,.08);
}
.landing-shot-frame img { display: block; width: 100%; height: auto; }
.landing-shot figcaption {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: .8rem; color: var(--muted); margin-top: .7rem;
}
.landing-shot figcaption i { color: var(--primary); opacity: .7; }

/* ── Light/dark showcase sub-label ── */
.landing-theme-label {
  text-align: center; font-weight: 700; font-size: 1.05rem;
  color: var(--muted); margin: 0 0 1.25rem; letter-spacing: -.01em;
}

/* ── Coming soon ── */
.landing-soon-card {
  position: relative;
  padding: 1.75rem;
  background: rgba(255,255,255,.88);
  border: 1px dashed var(--border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease, border-color .2s ease;
}
[data-theme="dark"] .landing-soon-card { background: rgba(20,26,42,.78); }
.landing-soon-card:hover {
  transform: translateY(-3px);
  border-color: rgba(159,80,223,.4);
}
.landing-soon-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #f59e0b, #f97316);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.landing-soon-badge i { font-size: .65rem; margin-right: .25rem; }
.landing-soon-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(249,115,22,.1));
  color: #f59e0b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.landing-soon-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; color: var(--fg); }
.landing-soon-text { color: var(--muted); font-size: .92rem; line-height: 1.55; margin-bottom: 0; }

/* ── Demo strip ── */
.landing-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.5rem;
  background: linear-gradient(135deg, var(--primary-subtle) 0%, var(--card) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  flex-wrap: wrap;
}

/* ── Pricing table (mobile scrollable) ── */
.pricing-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .pricing-scroll { background: rgba(20,26,42,.78); }
.pricing-scroll .pricing-table {
  min-width: 720px;
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.pricing-scroll .pricing-table th,
.pricing-scroll .pricing-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  background: transparent;
  vertical-align: middle;
}
.pricing-scroll .pricing-table tr:last-child td { border-bottom: none; }
.pricing-scroll .pricing-table thead th { color: var(--muted); font-weight: 600; vertical-align: bottom; }

/* Plan header: name + price stack */
.pricing-plan-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.pricing-plan-name--popular {
  position: relative;
  color: var(--primary);
}
.pricing-plan-popular {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .5rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, #7c3aed, #e066b5);
  border-radius: 999px;
  vertical-align: middle;
  box-shadow: 0 3px 10px rgba(159,80,223,.35);
}
.pricing-plan-price {
  display: inline-flex;
  align-items: baseline;
  gap: .05rem;
  background: linear-gradient(120deg, var(--primary) 0%, #e066b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.pricing-plan-currency { font-size: 1rem; margin-right: .1rem; }
.pricing-plan-amount { font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; }
.pricing-plan-period {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  margin-left: .15rem;
  letter-spacing: .02em;
}

/* Pricing CTAs */
.pricing-btn-free,
.pricing-btn-gradient,
.pricing-btn-outline { white-space: nowrap; }
.pricing-btn-free {
  background: linear-gradient(120deg, #16a34a, #22c55e);
  color: #fff !important;
  font-weight: 700;
  border: none;
  padding: .55rem 1rem;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(34,197,94,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pricing-btn-free:hover,
.pricing-btn-free:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(34,197,94,.45);
  color: #fff !important;
  filter: brightness(1.05);
}
.pricing-btn-gradient {
  background: linear-gradient(120deg, #7c3aed 0%, #9f50df 50%, #e066b5 100%);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: #fff !important;
  font-weight: 700;
  border: none;
  padding: .55rem 1rem;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(159,80,223,.35);
  transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}
.pricing-btn-gradient:hover,
.pricing-btn-gradient:focus {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(159,80,223,.5);
  color: #fff !important;
}
.pricing-btn-outline {
  background: transparent;
  color: var(--fg) !important;
  font-weight: 600;
  border: 1px solid var(--border);
  padding: .55rem 1rem;
  border-radius: 10px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pricing-btn-outline:hover,
.pricing-btn-outline:focus {
  border-color: var(--primary);
  color: var(--primary) !important;
  background: var(--primary-subtle);
}

/* ── Monthly / yearly toggle ── */
.pricing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 1.5rem;
}
.pricing-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--bs-tertiary-bg, #f4f4f5);
  border-radius: 999px;
  border: 1px solid var(--border, #e4e4e7);
  gap: 2px;
}
[data-theme="dark"] .pricing-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.pricing-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: .5rem 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted, #71717a);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.pricing-toggle-btn:hover { color: var(--fg, #18181b); }
.pricing-toggle-btn.is-active {
  background: var(--card, #ffffff);
  color: var(--fg, #18181b);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .pricing-toggle-btn.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pricing-toggle-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .03em;
  background: linear-gradient(120deg, #16a34a, #22c55e);
  color: #fff;
  border-radius: 999px;
  line-height: 1.3;
}

/* ── Price variants (monthly vs yearly) ── */
.pricing-price-variant { display: none; }
[data-pricing-mode="monthly"] .pricing-price-variant--monthly { display: inline; }
[data-pricing-mode="yearly"] .pricing-price-variant--yearly { display: inline; }
.pricing-plan-billed-note {
  display: block;
  margin-top: .15rem;
  font-size: .7rem;
  font-weight: 500;
  color: var(--muted, #71717a);
  letter-spacing: 0;
  text-transform: none;
}
.pricing-plan-custom {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ── Shop-owner mode: current plan + "Switch" buttons ── */
.pricing-btn-current {
  background: var(--bs-success, #16a34a);
  color: #fff !important;
  border: none;
  padding: .55rem 1rem;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 1 !important;
  cursor: default;
}
.pricing-btn-current:disabled { opacity: 1 !important; }
.pricing-plan-current-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: 2px 8px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bs-success, #16a34a);
  color: #fff;
  border-radius: 999px;
  vertical-align: middle;
}
.pricing-scroll .pricing-table th.pricing-th--current {
  background: rgba(22, 163, 74, 0.06);
}
[data-theme="dark"] .pricing-scroll .pricing-table th.pricing-th--current {
  background: rgba(34, 197, 94, 0.1);
}

/* ── Superadmin mode: editable limit inputs ── */
.pricing-scroll .pricing-table .pricing-input {
  max-width: 110px;
  margin: 0 auto;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Superadmin mode: pricing editor FX diff pills ── */
.pricing-diff-pill {
  min-width: 64px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pricing-diff-pill--neutral { color: var(--muted, #71717a); }
.pricing-diff-pill--up      { color: #b91c1c; background: rgba(220, 38, 38, 0.08); }
.pricing-diff-pill--down    { color: #15803d; background: rgba(22, 163, 74, 0.08); }
[data-theme="dark"] .pricing-diff-pill--up   { color: #fca5a5; background: rgba(220, 38, 38, 0.16); }
[data-theme="dark"] .pricing-diff-pill--down { color: #86efac; background: rgba(22, 163, 74, 0.18); }

/* ── Final CTA ── */
.landing-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 4.5rem 2rem;
  background:
    radial-gradient(ellipse at 20% 20%, #c17ce8 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, #e066b5 0%, transparent 50%),
    linear-gradient(135deg, #7c3aed 0%, #9f50df 55%, #b85cb8 100%);
  border-radius: 24px;
  color: #fff;
  box-shadow: 0 30px 80px rgba(159,80,223,.35);
}
.landing-cta-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.15) 1.5px, transparent 2px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: .5;
}
.landing-cta-sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.landing-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.landing-cta h2, .landing-cta p, .landing-cta .lead { color: #fff; }
.landing-cta-badge {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
}
.landing-cta-btn {
  background: #fff;
  color: #7c3aed !important;
  border: none;
  font-weight: 700;
  padding: .9rem 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.landing-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0,0,0,.2);
  color: #6d28d9 !important;
}
.landing-cta-fineprint {
  margin: 1.25rem 0 0;
  font-size: .85rem;
  color: rgba(255,255,255,.85) !important;
  letter-spacing: .01em;
}

/* ── Suggest-a-feature card ── */
.landing-suggest-card {
  background: rgba(255,255,255,.88);
  border: 1px dashed rgba(245,158,11,.45);
}
[data-theme="dark"] .landing-suggest-card { background: rgba(20,26,42,.78); }
.landing-suggest-icon {
  background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(249,115,22,.15)) !important;
  color: #f59e0b !important;
  animation: landingSuggestBlink 3.2s ease-in-out infinite;
}
@keyframes landingSuggestBlink {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
  50%     { box-shadow: 0 0 0 6px rgba(245,158,11,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-suggest-icon { animation: none; }
}
.landing-suggest-form textarea {
  resize: vertical;
  min-height: 72px;
}
.landing-suggest-submit {
  background: linear-gradient(120deg, #f59e0b, #f97316);
  color: #fff !important;
  border: none;
  font-weight: 700;
  padding: .45rem 1rem;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(249,115,22,.3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.landing-suggest-submit:hover,
.landing-suggest-submit:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(249,115,22,.4);
  filter: brightness(1.05);
  color: #fff !important;
}
.landing-suggest-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .landing-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .landing-hero-media { min-height: 420px; margin-top: 1rem; }
  .landing-hero-visual { max-width: 420px; margin: 0 auto; }
  .landing-hero-logo { left: 50%; width: 420px; }
  /* More headroom on mobile/tablet: larger min-height gives the content
     room to shift upward when the rotator becomes 2 lines. */
  .landing-hero-copy { min-height: 440px; }
  /* Tighter section rhythm on tablets */
  body.is-landing-page .landing-section.py-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
}
@media (max-width: 768px) {
  body.is-landing-page .landing-section.py-5 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .landing-hero { padding: 1rem 0 2rem; }
}
@media (max-width: 576px) {
  /* Hero sits close to the fixed header */
  .landing-hero { padding: .5rem 0 1.5rem; }
  .landing-hero-copy { text-align: center; margin: 0 auto; }
  .landing-hero-copy .d-flex { justify-content: center; }
  .landing-hero-subtitle { margin-left: auto; margin-right: auto; }
  /* Mobile: copy is centered, so center the eyebrow pill too */
  .landing-eyebrow { align-self: center; }
  .landing-hero-title { text-align: center; }
  .landing-hero-title-static,
  .landing-hero-title-rotator-line { text-align: center; }
  .landing-rotator { display: inline-block; }

  /* Compact, centered card stack with overlap + visible "S" logo */
  .landing-hero-media, .landing-hero-visual { min-height: 430px; max-width: 300px; margin-left: auto; margin-right: auto; }
  .landing-hero-card { width: 160px; }
  .landing-hero-card--1 { right: auto; left: 0; top: 0; }
  .landing-hero-card--2 { right: 0; left: auto; top: 80px; }
  .landing-hero-card--3 { right: auto; left: 70px; top: 180px; }
  /* Logo large enough to peek out between cards, nudged slightly right */
  .landing-hero-logo { left: 52%; width: 380px; opacity: .22; }
  [data-theme="dark"] .landing-hero-logo { opacity: .28; }

  /* Smaller paddings on small screens */
  body.is-landing-page .landing-section.py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .landing-demo { padding: 1.5rem; flex-direction: column; align-items: flex-start; }
  .landing-cta { padding: 2.5rem 1.25rem; border-radius: 20px; }
}

/* ─── Auth pages (login + signup) ─── */
/* Same tilted gradient + dot pattern as the landing page, painted directly
   onto the body so the whole page (below header, above footer) is covered. */
body.is-auth-page {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='1.5' cy='1.5' r='1.5' fill='%234a2a7a' fill-opacity='0.14'/></svg>"),
    linear-gradient(135deg,
      rgba(124,58,237,0.14) 0%,
      rgba(159,80,223,0.12) 22%,
      rgba(210,90,190,0.11) 48%,
      rgba(240,130,130,0.10) 72%,
      rgba(250,190,120,0.11) 100%
    ),
    var(--bg) !important;
  background-attachment: fixed, fixed, fixed;
  background-size: 32px 32px, auto, auto;
}
[data-theme="dark"] body.is-auth-page {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='1.5' cy='1.5' r='1.5' fill='%23d9c6f5' fill-opacity='0.12'/></svg>"),
    linear-gradient(135deg,
      rgba(124,58,237,0.20) 0%,
      rgba(159,80,223,0.16) 28%,
      rgba(210,90,190,0.13) 55%,
      rgba(240,130,130,0.11) 80%,
      rgba(250,190,120,0.10) 100%
    ),
    var(--bg) !important;
  background-attachment: fixed, fixed, fixed;
  background-size: 32px 32px, auto, auto;
}

/* Lock the page to viewport height with no scroll, and zero the
   main margin so body's fixed gradient isn't pushed down 64px by
   main's margin-top collapsing into body. Footer hidden too. */
body.is-auth-page {
  height: 100vh;
  overflow: hidden;
}
body.is-auth-page footer { display: none !important; }
body.is-auth-page main,
body.is-auth-page main.container,
body.is-auth-page main.container.my-4 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.is-auth-page .auth-center {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 1rem 1rem;
}
body.is-auth-page .auth-inner {
  width: 100%;
  max-width: 520px;
}

/* Shop customer auth pages (storefront layout — preserves header/footer).
   Used by shop_account_{login,register,forgot,reset}.ejs and the subscribe/
   unsubscribe status views. Narrow centered column with padding from the
   sticky shop header bar above. */
body:not(.is-auth-page) .auth-center {
  max-width: 480px;
  margin: 0 auto;
  padding: 4rem 1rem 3rem;
}
body:not(.is-auth-page) .auth-inner {
  width: 100%;
}

/* ─── Image uploader + thumbnails ─── */
.shop-logo { max-height: 80px; max-width: 220px; object-fit: contain; border-radius: 8px; }
.category-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); background: var(--card); }

/* ─── FilePond dark ─── */
[data-theme="dark"] .filepond--panel-root { background: var(--card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .filepond--drop-label { color: var(--fg) !important; }
[data-theme="dark"] .filepond--item-panel { background: var(--card) !important; }

/* ─── Category link ─── */
.category-link { color: var(--fg) !important; transition: color 0.15s; }
.category-link:hover { color: var(--primary-text, var(--primary)) !important; }

.htmx-request .btn { opacity: .5; transition: opacity 300ms ease-in; }

/* ─── List group (legacy compat) ─── */
[data-theme="dark"] .list-group-item { background: var(--card) !important; border-color: var(--border) !important; color: var(--fg) !important; }

/* ─── Dark mode: admin sidebar ─── */
[data-theme="dark"] .admin-sidebar { background: var(--sidebar-bg); border-right-color: var(--border); }
[data-theme="dark"] .nav-link-item { color: var(--fg); }
[data-theme="dark"] .nav-link-item:hover { background: var(--hover); color: var(--fg); }
[data-theme="dark"] .nav-link-item.active { background: var(--primary-subtle); color: var(--primary); }
[data-theme="dark"] .nav-section-label { color: var(--muted); }

/* ─── Dark mode: qty controls ─── */
[data-theme="dark"] .qty-control { border-color: var(--border); background: var(--card); }
[data-theme="dark"] .qty-btn { color: var(--fg); }
[data-theme="dark"] .qty-btn:hover { background: var(--hover); }
[data-theme="dark"] .qty-input { color: var(--fg); }

/* ─── Dark mode: shop components ─── */
[data-theme="dark"] .product-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .product-card-title { color: var(--fg); }
[data-theme="dark"] .product-card-placeholder { background: var(--hover); }
[data-theme="dark"] .product-detail-img { background: var(--hover); border-color: var(--border); }
[data-theme="dark"] .cart-item { border-color: var(--border); }
[data-theme="dark"] .cart-item-img { background: var(--hover); }
[data-theme="dark"] .shop-sidebar-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .checkout-step-num { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .checkout-step.active .checkout-step-num { background: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .checkout-step.done .checkout-step-num { background: var(--fg); border-color: var(--fg); color: var(--card); }
[data-theme="dark"] .checkout-step-line { background: var(--border); }

/* ─── Dark mode: breadcrumbs ─── */
[data-theme="dark"] .breadcrumb-item a { color: var(--muted); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--fg); }
[data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before { color: var(--muted); }

/* ─── Dark mode: Bootstrap text utilities that don't auto-adapt ─── */
[data-theme="dark"] .text-body  { color: var(--fg)    !important; }
[data-theme="dark"] .text-secondary { color: var(--muted) !important; }
[data-theme="dark"] .text-dark  { color: var(--fg)    !important; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--fg) !important; }

/* ─── Dark mode: placeholder text ─── */
[data-theme="dark"] ::placeholder { color: var(--muted) !important; opacity: 1; }

/* ─── Dark mode: variant chips & section ─── */
[data-theme="dark"] #variantSection { border-color: var(--border) !important; }
[data-theme="dark"] #variantSectionToggle { color: var(--fg) !important; }
[data-theme="dark"] .variant-option-group { border-color: var(--border) !important; }
[data-theme="dark"] .variant-value-chip { background: var(--hover) !important; border-color: var(--border) !important; }
[data-theme="dark"] .variant-value-chip input { color: var(--fg) !important; background: transparent !important; }
/* The admin-scoped `.form-control` rule at ~line 3054 sets every input
   inside the admin shell to a dark `#161616` in dark mode, overriding the
   `background: transparent` above. For value-name inputs we want the chip
   to be the visible surface — so cancel that paint with a higher-specificity
   selector that keeps the input transparent. */
[data-theme="dark"] .admin-shell[data-admin-shell] .variant-value-chip .form-control {
  background-color: transparent !important;
}

/* ─── Product detail variant chips ─── */
.variant-chip {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.4;
  border: 1.5px solid var(--border);
  border-radius: 2rem;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.variant-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.variant-chip.active {
  border-color: var(--primary-text, var(--primary));
  background: var(--primary-text, var(--primary));
  color: var(--bg, #fff);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.variant-chip.is-flashing {
  animation: variantFlash 0.35s ease 3;
}
.variant-chip.chip-oos {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
}

/* ─── Attributes masonry layout ─── */
.attr-groups-masonry {
  column-count: 1;
  column-gap: 0.5rem;
}
@media (min-width: 768px) {
  .attr-groups-masonry { column-count: 2; }
}
.attr-groups-masonry .attr-group-section {
  break-inside: avoid;
  margin-bottom: 0.5rem;
}

/* ─── Attributes section & groups hover ─── */
#attributeSectionToggle:hover { background: rgba(0,0,0,.04) !important; }
.attr-group-section:hover { background: rgba(0,0,0,.03); }

/* ─── Dark mode: attributes section & groups ─── */
[data-theme="dark"] #attributeSection { border-color: var(--border) !important; }
[data-theme="dark"] #attributeSectionToggle { color: var(--fg) !important; }
[data-theme="dark"] #attributeSectionToggle:hover { background: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .attr-group-section { border-color: var(--border) !important; }
[data-theme="dark"] .attr-group-toggle { color: var(--fg) !important; }
[data-theme="dark"] .attr-group-section:hover { background: rgba(255,255,255,.04); }

/* ─── Mobile shop header ─── */
@media (max-width: 991px) {
  .navbar .container { position: relative; }
  .shop-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
  }
}

/* ─── Issue 3: Hide desktop category sidebar on mobile ─── */
@media (max-width: 991px) {
  [data-ajax-container="shop"] aside.col-lg-3 {
    display: none !important;
  }
}

/* ─── Prevent iOS zoom on input focus + double-tap zoom on buttons ─── */
html, body {
  touch-action: manipulation;
}
a, button, input, select, textarea, label, [role="button"] {
  touch-action: manipulation;
}
@media (max-width: 991px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ─── Footer page links ─── */
.footer-page-link:hover { text-decoration: underline !important; }

/* ─── Legal page typography (tightened) ───
   Scoped to `.legal-content` which is added on partials/shop/page.ejs
   only for page_kind starting with `legal_`. The substantive legal
   templates pack a lot of h2 + p pairs, so the Bootstrap defaults
   (1rem top + 1rem bottom = ~32px between sections) felt loose.
   These rules halve that gap while keeping headings visually
   distinct. Only affects the legal page render — other rich_text
   blocks stay on Bootstrap defaults. */
.legal-content h1 { font-size: 1.65rem; margin: 0 0 0.7rem; line-height: 1.25; }
.legal-content h2 { font-size: 1.15rem; margin: 1.1rem 0 0.35rem; line-height: 1.3; font-weight: 600; }
.legal-content h3 { font-size: 1rem;    margin: 0.9rem 0 0.3rem;  line-height: 1.3; font-weight: 600; }
.legal-content p,
.legal-content ul,
.legal-content ol,
.legal-content table { margin: 0 0 0.55rem; }
.legal-content ul,
.legal-content ol { padding-left: 1.25rem; }
.legal-content li { margin: 0.15rem 0; }
.legal-content .block-rich-text { margin-bottom: 0 !important; }

/* Flash a red ring on the acknowledgement checkbox when the user
   clicks Generate in the legal-text modal without ticking it. Same
   pulse pattern as the storefront variant-chip flash (variantFlash
   above): 3 iterations of 0.35s box-shadow. */
@keyframes legal-ack-flash {
	0%, 100% { box-shadow: none;                                  border-color: #dee2e6; }
	50%      { box-shadow: 0 0 0 4px rgba(220, 53, 69, .55);      border-color: #dc3545; }
}
.legal-ack-flash {
	animation: legal-ack-flash 0.35s ease 3;
}
/* The Generate button looks faded until the user ticks the ack box,
   so the requirement is visually obvious without making the button
   unclickable (it stays clickable so the click can trigger the flash
   above). */
.btn.is-pending-ack {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Admin block editor surface (views/admin/pages/_blocks_editor.ejs).
   The project uses [data-theme="dark"] not [data-bs-theme="dark"], so
   Bootstrap's --bs-tertiary-bg / --bs-border-color never flip in dark
   mode and the editor stays bright. Use the project's own theme vars. */
.block-editor-surface {
	background: var(--bg, #f8f9fb);
	border: 1px solid var(--border, #e5e7eb);
}

/* ─── Shop header page nav links (inside navbar) ─── */
.shop-page-nav-link {
	font-size: .9rem;
	color: var(--fg) !important;
	text-decoration: none !important;
	opacity: .8;
	transition: color .15s, opacity .15s;
}
.shop-page-nav-link:hover,
.shop-page-nav-link.active {
	color: var(--primary-text, var(--primary)) !important;
	opacity: 1;
}

/* ─── CMS page content ─── */
.page-content { line-height: 1.7; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
.page-content p { margin-bottom: 1rem; }
.page-content ul, .page-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.page-content a { color: var(--primary-text, var(--primary)); text-decoration: underline; }
.page-content img { max-width: 100%; height: auto; border-radius: 0.375rem; }

/* ─── Offcanvas dark mode ─── */
[data-theme="dark"] .offcanvas {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
[data-theme="dark"] .offcanvas-header { border-bottom-color: var(--border) !important; }
[data-theme="dark"] .offcanvas .list-group-item { background: var(--card) !important; border-color: var(--border) !important; color: var(--fg) !important; }
[data-theme="dark"] .offcanvas .btn-link { color: var(--fg) !important; }

/* ─── Header Search ─── */
.shop-search-panel {
  background: transparent;
  border-top: 1px solid var(--navbar-border);
  padding: .65rem 0;
  position: relative;
  z-index: 1020;
}
.shop-search-panel .input-group-text {
  border-color: var(--search-border, #6c757d);
  background-color: var(--card);
}
.shop-search-panel .form-control {
  border-color: var(--search-border, #6c757d);
  background-color: var(--card) !important;
  color: var(--fg);
}
.shop-search-panel .btn-outline-secondary {
  background-color: var(--card);
}
.shop-search-panel .form-control:focus,
.shop-search-panel .form-control:focus-visible {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--search-border, #6c757d) !important;
}
.shop-search-panel .form-control:focus ~ .input-group-text,
.shop-search-panel .input-group:focus-within .input-group-text {
  border-color: var(--search-border, #6c757d) !important;
}
.shop-search-panel .btn:focus,
.shop-search-panel .btn:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}
.shop-search-inner { position: relative; }
.shop-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  max-height: 420px;
  overflow-y: auto;
  z-index: 1030;
}
.shop-search-show-all {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  color: var(--primary);
  font-weight: 600;
  font-size: .875rem;
  border-bottom: 1px solid var(--border);
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
  border-radius: .5rem .5rem 0 0;
}
.shop-search-show-all:hover,
.shop-search-show-all.active { background: var(--primary-subtle); color: var(--primary); }
.shop-search-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  transition: background .12s;
  cursor: pointer;
}
.shop-search-item:last-child { border-bottom: none; border-radius: 0 0 .5rem .5rem; }
.shop-search-item:hover,
.shop-search-item.active { background: var(--primary-subtle); color: var(--fg); }
.shop-search-item-thumb {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: .375rem;
  flex-shrink: 0;
  background: var(--border);
}
.shop-search-item-thumb-placeholder {
  width: 42px;
  height: 42px;
  border-radius: .375rem;
  flex-shrink: 0;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .8rem;
}
.shop-search-item-name {
  flex: 1;
  font-size: .875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-search-item-price {
  font-size: .8rem;
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.shop-search-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  color: var(--muted);
  font-size: .875rem;
  gap: .5rem;
}

/* --- Collection Carousel --- */
.collection-carousel {
  position: relative;
}
.collection-carousel-track {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.collection-carousel-track::-webkit-scrollbar { display: none; }
.collection-carousel-item {
  flex: 0 0 180px;
  min-width: 0;
}
@media (min-width: 576px) {
  .collection-carousel-item { flex: 0 0 200px; }
}
@media (min-width: 992px) {
  .collection-carousel-item { flex: 0 0 220px; }
}
.collection-carousel-item .product-card { height: 100%; }
.collection-carousel-item .product-card-img img,
.collection-carousel-item .product-card-img picture img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* Carousel arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background: rgba(255,255,255,.92);
  color: var(--bs-body-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: opacity .2s, background .15s;
  opacity: 0;
  pointer-events: none;
  font-size: .8rem;
}
.collection-carousel:hover .carousel-arrow.is-visible,
.collection-carousel .carousel-arrow.is-visible:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.carousel-arrow:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.carousel-arrow-left { left: 6px; }
.carousel-arrow-right { right: 6px; }
@media (max-width: 575.98px) {
  .carousel-arrow { width: 30px; height: 30px; font-size: .7rem; }
}

/* Collection widget */
.collection-widget { border-bottom: 1px solid var(--bs-border-color); padding-bottom: 1rem; }
.collection-widget:last-child { border-bottom: none; }
[data-theme="dark"] .collection-widget { border-bottom-color: rgba(255,255,255,.08); }

/* Separator block line — uses the same divider colours as the
   collection-widget border above so dividers across the storefront
   feel consistent in both light + dark mode. */
.block-separator__line {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--bs-border-color);
  opacity: 1;
}
[data-theme="dark"] .block-separator__line { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .carousel-arrow { background: rgba(30,30,30,.92); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
[data-theme="dark"] .carousel-arrow:hover { background: rgba(40,40,40,1); color: #fff; }

/* ── Superadmin "viewing shop" banner ──────────────────────── */
.superadmin-shop-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .75rem;
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  color: #664d03;
  flex-shrink: 0;
}
.superadmin-shop-exit-btn {
  background: rgba(102,77,3,.1);
  border: 1px solid rgba(102,77,3,.25);
  color: #664d03;
  font-size: .75rem;
  padding: .2rem .5rem;
  line-height: 1.4;
}
.superadmin-shop-exit-btn:hover { background: rgba(102,77,3,.2); color: #664d03; }
[data-theme="dark"] .superadmin-shop-banner { background: rgba(255,193,7,.15); border-color: rgba(255,193,7,.4); color: #ffc107; }
[data-theme="dark"] .superadmin-shop-exit-btn { background: rgba(255,193,7,.1); border-color: rgba(255,193,7,.3); color: #ffc107; }
[data-theme="dark"] .superadmin-shop-exit-btn:hover { background: rgba(255,193,7,.2); color: #ffd60a; }

/* Shop row hover — reinforce the pointer cursor */
.shop-row:hover td { background: var(--bs-table-hover-bg); }

/* ── Debug bar ──────────────────────────────────────────────── */
.shopiza-debug-bar {
  background: #1e1e2e;
  color: #cdd6f4;
  font-size: .78rem;
  border-bottom: 2px solid #f38ba8;
}
.shopiza-debug-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .35rem 1rem;
  background: transparent;
  border: none;
  color: #cdd6f4;
  cursor: pointer;
  font-size: .78rem;
  gap: .25rem;
}
.shopiza-debug-toggle:hover { background: rgba(255,255,255,.05); }
.shopiza-debug-badge { background: rgba(243,139,168,.2); color: #f38ba8; border-radius: .25rem; padding: .05rem .4rem; font-size: .7rem; }
.shopiza-debug-chevron { transition: transform .2s; font-size: .7rem; }
.shopiza-debug-bar.expanded .shopiza-debug-chevron { transform: rotate(180deg); }
.shopiza-debug-body { display: none; padding: .5rem 1rem .75rem; border-top: 1px solid rgba(255,255,255,.08); }
.shopiza-debug-bar.expanded .shopiza-debug-body { display: block; }
.shopiza-debug-msg { padding: .2rem 0; display: flex; align-items: baseline; gap: .25rem; flex-wrap: wrap; }
.shopiza-debug-msg--error { color: #f38ba8; }
.shopiza-debug-msg--warn  { color: #fab387; }
.shopiza-debug-msg--info  { color: #89dceb; }
.shopiza-debug-detail { background: rgba(255,255,255,.07); border-radius: .2rem; padding: .05rem .35rem; font-size: .7rem; }
.shopiza-debug-grid { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; }
.shopiza-debug-key { color: #a6e3a1; font-weight: 600; white-space: nowrap; }
.shopiza-debug-val { color: #cdd6f4; font-family: monospace; word-break: break-all; }

/* ── Bug report floating button ─────────────────────────────── */
.shopiza-bug-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  height: 2.6rem;
  padding: 0 .9rem;
  border-radius: 2rem;
  background: var(--primary, #6c63ff);
  color: var(--primary-fg, #fff);
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  z-index: 1050;
  transition: transform .15s, box-shadow .15s;
}
#shopizaBugBtn[data-raised] {
  bottom: 5rem;
}
.shopiza-bug-btn:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.shopiza-bug-btn-sep {
  display: inline-block;
  width: 1px;
  height: .9rem;
  background: rgba(255,255,255,.35);
  margin: 0 .1rem;
}
.shopiza-powered-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 0;
}
.shopiza-powered-line1 {
  font-size: .6rem;
  font-weight: 400;
  opacity: .85;
  transition: opacity .2s;
}
.shopiza-powered-line2 {
  font-size: .75rem;
  font-weight: 700;
  transition: opacity .2s;
}
.shopiza-powered-fade {
  opacity: 0 !important;
  transition: opacity .15s !important;
}

/* Bug report modal */
.shopiza-bug-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1055;
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1rem;
}
.shopiza-bug-modal.d-none { display: none !important; }
.shopiza-bug-modal-inner {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: shopizaBugSlideUp .2s ease;
}
@keyframes shopizaBugSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.shopiza-bug-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem .75rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.shopiza-bug-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--bs-secondary-color);
  cursor: pointer;
  padding: 0 .25rem;
}
.shopiza-bug-modal-close:hover { color: var(--bs-body-color); }
.shopiza-bug-modal-body { padding: 1rem; }
.shopiza-bug-debug {
  font-size: .7rem;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  padding: .5rem .75rem;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--bs-body-color);
}
.shopiza-bug-submit-btn {
  background: var(--primary, #6c63ff);
  border-color: var(--primary, #6c63ff);
  color: var(--primary-fg, #fff);
}
.shopiza-bug-submit-btn:hover {
  background: var(--primary-2, #5a52d5);
  border-color: var(--primary-2, #5a52d5);
  color: var(--primary-fg, #fff);
}

/* Bug report modal — dark mode */
[data-theme="dark"] .shopiza-bug-modal {
  background: rgba(0,0,0,.6);
}
[data-theme="dark"] .shopiza-bug-modal-inner {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
[data-theme="dark"] .shopiza-bug-modal-header {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .shopiza-bug-modal-close {
  color: var(--muted);
}
[data-theme="dark"] .shopiza-bug-modal-close:hover {
  color: var(--fg);
}
[data-theme="dark"] .shopiza-bug-modal-inner .form-label,
[data-theme="dark"] .shopiza-bug-modal-inner .fw-semibold {
  color: var(--fg);
}
[data-theme="dark"] .shopiza-bug-modal-inner .form-select,
[data-theme="dark"] .shopiza-bug-modal-inner .form-control {
  background: var(--bg);
  border-color: var(--border);
  color: var(--fg);
}
[data-theme="dark"] .shopiza-bug-modal-inner .form-select:focus,
[data-theme="dark"] .shopiza-bug-modal-inner .form-control:focus {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--fg);
}
[data-theme="dark"] .shopiza-bug-debug {
  background: var(--bg);
  border-color: var(--border);
  color: var(--muted);
}
[data-theme="dark"] .shopiza-bug-modal-inner .text-muted {
  color: var(--muted) !important;
}

/* Bug reports table message truncation */
.dev-report-msg {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.dev-report-msg.expanded {
  display: block;
  -webkit-line-clamp: unset;
}

/* ── Settings page — tabbed shell + section panes ── */
.settings-shell { position: relative; }
.settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #e7e5e4);
  margin: 8px 0 22px;
  padding: 0;
}
.settings-tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  color: var(--az-text-sub, #78716c);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.settings-tab:hover { color: var(--az-text, #1c1917); }
.settings-tab.is-active,
.settings-tab[aria-selected="true"] {
  color: var(--primary, #10b981);
  border-bottom-color: var(--primary, #10b981);
}
/* Tab panes — visibility driven by [data-active-tab] on the shell. */
.settings-pane { display: none; }
.settings-shell[data-active-tab="shop"] .settings-pane[data-tab-pane="shop"],
.settings-shell[data-active-tab="selling"] .settings-pane[data-tab-pane="selling"],
.settings-shell[data-active-tab="domains"] .settings-pane[data-tab-pane="domains"],
.settings-shell[data-active-tab="advanced"] .settings-pane[data-tab-pane="advanced"] { display: block; }
/* Save bar (inside welcome_form) — hide on the Advanced tab (it has its
   own per-section save buttons). Shop/Selling/Domains all share the same
   form so the bar is visible on all three. */
.settings-shell[data-active-tab="advanced"] .settings-save-bar { display: none; }

/* Floating Save bar — `position: fixed` so it sits flush at the viewport
   bottom (no gap from the admin-main padding). `left` matches the sidebar
   width so the bar starts where the main column starts. JS toggles
   `.is-resting` when the natural Save button (inside welcome_form) enters
   the viewport, sliding the floater away to avoid a duplicate. */
.settings-float-save {
  position: fixed;
  left: var(--az-sidebar-w, 240px);
  right: 0;
  bottom: 0;
  /* Stay BELOW `.admin-sidebar` (z-index 10) so the sidebar's closing
     animation — which transitions width back from expanded to collapsed
     while its z-index has already dropped from 50 to 10 — paints cleanly
     on top of the bar instead of being clipped by it. */
  z-index: 5;
  padding: 18px 22px;
  display: flex;
  justify-content: flex-start;
  background: var(--card, #fff);
  border-top: 1px solid var(--border, #e7e5e4);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.05);
  transition: opacity 0.22s ease, transform 0.22s ease, left 0.22s ease;
}
.admin-shell[data-admin-shell].is-collapsed .settings-float-save {
  left: var(--az-sidebar-w-collapsed, 64px);
}
[data-theme="dark"] .settings-float-save {
  background: var(--az-card, #222);
  border-top-color: var(--az-card-border, #2a2a2a);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.35);
}
/* Previously the float bar faded out when the natural in-form Save
   button entered the viewport. That looked weird on shorter tabs
   (Domains) where the natural bar was always visible — there was no
   floating bar at all. Now the floater is always visible on every
   settings tab that should have a Save action, and the natural in-form
   bar is hidden via the rule below. */
.settings-float-save.is-resting {
  /* Intentionally a no-op — keep the floater visible regardless. */
}
/* Hide the natural in-form Save bar everywhere — the floating bar at
   the viewport bottom is the single canonical Save action. The natural
   bar's submit button stays in the DOM though, because the floater's
   trigger button programmatically clicks it. */
.settings-shell .settings-save-bar { display: none; }
.settings-float-save .btn,
.settings-save-bar .btn {
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
}
.settings-float-save .btn .fa-save,
.settings-save-bar .btn .fa-save { font-size: 12px; }

/* Bottom padding on settings pages — must clear the fixed floating Save
   bar (~70px tall including its own padding) so the last item in the
   tab content (e.g. the "Connect a domain" button on the Domains tab)
   isn't hidden behind the bar when the viewport is short. Hidden bar
   on Advanced tab is harmless — the extra padding just leaves blank
   space below the last form there. */
.admin-shell[data-admin-shell] .admin-main:has(.settings-shell) {
  padding-bottom: 110px;
}

/* Same clearance on the pages edit screen — the .settings-float-save
   class is reused there (see views/admin/pages/edit.ejs) so the last
   field doesn't end up tucked behind the floating Save bar. */
.admin-shell[data-admin-shell] .admin-main:has([data-pages-float-save]) {
  padding-bottom: 110px;
}
/* Visually de-emphasise the natural in-form Save row on the pages
   edit screen — the floating bar is the canonical action. Keep the
   button in the DOM so the floating-bar trigger can click() it and
   so screen-reader users can still tab to it. */
[data-pages-natural-save] {
  display: none !important;
}
/* Advanced tab has no floating save bar — restore the tighter padding so
   the last content section doesn't end with an awkward blank gap. */
.admin-shell[data-admin-shell] .admin-main:has(.settings-shell[data-active-tab="advanced"]) {
  padding-bottom: 18px;
}
/* The Advanced tab has independent forms with their own Save buttons. */
.settings-shell[data-active-tab="advanced"] .settings-float-save {
  display: none;
}
/* On mobile the admin shell stacks vertically and the page scrolls at the
   body level; the natural Save button is always reachable, so we hide the
   floating bar entirely there. */
@media (max-width: 991px) {
  .settings-float-save { display: none; }
}

/* ── Settings page sections — same collapsible look as `.product-section`
   in the product edit modal. The JS in settings.ejs wraps everything after
   `.settings-section-title` into `.settings-section-body` at runtime and
   wires a toggle on the title. ── */
.settings-shell .settings-section {
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 8px;
  background: var(--card, #fff);
  /* !important overrides the Bootstrap `mb-4` class still present on the
     markup so the spacing stays consistent across all sections. */
  margin-bottom: 8px !important;
  padding: 0 !important;
  overflow: hidden;
}
.settings-shell .settings-section-title {
  display: flex;
  align-items: center;
  /* Tight gap between the chevron, the leading FontAwesome icon, and the
     title text so they read as a single label, not three columns. */
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  background: #fbfbfb;
  font-weight: 600;
  font-size: 15px;
  /* The legacy `.settings-section-title` rule earlier in this file styled
     the heading as uppercase/spaced — neutralize those here. */
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg, inherit);
  cursor: pointer;
  user-select: none;
}
/* The leading FontAwesome icon inside the title carries `me-2` from the
   markup (0.5rem). Strip that since the flex `gap` already handles spacing. */
.settings-shell .settings-section-title > .fas,
.settings-shell .settings-section-title > .far,
.settings-shell .settings-section-title > .fab {
  margin-right: 0 !important;
}
[data-theme="dark"] .settings-shell .settings-section-title {
  background: #2a2a2a;
}
.settings-shell .settings-section-title .settings-section-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  color: var(--fg-muted, #6c757d);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}
.settings-shell .settings-section.is-collapsed .settings-section-chev {
  transform: rotate(-90deg);
}
.settings-shell .settings-section-body {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border, #e7e5e4);
}
.settings-shell .settings-section.is-collapsed .settings-section-body {
  display: none;
}

/* Shop-logo preview inside the settings page — matches the storefront's
   navbar background (white seamless) so what you see here is the actual
   rendered height. The slider below adjusts the `height` of the image. */
.logo-preview {
  display: inline-block;
  background: #ffffff;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 0;
  max-width: 100%;
  overflow: hidden;
}
.logo-preview__img {
  max-width: 100%;
  object-fit: contain;
}

/* Range slider knob — use the shop's accent. `--primary-text` is the page-
   background-readable variant computed in layout.ejs (white accent darkens
   to gray; very-dark accent lightens in dark mode), so the knob stays
   visible no matter what colour the shop owner picked. */
.form-range::-webkit-slider-thumb {
  background: var(--primary-text, var(--primary, #6366f1));
}
.form-range::-moz-range-thumb {
  background: var(--primary-text, var(--primary, #6366f1));
  border: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--card, #fff), 0 0 0 4px color-mix(in srgb, var(--primary-text, var(--primary, #6366f1)) 25%, transparent);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--card, #fff), 0 0 0 4px color-mix(in srgb, var(--primary-text, var(--primary, #6366f1)) 25%, transparent);
}

/* Catalog display — live preview card on the right. The inner `.product-card`
   uses the storefront's existing styles directly, so the preview looks like
   what a visitor sees. Slight negative top margin pulls it up so it lines
   up with the top edge of the settings on the left. */
.catalog-preview-frame {
  max-width: 320px;
  margin: -16px auto 0;
}

/* Image-shape radio swatches — placeholder rectangles with the ratio
   text inside. The actual radio input still drives the value submitted; we
   just visually replace the text label with a sized swatch. */
.aspect-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hover, #f3f4f6);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 4px;
  color: var(--fg-muted, #6c757d);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.aspect-swatch--1x1 { width: 44px; height: 44px; }
.aspect-swatch--3x4 { width: 33px; height: 44px; }
.aspect-swatch--4x3 { width: 44px; height: 33px; }
[data-theme="dark"] .aspect-swatch {
  background: #2a2a2a;
  border-color: #3a3a3a;
}
/* Soft highlight on the selected radio's swatch. */
.form-check-input:checked + .form-check-label .aspect-swatch {
  border-color: var(--primary, #10b981);
  color: var(--primary, #10b981);
  background: color-mix(in srgb, var(--primary, #10b981) 12%, transparent);
}

/* Vertically centre the radio + swatch as a single row so the three
   `.form-check`s line up even though the swatches have different heights.
   Override Bootstrap's default block layout + absolutely-positioned input. */
.form-check:has(.aspect-swatch) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  min-height: 44px;
  margin-bottom: 0;
}
.form-check:has(.aspect-swatch) > .form-check-input {
  float: none;
  margin: 0;
  flex: 0 0 auto;
}
.form-check:has(.aspect-swatch) > .form-check-label {
  display: inline-flex;
  align-items: center;
}
.catalog-preview-frame .product-card-img {
  cursor: default;
}
/* The shared `.card-atc-label` rule hides the "Add to cart" text at certain
   storefront-card breakpoints. The admin preview is a single fixed-width
   card, so always show the label here. */
.catalog-preview-frame .card-atc-label {
  display: inline !important;
}
.settings-section-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #6c757d);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border, #dee2e6);
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN SHELL — Design handoff (Shopiza Dashboard, 2026-04-20)
   Self-contained: sidebar + topbar + main, replaces old admin-shell.
   ═══════════════════════════════════════════════════════════════════ */

/* Admin shell typography is Inter (loaded site-wide via layout.ejs). No
   secondary font is imported — the design system standardises on Inter. */

:root {
  /* Sidebar is dark in both themes — matches the design brief */
  --az-sb-bg: #141414;
  --az-sb-border: #222;
  --az-sb-text: #f0efed;
  --az-sb-sub: #9a9a9a;
  --az-sb-muted: #7a7a7a;
  --az-sb-hover: rgba(255,255,255,0.05);
  --az-sb-active: rgba(255,255,255,0.06);
  --az-sb-line: #333333;

  --az-topbar: #ffffff;
  --az-topbar-border: #f0efed;
  --az-topbar-input: #fafaf9;
  --az-topbar-input-border: #f0efed;
  --az-topbar-input-text: #333;

  --az-card: #ffffff;
  --az-card-border: #f0efed;
  --az-text: #141414;
  --az-text-sub: #5f5f5f;
  --az-text-muted: #8a8a8a;
  --az-bg: #f5f4f1;
  --az-divider: #f0efed;
  --az-table-head: #fafaf9;
  --az-table-hover: #fdfcfa;
  --az-table-row: #f8f7f5;

  --az-radius-lg: 14px;
  --az-radius-md: 10px;
  --az-radius-sm: 8px;

  --az-sidebar-w: 240px;
  --az-sidebar-w-collapsed: 64px;
  --az-header-h: 60px;
}

[data-theme="dark"] {
  --az-sb-bg: #0f0f0f;
  --az-sb-border: #1c1c1c;
  --az-sb-text: #e8e7e4;
  --az-sb-sub: #9a9a9a;
  --az-sb-muted: #7a7a7a;
  --az-sb-hover: rgba(255,255,255,0.04);
  --az-sb-active: rgba(255,255,255,0.05);
  --az-sb-line: #2c2c2c;

  --az-topbar: #1c1c1c;
  --az-topbar-border: #252525;
  --az-topbar-input: #2a2a2a;
  --az-topbar-input-border: #333;
  --az-topbar-input-text: #ccc;

  --az-card: #222;
  --az-card-border: #2a2a2a;
  --az-text: #e2e1de;
  --az-text-sub: #a6a6a6;
  --az-text-muted: #7e7e7e;
  --az-bg: #161616;
  --az-divider: #2a2a2a;
  --az-table-head: #1e1e1e;
  --az-table-hover: #272727;
  --az-table-row: #252525;
}

/* ── Shell (admin only) ──────────────────────────────── */
body:has(.admin-shell[data-admin-shell]) { background: var(--az-bg) !important; overflow: hidden; }
body:has(.admin-shell[data-admin-shell]) #main-content { height: 100vh; }

/* Within the admin shell, remap the legacy theme tokens (used by Bootstrap
   overrides on subpages: products, orders, settings, etc.) to the az-* tokens
   so every admin page shares identical colors in light and dark mode. */
.admin-shell[data-admin-shell] {
  --bg: var(--az-bg);
  --fg: var(--az-text);
  --muted: var(--az-text-sub);
  --card: var(--az-card);
  --border: var(--az-card-border);
  --hover: var(--az-table-hover);
  --sidebar-bg: var(--az-sb-bg);
  --navbar-bg: var(--az-topbar);
  --navbar-border: var(--az-topbar-border);
}
.admin-shell[data-admin-shell] .admin-main {
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .card {
  background: var(--az-card);
  border-color: var(--az-card-border);
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .card-header,
.admin-shell[data-admin-shell] .admin-main .card-footer {
  background: var(--az-card);
  border-color: var(--az-card-border);
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .table {
  --bs-table-bg: transparent;
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--az-card-border);
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .table thead th {
  background: var(--az-table-head);
  color: var(--az-text-sub);
  border-bottom-color: var(--az-card-border);
}
.admin-shell[data-admin-shell] .admin-main .table-hover > tbody > tr:hover > * {
  background-color: var(--az-table-hover);
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .form-control,
.admin-shell[data-admin-shell] .admin-main .form-select {
  background-color: var(--az-topbar-input);
  border-color: var(--az-topbar-input-border);
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .form-control:focus,
.admin-shell[data-admin-shell] .admin-main .form-select:focus {
  background-color: var(--az-topbar-input);
  color: var(--az-text);
  border-color: var(--primary);
}
.admin-shell[data-admin-shell] .admin-main .form-control::placeholder {
  color: var(--az-text-sub);
}
.admin-shell[data-admin-shell] .admin-main .input-group-text {
  background: var(--az-table-head);
  border-color: var(--az-topbar-input-border);
  color: var(--az-text-sub);
}
.admin-shell[data-admin-shell] .admin-main .list-group-item {
  background: var(--az-card);
  border-color: var(--az-card-border);
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .modal-content {
  background: var(--az-card);
  border-color: var(--az-card-border);
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .dropdown-menu {
  background: var(--az-card);
  border-color: var(--az-card-border);
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .dropdown-item {
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .dropdown-item:hover,
.admin-shell[data-admin-shell] .admin-main .dropdown-item:focus,
.admin-shell[data-admin-shell] .admin-main .dropdown-item.active,
.admin-shell[data-admin-shell] .admin-main .dropdown-item:active {
  background: var(--az-table-hover);
  color: var(--az-text);
  box-shadow: none;
}
.admin-shell[data-admin-shell] .admin-main .nav-tabs {
  border-bottom-color: var(--az-card-border);
}
.admin-shell[data-admin-shell] .admin-main .nav-tabs .nav-link {
  color: var(--az-text-sub);
  border-color: transparent;
}
.admin-shell[data-admin-shell] .admin-main .nav-tabs .nav-link:hover {
  color: var(--az-text);
  border-color: var(--az-card-border) var(--az-card-border) transparent;
}
.admin-shell[data-admin-shell] .admin-main .nav-tabs .nav-link.active {
  background: var(--az-card);
  color: var(--az-text);
  border-color: var(--az-card-border) var(--az-card-border) var(--az-card);
}
.admin-shell[data-admin-shell] .admin-main hr {
  border-color: var(--az-card-border);
  opacity: 1;
}
.admin-shell[data-admin-shell] .admin-main .text-muted { color: var(--az-text-sub) !important; }
[data-theme="dark"] .admin-shell[data-admin-shell] .form-control,
[data-theme="dark"] .admin-shell[data-admin-shell] .form-select,
[data-theme="dark"] .admin-shell[data-admin-shell] textarea.form-control { background-color: #161616 !important; }
[data-theme="dark"] .admin-shell[data-admin-shell] .rte-quill-root .ql-container.ql-snow,
[data-theme="dark"] .admin-shell[data-admin-shell] .rte-quill-root .ql-toolbar.ql-snow .ql-picker-label,
[data-theme="dark"] .admin-shell[data-admin-shell] .rte-quill-root .ql-toolbar.ql-snow .ql-picker-options,
[data-theme="dark"] .admin-shell[data-admin-shell] .rte-quill-root .ql-toolbar select.ql-header,
[data-theme="dark"] .admin-shell[data-admin-shell] .rte-quill-root .ql-toolbar select.ql-color { background-color: #161616 !important; }
.admin-shell[data-admin-shell] .admin-main .bg-light { background: var(--az-table-head) !important; color: var(--az-text); }
.admin-shell[data-admin-shell] .admin-main .bg-white { background: var(--az-card) !important; color: var(--az-text); }
.admin-shell[data-admin-shell] .admin-main .border { border-color: var(--az-card-border) !important; }
.admin-shell[data-admin-shell] .admin-main .border-top,
.admin-shell[data-admin-shell] .admin-main .border-bottom,
.admin-shell[data-admin-shell] .admin-main .border-start,
.admin-shell[data-admin-shell] .admin-main .border-end { border-color: var(--az-card-border) !important; }

.admin-shell[data-admin-shell] {
  display: flex;
  height: 100vh;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--az-bg);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--az-text);
  overflow: hidden;
}

.admin-shell[data-admin-shell] .admin-sidebar {
  width: var(--az-sidebar-w);
  min-width: var(--az-sidebar-w);
  background: var(--az-sb-bg);
  border-right: 1px solid var(--az-sb-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  top: 0;
  overflow: hidden;
  z-index: 10;
  /* Slight overshoot on the width transition for the hover-expand "pop".
     `margin-right` is also transitioned so that the return-to-collapsed
     animation eases the sidebar back inside its slot smoothly. */
  transition:
    width 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
    min-width 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
    margin-right 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.18s ease;
}

.admin-shell[data-admin-shell].is-collapsed:not(.is-hover-expanded) .admin-sidebar {
  width: var(--az-sidebar-w-collapsed);
  min-width: var(--az-sidebar-w-collapsed);
  cursor: default;
}

/* Hover-expand: the sidebar widens back to its full size on hover, but
   *overlays* the main content instead of pushing it. We pull this off by
   keeping `width` at the expanded size while shrinking the flex slot it
   occupies (via a negative `margin-right` worth the difference). The flex
   neighbour (`.admin-main-col`) therefore keeps starting at the collapsed
   offset, while the sidebar renders past its slot on top, lifted via
   `z-index`. Both `width` and `margin-right` transition smoothly, so the
   visual effect is a single pop-out animation with no content shift. */
.admin-shell[data-admin-shell].is-collapsed.is-hover-expanded .admin-sidebar {
  width: var(--az-sidebar-w);
  min-width: var(--az-sidebar-w);
  margin-right: calc(var(--az-sidebar-w-collapsed) - var(--az-sidebar-w));
  z-index: 50;
  cursor: default;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.10);
  transition:
    width 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
    min-width 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
    margin-right 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.18s ease;
}
[data-theme="dark"] .admin-shell[data-admin-shell].is-collapsed.is-hover-expanded .admin-sidebar {
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.45);
}

.admin-shell[data-admin-shell] .admin-main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--az-bg);
}

.admin-shell[data-admin-shell] .admin-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 22px;
  background: var(--az-bg);
  color: var(--az-text);
}

/* ── Sidebar header (shop switcher + collapse) ─────────── */
.az-sidebar-header {
  position: relative;
  height: var(--az-header-h);
  min-height: var(--az-header-h);
  display: flex;
  align-items: center;
  padding: 0 12px 0 10px;
  border-bottom: 1px solid var(--az-sb-border);
  flex-shrink: 0;
  /* Lock width so the shop-switch/name doesn't resize during the sidebar
     expand/collapse animation. Reset when truly collapsed (rule below). */
  min-width: var(--az-sidebar-w, 240px);
  box-sizing: border-box;
}
.is-collapsed:not(.is-hover-expanded) .az-sidebar-header { min-width: 0; }
.is-collapsed:not(.is-hover-expanded) .az-sidebar-header { justify-content: center; padding: 0 4px; }

.az-shop-switch {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--az-sb-text);
  font-family: inherit;
  text-align: left;
  transition: background 0.14s;
}
.az-shop-switch:hover { background: var(--az-sb-hover); }
.az-shop-switch[aria-expanded="true"] { background: var(--az-sb-active); }
.is-collapsed:not(.is-hover-expanded) .az-shop-switch { flex: 0 0 auto; padding: 6px 4px; cursor: ew-resize; pointer-events: none; }

.az-shop-badge {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-fg, #fff);
}
.az-shop-badge.sm { width: 26px; height: 26px; border-radius: 6px; font-size: 12px; }

.az-shop-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--az-sb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.is-collapsed:not(.is-hover-expanded) .az-shop-name,
.is-collapsed:not(.is-hover-expanded) .az-shop-switch > .az-chevron { display: none; }

.az-chevron {
  color: var(--az-sb-sub);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.az-shop-switch[aria-expanded="true"] .az-chevron { transform: rotate(180deg); }

/* ── i18n field lang strip ── */
.az-lang-strip-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}
/* Hide the per-field language strip when the shop has only one locale
   enabled — with nothing to switch between, the strip is just visual
   noise above every input. :has(.az-lang-btn:only-child) matches when
   the strip has exactly one language button, which only happens when
   `normalizedSelectedLocales.length === 1` (or 0) in the server-side
   render. Works across every admin view that uses this component
   without touching individual EJS files. */
.az-lang-strip-wrap:has(.az-lang-strip > .az-lang-btn:only-child) {
  display: none;
}
.az-lang-strip {
  display: flex;
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
}
.az-lang-btn {
  flex-shrink: 0;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  border-radius: 0;
  line-height: 1.6;
  white-space: nowrap;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.az-lang-btn:hover { color: #555; }
.az-lang-btn.is-active {
  color: var(--bs-body-color, #212529);
  border-bottom-color: var(--bs-body-color, #212529);
  font-weight: 700;
}
.az-lang-btn.is-empty { color: #dc3545; border-bottom-color: #dc3545; font-weight: 600; }
.az-lang-btn.is-empty.is-active { background: #dc3545; color: #fff; border-bottom-color: #dc3545; }
[data-theme="dark"] .az-lang-btn { color: #666; }
[data-theme="dark"] .az-lang-btn:hover { color: #bbb; }
[data-theme="dark"] .az-lang-btn.is-active { color: #e9ecef; border-bottom-color: #e9ecef; }
.az-lang-arrow {
  flex-shrink: 0;
  display: none;
  width: 18px;
  height: 22px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  cursor: pointer;
  color: #888;
  align-items: center;
  justify-content: center;
}
.az-lang-strip--compact { max-width: 84px; }
.az-lang-arrow.is-visible { display: flex; }
.az-lang-arrow.has-empty { border-color: #dc3545; background: #fff5f5; color: #dc3545; }
[data-theme="dark"] .az-lang-arrow { background: #2a2a2a; border-color: #444; color: #888; }
[data-theme="dark"] .az-lang-arrow.has-empty { background: #3a1a1a; border-color: #dc3545; color: #dc3545; }

.az-collapse-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--az-sb-sub);
  transition: background 0.14s, color 0.14s;
}
.az-collapse-btn:hover { background: var(--az-sb-hover); color: var(--az-sb-text); }
.is-collapsed:not(.is-hover-expanded) .az-collapse-btn { display: none; }

.az-brand-row {
  display: flex;
  align-items: center;
  /* Bottom padding bumped from 16→22 to match the breathing room the
     sidebar header gives the shop-switch at the top. */
  padding: 0 10px 22px 0;
  transform: translateY(4px);
}
.az-brand-row .az-brand {
  flex: 1;
  padding-bottom: 0;
}
.is-collapsed:not(.is-hover-expanded) .az-brand-row { justify-content: center; padding-right: 0; }

.az-shop-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 8px;
  right: 8px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 6px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.az-shop-dropdown[hidden] { display: none; }
.az-shop-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: default;
  background: transparent;
  color: #ddd;
  transition: background 0.12s;
}
.az-shop-dropdown-item.is-active { background: rgba(255,255,255,0.07); }
.az-shop-dropdown-name { font-size: 13px; font-weight: 500; flex: 1; color: #ddd; }
.az-shop-dropdown-dot { width: 6px; height: 6px; border-radius: 50%; }
.az-shop-dropdown-manage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #aaa;
  font-size: 12.5px;
  text-decoration: none;
  border-top: 1px solid #2a2a2a;
  margin-top: 4px;
  padding-top: 10px;
  transition: color 0.12s, background 0.12s;
}
.az-shop-dropdown-manage:hover { color: #fff; background: rgba(255,255,255,0.04); text-decoration: none; }

/* Superadmin "viewing as shop" banner (shown inside sidebar when viewing a specific shop) */
.az-superadmin-banner {
  margin: 8px 10px 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.az-superadmin-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d4a107;
  font-size: 11px;
  font-weight: 600;
}
.az-superadmin-banner-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-superadmin-banner-text i { flex-shrink: 0; }
.az-superadmin-exit {
  background: transparent;
  border: 0;
  color: #d4a107;
  cursor: pointer;
  width: 20px; height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.az-superadmin-exit:hover { background: rgba(255, 193, 7, 0.15); }
.is-collapsed:not(.is-hover-expanded) .az-superadmin-banner { display: none; }

/* ── Sidebar nav ─────────────────────────────────────── */
.az-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) transparent;
  /* Lock width during sidebar expand/collapse animation so nav-items + their
     labels don't reflow/resize as the sidebar width transitions. Sidebar's
     `overflow: hidden` clips the overflow during the animation. Reset to
     natural width when truly collapsed (see rule below) so icons can recenter. */
  min-width: var(--az-sidebar-w, 240px);
}
.is-collapsed:not(.is-hover-expanded) .az-nav { min-width: 0; }
.az-nav::-webkit-scrollbar { width: 6px; height: 6px; }
.az-nav::-webkit-scrollbar-track { background: transparent; }
.az-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.az-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.42); }
.az-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.32); }
.az-nav::-webkit-scrollbar-corner { background: transparent; }

.az-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  color: #d9d8d5;
  background: transparent;
  border: 0;
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: all 0.13s;
  position: relative;
  margin-bottom: 1px;
}
.az-nav-item:hover { background: var(--az-sb-hover); color: var(--az-sb-text); text-decoration: none; }
.az-nav-item.is-active {
  background: color-mix(in srgb, var(--primary, #b8d957) 14%, transparent);
  color: var(--az-sb-text);
}
.az-nav-item.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px 0 0 2px;
  background: var(--primary, #b8d957);
}
.az-nav-item.is-active .az-nav-icon { color: var(--primary, #b8d957); }
.is-collapsed:not(.is-hover-expanded) .az-nav-item.is-active::after { display: none; }

.az-nav-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  width: 17px;
  color: inherit;
}

.az-nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.is-collapsed:not(.is-hover-expanded) .az-nav-label,
.is-collapsed:not(.is-hover-expanded) .az-nav-caret { display: none; }
.is-collapsed:not(.is-hover-expanded) .az-nav-item { justify-content: center; padding: 9px; }

.az-nav-caret {
  color: var(--az-sb-muted);
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s;
  transform: rotate(-90deg);
}
.az-nav-group.is-open > .az-nav-parent .az-nav-caret { transform: none; }

.az-nav-parent { cursor: pointer; }

.az-nav-children {
  padding-left: 20px;
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, margin-bottom 0.22s ease;
}
.az-nav-group.is-open .az-nav-children { max-height: 400px; margin-bottom: 4px; }
.is-collapsed:not(.is-hover-expanded) .az-nav-children { display: none; }

.az-nav-tree-trunk {
  display: none;
}

.az-nav-child {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 30px;
  margin: 2px 0;
  color: #d9d8d5;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  transition: color 0.12s;
  isolation: isolate;
}
.az-nav-child::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  right: 0;
  border-radius: 8px;
  background: transparent;
  transition: background 0.12s;
  z-index: -1;
}
.az-nav-child:hover { color: var(--az-sb-text); text-decoration: none; }
.az-nav-child:hover::before { background: var(--az-sb-hover); }
.az-nav-child.is-active {
  color: var(--az-sb-text);
  font-weight: 500;
}
.az-nav-child.is-active::before {
  background: color-mix(in srgb, var(--primary, #b8d957) 10%, transparent);
}
.az-nav-child.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px 0 0 2px;
  background: var(--primary, #b8d957);
}
.is-collapsed:not(.is-hover-expanded) .az-nav-child.is-active::after { display: none; }
.az-nav-child-label { flex: 1; }

.az-nav-tree-branch {
  position: absolute;
  left: -2px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--az-sb-line);
}
/* Vertical line from branch upward to top of children container */
.az-nav-tree-branch::before {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  bottom: 0;
  top: -400px;
  background: var(--az-sb-line);
}

.az-nav-divider {
  height: 1px;
  background: var(--az-sb-line);
  margin: 10px 4px;
}

/* ── Upgrade bubble ──────────────────────────────────── */
.az-upgrade {
  margin: 0 10px 12px;
  transform: translateY(-2px);
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 14px;
  position: relative;
  flex-shrink: 0;
  /* Lock width so the banner doesn't reflow during the sidebar expand/
     collapse animation. Sidebar's `overflow: hidden` clips it during the
     transition. Released to natural width when truly collapsed below. */
  min-width: calc(var(--az-sidebar-w, 240px) - 20px);
  box-sizing: border-box;
}
.is-collapsed:not(.is-hover-expanded) .az-upgrade { display: none; }
.az-upgrade.is-dismissed { display: none; }

.az-upgrade-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: color 0.12s;
}
.az-upgrade-close:hover { color: #aaa; }

.az-upgrade-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.az-upgrade-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-fg, #fff);
}
.az-upgrade-title {
  color: #f0efed;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
}
.az-upgrade-body {
  font-size: 11.5px;
  color: #666;
  line-height: 1.55;
  margin: 0 0 12px;
}
.az-upgrade-cta {
  display: block;
  text-align: center;
  padding: 8px 0;
  color: var(--primary-fg, #ffffff);
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: opacity 0.14s;
}
.az-upgrade-cta:hover { opacity: 0.85; color: var(--primary-fg, #ffffff); text-decoration: none; }

/* ── Sidebar footer: divider + Shopiza brand ─────────── */
.az-sidebar-divider {
  height: 1px;
  background: var(--az-sb-border);
  margin: 0 12px 12px;
  transform: translateY(-2px);
}

.az-brand {
  /* Left padding bumped from 12→18 so the Shopiza badge sits at the same
     left offset as the shop-switch badge at the top of the sidebar
     (header padding 10px + shop-switch padding 8px = 18px). */
  padding: 0 18px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.az-brand:hover { text-decoration: none; }
/* Padding-bottom stays 0 (matches the row's `.az-brand .az-brand-row`
   override) so the brand element keeps the same height — otherwise the
   row grows by 16px in collapsed mode and the anchored-bottom layout
   pushes the logo upward. */
.is-collapsed:not(.is-hover-expanded) .az-brand { justify-content: center; padding: 0; }

.az-brand-badge {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-fg, #fff);
}
.az-brand-badge--logo {
  overflow: hidden;
}
.az-brand-badge--logo img {
  width: 18px; height: 18px;
  object-fit: contain;
}
.az-brand-logo--light { display: block; }
.az-brand-logo--dark { display: none; }
[data-theme="dark"] .az-brand-logo--light { display: none; }
[data-theme="dark"] .az-brand-logo--dark { display: block; }
/* nowrap on the brand text so the plan label doesn't wrap onto two lines
   mid-animation while the sidebar's width transitions from collapsed to
   expanded — a multi-line wrap would temporarily push the logo upward. */
.az-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.is-collapsed:not(.is-hover-expanded) .az-brand-text { display: none; }
.az-brand-name { color: var(--az-sb-text); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-brand-version { color: var(--az-sb-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Topbar ──────────────────────────────────────────── */
.az-topbar {
  height: var(--az-header-h);
  min-height: var(--az-header-h);
  background: var(--az-topbar);
  border-bottom: 1px solid var(--az-topbar-border);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.az-topbar-search {
  position: relative;
  flex: 1;
  max-width: 320px;
  display: flex;
  align-items: center;
}
.az-topbar-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--az-text-muted);
  pointer-events: none;
}
.az-topbar-search input {
  width: 100%;
  padding: 8px 12px 8px 33px;
  border: 1px solid var(--az-topbar-input-border);
  border-radius: var(--az-radius-md);
  font-size: 13px;
  color: var(--az-topbar-input-text);
  background: var(--az-topbar-input);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.az-topbar-search input:focus { border-color: var(--primary, #b8d957); }
.az-topbar-search input::placeholder { color: var(--az-text-muted); }

/* Global search results dropdown */
.az-sr-box {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--az-card);
  border: 1px solid var(--az-card-border);
  border-radius: var(--az-radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
}
.az-sr-group-label {
  padding: 6px 8px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--az-text-muted);
}
.az-sr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--az-radius-sm);
  color: var(--az-text);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.az-sr-item:hover,
.az-sr-item:focus {
  background: var(--az-table-hover);
  color: var(--az-text);
  text-decoration: none;
  outline: none;
}
.az-sr-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  color: var(--az-text-muted);
  font-size: 12px;
}
.az-sr-name { flex: 1; font-weight: 500; }
.az-sr-sub {
  font-size: 12px;
  color: var(--az-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.az-sr-empty {
  padding: 20px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--az-text-sub);
}

.az-topbar-spacer { flex: 1; }

.az-topbar-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--primary, #b8d957);
  color: var(--primary-fg, #ffffff) !important;
  border: 0;
  border-radius: var(--az-radius-md);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--primary, #b8d957) 38%, transparent);
  transition: opacity 0.14s;
}
.az-topbar-primary:hover { opacity: 0.85; color: var(--primary-fg, #ffffff) !important; text-decoration: none; }
.az-topbar-primary i { font-size: 11px; }

.az-topbar-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid #dedddb;
  background: transparent;
  color: var(--az-text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.13s;
  position: relative;
}
.az-topbar-btn:hover { background: var(--az-topbar-input); color: var(--az-text); }
[data-theme="dark"] .az-topbar-btn { border-color: #3a3a3a; }
.az-topbar-btn-wide { width: auto; gap: 5px; padding: 0 10px; font-size: 12px; font-weight: 600; }
.az-topbar-lang-code { color: var(--az-text); }
.az-topbar-bell-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px; height: 7px;
  background: #e05252;
  border-radius: 50%;
  border: 2px solid var(--az-topbar);
}

.az-topbar-menu { position: relative; }

.az-topbar-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--az-topbar);
  border: 1px solid var(--az-topbar-border);
  border-radius: 12px;
  padding: 6px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 170px;
}
[data-theme="dark"] .az-topbar-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.az-topbar-dropdown-right { left: auto; right: 0; min-width: 190px; }
.az-topbar-dropdown[hidden] { display: none; }

.az-topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--az-text);
  font-size: 13px;
  text-decoration: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.az-topbar-dropdown-item:hover { background: var(--az-topbar-input); text-decoration: none; color: var(--az-text); }
.az-topbar-dropdown-item.is-active { background: color-mix(in srgb, var(--primary, #b8d957) 10%, transparent); font-weight: 600; }
.az-topbar-dropdown-danger { color: #d9534f; }
.az-topbar-dropdown-danger:hover { color: #d9534f; background: rgba(217, 83, 79, 0.08); }
.az-topbar-dropdown-divider { height: 1px; background: var(--az-topbar-border); margin: 4px 0; }

.az-flag { font-size: 15px; line-height: 1; }
.az-lang-label { flex: 1; }
.az-lang-short { font-size: 11px; color: var(--az-text-muted); }

.az-topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--az-topbar-border);
  margin: 0 2px;
}

.az-topbar-user { position: relative; }
.az-topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  padding: 4px 6px 4px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.14s;
}
.az-topbar-user-btn:hover { background: var(--az-topbar-input); }
.az-topbar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b8ff9, #9b6fe8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.az-topbar-user-info { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.az-topbar-user-name { font-size: 12px; font-weight: 600; color: var(--az-text); }
.az-topbar-user-role { font-size: 11px; color: var(--az-text-muted); }
.az-topbar-user-btn svg { color: var(--az-text-muted); }

/* ── Admin main content: card/table/button restyling ── */
.admin-shell[data-admin-shell] .admin-main .card {
  background: var(--az-card);
  border: 1px solid var(--az-card-border);
  border-radius: var(--az-radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.admin-shell[data-admin-shell] .admin-main .card-header {
  background: var(--az-card);
  border-bottom: 1px solid var(--az-divider);
  padding: 14px 22px;
}
.admin-shell[data-admin-shell] .admin-main .card-body { padding: 20px 22px; }

.admin-shell[data-admin-shell] .admin-main h1,
.admin-shell[data-admin-shell] .admin-main h2,
.admin-shell[data-admin-shell] .admin-main h3,
.admin-shell[data-admin-shell] .admin-main h4,
.admin-shell[data-admin-shell] .admin-main h5,
.admin-shell[data-admin-shell] .admin-main h6 {
  color: var(--az-text);
  letter-spacing: -0.3px;
}

.admin-shell[data-admin-shell] .admin-main .text-muted { color: var(--az-text-muted) !important; }

.admin-shell[data-admin-shell] .admin-main .table { color: var(--az-text); margin-bottom: 0; }
.admin-shell[data-admin-shell] .admin-main .table thead tr { background: var(--az-table-head); }
.admin-shell[data-admin-shell] .admin-main .table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--az-text-muted);
  border-bottom: 1px solid var(--az-divider);
  padding: 10px 22px;
}
.admin-shell[data-admin-shell] .admin-main .table td {
  padding: 11px 22px;
  border-top: 1px solid var(--az-table-row);
  border-bottom: 0;
  color: var(--az-text);
  font-size: 13px;
}
.admin-shell[data-admin-shell] .admin-main .table-hover > tbody > tr:hover > td {
  background: var(--az-table-hover) !important;
}

/* Dashboard stat card */
.admin-shell[data-admin-shell] .admin-main .stat-card {
  background: var(--az-card);
  border: 1px solid var(--az-card-border);
  border-radius: var(--az-radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.admin-shell[data-admin-shell] .admin-main .stat-card .card-body { padding: 20px 22px; }
.admin-shell[data-admin-shell] .admin-main .stat-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--az-text);
}
.admin-shell[data-admin-shell] .admin-main .stat-label {
  font-size: 12px;
  color: var(--az-text-sub);
  font-weight: 500;
}

/* Primary button — use accent */
.admin-shell[data-admin-shell] .admin-main .btn-primary {
  background: var(--primary, #b8d957);
  border-color: var(--primary, #b8d957);
  color: var(--primary-fg, #ffffff);
  font-weight: 600;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--primary, #b8d957) 30%, transparent);
}
.admin-shell[data-admin-shell] .admin-main .btn-primary:hover,
.admin-shell[data-admin-shell] .admin-main .btn-primary:focus {
  background: var(--primary-2, var(--primary, #b8d957));
  border-color: var(--primary-2, var(--primary, #b8d957));
  color: var(--primary-fg, #ffffff);
  filter: brightness(0.95);
}
.admin-shell[data-admin-shell] .admin-main .btn-outline-primary {
  color: var(--primary, #b8d957) !important;
  border-color: var(--primary, #b8d957) !important;
}
.admin-shell[data-admin-shell] .admin-main .btn-outline-primary:hover {
  background: var(--primary, #b8d957) !important;
  color: #1a2200 !important;
  border-color: var(--primary, #b8d957) !important;
}

/* Form inputs: match topbar style */
.admin-shell[data-admin-shell] .admin-main .form-control,
.admin-shell[data-admin-shell] .admin-main .form-select {
  background-color: var(--az-topbar-input);
  border: 1px solid var(--az-topbar-input-border);
  color: var(--az-text);
  border-radius: var(--az-radius-md);
  font-size: 13px;
}
.admin-shell[data-admin-shell] .admin-main .form-control:focus,
.admin-shell[data-admin-shell] .admin-main .form-select:focus {
  border-color: var(--primary, #b8d957);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #b8d957) 18%, transparent);
}

/* Ensure a single, correctly-themed dropdown arrow on .form-select in admin
   (earlier background: shorthand was wiping Bootstrap's SVG arrow). */
.admin-shell[data-admin-shell] .admin-main .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23555' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
[data-theme="dark"] .admin-shell[data-admin-shell] .admin-main .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bbb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Page heading spacing (design has 18px margin under heading block) */
.admin-shell[data-admin-shell] .admin-main > *:first-child { margin-top: 0; }

/* Responsive */
@media (max-width: 991px) {
  .admin-shell[data-admin-shell] { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  body:has(.admin-shell[data-admin-shell]) { overflow: auto; }
  body:has(.admin-shell[data-admin-shell]) #main-content { height: auto; }
  .admin-shell[data-admin-shell] .admin-sidebar {
    width: 100%;
    min-width: 0;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--az-sb-border);
  }
  .admin-shell[data-admin-shell].is-collapsed:not(.is-hover-expanded) .admin-sidebar { width: 100%; min-width: 0; cursor: default; }
  .admin-shell[data-admin-shell] .admin-main-col { height: auto; overflow: visible; }
  .admin-shell[data-admin-shell] .admin-main { overflow: visible; padding: 16px; }
  .az-topbar { padding: 0 16px; gap: 8px; }
  .az-topbar-search { max-width: none; }
  .az-topbar-user-info { display: none; }
  .az-topbar-primary span { display: none; }
}

/* Old admin styles: suppress in new shell */
.admin-shell[data-admin-shell] .admin-nav,
.admin-shell[data-admin-shell] .nav-section,
.admin-shell[data-admin-shell] .nav-section-label,
.admin-shell[data-admin-shell] .nav-link-item,
.admin-shell[data-admin-shell] .superadmin-shop-banner {
  /* not used in new markup, kept here for safety if any old view still emits them */
}

/* ═══ ADMIN DASHBOARD — page-level styles ═══════════════════════════ */
.admin-shell[data-admin-shell] .admin-main .az-page-head { margin-bottom: 18px; }
.admin-shell[data-admin-shell] .admin-main .az-page-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--az-text);
  margin: 0;
}
.admin-shell[data-admin-shell] .admin-main .az-page-sub {
  font-size: 13px;
  color: var(--az-text-muted);
  margin: 3px 0 0;
}

.az-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .az-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .az-stat-grid { grid-template-columns: 1fr; } }

.az-stat {
  background: var(--az-card);
  border: 1px solid var(--az-card-border);
  border-radius: var(--az-radius-lg);
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.az-stat-label { font-size: 12px; color: var(--az-text-sub); font-weight: 500; margin-bottom: 8px; }
.az-stat-value { font-size: 24px; font-weight: 700; color: var(--az-text); letter-spacing: -0.5px; margin-bottom: 8px; line-height: 1.1; }
.az-stat-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.az-stat-meta-accent { color: var(--primary, #b8d957); font-weight: 600; }
.az-stat-meta-sub { color: var(--az-text-muted); }

.az-dash-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 991px) { .az-dash-row { grid-template-columns: 1fr; } }

.az-panel {
  background: var(--az-card);
  border: 1px solid var(--az-card-border);
  border-radius: var(--az-radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.az-panel-head {
  padding: 18px 22px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--az-divider);
  gap: 12px;
}
.az-panel-title { font-size: 13px; font-weight: 600; color: var(--az-text); }
.az-panel-sub  { font-size: 11px; color: var(--az-text-muted); margin-top: 2px; }
.az-panel-action {
  font-size: 12px;
  color: var(--az-text-sub);
  border: 1px solid var(--az-card-border);
  border-radius: 8px;
  padding: 5px 12px;
  background: var(--az-topbar-input);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.13s;
}
.az-panel-action:hover { color: var(--az-text); border-color: var(--primary, #b8d957); text-decoration: none; }

.az-table-wrap { overflow-x: auto; }
.az-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.az-table thead tr { background: var(--az-table-head); }
.az-table th {
  padding: 10px 22px;
  text-align: left;
  font-size: 11px;
  color: var(--az-text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.az-table tbody tr {
  border-top: 1px solid var(--az-table-row);
  cursor: pointer;
  transition: background 0.13s;
}
.az-table tbody tr:hover { background: var(--az-table-hover); }
.az-table td { padding: 11px 22px; font-size: 13px; color: var(--az-text); vertical-align: middle; }
.az-table-id { color: var(--az-text-sub); font-weight: 500; }
.az-table-primary { font-weight: 500; color: var(--az-text); }
.az-table-secondary { color: var(--az-text-sub); font-size: 12px; margin-top: 2px; }
.az-table-amount { font-weight: 600; color: var(--az-text); }
.az-table-date { color: var(--az-text-muted); font-size: 12px; }
.az-table .text-end { text-align: right; }

.az-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.01em;
}
.az-badge-success { background: rgba(92,184,92,0.12); color: #3a8f3a; }
.az-badge-warning { background: rgba(240,160,50,0.12); color: #b07a10; }
.az-badge-danger  { background: rgba(224,82,82,0.12); color: #b83030; }
.az-badge-info    { background: rgba(90,150,249,0.12); color: #3a6fd4; }
[data-theme="dark"] .az-badge-success { background: rgba(92,184,92,0.16); color: #6bd36b; }
[data-theme="dark"] .az-badge-warning { background: rgba(240,160,50,0.16); color: #e9b660; }
[data-theme="dark"] .az-badge-danger  { background: rgba(224,82,82,0.18); color: #ef7a7a; }
[data-theme="dark"] .az-badge-info    { background: rgba(90,150,249,0.16); color: #7faaf8; }

.az-empty {
  padding: 48px 22px;
  text-align: center;
  color: var(--az-text-muted);
}
.az-empty i { font-size: 28px; opacity: 0.4; margin-bottom: 10px; display: block; }
.az-empty p { margin: 0; font-size: 13px; }

.az-action-list { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.az-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--az-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--az-card-border);
  background: var(--az-topbar-input);
  transition: all 0.13s;
}
.az-action:hover {
  background: color-mix(in srgb, var(--primary, #b8d957) 8%, var(--az-topbar-input));
  border-color: color-mix(in srgb, var(--primary, #b8d957) 40%, var(--az-card-border));
  color: var(--az-text);
  text-decoration: none;
}
.az-action-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--az-card);
  color: var(--primary-text, var(--primary, #b8d957));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.az-action-primary {
  background: var(--primary, #b8d957);
  color: var(--primary-fg, #ffffff);
  border-color: var(--primary, #b8d957);
}
.az-action-primary:hover {
  background: var(--primary, #b8d957);
  color: var(--primary-fg, #ffffff);
  opacity: 0.9;
}
.az-action-primary .az-action-icon { background: rgba(0,0,0,0.1); color: var(--primary-fg, #ffffff); }

.az-empty-state {
  padding: 56px 22px;
  text-align: center;
  color: var(--az-text-muted);
}
.az-empty-state i { font-size: 40px; opacity: 0.4; margin-bottom: 16px; display: block; }
.az-empty-state h5 { color: var(--az-text); margin: 0; font-weight: 600; }

/* ── Language / Currency Switcher (LC) ──────────────────────────────────── */
.lc-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lc-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
  user-select: none;
}
.lc-trigger.is-open {
  background-color: var(--primary-subtle, rgba(26,63,212,0.07)) !important;
  border-color: var(--primary, #1A3FD4) !important;
  color: var(--primary-text, var(--primary, #1A3FD4)) !important;
  box-shadow: none !important;
}
.lc-trigger-globe { flex-shrink: 0; opacity: 0.8; }
.lc-trigger.is-open .lc-trigger-globe { opacity: 1; }
.lc-trigger-label { display: inline-flex; align-items: center; }
.lc-trigger-code { font-weight: 600; letter-spacing: 0.03em; }
.lc-trigger-sep { }
.lc-trigger-chevron {
  width: 10px; height: 10px;
  flex-shrink: 0;
  transition: transform 0.18s;
  opacity: 0.55;
}
.lc-trigger.is-open .lc-trigger-chevron { transform: rotate(180deg); opacity: 1; }

/* Panel */
.lc-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.09));
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 10px 24px -4px rgba(0,0,0,0.10);
  overflow: hidden;
  z-index: 1050;
  display: flex;
  flex-direction: column;
}
.lc-panel[hidden] { display: none; }

/* Two columns */
.lc-cols { display: flex; height: 240px; }
.lc-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lc-col + .lc-col { border-left: 1px solid rgba(0,0,0,0.06); }

.lc-col-head {
  padding: 10px 14px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted, #A8A49E);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.lc-col-search {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
  flex-shrink: 0;
}
.lc-col-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted, #A8A49E);
}
.lc-col-search input {
  width: 100%;
  padding: 5px 8px 5px 26px;
  background: var(--bg, #f8f9fb);
  border: 1px solid var(--border, rgba(0,0,0,0.09));
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  color: var(--fg, #18160F);
  outline: none;
  transition: border-color 0.1s;
}
.lc-col-search input:focus { border-color: var(--primary, #1A3FD4); }
.lc-col-search input::placeholder { color: var(--muted, #A8A49E); }

.lc-col-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.lc-col-list::-webkit-scrollbar { width: 4px; }
.lc-col-list::-webkit-scrollbar-track { background: transparent; }
.lc-col-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
.lc-col-list { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }

/* List item */
.lc-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.08s;
  border-left: 2px solid transparent;
}
.lc-item:hover { background: rgba(0,0,0,0.04); }
.lc-item.is-selected {
  background: var(--primary-subtle, rgba(26,63,212,0.07));
  border-left-color: var(--primary, #1A3FD4);
}
.lc-item.is-hidden { display: none !important; }
.lc-item-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.lc-item-sym {
  width: 26px; height: 26px;
  border-radius: 4px;
  background: var(--bg, #f8f9fb);
  border: 1px solid var(--border, rgba(0,0,0,0.09));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #6B6860);
  flex-shrink: 0;
}
.lc-item.is-selected .lc-item-sym {
  background: var(--primary, #1A3FD4);
  border-color: var(--primary, #1A3FD4);
  color: #fff;
}
.lc-item-body { flex: 1; min-width: 0; }
.lc-item-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--fg, #18160F);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.lc-item.is-selected .lc-item-name {
  font-weight: 600;
  color: var(--primary-text, var(--primary, #1A3FD4));
}
.lc-item-sub {
  font-size: 11px;
  color: var(--muted, #A8A49E);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 1px;
}
.lc-item-code {
  font-size: 11px;
  color: var(--muted, #A8A49E);
  flex-shrink: 0;
}
.lc-item.is-selected .lc-item-code { color: var(--primary-text, var(--primary, #1A3FD4)); }
.lc-item-check {
  flex-shrink: 0;
  color: var(--primary, #1A3FD4);
  display: none;
}
.lc-item.is-selected .lc-item-check { display: block; }
.lc-no-results {
  padding: 20px 14px;
  font-size: 13px;
  color: var(--muted, #A8A49E);
  text-align: center;
}
.lc-no-results.is-hidden { display: none; }

/* Footer */
.lc-footer {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg, #f8f9fb);
  flex-shrink: 0;
}
.lc-footer-text { font-size: 12px; color: var(--muted, #A8A49E); }
.lc-apply {
  padding: 6px 18px;
  background: var(--primary, #1A3FD4);
  color: var(--primary-fg, #fff);
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}
.lc-apply:hover { opacity: 0.88; }

/* Dark mode overrides */
[data-theme="dark"] .lc-trigger:hover { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .lc-item:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .lc-col + .lc-col { border-left-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .lc-footer { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .lc-col-search { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .lc-col-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .lc-col-list { scrollbar-color: rgba(255,255,255,0.2) transparent; }
[data-theme="dark"] .lc-panel { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 10px 24px -4px rgba(0,0,0,0.4); }

/* Mobile: stack columns vertically on narrow screens */
@media (max-width: 540px) {
  .lc-cols { flex-direction: column; height: auto; }
  .lc-col + .lc-col { border-left: none; border-top: 1px solid rgba(0,0,0,0.06); }
  .lc-col-list { max-height: 140px; }
  [data-theme="dark"] .lc-col + .lc-col { border-top-color: rgba(255,255,255,0.06); }
}

/* Admin topbar integration */
.az-topbar .lc-switcher { position: relative; }
.az-topbar .lc-trigger.is-open {
  background: var(--az-topbar-input, rgba(0,0,0,0.04)) !important;
  border-color: var(--primary, currentColor) !important;
}
.az-topbar .lc-panel {
  width: min(220px, calc(100vw - 24px));
  z-index: 9999;
}
.az-topbar .lc-cols { height: 240px; }
.az-topbar .lc-footer { display: none; }

/* Phase 2 — storefront popup */
.sz-popup { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sz-popup .sz-popup-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sz-popup .sz-popup-card { position: relative; max-width: 460px; width: 100%; background: var(--bg, #fff); color: var(--fg, #1f2937); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 28px 24px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: sz-popup-in .25s ease-out; overflow: hidden; }
[data-theme="dark"] .sz-popup .sz-popup-card { background: var(--card, #1f2937); }
@keyframes sz-popup-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.sz-popup .sz-popup-close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; font-size: 28px; line-height: 1; color: var(--fg-muted, #6b7280); cursor: pointer; padding: 4px 8px; z-index: 2; }
.sz-popup .sz-popup-content { position: relative; z-index: 1; }
.sz-popup .sz-popup-title { font-size: 20px; font-weight: 600; margin: 0 0 8px; line-height: 1.3; }
.sz-popup .sz-popup-body  { margin: 0 0 16px; line-height: 1.5; }
/* CTA button — own colours via CSS variables driven by inline style
   on the partial. Same pattern the hero block uses: .btn-primary's
   gradient shorthand + :hover !important would otherwise win over a
   plain inline background-color, leaving the brand gradient showing
   regardless of the owner's pick. Reading the variables here (with
   !important) gives the owner's colour priority across resting /
   hover / focus / active. When the variables are unset we fall back
   to the same gradient .btn-primary uses everywhere else. */
.sz-popup .sz-popup-cta.btn-primary,
.sz-popup .sz-popup-cta.btn-primary:hover,
.sz-popup .sz-popup-cta.btn-primary:focus,
.sz-popup .sz-popup-cta.btn-primary:active,
.sz-popup .sz-popup-cta.btn-primary:focus-visible {
  background: var(--popup-cta-bg, linear-gradient(135deg, var(--primary), var(--primary-2))) !important;
  border-color: var(--popup-cta-border, var(--primary)) !important;
  color: var(--popup-cta-fg, var(--primary-fg, #fff)) !important;
}

/* The button is wrapped in .sz-popup-cta-wrap which receives the
   margin-top / position / z-index. Matches the hero block's
   approach: putting these on a block-level wrapper avoids the
   "inline-block negative margin doesn't always pull up reliably
   inside flex columns" trap. The wrapper aligns horizontally via
   text-align inherited from .sz-popup-content (or flex-start /
   center / flex-end keyed off data-text-align). */
.sz-popup .sz-popup-cta-wrap { width: 100%; }
.sz-popup .sz-popup-cta   { display: inline-block; }
.sz-popup .sz-popup-cta--small  { padding: .25rem .75rem;  font-size: .75rem;  border-radius: .25rem; }
.sz-popup .sz-popup-cta--medium { padding: .375rem 1rem;   font-size: .875rem; border-radius: .375rem; }
.sz-popup .sz-popup-cta--large  { padding: .625rem 1.5rem; font-size: 1.0625rem; border-radius: .5rem; }

/* Stacked-sticker overlap: when body has a bg the wrapper pulls up
   over the body pill by 14px and sits on top via z-index 3. body
   pill is z-index 2; title pill has no explicit z-index (sits at
   1). When body has no bg the wrapper gets a normal 14px top
   margin so the button doesn't crash into the body text. */
.sz-popup .sz-popup-card[data-has-body-bg="1"] .sz-popup-cta-wrap {
  margin-top: -26px;
  position: relative;
  z-index: 3;
}
.sz-popup .sz-popup-card[data-has-body-bg="0"] .sz-popup-cta-wrap {
  margin-top: 14px;
}

/* Popup admin: always-visible colour pill. Wraps a native <input
   type="color"> so a click anywhere on the pill opens the picker.
   When data-has-value="0", the swatch shows a "no colour" red
   diagonal stripe on white; when "1", the picker's chosen colour
   renders. The × clear button always shows on the right. */
.popup-color-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}
.popup-color-pill__swatch {
  display: inline-block;
  width: 28px;
  height: 24px;
  border: 1px solid var(--pz-border, #ced4da);
  border-radius: 4px;
  background-color: #fff;
  flex: 0 0 auto;
  pointer-events: none;  /* clicks go to the wrapping <label> → <input> */
}
.popup-color-pill[data-has-value="0"] .popup-color-pill__swatch {
  /* Diagonal "no colour" indicator goes from bottom-left to top-right.
     A gradient `to top left` axis (bottom-right → top-left) gives a
     line perpendicular to that, i.e. bottom-left → top-right.
     0.5px stops on either side of 50% produce a hairline that's ~1px
     thick on display — thinner than the previous 2px line. */
  background-image: linear-gradient(
    to top left,
    transparent calc(50% - 0.5px),
    #dc3545 calc(50% - 0.5px),
    #dc3545 calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}
.popup-color-pill__input {
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 24px;
  opacity: 0;          /* swatch span is the visual; input handles clicks */
  border: 0; padding: 0;
  cursor: pointer;
}
.popup-color-pill__clear {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--pz-text-muted, #6c757d);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}
.popup-color-pill__clear:hover { background: rgba(220, 53, 69, 0.1); color: #dc3545; }
.popup-color-pill[data-has-value="0"] .popup-color-pill__clear { visibility: hidden; }

/* Card layout — CSS Grid puts the image and the content in the same
   1×1 cell so they overlay naturally. Image z-index 0 (default),
   content z-index 1. For aspect-auto the <img>'s natural height
   drives the cell's height; for fixed aspects the card sets
   aspect-ratio and the image fills via object-fit: cover. The
   card already has padding (top of file) — we strip it back when
   the layout switches to Grid so the image truly fills, then
   restore padding inside .sz-popup-content. */
.sz-popup .sz-popup-card {
  padding: 0;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
}
.sz-popup .sz-popup-card__img {
  grid-row: 1; grid-column: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* aspect-auto + image: let the <img> drive its natural height. We
   override the cover behaviour so the image renders at its own
   aspect ratio inside the card — no cropping. */
.sz-popup .sz-popup-card--aspect-auto .sz-popup-card__img {
  height: auto;
  object-fit: contain;
}
.sz-popup .sz-popup-card--aspect-square    { aspect-ratio: 1 / 1; }
.sz-popup .sz-popup-card--aspect-landscape { aspect-ratio: 16 / 9; }
.sz-popup .sz-popup-card--aspect-portrait  { aspect-ratio: 3 / 4; }

.sz-popup .sz-popup-card .sz-popup-content {
  grid-row: 1; grid-column: 1;
  z-index: 1;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
}
.sz-popup .sz-popup-card[data-text-vpos="top"]    .sz-popup-content { justify-content: flex-start; }
.sz-popup .sz-popup-card[data-text-vpos="middle"] .sz-popup-content { justify-content: center; }
.sz-popup .sz-popup-card[data-text-vpos="bottom"] .sz-popup-content { justify-content: flex-end; }

/* Hero-style variant: title / body show white text over the image,
   with subtle text-shadow for legibility on busy backgrounds. The
   owner can pick explicit pill background colours via heading_bg /
   body_bg to make the contrast more deliberate. */
.sz-popup .sz-popup-card--has-image .sz-popup-close {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.sz-popup .sz-popup-card--has-image .sz-popup-title,
.sz-popup .sz-popup-card--has-image .sz-popup-body {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Colour pills — match the hero block's "stacked sticker label"
   look: square edges (no border-radius), heading pill in a normal
   posture, body pill slightly tilted left and overlapping the
   heading above via negative margin-top + z-index. The body's
   coloured background sits on top of the heading's where they
   overlap. */
.sz-popup .sz-popup-title__pill,
.sz-popup .sz-popup-body__pill {
  display: inline-block;
  max-width: 100%;
  position: relative;
  text-shadow: none;  /* the pill already provides contrast */
}
.sz-popup .sz-popup-title__pill {
  padding: 8px 16px;
}
.sz-popup .sz-popup-body__pill {
  padding: 16px 16px;
  transform: rotate(-1.2deg);
  transform-origin: left center;
  margin-top: -10px;
  z-index: 2;
}
/* When body is right-aligned, anchor the tilt origin on the right so
   the rotation pivots from the visible side instead of off-screen. */
.sz-popup .sz-popup-card[data-text-align="right"]  .sz-popup-body__pill { transform-origin: right center; }
.sz-popup .sz-popup-card[data-text-align="center"] .sz-popup-body__pill { transform-origin: center center; }
.sz-popup .sz-popup-title__pill p,
.sz-popup .sz-popup-body__pill p { margin: 0; }

html.sz-popup-open { overflow: hidden; }

/* Phase 9 — cookie consent banner */
.sz-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090; padding: 12px; pointer-events: none; }
.sz-consent .sz-consent-card { pointer-events: auto; max-width: 720px; margin: 0 auto; background: var(--bg, #ffffff); color: var(--fg, #1f2937); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 720px) { .sz-consent .sz-consent-card { flex-direction: row; align-items: center; } .sz-consent .sz-consent-text { flex: 1; min-width: 0; } }
[data-theme="dark"] .sz-consent .sz-consent-card { background: var(--card, #1f2937); }
.sz-consent .sz-consent-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.sz-consent .sz-consent-text p { font-size: 13px; line-height: 1.5; color: var(--fg-muted, #6b7280); margin: 0; }
.sz-consent .sz-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
/* Equal-weight Accept/Reject/Customize — CNIL/EDPB compliance: same class,
   same min-width so no button is visually nudged toward selection. */
.sz-consent .sz-consent-btn { min-width: 110px; }
.sz-consent[hidden] { display: none !important; }

/* Phase 9b — granular categories panel */
/* In expanded mode the card stacks vertically so the title/body sits above
   the categories rather than being squished beside them. */
.sz-consent.is-expanded .sz-consent-card { flex-direction: column; align-items: stretch; }
.sz-consent.is-expanded .sz-consent-text { flex: initial; }
.sz-consent .sz-consent-categories { width: 100%; display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.sz-consent .sz-consent-cat { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: var(--card, #f9fafb); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; }
[data-theme="dark"] .sz-consent .sz-consent-cat { background: rgba(255,255,255,.04); border-color: var(--border, #374151); }
.sz-consent .sz-consent-cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.sz-consent .sz-consent-cat-text strong { font-size: 13px; }
.sz-consent .sz-consent-cat-desc { font-size: 12px; line-height: 1.45; color: var(--fg-muted, #6b7280); }
.sz-consent .sz-consent-cat-locked { font-size: 11px; color: var(--fg-muted, #6b7280); padding: 4px 8px; background: var(--bg, #ffffff); border: 1px solid var(--border, #e5e7eb); border-radius: 999px; flex-shrink: 0; align-self: center; }
[data-theme="dark"] .sz-consent .sz-consent-cat-locked { background: var(--card, #1f2937); }
.sz-consent .sz-consent-toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; align-self: center; cursor: pointer; }
.sz-consent .sz-consent-toggle input { opacity: 0; width: 0; height: 0; }
.sz-consent .sz-consent-toggle-slider { position: absolute; inset: 0; background-color: var(--border, #d1d5db); transition: .15s; border-radius: 22px; }
.sz-consent .sz-consent-toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; top: 3px; background-color: #ffffff; transition: .15s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sz-consent .sz-consent-toggle input:checked + .sz-consent-toggle-slider { background-color: var(--primary, #6366f1); }
.sz-consent .sz-consent-toggle input:checked + .sz-consent-toggle-slider::before { transform: translateX(16px); }
.sz-consent .sz-consent-toggle input:focus-visible + .sz-consent-toggle-slider { outline: 2px solid var(--primary, #6366f1); outline-offset: 2px; }
.sz-consent .sz-consent-actions-expanded { padding-top: 4px; border-top: 1px solid var(--border, #e5e7eb); margin-top: 4px; }

/* Landing — "Live now" badge variant (Phase 12 polish) */
.landing-soon-card .landing-live-badge { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; }
[data-theme="dark"] .landing-soon-card .landing-live-badge { background: rgba(34, 197, 94, .15) !important; color: #4ade80 !important; border-color: rgba(74, 222, 128, .35) !important; }

/* ─────────────────────────────────────────────────────────────────
   Admin → Marketing → Promos (V2 redesign — list + modal overlay)
   Sleek admin SaaS aesthetic: neutral stone grays, single emerald
   accent, traditional underlined tabs, list rows that open into a
   centered modal for create/edit. Tokens are inlined locally so the
   page reads cohesively even when admin theme variables vary.
   ───────────────────────────────────────────────────────────────── */

/* Local tokens kept under .promos-shell so the rest of admin is unaffected.
   The page sits flush against admin-main's own padding — no extra top
   indent — and stretches to the full content width. */
.promos-shell {
  --pz-bg: #fafaf9;
  --pz-surface: #ffffff;
  --pz-surface-muted: #f5f5f4;
  --pz-border: #e7e5e4;
  --pz-border-strong: #d6d3d1;
  --pz-text: #1c1917;
  --pz-text-muted: #78716c;
  --pz-text-subtle: #a8a29e;
  --pz-accent: #10b981;
  --pz-accent-deep: #059669;
  --pz-accent-soft: #ecfdf5;
  --pz-danger: #ef4444;
  /* Use the shop's brand colour from the global --primary var (set by the
     theme) for the primary button & save action; fall back to emerald. */
  --pz-brand: var(--primary, #10b981);
  --pz-brand-fg: var(--primary-fg, #ffffff);
  width: 100%;
  padding: 0;
  color: var(--pz-text);
}
[data-theme="dark"] .promos-shell {
  --pz-bg: #1a1a1a;
  --pz-surface: #222222;
  --pz-surface-muted: #2a2a2a;
  --pz-border: #333333;
  --pz-border-strong: #444444;
  --pz-text: #f3f4f6;
  --pz-text-muted: #94a3b8;
  --pz-text-subtle: #6b7280;
  --pz-accent: #10b981;
  --pz-accent-deep: #34d399;
  --pz-accent-soft: rgba(16, 185, 129, 0.12);
}

/* ── Page header (title + subtitle + primary action) ── */
.promos-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.promos-header__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--pz-text);
}
.promos-header__subtitle {
  font-size: 13.5px;
  color: var(--pz-text-muted);
  margin: 4px 0 0;
}

/* ── Header search box (used by the reviews moderation list) ── */
.promos-reviews-search { flex-shrink: 0; }
.promos-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 280px;
  max-width: 100%;
}
.promos-search__icon {
  position: absolute;
  left: 11px;
  font-size: 12px;
  color: var(--pz-text-subtle);
  pointer-events: none;
}
.promos-search__input.promos-input { padding-left: 30px; padding-right: 30px; }
.promos-search__clear {
  position: absolute;
  right: 9px;
  display: inline-flex;
  align-items: center;
  color: var(--pz-text-subtle);
  font-size: 12px;
  text-decoration: none;
}
.promos-search__clear:hover { color: var(--pz-text); }

/* ── Tabs (traditional underlined) ── */
.promos-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid var(--pz-border);
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.promos-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pz-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.promos-tab:hover { color: var(--pz-text); }
.promos-tab.active {
  color: var(--pz-text);
  /* Use the shop's brand colour for the active underline so the tab matches
     the "+ New" button and the bubble. */
  border-bottom-color: var(--pz-brand);
}
.promos-tab__icon {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.promos-tab__count {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pz-surface-muted);
  color: var(--pz-text-muted);
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease;
}
.promos-tab.active .promos-tab__count {
  background: var(--pz-brand);
  color: var(--pz-brand-fg);
}

/* ── Primary "New" button in the header ── */
.promos-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  border: 1px solid transparent;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.promos-btn--primary {
  background: var(--pz-brand);
  color: var(--pz-brand-fg);
  border-color: var(--pz-brand);
}
.promos-btn--primary:hover { opacity: 0.92; color: var(--pz-brand-fg); text-decoration: none; }
.promos-btn--secondary {
  background: var(--pz-surface);
  color: var(--pz-text);
  border-color: var(--pz-border);
}
.promos-btn--secondary:hover {
  border-color: var(--pz-border-strong);
  color: var(--pz-text);
  text-decoration: none;
}
.promos-btn--ghost {
  background: transparent;
  color: var(--pz-text-muted);
  border-color: transparent;
}
.promos-btn--danger {
  background: var(--pz-surface);
  color: var(--pz-danger);
  border-color: var(--pz-border);
}
.promos-btn--danger:hover { background: #fef2f2; border-color: #fecaca; color: var(--pz-danger); }
[data-theme="dark"] .promos-btn--danger:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.promos-btn__plus {
  width: 14px; height: 14px;
  stroke: currentColor; stroke-width: 2.2; fill: none;
  stroke-linecap: round;
}

/* ── Row card (banner / popup list item) ── */
.promos-list { display: flex; flex-direction: column; gap: 10px; }
.promos-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.promos-row:hover {
  border-color: var(--pz-border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.promos-row--static { cursor: default; }
.promos-row--static:hover {
  border-color: var(--pz-border);
  box-shadow: none;
}
.promos-row__swatch {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.promos-row__main { flex: 1; min-width: 0; }
.promos-row__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pz-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promos-row__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--pz-text-muted);
  flex-wrap: wrap;
}
.promos-row__type {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: var(--pz-text-subtle);
}
.promos-row__url {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.promos-row__url-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  display: inline-block;
}
.promos-row__locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pz-text-subtle);
}
.promos-row__edit {
  appearance: none;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pz-text-muted);
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.promos-row__edit:hover {
  color: var(--pz-text);
  border-color: var(--pz-border-strong);
}

/* ── Status badge (LIVE / DRAFT / SCHEDULED / EXPIRED / PAUSED) ── */
.promos-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.promos-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.promos-status--live { background: var(--pz-accent-soft); color: var(--pz-accent-deep); }
.promos-status--draft, .promos-status--inactive { background: var(--pz-surface-muted); color: var(--pz-text-muted); }
.promos-status--scheduled { background: #dbeafe; color: #1e40af; }
.promos-status--expired { background: var(--pz-surface-muted); color: var(--pz-text-muted); }
.promos-status--paused { background: #fef3c7; color: #92400e; }
.promos-status--failed { background: #fee2e2; color: #b91c1c; }

/* Subscribers table inside the email page's Subscribers tab. Keep
   the heading row muted so it doesn't fight the promos-shell card
   styling, and let the email column be the visual anchor. */
.subscribers-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pz-text-subtle);
  border-bottom: 1px solid var(--pz-border);
}
.subscribers-table tbody td { vertical-align: middle; }

/* Small pill shown alongside a campaign's subject in the email
   list when the resolved subject is in a different language than
   the admin's current UI. Tells the owner at a glance that they
   haven't written a subject in their working language yet. */
.promos-row__lng-chip {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pz-text-subtle);
  background: var(--pz-surface-muted);
  border-radius: 4px;
  vertical-align: 1px;
}

/* Campaign subject row: emoji picker button glued to the left of
   the input. The picker's popover sits below the trigger, anchored
   to the row's first column. */
.campaign-subject-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  position: relative;
}
.campaign-emoji-picker { position: relative; }
.campaign-emoji-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 100%; min-height: 36px;
  padding: 0;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.campaign-emoji-btn:hover { border-color: var(--pz-border-strong); background: var(--pz-surface-muted); }
.campaign-emoji-btn[aria-expanded="true"] {
  border-color: var(--pz-accent-deep, #1a8917);
  background: var(--pz-accent-soft, #e7f5e6);
}
/* Faint by default so the picker doesn't shout for attention next
   to the subject field. The icon perks up to full colour on hover
   or while the popover is open, signalling it's interactive. */
.campaign-emoji-btn > span {
  opacity: .25;
  filter: grayscale(1);
  transition: opacity .12s ease, filter .12s ease;
}
.campaign-emoji-btn:hover > span,
.campaign-emoji-btn:focus-visible > span,
.campaign-emoji-btn[aria-expanded="true"] > span {
  opacity: 1;
  filter: none;
}
.campaign-emoji-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 280px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.campaign-emoji-popover[hidden] { display: none; }
.campaign-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.campaign-emoji-pick {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .1s ease;
}
.campaign-emoji-pick:hover, .campaign-emoji-pick:focus-visible {
  background: var(--pz-surface-muted);
  outline: none;
}
.campaign-subject-row > .promos-input { flex: 1; min-width: 0; }

/* Campaign test-send panel (the collapsible section inside the
   edit campaign modal). Styled to look like a quiet sub-section
   inside the modal body — distinct enough that the owner sees it,
   subtle enough that it doesn't fight the main editor for
   attention. */
.campaign-test-panel { padding-top: 0; }
.campaign-test-panel details {
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  background: var(--pz-surface-muted);
}
.campaign-test-panel__summary {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.campaign-test-panel__summary::-webkit-details-marker { display: none; }
.campaign-test-panel details[open] .campaign-test-panel__chev {
  transform: rotate(180deg);
}
.campaign-test-panel__chev { transition: transform .15s ease; }
.campaign-test-panel__form {
  padding: 0 14px 14px;
  border-top: 1px solid var(--pz-border);
}
.campaign-test-panel__form > div:first-child { padding-top: 12px; }
.campaign-test-panel__locales {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.campaign-test-panel__locale-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.campaign-test-panel__locale-chip input { margin: 0; }
.campaign-test-panel__locale-chip:has(input:checked) {
  border-color: var(--pz-accent-deep, #1a8917);
  background: var(--pz-accent-soft, #e7f5e6);
  color: var(--pz-accent-deep, #1a8917);
}
[data-theme="dark"] .promos-status--failed { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
[data-theme="dark"] .promos-status--scheduled { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
[data-theme="dark"] .promos-status--paused { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

/* ── Footer hint ── */
.promos-footer-hint {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px dashed var(--pz-border-strong);
  color: var(--pz-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  gap: 12px;
}
.promos-footer-hint__count {
  font-size: 12px;
  color: var(--pz-text-subtle);
}

/* ── Empty state ── */
.promos-empty {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--pz-border-strong);
  border-radius: 10px;
  color: var(--pz-text-muted);
}
.promos-empty__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pz-surface-muted);
  display: inline-grid;
  place-items: center;
  font-size: 1.2rem;
  margin-bottom: 14px;
  color: var(--pz-text-subtle);
}

/* ── Modal overlay (covers the admin main, scrim + centered card) ── */
.promos-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.promos-modal[data-open="true"] { display: grid; place-items: center; padding: 32px; }
.promos-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(28, 25, 23, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: promos-fade 0.18s ease;
}
/* Light-mode tokens are declared as the BASE on .promos-modal__card itself
   (not via :not([data-theme])) so the [data-theme="dark"] override below
   actually wins in dark mode. The modal is rendered as a sibling of the
   .promos-shell rather than a descendant, so we can't inherit shell tokens
   — we have to redeclare them here. */
.promos-modal__card {
  --pz-bg: #fafaf9;
  --pz-surface: #ffffff;
  --pz-surface-muted: #f5f5f4;
  --pz-border: #e7e5e4;
  --pz-border-strong: #d6d3d1;
  --pz-text: #1c1917;
  --pz-text-muted: #78716c;
  --pz-text-subtle: #a8a29e;
  --pz-accent: #10b981;
  --pz-accent-deep: #059669;
  --pz-accent-soft: #ecfdf5;
  --pz-danger: #ef4444;
  /* Mirror the shop's brand colour into the modal scope so the Save
     button matches the page-header "+ New banner" button. */
  --pz-brand: var(--primary, #10b981);
  --pz-brand-fg: var(--primary-fg, #ffffff);
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  background: var(--pz-surface);
  color: var(--pz-text);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: promos-pop 0.2s ease;
}
[data-theme="dark"] .promos-modal__card {
  --pz-bg: #1a1a1a;
  --pz-surface: #222222;
  --pz-surface-muted: #2a2a2a;
  --pz-border: #333333;
  --pz-border-strong: #444444;
  --pz-text: #f3f4f6;
  --pz-text-muted: #94a3b8;
  --pz-text-subtle: #6b7280;
  --pz-accent: #10b981;
  --pz-accent-deep: #34d399;
  --pz-accent-soft: rgba(16, 185, 129, 0.14);
  --pz-danger: #f87171;
  /* keep the brand vars — they already use var(--primary) which works in both modes */
  background: var(--pz-surface);
  color: var(--pz-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
/* The scrim is darker in dark mode for the same visual depth. */
[data-theme="dark"] .promos-modal__scrim { background: rgba(0, 0, 0, 0.65); }
@keyframes promos-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes promos-pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.promos-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--pz-border);
}
.promos-modal__header-left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.promos-modal__swatch {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.promos-modal__title { font-size: 14px; font-weight: 600; line-height: 1.2; }
.promos-modal__subtitle {
  font-size: 12px;
  color: var(--pz-text-muted);
  margin-top: 2px;
}
.promos-modal__close {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--pz-text-muted);
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.promos-modal__close:hover {
  background: var(--pz-surface-muted);
  color: var(--pz-text);
}

/* Inside the custom-units modal, mirror the product-edit modal's
   section colors. The cards' bg is dropped so only the --border-coloured
   outline separates each section (matches `.product-section`'s look),
   and form controls inside use the deeper `#161616` field surface that
   `.admin-shell[data-admin-shell] .form-control` applies in the product
   edit modal — without that, the units modal sits outside `.admin-shell`
   and the inputs would inherit the lighter `var(--card)` background,
   blending into the modal body. */
[data-theme="dark"] #modal-custom-units .card,
[data-theme="dark"] #modal-custom-units .card-body {
  background: #2a2a2a !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
[data-theme="dark"] #modal-custom-units .card-body {
  border: 0 !important; /* card already has the outer border */
}
[data-theme="dark"] #modal-custom-units .list-group-item {
  background-color: #2a2a2a !important;
}
/* Bootstrap's `.list-group-item` keeps its default near-white bg + light
   border in dark mode (the project uses [data-theme="dark"], not
   [data-bs-theme="dark"], so the Bootstrap dark tokens never kick in).
   Force them to match the rest of the modal. */
[data-theme="dark"] #modal-custom-units .list-group-item {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
[data-theme="dark"] #modal-custom-units .form-control,
[data-theme="dark"] #modal-custom-units .form-select {
  background-color: #161616 !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] #modal-custom-units .form-control:focus,
[data-theme="dark"] #modal-custom-units .form-select:focus {
  background-color: #161616 !important;
  border-color: var(--primary, #10b981) !important;
}
/* `.form-control-sm` has Bootstrap's `min-height: calc(1.5em + 0.5rem
   + 2px)` (~32px) but `.btn-sm` is padding-only (~29px). When both sit
   in a `d-flex align-items-end` row, the button ends up ~3px shorter
   and its top doesn't line up with the input's. Pin the button's
   min-height to match the input's. */
#modal-custom-units .btn-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
}

.promos-modal__body {
  padding: 22px 26px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1;
  min-height: 0; /* allow the body to shrink so overflow:auto kicks in */
}
.promos-modal__footer {
  display: flex; align-items: center;
  /* Cancel + Save (and any other action) cluster on the right inside
     `.promos-modal__footer-right`. A destructive Delete button — when
     present as a direct child of the footer — sits flush against the
     LEFT edge so it can't be hit by accident. `space-between` does the
     left/right split automatically. */
  justify-content: space-between;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--pz-border);
  background: var(--pz-surface-muted);
  flex-shrink: 0;
}
/* The right group always pushes itself to the right edge via auto-margin.
   With Delete present (left), space-between already does this; with Delete
   hidden (display:none in create mode), the auto-margin still pins the
   group right instead of falling back to start. */
.promos-modal__footer-right { margin-left: auto; }
/* The footer's Save button uses the brand colour so it aligns with the
   "+ New banner" action in the page header. */
.promos-modal__footer .promos-btn--primary {
  background: var(--pz-brand);
  border-color: var(--pz-brand);
  color: var(--pz-brand-fg);
}
.promos-modal__footer-right { display: flex; gap: 8px; }

/* ── Form sections inside the modal ── */
.promos-section { margin: 0; }
.promos-section__label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pz-text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.promos-section__hint {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--pz-text-subtle);
}
.promos-row-fields {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.promos-row-fields > * { flex: 1; min-width: 0; }
.promos-row-fields--narrow > .promos-field--w200 { flex: 0 0 200px; }
.promos-row-fields--narrow > .promos-field--w180 { flex: 0 0 180px; }
.promos-row-fields--narrow > .promos-field--w160 { flex: 0 0 160px; }
.promos-row-fields--narrow > .promos-field--w120 { flex: 0 0 120px; }
.promos-row-fields--narrow > .promos-field--w90  { flex: 0 0 90px; }

.promos-field__unit {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pz-text-subtle);
  background: var(--pz-bg-subtle, #f5f5f4);
  border-radius: 4px;
}
.promos-field__unit:empty { display: none; }

/* Unit shown INSIDE an input on the right (a "%", "Ft", "$", "days"
   suffix), far more visible than a faint chip above the field. The
   input gets right padding so its value never runs under the suffix. */
.promos-input-affix { position: relative; }
.promos-input-affix > .promos-input { padding-right: 52px; }
.promos-input-affix__suffix {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  display: flex; align-items: center;
  padding: 0 11px;
  font-size: 12px; font-weight: 600;
  color: var(--pz-text-subtle);
  background: var(--pz-surface-muted, #f5f5f4);
  border-left: 1px solid var(--pz-border);
  border-radius: 0 6px 6px 0;
  pointer-events: none;
  white-space: nowrap;
}

.promos-field {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
  min-width: 0;
}
.promos-field__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  /* All field heads share a min-height so heads with a lang switcher
     don't push their input below heads that only have a label. The 22px
     matches the switcher's natural height (lang chips + arrow buttons). */
  min-height: 22px;
}
.promos-field__label { margin: 0; padding-bottom: 1px; }
.promos-field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--pz-text);
  margin: 0;
}
.promos-field__hint {
  font-size: 11px;
  color: var(--pz-text-subtle);
}

.promos-input,
.promos-select,
.promos-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--pz-text);
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  background: var(--pz-surface);
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.promos-input:focus,
.promos-select:focus,
.promos-textarea:focus,
.promos-input:focus-visible,
.promos-select:focus-visible,
.promos-textarea:focus-visible {
  /* Match the shop-wide focus state: brand border, no shadow ring. */
  border-color: var(--primary, var(--pz-brand)) !important;
  box-shadow: none !important;
  outline: 0;
}
.promos-textarea { resize: vertical; min-height: 80px; }
.promos-select-wrap { position: relative; }
.promos-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  cursor: pointer;
}
.promos-select-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--pz-text-muted);
  border-bottom: 1.5px solid var(--pz-text-muted);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

/* Color picker inline */
.promos-color {
  display: flex; align-items: center; gap: 8px;
}
.promos-color__swatch {
  width: 36px; height: 32px;
  padding: 2px;
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  background: var(--pz-surface);
  cursor: pointer;
  flex-shrink: 0;
}
.promos-color__swatch::-webkit-color-swatch-wrapper { padding: 0; }
.promos-color__swatch::-webkit-color-swatch { border: 0; border-radius: 4px; }
.promos-color__hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  text-transform: uppercase;
}

/* Checkbox cards (behaviour toggles). The checkbox sits on the same line
   as the main label ("Active"); the helper text flows directly below the
   label in the same text column, indented past the box.
   Structure:
     <label>
       <input>
       <span class="promos-check__body">
         <span class="promos-check__label">Active</span>
         <span class="promos-check__hint">Inactive banners are saved…</span>
       </span>
     </label>
*/
.promos-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  flex: 1;
  background: var(--pz-surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.promos-check:hover { border-color: var(--pz-border-strong); }
.promos-check input {
  appearance: none;
  width: 16px; height: 16px;
  margin: 1px 0 0; /* nudge to baseline of the label */
  border-radius: 4px;
  border: 1.5px solid var(--pz-border-strong);
  background: var(--pz-surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}
.promos-check input:checked {
  background: var(--pz-accent);
  border-color: var(--pz-accent);
}
.promos-check input:checked::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.promos-check:has(input:checked) {
  border-color: var(--pz-accent);
  background: var(--pz-accent-soft);
}
.promos-check__body {
  flex: 1;
  min-width: 0;
  display: block;
}
.promos-check__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--pz-text);
  line-height: 1.35;
}
.promos-check__hint {
  display: block;
  font-size: 11.5px;
  color: var(--pz-text-muted);
  font-weight: 400;
  line-height: 1.45;
  margin-top: 2px;
}

/* Live preview tile */
.promos-preview {
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--pz-surface);
  margin-top: 12px;
}
.promos-preview__bar {
  padding: 12px 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.promos-preview__caption {
  background: var(--pz-surface-muted);
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--pz-text-subtle);
  text-transform: uppercase;
}

/* The language switcher (.az-lang-strip-wrap) inherits its standard
   page-wide styling here — no overrides — so it looks identical to the
   one used on Pages, Collections, Products, etc. The only modal-specific
   tweak: cap the strip width so ~3–4 language chips show with arrows for
   the rest, regardless of how many locales the shop has enabled. */
.promos-modal .az-lang-strip { max-width: 105px; }


/* ─────────────────────────────────────────────────────────────────
   Admin scrollbars (V2 design system)
   Same minimal, rounded, semi-transparent style as the sidebar nav.
   Dark thumb on light surfaces, light thumb on dark surfaces.
   Applied to: admin-main column, admin-main scroll area, every
   modal body, and any scrollable container inside an admin page.
   ───────────────────────────────────────────────────────────────── */

/* Light-mode admin: dark thumb on transparent track */
.admin-shell[data-admin-shell] .admin-main,
.admin-shell[data-admin-shell] .admin-main-col,
.admin-shell[data-admin-shell] .admin-main *,
.promos-modal__body,
.promos-modal__card *,
.shop-search-panel-results,
.lc-col-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.admin-shell[data-admin-shell] .admin-main::-webkit-scrollbar,
.admin-shell[data-admin-shell] .admin-main *::-webkit-scrollbar,
.promos-modal__body::-webkit-scrollbar,
.promos-modal__card *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.admin-shell[data-admin-shell] .admin-main::-webkit-scrollbar-track,
.admin-shell[data-admin-shell] .admin-main *::-webkit-scrollbar-track,
.promos-modal__body::-webkit-scrollbar-track,
.promos-modal__card *::-webkit-scrollbar-track {
  background: transparent;
}
.admin-shell[data-admin-shell] .admin-main::-webkit-scrollbar-thumb,
.admin-shell[data-admin-shell] .admin-main *::-webkit-scrollbar-thumb,
.promos-modal__body::-webkit-scrollbar-thumb,
.promos-modal__card *::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.admin-shell[data-admin-shell] .admin-main::-webkit-scrollbar-thumb:hover,
.admin-shell[data-admin-shell] .admin-main *::-webkit-scrollbar-thumb:hover,
.promos-modal__body::-webkit-scrollbar-thumb:hover,
.promos-modal__card *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}
.admin-shell[data-admin-shell] .admin-main::-webkit-scrollbar-corner,
.promos-modal__body::-webkit-scrollbar-corner,
.promos-modal__card *::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark-mode admin: light thumb on transparent track */
[data-theme="dark"] .admin-shell[data-admin-shell] .admin-main,
[data-theme="dark"] .admin-shell[data-admin-shell] .admin-main-col,
[data-theme="dark"] .admin-shell[data-admin-shell] .admin-main *,
[data-theme="dark"] .promos-modal__body,
[data-theme="dark"] .promos-modal__card *,
[data-theme="dark"] .shop-search-panel-results,
[data-theme="dark"] .lc-col-list {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
[data-theme="dark"] .admin-shell[data-admin-shell] .admin-main::-webkit-scrollbar-thumb,
[data-theme="dark"] .admin-shell[data-admin-shell] .admin-main *::-webkit-scrollbar-thumb,
[data-theme="dark"] .promos-modal__body::-webkit-scrollbar-thumb,
[data-theme="dark"] .promos-modal__card *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] .admin-shell[data-admin-shell] .admin-main::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .admin-shell[data-admin-shell] .admin-main *::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .promos-modal__body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .promos-modal__card *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.42);
}

/* ─── Admin → Product edit (V2 redesign — collapsible sections) ──────────
   Reusable card pattern for the product create/edit form. Chevron sits to
   the LEFT of the section title (no leading icons), and each section
   persists its open/closed state in localStorage under
   `shopiza_psect_<key>`. The same pattern wraps Variants and Attributes;
   their existing inner-section JS still runs because the IDs are kept on
   the body element. */
.product-section {
  border: 1px solid var(--border, #dee2e6);
  border-radius: 8px;
  background: var(--card, #fff);
  margin-bottom: 14px;
  overflow: hidden;
}
.product-section__head {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #f5f5f4;
}
[data-theme="dark"] .product-section__head { background: #2a2a2a; }
.product-section__head-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  color: inherit;
  user-select: none;
}
.product-section__head-toggle:focus { outline: none; }
.product-section__head-toggle:focus-visible { outline: 2px solid var(--primary, #10b981); outline-offset: -2px; }
.product-section__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  color: var(--fg-muted, #6c757d);
  transition: transform .18s ease;
  flex: 0 0 auto;
}
.product-section.is-collapsed .product-section__chev {
  transform: rotate(-90deg);
}
.product-section__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg, inherit);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-section__head-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
}
.product-section__body {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border, #e7e5e4);
}
.product-section.is-collapsed .product-section__body {
  display: none;
}

/* SEO settings link in basic info section head */
.seo-settings-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--primary, #10b981);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.seo-settings-link:hover { background: rgba(16, 185, 129, 0.08); color: var(--primary, #10b981); }
[data-theme="dark"] .seo-settings-link:hover { background: rgba(16, 185, 129, 0.14); }
.seo-drift-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

/* SEO modal — Google-style snippet preview */
.seo-snippet {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-family: arial, sans-serif;
}
[data-theme="dark"] .seo-snippet {
  background: #1a1a1a;
  border-color: #2a2a2a;
}
.seo-snippet__url {
  font-size: 12px;
  color: #5f6368;
  line-height: 1.3;
  margin-bottom: 2px;
  word-break: break-all;
}
[data-theme="dark"] .seo-snippet__url { color: #9aa0a6; }
.seo-snippet__title {
  font-size: 18px;
  font-weight: 400;
  color: #1a0dab;
  line-height: 1.3;
  margin-bottom: 2px;
  cursor: pointer;
  word-break: break-word;
}
.seo-snippet__title:hover { text-decoration: underline; }
[data-theme="dark"] .seo-snippet__title { color: #8ab4f8; }
.seo-snippet__desc {
  font-size: 13px;
  color: #4d5156;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
[data-theme="dark"] .seo-snippet__desc { color: #bdc1c6; }

/* SEO field counters — colour graduates green → amber → red as the input
   crosses the recommended max. */
.seo-counter { font-variant-numeric: tabular-nums; }
.seo-counter.is-near { color: #f59e0b !important; }
.seo-counter.is-over { color: #ef4444 !important; }

/* Drift highlight on individual inputs */
.is-seo-drifted {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.05) !important;
}

[data-theme="dark"] .product-section {
  border-color: var(--border, #333);
  background: var(--card, #222);
}
[data-theme="dark"] .product-section__body {
  border-top-color: var(--border, #333);
}


/* Cap the lang switcher's strip width inside product sections so the
   prev/next arrows reliably appear when there are more locales than fit
   the visible strip. Without this cap, a strip in a flex row with no
   competing sibling (e.g. the Detailed description section) grows to its
   natural content width and the JS correctly decides no overflow scroll
   is needed — but the user expects the arrows to be visible whenever
   there are >~5 active locales. */
.product-section .az-lang-strip { max-width: 140px; }
.promos-modal .product-section .az-lang-strip { max-width: 105px; }

/* Rich-text + i18n: lang switcher moves into the rte-toolbar (cloned by
   richtext.js). The original strip-wrap is hidden so we don't show two
   copies. The clone sits flush right on the toolbar via margin-left:auto. */
[data-i18n-field-container].i18n-rte-mounted .az-lang-strip-wrap[data-orig-strip="1"] { display: none; }
/* When the strip's parent flex row had nothing else in it (e.g. the
   product Detailed description section, where the strip was the only
   child), collapse the empty row so we don't leave a 4px ghost gap above
   the editor. Rows that also held a label (e.g. category description)
   keep the label visible. */
[data-i18n-field-container].i18n-rte-mounted .d-flex:has(> .az-lang-strip-wrap[data-orig-strip="1"]:only-child) { display: none; }
.rte-toolbar__lang { margin-left: auto; }
/* Apply the same width cap inside the toolbar so the strip can overflow
   and the prev/next arrows surface as needed. */
.rte-toolbar .az-lang-strip { max-width: 140px; }
.promos-modal .rte-toolbar .az-lang-strip { max-width: 105px; }

/* ─────────────────────────────────────────────────────────────────
   Security Console — built on the design system tokens defined in
   `.promos-shell` (--pz-text, --pz-border, --pz-brand…). Adds a
   small set of `.sec-*` building blocks for the patterns the
   Security pages need (KPI tile, section heading, data table,
   styled form field, channel/severity pills, toggle, key/value
   readonly card). All values are scoped under `.promos-shell` so
   the rest of admin is unaffected.
   ───────────────────────────────────────────────────────────── */

/* Status pills the Security pages add on top of .promos-status. */
.promos-shell .promos-status--critical { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .promos-shell .promos-status--critical { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

/* Sub-nav (security tabs) — keep tab labels readable on mobile. */
.promos-shell .sec-tabs { flex-wrap: wrap; }

/* List rows: row swatches show on/off state instead of a colour. */
.promos-shell .sec-row__swatch {
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}
.promos-shell .sec-row__swatch.is-on  { background: var(--pz-accent-soft); color: var(--pz-accent-deep); }
.promos-shell .sec-row__swatch.is-off { background: var(--pz-surface-muted); color: var(--pz-text-subtle); }
.promos-shell .sec-muted { color: var(--pz-text-muted); }

/* Section heading inside a Security page (e.g. "Recent deliveries"). */
.promos-shell .sec-section { margin-top: 28px; }
.promos-shell .sec-section__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--pz-text);
  margin: 0 0 4px;
}
.promos-shell .sec-section__subtitle {
  font-size: 12.5px;
  color: var(--pz-text-muted);
  margin: 0 0 12px;
}

/* Data table — borrowed look from the design-system rows. */
.promos-shell .sec-table-card {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 12px;
  overflow: hidden;
}
.promos-shell .sec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--pz-text);
}
.promos-shell .sec-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pz-text-muted);
  background: var(--pz-surface-muted);
  border-bottom: 1px solid var(--pz-border);
  padding: 8px 14px;
}
.promos-shell .sec-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--pz-border);
  vertical-align: middle;
}
.promos-shell .sec-table tbody tr:last-child td { border-bottom: 0; }
.promos-shell .sec-table .text-end { text-align: right; }
.promos-shell .sec-table__when {
  color: var(--pz-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: nowrap;
}
.promos-shell .sec-table__details {
  padding: 0 14px 10px !important;
  border-bottom: 1px solid var(--pz-border);
}
.promos-shell .sec-table__details details summary {
  font-size: 12px;
  color: var(--pz-text-muted);
  cursor: pointer;
  list-style: disclosure-closed;
}
.promos-shell .sec-table__details details[open] summary { margin-bottom: 6px; }
.promos-shell .sec-table__details pre {
  background: var(--pz-surface-muted);
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  color: var(--pz-text);
}

/* Small chip / tag inside meta lines and table cells. */
.promos-shell .sec-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--pz-surface-muted);
  color: var(--pz-text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.promos-shell .sec-tag--neutral {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
}

/* Delivery / state pill (sent/partial/failed, ok/warn/bad). */
.promos-shell .sec-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.promos-shell .sec-pill--is-ok  { background: var(--pz-accent-soft); color: var(--pz-accent-deep); }
.promos-shell .sec-pill--is-warn { background: #fef3c7; color: #92400e; }
.promos-shell .sec-pill--is-bad  { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .promos-shell .sec-pill--is-warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
[data-theme="dark"] .promos-shell .sec-pill--is-bad  { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

/* Form field layout used inside modals + Respond page. */
.promos-shell .sec-field { margin-bottom: 16px; }
.promos-shell .sec-field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pz-text);
  margin-bottom: 4px;
}
.promos-shell .sec-field__hint {
  font-size: 11.5px;
  color: var(--pz-text-muted);
  margin: 4px 0 0;
}
.promos-shell .sec-field__input,
.promos-modal .sec-field__input {
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  background: var(--pz-surface);
  color: var(--pz-text);
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  font-family: inherit;
}
.promos-shell .sec-field__input:focus,
.promos-modal .sec-field__input:focus {
  outline: none;
  border-color: var(--pz-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pz-brand) 18%, transparent);
}

/* Grids inside the modal body for paired fields. */
.promos-shell .sec-grid { display: grid; gap: 12px; }
.promos-shell .sec-grid--2 { grid-template-columns: 1fr 1fr; }
.promos-shell .sec-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .promos-shell .sec-grid--2, .promos-shell .sec-grid--3 { grid-template-columns: 1fr; }
}

/* Checkbox row (channels picker etc). */
.promos-shell .sec-checkrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.promos-shell .sec-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.promos-shell .sec-check input[type="checkbox"] { accent-color: var(--pz-brand); }

/* Inline toggle switch — replaces Bootstrap form-switch. */
.promos-shell .sec-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.promos-shell .sec-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.promos-shell .sec-toggle__track {
  width: 36px; height: 20px; background: var(--pz-surface-muted); border-radius: 999px;
  border: 1px solid var(--pz-border); position: relative; transition: background 0.15s ease;
}
.promos-shell .sec-toggle__knob {
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--pz-surface); border: 1px solid var(--pz-border-strong);
  transition: transform 0.15s ease;
}
.promos-shell .sec-toggle input:checked + .sec-toggle__track { background: var(--pz-brand); border-color: var(--pz-brand); }
.promos-shell .sec-toggle input:checked + .sec-toggle__track .sec-toggle__knob { transform: translateX(16px); border-color: var(--pz-brand); }
.promos-shell .sec-toggle__label { font-size: 13px; color: var(--pz-text); }

/* Read-only fact card (e.g. "query_kind / match"). */
.promos-shell .sec-readonly {
  background: var(--pz-surface-muted);
  border: 1px solid var(--pz-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.promos-shell .sec-readonly__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pz-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.promos-shell .sec-readonly__body { display: flex; flex-wrap: wrap; gap: 6px; }

/* Modal footer — left cluster for secondary destructive actions. */
.promos-modal .sec-modal__footer-left { display: inline-flex; gap: 8px; }

/* KPI tile — Overview / Auth pages. */
.promos-shell .sec-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.promos-shell .sec-kpi {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.promos-shell .sec-kpi__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pz-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.promos-shell .sec-kpi__value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--pz-text);
  font-variant-numeric: tabular-nums;
}
.promos-shell .sec-kpi__value.is-ok { color: var(--pz-accent-deep); }
.promos-shell .sec-kpi__value.is-bad { color: var(--pz-danger); }
.promos-shell .sec-kpi__value.is-muted { color: var(--pz-text-subtle); }
.promos-shell .sec-kpi__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--pz-text-muted);
}
.promos-shell .sec-kpi__hint .sec-pill { margin-right: 0; }

/* Tag-like pills in KPI hints */
.promos-shell .sec-kpi__hint .sec-tag,
.promos-shell .sec-kpi__hint .sec-pill { display: inline-flex; }

/* Filter bar (Activity log). */
.promos-shell .sec-filter {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.promos-shell .sec-filter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
}
.promos-shell .sec-filter__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--pz-text-muted);
}
.promos-shell .sec-filter__count { margin-left: auto; }

/* Header pill (e.g. "Step-up required" on Respond page). */
.promos-shell .sec-header__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding: 3px 10px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}
[data-theme="dark"] .promos-shell .sec-header__pill { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

/* Action card — Respond page. */
.promos-shell .sec-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.promos-shell .sec-card {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.promos-shell .sec-card__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.promos-shell .sec-card__title i { color: var(--pz-danger); }
.promos-shell .sec-card__hint {
  font-size: 12.5px;
  color: var(--pz-text-muted);
  margin: 0;
}
.promos-shell .sec-card__hint a { color: var(--pz-brand); text-decoration: none; }
.promos-shell .sec-card__hint a:hover { text-decoration: underline; }

/* Currently-blocked list inside the Respond card. */
.promos-shell .sec-blocklist {
  background: var(--pz-surface-muted);
  border: 1px solid var(--pz-border);
  border-radius: 10px;
  max-height: 240px;
  overflow-y: auto;
}
.promos-shell .sec-blocklist__head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pz-text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--pz-border);
}
.promos-shell .sec-blocklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--pz-border);
  font-size: 12.5px;
}
.promos-shell .sec-blocklist__item:last-child { border-bottom: 0; }
.promos-shell .sec-blocklist__main { flex: 1; min-width: 0; }
.promos-shell .sec-blocklist__ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: var(--pz-text);
}
.promos-shell .sec-blocklist__meta {
  font-size: 11.5px;
  color: var(--pz-text-muted);
}
.promos-shell .sec-blocklist__unblock {
  appearance: none;
  border: 1px solid var(--pz-border);
  background: var(--pz-surface);
  border-radius: 8px;
  width: 28px; height: 28px;
  color: var(--pz-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.promos-shell .sec-blocklist__unblock:hover { color: var(--pz-danger); border-color: var(--pz-danger); }

/* Footer info box (e.g. "Coming soon" note on Respond). */
.promos-shell .sec-note {
  background: var(--pz-surface-muted);
  border: 1px dashed var(--pz-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--pz-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.promos-shell .sec-note i { color: var(--pz-text-subtle); }

/* Help panel under the page header — describes what the page does,
   what each metric/term means, and when to act on it. Always visible
   so the operator can re-read it any time without clicking. */
.promos-shell .sec-help {
  background: var(--pz-surface-muted);
  border: 1px solid var(--pz-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pz-text);
}
.promos-shell .sec-help p { margin: 0 0 10px; }
.promos-shell .sec-help p:last-child { margin: 0; }
.promos-shell .sec-help strong { color: var(--pz-text); font-weight: 600; }
.promos-shell .sec-help em { font-style: italic; color: var(--pz-text); }
.promos-shell .sec-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--pz-text);
}

/* Click-to-expand rows on the Activity log table. The data row is the
   trigger; the next-sibling .sec-row-detail row is hidden by default. */
.promos-shell .sec-table tbody tr.sec-row-data {
  cursor: pointer;
  transition: background 0.12s ease;
}
.promos-shell .sec-table tbody tr.sec-row-data:hover { background: var(--pz-surface-muted); }
.promos-shell .sec-table tbody tr.sec-row-data.is-open { background: var(--pz-surface-muted); }
.promos-shell .sec-table tbody tr.sec-row-data.is-open td {
  border-bottom-color: transparent;
}
.promos-shell .sec-table tbody tr.sec-row-detail { display: none; background: var(--pz-surface-muted); }
.promos-shell .sec-table tbody tr.sec-row-detail.is-open { display: table-row; }
.promos-shell .sec-table tbody tr.sec-row-detail td {
  padding: 4px 14px 14px;
  border-bottom: 1px solid var(--pz-border);
}
.promos-shell .sec-chevron {
  display: inline-flex;
  width: 14px; height: 14px;
  transition: transform 0.15s ease;
  color: var(--pz-text-subtle);
}
.promos-shell tr.sec-row-data.is-open .sec-chevron { transform: rotate(90deg); color: var(--pz-text); }
.promos-shell .sec-detailgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin-bottom: 8px;
  font-size: 12px;
}
.promos-shell .sec-detailgrid > div { color: var(--pz-text); }
.promos-shell .sec-detailgrid > div.is-wide { grid-column: 1 / -1; }
.promos-shell .sec-detailgrid .sec-detailgrid__k { color: var(--pz-text-muted); margin-right: 4px; }

/* ─── Security Console — Tab restyle (pill bg, no underline) ──────
   The original .promos-tabs gives an underline-on-active accent that
   reads as "marketing/storefront". For the Security console the user
   prefers a softer admin-style segmented look: rounded pill, no
   underline, light hover, soft tinted bg on active. Scoped to .sec-tabs
   so the marketing pages keep their underlines. */
.promos-shell .sec-tabs {
  border-bottom: 0;
  gap: 4px;
  padding: 4px;
  background: var(--pz-surface-muted);
  border: 1px solid var(--pz-border);
  border-radius: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.promos-shell .sec-tabs .promos-tab {
  border-radius: 8px;
  padding: 7px 14px;
  border-bottom: 0;
  margin-bottom: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.promos-shell .sec-tabs .promos-tab:hover { background: rgba(0, 0, 0, 0.04); color: var(--pz-text); }
[data-theme="dark"] .promos-shell .sec-tabs .promos-tab:hover { background: rgba(255, 255, 255, 0.06); }
.promos-shell .sec-tabs .promos-tab.active {
  background: var(--pz-surface);
  color: var(--pz-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .promos-shell .sec-tabs .promos-tab.active {
  background: var(--pz-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Inline-action cluster on the right side of an alert-rule row.
   Each form lives next to a row-wide click target that opens the
   edit modal — `data-modal-skip` on this cluster prevents clicks on
   the toggle/test/edit buttons from also opening the modal. */
.promos-shell .sec-row__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}
.promos-shell .sec-row__actions form { margin: 0; display: inline-flex; }
.promos-shell .sec-row__action-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--pz-border);
  background: var(--pz-surface);
  color: var(--pz-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  text-decoration: none;
}
.promos-shell .sec-row__action-btn:hover {
  background: var(--pz-surface-muted);
  color: var(--pz-text);
  border-color: var(--pz-border-strong);
  text-decoration: none;
}
.promos-shell .sec-row__action-btn--primary {
  border-color: var(--pz-brand);
  color: var(--pz-brand-fg);
  background: var(--pz-brand);
}
.promos-shell .sec-row__action-btn--primary:hover {
  color: var(--pz-brand-fg);
  background: var(--pz-brand);
  opacity: 0.92;
}

/* Row variant for the alerts page — uses a div (not <a>) so we can
   nest forms safely. Hover is still page-cursor pointer to read as
   clickable. */
.promos-shell .promos-row.sec-row {
  cursor: pointer;
}

/* Cloudflare Turnstile wrapper — center the (flexible) widget inside the
   auth-card and give it consistent vertical breathing room. Behaviour:
   - `data-appearance="interaction-only"` causes Cloudflare to hide the
     iframe once the challenge resolves silently, so for most visitors the
     wrap collapses to its margins only (no visible widget).
   - `data-size="flexible"` makes the widget fluid between 130-380 px so
     it sits naturally in a narrow form column. */
.turnstile-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0 6px;
}
.turnstile-wrap .cf-turnstile { width: 100%; max-width: 360px; }

/* ── Checkout identify interstitial (anonymous visitor) ──────────────
   Three "How would you like to check out?" choice cards: guest / login /
   sign-up. Hover lifts the card; the leading icon sits in a soft tinted
   circle that picks up the shop's primary colour. */
.shop-checkout-identify-card {
  border: 1px solid var(--border, #e5e7eb);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.shop-checkout-identify-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  border-color: var(--primary, #10b981);
}
.shop-checkout-identify-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary, #10b981) 12%, transparent);
  color: var(--primary, #10b981);
  font-size: 16px;
}
[data-theme="dark"] .shop-checkout-identify-card {
  background: var(--card, #222);
  border-color: var(--border, #333);
}
[data-theme="dark"] .shop-checkout-identify-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ── Shop-owner "please verify your email" banner ─────────────────
   Lives between the topbar and .admin-main inside .admin-main-col.
   Matches .admin-main's 22px horizontal gutter so it visually aligns
   with the page body. Resend button uses a custom color pair that
   stays readable on both the light yellow alert-warning AND the
   darker dark-mode alert variant Bootstrap renders. */
.admin-shell[data-admin-shell] .owner-verify-banner,
.admin-shell[data-admin-shell] .owner-verify-flash {
  margin: 16px 22px 0;
}
.admin-shell[data-admin-shell] .owner-verify-banner + .admin-main,
.admin-shell[data-admin-shell] .owner-verify-flash:last-of-type {
  /* When the banner is present the admin-main padding-top would stack
     on top of the banner's bottom margin — collapse to a single 16px
     gap by zeroing one side. */
}
.admin-shell[data-admin-shell] .owner-verify-banner {
  margin-bottom: 16px;
}

/* Resend button — explicit colors so dark mode doesn't swallow the
   default btn-outline-dark border. Uses solid medium-gray fill on
   light mode (visible against yellow) and a lighter fill on dark mode
   (visible against the muted dark-warning background). */
.owner-verify-resend-btn {
  background: #1f2937;
  border: 1px solid #1f2937;
  color: #ffffff;
}
.owner-verify-resend-btn:hover,
.owner-verify-resend-btn:focus {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}
[data-theme="dark"] .owner-verify-resend-btn {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #1f2937;
}
[data-theme="dark"] .owner-verify-resend-btn:hover,
[data-theme="dark"] .owner-verify-resend-btn:focus {
  background: #f9fafb;
  border-color: #f9fafb;
  color: #111827;
}

/* ── Storefront header brand fallback (no logo uploaded) ──────────
   Mirrors the admin sidebar's az-shop-badge + az-shop-name styling so
   admin and storefront feel like one brand. Triggered in layout.ejs
   when isShopFrontPage && !hasShopLogo via the `_useInitialFallback`
   variable. The badge uses the shop's --primary colour (set by the
   per-shop theme tokens further down the file). */
.shop-brand-fallback {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* No line-height: 1 — descenders (g, p, q, y, j) need vertical room below
     the baseline; the badge still centers via flex regardless. */
}
.shop-brand-fallback__badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;          /* one letter, vertically centred — line-height: 1 is correct here */
  letter-spacing: 0;
  /* color comes from inline style="--primary-fg" so per-shop branding wins */
}
.shop-brand-fallback__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg, #111827);
  letter-spacing: -0.2px;
  /* Tall enough to show descenders cleanly — 16 * 1.25 = 20px box leaves
     room for g/p/q/y/j without the ellipsis clipping them off. */
  line-height: 1.25;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .shop-brand-fallback__name { max-width: 160px; font-size: 15px; }
  .shop-brand-fallback__badge { width: 28px; height: 28px; font-size: 13px; }
}

/* ─── Page-block editor: feature-item icon grid picker ───
   Shown inside the Bootstrap .dropdown-menu in the editor's feature-
   list item rows. 6 columns × N rows. Each cell is a square button
   showing the actual FontAwesome glyph; hover lightens the cell,
   .is-selected gives it a coloured ring. */
.page-block-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.page-block-icon-grid-btn {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--bs-body-color, #333);
  padding: 0;
}
.page-block-icon-grid-btn:hover {
  background: var(--bs-secondary-bg, #f0f0f0);
}
.page-block-icon-grid-btn.is-selected {
  background: var(--bs-primary-bg-subtle, #cfe2ff);
  border-color: var(--bs-primary, #0d6efd);
}

/* ─── Hero block track (multi-slide carousel) ───
   The track keeps overflow-x:auto in the inline style so touch
   swipe still works on mobile, but the native scrollbar is hidden
   on every viewport (Firefox `scrollbar-width: none` + WebKit
   pseudo-element). Desktop visitors navigate via the hover-shown
   .carousel-arrow buttons defined in the section above (shared
   with the collection-widget carousel). */
.block-hero__track,
.block-image__track {
  scrollbar-width: none;
}
.block-hero__track::-webkit-scrollbar,
.block-image__track::-webkit-scrollbar { display: none; }

/* Reveal the .carousel-arrow.is-visible inside a hero / image-slideshow
   on hover — mirrors the same hover rule the collection-widget has
   for its own carousel. */
.block-hero:hover .carousel-arrow.is-visible,
.block-hero .carousel-arrow.is-visible:focus-visible,
.block-image:hover .carousel-arrow.is-visible,
.block-image .carousel-arrow.is-visible:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Hero block headings (views/partials/shop/blocks/_block_hero.ejs) ───
   Bootstrap's default h3 (1.75rem) was a touch too loud inside the
   hero pill — reads as 'heading' rather than the intended supporting
   subheading level. Trim it to 1.4rem. h1/h2 stay at default sizes. */
.block-hero__heading h3,
.block-hero__sub h3 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0;
}

/* ─── Hero block button (views/partials/shop/blocks/_block_hero.ejs) ───
   Three size variants — small / medium / large — that intentionally
   step UP from the Bootstrap defaults. 'medium' is roughly where
   Bootstrap's .btn-lg sits; 'large' is bigger still and a touch
   bolder. The hover/focus/active rules deliberately keep the SAME
   background colour as the resting state (Bootstrap's .btn-primary
   would otherwise re-paint with a shifted gradient on hover, which
   fights both the owner's chosen custom colour AND looks busy on a
   hero banner).

   Custom colours come in via inline CSS variables set by the partial
   when cta_bg is non-empty:
     style="--hero-btn-bg:#abc;--hero-btn-border:#abc;color:#fff;"
   When the variables aren't set the buttons fall through to the
   default brand gradient. */
.block-hero__btn.btn-primary,
.block-hero__btn.btn-primary:hover,
.block-hero__btn.btn-primary:focus,
.block-hero__btn.btn-primary:active,
.block-hero__btn.btn-primary:focus-visible {
  background: var(--hero-btn-bg, linear-gradient(135deg, var(--primary), var(--primary-2))) !important;
  border-color: var(--hero-btn-border, var(--primary)) !important;
  /* color is driven by the same CSS-variable pattern as bg so the
     partial can override it per-slide. Default white (the original
     hardcoded value); the partial sets --hero-btn-fg when the owner
     picks a button text colour or when a bg is set. */
  color: var(--hero-btn-fg, #fff) !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  transition: none !important;
}
/* Size variants. Padding + font-size chosen so 'medium' lines up with
   Bootstrap's old .btn-lg, and 'large' steps up another notch. */
.block-hero__btn--small {
  padding: 0.4rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
}
.block-hero__btn--medium {
  padding: 0.65rem 1.4rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.block-hero__btn--large {
  padding: 0.95rem 1.9rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}
/* The →-arrow icon sits inside the button, separated from the label
   by a fixed gap. Slightly smaller than the label text so the arrow
   reads as a directional cue rather than competing for attention.
   The icon has its OWN transition so it can slide right on hover —
   the parent .block-hero__btn has `transition: none` to suppress
   colour shift, but a child element's transition is independent. */
.block-hero__btn-icon {
  margin-left: 0.6em;
  font-size: 0.85em;
  display: inline-block;
  transition: transform 0.2s ease;
}
.block-hero__btn:hover .block-hero__btn-icon,
.block-hero__btn:focus .block-hero__btn-icon {
  transform: translateX(2px);
}