/* Customer + merchant UX layer. Loaded last so it can refine existing styles. */
:root {
  --libseh-burgundy: #66001f;
  --libseh-olive: #59633A;
  --libseh-beige: #E8D8BE;
  --libseh-ivory: #FBF7F0;
  --libseh-ink: #31352C;
}

.libseh-toast {
  position: fixed;
  inset-inline: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  max-width: 420px;
  margin-inline: auto;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--libseh-ivory);
  color: var(--libseh-ink);
  border: 1px solid rgba(120, 29, 58, .18);
  box-shadow: 0 10px 30px rgba(49, 53, 44, .08);
  text-align: center;
  font-weight: 600;
}

.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: end center;
  background: rgba(49, 53, 44, .28);
}
.share-sheet[hidden] { display: none; }
.share-sheet-card {
  width: min(100%, 420px);
  background: var(--libseh-ivory);
  border-radius: 24px 24px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 10px;
}
.share-sheet-card a,
.share-sheet-card button {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(120, 29, 58, .16);
  background: #f6f1e8;
  color: var(--libseh-ink);
  font: inherit;
  display: grid;
  place-items: center;
}

.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(49, 53, 44, .32);
}
.welcome-card {
  width: min(100%, 460px);
  background: linear-gradient(180deg, #fffdf8, var(--libseh-ivory));
  border: 1px solid rgba(120, 29, 58, .16);
  border-radius: 28px;
  padding: 28px 22px 22px;
  position: relative;
  box-shadow: 0 18px 40px rgba(49, 53, 44, .08);
}
.welcome-card h2 { color: var(--libseh-burgundy); margin: 0 0 8px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.welcome-actions .pill { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .welcome-modal, .share-sheet, .libseh-toast { animation: none; }
}

body.home-page .home-hero-overlay {
  background:
    linear-gradient(180deg, rgba(20, 10, 12, .12) 0%, rgba(20, 10, 12, .18) 40%, rgba(20, 10, 12, .42) 100%) !important;
}
body.home-page .home-hero::after {
  background:
    linear-gradient(180deg, rgba(20, 10, 12, .08) 0%, rgba(20, 10, 12, .16) 50%, rgba(20, 10, 12, .38) 100%) !important;
}
body.home-page .hero-panel,
body.home-page .home-hero .hero-content.hero-panel,
body.home-page .home-hero .hero-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.home-page .hero-panel {
  padding: 0 !important;
  max-width: none;
}
body.home-page .hero-panel h1,
body.home-page .hero-panel .hero-title { color: #fff; }
body.home-page .hero-panel p,
body.home-page .hero-panel .eyebrow { color: #fff; }
@media (max-width: 720px) {
  body.home-page .hero-panel {
    margin-top: auto;
    margin-bottom: 18px;
    width: 100%;
  }
}

.libseh-header .header-tools { display: flex; align-items: center; gap: 6px; }
.round-icon, .pill, .sp-icon-btn, .store-heart, .product-heart { min-width: 44px; min-height: 44px; }
.account-menu > div { z-index: 40; }

.sp-info-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100%);
  background: var(--libseh-ivory);
  z-index: 70;
  overflow: auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-inline-start: 1px solid rgba(120, 29, 58, .12);
  box-shadow: -12px 0 30px rgba(49, 53, 44, .08);
}
.sp-info-drawer[hidden] { display: none; }
.sp-info-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
@media (max-width: 720px) {
  .sp-info-drawer {
    inset-block: auto 0;
    inset-inline: 0;
    width: 100%;
    max-height: 86vh;
    border-radius: 24px 24px 0 0;
    border-inline-start: 0;
  }
}

.fav-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.fav-tabs a {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(120, 29, 58, .16);
  display: grid;
  place-items: center;
}
.fav-tabs a.active { background: var(--libseh-burgundy); color: #fff; }
.product-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.field-hint { display: block; color: #6a655c; font-size: .85rem; font-weight: 400; }
.image-preview-row { display: flex; flex-wrap: wrap; gap: 8px; }
.image-preview-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.merchant-fieldset {
  border: 1px solid rgba(120, 29, 58, .12);
  border-radius: 18px;
  padding: 14px;
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}
.merchant-fieldset legend {
  padding-inline: 8px;
  color: var(--libseh-burgundy);
  font-weight: 700;
}
.merchant-order-embed .dashboard-order-page { padding: 0; }
.merchant-order-embed .dashboard-order-grid { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .merchant-order-embed .dashboard-order-grid { grid-template-columns: 1fr 1fr; }
}
.merchant-order-embed .dashboard-order-items article,
.merchant-order-embed .dashboard-order-history div {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(120, 29, 58, .1);
  border-radius: 14px;
  margin-bottom: 8px;
}
@media (max-width: 720px) {
  .merchant-order-embed .dashboard-order-items article { grid-template-columns: 64px 1fr; }
  .merchant-order-embed img { max-width: 100%; height: auto; }
}
.merchant-table { overflow-x: auto; }
@media (max-width: 720px) {
  .merchant-table article, .merchant-table form {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(120, 29, 58, .1);
    border-radius: 16px;
    margin-bottom: 10px;
  }
}
.sp-icon-btn.saved, .product-heart.saved, .store-heart.saved { color: var(--libseh-burgundy); }

/* ——— Unified customer design ——— */
html:has(body:not(.admin-view):not(.merchant-view)),
body:not(.admin-view):not(.merchant-view) {
  max-width: 100%;
  background: var(--libseh-ivory);
  color: var(--libseh-ink);
}
body.lang-he:not(.admin-view):not(.merchant-view) {
  font-family: "Heebo", "Cairo", sans-serif;
}
body:not(.admin-view):not(.merchant-view) .pill.primary,
body:not(.admin-view):not(.merchant-view) button.pill.primary {
  background: var(--libseh-burgundy) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
body:not(.admin-view):not(.merchant-view) .pill.ghost,
body:not(.admin-view):not(.merchant-view) .pill.secondary {
  background: #f6f1e8 !important;
  color: var(--libseh-ink) !important;
  border: 1px solid rgba(120, 29, 58, .16) !important;
  box-shadow: none !important;
}

body:not(.admin-view):not(.merchant-view) .libseh-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(120, 29, 58, .1) !important;
  border-radius: 0 !important;
  background: rgba(251, 247, 240, .96) !important;
  box-shadow: 0 6px 18px rgba(49, 53, 44, .04) !important;
  backdrop-filter: blur(12px) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}
body:not(.admin-view):not(.merchant-view) .libseh-header-inner {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(1180px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: none !important;
  padding-inline: 0 !important;
  gap: 12px !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
body:not(.admin-view):not(.merchant-view) .libseh-mark {
  flex: 0 0 auto !important;
  overflow: visible !important;
  max-width: none !important;
}
body:not(.admin-view):not(.merchant-view) .libseh-mark img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 168px !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}
body:not(.admin-view):not(.merchant-view) .customer-main-nav {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: clamp(14px, 2vw, 28px) !important;
}
body:not(.admin-view):not(.merchant-view) .customer-main-nav a {
  color: var(--libseh-ink) !important;
  font-weight: 700 !important;
  padding-block: 10px !important;
}
body:not(.admin-view):not(.merchant-view) .customer-main-nav a.active,
body:not(.admin-view):not(.merchant-view) .customer-main-nav a:hover {
  color: var(--libseh-burgundy) !important;
}
body:not(.admin-view):not(.merchant-view) .libseh-actions,
body:not(.admin-view):not(.merchant-view) .header-tools {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}
body:not(.admin-view):not(.merchant-view) .round-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--libseh-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body:not(.admin-view):not(.merchant-view) .header-bell > span,
body:not(.admin-view):not(.merchant-view) .header-fav > span,
body:not(.admin-view):not(.merchant-view) .bottom-cart-badge {
  position: absolute !important;
  inset-block-start: -4px !important;
  inset-inline-end: -6px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border-radius: 99px !important;
  background: var(--libseh-burgundy) !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 16px !important;
  text-align: center !important;
}
body:not(.admin-view):not(.merchant-view) .account-menu > div {
  position: absolute !important;
  inset-inline-end: 0 !important;
  inset-block-start: calc(100% + 8px) !important;
  min-width: 220px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: #f6f1e8 !important;
  border: 1px solid rgba(120, 29, 58, .12) !important;
  box-shadow: 0 12px 28px rgba(49, 53, 44, .08) !important;
  display: grid !important;
  gap: 4px !important;
}
body:not(.admin-view):not(.merchant-view) .account-menu a,
body:not(.admin-view):not(.merchant-view) .account-menu button {
  min-height: 44px !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  text-align: start !important;
}
body:not(.admin-view):not(.merchant-view) .header-logout,
body:not(.admin-view):not(.merchant-view) .header-text-link {
  display: none !important;
}
body:not(.admin-view):not(.merchant-view) .language-switcher {
  display: flex !important;
  gap: 2px !important;
}

@media (max-width: 1024px) {
  body:not(.admin-view):not(.merchant-view) .customer-main-nav,
  body:not(.admin-view):not(.merchant-view) .language-switcher {
    display: none !important;
  }
  body:not(.admin-view):not(.merchant-view) .libseh-header-inner {
    width: calc(100% - 20px) !important;
    height: 68px !important;
    min-height: 68px !important;
  }
  body:not(.admin-view):not(.merchant-view) .libseh-mark img {
    height: 44px !important;
    max-height: 44px !important;
  }
  body:not(.admin-view):not(.merchant-view) .header-tools .header-search,
  body:not(.admin-view):not(.merchant-view) .header-tools .bag-trigger,
  body:not(.admin-view):not(.merchant-view) .header-tools .header-bell,
  body:not(.admin-view):not(.merchant-view) .header-tools .account-menu {
    display: inline-flex !important;
  }
  body:not(.admin-view):not(.merchant-view) .mobile-menu-toggle {
    display: inline-grid !important;
  }
}

body:not(.admin-view):not(.merchant-view) .home-hero {
  position: relative !important;
  width: 100% !important;
  min-height: calc(100svh - 72px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #2a181c !important;
  display: grid !important;
  align-items: end !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero-slides,
body:not(.admin-view):not(.merchant-view) .home-hero-overlay,
body:not(.admin-view):not(.merchant-view) .home-hero::after {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 0 !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero::after {
  content: "" !important;
  display: block !important;
  background: linear-gradient(180deg, rgba(20, 10, 12, .08) 0%, rgba(20, 10, 12, .12) 46%, rgba(20, 10, 12, .48) 100%) !important;
  pointer-events: none !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero .hero-content,
body:not(.admin-view):not(.merchant-view) .home-hero .hero-panel {
  position: relative !important;
  z-index: 2 !important;
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 0 48px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: grid !important;
  gap: 14px !important;
  justify-items: start !important;
  align-content: end !important;
  text-align: start !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero .hero-content > * {
  max-width: min(36rem, 100%) !important;
  margin-inline: 0 !important;
}
/* Desktop overlay copy only — mobile uses ivory stacked panel in libseh-hero.css */
@media (min-width: 700px) {
body:not(.admin-view):not(.merchant-view) .home-hero h1,
body:not(.admin-view):not(.merchant-view) .home-hero .hero-title {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 4.4rem) !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 18px rgba(20, 10, 12, .28) !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero p,
body:not(.admin-view):not(.merchant-view) .home-hero .eyebrow {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(20, 10, 12, .28) !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: auto !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero .hero-actions .pill {
  min-height: 48px !important;
  padding: 12px 22px !important;
  width: auto !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero .pill.ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, .78) !important;
}
body:not(.admin-view):not(.merchant-view) .home-hero .hero-dots {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  min-height: 20px !important;
}
html body:not(.admin-view):not(.merchant-view) .home-hero .hero-dots button {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, .55) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
html body:not(.admin-view):not(.merchant-view) .home-hero .hero-dots button::after,
html body:not(.admin-view):not(.merchant-view) .home-hero .hero-dots button::before {
  display: none !important;
  content: none !important;
}
html body:not(.admin-view):not(.merchant-view) .home-hero .hero-dots button.is-active {
  width: 22px !important;
  background: #f6f1e8 !important;
}
} /* end min-width:700px hero overlay */

body:not(.admin-view):not(.merchant-view) .home-section-head {
  text-align: center;
  margin-bottom: 22px;
}
body:not(.admin-view):not(.merchant-view) .home-section-head h2 {
  margin: 4px 0;
  color: var(--libseh-burgundy);
}
body:not(.admin-view):not(.merchant-view) .home-section-head .eyebrow {
  color: var(--libseh-olive);
  font-weight: 700;
}
body:not(.admin-view):not(.merchant-view) .luxe-product-card,
body:not(.admin-view):not(.merchant-view) .featured-store,
body:not(.admin-view):not(.merchant-view) .directory-store,
body:not(.admin-view):not(.merchant-view) .account-card,
body:not(.admin-view):not(.merchant-view) .order-card {
  background: #f6f1e8;
  border: 1px solid rgba(120, 29, 58, .1);
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(49, 53, 44, .05);
}
body:not(.admin-view):not(.merchant-view) .luxe-product-card img,
body:not(.admin-view):not(.merchant-view) .featured-store img {
  object-fit: cover;
  border-radius: 16px;
}
body:not(.admin-view):not(.merchant-view).has-bottom-nav main {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
body:not(.admin-view):not(.merchant-view) .bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(251, 247, 240, .96);
  border-top: 1px solid rgba(120, 29, 58, .1);
}
body:not(.admin-view):not(.merchant-view) .bottom-nav a {
  min-height: 44px;
  color: var(--libseh-ink);
}
body:not(.admin-view):not(.merchant-view) .bottom-nav a.active {
  color: var(--libseh-burgundy);
}

@media (max-width: 720px) {
  body:not(.admin-view):not(.merchant-view) .home-hero {
    min-height: 0 !important;
    height: auto !important;
    align-items: stretch !important;
  }
  body:not(.admin-view):not(.merchant-view) .home-hero .hero-content {
    width: 100% !important;
    padding: 0 !important;
  }
  body:not(.admin-view):not(.merchant-view) .home-hero .hero-actions {
    width: 100% !important;
    flex-direction: column !important;
  }
  body:not(.admin-view):not(.merchant-view) .home-hero .hero-actions .pill {
    width: 100% !important;
  }
  body:not(.admin-view):not(.merchant-view) img {
    max-width: 100%;
  }
  body:not(.admin-view):not(.merchant-view) .libseh-mark img {
    max-height: 42px !important;
  }
}

/* Beat older mobile.css that hid the account icon and used a 3-column header. */
@media (max-width: 1023px) {
  html body:not(.admin-view):not(.merchant-view) .libseh-header {
    width: 100% !important;
    top: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  html body:not(.admin-view):not(.merchant-view) .libseh-header-inner {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    width: calc(100% - 16px) !important;
    height: 64px !important;
    min-height: 64px !important;
    gap: 6px !important;
  }
  html body:not(.admin-view):not(.merchant-view) .mobile-menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
  }
  html body:not(.admin-view):not(.merchant-view) .libseh-mark {
    justify-self: center !important;
    min-width: 0 !important;
  }
  html body:not(.admin-view):not(.merchant-view) .libseh-mark img {
    max-width: min(38vw, 140px) !important;
    height: 40px !important;
  }
  html body:not(.admin-view):not(.merchant-view) .customer-main-nav,
  html body:not(.admin-view):not(.merchant-view) .libseh-header .language-switcher,
  html body:not(.admin-view):not(.merchant-view) .header-dashboard-link {
    display: none !important;
  }
  html body:not(.admin-view):not(.merchant-view) .libseh-actions,
  html body:not(.admin-view):not(.merchant-view) .header-tools {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    gap: 2px !important;
  }
  html body:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > * {
    display: none !important;
  }
  html body:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > .header-search,
  html body:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > .bag-trigger,
  html body:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > .header-bell,
  html body:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > .account-menu {
    display: inline-flex !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 44px !important;
  }
  html body:not(.admin-view):not(.merchant-view) .account-menu > div {
    inset-inline-end: 0 !important;
    width: min(280px, calc(100vw - 24px)) !important;
  }
}

@media (max-width: 359px) {
  html body:not(.admin-view):not(.merchant-view) .libseh-header .header-tools > .header-bell {
    display: none !important;
  }
  html body:not(.admin-view):not(.merchant-view) .home-hero h1 {
    font-size: clamp(1.55rem, 8vw, 2rem) !important;
  }
}

html body:not(.admin-view):not(.merchant-view) .container,
html body:not(.admin-view):not(.merchant-view) .page-container {
  width: min(1180px, calc(100% - 24px)) !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

html body:not(.admin-view):not(.merchant-view) .luxe-product-grid,
html body:not(.admin-view):not(.merchant-view) .product-grid,
html body:not(.admin-view):not(.merchant-view) .sp-products,
html body:not(.admin-view):not(.merchant-view) .favorite-results {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
html body:not(.admin-view):not(.merchant-view) .luxe-product-card,
html body:not(.admin-view):not(.merchant-view) .directory-store {
  min-width: 0 !important;
  max-width: 100% !important;
}
html body:not(.admin-view):not(.merchant-view) .luxe-product-card img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  object-fit: cover !important;
}
html body:not(.admin-view):not(.merchant-view) .luxe-product-card .pill,
html body:not(.admin-view):not(.merchant-view) .sp-toolbar .pill,
html body:not(.admin-view):not(.merchant-view) .sp-toolbar-row .pill {
  min-height: 44px !important;
}

html body:not(.admin-view):not(.merchant-view) .store-grid,
html body:not(.admin-view):not(.merchant-view) .follows-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
html body:not(.admin-view):not(.merchant-view) .sp-toolbar-row,
html body:not(.admin-view):not(.merchant-view) .sp-toolbar,
html body:not(.admin-view):not(.merchant-view) .product-toolbar,
html body:not(.admin-view):not(.merchant-view) .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
html body:not(.admin-view):not(.merchant-view) .product-buy,
html body:not(.admin-view):not(.merchant-view) .cart-layout,
html body:not(.admin-view):not(.merchant-view) .auth-shell,
html body:not(.admin-view):not(.merchant-view) .dashboard-order-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  min-width: 0 !important;
}
html body:not(.admin-view):not(.merchant-view) input,
html body:not(.admin-view):not(.merchant-view) select,
html body:not(.admin-view):not(.merchant-view) textarea,
html body:not(.admin-view):not(.merchant-view) button,
html body:not(.admin-view):not(.merchant-view) .pill {
  max-width: 100% !important;
}
html body:not(.admin-view):not(.merchant-view) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body:not(.admin-view):not(.merchant-view) select,
html body:not(.admin-view):not(.merchant-view) textarea {
  min-height: 44px;
  font-size: 16px !important;
}
html body:not(.admin-view):not(.merchant-view) .welcome-modal,
html body:not(.admin-view):not(.merchant-view) .share-sheet,
html body:not(.admin-view):not(.merchant-view) .search-overlay,
html body:not(.admin-view):not(.merchant-view) .cart-drawer,
html body:not(.admin-view):not(.merchant-view) .mobile-site-menu {
  max-width: 100vw !important;
}
html body:not(.admin-view):not(.merchant-view) .welcome-card,
html body:not(.admin-view):not(.merchant-view) .share-sheet-card,
html body:not(.admin-view):not(.merchant-view) .lucky-card {
  width: min(100% - 24px, 460px) !important;
  max-height: min(90svh, 720px) !important;
  overflow: auto !important;
}
html body:not(.admin-view):not(.merchant-view) .libseh-footer,
html body:not(.admin-view):not(.merchant-view) .footer-grid {
  max-width: 100% !important;
}

@media (min-width: 768px) {
  html body:not(.admin-view):not(.merchant-view) .luxe-product-grid,
  html body:not(.admin-view):not(.merchant-view) .product-grid,
  html body:not(.admin-view):not(.merchant-view) .favorite-results {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  html body:not(.admin-view):not(.merchant-view) .store-grid,
  html body:not(.admin-view):not(.merchant-view) .follows-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body:not(.admin-view):not(.merchant-view) .product-buy,
  html body:not(.admin-view):not(.merchant-view) .cart-layout {
    grid-template-columns: 1.1fr .9fr !important;
    align-items: start !important;
  }
  html body:not(.admin-view):not(.merchant-view) .home-hero .hero-actions {
    flex-direction: row !important;
  }
}

@media (min-width: 1024px) {
  html body:not(.admin-view):not(.merchant-view) .luxe-product-grid,
  html body:not(.admin-view):not(.merchant-view) .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html body:not(.admin-view):not(.merchant-view) .store-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html body:not(.admin-view):not(.merchant-view) .libseh-footer .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr !important;
  }
}

@media (min-width: 1280px) {
  html body.home-page:not(.admin-view):not(.merchant-view) .home-hero {
    min-height: 0 !important;
  }
}

/* Merchant dashboard: cards instead of wide tables on phones */
@media (max-width: 1023px) {
  html body.merchant-view .aya-topbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html body.merchant-view .aya-search,
  html body.merchant-view .aya-tools,
  html body.merchant-view .admin-form,
  html body.merchant-view .merchant-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.merchant-view .admin-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  html body.merchant-view input,
  html body.merchant-view select,
  html body.merchant-view textarea,
  html body.merchant-view .pill {
    max-width: 100% !important;
    min-height: 44px;
  }
  html body.merchant-view .m-order-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.merchant-view .m-order-tabs a {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-view):not(.merchant-view) * {
    animation: none !important;
    transition: none !important;
  }
}

/* Home: benefits grid + featured store cards */
html body:not(.admin-view):not(.merchant-view) .site-benefits {
  width: 100% !important;
  margin: 0 !important;
  padding: 36px 0 !important;
  background: var(--libseh-ivory) !important;
  border: 0 !important;
}
html body:not(.admin-view):not(.merchant-view) .site-benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px 18px !important;
  width: min(1180px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
  justify-items: center !important;
  text-align: center !important;
}
html body:not(.admin-view):not(.merchant-view) .site-benefit {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 280px !important;
  margin: 0 !important;
  text-align: center !important;
}
html body:not(.admin-view):not(.merchant-view) .site-benefit svg {
  width: 32px !important;
  height: 32px !important;
  stroke: currentColor !important;
  fill: none !important;
}
html body:not(.admin-view):not(.merchant-view) .site-benefit strong,
html body:not(.admin-view):not(.merchant-view) .site-benefit p {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

html body:not(.admin-view):not(.merchant-view) #featured-stores .store-carousel {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
}
html body:not(.admin-view):not(.merchant-view) #featured-stores .store-carousel-track {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  padding: 8px 4px 16px !important;
  max-width: 100% !important;
}
html body:not(.admin-view):not(.merchant-view) #featured-stores .featured-store {
  position: relative !important;
  flex: 0 0 min(220px, calc(100% - 8px)) !important;
  width: min(220px, calc(100% - 8px)) !important;
  max-width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
  padding: 18px 14px 16px !important;
  margin: 0 !important;
  scroll-snap-align: start !important;
  overflow: visible !important;
}
html body:not(.admin-view):not(.merchant-view) #featured-stores .featured-store .favorite-form {
  position: absolute !important;
  inset-block-start: 8px !important;
  inset-inline-end: 8px !important;
  inset-inline-start: auto !important;
  top: 8px !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 3 !important;
}
html body:not(.admin-view):not(.merchant-view) #featured-stores .featured-store .store-heart {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 40px !important;
  height: 40px !important;
}
html body:not(.admin-view):not(.merchant-view) #featured-stores .featured-store img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
html body:not(.admin-view):not(.merchant-view) #featured-stores .home-featured-more {
  display: flex !important;
  justify-content: center !important;
  margin-top: 8px !important;
}

@media (max-width: 900px) {
  html body:not(.admin-view):not(.merchant-view) .site-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 420px) {
  html body:not(.admin-view):not(.merchant-view) .site-benefits-grid {
    grid-template-columns: 1fr !important;
  }
  html body:not(.admin-view):not(.merchant-view) .site-benefit {
    max-width: none !important;
  }
}
@media (min-width: 768px) {
  html body:not(.admin-view):not(.merchant-view) #featured-stores .store-carousel-track {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    overflow: visible !important;
  }
  html body:not(.admin-view):not(.merchant-view) #featured-stores .featured-store {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 1024px) {
  html body:not(.admin-view):not(.merchant-view) .home-hero {
    border-radius: 0 !important;
    min-height: calc(100svh - 64px) !important;
    margin: 0 !important;
  }
  html body:not(.admin-view):not(.merchant-view).has-bottom-nav .home-hero .hero-content,
  html body:not(.admin-view):not(.merchant-view).has-bottom-nav .home-hero .hero-panel {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body:not(.admin-view):not(.merchant-view) .bottom-nav,
  html body:not(.admin-view):not(.merchant-view) .bottom-nav.customer-bottom-nav {
    inset-inline: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(120, 29, 58, .12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--libseh-ivory) !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html body:not(.admin-view):not(.merchant-view) .bottom-nav a span {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: inherit !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}