/* 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-solid, var(--primary));
  color: var(--primary-fg, 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-solid, 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-solid, 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-solid, 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, .filter-price-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; }

/* Unit name shown inside the quantity stepper, e.g. "6 karton". */
.qty-unit {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 0.45rem 0 0.1rem;
  white-space: nowrap;
  user-select: none;
}

/* ─── 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; display: flex; flex-direction: column; gap: 0.125rem; }

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

/* Secondary cart-item lines (SKU, variation + unit price) — 13px, evenly
   spaced from the name via the flex `gap` above. */
.cart-item-sub {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.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;
}

/* Checkout summary: dual-direction sticky (same behaviour as the category
   sidebar) so a tall summary reveals its totals as you scroll down instead of
   pushing them below the fold. navigation.js drives `top` dynamically on
   ≥992px screens; this rule is the pre-JS fallback and the mobile behaviour. */
.checkout-summary-card {
  position: sticky;
  top: calc(var(--navbar-height, 64px) + 20px + var(--announcement-bar-h, 0px));
  transition: top 0.22s ease;
}

/* ─── Checkout method chooser (Guest / Apple Pay / Google Pay) ─── */
.checkout-methods {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
/* Express Checkout (wallet) button sits beside the guest button, sharing the row equally and
   matching its height (flex stretch) + radius. The Google/Apple button supplies its own fill,
   so no border/padding here — just sizing. Stacks under the guest button on narrow screens. */
.checkout-method--wallet {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
.checkout-method--wallet [data-express-checkout-element] { width: 100%; }
@media (max-width: 575.98px) {
  .checkout-methods { flex-direction: column; }
}
.checkout-method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 0.625rem;
  background: var(--card);
}
.checkout-method--guest {
  flex: 1 1 0;
  gap: calc(0.5rem - 3px);
}
.checkout-method--icon {
  flex: 1 1 0;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.checkout-method__icon { font-size: 1.4rem; line-height: 1; color: var(--muted); }
.checkout-method--guest .checkout-method__icon { font-size: 1rem; }
/* Wallet glyphs are wide wordmarks that sit a touch high in their box, so
   enlarge them and nudge down a couple of px to centre them optically. */
.checkout-method--icon .checkout-method__icon { font-size: 2.3rem; transform: translateY(2px); }
.checkout-method__label { font-size: 1rem; font-weight: 500; color: var(--fg); }
.checkout-method--active {
  border-color: var(--primary);
  background: var(--primary-subtle, rgba(159, 80, 223, 0.08));
}
.checkout-method--active .checkout-method__icon { color: var(--primary); }
.checkout-login-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1rem 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.checkout-login-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.checkout-login-divider a { white-space: nowrap; }
.checkout-method--disabled {
  /* Rendered at full strength (looks like a normal button) but inert until
     the wallet integrations ship. */
  pointer-events: none;
}

@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;
  flex: 0 0 auto;
}

.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-solid, var(--primary));
  border-color: var(--primary-solid, var(--primary));
  color: var(--primary-fg, var(--bg, #f8f9fb));
}

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

.checkout-step-line {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 2px;
  background: var(--border);
  margin: 0 0.5rem;
}

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

/* ─── Distraction-free checkout header ─── */
/* On checkout the header shows only the brand + a "Secure checkout" badge;
   the progress steps live above the form, and the other action buttons are
   dropped server-side (rendered only in the non-checkout branch). */
.checkout-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
/* Secure-checkout + Data-protection badges in the checkout top bar — icons in
   the shop's brand colour, 20px between the two badges + a 10px gap to the
   right edge. */
.checkout-trust { gap: 20px; margin-right: 10px; }
.checkout-secure i { color: var(--primary-text, var(--primary)); }

/* "Add billing details" disclosure toggle — styled as a plain link. */
.checkout-billing__toggle {
  cursor: pointer;
  color: var(--primary-text, var(--primary));
  font-weight: 500;
  width: fit-content;
  list-style: none;
}
.checkout-billing__toggle::-webkit-details-marker { display: none; }
.checkout-billing__toggle::marker { content: ""; }

@media (min-width: 992px) {
  /* Order-summary column ~20px narrower; the form column absorbs the width. */
  .checkout-cols > .col-lg-5 { flex: 0 0 auto; width: calc(41.666667% - 20px); }
  .checkout-cols > .col-lg-7 { flex: 0 0 auto; width: calc(58.333333% + 20px); }
}

/* ─── 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; }
/* Filled states (hover / active / open dropdown): the outline uses
   currentColor, which is WHITE once the button fills and its text goes white
   — a stray white ring. Match the border to the grey fill instead (the fill
   already signals the state). Dark mode keeps its own translucent border. */
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.show,
.btn-check:checked + .btn-outline-secondary {
  border-color: #6c757d !important;
}
[data-theme="dark"] .btn-outline-secondary:active,
[data-theme="dark"] .btn-outline-secondary.active,
[data-theme="dark"] .btn-outline-secondary.show,
[data-theme="dark"] .btn-check:checked + .btn-outline-secondary {
  border-color: rgba(229,231,235,0.45) !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-solid, var(--primary)) !important;
  border-color: var(--primary-solid, var(--primary)) !important;
  background-image: var(--check-mark) !important;
}
.form-check-input[type="radio"]:checked {
  background-color: var(--primary-solid, var(--primary)) !important;
  border-color: var(--primary-solid, var(--primary)) !important;
  background-image: var(--radio-dot) !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;
}
/* Track uses the solid accent; the knob SVG already adapts to accent brightness */
.form-switch .form-check-input:checked {
  background-color: var(--primary-solid, var(--primary)) !important;
  background-image: var(--switch-knob) !important;
  border-color: var(--primary-solid, 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; }
/* …but the cart-count bubble is an accent, not a neutral status pill. The ID
   selector outranks the generic `.badge` rule above so it keeps the accent in
   dark mode (raw-ish fill + intelligent number), matching light mode. */
[data-theme="dark"] #headerCartBadge { background: var(--primary-solid, var(--primary)) !important; color: var(--primary-fg, var(--bg, #0b0f19)) !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%
    );
  /* NO background-attachment: fixed here. The element already fills the
     position:fixed .landing-bg, so attachment added nothing visually — but
     ANY background-attachment:fixed forces Chrome onto main-thread scrolling
     for the whole page (choppy scroll). Light mode was choppy while dark was
     smooth precisely because the dark override below uses the background
     shorthand, which resets attachment to scroll. (Diagnosed 2026-07-21.) */
}
[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;
}
/* Desktop: visually center the copy against the demo. The box keeps its
   constant min-height (2-line rotator cushion, absorbed upward without
   moving the subtitle/buttons); this bottom padding splits the reserve
   space evenly above and below the content instead of all-above. */
@media (min-width: 992px) {
  .landing-hero-copy { padding-bottom: 52px; }
}
.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.125rem, 4.7vw, 3.5rem);
  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);
  /* Same size as the section leads (.lp2-lead) */
  font-size: 15.5px;
  line-height: 1.5;
  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%);
  /* 200% size + one full tile of travel per cycle = seamless loop
     (the gradient's ends match, so the wrap point is invisible). */
  background-size: 200% 100%;
  /* Sliding gradient + breathing glow (smooth in-out, no ring pulse) */
  animation: landingBtnGradient 9s linear infinite, landingBtnGlow 3.6s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(159,80,223,.35);
  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;
  /* Subtle sweep: narrow, faint band on a slower cadence */
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: landingBtnSheen 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.landing-btn-primary:hover,
.landing-btn-primary:focus {
  color: #fff;
  transform: translateY(-2px);
  /* Drop the glow animation on hover so the stronger static glow can win
     (a running box-shadow animation would override the hover shadow). */
  animation: landingBtnGradient 9s linear infinite;
  box-shadow: 0 0 44px rgba(159,80,223,.6), 0 0 0 6px rgba(159,80,223,.18);
}
.landing-btn-primary:active { transform: translateY(0); }
/* Nudging arrow: a gentle double-tap toward the end of each cycle;
   on hover it holds a small offset instead. */
.landing-btn-primary .fa-arrow-right { animation: landingBtnArrow 4.5s ease-in-out infinite; }
.landing-btn-primary:hover .fa-arrow-right,
.landing-btn-primary:focus .fa-arrow-right {
  animation: none;
  transform: translateX(3px);
  transition: transform .2s ease;
}
@keyframes landingBtnArrow {
  0%, 78%, 100% { transform: translateX(0); }
  84% { transform: translateX(4px); }
  90% { transform: translateX(0); }
  95% { transform: translateX(2px); }
}
/* Position 200% -> 0% slides the image RIGHT, so the color bands flow
   left-to-right (matching the sheen direction). */
@keyframes landingBtnGradient {
  0% { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}
/* Zero offset = the neon breath radiates evenly around the button. */
@keyframes landingBtnGlow {
  0%,100% { box-shadow: 0 0 24px rgba(159,80,223,.35); }
  50%     { box-shadow: 0 0 42px 4px rgba(159,80,223,.55); }
}
@keyframes landingBtnSheen {
  0%, 62%  { transform: translateX(-130%); }
  78%      { transform: translateX(130%); }
  100%     { transform: translateX(130%); }
}

/* 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); }
}

.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); }
}
.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; }

/* ── Hero product tour — faithful Shopiza recreation (DOM screencast) ──
   A fake cursor drives a near-exact replica of the real Shopiza Admin
   (Settings: upload logo + pick brand colour → Products table → Create
   Product modal) then a Storefront window slides up (catalog with sale
   badges & variant dropdowns → add to cart → dark mode → product page with
   SKU/EAN/variants/reviews) → back to Admin → Analytics, and loops.
   Fixed 900×700 design, scaled to fit the hero's right column. No libraries.
   --tour-accent = the shop's brand colour; it live-recolours everything, as
   the real --primary does. Scoped to .tour-* + views/partials/_landing_tour.ejs */
/* iOS-safe scale-to-fit: .tour-fit is a NORMAL (untransformed) element sized to
   the visible area (column width × scaled height) and clips its child; the fixed
   900px .tour-stage is the TRANSFORMED child. Clipping a transformed child with a
   plain parent renders reliably on iOS (clipping a transformed element by its
   parent did not). Because .tour-fit is only column-wide, the stage can never
   widen the page. JS sets .tour-fit height + .tour-stage scale. */
.tour-holder { position: relative; width: 100%; max-width: 100%; }
/* No drop shadow (owner removed all demo glows/shadows 2026-07-21) — a
   hairline border keeps the frame edge readable on light bands. */
.tour-fit { position: relative; width: 100%; height: 0; overflow: hidden; border-radius: 10px; border: 1px solid rgba(16,24,40,.1); }
.tour-stage { position: absolute; top: 0; left: 0; width: 900px; height: 700px; transform-origin: top left; will-change: transform; --tour-accent: #9f50df; font-family: Inter, system-ui, sans-serif; }
.tour-stage a { text-decoration: none; } /* NOTE: don't set color here — it would beat .tour-child's own colour (specificity) and hide the submenu links */
/* Neutralise the ≤576 responsive constraints on the hero media/visual
   (max-width:300 + auto side-margins on the grid item) — iOS Safari mis-sizes a
   grid item with max-width + auto margins to ~0 width, which is why the demo
   vanished in portrait (that rule) but worked in landscape (it doesn't apply)
   and in desktop Chrome (which sizes it correctly). Make the tour column
   full-width and origin-anchored in every breakpoint. */
/* Display-only screencast: same as the PDP/checkout demos — pointer input
   falls through to the page so users can't scroll the tour's inner catalog. */
.landing-hero-media--tour { pointer-events: none; }
.landing-hero-media--tour, .landing-hero-visual--tour {
  min-height: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}

/* Browser-window shell (shared) */
.tour-win { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.tour-chrome { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 15px; background: #eceef2; border-bottom: 1px solid rgba(16,24,40,.08); }
.tour-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.tour-dot--r { background: #ff5f57; } .tour-dot--y { background: #febc2e; } .tour-dot--g { background: #28c840; }
.tour-omni { flex: 1; margin-left: 12px; max-width: 460px; height: 24px; border-radius: 999px; background: #fff; border: 1px solid rgba(16,24,40,.1); display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 12px; color: #6b7280; }
.tour-omni > i { font-size: 10px; color: #16a34a; }
.tour-view { position: absolute; top: 40px; left: 0; right: 0; bottom: 0; }

/* ============ ADMIN WINDOW ============ */
.tour-win--admin .tour-view { display: flex; }
.tour-side { width: 186px; flex: 0 0 186px; background: #141414; border-right: 1px solid #222; padding: 10px 10px 8px; display: flex; flex-direction: column; }
.tour-brand { display: flex; align-items: center; gap: 9px; padding: 6px 6px 12px; }
.tour-brand-badge { width: 30px; height: 30px; border-radius: 8px; background: var(--tour-accent); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; transition: background .45s; }
.tour-brand-name { font-size: 13.5px; font-weight: 600; color: #f0efed; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-brand-cx { color: #6f6f6f; font-size: 10px; }
.tour-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: #d9d8d5; position: relative; }
.tour-nav svg { width: 16px; height: 16px; flex: 0 0 auto; color: #d9d8d5; }
.tour-nav .tour-caret2 { margin-left: auto; width: 11px; height: 11px; transition: transform .25s; color: #8a8a8a; }
.tour-nav.is-active { background: color-mix(in srgb, var(--tour-accent) 15%, transparent); color: #fff; }
.tour-nav.is-active svg { color: var(--tour-accent); }
.tour-nav.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(--tour-accent); }
.tour-group.is-open > .tour-nav .tour-caret2 { transform: rotate(0deg); }
.tour-group > .tour-nav .tour-caret2 { transform: rotate(-90deg); }
.tour-children { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding-left: 8px; position: relative; }
.tour-group.is-open > .tour-children { max-height: 320px; }
.tour-children::before { content: ""; position: absolute; left: 15px; top: 4px; bottom: 6px; width: 1px; background: #2c2c2c; }
.tour-child { display: block; padding: 6px 10px 6px 22px; border-radius: 8px; font-size: 12.5px; color: #b7b6b3; position: relative; }
.tour-child.is-active { background: color-mix(in srgb, var(--tour-accent) 11%, transparent); color: #fff; }
.tour-child.is-active::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 15px; border-radius: 2px 0 0 2px; background: var(--tour-accent); }
.tour-side-foot { margin-top: auto; padding: 8px 6px 8px; border-top: 1px solid #222; display: flex; align-items: center; gap: 9px; }
.tour-side-foot .tour-brand-badge { background: var(--tour-accent); font-size: 11px; }
.tour-side-foot .tour-brand-badge img { width: 18px; height: 18px; object-fit: contain; }
.tour-side-foot-name { font-size: 12.5px; font-weight: 600; color: #f0efed; line-height: 1.2; }
.tour-side-foot-plan { font-size: 10.5px; color: #8a8a8a; }

.tour-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.tour-topbar { height: 50px; flex: 0 0 50px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: #fff; border-bottom: 1px solid #e8eaee; }
.tour-tsearch { width: 240px; height: 34px; border: 1px solid #e4e7ec; border-radius: 9px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #9aa3b2; font-size: 12.5px; background: #f7f8fa; }
.tour-tsearch svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tour-tsearch .kbd { margin-left: auto; font-size: 10px; color: #b3b9c2; border: 1px solid #e4e7ec; border-radius: 4px; padding: 1px 5px; background: #fff; }
.tour-tright { margin-left: auto; display: flex; align-items: center; gap: 17px; }
.tour-tbtn { display: inline-flex; align-items: center; gap: 6px; color: #4b5563; font-size: 13px; position: relative; }
.tour-tbtn svg { width: 18px; height: 18px; }
.tour-tbell .dot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; border: 1.5px solid #fff; }
.tour-tprofile { width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--tour-accent) 16%, transparent); color: var(--tour-accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; transition: background .4s, color .4s; }
.tour-main-body { flex: 1; position: relative; overflow: hidden; background: #f6f7f9; }
.tour-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tour-panel { position: absolute; inset: 0; padding: 20px 22px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; overflow: hidden; }
.tour-win--admin[data-view="settings"]  .tour-panel--settings,
.tour-win--admin[data-view="products"]  .tour-panel--products,
.tour-win--admin[data-view="analytics"] .tour-panel--analytics { opacity: 1; transform: none; }
.tour-ph { margin-bottom: 14px; }
.tour-ph-title { font-size: 18px; font-weight: 800; color: #111827; }
.tour-ph-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.tour-label { font-size: 11px; font-weight: 700; color: #6b7280; margin: 0 0 6px; }

/* Settings tabs */
.tour-tabs { display: flex; gap: 20px; border-bottom: 1px solid #e5e7eb; margin-bottom: 16px; }
.tour-tab { display: flex; align-items: center; gap: 6px; padding: 0 2px 10px; font-size: 13px; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tour-tab svg { width: 15px; height: 15px; }
.tour-tab.is-active { color: var(--tour-accent); border-bottom-color: var(--tour-accent); }
.tour-section-title { font-size: 13px; font-weight: 800; color: #111827; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.tour-section-title i { color: #9aa3b2; }
.tour-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tour-field { margin-bottom: 12px; }
.tour-input { border: 1px solid #d7dce3; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; color: #111827; min-height: 36px; background: #fff; display: flex; align-items: center; transition: border-color .2s, box-shadow .2s; }
.tour-input.is-focus { border-color: var(--tour-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tour-accent) 18%, transparent); }
.tour-input.tour-input--muted { color: #9aa3b2; }
.tour-caret { display: inline-block; width: 1.5px; height: 15px; background: var(--tour-accent); opacity: 0; margin-left: 1px; vertical-align: middle; }
.is-focus > .tour-caret, .tour-input.is-focus .tour-caret { animation: tourBlink 1s steps(1) infinite; }
@keyframes tourBlink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }

/* Native-style colour picker */
.tour-color-row { display: flex; align-items: center; gap: 12px; position: relative; }
.tour-color-sw { width: 48px; height: 38px; border-radius: 8px; border: 1px solid #d7dce3; background: var(--tour-accent); flex: 0 0 auto; transition: background .3s; box-shadow: inset 0 0 0 2px #fff; }
.tour-color-help { font-size: 11px; color: #9aa3b2; line-height: 1.4; }
.tour-cpop { position: absolute; top: 46px; left: 0; width: 176px; background: #fff; border: 1px solid #e2e5ea; border-radius: 12px; box-shadow: 0 20px 44px rgba(16,24,40,.25); padding: 10px; opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top left; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 6; }
.tour-cpop.is-open { opacity: 1; transform: none; }
.tour-cpop-sv { height: 96px; border-radius: 8px; position: relative; background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--tour-hue,270), 90%, 50%)); }
.tour-cpop-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transform: translate(-50%,-50%); transition: left .5s ease, top .5s ease; }
.tour-cpop-hue { height: 12px; border-radius: 999px; margin-top: 9px; position: relative; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.tour-cpop-thumb { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 1px 3px rgba(0,0,0,.3); transform: translate(-50%,-50%); transition: left .6s ease; }
.tour-cpop-hex { margin-top: 9px; font-size: 11px; font-weight: 700; color: #374151; letter-spacing: .04em; text-align: center; }

/* Logo upload */
.tour-logo-box { display: flex; align-items: center; gap: 12px; }
.tour-drop { width: 76px; height: 76px; border: 2px dashed #cbd2dd; border-radius: 12px; background: #fff; display: grid; place-items: center; text-align: center; color: #9aa3b2; font-size: 10px; flex: 0 0 auto; overflow: hidden; transition: border-color .25s, background .25s; }
.tour-drop-ph svg { margin-bottom: 3px; }
.tour-drop.is-drop { border-color: var(--tour-accent); background: color-mix(in srgb, var(--tour-accent) 7%, transparent); }
/* After "upload": show the actual Northlight logo lockup, right there. */
.tour-drop.has-logo { width: auto; min-width: 156px; height: 62px; padding: 0 16px; border-style: solid; border-color: #e3e6ec; }
.tour-drop.has-logo .tour-drop-ph { display: none; }
.tour-drop .tour-logo-preview { display: none; align-items: center; gap: 9px; }
.tour-drop.has-logo .tour-logo-preview { display: flex; }
.tour-logo-preview .tour-logomark { width: 30px; height: 30px; flex: 0 0 auto; }
.tour-logo-word { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #1f2430; }
.tour-logo-word span { font-weight: 400; opacity: .7; }
.tour-upload-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; background: #fff; border: 1px solid #d7dce3; font-size: 12px; font-weight: 600; color: #374151; }

/* Products table */
.tour-limit-card { background: #fff; border: 1px solid #e8eaee; border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; font-size: 12px; color: #374151; display: flex; align-items: center; gap: 8px; }
.tour-limit-card b { color: #111827; }
.tour-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tour-toolbar .tour-th-title { font-size: 15px; font-weight: 700; color: #111827; margin-right: auto; }
.tour-select { border: 1px solid #d7dce3; border-radius: 8px; padding: 6px 26px 6px 10px; font-size: 12px; color: #374151; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%236b7280' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center; }
.tour-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 8px; background: var(--tour-accent); color: #fff; font-size: 12.5px; font-weight: 600; transition: background .4s, transform .1s; }
.tour-btn.is-press { transform: scale(.95); }
.tour-btn-ghost { padding: 8px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #6b7280; background: #eef0f3; }
.tour-table { width: 100%; background: #fff; border: 1px solid #e8eaee; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 12px; }
.tour-table th { text-align: left; padding: 9px 12px; font-size: 10.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #eceef2; background: #fafbfc; }
.tour-table td { padding: 8px 12px; border-bottom: 1px solid #f1f2f5; color: #374151; vertical-align: middle; }
.tour-table tr:last-child td { border-bottom: 0; }
.tour-prodcell { display: flex; align-items: center; gap: 10px; }
.tour-prodcell-img { width: 40px; height: 40px; border-radius: 5px; background-size: cover; background-position: center; background-color: #eceef2; flex: 0 0 auto; }
.tour-prodcell-name { font-weight: 600; color: #111827; }
.tour-prodcell-sub { font-size: 10.5px; color: #9aa3b2; }
.tour-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.tour-badge--cat { background: #eceef2; color: #4b5563; }
.tour-badge--stock { background: #dcfce7; color: #16a34a; }
.tour-badge--active { background: #dcfce7; color: #16a34a; }
.tour-badge--accent { background: var(--tour-accent); color: #fff; transition: background .4s; }
.tour-price { font-weight: 600; color: #111827; }
.tour-acts { color: #9aa3b2; display: flex; gap: 10px; }
.tour-row--new td { background: color-mix(in srgb, var(--tour-accent) 7%, #fff); }
/* Hidden entirely (display:none) so it reserves NO gap until it's created. */
.tour-row--new { display: none; }
.tour-row--new.is-in { display: table-row; }
.tour-row--new.is-in td { animation: tourRowIn .45s ease; }
@keyframes tourRowIn { from { opacity: 0; } to { opacity: 1; } }

/* Create-product modal */
.tour-modal-wrap { position: absolute; inset: 0; background: rgba(16,24,40,.4); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 10; }
.tour-modal-wrap.is-open { opacity: 1; }
.tour-modal { width: 560px; max-height: 620px; background: #fff; border-radius: 16px; box-shadow: 0 40px 90px rgba(16,24,40,.45); overflow: hidden; display: flex; flex-direction: column; transform: translateY(16px) scale(.96); transition: transform .34s cubic-bezier(.34,1.4,.64,1); }
.tour-modal-wrap.is-open .tour-modal { transform: none; }
.tour-modal-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #eef0f3; }
.tour-modal-swatch { width: 30px; height: 30px; border-radius: 8px; background: var(--tour-accent); display: grid; place-items: center; color: #fff; font-size: 13px; transition: background .4s; }
.tour-modal-h-t { font-size: 15px; font-weight: 800; color: #111827; }
.tour-modal-x { margin-left: auto; color: #9aa3b2; font-size: 15px; }
.tour-modal-b { padding: 16px 18px; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.tour-modal-b-inner { transition: transform .5s ease; }
.tour-sec { border: 1px solid #eceef2; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.tour-sec-h { display: flex; align-items: center; padding: 10px 13px; font-size: 12.5px; font-weight: 700; color: #111827; background: #fafbfc; }
.tour-sec-h .fa-chevron-down { margin-left: auto; color: #b3b9c2; font-size: 10px; }
.tour-sec-b { padding: 13px; }
.tour-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #374151; }
.tour-check-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #cbd2dd; display: grid; place-items: center; color: #fff; font-size: 9px; }
.tour-check-box.on { background: var(--tour-accent); border-color: var(--tour-accent); transition: background .3s; }
.tour-langstrip { display: inline-flex; gap: 2px; margin-left: auto; }
.tour-lang { font-size: 9.5px; font-weight: 700; padding: 2px 5px; border-radius: 4px; color: #9aa3b2; }
.tour-lang.on { background: color-mix(in srgb, var(--tour-accent) 14%, transparent); color: var(--tour-accent); }
.tour-fhead { display: flex; align-items: center; margin-bottom: 6px; }
.tour-fhead .tour-label { margin: 0; }
.tour-inp { border: 1px solid #d7dce3; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #111827; min-height: 34px; display: flex; align-items: center; transition: border-color .2s, box-shadow .2s; }
.tour-inp.is-focus { border-color: var(--tour-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tour-accent) 16%, transparent); }
.tour-inp--area { min-height: 40px; align-items: flex-start; }
.tour-inp--pre { gap: 2px; } .tour-inp--pre .cur { color: #6b7280; }
.tour-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.tour-gallery { display: flex; gap: 9px; align-items: center; }
/* Hidden (display:none) until uploaded — so the "+" starts first and shifts
   right as each real image appears; no reserved empty gaps. */
.tour-gimg { width: 60px; height: 60px; border-radius: 8px; background-size: cover; background-position: center; background-color: #eceef2; display: none; transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.tour-gimg.is-in { display: block; }
.tour-gimg.is-drag { z-index: 5; box-shadow: 0 12px 26px rgba(16,24,40,.3); }
.tour-gadd { width: 60px; height: 60px; border: 2px dashed #cbd2dd; border-radius: 8px; display: grid; place-items: center; color: #9aa3b2; font-size: 12px; text-align: center; line-height: 1.2; order: 9; }
.tour-varopt { border: 1px solid #eceef2; border-radius: 8px; padding: 10px; }
.tour-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tour-vchip { padding: 4px 9px; border-radius: 6px; background: #f1f2f5; font-size: 11px; color: #374151; }
.tour-modal-f { padding: 13px 18px; border-top: 1px solid #eef0f3; display: flex; align-items: center; gap: 8px; }
.tour-modal-f .tour-btn-ghost { margin-left: auto; }

/* Analytics */
.tour-period { display: inline-flex; border: 1px solid #d7dce3; border-radius: 8px; overflow: hidden; font-size: 11px; }
.tour-period span { padding: 5px 11px; color: #6b7280; border-right: 1px solid #e5e7eb; }
.tour-period span:last-child { border-right: 0; }
.tour-period span.on { background: var(--tour-accent); color: #fff; transition: background .4s; }
.tour-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 14px; }
.tour-kpi { background: #fff; border: 1px solid #e8eaee; border-radius: 10px; padding: 12px 13px; }
.tour-kpi-l { font-size: 10.5px; color: #6b7280; }
.tour-kpi-v { font-size: 20px; font-weight: 800; color: #111827; margin-top: 4px; }
.tour-kpi-d { font-size: 10.5px; color: #16a34a; font-weight: 700; margin-top: 2px; }
.tour-kpi-d.down { color: #dc2626; }
.tour-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.tour-chart { background: #fff; border: 1px solid #e8eaee; border-radius: 10px; padding: 13px 15px; }
.tour-chart-t { font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 12px; }
.tour-bars { display: flex; align-items: flex-end; gap: 8px; height: 118px; }
.tour-bar { flex: 1; background: var(--tour-accent); border-radius: 4px 4px 0 0; height: 4px; align-self: flex-end; opacity: .9; transition: height .8s cubic-bezier(.3,0,.2,1), background .4s; }
.tour-win--admin[data-view="analytics"] .tour-bar { height: var(--h); }
.tour-line { width: 100%; height: 118px; display: block; }
.tour-line path.area { fill: color-mix(in srgb, var(--tour-accent) 12%, transparent); stroke: none; opacity: 0; transition: opacity .5s .5s; }
.tour-line path.stroke { fill: none; stroke: var(--tour-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.2s ease, stroke .4s; }
.tour-win--admin[data-view="analytics"] .tour-line path.stroke { stroke-dashoffset: 0; }
.tour-win--admin[data-view="analytics"] .tour-line path.area { opacity: 1; }
.tour-atabs { display: flex; gap: 18px; border-bottom: 1px solid #e5e7eb; margin-bottom: 14px; }
.tour-atab { padding: 0 1px 9px; font-size: 12px; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tour-atab.is-active { color: var(--tour-accent); border-bottom-color: var(--tour-accent); }
.tour-awidgets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tour-awidget { background: #fff; border: 1px solid #e8eaee; border-radius: 10px; padding: 13px 15px; }
.tour-awidget-t { font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 11px; }
.tour-mvp-row { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tour-mvp-img { width: 30px; height: 30px; border-radius: 5px; background-size: cover; background-position: center; flex: 0 0 auto; }
.tour-mvp-name { font-size: 11.5px; color: #374151; flex: 1; }
.tour-mvp-val { font-size: 11.5px; font-weight: 700; color: #111827; }
.tour-funnel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; }
.tour-funnel-row .lbl { width: 108px; color: #6b7280; }
.tour-funnel-bar { flex: 1; height: 14px; border-radius: 4px; background: #eef0f3; overflow: hidden; }
.tour-funnel-bar span { display: block; height: 100%; background: var(--tour-accent); border-radius: 4px; width: 0; transition: width .8s cubic-bezier(.3,0,.2,1), background .4s; }
.tour-win--admin[data-view="analytics"] .tour-funnel-bar span { width: var(--w); }
.tour-funnel-row .val { width: 34px; text-align: right; font-weight: 700; color: #111827; }

/* ============ STOREFRONT WINDOW ============ */
/* The storefront window POPS IN over the admin (never sits below it — no
   peeking under the dashboard window onto the page below). */
.tour-win--store { opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .4s ease, transform .4s ease, visibility .4s; z-index: 20; }
.tour-stage.show-store .tour-win--store { opacity: 1; visibility: visible; transform: none; }
.tour-store { --st-bg: #fff; --st-fg: #111827; --st-card: #fff; --st-border: #ececf0; --st-muted: #6b7280; --st-head: #fff; --st-letterbox: #f6f7f9; position: absolute; inset: 0; background: var(--st-bg); transition: background .45s; display: flex; flex-direction: column; }
.tour-store.is-dark { --st-bg: #0e1116; --st-fg: #e7eaf0; --st-card: #161b22; --st-border: #262d38; --st-muted: #9aa3b8; --st-head: #12161c; --st-letterbox: #0b0e12; }
.tour-shead { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 20px; padding: 0 24px; background: var(--st-head); border-bottom: 1px solid var(--st-border); transition: background .45s, border-color .45s; }
.tour-logo { display: flex; align-items: center; gap: 9px; }
.tour-logomark { width: 26px; height: 26px; flex: 0 0 auto; }
.tour-logomark .pk { fill: var(--st-fg); transition: fill .45s; }
.tour-logomark .sun { fill: var(--tour-accent); transition: fill .4s; }
.tour-wordmark { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--st-fg); transition: color .45s; }
.tour-wordmark span { font-weight: 400; opacity: .75; }
.tour-snav { display: flex; gap: 18px; font-size: 13px; font-weight: 500; color: var(--st-muted); transition: color .45s; }
.tour-sright { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.tour-sicon { color: var(--st-fg); font-size: 14px; position: relative; transition: color .45s; display: inline-flex; }
.tour-sicon svg { width: 16px; height: 16px; }
.tour-lc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--st-fg); transition: color .45s; }
.tour-cartbadge { position: absolute; top: -8px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--tour-accent); color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .4s; }
.tour-cartbadge.is-on { transform: scale(1); }
.tour-cartbadge.is-bump { animation: tourBump .4s ease; }
@keyframes tourBump { 30% { transform: scale(1.4); } }
.tour-sbody { flex: 1; position: relative; overflow: hidden; }
.tour-strack { display: flex; width: 200%; height: 100%; transition: transform .6s cubic-bezier(.5,.05,.2,1); }
.tour-store.show-product .tour-strack { transform: translateX(-50%); }
.tour-spage { width: 50%; flex: 0 0 50%; height: 100%; overflow: hidden; position: relative; }
.tour-sscroll { padding: 0 0 4px; }

/* Catalog */
.tour-cathero { margin: 18px 0; }
.tour-cathero h4 { font-size: 23px; font-weight: 800; color: var(--st-fg); transition: color .45s; }
.tour-cathero p { font-size: 12.5px; color: var(--st-muted); line-height: 1.6; margin-top: 7px; max-width: 92%; transition: color .45s; }
.tour-crumb { font-size: 11px; color: var(--st-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; transition: color .45s; }
.tour-crumb span { opacity: .55; }
/* Storefront catalog left sidebar (category tree + filters) */
/* Catalog page is ONE native-scroll container (.tour-catpage carries data-scroll).
   The category hero scrolls away with the content; the sidebar is position:sticky
   so it scrolls up to the header bar then stays pinned while the grid keeps
   scrolling. (Native scroll — NOT a transform-scroll — is what lets sticky work.) */
.tour-catpage { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0 24px 24px; box-sizing: border-box; position: relative; scrollbar-width: none; -ms-overflow-style: none; }
.tour-catpage::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tour-catwrap { display: flex; gap: 22px; align-items: flex-start; }
.tour-scat-side { width: 166px; flex: 0 0 166px; position: sticky; top: 12px; align-self: flex-start; }
.tour-catcol { flex: 1; min-width: 0; }
.tour-scat-h { font-size: 11px; font-weight: 700; color: var(--st-fg); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; transition: color .45s; }
.tour-scat-cat { font-size: 12.5px; color: var(--st-muted); padding: 5px 0; transition: color .45s; }
.tour-scat-cat.is-active { color: var(--tour-accent); font-weight: 700; }
.tour-scat-f { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--st-muted); padding: 5px 0; transition: color .45s; }
.tour-scat-box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--st-border); display: grid; place-items: center; color: #fff; font-size: 8px; flex: 0 0 auto; transition: border-color .45s, background .3s; }
.tour-scat-box.on { background: var(--tour-accent); border-color: var(--tour-accent); }
.tour-scat-range { height: 4px; border-radius: 999px; background: var(--st-border); position: relative; margin: 10px 0 8px; transition: background .45s; }
.tour-scat-range > span { position: absolute; left: 12%; right: 18%; top: 0; bottom: 0; background: var(--tour-accent); border-radius: 999px; transition: background .4s; }
.tour-scat-range::before, .tour-scat-range::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--st-card); border: 2px solid var(--tour-accent); transform: translate(-50%,-50%); transition: background .45s, border-color .4s; }
.tour-scat-range::before { left: 12%; }
.tour-scat-range::after { left: 82%; }
.tour-scat-rangelbl { font-size: 11px; color: var(--st-muted); transition: color .45s; }
.tour-cattoolbar { display: flex; align-items: center; margin-bottom: 14px; color: var(--st-muted); font-size: 12px; transition: color .45s; }
.tour-cattoolbar .cnt { margin-right: auto; }
.tour-cattoolbar .sort { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--st-border); border-radius: 7px; padding: 5px 10px; transition: border-color .45s; }
.tour-sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tour-sprod { background: var(--st-card); border: 1px solid var(--st-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: background .45s, border-color .45s, transform .22s, box-shadow .22s; }
.tour-sprod.is-hi { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(16,24,40,.18); }
.tour-sprod-img { aspect-ratio: 1/1; background-size: cover; background-position: center; position: relative; background-color: var(--st-letterbox); transition: background-color .45s; }
.tour-oos { position: absolute; top: 8px; left: 8px; background: rgba(239,68,68,.92); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.tour-sprod-b { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tour-featured { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #b8860b; }
.tour-sprod-t { font-size: 12.5px; font-weight: 600; color: var(--st-fg); line-height: 1.3; transition: color .45s; }
.tour-sprod-price { font-size: 13px; font-weight: 700; color: var(--tour-accent); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tour-off { background: var(--tour-accent); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px; transition: background .4s; }
.tour-was { color: var(--st-muted); text-decoration: line-through; font-weight: 500; font-size: 11px; transition: color .45s; }
.tour-vselect { margin-top: 6px; border: 1px solid var(--st-border); border-radius: 7px; padding: 5px 24px 5px 9px; font-size: 11px; color: var(--st-muted); background: var(--st-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%239aa3b8' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center; transition: border-color .45s, background-color .45s; }
/* margin-top:auto pins every Add-to-cart to the card bottom, so they align on
   one line even when a variant dropdown makes some cards taller. */
.tour-satc { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 0; border-radius: 8px; background: var(--tour-accent); color: #fff; font-size: 11.5px; font-weight: 700; transition: background .4s, transform .1s; }
.tour-vselect { margin-bottom: 2px; }
.tour-satc.is-press { transform: scale(.94); }
.tour-satc.is-disabled { opacity: .42; }
.tour-satc svg { width: 13px; height: 13px; }
/* Variation card: a fake (animatable) size dropdown. Opens UPWARD so it stays
   inside the card (which is overflow:hidden for its rounded image corners). */
.tour-vwrap { position: relative; margin: 6px 0 2px; }
.tour-vdrop { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid var(--st-border); border-radius: 7px; padding: 5px 9px; font-size: 11px; color: var(--st-muted); background: var(--st-card); cursor: pointer; transition: border-color .3s, color .3s, background-color .45s; }
.tour-vdrop.has-value { color: var(--st-fg); border-color: var(--tour-accent); font-weight: 600; }
.tour-vdrop i { font-size: 8px; opacity: .65; }
.tour-vpop { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; background: var(--st-card); border: 1px solid var(--st-border); border-radius: 8px; box-shadow: 0 12px 26px rgba(16,24,40,.16); padding: 4px; z-index: 6; opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity .18s, transform .18s; }
.tour-vpop.open { opacity: 1; transform: none; pointer-events: auto; }
.tour-vopt { font-size: 11px; color: var(--st-fg); padding: 5px 7px; border-radius: 5px; transition: background .15s, color .15s; }
.tour-vopt.hl { background: var(--tour-accent); color: #fff; }

/* Product detail page */
.tour-pdp { padding: 18px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tour-pdp-gallery { display: flex; flex-direction: column; gap: 10px; }
.tour-pdp-main { aspect-ratio: 1/1; border-radius: 14px; background-size: cover; background-position: center; background-color: var(--st-letterbox); transition: background-color .45s; }
.tour-pdp-thumbs { display: flex; gap: 9px; }
.tour-pdp-thumb { width: 52px; height: 52px; border-radius: 8px; background-size: cover; background-position: center; border: 2px solid transparent; }
.tour-pdp-thumb.on { border-color: var(--tour-accent); transition: border-color .3s; }
.tour-pdp-info { display: flex; flex-direction: column; }
.tour-pdp-cat { font-size: 11px; font-weight: 600; color: var(--tour-accent); margin-bottom: 4px; }
.tour-pdp-t { font-size: 21px; font-weight: 800; color: var(--st-fg); line-height: 1.15; transition: color .45s; }
.tour-pdp-priceline { display: flex; align-items: center; gap: 9px; margin: 10px 0 8px; flex-wrap: wrap; }
.tour-pdp-price { font-size: 22px; font-weight: 800; color: var(--tour-accent); }
.tour-instock { background: color-mix(in srgb, #16a34a 16%, transparent); color: #16a34a; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tour-pdp-ids { font-size: 11px; color: var(--st-muted); margin-bottom: 10px; transition: color .45s; }
.tour-pdp-desc { font-size: 12px; color: var(--st-muted); line-height: 1.6; margin-bottom: 14px; transition: color .45s; }
.tour-pdp-varlabel { font-size: 11.5px; font-weight: 700; color: var(--st-fg); margin-bottom: 7px; transition: color .45s; }
.tour-varchips { display: flex; gap: 8px; margin-bottom: 16px; }
.tour-varchip { padding: 6px 13px; border-radius: 2rem; border: 1.5px solid var(--st-border); font-size: 11.5px; font-weight: 600; color: var(--st-fg); transition: all .2s; }
.tour-varchip.on { background: var(--tour-accent); border-color: var(--tour-accent); color: #fff; }
.tour-pdp-buy { display: flex; gap: 10px; align-items: stretch; }
.tour-qty { display: flex; align-items: center; border: 1px solid var(--st-border); border-radius: 9px; overflow: hidden; }
.tour-qty span { width: 30px; text-align: center; color: var(--st-muted); font-size: 13px; }
.tour-qty b { width: 34px; text-align: center; font-size: 13px; color: var(--st-fg); border-left: 1px solid var(--st-border); border-right: 1px solid var(--st-border); padding: 8px 0; }
.tour-pdp-atc { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; background: var(--tour-accent); color: #fff; font-size: 13px; font-weight: 700; transition: background .4s, transform .1s; }
.tour-pdp-atc.is-press { transform: scale(.97); }
.tour-pdp-atc svg { width: 15px; height: 15px; }
/* Reviews */
.tour-reviews { grid-column: 1 / -1; border-top: 1px solid var(--st-border); margin-top: 4px; padding-top: 16px; transition: border-color .45s; }
.tour-reviews-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tour-reviews-h .t { font-size: 15px; font-weight: 800; color: var(--st-fg); transition: color .45s; }
.tour-stars { display: inline-flex; gap: 1px; color: #f59e0b; font-size: 12px; }
.tour-reviews-h .meta { font-size: 12px; color: var(--st-muted); transition: color .45s; }
.tour-review { border-top: 1px solid var(--st-border); padding: 12px 0; transition: border-color .45s; }
.tour-review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.tour-verified { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.tour-review-title { font-size: 12px; font-weight: 700; color: var(--st-fg); transition: color .45s; }
.tour-review-body { font-size: 11.5px; color: var(--st-muted); line-height: 1.55; margin: 3px 0; transition: color .45s; }
.tour-review-author { font-size: 11px; color: var(--st-muted); transition: color .45s; }

/* Add-to-cart toast (bottom-right of the storefront, like the real shop) */
.tour-toast { position: absolute; right: 18px; bottom: 18px; z-index: 30; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 10px; background: var(--st-card); box-shadow: 0 14px 34px rgba(16,24,40,.22); border: 1px solid var(--st-border); color: var(--st-fg); font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s cubic-bezier(.34,1.5,.64,1), background .45s, color .45s, border-color .45s; }
.tour-toast.is-show { opacity: 1; transform: none; }
.tour-toast-check { width: 20px; height: 20px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: 10px; flex: 0 0 auto; }

/* ============ FAKE CURSOR ============ */
.tour-cursor { position: absolute; top: 0; left: 0; width: 24px; height: 24px; z-index: 50; pointer-events: none; transform: translate(430px, 320px); transition: transform .8s cubic-bezier(.5,.05,.2,1); filter: drop-shadow(0 3px 5px rgba(0,0,0,.42)); will-change: transform; }
.tour-cursor > svg { display: block; width: 100%; height: 100%; transition: transform .12s ease; }
.tour-cursor.is-click > svg { transform: scale(.8); }
.tour-cursor::after { content: ""; position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tour-accent); opacity: 0; transform: scale(.3); }
.tour-cursor.is-click::after { animation: tourRipple .55s ease-out; }
@keyframes tourRipple { 0% { opacity: .7; transform: scale(.3) } 100% { opacity: 0; transform: scale(2.3) } }

@media (max-width: 991.98px) { .landing-hero-visual--tour { max-width: none; } }
/* The hero tour plays even under reduced-motion (see _landing_tour.ejs), so the
   animated cursor stays visible — do not hide it here. */

/* ── Product-pages demo (Spotlight 2) — reuses the .tour-* chrome/storefront;
   .pdt-* adds the Catalog-Display settings scene (live sample card), instant
   search, list view and the PDP selling micro-animations. Same scale-to-fit
   scaffolding; independent data-pdt-* script. See _landing_pdp_demo.ejs. ── */
.pdt-spotlight-wrap { position: relative; }
/* Display-only screencast: ignore all pointer input so users can't wheel/touch-
   scroll the demo's inner catalog (the event falls through and scrolls the PAGE
   instead). The choreography scrolls programmatically via scrollTop — unaffected. */
.pdt-spotlight-wrap { pointer-events: none; }
/* On loop restart the whole demo is reset inside a `pdt-resetting` frame, which
   freezes every transition/animation so nothing (e.g. the toggle switches) is
   seen animating back to its start state. */
.pdt-resetting * { transition: none !important; animation: none !important; }
/* Admin · Catalog Display */
.pdt-catdesc { font-size: 12px; color: #6b7280; margin: -2px 0 14px; }
.pdt-catdisp { display: grid; grid-template-columns: 1fr 244px; gap: 26px; align-items: start; }
.pdt-catopts { display: flex; flex-direction: column; gap: 12px; }
.pdt-opt .tour-label { margin-bottom: 5px; }
/* extra breathing room around the image-padding slider, so it reads as a break
   before the run of Show-* switches the cursor toggles on */
.pdt-opt--gap { margin: 8px 0; }
.pdt-select { display: flex; align-items: center; justify-content: space-between; border: 1px solid #e3e5ea; border-radius: 8px; padding: 7px 11px; font-size: 12px; color: #374151; background: #fff; max-width: 260px; }
.pdt-select i { font-size: 9px; color: #9aa3b8; }
.pdt-toggle-row { display: flex; align-items: center; gap: 10px; }
.pdt-switch { width: 34px; height: 19px; border-radius: 999px; background: #d3d7df; position: relative; flex: 0 0 auto; transition: background .25s; }
.pdt-switch > i { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .22s; }
.pdt-switch.on { background: var(--tour-accent); }
.pdt-switch.on > i { left: 17px; }
.pdt-tgl-label { font-size: 12.5px; color: #374151; }
.pdt-aspect { display: inline-flex; gap: 6px; }
.pdt-aspect span { font-size: 11px; padding: 4px 10px; border-radius: 7px; border: 1px solid #e3e5ea; color: #6b7280; }
.pdt-aspect span.is-on { border-color: var(--tour-accent); color: var(--tour-accent); background: color-mix(in srgb, var(--tour-accent) 10%, #fff); font-weight: 600; }
.pdt-slider { position: relative; height: 4px; border-radius: 999px; background: #e3e5ea; max-width: 210px; margin-top: 9px; }
.pdt-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tour-accent); border-radius: 999px; }
.pdt-slider-thumb { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--tour-accent); transform: translate(-50%,-50%); }
.pdt-catpreview { }
.pdt-scard { border: 1px solid #ececf0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(16,24,40,.08); }
.pdt-scard-img { aspect-ratio: 4/3; background: #eef0f4; }
.pdt-scard-img svg { width: 100%; height: 100%; display: block; }
.pdt-scard-b { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 4px; }
.pdt-scard-feat { align-self: flex-start; display: none; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #b8860b; }
.pdt-scard-feat.is-in { display: inline-flex; animation: pdtIn .35s ease; }
.pdt-scard-t { font-size: 13px; font-weight: 600; color: #111827; }
.pdt-scard-desc, .pdt-scard-sku, .pdt-scard-attrs, .pdt-scard-qty { display: none; }
.pdt-scard-desc.is-in { display: block; font-size: 11.5px; color: #6b7280; line-height: 1.5; animation: pdtIn .35s ease; }
.pdt-scard-sku.is-in { display: block; font-size: 10.5px; color: #9aa3b8; animation: pdtIn .35s ease; }
.pdt-scard-attrs.is-in { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: #4b5563; animation: pdtIn .35s ease; }
.pdt-scard-attrs b { font-weight: 600; color: #374151; }
.pdt-scard-price { font-size: 15px; font-weight: 800; color: var(--tour-accent); margin-top: 2px; }
.pdt-scard-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pdt-scard-qty.is-in { display: inline-flex; align-items: center; border: 1px solid #e3e5ea; border-radius: 7px; overflow: hidden; animation: pdtIn .35s ease; }
.pdt-scard-qty span { padding: 4px 8px; font-size: 12px; color: #6b7280; }
.pdt-scard-qty b { padding: 4px 9px; font-size: 12px; font-weight: 600; border-left: 1px solid #eef0f4; border-right: 1px solid #eef0f4; }
.pdt-scard-atc { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 8px; background: var(--tour-accent); color: #fff; font-size: 11px; font-weight: 700; }
.pdt-scard-atc i { font-size: 11px; }
.pdt-preview-tag { text-align: center; font-size: 10.5px; color: #9aa3b8; margin-top: 9px; }
.pdt-preview-tag i { margin-right: 4px; }
@keyframes pdtIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Storefront · instant search — full-width field below the header; the live
   results FLOAT over the catalog (absolute), so there is no reserved gap. */
.pdt-searchpanel { position: relative; max-height: 0; overflow: hidden; background: var(--st-head); transition: max-height .35s ease; z-index: 25; }
.pdt-searchpanel.open { max-height: 62px; overflow: visible; border-bottom: 1px solid var(--st-border); }
.pdt-searchbar { display: flex; align-items: center; gap: 10px; padding: 13px 24px; }
.pdt-search-mag { color: var(--st-muted); font-size: 13px; }
.pdt-searchph { font-size: 13px; color: var(--st-muted); }
.pdt-searchtext { font-size: 13px; color: var(--st-fg); }
.pdt-searchx { margin-left: auto; color: var(--st-muted); font-size: 13px; }
.pdt-caret2 { width: 1.5px; height: 15px; background: var(--tour-accent); display: inline-block; margin-left: -7px; animation: pdtCaret 1s steps(1) infinite; }
@keyframes pdtCaret { 50% { opacity: 0; } }
.pdt-sdrop { position: absolute; left: 24px; right: 24px; top: 100%; margin-top: 7px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-card); box-shadow: 0 16px 40px rgba(16,24,40,.2); overflow: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s; z-index: 40; }
.pdt-sdrop.open { opacity: 1; transform: none; pointer-events: auto; }
.pdt-sdrop-all { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--tour-accent); border-bottom: 1px solid var(--st-border); }
.pdt-sdrop-cnt { margin-left: auto; font-size: 11px; color: var(--st-muted); font-weight: 500; }
.pdt-sdrop-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.pdt-sdrop-item + .pdt-sdrop-item { border-top: 1px solid var(--st-border); }
.pdt-sdrop-thumb { width: 36px; height: 36px; border-radius: 6px; background-size: cover; background-position: center; flex: 0 0 auto; background-color: var(--st-letterbox); }
.pdt-sdrop-name { font-size: 12.5px; color: var(--st-fg); flex: 1; }
.pdt-sdrop-price { font-size: 12.5px; font-weight: 700; color: var(--tour-accent); }

/* Storefront · category tree + filters */
.pdt-cat-parent { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.pdt-cat-tgl { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--st-muted); }
.pdt-cat-tgl svg { width: 12px; height: 12px; transition: transform .22s; }
.pdt-cat-tgl.open svg { transform: rotate(180deg); }
.pdt-cat-name { font-size: 12.5px; color: var(--st-muted); }
.pdt-cat-name.is-active { color: var(--tour-accent); font-weight: 700; }
.pdt-cat-children { max-height: 0; overflow: hidden; transition: max-height .35s ease; padding-left: 22px; }
.pdt-cat-children.open { max-height: 130px; }
.pdt-cat-child { font-size: 12px; color: var(--st-muted); padding: 4px 0; }
.pdt-cat-child.is-active { color: var(--tour-accent); font-weight: 600; }
.pdt-cat-leaf { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--st-muted); padding: 4px 0; }
.pdt-cat-dot { width: 16px; display: inline-flex; justify-content: center; flex: 0 0 auto; }
.pdt-cat-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }
.pdt-check { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--st-border); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .2s, border-color .2s; }
.pdt-check.on { background: var(--tour-accent); border-color: var(--tour-accent); }
.pdt-check.on::after { content: "\2713"; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; }
.pdt-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.pdt-range { position: relative; height: 4px; border-radius: 999px; background: var(--st-border); margin: 8px 0 6px; }
.pdt-range-fill { position: absolute; left: 12%; right: 0; top: 0; bottom: 0; background: var(--tour-accent); border-radius: 999px; transition: right .4s; }
.pdt-range-thumb { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--st-card); border: 2px solid var(--tour-accent); transform: translate(-50%,-50%); transition: left .4s; }
.pdt-range-thumb--a { left: 12%; }
.pdt-range-thumb--b { left: 100%; }

/* Storefront · toolbar (grid/list toggle) + list view */
.pdt-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--st-muted); font-size: 12px; }
.pdt-viewtoggle { display: inline-flex; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
.pdt-vbtn { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--st-muted); }
.pdt-vbtn.is-active { background: var(--tour-accent); color: #fff; }
.pdt-vbtn + .pdt-vbtn { border-left: 1px solid var(--st-border); }
.pdt-count { margin-right: auto; }
.pdt-sort { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--st-border); border-radius: 7px; padding: 5px 10px; }
.tour-sgrid { transition: opacity .3s; }
.tour-sgrid.is-loading { opacity: .25; }
/* rich catalog card (grid mode): short description + SKU + attributes + qty +
   add-to-cart, mirroring what the Catalog-Display toggles switched on. */
.pdt-card-main { display: flex; flex-direction: column; gap: 3px; }
.pdt-card-desc { font-size: 11px; color: var(--st-muted); line-height: 1.5; }
.pdt-card-sku { font-size: 10px; color: var(--st-muted); opacity: .85; letter-spacing: .02em; }
.pdt-card-attrs { display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; color: var(--st-muted); margin-top: 1px; }
.pdt-card-attrs b { color: var(--st-fg); font-weight: 600; }
.tour-sprod-price { margin-top: 3px; }
.pdt-card-buy { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 9px; }
.pdt-card-qty { display: inline-flex; align-items: center; border: 1px solid var(--st-border); border-radius: 7px; overflow: hidden; flex: 0 0 auto; }
.pdt-card-qty span { padding: 4px 8px; font-size: 12px; color: var(--st-muted); }
.pdt-card-qty b { padding: 4px 9px; font-size: 12px; font-weight: 600; border-left: 1px solid var(--st-border); border-right: 1px solid var(--st-border); }
.pdt-card-buy .tour-satc { flex: 1; margin-top: 0; }
/* list view — small square image + vertically-centered text (name + price) +
   add-to-cart on the right; tighter than grid. */
.tour-sgrid.is-list { grid-template-columns: 1fr; gap: 8px; }
.tour-sgrid.is-list .tour-sprod { flex-direction: row; align-items: center; }
.tour-sgrid.is-list .tour-sprod-img { width: 60px; min-width: 60px; height: 60px; aspect-ratio: auto; align-self: center; margin: 8px 0 8px 8px; border-radius: 8px; }
.tour-sgrid.is-list .tour-sprod-b { flex: 1; flex-direction: row; align-items: center; gap: 12px; padding: 8px 14px; }
.tour-sgrid.is-list .pdt-card-main { flex: 1; gap: 2px; justify-content: center; }
.tour-sgrid.is-list .pdt-card-desc,
.tour-sgrid.is-list .pdt-card-sku,
.tour-sgrid.is-list .pdt-card-attrs,
.tour-sgrid.is-list .pdt-card-qty { display: none; }
.tour-sgrid.is-list .pdt-card-buy { margin: 0; padding: 0; flex: 0 0 auto; }
.tour-sgrid.is-list .pdt-card-buy .tour-satc { flex: 0 0 auto; width: auto; padding: 8px 18px; }

/* Storefront · PDP selling micro-animations */
.tour-pdp[data-pdt-pdpscroll] { display: block; padding: 0; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.tour-pdp[data-pdt-pdpscroll]::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pdt-pdp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 18px 24px 34px; }
.pdt-pdp-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* badge / discount / sale price appear one-by-one via `show` (display, so no
   reserved placeholder gap) + a zoom-from-bigger-to-normal `pdtZoomBig`. */
.pdt-pdp-badge { display: none; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f5b301, #e8890b); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pdt-pdp-badge.show { display: inline-flex; }
.pdt-pdp-badge.intro { animation: pdtZoomBig .6s cubic-bezier(.34,1.56,.64,1); }
.pdt-pdp-off { display: none; background: var(--tour-accent); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.pdt-pdp-off.show { display: inline-block; }
.pdt-pdp-off.pop { animation: pdtZoomBig .5s cubic-bezier(.34,1.56,.64,1); }
.pdt-pdp-orig { font-size: 22px; font-weight: 800; color: var(--tour-accent); position: relative; transition: font-size .4s ease, color .4s ease; }
.pdt-pdp-orig::after { content: ""; position: absolute; left: 0; top: 52%; height: 2px; width: 0; background: currentColor; transition: width .45s ease; }
.pdt-pdp-orig.struck { font-size: 16px; color: var(--st-muted); }
.pdt-pdp-orig.struck::after { width: 100%; }
.pdt-pdp-sale { display: none; font-size: 22px; font-weight: 800; color: var(--tour-accent); }
.pdt-pdp-sale.show { display: inline-block; }
.pdt-pdp-sale.pop { animation: pdtZoomBig .55s cubic-bezier(.34,1.7,.5,1); }
@keyframes pdtZoomBig { 0% { transform: scale(1.9); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.pdt-rate-card { margin-top: 20px; border-top: 1px solid var(--st-border); padding-top: 14px; }
.pdt-rate-h { font-size: 14px; font-weight: 700; color: var(--st-fg); }
.pdt-rate-sub { font-size: 11.5px; color: var(--st-muted); margin: 3px 0 10px; }
.pdt-rate-sub i { margin-right: 4px; }
.pdt-rate { display: inline-flex; gap: 8px; font-size: 24px; color: #d1d5db; }
.pdt-rate i { transition: color .15s; }
.pdt-rate i.on { color: #f59e0b; }
.pdt-rate i.pop { animation: pdtStarPop .4s ease; }
@keyframes pdtStarPop { 0% { transform: scale(1); } 50% { transform: scale(1.42); } 100% { transform: scale(1); } }
.pdt-rate i[data-star5] { position: relative; }
.pdt-rate i[data-star5].burst::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #f59e0b; transform: translate(-50%,-50%) scale(.4); opacity: .75; animation: pdtStarGhost .6s ease forwards; pointer-events: none; }
@keyframes pdtStarGhost { to { opacity: 0; transform: translate(-50%,-50%) scale(2.7); } }

/* ── Checkout demo (Spotlight 3) — cart → coupon → checkout → order placed.
   Reuses the .tour-* browser chrome + storefront shell; .cko-* is the flow.
   Independent data-cko-* script. See _landing_checkout_demo.ejs. ── */
.cko-spotlight-wrap { position: relative; }
/* Display-only screencast: same as the PDP demo — pointer input falls through
   to the page so users can't scroll inside the demo's panels. */
.cko-spotlight-wrap { pointer-events: none; }
.cko-resetting * { transition: none !important; animation: none !important; }
/* three pages on one track */
.cko-track { display: flex; width: 300%; height: 100%; transition: transform .6s cubic-bezier(.5,.05,.2,1); }
.tour-store[data-step="checkout"] .cko-track { transform: translateX(-33.3333%); }
.tour-store[data-step="done"]     .cko-track { transform: translateX(-66.6667%); }
.cko-page { width: 33.3333%; flex: 0 0 33.3333%; height: 100%; overflow: hidden; }
.cko-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 16px 22px 26px; box-sizing: border-box; position: relative; scrollbar-width: none; }
.cko-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* distraction-free header on checkout/done, like .shop-checkout-mode */
.cko-trust { display: none; margin-left: auto; gap: 16px; font-size: 11.5px; color: var(--st-muted); white-space: nowrap; }
.cko-trust i { color: var(--tour-accent); margin-right: 5px; }
.tour-store[data-step="checkout"] .cko-trust, .tour-store[data-step="done"] .cko-trust { display: inline-flex; }
.tour-store[data-step="checkout"] .tour-snav, .tour-store[data-step="done"] .tour-snav,
.tour-store[data-step="checkout"] .tour-sright, .tour-store[data-step="done"] .tour-sright { display: none; }
/* shared shell */
.cko-head { margin-bottom: 14px; }
.cko-head h4 { font-size: 21px; font-weight: 800; color: var(--st-fg); }
.cko-head-sub { font-size: 12px; color: var(--st-muted); margin-top: 3px; }
/* stretch (not flex-start) so the summary column is as tall as the form —
   otherwise the sticky box releases as soon as the form scrolls past it. */
.cko-cols { display: flex; gap: 20px; align-items: stretch; }
.cko-main { flex: 1; min-width: 0; }
.cko-side { width: 248px; flex: 0 0 248px; }
.cko-sum--sticky { position: sticky; top: 0; }
/* cart line items */
.cko-items { border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); overflow: hidden; }
.cko-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--st-border); }
.cko-item:last-child { border-bottom: none; }
.cko-item-img { width: 56px; height: 56px; border-radius: 8px; background-size: cover; background-position: center; flex: 0 0 auto; background-color: var(--st-letterbox); }
.cko-item-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cko-item-b b { font-size: 12.5px; font-weight: 600; color: var(--st-fg); }
.cko-item-b em { font-size: 10.5px; color: var(--st-muted); font-style: normal; }
.cko-qty { display: inline-flex; align-items: center; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.cko-qty-b { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--st-muted); }
.cko-qty b { min-width: 26px; text-align: center; font-size: 12px; font-weight: 700; color: var(--st-fg); border-left: 1px solid var(--st-border); border-right: 1px solid var(--st-border); padding: 3px 0; }
.cko-item-t { font-size: 13px; font-weight: 700; color: var(--st-fg); min-width: 58px; text-align: right; display: inline-block; }
.cko-item-x { width: 26px; height: 26px; border-radius: 7px; border: 1px solid color-mix(in srgb, #ef4444 40%, transparent); color: #ef4444; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: 0 0 auto; }
/* summary box */
.cko-sum { border: 1px solid var(--st-border); border-radius: 12px; background: var(--st-card); padding: 14px; }
.cko-sum-h { font-size: 13px; font-weight: 700; color: var(--st-fg); margin-bottom: 10px; }
.cko-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--st-muted); margin-bottom: 6px; }
.cko-row b { color: var(--st-fg); font-weight: 600; display: inline-block; }
.cko-row--muted, .cko-row--muted b { font-size: 11px; color: var(--st-muted); font-weight: 500; }
.cko-row--disc, .cko-row--ship { display: none; }
.cko-row--ship.is-in { display: flex; }
.cko-row--disc.is-in { display: flex; animation: ckoIn .35s ease; color: #16a34a; }
.cko-row--disc.is-in b { color: #16a34a; }
.cko-row--disc em { font-style: normal; opacity: .8; }
.cko-sum-total { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--st-border); margin-top: 9px; padding-top: 9px; font-size: 13px; font-weight: 700; color: var(--st-fg); }
.cko-sum-total b { font-size: 17px; font-weight: 800; color: var(--tour-accent); display: inline-block; }
.cko-shipnote { font-size: 10.5px; color: var(--st-muted); margin-top: 7px; }
.cko-shipnote i { margin-right: 4px; }
.tour-store[data-step="checkout"] .cko-shipnote, .tour-store[data-step="done"] .cko-shipnote { display: none; }
.is-bump { animation: ckoBump .5s ease; }
@keyframes ckoBump { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: var(--tour-accent); } 100% { transform: scale(1); } }
@keyframes ckoIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* mini item list in the checkout/done summary */
.cko-mini { margin-bottom: 10px; }
.cko-mini-r { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--st-border); }
.cko-mini-r:last-child { border-bottom: none; }
.cko-mini-img { width: 30px; height: 30px; border-radius: 6px; background-size: cover; background-position: center; flex: 0 0 auto; position: relative; background-color: var(--st-letterbox); }
.cko-mini-img i { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; border-radius: 999px; background: var(--tour-accent); color: #fff; font-size: 9px; font-style: normal; font-weight: 700; display: grid; place-items: center; padding: 0 3px; }
.cko-mini-n { flex: 1; font-size: 11px; color: var(--st-fg); }
.cko-mini-p { font-size: 11px; font-weight: 700; color: var(--st-fg); }
/* coupon */
.cko-coupon { margin-top: 10px; }
.cko-coupon-link { font-size: 11.5px; color: var(--tour-accent); font-weight: 600; }
.cko-coupon-link i { margin-right: 4px; }
.cko-coupon-box { display: none; gap: 6px; margin-top: 7px; }
.cko-coupon-box.is-in { display: flex; animation: ckoIn .3s ease; }
.cko-apply { border: 1px solid var(--tour-accent); color: var(--tour-accent); border-radius: 8px; padding: 6px 11px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cko-apply.is-press { transform: scale(.95); }
.cko-coupon-ok { display: none; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: #16a34a; font-weight: 600; }
.cko-coupon-ok.is-in { display: flex; animation: ckoIn .35s ease; }
.cko-coupon-ok i { margin-right: 4px; }
.cko-coupon-ok em { font-style: normal; font-weight: 500; color: var(--st-muted); text-decoration: underline; }
/* buttons */
.cko-btn { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--tour-accent); color: #fff; border-radius: 9px; padding: 10px; font-size: 12.5px; font-weight: 700; transition: transform .1s; }
.cko-btn--place { margin-top: 18px; padding: 12px; font-size: 13.5px; }
.cko-btn.is-press { transform: scale(.97); }
/* checkout steps */
.cko-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 16px; }
.cko-step { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--st-muted); }
.cko-step.is-active { color: var(--tour-accent); }
.cko-step.is-done { color: var(--st-fg); }
.cko-step-n { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--st-border); background: var(--st-card); display: grid; place-items: center; font-size: 9.5px; font-style: normal; font-weight: 700; }
.cko-step.is-active .cko-step-n { background: var(--tour-accent); border-color: var(--tour-accent); color: #fff; }
.cko-step.is-done .cko-step-n { background: var(--st-fg); border-color: var(--st-fg); color: var(--st-card); }
.cko-step-line { flex: 1 1 auto; min-width: 22px; height: 2px; background: var(--st-border); margin: 0 8px; }
/* guest vs sign-in choice, two big side-by-side buttons */
.cko-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cko-method { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--st-border); border-radius: 10px; padding: 13px 10px; font-size: 13px; font-weight: 700; color: var(--st-muted); background: var(--st-card); transition: border-color .2s, background .2s, color .2s; }
.cko-method i { font-size: 14px; }
.cko-method.is-on { border-color: var(--tour-accent); color: var(--tour-accent); background: color-mix(in srgb, var(--tour-accent) 8%, var(--st-card)); }
.cko-step.is-done + .cko-step-line, .cko-step.is-active + .cko-step-line { background: var(--tour-accent); }
/* form */
.cko-sec-h { font-size: 12.5px; font-weight: 700; color: var(--st-fg); margin: 16px 0 9px; }
.cko-sec-h:first-of-type { margin-top: 0; }
.cko-sec-h i { margin-right: 5px; color: var(--tour-accent); }
.cko-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cko-field { margin-bottom: 10px; }
.cko-field label { display: block; font-size: 10.5px; color: var(--st-muted); margin-bottom: 4px; }
.cko-input { border: 1px solid var(--st-border); border-radius: 8px; padding: 7px 10px; font-size: 11.5px; color: var(--st-fg); background: var(--st-card); min-height: 32px; box-sizing: border-box; display: flex; align-items: center; position: relative; transition: border-color .2s, box-shadow .2s; }
.cko-input.is-focus { border-color: var(--tour-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tour-accent) 16%, transparent); }
.cko-input--area { min-height: 46px; align-items: flex-start; padding-top: 8px; }
.cko-input--sel { justify-content: space-between; color: var(--st-fg); }
.cko-input--sel i { font-size: 9px; color: var(--st-muted); }
.cko-input--sm { flex: 1; padding: 6px 9px; min-height: 30px; }
.cko-caret { width: 1.5px; height: 13px; background: var(--tour-accent); display: inline-block; margin-left: 1px; opacity: 0; }
.cko-input.is-focus .cko-caret { opacity: 1; animation: ckoCaret 1s steps(1) infinite; }
@keyframes ckoCaret { 50% { opacity: 0; } }
.cko-ph { position: absolute; left: 9px; font-size: 11px; color: var(--st-muted); pointer-events: none; }
.cko-help { font-size: 10px; color: var(--st-muted); margin-top: 4px; }
/* option rows (shipping + payment) */
.cko-opt { display: flex; align-items: center; gap: 9px; border: 1px solid var(--st-border); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; background: var(--st-card); transition: border-color .2s, background .2s; }
.cko-opt.is-hi { border-color: color-mix(in srgb, var(--tour-accent) 55%, transparent); }
.cko-opt.is-on { border-color: var(--tour-accent); background: color-mix(in srgb, var(--tour-accent) 6%, var(--st-card)); }
.cko-radio { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--st-border); flex: 0 0 auto; display: grid; place-items: center; }
.cko-opt.is-on .cko-radio { border-color: var(--tour-accent); }
.cko-opt.is-on .cko-radio::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tour-accent); }
.cko-opt-b { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.cko-opt-b b { font-size: 12px; font-weight: 600; color: var(--st-fg); }
.cko-opt-b b i { margin-right: 5px; color: var(--st-muted); }
.cko-opt-b em { font-size: 10.5px; color: var(--st-muted); font-style: normal; }
.cko-opt-p { font-size: 12px; font-weight: 700; color: var(--st-fg); }
.cko-mark { min-width: 34px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--st-muted); border: 1px solid var(--st-border); padding: 0 6px; }
.cko-mark--apple { background: #111; color: #fff; border-color: #111; }
.cko-mark--gpay { background: #fff; color: #3c4043; border-color: #dadce0; }
.cko-mark--pp { background: #003087; color: #fff; border-color: #003087; }
.cko-mark--klarna { background: #ffb3c7; color: #17120f; border-color: #ffb3c7; }
/* stripe card panel */
.cko-cardbox { display: none; }
.cko-cardbox.is-in { display: block; animation: ckoIn .3s ease; }
.cko-card-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--st-border); border-radius: 9px; padding: 10px 12px; margin: -2px 0 9px; background: var(--st-letterbox); }
.cko-card-num { flex: 1; font-size: 12px; letter-spacing: .06em; color: var(--st-fg); font-weight: 600; }
.cko-card-meta { font-size: 11px; color: var(--st-muted); }
/* order placed */
.cko-cols--done { align-items: flex-start; }
.cko-done-head { text-align: center; padding: 6px 0 14px; }
.cko-check { display: inline-block; }
.cko-check svg { width: 68px; height: 68px; display: block; }
.cko-check .ring { fill: none; stroke: #16a34a; stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; }
.cko-check .tick { fill: none; stroke: #16a34a; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; }
.cko-check.is-in { animation: ckoPop .5s cubic-bezier(.34,1.56,.64,1); }
.cko-check.is-in .ring { animation: ckoDraw .55s ease forwards; }
.cko-check.is-in .tick { animation: ckoDraw .4s .42s ease forwards; }
@keyframes ckoDraw { to { stroke-dashoffset: 0; } }
@keyframes ckoPop { 0% { transform: scale(.5); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.cko-done-t { font-size: 19px; font-weight: 800; color: var(--st-fg); margin-top: 8px; }
.cko-done-s { font-size: 12.5px; color: var(--st-muted); margin-top: 4px; }
.cko-done-n { font-size: 12px; color: var(--st-muted); margin-top: 7px; }
.cko-done-n b { color: var(--st-fg); }
.cko-maplbl { font-size: 11.5px; font-weight: 700; color: var(--st-fg); margin-bottom: 7px; }
.cko-maplbl i { color: var(--tour-accent); margin-right: 5px; }
/* stylized delivery map — self-contained SVG (no external tiles, CSP-safe);
   same footprint as the real map block (8px radius, panel height). */
.cko-map { position: relative; height: 196px; border-radius: 8px; overflow: hidden; border: 1px solid var(--st-border); }
.cko-map svg { width: 100%; height: 100%; display: block; }
.cko-pin { position: absolute; left: 48.5%; top: 47%; font-size: 26px; color: var(--tour-accent); opacity: 0; transform: translate(-50%,-190%) scale(.6); filter: drop-shadow(0 3px 5px rgba(16,24,40,.35)); }
.cko-pin.is-in { animation: ckoPin .6s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes ckoPin { to { opacity: 1; transform: translate(-50%,-100%) scale(1); } }
.cko-pin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 26px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--tour-accent) 30%, transparent); transform: translateX(-50%); }
.cko-map-card { position: absolute; left: 10px; bottom: 10px; background: var(--st-card); border: 1px solid var(--st-border); border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 6px 18px rgba(16,24,40,.14); }
.cko-map-card b { font-size: 11.5px; color: var(--st-fg); }
.cko-map-card em { font-size: 10.5px; color: var(--st-muted); font-style: normal; }

/* ── 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;
  border: 1px solid var(--border);
  background: var(--card);
}
.landing-screenshot-img {
  display: block;
  width: 100%;
  height: auto;
}
/* Demo glows removed entirely on 2026-07-21 (owner request) — the demos sit
   flat on the page with only the .tour-fit drop shadow. */

/* ── Storefront showcase (Spotlight 1) — three cross-fading shop scenes, each
   with its own logo + accent colour, the third in dark mode. Same scale-to-fit,
   transform-on-child architecture as the hero tour. ── */
.showcase-holder { width: 100%; }
/* Match the hero demo's browser-window corner radius (.tour-fit is 10px), not
   the 20px used for the static screenshot frames. */
.landing-screenshot-frame--showcase { border-radius: 10px; }
.showcase-fit { position: relative; width: 100%; overflow: hidden; background: #eef1f6; }
.showcase-stage { position: absolute; top: 0; left: 0; width: 1120px; height: 720px; transform-origin: top left; }
.sc-scene {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.02); z-index: 0;
  transition: opacity .55s ease, transform .55s ease;
  display: flex; flex-direction: column;
  background: var(--sc-bg); color: var(--sc-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* light-theme tokens (dark scene overrides below) */
  --sc-bg:#f8f9fb; --sc-fg:#111827; --sc-muted:#6b7280; --sc-card:#ffffff;
  --sc-border:#e5e7eb; --sc-navbar:#ffffff; --sc-primary-fg:#ffffff;
  --sc-chrome-bg:#eceef2; --sc-chrome-border:rgba(16,24,40,.08); --sc-omni-bg:#ffffff; --sc-omni-border:rgba(16,24,40,.1);
}
.sc-scene[data-dark] {
  --sc-bg:#0b0f19; --sc-fg:#e5e7eb; --sc-muted:#9ca3af; --sc-card:#141a2a;
  --sc-border:#1f2937; --sc-navbar:#0e1424;
  --sc-chrome-bg:#20242e; --sc-chrome-border:rgba(255,255,255,.06); --sc-omni-bg:#2a2f3a; --sc-omni-border:rgba(255,255,255,.1);
}
/* Gentle cross-fade: the just-left scene stays solid underneath (is-prev) so
   the incoming scene fades (+ a subtle settle) in over a solid layer. */
.sc-scene.is-prev { opacity: 1; transform: none; z-index: 1; transition: none; }
.sc-scene.is-active { opacity: 1; transform: none; z-index: 2; }

.sc-chrome { flex: 0 0 40px; display: flex; align-items: center; gap: 7px; padding: 0 15px; background: var(--sc-chrome-bg); border-bottom: 1px solid var(--sc-chrome-border); }
.sc-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.sc-dot--r { background: #ff5f57; }
.sc-dot--y { background: #febc2e; }
.sc-dot--g { background: #28c840; }
.sc-omni { flex: 1; margin-left: 12px; max-width: 460px; height: 24px; border-radius: 999px; background: var(--sc-omni-bg); border: 1px solid var(--sc-omni-border); display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 12px; color: var(--sc-muted); }
.sc-omni .fa-lock { font-size: 10px; color: #16a34a; }

.sc-win { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: var(--sc-bg); }
.sc-header { flex: 0 0 58px; display: flex; align-items: center; gap: 18px; padding: 0 22px; background: var(--sc-navbar); border-bottom: 1px solid var(--sc-border); }
.sc-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.sc-logomark { width: 27px; height: 27px; flex: 0 0 27px; }
.sc-wordmark { font-size: 17px; font-weight: 800; color: var(--sc-fg); letter-spacing: -.01em; }
.sc-wordmark span { font-weight: 400; opacity: .7; }
.sc-brand-badge { width: 30px; height: 30px; border-radius: 8px; background: var(--sc-primary); color: var(--sc-primary-fg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; font-size: 15px; font-weight: 700; }
.sc-brand-name { font-size: 17px; font-weight: 700; color: var(--sc-fg); letter-spacing: -.01em; }
.sc-nav { display: flex; align-items: center; gap: 18px; }
.sc-nav-link { font-size: 14px; color: var(--sc-fg); opacity: .78; text-decoration: none; }
.sc-nav-link.is-active { opacity: 1; color: var(--sc-primary); font-weight: 600; }
.sc-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sc-tool { height: 30px; min-width: 30px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--sc-fg); border: 1px solid var(--sc-border); border-radius: 8px; background: var(--sc-card); }
.sc-cart { position: relative; }
.sc-cart-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border-radius: 8px; background: var(--sc-primary); color: var(--sc-primary-fg); }

.sc-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* home */
.sc-hero { height: 250px; margin: 18px 22px; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; }
.sc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.05)); }
.sc-hero-inner { position: relative; z-index: 1; padding: 0 40px; max-width: 62%; color: #fff; }
.sc-hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.sc-hero-title { font-size: 38px; font-weight: 800; line-height: 1.05; margin: 8px 0 10px; letter-spacing: -.02em; }
.sc-hero-sub { font-size: 15px; opacity: .92; margin-bottom: 18px; max-width: 380px; }
.sc-hero-btn { border: none; border-radius: 10px; padding: 11px 20px; background: var(--sc-primary); color: var(--sc-primary-fg); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.sc-featured { padding: 4px 22px 0; }
.sc-sec-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; color: var(--sc-fg); }

/* product grid + card */
.sc-grid { display: grid; gap: 16px; }
.sc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sc-card { background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.sc-card-img { display: block; aspect-ratio: 4 / 3; background: var(--sc-bg); overflow: hidden; }
.sc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.sc-feat { font-size: 11px; font-weight: 700; color: #b8860b; display: inline-flex; align-items: center; gap: 4px; }
.sc-card-title { font-size: 14px; font-weight: 600; color: var(--sc-fg); text-decoration: none; }
.sc-card-price { font-size: 15px; font-weight: 700; color: var(--sc-primary); line-height: 1.3; }
.sc-badge { font-size: 10px; font-weight: 700; color: var(--sc-primary-fg); background: var(--sc-primary); border-radius: 5px; padding: 1px 5px; }
.sc-old { font-size: 12px; color: var(--sc-muted); text-decoration: line-through; font-weight: 500; }
.sc-atc { margin-top: 2px; border: none; border-radius: 8px; padding: 8px 12px; background: var(--sc-primary); color: var(--sc-primary-fg); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.sc-atc .fa-shopping-bag { font-size: 11px; }
/* In a product card, the button sticks to the bottom so every card's
   add-to-cart lines up horizontally regardless of title/price height. */
.sc-card .sc-atc { margin-top: auto; }

/* catalog */
.sc-catalog { display: flex; gap: 18px; padding: 18px 22px; }
.sc-side { flex: 0 0 210px; display: flex; flex-direction: column; gap: 14px; }
.sc-side-card { background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: 10px; padding: 14px; }
.sc-side-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sc-muted); margin-bottom: 10px; }
.sc-side-title.mt-3 { margin-top: 14px; }
.sc-side-item { display: block; font-size: 13.5px; color: var(--sc-fg); text-decoration: none; padding: 5px 0; opacity: .85; }
.sc-side-item.is-active { color: var(--sc-primary); font-weight: 600; opacity: 1; }
.sc-range { position: relative; height: 4px; border-radius: 3px; background: var(--sc-border); margin: 4px 0 8px; }
.sc-range-fill { position: absolute; left: 8%; right: 26%; top: 0; bottom: 0; border-radius: 3px; background: var(--sc-primary); }
.sc-range-knob { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--sc-primary); transform: translate(-50%, -50%); }
.sc-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--sc-muted); }
.sc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sc-fg); padding: 4px 0; }
.sc-box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--sc-border); flex: 0 0 15px; }
.sc-box.is-on { background: var(--sc-primary); border-color: var(--sc-primary); }
.sc-main { flex: 1 1 auto; min-width: 0; }
.sc-sortbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sc-layout { display: inline-flex; border: 1px solid var(--sc-border); border-radius: 8px; overflow: hidden; }
.sc-lbtn { width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--sc-muted); background: var(--sc-card); }
.sc-lbtn.is-active { background: var(--sc-primary); color: var(--sc-primary-fg); }
.sc-sort { font-size: 13px; color: var(--sc-fg); border: 1px solid var(--sc-border); border-radius: 8px; padding: 6px 12px; background: var(--sc-card); display: inline-flex; align-items: center; gap: 7px; }
.sc-sort-cx { font-size: 10px; opacity: .6; }

/* product page */
.sc-pdp { padding: 16px 22px; }
.sc-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sc-primary); margin-bottom: 14px; }
.sc-crumb a { color: var(--sc-primary); text-decoration: none; }
.sc-crumb .fa-home { font-size: 12px; }
.sc-sep { color: var(--sc-muted); opacity: .6; }
.sc-crumb-cur { color: var(--sc-muted); }
.sc-pdp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sc-gallery-main { aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--sc-card); }
.sc-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.sc-thumb { width: 56px; height: 56px; border-radius: 8px; background-size: cover; background-position: center; border: 2px solid transparent; }
.sc-thumb.is-on { border-color: var(--sc-primary); }
.sc-pdp-info { padding-top: 4px; }
.sc-pdp-cat { font-size: 12px; font-weight: 700; letter-spacing: .07em; color: var(--sc-primary); }
.sc-pdp-title { font-size: 30px; font-weight: 800; margin: 4px 0 12px; letter-spacing: -.02em; }
.sc-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sc-stock { font-size: 11px; font-weight: 600; color: #22c55e; background: rgba(34,197,94,.16); border-radius: 6px; padding: 2px 8px; }
.sc-price-big { font-size: 26px; font-weight: 800; color: var(--sc-primary); margin-bottom: 10px; }
.sc-sku { font-size: 12px; color: var(--sc-muted); margin-bottom: 12px; }
.sc-pdp-desc { font-size: 13.5px; color: var(--sc-muted); line-height: 1.55; margin-bottom: 16px; }
.sc-opt-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.sc-chips { display: flex; gap: 8px; margin-bottom: 18px; }
.sc-chip { min-width: 40px; text-align: center; font-size: 13px; padding: 7px 12px; border: 1px solid var(--sc-border); border-radius: 8px; color: var(--sc-fg); background: var(--sc-card); }
.sc-chip.is-on { border-color: var(--sc-primary); color: var(--sc-primary); font-weight: 600; }
.sc-buy { display: flex; align-items: center; gap: 12px; }
.sc-qty { display: inline-flex; align-items: center; border: 1px solid var(--sc-border); border-radius: 8px; overflow: hidden; }
.sc-qbtn { width: 34px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--sc-muted); }
.sc-qval { width: 34px; text-align: center; font-size: 14px; font-weight: 600; }
.sc-atc--lg { padding: 12px 24px; font-size: 14px; flex: 1 1 auto; }

.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: 46px; width: auto; max-width: 190px; 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: 30px; position: relative; top: 10px; }
/* Optional larger variant (currently unused). */
.landing-partner-logo--lg { height: 52px; }
.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: 38px; }
  .landing-partner-logo--lg { height: 42px; }
  .landing-partner-logo--wordmark { height: 25px; top: 8px; }
}

/* ── 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); }
}
.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(--primary-text); }
[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; }
/* …but the landing demos embed a self-contained storefront that keeps its OWN
   light/dark theme (--st-fg) regardless of the page theme. The rule above is
   !important, so headings inside a demo store (cart/checkout titles, category
   titles) would otherwise render in the PAGE's foreground and go near-invisible
   on the demo's white panel. Re-assert the storefront's own colour. */
[data-theme="dark"] .tour-store h1, [data-theme="dark"] .tour-store h2,
[data-theme="dark"] .tour-store h3, [data-theme="dark"] .tour-store h4,
[data-theme="dark"] .tour-store h5, [data-theme="dark"] .tour-store h6 { color: var(--st-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-solid, var(--primary));
  background: var(--primary-solid, var(--primary));
  color: var(--primary-fg, 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;
  /* Centre the button vertically so the gap above it matches the gap below. */
  align-items: center;
  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 {
  /* 34px matches the onboarding pill (2.1rem) and the sidebar upgrade CTA. */
  height: 34px;
  padding: 0 16px;
  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 sidebar is an off-canvas drawer, so the floating Save bar
   spans the full width (no sidebar offset). It stays visible — the natural
   Save button can be far down a long settings form on a phone. */
@media (max-width: 991px) {
  .settings-float-save { left: 0; padding: 12px 16px; }
  .admin-shell[data-admin-shell].is-collapsed .settings-float-save { left: 0; }
  /* Leave room on the right for the onboarding pill (which shrinks to icon +
     count on mobile so the two share the bottom row without overlapping). */
  body:has(.onboarding-widget) .settings-float-save { padding-right: 96px; }
}

/* ── 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;
}

/* ── Checkout option editor (Settings → Selling) ─────────────────── */
.checkout-options-group__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.checkout-options-list { display: flex; flex-direction: column; gap: 12px; }
.checkout-option-card {
  border: 1px solid var(--pz-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--pz-surface, #fff);
}
.checkout-option-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.checkout-option-card__icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--pz-surface-muted, #f3f4f6);
  color: var(--pz-text-muted, #6b7280);
  font-size: 14px;
  flex-shrink: 0;
}
.checkout-option-card__head .az-lang-strip-wrap { flex: 1 1 auto; min-width: 0; }
.checkout-option-card__remove { flex-shrink: 0; }
[data-theme="dark"] .checkout-option-card {
  border-color: var(--pz-border, #3a3a3a);
  background: var(--pz-surface, #242424);
}
[data-theme="dark"] .checkout-option-card__icon { background: rgba(255, 255, 255, 0.06); }

/* Connect-a-provider scaffold (integrations placeholder) */
.checkout-connect {
  border: 1px dashed var(--pz-border, #d1d5db);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--pz-surface-muted, #fafafa);
}
.checkout-connect__head { display: flex; align-items: center; gap: 10px; }
.checkout-connect__providers { display: flex; flex-wrap: wrap; gap: 10px; }
.checkout-connect__provider {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--pz-border, #e5e7eb);
  border-radius: 8px;
  background: var(--pz-surface, #fff);
  color: var(--pz-text-muted, #9ca3af);
  font-size: 13px;
  cursor: not-allowed;
  opacity: 0.75;
}
[data-theme="dark"] .checkout-connect {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .checkout-connect__provider {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.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-solid, var(--primary, #6366f1));
}
.form-range::-moz-range-thumb {
  background: var(--primary-solid, 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; }
/* Left-anchored, not centred, so the badge doesn't re-centre (slide right) as
   the sidebar collapses. 13px header + the shop-switch's 4px left padding = 17px,
   which centres the 30px badge in the 64px collapsed rail. */
.is-collapsed:not(.is-hover-expanded) .az-sidebar-header { padding: 0 4px 0 14px; }

.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;
  /* Left padding (16px) puts the icon's centre on the SAME vertical line as the
     shop badge above and the collapsed-mode icons, so nothing shifts sideways
     when the sidebar hover-expands. Collapsed mode overrides this (centred). */
  padding: 9px 10px 9px 16px;
  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;
  /* Only the hover colours fade — NOT layout. Transitioning `all` animated the
     padding as the sidebar hover-expands, so icons visibly slid a few px. */
  transition: background-color 0.13s, color 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;
  justify-content: center;
  width: 17px;
  /* Fixed height matched to the label's line box, so a menu item is the same
     height with or without its label visible — keeps the icon from dropping a
     couple of pixels when the sidebar hover-expands. */
  height: 18px;
  color: inherit;
}

.az-nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  /* The nav item sets line-height:1, which clips descenders (g, y, p) when
     the label's overflow:hidden crops the line box. Give the text a roomier
     line box — pinned to 18px so it EXACTLY matches the icon's 18px height.
     Any mismatch (e.g. 1.35em = 18.2px) makes expanded rows a hair taller than
     collapsed ones; that fraction accumulates down the list until the lower
     items round to a 1px vertical jump on hover-expand. */
  line-height: 18px;
}
.is-collapsed:not(.is-hover-expanded) .az-nav-label,
.is-collapsed:not(.is-hover-expanded) .az-nav-caret { display: none; }
/* Collapsed mode keeps the item's expanded left-aligned padding (rather than
   re-centring) so the icon stays at the same x whether collapsed or expanded,
   and doesn't slide as the sidebar width animates. Only the label is hidden. */

.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. */
/* Left-anchored at 17px (same as the header badge) rather than centred, so it
   doesn't slide right as the sidebar collapses. Bottom padding stays 0. */
.is-collapsed:not(.is-hover-expanded) .az-brand { padding: 0 0 0 18px; }

.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%;
  /* Match the other topbar buttons (.az-topbar-btn): same 34px height,
     same border colour. box-sizing keeps the height exact with the border. */
  height: 34px;
  box-sizing: border-box;
  padding: 0 12px 0 33px;
  border: 1px solid #dedddb;
  border-radius: 9px;
  font-size: 13px;
  color: var(--az-topbar-input-text);
  background: var(--az-topbar-input);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
[data-theme="dark"] .az-topbar-search input { border-color: #3a3a3a; }
.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);
  /* Right side is pulled in (negative margin) to offset the user button's
     4px left padding, so the visible gap matches the left side. */
  margin: 0 -2px 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; }
/* Cards whose body is a data table (products, collections, pages, …) drop the
   body padding so the table spans edge-to-edge — the cells carry their own
   spacing. The card clips the table to its rounded corners. */
.admin-shell[data-admin-shell] .admin-main .card-body:has(> .table-responsive),
.admin-shell[data-admin-shell] .admin-main .card-body:has(> table.table) { padding: 0; }
.admin-shell[data-admin-shell] .admin-main .card:has(> .card-body > .table-responsive),
.admin-shell[data-admin-shell] .admin-main .card:has(> .card-body > table.table) { overflow: hidden; }
/* Stat-table cards (analytics + dashboard) put a heading — and sometimes a
   trailing "view all" link — directly above a full-bleed table. Because the
   card-body padding is stripped for the edge-to-edge table, those siblings
   would otherwise sit flush to the edge. Re-inset them to the same 22px as the
   table cells so the heading and link line up with the columns. Cards whose
   body is ONLY a table (product / order / collection lists) have no such
   siblings, so they're unaffected. */
.admin-shell[data-admin-shell] .admin-main .card-body:has(> .table-responsive) > h6,
.admin-shell[data-admin-shell] .admin-main .card-body:has(> table.table) > h6 {
  padding: 18px 22px 12px;
  /* !important beats a Bootstrap `mb-3` utility some of these titles carry —
     without it those boxes get the padding-bottom PLUS a 16px margin. */
  margin-bottom: 0 !important;
}
.admin-shell[data-admin-shell] .admin-main .card-body:has(> .table-responsive) > a,
.admin-shell[data-admin-shell] .admin-main .card-body:has(> table.table) > a {
  display: inline-block;
  margin: 10px 22px 16px;
}

.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 */
/* Hamburger + drawer backdrop are mobile-only elements; inert on desktop. */
.az-menu-toggle { display: none; }
.admin-sidebar-backdrop { display: none; }

@media (max-width: 991px) {
  /* Mobile: the sidebar becomes an off-canvas drawer (the topbar hamburger
     toggles .is-mobile-menu-open — see admin-shell.js). The shell keeps its
     desktop geometry (row flex, .admin-main scrolls internally); the fixed-
     position sidebar leaves the flow so the main column gets full width.
     The pre-drawer behavior stacked the entire nav on top of every page —
     unusable on phones. */
  .admin-shell[data-admin-shell] { height: 100dvh; }
  .admin-shell[data-admin-shell] .admin-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .admin-shell[data-admin-shell].is-mobile-menu-open .admin-sidebar {
    transform: translateX(0);
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.4);
  }
  /* A persisted desktop collapse must not shrink the drawer to icons. */
  .admin-shell[data-admin-shell].is-collapsed .admin-sidebar,
  .admin-shell[data-admin-shell].is-collapsed:not(.is-hover-expanded) .admin-sidebar {
    width: 280px;
    min-width: 0;
    cursor: default;
  }
  /* CRITICAL: when the drawer opens on a persisted-collapsed shell,
     admin-shell.js adds .is-hover-expanded (so labels show). The desktop
     hover-expand rule then forces z-index:50 + a negative margin, dropping
     the drawer BEHIND the backdrop (1099) — it looked faded and swallowed
     every tap. Re-assert the drawer's stacking here (this selector matches
     the desktop rule's specificity and wins by source order). */
  .admin-shell[data-admin-shell].is-collapsed.is-hover-expanded .admin-sidebar {
    z-index: 1100;
    margin-right: 0;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.4);
  }
  .admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(0, 0, 0, 0.45);
  }
  .admin-shell[data-admin-shell].is-mobile-menu-open .admin-sidebar-backdrop { display: block; }
  .az-menu-toggle { display: inline-flex; }
  /* Hide the desktop collapse chevron inside the drawer — collapsing a
     280px drawer to an icon rail (which also hides the chevron itself)
     would strand the user in an icons-only drawer. */
  .admin-sidebar [data-az-collapse] { display: none; }
  .admin-shell[data-admin-shell] .admin-main { padding: 16px; }
  .az-topbar { padding: 0 12px; gap: 8px; }
  .az-topbar-search { max-width: none; }
  .az-topbar-user-info { display: none; }
  .az-topbar-primary span { display: none; }
}

/* ── Mobile portrait: compact topbar search + onboarding pill ── */
@media (max-width: 576px) {
  /* Date-range picker: the intermediate periods (This week / month / year)
     don't fit on a phone — show only All, Today and Custom. A selected
     intermediate period still shows so the active choice is never hidden. */
  .az-period-optional:not(.active) { display: none; }

  /* Product list: drop the description preview and tighten the cells so more
     columns fit before the row needs to scroll sideways. */
  .product-row-desc { display: none; }
  .admin-shell[data-admin-shell] .admin-main .table > :not(caption) > * > * { padding: 0.4rem 0.35rem; }
  #productsTable td .me-3 { margin-right: 0.5rem !important; }
  #productsTable td img.me-3,
  #productsTable td .me-3.bg-light { width: 28px !important; height: 28px !important; }
  /* First column: a little breathing room on the left (the card body is now
     flush) and a wider name column. */
  #productsTable > thead > tr > th:first-child,
  #productsTable > tbody > tr > td:first-child {
    padding-left: 14px;
    min-width: 160px;
  }
  /* Product name: one step smaller + tighter line-height. */
  #productsTable > tbody > tr > td:first-child .fw-medium {
    font-size: 12px;
    line-height: 1.2;
  }
  /* The description preview is hidden on mobile, so the name is a single line
     — centre the image + name vertically (like every other cell) instead of
     the desktop top-alignment used when the description is present. */
  #productsTable > tbody > tr > td:first-child > a.d-flex {
    align-items: center !important;
  }

  /* The onboarding pill shares the bottom row with the settings Save bar —
     drop its text label (icon + count only) so the two fit without overlap. */
  body:has(.settings-float-save) .onboarding-pill__label { display: none; }

  /* Settings → currencies: one column on a phone (labels like "USD - US
     Dollar" are too long for two). Languages keep their two columns. */
  .currency-check-grid { columns: 1 !important; }

  /* Collapse the search to an icon button that matches the topbar buttons;
     admin-search.js expands it (focused) on tap and collapses on Escape /
     outside-tap. */
  .az-topbar-search:not(.is-expanded) {
    flex: 0 0 auto;
    width: 34px;
    max-width: 34px;
    height: 34px;
    justify-content: center;
    border: 1px solid #dedddb;
    border-radius: 9px;
    cursor: pointer;
  }
  .az-topbar-search:not(.is-expanded) input { display: none; }
  .az-topbar-search:not(.is-expanded) svg { position: static; left: auto; transform: none; }
  [data-theme="dark"] .az-topbar-search:not(.is-expanded) { border-color: #3a3a3a; }
  .az-topbar-search.is-expanded {
    position: absolute;
    top: 0; bottom: 0; left: 8px; right: 8px;
    width: auto;
    max-width: none;
    z-index: 60;
    background: var(--az-topbar);
  }
}

/* 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;
  /* Size to content so the currency column fits its widest item ("HUF -
     Hungarian Forint") + the checkmark, instead of a fixed 50/50 split that
     truncated long labels. Capped at the viewport. */
  width: max-content;
  max-width: 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: 0 0 auto; display: flex; flex-direction: column; min-width: 132px; max-width: 260px; }
.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);
  /* Right padding matches the 10px top/bottom so the Apply button sits an equal
     gap from the right edge as from the footer edges. Left stays 16px to line up
     with the column content above. */
  padding: 10px 10px 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); }
/* Mobile switcher (offcanvas): the selection is already visible in the two
   columns above, so drop the summary text and keep only the Apply button. */
#shopMobileMenu .lc-footer-text { display: none; }
#shopMobileMenu .lc-footer { justify-content: flex-end; }
.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 {
  /* Only as wide as the longest language + its checkmark. The JS clamps its
     on-screen position so it never spills off the viewport (navigation.js
     openPanel). */
  width: max-content;
  min-width: 150px;
  max-width: min(240px, calc(100vw - 16px));
  z-index: 9999;
}
.az-topbar .lc-cols { height: 240px; }
/* Admin topbar is single-column (language only) and clamps its own panel width,
   so keep the original fill-the-panel behaviour there. */
.az-topbar .lc-col { flex: 1; min-width: 0; max-width: none; }
.az-topbar .lc-footer { display: none; }
/* Mobile: the single-column list was capped at 140px inside a forced 240px
   column (a ~100px empty gap). Let the column + list size themselves. */
@media (max-width: 540px) {
  .az-topbar .lc-cols { height: auto; }
  .az-topbar .lc-col-list { max-height: min(60vh, 340px); }
}

/* 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;
  /* Narrow screens: the right-hand element (period picker, "+ New" button)
     drops to its own line below the title instead of squeezing/overflowing —
     matches the dashboard header's flex-wrap behaviour. */
  flex-wrap: wrap;
}
.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;
}

/* ── Reusable inline help bubble (.help-tip) ──────────────────────
   A small (i) icon that reveals helper text on hover or click (click
   pins it). Markup: views/admin/partials/_help_tip.ejs; behaviour:
   the [data-help-tip] delegation in public/js/admin-shell.js. Designed
   to be dropped anywhere in the admin (security console today, owner
   dashboard later). */
.help-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.help-tip__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0 5px;
  line-height: 1;
  font-size: 12px;
  color: var(--pz-text-subtle, #9ca3af);
  cursor: pointer;
  display: inline-flex;
  transition: color 0.15s ease;
}
.help-tip__btn:hover,
.help-tip.is-open .help-tip__btn { color: var(--pz-brand, #2563eb); }
.help-tip__bubble {
  /* Fixed + JS-positioned so the bubble escapes any overflow-clipping ancestor
     (e.g. a .card / scroll container). admin-shell.js sets top/left on show. */
  position: fixed;
  z-index: 1090;
  width: max-content;
  max-width: 264px;
  padding: 9px 11px;
  background: var(--pz-surface, #fff);
  color: var(--pz-text, #111827);
  border: 1px solid var(--pz-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.help-tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--ht-arrow, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--pz-surface, #fff);
  filter: drop-shadow(0 1px 0 var(--pz-border, #e5e7eb));
}
/* Flipped below the icon (no room above): arrow points up from the top edge. */
.help-tip--below .help-tip__bubble::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--pz-surface, #fff);
  filter: drop-shadow(0 -1px 0 var(--pz-border, #e5e7eb));
}
.help-tip:hover .help-tip__bubble,
.help-tip:focus-within .help-tip__bubble,
.help-tip.is-open .help-tip__bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── 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;
  /* When the tabs don't fit (narrow screens, many tabs) scroll THE TAB ROW
     horizontally instead of the whole page. Scrollbar hidden for a clean look;
     the row is still swipeable/scrollable. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.promos-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.promos-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pz-text-muted);
  cursor: pointer;
  text-decoration: none;
  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); }
/* Two tab conventions live in the app: Bootstrap-driven marketing tabs toggle
   `.active`, while the settings / insights / analytics / security tabs (custom
   JS in admin-shell.js + navigation.js, and server-rendered links) use
   `.is-active`. Style both so neither set of pages loses its active accent. */
.promos-tab.active,
.promos-tab.is-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,
.promos-tab.is-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;
  /* Fixed 34px so modal footer buttons (and the +New header buttons) match the
     settings Save button, the onboarding pill and the sidebar upgrade CTA. */
  height: 34px;
  padding: 0 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; }
/* Phone portrait: the 32px inset + a 92vh card overflowed both ends (header
   and footer clipped). Shrink the inset and cap the card to the DYNAMIC
   viewport height (100dvh accounts for the mobile browser chrome) so the
   pinned header + footer stay on screen and only the body scrolls. */
@media (max-width: 576px) {
  .promos-modal[data-open="true"] { padding: 8px; }
  /* Higher specificity than the base `.promos-modal__card { max-height: 92vh }`
     which is declared LATER in the file — otherwise it wins on source order. */
  .promos-modal[data-open="true"] .promos-modal__card { max-height: calc(100dvh - 16px); }
}
.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); }

/* Shipping-zone country picker: sticky region headers + container border use the
   modal's own --pz-* tokens so they adapt to dark mode (the old bg-body-secondary
   / Bootstrap border did not). */
.zone-country-picker { border-color: var(--pz-border) !important; }
.zone-region-head {
  background: var(--pz-surface-muted);
  border-bottom: 1px solid var(--pz-border);
}
.zone-region-head .text-muted { color: var(--pz-text-muted) !important; }
.zone-region-head [data-zone-region-all] { color: var(--pz-brand); }

/* Add-shipping-option picker: field-like trigger whose menu opens UPWARD (the
   button sits low in the modal, so a downward menu fell below the fold). Items
   pad their icons inside the hover background. */
/* Trigger sizes to its content (was a fixed 320px); the menu matches its width. */
.zone-add-wrap { display: inline-block; }
.zone-type-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px);
  background: var(--pz-surface); z-index: 30; padding: 4px;
  max-height: 260px; overflow: auto; white-space: nowrap;
}
.zone-type-item {
  background: transparent; border: 0; border-radius: 6px;
  padding: 6px 10px; color: var(--pz-text); font-size: .875rem;
}
.zone-type-item:hover:not(.is-disabled) { background: var(--pz-surface-muted); cursor: pointer; }
.zone-type-item.is-disabled { color: var(--pz-text-muted); cursor: not-allowed; }
/* "+ Add shipping method description" link — no colour change on hover. */
[data-opt-add-description], [data-opt-add-description]:hover, [data-opt-add-description]:focus {
  color: var(--pz-brand); text-decoration: none;
}
/* Hover affordance on collapsed option rows (modal) + zone rows (settings tab):
   the whole row tints to the field background to signal it's clickable. */
.page-block-card:not(.is-expanded) .page-block-card__head:hover { background: var(--pz-bg); }
.page-block-card[data-zone-card] { cursor: pointer; }
.page-block-card[data-zone-card]:hover { background: var(--hover); }
@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: 18px;
  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: 18px;
  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: 18px;
  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;
}
/* The horizontally-scrolling tab row opts OUT of the admin's custom 6px
   scrollbar above (which `.admin-main *::-webkit-scrollbar` otherwise forces
   onto it — that was the bar still showing on the tab row on iOS). This must
   out-specify that rule, so it carries the full .admin-main ancestor chain. */
.admin-shell[data-admin-shell] .admin-main .promos-tabs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  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;
}

/* Product-image "Add image" button: text on desktop (icon hidden). On phone
   portrait the long upload hint + text button crowded out the section title
   and the button itself — so hide the hint, drop the button text and show
   just the upload icon, leaving room for "Product image" + a compact button. */
.img-add-btn__icon { display: none; }
@media (max-width: 576px) {
  .img-multi-upload .img-upload-hint { display: none; }
  .img-multi-upload .img-add-btn__text { display: none; }
  .img-multi-upload .img-add-btn__icon { display: inline-block; }
}

/* The product-name field's label row carries the language-switcher strip
   (~22px tall) with a 4px gap to the input, so the plain category label next
   to it sat higher and pushed its dropdown out of line. Give the category
   label the same header height + gap so the two controls align. */
.product-inline-label {
  display: flex;
  align-items: flex-end;
  min-height: 22px;
  margin-bottom: 4px;
}
/* Unit & quantities row: the Unit field's label sits in a flex header (label +
   "Edit units" link) whose rendered height is a pixel or two off the plain
   form-labels beside it. Rather than chase that, make the three columns equal
   height and pin every control to the bottom, so the dropdown lines up with the
   Min-qty / Step inputs exactly regardless of label-area height. */
.product-unit-head { margin-bottom: 0.375rem; }
.product-section__body .row:has(.product-unit-head) > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.product-section__body .row:has(.product-unit-head) > [class*="col-"] > .form-select,
.product-section__body .row:has(.product-unit-head) > [class*="col-"] > .form-control {
  margin-top: auto;
}

/* Multi-category picker (product form): a dropdown that shows the primary
   category when closed and a searchable checkbox tree when open. Indentation
   of nested categories is inline via padding-left on each .cat-check. */
.cat-select { position: relative; }
.cat-select__trigger {
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cat-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cat-select__value--empty { color: var(--az-text-muted, #78716c); }
.cat-select__panel {
  /* Fixed + JS-positioned so it isn't clipped by the modal's overflow:hidden
     ancestors (.product-section / .promos-modal__body / __card). No ancestor has
     a transform, so fixed resolves against the viewport. top/left/width set by
     category-picker.js on open. */
  position: fixed;
  z-index: 2100;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.cat-select__search { padding: 8px; border-bottom: 1px solid var(--border, #e7e5e4); }
.cat-select__empty { padding: 10px 12px; font-size: 13px; color: var(--az-text-muted, #78716c); }
.cat-check-tree {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px 8px;
}
.cat-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 2px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg, #1c1917);
  border-radius: 5px;
}
.cat-check:hover { background: var(--hover, #f5f5f4); }
.cat-check__box { flex-shrink: 0; margin: 0; cursor: pointer; }
.cat-check__name { line-height: 1.3; }
/* Inline "Add category" button pinned below the (independently scrolling) tree. */
.cat-select__add {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--border, #e7e5e4);
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary, #10b981);
  text-align: left;
}
.cat-select__add:hover { background: var(--hover, #f5f5f4); }
[data-theme="dark"] .cat-select__panel { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .cat-select__add { border-bottom-color: var(--border); }
[data-theme="dark"] .cat-select__search { border-bottom-color: var(--border); }
[data-theme="dark"] .cat-check:hover { background: var(--hover); }

/* 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 tabs use the standard .promos-tabs underline style — the
   same modern tabs as Insights / Settings (a brand-coloured active underline,
   no box). `.sec-tabs` only keeps flex-wrap (above) so all 9 tabs stay visible
   on narrow viewports. */

/* 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 {
  /* The page boxes live inside .admin-main, whose scrollbar gutter eats into
     their right edge (22px padding + ~8px gutter). This banner sits ABOVE
     .admin-main, so its right margin needs the extra 8px to line its right edge
     up with the boxes. Left stays at the 22px .admin-main padding. */
  margin: 16px 30px 0 22px;
}
.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;
}
/* ≤991px: .admin-main padding drops to 16px and touch scrollbars overlay (take
   no space), so match both edges to 16px — the banner was sitting 6px too far
   in on each side. */
@media (max-width: 991px) {
  .admin-shell[data-admin-shell] .owner-verify-banner,
  .admin-shell[data-admin-shell] .owner-verify-flash {
    margin-left: 16px;
    margin-right: 16px;
  }
}
/* The concise mobile line only shows on phone portrait (see media query). */
.owner-verify-title-mobile { display: none; }
/* Mobile portrait: strip the verify banner to the concise one-liner + resend
   button — drop the envelope icon, the full title and the long paragraph. */
@media (max-width: 576px) {
  .owner-verify-banner .fa-envelope,
  .owner-verify-banner .owner-verify-title-full,
  .owner-verify-banner .small { display: none; }
  .owner-verify-banner .owner-verify-title-mobile { display: block; }
  .admin-shell[data-admin-shell] .owner-verify-banner { padding: 10px 14px; margin-bottom: 12px; }
  /* Tighter gap between the message and the Resend button (was gap-3 = 1rem). */
  .owner-verify-banner .flex-column { gap: 0.4rem !important; }
}

/* 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 default background pattern ───
   Applied to any hero slide with NO background image (the default a fresh shop
   ships with). Brand-tinted corner gradients + a static "confetti" field: most
   confetti are translucent grey (one cached SVG tile — reads on light AND
   dark), plus a handful of sparse pieces in the shop's --primary as tiny
   solid-colour gradient rects (SVGs in background-image can't read CSS vars, and
   gradients are far cheaper to repaint than a repeating mask). No JS, no
   animation — nothing to repaint after first paint. Theme-adaptive via
   --bg / --primary; degrades to the flat --bg surface without color-mix. */
.block-hero__slide--pattern {
  background-color: var(--bg, #f8f9fb);
  background-image:
    radial-gradient(115% 130% at 12% 15%, color-mix(in srgb, var(--primary, #9f50df) 22%, transparent), transparent 55%),
    radial-gradient(110% 120% at 88% 85%, color-mix(in srgb, var(--primary-2, #8155de) 18%, transparent), transparent 55%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27320%27%20viewBox%3D%270%200%20320%20320%27%3E%3Crect%20x%3D%2765.3%27%20y%3D%2767.0%27%20width%3D%2711.9%27%20height%3D%275.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-10.0%2071.3%2069.7%29%27%2F%3E%3Crect%20x%3D%27124.3%27%20y%3D%27168.0%27%20width%3D%2710.3%27%20height%3D%275.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%286.3%20129.5%20170.5%29%27%2F%3E%3Crect%20x%3D%27208.2%27%20y%3D%2767.2%27%20width%3D%279.7%27%20height%3D%274.7%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-42.8%20213.0%2069.6%29%27%2F%3E%3Crect%20x%3D%27249.4%27%20y%3D%27179.6%27%20width%3D%2712.6%27%20height%3D%275.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-59.7%20255.7%20182.3%29%27%2F%3E%3Crect%20x%3D%2769.8%27%20y%3D%2772.7%27%20width%3D%279.7%27%20height%3D%274.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-12.7%2074.6%2074.8%29%27%2F%3E%3Crect%20x%3D%27229.5%27%20y%3D%27228.0%27%20width%3D%278.1%27%20height%3D%273.9%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2825.1%20233.6%20229.9%29%27%2F%3E%3Crect%20x%3D%2764.7%27%20y%3D%27233.3%27%20width%3D%278.2%27%20height%3D%275.9%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-67.1%2068.8%20236.3%29%27%2F%3E%3Crect%20x%3D%27179.3%27%20y%3D%27140.8%27%20width%3D%279.3%27%20height%3D%274.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-70.5%20183.9%20143.0%29%27%2F%3E%3Crect%20x%3D%2752.7%27%20y%3D%2785.8%27%20width%3D%279.0%27%20height%3D%275.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-29.8%2057.2%2088.4%29%27%2F%3E%3Crect%20x%3D%27181.3%27%20y%3D%27143.2%27%20width%3D%279.8%27%20height%3D%276.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2865.9%20186.2%20146.2%29%27%2F%3E%3Crect%20x%3D%27215.7%27%20y%3D%2723.1%27%20width%3D%278.0%27%20height%3D%274.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-53.8%20219.6%2025.3%29%27%2F%3E%3Crect%20x%3D%2749.1%27%20y%3D%2787.9%27%20width%3D%279.0%27%20height%3D%274.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-49.5%2053.6%2090.0%29%27%2F%3E%3Crect%20x%3D%2757.4%27%20y%3D%27230.1%27%20width%3D%2710.2%27%20height%3D%275.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2814.2%2062.6%20232.6%29%27%2F%3E%3Crect%20x%3D%27181.1%27%20y%3D%2726.0%27%20width%3D%278.1%27%20height%3D%274.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2848.1%20185.1%2028.2%29%27%2F%3E%3Crect%20x%3D%2777.3%27%20y%3D%2794.7%27%20width%3D%2710.2%27%20height%3D%275.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2814.3%2082.3%2097.3%29%27%2F%3E%3Crect%20x%3D%27234.5%27%20y%3D%27266.3%27%20width%3D%277.8%27%20height%3D%276.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2820.8%20238.4%20269.4%29%27%2F%3E%3Crect%20x%3D%27104.1%27%20y%3D%27128.7%27%20width%3D%2711.7%27%20height%3D%276.0%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2867.3%20109.9%20131.7%29%27%2F%3E%3Crect%20x%3D%27203.0%27%20y%3D%27184.8%27%20width%3D%279.9%27%20height%3D%274.5%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-69.8%20207.9%20187.0%29%27%2F%3E%3Crect%20x%3D%27122.9%27%20y%3D%27200.3%27%20width%3D%2712.4%27%20height%3D%274.5%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2816.5%20129.1%20202.5%29%27%2F%3E%3Crect%20x%3D%2765.7%27%20y%3D%2764.7%27%20width%3D%279.9%27%20height%3D%276.0%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2860.4%2070.7%2067.7%29%27%2F%3E%3Crect%20x%3D%2727.9%27%20y%3D%2719.3%27%20width%3D%279.9%27%20height%3D%275.5%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%286.7%2032.9%2022.0%29%27%2F%3E%3Crect%20x%3D%27215.5%27%20y%3D%27120.5%27%20width%3D%2711.2%27%20height%3D%274.9%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-13.0%20221.2%20123.0%29%27%2F%3E%3Crect%20x%3D%27212.8%27%20y%3D%2741.8%27%20width%3D%2711.4%27%20height%3D%273.7%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-54.3%20218.5%2043.6%29%27%2F%3E%3Crect%20x%3D%27135.2%27%20y%3D%27216.6%27%20width%3D%2710.6%27%20height%3D%275.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-48.5%20140.5%20219.2%29%27%2F%3E%3Crect%20x%3D%27217.7%27%20y%3D%27150.0%27%20width%3D%2711.6%27%20height%3D%274.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-13.4%20223.6%20152.1%29%27%2F%3E%3Crect%20x%3D%27137.5%27%20y%3D%27274.6%27%20width%3D%277.7%27%20height%3D%274.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-8.2%20141.3%20276.6%29%27%2F%3E%3Crect%20x%3D%27219.0%27%20y%3D%27278.0%27%20width%3D%279.4%27%20height%3D%276.0%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-19.7%20223.7%20281.0%29%27%2F%3E%3Crect%20x%3D%27123.6%27%20y%3D%27280.2%27%20width%3D%2711.8%27%20height%3D%274.6%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-59.6%20129.5%20282.5%29%27%2F%3E%3Crect%20x%3D%27163.1%27%20y%3D%2743.5%27%20width%3D%278.8%27%20height%3D%275.6%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2822.0%20167.5%2046.3%29%27%2F%3E%3Crect%20x%3D%27157.9%27%20y%3D%2736.8%27%20width%3D%2710.5%27%20height%3D%274.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-68.2%20163.1%2039.0%29%27%2F%3E%3Crect%20x%3D%27252.4%27%20y%3D%2733.4%27%20width%3D%2711.6%27%20height%3D%274.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2850.0%20258.3%2035.6%29%27%2F%3E%3Crect%20x%3D%2741.5%27%20y%3D%2775.9%27%20width%3D%278.3%27%20height%3D%275.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-21.5%2045.7%2078.7%29%27%2F%3E%3Crect%20x%3D%27259.4%27%20y%3D%2796.1%27%20width%3D%2712.0%27%20height%3D%276.0%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-38.2%20265.4%2099.1%29%27%2F%3E%3Crect%20x%3D%2748.4%27%20y%3D%27239.8%27%20width%3D%2711.8%27%20height%3D%275.6%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2817.5%2054.3%20242.5%29%27%2F%3E%3Crect%20x%3D%27161.3%27%20y%3D%27208.9%27%20width%3D%277.4%27%20height%3D%276.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2860.5%20165.0%20211.9%29%27%2F%3E%3Crect%20x%3D%2759.1%27%20y%3D%27102.4%27%20width%3D%277.1%27%20height%3D%274.9%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-63.1%2062.7%20104.8%29%27%2F%3E%3Crect%20x%3D%27202.9%27%20y%3D%27145.5%27%20width%3D%2712.9%27%20height%3D%274.6%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%287.5%20209.4%20147.8%29%27%2F%3E%3Crect%20x%3D%2716.9%27%20y%3D%27273.8%27%20width%3D%278.2%27%20height%3D%274.8%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-20.1%2021.0%20276.2%29%27%2F%3E%3Crect%20x%3D%27212.8%27%20y%3D%2727.7%27%20width%3D%278.7%27%20height%3D%274.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-25.1%20217.1%2029.7%29%27%2F%3E%3Crect%20x%3D%27207.9%27%20y%3D%27295.9%27%20width%3D%279.6%27%20height%3D%274.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-23.2%20212.7%20298.0%29%27%2F%3E%3Crect%20x%3D%27257.8%27%20y%3D%27155.2%27%20width%3D%2712.2%27%20height%3D%274.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-12.6%20263.9%20157.3%29%27%2F%3E%3Crect%20x%3D%27223.2%27%20y%3D%2794.1%27%20width%3D%2710.1%27%20height%3D%275.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2848.7%20228.3%2096.7%29%27%2F%3E%3Crect%20x%3D%27119.5%27%20y%3D%27118.4%27%20width%3D%2711.7%27%20height%3D%276.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2821.9%20125.4%20121.6%29%27%2F%3E%3Crect%20x%3D%27237.0%27%20y%3D%27256.8%27%20width%3D%278.4%27%20height%3D%274.5%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2850.3%20241.2%20259.1%29%27%2F%3E%3Crect%20x%3D%27156.7%27%20y%3D%27113.8%27%20width%3D%2712.7%27%20height%3D%275.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2829.2%20163.0%20116.4%29%27%2F%3E%3Crect%20x%3D%2724.2%27%20y%3D%27189.8%27%20width%3D%2710.9%27%20height%3D%276.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-14.8%2029.7%20192.9%29%27%2F%3E%3Crect%20x%3D%27119.5%27%20y%3D%27293.1%27%20width%3D%278.3%27%20height%3D%275.7%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2821.2%20123.7%20295.9%29%27%2F%3E%3Crect%20x%3D%27130.2%27%20y%3D%27157.3%27%20width%3D%2711.9%27%20height%3D%273.7%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-55.0%20136.2%20159.1%29%27%2F%3E%3Crect%20x%3D%27276.2%27%20y%3D%27307.5%27%20width%3D%2710.6%27%20height%3D%276.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-12.6%20281.5%20310.7%29%27%2F%3E%3Crect%20x%3D%27302.6%27%20y%3D%2759.0%27%20width%3D%279.0%27%20height%3D%273.8%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-3.2%20307.1%2060.9%29%27%2F%3E%3Crect%20x%3D%27173.6%27%20y%3D%27138.3%27%20width%3D%2712.9%27%20height%3D%274.7%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2840.9%20180.0%20140.6%29%27%2F%3E%3Crect%20x%3D%27221.2%27%20y%3D%2792.7%27%20width%3D%279.2%27%20height%3D%273.8%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-56.6%20225.7%2094.6%29%27%2F%3E%3Crect%20x%3D%2715.9%27%20y%3D%27178.0%27%20width%3D%2710.7%27%20height%3D%274.8%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-29.8%2021.2%20180.4%29%27%2F%3E%3Crect%20x%3D%2794.4%27%20y%3D%2790.1%27%20width%3D%2710.7%27%20height%3D%274.0%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2845.5%2099.7%2092.1%29%27%2F%3E%3Crect%20x%3D%27205.6%27%20y%3D%27161.1%27%20width%3D%277.3%27%20height%3D%274.8%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2816.0%20209.2%20163.5%29%27%2F%3E%3Crect%20x%3D%27279.4%27%20y%3D%27103.6%27%20width%3D%2713.0%27%20height%3D%274.8%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-2.6%20285.9%20106.0%29%27%2F%3E%3Crect%20x%3D%2755.0%27%20y%3D%27161.0%27%20width%3D%2712.1%27%20height%3D%274.9%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-36.8%2061.1%20163.4%29%27%2F%3E%3Crect%20x%3D%27187.4%27%20y%3D%27157.2%27%20width%3D%2712.0%27%20height%3D%274.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2816.9%20193.3%20159.3%29%27%2F%3E%3Crect%20x%3D%27114.6%27%20y%3D%2757.1%27%20width%3D%2710.2%27%20height%3D%275.9%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-36.2%20119.7%2060.1%29%27%2F%3E%3Crect%20x%3D%27310.0%27%20y%3D%27223.0%27%20width%3D%277.7%27%20height%3D%275.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2841.2%20313.9%20225.7%29%27%2F%3E%3Crect%20x%3D%27130.3%27%20y%3D%2751.5%27%20width%3D%277.4%27%20height%3D%274.9%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-38.8%20134.0%2054.0%29%27%2F%3E%3Crect%20x%3D%27250.5%27%20y%3D%2722.0%27%20width%3D%279.6%27%20height%3D%273.6%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-8.5%20255.3%2023.8%29%27%2F%3E%3Crect%20x%3D%27153.2%27%20y%3D%27117.1%27%20width%3D%2712.1%27%20height%3D%276.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2838.6%20159.3%20120.2%29%27%2F%3E%3Crect%20x%3D%27271.3%27%20y%3D%27157.5%27%20width%3D%279.2%27%20height%3D%275.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-44.7%20276.0%20160.1%29%27%2F%3E%3Crect%20x%3D%2760.1%27%20y%3D%27261.2%27%20width%3D%279.5%27%20height%3D%274.7%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2848.1%2064.8%20263.5%29%27%2F%3E%3Crect%20x%3D%2799.7%27%20y%3D%27112.4%27%20width%3D%277.1%27%20height%3D%274.4%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-68.8%20103.3%20114.7%29%27%2F%3E%3Crect%20x%3D%27130.5%27%20y%3D%27306.5%27%20width%3D%279.4%27%20height%3D%273.9%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2866.4%20135.2%20308.4%29%27%2F%3E%3Crect%20x%3D%27227.3%27%20y%3D%27212.8%27%20width%3D%279.5%27%20height%3D%274.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2862.5%20232.0%20215.0%29%27%2F%3E%3Crect%20x%3D%27200.4%27%20y%3D%2727.8%27%20width%3D%278.1%27%20height%3D%273.7%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2827.5%20204.4%2029.6%29%27%2F%3E%3Crect%20x%3D%27249.7%27%20y%3D%27180.0%27%20width%3D%278.4%27%20height%3D%275.7%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-3.3%20253.9%20182.9%29%27%2F%3E%3Crect%20x%3D%27148.4%27%20y%3D%27154.8%27%20width%3D%279.1%27%20height%3D%274.0%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%286.5%20152.9%20156.8%29%27%2F%3E%3Crect%20x%3D%27266.4%27%20y%3D%2751.9%27%20width%3D%279.1%27%20height%3D%275.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%28-67.9%20270.9%2054.6%29%27%2F%3E%3Crect%20x%3D%27116.2%27%20y%3D%2730.1%27%20width%3D%278.4%27%20height%3D%276.3%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%2862.2%20120.4%2033.3%29%27%2F%3E%3Crect%20x%3D%27105.1%27%20y%3D%27135.6%27%20width%3D%279.8%27%20height%3D%274.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%28-44.9%20110.0%20137.7%29%27%2F%3E%3Crect%20x%3D%27112.7%27%20y%3D%27103.8%27%20width%3D%2711.2%27%20height%3D%274.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.13%29%27%20transform%3D%27rotate%2812.7%20118.3%20105.9%29%27%2F%3E%3Crect%20x%3D%27112.5%27%20y%3D%27191.5%27%20width%3D%279.7%27%20height%3D%276.1%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.16%29%27%20transform%3D%27rotate%28-70.7%20117.4%20194.6%29%27%2F%3E%3Crect%20x%3D%27175.8%27%20y%3D%27209.6%27%20width%3D%277.5%27%20height%3D%276.2%27%20fill%3D%27rgba%28128%2C128%2C128%2C0.10%29%27%20transform%3D%27rotate%2864.5%20179.5%20212.8%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%, 100% 100%, 320px 320px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  border-radius: 8px;
}

/* The brand-coloured confetti. Painted as a --primary fill masked by a tile of
   tilted white rects: an SVG in background-image can't read CSS custom
   properties, and a gradient layer can't be rotated — masking is what lets the
   brand pieces tilt like the grey ones AND still track each shop's --primary.
   Static: rasterised once, no animation, nothing repaints after first paint.
   The slide is position:relative and its text column is position:relative too,
   so this ::before paints underneath the copy. */
.block-hero__slide--pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--primary, #9f50df);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271200%27%20height%3D%27320%27%20viewBox%3D%270%200%201200%20320%27%3E%3Crect%20x%3D%271029.1%27%20y%3D%27137.7%27%20width%3D%2711.2%27%20height%3D%275.2%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-61.2%201034.6%20140.3%29%27%2F%3E%3Crect%20x%3D%27460.3%27%20y%3D%27128.4%27%20width%3D%279.0%27%20height%3D%275.5%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2856.0%20464.8%20131.1%29%27%2F%3E%3Crect%20x%3D%27356.5%27%20y%3D%27233.0%27%20width%3D%2711.6%27%20height%3D%274.5%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-52.6%20362.3%20235.3%29%27%2F%3E%3Crect%20x%3D%27954.0%27%20y%3D%27119.4%27%20width%3D%2712.5%27%20height%3D%274.9%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-54.1%20960.2%20121.8%29%27%2F%3E%3Crect%20x%3D%27417.8%27%20y%3D%2759.4%27%20width%3D%2710.3%27%20height%3D%276.4%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2833.5%20422.9%2062.6%29%27%2F%3E%3Crect%20x%3D%27830.3%27%20y%3D%2782.0%27%20width%3D%2711.5%27%20height%3D%275.8%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2832.4%20836.0%2084.9%29%27%2F%3E%3Crect%20x%3D%27623.2%27%20y%3D%27238.9%27%20width%3D%2712.8%27%20height%3D%275.9%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-21.1%20629.6%20241.9%29%27%2F%3E%3Crect%20x%3D%27661.2%27%20y%3D%27206.8%27%20width%3D%2712.1%27%20height%3D%275.0%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%286.2%20667.3%20209.3%29%27%2F%3E%3Crect%20x%3D%27524.7%27%20y%3D%27198.6%27%20width%3D%278.2%27%20height%3D%274.8%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-5.6%20528.8%20201.0%29%27%2F%3E%3Crect%20x%3D%27134.8%27%20y%3D%27256.9%27%20width%3D%2711.2%27%20height%3D%275.7%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2814.1%20140.4%20259.8%29%27%2F%3E%3Crect%20x%3D%271047.5%27%20y%3D%2758.5%27%20width%3D%278.4%27%20height%3D%276.5%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-65.9%201051.7%2061.7%29%27%2F%3E%3Crect%20x%3D%27340.5%27%20y%3D%27224.3%27%20width%3D%2710.4%27%20height%3D%274.4%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-55.3%20345.7%20226.5%29%27%2F%3E%3Crect%20x%3D%27383.1%27%20y%3D%27273.6%27%20width%3D%2713.1%27%20height%3D%276.9%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-28.0%20389.7%20277.0%29%27%2F%3E%3Crect%20x%3D%27123.7%27%20y%3D%2786.5%27%20width%3D%278.2%27%20height%3D%275.1%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2828.1%20127.8%2089.0%29%27%2F%3E%3Crect%20x%3D%27734.7%27%20y%3D%27196.5%27%20width%3D%2713.3%27%20height%3D%275.0%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-49.1%20741.3%20198.9%29%27%2F%3E%3Crect%20x%3D%27856.3%27%20y%3D%2784.5%27%20width%3D%278.3%27%20height%3D%274.2%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2835.6%20860.4%2086.6%29%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271200%27%20height%3D%27320%27%20viewBox%3D%270%200%201200%20320%27%3E%3Crect%20x%3D%271029.1%27%20y%3D%27137.7%27%20width%3D%2711.2%27%20height%3D%275.2%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-61.2%201034.6%20140.3%29%27%2F%3E%3Crect%20x%3D%27460.3%27%20y%3D%27128.4%27%20width%3D%279.0%27%20height%3D%275.5%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2856.0%20464.8%20131.1%29%27%2F%3E%3Crect%20x%3D%27356.5%27%20y%3D%27233.0%27%20width%3D%2711.6%27%20height%3D%274.5%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-52.6%20362.3%20235.3%29%27%2F%3E%3Crect%20x%3D%27954.0%27%20y%3D%27119.4%27%20width%3D%2712.5%27%20height%3D%274.9%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-54.1%20960.2%20121.8%29%27%2F%3E%3Crect%20x%3D%27417.8%27%20y%3D%2759.4%27%20width%3D%2710.3%27%20height%3D%276.4%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2833.5%20422.9%2062.6%29%27%2F%3E%3Crect%20x%3D%27830.3%27%20y%3D%2782.0%27%20width%3D%2711.5%27%20height%3D%275.8%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2832.4%20836.0%2084.9%29%27%2F%3E%3Crect%20x%3D%27623.2%27%20y%3D%27238.9%27%20width%3D%2712.8%27%20height%3D%275.9%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-21.1%20629.6%20241.9%29%27%2F%3E%3Crect%20x%3D%27661.2%27%20y%3D%27206.8%27%20width%3D%2712.1%27%20height%3D%275.0%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%286.2%20667.3%20209.3%29%27%2F%3E%3Crect%20x%3D%27524.7%27%20y%3D%27198.6%27%20width%3D%278.2%27%20height%3D%274.8%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-5.6%20528.8%20201.0%29%27%2F%3E%3Crect%20x%3D%27134.8%27%20y%3D%27256.9%27%20width%3D%2711.2%27%20height%3D%275.7%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2814.1%20140.4%20259.8%29%27%2F%3E%3Crect%20x%3D%271047.5%27%20y%3D%2758.5%27%20width%3D%278.4%27%20height%3D%276.5%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-65.9%201051.7%2061.7%29%27%2F%3E%3Crect%20x%3D%27340.5%27%20y%3D%27224.3%27%20width%3D%2710.4%27%20height%3D%274.4%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-55.3%20345.7%20226.5%29%27%2F%3E%3Crect%20x%3D%27383.1%27%20y%3D%27273.6%27%20width%3D%2713.1%27%20height%3D%276.9%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-28.0%20389.7%20277.0%29%27%2F%3E%3Crect%20x%3D%27123.7%27%20y%3D%2786.5%27%20width%3D%278.2%27%20height%3D%275.1%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2828.1%20127.8%2089.0%29%27%2F%3E%3Crect%20x%3D%27734.7%27%20y%3D%27196.5%27%20width%3D%2713.3%27%20height%3D%275.0%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%28-49.1%20741.3%20198.9%29%27%2F%3E%3Crect%20x%3D%27856.3%27%20y%3D%2784.5%27%20width%3D%278.3%27%20height%3D%274.2%27%20fill%3D%27%23fff%27%20transform%3D%27rotate%2835.6%20860.4%2086.6%29%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 1200px 320px;
          mask-size: 1200px 320px;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}

/* ─── 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);
}

/* ══════════════════════════════════════════════════════════════════════
   Shop preview banner — shown on a not-live shop's storefront to its own
   logged-in owner/team (shopLiveGuard sets shopPreviewMode). Sticky slim
   bar directly under the storefront header. Visitors never see it — they
   get the coming-soon page instead.
   ══════════════════════════════════════════════════════════════════════ */
.shop-preview-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050; /* the topmost bar: above the fixed header (1030) and the
                    announcement bar (1040). Everything else is pushed down
                    below it via --sz-preview-h (measured in the partial). */
  background: #1c1917;
  color: #fafaf9;
  font-size: 13px;
  line-height: 1.4;
}
.shop-preview-banner__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.shop-preview-banner__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b;
  flex: 0 0 auto;
}
[data-theme="dark"] .shop-preview-banner { background: #292524; }

/* When the preview banner is present, push the fixed header, the announcement
   bar and the main content down by its height so nothing hides beneath it. */
body:has(.shop-preview-banner) > header {
  top: calc(var(--sz-preview-h, 40px) + max(0px, var(--announcement-bar-h, 0px) - 1px));
}
body:has(.shop-preview-banner) .shop-announcement-bar {
  top: var(--sz-preview-h, 40px);
}
body:has(.shop-preview-banner) main,
body:has(.shop-preview-banner) main.container,
body:has(.shop-preview-banner) main.container.my-4 {
  margin-top: calc(var(--navbar-height, 64px) + var(--announcement-bar-h, 0px) + var(--sz-preview-h, 40px)) !important;
}
/* Sticky sidebars / summaries anchor below the header, so they get the offset too. */
body:has(.shop-preview-banner) .cart-summary-card {
  top: calc(80px + var(--announcement-bar-h, 0px) + var(--sz-preview-h, 40px));
}
body:has(.shop-preview-banner) .checkout-summary-card {
  top: calc(var(--navbar-height, 64px) + 20px + var(--announcement-bar-h, 0px) + var(--sz-preview-h, 40px));
}
@media (min-width: 992px) {
  body:has(.shop-preview-banner) .shop-sidebar-wrap {
    top: calc(var(--navbar-height, 64px) + 20px + var(--announcement-bar-h, 0px) + var(--sz-preview-h, 40px));
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Onboarding setup guide — bottom-right pill + panel + welcome modal.
   Rendered OUTSIDE .promos-shell (sibling of .admin-shell), so the panel
   re-declares the --pz-* tokens exactly like .promos-modal__card does.
   z-order: pill/panel 1050 < promos-modal welcome 2000 < confetti 2500.
   ══════════════════════════════════════════════════════════════════════ */
.onboarding-pill {
  position: fixed;
  /* Same gap from the bottom/right edges as the settings floating Save bar
     (padding: 18px 22px) so the pill lines up with that Save button. */
  bottom: 18px;
  right: 22px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 2.1rem;
  padding: 0 0.85rem;
  border: none;
  border-radius: 2rem;
  background: #1c1917;
  color: #fafaf9;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.onboarding-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26); }
.onboarding-pill__icon { font-size: 13px; line-height: 1; }
.onboarding-pill__count {
  background: #f59e0b;
  color: #1c1917;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 1rem;
}
/* Dark mode: #292524 was almost the page colour (barely visible). Mirror the
   light-mode contrast instead — a light pill with dark text so it pops. */
[data-theme="dark"] .onboarding-pill { background: #f5f5f4; color: #1c1917; }
/* Expanded: the panel takes the pill's corner, so hide the pill. */
.onboarding-widget.is-open .onboarding-pill { display: none; }
/* While the panel is open, the bug-report / powered-by floaters (rendered
   later in the DOM at the same z-plane) would paint over it — fade them out. */
body:has(.onboarding-widget.is-open) .shopiza-bug-btn {
  opacity: 0;
  pointer-events: none;
}

.onboarding-panel {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1050;
  width: 340px;
  max-width: calc(100vw - 2.5rem);
}
.onboarding-panel__body {
  /* Token re-declaration — this card renders outside .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-soft: #ecfdf5;
  --pz-danger: #ef4444;
  --pz-brand: var(--primary, #10b981);
  --pz-brand-fg: var(--primary-fg, #ffffff);
  background: var(--pz-surface);
  color: var(--pz-text);
  border: 1px solid var(--pz-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
  animation: onboardingPanelIn 0.2s ease;
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 640px);
}
[data-theme="dark"] .onboarding-panel__body {
  --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-soft: rgba(16, 185, 129, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
@keyframes onboardingPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.onboarding-panelroot { display: flex; flex-direction: column; min-height: 0; }
.onboarding-loading { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--pz-text-muted, #78716c); }

/* One-row header: title · count · minimize. */
.onboarding-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px 11px 15px;
  background: var(--pz-bg);
}
.onboarding-panel__title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -0.1px; }
.onboarding-panel__count { font-size: 12px; font-weight: 700; color: var(--pz-text-muted); }
.onboarding-panel__min {
  border: none;
  /* Show the hover background by default (both themes — the token is
     theme-aware); hover still darkens the icon for feedback. */
  background: var(--pz-surface-muted);
  color: var(--pz-text-muted);
  padding: 3px 5px;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
}
.onboarding-panel__min:hover { background: var(--pz-surface-muted); color: var(--pz-text); }
/* Thin, text-free progress line directly under the header. */
.onboarding-progressbar { height: 3px; background: var(--pz-surface-muted); overflow: hidden; }
.onboarding-progressbar span { display: block; height: 100%; background: var(--pz-accent); transition: width 0.3s ease; }

.onboarding-panel__scroll { overflow-y: auto; padding: 8px; min-height: 0; }
/* Task row: deep-link (flex-1) + optional inline skip, one line. */
.onboarding-step {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--pz-border);
  border-radius: 9px;
  background: var(--pz-surface);
  margin-bottom: 5px;
  padding-right: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.onboarding-step:hover { border-color: var(--pz-border-strong); }
.onboarding-step.is-done { border-color: var(--pz-accent); background: var(--pz-accent-soft); }
.onboarding-step.is-skipped { opacity: 0.6; }
.onboarding-step__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px 9px 11px;
  text-decoration: none;
  color: inherit;
}
.onboarding-step__main:hover { color: inherit; }
.onboarding-step__check {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--pz-border-strong);
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--pz-surface);
}
.onboarding-step.is-done .onboarding-step__check { background: var(--pz-accent); border-color: var(--pz-accent); }
.onboarding-step__title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.onboarding-step__skip {
  border: none;
  background: transparent;
  color: var(--pz-text-subtle);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.onboarding-step__skip:hover { color: var(--pz-text); background: var(--pz-surface-muted); }

.onboarding-panel__footer {
  padding: 10px 12px;
  border-top: 1px solid var(--pz-border);
  background: var(--pz-bg);
}
.onboarding-golive {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  background: var(--pz-brand);
  color: var(--pz-brand-fg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.onboarding-golive:hover:not(:disabled) { filter: brightness(1.05); }
.onboarding-golive:disabled { opacity: 0.5; cursor: not-allowed; }
.onboarding-golive.is-busy { opacity: 0.7; cursor: wait; }
.onboarding-owneronly { font-size: 11.5px; color: var(--pz-text-muted); text-align: center; line-height: 1.5; }
.onboarding-live { display: flex; flex-direction: column; gap: 8px; }
.onboarding-live__note { font-size: 13px; font-weight: 700; color: var(--pz-accent); text-align: center; }
.onboarding-live__actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

/* Welcome modal — reuses .promos-modal scrim/card; card gets a tighter,
   celebratory layout. */
.onboarding-welcome__card { max-width: 480px; }
.onboarding-welcome__inner { padding: 36px 32px 28px; text-align: center; }
.onboarding-welcome__emoji { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.onboarding-welcome__title { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 10px; color: var(--pz-text); }
.onboarding-welcome__body { font-size: 14px; color: var(--pz-text-muted); line-height: 1.55; margin: 0 0 22px; }
.onboarding-welcome__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Deep-link section flash (data-onboard-target destinations). */
@keyframes onboardFlash {
  0% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.65); background-color: rgba(245, 158, 11, 0.10); }
  70% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35); background-color: rgba(245, 158, 11, 0.05); }
  100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0); background-color: transparent; }
}
.onboard-flash {
  animation: onboardFlash 2s ease-out;
  border-radius: 10px;
}

/* Mobile: panel becomes a bottom sheet; welcome modal a full-width sheet. */
@media (max-width: 576px) {
  .onboarding-pill {
    /* Match the mobile save bar gap (padding: 12px 16px); keep the safe-area
       inset so it clears the home indicator. */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    height: 2.1rem;
    font-size: 13px;
  }
  /* The open panel is a full-width bottom sheet here — the pill would sit
     on top of its footer and steal taps from the Go-live button. */
  .onboarding-widget.is-open .onboarding-pill { display: none; }
  .onboarding-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
  }
  .onboarding-panel__body {
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    max-height: 85dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .promos-modal.onboarding-welcome[data-open="true"] { padding: 0; align-items: end; }
  .onboarding-welcome__card {
    max-width: none;
    width: 100%;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    align-self: end;
  }
  .onboarding-welcome__inner { padding: 30px 22px calc(24px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Favicon field + interactive crop modal ─────────────────────────── */
.favicon-field__preview {
  width: 48px; height: 48px; border-radius: 8px;
  border: 1px solid var(--border, #dee2e6);
  background: var(--card, #fff);
  object-fit: contain; display: block; padding: 4px;
}
.favicon-field__placeholder {
  width: 48px; height: 48px; border-radius: 8px;
  border: 1px dashed var(--border, #ced4da);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted, #adb5bd);
}
[data-favicon-field][data-has-favicon="1"] .favicon-field__placeholder { display: none; }
[data-favicon-field][data-has-favicon="0"] .favicon-field__preview { display: none; }

#faviconCropModal {
  display: none; position: fixed; inset: 0; z-index: 2200;
  align-items: center; justify-content: center; padding: 16px;
}
#faviconCropModal .fav-crop-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
#faviconCropModal .fav-crop-dialog {
  position: relative; z-index: 1;
  background: var(--card, #fff); color: var(--fg, #212529);
  border: 1px solid var(--border, #dee2e6); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  width: min(560px, 100%); max-height: 92vh; overflow: auto; padding: 20px;
}
#faviconCropModal .fav-crop-stage {
  position: relative; display: inline-block; max-width: 100%;
  line-height: 0; touch-action: none; user-select: none; -webkit-user-select: none;
}
#faviconCropModal [data-fav-crop-image] {
  display: block; max-width: 100%; max-height: 46vh; width: auto; height: auto;
  background-image:
    linear-gradient(45deg, #e9ecef 25%, transparent 25%),
    linear-gradient(-45deg, #e9ecef 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9ecef 75%),
    linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#faviconCropModal .fav-crop-box {
  position: absolute; display: none; box-sizing: border-box;
  border: 2px solid #fff; cursor: move;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 0 9999px rgba(0,0,0,0.45);
}
#faviconCropModal .fav-crop-handle {
  position: absolute; width: 14px; height: 14px;
  background: #fff; border: 1px solid rgba(0,0,0,0.5); border-radius: 2px;
}
#faviconCropModal .fav-crop-handle[data-fav-handle="nw"] { top: -8px; left: -8px; cursor: nwse-resize; }
#faviconCropModal .fav-crop-handle[data-fav-handle="ne"] { top: -8px; right: -8px; cursor: nesw-resize; }
#faviconCropModal .fav-crop-handle[data-fav-handle="sw"] { bottom: -8px; left: -8px; cursor: nesw-resize; }
#faviconCropModal .fav-crop-handle[data-fav-handle="se"] { bottom: -8px; right: -8px; cursor: nwse-resize; }
#faviconCropModal .fav-crop-preview {
  width: 64px; height: 64px; border: 1px solid var(--border, #dee2e6);
  border-radius: 8px; background: #fff;
}


/* ── Home block: categories grid ─────────────────────────────────────
   Moved here from an inline <style> in
   views/partials/shop/blocks/_block_categories_grid.ejs. That nonce-gated
   inline style was dropped whenever the shop container re-rendered via
   innerHTML (e.g. after add-to-cart): the re-fetched partial carries a FRESH
   CSP nonce that no longer matches the live document, so the browser blocked
   the <style>, the grid lost display:grid, and every card ballooned to full
   width. In app.css (loaded once in <head>) it survives every re-render. */
.block-categories-grid__grid { display: grid; gap: 1rem; }
.block-category-card-link { display: block; }
.block-categories-grid__grid--large,
.block-categories-grid__grid--medium,
.block-categories-grid__grid--small  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .block-categories-grid__grid--large  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block-categories-grid__grid--medium { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .block-categories-grid__grid--small  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .block-categories-grid__grid--large  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .block-categories-grid__grid--medium { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .block-categories-grid__grid--small  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ── Home block: feature list (responsive overrides) ─────────────────
   Same reason as above — moved from the inline <style> in
   _block_feature_list.ejs so the mobile/tablet column overrides survive an
   add-to-cart re-render. The base grid is an inline style="" on the element
   (allowed via style-src-attr 'unsafe-inline'), so only these overrides — and
   the paragraph resets — needed relocating. The !important keeps them winning
   over that inline base grid-template-columns. */
.block-feature-list__text p:last-child { margin-bottom: 0; }
.block-feature-list__text p { margin-bottom: 0.25rem; }
@media (max-width: 991.98px) {
  .block-feature-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 479.98px) {
  .block-feature-list__grid { grid-template-columns: 1fr !important; }
}


/* Admin toast — bottom-centre, mirrors the storefront add-to-cart toast. Used
   e.g. after saving a category so you keep your scroll position on a long list. */
.admin-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: adminToastIn .25s ease, adminToastOut .4s ease 2.4s forwards;
}
.admin-toast i { color: var(--primary-text, var(--primary)); }
.admin-toast.admin-toast-error i { color: #dc3545; }
.admin-toast.admin-toast-error { border-color: #dc3545; }
@keyframes adminToastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes adminToastOut { to { opacity: 0; transform: translate(-50%, 14px); } }

/* Sortable table headers (admin products list). A faded fa-sort hints the
   column is clickable; the active column shows a solid caret (up/down). */
.sortable-col { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-col .sort-th { display: inline-flex; align-items: center; gap: 0.35rem; }
.sortable-col .sort-ind { font-size: 0.8em; opacity: 0.35; transition: opacity 0.12s ease; }
.sortable-col .sort-ind.active { opacity: 1; color: var(--primary-text, var(--primary)); }
.sortable-col:hover .sort-ind { opacity: 0.7; }
.sortable-col:hover .sort-ind.active { opacity: 1; }
.sortable-col:focus-visible { outline: 2px solid var(--primary-text, var(--primary)); outline-offset: -2px; }
/* Two-line "Modified" cell: date over time, kept on their own lines. */
.product-modified { line-height: 1.25; white-space: nowrap; }


/* Briefly highlight a just-created category row (scroll-to + flash). Uses an
   inset box-shadow fill so it never fights the row background classes. */
@keyframes categoryFlashKf {
  0%, 60% { box-shadow: inset 0 0 0 2000px color-mix(in srgb, var(--primary-text, #6c63ff) 22%, transparent), inset 0 0 0 2px var(--primary-text, var(--primary)); }
  100%    { box-shadow: inset 0 0 0 2000px transparent, inset 0 0 0 2px transparent; }
}
.category-item .category-flash { animation: categoryFlashKf 2.4s ease; border-radius: 6px; }


/* Categories tree: collapse-all hides every nested (sub-)category, leaving only
   the top-level rows. Toggled by the header button in the categories admin. */
[data-categories-list].tree-collapsed .category-item .category-item { display: none; }


/* ════════════════════════════════════════════════════════════════════
   Landing 2026-07 redesign (lp2-*) — sections below the checkout
   spotlight: bento vignettes, feature ticker, free-forever, pricing,
   final CTA. Light mode only for now (dark-mode pass comes later).
   Animations intentionally have NO reduced-motion gating (owner
   decision 2026-07-20 — they must always play).
   ════════════════════════════════════════════════════════════════════ */

.lp2-band,
.lp2-veil,
.lp2-modal {
  --lp2-ink: #1b1526;
  --lp2-muted: #6b6478;
  --lp2-faint: #9a90ac;
  --lp2-soft: #8a819a;
  --lp2-body: #4a4258;
  --lp2-border: #ebe6f3;
  --lp2-border2: #e7e1f1;
  --lp2-tile: #f7f4fc;
  --lp2-tint: #faf8fd;
  --lp2-purple: #7a3bb8;
  --lp2-purple-bg: #f4ecfc;
  --lp2-purple-bg2: #f6f0fd;
  --lp2-dark: #1b1526;
  --lp2-green: #2e9e63;
  --lp2-accent: var(--primary, #9f50df);
  --lp2-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ── Keyframes (from the design concept) ── */
@keyframes lp2Grow { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@keyframes lp2Shimmer { 0% { transform: translateX(-130%); } 60%, 100% { transform: translateX(260%); } }
@keyframes lp2OrderIn {
  0%, 12% { opacity: 0; transform: translateY(12px); }
  22%, 78% { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes lp2CycleHi {
  0%, 13% { background: var(--lp2-langhi-bg, #f1e7fb); color: var(--lp2-langhi-fg, #7a3bb8); }
  19%, 100% { background: transparent; color: var(--lp2-soft, #8a819a); }
}
@keyframes lp2Marq { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes lp2Floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lp2FadeCycle {
  0%, 26% { opacity: 1; transform: translateY(0); }
  33%, 93% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes lp2Blip { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .45; } }
@keyframes lp2CartGroup { 0%, 20% { transform: translateY(40px); } 30%, 100% { transform: translateY(0); } }
@keyframes lp2CartRow1 { 0%, 3% { opacity: 0; transform: translateY(6px); } 9%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes lp2CartRow2 { 0%, 28% { opacity: 0; transform: translateY(6px); } 36%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes lp2CartRow3 { 0%, 48% { opacity: 0; transform: translateY(6px); } 56%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes lp2StampIn {
  0%, 70% { opacity: 0; transform: scale(1.6) rotate(-8deg); }
  78%, 100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

/* ── Bands ──
   Exactly TWO section backgrounds across the whole landing, alternating
   strictly (owner request 2026-07-21): "normal" = the raw page gradient +
   dots (transparent band), "alternate" (--tint) = one translucent milky
   veil. Order: hero N, logos A, storefront N, products A, checkout N,
   dashboard A, worldwide N, sell&grow A, ticker N, free-forever A,
   pricing N, final CTA A. */
.lp2-band { padding: 4.5rem 0; background: transparent; color: var(--lp2-ink); }
.lp2-band--tint { background: rgba(255, 255, 255, .58); }
.lp2-band--ticker { padding: 3rem 0 3.5rem; }

/* Veil variant for sections that live INSIDE the page container (the demo
   spotlights + logo strip): paints the same full-bleed alternate band via
   a pseudo-element so the section's markup/indentation stays untouched. */
.lp2-veil { position: relative; }
.lp2-veil::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
}
.lp2-veil--tint::before { background: rgba(255, 255, 255, .58); }

/* ── Section grid: sticky head + bento ── */
.lp2-grid { display: grid; grid-template-columns: 360px 1fr; gap: 44px; align-items: start; }
.lp2-head { position: sticky; top: calc(var(--navbar-height, 64px) + var(--announcement-bar-h, 0px) + 24px); }
.lp2-grid--flip { grid-template-columns: 1fr 360px; }
.lp2-grid--flip .lp2-head { order: 2; }
/* Fallback values so the pill also works outside .lp2-band/.lp2-veil scopes
   (it's used in the hero too, which defines none of the --lp2-* vars).
   align-self keeps it from stretching inside flex-column parents.
   Fixed height + flex centering + line-height:1 makes every pill exactly the
   same size with the text dead-centered; the 1px top padding optically
   compensates for uppercase glyphs sitting above the em-box center. */
.lp2-eyebrow {
  display: inline-flex; align-items: center; justify-content: center;
  height: 29px; padding: 1px 13px 0; box-sizing: border-box; line-height: 1;
  font-size: 12.5px; font-weight: 700; color: var(--lp2-purple, #7a3bb8);
  letter-spacing: .12em; text-transform: uppercase;
  background: #ecdcf9; border-radius: 999px; align-self: flex-start;
  /* Own composited layer: sections above have fractional heights, so pills
     land on sub-pixel Y offsets — rasterized in-page, edge AA and text
     baseline rounding then differ per pill (pills LOOKED different heights
     with text 1px off-center in some). As a layer, every pill rasterizes in
     its own local (integer) coordinates — identical for all — and Chrome
     pixel-aligns the layer when compositing. */
  transform: translateZ(0);
}
.lp2-title { margin: 14px 0 0; font-size: 36px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; color: var(--lp2-ink); }
.lp2-lead { margin: 14px 0 0; font-size: 15.5px; color: var(--lp2-muted); line-height: 1.5; }

/* Even out the ragged edge on all landing copy (better line breaks, no
   orphan words) — the tasteful alternative to justification; degrades to
   normal wrapping where text-wrap:pretty is unsupported. */
.lp2-lead,
.lp2-card-text,
.lp2-dark-text,
.lp2-strip-text,
.lp2-final-sub,
.lp2-modal-desc,
.lp2-idea-link,
.landing-hero-subtitle,
.landing-spotlight p,
.landing-bullets li,
.landing-demo p { text-wrap: pretty; }

/* ── Bento cards ── */
.lp2-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lp2-card {
  background: #fff; border: 1px solid var(--lp2-border); border-radius: 16px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.lp2-card--wide { grid-column: span 2; }
.lp2-card--dark { background: var(--lp2-dark); border: 0; color: #fff; padding: 22px; }
.lp2-card-title { font-weight: 700; font-size: 15px; color: var(--lp2-ink); }
.lp2-card-text { font-size: 13px; color: var(--lp2-muted); margin-top: 2px; }
.lp2-dark-title { font-weight: 700; font-size: 16px; }
.lp2-dark-text { font-size: 13.5px; color: #a99cc4; margin-top: 4px; }
.lp2-viz {
  background: var(--lp2-tile); border-radius: 11px; height: 100px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lp2-viz-caption { font-size: 12.5px; color: var(--lp2-muted); font-weight: 600; }

/* Wide inline strips ("Also on board", "Speed is SEO") */
.lp2-strip { flex-direction: row; align-items: center; gap: 16px; padding: 18px 20px; }
.lp2-blip { width: 8px; height: 8px; border-radius: 50%; background: var(--lp2-accent); flex: 0 0 auto; animation: lp2Blip 2.4s ease infinite; }
.lp2-strip-strong { font-weight: 700; color: var(--lp2-ink); font-size: 15px; }
.lp2-strip-text { font-size: 13.5px; color: var(--lp2-muted); line-height: 1.5; }

/* ── Dashboard vignettes ── */
.lp2-analytics { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; align-items: center; }
.lp2-analytics-kpi { font-size: 26px; font-weight: 700; margin-top: 6px; }
.lp2-analytics-delta { font-size: 13px; color: #7ee2a8; font-weight: 600; }
.lp2-bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; }
.lp2-bar { flex: 1; border-radius: 5px 5px 2px 2px; transform-origin: bottom; animation: lp2Grow 2.4s ease infinite alternate; }
.lp2-bar:nth-child(1) { height: 44%; background: #4a3a68; animation-delay: -0.2s; }
.lp2-bar:nth-child(2) { height: 62%; background: #5b4880; animation-delay: -0.7s; }
.lp2-bar:nth-child(3) { height: 50%; background: #4a3a68; animation-delay: -1.1s; }
.lp2-bar:nth-child(4) { height: 78%; background: #8355c9; animation-delay: -1.5s; }
.lp2-bar:nth-child(5) { height: 96%; background: var(--lp2-accent); animation-delay: -1.9s; }

.lp2-orders { flex-direction: column; justify-content: center; align-items: stretch; gap: 6px; padding: 0 14px; }
.lp2-order-row {
  display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 600;
  color: var(--lp2-body); background: #fff; border: 1px solid var(--lp2-border2);
  border-radius: 7px; padding: 7px 11px; white-space: nowrap;
}
.lp2-order-row--new { animation: lp2OrderIn 4.5s ease infinite; }
.lp2-order-ok { color: var(--lp2-green); }
.lp2-order-new { color: var(--lp2-purple); }

.lp2-csv { gap: 12px; }
.lp2-csv-file { font-family: var(--lp2-mono); font-size: 12.5px; color: var(--lp2-body); background: #fff; border: 1px solid var(--lp2-border2); border-radius: 8px; padding: 8px 12px; }
.lp2-csv-arrow { color: var(--lp2-purple); font-size: 18px; animation: lp2Floaty 3s ease infinite; }
.lp2-csv-count { font-size: 12.5px; font-weight: 600; color: var(--lp2-body); background: #fff; border: 1px solid var(--lp2-border2); border-radius: 8px; padding: 8px 12px; }

/* ── Worldwide vignettes ── */
.lp2-langs { gap: 6px; flex-wrap: wrap; padding: 0 12px; font-size: 12px; font-weight: 600; }
.lp2-langs span { padding: 4px 9px; border-radius: 7px; color: var(--lp2-soft); animation: lp2CycleHi 6s infinite; }
.lp2-langs span:nth-child(1) { animation-delay: 0s; }
.lp2-langs span:nth-child(2) { animation-delay: -5s; }
.lp2-langs span:nth-child(3) { animation-delay: -4s; }
.lp2-langs span:nth-child(4) { animation-delay: -3s; }
.lp2-langs span:nth-child(5) { animation-delay: -2s; }
.lp2-langs span:nth-child(6) { animation-delay: -1s; }

.lp2-fx { position: relative; }
.lp2-fx span { position: absolute; font-size: 30px; font-weight: 700; color: var(--lp2-ink); animation: lp2FadeCycle 6s infinite; }
.lp2-fx span:nth-child(1) { animation-delay: 0s; }
.lp2-fx span:nth-child(2) { animation-delay: -4s; opacity: 0; }
.lp2-fx span:nth-child(3) { animation-delay: -2s; opacity: 0; }

.lp2-theme-split { border-radius: 11px; height: 100px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--lp2-border); }
/* The tile literally depicts the light theme, so its ink stays dark in BOTH
   page themes (a themed var here made the sun go light-on-light in dark mode). */
.lp2-theme-light { background: #fdfcff; display: grid; place-items: center; font-size: 20px; color: #1b1526; }
.lp2-theme-dark { background: var(--lp2-dark); color: #fff; display: grid; place-items: center; font-size: 20px; }

.lp2-domain-pill {
  background: #fff; border: 1px solid var(--lp2-border2); border-radius: 999px; padding: 9px 16px;
  font-family: var(--lp2-mono); font-size: 13px; color: var(--lp2-body);
  display: flex; align-items: center; gap: 8px;
}
.lp2-domain-lock { width: 8px; height: 10px; border: 1.5px solid var(--lp2-green); border-radius: 3px 3px 2px 2px; display: inline-block; }

.lp2-oss { flex-direction: row; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; padding: 18px 20px; }
.lp2-oss-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; font-size: 11.5px; font-weight: 600; }
.lp2-oss-chips span { background: var(--lp2-tile); border-radius: 7px; padding: 6px 10px; color: var(--lp2-body); }
.lp2-oss-chips .lp2-oss-chip--ok { background: var(--lp2-purple-bg); color: var(--lp2-purple); }

/* ── Sell & grow vignettes ── */
.lp2-cart { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.lp2-cart-stage { position: relative; height: 114px; overflow: hidden; }
.lp2-cart-rows { display: flex; flex-direction: column; gap: 6px; animation: lp2CartGroup 8s ease infinite; }
.lp2-cart-row {
  display: flex; align-items: center; gap: 10px; background: #2a2138; border-radius: 9px;
  padding: 7px 12px; font-size: 12.5px; line-height: 1.3; color: #cfc6e0; white-space: nowrap; min-width: 0;
}
.lp2-cart-row strong { color: #fff; font-weight: 600; }
.lp2-cart-row--1 { animation: lp2CartRow1 8s ease infinite; }
.lp2-cart-row--2 { animation: lp2CartRow2 8s ease infinite; }
.lp2-cart-row--3 { animation: lp2CartRow3 8s ease infinite; }
.lp2-cart-dot { width: 7px; height: 7px; border-radius: 50%; background: #b7abcd; flex: 0 0 auto; }
.lp2-cart-dot--pulse { background: #e3c8fb; animation: lp2Blip 2s ease infinite; }
.lp2-cart-dot--ok { background: #7ee2a8; }
.lp2-cart-code { font-family: var(--lp2-mono); font-size: 11.5px; color: #e9d4fd; border: 1px dashed #a586cf; border-radius: 6px; padding: 1px 8px; }
.lp2-cart-won { color: #7ee2a8; font-weight: 600; }
.lp2-stamp {
  position: absolute; right: 10px; top: 50%; margin-top: -11px;
  border: 2px solid #7ee2a8; color: #7ee2a8; font-weight: 700; font-size: 10.5px;
  letter-spacing: .12em; padding: 3px 8px; border-radius: 7px; animation: lp2StampIn 8s ease infinite;
}

.lp2-cko { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 0 16px; }
.lp2-cko-fields { display: flex; gap: 6px; }
.lp2-cko-fields span { flex: 1; background: #fff; border: 1px solid var(--lp2-border2); border-radius: 7px; padding: 6px 10px; font-size: 11px; color: var(--lp2-soft); white-space: nowrap; overflow: hidden; }
.lp2-cko-pay {
  position: relative; background: var(--lp2-dark); color: #fff; font-weight: 600; font-size: 12.5px;
  padding: 8px; border-radius: 8px; overflow: hidden; text-align: center;
}
.lp2-cko-pay::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  animation: lp2Shimmer 3.2s ease-in-out -1.4s infinite;
}

.lp2-coupon {
  position: relative; overflow: hidden; background: #fff; border: 1.5px dashed #b98ae0;
  border-radius: 10px; padding: 10px 17px; font-family: var(--lp2-mono); font-size: 14px; color: var(--lp2-purple);
}
.lp2-coupon::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(159,80,223,.16), transparent);
  animation: lp2Shimmer 3.2s ease-in-out infinite;
}

.lp2-emails { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 0 14px; }
.lp2-emails > div { background: #fff; border: 1px solid var(--lp2-border2); border-radius: 7px; padding: 7px 11px; font-size: 11.5px; font-weight: 600; color: var(--lp2-body); white-space: nowrap; overflow: hidden; }
.lp2-email-live { color: var(--lp2-green); }
.lp2-email-draft { color: var(--lp2-soft); }

.lp2-banner-viz { padding: 0 14px; }
.lp2-banner-pill {
  background: var(--lp2-accent); color: #fff; border-radius: 9px; padding: 9px 14px;
  font-size: 12px; font-weight: 600; width: 100%; text-align: center; animation: lp2Floaty 4s ease infinite;
}

.lp2-seo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
.lp2-seo-pane { background: var(--lp2-tile); border-radius: 11px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lp2-seo-label { font-size: 10.5px; font-weight: 700; color: var(--lp2-faint); letter-spacing: .08em; text-transform: uppercase; }
.lp2-serp { background: #fff; border: 1px solid var(--lp2-border2); border-radius: 9px; padding: 11px 14px; display: flex; flex-direction: column; gap: 5px; }
.lp2-serp-title { font-size: 12.5px; font-weight: 600; color: var(--lp2-purple); }
.lp2-serp-url { font-size: 10.5px; color: var(--lp2-green); font-family: var(--lp2-mono); }
.lp2-serp-line { height: 4px; border-radius: 2px; background: #efeaf6; width: 85%; }
.lp2-serp-line--short { width: 60%; }
.lp2-seo-ok { font-size: 11px; font-weight: 600; color: var(--lp2-green); font-family: var(--lp2-mono); }
.lp2-seo-item { font-size: 12.5px; font-weight: 600; color: var(--lp2-body); }
.lp2-seo-good { color: var(--lp2-green); }
.lp2-seo-warn { color: #e9b23c; }
.lp2-seo-tip {
  align-self: flex-start; background: var(--lp2-purple-bg); color: var(--lp2-purple);
  border-radius: 7px; padding: 5px 9px; font-size: 11.5px; font-weight: 600; animation: lp2Floaty 4s ease infinite;
}

.lp2-speed { gap: 14px; }
.lp2-speed-gauge {
  width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--lp2-green);
  display: grid; place-items: center; font-weight: 700; font-size: 17px; color: var(--lp2-green); background: #fff;
}

.lp2-mobile { gap: 16px; }
.lp2-phone {
  width: 44px; height: 76px; border: 2px solid #cfc4e2; border-radius: 10px; background: #fff;
  padding: 7px 6px; display: flex; flex-direction: column; gap: 4px; animation: lp2Floaty 4s ease infinite;
}
.lp2-phone-hero { height: 14px; border-radius: 4px; background: var(--lp2-accent); opacity: .85; }
.lp2-phone-line { height: 5px; border-radius: 2px; background: #efeaf6; }
.lp2-phone-line--short { width: 70%; }
.lp2-phone-cta { margin-top: auto; height: 9px; border-radius: 4px; background: var(--lp2-dark); }

/* ── Feature ticker ── */
.lp2-ticker-caption { text-align: center; font-family: var(--lp2-mono); font-size: 12.5px; color: var(--lp2-faint); margin-bottom: 18px; }
.lp2-ticker-caption--bottom { margin: 18px 0 0; }
.lp2-ticker { overflow: hidden; }
.lp2-ticker + .lp2-ticker { margin-top: 12px; }
.lp2-ticker-row { display: flex; gap: 12px; width: max-content; animation: lp2Marq 32s linear infinite; }
.lp2-ticker-row--reverse { animation: lp2Marq 40s linear infinite reverse; }
.lp2-ticker:hover .lp2-ticker-row { animation-play-state: paused; }
.lp2-chip {
  background: var(--lp2-tile); border-radius: 12px; padding: 11px 17px;
  font-size: 13.5px; font-weight: 600; color: var(--lp2-body); white-space: nowrap;
}
.lp2-chip--purple { background: var(--lp2-purple-bg2); color: var(--lp2-purple); }
.lp2-chip--dark { background: var(--lp2-dark); color: #fff; }
.lp2-chip--soon { background: transparent; border: 1.5px dashed #cbb8e6; color: var(--lp2-purple); }
.lp2-soon-badge {
  background: var(--lp2-purple); color: #fff; font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; letter-spacing: .08em; margin-right: 9px;
  vertical-align: 1px; text-transform: uppercase;
}
.lp2-idea-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--lp2-mono); font-size: 12.5px; color: var(--lp2-purple);
  text-decoration: underline; text-underline-offset: 3px;
}
.lp2-idea-link:hover, .lp2-idea-link:focus { color: #5c2b8d; }
.lp2-demo-wrap { margin-top: 3rem; }
/* The demo-shop box uses the same veil shade as the alternate bands
   (matches the "Free forever" section right below it) and the same border
   color as the lp2 cards (var(--border) looked off next to them). */
.lp2-demo-wrap .landing-demo { background: rgba(255, 255, 255, .58); border-color: var(--lp2-border); }

/* ── Free forever ── */
.lp2-free-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.lp2-free-price { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.lp2-free-per { font-size: 15px; color: #a99cc4; font-weight: 600; letter-spacing: 0; }
.lp2-free-checks { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.lp2-check { color: #7ee2a8; }
.lp2-upgrade { height: 88px; gap: 12px; font-weight: 700; font-size: 16px; color: var(--lp2-ink); }
.lp2-upgrade-from { background: #fff; border: 1px solid var(--lp2-border2); border-radius: 9px; padding: 8px 13px; }
.lp2-upgrade-arrow { color: var(--lp2-purple); animation: lp2Floaty 3s ease infinite; }
.lp2-upgrade-to { background: var(--lp2-accent); color: #fff; border-radius: 9px; padding: 8px 13px; }
.lp2-swap { height: 88px; gap: 12px; font-weight: 600; font-size: 13px; color: var(--lp2-body); }
.lp2-swap-pill { background: #fff; border: 1px solid var(--lp2-border2); border-radius: 999px; padding: 8px 14px; }
.lp2-swap-arrows { color: var(--lp2-purple); font-size: 17px; }

/* ── Pricing ── */
.lp2-band--pricing .lp2-pricing-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
#plans { scroll-margin-top: calc(var(--navbar-height, 64px) + var(--announcement-bar-h, 0px) + 16px); }
/* overflow: clip (NOT hidden) rounds the bottom corners over the tinted Pro
   column while keeping the sticky header working — clip does not create a
   scroll container, hidden would. */
.lp2-pt { background: #fff; border: 1px solid var(--lp2-border); border-radius: 18px; overflow: clip; }
/* Sticky offset: the navbar's real rendered height is ~6px less than the
   --navbar-height var (measured 58 vs 64 on 2026-07-21), so tuck the header
   7px higher — otherwise rows peek through the gap while scrolling. The
   sticky lives on the WRAP (outside the mobile horizontal scroller) so it
   works against the page on every viewport; the head inside is translated
   with the body's scrollLeft by JS. */
.lp2-pt-headwrap {
  position: sticky; top: calc(var(--navbar-height, 64px) + var(--announcement-bar-h, 0px) - 7px); z-index: 5;
  background: #fff; border-bottom: 1px solid var(--lp2-border); overflow: clip;
}
/* Left-only row padding: the left inset disappears into the feature column's
   text, but a right inset would sit visibly AFTER the Max column and make it
   read wider than the other tiers — so the last track ends flush. */
.lp2-pt-head {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 0 0 0 20px;
  background: #fff; will-change: transform;
}
.lp2-pt-toggle-save.lp2-pt-toggle-save--short { display: none; }
.lp2-cta-short { display: none; }
/* Zero-lag header sync while the body scrolls horizontally on mobile:
   a scroll-driven animation runs on the compositor, so the head moves in
   the SAME frame as the table (the JS scroll listener stays as fallback
   for browsers without animation-timeline; JS sets --lp2-pt-maxscroll). */
@supports (animation-timeline: scroll()) {
  .lp2-pt { timeline-scope: --lp2ptx; }
  .lp2-pt-body { scroll-timeline-name: --lp2ptx; scroll-timeline-axis: x; }
  .lp2-pt-head { animation: lp2HeadSync linear both; animation-timeline: --lp2ptx; }
}
@keyframes lp2HeadSync {
  from { transform: translateX(0); }
  to { transform: translateX(calc(0px - var(--lp2-pt-maxscroll, 0px))); }
}
.lp2-pt-corner { padding: 16px 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lp2-pt-toggle { display: inline-flex; align-items: center; background: #f4f1f9; border-radius: 999px; padding: 3px; gap: 2px; }
.lp2-pt-toggle-btn {
  border: 0; background: transparent; border-radius: 999px; padding: 6px 13px;
  font-size: 12px; font-weight: 600; color: var(--lp2-muted); cursor: pointer; white-space: nowrap;
}
.lp2-pt-toggle-btn.is-active { background: #fff; box-shadow: 0 1px 3px rgba(27,21,38,.12); font-weight: 700; color: var(--lp2-ink); }
.lp2-pt-toggle-save {
  color: #fff; font-weight: 700; font-size: 10px;
  background: #2e9e63; padding: 2px 7px; border-radius: 999px;
  display: inline-block; line-height: 1.4; vertical-align: middle;
  margin-left: 4px;
}
/* The badge's gap to the button's right edge matches its top/bottom gap
   (the button's vertical padding) instead of the full text padding. */
.lp2-pt-toggle-btn:has(.lp2-pt-toggle-save) { padding-right: 6px; }
.lp2-pt-corner-label { font-weight: 700; font-size: 16px; color: var(--lp2-ink); }
.lp2-pt-plan { padding: 16px 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.lp2-pt-plan--pro { background: #f9f4fe; padding-top: 12px; }
.lp2-pt-popular {
  background: var(--lp2-accent); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; letter-spacing: .05em; text-transform: uppercase;
}
.lp2-pt-plan-name { font-weight: 700; font-size: 17.5px; line-height: 1.2; color: var(--lp2-ink); }
.lp2-pt-price { font-size: 24px; line-height: 1.15; font-weight: 700; color: var(--lp2-ink); }
.lp2-pt-per { font-size: 12px; color: var(--lp2-faint); font-weight: 600; }
.lp2-pt-note { font-size: 10.5px; line-height: 1.25; color: var(--lp2-faint); font-weight: 600; min-height: 14px; text-align: center; }
.lp2-pt[data-mode="yearly"] .lp2-var--m { display: none; }
.lp2-pt[data-mode="monthly"] .lp2-var--y { display: none; }
.lp2-pt-cta {
  font-weight: 600; font-size: 12.5px; padding: 8px 16px; border-radius: 9px; margin-top: 5px;
  text-decoration: none; transition: filter .15s ease, background .15s ease;
}
.lp2-pt-cta--ghost { border: 1px solid #e0daea; color: var(--lp2-body); }
.lp2-pt-cta--ghost:hover { background: var(--lp2-tile); color: var(--lp2-ink); }
.lp2-pt-cta--accent { background: var(--lp2-accent); color: #fff; }
.lp2-pt-cta--dark { background: var(--lp2-dark); color: #fff; }
.lp2-pt-cta--accent:hover, .lp2-pt-cta--dark:hover { filter: brightness(1.12); color: #fff; }
.lp2-pt-group { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 0 0 0 20px; }
.lp2-pt-group-name { padding: 20px 8px 8px; font-size: 11px; font-weight: 700; color: var(--lp2-faint); letter-spacing: .1em; text-transform: uppercase; }
.lp2-pt-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 0 0 0 20px;
  border-top: 1px solid #f5f2f9; font-size: 13.5px; align-items: stretch;
}
.lp2-pt-feature { padding: 11px 8px; font-weight: 600; color: var(--lp2-ink); }
.lp2-pt-cell { padding: 11px 8px; text-align: center; color: var(--lp2-body); font-weight: 600; }
.lp2-pt-c--pro { background: #f9f4fe; }
.lp2-pt-unlimited { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 4rem; flex-wrap: wrap; }
.lp2-pt-unlimited-q { font-size: 15.5px; font-weight: 600; color: var(--lp2-body); }
.lp2-pt-unlimited-btn {
  border: 1px solid #cbb8e6; color: var(--lp2-purple); font-weight: 600; font-size: 14px;
  padding: 10px 20px; border-radius: 10px; text-decoration: none;
  background: none; cursor: pointer; font-family: inherit;
}
.lp2-contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lp2-contact-email { margin-bottom: 10px; }
.lp2-pt-unlimited-btn:hover { background: var(--lp2-purple-bg2); color: var(--lp2-purple); }
.lp2-pt-fineprint { text-align: center; margin-top: 14px; font-family: var(--lp2-mono); font-size: 11.5px; color: var(--lp2-faint); }

/* ── Final CTA ──
   Just another alternate band (bg comes from .lp2-band--tint) with
   centered content. */
.lp2-final { padding: 56px 0; text-align: center; }
.lp2-final-title { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--lp2-ink); }
.lp2-final-sub { margin: 14px 0 0; color: var(--lp2-muted); font-size: 15.5px; }
/* Only positioning — look/animation comes from .landing-btn-primary. */
.lp2-final-cta { margin-top: 18px; }

/* ── Platform contact inbox (/admin/emails, superadmin) ── */
.pce-row { display: flex; justify-content: space-between; gap: 16px; text-decoration: none; color: inherit; }
.pce-row-main { min-width: 0; }
.pce-row-top { display: flex; align-items: center; gap: 8px; }
.pce-row-email { font-weight: 600; font-size: 14px; }
.pce-row-subject { font-size: 13.5px; margin-top: 2px; }
.pce-row-preview { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 640px; }
.pce-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.pce-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.pce-chip--due { background: rgba(159, 80, 223, .14); color: var(--primary-text, var(--primary)); }
.pce-chip--closed { background: var(--hover); color: var(--muted); }
.pce-back { color: var(--muted); text-decoration: none; }
.pce-back:hover { color: var(--fg); }
.pce-thread { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.pce-msg { border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; background: var(--card); }
.pce-msg--outbound { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--card)); margin-left: 40px; }
.pce-msg--inbound { margin-right: 40px; }
.pce-msg-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pce-msg-body { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.pce-replybox { max-width: 760px; margin-top: 20px; }

/* ── Suggest-a-feature popup ── */
.lp2-modal {
  position: fixed; inset: 0; z-index: 5000; background: rgba(27,21,38,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lp2-modal.d-none { display: none; }
.lp2-modal-inner {
  background: #fff; border-radius: 16px; width: 100%; max-width: 480px;
  box-shadow: 0 24px 64px rgba(27,21,38,.28); overflow: hidden;
}
.lp2-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--lp2-border); color: var(--lp2-ink);
}
.lp2-modal-header .fa-lightbulb { color: var(--lp2-accent); }
.lp2-modal-close {
  border: 0; background: none; font-size: 24px; line-height: 1; color: var(--lp2-faint);
  cursor: pointer; padding: 0 2px;
}
.lp2-modal-close:hover { color: var(--lp2-ink); }
.lp2-modal-body { padding: 18px 20px 20px; }
.lp2-modal-desc { font-size: 13.5px; color: var(--lp2-muted); margin: 0 0 12px; }
/* Links in the modal copy (the mailto address) read in the text's own color,
   just underlined — the default link blue is barely readable on the dark modal. */
.lp2-modal-desc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lp2-modal-desc a:hover { color: var(--lp2-ink); }
.lp2-modal-success { background: #e8f7ee; color: #1c7a47; border-radius: 9px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; }
.lp2-modal-error { color: #b3261e; font-size: 13px; margin-top: 8px; }
.lp2-modal-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.lp2-modal-submit {
  border: 0; background: var(--lp2-accent); color: #fff; font-weight: 600; font-size: 13.5px;
  padding: 9px 18px; border-radius: 9px; cursor: pointer; transition: filter .15s ease;
}
.lp2-modal-submit:hover { filter: brightness(1.12); }
.lp2-modal-submit:disabled { opacity: .6; cursor: default; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .lp2-band { padding: 3rem 0; }
  .lp2-grid, .lp2-grid--flip { grid-template-columns: 1fr; gap: 28px; }
  .lp2-head { position: static; }
  .lp2-grid--flip .lp2-head { order: 0; }
  .lp2-title { font-size: 28px; }

  /* Pricing table, compact: fixed narrow columns so the feature column and
     the Free tier fit a phone viewport together; the body scrolls
     horizontally for Pro/Max while the headwrap stays page-sticky. */
  .lp2-pt-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lp2-pt-rows { min-width: 565px; }
  .lp2-pt-head { min-width: 565px; }
  /* minmax: columns hit their minimums on phones (scroll for the rest) but
     grow to fill the row on wider viewports — no dead slack after Max. */
  .lp2-pt-head, .lp2-pt-group, .lp2-pt-row { grid-template-columns: minmax(175px, 1.4fr) repeat(3, minmax(126px, 1fr)); padding: 0 0 0 12px; }
  .lp2-pt-toggle-save.lp2-pt-toggle-save--full { display: none; }
  .lp2-pt-toggle-save.lp2-pt-toggle-save--short { display: inline-block; }
  .lp2-pt-toggle-btn { padding: 5px 9px; font-size: 11px; }
  .lp2-pt-toggle-btn:has(.lp2-pt-toggle-save) { padding-right: 5px; }
  .lp2-pt-corner { padding: 12px 6px; }
  .lp2-pt-corner-label { font-size: 14px; }
  .lp2-pt-plan { padding: 12px 6px; }
  .lp2-pt-plan-name { font-size: 15px; }
  .lp2-pt-price { font-size: 20px; }
  .lp2-pt-note { font-size: 9.5px; }
  .lp2-pt-cta { padding: 6px 10px; font-size: 11.5px; }
  .lp2-pt-row { font-size: 12.5px; }
  .lp2-pt-feature { padding: 9px 6px; }
  .lp2-pt-cell { padding: 9px 6px; }
  .lp2-pt-group-name { padding: 16px 6px 6px; font-size: 10px; }
}
@media (max-width: 767.98px) {
  /* Full-bleed pricing table: no side gaps on phones. */
  .lp2-pt {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}
@media (max-width: 576px) {
  /* Hero copy is centered on phones — center its eyebrow pill too. */
  .landing-hero-copy .lp2-eyebrow { align-self: center; }
  /* No Shopiza S badge in the footer on phones. */
  footer .az-brand-badge { display: none; }
  /* Center all section texts (and their pills) on phones. The bullet lists
     center as a block but keep their own text left-aligned. */
  .lp2-head { text-align: center; }
  .landing-spotlight [class*="col-lg-5"] { text-align: center; }
  .landing-spotlight .landing-bullets { display: inline-block; text-align: left; }
  /* Wider side gutters for the TEXT parts only (heads, spotlight copy,
     lists, ticker captions) — boxes/vignettes/demos keep their size. */
  .lp2-head,
  .lp2-pricing-head,
  .landing-spotlight [class*="col-lg-5"] { padding-left: 28px; padding-right: 28px; }
  .lp2-ticker-caption { padding: 0 28px; }
  /* Pricing Free CTA: short label so the button stays one line. */
  .lp2-pt .lp2-cta-full { display: none; }
  .lp2-pt .lp2-cta-short { display: inline; }
  .lp2-pt-cta { white-space: nowrap; }
  /* Demo-shop box: centered contents on phones. */
  .lp2-demo-wrap .landing-demo { align-items: center; text-align: center; }
}
@media (max-width: 575.98px) {
  .lp2-bento { grid-template-columns: 1fr; }
  .lp2-card--wide { grid-column: auto; }
  .lp2-analytics, .lp2-cart, .lp2-oss, .lp2-free-hero, .lp2-seo { grid-template-columns: 1fr; }
  .lp2-oss-chips { justify-content: flex-start; }
  .lp2-title { font-size: 24px; }
  .lp2-final-title { font-size: 28px; }
  .lp2-strip { flex-direction: row; }
}

/* The final dark CTA band sits flush on the footer border: on the landing,
   kill main's bottom margin (my-4) and the footer's top margin (mt-5) so no
   page-background strip shows between the band and the footer. */
body.is-landing-page main.container { margin-bottom: 0 !important; }
body.is-landing-page footer { margin-top: 0 !important; }

/* ── lp2 dark mode ──
   The palette flips via the --lp2-* vars; below that, only the hardcoded
   light backgrounds (white cards/panels, pills, chips, pricing surfaces,
   modal) get explicit dark values. Band veils stay translucent so the dark
   gradient + dot pattern show through, same as light mode. */
[data-theme="dark"] .lp2-band,
[data-theme="dark"] .lp2-veil,
[data-theme="dark"] .lp2-modal {
  --lp2-ink: #efeaf8;
  --lp2-muted: #a79dbd;
  --lp2-faint: #837a99;
  --lp2-soft: #948aa8;
  --lp2-body: #d4cbe6;
  --lp2-border: rgba(255, 255, 255, .09);
  --lp2-border2: rgba(255, 255, 255, .13);
  --lp2-tile: rgba(255, 255, 255, .05);
  --lp2-purple: #cfa9f2;
  --lp2-purple-bg: rgba(159, 80, 223, .20);
  --lp2-purple-bg2: rgba(159, 80, 223, .15);
  --lp2-green: #5fd598;
  --lp2-langhi-bg: rgba(159, 80, 223, .28);
  --lp2-langhi-fg: #e3ccfa;
}
/* Two-shade alternation in dark: normal = raw dark gradient (transparent),
   alternate = one darker veil. */
[data-theme="dark"] .lp2-band { background: transparent; }
[data-theme="dark"] .lp2-band--tint { background: rgba(8, 5, 18, .42); }
[data-theme="dark"] .lp2-veil--tint::before { background: rgba(8, 5, 18, .42); }

/* Cards & panels */
[data-theme="dark"] .lp2-card { background: rgba(24, 17, 40, .85); }
[data-theme="dark"] .lp2-card--dark { background: #221a38; }
[data-theme="dark"] .lp2-order-row,
[data-theme="dark"] .lp2-csv-file,
[data-theme="dark"] .lp2-csv-count,
[data-theme="dark"] .lp2-cko-fields span,
[data-theme="dark"] .lp2-emails > div,
[data-theme="dark"] .lp2-serp,
[data-theme="dark"] .lp2-domain-pill,
[data-theme="dark"] .lp2-upgrade-from,
[data-theme="dark"] .lp2-swap-pill,
[data-theme="dark"] .lp2-speed-gauge,
[data-theme="dark"] .lp2-coupon { background: #241b3d; }
[data-theme="dark"] .lp2-coupon { border-color: rgba(185, 138, 224, .55); }
[data-theme="dark"] .lp2-cko-pay { background: #0c0716; border: 1px solid rgba(255, 255, 255, .14); }
[data-theme="dark"] .lp2-serp-line { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .lp2-phone { background: #241b3d; border-color: rgba(207, 196, 226, .35); }
[data-theme="dark"] .lp2-phone-line { background: rgba(255, 255, 255, .14); }
[data-theme="dark"] .lp2-phone-cta { background: rgba(255, 255, 255, .28); }

/* Eyebrow pills */
[data-theme="dark"] .lp2-eyebrow { background: rgba(159, 80, 223, .24); color: #d9bdf7; }

/* Ticker */
[data-theme="dark"] .lp2-chip--dark { background: #efe9f8; color: #1b1526; }
[data-theme="dark"] .lp2-chip--soon { border-color: rgba(176, 124, 232, .45); }
[data-theme="dark"] .lp2-soon-badge { background: #8d55c8; color: #fff; }

/* Demo-shop box matches the dark alternate band */
[data-theme="dark"] .lp2-demo-wrap .landing-demo { background: rgba(8, 5, 18, .42); }

/* Pricing table */
[data-theme="dark"] .lp2-pt { background: rgba(23, 16, 38, .92); }
[data-theme="dark"] .lp2-pt-headwrap,
[data-theme="dark"] .lp2-pt-head { background: #191129; }
[data-theme="dark"] .lp2-pt-plan--pro,
[data-theme="dark"] .lp2-pt-c--pro { background: rgba(159, 80, 223, .10); }
[data-theme="dark"] .lp2-pt-toggle { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .lp2-pt-toggle-btn.is-active { background: #55447a; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); color: #fff; }
[data-theme="dark"] .lp2-pt-row { border-top-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .lp2-pt-cta--ghost { border-color: rgba(255, 255, 255, .18); }
[data-theme="dark"] .lp2-pt-cta--dark { background: #efe9f8; color: #1b1526; }
[data-theme="dark"] .lp2-pt-cta--dark:hover { color: #1b1526; filter: brightness(.94); }
[data-theme="dark"] .lp2-pt-unlimited-btn { border-color: rgba(176, 124, 232, .40); }

/* Suggest popup */
[data-theme="dark"] .lp2-modal { background: rgba(0, 0, 0, .65); }
[data-theme="dark"] .lp2-modal-inner { background: #1e1631; }
[data-theme="dark"] .lp2-modal-success { background: rgba(46, 158, 99, .16); color: #7ee2a8; }
[data-theme="dark"] .lp2-modal-error { color: #f3a49e; }