/* E-commerce template stylesheet.
   Consumes the --ec-* custom properties emitted by Services/DesignTokens.cs
   (rendered inline per-request by Pages/Shared/_Layout.cshtml), so colors,
   radius, spacing, shadow and typography all come from the tenant's chosen
   design preset — this file only defines structure/layout. Deliberately
   duplicated from Raymon.CorporateTemplate/wwwroot/css/corporate.css with
   the --ct-* prefix swapped to --ec-* and store-specific sections added
   (product grid, cart, checkout, compare, admin orders) — see the plan's
   "no shared library between templates" decision. */

/* Self-hosted: this was loading from fonts.googleapis.com, the exact CDN
   the main Raymon app's own site.css deliberately stopped depending on
   ("frequently slow or unreachable from Iran") — every storefront built
   on this template inherited that same dependency on every single page
   load. Vendored from the same two files the main app already ships,
   split the same way (Arabic-script range vs Latin/punctuation), so a
   customer's storefront no longer needs fonts.googleapis.com to be
   reachable at all to render its own body text. */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/vazirmatn-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

:root {
  --ec-bg: #f7f8fa;
  --ec-surface: #ffffff;
  --ec-text: #1c2230;
  --ec-text-muted: #6b7280;
  --ec-border: #e5e7eb;

  --ec-font-body: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ec-font-mono: 'Vazirmatn', ui-monospace, 'Courier New', monospace;

  /* Fallbacks — always overridden per-request by the design-token block,
     kept here only so the page never renders unstyled if that block is
     ever missing. */
  --ec-radius: 14px;
  --ec-gap: 14px;
  --ec-pad: 16px;
  --ec-tilt: 0deg;
  --ec-shadow: 0 10px 26px -16px rgba(0,0,0,0.35);
  --ec-heading-weight: 700;
  --ec-body-weight: 500;
  --ec-tracking: normal;
  --ec-font: var(--ec-font-body);
  --ec-accent: #4f6df5;
  --ec-accent-2: #22c3a6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ec-bg);
  color: var(--ec-text);
}

body {
  font-family: var(--ec-font-body);
  font-weight: var(--ec-body-weight);
  letter-spacing: var(--ec-tracking);
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: var(--ec-font);
  font-weight: var(--ec-heading-weight);
  letter-spacing: var(--ec-tracking);
  margin: 0 0 0.6em;
  color: var(--ec-text);
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; color: var(--ec-text); }

a { color: var(--ec-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Themed default for every plain text-like form control site-wide — added
   because individual components (.ec-search-input, .ec-filter-bar input,
   .ec-qty-input, .select-field, ...) each hand-rolled their own padding/
   border but several forgot background/color, so on any non-default-light
   preset they fell back to the browser's own white-background/black-text
   UA styling, clashing hard with a dark theme (confirmed live via a
   screenshot: Products/Index's search box and category/sort dropdowns
   rendered as plain white boxes against a dark page). Checkbox/radio/file
   inputs are excluded — they have their own native box, and padding/
   background on them would distort rather than theme their appearance.
   More specific rules (.ec-form-row input, etc.) already set the same
   background/color and simply continue to win via specificity. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  font-family: var(--ec-font-body);
  background: var(--ec-surface);
  color: var(--ec-text);
  border: 1px solid var(--ec-border);
  border-radius: calc(var(--ec-radius) - 4px);
  padding: 8px 12px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ec-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-accent) 20%, transparent);
}

.ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
.ec-muted { color: var(--ec-text-muted); font-size: 0.9em; }
.ec-body-text { white-space: pre-line; }

.ec-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.ec-section { padding: 48px 0; }
.ec-section-narrow { max-width: 560px; }

/* ---- Header / nav ---- */

.ec-header {
  background: var(--ec-surface);
  border-bottom: 1px solid var(--ec-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.ec-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ec-gap);
  padding: 14px 20px;
  /* Installed as a standalone PWA there's no browser chrome left to clear
     the notch/status bar for us — env() resolves to 0 in an ordinary
     browser tab, so this only ever adds space, never removes it. Requires
     viewport-fit=cover on the <meta name="viewport"> tag (see _Layout). */
  padding-top: max(14px, env(safe-area-inset-top));
}

.ec-brand {
  font-family: var(--ec-font);
  font-weight: var(--ec-heading-weight);
  font-size: 1.2rem;
  color: var(--ec-text);
}
.ec-brand:hover { text-decoration: none; color: var(--ec-accent); }

.ec-search-form {
  display: flex;
  gap: 8px;
  flex: 1;
  max-width: 360px;
  min-width: 180px;
}
.ec-search-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: calc(var(--ec-radius) - 4px);
  border: 1px solid var(--ec-border);
  font-family: var(--ec-font-body);
}

.ec-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.ec-nav a {
  color: var(--ec-text);
  font-weight: 600;
}
.ec-nav a:hover { color: var(--ec-accent); text-decoration: none; }

.ec-cart-link { position: relative; }
.ec-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-inline-start: 4px;
  border-radius: 999px;
  background: var(--ec-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Mobile-only header controls — hidden on desktop, where the nav already
   renders inline in the header row and needs no drawer at all. */
.ec-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--ec-border);
  background: transparent;
  color: var(--ec-text);
  cursor: pointer;
}
.ec-nav-toggle svg { width: 20px; height: 20px; }

.ec-cart-link-mobile { display: none; }

.ec-nav-head { display: none; }
.ec-nav-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--ec-border);
  background: transparent;
  color: var(--ec-text);
  cursor: pointer;
}
.ec-nav-close svg { width: 18px; height: 18px; }

.ec-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 239;
  background: rgba(15, 15, 20, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ec-nav-backdrop.show { opacity: 1; pointer-events: auto; }

/* Header layout variants (Services/HeaderVariants.cs) — every variant
   reuses .ec-header/.ec-header-row/.ec-brand/.ec-nav-toggle/.ec-cart-link*
   as-is (same base chrome, same off-canvas mobile nav below 720px); these
   modifier classes only change arrangement on top. */
.ec-header-row-centered {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
.ec-header-row-centered .ec-brand-centered { grid-column: 2; justify-self: center; text-align: center; }
.ec-header-row-centered .ec-nav { grid-column: 3; justify-self: end; }
.ec-header-row-centered .ec-nav-toggle { grid-column: 1; }
.ec-header-row-centered .ec-cart-link-mobile { grid-column: 3; }

.ec-header-row-sticky { padding: 8px 20px; padding-top: max(8px, env(safe-area-inset-top)); }
.ec-brand-sticky { font-size: 1rem; }

/* ---- Hero ---- */

.ec-hero {
  padding: 72px 0;
  text-align: center;
  background: linear-gradient(180deg, var(--ec-surface), var(--ec-bg));
  border-bottom: 1px solid var(--ec-border);
}

.ec-hero h1 { font-size: 2.4rem; }

.ec-hero-tagline {
  font-size: 1.1rem;
  color: var(--ec-text-muted);
  max-width: 600px;
  margin: 0 auto 1.6em;
}

/* ---- Hero variants (Services/HeroVariants.cs) ---- */

.ec-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ec-hero-actions-center { justify-content: center; }

.ec-hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ec-accent);
  margin-bottom: 8px;
}
.ec-hero-eyebrow-light { color: rgba(255,255,255,0.85); }

/* Image variant — a big photo hero with a dark scrim so white text stays
   readable over any uploaded image, same idiom as the .ec-home-banner
   caption gradient. Falls back to the plain Classic gradient background
   when no HeroImageUrl is set (see Pages/Shared/Hero/_HeroImage.cshtml). */
.ec-hero-cinematic {
  min-height: 46vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
}
.ec-hero-cinematic.ec-hero-has-image {
  color: #fff;
  border-bottom: none;
}
.ec-hero-cinematic.ec-hero-has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6));
}
.ec-hero-cinematic.ec-hero-has-image .ec-container { position: relative; z-index: 1; }
.ec-hero-cinematic.ec-hero-has-image .ec-hero-tagline { color: rgba(255,255,255,0.9); }

/* Slider variant — native scroll-snap track, auto-advanced by
   wwwroot/js/hero-slider.js. Same mechanism/markup as
   Raymon.RestaurantTemplate's own .rt-hero-slider. */
.ec-hero-slider { position: relative; background: var(--ec-bg); }
.ec-hero-slider-track {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  min-height: 220px;
  max-height: 380px;
  background: var(--ec-surface);
}

/* Slides stack on top of each other (touch-swipe/dot/timer-driven class
   toggle in hero-slider.js) and cross-fade — smoother and more uniform
   across devices than a scroll-snap "physically slide" approach. The slow
   opacity+scale transition below is the entire animation; the script only
   ever adds/removes .is-active. */
.ec-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 6s ease-out;
  pointer-events: none;
}
.ec-hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.ec-hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55));
}
.ec-hero-slide-content {
  position: relative;
  z-index: 1;
  padding: 24px var(--ec-pad) 28px;
  width: 100%;
}
.ec-hero-slide-content h2 { color: #fff; font-size: 1.4rem; margin: 0 0 4px; }
.ec-hero-slide-content p { color: rgba(255,255,255,0.9); margin: 0 0 14px; }
.ec-hero-slider-dots {
  position: absolute;
  bottom: 14px;
  inset-inline-end: 0;
  inset-inline-start: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.ec-hero-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: width 0.35s ease, border-radius 0.35s ease, background 0.35s ease;
}
.ec-hero-slider-dot.is-active { background: #fff; width: 20px; border-radius: 4px; }

/* Product Spotlight variant — split photo+content, mirrors
   Raymon.RestaurantTemplate's .rt-hero-split layout exactly. */
.ec-hero-split {
  display: flex;
  min-height: 420px;
}
.ec-hero-split-media {
  flex: 1 1 45%;
  background-size: cover;
  background-position: center;
  background-color: var(--ec-surface);
}
.ec-hero-split-content {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px var(--ec-pad);
}
.ec-hero-split-content h1 { margin: 0 0 10px; font-size: 2rem; }
.ec-hero-split-price { margin-bottom: 18px; }
@media (max-width: 720px) {
  .ec-hero-split { flex-direction: column; min-height: 0; }
  .ec-hero-split-media { min-height: 220px; }
  .ec-hero-split-content { padding: 24px var(--ec-pad); text-align: center; align-items: center; }
  .ec-hero-split-price { justify-content: center; }
}

/* Flash Sale variant — an urgency-styled band using the tenant's own
   accent gradient, showcasing real Product.IsOnSale rows. */
.ec-hero-flashsale {
  padding: 48px 0;
  color: #fff;
  background: linear-gradient(135deg, var(--ec-accent), var(--ec-accent-2));
}
.ec-hero-flashsale-inner { text-align: center; }
.ec-hero-flashsale-title { margin: 0 0 24px; font-size: 2rem; }
.ec-hero-flashsale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--ec-gap);
  max-width: 900px;
  margin: 0 auto 24px;
}
.ec-hero-flashsale-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  border-radius: var(--ec-radius);
  padding: 12px;
  color: #fff;
  text-align: start;
}
.ec-hero-flashsale-card:hover { text-decoration: none; background: rgba(255,255,255,0.2); }
.ec-hero-flashsale-thumb {
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--ec-radius) - 4px);
  background-size: cover;
  background-position: center;
}
.ec-hero-flashsale-card strong { font-size: 0.92rem; }
.ec-hero-flashsale-card .ec-price { color: #fff; }
.ec-hero-flashsale-card .ec-price-was { color: rgba(255,255,255,0.7); }
.ec-hero-flashsale-cta { color: #fff; border-color: rgba(255,255,255,0.6); }
.ec-hero-flashsale-cta:hover { border-color: #fff; color: #fff; }

@media (max-width: 720px) {
  .ec-hero-cinematic { min-height: 38vh; }
  .ec-hero-flashsale-title { font-size: 1.5rem; }
}

/* ---- Buttons / links ---- */

.ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--ec-radius);
  border: 1px solid transparent;
  font-family: var(--ec-font);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ec-btn:hover { text-decoration: none; transform: translateY(-1px); }

.ec-btn-sm { padding: 6px 14px; font-size: 0.85rem; }

.ec-btn-primary {
  background: var(--ec-accent);
  color: #fff;
  box-shadow: var(--ec-shadow);
}
.ec-btn-primary:hover { box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--ec-accent) 60%, transparent); }

.ec-btn-ghost {
  background: transparent;
  border-color: var(--ec-border);
  color: var(--ec-text);
}
.ec-btn-ghost:hover { border-color: var(--ec-accent); color: var(--ec-accent); }

.ec-link { color: var(--ec-accent); font-weight: 600; }

/* ---- Cards / grids ---- */

.ec-card {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: var(--ec-pad);
  box-shadow: var(--ec-shadow);
  transform: rotate(var(--ec-tilt));
}

.ec-home-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ec-gap);
  margin-top: 20px;
}
.ec-home-banner-slot {
  position: relative;
  display: block;
  border-radius: var(--ec-radius);
  overflow: hidden;
  box-shadow: var(--ec-shadow);
}
.ec-home-banner-slot img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.ec-home-banner-caption {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  padding: 12px var(--ec-pad);
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  color: #fff;
  font-weight: 600;
}

.ec-category-grid {
  display: grid;
  /* auto-fill (not auto-fit): with only a handful of categories, auto-fit
     collapses the unused tracks and lets the few real ones stretch to
     fill the whole row — a single category card would blow up to the
     page's full width. auto-fill keeps the track count based on
     container width regardless of item count, so sparse rows just leave
     blank space instead of ballooning the cards. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--ec-gap);
  margin-top: 20px;
}
.ec-category-card {
  display: block;
  text-align: center;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 18px var(--ec-pad);
  font-weight: 600;
  color: var(--ec-text);
}
.ec-category-card:hover { border-color: var(--ec-accent); color: var(--ec-accent); text-decoration: none; }

.ec-product-grid {
  display: grid;
  /* auto-fill, same reasoning as .ec-category-grid above — confirmed live:
     a catalog with a single product otherwise stretches that one card
     (and its aspect-ratio-1/1 image) to the full container width, which
     is exactly the "giant product photo" bug this fixes. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ec-gap);
  margin-top: 20px;
}

.ec-product-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ec-text);
}
.ec-product-card:hover { text-decoration: none; }
.ec-product-card img {
  border-radius: calc(var(--ec-radius) - 4px);
  aspect-ratio: var(--ec-pc-ratio, 1 / 1);
  object-fit: cover;
  margin-bottom: 4px;
}
.ec-product-card h3 { margin: 0; font-size: 1rem; }

.ec-price { font-family: var(--ec-font); font-weight: var(--ec-heading-weight); color: var(--ec-accent); }
.ec-price-lg { font-size: 1.4rem; }

/* Discounted pricing (Data/Catalog/Product.cs's DiscountPrice/IsOnSale) —
   shown wherever .ec-price already appears (card variants, product
   detail, cart, checkout), never a separate layout. */
.ec-price-row { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ec-price-was { font-size: 0.85em; color: var(--ec-muted, #888); text-decoration: line-through; }

.ec-compare-form { margin-top: 6px; }

/* Product card layout variants (Services/ProductCardVariants.cs) — the
   outer .ec-card.ec-product-card chrome (background/border/radius/shadow)
   and the base image/heading/price rules above are shared by every
   variant; these only rearrange them. */
.ec-product-card-horizontal a { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.ec-product-card-horizontal img { width: 88px; height: 88px; flex-shrink: 0; margin-bottom: 0; }
.ec-product-card-horizontal-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* min-height covers a product with no ImageUrl yet (a real, common state
   for a tenant that hasn't uploaded photos) — without it, this div
   collapses to zero height and the absolutely-positioned chip lands on
   top of the title below instead of the empty image area. */
.ec-product-card-badge-media { position: relative; min-height: 80px; }
.ec-product-card-badge-chip {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  background: var(--ec-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
/* Sits on the opposite side from the category chip above so a product
   that is both categorized and on sale shows both chips without overlap. */
.ec-product-card-sale-chip {
  inset-inline-start: auto;
  inset-inline-end: 8px;
  background: #e0334f;
}

/* ---- Product detail ---- */

.ec-product-detail { margin-top: 16px; }
.ec-product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 20px;
}
.ec-product-detail-image img { border-radius: var(--ec-radius); aspect-ratio: 1 / 1; object-fit: cover; }
.ec-product-detail-info { display: flex; flex-direction: column; gap: 10px; }

.ec-add-to-cart-form { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ec-add-to-cart-form label { display: flex; align-items: center; gap: 8px; font-weight: 600; }

.ec-qty-input { width: 70px; padding: 8px; border-radius: calc(var(--ec-radius) - 6px); border: 1px solid var(--ec-border); }
.ec-qty-form { display: flex; align-items: center; gap: 6px; }

/* ---- Filter bar ---- */

.ec-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 8px;
}
.ec-filter-bar input,
.ec-filter-bar select {
  padding: 8px 12px;
  border-radius: calc(var(--ec-radius) - 4px);
  border: 1px solid var(--ec-border);
  font-family: var(--ec-font-body);
}

/* ---- Cart / checkout tables ---- */

.ec-cart-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  overflow: hidden;
  margin-top: 16px;
}
.ec-cart-table th, .ec-cart-table td {
  padding: 12px 14px;
  text-align: start;
  border-bottom: 1px solid var(--ec-border);
  font-size: 0.92rem;
}
.ec-cart-table th { background: var(--ec-bg); font-weight: 700; }
.ec-cart-table tr:last-child td { border-bottom: none; }
.ec-cart-table-compact td { padding: 8px 14px; }

.ec-coupon-box { margin-top: 16px; }
.ec-coupon-form { display: flex; align-items: center; gap: 10px; }
.ec-coupon-form input { padding: 8px 12px; border-radius: calc(var(--ec-radius) - 4px); border: 1px solid var(--ec-border); }

.ec-summary {
  max-width: 360px;
  margin-top: 20px;
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ec-summary-row { display: flex; justify-content: space-between; font-size: 0.95rem; }
.ec-summary-discount { color: #15803d; }
.ec-summary-total { font-weight: var(--ec-heading-weight); font-size: 1.1rem; border-top: 1px solid var(--ec-border); padding-top: 8px; margin-top: 4px; }

/* ---- Compare ---- */

.ec-compare-table-wrap { overflow-x: auto; margin-top: 16px; }
.ec-compare-table { width: 100%; border-collapse: collapse; background: var(--ec-surface); border: 1px solid var(--ec-border); }
.ec-compare-table th, .ec-compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ec-border);
  border-inline-end: 1px solid var(--ec-border);
  text-align: center;
  vertical-align: top;
  font-size: 0.9rem;
}
.ec-compare-table th img { width: 100%; max-width: 140px; margin: 0 auto 8px; border-radius: calc(var(--ec-radius) - 4px); aspect-ratio: 1/1; object-fit: cover; }
.ec-compare-table td:first-child, .ec-compare-table th:first-child { text-align: start; font-weight: 600; background: var(--ec-bg); }

/* ---- Alerts / forms ---- */

.ec-alert {
  border-radius: var(--ec-radius);
  padding: 12px var(--ec-pad);
  margin-bottom: 20px;
}
.ec-alert-success {
  background: color-mix(in srgb, #16a34a 15%, transparent);
  border: 1px solid #16a34a;
  color: #15803d;
}
.ec-alert-error {
  background: color-mix(in srgb, #dc2626 12%, transparent);
  border: 1px solid #dc2626;
  color: #b91c1c;
}
/* Third member of the same family — for a state that is not an error but
   does need acting on before a setting will do anything (e.g. turning on
   the discount section while no product is discounted). */
.ec-alert-warn {
  background: color-mix(in srgb, #d97706 12%, transparent);
  border: 1px solid #d97706;
  color: #b45309;
}
.ec-alert-warn p { margin: 6px 0 0; }

.ec-form { display: flex; flex-direction: column; gap: var(--ec-gap); max-width: 560px; }

.ec-form-row { display: flex; flex-direction: column; gap: 6px; }
.ec-form-row label { font-weight: 600; font-size: 0.92rem; }

.ec-form-row input,
.ec-form-row textarea,
.ec-form-row select {
  font-family: var(--ec-font-body);
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: calc(var(--ec-radius) - 4px);
  border: 1px solid var(--ec-border);
  background: var(--ec-surface);
  color: var(--ec-text);
}
.ec-form-row input:focus,
.ec-form-row textarea:focus,
.ec-form-row select:focus {
  outline: none;
  border-color: var(--ec-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-accent) 20%, transparent);
}

.ec-form-row-checkbox { flex-direction: row; align-items: center; gap: 8px; }
.ec-form-row-checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 500; }

.ec-form-error { color: #dc2626; font-size: 0.85rem; }
.ec-form-success { color: #16a34a; font-size: 0.9rem; font-weight: 600; margin: 8px 0; }

.ec-dashboard-tile-link { text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease; }
.ec-dashboard-tile-link:hover { text-decoration: none; border-color: var(--ec-accent); transform: translateY(-2px); }

/* ---- Footer ---- */

.ec-footer {
  background: var(--ec-surface);
  border-top: 1px solid var(--ec-border);
  margin-top: 40px;
  padding: 40px 0;
}

.ec-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.ec-footer p { margin: 4px 0; }

.ec-social-links { display: flex; gap: 14px; }
.ec-social-links a { font-weight: 600; }

/* ---- Feature/status pills ---- */

.ec-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
}
.ec-pill-ok { background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; border-color: #16a34a; }
.ec-pill-muted { background: color-mix(in srgb, var(--ec-text-muted) 15%, transparent); color: var(--ec-text-muted); border-color: var(--ec-border); }

/* ---- Custom-section picker (Admin/HomePageSections/Edit) ---- */

.ec-cs-picker { margin-top: 10px; }
.ec-cs-picker-toolbar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ec-cs-picker-search { flex: 1; min-width: 180px; }
.ec-cs-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ec-cs-picker-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: start;
  background: var(--ec-surface);
  border: 1.5px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 12px var(--ec-pad);
  cursor: pointer;
  color: var(--ec-text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ec-cs-picker-card:hover { border-color: var(--ec-accent); }
.ec-cs-picker-card.selected {
  border-color: var(--ec-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ec-accent) 30%, transparent);
}
.ec-cs-picker-card strong { font-size: 0.95rem; }
.ec-cs-picker-card-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ec-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ec-cs-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ec-cs-badge.free { background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; }
.ec-cs-badge.beta { background: color-mix(in srgb, #d97706 18%, transparent); color: #b45309; }
.ec-cs-picker-pagination { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* ---- Admin shell ---- */

.ec-admin-body { background: var(--ec-bg); }

.ec-admin-shell {
  display: flex;
  min-height: 100vh;
}

.ec-admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--ec-surface);
  border-inline-end: 1px solid var(--ec-border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ec-admin-brand { font-weight: 700; font-size: 1.05rem; }

.ec-admin-sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ec-admin-sidebar nav a {
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ec-text);
  font-weight: 500;
}
.ec-admin-sidebar nav a:hover { background: var(--ec-bg); text-decoration: none; color: var(--ec-accent); }
.ec-admin-sidebar nav a.active { background: color-mix(in srgb, var(--ec-accent) 12%, transparent); color: var(--ec-accent); font-weight: 700; }

.ec-admin-logout { margin-top: auto; }

.ec-admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ec-admin-content {
  flex: 1;
  min-width: 0;
  padding: 32px;
}

/* Mobile-only topbar carrying the drawer toggle — hidden on desktop, where
   the sidebar is already always visible and needs no toggle at all. */
.ec-admin-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ec-border);
  background: var(--ec-surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.ec-admin-topbar-title { font-weight: 700; }

.ec-admin-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--ec-border);
  background: transparent;
  color: var(--ec-text);
  cursor: pointer;
}
.ec-admin-drawer-toggle svg { width: 20px; height: 20px; }

.ec-admin-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 239;
  background: rgba(15, 15, 20, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ec-admin-backdrop.show { opacity: 1; pointer-events: auto; }

.ec-admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ec-admin-form { max-width: 640px; }
.ec-admin-form h2 { margin-top: 24px; font-size: 1.1rem; }
.ec-admin-form h2:first-child { margin-top: 0; }

.ec-admin-order-info {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: var(--ec-pad);
  margin: 16px 0;
}
.ec-admin-order-info p { margin: 4px 0; }

.ec-admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ec-gap);
}

.ec-admin-stat-tile {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: var(--ec-pad);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-admin-stat-value {
  font-family: var(--ec-font);
  font-size: 1.8rem;
  font-weight: var(--ec-heading-weight);
  color: var(--ec-accent);
}

.ec-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ec-gap);
}

.ec-trend-card {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: var(--ec-pad);
}

.ec-trend-card h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: var(--ec-heading-weight);
  color: var(--ec-text-muted);
}

.trend-chart {
  width: 100%;
  height: 90px;
  display: block;
}

.ec-admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  overflow: hidden;
}
.ec-admin-table th, .ec-admin-table td {
  padding: 10px 14px;
  text-align: start;
  border-bottom: 1px solid var(--ec-border);
  font-size: 0.92rem;
}
.ec-admin-table th { background: var(--ec-bg); font-weight: 700; }
.ec-admin-table tr:last-child td { border-bottom: none; }

.ec-drag-handle { width: 28px; cursor: grab; color: var(--ec-muted); text-align: center; user-select: none; }
.ec-draggable-row.ec-dragging { opacity: 0.4; }
.ec-draggable-row:active .ec-drag-handle { cursor: grabbing; }

.ec-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.ec-feature-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.ec-feature-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ec-border);
  border-radius: calc(var(--ec-radius) - 4px);
  font-weight: 500;
}

.ec-feature-toggle-disabled { color: var(--ec-text-muted); }

/* ---- Auth (Login/Register) ---- */

.ec-auth-section { display: flex; justify-content: center; }
.ec-auth-card {
  width: 100%;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: calc(var(--ec-pad) * 1.6);
  box-shadow: var(--ec-shadow);
}
.ec-auth-card h1 { margin-bottom: 4px; }
.ec-auth-switch { margin-top: 18px; text-align: center; font-size: 0.92rem; }

.ec-btn-block { width: 100%; }

.ec-nav-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--ec-text);
  font-weight: 600;
  font-family: var(--ec-font-body);
  font-size: inherit;
  cursor: pointer;
}
.ec-nav-link-btn:hover { color: var(--ec-accent); text-decoration: underline; }
.ec-logout-form { display: inline; }

/* ---- My orders / wishlist ---- */

.ec-section-subtitle { margin-top: 40px; }

.ec-order-list { display: flex; flex-direction: column; gap: var(--ec-gap); margin-top: 16px; }
.ec-order-card {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: var(--ec-pad);
}
.ec-order-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ec-order-card-items { margin: 12px 0; display: flex; flex-direction: column; gap: 4px; }
.ec-order-card-item { display: flex; justify-content: space-between; font-size: 0.92rem; }
.ec-order-card-total {
  display: flex;
  justify-content: space-between;
  font-weight: var(--ec-heading-weight);
  border-top: 1px solid var(--ec-border);
  padding-top: 8px;
}

/* ---- Wishlist toggle + ratings/reviews ---- */

.ec-product-detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ec-product-detail-title-row h1 { margin-bottom: 0; }

.ec-wishlist-form { flex-shrink: 0; }
.ec-wishlist-btn {
  background: transparent;
  border: 1px solid var(--ec-border);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ec-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ec-wishlist-btn:hover { border-color: #dc2626; color: #dc2626; transform: scale(1.05); }
.ec-wishlist-btn-active { border-color: #dc2626; color: #dc2626; background: color-mix(in srgb, #dc2626 10%, transparent); }

.ec-rating-summary { display: flex; align-items: center; gap: 6px; }
.ec-rating-stars { color: #d97706; font-weight: 700; letter-spacing: 1px; }

.ec-reviews-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ec-border); }
.ec-review-form { margin-top: 16px; margin-bottom: 28px; }
.ec-review-list { display: flex; flex-direction: column; gap: var(--ec-gap); margin-top: 12px; }
.ec-review-item {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: var(--ec-pad);
}
.ec-review-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ec-review-item p { margin: 6px 0; }

/* ---- Live chat widget ---- */

.ec-chat-widget {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: 20px;
  z-index: 60;
}

.ec-chat-toggle {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--ec-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s;
}
.ec-chat-toggle:hover { transform: scale(1.05); }

.ec-chat-toggle svg { width: 26px; height: 26px; }

.ec-chat-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ec-bg);
}
/* Same equal-specificity trap as .ec-chat-panel[hidden] below — without
   this, "display: flex" above always beats the [hidden] attribute and the
   badge (and whatever count it was last showing) never actually goes away,
   even after setUnread(0) sets the hidden attribute back on. */
.ec-chat-badge[hidden] { display: none; }

.ec-chat-panel {
  position: absolute;
  inset-block-end: 68px;
  inset-inline-start: 0;
  width: 340px;
  max-width: calc(100vw - 40px);
  height: 460px;
  max-height: calc(100vh - 140px);
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The [hidden] attribute selector and the class selector above are equal
   specificity, and this stylesheet loads after the browser's own UA
   styles — so without this rule, "display: flex" above always wins and
   the panel never actually hides, no matter how many times chat-widget.js
   toggles the hidden attribute (confirmed live: the panel rendered fully
   open on a fresh page load with zero clicks). */
.ec-chat-panel[hidden] { display: none; }

.ec-chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--ec-accent);
  color: #fff;
  font-weight: var(--ec-heading-weight);
}

.ec-chat-panel-head button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.ec-chat-panel-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec-chat-empty {
  color: var(--ec-text-muted);
  font-size: 0.9rem;
}

.ec-chat-bubble-row { display: flex; }
.ec-chat-bubble-row.mine { justify-content: flex-end; }
.ec-chat-bubble-row.theirs { justify-content: flex-start; }

.ec-chat-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: calc(var(--ec-radius) - 4px);
  font-size: 0.9rem;
}

.ec-chat-bubble-row.mine .ec-chat-bubble { background: var(--ec-accent); color: #fff; }
.ec-chat-bubble-row.theirs .ec-chat-bubble { background: var(--ec-bg); border: 1px solid var(--ec-border); }
.ec-chat-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }

/* Send-status: a bubble we just rendered optimistically (see
   chat-widget.js's sendPayload) shows a spinner until the server echoes
   it back with a matching clientId, or "ارسال نشد" if the socket wasn't
   even open to try. A normal, already-confirmed bubble has neither. */
.ec-chat-bubble.sending { opacity: 0.65; }
.ec-chat-bubble.error { border: 1px solid #dc2626; }
.ec-chat-bubble-status {
  display: block;
  min-height: 1em;
  margin-top: 3px;
  font-size: 0.72rem;
  opacity: 0.8;
}
.ec-chat-bubble.error .ec-chat-bubble-status { color: #fecaca; font-weight: 600; }
.ec-chat-bubble-row.theirs .ec-chat-bubble.error .ec-chat-bubble-status { color: #dc2626; }

.ec-chat-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  animation: ec-chat-spin 0.7s linear infinite;
}
@keyframes ec-chat-spin { to { transform: rotate(360deg); } }

.ec-chat-attachment-image { display: block; margin-top: 6px; }
.ec-chat-attachment-image img {
  max-width: 100%;
  max-height: 160px;
  border-radius: calc(var(--ec-radius) - 6px);
  display: block;
}
.ec-chat-attachment-file {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: calc(var(--ec-radius) - 6px);
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 0.82rem;
  text-decoration: none;
  color: inherit;
}
.ec-chat-attachment-file svg { width: 16px; height: 16px; flex-shrink: 0; }

.ec-chat-panel-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--ec-border);
}
/* Same [hidden]-vs-class-selector specificity trap as .ec-chat-panel and
   .ec-chat-badge above — chat-widget.js now toggles this form's hidden
   attribute while the guest name+phone gate is shown, so it needs the same
   explicit override or "display: flex" above always wins. */
.ec-chat-panel-form[hidden] { display: none; }

.ec-chat-panel-form input[type="text"] {
  flex: 1;
  border: 1px solid var(--ec-border);
  border-radius: calc(var(--ec-radius) - 4px);
  padding: 8px 10px;
  font-family: var(--ec-font);
}

.ec-chat-panel-form button,
.ec-chat-file-btn {
  background: var(--ec-accent);
  color: #fff;
  border: none;
  border-radius: calc(var(--ec-radius) - 4px);
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ec-chat-file-btn { background: var(--ec-bg); color: var(--ec-text); border: 1px solid var(--ec-border); }
.ec-chat-file-btn:disabled { opacity: 0.5; cursor: default; }

.ec-chat-panel-form button svg,
.ec-chat-file-btn svg { width: 18px; height: 18px; }

.ec-chat-gate-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--ec-border);
}
.ec-chat-gate-intro { font-size: 0.82rem; color: var(--ec-text-muted); margin: 0 0 2px; }
.ec-chat-gate-form input {
  border: 1px solid var(--ec-border);
  border-radius: calc(var(--ec-radius) - 4px);
  padding: 8px 10px;
  font-family: var(--ec-font);
}
.ec-chat-gate-form button { width: 100%; }
.ec-chat-gate-form[hidden] { display: none; }

@media (max-width: 480px) {
  .ec-chat-widget { inset-block-end: 12px; inset-inline-start: 12px; }
  .ec-chat-panel {
    width: calc(100vw - 24px);
    height: calc(100dvh - 120px);
    max-height: none;
    inset-inline-start: -4px;
  }
}

.ec-chat-bubble-time {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  opacity: 0.7;
}

/* ---- Admin chat inbox (Admin/Chat/Index + Details) ---- */

.ec-chat-conv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ec-chat-conv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  color: inherit;
  text-decoration: none;
}

.ec-chat-conv-row.unread { border-color: var(--adm-accent); }

.ec-chat-conv-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ec-chat-conv-info span {
  color: var(--adm-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-chat-conv-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--adm-text-muted);
}

.ec-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding: 14px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  margin-bottom: 14px;
}

/* Toast notifications now live in Raymon.AdminUI's own toast.css/toast.js
   (loaded above, alongside ecommerce.css) — see that file's own comment.
   window.ecToast is an alias for window.admToast, same implementation. */

/* ---- Responsive ---- */

@media (max-width: 720px) {
  /* Brand + cart + menu on the first line, the search field on its own full-width line below — squeezing all of
     them into one 390px row left the search box a few pixels wide. */
  .ec-header-row { flex-wrap: wrap; row-gap: 10px; padding-block: 10px; }
  .ec-nav-toggle { display: flex; }
  .ec-brand { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ec-search-form { order: 9; flex: 1 1 100%; min-width: 0; max-width: none; }
  .ec-cart-link-mobile { display: inline-flex; position: relative; flex-shrink: 0; }
  .ec-cart-link-mobile svg { width: 22px; height: 22px; }
  .ec-nav-backdrop { display: block; }
  .ec-nav {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    z-index: 240;
    width: min(80vw, 300px);
    background: var(--ec-surface);
    border-inline-end: 1px solid var(--ec-border);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    padding: 16px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .ec-nav.open { transform: translateX(0); }
  .ec-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .ec-nav a, .ec-nav .ec-nav-link-btn { padding: 10px 8px; }
  .ec-hero { padding: 48px 0; }
  .ec-hero h1 { font-size: 1.8rem; }
  .ec-section { padding: 32px 0; }
  .ec-product-detail-grid { grid-template-columns: 1fr; }
  .ec-summary { margin-inline-start: 0; max-width: none; }
  .ec-admin-topbar { display: flex; }
  .ec-admin-backdrop { display: block; }
  .ec-admin-sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    z-index: 240;
    width: min(80vw, 280px);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .ec-admin-sidebar.open { transform: translateX(0); }
  .ec-admin-content { padding: 20px; }
  .ec-auth-card { padding: var(--ec-pad); }
  .ec-order-card-head, .ec-review-item-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Admin/Appearance/Index — a two-step "pick which of the three (header /
   hero / product card) you want, then edit just that one" flow, plus a
   live iframe preview (see Services/HeaderVariants.cs and
   Services/ProductCardVariants.cs). All three editors share the same
   .adm-variant-grid/.adm-variant-card component (see adminui.css) instead
   of each having its own picker look — that inconsistency (a small tile
   grid with a badge for two of them, a bigger description card with no
   badge for the third) was the actual complaint this replaced. */
.ec-appearance-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 24px; margin-top: 20px; align-items: start; }

.ec-appearance-menu { display: flex; flex-direction: column; gap: 10px; }
/* An unconditional `display` on the element itself beats the UA
   stylesheet's `[hidden] { display: none }` (author rules always win over
   UA ones, regardless of specificity) — without this override, toggling
   the `hidden` attribute from JS silently did nothing and both the picker
   menu and the open editor rendered stacked on top of each other. */
.ec-appearance-menu[hidden] { display: none; }
.ec-appearance-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ec-appearance-menu-item:hover { border-color: var(--adm-accent); transform: translateY(-1px); }
.ec-appearance-menu-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--adm-accent) 12%, transparent);
  color: var(--adm-accent);
}
.ec-appearance-menu-icon svg { width: 20px; height: 20px; }
.ec-appearance-menu-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ec-appearance-menu-text strong { font-size: 0.98rem; }
.ec-appearance-menu-text .adm-muted { font-size: 0.82rem; }
.ec-appearance-menu-chevron { font-size: 1.3rem; color: var(--adm-text-muted); transform: scaleX(-1); }

/* Step 2: one editor at a time. Each stays in the DOM at all times (just
   [hidden]), so its inputs keep posting/validating/driving the live
   preview exactly as if this were still one long single-step form. */
.ec-appearance-editor { margin-bottom: 28px; }
.ec-appearance-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; margin-bottom: 14px;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--adm-text-muted); cursor: pointer;
}
.ec-appearance-back:hover { color: var(--adm-accent); }
.ec-appearance-back svg { width: 16px; height: 16px; transform: scaleX(-1); }

.ec-appearance-preview { position: sticky; top: 20px; }
.ec-appearance-preview-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ec-appearance-preview-toggle { display: flex; gap: 6px; }
.ec-appearance-preview-frame-wrap {
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  overflow: hidden;
  height: 70vh;
  min-height: 420px;
  max-width: 100%;
  margin: 0;
  background: #fff;
  transition: max-width 0.2s ease;
}
.ec-appearance-preview-frame-wrap iframe { width: 100%; height: 100%; border: 0; }
.ec-appearance-preview-frame-wrap.ec-appearance-preview-mobile { max-width: 390px; margin: 0 auto; }

@media (max-width: 900px) {
  .ec-appearance-layout { grid-template-columns: 1fr; }
  .ec-appearance-preview { position: static; }
}

/* Site-wide announcement slot (see HomePageSectionPlacements). Sits above
   the header on every page, so it is kept visually quiet by default — a
   full-bleed strip rather than a padded section — and whatever section the
   owner puts in it supplies its own look. */
.ec-sitewide-announcement { width: 100%; }
.ec-sitewide-announcement .ec-section { padding-block: 8px; }

/* Responsive CSS backgrounds (see Raymon.PlatformShared.ResponsiveBackgroundTagHelper): smaller copy on narrow screens. */
@media (max-width: 900px) { .bg-resp { background-image: var(--bg-md) !important; } }
@media (max-width: 420px) and (max-resolution: 1.5dppx) { .bg-resp { background-image: var(--bg-sm, var(--bg-md)) !important; } }