/* Eyezone component library styles (Agent.md 10.5, 10.6). Logical properties only (RTL). */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--surface-elevated);
  --btn-color: var(--text);
  --btn-border: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.btn:hover { color: var(--btn-color); border-color: var(--border-glow); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  --btn-bg: var(--gradient-primary);
  --btn-color: var(--on-primary);
  --btn-border: transparent;
  background: var(--gradient-primary);
}
.btn-primary:hover { box-shadow: var(--glow-primary); border-color: transparent; }

.btn-secondary {
  --btn-bg: var(--secondary);
  --btn-color: var(--on-secondary);
  --btn-border: transparent;
}
.btn-secondary:hover { box-shadow: var(--glow-secondary); border-color: transparent; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-border: var(--border);
}
.btn-ghost:hover { background: var(--primary-soft); }

.btn-danger {
  --btn-bg: var(--danger-soft);
  --btn-color: var(--danger);
  --btn-border: rgba(255, 92, 122, 0.4);
}
.btn-danger:hover { border-color: var(--danger); }

.btn-link {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-color: var(--primary-text);
  padding-inline: var(--space-2);
  min-height: auto;
}
.btn-link:hover { color: var(--secondary); border-color: transparent; }

.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-lg { min-height: 52px; padding: var(--space-3) var(--space-6); font-size: var(--fs-lg); }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 0; width: 44px; min-width: 44px; }
.btn-icon.btn-sm { width: 36px; min-width: 36px; }

.btn .spinner { width: 18px; height: 18px; border-width: 2px; }
.btn.is-loading { pointer-events: none; opacity: 0.85; }

/* ---------- Icons ---------- */
.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 48px; height: 48px; }
/* Arrows and chevrons point the other way in RTL (Agent.md 10.7). */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-4); }
.field-label { font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.field-label .required { color: var(--danger); margin-inline-start: var(--space-1); }
.field-help { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--text);
  font-size: var(--fs-md); /* 16px prevents iOS zoom */
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--secondary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.input[disabled], .select[disabled], .textarea[disabled] { opacity: 0.55; cursor: not-allowed; }
.textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.input-ltr { direction: ltr; text-align: end; }
.select {
  appearance: none;
  /* A drawn chevron in --muted; the old two-gradient arrow rendered as broken, clipped triangles. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B2D0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: left 14px center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  /* The arrow sits on the left, which is the inline end in RTL. */
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-7);
}

/* Blazor validation classes */
.input.invalid, .select.invalid, .textarea.invalid,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.validation-message, .field-error { color: var(--danger); font-size: var(--fs-sm); margin: 0; }
.validation-errors {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(255, 92, 122, 0.4);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  list-style-position: inside;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: 44px;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  margin: 0;
}

.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  width: 44px; height: 24px; border-radius: var(--radius-pill);
  background: var(--surface-elevated); border: 1px solid var(--border-strong);
  position: relative; transition: background-color var(--duration-base) var(--ease);
}
.switch-track::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--muted);
  transition: transform var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease);
}
.switch input:checked + .switch-track { background: var(--primary); border-color: transparent; }
.switch input:checked + .switch-track::after { background: #fff; transform: translateX(-20px); }
[dir="ltr"] .switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--focus-ring); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card-elevated { background: var(--surface-elevated); }
.card-glow:hover { box-shadow: var(--glow-primary); border-color: var(--border-glow); }
.card-title { font-size: var(--fs-lg); font-weight: 800; margin-block-end: var(--space-2); }
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.card-header h2, .card-header h3 { margin: 0; }

.stat-card { display: flex; flex-direction: column; gap: var(--space-1); }
.stat-card .stat-label { color: var(--muted); font-size: var(--fs-sm); }
.stat-card .stat-value { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.1; }
.stat-card .badge { align-self: flex-start; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.8;
  border: 1px solid transparent;
  background: var(--surface-elevated); color: var(--muted);
  white-space: nowrap;
}
.badge-primary { background: var(--primary-soft); color: var(--primary-text); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.badge-info { background: var(--info-soft); color: var(--secondary); border-color: rgba(36, 200, 255, 0.35); }
.badge-success { background: var(--success-soft); color: var(--success); border-color: rgba(46, 229, 157, 0.35); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(255, 181, 71, 0.35); }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(255, 92, 122, 0.35); }

/* ---------- Alerts ---------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  margin-block-end: var(--space-4);
}
.alert .icon { margin-block-start: 3px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 800; margin: 0; }
.alert p { margin: 0; }
.alert-info { background: var(--info-soft); border-color: rgba(36, 200, 255, 0.35); }
.alert-info .icon { color: var(--secondary); }
.alert-success { background: var(--success-soft); border-color: rgba(46, 229, 157, 0.35); }
.alert-success .icon { color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: rgba(255, 181, 71, 0.35); }
.alert-warning .icon { color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: rgba(255, 92, 122, 0.35); }
.alert-danger .icon { color: var(--danger); }
.alert-close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; min-width: 32px; min-height: 32px; }

/* ---------- Tables ---------- */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; border-block-end: 1px solid var(--border); vertical-align: middle; }
.table th { color: var(--muted); font-weight: 700; background: var(--surface-elevated); white-space: nowrap; }
.table tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.table tbody tr:last-child td { border-block-end: 0; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  /* Tables become cards on phones (Agent.md 10.8). */
  .table-responsive thead { display: none; }
  .table-responsive, .table-responsive tbody, .table-responsive tr, .table-responsive td { display: block; width: 100%; }
  .table-responsive tr { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border); }
  .table-responsive td { border: 0; padding: var(--space-1) 0; display: flex; justify-content: space-between; gap: var(--space-3); }
  .table-responsive td::before { content: attr(data-label); color: var(--muted); font-weight: 700; }
}

/* ---------- Pager ---------- */
.pager { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: center; margin-block: var(--space-5); padding: 0; list-style: none; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); border: 1px solid var(--border);
  color: var(--text); background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--border-glow); color: var(--text); }
.pager .is-current { background: var(--gradient-primary); color: var(--on-primary); border-color: transparent; font-weight: 800; }
.pager .is-disabled { opacity: 0.45; }

/* ---------- Tabs ---------- */
.tabs-list { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--border); overflow-x: auto; margin-block-end: var(--space-5); scrollbar-width: none; }
.tabs-list::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: 0; cursor: pointer;
  padding: var(--space-3) var(--space-4); min-height: 44px;
  color: var(--muted); font-weight: 700; white-space: nowrap;
  border-block-end: 2px solid transparent; margin-block-end: -1px;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-block-end-color: var(--secondary); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: var(--overlay);
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--space-4);
}
@media (min-width: 768px) { .modal-backdrop { align-items: center; } }
.modal {
  width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.modal-header h2 { margin: 0; font-size: var(--fs-xl); }
.modal-footer { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-block-start: var(--space-5); }
.modal-inline { position: static; background: transparent; padding: 0; }

/* ---------- Toasts ---------- */
.toast-region {
  position: fixed; z-index: 70;
  inset-block-end: var(--space-4); inset-inline-start: var(--space-4); inset-inline-end: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: center;
  pointer-events: none;
}
@media (min-width: 768px) { .toast-region { inset-inline-end: auto; align-items: flex-start; } }
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 260px; max-width: 420px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}
.toast-success { border-color: rgba(46, 229, 157, 0.5); }
.toast-success .icon { color: var(--success); }
.toast-danger { border-color: rgba(255, 92, 122, 0.5); }
.toast-danger .icon { color: var(--danger); }
.toast-info .icon { color: var(--secondary); }

/* ---------- Empty, loading, error states ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  color: var(--muted);
}
.empty-state .empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-text);
}
.empty-state h3 { color: var(--text); margin: 0; }
.empty-state p { margin: 0; max-width: 420px; }

.spinner {
  display: inline-block; width: 28px; height: 28px;
  border: 3px solid var(--border-strong); border-block-start-color: var(--secondary);
  border-radius: 50%;
  animation: ez-spin 0.8s linear infinite;
}
@keyframes ez-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.skeleton {
  display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-elevated) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: ez-shimmer 1.4s ease-in-out infinite;
  height: 14px; margin-block-end: var(--space-2);
}
.skeleton-lg { height: 160px; border-radius: var(--radius-lg); }
@keyframes ez-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

.page-loading { display: grid; place-items: center; min-height: 40vh; }

/* ---------- Page header ---------- */
.page-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-block-end: var(--space-5);
}
.page-header h1 { margin: 0; font-size: var(--fs-2xl); }
.page-header .page-subtitle { color: var(--muted); margin: var(--space-1) 0 0; }

/* ---------- Swatches (design system page) ---------- */
.swatch { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.swatch-color { height: 64px; }
.swatch-meta { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }
.swatch-meta strong, .swatch-meta code { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.swatch-meta code { color: var(--muted); }

/* ---------- Image uploader (admin) ---------- */
.uploader-preview { margin: 0; display: flex; align-items: center; gap: var(--space-3); }
.uploader-preview img {
  /* Takes the picture's own shape, so a tall picture is not shown as a thin strip in a wide box. */
  width: auto; height: auto; max-width: 220px; max-height: 160px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0;
}
.uploader-preview figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); min-width: 0; }
.uploader-preview figcaption bdi { overflow-wrap: anywhere; }
.uploader-empty {
  display: flex; align-items: center; gap: var(--space-3);
  width: 160px; height: 120px; justify-content: center; flex-direction: column;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--muted);
  font-size: var(--fs-xs);
}
.uploader label.btn { cursor: pointer; }

/* ---------- Admin editor rows ---------- */
.row-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); margin-block-end: var(--space-3);
}
.row-card.is-hidden { opacity: 0.6; border-style: dashed; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 700; margin: 0; }
.row-sub { color: var(--muted); font-size: var(--fs-sm); margin: 0; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.row-order { display: flex; flex-direction: column; gap: 2px; }
.row-order .btn { min-height: 28px; width: 32px; min-width: 32px; padding: 0; }
@media (max-width: 599px) {
  .row-card { flex-wrap: wrap; }
  .row-main { flex-basis: 100%; }
}

/* The categories inside the home section «التصنيفات الرئيسية». */
.home-cats { margin-block: var(--space-4); }
.home-cats-thumb {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm);
  display: grid; place-items: center; background: var(--surface-2, var(--bg)); color: var(--primary);
}
.home-cats-others { margin-block: var(--space-5) var(--space-2); }
@media (max-width: 599px) {
  /* On a phone: the name across the top, the arrows and the switch with the edit button on one line under it. */
  .home-cats .row-card {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "main main" "order actions";
    gap: var(--space-2); padding: var(--space-2) var(--space-3);
  }
  .home-cats .row-main { grid-area: main; }
  .home-cats .row-order { grid-area: order; flex-direction: row; }
  .home-cats .row-actions { grid-area: actions; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
  .home-cats-thumb { display: none; }
}

/* ---------- Markdown output ---------- */
.prose { line-height: var(--lh-body); }
.prose h2 { font-size: var(--fs-xl); margin-block-start: var(--space-6); }
.prose h3 { font-size: var(--fs-lg); margin-block-start: var(--space-5); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); margin-block-end: var(--space-4); }
.prose li { margin-block-end: var(--space-2); }
.prose blockquote {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--warning); background: var(--warning-soft);
  color: var(--text); border-radius: var(--radius-sm);
}
.prose blockquote p:last-child { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin-block-end: var(--space-4); }
.prose th, .prose td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: start; }
.prose a { text-decoration: underline; }

@media (max-width: 599px) {
  /* On phones the reorder arrows sit side by side so the card stays compact. */
  .row-order { flex-direction: row; }
  .row-card { gap: var(--space-2); }
  .row-actions { flex-basis: 100%; justify-content: flex-end; }
}

/* ---------- Catalog & Products (Phase 3) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  /* Smaller cards, more in a row (owner, 2026-10-28: «الكروت المنتجات كلها كبيرة»). */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: var(--space-4);
  }
}

/* The grid card is the same reel card as the home rows; this wrapper only fills its grid cell. */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.product-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--duration-base) var(--ease);
}
.product-card:hover .product-card-image img {
  transform: scale(1.04);
}
.product-card-placeholder {
  color: var(--muted);
  opacity: 0.4;
}
.product-card-badges {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 2;
}
.product-card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card-brand {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 700;
  margin-block-end: 2px;
}
.product-card-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
}
.product-card-price {
  margin-block-start: auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-block-end: 0;
}
.price-now {
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--primary-bright);
}
.price-was {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* The home page's main sections: small cards with the name only, easy to scan and tap (owner's request,
   2026-10-30: «الاقسام الرئيسية تصبح فقط كلمات وكروت جدا صغيرة لسهولة التصفح والاختيار»). */
.category-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block: var(--space-3);
}
@media (min-width: 768px) {
  .category-chips { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
}
.category-chip {
  --tone-a: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--tone-a) 30%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tone-a) 8%, var(--surface));
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}
.category-chip.tone-1 { --tone-a: var(--primary); }
.category-chip.tone-2 { --tone-a: var(--accent); }
.category-chip.tone-3 { --tone-a: var(--secondary); }
.category-chip.tone-4 { --tone-a: var(--warning); }
.category-chip:hover, .category-chip:focus-visible {
  color: var(--text);
  border-color: var(--tone-a);
  background: color-mix(in srgb, var(--tone-a) 16%, var(--surface));
}

.chip-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.chip:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* Breadcrumbs */
.breadcrumbs {
  margin-block-end: var(--space-4);
}
.breadcrumbs ol {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  flex-wrap: wrap;
}
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--space-2);
  opacity: 0.5;
}
.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--text);
}
.breadcrumbs li[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}

/* Catalog Toolbar */
.catalog-toolbar {
  margin-block-end: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.toolbar-count {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.toolbar-field {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.toolbar-field .select {
  min-height: 36px;
  padding-block: var(--space-1);
}
.toolbar-filters {
  margin-block-start: var(--space-3);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-3);
}
.toolbar-filter-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-block: var(--space-3);
}

/* Product Details Layout */
.product-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
/* A long row (lens version cards, prices) shrinks inside the column instead of widening the page on a phone. */
.product-layout > * { min-width: 0; }
@media (min-width: 1024px) {
  .product-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.product-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-badge-overlay {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  font-size: var(--fs-md);
  padding: var(--space-2) var(--space-4);
}
.product-thumbnails {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
}
.thumbnail-btn {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: #000;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease);
}
.thumbnail-btn:hover, .thumbnail-btn.is-active {
  border-color: var(--primary);
}
.thumbnail-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  display: flex;
  flex-direction: column;
}
.product-brand {
  font-size: var(--fs-md);
  color: var(--secondary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 var(--space-1);
}
.product-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  margin: 0 0 var(--space-3);
  line-height: var(--lh-tight);
}
.product-pricing {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.price-current {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--primary-bright);
}
.price-original {
  font-size: var(--fs-md);
  color: var(--muted);
}
.product-lead {
  font-size: var(--fs-md);
  color: var(--muted);
  margin: 0 0 var(--space-5);
  line-height: var(--lh-body);
}

/* Options / Swatches */
.product-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}
.option-group {
  border: none;
  padding: 0;
  margin: 0;
}
.option-label {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-block-end: var(--space-2);
}
.option-values {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.color-swatch-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease);
}
.color-swatch-label:hover, .color-swatch-label.is-selected, .color-swatch-label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.color-swatch-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.pill-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
}
.pill-label:hover, .pill-label.is-selected, .pill-label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* Options are visually hidden radios: show focus on the label, and grey out combinations with no stock. */
.pill-label:has(input:focus-visible),
.color-swatch-label:has(input:focus-visible),
.lens-card:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}
.pill-label.is-unavailable,
.color-swatch-label.is-unavailable,
.pill-label:has(input:disabled),
.color-swatch-label:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Lens Selection Cards */
.lens-selection-section {
  margin-block: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface);
}
.lens-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.lens-cards-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.lens-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.lens-card:hover, .lens-card.is-selected, .lens-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.lens-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.lens-card-name {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lens-card-price {
  font-weight: 800;
  color: var(--primary-bright);
}
.lens-card-desc {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: var(--space-1) 0 0;
  white-space: pre-line;
}
.lens-card-image {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-2);
  background: #000;
}
.lens-card-video {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-block-start: var(--space-3);
  border-radius: var(--radius-md);
  background: #000;
}
.lens-card-features {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text);
}
.lens-card-rx {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--warning, var(--secondary));
}
.medical-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-block-start: var(--space-3);
  background: rgba(36, 200, 255, 0.08);
  border: 1px solid rgba(36, 200, 255, 0.2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.prescription-step {
  margin-block: 0 var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface);
}
.prescription-step[hidden] {
  display: none;
}
.prescription-choices {
  display: grid;
  gap: var(--space-3);
}
.prescription-file {
  margin: 0;
  padding-inline-start: var(--space-6);
}

/* Numbered purchase steps: frame options, «هل تلبس نظارات طبية؟», prescription, lenses (owner's request, 2026-10-28).
   A hidden step takes no number, so the numbers always run 1, 2, 3 in what the customer sees. */
.product-form { counter-reset: purchase-step; }
.purchase-step:not([hidden]) > legend::before {
  counter-increment: purchase-step;
  content: counter(purchase-step);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-inline-end: var(--space-2);
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  vertical-align: middle;
}
.lens-selection-section[hidden], .lens-card[hidden] { display: none; }
.wear-step {
  margin-block: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface);
}
.rx-chosen {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-3) var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.rx-chosen[hidden], .rx-missing[hidden], .rx-preview[hidden], .prescription-choices .check[hidden] { display: none; }
.rx-chosen-name { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--success); font-size: var(--fs-sm); word-break: break-all; }
.rx-preview { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.rx-missing { margin: var(--space-2) 0 0; color: var(--danger); font-size: var(--fs-sm); font-weight: 700; }
@media (max-width: 480px) {
  .prescription-file { padding-inline-start: 0; }
}
.product-quantity {
  max-width: none;
}

.product-image-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.product-video {
  position: relative;
  display: block;
  margin-block-start: var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.product-video img,
.product-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
}
.product-video-play {
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
}

.prescription-notice-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-block-end: var(--space-5);
}

/* Specs Table */
.product-specs-section {
  margin-block-start: var(--space-6);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-5);
}
.specs-heading {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.specs-table {
  width: 100%;
  border-collapse: collapse;
}
.specs-table th, .specs-table td {
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--border);
  text-align: start;
}
.specs-table th {
  color: var(--muted);
  width: 35%;
  font-weight: 600;
}

.product-actions-desktop {
  margin-block: var(--space-5);
}
.product-mobile-bar {
  display: none;
}
@media (max-width: 767px) {
  /* The phone bar carries the main button; «رجوع» and «أضف إلى السلة» stay in the page. */
  .product-actions-desktop button[value="checkout"] {
    display: none;
  }
  .product-mobile-bar {
    display: flex;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    background: var(--surface);
    border-block-start: 1px solid var(--border);
    padding: var(--space-3) var(--space-4);
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  }
  .mobile-bar-price {
    display: flex;
    flex-direction: column;
  }
  .mobile-bar-label {
    font-size: var(--fs-xs);
    color: var(--muted);
  }
  /* Room for the fixed bar, on the product page only. */
  body:has(.product-mobile-bar) {
    padding-block-end: 70px;
  }
}

/* ---- Cart, checkout and confirmation (Phase 4) ---- */
.cart-layout,
.checkout-layout {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .cart-layout,
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
  .cart-summary {
    position: sticky;
    inset-block-start: calc(var(--space-6) + 64px);
  }
}
.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.cart-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.cart-line.is-blocked {
  border-color: var(--warning);
}
.cart-line-image {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  color: var(--muted);
}
.cart-line-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line-name {
  font-size: var(--fs-md);
  margin: 0 0 var(--space-1);
}
.cart-line-name a {
  color: var(--text);
}
.cart-line-meta,
.cart-line-price {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.cart-line-notice {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--warning);
}
.cart-line-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}
.cart-qty-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.cart-qty-form .input {
  width: 72px;
}
.cart-line-total {
  grid-column: 2;
  margin: 0;
  font-weight: 800;
  color: var(--primary-bright);
}
@media (min-width: 768px) {
  .cart-line {
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }
  .cart-line-image {
    width: 96px;
    height: 96px;
  }
  .cart-line-total {
    grid-column: auto;
  }
}

.cart-summary {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.cart-summary-title {
  font-size: var(--fs-lg);
  margin: 0;
}
.summary-list {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.summary-list dt {
  color: var(--muted);
}
.summary-list dd {
  margin: 0;
  font-weight: 700;
  text-align: end;
}
.summary-total {
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-2);
  font-size: var(--fs-lg);
}
.summary-total dd {
  color: var(--primary-bright);
}
.checkout-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.checkout-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.checkout-items small {
  display: block;
  color: var(--muted);
}

.checkout-form {
  display: grid;
  gap: var(--space-4);
}
.checkout-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: 0;
  background: var(--surface);
}
.checkout-section legend {
  font-weight: 800;
  padding-inline: var(--space-2);
}
.checkout-payment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--success);
}
/* Off-screen rather than display:none, which some bots skip. */
.hp-field {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.confirmation-page {
  display: grid;
  gap: var(--space-6);
  max-width: 720px;
}
.confirmation-hero {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}
.confirmation-hero .icon-xl {
  color: var(--success);
}
.confirmation-hero h1 {
  font-size: var(--fs-2xl);
  margin: 0;
}
.confirmation-number {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin: 0;
}
.confirmation-message {
  color: var(--muted);
  margin: 0;
}
.delivery-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Order handling, inventory and audit (Phase 5) ---------- */
.tabs-list a.tab { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.tab[aria-current="page"] { color: var(--text); border-block-end-color: var(--secondary); }

.filter-bar {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  padding: var(--space-4);
  margin-block-end: var(--space-5);
}
.filter-bar .field { margin: 0; }
.filter-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.list-meta { color: var(--muted); font-size: var(--fs-sm); margin-block-end: var(--space-3); }
.table td .row-sub { display: block; }
.order-link { font-weight: 800; }

.order-layout { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .order-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.order-status-badge { font-size: var(--fs-sm); }
.order-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.order-print { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-4); }

.order-lines { list-style: none; margin: 0; padding: 0; }
.order-line { display: flex; gap: var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--border); }
.order-line-image {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg);
  display: grid; place-items: center; overflow: hidden;
}
.order-line-image img { width: 100%; height: 100%; object-fit: cover; }
.order-line-main { flex: 1; min-width: 0; }
.order-line-main .row-sub { margin-block-start: 2px; }
.order-line-total { font-weight: 800; white-space: nowrap; }
@media (max-width: 599px) {
  /* On phones the price moves under the details so the product name keeps the width. */
  .order-line { flex-wrap: wrap; }
  .order-line-total { flex-basis: 100%; text-align: end; }
}
.order-rx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.order-rx-preview {
  flex-basis: 100%; max-width: 100%; max-height: 520px; object-fit: contain;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
}

/* Shares .summary-list with the cart; only the spacing above the order totals is added here. */
.order-totals { margin-block-start: var(--space-4); }
.detail-list { margin: 0; }
.detail-list > div {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-2); border-block-end: 1px solid var(--border);
}
.detail-list > div:last-child { border-block-end: 0; }
.detail-list dt { color: var(--muted); font-weight: 700; flex-shrink: 0; }
.detail-list dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.order-contact { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding-block: var(--space-2); padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--border);
}
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: -6px; inset-block-start: var(--space-3);
  width: 10px; height: 10px; border-radius: 50%; background: var(--secondary);
}
.timeline-note { margin: var(--space-1) 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }

.dashboard-stats { margin-block-end: var(--space-5); }
.stat-link { color: var(--text); text-decoration: none; }
.stat-link:hover { border-color: var(--border-glow); color: var(--text); }
.stat-hint { color: var(--muted); font-size: var(--fs-xs); }
.stat-attention { border-color: var(--border-glow); box-shadow: var(--glow-primary); }
.stat-warning .stat-value { color: var(--warning); }
.dashboard-grid { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .dashboard-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.dashboard-list { list-style: none; margin: 0; padding: 0; }
.dashboard-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-3); border-block-end: 1px solid var(--border);
}
.dashboard-list li:last-child { border-block-end: 0; }
.dashboard-list a { display: flex; flex-direction: column; min-width: 0; color: var(--text); text-decoration: none; }
.dashboard-list a:hover .row-title { color: var(--primary-text); }
.quick-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.report-money { font-size: var(--fs-2xl); }
.two-factor { margin-block-start: var(--space-5); }
.two-factor-steps { padding-inline-start: var(--space-5); line-height: 2; }
.authenticator-key { display: inline-block; margin-block: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-elevated); font-size: var(--fs-lg); letter-spacing: 1px; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: var(--fs-lg); }

/* Category management inside the product editor */
.modal.modal-wide { max-width: 760px; }
.label-with-action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.embedded-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.embedded-toolbar .field-help { margin: 0; }

/* Uploaded product video */
/* Square like the product photos, and the video fills it (cropped at the edges, never letterboxed). Best source: 1080×1080. */
.product-video-player, .admin-video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); background: #000; margin-block: var(--space-4); }
.product-video-player { border: 1px solid var(--border); }
.admin-video { max-width: 280px; margin-block: var(--space-2); }

/* Image framing dialog */
.crop-wrap { display: flex; justify-content: center; margin-block: var(--space-3); }
.crop-stage {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 1;
  border-radius: var(--radius-md); cursor: grab; touch-action: none; user-select: none;
  /* Checkerboard shows transparent areas, like image editors do. */
  background: repeating-conic-gradient(var(--surface-elevated) 0% 25%, var(--surface) 0% 50%) 50% / 20px 20px;
  box-shadow: 0 0 0 2px var(--border-glow);
}
.crop-stage:active { cursor: grabbing; }
/* Physical left on purpose: the script moves the picture in screen coordinates, the same in RTL and LTR. */
.crop-image { position: absolute; inset-block-start: 0; left: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
.crop-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.crop-zoom { flex: 1; min-width: 160px; max-width: 360px; accent-color: var(--primary); }
.crop-file { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* Hero picture list in the home page editor */
.hero-gallery-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); }
.hero-gallery-list li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.hero-gallery-list img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.hero-gallery-actions { display: flex; justify-content: center; gap: var(--space-1); }

/* Phone list and map link in the store settings */
.phones-editor { margin-block-end: var(--space-5); }
.phone-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); }
.phone-row .input { flex: 1 1 180px; max-width: 240px; }
.uses-menu { position: relative; }
.uses-menu summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.uses-menu summary::-webkit-details-marker { display: none; }
.uses-caret { font-size: var(--fs-xs); color: var(--muted); }
.uses-panel {
  position: absolute; z-index: 20; inset-block-start: calc(100% + 4px); inset-inline-start: 0; min-width: 190px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
}
.uses-panel .check { min-height: 40px; }
.input-with-action { display: flex; gap: var(--space-2); align-items: center; }
.input-with-action .input { flex: 1; }
.row-thumb { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--bg); }

/* Purchase pages and their bar (owner's request, 2026-10-28). */
.purchase-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.purchase-progress li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  position: relative;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
/* The line between two steps, drawn from each step towards the next (inline end in RTL is the left). */
.purchase-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 15px;
  inset-inline-start: calc(50% + 20px);
  inset-inline-end: calc(-50% + 20px);
  height: 2px;
  background: var(--border);
}
.purchase-progress li.is-done:not(:last-child)::after { background: var(--primary); }
.purchase-progress-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.purchase-progress li.is-current { color: var(--text); }
.purchase-progress li.is-current .purchase-progress-number { border-color: transparent; background: var(--gradient-primary); color: #fff; }
.purchase-progress li.is-done .purchase-progress-number { border-color: var(--primary); color: var(--primary-text); }
.purchase-page[hidden], [data-page-actions][hidden] { display: none; }
.purchase-next { margin-block-start: var(--space-4); }
/* Pulses when the phone bar's «اختر العدسة» leads here (owner's request, 2026-11-09: «يجعله ينبض»). */
.purchase-next.is-pointed { animation: next-pointed 0.9s ease-in-out 0.3s 4; }
@keyframes next-pointed {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .purchase-next.is-pointed { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent); }
}
.purchase-back { margin-block-end: var(--space-2); }
.product-actions-desktop .btn-secondary { margin-block-start: var(--space-2); }

.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.qty-stepper .qty-input {
  width: 64px;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 800;
  -moz-appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper .qty-input:focus { box-shadow: none; }
.qty-stepper:focus-within { border-color: var(--secondary); box-shadow: var(--focus-ring); }
.qty-btn {
  width: 48px;
  border: 0;
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.qty-btn[hidden] { display: none; }
.qty-btn:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary-text); }
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.product-quantity .qty-stepper { width: fit-content; }
/* With the three-page bar, the steps inside a page are not numbered again. */
.product-form:has(.purchase-progress) .purchase-step > legend::before { content: none; }

/* «أرسل موقعي» at checkout (2026-10-28). */
.location-field[hidden], .location-status[hidden] { display: none; }
.location-btn { align-self: flex-start; }
.location-status { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.location-status.is-ok { color: var(--success); font-weight: 700; }
.location-status a { color: var(--secondary); margin-inline-start: var(--space-1); }

/*
 * Two-colour light inside every picture except the logo (owner's request, 2026-10-28): red-orange on one edge and
 * purple on the opposite edge, turning slowly around the picture, starting with purple on the right. Only the picture
 * is lit; the frames around it keep their own look. The layer uses "screen", so it brightens and never darkens.
 * The turning angle is an animated custom property; a browser without @property shows the light standing still.
 */
@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 90deg;
}
@keyframes glow-turn {
  to { --glow-angle: 450deg; }
}
.product-card-image::after,
.product-gallery-main::after,
.hero-front::after,
.glow-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--glow-angle),
    rgba(255, 92, 52, 0.5) 0%, rgba(255, 92, 52, 0.12) 22%, transparent 40%,
    transparent 60%, rgba(200, 69, 255, 0.14) 78%, rgba(200, 69, 255, 0.55) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
  animation: glow-turn 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .product-card-image::after, .product-gallery-main::after, .hero-front::after, .glow-frame::after { animation: none; }
}
/* Wraps an <img>, which cannot carry the light layer itself. */
.glow-frame { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); line-height: 0; }
.lens-card .glow-frame { width: fit-content; border-radius: var(--radius-sm); margin-block-end: var(--space-2); }
.lens-card .glow-frame .lens-card-image { margin: 0; }

/* Compact lens card with details on demand (owner's request, 2026-10-28). */
.lens-card:has(> .lens-card-main) { padding: 0; cursor: default; }
.lens-card-main { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; }
.lens-card-thumb { width: 72px; height: 72px; flex: none; border-radius: var(--radius-sm); }
.lens-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lens-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lens-more { border-block-start: 1px solid var(--border); }
.lens-more summary {
  padding: var(--space-2) var(--space-4); cursor: pointer; color: var(--secondary); font-size: var(--fs-sm); font-weight: 700;
  list-style: none; display: flex; align-items: center; gap: var(--space-2);
}
.lens-more summary::-webkit-details-marker { display: none; }
.lens-more summary::before { content: "▾"; transition: transform var(--duration-fast) var(--ease); }
.lens-more:not([open]) summary::before { transform: rotate(90deg); }
.lens-more[open] summary { color: var(--text); }
.lens-more-body { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.lens-gallery { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-1); }
.lens-gallery .glow-frame { flex: 0 0 min(70%, 240px); aspect-ratio: 1 / 1; scroll-snap-align: start; border-radius: var(--radius-md); }
.lens-gallery img { width: 100%; height: 100%; object-fit: cover; }
.lens-more-body .lens-card-video { margin-block-start: 0; }
.order-action { text-align: end; white-space: nowrap; }
/* Name, badge and price stay inside the lens card on a phone: the price takes its own line under the name. */
.lens-card-main .lens-card-header { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.lens-card-main .lens-card-name { flex-wrap: wrap; overflow-wrap: anywhere; }
.lens-card-main .lens-card-price { white-space: nowrap; }

/* Sound alerts in the admin top bar (2026-10-28). */
.admin-alerts { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.admin-alerts-bell { position: relative; }
.admin-alerts-bell.is-muted { color: var(--muted); }
.admin-alerts-count {
  position: absolute; inset-block-start: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.admin-alerts-snooze { animation: alert-pulse 1.2s ease-in-out infinite; }
@keyframes alert-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 92, 122, 0.25); } }
@media (prefers-reduced-motion: reduce) { .admin-alerts-snooze { animation: none; } }
@media (max-width: 600px) { .admin-alerts-snooze span { display: none; } }
.admin-alerts + .admin-user { margin-inline-start: 0; }

/* ---------- Home rows «جديدنا» and «العروض» as reels (owner's request, 2026-10-28: «مثل الريلز في الفيسبوك») ----------
   Tall cards side by side that the customer swipes through. No light inside the picture; each card glows outside
   in one of the four colour pairs of the section cards (tone-1 to tone-4), and its text sits over a dark fade. */
.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}
.carousel-title {
  margin: 0;
  font-size: var(--fs-2xl);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.carousel {
  /* Small enough that a phone shows nearly three cards (owner, 2026-10-28: «الكروت كلها كبيرة»; 2026-10-31: «اصغر بقليل»). */
  --reel-w: min(34vw, 140px);
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .carousel { --reel-w: 150px; }
}
.carousel-track {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-5);
  scroll-padding-inline: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
@media (min-width: 768px) {
  .carousel-track { padding-inline: var(--space-5); scroll-padding-inline: var(--space-5); gap: var(--space-4); }
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.carousel-item {
  flex: 0 0 var(--reel-w);
  scroll-snap-align: start;
}

.reel {
  --tone-a: var(--primary);
  --tone-b: var(--accent);
  display: flex;
  height: 100%;
  padding: 2px;
  border-radius: 18px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(150deg, var(--tone-a), var(--tone-b));
  box-shadow:
    0 0 18px -2px color-mix(in srgb, var(--tone-a) 55%, transparent),
    0 14px 30px -12px color-mix(in srgb, var(--tone-b) 70%, transparent);
  transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.reel.tone-1 { --tone-a: var(--primary); --tone-b: var(--accent); }
.reel.tone-2 { --tone-a: var(--accent); --tone-b: var(--danger); }
.reel.tone-3 { --tone-a: var(--secondary); --tone-b: var(--success); }
.reel.tone-4 { --tone-a: var(--warning); --tone-b: var(--danger); }
.reel:hover,
.reel:focus-visible {
  color: var(--text);
  transform: translateY(-4px);
  box-shadow:
    0 0 28px 0 color-mix(in srgb, var(--tone-a) 70%, transparent),
    0 18px 38px -12px color-mix(in srgb, var(--tone-b) 85%, transparent);
  outline: none;
}
.reel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-elevated), var(--surface));
}
/* The picture: clear, uncropped by any light, in its own rounded frame (like the about picture). */
.reel-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--tone-a) 45%, transparent);
  background: #fff;
}
.reel-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.reel:hover .reel-photo { transform: scale(1.05); }
.reel-placeholder { display: grid; place-items: center; height: 100%; color: var(--muted); background: var(--surface); }
.reel-tag {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.reel-tag.is-deal { background: linear-gradient(135deg, var(--danger), var(--accent)); }
/* The details stay inside the card: it grows with them, and long names stop at two lines. */
.reel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 2px;
}
.reel-brand { font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.reel-title {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.reel-text {
  font-size: var(--fs-xs);
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reel-price {
  display: flex;
  align-items: baseline;
  gap: 2px 6px;
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: 4px;
}
.reel-price > span { font-size: 0.85rem; font-weight: 800; color: var(--warning); white-space: nowrap; }
.reel-price s { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

.carousel-arrow {
  position: absolute;
  inset-block-start: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  margin-block-start: -21px;
  border-radius: 50%;
  border: 1px solid var(--border-glow);
  background: color-mix(in srgb, var(--surface-elevated) 85%, transparent);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: var(--glow-primary);
}
/* Phones swipe; the arrows are for a mouse. */
@media (hover: hover) and (pointer: fine) {
  .carousel-arrow:not([hidden]) { display: grid; }
}
.carousel-arrow:hover { color: var(--primary); }
.carousel-arrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.carousel-prev { inset-inline-start: var(--space-1); }
.carousel-next { inset-inline-end: var(--space-1); }
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
  .reel, .reel-photo { transition: none; }
}

/* ---------- Choosing رجالي / نسائي / أطفال inside a main section (owner's request, 2026-10-28) ----------
   Three large cards in the colours of the section cards; inside one of them the same choices shrink to a row
   of pills at the top so the customer can switch. */
.audience-picker { margin-block: var(--space-4) var(--space-6); }
.audience-prompt { margin: 0 0 var(--space-3); font-weight: 800; color: var(--muted); text-align: center; }
/* Cards stay a third of the row wide and the row is centred, so two choices (رجالي، نسائي) sit in the middle rather than
   leaving an empty third place to one side (owner's request, 2026-11-03: «توسيط»). */
.audience-grid {
  --audience-gap: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--audience-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
  margin-inline: auto;
}
.audience-grid > li { flex: 0 1 calc((100% - 2 * var(--audience-gap)) / 3); min-width: 0; }
.audience-grid > li > .audience-card { height: 100%; }
.audience-card {
  --tone-a: var(--primary);
  --tone-b: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--tone-a) 45%, var(--border));
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tone-a) 28%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--surface-elevated), var(--surface));
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 0 16px -4px color-mix(in srgb, var(--tone-a) 55%, transparent);
  transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.audience-card.tone-1 { --tone-a: var(--primary); --tone-b: var(--accent); }
.audience-card.tone-2 { --tone-a: var(--accent); --tone-b: var(--danger); }
.audience-card.tone-3 { --tone-a: var(--secondary); --tone-b: var(--success); }
.audience-card.tone-4 { --tone-a: var(--warning); --tone-b: var(--danger); }
.audience-card:hover, .audience-card:focus-visible {
  color: var(--text);
  transform: translateY(-4px);
  box-shadow: 0 0 26px 0 color-mix(in srgb, var(--tone-a) 70%, transparent);
  outline: none;
}
.audience-icon {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--tone-a), var(--tone-b));
  color: #fff;
  box-shadow: 0 10px 24px -10px var(--tone-a), inset 0 0 0 3px rgba(255, 255, 255, 0.14);
}
.audience-icon .icon { width: 34px; height: 34px; }
.audience-name { font-weight: 800; font-size: var(--fs-lg); }
@media (min-width: 768px) {
  .audience-card { padding: var(--space-5) var(--space-3); }
  .audience-icon { inline-size: 84px; block-size: 84px; }
  .audience-icon .icon { width: 44px; height: 44px; }
}
/* Inside رجالي (or نسائي…): the choices as a slim row, the current one lit. */
.audience-picker.is-compact { margin-block: 0 var(--space-4); }
.audience-picker.is-compact .audience-grid { max-width: 420px; --audience-gap: var(--space-2); }
.audience-picker.is-compact .audience-card { flex-direction: row; justify-content: center; padding: 6px 10px; border-radius: 999px; box-shadow: none; }
.audience-picker.is-compact .audience-icon { inline-size: 28px; block-size: 28px; box-shadow: none; }
.audience-picker.is-compact .audience-icon .icon { width: 16px; height: 16px; }
.audience-picker.is-compact .audience-name { font-size: var(--fs-sm); }
.audience-card.is-current { border-color: var(--tone-a); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--tone-a) 70%, transparent); }
.catalog-heading { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }

/* Small product cards everywhere, three in a row on a phone (owner's requests, 2026-10-28: «كروت صغر للمنتجات», and
   2026-10-31: «كروت المنتجات اصغر بقليل»). */
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 600px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
}
.product-grid .reel { border-radius: 14px; }
.product-grid .reel-inner { padding: 4px; border-radius: 12px; }
.product-grid .reel-media { border-radius: 9px; }
.product-grid .reel-info { padding: 6px 2px 2px; }
.product-grid .reel-brand { display: none; }
.product-grid .reel-title { font-size: 0.72rem; }
.product-grid .reel-price > span { font-size: 0.75rem; }
.product-grid .reel-price s { font-size: 0.65rem; }
.product-grid .reel-tag { font-size: 0.62rem; padding: 1px 6px; inset-block-start: 4px; inset-inline-start: 4px; }

/* A lens that comes photochromic or Transitions: its name over two small cards side by side, one alone in the
   middle (owner's request, 2026-10-28). Coloured like the section cards. */
.lens-card.lens-group { padding: var(--space-3) var(--space-2); gap: var(--space-2); }
.lens-group-name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 800;
}
.lens-group-name > span:first-child {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lens-group-name::before,
.lens-group-name::after {
  content: "";
  flex: 1 1 16px;
  max-width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
}
.lens-group-rx { justify-content: center; }
/* Small cards, two facing each other per row and centred (owner's request, 2026-10-30: «كروت العدسات تكون اصغر
   وفقط نوعين متقابلين لكل عدسة»); a lens with one version shows one card in the middle. */
.tint-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.tint-card {
  --tone-a: var(--primary);
  flex: 0 1 calc(50% - 3px);
  min-width: 0;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--tone-a) 35%, var(--border));
  background: color-mix(in srgb, var(--tone-a) 7%, var(--surface));
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.tint-card.tone-1 { --tone-a: var(--primary); }
.tint-card.tone-2 { --tone-a: var(--accent); }
.tint-card.tone-4 { --tone-a: var(--warning); }
.tint-card.tone-3 { --tone-a: var(--secondary); }
.tint-card:has(input:checked) {
  border-color: var(--tone-a);
  background: color-mix(in srgb, var(--tone-a) 16%, var(--surface));
  box-shadow: 0 0 0 1px var(--tone-a);
}
.tint-card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.tint-card-name { font-weight: 800; font-size: 0.8rem; overflow-wrap: anywhere; }
.tint-card-hint { font-size: 0.68rem; line-height: 1.35; color: var(--muted); }
.tint-card-price { font-size: 0.74rem; font-weight: 800; color: var(--price, var(--warning)); white-space: nowrap; }

/* Colour and size under the product pictures, small and close to them (owner's request, 2026-10-28). */
.gallery-options { margin-block: var(--space-3) var(--space-4); gap: var(--space-3); }
.gallery-options[hidden] { display: none; }
.gallery-options .option-label { margin-block-end: var(--space-1); font-size: var(--fs-xs); }
.gallery-options .option-values { gap: 6px; }
.gallery-options .color-swatch-label { gap: 6px; padding: 3px 10px 3px 8px; font-size: var(--fs-xs); }
.gallery-options .color-swatch-circle { width: 14px; height: 14px; }
.gallery-options .pill-label { padding: 4px 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }

/* Product editor: categories grouped by main section (owner's request, 2026-10-28). */
.cat-picker { display: grid; gap: var(--space-2); margin-block-end: var(--space-2); }
.cat-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.cat-chip {
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.cat-chip:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.cat-chip-main { font-weight: 800; }
.cat-arrow { color: var(--muted); }

/* Order page print buttons: one is greyed out when there is nothing to print (no prescription). */
.order-print { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Paper size beside the order's print buttons: A4, A5 or the 80 mm roll (owner's request, 2026-10-28). */
.print-size { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.print-size-option {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
}
.print-size-option + .print-size-option { border-inline-start: 1px solid var(--border); }
.print-size-option.is-active { background: var(--primary-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); }
.print-size-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Lens editor: the versions under a lens, as editable rows (owner's request, 2026-10-28). */
.lens-versions-editor { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0; display: grid; gap: var(--space-2); }
.lens-versions-editor legend { padding-inline: var(--space-1); }
.lens-version-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 110px auto auto; gap: var(--space-2); align-items: center; }
@media (max-width: 599px) {
  .lens-version-row { grid-template-columns: minmax(0, 1fr) 100px auto auto; }
  .lens-version-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
.lens-version-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lens-version-add .select { flex: 1; min-width: 200px; max-width: 340px; }

/* A lens with versions: picking one lights only that small card, not the whole lens (owner's request, 2026-10-29). */
.lens-card.lens-group:hover,
.lens-card.lens-group.is-selected,
.lens-card.lens-group:has(input:checked) { border-color: var(--border); background: var(--bg); }
.lens-card.lens-group:has(input:checked) .lens-group-name > span:first-child { filter: brightness(1.25); }
.tint-card.is-selected, .tint-card:has(input:checked) { background: color-mix(in srgb, var(--tone-a) 16%, var(--surface)); }

/* The price with the chosen lens, under the lenses. */
.lens-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  font-weight: 700;
}
.lens-total strong { font-size: var(--fs-xl); color: var(--warning); }

/* Ready WhatsApp messages: the order page menu and the settings list (owner's request, 2026-10-29). */
.wa-menu { display: inline-block; }
.wa-menu[open] { display: block; flex-basis: 100%; }
.wa-menu > summary { list-style: none; }
.wa-menu > summary::-webkit-details-marker { display: none; }
/* Opens as a full-width block under the buttons, inside the card, so it never runs off the screen
   (owner's report, 2026-10-29: «زحف النافذة خارج الشاشة»). */
.wa-menu-list {
  margin-block-start: var(--space-2);
  max-height: 420px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: var(--space-2);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.wa-menu-item {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.wa-menu-item:hover, .wa-menu-item:focus-visible { background: var(--primary-soft); color: var(--text); outline: none; }
.wa-menu-item span {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wa-menu-edit { font-size: var(--fs-xs); padding: var(--space-1) var(--space-3); }
.wa-fields { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.wa-fields li { font-size: var(--fs-xs); color: var(--muted); }
.wa-fields code { color: var(--accent); font-weight: 700; }
.wa-body { white-space: pre-line; }
.wa-field-add { padding: 2px 8px; font-size: var(--fs-xs); }

/* Settings: one general tab in sections, the brand colours and the paper size (owner's request, 2026-10-29). */
.settings-section + .settings-section { margin-block-start: var(--space-4); }
.brand-colors { display: grid; gap: var(--space-2); align-content: start; }
.brand-colors-body { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.brand-logo-pick { margin: 0; display: grid; gap: 4px; justify-items: center; }
.brand-logo-pick img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glow);
  background: repeating-conic-gradient(#2a2e4a 0 25%, #1b1e36 0 50%) 0 0 / 16px 16px;
  cursor: crosshair;
}
.brand-logo-pick figcaption { font-size: var(--fs-xs); color: var(--muted); }
.brand-colors-fields { display: grid; gap: var(--space-2); flex: 1; min-width: 220px; }
.brand-color-field { padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.brand-color-field.is-target { border-color: var(--primary); background: var(--primary-soft); }
.brand-color-input { display: flex; gap: var(--space-2); align-items: center; }
.brand-color-input input[type="color"] { inline-size: 44px; block-size: 40px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.brand-preview { display: flex; gap: var(--space-2); align-items: center; }
.brand-preview-card { padding: 6px 14px; border-radius: 10px; background: var(--p); color: #fff; font-weight: 800; }
.brand-preview-pill { padding: 4px 12px; border-radius: 999px; background: var(--s); color: #fff; font-weight: 700; font-size: var(--fs-sm); }
.paper-sizes { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.paper-size { display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.paper-size input { position: absolute; opacity: 0; pointer-events: none; }
.paper-size span { font-size: var(--fs-xs); color: var(--muted); }
.paper-size.is-selected, .paper-size:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.paper-size:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Settings: the store's look and colours (owner's request, 2026-10-30). The samples are drawn in the colours each
   look really has, whatever the admin's own look. */
.store-themes { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.store-theme { position: relative; display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.store-theme input { position: absolute; opacity: 0; pointer-events: none; }
.store-theme > span:last-child { font-size: var(--fs-xs); color: var(--muted); }
.store-theme.is-selected, .store-theme:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.store-theme:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.store-theme-sample { display: flex; gap: 4px; padding: 8px; border-radius: var(--radius-sm); margin-block-end: var(--space-1); }
.store-theme-sample > span { flex: 1; height: 14px; border-radius: 4px; }
.theme-light .store-theme-sample { background: #F7F9FA; border: 1px solid #E2E8EC; }
.theme-light .store-theme-sample > span { background: #EAF0F3; border: 1px solid #D9E2E8; }
.theme-light .store-theme-sample > span:first-child { background: #2A9D8F; border: 0; }
.theme-dark .store-theme-sample { background: #090B1A; border: 1px solid #191D38; }
.theme-dark .store-theme-sample > span { background: #12152B; }
.theme-dark .store-theme-sample > span:first-child { background: #8A2EFF; }
.store-palettes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.store-palette {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.store-palette.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.store-palette-dots { display: inline-flex; }
.store-palette-dots > span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); }
.store-palette-dots > span + span { margin-inline-start: -5px; }
.store-colors-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); margin-block-start: var(--space-2);
}
.store-colors-preview.theme-light { background: #F7F9FA; color: #1E2A32; border: 1px solid #E2E8EC; }
.store-colors-preview.theme-dark { background: #090B1A; color: #F4F5FF; border: 1px solid #191D38; }
.store-colors-preview .preview-chip {
  padding: 6px 12px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--p) 30%, transparent); background: color-mix(in srgb, var(--p) 8%, transparent);
}
.store-colors-preview .preview-chip.is-accent { border-color: color-mix(in srgb, var(--a) 30%, transparent); background: color-mix(in srgb, var(--a) 8%, transparent); }
.store-colors-preview .preview-price { font-weight: 800; color: var(--p); }
.store-colors-preview .preview-button { padding: 6px 14px; border-radius: var(--radius-md); background: var(--p); color: #fff; font-weight: 800; font-size: var(--fs-sm); }

/* Settings: users and backups (owner's request, 2026-10-29). */
.role-legend { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--muted); }
.role-legend strong { color: var(--text); }
.select.select-sm { min-height: 34px; padding-block: 4px; font-size: var(--fs-sm); width: auto; }
.backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block: var(--space-3); }

/* ---------- Orders made simple for the owner (owner's request, 2026-10-31: «اجعل التتبع والتواصل اسهل») ---------- */
/* The list by stage: a row of chips that scrolls sideways on a phone. */
.order-stages {
  display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
  margin-block-end: var(--space-3); padding-block: 2px;
}
.order-stages::-webkit-scrollbar { display: none; }
.order-stage {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
}
.order-stage-count {
  min-width: 22px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--bg); color: var(--muted); font-size: var(--fs-xs); text-align: center;
}
.order-stage[aria-current="page"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.order-stage.has-work .order-stage-count { background: var(--danger); color: #fff; }
.order-search { margin-block-end: var(--space-4); }
.order-search-row { display: flex; gap: var(--space-2); }
.order-search-row .input { flex: 1; min-width: 0; }
@media (max-width: 599px) {
  .order-search-row .btn span { display: none; }
}
.order-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3);
  margin-block-start: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.order-filters .field { margin: 0; }
.order-search-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
.order-action .btn + .btn { margin-inline-start: var(--space-1); }
/* The row's quick buttons (2026-11-03) wrap onto a second line instead of running out of the card on a phone. */
.order-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; align-items: center; white-space: normal; }
.order-quick .btn + .btn { margin-inline-start: 0; }
@media (min-width: 768px) { .orders-table .order-link { white-space: nowrap; } }
@media (max-width: 767px) { .order-quick { width: 100%; justify-content: flex-start; } .order-quick .btn { flex: 1 1 auto; } .order-quick .btn-icon { flex: 0 0 auto; } }

/* The order page: the road, what to do now, the customer, and one large button. */
.order-guide { display: grid; gap: var(--space-3); }
.order-guide .card-title { margin: 0; }
.order-steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  list-style: none; margin: 0; padding: 0; counter-reset: none;
}
.order-steps li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.order-steps li + li::before {
  content: ""; position: absolute; inset-block-start: 13px; inset-inline-end: 50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.order-steps li.is-done + li::before, .order-steps li.is-done + li.is-current::before { background: var(--primary); }
.order-step-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: var(--fs-xs); font-weight: 800;
}
.order-steps li.is-done .order-step-dot { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.order-steps li.is-current .order-step-dot { border-color: var(--primary); color: var(--primary-text); box-shadow: 0 0 0 4px var(--primary-soft); }
.order-step-name { font-size: 0.7rem; line-height: 1.3; color: var(--muted); }
.order-steps li.is-current .order-step-name { color: var(--text); font-weight: 800; }
.order-guide-text { margin: 0; font-size: var(--fs-md); }
.order-guide-customer { padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg); }
.order-guide-customer > p { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.order-guide-customer > p > span { color: var(--muted); }
.order-guide-customer .order-contact { margin-block-start: var(--space-2); }
.order-other-actions { align-items: center; }
.order-guide .order-print { margin-block-start: 0; padding-block-start: var(--space-3); border-block-start: 1px solid var(--border); }
.order-notify {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-soft);
}
.order-notify p { margin: 0; font-weight: 700; }

/* Order stages (2026-11-03): what to do in this stage, choosing orders, and the bar that moves the chosen ones. */
.stage-guide { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--info-soft); color: var(--text); font-size: var(--fs-sm); }
.order-pick { width: 40px; }
.order-pick input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
.orders-table tr.is-picked { background: var(--primary-soft); }
.bulk-bar {
  position: sticky; inset-block-end: var(--space-3); z-index: 5;
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  margin-block-start: var(--space-4); padding: var(--space-3);
  border: 1px solid var(--border-glow); border-radius: var(--radius-lg);
  background: var(--surface-elevated); box-shadow: var(--shadow-lg);
}
.bulk-count { margin-inline-end: auto; }
.bulk-courier { width: auto; min-width: 0; flex: 1 1 160px; max-width: 240px; }
@media (max-width: 767px) { .table-responsive td.order-pick { justify-content: flex-start; gap: var(--space-2); } }
.order-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pick-all { margin: 0; font-weight: 700; }
.product-back { margin-block-end: var(--space-2); }

/* «تلبس نظارة طبية؟» as one switch, and the prescription as one dashed box (owner's request, 2026-11-04). */
.wear-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; }
.wear-toggle-text { display: grid; gap: 2px; }
.wear-toggle-text strong { font-size: var(--fs-lg); }
.wear-toggle-text span { color: var(--muted); font-size: var(--fs-sm); }
.wear-toggle .switch { min-height: 0; flex-shrink: 0; }
.rx-upload-choice { display: none; }
.rx-drop {
  display: grid; justify-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-4); text-align: center; font-weight: 700;
  border: 2px dashed var(--accent); border-radius: var(--radius-lg);
  background: var(--surface); cursor: pointer;
}
.rx-drop:hover, .rx-drop:focus-within { background: var(--primary-soft); }
.rx-drop:focus-within { box-shadow: var(--focus-ring); }

/* ---------- Password with an eye button (2026-11-09) ---------- */
.pw-wrap { position: relative; }
/* Password boxes are left-to-right inside the right-to-left page, so the button and its room sit on the left. */
.pw-wrap .input { padding-left: 52px; }
.pw-toggle {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 48px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-md);
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pw-toggle .pw-hide, .pw-toggle[aria-pressed="true"] .pw-show { display: none; }
.pw-toggle[aria-pressed="true"] .pw-hide { display: inline-block; }

/* ---------- Several colours or sizes ticked from the owner's lists (2026-11-09) ---------- */
.multi-pick { position: relative; max-width: 450px; margin-block-start: var(--space-3); }
.multi-pick > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.multi-pick > summary::-webkit-details-marker { display: none; }
.multi-pick-panel {
  position: absolute; z-index: 30; inset-inline: 0; inset-block-start: calc(100% + 4px);
  max-height: 320px; overflow-y: auto; padding: var(--space-2);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.multi-pick-item { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.multi-pick-item:hover { background: var(--primary-soft); }
.multi-pick-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); flex: none; }
.multi-pick-edit {
  display: block; width: 100%; margin-block-start: var(--space-2); padding: var(--space-2);
  border: 0; border-block-start: 1px solid var(--border); background: none; color: var(--primary-text);
  font-weight: 700; text-align: start; cursor: pointer;
}
.preset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center; margin-block-end: var(--space-2); }
.preset-row.has-color { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.preset-color { width: 52px; padding: 2px; }

/* ---------- Lens add-ons the customer ticks, several at once (owner's request, 2026-11-09) ---------- */
.lens-addons { border: 0; margin: 0; padding: var(--space-2) 0 0; min-width: 0; border-block-start: 1px dashed var(--border); }
.lens-addons-title { padding: 0; margin: 0 auto var(--space-2); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-align: center; }
.tint-card { position: relative; }
.tint-card-check {
  position: absolute; inset-block-start: 5px; inset-inline-start: 5px;
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--tone-a) 60%, var(--border-strong));
  background: var(--surface);
}
.tint-card:has(input:checked) .tint-card-check { background: var(--tone-a); border-color: var(--tone-a); }
.tint-card:has(input:checked) .tint-card-check::after {
  content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 1px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tint-card:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.multi-pick-note { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }
.lens-versions-editor .multi-pick { margin-block-start: var(--space-2); }
.tint-card-extra { font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.lens-addons-sum { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.6; }
.lens-addons-sum strong { color: var(--price, var(--warning)); font-size: var(--fs-sm); }

/* ---------- Colours as coloured rectangles with the name inside (owner's request, 2026-11-09) ---------- */
.color-swatch-label { padding: 3px; border-radius: var(--radius-md); border: 2px solid transparent; background: none; gap: 0; }
.color-swatch-label:hover { border-color: var(--border-strong); background: none; }
.color-swatch-label.is-selected, .color-swatch-label:has(input:checked) { border-color: var(--primary); background: none; box-shadow: 0 0 0 1px var(--primary); }
.color-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 36px; padding: 4px 12px;
  border-radius: calc(var(--radius-md) - 3px);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-weight: 700; font-size: var(--fs-sm); white-space: nowrap;
}
.gallery-options .color-swatch-label { padding: 2px; }
.gallery-options .color-chip { min-width: 48px; min-height: 28px; padding: 2px 8px; font-size: var(--fs-xs); }
/* An add-on row in the lens editor: its types, its price, move and delete (2026-11-09). */
.lens-addon-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) 110px auto auto; gap: var(--space-2); align-items: start; margin-block-end: var(--space-2); }
.lens-addon-row .multi-pick { margin: 0; max-width: none; }
.lens-addon-price { align-self: center; font-weight: 800; font-size: var(--fs-sm); color: var(--price, var(--warning)); white-space: nowrap; min-width: 90px; text-align: center; }

/*
 * Tick-box lists and lens add-ons on every screen size (owner's request, 2026-11-09: «يقص ... يجب ان يكون متجاوب وواضح
 * وليس كومبو مقصوص او قصير»). The list opens inside the page, pushing what is under it down, so a scrolling window never
 * crops it; its button grows with long names instead of cutting them.
 */
.multi-pick { width: 100%; }
.multi-pick > summary.select {
  height: auto; min-height: 48px; white-space: normal; line-height: 1.45;
  padding-block: 10px; overflow-wrap: anywhere;
}
.multi-pick-panel {
  position: static; margin-block-start: 4px; max-height: 300px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.multi-pick-item { min-height: 44px; }
.multi-pick-item > span:not(.multi-pick-swatch):not(.multi-pick-note) { overflow-wrap: anywhere; }

.lens-sub { margin: var(--space-4) 0 var(--space-1); font-size: var(--fs-md); font-weight: 800; }
.lens-sub:first-of-type { margin-block-start: var(--space-2); }
.lens-type-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) 120px minmax(0, 1.6fr) auto;
  gap: var(--space-2); align-items: center; margin-block-end: var(--space-2);
}
.lens-type-head { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-block-end: 2px; }
.lens-addon-row { grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: start; }
.lens-addon-row .lens-addon-price { padding-block-start: 14px; align-self: start; }
.lens-versions-editor > .btn { margin-block-start: var(--space-1); }

@media (max-width: 599px) {
  .lens-type-head { display: none; }
  .lens-type-row {
    grid-template-columns: minmax(0, 1fr) 110px auto;
    padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  }
  .lens-type-row > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .lens-addon-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  }
  .lens-addon-row > .multi-pick { grid-column: 1 / -1; }
  .lens-addon-row .lens-addon-price { padding-block-start: 0; align-self: center; text-align: start; }
  .lens-versions-editor > .btn { width: 100%; }
}
/* «1. ضبط الأنواع» folds away; its heading shows the types and prices (owner's request, 2026-11-09). */
.lens-types-panel { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-block: var(--space-2) var(--space-3); background: var(--bg); }
.lens-types-panel > summary.lens-sub { margin: 0; cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); min-height: 40px; }
.lens-types-panel > summary.lens-sub::-webkit-details-marker { display: none; }
.lens-types-panel > summary.lens-sub::before { content: "▸"; color: var(--muted); transition: transform var(--duration-fast) var(--ease); }
.lens-types-panel[open] > summary.lens-sub::before { transform: rotate(90deg); }
[dir="rtl"] .lens-types-panel > summary.lens-sub::before { content: "◂"; }
[dir="rtl"] .lens-types-panel[open] > summary.lens-sub::before { transform: rotate(-90deg); }
.lens-types-summary { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.lens-types-panel[open] { padding-block-end: var(--space-3); }
.lens-types-panel .lens-type-add { width: 100%; }
.lens-addon-price { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.3; }
.lens-addon-total { font-weight: 800; }
.lens-addon-sum { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
@media (max-width: 599px) { .lens-addon-price { align-items: flex-start; } }