/* LIBSEH design system — customer site + merchant dashboard. Does not restyle platform-owner admin. */
:root {
  --ls-burgundy: #66001f;
  --ls-burgundy-dark: #5D142C;
  --ls-olive: #59633A;
  --ls-olive-light: #7A825E;
  --ls-beige: #E8D8BE;
  --ls-ivory: #FBF7F0;
  --ls-white: #FFFFFF;
  --ls-ink: #31352C;
  --ls-muted: #5C5F54;
  --ls-line: #E8D8BE;
  --ls-ok: #59633A;
  --ls-warn: #C4A35A;
  --ls-err: #9B2C2C;
  --ls-radius: 18px;
  --ls-radius-sm: 12px;
  --ls-radius-pill: 12px;
  --ls-shadow: none;
  --ls-space: clamp(16px, 2.4vw, 32px);
  --ls-header: 72px;
  --ls-touch: 44px;
  --ls-font: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Heebo", sans-serif;
}

html body:not(.admin-view),
html body.merchant-view {
  --burgundy: var(--ls-burgundy);
  --olive: var(--ls-olive);
  --ink: var(--ls-ink);
  --cream: var(--ls-ivory);
  background: var(--ls-ivory);
  color: var(--ls-ink);
  font-family: var(--ls-font);
}

html body.lang-he:not(.admin-view),
html body.lang-he.merchant-view {
  font-family: "Heebo", "Cairo", sans-serif;
}

html body:not(.admin-view) .pill,
html body.merchant-view .pill,
html body:not(.admin-view) button:not(.hero-dots button),
html body.merchant-view button {
  min-height: var(--ls-touch);
}

html body:not(.admin-view) .pill.primary,
html body.merchant-view .pill.primary {
  background: var(--ls-burgundy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ls-radius-pill) !important;
  box-shadow: none !important;
}
html body:not(.admin-view) .pill.primary:hover,
html body.merchant-view .pill.primary:hover {
  background: var(--ls-burgundy-dark) !important;
}
html body:not(.admin-view) .pill.secondary,
html body:not(.admin-view) .pill.ghost,
html body.merchant-view .pill.secondary,
html body.merchant-view .pill.ghost {
  background: var(--ls-white) !important;
  color: var(--ls-olive) !important;
  border: 1.5px solid var(--ls-olive) !important;
  border-radius: var(--ls-radius-pill) !important;
  box-shadow: none !important;
}
html body:not(.admin-view) .pill.danger,
html body.merchant-view .pill.danger {
  background: #f8ecec !important;
  color: var(--ls-err) !important;
  border: 1px solid #e8c9c9 !important;
}
html body:not(.admin-view) .pill:disabled,
html body:not(.admin-view) .pill.is-loading,
html body.merchant-view .pill:disabled {
  opacity: .55;
  pointer-events: none;
}

html body:not(.admin-view) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body:not(.admin-view) select,
html body:not(.admin-view) textarea,
html body.merchant-view input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body.merchant-view select,
html body.merchant-view textarea {
  min-height: var(--ls-touch);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm);
  background: var(--ls-white);
  color: var(--ls-ink);
  font: inherit;
  font-size: 16px;
}
html body:not(.admin-view) input:focus,
html body:not(.admin-view) select:focus,
html body:not(.admin-view) textarea:focus,
html body.merchant-view input:focus,
html body.merchant-view select:focus,
html body.merchant-view textarea:focus {
  outline: 2px solid rgba(120, 29, 58, .28);
  outline-offset: 1px;
  border-color: var(--ls-burgundy);
}

html body:not(.admin-view) .empty-state,
html body.merchant-view .empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px 18px;
  text-align: center;
  background: var(--ls-white);
  border: 1px dashed var(--ls-line);
  border-radius: var(--ls-radius);
  color: var(--ls-muted);
}
.ls-skeleton {
  background: linear-gradient(90deg, #efe8dc 25%, #f7f1e8 50%, #efe8dc 75%);
  background-size: 200% 100%;
  animation: ls-shimmer 1.2s ease infinite;
  border-radius: 12px;
  min-height: 14px;
}
@keyframes ls-shimmer {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-skeleton { animation: none; }
}

html body:not(.admin-view) .luxe-product-card,
html body:not(.admin-view) .directory-store,
html body:not(.admin-view) .order-card,
html body:not(.admin-view) .account-card,
html body:not(.admin-view) .featured-store {
  background: var(--ls-white);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
}
html body:not(.admin-view) .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  color: var(--ls-ink);
}
html body:not(.admin-view) .luxe-product-card img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  background: var(--ls-beige);
}

/* Hero: light ivory panel that sits low and does not cover the subject */
html body.home-page:not(.admin-view) .home-hero {
  border-radius: 0 !important;
}
html body.home-page:not(.admin-view) .hero-panel {
  background: rgba(251, 247, 240, .78) !important;
  border: 1px solid rgba(230, 222, 210, .9) !important;
  border-radius: 22px !important;
  box-shadow: var(--ls-shadow) !important;
  backdrop-filter: none !important;
  padding: 18px 18px 16px !important;
  max-width: min(420px, 92%) !important;
  width: min(420px, calc(100% - 24px)) !important;
  justify-self: start !important;
  margin-bottom: 28px !important;
}
html body.home-page:not(.admin-view) .hero-panel h1,
html body.home-page:not(.admin-view) .hero-panel .hero-title {
  color: var(--ls-burgundy) !important;
  font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
  text-shadow: none !important;
}
html body.home-page:not(.admin-view) .hero-panel p,
html body.home-page:not(.admin-view) .hero-panel .eyebrow {
  color: var(--ls-ink) !important;
  text-shadow: none !important;
}
html body.home-page:not(.admin-view) .hero-panel .pill.ghost {
  background: transparent !important;
  color: var(--ls-olive) !important;
  border: 1.5px solid var(--ls-olive) !important;
}
html body.home-page:not(.admin-view) .hero-arrows {
  position: absolute;
  inset-inline: 12px;
  top: 46%;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
html body.home-page:not(.admin-view) .hero-arrows button {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 247, 240, .88);
  color: var(--ls-burgundy);
}
html body.home-page:not(.admin-view) .home-hero .hero-dots button {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  background: rgba(120, 29, 58, .28) !important;
  border: 0 !important;
  border-radius: 99px !important;
}
html body.home-page:not(.admin-view) .home-hero .hero-dots button.is-active {
  width: 20px !important;
  background: var(--ls-burgundy) !important;
}

html body:not(.admin-view) .main-category-circles {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  padding: 8px 4px 16px !important;
  scroll-snap-type: x mandatory;
}
html body:not(.admin-view) .main-category {
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-align: center;
  text-decoration: none;
  color: var(--ls-ink);
  min-width: 92px;
}
html body:not(.admin-view) .main-category span,
html body:not(.admin-view) .main-category img {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid transparent;
}
html body:not(.admin-view) .main-category:hover span,
html body:not(.admin-view) .main-category.active span {
  border-color: var(--ls-burgundy);
}

html body:not(.admin-view) .status-badge,
html body:not(.admin-view) .order-status,
html body.merchant-view .m-st {
  border-radius: var(--ls-radius-pill);
  padding: 4px 10px;
  font-size: .82rem;
  font-weight: 700;
}

html body.merchant-view .aya-shell,
html body.merchant-view .merchant-dashboard {
  background: var(--ls-ivory);
  color: var(--ls-ink);
}
html body.merchant-view .merchant-panel,
html body.merchant-view .m-kpi,
html body.merchant-view .m-block,
html body.merchant-view .m-welcome {
  background: var(--ls-white);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
}
html body.merchant-view .aya-field-hint,
html body.merchant-view .field-hint {
  color: var(--ls-muted);
  font-size: .85rem;
  font-weight: 400;
}
html body.merchant-view .aya-nav a {
  min-height: var(--ls-touch);
  border-radius: 12px;
  color: var(--ls-ink);
}
html body.merchant-view .aya-nav a.active {
  background: var(--ls-beige);
  color: var(--ls-burgundy);
}
html body:not(.admin-view) .featured-store {
  position: relative;
  overflow: visible;
  padding: 12px 12px 16px;
}
html body:not(.admin-view) .featured-store-cover {
  display: block;
  height: 72px;
  margin: -12px -12px 8px;
  background: var(--ls-beige) center/cover no-repeat;
}
html body:not(.admin-view) .featured-store-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
html body:not(.admin-view) .store-card-more {
  position: relative;
  margin-inline-start: auto;
}
html body:not(.admin-view) .store-card-more summary {
  list-style: none;
  cursor: pointer;
}
html body:not(.admin-view) .store-card-more summary::-webkit-details-marker { display: none; }
html body:not(.admin-view) .store-card-more > div {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 4;
  min-width: 180px;
  padding: 8px;
  background: var(--ls-white);
  border: 1px solid var(--ls-line);
  border-radius: 14px;
  box-shadow: var(--ls-shadow);
  display: grid;
  gap: 4px;
}
html body:not(.admin-view) .store-card-more button,
html body:not(.admin-view) .store-card-more a {
  min-height: var(--ls-touch);
  border: 0;
  background: transparent;
  text-align: start;
  color: var(--ls-ink);
  text-decoration: none;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}
html body:not(.admin-view) .color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ls-olive-light);
  border: 1px solid var(--ls-line);
  vertical-align: middle;
  margin-inline-end: 4px;
}
html body:not(.admin-view) .welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(49, 53, 44, .28);
}
html body:not(.admin-view) .welcome-card {
  width: min(440px, 100%);
  background: var(--ls-ivory);
  border: 1px solid var(--ls-line);
  border-radius: 24px;
  padding: 28px 22px 22px;
  position: relative;
  box-shadow: var(--ls-shadow);
  animation: ls-welcome .35s ease;
}
html body:not(.admin-view) .welcome-card h2 { color: var(--ls-burgundy); }
html body:not(.admin-view) .welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
@keyframes ls-welcome {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body:not(.admin-view) .welcome-card { animation: none; }
}
html body:not(.admin-view) .libseh-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 253, 249, .94);
  border-bottom: 1px solid var(--ls-line);
  padding-top: env(safe-area-inset-top, 0px);
}
html body.merchant-view .merchant-table {
  display: grid;
  gap: 12px;
}
@media (max-width: 820px) {
  html body:not(.admin-view) .luxe-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 360px) {
  html body:not(.admin-view) .luxe-product-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  html body.home-page:not(.admin-view) .hero-panel {
    justify-self: stretch !important;
    max-width: calc(100% - 16px) !important;
    width: calc(100% - 16px) !important;
    margin-inline: auto !important;
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body.home-page:not(.admin-view) .hero-arrows { display: none; }
  html body:not(.admin-view) .main-category img,
  html body:not(.admin-view) .main-category span {
    width: 76px !important;
    height: 76px !important;
  }
}
@media (min-width: 1024px) {
  html body:not(.admin-view) .luxe-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

html body:not(.admin-view):not(.merchant-view) .customer-bottom-nav a,
html body:not(.admin-view):not(.merchant-view) .customer-bottom-nav button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-height: 52px !important;
  padding: 4px 2px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ls-ink) !important;
  text-decoration: none !important;
}
html body:not(.admin-view):not(.merchant-view) .customer-bottom-nav a.active {
  color: var(--ls-burgundy) !important;
}
html body:not(.admin-view):not(.merchant-view) .customer-bottom-nav a span:not(.bottom-cart-icon):not(.header-cart-icon),
html body:not(.admin-view):not(.merchant-view) .customer-bottom-nav button span:not(.bottom-cart-icon) {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: inherit !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
  background: none !important;
}
html body.has-orders-nav:not(.admin-view):not(.merchant-view) .customer-bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
html body.has-orders-nav:not(.admin-view):not(.merchant-view) .customer-bottom-nav a span {
  font-size: 11px !important;
}

/* Header icon row: thin line icons in brand burgundy, circular count badges */
html body:not(.admin-view):not(.merchant-view) .header-tools {
  gap: 2px !important;
}
html body:not(.admin-view):not(.merchant-view) .header-tools .round-icon,
html body:not(.admin-view):not(.merchant-view) .header-tools .account-menu summary.round-icon {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ls-burgundy) !important;
  display: grid !important;
  place-items: center !important;
}
html body:not(.admin-view):not(.merchant-view) .header-tools .round-icon:hover,
html body:not(.admin-view):not(.merchant-view) .header-tools .round-icon:focus-visible,
html body:not(.admin-view):not(.merchant-view) .header-tools .account-menu[open] summary.round-icon {
  color: var(--ls-burgundy-dark) !important;
  background: transparent !important;
}
html body:not(.admin-view):not(.merchant-view) .header-tools .round-icon svg,
html body:not(.admin-view):not(.merchant-view) .header-tools .account-menu summary.round-icon svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body:not(.admin-view):not(.merchant-view) .header-tools .header-fav > span,
html body:not(.admin-view):not(.merchant-view) .header-tools .header-bell > span,
html body:not(.admin-view):not(.merchant-view) .header-tools .bottom-cart-badge {
  position: absolute !important;
  top: auto !important;
  inset-block-start: -4px !important;
  inset-inline-end: -6px !important;
  inset-inline-start: auto !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: var(--ls-burgundy) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
}

/* Featured stores: circular portraits in white cards */
html body:not(.admin-view) #featured-stores {
  background: var(--ls-ivory);
}
html body:not(.admin-view) #featured-stores .home-section-head .eyebrow {
  color: var(--ls-olive) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}
html body:not(.admin-view) #featured-stores .home-section-head h2 {
  color: var(--ls-burgundy) !important;
}
html body:not(.admin-view) #featured-stores .featured-store-cover {
  display: none !important;
}
html body:not(.admin-view) #featured-stores .featured-store-avatar {
  display: grid;
  place-items: center;
  width: min(38vw, 132px);
  height: min(38vw, 132px);
  padding: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #FBF7F0 62%, transparent 63%),
    repeating-conic-gradient(
      from 12deg,
      #66001f 0 8deg,
      #E8D8BE 8deg 16deg,
      #59633A 16deg 20deg,
      #E8D8BE 20deg 28deg
    );
  box-shadow: 0 0 0 3px #E8D8BE, 0 8px 18px rgba(120, 29, 58, .08);
}
html body:not(.admin-view) #featured-stores .featured-store-avatar img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid #FFFDF9 !important;
  border-radius: 50% !important;
  background: #E8D8BE !important;
  object-fit: cover !important;
  object-position: center 18% !important;
}
html body:not(.admin-view) #featured-stores .featured-store-avatar img[data-fit="contain"] {
  object-fit: contain !important;
  object-position: center !important;
  background: #FBF7F0 !important;
  padding: 10px !important;
}
html body:not(.admin-view) .stores-page .store-card-logo {
  padding: 5px;
  background:
    radial-gradient(circle at 50% 50%, #FFFDF9 62%, transparent 63%),
    repeating-conic-gradient(from 12deg, #66001f 0 8deg, #E8D8BE 8deg 16deg, #59633A 16deg 20deg, #E8D8BE 20deg 28deg);
  border: 0;
  box-shadow: 0 0 0 2px #E8D8BE;
}